@font-face{font-family:'Dela Gothic One';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/dela-gothic-one.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 800;font-display:swap;src:url(/static/fonts/nunito.woff2) format('woff2')}

:root{
  --rood:#DB1B13; --rood-600:#B41610; --rood-700:#91120D;
  --groen:#045E30; --groen-700:#033E20; --groen-900:#011C0E;
  --creme:#F1E3D9; --creme-100:#FCFAF8; --creme-300:#F7F0EA; --creme-600:#C6BAB2;
  --ink:#1c130d;                 /* diepste warme schaduw, nooit puur zwart */
  --shadow: 7px 7px 0;
  --maxw:1120px;
  color-scheme: only light;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--creme); color:var(--ink);
  font-family:'Nunito',system-ui,Arial,sans-serif; font-weight:500;
  -webkit-font-smoothing:antialiased; line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.eyebrow{font-weight:800; text-transform:uppercase; letter-spacing:.15em; font-size:.72rem}
h1,h2,h3{font-family:'Dela Gothic One',Impact,sans-serif; font-weight:400; line-height:.98; text-wrap:balance; margin:0}
.display{font-family:'Dela Gothic One',Impact,sans-serif; font-weight:400}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.5em; font-family:'Nunito',sans-serif; font-weight:800;
  font-size:1rem; padding:.85em 1.4em; border-radius:999px; text-decoration:none; border:2.5px solid transparent;
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; white-space:nowrap}
.btn-red{background:var(--rood); color:var(--creme); box-shadow:4px 4px 0 var(--rood-700)}
.btn-green{background:var(--groen); color:var(--creme); box-shadow:4px 4px 0 var(--groen-900)}
.btn-cream-outline{background:transparent; color:var(--creme); border-color:var(--creme)}
.btn-ghost{background:var(--creme); color:var(--groen); box-shadow:4px 4px 0 var(--creme-600)}
.btn:hover{transform:translate(-2px,-2px)}
.btn-red:hover{box-shadow:6px 6px 0 var(--rood-700)}
.btn-green:hover{box-shadow:6px 6px 0 var(--groen-900)}
.btn-cream-outline:hover{background:var(--creme); color:var(--groen)}

/* nav */
.nav{position:sticky; top:0; z-index:40; background:var(--creme); border-bottom:2px solid var(--creme-600)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:74px; gap:18px}
.nav img{height:42px; width:auto; filter:drop-shadow(0 2px 2px rgba(1,28,14,.16))}
.nav-links{display:flex; gap:26px; font-weight:800; font-size:.95rem}
.nav-links a{text-decoration:none; color:var(--groen)}
.nav-links a:hover{color:var(--rood)}
.nav-cta{display:flex; align-items:center; gap:14px}

/* hero */
.hero{position:relative; min-height:min(88vh,760px); display:flex; align-items:flex-end;
  background:url("/static/img/hero.jpg") center/cover no-repeat; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(1,28,14,.35) 0%, rgba(1,28,14,.15) 40%, rgba(1,28,14,.85) 100%)}
.hero .wrap{position:relative; padding-top:64px; padding-bottom:64px; width:100%}
.hero-inner{max-width:1080px; color:var(--creme)}
.hero .eyebrow{color:var(--creme); opacity:.9}
.hero h1{font-size:clamp(2.4rem,7.4vw,6.3rem); letter-spacing:.01em; line-height:.98; white-space:nowrap; color:var(--creme); margin:0;
  text-shadow:0 4px 22px rgba(1,28,14,.5)}
.hero p.lede{font-size:clamp(1.05rem,2.3vw,1.35rem); font-weight:700; max-width:48ch; margin:0 0 1.6em;
  color:var(--creme)}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px}
.headline-row{display:flex; align-items:center; gap:30px; flex-wrap:wrap; margin:.1em 0 .66em}
.sticker{flex:0 0 auto; width:138px; height:138px; border-radius:50%;
  background:var(--rood); color:var(--creme); display:grid; place-content:center; text-align:center;
  transform:rotate(-7deg); border:3px solid var(--creme); box-shadow:0 10px 22px rgba(1,28,14,.35)}
.sticker span{font-family:'Dela Gothic One',sans-serif; font-weight:400; font-size:.75rem; line-height:1.16; padding:0 8px; letter-spacing:normal}

/* marquee */
.marquee{background:var(--rood); color:var(--creme); padding:15px 0; overflow:hidden; border-block:3px solid var(--rood-700)}
.marquee__track{display:flex; gap:0; width:max-content; animation:scroll 26s linear infinite}
.marquee span{font-family:'Dela Gothic One',sans-serif; font-size:1.05rem; padding:0 26px; white-space:nowrap;
  text-transform:uppercase; letter-spacing:.02em}
.marquee span::after{content:"\2605"; margin-left:26px; color:var(--creme); opacity:.6}
@keyframes scroll{to{transform:translateX(-50%)}}

