/* Servicebericht, X-Interactive huisstijl. Kleuren en fonts komen uit de x-interactive-design skill. */
@font-face{ font-family:'Graphik'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/GraphikRegular.otf') format('opentype'); }
@font-face{ font-family:'Graphik'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/GraphikMedium.otf') format('opentype'); }
@font-face{ font-family:'Graphik'; font-weight:600; font-style:normal; font-display:swap; src:url('../fonts/GraphikSemibold.otf') format('opentype'); }
@font-face{ font-family:'Gilroy';  font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/Gilroy-Bold.ttf') format('truetype'); }

:root{
  --xi-rood:       #EF2341;
  --xi-rood-diep:  #c8102e;
  --xi-rood-wash:  #fbf1f2;
  --xi-inkt:       #1a1f26;
  --xi-inkt-zacht: #4a5058;
  --xi-lijn:       #e6e8ec;
  --xi-wit:        #ffffff;
  --font-display: 'Gilroy', 'Graphik', Arial, sans-serif;
  --font-body:    'Graphik', Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.5;
  color:var(--xi-inkt); background:var(--xi-wit);
}
.wrap{ width:100%; max-width:40rem; margin:0 auto; padding-left:1rem; padding-right:1rem; }

.band{ background:var(--xi-rood); padding:2rem 0; }
.band img{ display:block; width:11rem; max-width:70%; height:auto; }

main{ flex:1; padding-top:3rem; padding-bottom:4rem; }
p{ margin:0 0 1rem; text-wrap:pretty; }
a{ color:var(--xi-rood-diep); text-decoration:underline; text-underline-offset:.15em; overflow-wrap:anywhere; }
a:hover{ color:var(--xi-inkt); }

.kicker{
  font-weight:600; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--xi-inkt-zacht); margin:0 0 1.25rem;
}
h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.75rem, 1rem + 3vw, 2.5rem); line-height:1.12; letter-spacing:-.01em;
  margin:0 0 1.5rem; padding:0 0 1rem; border-bottom:2.5px solid var(--xi-rood);
}
.lead{ font-size:1.1875rem; margin-bottom:2.5rem; }

.notice{
  background:var(--xi-rood-wash); border-left:2.5px solid var(--xi-rood);
  border-radius:0 6px 6px 0; padding:1.25rem 1.5rem; color:var(--xi-inkt-zacht);
}
.notice h2{ font-family:var(--font-display); font-weight:700; font-size:1.125rem; color:var(--xi-inkt); margin:0 0 .5rem; }
.notice p:last-child{ margin-bottom:0; }

footer{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem 1.5rem;
  padding-top:1.25rem; padding-bottom:1.5rem; border-top:1px solid var(--xi-lijn);
  font-size:.8125rem; color:var(--xi-inkt-zacht);
}