/* Vivanti Flowers - statische 1:1 build van het XD-ontwerp (artboards 1920px breed) */
:root{
  --goud:#897749;      /* primair: goud/olijf */
  --zand:#f3ede5;      /* achtergrond */
  --geel:#ecd761;
  --groen:#d1dfb9;
  --creme:#fcf9f6;
  --wit:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--page-bg,#fff);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
.stage{position:relative;width:1920px;overflow:hidden;background:var(--page-bg)}
.stage>*,.fixed-layer>*{position:absolute}
.t{position:absolute;font-kerning:normal}
.r,.img,.ic,.logo,.logo-mark,.mask{position:absolute;display:block}
.img{overflow:hidden}
.img img{width:100%;height:100%;object-fit:cover;display:block}
.btn{cursor:pointer}
.btn>*{position:absolute}
.home-link>svg{position:absolute}
.anchor{position:absolute;left:0;width:1px;height:1px}
.fixed-layer{position:fixed;top:0;left:0;width:1920px;height:0;z-index:50;pointer-events:none}
.fixed-layer a{pointer-events:auto}
.wa>*{position:absolute}
/* formulier (contact) */
.field{position:absolute;border:0;outline:0;background:var(--zand);border-radius:10px;padding:0 25px;
  font-family:'Inter Tight';font-weight:300;font-size:15px;color:#000;line-height:33px}
.field::placeholder{color:var(--goud);opacity:1}
textarea.field{padding:11px 25px;resize:none}
.field:focus{box-shadow:0 0 0 1px var(--goud) inset}

/* ---------- laadscherm ---------- */
.vl{position:fixed;inset:0;z-index:1000;background:var(--goud);display:flex;align-items:center;justify-content:center;
  clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}
.vl-logo{width:clamp(170px,14.3vw,340px);height:auto;display:block;overflow:visible;visibility:hidden;transform:translateY(-1.5%)}
.vl.is-ready .vl-logo{visibility:visible}
.vl.is-done{display:none}
html.vl-lock,html.vl-lock body{overflow:hidden}

/* ---------- titels: letters komen geblurd van onder omhoog (zoals tengilemalamala.com) ---------- */
.ttl.split .w{display:inline-block;padding:.5em .3em;margin:-.5em -.3em;clip-path:inset(0);-webkit-clip-path:inset(0)}
.ttl.split .c{display:inline-block;transform:translateY(calc(100% + 1em));filter:blur(5px)}
.ttl.split.in .c{transform:none;filter:none;
  transition:transform 1.6s cubic-bezier(.19,1,.22,1),filter 1.6s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--i,0) * 50ms)}
.ttl.split.done .w{clip-path:none;-webkit-clip-path:none}
.ttl.split.done .c{filter:none;transition:none}
@media (prefers-reduced-motion: reduce){.ttl.split .c{transform:none;filter:none}}

/* ---------- carrousel ---------- */
.car{position:absolute;left:0;top:2240px;width:1920px;height:620px;overflow:visible;touch-action:pan-y;cursor:grab;
  -webkit-user-select:none;user-select:none}
.car.dragging{cursor:grabbing}
.car image{pointer-events:none}
.car-btn{all:unset;cursor:pointer;position:absolute;left:0;top:0}
.car-btn>*{position:absolute}
.car-btn .r{transition:transform .35s cubic-bezier(.19,1,.22,1),background-color .35s}
.car-btn:hover .r{transform:scale(1.08)}
.car-btn:focus-visible .r{outline:2px solid #fff;outline-offset:3px}
.car-btn .ic{transition:transform .35s cubic-bezier(.19,1,.22,1)}
.car-btn[data-dir="-1"]:hover .ic{transform:translateX(-3px)}
.car-btn[data-dir="1"]:hover .ic{transform:translateX(3px)}
.car-label{position:absolute;left:0;width:1920px;text-align:center;white-space:pre;pointer-events:none;
  font-family:'Ramillas';font-weight:300;font-size:30px;line-height:50px;text-transform:uppercase;color:#fff}
.car-label .w{display:inline-block;padding:.5em .3em;margin:-.5em -.3em;clip-path:inset(0)}
.car-label .c{display:inline-block;transition:transform 1.1s cubic-bezier(.19,1,.22,1),filter 1.1s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i,0)*35ms)}
.car-label.out .c{transform:translateY(-110%);filter:blur(5px);transition-duration:.45s;transition-timing-function:cubic-bezier(.55,0,.67,.2)}
.car-label.pre .c{transform:translateY(calc(100% + 1em));filter:blur(5px);transition:none}

/* ---------- statistiek-kaarten hero ---------- */
.stat{position:absolute;border-radius:20px}
.stat>.so{position:absolute}
.stat>.so>*{position:absolute}
.stat.pre{clip-path:inset(0 100% 0 0 round 20px);transform:translateX(-46px)}
.stat.pre .sd{opacity:0;transform:translateY(14px);filter:blur(4px)}
.stat.go{clip-path:inset(0 0% 0 0 round 20px);transform:none;
  transition:clip-path 1.25s cubic-bezier(.19,1,.22,1),transform 1.25s cubic-bezier(.19,1,.22,1);transition-delay:var(--d)}
.stat.go .sd{opacity:1;transform:none;filter:none;
  transition:opacity .9s ease,transform 1s cubic-bezier(.19,1,.22,1),filter .9s ease;transition-delay:calc(var(--d) + .3s)}
.stat.done{clip-path:none}

/* ---------- scroll-animaties ---------- */
.img.rv.pre{clip-path:inset(22% 0 0 0 round 30px);transform:translateY(70px);opacity:0}
.img.rv.pre img{transform:scale(1.14)}
.img.rv.go{clip-path:inset(0 0 0 0 round 30px);transform:none;opacity:1;
  transition:clip-path 1.9s cubic-bezier(.22,1,.36,1),transform 1.9s cubic-bezier(.22,1,.36,1),opacity 1.1s cubic-bezier(.33,1,.68,1);transition-delay:var(--d,0s)}
