:root {
      --ink: #101820;
      --muted: #5e6872;
      --paper: #f5f6f1;
      --white: #ffffff;
      --orange: #bdf51f;
      --orange-dark: #76a600;
      --blue: #26323a;
      --line: rgba(16, 24, 32, .12);
      --shadow: 0 18px 55px rgba(16, 24, 32, .12);
      --radius: 22px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.55;
    }
    a { color: inherit; }
    .wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

    .topbar {
      background: var(--ink);
      color: rgba(255,255,255,.78);
      font-size: .86rem;
    }
    .topbar .wrap { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; }
    .topbar a { color: white; text-decoration: none; font-weight: 700; }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(245, 242, 236, .92);
      backdrop-filter: blur(15px);
      border-bottom: 1px solid var(--line);
    }
    nav { display: flex; align-items: center; justify-content: space-between; min-height: 78px; gap: 30px; }
    .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
    .brand-logo { width: 116px; height: 58px; object-fit: contain; flex: 0 0 auto; }
    .brand strong { display: block; font-size: 1.05rem; letter-spacing: .02em; }
    .brand small { display: block; color: var(--muted); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
    .navlinks { display: flex; align-items: center; gap: 24px; }
    .navlinks a { text-decoration: none; font-size: .92rem; font-weight: 750; }
    .navlinks a:hover { color: var(--orange-dark); }
    .menu-btn { display: none; border: 0; background: none; font-size: 1.6rem; cursor: pointer; }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 48px;
      padding: 0 20px;
      border-radius: 999px;
      border: 1px solid transparent;
      background: var(--orange);
      color: var(--ink);
      text-decoration: none;
      font-weight: 850;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn:hover { transform: translateY(-2px); background: #a9df17; box-shadow: 0 10px 28px rgba(132,190,0,.24); }
    .btn.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
    .btn.secondary:hover { background: white; box-shadow: none; }
    .btn.small { min-height: 42px; padding: 0 17px; font-size: .88rem; }

    .hero { padding: 78px 0 62px; overflow: hidden; }
    .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; }
    .eyebrow { margin: 0 0 18px; color: var(--orange-dark); font-weight: 900; letter-spacing: .13em; text-transform: uppercase; font-size: .78rem; }
    h1 { margin: 0; font-size: clamp(2.75rem, 6vw, 5.4rem); line-height: .98; letter-spacing: -.065em; max-width: 820px; }
    h1 span { color: var(--orange); }
    .lead { margin: 25px 0 30px; max-width: 660px; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.24rem); }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .trustline { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px; color: var(--muted); font-size: .88rem; font-weight: 700; }
    .trustline span::before { content: "✓"; color: var(--orange-dark); margin-right: 7px; font-weight: 950; }

    .hero-visual {
      min-height: 500px;
      position: relative;
      border-radius: 34px;
      overflow: hidden;
      background: var(--ink);
      box-shadow: var(--shadow);
    }
    .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, rgba(16,24,32,.82)); }
    .visual-card {
      position: absolute;
      left: 28px;
      right: 28px;
      bottom: 28px;
      padding: 24px;
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 20px;
      background: rgba(16,24,32,.58);
      color: white;
      backdrop-filter: blur(10px);
      z-index: 2;
    }
    .visual-card strong { display: block; font-size: 2rem; letter-spacing: -.04em; }
    .visual-card p { margin: 4px 0 0; color: rgba(255,255,255,.75); }

    section { padding: 86px 0; }
    .section-head { display: grid; grid-template-columns: .7fr 1.3fr; gap: 40px; align-items: end; margin-bottom: 40px; }
    .section-head h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.45rem); line-height: 1.04; letter-spacing: -.045em; }
    .section-head p { margin: 0; color: var(--muted); font-size: 1.04rem; max-width: 620px; }

    .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .service {
      padding: 28px;
      min-height: 225px;
      border-radius: var(--radius);
      background: var(--white);
      border: 1px solid var(--line);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .service:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(16,24,32,.08); }
    .icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #efffd0; color: #557b00; font-size: 1.25rem; font-weight: 950; }
    .service h3 { margin: 22px 0 9px; font-size: 1.16rem; }
    .service p { margin: 0; color: var(--muted); font-size: .94rem; }

    .dark { background: var(--ink); color: white; }
    .dark .section-head p { color: rgba(255,255,255,.62); }
    .specialty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .specialty { position: relative; overflow: hidden; min-height: 390px; padding: 38px; border-radius: 28px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); }
    .specialty::after { content: ""; position: absolute; width: 220px; height: 220px; border: 28px solid rgba(255,255,255,.05); border-radius: 50%; right: -70px; bottom: -80px; }
    .specialty.orange::after { border-color: rgba(189,245,31,.25); }
    .number { color: var(--orange); font-weight: 900; letter-spacing: .12em; }
    .specialty h3 { margin: 70px 0 14px; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.05; letter-spacing: -.04em; }
    .specialty p { max-width: 480px; color: rgba(255,255,255,.65); }
    .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
    .tags span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.82); font-size: .8rem; font-weight: 700; }

    .projects { background: #e9ede4; }
    .project-intro { display: flex; flex-wrap: wrap; gap: 9px; margin: -12px 0 30px; }
    .project-intro span { padding: 8px 13px; border-radius: 999px; background: rgba(16,24,32,.07); color: var(--muted); font-size: .82rem; font-weight: 750; }
    .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 215px; grid-auto-flow: dense; gap: 12px; }
    .gallery-item {
      position: relative;
      min-height: 0;
      height: 100%;
      padding: 0;
      overflow: hidden;
      border: 0;
      border-radius: 18px;
      background: var(--ink);
      cursor: zoom-in;
      box-shadow: 0 7px 18px rgba(16,24,32,.08);
    }
    .gallery-item:nth-child(9n + 1), .gallery-item:nth-child(13n + 5) { grid-column: span 2; grid-row: span 2; }
    .gallery-item img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease, opacity .35s ease; }
    .gallery-item::after { content: "Bekijk foto"; position: absolute; left: 14px; bottom: 14px; padding: 7px 10px; border-radius: 999px; background: rgba(16,24,32,.72); color: white; font: 750 .76rem/1 Inter, sans-serif; opacity: 0; transform: translateY(5px); transition: .25s ease; }
    .gallery-item:hover img { transform: scale(1.035); opacity: .88; }
    .gallery-item:hover::after { opacity: 1; transform: translateY(0); }

    .lightbox { width: min(94vw, 1180px); max-height: 92vh; padding: 0; overflow: hidden; border: 0; border-radius: 22px; background: #070a0c; box-shadow: 0 25px 80px rgba(0,0,0,.55); }
    .lightbox::backdrop { background: rgba(5,8,10,.84); backdrop-filter: blur(6px); }
    .lightbox img { display: block; width: 100%; max-height: 86vh; object-fit: contain; }
    .lightbox-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: white; background: rgba(0,0,0,.58); font-size: 1.7rem; cursor: pointer; }

    .process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: item; }
    .step { padding: 26px 22px; border-top: 2px solid var(--ink); counter-increment: item; }
    .step::before { content: "0" counter(item); display: block; margin-bottom: 38px; color: var(--orange-dark); font-weight: 950; }
    .step h3 { margin: 0 0 8px; }
    .step p { margin: 0; color: var(--muted); font-size: .9rem; }

    .cta { padding-top: 30px; }
    .cta-box {
      display: grid;
      grid-template-columns: 1.3fr .7fr;
      align-items: center;
      gap: 40px;
      padding: clamp(32px, 6vw, 70px);
      border-radius: 32px;
      color: white;
      background: linear-gradient(130deg, var(--blue), #11181d);
      box-shadow: var(--shadow);
    }
    .cta-box h2 { margin: 0 0 14px; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; letter-spacing: -.045em; }
    .cta-box p { margin: 0; color: rgba(255,255,255,.72); }
    .cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
    .cta-actions .btn.secondary { color: white; border-color: rgba(255,255,255,.28); }
    .cta-actions .btn.secondary:hover { background: rgba(255,255,255,.08); }

    footer { padding: 45px 0 28px; }
    .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
    footer h4 { margin: 0 0 12px; }
    footer p, footer a { color: var(--muted); font-size: .9rem; }
    footer a { display: block; margin: 6px 0; text-decoration: none; }
    .copyright { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; color: var(--muted); font-size: .8rem; }

    @media (max-width: 900px) {
      .hero-grid, .section-head, .cta-box { grid-template-columns: 1fr; }
      .hero { padding-top: 55px; }
      .hero-visual { min-height: 390px; }
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .gallery-grid { grid-template-columns: repeat(3, 1fr); }
      .process { grid-template-columns: repeat(2, 1fr); }
      .navlinks { display: none; position: absolute; top: 78px; left: 0; right: 0; padding: 20px; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; }
      .navlinks.open { display: flex; }
      .menu-btn { display: block; }
    }
    @media (max-width: 620px) {
      .wrap { width: min(100% - 28px, 1160px); }
      .topbar .wrap { justify-content: center; text-align: center; }
      .topbar span:first-child { display: none; }
      .services-grid, .specialty-grid, .process, .footer-grid { grid-template-columns: 1fr; }
      .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; gap: 8px; }
      .gallery-item { border-radius: 13px; }
      .gallery-item:nth-child(9n + 1), .gallery-item:nth-child(13n + 5) { grid-column: span 2; grid-row: span 2; }
      .hero-visual { min-height: 340px; }
      .specialty { min-height: 330px; }
      .specialty h3 { margin-top: 48px; }
      .copyright { flex-direction: column; }
      section { padding: 65px 0; }
    }

    h1 span { color: #557b00; }
    section[id], .project-group { scroll-margin-top: 110px; }
    .design-feature { padding: 12px 0 35px; }
    .design-feature figure { margin:0; border-radius:28px; overflow:hidden; background:var(--ink); box-shadow:var(--shadow); }
    .design-feature img { width:100%; height:auto; display:block; }
    .design-feature figcaption { padding:26px 32px; display:flex; justify-content:space-between; align-items:center; gap:20px; color:white; }
    .design-feature h2 { margin:0; font-size:clamp(1.3rem,3vw,2rem); line-height:1.15; letter-spacing:-.035em; }
    .design-feature .eyebrow { color:var(--orange); margin-bottom:8px; }
    .design-feature figcaption > span { white-space:nowrap; border:1px solid #ffffff38; border-radius:40px; padding:8px 13px; font-size:.78rem; color:#d9e0e2; }
    .project-links { display:flex; flex-wrap:wrap; justify-content:flex-start; min-height:0; gap:12px; margin-bottom:52px; }
    .project-links a { padding:12px 20px; border:1px solid #10182025; border-radius:999px; text-decoration:none; font-weight:750; background:#fff; }
    .project-links a:hover { background:var(--orange); }
    .project-group + .project-group { margin-top:64px; }
    .group-heading { display:flex; align-items:center; gap:18px; margin-bottom:24px; padding-top:24px; border-top:1px solid #10182025; }
    .group-number { font-size:2.8rem; font-weight:850; color:#557b00; letter-spacing:-.07em; }
    .group-heading h3 { margin:0 0 4px; font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.035em; }
    .group-heading p { margin:0; color:var(--muted); }
    .photo-count { margin-left:auto; white-space:nowrap; color:var(--muted); font-size:.85rem; }
    .gallery-grid { grid-template-columns:repeat(3,1fr); grid-auto-rows:290px; gap:16px; }
    .gallery-item:nth-child(n) { grid-column:auto; grid-row:auto; }
    #projecten-hvac .gallery-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:380px; }
    .photo-label { position:absolute; bottom:0; left:0; right:0; padding:40px 18px 17px; background:linear-gradient(transparent,#101820df); color:#fff; text-align:left; font:650 .88rem/1.35 Inter,system-ui,sans-serif; }
    .gallery-item::after { left:auto; right:12px; top:12px; bottom:auto; content:'↗'; }
    .gallery-item:focus-visible, .project-links a:focus-visible { outline:3px solid #557b00; outline-offset:4px; }
    @media(max-width:900px) { .gallery-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:270px; } }
    @media(max-width:620px) {
      .design-feature figcaption { padding:22px; align-items:flex-start; flex-direction:column; }
      .design-feature figure { border-radius:20px; }
      .group-heading { gap:12px; align-items:flex-start; }
      .group-number { font-size:2rem; }
      .photo-count { display:none; }
      .gallery-grid, #projecten-hvac .gallery-grid { grid-template-columns:1fr; grid-auto-rows:300px; }
      .gallery-item:nth-child(n) { grid-column:auto; grid-row:auto; }
      .project-links { gap:8px; margin-bottom:32px; }
      .project-links a { padding:10px 14px; font-size:.85rem; }
    }
    @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }

    .service-link { display:inline-block; margin-top:18px; color:#486900; font-size:.9rem; font-weight:800; text-underline-offset:4px; }
    .service-link:hover { color:var(--ink); }
    .local-services { padding-top:0; }
    .local-services .local-box { padding:36px; background:white; border:1px solid var(--line); border-radius:24px; }
    .local-box h2 { margin:0 0 12px; font-size:clamp(1.6rem,3vw,2.3rem); letter-spacing:-.035em; line-height:1.15; }
    .local-box p { color:var(--muted); max-width:800px; }
    .service-directory { display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:22px; }
    .service-directory a { font-weight:750; text-underline-offset:5px; }
    .service-page { padding:55px 0 70px; }
    .breadcrumbs { font-size:.9rem; margin-bottom:32px; color:var(--muted); }
    .service-page h1 { font-size:clamp(2.6rem,5vw,4.5rem); max-width:900px; line-height:1.05; }
    .service-layout { display:grid; grid-template-columns:1.3fr .7fr; gap:55px; margin-top:44px; align-items:start; }
    .service-copy h2 { font-size:1.65rem; line-height:1.2; letter-spacing:-.025em; margin-top:34px; }
    .service-copy h2:first-child { margin-top:0; }
    .service-copy p { color:var(--muted); }
    .service-aside { background:#fff; padding:24px; border:1px solid var(--line); border-radius:24px; }
    .service-aside img { display:block; width:100%; height:260px; object-fit:cover; border-radius:15px; }
    .service-aside li { margin-bottom:10px; }
    .service-aside ul { padding-left:20px; }
    .service-contact { margin-top:36px; padding:28px; border-radius:20px; background:#e9ede4; }
    .service-contact h2 { margin-top:0; }
    .service-contact .hero-actions { margin-top:20px; }
    @media(max-width:900px) { .service-layout { grid-template-columns:1fr; gap:28px; } }