/* ==========================================================================
   How Might We — design system v3.9.3  (2026-10-12)
   Opbouw en typografie naar norday.nl, kleurblokken naar Verve × Lebara.
   Kobaltblauw + vier aanvullende kleuren uit Nordiska museet, Skansen en Fotografiska, plus geel als tegenkleur.
   1. Tokens  2. Basis  3. Type  4. Opzet  5. Knoppen  6. Site-header
   7. Page-header  8. Large text  9. Text-media  10. Quote  11. CTA
   12. Site-footer  13. Banden  14. Styleguide  15. One-pager
   Geen animaties of transitions: hover = directe kleurwissel.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Kleur */
  --cobalt: #214AEB;      /* hoofdkleur: logo, koppen, links, donkere banden (wit erop 6,5:1) */
  --vermilion: #FF4629;   /* Nordiska museet — signaal, één keer per scherm (ink erop 5,3:1) */
  --pink: #FF92B4;        /* Skansen, steviger — knoppen, banden (ink erop 8,7:1; kobalt 3,1:1 = alleen grote koppen) */
  --yellow: #FFD23F;      /* tegenkleur van kobalt — beeldvlakken, banden, logo (kobalt erop 4,5:1, ink 12,6:1) */
  --mint: #98CDB2;        /* Nordiska museet — beeldvlakken, banden (ink erop 10,1:1) */
  --cream: #FAF5EB;       /* Nordiska museet — papier, rustige banden */
  --ink: #0B1238;         /* tekst: nachtblauw, afgeleid van kobalt */
  --white: #FFFFFF;
  --line: #D9DEF3;        /* lijnen op wit en cream */
  --line-on-cobalt: #5C7BF1;

  /* Rollen — wissel hier om het palet te veranderen zonder componenten aan te raken */
  --c-text: var(--ink);
  --c-heading: var(--cobalt);
  --c-link: var(--cobalt);
  --c-button: var(--pink);
  --c-button-hover: var(--vermilion);
  --c-footer: var(--cobalt);

  /* Fonts — Norday gebruikt Apercu Condensed + Suisse Int'l (licentiefonts).
     Tot de licenties er zijn vallen de stacks terug op Sofia Sans Condensed + Inter (Google Fonts). */
  --f-header: "Apercu Condensed", "ApercuCondensed", "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --f-body: "Suisse Int'l", "Suisse Intl", "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Schaal (Norday op 1360px) */
  --fs-display: clamp(56px, 9.6vw, 130px);  /* header: paginakop */
  --fs-title: clamp(36px, 3.7vw, 50px);     /* header: sectiekop, CTA */
  --fs-label: 25px;                         /* header: footerkop, label */
  --fs-large: clamp(24px, 2.6vw, 35px);     /* body groot: intro, citaat */
  --fs-lede: clamp(18px, 1.6vw, 22px);      /* body: inleiding onder paginakop */
  --fs-body: clamp(18px, 1.5vw, 20px);      /* body: lopende tekst */
  --fs-small: 16px;                         /* small: nav, links, auteur */
  --fs-caption: 14px;                       /* small: bijschrift, meta */

  /* Maat */
  --gutter: clamp(20px, 3.5vw, 48px);
  --section: clamp(48px, 5.3vw, 72px);
  --gap: clamp(20px, 2.2vw, 32px);
  --radius: 4px;
}

