@charset "UTF-8";
/* ==========================================================================
   Op weg naar Shalom — Serene Earth & Shalom design system
   Hand-crafted, zero-framework CSS. Animations ported from the Rosella theme
   (fade-up reveals, image clip-wipe, count-up, sticky header, skew-fill buttons)
   as lightweight CSS + a small IntersectionObserver script.
   ========================================================================== */

@import url("../fonts/local-fonts.css");

/* ---- Design tokens ------------------------------------------------------- */
:root {
  --sage: #5f7161;
  --sage-dark: #3e4e40;
  --sage-deep: #243026;
  --terra: #e07a5f;
  --terra-dark: #c96247;
  --sand: #f7f4ee;
  --sand-dark: #ece5d8;
  --gold: #d4a373;
  --ink: #1c231e;
  --white: #ffffff;

  --serif: "Vollkorn", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 1180px;
  --radius: 0.75rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;

  --shadow-sm: 0 1px 2px rgba(28, 35, 30, 0.06);
  --shadow: 0 12px 32px -12px rgba(62, 78, 64, 0.18);
  --shadow-lg: 0 28px 60px -20px rgba(36, 48, 38, 0.28);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-curtain: cubic-bezier(0.77, 0, 0.18, 1);
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Clip horizontale overflow op main i.p.v. de root, zodat de sticky header
   (buiten main) niet stopt met herschilderen na een programmatische scroll. */
main { overflow-x: clip; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; }
p { margin: 0; }
figure, blockquote { margin: 0; }        /* kill UA default margin:16px 40px */

/* ---- Lenis smooth scroll (vendored) ------------------------------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
a { color: inherit; text-decoration: none; transition: color 0.25s ease; }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--terra); color: #fff; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* ---- Inline SVG icons ---------------------------------------------------- */
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; }
.icon--solid { fill: currentColor; stroke: none; }
.review .stars .icon { fill: currentColor; stroke: none; width: 0.95em; height: 0.95em; }
.value .ico .icon, .contact-card .ico .icon, .portrait__card .badge-ico .icon { width: 1rem; height: 1rem; }
.service-card .ico .icon { width: 1.5rem; height: 1.5rem; }
.method strong .icon { width: 0.9rem; height: 0.9rem; }
.card-link .icon, .btn-ico .icon { width: 0.9rem; height: 0.9rem; }
.topbar .icon, .footer-social .icon, .topbar__social .icon { width: 0.95rem; height: 0.95rem; }
.eyebrow .icon { width: 0.9rem; height: 0.9rem; }

/* ---- Layout helpers ------------------------------------------------------ */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .container { padding-inline: 2rem; } }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.center { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--terra);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--terra); }
.eyebrow.on-dark { color: var(--gold); }
.eyebrow.on-dark::before { background: var(--gold); }
.lead { font-size: 1.0625rem; color: rgba(28, 35, 30, 0.78); }
.serif-accent { font-style: italic; color: var(--terra); font-weight: 500; }

.h-display { font-size: clamp(2.15rem, 5.5vw, 3.5rem); letter-spacing: -0.015em; }
.h-section { font-size: clamp(1.85rem, 4vw, 2.85rem); letter-spacing: -0.01em; }

/* ---- Buttons (Rosella skew-fill + rotating arrow) ------------------------ */
.btn {
  position: relative; z-index: 1; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--sans); font-weight: 600; font-size: 0.9rem; line-height: 1;
  padding: 0.55rem 0.55rem 0.55rem 1.5rem;
  border-radius: 999px; border: 1px solid transparent;
  transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.btn .btn-ico {
  width: 38px; height: 38px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 0.85rem;
  transform: rotate(-45deg); transition: transform 0.35s var(--ease-out), background-color 0.3s ease;
}
.btn::after {
  content: ""; position: absolute; z-index: -1; left: -12px; bottom: -2px;
  width: 0; height: 106%; transform: skewX(-18deg);
  transition: width 0.4s var(--ease-out), transform 0.4s var(--ease-out), left 0.4s var(--ease-out);
}
.btn:hover .btn-ico { transform: rotate(0deg); }
.btn:hover::after { width: 118%; transform: skewX(0deg); left: -6px; }

