:root{
    --bp:#0D2B4A;          /* blueprint blue */
    --bp-deep:#081D33;
    --line:rgba(140,190,235,0.18);
    --line-strong:rgba(150,200,245,0.45);
    --chalk:#EAF2FA;
    --cyan:#7FD3FF;
    --safety:#FFB020;      /* safety orange-yellow */
    --wood:#C98A4B;
    --steel:#9FB4C7;
  }
  *{box-sizing:border-box; margin:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bp);
    color:var(--chalk);
    font-family:'Space Grotesk',sans-serif;
    overflow-x:hidden;
    /* blueprint grid */
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px),
      linear-gradient(rgba(140,190,235,0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(140,190,235,0.07) 1px, transparent 1px);
    background-size:120px 120px, 120px 120px, 24px 24px, 24px 24px;
  }
  h1,h2,h3{font-family:'Big Shoulders Display',sans-serif; font-weight:900; text-transform:uppercase; line-height:0.92;}
  .mono{font-family:'JetBrains Mono',monospace;}
  a{color:inherit;}
  :focus-visible{outline:3px solid var(--safety); outline-offset:3px;}
  ::selection{background:var(--safety); color:var(--bp-deep);}

  /* ============ frame / sheet border (blueprint sheet) ============ */
  .sheet-frame{
    position:fixed; inset:14px;
    border:1.5px solid var(--line-strong);
    pointer-events:none;
    z-index:90;
  }
  .sheet-frame::before, .sheet-frame::after{
    content:""; position:absolute; width:14px; height:14px;
    border:1.5px solid var(--line-strong);
  }
  .sheet-frame::before{top:-8px; left:-8px; border-right:none; border-bottom:none;}
  .sheet-frame::after{bottom:-8px; right:-8px; border-left:none; border-top:none;}
  .title-block{
    position:fixed; bottom:14px; right:14px;
    border:1.5px solid var(--line-strong);
    background:var(--bp-deep);
    font-family:'JetBrains Mono',monospace;
    font-size:9.5px; letter-spacing:0.08em;
    color:var(--cyan);
    z-index:91;
    display:none;
  }
  @media(min-width:900px){ .title-block{display:block;} }
  .title-block div{padding:5px 12px; border-bottom:1px solid var(--line);}
  .title-block div:last-child{border-bottom:none;}
  .title-block b{color:var(--chalk); font-weight:600;}

  /* ============ nav ============ */
  header{
    position:fixed; top:14px; left:14px; right:14px; z-index:80;
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 28px;
    background:linear-gradient(to bottom, rgba(8,29,51,0.92), rgba(8,29,51,0.6) 70%, transparent);
  }
  .logo{display:flex; align-items:center; gap:12px; text-decoration:none;}
  .logo-mark{
    width:38px; height:38px; border:2px solid var(--safety);
    display:grid; place-items:center;
    font-family:'Big Shoulders Display'; font-weight:900; font-size:22px; color:var(--safety);
    transform:rotate(45deg);
  }
  .logo-mark span{transform:rotate(-45deg);}
  .logo-text{line-height:1;}
  .logo-text .l1{font-family:'Big Shoulders Display'; font-weight:900; font-size:20px; letter-spacing:0.04em;}
  .logo-text .l2{font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.35em; color:var(--cyan);}
  nav{display:flex; gap:6px;}
  nav a{
    font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.1em;
    text-decoration:none; padding:8px 14px; border:1px solid transparent;
    transition:border-color .2s, color .2s;
  }
  nav a:hover{border-color:var(--line-strong); color:var(--safety);}
  nav a.cta{border:1px solid var(--safety); color:var(--safety);}
  nav a.cta:hover{background:var(--safety); color:var(--bp-deep);}
  @media(max-width:760px){ nav a:not(.cta){display:none;} }

  /* ============ hero ============ */
  .hero{
    min-height:100vh;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    max-width:1300px; margin:0 auto;
    padding:120px 48px 60px;
    position:relative;
  }
  @media(max-width:900px){
    .hero{grid-template-columns:1fr; padding:130px 28px 40px; text-align:center;}
  }
  .hero-copy{position:relative; z-index:5;}
  .rev-tag{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.2em;
    color:var(--cyan); border:1px solid var(--line-strong);
    padding:7px 14px; margin-bottom:26px;
  }
  .rev-tag::before{content:""; width:7px; height:7px; background:var(--safety); border-radius:50%;}
  .hero h1{
    font-size:clamp(58px, 9.5vw, 128px);
    letter-spacing:0.01em;
  }
  .hero h1 .row{display:block; overflow:hidden;}
  .hero h1 .row span{display:inline-block;}
  .hero h1 .accent{
    color:transparent;
    -webkit-text-stroke:2px var(--safety);
  }
  .hero p{
    margin-top:24px; max-width:44ch; color:var(--steel); font-size:17px; line-height:1.6;
  }
  @media(max-width:900px){ .hero p{margin-inline:auto;} }
  .hero-cta{margin-top:36px; display:flex; gap:16px; flex-wrap:wrap;}
  @media(max-width:900px){ .hero-cta{justify-content:center;} }
  .btn{
    font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.1em;
    text-decoration:none; padding:16px 28px; position:relative;
    border:1.5px solid var(--safety); color:var(--bp-deep);
    background:var(--safety); font-weight:600;
    transition:transform .2s;
  }
  .btn:hover{transform:translate(-3px,-3px); box-shadow:3px 3px 0 var(--cyan);}
  .btn.ghost{background:transparent; color:var(--chalk); border-color:var(--line-strong);}
  .btn.ghost:hover{box-shadow:3px 3px 0 var(--safety);}

  .hero-3d{
    position:relative; height:min(72vh, 640px); min-height:380px;
  }
  #hammer-canvas{width:100%; height:100%; display:block;}
  /* dimension callouts around the 3D model */
  .dim{
    position:absolute; font-family:'JetBrains Mono',monospace;
    font-size:10.5px; color:var(--cyan); letter-spacing:0.08em;
    pointer-events:none;
  }
  .dim .dline{position:absolute; background:var(--line-strong);}
  .dim-top{top:10%; left:12%; right:12%;}
  .dim-top .dline{height:1px; left:0; right:0; top:14px;}
  .dim-top .dline::before,.dim-top .dline::after{
    content:""; position:absolute; width:1px; height:10px; background:var(--line-strong); top:-4.5px;
  }
  .dim-top .dline::before{left:0;} .dim-top .dline::after{right:0;}
  .dim-top em{position:absolute; left:50%; transform:translateX(-50%); top:-2px; font-style:normal; background:var(--bp); padding:0 8px;}
  .dim-right{top:22%; bottom:22%; right:5%;}
  .dim-right .dline{width:1px; top:0; bottom:0; right:14px;}
  .dim-right em{position:absolute; top:50%; right:-6px; transform:translateY(-50%) rotate(90deg); font-style:normal; background:var(--bp); padding:0 8px;}
  .dim-note{
    bottom:8%; left:8%;
    border-left:1px solid var(--line-strong); padding-left:12px; max-width:200px;
    line-height:1.7;
  }
  .dim-note b{color:var(--safety); font-weight:600;}
  @media(max-width:900px){ .dim-right{display:none;} }

  .scroll-hint{
    position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.3em; color:var(--steel);
    display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .scroll-hint::after{content:""; width:1px; height:34px; background:linear-gradient(var(--safety), transparent);}

  /* ============ sections ============ */
  section{max-width:1200px; margin:0 auto; padding:110px 48px;}
  @media(max-width:760px){ section{padding:80px 26px;} }
  .sec-head{margin-bottom:56px; position:relative;}
  .sec-head h2{font-size:clamp(44px,6vw,76px);}
  .sec-head h2 .outline{color:transparent; -webkit-text-stroke:1.5px var(--line-strong);}
  .sec-head p{color:var(--steel); margin-top:14px; max-width:56ch; font-size:16px;}

  /* ---- diensten: blueprint spec cards ---- */
  .svc-grid{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:1px; background:var(--line-strong); border:1.5px solid var(--line-strong);
  }
  @media(max-width:920px){ .svc-grid{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:560px){ .svc-grid{grid-template-columns:repeat(1,1fr);} }
  .svc{
    background:var(--bp); padding:34px 28px; position:relative; overflow:hidden;
    transition:background .3s;
  }
  .svc:hover{background:var(--bp-deep);}
  .svc .code{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--cyan); letter-spacing:0.2em;}
  .svc h3{font-size:27px; margin-top:12px; font-weight:700; letter-spacing:0.02em;}
  .svc p{color:var(--steel); font-size:14px; margin-top:12px; line-height:1.6;}
  .svc .tool{
    position:absolute; right:-12px; bottom:-16px; width:110px; height:110px; opacity:0.12;
    transition:opacity .3s, transform .4s;
  }
  .svc:hover .tool{opacity:0.4; transform:rotate(-10deg) scale(1.08);}
  .svc svg{width:100%; height:100%; stroke:var(--cyan); fill:none; stroke-width:1.5;}

  /* ---- werkwijze: drafted path ---- */
  .flow{position:relative;}
  #flow-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
  .flow-steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:34px; position:relative;}
  .step{
    border:1.5px solid var(--line-strong); background:rgba(8,29,51,0.75);
    padding:30px 26px; position:relative; backdrop-filter:blur(2px);
  }
  .step::before{
    content:attr(data-n);
    position:absolute; top:-19px; left:22px;
    font-family:'Big Shoulders Display'; font-weight:900; font-size:38px;
    color:var(--safety); background:var(--bp); padding:0 10px; line-height:1;
  }
  .step h3{font-size:23px; font-weight:700; margin-top:8px;}
  .step p{color:var(--steel); font-size:14px; margin-top:10px; line-height:1.6;}
  .step .stamp{
    margin-top:16px; display:inline-block;
    font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.15em;
    color:var(--cyan); border:1px dashed var(--line-strong); padding:5px 10px;
  }

  /* ---- werkgebied: d3 radar ---- */
  .area{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
  @media(max-width:900px){ .area{grid-template-columns:1fr;} }
  #radar{width:100%; max-width:520px; margin:0 auto; display:block;}
  .area-copy h3{font-size:30px; font-weight:700; color:var(--safety);}
  .area-copy p{color:var(--steel); margin-top:14px; line-height:1.7;}
  .legend{margin-top:26px; display:flex; flex-direction:column; gap:10px; font-family:'JetBrains Mono',monospace; font-size:12px;}
  .legend div{display:flex; align-items:center; gap:12px; color:var(--steel);}
  .legend i{width:12px; height:12px; border-radius:50%; flex-shrink:0;}

  /* ---- over mij ---- */
  .over{display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center;}
  @media(max-width:900px){ .over{grid-template-columns:1fr;} }

  /* polaroid, vastgetaped op de tekening */
  .polaroid-wrap{display:flex; justify-content:center; padding:30px 0;}
  .polaroid{
    background:#f2efe6;
    padding:16px 16px 20px;
    width:min(370px, 100%);
    transform:rotate(-3.5deg);
    box-shadow:0 22px 45px rgba(3,12,24,0.55), 0 4px 12px rgba(3,12,24,0.4);
    position:relative;
    transition:transform .45s ease;
  }
  .polaroid:hover{transform:rotate(-1deg) scale(1.02);}
  .tape{
    position:absolute; width:120px; height:36px;
    background:linear-gradient(rgba(240,246,252,0.35), rgba(220,232,244,0.25));
    border:1px solid rgba(255,255,255,0.18);
    box-shadow:0 2px 6px rgba(3,12,24,0.25);
    z-index:2;
  }
  .tape-l{top:-16px; left:-38px; transform:rotate(-38deg);}
  .tape-r{top:-16px; right:-38px; transform:rotate(38deg);}
  .polaroid-photo{
    aspect-ratio:1/1.05; overflow:hidden;
    background:var(--bp-deep);
  }
  .polaroid-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .photo-placeholder{
    width:100%; height:100%; position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    text-align:center;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:24px 24px;
  }
  .photo-placeholder .ph-frame{position:absolute; inset:14px; border:1.5px dashed var(--line-strong);}
  .photo-placeholder b{
    font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.25em; color:var(--cyan);
  }
  .photo-placeholder span:not(.ph-frame){
    font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.12em;
    color:var(--steel); line-height:1.8;
  }
  .polaroid figcaption{
    margin-top:14px; text-align:center;
    font-family:'Caveat',cursive; font-size:26px; font-weight:600;
    color:#3a4656; transform:rotate(-1deg);
  }
  .over-copy h2{font-size:clamp(44px,6vw,76px);}
  .over-copy h2 .outline{color:transparent; -webkit-text-stroke:1.5px var(--line-strong);}
  .over-copy p{color:var(--steel); margin-top:18px; max-width:52ch; font-size:16px; line-height:1.7;}
  .over-stamps{margin-top:26px; display:flex; flex-wrap:wrap; gap:10px;}
  .over-stamps .stamp{
    font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.15em;
    color:var(--cyan); border:1px dashed var(--line-strong); padding:5px 10px;
  }

  /* ---- intro offer / spec sheet ---- */
  .spec{
    border:1.5px solid var(--safety);
    background:repeating-linear-gradient(-45deg, rgba(255,176,32,0.05) 0 14px, transparent 14px 28px);
    padding:48px; display:grid; grid-template-columns:1.4fr 1fr; gap:44px; align-items:center;
  }
  @media(max-width:820px){ .spec{grid-template-columns:1fr; padding:32px;} }
  .spec h3{font-size:clamp(32px,4vw,50px); color:var(--safety);}
  .spec p{color:var(--chalk); margin-top:16px; line-height:1.7; max-width:52ch;}
  .spec .facts{display:flex; flex-direction:column; gap:0; border:1px solid var(--line-strong);}
  .spec .facts div{
    display:flex; justify-content:space-between; padding:15px 18px;
    border-bottom:1px solid var(--line); font-family:'JetBrains Mono',monospace; font-size:12.5px;
  }
  .spec .facts div:last-child{border-bottom:none;}
  .spec .facts b{color:var(--safety); font-weight:600;}

  /* ---- contact: werkbon ---- */
  .werkbon-scene{
    max-width:760px; margin:0 auto;
    position:relative; perspective:1400px;
  }
  .werkbon{
    border:1.5px solid var(--line-strong);
    background:var(--bp-deep);
    transform-style:preserve-3d;
  }
  .werkbon-head b{color:var(--chalk); font-weight:600;}
  .werkbon-head{
    padding:22px 30px; border-bottom:1.5px solid var(--line-strong);
    display:flex; justify-content:space-between; align-items:center;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.15em; color:var(--cyan);
  }
  .werkbon form{padding:34px 30px; display:grid; gap:18px;}
  .fld label{
    display:block; font-family:'JetBrains Mono',monospace; font-size:10px;
    letter-spacing:0.2em; color:var(--cyan); margin-bottom:7px;
  }
  .fld input, .fld textarea{
    width:100%; background:transparent; border:none; border-bottom:1.5px solid var(--line-strong);
    color:var(--chalk); font-family:'Space Grotesk'; font-size:16px; padding:9px 2px;
    transition:border-color .2s;
  }
  .fld input:focus, .fld textarea:focus{outline:none; border-bottom-color:var(--safety);}
  .fld-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  @media(max-width:600px){ .fld-row{grid-template-columns:1fr;} }
  .werkbon button{
    justify-self:start; cursor:pointer;
    font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.12em; font-weight:600;
    background:var(--safety); color:var(--bp-deep); border:none; padding:17px 34px;
    transition:transform .2s;
  }
  .werkbon button:hover{transform:translate(-3px,-3px); box-shadow:3px 3px 0 var(--cyan);}
  /* ---- werkbon verzending: origamivouwen ---- */
  .fold-stage{
    position:fixed; z-index:96; pointer-events:none;
    perspective:1400px; transform-style:preserve-3d;
    filter:drop-shadow(0 24px 40px rgba(3,12,24,0.55));
  }
  .fold-clip{position:absolute; overflow:hidden;}
  .fold-flap{position:absolute; transform-style:preserve-3d;}
  .fold-face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
  .paper-back{
    background:#0B2745;
    background-image:
      linear-gradient(rgba(140,190,235,0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(140,190,235,0.08) 1px, transparent 1px);
    background-size:24px 24px;
    border:1.5px solid var(--line-strong);
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
  }
  .paper-back2{background-color:#0D2C4E;}
  .crease-shadow{position:absolute; inset:0; opacity:0; pointer-events:none;}
  .shadow-bottom{background:linear-gradient(to top, rgba(2,10,20,0.55), transparent 55%);}
  .shadow-right{background:linear-gradient(to left, rgba(2,10,20,0.5), transparent 55%);}
  .shadow-full{background:rgba(2,10,20,0.35);}

  /* ---- werkbon verzending: paper plane ---- */
  .flight-overlay{
    position:fixed; inset:0; width:100%; height:100%;
    z-index:96; pointer-events:none;
  }
  .flight-overlay path{
    fill:none; stroke:var(--cyan); stroke-width:1.5;
    stroke-dasharray:7 9; opacity:0;
  }
  .paper-plane{
    position:fixed; left:0; top:0; width:96px;
    z-index:97; pointer-events:none;
    filter:drop-shadow(0 8px 16px rgba(3,12,24,0.55));
  }
  .paper-plane svg{width:100%; height:auto; display:block; overflow:visible;}
  .plane-inner{will-change:transform;}
  .flight-label{
    position:fixed; z-index:97; pointer-events:none;
    font-family:'JetBrains Mono',monospace; font-size:10px;
    letter-spacing:0.2em; color:var(--cyan); opacity:0;
  }
  .werkbon-confirm{
    position:absolute; inset:0; z-index:5;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:18px; text-align:center;
    border:1.5px solid var(--line-strong); background:var(--bp-deep);
    padding:40px 28px;
  }
  .werkbon-confirm[hidden]{display:none;}
  .confirm-stamp{
    font-family:'Big Shoulders Display'; font-weight:900;
    font-size:clamp(36px, 5vw, 54px); letter-spacing:0.04em;
    color:var(--safety); border:4px solid var(--safety);
    padding:6px 24px 10px; transform:rotate(-8deg);
  }
  .werkbon-confirm h3{font-size:26px; font-weight:700; letter-spacing:0.03em;}
  .werkbon-confirm h3 span{color:var(--safety);}
  .werkbon-confirm p{color:var(--steel); font-size:14px; max-width:44ch; line-height:1.7;}
  .werkbon-confirm button{
    cursor:pointer; background:transparent; color:var(--chalk);
    border:1.5px solid var(--line-strong); padding:14px 28px;
    font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.12em; font-weight:600;
    transition:border-color .2s, color .2s;
  }
  .werkbon-confirm button:hover{border-color:var(--safety); color:var(--safety);}
  .confirm-note{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--steel); opacity:0.6;}

  .contact-alt{
    text-align:center; margin-top:34px; font-family:'JetBrains Mono',monospace;
    font-size:13px; color:var(--steel); line-height:2.1;
  }
  .contact-alt b{color:var(--safety); font-weight:600;}

  footer{
    border-top:1.5px solid var(--line-strong); margin-top:60px;
    padding:34px 48px 60px; text-align:center;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em; color:var(--steel);
  }

  /* ============ offerte page ============ */
  .offerte-hero{max-width:1200px; margin:0 auto; padding:150px 48px 60px;}
  @media(max-width:760px){ .offerte-hero{padding:140px 26px 40px;} }
  .offerte-hero h1{font-size:clamp(50px, 8vw, 104px); letter-spacing:0.01em; max-width:14ch;}
  .offerte-hero p{margin-top:24px; max-width:56ch; color:var(--steel); font-size:17px; line-height:1.6;}
  .offerte-facts{
    margin-top:44px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:1px; background:var(--line-strong); border:1.5px solid var(--line-strong);
  }
  .offerte-facts div{background:var(--bp); padding:20px 22px;}
  .offerte-facts span{display:block; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.2em; color:var(--cyan);}
  .offerte-facts b{display:block; margin-top:8px; font-family:'Big Shoulders Display'; font-weight:700; font-size:20px; color:var(--safety);}

  /* ---- werkbon grid: form + spec-check panel ---- */
  .werkbon-grid{
    display:grid; grid-template-columns:1.3fr 1fr; gap:1px;
    background:var(--line-strong); border:1.5px solid var(--line-strong);
    max-width:1000px; margin:0 auto;
  }
  @media(max-width:820px){ .werkbon-grid{grid-template-columns:1fr;} }
  .werkbon-grid .werkbon{border:none; max-width:none;}
  .info-panel{background:var(--bp-deep); padding:34px 30px;}
  .info-panel h3{font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.2em; color:var(--safety);}
  .info-panel > p{color:var(--steel); font-size:13px; margin-top:12px; line-height:1.6;}
  .checklist{margin-top:22px; display:flex; flex-direction:column; gap:12px;}
  .checklist div{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--chalk); line-height:1.5;}
  .checklist div::before{content:"✓"; color:var(--safety); font-family:'JetBrains Mono',monospace; font-weight:600; flex-shrink:0;}
  .fld select{
    width:100%; background:var(--bp-deep); border:none; border-bottom:1.5px solid var(--line-strong);
    color:var(--chalk); font-family:'Space Grotesk'; font-size:16px; padding:9px 2px;
  }
  .fld select:focus{outline:none; border-bottom-color:var(--safety);}

  .reveal{opacity:0; transform:translateY(46px);}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1 !important; transform:none !important;}
  }