@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url('./fonts/Outfit-latin.woff2') format('woff2');
}

/* Bewust één licht thema: gebroken wit/crème met zachte contrasten. Tekst blijft ruim boven WCAG AA. */
:root{
  --bg:#f4f0e8;
  --bg-2:#ebe5d9;
  --fg:#3b3833;
  --muted:#6d685f;
  --line:rgba(59,56,51,.14);
  --accent:#a9532a;
  --accent-hover:#bd6134;
  --accent-ink:#fff8f0;
  --sans:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,4vw,56px);
  color-scheme:light;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--fg);font-size:17px;line-height:1.6;font-weight:300;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1400px;margin:0 auto;padding:0 var(--pad)}
h1,h2,h3{font-weight:400;letter-spacing:-.025em;line-height:1.05}

/* Knoppen: strak, geen afronding, overal hetzelfde */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-size:15px;font-weight:500;white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease),transform .15s}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{border:1px solid rgba(59,56,51,.4);color:var(--fg);background:transparent}
.btn-ghost:hover{background:var(--fg);color:var(--bg)}
.btn .ph{font-size:18px}

/* NAV */
.nav{position:fixed;inset:0 0 auto 0;z-index:30;background:rgba(244,240,232,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-size:19px;font-weight:500;letter-spacing:-.01em;white-space:nowrap}
.logo span{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:36px;font-size:15px}
.nav-links a:not(.btn){color:var(--muted);transition:color .2s}
.nav-links a:not(.btn):hover{color:var(--fg)}
.nav .btn{padding:11px 20px;font-size:14px}

/* HERO: wisselende reel van eigen werk */
.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;overflow:hidden;background:#000 url('../media/clip-a.jpg') center/cover}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.hero video.on{opacity:1}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,240,232,0) 0%,rgba(244,240,232,0) 28%,rgba(244,240,232,.82) 58%,var(--bg) 92%);pointer-events:none}
.hero-copy{position:relative;z-index:2;padding-bottom:clamp(48px,9vh,96px);width:100%}
.hero h1{font-size:clamp(44px,7vw,104px);max-width:11ch;margin-bottom:24px}
.hero p{font-size:clamp(17px,1.4vw,20px);color:#57524a;max-width:44ch;margin-bottom:36px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}

/* SECTIES */
section{position:relative}
.sec{padding:clamp(88px,12vw,168px) 0}
.sec-head{margin-bottom:clamp(40px,5vw,72px)}
.sec-head h2{font-size:clamp(36px,4.6vw,68px)}
.sec-head p{color:var(--muted);max-width:52ch;margin-top:18px;font-size:18px}

/* VASTGOED: asymmetrische bento, vier werken */
.bento{display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:auto auto;gap:clamp(12px,1.4vw,20px)}
.work{position:relative}
.work-media{position:relative;overflow:hidden;background:var(--bg-2);aspect-ratio:16/9}
.work-media img,.work-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.work:hover .work-media img,.work:hover .work-media video{transform:scale(1.03)}
.work-media video{opacity:0;transition:opacity .8s var(--ease),transform 1.2s var(--ease)}
.work-media video.playing{opacity:1}
.work-cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:14px}
.work-cap h3{font-size:19px;letter-spacing:-.01em}
.work-cap span{color:var(--muted);font-size:14px;white-space:nowrap}
.w-feature{grid-row:span 2}
.w-feature .work-media{aspect-ratio:auto;height:calc(100% - 50px);min-height:420px}
.w-wide{grid-column:1 / -1}
.w-wide .work-media{aspect-ratio:21/9}
.play{position:absolute;left:24px;bottom:24px;z-index:2;display:inline-flex;align-items:center;gap:12px;padding:12px 20px 12px 14px;background:rgba(244,240,232,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);color:var(--fg);font-size:15px;font-weight:500;transition:background .25s var(--ease)}
.play .ph{font-size:22px;color:var(--accent)}
.play:hover{background:var(--bg)}

/* STATEMENT */
.statement{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statement p{font-size:clamp(30px,4.4vw,64px);line-height:1.12;letter-spacing:-.025em;max-width:20ch}
.statement p em{font-style:normal;color:var(--muted)}

/* WERKWIJZE: getrapte rij */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.step{border-top:1px solid var(--line);padding-top:28px}
.step:nth-child(2){margin-top:64px}
.step:nth-child(3){margin-top:128px}
.step .ph{font-size:30px;color:var(--accent);margin-bottom:28px;display:block}
.step h3{font-size:clamp(24px,2.2vw,32px);margin-bottom:12px}
.step p{color:var(--muted);max-width:34ch}

/* PRIJS */
.price{border-top:1px solid var(--line)}
.price-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(40px,6vw,96px);align-items:end}
.price .sec-head{margin-bottom:0}
.price-card{border-top:1px solid var(--line);padding-top:28px}
.price-amount{font-size:clamp(64px,8vw,120px);line-height:1;letter-spacing:-.04em;font-weight:400}
.price-amount span{color:var(--accent);font-size:.5em;vertical-align:.7em;margin-right:.08em}
.price-note{color:var(--muted);font-size:18px;margin-top:14px}

/* CONTACT */
.contact{background:var(--bg-2)}
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(40px,6vw,96px);align-items:end}
.contact h2{font-size:clamp(40px,5.6vw,84px);max-width:13ch}
.contact-side p{color:var(--muted);margin-bottom:32px;max-width:40ch}
.contact-lines{margin-top:36px;display:grid;gap:10px;font-size:18px}
.contact-lines a{display:inline-flex;align-items:center;gap:12px;transition:color .2s}
.contact-lines a:hover{color:var(--accent)}
.contact-lines .ph{color:var(--muted)}

footer{padding:36px 0;color:var(--muted);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer .legal{text-align:right}

/* LIGHTBOX */
dialog.lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100dvh;color:var(--fg)}
dialog.lb::backdrop{background:rgba(38,35,31,.9)}
.lb-inner{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,64px)}
.lb video{width:100%;max-width:1600px;max-height:100%;background:#000}
.lb-close{position:absolute;top:20px;right:20px;width:48px;height:48px;display:grid;place-items:center;font-size:24px;border:0;background:rgba(244,240,232,.92);color:var(--fg);transition:background .2s,color .2s}
.lb-close:hover{background:var(--accent);color:var(--accent-ink)}

/* REVEAL */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
  .js .hero-copy>*{opacity:0;transform:translateY(20px);animation:up 1s var(--ease) forwards}
  .js .hero-copy>*:nth-child(2){animation-delay:.12s}
  .js .hero-copy>*:nth-child(3){animation-delay:.24s}
  @keyframes up{to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero video,.work-media video{display:none}
}

/* MOBIEL */
@media (max-width:900px){
  .nav-links a:not(.btn){display:none}
  .bento{grid-template-columns:1fr}
  .w-feature{grid-row:auto}
  .w-feature .work-media{height:auto;min-height:0;aspect-ratio:4/3}
  .w-wide .work-media{aspect-ratio:16/9}
  .steps{grid-template-columns:1fr}
  .step:nth-child(2),.step:nth-child(3){margin-top:0}
  .contact-grid,.price-grid{grid-template-columns:1fr;align-items:start}
  footer .legal{text-align:left}
}
@media (max-width:480px){
  .nav .btn{padding:10px 14px;font-size:13px}
  .hero-ctas .btn{flex:1 1 auto;justify-content:center}
}