.btn-primary { background: var(--terra); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary .btn-ico { background: #fff; color: var(--terra); }
.btn-primary::after { background: var(--terra-dark); }
.btn-primary:hover { color: #fff; box-shadow: var(--shadow); }

.btn-sage { background: var(--sage-dark); color: #fff; }
.btn-sage .btn-ico { background: #fff; color: var(--sage-dark); }
.btn-sage::after { background: var(--sage-deep); }
.btn-sage:hover { color: #fff; }

.btn-ghost { border-color: rgba(247, 244, 238, 0.4); color: #fff; background: rgba(255, 255, 255, 0.06); padding-left: 1.5rem; }
.btn-ghost .btn-ico { background: rgba(255, 255, 255, 0.16); color: #fff; }
.btn-ghost::after { background: rgba(255, 255, 255, 0.14); }
.btn-ghost:hover { border-color: rgba(247, 244, 238, 0.9); }

/* ---- Top info bar -------------------------------------------------------- */
.topbar { background: var(--sage-deep); color: rgba(247, 244, 238, 0.9); font-size: 0.78rem; border-bottom: 1px solid rgba(95, 113, 97, 0.3); }
.topbar .container { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; justify-content: space-between; padding-block: 0.6rem; }
.topbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.topbar a, .topbar span.meta { display: inline-flex; align-items: center; gap: 0.5rem; }
.topbar a:hover { color: var(--terra); }
.topbar .ico { color: var(--terra); }
.topbar__social { display: flex; align-items: center; gap: 1rem; color: rgba(247, 244, 238, 0.8); }
.topbar__social a:hover { color: var(--terra); }
@media (max-width: 620px) { .topbar span.meta, .topbar__label { display: none; } }
@media (max-width: 560px) {
  /* Compacte balk op mobiel: alleen telefoon + socials, één rij, minder hoogte */
  .topbar { font-size: 0.74rem; }
  .topbar .container { padding-block: 0.4rem; flex-wrap: nowrap; gap: 0.75rem; }
  .topbar__group { flex-wrap: nowrap; gap: 0.75rem; min-width: 0; }
  .topbar__group a { white-space: nowrap; }
  .topbar__group a:nth-of-type(2) { display: none; } /* e-mail verbergen op klein scherm */
}

/* ---- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 244, 238, 0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sand-dark);
  transition: box-shadow 0.3s ease, background 0.3s ease, padding 0.3s ease;
}
.site-header.scrolled { box-shadow: 0 10px 30px -18px rgba(36, 48, 38, 0.4); background: rgba(247, 244, 238, 0.97); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 84px; transition: height 0.3s ease; gap: 1rem; }
.site-header.scrolled .container { height: 68px; }
.brand img { height: 46px; width: auto; transition: height 0.3s ease; }
.site-header.scrolled .brand img { height: 38px; }
.main-nav { display: none; align-items: center; gap: 1.75rem; font-size: 0.9rem; font-weight: 500; }
.main-nav a { position: relative; color: rgba(28, 35, 30, 0.85); padding-block: 0.25rem; }
.main-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--terra); transition: width 0.3s var(--ease-out); }
.main-nav a:hover { color: var(--terra); }
.main-nav a:hover::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.menu-toggle { display: inline-flex; background: none; border: 0; color: var(--sage-deep); font-size: 1.5rem; padding: 0.35rem; line-height: 1; }
@media (min-width: 1024px) { .main-nav { display: flex; } .menu-toggle { display: none; } }
/* Op mobiel: geen backdrop-filter op de sticky header (voorkomt een
   compositing/repaint-bug na programmatisch scrollen) — solide achtergrond. */
@media (max-width: 1023px) {
  .site-header, .site-header.scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--sand); }
}
.header-cta { display: none; }
@media (min-width: 480px) { .header-cta { display: inline-flex; } }

/* Mobile drawer */
.mobile-nav {
  display: grid; grid-template-rows: 0fr;
  background: var(--sand); border-bottom: 1px solid var(--sand-dark);
  transition: grid-template-rows 0.35s var(--ease-out);
}
.mobile-nav.open { grid-template-rows: 1fr; }
.mobile-nav__inner { overflow: hidden; }
.mobile-nav nav { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.25rem 1.5rem; font-weight: 500; color: var(--sage-deep); }
.mobile-nav nav a { padding: 0.6rem 0; border-bottom: 1px solid var(--sand-dark); }
.mobile-nav nav a:hover { color: var(--terra); }
.mobile-nav nav a.accent {
  margin-top: 0.85rem; padding: 0.85rem 1.25rem; border: 0; border-radius: 999px;
  background: var(--terra); color: #fff; font-weight: 600; text-align: center;
  box-shadow: var(--shadow-sm); transition: background 0.25s ease;
}
.mobile-nav nav a.accent:hover { background: var(--terra-dark); color: #fff; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { position: relative; color: #fff; overflow: hidden; background: var(--sage-deep); }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; will-change: transform; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(28, 35, 30, 0.92) 0%, rgba(36, 48, 38, 0.8) 46%, rgba(95, 113, 97, 0.55) 100%);
}
.hero .container { position: relative; z-index: 1; padding-block: clamp(3rem, 8vw, 6.5rem); }
.hero__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; } }
.hero__copy { max-width: 40rem; }
.pill {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 1rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--sand);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--terra); position: relative; }
.pill .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--terra); animation: ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
.hero h1 { margin-top: 1.4rem; font-weight: 600; }
.hero h1 .accent { display: inline-block; font-style: italic; font-weight: 400; color: var(--sand-dark); }
.hero__sub { margin-top: 1.4rem; font-size: 1.05rem; color: rgba(247, 244, 238, 0.86); font-weight: 300; }
.hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__stats { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, 0.16); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 32rem; }
.hero__stats .num { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 600; }
.hero__stats p { font-size: 0.72rem; color: rgba(247, 244, 238, 0.72); margin-top: 0.25rem; }

