:root{
    --paper:#54565a;
    --paper-2:#494b4f;
    --ink:#f4f4f3;
    --ink-soft:#d7d8da;
    --dark:#202224;
    --dark-2:#18191b;
    --surface:#2b2d30;
    --white:#f7f7f6;
    --grey-onDark:#c4c6c8;
    --red:#d6533d;
    --red-text:#f07860;
    --red-dim:#b74331;
    --line:rgba(255,255,255,0.16);
    --line-onDark:rgba(244,244,243,0.13);
    --glow-a: radial-gradient(ellipse 1300px 850px at 12% -10%, rgba(255,255,255,0.06), transparent 60%);
    --glow-b: radial-gradient(ellipse 1100px 750px at 100% 110%, rgba(0,0,0,0.05), transparent 55%);
    --display: 'Oswald', sans-serif;
    --body: 'Inter', sans-serif;
    --maxw: 1240px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; overflow-x:hidden;}
  body{
    background-color:var(--paper);
    background-image:
      radial-gradient(ellipse 1300px 850px at 12% -8%, rgba(255,255,255,0.055), transparent 60%),
      radial-gradient(ellipse 1100px 750px at 100% 105%, rgba(0,0,0,0.05), transparent 55%);
    background-attachment:fixed;
    color:var(--ink);
    font-family:var(--body);
    font-weight:500;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  img{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  .eyebrow{
    font-family:var(--display);
    text-transform:uppercase;
    letter-spacing:0.28em;
    font-size:12px;
    color:var(--red);
    font-weight:500;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:24px; height:2px;
    background:var(--red);
    display:inline-block;
  }
  h1,h2,h3{font-family:var(--display); text-transform:uppercase; letter-spacing:0.02em; font-weight:700;}
  :focus-visible{outline:2px solid var(--red); outline-offset:3px;}

  /* -------- Wing motif (signature element) -------- */
  .wing{ display:inline-flex; align-items:flex-end; gap:3px; }
  .wing i{ display:block; width:6px; background:var(--ink); transform:skewX(-18deg); }
  .wing i:first-child{background:var(--red); width:8px;}
  .wing.on-dark i{ background:var(--grey-onDark); }
  .wing.on-dark i:first-child{ background:var(--red); }
  .wing.sm i{height:14px;}
  .wing.sm i:nth-child(2){height:11px;}
  .wing.sm i:nth-child(3){height:8px;}

  /* -------- Header -------- */
  header{
    
    background:rgba(73,75,79,0.94);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; height:76px; }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand img{ height:36px; width:auto; }
  .brand-text{ display:flex; flex-direction:column; line-height:1.05; }
  .brand-text b{ font-family:var(--display); font-size:18px; letter-spacing:0.14em; font-weight:700; color:var(--ink); }
  .brand-text span{ font-family:var(--display); font-size:9px; letter-spacing:0.2em; color:var(--red); font-weight:500; }
  .navlinks{ display:flex; gap:20px; }
  .navlinks a{
    font-family:var(--display); font-size:12px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--ink-soft); font-weight:500;
    position:relative; padding:6px 0; white-space:nowrap;
  }
  .navlinks a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
    background:var(--red); transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
  }
  .navlinks a:hover::after, .navlinks a:focus-visible::after{ transform:scaleX(1); }
  .nav-right{ display:flex; align-items:center; gap:16px; }
  .langsw{ display:flex; gap:2px; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
  .langsw button{
    font-family:var(--display); font-size:11px; letter-spacing:0.08em; font-weight:600;
    background:transparent; border:none; color:var(--ink-soft); padding:7px 12px; cursor:pointer;
    transition:all .2s ease;
  }
  .langsw button.active{ background:var(--red); color:var(--white); }
  .langsw button:hover:not(.active){ color:var(--ink); }
  .btn{
    font-family:var(--display); font-size:12px; letter-spacing:0.12em; font-weight:600;
    text-transform:uppercase; padding:12px 22px; border-radius:2px; cursor:pointer;
    border:1px solid transparent; display:inline-flex; align-items:center; gap:10px;
    transition:all .22s ease;
  }
  .btn-primary{ background:var(--red); color:var(--white); }
  .btn-primary:hover{ background:#cc4a34; transform:translateY(-1px); }
  .btn-dark{ background:var(--surface); color:var(--white); border-color:var(--line-onDark); }
  .btn-dark:hover{ background:#3a3c40; transform:translateY(-1px); }
  .btn-ghost-dark{ border-color:rgba(255,255,255,0.35); color:var(--ink); }
  .btn-ghost-dark:hover{ border-color:var(--ink); background:rgba(255,255,255,0.08); }
  .btn-ghost-light{ border-color:rgba(244,244,243,0.4); color:var(--white); }
  .btn-ghost-light:hover{ border-color:var(--white); background:rgba(244,244,243,0.08); }
  .burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
  .burger span{ width:22px; height:2px; background:var(--ink); display:block; }

  /* -------- Split layout (hero / about) -------- */
  .split{
    display:grid; grid-template-columns:1fr 1fr;
    min-height:92vh;
  }
  .split-panel{
    display:flex; flex-direction:column; justify-content:center;
    padding: 130px clamp(32px,5.5vw,80px) 64px;
    position:relative; overflow:hidden;
  }
  .split-panel.light{ background-color:var(--paper); background-image:var(--glow-a), var(--glow-b); color:var(--ink); }
  .split-panel.dark{ background:var(--dark); color:var(--white); }
  .split-panel .eyebrow{ margin-bottom:22px; }
  .split-panel h1, .split-panel h2{
    font-size:clamp(34px, 3.6vw, 54px);
    line-height:1.06;
    margin-bottom:24px;
    max-width:520px;
  }
  .split-panel h1 em, .split-panel h2 em{ color:var(--red); font-style:normal; display:block; }
  .split-sub{ font-size:16.5px; max-width:440px; margin-bottom:34px; }
  .split-panel.light .split-sub{ color:var(--ink-soft); }
  .split-panel.dark .split-sub{ color:var(--grey-onDark); }
  .split-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
  .split-photo{ position:relative; overflow:hidden; min-height:320px; }
  .split-photo img{ width:100%; height:100%; object-fit:cover; }
  .split-watermark{
    position:absolute; opacity:0.05; pointer-events:none; z-index:0;
    display:flex; align-items:flex-end; gap:14px; right:-40px; bottom:-30px;
  }
  .split-panel.light .split-watermark i{ background:var(--ink); }
  .split-panel.dark .split-watermark i{ background:var(--white); }
  .split-watermark i{ display:block; width:40px; transform:skewX(-18deg); }
  .split-watermark i:first-child{ background:var(--red) !important; width:48px; }
  .split-watermark i:nth-child(1){height:260px;}
  .split-watermark i:nth-child(2){height:200px;}
  .split-watermark i:nth-child(3){height:140px;}
  .split-panel > *{ position:relative; z-index:1; }
  .split-tag{
    position:absolute; left:0; bottom:32px; background:var(--red); color:var(--white);
    font-family:var(--display); font-size:12px; letter-spacing:0.14em; font-weight:600;
    padding:10px 20px; z-index:2; text-transform:uppercase;
  }

  /* -------- Sections general -------- */
  section{ padding:110px 0; position:relative; }
  .section-head{ text-align:center; max-width:640px; margin:0 auto 60px; }
  .section-head h2{ font-size:clamp(28px,4vw,44px); margin:18px 0 16px; }
  .section-head p{ font-size:16px; }
  .on-light .section-head p{ color:var(--ink-soft); }
  .on-dark .section-head p{ color:var(--grey-onDark); }

  /* -------- USP strip -------- */
  .usp{ background:var(--dark); padding:72px 0; }
  .usp-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
  .usp-item{
    padding:0 30px; border-left:1px solid var(--line-onDark);
    display:flex; flex-direction:column; gap:16px;
  }
  .usp-item:first-child{ border-left:none; }
  .usp-icon{ width:42px; height:42px; color:var(--red); }
  .usp-item h3{ font-size:16px; letter-spacing:0.06em; color:var(--white); }
  .usp-item p{ color:var(--grey-onDark); font-size:14.5px; }
  .planten .usp-item h3{ color:var(--ink); }
  .planten .usp-item p{ color:var(--ink-soft); }
  .planten .usp-item{ align-items:center; text-align:center; }
  .planten .usp-icon{ color:var(--red-text); }
  #planten .usp-grid{ grid-template-columns:repeat(3,1fr); }
  .on-light .eyebrow, .split-panel.light .eyebrow{ color:var(--red-text); }
  .on-light .eyebrow::before, .split-panel.light .eyebrow::before{ background:var(--red-text); }

  /* -------- Werkzaamheden (checklist) -------- */
  .werk{ background-color:var(--paper-2); background-image:var(--glow-a), var(--glow-b); }
  .werk-grid{ display:grid; grid-template-columns:1fr 0.85fr; gap:70px; align-items:center; }
  .werk-copy .eyebrow{ margin-bottom:20px; }
  .werk-copy h2{ font-size:clamp(26px,3.4vw,38px); margin-bottom:30px; line-height:1.1; color:var(--ink); }
  .checklist{ display:flex; flex-direction:column; }
  .checklist li{
    list-style:none; display:flex; align-items:center; gap:14px;
    padding:14px 0; border-bottom:1px solid var(--line);
    font-size:15.5px; color:var(--ink-soft);
  }
  .checklist li:first-child{ padding-top:0; }
  .check-ico{ width:20px; height:20px; color:var(--red-text); flex-shrink:0; }
  .werk-visual{
    position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:3px;
    border:1px solid var(--line);
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
  }
  .werk-visual img{ width:100%; height:100%; object-fit:cover; }
  .werk-badge{
    position:absolute; left:18px; top:18px; background:var(--red); color:var(--white);
    font-family:var(--display); font-size:12px; letter-spacing:0.12em; font-weight:600;
    padding:9px 16px; z-index:3; text-transform:uppercase; border-radius:2px;
  }

  /* -------- Portfolio / Ons werk -------- */
  .portfolio{ background-color:var(--paper); background-image:var(--glow-a), var(--glow-b); }
  .pf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  .pf-card{
    cursor:pointer; border:none; background:none; text-align:left; padding:0; display:block; width:100%;
  }
  .pf-photo{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; border-radius:3px; border:1px solid var(--line); box-shadow:0 18px 34px -18px rgba(0,0,0,0.5); }
  .pf-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .pf-card:hover .pf-photo img{ transform:scale(1.06); }
  .pf-photo .pf-plus{
    position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%;
    background:rgba(73,75,79,0.94); color:#1f2123;
    display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(0.8);
    transition:all .25s ease;
  }
  .pf-card:hover .pf-plus{ opacity:1; transform:scale(1); }
  .pf-plus svg{ width:14px; height:14px; }
  .pf-cap{ display:block; padding:16px 2px 0; }
  .pf-icon-tile{
    position:relative; display:flex; align-items:center; justify-content:center;
    aspect-ratio:4/3; overflow:hidden; border-radius:3px; background:var(--paper-2);
    border:1px solid var(--line); box-shadow:0 18px 34px -18px rgba(28,29,31,0.2);
  }
  .pf-icon-tile svg{ width:64px; height:64px; color:var(--red); opacity:0.85; }
  .pf-cat{ font-family:var(--display); font-size:11px; letter-spacing:0.18em; color:var(--red-text); text-transform:uppercase; margin-bottom:6px; display:block; }
  .pf-name{ font-family:var(--display); font-size:18px; letter-spacing:0.02em; text-transform:uppercase; font-weight:600; color:var(--ink); }

  /* -------- Lightbox -------- */
  .lightbox{
    position:fixed; inset:0; z-index:200; background:rgba(20,21,24,0.82);
    display:none; align-items:center; justify-content:center; padding:32px;
  }
  .lightbox.open{ display:flex; }
  .lb-panel{
    max-width:760px; width:100%; background:var(--paper); border:1px solid var(--line); border-radius:3px; overflow:hidden;
    display:grid; grid-template-columns:1fr 1fr;
    box-shadow:0 40px 80px -20px rgba(0,0,0,0.6);
  }
  .lb-visual{ aspect-ratio:1/1; position:relative; overflow:hidden; }
  .lb-visual img{ width:100%; height:100%; object-fit:cover; }
  .lb-visual svg{ width:100%; height:100%; }
  .lb-body{ padding:44px; display:flex; flex-direction:column; justify-content:center; }
  .lb-body .pf-cat{ margin-bottom:10px; }
  .lb-body h3{ font-size:24px; margin-bottom:14px; color:var(--ink); }
  .lb-body p{ color:var(--ink-soft); font-size:15px; margin-bottom:24px; }
  .lb-close{
    position:absolute; top:24px; right:24px; z-index:201; background:rgba(247,247,246,0.94); border:none;
    color:#202224; cursor:pointer; width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
  .lb-close svg{ width:20px; height:20px; }

  /* -------- Contact -------- */
  .contact{ background:var(--dark); }
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; }
  .contact-centered{ max-width:640px; margin:0 auto; text-align:center; }
  .contact-centered .cinfo-label,
  .contact-centered .cinfo-val{ text-align:left; }
  .cinfo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 40px; margin-bottom:40px; text-align:left; }
  .contact-ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:4px; }
  .contact-info h2{ font-size:clamp(28px,4vw,42px); margin:18px 0 20px; color:var(--white); }
  .contact-info > p{ color:var(--grey-onDark); font-size:16px; margin:0 auto 40px; max-width:420px; }
  .cinfo-row{ display:flex; gap:16px; padding:20px 0; border-top:1px solid var(--line-onDark); }
  .cinfo-row:last-of-type{ border-bottom:1px solid var(--line-onDark); }
  .cinfo-ico{ width:20px; height:20px; color:var(--red); flex-shrink:0; margin-top:2px; }
  .cinfo-label{ font-family:var(--display); font-size:11px; letter-spacing:0.16em; color:var(--grey-onDark); text-transform:uppercase; margin-bottom:4px; }
  .cinfo-val{ font-size:15.5px; color:var(--white); }
  .cinfo-val a:hover{ color:var(--red); }
  .social-row{ display:flex; gap:12px; margin-top:32px; }
  .social-row a{
    width:38px; height:38px; border:1px solid var(--line-onDark); border-radius:50%;
    display:flex; align-items:center; justify-content:center; transition:all .2s ease; color:var(--white);
  }
  .social-row a:hover{ border-color:var(--red); color:var(--red); }
  .social-row svg{ width:16px; height:16px; }

  .form{ background:var(--surface); border:1px solid var(--line-onDark); border-radius:3px; padding:44px; box-shadow:0 30px 70px -20px rgba(0,0,0,0.5); }
  .field{ margin-bottom:22px; }
  .field label{ display:block; font-family:var(--display); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:9px; }
  .field input, .field textarea{
    width:100%; background:var(--paper-2); border:1px solid var(--line); color:var(--ink);
    padding:13px 14px; font-family:var(--body); font-size:14.5px; border-radius:2px;
    transition:border-color .2s ease;
  }
  .field input:focus, .field textarea:focus{ border-color:var(--red); outline:none; }
  .field textarea{ resize:vertical; min-height:110px; }
  .form .btn{ width:100%; justify-content:center; }

  /* -------- Footer -------- */
  footer{ padding:48px 0 32px; background:var(--dark-2); }
  .foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; }
  .foot-brand{ display:flex; align-items:center; gap:12px; }
  .foot-brand img{ height:26px; }
  .foot-brand span{ font-family:var(--display); font-size:14px; letter-spacing:0.14em; font-weight:600; color:var(--white); }
  .foot-links{ display:flex; gap:28px; flex-wrap:wrap; }
  .foot-links a{ font-family:var(--display); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey-onDark); }
  .foot-links a:hover{ color:var(--white); }
  .foot-copy{ color:var(--grey-onDark); font-size:12.5px; margin-top:28px; text-align:center; border-top:1px solid var(--line-onDark); padding-top:24px; }
  .foot-copy b{ color:var(--white); }

  /* -------- Responsive -------- */
  @media (max-width:1150px){
    .navlinks, .nav-right .btn-ghost-dark{ display:none; }
    .burger{ display:flex; }
    .split{ grid-template-columns:1fr; min-height:auto; }
    .split-photo{ order:-1; min-height:52vh; }
    .split-panel{ padding:56px 28px 64px; }
    .usp-grid{ grid-template-columns:1fr 1fr; row-gap:36px; }
    .usp-item{ border-left:none; }
    .usp-item:nth-child(odd){ border-right:1px solid var(--line-onDark); }
    #planten .usp-grid{ grid-template-columns:1fr 1fr; }
    .contact-grid, .werk-grid{ grid-template-columns:1fr; }
    .pf-grid{ grid-template-columns:1fr 1fr; }
    .lb-panel{ grid-template-columns:1fr; }
    .lb-visual{ aspect-ratio:16/9; }
  }
  @media (max-width:640px){
    .wrap{ padding:0 20px; }
    .usp-grid{ grid-template-columns:1fr; }
    .usp-item:nth-child(odd){ border-right:none; }
    #planten .usp-grid{ grid-template-columns:1fr; }
    .pf-grid{ grid-template-columns:1fr; }
    .cinfo-grid{ grid-template-columns:1fr; }
    section{ padding:72px 0; }
  }

  .mobile-nav{
    display:none; position:fixed; inset:76px 0 0 0; background:var(--paper); z-index:99;
    flex-direction:column; padding:36px 28px; gap:8px; border-top:1px solid var(--line);
  }
  .mobile-nav.open{ display:flex; }
  .mobile-nav a{
    font-family:var(--display); font-size:22px; text-transform:uppercase; letter-spacing:0.04em;
    padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink);
  }
  .mobile-nav .btn{ margin-top:20px; text-align:center; justify-content:center; }

  /* -------- Before/After slider -------- */
  .ba-page-hero{ padding:150px 0 60px; text-align:center; }
  .ba-page-hero .eyebrow{ justify-content:center; margin-bottom:20px; }
  .ba-page-hero h1{ font-size:clamp(30px,4.4vw,50px); margin-bottom:18px; }
  .ba-page-hero p{ color:var(--ink-soft); font-size:16.5px; max-width:600px; margin:0 auto; }
  .ba-list{ display:flex; flex-direction:column; gap:80px; padding-bottom:40px; }
  .ba-entry{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
  .ba-entry:nth-child(even) .ba-copy{ order:2; }
  .ba-copy .pf-cat{ margin-bottom:10px; }
  .ba-copy h3{ font-size:26px; margin-bottom:16px; }
  .ba-copy p{ color:var(--ink-soft); font-size:15.5px; margin-bottom:0; }
  .ba-slider{
    position:relative; width:100%; overflow:hidden; border-radius:3px;
    border:1px solid var(--line); box-shadow:0 24px 50px -20px rgba(0,0,0,0.5);
    cursor:ew-resize; touch-action:pan-y; user-select:none;
    aspect-ratio:4/3;
  }
  .ba-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; -webkit-user-drag:none; }
  .ba-img.ba-after{ z-index:1; }
  .ba-img.ba-before{ z-index:2; }
  .ba-handle{
    position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--ink);
    transform:translateX(-50%); z-index:3;
  }
  .ba-grip{
    position:absolute; top:50%; left:50%; width:44px; height:44px; border-radius:50%;
    background:var(--red); transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 16px rgba(0,0,0,0.4); border:2px solid var(--ink);
  }
  .ba-grip svg{ width:20px; height:20px; color:var(--white); }
  .ba-tag{
    position:absolute; top:16px; z-index:2; font-family:var(--display); font-size:11px; letter-spacing:0.16em;
    font-weight:600; padding:7px 14px; text-transform:uppercase; border-radius:2px; color:var(--white);
  }
  .ba-tag.voor{ left:16px; background:rgba(20,19,15,0.75); }
  .ba-tag.na{ right:16px; background:var(--red); }
  @media (max-width:900px){
    .ba-entry{ grid-template-columns:1fr; }
    .ba-entry:nth-child(even) .ba-copy{ order:0; }
  }

