/* =========================================================================
   LUMEN bv — tuinaanleg & onderhoud
   Design system derived from the brand logo:
   leaf green (#7B9E18) · warm bark brown (#54380C) on cream.
   Aesthetic: refined organic / editorial garden studio. Mobile-first.
   ========================================================================= */

/* ---------- Fonts ---------- */
/* Fraunces (display, optical serif) + Hanken Grotesk (body/UI) */

:root{
  /* palette */
  --cream:      #F7F3EA;
  --cream-2:    #FCFAF4;
  --sand:       #EFE8D8;
  --bark:       #2A1D0B;   /* body text — near-black warm brown */
  --bark-2:     #54380C;   /* logo brown — headings / accents */
  --bark-soft:  #6F5524;   /* muted brown — secondary text */
  --leaf:       #7B9E18;   /* logo leaf green — primary accent */
  --leaf-deep:  #46591F;   /* moss / interactive on light */
  --leaf-soft:  #E7EDCF;   /* pale green tint */
  --leaf-line:  #C9D79A;
  --line:       rgba(42,29,11,.13);
  --line-2:     rgba(42,29,11,.07);
  --shadow:     0 1px 2px rgba(42,29,11,.04), 0 8px 30px -12px rgba(42,29,11,.18);
  --shadow-lg:  0 30px 70px -30px rgba(42,29,11,.40);

  /* type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* layout */
  --wrap: 1180px;
  --gut: clamp(1.15rem, 4vw, 2.5rem);
  --radius: 4px;
  --radius-lg: 10px;
}
/* fix accidental token */
:root{ --bark-soft:#6F5524; }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--bark);
  font-size:clamp(1rem,.97rem + .25vw,1.125rem);
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* whisper-soft grain for warmth */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
ul{ list-style:none; }
::selection{ background:var(--leaf); color:#fff; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:500; color:var(--bark-2);
  line-height:1.06; letter-spacing:-.01em; font-optical-sizing:auto; }
h1{ font-size:clamp(2.3rem,1.5rem + 4.2vw,4.6rem); font-weight:500; letter-spacing:-.02em; }
h2{ font-size:clamp(1.7rem,1.2rem + 2.4vw,2.85rem); }
h3{ font-size:clamp(1.22rem,1.05rem + .8vw,1.6rem); letter-spacing:-.005em; }
p{ max-width:64ch; }
strong{ font-weight:600; color:var(--bark); }
em{ font-style:italic; }
.lead{ font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem); line-height:1.6; color:var(--bark);
  max-width:56ch; }
.accent{ color:var(--leaf-deep); }
.serif-em{ font-family:var(--display); font-style:italic; font-weight:400; color:var(--leaf-deep); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(3.6rem,2.5rem + 6vw,7.5rem); }
.section--tight{ padding-block:clamp(2.6rem,2rem + 3vw,4.5rem); }
.section--sand{ background:var(--sand); }
.section--cream2{ background:var(--cream-2); }

/* eyebrow label with leaf rule */
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--sans);
  font-size:.74rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--leaf-deep); margin-bottom:1.1rem; }
.eyebrow::before{ content:""; width:1.6rem; height:2px; background:var(--leaf); border-radius:2px; }

/* leaf divider mark */
.leaf-rule{ display:flex; align-items:center; gap:1rem; color:var(--leaf-line); margin-block:clamp(2rem,4vw,3.5rem); }
.leaf-rule::before,.leaf-rule::after{ content:""; height:1px; background:var(--line); flex:1; }
.leaf-rule svg{ width:26px; height:26px; color:var(--leaf); flex:none; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.55rem; padding:.95em 1.6em;
  font-family:var(--sans); font-weight:600; font-size:.98rem; letter-spacing:.01em;
  border-radius:100px; background:#3E7A1E; color:var(--cream-2);
  border:1px solid #3E7A1E; transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
  box-shadow:var(--shadow); }
.btn:hover{ background:#336517; transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn svg{ width:1.05em; height:1.05em; transition:transform .25s ease; }
.btn:hover svg{ transform:translateX(3px); }
.btn--leaf{ background:#3E7A1E; border-color:#3E7A1E; }
.btn--leaf:hover{ background:#336517; }
.btn--ghost{ background:transparent; color:var(--bark-2); border:1px solid var(--line);
  box-shadow:none; }
.btn--ghost:hover{ background:var(--bark-2); color:var(--cream-2); border-color:var(--bark-2); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }

/* text link with leaf underline */
.tlink{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--bark-2);
  background-image:linear-gradient(var(--leaf),var(--leaf)); background-size:0% 2px;
  background-position:0 100%; background-repeat:no-repeat; transition:background-size .3s ease; padding-bottom:2px; }
.tlink:hover{ background-size:100% 2px; }
.tlink svg{ width:1em; height:1em; transition:transform .25s ease; }
.tlink:hover svg{ transform:translateX(3px); }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.site-header{ position:sticky; top:0; z-index:60; background:rgba(247,243,234,.82);
  backdrop-filter:saturate(1.3) blur(12px); -webkit-backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--line-2); transition:box-shadow .3s ease, background .3s ease; }
.site-header.scrolled{ box-shadow:0 1px 0 var(--line), 0 12px 30px -22px rgba(42,29,11,.5); background:rgba(247,243,234,.94); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  height:72px; }
@media(min-width:900px){ .nav{ height:84px; } }

/* brand wordmark (built from type, matching the logo) */
.brand{ display:inline-flex; align-items:center; gap:.7rem; flex:none; }
.brand__mark{ width:34px; height:34px; color:var(--leaf); flex:none; }
.brand__mark .twig{ color:var(--bark-2); }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--sans); font-weight:700; letter-spacing:.34em;
  font-size:1.18rem; color:var(--bark-2); padding-left:.06em; }
