/* Site Gaston Consulting. Dezelfde huisstijl als het briefpapier (huisstijl/stijlen/grote-naam.css):
   papier van design C, inkt, menie als accent op hoogstens twee plekken per scherm, twaalf kolommen.
   Schibsted Grotesk voor de naam en de koppen, IBM Plex Sans voor de tekst, Geist Mono voor het kleine. */

:root{
  --papier:#F5F5ED;
  --papier-2:#ECEBE1;
  --ink:#282828;
  --mid:#5F5F5B;
  --lijn:#D3D2CA;
  --accent:#D63A12;
  --mono:'Geist Mono',Consolas,monospace;
  --sans:'IBM Plex Sans',Arial,sans-serif;
  --kop:'Schibsted Grotesk',Arial,sans-serif;
  --breed:1200px;
  --goot:clamp(12px,2vw,24px);
  --rand:clamp(16px,4vw,48px);
}

*{box-sizing:border-box}
html{background:var(--papier);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--ink);font-family:var(--sans);
     font-size:clamp(16px,1.05vw + 10px,18px);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent)}
::selection{background:var(--ink);color:var(--papier)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--breed);margin:0 auto;padding:0 var(--rand)}
.raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--goot)}

.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mid)}

/* kop van elke pagina */
.balk{position:sticky;top:0;z-index:5;background:rgba(245,245,237,.92);backdrop-filter:blur(6px);
      border-bottom:1px solid var(--lijn)}
.balk .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.logo{font-family:var(--kop);font-weight:800;font-size:1.5rem;letter-spacing:-.035em;text-decoration:none;line-height:1}
.logo .punt{color:var(--accent)}
.logo:hover{color:var(--ink)}
.nav{display:flex;gap:clamp(12px,2.5vw,32px);font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
     text-transform:uppercase}
.nav a{text-decoration:none;color:var(--mid)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.nav .knop-klein{color:var(--ink);border:1px solid var(--ink);padding:6px 10px;border-radius:2px}
.nav .knop-klein:hover{background:var(--ink);color:var(--papier)}
@media (max-width:640px){.nav .verberg-smal{display:none}}

/* de grote naam */
.held{padding:clamp(48px,9vw,120px) 0 clamp(40px,6vw,72px);border-bottom:1px solid var(--lijn)}
.held .naam{font-family:var(--kop);font-weight:800;font-size:clamp(5rem,21vw,17rem);line-height:.82;
            letter-spacing:-.055em;margin:0 0 0 -.04em}
.held .naam .punt{color:var(--accent)}
.held .onder{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin:18px 0 0 .3em}
.held .zin{grid-column:1/9;font-family:var(--kop);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.9rem);
           line-height:1.08;letter-spacing:-.025em;margin:clamp(40px,6vw,72px) 0 0;text-wrap:balance}
.held .lead{grid-column:1/7;font-size:1.08em;color:var(--ink);margin:20px 0 0;max-width:36em}
.held .acties{grid-column:1/8;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:32px}
.held .zin{grid-column:1/8;grid-row:1}
.held .lead{grid-row:2}
.held .acties{grid-row:3}

/* het logboek naast de belofte: zo ziet een ochtend eruit als het loopt */
.logboek{grid-column:9/13;grid-row:1/4;align-self:end;margin:clamp(40px,6vw,72px) 0 0;
         background:var(--ink);color:var(--papier);border-radius:3px;padding:16px 18px 14px;
         font-family:var(--mono);font-size:.74rem;line-height:1.75;box-shadow:6px 6px 0 var(--lijn)}
.logboek figcaption{display:flex;justify-content:space-between;color:#A9A89F;letter-spacing:.08em;
                    text-transform:uppercase;font-size:.66rem;border-bottom:1px solid #45453F;padding-bottom:8px;margin-bottom:8px}
.logboek ol{list-style:none;margin:0;padding:0}
.logboek li{display:flex;gap:12px}
.logboek time{flex:0 0 auto}
.logboek time{color:#A9A89F}
.logboek p{margin:10px 0 0;color:#A9A89F;font-size:.66rem;border-top:1px solid #45453F;padding-top:8px;white-space:normal}
.cursor{display:inline-block;width:.55em;height:1.1em;margin-left:4px;vertical-align:-2px;background:var(--papier)}
@media (prefers-reduced-motion:no-preference){
  .logboek li{opacity:0;animation:regel .01s steps(1) forwards}
  .logboek li:nth-child(1){animation-delay:.6s}
  .logboek li:nth-child(2){animation-delay:1.1s}
  .logboek li:nth-child(3){animation-delay:1.7s}
  .logboek li:nth-child(4){animation-delay:2.2s}
  .logboek li:nth-child(5){animation-delay:2.9s}
  .logboek li:nth-child(6){animation-delay:3.5s}
  @keyframes regel{to{opacity:1}}
  .cursor{animation:knipper 1s steps(1) infinite}
  @keyframes knipper{50%{opacity:0}}
}
@media (max-width:860px){
  .held .zin,.held .lead,.held .acties{grid-column:1/13}
  .logboek{grid-column:1/13;grid-row:4;margin-top:40px;max-width:440px}
}

.knop{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--papier);
      font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
      padding:14px 20px;border-radius:2px;transition:transform .15s ease}
.knop:hover{color:var(--papier);transform:translateY(-2px)}
.knop .pijl{transition:transform .15s ease}
.knop:hover .pijl{transform:translateX(3px)}
.link-mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mid)}

