/* Pro Marketing 360 — basis: fonts, reset, type, grid, knop, focus */

/* ---------- fonts (zelf gehost, OFL; licenties in fonts/) ---------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-var-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* telefoon: geen grijze tapflits (elke knop en link heeft een eigen :active), geen dubbeltik-
   vertraging, en de tekst van bedieningselementen wordt bij lang indrukken niet geselecteerd */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, label { touch-action: manipulation; }
button, .button, summary { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--negro);
  font-family: var(--font-text);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.5;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
/* de header staat vast bovenaan: ankers landen eronder (js/main.js meet --header-h) */
html { scroll-padding-top: var(--header-h, 5rem); }
::selection { background: var(--amarillo); color: var(--negro); }

/* focus: altijd zichtbaar, in de inkt die op het vlak contrasteert */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* ---------- vlakken ---------- */
.field { background: var(--field); color: var(--field-ink); }

/* ---------- type ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-wrap: balance;
  hyphens: none;
}
.display { font-size: var(--step-display); font-weight: 900; line-height: 0.92; letter-spacing: -0.045em; }
.head { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.035em; }
.title { font-size: var(--step-lead); line-height: 1.08; letter-spacing: -0.025em; }
.statement { font-family: var(--font-statement); font-size: var(--step-lead); font-weight: 500; line-height: 1.18; letter-spacing: -0.01em; }
.small { font-size: var(--step-small); line-height: 1.45; }
p { max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }

/* ---------- layout ---------- */
/* viewport-fit=cover: de vlakken lopen onder de notch door, de inhoud blijft erbuiten */
.wrap {
  padding-left: max(var(--margin), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margin), env(safe-area-inset-right, 0px));
}
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: var(--margin); top: 0; z-index: 100;
  padding: 0.75rem 1rem; background: var(--negro); color: var(--blanco);
  font-weight: 500; text-decoration: none;
  transform: translateY(-120%);
}
.skip:focus-visible { transform: none; outline-color: var(--amarillo); outline-offset: 0; }

/* ---------- de ene knopvorm: rechthoekig, vlak, accentkleur ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--button-h); padding: 0 1.75rem;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius);
  font-family: var(--font-text); font-size: var(--step-body); font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background-color: var(--accent-hover); color: var(--accent-hover-ink); }
}


/* ---------- foto's ---------- */
picture { display: contents; }
/* beeld dat uit een masker komt (css/motion.css): de picture is het kader */
picture.mask { display: block; position: relative; overflow: clip; }
picture.mask .foto { display: block; }
picture > source { display: none; }
.foto { width: 100%; height: auto; background: var(--surface); border-radius: var(--radius); }