/* Studio Mierenwerk - site v2 op merk 5.1.
   Drie kleuren (inkt, papier, oxide), twee letters (Archivo Black, Space Mono), lijnen van
   1,5 px, vierkante hoeken, en een harde blokschaduw als iets wordt opgetild. Tokens staan in
   tokens.css (geleverd met het merk). Wat hier NIET meer staat, is bewust weg: korrel,
   kanteling, zeefdruk-filters, tweede en derde accentkleur, handschrift. */

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:clip; background:var(--mw-paper);}
body{font-family:var(--mw-font-body); font-size:15px; line-height:1.65; color:var(--mw-ink);
  background:var(--mw-paper); -webkit-font-smoothing:antialiased; overflow-x:clip;}
/* clip en niet hidden: overflow-x:hidden maakt van body een scrollcontainer, en dan plakt de
   sticky header nergens aan vast en scrolt hij gewoon weg. Met clip blijft hij staan en wordt
   een te brede scene nog steeds afgesneden. */
::selection{background:var(--mw-oxide); color:var(--mw-paper);}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
img{height:auto;}
button{font:inherit; cursor:pointer;}

:focus-visible{outline:3px solid var(--mw-oxide); outline-offset:4px;}
.on-oxide :focus-visible, .on-ink :focus-visible{outline-color:var(--mw-paper);}

.skip{position:fixed; left:16px; top:-100px; z-index:200; background:var(--mw-ink); color:var(--mw-paper);
  padding:13px 16px; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;}
.skip:focus{top:16px;}

/* ---------- typografie ---------- */
h1,h2,h3,.display{font-family:var(--mw-font-display); font-weight:400; line-height:1.04; letter-spacing:-0.03em;}
h1{font-size:clamp(40px,4.9vw,66px); text-wrap:balance;}
h2{font-size:clamp(32px,4vw,54px);}
h3{font-size:24px; line-height:1.12; letter-spacing:-0.02em;}
.eyebrow{font-size:11px; letter-spacing:0.12em; text-transform:uppercase; line-height:1.6;}
.oxide{color:var(--mw-oxide);}
.muted{color:var(--mw-muted);}
.lead{font-size:16px; line-height:1.7; max-width:44ch; text-wrap:pretty;}
/* de rode streep: 64 x 6 px onder een grote kop, een keer per scherm */
.streep{width:64px; height:6px; background:var(--mw-oxide);}

/* ---------- knoppen: worden opgetild, laten een harde schaduw achter ---------- */
.mw-button{display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px;
  padding:11px 20px; border:2px solid var(--mw-ink); background:var(--mw-ink); color:var(--mw-paper);
  font-size:13px; font-weight:700; letter-spacing:0.01em; transition:transform var(--mw-duration) var(--mw-ease), box-shadow var(--mw-duration) var(--mw-ease);}
.mw-button:hover{transform:translate(-2px,-2px); box-shadow:var(--mw-shadow);}
.mw-button:active{transform:none; box-shadow:none;}
.mw-button--secondary{background:transparent; color:var(--mw-ink);}
.mw-button--light{background:var(--mw-paper); border-color:var(--mw-paper); color:var(--mw-ink);}
.mw-button--light:hover{box-shadow:4px 4px 0 var(--mw-ink);}
.mw-link{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:13px; font-weight:700;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px;}
.mw-link:hover{color:var(--mw-oxide);}

/* ---------- raster ---------- */
.wrap{max-width:var(--mw-content); margin:0 auto; padding:0 var(--mw-gutter);}
.sectie{border-top:1.5px solid var(--mw-ink); padding:clamp(44px,6vw,80px) 0 clamp(56px,7vw,96px); scroll-margin-top:84px;}
.sectiekop{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:clamp(28px,4vw,44px);}
.sectiekop .eyebrow{color:var(--mw-oxide); margin-bottom:14px;}
.sectiekop p{font-size:13px; max-width:40ch; color:var(--mw-muted); text-wrap:pretty;}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:100; background:var(--mw-paper); border-bottom:1.5px solid var(--mw-ink);}
.head-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px; padding-top:14px; padding-bottom:14px;}
.site-brand{display:flex; align-items:center; min-height:44px; flex:none;}   /* het logo is 24px hoog, het raakvlak niet */
/* het gesloten logo: dezelfde twee blokken als in de hero, zonder mier; 44px hoog */
.site-brand img{width:auto; height:44px;}
nav.mainnav{display:flex; gap:clamp(16px,2.4vw,30px); align-items:center;}
nav.mainnav a{font-size:13px; letter-spacing:0.08em; text-transform:uppercase; min-height:44px; display:flex; align-items:center; border-bottom:2px solid transparent; transition:color .15s;}
nav.mainnav a:hover{color:var(--mw-oxide);}
nav.mainnav a.actief{border-bottom-color:var(--mw-ink);}
nav.mainnav a[href="#contact"]{color:var(--mw-oxide);}
.navtoggle{display:none;}

