/* ---------- Design tokens ---------- */
:root {
  /* Ingetogen en premium: ivoor, donker notenhout en messing. */
  --bg: #f5f0e8;
  --surface: #fbf8f2;
  --sand: #ece4d6;
  --line: #dcd1bf;
  --ink: #1f1a15;
  --ink-deep: #15110d;
  --ink-soft: #6c6054;
  --accent: #b08d57;
  --accent-dark: #85673a;
  --accent-soft: #e6d6b8;
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --radius: 3px;
  --radius-lg: 4px;
  --radius-sm: 2px;
  --shadow: 0 24px 48px -28px rgba(21, 17, 13, 0.45);
  --shadow-sm: 0 10px 24px -18px rgba(21, 17, 13, 0.35);
  --container: 1180px;
  /* Eén set maten voor verticale ruimte. Secties sluiten strak op elkaar aan. */
  --space-section: clamp(4.5rem, 8vw, 7rem);
  --space-section-lg: clamp(5.5rem, 10vw, 8.5rem);
  --overlap: 0px;
  --overlap-radius: 0px;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  /* Heel fijne korrel, als papier of geschuurd hout: de achtergrond is niet
     meer helemaal vlak. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.33 0 0 0 0 0.25 0 0 0 0 0.15 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"),
    var(--bg);
  color: var(--text);
  font-weight: 350;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 1rem;
}

h1 { font-size: clamp(2.6rem, 4.5vw + 1rem, 4.4rem); }
h2 { font-size: clamp(2rem, 2.6vw + 1rem, 3rem); }
h3 { font-weight: 600; }

em { font-style: italic; color: var(--accent-dark); }

p { margin: 0 0 1rem; }

a { color: var(--ink); }

.lead {
  font-size: 1.15rem;
  font-weight: 300;
  color: var(--text-muted);
  max-width: 56ch;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}

.btn-primary:hover {
  background: var(--accent-dark);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--bg);
}

.btn-on-media {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

.btn-on-media:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- Toegankelijkheid ---------- */
/* Wie met het toetsenbord navigeert, ziet altijd waar hij is. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Verschijnt alleen bij de eerste Tab: meteen naar de inhoud, langs het menu. */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

/* ---------- Balkje bovenaan ---------- */
/* Hoort bij de header, dus het blijft mee bovenaan staan bij het scrollen. */
.usp-bar {
  background: var(--ink-deep);
  color: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid rgba(176, 141, 87, 0.3);
}

.usp-list {
  list-style: none;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 3rem);
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.usp-list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

/* Messing vinkje voor elk punt. */
.usp-list li::before {
  content: "";
  width: 0.7em;
  height: 0.38em;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg) translateY(-0.12em);
}

/* Smal scherm: één punt tegelijk, rustig wisselend. */
@media (max-width: 860px) {
  .usp-list {
    display: grid;
    justify-content: center;
    font-size: 0.64rem;
    letter-spacing: 0.14em;
  }

  .usp-list li {
    grid-area: 1 / 1;
    justify-content: center;
    opacity: 0;
    animation: usp-wissel 12s infinite;
  }

  .usp-list li:nth-child(2) { animation-delay: 4s; }
  .usp-list li:nth-child(3) { animation-delay: 8s; }

  .usp-list-4 li { animation-name: usp-wissel-4; animation-duration: 16s; }
  .usp-list-4 li:nth-child(4) { animation-delay: 12s; }
}

/* Met vier punten (feestdagen) past het pas op een breed scherm naast elkaar;
   daaronder wisselen ze elkaar af, net als op een telefoon. */
.usp-list-4 { letter-spacing: 0.14em; }

@media (min-width: 861px) and (max-width: 1240px) {
  .usp-list-4 {
    display: grid;
    justify-content: center;
  }

  .usp-list-4 li {
    grid-area: 1 / 1;
    justify-content: center;
    opacity: 0;
    animation: usp-wissel-4 16s infinite;
  }

  .usp-list-4 li:nth-child(2) { animation-delay: 4s; }
  .usp-list-4 li:nth-child(3) { animation-delay: 8s; }
  .usp-list-4 li:nth-child(4) { animation-delay: 12s; }
}

@media (min-width: 861px) and (max-width: 1240px) and (prefers-reduced-motion: reduce) {
  .usp-list-4 li:first-child { opacity: 1; }
}

@keyframes usp-wissel-4 {
  0%, 1.5% { opacity: 0; }
  4.5%, 22.5% { opacity: 1; }
  25.5%, 100% { opacity: 0; }
}

.usp-list .usp-feest { color: var(--accent-soft); }

@keyframes usp-wissel {
  0%, 2% { opacity: 0; }
  6%, 30% { opacity: 1; }
  34%, 100% { opacity: 0; }
}

/* Zonder beweging: alleen het eerste punt, stil. */
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .usp-list li:first-child { opacity: 1; }
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(245, 240, 232, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 1.5rem;
  gap: 1rem;
}

.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.nav-menu a {
  color: var(--text);
  text-decoration: none;
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
}

.nav-menu a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s ease;
}

.nav-menu a:not(.nav-cta):hover::after { width: 100%; }

.nav-cta {
  border: 1px solid var(--ink);
  color: var(--ink) !important;
  padding: 0.65rem 1.3rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-cta:hover { background: var(--ink); color: var(--bg) !important; }

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.4rem;
}