/* secties met een nummer in de linkerkolom, zoals de artikels op het briefpapier */
.sec{padding:clamp(56px,8vw,104px) 0;border-bottom:1px solid var(--lijn)}
.sec .nr{grid-column:1/3;font-family:var(--kop);font-weight:700;font-size:clamp(1.4rem,2.2vw,1.9rem);
         letter-spacing:-.02em;line-height:1}
.sec .lijf{grid-column:3/13}
.sec h2{font-family:var(--kop);font-weight:700;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.05;
        letter-spacing:-.025em;margin:0 0 .5em;max-width:18em;text-wrap:balance}
.sec .intro{max-width:36em;margin:0 0 clamp(28px,4vw,48px);color:var(--ink)}
@media (max-width:760px){.sec .nr{grid-column:1/13;margin-bottom:14px}.sec .lijf{grid-column:1/13}}

/* drie of vier blokken naast elkaar */
.blokken{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
         border-top:1px solid var(--ink)}
.blok{padding:20px 20px 24px 0;border-bottom:1px solid var(--lijn)}
.blok + .blok{padding-left:20px;border-left:1px solid var(--lijn)}
@media (max-width:560px){.blok + .blok{padding-left:0;border-left:0}}
.blok .mono{display:block;margin-bottom:14px}
.blok h3{font-family:var(--kop);font-weight:700;font-size:1.25rem;letter-spacing:-.015em;line-height:1.15;margin:0 0 8px}
.blok p{margin:0;color:var(--ink)}

/* de aanpak als stappen op een lijn */
.stappen{list-style:none;margin:0;padding:0;counter-reset:stap;display:grid;
         grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:0}
.stappen li{counter-increment:stap;position:relative;padding:44px 20px 8px 0;border-top:1px solid var(--ink)}
.stappen li::before{content:"0" counter(stap);position:absolute;top:14px;left:0;font-family:var(--mono);
                    font-size:.72rem;letter-spacing:.12em;color:var(--mid)}
.stappen li::after{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;background:var(--ink);border-radius:50%}
.stappen li:last-child::after{background:var(--accent)}
.stappen h3{font-family:var(--kop);font-weight:700;font-size:1.2rem;letter-spacing:-.015em;margin:0 0 6px;line-height:1.15}
.stappen p{margin:0 0 16px}
.voetnoot{margin:28px 0 0;color:var(--mid);max-width:40em}

/* over */
.over{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:var(--goot);align-items:start}
.over figure{margin:0}
.over img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.05);border-radius:2px}
.over figcaption{margin-top:10px}
.over p{max-width:36em}
.tijdlijn{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--lijn)}
.tijdlijn li{display:grid;grid-template-columns:8.5em 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--lijn)}
.tijdlijn .mono{padding-top:4px}
@media (max-width:760px){.over{grid-template-columns:1fr}.over figure{max-width:260px}}
@media (max-width:420px){.tijdlijn li{grid-template-columns:1fr;gap:2px}}

/* citaat als teaser */
.citaat{margin:0;padding:0;border:0}
.citaat p{font-family:var(--kop);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.12;
          letter-spacing:-.025em;margin:0 0 18px;max-width:22em;text-wrap:balance}
.citaat p::before{content:"“";color:var(--accent)}
.citaat p::after{content:"”"}
.citaat footer{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}

/* contact */
.contact h2{font-size:clamp(2.2rem,6vw,5rem);max-width:none}
.contact .mail{font-family:var(--kop);font-weight:700;font-size:clamp(1.2rem,3vw,2rem);letter-spacing:-.02em;
               word-break:break-all}

/* getuigenissen */
.paginakop{padding:clamp(48px,8vw,104px) 0 clamp(32px,5vw,56px);border-bottom:1px solid var(--lijn)}
.paginakop h1{font-family:var(--kop);font-weight:800;font-size:clamp(2.8rem,9vw,7.5rem);line-height:.9;
              letter-spacing:-.05em;margin:12px 0 0}
.paginakop h1 .punt{color:var(--accent)}
.paginakop .lead{max-width:34em;margin:24px 0 0}

.kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:var(--goot)}
.kaart{background:var(--papier);border:1px solid var(--lijn);border-radius:2px;padding:24px 24px 20px;
       display:flex;flex-direction:column;gap:18px;transition:transform .2s ease,border-color .2s ease}
.kaart:hover{transform:translateY(-3px) rotate(-.3deg);border-color:var(--ink)}
.kaart:nth-child(even):hover{transform:translateY(-3px) rotate(.3deg)}
.kaart blockquote{margin:0;font-family:var(--kop);font-weight:600;font-size:1.22rem;line-height:1.3;letter-spacing:-.01em}
.kaart .wie{margin-top:auto;display:flex;gap:14px;align-items:center;border-top:1px solid var(--lijn);padding-top:14px}
.kaart .wie strong{display:block;font-weight:600;font-size:.95rem;line-height:1.3}
.kaart .wie .mono{font-size:.66rem}
.kaart .ster{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--mid)}
.ikoon{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--papier-2);display:grid;place-items:center;
       font-size:1.35rem;line-height:1}
.kaart.leeg{border-style:dashed;justify-content:center;align-items:flex-start;background:transparent}
.kaart.leeg blockquote{color:var(--mid)}
.kaart.leeg:hover{transform:none}

.groep{padding:clamp(40px,6vw,72px) 0;border-bottom:1px solid var(--lijn)}
.groepkop{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 24px;margin-bottom:24px}
.groepkop h2{font-family:var(--kop);font-weight:700;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.02em;margin:0}
.leeg-echt{border:1px dashed var(--lijn);padding:28px;border-radius:2px;max-width:46em}
.leeg-echt p{margin:0 0 8px}

