/* xnovo 3.0 · Webdesign (na basis.css en secties.css)
   Alleen wat deze pagina zelf heeft: de lijnlaptop in de hero, "wat je krijgt" met de site in lagen,
   de klantkaart in het werk, het vonkvlak met de foto en de prijs per pagina. */

/* ---------------------------------------------------------------- 1 · hero: uitleg, knop, risico, bewijs; rechts het inktblok met de laptop */
.wd-acties{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.wd-held .ph-links{gap:26px}
.wd-risico{margin-top:-8px}
.wd-bewijs{margin:0;display:flex;align-items:center;gap:14px;font-size:15px;line-height:1.3;color:var(--grafiet)}
.wd-bewijs b{font:430 clamp(44px,4.2vw,64px)/.8 var(--sans);letter-spacing:-.05em;color:var(--inkt);font-variant-numeric:tabular-nums}
/* wie het maakt, klein naast het bewijs: de echte foto van Milan en Enric samen, met plaats en VBA */
.wd-wie{margin-top:-6px}
.wd-wie small{margin-top:2px}
.wd-blok{position:relative;aspect-ratio:16 / 10.4;align-self:start}
.wd-laag{position:absolute;inset:0;background:var(--inkt)}
.wd-laag canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wd-laag.is-plat{background:var(--inkt) url(../reel/showreel-poster.jpg) 50% 50% / cover no-repeat}
.wd-blok-label{position:absolute;left:18px;right:18px;bottom:14px;z-index:2;display:flex;justify-content:space-between;gap:16px;margin:0;font:500 13px/1.2 var(--sans);color:rgba(244,244,241,.66);pointer-events:none}
.wd-bron{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}

/* ---------------------------------------------------------------- 2 · wat je krijgt: links vast de kop met de site in lagen, rechts de rijen in drie groepen */
.wd-krijg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--kol);align-items:start}
.wd-krijg-kop{grid-column:1 / span 5;position:sticky;top:110px;display:flex;flex-direction:column;gap:20px}
.wd-krijg-kop .lead{max-width:22em}
.wd-fig{width:100%;max-width:440px;aspect-ratio:4 / 3;margin-top:8px}
.wd-krijg-lijst{grid-column:7 / -1;display:flex;flex-direction:column;gap:clamp(36px,4vw,56px);padding-top:6px}
.wd-groep .label{margin-bottom:14px}
.wd-rijen{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--inkt)}
.wd-rijen li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:12px;row-gap:6px;padding:20px 0 21px;border-bottom:1px solid rgba(18,17,16,.14);
  background:linear-gradient(var(--vonk),var(--vonk)) 0 100%/0 2px no-repeat;transition:background-size .55s var(--ease-wissel)}
.wd-rijen li:hover{background-size:100% 2px}
.wd-nr{grid-row:1 / 3;font:500 14px/1.9 var(--sans);color:var(--vonk-tekst);font-variant-numeric:tabular-nums}
.wd-rijen h3{font-size:clamp(24px,2.2vw,34px);letter-spacing:-.03em}
.wd-rijen p{grid-column:2;margin:0;max-width:34em;color:var(--grafiet)}
.wd-rijen p .lnk{margin-left:6px;font-size:16px;color:var(--inkt)}
.noot .lnk{color:var(--inkt)}

/* ---------------------------------------------------------------- 4 · werk: de klant staat er met beeld en logo */
.wd-werk .w-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0}
.wd-klant .w-info{grid-template-columns:auto 1fr auto auto}
.wd-klant .w-info h3,.wd-klant .w-info p{grid-column:1 / 3}
.wd-logo{grid-column:3;grid-row:2 / 4;align-self:end;width:56px;height:56px;object-fit:contain;filter:brightness(0) invert(.95);opacity:.9}
.wd-klant .w-info .lnk{grid-column:4}
.wd-werk .w-nr{color:rgba(244,244,241,.72)}

/* ---------------------------------------------------------------- 5 · wie het maakt: het vonkvlak, tekst links, de foto rechts in trapvorm */
.wd-twee{position:relative;background:var(--vonk);color:var(--inkt);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--kol);align-items:center;
  padding:clamp(88px,9vw,140px) var(--rand) calc(var(--blok-h) + 72px)}