.nav-burger span {
  width: 24px;
  height: 1px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

/* Homepage header: transparent over the full-height photo, glassy once
   you scroll past it. Inner pages keep the plain "glassy from the start"
   .site-header above. */
.site-header-overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

.site-header-overlay .brand,
.site-header-overlay .nav-menu a {
  color: #fff;
}

.site-header-overlay .nav-menu a:not(.nav-cta)::after { background: #fff; }

.site-header-overlay .nav-cta {
  background: transparent;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.55);
}

.site-header-overlay .nav-cta:hover { background: #fff; color: var(--ink) !important; }

.site-header-overlay .nav-burger span { background: #fff; }

.site-header-overlay.is-scrolled {
  background: rgba(245, 240, 232, 0.92);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}

.site-header-overlay.is-scrolled .brand,
.site-header-overlay.is-scrolled .nav-menu a { color: var(--text); }

.site-header-overlay.is-scrolled .nav-menu a:not(.nav-cta)::after { background: var(--accent); }

.site-header-overlay.is-scrolled .nav-cta {
  background: transparent;
  color: var(--ink) !important;
  border-color: var(--ink);
}

.site-header-overlay.is-scrolled .nav-cta:hover { background: var(--ink); color: var(--bg) !important; }

.site-header-overlay.is-scrolled .nav-cta:hover { background: var(--accent-dark); }

.site-header-overlay.is-scrolled .nav-burger span { background: var(--ink); }

/* ---------- Hero: schermvullende foto, menu eroverheen ---------- */
/* De foto vult het hele eerste scherm, ook achter de menubalk. Onderaan een
   smalle donkere overgang met de zin en de drie houtsoorten, zodat alles op
   het eerste scherm staat. Op een telefoon: zie het blok bij max-width 720px. */
.hero-full {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--ink-deep);
  overflow: hidden;
}

.hero-full-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-full-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* De planken staan bovenin de foto: liever onderaan (de mantel) afsnijden. */
  object-position: 50% 0;
  transform-origin: 50% 0;
  opacity: 0;
  /* Heel langzame inzoom: de foto leeft, zonder af te leiden. Het is bewust een
     overgang en geen animatie — zo houdt de foto die je verlaat zijn stand vast
     tijdens het overvloeien, in plaats van terug te springen naar het begin. */
  transform: scale(1);
  transition: opacity 0.9s ease, transform 20s linear;
}

/* Hele brede schermen: iets hoger in de foto kijken, zodat de onderkant van de
   planken boven de zin blijft. */
@media (min-aspect-ratio: 17/9) { .hero-full-image { object-position: 50% 12%; } }
@media (min-aspect-ratio: 2/1) { .hero-full-image { object-position: 50% 22%; } }

.hero-full-image.is-active { opacity: 1; }

/* Pas na de eerste tekening aangezet (door het script), anders staat de eerste
   foto meteen ingezoomd en zie je de beweging niet. */
.hero-zoom-ready .hero-full-image.is-active { transform: scale(1.03); }

/* Boven: net genoeg donker voor een leesbaar menu. Onder: een smalle, snelle
   overgang naar zwart voor de zin en de houtsoorten. */
.hero-full-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(21, 17, 13, 0.6) 0, rgba(21, 17, 13, 0) 170px),
    linear-gradient(0deg, var(--ink-deep) 0, rgba(21, 17, 13, 0.88) 13%, rgba(21, 17, 13, 0.45) 22%, rgba(21, 17, 13, 0) 30%);
}

/* De zin op de band, boven de drie houtsoorten. */
.hero-tagline em { color: var(--accent-soft); }

.hero-tagline {
  position: relative;
  max-width: 44ch;
  margin: 0 auto;
  padding: 0 1.5rem clamp(1rem, 2.2vh, 1.75rem);
  text-align: center;
  text-shadow: 0 2px 18px rgba(21, 17, 13, 0.7);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.3vw + 1rem, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}

/* ---------- Drie keuzes in het startscherm ---------- */
/* Alleen tekst over de foto, als paar gecentreerd. De keuze waar je overheen
   beweegt komt rustig omhoog en laat er een verwijzing onder zien. */
.hero-choices {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: clamp(1.5rem, 6vw, 7rem);
  padding: 0 1.5rem clamp(2rem, 4.5vh, 3.25rem);
}



.hero-choice {
  display: block;
  flex: 0 1 300px;
  min-width: 0;
  text-align: center;
  text-decoration: none;
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero-choice:hover,
.hero-choice:focus-visible,
.hero-choice.is-active {
  transform: translateY(-14px);
}

.hero-choice-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.4vw + 1rem, 2.2rem);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 2px 16px rgba(21, 17, 13, 0.5);
  transition: color 0.4s ease;
}

.hero-choice:hover .hero-choice-title,
.hero-choice:focus-visible .hero-choice-title,
.hero-choice.is-active .hero-choice-title {
  color: #fff;
}

.hero-choice-desc {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 2px 14px rgba(21, 17, 13, 0.55);
  transition: color 0.4s ease;
}

.hero-choice:hover .hero-choice-desc,
.hero-choice:focus-visible .hero-choice-desc,
.hero-choice.is-active .hero-choice-desc {
  color: rgba(255, 255, 255, 0.92);
}

