@font-face{font-family:"Bricolage Grotesque";src:url(../assets/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
:root{
  --kraft:#f2ebdf;--kaart:#faf6ee;--tekst:#1f1a17;--gedempt:#5b524a;--teal:#0e5566;--teal-diep:#0a3f4d;--klimop:#2c6e45;--lijn:#d6cbb9;
  --gutter:clamp(16px,4vw,48px);--max:1360px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--kraft);color:var(--tekst);font-family:"Bricolage Grotesque",system-ui,sans-serif;font-optical-sizing:auto;font-size:1.0625rem;line-height:1.55;font-weight:400}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--tekst);color:#fff;padding:10px 14px;z-index:100;border-radius:4px}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:2px}
.over :focus-visible,.site-footer :focus-visible{outline-color:#f2ebdf}

/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:999px;font-weight:700;font-size:1rem;letter-spacing:.01em;text-decoration:none;border:2px solid var(--teal);background:var(--teal);color:#fff;transition:background .2s,color .2s}
.btn-solid{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-solid:hover{background:var(--teal-diep);border-color:var(--teal-diep)}
.btn-lijn{background:transparent;color:var(--teal)}
.btn-lijn:hover{background:var(--teal);color:#fff}
.btn-licht{background:var(--kraft);color:var(--teal);border-color:var(--kraft)}
.btn-licht:hover{background:transparent;color:var(--kraft)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--kraft);border-bottom:1px solid var(--lijn)}
.hdr{display:flex;align-items:center;gap:20px;min-height:80px;padding-block:8px}
.brand img{height:64px;width:auto}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;padding:8px 2px;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--teal)}
.hdr-bel{margin-left:0}
.burger{display:none;width:46px;height:46px;border:2px solid var(--teal);background:transparent;border-radius:999px;cursor:pointer;position:relative;padding:0}
.burger-lines,.burger-lines::before,.burger-lines::after{display:block;position:absolute;left:12px;width:18px;height:2px;background:var(--teal);content:""}
.burger-lines{top:20px}.burger-lines::before{top:-6px;left:0}.burger-lines::after{top:6px;left:0}

/* hero */
.hero{padding-top:clamp(16px,2vw,28px);padding-bottom:clamp(36px,5vw,64px)}
.fotowoord{overflow:hidden}
.fw-word{display:flex;justify-content:center;font-weight:800;font-stretch:75%;font-size:calc((100vw - 2 * var(--gutter)) / 2.5);line-height:.8;text-transform:uppercase;letter-spacing:-.01em;user-select:none}
.fw-l{display:block;overflow:hidden;padding-block:.03em}
.fw-l i{display:block;font-style:normal;background-color:#2b2622;background-size:auto 135%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero-kader{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);margin-top:clamp(20px,2.4vw,36px);border-top:1px solid var(--tekst);padding-top:clamp(18px,2vw,28px)}
h1{font-weight:800;font-stretch:80%;font-size:clamp(2.3rem,5.4vw,4.6rem);line-height:.98;letter-spacing:-.015em;text-wrap:balance}
.hero-intro{border-left:1px solid var(--tekst);padding-left:clamp(18px,2.4vw,36px)}
.lead{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.35;font-weight:500;max-width:30ch}
.uren{margin-top:12px;color:var(--gedempt);font-weight:600}
.knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* awards */
.awards{border-block:1px solid var(--tekst);background:var(--kraft)}
.awards .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 40px;padding-block:14px;font-weight:600;font-size:.98rem}

/* koppen met streep */
.streep{font-weight:800;font-stretch:85%;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.7rem,3.2vw,2.7rem);line-height:1.05;display:inline-block;padding-bottom:.28em;border-bottom:4px solid var(--teal);text-wrap:balance}
.streep-licht{border-color:var(--kraft)}

/* menu */
.menu{padding-block:clamp(48px,7vw,96px)}
.menu-kop{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(24px,3vw,40px)}
.menu-intro{max-width:44ch;color:var(--gedempt)}
.rust{overflow:hidden;border-radius:4px}
.rust-img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 55%}
.namen{display:flex;flex-wrap:wrap;justify-content:center;gap:2px clamp(14px,2.4vw,34px);padding:clamp(20px,3vw,36px) 0;font-weight:800;font-stretch:80%;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1.15rem,2.6vw,2.2rem);line-height:1.25;color:var(--teal);text-align:center}
.bc-raster{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--lijn);border-left:1px solid var(--lijn)}
.bc{background:var(--kaart);padding:20px 20px 24px;border-right:1px solid var(--lijn);border-bottom:1px solid var(--lijn);display:flex;flex-direction:column;gap:10px}
.bc.is-brabants{background:#fff}
.bc-label{align-self:flex-start;font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--klimop);padding:3px 9px;border-radius:2px}
.bc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.bc h3{font-size:1.12rem;font-weight:700;font-stretch:90%;text-transform:uppercase;letter-spacing:.06em;line-height:1.2}
.bc.is-brabants h3{color:var(--teal)}
.bc-prijs{font-size:.92rem;color:var(--gedempt);font-weight:600;white-space:nowrap}
.bc p{font-size:.95rem;line-height:1.45;color:var(--gedempt)}

