@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/cormorant-normal-1.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-italic-0.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/jost-normal-2.woff2") format("woff2"); }

:root {
  --ivoor: #f4efe7;
  --ivoor-2: #ebe4d8;
  --espresso: #1b1714;
  --kool: #26211d;
  --tekst: #3b342d;
  --brons: #a98655;
  --brons-licht: #cfae7e;
  --brons-donker: #7f6038;
  --lijn: rgba(59, 52, 45, .2);
  --lijn-licht: rgba(233, 226, 214, .2);
  --serif: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gutter: clamp(22px, 5.5vw, 72px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivoor); color: var(--tekst); font: 400 1.0625rem/1.8 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.2em; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.06; margin: 0; color: inherit; }
em { font-style: italic; }
h1 em, h2 em { color: var(--brons); }
.donker h2 em, .hero h1 em { color: var(--brons-licht); }
.skip { position: absolute; left: -999px; top: 0; background: #fff; color: #000; padding: 10px 14px; z-index: 200; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--brons); outline-offset: 4px; }
.wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Kleine label met lijn */
.boven { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font-size: .74rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--brons-donker); }
.boven.lijn::before { content: ""; width: 44px; height: 1px; background: currentColor; }
.donker .boven, .hero .boven { color: var(--brons-licht); }

