/* Pro2 Consultancy BV — website op de tokens van huisstijl v1.1 (skill pro2-huisstijl).
   Alle kleuren komen uit de tokens hieronder; gebruik geen andere hex-waarden. */

/* Schibsted Grotesk, zelf gehost (geen verbinding met Google nodig) */
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/schibsted-grotesk-400.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/schibsted-grotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/schibsted-grotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/schibsted-grotesk-800.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/schibsted-grotesk-900.woff2') format('woff2'); }

:root {
  /* Kleuren (tokens.css v1.1) */
  --pro2-petrol: #0B3D3A;
  --pro2-oranje: #FF7A1A;
  --pro2-inkt: #14172B;
  --pro2-tekst-2: #3A3E52;
  --pro2-grijs: #5B5F70;
  --pro2-papier: #F5F3EE;
  --pro2-wit: #FFFFFF;
  --pro2-lijn: #E3E1DA;
  --pro2-lijn-sterk: #C9C7C0;
  --pro2-footer-tekst: #C7C9D4;

  /* Rollen */
  --color-bg: var(--pro2-papier);
  --color-surface: var(--pro2-wit);
  --color-text: var(--pro2-inkt);
  --color-text-muted: var(--pro2-grijs);
  --color-heading: var(--pro2-petrol);
  --color-primary: var(--pro2-petrol);
  --color-on-primary: var(--pro2-wit);
  --color-border: var(--pro2-lijn);
  --color-focus: var(--pro2-oranje);

  /* Letter */
  --font: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: 64px;
  --fs-h2: 32px;
  --fs-h3: 20px;
  --fs-body: 18px;
  --fs-label: 14px;

  /* Vorm en ruimte */
  --radius-card: 16px;
  --radius-control: 10px;
  --content-max: 1200px;
  --text-max: 680px;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 var(--fs-body)/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 {
  font-weight: 900; font-size: clamp(40px, 7.5vw, var(--fs-display)); line-height: 1.0;
  letter-spacing: -0.04em; color: var(--color-heading);
}
h2 {
  font-weight: 800; font-size: clamp(26px, 4.4vw, var(--fs-h2)); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--color-heading);
}
h3 { font-weight: 700; font-size: var(--fs-h3); line-height: 1.3; color: var(--color-text); }
p { margin: 0; }

.label { font-weight: 500; font-size: var(--fs-label); line-height: 1.4; color: var(--color-text-muted); letter-spacing: 0.01em; }
.lead { font-size: 20px; line-height: 1.5; color: var(--pro2-tekst-2); max-width: 34em; }

.skip {
  position: absolute; left: 16px; top: -64px; z-index: 10;
  background: var(--pro2-wit); color: var(--pro2-petrol); font-weight: 700;
  padding: 8px 16px; border-radius: var(--radius-control);
}
.skip:focus { top: 16px; }

.wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: 24px; }

/* Kop */
.top { padding-block: 24px; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.brand { display: block; padding-block: 6px; line-height: 0; }
.brand img { height: 32px; width: auto; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.nav a { color: var(--pro2-petrol); font-weight: 500; font-size: 16px; text-decoration: none; padding-block: 8px; }
.nav a:hover { text-decoration: underline; }

/* Secties */
.section { padding-block: 96px; }
.section-head { display: grid; gap: 12px; max-width: var(--text-max); margin-bottom: 40px; }
.section-head p:not(.label) { color: var(--pro2-tekst-2); }
.band { background: var(--pro2-wit); border-block: 1px solid var(--pro2-lijn); }

/* Opening */
.hero { padding-block: 64px 112px; }
.hero-text { display: grid; gap: 24px; max-width: 820px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* Knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 12px 20px; border-radius: var(--radius-control);
  font: 700 16px/1.2 var(--font); text-decoration: none;
}
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--pro2-inkt); }
.btn-secondary { background: var(--pro2-wit); color: var(--pro2-petrol); border: 1px solid var(--pro2-lijn-sterk); }
.btn-secondary:hover { border-color: var(--pro2-petrol); }

/* Kaarten */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-3 .card { display: grid; gap: 12px; align-content: start; }

/* Werkwijze */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: stap; }
.steps li { counter-increment: stap; display: grid; gap: 8px; align-content: start; padding-top: 20px; border-top: 2px solid var(--pro2-petrol); }
.steps li::before {
  content: counter(stap); font-weight: 900; font-size: 40px; line-height: 1; letter-spacing: -0.04em;
  color: var(--pro2-petrol); font-variant-numeric: tabular-nums; margin-bottom: 8px;
}
.steps p { color: var(--pro2-tekst-2); }

/* App-kaart */
.app { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 24px; align-items: center; max-width: 760px; }
.app-icon { width: 88px; height: 88px; }
.app-body { display: grid; gap: 6px; }
.app-body h3 { font-size: 24px; }

/* Over ons */
.about { display: grid; gap: 16px; max-width: var(--text-max); }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.contact-text { display: grid; gap: 16px; }
.contact dl { margin: 0 0 24px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 14px 24px; }
.contact dt { font-weight: 500; font-size: 14px; color: var(--pro2-grijs); padding-top: 4px; }
.contact dd { margin: 0; overflow-wrap: anywhere; }

/* Voet */
.foot { background: var(--pro2-inkt); color: var(--pro2-footer-tekst); padding-block: 48px 56px; font-size: 16px; }
.foot .wrap { display: grid; gap: 24px; }
.foot img { height: 28px; width: auto; }
.foot a { color: var(--pro2-wit); }
.legal, .foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* Privacyverklaring */
.doc { padding-block: 48px 96px; }
.doc .wrap > * { max-width: var(--text-max); }
.doc h1 { font-size: clamp(36px, 6.5vw, 56px); margin-block: 8px 16px; }
.doc h2 { font-size: 24px; margin-block: 40px 12px; }
.doc p + p, .doc p + ul, .doc ul + p { margin-top: 12px; }
.doc ul { margin: 0; padding-left: 1.2em; }
.doc li + li { margin-top: 6px; }
.back { display: inline-block; margin-bottom: 24px; font-weight: 500; font-size: 16px; }

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; gap: 40px; }
  .grid-3, .steps { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .section { padding-block: 64px; }
  .hero { padding-block: 40px 72px; }
  .section-head { margin-bottom: 32px; }
}
@media (max-width: 480px) {
  .wrap { padding-inline: 16px; }
  .card { padding: 24px; }
  .app { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
  .app-icon { width: 64px; height: 64px; }
  .contact dl { grid-template-columns: 1fr; gap: 2px; }
  .contact dd { margin-bottom: 12px; }
  .brand img { height: 28px; }
}