.brand__sub{ font-family:var(--sans); font-weight:500; letter-spacing:.04em;
  font-size:.62rem; color:var(--leaf-deep); margin-top:.28rem; text-transform:lowercase; }

/* desktop nav */
.nav__links{ display:none; }
@media(min-width:900px){
  .nav__links{ display:flex; align-items:center; gap:.35rem; }
  .nav__links a, .nav__drop > button{ position:relative; padding:.55rem .8rem; font-weight:500;
    font-size:.96rem; color:var(--bark); border-radius:8px; transition:color .2s ease, background .2s ease;
    display:inline-flex; align-items:center; gap:.3rem; }
  .nav__links a::after{ content:""; position:absolute; left:.8rem; right:.8rem; bottom:.32rem; height:2px;
    background:var(--leaf); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .28s ease; }
  .nav__links a:hover::after, .nav__links a.is-active::after{ transform:scaleX(1); }
  .nav__links a:hover, .nav__drop > button:hover{ color:var(--bark-2); }
  .nav__links a.is-active{ color:var(--bark-2); }
}

/* dropdown */
.nav__drop{ position:relative; }
.nav__drop > button .chev{ width:.7em; height:.7em; transition:transform .25s ease; }
.nav__drop:hover > button .chev, .nav__drop.open > button .chev{ transform:rotate(180deg); }
.nav__menu{ position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(8px);
  min-width:250px; background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:.5rem; opacity:0; visibility:hidden; transition:opacity .22s ease, transform .22s ease; }
.nav__drop:hover .nav__menu, .nav__drop.open .nav__menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav__menu a{ display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem; border-radius:7px;
  font-size:.95rem; color:var(--bark); transition:background .18s ease, color .18s ease; }
.nav__menu a::after{ display:none; }
.nav__menu a:hover{ background:var(--leaf-soft); color:var(--bark-2); }
.nav__menu a svg{ width:1.1rem; height:1.1rem; color:var(--leaf-deep); flex:none; }

.nav__cta{ display:none; }
@media(min-width:900px){ .nav__cta{ display:inline-flex; margin-left:.5rem; } }

/* burger */
.burger{ display:inline-flex; flex-direction:column; gap:5px; width:44px; height:44px;
  align-items:center; justify-content:center; border-radius:10px; }
@media(min-width:900px){ .burger{ display:none; } }
.burger span{ width:23px; height:2px; background:var(--bark-2); border-radius:2px; transition:transform .3s ease, opacity .25s ease; }
body.menu-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.mobile-nav{ position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:var(--cream-2);
  z-index:70; transform:translateX(100%); transition:transform .38s cubic-bezier(.5,.05,.2,1);
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column; padding:5.5rem 1.6rem 2rem; overflow-y:auto; }
body.menu-open .mobile-nav{ transform:translateX(0); }
.mobile-nav a{ padding:.95rem .2rem; font-family:var(--display); font-size:1.45rem; color:var(--bark-2);
  border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:.7rem; }
.mobile-nav a.sub{ font-family:var(--sans); font-size:1.02rem; padding-left:1.6rem; color:var(--bark);
  border-bottom:1px solid var(--line-2); }
.mobile-nav a.sub svg{ width:1rem; height:1rem; color:var(--leaf); }
.mobile-nav .m-label{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--leaf-deep);
  font-family:var(--sans); margin-top:1.4rem; margin-bottom:.3rem; }
.mobile-nav .btn{ margin-top:1.6rem; justify-content:center; }
.scrim{ position:fixed; inset:0; background:rgba(42,29,11,.42); z-index:65; opacity:0; visibility:hidden;
  transition:opacity .3s ease; backdrop-filter:blur(2px); }
body.menu-open .scrim{ opacity:1; visibility:visible; }

/* =========================================================================
   HERO (typographic — no background photo)
   ========================================================================= */
.hero{ position:relative; padding-block:clamp(3.4rem,3rem + 8vw,8rem) clamp(2.6rem,2rem + 5vw,5rem); overflow:hidden; }
.hero__botanical{ position:absolute; pointer-events:none; color:var(--leaf); opacity:.10;
  right:-6%; top:-8%; width:min(58vw,560px); transform:rotate(8deg); z-index:0; }