.wd-twee-tekst{grid-column:1 / span 6;display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.wd-twee .label{color:rgba(18,17,16,.86)}
.wd-twee h2{font-size:clamp(46px,6vw,112px);line-height:.95;letter-spacing:-.05em;margin-top:-6px}
.wd-twee h2 b{font-weight:640}
.wd-twee-lead{margin:0;max-width:26em;font-size:clamp(18px,1.45vw,21px);line-height:1.5;color:rgba(18,17,16,.88)}
.wd-twee .knop3-icoon{background:#2A2927;--hairline-plate:#2A2927}
.wd-twee-feiten{margin:4px 0 0;padding-top:16px;border-top:1.5px solid var(--inkt);display:flex;flex-wrap:wrap;gap:8px 28px;font:500 15px/1.3 var(--sans);align-self:stretch;max-width:34em}
.wd-twee-foto{grid-column:8 / -1;margin:0;aspect-ratio:4 / 5;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 82%,92% 82%,92% 88%,84% 88%,84% 94%,76% 94%,76% 100%,0 100%)}
.wd-twee-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}



/* ---------------------------------------------------------------- mobiel */
@media (max-width:900px){
  .wd-blok{aspect-ratio:4 / 3.4}
  .wd-blok-label span:last-child{display:none}
  .wd-bewijs b{font-size:40px}

  .wd-krijg{grid-template-columns:minmax(0,1fr)}
  .wd-krijg-kop{grid-column:1;position:static;gap:16px}
  .wd-fig{max-width:320px;margin:0 auto}
  .wd-krijg-lijst{grid-column:1;margin-top:28px}
  .wd-rijen li{grid-template-columns:38px minmax(0,1fr);padding:18px 0 19px}
  .wd-rijen h3{font-size:24px}

  .wd-klant .w-info{grid-template-columns:minmax(0,1fr) auto}
  .wd-klant .w-info h3,.wd-klant .w-info p,.wd-klant .w-info .lnk{grid-column:1}
  .wd-logo{grid-column:2;grid-row:1 / 3;align-self:start;width:44px;height:44px}
  .wd-werk .w-media img{object-position:12% 0}

  .wd-twee{grid-template-columns:minmax(0,1fr);row-gap:36px;padding-top:72px}
  .wd-twee-tekst,.wd-twee-foto{grid-column:1}
  .wd-twee h2{font-size:clamp(40px,11vw,56px)}
  .wd-twee .knop3{width:100%}

}

/* werk: onder de laatste kaart ruimte voor de blokovergang, zodat de band de kaart niet afdekt */
.wd-werk{padding-bottom:calc(var(--blok-h) + 10vh)}

/* vragen: het plusje staat bij de eerste regel; gedraaid steekt het niet meer buiten de lijst (anders 3 px horizontale scroll op 390) */
#vragen summary::after{align-self:flex-start;margin-top:2px}
#vragen .v-lijst{overflow-x:clip}

/* het getal in het werk blijft kleiner dan de H1 */
.wd-werk .w-getal{font-size:clamp(64px,6.4vw,112px)}
.wd-fig{margin-top:-28px}
@media (max-width:900px){.wd-werk .w-getal{font-size:72px}.wd-fig{margin-top:0}}





/* ---------------------------------------------------------------- 7 · wat het kost: prijs per pagina in drie niveaus (naar appart.agency, 8 okt 2026)
   Het bedrag per pagina wint; daaronder per rij wat erin zit. Ontwerp en beweging als meter (vonk = markering), vinkjes in vonk-tekst. */
.wp{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:clamp(48px,5.4vw,84px);font-size:17px;line-height:1.4}
.wp .wp-k1{width:31%}
.wp th,.wp td{padding:19px 20px 19px 0;text-align:left;vertical-align:middle;border-bottom:1px solid rgba(18,17,16,.14)}
.wp thead th,.wp thead td{vertical-align:bottom;padding-top:0;padding-bottom:26px;border-bottom:1.5px solid var(--inkt);font-weight:400}
.wp-hoek{display:table-cell}
.wp-hoek span{display:block;font:500 14px/1.5 var(--sans);color:var(--steen)}
.wp-naam{display:block;font:500 15px/1.2 var(--sans);color:var(--vonk-tekst)}
.wp-bedrag{display:block;margin-top:12px;font:430 clamp(44px,4.6vw,76px)/.95 var(--sans);letter-spacing:-.05em;color:var(--inkt);font-variant-numeric:tabular-nums;white-space:nowrap}
.wp-per{display:block;margin-top:8px;font:400 15px/1.3 var(--sans);color:var(--steen)}
.wp-vijf{display:inline-block;margin-top:16px;padding-top:9px;border-top:2px solid var(--vonk);font:500 15px/1.3 var(--sans);color:var(--inkt)}
.wp tbody th{font-weight:500;color:var(--inkt)}
.wp tbody td{color:var(--grafiet)}
.wp-schaal td{vertical-align:top}
.wp-meter{display:flex;gap:4px;margin:5px 0 10px}
.wp-meter i{width:22px;height:7px;background:rgba(18,17,16,.13)}
.wp-meter[data-niveau="1"] i:nth-child(-n+1),.wp-meter[data-niveau="2"] i:nth-child(-n+2),.wp-meter[data-niveau="3"] i{background:var(--vonk)}
.wp-ja::before,.wp-nee::before{content:"";display:block;width:24px;height:24px}
.wp-ja::before{background:var(--vonk-tekst);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center/contain no-repeat}
.wp-nee::before{width:16px;height:2px;margin:11px 4px;background:rgba(18,17,16,.28)}
/* de rij licht op onder de muis: een vonklijn onder de hele rij */
.wp tbody tr{background:linear-gradient(var(--vonk),var(--vonk)) 0 100%/0 2px no-repeat;transition:background-size .55s var(--ease-wissel)}
.wp tbody tr:hover{background-size:100% 2px}
.wp-noot{margin-top:26px}
/* los geprijsd: drie kaarten, het bedrag kleiner dan de prijs per pagina */
.wp-los-label{margin-top:clamp(64px,7vw,112px)}
.wp-los{margin-top:22px}
.wp-los .r-fig{max-height:150px}
.wp-los h3{font-size:clamp(26px,2.2vw,34px)}
.wp-los-prijs{margin:4px 0 0!important;font:430 clamp(30px,2.6vw,40px)/1 var(--sans);letter-spacing:-.04em;color:var(--inkt)}
.wp-los-prijs small{font:400 15px/1.3 var(--sans);letter-spacing:0;color:var(--steen)}
.wp-los-tekst{color:var(--grafiet);font-size:16px;line-height:1.45;max-width:30em}