.hero-choice-prijs {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  text-shadow: 0 2px 14px rgba(21, 17, 13, 0.6);
}

/* Op de band is de korte beschrijving niet nodig; die staat op Producten. */
.hero-choice-desc { display: none; }

/* De verwijzing schuift mee omhoog en verschijnt pas bij de actieve keuze. */
.hero-choice-more {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-soft);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero-choice-more span {
  border-bottom: 1px solid rgba(230, 214, 184, 0.6);
  padding-bottom: 2px;
}

.hero-choice:hover .hero-choice-more,
.hero-choice:focus-visible .hero-choice-more,
.hero-choice.is-active .hero-choice-more {
  opacity: 1;
  transform: none;
}

@media (max-width: 720px) {
  /* Smal scherm: de foto als blok onder de menubalk (iets breder dan het
     scherm, planken in het midden), daaronder de zin en de houtsoorten. */
  .hero-full {
    --kop: 7.4rem;
    --foto-b: 118vw;
    min-height: 0;
    display: block;
  }

  .hero-full-media {
    position: relative;
    height: calc(var(--kop) + var(--foto-b) * 0.413);
  }

  .hero-full-image {
    inset: auto;
    top: var(--kop);
    left: calc(50vw - var(--foto-b) * 0.576);
    width: var(--foto-b);
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .hero-full-scrim {
    background:
      linear-gradient(180deg, var(--ink-deep) var(--kop), rgba(21, 17, 13, 0) calc(var(--kop) + 1.5rem)),
      linear-gradient(0deg, var(--ink-deep) 0, rgba(21, 17, 13, 0) 18%);
  }

  .hero-choices {
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding-bottom: 3rem;
  }

  .hero-choice { width: auto; flex: 1; }
  .hero-choice-title { font-size: 1.35rem; white-space: normal; }
  .hero-choice-prijs { letter-spacing: 0.1em; font-size: 0.66rem; }
  .hero-choice-more { display: none; }
}

/* Zonder muis (aanraakscherm) staan beide verwijzingen gewoon in beeld. */
@media (hover: none) {
  .hero-choice-more { opacity: 1; transform: none; }
  .hero-choice:hover, .hero-choice.is-active { transform: none; }
}

/* Wel bereikbaar voor schermlezers en zoekmachines, niet in beeld. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent-dark);
  margin: 0 0 1.1rem;
}

.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
}

.eyebrow-on-media { color: var(--accent-soft); }

.on-media { color: #fff; }

.tagline {
  font-size: 1.2rem;
  color: var(--text-muted);
  max-width: 46ch;
}

.tagline.on-media { color: rgba(255, 255, 255, 0.92); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 1.5rem;
}

.hero-actions .link-arrow { margin-top: 0; }

/* ---------- Rustig tevoorschijn komen bij het scrollen ---------- */
/* Alleen verbergen als JavaScript aanstaat; anders blijft alles gewoon staan. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js .reveal-delay-1 { transition-delay: 0.12s; }
.js .reveal-delay-2 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Sections ---------- */
.section {
  padding: var(--space-section) 0;
}

/* Techniek B — afgeronde overlap: de volgende sectie schuift met afgeronde
   bovenhoeken over de vorige heen. Alleen bij een bewust contrast (donker naar
   licht of andersom). De sectie heeft dus altijd een eigen achtergrond nodig. */
.section-overlap {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--overlap));
  border-top-left-radius: var(--overlap-radius);
  border-top-right-radius: var(--overlap-radius);
  padding-top: calc(var(--space-section) + var(--overlap));
}

/* Doorzichtig, zodat de lagen op de achtergrond (diepte) doorlopen. */
.section-overlap.on-bg { background: transparent; }
.section-overlap.on-dark { background: var(--ink-deep); }

.section-head {
  max-width: 60ch;
  margin-bottom: 3rem;
}

/* ---------- Diepte op de achtergrond (alle pagina's) ---------- */
/* Drie lagen achter de inhoud: warm licht, verre jaarringen (iets vaag) en
   dichtbije jaarringen. Ze schuiven elk in een ander tempo mee (main.js);
   dat verschil maakt de diepte. */
main {
  position: relative;
  isolation: isolate;
}

.diepte {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Onderaan zacht uitlopen, waar de inhoud ophoudt. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16rem), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 16rem), transparent);
}

.diepte > * {
  position: absolute;
  display: block;
  transform: translate3d(0, var(--diepte-y, 0px), 0);
  will-change: transform;
}

.diepte-ring {
  height: auto;
  user-select: none;
  /* Zacht naar de randen, nergens een harde lijn. */
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 88%);
          mask-image: radial-gradient(closest-side, #000 35%, transparent 88%);
}

.diepte-dichtbij {
  top: var(--ring-dichtbij-top, -6rem);
  right: -22vw;
  width: min(1250px, 88vw);
  opacity: 0.16;
}

.diepte-ver {
  top: var(--ring-ver-top, 48%);
  left: -18vw;
  width: min(900px, 64vw);
  opacity: 0.11;
  filter: blur(0.6px);
}

/* Derde laag, voor lange pagina's: rechtsonder, tussen de andere twee in. */
.diepte-onder {
  top: 74%;
  right: -24vw;
  width: min(1000px, 70vw);
  opacity: 0.12;
}

