:root{
  /* --- echte merkkleuren van kellyrekveld.nl --- */
  --paper: #F3EEE4;
  --cream: #E7DECC;
  --cream-deep: #E0D5C3;
  --tan: #B6986F;
  --tan-deep: #93764F;
  --taupe: #B8AFA4;
  --mauve: #AE9C97;
  --sage: #838970;
  --ink: #3C332C;
  --ink-soft: #7C6E67;
  --ink-faint: #9C8F82;
  --line: rgba(60,51,44,0.14);
  --serif: "Fraunces", serif;
  --sans: "Inter", sans-serif;
  --mono: "JetBrains Mono", monospace;
  --max: 1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; background:var(--paper); }
body{
  background:var(--paper);
  color:var(--ink-soft);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--tan); color:#fff; }

body::before{
  content:"";
  position:fixed; inset:0;
  z-index:999; pointer-events:none;
  opacity:0.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
button{ font-family:inherit; -webkit-tap-highlight-color:transparent; }
img{ display:block; max-width:100%; }

.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--tan-deep);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:24px; height:1px; background:var(--tan-deep); display:inline-block; }

h1,h2,h3{ font-family:var(--serif); font-weight:500; letter-spacing:-0.01em; color:var(--ink); }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; color:#fff;
  transition:background .4s ease, padding .4s ease, border-color .4s ease, color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(243,238,228,0.92);
  backdrop-filter:blur(10px);
  padding:12px 32px;
  border-color:var(--line);
  color:var(--ink);
}
.nav__brand{ display:flex; align-items:center; gap:10px; }
.nav__logo{ height:64px; width:auto; display:block; transition:height .3s ease; }
.nav.solid .nav__logo{ height:52px; }
.nav__logo--dark{ display:none; }
.nav.solid .nav__logo--light{ display:none; }
.nav.solid .nav__logo--dark{ display:block; }
.nav__links{
  display:flex; gap:20px; font-size:11.5px;
  letter-spacing:0.05em; text-transform:uppercase; font-family:var(--mono);
}
.nav__links a{ position:relative; opacity:0.8; transition:opacity .25s ease; padding-bottom:4px; }
.nav__links a:hover{ opacity:1; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:currentColor; transition:width .25s ease;
}
.nav__links a:hover::after{ width:100%; }
.nav__links a.is-active{ opacity:1; }
.nav__links a.is-active::after{ width:100%; }

.nav__item{ position:relative; display:inline-flex; }
.nav__caret{ font-size:10px; margin-left:3px; opacity:0.8; display:inline-block; }
.nav__dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:8px 0; min-width:170px;
  box-shadow:0 16px 34px rgba(60,51,44,0.16);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  display:flex; flex-direction:column;
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown{
  opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav__dropdown a{
  padding:10px 20px; color:var(--ink) !important; opacity:1 !important;
  text-transform:none; font-family:var(--sans); font-size:13px; letter-spacing:0.01em;
}
.nav__dropdown a::after{ display:none; }
.nav__dropdown a:hover{ background:var(--cream); }

.scrollbar{
  position:fixed; top:0; left:0; height:2px; z-index:210;
  background:linear-gradient(90deg,var(--tan),var(--sage));
  width:0%;
}

/* ---------- HERO (homepage) ---------- */
.hero{ position:relative; height:50vh; height:50svh; min-height:340px; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); }
.hero__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
  filter:saturate(0.95) contrast(1.02); transform:scale(1.03);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(46,38,31,0.45) 0%, rgba(46,38,31,0.08) 30%, rgba(46,38,31,0.15) 55%, rgba(46,38,31,0.88) 100%);
}
.hero__content{ position:relative; z-index:2; padding:0 32px 76px; max-width:var(--max); margin:0 auto; width:100%; }
.hero__eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--tan); margin-bottom:22px; display:flex; align-items:center; gap:10px;
}
.hero__title{ font-size:clamp(40px, 7vw, 92px); line-height:0.98; max-width:820px; color:#fff; }
.hero__title .i{ font-style:italic; color:var(--tan); }
.hero__sub{ margin-top:22px; max-width:460px; font-size:16px; color:var(--cream-deep); font-weight:300; }
.hero__scroll,
.pagehero__scroll{
  position:absolute; right:32px; bottom:36px; z-index:2; writing-mode:vertical-rl;
  font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--cream-deep);
  display:flex; align-items:center; gap:12px;
}
.hero__scroll::after,
.pagehero__scroll::after{ content:""; width:1px; height:44px; background:var(--cream-deep); animation:scrollpulse 2s ease-in-out infinite; }
/* Op een telefoon botst de aanduiding met de tekst in de omslag, en is scrollen
   sowieso vanzelfsprekend. */
