/* xnovo 3.0 · Projecten (na basis.css en secties.css)
   Alleen wat deze pagina zelf heeft: het inktblok met het venster op het werk dat live staat, de filter met het schuivende blok,
   de projectkaarten met status, het verhaal van conceptsite tot opdracht (de lijn op het vonkvlak) en het aanbod. Regels: DESIGN.md. */

/* ---------------------------------------------------------------- status: een blokje met een woord (Live, In opbouw, Conceptsite) */
.pj-st{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--sans);white-space:nowrap}
.pj-st::before{content:"";flex:none;width:8px;height:8px;background:currentColor}
.pj-st--live::before{background:var(--vonk);animation:pj-puls 2.4s var(--ease-energie) infinite}
.pj-st--bouw::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px currentColor}
.pj-st--concept::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
@keyframes pj-puls{50%{opacity:.35}}

/* ---------------------------------------------------------------- 1 · hero: uitleg, knop, risico, bewijs; rechts het inktblok met het venster */
.pj-held .ph-links{gap:26px}
.pj-acties{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pj-risico{margin-top:-8px}
.pj-bewijs{margin:0;display:flex;align-items:center;gap:14px;font-size:15px;line-height:1.3;color:var(--grafiet)}
.pj-bewijs b{font:430 clamp(44px,4.2vw,64px)/.8 var(--sans);letter-spacing:-.05em;color:var(--inkt);font-variant-numeric:tabular-nums}
/* de klanten met logo, klein onder het getal: wie er al voor koos */
.pj-logos{margin:0}
.pj-logos .label{margin-bottom:10px}
.pj-logos .klant-logos{padding:12px 0 0;gap:12px 30px;border-bottom:0}
.pj-logos .klant-logos{--logo-h:26px}

.pj-blok{position:relative;align-self:start}
.pj-laag{position:relative;background:var(--inkt);color:var(--papier);padding:clamp(16px,2.2vw,32px) clamp(16px,2.2vw,32px) 0}
.pj-venster{display:block;max-width:none;text-decoration:none;color:var(--inkt);transition:transform .6s var(--ease-uit)}
.pj-venster:hover{transform:translateY(-3px)}
.pj-venster:focus-visible{outline:2px solid var(--vonk);outline-offset:4px}
.pj-venster .pw-balk{display:flex;height:40px;gap:12px}
.pj-url{flex:1;min-width:0;height:26px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:7px;background:var(--wit);box-shadow:0 0 0 1px rgba(18,17,16,.08);font:500 13px/1 var(--sans);color:var(--grafiet);white-space:nowrap}
.pj-url-tekst{display:block}
.pj-st--licht{min-width:92px;justify-content:flex-end;color:var(--inkt)}
.pj-scherm{position:relative;display:block;aspect-ratio:16 / 10;overflow:hidden;background:#F1F4F5}
.pj-scherm img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;background:var(--pj-bg,#F1F4F5)}
.pj-scherm img.is-aan{z-index:2}
/* de keuzes onder het venster: naam, status en een oranje lijn die volloopt zolang het venster zelf doorloopt */
.pj-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(12px,1.2vw,18px)}
.pj-tabs button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:56px;padding:12px 12px 14px 0;border:0;border-top:1px solid rgba(244,244,241,.2);background:none;color:rgba(244,244,241,.6);text-align:left;cursor:pointer;transition:color .3s var(--ease-energie)}
.pj-tabs button span{font:600 15px/1.2 var(--sans)}
.pj-tabs button small{font:500 13px/1.2 var(--sans);opacity:.8}
.pj-tabs button:hover,.pj-tabs button[aria-pressed="true"]{color:var(--papier)}
.pj-tabs button i{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--vonk);transform:scaleX(0);transform-origin:0 50%}
.pj-tabs button[aria-pressed="true"] i{transform:scaleX(1)}
.pj-tabs button:focus-visible{outline:2px solid var(--vonk);outline-offset:-2px}