.diepte-gloed {
  top: var(--gloed-top, -10rem);
  right: -10vw;
  width: 70vw;
  height: 70vw;
  max-width: 1100px;
  max-height: 1100px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214, 170, 104, 0.16), rgba(214, 170, 104, 0.05) 55%, transparent);
}

/* Homepage: de lagen beginnen pas onder de grote openingsfoto. */
.page-home {
  --ring-dichtbij-top: calc(100svh - 4rem);
  --gloed-top: calc(100svh - 12rem);
  --ring-ver-top: 52%;
}

@media (max-width: 860px) {
  .diepte-dichtbij { width: 150vw; right: -70vw; opacity: 0.13; }
  .diepte-ver { width: 130vw; left: -60vw; opacity: 0.09; }
  .diepte-onder { width: 130vw; right: -60vw; opacity: 0.1; }
  .diepte-gloed { width: 120vw; height: 120vw; right: -50vw; }
}

/* Compactere secties (homepage: verhaal en 'wat ik graveer'). */
.section-compact { padding: clamp(2.5rem, 4.5vw, 4rem) 0; }
.home-stappen { padding-bottom: clamp(2rem, 3.5vw, 3rem); }
.engrave-divider.home-divider { padding: 0.5rem 0; }
.home-verhaal { padding-top: clamp(3rem, 5vw, 4.5rem); }

/* Foto van Jarno beweegt mee met het scrollen (main.js zet --p van 0 naar 1). */
.verhaal-animatie {
  --p: 1;
  transform: translate3d(calc((1 - var(--p)) * -40px), calc((1 - var(--p)) * 70px), 0)
             rotate(calc((1 - var(--p)) * -3deg)) scale(calc(0.9 + var(--p) * 0.1));
  opacity: calc(0.25 + var(--p) * 0.75);
  will-change: transform, opacity;
}

.verhaal-animatie::before {
  inset: calc(var(--p) * 1.25rem) calc(var(--p) * -1.25rem) calc(var(--p) * -1.25rem) calc(var(--p) * 1.25rem);
}
.home-graveer { padding-bottom: 0.5rem; }
.home-vragen { padding-top: clamp(2.5rem, 4vw, 3.5rem); }

/* ---------- Zo werkt het: vier stappen ---------- */
.steps-row {
  list-style: none;
  margin: 3.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.step-card {
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
}

.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: -3.375rem 0 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  color: var(--accent-dark);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.step-icon svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step-card:hover .step-icon {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateY(-3px);
}

.step-count {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.35rem;
}

.step-card h3 {
  font-size: clamp(1.3rem, 0.6vw + 1.1rem, 1.55rem);
  margin: 0;
}

/* Actieknop onder de vier stappen: drie houtstaaltjes die bij aanwijzen
   uit elkaar waaieren. */
.btn-hout {
  margin-top: 3rem;
  gap: 1rem;
  padding: 0.85rem 1.9rem 0.85rem 1.1rem;
}

.btn-hout::after {
  content: "\2192";
  transition: transform 0.25s ease;
}

.btn-hout:hover::after { transform: translateX(4px); }

.btn-hout-stalen {
  display: inline-flex;
  align-items: center;
}

.btn-hout-stalen span {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background-size: cover;
  background-position: center;
  transition: margin 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.3s ease, border-color 0.15s ease;
}

.btn-hout-stalen span + span { margin-left: -0.55rem; }

.btn-hout:hover .btn-hout-stalen span,
.btn-hout:focus-visible .btn-hout-stalen span { border-color: var(--accent-dark); }

.btn-hout:hover .btn-hout-stalen span + span,
.btn-hout:focus-visible .btn-hout-stalen span + span { margin-left: 0.2rem; }

.btn-hout:hover .btn-hout-stalen span:nth-child(1) { transform: rotate(-8deg); }
.btn-hout:hover .btn-hout-stalen span:nth-child(3) { transform: rotate(8deg); }

/* ---------- Techniek D — graveerlijn ---------- */
/* Eén keer op de hele site: een dunne, licht gebogen lijn die bij het scrollen
   wordt getekend, als een laser. */
.engrave-line {
  display: block;
  width: min(420px, 60%);
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.engrave-line path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: var(--lengte, 440);
  stroke-dashoffset: var(--lengte, 440);
  transition: stroke-dashoffset 1.4s ease-out;
}

.engrave-line.is-drawn path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .engrave-line path { stroke-dashoffset: 0; }
}

.engrave-divider {
  padding: calc(var(--space-section) * 0.5) 0;
}

/* ---------- Het verhaal ---------- */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Houten lijst om de foto: gestileerd, opgebouwd uit verlopen — geen extra
   afbeelding, dus hij kost niets aan laadtijd. */
.story-media {
  position: relative;
  margin: 0;
  padding: 0;
}

/* Een dunne messing lijn die iets verspringt achter de foto. */
.story-media::before {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 1px solid var(--accent);
  z-index: -1;
}

.story-media img {
  display: block;
  box-shadow: 0 30px 60px -30px rgba(21, 17, 13, 0.45), 0 12px 24px -16px rgba(21, 17, 13, 0.3);
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.02);
}

.story-text .btn { margin-top: 1rem; }

.story-text p {
  color: var(--ink-soft);
  font-size: 1.08rem;
  font-weight: 300;
  max-width: 52ch;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
  transition: border-color 0.2s ease, gap 0.2s ease;
}

