:root{
    --diepblauw:#1B3A4B;
    --diepblauw-donker:#122731;
    --warmte-oranje:#E8623D;
    --warmte-oranje-licht:#F28A67;
    --betongrijs:#E4E1DB;
    --zandbeige:#C9A66B;
    --antraciet:#26282A;
    --wit:#FFFFFF;
    --lijn:rgba(27,58,75,0.15);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Inter',sans-serif;
    color:var(--antraciet);
    background:var(--betongrijs);
    line-height:1.5;
  }
  h1,h2,h3,.font-display{font-family:'Fraunces',serif;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
  section{padding:88px 0;}
  @media(max-width:680px){section{padding:56px 0;}}

  /* HEADER */
  header{
    position:sticky; top:0; z-index:50;
    background:var(--wit);
    border-bottom:1px solid var(--lijn);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:18px 28px; max-width:1120px; margin:0 auto;}
  .logo{font-family:'Fraunces',serif; font-weight:700; font-size:1.25rem; color:var(--diepblauw); display:flex; align-items:center; gap:10px;}
  .logo-mark{width:30px; height:30px; border-radius:50%; background:conic-gradient(from 200deg, var(--warmte-oranje), var(--diepblauw)); flex-shrink:0;}
  .navlinks{display:flex; gap:32px; font-size:0.95rem; font-weight:500;}
  .navlinks a{opacity:0.75; transition:opacity .15s;}
  .navlinks a:hover{opacity:1;}
  .btn{
    display:inline-block; padding:12px 24px; border-radius:3px; font-weight:600; font-size:0.92rem;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-primary{background:var(--warmte-oranje); color:var(--wit);}
  .btn-primary:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(232,98,61,0.35);}
  .btn-ghost{border:1px solid var(--lijn); color:var(--diepblauw);}
  .btn-ghost:hover{border-color:var(--diepblauw);}
  @media(max-width:800px){.navlinks{display:none;}}

  /* HERO */
  .hero{
    background:var(--diepblauw); color:var(--wit);
    padding:96px 0 0 0; overflow:hidden;
  }
  .hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr;}}
  .eyebrow{
    font-family:'IBM Plex Mono',monospace; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--warmte-oranje-licht); margin-bottom:18px; display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:''; width:22px; height:1px; background:var(--warmte-oranje-licht);}
  .hero h1{font-size:clamp(2.2rem, 4.6vw, 3.4rem); font-weight:600; line-height:1.08; margin-bottom:22px;}
  .hero h1 em{font-style:italic; color:var(--warmte-oranje-licht);}
  .hero p{font-size:1.08rem; color:rgba(255,255,255,0.78); max-width:480px; margin-bottom:32px;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:56px;}
  .btn-outline-white{border:1px solid rgba(255,255,255,0.35); color:var(--wit); padding:12px 24px; border-radius:3px; font-weight:600; font-size:0.92rem;}
  .btn-outline-white:hover{border-color:var(--wit);}

  /* Cross-section signature illustration */
  .cross-section{width:100%; height:auto;}
  .layer-label{font-family:'IBM Plex Mono',monospace; font-size:11px; fill:rgba(255,255,255,0.65);}
  .temp-readout{font-family:'IBM Plex Mono',monospace; font-size:13px; fill:var(--warmte-oranje-licht);}

  .hero-strip{
    border-top:1px solid rgba(255,255,255,0.12);
    display:grid; grid-template-columns:repeat(4,1fr);
  }
  .hero-strip div{padding:22px 28px; border-right:1px solid rgba(255,255,255,0.12);}
  .hero-strip div:last-child{border-right:none;}
  .hero-strip .num{font-family:'IBM Plex Mono',monospace; font-size:1.5rem; color:var(--warmte-oranje-licht); display:block;}
  .hero-strip .lbl{font-size:0.8rem; color:rgba(255,255,255,0.6); margin-top:2px;}
  @media(max-width:800px){.hero-strip{grid-template-columns:repeat(2,1fr);} .hero-strip div{border-bottom:1px solid rgba(255,255,255,0.12);}}

  /* SECTION HEADS */
  .section-head{max-width:600px; margin-bottom:48px;}
  .section-eyebrow{font-family:'IBM Plex Mono',monospace; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--warmte-oranje); margin-bottom:10px;}
  .section-head h2{font-size:clamp(1.7rem,3vw,2.3rem); font-weight:600; color:var(--diepblauw);}
  .section-head p{margin-top:14px; color:rgba(38,40,42,0.7); font-size:1.02rem;}

  /* DIENSTEN */
  .diensten-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--lijn); border:1px solid var(--lijn);}
  @media(max-width:900px){.diensten-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:600px){.diensten-grid{grid-template-columns:1fr;}}
  .dienst-card{background:var(--wit); padding:32px 26px; transition:background .15s;}
  .dienst-card:hover{background:#FAF8F4;}
  .dienst-tag{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--zandbeige); text-transform:uppercase; letter-spacing:0.06em;}
  .dienst-card h3{font-size:1.15rem; color:var(--diepblauw); margin:10px 0 10px; font-weight:600;}
  .dienst-card p{font-size:0.92rem; color:rgba(38,40,42,0.68);}

  /* CATALOGUS */
  .catalogus{background:var(--wit);}
  .cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  @media(max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.cat-grid{grid-template-columns:1fr;}}
  .cat-card{border:1px solid var(--lijn); border-radius:4px; padding:22px 20px; position:relative;}
  .cat-icon{width:38px; height:38px; margin-bottom:16px;}
  .cat-card h4{font-size:1rem; color:var(--diepblauw); margin-bottom:6px; font-weight:600;}
  .cat-card p{font-size:0.85rem; color:rgba(38,40,42,0.62); margin-bottom:14px;}
  .cat-price{font-family:'IBM Plex Mono',monospace; font-size:0.85rem; color:var(--warmte-oranje); border-top:1px dashed var(--lijn); padding-top:12px;}

  /* OFFERTE FORM (Workserve shortcode-demo) */
  .offerte{background:var(--diepblauw-donker); color:var(--wit);}
  .offerte-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start;}
  @media(max-width:900px){.offerte-grid{grid-template-columns:1fr;}}
  .offerte h2{color:var(--wit);}
  .offerte .section-head p{color:rgba(255,255,255,0.65);}
  .plugin-badge{
    display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:0.72rem;
    color:var(--warmte-oranje-licht); border:1px solid rgba(232,98,61,0.4); padding:6px 12px; border-radius:20px; margin-top:22px;
  }
  .plugin-badge::before{content:'●'; font-size:8px;}
  form{background:var(--wit); border-radius:6px; padding:32px; color:var(--antraciet);}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
  @media(max-width:560px){.form-row{grid-template-columns:1fr;}}
  label{font-size:0.8rem; font-weight:600; color:var(--diepblauw); display:block; margin-bottom:6px;}
  input, select, textarea{
    width:100%; padding:11px 12px; border:1px solid var(--lijn); border-radius:3px; font-family:'Inter',sans-serif; font-size:0.92rem; background:#FAF9F6;
  }
  textarea{resize:vertical; min-height:80px;}
  .field{margin-bottom:14px;}
  .form-note{font-size:0.78rem; color:rgba(38,40,42,0.5); margin-top:10px;}

  /* PLUGIN-FORMULIER (echte output van [vakflow_aanvraag])
     Deze regels targeten op HTML-elementtype (niet op plugin-specifieke
     classnamen, die we niet kennen), zodat de styling blijft werken
     ongeacht hoe de plugin zijn markup precies opbouwt. */
  .offerte-plugin-form button[type="submit"],
  .offerte-plugin-form input[type="submit"]{
    display:inline-block; background:var(--warmte-oranje); color:var(--wit);
    border:none; padding:13px 30px; border-radius:3px; font-weight:600;
    font-size:0.95rem; font-family:'Inter',sans-serif; cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .offerte-plugin-form button[type="submit"]:hover,
  .offerte-plugin-form input[type="submit"]:hover{
    transform:translateY(-1px); box-shadow:0 6px 18px rgba(232,98,61,0.35);
  }
  .offerte-plugin-form button[type="submit"]:disabled,
  .offerte-plugin-form input[type="submit"]:disabled{
    opacity:0.55; cursor:not-allowed; transform:none; box-shadow:none;
  }

  .offerte-plugin-form input[type="file"]{
    width:100%; padding:14px; border:1.5px dashed var(--lijn); border-radius:4px;
    background:#FAF9F6; font-size:0.85rem; color:rgba(38,40,42,0.65); cursor:pointer;
    transition:border-color .15s;
  }
  .offerte-plugin-form input[type="file"]:hover{border-color:var(--warmte-oranje);}
  .offerte-plugin-form input[type="file"]::file-selector-button,
  .offerte-plugin-form input[type="file"]::-webkit-file-upload-button{
    margin-right:14px; padding:9px 16px; border:none; border-radius:3px;
    background:var(--diepblauw); color:var(--wit); font-weight:600; font-size:0.82rem;
    font-family:'Inter',sans-serif; cursor:pointer; transition:background .15s;
  }
  .offerte-plugin-form input[type="file"]:hover::file-selector-button,
  .offerte-plugin-form input[type="file"]:hover::-webkit-file-upload-button{
    background:var(--diepblauw-donker);
  }

  /* PORTAL TEASER */
  .portal{}
  .portal-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
  @media(max-width:900px){.portal-grid{grid-template-columns:1fr;}}
  .portal-card{background:var(--wit); border:1px solid var(--lijn); border-radius:6px; padding:0; overflow:hidden;}
  .portal-topbar{background:var(--diepblauw); color:var(--wit); padding:14px 20px; display:flex; justify-content:space-between; align-items:center; font-size:0.85rem;}
  .portal-body{padding:24px;}
  .ticket{display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--lijn);}
  .ticket:last-child{border-bottom:none;}
  .ticket-name{font-weight:600; font-size:0.92rem;}
  .ticket-sub{font-size:0.78rem; color:rgba(38,40,42,0.55);}
  .status-pill{font-family:'IBM Plex Mono',monospace; font-size:0.7rem; padding:4px 10px; border-radius:12px; text-transform:uppercase; letter-spacing:0.03em;}
  .status-aanvraag{background:rgba(201,166,107,0.18); color:#8A6D2F;}
  .status-offerte{background:rgba(232,98,61,0.15); color:var(--warmte-oranje);}
  .status-uitvoering{background:rgba(27,58,75,0.12); color:var(--diepblauw);}
  .status-gereed{background:rgba(74,124,89,0.15); color:#3E7A52;}
  .progress-bar{height:4px; background:var(--lijn); border-radius:2px; margin-top:8px; overflow:hidden;}
  .progress-fill{height:100%; background:var(--warmte-oranje);}

  /* PROJECTEN */
  .projecten-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  @media(max-width:900px){.projecten-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:600px){.projecten-grid{grid-template-columns:1fr;}}
  .project-card{border-radius:4px; overflow:hidden; position:relative; aspect-ratio:4/3; background:var(--diepblauw);}
  .project-card .ov{position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(18,39,49,0.9) 100%); display:flex; align-items:flex-end; padding:18px;}
  .project-card .ov span{color:var(--wit); font-weight:600; font-size:0.95rem;}
  .project-vis{width:100%; height:100%;}

  /* FOOTER */
  footer{background:var(--diepblauw-donker); color:rgba(255,255,255,0.6); padding:48px 0 28px;}
  .footer-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:32px; margin-bottom:24px;}
  .footer-grid .logo{color:var(--wit);}
  footer .cols{display:flex; gap:64px; flex-wrap:wrap;}
  footer .col h5{color:var(--wit); font-size:0.82rem; margin-bottom:12px; text-transform:uppercase; letter-spacing:0.05em; font-family:'IBM Plex Mono',monospace;}
  footer .col a{display:block; font-size:0.88rem; margin-bottom:8px; opacity:0.75;}
  footer .col a:hover{opacity:1;}
  .fine{font-size:0.78rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}