/* Homepage v3: opbouw naar andrijadesigns.com, beeldwereld 05-10. Basis blijft atelier.css. */
@import url('/fonts/roboto-mono.css');
:root{--geel:#FFC21A;--inkt:#141413;--papier:#F4F2EC;--mono:'Roboto Mono',ui-monospace,Menlo,monospace}
.mono{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}

/* hero: beeld over de volle breedte, tekst linksonder */
.w-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--papier);margin-top:-68px;overflow:hidden;background:var(--inkt)}
.w-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.w-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,19,.15) 0%,rgba(20,20,19,.1) 45%,rgba(20,20,19,.82) 100%)}
.w-hero__in{position:relative;z-index:1;width:100%;padding-bottom:clamp(40px,6vw,88px)}
.w-hero__klein{max-width:30ch;font-size:15px;line-height:1.45;margin:0 0 var(--space-l)}
.w-hero h1{font-size:clamp(40px,5.4vw,88px);font-weight:500;line-height:.98;letter-spacing:-.035em;margin:0}
.w-hero h1 sup{font-size:.35em;vertical-align:top;position:relative;top:.35em;margin-left:.04em}

/* label links, inhoud rechts */
.w-rij{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-xl);padding-block:var(--space-3xl);border-top:1px solid var(--border-subtle)}
.w-rij .mono{color:var(--text-secondary);padding-top:6px}
.w-intro{font-size:clamp(22px,2vw,28px);line-height:1.3;letter-spacing:-.01em;margin:0 0 var(--space-l);max-width:30ch}
.w-link{display:inline-flex;align-items:center;gap:10px;margin-top:var(--space-l)}
.w-link::before{content:"\2192"}
@media (max-width:860px){.w-rij{grid-template-columns:1fr;gap:var(--space-m);padding-block:var(--space-2xl)}}

/* uitklappers */
.w-klap{border-top:1px solid var(--border-subtle)}
.w-klap:last-of-type{border-bottom:1px solid var(--border-subtle)}
.w-klap summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0;font-size:20px;font-weight:500;letter-spacing:-.01em}
.w-klap summary::-webkit-details-marker{display:none}
.w-klap summary::after{content:"+";font-family:var(--mono);font-size:18px;color:var(--text-secondary);transition:transform .3s}
.w-klap[open] summary::after{transform:rotate(45deg)}
.w-klap summary .nr{font-family:var(--mono);font-size:12px;color:var(--text-secondary);margin-right:16px}
.w-klap summary .prijs{margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--text-secondary);font-weight:500}
.w-klap p{margin:0 0 24px;max-width:56ch;color:var(--text-secondary);line-height:1.55}

/* beeldwereld: mozaiek */
.w-mozaiek{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.w-mozaiek img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
@media (max-width:860px){.w-mozaiek{grid-template-columns:repeat(2,1fr)}}

/* werk */
.w-werk{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl) var(--grid-gap);margin-top:var(--space-2xl)}
.w-case img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:4px;transition:transform .8s var(--ease-out)}
.w-case__m{overflow:hidden;border-radius:4px}
.w-case:hover img{transform:scale(1.03)}
.w-case h3{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin:16px 0 4px}
.w-case p{margin:0;color:var(--text-secondary);font-size:15px}
@media (max-width:860px){.w-werk{grid-template-columns:1fr}}