/* ---------------------------------------------------------------- 2 · alle projecten: de filter blijft bij je terwijl je kijkt */
.pj-balk{position:sticky;top:80px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:0 calc(var(--rand) * -1) clamp(32px,3.4vw,52px);padding:12px var(--rand);background:var(--inkt);border-bottom:1px solid rgba(244,244,241,.14)}
.pj-filter{position:relative;display:flex;gap:2px;padding:4px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(244,244,241,.22)}
.pj-filter button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:0;border-radius:999px;background:none;color:rgba(244,244,241,.8);font:600 15px/1 var(--sans);white-space:nowrap;cursor:pointer;transition:color .42s var(--ease-wissel)}
.pj-filter button small{font:500 13px/1 var(--sans);font-variant-numeric:tabular-nums;opacity:.72}
.pj-filter button:hover{color:var(--papier)}
.pj-filter button[aria-pressed="true"]{color:var(--inkt)}
.pj-filter button:focus-visible{outline:2px solid var(--vonk);outline-offset:2px}
.pj-filter-blok{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:var(--papier);pointer-events:none}
/* zonder script: de gekozen knop krijgt zelf het vlak */
.pj-filter:not(.is-klaar) button[aria-pressed="true"]{background:var(--papier)}
.pj-telt{margin:0;font:500 14px/1.2 var(--sans);color:rgba(244,244,241,.62);font-variant-numeric:tabular-nums;white-space:nowrap}

/* de vraag boven de filter: je kiest zelf wat je wilt zien (en het formulier onderaan kiest mee) */
.pj-vraag{margin:0;font:500 18px/1.3 var(--sans);color:var(--papier)}

/* het raster: per rij een brede en een smalle kaart, om en om; even hoog, zodat de namen op één lijn staan */
.pj-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--kol);row-gap:clamp(56px,6vw,96px);align-items:start}
.pj-kaart{grid-column:span 6;min-width:0}
.pj-kaart.is-breed{grid-column:span 7}
.pj-kaart.is-smal{grid-column:span 5}
.pj-kaart[hidden]{display:none}
.pj-link{display:flex;flex-direction:column;gap:20px;color:inherit;text-decoration:none;border-radius:clamp(18px,2vw,26px)}
.pj-link:focus-visible{outline:2px solid var(--vonk);outline-offset:6px}
.pj-media{position:relative;margin:0;height:clamp(280px,31vw,480px);border-radius:clamp(18px,2vw,26px);overflow:hidden;background:#1E1D1B;isolation:isolate}
.pj-media img,.pj-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pj-pos,50% 0);transition:transform .9s var(--ease-uit)}
/* een schermafbeelding van een site: helemaal zichtbaar, op de achtergrondkleur van die site */
.pj-media--past{background:var(--pj-bg)}
.pj-media--past img{object-fit:contain;object-position:50% 50%}
/* de telefoon van Esimmy: heel in beeld, de randen lopen over in het grijs van de foto */
.pj-media--telefoon{background:linear-gradient(180deg,#C1C3C2 0%,#C5C5C5 50%,#CACAC9 75%,#D3D3D3 100%) 0 0 / 50% 100% no-repeat,linear-gradient(180deg,#D8D8D8 0%,#DADADA 25%,#D8D8D8 60%,#E2E2E2 100%) 100% 0 / 50% 100% no-repeat}
.pj-media--telefoon img{object-fit:contain;object-position:50% 50%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent)}
.pj-link:hover .pj-media img,.pj-link:hover .pj-media video{transform:scale(1.03)}
.pj-media .pj-st{position:absolute;z-index:2;left:14px;bottom:14px;height:30px;padding:0 12px 0 10px;border-radius:999px;background:var(--papier);color:var(--inkt);box-shadow:0 0 0 1px rgba(18,17,16,.08)}
.pj-info{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-right:clamp(0px,2vw,32px)}
.pj-soort{margin:0;display:flex;flex-wrap:wrap;gap:4px 12px;font:500 14px/1.3 var(--sans);color:rgba(244,244,241,.66)}
.pj-nr{font-variant-numeric:tabular-nums;color:var(--papier)}
.pj-info h3{font:430 clamp(30px,2.6vw,44px)/1.02 var(--sans);letter-spacing:-.035em}
.pj-zin{margin:0;max-width:34em;font-size:17px;line-height:1.5;color:rgba(244,244,241,.8)}
.pj-klein{margin:-4px 0 0;max-width:34em;font-size:15px;line-height:1.4;color:rgba(244,244,241,.62)}
.pj-info .lnk{margin-top:6px}
.pj-link:hover .lnk{background-size:0 1.5px;background-position:100% 100%}
.pj .noot{color:rgba(244,244,241,.72)}
.pj .noot b{color:var(--papier)}
.pj-noot{margin-top:clamp(56px,6vw,88px)}
.pj-noot + .pj-noot{margin-top:10px}
.pj-verder .lnk{margin-left:6px}

/* wat het kost: direct na het werk; drie bedragen naast elkaar tussen lijnen, met wat erin zit */
.pj-prijs{margin-top:clamp(96px,10vw,160px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--kol)}
.pj-prijs-kop{grid-column:1 / span 7;display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(32px,3.6vw,52px)}
.pj-prijs-kop h3{font:430 clamp(32px,3.2vw,52px)/1.02 var(--sans);letter-spacing:-.04em;text-wrap:balance}
.pj-prijs-rij{grid-column:1 / -1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--kol)}
.pj-prijs-rij li{display:flex;flex-direction:column;gap:10px;padding:20px clamp(0px,2vw,32px) 0 0;border-top:1.5px solid rgba(244,244,241,.32)}
.pj-prijs-rij li:first-child{border-top-color:var(--papier)}
.pj-prijs-soort{margin:0;font:500 15px/1.3 var(--sans);color:rgba(244,244,241,.66)}
.pj-bedrag{margin:4px 0 0;font:430 clamp(40px,3.8vw,62px)/1 var(--sans);letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--papier)}
.pj-bedrag small{font:400 16px/1.3 var(--sans);letter-spacing:0;color:rgba(244,244,241,.66)}
.pj-prijs-zin{margin:6px 0 0;max-width:24em;font-size:16px;line-height:1.5;color:rgba(244,244,241,.8)}
.pj-prijs-noot{grid-column:1 / span 8;margin-top:clamp(28px,3vw,40px)}
.pj-prijs .sectie-actie{grid-column:1 / -1}
/* de afspraak bij de knop, en wie je spreekt */
.pj-afspraak{grid-column:1 / span 8;margin:clamp(28px,3vw,40px) 0 0;max-width:36em;font-size:18px;line-height:1.5;color:rgba(244,244,241,.88)}
.pj-afspraak b{color:var(--papier);font-weight:600}
.pj-wie{grid-column:1 / -1;margin:24px 0 clamp(24px,2.6vw,36px);color:rgba(244,244,241,.78)}
.pj-wie b{color:var(--papier)}

