/* ============================================================
   THE LOST MEMORIES, stylesheet (v4, clean studio)
   Zwart + groen. Overzichtelijk, ruim, met karakter.
   Alle kleuren/typografie staan centraal onder :root.
   ============================================================ */

:root {
  --bg: #0a0c0a;
  --bg-2: #0e110e;
  --panel-solid: #131813;
  --line: rgba(239,241,236,.10);
  --line-2: rgba(239,241,236,.16);

  --green: #35663E;
  --green-2: #41794B;
  --green-text: #6FA37D;
  --on-green: #f4f0e6;
  /* zachte accenttint, volgt het thema mee */
  --accent-soft: rgba(111,163,125,.12);
  --accent-line: rgba(111,163,125,.28);
  --accent-glow: rgba(111,163,125,.15);

  --ink: #eff1ec;
  --muted: #9aa29a;
  --dim: #7b8179;

  /* Een lettertype voor de hele site, gelijk aan de homepage. */
  --font: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font);

  --container: 1200px;
  --r: 8px;
  --r-lg: 12px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* compat-aliassen voor oudere pagina's */
  --muted-dim: var(--dim);
  --radius: var(--r);
  --radius-lg: var(--r-lg);
  --text: var(--ink);
  --bg-alt: var(--bg-2);
}

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--green); color: var(--on-green); }

h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; line-height: 1.03; letter-spacing: -.032em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1.1em; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(70px, 9vw, 120px) 0; }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }
/* Om en om een andere tint, maar met een verloop aan boven- en onderkant zodat
   de secties in elkaar overlopen in plaats van als banden op elkaar te stapelen. */
