/* style#fontfaces */ /* v183: lettertypes zelf gehost (geen Google Fonts meer: privacy + sneller; de oude Google-link was bovendien kapot: opsz 9.144 i.p.v. 9..144) */@font-face {font-family: 'Fraunces'; font-style: italic; font-weight: 300 500; font-display: swap; src: url(/fonts/fraunces-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Fraunces'; font-style: italic; font-weight: 300 500; font-display: swap; src: url(/fonts/fraunces-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face {font-family: 'Fraunces'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/fonts/fraunces-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Fraunces'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/fonts/fraunces-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face {font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url(/fonts/instrument-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url(/fonts/instrument-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* style */ /* ============================================================ VILLA PALMVIEW — design tokens Palette drawn directly from the estate's own interiors: zellige green (Casa Oliva kitchen), mint (Casa Brisa island), limestone sand (Casa Luz), warm ink. ============================================================ */ :root{ --sand:#F4EFE6; --sand-deep:#EAE2D3; --ink:#2C2620; --ink-soft:#4A4139; --zellige:#4F7263; /* residence A accent */ --mint:#5FA294; /* residence B accent (donkerder ivm contrast op wit) */ --stone:#A8998A; /* residence C accent */ --white:#FFFDF9; --maxw:1180px; --ease-lux:cubic-bezier(0.16,1,0.3,1); --serif:"Fraunces",Georgia,serif; --sans:"Instrument Sans",-apple-system,Segoe UI,sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;font-size:clamp(16px,15.2px + .22vw,18px)} body{ font-family:var(--sans); background:var(--sand); color:var(--ink); line-height:1.65; font-size:16px; overflow-x:hidden; } img{display:block;max-width:100%;height:auto} picture{display:contents} a{color:inherit} h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} /* ---------- scroll progress ---------- */ #progress{position:fixed;top:0;left:0;height:3px;width:0; background:linear-gradient(90deg,var(--zellige),var(--mint)); z-index:60;transition:width .1s linear} /* ---------- header / nav ---------- */ header{position:fixed;top:0;left:0;right:0;z-index:50; padding:20px 28px;display:flex;justify-content:space-between;align-items:center; transition:background .5s var(--ease-lux),box-shadow .5s,padding .5s; color:var(--white)} header.scrolled{background:rgba(244,239,230,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); color:var(--ink);padding:12px 28px;box-shadow:0 1px 0 rgba(44,38,32,.08)} .brand{font-family:var(--serif);font-size:1.25rem;letter-spacing:.04em;text-decoration:none} nav{display:flex;gap:28px;align-items:center} nav a{text-decoration:none;font-size:.83rem;letter-spacing:.12em;text-transform:uppercase; position:relative;padding-bottom:3px} nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px; background:currentColor;transform:scaleX(0);transform-origin:right; transition:transform .45s var(--ease-lux)} nav a:hover::after{transform:scaleX(1);transform-origin:left} @media(max-width:820px){ nav a:not(.nav-cta){display:none} .nav-toggle{display:block} nav.open{position:fixed;top:64px;left:12px;right:12px;background:var(--white); border-radius:18px;box-shadow:0 24px 60px -20px rgba(0,0,0,.35);padding:14px;z-index:950; max-height:calc(100svh - 84px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} nav.open a:not(.nav-cta){display:block;padding:13px 16px;font-size:1rem;color:var(--ink)} nav.open .langs{display:flex;justify-content:center;padding-top:10px} } .nav-toggle{display:none;background:none;border:0;font-size:1.35rem;color:inherit;cursor:pointer;padding:6px 10px} .nav-cta{border:1px solid currentColor;border-radius:999px;padding:9px 20px 8px; transition:background .35s,color .35s} header:not(.scrolled) .nav-cta:hover{background:var(--white);color:var(--ink)} header.scrolled .nav-cta:hover{background:var(--ink);color:var(--sand)} .nav-cta::after{display:none} /* ---------- hero ---------- */ .hero{position:relative;height:auto;min-height:620px;min-height:100svh;display:flex; align-items:flex-end;color:var(--white);overflow:hidden} .hero-media{position:absolute;inset:0;overflow:hidden} .hero-media img{width:100%;height:100%;object-fit:cover; animation:kenburns 22s var(--ease-lux) forwards} @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}} .hero::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(24,20,16,.74) 0%,rgba(24,20,16,.20) 45%,rgba(24,20,16,.32) 100%)} .hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw); margin:0 auto;display:flex;flex-direction:column;justify-content:flex-end; box-sizing:border-box; padding:calc(76px + 4svh) 24px clamp(48px,9svh,110px)} .hero-eyebrow{font-size:.8rem;letter-spacing:.28em;text-transform:uppercase; margin-bottom:clamp(10px,2svh,22px);opacity:0} .hero h1{font-size:clamp(2.05rem,3.1vw + 3.2svh,5.2rem);font-weight:300;max-width:15ch} .hero h1 .w{display:inline-block;opacity:0;transform:translateY(36px)} .hero-sub{margin-top:clamp(14px,2.4svh,24px);font-size:clamp(.95rem,.8vw + .9svh,1.2rem);max-width:46ch; opacity:0;font-weight:400} .hero-cta-row{margin-top:clamp(18px,3.6svh,36px);display:flex;gap:16px;flex-wrap:wrap;opacity:0} .loaded .hero-eyebrow{animation:riseIn 1s var(--ease-lux) .2s forwards} .loaded .hero h1 .w{animation:riseIn 1.1s var(--ease-lux) forwards} .loaded .hero-sub{animation:riseIn 1.1s var(--ease-lux) 1.15s forwards} .loaded .hero-cta-row{animation:riseIn 1.1s var(--ease-lux) 1.35s forwards} @keyframes riseIn{from{opacity:0;transform:translateY(36px)} to{opacity:1;transform:translateY(0)}} .btn{display:inline-block;text-decoration:none;font-size:.85rem; letter-spacing:.14em;text-transform:uppercase;border-radius:999px; padding:15px 32px 13px;transition:transform .4s var(--ease-lux),background .35s,color .35s} .btn:hover{transform:translateY(-2px)} .btn-solid{background:var(--white);color:var(--ink)} .btn-solid:hover{background:var(--sand-deep)} .btn-ghost{border:1px solid rgba(255,253,249,.7);color:var(--white)} .btn-ghost:hover{background:rgba(255,253,249,.12)} .scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%); z-index:2;width:1px;height:52px;overflow:hidden} .scroll-hint::after{content:"";position:absolute;left:0;top:-52px;width:1px;height:52px; background:rgba(255,253,249,.8);animation:drip 2.2s var(--ease-lux) infinite} @keyframes drip{to{top:52px}} /* ---------- reveal on scroll ---------- */ .reveal{opacity:0;transform:translateY(38px); transition:opacity 1s var(--ease-lux),transform 1s var(--ease-lux)} .reveal.in{opacity:1;transform:translateY(0)} .stagger>*{opacity:0;transform:translateY(30px); transition:opacity .9s var(--ease-lux),transform .9s var(--ease-lux)} .stagger.in>*{opacity:1;transform:translateY(0)} .stagger.in>*:nth-child(1){transition-delay:.05s} .stagger.in>*:nth-child(2){transition-delay:.17s} .stagger.in>*:nth-child(3){transition-delay:.29s} .stagger.in>*:nth-child(4){transition-delay:.41s} .stagger.in>*:nth-child(5){transition-delay:.53s} .stagger.in>*:nth-child(6){transition-delay:.65s} /* ---------- intro ---------- */ .intro{padding:120px 0 90px} .eyebrow{font-size:.78rem;letter-spacing:.26em;text-transform:uppercase; color:var(--ink-soft);margin-bottom:18px} .intro h2{font-size:clamp(1.9rem,4vw,3rem);max-width:22ch} .intro-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;margin-top:44px} @media(max-width:820px){.intro-cols{grid-template-columns:1fr;gap:28px}} .intro-cols p{color:var(--ink-soft);font-size:1.05rem} .intro-cols p+p{margin-top:18px} /* ---------- counters ---------- */ .counters{display:grid;grid-template-columns:repeat(4,1fr);gap:2px; background:rgba(44,38,32,.12);border-radius:18px;overflow:hidden;margin:70px 0 0} @media(max-width:820px){.counters{grid-template-columns:repeat(2,1fr)}} .counter{background:var(--white);padding:34px 20px;text-align:center} .counter .num{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.2rem); font-weight:300;line-height:1}.counter .num[data-count="28"]::before{content:"up to ";font-size:.4em;font-weight:400;letter-spacing:.04em;margin-right:1px;position:relative;top:-.12em} .counter .lbl{margin-top:10px;font-size:.78rem;letter-spacing:.18em; text-transform:uppercase;color:var(--ink-soft)} /* ---------- residences ---------- */ .residences{padding:100px 0 40px} .res{margin-top:70px;border-radius:26px;overflow:hidden; background:var(--white);box-shadow:0 30px 60px -40px rgba(44,38,32,.35)} .res-head{display:grid;grid-template-columns:1fr 1fr;min-height:340px} @media(max-width:820px){.res-head{grid-template-columns:1fr}} .res-copy{padding:52px 48px;display:flex;flex-direction:column;justify-content:center} @media(max-width:820px){.res-copy{padding:36px 26px}} .res-tag{display:inline-block;font-size:.72rem;letter-spacing:.22em; text-transform:uppercase;color:var(--white);border-radius:999px; padding:7px 16px 6px;margin-bottom:20px;width:fit-content} .res h3{font-size:clamp(1.7rem,3vw,2.4rem)} .res-meta{margin-top:8px;font-size:.85rem;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-soft)} .res-copy p{margin-top:18px;color:var(--ink-soft)} .res-cover{overflow:hidden} .res-cover img{width:100%;height:100%;object-fit:cover; transform:scale(1.02);transition:transform 1.4s var(--ease-lux)} .res:hover .res-cover img{transform:scale(1.08)} .res-a .res-tag{background:var(--zellige)} .res-b .res-tag{background:var(--mint)} .res-c .res-tag{background:var(--stone)} .res-a{border-top:5px solid var(--zellige)} .res-b{border-top:5px solid var(--mint)} .res-c{border-top:5px solid var(--stone)} /* horizontal gallery strip */ .strip{display:flex;gap:14px;overflow-x:auto;padding:18px 48px 30px; scroll-snap-type:x mandatory;cursor:grab;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:var(--sand-deep) transparent} @media(max-width:820px){.strip{padding:14px 26px 24px}} .strip.dragging{cursor:grabbing;scroll-snap-type:none} .strip figure{flex:0 0 auto;width:min(320px,72vw);scroll-snap-align:start; border-radius:14px;overflow:hidden;aspect-ratio:3/2;background:var(--sand-deep)} .strip img{width:100%;height:100%;object-fit:cover;pointer-events:none; transition:transform 1.2s var(--ease-lux)} .strip figure:hover img{transform:scale(1.06)} /* ---------- parallax band ---------- */ .band{position:relative;height:64vh;min-height:420px;overflow:hidden; display:flex;align-items:center;justify-content:center;color:var(--white); text-align:center;margin:100px 0} .band-media{position:absolute;inset:-18% 0;will-change:transform} .band-media img{width:100%;height:100%;object-fit:cover} .band::after{content:"";position:absolute;inset:0;background:rgba(24,20,16,.45)} .band-inner{position:relative;z-index:2;padding:0 24px} .band-inner p{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.6rem); font-weight:300;max-width:26ch} /* ---------- amenities ---------- */ .amenities{padding:40px 0 110px} .amen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px} @media(max-width:900px){.amen-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.amen-grid{grid-template-columns:1fr}} .amen{background:var(--white);border-radius:18px;padding:30px 26px; transition:transform .5s var(--ease-lux),box-shadow .5s} .amen:hover{transform:translateY(-5px); box-shadow:0 24px 44px -30px rgba(44,38,32,.4)} .amen svg{width:34px;height:34px;stroke:var(--zellige);stroke-width:1.4; fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px; transition:transform .5s var(--ease-lux)} .amen:hover svg{transform:scale(1.12) rotate(-3deg)} .amen h4{font-family:var(--serif);font-weight:500;font-size:1.15rem;margin-bottom:6px} .amen p{font-size:.93rem;color:var(--ink-soft)} /* ---------- location ---------- */ .location{background:var(--ink);color:var(--sand);padding:110px 0; border-radius:34px 34px 0 0} .location .eyebrow{color:rgba(244,239,230,.6)} .loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} @media(max-width:820px){.loc-grid{grid-template-columns:1fr;gap:34px}} .location h2{font-size:clamp(1.9rem,4vw,3rem)} .location p{color:rgba(244,239,230,.78);margin-top:20px} .loc-list{margin-top:30px;list-style:none} .loc-list li{display:flex;justify-content:space-between;gap:20px; padding:14px 0;border-bottom:1px solid rgba(244,239,230,.15);font-size:.95rem} .loc-list span:last-child{color:rgba(244,239,230,.6);white-space:nowrap} .loc-map{border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:#3a342d} .loc-map iframe{width:100%;height:100%;border:0;filter:grayscale(.25)} /* ---------- testimonials ---------- */ .testimonials{padding:110px 0;text-align:center} .quote-box{position:relative;min-height:190px;max-width:760px;margin:40px auto 0} .quote{position:absolute;inset:0;opacity:0;transform:translateY(16px); transition:opacity .9s var(--ease-lux),transform .9s var(--ease-lux); pointer-events:none} .quote.active{opacity:1;transform:translateY(0)} .quote p{font-family:var(--serif);font-size:clamp(1.25rem,2.6vw,1.7rem); font-weight:300;font-style:italic} .quote cite{display:block;margin-top:20px;font-style:normal;font-size:.82rem; letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)} .dots{display:flex;gap:10px;justify-content:center;margin-top:26px} .dots button{width:9px;height:9px;border-radius:50%;border:none;cursor:pointer; background:rgba(44,38,32,.25);transition:background .3s,transform .3s} .dots button.active{background:var(--zellige);transform:scale(1.3)} /* ---------- FAQ ---------- */ .faq{padding:0 0 110px} .faq-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 22px} .faq-chip{font-family:var(--sans);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase; padding:9px 17px;border-radius:999px;border:1px solid var(--hairline);background:var(--white); color:var(--ink-soft);cursor:pointer;line-height:1; transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)} .faq-chip:hover{border-color:var(--zellige);color:var(--ink)} .faq-chip:focus-visible{outline:2px solid var(--mint);outline-offset:2px} .faq-chip[aria-pressed="true"]{background:var(--zellige);border-color:var(--zellige);color:var(--white)} .faq-chip .n{margin-left:7px;opacity:.55;font-variant-numeric:tabular-nums} .faq-item[hidden]{display:none} @media(max-width:520px){.faq-chip{font-size:.74rem;padding:8px 13px}} .faq-item{background:var(--white);border-radius:16px;margin-top:14px;overflow:hidden} .faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer; font-family:var(--sans);font-size:1.02rem;font-weight:600;color:var(--ink); padding:22px 26px;display:flex;justify-content:space-between;gap:18px;align-items:center} .faq-q .plus{flex:0 0 auto;width:22px;height:22px;position:relative; transition:transform .5s var(--ease-lux)} .faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute; background:var(--zellige);top:50%;left:50%} .faq-q .plus::before{width:14px;height:1.6px;transform:translate(-50%,-50%)} .faq-q .plus::after{width:1.6px;height:14px;transform:translate(-50%,-50%)} .faq-item.open .plus{transform:rotate(135deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .6s var(--ease-lux)} .faq-a p{padding:0 26px 24px;color:var(--ink-soft)} /* ---------- booking / contact ---------- */ .book{background:var(--sand-deep);padding:110px 0;border-radius:34px; margin:0 14px 14px;text-align:center} .book h2{font-size:clamp(2rem,4.5vw,3.2rem)} .book p{max-width:52ch;margin:22px auto 0;color:var(--ink-soft)} .book .btn-solid{background:var(--ink);color:var(--sand)} .book .btn-solid:hover{background:var(--zellige)} .price-line{margin-top:26px;font-family:var(--serif);font-size:1.25rem} .book-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px} .btn-wa{background:#1FA855;color:#fff} .btn-wa:hover{background:#178A45} .tiers{max-width:1000px;margin:34px auto 0} .tiers-lead{text-align:center;max-width:56ch;margin:0 auto;color:var(--ink-soft);font-size:.95rem} .tiers-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px} .tier{background:var(--white);border:1px solid var(--hairline);border-radius:18px; padding:22px 20px;text-align:left;display:flex;flex-direction:column;gap:8px} .tier h3{font-family:var(--serif);font-weight:500;font-size:1.28rem;margin:0;letter-spacing:.01em} .tier .tier-cap{margin:0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase; color:var(--zellige);font-weight:600} .tier p:last-child{margin:0;font-size:.9rem;color:var(--ink-soft);line-height:1.55} .tiers-note{text-align:center;font-size:.85rem;color:var(--ink-soft);margin:18px auto 0;max-width:56ch} .engine-embed{max-width:860px;margin:40px auto 0;border-radius:18px;overflow:hidden; background:var(--white);border:1px solid var(--hairline)} .engine-embed[hidden]{display:none} .engine-embed h3{font-family:var(--serif);font-weight:500;font-size:1.15rem; margin:0;padding:18px 20px 0;text-align:center} .engine-embed iframe{width:100%;min-height:720px;border:0;display:block} .bf-grid select{font:inherit;font-size:1rem;letter-spacing:0;text-transform:none; padding:11px 13px 11px 13px;border-radius:10px;border:1px solid rgba(255,253,249,.3); background:rgba(255,253,249,.08);color:inherit;-webkit-appearance:none;appearance:none; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%), linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px; background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px} .bf-grid select:focus{outline:2px solid var(--mint)} .bf-grid select option{color:#2C2620;background:#FFFDF9} @media(max-width:820px){.tiers-row{grid-template-columns:1fr}} .cal-embed{max-width:760px;margin:40px auto 0;border-radius:18px;overflow:hidden; background:var(--white);aspect-ratio:4/3} .cal-embed iframe{width:100%;height:100%;border:0} .book-note{margin-top:18px;font-size:.85rem;color:var(--ink-soft)} .quick-q{margin-top:22px;font-size:.85rem;color:var(--ink-soft); display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center} .quick-q a{border:1px solid rgba(44,38,32,.25);border-radius:999px; padding:8px 16px 7px;text-decoration:none;transition:background .3s,border-color .3s} .quick-q a:hover{background:var(--white);border-color:var(--zellige)} /* ---------- sticky booking bar ---------- */ .bar{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%); z-index:55;background:rgba(44,38,32,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); color:var(--sand);border-radius:999px;display:flex;align-items:center; gap:22px;padding:12px 14px 12px 26px;box-shadow:0 20px 50px -18px rgba(24,20,16,.6); transition:transform .7s var(--ease-lux);white-space:nowrap} .bar.show{transform:translate(-50%,0)} .bar span{font-size:.88rem;letter-spacing:.04em} @media(max-width:560px){.bar span em{display:none}} .bar a{background:var(--sand);color:var(--ink);text-decoration:none; font-size:.8rem;letter-spacing:.12em;text-transform:uppercase; border-radius:999px;padding:11px 22px 10px;transition:background .3s} .bar a:hover{background:var(--mint)} /* ---------- luxe accenten ---------- */ .hero-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;opacity:0} .loaded .hero-chips{animation:riseIn 1.1s var(--ease-lux) 1.25s forwards} .hero-chips span{border:1px solid rgba(255,253,249,.45);border-radius:999px; padding:7px 16px 6px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase; backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .eyebrow{display:flex;align-items:center;gap:14px} .eyebrow::after{content:"";height:1px;width:56px;background:currentColor;opacity:.35} .audiences-sec{padding:90px 0 30px} .aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px} @media(max-width:960px){.aud-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.aud-grid{grid-template-columns:1fr}} .aud{background:var(--white);border-radius:18px;padding:30px 26px;position:relative; overflow:hidden;transition:transform .5s var(--ease-lux),box-shadow .5s} .aud:hover{transform:translateY(-5px);box-shadow:0 24px 44px -30px rgba(44,38,32,.4)} .aud-num{font-family:var(--serif);font-size:2.6rem;font-weight:300; color:var(--sand-deep);position:absolute;top:10px;right:18px;line-height:1} .aud h4{font-family:var(--serif);font-weight:500;font-size:1.2rem;margin-bottom:8px} .aud p{font-size:.93rem;color:var(--ink-soft)} .todo-sec{padding:100px 0 30px} .life-sec{padding:80px 0 10px} .gen-sec{padding:80px 0 10px} .days-sec{padding:100px 0 30px} .days-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:50px} @media(max-width:900px){.days-grid{grid-template-columns:1fr}} .day{background:var(--white);border-radius:18px;padding:28px 26px} .day h4{font-family:var(--serif);font-weight:500;font-size:1.25rem;margin-bottom:14px} .day ul{list-style:none;margin:0;padding:0} .day li{padding:8px 0;border-top:1px solid rgba(44,38,32,.1);font-size:.92rem;color:var(--ink-soft)} .day li:first-child{border-top:0} .day b{color:var(--zellige);font-weight:600;margin-right:8px;font-variant-numeric:tabular-nums} .areas-title{font-family:var(--serif);font-weight:500;font-size:1.35rem;margin-top:56px} .areas{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px} @media(max-width:720px){.areas{grid-template-columns:1fr}} .areas li{background:var(--white);border-radius:14px;padding:16px 20px;font-size:.92rem} .areas b{display:block;margin-bottom:4px} .areas span{color:var(--ink-soft)} .transport-tip{margin-top:22px;font-size:.9rem;color:var(--ink-soft);font-style:italic} .settings-sec{padding:20px 0 60px} .seasons-sec{padding:80px 0 10px} .values-sec{padding:90px 0 0} .ab-intro{margin-top:10px;color:var(--ink-soft);font-size:.95rem} .cat-title{font-family:var(--serif);font-weight:500;font-size:1.35rem;margin-top:48px} .cat-title+.todo-grid{margin-top:18px} .ab-list a{color:var(--zellige);text-decoration:none;border-bottom:1px solid rgba(31,111,109,.35)} .ab-list a:hover{border-bottom-color:currentColor} .todo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:50px} @media(max-width:900px){.todo-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.todo-grid{grid-template-columns:1fr}} .todo{background:var(--white);border:1px solid rgba(44,38,32,.08);border-radius:16px;padding:24px 24px 20px;box-shadow:0 18px 44px -30px rgba(44,38,32,.22);transition:transform .35s var(--ease-lux),box-shadow .35s var(--ease-lux)} .todo h4{font-family:var(--serif);font-weight:500;font-size:1.1rem;margin-bottom:6px} .todo p{font-size:.92rem;color:var(--ink-soft)} .plan-note a{color:var(--zellige)} .facts-sec{padding:90px 0 20px} .facts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:44px} .facts>div:last-child:nth-child(odd){grid-column:1/-1} @media(max-width:720px){.facts{grid-template-columns:1fr}} .facts>div{background:var(--white);border-radius:14px;padding:18px 20px} .facts dt{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase; color:var(--zellige);margin-bottom:6px;font-weight:600} .facts dd{margin:0;font-size:.93rem;color:var(--ink-soft)} .facts a{color:var(--ink)} /* ---------- language switcher ---------- */ .langs{display:flex;gap:2px;margin-left:6px} .langs a{text-decoration:none;font-size:.72rem;letter-spacing:.08em; padding:9px 9px 8px;border-radius:8px;opacity:.65;transition:opacity .3s,background .3s} .langs a:hover{opacity:1} .langs a[aria-current]{opacity:1;background:rgba(127,127,127,.18)} .langs a::after{display:none} /* ---------- estate plan ---------- */ .plan{padding:100px 0 20px} .plan-note{margin-top:14px;font-size:.85rem;color:var(--ink-soft);font-style:italic} .plan-viewer{margin-top:36px;background:var(--white);border-radius:22px;padding:18px} .plan-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} .plan-tab{border:1px solid rgba(44,38,32,.25);background:none;border-radius:999px; padding:9px 18px 8px;font:inherit;font-size:.82rem;letter-spacing:.08em; text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s,border-color .3s} .plan-tab.active{background:var(--zellige);border-color:var(--zellige);color:var(--white)} .plan-tab:hover:not(.active){border-color:var(--zellige)} .plan-stage{position:relative;border-radius:14px;overflow:hidden;cursor:zoom-in;background:var(--sand);aspect-ratio:7/5} .plan-stage .plan-img.active{width:100%;height:100%;object-fit:contain} .ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .ig-grid a{display:block;overflow:hidden;border-radius:14px} .ig-grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .8s var(--ease-lux)} .ig-grid a:hover img{transform:scale(1.05)} @media(max-width:820px){.ig-grid{grid-template-columns:repeat(2,1fr)}} .plan-img{display:none;width:100%;height:auto} .plan-img.active{display:block;animation:planFade .5s var(--ease)} @keyframes planFade{from{opacity:0}to{opacity:1}} .plan-zoom-hint{position:absolute;right:12px;bottom:12px;background:rgba(13,36,56,.7); color:var(--white);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; border-radius:999px;padding:7px 14px 6px;pointer-events:none} .plan-err .plan-err-msg{display:block} .plan-err-msg{display:none;position:absolute;inset:auto 12px 12px 12px;text-align:center; background:rgba(13,36,56,.75);color:var(--white);font-size:.8rem;border-radius:10px;padding:8px} .plan-legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .plan-legend button{border:1px solid rgba(44,38,32,.25);background:none;border-radius:999px; padding:8px 15px 7px;font:inherit;font-size:.8rem;cursor:pointer;transition:border-color .3s,background .3s} .plan-legend button:hover,.plan-legend button.sel{border-color:var(--zellige);background:var(--sand)} .plan-info{margin-top:12px;font-size:.92rem;color:var(--ink-soft);min-height:1.4em} .hero-kicker{display:block;margin-top:14px;font-family:var(--serif);font-style:italic;font-size:1.05em;opacity:.92} .foot-more{margin-top:26px;font-size:.85rem;opacity:.85} .foot-more a{color:inherit} .foot-more span{opacity:.7} .quote-incl{list-style:none;margin:26px auto 0;padding:0;max-width:560px;font-size:.92rem;color:var(--ink-soft)} .quote-incl li{padding:7px 0 7px 26px;position:relative} .quote-incl li:before{content:"\2713";position:absolute;left:0;color:var(--zellige);font-weight:700} .rating-badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:44px} .rating-badges a{border:1px solid rgba(44,38,32,.22);border-radius:999px;padding:10px 18px; text-decoration:none;color:var(--ink);font-size:.88rem;background:var(--white);transition:border-color .3s} .rating-badges a:hover{border-color:var(--zellige)} .rating-badges strong{color:var(--zellige)} @media(max-width:600px){ .plan-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px} .plan-tabs::-webkit-scrollbar{display:none} .plan-legend{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none} .areas li,.day{padding:14px 16px} .bar span em{display:none} } .wa-float{position:fixed;right:18px;bottom:86px;z-index:900;width:56px;height:56px;border-radius:50%; background:#25D366;display:flex;align-items:center;justify-content:center; box-shadow:0 12px 28px -10px rgba(0,0,0,.45);transition:transform .3s var(--ease)} .wa-float:hover{transform:scale(1.08)} .wa-float svg{width:30px;height:30px;fill:#fff} @media(min-width:821px){.wa-float{bottom:24px;right:24px}} .gen-note{margin-top:34px;background:var(--white);border-radius:16px;padding:22px 26px; font-size:.95rem;color:var(--ink-soft);border-left:4px solid var(--zellige)} .plan-max{position:fixed;inset:0;z-index:1200;background:rgba(20,17,14,.94); display:none;align-items:center;justify-content:center;cursor:zoom-out;padding:3vh 3vw} .plan-max.open{display:flex} .plan-max img{max-width:100%;max-height:100%;border-radius:8px} .res-mosaic{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:6px;min-height:340px} .res-mosaic figure{overflow:hidden;margin:0} .res-mosaic .rm-big{grid-row:1/3} .res-mosaic img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.3s var(--ease-lux)} .res-mosaic figure:hover img{transform:scale(1.08)} @media(max-width:820px){.res-mosaic{min-height:260px}} .res-plan-link{margin-top:16px;width:fit-content;font-size:.85rem;letter-spacing:.08em; text-transform:uppercase;color:var(--zellige);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px} .plan-svg-unused{margin-top:36px;background:var(--white);border-radius:22px;padding:18px} .plan-svg svg{width:100%;height:auto;display:block} .pl-ground{fill:var(--sand-deep)} .pl-pool rect{fill:#BFE0DA;stroke:var(--mint);stroke-width:2} .pl-pool text,.pl-house text,.pl-cap{font-family:var(--sans);font-size:17px; fill:var(--ink);text-anchor:middle} .pl-sub{font-size:12px!important;letter-spacing:.14em;text-transform:uppercase; fill:var(--ink-soft)!important} .pl-cap{font-size:13px;fill:var(--ink-soft);font-style:italic} .pl-house rect{fill:var(--white);stroke-width:2.5; transition:transform .5s var(--ease-lux)} .pl-a rect{stroke:var(--zellige)} .pl-b rect{stroke:var(--mint)} .pl-c rect{stroke:var(--stone)} .pl-house{cursor:pointer} .plan-svg a:hover .pl-house rect{transform:translateY(-4px)} .pl-green circle{fill:#9DB89B;opacity:.6} .pl-beach rect{fill:#F0E3C8;stroke:#D8C193;stroke-width:2} .pl-beach text{font-family:var(--sans);font-size:15px;fill:var(--ink);text-anchor:middle} .rating-line{margin-top:22px;text-align:center;color:var(--ink-soft);font-size:.95rem} .groups{padding:60px 0 20px} /* ---------- lightbox ---------- */ .lb{position:fixed;inset:0;z-index:70;background:rgba(24,20,16,.93); display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity .45s var(--ease-lux)} .lb.open{opacity:1;pointer-events:auto} .lb img{max-width:92vw;max-height:86vh;border-radius:10px; transform:scale(.96);transition:transform .45s var(--ease-lux)} .lb.open img{transform:scale(1)} .lb button{position:absolute;background:none;border:none;color:var(--sand); cursor:pointer;font-size:2rem;line-height:1;padding:16px;opacity:.8; transition:opacity .3s,transform .3s} .lb button:hover{opacity:1;transform:scale(1.1)} .lb-close{top:14px;right:18px} .lb-prev{left:8px;top:50%;transform:translateY(-50%)} .lb-next{right:8px;top:50%;transform:translateY(-50%)} .lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%); color:rgba(244,239,230,.7);font-size:.8rem;letter-spacing:.16em} .strip figure,.res-cover{cursor:zoom-in} .strip.dragging figure{cursor:grabbing} /* ---------- back to top ---------- */ .top-btn{position:fixed;right:18px;bottom:84px;z-index:54;width:44px;height:44px; border-radius:50%;border:none;cursor:pointer;background:var(--white); color:var(--ink);box-shadow:0 12px 30px -12px rgba(44,38,32,.5); opacity:0;pointer-events:none;transform:translateY(12px); transition:opacity .5s var(--ease-lux),transform .5s var(--ease-lux),background .3s} .top-btn.show{opacity:1;pointer-events:auto;transform:translateY(0)} .top-btn:hover{background:var(--sand-deep)} .top-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2; fill:none;stroke-linecap:round;stroke-linejoin:round;margin:auto;display:block} /* ---------- footer ---------- */ footer{padding:50px 24px 100px;text-align:center;color:var(--ink-soft);font-size:.85rem} footer .brand{color:var(--ink);display:inline-block;margin-bottom:10px} footer{line-height:2} .foot-featured{font-size:.8rem;opacity:.85} /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;transition-duration:.01ms!important} .hero-media img{animation:none} .reveal,.stagger>*,.hero-eyebrow,.hero h1 .w,.hero-sub,.hero-cta-row{ opacity:1!important;transform:none!important} .band-media{transform:none!important} } /* ========== POLISH-LAAG: luxe · rust · privacy · uitnodigend ========== */ :root{ --linen:#EFE9DE; --hairline:rgba(44,38,32,.12); --shadow-soft:0 24px 70px -30px rgba(44,38,32,.28); --ease:cubic-bezier(.22,.7,.25,1); } body{line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} ::selection{background:var(--zellige);color:#fff} html{scrollbar-width:thin;scrollbar-color:rgba(44,38,32,.28) transparent} /* typografie: stille precisie */ .eyebrow{letter-spacing:.24em;text-transform:uppercase;font-size:.72rem;opacity:.75} h1,h2,h3,h4{letter-spacing:-.012em} h2{line-height:1.12} .counters .num,.facts-sec dd,.day b{font-variant-numeric:tabular-nums} /* ademruimte: luxe = witruimte */ section{scroll-margin-top:84px} .intro,.settings-sec,.groups,.amenities,.location,.values-sec,.facts-sec{padding-top:110px;padding-bottom:110px} .wrap>p,.intro p{max-width:66ch} /* linnen-wash voor rustig ritme */ .values-sec,.testimonials{background:linear-gradient(180deg,var(--linen) 0%,transparent 90%)} /* hairlines & kaarten: zachter, dieper */ .todo,.aud,.day,.areas li,.quote,.plan-viewer,.gen-note{box-shadow:var(--shadow-soft);border:1px solid var(--hairline)} .todo,.aud,.day{transition:transform .6s var(--ease),box-shadow .6s var(--ease)} .todo:hover,.aud:hover,.teaser:hover{transform:translateY(-3px);box-shadow:0 34px 90px -34px rgba(44,38,32,.34)} .faq-item{border-color:var(--hairline)} /* hero: kalmte + leesbaarheid */ .hero .hero-media:after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,17,14,.18) 0%,rgba(20,17,14,0) 30%,rgba(20,17,14,.42) 100%);pointer-events:none} .hero-kicker{letter-spacing:.01em} /* knoppen: uitnodigend, beheerst */ .nav-cta,.bar a,.book .btn,.sub-nav .cta{letter-spacing:.02em;transition:transform .45s var(--ease),background .45s,box-shadow .45s} .nav-cta:hover,.bar a:hover,.book .btn:hover{transform:translateY(-1px)} a:focus-visible,button:focus-visible{outline:2px solid var(--zellige);outline-offset:3px;border-radius:6px} /* beweging: traag en gerust */ .reveal{transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .stagger>*{transition-duration:.8s} @media (prefers-reduced-motion: reduce){ *,*:before,*:after{animation:none!important;transition:none!important} .reveal,.stagger>*{opacity:1!important;transform:none!important} } html{overflow-x:hidden} /* ---------- video-hero ---------- */ .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity 1.4s var(--ease-lux);pointer-events:none} .hero-video.on{opacity:1} @media(prefers-reduced-motion:reduce){.hero-video{display:none}} figcaption,.res-meta{color:var(--ink-soft)} /* ---------- mobiele pas ---------- */ @media(max-width:820px){ :root{--ink-soft:#564c41} .hero{min-height:0;height:100svh} .hero::after{background:linear-gradient(to top,rgba(24,20,16,.80) 0%, rgba(24,20,16,.32) 46%,rgba(24,20,16,.52) 100%)} .hero-inner{padding-left:20px;padding-right:20px; text-shadow:0 1px 26px rgba(0,0,0,.38)} figcaption{color:#4e453b} body.p-home .groups,body.p-home /* v80: mobiel toont nu alle secties */ input,select,textarea{font-size:16px} .nav-toggle{display:block} } /* ---------- luxe-polish ---------- */ ::selection{background:var(--zellige);color:#fff} .hero-trust{margin-top:clamp(12px,2.2svh,20px);font-size:clamp(.68rem,.5vw + .5svh,.8rem);letter-spacing:.16em;text-transform:uppercase;opacity:1;text-shadow:0 1px 14px rgba(0,0,0,.45)} figure.ph{border:1px solid rgba(44,38,32,.07);border-radius:18px; box-shadow:0 26px 60px -30px rgba(44,38,32,.35)} figure.ph figcaption{font-family:var(--serif);font-style:italic;font-size:.93rem;padding:12px 16px 14px} .ph-grid{gap:18px} @media(min-width:900px){.ph-grid figure.ph:first-child{grid-column:span 2}} blockquote.wed-quote::before{content:"\201C";position:absolute;left:12px;top:0; font-family:var(--serif);font-size:3rem;line-height:1;color:var(--zellige);opacity:.5} .btn{transition:transform .35s var(--ease-lux),box-shadow .35s var(--ease-lux),background .35s var(--ease-lux)} .btn:hover{transform:translateY(-2px)} .btn-solid{box-shadow:0 16px 32px -14px rgba(79,114,99,.6)} .btn:focus-visible,.chips button:focus-visible,.drop-panel a:focus-visible{ outline:2px solid var(--zellige);outline-offset:2px} .drop-panel{box-shadow:0 34px 80px -30px rgba(20,17,14,.45)} /* ---------- boekformulier + perks ---------- */ .book-form{margin-top:40px;text-align:left;max-width:640px;margin-left:auto;margin-right:auto; background:rgba(255,253,249,.07);border:1px solid rgba(255,253,249,.18);border-radius:18px;padding:26px} .form-title{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin-bottom:16px} .bf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .bf-grid label{display:flex;flex-direction:column;gap:6px;font-size:.78rem;letter-spacing:.08em; text-transform:uppercase;opacity:.85} .bf-grid .bf-wide{grid-column:1/-1} .bf-grid input,.bf-grid textarea{font:inherit;font-size:1rem;letter-spacing:0;text-transform:none; padding:11px 13px;border-radius:10px;border:1px solid rgba(255,253,249,.3); background:rgba(255,253,249,.95);color:var(--ink)} .bf-grid input:focus,.bf-grid textarea:focus{outline:2px solid var(--mint)} .book-form .btn{margin-top:18px} .hp{position:absolute;left:-9999px} .form-ok,.form-err{margin-top:14px;font-size:.95rem} .form-ok{color:var(--mint)} .form-err{color:#f2b8a0} .direct-perks{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center; margin-top:26px;padding:0;font-size:.86rem;opacity:.9} .direct-perks li::before{content:"\2713\00a0";color:var(--mint)} .promo-line{margin-top:14px;font-size:.95rem;color:var(--mint);letter-spacing:.02em} .rating-badges a{text-decoration:none;color:inherit;display:inline-block;transition:transform .3s var(--ease-lux)} .rating-badges a:hover{transform:translateY(-3px)} figure.ph img{cursor:zoom-in;transition:transform .6s var(--ease-lux)} figure.ph:hover img{transform:scale(1.04)} @media(max-width:640px){.bf-grid{grid-template-columns:1fr}} /* ---------- hoverbrug + citaat + chips + consistentie ---------- */ .nav-group::after{content:"";position:absolute;top:100%;left:-10px;right:-10px;height:20px} blockquote.wed-quote{margin:34px 0 0;padding:20px 26px 20px 46px;position:relative;border-left:3px solid var(--zellige); background:var(--linen,#EFE9DE);border-radius:16px} blockquote.wed-quote p{font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.5} blockquote.wed-quote cite{display:block;margin-top:10px;font-style:normal;font-size:.85rem;color:var(--ink-soft)} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px} .chips button{background:var(--white);border:1px solid rgba(44,38,32,.16);border-radius:999px; padding:9px 16px 8px;font:inherit;font-size:.85rem;cursor:pointer;transition:all .3s var(--ease-lux)} .chips button:hover{border-color:var(--ink)} .chips button.sel{background:var(--ink);border-color:var(--ink);color:var(--white)} .chip-info{border-left:3px solid var(--zellige);background:var(--linen,#EFE9DE); padding:14px 18px;border-radius:14px;margin-top:12px;min-height:52px;color:var(--ink-soft)} .todo-sec .eyebrow{margin-bottom:8px} h3.cat-title{margin:36px 0 12px;font-size:1.12rem;letter-spacing:.01em} .todo-sec .ab-intro{max-width:66ch} /* ---------- dropdown-menu ---------- */ .nav-group{position:relative} .nav-drop{background:none;border:0;font:inherit;font-size:.83rem;letter-spacing:.12em; text-transform:uppercase;color:inherit;cursor:pointer;padding:0 0 3px;display:inline-flex; align-items:center;gap:6px} .nav-drop::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px); transition:transform .3s var(--ease-lux)} .nav-group.open .nav-drop::after{transform:rotate(225deg) translateY(-1px)} .drop-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%); background:var(--white);color:var(--ink);border-radius:14px;min-width:200px;padding:10px; box-shadow:0 30px 70px -25px rgba(20,17,14,.4);display:none;flex-direction:column;z-index:900} .nav-group.open .drop-panel{display:flex} @media(hover:hover){.nav-group:hover .drop-panel{display:flex}} .drop-panel a{display:block;padding:9px 13px;border-radius:9px;font-size:.8rem; letter-spacing:.05em;text-transform:none} .drop-panel a::after{display:none} .drop-panel a:hover{background:var(--sand)} @media(max-width:820px){ .nav-drop{display:none} nav#mainNav.open{display:flex;flex-direction:column;align-items:stretch} nav.open .nav-group::after{display:none} nav.open .nav-drop{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:14px 22px;color:var(--ink);font-size:.92rem;letter-spacing:.06em;border-bottom:1px solid rgba(44,38,32,.1);pointer-events:auto} nav.open .nav-drop::after{display:inline-block;margin-left:10px;flex:0 0 auto} nav.open .nav-group{width:100%} nav#mainNav.open .drop-panel{display:none;position:static;transform:none;box-shadow:none;min-width:0;padding:0 0 6px} nav#mainNav.open .nav-group.open .drop-panel{display:block} nav.open .drop-panel a{display:block;padding:11px 30px;font-size:.95rem;color:var(--ink-soft)} } /* ---------- fotostrips ---------- */ .grounds-sec{padding:100px 0 30px} .ph-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:26px} figure.ph{margin:0;border-radius:16px;overflow:hidden;background:var(--white); box-shadow:0 18px 44px -24px rgba(44,38,32,.28)} figure.ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} figure.ph figcaption{padding:11px 15px 13px;font-size:.84rem;line-height:1.45;color:var(--ink-soft)} /* ---------- 3D-plannen v2 ---------- */ .plan-tabs{gap:10px;margin-bottom:18px} .plan-tab{text-transform:none;letter-spacing:.04em;font-size:.88rem;padding:11px 18px; background:var(--white);border-color:rgba(44,38,32,.2);border-radius:999px; transition:all .3s var(--ease-lux)} .plan-tab:hover{border-color:var(--zellige);color:var(--zellige)} .plan-tab.active{background:var(--zellige);border-color:var(--zellige);color:var(--white); box-shadow:0 8px 20px -8px rgba(79,114,99,.55)} .plan-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px; border-radius:50%;background:rgba(255,253,249,.94);border:1px solid rgba(44,38,32,.16); font-size:1.6rem;line-height:1;cursor:pointer;z-index:6;display:flex;align-items:center; justify-content:center;box-shadow:0 10px 24px -12px rgba(0,0,0,.35);color:var(--ink); transition:transform .25s var(--ease-lux),background .25s} .plan-nav:hover{background:var(--white);transform:translateY(-50%) scale(1.06)} .plan-prev{left:14px}.plan-next{right:14px} .plan-count{position:absolute;top:14px;right:14px;background:rgba(44,38,32,.78); color:var(--white);font-size:.74rem;letter-spacing:.1em;padding:5px 11px; border-radius:999px;z-index:6;font-variant-numeric:tabular-nums} .plan-legend{gap:8px;margin-top:16px} .plan-legend button{background:var(--white);border:1px solid rgba(44,38,32,.16); border-radius:999px;padding:9px 16px 8px;font:inherit;font-size:.85rem;cursor:pointer; transition:all .3s var(--ease-lux)} .plan-legend button:hover{border-color:var(--ink)} .plan-legend button.sel{background:var(--ink);border-color:var(--ink);color:var(--white)} #planInfo{border-left:3px solid var(--zellige);background:var(--linen,#EFE9DE); padding:14px 18px;border-radius:0 12px 12px 0;margin-top:12px;min-height:52px; color:var(--ink-soft)} @media(max-width:640px){.plan-nav{width:40px;height:40px}.plan-prev{left:8px}.plan-next{right:8px}} .teasers-sec{padding:90px 0 20px}.teaser{display:block;text-decoration:none;color:inherit;position:relative;transition:transform .35s var(--ease)}.teaser:hover{transform:translateY(-4px)}.t-more{position:absolute;right:22px;bottom:16px;color:var(--zellige);font-size:1.1rem}@media(max-width:720px){.teasers-sec .todo-grid{grid-template-columns:1fr!important}} /* ---------- hero promo pill (P6) ---------- */ .hero-promo{display:inline-flex;align-self:flex-start;margin-top:clamp(12px,2svh,20px); padding:8px 18px 7px;background:var(--zellige);color:var(--sand); border-radius:999px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase; text-decoration:none;font-weight:600;opacity:0;box-shadow:0 6px 22px rgba(0,0,0,.28)} .loaded .hero-promo{animation:riseIn 1.1s var(--ease-lux) 1.3s forwards} .hero-promo:hover{background:#5d8474} @media(prefers-reduced-motion:reduce){.hero-promo{opacity:1;animation:none}} /* ---------- meerstaps-formulier ---------- */ .bf-progress{display:none;gap:8px;align-items:center;margin:0 0 18px; font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)} .js-steps .bf-progress{display:flex;flex-wrap:wrap} .bf-progress .pdot{width:26px;height:26px;border-radius:50%;display:inline-flex; align-items:center;justify-content:center;border:1px solid var(--stone); font-weight:600;background:transparent;color:var(--ink-soft)} .bf-progress .pdot.done,.bf-progress .pdot.now{background:var(--zellige); border-color:var(--zellige);color:var(--sand)} .bf-progress .plbl{margin-right:10px} .js-steps .bf-step{display:none} .js-steps .bf-step.on{display:block} .bf-step .bf-grid{margin-bottom:0} .bf-navrow{display:flex;gap:12px;margin-top:18px} .btn.btn-back{background:transparent;border:1px solid var(--stone);color:inherit} /* ---------- boekingssectie: badge, hints, videocall ---------- */ .rate-badge{display:inline-block;margin:0 0 16px;padding:8px 18px 7px; border:1px solid var(--mint);color:var(--mint);border-radius:999px; font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600} .bf-hint{display:block;margin-top:4px;font-size:.78rem;opacity:.75;font-weight:400} .bf-check{display:flex;gap:10px;align-items:flex-start;margin-top:14px; font-size:.88rem;cursor:pointer} .bf-check input{margin-top:3px;accent-color:var(--mint)} .bf-trust{margin-top:12px;font-size:.78rem;opacity:.75} /* ---------- domein-in-20s strip ---------- */ .glance{padding:26px 0 8px} .glance-note{text-align:center;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px} .glance-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:1100px;margin:0 auto;padding:0 18px} .glance-row a{display:block;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3} .glance-row img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-lux)} .glance-row a:hover img{transform:scale(1.05)} .glance-row span{position:absolute;left:0;right:0;bottom:0;padding:18px 10px 8px;font-size:.72rem;color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.55));letter-spacing:.03em} @media(max-width:760px){.glance-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px} .glance-row a{flex:0 0 46%;scroll-snap-align:start}} /* ---------- dag-nacht-schuif ---------- */ .dn{position:relative;max-width:980px;margin:26px auto 0;border-radius:16px;overflow:hidden;aspect-ratio:3/2} .dn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .dn .dn-top{clip-path:inset(0 calc(100% - var(--dn,50%)) 0 0)} .dn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3} .dn .dn-line{position:absolute;top:0;bottom:0;left:var(--dn,50%);width:2px;background:var(--sand);z-index:2;pointer-events:none} .dn .dn-line::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:38px;height:38px;border-radius:50%;background:var(--sand);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:1rem} .dn .dn-tag{position:absolute;bottom:10px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase; color:#fff;background:rgba(0,0,0,.45);padding:4px 10px;border-radius:999px;z-index:2;pointer-events:none} .dn .dn-tag.l{left:10px}.dn .dn-tag.r{right:10px} .cta-micro{margin-top:10px;font-size:.78rem;opacity:.75} .counter .lbl-sub{display:block;font-size:.68rem;opacity:.7;font-weight:400;letter-spacing:.02em;text-transform:none} .foot-sign{margin-top:18px;font-family:var(--serif);font-style:italic;opacity:.85} @media(max-width:640px){.book-cta-row .btn-wa{order:-1}} .res-meta{display:block;margin:8px 0 10px} .hero-link{background:none;border:1px solid transparent;text-decoration:underline;text-underline-offset:5px;padding:14px 8px;letter-spacing:.08em} .glance{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;padding:30px 0} .glance .glance-note{max-width:1200px;margin:0 auto 16px;padding:0 24px} .glance-row{display:flex;gap:16px;width:max-content;animation:glanceGlide 60s linear infinite;will-change:transform} .glance-row a{flex:0 0 auto;position:relative} .glance-row img{height:clamp(240px,46vh,460px);width:auto;border-radius:14px;box-shadow:0 18px 44px rgba(20,17,14,.18)} .glance:hover .glance-row,.glance:active .glance-row{animation-play-state:paused} @keyframes glanceGlide{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.glance-row{animation:none;width:auto;overflow-x:auto}} .glance-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab} .glance-scroll::-webkit-scrollbar{display:none} .glance-scroll:active{cursor:grabbing} .glance-row{animation:none !important} html{scroll-behavior:smooth} [id]{scroll-margin-top:96px} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} .grounds-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start} .grounds-media{display:grid;gap:14px} .grounds-media img{width:100%;border-radius:14px;box-shadow:0 14px 34px rgba(20,17,14,.15)} @media(max-width:820px){.grounds-cols{grid-template-columns:1fr}} .wing-scroll{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;border-radius:16px} .wing-scroll::-webkit-scrollbar{display:none} .wing-scroll:active{cursor:grabbing} .wing-row{display:flex;gap:12px;width:max-content} .wing-row figure.ph{flex:0 0 auto;margin:0;aspect-ratio:auto} .wing-row img{height:clamp(300px,54vh,560px);width:auto;border-radius:14px;display:block;cursor:zoom-in} .res-head{display:block} .res .wing-scroll{margin-top:16px} .wing-scroll{position:relative} .slide-hint{display:flex;align-items:center;gap:8px;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;opacity:.62;margin:0 0 10px} .slide-hint::before{content:"";width:26px;height:1px;background:currentColor;display:inline-block} /* ---------- rustbanden + zwaardere iconen (tekstwoestijn-fix) ---------- */ .band-quiet{height:44vh;min-height:300px} .band-quiet::after{background:rgba(24,20,16,.10)} @media(max-width:820px){ .band-quiet{height:36svh;min-height:230px} .amen svg{width:46px;height:46px} .amen{padding:26px 22px} } /* ---------- 'Ideaal voor'-categorierooster ---------- */ .ideal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media(max-width:900px){.ideal-grid{grid-template-columns:repeat(2,1fr)}} .ideal-grid .teaser{display:flex;align-items:center;justify-content:space-between; gap:12px;padding:22px 20px;min-height:0} .ideal-grid .teaser h4{margin:0;font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.25} .ideal-grid .teaser .t-more{opacity:.55;transition:transform .3s var(--ease-lux)} .ideal-grid .teaser:hover .t-more{transform:translateX(4px)} .grounds-after{margin-top:26px} @media (prefers-reduced-motion: reduce){.ideal-grid .teaser .t-more{transition:none}} /* ===== v64 ===== */ /* ========================================================================== v64 — compacte, conversiegerichte layoutlaag Doel: minder loze witruimte, gevarieerde paginaopeningen, foto's doen het zware werk. Cascade-veilig onderaan de bestaande