.link-arrow::after {
  content: "\2192";
  transition: transform 0.2s ease;
}

.link-arrow:hover {
  border-color: var(--accent);
}

.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- Uitgelichte creaties ---------- */
.work-row {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.work-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.work-media {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
}

.work-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.work-item a:hover .work-media img,
.work-item a:focus-visible .work-media img { transform: scale(1.05); }

.work-title {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}

.work-note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}

.work-item a:hover .work-note { color: var(--accent-dark); }

/* ---------- Afsluitende oproep ---------- */
.closing {
  background: var(--ink-deep);
  color: #fff;
  padding: var(--space-section-lg) 0;
  text-align: center;
}

.closing h2 {
  color: #fff;
  max-width: 20ch;
  margin: 0 auto 0.9rem;
  text-wrap: balance;
}

.closing h2 em { color: var(--accent-soft); }

.closing p {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.72);
  max-width: 48ch;
  margin: 0 auto 1.9rem;
}

.btn-on-dark {
  background: transparent;
  color: #fff;
  border-color: var(--accent);
}

.btn-on-dark:hover {
  background: var(--accent);
  color: var(--ink-deep);
}

/* ---------- Cards (producten) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.5rem 2.25rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.card .btn { margin-top: auto; }

/* Foto bovenaan de kaart, tot aan de randen. */
.card-media {
  display: block;
  width: calc(100% + 4.5rem);
  max-width: none;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin: -2.5rem -2.25rem 2rem;
  border-radius: var(--radius) var(--radius) 0 0;
}

.card h3 { font-size: 2rem; font-weight: 500; margin-bottom: 0.75rem; }
.card p { color: var(--text-muted); font-size: 0.98rem; }
.card .card-sizes {
  color: var(--accent-dark);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0.5rem 0 1.75rem;
}

.card-grid-3 { grid-template-columns: repeat(3, 1fr); }

.card-note {
  margin-top: 3rem;
  padding: 2.75rem;
  border-radius: var(--radius);
  background: var(--sand);
}

.card-note h3 { font-size: 1.7rem; margin-bottom: 0.5rem; }
.card-note p { color: var(--text-muted); margin-bottom: 1.25rem; }

/* ---------- Wat ik graveer: vijf kaarten met foto ---------- */
/* Naast elkaar; de kaart waar je overheen beweegt wordt breder en vertelt
   meer. */
.graveer-kaarten {
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
  display: flex;
  gap: 0.9rem;
  height: clamp(380px, 34vw, 470px);
}

.graveer-kaart {
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.graveer-kaart a {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-deep);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.graveer-kaart img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.6s ease;
  filter: saturate(0.9) brightness(0.92);
}

/* Donker verloop onderin, zodat de tekst altijd leesbaar is. */
.graveer-kaart a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(21, 17, 13, 0.92) 0%, rgba(21, 17, 13, 0.55) 38%, rgba(21, 17, 13, 0) 65%);
}

.graveer-kaart-tekst {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 1.4rem 1.5rem;
}

.graveer-kaart strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1.15;
  white-space: nowrap;
}

.graveer-kaart-kort,
.graveer-kaart-meer {
  display: block;
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

/* Altijd drie regels hoog, zodat de titels van alle kaarten op één lijn staan. */
.graveer-kaart-hout {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

/* Extra uitleg en de link verschijnen pas bij de brede kaart. */
.graveer-kaart-meer,
.graveer-kaart-link {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.35s ease, margin 0.5s ease;
}

.graveer-kaart-link {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-soft);
  border-bottom: 1px solid rgba(230, 214, 184, 0.6);
}

.graveer-kaart-link::after { content: " \2192"; }

@media (hover: hover) and (min-width: 861px) {
  .graveer-kaarten:hover .graveer-kaart { flex-grow: 0.8; }

  .graveer-kaarten .graveer-kaart:hover,
  .graveer-kaarten .graveer-kaart:focus-within { flex-grow: 2.6; }

  .graveer-kaart:hover img,
  .graveer-kaart:focus-within img { transform: scale(1); filter: none; }

  .graveer-kaart:hover .graveer-kaart-kort,
  .graveer-kaart:focus-within .graveer-kaart-kort { min-height: 0; }

  .graveer-kaart:hover .graveer-kaart-meer,
  .graveer-kaart:focus-within .graveer-kaart-meer { max-height: 8rem; opacity: 1; margin-top: 0.6rem; transition-delay: 0.15s; }

  .graveer-kaart:hover .graveer-kaart-link,
  .graveer-kaart:focus-within .graveer-kaart-link { max-height: 2rem; opacity: 1; margin-top: 1rem; transition-delay: 0.2s; }

  /* Smalle kaarten: korte tekst even weg, zodat niets in elkaar schuift. */
  .graveer-kaarten:hover .graveer-kaart:not(:hover) .graveer-kaart-kort { opacity: 0; }
  .graveer-kaart-kort { transition: opacity 0.3s ease; }
}

/* Telefoon en tablet: kaarten onder elkaar, alles direct zichtbaar. */
@media (max-width: 860px) {
  .graveer-kaarten {
    flex-direction: column;
    height: auto;
  }

  .graveer-kaart a { height: 300px; }
  .graveer-kaart img { transform: none; }

  .graveer-kaart-meer,
  .graveer-kaart-link { max-height: none; opacity: 1; margin-top: 0.6rem; }
}

@media (hover: none) and (min-width: 861px) {
  .graveer-kaart-meer,
  .graveer-kaart-link { max-height: none; opacity: 1; margin-top: 0.6rem; }
}

/* ---------- Wat je kunt laten graveren ---------- */
.engrave-options {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  margin-bottom: 2.5rem;
}

.engrave-options li {
  padding: 1.75rem 1.5rem 1.75rem 0;
  border-bottom: 1px solid var(--line);
}

.engrave-options strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.engrave-options span { color: var(--text-muted); font-size: 0.95rem; }

/* ---------- Ontwerppagina: zelf een voorbeeld maken ---------- */
.ontwerp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.ontwerp-preview {
  margin: 0;
  position: sticky;
  top: 8.5rem;
}

/* De plank staat tegen een donkere muur, zoals op de foto's. */
.ontwerp-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.75rem, 5vw, 3.5rem);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(176, 141, 87, 0.22), transparent 60%),
    linear-gradient(160deg, #2b231c, #15110d);
}

