:root{
  --brand-green:#2f9152;
  --brand-green-dark:#1d5c34;

  --ink:#1c231d;
  --paper:#faf8f3;
  --paper-alt:#f1eee4;
  --line:#e4e0d2;
  --muted:#666f63;
  --muted-2:#8b9186;
  --tag-bg:#e7f1e9;
  --accent-green-rgb:47,145,82;
  --accent-warm-rgb:198,124,58;
  --accent-ink-rgb:28,35,29;

  --radius:10px;
  --radius-pill:100px;
  --maxw:1180px;
  --font-display:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-brand:'Jost','Century Gothic','Trebuchet MS','Segoe UI',Verdana,sans-serif;

  /* type scale */
  --fs-h1:clamp(2.5rem,5.2vw,4rem);
  --fs-h2:clamp(1.9rem,3.6vw,2.7rem);
  --fs-h3:1.3rem;
  --fs-body:1.05rem;
  --fs-caption:0.8rem;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* the old full-page photo wash is retired — the whole page is now built
   from the brand's own vocabulary (gradients, line patterns, the droplet
   mark) rather than photography, so this legacy element stays hidden. */
.page-bg{display:none;}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.01em;
  line-height:1.08;
  text-wrap:balance;
  margin:0 0 0.5em;
  color:var(--ink);
}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);font-weight:700;}

p{margin:0 0 1em;color:var(--muted);}

.center{text-align:center;margin-left:auto;margin-right:auto;}
.section-sub.center{max-width:640px;}

.placeholder{
  background:var(--tag-bg);
  color:var(--green-dark,var(--brand-green-dark)) !important;
  border:1px dashed var(--brand-green);
  border-radius:4px;
  padding:0.05em 0.4em;
  font-style:normal;
}

.btn{
  display:inline-block;
  padding:0.9em 1.8em;
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.95rem;
  border-radius:var(--radius-pill);
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary{background:var(--brand-green);color:#fff;}
.btn-primary:hover{background:var(--brand-green-dark);transform:translateY(-2px);}
.btn-ghost{border-color:var(--ink);color:var(--ink);}
.btn-ghost:hover{border-color:var(--brand-green);color:var(--brand-green);transform:translateY(-2px);}

/* brand lockup — droplet + wordmark. Single ink-on-paper treatment
   throughout: unlike the old dark design, nothing here sits on a dark
   ground anymore, so the wordmark no longer needs a light/dark variant.
   Two markup variants still live side by side in the header (primary
   stacked / condensed single-line) and are toggled with the existing
   .scrolled state; the footer only ever shows the primary. */
.brand-lockup{display:inline-flex;align-items:center;color:var(--ink);}
.brand-drop{flex-shrink:0;display:block;}
.brand-drop path{stroke:var(--brand-green);}

.brand-wordmark{
  font-family:var(--font-brand);
  font-weight:400;
  color:var(--ink);
  text-transform:uppercase;
}

/* primary — stacked two-line wordmark */
.brand-wordmark--stacked{display:flex;flex-direction:column;}
.brand-line{letter-spacing:0.32em;}

/* condensed — single line, tighter tracking, for the sticky/shrunk header */
.brand-wordmark--single{white-space:nowrap;letter-spacing:7px;}
.brand-lockup--condensed{display:none;}

/* header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,248,243,0.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:background .2s ease, border-color .2s ease;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:168px;
  transition:height .2s ease;
}
.site-header .brand-lockup--primary{gap:16px;}
.site-header .brand-lockup--primary .brand-drop{width:52px;height:72px;}
.site-header .brand-line{font-size:30px;line-height:37px;}

.site-header .brand-lockup--condensed{gap:14px;align-items:center;}
.site-header .brand-lockup--condensed .brand-drop{width:19px;height:26px;}
.site-header .brand-wordmark--single{font-size:19px;}

.site-header.scrolled .header-inner{height:84px;}
.site-header.scrolled .brand-lockup--primary{display:none;}
.site-header.scrolled .brand-lockup--condensed{display:inline-flex;}
.site-header.scrolled{background:rgba(250,248,243,0.94);}

.nav{display:flex;align-items:center;gap:2.3rem;}
.nav a{
  font-family:var(--font-body);
  font-weight:500;
  letter-spacing:0.01em;
  font-size:0.95rem;
  color:var(--ink);
}
.nav a:hover{color:var(--brand-green);}
.nav-cta{
  background:var(--brand-green);color:#fff !important;
  padding:0.65em 1.4em;border-radius:var(--radius-pill);
  font-weight:600;
}
.nav-cta:hover{background:var(--brand-green-dark) !important;color:#fff !important;}
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;background:none;border:none;cursor:pointer;
}
.nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px;}

/* language switcher — flags only, no letter codes. A small pill button
   showing the active flag opens a dropdown of the other options. */
.lang-switch{position:relative;margin-left:1.4rem;}
.lang-switch-btn{
  display:inline-flex;align-items:center;gap:0.4em;
  background:none;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:0.4em 0.7em;
  cursor:pointer;
  color:var(--muted);
  transition:border-color .15s ease, color .15s ease;
}
.lang-switch-btn:hover{border-color:var(--brand-green);color:var(--brand-green);}
.lang-switch .lang-flag{font-size:1.1rem;line-height:1;}
.lang-chevron{transition:transform .15s ease;}
.lang-switch.open .lang-chevron{transform:rotate(180deg);}

.lang-menu{
  position:absolute;top:calc(100% + 0.6rem);right:0;
  min-width:150px;
  margin:0;padding:0.4rem;list-style:none;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 16px 32px rgba(28,35,29,0.14);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:60;
}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0);}
.lang-option{
  display:flex;align-items:center;gap:0.6em;width:100%;
  background:none;border:none;border-radius:6px;
  padding:0.55em 0.7em;
  font-family:var(--font-body);font-size:0.9rem;color:var(--ink);
  cursor:pointer;text-align:left;
  transition:background .15s ease;
}
.lang-option:hover{background:var(--paper-alt);}
.lang-option.is-active{color:var(--brand-green);font-weight:600;}
.lang-option .lang-flag{font-size:1.05rem;}

