* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --cream: #f2ece6;
  --cream-dark: #e8e0d8;
  --brown: #3a3028;
  --brown-light: #5a4e42;
  --terracotta: #7E2831; /* 23-10-2026: was oranje #c4784a, nu haar rood */
  --amber: #7E2831; /* 23-10-2026: was oranjegeel #e2a94b, nu haar rood */
  --olive: #7a8c5e;
  --white: #faf8f5;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--cream);
  color: var(--brown);
  line-height: 1.6;
}

/* NAV */
nav.nav-cross {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 32px 48px;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
}
nav.nav-cross.scrolled {
  background: rgba(250,248,245,0.94); /* 23-10-2026: gebroken wit i.p.v. beige, op verzoek */
  backdrop-filter: blur(12px);
  padding: 18px 48px;
  border-bottom: 1px solid rgba(58,48,40,0.08);
}
.nav-logo { grid-column: 2; justify-self: center; display: block; line-height: 0; }
.nav-logo-img { height: 34px; width: auto; display: block; }

.hamburger {
  grid-column: 3; justify-self: end;
  background: none; border: none; cursor: pointer; padding: 0;
  width: 26px; height: 16px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hamburger span {
  display: block; width: 100%; height: 1px; background: var(--white);
  transition: background 0.4s ease, transform 0.3s ease, opacity 0.3s ease;
}
nav.nav-cross.scrolled .hamburger span { background: var(--brown); }
.hamburger.open span { background: #fff !important; }
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* PAGE HEADER (subpagina's zonder foto-hero) */
.page-header { padding: 110px 48px 20px; background: var(--cream); text-align: center; }

/* MENU PANEL */
.menu-backdrop {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(0,0,0,0.32);
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
}
.menu-backdrop.open { opacity: 1; pointer-events: auto; }
.menu-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 150;
  width: min(340px, 82vw);
  background: transparent;
  display: flex; align-items: center; justify-content: flex-end;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.menu-panel.open { transform: translateX(0); pointer-events: auto; }
.menu-panel ul {
  list-style: none; display: flex; flex-direction: column; align-items: flex-end;
  gap: 28px; padding: 0 56px;
}
.menu-panel a {
  font-family: 'Cormorant Garamond', serif; font-size: 30px;
  color: #fff; text-decoration: none; transition: color 0.3s;
}
.menu-panel a:hover { color: var(--terracotta); }

/* HERO */
.hero {
  height: 75vh; position: relative; overflow: hidden;
  background: url('afbeeldingen/header-home-still.jpg') center/cover no-repeat;
}
/* Bewegend beeld bovenaan Home (13-10-2026); het stilstaande beeld staat erachter zolang hij laadt */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.hero-video::-webkit-media-controls { display: none !important; }
.hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 260px; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0));
}

/* SECTIONS */
section { padding: 80px 48px; }
.section-tag {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--terracotta); text-align: center; margin-bottom: 12px;
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px; font-weight: 400; text-align: center;
  margin-bottom: 48px; letter-spacing: 1px;
}

/* PORTFOLIO */
.portfolio { background: var(--white); }
.project {
  display: flex; gap: 40px; align-items: center;
  max-width: 900px; margin: 0 auto 48px;
}
.project:nth-child(even) { flex-direction: row-reverse; }
.project:last-child { margin-bottom: 0; }
/* 08-10-2026: twee witte blokken onder elkaar kregen dubbele witruimte (80 + 80). Nu één keer. */
.portfolio + .werkwijze, .werkwijze + .investering { padding-top: 0; }
.project-img {
  flex: 1; aspect-ratio: 16/10; border-radius: 6px;
  overflow: hidden; position: relative;
}
.project-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.project-img-inner {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--cream-dark), #d4c4b0);
  display: flex; align-items: center; justify-content: center;
}
.project-img-inner span {
  font-size: 11px; letter-spacing: 2px; opacity: 0.4; text-transform: uppercase;
}
.project-desc.placeholder { font-style: italic; opacity: 0.55; }
.project-info { flex: 1; }
.project-cat {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: 8px;
}
a.project-cat {
  display: inline-block; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .3s ease;
}
a.project-cat:hover { border-bottom-color: currentColor; }
.project-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 400; margin-bottom: 12px;
}
.project-desc { font-size: 14px; line-height: 1.7; opacity: 0.75; margin-bottom: 16px; }
.project-credits { list-style: none; margin: -4px 0 18px; font-size: 11px; line-height: 1.9; opacity: 0.55; }
.project-credits span { display: inline-block; min-width: 82px; letter-spacing: 1.5px; text-transform: uppercase; font-size: 9px; }
.project-credits a { color: inherit; text-decoration: none; }
.project-credits a:hover { text-decoration: underline; }
.project-page-credits { width: fit-content; margin: -32px auto 56px; font-size: 12px; opacity: .65; }
.project-link {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--terracotta); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 0.3s;
}
.project-link:hover { border-color: var(--terracotta); }

/* ABOUT */
.about { background: var(--cream); }
.about-inner {
  display: flex; gap: 48px; max-width: 900px; margin: 0 auto;
  align-items: center;
}
.about-photo {
  width: 280px; height: 360px; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--cream-dark), #d4c4b0);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.about-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: bottom; display: block;
}
.about-photo span { font-size: 11px; opacity: 0.4; letter-spacing: 2px; }
.about-text p {
  font-size: 15px; line-height: 1.8; margin-bottom: 16px; opacity: 0.8;
}
.about-text .highlight {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-style: italic; opacity: 1;
  color: var(--terracotta); line-height: 1.5;
}

/* WERKWIJZE */
.werkwijze { background: var(--white); }
.werkwijze-inner {
  display: flex; gap: 64px; max-width: 1000px; margin: 0 auto;
  align-items: flex-start;
}
.werkwijze-steps { flex: 1.3; display: flex; flex-direction: column; gap: 40px; }
.werkwijze-step { display: flex; gap: 20px; }
.werkwijze-num {
  font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 300;
  color: var(--terracotta); line-height: 1.3; flex-shrink: 0; width: 44px;
}
.werkwijze-content h3 {
  font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500;
  margin-bottom: 8px;
}
.werkwijze-content p { font-size: 14px; line-height: 1.7; opacity: 0.8; }
.werkwijze-photo {
  flex: 1; position: sticky; top: 120px;
  aspect-ratio: 3/4; border-radius: 6px; overflow: hidden;
}
.werkwijze-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* INVESTERING */
.investering { background: var(--white); }
.investering-inner {
  display: flex; gap: 48px; max-width: 1000px; margin: 0 auto; align-items: flex-start;
}
.investering-card {
  flex: 1; background: var(--brown); color: var(--cream);
  border-radius: 8px; padding: 40px;
}
.investering-card h3 {
  font-family: 'Cormorant Garamond', serif; font-size: 24px; margin-bottom: 14px; color: #fff;
}
.investering-card p { font-size: 14px; line-height: 1.7; margin-bottom: 16px; opacity: 0.9; }
.investering-card .prijs { font-weight: 600; color: var(--amber); }
.investering-list { list-style: none; margin-bottom: 8px; }
.investering-list li {
  font-size: 14px; padding: 6px 0; display: flex; gap: 10px; align-items: flex-start;
}
.investering-list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--brown); flex-shrink: 0; margin-top: 0.7em; }
.investering-sub {
  font-family: 'Cormorant Garamond', serif; font-size: 17px; margin: 20px 0 8px; color: #fff;
}
.investering-side { flex: 1; }
.investering-side h3 {
  font-family: 'Cormorant Garamond', serif; font-size: 22px; margin-bottom: 12px;
}
.investering-side p { font-size: 14px; line-height: 1.7; opacity: 0.8; margin-bottom: 16px; }
.investering-side ul { list-style: none; margin-bottom: 16px; }
.investering-side ul li { font-size: 14px; padding: 5px 0; display: flex; gap: 10px; }
.investering-side ul li::before { content: '•'; color: var(--terracotta); }
.investering-placeholder { font-size: 12px; font-style: italic; opacity: 0.5; }