@media (max-width:700px){
  .hero__scroll, .pagehero__scroll{ display:none; }
}
@keyframes scrollpulse{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }

/* ---------- PAGEHERO (detailpagina's) ---------- */
.pagehero{ position:relative; min-height:52vh; display:flex; align-items:flex-end; overflow:hidden; }
.pagehero__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 32%;
  filter:saturate(0.95) contrast(1.02);
}
.pagehero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(46,38,31,0.4) 0%, rgba(46,38,31,0.12) 40%, rgba(46,38,31,0.82) 100%);
}
.pagehero__content{ position:relative; z-index:2; padding:0 32px 46px; max-width:var(--max); margin:0 auto; width:100%; }
.pagehero__title{ font-size:clamp(34px,6vw,64px); color:#fff; }
.pagehero__back{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--cream-deep); opacity:.85; border-bottom:1px solid rgba(231,222,204,0.4); padding-bottom:3px;
}
.pagehero__back:hover{ opacity:1; }

/* variant: toon de volledige (staande) foto, niet uitgesneden */
.pagehero--contain{ background:var(--ink); min-height:72vh; }
.pagehero--contain .pagehero__img--blur{
  object-fit:cover; filter:blur(35px) brightness(0.65) saturate(1.15); transform:scale(1.2);
}
.pagehero--contain .pagehero__img--sharp{
  object-fit:contain; padding:0;
}

/* ---------- FILM DIVIDER ---------- */
/* Filmstrook met randcodering: twee rijen perforaties met de opdruk ertussen,
   zoals op echte 35mm-film. Het perforatiepatroon is een herhalende SVG, dus de
   strook vult elke schermbreedte zonder dat er iets in de HTML vastligt.
   Let op: de gatkleur staat in de SVG hardgecodeerd op #F3EEE4 (--paper); een
   CSS-variabele werkt niet binnen een data-URI. Wijzigt het palet, dan moet die
   waarde hier mee. */
.filmdivider{
  height:88px; overflow:hidden;
  display:flex; align-items:center;
  background-color:var(--cream-deep);
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2730%27 height=%2788%27%3E%3Crect x=%278%27 y=%2711%27 width=%2714%27 height=%2717%27 rx=%274%27 fill=%27%23F3EEE4%27/%3E%3Crect x=%278%27 y=%2760%27 width=%2714%27 height=%2717%27 rx=%274%27 fill=%27%23F3EEE4%27/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:30px 88px;
  background-position:center;
}
.filmdivider__code{
  white-space:nowrap;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:0.22em; color:var(--tan); opacity:0.85;
  user-select:none;
}

/* ---------- CHAPTERS (homepage teasers) ---------- */
.chapter{ background:var(--paper); padding:100px 0; scroll-margin-top:90px; }
.chapter--alt{ background:var(--cream); }
.chapter__grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center; }
.chapter--reverse .chapter__grid{ grid-template-columns:1.1fr 0.9fr; }

.chapter__title{ font-size:clamp(30px,4vw,46px); margin-bottom:22px; }
.chapter__text p{ color:var(--ink-soft); font-size:15.5px; max-width:480px; margin-bottom:16px; }
.chapter__cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:12px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--tan-deep); border-bottom:1px solid var(--tan-deep); padding-bottom:6px; transition:gap .25s ease;
}
.chapter__cta:hover{ gap:16px; }

.chapter__media{ position:relative; }
/* homepage-teaserfoto is zelf een link naar de categoriepagina */
.chapter__medialink{ display:block; border-radius:12px; }
.chapter__medialink:focus-visible{ outline:2px solid var(--tan-deep); outline-offset:4px; }
.duo{ display:grid; grid-template-columns:1.2fr 0.9fr; gap:18px; }
.duo .ph:first-child{ margin-top:56px; }
.ph{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:3/4; background:var(--cream-deep); }
.ph.wide{ aspect-ratio:4/3; }
.ph img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); filter:saturate(0.96); }
.ph:hover img{ transform:scale(1.045); }
.exif{
  position:absolute; left:10px; bottom:10px; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:0.06em; color:#fff;
  background:rgba(46,38,31,0.6); backdrop-filter:blur(4px); padding:5px 9px; border-radius:2px;
  opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease;
}
.ph:hover .exif{ opacity:1; transform:translateY(0); }