/* hero — the river barge photo runs full-bleed behind the text on
   desktop, with a scrim only on the left where the headline sits so the
   ship itself (positioned right-of-center in the source photo) stays
   sharp and fully visible. On mobile the photo and text stop competing
   for the same space entirely: the photo becomes its own full-width
   block up top (ship still framed via object-position), and the text
   follows below on the plain paper background. */
.hero{
  position:relative;
  padding:9rem 0 7rem;
  overflow:hidden;
  color:#fff;
  background:var(--ink);
}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media-img{width:100%;height:100%;object-fit:cover;object-position:60% 62%;filter:contrast(1.05);}
.hero-media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(10,14,11,0.82) 0%, rgba(10,14,11,0.56) 36%, rgba(10,14,11,0.2) 58%, rgba(10,14,11,0.04) 72%),
    linear-gradient(180deg, rgba(10,14,11,0.2) 0%, transparent 22%, transparent 78%, rgba(10,14,11,0.28) 100%);
}
.hero-inner{position:relative;z-index:1;max-width:760px;}
.hero h1{color:#fff;}
.hero-cta{margin-top:1.4rem;}

/* scroll-reveal: sections fade/slide up as they enter the viewport */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* stat strip — light hairline rhythm instead of a solid dark band */
.strip{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.strip-inner{
  display:grid;grid-template-columns:repeat(2,1fr);
  padding:3.6rem 28px;
}
.strip-item{text-align:center;border-left:1px solid var(--line);}
.strip-item:first-child{border-left:none;}
.strip-num{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:3rem;color:var(--brand-green);line-height:1;letter-spacing:-0.02em;
}
.strip-label{
  display:block;margin-top:0.7rem;font-size:0.83rem;
  text-transform:uppercase;letter-spacing:0.1em;color:var(--muted-2);
}

.section{padding:6.5rem 0;}
.section-sub{font-size:var(--fs-body);margin:0 auto 2.5rem;color:var(--muted);}

/* hero-drop-band — wraps the hero and the sector-band so the oversized
   droplet outline can run across both: it lives as a sibling positioned
   after both, unclipped by either section's own overflow:hidden, so its
   lower half visibly continues past the hero into "Wat we doen" instead
   of stopping dead at the section edge. z-index:1 text everywhere still
   wins over it, since it carries no z-index of its own. */
.hero-drop-band{position:relative;}
.brand-drop-continue{
  position:absolute;
  top:-200px;right:-160px;
  width:800px;height:1300px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 84'%3E%3Cpath d='M33 10 C33 10 39 23 46 35 C51 45 51 58 41 66 C33 73 19 72 13 63 C8 55 10 44 18 35 C26 25 33 10 33 10 Z' fill='none' stroke='%232f9152' stroke-width='1.4' opacity='0.34'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
}

/* sector-band — "Wat we doen", "Wie wij zijn" and "Waar we investeren"
   share ONE continuous abstract background: layered diagonal field-lines
   in green, warm ochre and ink, echoing the stripes of Dutch bulb fields
   without using a literal photograph. One motif ties the three sections
   together; there's no seam between them inside the band. */
.sector-band{position:relative;overflow:hidden;background:var(--paper);border-top:1px solid var(--line);}
.sector-band::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(122deg, rgba(var(--accent-green-rgb),0.09) 0px, rgba(var(--accent-green-rgb),0.09) 3px, transparent 3px, transparent 26px),
    repeating-linear-gradient(122deg, rgba(var(--accent-warm-rgb),0.07) 10px, rgba(var(--accent-warm-rgb),0.07) 13px, transparent 13px, transparent 52px),
    repeating-linear-gradient(122deg, rgba(var(--accent-ink-rgb),0.04) 20px, rgba(var(--accent-ink-rgb),0.04) 22px, transparent 22px, transparent 70px);
}
.sector-band > section{position:relative;z-index:1;background:transparent;}

.about{position:relative;}
.about .wrap{position:relative;z-index:1;}

/* editorial text block — no card, no photo underneath it; a thin green
   rule under the heading is the only ornament, which is all that's
   needed for legibility once sections stop carrying imagery. */
.about-single{max-width:700px;margin:0 auto;text-align:center;}
.about-single h2{margin-bottom:0;}
.about-single h2::after{
  content:"";
  display:block;
  width:56px;height:3px;border-radius:2px;
  background:var(--brand-green);
  margin:1.1rem auto 1.4rem;
}
.about-single p{font-size:var(--fs-body);color:var(--muted);margin:0;}

/* Voor eigenaren — a fine dot-grid plus a single soft green field,
   deliberately quieter and more "data sheet" than the sections either
   side of it. */
.what-we-do-light{
  position:relative;
  background:var(--paper-alt);
  color:var(--ink);
  overflow:hidden;
  border-top:1px solid var(--line);
}
.what-we-do-light::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 88% 18%, rgba(var(--accent-green-rgb),0.14), transparent 45%),
    radial-gradient(rgba(var(--accent-ink-rgb),0.07) 1.6px, transparent 1.6px);
  background-size:auto, 24px 24px;
}
.what-we-do-light .wrap{position:relative;z-index:1;}

