[hidden]{display:none!important}
/* concept: Ma Baker in de nieuwe huisstijl (nov 2026) — high tea, events, travel en promotie onder één naam. Kleuren en vormen uit hun eigen nieuwe logo en aankondiging: saliegroen, crème, goud en zandbeige, het ovaal met de gouden dubbele rand, en het motto "Beleef • Ontdek • Verbind". Het ovaal draagt de hero (drie eigen foto's: etagère, Mariëlle aan de lange tafel, Andalusië), daarna vier onderdelen, de etagère als nuttig blok, events, travel met hun eigen reisfoto's, promotie met Mariëlle zelf, en het familieverhaal in salie met de geschulpte rand van hun taartkleedjes. Menu: de etagère-knop die een kruis wordt, paneel van rechts. Onthullen: foto opent vanuit een ovaal. */

:root{
  --salie:#a2ad91;--salie-d:#66734f;--salie-dd:#4d5940;--salie-l:#e8ebe0;
  --goud:#c29a52;--zand:#d3c5b1;--creme:#f5f0e7;
  --ink:#1f1d1a;--tekst:#46423c;--zacht:#79736a;
  --lijn:#e3dccf;
  --land:cubic-bezier(.2,.7,.2,1);
  --wrap:1188px;--pad:clamp(52px,5.6vw,84px);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--creme);color:var(--tekst);font:400 17px/1.65 "Jost",system-ui,sans-serif}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit}
h1,h2,h3{font-family:"Libre Caslon Text",Georgia,serif;font-weight:400;color:var(--ink);margin:0;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(34px,3.8vw,52px)}
h2{font-size:clamp(28px,2.6vw,38px)}
h3{font-size:21px}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;z-index:99}
.skip:focus{left:8px}

/* ---------- knop ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 8px 0 24px;border-radius:999px;font:500 16px/1 "Jost",sans-serif;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;position:relative;isolation:isolate;overflow:hidden;transition:transform .25s var(--land)}
.btn i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;background:#fff;position:relative;overflow:hidden}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s cubic-bezier(.65,0,.35,1)}
.btn i .p2{position:absolute;inset:0;margin:auto;transform:translateX(-180%)}
.btn-groen{background:var(--salie-d);color:#fff}.btn-groen i{color:var(--salie-d)}
.btn-donker{background:var(--ink);color:#fff}.btn-donker i{color:var(--ink)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--goud);transform:translateX(-101%);transition:transform .55s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){
  .btn:hover::before{transform:none}
  .btn:hover i .p1{transform:translateX(180%)}
  .btn:hover i .p2{transform:none;transition-delay:.06s}
}
.btn:focus-visible::before{transform:none}
.btn.uit::before{transform:translateX(101%)}
.btn.reset::before{transition:none!important;transform:translateX(-101%)!important}
.btn:active{transform:scale(.965)}
.btns{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.tlink{font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--goud);text-decoration-thickness:2px;text-underline-offset:5px}
.tlink:hover{color:var(--salie-dd)}

/* ---------- kop: logo links, onderdelen in het midden, één knop ---------- */
.kop{position:sticky;top:0;z-index:60;background:rgba(245,240,231,.94);backdrop-filter:blur(8px);transition:box-shadow .3s}
.kop.lijn{box-shadow:0 1px 0 var(--lijn)}
.kop-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:96px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{line-height:0;flex:none}
.logo img{width:136px;height:auto}
.kop-nav{display:flex;gap:30px;font-weight:500;font-size:16.5px}
.kop-nav a{text-decoration:none;color:var(--ink);padding:6px 0;border-bottom:2px solid transparent;transition:border-color .25s}
.kop-nav a:hover{border-color:var(--goud)}
.kop-r{display:flex;align-items:center;gap:14px}
.kop-cta{height:48px;padding-left:20px}
.kop-cta i{width:34px;height:34px}
/* etagère-knop: het ovaal uit haar logo (crème met de gouden dubbele rand), met daarin een etagère: gouden
   knopje, steel en drie schaaltjes die van klein naar groot gaan. Open worden boven- en onderschaal een kruis. */