/* lijsten */
.lijsten{columns:2;column-gap:clamp(32px,6vw,96px);margin-top:clamp(40px,6vw,72px)}
.pl{break-inside:avoid;margin-bottom:40px}
.pl h3{font-size:1.3rem;font-weight:800;font-stretch:85%;text-transform:uppercase;letter-spacing:.06em;padding-bottom:6px;border-bottom:4px solid var(--teal);margin-bottom:10px}
.pl-intro{font-size:.92rem;color:var(--gedempt);margin-bottom:6px}
.pl li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;padding:7px 0}
.pl-naam{font-weight:600}
.pl-punten{flex:1;min-width:16px;border-bottom:2px dotted #8a7f72;transform:translateY(-4px)}
.pl-prijs{font-weight:700;white-space:nowrap}
.pl-omschr{flex-basis:100%;font-size:.92rem;color:var(--gedempt);line-height:1.4}
.menu-voet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:8px;padding-top:28px;border-top:1px solid var(--tekst)}
.dranken{max-width:70ch;display:grid;gap:10px}
.allergeen{font-size:.92rem;color:var(--gedempt)}

/* catering */
.catering{background:var(--kaart);border-block:1px solid var(--lijn);padding-block:clamp(48px,7vw,88px)}
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,96px)}
.cat-grid p{margin-top:20px;max-width:46ch}
.cat-contact{font-weight:600}
.cat-contact a{color:var(--teal)}
.cat-lijst{columns:2;column-gap:32px;border-top:1px solid var(--tekst)}
.cat-lijst li{break-inside:avoid;padding:9px 0;border-bottom:1px solid var(--lijn);font-weight:600}

/* over ons */
.over{background:var(--teal);color:var(--kraft);padding-block:clamp(48px,7vw,96px)}
.over-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,6vw,88px);align-items:start}
.over-tekst p{margin-top:20px;max-width:56ch}
.over-tekst .streep{margin-bottom:4px}
.over-getal{display:flex;align-items:center;gap:22px;margin-top:28px!important}
.getal{font-weight:800;font-stretch:75%;font-size:clamp(6rem,14vw,11rem);line-height:.8;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.getal-tekst{font-weight:600;max-width:24ch;font-size:1.02rem;line-height:1.35}
.over-foto{overflow:hidden;border-radius:4px}
.over-img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tijdlijn{display:grid;grid-template-columns:repeat(5,1fr);gap:0 24px;margin-top:clamp(40px,5vw,64px);border-top:1px solid rgba(242,235,223,.6)}
.tijdlijn li{padding-top:16px;display:grid;gap:6px;align-content:start}
.tijdlijn b{font-size:1.9rem;font-weight:800;font-stretch:80%;line-height:1}
.tijdlijn span{font-size:.95rem;line-height:1.45}
.over-slot{margin-top:clamp(36px,5vw,56px);display:grid;gap:10px;justify-items:start}
.afsluiter{font-weight:800;font-stretch:85%;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.1}
.ondertekening{font-weight:500;margin-bottom:10px}
.volgt{font-weight:600;border-left:3px solid var(--kraft);padding-left:12px}

/* contact */
.contact{padding-block:clamp(48px,7vw,96px)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,96px)}
.uren-tabel{border-collapse:collapse;margin-top:24px;width:100%;max-width:440px}
.uren-tabel th,.uren-tabel td{text-align:left;padding:10px 0;border-bottom:1px solid var(--lijn);font-weight:500}
.uren-tabel th{font-weight:700;padding-right:20px}
.klein{margin-top:12px;color:var(--gedempt);font-size:.95rem}
.adres{font-style:normal;display:grid;gap:16px;align-content:start;padding-top:8px}
.adres-naam{font-weight:800;font-size:1.3rem}
.adres a{color:var(--teal);font-weight:600}
.adres .btn-lijn{color:var(--teal)}
.adres .btn-lijn:hover{color:#fff}
.tel{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;font-stretch:85%;text-decoration:none}
.adres .klein{margin-top:0}

/* footer */
.site-footer{background:#1f1a17;color:#f2ebdf;padding-block:40px}
.foot{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:20px 40px;align-items:center}
.foot img{height:96px;width:auto}
.foot a{color:#f2ebdf}
.copy{font-size:.92rem;opacity:.9}

/* mobiele balk */
.mbar{display:none}

@media (max-width:1100px){
  .bc-raster{grid-template-columns:repeat(2,1fr)}
  .tijdlijn{grid-template-columns:repeat(3,1fr);gap:24px}
  .foot{grid-template-columns:auto 1fr}
}
@media (max-width:860px){
  .hdr{gap:12px}
  .brand img{height:56px}
  .hdr-bel{margin-left:auto;min-height:42px;padding:0 16px}
  .hdr-nr{display:none}
  .burger{display:block}
  .js .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--kraft);border-bottom:1px solid var(--lijn);flex-direction:column;gap:0;padding:8px var(--gutter) 16px}
  .js .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--lijn)}
  .nav{margin-left:0}
  .hero-kader{grid-template-columns:1fr}
  .hero-intro{border-left:0;padding-left:0}
  .cat-grid,.contact-grid,.over-grid{grid-template-columns:1fr}
  .lijsten{columns:1}
  .tijdlijn{grid-template-columns:1fr;gap:0}
  .tijdlijn li{grid-template-columns:76px 1fr;padding:14px 0;border-bottom:1px solid rgba(242,235,223,.35)}
  .rust-img{aspect-ratio:16/10}
  .over-getal{flex-direction:column;align-items:flex-start;gap:12px}
  .foot{grid-template-columns:1fr}
  .js .mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:10px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--kraft);border-top:1px solid var(--lijn);transform:translateY(110%);transition:transform .25s}
  .js .mbar.show{transform:none}
  .mbar .btn{flex:1}
  .site-footer{padding-bottom:96px}
}
@media (max-width:560px){
  .bc-raster{grid-template-columns:1fr}
  .cat-lijst{columns:1}
  .awards .wrap{flex-direction:column}
  .fw-word{font-size:calc((100vw - 2 * var(--gutter)) / 2.5)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}