/* Wij denken anders — a soft green field behind an oversized quote mark,
   crossed by fine diagonal rules: patience made visible without a photo. */
.approach-solid{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  overflow:hidden;
  border-top:1px solid var(--line);
}
.approach-solid::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 22% 30%, rgba(var(--accent-green-rgb),0.15), transparent 48%),
    repeating-linear-gradient(-18deg, rgba(var(--accent-ink-rgb),0.045) 0px, rgba(var(--accent-ink-rgb),0.045) 2px, transparent 2px, transparent 36px);
}
.approach-solid .wrap{position:relative;z-index:1;}
.approach-solid .about-single::before{
  content:"“";
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:6rem;
  line-height:1;
  color:var(--brand-green);
  margin-bottom:-0.4rem;
}

/* contact — ripple rings echo the droplet mark: starting a conversation
   as the ripple from a drop. Closes the page on the same brand motif
   the hero opened it with. */
.contact{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  overflow:hidden;
  border-top:1px solid var(--line);
}
.contact::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 84% 18%, rgba(var(--accent-green-rgb),0.14), transparent 45%),
    repeating-radial-gradient(circle at 12% 88%, rgba(var(--accent-green-rgb),0.07) 0px, rgba(var(--accent-green-rgb),0.07) 1.5px, transparent 1.5px, transparent 22px);
}
.contact .wrap{position:relative;z-index:1;}
.contact-inner{max-width:640px;}
.contact-heading{text-align:center;}
.contact-heading h2{margin-bottom:0;}
.contact-heading h2::after{
  content:"";
  display:block;
  width:56px;height:3px;border-radius:2px;
  background:var(--brand-green);
  margin:1.1rem auto 1.4rem;
}
.contact-heading .section-sub{margin-bottom:0;}