/* ---------- DETAIL (categorie-pagina's) ---------- */
.detail{ padding:90px 0 110px; background:var(--paper); }
.detail--alt{ background:var(--cream); }
.detail__intro{ max-width:640px; margin-bottom:20px; }
.detail__intro p{ color:var(--ink-soft); font-size:16px; margin-bottom:16px; }
.detail__intro.textpanel{
  background:var(--tan); border-radius:8px; padding:36px 40px; max-width:none;
}
.detail__intro.textpanel p{ color:rgba(255,255,255,0.94); font-weight:400; line-height:1.65; }
.detail__intro.textpanel p:last-child{ margin-bottom:0; }
.detail__intro.textpanel a{ color:#fff; text-decoration:underline; }
.detail__intro.textpanel strong{ color:#fff; }
.detail__intro.textpanel .fact{
  display:block; background:var(--paper); color:var(--ink);
  font-size:16.5px; font-weight:600; line-height:1.5;
  padding:16px 20px; border-radius:8px; margin:6px 0 16px;
}
.detail__intro.textpanel .fact strong{ color:var(--ink); }
.detail__intro.textpanel .fact a{ color:var(--tan-deep); text-decoration:underline; }
.textpanel-cta{
  display:inline-block; margin-top:8px;
  font-family:var(--sans); font-size:15.5px; font-weight:400;
  color:#fff; text-decoration:none;
}
.textpanel-cta:hover{ text-decoration:underline; }
.detail__pkgrow{ display:grid; grid-template-columns:1fr 1.25fr; gap:48px; align-items:center; margin-bottom:10px; }
.detail__pkgrow--reverse{ grid-template-columns:1.25fr 1fr; }
.detail__pkgrow .detail__intro{ margin-bottom:0; }
.detail__pkgrow--package{ grid-template-columns:1.35fr 1fr; }
.detail__pkgrow--package .package{ max-width:380px; justify-self:start; width:100%; }
.detail__gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:60px; }
.detail__gallery .ph{ aspect-ratio:3/4; }
.detail__caption{ margin-top:56px; font-family:var(--mono); font-size:12px; color:var(--ink-faint); letter-spacing:0.04em; }

/* ---------- PRICE BAR (los pakket) ---------- */
.pricebar{
  margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
  padding:18px 22px; border:1px solid var(--line); border-radius:8px; background:var(--cream-deep);
}
.pricebar__price{ font-family:var(--serif); font-size:26px; color:var(--ink); white-space:nowrap; }
.pricebar__list{ display:flex; flex-wrap:wrap; gap:8px 16px; font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); letter-spacing:0.02em; }

/* ---------- PACKAGES (grid van 3) ---------- */
.packages{ margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.package{ border:1px solid var(--line); border-radius:6px; padding:32px 26px; background:var(--paper); transition:border-color .3s ease, transform .3s ease; }
.package:hover{ border-color:var(--tan); transform:translateY(-4px); }
.package__name{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--tan-deep); margin-bottom:14px; }
.package__price{ font-family:var(--serif); font-size:34px; margin-bottom:18px; color:var(--ink); }
.package__price span{ font-size:15px; color:var(--ink-faint); font-family:var(--sans); }
.package ul{ list-style:none; }
.package li{ font-size:13.5px; color:var(--ink-soft); padding:8px 0; border-top:1px solid var(--line); }
.package li:first-child{ border-top:none; }
.package__note{ margin-top:34px; font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); line-height:1.7; grid-column:1/-1; }

/* ---------- STRIP (bv. ouder-kind highlight) ---------- */
.strip{
  margin-top:40px; display:grid; grid-template-columns:0.5fr 1.5fr; gap:30px;
  align-items:center; border:1px solid var(--line); border-radius:8px; background:var(--paper);
  padding:18px;
}
.strip__img{ aspect-ratio:4/3; border-radius:10px; overflow:hidden; }
.strip__img img{ width:100%; height:100%; object-fit:cover; }
.strip__body{ padding:0; }
.strip__eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--sage); margin-bottom:8px; }
.strip__title{ font-size:20px; margin-bottom:8px; }
.strip__text{ font-size:14px; color:var(--ink-soft); max-width:460px; margin-bottom:10px; }
.strip__price{ font-family:var(--mono); font-size:13px; color:var(--ink); }
.strip__cta{
  display:inline-flex; margin-top:10px; font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--tan-deep); border-bottom:1px solid var(--tan-deep); padding-bottom:3px;
}

