:root{
  --navy:#0d1b2a;
  --blue:#1e3a5f;
  --green:#2e7d32;
  --green-dark:#236126;
  --ice:#e6eef5;
  --off:#f7f7f7;
  --white:#ffffff;
  --ink:#17202a;
  --muted:#667085;
  --line:#d9e2ec;
  --shadow:0 18px 45px rgba(13,27,42,.12);
  --radius:22px;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Montserrat,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}

/* Header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(to bottom,rgba(13,27,42,.75),rgba(13,27,42,0));
  color:#fff;
}
.nav{
  min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{font-weight:800;letter-spacing:.2px;font-size:1.15rem}
.brand span{color:#7fcf81}
.nav-links{display:flex;gap:26px;align-items:center;font-size:.95rem}
.nav-links a{opacity:.88}
.nav-links a:hover{opacity:1;color:#a7e4a9}
.nav-cta{
  padding:11px 16px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
}
.lang-switcher{display:flex;align-items:center;gap:6px}
.lang-switcher button{
  min-width:38px;height:38px;border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.08);color:#fff;border-radius:999px;
  padding:0 10px;cursor:pointer;font-weight:700;font-size:.85rem;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,color .2s ease;
}
.lang-switcher button:hover:not(.active){background:rgba(255,255,255,.16);transform:translateY(-1px)}
.lang-switcher button.active{background:#fff;color:var(--navy);border-color:#fff}
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;padding:0;border:0;background:transparent;cursor:pointer;
}
.nav-toggle-bar{display:block;width:100%;height:2px;background:#fff;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle.is-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hero */
.hero{
  min-height:650px;
  /* Exact de kleur van de linkerrand van hero.png (#091c32), zodat er op brede
     schermen geen zichtbare naad ontstaat tussen achtergrond en foto. */
  --hero-edge:#091c32;
  background:var(--hero-edge);
  color:#fff;
  position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:url("../assets/images/hero.png") center/cover no-repeat;
  z-index:0;
}
/* Vanaf 1600px blijft de foto op vaste afmetingen staan i.p.v. mee te schalen
   met de volledige breedte, zodat de personen niet steeds groter worden en
   de compositie t.o.v. de tekst behouden blijft. Overtollige breedte toont
   de donkerblauwe hero-achtergrond. */
@media(min-width:1600px){
  .hero::after{
    background-position:right center;
    background-size:auto 100%;
  }
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(13,27,42,.35) 0%,rgba(13,27,42,.15) 45%,rgba(13,27,42,0) 70%);
  z-index:1;
}
.hero-inner{
  position:relative;z-index:2;min-height:650px;
  display:flex;flex-direction:column;justify-content:center;gap:64px;
  padding:96px 0 46px;
}
.hero-copy{max-width:640px}
.eyebrow{
  font-size:.82rem;text-transform:uppercase;letter-spacing:.13em;
  color:#b7d9b8;font-weight:800;
}
.eyebrow-rule{display:block;width:36px;height:2px;background:#5eb462;margin:10px 0 14px}
h1{font-size:clamp(2.6rem,6vw,5rem);line-height:1.03;margin:18px 0 22px;letter-spacing:-.035em}
.hero p{font-size:1.18rem;color:#d7e0ea;max-width:610px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:11px;padding:14px 20px;font-weight:800;cursor:pointer;
  transition:.2s ease;
}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-dark);transform:translateY(-1px)}
.btn-secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn-secondary:hover{background:rgba(255,255,255,.08)}

