/* ==========================================================================
   Feed Ready — stylesheet
   Kleuren afgeleid uit het goedgekeurde ontwerp.
   ========================================================================== */

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

:root{
  --blauw:#274CAC;
  --blauw-diep:#1E3B87;
  --oranje:#F39200;
  --papier:#F7F6F2;
  --wit:#FFFFFF;
  --inkt:#0A1024;
  --grijs:#6B7183;
  --grijs-licht:#8A90A1;
  --lijn:#E7E5DF;
  --lijn-fijn:#EDEBE5;
  --verloop:linear-gradient(90deg,#274CAC,#5343B0,#743AAA,#923399,#AD3182,
                                   #C53868,#DA4D4B,#EA6D2B,#F39200);
  --radius:12px;
  --max:1280px;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

body{
  margin:0;background:var(--papier);color:var(--inkt);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}

h1,h2,h3{margin:0;font-weight:700;line-height:1.1;letter-spacing:-.028em;
  text-wrap:balance;color:var(--inkt);}
h1{font-size:clamp(38px,5.4vw,62px);}
h2{font-size:clamp(30px,3.6vw,42px);}
h3{font-size:21px;letter-spacing:-.016em;}
p{margin:0 0 18px;}
p:last-child{margin-bottom:0;}

a{color:var(--blauw);text-underline-offset:3px;}
a:hover{color:var(--blauw-diep);}
:focus-visible{outline:3px solid var(--blauw);outline-offset:3px;border-radius:6px;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}
@media (max-width:640px){.wrap{padding:0 22px;}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.overslaan{position:absolute;left:-9999px;top:0;background:var(--wit);color:var(--inkt);
  padding:12px 18px;z-index:100;}
.overslaan:focus{left:0;}

.verloop-tekst{
  background:var(--verloop);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ---------- knop ---------- */
.knop{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;border-radius:10px;border:0;
  background:var(--blauw);color:var(--wit);
  font-family:inherit;font-weight:600;font-size:17px;line-height:1;
  text-decoration:none;cursor:pointer;transition:background-color .18s ease;
}
.knop:hover{background:var(--blauw-diep);color:var(--wit);}
.knop--klein{padding:12px 24px;font-size:16px;}
.knop--stil{background:transparent;color:var(--blauw);
  box-shadow:inset 0 0 0 2px var(--lijn);}
.knop--stil:hover{background:var(--wit);color:var(--blauw-diep);}

/* ---------- header ---------- */
.kop{background:var(--wit);border-bottom:1px solid var(--lijn-fijn);
  position:sticky;top:0;z-index:50;}
.kop__in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:76px;}
.kop__logo{display:flex;align-items:center;}
.kop__logo img{height:30px;width:auto;}
.nav{display:flex;align-items:center;gap:34px;}
.nav a{color:var(--grijs);text-decoration:none;font-weight:500;font-size:17px;}
.nav a:hover{color:var(--inkt);}
.nav a[aria-current="page"]{color:var(--inkt);font-weight:600;}
.nav .knop,.nav .knop:hover{color:var(--wit);}

.menu-knop{display:none;background:none;border:0;padding:8px;cursor:pointer;
  color:var(--inkt);}
.menu-knop svg{display:block;}

@media (max-width:920px){
  .menu-knop{display:block;}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--wit);
    border-bottom:1px solid var(--lijn-fijn);flex-direction:column;align-items:stretch;
    gap:0;padding:6px 32px 22px;}
  .nav.open{display:flex;}
  .nav a{padding:14px 0;border-bottom:1px solid var(--lijn-fijn);font-size:18px;}
  .nav .knop{margin-top:18px;}
}

/* ---------- hero ---------- */
.hero{padding:72px 0 0;}
.hero h1{max-width:1000px;}
.hero__sub{font-size:20px;color:var(--grijs);margin-top:26px;max-width:940px;}
.hero__regio{font-size:17px;color:var(--grijs-licht);margin-top:16px;}
.hero .knop{margin-top:34px;}
.hero__streep{height:2px;background:var(--verloop);border-radius:2px;
  max-width:960px;margin:64px 0 0;}

/* ---------- secties ---------- */
.sectie{padding:76px 0;}
.sectie--wit{background:var(--wit);}
.sectie__kop{max-width:720px;margin-bottom:44px;}
.sectie__kop p{color:var(--grijs);margin-top:16px;}

/* ---------- kaarten ---------- */
.raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;}
@media (max-width:760px){.raster{grid-template-columns:1fr;gap:22px;}}

.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:38px 40px;}
.kaart h3{margin-bottom:14px;}
.kaart p{color:var(--grijs);font-size:17px;}
@media (max-width:640px){.kaart{padding:30px 26px;}}

.sectie--wit .kaart{background:var(--papier);border-color:transparent;}

/* ---------- werkwijze ---------- */
.stappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;}
@media (max-width:860px){.stappen{grid-template-columns:1fr;gap:28px;}}
.stap__nr{font-size:15px;font-weight:700;letter-spacing:.14em;
  background:var(--verloop);-webkit-background-clip:text;background-clip:text;
  color:transparent;margin-bottom:12px;display:block;}