/* ---------- OVERIGE (3 kaarten) ---------- */
.overige-grid{ margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.overige-grid--4{ grid-template-columns:repeat(4,1fr); }
.overige-card{ border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--paper); transition:transform .3s ease, border-color .3s ease; }
.overige-card:hover{ transform:translateY(-4px); border-color:var(--tan); }
.overige-card__img{ aspect-ratio:4/5; }
.overige-card__img img{ width:100%; height:100%; object-fit:cover; }
.overige-card__body{ padding:22px 22px 26px; }
.overige-card__name{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--tan-deep); margin-bottom:8px; }
.overige-card__title{ font-size:19px; margin-bottom:10px; }
.overige-card__text{ font-size:13.5px; color:var(--ink-soft); margin-bottom:14px; }
.overige-card__price{ font-family:var(--serif); font-size:20px; color:var(--ink); }
.overige-card__price span{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); }

/* ---------- REVIEWS (Google, via Trustindex) ---------- */
.reviews{ padding:100px 0; background:var(--cream); position:relative; }
.reviews__head{ margin-bottom:48px; text-align:center; }
.reviews__title{ font-size:clamp(28px,3.6vw,40px); margin-top:14px; }

.reviews__slider{ position:relative; }
.reviews__track{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:4px 4px 10px;
  -ms-overflow-style:none; scrollbar-width:none;
}
.reviews__track::-webkit-scrollbar{ display:none; }
.review-card{
  background:#F7F4EE; border-radius:14px; padding:30px 28px;
  flex:0 0 calc(33.333% - 15px); scroll-snap-align:start;
  text-align:center; box-shadow:0 2px 10px rgba(60,51,44,0.05);
}
.review-card__head{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:10px; }
.review-avatar{
  position:relative; width:52px; height:52px; border-radius:50%; background:var(--tan); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:17px; flex-shrink:0;
  overflow:visible;
}
.review-avatar img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.review-avatar__badge{
  position:absolute; right:-3px; bottom:-3px; width:20px; height:20px; border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #F7F4EE;
}
.review-avatar__badge svg{ width:13px; height:13px; }
.review-card__name{ font-size:14.5px; color:var(--ink); font-weight:600; }
.review-card__date{ font-size:11.5px; color:var(--ink-faint); font-family:var(--mono); }
.review-stars{
  display:flex; align-items:center; justify-content:center; gap:2px;
  color:#F2B01E; font-size:15px; margin:2px 0 14px;
}
.review-stars .verified{
  width:16px; height:16px; border-radius:50%; background:#4285F4; margin-left:5px;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.review-stars .verified svg{ width:9px; height:9px; }
.review-card__text{
  font-size:13.5px; color:var(--ink-soft); line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.review-card__text.is-open{ -webkit-line-clamp:unset; overflow:visible; }
.review-readmore{
  display:inline-block; margin-top:10px; font-family:var(--mono); font-size:11px;
  color:var(--ink-faint); text-decoration:underline; cursor:pointer; background:none; border:none;
}
.reviews__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--ink-faint); transition:color .2s ease;
}
.reviews__arrow:hover{ color:var(--tan-deep); }
.reviews__arrow svg{ width:22px; height:22px; }
.reviews__arrow--prev{ left:-46px; }
.reviews__arrow--next{ right:-46px; }
.reviews__source{ margin-top:40px; font-family:var(--mono); font-size:11px; color:var(--ink-faint); text-align:center; letter-spacing:0.04em; }

/* ---------- ABOUT ---------- */
.about{ background:var(--cream); padding:110px 0; }
.about__grid{ display:grid; grid-template-columns:0.75fr 1.25fr; gap:70px; align-items:start; }
.about__portrait{ position:relative; }
.about__portrait .ph{ aspect-ratio:3/4; }
.about__portrait .ph.small{ position:absolute; width:46%; right:-14%; bottom:-12%; border:6px solid var(--cream); box-shadow:0 20px 50px rgba(60,51,44,0.18); }
.about__title{ font-size:clamp(30px,4vw,46px); margin-bottom:24px; }
.about__text p{ color:var(--ink-soft); font-size:15.5px; max-width:560px; margin-bottom:16px; }

.facts{ margin-top:40px; display:flex; flex-wrap:wrap; gap:10px; }
.facts span{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.04em; padding:9px 16px 9px 12px;
  border:1px solid var(--line); border-radius:30px; color:var(--ink-soft); background:var(--paper);
  transition:border-color .2s ease, transform .2s ease;
}
.facts span:hover{ border-color:var(--tan); transform:translateY(-2px); }
.facts span svg{ width:16px; height:16px; color:var(--tan-deep); flex-shrink:0; }
.facts span b{ color:var(--tan-deep); font-weight:500; }