/* voet */
.voet{padding:32px 0 48px}
.voet .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 32px}
.voet .mono{font-size:.66rem}

/* een kleine vonk bij het laden: de punt valt op zijn plaats */
@media (prefers-reduced-motion:no-preference){
  .held .naam .punt,.paginakop h1 .punt{display:inline-block;animation:val .7s cubic-bezier(.3,1.6,.5,1) .25s both}
  @keyframes val{from{transform:translateY(-1.2em);opacity:0}to{transform:none;opacity:1}}
}

/* vragen: open en dicht, zonder JavaScript */
.vragen{border-top:1px solid var(--ink);max-width:52em}
.vragen details{border-bottom:1px solid var(--lijn)}
.vragen summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:16px;
                padding:18px 0;font-family:var(--kop);font-weight:700;font-size:1.2rem;letter-spacing:-.015em}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";font-family:var(--mono);font-weight:400;font-size:1.2rem;color:var(--mid);
                       transition:transform .2s ease}
.vragen details[open] summary::after{transform:rotate(45deg)}
.vragen summary:hover{color:var(--accent)}
.vragen details p{margin:0 0 20px;max-width:40em}

/* de teaser wisselt */
.teaser-links{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
.knop-tekst{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.knop-tekst:hover{color:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .citaat.wissel p{animation:in .35s ease both}
  @keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media (max-width:560px){.teaser-links{margin-left:0;width:100%}}

/* gsm: de naam mag groter, het logboek iets ruimer */
@media (max-width:560px){.held .naam{font-size:25vw}}
.logboek{font-size:.78rem}

/* het aanbod als trap: elke trede iets hoger, de laatste met de menie-stip */
.trap{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--goot);
      align-items:start}
.trap li{position:relative;border-top:2px solid var(--ink);padding:16px 0 0;display:flex;flex-direction:column;gap:8px}
.trap li:nth-child(1){margin-top:96px}
.trap li:nth-child(2){margin-top:64px}
.trap li:nth-child(3){margin-top:32px}
.trap li::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--ink)}
.trap li:last-child::before{background:var(--accent)}
.trap h3{font-family:var(--kop);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;margin:0;line-height:1.1}
.trap p{margin:0}
.trap .link-mono{margin-top:4px}
@media (max-width:900px){.trap{grid-template-columns:1fr 1fr}.trap li{margin-top:0!important}}
@media (max-width:560px){.trap{grid-template-columns:1fr}}

/* diensten: een lijst met een dunne lijn, twee kolommen */
.diensten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
          column-gap:calc(var(--goot) * 2);border-top:1px solid var(--ink)}
.diensten li{border-bottom:1px solid var(--lijn);padding:18px 0}
.diensten h3{font-family:var(--kop);font-weight:700;font-size:1.2rem;letter-spacing:-.015em;margin:0 0 4px}
.diensten p{margin:0}

/* zes regels, genummerd in de kantlijn */
.regels{list-style:none;margin:0;padding:0;counter-reset:regel;display:grid;
        grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:0 calc(var(--goot) * 2)}
.regels li{counter-increment:regel;position:relative;padding:18px 0 18px 3.2em;border-top:1px solid var(--lijn)}
.regels li::before{content:counter(regel);position:absolute;left:0;top:14px;font-family:var(--kop);font-weight:800;
                   font-size:1.9rem;line-height:1;letter-spacing:-.03em}
.regels .mono{font-size:.64rem}
.regels h3{font-family:var(--kop);font-weight:700;font-size:1.2rem;letter-spacing:-.015em;margin:4px 0 4px}
.regels p{margin:0}

/* workshop */
.acties-rij{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:32px}
.agenda{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);max-width:52em}
.agenda li{display:grid;grid-template-columns:5em 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--lijn)}
.agenda time{font-family:var(--kop);font-weight:700;font-size:1.3rem;letter-spacing:-.02em}
.agenda h3{font-family:var(--kop);font-weight:700;font-size:1.2rem;letter-spacing:-.015em;margin:0 0 4px}
.agenda p{margin:0}
.agenda .pauze{background:var(--papier-2);padding-left:12px;padding-right:12px;margin:0 -12px}
.praktisch{display:grid;grid-template-columns:12em 1fr;margin:0;border-top:1px solid var(--ink);max-width:52em}
.praktisch dt,.praktisch dd{padding:14px 0;border-bottom:1px solid var(--lijn);margin:0}
.praktisch dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);padding-top:18px}
@media (max-width:560px){.praktisch{grid-template-columns:1fr}.praktisch dt{border-bottom:0;padding-bottom:0}}

/* sprong naar de inhoud: onzichtbaar tot hij focus krijgt */
.naar-inhoud{position:absolute;left:-999px;top:8px;z-index:10;background:var(--ink);color:var(--papier);padding:8px 12px}
.naar-inhoud:focus{left:16px;color:var(--papier)}

/* het geval: drie kolommen, vroeger, wat ik deed, nu */
.geval{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--goot);border-top:1px solid var(--ink)}
.geval > div{padding-top:16px}
.geval .mono{display:block;margin-bottom:8px}
.geval p{margin:0}
.geval > div:last-child p{font-family:var(--kop);font-weight:700;font-size:1.2rem;line-height:1.3;letter-spacing:-.01em}
@media (max-width:760px){.geval{grid-template-columns:1fr}}

/* de naam op desktop iets kleiner, zodat de belofte boven de vouw staat */
.held{padding-top:clamp(40px,6vw,80px)}
.held .naam{font-size:clamp(5rem,16vw,13rem)}
.held .zin{font-size:clamp(1.6rem,3vw,2.6rem)}
@media (max-width:560px){.held .naam{font-size:25vw}.nav{gap:14px}}