.hero__inner{ position:relative; z-index:1; }
.hero h1{ max-width:16ch; }
.hero h1 .grow{ color:var(--leaf-deep); }
.hero .lead{ margin-top:1.6rem; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:2.4rem;
  font-size:.86rem; color:var(--bark-soft); font-weight:500; }
.hero__meta span{ display:inline-flex; align-items:center; gap:.5rem; }
.hero__meta svg{ width:1.05rem; height:1.05rem; color:var(--leaf); }

/* page hero (interior pages) */
.phero{ padding-block:clamp(2.8rem,2.4rem + 5vw,5.5rem) clamp(1.6rem,1.4rem + 2vw,3rem); position:relative; overflow:hidden; }
.phero__crumb{ font-size:.82rem; color:var(--bark-soft); margin-bottom:1.1rem; font-weight:500; }
.phero__crumb a{ color:var(--leaf-deep); } .phero__crumb a:hover{ text-decoration:underline; }
.phero h1{ max-width:18ch; }
.phero .lead{ margin-top:1.3rem; }
.phero__botanical{ position:absolute; right:-4%; bottom:-30%; width:min(40vw,330px); color:var(--leaf);
  opacity:.08; pointer-events:none; transform:rotate(-6deg); }

/* =========================================================================
   PROSE / content blocks
   ========================================================================= */
.prose{ max-width:none; }
.prose p + p{ margin-top:1.15rem; }
.prose h2{ margin-top:0; }
.prose .lead + p{ margin-top:1.4rem; }

.two-col{ display:grid; gap:clamp(2rem,5vw,4.5rem); }
@media(min-width:880px){ .two-col{ grid-template-columns:1.15fr 1fr; align-items:start; } }
.two-col--text{ grid-template-columns:1fr; }
@media(min-width:880px){ .two-col--text{ grid-template-columns:.85fr 1.15fr; } }

/* feature list with leaf bullets */
.flist{ display:grid; gap:.9rem; margin-top:1.6rem; }
.flist li{ position:relative; padding-left:2rem; color:var(--bark); }
.flist li::before{ content:""; position:absolute; left:0; top:.45em; width:14px; height:14px;
  background:var(--leaf); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7 6 4 10 4 15a8 8 0 0016 0c0-5-3-9-8-13z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7 6 4 10 4 15a8 8 0 0016 0c0-5-3-9-8-13z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* =========================================================================
   SERVICES GRID (home)
   ========================================================================= */
.svc-grid{ display:grid; gap:1.1rem; grid-template-columns:1fr; margin-top:2.8rem; }
@media(min-width:600px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:980px){ .svc-grid{ grid-template-columns:1fr 1fr 1fr; } }
.svc{ position:relative; display:flex; flex-direction:column; gap:.8rem; padding:1.8rem 1.6rem 1.7rem;
  background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius-lg);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; overflow:hidden; }
.svc::after{ content:""; position:absolute; left:0; top:0; height:100%; width:3px; background:var(--leaf);
  transform:scaleY(0); transform-origin:top; transition:transform .35s ease; }
.svc:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; }
.svc:hover::after{ transform:scaleY(1); }
.svc__icon{ width:46px; height:46px; color:var(--leaf-deep); }
.svc h3{ font-size:1.32rem; }
.svc p{ font-size:.97rem; color:var(--bark-soft); line-height:1.6; flex:1; }
.svc .tlink{ font-size:.92rem; margin-top:.2rem; }

/* stat / trust band */
.band{ display:grid; gap:1.6rem 1rem; grid-template-columns:repeat(2,1fr); text-align:left; }
@media(min-width:760px){ .band{ grid-template-columns:repeat(4,1fr); } }
.band__n{ font-family:var(--display); font-size:clamp(2rem,1.5rem + 2vw,3rem); color:var(--leaf-deep); line-height:1; }
.band__l{ font-size:.86rem; color:var(--bark-soft); margin-top:.5rem; font-weight:500; }

/* =========================================================================
   PROCESS (numbered steps)
   ========================================================================= */
.steps{ display:grid; gap:1.4rem; margin-top:2.6rem; counter-reset:step; }
@media(min-width:760px){ .steps{ grid-template-columns:repeat(2,1fr); gap:1.6rem 2.4rem; } }
.step{ position:relative; padding-left:4.4rem; }
.step::before{ counter-increment:step; content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:-.35rem; font-family:var(--display); font-size:2.6rem; font-weight:500;
  color:var(--leaf-line); line-height:1; }
.step h3{ font-size:1.18rem; margin-bottom:.4rem; }
.step p{ font-size:.97rem; color:var(--bark-soft); line-height:1.6; }

/* =========================================================================
   MATERIAL / TYPE BLOCKS (bestrating, omheiningen)
   ========================================================================= */