/* Hero portrait card */
.hero__figure { position: relative; margin-inline: auto; max-width: 26rem; width: 100%; }
.portrait { position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 4px solid rgba(255, 255, 255, 0.12); box-shadow: var(--shadow-lg); }
.portrait img { width: 100%; height: clamp(360px, 52vh, 460px); object-fit: cover; object-position: center top; transition: transform 0.9s var(--ease-out); }
.portrait:hover img { transform: scale(1.05); }
.portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(36, 48, 38, 0.9), transparent 55%); }
.portrait__card {
  position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; bottom: 1.1rem;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px);
  color: var(--ink); padding: 1.1rem 1.15rem; border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: var(--shadow);
}
.portrait__card .row { display: flex; align-items: center; gap: 0.75rem; }
.portrait__card .badge-ico { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--sage); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.portrait__card strong { font-family: var(--sans); display: block; font-size: 0.85rem; color: var(--sage-deep); }
.portrait__card small { font-size: 0.72rem; color: rgba(28, 35, 30, 0.7); }
.portrait__card em { display: block; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--sand-dark); font-family: var(--serif); font-size: 0.82rem; color: var(--sage-dark); }
.hero__badge {
  position: absolute; top: -1.1rem; right: -1.1rem; z-index: 3;
  width: 112px; height: 112px; border-radius: 50%; rotate: 12deg;
  background: var(--terra); color: #fff; border: 4px solid var(--sage-deep);
  display: flex; align-items: center; justify-content: center; text-align: center;
  box-shadow: var(--shadow); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; line-height: 1.3; padding: 0.5rem;
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (max-width: 560px) { .hero__badge { display: none; } }

/* ---- Quote banner -------------------------------------------------------- */
.quote-banner { background: var(--sand-dark); border-block: 1px solid var(--sand-dark); text-align: center; }
.quote-banner .container { max-width: 60rem; padding-block: 3rem; }
.quote-banner .mark { color: var(--terra); font-size: 1.6rem; }
.quote-banner blockquote { margin: 0.75rem 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 3vw, 1.9rem); line-height: 1.5; color: var(--sage-dark); }
.quote-banner .cite { margin-top: 1rem; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--terra); }

