/* Plantsoon hero — pure HTML/CSS, no scripts.
   Schaalt volledig mee met de breedte via CSS container-query units (cqw).
   1 cqw = 1% van de hero-breedte. Sub-componenten gebruiken genest em zodat
   de interne maten 1-op-1 de oorspronkelijke verhoudingen volgen. */

.psh-wrap { container-type: inline-size; position: relative; width: 100%; max-width: 1240px; }

.psh {
  position: relative; width: 100%; aspect-ratio: 620 / 540;
  overflow: hidden; background: #1a2818;
  border-radius: 18px;
  font-size: 1cqw;                 /* 1em = 1% hero-breedte            */
  --cycle: 12.5s;
  font-family: -apple-system, system-ui, sans-serif;
}

/* ---------- achtergrond ---------- */
.psh-bg {
  position: absolute; inset: -6cqw;
  background: url(/images/website_2/main/maple-sm.jpg) center / cover no-repeat;
  filter: blur(1.7cqw) saturate(1.1);
}
.psh-tint {
  position: absolute; inset: 0; mix-blend-mode: multiply; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,210,140,.10) 0%, rgba(60,80,50,.18) 60%, rgba(20,30,20,.30) 100%);
}
.psh-leak {
  position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 10% 5%, rgba(255,235,170,.28), transparent 60%);
}
.psh-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 110% 110% at 50% 45%, transparent 55%, rgba(0,0,0,.45) 100%);
}
.psh-fgleaf { position: absolute; left: -6.5cqw; bottom: -5cqw; filter: blur(1.6cqw); opacity: .7; pointer-events: none; }
.psh-fgleaf i { position: absolute; display: block; }
.psh-fgleaf i:nth-child(1){ left:0; top:0; width:18cqw; height:11cqw; background:#3a5e2a; border-radius:60% 30% 50% 40%; transform:rotate(-25deg); }
.psh-fgleaf i:nth-child(2){ left:6.5cqw; top:5cqw; width:15cqw; height:10cqw; background:#2a4a20; border-radius:60% 30% 50% 40%; transform:rotate(15deg); }
.psh-fgleaf i:nth-child(3){ left:13cqw; top:1cqw; width:13cqw; height:9cqw; background:#4a6e36; border-radius:60% 30% 50% 40%; transform:rotate(-8deg); }

.psh-glow-tr {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 50% 35% at 90% 8%, rgba(255,225,150,.18), transparent 65%);
}
.psh-flash {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(ellipse 40% 50% at 75% 45%, rgba(200,255,235,.6), transparent 55%);
  animation: ps-flash var(--cycle) infinite;
}

/* ---------- label (centraal — wijkt na de scan naar rechtsboven, achter de telefoon) ---------- */
.psh-label { position: absolute; top: 22%; left: 16%; transform-origin: center center; font-size: .68cqw; z-index: 1;
  animation: ps-label-recede var(--cycle) infinite cubic-bezier(.5,0,.2,1); }
.psh-label__plate {
  position: relative; box-sizing: border-box;
  width: 100em; height: 71.43em; border-radius: 5em; color: #f4f1e6;
  background: linear-gradient(135deg, #0e1a36 0%, #08122a 60%, #050a1a 100%);
  box-shadow: inset 0 .24em 0 rgba(255,255,255,.12), inset 0 -.24em 0 rgba(0,0,0,.5),
              0 2.85em 6.17em rgba(0,0,0,.55), 0 .71em 1.9em rgba(0,0,0,.4);
}
.psh-label__nr { position:absolute; top:2.04cqw; left:2.38cqw; font-size:3.8em; font-family: ui-monospace,"SF Mono",monospace; font-weight:500; letter-spacing:.025em; color:rgba(244,241,230,.55); }
.psh-label__fam { position:absolute; top:2.04cqw; right:4.08cqw; font-size:3.8em; font-style:italic; letter-spacing:.012em; color:rgba(244,241,230,.55); }
.psh-label__name { position:absolute; top:10em; left:0; right:0; bottom:23em; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4.5em; text-align:center; padding:0 6em; font-family:Georgia,"Times New Roman",serif; }
.psh-label__name b { font-size:10em; font-weight:400; line-height:1.08; letter-spacing:.007em; white-space:nowrap; }
.psh-label__name em { font-size:6.2em; font-style:italic; line-height:1.08; white-space:nowrap; color:rgba(244,241,230,.92); }
.psh-label__brand { position:absolute; left:4em; bottom:5em; display:flex; align-items:center; gap:1.8em; }
.psh-label__brand span { font-size:3.2em; font-weight:600; letter-spacing:.156em; text-transform:uppercase; color:rgba(244,241,230,.85); }
.psh-label__qr { position:absolute; right:4em; bottom:3em; display:flex; flex-direction:column; align-items:center; gap:1.1em; }
.psh-label__qr .pad { position:relative; background:#f4f1e6; padding:.8em; border-radius:.8em; }
.psh-label__qr svg { display:block; width:21em; height:21em; }
.psh-label__qr .url { font-size:3.2em; letter-spacing:.015em; color:rgba(244,241,230,.65); }

/* scanner overlay over QR */
.psh-scan { position:absolute; inset:-1.68em; overflow:hidden; pointer-events:none; animation: ps-scanner-corners var(--cycle) infinite; }
.psh-scan i { position:absolute; width:4.62em; height:4.62em; filter: drop-shadow(0 0 .9em #7be0c4); }
.psh-scan i.tl{ top:0; left:0; border-top:.73em solid #7be0c4; border-left:.73em solid #7be0c4; }
.psh-scan i.tr{ top:0; right:0; border-top:.73em solid #7be0c4; border-right:.73em solid #7be0c4; }
.psh-scan i.bl{ bottom:0; left:0; border-bottom:.73em solid #7be0c4; border-left:.73em solid #7be0c4; }
.psh-scan i.br{ bottom:0; right:0; border-bottom:.73em solid #7be0c4; border-right:.73em solid #7be0c4; }
.psh-scan b { position:absolute; left:1.68em; right:1.68em; top:0; height:.84em; display:block;
  background:linear-gradient(90deg, transparent, #7be0c4 30%, #7be0c4 70%, transparent);
  box-shadow:0 0 1.9em #7be0c4, 0 0 3.3em rgba(123,224,196,.5);
  animation: ps-scan-bar var(--cycle) infinite cubic-bezier(.4,0,.6,1); }

/* ---------- telefoon (verborgen — komt tijdens de scan over het label) ---------- */
.psh-phone {
  position:absolute; top:12%; left:33%; font-size:.30cqw; transform:rotate(-7deg); z-index:5;
  width:100em; height:216em; border-radius:13.5em; background:#0a0a0a; padding:1.8em; box-sizing:border-box;
  box-shadow:0 12em 24em rgba(0,0,0,.5), 0 3em 6em rgba(0,0,0,.35), inset 0 0 0 .8em rgba(255,255,255,.08);
  filter: drop-shadow(0 5cqw 8cqw rgba(0,0,0,.42)); transform-origin:center bottom;
  animation: ps-phone-glow var(--cycle) infinite, ps-phone-enter var(--cycle) infinite cubic-bezier(.2,.7,.2,1);
}
.psh-phone__screen { position:relative; width:100%; height:100%; border-radius:11.7em; overflow:hidden; background:#000; }
.psh-scroll { position:absolute; inset:0; overflow:hidden; }
.psh-scroll__inner { width:100%; --ps-scroll-end:-180em; animation: ps-phone-page-scroll var(--cycle) infinite cubic-bezier(.5,0,.5,1); will-change:transform; }
.psh-island { position:absolute; top:4em; left:50%; transform:translateX(-50%); width:32em; height:9em; border-radius:5em; background:#0a0a0a; z-index:50; }
.psh-phone__edge { position:absolute; inset:0; border-radius:13.5em; box-shadow: inset .54em .54em .54em rgba(255,255,255,.15); pointer-events:none; }

/* locked screen — camera-zoeker die de QR scant */
.psh-locked { position:absolute; inset:0; animation: ps-phone-locked var(--cycle) infinite;
  background:linear-gradient(180deg,#0a0e10 0%,#14181a 60%,#0a0e10 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9em; }
.psh-locked__view { position:relative; width:64em; height:64em; }
.psh-locked__view .c { position:absolute; width:17em; height:17em; filter:drop-shadow(0 0 1.4em rgba(95,224,160,.7)); }
.psh-locked__view .c.tl { top:0; left:0; border-top:1.8em solid #4fd089; border-left:1.8em solid #4fd089; border-top-left-radius:4em; }
.psh-locked__view .c.tr { top:0; right:0; border-top:1.8em solid #4fd089; border-right:1.8em solid #4fd089; border-top-right-radius:4em; }
.psh-locked__view .c.bl { bottom:0; left:0; border-bottom:1.8em solid #4fd089; border-left:1.8em solid #4fd089; border-bottom-left-radius:4em; }
.psh-locked__view .c.br { bottom:0; right:0; border-bottom:1.8em solid #4fd089; border-right:1.8em solid #4fd089; border-bottom-right-radius:4em; }
.psh-locked__qr { position:absolute; inset:14em; opacity:.5; }
.psh-locked__qr i { position:absolute; width:13em; height:13em; border:2em solid rgba(255,255,255,.5); border-radius:2em; }
.psh-locked__qr i:nth-child(1){ top:0; left:0; } .psh-locked__qr i:nth-child(2){ top:0; right:0; } .psh-locked__qr i:nth-child(3){ bottom:0; left:0; }
.psh-locked__view .beam { position:absolute; left:2.5em; right:2.5em; height:1.8em; border-radius:1em;
  background:linear-gradient(90deg,transparent,#6fe9ad 20%,#6fe9ad 80%,transparent);
  box-shadow:0 0 5em 1em rgba(95,224,160,.6); animation: ps-locked-beam 1.7s infinite ease-in-out; }
.psh-locked__mark { display:flex; align-items:center; gap:3em; animation: ps-locked-pulse var(--cycle) infinite ease-in-out; }
.psh-locked__mark .box { width:15.65em; height:15.65em; border-radius:3.91em; background:rgba(47,107,58,.18); border:.43em solid rgba(47,107,58,.35); display:flex; align-items:center; justify-content:center; }
.psh-locked__mark .box i { width:5.22em; height:5.22em; border-radius:50%; background:#2f6b3a; display:block; }
.psh-locked__mark span { font-size:3.91em; letter-spacing:.156em; text-transform:uppercase; color:rgba(244,241,232,.4); }

/* ---------- plantpagina ---------- (font-size in em, geometrie in cqw — geen dubbele schaal) */
.psh-page { font-size:.4348em; width:100%; background:#f7f5ef; color:#1a201c; }
.psh-page__top { padding:4.96cqw 1.83cqw 1.04cqw; display:flex; align-items:center; justify-content:space-between; }
.psh-page__top .g { display:flex; align-items:center; gap:.65cqw; min-width:0; }
.psh-page__top .leaf { flex:none; width:1.83cqw; height:1.83cqw; border-radius:.39cqw; background:#2f6b3a; display:flex; align-items:center; justify-content:center; font-size:9em; }
.psh-page__top .gn { font-size:10em; font-weight:600; color:#2f6b3a; white-space:nowrap; }
.psh-page__top .x { font-size:12em; color:#8a9088; flex:none; }

.psh-photo { position:relative; width:100%; height:22.83cqw; overflow:hidden; }
.psh-photo__strip { display:flex; width:200%; height:100%; animation: ps-photo-swipe var(--cycle) infinite cubic-bezier(.55,0,.3,1); will-change:transform; }
.psh-photo__strip > div { width:50%; height:100%; }
.psh-photo__s1 { background:url(/images/website_2/main/maple-sm.jpg) center 40% / cover; }
.psh-photo__s2 { background:url(/images/website_2/main/maple2-sm.jpg) center 45% / cover; }
.psh-photo__grad { position:absolute; left:0; right:0; bottom:0; height:40%; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(0,0,0,.25)); }
.psh-photo__dots { position:absolute; left:0; right:0; bottom:1.30cqw; display:flex; justify-content:center; gap:.65cqw; }
.psh-photo__dots i { width:.65cqw; height:.65cqw; border-radius:50%; background:#fff; box-shadow:0 .13cqw .26cqw rgba(0,0,0,.4); display:block; }
.psh-photo__dots i:nth-child(1){ animation: ps-photo-pip1 var(--cycle) infinite; }
.psh-photo__dots i:nth-child(2){ animation: ps-photo-pip2 var(--cycle) infinite; }
.psh-photo__count { position:absolute; right:1.30cqw; bottom:1.30cqw; width:4.43cqw; height:1.96cqw; }
.psh-photo__count span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); color:#fff; border-radius:9cqw; font-size:9em; font-weight:600; }
.psh-photo__count span:nth-child(1){ animation: ps-photo-count1 var(--cycle) infinite; }
.psh-photo__count span:nth-child(2){ animation: ps-photo-count2 var(--cycle) infinite; }

.psh-sec { padding:0 1.83cqw; }
.psh-sec--t { padding-top:1.57cqw; }
.psh-sec--s { padding-top:1.83cqw; }
.psh-sec--m { padding-top:2.09cqw; }
.psh-sec--k { padding:1.83cqw 1.83cqw 2.61cqw; }
.psh-h1 { font-size:18em; font-weight:700; line-height:1.15; letter-spacing:-.017em; }
.psh-sub { font-size:11em; font-style:italic; color:#5a6058; margin-top:.26cqw; }
.psh-meta { display:flex; gap:.78cqw; margin-top:1.04cqw; align-items:center; font-size:10em; color:#5a6058; white-space:nowrap; }
.psh-meta .dot { color:#8a9088; }
.psh-tags { display:flex; gap:.78cqw; margin-top:1.30cqw; font-size:9em; color:#5a6058; }
.psh-tags span { padding:.39cqw .91cqw; background:#eae6dc; border-radius:9cqw; }
.psh-lbl { font-size:9.5em; font-weight:700; line-height:1.3; color:#2f6b3a; text-transform:uppercase; letter-spacing:.063em; }
.psh-p { font-size:10.5em; line-height:1.55; color:#1a201c; margin-top:.65cqw; }
.psh-p + .psh-p { margin-top:1.04cqw; }
.psh-subm { font-size:10em; color:#5a6058; margin-top:.26cqw; margin-bottom:1.04cqw; }
.psh-coord { margin-top:1.04cqw; font-size:10em; color:#5a6058; }
.psh-know { margin-top:1.57cqw; padding:1.04cqw 1.30cqw; background:rgba(47,107,58,.08); border-radius:1.04cqw; font-size:10em; color:#2f6b3a; font-weight:600; display:flex; align-items:center; gap:.78cqw; }

/* ---------- map (geometrie in cqw) ---------- */
.psh-map { position:relative; width:100%; aspect-ratio:1.6/1; border-radius:1.30cqw; overflow:hidden; background:#f4ede0; box-shadow: inset 0 0 0 .13cqw rgba(0,0,0,.08), 0 .13cqw .39cqw rgba(0,0,0,.06); }
.psh-map svg.base { position:absolute; inset:0; width:100%; height:100%; display:block; }
.psh-map__compass { position:absolute; right:1.04cqw; top:1.04cqw; width:2.87cqw; height:2.87cqw; background:#fff; border-radius:50%; box-shadow:0 .13cqw .39cqw rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; font-size:10em; font-weight:700; color:#3a4034; }
.psh-map__compass i { position:absolute; top:-.39cqw; left:50%; transform:translateX(-50%); width:0; height:0; border-left:.39cqw solid transparent; border-right:.39cqw solid transparent; border-bottom:.65cqw solid #dc3c3c; }
.psh-map__zoom { position:absolute; right:1.04cqw; bottom:2.35cqw; background:#fff; border-radius:.52cqw; box-shadow:0 .13cqw .39cqw rgba(0,0,0,.18); overflow:hidden; font-size:12em; font-weight:500; color:#5a604a; line-height:1; }
.psh-map__zoom span { width:2.35cqw; height:2.35cqw; display:flex; align-items:center; justify-content:center; }
.psh-map__zoom span:first-child { border-bottom:.13cqw solid #e8e2d0; }
.psh-map__scale { position:absolute; left:1.04cqw; bottom:.78cqw; display:flex; align-items:center; gap:.52cqw; font-size:7em; color:#5a604a; }
.psh-map__scale b { width:3.65cqw; height:.52cqw; border-left:.13cqw solid #5a604a; border-right:.13cqw solid #5a604a; border-bottom:.13cqw solid #5a604a; display:block; }
.psh-map__pin { position:absolute; left:28%; top:26%; width:0; height:0; }
.psh-map__pin .ring { position:absolute; left:-1.17cqw; top:-1.17cqw; width:2.35cqw; height:2.35cqw; border-radius:50%; background:rgba(220,60,60,.5); animation: ps-map-pulse 2s infinite ease-out; }
.psh-map__pin .out { position:absolute; left:-.91cqw; top:-.91cqw; width:1.83cqw; height:1.83cqw; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ee5858, #b81f1f); box-shadow:0 0 0 .26cqw #fff, 0 .26cqw .52cqw rgba(0,0,0,.4); }
.psh-map__pin .pip { position:absolute; left:-.33cqw; top:-.33cqw; width:.65cqw; height:.65cqw; border-radius:50%; background:#fff; }
.psh-map__pin .call { position:absolute; left:1.57cqw; top:-1.43cqw; padding:.39cqw 1.04cqw; background:#fff; border-radius:9cqw; font-size:8.5em; font-weight:700; color:#1a201c; white-space:nowrap; box-shadow:0 .26cqw .78cqw rgba(0,0,0,.22), 0 0 0 .13cqw rgba(0,0,0,.05); }

/* ---------- keyframes ---------- */
/* Volgorde: label centraal — telefoon komt omhoog — scanindicatie op QR — ontgrendelt naar pagina */
@keyframes ps-scanner-corners { 0%,24%{opacity:0;transform:scale(1.25)} 28%,44%{opacity:1;transform:scale(1)} 47%,100%{opacity:0;transform:scale(1)} }
@keyframes ps-scan-bar { 0%,26%{top:0;opacity:0} 29%{top:0;opacity:1} 44%{top:100%;opacity:1} 47%,100%{top:100%;opacity:0} }
@keyframes ps-flash { 0%,44%,50%,100%{opacity:0} 47%{opacity:.85} }
@keyframes ps-phone-locked { 0%,44%{opacity:1} 50%,96%{opacity:0} 100%{opacity:1} }
@keyframes ps-phone-page-scroll {
  0%,48%{opacity:0;transform:translateY(14em)} 54%{opacity:1;transform:translateY(0)} 71%{opacity:1;transform:translateY(0)}
  90%{opacity:1;transform:translateY(var(--ps-scroll-end,-300em))} 96%{opacity:1;transform:translateY(var(--ps-scroll-end,-300em))} 100%{opacity:0;transform:translateY(var(--ps-scroll-end,-300em))} }
@keyframes ps-phone-glow { 0%,40%,54%,100%{box-shadow:0 0 0 rgba(123,224,196,0)} 46%{box-shadow:0 0 17em 4em rgba(123,224,196,.55)} }
@keyframes ps-phone-enter {
  0%,10%{ opacity:0; transform:translate(0,40cqw) rotate(-7deg) scale(.92) }
  22%  { opacity:1; transform:translate(7cqw,4cqw) rotate(-7deg) scale(1) }
  46%  { opacity:1; transform:translate(7cqw,4cqw) rotate(-7deg) scale(1) }
  58%  { opacity:1; transform:translate(-11cqw,8cqw) rotate(-4deg) scale(1.34) }
  96%  { opacity:1; transform:translate(-11cqw,8cqw) rotate(-4deg) scale(1.34) }
  100% { opacity:0; transform:translate(-11cqw,40cqw) rotate(-7deg) scale(1.22) }
}
@keyframes ps-label-recede {
  0%,10%{ transform:rotate(-2deg) translate(0,0) scale(1); opacity:1 }
  22%   { transform:rotate(-2deg) translate(0,0) scale(1); opacity:1 }
  46%   { transform:rotate(-2deg) translate(0,0) scale(1); opacity:1 }
  58%   { transform:translate(24cqw,-18cqw) rotate(4deg) scale(.66); opacity:.85 }
  96%   { transform:translate(24cqw,-18cqw) rotate(4deg) scale(.66); opacity:.85 }
  100%  { transform:rotate(-2deg) translate(0,0) scale(1); opacity:1 }
}
@keyframes ps-locked-pulse { 0%,44%,100%{opacity:.35;transform:scale(1)} 34%{opacity:.85;transform:scale(1.08)} }
@keyframes ps-locked-beam { 0%{top:3em;opacity:.25} 12%{opacity:1} 50%{top:59em;opacity:1} 88%{opacity:1} 100%{top:3em;opacity:.25} }
@keyframes ps-map-pulse { 0%{transform:scale(.6);opacity:.75} 100%{transform:scale(3.2);opacity:0} }
@keyframes ps-photo-swipe { 0%,60%{transform:translateX(0)} 66%,100%{transform:translateX(-50%)} }
@keyframes ps-photo-pip1 { 0%,61%{opacity:1} 66%,100%{opacity:.4} }
@keyframes ps-photo-pip2 { 0%,61%{opacity:.4} 66%,100%{opacity:1} }
@keyframes ps-photo-count1 { 0%,61%{opacity:1} 65%,100%{opacity:0} }
@keyframes ps-photo-count2 { 0%,61%{opacity:0} 65%,100%{opacity:1} }

/* respecteer reduced-motion: toon de pagina statisch i.p.v. de loop */
@media (prefers-reduced-motion: reduce) {
  .psh-flash, .psh-scan, .psh-scan b, .psh-phone, .psh-scroll__inner, .psh-locked, .psh-locked__view .beam,
  .psh-label, .psh-photo__strip, .psh-photo__dots i, .psh-photo__count span, .psh-map__pin .ring { animation: none !important; }
  .psh-label { transform: translate(24cqw,-18cqw) rotate(4deg) scale(.66); opacity:.85; }
  .psh-locked { opacity: 0; }
  .psh-scroll__inner { opacity: 1; transform: none; }
  .psh-photo__count span:nth-child(2) { opacity: 0; }
}

/* ============================================================
   SLIDESHOW — twee slides (slide 1: telefoon-scan, slide 2: browser)
   ============================================================ */
.psh-slideshow-outer { width: 100%; }
.psh-slideshow {
  position: relative; width: 100%; aspect-ratio: 620 / 540;
}
.psh-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .55s ease;
}
.psh-slide.is-active { opacity: 1; visibility: visible; }
/* korte reset om de animaties van een binnenkomende slide vanaf 0 te herstarten */
.psh-anim-reset, .psh-anim-reset * { animation: none !important; }
.psh-slide > .psh-wrap, .psh-slide > .psb-wrap { width: 100%; }

/* navigatie-bolletjes */
.psh-dots { display: flex; justify-content: center; gap: 9px; margin-top: 14px; }
.psh-dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(21,47,48,.22); cursor: pointer; transition: all .25s ease;
}
.psh-dot:hover { background: rgba(21,47,48,.4); }
.psh-dot.is-active { background: #2f6b3a; transform: scale(1.25); }

/* uitleg-banner op beide slides (klein bijschrift) */
.ps-banner { position: absolute; z-index: 10; display: flex; align-items: center; max-width: 56cqw; padding: 1.6cqw 2.6cqw; border-radius: 2.4cqw; background: #fce6cf; border: .35cqw solid #d4892d; color: #b5701f; font-size: 3cqw; line-height: 1.3; font-weight: 600; box-shadow: 0 1.6cqw 4cqw rgba(0,0,0,.4); }
.ps-banner--br { right: -5.5cqw; bottom: 3cqw; }
.ps-banner--bl { left: 3cqw; bottom: 3cqw; }
.ps-banner--raised { bottom: 14cqw; }
/* op kleinere schermen valt de overhang buiten beeld: banners binnen het frame */
@media (max-width: 991px) {
  .ps-banner--br { right: 3cqw; }
}

/* ============================================================
   SLIDE 2 — browser (.psb)
   Geometrie in cqw, lettergroottes in em (1em = 1cqw).
   ============================================================ */
.psb-wrap { container-type: inline-size; position: relative; width: 100%; max-width: 1240px; }
.psb {
  position: relative; width: 100%; aspect-ratio: 620 / 540;
  overflow: hidden; border-radius: 18px; background: #0d1410; border: 1px solid #e3e6e2;
  font-size: 0.81cqw; --cycle: 12.5s; --cycle2: 20s; --ps2-end: -59cqw; --psd-end: -80cqw;
  font-family: -apple-system, system-ui, sans-serif;
}

/* browservenster */
.psb-browser { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.psb-bar { position: relative; height: 7.5cqw; flex: none; background: #eef1f3; display: flex; align-items: center; gap: 2cqw; padding: 0 3cqw; border-bottom: .13cqw solid #e0e4e6; }
.psb-bar .dots { display: flex; gap: 1.1cqw; }
.psb-bar .dots i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #cfd6d9; display: block; }
.psb-bar .dots i:nth-child(1){ background:#f0685f; } .psb-bar .dots i:nth-child(2){ background:#f6be4f; } .psb-bar .dots i:nth-child(3){ background:#5ec45e; }
.psb-bar .url { position: relative; flex: 1; height: 4.6cqw; background: #fff; border-radius: 2.3cqw; padding: 0 2.6cqw; font-size: 3.1em; color: #5a6660; border: .13cqw solid #e0e4e6; overflow: hidden; }
.psb-bar .url .lock { position: absolute; left: 2.6cqw; top: 50%; transform: translateY(-50%); width: 2.2cqw; height: 2.2cqw; border-radius: .5cqw; border: .35cqw solid #9aa6a0; box-sizing: border-box; }
.psb-bar .url span[class^="psb-url__"] { position: absolute; left: 6.6cqw; right: 2.6cqw; top: 50%; transform: translateY(-50%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psb-url__b { opacity: 0; }
.psh-slide.is-active .psb-url__a { animation: ps2-url-a var(--cycle2) infinite; }
.psh-slide.is-active .psb-url__b { animation: ps2-url-b var(--cycle2) infinite; }
.psb-reload { position: absolute; left: 0; bottom: 0; height: .5cqw; width: 0; background: #2f8f4e; opacity: 0; }
.psh-slide.is-active .psb-reload { animation: ps2-reload var(--cycle2) infinite; }

.psb-body { position: relative; flex: 1; overflow: hidden; background: #fff; }

/* ---------- HOME-scherm (scrollt door) ---------- */
.psb-home { position: absolute; inset: 0; }
.psb-home__scroll { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.psh-slide.is-active .psb-home__scroll { animation: ps2-scroll var(--cycle2) infinite cubic-bezier(.5,0,.5,1); }
.psh-slide.is-active .psb-home { animation: ps2-home-fade var(--cycle2) infinite; }

.psb-head { background: #152f30; padding: 2.2cqw 3cqw; display: flex; align-items: center; justify-content: space-between; }
.psb-head__brand { display: flex; flex-direction: column; line-height: 1.1; }
.psb-head__brand b { font-size: 4em; font-weight: 700; color: #fff; }
.psb-head__brand span { font-size: 2.4em; color: #cdd8cf; margin-top: .4cqw; }
.psb-head__brand span em { color: #8fd6a0; font-style: normal; font-weight: 600; }
.psb-head__nav { display: flex; align-items: center; gap: 2.4cqw; }
.psb-head__nav span { font-size: 3.1em; color: #eef3ee; }

.psb-hero { width: 100%; height: 32cqw; background: url("/images/website_2/main/Blue horizon garden.jpg") center 45% / cover; position: relative; }
.psb-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.18)); }

.psb-sec { padding: 3cqw; }
.psb-h2 { font-size: 5.2em; font-weight: 700; color: #1c2a22; margin-top: 2.6cqw; }
.psb-intro { font-size: 3.2em; line-height: 1.55; color: #2c352e; margin: 0; }

.psb-mapprev { position: relative; margin-top: 2.4cqw; width: 100%; height: 26cqw; border-radius: 2cqw; overflow: hidden; box-shadow: inset 0 0 0 .13cqw rgba(0,0,0,.06); }
.psb-mapprev svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.psb-mapprev .grp { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 30cqw; height: 14cqw; }
.psb-mapprev .grp i { position: absolute; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #3a9a55; box-shadow: 0 0 0 .35cqw rgba(255,255,255,.7); display: block; }

.psb-cats { margin-top: 3cqw; display: flex; gap: 1.6cqw; }
.psb-cat { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .8cqw; padding: 2cqw 1.6cqw; border-radius: 1.6cqw; background: #f4f6f2; }
.psb-cat:nth-child(2){ background:#eef6ee; } .psb-cat:nth-child(3){ background:#eef0f7; } .psb-cat:nth-child(4){ background:#eaf4f5; } .psb-cat:nth-child(5){ background:#f5f2ec; }
.psb-cat .ic { font-size: 4.4em; line-height: 1; }
.psb-cat .nm { font-size: 2.8em; font-weight: 600; color: #1c2a22; line-height: 1.15; }
.psb-cat .sub { font-size: 2.4em; color: #8a938b; }

.psb-spacer { height: 14cqw; }
.psb-spacer--home { height: 4cqw; }

/* zwevende actieknoppen (Search / Explore) */
.psb-fab { position: absolute; left: 50%; bottom: 3cqw; transform: translateX(-50%); display: flex; align-items: center; gap: 1cqw; padding: 1cqw; background: #fff; border-radius: 8cqw; box-shadow: 0 1cqw 3cqw rgba(0,0,0,.18), 0 0 0 .13cqw rgba(0,0,0,.05); z-index: 6; }
.psb-fab .search { font-size: 3.2em; font-weight: 600; color: #2f6b3a; padding: 1.4cqw 3cqw; border-radius: 6cqw; background: #eef6ee; }
.psb-fab .explore { font-size: 3.2em; font-weight: 600; color: #fff; padding: 1.4cqw 3.4cqw; border-radius: 6cqw; background: #2f8f4e; display: flex; align-items: center; gap: 1cqw; }
.psh-slide.is-active .psb-fab .explore { animation: ps2-press var(--cycle2) infinite; }

/* nep-cursor die naar Explore beweegt en klikt */
.psb-cursor { position: absolute; left: 0; top: 0; width: 4.2cqw; height: 4.2cqw; z-index: 7; opacity: 0; pointer-events: none;
  background: #fff; clip-path: polygon(0 0, 0 78%, 26% 60%, 44% 96%, 60% 88%, 42% 54%, 74% 54%); filter: drop-shadow(0 .4cqw .8cqw rgba(0,0,0,.5)); }
.psh-slide.is-active .psb-cursor { animation: ps2-cursor var(--cycle2) infinite; }

/* ---------- MAP/EXPLORE-scherm (WB3) ---------- */
.psb-map { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; background: #fff; }
.psh-slide.is-active .psb-map { animation: ps2-map-fade var(--cycle2) infinite; }
.psb-map__top { flex: none; height: 8cqw; display: flex; align-items: center; gap: 1.6cqw; padding: 0 2.6cqw; border-bottom: .13cqw solid #eceee9; }
.psb-map__top .back { width: 5cqw; height: 5cqw; border-radius: 50%; background: #f3f5f1; display: flex; align-items: center; justify-content: center; font-size: 3.6em; color: #3a4a40; }
.psb-map__top .sp { flex: 1; }
.psb-map__top .chip { display: flex; align-items: center; gap: 1cqw; height: 5cqw; padding: 0 2.4cqw; border-radius: 5cqw; background: #f3f5f1; font-size: 2.9em; font-weight: 600; color: #3a4a40; }
.psb-map__top .chip.round { width: 5cqw; padding: 0; justify-content: center; }

.psb-map__cols { flex: 1; display: flex; min-height: 0; }
.psb-side { width: 34%; flex: none; overflow: hidden; border-right: .13cqw solid #eceee9; padding: 2cqw; display: flex; flex-direction: column; gap: 1.6cqw; }
.psb-card { border-radius: 1.6cqw; overflow: hidden; box-shadow: 0 .4cqw 1.2cqw rgba(0,0,0,.08); background: #fff; }
.psb-card .img { width: 100%; height: 10.5cqw; background-size: cover; background-position: center; position: relative; }
.psb-card .img .leaf { position: absolute; top: 1cqw; right: 1cqw; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; font-size: 2em; }
.psb-card .tx { padding: 1.4cqw 1.6cqw 1.8cqw; }
.psb-card .sci { font-size: 2.9em; font-style: italic; color: #1c2a22; font-weight: 600; }
.psb-card .com { font-size: 2.6em; color: #7b857d; margin-top: .3cqw; }

.psb-canvas { flex: 1; position: relative; overflow: hidden; background: #e9eee1; }
.psb-stage { position: absolute; inset: 0; transform-origin: 52% 50%; }
.psb-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.psh-slide.is-active .psb-stage { animation: ps2-zoom var(--cycle2) infinite cubic-bezier(.6,0,.3,1); }
.psb-cl { position: absolute; transform: translate(-50%,-50%); min-width: 6.4cqw; height: 6.4cqw; padding: 0 1cqw; border-radius: 5cqw; background: #2f8f4e; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 3.1em; font-weight: 700; box-shadow: 0 .5cqw 1.2cqw rgba(0,0,0,.28), 0 0 0 .4cqw #fff; }
.psb-cl--pulse .ring { position: absolute; left: 50%; top: 50%; width: 6.4cqw; height: 6.4cqw; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(47,143,78,.45); z-index: -1; }
.psh-slide.is-active .psb-cl--pulse { animation: ps2-cl3-hide var(--cycle2) infinite; }
.psh-slide.is-active .psb-cl--pulse .ring { animation: ps2-cl-pulse 2s infinite ease-out; }

/* losse planten nadat cluster 3 zich opsplitst */
.psb-pin { position: absolute; transform: translate(-50%,-50%) scale(.2); width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: #2f8f4e; box-shadow: 0 .4cqw 1cqw rgba(0,0,0,.3), 0 0 0 .55cqw #fff; opacity: 0; }
.psb-pin--sel { background: #2f8f4e; }
.psh-slide.is-active .psb-pin { animation: ps2-split var(--cycle2) infinite; }

/* muisklik op de geselecteerde plant */
.psb-tap { position: absolute; left: 70%; top: 57%; width: 0; height: 0; z-index: 7; opacity: 0; }
.psb-tap .cur { position: absolute; left: 0; top: 0; width: 4.6cqw; height: 4.6cqw; transform-origin: 0 0; background: #fff; clip-path: polygon(0 0, 0 78%, 26% 60%, 44% 96%, 60% 88%, 42% 54%, 74% 54%); filter: drop-shadow(0 .4cqw .8cqw rgba(0,0,0,.5)); }
.psb-tap .ring { position: absolute; left: 0; top: 0; width: 8cqw; height: 8cqw; transform: translate(-50%,-50%); border-radius: 50%; border: .6cqw solid rgba(47,143,78,.65); opacity: 0; }
.psh-slide.is-active .psb-tap { animation: ps2-tap var(--cycle2) infinite; }
.psh-slide.is-active .psb-tap .cur { animation: ps2-tap-press var(--cycle2) infinite; }
.psh-slide.is-active .psb-tap .ring { animation: ps2-tap-ring var(--cycle2) infinite; }

/* ---------- DETAIL-scherm (Acer rubrum) — na de browser-refresh ---------- */
.psb-detail { position: absolute; inset: 0; opacity: 0; background: #fff; }
.psb-detail__scroll { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.psh-slide.is-active .psb-detail { animation: ps2-detail-fade var(--cycle2) infinite; }
.psh-slide.is-active .psb-detail__scroll { animation: ps2-detail-scroll var(--cycle2) infinite cubic-bezier(.5,0,.5,1); }

.psb-dsec { padding: 3cqw 3.5cqw; }
.psb-crumb { display: flex; align-items: center; gap: 1.2cqw; font-size: 2.7em; color: #8a938b; white-space: nowrap; }
.psb-crumb .back { color: #3a4a40; font-weight: 600; background: #f3f5f1; border-radius: 5cqw; padding: .8cqw 2cqw; }
.psb-crumb .sep { color: #c2cabf; }
.psb-dkicker { margin-top: 2.4cqw; font-size: 2.8em; color: #2f6b3a; font-weight: 600; }
.psb-dtitle { font-size: 7em; font-weight: 700; color: #15211a; line-height: 1.1; margin-top: .4cqw; }
.psb-dhero { margin-top: 2cqw; width: 100%; height: 34cqw; display: flex; gap: 1.2cqw; }
.psb-dhero .h { flex: 1; height: 100%; border-radius: 2cqw; background-size: cover; background-position: center 42%; }
.psb-dhero .h1 { background-image: url(/images/website_2/main/maple-sm.jpg); }
.psb-dhero .h2 { background-image: url(/images/website_2/main/maple2-sm.jpg); }

.psb-dcols { display: flex; gap: 3cqw; margin-top: 3cqw; align-items: flex-start; }
.psb-dmain { flex: 1; min-width: 0; }
.psb-dmain p { font-size: 3em; line-height: 1.5; color: #2c352e; margin: 0 0 1.6cqw; }
.psb-dmain p b { color: #15211a; }
.psb-dmain p.lbl { margin-bottom: .8cqw; }
.psb-dmain ul { margin: 0; padding-left: 3.4cqw; }
.psb-dmain li { font-size: 3em; line-height: 1.5; color: #2c352e; margin-bottom: .8cqw; }
.psb-dmain li.fade { color: #aeb4ac; }
.psb-dmore { margin-top: 1.6cqw; font-size: 3em; color: #15211a; font-weight: 600; }

.psb-dside { width: 38%; flex: none; display: flex; flex-direction: column; gap: 2.4cqw; }
.psb-dcard { background: #f4f6f2; border-radius: 2.4cqw; padding: 2.6cqw; }
.psb-dcard .k { font-size: 2.5em; color: #8a938b; margin-top: 1.6cqw; }
.psb-dcard .k:first-child { margin-top: 0; }
.psb-dcard .v { font-size: 3.1em; color: #15211a; font-weight: 600; margin-top: .4cqw; }
.psb-dcard .v em { font-style: italic; }
.psb-dcard .chips { display: flex; flex-wrap: wrap; gap: 1.2cqw; margin-top: 1.1cqw; }
.psb-dcard .chips span { font-size: 2.6em; background: #fff; border: .13cqw solid #e3e7df; border-radius: 5cqw; padding: .8cqw 1.8cqw; color: #3a4a40; white-space: nowrap; }
.psb-dcard--about p { margin: 0; font-size: 2.8em; line-height: 1.5; color: #2c352e; }
.psb-dmini { position: relative; width: 100%; height: 24cqw; border-radius: 2.4cqw; overflow: hidden; }
.psb-dmini svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.psb-dmini .pin { position: absolute; left: 60%; top: 58%; width: 3cqw; height: 3cqw; transform: translate(-50%,-50%); border-radius: 50%; background: #d4892d; box-shadow: 0 0 0 .5cqw #fff, 0 .3cqw .8cqw rgba(0,0,0,.3); }

/* ---------- keyframes slide 2 (cyclus 20s) ---------- */
@keyframes ps2-scroll {
  0%, 11%  { transform: translateY(0); }
  28%, 34% { transform: translateY(var(--ps2-end, -72cqw)); }
  100%     { transform: translateY(var(--ps2-end, -72cqw)); }
}
@keyframes ps2-home-fade {
  0%, 31% { opacity: 1; }
  35%     { opacity: 0; }
  99%     { opacity: 0; }
  100%    { opacity: 1; }
}
@keyframes ps2-map-fade {
  0%, 31% { opacity: 0; }
  35%, 56%{ opacity: 1; }
  61%     { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes ps2-cursor {
  0%, 12%  { opacity: 0; left: 30%; top: 58%; }
  16%      { opacity: 1; left: 30%; top: 58%; }
  24%      { opacity: 1; left: 62%; top: 90%; }
  27%      { opacity: 1; left: 62%; top: 90%; transform: scale(.82); }
  30%      { opacity: 1; left: 62%; top: 90%; transform: scale(1); }
  33%, 100%{ opacity: 0; left: 62%; top: 90%; }
}
@keyframes ps2-press {
  0%, 24%  { transform: scale(1); filter: brightness(1); }
  27%      { transform: scale(.93); filter: brightness(1.12); }
  30%, 100%{ transform: scale(1); filter: brightness(1); }
}
@keyframes ps2-cl-pulse { 0% { transform: translate(-50%,-50%) scale(.6); opacity: .7; } 100% { transform: translate(-50%,-50%) scale(3); opacity: 0; } }
@keyframes ps2-zoom {
  0%, 38%  { transform: scale(1); }
  52%, 100%{ transform: scale(2.1); }
}
@keyframes ps2-cl3-hide {
  0%, 42%   { opacity: 1; }
  48%, 100% { opacity: 0; }
}
@keyframes ps2-split {
  0%, 46%   { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
  52%, 56%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  61%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
}
@keyframes ps2-reload {
  0%, 55% { width: 0; opacity: 0; }
  56%     { width: 0; opacity: 1; }
  59%     { width: 72%; opacity: 1; }
  61%     { width: 100%; opacity: 1; }
  63%, 100% { width: 100%; opacity: 0; }
}
@keyframes ps2-url-a { 0%, 56% { opacity: 1; } 60% { opacity: 0; } 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ps2-url-b { 0%, 56% { opacity: 0; } 60% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ps2-detail-fade {
  0%, 58% { opacity: 0; }
  63%     { opacity: 1; }
  99%     { opacity: 1; }
  100%    { opacity: 0; }
}
@keyframes ps2-detail-scroll {
  0%, 64%  { transform: translateY(0); }
  96%, 100%{ transform: translateY(var(--psd-end, -86cqw)); }
}
@keyframes ps2-tap {
  0%, 49% { opacity: 0; }
  52%     { opacity: 1; }
  59%     { opacity: 1; }
  62%, 100% { opacity: 0; }
}
@keyframes ps2-tap-press {
  0%, 53% { transform: scale(1); }
  55%     { transform: scale(.78); }
  57%, 100% { transform: scale(1); }
}
@keyframes ps2-tap-ring {
  0%, 54%  { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
  56%      { opacity: 1; transform: translate(-50%,-50%) scale(.5); }
  60%      { opacity: 0; transform: translate(-50%,-50%) scale(1.7); }
  100%     { opacity: 0; transform: translate(-50%,-50%) scale(1.7); }
}

@media (prefers-reduced-motion: reduce) {
  .psh-slide.is-active .psb-home__scroll,
  .psh-slide.is-active .psb-home,
  .psh-slide.is-active .psb-map,
  .psh-slide.is-active .psb-stage,
  .psh-slide.is-active .psb-cursor,
  .psh-slide.is-active .psb-fab .explore,
  .psh-slide.is-active .psb-cl--pulse,
  .psh-slide.is-active .psb-cl--pulse .ring,
  .psh-slide.is-active .psb-pin,
  .psh-slide.is-active .psb-tap,
  .psh-slide.is-active .psb-tap .cur,
  .psh-slide.is-active .psb-tap .ring,
  .psh-slide.is-active .psb-reload,
  .psh-slide.is-active .psb-url__a,
  .psh-slide.is-active .psb-url__b,
  .psh-slide.is-active .psb-detail,
  .psh-slide.is-active .psb-detail__scroll { animation: none !important; }
  .psb-home { opacity: 0; }
  .psb-map { opacity: 0; }
  .psb-cl--pulse { opacity: 0; }
  .psb-pin { opacity: 0; }
  .psb-url__a { opacity: 0; }
  .psb-url__b { opacity: 1; }
  .psb-detail { opacity: 1; }
}