.matlist{ display:grid; gap:1.1rem; margin-top:2.4rem; }
.mat{ background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.5rem 1.5rem; }
@media(min-width:760px){ .mat{ display:grid; grid-template-columns:200px 1fr; gap:1.6rem; align-items:start; padding:1.7rem 1.9rem; } }
.mat h3{ display:flex; align-items:center; gap:.6rem; }
.mat h3 .dot{ width:12px; height:12px; border-radius:3px; background:var(--leaf); flex:none; }
.mat p{ font-size:.98rem; color:var(--bark-soft); line-height:1.62; }
.mat p + p{ margin-top:.7rem; }

/* spec rows (omheiningen) */
.specs{ display:grid; gap:.4rem; margin-top:.9rem; }
.specs div{ display:flex; gap:.6rem; font-size:.9rem; }
.specs dt{ font-weight:600; color:var(--leaf-deep); min-width:6.5rem; }
.specs dd{ color:var(--bark-soft); }

/* =========================================================================
   GALLERY + LIGHTBOX
   ========================================================================= */
.gallery-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.gallery-count{ font-size:.82rem; color:var(--bark-soft); font-weight:500; white-space:nowrap; }
.gallery{ columns:2; column-gap:.7rem; margin-top:1.8rem; }
@media(min-width:600px){ .gallery{ columns:3; column-gap:.85rem; } }
@media(min-width:980px){ .gallery{ columns:4; column-gap:1rem; } }
.gallery.few{ columns:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem; }
@media(min-width:760px){ .gallery.few{ grid-template-columns:repeat(3,1fr); gap:1rem; } }
.gitem{ position:relative; display:block; width:100%; margin:0 0 .7rem; break-inside:avoid;
  border-radius:8px; overflow:hidden; background:var(--sand); cursor:zoom-in;
  box-shadow:0 1px 2px rgba(42,29,11,.05); }
@media(min-width:600px){ .gitem{ margin-bottom:.85rem; } }
@media(min-width:980px){ .gitem{ margin-bottom:1rem; } }
.gallery.few .gitem{ margin:0; height:100%; }
.gitem img{ width:100%; transition:transform .55s cubic-bezier(.2,.6,.2,1); }
.gitem::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(42,29,11,.45));
  opacity:0; transition:opacity .35s ease; }
.gitem .plus{ position:absolute; right:.6rem; bottom:.6rem; width:30px; height:30px; border-radius:50%;
  background:rgba(247,243,234,.92); display:grid; place-items:center; color:var(--bark-2);
  opacity:0; transform:scale(.7); transition:opacity .3s ease, transform .3s ease; z-index:2; }
.gitem .plus svg{ width:15px; height:15px; }
.gitem:hover img{ transform:scale(1.06); }
.gitem:hover::after{ opacity:1; }
.gitem:hover .plus{ opacity:1; transform:scale(1); }
.gallery.few .gitem img{ height:100%; object-fit:cover; }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:120; background:rgba(28,20,8,.93); display:flex; align-items:center;
  justify-content:center; opacity:0; visibility:hidden; transition:opacity .3s ease; padding:env(safe-area-inset-top) 1rem; }
.lb.open{ opacity:1; visibility:visible; }
.lb img{ max-width:94vw; max-height:86vh; border-radius:6px; box-shadow:0 40px 100px -30px #000;
  transform:scale(.96); transition:transform .35s ease; }
.lb.open img{ transform:scale(1); }
.lb__btn{ position:absolute; width:52px; height:52px; border-radius:50%; background:rgba(247,243,234,.12);
  color:#fff; display:grid; place-items:center; backdrop-filter:blur(6px); transition:background .2s ease, transform .2s ease; }
.lb__btn:hover{ background:rgba(247,243,234,.26); }
.lb__btn svg{ width:22px; height:22px; }
.lb__close{ top:1.1rem; right:1.1rem; }
.lb__prev{ left:1rem; top:50%; transform:translateY(-50%); }
.lb__next{ right:1rem; top:50%; transform:translateY(-50%); }
.lb__prev:hover,.lb__next:hover{ transform:translateY(-50%) scale(1.08); }
.lb__count{ position:absolute; bottom:1.1rem; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.85);
  font-size:.85rem; font-weight:500; letter-spacing:.05em; }
@media(max-width:640px){
  .lb__prev{ left:.4rem; } .lb__next{ right:.4rem; }
  .lb__btn{ width:44px; height:44px; }
}

/* =========================================================================
   CTA banner
   ========================================================================= */
.cta{ position:relative; background:var(--bark-2); color:var(--cream); border-radius:var(--radius-lg);
  padding:clamp(2.4rem,2rem + 4vw,4.2rem) clamp(1.6rem,1.4rem + 3vw,3.6rem); overflow:hidden; }