/* ---- Split content sections --------------------------------------------- */
.split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 980px) { .split { grid-template-columns: 5fr 7fr; gap: 4rem; } .split.reverse { grid-template-columns: 7fr 5fr; } }
.figure-frame { position: relative; }
.img-mask { position: relative; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.about-photo { aspect-ratio: 4 / 5; }
.img-mask img { width: 100%; height: 100%; object-fit: cover; }

/* Rosella-style clip reveal container (animation gated under .js below) */
.img-reveal { position: relative; overflow: hidden; }

.exp-badge {
  position: absolute; right: -0.5rem; bottom: -1.25rem; max-width: 17rem;
  background: var(--sage); color: #fff; padding: 1.25rem 1.4rem; border-radius: var(--radius-lg);
  border: 2px solid #fff; box-shadow: var(--shadow-lg);
}
.exp-badge .top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.exp-badge .top i { color: var(--gold); font-size: 1.3rem; }
.exp-badge .top span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sand); }
.exp-badge p { font-size: 0.78rem; color: rgba(247, 244, 238, 0.9); font-weight: 300; line-height: 1.5; }

.prose > * + * { margin-top: 1.1rem; }
.prose h2 { margin-bottom: 0.4rem; }
.pull-quote { margin-top: 1.6rem; padding: 1.25rem 1.4rem; border-left: 4px solid var(--sage); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); font-family: var(--serif); font-style: italic; color: var(--sage-dark); font-size: 0.98rem; line-height: 1.6; }
.values { display: grid; gap: 1.1rem; margin-top: 1.9rem; }
@media (min-width: 560px) { .values { grid-template-columns: 1fr 1fr; } }
.value { display: flex; gap: 0.75rem; }
.value .ico { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--sand-dark); color: var(--sage); display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.value strong { font-family: var(--sans); font-size: 0.88rem; color: var(--sage-deep); }
.value p { font-size: 0.8rem; color: rgba(28, 35, 30, 0.7); }

/* ---- Stats bar ----------------------------------------------------------- */
.stats-bar { background: var(--sand-dark); border-block: 1px solid var(--sand-dark); }
.stats-bar .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; text-align: center; padding-block: 3rem; }
@media (min-width: 768px) { .stats-bar .grid { grid-template-columns: repeat(4, 1fr); } }
.stats-bar .num { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 600; color: var(--sage-deep); }
.stats-bar .lbl { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(28, 35, 30, 0.7); margin-top: 0.35rem; }