/* afsluiter in geel: het ene gele vlak */
.w-slot{background:var(--geel);color:var(--inkt);text-align:center;padding-block:clamp(80px,12vw,180px)}
.w-slot h2{font-size:clamp(48px,7vw,112px);font-weight:500;letter-spacing:-.04em;line-height:.95;margin:0}
.w-slot p{max-width:46ch;margin:var(--space-l) auto 0;font-size:18px;line-height:1.5}
.w-slot .btn{margin-top:var(--space-l)}
@media (prefers-reduced-motion:reduce){.w-hero video.w-hero__img{display:none}.w-hero{background:#141413 url(/video/hero-eind.jpg) 50% 20%/cover}}
/* koppen op gewicht 500, gelijk aan de hero (Nick 06-10) */
.display,.h1,.h2,.h3,.svc__title,.case__title,.w-slot h2{font-weight:500}
/* werkpagina: 2 x 2 kaarten, video vult de kaart */
.w-werk2{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.w-werk2{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.w-werk2{grid-template-columns:1fr}}
.w-werkkaart .ph video,.w-werkkaart .ph img{width:100%;height:100%;object-fit:cover;display:block}
.w-werkkaart__regel{margin:6px 0 0;font-size:15px;line-height:1.4;color:var(--text-secondary)}
.w-terug{color:inherit;text-decoration:underline;text-underline-offset:3px}
.case-hero__media{aspect-ratio:16/9}
@media (max-width:900px){.case-hero__head{grid-template-columns:1fr;gap:12px;margin-bottom:var(--space-l)}}
.w-mozaiek--breed{grid-template-columns:repeat(2,1fr)}
.w-mozaiek--breed img{aspect-ratio:16/9}
/* merkpresentatie op klantpagina's: één hoofdvorm plus drie verschillende tegels */
.mp{display:grid;gap:8px}
.mp__lead{aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;position:relative;background:#e9e8e3}
.mp__rij{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mp__tegel{aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;position:relative}
.mp img.vul{width:100%;height:100%;object-fit:cover;display:block}
.mp-typo{display:grid;grid-template-columns:1fr 1fr;height:100%}
.mp-typo--staand{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.mp-typo__tekst{padding:clamp(18px,3.2vw,52px);display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.mp-typo__kop{margin:0;font-size:clamp(30px,5.4vw,92px);line-height:.95;letter-spacing:-.02em}
.mp-typo--staand .mp-typo__kop{font-size:clamp(26px,2.9vw,46px)}
.mp-typo__klein{margin:0;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.mp-typo__beeld{overflow:hidden;min-height:0}
.mp-logo{height:100%;position:relative;display:grid;place-items:center;overflow:hidden}
.mp-logo>img.vul{position:absolute;inset:0;filter:blur(14px) saturate(1.1);transform:scale(1.15)}
.mp-logo::after{content:"";position:absolute;inset:0;background:var(--mp-tint,rgba(0,0,0,.35))}
.mp-logo__merk{position:relative;z-index:1;width:min(56%,420px);height:auto}
.mp__lead .mp-logo__merk{width:min(38%,460px)}
.mp-kaart{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,2.6vw,40px);box-sizing:border-box}
.mp-kaart__merk{width:62%;height:auto}
.mp-kaart__aa{font-size:clamp(60px,7vw,120px);line-height:1;margin:0}
.mp-kaart__staal{display:flex;gap:8px}
.mp-kaart__staal span{flex:1;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.mp-kaart__naam{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
@media (max-width:700px){.mp__rij{grid-template-columns:1fr}.mp-typo{grid-template-columns:1fr;grid-template-rows:auto 1fr}.mp__lead:has(.mp-typo){aspect-ratio:auto}.mp__lead>.mp-typo .mp-typo__beeld{aspect-ratio:4/3}}
/* diensten */
.w-dienst{grid-template-columns:5fr 6fr}
.w-dienst.hoofdstuk--flip{grid-template-columns:6fr 5fr}
.w-dienst .hoofdstuk__media{aspect-ratio:4/5}
.w-dienst .hoofdstuk__copy .h2{max-width:16ch}
.w-erbij p{display:flex;justify-content:space-between;gap:24px;margin:0;padding:18px 0;border-bottom:1px solid var(--border-subtle);font-size:var(--fs-body,18px)}
.w-erbij p:first-child{padding-top:0}
.w-erbij b{font-weight:500;white-space:nowrap}
@media (max-width:900px){.w-dienst,.w-dienst.hoofdstuk--flip{grid-template-columns:1fr}.w-dienst.hoofdstuk--flip .hoofdstuk__media{order:0}}
/* werkwijze */
.w-stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.w-stap{background:#fff;border-radius:var(--radius-lg);padding:28px 24px 32px;display:flex;flex-direction:column;gap:10px}
.w-stap svg{width:96px;height:64px;margin-bottom:28px}
.w-stap .mono{color:var(--text-secondary);margin:0}
.w-stap h3{margin:0;font-size:22px;font-weight:500;line-height:1.15;letter-spacing:-.01em}
.w-stap p:last-child{margin:0;font-size:15px;line-height:1.5;color:var(--text-secondary)}
.w-werkwijzebeeld{margin-top:var(--space-l);border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:21/9}
.w-werkwijzebeeld img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block}
@media (max-width:1100px){.w-stappen{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.w-stappen{grid-template-columns:1fr}.w-werkwijzebeeld{aspect-ratio:4/5}}
.w-rij+.mensen{border-top:0;padding-top:0}
/* contrast (WCAG AA) */
:root{--text-tertiary:#66665f}
.proj__meta a{color:var(--text-primary);text-decoration:underline;text-underline-offset:3px}