.cta__botanical{ position:absolute; right:-3%; top:-20%; width:min(45vw,300px); color:var(--leaf); opacity:.16; pointer-events:none; }
.cta__inner{ position:relative; z-index:1; max-width:34ch; }
.cta h2{ color:var(--cream-2); }
.cta p{ color:rgba(247,243,234,.82); margin-top:1rem; }
.cta .btn--ghost{ color:var(--cream-2); border-color:rgba(247,243,234,.4); }
.cta .btn--ghost:hover{ background:var(--cream-2); color:var(--bark-2); border-color:var(--cream-2); }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-grid{ display:grid; gap:clamp(2rem,5vw,4rem); }
@media(min-width:880px){ .contact-grid{ grid-template-columns:.9fr 1.1fr; align-items:start; } }
.cinfo{ }
.cinfo .row{ display:flex; gap:1rem; padding:1.05rem 0; border-bottom:1px solid var(--line-2); align-items:flex-start; }
.cinfo .row:first-of-type{ border-top:1px solid var(--line-2); }
.cinfo .ic{ width:42px; height:42px; border-radius:50%; background:var(--leaf-soft); color:var(--leaf-deep);
  display:grid; place-items:center; flex:none; }
.cinfo .ic svg{ width:19px; height:19px; }
.cinfo .k{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bark-soft); font-weight:600; }
.cinfo .v{ font-size:1.08rem; color:var(--bark-2); font-weight:500; margin-top:.15rem; }
.cinfo .v a:hover{ color:var(--leaf-deep); }
.company-name{ font-family:var(--display); font-size:1.4rem; color:var(--bark-2); margin-bottom:.3rem; }

.form{ background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.5rem,1.2rem + 2vw,2.4rem); }
.form .grid2{ display:grid; gap:1.1rem; }
@media(min-width:560px){ .form .grid2{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.field label{ font-size:.85rem; font-weight:600; color:var(--bark-2); }
.field label .req{ color:var(--leaf-deep); }
.field input,.field textarea{ font-family:var(--sans); font-size:1rem; color:var(--bark);
  background:var(--cream); border:1px solid var(--line); border-radius:8px; padding:.8rem .9rem;
  transition:border-color .2s ease, box-shadow .2s ease; width:100%; }
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--leaf);
  box-shadow:0 0 0 3px rgba(123,158,24,.16); }
.form__note{ font-size:.82rem; color:var(--bark-soft); margin-top:.4rem; }
.form .btn{ width:100%; justify-content:center; margin-top:.4rem; }
.form-status{ display:none; padding:.9rem 1rem; border-radius:8px; font-size:.92rem; margin-top:1rem;
  background:var(--leaf-soft); color:var(--leaf-deep); font-weight:500; }
.form-status.show{ display:block; }

.map-wrap{ margin-top:1.6rem; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:16/9; background:var(--sand); }
.map-wrap iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(.9); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{ background:var(--bark); color:rgba(247,243,234,.74); padding-block:clamp(3rem,2.5rem + 3vw,4.5rem) 2rem;
  margin-top:0; }
.footer-top{ display:grid; gap:2.4rem; }
@media(min-width:760px){ .footer-top{ grid-template-columns:1.4fr 1fr 1fr; } }
.site-footer .brand__name{ color:var(--cream-2); }
.site-footer .brand__sub{ color:var(--leaf); }
.site-footer .brand__mark{ color:var(--leaf); }
.footer-about{ margin-top:1.3rem; font-size:.95rem; line-height:1.65; max-width:38ch; color:rgba(247,243,234,.68); }
.footer-col h4{ font-family:var(--sans); color:var(--cream-2); font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:600; margin-bottom:1.1rem; }
.footer-col ul li{ margin-bottom:.7rem; }
.footer-col a{ color:rgba(247,243,234,.74); font-size:.96rem; transition:color .2s ease; display:inline-flex; gap:.5rem; align-items:center; }
.footer-col a:hover{ color:var(--leaf); }
.footer-col a svg{ width:1rem; height:1rem; color:var(--leaf); flex:none; }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between;
  align-items:center; margin-top:2.8rem; padding-top:1.6rem; border-top:1px solid rgba(247,243,234,.12);
  font-size:.82rem; color:rgba(247,243,234,.55); }
.footer-bottom a:hover{ color:var(--leaf); }

/* =========================================================================
   Scroll reveal
   ========================================================================= */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* hero load animation */
.hero .anim{ opacity:0; transform:translateY(26px); animation:rise .9s cubic-bezier(.2,.6,.2,1) forwards; }
.hero .anim[data-d="1"]{ animation-delay:.1s; }
.hero .anim[data-d="2"]{ animation-delay:.24s; }
.hero .anim[data-d="3"]{ animation-delay:.38s; }
.hero .anim[data-d="4"]{ animation-delay:.52s; }
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .hero .anim{ opacity:1; transform:none; animation:none; } }