/* industries — sits inside .sector-band, so it shares that band's
   pattern rather than carrying its own; each of the five cards gets a
   fine diagonal line texture as its only visual distinction. */
.industries .wrap{position:relative;z-index:1;}

.industries-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem;
  margin-top:3rem;
}
.industry-card{
  position:relative;
  text-align:center;padding:2.2rem 1.2rem;
  min-height:180px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
  background:var(--paper-alt);
  box-shadow:0 10px 24px rgba(28,35,29,0.06);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.industry-card::before{
  content:"";
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(135deg, rgba(var(--accent-green-rgb),0.07) 0px, rgba(var(--accent-green-rgb),0.07) 2px, transparent 2px, transparent 16px);
}
.industry-card:hover{
  transform:translateY(-5px);
  border-color:var(--brand-green);
  box-shadow:0 16px 32px rgba(28,35,29,0.1);
}
.industry-card--industry, .industry-card--healthcare{background:var(--paper);}

.industry-icon{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:var(--tag-bg);color:var(--brand-green);
  margin-bottom:1.1rem;
}
.industry-icon svg{width:26px;height:26px;}
.industry-card h3{position:relative;z-index:1;margin:0;font-size:1.02rem;color:var(--ink);}

.sweet-spot{
  margin:3rem auto 0;max-width:560px;text-align:center;
  padding:1.8rem 2rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper-alt);
}
.sweet-spot-label{
  display:block;font-size:0.8rem;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--muted-2);margin-bottom:0.9rem;
}
.sweet-spot-values{display:flex;justify-content:center;gap:2rem;}
.sweet-spot-item{flex:1;border-left:1px solid var(--line);}
.sweet-spot-item:first-child{border-left:none;}
.sweet-spot-value{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:1.6rem;color:var(--brand-green);letter-spacing:-0.01em;
}

.contact-form{
  margin-top:2rem;display:flex;flex-direction:column;gap:1rem;
  padding:2.6rem;background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--radius);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.contact-form input,.contact-form textarea{
  width:100%;padding:0.85em 1em;font-family:var(--font-body);font-size:0.95rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);resize:vertical;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--muted-2);}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--brand-green);}
.contact-form .btn{align-self:flex-start;}
.form-note{font-size:0.85rem;color:var(--muted-2);margin:0.4rem 0 0;}
.form-note a{color:var(--brand-green);text-decoration:underline;}

/* footer */
.site-footer{background:var(--paper-alt);color:var(--muted-2);padding:3rem 0 2.5rem;border-top:1px solid var(--line);}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;
}
.footer-brand{display:flex;align-items:center;gap:2.4rem;flex-wrap:wrap;}
.footer-inner .brand-lockup{gap:16px;color:var(--ink);}
.footer-inner .brand-drop{width:44px;height:62px;}
.footer-inner .brand-wordmark{color:var(--ink);}
.footer-inner .brand-line{font-size:24px;line-height:30px;}
.footer-address{
  font-style:normal;
  font-size:0.85rem;
  line-height:1.6;
  color:var(--muted-2);
  padding-left:2.4rem;
  border-left:1px solid var(--line);
}
.footer-copy{font-size:0.85rem;margin:0;color:var(--muted-2);}