.etagere-knop{width:58px;height:46px;border-radius:50%;border:1.5px solid var(--goud);background:var(--creme);box-shadow:inset 0 0 0 3px var(--creme),inset 0 0 0 4px rgba(194,154,82,.55);cursor:pointer;position:relative;z-index:72;padding:0;transition:background-color .3s}
.etagere-knop span{position:absolute;left:50%;height:3px;border-radius:0 0 5px 5px/0 0 3px 3px;background:var(--salie-dd);transition:transform .45s var(--land),width .45s var(--land),margin .45s var(--land),border-radius .45s,opacity .3s}
.etagere-knop span:nth-child(1){top:15px;width:10px;margin-left:-5px}
.etagere-knop span:nth-child(2){top:22px;width:16px;margin-left:-8px}
.etagere-knop span:nth-child(3){top:29px;width:22px;margin-left:-11px}
.etagere-knop b{position:absolute;left:50%;top:12px;width:1.6px;height:18px;margin-left:-.8px;background:var(--salie-dd);transition:opacity .3s}
.etagere-knop b::before{content:"";position:absolute;left:50%;top:-4px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--goud)}
@media (hover:hover){
  .etagere-knop:hover{background:#fff}
  .etagere-knop:hover span:nth-child(1){transform:translateY(-1.5px)}
  .etagere-knop:hover span:nth-child(3){transform:translateY(1.5px)}
}
.etagere-knop:focus-visible{outline:2px solid var(--salie-dd);outline-offset:3px}
.open .etagere-knop span:nth-child(1){width:20px;margin-left:-10px;border-radius:2px;transform:translateY(7px) rotate(45deg)}
.open .etagere-knop span:nth-child(2){opacity:0}
.open .etagere-knop span:nth-child(3){width:20px;margin-left:-10px;border-radius:2px;transform:translateY(-7px) rotate(-45deg)}
.open .etagere-knop b{opacity:0}

/* menu van rechts */
.menu{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:66;background:#fff;transform:translateX(102%);transition:transform .6s var(--land);box-shadow:-30px 0 60px -40px rgba(0,0,0,.35)}
.menu.toon{transform:none}
.menu-in{height:100%;overflow-y:auto;padding:110px 34px 0;display:flex;flex-direction:column}
.menu ul{list-style:none;margin:0;padding:0}
.menu li a{display:block;padding:11px 0;border-bottom:1px solid var(--lijn);font:400 23px/1.25 "Libre Caslon Text",serif;text-decoration:none;color:var(--ink)}
.menu li a:hover{color:var(--salie-dd)}
.menu-bel{margin:24px 0;font-weight:500;line-height:1.9}
.menu-bel a{text-decoration:none}
.menu-foto{margin:auto -34px 0;width:calc(100% + 68px);max-width:none;aspect-ratio:16/9;object-fit:cover}
.open .kop{z-index:70;background:transparent;backdrop-filter:none;box-shadow:none}
.open .kop-cta,.open .kop-nav,.open .logo{visibility:hidden}
.sluier{position:fixed;inset:0;z-index:64;background:rgba(31,29,26,.3);opacity:0;pointer-events:none;transition:opacity .4s}
.open .sluier{opacity:1;pointer-events:auto}
html.slot{overflow:hidden}

/* ---------- hero: saliegroen paneel met de ovalen ---------- */
.hero{padding:6px 16px 0}
.hero-paneel{max-width:1320px;margin:0 auto;background:var(--salie);border-radius:28px;padding:clamp(34px,4.4vw,64px) 0 clamp(26px,3vw,40px);position:relative}
.hero-paneel::before{content:"";position:absolute;inset:12px;border:1px solid rgba(194,154,82,.75);border-radius:20px;pointer-events:none}
.hero-in{max-width:var(--wrap);margin:0 auto;padding:0 clamp(24px,4vw,56px);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4vw,60px);align-items:center}
.hero-tekst h1{max-width:15ch;color:var(--ink)}
.hero-tekst p{margin:20px 0 30px;font-size:18.5px;max-width:30em;color:#2f2c27}
.hero .tlink{text-decoration-color:var(--creme)}
.hero-ovalen{position:relative;height:clamp(400px,40vw,540px)}
.ov{position:absolute;overflow:hidden;border-radius:50%;box-shadow:0 0 0 5px var(--creme),0 0 0 7px var(--goud)}
.ov img{width:100%;height:100%;object-fit:cover}
.ov-1{left:16%;top:0;width:60%;height:100%}
.ov-1 img{object-position:50% 60%}
.ov-2{left:0;bottom:2%;width:31%;height:52%}
.ov-2 img{object-position:55% 62%}
.ov-3{right:0;top:6%;width:30%;aspect-ratio:1;height:auto}
.motto{text-align:center;margin-top:clamp(26px,3vw,40px);font:400 clamp(19px,1.8vw,24px)/1 "Libre Caslon Text",serif;color:var(--ink);letter-spacing:.02em}
.motto span{color:var(--creme);margin:0 .35em}
@keyframes heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.hero-tekst{animation:heroIn .7s var(--land) both}}

/* ---------- de vier onderdelen ---------- */
.onderdelen{padding:var(--pad) 0}
.vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:30px}
.kaart{text-decoration:none;color:inherit;display:block}
.kaart figure{border-radius:999px 999px 18px 18px;overflow:hidden;aspect-ratio:3/3.7;margin-bottom:18px;box-shadow:0 0 0 1px var(--lijn)}
.kaart img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--land)}
.kaart:nth-child(1) img{object-position:50% 30%}
.kaart:nth-child(4) img{object-position:60% 30%}
.kaart h3{font-size:24px;margin-bottom:6px;display:inline-block;border-bottom:2px solid transparent;transition:border-color .3s}
.kaart p{font-size:16px}
@media (hover:hover){.kaart:hover img{transform:scale(1.04)}.kaart:hover h3{border-color:var(--goud)}}

