
:root{
  --beige:#E8DCC5; --off:#F9F8F5; --ink:#111; --ink2:#3a3a3a;
  --line: color-mix(in oklab, var(--ink) 12%, transparent);
  --max: 1320px; --radius: 20px;
  --shadow: 0 14px 48px rgba(0,0,0,.08);
  --s1:.375rem; --s2:.625rem; --s3:1rem; --s4:1.5rem; --s5:2rem; --s6:3rem; --s7:4rem; --s8:6rem;
  --fz-h1: clamp(2.4rem, 1.6rem + 3.5vw, 4.2rem); --fz-h2: clamp(1.4rem, 1.1rem + 1.2vw, 2.0rem);
  --fz-nav:.82rem; --lead: clamp(1rem,.9rem + .4vw,1.125rem);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--off);color:var(--ink);font:16px/1.55 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
.section{padding:var(--s6) 0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* NAV */
header{position:sticky;top:0;z-index:60;background:color-mix(in oklab, var(--off) 86%, transparent);backdrop-filter:saturate(120%) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{font-family: ui-serif, Georgia, 'Playfair Display', serif;letter-spacing:.4px;font-weight:600}
.menu{display:flex;gap:.5rem;list-style:none;margin:0;padding:0}
.chip{padding:.55rem .9rem;border-radius:999px;border:1px solid var(--line);text-transform:uppercase;letter-spacing:.08em;font-size:var(--fz-nav)}
.chip.active{background:var(--ink);color:var(--off)}

/* HERO */
.hero{position:relative;min-height:78svh;display:grid;align-content:end}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero video,.hero img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) contrast(1.02)}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,.0) 55%), color-mix(in oklab, var(--beige) 18%, transparent)}
.hero-inner{position:relative;z-index:1}
.hero-card{display:grid;gap:var(--s3);max-width:860px;margin:0 auto var(--s6);text-align:center;color:#fff}
.hero h1{font-family: ui-serif, Georgia, 'Cormorant Garamond', serif;font-weight:600;font-size:var(--fz-h1);line-height:1.05;margin:0}
.lead{font-size:var(--lead);color:#fff;opacity:.9}
.cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:.9rem 1.25rem;border-radius:999px;font-weight:600;transition:transform .12s ease, background .2s ease, color .2s ease}
.btn.primary{background:#fff;color:#111}
.btn.ghost{border:1px solid rgba(255,255,255,.6);color:#fff}
.btn:active{transform:translateY(1px)}

/* EDITORIAL */
.editorial{display:grid;gap:var(--s5)}
.grid{display:grid;gap:var(--s3)}
.grid.cols-2{grid-template-columns:1fr}
@media(min-width:860px){.grid.cols-2{grid-template-columns:1fr 1fr}}
.tile{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.tile img{width:100%;height:100%;object-fit:cover;aspect-ratio: 16/9;transition:transform .6s ease;will-change:transform}
.tile:hover img{transform:scale(1.04)}
.cap{position:absolute;left:0;right:0;bottom:0;padding:var(--s4);color:#fff;background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.0))}
.cap h3{margin:0;font:600 clamp(1.1rem,1rem + .8vw,1.6rem)/1.15 ui-serif, Georgia, serif}
.cap p{margin:.25rem 0 0;opacity:.9}

/* SCROLLER (merken) */
.scroller{display:grid;grid-auto-flow:column;grid-auto-columns: clamp(220px, 38vw, 280px);gap:var(--s3);overflow-x:auto;padding:.25rem 0 .75rem;scroll-snap-type:x mandatory}
.card{scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:var(--s4);box-shadow:var(--shadow)}
.logo{height:50px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--line);border-radius:12px;background:color-mix(in oklab, var(--beige) 28%, #fff)}
.card small{color:var(--ink2)}

/* CTA STRIP */
.cta-strip{background:color-mix(in oklab, var(--beige) 65%, #fff);border-block:1px solid var(--line)}
.cta-strip .inner{display:grid;gap:var(--s3);align-items:center}
@media(min-width:860px){.cta-strip .inner{grid-template-columns:1.1fr .9fr}}

/* CONTACT */
.contact .card{background:color-mix(in oklab, var(--beige) 55%, #fff)}
.hours{display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem;max-width:520px;margin-top:.4rem;color:var(--ink2)}
.contact-actions{display:flex;gap:.6rem;flex-wrap:wrap}

/* FOOTER */
footer{background:color-mix(in oklab, var(--beige) 74%, #fff);border-top:1px solid var(--line);padding:var(--s5) 0;margin-top:var(--s7);text-align:center}
footer small{color:#646464}

/* Accessibility / motion */
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