/* ---------------------------------------------------------------- 3 · het verhaal op het vonkvlak (het enige van de pagina): de lijn loopt van conceptsite tot opdracht */
.pv{background:var(--vonk);color:var(--inkt)}
.pv .label{color:rgba(18,17,16,.8)}
.pv .lead{color:rgba(18,17,16,.88)}
.pv h2{font-size:clamp(46px,6vw,112px);line-height:.95;letter-spacing:-.05em}
.pv .strook-balk{background:var(--inkt)}
.pv ::selection{background:var(--inkt);color:var(--papier)}
.nadruk{font-weight:640;color:var(--inkt)}
.pv-lijst{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--inkt)}
.pv-rij{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--kol);align-items:start;padding:clamp(36px,4vw,56px) 0;border-bottom:1px solid rgba(18,17,16,.24)}
.pv-wie{grid-column:1 / span 3}
.pv-wie h3{font:430 clamp(30px,2.6vw,44px)/1.02 var(--sans);letter-spacing:-.035em}
.pv-wie p{margin:8px 0 0;font-size:15px;color:rgba(18,17,16,.78)}
.pv-baan{--lijn:1;grid-column:4 / -1;position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--kol)}
/* het spoor en de lijn die erover loopt: van het eerste tot het laatste blok */
.pv-baan::before,.pv-baan::after{content:"";position:absolute;left:11px;right:calc((100% - 2 * var(--kol)) / 3 - 11px);top:10px;height:2px;background:rgba(18,17,16,.22)}
.pv-baan::after{background:var(--inkt);transform-origin:0 50%;transform:scaleX(var(--lijn))}
.pv-stap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-right:12px}
.pv-blok{display:block;width:22px;height:22px;margin-bottom:16px;background:var(--vonk);box-shadow:inset 0 0 0 2px var(--inkt);transition:background .42s var(--ease-wissel)}
.pv-stap b{font:500 clamp(22px,1.9vw,30px)/1.1 var(--sans);letter-spacing:-.025em}
.pv-stap > span{font-size:16px;line-height:1.45;color:rgba(18,17,16,.84)}
.pv-stap .lnk{font-size:16px;color:var(--inkt)}
.pv-stap b,.pv-stap > span{transition:opacity .42s var(--ease-energie)}
/* bereikt: het blok vult zich; nu live is papier, in opbouw half */
.pv-stap.is-aan .pv-blok{background:var(--inkt)}
.pv-stap--nu.is-aan .pv-blok{background:var(--papier)}
.pv-stap--bouw.is-aan .pv-blok{background:linear-gradient(90deg,var(--inkt) 50%,var(--vonk) 50%)}
.pv-baan.is-js .pv-stap:not(.is-aan) b,.pv-baan.is-js .pv-stap:not(.is-aan) > span{opacity:.38}

