/* ---------- LOKALE FONTS ----------
     Zelf gehost in vendor/fonts/, alleen de latin-subsets. De site
     heeft daarmee geen enkele externe host meer nodig. */
  @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../vendor/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
  @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../vendor/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../vendor/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
  @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../vendor/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../vendor/fonts/inter-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../vendor/fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../vendor/fonts/inter-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
  @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../vendor/fonts/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../vendor/fonts/inter-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
  @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../vendor/fonts/inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(../vendor/fonts/space-grotesk-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
  @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(../vendor/fonts/space-grotesk-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(../vendor/fonts/space-grotesk-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
  @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(../vendor/fonts/space-grotesk-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(../vendor/fonts/space-grotesk-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
  @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(../vendor/fonts/space-grotesk-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

  :root{
    --ink:#1b1b23;
    --ink-soft:#26262f;
    --panel:#3a3a46;
    --copper:#9a62f5;
    --copper-bright:#b894f8;
    --verdigris:#b894f8;
    --accent-deep:#7a3df0;
    --paper:#f0f0f5;
    --paper-dim:#bcbcca;
    --line:#3b3b48;

    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    --rail-w: 3px;
    --edge: 5%;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{
    scroll-behavior:smooth;
    /* Native scrollbar weg: de rail links doet nu alles wat hij deed —
       positie tonen, verhouding tonen, en slepen. Twee scrollbars naast
       elkaar is dubbelop. Scrollen zelf blijft volledig werken: muiswiel,
       toetsenbord, trackpad en de rail. */
    scrollbar-width:none;          /* Firefox */
    -ms-overflow-style:none;       /* oude Edge */
  }
  html::-webkit-scrollbar{ display:none; }   /* Chrome, Safari, Edge */
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
  }

  body{
    background:var(--ink);
    color:var(--paper);
    font-family:var(--font-body);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  a{color:inherit;}

  ::selection{background:var(--copper);color:var(--ink);}

  .wrap{
    max-width:none;
    margin:0;
    padding-left:var(--edge);
    padding-right:var(--edge);
  }

  @media (max-width:720px){
    :root{--edge:24px;}
  }

  /* Toetsenbordgebruikers slaan zo de navigatie over. Alleen zichtbaar
     zodra hij focus krijgt. */
  .skip-link{
    position:absolute;
    left:var(--edge);
    top:-100px;
    z-index:100;
    background:var(--verdigris);
    color:var(--ink);
    font-family:var(--font-mono);
    font-size:.85rem;
    padding:12px 18px;
    border-radius:3px;
    text-decoration:none;
    transition:top .18s ease;
  }
  .skip-link:focus{top:16px;}

  /* ---------- NAV ---------- */
  header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:50;
    padding:22px var(--edge);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;               /* logo en nav mogen elkaar niet raken */
    transition:background .3s ease, border-color .3s ease, padding .3s ease;
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(30,30,39,.9);
    backdrop-filter:blur(10px);
    border-bottom-color:var(--line);
    padding-top:14px;padding-bottom:14px;
  }
  .logo{
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.15rem;
    letter-spacing:-.01em;
    flex-shrink:0;          /* mag nooit worden platgedrukt door de nav */
  }
  .logo span{color:var(--copper);}
  nav ul{
    display:flex;
    gap:32px;
    list-style:none;
  }
  nav a{
    text-decoration:none;
    font-size:.92rem;
    color:var(--paper-dim);
    transition:color .2s ease;
  }
  nav a:hover, nav a:focus-visible{color:var(--paper);}
  .nav-cta{
    display:none;
  }
  @media (min-width:640px){
    .nav-cta{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-family:var(--font-mono);
      font-size:.8rem;
      color:var(--ink);
      background:var(--copper-bright);
      padding:9px 16px;
      border-radius:3px;
      text-decoration:none;
      transition:background .2s ease;
    }
    .nav-cta:hover{background:#cbaafb;}
  }
  /* Onder 640px verborg de oude regel vier van de vijf links en liet alleen
     "Contact" staan. Nu blijven ze allemaal bereikbaar via een horizontaal
     schuivende rij, met een fade rechts als hint dat er meer is. */
  /* ---------- HAMBURGER (telefoon) ---------- */
  .nav-toggle{display:none;}

  @media (max-width:640px){
    /* Logo boven het paneel, net als de knop. Anders schemert het er
       doorheen en leest het als een weergavefout. */
    .logo{position:relative;z-index:2;}
    .nav-toggle{
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:5px;
      width:44px;height:44px;      /* volwaardig tapdoel */
      margin-right:-10px;
      padding:0 10px;
      background:none;
      border:0;
      cursor:pointer;
      z-index:2;
    }
    .nav-toggle span{
      display:block;
      height:2px;
      background:var(--paper);
      border-radius:2px;
      transition:transform .28s cubic-bezier(.16,.8,.3,1), opacity .2s ease;
    }
    /* Open: de drie strepen worden een kruis. */
    .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
    .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

    /* Zonder JS blijft dit een gewone zichtbare lijst: de links zijn dan
       nog steeds bereikbaar in plaats van opgesloten achter een knop. */
    nav{
      position:fixed;
      top:0;left:0;right:0;
      padding:74px var(--edge) 20px;
      background:rgba(27,27,35,.97);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      border-bottom:1px solid var(--line);
    }
    .js nav{
      transform:translateY(-100%);
      opacity:0;
      visibility:hidden;                       /* ook uit de tabvolgorde */
      transition:transform .34s cubic-bezier(.16,.8,.3,1), opacity .24s ease, visibility 0s .34s;
    }
    .js nav[data-open="true"]{
      transform:none;
      opacity:1;
      visibility:visible;
      transition:transform .34s cubic-bezier(.16,.8,.3,1), opacity .24s ease;
    }
    nav ul{flex-direction:column;gap:0;align-items:stretch;}
    nav a{
      display:block;
      padding:15px 0;
      font-size:1.05rem;
      border-bottom:1px solid var(--line);
    }
    nav li:last-child a{border-bottom:none;}
  }
  @media (prefers-reduced-motion: reduce){
    .js nav, .nav-toggle span{transition:none;}
  }

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

  /* ---------- PIPE RAIL (signature element) ---------- */
  /* 24px breed grijpvlak met de lijn van 3px in het midden. Een streepje
     van drie pixels is niet te pakken; het beeld blijft identiek. */
  .pipe-rail{
    position:fixed;
    right:8px;
    top:0;
    bottom:0;
    width:24px;
    z-index:40;
    display:none;
    cursor:ns-resize;
  }
  .pipe-rail.sleept{cursor:grabbing;}

  /* Toont hoeveel van de pagina er in beeld past, zoals de duim van een
     echte scrollbar. Bewust gedempt: de heldere vulling en de knopen zijn
     de dragende elementen, dit is achtergrondinformatie. */
  .rail-thumb{
    position:absolute;
    left:50%;
    width:9px;
    transform:translateX(-50%);
    border-radius:5px;
    background:rgba(184,148,248,.12);
    border:1px solid rgba(166,122,246,.26);
    pointer-events:none;
  }

  /* Tijdens het slepen laten zien waar je uitkomt. Zonder dit scrub je blind:
     je ziet de pagina wel voorbijvliegen, maar niet waar je landt. */
  .rail-hint{
    position:absolute;
    right:30px;
    transform:translateY(-50%);
    padding:5px 10px;
    background:var(--panel);
    border:1px solid var(--verdigris);
    border-radius:3px;
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:.02em;
    color:var(--paper);
    white-space:nowrap;
    pointer-events:none;
    opacity:0;
    transition:opacity .18s ease;
  }
  .pipe-rail.sleept .rail-hint{opacity:1;}
  @media (min-width:960px){
    .pipe-rail{display:block;}
  }
  .pipe-rail::before{
    content:"";
    position:absolute;
    top:0;bottom:0;
    left:50%;
    width:var(--rail-w);
    transform:translateX(-50%);
    background:var(--line);
    border-radius:2px;
  }
  /* scaleY in plaats van een geanimeerde height: transform is composited,
     height forceert layout op elke scroll-frame. GSAP drijft dit aan. */
  .pipe-fill{
    position:absolute;
    top:0;
    left:50%;
    width:var(--rail-w);
    margin-left:calc(var(--rail-w) / -2);
    height:100%;
    transform:scaleY(0);
    transform-origin:top;
    will-change:transform;
    background:linear-gradient(180deg, var(--verdigris), var(--accent-deep));
    border-radius:2px;
  }
  /* De knopen zijn nu echte links: de rail is navigatie geworden in plaats
     van versiering. Het klikgebied is 30px, de ruit blijft 9px — anders is
     een diamantje van negen pixels niet te raken. */
  .pipe-node{
    position:absolute;
    left:50%;
    width:30px;height:30px;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    cursor:pointer;
  }
  .pipe-node-dot{
    width:9px;height:9px;
    transform:rotate(45deg);
    background:var(--ink-soft);
    border:1.5px solid var(--paper-dim);
    transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
  }
  /* Gepasseerd: gevuld maar gedempt, in de donkere kleur waar de vulling
     ook naartoe verloopt. Zonder dit zag een volle rail er nog steeds uit
     als een pijplijn met louter lege stations. */
  .pipe-node.passed .pipe-node-dot{
    background:var(--accent-deep);
    border-color:var(--accent-deep);
  }
  .pipe-node.active .pipe-node-dot{
    background:var(--verdigris);
    border-color:var(--verdigris);
    box-shadow:0 0 0 5px rgba(166,122,246,.18);
  }
  .pipe-node:hover .pipe-node-dot,
  .pipe-node:focus-visible .pipe-node-dot{border-color:var(--verdigris);}
  .pipe-node:focus-visible{outline:2px solid var(--verdigris);outline-offset:2px;border-radius:2px;}

  .pipe-node-label{
    position:absolute;
    right:30px;
    font-family:var(--font-mono);
    font-size:.68rem;
    letter-spacing:.02em;
    color:var(--paper-dim);
    white-space:nowrap;
    opacity:0;
    transform:translateX(5px);
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease, color .3s ease;
  }
  .pipe-node.active .pipe-node-label{opacity:.85;transform:none;}
  .pipe-node:hover .pipe-node-label,
  .pipe-node:focus .pipe-node-label{opacity:1;transform:none;color:var(--paper);}
  /* Kom je met de muis in de buurt van de rail, dan komen alle namen
     tevoorschijn. Zonder dit is niet te zien dát je erop kunt klikken:
     je moet dan blind een ruitje van 30px raken om het te ontdekken. */
  .pipe-rail.open .pipe-node-label{opacity:.7;transform:none;}
  .pipe-rail.open .pipe-node:hover .pipe-node-label{opacity:1;color:var(--paper);}

  /* ---------- VOORTGANGSBALK (smalle schermen) ---------- */
  .rail-top{
    position:fixed;
    top:0;left:0;right:0;
    height:2px;
    z-index:60;
    background:var(--line);
    display:block;
  }
  @media (min-width:960px){ .rail-top{display:none;} }
  .rail-top span{
    display:block;
    height:100%;
    width:100%;
    transform:scaleX(0);
    transform-origin:left;
    will-change:transform;
    background:linear-gradient(90deg, var(--verdigris), var(--accent-deep));
  }

  /* ---------- REVEAL ----------
     Geen begintoestand in CSS meer: GSAP zet die zelf, en alleen als er
     ook echt geanimeerd wordt. Laadt GSAP niet, of staat er beperkte
     beweging aan, dan staat alles gewoon zichtbaar. */

  /* ---------- HERO ---------- */
  .hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    padding-top:120px;
    padding-bottom:80px;
  }
  .hero-eyebrow{
    font-family:var(--font-mono);
    font-size:.82rem;
    color:var(--verdigris);
    letter-spacing:.04em;
    margin-bottom:22px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .hero-eyebrow::before{
    content:"";
    width:22px;height:1px;
    background:var(--verdigris);
  }
  h1{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(2.6rem, 7vw, 5.6rem);
    line-height:.98;
    letter-spacing:-.02em;
    max-width:14ch;
  }
  h1 em{
    font-style:normal;
    color:var(--copper);
  }
  .hero-sub{
    margin-top:30px;
    max-width:46ch;
    font-size:clamp(1.05rem,2vw,1.25rem);
    color:var(--paper-dim);
  }
  .hero-actions{
    margin-top:44px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  .btn{
    font-family:var(--font-mono);
    font-size:.88rem;
    padding:14px 26px;
    border-radius:3px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:transform .2s ease, background .2s ease, border-color .2s ease;
  }
  .btn-primary{
    background:var(--copper-bright);
    color:var(--ink);
  }
  .btn-primary:hover{background:#cbaafb;}
  .btn-ghost{
    border:1px solid var(--line);
    color:var(--paper);
  }
  .btn-ghost:hover{border-color:var(--verdigris);}
  @media (hover:hover) and (pointer:fine){
    .btn-primary:hover,.btn-ghost:hover{transform:translateY(-2px);}
  }
  /* Indrukken: de knop geeft mee onder je vinger. Kort, want het is een
     bevestiging, geen animatie om naar te kijken. */
  .btn:active{transform:scale(.97); transition-duration:.12s;}

  /* ---------- HERO-ARTEFACT ----------
     "Van pixel tot pijplijn" als geometrie: links losse, op een raster
     gesnapte pixels in dof grijs; naar rechts worden ze gevangen in banen,
     rekken uit tot stromende streken en kleuren op naar accentpaars.
     Staat in de lege rechterhelft, links van het scroll-label. */
  .hero-art{
    position:absolute;
    /* Loopt door tot aan de tekst: de pixels ontstaan waar de woorden staan
       en stromen naar rechts weg. Geen aspect-ratio meer — over deze breedte
       zou die het artefact hoger maken dan de hero. */
    left:var(--edge);
    right:calc(var(--edge) + 36px);
    /* Vult de hero van onder de header tot vlak boven de onderrand, in
       plaats van een band in het midden met leegte erboven en eronder. */
    top:96px;
    bottom:56px;
    display:none;
    /* Brede inloopfade: het artefact mag pas volledig opaak zijn voorbij
       waar de hero-tekst eindigt. */
    /* Fade aan alle vier de zijden. Met alleen een linkerfade snijden boven,
       rechts en onder kaarsrecht af, en dan verraadt de bloom-waas de
       canvas-rechthoek als zichtbare doos op de pagina. */
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0,0,0,.09) 15%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.55) 45%, #000 62%, #000 88%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0,0,0,.09) 15%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.55) 45%, #000 62%, #000 88%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
    /* screen: het zwart uit de canvas telt niet mee, alleen het licht.
       Moet op dít element staan, niet op de canvas erin: transform en
       mask maken hier een stacking context, waardoor een blend op het
       kind alleen binnen dit blok zou werken en niet met de pagina. */
    mix-blend-mode:screen;
  }
  .hero-art canvas{display:block;width:100%;height:100%;}
  @media (min-width:1024px){ .hero-art{display:block;} }

  /* Op telefoon stond hier een leeg zwart vlak: het artefact was verborgen.
     Nu wél zichtbaar, maar volle breedte en met een verticale fade — bovenin
     bijna niets zodat de kop vrij blijft, onderin vol. De deeltjes komen zo
     onder je tekst vandaan in plaats van eroverheen. */
  @media (max-width:1023px){
    .hero-art{
      display:block;
      left:0;
      right:0;
      top:38%;
      bottom:0;
      -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 26%, #000 62%, #000 88%, transparent 100%);
      mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 26%, #000 62%, #000 88%, transparent 100%);
      -webkit-mask-composite:source-over;
      mask-composite:add;
    }
  }
  /* Blijft onzichtbaar tot WebGL echt draait: laadt Three.js niet
     (offline, of geopend via file://), dan staat er geen leeg vak.
     visibility in plaats van opacity, want opacity<1 maakt een stacking
     context en dan blendt de canvas niet meer met de pagina erachter. */
  .hero-art{visibility:hidden;}
  .hero-art.ready{visibility:visible;}

  /* Tekst blijft boven het artefact liggen, ook als ze elkaar raken. */
  .hero-eyebrow, .hero h1, .hero-sub, .hero-actions{
    position:relative;
    z-index:1;
  }

  /* ---------- SECTION SHARED ---------- */
  section{
    padding:120px 0;
    position:relative;
  }
  .section-head{
    max-width:640px;
    margin-bottom:64px;
  }
  .eyebrow{
    font-family:var(--font-mono);
    font-size:.78rem;
    /* --copper haalt op zwart maar 4,14:1; kleine tekst heeft 4,5 nodig.
       --verdigris is dezelfde tint, iets lichter, en zit op 6,35:1. */
    color:var(--verdigris);
    letter-spacing:.04em;
    margin-bottom:16px;
    text-transform:uppercase;
  }
  h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(1.9rem,4vw,2.8rem);
    letter-spacing:-.01em;
  }
  .section-lead{
    margin-top:18px;
    color:var(--paper-dim);
    font-size:1.05rem;
    max-width:52ch;
  }

  /* ---------- SERVICES ---------- */
  .services{
    background:var(--ink-soft);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  @media (max-width:820px){
    .service-grid{grid-template-columns:1fr;}
  }
  .service-card{
    background:var(--ink-soft);
    padding:44px 36px;
    transition:background .3s ease;
  }
  .service-card:hover{background:var(--panel);}
  .service-num{
    font-family:var(--font-mono);
    font-size:.78rem;
    color:var(--verdigris);
  }
  .service-card h3{
    font-family:var(--font-display);
    font-size:1.4rem;
    font-weight:600;
    margin-top:18px;
    margin-bottom:14px;
  }
  .service-card p{
    color:var(--paper-dim);
    font-size:.96rem;
  }

  /* ---------- ABOUT ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    /* stretch, niet start: met start werd elke kaart zo hoog als zijn eigen
       tekst, en de linker heeft één regel meer dan de rechter. */
    align-items:stretch;
  }
  @media (max-width:820px){
    .about-grid{grid-template-columns:1fr; gap:36px;}
  }
  .role-card{
    border:1px solid var(--line);
    border-radius:4px;
    padding:32px;
    position:relative;
    overflow:hidden;
  }
  .role-card::before{
    content:"";
    position:absolute;
    top:0;left:0;
    width:100%;height:3px;
  }
  .role-card.pixel::before{background:var(--verdigris);}
  .role-card.pipe::before{background:var(--accent-deep);}
  .role-tag{
    font-family:var(--font-mono);
    font-size:.76rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--paper-dim);
  }
  .role-card h3{
    font-family:var(--font-display);
    font-size:1.5rem;
    margin-top:12px;
    margin-bottom:14px;
  }
  .role-card p{color:var(--paper-dim); font-size:.96rem;}

  /* ---------- SKILLS ---------- */
  .skills-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:44px;
  }
  @media (max-width:900px){
    .skills-grid{grid-template-columns:repeat(2,1fr); gap:36px;}
  }
  @media (max-width:560px){
    .skills-grid{grid-template-columns:1fr;}
  }
  .skill-col-label{
    font-family:var(--font-mono);
    font-size:.76rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--verdigris);
    padding-bottom:12px;
    border-bottom:1px solid var(--line);
    margin-bottom:4px;
  }
  .skill-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px 0;
    border-bottom:1px solid var(--line);
    font-size:.95rem;
    color:var(--paper);
  }
  .skill-item::before{
    content:"";
    width:6px;height:6px;
    background:var(--copper);
    flex-shrink:0;
  }
  .skill-col .skill-item:last-child{border-bottom:none;}

  /* ---------- CASE ----------
     Het eerste echte werk op de site. Krijgt bewust meer gewicht dan de
     lege plekken eronder: bewijs hoort zwaarder te wegen dan een belofte. */
  .case{
    display:block;
    padding:clamp(28px,4vw,48px);
    border:1px solid var(--line);
    border-radius:4px;
    background:var(--ink-soft);
  }
  .case .tag{
    font-family:var(--font-mono);
    font-size:.72rem;
    color:var(--verdigris);
    text-transform:uppercase;
    letter-spacing:.04em;
  }
  .case h3{
    font-family:var(--font-display);
    font-size:clamp(1.8rem,3.4vw,2.6rem);
    font-weight:700;
    letter-spacing:-.02em;
    margin:10px 0 14px;
  }
  .case-lead{color:var(--paper-dim);font-size:1.02rem;max-width:52ch;}
  /* Twee lijsten naast elkaar: met alles onder elkaar werd de tekstkolom
     741px hoog tegen 334px aan schermen ernaast, en dan verzuipen die. */
  .case-lists{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 28px;
  }
  @media (max-width:620px){
    .case-lists{grid-template-columns:1fr;}
  }
  .case-sub{
    font-family:var(--font-mono);
    font-size:.7rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--verdigris);
    margin-top:24px;
  }
  .case-points{
    list-style:none;
    margin:10px 0 0;
  }
  .case-points li{
    position:relative;
    padding:7px 0 7px 18px;
    font-size:.95rem;
    color:var(--paper);
  }
  .case-points li::before{
    content:"";
    position:absolute;
    left:0;top:1.05em;
    width:6px;height:6px;
    background:var(--copper);
    transform:translateY(-50%) rotate(45deg);
  }
  .case-stack{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px 20px;
    margin-top:28px;
    padding-top:20px;
    border-top:1px solid var(--line);
  }
  @media (max-width:520px){
    .case-stack{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  .case-stack dt{
    font-family:var(--font-mono);
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--paper-dim);
    margin-bottom:3px;
  }
  .case-stack dd{font-size:.92rem;color:var(--paper);}

  /* Telefoonschermen op een rij over de volle breedte. Ze stonden gewaaierd
     in een halve kolom; dat was gemaakt voor drie stuks, en bij vijf werd het
     een propje van onleesbare schermpjes. Naast elkaar zie je ze wél. */
  .case-shots{
    display:flex;
    gap:clamp(10px,1.6vw,24px);
    align-items:flex-start;
    margin-top:clamp(28px,4vw,42px);
  }
  .case-shot{
    /* Gelijk verdeeld: vijf of drie telefoons vullen dezelfde rij netjes op. */
    flex:1 1 0;
    min-width:0;
    max-width:300px;
    margin:0;
    display:block;
    padding:0;
    background:none;
    border:0;
    text-align:left;
    cursor:zoom-in;
    font:inherit;
    color:inherit;
  }
  .case-shot img{
    width:100%;
    height:auto;
    display:block;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--ink);
    transition:border-color .2s ease;
  }
  .case-shot:hover img{ border-color:var(--verdigris); }
  .case-shot:focus-visible{ outline:2px solid var(--verdigris); outline-offset:4px; border-radius:14px; }
  .case-shot-naam{
    display:block;
    margin-top:10px;
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.04em;
    color:var(--paper-dim);
  }
  /* Op een smal scherm past er geen rij van vijf; dan een schuifrij op
     leesbaar formaat in plaats van vijf plaatjes van 60px. */
  @media (max-width:760px){
    .case-shots{
      overflow-x:auto;
      overscroll-behavior-x:contain;
      scrollbar-width:none;
      padding-bottom:4px;
      -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);
      mask-image:linear-gradient(90deg,#000 90%,transparent);
    }
    .case-shots::-webkit-scrollbar{display:none;}
    .case-shot{ flex:0 0 auto; width:174px; max-width:none; }
  }

  /* ---------- PROJECTS ---------- */
  .projects-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
  }
  @media (max-width:820px){
    .projects-grid{grid-template-columns:1fr;}
  }
  .project-slot{
    border:1px dashed var(--line);
    border-radius:4px;
    padding:36px 28px;
    min-height:220px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  .project-slot .tag{
    font-family:var(--font-mono);
    font-size:.72rem;
    color:var(--paper-dim);
    text-transform:uppercase;
    letter-spacing:.04em;
  }
  .project-slot p{
    margin-top:18px;
    color:var(--paper-dim);
    font-size:.94rem;
  }

  /* ---------- CONTACT ---------- */
  .contact{
    text-align:left;
    border-top:1px solid var(--line);
  }
  .contact h2{max-width:14ch;}
  .contact-row{
    margin-top:40px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    align-items:center;
  }
  .contact-email{
    display:inline-block;
    padding:8px 0;
    font-family:var(--font-mono);
    font-size:clamp(1.1rem,3vw,1.6rem);
    color:var(--verdigris);
    text-decoration:none;
    border-bottom:1px solid transparent;
  }
  .contact-email:hover{border-bottom-color:var(--verdigris);}

  footer{
    padding:36px var(--edge);
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:var(--font-mono);
    font-size:.76rem;
    color:var(--paper-dim);
    border-top:1px solid var(--line);
    flex-wrap:wrap;
    gap:12px;
  }

  /* ---------- PROJECTKAARTEN (home) ----------
     Drie gelijke kaarten als voorproefje; de volledige case staat op
     projecten.html. Kaart 1 is echt werk, 2 en 3 zijn nog leeg en zeggen
     dat ook — liever een eerlijke lege plek dan een verzonnen project. */
  .proj-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    list-style:none;
  }
  @media (max-width:900px){ .proj-grid{grid-template-columns:1fr;} }
  .proj-card{
    border:1px solid var(--line);
    border-radius:4px;
    background:var(--ink-soft);
    overflow:hidden;
    transition:border-color .26s ease, transform .26s cubic-bezier(.16,.8,.3,1);
  }
  .proj-card.leeg{border-style:dashed;background:none;}
  .proj-card > a, .proj-card > span:first-child{display:block;}
  .proj-card a{text-decoration:none;color:inherit;display:block;}
  .proj-shot{
    display:block;
    height:190px;
    background:var(--ink);
    border-bottom:1px solid var(--line);
    overflow:hidden;
    position:relative;
  }
  .proj-card.leeg .proj-shot{border-bottom-style:dashed;}
  .proj-shot img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
    display:block;
    opacity:.85;
    transition:opacity .26s ease, transform .4s cubic-bezier(.16,.8,.3,1);
  }
  .proj-tag{
    display:block;
    margin:20px 22px 0;
    font-family:var(--font-mono);
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--verdigris);
  }
  .proj-card.leeg .proj-tag{color:var(--paper-dim);}
  .proj-titel{
    display:block;
    margin:8px 22px 0;
    font-family:var(--font-display);
    font-size:1.35rem;
    font-weight:600;
    letter-spacing:-.015em;
  }
  .proj-tekst{
    display:block;
    margin:8px 22px 22px;
    font-size:.94rem;
    color:var(--paper-dim);
  }
  @media (hover:hover) and (pointer:fine){
    .proj-card:not(.leeg):hover{border-color:var(--verdigris);transform:translateY(-3px);}
    .proj-card:not(.leeg):hover .proj-shot img{opacity:1;transform:scale(1.04);}
  }
  .proj-card a:focus-visible{outline:2px solid var(--verdigris);outline-offset:3px;}

  .proj-meer{margin-top:28px;}
  .proj-meer a{
    font-family:var(--font-mono);
    font-size:.9rem;
    color:var(--verdigris);
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color .2s ease;
  }
  .proj-meer a:hover{border-bottom-color:var(--verdigris);}

  @media (prefers-reduced-motion: reduce){
    .proj-card, .proj-shot img{transition:none;}
    .proj-card:not(.leeg):hover{transform:none;}
    .proj-card:not(.leeg):hover .proj-shot img{transform:none;}
  }


  /* Max, de mascotte, naast de projecttitel. Vierkant met de ronding van de
     app zelf, zodat het als merkteken leest en niet als losse foto. */
  .case-merk{
    display:flex;
    align-items:center;
    gap:16px;
    margin:10px 0 14px;
  }
  .case-merk img{
    width:64px;
    height:64px;
    border-radius:14px;
    flex-shrink:0;
    border:1px solid var(--line);
  }
  .case-merk h3{margin:0;}
  @media (max-width:520px){
    .case-merk img{width:52px;height:52px;border-radius:12px;}
  }


  /* Mascottetegel op de projectkaart. De bron is vierkant met een oranje
     achtergrond; met cover zou hij bijgesneden worden tot een strook oog en
     neus. Dus contain, en het vak in dezelfde oranje als het app-icoon —
     dan leest het als één brede tegel in plaats van een plaatje op zwart. */
  .proj-shot.merk{ background:#ff4c00; }
  .proj-shot.merk img{
    object-fit:contain;
    object-position:center;
    opacity:1;
  }


  /* FoodPlug-tegel in de merkkleur van die site zelf. */
  .proj-shot.foodplug{ background:#d90009; }
  .proj-shot.foodplug img{ padding:14px; }


  /* Alle beelden staan onder de tekst, dus de tekstkolom pakt de volle breedte. */
  .case-link{ margin-top:22px; }
  .case-link a{
    font-family:var(--font-mono);
    font-size:.9rem;
    color:var(--verdigris);
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color .2s ease;
  }
  .case-link a:hover{ border-bottom-color:var(--verdigris); }
  .case-merk img[src*="foodplug"]{ background:#d90009; object-fit:contain; padding:5px; }


  /* Noot bij een demolink die op een tijdelijke omgeving draait. */
  .case-link-noot{
    margin-left:10px;
    font-family:var(--font-mono);
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--paper-dim);
  }
  /* Cases uit JSON staan onder elkaar met ruimte ertussen. */
  [data-cases] > .case + .case{ margin-top:20px; }

  /* Foto's bij een case (geen telefoonschermen): gelijke tegels naast elkaar. */
  .case-fotos{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    align-content:start;
  }
  .case-fotos img{
    width:100%;
    height:150px;
    object-fit:cover;
    border-radius:4px;
    border:1px solid var(--line);
    display:block;
  }
  @media (max-width:900px){ .case-fotos img{height:110px;} }

  .terug{margin-bottom:28px;}
  .terug a{
    font-family:var(--font-mono);
    font-size:.85rem;
    color:var(--paper-dim);
    text-decoration:none;
    transition:color .2s ease;
  }
  .terug a:hover{color:var(--verdigris);}

  .case-link-noot{
    margin-left:10px;
    font-family:var(--font-mono);
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--paper-dim);
  }

  /* Brede schermafdrukken van een site: onder elkaar, volle breedte. */
  .case-screens{
    display:grid;
    gap:14px;
    align-content:start;
  }
  .case-screens img{
    width:100%;
    height:auto;
    display:block;
    border:1px solid var(--line);
    border-radius:4px;
  }
  /* Laatste is de mobiele weergave: smaller en gecentreerd. */
  .case-screens img:last-child{
    width:min(58%,240px);
    justify-self:center;
  }
  /* Tegel die volledig gevuld wordt door een schermafdruk. */
  .proj-shot .vullend{
    object-fit:cover;
    object-position:top center;
    padding:0;
    opacity:1;
  }

  /* ---------- GALERIJ ----------
     Kleine tegels naast elkaar, klikken vergroot. Zo zie je in één blik wat
     er is, in plaats van één beeld tegelijk over de volle breedte. */
  .galerij{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
    gap:clamp(12px,1.4vw,18px);
    margin-top:clamp(28px,4vw,42px);
  }
  .galerij-tegel{
    display:block;
    padding:0;
    background:none;
    border:0;
    text-align:left;
    font:inherit;
    color:inherit;
    cursor:zoom-in;
  }
  .galerij-vak{
    display:block;
    /* Vaste verhouding: schermafdrukken en staande productfoto's staan zo
       toch in een nette rij, zonder dat één afwijkend formaat alles scheeftrekt. */
    aspect-ratio:4/3;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--ink);
    transition:border-color .2s ease;
  }
  .galerij-vak img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    /* Bovenkant vasthouden: daar zit bij een schermafdruk de kop, en dat is
       waaraan je hem herkent. */
    object-position:top center;
    transition:transform .3s cubic-bezier(.16,.8,.3,1);
  }
  .galerij-tegel:hover .galerij-vak{ border-color:var(--verdigris); }
  @media (hover:hover) and (pointer:fine){
    .galerij-tegel:hover .galerij-vak img{ transform:scale(1.04); }
  }
  .galerij-tegel:focus-visible{ outline:2px solid var(--verdigris); outline-offset:4px; border-radius:8px; }
  .galerij-naam{
    display:block;
    margin-top:9px;
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.04em;
    color:var(--paper-dim);
  }
  @media (prefers-reduced-motion: reduce){
    .galerij-vak img{ transition:none; }
    .galerij-tegel:hover .galerij-vak img{ transform:none; }
  }

  /* ---------- LICHTBAK ---------- */
  .lichtbak{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(16px,4vw,56px);
    background:rgba(6,6,6,.94);
    cursor:zoom-out;
  }
  /* De pagina eronder mag niet meescrollen terwijl de lichtbak open staat. */
  html.lichtbak-open{ overflow:hidden; }
  .lichtbak-fig{
    margin:0;
    max-width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    cursor:default;
  }
  .lichtbak-fig img{
    display:block;
    max-width:min(100%,1200px);
    max-height:78dvh;
    width:auto;
    height:auto;
    object-fit:contain;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--ink);
  }
  .lichtbak-bij{
    font-family:var(--font-mono);
    font-size:.76rem;
    letter-spacing:.04em;
    color:var(--paper-dim);
    text-align:center;
  }
  .lichtbak-sluit,
  .lichtbak-knop{
    /* Vast aan het scherm, niet aan de inhoud: bij een lang beeld scrolt de
       lichtbak en zouden ze anders mee naar boven verdwijnen. */
    position:fixed;
    width:46px; height:46px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(32,32,42,.88);
    border:1px solid var(--line);
    border-radius:3px;
    color:var(--paper);
    font-size:1rem;
    cursor:pointer;
    transition:border-color .2s ease, color .2s ease;
  }
  .lichtbak-sluit:hover,
  .lichtbak-knop:hover{ border-color:var(--verdigris); color:var(--verdigris); }
  .lichtbak-sluit:focus-visible,
  .lichtbak-knop:focus-visible{ outline:2px solid var(--verdigris); outline-offset:2px; }
  .lichtbak-sluit{ top:clamp(12px,2vw,24px); right:clamp(12px,2vw,24px); }
  .lichtbak-knop.vorige{ left:clamp(8px,2vw,24px); top:50%; transform:translateY(-50%); }
  .lichtbak-knop.volgende{ right:clamp(8px,2vw,24px); top:50%; transform:translateY(-50%); }

  /* Hoger dan breed: op ware grootte tonen en laten scrollen. */
  .lichtbak.lang{ align-items:flex-start; overflow-y:auto; }
  .lichtbak.lang .lichtbak-fig img{ max-height:none; }

  @media (max-width:620px){
    /* Met minmax(168px) wordt het hier één kolom en staan tien tegels op een
       rij van boven naar beneden. Twee naast elkaar scrollt een stuk korter;
       klikken vergroot ze toch. */
    .galerij{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    /* Op een smal scherm zouden de pijlen over het beeld vallen; dus eronder. */
    .lichtbak{ align-items:flex-start; padding-top:72px; }
    .lichtbak-knop{ top:auto; bottom:20px; transform:none; }
    .lichtbak-fig img{ max-height:64dvh; }
  }

  /* ---------- CONTACTFORMULIER ----------
     Stond er eerst alleen een mailadres; een formulier haalt de drempel weg
     en de berichten komen in het beheer terecht in plaats van in een inbox
     waar ze tussen de rest verdwijnen. */
  .contact-form{ margin-top:36px; max-width:640px; }
  .contact-velden{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  .contact-breed{ grid-column:1 / -1; }
  .contact-form label{ display:grid; gap:7px; }
  .contact-form label span{
    font-family:var(--font-mono);
    font-size:.74rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--paper-dim);
  }
  .contact-form input,
  .contact-form textarea,
  .contact-form select{
    font:inherit;
    font-size:.95rem;
    color:var(--paper);
    background:var(--ink-soft);
    border:1px solid var(--line);
    border-radius:4px;
    padding:11px 13px;
    width:100%;
    transition:border-color .2s ease;
  }
  .contact-form textarea{ resize:vertical; line-height:1.55; }
  .contact-form input:hover,
  .contact-form textarea:hover,
  .contact-form select:hover{ border-color:var(--paper-dim); }
  .contact-form input:focus,
  .contact-form textarea:focus,
  .contact-form select:focus{
    outline:2px solid var(--verdigris);
    outline-offset:-1px;
    border-color:var(--verdigris);
  }
  .contact-knop{
    margin-top:20px;
    font:inherit;
    font-family:var(--font-mono);
    font-size:.86rem;
    letter-spacing:.04em;
    padding:12px 26px;
    color:var(--ink);
    background:var(--verdigris);
    border:1px solid var(--verdigris);
    border-radius:3px;
    cursor:pointer;
    transition:filter .2s ease;
  }
  .contact-knop:hover{ filter:brightness(1.12); }
  .contact-knop:focus-visible{ outline:2px solid var(--paper); outline-offset:2px; }

  .contact-goed,.contact-fout{
    margin:0 0 22px;
    padding:11px 15px;
    border-radius:4px;
    font-size:.92rem;
    border:1px solid;
  }
  .contact-goed{ color:#7ee0a8; border-color:#2c5f43; background:#12261c; }
  .contact-fout{ color:#f5a3a3; border-color:#5f2c2c; background:#261212; }

  /* De spamval moet voor mensen onzichtbaar zijn maar wel in de pagina staan;
     display:none slaan sommige bots juist over. */
  .contact-val{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }

  .contact-of{
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:.04em;
    color:var(--paper-dim);
  }

  @media (max-width:640px){
    .contact-velden{ grid-template-columns:1fr; }
  }

  /* Contact als eigen pagina: geen scheidingslijn bovenaan (er staat geen
     sectie boven), en meer lucht onder de kop dan in een doorlopende pagina. */
  .contact-pagina{ border-top:0; }
  .contact-pagina .section-head{ margin-bottom:8px; }

  /* ---------- INDRUKKEN ----------
     `scale` als losse eigenschap in plaats van transform: de pijlen van de
     lichtbak staan al met transform verticaal gecentreerd, en die mag een
     indruk niet overschrijven. */
  .contact-knop,
  .lichtbak-sluit,
  .lichtbak-knop{ transition-property:filter, border-color, color, scale; }
  .contact-knop,
  .lichtbak-sluit,
  .lichtbak-knop{ transition-duration:.2s, .2s, .2s, .12s; }
  .contact-knop:active,
  .lichtbak-sluit:active,
  .lichtbak-knop:active{ scale:.95; }

  /* Vegen in de lichtbak: horizontaal is voor ons, verticaal blijft scrollen
     (een lange bestelpagina moet je nog altijd kunnen doorlopen). */
  .lichtbak-fig img{ touch-action:pan-y; }

  @media (prefers-reduced-motion: reduce){
    .btn:active,
    .contact-knop:active,
    .lichtbak-sluit:active,
    .lichtbak-knop:active{ transform:none; scale:none; }
  }

  /* ---------- VOORBEELD UIT HET BEHEER ----------
     Onderaan in plaats van bovenaan: bovenaan staat de vaste kopbalk van de
     site al, en daar zou dit onder verdwijnen. */
  .voorbeeld-balk{
    position:fixed; left:50%; bottom:18px; z-index:90;
    transform:translateX(-50%);
    max-width:calc(100% - 32px);
    padding:10px 18px;
    font-family:var(--font-mono); font-size:.8rem; letter-spacing:.02em;
    color:var(--ink); background:var(--verdigris);
    border-radius:99px;
    box-shadow:0 8px 30px rgba(0,0,0,.45);
    text-align:center;
  }

  /* ==========================================================================
     GSM EN TABLET
     Gemeten op 360, 768 en 1024 px breed. Horizontaal liep niets uit het
     scherm; wat hieronder staat, zijn de kleinere bevindingen.
     ========================================================================== */

  /* Kleine hoofdletterlabels waren 10,9–11,8px. Twaalf is het minimum dat
     op een telefoon nog prettig leest; het ontwerp blijft verder hetzelfde. */
  .proj-tag,
  .case .tag,
  .case-sub,
  .case-stack dt,
  .contact-form label span,
  .galerij-naam,
  .case-shot-naam,
  .case-link-noot{ font-size:.75rem; }

  /* Onder 16px zoomt een iPhone of iPad vanzelf in zodra je in een veld
     tikt, en daarna niet meer terug. */
  .contact-form input,
  .contact-form textarea,
  .contact-form select{ font-size:1rem; }

  /* ---------- aanraakschermen: groot genoeg om te raken ----------
     (pointer: coarse) = een vinger. Met een muis blijft alles zoals het was. */
  @media (pointer: coarse){
    /* Op een tablet staat het gewone menu, maar de links waren 18px hoog. */
    nav a{ display:inline-flex; align-items:center; min-height:44px; }
    .nav-cta{ min-height:44px; }

    /* Losse links die geen knop zijn, maar wel het enige wat je daar kan
       doen: terug naar het overzicht, naar alle projecten, naar de site. */
    .terug a,
    .proj-meer a,
    .case-link a{ display:inline-flex; align-items:center; min-height:44px; }

    /* De knooppunten van de rail waren 30px. Groter grijpvlak, zelfde stip. */
    .pipe-node{ width:44px; height:44px; }
  }
  @media (pointer: coarse) and (max-width:640px){
    /* In het uitgeklapte menu staan de links al op 57px hoog. */
    nav a{ display:block; min-height:0; }
  }

  /* ---------- CONTACTPAGINA: TWEE KOLOMMEN ----------
     Eén smalle kolom van 640px op een breed scherm liet rechts een lege halve
     pagina, en de kop viel op twee ver uit elkaar staande regels. Nu links de
     uitleg en het e-mailadres, rechts het formulier in een eigen paneel. */
  .contact-indeling{
    display:grid;
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:clamp(40px,6vw,96px);
    align-items:start;
  }
  .contact-pagina .section-head{
    max-width:none;
    margin-bottom:0;
    /* Blijft in beeld terwijl je door het formulier gaat. */
    position:sticky;
    top:120px;
  }
  .contact-pagina h2{
    max-width:none;
    font-size:clamp(2.2rem,4.4vw,3.6rem);
    line-height:1.08;
  }
  .contact-pagina .section-lead{ font-size:1.12rem; max-width:40ch; }

  .contact-direct{
    margin-top:44px;
    padding-top:28px;
    border-top:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }

  .contact-paneel{
    background:var(--ink-soft);
    border:1px solid var(--line);
    border-radius:6px;
    padding:clamp(24px,3.4vw,48px);
  }
  .contact-paneel .contact-form{ margin-top:0; max-width:none; }
  .contact-paneel .contact-velden{ gap:22px; }
  /* Velden donkerder dan het paneel, zodat ze erin opvallen. */
  .contact-paneel .contact-form input,
  .contact-paneel .contact-form select,
  .contact-paneel .contact-form textarea{
    background:var(--ink);
    padding:15px 16px;
  }
  .contact-paneel .contact-form textarea{ min-height:200px; }
  .contact-paneel .contact-knop{
    margin-top:28px;
    padding:16px 36px;
    font-size:.92rem;
  }

  @media (max-width:900px){
    .contact-indeling{ grid-template-columns:1fr; gap:40px; }
    .contact-pagina .section-head{ position:static; }
    .contact-direct{ margin-top:28px; padding-top:20px; }
  }
  @media (max-width:640px){
    .contact-paneel{ padding:20px; }
    .contact-paneel .contact-knop{ width:100%; }
  }

  /* De grotere knooppunten staken op een liggende tablet 2px buiten het
     scherm: de rail stond 8px van de rand. Iets verder naar binnen. */
  @media (pointer: coarse) and (min-width:960px){
    .pipe-rail{ right:14px; }
  }

  /* Titel boven het formulier in het vak op de contactpagina. */
  .contact-paneel-titel{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(1.35rem,2vw,1.7rem);
    line-height:1.2;
    margin:0 0 28px;
    padding-bottom:20px;
    border-bottom:1px solid var(--line, rgba(255,255,255,.08));
  }

  /* Het logo is een link naar de homepagina. */
  .logo{ text-decoration:none; color:inherit; display:inline-flex; align-items:center; }
  .logo:focus-visible{ outline:2px solid var(--copper); outline-offset:4px; border-radius:2px; }
  @media (pointer: coarse){ .logo{ min-height:44px; } }

  /* ---------- OFFERTEPAGINA ----------
     Zelfde twee kolommen als /contact. Links drie stappen, rechts een langer
     formulier in groepen. */
  .offerte-stappen{ list-style:none; margin:36px 0 0; padding:0; counter-reset:stap; }
  .offerte-stappen li{
    counter-increment:stap;
    display:grid; grid-template-columns:40px 1fr; gap:12px;
    padding:16px 0;
    border-top:1px solid var(--line);
    color:var(--paper-dim); font-size:.95rem; line-height:1.5;
  }
  .offerte-stappen li:last-child{ border-bottom:1px solid var(--line); }
  .offerte-stappen li::before{
    content:"0" counter(stap);
    font-family:var(--font-mono); font-size:.78rem; color:var(--verdigris); padding-top:3px;
  }
  .offerte-stappen strong{ display:block; color:var(--paper); font-weight:600; margin-bottom:2px; }

  .contact-wissel{ margin-top:26px; color:var(--paper-dim); font-size:.95rem; }
  .contact-wissel a{
    color:var(--verdigris); text-decoration:none;
    border-bottom:1px solid transparent; transition:border-color .2s ease;
  }
  .contact-wissel a:hover{ border-bottom-color:var(--verdigris); }

  .offerte-groep{
    font-family:var(--font-display); font-weight:600; font-size:1.05rem;
    color:var(--paper); margin:0;
  }
  .offerte-groep.volgende{ margin-top:14px; padding-top:26px; border-top:1px solid var(--line); }

  .contact-form label span small,
  .offerte-keuzes legend small{
    text-transform:none; letter-spacing:0; font-size:.72rem; opacity:.75; margin-left:6px;
  }

  .offerte-keuzes{ border:0; margin:0; padding:0; min-width:0; }
  .offerte-keuzes legend{
    padding:0; margin-bottom:10px;
    font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em;
    text-transform:uppercase; color:var(--paper-dim);
  }
  .offerte-vinkjes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; }
  .contact-form .offerte-vinkje{
    display:flex; align-items:center; gap:12px;
    padding:13px 15px; min-height:48px;
    background:var(--ink); border:1px solid var(--line); border-radius:4px;
    cursor:pointer; transition:border-color .2s ease, background-color .2s ease;
  }
  .contact-form .offerte-vinkje span{
    font-family:var(--font-body); font-size:.95rem; letter-spacing:0;
    text-transform:none; color:var(--paper);
  }
  .contact-form .offerte-vinkje input[type="checkbox"]{
    width:18px; height:18px; padding:0; margin:0; flex:none;
    accent-color:var(--copper); background:none; border:0;
  }
  .contact-form .offerte-vinkje:has(input:checked){
    border-color:var(--verdigris); background:rgba(154, 98, 245, .14);
  }
  .contact-form .offerte-vinkje:has(input:focus-visible){ outline:2px solid var(--verdigris); outline-offset:-1px; }
  @media (hover: hover) and (pointer: fine){
    .contact-form .offerte-vinkje:hover{ border-color:var(--paper-dim); }
  }
  .contact-form input[type="date"]{ color-scheme:dark; }
  .contact-form input::placeholder,
  .contact-form textarea::placeholder{ color:var(--paper-dim); opacity:.6; }

  /* ---------- KNOPPEN IN SPACE GROTESK ----------
     Eerst in IBM Plex Mono; die blijft voor kleine labels. Een knop in de
     letter van de titels en het logo leest meer als iets om op te klikken.
     Space Grotesk is smaller dan de mono, dus iets groter gezet. */
  .nav-cta,
  .btn,
  .contact-knop,
  .contact-paneel .contact-knop{
    font-family:var(--font-display);
    font-weight:600;
    letter-spacing:0;
  }
  .nav-cta{ font-size:.9rem; }
  .btn{ font-size:1rem; }
  .contact-knop{ font-size:1rem; }
  .contact-paneel .contact-knop{ font-size:1.05rem; }

  /* Contactblok op de homepage: eerst het e-mailadres, daaronder de knoppen. */
  .contact-mailrij{ margin-top:32px; }
  .contact-mailrij + .contact-knoppen{ margin-top:20px; }

  /* Contactpagina: wie een nieuw project heeft, wordt hier meteen naar de
     offerte gestuurd. Een eigen blok, want een linkje onderaan werd gemist. */
  .contact-offerteblok{
    margin-top:36px;
    padding:24px;
    background:var(--ink-soft);
    border:1px solid var(--line);
    border-left:3px solid var(--copper);
    border-radius:6px;
  }
  .contact-offerteblok strong{
    display:block;
    font-family:var(--font-display); font-weight:600; font-size:1.2rem;
    color:var(--paper);
  }
  .contact-offerteblok p{ margin:6px 0 18px; color:var(--paper-dim); font-size:.95rem; line-height:1.5; }
  .contact-offerteblok + .contact-direct{ margin-top:32px; }
  @media (max-width:640px){
    .contact-offerteblok{ padding:20px; }
    .contact-offerteblok .btn{ width:100%; justify-content:center; }
  }

  /* ---------- PAGINAKOPPEN ALS H1 ----------
     Elke pagina heeft één h1, zodat zoekmachines zien waar ze over gaat.
     Op de subpagina's was dat een h2 (op de projectpagina een h3); ze zien er
     precies zo uit als voorheen. De grote h1-stijl blijft voor de hero. */
  .section-head h1{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(1.9rem,4vw,2.8rem);
    letter-spacing:-.01em;
    line-height:inherit;
    max-width:none;
  }
  .contact-pagina .section-head h1{ font-size:clamp(2.2rem,4.4vw,3.6rem); line-height:1.08; }
  .case-merk h1{
    font-family:var(--font-display);
    font-size:clamp(1.8rem,3.4vw,2.6rem);
    font-weight:700;
    letter-spacing:-.02em;
    line-height:inherit;
    max-width:none;
    margin:0;
  }

  /* ---------- TAALKEUZE ----------
     NL · FR · EN naast de offerteknop. Op een telefoon staat hij onderaan
     het uitklapmenu, want daar is de kopbalk te smal. */
  .kop-rechts{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
  .taalkeuze{
    display:flex; align-items:center; gap:2px;
    font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em;
  }
  .taalkeuze a{
    color:var(--paper-dim); text-decoration:none;
    padding:6px 7px; border-radius:3px;
    transition:color .2s ease, background-color .2s ease;
  }
  .taalkeuze a:hover{ color:var(--paper); }
  .taalkeuze a[aria-current="true"]{ color:var(--paper); background:var(--ink-soft); }
  .taalkeuze-gsm{ display:none; }

  /* Tussen tablet en laptop is Frans en Engels langer dan Nederlands: iets
     minder ruimte tussen de menulinks, zodat de kopbalk niet overloopt. */
  @media (min-width:641px) and (max-width:1100px){
    nav ul{ gap:20px; }
    nav a{ font-size:.86rem; }
    header{ gap:16px; }
  }
  @media (min-width:641px) and (max-width:820px){
    .nav-cta{ padding-left:12px; padding-right:12px; }
    .kop-rechts{ gap:8px; }
  }
  @media (pointer: coarse) and (min-width:641px){
    .taalkeuze a{ display:inline-flex; align-items:center; min-height:44px; min-width:36px; justify-content:center; }
  }

  @media (max-width:640px){
    .kop-rechts{ display:none; }
    nav .taalkeuze-gsm{ display:flex; gap:8px; padding-top:18px; }
    nav .taalkeuze-gsm a{
      display:inline-flex; align-items:center; justify-content:center;
      min-width:48px; min-height:44px; padding:0 12px;
      font-size:.85rem; border:1px solid var(--line); border-radius:4px;
    }
    nav .taalkeuze-gsm a[aria-current="true"]{ border-color:var(--verdigris); background:var(--ink-soft); }
  }

  /* Menulinks breken nooit over twee regels ("À propos" deed dat op 680px).
     Tussen 641 en 760px, net boven het hamburgermenu, wordt het wat
     compacter: kleinere afstanden en iets kleinere letters, zodat logo,
     menu, taalkeuze en offerteknop in het Frans en Engels op één rij passen. */
  nav a, .nav-cta{ white-space:nowrap; }
  @media (min-width:641px) and (max-width:760px){
    header{ gap:10px; }
    nav ul{ gap:12px; }
    nav a{ font-size:.8rem; }
    .kop-rechts{ gap:6px; }
    .taalkeuze a{ padding:6px 4px; }
    .nav-cta{ font-size:.8rem; padding-left:10px; padding-right:10px; }
    .logo{ font-size:1.05rem; }
  }

  /* ---------- OFFERTEKNOP IN HET GSM-MENU ----------
     Onder 640px verdwijnt de offerteknop uit de kopbalk. In het uitklapmenu
     staat hij als volle knop onder de links, boven de taalkeuze. */
  .nav-cta-gsm{ display:none; }
  @media (max-width:640px){
    nav a.nav-cta-gsm{
      display:flex; align-items:center; justify-content:center;
      margin-top:14px; min-height:48px; padding:12px 16px;
      font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:0;
      color:var(--ink); background:var(--copper-bright);
      border:0; border-radius:4px; text-decoration:none;
    }
    nav a.nav-cta-gsm:hover, nav a.nav-cta-gsm:focus-visible{ color:var(--ink); background:#cbaafb; }
  }

  /* ---------- HERO-KNOPPEN OP DE GSM ----------
     Op een smal scherm vullen de twee knoppen in de hero de volle breedte,
     onder elkaar. Een grote tapzone, en ze staan netjes op één lijn. */
  @media (max-width:640px){
    .hero-actions{ flex-direction:column; align-items:stretch; }
    .hero-actions .btn{ display:flex; width:100%; justify-content:center; text-align:center; }
  }

  /* ---------- HERO HOGER OP DE GSM ----------
     Verticaal centreren liet op een telefoon veel lege ruimte boven de
     titel. Daar begint de tekst nu net onder de kopbalk. */
  @media (max-width:640px){
    .hero{ justify-content:flex-start; padding-top:144px; min-height:0; padding-bottom:228px; }
    /* De pixels liggen niet meer vaag achter de tekst (dat maakte de tekst
       troebel en het beeld onleesbaar), maar als een eigen band onder de
       knoppen: de tekst staat scherp op zwart, en het artefact is echt te
       zien. Boven en onder vervaagt de band in de achtergrond. */
    .hero-art{
      top:auto;
      bottom:8px;
      height:210px;
      -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
      mask-image:linear-gradient(180deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
    }
  }

  /* ---------- SCHEIDINGEN OP DE HOMEPAGE ----------
     De volgorde is nu: hero, werk, beloftes, diensten, over ons, contact.
     Twee dunne paarse lijnen, niet meer: één na het werk en één voor de
     afsluiter. Meer lijnen maken van de pagina een formulier. */
  .projects + .beloftes,
  .about + .contact{
    border-top:1px solid color-mix(in srgb, var(--copper-bright) 55%, transparent);
  }
  .projects{ padding-bottom:80px; }
  .beloftes{ padding-top:80px; }
  .about{ padding-bottom:80px; }
  .about + .contact{ padding-top:80px; }

  @media (max-width:640px){
    .projects{ padding-bottom:56px; }
    .beloftes{ padding-top:56px; }
    .about{ padding-bottom:56px; }
    .about + .contact{ padding-top:56px; }
  }

  /* ---------- GROTERE CONTACTKNOPPEN ----------
     De twee knoppen onder het e-mailadres op de homepage waren klein naast
     de rest. Iets groter overal; op een telefoon de volle breedte, onder
     elkaar, net als de knoppen in de hero. */
  .contact-knoppen .btn{ padding:18px 34px; font-size:1.05rem; }
  @media (max-width:640px){
    .contact-knoppen{ display:flex; flex-direction:column; align-items:stretch; gap:12px; }
    .contact-knoppen .btn{ display:flex; width:100%; justify-content:center; text-align:center; }
  }

  /* ================= HOMEPAGE HERZIEN =================
     Drie secties opnieuw opgebouwd. Vormregels die hier gelden:
     accentkleur is altijd --copper-bright, vlakken krijgen 6px ronding en
     knoppen houden hun 3px, en elke sectie heeft een andere opbouw dan de
     vorige. Beweging zit in assets/site.js, niet hier. */

  /* ---------- DIENSTEN: index met meelopende kop ---------- */
  .diensten-indeling{
    display:grid;
    grid-template-columns:minmax(260px, 1fr) minmax(0, 1.4fr);
    gap:clamp(40px, 7vw, 120px);
    align-items:start;
  }
  .diensten-kop{
    position:sticky;
    top:120px;
  }
  .diensten-kop .section-lead{ max-width:34ch; }
  .diensten-rijen{
    list-style:none;
    margin:0;
    padding:0;
    border-top:1px solid var(--line);
  }
  .dienst-rij{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:clamp(18px, 3vw, 40px);
    align-items:start;
    padding:clamp(28px, 4vw, 44px) 0 clamp(28px, 4vw, 44px) 18px;
    border-bottom:1px solid var(--line);
    border-left:2px solid transparent;
    transition:border-color .45s ease, opacity .45s ease;
  }
  .dienst-num{
    font-family:var(--font-mono);
    font-size:1.05rem;
    color:var(--paper-dim);
    line-height:1.4;
    transition:color .45s ease;
  }
  .dienst-tekst h3{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(1.5rem, 2.6vw, 2.1rem);
    letter-spacing:-.01em;
    margin-bottom:12px;
  }
  .dienst-tekst p{
    color:var(--paper-dim);
    font-size:1rem;
    max-width:48ch;
  }
  /* De regel in het midden van het scherm krijgt de aandacht; de rest zakt
     weg. JS zet de klasse (zie site.js); zonder JS staat alles gewoon aan. */
  .js .diensten-rijen.leest .dienst-rij{ opacity:.45; }
  .js .diensten-rijen.leest .dienst-rij.actief{ opacity:1; }
  .dienst-rij.actief{ border-left-color:var(--copper-bright); }
  .dienst-rij.actief .dienst-num{ color:var(--copper-bright); }

  @media (max-width:860px){
    .diensten-indeling{ grid-template-columns:1fr; gap:36px; }
    .diensten-kop{ position:static; }
    .dienst-rij{ padding-left:14px; }
  }

  /* ---------- OVER ONS: uitspraak met twee kanten ---------- */
  .over-uitspraak{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(2rem, 5.2vw, 3.6rem);
    line-height:1.05;
    letter-spacing:-.02em;
    max-width:16ch;
  }
  .over-lead{
    margin-top:22px;
    color:var(--paper-dim);
    font-size:1.05rem;
    max-width:46ch;
  }
  .over-kanten{
    margin-top:clamp(48px, 7vw, 96px);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(32px, 6vw, 88px);
  }
  /* Een haarlijn tussen de twee kanten in plaats van twee kaders: de tekst
     hoort bij elkaar, het is één pijplijn met twee kanten. */
  .over-kanten > .over-kant + .over-kant{
    border-left:1px solid var(--line);
    padding-left:clamp(32px, 6vw, 88px);
  }
  .over-tag{
    display:block;
    font-family:var(--font-mono);
    font-size:.74rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--verdigris);
  }
  .over-kant h3{
    font-family:var(--font-display);
    font-weight:600;
    font-size:1.5rem;
    margin:14px 0 14px;
  }
  .over-kant p{ color:var(--paper-dim); font-size:1rem; max-width:44ch; }

  @media (max-width:860px){
    .over-kanten{ grid-template-columns:1fr; gap:36px; }
    .over-kanten > .over-kant + .over-kant{
      border-left:0;
      border-top:1px solid var(--line);
      padding-left:0;
      padding-top:36px;
    }
  }

  /* ---------- WERK: uitgelicht, dan de rest, dan de vrije plek ----------
     Het eerste project over de volle breedte, de andere in twee kolommen
     eronder, en onderaan een smalle strook voor het volgende project. Deze
     opbouw sluit bij elk aantal projecten: een raster met rij-overspanning
     liet een gat vallen zodra de ene kolom langer werd dan de andere. */
  .werk-blok{
    padding:0 var(--edge);
    display:flex;
    flex-direction:column;
    gap:clamp(20px, 3vw, 40px);
  }
  .wrap .werk-blok{ padding:0; }
  /* Even grote kaarten naast elkaar; bij meer projecten lopen ze door
     naar een volgende rij. */
  .werk-rij{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:clamp(20px, 3vw, 40px);
    align-items:start;
  }
  .werk-kaart a{ display:block; text-decoration:none; color:inherit; }
  .werk-beeld{
    display:block;
    aspect-ratio:4 / 3;
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
    background:var(--ink-soft);
    transition:border-color .3s ease;
  }
  .werk-beeld img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:10%;
  }
  .werk-beeld img.vullend{ object-fit:cover; padding:0; }
  .werk-kaart a{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
  @media (hover:hover) and (pointer:fine){
    .werk-kaart a:hover .werk-beeld{ border-color:var(--verdigris); }
    .werk-kaart a:hover{ transform:translateY(-3px); }
  }
  @media (prefers-reduced-motion: reduce){
    .werk-kaart a{ transition:none; }
    .werk-kaart a:hover{ transform:none; }
  }
  .werk-tag{
    display:block;
    margin-top:20px;
    font-family:var(--font-mono);
    font-size:.74rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--verdigris);
  }
  .werk-titel{
    display:block;
    margin-top:10px;
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(1.25rem, 1.6vw, 1.5rem);
  }
  .werk-tekst{
    display:block;
    margin-top:10px;
    color:var(--paper-dim);
    font-size:.98rem;
    max-width:52ch;
  }
  .proj-meer{ margin-top:clamp(32px, 5vw, 56px); }

  @media (max-width:640px){
    .werk-rij{ grid-template-columns:1fr; }
  }

  @media (prefers-reduced-motion: reduce){
    .werk-beeld img{ transition:none; }
    .dienst-rij, .dienst-num{ transition:none; }
  }

  /* ================= VORM GELIJKGETROKKEN =================
     Er liepen zes verschillende hoekafrondingen door elkaar (2, 3, 4, 5, 12
     en 14px). Vanaf hier zijn het er twee, met een duidelijke regel:
     knoppen en kleine labels 3px, alles wat een vlak is 6px. */
  .proj-card,
  .case-shot img,
  .case-shot:focus-visible,
  .galerij-tegel,
  .galerij-tegel img,
  .contact-paneel,
  .contact-offerteblok,
  .contact-form input,
  .contact-form textarea,
  .contact-form select,
  .offerte-vinkje{
    border-radius:6px;
  }

  /* Rust tussen de pagina's: dezelfde ademruimte onder een paginakop als op
     de homepage, zodat /projecten, /contact en /offerte niet strakker
     ogen dan de startpagina. */
  /* Binnen een .wrap heeft het raster de marge van de wrap al. */
  .wrap .werk-grid{ padding:0; }

  .section-head{ margin-bottom:clamp(40px, 6vw, 72px); }
  .section-head h1{ max-width:18ch; }
  .section-head .section-lead{ max-width:54ch; }

  /* Op een projectpagina stond de inleiding tegen de titel aan. */
  .case-lead{ margin-top:18px; }

  /* ================= GROEIENDE HAARLIJN =================
     De lijn tussen de twee kanten in "over ons" is geen rand meer maar een
     eigen laagje, zodat GSAP hem kan laten groeien terwijl je leest. Zonder
     JS of met beperkte beweging staat hij gewoon volledig getekend. */
  @media (min-width:861px){
    .over-kanten > .over-kant + .over-kant{
      border-left:0;
      position:relative;
    }
    .over-kanten > .over-kant + .over-kant::before{
      content:'';
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:1px;
      background:var(--line);
      transform:scaleY(var(--lijn, 1));
      transform-origin:top;
    }
  }
  @media (prefers-reduced-motion: reduce){
    .over-kanten > .over-kant + .over-kant{ --lijn:1; }
  }

  /* ================= KOPBALK EN HEROHOOGTE =================
     De balk was 85px hoog en at zo een tiende van het scherm op; 72px is
     genoeg. En de hero rekent in dvh in plaats van vh: met vh verspringt
     hij op een telefoon zodra de adresbalk in- of uitschuift. */
  header{ padding-top:16px; padding-bottom:16px; }
  .hero{ min-height:100dvh; }
  @supports not (height: 100dvh){
    .hero{ min-height:100vh; }
  }
  @media (max-width:640px){
    .hero{ min-height:0; }
  }

  /* ================= ONDERDELEN EN BELOFTES =================
     Twee toevoegingen naar het voorbeeld van studio's die hetzelfde werk
     doen: onder elke dienst waar hij uit bestaat, en onder het werk vier
     dingen die een klant zeker weet. Geen kaders, alleen haarlijnen. */
  .dienst-punten{
    list-style:none;
    margin:18px 0 0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:8px 20px;
    font-family:var(--font-mono);
    font-size:.74rem;
    letter-spacing:.04em;
    color:var(--paper-dim);
  }
  .dienst-rij.actief .dienst-punten{ color:var(--paper); }

  .beloftes-kop{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing:-.01em;
    margin-bottom:clamp(28px, 4vw, 44px);
  }
  .beloftes-rij{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:clamp(20px, 3vw, 40px);
  }
  .belofte{
    border-top:1px solid var(--line);
    padding-top:20px;
  }
  .belofte h3{
    font-family:var(--font-display);
    font-weight:600;
    font-size:1.05rem;
    margin-bottom:10px;
  }
  .belofte p{
    color:var(--paper-dim);
    font-size:.93rem;
    line-height:1.55;
  }

  @media (max-width:980px){
    .beloftes-rij{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width:560px){
    .beloftes-rij{ grid-template-columns:1fr; gap:0; }
    .belofte{ padding:18px 0; }
  }

  /* ================= ANKERS ONDER DE KOPBALK =================
     De kopbalk staat vast bovenaan, dus een sprong naar #diensten of
     #contact zette de titel eronder. Met scroll-padding houdt de browser
     daar rekening mee, ook bij toetsenbordnavigatie. */
  html{ scroll-padding-top:96px; }
  @media (max-width:640px){
    html{ scroll-padding-top:84px; }
  }




  /* ================= INDELING NAAR IF.DEV =================
     De opbouw van iliasfransen.dev, met onze eigen kleuren en letters.
     Wat we overnemen is de indeling, niet het uiterlijk van die site:

       kopbalk (doorzichtig bovenaan, vlak zodra je scrollt)
       held      : tekstkolom links, deeltjesveld als achtergrond
       cijfers   : drie vakken tussen twee lijnen
       lint      : doorlopende strook met waar we mee werken
       secties   : elk met een lijn erboven, kop links, index rechts
       kaarten   : beeld, nummer, titel, tekst, plaatjes, actie

     Alles gaat via `max(5%, 20px)` zijmarge, net als daar, en elke sectie
     begint met een haarlijn in plaats van met lucht. De oude secties
     (.projects, .about, .services) blijven staan voor de andere pagina's
     tot die ook om zijn; deze klassen staan ernaast en raken ze niet. */

  :root{
    /* Vlakken en randen bovenop de bestaande kleuren. --line blijft de
       dichte lijn van de oude secties; --rand is de doorschijnende lijn
       van deze indeling, die op elk vlak dezelfde sterkte houdt. */
    --vlak:#20202a;
    --kaart:#1e1e27;
    --rand:rgba(255,255,255,.11);
    --oppervlak:rgba(255,255,255,.045);
    --r-kaart:16px;
    --r-pil:999px;
    --kant:max(5%, 20px);
  }

  /* ---- Kopbalk: doorzichtig boven de held, vlak zodra je scrollt ---- */
  body:has(.held) header#siteHeader{
    background:transparent;
    border-bottom-color:transparent;
    backdrop-filter:none;
    transition:background-color .25s ease, border-color .25s ease;
  }
  body:has(.held) header#siteHeader.scrolled{
    background:rgba(27,27,35,.9);
    border-bottom-color:var(--rand);
    backdrop-filter:blur(20px);
  }
  /* De knop in de kopbalk en alle knoppen eronder worden pillen: in deze
     indeling is dat de enige ronding naast de 16px van de kaarten. */
  .nav-cta, .nav-cta-gsm, .btn{ border-radius:var(--r-pil); }

  /* ---- De held ----------------------------------------------------- */
  .held{
    position:relative;
    overflow:hidden;
    min-height:min(82dvh, 740px);
    display:flex;
    align-items:center;
    /* De kopbalk staat vast bovenaan (77px op een telefoon), dus de held
       houdt daar ruimte voor vrij; anders kruipt het label eronder. */
    padding-block:clamp(100px, 11vw, 120px) clamp(48px, 6vw, 60px);
    padding-inline:var(--kant);
  }
  /* Het deeltjesveld vult nu de hele held in plaats van een eigen kader
     rechts te krijgen. Daarmee is de vraag "wat doen we met die pixels"
     beantwoord: het is de achtergrond, niet een tweede onderwerp.
     De klasse .hero-art blijft staan, hero.js zoekt daarop. */
  .held .hero-art{
    position:absolute;
    inset:0;
    z-index:0;
    display:block;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    opacity:.5;
    -webkit-mask-image:none;
    mask-image:none;
    aspect-ratio:auto;
  }
  .held .hero-art canvas{ display:block; width:100%; height:100%; }
  /* De wassing eroverheen geeft de held zijn diepte en houdt de tekst
     leesbaar waar de deeltjes dicht op elkaar staan. */
  .held-gloed{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      radial-gradient(58% 78% at 62% 42%, rgba(154,98,245,.22) 0%, transparent 68%),
      radial-gradient(70% 90% at 18% 88%, rgba(30,24,52,.55) 0%, transparent 62%),
      linear-gradient(93deg, var(--ink) 6%, rgba(27,27,35,.55) 52%, transparent 100%);
  }
  .held-binnen{ position:relative; z-index:2; width:100%; }
  .held-kolom{ max-width:680px; }

  .held-label{
    display:inline-flex;
    align-items:center;
    gap:14px;
    font-family:var(--font-mono);
    font-size:12.5px;
    font-weight:500;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--copper-bright);
  }
  .held-label::before{
    content:'';
    width:34px;
    height:2px;
    background:var(--copper-bright);
    flex:none;
  }
  .held h1{
    margin:22px 0 0;
    font-family:var(--font-display);
    font-size:clamp(42px, 6.4vw, 82px);
    font-weight:600;
    line-height:1.02;
    letter-spacing:-.018em;
  }
  /* Geen cursief: van Space Grotesk hebben we alleen rechte sneden in huis.
     Het accentwoord krijgt daarom kleur en gewicht in plaats van schuinte. */
  .held h1 em, .sec-kop h2 em, .klaar h2 em{
    font-style:normal;
    font-weight:700;
    color:var(--copper-bright);
  }
  .held-tekst{
    margin:26px 0 0;
    max-width:34em;
    font-size:17px;
    line-height:1.62;
    color:var(--paper-dim);
  }
  .held-knoppen{
    margin-top:36px;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }

  /* ---- Cijferbalk -------------------------------------------------- */
  .cijfers{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    background:var(--vlak);
    border-top:1px solid var(--rand);
    border-bottom:1px solid var(--rand);
    padding-inline:var(--kant);
  }
  .cijfer{ padding-block:22px; }
  .cijfer + .cijfer{
    border-left:1px solid var(--rand);
    padding-left:clamp(16px, 3vw, 34px);
  }
  .cijfer-num{
    font-family:var(--font-mono);
    font-weight:500;
    font-size:clamp(22px, 2.6vw, 36px);
    line-height:1.1;
    color:var(--copper-bright);
  }
  .cijfer-label{
    margin-top:4px;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--paper-dim);
  }
  @media (max-width:720px){
    .cijfers{ grid-template-columns:1fr; }
    .cijfer + .cijfer{
      border-left:0;
      border-top:1px solid var(--rand);
      padding-left:0;
    }
  }

  /* ---- Lint met waar we mee werken --------------------------------- */
  .lint{
    border-top:1px solid var(--rand);
    border-bottom:1px solid var(--rand);
    padding-block:16px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .lint-spoor{
    display:flex;
    width:max-content;
    /* transform in plaats van margin: draait op de kaart zonder de pagina
       per beeldje opnieuw te laten rekenen. */
    animation:lint-schuif 34s linear infinite;
  }
  .lint-groep{ display:flex; align-items:center; flex:none; }
  .lint-item{
    display:inline-flex;
    align-items:center;
    gap:26px;
    padding-inline:26px;
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:.1em;
    color:var(--paper-dim);
  }
  .lint-item::after{
    content:'/';
    color:var(--copper-bright);
    opacity:.55;
  }
  @keyframes lint-schuif{ to{ transform:translateX(-50%); } }
  @media (hover:hover) and (pointer:fine){
    .lint:hover .lint-spoor{ animation-play-state:paused; }
  }
  @media (prefers-reduced-motion: reduce){
    .lint-spoor{ animation:none; }
    /* Stilstaand lint: dan maar gewoon de eerste groep tonen. */
    .lint{ -webkit-mask-image:none; mask-image:none; }
  }

  /* ---- Secties ----------------------------------------------------- */
  .sec{
    padding-block:clamp(64px, 8vw, 100px);
    padding-inline:var(--kant);
    border-top:1px solid var(--rand);
  }
  .sec.vlak{ background:var(--vlak); }
  .sec-kop{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
  }
  .sec-kop h2{
    font-family:var(--font-display);
    font-size:clamp(30px, 4vw, 46px);
    font-weight:600;
    line-height:1.06;
    letter-spacing:-.015em;
  }
  .sec-num{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--paper-dim);
  }
  .sec-lead{
    margin-top:18px;
    max-width:62ch;
    font-size:17px;
    line-height:1.62;
    color:var(--paper-dim);
  }
  .sec-voet{ margin-top:38px; }

  /* ---- Projectkaarten ---------------------------------------------- */
  /* Drie vaste kolommen, geen auto-fit: bij auto-fit trok één kaart de
     volle breedte zodra er een rij niet vol raakte. */
  .kaarten{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
    margin-top:46px;
  }
  .kaart-p{
    position:relative;
    display:flex;
    flex-direction:column;
    text-decoration:none;
    color:inherit;
    background:var(--kaart);
    border:1px solid var(--rand);
    border-radius:var(--r-kaart);
    overflow:hidden;
    transition:transform .24s cubic-bezier(.23,1,.32,1), border-color .24s cubic-bezier(.23,1,.32,1);
  }
  .kaart-p:active{ transform:scale(.99); }
  .kaart-beeld{
    position:relative;
    aspect-ratio:16 / 10;
    overflow:hidden;
    background:var(--ink-soft);
  }
  .kaart-beeld img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    transition:transform .52s cubic-bezier(.23,1,.32,1);
  }
  /* Een tegel die geen beeldvullende foto is (een logo bijvoorbeeld) mag
     niet aangesneden worden. */
  .kaart-beeld img.pas{ object-fit:contain; padding:9%; }
  /* Onderaan dicht naar de kaartkleur, zodat de titel eronder niet tegen
     een harde rand aanloopt. */
  .kaart-beeld::after{
    content:'';
    position:absolute;
    inset:auto 0 0 0;
    height:55%;
    background:linear-gradient(to top, var(--kaart) 26%, rgba(30,30,39,.72) 58%, transparent 100%);
    pointer-events:none;
  }
  .kaart-num,
  .kaart-live{
    position:absolute;
    top:13px;
    z-index:2;
    font-family:var(--font-mono);
    color:var(--paper);
    border:1px solid var(--rand);
    border-radius:var(--r-pil);
    background:rgba(27,27,35,.62);
    backdrop-filter:blur(8px);
  }
  .kaart-num{
    left:14px;
    padding:4px 9px;
    font-size:11px;
    letter-spacing:.14em;
  }
  .kaart-live{
    right:14px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    font-size:10.5px;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .kaart-live::before{
    content:'';
    width:6px; height:6px;
    border-radius:50%;
    background:var(--copper-bright);
    box-shadow:0 0 0 3px rgba(154,98,245,.22);
  }
  /* De titel ligt over de onderkant van het beeld. */
  .kaart-body{
    position:relative;
    z-index:2;
    margin-top:-34px;
    padding:4px 20px 22px;
    flex:1;
    display:flex;
    flex-direction:column;
  }
  .kaart-titel{
    display:block;
    font-family:var(--font-display);
    font-size:18px;
    font-weight:600;
    letter-spacing:-.015em;
    color:var(--paper);
  }
  .kaart-tekst{
    display:block;
    margin-top:8px;
    font-size:14px;
    line-height:1.55;
    color:var(--paper-dim);
  }
  /* De voet naar onderen duwen, zodat de streep en het label op elke kaart
     even hoog staan, ook als de ene tekst een regel korter is. */
  .kaart-voet{ margin-top:auto; padding-top:16px; }
  .kaart-stack{ display:flex; gap:7px; flex-wrap:wrap; }
  .kaart-tag{
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:.06em;
    color:var(--paper-dim);
    padding:5px 11px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--r-pil);
    transition:color .2s ease, border-color .2s ease;
  }
  .kaart-actie{
    display:block;
    margin-top:16px;
    padding-top:15px;
    border-top:1px solid var(--rand);
    font-size:16px;
    font-weight:600;
    letter-spacing:-.01em;
    color:var(--paper);
    transition:color .2s ease, border-color .2s ease;
  }
  @media (hover:hover) and (pointer:fine){
    .kaart-p:hover{ transform:translateY(-5px); border-color:rgba(154,98,245,.42); }
    .kaart-p:hover .kaart-beeld img{ transform:scale(1.05); }
    .kaart-p:hover .kaart-actie{ color:var(--copper-bright); border-top-color:rgba(154,98,245,.38); }
    .kaart-p:hover .kaart-tag{ border-color:rgba(154,98,245,.3); }
  }
  @media (prefers-reduced-motion: reduce){
    .kaart-p, .kaart-beeld img{ transition:none; }
    .kaart-p:hover{ transform:none; }
    .kaart-p:hover .kaart-beeld img{ transform:none; }
  }
  /* De vrije plek: zelfde kaart, maar zonder beeld en met een open rand. */
  .kaart-p.vrij{
    border-style:dashed;
    background:transparent;
    justify-content:center;
    padding:26px 24px;
  }
  .kaart-p.vrij .kaart-body{ margin-top:0; padding:0; }
  .kaart-p.vrij .kaart-num{ position:static; display:inline-block; margin-bottom:14px; background:none; border:0; padding:0; color:var(--copper-bright); backdrop-filter:none; }

  /* ---- Diensten ----------------------------------------------------- */
  .diensten-raster{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
    gap:20px;
    margin-top:46px;
  }
  .dienst{
    padding:26px 24px 24px;
    background:var(--kaart);
    border:1px solid var(--rand);
    border-radius:var(--r-kaart);
    transition:border-color .24s cubic-bezier(.23,1,.32,1), transform .24s cubic-bezier(.23,1,.32,1);
  }
  .dienst-num{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.14em;
    color:var(--copper-bright);
  }
  .dienst-titel{
    margin-top:14px;
    font-family:var(--font-display);
    font-size:19px;
    font-weight:600;
    letter-spacing:-.015em;
    color:var(--paper);
  }
  .dienst-tekst{
    margin-top:9px;
    font-size:15.5px;
    line-height:1.7;
    color:var(--paper-dim);
  }
  .dienst .kaart-stack{ margin-top:18px; }
  @media (hover:hover) and (pointer:fine){
    .dienst:hover{ transform:translateY(-4px); border-color:rgba(154,98,245,.4); }
  }
  @media (prefers-reduced-motion: reduce){
    .dienst{ transition:none; }
    .dienst:hover{ transform:none; }
  }

  /* ---- Wat je zeker weet: een opsomming, geen kaarten ----------------
     Boven deze sectie staan al drie gelijke dienstkaarten. Nog vier gelijke
     kaarten eronder maakt van de pagina een sjabloon. Lijnen en witruimte
     doen hier hetzelfde werk: het is een opsomming, geen verzameling losse
     dingen om tussen te kiezen. */
  .zekerheden{ list-style:none; margin:40px 0 0; padding:0; }
  .zekerheid{
    display:grid;
    grid-template-columns:minmax(0, 24ch) minmax(0, 64ch);
    gap:clamp(20px, 4vw, 72px);
    padding-block:clamp(18px, 2.4vw, 26px);
    border-top:1px solid var(--rand);
  }
  .zekerheid:last-child{ border-bottom:1px solid var(--rand); }
  .zekerheid h3{
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--copper-bright);
    line-height:1.5;
  }
  .zekerheid p{
    font-size:15.5px;
    line-height:1.65;
    color:var(--paper-dim);
  }
  @media (max-width:760px){
    .zekerheid{ grid-template-columns:1fr; gap:10px; }
  }

  /* ---- Over ons ------------------------------------------------------ */
  /* De inleidende zin draagt de sectie en staat over de volle breedte; de
     twee kanten eronder beginnen allebei op dezelfde hoogte, elk met een
     haarlijn erboven zodat ze als twee helften lezen in plaats van als
     losse tekst die ergens begint. */
  .over-inleiding{
    margin-top:22px;
    max-width:54ch;
    font-size:clamp(18px, 1.7vw, 22px);
    line-height:1.55;
    color:var(--paper);
  }
  .over-raster{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(32px, 4vw, 56px);
    margin-top:clamp(40px, 5vw, 64px);
    align-items:start;
  }
  .over-blok{
    padding-top:24px;
    border-top:1px solid var(--rand);
  }
  .over-tag{
    display:block;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--copper-bright);
  }
  .over-blok h3{
    margin-top:12px;
    font-family:var(--font-display);
    font-size:19px;
    font-weight:600;
    letter-spacing:-.015em;
  }
  .over-blok p{
    margin-top:10px;
    max-width:52ch;
    font-size:16.5px;
    line-height:1.68;
    color:var(--paper-dim);
  }
  /* De strook onder allebei de kolommen: opschrift links, plaatjes erachter. */
  .over-strook{
    grid-column:1 / -1;
    margin-top:44px;
    padding:20px 24px;
    background:var(--kaart);
    border:1px solid var(--rand);
    border-radius:var(--r-kaart);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px 28px;
  }
  .over-strook .over-tag{ flex:0 0 auto; }
  .over-strook .kaart-stack{ flex:1 1 320px; }

  /* ---- Klaar om te bouwen -------------------------------------------- */
  .sec.klaar .sec-kop h2{
    font-family:var(--font-display);
    font-size:clamp(34px, 5vw, 60px);
    font-weight:600;
    line-height:1.04;
    letter-spacing:-.018em;
    max-width:18ch;
  }
  .klaar .sec-lead{ margin-top:20px; }
  .klaar-knoppen{
    margin-top:32px;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .klaar-plaats{
    margin-top:22px;
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--paper-dim);
  }
  .klaar-mail{
    display:inline-block;
    margin-top:26px;
    font-size:17px;
    color:var(--paper);
    text-decoration:none;
    border-bottom:1px solid var(--rand);
    padding-bottom:3px;
    transition:color .2s ease, border-color .2s ease;
  }
  @media (hover:hover) and (pointer:fine){
    .klaar-mail:hover{ color:var(--copper-bright); border-bottom-color:var(--copper-bright); }
  }

  /* ---- Smalle schermen ----------------------------------------------- */
  @media (max-width:900px){
    .kaarten{ grid-template-columns:1fr; gap:20px; }
    .over-raster{ grid-template-columns:1fr; gap:34px; }
  }
  @media (max-width:980px){
    .held{ min-height:0; padding-block:100px 56px; }
    .held-kolom{ max-width:none; }
  }
  @media (max-width:600px){
    .held-knoppen{ flex-direction:column; align-items:stretch; }
    .held-knoppen .btn{ width:100%; text-align:center; }
    .klaar-knoppen{ flex-direction:column; align-items:stretch; }
    .klaar-knoppen .btn{ width:100%; text-align:center; }
  }

  /* ---- Een pagina die met een sectie begint ------------------------
     Geen lijn erboven (er staat niets boven) en ruimte voor de vaste
     kopbalk. Zo lezen /projecten, /contact en een projectpagina als de
     secties van de homepage, zonder dat de kop onder de balk kruipt. */
  .sec-eerste{
    border-top:0;
    padding-top:clamp(116px, 13vw, 150px);
  }
  /* Op die pagina's draagt een h1 de kop; zelfde maat als de h2 elders. */
  .sec-kop h1{
    font-family:var(--font-display);
    font-size:clamp(30px, 4vw, 46px);
    font-weight:600;
    line-height:1.06;
    letter-spacing:-.015em;
  }
  .sec-kop h1 em{ font-style:normal; font-weight:700; color:var(--copper-bright); }

  /* ---- Binnenpagina's in dezelfde taal -----------------------------
     /contact, /offerte, een projectpagina en de foutpagina werken nog met
     hun eigen onderdelen (.section-head, .contact-paneel, .case-*). Hun
     indeling klopt al: kop en uitleg links, paneel rechts. Wat hier
     gebeurt is ze hetzelfde laten kijken als de homepage: dezelfde vlakken,
     randen, rondingen en opschriften. De structuur blijft staan, zodat de
     formulieren en de galerij precies blijven werken zoals ze werken. */

  /* Opschriften als mono-label in accentkleur, net als .sec-num. */
  .section-head .eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--copper-bright);
  }
  .section-head h1,
  .section-head h2{
    font-family:var(--font-display);
    font-size:clamp(30px, 4vw, 46px);
    font-weight:600;
    line-height:1.06;
    letter-spacing:-.015em;
  }
  .section-head .section-lead{
    margin-top:18px;
    max-width:62ch;
    font-size:17px;
    line-height:1.62;
    color:var(--paper-dim);
  }

  /* Panelen en blokken worden kaarten. */
  .contact-paneel,
  .contact-offerteblok,
  .case-stack > div,
  .case-lists > div{
    background:var(--kaart);
    border:1px solid var(--rand);
    border-radius:var(--r-kaart);
  }
  .contact-offerteblok{ padding:22px 24px; }
  .case-stack{ gap:12px; }
  .case-stack > div{ padding:14px 16px; }
  .case-lists > div{ padding:22px 24px; }
  .case-stack dt{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--copper-bright);
  }
  .case-sub{
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--copper-bright);
  }
  /* De techniekregels op een projectpagina als plaatjes, zoals op de
     kaarten: dezelfde taal voor dezelfde soort informatie. */
  .case-body > .tag{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:.06em;
    color:var(--paper-dim);
    padding:5px 11px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--r-pil);
  }

  /* Velden: rustige vlakken met dezelfde rand, en een ronding die tussen
     de kaart (16px) en de pil in zit. */
  .contact-form input,
  .contact-form textarea,
  .contact-form select{
    background:var(--ink-soft);
    border:1px solid var(--rand);
    border-radius:12px;
  }
  .contact-form input:focus,
  .contact-form textarea:focus,
  .contact-form select:focus{ border-color:var(--copper-bright); }
  .contact-paneel-titel{
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--copper-bright);
  }

  /* De stappen op /offerte: lijnen in dezelfde sterkte als overal. */
  .offerte-stappen li,
  .offerte-stappen li:last-child,
  .offerte-groep.volgende{ border-color:var(--rand); }

  /* Galerij en terugkeerlink mee in de nieuwe ronding. */
  .galerij-vak{ border-radius:var(--r-kaart); border-color:var(--rand); }
  .galerij-tegel:focus-visible{ border-radius:var(--r-kaart); }
  .terug a{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--paper-dim);
  }
  .voorbeeld-balk{ border-radius:var(--r-kaart); border-color:var(--rand); }

  /* ---- Stilstaande held op een smal scherm --------------------------
     Onder 1024px bouwt hero.js het deeltjesveld niet op (zie hero.js). Daar
     staat dit beeld: dezelfde pijplijn, met Higgsfield gemaakt en met ons
     eigen beeldmateriaal in de sleutel. Het kost 83 kB in plaats van een
     WebGL-simulatie met bloom. */
  @media (max-width:1023px){
    .held .hero-art{
      visibility:visible;
      /* Ruimer dan de held: het beeld schuift bij het scrollen een paar
         procent mee, en dan mag er bovenaan geen rand vrijkomen. */
      top:-7%;
      height:114%;
      background-image:url('merk/pijplijn-2026.webp');
      background-size:cover;
      background-position:68% 42%;
      opacity:.42;
    }
    .held .hero-art canvas{ display:none; }
  }