/* Harsgebonden Grind (Step Stones): strak, rustig, aards. Prefix hg-. Kleuren uit logo "Opbouw": leisteen, kalk, terracotta. */
@font-face { font-family: "Outfit"; src: url(fonts/outfit.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(fonts/manrope.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
	--hg-slate: #2d3a42;
	--hg-slate2: #3a4851;
	--hg-slate-d: #222c32;
	--hg-kalk: #ece7de;
	--hg-kalk-l: #f5f2ec;
	--hg-paper: #faf8f4;
	--hg-card: #ffffff;
	--hg-terra: #b4613e;
	--hg-terra-d: #94492b;
	--hg-terra-l: #e8a17d;
	--hg-stone: #9aa3a6;
	--hg-stone-l: #c9cfd1;
	--hg-ink: var(--hg-slate);
	--hg-ink2: #4a5860;
	--hg-ink3: #6a767c;
	--hg-line: rgba(45, 58, 66, .14);
	--hg-line-l: rgba(236, 231, 222, .18);
	--hg-head: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
	--hg-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--hg-wrap: 1320px;
	--hg-gut: clamp(20px, 4vw, 48px);
	--hg-sec: clamp(68px, 8.5vw, 128px);
	--hg-ease: cubic-bezier(.2, .7, .2, 1);
	--hg-hd: 116px;
	--hg-r: 6px;
	--lg-doek: var(--hg-slate);
	--lg-base: var(--hg-stone);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hg-hd) + 12px); }
body.hg { margin: 0; background: var(--hg-paper); color: var(--hg-ink); font-family: var(--hg-sans); font-size: 17px; line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.hg img { display: block; max-width: 100%; height: auto; }
.hg a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Elementor-CSS (alleen geladen als er ook gewone Elementor-widgets staan) zet '.elementor a' op geen onderstreping; hier vóór de eigen regels terugzetten */
:where(.hg) .elementor a { text-decoration-line: underline; }
.hg button { font: inherit; color: inherit; }
.hg :focus-visible { outline: 2px solid var(--hg-terra); outline-offset: 3px; }
.hg-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hg-skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--hg-slate); color: #fff !important; padding: 10px 16px; }
.hg-skip:focus { top: 12px; }
.hg-wrap { width: 100%; max-width: calc(var(--hg-wrap) + 2 * var(--hg-gut)); margin: 0 auto; padding: 0 var(--hg-gut); }
.hg-main { display: block; }
.hg-ic { flex: none; }

/* Logo */
/* drie stippen + "Harsgebonden" (vet) "Grind" (dun, terracotta); alles schaalt mee met de lettergrootte */
.hg-lg { display: inline-flex; align-items: center; gap: .32em; font-family: var(--hg-head); font-size: 22px; line-height: 1; white-space: nowrap; letter-spacing: -.01em; }
.hg-lg__stip { display: block; flex: none; width: 2.6em; height: auto; }
.hg-lg__w1 { font-weight: 700; color: #2F3337; }
.hg-lg__w2 { font-weight: 400; color: #B4613E; }
.hg-lg--mark { display: inline-block; }
.hg-logo { display: inline-flex; align-items: center; text-decoration: none !important; color: var(--hg-slate); flex: none; }
.hg-logo--light .hg-lg__w1, .hg-hd--over:not(.is-solid) .hg-lg__w1 { color: #fff; }
.hg-logo--light .hg-lg__w2, .hg-hd--over:not(.is-solid) .hg-lg__w2 { color: #E3927A; }
.hg-hd.is-solid .hg-lg { font-size: 20px; }

/* Typografie */
.hg-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--hg-ink2); }
.hg-eyebrow::before { content: ""; flex: none; width: 22px; height: 13px; border-radius: 2px; background: linear-gradient(var(--hg-terra) 0 0) 0 0 / 100% 6px no-repeat, linear-gradient(currentColor 0 0) 0 7.5px / 100% 1.5px no-repeat, linear-gradient(var(--hg-stone) 0 0) 0 10px / 100% 3px no-repeat; }
.hg-eyebrow--light, .hg-dark .hg-eyebrow, .hg-ph--photo .hg-eyebrow, .hg-hero .hg-eyebrow, .hg-cta .hg-eyebrow { color: var(--hg-kalk); }
.hg-h2, .hg-display, .hg-h3, .hg-ph__title, .hg-hero__title { font-family: var(--hg-head); font-weight: 500; letter-spacing: -.02em; margin: 0; }
.hg-h2 { font-size: clamp(32px, 3.7vw, 52px); line-height: 1.08; }
.hg-display { font-size: clamp(38px, 4.8vw, 68px); line-height: 1.02; }
.hg-h3 { font-size: clamp(21px, 1.7vw, 25px); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.hg-h2 em, .hg-display em, .hg-h3 em, .hg-ph__title em, .hg-hero__title em, .hg-ft__big em, .hg-dd__h em { font-style: normal; color: var(--hg-terra-d); font-weight: 400; }
.hg-dark .hg-h2 em, .hg-hero__title em, .hg-ph--photo .hg-ph__title em, .hg-cta .hg-h2 em, .hg-ft__big em { color: var(--hg-terra-l); }
.hg-intro { font-size: 18.5px; line-height: 1.65; color: var(--hg-ink2); max-width: 700px; margin: 20px 0 0; }
.hg-copy p { margin: 0 0 1.1em; color: var(--hg-ink2); }
.hg-copy p:last-child { margin-bottom: 0; }
.hg-copy a, .hg-intro a, .hg-faq__a a, .hg-note a, .hg-specs a, .hg-ticks a, .hg-tbl a, .hg-small a, .hg-hi__x a, .hg-steps__it a, .hg-card__x a { color: var(--hg-ink); text-decoration-color: var(--hg-terra); }
.hg-copy a:hover, .hg-faq__a a:hover, .hg-specs a:hover, .hg-tbl a:hover { color: var(--hg-terra-d); }
.hg-small { font-size: 14px; color: var(--hg-ink3); line-height: 1.6; }
.hg-small .hg-ic { vertical-align: -3px; }
.hg-ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.hg-ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--hg-ink2); }
.hg-ticks .hg-ic { color: var(--hg-terra); margin-top: 4px; }
.hg-upd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 24px 0 0; font-size: 13.5px; color: var(--hg-ink3); }
.hg-upd .hg-ic { color: var(--hg-terra); }
.hg-ph--photo .hg-upd { color: rgba(255, 255, 255, .78); }
.hg-ph--photo .hg-upd .hg-ic { color: var(--hg-terra-l); }

