@import url("/fonts/fonts.css");

/* Huisstijl ismu: het rood van de 'u' (Pantone 179 U), grijstinten en zwart */
:root {
  --rood: #e95100;
  --rood-donker: #c24300;   /* voor kleine tekst: genoeg contrast op wit */
  --tint: #fdeee6;          /* lichte toon van het logo-rood */
  --grijs-logo: #c2c3c7;    /* Cool Gray 6 */
  --grijs-tekst: #8d8e93;
  --grijs-vlak: #ececea;
  --donkergrijs: #55565b;
  --zwart: #1f1e20;
  --tekst: #2a2829;
  --lijn: #dcdcdc;
  --markeer: rgba(233, 81, 0, 0.2);
  --breed: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: #fff;
  color: var(--tekst);
  font: 300 17px/1.7 Poppins, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rood-donker); }
strong, b { font-weight: 600; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; margin: 0 0 .6em; color: var(--zwart); letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); }
h4 { font-size: 1.1rem; font-weight: 600; }
h1 strong, h2 strong, h3 strong { font-weight: 700; }
h1 :not(strong), h2 span, h3 span { font-weight: inherit; }

.t-rood { color: var(--rood); }
p .t-rood, h4 .t-rood, li .t-rood { color: var(--rood-donker); }
.t-grijs { color: var(--grijs-tekst); }
.t-donkergrijs { color: var(--donkergrijs); }
.t-wit { color: #fff; }
mark {
  background: linear-gradient(transparent 58%, var(--markeer) 58%, var(--markeer) 92%, transparent 92%);
  color: inherit;
  padding: 0 .08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.naar-inhoud { position: absolute; left: -9999px; }
.naar-inhoud:focus { left: 16px; top: 12px; z-index: 50; background: #fff; padding: 8px 12px; }

/* ---------- kop ---------- */
.kop {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.kop.gescrold { border-bottom-color: #eee; }
.kop-binnen {
  max-width: 1360px; margin: 0 auto; padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo img { width: 96px; height: auto; }
.kop nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.kop nav a {
  display: block; padding: 6px 10px; font-size: 15px; font-weight: 400;
  text-decoration: none; color: var(--tekst); position: relative;
}
.kop nav a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px;
  background: var(--rood); transform: scaleX(0); transform-origin: left; transition: transform .2s;
}
.kop nav a:hover { color: var(--zwart); }
.kop nav a:hover::after, .kop nav a[aria-current]::after { transform: scaleX(1); }
.kop nav .taal { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--lijn); }
.kop nav .li a { display: flex; padding: 6px 8px; }
.kop nav .li a::after { display: none; }
.menu-knop { display: none; }

/* ---------- secties ---------- */
.sectie { position: relative; padding: 96px 0; }
.sectie:first-child { padding-top: 80px; }
.s-grijs { background: var(--grijs-vlak); }
.s-tint { background: var(--tint); }
.s-donker { background: var(--zwart); color: #e6e6e6; }
.s-donker h1, .s-donker h2, .s-donker h3, .s-donker strong { color: #fff; }
.s-donker a:hover { color: #ffb48a; }
.s-tint mark { --markeer: rgba(233, 81, 0, .18); }
.s-donker mark { --markeer: rgba(233, 81, 0, .75); }
.golf { position: absolute; left: 0; top: -59px; width: 100%; height: 60px; display: block; }
.golf path { fill: currentColor; }
.s-grijs .golf { color: var(--grijs-vlak); }
.s-tint .golf { color: var(--tint); }
.s-donker .golf { color: var(--zwart); }
.sectie.vervolg { padding-top: 0; }
.binnen { max-width: var(--breed); margin: 0 auto; padding: 0 32px; }

.raster {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 40px; row-gap: 28px; align-items: start;
}
.cel { grid-column: var(--c); grid-row: var(--r); min-width: 0; }
.tekst > :last-child { margin-bottom: 0; }
.centreer { text-align: center; }
.centreer p { max-width: 62ch; margin-left: auto; margin-right: auto; }
.sectie:first-child .tekst p { font-size: 1.1rem; }

.beeld { margin: 0; }
.beeld img { border-radius: 18px; width: 100%; }
.beeld.portret img { border-radius: 22px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; max-width: 440px; }

.beeld.stap img { aspect-ratio: 4 / 3; object-fit: contain; background: #fff9fa; padding: 14px; }
/* stappen (Hoe): kleinere tussenkopjes in rood */
h4 { margin-top: .4em; }

/* ---------- kaarten (home) ---------- */
.kop-lijst h1, .kop-lijst h2, .kop-lijst p { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1.3; color: var(--zwart); margin: 0; }
.kop-lijst { margin-bottom: 56px; }
.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.kaart {
  background: #fff; border-radius: 20px; padding: 40px 32px 32px; text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px -18px rgba(0,0,0,.25);
}
.kaart .icoon {
  width: 150px; height: 150px; margin: 0 auto 28px; border-radius: 50%;
  background: var(--tint); display: grid; place-items: center;
}
.kaart .icoon img { width: 62%; height: auto; }
.kaart h3 { font-size: 1.05rem; letter-spacing: .02em; line-height: 1.4; }
.kaart p { font-size: .95rem; }
.kaart a { text-decoration: none; color: var(--rood-donker); }
.knop-rij { text-align: center; margin: 48px 0 0; }
.knop {
  display: inline-block; background: var(--rood); color: #fff; text-decoration: none;
  font-weight: 600; font-size: .95rem; line-height: 1.4; padding: 14px 26px; border-radius: 999px;
  border: 0; cursor: pointer; transition: background .2s, transform .2s;
}
.knop:hover { background: var(--rood-donker); color: #fff; transform: translateY(-1px); }
.knop-zwart { background: var(--zwart); border-radius: 6px; padding: 14px 32px; }
.knop-zwart:hover { background: #000; }

/* ---------- uitklappers (Hoe) ---------- */
.accordion { border-bottom: 1px solid var(--lijn); }
.accordion details { border-top: 1px solid var(--lijn); }
.accordion summary {
  list-style: none; cursor: pointer; padding: 10px 0; font-size: .95rem; font-weight: 400;
  display: flex; justify-content: space-between; align-items: center;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-3px); transition: transform .2s; margin-right: 4px;
}
.accordion details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.accordion summary:hover { color: var(--rood-donker); }
.acc-inhoud { padding: 0 0 12px; font-size: .92rem; }
.acc-inhoud p { margin: 0 0 .15em; }

/* ---------- klantlogo's ---------- */
.logos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px;
}
.logos li {
  min-width: 0;
  background: #fff; border: 1px solid #eee; border-radius: 14px; height: 130px;
  display: grid; place-items: center; padding: 18px;
}
.logos img { max-height: 80px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: 5fr 6fr; gap: 72px; align-items: start; }
.li-los a { display: inline-flex; color: var(--zwart); }
.formulier { display: grid; gap: 20px; }
.formulier fieldset { border: 0; margin: 0; padding: 0; }
.formulier legend { padding: 0; margin-bottom: 8px; font-weight: 400; }
.formulier .twee { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formulier label { display: grid; gap: 6px; font-size: .9rem; font-weight: 400; }
.vereist { color: var(--grijs-tekst); font-weight: 300; }
.formulier input, .formulier textarea {
  font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid #bdbdbd; border-radius: 6px;
  background: #fafafa; color: var(--tekst); width: 100%;
}
.formulier input:focus, .formulier textarea:focus { outline: 2px solid var(--rood); outline-offset: 1px; border-color: transparent; background: #fff; }
.formulier button { justify-self: start; }
.verborgen { position: absolute; left: -9999px; }
.bedankt { text-align: center; padding: 80px 32px 40px; }

/* ---------- voet ---------- */
.voet { border-top: 1px solid #eee; font-size: .9rem; }
.voet-binnen {
  max-width: 1360px; margin: 0 auto; padding: 56px 32px 64px;
  display: grid; grid-template-columns: 1fr auto auto; gap: 40px 96px;
}
.voet-logo { width: 66px; margin-bottom: 22px; }
.voet ul { list-style: none; margin: 0 0 16px; padding: 0; }
.voet li { margin-bottom: 4px; }
.voet a { text-decoration: none; }
.voet a:hover { text-decoration: underline; }
.voet-kop { font-weight: 600; margin-bottom: 14px; }

:focus-visible { outline: 2px solid var(--rood); outline-offset: 3px; }

/* ---------- tablet ---------- */
@media (max-width: 1000px) {
  .kaarten { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .contact { grid-template-columns: 1fr; gap: 48px; }
}

/* ---------- mobiel ---------- */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .kop-binnen { padding: 14px 16px; }
  .logo img { width: 80px; }
  .menu-knop {
    display: grid; gap: 5px; background: none; border: 0; padding: 10px 6px; cursor: pointer;
  }
  .menu-knop span { display: block; width: 24px; height: 2px; background: var(--zwart); transition: transform .2s, opacity .2s; }
  .menu-knop[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-knop[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-knop[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .kop nav {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    border-bottom: 1px solid #eee; display: none; padding: 8px 16px 20px;
  }
  .kop nav.open { display: block; }
  .kop nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .kop nav a { font-size: 1.1rem; padding: 12px 4px; border-bottom: 1px solid #f2f2f2; }
  .kop nav a::after { display: none; }
  .kop nav a[aria-current] { color: var(--rood-donker); font-weight: 600; }
  .kop nav .taal { margin: 0; padding: 0; border: 0; }
  .kop nav .li a { padding: 14px 4px; border: 0; }

  .sectie { padding: 64px 0; }
  .sectie:first-child { padding-top: 48px; }
  .golf { height: 32px; top: -31px; }
  .binnen { padding: 0 16px; }
  .raster { grid-template-columns: 1fr; row-gap: 20px; }
  .cel { grid-column: 1; grid-row: auto; }
  .beeld.portret img { max-width: 100%; }
  .kaart { padding: 32px 22px 24px; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .logos li { height: 104px; padding: 14px; }
  .logos img { max-height: 64px; }
  .formulier .twee { grid-template-columns: 1fr; }
  .voet-binnen { grid-template-columns: 1fr 1fr; padding: 40px 16px 48px; gap: 32px; }
  .voet-binnen > :first-child { grid-column: 1 / -1; }
}