.section--alt {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 14%, var(--bg-2) 86%, var(--bg) 100%);
}
.center { text-align: center; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 60ch; }
.center .lead { margin-left: auto; margin-right: auto; }
.sec-head { max-width: 720px; margin-bottom: clamp(34px, 5vw, 56px); }
.sec-head.center { margin-left: auto; margin-right: auto; }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font); font-weight: 600; font-size: .74rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--green-text);
  margin-bottom: 20px;
}
.kicker::before { content: ""; width: 22px; height: 1px; background: var(--green-text); }
/* alias zodat oude pagina's blijven werken */
.eyebrow { display:inline-flex; align-items:center; gap:12px; font-family:var(--font); font-weight:600; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--green-text); margin-bottom:20px; }
.eyebrow::before { content:""; width:22px; height:1px; background:var(--green-text); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font); font-weight: 700; font-size: .86rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 15px 26px; border-radius: 5px; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn--primary { background: var(--green); color: var(--on-green); }
.btn--primary:hover { transform: translateY(-2px); background: var(--green-2); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--green-text); color: var(--green-text); }
.btn--lg { padding: 17px 32px; font-size: .92rem; }
.btn--onlight { background: var(--on-green); color: var(--green-text); }
.btn--onlight:hover { transform: translateY(-2px); background: #fffaf1; }
.btn--onlight-ghost { border-color: rgba(244,240,230,.5); color: var(--on-green); }
.btn--onlight-ghost:hover { border-color: var(--on-green); }

.textlink { display: inline-flex; align-items: center; gap: 8px; color: var(--green-text); font-family: var(--font-display); font-weight: 600; }
.textlink span { transition: transform .3s var(--ease); }
.textlink:hover span { transform: translateX(5px); }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: 90px; display: flex; align-items: center; background: linear-gradient(180deg, rgba(8,10,8,.82), rgba(8,10,8,.4)); border-bottom: 1px solid var(--line); transition: height .3s var(--ease), background .3s var(--ease); }
.site-header.scrolled { height: 72px; background: rgba(9,11,9,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand { display: flex; align-items: center; gap: 13px; font-family: var(--font); font-weight: 700; font-size: 1.32rem; letter-spacing: -.03em; }
.brand > span { white-space: nowrap; }
.brand b { font-family: var(--font); font-weight: 700; font-size: 1.32rem; letter-spacing: -.03em; white-space: nowrap; }
.brand small { display: block; font-family: var(--font); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-top: 2px; }
.brand-logo { height: 46px; width: auto; transition: height .3s var(--ease), transform .5s cubic-bezier(.34,1.56,.64,1); }
.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.05); }
.site-header.scrolled .brand-logo { height: 38px; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green-text); }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a:not(.btn) { position: relative; font-family: var(--font); font-weight: 600; font-size: .88rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 10px 15px; transition: color .4s var(--ease); }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 3px; height: 2px; background: var(--green-text); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-links a:not(.btn):hover, .nav-links a:not(.btn).active { color: var(--ink); }
.nav-links a:not(.btn):hover::after, .nav-links a:not(.btn).active::after { transform: scaleX(1); }
.nav-cta { margin-left: 12px; }
.nav-links .nav-cta .btn { padding: 12px 22px; font-size: .82rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 54px; height: 54px; position: relative; z-index: 110; }
.nav-toggle span { display: block; width: 32px; height: 3px; background: var(--ink); margin: 6px auto; transition: transform .35s var(--ease), opacity .25s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---------- HOME hero (video als groot paneel) ---------- */
.home-hero { padding: 150px 0 40px; position: relative; }
.home-hero__top { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.home-hero h1 { margin: 0; }
.home-hero h1 .accent { color: var(--green-text); }
.home-hero__aside { padding-bottom: 6px; }
.home-hero__aside .lead { margin-bottom: 22px; }
.home-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.video-panel { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: #000; }
.video-panel video { width: 100%; height: clamp(320px, 56vh, 620px); object-fit: cover; display: block; }
.video-panel__tag { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 100px; background: rgba(11,13,11,.55); backdrop-filter: blur(8px); font-family: var(--font-display); font-weight: 600; font-size: .85rem; }
.video-panel__tag .live { width: 9px; height: 9px; border-radius: 50%; background: var(--green-text); box-shadow: 0 0 0 0 rgba(111,163,125,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(111,163,125,.5);} 70%{box-shadow:0 0 0 10px rgba(111,163,125,0);} 100%{box-shadow:0 0 0 0 rgba(111,163,125,0);} }

/* Feiten-strip onder hero */
.factbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.factbar div { background: var(--bg); padding: 22px 24px; }
.factbar dt { font-family: var(--font-display); font-weight: 600; color: var(--green-text); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.factbar dd { margin: 0; color: var(--ink); font-size: 1.02rem; }

/* ---------- Page hero (subpagina's) ---------- */
.page-hero { padding: 160px 0 40px; }
.page-hero .lead { margin-top: 6px; }
.breadcrumb { color: var(--dim); font-size: .85rem; margin-bottom: 16px; font-family: var(--font-display); }
.breadcrumb a:hover { color: var(--green-text); }

/* subpage/legacy .hero (bruiloften gebruikt beeld-hero) -> nette variant */
.hero { position: relative; min-height: 76svh; display: flex; align-items: center; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,8,6,.4), rgba(6,8,6,.72) 70%, var(--bg)); }
.hero__inner { padding: 150px 24px 70px; max-width: 820px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card { background: var(--panel-solid); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
.card:hover { transform: translateY(-6px); border-color: var(--accent-line); box-shadow: 0 24px 52px -28px rgba(53,102,62,.9), 0 0 38px -10px rgba(111,163,125,.3); }
.card h3 { margin-bottom: .45em; }
.card p { color: var(--muted); margin: 0; }
.card__link, .card__icon { color: var(--green-text); }
.card__icon { width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center; background: var(--accent-soft); margin-bottom: 18px; font-size: 1.2rem; }
.card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.card__link span { transition: transform .3s var(--ease); }
.card:hover .card__link span { transform: translateX(5px); }

/* Directory (overzichtelijke link-lijst i.p.v. losse iconen) */
.dir { border-top: 1px solid var(--line); }
.dir a { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 18px; padding: 24px 6px; border-bottom: 1px solid var(--line); transition: padding .35s var(--ease), background .35s; }
.dir a:hover { padding-left: 18px; background: linear-gradient(90deg, var(--accent-soft), transparent); }
.dir .num { font-family: var(--font); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--dim); }
.dir .t { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.dir .t b { font-weight: 600; }
.dir .s { display: block; font-family: var(--font); font-weight: 400; font-size: .92rem; color: var(--muted); margin-top: 2px; }
.dir .go { color: var(--green-text); opacity: 0; transform: translateX(-8px); transition: .3s var(--ease); font-size: 1.2rem; }
.dir a:hover .go { opacity: 1; transform: none; }
@media (max-width: 560px){ .dir a { grid-template-columns: 30px 1fr; } .dir .go { display: none; } }

/* Set-kaart met capaciteit */
.badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .04em; color: var(--green-text); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 6px 13px; border-radius: 100px; margin-bottom: 16px; }
.price { font-family: var(--font); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.55rem; color: var(--ink); margin: 2px 0; }
.price small { font-family: var(--font); font-weight: 400; font-size: .9rem; color: var(--muted); }

/* Lijstjes met vinkjes */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; color: var(--muted); }
.ticks li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%;
  background-color: var(--accent-glow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236fa37d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-position: center; background-size: 11px; background-repeat: no-repeat;
}
/* Op de bruiloftenpagina is het accent goud, dus daar ook een goud vinkje */
body.wedding .ticks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238a6835' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ---------- Split / editorial ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split--reverse .split__media { order: 2; }
.media { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); position: relative; }
.split__media { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); position: relative; }
.split__media img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--tall { aspect-ratio: 4/5; }
.media--wide { aspect-ratio: 16/10; }
@media (max-width: 860px){ .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } .split__media img { min-height: 260px; } }