/* 2. Basis ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--c-link); text-underline-offset: 0.18em; }
a:hover { color: var(--vermilion); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 3px; }
::selection { background: var(--cobalt); color: var(--white); }

/* 3. Type ------------------------------------------------------------------ */
.t-display, .t-title, .t-label {
  font-family: var(--f-header);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-heading);
  text-wrap: balance;
}
.t-display { font-size: var(--fs-display); line-height: 0.9; letter-spacing: -0.03em; }
.t-title { font-size: var(--fs-title); line-height: 1; letter-spacing: -0.03em; }
.t-label { font-size: var(--fs-label); line-height: 1; letter-spacing: -0.01em; }
.t-large { font-size: var(--fs-large); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.t-lede { font-size: var(--fs-lede); line-height: 1.5; }
.t-body { font-size: var(--fs-body); line-height: 1.5; }
.t-heading { font-size: var(--fs-lede); line-height: 1.5; font-weight: 600; letter-spacing: 0.01em; }
.t-small { font-size: var(--fs-small); line-height: 1.5; }
.t-caption { font-size: var(--fs-caption); line-height: 1.35; }

/* 4. Opzet ----------------------------------------------------------------- */
.section { padding: var(--section) var(--gutter); }
.section--tight { padding-top: 0; }

/* 5. Knoppen --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 12px 28px;
  border: 0; border-radius: var(--radius);
  background: var(--c-button); color: var(--ink);
  font: 500 var(--fs-small)/1.2 var(--f-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:hover { background: var(--c-button-hover); color: var(--ink); }
.btn--cobalt { background: var(--cobalt); color: var(--white); }
.btn--cobalt:hover { background: var(--ink); color: var(--white); }
.btn--white { background: var(--white); color: var(--ink); }
.btn--white:hover { background: var(--pink); }
.link { font-size: var(--fs-small); color: var(--c-link); }

/* 6. Site-header: vierkant logo links, linkgroep midden, knop rechts (naar Ensemble) */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 92px; padding: 12px var(--gutter);
  background: var(--white); border-bottom: 1px solid var(--line);
}
.site-header__logo .logo { height: 64px; }
.nav-links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 4px; background: var(--cream); border-radius: var(--radius); }
.nav-links a { display: block; padding: 8px 18px; border-radius: 2px; color: var(--ink); font-size: var(--fs-small); font-weight: 500; text-decoration: none; }
.nav-links a:hover { background: var(--white); color: var(--cobalt); }
.site-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.lang { display: flex; gap: 2px; }
.lang a { padding: 6px 9px; border-radius: 2px; color: var(--ink); font-size: var(--fs-caption); font-weight: 500; line-height: 1.2; text-decoration: none; }
.lang a:hover { color: var(--cobalt); text-decoration: underline; }
.lang a[aria-current] { background: var(--cream); color: var(--cobalt); }

/* 7. Page-header: gecentreerde paginakop ----------------------------------- */
.page-header { padding: clamp(40px, 6vw, 88px) var(--gutter) var(--section); text-align: center; }
.page-header__title { max-width: 12em; margin: 0 auto; }
.page-header__description { max-width: 650px; margin: 36px auto 0; }
.page-header__media { margin-top: var(--section); }

/* 8. Large text: brede intro, links ---------------------------------------- */
.large-text { max-width: 26em; }

/* 9. Text-media: tekst + vierkant beeld, om en om -------------------------- */
.text-media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.text-media__text { max-width: 530px; margin: 0 auto; }
.text-media__text h2, .text-media__text h3 { margin-bottom: 16px; }
.text-media__media { aspect-ratio: 1; overflow: hidden; }
.text-media__media img { width: 100%; height: 100%; object-fit: cover; }
.text-media--flip .text-media__media { order: -1; }

/* Beeldvlak: vlak kleurblok met één woord in kapitalen (Lebara-achtige kleurblokken) */
.block { display: grid; place-items: center; width: 100%; height: 100%; padding: 12%; }
.block--cobalt { background: var(--cobalt); color: var(--white); }
.block--vermilion { background: var(--vermilion); color: var(--ink); }
.block--pink { background: var(--pink); color: var(--cobalt); }
.block--yellow { background: var(--yellow); color: var(--cobalt); }
.block--mint { background: var(--mint); color: var(--cobalt); }
.block--cream { background: var(--cream); color: var(--cobalt); }
.block .t-display { color: inherit; font-size: clamp(64px, 11vw, 168px); text-align: center; }

