/* Alles wordt afgeleid uit één kleur: de klant kiest er één, de rest volgt.
   Zo ziet elke site er anders uit zonder dat iemand iets hoeft in te stellen. */
:root{
  --accent:var(--gekozen);
  --diep:color-mix(in srgb, var(--accent) 20%, #14100C);
  --dieper:color-mix(in srgb, var(--accent) 7%, #0C0908);
  --zacht:color-mix(in srgb, var(--accent) 6%, #FFFCF9);
  --ink:#191411;
  --muted:color-mix(in srgb, var(--ink) 52%, #FFFCF9);
  --licht:#FFFCF9;
  --lijn:color-mix(in srgb, var(--accent) 18%, #E9E1D9);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--licht);color:var(--ink);font-family:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;font-weight:800;
  letter-spacing:-.035em;line-height:.97;margin:0}
a{color:inherit}

/* ---- hero -------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:var(--dieper);color:var(--licht);
  min-height:min(94svh,820px);display:grid;align-content:center;
  padding:clamp(30px,7vw,90px) clamp(22px,6vw,80px) clamp(90px,10vw,110px)}
/* Twee gekleurde vlekken en fijne korrel: diepte zonder ook maar één
   afbeelding, want een nieuwe onderneming heeft nog geen foto's. */
.hero::before{content:"";position:absolute;inset:-30% -15% auto -30%;height:130%;
  background:
    radial-gradient(46% 40% at 20% 24%, color-mix(in srgb, var(--accent) 85%, transparent), transparent 70%),
    radial-gradient(40% 36% at 84% 10%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 72%);
  animation:drift 30s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.25'/></svg>")}
@keyframes drift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(5%,4%,0) scale(1.15)}}
.hero > *{position:relative;z-index:1}
.plaats{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:color-mix(in srgb, var(--licht) 60%, transparent);margin-bottom:clamp(18px,3vw,28px)}
.plaats::before{content:"";width:28px;height:2px;background:var(--accent)}
.kop{font-size:clamp(50px,14vw,132px);max-width:14ch}
.kop .punt{color:var(--accent)}
.zin{font-size:clamp(20px,3vw,30px);line-height:1.32;margin:clamp(18px,3vw,26px) 0 0;max-width:22ch;
  color:color-mix(in srgb, var(--licht) 76%, transparent)}
.knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(30px,5vw,42px)}
.knop{display:inline-flex;align-items:center;justify-content:center;padding:16px 28px;border-radius:999px;
  font-weight:500;text-decoration:none;background:var(--accent);color:#14100D;border:1px solid var(--accent);
  transition:transform .16s ease, box-shadow .16s ease}
.knop:hover{transform:translateY(-2px);box-shadow:0 10px 30px -12px var(--accent)}
.knop.leeg{background:transparent;color:var(--licht);border-color:color-mix(in srgb, var(--licht) 28%, transparent)}

/* ---- inhoud ------------------------------------------------------------ */
main{max-width:64rem;margin-inline:auto;padding:clamp(52px,9vw,112px) clamp(22px,6vw,48px) 0}
.lead p:first-child{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:600;letter-spacing:-.025em;
  font-size:clamp(22px,3vw,34px);line-height:1.32;margin:0 0 22px;max-width:26ch}
.lead p{margin:0 0 18px;color:var(--muted);max-width:56ch;font-size:18px}
.kaarten{display:grid;gap:clamp(14px,2.2vw,20px);margin-top:clamp(42px,7vw,74px);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.kaart{background:var(--zacht);border:1px solid var(--lijn);border-radius:22px;padding:clamp(24px,3.4vw,34px)}
.kaart h2{font-size:clamp(22px,2.4vw,27px);font-weight:600;letter-spacing:-.02em;margin-bottom:12px}
.kaart p{margin:0 0 10px;color:var(--muted)}
.kaart p:last-child{margin:0}

/* ---- contact ----------------------------------------------------------- */
.contact{margin-top:clamp(52px,8vw,96px);background:var(--diep);color:var(--licht);border-radius:28px;
  padding:clamp(28px,5vw,58px)}
.contact h2{font-size:clamp(30px,5vw,48px);margin-bottom:10px}
.contact .sub{color:color-mix(in srgb, var(--licht) 62%, transparent);margin:0 0 28px}
.gegevens{display:grid;gap:10px;margin:0 0 30px;padding:0;list-style:none;font-size:18px}
.gegevens a{text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px}
form{display:grid;gap:12px;max-width:34rem}
label{display:grid;gap:6px;font-size:14px;color:color-mix(in srgb, var(--licht) 60%, transparent)}
input,textarea{font:inherit;color:var(--licht);background:color-mix(in srgb, var(--licht) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--licht) 18%, transparent);border-radius:12px;padding:14px 15px;width:100%}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
form button{justify-self:start;font:inherit;font-weight:500;font-size:17px;color:#14100D;background:var(--accent);
  border:0;border-radius:999px;padding:15px 32px;cursor:pointer}

footer{max-width:64rem;margin:0 auto;padding:clamp(34px,6vw,60px) clamp(22px,6vw,48px) 120px;color:var(--muted);font-size:14px}
footer b{color:var(--ink);font-weight:500}

/* ---- vaste balk op de telefoon: bellen en mailen zonder zoeken --------- */
.balk{position:fixed;left:0;right:0;bottom:0;z-index:5;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--licht) 86%, transparent);backdrop-filter:blur(12px);border-top:1px solid var(--lijn)}
.balk a{flex:1;text-align:center;padding:14px;border-radius:14px;text-decoration:none;font-weight:500}
.balk .bel{background:var(--accent);color:#14100D}
.balk .mail{border:1px solid var(--lijn);color:var(--ink)}
@media (max-width:760px){.balk{display:flex}}

/* ---- rustig binnenkomen ----------------------------------------------- */
.op{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.op.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hero::before{animation:none}
  .op{opacity:1;transform:none;transition:none}
}