/* Knoppen en links */
.hg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 1px solid transparent; border-radius: var(--hg-r); font-family: var(--hg-head); font-size: 16px; font-weight: 600; letter-spacing: .01em; text-decoration: none !important; cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .3s var(--hg-ease); white-space: nowrap; }
.hg-btn--terra { background: var(--hg-terra); color: #fff !important; }
.hg-btn--terra:hover { background: var(--hg-terra-d); }
.hg-btn--ghost { border-color: rgba(255, 255, 255, .6); color: #fff !important; background: rgba(255, 255, 255, .06); backdrop-filter: blur(6px); }
.hg-btn--ghost:hover { background: rgba(255, 255, 255, .16); }
.hg-btn--line { border-color: var(--hg-ink); color: var(--hg-ink) !important; }
.hg-btn--line:hover { background: var(--hg-ink); color: #fff !important; }
.hg-btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.hg-btn--lg { min-height: 58px; padding: 0 30px; font-size: 17px; }
.hg-btn:active { transform: translateY(1px); }
.hg-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--hg-head); font-weight: 600; font-size: 16px; text-decoration: none !important; color: var(--hg-ink); border-bottom: 1.5px solid var(--hg-terra); padding-bottom: 3px; transition: gap .3s var(--hg-ease), color .3s; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.hg-link:hover { gap: 16px; color: var(--hg-terra-d); }
.hg-link--light { color: var(--hg-kalk); border-color: var(--hg-terra-l); }
.hg-link--light:hover { color: var(--hg-terra-l); }
.hg-chip { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 30px; background: rgba(250, 248, 244, .92); backdrop-filter: blur(8px); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--hg-ink); }

/* Header */
.hg-hd { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--hg-ink); }
.hg-top { position: relative; z-index: 1; background: var(--hg-slate); color: rgba(236, 231, 222, .86); font-size: 13px; height: 36px; overflow: hidden; transition: height .4s var(--hg-ease); }
.hg-top__in { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 36px; }
.hg-top a { text-decoration: none; color: inherit; }
.hg-top a:hover { color: #fff; }
.hg-top strong { color: #fff; font-weight: 700; }
.hg-top__r { display: flex; align-items: center; gap: 22px; }
.hg-top__r a, .hg-top__score { display: inline-flex; align-items: center; gap: 6px; }
.hg-top .hg-ic { color: var(--hg-terra-l); }
.hg-top__score .hg-ic { fill: currentColor; }
.hg-hd__in { position: relative; display: flex; align-items: center; gap: 26px; height: 80px; transition: height .4s var(--hg-ease); }
.hg-hd::after { content: ""; position: absolute; left: 0; right: 0; top: 36px; bottom: 0; z-index: -1; background: rgba(245, 242, 236, .95); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hg-line); transition: background .4s, border-color .4s, top .4s var(--hg-ease); }
.hg-hd--over:not(.is-solid) { color: #fff; }
.hg-hd--over:not(.is-solid)::after { background: linear-gradient(180deg, rgba(25, 32, 37, .55), rgba(25, 32, 37, 0)); backdrop-filter: none; border-color: transparent; bottom: -40px; }
.hg-hd.is-solid .hg-top { height: 0; }
.hg-hd.is-solid::after { top: 0; }
.hg-hd.is-solid .hg-hd__in { height: 68px; }
.hg-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.hg-nav__a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; border: 0; background: none; font-family: var(--hg-head); font-size: 16px; font-weight: 500; text-decoration: none !important; cursor: pointer; border-radius: var(--hg-r); position: relative; }
.hg-nav__a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; background: var(--hg-terra); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--hg-ease); }
.hg-nav__a:hover::after, .hg-nav__a[aria-current]::after, .hg-nav__dd.is-open > .hg-nav__a::after { transform: scaleX(1); }
.hg-nav__dd { position: static; }
.hg-dd { position: absolute; top: 100%; left: 0; right: 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s, transform .35s var(--hg-ease), visibility .3s; color: var(--hg-ink); background: #fff; border-top: 1px solid var(--hg-line); box-shadow: 0 40px 70px -40px rgba(34, 44, 50, .45); }
.hg-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.hg-nav__dd.is-open .hg-dd { opacity: 1; visibility: visible; transform: none; }
.hg-dd__in { display: grid; grid-template-columns: 320px 1fr; gap: clamp(24px, 3vw, 48px); padding-top: 26px; padding-bottom: 30px; }
.hg-dd__aside { position: relative; overflow: hidden; background: var(--hg-kalk); border-radius: var(--hg-r); padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 12px; }
.hg-dd__aside::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(var(--hg-slate) 0 0) 0 0 / 100% 2px no-repeat, linear-gradient(var(--hg-stone) 0 0) 0 4px / 100% 6px no-repeat; opacity: .8; }
.hg-dd__h { margin: 0; font-family: var(--hg-head); font-size: 28px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; }
.hg-dd__p { margin: 0 0 8px; font-size: 15px; color: var(--hg-ink2); line-height: 1.6; }
.hg-dd__aside .hg-link { align-self: flex-start; margin-top: auto; margin-bottom: 8px; }
.hg-dd__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 16px; align-content: start; }
.hg-dd--colors .hg-dd__grid { grid-template-columns: repeat(4, 1fr); }
.hg-dd__a { display: flex; align-items: center; gap: 14px; padding: 9px 10px; text-decoration: none !important; border-radius: var(--hg-r); transition: background .25s; }
.hg-dd__a:hover, .hg-dd__a:focus-visible { background: var(--hg-kalk-l); }
.hg-dd__img { flex: none; width: 64px; height: 64px; border-radius: var(--hg-r); overflow: hidden; background: var(--hg-kalk); }
.hg-dd--colors .hg-dd__img { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 1px var(--hg-line); }
.hg-dd__img img, .hg-dd__img .hg-img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--hg-ease); }
.hg-dd__a:hover .hg-dd__img img { transform: scale(1.08); }
.hg-dd__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hg-dd__t { font-family: var(--hg-head); font-size: 18px; font-weight: 600; line-height: 1.2; }
.hg-dd__n { font-size: 13px; color: var(--hg-ink3); line-height: 1.35; }
.hg-hd__end { display: flex; align-items: center; gap: 16px; }
.hg-hd__tel { display: inline-flex; align-items: center; gap: 8px; font-family: var(--hg-head); font-size: 16px; font-weight: 600; text-decoration: none !important; white-space: nowrap; }
.hg-burger { display: none; border: 0; background: none; padding: 8px; cursor: pointer; margin-right: -8px; }
.hg-menu { position: fixed; inset: 0; z-index: 150; background: var(--hg-slate); color: var(--hg-kalk); overflow-y: auto; padding: 0 var(--hg-gut) 40px; display: flex; flex-direction: column; }
.hg-menu[hidden] { display: none; }
.hg-menu__top { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.hg-menu__top .hg-lg { font-size: 18px; }
.hg-menu__x { border: 0; background: none; color: inherit; padding: 8px; margin-right: -8px; cursor: pointer; }
.hg-mnav { display: flex; flex-direction: column; margin: 16px 0 28px; border-top: 1px solid var(--hg-line-l); }
.hg-mnav__a { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--hg-line-l); font-family: var(--hg-head); font-size: 26px; font-weight: 500; text-decoration: none !important; list-style: none; cursor: pointer; }
.hg-mnav__a::-webkit-details-marker { display: none; }
.hg-mnav__g[open] .hg-ic { transform: rotate(180deg); }
.hg-mnav__sub { display: grid; padding: 6px 0 16px 2px; border-bottom: 1px solid var(--hg-line-l); }
.hg-mnav__sub a { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 17px; text-decoration: none; color: rgba(236, 231, 222, .85); }
.hg-mnav__sub--colors { grid-template-columns: 1fr 1fr; gap: 0 14px; }
.hg-mnav__sw { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex: none; }
.hg-mnav__sw img { width: 100%; height: 100%; object-fit: cover; }
.hg-menu__foot { margin-top: auto; display: grid; gap: 14px; }
.hg-menu__tel { display: inline-flex; align-items: center; gap: 10px; font-family: var(--hg-head); font-size: 22px; font-weight: 600; text-decoration: none !important; }
.hg-menu__foot p { margin: 0; color: rgba(236, 231, 222, .65); font-size: 14px; }

/* Voor/na-schuifbalk */
.hg-cmp { position: relative; overflow: hidden; --pos: 50%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; background: var(--hg-kalk); aspect-ratio: 3 / 2; border-radius: var(--hg-r); }
.hg-cmp__layer { position: absolute; inset: 0; }
.hg-cmp__layer img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hg-cmp__after { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.hg-cmp__lbl { position: absolute; top: 18px; left: 18px; padding: 7px 14px; border-radius: 30px; background: rgba(34, 44, 50, .6); backdrop-filter: blur(8px); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transition: opacity .3s; }
.hg-cmp__lbl--r { left: auto; right: 18px; }
.hg-cmp.is-low .hg-cmp__after .hg-cmp__lbl, .hg-cmp.is-high .hg-cmp__before .hg-cmp__lbl { opacity: 0; }
.hg-cmp__bar { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .95); box-shadow: 0 0 24px rgba(0, 0, 0, .25); outline: none; }
.hg-cmp__knob { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--hg-terra); box-shadow: 0 10px 30px rgba(34, 44, 50, .35); transition: transform .3s var(--hg-ease); }
.hg-cmp:hover .hg-cmp__knob, .hg-cmp.is-drag .hg-cmp__knob { transform: scale(1.08); }

/* Home-hero */
.hg-hero { position: relative; min-height: min(100svh, 980px); color: #fff; background: var(--hg-slate-d); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.hg-hero__bg { position: absolute; inset: 0; }
.hg-hero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: hgZoom 2.4s var(--hg-ease) forwards; }
.hg-hero__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(25, 32, 37, .92) 0%, rgba(25, 32, 37, .7) 30%, rgba(25, 32, 37, .2) 58%, rgba(25, 32, 37, .1) 100%), linear-gradient(90deg, rgba(25, 32, 37, .45) 0%, rgba(25, 32, 37, 0) 60%); }
.hg-hero__in { position: relative; padding-top: calc(var(--hg-hd) + 60px); padding-bottom: 28px; }
.hg-hero__txt { max-width: 800px; }
.hg-hero__title { font-size: clamp(42px, 5.2vw, 78px); line-height: 1.02; margin: 0 0 20px; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.hg-hero__lead { font-size: clamp(16.5px, 1.35vw, 19.5px); line-height: 1.6; max-width: 620px; margin: 0 0 28px; color: rgba(255, 255, 255, .92); }
.hg-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hg-trust { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14px; font-weight: 600; }
.hg-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hg-trust--light { color: rgba(255, 255, 255, .9); }
.hg-trust .hg-ic { color: var(--hg-terra-l); }
.hg-hero__credit { position: absolute; right: var(--hg-gut); bottom: 10px; margin: 0; font-size: 11px; color: rgba(255, 255, 255, .55); }
@keyframes hgZoom { to { transform: none; } }
/* Kleurenstrip onder in de hero */
.hg-strip { margin-top: clamp(32px, 5vh, 56px); padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .2); display: flex; align-items: center; gap: 22px; }
.hg-strip__h { margin: 0; flex: none; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .75); max-width: 120px; line-height: 1.4; }
.hg-strip__list { list-style: none; margin: 0; padding: 4px 2px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.hg-strip__list::-webkit-scrollbar { display: none; }
.hg-strip__a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none !important; color: #fff; width: 62px; }
.hg-strip__sw { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 6px 18px rgba(0, 0, 0, .35); transition: transform .35s var(--hg-ease), box-shadow .35s; }
.hg-strip__sw img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); }
.hg-strip__n { font-size: 11px; line-height: 1.2; text-align: center; color: rgba(255, 255, 255, .8); opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; }
.hg-strip__a:hover .hg-strip__sw, .hg-strip__a:focus-visible .hg-strip__sw { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 0 2px var(--hg-terra-l), 0 10px 22px rgba(0, 0, 0, .4); }
.hg-strip__a:hover .hg-strip__n, .hg-strip__a:focus-visible .hg-strip__n { opacity: 1; transform: none; }

/* Paginakop */
.hg-ph { position: relative; padding: calc(var(--hg-hd) + clamp(48px, 7vw, 96px)) 0 clamp(44px, 6vw, 76px); background: var(--hg-kalk); }
.hg-ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: linear-gradient(var(--hg-slate) 0 0) 0 0 / 100% 1.5px no-repeat, linear-gradient(var(--hg-stone-l) 0 0) 0 3.5px / 100% 4.5px no-repeat; opacity: .55; }
.hg-ph--photo { min-height: min(74svh, 720px); display: flex; align-items: flex-end; background: var(--hg-slate-d); color: #fff; }
.hg-ph--photo::after { top: 0; height: auto; opacity: 1; background: linear-gradient(0deg, rgba(25, 32, 37, .86) 0%, rgba(25, 32, 37, .45) 42%, rgba(25, 32, 37, .14) 72%, rgba(25, 32, 37, .35) 100%); }
.hg-ph__bg { position: absolute; inset: 0; overflow: hidden; }
.hg-ph__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: hgZoom 2.2s var(--hg-ease) forwards; }
.hg-ph__in { position: relative; z-index: 1; }
.hg-ph__title { font-size: clamp(40px, 5vw, 76px); line-height: 1.03; max-width: 1000px; }
.hg-ph__lead { font-size: clamp(17px, 1.45vw, 20px); max-width: 680px; margin: 20px 0 0; color: var(--hg-ink2); }
.hg-ph--photo .hg-ph__lead { color: rgba(255, 255, 255, .9); }
.hg-ph--404 .hg-hero__btns { margin-top: 30px; }
.hg-bc ol { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--hg-ink3); }
.hg-bc li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.hg-bc a { text-decoration: none; }
.hg-bc a:hover { text-decoration: underline; }
.hg-ph--photo .hg-bc ol { color: rgba(255, 255, 255, .75); }