/* section base */
.section{padding:clamp(56px,8vw,104px) 0}
.section-head{max-width:640px; margin-bottom:44px}
.section-head .eyebrow{color:var(--rood)}
.section-head h1,.section-head h2{font-size:clamp(2rem,5vw,3.4rem); margin:.2em 0 .35em}
.section-head p{font-size:1.1rem; font-weight:600; margin:0}
.section-head .btn{margin-top:1.6em}
.on-green{background:var(--groen); color:var(--creme)}
.on-green .eyebrow{color:var(--creme)}
.on-green .section-head h1,.on-green .section-head h2{color:var(--creme)}

/* highlights grid */
.slider{overflow:hidden; padding:18px 0 34px; width:100vw; margin-left:calc(50% - 50vw)}
.grid{display:flex; gap:30px; width:max-content; padding-left:26px; animation:cardscroll 46s linear infinite}
.slider:hover .grid{animation-play-state:paused}
@keyframes cardscroll{to{transform:translateX(calc(-50% - 15px))}}
.card{position:relative; flex:0 0 clamp(264px,80vw,322px);
  background:var(--creme-100); border:2.5px solid var(--ink); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow) var(--groen); transition:transform .14s ease, box-shadow .14s ease}
.card:nth-child(odd){transform:rotate(-1.6deg)}
.card:nth-child(even){transform:rotate(1.6deg)}
.card:hover{transform:rotate(0deg) translateY(-10px); box-shadow:12px 12px 0 var(--groen)}
.card.c-rood{box-shadow:var(--shadow) var(--rood)} .card.c-rood:hover{box-shadow:10px 10px 0 var(--rood)}
.card.c-creme{box-shadow:var(--shadow) var(--creme-600)} .card.c-creme:hover{box-shadow:10px 10px 0 var(--creme-600)}
.card__img{aspect-ratio:4/5; background:var(--creme-300)}
.card__img img{width:100%; height:100%; object-fit:cover}
.card__body{padding:16px 18px 20px}
.chip{display:inline-block; font-weight:800; font-size:.66rem; text-transform:uppercase; letter-spacing:.1em;
  padding:.32em .7em; border-radius:999px; margin-bottom:10px}
.chip.g{background:var(--groen); color:var(--creme)} .chip.r{background:var(--rood); color:var(--creme)}
.chip.c{background:var(--creme); color:var(--groen); border:1.5px solid var(--groen)}
.card h3{font-size:1.15rem; margin-bottom:6px}
.card .craving{font-size:.92rem; font-weight:600; color:#5a4a3e; margin:0 0 12px}
.card .price{font-family:'Dela Gothic One',sans-serif; font-size:1.4rem; color:var(--rood)}
.grid-cta{display:flex; justify-content:center; margin-top:48px}

/* verhaal */
.story{display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:center}
.story p{font-size:1.12rem; font-weight:600; margin:0 0 1em; color:var(--creme)}
.usp{display:flex; flex-direction:column; gap:14px}
.usp-pill{border:2.5px solid var(--creme); border-radius:14px; padding:16px 20px; background:rgba(241,227,217,.06)}
.usp-pill b{font-family:'Dela Gothic One',sans-serif; font-weight:400; font-size:1.05rem; display:block; color:var(--creme)}
.usp-pill span{font-size:.92rem; font-weight:600; color:var(--creme); opacity:.85}

/* reviews */
.rev-top{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:36px}
.rev-score{font-family:'Dela Gothic One',sans-serif; font-size:clamp(3rem,9vw,5rem); color:var(--rood); line-height:1}
.rev-stars{font-size:1.4rem; color:var(--rood); letter-spacing:.1em}
.rev-sub{font-weight:800; color:var(--groen)}
.rev-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px}
.rev-card{background:var(--creme-100); border:2px solid var(--creme-600); border-radius:14px; padding:22px 24px}
.rev-card .q{font-weight:700; font-size:1.02rem; margin:0 0 14px}
.rev-card .who{font-weight:800; font-size:.9rem; color:var(--groen)}
.rev-note{margin-top:22px; font-size:.82rem; font-weight:600; color:#7a685c}
.src{display:inline-block; font-weight:800; font-size:.62rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--groen); border:1.5px solid var(--creme-600); border-radius:999px; padding:.3em .7em; margin-bottom:12px}
.rev-card .stars{color:var(--rood); letter-spacing:.08em; font-size:.85rem; margin-left:8px}

/* toetjes club */
.club-wrap{position:relative}
.club{background:var(--groen); border-radius:26px; overflow:hidden; display:grid; grid-template-columns:1.1fr .9fr;
  align-items:center; box-shadow:12px 12px 0 var(--groen-900)}