/* utilities */
.mt0{ margin-top:0; } .center{ text-align:center; }
.maxnarrow{ max-width:60ch; }
.skip{ position:absolute; left:-9999px; top:0; background:var(--bark-2); color:#fff; padding:.7rem 1rem; z-index:200; border-radius:0 0 8px 0; }
.skip:focus{ left:0; }

/* =========================================================================
   HERO WITH BACKGROUND PHOTO  (.hero--photo / .phero--photo)
   Per-page image injected inline as --hero-img. Dark warm overlay + light text.
   ========================================================================= */
:root{ --leaf-bright:#BBD466; }

.hero--photo,
.phero--photo{
  background-color:var(--bark);
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;
  align-items:flex-end;
}
.hero--photo{ min-height:clamp(540px,82vh,780px); }
.phero--photo{ min-height:clamp(360px,52vh,560px); }
.hero--photo > .wrap,
.phero--photo > .wrap{ width:100%; position:relative; z-index:2; }

/* warm overlay for legibility — stronger at bottom + left where text sits */
.hero--photo::before,
.phero--photo::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(28,20,8,.86) 0%, rgba(28,20,8,.60) 32%, rgba(28,20,8,.34) 64%, rgba(28,20,8,.18) 100%);
}
/* desktop: text dark on the left, photo clearly visible on the right */
@media(min-width:900px){
  .hero--photo, .phero--photo{ align-items:center; }
  .hero--photo::before, .phero--photo::before{
    background:
      linear-gradient(90deg, rgba(28,20,8,.80) 0%, rgba(28,20,8,.58) 36%, rgba(28,20,8,.24) 60%, rgba(28,20,8,0) 86%),
      linear-gradient(0deg, rgba(28,20,8,.34) 0%, rgba(28,20,8,0) 32%);
  }
}
/* a touch of brand green in the shadow */
.hero--photo::after,
.phero--photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 85% 0%, rgba(70,89,31,.28), transparent 60%);
  mix-blend-mode:soft-light;
}

/* hide the botanical line-art on photo heroes (would clash) */
.hero--photo .hero__botanical,
.phero--photo .phero__botanical{ display:none; }

/* light text treatment */
.hero--photo h1,
.phero--photo h1{ color:var(--cream-2); text-shadow:0 2px 22px rgba(18,12,3,.45); }
.hero--photo .lead, .phero--photo .lead,
.hero--photo .eyebrow, .phero--photo .eyebrow,
.hero--photo .hero__meta, .phero--photo .phero__crumb{ text-shadow:0 1px 12px rgba(18,12,3,.6); }
.hero--photo h1 .grow,
.hero--photo h1 .accent,
.phero--photo h1 .accent{ color:var(--leaf-bright); }
.hero--photo .lead,
.phero--photo .lead{ color:rgba(247,243,234,.92); }
.hero--photo .eyebrow,
.phero--photo .eyebrow{ color:var(--leaf-bright); }
.hero--photo .eyebrow::before,
.phero--photo .eyebrow::before{ background:var(--leaf-bright); }
.hero--photo .hero__meta{ color:rgba(247,243,234,.9); }
.hero--photo .hero__meta svg{ color:var(--leaf-bright); }
.phero--photo .phero__crumb{ color:rgba(247,243,234,.78); }
.phero--photo .phero__crumb a{ color:var(--leaf-bright); }