/* ---- Services (dark) ----------------------------------------------------- */
.services { position: relative; background: var(--sage-deep); color: #fff; overflow: hidden; }
.services::before { content: ""; position: absolute; inset: 0; opacity: 0.05; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 16px 16px; pointer-events: none; }
.services .container { position: relative; }
.section-head { max-width: 44rem; margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: 0.9rem; }
.section-head p { margin-top: 0.9rem; }
.services .section-head p { color: rgba(247, 244, 238, 0.8); font-weight: 300; }
.cards { display: grid; gap: 1.75rem; margin-top: 3.25rem; }
@media (min-width: 860px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.service-card {
  display: flex; flex-direction: column; justify-content: space-between;
  background: rgba(62, 78, 64, 0.55); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl); padding: 2rem; box-shadow: var(--shadow);
  transition: transform 0.35s var(--ease-out), border-color 0.35s ease;
}
.service-card:hover { transform: translateY(-6px); border-color: rgba(212, 163, 115, 0.6); }
.service-card .ico { width: 56px; height: 56px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.1); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; transition: transform 0.35s var(--ease-out); }
.service-card:hover .ico { transform: scale(1.1); }
.service-card h3 { font-size: 1.5rem; margin-top: 1.25rem; font-weight: 500; transition: color 0.3s ease; }
.service-card:hover h3 { color: var(--gold); }
.service-card .desc { margin-top: 0.9rem; font-size: 0.9rem; color: rgba(247, 244, 238, 0.8); font-weight: 300; }
.service-card ul { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); display: grid; gap: 0.55rem; }
.service-card li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.8rem; color: rgba(247, 244, 238, 0.72); }
.service-card li i { color: var(--terra); margin-top: 3px; }
.service-card .card-link { margin-top: 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.85rem 1.25rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; transition: background 0.3s ease, color 0.3s ease; }
.service-card .card-link:hover { background: var(--terra); color: #fff; }
.services__note { margin-top: 3rem; text-align: center; font-size: 0.9rem; color: rgba(247, 244, 238, 0.72); font-weight: 300; }
.services__note a { color: var(--terra); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.services__note a:hover { color: var(--gold); }

/* ---- Shalom / methods ---------------------------------------------------- */
.methods { display: grid; gap: 1rem; margin-top: 0.5rem; }
@media (min-width: 560px) { .methods { grid-template-columns: 1fr 1fr; } }
.method { padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--sand-dark); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: border-color 0.3s ease, transform 0.3s ease; }
.method:hover { border-color: var(--sage); transform: translateY(-3px); }
.method strong { font-family: var(--sans); display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--sage-deep); }
.method strong i { color: var(--terra); font-size: 0.8rem; }
.method p { font-size: 0.8rem; color: rgba(28, 35, 30, 0.7); margin-top: 0.35rem; }
.dragonfly-figure { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-lg); border: 4px solid #fff; }
.dragonfly-figure img { width: 100%; height: 100%; object-fit: cover; }
/* Gebruik ::before voor de leesbaarheids-gradient — ::after is de reveal-gordijn */
.dragonfly-figure::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(18, 23, 19, 0.97) 0%, rgba(18, 23, 19, 0.92) 30%, rgba(18, 23, 19, 0.72) 48%, rgba(18, 23, 19, 0.4) 64%, rgba(18, 23, 19, 0.12) 78%, transparent 90%); }
.dragonfly-figure .caption { position: absolute; z-index: 2; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7); }
.dragonfly-figure .caption h3 { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75); }
.dragonfly-figure .caption p { color: #fff; }
.dragonfly-figure .caption h3 { font-size: 1.5rem; color: var(--gold); font-style: italic; font-weight: 500; }
.dragonfly-figure .caption p { font-size: 0.8rem; color: rgba(247, 244, 238, 0.9); font-weight: 300; margin-top: 0.35rem; }

/* ---- Process steps ------------------------------------------------------- */
.process { background: color-mix(in srgb, var(--sand-dark) 55%, var(--sand)); border-top: 1px solid var(--sand-dark); }
.steps { display: grid; gap: 1.75rem; margin-top: 3.25rem; }
@media (min-width: 600px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { display: flex; flex-direction: column; justify-content: space-between; background: #fff; border: 1px solid var(--sand-dark); border-radius: var(--radius-xl); padding: 1.75rem; box-shadow: var(--shadow-sm); transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease; }
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.step .no { font-family: var(--serif); font-size: 2.5rem; font-weight: 600; color: var(--sand-dark); line-height: 1; }
.step h3 { font-size: 1.15rem; margin-top: 0.6rem; color: var(--sage-deep); }
.step p { font-size: 0.8rem; color: rgba(28, 35, 30, 0.72); margin-top: 0.5rem; }
.step .meta { margin-top: 1.25rem; padding-top: 0.85rem; border-top: 1px solid var(--sand); font-size: 0.75rem; font-weight: 600; color: var(--terra); }

/* ---- Testimonials -------------------------------------------------------- */
.reviews { display: grid; gap: 1.75rem; margin-top: 3.25rem; align-items: start; }
@media (min-width: 860px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sand-dark); border-radius: var(--radius-xl); padding: 2rem; box-shadow: var(--shadow-sm); position: relative; }
.review::before { content: "\201C"; position: absolute; top: 0.75rem; right: 1.5rem; font-family: var(--serif); font-size: 4rem; line-height: 1; color: var(--sand-dark); }
.review .stars { color: var(--gold); font-size: 0.85rem; letter-spacing: 0.1em; }
.review .text { margin-top: 1rem; font-size: 0.9rem; font-style: italic; color: rgba(28, 35, 30, 0.8); }
.review .author { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--sand-dark); display: flex; align-items: center; gap: 0.75rem; }
.review .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--sand-dark); color: var(--sage-dark); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.review .author strong { display: block; font-family: var(--sans); font-size: 0.85rem; color: var(--sage-deep); }
.review .author small { font-size: 0.72rem; color: rgba(28, 35, 30, 0.6); }