/* ---------- 404 ---------- */
.notfound{ padding:170px 0 110px; background:var(--paper); }
.notfound__inner{ text-align:center; max-width:720px; }
.notfound__code{
  font-family:var(--mono); font-size:12px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--tan-deep); margin-bottom:22px;
}
.notfound__title{ font-size:clamp(34px,6vw,64px); margin-bottom:18px; }
.notfound__title .i{ font-style:italic; font-weight:400; color:var(--tan-deep); }
.notfound__text{ color:var(--ink-soft); font-size:16px; margin:0 auto 40px; max-width:440px; }
.notfound__links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; margin-bottom:44px;
}
.notfound__links a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--line); border-radius:100px; padding:9px 16px;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.notfound__links a:hover{ border-color:var(--tan); color:var(--ink); background:var(--cream); }
.notfound .chapter__cta{ justify-content:center; }

/* ---------- CONTACT ---------- */
.contact{ padding:120px 0 90px; background:var(--paper); text-align:center; }
.contact--full{ padding-top:150px; }
.contact__eyebrow{ justify-content:center; }
.contact__title{ font-size:clamp(34px,6vw,72px); margin:22px auto 18px; max-width:780px; }
.contact__note{ color:var(--ink-soft); max-width:460px; margin:0 auto 40px; font-size:15px; }
.contact__mail{
  display:inline-block; font-family:var(--serif); font-style:italic; font-size:clamp(22px,4vw,34px);
  color:var(--tan-deep); border-bottom:1px solid var(--tan-deep); padding-bottom:8px;
}
.contact__gift{ margin-top:34px; font-family:var(--mono); font-size:12px; color:var(--ink-faint); letter-spacing:0.04em; }
.contact__extras{ margin-top:14px; font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); letter-spacing:0.02em; }
.contact__cta{
  display:inline-flex; margin-top:36px; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:#fff; background:var(--tan-deep); padding:15px 28px; border-radius:30px; transition:background .25s ease;
}
.contact__cta:hover{ background:var(--ink); }
.socials{ display:flex; justify-content:center; gap:26px; margin-top:56px; font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; }
.socials a{ color:var(--ink-soft); border-bottom:1px solid transparent; padding-bottom:4px; transition:.25s; }
.socials a:hover{ color:var(--tan-deep); border-color:var(--tan-deep); }

/* ---------- KLANTGALERIJ (afgeschermde fotogalerij per klant) ---------- */
body.galerij{ background:#fff; }

/* omslag */
.gal__cover{ position:relative; height:100vh; height:100dvh; min-height:520px; overflow:hidden; }
.gal__coverimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* De foto blijft de foto: alleen een licht verloop aan de randen, geen
   verdonkering over het hele beeld. Leesbaarheid komt van de schaduw direct om
   de letters heen (zie .gal__title en verder), die alleen daar werkt en het
   beeld verder met rust laat. */
.gal__cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,23,18,0.34) 0%, rgba(28,23,18,0.12) 38%, rgba(28,23,18,0.46) 100%);
}
/* --tekst-onder bepaalt hoe ver de titel boven de onderrand blijft. Eén waarde,
   dus dit is de plek om de hoogte van het tekstblok bij te stellen. Het logo
   blijft bovenin staan; de titel, datum en knop worden door de marge hieronder
   naar beneden geduwd in plaats van gecentreerd. */
.gal__cover{ --tekst-onder:9vh; --rand-inspring:clamp(12px,2.2vw,28px); }
.gal__coverinner{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center;
  padding:40px 32px var(--tekst-onder);
}
/* Dunne kaderlijn, per galerij aan of uit te zetten in het beheer.
   Alleen wit is te weinig: op een lichte foto verdwijnt een haarlijn volledig.
   De zachte donkere gloed eromheen geeft hem houvast, zonder dat je die als
   schaduw herkent. */
.gal__cover--rand .gal__coverinner::before{
  content:""; position:absolute; inset:var(--rand-inspring);
  border:1px solid rgba(255,255,255,0.9); pointer-events:none;
  /* Een witte lijn op een witte foto blijft onzichtbaar, hoe dekkend ook. De
     eerste schaduw legt er een haarscherpe donkere rand tegenaan zodat de lijn
     altijd ergens tegen afsteekt; de andere twee maken die overgang zacht. */
  box-shadow:
    0 0 0 1px rgba(28,23,18,0.20),
    0 0 12px rgba(28,23,18,0.28),
    inset 0 0 12px rgba(28,23,18,0.20);
}
/* Het logo is een witte PNG; een schaduw houdt hem los van een lichte foto. */
.gal__logo{
  width:clamp(96px,11vw,128px); opacity:0.95;
  margin-top:clamp(16px,7vh,72px); margin-bottom:auto;
  filter:drop-shadow(0 1px 10px rgba(0,0,0,0.45));
}
.gal__title{
  font-family:var(--serif); font-weight:400; color:#fff;
  font-size:clamp(40px,7vw,86px); line-height:1.05; letter-spacing:-0.015em;
  text-shadow:0 1px 3px rgba(0,0,0,0.34), 0 2px 30px rgba(0,0,0,0.28);
}
.gal__date{
  font-family:var(--mono); font-size:12px; letter-spacing:0.24em; text-transform:uppercase;
  color:#fff; margin-top:20px;
  text-shadow:0 1px 3px rgba(0,0,0,0.5);
}
/* Geen tweede auto-marge hier: de vrije ruimte hoort helemaal boven de titel te
   zitten (via .gal__logo), anders komt het tekstblok weer in het midden uit. */