/* Foto: subtiele, nette behandeling (geen felle amateurkleuren) */
.media img, .split__media img, .video-panel video { filter: saturate(.92) contrast(1.02); }

/* ---------- Groen contrastblok ---------- */
.slab { background: var(--green); color: var(--on-green); border-radius: var(--r-lg); padding: clamp(40px, 6vw, 72px); }
.slab h2 { color: var(--on-green); }
.slab .lead { color: rgba(244,240,230,.82); }
.slab .kicker, .slab .eyebrow { color: rgba(244,240,230,.85); }
.slab .kicker::before, .slab .eyebrow::before { background: rgba(244,240,230,.85); }
.slab .contact-row a { color: var(--on-green); }
.slab .contact-row a:hover { opacity: .7; }

/* ---------- Contact ---------- */
.contact-row { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.contact-row a { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.contact-row a:hover { color: var(--green-text); }

/* ---------- Referenties ---------- */
.reflist { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.reflist span { font-family: var(--font-display); font-weight: 500; font-size: .9rem; color: var(--muted); border: 1px solid var(--line); padding: 8px 16px; border-radius: 100px; }

/* ---------- CTA-band (subpagina's) ---------- */
.cta-band { text-align: center; background: var(--green); color: var(--on-green); border-radius: var(--r-lg); padding: clamp(40px, 6vw, 72px); }
.cta-band h2 { color: var(--on-green); }
/* De knop stond in dezelfde groene kleur als de band en verdween daardoor.
   Op het groene vlak wordt hij licht, net als op de homepage. */
.cta-band .btn--primary { background: var(--on-green); color: var(--green); }
.cta-band .btn--primary:hover { background: #fffaf1; color: var(--green-2); }
.cta-band .lead { color: var(--on-green); opacity: .92; margin: 0 auto 26px; }

/* ---------- Formulier ---------- */
.form-card { background: var(--panel-solid); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px, 4vw, 46px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-weight: 500; font-size: .9rem; }
.field label .req { color: var(--green-text); }
.field input, .field select, .field textarea { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; color: var(--ink); font-family: var(--font); font-size: 1rem; width: 100%; transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green-text); box-shadow: 0 0 0 3px var(--accent-glow); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236fa37d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; }
/* De browser zet in een datumveld zijn eigen besturing, die hoger uitvalt en
   anders uitlijnt dan de andere velden. Hieronder krijgt hij dezelfde maat,
   met een kalendericoon dat op de donkere achtergrond zichtbaar is. */
.field input[type="date"] { -webkit-appearance: none; appearance: none; height: 48px; line-height: 1.2; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field input[type="date"]::-webkit-calendar-picker-indicator { margin: 0; padding: 0; cursor: pointer; opacity: .8; filter: invert(64%) sepia(16%) saturate(520%) hue-rotate(83deg); }
.field input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.form-note { color: var(--dim); font-size: .85rem; margin-top: 16px; }
.form-status { margin-top: 16px; padding: 13px 17px; border-radius: var(--r); font-size: .95rem; display: none; }
.form-status.show { display: block; }
.form-status.ok { background: var(--accent-soft); color: var(--green-text); border: 1px solid var(--accent-line); }
.form-status.err { background: rgba(255,90,90,.1); color: #ff9a9a; border: 1px solid rgba(255,90,90,.3); }
@media (max-width: 640px){ .form-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { background: linear-gradient(180deg, var(--bg) 0%, #060706 40%); padding: 84px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 46px; }
.site-footer h4 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-family: var(--font-display); margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: var(--muted); font-size: .95rem; transition: color .4s var(--ease); }
.site-footer a:hover { color: var(--green-text); }
.footer-brand p { color: var(--muted); font-size: .95rem; max-width: 320px; }
.footer-brand .brand { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); color: var(--dim); font-size: .85rem; }

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(14px); filter: blur(7px) saturate(.45); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.3s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }

/* ---------- Scroll cue ---------- */
.scroll-cue { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; margin-top: 30px; }
.scroll-cue .line { width: 40px; height: 1px; background: var(--green-text); }

/* ============================================================
   BRUILOFTEN, licht, rustig thema
   ============================================================ */
body.wedding {
  --bg: #f7f4ef; --bg-2: #efeae2; --panel-solid: #ffffff;
  --line: rgba(40,30,20,.12); --line-2: rgba(40,30,20,.2);
  --green: #8a6835; --green-2: #7d5e2f; --green-text: #7d6330; --on-green: #ffffff;
  --accent-soft: rgba(138,104,53,.10); --accent-line: rgba(138,104,53,.30); --accent-glow: rgba(138,104,53,.16);
  --ink: #262019; --muted: #6f665b; --dim: #6b6358;
}
body.wedding h1, body.wedding h2, body.wedding h3, body.wedding h4 { font-weight: 700; }
/* Het lichte thema heeft een lichte headerbalk, anders valt er een donkere
   band over de foto en is het menu niet meer te lezen. */
body.wedding .site-header { background: linear-gradient(180deg, rgba(247,244,239,.88), rgba(247,244,239,.34)); }
body.wedding .site-header.scrolled { background: rgba(247,244,239,.93); }
body.wedding .site-footer { background: linear-gradient(180deg, var(--bg) 0%, #efeae2 40%); }
body.wedding .media img, body.wedding .split__media img { filter: none; }
body.wedding .card { box-shadow: 0 18px 50px -34px rgba(40,30,20,.5); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .home-hero__top { grid-template-columns: 1fr; gap: 26px; }
  .factbar { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
/* Menu klapt in vanaf 1024px, anders loopt de balk vast op laptopbreedtes */
@media (max-width: 1024px){
  .nav-links { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 8px; background: var(--bg); transform: translateX(100%); transition: transform .4s var(--ease); padding: 40px; }
  body.wedding .nav-links { background: var(--bg); }
  .nav-links.open { transform: none; }
  /* Een balk met backdrop-filter wordt zelf het venster waarbinnen alles met
     position fixed valt. Het uitklapmenu werd daardoor afgeknepen tot de hoogte
     van de balk zodra je had gescrold. Op deze breedtes dus geen vervaging,
     maar een dekkende balk. */
  .site-header.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(9,11,9,.97); }
  body.wedding .site-header.scrolled { background: rgba(247,244,239,.97); }
  /* De maat en kleur moeten op dezelfde selector staan als de basisregel,
     anders wint die basisregel en blijven de links klein en grijs. */
  .nav-links a:not(.btn) { font-size: 1.35rem; letter-spacing: .06em; padding: 14px 20px; color: var(--ink); }
  .nav-links a:not(.btn).active { color: var(--green-text); }
  .nav-links a:not(.btn)::after { left: 20px; right: 20px; bottom: 6px; }
  .nav-links .nav-cta .btn { font-size: .95rem; padding: 16px 32px; }
  .nav-links .nav-cta { margin: 12px 0 0; }
  .nav-toggle { display: block; }
}
@media (max-width: 760px){
  body { font-size: 16px; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 480px){
  .factbar { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .home-hero__cta .btn, .hero__cta .btn { width: 100%; justify-content: center; }
}

/* ---------- Kleine foto binnen een setkaart ---------- */
.card__photo { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/10; margin: 0 0 16px; }
.card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .7s var(--ease); }

/* ---------- Kaart licht op als je eroverheen gaat ----------
   De foto komt iets naar voren, de rand pakt de accentkleur en er valt een
   gloed onder de kaart. Op de bruiloftenpagina is die gloed goud in plaats
   van groen, want daar is het hele accent goud. */
/* De reveal-regel zet transform weer op none en won het daardoor van de
   hover. Daarom staat de lift hier nog een keer, met meer gewicht. */
.card:hover,
.card[data-reveal].in:hover { transform: translateY(-6px); }
.card:hover .card__photo img { transform: scale(1.045); filter: brightness(1.07); }
.card:hover .badge { border-color: var(--green-text); }
body.wedding .card:hover { box-shadow: 0 24px 54px -26px rgba(138,104,53,.55), 0 0 38px -10px rgba(138,104,53,.34); }

/* ---------- De drie bruiloftsets ----------
   De middelste set staat op de meeste feesten, dus die krijgt een bredere
   kolom, meer lucht en steekt aan de boven- en onderkant buiten de rij.
   De knop staat onderaan de kaart, zodat de knoppen op een rij staan. */
.card--set { display: flex; flex-direction: column; }
.card--set .ticks { margin-bottom: 26px; }
.card--featured { border-color: var(--accent-line); }
.card__cta { margin-top: auto; width: 100%; justify-content: center; }
@media (min-width: 901px) {
  .grid--sets { grid-template-columns: 1fr 1.16fr 1fr; gap: 26px; align-items: stretch; }
  .grid--sets .card--featured { margin: -26px 0; padding: 48px 34px; }
  .grid--sets .card--featured h3 { font-size: 1.55rem; }
  .grid--sets .card--featured .card__cta { padding: 17px 32px; font-size: .92rem; }
}

/* ---------- Veld dat vooraf is ingevuld ----------
   Komt iemand via "Kies deze set" op het offerteformulier, dan knippert het
   ingevulde veld kort op zodat duidelijk is wat er al voor hem klaarstaat. */
.field--ingevuld input, .field--ingevuld select { border-color: var(--green-text); animation: tlm-ingevuld 2.6s var(--ease) both; }
@keyframes tlm-ingevuld {
  0%, 45% { box-shadow: 0 0 0 3px var(--accent-glow); }
  100% { box-shadow: 0 0 0 3px rgba(0,0,0,0); }
}
.form-card { scroll-margin-top: 110px; }

/* ---------- Bruiloften-hero ----------
   De foto is donker, de tekst is donker. De sluier is daarom het zwaarst in het
   midden, waar de tekst staat, en laat de randen van de foto zichtbaar. */
body.wedding .hero__media img { filter: saturate(.84) brightness(1.04); }
body.wedding .hero__media::after {
  background:
    radial-gradient(122% 80% at 50% 46%, rgba(247,244,239,.9) 0%, rgba(247,244,239,.68) 44%, rgba(247,244,239,.28) 76%, rgba(247,244,239,0) 100%),
    linear-gradient(180deg, rgba(247,244,239,.6) 0%, rgba(247,244,239,.34) 30%, rgba(247,244,239,.48) 64%, var(--bg) 100%);
}
body.wedding .hero .eyebrow { color: var(--green-text); }
body.wedding .hero .eyebrow::before { background: var(--green-text); }
body.wedding .hero .lead { color: #3b342b; }
body.wedding .hero h1,
body.wedding .hero .lead,
body.wedding .hero .eyebrow { text-shadow: 0 1px 3px rgba(247,244,239,.95), 0 2px 16px rgba(247,244,239,.9); }
body.wedding .site-header:not(.scrolled) .nav-links a:not(.btn) { color: #4a423a; }
body.wedding .site-header:not(.scrolled) .nav-links a:not(.btn):hover { color: var(--ink); }
body.wedding .site-header:not(.scrolled) .nav-links a:not(.btn).active { color: var(--green-text); }
/* Op een smal scherm staat de tekst in een smallere band. De sluier volgt die band,
   zodat de bovenkant van de foto met de lampen wel zichtbaar blijft. */
@media (max-width: 760px){
  body.wedding .hero__media img { object-position: 50% 42%; }
  body.wedding .hero__media::after {
    background:
      radial-gradient(140% 62% at 50% 58%, rgba(247,244,239,.92) 0%, rgba(247,244,239,.72) 50%, rgba(247,244,239,.26) 82%, rgba(247,244,239,0) 100%),
      linear-gradient(180deg, rgba(247,244,239,.34) 0%, rgba(247,244,239,.2) 26%, rgba(247,244,239,.44) 62%, var(--bg) 100%);
  }
}

/* ---------- Kortere tekst op telefoon ----------
   De lange kop en inleiding breken op een smal scherm in te veel regels.
   Daar staat een kortere versie van dezelfde zin. */
.op-smal { display: none; }
@media (max-width: 760px) {
  .op-breed { display: none; }
  .op-smal { display: inline; }
}

/* ---------- Fotoreeks als diashow op telefoon ----------
   Op een breed scherm blijft het een raster van drie. Op telefoon wordt het
   een rij waar je doorheen veegt, met stippen eronder die meelopen. */
.carrousel-stippen { display: none; }
@media (max-width: 760px) {
  .grid--galerij {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -24px;
    padding: 0 24px;
  }
  .grid--galerij::-webkit-scrollbar { display: none; }
  .grid--galerij > * { flex: 0 0 84%; scroll-snap-align: center; }
  /* De foto's naast beeld halen de scroll-animatie niet, dus die staan
     hier meteen zichtbaar. */
  .grid--galerij > [data-reveal] { opacity: 1; transform: none; filter: none; }
  .grid--galerij .split__media img { min-height: 300px; }

  .carrousel-stippen { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
  .carrousel-stip { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line-2); cursor: pointer; transition: background .3s var(--ease), transform .3s var(--ease); }
  .carrousel-stip.actief { background: var(--green-text); transform: scale(1.35); }
}

/* ---------- Ankerlinks niet onder de vaste header ---------- */
section[id] { scroll-margin-top: 110px; }

/* ---------- Beperkte beweging ----------
   Alles in een blok, achteraan, gelijk aan de homepage. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .btn, .card, .dir a, .brand-logo, .textlink span, .nav-links a::after,
  .field input, .field select, .field textarea { transition: none; }
  .card__photo img { transition: none; }
  .card:hover, .card[data-reveal].in:hover { transform: none; }
  .card:hover .card__photo img { transform: none; }
  .field--ingevuld input, .field--ingevuld select { animation: none; }
  .carrousel-stip { transition: none; }
  .video-panel__tag .lamp { animation: none; }
}

/* ============================================================
   OVERGANG TUSSEN PAGINA'S
   Browsers die dit ondersteunen laten de ene pagina in de andere
   overvloeien in plaats van hard om te schakelen. Browsers die het
   niet kennen negeren dit blok en laden gewoon zoals altijd.
   ============================================================ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: tlm-uit .34s var(--ease) both; }
::view-transition-new(root) { animation: tlm-in .46s var(--ease) both; }
@keyframes tlm-uit { to { opacity: 0; } }
@keyframes tlm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 1ms; animation-name: none; }
}