/* Knoppen */
.knop { position: relative; display: inline-block; padding: 17px 34px; border: 1px solid var(--brons); background: var(--brons); color: #fff; font-size: .76rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; overflow: hidden; isolation: isolate; transition: color .35s var(--ease), border-color .35s var(--ease); }
.knop::before { content: ""; position: absolute; inset: 0; background: var(--espresso); transform: translateY(101%); transition: transform .45s var(--ease); z-index: -1; }
.knop:hover::before { transform: none; }
.knop:hover { border-color: var(--espresso); }
.donker .knop:hover::before, .hero .knop:hover::before, .kop .knop:hover::before { background: #fff; }
.donker .knop:hover, .hero .knop:hover, .kop .knop:hover { color: var(--espresso); border-color: #fff; }
.knop-licht { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.knop-klein { padding: 12px 22px; font-size: .7rem; }
.knoppen { display: flex; flex-wrap: wrap; gap: 14px; margin: 36px 0 0; }

/* Kop */
.kop { position: fixed; inset: 0 0 auto 0; z-index: 100; color: #f4efe7; transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.kop-in { display: flex; align-items: center; gap: 28px; min-height: 92px; transition: min-height .4s var(--ease); }
.kop.scrolled { background: rgba(27, 23, 20, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--lijn-licht); }
.kop.scrolled .kop-in { min-height: 70px; }
.merk { display: block; line-height: 0; }
.merk img { height: 58px; width: auto; transition: height .4s var(--ease); }
.kop.scrolled .merk img { height: 46px; }
.menu { display: flex; gap: clamp(18px, 2.6vw, 38px); margin-left: auto; align-items: center; }
.menu a { position: relative; font-size: .74rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; padding: 6px 0; white-space: nowrap; }
.menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--brons-licht); transition: right .4s var(--ease); }
.menu a:hover::after { right: 0; }
.menu-bel { display: none; }
.menuknop { display: none; }

/* Hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; background: var(--espresso); color: #f4efe7; overflow: hidden; }
.hero-beeld, .hero-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-beeld img { object-fit: cover; object-position: 55% 50%; transform-origin: 60% 55%; animation: zoom 26s var(--ease) both; }
@keyframes zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero-laag { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 17, 14, .55) 0%, rgba(20, 17, 14, .08) 30%, rgba(20, 17, 14, .55) 68%, rgba(20, 17, 14, .9) 100%); }
.hero-tekst { position: relative; padding-block: 160px clamp(72px, 11vh, 120px); }
.hero h1 { font-size: clamp(3rem, 8.6vw, 7.4rem); letter-spacing: -.015em; font-weight: 400; max-width: 11em; }
.lead { max-width: 32em; font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin: 26px 0 0; color: rgba(244, 239, 231, .88); }
.scrollteken { position: absolute; right: var(--gutter); bottom: 34px; width: 1px; height: 74px; background: rgba(244, 239, 231, .3); overflow: hidden; }
.scrollteken span { position: absolute; left: 0; top: 0; width: 1px; height: 28px; background: var(--brons-licht); animation: druppel 2.4s var(--ease) infinite; }
@keyframes druppel { 0% { transform: translateY(-30px); } 100% { transform: translateY(80px); } }
.hero-tekst > * { opacity: 0; transform: translateY(26px); animation: op 1.1s var(--ease) forwards; }
.hero-tekst > :nth-child(1) { animation-delay: .25s; }
.hero-tekst > :nth-child(2) { animation-delay: .4s; }
.hero-tekst > :nth-child(3) { animation-delay: .6s; }
.hero-tekst > :nth-child(4) { animation-delay: .8s; }
@keyframes op { to { opacity: 1; transform: none; } }

/* Feitenbalk */
.feiten { background: var(--espresso); color: #e9e2d6; border-top: 1px solid var(--lijn-licht); }
.feiten-in { display: grid; grid-template-columns: repeat(3, 1fr); }
.feiten p { margin: 0; padding: 28px 24px; text-align: center; border-left: 1px solid var(--lijn-licht); }
.feiten p:first-child { border-left: 0; }
.feiten strong { display: block; font: 400 1.35rem/1.2 var(--serif); color: #fff; letter-spacing: .02em; }
.feiten span { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brons-licht); }

/* Blokken */
.blok { padding-block: clamp(84px, 12vw, 168px); }
.donker { background: var(--kool); color: #e4dccd; }
h2 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); margin-bottom: 30px; letter-spacing: -.01em; }
.twee { display: grid; grid-template-columns: 1fr; gap: clamp(44px, 7vw, 110px); align-items: center; }
.tekst { max-width: 36rem; }
.groot { font: 400 clamp(1.3rem, 2.2vw, 1.65rem)/1.5 var(--serif); color: var(--espresso); }
.kader { position: relative; }
.kader img, .plek { width: 100%; height: auto; position: relative; z-index: 1; }
.kader img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; }
.kader::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1px solid var(--brons); z-index: 0; transition: inset .6s var(--ease); }
.kader:hover::before { inset: 14px -14px -14px 14px; }
.omgekeerd .kader::before { inset: 22px 22px -22px -22px; }
.plek { aspect-ratio: 4 / 5; background: linear-gradient(160deg, #e5dccd, #cdbfa8); }
.handtekening { margin: 34px 0 0; font: italic 400 2.4rem/1 var(--serif); color: var(--espresso); }
.handtekening small { display: block; margin-top: 8px; font: 500 .7rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--brons-donker); }
.beoordeling { display: inline-flex; align-items: center; gap: 18px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--lijn); font-size: .85rem; line-height: 1.5; }
.beoordeling .cijfer { font: 400 3.2rem/1 var(--serif); color: var(--espresso); }
.ster { color: var(--brons); letter-spacing: 3px; }
.beoordeling:hover { color: var(--brons-donker); }

/* Editorial beeld */
.editorial { padding-bottom: clamp(84px, 12vw, 168px); }
.editorial-in { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 3vw, 40px); align-items: end; }
.editorial img { width: 100%; height: 100%; object-fit: cover; }
.ed-breed img { aspect-ratio: 3 / 2; }
.ed-smal img { aspect-ratio: 3 / 4; }