/* ---- Contact ------------------------------------------------------------- */
.contact { background: var(--sage); color: #fff; }
.contact__grid { display: grid; gap: 3rem; }
@media (min-width: 980px) { .contact__grid { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.contact h2 { margin-top: 0.9rem; }
.contact__intro p { margin-top: 0.9rem; color: rgba(247, 244, 238, 0.9); font-weight: 300; }
.contact__cards { margin-top: 2rem; display: grid; gap: 1rem; }
.contact-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-lg); }
.contact-card .ico { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--terra); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.contact-card strong { font-family: var(--sans); font-size: 0.88rem; display: block; }
.contact-card a, .contact-card span { font-size: 0.82rem; color: rgba(247, 244, 238, 0.85); }
.contact-card a:hover { color: #fff; }
.contact-card small { display: block; font-size: 0.72rem; color: rgba(247, 244, 238, 0.6); margin-top: 0.15rem; }
.form-panel { background: #fff; color: var(--ink); border-radius: var(--radius-xl); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow-lg); }
.form-panel h3 { font-size: 1.5rem; color: var(--sage-deep); }
.form-panel > p { font-size: 0.8rem; color: rgba(28, 35, 30, 0.7); margin-top: 0.35rem; margin-bottom: 1.25rem; }
.field-row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--sage-deep); margin-bottom: 0.35rem; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 0.88rem; color: var(--ink);
  padding: 0.7rem 0.85rem; background: rgba(247, 244, 238, 0.5);
  border: 1px solid var(--sand-dark); border-radius: var(--radius);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(95, 113, 97, 0.2); }
.form-note { font-size: 0.72rem; color: rgba(28, 35, 30, 0.6); margin: 0.5rem 0 1rem; }
.form-submit { width: 100%; justify-content: center; padding: 1rem 1.5rem; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.form-status { margin-top: 1rem; font-size: 0.85rem; font-weight: 600; }
.form-status.ok { color: var(--sage-dark); }
.form-status.err { color: #ba1a1a; }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { background: var(--sage-deep); color: rgba(247, 244, 238, 0.78); padding-top: 4rem; }
.footer-grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-brand img { height: 44px; width: auto; margin-bottom: 1rem; }
.footer-brand p { font-size: 0.82rem; color: rgba(247, 244, 238, 0.7); }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.footer-social a { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; color: #fff; transition: background 0.3s ease; }
.footer-social a:hover { background: var(--terra); }
.site-footer h4 { font-family: var(--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.site-footer ul { display: grid; gap: 0.6rem; }
.site-footer li a, .site-footer address a { font-size: 0.82rem; }
.site-footer li a:hover { color: var(--terra); }
.site-footer address { font-style: normal; font-size: 0.82rem; line-height: 1.7; color: rgba(247, 244, 238, 0.7); }
.site-footer address strong { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-block: 1.5rem; font-size: 0.72rem; color: rgba(247, 244, 238, 0.5); }
.footer-bottom .links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom a:hover { color: var(--terra); text-decoration: underline; }

/* ---- Back to top --------------------------------------------------------- */
.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--sage-dark); color: #fff; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  box-shadow: var(--shadow); transition: all 0.35s var(--ease-out);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--terra); }

/* ---- Scroll reveal (AOS-style) — only hidden when JS is active ----------- */
.js .reveal { opacity: 0; transform: translateY(38px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: var(--d, 0s); will-change: opacity, transform; }
.js .reveal.from-left { transform: translateX(-44px); }
.js .reveal.from-right { transform: translateX(44px); }
.js .reveal.zoom { transform: scale(0.94); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Image clip-wipe curtain only runs with JS (else image is just shown) */
.js .img-reveal img { transform: scale(1.18); transition: transform 1.5s var(--ease-out); }
.js .img-reveal::after { content: ""; position: absolute; inset: 0; background: var(--sage); transform: translateX(0); z-index: 2; }
.js .img-reveal.is-visible img { transform: scale(1); }
.js .img-reveal.is-visible::after { transform: translateX(101%); transition: transform 1s var(--ease-curtain); }

/* Hero split-text (per word) */
.split-text .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.js .split-text .word > span { display: inline-block; transform: translateY(115%); opacity: 0; transition: transform 0.9s var(--ease-out), opacity 0.9s var(--ease-out); transition-delay: calc(var(--i) * 0.06s + 0.15s); }
.js .split-text.play .word > span { transform: translateY(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .img-reveal img, .split-text .word > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .img-reveal::after { display: none; }
  .hero__badge, .pill .dot::after { animation: none; }
}