/* ABOUT PAGINA */
.about-tagline {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 20px;
  line-height: 1.6; color: var(--terracotta); max-width: 640px; margin: 0 auto 48px; text-align: center;
}
.skills { background: var(--white); }
.skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 800px; margin: 0 auto; }
.skill-card { padding: 36px 28px; border: 1px solid var(--cream-dark); border-radius: 6px; text-align: center; }
.skill-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 22px; margin-bottom: 12px; }
.skill-card p { font-size: 13px; opacity: 0.75; line-height: 1.7; }
.bts { background: var(--cream); }
.bts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1000px; margin: 0 auto; }
.bts-grid img { width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; display: block; }

/* KENNISMAKING */
.kennismaking { background: var(--cream); }
.kennismaking-inner { max-width: 820px; margin: 0 auto; }
.kennismaking-bedankt { max-width: 560px; margin: 0 auto; padding: 24px 0 40px; text-align: center; }
.kennismaking-bedankt p {
  font-family: 'Cormorant Garamond', serif; font-size: 20px; line-height: 1.7; margin-bottom: 12px;
}
.kennismaking-intro h3 {
  font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 400;
  margin-bottom: 20px; line-height: 1.3;
}
.kennismaking-intro p { font-size: 14px; line-height: 1.8; opacity: 0.8; margin-bottom: 14px; }
.kennismaking-form {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; align-content: start;
}
.kennismaking-field.breed { grid-column: 1 / -1; }
.kennismaking-field .optioneel {
  display: inline-block; margin-left: 6px; font-size: 9px; letter-spacing: 1px;
  text-transform: none; font-style: italic; opacity: .6;
}
.kennismaking-field textarea {
  border: none; background: transparent; text-align: center; width: 100%; resize: vertical;
  font-family: 'Cormorant Garamond', serif; font-size: 16px; color: var(--brown);
  outline: none; line-height: 1.6;
}
.kennismaking-field textarea::placeholder { color: rgba(58,48,40,0.35); font-style: italic; }
.kennismaking-field input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.kennismaking-upload {
  display: flex !important; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; margin-top: 4px; border: 1px dashed var(--cream-dark); border-radius: 4px;
  cursor: pointer; text-transform: none !important; letter-spacing: 0 !important;
  font-family: 'Cormorant Garamond', serif; font-size: 16px !important; font-style: italic;
  color: rgba(58,48,40,0.55) !important; transition: border-color .3s ease;
}
.kennismaking-upload:hover { border-color: var(--brown-light); }
.kennismaking-upload svg { width: 18px; height: 18px; flex: none; }
.kennismaking-field { position: relative; }
.kennismaking-form .kennismaking-submit { grid-column: 1 / -1; justify-self: center; }
.kennismaking-field { border-bottom: 1px solid var(--cream-dark); padding-bottom: 14px; text-align: center; }
.kennismaking-field label {
  display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--brown-light); margin-bottom: 8px;
}
.kennismaking-field input {
  border: none; background: transparent; text-align: center; width: 100%;
  font-family: 'Cormorant Garamond', serif; font-size: 16px; color: var(--brown);
  outline: none;
}
.kennismaking-field input::placeholder { color: rgba(58,48,40,0.35); font-style: italic; }
.kennismaking-submit {
  margin-top: 8px; align-self: center; padding: 14px 40px;
  background: var(--terracotta); color: #fff; border: none; border-radius: 4px;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; cursor: pointer;
  font-family: 'Montserrat', sans-serif; transition: background 0.3s;
}
.kennismaking-submit:hover { background: #b06a3e; }

/* LOVE NOTES */
.love-notes { background: var(--cream); }
.love-notes-inner {
  display: flex; gap: 56px; max-width: 1000px; margin: 0 auto; align-items: center;
}
.love-notes-photo { flex: 0.75; aspect-ratio: 3/4; border-radius: 6px; overflow: hidden; }
.love-notes-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.3s; }
.love-notes-content { flex: 1.2; text-align: center; }
.love-notes-tag {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: 24px; /* 23-10: rood zoals de andere labels */
}
.love-notes-names {
  font-family: 'Cormorant Garamond', serif; font-size: 30px; margin-bottom: 20px;
}
.love-notes-quote {
  font-family: 'Cormorant Garamond', serif; font-size: 17px; line-height: 1.8;
  max-width: 480px; margin: 0 auto 32px; opacity: 0.9; min-height: 90px;
}
.love-notes-quote.placeholder { font-style: italic; opacity: 0.55; }
.love-notes-nav { display: flex; align-items: center; justify-content: center; gap: 22px; }
.love-notes-arrow {
  background: none; border: none; cursor: pointer; padding: 4px;
  display: flex; align-items: center;
}
.love-notes-arrow svg { width: 34px; height: 12px; }
.love-notes-count {
  font-family: 'Cormorant Garamond', serif; font-size: 14px; letter-spacing: 1px; color: var(--brown-light);
}

/* TESTIMONIALS (oude grid, staat nog los beschikbaar) */
.testimonials { background: var(--cream); }
.testimonials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; max-width: 900px; margin: 0 auto;
}
.testimonial { background: var(--white); padding: 32px; border-radius: 6px; }
.testimonial-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; font-style: italic; line-height: 1.7;
  margin-bottom: 16px; color: var(--brown);
}
.testimonial-quote::before {
  content: '"'; font-size: 32px; color: var(--terracotta);
  line-height: 0; vertical-align: -8px; margin-right: 4px;
}
.testimonial-quote.placeholder { font-style: italic; opacity: 0.6; }
.testimonial-name { font-size: 12px; font-weight: 500; letter-spacing: 1px; }
.testimonial-role { font-size: 11px; opacity: 0.5; margin-top: 2px; }