/* 10. Quote: auteur in smalle kolom, citaat groot -------------------------- */
.quote { display: grid; grid-template-columns: 1fr 3fr; gap: var(--gap); margin: 0; }
.quote__author { padding-top: 12px; border-top: 1px solid var(--ink); align-self: start; max-width: 240px; }
.quote__author strong { display: block; font-weight: 700; }
.quote blockquote { margin: 0; max-width: 22em; color: var(--c-heading); }

/* 11. CTA: kop links, contactpersoon rechts -------------------------------- */
.cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.cta__title { max-width: 8em; }
.contact-person { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; padding-top: 24px; border-top: 1px solid var(--ink); }
.contact-person img { width: 150px; height: 150px; object-fit: cover; }
.contact-person h3 { margin-bottom: 12px; }
.contact-person ul { list-style: none; margin: 0; padding: 0; overflow-wrap: anywhere; }

/* 12. Site-footer ---------------------------------------------------------- */
.site-footer { background: var(--c-footer); color: var(--white); }
.site-footer a:not(.btn) { color: var(--white); }
.site-footer a:not(.btn):hover { color: var(--pink); }
.site-footer .t-label { color: var(--white); margin-bottom: 28px; }
.site-footer__top { display: grid; grid-template-columns: 1fr 3fr; gap: var(--gap); align-items: center; padding: 40px var(--gutter); border-bottom: 1px solid var(--line-on-cobalt); }
.site-footer__top .t-label { margin: 0; }
.site-footer__top div { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.site-footer__cols { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: var(--gap); padding: var(--section) var(--gutter); }
.site-footer__cols ul { list-style: none; margin: 0; padding: 0; }
.site-footer__cols li { margin-bottom: 6px; }
.site-footer__logo { margin-left: auto; }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; padding: 20px var(--gutter); border-top: 1px solid var(--line-on-cobalt); }

/* 13. Banden --------------------------------------------------------------- */
.band--cream { background: var(--cream); }
.band--pink { background: var(--pink); }
.band--yellow { background: var(--yellow); }
.band--mint { background: var(--mint); }
.band--vermilion { background: var(--vermilion); }
.band--vermilion .t-display, .band--vermilion .t-title { color: var(--ink); }
.band--cobalt { background: var(--cobalt); color: var(--white); }
.band--cobalt .t-display, .band--cobalt .t-title, .band--cobalt .t-label, .band--cobalt blockquote { color: var(--white); }
.band--cobalt a:not(.btn) { color: var(--white); }
.band--cobalt .quote__author, .band--cobalt .contact-person { border-color: var(--white); }

