/* Casepagina's (werk-*.html). Bouwt voort op stijl.css en statisch.css. */

.kopband .lab a{color:inherit;transition:color .2s}
.kopband .lab a:hover{color:var(--oranje)}
.kopband .lab .sep{color:var(--oranje);margin:0 .2em}
.case-kop{padding-bottom:7.5rem}
.case-kop h1{max-width:22ch}
.case-kop .lead{max-width:60ch;font-size:1.12rem}
.diensten{list-style:none;margin:1.8rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.diensten li{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#E8EBF7;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:.4rem .85rem}

/* breed beeld, uit de kopband omhoog getrokken */
.case-hero{margin-top:-5rem;position:relative;z-index:2}
.case-hero>img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r);display:block;background:var(--vlak)}
.case-hero.kader::before{border-color:var(--rand)}
@media(max-width:760px){.case-hero{margin-top:-3.6rem}.case-hero>img{aspect-ratio:16/10}}

/* dossier links, verhaal rechts */
.case-g{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:4rem 5rem;margin-top:5rem;align-items:start}
.dossier{position:sticky;top:6rem;border-top:3px solid var(--tekst);padding-top:1.4rem}
.dossier-logo{display:block;height:auto;max-height:52px;width:auto;max-width:190px;object-fit:contain;object-position:left;
  filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply;opacity:.92}
.dossier-woord{font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;
  letter-spacing:-.03em;font-size:1.6rem;height:auto;filter:none;mix-blend-mode:normal;opacity:1}
.dossier dl{margin:1.8rem 0 0;display:grid;gap:0}
.dossier dl>div{display:grid;grid-template-columns:5.2rem 1fr;gap:1rem;padding:.75rem 0;border-top:1px solid var(--rand);font-size:.95rem}
.dossier dl>div:first-child{border-top:0;padding-top:0}
.dossier dt{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tekst-zacht);padding-top:.2rem}
.dossier dd{margin:0;font-weight:500}
.kern{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--rand)}
.kern b{display:block;font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;letter-spacing:-.045em;
  line-height:.95;font-size:clamp(3.4rem,5vw,4.6rem);color:var(--oranje);padding-bottom:.06em}
.kern span{display:block;font-size:.95rem;font-weight:600;margin-top:.2rem}

.verhaal{max-width:64ch;font-size:1.08rem;line-height:1.72}
.verhaal .lab{margin-bottom:1.6rem}
.verhaal p+p{margin-top:1.15rem}
.verhaal .intro{font-size:1.32rem;line-height:1.5;font-weight:500;letter-spacing:-.01em;color:var(--tekst)}
.verhaal .intro+p{margin-top:1.6rem}
.verhaal p:not(.intro){color:#3A3A45}
.product{margin:2.8rem 0 0;padding:1.6rem;background:var(--vlak);border-radius:var(--r);max-width:420px}
.product img{width:100%;height:auto;mix-blend-mode:multiply;display:block}
@media(max-width:900px){.case-g{grid-template-columns:1fr;gap:2.6rem;margin-top:3.4rem}.dossier{position:static}
  .dossier dl{grid-template-columns:1fr 1fr;gap:0 2rem}.dossier dl>div:nth-child(2){border-top:0;padding-top:0}}
@media(max-width:560px){.dossier dl{grid-template-columns:1fr}.dossier dl>div:nth-child(2){border-top:1px solid var(--rand);padding-top:.75rem}}

/* aanpak: drie stappen aan één lijn */
.stappen-k{list-style:none;margin:3rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;position:relative}
.stappen-k::before{content:"";position:absolute;left:0;right:0;top:1.05rem;height:1px;background:var(--rand)}
.stap-k{position:relative;padding-top:3.2rem}
.stap-k .n{position:absolute;top:0;left:0;width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;
  background:var(--grond);border:1px solid var(--tekst);font-family:Archivo,Arial,sans-serif;font-style:italic;font-weight:800;font-size:.8rem;
  transition:background .25s,color .25s,border-color .25s}
.stap-k:hover .n{background:var(--oranje);border-color:var(--oranje);color:#fff}
.stap-k b{display:block;font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;
  letter-spacing:-.03em;font-size:1.15rem;line-height:1.1;padding-bottom:.06em;text-wrap:balance}
.stap-k p{margin-top:.8rem;font-size:.98rem;line-height:1.62;color:var(--tekst-zacht)}
@media(max-width:820px){.stappen-k{grid-template-columns:1fr;gap:2.2rem}.stappen-k::before{left:1.05rem;right:auto;top:0;bottom:0;width:1px;height:auto}
  .stap-k{padding:0 0 0 3.6rem}.stap-k .n{top:-.1rem}}

/* resultaten: foto links, uitkomsten rechts */
.res-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:4rem 5rem;align-items:start}
.res-foto{margin:0;align-self:stretch}
.res-foto img{width:100%;height:100%;min-height:420px;object-fit:cover;border-radius:var(--r);display:block;position:relative;z-index:1}
.uitkomsten{list-style:none;margin:2.4rem 0 0;padding:0}
.uitkomst{padding:1.6rem 0;border-top:1px solid var(--rand);display:grid;grid-template-columns:minmax(0,11rem) 1fr;gap:.4rem 2rem;align-items:baseline}
.uitkomst:last-child{border-bottom:1px solid var(--rand)}
.uitkomst .getal{font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;letter-spacing:-.045em;line-height:.95;
  font-size:clamp(2.2rem,3.4vw,3rem);color:var(--oranje);padding-bottom:.06em}
.uitkomst .getal-lab{display:block;grid-column:1;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:.35rem}
.uitkomst .woord{font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.03em;
  font-size:1.25rem;line-height:1.1;color:var(--oranje);padding-bottom:.06em}
.uitkomst p{grid-column:2;grid-row:1/span 2;font-size:.98rem;line-height:1.62;color:var(--tekst-zacht);align-self:start}
@media(max-width:900px){.res-g{grid-template-columns:1fr;gap:2.4rem}.res-foto img{min-height:0;aspect-ratio:4/3}}
@media(max-width:560px){.uitkomst{grid-template-columns:1fr}.uitkomst p{grid-column:1;grid-row:auto;margin-top:.5rem}}

/* review */
.review-g{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3rem 5rem;align-items:end}
.review blockquote{margin:1.6rem 0 0;font-size:clamp(1.5rem,3vw,2.5rem);letter-spacing:-.035em;line-height:1.12;max-width:26ch;text-transform:none;font-weight:700}
.review-wie{display:flex;align-items:center;gap:1.1rem}
.review-wie .portret{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.review-wie b{display:block;font-weight:700}
.review-wie span{display:block;font-size:.9rem;color:var(--donker-zacht)}
@media(max-width:820px){.review-g{grid-template-columns:1fr;gap:2rem;align-items:start}}

/* meer werk */
.meer-kop{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.meer-g{margin-top:2rem}
.meer-g .tegel img{aspect-ratio:16/9}
.sec.meer{padding-top:5rem}