/* ---------- hero: het logo bouwt zichzelf ---------- */
.hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:center;
  padding-top:clamp(40px,6vw,88px); padding-bottom:clamp(36px,5vw,64px);}
.hero-tekst{display:flex; flex-direction:column; gap:24px; align-items:flex-start;}
.hero-tekst .eyebrow{color:var(--mw-oxide);}
.hero-tekst .knoppen{display:flex; gap:14px; flex-wrap:wrap;}
.hero-beeld{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px;}
/* De SVG is het geleverde logo, ongewijzigd. overflow:visible omdat het blok en de mier bij het
   opbouwen even buiten het eigen kader staan; de eindstand valt er precies in. */
#heroLogo{width:100%; max-width:640px; height:auto; overflow:visible;}
#heroOpnieuw{background:none; border:0; min-height:44px; padding:8px 12px; font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--mw-muted); opacity:0; transition:opacity .4s, color .15s;}
#heroOpnieuw.toon{opacity:1;}                /* hero.js zet .toon als het logo stilstaat */
@media (scripting: none){ #heroOpnieuw{display:none;} }   /* zonder scripts doet de knop niets */
#heroOpnieuw:hover{color:var(--mw-oxide);}
/* Geen flits van het complete logo voordat hero.js de startstand heeft gezet: tot dan is het
   logo onzichtbaar. Alleen als er scripts draaien en beweging mag; laadt hero.js niet, dan
   verschijnt het logo na 2,5 s alsnog (vangnet). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference){
  #heroLogo:not(.gezet){opacity:0; animation:hero-vangnet 0s 2.5s forwards;}
}
@keyframes hero-vangnet{to{opacity:1;}}

/* ---------- manifest ---------- */
.manifest{border-top:1.5px solid var(--mw-ink); padding:clamp(40px,6vw,80px) 0;}
.manifest .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:32px; align-items:end;}
.manifest p{font-size:16px; line-height:1.7; max-width:44ch; text-wrap:pretty;}

/* ---------- wat we doen ---------- */
/* de eerste kaart (advies) staat breed bovenaan: eerst uitzoeken, dan pas maken */
.aanpak > .mierkaart:first-child{grid-column:1 / -1;}
.aanpak{display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--mw-line); border-left:1px solid var(--mw-line);}
.mierkaart{position:relative; display:grid; grid-template-columns:40px 1fr; gap:20px; padding:32px;
  border-right:1px solid var(--mw-line); border-bottom:1px solid var(--mw-line);}
.mierkaart .dnum{font-size:12px; color:var(--mw-oxide);}
.mierkaart h3{margin-bottom:16px;}
.mierkaart .dbelofte{font-size:14px; line-height:1.65; text-wrap:pretty;}
.mierkaart .dlist{list-style:none; margin-top:18px; display:flex; flex-wrap:wrap; gap:4px 8px; font-size:12px; color:var(--mw-muted);}
.mierkaart .dlist li:not(:last-child)::after{content:"\00b7"; margin-left:8px;}
.mierkaart .dbewijs{display:inline-flex; align-items:center; min-height:44px; margin-top:8px; font-size:12px; font-weight:700;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px;}
.mierkaart .dbewijs:hover{color:var(--mw-oxide);}

/* ---------- werk: vijf kaarten, de eerste twee groot ---------- */
.werklijst{display:grid; grid-template-columns:repeat(6,1fr); gap:44px 24px;}
.wl-rij{grid-column:span 2; min-width:0; display:flex; flex-direction:column; gap:12px; cursor:pointer;}
.wl-rij:nth-child(-n+2){grid-column:span 3;}
.wl-thumb{position:relative; aspect-ratio:4/3; border:1.5px solid var(--mw-ink); background:var(--mw-soft); overflow:hidden;
  transition:transform var(--mw-duration) var(--mw-ease), box-shadow var(--mw-duration) var(--mw-ease);}