/* buttons on a photo: bright-green primary (dark text) + light ghost */
.hero--photo .btn:not(.btn--ghost),
.phero--photo .btn:not(.btn--ghost){
  background:#86B81F; color:#1c1408; border-color:#86B81F;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.55); }
.hero--photo .btn:not(.btn--ghost):hover,
.phero--photo .btn:not(.btn--ghost):hover{ background:#95c92a; }
.hero--photo .btn--ghost,
.phero--photo .btn--ghost{ color:var(--cream-2); border-color:rgba(247,243,234,.55); background:transparent; }
.hero--photo .btn--ghost:hover,
.phero--photo .btn--ghost:hover{ background:var(--cream-2); color:var(--bark-2); border-color:var(--cream-2); }

/* the section directly under a photo hero keeps its own bg; add a soft seam */
.hero--photo + section,
.phero--photo + section{ position:relative; }

/* =========================================================================
   CTA banner primary button -> bright green (on dark bark banner)
   ========================================================================= */
.cta .btn:not(.btn--ghost){ background:#86B81F; color:#1c1408; border-color:#86B81F; }
.cta .btn:not(.btn--ghost):hover{ background:#95c92a; }

/* =========================================================================
   FAQ (native <details> accordion — no JS, SEO friendly)
   ========================================================================= */
.faq{ margin-top:2.2rem; max-width:820px; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{ list-style:none; cursor:pointer; padding:1.25rem 3rem 1.25rem 0; position:relative;
  font-family:var(--display); font-size:clamp(1.08rem,1rem+.5vw,1.32rem); color:var(--bark-2);
  font-weight:500; line-height:1.3; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:""; position:absolute; right:.3rem; top:1.5rem; width:18px; height:18px;
  background:var(--leaf); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s ease; }
.faq__item[open] summary::after{ transform:rotate(135deg); }
.faq__item summary:hover{ color:var(--leaf-deep); }
.faq__item .faq__a{ padding:0 2rem 1.4rem 0; color:var(--bark-soft); line-height:1.7; }
.faq__item .faq__a p + p{ margin-top:.8rem; }
.faq__item .faq__a a{ color:var(--leaf-deep); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* =========================================================================
   Service area (werkingsgebied) chips
   ========================================================================= */
.area{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }
.area span{ font-size:.86rem; font-weight:500; color:var(--leaf-deep); background:var(--leaf-soft);
  border:1px solid var(--leaf-line); padding:.4rem .8rem; border-radius:100px; }

/* intro highlight row under a hero (trust strip) */
.trust{ display:grid; gap:1rem; grid-template-columns:repeat(2,1fr); margin-top:0; }
@media(min-width:760px){ .trust{ grid-template-columns:repeat(4,1fr); } }
.trust div{ display:flex; gap:.7rem; align-items:flex-start; font-size:.92rem; color:var(--bark); line-height:1.45; }
.trust svg{ width:22px; height:22px; color:var(--leaf-deep); flex:none; margin-top:.1rem; }
.trust strong{ display:block; color:var(--bark-2); font-weight:600; }

/* =========================================================================
   FAQ (native accordion) + SERVICE AREA
   ========================================================================= */
.faq{ margin-top:1.8rem; border-top:1px solid var(--line); max-width:60rem; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:1.15rem 2.6rem 1.15rem 0; position:relative;
  font-family:var(--display); font-size:clamp(1.05rem,1rem + .4vw,1.32rem); color:var(--bark-2);
  font-weight:500; line-height:1.3; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:.5rem; top:1.5rem; width:15px; height:15px;
  background:var(--leaf-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s ease; }
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq summary:hover{ color:var(--leaf-deep); }
.faq .faq__a{ padding:0 2.6rem 1.35rem 0; color:var(--bark-soft); font-size:1rem; line-height:1.65; }
.faq .faq__a p + p{ margin-top:.7rem; }
.faq .faq__a a{ color:var(--leaf-deep); font-weight:600; }
.faq .faq__a a:hover{ text-decoration:underline; }

.area{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.area span{ font-size:.85rem; padding:.42rem .9rem; background:var(--leaf-soft); color:var(--leaf-deep);
  border-radius:100px; font-weight:600; letter-spacing:.01em; }
.area-intro{ max-width:60ch; }

/* =========================================================================
   HEADER: transparent over hero -> solid on scroll  +  phone  +  dropdown fix
   ========================================================================= */
/* transparent header over the hero, with a soft top scrim for legibility */
.site-header{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
.site-header > .wrap{ position:relative; z-index:1; }
.site-header::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(16,11,4,.58), rgba(16,11,4,.30) 62%, rgba(16,11,4,.08));
  transition:opacity .3s ease; }
.site-header.scrolled{ background-color:rgba(247,243,234,.94);
  backdrop-filter:saturate(1.3) blur(12px); -webkit-backdrop-filter:saturate(1.3) blur(12px);
  border-bottom-color:var(--line-2);
  box-shadow:0 1px 0 var(--line), 0 12px 30px -22px rgba(42,29,11,.5); }
.site-header.scrolled::before{ opacity:0; }

/* light nav elements while transparent (top-level links + brand only) */
@media(min-width:900px){
  .site-header:not(.scrolled) .nav__links > a:not(.nav__cta),
  .site-header:not(.scrolled) .nav__drop > button{
    color:var(--cream-2); text-shadow:0 1px 10px rgba(0,0,0,.4); }
  .site-header:not(.scrolled) .nav__links > a:not(.nav__cta):hover,
  .site-header:not(.scrolled) .nav__drop > button:hover,
  .site-header:not(.scrolled) .nav__links > a.is-active{ color:#fff; }
  .site-header:not(.scrolled) .nav__links a::after{ background:var(--leaf-bright); }
}
.site-header:not(.scrolled) .brand__name{ color:var(--cream-2); text-shadow:0 1px 10px rgba(0,0,0,.4); }
.site-header:not(.scrolled) .brand__sub{ color:rgba(247,243,234,.85); }
.site-header:not(.scrolled) .brand__mark{ color:var(--leaf-bright); }
.site-header:not(.scrolled) .brand__mark .twig{ color:var(--cream-2); }
.site-header:not(.scrolled) .burger span{ background:var(--cream-2); }

/* CTA: cream pill over the hero (matches hero button), green when scrolled */
.site-header .nav__cta{ background:var(--cream-2); color:var(--bark-2); border-color:var(--cream-2);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.5); }
.site-header .nav__cta:hover{ background:#fff; color:var(--bark-2); }
.site-header.scrolled .nav__cta{ background:#3E7A1E; color:var(--cream-2); border-color:#3E7A1E; box-shadow:var(--shadow); }
.site-header.scrolled .nav__cta:hover{ background:#336517; }
.nav__cta::after, .nav__tel::after{ display:none !important; }

/* phone link in the desktop header */
.nav__tel{ display:none; }
@media(min-width:900px){
  .nav__tel{ display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .75rem;
    font-weight:600; font-size:.95rem; color:var(--bark-2); white-space:nowrap; border-radius:8px;
    transition:color .2s ease; }
  .nav__tel svg{ width:1.02rem; height:1.02rem; color:var(--leaf-deep); flex:none; }
  .nav__tel:hover{ color:#000; }
  .site-header:not(.scrolled) .nav__tel{ color:var(--cream-2); text-shadow:0 1px 10px rgba(0,0,0,.4); }
  .site-header:not(.scrolled) .nav__tel svg{ color:var(--leaf-bright); }
}

/* mobile tap-to-call icon (in the top bar, next to the burger) */
.nav__mob{ display:inline-flex; align-items:center; gap:.1rem; }
@media(min-width:900px){ .nav__mob{ display:none; } }
.tel-mini{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:10px; color:var(--bark-2); }
.tel-mini svg{ width:21px; height:21px; }
.site-header:not(.scrolled) .tel-mini{ color:var(--cream-2); }
/* phone link inside the mobile slide-out menu */
.m-tel{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--sans); font-weight:600; color:var(--leaf-deep); }
.m-tel svg{ width:1.1rem; height:1.1rem; }

/* DROPDOWN FIX: transparent bridge across the gap so hover is not lost */
.nav__menu::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:16px; }

/* =========================================================================
   USP/TRUST BAR  +  REALISATIES GRID  +  REVIEWS  +  form reassurance
   ========================================================================= */
.uspbar{ background:var(--bark-2); color:var(--cream); }
.uspbar .wrap{ padding-top:.95rem; padding-bottom:.95rem; }
.uspbar ul{ list-style:none; display:flex; flex-wrap:wrap; gap:.55rem 2.4rem; justify-content:center; }
.uspbar li{ display:inline-flex; align-items:center; gap:.5rem; font-size:.93rem; font-weight:500; color:rgba(247,243,234,.94); }
.uspbar li svg{ width:1.05rem; height:1.05rem; color:var(--leaf-bright); flex:none; }
@media(max-width:680px){ .uspbar ul{ gap:.5rem 1.3rem; } .uspbar li{ font-size:.83rem; } }

.realisaties{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-top:1.7rem; }
@media(min-width:640px){ .realisaties{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:980px){ .realisaties{ grid-template-columns:repeat(4,1fr); gap:.85rem; } }
.realisaties img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; display:block;
  box-shadow:0 8px 22px -16px rgba(42,29,11,.6); transition:transform .35s ease; }
.realisaties img:hover{ transform:translateY(-3px) scale(1.01); }

.rev-badges{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.3rem; }
.rev-badge{ display:inline-flex; align-items:center; gap:.5rem; background:var(--cream-2); border:1px solid var(--line);
  border-radius:100px; padding:.5rem 1.05rem; font-size:.96rem; color:var(--bark-2); }
.rev-badge strong{ font-size:1.05rem; }
.rev-badge em{ color:#E8A93C; font-style:normal; letter-spacing:.04em; font-size:.95rem; }
.rev-grid{ display:grid; gap:1rem; margin-top:1.7rem; grid-template-columns:1fr; }
@media(min-width:760px){ .rev-grid{ grid-template-columns:1fr 1fr; } }
.rev{ background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.5rem 1.6rem; box-shadow:var(--shadow); }
.rev__stars{ color:#E8A93C; letter-spacing:.12em; margin-bottom:.55rem; font-size:1.02rem; }
.rev blockquote{ font-family:var(--display); font-size:1.2rem; line-height:1.45; color:var(--bark-2); }
.rev figcaption{ margin-top:.9rem; font-weight:600; color:var(--bark); font-size:.92rem; }
.rev figcaption span{ font-weight:500; color:var(--bark-soft); }
.rev-fb{ display:inline-flex; align-items:center; gap:.5rem; color:var(--leaf-deep); font-weight:600; }
.rev-fb svg{ width:1.15rem; height:1.15rem; }

.form-reassure{ display:flex; align-items:center; gap:.5rem; margin-top:.9rem; font-size:.9rem; color:var(--bark-soft); }
.form-reassure svg{ width:1rem; height:1rem; color:var(--leaf-deep); flex:none; }

/* =========================================================================
   D — image+text split rows  +  gallery "Toon meer"
   ========================================================================= */
.split{ display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center; margin:clamp(2.6rem,5vw,4.2rem) 0; }
@media(min-width:860px){
  .split{ grid-template-columns:1fr 1fr; }
  .split--flip .split__txt{ order:2; }
}
.split__txt .eyebrow{ margin-bottom:.5rem; }
.split__txt h2{ margin:.1rem 0 .9rem; }
.split__img{ margin:0; }
.split__img img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }

.g-hidden{ display:none !important; }
.gallery-more-wrap{ text-align:center; margin-top:1.7rem; }