/* links zijn altijd inkt, ook in de vragen en onder het formulier */
.v-anders .lnk,.g-ondertussen .lnk{color:var(--inkt)}

/* ---------------------------------------------------------------- mobiel */
@media (max-width:900px){
  .pj-laag{padding:14px 12px 0}
  .pj-venster .pw-balk{height:36px;padding:0 10px;gap:8px}
  .pj-venster .pw-dots{display:none}
  .pj-st--licht{min-width:0}
  .pj-tabs button{padding-right:8px}
  .pj-tabs button span{font-size:14px}

  /* filter: één regel die je zijwaarts kunt schuiven */
  .pj-balk{top:80px;padding-top:10px;padding-bottom:10px}
  .pj-filter{overflow-x:auto;scrollbar-width:none;flex:1 1 auto;max-width:max-content}
  .pj-filter::-webkit-scrollbar{display:none}
  .pj-filter{gap:0}
  .pj-filter button{padding:0 11px;gap:6px}
  .pj-filter button small{display:none}
  .pj-telt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pj-vraag{font-size:17px}

  .pj-raster{grid-template-columns:minmax(0,1fr);row-gap:56px}
  .pj-kaart,.pj-kaart.is-breed,.pj-kaart.is-smal{grid-column:1}
  .pj-media{height:auto;aspect-ratio:4 / 3}
  .pj-link{gap:16px}
  .pj-info h3{font-size:32px}
  .pj-klein{font-size:16px}

  /* wat het kost: de drie bedragen onder elkaar */
  .pj-prijs{grid-template-columns:minmax(0,1fr)}
  .pj-prijs-kop,.pj-prijs-rij,.pj-prijs-noot,.pj-prijs .sectie-actie,.pj-afspraak,.pj-wie{grid-column:1}
  .pj-prijs-kop{gap:14px}
  .pj-prijs-rij{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .pj-prijs-rij li{padding-right:0}
  .pj-bedrag{font-size:40px}
  .pj-prijs .sectie-actie{row-gap:6px}
  .pj-prijs .sectie-actie .knop3{flex:1 1 auto}

  /* het verhaal: de lijn loopt omlaag */
  .pv h2{font-size:clamp(34px,10vw,40px)}
  .pv-rij{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .pv-wie,.pv-baan{grid-column:1}
  .pv-baan{grid-template-columns:minmax(0,1fr);row-gap:26px}
  .pv-baan::before,.pv-baan::after{left:10px;right:auto;top:12px;width:2px;height:var(--pv-h,calc(100% - 60px))}
  .pv-baan::after{transform-origin:50% 0;transform:scaleY(var(--lijn))}
  .pv-stap{padding-left:44px;padding-right:0}
  .pv-blok{position:absolute;left:0;top:2px;margin:0}
  .pv-stap b{font-size:24px}
}

@media (prefers-reduced-motion:reduce){.pj-st--live::before{animation:none}}