.wl-rij:nth-child(-n+2) .wl-thumb{aspect-ratio:3/2;}
.wl-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top;}
.wl-rij:hover .wl-thumb, .wl-rij:focus-visible .wl-thumb{transform:translate(-4px,-4px); box-shadow:6px 6px 0 var(--mw-ink);}
.wl-meta{display:flex; justify-content:space-between; gap:12px; font-size:11px; letter-spacing:0.1em; margin-top:8px;}
.wl-meta .code{color:var(--mw-oxide); font-weight:700;}
.wl-rij h3{font-size:24px;}
.wl-rij .disc{font-size:12px; color:var(--mw-muted);}
.wl-rij .wl-hook{font-size:14px; line-height:1.6; text-wrap:pretty;}
.wl-actie{display:inline-flex; align-items:center; min-height:40px; font-size:12px; font-weight:700; text-decoration:underline;
  text-decoration-thickness:1.5px; text-underline-offset:4px;}
.wl-rij:hover .wl-actie{color:var(--mw-oxide);}

/* ---------- over ---------- */
.over-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(32px,5vw,72px); align-items:start;}
.over-tekst{display:flex; flex-direction:column; gap:24px;}
.over-tekst .stelling{font-family:var(--mw-font-display); font-size:clamp(24px,2.8vw,36px); line-height:1.1; letter-spacing:-0.02em; text-wrap:balance;}
.over-tekst p{max-width:52ch; text-wrap:pretty;}
/* de route: stappen die groeien naar een rode ring, het moment dat de klant het zelf kan */
.route{list-style:none; border-top:1.5px solid var(--mw-ink); padding-top:22px; display:grid; grid-template-columns:36px 1fr; row-gap:12px; column-gap:14px; align-items:center; font-size:14px;}
.route li{display:contents;}
.route i{display:block; border-radius:50%; background:var(--mw-ink); justify-self:center;}
.route li:nth-child(1) i{width:8px; height:8px;} .route li:nth-child(2) i{width:11px; height:11px;}
.route li:nth-child(3) i{width:14px; height:14px;} .route li:nth-child(4) i{width:17px; height:17px;}
.route li:nth-child(5) i{width:20px; height:20px;}
.route li:last-child i{width:30px; height:30px; background:none; border:6px solid var(--mw-oxide);}
.route li:last-child span{color:var(--mw-oxide); font-weight:700;}

/* het portret: de kolonie vormt het gezicht (portret.js), in een kader als een foto */
.portret-moment{position:relative; border:1.5px solid var(--mw-ink); background:var(--mw-paper);}
.portret-moment canvas{display:block; width:100%; height:clamp(360px,52vh,560px);}
.pm-ui{display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 16px 20px; border-top:1px solid var(--mw-line);}
.pm-cap{font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mw-muted); opacity:0; transition:opacity .6s;}
.pm-cap.toon{opacity:1;}

/* ---------- contact: een rood vlak, papieren letters ---------- */
.on-oxide{background:var(--mw-oxide); color:var(--mw-paper);}
#contact{border-top:1.5px solid var(--mw-ink); padding:clamp(56px,8vw,112px) 0; scroll-margin-top:84px;}
/* de kaart en de mieren staan in contactscene.css */

/* ---------- footer ---------- */
footer{border-top:1.5px solid var(--mw-ink); padding:28px 0 40px;}
.foot-inner{display:flex; justify-content:space-between; gap:16px 32px; flex-wrap:wrap; font-size:12px; line-height:1.6;}
.foot-inner .oxide{letter-spacing:0.08em; text-transform:uppercase;}