.ontwerp-stage canvas {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  box-shadow: 18px 26px 40px -16px rgba(0, 0, 0, 0.75), 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: grab;
  touch-action: none;
}

.ontwerp-stage canvas.is-slepen { cursor: grabbing; }

.ontwerp-zoom {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.1rem;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.ontwerp-zoom input { flex: 1; accent-color: var(--accent-dark); }
.ontwerp-zoom[hidden] { display: none; }

.ontwerp-note {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text-muted);
}

.ontwerp-sleep { display: block; margin-bottom: 0.35rem; color: var(--ink); }
.ontwerp-sleep[hidden] { display: none; }

.ontwerp-keuzes {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.ontwerp-stap {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.ontwerp-stap legend,
.ontwerp-legend {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ink);
}

.ontwerp-legend em { font-size: 1.1rem; color: var(--text-muted); }

.ontwerp-stap legend span,
.ontwerp-legend span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--accent-dark);
}

.ontwerp-upload {
  position: relative;
  display: block;
  padding: 1.6rem 1.5rem;
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ontwerp-upload:hover,
.ontwerp-upload:focus-within { background: var(--sand); border-style: solid; }

.ontwerp-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.ontwerp-upload-titel {
  display: block;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.ontwerp-upload-hint { font-size: 0.9rem; font-weight: 300; color: var(--text-muted); }

.ontwerp-fout { margin: 0.75rem 0 0; color: #9a3b26; font-size: 0.92rem; }

.ontwerp-fotoknoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1rem;
}

.ontwerp-fotoknoppen[hidden] { display: none; }

.ontwerp-achtergrond { padding: 0.8rem 1.4rem; }

.ontwerp-achtergrond[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

.ontwerp-achtergrond.is-bezig {
  opacity: 0.6;
  cursor: progress;
}

.ontwerp-achtergrond-hint {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-muted);
}

.ontwerp-wis {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ontwerp-opties {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.ontwerp-opties-hout { grid-template-columns: repeat(3, 1fr); }

.ontwerp-optie {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.9rem;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ontwerp-optie input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ontwerp-optie:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.ontwerp-optie:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.ontwerp-staal {
  width: 100%;
  height: 3.25rem;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
}

.ontwerp-staal-bamboe { background-image: url("/assets/images/hout-bamboe.webp"); }
.ontwerp-staal-walnoot { background-image: url("/assets/images/hout-walnoot.webp"); }
.ontwerp-staal-essen { background-image: url("/assets/images/hout-essen.webp"); }

.ontwerp-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: -0.75rem;
}

.ontwerp-samenvatting.ontwerp-samenvatting {
  margin: -0.5rem 0 0;
  padding: 0;
  border: 0;
  font-size: 1.15rem;
  color: var(--text-muted);
}

.ontwerp-notitie { min-height: 5.5rem; resize: vertical; }

.ontwerp-impressie {
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--text-muted);
}

.ontwerp-bewaard {
  margin: -1rem 0 0;
  padding: 0.75rem 1rem;
  border-left: 2px solid var(--accent);
  background: var(--surface);
  font-size: 0.92rem;
}

.ontwerp-bewaard.is-goed { border-left-color: #4f6b3a; }
.ontwerp-bewaard.is-fout { border-left-color: #9a3b26; }

/* Bewaarde ontwerpen in het bestelformulier. */
.mandje-kop { font-size: 1.6rem; margin-bottom: 0.75rem; }

.mandje {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  border-top: 1px solid var(--line);
}

.mandje-leeg {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--text-muted);
}

.mandje-item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: 1.1rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.mandje-item img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.mandje-info strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.25;
}

.mandje-info span {
  display: block;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.mandje-notitie { font-style: italic; }

.mandje-aantal {
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  font-size: 0.72rem !important;
}

.mandje-aantal .input { width: 4.25rem; padding: 0.4rem 0.6rem; }

.mandje-prijs {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  white-space: nowrap;
}

.mandje-prijs small {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: #4f6b3a;
  white-space: normal;
  text-align: right;
  max-width: 11rem;
}

.mandje-weg {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.mandje-hint { margin: 0 0 1.25rem; }

.ontwerp-door {
  align-self: flex-start;
}

.ontwerp-door::after { content: "\2193"; }

/* Bij "Door naar bestellen" niet onder de vaste menubalk verdwijnen. */
#bestellen { scroll-margin-top: 7.5rem; }

.ontwerp-bestellen { background: var(--sand); }

.ontwerp-form { max-width: 46rem; }

.ontwerp-samenvatting {
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--ink);
}

.ontwerp-akkoord { margin-bottom: 1.25rem; }

/* Onzichtbaar voor mensen, wel voor spam-robots. */
.ontwerp-honing {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ontwerp-melding {
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--accent);
  background: var(--bg);
  font-size: 0.95rem;
  color: var(--ink);
}

.ontwerp-melding.is-goed { border-left-color: #4f6b3a; }
.ontwerp-melding.is-fout { border-left-color: #9a3b26; }

.form-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 860px) {
  .ontwerp-layout { grid-template-columns: 1fr; }
  .ontwerp-preview { position: static; }
}

/* Gelegenheden op de productenpagina: hele vak klikbaar. */
.gelegenheden { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

.producten-sectie { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.producten-sectie .card { padding: 1.6rem 1.75rem 1.75rem; }
.producten-sectie .card-media {
  aspect-ratio: 16 / 10;
  object-position: 50% 30%;
  width: calc(100% + 3.5rem);
  margin: -1.6rem -1.75rem 1.25rem;
}
.producten-sectie .card h3 { font-size: 1.75rem; margin-bottom: 0.4rem; }
.producten-sectie .card p { font-size: 0.92rem; margin-bottom: 0.5rem; line-height: 1.6; }
.producten-sectie .card-prijzen { margin: 0.25rem 0 1.1rem; }
.producten-sectie .card-prijzen div { padding: 0.4rem 0; }
.producten-sectie .card-prijzen dd { font-size: 1.3rem; }
.producten-sectie .voordelen { margin-top: 2rem; }

.engrave-options a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.engrave-options a strong { transition: color 0.2s ease; }
.engrave-options a:hover strong { color: var(--accent-dark); }

.engrave-options a strong::after {
  content: " \2192";
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--accent);
}

/* Na het bestellen: drie stappen. */
.ontwerp-vervolg {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 60rem;
}

.ontwerp-vervolg li {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text-muted);
}

.ontwerp-vervolg span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-size: 0.75rem;
  color: var(--accent-dark);
}

.ontwerp-vervolg strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--ink);
}

@media (max-width: 640px) {
  .ontwerp-vervolg { grid-template-columns: 1fr; }
}

/* ---------- Prijzen ---------- */
.card-prijzen {
  width: 100%;
  margin: 0.5rem 0 1.75rem;
  border-top: 1px solid var(--line);
}

.card-prijzen div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.card-prijzen dt {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.card-prijzen dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--ink);
}

.voordelen {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 1.75rem 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.voordelen li {
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--text-muted);
}

.voordelen strong {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

.ontwerp-optie-prijs {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent-dark);
}

.ontwerp-aantal { margin-bottom: 1.4rem; }

.ontwerp-aantal label {
  display: block;
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.45rem;
}

.ontwerp-aantal-rij {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ontwerp-aantal-rij .input { width: 5.5rem; flex: none; }
.ontwerp-aantal-rij .form-hint { margin: 0; }

.ontwerp-prijs {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.ontwerp-prijs div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  font-size: 0.95rem;
}

.ontwerp-prijs dt { color: var(--text-muted); font-weight: 300; }
.ontwerp-prijs dd { margin: 0; color: var(--ink); }
.ontwerp-prijs .is-korting dd { color: #4f6b3a; }

.ontwerp-prijs .is-totaal {
  margin-top: 0.4rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}

.ontwerp-prijs .is-totaal dt,
.ontwerp-prijs .is-totaal dd {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
}

.ontwerp-tip {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  color: var(--accent-dark);
}

.ontwerp-feest {
  margin: -1rem 0 2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--accent-dark);
}

@media (max-width: 860px) {
  .voordelen { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .voordelen { grid-template-columns: 1fr; }
}

/* ---------- Content pages (over ons / contact) ---------- */
.page-hero {
  padding: clamp(4rem, 8vw, 6.5rem) 0 3rem;
}

.page-hero-compact { padding: clamp(2rem, 3.5vw, 3rem) 0 clamp(1.25rem, 2vw, 2rem); }
.page-hero-compact h1 { margin-bottom: 0; }

/* Mijn verhaal: de foto begon hoog boven de tekst (bij de grote kop); met de
   compacte kop niet meer nodig. */
.page-hero-compact + .section .verhaal-foto { margin-top: -4.5rem; }

/* Contact: minder ruimte tussen formulier en vragen. */
.contact-formulier { padding-bottom: 0; }
.contact-faq { padding-top: clamp(2rem, 3.5vw, 3rem); }

.prose {
  max-width: 65ch;
}

.prose p { color: var(--text-muted); font-size: 1.08rem; font-weight: 300; }

.prose .btn { margin-top: 1.5rem; }

.prose .pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 2.5vw + 1rem, 2.9rem);
  line-height: 1.2;
  text-align: center;
  color: var(--ink) !important;
  margin: 3.5rem 0;
  padding: 2.25rem 0;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
}

/* ---------- Mijn verhaal: tekst met grote foto ---------- */
.verhaal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.verhaal-grid .prose { grid-column: 1; grid-row: 1; }

/* Blijft naast de tekst staan terwijl je leest. */
.verhaal-foto {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 9rem;
  margin: -9rem 0 0;
}

.verhaal-foto figcaption {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-muted);
  text-align: right;
}

