/* Homepage v2 — bouwt op de tokens en header/footer uit main.css */
.v2{--gutter:var(--pagePadding);--maxw:var(--maxPageWidth);--c-ambiance:hsl(32,100%,88%);--c-hop:hsl(226.67,60%,94.12%);--c-etz:hsl(153,57%,91%);--c-wp:hsl(135,80%,88%);--c-contact:hsl(24,36.84%,81.37%);--ink:#000;--ink-2:#3d3d3b;--ink-3:#6f6e6a;--line:hsla(var(--black-hsl),.12);color:var(--ink);background:#fff}
.v2 .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.v2 .eyebrow{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 1.2rem}
.v2 h1,.v2 h2,.v2 h3{font-family:var(--heading-font);font-weight:500;letter-spacing:-.02em;margin:0;text-wrap:balance}
.v2 h1{font-size:clamp(2.4rem,4.6vw,4.4rem);line-height:1.05}
.v2 h2{font-size:var(--fs-h2);line-height:1.12}
.v2 h3{font-size:var(--fs-h3);line-height:1.15}
.v2 p{margin:0;line-height:1.6}
.v2 .lead{font-size:var(--fs-large);line-height:1.45;color:var(--ink-2);max-width:70ch}
.v2 .btn{display:inline-flex;align-items:center;gap:.6em;padding:1.05em 1.8em;border:2px solid #000;border-radius:300px;font-weight:500;font-size:1rem;line-height:1;color:#000;text-decoration:none;background:transparent;transition:background-color .2s,color .2s}
.v2 .btn svg{width:1em;height:1em;transition:transform .2s}
.v2 .btn:hover{background:#000;color:#fff}
.v2 .btn:hover svg{transform:translateX(3px)}
.v2 .btn--solid{background:#000;color:#fff}
.v2 .btn--solid:hover{background:#222}
.v2 .link{display:inline-flex;align-items:center;gap:.5em;font-weight:500;text-decoration:none;color:#000;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%;padding-bottom:.15em}
.v2 .link svg{width:1em;height:1em;transition:transform .2s}
.v2 .link:hover svg{transform:translateX(3px)}

/* hero: past in één scherm, weinig tekst */
.v2-hero{padding-top:calc(var(--header-height) + 4vw);padding-bottom:5vw;background:var(--c-hop);position:relative;overflow:hidden}
.v2-hero .wrap:first-child{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,6fr);gap:3vw;align-items:center}
.v2-hero h1 .line{display:block;overflow:hidden}
.v2-hero h1 .line>span{display:block}
.v2-hero .lead{margin:1.4rem 0 2rem}
.v2-hero .actions{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center}
.v2-hero .photo{aspect-ratio:4/3;border-radius:0 0 0 100px;overflow:hidden;width:100%}
.v2-hero .photo img{width:100%;height:100%;object-fit:cover;display:block}

/* gewerkt voor: stille rij, geen beweging */
.v2-clients{border-bottom:1px solid var(--line)}
.v2-clients .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 3vw;padding-top:1.6rem;padding-bottom:1.6rem}
.v2-clients .label{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-right:1vw}
.v2-clients ul{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 3vw;list-style:none;margin:0;padding:0}
.v2-clients li{display:flex;align-items:center;gap:.6rem;height:34px;filter:grayscale(1);opacity:.7;transition:filter .3s,opacity .3s}
.v2-clients li:hover{filter:none;opacity:1}
.v2-clients img{height:100%;width:auto;display:block}
.v2-clients li:first-child img{height:30px}
.v2-clients li.wp img{height:44px}
.v2-clients li.sq img{height:44px}
.v2-clients li span{font-weight:500;font-size:.95rem;white-space:nowrap}
@media (max-width:900px){.v2-clients li{height:28px}.v2-clients .label{width:100%;margin:0}}

/* werk: gelijke, rustige blokken */
.v2-work{padding:5vw 0 4vw}
.v2-work h2{margin-bottom:2.5vw}
.v2-case{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:3vw 4vw;align-items:center;padding:2.2vw 0}
.v2-case.alt .media{order:2}
.v2-case .media{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--c);border-radius:0 0 0 100px;padding:7%;overflow:hidden}
.v2-case.alt .media{border-radius:0 0 100px 0}
.v2-case .media img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .5s cubic-bezier(.2,.6,.3,1)}
.v2-case .media:hover img{transform:translateY(-6px) scale(1.02)}
.v2-case .media--mock{padding:4% 3%}
/* afbeeldingen met veel lege ruimte rond het apparaat: inzoomen binnen het vlak */
.v2-case .media--zoom img{transform:scale(var(--zoom,1.5))}
.v2-case .media--zoom:hover img{transform:translateY(-4px) scale(calc(var(--zoom,1.5) * 1.02))}
.v2-case .media--shot{padding:9% 8%}
.v2-case .media--shot img{object-fit:cover;object-position:top left;border-radius:6px;box-shadow:0 18px 40px hsla(var(--black-hsl),.14);height:auto;aspect-ratio:1512/982}
.v2-case .text{max-width:40rem}
.v2-case .kicker{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline;font-weight:500;margin-bottom:1.2rem}
.v2-case .kicker span{font-weight:400;font-size:.9rem;color:var(--ink-3);display:inline-flex;align-items:center}
.v2-case .kicker .dot{display:inline-block;flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:var(--ink-3);margin:0 .9em;vertical-align:middle}
.v2-case .text h3::before{content:'';display:block;width:28px;height:2px;background:hsla(var(--black-hsl),.4);margin-bottom:1.1rem}
.v2-case h3{margin-bottom:1.5rem;text-wrap:balance}
/* vraag → inzicht, feiten, conclusie */
.v2-case .shift{display:grid;gap:.9rem;margin:0 0 1.4rem;padding:1rem 1.1rem;background:hsla(var(--black-hsl),.035);border-left:3px solid var(--c);border-radius:0 6px 6px 0}
.v2-case .shift span{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.2rem}
.v2-case .shift p{margin:0;line-height:1.45}
.v2-case .shift div:first-child p{color:var(--ink-2)}
.v2-case .shift div+div{position:relative;padding-top:.9rem;border-top:1px solid hsla(var(--black-hsl),.1)}
.v2-case .shift div+div p{font-weight:400;color:var(--ink)}
.v2-case .facts{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 1.8rem;padding:0}
.v2-case .facts li{font-size:.85rem;padding:.35em .85em;border-radius:300px;background:var(--c);color:var(--ink);white-space:nowrap}
.v2-case .take{color:var(--ink-2);margin-bottom:1.6rem}
.v2-case .outcome{color:var(--ink-2);margin-bottom:1.4rem}
.v2-case .proof{color:var(--ink-3);font-size:.95rem;margin-bottom:1.8rem;padding-left:.9rem;border-left:2px solid var(--c)}

/* werkwijze */
.v2-how{padding:5vw 0;background:hsla(var(--lightAccent-hsl),1)}
.v2-how .head{margin-bottom:2.5vw}
.v2-how .head h2{margin-bottom:.6rem}
.v2-how .head p{color:var(--ink-2);margin:0}
.v2-how ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2rem 2.5vw;list-style:none;margin:0;padding:0;counter-reset:step}
.v2-how li{counter-increment:step;padding-top:1rem;border-top:1px solid hsla(var(--black-hsl),.25)}
.v2-how li::before{content:counter(step,decimal-leading-zero);display:block;font-size:.85rem;letter-spacing:.06em;color:var(--ink-3);margin-bottom:1rem}
.v2-how li h3{font-size:var(--fs-h4);margin-bottom:.5rem}
.v2-how li p{color:var(--ink-2);max-width:30ch}

/* over */
.v2-about{padding:5vw 0}
.v2-about .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:2.5rem 5vw;align-items:center}
.v2-about .photo{aspect-ratio:1/1;border-radius:0 100px 0 0;overflow:hidden;max-width:380px}
.v2-about .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.v2-about h2{margin-bottom:1rem}
.v2-about p{color:var(--ink-2);max-width:48ch;margin-bottom:1.4rem}