/* 14. Styleguide (alleen styleguide.html) ---------------------------------- */
.sg-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 14px var(--gutter); background: var(--ink); }
.sg-nav a, .sg-nav span { color: var(--white); font-size: var(--fs-caption); text-decoration: none; }
.sg-nav span { margin-right: auto; opacity: .75; }
.sg-nav a:hover { color: var(--pink); }
.sg-head { display: grid; grid-template-columns: 1fr 3fr; gap: var(--gap); padding-bottom: 28px; margin-bottom: 40px; border-bottom: 1px solid var(--ink); }
.sg-head p { max-width: 38em; }
.sg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.sg-grid--2 { grid-template-columns: 2fr 1fr; }
.sg-grid--half { grid-template-columns: 1fr 1fr; }
.sg-grid--5 { grid-template-columns: repeat(5, 1fr); gap: 0; }
.sg-grid--6 { grid-template-columns: repeat(6, 1fr); }
.sg-tile { display: grid; place-items: center; min-height: 300px; padding: 40px; }
.sg-tile--line { border: 1px solid var(--line); }
.sg-tile img { width: min(230px, 70%); }
.sg-tile--wide img { width: min(520px, 86%); }
.sg-tile--mono img { width: min(190px, 60%); }
.sg-note { margin-top: 10px; color: var(--ink); }
.sg-swatch { min-height: 300px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.sg-swatch--main { min-height: 380px; }
.sg-swatch code, .sg-table code { font: 500 var(--fs-caption)/1.4 ui-monospace, "SF Mono", Menlo, monospace; }
.sg-swatch .t-label { color: inherit; }
.sg-pairs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: var(--gap); }
.sg-pair { padding: 24px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; }
.sg-pair .t-title { color: inherit; }
.sg-spec { display: grid; grid-template-columns: 1fr 3fr; gap: var(--gap); padding: 32px 0; border-top: 1px solid var(--line); }
.sg-head + .sg-spec { border-top: 0; padding-top: 0; }
.sg-spec dl { margin: 0; }
.sg-spec dt { font-weight: 600; }
.sg-spec dd { margin: 0 0 12px; }
.sg-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.sg-table th, .sg-table td { text-align: left; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.sg-scroll { overflow-x: auto; }
.sg-frame { border: 1px solid var(--line); }
.sg-frame--site .chapter__block { position: static; }
.sg-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* Logo: SVG-bestanden in assets/logo/ (hmw-{blok|label|balk}-{nr}-{tegel}-{tekst}.svg). Hoogte bepaalt de maat */
.logo { display: block; width: auto; }
.logo--blok { height: 177px; }
.logo--label { height: 246px; }
.logo--balk { height: 48px; }
.site-footer__logo .logo { height: 140px; margin-left: auto; }
.sg-chip { display: inline-block; padding: 4px 12px; font: 700 20px/1.2 var(--f-header); }
.sg-sub { margin: 40px 0 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.sg-list { margin: 12px 0 0; padding-left: 1.1em; }
.sg-list li { margin-bottom: 8px; }
.sg-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sg-grid--4 .sg-tile { min-height: 320px; padding: 24px; }

/* 15. One-pager (index.html) ------------------------------------------------ */
section[id], main[id] { scroll-margin-top: 96px; }
.site-header--sticky { position: sticky; top: 0; z-index: 10; }
.strip { padding: var(--section) var(--gutter); text-align: center; }
.strip p { max-width: 16em; margin: 0 auto; }
.page-header__lines { margin-top: 20px; }
.page-header__cta { margin-top: 36px; }
.eyebrow { margin-bottom: 16px; }
.eyebrow b { font-weight: 700; margin-right: 10px; }
.split { display: grid; grid-template-columns: 1fr 3fr; gap: var(--gap); }
.split__label { align-self: start; max-width: 240px; padding-top: 12px; border-top: 1px solid var(--ink); }
.split__label b { font-weight: 700; margin-right: 10px; }
.split__body > * + * { margin-top: 28px; }
.split__body .t-title { max-width: 14em; }
.measure { max-width: 34em; }
.lines p { margin: 0; }
.accent { color: var(--cobalt); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { padding: 10px 0; border-top: 1px solid var(--line); }
.rows li:last-child { border-bottom: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips li { padding: 6px 12px; border: 1px solid currentColor; border-radius: var(--radius); font-size: var(--fs-caption); line-height: 1.35; }
.stack > * + * { margin-top: 20px; }
.text-media--top { align-items: start; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); list-style: none; margin: 0; padding: 0; }
.facts--3 { grid-template-columns: repeat(3, 1fr); }
.facts li { padding-top: 12px; border-top: 1px solid currentColor; font-weight: 600; }
.statement { max-width: 16em; }
.zero-ten { display: flex; flex-wrap: wrap; gap: 0 0.18em; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); list-style: none; margin: 0; padding: 0; }
.steps li { padding-top: 12px; border-top: 1px solid var(--ink); }
.steps span { display: block; margin-bottom: 4px; }
.proof { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; }
.proof img { width: 150px; height: 150px; object-fit: cover; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: var(--section); }
.case__media { aspect-ratio: 4 / 3; margin-bottom: 20px; }
.case__media .t-display { font-size: clamp(40px, 5vw, 76px); }
.case h3 { margin-bottom: 8px; }
.case p { margin-bottom: 0.6em; }
.summary { margin-top: var(--section); }
.loop { width: 100%; max-width: 520px; margin: 0 auto; color: var(--cobalt); }
.loop .ring path { fill: none; stroke: currentColor; stroke-width: 3; }
.loop text { font: 700 26px var(--f-header); text-transform: uppercase; fill: var(--cobalt); }
.help { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.card { padding-top: 16px; border-top: 1px solid var(--ink); }
.card > * + * { margin-top: 14px; }
.card--cobalt { padding: 24px; border: 0; background: var(--cobalt); color: var(--white); }
.big-loop ol { display: flex; flex-wrap: wrap; gap: 0 0.22em; list-style: none; margin: 0; padding: 0; }
.big-loop li::after { content: "\2192"; margin-left: 0.22em; color: var(--pink); }
.big-loop li:last-child::after { content: "\21BA"; }
.contact-links { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 20px; }
.site-footer__cols--site { grid-template-columns: 2fr 1fr 1fr; align-items: start; }
.site-footer__cols--site .logo { height: 120px; margin: 0; }
.band--cobalt .eyebrow, .band--cobalt .accent { color: var(--white); }
.band--cobalt .accent { color: var(--pink); }
.band--cobalt .split__label { border-color: var(--white); }
.band--pink .t-title, .band--pink .t-display { color: var(--cobalt); }



/* 16. One-pager v3.7: nieuwe indeling ----------------------------------------- */
.journey { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0 var(--gutter); gap: 0; }
.journey a { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 3 / 4; padding: clamp(14px, 1.6vw, 24px); text-decoration: none; }
.journey a .t-title { color: inherit; font-size: clamp(22px, 2.9vw, 46px); }
.journey a:hover, .journey a:focus-visible { background: var(--vermilion); color: var(--ink); }
.tone--cobalt { background: var(--cobalt); color: var(--white); }
.tone--pink { background: var(--pink); color: var(--cobalt); }
.tone--mint { background: var(--mint); color: var(--cobalt); }
.tone--cream { background: var(--cream); color: var(--cobalt); }
.chapter { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 5vw, 80px); align-items: start; padding: var(--section) var(--gutter); }
.chapter__block { position: sticky; top: 116px; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1; max-height: calc(100vh - 150px); width: 100%; padding: clamp(18px, 2vw, 28px); }
.chapter__block .t-display { color: inherit; font-size: clamp(64px, 10vw, 150px); }
.chapter__block .loop { max-width: none; margin: auto; }
.chapter__body { max-width: 640px; padding-top: 4px; }
.chapter__body > * + * { margin-top: 24px; }
.columns { columns: 2; column-gap: var(--gap); }
.columns li { break-inside: avoid; }
.banner { padding: clamp(64px, 9vw, 140px) var(--gutter); }
.banner .t-display { max-width: 9em; }
.banner__note { max-width: 30em; margin-top: 32px; }
.banner--split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 5vw, 80px); align-items: end; }
.banner--split .steps { grid-template-columns: 1fr 1fr; }
.banner--split .zero-ten { flex-wrap: nowrap; white-space: nowrap; font-size: clamp(48px, 7.2vw, 104px); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.duo > * > * + * { margin-top: 24px; }
.section-head { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between; padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid currentColor; }
.services { list-style: none; margin: 0; padding: 0; }
.service { display: grid; grid-template-columns: 3fr 5fr 4fr; gap: var(--gap); align-items: start; padding: 28px 0; border-top: 1px solid var(--ink); }
.service:first-child { border-top: 0; padding-top: 0; }
.service--note { display: block; margin-top: 12px; padding: 28px; border: 0; background: var(--cobalt); color: var(--white); }
.service--note p { max-width: 30em; }

/* 17. v3.9: bewijsregel, situaties, case-periode ------------------------------ */
.page-header__proof { max-width: 34em; margin: 28px auto 0; }
.situations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); list-style: none; margin: 40px 0 0; padding: 0; }
.situations li { padding-top: 16px; border-top: 1px solid var(--ink); }
.situations p { margin: 0; }
.situations p + p { margin-top: 8px; }
.case__meta { margin-bottom: 10px; }