/* JACOVO custom image framing — seamless with the page background */
.split-photo img.van-photo{
  object-fit: contain;
  object-position: center center;
  background: transparent;
  padding: 0;
}

/* Inspectie: show the complete graphic without a separate grey rectangle */
.split-photo img.inspectie-photo{
  object-fit: contain;
  object-position: center center;
  background: transparent;
  padding: 0;
}

/* Keep image-side letterboxing visually seamless */
#inspectie .split-photo, #over .split-photo{ background:transparent; }

/* Final seamless background fix: one solid background plane behind image + copy */
#inspectie{
  background: var(--paper) !important;
}
#inspectie .split-panel.light,
#inspectie .split-photo{
  background: transparent !important;
  background-image: none !important;
}

#over{
  background: var(--paper) !important;
}
#over .split-photo{
  background: transparent !important;
  background-image: none !important;
}

/* Over JACOVO — same grey background as the rest of the section */
#over .split-panel.dark{
  background: var(--paper) !important;
  background-image: none !important;
  color: var(--ink) !important;
}
#over .split-panel.dark .split-sub{
  color: var(--ink-soft) !important;
}
#over .split-panel.dark .split-watermark i{
  background: var(--ink) !important;
}
#over .split-panel.dark .split-watermark i:first-child{
  background: var(--red) !important;
}