/* contact */
.v2-contact{padding:5vw 0;background:var(--c-contact)}
.v2-contact .wrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:2rem 4vw;align-items:center}
.v2-contact h2{margin-bottom:.8rem}
.v2-contact p{color:var(--ink-2);max-width:36ch}
.v2-contact .ways{display:grid;gap:1rem;list-style:none;margin:0;padding:0}
.v2-contact .ways li{display:grid;gap:.15rem}
.v2-contact .ways small{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.v2-contact .ways a{font-size:var(--fs-large);text-decoration:none;font-weight:500;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%;width:max-content;max-width:100%}

/* reveal */
.js .v2 .reveal{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.js .v2 .reveal.in{opacity:1;transform:none}
.js .v2-hero h1 .line>span{transform:translateY(110%);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.js .v2-hero.ready h1 .line>span{transform:none}
@media (prefers-reduced-motion:reduce){.js .v2 .reveal,.js .v2-hero h1 .line>span{opacity:1;transform:none;transition:none}}

@media (max-width:900px){
  .v2 h1{font-size:clamp(2rem,9vw,3rem)}
  .v2-hero h1 .line,.v2-hero h1 .line>span{display:inline;overflow:visible}
  .js .v2-hero h1 .line>span{transform:none}
  .js .v2-hero h1{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
  .js .v2-hero.ready h1{opacity:1;transform:none}
  .v2-hero .wrap:first-child,.v2-case,.v2-about .wrap,.v2-contact .wrap{grid-template-columns:1fr}
  .v2-case.alt .media{order:0}
  .v2-hero{padding-top:calc(var(--header-height) + 8vw)}
  .v2-hero .photo{justify-self:start;max-width:480px}
  .v2-how ol{grid-template-columns:1fr}
  .v2-case{padding:5vw 0}
  .v2 .wrap{padding:0 6vw}
}

/* portfolio-overzichtspagina */
.page-portfolio .v2-work{padding-top:calc(var(--header-height) + 4.5vw)}
.page-portfolio .pf-title{font-size:clamp(2.4rem,4.2vw,4rem);margin:0 0 1rem}
.page-portfolio .pf-lead{margin-bottom:1.5vw;max-width:44ch}

.v2-case .kicker span{flex-wrap:wrap;row-gap:.25rem}
.v2-case .kicker em{font-style:normal;white-space:nowrap}

.v2-clients li.erasmus{height:42px;opacity:.8}