/* Responsief (alleen scherm) --------------------------------------------------- */
@media screen and (max-width: 1200px) {
  .sg-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 900px) {
  .site-header { flex-wrap: wrap; row-gap: 0; min-height: 0; padding-bottom: 0; }
  .site-header__nav { order: 3; flex-basis: 100%; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .site-header__nav::-webkit-scrollbar { display: none; }
  .nav-links { background: none; padding: 10px 0; width: max-content; }
  .nav-links a { background: var(--cream); padding: 7px 14px; }
  .site-header__logo .logo { height: 48px; }
  .text-media, .cta, .quote, .split, .cards, .sg-head, .sg-spec, .sg-grid--2 { grid-template-columns: 1fr; }
  .facts, .facts--3, .steps, .help { grid-template-columns: 1fr 1fr; }
  .site-footer__cols--site { grid-template-columns: 1fr; }
  .journey { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .situations { grid-template-columns: 1fr 1fr; }
  .journey a .t-title { font-size: clamp(24px, 5.4vw, 40px); }
  .journey a { aspect-ratio: 1; }
  .chapter, .duo, .banner--split, .service { grid-template-columns: 1fr; }
  .chapter__block { position: static; aspect-ratio: 16 / 9; max-height: none; }
  .service { gap: 12px; }
  section[id], main[id] { scroll-margin-top: 124px; }
  .text-media__text { margin: 0; }
  .text-media__media, .text-media--flip .text-media__media { order: -1; }
  .site-footer__top, .site-footer__cols { grid-template-columns: 1fr; }
  .site-footer__logo, .site-footer__logo .logo { margin-left: 0; }
  .sg-grid, .sg-grid--half { grid-template-columns: 1fr; }
  .sg-grid--4 { grid-template-columns: 1fr 1fr; }
  .sg-grid--5, .sg-grid--6, .sg-pairs { grid-template-columns: 1fr 1fr; gap: 0; }
  .sg-pairs { gap: var(--gap); }
  .sg-swatch, .sg-swatch--main { min-height: 200px; }
}
@media screen and (max-width: 520px) {
  .contact-person { grid-template-columns: 96px 1fr; gap: 16px; }
  .contact-person img { width: 96px; height: 96px; }
  .btn { padding: 12px 20px; }
  .site-header__actions { gap: 8px; }
  .lang a { padding: 6px 7px; }
  .sg-pairs, .sg-grid--4, .help { grid-template-columns: 1fr; }
  .proof { grid-template-columns: 96px 1fr; gap: 16px; }
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .situations { grid-template-columns: 1fr; }
  .journey a .t-title { font-size: 32px; }
  .columns { columns: 1; }
  .chapter__block { aspect-ratio: 4 / 3; }
  .proof img { width: 96px; height: 96px; }
}

/* Print / PDF: schermbrede pagina's, kleuren behouden ------------------------ */
@page { size: 1360px 960px; margin: 0; }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .site-header--sticky, .chapter__block { position: static; }
  .chapter, .banner, .service, .journey { break-inside: avoid; }
  .sg-grid > div, .sg-tile, .sg-swatch, .sg-pair, .sg-spec, .sg-table tr, .sg-head, .text-media, .quote, .cta, .site-footer, .page-header { break-inside: avoid; }
  .sg-head, .sg-sub { break-after: avoid; }
  .sg-note { break-before: avoid; }
  .sg-tile.sg-row { min-height: 0 !important; }
  #kleur, #type, #componenten, #opbouw { break-before: page; }
}