.stap h3{margin-bottom:8px;}
.stap p{color:var(--grijs);font-size:17px;}

/* ---------- team ---------- */
.personen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;}
@media (max-width:860px){.personen{grid-template-columns:1fr;gap:22px;}}

.persoon{background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--radius);padding:40px;
  display:flex;flex-direction:column;}
.persoon .socials{margin-top:auto;padding-top:26px;}
@media (max-width:640px){.persoon{padding:30px 26px;}}
.persoon__studio{font-size:14px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grijs-licht);margin-bottom:22px;}
.persoon__foto{width:136px;max-width:100%;aspect-ratio:1/1;border-radius:var(--radius);
  overflow:hidden;background:var(--blauw);display:flex;align-items:center;
  justify-content:center;margin-bottom:26px;}
.persoon__foto img{width:100%;height:100%;object-fit:cover;}
.persoon__initialen{font-size:44px;font-weight:700;color:var(--wit);letter-spacing:-.04em;}
.persoon__rol{font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blauw);margin-bottom:8px;}
.persoon h3{font-size:26px;margin-bottom:14px;}
.persoon p{color:var(--grijs);font-size:17px;}

/* ---------- projecten ---------- */
.project{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:40px;}
@media (max-width:640px){.project{padding:30px 26px;}}
.project__soort{font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blauw);margin-bottom:10px;}
.project__klant{font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blauw);margin-bottom:10px;}
.project h3{font-size:26px;margin-bottom:16px;}
.project p{color:var(--grijs);font-size:17px;max-width:62ch;}
.project__punten{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:9px;}
.project__punten li{color:var(--grijs);font-size:17px;padding-left:24px;position:relative;
  line-height:1.5;}
.project__punten li::before{content:"";position:absolute;left:3px;top:.6em;width:7px;
  height:7px;border-radius:50%;background:var(--oranje);}
.project__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.tag{font-size:15px;font-weight:500;color:var(--grijs);background:var(--papier);
  border-radius:999px;padding:7px 16px;}
.binnenkort{border:1px dashed var(--lijn);border-radius:var(--radius);padding:34px 40px;
  color:var(--grijs-licht);font-size:17px;}
@media (max-width:640px){.binnenkort{padding:26px;}}

/* ---------- socialknoppen ---------- */
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.socials a{font-size:15px;font-weight:500;color:var(--blauw);background:var(--papier);
  border-radius:999px;padding:9px 17px;text-decoration:none;
  transition:background-color .18s ease,color .18s ease;}
.socials a:hover{background:var(--blauw);color:var(--wit);}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;}
@media (max-width:900px){.contact{grid-template-columns:1fr;gap:36px;}}
.contact__zij p{color:var(--grijs);}

form{display:flex;flex-direction:column;gap:20px;}
.veld{display:flex;flex-direction:column;gap:8px;}
.veld label{font-size:16px;font-weight:500;color:var(--inkt);}
.veld input,.veld textarea{
  font-family:inherit;font-size:17px;color:var(--inkt);background:var(--wit);
  border:1px solid var(--lijn);border-radius:10px;padding:14px 16px;width:100%;
}
.veld textarea{min-height:150px;resize:vertical;}
.veld input:focus,.veld textarea:focus{outline:none;border-color:var(--blauw);
  box-shadow:0 0 0 3px rgba(39,76,172,.14);}
.veld--duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:560px){.veld--duo{grid-template-columns:1fr;}}
.honingpot{position:absolute!important;left:-9999px;opacity:0;height:0;overflow:hidden;}
form .knop{align-self:flex-start;}
form .knop[disabled]{opacity:.6;cursor:progress;}
.klein{font-size:15px;color:var(--grijs-licht);}

.melding{border-radius:10px;padding:16px 18px;font-size:17px;}
.melding--ok{background:rgba(39,76,172,.07);color:var(--inkt);
  border:1px solid rgba(39,76,172,.25);}
.melding--fout{background:rgba(243,146,0,.1);color:var(--inkt);
  border:1px solid rgba(243,146,0,.4);}

/* ---------- footer ---------- */
.voet{background:var(--wit);border-top:1px solid var(--lijn-fijn);
  padding:56px 0 30px;font-size:16px;color:var(--grijs);}
.voet img{height:26px;width:auto;margin-bottom:16px;}
.voet a{color:var(--grijs);text-decoration:none;}
.voet a:hover{color:var(--inkt);}
.voet address{font-style:normal;line-height:1.8;}
.voet__privacy{margin:14px 0 0;}
.voet__onder{margin-top:36px;padding-top:22px;border-top:1px solid var(--lijn-fijn);
  font-size:14.5px;color:var(--grijs-licht);}

/* ---------- tekstpagina ---------- */
.tekstpagina{padding:64px 0 80px;}
.tekstpagina .inhoud{max-width:720px;}
.tekstpagina h2{font-size:26px;margin-top:40px;}
.tekstpagina p,.tekstpagina li{color:var(--grijs);}
.tekstpagina ul{padding-left:20px;}
.tekstpagina li{margin-bottom:8px;}
.terug{display:inline-block;margin-top:44px;font-weight:500;}