@media (max-width: 860px) {
  .verhaal-grid { grid-template-columns: 1fr; }
  .verhaal-grid .prose,
  .verhaal-foto { grid-column: 1; grid-row: auto; }
  .verhaal-foto {
    position: static;
    margin: 0 1.25rem 1rem 0;
  }
}

/* ---------- Contact layout ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.contact-direct {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.contact-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

.contact-row:last-child { border-bottom: none; }

.contact-row .label { color: var(--text-muted); }

.note {
  margin-top: 1.25rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ---------- Form ---------- */
.form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.75rem);
}

.form-field {
  margin-bottom: 1.4rem;
}

.form-field label {
  display: block;
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.45rem;
}

.form-hint {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

.input,
select.input,
textarea.input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
}

.input:focus,
select.input:focus,
textarea.input:focus {
  outline: none;
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.15);
}

textarea.input {
  min-height: 130px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-choice-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.form-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 350;
  font-size: 0.88rem;
  color: var(--text-muted);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.form-choice:has(input:checked) {
  border-color: var(--accent-dark);
  background: var(--sand);
  color: var(--text);
}

.form-choice input {
  margin-top: 0.2rem;
}

.form-submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.5rem;
}

/* ---------- FAQ ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  max-width: 52rem;
}

.faq-list + .link-arrow { margin-top: 1.75rem; }

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 0.4rem 0;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.2rem 2.5rem 1.2rem 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--ink);
  position: relative;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 1.15rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--accent-dark);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  font-weight: 300;
  color: var(--text-muted);
  margin: 0 0 1.25rem;
}

/* ---------- WhatsApp floating action ---------- */
.whatsapp-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 40;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.95rem 1.4rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.25s ease;
}