/* INSTAGRAM */
.instagram { background: var(--cream); padding-bottom: 0; }
.instagram-header {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1100px; margin: 0 auto 32px;
}
.instagram-header-left { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.instagram-header-left svg { width: 24px; height: 24px; }
.instagram-header-left span {
  font-family: 'Cormorant Garamond', serif; font-size: 24px; color: var(--brown);
}
.instagram-handle {
  font-family: 'Montserrat', sans-serif; font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--brown-light);
  text-decoration: none;
}
.instagram-handle .at { text-transform: none; letter-spacing: 0; }
.instagram-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
  max-width: 1100px; margin: 0 auto;
}
.instagram-tile {
  aspect-ratio: 1/1; overflow: hidden;
  background: linear-gradient(135deg, var(--cream-dark), #d4c4b0);
  display: flex; align-items: center; justify-content: center;
}
.instagram-tile span { font-size: 10px; letter-spacing: 1px; opacity: 0.5; color: var(--brown-light); }
/* 13-10-2026: geen vervaging of inzoomen bij aanwijzen, foto blijft scherp */
.instagram-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.instagram-note {
  max-width: 1100px; margin: 16px auto 0; font-size: 11px; opacity: 0.45; font-style: italic;
}

/* FOOTER */
footer { background: var(--cream); color: var(--brown); padding: 48px 48px 28px; }
.footer-top {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1100px; margin: 0 auto; padding-bottom: 24px;
  border-bottom: 1px solid rgba(58,48,40,0.12);
}
.footer-links { display: flex; gap: 32px; list-style: none; }
.footer-links a {
  font-family: 'Cormorant Garamond', serif; font-size: 16px;
  color: var(--brown); text-decoration: none; transition: color 0.3s;
}
.footer-links a:hover { color: var(--terracotta); }
.footer-top-btn {
  background: none; border: none; cursor: pointer; padding: 4px;
  display: flex; align-items: center; justify-content: center;
}
.footer-top-btn svg { width: 18px; height: 18px; }
.footer-bottom {
  max-width: 1100px; margin: 0 auto; padding-top: 20px;
  font-size: 11px; opacity: 0.5;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  nav.nav-cross { padding: 22px 24px; }
  nav.nav-cross.scrolled { padding: 14px 24px; }
  .nav-logo-img { height: 26px; }
  .page-header { padding: 85px 24px 10px; }
  section { padding: 60px 24px; }
  .project { flex-direction: column !important; gap: 20px; }
  .about-inner { flex-direction: column; text-align: center; }
  .about-photo { width: 200px; height: 260px; margin: 0 auto; }
  .werkwijze-inner { flex-direction: column; }
  .werkwijze-photo { position: static; width: 100%; aspect-ratio: 4/3; }
  .investering-inner { flex-direction: column; }
  .kennismaking-inner { flex-direction: column; gap: 40px; }
  .kennismaking-form { grid-template-columns: 1fr; }
  .love-notes-inner { flex-direction: column; }
  .love-notes-photo { width: 100%; max-width: 320px; }
  .skills-grid { grid-template-columns: 1fr; }
  .bts-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Films: voorbeeld bij hover + groot beeld (23-09-2026) ---------- */
.project-img.has-film { cursor: pointer; }
.project-img.has-film img { transition: opacity .6s ease, transform .8s ease; }
.project-img.has-film:hover img { transform: scale(1.02); }
.film-preview {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
.film-preview iframe {
  position: absolute; top: 50%; left: 50%;
  width: 133.4%; height: 120%;          /* vult het 16:10-kader, snijdt YouTube-balkjes weg */
  transform: translate(-50%, -50%); border: 0;
}
.project-img.previewing .film-preview { opacity: 1; }
/* Short (rechtop): film in een staande strook, foto wazig ernaast */
.project-img[data-staand] .film-preview {
  right: auto; left: 50%; transform: translateX(-50%); aspect-ratio: 9 / 16; height: 100%;
}
.project-img[data-staand] .film-preview iframe { width: 100%; height: 100%; }
.project-img[data-staand].previewing img { opacity: 1; filter: blur(10px) brightness(.92); transform: scale(1.08); }
.project-img.previewing img { opacity: 0; }
.film-play {
  position: absolute; left: 50%; top: 50%; width: 36px; height: 36px;
  transform: translate(-50%, -50%); color: #fff; pointer-events: none;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.35));
  transition: opacity .4s ease;
}
.film-play svg { width: 100%; height: 100%; display: block; }
.project-img.previewing .film-play { opacity: 0; }
.project-img.has-film:focus-visible { outline: 1px solid var(--text, #3a3028); outline-offset: 4px; }

.film-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(250, 247, 243, .9);
  display: flex; align-items: center; justify-content: center;
  padding: 64px 24px; opacity: 0; transition: opacity .35s ease;
}
.film-lightbox.open { opacity: 1; }
/* 25-10-2026: zolang de film groot open staat, heeft de balk achter het logo dezelfde beige kleur als de rest
   (anders stak er een witte strook boven uit). Op alle pagina's. */
body.film-open nav.nav-cross.scrolled {
  background: var(--cream); backdrop-filter: none; border-bottom-color: transparent;
}
.film-frame {
  width: min(880px, 100%, calc(70vh * 16 / 9)); aspect-ratio: 16 / 9;
  border-radius: 6px; overflow: hidden; box-shadow: 0 20px 60px rgba(58, 48, 40, .18);
}
.film-frame { position: relative; }
.film-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.film-lightbox.staand .film-frame { width: min(100%, calc(78vh * 9 / 16)); aspect-ratio: 9 / 16; }
.film-close {
  position: absolute; top: 20px; right: 20px; width: 40px; height: 40px;
  background: none; border: 0; color: #3a3028; cursor: pointer; padding: 8px;
}
.film-close svg { width: 100%; height: 100%; display: block; }

/* ---------- Projectpagina (bijv. jonas-maria.html) ---------- */
.project-page { max-width: 1000px; margin: 0 auto; padding: 0 48px 100px; }
.project-page-intro {
  max-width: 560px; margin: 0 auto 56px; text-align: center;
  font-size: 14px; line-height: 1.9; color: var(--brown-light);
}
.project-page-film { margin-bottom: 72px; }
.project-page-film h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 28px; letter-spacing: 1px; text-align: center; margin-bottom: 8px;
}
.project-page-film .film-sub {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--terracotta); text-align: center; margin-bottom: 24px;
}
.film-inline {
  position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden;
  background: var(--cream-dark);
}
.film-inline.staand { aspect-ratio: 9 / 16; max-width: 340px; margin: 0 auto; }
.film-inline.has-film { cursor: pointer; }
.film-inline img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.film-inline.has-film:hover img { transform: scale(1.02); }
.film-inline iframe { width: 100%; height: 100%; border: 0; display: block; }
.film-inline .film-wacht {
  position: absolute; left: 0; right: 0; bottom: 16px; text-align: center;
  font-size: 11px; font-style: italic; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.film-inline.has-film .film-wacht { display: none; }
.project-back {
  display: block; text-align: center; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--brown); text-decoration: none;
}
@media (max-width: 768px) {
  .project-page { padding: 0 24px 72px; }
}

[hidden] { display: none !important; }
.kennismaking-field .kennismaking-links { margin-top: 18px; }

/* Geplakte links in het inspiratieveld: lichtblauw (logo-accent) met streep eronder */
.kennismaking-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  margin-top: 18px; cursor: text;
}
.kennismaking-links input { flex: 1 1 220px; min-width: 0; }
.km-link { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.km-link a {
  color: #98b0c0; text-decoration: underline; text-underline-offset: 3px;
  font-family: 'Cormorant Garamond', serif; font-size: 16px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px;
}
.km-link button {
  background: none; border: 0; padding: 2px; cursor: pointer; color: #98b0c0;
  width: 16px; height: 16px; display: flex; opacity: .7;
}
.km-link button:hover { opacity: 1; }
.km-link button svg { width: 100%; height: 100%; }

/* ---------- Contact-pagina: kies je formulier ---------- */
.contact-keuze-blok { background: var(--cream); padding: 48px 48px 72px; text-align: center; }
.contact-keuze {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 900px; margin: 0 auto;
}
.contact-kaart {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 44px 20px; background: var(--white); color: var(--brown);
  border: 1px solid var(--cream-dark); border-radius: 6px; cursor: pointer;
  font-family: 'Montserrat', sans-serif; transition: border-color .3s ease, transform .3s ease;
}
.contact-kaart:hover { border-color: var(--brown-light); transform: translateY(-2px); }
.contact-kaart[aria-pressed="true"] { border-color: var(--brown); }
.contact-kaart-titel { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 400; letter-spacing: 1px; }
.contact-kaart-sub { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--terracotta); }
.contact-direct { margin-top: 32px; font-size: 13px; color: var(--brown-light); }
/* 23-10-2026: mailadres is klikbaar (opent het mailprogramma), zelfde kleur als de tekst */
.contact-direct a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.contact-direct a:hover { color: var(--brown); }
.contact-formulier { border-top: 1px solid var(--cream-dark); }
.kennismaking-field select {
  border: none; background: transparent; width: 100%; text-align: center; text-align-last: center;
  font-family: 'Cormorant Garamond', serif; font-size: 16px; color: var(--brown);
  outline: none; appearance: none; -webkit-appearance: none; cursor: pointer;
}
@media (max-width: 768px) {
  .contact-keuze-blok { padding: 32px 24px 56px; }
  .contact-keuze { grid-template-columns: 1fr; }
  .contact-kaart { padding: 28px 20px; }
}

/* ===== ABOUT ME (06-10-2026): foto links, tekst rechts, dun bruin lijntje om de foto's ===== */
.over-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 80vh; border-bottom: 1px solid rgba(58,48,40,0.35); }
.over-eerste { margin-top: 70px; border-top: 1px solid rgba(58,48,40,0.35); background: var(--white); }
.over-foto { display: flex; align-items: center; justify-content: center; padding: 60px 48px; background: var(--cream); border-right: 1px solid rgba(58,48,40,0.35); }
.over-kader { border: 1px solid #3a3028; padding: 4px; }
.over-kader { box-sizing: border-box; min-width: 0; }
.over-kader img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; max-width: 100%; }
.over-foto { min-width: 0; }
.over-foto .over-kader { width: 100%; max-width: 420px; }
/* 23-10-2026: nieuwe foto bovenaan About me, op haar verzoek iets kleiner */
.over-eerste .over-foto .over-kader { max-width: 340px; }
.over-tekst { display: flex; flex-direction: column; justify-content: center; padding: 60px 8vw 60px 6vw; max-width: 640px; }
.over-label { font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 18px; opacity: 0.75; }
.over-kop { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 44px; line-height: 1.15; margin-bottom: 28px; }
.over-tekst p { font-size: 14px; line-height: 1.85; margin-bottom: 18px; }
.over-citaat { text-align: center; padding: 100px 24px; background: var(--white); border-bottom: 1px solid rgba(58,48,40,0.35); }
.over-citaat p { font-family: 'Cormorant Garamond', serif; font-size: 26px; line-height: 1.5; max-width: 640px; margin: 0 auto; }
.over-tekens { display: flex; justify-content: center; gap: 36px; font-family: 'Cormorant Garamond', serif; font-size: 13px; margin-bottom: 32px; opacity: 0.7; }
/* 23-10-2026: was mosgroen #666042, op verzoek van Charelle bruin (chocolade, gekozen uit 4 tinten) */
.over-groen { background: #5e3f2c; color: #faf7f3; }
.over-groen .over-foto { background: #5e3f2c; border-right-color: rgba(250,247,243,0.35); }
.over-groen .over-kader { border-color: #faf7f3; }
.over-groen .over-tekst p { font-family: 'Cormorant Garamond', serif; font-size: 26px; line-height: 1.45; }
.over-knop { align-self: flex-start; margin-top: 12px; padding: 10px 22px; border: 1px solid #faf7f3; color: #faf7f3; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: background .3s, color .3s; }
.over-knop:hover { background: #faf7f3; color: #5e3f2c; }
.over-bts { background: var(--white); }
.over-bts .bts-grid img { border-radius: 0; height: auto; aspect-ratio: 3 / 4; }
@media (max-width: 800px) {
  .over-split { grid-template-columns: 1fr; min-height: 0; }
  .over-foto { border-right: none; border-bottom: 1px solid rgba(58,48,40,0.35); padding: 40px 24px; }
  .over-tekst { padding: 40px 24px; }
  .over-kop { font-size: 34px; }
  .over-citaat p, .over-groen .over-tekst p { font-size: 21px; }
}
section.over-split { padding: 0; }

/* Papierstructuur (06-10-2026), uit de wedding-brochure: crème gevouwen papier, als grijze laag
   over de eigen achtergrondkleur heen gelegd, zodat elke kleur papier wordt. */
.over-foto, .over-groen, .over-groen .over-foto {
  background-image: url('afbeeldingen/papier-structuur.jpg');
  background-size: cover; background-position: center;
  background-blend-mode: multiply;
}

/* Home: "Plan een kennismaking" boven Instagram (06-10-2026), alles klikt door naar contact.html */
.kennismaking { background: var(--white); text-align: center; padding: 90px 24px; border-top: 1px solid rgba(58,48,40,0.25); border-bottom: 1px solid rgba(58,48,40,0.25); }
.kennismaking-link { display: block; font-family: 'Cormorant Garamond', serif; font-size: 44px; font-weight: 400; color: var(--brown); text-decoration: none; margin: 6px 0 30px; }
.kennismaking-knop { display: inline-block; padding: 11px 26px; border: 1px solid var(--brown); color: var(--brown); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: background .3s, color .3s; }
.kennismaking-knop:hover { background: var(--brown); color: var(--white); }
@media (max-width: 800px) { .kennismaking-link { font-size: 32px; } }

/* 08-10-2026: Wedding-kop met de flatlay van de styled shoot (ringen, kaartjes, schoenen).
   Donker laagje eroverheen zodat de witte tekst goed leesbaar is. */
.page-header-foto {
  position: relative; margin-top: 0;
  height: 700px; display: flex; /* 13-10-2026: was 380px, Charelle wilde hem bijna dubbel zo groot */ flex-direction: column; justify-content: center; align-items: center;
  padding: 0 48px;
  background: linear-gradient(rgba(40,32,26,0.38), rgba(40,32,26,0.38)),
              url('afbeeldingen/flatlay-styled-shoot.jpg') center / cover no-repeat;
}
.page-header-foto .section-tag,
.page-header-foto .section-title { color: #fff; }
.page-header-foto .section-title { font-size: 40px; }
@media (max-width: 768px) {
  .page-header-foto { height: 480px; padding: 0 24px; }
  .page-header-foto .section-title { font-size: 30px; }
}

/* 08-10-2026: Myrthe & Jared, lange namen bij de credits ("Styled shoot & concept") */
.credits-breed span { min-width: 200px; }
@media (max-width: 768px) {
  .credits-breed li { margin-bottom: 8px; }
  .credits-breed span { display: block; min-width: 0; }
}

/* 08-10-2026: FAQ op de Wedding-pagina, na De investering. Twee kolommen, op mobiel één. */
.faq { background: var(--white); }
.investering + .faq { padding-top: 16px; }
.faq-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px;
  max-width: 1000px; margin: 0 auto;
}
.faq-item { padding: 24px 0; border-top: 1px solid rgba(58,48,40,0.15); }
.faq-item h3 {
  font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 21px;
  margin-bottom: 8px;
}
.faq-item p { font-size: 14px; line-height: 1.7; opacity: 0.8; }
@media (max-width: 768px) {
  .faq-inner { grid-template-columns: 1fr; }
}

/* 08-10-2026: bedankbericht na het wedding-formulier, eerste regel als kop */
.kennismaking-bedankt .bedankt-kop { font-size: 32px; font-style: italic; margin-bottom: 20px; }

/* 08-10-2026: foto op Home loopt door tot halverwege de witruimte boven het portfolio.
   Foto 40px langer, witruimte 40px korter: het portfolio blijft op dezelfde plek. */
.hero { height: calc(75vh + 40px); }
.hero + .portfolio { padding-top: 40px; }
@media (max-width: 768px) {
  .hero { height: calc(75vh + 30px); }
  .hero + .portfolio { padding-top: 30px; }
}

/* 08-10-2026: Vogue-foto van Charelle op Home bewust in zwart-wit (haar keuze, uitzondering op kleur) */
img.zwartwit { filter: grayscale(1); }
.about-knop { margin-top: 12px; }

/* 08-10-2026: Charelle vindt de dunne omlijnde knop cleaner dan het oranje vlak.
   Versturen-knoppen van alle formulieren nu net als 'Naar contact' / 'Lees meer'. */
.kennismaking-submit {
  background: transparent; color: var(--brown); border: 1px solid var(--brown); border-radius: 0;
  padding: 12px 34px; font-size: 11px; letter-spacing: 2px;
  transition: background .3s, color .3s;
}
.kennismaking-submit:hover { background: var(--brown); color: var(--white); }

/* 08-10-2026: dun donkerbruin lijntje om de foto in het Over mij-blok op Home, zoals op About me */
.about-photo { border: 1px solid var(--brown); padding: 4px; border-radius: 0; background: none; box-sizing: border-box; }
.about-photo img { border-radius: 0; }

/* 12-10-2026: Love Notes-foto met hetzelfde dunne bruine lijntje + 4px ruimte als de Over mij-foto */
.love-notes-photo { border: 1px solid var(--brown); padding: 4px; border-radius: 0; box-sizing: border-box; }
.love-notes-photo { aspect-ratio: auto; overflow: visible; align-self: center; }
/* De verhouding zit op de foto zelf, anders schuift de foto in Safari over de onderste ruimte heen */
.love-notes-photo img { border-radius: 0; height: auto; aspect-ratio: 3 / 4; }

/* 13-10-2026: Werkwijze (Wedding). Foto kleiner (was ca. 400px breed) met dun bruin lijntje + 4px,
   verhouding op de foto zelf, niet op het kader (anders raakt de onderkant de rand in Safari).
   Stappen 01 t/m 05 dichter op elkaar (was 40px). */
.werkwijze-steps { gap: 26px; }
.werkwijze-photo {
  flex: 0 0 320px; aspect-ratio: auto; overflow: visible; border-radius: 0;
  border: 1px solid var(--brown); padding: 4px; box-sizing: border-box;
}
.werkwijze-photo img { height: auto; aspect-ratio: 3 / 4; }
@media (max-width: 768px) {
  /* 13-10-2026: rechtop, hele foto zichtbaar (liggend kader zoomde in); alleen een klein stukje
     van de onderkant valt weg */
  .werkwijze-photo { flex: none; width: 100%; max-width: 320px; margin: 0 auto; }
  .werkwijze-photo img { aspect-ratio: 4 / 5; object-position: center top; }
}

/* 13-10-2026: Branding-kop met Indy (The Odder Side), zelfde opzet als de Wedding-kop.
   Zwarte filmrand is van de foto afgesneden. */
.kop-branding {
  background: linear-gradient(rgba(40,32,26,0.38), rgba(40,32,26,0.38)),
              url('afbeeldingen/branding-kop-indy.jpg') center 35% / cover no-repeat;
}

/* 13-10-2026: namenlijstjes op de projectpagina's in twee kolommen, zodat alle @-namen
   precies onder elkaar beginnen (de linkerkolom wordt zo breed als het langste label). */
.project-page-credits { display: grid; grid-template-columns: max-content auto; column-gap: 18px; }
.project-page-credits li { display: contents; }
.project-page-credits li > span:first-child { min-width: 0; }
.project-credits .credit-naam { display: inline; min-width: 0; text-transform: none; letter-spacing: 0; font-size: inherit; }
@media (max-width: 768px) {
  /* 13-10-2026, telefoon: ook naast elkaar (Charelle wil niet onder elkaar), iets minder ruimte */
  .project-page-credits { column-gap: 12px; row-gap: 2px; font-size: 11px; }
  .project-page-credits li > span:first-child { align-self: center; }
}

/* 13-10-2026: minder witruimte op de projectpagina's (Paulien, Jonas & María, Odder Side, ...).
   Was: kop 20px + titel 24px + intro 56px onder, 72px tussen de films. */
.page-header + .project-page { margin-top: -28px; }
.project-page-intro { margin-bottom: 28px; }
.project-page-film { margin-bottom: 48px; }
.project-page-film h2 { margin-bottom: 12px; }
.project-page-credits { margin-top: -20px; }   /* namen 28px onder de laatste film */

/* 13-10-2026: alleen op de telefoon (computer blijft hetzelfde).
   - Love Notes: eerst de tekst, dan de foto
   - voettekst: "About" i.p.v. "About me" zodat alles past; pijltje naar boven rechts,
     tussen de Instagram-foto's en "Contact" */
.alleen-telefoon { display: none; }
@media (max-width: 768px) {
  .love-notes-content { order: -1; }
  .alleen-groot { display: none; }
  .alleen-telefoon { display: inline; }
  footer { padding: 40px 24px 24px; }
  .footer-top { flex-wrap: wrap; }
  .footer-links { width: 100%; justify-content: space-between; gap: 0; }
  .footer-top-btn { order: -1; margin-left: auto; margin-bottom: 14px; }
}

/* 13-10-2026, alleen telefoon: portfolio-tekst om en om uitlijnen (1e links, 2e rechts, ...).
   Tekstblok over de volle breedte, anders zette een kort tekstje (The Odder Side) zich in het midden. */
@media (max-width: 768px) {
  .project-info { width: 100%; }
  .project:nth-child(odd of .project) .project-info { text-align: left; }
  .project:nth-child(even of .project) .project-info { text-align: right; }
}

/* 13-10-2026: Love Notes dichter op "Over mij" (zelfde crème achtergrond, dus was het 80 + 80px wit) */
.about + .love-notes { padding-top: 16px; }

/* 13-10-2026, alleen telefoon: foto van Charelle in "Over mij" op Home iets groter (was 200 x 260) */
@media (max-width: 768px) {
  .about-photo { width: 250px; height: 325px; }
}

/* 16-10-2026: De investering. Alleen het linkerblok (prijs) ligt op blauw papier uit de
   wedding-brochure, flink lichter gemaakt, met een dun bruin lijntje eromheen op 4px afstand
   (zoals bij haar foto's). Tekst donkerbruin. Rechterkolom blijft effen. */
.investering-card {
  background:
    linear-gradient(rgba(250,248,245,0.45), rgba(250,248,245,0.45)),
    #a9bfd6 url('afbeeldingen/papier-blauw.jpg') center / cover no-repeat;
  color: var(--brown); border-radius: 0;
  outline: 1px solid #3a3028; outline-offset: 4px;
}
.investering-card h3, .investering-sub { color: var(--brown); }
.investering-card p { opacity: 1; }
.investering-card .prijs { color: var(--brown); }
.investering-list li::before { color: var(--brown); }

/* 16-10-2026: "Wat ik belangrijk vind" op Wedding, tussen Werkwijze en De investering.
   Drie punten naast elkaar met een dun lijntje erboven, op mobiel onder elkaar. */
.belangrijk { background: var(--white); }
.werkwijze + .belangrijk, .belangrijk + .investering { padding-top: 0; }
.belangrijk-inner {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px;
  max-width: 1000px; margin: 0 auto;
}
.belangrijk-item { padding-top: 24px; border-top: 1px solid rgba(58,48,40,0.25); }
.belangrijk-item h3 {
  font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 22px; margin-bottom: 10px;
}
.belangrijk-item p { font-size: 14px; line-height: 1.7; }
@media (max-width: 768px) {
  .belangrijk-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* 16-10-2026: "Wat ik belangrijk vind" in de vorm van het citaat op About me: romeinse cijfers
   I, II, III klein erboven, tekst gecentreerd in Cormorant, dun lijntje eronder. */
.belangrijk { border-bottom: 1px solid rgba(58,48,40,0.35); padding-bottom: 100px; }
.belangrijk + .investering { padding-top: 80px; }
.belangrijk-inner { gap: 0 64px; }
.belangrijk-item { border-top: 0; padding-top: 0; text-align: center; }
.belangrijk-num {
  font-family: 'Cormorant Garamond', serif; font-size: 13px; margin-bottom: 20px; opacity: 0.7;
}
.belangrijk-item h3 {
  font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; margin-bottom: 16px; opacity: 0.75;
}
.belangrijk-item p { font-family: 'Cormorant Garamond', serif; font-size: 22px; line-height: 1.5; }
@media (max-width: 768px) {
  .belangrijk { padding-bottom: 60px; }
  .belangrijk + .investering { padding-top: 60px; }
  .belangrijk-inner { gap: 44px; }
  .belangrijk-item p { font-size: 20px; }
}

/* 16-10-2026: meer knoppen naar contact (CTA's).
   "Let's meet" linksboven in het menu, zelfde kleur als het menu-icoontje (wit op foto, bruin na scrollen). */
.nav-cta {
  grid-column: 1; justify-self: start;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
  color: var(--white); border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color 0.4s ease, border-color 0.3s ease;
}
.nav-cta:hover { border-bottom-color: currentColor; }
nav.nav-cross.scrolled .nav-cta { color: var(--brown); }
/* Kleine knop aan het eind van een blok: korte vraag erboven, dun omlijnde knop eronder. */
.cta-klein { text-align: center; padding-top: 64px; }
.cta-klein-tag {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; margin-bottom: 18px;
}
.project-page .cta-klein { padding: 24px 0 48px; }
@media (max-width: 800px) {
  .nav-cta { font-size: 10px; letter-spacing: 1.5px; }
  .cta-klein { padding-top: 44px; }
}

/* 23-10-2026: Algemene voorwaarden. Link onderin het lichte regeltje van de footer,
   en een eigen rustige leespagina (smalle kolom, artikelnummers in accentkleur). */
.footer-bottom a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; margin-left: 10px; }
.footer-bottom a:hover { opacity: 0.8; }
.voorwaarden { background: var(--cream); padding-top: 30px; }
.voorwaarden-inner { max-width: 720px; margin: 0 auto; }
.voorwaarden .av-versie { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; text-align: center; opacity: 0.7; margin-bottom: 40px; }
.voorwaarden h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 30px;
  margin: 56px 0 20px; padding-top: 32px; border-top: 1px solid rgba(58,48,40,0.2);
}
.voorwaarden .av-versie + h2 { margin-top: 0; }
.voorwaarden h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 21px; margin: 32px 0 10px; }
.voorwaarden p, .voorwaarden li { font-size: 14px; line-height: 1.75; margin-bottom: 10px; }
.voorwaarden .av-nr { color: var(--deep-accent, #386080); font-weight: 500; margin-right: 4px; }
.voorwaarden ul { margin: 0 0 14px 20px; }
.av-tabel { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 14px; }
.av-tabel th, .av-tabel td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid rgba(58,48,40,0.2); vertical-align: top; }
.av-tabel th { font-weight: 500; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
@media (max-width: 768px) {
  .voorwaarden h2 { font-size: 26px; }
  .footer-bottom a { display: inline-block; margin-left: 0; margin-top: 6px; }
}

/* 23-10-2026: About me bovenaan, papier loopt door over het hele blok (foto én tekst),
   net als bij het mosgroene blok: één vel papier i.p.v. alleen achter de foto. */
.over-eerste {
  background-color: var(--cream);
  background-image: url('afbeeldingen/papier-structuur.jpg');
  background-size: cover; background-position: center;
  background-blend-mode: multiply;
}
.over-eerste .over-foto { background: transparent; }
/* 23-10-2026: middelste lijn tussen foto en tekst weg (bovenste blok én mosgroene blok), zodat het één vel papier is. */
.over-eerste .over-foto, .over-groen .over-foto { border-right: none; }
@media (max-width: 768px) {
  .over-eerste .over-foto, .over-groen .over-foto { border-bottom: none; }
}
/* 23-10-2026: bovenste About-me-blok op licht blauw papier, hetzelfde als het prijsblok op Wedding. */
.over-eerste {
  background:
    linear-gradient(rgba(250,248,245,0.45), rgba(250,248,245,0.45)),
    #a9bfd6 url('afbeeldingen/papier-blauw.jpg') center / cover no-repeat;
}
.over-eerste { background-blend-mode: normal; } /* 23-10: 'multiply' van het crème papier maakte het blauw donker */

/* 23-10-2026: About me zonder balk bovenin. Het blauwe papier loopt door tot bovenaan de pagina,
   menu (Let's meet, logo, streepjes) staat er bruin op. Na scrollen komt de gewone balk terug. */
nav.nav-op-licht .nav-cta { color: var(--brown); }
nav.nav-op-licht .hamburger span { background: var(--brown); }
.over-eerste { margin-top: 0; border-top: none; }
.over-eerste .over-foto, .over-eerste .over-tekst { padding-top: 130px; }
@media (max-width: 768px) {
  .over-eerste .over-foto { padding-top: 100px; }
  .over-eerste .over-tekst { padding-top: 40px; }
}

/* 23-10-2026 PROEF: het vlak in oud roze i.p.v. chocolade (#5e3f2c). Terug naar chocolade = dit blok weghalen.
   Op roze is wit niet leesbaar, dus tekst, fotokader en knop in donkerbruin. */
.over-groen, .over-groen .over-foto { background-color: #e3c2b6; color: var(--brown); }
.over-groen .over-kader { border-color: var(--brown); }
.over-groen .over-knop { border-color: var(--brown); color: var(--brown); }
.over-groen .over-knop:hover { background: var(--brown); color: #e3c2b6; }
/* 23-10-2026: in het roze blok staat de foto rechts, tekst links (op de telefoon blijft de foto bovenaan). */
@media (min-width: 769px) {
  .over-groen .over-foto { order: 2; }
  .over-groen .over-tekst { padding: 60px 6vw 60px 8vw; justify-self: end; }
}

/* ===== 23-10-2026 PROEF alleen op About me (body.proef-rood) =====
   Charelle: alle tekst flink kleiner (zoals haar Brand film-voorbeeld), tekst op wit/beige/roze in rood #7E2831,
   op het blauwe papier off-white. Bevalt het, dan naar de hele site; zo niet: class weghalen uit about.html. */
body.proef-rood { --rood: #7E2831; --offwit: #faf7f3; color: var(--rood); }
/* rood op lichte vlakken */
.proef-rood .over-citaat, .proef-rood .over-groen, .proef-rood .over-bts, .proef-rood .kennismaking,
.proef-rood .instagram, .proef-rood footer, .proef-rood .section-title, .proef-rood .section-tag,
.proef-rood .kennismaking-link, .proef-rood .instagram-header-left span, .proef-rood .instagram-handle,
.proef-rood .footer-links a, .proef-rood .footer-bottom { color: var(--rood); }
.proef-rood .over-groen .over-kader, .proef-rood .over-bts .over-kader { border-color: var(--rood); }
.proef-rood .over-groen .over-knop, .proef-rood .kennismaking-knop { border-color: var(--rood); color: var(--rood); }
.proef-rood .over-groen .over-knop:hover, .proef-rood .kennismaking-knop:hover { background: var(--rood); color: var(--offwit); }
.proef-rood .over-citaat, .proef-rood .over-split, .proef-rood .kennismaking, .proef-rood .footer-top { border-color: rgba(126,40,49,0.3); }
.proef-rood .instagram svg, .proef-rood footer svg { stroke: var(--rood); }
.proef-rood .instagram svg circle[fill] { fill: var(--rood); }
/* off-white op het blauwe papier, ook het menu zolang het over het blauw staat */
.proef-rood .over-eerste, .proef-rood .over-eerste .over-tekst { color: var(--offwit); }
.proef-rood .over-eerste .over-kader { border-color: var(--offwit); }
.proef-rood nav.nav-op-licht:not(.scrolled) .nav-cta { color: var(--offwit); }
.proef-rood nav.nav-op-licht:not(.scrolled) .hamburger span { background: var(--offwit); }
.proef-rood nav.scrolled .nav-cta { color: var(--rood); }
.proef-rood nav.scrolled .hamburger span { background: var(--rood); }
/* flink kleiner (± 25%) */
.proef-rood .over-kop { font-size: 32px; margin-bottom: 22px; }
.proef-rood .over-tekst p { font-size: 12px; line-height: 1.8; }
.proef-rood .over-label, .proef-rood .section-tag, .proef-rood .instagram-handle { font-size: 10px; }
.proef-rood .over-citaat p, .proef-rood .over-groen .over-tekst p { font-size: 19px; }
.proef-rood .section-title { font-size: 27px; }
.proef-rood .kennismaking-link { font-size: 32px; }
.proef-rood .kennismaking-knop, .proef-rood .over-knop, .proef-rood .nav-cta { font-size: 9.5px; }
.proef-rood .instagram-header-left span { font-size: 19px; }
.proef-rood .footer-links a { font-size: 13px; }
.proef-rood .footer-bottom { font-size: 10px; }
@media (max-width: 768px) {
  .proef-rood .over-kop { font-size: 26px; }
  .proef-rood .over-citaat p, .proef-rood .over-groen .over-tekst p { font-size: 16px; }
  .proef-rood .kennismaking-link { font-size: 25px; }
}

/* 23-10-2026: het roze vlak toch hetzelfde licht blauwe papier als bovenaan (roze proef vervalt). */
.over-groen, .over-groen .over-foto {
  background:
    linear-gradient(rgba(250,248,245,0.45), rgba(250,248,245,0.45)),
    #a9bfd6 url('afbeeldingen/papier-blauw.jpg') center / cover no-repeat;
  background-blend-mode: normal;
}
.over-groen .over-foto { background: transparent; }
/* proef: op blauw off-white */
.proef-rood .over-groen, .proef-rood .over-groen .over-tekst { color: var(--offwit); }
.proef-rood .over-groen .over-kader { border-color: var(--offwit); }
.proef-rood .over-groen .over-knop { border-color: var(--offwit); color: var(--offwit); }
.proef-rood .over-groen .over-knop:hover { background: var(--offwit); color: var(--rood); }

/* 23-10-2026 PROEF About me: "Plan een kennismaking" ook op het licht blauwe papier, tekst en knop off-white. */
.proef-rood .kennismaking {
  background:
    linear-gradient(rgba(250,248,245,0.45), rgba(250,248,245,0.45)),
    #a9bfd6 url('afbeeldingen/papier-blauw.jpg') center / cover no-repeat;
  border-color: transparent;
}
.proef-rood .kennismaking, .proef-rood .kennismaking .section-tag, .proef-rood .kennismaking-link { color: var(--offwit); }
.proef-rood .kennismaking-knop { border-color: var(--offwit); color: var(--offwit); }
.proef-rood .kennismaking-knop:hover { background: var(--offwit); color: var(--rood); }
/* 23-10-2026 PROEF About me: Instagram + onderste balk ook op het gebroken wit, net als citaat en More of me. */
.proef-rood .instagram, .proef-rood footer { background: var(--white); }

/* ===== 23-10-2026 kleinere letters op de HELE site (Charelle: "nergens nog grotere size").
   Zelfde maat als de proef op About me: lopende tekst 12px, koppen ± 25% kleiner.
   Alleen grootte; kleuren blijven per pagina zoals ze zijn. Formuliervelden blijven 16px (anders zoomt de iPhone in). */
.section-tag, .love-notes-tag, .over-label { font-size: 10px; }
.section-title { font-size: 27px; }
.page-header-foto .section-title { font-size: 30px; }
.about-text p, .werkwijze-content p, .investering-card p, .investering-list li, .investering-side p,
.investering-side ul li, .project-desc, .project-page-intro, .skill-card p, .kennismaking-intro p,
.love-notes-count, .contact-direct, .faq-item p, .voorwaarden p, .voorwaarden li, .av-tabel { font-size: 12px; line-height: 1.8; }
.about-text .highlight, .werkwijze-content h3, .investering-side h3, .skill-card h3, .faq-item h3,
.voorwaarden h3, .cta-klein-tag { font-size: 17px; }
.werkwijze-num { font-size: 24px; }
.investering-card h3 { font-size: 19px; }
.investering-sub, .love-notes-quote { font-size: 14px; }
.about-tagline, .kennismaking-bedankt p { font-size: 16px; }
.project-title { font-size: 20px; }
.project-page-film h2 { font-size: 22px; }
.kennismaking-intro h3, .love-notes-names, .contact-kaart-titel, .voorwaarden h2 { font-size: 24px; }
.kennismaking-bedankt .bedankt-kop { font-size: 26px; }
.kennismaking-link { font-size: 32px; }
.testimonial-quote { font-size: 13px; }
.instagram-header-left span { font-size: 19px; }
.footer-links a, .km-link a { font-size: 13px; }
.footer-bottom { font-size: 10px; }
.belangrijk-item p { font-size: 16px; }
.kennismaking-knop, .over-knop, .nav-cta { font-size: 9.5px; }
@media (max-width: 768px) {
  .page-header-foto .section-title { font-size: 24px; }
  .kennismaking-link { font-size: 25px; }
  .belangrijk-item p { font-size: 15px; }
  .voorwaarden h2 { font-size: 21px; }
}

/* 23-10-2026: "Like what you see?" had te veel ruimte boven zich (48px onder de laatste film + 64px).
   Nu alleen de 48px, net zo ver als tussen twee films. Alleen direct onder een film:
   24-10: "Is jullie datum nog vrij?" onder De investering plakte anders tegen het tekstvak. */
.project + .cta-klein { padding-top: 0; }
@media (max-width: 768px) { .project + .cta-klein { padding-top: 0; } }

/* 24-10-2026: onderkant (Instagram + onderste balk) overal gebroken wit, net als About me.
   Crème alleen nog bij de algemene voorwaarden (Charelle). */
.instagram, footer { background: var(--white); }
.pagina-voorwaarden .instagram, .pagina-voorwaarden footer { background: var(--cream); }

/* 24-10-2026: eigen dunne knoppenbalk over de film (film.js). Alleen zichtbaar bij aanwijzen;
   de YouTube-knoppen en -titel blijven weg doordat het schild de muis bij YouTube weghoudt. */
.yt-speler { position: relative; width: 100%; height: 100%; background: #2a221c; }
.yt-speler iframe, .yt-doel { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-schild { position: absolute; inset: 0; cursor: pointer; }
.yt-balk {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px;
  padding: 28px 18px 14px; color: #faf7f3;
  background: linear-gradient(transparent, rgba(42,34,28,0.55));
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
.yt-speler.balk-aan .yt-balk { opacity: 1; pointer-events: auto; }
.yt-speler:not(.balk-aan) .yt-schild { cursor: none; }
.yt-knop { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; width: 20px; height: 20px; flex-shrink: 0; }
.yt-knop svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.yt-tijd { font-size: 10px; letter-spacing: 1px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.yt-lijn { flex: 1; height: 14px; display: flex; align-items: center; cursor: pointer; }
.yt-lijn::before { content: ''; position: absolute; }
.yt-lijn { background: linear-gradient(rgba(250,247,243,0.35), rgba(250,247,243,0.35)) center / 100% 1px no-repeat; }
.yt-lijn-vol { height: 1px; width: 0; background: #faf7f3; }
.yt-speler:fullscreen, .yt-speler:-webkit-full-screen { width: 100vw; height: 100vh; }
/* 24-10-2026: dunne zwarte lijn rond de film (rand van de YouTube-speler) → speler 2px groter dan het kader
   en de rand wegknippen; geen donkere achtergrond meer achter de speler. */
.yt-speler { background: transparent; overflow: hidden; }
.yt-speler iframe, .yt-speler .yt-doel { inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); }

/* 24-10-2026: zinnetje onder Versturen bij het Wedding-formulier op Contact. */
.km-onder-knop { grid-column: 1 / -1; text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 17px; margin-top: -4px; }

/* 24-10-2026: "<3" achter "Ik help je heel graag" lijnde niet uit: Cormorant zet de 3 standaard als
   "ouderwets" cijfer dat onder de regel zakt. Charelle wil wel echt <3 (geen hartje-icoon), dus: rechte cijfers. */
.titel-hartje { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; white-space: nowrap; }

/* 24-10-2026 menu (Charelle):
   - aanwijzen van een menu-item: donkerbruin (rood en oranje allebei niet mooi);
   - het kruisje kleiner (18px i.p.v. 26px breed), middelste streepje helemaal weg;
   - klikken naast de woorden sluit het menu nu ook op de computer (zie script in elke pagina). */
.menu-panel a:hover { color: var(--brown); } /* 24-10: oranje ook niet mooi, donkerbruin */
.hamburger.open { width: 18px; }
.hamburger.open span:nth-child(2) { visibility: hidden; }

/* 24-10-2026 Home: minder ruimte tussen "Plan een kennismaking" en Instagram.
   30-10-2026: de streep eronder toch weer terug (Charelle), en boven "Let's meet" even weinig ruimte als eronder. */
.km-home { padding-top: 40px; padding-bottom: 40px; }
.km-home + .instagram { padding-top: 40px; }

/* 24-10-2026 About me: derde alinea ("En buiten het werk?") staat nu naast de tweede foto, in gewone kleine tekst
   (niet de grote citaatletter van dat vlak). De zin "Gevestigd in Nederland..." staat nu boven Behind the scenes. */
.over-groen .over-tekst p.over-lopend, .proef-rood .over-groen .over-tekst p.over-lopend {
  font-family: 'Montserrat', sans-serif; font-size: 12px; line-height: 1.8; margin-bottom: 26px; }
.bts-intro { text-align: center; font-size: 12px; line-height: 1.8; max-width: 520px; margin: 0 auto 36px; }

/* 24-10-2026 iPhone: More of me (About me) drie foto's naast elkaar, kleiner. Computer blijft zoals het was. */
@media (max-width: 768px) {
  .over-bts .bts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .over-bts .bts-grid .over-kader { padding: 3px; }
}

/* 24-10-2026 About me: "More of me" en de drie foto's gaan naar Instagram. Geen effect bij aanwijzen. */
a.over-kader { display: block; }
.bts-titel-link { color: inherit; text-decoration: none; }

/* 24-10-2026: wettelijk verplichte bedrijfsgegevens onderaan elke pagina (naam, plaats, KvK, btw-id). */
.footer-bedrijf { display: block; margin-top: 8px; opacity: 0.8; }

/* 24-10-2026 Home: sinds de kleinere letters leken de Vogue-foto (Over mij) en de Love Notes-foto te groot
   naast de tekst. Daarna (zelfde dag): beide even groot, 280px breed. Alleen op de computer. */
@media (min-width: 769px) {
  /* Charelle: beide foto's even groot, de breedte die de Vogue-foto eerst had (280px). Verhouding 3:4 op de foto
     zelf (zie herinnering "fotorand onderkant raakt"). */
  .about-photo { width: 280px; height: auto; }
  .about-photo img { height: auto; aspect-ratio: 3 / 4; }
  .love-notes-photo { flex: 0 0 280px; }
  /* en elke foto precies in het midden van de ruimte tussen de tekst en de rand */
  .about-text, .love-notes-content { flex: 0 1 58%; }
  .about-photo, .love-notes-photo { margin-left: auto; margin-right: auto; }
  .about-inner, .love-notes-inner { gap: 0; }
}

/* 25-10-2026: Engelse versie (map en/). padding-left = evenveel ruimte als de letterafstand rechts, zo staat het streepje mooi in het midden.
   Taalknop rechtsonder in het uitklapmenu en klein onder het pijltje
   naar boven, met een dun streepje eronder. Nederlandse pagina's: ENG, Engelse pagina's: NL. */
/* 29-10-2026: NL en ENG altijd naast elkaar, iets kleiner. De taal waarin je leest is onderstreept,
   de andere iets lichter (en klikbaar). */
.menu-panel .menu-taal {
  position: absolute; right: 56px; bottom: 40px; display: flex; gap: 14px;
  font-family: 'Montserrat', sans-serif; font-size: 9.5px; letter-spacing: 0.18em; color: #fff;
}
.menu-taal a, .menu-taal .taal-nu, .footer-taal a, .footer-taal .taal-nu {
  color: inherit; text-decoration: none; padding-bottom: 3px; padding-left: 0.18em; border-bottom: 1px solid transparent;
}
.menu-taal .taal-nu, .footer-taal .taal-nu { border-bottom-color: currentColor; }
.menu-taal a, .footer-taal a { opacity: 0.55; }
.menu-taal a:hover, .footer-taal a:hover { opacity: 1; }
/* menu-links zijn groot en worden bruin bij aanwijzen; de taalkeuze niet */
.menu-panel .menu-taal a, .menu-panel .menu-taal a:hover {
  font: inherit; letter-spacing: inherit; text-transform: none; color: #fff; display: inline; padding-top: 0; padding-right: 0; margin: 0;
}
.footer-rechts { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.footer-taal {
  display: flex; gap: 10px;
  font-family: 'Montserrat', sans-serif; font-size: 8px; letter-spacing: 0.18em; line-height: 1.4; color: var(--brown);
}
.footer-taal a, .footer-taal .taal-nu { padding-bottom: 1px; }
.proef-rood .footer-taal { color: var(--rood); }
@media (max-width: 768px) {
  .footer-rechts { order: -1; margin-left: auto; margin-bottom: 14px; }
  .footer-rechts .footer-top-btn { margin: 0; }
}
/* Engelse algemene voorwaarden: regel dat de Nederlandse tekst geldt */
.av-vertaling { font-style: italic; opacity: 0.8; }

/* 29-10-2026: Wedding. Kop "Wat leuk dat je er bent!" weer weg; na de kopfoto meteen de films (weinig ruimte),
   daaronder Charelles tekst met "Liefs, Charelle" en een dun bruin lijntje, dan de werkwijze. */
.wedding-films { padding-top: 40px; padding-bottom: 36px; } /* minder ruimte tussen knop en tekst */
.wedding-tekst { background: var(--white); text-align: center; padding: 0 24px 16px; }
.wedding-tekst + .werkwijze { padding-top: 0; }
.wedding-tekst p { font-size: 12px; line-height: 1.9; max-width: 600px; margin: 0 auto 16px; }
.wedding-tekst .wedding-intro-groet {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 19px; line-height: 1.4; margin-top: 28px;
}
.wedding-tekst::after { content: ''; display: block; width: 60px; height: 1px; background: var(--brown); opacity: 0.35; margin: 48px auto 0; }
@media (max-width: 768px) {
  .wedding-films { padding-top: 28px; padding-bottom: 28px; }
  .wedding-tekst { padding: 0 24px 8px; }
  .wedding-tekst::after { margin-top: 36px; }
}

/* 29-10-2026: Branding, "Zo werk ik" in I II III-vorm onder "Vertel me over je project". Geen dubbel lijntje. */
.kennismaking + .belangrijk { border-top: 0; padding-top: 90px; }
@media (max-width: 768px) { .kennismaking + .belangrijk { padding-top: 60px; } }
/* 29-10-2026: Branding, regel "voor wie" onder de films (eerst op de kopfoto, dat wilde ze niet) */
.voor-wie { background: var(--white); text-align: center; padding: 0 24px 72px; }
.voor-wie p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 19px; line-height: 1.5; max-width: 560px; margin: 0 auto; }
@media (max-width: 768px) { .voor-wie { padding-bottom: 48px; } .voor-wie p { font-size: 17px; } }

/* 31-10-2026: Wedding, "Destination wedding? Count me in!!" dikgedrukt. Cursief geprobeerd, afgekeurd (Charelle). */
.investering-sub { font-weight: 600; }

/* 31-10-2026: Branding. Knop "Let's meet" onder de regel "voor wie", en "Zo werk ik" (I II III) staat nu
   boven "Let's create" in plaats van eronder. Eén lijntje tussen die twee, geen dubbel. */
.voor-wie-knop { margin-top: 28px; }
.belangrijk + .kennismaking { border-top: 0; }
/* 31-10-2026: Branding had overal veel witruimte (Charelle). Blokken onder de films dichter op elkaar. */
.voor-wie { padding-bottom: 56px; }
.voor-wie + .belangrijk { padding-top: 0; }
#zo-werk-ik { padding-bottom: 56px; }
.belangrijk + .kennismaking { padding-top: 56px; padding-bottom: 56px; }
.belangrijk + .kennismaking + .instagram { padding-top: 48px; }
@media (max-width: 768px) {
  .voor-wie { padding-bottom: 44px; }
  #zo-werk-ik { padding-bottom: 44px; }
  .belangrijk + .kennismaking { padding-top: 44px; padding-bottom: 44px; }
  .belangrijk + .kennismaking + .instagram { padding-top: 40px; }
}

/* 01-11-2026: Branding, "Here to bring your vision to life" onder Zo werk ik (I II III). Eerst onder de knop Let's meet, op haar verzoek verplaatst (Charelle, NL + EN gelijk). */
.zo-werk-ik-onder { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 19px; line-height: 1.5; text-align: center; margin: 48px auto 0; padding: 0 24px; }
@media (max-width: 768px) { .zo-werk-ik-onder { font-size: 17px; margin-top: 36px; } }

/* 01-11-2026: Contact, Wedding. "I would love to get to know you" staat nu onder "Plan een kennismaking in"
   in plaats van onder de knop Versturen (Charelle). Bij Branding op dezelfde plek "Let's get creative together"
   (was "I would love to get creative together" onder de knop). */
.km-onder-titel { color: var(--rood, #7E2831); text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 19px; margin: -28px 0 44px; }