/* ---------- high tea: de etagère ---------- */
.teas{padding:var(--pad) 0;background:#fff}
.teas-kop{max-width:720px;margin-bottom:34px}
.teas-kop p{margin-top:14px}
.etagere-blok{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center}
.et-foto{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:997/1300}
.et-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:opacity .35s}
.keuze{display:inline-flex;background:var(--creme);border:1px solid var(--lijn);border-radius:999px;padding:4px;margin-bottom:24px}
.keuze button{appearance:none;border:0;background:none;padding:11px 22px;border-radius:999px;font:500 16px "Jost",sans-serif;color:var(--tekst);cursor:pointer;transition:background-color .25s,color .25s}
.keuze button[aria-selected=true]{background:var(--salie-d);color:#fff}
.lagen{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.lagen li{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--lijn)}
.lagen b{font:400 17px/1.6 "Libre Caslon Text",serif;font-style:italic;color:var(--salie-d);padding-top:3px}
.lagen h3{font-size:22px}
.lagen p{margin-top:4px}
.lagen li.wissel{animation:wissel .45s var(--land)}
@keyframes wissel{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
.incl{margin-top:20px;font-size:16px}

/* ---------- servies: één groot moment ---------- */
.servies{padding:0 0 var(--pad);background:var(--creme)}
.servies-foto img{width:100%;height:max(66vh,420px);max-height:720px;object-fit:cover;object-position:50% 45%}
blockquote{margin:clamp(40px,5vw,72px) 0 0}
blockquote p{margin:0;max-width:22em;font:400 clamp(26px,3.2vw,42px)/1.28 "Libre Caslon Text",serif;font-style:italic;color:var(--ink)}

/* ---------- events ---------- */
.gelegenheden{padding:var(--pad) 0;background:var(--salie-l)}
.gel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,64px);margin-top:32px;align-items:start}
.g-groot figure{border-radius:16px;overflow:hidden;aspect-ratio:4/4.2;margin-bottom:22px}
.g-groot img{width:100%;height:100%;object-fit:cover;object-position:62% 60%;transform:scale(1.18);transform-origin:62% 70%}
.g-groot h3{font-size:26px;margin-bottom:8px}
.g-lijst,.reis{list-style:none;margin:0;padding:0}
.g-lijst li,.reis li{display:grid;grid-template-columns:140px 1fr;gap:22px;padding:22px 0;border-bottom:1px solid #cfd5c3;align-items:start}
.g-lijst li:first-child,.reis li:first-child{padding-top:0}
.g-lijst img,.reis img{width:140px;height:140px;object-fit:cover;border-radius:12px}
.g-lijst h3,.reis h3{font-size:21px;margin-bottom:6px}
.g-lijst p,.reis p{font-size:16.5px}

/* ---------- travel ---------- */
.travel{padding:0 0 var(--pad);background:var(--creme)}
.travel-foto img{width:100%;height:clamp(320px,52vh,560px);object-fit:cover;object-position:50% 60%}
.travel-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,64px);margin-top:clamp(40px,5vw,64px);align-items:start}
.travel-tekst p{margin-top:16px;max-width:34em}
.travel-tekst .tlink{display:inline-block;margin-top:22px}
.reis li{border-color:var(--lijn)}