/* Kop van een kleurpagina */
.hg-ch { position: relative; padding: calc(var(--hg-hd) + clamp(36px, 5vw, 72px)) 0 clamp(48px, 6vw, 80px); background: var(--hg-kalk); }
.hg-ch__in { display: grid; grid-template-columns: 1fr minmax(320px, .92fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hg-ch__chips { list-style: none; margin: 24px 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hg-ch__chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 30px; background: rgba(255, 255, 255, .7); border: 1px solid var(--hg-line); font-size: 13.5px; font-weight: 600; }
.hg-ch__chips li.is-new { background: var(--hg-terra); border-color: var(--hg-terra); color: #fff; }
.hg-ch__dot, .hg-ft__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); flex: none; display: inline-block; }
.hg-ch__media { position: relative; }
.hg-ch__main { display: block; width: 100%; padding: 0; border: 0; aspect-ratio: 1; overflow: hidden; border-radius: 10px; cursor: zoom-in; background: var(--hg-stone-l); box-shadow: 0 40px 80px -40px rgba(34, 44, 50, .55); position: relative; }
.hg-ch__main img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--hg-ease); }
.hg-ch__main:hover img { transform: scale(1.05); }
.hg-ch__zoom { position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .9); color: var(--hg-ink); }
.hg-ch__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.hg-ch__th { width: 76px; height: 76px; padding: 0; border: 0; border-radius: var(--hg-r); overflow: hidden; cursor: zoom-in; box-shadow: 0 0 0 1px var(--hg-line); background: #fff; }
.hg-ch__th img { width: 100%; height: 100%; object-fit: cover; }
.hg-ch__note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; color: var(--hg-ink3); }
.hg-ch__txt .hg-hero__btns .hg-btn--line { background: rgba(255, 255, 255, .5); }

/* Secties */
.hg-sec { padding: var(--hg-sec) 0; }
.hg-sec--tight { padding: clamp(24px, 4vw, 48px) 0; }
.hg-sec + .hg-sec:not(.hg-dark):not(.hg-alt):not(.hg-rev):not(.hg-calc):not(.hg-st):not(.hg-faq):not(.hg-colors):not(.hg-bu):not(.hg-feat):not(.hg-hub):not(.hg-stats):not(.hg-apps) { padding-top: calc(var(--hg-sec) * .5); }
.hg-dark { background: var(--hg-slate); color: var(--hg-kalk); }
.hg-dark .hg-intro, .hg-dark p { color: rgba(236, 231, 222, .78); }
.hg-alt { background: var(--hg-kalk-l); }
.hg-sh { margin-bottom: clamp(32px, 4vw, 56px); max-width: 860px; }
.hg-sh--c { margin-left: auto; margin-right: auto; text-align: center; }
.hg-sh--c .hg-eyebrow { justify-content: center; }
.hg-grid { display: grid; gap: clamp(18px, 2.2vw, 30px); }
.hg-cols-2 { grid-template-columns: repeat(2, 1fr); }
.hg-cols-3 { grid-template-columns: repeat(3, 1fr); }
.hg-cols-4 { grid-template-columns: repeat(4, 1fr); }
.hg-more { margin-top: -40px; padding-bottom: 24px; text-align: center; }

/* Home: kort antwoord + feiten */
.hg-hi__top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px 80px; align-items: end; }
.hg-hi__top .hg-eyebrow { grid-column: 1 / -1; margin: 0; }
.hg-hi__lead p { font-size: 17.5px; }
.hg-hi__lead .hg-link { margin-top: 6px; }
.hg-hi__facts { list-style: none; margin: clamp(44px, 5vw, 76px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--hg-ink); }
.hg-hi__facts li { display: flex; flex-direction: column; gap: 6px; padding: 22px 26px 4px 0; }
.hg-hi__facts li + li { padding-left: 26px; border-left: 1px solid var(--hg-line); }
.hg-hi__n { font-family: var(--hg-head); font-size: clamp(30px, 2.9vw, 42px); font-weight: 500; letter-spacing: -.02em; line-height: 1; color: var(--hg-terra-d); }
.hg-hi__l { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hg-ink); }
.hg-hi__x { font-size: 15px; color: var(--hg-ink2); line-height: 1.55; }

/* Toepassingen (bento) */
.hg-apps { background: var(--hg-kalk-l); }
.hg-bento { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: repeat(2, minmax(250px, 320px)); gap: clamp(12px, 1.4vw, 18px); }
.hg-tile { position: relative; display: block; overflow: hidden; border-radius: var(--hg-r); color: #fff !important; text-decoration: none !important; background: var(--hg-slate2); isolation: isolate; }
.hg-tile--0 { grid-row: span 2; }
.hg-tile--3 { grid-column: span 2; }
.hg-tile__img, .hg-tile__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hg-tile__img img { transition: transform 1.2s var(--hg-ease); }
.hg-tile:hover .hg-tile__img img { transform: scale(1.05); }
.hg-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(25, 32, 37, .82), rgba(25, 32, 37, .1) 58%, rgba(25, 32, 37, 0)); z-index: 0; }
.hg-tile__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(18px, 2vw, 28px); display: flex; flex-direction: column; gap: 4px; }
.hg-tile__b { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--hg-terra-l); }
.hg-tile__t { font-family: var(--hg-head); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.08; font-weight: 500; letter-spacing: -.02em; }
.hg-tile--0 .hg-tile__t { font-size: clamp(30px, 3vw, 44px); }
.hg-tile__x { font-size: 14.5px; color: rgba(255, 255, 255, .85); }
.hg-tile__go { position: absolute; top: 16px; right: 16px; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .55); transition: background .3s, color .3s, transform .4s var(--hg-ease); }
.hg-tile:hover .hg-tile__go { background: #fff; color: var(--hg-ink); transform: rotate(-45deg); }
.hg-apps__more { margin: 28px 0 0; }

/* Kleurenkaart */
.hg-colors { background: var(--hg-card); border-top: 1px solid var(--hg-line); border-bottom: 1px solid var(--hg-line); }
.hg-cf { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 30px; }
.hg-cf button { display: inline-flex; align-items: baseline; gap: 8px; border: 1px solid var(--hg-line); background: transparent; padding: 10px 18px; border-radius: 40px; font-family: var(--hg-head); font-size: 15.5px; font-weight: 500; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.hg-cf button small { font-family: var(--hg-sans); font-size: 12.5px; color: var(--hg-ink3); }
.hg-cf button:hover { border-color: var(--hg-ink); }
.hg-cf button[aria-pressed="true"] { background: var(--hg-slate); border-color: var(--hg-slate); color: var(--hg-kalk); }
.hg-cf button[aria-pressed="true"] small { color: rgba(236, 231, 222, .7); }
.hg-colors__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 26px 16px; }
.hg-colors__it[hidden] { display: none; }
.hg-sw { display: flex; flex-direction: column; gap: 2px; text-decoration: none !important; }
.hg-sw__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 50%; margin-bottom: 12px; box-shadow: 0 0 0 1px var(--hg-line), 0 14px 30px -18px rgba(34, 44, 50, .6); background: var(--hg-kalk); transition: transform .5s var(--hg-ease), box-shadow .5s; }
.hg-sw__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); transition: transform 1s var(--hg-ease); }
a.hg-sw:hover .hg-sw__img { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--hg-terra), 0 22px 36px -20px rgba(34, 44, 50, .7); }
a.hg-sw:hover .hg-sw__img img { transform: scale(1.4); }
.hg-sw__new { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); padding: 3px 9px; border-radius: 20px; background: var(--hg-terra); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hg-sw__n { font-family: var(--hg-head); font-size: 17px; font-weight: 600; line-height: 1.25; text-align: center; }
.hg-sw__x { font-size: 12.5px; color: var(--hg-ink3); line-height: 1.35; text-align: center; }
.hg-colors__more { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px; margin: 40px 0 0; }

/* Opbouwtekening */
.hg-bu { background: var(--hg-kalk-l); }
.hg-bu__fig { margin: 0; background: var(--hg-card); border: 1px solid var(--hg-line); border-radius: var(--hg-r); padding: clamp(16px, 2.6vw, 36px); color: var(--hg-ink); }
.hg-bu__svg { width: 100%; height: auto; display: block; overflow: visible; }
.hg-js .hg-bu__l, .hg-js .hg-bu__lbl, .hg-js .hg-bu__tag { opacity: 0; transition: opacity .8s var(--hg-ease), transform 1s var(--hg-ease); }
.hg-js .hg-bu__l1 { transform: translateY(-40px); }
.hg-js .hg-bu__l2 { transform: translateY(-26px); }
.hg-js .hg-bu__l3 { transform: translateY(-14px); }
.hg-bu.in .hg-bu__l, .hg-bu.in .hg-bu__lbl, .hg-bu.in .hg-bu__tag { opacity: 1; transform: none; }
.hg-bu.in .hg-bu__l4 { transition-delay: .15s; }
.hg-bu.in .hg-bu__l3 { transition-delay: .35s; }
.hg-bu.in .hg-bu__l2 { transition-delay: .55s; }
.hg-bu.in .hg-bu__l1 { transition-delay: .75s; }
.hg-bu.in .hg-bu__lbl, .hg-bu.in .hg-bu__tag { transition-delay: 1.2s; }
/* Regenbui in de tekening: hg.js zet is-regen (10 s) en daarna is-zon; zonder JS of met reduced motion staat de zon er meteen */
.hg-bu__fig { position: relative; }
.hg-bu__wolken, .hg-bu__regen, .hg-bu__stroom, .hg-bu__sijpel, .hg-bu__front, .hg-bu__nat { opacity: 0; transition: opacity .6s ease, transform 1.4s var(--hg-ease); }
.hg-bu__dr path, .hg-bu__dr ellipse, .hg-bu__sp { opacity: 0; transform-box: fill-box; transform-origin: center; }
.hg-js .hg-bu__zon { opacity: 0; transform: translateY(26px) scale(.85); transform-box: fill-box; transform-origin: center; transition: opacity 1.2s ease .4s, transform 1.6s var(--hg-ease) .4s; }
.hg-bu__stralen { transform-box: fill-box; transform-origin: center; }
.is-regen .hg-bu__wolken, .is-regen .hg-bu__regen, .is-regen .hg-bu__sijpel, .is-regen .hg-bu__front { opacity: 1; }
.is-regen .hg-bu__stroom { opacity: .5; transition-delay: 1s; }
.is-regen .hg-bu__nat { opacity: .2; transition: opacity 2s ease .8s; }
.is-regen .hg-bu__nat--grond { opacity: .16; transition-delay: 2.4s; }
.is-regen .hg-bu__w { animation: hgWolk 3.2s ease-in-out infinite alternate; }
.is-regen .hg-bu__w:nth-child(2n) { animation-duration: 4s; animation-direction: alternate-reverse; }
.is-regen .hg-bu__dr path { animation: hgDrup var(--d) linear var(--o) infinite; }
.is-regen .hg-bu__dr ellipse { animation: hgPlons var(--d) ease-out var(--o) infinite; }
.is-regen .hg-bu__sp { animation: hgSijpel 2.3s cubic-bezier(.35, .1, .6, 1) var(--o) infinite; }
.is-regen .hg-bu__front { animation: hgFront 2.6s cubic-bezier(.3, .2, .6, 1) 1s infinite; }
.is-regen .hg-bu__stroom path { animation: hgFlow 1.6s linear infinite; }
.is-zon .hg-bu__wolken { opacity: 0; transform: translateX(-46px); transition: opacity 1.1s ease, transform 1.6s ease; }
.is-zon .hg-bu__regen { opacity: 0; transition-duration: .35s; }
.is-zon .hg-bu__stroom, .is-zon .hg-bu__front { opacity: 0; transition: opacity 1s ease; }
.is-zon .hg-bu__sijpel { opacity: 0; transition: opacity 1.4s ease .3s; }
.is-zon .hg-bu__nat { opacity: 0; transition: opacity 2.6s ease .6s; }
.hg-bu__fig.is-zon .hg-bu__zon { opacity: 1; transform: none; }
.is-zon .hg-bu__stralen { animation: hgStraal 40s linear infinite; }
@keyframes hgFlow { to { stroke-dashoffset: -22; } }
@keyframes hgWolk { to { transform: translateX(16px); } }
@keyframes hgDrup { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .9; } 62% { opacity: .9; transform: translate(-20px, 94px); } 62.1%, 100% { opacity: 0; transform: translate(-20px, 94px); } }
@keyframes hgPlons { 0%, 61% { opacity: 0; transform: scale(.25); } 64% { opacity: .9; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes hgSijpel { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .95; } 22% { transform: translate(2px, 52px); } 30% { transform: translate(-1px, 64px); } 45% { transform: translate(-3px, 96px); } 85% { opacity: .85; transform: translate(2px, 236px); } 100% { opacity: 0; transform: translate(0, 290px); } }
@keyframes hgFront { to { transform: translateY(450px); } }
@keyframes hgStraal { to { transform: rotate(360deg); } }
.hg-bu__bui { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--hg-line); border-radius: 999px; background: var(--hg-card); color: var(--hg-ink2); font: 600 13px/1 var(--hg-head); cursor: pointer; transition: color .2s, border-color .2s; }
.hg-bu__bui:hover, .hg-bu__bui:focus-visible { color: var(--hg-terra); border-color: currentColor; }
.hg-bu__bui .hg-ic { color: #5b8fb0; }
.hg-bu__bui[hidden] { display: none; }
.hg-bu__facts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hg-bu__facts li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: var(--hg-card); border: 1px solid var(--hg-line); border-radius: var(--hg-r); font-size: 15px; color: var(--hg-ink2); line-height: 1.55; }
.hg-bu__facts .hg-ic { color: var(--hg-terra); margin-top: 2px; }
.hg-bu__facts strong { display: block; font-family: var(--hg-head); font-size: 17px; color: var(--hg-ink); margin-bottom: 2px; }
.hg-bu__more { margin: 26px 0 0; }

/* Rekenhulp */
.hg-calc { background: var(--hg-kalk); }
.hg-calc__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.hg-calc__txt .hg-sh { margin-bottom: 8px; }
.hg-calc__box { background: var(--hg-card); border-radius: 10px; padding: clamp(24px, 3vw, 40px); box-shadow: 0 40px 80px -50px rgba(34, 44, 50, .55); display: grid; gap: 20px; }
.hg-calc__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 0; border: 0; }
.hg-calc__row label, .hg-calc__row legend { font-family: var(--hg-head); font-weight: 600; font-size: 17px; padding: 0; }
.hg-calc__use { display: block; }
.hg-calc__use legend { margin-bottom: 10px; }
.hg-calc__m2, .hg-m2 { display: inline-flex; align-items: center; border: 1px solid var(--hg-stone-l); border-radius: var(--hg-r); overflow: hidden; background: #fff; }
.hg-calc__m2 input, .hg-m2 input { width: 110px; border: 0; padding: 12px 14px; font: inherit; font-family: var(--hg-head); font-size: 22px; font-weight: 600; color: var(--hg-ink); text-align: right; min-height: 52px; outline: none; -moz-appearance: textfield; }
.hg-m2 { width: 100%; }
.hg-m2 input { font-size: 17px; width: 100%; text-align: left; }
.hg-calc__m2 span, .hg-m2 span { padding: 0 14px 0 4px; color: var(--hg-ink3); font-weight: 600; }
.hg-calc__m2:focus-within, .hg-m2:focus-within { border-color: var(--hg-terra); box-shadow: 0 0 0 3px rgba(180, 97, 62, .18); }
.hg-calc__range { width: 100%; accent-color: var(--hg-terra); }
.hg-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; background: var(--hg-kalk-l); border-radius: var(--hg-r); }
.hg-seg label { position: relative; cursor: pointer; }
.hg-seg input { position: absolute; opacity: 0; }
.hg-seg span { display: block; text-align: center; padding: 10px 8px; border-radius: 4px; font-weight: 600; font-size: 15px; transition: background .25s, color .25s; }
.hg-seg input:checked + span { background: var(--hg-slate); color: #fff; }
.hg-seg input:focus-visible + span { outline: 2px solid var(--hg-terra); outline-offset: 2px; }
.hg-calc__res { display: grid; gap: 4px; padding: 20px 22px; background: var(--hg-kalk-l); border-radius: var(--hg-r); border-left: 4px solid var(--hg-terra); }
.hg-calc__lbl { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hg-ink3); }
.hg-calc__out { font-family: var(--hg-head); font-size: clamp(30px, 3vw, 40px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--hg-ink); }
.hg-calc__sub { font-size: 14px; color: var(--hg-ink2); }
.hg-calc__warn { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--hg-terra-d); }
.hg-calc__warn[hidden] { display: none; }
.hg-calc__box .hg-btn { width: 100%; }
.hg-calc__box .hg-small { margin: -6px 0 0; font-size: 13px; }

/* Showtuin */
.hg-st { background: var(--hg-slate); color: var(--hg-kalk); }
.hg-st__in { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.hg-st__img { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--hg-r); }
.hg-st__img img { width: 100%; height: 100%; object-fit: cover; }
.hg-st__img figcaption { position: absolute; left: 16px; bottom: 16px; }
.hg-st__score { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 40px; background: rgba(250, 248, 244, .94); color: var(--hg-ink); font-size: 13.5px; font-weight: 600; }
.hg-st__score strong { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--hg-terra); color: #fff; font-family: var(--hg-head); font-size: 16px; }
.hg-st .hg-sh { margin-bottom: 18px; }
.hg-st .hg-eyebrow { color: var(--hg-kalk); }
.hg-st .hg-h2 em { color: var(--hg-terra-l); }
.hg-st__p { color: rgba(236, 231, 222, .82); margin: 0 0 24px; }
.hg-st__dl { margin: 0 0 28px; display: grid; gap: 14px; }
.hg-st__dl div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding-top: 14px; border-top: 1px solid var(--hg-line-l); }
.hg-st__dl dt { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; font-size: 15px; }
.hg-st__dl dt .hg-ic { color: var(--hg-terra-l); }
.hg-st__dl dd { margin: 0; color: rgba(236, 231, 222, .8); font-size: 15px; }
.hg-st .hg-btn--line { border-color: rgba(236, 231, 222, .6); color: var(--hg-kalk) !important; }
.hg-st .hg-btn--line:hover { background: var(--hg-kalk); color: var(--hg-ink) !important; }

/* Kerncijfers */
.hg-stats { background: var(--hg-kalk-l); border-top: 1px solid var(--hg-line); border-bottom: 1px solid var(--hg-line); }
.hg-stats__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.hg-stats__list li { display: flex; flex-direction: column; gap: 4px; padding: 10px 24px; }
.hg-stats__list li + li { border-left: 1px solid var(--hg-line); }
.hg-stats__n { font-family: var(--hg-head); font-size: clamp(34px, 3.4vw, 50px); font-weight: 500; letter-spacing: -.02em; line-height: 1; color: var(--hg-terra-d); }
.hg-stats__l { font-size: 14.5px; color: var(--hg-ink2); }

/* Combinaties (kleurpagina) */
.hg-combo__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 28px); }
.hg-combo__it { display: flex; flex-direction: column; background: var(--hg-card); border: 1px solid var(--hg-line); border-radius: var(--hg-r); overflow: hidden; text-decoration: none !important; transition: transform .5s var(--hg-ease), box-shadow .5s; }
a.hg-combo__it:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(34, 44, 50, .5); }
.hg-combo__duo { display: grid; grid-template-columns: 1.4fr 1fr; aspect-ratio: 2.2 / 1; }
.hg-combo__a, .hg-combo__b { overflow: hidden; }
.hg-combo__b { border-left: 3px solid #fff; }
.hg-combo__duo img { width: 100%; height: 100%; object-fit: cover; }
.hg-combo__body { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 24px 24px; }
.hg-combo__t { font-family: var(--hg-head); font-size: 22px; font-weight: 600; letter-spacing: -.01em; padding-right: 30px; }
.hg-combo__t span { color: var(--hg-terra); font-weight: 400; }
.hg-combo__x { font-size: 15px; color: var(--hg-ink2); }
.hg-combo__body .hg-card__go { top: 22px; right: 22px; }

/* Werkwijze en stappen */
.hg-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 0 clamp(18px, 2.4vw, 36px); }
.hg-steps--n2 { --n: 2; } .hg-steps--n3 { --n: 3; } .hg-steps--n4 { --n: 4; } .hg-steps--n5 { --n: 5; } .hg-steps--n6 { --n: 3; }
.hg-steps__it { border-top: 1px solid var(--hg-line); padding-top: 20px; margin-bottom: 30px; }
.hg-steps--dark .hg-steps__it { border-color: var(--hg-line-l); }
.hg-steps__n { display: block; font-family: var(--hg-head); font-size: 40px; line-height: 1; font-weight: 300; color: var(--hg-terra); margin-bottom: 14px; }
.hg-steps--dark .hg-steps__n { color: var(--hg-terra-l); }
.hg-steps__it .hg-h3 { margin-bottom: 10px; }
.hg-steps__it p { margin: 0; font-size: 15.5px; color: var(--hg-ink2); }
.hg-steps--dark .hg-steps__it p { color: rgba(236, 231, 222, .74); }
.hg-dark .hg-steps__it a { color: #fff; }
.hg-proc__more { margin: 12px 0 0; }

/* Beoordelingen */
.hg-rev { background: var(--hg-kalk); overflow: hidden; }
.hg-rev__head { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 24px 48px; margin-bottom: clamp(30px, 4vw, 48px); }
.hg-rev__head .hg-sh { margin: 0; }
.hg-rev__score { display: grid; justify-items: start; gap: 6px; max-width: 300px; }
.hg-rev__num { font-family: var(--hg-head); font-size: 68px; line-height: .9; font-weight: 500; letter-spacing: -.03em; }
.hg-stars { display: inline-flex; gap: 3px; color: var(--hg-terra); }
.hg-stars .hg-ic { fill: currentColor; }
.hg-rail__nav { display: flex; gap: 10px; }
.hg-rail__b { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--hg-ink); background: transparent; display: grid; place-items: center; cursor: pointer; transition: background .3s, color .3s; }
.hg-rail__b:hover { background: var(--hg-ink); color: var(--hg-kalk); }
.hg-rail { display: flex; gap: clamp(14px, 1.8vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; margin-right: calc(-1 * var(--hg-gut)); padding-right: var(--hg-gut); }
.hg-rail::-webkit-scrollbar { display: none; }
.hg-rv { flex: 0 0 min(380px, 84vw); scroll-snap-align: start; margin: 0; background: var(--hg-card); border-radius: var(--hg-r); padding: 26px 28px 24px; display: flex; flex-direction: column; gap: 16px; }
.hg-rv__score { font-family: var(--hg-head); font-size: 30px; font-weight: 600; color: var(--hg-terra-d); line-height: 1; }
.hg-rv__score small { font-size: 15px; color: var(--hg-ink3); font-weight: 500; }
.hg-rv blockquote { margin: 0; font-family: var(--hg-head); font-size: 19px; line-height: 1.45; font-weight: 400; flex: 1; }
.hg-rv figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 14px; border-top: 1px solid var(--hg-line); padding-top: 14px; }
.hg-rv figcaption span { color: var(--hg-ink3); font-size: 13px; }
.hg-rev__src { margin: 22px 0 0; }

/* Kaarten */
.hg-card { position: relative; display: flex; flex-direction: column; background: var(--hg-card); border: 1px solid var(--hg-line); border-radius: var(--hg-r); overflow: hidden; text-decoration: none !important; }
.hg-card--link { transition: transform .5s var(--hg-ease), box-shadow .5s; }
.hg-card--link:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(34, 44, 50, .5); }
.hg-card__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hg-kalk); }
.hg-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--hg-ease); }
.hg-card--link:hover .hg-card__img img { transform: scale(1.04); }
.hg-card__body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 26px; flex: 1; position: relative; }
.hg-card__t { font-family: var(--hg-head); font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; padding-right: 36px; }
.hg-card__x { color: var(--hg-ink2); font-size: 15.5px; line-height: 1.6; }
.hg-card__go { position: absolute; top: 24px; right: 22px; color: var(--hg-terra); transition: transform .4s var(--hg-ease); }
.hg-card--link:hover .hg-card__go, a.hg-combo__it:hover .hg-card__go { transform: translateX(4px); }

/* Tekst + foto */
.hg-split__in { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.hg-split--rev .hg-split__txt { order: 2; }
.hg-split--noimg .hg-split__in { grid-template-columns: 1fr; max-width: 860px; }
.hg-split__img { margin: 0; aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--hg-r); }
.hg-split__btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: zoom-in; background: var(--hg-kalk); }
.hg-split__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--hg-ease); }
.hg-split__btn:hover img { transform: scale(1.03); }
.hg-split__txt .hg-h2 { margin-bottom: 22px; }
.hg-split__txt .hg-link { margin-top: 24px; }

/* Voordelen */
.hg-feat { background: var(--hg-card); border-top: 1px solid var(--hg-line); border-bottom: 1px solid var(--hg-line); }
.hg-feat__grid { display: grid; gap: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 48px); }
.hg-feat__grid.hg-cols-2 { grid-template-columns: repeat(2, 1fr); }
.hg-feat__grid.hg-cols-3 { grid-template-columns: repeat(3, 1fr); }
.hg-feat__grid.hg-cols-4 { grid-template-columns: repeat(4, 1fr); }
.hg-feat__it { position: relative; padding-top: 22px; border-top: 2px solid var(--hg-ink); }
.hg-feat__n { position: absolute; top: 22px; right: 0; font-family: var(--hg-head); font-size: 14px; font-weight: 600; color: var(--hg-ink3); }
.hg-feat__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--hg-r); background: var(--hg-kalk); color: var(--hg-terra-d); margin-bottom: 18px; }
.hg-feat__it .hg-h3 { margin-bottom: 8px; }
.hg-feat__it p { margin: 0; color: var(--hg-ink2); font-size: 15.5px; }

/* Galerij */
.hg-gal__grid { display: grid; gap: clamp(12px, 1.4vw, 18px); grid-template-columns: repeat(3, 1fr); }
.hg-gal--2 { grid-template-columns: repeat(2, 1fr); }
.hg-gal--4 { grid-template-columns: repeat(4, 1fr); }
.hg-gal__it { margin: 0; }
.hg-gal__btn { display: block; width: 100%; padding: 0; border: 0; background: var(--hg-kalk); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--hg-r); cursor: zoom-in; }
.hg-gal__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--hg-ease); }
.hg-gal__btn:hover img { transform: scale(1.04); }
.hg-gal__it figcaption { font-size: 14px; color: var(--hg-ink3); margin-top: 10px; }

/* Specificaties */
.hg-specs__in { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.hg-specs__head { position: sticky; top: calc(var(--hg-hd) + 24px); }
.hg-specs table { width: 100%; border-collapse: collapse; }
.hg-specs th, .hg-specs td { text-align: left; vertical-align: top; padding: 15px 0; border-bottom: 1px solid var(--hg-line); font-size: 15.5px; }
.hg-specs tr:first-child th, .hg-specs tr:first-child td { border-top: 2px solid var(--hg-ink); }
.hg-specs th { width: 34%; padding-right: 24px; font-family: var(--hg-head); font-weight: 600; font-size: 16px; }
.hg-specs td { color: var(--hg-ink2); }
.hg-specs .hg-small { margin-top: 16px; }

/* Pijler-overzicht */
.hg-hub { background: var(--hg-card); border-bottom: 1px solid var(--hg-line); }
.hg-hub__g + .hg-hub__g { margin-top: 40px; }
.hg-hub__h { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--hg-ink2); display: flex; align-items: center; gap: 14px; }
.hg-hub__h::after { content: ""; flex: 1; height: 1px; background: var(--hg-line); }
.hg-hub__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hg-hub__a { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border: 1px solid var(--hg-line); border-radius: var(--hg-r); text-decoration: none !important; background: #fff; transition: border-color .3s, background .3s, box-shadow .3s; }
.hg-hub__a:hover { border-color: var(--hg-stone-l); background: var(--hg-kalk-l); box-shadow: inset 4px 0 0 var(--hg-terra); }
.hg-hub__a > .hg-ic { margin-left: auto; color: var(--hg-terra); flex: none; transition: transform .3s var(--hg-ease); }
.hg-hub__a:hover > .hg-ic { transform: translateX(4px); }
.hg-hub__img { flex: none; width: 64px; height: 64px; border-radius: var(--hg-r); overflow: hidden; background: var(--hg-kalk); display: grid; place-items: center; }
.hg-hub__img img { width: 100%; height: 100%; object-fit: cover; }
.hg-hub__b { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hg-hub__t { font-family: var(--hg-head); font-size: 18px; font-weight: 600; line-height: 1.2; }
.hg-hub__x { font-size: 13.5px; color: var(--hg-ink3); line-height: 1.45; }
.hg-hub__k { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hg-terra-d); margin-top: 3px; }

/* Vergelijkingstabellen */
.hg-tbl__wrap { overflow-x: auto; background: #fff; border: 1px solid var(--hg-line); border-radius: var(--hg-r); }
.hg-tbl__t { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.hg-tbl__t thead th { text-align: left; vertical-align: bottom; padding: 18px 20px 14px; background: var(--hg-kalk); font-family: var(--hg-head); font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--hg-ink); }
.hg-tbl__t thead th.is-hl { background: var(--hg-slate); color: #fff; box-shadow: inset 0 4px 0 var(--hg-terra); }
.hg-tbl__t tbody th, .hg-tbl__t td { text-align: left; vertical-align: top; padding: 14px 20px; border-top: 1px solid var(--hg-line); line-height: 1.55; }
.hg-tbl__t tbody th { width: 21%; font-weight: 700; color: var(--hg-ink); font-size: 14.5px; }
.hg-tbl__t td { color: var(--hg-ink2); }
.hg-tbl__t td.is-hl { background: #f8f3ee; color: var(--hg-ink); }
.hg-tbl__t tbody tr:hover th, .hg-tbl__t tbody tr:hover td { background: #fbf9f6; }
.hg-tbl__note { margin-top: 14px; }
@media (max-width: 760px) {
	.hg-tbl__wrap { border: 0; background: none; overflow: visible; }
	.hg-tbl__t, .hg-tbl__t tbody, .hg-tbl__t tr, .hg-tbl__t th, .hg-tbl__t td { display: block; width: 100%; }
	.hg-tbl__t thead { display: none; }
	.hg-tbl__t tr { background: #fff; border: 1px solid var(--hg-line); border-radius: var(--hg-r); margin-bottom: 12px; overflow: hidden; }
	.hg-tbl__t tbody th { width: 100%; background: var(--hg-kalk); border: 0; padding: 12px 16px; font-family: var(--hg-head); font-size: 16px; }
	.hg-tbl__t td { padding: 10px 16px; border-top: 1px solid var(--hg-line); }
	.hg-tbl__t td::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hg-ink3); margin-bottom: 2px; }
	.hg-tbl__t td.is-hl::before { color: var(--hg-terra-d); }
}

/* Uitleg (prose) */
.hg-prose__in { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.hg-prose__head { position: sticky; top: calc(var(--hg-hd) + 24px); }
.hg-prose__body { max-width: 740px; }
.hg-prose__body .hg-h3 { margin: 34px 0 10px; }
.hg-prose__body .hg-h3:first-child { margin-top: 0; }

/* Kanttekening */
.hg-note { display: flex; gap: 20px; align-items: flex-start; background: var(--hg-card); border: 1px solid var(--hg-line); border-left: 4px solid var(--hg-terra); border-radius: var(--hg-r); padding: 24px 28px; max-width: 980px; }
.hg-note__ic { color: var(--hg-terra); margin-top: 2px; }
.hg-note__t { font-family: var(--hg-head); font-size: 21px; font-weight: 600; line-height: 1.25; margin: 0 0 6px; }
.hg-note p { margin: 0; color: var(--hg-ink2); }

/* FAQ */
.hg-faq { background: var(--hg-card); border-top: 1px solid var(--hg-line); }
.hg-faq__in { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.hg-faq__side { position: sticky; top: calc(var(--hg-hd) + 24px); }
.hg-faq__side .hg-sh { margin-bottom: 28px; }
.hg-faq__card { background: var(--hg-kalk); border-radius: var(--hg-r); padding: 24px 26px; }
.hg-faq__card p { margin: 0 0 10px; color: var(--hg-ink2); font-size: 15.5px; }
.hg-faq__card .hg-link { border: 0; padding: 0; }
.hg-faq__ct { font-family: var(--hg-head); font-size: 21px; color: var(--hg-ink) !important; font-weight: 600; }
.hg-faq__list { border-top: 2px solid var(--hg-ink); }
.hg-faq__it { border-bottom: 1px solid var(--hg-line); }
.hg-faq__it summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none; font-family: var(--hg-head); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.35; font-weight: 500; }
.hg-faq__it summary::-webkit-details-marker { display: none; }
.hg-faq__it summary .hg-ic { margin-top: 3px; color: var(--hg-terra); transition: transform .4s var(--hg-ease); }
.hg-faq__it[open] summary .hg-ic { transform: rotate(45deg); }
.hg-faq__a { padding: 0 48px 22px 0; color: var(--hg-ink2); }
.hg-faq__a p { margin: 0 0 .8em; }
.hg-faqs__in { display: grid; grid-template-columns: 250px 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.hg-faqs__nav { position: sticky; top: calc(var(--hg-hd) + 24px); display: flex; flex-direction: column; border-top: 2px solid var(--hg-ink); }
.hg-faqs__nav a { padding: 11px 0; border-bottom: 1px solid var(--hg-line); text-decoration: none; font-weight: 600; font-size: 15px; }
.hg-faqs__nav a:hover { color: var(--hg-terra-d); }
.hg-faqg + .hg-faqg { margin-top: 56px; }
.hg-faqg__t { font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 18px; font-weight: 500; }

/* Offerteband */
.hg-cta { position: relative; padding: clamp(88px, 11vw, 160px) 0; color: #fff; overflow: hidden; background: var(--hg-slate-d); }
.hg-cta__bg, .hg-cta__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hg-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(25, 32, 37, .9) 0%, rgba(25, 32, 37, .62) 50%, rgba(25, 32, 37, .25) 100%); }
.hg-cta__in { position: relative; z-index: 1; }
.hg-cta .hg-h2 { max-width: 760px; font-size: clamp(36px, 4.6vw, 66px); }
.hg-cta p { max-width: 560px; font-size: 18.5px; color: rgba(255, 255, 255, .88); margin: 20px 0 30px; }
.hg-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Contactinfo en formulier */
.hg-cinfo { background: var(--hg-card); border-bottom: 1px solid var(--hg-line); }
.hg-cinfo__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hg-cinfo__grid li { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.hg-cinfo__ic { color: var(--hg-terra); margin-bottom: 4px; }
.hg-cinfo__t { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hg-ink3); }
.hg-cinfo__v { font-family: var(--hg-head); font-size: 19px; line-height: 1.35; font-weight: 500; }
.hg-cinfo__v a { text-decoration: none; }
.hg-form-sec__in { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.hg-form-aside { position: sticky; top: calc(var(--hg-hd) + 24px); }
.hg-form-aside .hg-h2 { margin-bottom: 16px; }
.hg-form-aside p { color: var(--hg-ink2); }
.hg-form-wrap { background: var(--hg-card); border: 1px solid var(--hg-line); border-radius: var(--hg-r); padding: clamp(22px, 3.2vw, 44px); }
.hg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.hg-field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.hg-field--half { grid-column: auto; }
.hg-field label, .hg-field legend { font-size: 14.5px; font-weight: 700; padding: 0; }
.hg-req { color: var(--hg-terra); }
.hg-opt { font-weight: 500; color: var(--hg-ink3); font-size: 13px; }
.hg-field input, .hg-field textarea, .hg-field select { width: 100%; font: inherit; font-size: 16px; color: var(--hg-ink); background: #fff; border: 1px solid var(--hg-stone-l); border-radius: var(--hg-r); padding: 13px 15px; min-height: 52px; transition: border-color .25s, box-shadow .25s; }
.hg-field .hg-m2 input { border: 0; min-height: 50px; }
.hg-field textarea { resize: vertical; min-height: 120px; }
.hg-field input:focus, .hg-field textarea:focus, .hg-field select:focus { outline: none; border-color: var(--hg-terra); box-shadow: 0 0 0 3px rgba(180, 97, 62, .18); }
.hg-field .hg-m2 input:focus { box-shadow: none; }
.hg-field.is-err input, .hg-field.is-err textarea, .hg-check.is-err span { border-color: #b4472f; color: #8d3220; }
.hg-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.hg-choice { position: relative; cursor: pointer; }
.hg-choice input { position: absolute; opacity: 0; }
.hg-choice span { display: flex; align-items: center; min-height: 52px; padding: 10px 14px 10px 44px; border: 1px solid var(--hg-stone-l); border-radius: var(--hg-r); background: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; transition: border-color .25s, background .25s; position: relative; }
.hg-choice span::before { content: ""; position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 1px solid var(--hg-stone); background: #fff; transition: border .25s; }
.hg-choice input:checked + span { border-color: var(--hg-slate); background: var(--hg-kalk-l); }
.hg-choice input:checked + span::before { border: 6px solid var(--hg-terra); }
.hg-choice input:focus-visible + span { outline: 2px solid var(--hg-terra); outline-offset: 2px; }
.hg-check { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--hg-ink2); cursor: pointer; }
.hg-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--hg-terra); flex: none; }
.hg-form .hg-btn { grid-column: 1 / -1; justify-self: start; }
.hg-hp { position: absolute; left: -9999px; }
.hg-form-err { background: #f8e9e4; color: #8d3220; padding: 14px 18px; border-radius: var(--hg-r); margin: 0 0 22px; font-weight: 600; }
.hg-form-ok { text-align: center; padding: 30px 10px; }
.hg-form-ok .hg-ic { color: var(--hg-terra); width: 56px; height: 56px; padding: 12px; border: 1px solid var(--hg-terra); border-radius: 50%; }
.hg-form-ok .hg-h3 { margin: 18px 0 10px; }
.hg-form-ok p { color: var(--hg-ink2); margin: 0; }

/* Footer */
.hg-ft { background: var(--hg-slate-d); color: rgba(236, 231, 222, .8); padding: clamp(56px, 7vw, 96px) 0 26px; font-size: 15px; }
.hg-ft a { text-decoration: none; }
.hg-ft a:hover { color: var(--hg-terra-l); }
.hg-ft__cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: clamp(40px, 5vw, 64px); margin-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--hg-line-l); }
.hg-ft__big { margin: 0; font-family: var(--hg-head); font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -.02em; color: var(--hg-kalk); font-weight: 500; max-width: 640px; }
.hg-ft__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hg-ft__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 48px; border-bottom: 1px solid var(--hg-line-l); }
.hg-ft__brand p { margin: 20px 0 22px; max-width: 360px; }
.hg-ft__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.hg-ft__contact li { display: flex; gap: 12px; align-items: flex-start; }
.hg-ft__contact strong { color: var(--hg-kalk); }
.hg-ft__contact .hg-ic { color: var(--hg-terra-l); margin-top: 3px; }
.hg-ft__h { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--hg-terra-l); margin: 8px 0 18px; }
.hg-ft__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hg-ft__colors a { display: inline-flex; align-items: center; gap: 9px; }
.hg-ft__bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 22px; font-size: 13.5px; color: rgba(236, 231, 222, .55); }
.hg-ft__links { display: flex; flex-wrap: wrap; gap: 22px; }
.hg-float { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: none; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 40px; background: var(--hg-terra); color: #fff !important; font-family: var(--hg-head); font-weight: 600; font-size: 16px; text-decoration: none !important; box-shadow: 0 16px 40px -14px rgba(34, 44, 50, .6); transform: translateY(120px); transition: transform .5s var(--hg-ease); }
.hg-float.is-on { transform: none; }
.hg-p-offerte .hg-float, .hg-p-contact .hg-float { display: none !important; }

/* Lightbox */
.hg-lb { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; padding: 0; background: rgba(28, 36, 41, .97); color: var(--hg-kalk); overflow: hidden; }
.hg-lb[open] { display: grid; grid-template-rows: 1fr auto; animation: hgFade .35s var(--hg-ease); }
.hg-lb::backdrop { background: rgba(25, 32, 37, .6); backdrop-filter: blur(6px); }
.hg-lb__stage { display: grid; place-items: center; min-height: 0; padding: clamp(64px, 7vh, 88px) clamp(16px, 8vw, 120px) 16px; }
.hg-lb__stage img { max-width: min(100%, calc(100vw - 2 * clamp(16px, 8vw, 120px))); max-height: calc(100dvh - clamp(64px, 7vh, 88px) - 120px); width: auto; height: auto; object-fit: contain; border-radius: var(--hg-r); opacity: 0; transform: scale(.985); transition: opacity .45s var(--hg-ease), transform .6s var(--hg-ease); }
.hg-lb__stage img.is-in { opacity: 1; transform: none; }
.hg-lb__nav, .hg-lb__x { position: absolute; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(236, 231, 222, .35); background: rgba(236, 231, 222, .08); color: var(--hg-kalk); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.hg-lb__nav:hover, .hg-lb__x:hover { background: var(--hg-kalk); color: var(--hg-ink); border-color: var(--hg-kalk); }
.hg-lb__nav { top: 50%; margin-top: -27px; }
.hg-lb__nav--prev { left: clamp(12px, 2.5vw, 36px); }
.hg-lb__nav--next { right: clamp(12px, 2.5vw, 36px); }
.hg-lb__x { top: 18px; right: clamp(12px, 2.5vw, 36px); width: 48px; height: 48px; }
.hg-lb.is-single .hg-lb__nav { display: none; }
.hg-lb__cap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 28px; padding: 18px clamp(16px, 8vw, 120px) 26px; border-top: 1px solid rgba(236, 231, 222, .14); }
.hg-lb__meta { display: flex; align-items: center; gap: 14px; }
.hg-lb__tag { padding: 6px 13px; border-radius: 30px; border: 1px solid rgba(236, 231, 222, .5); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hg-lb__tag[hidden] { display: none; }
.hg-lb__title { font-family: var(--hg-head); font-size: 22px; line-height: 1.15; color: #fff; }
.hg-lb__txt { margin: 0; font-size: 15px; color: rgba(236, 231, 222, .72); max-width: 720px; }
.hg-lb__count { font-family: var(--hg-head); font-size: 18px; color: var(--hg-terra-l); white-space: nowrap; }
@keyframes hgFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
	.hg-lb__stage { padding: 72px 12px 8px; }
	.hg-lb__stage img { max-width: calc(100vw - 24px); max-height: calc(100dvh - 190px); }
	.hg-lb__nav { top: auto; bottom: 20px; margin: 0; width: 48px; height: 48px; }
	.hg-lb__cap { grid-template-columns: 1fr; padding: 14px 132px 22px 18px; gap: 6px; min-height: 92px; }
	.hg-lb__nav--prev { left: auto; right: 72px; }
	.hg-lb__nav--next { right: 14px; }
	.hg-lb__count { position: absolute; top: 28px; left: 18px; }
}
.hg-img--missing { display: block; width: 100%; height: 100%; min-height: 60px; background: linear-gradient(135deg, var(--hg-kalk), var(--hg-stone-l)); }

/* Inloopanimatie */
.hg-js [data-r] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--hg-ease), transform 1s var(--hg-ease); }
.hg-js [data-r].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hg-js [data-r], .hg-js .hg-bu__l, .hg-js .hg-bu__lbl, .hg-js .hg-bu__tag, .hg-js .hg-bu__zon { opacity: 1 !important; transform: none !important; transition: none !important; }
	.hg-ph__bg img, .hg-hero__bg img, .hg-bu__stralen { animation: none !important; }
	.hg-bu__wolken, .hg-bu__regen, .hg-bu__stroom, .hg-bu__sijpel, .hg-bu__front, .hg-bu__nat, .hg-bu__bui { display: none !important; }
}

/* Responsief */
@media (max-width: 1240px) {
	.hg-nav { display: none; }
	.hg-burger { display: inline-flex; }
	.hg-hd__end { margin-left: auto; }
	.hg-colors__grid { grid-template-columns: repeat(5, 1fr); }
	.hg-ft__top { grid-template-columns: 1.4fr 1fr 1fr; }
	.hg-ft__brand { grid-row: span 2; }
}
@media (max-width: 1024px) {
	.hg-bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 260px; }
	.hg-tile--0 { grid-column: 1 / -1; grid-row: auto; height: 400px; }
	.hg-tile--3 { grid-column: auto; }
	.hg-steps, .hg-steps--n5 { grid-template-columns: repeat(2, 1fr); }
	.hg-steps--n3 { grid-template-columns: repeat(3, 1fr); }
	.hg-feat__grid.hg-cols-4 { grid-template-columns: repeat(2, 1fr); }
	.hg-cinfo__grid, .hg-hi__facts, .hg-stats__list { grid-template-columns: repeat(2, 1fr); }
	.hg-hi__facts li:nth-child(3) { padding-left: 0; border-left: 0; }
	.hg-stats__list li:nth-child(3) { border-left: 0; }
	.hg-hub__grid { grid-template-columns: repeat(2, 1fr); }
	.hg-gal--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	:root { --hg-hd: 104px; }
	.hg-hd__in { height: 68px; }
	.hg-hd.is-solid .hg-hd__in { height: 60px; }
	.hg-top__by { display: none; }
	.hg-top__in { justify-content: center; }
	.hg-hi__top, .hg-split__in, .hg-specs__in, .hg-prose__in, .hg-faq__in, .hg-faqs__in, .hg-form-sec__in, .hg-calc__in, .hg-st__in, .hg-ch__in { grid-template-columns: 1fr; }
	.hg-split--rev .hg-split__txt { order: 0; }
	.hg-specs__head, .hg-prose__head, .hg-faq__side, .hg-faqs__nav, .hg-form-aside { position: static; }
	.hg-faqs__nav { flex-direction: row; flex-wrap: wrap; gap: 8px; border: 0; }
	.hg-faqs__nav a { border: 1px solid var(--hg-line); border-radius: 30px; padding: 7px 13px; font-size: 14px; }
	.hg-cols-3, .hg-gal__grid { grid-template-columns: repeat(2, 1fr); }
	.hg-rev__head { grid-template-columns: 1fr auto; }
	.hg-rev__head .hg-sh { grid-column: 1 / -1; }
	.hg-faq__side .hg-faq__card { display: none; }
	.hg-colors__grid { grid-template-columns: repeat(4, 1fr); }
	.hg-bu__facts { grid-template-columns: 1fr; }
	.hg-ch__media { max-width: 520px; }
	.hg-strip__h { display: none; }
}
@media (max-width: 700px) {
	body.hg { font-size: 16px; }
	.hg-hd__tel span { display: none; }
	.hg-hd__tel { width: 44px; height: 44px; justify-content: center; border: 1px solid currentColor; border-radius: 50%; opacity: .9; }
	.hg-hd__end .hg-btn { display: none; }
	.hg-float { display: inline-flex; }
	.hg-lg { font-size: 17px; }
	.hg-hd.is-solid .hg-lg { font-size: 16px; }
	.hg-top { font-size: 12px; }
	.hg-top__r { gap: 14px; }
	.hg-cols-2, .hg-cols-3, .hg-cols-4, .hg-feat__grid.hg-cols-2, .hg-feat__grid.hg-cols-3, .hg-feat__grid.hg-cols-4, .hg-combo__grid { grid-template-columns: 1fr; }
	.hg-gal__grid, .hg-gal--4, .hg-gal--2 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.hg-bento { grid-template-columns: 1fr; grid-auto-rows: 260px; }
	.hg-tile--0 { height: 340px; }
	.hg-steps, .hg-steps--n3, .hg-steps--n5 { grid-template-columns: 1fr; }
	.hg-colors__grid { grid-template-columns: repeat(3, 1fr); gap: 20px 12px; }
	.hg-sw__n { font-size: 15px; }
	.hg-hero { min-height: 640px; }
	.hg-hero__title { font-size: clamp(36px, 10vw, 50px); }
	.hg-hero__lead { font-size: 16px; margin-bottom: 22px; }
	.hg-hero__btns .hg-btn { flex: 1 1 auto; }
	.hg-trust { gap: 8px 16px; font-size: 13px; margin-top: 18px; }
	.hg-trust li:nth-child(n+3) { display: none; }
	.hg-strip__sw { width: 40px; height: 40px; }
	.hg-strip__a { width: 50px; }
	.hg-strip__n { display: none; }
	.hg-hi__facts li { padding: 18px 14px 4px 0; }
	.hg-hi__facts li + li { padding-left: 14px; }
	.hg-hi__facts li:nth-child(3) { padding-left: 0; }
	.hg-stats__list li { padding: 10px 14px; }
	.hg-ft__top { grid-template-columns: 1fr 1fr; }
	.hg-ft__brand { grid-column: 1 / -1; grid-row: auto; }
	.hg-cinfo__grid { grid-template-columns: 1fr; }
	.hg-form { grid-template-columns: 1fr; }
	.hg-field--half { grid-column: 1 / -1; }
	.hg-choices { grid-template-columns: 1fr; }
	.hg-specs th { width: 42%; }
	.hg-ph--photo { min-height: 66svh; }
	.hg-note { flex-direction: column; gap: 10px; padding: 20px; }
	.hg-faq__a { padding-right: 0; }
	.hg-more { margin-top: -28px; }
	.hg-hub__grid { grid-template-columns: 1fr; }
	.hg-st__dl div { grid-template-columns: 1fr; gap: 4px; }
	.hg-calc__row { flex-wrap: wrap; }
	.hg-bu__fig { padding: 10px; overflow-x: auto; }
	.hg-bu__svg { min-width: 640px; }
	.hg-ch__thumbs .hg-ch__th { width: 64px; height: 64px; }
}