@media (max-width:860px){
  /* backdrop-filter on .site-header would make it the containing block for
     any position:fixed descendant (the nav drawer below), collapsing its
     height. Drop the blur and go fully opaque instead at this width. */
  .site-header{backdrop-filter:none;background:rgba(250,248,243,0.98);}
  .header-inner{height:96px;}
  .site-header .brand-lockup--primary .brand-drop{width:26px;height:36px;}
  .site-header .brand-line{font-size:15px;line-height:19px;}
  .site-header .brand-lockup--condensed .brand-drop{width:16px;height:22px;}
  .site-header .brand-wordmark--single{font-size:16px;letter-spacing:5px;}
  .site-header.scrolled .header-inner{height:72px;}
  /* the text stays overlaid on the photo at mobile widths too (not
     stacked below it) — the ship stays framed via object-position, and
     the scrim goes flatter/fuller since the text column now spans
     nearly the full width instead of just the left portion. */
  .hero{padding:6.5rem 0 4rem;}
  .hero-media-img{object-position:66% 58%;}
  .hero-media::after{
    background:linear-gradient(180deg, rgba(10,14,11,0.7) 0%, rgba(10,14,11,0.58) 45%, rgba(10,14,11,0.68) 100%);
  }
  .form-row{grid-template-columns:1fr;}
  .footer-inner{flex-direction:column;align-items:flex-start;}
  .footer-brand{flex-direction:column;align-items:flex-start;gap:1.2rem;}
  .footer-inner .brand-drop{width:34px;height:48px;}
  .footer-inner .brand-line{font-size:18px;line-height:23px;}
  .footer-address{padding-left:0;border-left:none;}
  .strip-inner{grid-template-columns:1fr;row-gap:1.6rem;}
  .strip-item{border-left:none !important;border-top:1px solid var(--line);padding-top:1.4rem;}
  .strip-item:first-child{border-top:none;padding-top:0;}
  .industries-grid{grid-template-columns:repeat(2,1fr);}
  .sweet-spot-values{flex-direction:column;gap:1.2rem;}
  .sweet-spot-item{border-left:none;border-top:1px solid var(--line);padding-top:1.2rem;}
  .sweet-spot-item:first-child{border-top:none;padding-top:0;}
  .nav{
    position:fixed;top:96px;right:0;bottom:0;left:auto;
    width:min(320px,82vw);
    background:var(--paper);z-index:60;
    flex-direction:column;align-items:flex-start;padding:2rem 28px;gap:1.6rem;
    transform:translateX(100%);transition:transform .25s ease;
    border-left:1px solid var(--line);
    box-shadow:-16px 0 40px rgba(28,35,29,0.1);
  }
  .nav.open{transform:translateX(0);}
  .nav-toggle{display:flex;}
  .nav-cta{margin-top:0.5rem;}
}

/* keep the desktop layout when printing/exporting to PDF, regardless of paper width */
@media print{
  .header-inner{height:120px !important;}
  .site-header .brand-lockup--primary{display:inline-flex !important;}
  .site-header .brand-lockup--condensed{display:none !important;}
  .site-header .brand-lockup--primary .brand-drop{width:44px !important;height:62px !important;}
  .site-header .brand-line{font-size:26px !important;line-height:32px !important;}
  .strip-inner{grid-template-columns:repeat(2,1fr) !important;}
  .strip-item{border-left:1px solid var(--line) !important;border-top:none !important;}
  .footer-inner{flex-direction:row !important;align-items:center !important;}
  .nav{
    position:static !important;display:flex !important;flex-direction:row !important;
    align-items:center !important;background:none !important;border:0 !important;
    padding:0 !important;transform:none !important;inset:auto !important;gap:1.4rem !important;
  }
  .nav-toggle{display:none !important;}
}