/* Prijzen */
.kopregel { display: grid; gap: 8px 60px; align-items: end; margin-bottom: clamp(44px, 6vw, 84px); }
.intro { max-width: 28rem; margin: 0 0 30px; color: rgba(228, 220, 205, .78); }
.prijsraster { display: grid; grid-template-columns: 1fr; gap: 64px 96px; counter-reset: cat; }
.cat { counter-increment: cat; }
.cat h3 { display: flex; align-items: baseline; gap: 16px; font-size: 1.9rem; color: var(--brons-licht); padding-bottom: 16px; border-bottom: 1px solid var(--lijn-licht); margin-bottom: 10px; }
.cat h3::before { content: counter(cat, decimal-leading-zero); font: 500 .72rem var(--sans); letter-spacing: .22em; color: rgba(228, 220, 205, .5); }
.cat ul { list-style: none; margin: 0; padding: 0; }
.cat li { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; line-height: 1.4; transition: padding .35s var(--ease); }
.cat li:hover { padding-left: 8px; }
.naam { color: #f1ebe0; }
.naam small { display: block; margin-top: 3px; font-size: .82rem; color: rgba(228, 220, 205, .55); }
.punten { flex: 1; min-width: 16px; border-bottom: 1px dotted rgba(228, 220, 205, .28); transform: translateY(-5px); }
.bedrag { white-space: nowrap; font: 500 1.4rem/1 var(--serif); color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.bedrag small { font: 500 .66rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--brons-licht); margin-right: 4px; }
.prijs-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(56px, 8vw, 104px); padding-top: 38px; border-top: 1px solid var(--lijn-licht); }
.prijs-cta p { margin: 0; font: italic 400 clamp(1.4rem, 2.6vw, 2rem)/1.3 var(--serif); max-width: 30rem; }

/* Producten */
.cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 44px 0 0; padding-top: 34px; border-top: 1px solid var(--lijn); }
.cijfers dt { font: 400 clamp(2rem, 3.6vw, 2.8rem)/1 var(--serif); color: var(--brons-donker); }
.cijfers dd { margin: 8px 0 0; font-size: .82rem; line-height: 1.5; }