/* Hero trust bar */
.hero-trustbar{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(13,27,42,.55);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  backdrop-filter:blur(6px);
}
.hero-trustitem{
  position:relative;
  display:flex;align-items:center;gap:14px;
  padding:22px 20px;
}
.hero-trustitem::after{
  content:"";
  position:absolute;top:14px;bottom:14px;right:0;
  width:1px;
  background:rgba(255,255,255,.14);
}
.hero-trustitem:last-child::after{display:none}
.hero-trust-icon{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:var(--green);color:#fff;
  display:grid;place-items:center;
}
.hero-trust-icon svg{display:block;width:16px;height:16px}
.hero-trustitem strong{display:block;color:#fff;font-size:.98rem}
.hero-trustitem > div span{display:block;font-size:.85rem;color:#c3ccd6}

/* General sections */
section{padding:90px 0}
.section-kicker{color:var(--green);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.15;margin:10px 0 16px;color:var(--navy);letter-spacing:-.025em}
.section-intro{max-width:760px;color:var(--muted);font-size:1.05rem}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.photo-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.photo-card img{width:100%;aspect-ratio:4/5;object-fit:cover}
.section-rule{display:block;width:52px;height:3px;background:var(--green);border-radius:2px;margin:12px 0 14px}
.checks{list-style:none;padding:0;margin:25px 0 0;display:grid;gap:14px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.check-icon{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;margin-top:1px;
  background:var(--green);color:#fff;
  display:grid;place-items:center;
}
.check-icon svg{display:block;width:12px;height:12px}

/* About highlights strip */
.about-highlights{
  margin-top:70px;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--off);
  border-radius:18px;
}
.about-highlight-item{position:relative;padding:30px 26px}
.about-highlight-item::after{
  content:"";position:absolute;top:20px;bottom:20px;right:0;width:1px;
  background:var(--line);
}
.about-highlight-item:last-child::after{display:none}
.highlight-icon{
  width:52px;height:52px;border-radius:50%;background:#e3efe4;color:var(--green);
  display:grid;place-items:center;margin-bottom:18px;
}
.highlight-icon svg{display:block;width:24px;height:24px}
.about-highlight-item strong{display:block;color:var(--navy);font-size:1.02rem;margin-bottom:6px}
.highlight-text{display:block;color:var(--muted);font-size:.9rem;line-height:1.55}

/* Werkwijze */
.approach-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:stretch}
.approach-grid p{color:var(--muted);margin:0 0 16px}
.approach-media{position:relative;height:100%;min-height:460px;margin-bottom:56px}
.approach-media .photo-card{position:relative;height:100%;margin:0}
.approach-media .photo-card img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
.approach-highlight{
  position:absolute;left:24px;right:24px;bottom:-42px;
  background:var(--navy);color:#fff;border-radius:18px;
  padding:26px 28px;display:flex;gap:16px;align-items:flex-start;
  box-shadow:var(--shadow);
}
.approach-highlight-icon{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  background:var(--green);color:#fff;display:grid;place-items:center;
}
.approach-highlight-icon svg{display:block;width:20px;height:20px}
.approach-highlight h3{margin:0 0 8px;font-size:1.15rem;line-height:1.35;color:#fff}
.approach-highlight p{margin:0;color:#c9d4df;font-size:.92rem;line-height:1.6}
.approach-steps{margin-top:56px}

/* Reference / testimonials */
.reference-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.reference-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:32px;box-shadow:var(--shadow);
}
.reference-card-placeholder{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;background:#fafbfc;box-shadow:none;border-style:dashed;
}
.reference-card-placeholder .reference-quote-mark{color:var(--muted)}
.reference-card-placeholder .reference-quote{color:var(--muted);margin:0}
.reference-logo{display:block;text-decoration:none;color:inherit;width:fit-content}
.reference-logo:hover strong{text-decoration:underline}
.reference-logo strong{font-size:1.25rem;color:var(--navy);letter-spacing:-.01em}
.reference-logo-a strong span{color:var(--green)}
.reference-logo-b strong span{color:#e08a1e}
.reference-logo-sub{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.reference-quote-mark{display:block;font-family:Georgia,serif;font-size:2.8rem;line-height:1;color:var(--green);margin:18px 0 4px}
.reference-quote{font-style:italic;color:var(--navy);line-height:1.65;margin:0 0 26px}
.reference-person{display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid var(--line)}
.reference-avatar{
  flex:0 0 auto;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:1.15rem;
  line-height:1;letter-spacing:0;overflow:hidden;text-align:center;
}
.reference-avatar-a{background:#e3efe4;color:var(--green)}
.reference-avatar-b{background:#fbe9d2;color:#e08a1e}
.reference-person strong{display:block;color:var(--navy);font-size:.98rem}
.reference-person span{display:block;color:var(--muted);font-size:.87rem;line-height:1.4}
.reference-cta{display:flex;justify-content:center;gap:14px;margin-top:48px;text-align:left}
.reference-cta-icon{flex:0 0 auto;color:var(--green)}
.reference-cta-icon svg{display:block;width:34px;height:34px}
.reference-cta p{margin:0 0 4px;color:var(--navy)}
.reference-cta-link{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-weight:800}
.reference-cta-link svg{width:16px;height:16px;transition:transform .2s ease}
.reference-cta-link:hover svg{transform:translateX(3px)}

/* Services */
.services{background:var(--off)}
.service-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px;
}
.service-card{
  background:#fff;border:1px solid #e4e9ef;border-radius:20px;padding:26px;
  box-shadow:0 12px 30px rgba(13,27,42,.05);
  display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:#bfe0c2;
  box-shadow:0 22px 45px rgba(13,27,42,.13);
}
.icon{
  width:52px;height:52px;border-radius:14px;background:#e8f3e9;color:var(--green);
  display:grid;place-items:center;margin-bottom:18px;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.icon svg{display:block;width:24px;height:24px}
.service-card:hover .icon{background:var(--green);color:#fff;transform:scale(1.08)}
.service-card h3{font-size:1.1rem;line-height:1.25;margin:0;color:var(--navy)}
.service-card-rule{display:block;width:34px;height:3px;background:var(--green);border-radius:2px;margin:12px 0 16px;transition:width .25s ease}
.service-card:hover .service-card-rule{width:50px}
.service-card p{margin:0 0 20px;color:var(--muted)}
.service-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.service-tag{background:var(--off);color:var(--muted);font-size:.8rem;padding:6px 12px;border-radius:999px}
.more-btn{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:0;color:var(--green);
  font-weight:700;font-size:.92rem;cursor:pointer;
  transition:gap .2s ease;
}
.service-card:hover .more-btn,.more-btn:hover{gap:11px}

/* Sierteelt */
.sierteelt-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:54px;align-items:stretch}
.sierteelt-tags{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 28px}
.sierteelt-tag{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid #bfe0c2;color:var(--green);background:#fff;
  padding:8px 14px 8px 10px;border-radius:999px;font-size:.88rem;font-weight:600;
}
.sierteelt-tag svg{display:block;width:16px;height:16px}
.sierteelt-features{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;
  box-shadow:var(--shadow);
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.sierteelt-feature-icon{
  width:44px;height:44px;border-radius:50%;background:#e8f3e9;color:var(--green);
  display:grid;place-items:center;margin-bottom:12px;
}
.sierteelt-feature-icon svg{display:block;width:20px;height:20px}
.sierteelt-features h4{margin:0 0 6px;color:var(--navy);font-size:.98rem}
.sierteelt-features p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.55}
.sierteelt-gallery{display:flex;flex-direction:column;gap:16px;height:100%}
.sierteelt-gallery-main{width:100%;flex:1 1 0;min-height:0;object-fit:cover;border-radius:20px}
.sierteelt-gallery-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1 1 0;min-height:0}
.sierteelt-gallery-row img{width:100%;height:100%;object-fit:cover;border-radius:20px}
.sierteelt-banner{
  margin-top:40px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 32px;
  box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.sierteelt-banner-content{display:flex;align-items:center;gap:18px}
.sierteelt-banner-icon{
  width:52px;height:52px;border-radius:50%;background:#e8f3e9;color:var(--green);
  display:grid;place-items:center;flex:0 0 auto;
}
.sierteelt-banner-icon svg{display:block;width:24px;height:24px}
.sierteelt-banner h3{margin:0 0 4px;color:var(--navy);font-size:1.05rem}
.sierteelt-banner p{margin:0;color:var(--muted);font-size:.92rem}
.sierteelt-banner-link{
  display:inline-flex;align-items:center;gap:7px;color:var(--green);font-weight:700;
  white-space:nowrap;transition:gap .2s ease;
}
.sierteelt-banner-link:hover{gap:11px}
.sierteelt-banner-link svg{display:block;width:15px;height:15px}

#werkwijze{background:var(--off)}

/* CTA band */
.cta-band{padding:0}
.cta-box{
  background:linear-gradient(135deg,var(--navy),var(--blue));
  border-radius:26px;padding:52px;color:#fff;display:flex;justify-content:space-between;gap:30px;align-items:center;
}
.cta-box h2{color:#fff;margin:0 0 10px}
.cta-box p{margin:0;color:#d9e5ef;max-width:720px}

/* Contact */
#contact{background:var(--navy);color:#fff}
#contact .section-intro{color:#c9d4df}
#contact h2{color:#fff}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:55px;align-items:start}
.contact-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:30px;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:7px}
.field.full{grid-column:1/-1}
#contact label{font-size:.9rem;font-weight:700;color:#fff}
#contact input,#contact textarea,#contact select{
  width:100%;border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:12px 13px;
  background:rgba(255,255,255,.05);color:#fff;outline:none;
}
#contact select option{color:var(--navy);background:#fff}
#contact input::placeholder,#contact textarea::placeholder{color:#7d90a3}
#contact input:focus,#contact textarea:focus,#contact select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(46,125,50,.25)}
textarea{min-height:150px;resize:vertical}
#contact .form-note{font-size:.82rem;color:#8fa0b2;margin-top:12px}
.form-status{
  margin:0 0 18px;padding:12px 14px;border-radius:10px;font-size:.9rem;font-weight:600;
}
.form-status.is-success{background:rgba(46,125,50,.18);border:1px solid rgba(46,125,50,.4);color:#a7e4a9}
.form-status.is-error{background:rgba(200,60,60,.15);border:1px solid rgba(200,60,60,.4);color:#f3b4b4}
#contactSubmit[disabled]{opacity:.65;cursor:not-allowed}
.contact-points{display:grid;gap:6px;margin-top:26px}
.contact-point{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.contact-point:last-child{border-bottom:0}
.contact-point-icon{
  flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  color:var(--green);display:grid;place-items:center;
}
.contact-point-icon svg{width:20px;height:20px;display:block}
.contact-point strong{display:block;color:#fff;margin-bottom:3px}
.contact-point-text{display:block;color:#9fb1c4;font-size:.9rem}

/* Modal */
.modal{
  position:fixed;inset:0;background:rgba(5,12,20,.72);z-index:5000;
  display:none;align-items:center;justify-content:center;padding:24px;
}
.modal.is-open{display:flex}
.modal-panel{
  width:min(880px,100%);max-height:88vh;overflow:auto;background:#fff;border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.28);
}
.modal-hero{
  padding:34px;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;
  display:flex;justify-content:space-between;gap:20px;align-items:flex-start;
}
.modal-hero h3{font-size:2rem;margin:0}
.modal-close{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.32);
  background:transparent;color:#fff;font-size:1.3rem;cursor:pointer;
}
.modal-body{padding:34px}
.portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.portfolio-item{padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--off)}
.portfolio-item strong{display:block;color:var(--navy);margin-bottom:7px}
.modal-gallery{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:24px}
.modal-gallery[hidden]{display:none}
.modal-gallery img{
  width:100%;height:140px;object-fit:cover;border-radius:14px;display:block;
  cursor:zoom-in;transition:transform .2s ease,box-shadow .2s ease;
}
.modal-gallery img:hover,.modal-gallery img:focus-visible{
  transform:scale(1.05);box-shadow:0 10px 24px rgba(13,27,42,.25);
}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;background:rgba(5,12,20,.88);z-index:6000;
  display:none;align-items:center;justify-content:center;padding:40px;
}
.lightbox.is-open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.lightbox-close{
  position:absolute;top:20px;right:24px;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.32);background:transparent;color:#fff;
  font-size:1.3rem;cursor:pointer;
}

footer{background:var(--navy);color:#c9d4df;padding:34px 0}
.footer-row{display:flex;justify-content:space-between;gap:20px;align-items:center}
.footer-row small{color:#8fa0b2}

/* Tablet/kleinere laptop: compactere titel, foto iets meer naar rechts
   binnen de cover-crop, USP-balk compacter — nog geen volledig andere
   (gestapelde) mobiele compositie. */
@media(max-width:1200px){
  h1{font-size:clamp(2.2rem,5.2vw,3.6rem)}
  .hero::after{background-position:72% center}
  .hero-trustitem{padding:16px 14px}
  .hero-trustitem strong{font-size:.92rem}
  .hero-trustitem > div span{font-size:.82rem}
}
@media(max-width:900px){
  .nav-toggle{display:flex}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:18px;
    background:rgba(13,27,42,.97);backdrop-filter:blur(6px);
    padding:22px 24px 28px;border-top:1px solid rgba(255,255,255,.14);
  }
  .nav-links.is-open{display:flex}
  .nav-links .lang-switcher{margin-top:4px}
  /* Op smalle schermen bindt de hoogte i.p.v. de breedte bij background-size:cover,
     waardoor de linker (donkere) zone van hero.png deels wegvalt. Extra overlay
     als vangnet voor leesbaarheid van de tekst. */
  .hero::before{background:rgba(13,27,42,.55)}
  .hero-trustbar{grid-template-columns:1fr 1fr}
  .hero-trustitem::after{display:none}
  .hero-trustitem{border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
  .hero-trustitem:nth-child(2n){border-right:0}
  .hero-trustitem:nth-last-child(-n+2){border-bottom:0}
  .split,.contact-grid,.sierteelt-grid,.approach-grid,.reference-grid{grid-template-columns:1fr}
  .approach-highlight{position:static;margin-top:20px}
  .approach-media{margin-bottom:0;height:auto;min-height:0}
  .approach-media .photo-card{height:auto}
  .approach-media .photo-card img{position:static;height:auto;aspect-ratio:4/5}
  .service-grid{grid-template-columns:1fr 1fr}
  .sierteelt-gallery{margin-top:38px;height:auto}
  .sierteelt-gallery-main{flex:none;height:340px;margin-top:0}
  .sierteelt-gallery-row{flex:none}
  .sierteelt-gallery-row img{height:220px}
  .cta-box{display:block}
  .cta-box .btn{margin-top:24px}
  .about-highlights{grid-template-columns:1fr 1fr}
  .about-highlight-item::after{display:none}
  .about-highlight-item{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .about-highlight-item:nth-child(2n){border-right:0}
  .about-highlight-item:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:620px){
  .container{width:min(100% - 28px,var(--max))}
  section{padding:68px 0}
  /* Mobiel: foto blijft (net als op desktop) als achtergrond achter de tekst
     vallen i.p.v. een los blok boven de tekst. Overlay iets donkerder dan het
     tablet-tussenformaat, omdat de tekst hier over de volledige breedte van
     de foto loopt in plaats van alleen over het donkere linkerdeel. */
  .hero{min-height:560px}
  .hero-inner{min-height:auto}
  .hero::before{background:rgba(13,27,42,.65)}
  .hero-inner{padding:96px 0 40px;gap:40px}
  .hero-trustbar,.service-grid,.form-grid,.portfolio-grid,.about-highlights,.sierteelt-features,.modal-gallery{grid-template-columns:1fr}
  .hero-trustitem{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .hero-trustitem:last-child{border-bottom:0}
  .about-highlight-item{border-right:0;border-bottom:1px solid var(--line)}
  .about-highlight-item:last-child{border-bottom:0}
  .sierteelt-gallery-main{height:220px}
  .sierteelt-gallery-row img{height:140px}
  .footer-row{display:block}
}

/* ===== Tools-pagina ===== */
.site-header-solid{background:var(--navy)}
.nav-links a[aria-current="page"]{opacity:1;color:#a7e4a9}
.page-hero{
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;padding:150px 0 70px;
}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:0 0 18px}
.page-hero p{font-size:1.12rem;color:#d7e0ea;max-width:720px;margin:0}
.tools-section{background:var(--off);padding:60px 0 90px}
.tools-howto{
  background:var(--white);border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:14px;padding:18px 22px;margin-bottom:30px;
}
.tools-howto p{margin:4px 0 0;color:var(--muted)}
.tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.tool-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0;
}
.tool-head{display:flex;gap:16px;align-items:center}
.tool-icon{width:64px;height:64px;flex:0 0 auto;border-radius:14px}
.tool-name{font-size:1.45rem;line-height:1.2;margin:0;color:var(--navy);letter-spacing:-.01em}
.tool-tagline{margin:4px 0 0;color:var(--muted);font-size:.95rem}
.tool-badge{
  margin-left:auto;align-self:flex-start;white-space:nowrap;
  font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  padding:6px 10px;border-radius:999px;
}
.tool-badge-free{background:#e7f4e8;color:var(--green-dark)}
.tool-badge-trial{background:var(--ice);color:var(--blue)}
.tool-description{margin:22px 0 0}
.tool-features{margin:18px 0 0;gap:10px;font-size:.95rem}
.tool-install{
  margin-top:24px;display:flex;align-items:center;gap:10px;
  background:var(--navy);color:#e6eef5;border-radius:12px;padding:10px 10px 10px 14px;
}
.tool-install-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#7fcf81;flex:0 0 auto}
.tool-install code{
  flex:1;min-width:0;overflow-x:auto;white-space:nowrap;
  font-family:Consolas,"Cascadia Mono",monospace;font-size:.82rem;
}
.tool-copy{
  flex:0 0 auto;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;
  border-radius:8px;padding:7px 12px;cursor:pointer;font-weight:700;font-size:.8rem;transition:.2s ease;
}
.tool-copy:hover{background:rgba(255,255,255,.18)}
.tool-copy.is-copied{background:var(--green);border-color:var(--green)}
.tool-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.tool-size{font-weight:600;opacity:.85}
.btn-outline{background:transparent;color:var(--navy);border:1px solid var(--line)}
.btn-outline:hover{border-color:var(--green);color:var(--green-dark)}
.tool-meta{margin:auto 0 0;padding-top:18px;font-size:.85rem;color:var(--muted)}
.tool-meta-muted{font-style:italic}
.tool-meta-link{color:var(--green-dark);text-decoration:underline}
.tools-cta{padding:0 0 90px;background:var(--off)}
.footer-row a{color:#c9d4df;text-decoration:underline}
@media(max-width:900px){
  .tools-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:620px){
  .page-hero{padding:120px 0 50px}
  .tool-card{padding:24px}
  .tool-head{flex-wrap:wrap}
  .tool-badge{margin-left:0}
  .tool-install{flex-wrap:wrap}
  .tool-install code{flex-basis:100%;order:2}
}