@media (max-width:900px){
  /* telefoon: zoals appart, de drie niveaus blijven naast elkaar; het onderwerp staat boven elke rij */
  .wp{display:block;table-layout:auto;font-size:15px;line-height:1.35}
  .wp thead,.wp tbody{display:block}
  .wp tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px}
  .wp th,.wp td{padding:0;border:0}
  .wp-hoek{display:none}
  .wp thead tr{padding-bottom:18px;border-bottom:1.5px solid var(--inkt)}
  .wp thead th{padding:0;border:0}
  .wp-naam{font-size:14px}
  .wp-bedrag{margin-top:8px;font-size:clamp(26px,7.6vw,34px);letter-spacing:-.045em}
  .wp-per{font-size:13px;margin-top:5px}
  .wp-vijf{font-size:13px;margin-top:12px;padding-top:7px}
  .wp tbody tr{padding:16px 0 17px;border-bottom:1px solid rgba(18,17,16,.14);row-gap:8px}
  .wp tbody th{grid-column:1 / -1;font-size:16px}
  .wp-meter{margin:2px 0 7px}
  .wp-meter i{width:16px;height:6px}
  .wp-ja::before{width:22px;height:22px}
  .wp-nee::before{margin:10px 3px}
  .wp-noot{font-size:15px}
}

/* ---------------------------------------------------------------- 9 nov: prijs op een telefoon, één niveau tegelijk (webdesign.js maakt de schakelaar) */
.wp-kies{display:none}
@media (max-width:900px){
  .wp-kies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:36px;padding:4px;border-radius:999px;background:rgba(18,17,16,.07)}
  .wp-kies button{min-height:44px;border:0;border-radius:999px;background:none;color:var(--grafiet);font:500 15px/1 var(--sans);cursor:pointer;transition:background-color .22s var(--ease-energie),color .22s var(--ease-energie)}
  .wp-kies button[aria-pressed="true"]{background:var(--inkt);color:var(--papier)}
  .wp{margin-top:20px}
  .wp tr{grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center}
  .wp thead tr{grid-template-columns:minmax(0,1fr)}
  .wp tbody th{grid-column:1;font-size:16px}
  .wp tbody td{justify-self:end;text-align:right}
  .wp-schaal td{display:flex;flex-direction:column;align-items:flex-end}
  .wp thead .wp-naam{display:none}   /* de schakelaar zegt al welk niveau je ziet */
  .wp-bedrag{margin-top:0;font-size:clamp(44px,13vw,56px)}
  .wp-per{font-size:15px}
  .wp-vijf{font-size:15px}
  .wp[data-kol="1"] tr > :nth-child(3),.wp[data-kol="1"] tr > :nth-child(4),
  .wp[data-kol="2"] tr > :nth-child(2),.wp[data-kol="2"] tr > :nth-child(4),
  .wp[data-kol="3"] tr > :nth-child(2),.wp[data-kol="3"] tr > :nth-child(3){display:none}
}
/* 9 nov: voor wie, "Nu" en "Wordt" elk op een eigen regel (webdesign.js) */
.rij-nu{color:var(--steen)}
.rij-wordt{display:block;margin-top:6px;color:var(--inkt)}
.rij-nu b,.rij-wordt b{font-weight:600;margin-right:.15em}
.rij-wordt b{color:var(--vonk-tekst)}