/* Lettertypes staan op de eigen server, bezoekers passeren dus niet langs Google Fonts */
  @font-face{ font-family:'Unbounded'; src:url('/fonts/unbounded-latin-wght-normal.woff2') format('woff2'); font-weight:200 900; font-display:swap; }
  @font-face{ font-family:'Manrope'; src:url('/fonts/manrope-latin-wght-normal.woff2') format('woff2'); font-weight:200 800; font-display:swap; }
  @font-face{ font-family:'JetBrains Mono'; src:url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2'); font-weight:100 800; font-display:swap; }

  /* ============================================================
     NOVA NETWORK, website
     Ontwerp: bewust één donker-premium visueel wereldbeeld, geen
     OS-donker/licht-omschakeling, dit is een merkidentiteit
     (zwart/wit logo, avondevent-fotografie), geen document dat met
     de kijker mee moet schakelen. Alle kleuren expliciet vastgelegd.
     Signatuurmotief: de diagonale streep uit het "M/"-logo komt
     terug in sectiescheidingen, kaartranden en knoppen (geen
     rounded-lg, geen ronde kaarten).
     ============================================================ */

  :root{
    --ink:        #0B0B0D;   /* hoofdgrond, warm-neutraal zwart */
    --ink-2:      #16161A;   /* kaarten/oppervlak op donker */
    --ink-line:   rgba(246,244,239,0.14);
    --paper:      #F3F1EA;   /* hoofdgrond licht, licht warm-neutraal */
    --paper-2:    #E7E3D7;   /* kaarten/oppervlak op licht */
    --paper-line: rgba(11,11,13,0.12);
    --brass:      #C79A44;   /* enige accentkleur */
    --brass-2:    #E4C077;   /* lichtere brass voor hover/glow */
    --text-hi-dark:   #F6F4EF;
    --text-lo-dark:   rgba(246,244,239,0.68);
    --text-hi-light:  #0B0B0D;
    --text-lo-light:  rgba(11,11,13,0.64);

    --font-display: 'Unbounded', 'Arial Black', sans-serif;
    --font-body:    'Manrope', -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;

    --cut: 22px; /* diagonale afsnijding, terugkerende maat */
    --nav-h: 84px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background: var(--ink);
    color: var(--text-hi-dark);
    font-family: var(--font-body);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{ max-width:100%; display:block; }

  h1,h2,h3{
    font-family: var(--font-display);
    text-wrap: balance;
    margin:0;
    line-height:1.05;
    letter-spacing:-0.01em;
  }
  p{ margin:0; }

  .eyebrow{
    font-family: var(--font-mono);
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.18em;
    text-transform:uppercase;
  }
  .on-dark .eyebrow{ color: var(--brass-2); }
  .on-light .eyebrow{ color:#8A6A24; }

  .section{
    position:relative;
    padding: 6.5rem 1.5rem;
  }
  .section-inner{
    max-width: 1160px;
    margin:0 auto;
  }
  .on-dark{ background: var(--ink); color: var(--text-hi-dark); }
  .on-light{ background: var(--paper); color: var(--text-hi-light); }

  .lede{ max-width:65ch; }
  .on-dark .lede{ color: var(--text-lo-dark); }
  .on-light .lede{ color: var(--text-lo-light); }

  /* diagonale sectie-overgang, echoot de streep in het logo */
  .cut-bottom-dark{
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%);
    padding-bottom: calc(6.5rem + 46px);
  }
  .cut-bottom-light{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 46px));
    padding-bottom: calc(6.5rem + 46px);
  }

  /* diagonaal afgesneden hoeken i.p.v. rounded corners */
  .cut-card{
    clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  }

  a{ color:inherit; }

  .btn{
    font-family: var(--font-mono);
    font-weight:600;
    font-size:0.82rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:0.6em;
    padding: 1rem 1.6rem;
    border: 1px solid transparent;
    cursor:pointer;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  }
  .btn-primary{
    background: var(--brass);
    color: var(--ink);
  }
  .btn-primary:hover{ background: var(--brass-2); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(199,154,68,0.35); }
  .btn-ghost{
    background: transparent;
    border-color: var(--ink-line);
    color: var(--text-hi-dark);
  }
  .btn-ghost:hover{ border-color: var(--brass-2); color: var(--brass-2); transform: translateY(-2px); }
  .on-light .btn-ghost{ border-color: var(--paper-line); color: var(--text-hi-light); }
  .on-light .btn-ghost:hover{ border-color:#8A6A24; color:#8A6A24; }

  a:focus-visible, button:focus-visible{
    outline: 2px solid var(--brass-2);
    outline-offset: 3px;
  }

  /* ---------- NAV ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    height: var(--nav-h);
    display:flex; align-items:center;
    padding: 0 1.5rem;
    background: rgba(11,11,13,0.72);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ink-line);
    transform: translateY(0);
    transition: transform .35s ease, background-color .35s ease;
  }
  .nav.nav-hidden{ transform: translateY(-100%); }
  .nav-inner{
    max-width:1160px; margin:0 auto; width:100%;
    display:flex; align-items:center; justify-content:space-between;
    gap: 1rem;
  }
  .brand{ display:flex; align-items:center; gap:0.7rem; text-decoration:none; }
  .brand img{ height:26px; width:auto; filter: invert(1) brightness(1.6); }
  .brand-word{ font-family: var(--font-display); font-weight:700; font-size:0.95rem; letter-spacing:0.02em; color:var(--text-hi-dark); }
  .nav-links{ display:flex; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; }
  .nav-links a{
    font-family: var(--font-mono); font-size:0.76rem; letter-spacing:0.06em; text-transform:uppercase;
    text-decoration:none; color: var(--text-lo-dark); transition: color .2s ease;
  }
  .nav-links a:hover{ color: var(--brass-2); }
  .nav-cta{ display:flex; align-items:center; gap:1rem; }
  .nav-links-wrap{ display:flex; align-items:center; gap:2.5rem; }

  @media (max-width: 860px){
    .nav-links{ display:none; }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding-top: calc(var(--nav-h) + 4.5rem);
    padding-bottom: 6rem;
    min-height: 640px;
    display:flex; align-items:flex-end;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center 30%;
    filter: grayscale(0.25) contrast(1.05);
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(11,11,13,0.55) 0%, rgba(11,11,13,0.55) 30%, rgba(11,11,13,0.94) 78%, #0B0B0D 100%);
  }
  .hero-inner{
    position:relative; z-index:2;
    max-width:1160px; margin:0 auto; width:100%;
    padding: 0 1.5rem;
  }
  .hero h1{
    font-size: clamp(2.4rem, 5.6vw, 4.4rem);
    font-weight: 700;
    margin-top: 1rem;
    max-width: 16ch;
  }
  .hero .lede{ margin-top:1.4rem; font-size:1.08rem; max-width:48ch; }
  .hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
  .hero-meta{
    margin-top:3rem; display:flex; gap:2.2rem; flex-wrap:wrap;
    font-family: var(--font-mono); font-size:0.74rem; letter-spacing:0.05em; color: var(--text-lo-dark);
    text-transform:uppercase;
  }
  .hero-meta strong{ color: var(--text-hi-dark); }

  /* ---------- WAAROM (bento) ---------- */
  .bento{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--paper-line);
    border: 1px solid var(--paper-line);
  }
  .bento .card{
    background: var(--paper);
    padding: 2rem 1.8rem;
    display:flex; flex-direction:column; gap:0.9rem;
  }
  .bento .card:nth-child(1){ grid-column: span 4; }
  .bento .card:nth-child(2){ grid-column: span 2; }
  .bento .card:nth-child(3){ grid-column: span 2; }
  .bento .card:nth-child(4){ grid-column: span 2; }
  .bento .card:nth-child(5){ grid-column: span 2; }
  .bento .card:nth-child(6){ grid-column: span 6; }
  .card-num{ font-family: var(--font-mono); font-size:0.76rem; color:#8A6A24; letter-spacing:0.06em; }
  .card h3{ font-size:1.18rem; font-weight:600; }
  .card p{ color: var(--text-lo-light); font-size:0.95rem; line-height:1.55; }

  @media (max-width: 760px){
    .bento{ grid-template-columns: 1fr; }
    .bento .card{ grid-column: span 1 !important; }
  }

  /* ---------- MISSIE (pull quote) ---------- */
  .missie{ text-align:left; }
  .missie blockquote{
    margin:0;
    font-family: var(--font-display);
    font-weight:500;
    font-size: clamp(1.5rem, 3.4vw, 2.4rem);
    line-height:1.28;
    max-width: 22ch;
    position:relative;
    padding-left: 1.8rem;
    border-left: 3px solid var(--brass);
  }
  .missie cite{
    display:block; margin-top:1.8rem;
    font-style:normal;
    font-family: var(--font-mono);
    font-size:0.8rem;
    letter-spacing:0.06em;
    color: var(--text-lo-dark);
    text-transform:uppercase;
  }

  /* ---------- TRAJECT (badge steps) ---------- */
  .traject-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
  .step{
    border: 1px solid var(--paper-line);
    padding: 1.8rem 1.5rem 1.6rem;
    background: var(--paper-2);
    display:flex; flex-direction:column; gap:1rem;
  }
  .step-id{
    font-family: var(--font-mono);
    font-size:0.78rem;
    color: var(--ink);
    background: var(--brass);
    display:inline-block;
    padding: 0.22em 0.6em;
    width:fit-content;
    letter-spacing:0.05em;
  }
  .step h3{ font-size:1.05rem; font-weight:700; }
  .step p{ font-size:0.92rem; color: var(--text-lo-light); line-height:1.55; }
  @media (max-width: 900px){
    .traject-grid{ grid-template-columns: 1fr; }
  }

  /* ---------- TESTIMONIALS ---------- */
  .testimonial-note{
    font-family: var(--font-mono);
    font-size:0.74rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color: var(--text-lo-dark);
    border: 1px dashed var(--ink-line);
    display:inline-block;
    padding: 0.5rem 0.9rem;
    margin-bottom: 2.2rem;
  }
  .quotes{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  .quote{
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    padding: 2rem;
    display:flex; flex-direction:column; gap:1.4rem;
  }
  .quote p{ font-size:1.05rem; line-height:1.6; color: var(--text-hi-dark); }
  .quote footer{ font-family: var(--font-mono); font-size:0.76rem; color: var(--brass-2); letter-spacing:0.04em; text-transform:uppercase; }
  @media (max-width: 760px){ .quotes{ grid-template-columns:1fr; } }

  /* ---------- FOOTER CTA ---------- */
  .footer-cta{
    background: linear-gradient(160deg, #0B0B0D 0%, #1C160B 120%);
    text-align:left;
  }
  .footer-cta h2{ font-size: clamp(2rem, 4.4vw, 3.2rem); max-width:18ch; }
  .footer-cta .lede{ margin-top:1.2rem; }
  .footer-grid{
    margin-top: 3.5rem;
    display:grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 2rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--ink-line);
  }
  .footer-col h4{
    font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
    color: var(--brass-2); margin-bottom:0.9rem; font-weight:600;
  }
  .footer-col p, .footer-col a{
    font-size:0.9rem; color: var(--text-lo-dark); text-decoration:none; line-height:1.7; display:block;
  }
  .footer-col a:hover{ color: var(--brass-2); }
  .legal{
    margin-top: 2.5rem; padding-top:1.5rem; border-top:1px solid var(--ink-line);
    font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.04em; color: rgba(246,244,239,0.45);
    display:flex; flex-wrap:wrap; gap: 0.5rem 1.5rem; text-transform:uppercase;
  }
  @media (max-width: 760px){ .footer-grid{ grid-template-columns:1fr; } }

  /* ---------- scroll reveal ----------
     Belangrijk: nooit op opacity:0 parkeren in afwachting van een
     observer (breekt bij een statische render, een crawler, of als
     JS uitblijft). Content is altijd zichtbaar; enkel de positie
     schuift nog licht bij, puur cosmetisch. */
  .reveal{ transform:none; }
  @media (prefers-reduced-motion: no-preference){
    .reveal{
      transform: translateY(18px);
      transition: transform .7s ease;
    }
    .reveal.is-visible{ transform:none; }
  }

  /* ---------- VACATURES ---------- */
  .vacatures{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
  }
  .vacature{
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    padding: 2rem 1.8rem;
    display:flex; flex-direction:column; gap:1rem;
  }
  .vacature h3{ font-size:1.2rem; font-weight:600; }
  .vacature-meta{ font-family: var(--font-mono); font-size:0.74rem; letter-spacing:0.05em; text-transform:uppercase; color: var(--brass-2); }
  .vacature p{ color: var(--text-lo-dark); font-size:0.95rem; line-height:1.6; white-space:pre-line; flex:1; }
  .vacature .btn{ align-self:flex-start; }
  .vacature-knoppen{ display:flex; flex-wrap:wrap; gap:0.6rem; }

  /* ---------- FORMULIER ---------- */
  .contact-grid{
    margin-top: 3rem;
    display:grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 3rem;
    align-items:start;
  }
  .formulier{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
  .veld{ display:flex; flex-direction:column; gap:0.45rem; }
  .veld.vol{ grid-column: 1 / -1; }
  .veld label{ font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--text-lo-dark); }
  .veld input, .veld select, .veld textarea{
    font: inherit; font-size:1rem;
    color: var(--text-hi-dark);
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    padding: 0.85rem 1rem;
    border-radius:0;
    width:100%;
  }
  .veld textarea{ min-height: 130px; resize: vertical; }
  .veld input:focus, .veld select:focus, .veld textarea:focus{ outline: 2px solid var(--brass-2); outline-offset: 1px; border-color: transparent; }
  .lokveld{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .formulier .btn{ border:none; justify-self:start; }
  .formulier .btn[disabled]{ opacity:0.6; cursor:wait; transform:none; }
  .form-melding{ grid-column: 1 / -1; font-size:0.95rem; line-height:1.5; min-height:1.5em; }
  .form-melding.ok{ color: var(--brass-2); }
  .form-melding.fout{ color: #F08A7E; }
  .contact-kort{ display:flex; flex-direction:column; gap:1rem; }
  .contact-kort .btn{ align-self:flex-start; }
  @media (max-width: 860px){
    .contact-grid{ grid-template-columns: 1fr; }
    .formulier{ grid-template-columns: 1fr; }
  }
  /* losse tekstregels met on-dark krijgen geen eigen vlak, enkel secties */
  p.on-dark{ background: transparent; }
  .form-privacy{ grid-column: 1 / -1; font-size:0.85rem; line-height:1.5; color: var(--text-lo-dark); }
  .form-privacy a, .legal a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; }
  .legal a:hover, .form-privacy a:hover{ color: var(--brass-2); }