.club__text{padding:clamp(32px,5vw,56px); color:var(--creme)}
.club__text .eyebrow{color:var(--creme)}
.club__text h2{font-size:clamp(1.8rem,4vw,2.8rem); color:var(--creme); margin:.25em 0 .5em}
.club__text p{font-weight:600; font-size:1.05rem; margin:0 0 1.6em; color:var(--creme)}
.waitlist{display:flex; gap:12px; flex-wrap:wrap; margin:0 0 12px}
.waitlist input[type=email]{flex:1 1 220px; min-width:0; font:700 1rem 'Nunito',sans-serif; padding:.75em 1.1em; border-radius:999px; border:2.5px solid var(--creme); background:var(--creme); color:var(--groen-900)}
.waitlist input[type=email]::placeholder{color:#7a685c}
.waitlist .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.waitlist-msg{font-weight:800; margin:0 0 10px; color:var(--creme)}
.waitlist-msg.err{color:#ffd9d5}
.waitlist-note{font-size:.85rem; font-weight:600; color:var(--creme); opacity:.82; margin:0}
.club__media{position:relative; align-self:stretch; min-height:320px;
  background:url("/static/img/churros.jpg") center/cover}
.club-wrap .luna{position:absolute; bottom:-42px; right:-34px; width:216px; height:auto; z-index:6; transform:rotate(8deg);
  filter:drop-shadow(0 4px 0 var(--creme)) drop-shadow(0 12px 18px rgba(1,28,14,.55))}

/* dessertladder (toetjes-club) */
.ladder{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; counter-reset:rung}
.ladder li{counter-increment:rung; display:flex; align-items:center; gap:20px;
  background:var(--creme-100); border:2.5px solid var(--ink); border-radius:14px; padding:16px 22px; box-shadow:var(--shadow) var(--groen)}
.ladder li::before{content:counter(rung); flex:0 0 auto; width:2.2em; height:2.2em; border-radius:50%;
  background:var(--rood); color:var(--creme); font-family:'Dela Gothic One',sans-serif; font-size:1.1rem;
  display:grid; place-content:center}
.ladder b{display:block; font-size:1.02rem; margin-bottom:2px}
.ladder span{font-size:.92rem; font-weight:600; color:#5a4a3e}

/* contact */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:stretch}
.info-card{background:var(--creme-100); border:2.5px solid var(--ink); border-radius:16px;
  padding:clamp(26px,4vw,36px); box-shadow:var(--shadow) var(--groen)}
.info-card h3{font-family:'Dela Gothic One',sans-serif; font-weight:400; font-size:1rem; margin:0 0 12px}
.info-card h3:not(:first-child){margin-top:26px}
.info-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-weight:700}
.info-card .hrs li{display:flex; justify-content:space-between; gap:18px; font-weight:600; font-variant-numeric:tabular-nums}
.map-ph{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center;
  min-height:220px; height:100%; background:var(--creme-300); border:2.5px solid var(--ink); border-radius:16px;
  box-shadow:var(--shadow) var(--rood); padding:32px; text-decoration:none; color:var(--ink); transition:transform .12s ease}
.map-ph:hover{transform:translate(-2px,-2px)}
.map-ph p{font-weight:600; margin:0; max-width:28ch}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* footer */
.foot{background:var(--groen-900); color:var(--creme); padding:clamp(56px,7vw,88px) 0 40px}
.foot__grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; margin-bottom:44px}
.foot img.mark{width:142px; margin-bottom:22px}
.foot h4{font-family:'Dela Gothic One',sans-serif; font-weight:400; font-size:1rem; margin:0 0 14px; color:var(--creme)}
.foot ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; font-weight:600}
.foot a{text-decoration:none} .foot a:hover{color:var(--rood)}
.foot .hours span{display:flex; justify-content:space-between; gap:18px; font-variant-numeric:tabular-nums}
.foot-cta{border-top:1px solid rgba(241,227,217,.2); padding-top:32px; display:flex; align-items:center;
  justify-content:space-between; gap:24px; flex-wrap:wrap}
.foot-cta .slogan{font-family:'Dela Gothic One',sans-serif; font-size:clamp(1.2rem,3vw,1.9rem); max-width:16ch; color:var(--creme)}
.legal{margin-top:40px; font-size:.82rem; font-weight:600; opacity:.72; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.legal img{height:30px; width:auto}

@media (max-width:860px){
  .story{grid-template-columns:1fr; gap:32px}
  .club{grid-template-columns:1fr}
  .club__media{min-height:260px; order:-1}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav-links{display:none}
  .foot__grid{grid-template-columns:1fr}
  .sticker{position:absolute; top:56px; right:4px; width:88px; height:88px; z-index:3}
}

/* motion reveal */
.reveal{opacity:0; transform:translateY(22px); animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
.reveal.d1{animation-delay:.08s}.reveal.d2{animation-delay:.18s}.reveal.d3{animation-delay:.28s}.reveal.d4{animation-delay:.38s}
@keyframes rise{to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .grid{animation:none}
  .slider{overflow-x:auto}
  .reveal{animation:none; opacity:1; transform:none}
  .btn:hover,.card:hover{transform:none}
}
:focus-visible{outline:3px solid var(--rood); outline-offset:3px; border-radius:4px}