@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/space-grotesk-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format("woff2")}

:root{
  --antraciet:#18181B;--oranje:#EA580C;--oranje-tekst:#C2410C;--oranje-tint:#FFEDD5;--oranje-donker:#9A3412;--oranje-licht:#FB923C;
  --achtergrond:#FAFAF9;--wit:#FFFFFF;--rand:#E7E5E4;--tekst-zacht:#57534E;--tekst-op-donker:#D6D3D1;
  --font-kop:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-tekst:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --breedte:72rem;--zijmarge:1rem;--radius:10px;
}
@media (min-width:48rem){:root{--zijmarge:2rem}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--achtergrond);color:var(--antraciet);font-family:var(--font-tekst);font-size:1.0625rem;line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:var(--oranje-tekst);text-underline-offset:.2em}
a:hover{color:var(--antraciet)}
:focus-visible{outline:3px solid var(--oranje);outline-offset:3px}
h1,h2,h3{font-family:var(--font-kop);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.25rem)}
h2{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.25rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
[id]{scroll-margin-top:1rem}

.skiplink{position:absolute;left:-999px;top:0;background:var(--antraciet);color:var(--wit);padding:.5rem 1rem;z-index:10}
.skiplink:focus{left:1rem;top:1rem}
.container{max-width:var(--breedte);margin:0 auto;padding:0 var(--zijmarge)}

/* kop */
.kop{border-bottom:1px solid var(--rand);background:var(--achtergrond)}
.kop .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.merk{display:flex;align-items:center}
.merk img{height:32px;width:auto}
.nav-groot{display:none}
.nav-groot ul,.nav-klein ul{list-style:none;margin:0;padding:0}
.nav-groot ul{display:flex;gap:1.75rem}
.nav-groot a,.nav-klein a{color:var(--antraciet);text-decoration:none;font-weight:600}
.nav-groot a:hover,.nav-klein a:hover{color:var(--oranje-tekst)}
.nav-klein{position:relative}
.nav-klein summary{list-style:none;cursor:pointer;padding:.45rem .9rem;border:1px solid var(--rand);border-radius:8px;font-weight:600;background:var(--wit)}
.nav-klein summary::-webkit-details-marker{display:none}
.nav-klein ul{position:absolute;right:0;top:calc(100% + .5rem);background:var(--wit);border:1px solid var(--rand);border-radius:var(--radius);padding:.5rem;min-width:12rem;z-index:5}
.nav-klein li a{display:block;padding:.6rem .75rem}
@media (min-width:48rem){.nav-groot{display:block}.nav-klein{display:none}}

/* hero */
.hero{padding:3.5rem 0 3rem}
.hero .container{display:grid;gap:2.5rem;align-items:center}
@media (min-width:64rem){.hero{padding:5rem 0 4.5rem}.hero .container{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.hero-route img{width:100%;max-width:22rem;margin:0 auto}
@media (min-width:64rem){.hero-route img{max-width:30rem}}
.bovenregel{font-family:var(--font-tekst);font-weight:600;color:var(--oranje-tekst);letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;margin-bottom:1rem}
.hero h1{max-width:20ch}
.intro{font-size:1.2rem;color:var(--tekst-zacht);max-width:38rem}
.knoppen{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;margin-top:1.75rem}
.knop{display:inline-block;background:var(--antraciet);color:var(--wit);padding:.75rem 1.25rem;border-radius:8px;text-decoration:none;font-weight:600}
.knop:hover{background:#3F3F46;color:var(--wit)}
.link-pijl{font-weight:600;color:var(--antraciet);text-decoration-color:var(--oranje);text-decoration-thickness:2px}
.link-pijl:hover{color:var(--oranje-tekst)}

/* secties */
.sectie{padding:3.5rem 0;border-top:1px solid var(--rand)}
@media (min-width:64rem){.sectie{padding:5rem 0}}
.sectie-kop{max-width:40rem;margin-bottom:2rem}
.sectie-kop p{color:var(--tekst-zacht)}

/* projectkaarten */
.kaarten{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:48rem){.kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.kaarten{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kaart{position:relative;background:var(--wit);border:1px solid var(--rand);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(24,24,27,.05);transition:border-color .15s}
.kaart:hover{border-color:var(--oranje)}
.kaart-beeld{aspect-ratio:16/10;background:#F5F5F4;overflow:hidden}
.kaart-beeld img{width:100%;height:100%;object-fit:cover;object-position:top}
.kaart-beeld.passend{display:flex;align-items:center;background:#0E5C57}
.kaart-beeld.passend img{height:auto;object-fit:contain}
.kaart-tekst{padding:1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.kaart h3{margin:0}
.kaart h3 a{color:var(--antraciet);text-decoration:none}
.kaart h3 a::after{content:"";position:absolute;inset:0}
.kaart p{color:var(--tekst-zacht);margin:0}
.labels{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:auto 0 0;padding:.5rem 0 0}
.labels li{background:var(--oranje-tint);color:var(--oranje-donker);font-size:.8rem;font-weight:600;padding:.15rem .6rem;border-radius:99px}
.status{align-self:flex-start;background:var(--antraciet);color:var(--wit);font-size:.75rem;font-weight:600;padding:.15rem .6rem;border-radius:99px}

/* diensten */
.diensten{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:48rem){.diensten{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dienst{border-left:3px solid var(--oranje);border-radius:0;padding-left:1.25rem}
.dienst p{color:var(--tekst-zacht);margin-bottom:.5rem}

/* over mij */
.over-tekst{max-width:44rem}
.prijzen{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.75rem}
.prijzen li{background:var(--wit);border:1px solid var(--rand);border-radius:var(--radius);padding:.75rem 1rem}
.prijzen strong{font-family:var(--font-kop)}

/* contact */
.contact{background:var(--antraciet);color:var(--wit);border-top:none}
.contact-logo{height:40px;width:auto;margin-bottom:2rem}
.contact h2{color:var(--wit)}
.contact p{color:var(--tekst-op-donker)}
.contact a{color:var(--oranje-licht)}
.contactregels{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:.75rem}
.contactregels a{color:var(--wit);font-family:var(--font-kop);font-weight:600;font-size:clamp(1.3rem,1rem + 1.4vw,2rem);text-decoration-color:var(--oranje);text-decoration-thickness:2px;overflow-wrap:anywhere}
.contactregels a:hover{color:var(--oranje-licht)}
.klein{font-size:.95rem}

/* voet */
.voet{padding:2rem 0;font-size:.95rem;color:var(--tekst-zacht)}
.voet .container{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:center}
.voet p{margin:0}
.voet ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}

/* projectpagina */
.project-kop{padding:2.5rem 0 2rem}
.kruimel{font-size:.95rem;margin-bottom:1.25rem}
.project-logo{height:72px;width:auto;margin-bottom:1rem}
.project-body{display:grid;gap:2.5rem;padding-bottom:3rem}
@media (min-width:64rem){.project-body{grid-template-columns:minmax(0,1fr) 18rem}}
.lopend{max-width:44rem}
.lopend h2{font-size:1.6rem;margin-top:2.25rem}
.lopend h2:first-child{margin-top:0}
.lopend ul{padding-left:1.2rem}
.lopend li{margin-bottom:.4rem}
.lopend li::marker{color:var(--oranje)}
.feiten{background:var(--wit);border:1px solid var(--rand);border-radius:var(--radius);padding:1.25rem;align-self:start}
.feiten img{margin-bottom:1rem;border-radius:16px}
.feiten dl{margin:0}
.feiten dt{font-weight:600;margin-top:.9rem}
.feiten dt:first-child{margin-top:0}
.feiten dd{margin:0;color:var(--tekst-zacht)}
.galerij{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));margin:1.25rem 0 0}
.galerij.telefoon{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
.galerij.gemengd{grid-template-columns:minmax(0,1fr)}
@media (min-width:48rem){.galerij.gemengd{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}}
.galerij.gemengd figure:last-child{max-width:16rem}
.galerij figure{margin:0}
.galerij img{border:1px solid var(--rand);border-radius:var(--radius);background:var(--wit)}
.galerij figcaption{font-size:.9rem;color:var(--tekst-zacht);margin-top:.4rem}
.oproep{margin-top:3rem;padding:1.5rem;background:var(--oranje-tint);border-radius:var(--radius)}
.oproep p{margin:0 0 1rem}
.tekst-pagina{padding:3rem 0}