.gal__enter{
  margin-top:34px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:#fff; border-bottom:1px solid rgba(255,255,255,0.75); padding-bottom:6px;
  text-shadow:0 1px 3px rgba(0,0,0,0.5);
  transition:border-color .25s ease, opacity .25s ease;
}
.gal__enter:hover{ border-color:#fff; opacity:0.82; }

/* balk */
.gal__bar{
  position:sticky; top:0; z-index:120;
  display:flex; align-items:center; gap:28px;
  padding:0 26px; height:62px;
  background:rgba(255,255,255,0.96); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.gal__barname{ display:flex; flex-direction:column; line-height:1.25; flex-shrink:0; }
.gal__barname strong{ font-family:var(--serif); font-weight:500; font-size:15px; color:var(--ink); }
.gal__barname span{ font-family:var(--mono); font-size:9px; letter-spacing:0.16em; color:var(--ink-faint); }
.gal__actions{ display:flex; gap:6px; margin-left:auto; }
.gal__action:link, .gal__action:visited{ text-decoration:none; }

/* downloadkeuze — <details>, dus hij werkt ook zonder JavaScript */
.gal__dl{ position:relative; }
.gal__dl summary{ list-style:none; cursor:pointer; }
.gal__dl summary::-webkit-details-marker{ display:none; }
.gal__dl[open] summary{ background:var(--paper); color:var(--ink); }
.gal__dlmenu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:130; width:270px;
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px;
  box-shadow:0 18px 44px rgba(60,51,44,0.16);
}
.gal__dlmenu a{ display:block; padding:11px 13px; border-radius:6px; transition:background .18s ease; }
.gal__dlmenu a:hover{ background:var(--paper); }
.gal__dlmenu strong{ display:block; font-size:14px; font-weight:500; color:var(--ink); }
.gal__dlmenu span{ display:block; font-size:12px; color:var(--ink-faint); margin-top:2px; line-height:1.45; }
.gal__action{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:0; cursor:pointer; padding:8px 10px; border-radius:6px;
  font-family:var(--sans); font-size:13px; color:var(--ink-soft);
  transition:background .2s ease, color .2s ease;
}
.gal__action:hover{ background:var(--paper); color:var(--ink); }
.gal__action svg{ width:17px; height:17px; flex-shrink:0; }
.gal__action.is-on{ color:var(--tan-deep); }
.gal__action.is-on svg{ fill:var(--tan-deep); stroke:var(--tan-deep); }
.gal__favcount{ font-family:var(--mono); font-size:11px; color:var(--tan-deep); }
.gal__favcount:empty{ display:none; }

/* raster — één doorlopende lijst, secties bestaan alleen als filter in de balk */
.gal__body{ padding:26px 20px 90px; background:#fff; }
.gal__grid{ display:flex; flex-wrap:wrap; gap:8px; }
.gal__empty{
  padding:70px 0; text-align:center; color:var(--ink-faint);
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
}
.gal__item{
  position:relative; margin:0; overflow:hidden; background:var(--cream-deep);
  height:clamp(190px,25vh,300px);           /* terugval zolang JS het raster niet heeft uitgelijnd */
  border-radius:3px; cursor:zoom-in;
}
.gal__item img{ display:block; height:100%; width:auto; max-width:none; object-fit:cover; }
.gal__grid.is-laid .gal__item{ height:auto; }
.gal__grid.is-laid .gal__item img{ width:100%; height:100%; }
.gal__fav{
  position:absolute; top:9px; right:9px; z-index:2;
  width:32px; height:32px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,0.88); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(-4px); transition:opacity .2s ease, transform .2s ease, background .2s ease;
}
.gal__item:hover .gal__fav, .gal__fav:focus-visible{ opacity:1; transform:translateY(0); }
.gal__fav svg{ width:17px; height:17px; fill:none; stroke:var(--ink); stroke-width:1.6; }
.gal__fav.is-on{ opacity:1; transform:translateY(0); }
.gal__fav.is-on svg{ fill:var(--tan-deep); stroke:var(--tan-deep); }

/* voet */
.gal__foot{ padding:56px 26px 70px; text-align:center; border-top:1px solid var(--line); background:var(--paper); }
.gal__foot img{ width:78px; margin:0 auto 18px; opacity:0.8; }
.gal__foot p{ font-size:14px; color:var(--ink-soft); }
.gal__foot a{ color:var(--tan-deep); text-decoration:underline; }
.gal__verloop{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em;
  color:var(--ink-faint); margin-bottom:10px;
}

/* wachtwoordscherm en meldingen voor een galerij */
.slot{ min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:28px; background:var(--paper); }
.slot__kaart{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:44px 38px; max-width:400px; width:100%; text-align:center;
  box-shadow:0 20px 60px rgba(60,51,44,0.08);
}
.slot__logo{ width:92px; margin:0 auto 24px; }
.slot__titel{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,4vw,32px); margin-bottom:12px; }
.slot__tekst{ font-size:14.5px; color:var(--ink-soft); margin-bottom:22px; }
.slot__veld{
  font-family:var(--sans); font-size:15px; width:100%; padding:13px 15px; text-align:center;
  border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink);
}
.slot__veld:focus{ outline:2px solid var(--tan); outline-offset:1px; border-color:transparent; }
.slot__fout{ color:#A4453A; font-size:13.5px; margin-top:12px; }
.slot__knop{
  width:100%; margin-top:16px; padding:14px 20px; border:0; border-radius:6px; cursor:pointer;
  background:var(--tan-deep); color:#fff; font-family:var(--sans); font-size:15px;
  transition:background .25s ease;
}
.slot__knop:hover{ background:var(--ink); }

@media (max-width:860px){
  .gal__bar{ gap:16px; padding:0 16px; }
  .gal__action span{ display:none; }
  .gal__action{ padding:8px; }
  .gal__body{ padding:20px 12px 70px; }
  .gal__grid{ gap:6px; }
}
@media (max-width:700px){
  .gal__barname strong{ font-size:14px; }
  .slot__kaart{ padding:34px 24px; }
}

/* ---------- FOOTER ---------- */
footer{ padding:56px 0 40px; background:var(--cream); border-top:1px solid var(--line); }
.footer__brand{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:28px; margin-bottom:36px; }
.footer__logo{ height:96px; width:auto; }
.footer__row{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:0.05em; }

/* ---------- SOCIAL BADGES (rond, in merkkleur — exact zoals origineel) ---------- */
.social-badges{ display:flex; align-items:center; gap:14px; }
.badge{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.badge:hover{ transform:translateY(-3px); box-shadow:0 8px 16px rgba(60,51,44,0.18); }
.badge svg{ width:20px; height:20px; }
.badge--fb{ background:#1877F2; }
.badge--ig{ background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.badge--tt{ background:#000000; }
.badge--li{ background:#0A66C2; }
.badge--mail{ background:#EDEBE6; }
.badge--mail svg{ stroke:var(--ink-soft); }

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- CLICKABLE GALLERY / LIGHTBOX ---------- */
.detail__gallery .ph{ cursor:zoom-in; }
.lightbox{
  position:fixed; inset:0; z-index:500; background:rgba(28,23,18,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox__img{
  max-width:88vw; max-height:84vh; border-radius:12px;
  box-shadow:0 24px 70px rgba(0,0,0,0.5); background:var(--cream);
}
.lightbox__close, .lightbox__nav{
  position:absolute; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25);
  color:#fff; border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s ease;
}
.lightbox__close:hover, .lightbox__nav:hover{ background:rgba(255,255,255,0.18); }
.lightbox__close{ top:22px; right:22px; font-size:22px; line-height:1; }
.lightbox__nav{ top:50%; transform:translateY(-50%); font-size:26px; line-height:1; }
.lightbox__prev{ left:18px; }
.lightbox__next{ right:18px; }
.lightbox__count{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:12px; color:rgba(255,255,255,0.7); letter-spacing:0.04em;
}

/* ---------- MOBILE NAV ---------- */
.nav__links{ display:none; }
.nav__toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px; z-index:201; position:relative;
  -webkit-tap-highlight-color:transparent; outline:none;
  -webkit-appearance:none; appearance:none;
  color:inherit;
}
.nav__toggle:focus-visible{ outline:2px solid var(--tan); outline-offset:4px; border-radius:4px; }
.nav__toggle span{ width:23px; height:2px; background:currentColor; display:block; transition:transform .25s ease, opacity .2s ease; }
.nav__toggle.is-open{ color:var(--ink); }
.nav__toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2){ opacity:0; }
.nav__toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav__backdrop{
  position:fixed; inset:0; z-index:197;
  background:rgba(28,23,18,0.4); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.nav__backdrop.is-open{ opacity:1; pointer-events:auto; }

.nav__mobile{
  position:fixed; top:0; left:0; right:0; z-index:199;
  background:var(--paper); padding:92px 32px 28px;
  display:flex; flex-direction:column;
  max-height:100vh; overflow-y:auto;
  transform:translateY(-16px); opacity:0;
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .35s ease, visibility .5s;
  visibility:hidden;
  box-shadow:0 20px 50px rgba(60,51,44,0.22);
}
.nav__mobile.is-open{ transform:translateY(0); opacity:1; visibility:visible; }
.nav__mobile a{
  padding:15px 2px; border-bottom:1px solid var(--line); color:var(--ink);
  font-family:var(--mono); font-size:13.5px; letter-spacing:0.05em; text-transform:uppercase;
  opacity:0; transform:translateY(10px);
  transition:opacity .4s ease, transform .4s ease;
}
.nav__mobile.is-open a{ opacity:1; transform:translateY(0); }
.nav__mobile.is-open a:nth-child(1){ transition-delay:.05s; }
.nav__mobile.is-open a:nth-child(2){ transition-delay:.09s; }
.nav__mobile.is-open a:nth-child(3){ transition-delay:.13s; }
.nav__mobile.is-open a:nth-child(4){ transition-delay:.17s; }
.nav__mobile.is-open a:nth-child(5){ transition-delay:.21s; }
.nav__mobile.is-open a:nth-child(6){ transition-delay:.25s; }
.nav__mobile.is-open a:nth-child(7){ transition-delay:.29s; }
.nav__mobile.is-open a:nth-child(8){ transition-delay:.33s; }
.nav__mobile.is-open a:nth-child(9){ transition-delay:.37s; }
.nav__mobile.is-open a:nth-child(10){ transition-delay:.41s; }
.nav__mobile.is-open a:nth-child(11){ transition-delay:.45s; }
.nav__mobile.is-open a:nth-child(12){ transition-delay:.49s; }
.nav__mobile a.nav__mobile--sub{ padding-left:18px; color:var(--ink-soft); font-size:12.5px; }
@media (min-width:640px){
  .nav__mobile{
    left:auto; right:0; width:400px; max-width:88vw;
    top:0; bottom:0; height:100vh; height:100dvh;
    transform:translateX(105%);
    box-shadow:-24px 0 60px rgba(60,51,44,0.22);
  }
  .nav__mobile.is-open{ transform:translateX(0); }
}
@media (max-width:860px){
  .facts span svg{ width:13px; height:13px; }
  .facts span{ padding:8px 14px 8px 11px; gap:6px; }
  .chapter__grid, .about__grid, .detail__pkgrow{ grid-template-columns:1fr; gap:40px; }
  .chapter--reverse .chapter__grid{ grid-template-columns:1fr; }
  .chapter--reverse .chapter__text{ order:1; }
  .chapter--reverse .chapter__media{ order:2; }
  .duo .ph:first-child{ margin-top:0; }
  .packages, .overige-grid{ grid-template-columns:1fr; }
  .detail__gallery{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .overige-grid--4{ grid-template-columns:repeat(2,1fr); }
  .review-card{ flex:0 0 calc(50% - 11px); }
  .reviews__arrow--prev{ left:2px; }
  .reviews__arrow--next{ right:2px; }
  .reviews__arrow{ background:rgba(243,238,228,0.85); border-radius:50%; }
  .footer__brand{ justify-content:center; text-align:center; }
  .strip{ grid-template-columns:1fr; }
  .strip__body{ padding:0 22px 22px; }
  .grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8{ grid-column:span 1; grid-row:span 2; }
  .about__portrait .ph.small{ display:none; }
  .hero__sub{ max-width:320px; }
}
@media (max-width:520px){
  .wrap{ padding:0 20px; }
  .hero__content{ padding:0 20px 56px; }
  .pagehero__content{ padding:0 20px 36px; }
  .chapter{ padding:70px 0; }
  .pricebar{ flex-direction:column; align-items:flex-start; }
  .overige-grid--4{ grid-template-columns:1fr; }
  .review-card{ flex:0 0 88%; }
  .detail__intro.textpanel{ padding:26px 24px; }
  .hero{ min-height:300px; }
}

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }