/* BHV Meester · look C "Licht, met hartslag" */

@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-latin-wght.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
	--red:#D90700;--red-dark:#A30500;
	--green:#61CE70;--green-dark:#00A32A;--green-text:#00862A;--green-soft:#E6F6E9;
	--aub:#2B161B;--night:#1C0E11;
	--blush:#FBE3E1;--paper:#FBF6F7;--paper-2:#F7F3F5;--line:#EADDE1;
	--text:#2B161B;--muted:#5E5458;
	--display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
	--body:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
	--r-sm:14px;--r:22px;--r-lg:28px;
	--shadow:0 10px 30px rgba(43,22,27,.07);
	--wrap:1200px;--gut:clamp(16px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--paper);color:var(--text);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--aub);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{top:12px;color:#fff}
.ico{width:1.15em;height:1.15em;flex:none}
mark.todo{background:#fff3c4;color:#6b4e00;border-radius:6px;padding:0 6px;font-size:.85em;font-weight:600}

.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.wrap--narrow{max-width:calc(880px + var(--gut)*2)}

/* Type */
.display{font-family:var(--display);font-weight:800;font-size:clamp(56px,10vw,128px);line-height:.9;letter-spacing:-.045em}
.display span,.closer__title span{color:var(--red)}
.h1{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1}
.h1--page{font-size:clamp(38px,5.6vw,68px)}
.h1-sub{font-family:var(--body);font-size:clamp(17px,1.6vw,20px);font-weight:600;color:var(--aub);line-height:1.4;max-width:30em}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.8vw,48px);letter-spacing:-.03em;line-height:1.05;margin-bottom:28px;max-width:20em}
.h3{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.015em;line-height:1.2}
.lead{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--muted);max-width:36em}
.kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.kicker--green{color:var(--green)}
.small{font-size:14px;color:var(--muted);margin-top:14px}
.muted-light{color:rgba(255,255,255,.75);margin-top:18px}
.prose p+p{margin-top:1em}
.prose strong{color:var(--aub)}
.entry h2{font-family:var(--display);font-size:28px;margin:1.6em 0 .5em}
.entry h3{font-family:var(--display);font-size:21px;margin:1.4em 0 .4em}
.entry ul,.entry ol{padding-left:1.3em;list-style:disc;margin:1em 0}
.entry a{color:var(--red)}

/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font:600 16px/1 var(--body);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn--lg{min-height:56px;padding:0 30px}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-dark);color:#fff}
.btn--line{border-color:var(--aub);color:var(--aub);background:transparent}
.btn--line:hover{background:var(--aub);color:#fff}
.btn--white{background:#fff;color:var(--green-text)}
.btn--white:hover{color:var(--aub)}
.btn--ghost-light{border-color:rgba(255,255,255,.55);color:#fff}
.btn--ghost-light:hover{background:rgba(255,255,255,.12);color:#fff}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:var(--red)}
.link-arrow .ico{transition:transform .15s}
.link-arrow:hover .ico{transform:translateX(3px)}

/* Pills / chips */
.pill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:8px 16px 8px 12px;border-radius:999px;font-size:14px;font-weight:600}
.pill--green{background:var(--green-soft);color:var(--green-text)}
.pill--green .ico{color:var(--green-dark)}
.chip-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.95);font-size:14px;font-weight:600;box-shadow:var(--shadow)}
.chip-badge .ico{color:var(--green-dark)}

/* Header */
.site-head{position:sticky;top:0;z-index:50;padding:14px 0 0}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 20px;border-radius:999px;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);box-shadow:0 8px 24px rgba(43,22,27,.06)}
.brand{display:block;flex:none}
.brand img{width:auto;height:46px}
.nav{display:flex;align-items:center;gap:26px}
.nav__list{display:flex;align-items:center;gap:6px}
.nav__item{position:relative;display:flex;align-items:center}
.nav__link{display:block;padding:10px 12px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none}
.nav__link[aria-current],.nav__link.is-current{color:var(--red)}
.sub-toggle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-left:-8px;border:0;background:none;color:inherit;border-radius:999px;cursor:pointer}
.sub-toggle .ico{transition:transform .2s}
.sub-toggle[aria-expanded="true"] .ico{transform:rotate(180deg)}
.sub{position:absolute;top:calc(100% + 10px);left:-8px;min-width:250px;padding:10px;background:#fff;border-radius:20px;box-shadow:0 20px 50px rgba(43,22,27,.14);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.is-open .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-radius:12px;font-size:15px;font-weight:500;text-decoration:none}
.sub a:hover,.sub a[aria-current]{background:var(--paper);color:var(--red)}
.sub__all{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.sub__all a{color:var(--red);font-weight:600}
.nav-toggle{display:none}

/* Paper + hero */
.paper{background-color:var(--paper);background-image:linear-gradient(rgba(217,7,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(217,7,0,.05) 1px,transparent 1px);background-size:48px 48px;background-position:center top}
.hero{margin-top:-80px;padding:140px 0 72px}
.hero--page{padding-bottom:64px}
.hero--slim{padding-bottom:56px}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,64px);align-items:center}
.hero__copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.hero--slim .wrap{display:flex;flex-direction:column;gap:20px}
.hero__media{display:flex;flex-direction:column;gap:16px;min-width:0}
.photo{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#f1e4e7}
.photo img{width:100%;height:100%;object-fit:cover}
.photo--hero{aspect-ratio:4/3.3}
.photo__chips{position:absolute;left:16px;bottom:16px;right:16px;display:flex;flex-wrap:wrap;gap:8px}
.photo--tilt{aspect-ratio:4/3.4;transform:rotate(1.5deg);box-shadow:0 30px 60px rgba(0,0,0,.25)}
.price-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.price-tile{display:flex;flex-direction:column;gap:2px;padding:20px 22px;border-radius:var(--r);background:#fff;text-decoration:none;box-shadow:var(--shadow);transition:transform .15s}
.price-tile:hover{transform:translateY(-2px);color:inherit}
.price-tile__label{font-size:13px;font-weight:600;color:var(--red-dark)}
.price-tile__num{font-family:var(--display);font-weight:800;font-size:clamp(36px,4vw,46px);letter-spacing:-.03em;color:var(--red);line-height:1.05}
.price-tile--dark{background:var(--aub);color:#fff}
.price-tile--dark:hover{color:#fff}
.price-tile--dark .price-tile__label{color:var(--green)}
.price-tile--dark .price-tile__num{color:#fff}

/* Heartbeat */
.ecg{width:100%;height:clamp(60px,8vw,100px);overflow:visible}
.ecg path{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ecg__bg{stroke:var(--green-dark);stroke-opacity:.15}
.ecg__line{stroke:var(--green-dark);stroke-dasharray:1000;stroke-dashoffset:1000;animation:ecgDraw 2s linear infinite}
.ecg--hero{max-width:640px}
.ecg--light .ecg__bg{stroke:#fff;stroke-opacity:.25}
.ecg--light .ecg__line{stroke:#fff}
.ecg--flat .ecg__line{animation:none;stroke-dashoffset:0;stroke:var(--red);opacity:.6}
@keyframes ecgDraw{to{stroke-dashoffset:0}}

/* Crumbs */
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--muted)}
.crumbs li+li::before{content:"›";margin-right:6px;opacity:.6}
.crumbs a{text-decoration:none}
.crumbs [aria-current]{color:var(--aub);font-weight:600}

/* Facts bar */
.facts{position:relative;z-index:2;margin-top:-28px}
.facts__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:10px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow)}
.facts__list li{display:flex;align-items:center;gap:14px;padding:14px 16px;font-weight:600;font-size:15px;line-height:1.3}
.facts__list li+li{border-left:1px solid var(--line)}
.facts__list .ico{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--blush);color:var(--red)}
.facts__list small{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.facts__list em{font-style:normal;font-weight:500;color:var(--muted);font-size:13px}

/* Sections */
.sec{padding:clamp(64px,8vw,104px) 0}
.sec--tint{background:var(--paper-2)}
.sec--dark{background:var(--aub);color:#fff}
.sec--dark .h2{color:#fff}
.sec--dark .h3{color:#fff}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.sec-head .h2{margin-bottom:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px)}
.split--center{align-items:center}

/* Grids + cards */
.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:#fff;border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 0 var(--line)}
.card p{color:var(--muted);font-size:16px}
.card--big{padding:32px}
.card--link{text-decoration:none;transition:transform .15s,box-shadow .15s}
.card--link:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:inherit}
.card--link strong{color:var(--red)}
.icon-dot{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:var(--blush);color:var(--red);margin-bottom:6px}
.icon-dot .ico{width:24px;height:24px}
.icon-dot--red{background:var(--blush);color:var(--red)}
.icon-dot--green{background:var(--green-soft);color:var(--green-text)}

/* Training cards */
.tcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tcard{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);overflow:hidden;text-decoration:none;box-shadow:0 1px 0 var(--line);transition:transform .2s,box-shadow .2s}
.tcard:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(43,22,27,.1);color:inherit}
.tcard__img{aspect-ratio:16/10;overflow:hidden;background:#f1e4e7}
.tcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tcard:hover .tcard__img img{transform:scale(1.04)}
.tcard__body{display:flex;flex-direction:column;gap:6px;padding:22px 22px 20px;flex:1}
.tcard__title{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.025em}
.tcard__body p{color:var(--muted);font-size:15px}
.tcard__foot{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:14px;font-size:14px;color:var(--muted)}
.tcard__price strong{font-family:var(--display);font-size:22px;color:var(--red);letter-spacing:-.02em}
.tcard__dur{display:inline-flex;align-items:center;gap:6px}
.tcard__go{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--paper);color:var(--red);transition:background .15s,color .15s}
.tcard:hover .tcard__go{background:var(--red);color:#fff}

/* Modules */
.module{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 1px 0 var(--line)}
.module__img{aspect-ratio:4/3;background:#f1e4e7}
.module__img img{width:100%;height:100%;object-fit:cover}
.module__img--icon{display:flex;align-items:center;justify-content:center;background:var(--blush);color:var(--red)}
.module__img--icon .ico{width:64px;height:64px;stroke-width:1.5}
.module__body{display:flex;flex-direction:column;gap:8px;padding:22px}
.module__nr{font-family:var(--display);font-weight:800;font-size:14px;color:var(--red)}
.module__body p{color:var(--muted);font-size:15px}

/* Ticks + cert */
.ticks{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-weight:500}
.ticks .ico{color:var(--aub);background:var(--green);border-radius:999px;padding:3px;width:22px;height:22px;margin-top:2px;stroke-width:3}
.cert{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:32px;border-radius:var(--r-lg);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.cert p{color:rgba(255,255,255,.8)}
.cert strong{color:#fff}
.cert__img{width:150px;background:#fff;border-radius:18px;padding:12px}
.cert--row{flex-direction:row;flex-wrap:wrap;justify-content:center}

/* Photo strip */
.strip{overflow:hidden;padding:0 0 clamp(64px,8vw,104px)}
.strip__track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:0 var(--gut);max-width:1600px;margin:0 auto}
.strip__item{aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:#f1e4e7}
.strip__item:nth-child(even){transform:translateY(24px)}
.strip__item img{width:100%;height:100%;object-fit:cover}

/* Price band */
.price-band{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;padding:clamp(28px,4vw,48px);border-radius:var(--r-lg);background:var(--aub);color:#fff;position:relative;overflow:hidden}
.price-band::after{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:999px;background:radial-gradient(closest-side,rgba(97,206,112,.25),transparent)}
.price-band__main{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.price-band__price{font-family:var(--display);font-weight:800;font-size:clamp(64px,9vw,104px);letter-spacing:-.045em;line-height:.95}
.price-band__price span{font-size:.24em;letter-spacing:0;font-weight:600;color:var(--green);vertical-align:.9em}
.price-band__note{color:rgba(255,255,255,.75)}
.price-band .btns{margin-top:14px}
.price-band__side{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.mini{position:relative;display:block;padding:20px 22px;border-radius:var(--r);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);text-decoration:none;color:#fff}
.mini p{color:rgba(255,255,255,.72);font-size:15px;margin-top:4px;padding-right:40px}
.mini__price{display:inline-block;margin-left:6px;font-family:var(--body);font-size:14px;font-weight:600;color:var(--green)}
.mini--link{transition:background .15s}
.mini--link:hover{background:rgba(255,255,255,.13);color:#fff}
.mini__arrow{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--green)}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:10px}
.faq__item{background:#fff;border-radius:18px;box-shadow:0 1px 0 var(--line)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font-weight:600;font-size:17px;cursor:pointer;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__icon{flex:none;display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:999px;background:var(--blush);color:var(--red);transition:transform .2s}
.faq__item[open] .faq__icon{transform:rotate(45deg)}
.faq__a{padding:0 22px 22px;color:var(--muted)}

/* Forms */
.form-card{background:#fff;border-radius:var(--r-lg);padding:clamp(22px,3vw,36px);box-shadow:var(--shadow);min-width:0}
.form-card__title{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em;margin-bottom:6px}
.form-card__intro{color:var(--muted);margin-bottom:6px}
.form{display:flex;flex-direction:column;gap:16px;margin-top:18px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.field legend{font-size:14px;font-weight:600}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field textarea{width:100%;min-height:50px;padding:12px 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);font:inherit;font-size:16px;color:var(--text);transition:border-color .15s,background .15s}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--red);background:#fff}
.field--set{border:0;padding:0;margin:0}
.field--set legend{margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);font-size:15px;font-weight:500;transition:all .15s}
.chip input:checked+span{background:var(--aub);border-color:var(--aub);color:#fff}
.chip input:focus-visible+span{outline:3px solid var(--red);outline-offset:2px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--red);flex:none}
.check a{color:var(--red)}
.form .btn{align-self:flex-start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:16px;margin-top:16px;font-size:15px}
.notice--ok{background:var(--green-soft);color:#0b4a1d}
.notice--ok .ico{color:var(--green-dark);width:24px;height:24px}
.notice--ok a{color:inherit;font-weight:600}
.notice--err{background:var(--blush);color:var(--red-dark);font-weight:600}
.contact-lines{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.contact-lines a{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none}
.contact-lines .ico{color:var(--red)}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,48px);align-items:start}
.contact-side{display:flex;flex-direction:column;gap:12px}
.ccard{display:flex;align-items:center;gap:16px;padding:16px 18px;background:#fff;border-radius:var(--r);text-decoration:none;box-shadow:0 1px 0 var(--line)}
a.ccard:hover{color:inherit;box-shadow:var(--shadow)}
.ccard .icon-dot{margin:0}
.ccard strong{display:block;font-family:var(--display);font-size:18px}
.ccard span:last-child{font-size:15px;color:var(--muted);overflow-wrap:anywhere}
.ccard--wa{background:var(--green-soft)}

/* Tags + map */
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.tags li{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#fff;font-weight:600;font-size:15px;box-shadow:0 1px 0 var(--line)}
.tags .ico{color:var(--red)}
.tags__more{background:var(--green-soft)!important;color:var(--green-text)}
.map{display:flex;flex-direction:column;gap:10px}
.map > svg{width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.map text{font:600 15px var(--body);fill:var(--aub)}
.map .map__sub{font-size:12px;font-weight:500;fill:var(--red)}
.map__pulse{transform-origin:344px 186px;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.2);opacity:0}}
.map figcaption a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none}
.map figcaption a:hover{color:var(--red)}

/* Values */
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px;padding-top:28px;border-top:1px solid rgba(255,255,255,.15)}
.values p{color:rgba(255,255,255,.7);font-size:15px;margin-top:4px}
.values .h3{color:var(--green)}

/* Compare table */
.table-wrap{position:relative;overflow-x:auto;border-radius:var(--r);background:#fff;box-shadow:0 1px 0 var(--line)}
.compare{width:100%;border-collapse:collapse;min-width:640px;font-size:15px}
.compare th,.compare td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
.compare thead th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.compare tbody th{font-family:var(--display);font-size:18px}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare td strong{color:var(--red);font-size:17px}

/* Materials */
.cat-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.cat-nav a{padding:9px 16px;border-radius:999px;background:#fff;font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 1px 0 var(--line)}
.sec--cat{padding:clamp(40px,5vw,64px) 0}
.sec--cat+.sec--cat{padding-top:0}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pcard{display:flex;flex-direction:column;gap:6px;background:#fff;border-radius:var(--r);padding:16px 16px 20px;box-shadow:0 1px 0 var(--line)}
.pcard__img{aspect-ratio:1;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:8px;overflow:hidden}
.pcard__img img{width:100%;height:100%;object-fit:contain}
.pcard__title{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.2}
.pcard p{font-size:14px;color:var(--muted)}

/* Local links */
.local{padding:28px 0 40px;font-size:15px;color:var(--muted)}
.local a{color:var(--red);font-weight:600;text-decoration:none}

/* Closer */
.closer{background:var(--green-text);color:#fff;padding:clamp(56px,7vw,96px) 0;position:relative;overflow:hidden}
.closer__in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.closer .ecg{max-width:560px;height:70px}
.closer__title{font-family:var(--display);font-weight:800;font-size:clamp(44px,7vw,92px);letter-spacing:-.045em;line-height:.95}
.closer__title span{color:#fff;opacity:.6}
.closer__text{max-width:34em;font-size:18px;color:rgba(255,255,255,.9)}
.closer .btns{justify-content:center;margin-top:8px}

/* Footer */
.site-foot{background:var(--night);color:rgba(255,255,255,.72);padding:64px 0 110px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:32px}
.foot-logo{display:inline-block;background:#fff;border-radius:18px;padding:10px 16px;margin-bottom:16px}
.foot-logo img{height:44px;width:auto}
.foot-h{font-family:var(--display);font-size:17px;font-weight:700;color:#fff;margin-bottom:14px}
.foot-list{display:flex;flex-direction:column;gap:8px;font-style:normal}
.foot-list a{text-decoration:none}
.foot-list a:hover,.foot-legal a:hover{color:#fff}
address.foot-list{display:block;line-height:1.8}
address strong{color:#fff}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:13px}
.foot-legal a{text-decoration:none}

/* WhatsApp float */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:10px;height:58px;padding:0 20px 0 17px;border-radius:999px;background:#25D366;color:#073b1d;font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 12px 30px rgba(7,59,29,.3);transition:transform .15s}
.wa-float:hover{transform:translateY(-2px) scale(1.02);color:#073b1d}
.wa-float .ico{width:26px;height:26px}

/* Responsive */
@media (max-width:1080px){
	.tcards{grid-template-columns:repeat(2,minmax(0,1fr))}
	.grid--4,.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
	.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;border-radius:999px;background:var(--paper);color:var(--aub);cursor:pointer}
	.nav-toggle__close{display:none}
	.nav-toggle[aria-expanded="true"] .nav-toggle__open{display:none}
	.nav-toggle[aria-expanded="true"] .nav-toggle__close{display:inline}
	.bar{position:relative;border-radius:28px}
	.nav{position:absolute;left:0;right:0;top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:12px;padding:14px;background:#fff;border-radius:24px;box-shadow:0 20px 50px rgba(43,22,27,.16);display:none;max-height:calc(100vh - 110px);overflow:auto}
	.nav.is-open{display:flex}
	.nav__list{flex-direction:column;align-items:stretch;gap:2px}
	.nav__item{flex-wrap:wrap}
	.nav__link{flex:1;padding:14px;font-size:17px}
	.sub-toggle{width:48px;height:48px;margin:0}
	.sub{position:static;width:100%;min-width:0;box-shadow:none;padding:0 0 8px 10px;display:none;opacity:1;visibility:visible;transform:none}
	.has-sub:hover .sub,.has-sub:focus-within .sub{display:none}
	.has-sub.is-open .sub{display:block}
	.nav__cta{min-height:52px}
	.hero__grid,.split,.price-band,.contact-grid{grid-template-columns:minmax(0,1fr)}
	.facts__list{grid-template-columns:1fr 1fr}
	.facts__list li:nth-child(3){border-left:0}
	.facts__list li:nth-child(n+3){border-top:1px solid var(--line)}
	.photo--tilt{transform:none}
	.values{grid-template-columns:1fr}
}
@media (max-width:640px){
	body{font-size:16px}
	.brand img{height:38px}
	.hero{padding:120px 0 56px}
	.tcards,.grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
	.pgrid{gap:12px}
	.facts__list{grid-template-columns:minmax(0,1fr)}
	.facts__list li{border-left:0!important}
	.facts__list li+li{border-top:1px solid var(--line)}
	.ticks{grid-template-columns:minmax(0,1fr)}
	.form__row{grid-template-columns:minmax(0,1fr)}
	.strip__track{grid-template-columns:repeat(2,minmax(0,1fr))}
	.strip__item:nth-child(even){transform:none}
	.foot-grid{grid-template-columns:minmax(0,1fr)}
	.wa-float{padding:0;width:58px;justify-content:center}
	.wa-float__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
	.btns .btn{flex:1 1 auto}
	.form .btn{align-self:stretch}
	.price-tile{padding:16px 18px}
}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{animation:none!important;transition:none!important}
	.ecg__line{stroke-dashoffset:0}
}
@media print{
	.site-head,.wa-float,.closer,.form-card{display:none}
}

/* ---------- Extra: hartslag als rode draad ---------- */
@view-transition{navigation:auto}
.site-head{view-transition-name:site-head}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

/* Scroll progress under the header pill */
.bar{position:relative}
.scrollbeat{position:absolute;left:28px;right:28px;bottom:0;height:2px;border-radius:2px;overflow:hidden;pointer-events:none}
.scrollbeat__fill{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--green),var(--green-dark))}

/* Each section kicker carries a small heartbeat blip; it beats once when the section comes into view */
.kicker{display:flex;align-items:center;gap:10px}
.kicker::before{content:"";flex:none;width:34px;height:14px;background:currentColor;opacity:.9;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 14'%3E%3Cpath d='M0 8h10l2-3 2 3h2l3-7 3 12 3-8 1 3h8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 14'%3E%3Cpath d='M0 8h10l2-3 2 3h2l3-7 3 12 3-8 1 3h8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.is-beating .kicker::before,.kicker.is-beating::before{animation:blip .9s ease-out 1}
@keyframes blip{0%{transform:scale(1)}18%{transform:scale(1.35,1.6)}36%{transform:scale(.95)}54%{transform:scale(1.15,1.25)}100%{transform:scale(1)}}

/* Calm colour treatment on photos: a soft brand-tinted fade at the bottom */
.photo,.tcard__img,.module__img,.strip__item{position:relative}
.photo::after,.tcard__img::after,.module__img:not(.module__img--icon)::after,.strip__item::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(43,22,27,.28));mix-blend-mode:multiply}
.photo img,.tcard__img img,.module__img img,.strip__item img{filter:saturate(.92) contrast(1.03)}
.photo__chips{z-index:1}

/* Video slot */
.video{border-radius:var(--r-lg);overflow:hidden;background:var(--aub);aspect-ratio:16/9;box-shadow:var(--shadow)}
.video video{width:100%;height:100%;object-fit:cover;display:block}
.video__empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;color:rgba(255,255,255,.75)}

/* Reviews */
.review{gap:14px}
.review__stars{color:#E8A400;letter-spacing:2px;font-size:18px}
.review blockquote{margin:0;font-size:17px;color:var(--text)}
.review figcaption{font-size:14px;color:var(--muted)}

/* Mobile action bar */
.mbar{display:none}
@media (max-width:640px){
	.mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;align-items:center;
		padding:10px max(14px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));
		background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -8px 24px rgba(43,22,27,.08);
		transform:translateY(110%);transition:transform .25s ease}
	.mbar.is-shown{transform:none}
	.mbar__main{flex:1;min-height:50px}
	.mbar__icon{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:999px;background:var(--paper);color:var(--aub);text-decoration:none}
	.mbar__icon--wa{background:#25D366;color:#073b1d}
	.mbar__icon .ico{width:24px;height:24px}
	.wa-float{display:none}
	.site-foot{padding-bottom:120px}
}
@media (prefers-reduced-motion:reduce){
	@view-transition{navigation:none}
	.mbar{transition:none}
}

/* Product photo used as module image (white studio shot) */
.module__img--product{background:#fff;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.module__img--product img{width:72%;height:82%;object-fit:contain;filter:none}
.module__img--product::after{display:none}

/* ---------- Aanmelden ---------- */
.steps-line{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:6px;font-size:15px;font-weight:600;color:var(--aub)}
.steps-line li{display:flex;align-items:center;gap:8px}
.steps-line span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:#fff;color:var(--red);font-size:13px;box-shadow:0 1px 0 var(--line)}
.steps-line li:last-child span{background:var(--green-soft);color:var(--green-text)}
.steps-line .ico{width:16px;height:16px;stroke-width:3}
.sec--signup{padding-top:48px}
.signup{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,4vw,48px);align-items:start}
.signup__form{display:flex;flex-direction:column;gap:22px;min-width:0}
.signup__done{grid-column:1/-1;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.step{border:0;margin:0;padding:clamp(20px,3vw,32px);background:#fff;border-radius:var(--r-lg);box-shadow:0 1px 0 var(--line);display:flex;flex-direction:column;gap:16px;min-width:0}
.step__title{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;padding:0;margin-bottom:4px}
.step__nr{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background:var(--red);color:#fff;font-size:17px}
.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pick__item{position:relative;display:block;cursor:pointer}
.pick__item input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pick__card{display:flex;align-items:center;gap:14px;padding:10px 14px 10px 10px;border:1.5px solid var(--line);border-radius:18px;background:var(--paper);transition:border-color .15s,background .15s,box-shadow .15s;height:100%}
.pick__img{flex:none;width:72px;height:72px;border-radius:12px;overflow:hidden;background:#f1e4e7}
.pick__img img{width:100%;height:100%;object-fit:cover}
.pick__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pick__body strong{font-family:var(--display);font-size:18px}
.pick__body small{font-size:13px;color:var(--muted);line-height:1.35}
.pick__meta{font-size:13px;color:var(--muted)}
.pick__meta b{color:var(--red);font-size:15px}
.pick__tick{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;border:1.5px solid var(--line);color:transparent;background:#fff}
.pick__tick .ico{width:14px;height:14px;stroke-width:3}
.pick__item input:checked+.pick__card{border-color:var(--red);background:#fff;box-shadow:0 8px 20px rgba(217,7,0,.08)}
.pick__item input:checked+.pick__card .pick__tick{background:var(--red);border-color:var(--red);color:#fff}
.pick__item input:focus-visible+.pick__card{outline:3px solid var(--red);outline-offset:2px}
.field__label{font-size:14px;font-weight:600;display:block;margin-bottom:8px}
.stepper{display:flex;align-items:center;gap:8px}
.stepper input{text-align:center;max-width:90px;-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper__btn{flex:none;width:50px;height:50px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font:600 22px/1 var(--body);color:var(--aub);cursor:pointer}
.stepper__btn:hover{border-color:var(--red);color:var(--red)}
.signup__submit{align-self:flex-start}
.summary{position:sticky;top:110px;display:flex;flex-direction:column;gap:14px}
.summary__card{background:var(--aub);color:#fff;border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:12px}
.summary__name{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.025em;line-height:1.05}
.summary__list{margin:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.summary__list div{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12)}
.summary__list dt{color:rgba(255,255,255,.7)}
.summary__list dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.summary__total{border-bottom:0!important;padding-top:4px}
.summary__total dd{font-family:var(--display);font-size:24px;color:var(--green)}
.summary__note{font-size:13px;color:rgba(255,255,255,.65)}
.summary__help{background:#fff;border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:8px;font-size:15px;box-shadow:0 1px 0 var(--line)}
.summary__help a{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none}
.summary__help .ico{color:var(--red)}
.signup-teaser{display:flex;align-items:center;gap:14px;align-self:flex-start;padding:12px 18px 12px 12px;border-radius:20px;background:#fff;text-decoration:none;box-shadow:var(--shadow);font-size:15px}
.signup-teaser .icon-dot{margin:0;width:40px;height:40px}
.signup-teaser > .ico{color:var(--red)}

/* ---------- Materialen ---------- */
.mat-collage{position:relative;aspect-ratio:1/0.9;min-width:0}
.mat-collage__item{position:absolute;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:999px;box-shadow:0 20px 40px rgba(43,22,27,.1);overflow:hidden;animation:matFloat 7s ease-in-out infinite}
.mat-collage__item img{width:70%;height:70%;object-fit:contain}
.mat-collage__item--1{width:46%;aspect-ratio:1;left:4%;top:6%;animation-delay:-1s}
.mat-collage__item--2{width:40%;aspect-ratio:1;right:2%;top:0;box-shadow:0 0 0 10px var(--blush),0 20px 40px rgba(43,22,27,.1);animation-delay:-3s}
.mat-collage__item--3{width:30%;aspect-ratio:1;left:40%;top:44%;box-shadow:0 0 0 8px var(--green-soft),0 20px 40px rgba(43,22,27,.1);animation-delay:-2s}
.mat-collage__item--4{width:34%;aspect-ratio:1;left:2%;bottom:0;animation-delay:-4s}
.mat-collage__item--5{width:28%;aspect-ratio:1;right:6%;bottom:6%;animation-delay:-5s}
@keyframes matFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.cat-bar{position:sticky;top:84px;z-index:20;padding:10px 0;margin-top:8px}
.cat-bar__list{display:flex;gap:8px;overflow-x:auto;padding:6px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:999px;box-shadow:0 8px 24px rgba(43,22,27,.06);scrollbar-width:none}
.cat-bar__list::-webkit-scrollbar{display:none}
.cat-bar__list a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:10px 16px;border-radius:999px;font-size:15px;font-weight:600;text-decoration:none}
.cat-bar__list a:hover,.cat-bar__list a.is-active{background:var(--blush);color:var(--red)}
.cat-bar__list .ico{color:var(--red);width:18px;height:18px}
.cat-bar__n{font-size:12px;color:var(--muted);background:var(--paper);border-radius:999px;padding:2px 8px}
.cat-head{display:flex;align-items:flex-start;gap:18px;margin-bottom:24px}
.cat-head .icon-dot{margin:4px 0 0}
.cat-head .h2{margin-bottom:6px}
.cat-head__intro{color:var(--muted);max-width:40em}
.pcard{position:relative;transition:transform .2s,box-shadow .2s}
.pcard:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(43,22,27,.08)}
.pcard__img{background:var(--paper)}
.pcard__img img{transition:transform .35s}
.pcard:hover .pcard__img img{transform:scale(1.05)}
.pcard p{flex:1}
.pcard__add{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;min-height:42px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:600 14px/1 var(--body);color:var(--aub);cursor:pointer;transition:all .15s}
.pcard__add .ico{width:16px;height:16px;transition:transform .2s}
.pcard__add:hover{border-color:var(--red);color:var(--red)}
.pcard__add[aria-pressed="true"]{background:var(--green-soft);border-color:var(--green-dark);color:var(--green-text)}
.pcard__add[aria-pressed="true"] .ico{transform:rotate(45deg)}
.aed-band{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,4vw,48px);border-radius:var(--r-lg);background:var(--aub);color:#fff;position:relative;overflow:hidden}
.aed-band::before{content:"";position:absolute;left:-60px;top:-60px;width:320px;height:320px;border-radius:999px;background:radial-gradient(closest-side,rgba(97,206,112,.22),transparent)}
.aed-band__img{position:relative;background:#fff;border-radius:var(--r-lg);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.aed-band__img img{width:78%;height:78%;object-fit:contain}
.aed-band__copy{position:relative;display:flex;flex-direction:column;gap:6px}
.aed-band .h2{color:#fff;margin-bottom:6px}
.aed-band .muted-light{margin-top:6px}
.aed-band .btns{margin-top:14px}
.aed-band [aria-pressed="true"]{background:var(--green);color:var(--aub)}
.ticks--dark{margin-top:20px;grid-template-columns:minmax(0,1fr)}
.ticks--dark .ico{color:#fff;background:var(--green-dark)}
.quote-list{background:var(--green-soft);border-radius:16px;padding:14px 16px}
.quote-list__title{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-text);margin-bottom:8px}
.quote-list ul{display:flex;flex-wrap:wrap;gap:6px}
.quote-list li{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-radius:999px;background:#fff;font-size:14px;font-weight:500}
.quote-list li button{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:0;border-radius:999px;background:var(--paper);color:var(--muted);cursor:pointer;font-size:16px;line-height:1}
.quote-pill{position:fixed;left:50%;bottom:22px;z-index:61;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 10px 0 20px;border-radius:999px;background:var(--aub);color:#fff;font-weight:600;text-decoration:none;box-shadow:0 14px 34px rgba(43,22,27,.3)}
.quote-pill:hover{color:#fff}
.quote-pill__n{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border-radius:999px;background:var(--red);font-variant-numeric:tabular-nums}
.quote-pill.is-bump{animation:bump .4s ease}
@keyframes bump{40%{transform:translateX(-50%) scale(1.08)}}

@media (min-width:1081px){.pgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:960px){
	.signup{grid-template-columns:minmax(0,1fr)}
	.summary{position:static}
	.aed-band{grid-template-columns:minmax(0,1fr)}
	.aed-band__img{max-width:320px}
	.mat-collage{max-width:460px;width:100%;margin:0 auto}
	.cat-bar{top:76px}
}
@media (max-width:640px){
	.pick{grid-template-columns:minmax(0,1fr)}
	.signup__submit{align-self:stretch}
	.quote-pill{bottom:86px}
	.cat-head{flex-direction:column;gap:10px}
}
@media (prefers-reduced-motion:reduce){.mat-collage__item{animation:none}}

/* ---------- Eerste keer / Herhaling ---------- */
.vswitch{display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;align-self:flex-start;padding:5px;border-radius:22px;background:#fff;box-shadow:0 8px 24px rgba(43,22,27,.07);view-transition-name:vswitch;max-width:100%}
.vswitch__opt{display:flex;flex-direction:column;gap:2px;padding:12px 20px;border-radius:17px;text-decoration:none;min-width:0;transition:background .2s,color .2s}
.vswitch__opt:hover{background:var(--paper);color:inherit}
.vswitch__lbl{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.015em}
.vswitch__meta{font-size:13px;color:var(--muted);white-space:nowrap}
.vswitch__opt.is-on{background:var(--aub);color:#fff}
.vswitch__opt.is-on .vswitch__meta{color:var(--green)}
.vswitch__hint{font-size:14px;color:var(--muted);margin-top:-10px}
.hero--page .h1--page{view-transition-name:page-title}
.sub__row{display:flex;align-items:center;gap:4px}
.sub__row > a:first-child{flex:1}
.sub .sub__repeat{flex:none;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--green-text);background:var(--green-soft)}
.sub .sub__repeat:hover{background:var(--green-dark);color:#fff}
.tcard{position:relative}
.tcard__link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.tcard__repeat{position:relative;z-index:2;display:flex;align-items:center;gap:8px;margin:14px -22px -20px;padding:13px 22px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--green-text);text-decoration:none;background:#fbfdfb}
a.tcard__repeat:hover{background:var(--green-soft);color:var(--green-text)}
.tcard__repeat--none{color:var(--muted);font-weight:500;background:transparent}
.tcard__repeat .ico{width:16px;height:16px}
@media (max-width:640px){.vswitch{display:grid;width:100%}.vswitch__opt{padding:10px 14px}.vswitch__meta{white-space:normal}}

/* ---------- Header: mostly white with a soft tint and a beating heart ---------- */
.paper{background-color:#fff;background-image:radial-gradient(55% 75% at 92% 0%,rgba(251,227,225,.75),transparent 70%),radial-gradient(40% 60% at 0% 100%,rgba(230,246,233,.55),transparent 70%);background-size:auto;background-position:0 0}
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:min(720px,80vw);aspect-ratio:1;right:max(-120px,calc(50% - 760px));top:52%;transform-origin:50% 55%}
.hero::before{
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.35' cy='.3' r='.9'%3E%3Cstop offset='0' stop-color='%23FF3B30'/%3E%3Cstop offset='1' stop-color='%23D90700'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M12 21.2 3.6 13A5.6 5.6 0 0 1 12 5.6 5.6 5.6 0 0 1 20.4 13Z'/%3E%3C/svg%3E") center/contain no-repeat;
	opacity:.07;translate:0 -50%;animation:heartbeat 1.05s ease-in-out infinite}
.hero::after{
	border-radius:50%;width:min(420px,50vw);right:max(30px,calc(50% - 610px));top:50%;translate:0 -50%;
	background:radial-gradient(closest-side,transparent 62%,rgba(217,7,0,.10) 64%,transparent 72%);
	animation:heartring 1.05s ease-out infinite}
@keyframes heartbeat{0%{transform:scale(1)}12%{transform:scale(1.07)}24%{transform:scale(.99)}36%{transform:scale(1.045)}55%,100%{transform:scale(1)}}
@keyframes heartring{0%,10%{transform:scale(.85);opacity:0}16%{opacity:1}70%,100%{transform:scale(1.9);opacity:0}}
.hero--slim::before{width:min(560px,70vw);right:max(-80px,calc(50% - 700px))}
.hero--slim::after{width:min(320px,45vw);right:max(40px,calc(50% - 560px))}
@media (max-width:960px){.hero::before{right:-30%;top:30%;opacity:.06}.hero::after{right:-5%;top:28%}}
@media (prefers-reduced-motion:reduce){.hero::before,.hero::after{animation:none}.hero::after{display:none}}
.hero:not(.hero--slim)::before{width:min(940px,90vw);right:max(-260px,calc(50% - 880px));top:50%}
.hero:not(.hero--slim)::after{width:min(640px,70vw);right:max(-60px,calc(50% - 730px));top:52%}
@media (max-width:960px){.hero:not(.hero--slim)::before{width:120vw;right:-35%;top:72%}.hero:not(.hero--slim)::after{width:80vw;right:-10%;top:72%}}

/* ---------- Seamless backgrounds: no hard colour edges between sections ---------- */
.paper{background-color:var(--paper);background-image:
	radial-gradient(55% 75% at 92% 0%,rgba(251,227,225,.75),transparent 70%),
	radial-gradient(38% 40% at 0% 62%,rgba(230,246,233,.5),transparent 72%),
	linear-gradient(180deg,#fff 0%,#fff 55%,var(--paper) 100%)}
.hero::before{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 92%);mask-image:linear-gradient(180deg,#000 55%,transparent 92%)}
.sec--tint{background:linear-gradient(180deg,var(--paper) 0,var(--paper-2) 140px,var(--paper-2) calc(100% - 140px),var(--paper) 100%)}
.sec--signup{background:transparent}

/* ---------- One shared heartbeat: green line and red heart beat together (driven by main.js) ---------- */
.beat-sync .hero::before{animation:none}
.beat-sync .hero::after{animation:none;opacity:0}
.beat-sync .hero.is-beat::before{animation:beatOnce .75s ease-out 1}
.beat-sync .hero.is-beat::after{animation:heartring .9s ease-out 1}
@keyframes beatOnce{0%{transform:scale(1)}14%{transform:scale(1.08)}28%{transform:scale(.99)}42%{transform:scale(1.045)}70%,100%{transform:scale(1)}}

/* ---------- WhatsApp: clearer and more inviting ---------- */
.btn--wa{background:#25D366;color:#073b1d;border-color:#25D366}
.btn--wa:hover{background:#1fbe5b;border-color:#1fbe5b;color:#062f17}
.closer .btn--wa{box-shadow:0 8px 20px rgba(0,0,0,.15)}
.wa-line{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:15px;color:var(--muted);text-decoration:none}
.wa-line .ico{color:#1fae52;width:20px;height:20px}
.wa-line strong{color:#118a3e;text-decoration:underline;text-underline-offset:3px}
.wa-line:hover strong{color:#0b6b2f}
.wa-ask{margin-top:22px;padding:22px;border-radius:22px;background:#E9F9EF;border:1px solid #c9efd7}
.wa-ask__head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.wa-ask__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:#25D366;color:#fff}
.wa-ask__icon .ico{width:24px;height:24px}
.wa-ask__title{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.015em}
.wa-ask__sub{font-size:14px;color:var(--muted);margin-top:2px}
.wa-ask__chips{display:flex;flex-wrap:wrap;gap:8px}
.wa-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;border:1.5px solid #bfe9cf;font-size:14px;font-weight:600;color:#0d5c2a;text-decoration:none;transition:background .15s,border-color .15s,transform .15s}
.wa-chip .ico{width:16px;height:16px}
.wa-chip:hover{background:#25D366;border-color:#25D366;color:#062f17;transform:translateY(-1px)}
.wa-chip--own{background:#25D366;border-color:#25D366;color:#062f17}
.wa-bubble{position:fixed;right:18px;bottom:88px;z-index:62;width:min(340px,calc(100vw - 28px));padding:18px;border-radius:22px 22px 6px 22px;background:#fff;box-shadow:0 20px 50px rgba(43,22,27,.22);transform-origin:100% 100%;animation:waIn .35s cubic-bezier(.2,.8,.2,1)}
.wa-bubble__close{position:absolute;right:10px;top:10px;width:32px;height:32px;border:0;border-radius:999px;background:var(--paper);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.wa-bubble__close .ico{width:16px;height:16px}
.wa-bubble__head{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding-right:30px}
.wa-bubble__avatar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;background:var(--blush);color:var(--red)}
.wa-bubble__head strong{display:block;font-family:var(--display);font-size:17px}
.wa-bubble__head small{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.wa-bubble__dot{width:8px;height:8px;border-radius:99px;background:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.2)}
.wa-bubble__text{font-size:15px;line-height:1.5;margin-bottom:14px}
.wa-bubble__btn{width:100%}
@keyframes waIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.wa-float.is-nudge{animation:waNudge 1s ease 2}
@keyframes waNudge{0%,100%{transform:none}20%{transform:translateY(-4px) rotate(-6deg)}40%{transform:translateY(0) rotate(5deg)}60%{transform:rotate(-3deg)}}
@media (max-width:640px){
	.mbar .mbar__main{flex:1 1 0;min-width:0;padding:0 12px;gap:8px}
	.mbar .btn--wa .ico{width:20px;height:20px}
	.wa-bubble{right:14px;left:14px;width:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));border-radius:22px}
	.wa-ask{padding:18px}
}
@media (prefers-reduced-motion:reduce){.wa-bubble,.wa-float.is-nudge{animation:none}}

/* ---------- QR codes and review invitation ---------- */
.qr{display:block;width:120px;height:120px;border-radius:12px;background:#fff;padding:6px}
.qr-card{display:flex;align-items:center;gap:16px;padding:14px 18px 14px 14px;background:#fff;border-radius:var(--r);box-shadow:0 1px 0 var(--line);font-size:14px;color:var(--muted)}
.qr-card strong{color:var(--text)}
.qr-card .qr{width:96px;height:96px;flex:none;border:1px solid var(--line)}
.wa-ask{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head qr" "chips qr";column-gap:24px}
.wa-ask__head{grid-area:head}
.wa-ask__chips{grid-area:chips}
.wa-ask__qr{grid-area:qr;margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:#0d5c2a;font-weight:600;align-self:center}
.review-cta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;padding:clamp(22px,3vw,32px);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow)}
.review-cta__stars{font-size:30px;letter-spacing:3px;color:#E8A400;line-height:1}
.review-cta__copy{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.review-cta__copy p{color:var(--muted);max-width:42em}
.review-cta__copy .btn{margin-top:6px}
.review-cta__qr{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600}
.review-cta__qr .qr{border:1px solid var(--line)}
@media (max-width:900px){
	.qr-card,.wa-ask__qr,.review-cta__qr{display:none}
	.wa-ask{display:block}
	.review-cta{grid-template-columns:minmax(0,1fr);gap:12px}
}
.ccard strong{color:var(--text)}

/* ---------- Floating WhatsApp button, three looks (html[data-wa] = a | b | c; default a) ---------- */
.wa-float{height:auto;min-height:64px;padding:8px 22px 8px 8px;gap:12px;animation:none}
.wa-float__icon{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:999px;background:#128C4A;color:#fff}
.wa-float__icon .ico{width:26px;height:26px}
.wa-float__icon::before,.wa-float__icon::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid #25D366;opacity:0;pointer-events:none}
.wa-float.is-pulse .wa-float__icon::before{animation:waRing 1.1s ease-out 1}
.wa-float.is-pulse .wa-float__icon::after{animation:waRing 1.1s .18s ease-out 1}
@keyframes waRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.wa-float__badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font:700 12px/20px var(--body);text-align:center;box-shadow:0 0 0 2px #fff;animation:waPop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes waPop{from{transform:scale(0)}to{transform:scale(1)}}
.wa-float__txt{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.wa-float__label{font-size:16px;font-weight:800;position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important}
.wa-float__sub{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;opacity:.8;margin-top:2px;min-height:14px}
.wa-float__typing{display:none;gap:3px;align-items:center}
.wa-float__typing i{width:5px;height:5px;border-radius:99px;background:currentColor;animation:waDot 1s infinite}
.wa-float__typing i:nth-child(2){animation-delay:.15s}.wa-float__typing i:nth-child(3){animation-delay:.3s}
@keyframes waDot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-3px);opacity:1}}
.wa-float.is-typing .wa-float__status{display:none}
.wa-float.is-typing .wa-float__typing{display:inline-flex}
.wa-float:hover .wa-float__icon{transform:rotate(-8deg);transition:transform .2s}

/* b: chat card, white with green accents */
html[data-wa="b"] .wa-float{background:#fff;color:var(--text);box-shadow:0 14px 36px rgba(43,22,27,.18);border:1px solid #d9f3e2}
html[data-wa="b"] .wa-float__icon{background:#25D366;color:#fff}
html[data-wa="b"] .wa-float__sub{color:#118a3e;opacity:1}
html[data-wa="b"] .wa-float__status::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:99px;background:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.2);vertical-align:1px}
html[data-wa="b"] .wa-float:hover{color:var(--text)}

/* c: compact round button, text slides out on hover */
html[data-wa="c"] .wa-float{padding:6px;min-height:0;gap:0;background:#25D366}
html[data-wa="c"] .wa-float__icon{width:56px;height:56px;background:#25D366;color:#fff}
html[data-wa="c"] .wa-float__icon .ico{width:30px;height:30px}
html[data-wa="c"] .wa-float__txt{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s ease,padding .35s ease;color:#073b1d}
html[data-wa="c"] .wa-float:hover .wa-float__txt,html[data-wa="c"] .wa-float.is-open .wa-float__txt{max-width:220px;padding:0 16px 0 6px}
@media (prefers-reduced-motion:reduce){.wa-float__icon::before,.wa-float__icon::after,.wa-float__typing i,.wa-float__badge{animation:none!important}}

/* ---------- WhatsApp bubble comes out of the button ---------- */
.wa-bubble{bottom:96px;right:18px;border-radius:22px;transform-origin:calc(100% - 34px) calc(100% + 14px);animation:waGrow .35s cubic-bezier(.2,.9,.3,1.2)}
.wa-bubble::after{content:"";position:absolute;right:26px;bottom:-9px;width:18px;height:18px;background:#fff;transform:rotate(45deg);border-radius:0 0 4px 0;box-shadow:6px 6px 14px rgba(43,22,27,.08)}
@keyframes waGrow{from{opacity:0;transform:translateY(12px) scale(.3)}to{opacity:1;transform:none}}
.wa-bubble__dots{display:none;gap:5px;align-items:center;padding:4px 6px}
.wa-bubble__dots i{width:8px;height:8px;border-radius:99px;background:#9aa49f;animation:waDot 1s infinite}
.wa-bubble__dots i:nth-child(2){animation-delay:.15s}.wa-bubble__dots i:nth-child(3){animation-delay:.3s}
.wa-bubble.is-typing{width:auto;padding:14px 18px}
.wa-bubble.is-typing .wa-bubble__dots{display:inline-flex}
.wa-bubble.is-typing .wa-bubble__body{display:none}
.wa-bubble:not(.is-typing) .wa-bubble__body{animation:waFade .3s ease}
@keyframes waFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* While the bubble is open the button stays a calm round icon (no sliding text) */
html[data-wa="c"] .wa-float.has-bubble .wa-float__txt{max-width:0;padding:0}
@media (max-width:640px){.wa-bubble{bottom:calc(84px + env(safe-area-inset-bottom,0px))}.wa-bubble::after{right:auto;left:calc(50% + 20px)}}
@media (prefers-reduced-motion:reduce){.wa-bubble__dots i{animation:none}}
.admin-bar .site-head{top:32px}@media (max-width:782px){.admin-bar .site-head{top:46px}}
/* Materialen: "meer in assortiment" note */
.mat-more{margin:-6px 0 22px;max-width:56ch;font-size:15px;color:var(--muted,#5c4a4f)}
/* One review: a single wide card instead of a lonely column */
.grid.reviews--single{grid-template-columns:1fr;max-width:760px}
.review blockquote p+p{margin-top:.7em}