/* Contact */
.contact-kop { text-align: center; max-width: 52rem; margin-inline: auto; }
.contact-kop .boven { justify-content: center; }
.grootnummer { display: inline-block; margin: 6px 0 4px; font: 400 clamp(2.6rem, 8vw, 5.2rem)/1.1 var(--serif); color: #fff; letter-spacing: .01em; border-bottom: 1px solid var(--brons); padding-bottom: 8px; transition: color .3s; }
.grootnummer:hover { color: var(--brons-licht); }
.contact .knoppen { justify-content: center; }
.klein { margin: 28px 0 0; font-size: .95rem; color: rgba(228, 220, 205, .75); }
.contact-raster { display: grid; grid-template-columns: 1fr; gap: 44px; margin-top: clamp(64px, 9vw, 120px); padding-top: 48px; border-top: 1px solid var(--lijn-licht); }
.contact-raster h3 { font-size: 1.5rem; color: var(--brons-licht); margin-bottom: 14px; }
.contact-raster p { margin: 0 0 8px; }
.lijnlink { border-bottom: 1px solid var(--brons); padding-bottom: 2px; transition: color .3s, border-color .3s; }
.lijnlink:hover { color: var(--brons-licht); border-color: var(--brons-licht); }
.uren { border-collapse: collapse; }
.uren th { text-align: left; font-weight: 400; padding: 3px 28px 3px 0; color: rgba(228, 220, 205, .7); }
.uren td { padding: 3px 0; }
.gebouwband { margin-top: clamp(64px, 9vw, 120px); }
.gebouwband img { width: 100%; max-height: 66vh; object-fit: cover; object-position: 50% 60%; filter: saturate(.92); }

/* Voet */
.voet { background: var(--espresso); color: #b7ae9f; padding: 64px 0 40px; text-align: center; }
.voet-in { display: grid; gap: 28px; justify-items: center; }
.voet-merk { margin: 0; }
.voet-merk img { height: 84px; width: auto; }
.voet-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; }
.voet-menu a { font-size: .72rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.voet-menu a:hover { color: var(--brons-licht); }
.voet-klein { margin: 12px 0 0; font-size: .82rem; opacity: .75; }

/* Vaste balk, telefoon */
.vast-balk { display: none; }

/* Onthullen */
.js [data-fade] { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-fade].in { opacity: 1; transform: none; }

@media (min-width: 760px) {
  .twee { grid-template-columns: 5fr 6fr; }
  .editorial-in { grid-template-columns: 7fr 4fr; }
  .kopregel { grid-template-columns: 1fr auto; }
  .intro { margin-bottom: 8px; }
  .prijsraster { display: block; column-count: 2; column-gap: 96px; }
  .cat { break-inside: avoid; margin-bottom: 64px; }
  .contact-raster { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 899px) {
  .kop-in { min-height: 72px; }
  .merk img { height: 48px; }
  .kop-knop { display: none; }
  .menuknop { display: inline-block; margin-left: auto; background: none; color: inherit; border: 1px solid rgba(244, 239, 231, .45); padding: 10px 18px; font: 500 .72rem var(--sans); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 6px var(--gutter) 26px; background: rgba(27, 23, 20, .98); border-top: 1px solid var(--lijn-licht); max-height: calc(100vh - 72px); overflow: auto; }
  .menu-open .menu { display: flex; }
  .menu a { padding: 18px 0; font-size: .85rem; border-bottom: 1px solid var(--lijn-licht); }
  .menu a::after { display: none; }
  .menu-bel { display: block; color: var(--brons-licht); border-bottom: 0 !important; }
  .menu-open .kop { background: rgba(27, 23, 20, .98); }
}
@media (max-width: 759px) {
  body { padding-bottom: 68px; }
  .hero-tekst { padding-bottom: 64px; }
  .hero h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .knoppen .knop { flex: 1 1 100%; text-align: center; }
  .feiten-in { grid-template-columns: 1fr; }
  .feiten p { padding: 16px 0; border-left: 0; border-top: 1px solid var(--lijn-licht); }
  .feiten p:first-child { border-top: 0; }
  .kader::before { inset: 14px -10px -14px 14px; }
  .omgekeerd .kader::before { inset: 14px 14px -14px -10px; }
  .cijfers { grid-template-columns: 1fr; gap: 22px; }
  .cijfers div { display: flex; align-items: baseline; gap: 16px; }
  .cijfers dd { margin: 0; }
  .scrollteken { display: none; }
  .prijsraster { gap: 48px; }
  .vast-balk { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding-bottom: env(safe-area-inset-bottom); background: var(--espresso); border-top: 1px solid var(--lijn-licht); }
  .vast-balk a { padding: 18px 10px; text-align: center; color: #f4efe7; font-size: .76rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
  .vast-balk a { display: block; background: var(--brons); }
  .wa-knop { bottom: calc(86px + env(safe-area-inset-bottom)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-beeld img, .scrollteken span { animation: none; }
  .hero-tekst > * { animation: none; opacity: 1; transform: none; }
  .js [data-fade] { opacity: 1; transform: none; transition: none; }
  .knop::before { transition: none; }
}
.hero .boven { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.grootnummer, .cijfers dt, .beoordeling .cijfer, .feiten strong { font-variant-numeric: lining-nums; }

/* WhatsApp-tab, altijd zichtbaar rechtsonder tegen de rand */
.wa-knop { position: fixed; right: 0; bottom: 32px; z-index: 95; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 8px 0 0 8px; background: #25d366; color: #fff; box-shadow: -2px 0 12px rgba(0, 0, 0, .18); transition: width .25s var(--ease), box-shadow .25s, background .25s; }
.wa-knop svg { width: 24px; height: 24px; flex: none; }
.wa-knop:hover, .wa-knop:focus-visible { width: 56px; background: #1ebe5a; box-shadow: -3px 0 16px rgba(0, 0, 0, .28); }
.wa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .wa-knop { transition: none; } }