.img.rv.go img{transform:none;transition:transform 2.6s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
.img.rv.done{clip-path:none}

.fx.pre{opacity:0;transform:translateY(26px)}
.fx.pre[data-fx=line]{opacity:1;transform:scaleX(0);transform-origin:left center}
.fx.pre[data-fx=card]{transform:translateY(64px)}
.fx.pre[data-fx=card] .img img{transform:scale(1.1)}
.fx.go{opacity:1;transform:none;
  transition:opacity 1.1s cubic-bezier(.33,1,.68,1),transform 1.6s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
.fx.go[data-fx=line]{transition:transform 1.8s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
.fx.go[data-fx=card] .img img{transform:none;transition:transform 2.2s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
/* kaart-wrapper */
.card>.so{position:absolute}
.card>.so>*{position:absolute}
.rv-s{position:absolute;pointer-events:none;visibility:hidden;min-height:1px}

/* ---------- zweven ('In de bloei'-tegels) ---------- */
@keyframes flt{0%,100%{translate:0 0}50%{translate:0 var(--fa,-10px)}}
.flt{animation:flt 6.8s ease-in-out infinite;animation-delay:var(--fp,0s)}
@media (prefers-reduced-motion: reduce){.flt{animation:none}}

/* ---------- hover: knoppen en kaarten ---------- */
.btn .r{transition:background-color .45s cubic-bezier(.22,1,.36,1),border-color .45s cubic-bezier(.22,1,.36,1)}
.btn .t,.btn .ic{transition:color .45s cubic-bezier(.22,1,.36,1)}
.btn-outline:hover .r{background-color:#897749!important}
.btn-outline:hover .t,.btn-outline:hover .ic{color:#fff!important}
.btn-light:hover .r{background-color:#fff!important}
.btn-light:hover .t,.btn-light:hover .ic{color:#897749!important}
.btn-solid:hover .r{background-color:#f3ede5!important}
.btn-glass:hover .r{background-color:rgba(255,255,255,.34)!important}
.btn:focus-visible .r{outline:2px solid #897749;outline-offset:3px}
.card .img img{transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.hl{cursor:pointer}

/* ---------- assortiment: kaarten klappen uit (hover of klik) ---------- */
.card{cursor:pointer;outline:none}
.card .cimg{transition:top .9s cubic-bezier(.22,1,.36,1),height .9s cubic-bezier(.22,1,.36,1)}
.card .ctx{opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.card.open .ctx{opacity:1;transform:none;transition:opacity .7s ease .18s,transform .9s cubic-bezier(.22,1,.36,1) .12s}
.card .cpl{transition:transform .7s cubic-bezier(.22,1,.36,1)}
.card .cpl .pv{transform-box:view-box;transform-origin:10px 10px;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.card.open .cpl{transform:rotate(180deg)}
.card.open .cpl .pv{transform:scaleY(0)}
.card:focus-visible>.so>.r{box-shadow:0 0 0 2px #897749}

/* ---------- header ---------- */
@keyframes hdIn{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
.hd{position:absolute;left:0;top:0;width:1920px;height:0;animation:hdIn 1.3s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--hd,0s)}
.hd>*,.hdr>*,.hdr a>*,.hdr button>*{position:absolute}
.hl-off,.hl-menu{all:unset;cursor:pointer}
.hpill{transition:left .7s cubic-bezier(.22,1,.36,1),width .7s cubic-bezier(.22,1,.36,1)}
.hdr:has(.hl-off:hover) .hpill,.hdr:has(.hl-off:focus-visible) .hpill{left:1601px!important;width:164px!important}
.hl-menu .ic{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.hl-menu:hover .ic{transform:scaleX(1.35)}
.hl-off:focus-visible .t,.hl-menu:focus-visible .t{text-decoration:underline}
.home-link svg{transition:opacity .5s cubic-bezier(.22,1,.36,1)}
.home-link:hover svg{opacity:.75}
@media (prefers-reduced-motion: reduce){.hd{animation:none}}

/* ---------- hero-foto: groeit als eerste van klein naar groot ---------- */
.img.hero-in{will-change:clip-path}
.img.hero-in img{will-change:transform}
.img.hero-in.pre{clip-path:inset(16% 26% 16% 26% round 40px)}
.img.hero-in.pre img{transform:scale(1.2)}
.img.hero-in.go{clip-path:inset(0% 0% 0% 0% round 40px);transition:clip-path 1.45s cubic-bezier(.65,0,.35,1)}
.img.hero-in.go img{transform:none;transition:transform 2.0s cubic-bezier(.33,1,.68,1)}
.img.hero-in.done{clip-path:none;will-change:auto}
@media (prefers-reduced-motion: reduce){.img.hero-in.pre{clip-path:none}.img.hero-in.pre img{transform:none}}

/* ---------- menu (uitklappend wit blok onder de menuknop) ---------- */
.hd{z-index:20}
.hit{position:absolute;display:block}
.mnav{position:absolute;background:#fff;border-radius:10px;padding:30px 24px 32px 34px;
  visibility:hidden;clip-path:inset(0 0 100% 0 round 10px);transform:translateY(-10px);
  transition:clip-path .45s cubic-bezier(.55,0,.67,.2),transform .45s cubic-bezier(.55,0,.67,.2),visibility 0s linear .45s}
.mnav.open{visibility:visible;clip-path:inset(0 0 0 0 round 10px);transform:none;
  transition:clip-path .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1),visibility 0s}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav li{position:relative}
.mnav a{position:relative;display:block;width:max-content;color:#897749;text-decoration:none;
  font-family:'Ramillas';font-weight:300;font-size:28px;line-height:46px;text-transform:uppercase;
  transition:transform .55s cubic-bezier(.22,1,.36,1)}
.mnav a::before{content:'';position:absolute;left:-16px;top:50%;width:5px;height:5px;margin-top:-4px;border-radius:50%;background:currentColor;
  opacity:0;transform:scale(0);transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1)}
.mnav a:hover,.mnav a:focus-visible{transform:translateX(14px);outline:none}
.mnav a:hover::before,.mnav a:focus-visible::before,.mnav a[aria-current]::before{opacity:1;transform:scale(1)}
.mnav:not(.open) a::before{opacity:0!important;transition-duration:.15s}
.mnav.open a[aria-current]::before{transition-delay:.45s}
.mnav .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.mnav .mi{display:inline-block;transform:translateY(105%);filter:blur(4px);transition:transform .3s ease,filter .3s ease}
.mnav.open .mi{transform:none;filter:none;transition:transform 1s cubic-bezier(.22,1,.36,1),filter 1s cubic-bezier(.22,1,.36,1);transition-delay:calc(.14s + var(--i) * .06s)}
.hl-menu .ic{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.hl-menu[aria-expanded=true] .ic{transform:rotate(90deg)}
@media (prefers-reduced-motion: reduce){.mnav,.mnav.open,.mnav .mi,.mnav.open .mi{transition:none;transform:none;filter:none}}

.car.gl-on .car-s{display:none}
.car-gl{z-index:0}

/* ---------- startscherm ---------- */
.intro{position:fixed;inset:0;z-index:1000;background:var(--goud);display:flex;align-items:center;justify-content:center;cursor:pointer;
  clip-path:inset(0 0 0 0)}
.intro .vl-logo{visibility:visible}
.intro-hint{position:absolute;left:0;right:0;bottom:calc(48px + env(safe-area-inset-bottom,0px));text-align:center;
  font-family:'Inter Tight',sans-serif;font-weight:300;font-size:14px;letter-spacing:.04em;color:rgba(255,255,255,.75);
  opacity:0;transition:opacity 1s ease}
.intro.ready .intro-hint{opacity:1;animation:introPulse 2.8s ease-in-out 1s infinite}
@keyframes introPulse{0%,100%{opacity:1}50%{opacity:.45}}
.intro:focus-visible{outline:none}
html.vl-lock,html.vl-lock body{overflow:hidden}
@media (prefers-reduced-motion: reduce){.intro.ready .intro-hint{animation:none}}

/* ---------- nieuwe pagina's ---------- */
.ibtn{position:absolute;left:0;top:0}
.ibtn .r{transition:background-color .45s cubic-bezier(.22,1,.36,1)}
.ibtn .ic{transition:color .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)}
.ibtn:hover .r{background-color:#897749!important}
.ibtn:hover .ic{color:#fff!important;transform:scale(1.08)}
.ibtn.ib-green:hover .r{background-color:#897749!important}
.btn-gold:hover .r{background-color:#6f603a!important}
.grad.hov{transition:opacity 1.2s ease}
.grad.hov:not(.on){opacity:0!important}
/* formulier-knop en bevestiging */
button.sbm{all:unset;position:absolute;left:0;top:0;cursor:pointer}
button.sbm>*{position:absolute}
button.sbm:focus-visible .r{outline:2px solid #897749;outline-offset:3px}
.fmsg{font-family:'Inter Tight';font-weight:300;font-size:15px;line-height:33px;color:#897749;white-space:pre;
  opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1);pointer-events:none}
.fmsg.on{opacity:1;transform:none}
.field.err{box-shadow:0 0 0 1px #c0563a inset}
.field::-webkit-calendar-picker-indicator{opacity:.5}
/* proefbos: soorten kiezen (hover = goud met naam, gekozen = gouden rand) */
.tile{all:unset;position:absolute;cursor:pointer;border-radius:10px;-webkit-tap-highlight-color:transparent}
.tile>span{position:absolute;inset:0;border-radius:10px}
.tile .tb{background:#fff;transition:background-color .55s cubic-bezier(.22,1,.36,1)}
.tile .ti{overflow:hidden;transition:opacity .45s ease}
.tile .ti img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(var(--s,1));transition:transform .9s cubic-bezier(.22,1,.36,1)}
.tile .tn{display:flex;align-items:center;justify-content:center;text-align:center;padding:0 20px;
  font-family:'Inter Tight';font-weight:300;font-size:15px;line-height:23px;color:#fff;
  opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.tile::after{content:'';position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 0 1px #897749;opacity:0;transition:opacity .4s ease}
.tile.on::after{opacity:1}
.tile:hover .tb,.tile.hv .tb,.tile:focus-visible .tb{background:#897749}
.tile:hover .ti,.tile.hv .ti,.tile:focus-visible .ti{opacity:0}
.tile:hover .ti img,.tile.hv .ti img{transform:scale(calc(var(--s,1) * .8))}
.tile:hover .tn,.tile.hv .tn,.tile:focus-visible .tn{opacity:1;transform:none;transition:opacity .5s ease .08s,transform .7s cubic-bezier(.22,1,.36,1) .05s}
.tile:focus-visible{outline:2px solid #897749;outline-offset:3px}
.field[list]::-webkit-calendar-picker-indicator{opacity:0}
input.field.vf{padding-bottom:5px}
/* verzorgingstips: stappen */
.stp{left:0;top:0;opacity:.38;transition:opacity .6s cubic-bezier(.22,1,.36,1)}
.stp.on{opacity:1}
.stp-hits{left:0;top:0}
.stp-hit{position:absolute;display:block;cursor:pointer;outline:none}
/* over ons: kenmerken */
.feat{left:0;top:0}
.feat>*{position:absolute}
.feat .fbg{transition:background-color .6s cubic-bezier(.22,1,.36,1)}
.feat .ft{transition:color .6s cubic-bezier(.22,1,.36,1)}
.feat:not(.on) .fbg{background:#fff!important}
.feat.on .fbg{background:#897749!important}
.feat:not(.on) .ft{color:#897749!important}
.feat.on .ft{color:#fff!important}
.feat .ic{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.feat.on .ic{transform:rotate(-8deg) scale(1.06)}
.feat-hit{position:absolute;display:block;cursor:pointer}
@media (prefers-reduced-motion: reduce){.tile *,.stp,.feat *{transition:none!important}}

/* filterknoppen assortiment (Soort / Kleur) */
button.btn-filter{all:unset;position:absolute;left:0;top:0;cursor:pointer}
button.btn-filter>*{position:absolute}
button.btn-filter:focus-visible .r{outline:2px solid #897749;outline-offset:3px}

/* ---------- assortiment: filters (soort / kleur) ---------- */
.btn-filter .r,.btn-filter .t,.btn-filter svg{transition:left .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1),background-color .3s,color .3s}
.stage.flt-active{transition:height .8s cubic-bezier(.22,1,.36,1)}
.stage.flt-active>.flt-mv{transition:translate .8s cubic-bezier(.22,1,.36,1),opacity .4s ease,scale .5s cubic-bezier(.22,1,.36,1)}
.stage>.card.flt-off{opacity:0!important;scale:.96;pointer-events:none;visibility:hidden;
  transition:translate .8s cubic-bezier(.22,1,.36,1),opacity .3s ease,scale .4s ease,visibility 0s .4s}
.flt-pop{position:absolute;z-index:40;background:#fff;border-radius:12px;padding:8px;box-shadow:0 18px 44px rgba(60,50,25,.16);display:grid;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .35s cubic-bezier(.22,1,.36,1),visibility 0s .35s}
.flt-pop.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .45s cubic-bezier(.22,1,.36,1)}
.flt-pop button,.m-fpop button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;border-radius:8px;
  font:300 14px/1.3 'Inter Tight',sans-serif;color:#897749;cursor:pointer;white-space:nowrap}
.flt-pop button:hover,.flt-pop button:focus-visible,.m-fpop button:hover,.m-fpop button:focus-visible{background:#f3ede5}
.flt-pop button[aria-selected="true"],.m-fpop button[aria-selected="true"]{font-weight:500}
.flt-pop button[aria-selected="true"]::after,.m-fpop button[aria-selected="true"]::after{content:'✓';font-weight:400}
.flt-empty{position:absolute;display:none;align-items:center;gap:20px;font:300 16px/1.4 'Inter Tight',sans-serif;color:#000}
.flt-empty.on{display:flex}
.flt-empty button{all:unset;cursor:pointer;border:1px solid #897749;color:#897749;border-radius:10px;padding:14px 22px;font:300 14px/1 'Inter Tight',sans-serif}
.flt-empty button:hover{background:#897749;color:#fff}
/* proefbos: vaste leverinfo (geen keuze) */
.field-info{position:absolute;display:flex;align-items:center;padding:0 25px;background:#fff;border-radius:10px;font-family:'Inter Tight';font-weight:300;font-size:15px;color:#897749}