.whatsapp-fab:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

/* Op de homepage staat de categorie-balk ook rechtsonder in de hero — de
   knop komt pas in beeld zodra je daaraan voorbij bent gescrold. */
.whatsapp-fab.bij-voettekst {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.whatsapp-fab.is-hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* ---------- Footer ---------- */
/* De voettekst is donker: op de homepage loopt hij naadloos door vanuit de
   afsluiter, op de andere pagina's schuift hij met afgeronde hoeken over de
   lichte inhoud (techniek B). */
.site-footer {
  position: relative;
  z-index: 1;
  margin-top: 0;
  background: var(--ink-deep);
  color: #fff;
  border-top-left-radius: var(--overlap-radius);
  border-top-right-radius: var(--overlap-radius);
  padding: calc(4.5rem + var(--overlap)) 0 2rem;
}

/* Op de homepage sluit de voettekst naadloos aan op de donkere afsluiter:
   geen lichte strook en geen zichtbare ronding tussen twee donkere vlakken. */
.page-home .site-footer {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-top: 0;
}

/* Navigatie onderaan, vlak boven de lijn bij de vermelding. */
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2rem;
  padding-bottom: 1.25rem;
}

.footer-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.35rem;
}

.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(1.35rem, 0.6vw + 1.1rem, 1.7rem);
  line-height: 1.3;
  max-width: 24ch;
  margin: 0.5rem 0 0;
}

.footer-nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-nav a:hover { color: var(--accent-soft); }

.footer-legal {
  border-top: 1px solid rgba(176, 141, 87, 0.35);
  padding-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
}

.footer-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-legal a:hover { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .steps-row { grid-template-columns: repeat(2, 1fr); row-gap: 2.75rem; }
  .story-grid { grid-template-columns: 1fr; gap: 2rem; }
  .work-row { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; gap: 2rem; }

  .steps, .card-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  :root { --overlap: 0px; --overlap-radius: 0px; }

  .steps-row { grid-template-columns: 1fr; row-gap: 2.75rem; }
  .work-row { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 640px) {
  .steps, .card-grid { grid-template-columns: 1fr; }


  .form-row, .form-choice-group { grid-template-columns: 1fr; }

  .nav-burger { display: flex; }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .nav-menu a { padding: 0.9rem 0; width: 100%; }
  .nav-menu a:not(.nav-cta)::after { display: none; }
  .nav-cta { margin: 0.75rem 0 1rem; text-align: center; }

  .nav-toggle:checked ~ .nav-menu { max-height: 400px; }

  /* Dicht menu: ook geen randje (dat stond als lijn over de openingsfoto). */
  .nav-toggle:not(:checked) ~ .nav-menu { border-bottom-width: 0; }

  /* Het uitgeklapte menu heeft een lichte achtergrond, ook op de homepage
     waar de menubalk zelf nog over de donkere foto ligt. */
  .site-header-overlay .nav-menu a { color: var(--ink); }
  .site-header-overlay .nav-menu .nav-cta {
    color: var(--ink) !important;
    border-color: var(--ink);
  }

  .footer-legal { flex-direction: column; }

  .whatsapp-fab { right: 1rem; bottom: 1rem; padding: 0.75rem 1.1rem; font-size: 0.88rem; }
}