/* Tool: grindvloer in uw eigen tuin */
.hg-tt { background: var(--hg-kalk-l); }
.hg-tt [hidden] { display: none !important; }
.hg-tt__app { background: var(--hg-card); border: 1px solid var(--hg-line); border-radius: 10px; padding: clamp(16px, 2.6vw, 32px); box-shadow: 0 40px 80px -60px rgba(34, 44, 50, .55); }
.hg-tt__kies { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(16px, 2.4vw, 32px); align-items: stretch; }
.hg-tt__drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 340px; padding: 32px; border: 2px dashed var(--hg-stone-l); border-radius: 10px; text-align: center; cursor: pointer; background: repeating-linear-gradient(-45deg, var(--hg-kalk-l), var(--hg-kalk-l) 12px, #fff 12px, #fff 24px); transition: border-color .3s, background .3s; }
.hg-tt__drop:hover, .hg-tt__drop.is-over { border-color: var(--hg-terra); }
.hg-tt__dropic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--hg-kalk); color: var(--hg-terra-d); }
.hg-tt__droph { font-family: var(--hg-head); font-size: clamp(22px, 2vw, 28px); font-weight: 600; }
.hg-tt__dropx { max-width: 420px; color: var(--hg-ink2); font-size: 15px; margin-bottom: 6px; }
.hg-tt__dropk { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* camera alleen op een aanraakscherm (telefoon, tablet); daar wordt "Foto kiezen" de tweede knop */
.hg-tt__cam, .hg-tt__touch { display: none; }
@media (hover: none) and (pointer: coarse) {
	.hg-tt__cam { display: inline-flex; }
	.hg-tt__dropk .hg-btn { min-width: 210px; }
	.hg-tt__touch { display: inline; }
	.hg-tt__muis { display: none; }
	.hg-tt__drop .hg-tt__kiesk { background: #fff; border-color: var(--hg-ink); color: var(--hg-ink) !important; }
}
.hg-tt__vbs { display: flex; flex-direction: column; gap: 10px; }
.hg-tt__vbh { margin: 0; font-weight: 700; font-size: 14.5px; }
.hg-tt__vb { display: flex; align-items: center; gap: 14px; padding: 8px; border: 1px solid var(--hg-line); border-radius: var(--hg-r); background: #fff; cursor: pointer; text-align: left; font-weight: 600; transition: border-color .3s, background .3s; }
.hg-tt__vb:hover { border-color: var(--hg-terra); background: var(--hg-kalk-l); }
.hg-tt__vbimg { flex: none; width: 110px; aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden; }
.hg-tt__vbimg img { width: 100%; height: 100%; object-fit: cover; }
.hg-tt__bezig { display: grid; justify-items: center; gap: 14px; padding: clamp(40px, 7vw, 90px) 16px; text-align: center; }
.hg-tt__bt { margin: 0; font-family: var(--hg-head); font-size: 22px; font-weight: 600; }
.hg-tt__bar { width: min(420px, 90%); height: 6px; border-radius: 6px; background: var(--hg-kalk); overflow: hidden; }
.hg-tt__bar span { display: block; height: 100%; width: 0; background: var(--hg-terra); transition: width .25s linear; }
.hg-tt__spin { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--hg-kalk); border-top-color: var(--hg-terra); animation: hgSpin 1s linear infinite; }
@keyframes hgSpin { to { transform: rotate(360deg); } }
.hg-tt__klaar { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.hg-tt__beeld { position: relative; }
.hg-tt__cmp { aspect-ratio: auto; background: var(--hg-slate-d); }
.hg-tt__cmp .hg-cmp__before { position: relative; }
.hg-tt__cmp .hg-cmp__before img { height: auto; display: block; }
.hg-tt__laag { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(25, 32, 37, .55); color: #fff; font-family: var(--hg-head); font-size: 18px; font-weight: 600; border-radius: var(--hg-r); text-align: center; padding: 20px; }
.hg-tt__laag[hidden] { display: none; }
.hg-tt__laag .hg-tt__spin { border-color: rgba(255, 255, 255, .3); border-top-color: #fff; }
.hg-tt__nu { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; }
.hg-tt__nu span { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hg-ink3); }
.hg-tt__nu strong { font-family: var(--hg-head); font-size: 24px; font-weight: 600; }
.hg-tt__kleuren { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px 6px; }
.hg-tt__kl { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.hg-tt__sw { width: 100%; max-width: 48px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--hg-line); transition: box-shadow .25s, transform .25s var(--hg-ease); }
.hg-tt__sw { position: relative; }
.hg-tt__sw img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); }
.hg-tt__sw .hg-tt__mini { position: absolute; inset: 0; transform: none; animation: hgMini .5s ease; }   /* uw eigen tuin in deze kleur */
@keyframes hgMini { from { opacity: 0; } }
.hg-tt__kl:hover .hg-tt__sw { transform: translateY(-2px); }
.hg-tt__kl[aria-pressed="true"] .hg-tt__sw { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--hg-terra); }
.hg-tt__kn { font-size: 10.5px; line-height: 1.2; text-align: center; color: var(--hg-ink2); }
.hg-tt__kl[aria-pressed="true"] .hg-tt__kn { color: var(--hg-ink); font-weight: 700; }
.hg-tt__acties { display: grid; gap: 10px; }
.hg-tt__acties .hg-btn { width: 100%; white-space: normal; text-align: center; }
.hg-tt__acties .hg-btn:disabled { opacity: .55; cursor: wait; }
.hg-tt__klein { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }
.hg-tt__klein .hg-link { border-bottom: 0; font-size: 15px; }
.hg-tt__disc { margin: 16px 0 0; }
.hg-tt__fout { margin: 16px 0 0; padding: 14px 18px; border-radius: var(--hg-r); background: #f8e9e4; color: #8d3220; font-weight: 600; }
.hg-tt__fout[hidden] { display: none; }
.hg-tt__privacy { margin: 16px 0 0; }
.hg-tt__privacy .hg-ic { vertical-align: -3px; margin-right: 4px; color: var(--hg-terra); }
.hg-tt.is-bezig .hg-tt__kl { pointer-events: none; }
/* Grindvlak aanpassen: foto met het vlak in terracotta, tikken zet een stuk aan of uit */
.hg-tt__pas { display: grid; gap: 12px; }
.hg-tt__doek { display: block; width: 100%; height: auto; border-radius: var(--hg-r); cursor: crosshair; touch-action: manipulation; background: var(--hg-slate-d); }
.hg-tt__pasbalk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.hg-tt__pasuitleg { display: flex; gap: 8px; align-items: flex-start; flex: 1 1 260px; margin: 0; font-size: 15px; line-height: 1.45; color: var(--hg-ink2); }
.hg-tt__pasuitleg .hg-ic { flex: none; margin-top: 2px; color: var(--hg-terra); }
.hg-tt__pasknoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.hg-tt__pasknoppen .hg-link { border-bottom: 0; font-size: 15px; }
.hg-tt__pasknoppen .hg-link:disabled { opacity: .4; cursor: default; }
.hg-tt__app.is-pas .hg-tt__paneel { opacity: .45; pointer-events: none; transition: opacity .3s; }
/* Impressie uit de tool in het offerteformulier */
.hg-imp { grid-column: 1 / -1; }
.hg-imp[hidden] { display: none; }
.hg-imp__in { display: flex; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--hg-line); border-radius: var(--hg-r); background: var(--hg-kalk-l); cursor: pointer; }
.hg-imp__in img { flex: none; width: 128px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.hg-imp__t { display: grid; gap: 4px; font-size: 14.5px; color: var(--hg-ink2); }
.hg-imp__h { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--hg-ink); }
.hg-imp__h input { width: 18px; height: 18px; accent-color: var(--hg-terra); }
.hg-tt__m2 { margin: -8px 0 16px; font-size: 14.5px; color: var(--hg-ink2); }
.hg-tt__m2 span { color: var(--hg-ink3); font-size: 13px; }
/* Rand (opsluiting) langs de tuin */
.hg-tt__rand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 18px; }
.hg-tt__randh { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hg-ink3); margin-bottom: 2px; }
.hg-tt__randk { padding: 7px 12px; border: 1px solid var(--hg-line); border-radius: 999px; background: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; color: var(--hg-ink2); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.hg-tt__randk:hover { border-color: var(--hg-terra); }
.hg-tt__randk[aria-pressed="true"] { background: var(--hg-slate); border-color: var(--hg-slate); color: #fff; }
/* Vergelijk 4 kleuren */
.hg-tt__vgl { display: grid; gap: 12px; }
.hg-tt__vglgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hg-tt__vgltegel { position: relative; display: block; padding: 0; border: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--hg-slate-d); cursor: pointer; }
.hg-tt__vgltegel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--hg-ease); }
.hg-tt__vgltegel:hover img { transform: scale(1.02); }
.hg-tt__vglnaam { position: absolute; left: 8px; bottom: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(25, 32, 37, .75); color: #fff; font: 600 12px/1.2 var(--hg-head); letter-spacing: .08em; text-transform: uppercase; }
.hg-tt__vgltegel.is-laden::after { content: ''; position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: hgSpin 1s linear infinite; }
.hg-tt__kl.is-vgl .hg-tt__sw { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--hg-slate); }
@media (max-width: 1024px) { .hg-tt__klaar { grid-template-columns: 1fr; } .hg-tt__kleuren { grid-template-columns: repeat(7, 1fr); } }
@media (max-width: 700px) {
	.hg-tt__kies { grid-template-columns: 1fr; }
	.hg-tt__drop { min-height: 260px; padding: 22px 16px; }
	.hg-tt__kleuren { grid-template-columns: repeat(5, 1fr); }
	.hg-tt__app { padding: 12px; }
}
/* Toolbanner (home, kleurpagina's) */
.hg-tb { background: var(--hg-slate); color: var(--hg-kalk); }
.hg-tb__in { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.hg-tb .hg-h2 em { color: var(--hg-terra-l); }
.hg-tb p { color: rgba(236, 231, 222, .82); }
.hg-tb__img { position: relative; margin: 0; }
.hg-tb__img .hg-cmp { aspect-ratio: 3 / 2; }
.hg-tb__tag { position: absolute; left: 14px; bottom: 14px; padding: 7px 13px; border-radius: 30px; background: rgba(250, 248, 244, .94); color: var(--hg-ink); font-size: 13px; font-weight: 700; }
@media (max-width: 900px) { .hg-tb__in { grid-template-columns: 1fr; } }

/* WordPress-balk voor ingelogde beheerders */
body.admin-bar .hg-hd { top: 32px; }
body.admin-bar .hg-menu { top: 32px; }
@media (max-width: 782px) { body.admin-bar .hg-hd, body.admin-bar .hg-menu { top: 46px; } #wpadminbar { position: fixed; } }

/* Elementor-editor: alles direct zichtbaar */
body.elementor-editor-active [data-r], body.elementor-editor-active .hg-bu__l, body.elementor-editor-active .hg-bu__lbl, body.elementor-editor-active .hg-bu__tag, body.elementor-editor-active .hg-bu__zon { opacity: 1 !important; transform: none !important; }
.elementor-widget-container > .hg-sec, .elementor-widget-container > section { margin: 0; }
.elementor a.hg-float { box-shadow: 0 16px 40px -14px rgba(34, 44, 50, .6); }
/* Elementor: elke sectie zit in een eigen widget, dus "sectie na sectie" (minder ruimte erboven) via de widgets */
.elementor-widget:has(> .elementor-widget-container > .hg-sec:last-child) + .elementor-widget > .elementor-widget-container > .hg-sec:first-child:not(.hg-dark):not(.hg-alt):not(.hg-rev):not(.hg-calc):not(.hg-st):not(.hg-faq):not(.hg-colors):not(.hg-bu):not(.hg-feat):not(.hg-hub):not(.hg-stats):not(.hg-apps) { padding-top: calc(var(--hg-sec) * .5); }