/* ============ VITRINE: de werklijst opent de echte site, in een browser in de pagina ============ */
.vitrine{position:fixed; inset:0; z-index:120; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:min(4vh,34px) 24px;}
.vitrine[hidden]{display:none;}
.vt-scrim{position:absolute; inset:0; background:color-mix(in srgb, var(--mw-paper) 92%, transparent); cursor:zoom-out;}
.vt-frame{position:relative; width:min(1120px,94vw); background:var(--mw-paper); border:1.5px solid var(--mw-ink); padding:10px 10px 0; box-shadow:10px 10px 0 var(--mw-ink);}
.vt-bar{display:flex; align-items:center; gap:12px; padding:5px 4px 11px; font-size:11px; letter-spacing:0.06em;}
.vt-dots{display:flex; gap:5px; flex:none;}
.vt-dots i{width:8px; height:8px; border-radius:50%; background:var(--mw-line);}
.vt-url{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:var(--mw-soft); border-bottom:2px solid var(--vt-merk,var(--mw-oxide)); padding:5px 10px; color:var(--mw-muted);}
.vt-toggle{display:flex; flex:none; border:1px solid var(--mw-ink);}
.vt-toggle button{background:none; border:0; padding:5px 9px; font-size:11px; letter-spacing:0.1em; color:var(--mw-muted);}
.vt-toggle button.aan{background:var(--vt-merk,var(--mw-oxide)); color:var(--mw-paper);}
.vt-live{flex:none; color:var(--vt-merk,var(--mw-oxide)); border-bottom:1px solid currentColor; padding-bottom:2px; font-weight:700;}
.vt-live[hidden]{display:none;}
.vt-sluit{flex:none; background:none; border:0; font-size:15px; line-height:1; padding:4px 6px; color:var(--mw-muted);}
.vt-sluit:hover{color:var(--mw-oxide);}
.vt-scherm{position:relative; overflow:hidden; background:#fff; transition:background .25s; height:min(66vh,620px); border-top:1px solid var(--mw-line);}
.vt-scherm.mobiel{background:var(--mw-soft);}
.vt-still{position:absolute; inset:0; background:var(--mw-paper);}
.vt-scherm iframe{position:absolute; top:0; left:0; border:0; transform-origin:0 0; opacity:0; transition:opacity .5s ease; background:#fff;}
.vt-scherm iframe.klaar{opacity:1;}
.vt-laden{position:absolute; left:14px; bottom:12px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--mw-muted); background:var(--mw-paper); padding:5px 9px;}
.vt-laden[hidden]{display:none;}
.vt-verken{position:absolute; right:14px; bottom:12px; z-index:2; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--mw-paper); background:var(--mw-ink); padding:5px 10px; opacity:0; transition:opacity .35s ease; pointer-events:none;}
.vt-verken.toon{opacity:1;}
.vt-mier{position:absolute; top:-16px; left:0; z-index:2; pointer-events:none;}
.vt-onder{position:relative; display:flex; align-items:center; gap:22px; max-width:94vw;}
.vt-nav{background:none; border:1.5px solid var(--mw-ink); width:44px; height:44px; font-size:15px; color:var(--mw-ink); flex:none;}
.vt-nav:hover{background:var(--mw-ink); color:var(--mw-paper);}
.vt-cap{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; justify-content:center;}
.vt-code{font-size:11px; letter-spacing:0.1em; background:var(--vt-merk,var(--mw-oxide)); color:var(--mw-paper); padding:3px 7px;}
.vt-naam{font-family:var(--mw-font-display); font-size:19px; letter-spacing:-0.01em;}
.vt-disc{font-size:11px; letter-spacing:0.13em; text-transform:uppercase; color:var(--mw-muted);}

/* ============ RESPONSIVE ============ */
@media(max-width:960px){
  .hero{grid-template-columns:1fr; gap:28px;}
  /* de boodschap eerst: op een smal scherm staat de kop boven het logo (persona-ronde 2026-09-28) */
  #heroLogo{max-width:520px;}
  .aanpak{grid-template-columns:1fr 1fr;}
  .wl-rij, .wl-rij:nth-child(-n+2){grid-column:span 3;}
  .over-grid{grid-template-columns:1fr;}
  .sectiekop{display:block;}
  .sectiekop p{margin-top:16px;}
}
@media(max-width:640px){
  .head-inner{min-height:64px; padding-top:10px; padding-bottom:10px;}
  .site-brand img{height:38px;}
  nav.mainnav{display:none;}
  nav.mainnav.open{display:flex; position:absolute; top:100%; right:0; left:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--mw-paper); border-bottom:1.5px solid var(--mw-ink); padding:8px var(--mw-gutter) 16px;}
  nav.mainnav.open a{min-height:48px; border-bottom:1px solid var(--mw-line);}
  .navtoggle{display:inline-flex; align-items:center; min-height:44px; padding:0 12px; background:none; border:1.5px solid var(--mw-ink);
    font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--mw-ink);}
  .hero{padding-top:24px;}
  #heroLogo{max-width:300px;}
  .inkt-knop{display:none;}   /* speeltje voor desktop; op de telefoon ruis boven de vouw */
  h1{font-size:clamp(36px,10.5vw,48px);}
  .aanpak{grid-template-columns:1fr;}
  .mierkaart{grid-template-columns:28px 1fr; gap:14px; padding:22px 18px;}
  .werklijst{grid-template-columns:1fr; gap:36px;}
  .wl-rij, .wl-rij:nth-child(-n+2){grid-column:1;}
  .wl-rij:nth-child(n) .wl-thumb{aspect-ratio:3/2;}
  .portret-moment canvas{height:clamp(300px,60vw,420px);}
  .foot-inner{flex-direction:column;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important; transition:none!important;}
}