/* ---------- promotie ---------- */
.promotie{padding:var(--pad) 0;background:#fff}
.promotie-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,5vw,72px);align-items:center}
.promotie-foto{border-radius:999px 999px 18px 18px;overflow:hidden;aspect-ratio:3/4.4;box-shadow:0 0 0 5px #fff,0 0 0 7px var(--goud);max-width:380px}
.promotie-foto img{width:100%;height:100%;object-fit:cover;object-position:60% 30%}
.promotie-in>div>p{margin-top:16px;max-width:36em}
.diensten{list-style:none;margin:26px 0 30px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;border-top:1px solid var(--lijn)}
.diensten li{padding:18px 0;border-bottom:1px solid var(--lijn)}
.diensten h3{font-size:20px;margin-bottom:4px}
.diensten p{font-size:16px}

/* ---------- over: de familie ---------- */
.over{padding:var(--pad) 0;background:var(--salie-d);color:#fff;position:relative}
.over h2{color:#fff}
.over-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.over-tekst>p{margin-top:16px;max-width:34em;color:rgba(255,255,255,.92)}
.over-foto{border-radius:16px;overflow:hidden;aspect-ratio:4/4.6}
.over-foto img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
/* het kanten kleedje: de geschulpte rand van hun taartkleedjes */
.over::before,.over::after{content:"";position:absolute;left:0;right:0;height:12px;pointer-events:none}
.over::before{top:0;background:radial-gradient(circle at 12px 0,#fff 11px,transparent 11.5px) 0 0/24px 12px repeat-x}
.over::after{bottom:0;background:radial-gradient(circle at 12px 12px,var(--creme) 11px,transparent 11.5px) 0 0/24px 12px repeat-x}

/* ---------- contact ---------- */
.contact{padding:var(--pad) 0}
.contact-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px)}
.contact-in>div>p{margin-top:16px;max-width:30em}
.c-lijn a{font:400 22px "Libre Caslon Text",serif;color:var(--ink);text-decoration:none}
.c-lijn a:hover{color:var(--salie-dd)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;align-content:start}
.form label{display:grid;gap:6px;font-weight:500;font-size:15px;color:var(--ink)}
.form .breed{grid-column:1/-1}
.form input,.form select,.form textarea{width:100%;font:400 16px "Jost",sans-serif;padding:13px 16px;border:1px solid #d8cfbf;border-radius:12px;background:#fff;color:var(--ink)}
.form :focus{outline:2px solid var(--salie-d);outline-offset:1px}
.form .btn{justify-self:start}

/* ---------- voet ---------- */
.voet{background:var(--zand);color:var(--ink);padding:34px 0;font-size:15.5px}
.voet-in{display:flex;gap:28px;align-items:center}
.voet img{width:130px}
.voet-motto{font:400 19px "Libre Caslon Text",serif;margin-bottom:6px}
.voet a{color:var(--ink);text-decoration:none}
.voet a:hover{text-decoration:underline}
.abar{display:none}

/* ---------- onthullen: opent vanuit een ovaal ---------- */
.anim .ov-open img{clip-path:ellipse(0% 0% at 50% 50%)}
.anim .ov-open.in img{clip-path:ellipse(75% 75% at 50% 50%);transition:clip-path .7s var(--land)}
@media (prefers-reduced-motion:reduce){
  .anim .ov-open img{clip-path:none!important}
  .menu,.etagere-knop span,.btn::before{transition:none!important}
}

/* menu: de items komen kort na elkaar in, als lagen op de etagère */
.menu li{opacity:0;transform:translateX(18px);transition:opacity .45s var(--land),transform .45s var(--land)}
.menu.toon li{opacity:1;transform:none}
.menu.toon li:nth-child(2){transition-delay:.06s}.menu.toon li:nth-child(3){transition-delay:.12s}.menu.toon li:nth-child(4){transition-delay:.18s}.menu.toon li:nth-child(5){transition-delay:.24s}.menu.toon li:nth-child(6){transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.menu li{opacity:1;transform:none;transition:none}}

/* ---------- tablet ---------- */
@media (max-width:1100px){.kop-nav{display:none}}
@media (max-width:1020px){
  .hero-in{grid-template-columns:1fr}
  .hero-ovalen{max-width:640px;width:100%;margin:0 auto}
  .vier{grid-template-columns:1fr 1fr}
  .etagere-blok,.travel-in,.over-in,.gel{grid-template-columns:1fr}
  .et-foto{max-width:460px;aspect-ratio:4/4.4}
  .promotie-in{grid-template-columns:1fr}
}

/* ---------- telefoon ---------- */
@media (max-width:720px){
  body{font-size:16.5px}
  :root{--pad:48px}
  .wrap,.kop-in{padding-left:18px;padding-right:18px}
  .kop-in{height:76px}
  .logo img{width:104px}
  .kop-cta{display:none}
  .etagere-knop{width:54px;height:42px}
  .etagere-knop span:nth-child(1){top:13px}.etagere-knop span:nth-child(2){top:20px}.etagere-knop span:nth-child(3){top:27px}
  .etagere-knop b{top:10px}
  .hero{padding:4px 10px 0}
  .hero-paneel{border-radius:22px;padding:22px 0 24px}
  .hero-paneel::before{inset:8px;border-radius:16px}
  .hero-in{padding:0 22px;gap:22px}
  .hero-tekst h1{font-size:31px}
  .hero-tekst p{margin:12px 0 20px;font-size:16.5px}
  .hero-ovalen{height:300px;order:-1}
  .ov-1{left:20%;width:60%}
  .ov{box-shadow:0 0 0 4px var(--creme),0 0 0 5px var(--goud)}
  .motto{font-size:18px}
  .vier{gap:22px 14px}
  .kaart h3{font-size:20px}
  .kaart p{font-size:15px}
  .keuze{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .keuze button{padding:11px 10px}
  .lagen h3{font-size:20px}
  .lagen li{grid-template-columns:1fr;gap:2px;padding:16px 0}
  .et-foto{aspect-ratio:4/3.6}
  .g-lijst li,.reis li{grid-template-columns:96px 1fr;gap:16px}
  .g-lijst img,.reis img{width:96px;height:96px}
  .g-lijst h3,.reis h3{font-size:19px}
  .g-lijst p,.reis p{font-size:15.5px}
  .servies-foto img{height:60vh;object-position:40% 50%}
  blockquote p{font-size:24px}
  .travel-foto img{height:300px}
  .promotie-foto{max-width:260px}
  .diensten{grid-template-columns:1fr}
  .contact-in{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .form .btn{justify-self:stretch;justify-content:space-between}
  .voet-in{flex-direction:column;align-items:flex-start;gap:14px}
  .voet{padding-bottom:84px}
  .menu-in{padding:90px 24px 0}
  .menu-foto{margin:auto -24px 0;width:calc(100% + 48px)}
  .abar{display:grid;grid-template-columns:1fr 1.3fr;gap:8px;position:fixed;left:10px;right:10px;bottom:10px;z-index:40;transition:transform .35s var(--land)}
  .abar a{height:50px;display:grid;place-items:center;border-radius:999px;text-decoration:none;font-weight:500;font-size:15.5px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--salie-d)}
  .abar a:last-child{background:var(--salie-d);color:#fff;box-shadow:none}
  .abar.weg{transform:translateY(130%)}
}
@media (max-width:380px){
  .hero-tekst h1{font-size:28px}
  .vier{grid-template-columns:1fr}
}