/* ---- uit mockup v3-rustig, live sinds 05-11 ---- */
/* Mockup v3-rustig: de live versie, met alleen de slagzin in een paar koppen in menie. Geen bold in de lopende
   tekst, geen extra vlakken: weinig dat de aandacht trekt, zodat het weinige wel opvalt. */

.acc{font-style:normal;color:var(--accent)}

/* de prompt: dezelfde donkere kaart als het logboek, rustig */
.prompt-sec .mono{display:block;margin-bottom:12px}
.promptkaart{margin:0;background:var(--ink);color:var(--papier);border-radius:3px;box-shadow:6px 6px 0 var(--lijn);max-width:52em}
.promptkaart figcaption{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;
  border-bottom:1px solid #45453F;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#A9A89F}
.promptkaart pre{margin:0;padding:18px;font-family:var(--mono);font-size:.8rem;line-height:1.7;white-space:pre-wrap;
  max-height:16em;overflow:auto}
.kopieer{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;background:var(--papier);color:var(--ink);
  border:0;border-radius:2px;padding:8px 14px;cursor:pointer}
.kopieer:hover{background:#fff}
.sec .nr{white-space:nowrap}

/* ---- uit mockup v7-rustig (met de basis van v6-bord), live sinds 10-11 als site-v3 ---- */
/* Mockup v6-bord (09-11): de structuur van de vier lussen (site/ux/structuur.md) als echte site, met een nieuwe
   opmaak. Eén terugkerend beeld: de route als donker lijnbord, met de dot-matrixletter van de documentenlijn (Doto)
   voor haltes en cijfers. Stippellijnen in plaats van volle lijnen. Tekst en claims komen uit ux/uitkomst.html. */

@font-face{font-family:'Doto';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/Doto-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Doto';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/Doto-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{
  --dot:'Doto','Geist Mono',Consolas,monospace;
  --donker2:#A9A89F;
  --stippel:#BDBCB2;
  --menie-vlak:#C7350F;   /* menie, een tik donkerder: papier erop haalt 4,8 op 1 */
  --zacht:cubic-bezier(.2,.7,.2,1);
}

/* van pagina naar pagina vloeit het over; de balk blijft staan */
@view-transition{navigation:auto}
.balk{view-transition-name:balk}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

h1,h2,h3{text-wrap:balance}
html{scroll-padding-top:76px}

/* stippellijnen als scheiding */
.sec,.paginakop,.groep{border-bottom:2px dotted var(--stippel)}
.balk{border-bottom:0;background-image:radial-gradient(circle,var(--stippel) 1px,transparent 1.2px);
  background-size:6px 2px;background-repeat:repeat-x;background-position:left bottom;background-color:rgba(245,245,237,.92)}
.nav .knop-klein{background:var(--ink);color:var(--papier);padding:8px 12px}
.nav .knop-klein:hover{background:var(--accent);border-color:var(--accent);color:var(--papier)}
.nav a{white-space:nowrap}

/* ---------- H1 · Waar sta je nu? ---------- */
.vraag{position:relative;overflow:hidden;padding:clamp(36px,6vw,84px) 0 clamp(36px,5vw,64px)}
.vraag .wrap{position:relative}
.veld{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(105deg,transparent 38%,#000 82%);mask-image:linear-gradient(105deg,transparent 38%,#000 82%)}
.vraag .wie{display:block;margin-bottom:clamp(14px,2.2vw,26px)}
.vraag h1{font-family:var(--kop);font-weight:800;font-size:clamp(3.3rem,11.6vw,10.2rem);line-height:.86;
  letter-spacing:-.055em;margin:0 0 0 -.04em}
.vraag h1 .punt{color:var(--accent);display:inline-block}
.vraag .kern{max-width:30em;margin:clamp(18px,2.6vw,30px) 0 clamp(26px,3.6vw,44px);font-size:1.14em}

.deuren{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.deur{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;
  gap:6px clamp(12px,2vw,28px);text-decoration:none;border-bottom:1px solid var(--ink);
  padding:clamp(18px,2.3vw,30px) 0;transition:padding .35s var(--zacht),color .2s}
.deur::before{content:"";position:absolute;z-index:-1;inset:0 calc(var(--rand) * -.5);background:var(--ink);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .35s var(--zacht)}
.deur .zin{font-family:var(--kop);font-weight:700;font-size:clamp(1.45rem,3.6vw,2.9rem);line-height:1.05;letter-spacing:-.035em}
.deur{grid-template-columns:minmax(0,1fr) auto}
.deur-naam{position:absolute;right:clamp(48px,5vw,72px);top:50%;margin-top:-.6em;font-family:var(--mono);font-size:.72rem;line-height:1.2;
  letter-spacing:.12em;text-transform:uppercase;color:var(--donker2);
  white-space:nowrap;opacity:0;transform:translateX(-10px);transition:opacity .25s,transform .35s var(--zacht)}
.deur .pijl{font-family:var(--mono);font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1;color:var(--accent);
  transition:transform .35s var(--zacht)}
.deur:hover,.deur:focus-visible{color:var(--papier);padding-left:clamp(6px,1.4vw,20px);padding-right:clamp(6px,1.4vw,20px)}
.deur:hover::before,.deur:focus-visible::before{transform:scaleY(1)}
.deur:hover .deur-naam,.deur:focus-visible .deur-naam{opacity:1;transform:none}
.deur:hover .pijl,.deur:focus-visible .pijl{transform:translateX(6px)}
.deur:active::before{background:var(--accent)}
@media (max-width:1180px){.deur-naam{display:none}}
.uitwegen{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;margin-top:20px}
.uitwegen .link-mono{text-decoration:none;border-bottom:1px solid var(--stippel);padding-bottom:2px}
.uitwegen .link-mono:hover{border-color:var(--accent)}

.deuren.klein .deur{padding:clamp(14px,1.8vw,22px) 0}
.deuren.klein .deur .zin{font-size:clamp(1.25rem,2.6vw,2.1rem)}
.deuren.klein .deur:hover,.deuren.klein .deur:focus-visible{padding-left:clamp(6px,1.4vw,20px);padding-right:clamp(6px,1.4vw,20px)}
.andere{border-bottom:0}
.andere h2.mono{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.12em;margin:0 0 16px}

/* ---------- het lijnbord: de route, op elke pagina hetzelfde ---------- */
.bord{position:relative;background:var(--ink);color:var(--papier);padding:clamp(56px,8vw,104px) 0;overflow:hidden}
.bord::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,#363633 1px,transparent 1.3px);background-size:12px 12px}
.bord .wrap{position:relative}
.bord .mono{color:var(--donker2);display:block;margin-bottom:12px}
.bord-kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 32px}
.bord h2{font-family:var(--kop);font-weight:700;font-size:clamp(1.9rem,3.8vw,3.2rem);line-height:1.02;letter-spacing:-.03em;margin:0}
.bord h2 .punt{color:var(--accent)}

.niveaus{display:inline-flex;border:1px solid #55554F;border-radius:999px;padding:3px;gap:2px;background:var(--ink)}
.niveaus button{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--donker2);
  background:none;border:0;border-radius:999px;padding:9px 14px;cursor:pointer;transition:background .25s,color .25s}
.niveaus button:hover{color:var(--papier)}
.niveaus button[aria-pressed="true"]{background:var(--papier);color:var(--ink)}

.lijn{--pos:0;list-style:none;margin:clamp(36px,5vw,60px) 0 0;padding:0;position:relative;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.lijn::before{content:"";position:absolute;left:0;right:0;top:8px;border-top:4px dotted #5F5F5B}
.lijn::after{content:"";position:absolute;top:5px;left:calc(var(--pos) * 25% + 5px);width:10px;height:10px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 7px rgba(214,58,18,.28);transition:left .7s cubic-bezier(.65,0,.2,1)}
.lijn li{position:relative;padding:42px 28px 0 0}
.lijn li::before{content:"";position:absolute;top:0;left:0;width:20px;height:20px;box-sizing:border-box;border-radius:50%;
  background:var(--ink);border:3px solid var(--papier)}
.lijn .halte-nr{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--donker2);margin-bottom:8px}
.lijn h3{font-family:var(--dot);font-weight:900;font-size:clamp(1.25rem,2.45vw,2.15rem);line-height:1;letter-spacing:.01em;
  text-transform:uppercase;margin:0 0 12px}
.lijn p{margin:0;max-width:15em;color:#E3E2D8;transition:opacity .2s}
.lijn p.wissel-uit{opacity:0}
.lijn li.uit{color:#8E8D84}
.lijn li.uit::before{border-color:#5F5F5B}
.lijn li.uit p,.lijn li.uit dd{color:#8E8D84}
.lijn.met-kg::after{display:none}
.lijn.met-kg li:not(.uit)::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px rgba(214,58,18,.25)}
.kg{margin:0}
.kg dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--donker2);margin-top:14px}
.kg dt:first-child{margin-top:0}
.kg dd{margin:2px 0 0;max-width:15em;color:#E3E2D8}
.bord-voet{margin:clamp(28px,4vw,44px) 0 0;color:var(--donker2)}
@media (max-width:760px){
  .lijn{grid-template-columns:1fr}
  .lijn::before{left:8px;right:auto;top:4px;bottom:0;border-top:0;border-left:4px dotted #5F5F5B}
  .lijn::after{display:none}
  .lijn li{padding:0 0 28px 40px}
  .lijn li:last-child{padding-bottom:0}
  .lijn li::before{top:2px}
  .lijn li:not(.uit)::before{background:var(--accent);border-color:var(--accent)}
  .lijn p,.kg dd{max-width:none}
}

/* ---------- H3 · onder de motorkap ---------- */
.motor{font-family:var(--kop);font-weight:800;font-size:clamp(2.1rem,6.3vw,5.3rem);line-height:1.06;letter-spacing:-.045em;margin:14px 0 0}
.motor .punt{color:var(--accent)}
.woord{font-family:var(--dot);font-weight:900;font-size:.8em;line-height:1;letter-spacing:.01em;text-transform:uppercase;
  color:var(--papier);background:var(--ink);border:0;border-radius:.07em;padding:.16em .24em .12em;margin:0 .04em;cursor:pointer;
  vertical-align:.05em;box-shadow:.08em .08em 0 var(--accent);transition:transform .15s,box-shadow .15s;white-space:nowrap}
.woord:hover{transform:translate(-.03em,-.03em);box-shadow:.11em .11em 0 var(--accent)}
.woord:active{transform:translate(.05em,.05em);box-shadow:.03em .03em 0 var(--accent)}
.woord-uitleg{font-family:var(--mono);font-size:clamp(.82rem,1.3vw,1rem);letter-spacing:.04em;margin:clamp(20px,2.6vw,30px) 0 0;min-height:1.7em}
.woord-uitleg::before{content:"→ ";color:var(--accent)}
.woord-stippen{list-style:none;display:flex;gap:8px;margin:16px 0 0;padding:0}
.woord-stippen li{width:8px;height:8px;border-radius:50%;background:var(--lijn);transition:background .3s}
.woord-stippen li.aan{background:var(--accent)}

/* ---------- H4 · het blijft van jullie ---------- */
.sec h2.groot{font-size:clamp(2rem,4.6vw,3.8rem);letter-spacing:-.035em;line-height:1;margin-bottom:.7em}
.sec h2 .punt{color:var(--accent)}
.drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.drie > div{padding:22px 28px 6px 0}
.drie > div + div{padding-left:28px;border-left:2px dotted var(--stippel)}
.dot-nr{font-family:var(--dot);font-weight:900;font-size:2rem;line-height:1;color:var(--accent);display:block}
.drie h3{font-family:var(--kop);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;line-height:1.15;margin:14px 0 6px}
.drie p{margin:0}
@media (max-width:760px){.drie{grid-template-columns:1fr}
  .drie > div + div{padding-left:0;border-left:0;border-top:2px dotted var(--stippel)}}
.verder{display:inline-block;margin-top:32px}

/* ---------- H5 · de getuigenis, in menie ---------- */
.band-menie{background:var(--menie-vlak);color:var(--papier);padding:clamp(56px,8vw,104px) 0}
.band-menie .mono,.band-menie .link-mono{color:var(--papier)}
.band-menie .citaat p{font-size:clamp(1.7rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.03em;max-width:21em}
.band-menie .citaat p::before{color:var(--ink)}
.band-menie .citaat footer{margin-top:26px}
.band-menie a:hover,.band-menie .knop-tekst:hover{color:var(--ink)}
.band-menie :focus-visible{outline-color:var(--papier)}
.band-menie ::selection{background:var(--papier);color:var(--ink)}
.band-noot{margin:28px 0 0;opacity:.92}

/* ---------- H6 · wie ---------- */
.over{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,72px)}
.over figure{position:relative}
.over figure::before{content:"";position:absolute;left:12px;top:12px;width:100%;aspect-ratio:1;background:var(--accent);border-radius:2px}
.over img{position:relative;transition:filter .5s}
.over figure:hover img{filter:none}
.over figcaption{margin-top:24px}
.sec .over h2{font-size:clamp(1.9rem,3.6vw,3rem);max-width:15em}
.tijdlijn{border-top:0;position:relative;padding-left:30px;margin-top:28px}
.tijdlijn::before{content:"";position:absolute;left:5px;top:12px;bottom:14px;border-left:3px dotted var(--stippel)}
.tijdlijn li{position:relative;border-bottom:0;padding:8px 0}
.tijdlijn li::before{content:"";position:absolute;left:-31px;top:13px;width:15px;height:15px;box-sizing:border-box;border-radius:50%;
  background:var(--papier);border:3px solid var(--ink)}
.tijdlijn li:last-child::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px rgba(214,58,18,.2)}
.tijdlijn li:last-child span:last-child{font-weight:600}
@media (max-width:760px){.over{grid-template-columns:1fr}.over figure{max-width:240px;margin-bottom:8px}}

/* ---------- contact ---------- */
.slot{border-bottom:0}
.contact.slot h2{font-size:clamp(2.5rem,8.2vw,7.2rem);line-height:.9;letter-spacing:-.05em;max-width:11em;margin-bottom:.35em}
.contact.slot .intro{font-size:1.12em;margin-bottom:clamp(20px,3vw,32px)}
.contact.slot .mail{font-size:clamp(1.25rem,3.6vw,2.6rem);text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:.18em}
.weetniet{margin-top:clamp(36px,5vw,56px);border-top:2px dotted var(--stippel);padding-top:22px}
.weetniet summary{cursor:pointer;list-style:none;font-family:var(--kop);font-weight:700;font-size:1.3rem;letter-spacing:-.02em}
.weetniet summary::-webkit-details-marker{display:none}
.weetniet summary::after{content:" +";color:var(--accent)}
.weetniet[open] summary::after{content:" −"}
.weetniet summary:hover{color:var(--accent)}
.weetniet > p{max-width:36em}

/* ---------- deurpagina ---------- */
.dkop{padding:clamp(24px,3.6vw,44px) 0 clamp(44px,6vw,80px)}
.terug{display:inline-block;text-decoration:none;margin-bottom:clamp(28px,5vw,64px)}
.terug:hover{color:var(--accent)}
.zin-bez{display:table;font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;background:var(--ink);color:var(--papier);
  padding:9px 13px;border-radius:2px;margin:0 0 clamp(20px,2.6vw,30px);box-shadow:5px 5px 0 var(--accent)}
.dkop h1{font-family:var(--kop);font-weight:800;font-size:clamp(2.4rem,6.6vw,5.8rem);line-height:.94;letter-spacing:-.045em;
  max-width:13em;margin:0}
.dkop h1 .punt{color:var(--accent)}
.dkop .lead{max-width:34em;margin:clamp(20px,2.6vw,30px) 0 0;font-size:1.14em}
.rollen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:0 var(--rand);
  border-top:1px solid var(--ink);margin-top:16px}
.rollen > div{padding:22px 0 6px}
.rollen h3{font-family:var(--kop);font-weight:700;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.025em;line-height:1.1;margin:0 0 8px}
.rollen p{margin:0;max-width:30em}
.bewijs{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:28px var(--rand);align-items:center}
.bewijs p{margin:10px 0 0}
.getal{font-family:var(--dot);font-weight:900;font-size:clamp(4.2rem,14.5vw,11.5rem);line-height:.85;letter-spacing:-.01em;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.getal .naar{font-family:var(--mono);font-weight:400;font-size:.45em;color:var(--stippel);vertical-align:.3em;margin:0 .12em}
.getal.klein{font-size:clamp(3.2rem,9.5vw,7.4rem);text-transform:uppercase}
@media (max-width:860px){.bewijs{grid-template-columns:1fr}}
.log6{margin:0;background:var(--ink);color:var(--papier);border-radius:3px;padding:16px 18px 14px;font-family:var(--mono);
  font-size:.78rem;line-height:1.75;box-shadow:8px 8px 0 var(--accent);max-width:420px}
.log6 figcaption{display:flex;justify-content:space-between;color:var(--donker2);letter-spacing:.08em;text-transform:uppercase;
  font-size:.66rem;border-bottom:1px dotted #5F5F5B;padding-bottom:8px;margin-bottom:8px}
.log6 ol{list-style:none;margin:0;padding:0}
.log6 li{display:flex;gap:12px}
.log6 time{color:var(--donker2)}
.welniet{display:grid;grid-template-columns:1fr 1fr;gap:var(--goot)}
.welniet > div{padding:24px 26px 26px;border-radius:2px}
.welniet .wel{background:var(--ink);color:var(--papier)}
.welniet .wel .mono{color:var(--donker2)}
.welniet .niet{border:2px dotted var(--stippel)}
.welniet .mono{display:block;margin-bottom:10px}
.welniet p{margin:0;font-family:var(--kop);font-weight:700;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.2;letter-spacing:-.015em}
.welniet .niet p{color:var(--mid)}
@media (max-width:560px){.welniet{grid-template-columns:1fr}}

/* data en governance */
.woorden{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:0 var(--rand);
  border-top:1px solid var(--ink);margin:16px 0 0}
.woorden > div{padding:14px 0;border-bottom:2px dotted var(--stippel)}
.woorden dt{font-family:var(--dot);font-weight:900;font-size:1.25rem;line-height:1.1;text-transform:uppercase}
.woorden dd{margin:4px 0 0;font-size:.95rem}
.vragen details{border-bottom:2px dotted var(--stippel)}

/* de bestaande pagina's krijgen dezelfde toets */
.sec .nr{font-family:var(--dot);font-weight:900;color:var(--accent)}
.agenda time{font-family:var(--dot);font-weight:900;font-size:1.45rem;letter-spacing:0}
.agenda li,.praktisch dt,.praktisch dd{border-bottom:2px dotted var(--stippel)}
.blok{border-bottom:0}
.blok + .blok{border-left:2px dotted var(--stippel)}
.kaart .ster{color:var(--accent)}

/* ---------- voet ---------- */
.voet.v6{padding:clamp(40px,6vw,72px) 0 28px;border-top:2px dotted var(--stippel);overflow:hidden}
.voet.v6 .wrap{display:block}
.voet-rij{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px 40px}
.voet-nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.voet-nav a{text-decoration:none;color:var(--mid)}
.voet-nav a:hover{color:var(--accent)}
.voet-naam{font-family:var(--kop);font-weight:800;font-size:clamp(4rem,26.3vw,20rem);line-height:.8;letter-spacing:-.06em;
  margin:clamp(28px,4vw,56px) 0 clamp(20px,3vw,36px) -.045em;user-select:none}
.voet-naam .punt{color:var(--accent)}
.voet-klein{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px}
.voet-klein .mono{font-size:.64rem}

/* ---------- beweging: alleen wie er geen last van heeft ---------- */
@media (prefers-reduced-motion:no-preference){
  .vraag h1 .punt,.dkop h1 .punt{animation:val .7s cubic-bezier(.3,1.6,.5,1) .3s both}
  .js [data-in]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--zacht),transform .7s var(--zacht)}
  .js [data-in].in{opacity:1;transform:none}
  .lijn::after{animation:puls 2.4s ease-in-out infinite}
  @keyframes puls{50%{box-shadow:0 0 0 11px rgba(214,58,18,.12)}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ================= v7-rustig (09-11): zelfde afwerking, een rustiger scherm en een nieuwe tekst =================
   Tekst uit Pieters eigen woorden en uit wat klanten en ontvangers zeiden, niet uit ux/ (zie README, ronde 5). */
.start{padding:clamp(48px,8vw,120px) 0 clamp(48px,7vw,104px);border-bottom:2px dotted var(--stippel)}
.start-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,80px);align-items:center}
.start .wie{margin:0 0 clamp(20px,3vw,36px)}
.start .dag{font-family:var(--kop);font-weight:700;font-size:clamp(1.2rem,1.9vw,1.6rem);letter-spacing:-.02em;color:var(--mid);margin:0 0 10px}
.start h1{font-family:var(--kop);font-weight:800;font-size:clamp(2.1rem,4.9vw,4.3rem);line-height:1;letter-spacing:-.04em;margin:0;max-width:12em}
.start h1 .punt{color:var(--accent)}
.start .kern{font-size:1.14em;max-width:30em;margin:clamp(18px,2.4vw,28px) 0 0}
.start-foto{margin:0;position:relative}
.start-foto::before{content:"";position:absolute;left:12px;top:12px;width:100%;aspect-ratio:1;background:var(--accent);border-radius:2px}
.start-foto img{position:relative;width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.05);border-radius:2px}
@media (max-width:760px){.start-raster{grid-template-columns:1fr}.start-foto{max-width:200px;order:-1}}
/* de knop in de mockup wisselt alleen de kop: gewoon (wat ik doe) of het verhaal (mijn eigen job) */
.kop-verhaal{display:none}
.start-zin .kop-gewoon{display:none}
.start-zin .kop-verhaal{display:inline}
.over{grid-template-columns:1fr}
.over > div{max-width:46em}
.over-foto{display:none}

.sec h2.zacht{font-size:clamp(1.6rem,2.8vw,2.3rem);letter-spacing:-.03em;margin-bottom:1em}
.herken{border-top:1px solid var(--ink)}
.herken details{border-bottom:1px solid var(--ink)}
.herken summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:clamp(16px,2vw,24px) 0;font-family:var(--kop);font-weight:700;font-size:clamp(1.25rem,2.6vw,2.1rem);line-height:1.1;
  letter-spacing:-.03em;transition:color .2s,padding .35s var(--zacht)}
.herken summary::-webkit-details-marker{display:none}
.herken summary::after{content:"+";font-family:var(--mono);font-weight:400;font-size:1.3rem;color:var(--accent);transition:transform .25s}
.herken details[open] summary::after{transform:rotate(45deg)}
.herken summary:hover{color:var(--accent);padding-left:8px}
.herken details p{margin:0 0 clamp(18px,2.2vw,26px);max-width:36em;font-size:1.08em}
.herken-voet{margin:24px 0 0;color:var(--mid)}

.doe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--rand);border-top:1px solid var(--ink)}
.doe li{padding:22px 0 20px;border-bottom:2px dotted var(--stippel)}
.doe h3{font-family:var(--kop);font-weight:700;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.025em;line-height:1.1;margin:12px 0 6px}
.doe p{margin:0;max-width:28em}
@media (max-width:760px){.doe{grid-template-columns:1fr}}

.lijn.drie-haltes{grid-template-columns:repeat(3,minmax(0,1fr))}
.lijn.drie-haltes::after{left:calc(var(--pos) * 33.333% + 5px)}
.lijn.drie-haltes p{max-width:19em}
.bord-voet a{color:var(--papier)}
.bord-voet a:hover{color:var(--accent)}
@media (max-width:760px){.lijn.drie-haltes{grid-template-columns:1fr}}

.vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.vier > div{padding:20px 22px 4px 0}
.vier > div + div{padding-left:22px;border-left:2px dotted var(--stippel)}
.vier h3{font-family:var(--kop);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;line-height:1.15;margin:0 0 6px}
.vier p{margin:0}
@media (max-width:900px){.vier{grid-template-columns:1fr 1fr}.vier > div{border-bottom:2px dotted var(--stippel);padding-bottom:18px}
  .vier > div:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:520px){.vier{grid-template-columns:1fr}.vier > div + div{padding-left:0;border-left:0}}

.band-menie.klein{padding:clamp(40px,6vw,72px) 0}
.band-menie.klein .citaat p{font-size:clamp(1.4rem,3vw,2.3rem)}
.band-intro{margin:0 0 24px;max-width:34em}

.contact.slot.rustig h2{font-size:clamp(2.1rem,5.4vw,4.4rem);line-height:.96;letter-spacing:-.04em}
.contact.slot.rustig .mail{font-size:clamp(1.2rem,2.8vw,2rem)}

.proto{position:fixed;left:12px;bottom:12px;z-index:9;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;background:var(--ink);color:var(--donker2);
  padding:8px 10px;border-radius:3px;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;box-shadow:4px 4px 0 var(--accent)}
.proto button{font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:1px solid #55554F;color:var(--papier);padding:5px 8px;border-radius:2px;cursor:pointer}
.proto button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
@media print{.proto{display:none}}

.start-foto img,.over img{height:auto}

/* ronde 10-11: eigen pagina's voor consultancies en grotere organisaties */
.dkop h1.rustig{font-size:clamp(2.1rem,4.9vw,4.3rem);line-height:1;letter-spacing:-.04em;max-width:13em}
.vier.drie-kol{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.vier.drie-kol{grid-template-columns:1fr}.vier.drie-kol > div + div{padding-left:0;border-left:0}}
.lees{max-width:46em}
.lijn a{color:var(--papier)}
.lijn a:hover{color:var(--accent)}
.sec .praktisch{max-width:46em}

/* ronde 7 (10-11): de verborgen pagina onder de motorkap; de ingang is de punt van de naam in de voet */
.motorkap-link{text-decoration:none;display:inline-block;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.motorkap-link:hover,.motorkap-link:focus-visible{color:var(--accent);transform:scale(1.25) translateY(-.02em)}
.lijn.vijf-haltes{grid-template-columns:repeat(5,minmax(0,1fr))}
.lijn.vijf-haltes::after{left:calc(var(--pos) * 20% + 5px)}
.lijn.vijf-haltes li{padding-right:20px}
.lijn.vijf-haltes h3{font-size:clamp(1.1rem,1.9vw,1.7rem)}
.lijn.vijf-haltes p{font-size:.95rem}
@media (max-width:900px){.lijn.vijf-haltes{grid-template-columns:1fr}
  .lijn.vijf-haltes::before{left:8px;right:auto;top:4px;bottom:0;border-top:0;border-left:4px dotted #5F5F5B}
  .lijn.vijf-haltes::after{display:none}
  .lijn.vijf-haltes li{padding:0 0 28px 40px}.lijn.vijf-haltes li::before{top:2px;background:var(--accent);border-color:var(--accent)}}
.opdrachten summary{font-size:clamp(1.15rem,2vw,1.5rem)}
.opdrachten .promptkaart{margin:0 0 24px}
.opdrachten .promptkaart pre{max-height:none}
.log6.breed{max-width:520px;margin:0 0 24px}
.log6.breed time{flex:0 0 5.5em}