/* SIGVARD PARTNERS — main.css
 * Bevat design tokens (v1.0 9 okt 2026) + implementatiestijlen.
 * Kleuren en typografie zijn reproduceerbare benaderingen op basis van de
 * goedgekeurde Canva-referentie, geen officieel kleurenhandboek van de klant.
 */

/* Herstel [hidden]-attribuut: auteur-CSS kan de UA-stylesheet overschrijven */
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════
   WEBFONTS — lokaal gehoste open-licentie WOFF2
═══════════════════════════════════════════ */
@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/playfair-display-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-300-italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/fonts/source-sans-3-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/fonts/source-sans-3-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════
   DESIGN TOKENS — sigvard-tokens.css v1.0
═══════════════════════════════════════════ */
/* Schaal op desktop (27 okt): alle lettergroottes, afstanden, iconen en de breedte van de inhoud vanaf 1024 px
   zijn een veelvoud van --s. --schaal is de knop (1 = zoals gemeten uit de mock-up); onder 1024 px is --s altijd 1.
   Geen CSS zoom of transform. Breekpunten, 100vw en lijnen van 1 px schalen niet mee. */
:root {
  --schaal: 0.8; /* gekozen 27 okt (Claudia); 1 = maten zoals gemeten uit de mock-up */
  --s: 1;
}
@media (min-width: 1024px) {
  :root { --s: var(--schaal); }
}
:root {
  --color-ivory: #FBFAF7;
  --color-paper: #FEFEFC;
  --color-ink: #19334F;
  /* 27 okt (variant E): blauwgrijs naar zwartblauw #1F303F, koppen nachtblauw #19334F */
  --color-body: #1F303F;         /* was #526980 */
  --color-slate: #1F303F;        /* was #52708A — tekstvlak blok 3 */
  --color-slate-quote: #1F303F;  /* was #4E6984 — vlak achter de mistfoto's */
  --color-team: #1F303F;
  --color-line: #D7DEE4;
  --color-white: #FDFCF9;
  --color-button: #233B55;
  --color-button-hover: #1A3047;
  --color-focus-ring: #19334F;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-ui: 'Source Sans 3', Arial, sans-serif;

  --container-max: calc(1276px * var(--s)); /* 27 okt: = breedte van de inhoud op 1440 (1440 − 2 × 82); was 1296 */
  --page-gutter: 82px; /* linkermarge gemeten uit de mock-up (82–85 px op 1440); schaalt niet mee: extra ruimte gaat naar de marge */
  --header-height: calc(96px * var(--s));
  --hero-min-height: calc(587px * var(--s));
  --mistband-desktop-height: calc(283px * var(--s));
  --section-pad-y: calc(88px * var(--s));
  --gap-xs: calc(8px * var(--s));
  --gap-sm: calc(16px * var(--s));
  --gap-md: calc(24px * var(--s));
  --gap-lg: calc(40px * var(--s));
  --gap-xl: calc(64px * var(--s));
  --radius-button: calc(2px * var(--s));
  --border-subtle: 1px solid var(--color-line);

  --font-hero: calc(68px * var(--s));
  --font-subhead: calc(36px * var(--s));
  --font-card: calc(24px * var(--s));
  --font-body-size: calc(18px * var(--s));
  --font-small: calc(15px * var(--s));
  --font-nav: calc(16px * var(--s));
  --font-eyebrow: calc(13px * var(--s));
  --line-hero: 1.03;
  --line-card: 1.18;
  --line-body: 1.55;
  --line-small: 1.45;
  --tracking-display: -0.018em;
  --tracking-eyebrow: 0.12em;

  /* Blokken na de hero — gemeten uit de mock-up (÷ 2,253), vloeiend tussen 390 en 1440 px */
  --color-navy: #19334F; /* was #06286B */
  --color-navy-text: #1F303F; /* was #375287 */
  --color-navy-deep: #19334F; /* was #212C5E */
  --color-focus-label: #1F303F; /* was #4B6389 */
  --color-focus-intro: #1F303F; /* was #51678C */
  --color-focus-item: #1F303F; /* was #5B6F91 */
  --color-panel-warm: #F7F5F0;
  --color-focus-bg: #F9F9F7;
  --fs-h2: clamp(calc(34px * var(--s)), calc(27.31px * var(--s)) + calc(1.714vw * var(--s)), calc(52px * var(--s)));
  --fs-mist1: clamp(calc(22px * var(--s)), calc(18.29px * var(--s)) + calc(0.952vw * var(--s)), calc(32px * var(--s)));
  --fs-label: clamp(calc(13px * var(--s)), calc(11.89px * var(--s)) + calc(0.286vw * var(--s)), calc(16px * var(--s)));
  --fs-label-b3: clamp(calc(12px * var(--s)), calc(11.26px * var(--s)) + calc(0.190vw * var(--s)), calc(14px * var(--s)));
  --fs-kw: clamp(calc(14px * var(--s)), calc(13.63px * var(--s)) + calc(0.095vw * var(--s)), calc(15px * var(--s)));
  --fs-b3body: clamp(calc(17px * var(--s)), calc(16.07px * var(--s)) + calc(0.238vw * var(--s)), calc(19.5px * var(--s)));
  --fs-dbody: clamp(calc(17px * var(--s)), calc(16.26px * var(--s)) + calc(0.190vw * var(--s)), calc(19px * var(--s)));
  --fs-dtitle: clamp(calc(20px * var(--s)), calc(18.51px * var(--s)) + calc(0.381vw * var(--s)), calc(24px * var(--s)));
  --fs-fintro: clamp(calc(17px * var(--s)), calc(15.70px * var(--s)) + calc(0.333vw * var(--s)), calc(20.5px * var(--s)));
  --fs-fitem: calc(15.5px * var(--s));
  --fs-ftitle: clamp(calc(17px * var(--s)), calc(16.81px * var(--s)) + calc(0.048vw * var(--s)), calc(17.5px * var(--s)));
  --fs-tbody: clamp(calc(17px * var(--s)), calc(16.26px * var(--s)) + calc(0.190vw * var(--s)), calc(19px * var(--s)));
  --fs-link-b3: clamp(calc(17px * var(--s)), calc(16.07px * var(--s)) + calc(0.238vw * var(--s)), calc(19.5px * var(--s)));
  --fs-link: clamp(calc(17px * var(--s)), calc(15.70px * var(--s)) + calc(0.333vw * var(--s)), calc(20.5px * var(--s)));
  --fs-name: clamp(calc(19px * var(--s)), calc(18.07px * var(--s)) + calc(0.238vw * var(--s)), calc(21.5px * var(--s)));
  --fs-role: clamp(calc(12px * var(--s)), calc(11.26px * var(--s)) + calc(0.190vw * var(--s)), calc(14px * var(--s)));
  --fs-quote: clamp(calc(17px * var(--s)), calc(15.51px * var(--s)) + calc(0.381vw * var(--s)), calc(21px * var(--s)));
  --size-icon-d: clamp(calc(110px * var(--s)), calc(91.43px * var(--s)) + calc(4.762vw * var(--s)), calc(160px * var(--s)));
  --size-icon-f: clamp(calc(96px * var(--s)), calc(79.66px * var(--s)) + calc(4.190vw * var(--s)), calc(140px * var(--s)));
}

/* ═══════════════════════════════════════════
   BASIS
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Ankers: blok begint onder de vaste header (header + 1 px rand) */
[id] { scroll-margin-top: calc(var(--header-height) + 1px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  font-weight: 300;
  line-height: var(--line-body);
  color: var(--color-body);
  background: var(--color-paper);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
img { display: block; height: auto; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: calc(3px * var(--s)) solid var(--color-focus-ring); outline-offset: calc(3px * var(--s)); }
.on-dark :focus-visible { outline-color: var(--color-white); }

.container {
  width: min(calc(100% - 2 * var(--page-gutter)), var(--container-max));
  margin-inline: auto;
}
.section { padding-block: var(--section-pad-y); }
.section--paper { background: var(--color-paper); }
.section--team { background: var(--color-team); color: var(--color-white); }

/* ═══════════════════════════════════════════
   TYPOGRAFIE
═══════════════════════════════════════════ */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-body);
  margin-block: 0;
}
.on-dark .eyebrow { color: rgba(253, 252, 249, 0.65); }

h1, h2, h3, p { margin-block: 0; }
h1, h2, h3 { color: var(--color-ink); font-weight: 400; }
/* Koppen breken nooit midden in een woord: maten zijn zo gekozen dat het langste woord past */
h1, h2, h3, .sigvard-mistband__text, .sigvard-team__name { overflow-wrap: normal; hyphens: manual; }
h1, h2 { font-family: var(--font-display); letter-spacing: var(--tracking-display); }
h1 { font-size: var(--font-hero); line-height: var(--line-hero); }
h2 { font-size: var(--fs-h2); line-height: 1.03; }
h3 { font-family: var(--font-body); font-size: var(--font-card); line-height: var(--line-card); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--color-white); }

/* ═══════════════════════════════════════════
   HEADER & NAVIGATIE
═══════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-ivory);
  border-bottom: var(--border-subtle);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.site-header--transparent {
  background: transparent;
  border-bottom-color: transparent;
}
.site-header__inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24px * var(--s));
}
.site-logo {
  font-family: var(--font-ui);
  font-size: var(--font-nav);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-logo:hover { color: var(--color-button-hover); }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: calc(24px * var(--s)); font-size: var(--font-nav); }
.site-nav a {
  font-family: var(--font-ui);
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  min-height: calc(44px * var(--s));
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: currentColor; }

.site-nav--mobile {
  background: var(--color-ivory);
  border-top: var(--border-subtle);
  padding-block: calc(16px * var(--s)) calc(24px * var(--s));
}
.site-nav--mobile .container { display: flex; flex-direction: column; gap: 0; }
.site-nav--mobile a { display: flex; align-items: center; min-height: calc(48px * var(--s)); }

/* Hamburger */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: calc(5px * var(--s));
  background: none;
  border: none;
  cursor: pointer;
  padding: calc(10px * var(--s));
  min-width: calc(44px * var(--s));
  min-height: calc(44px * var(--s));
}
.menu-toggle__bar {
  display: block;
  width: calc(22px * var(--s));
  height: calc(2px * var(--s));
  background: var(--color-ink);
  border-radius: 1px;
}

/* ═══════════════════════════════════════════
   CTA-BUTTONS & LINKS
═══════════════════════════════════════════ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(12px * var(--s));
  min-height: calc(54px * var(--s));
  padding: calc(10px * var(--s)) calc(30px * var(--s));
  background: var(--color-button);
  color: var(--color-white);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: var(--fs-link);
  font-weight: 300;
  line-height: 1.2;
  transition: background-color 0.16s ease;
  cursor: pointer;
}
.button:hover { background: var(--color-button-hover); }
.button:active { transform: translateY(1px); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: calc(20px * var(--s));
  min-height: calc(37px * var(--s)); /* onderstreping ~12–13 px onder de basislijn, zoals in de mock-up */
  font-family: var(--font-body);
  font-size: var(--fs-link);
  line-height: 1.2;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.text-link:hover { border-bottom-width: calc(2px * var(--s)); }
.text-link svg { width: 0.8em; height: 0.8em; flex: none; }

/* ═══════════════════════════════════════════
   BLOK 1 — HERO
═══════════════════════════════════════════ */
/* Lichte lucht: middel is standaard; --licht en --sterk voor de reviewvergelijking */
.sigvard-hero {
  --hero-sky: 0.75;
  position: relative;
  margin-top: calc(-1 * var(--header-height));
  min-height: calc(var(--hero-min-height) + var(--header-height));
  background-color: var(--color-ivory);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.sigvard-hero--licht {
  --hero-sky: 0.55;
}
.sigvard-hero--sterk {
  --hero-sky: 0.9;
}
picture.sigvard-hero__bg {
  display: block;
  position: absolute;
  inset: 0;
}
picture.sigvard-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 31% center; /* 27 okt: was 45%; telefoon gecentreerd op de mensen op de brug */
  /* 27 okt: foto in eigen kleur, filter (saturate/brightness/contrast) en kleurzweem vervallen */
}
/* Lucht bijna wit (boven) en mobiel een rustig vlak onder de tekst */
picture.sigvard-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgb(251 250 247 / var(--hero-sky)) 0%, rgb(251 250 247 / 0) 48%),
    linear-gradient(to top, var(--color-ivory) 0%, var(--color-ivory) 50%, rgb(251 250 247 / 0) 80%);
}
.sigvard-hero .container {
  position: relative;
  z-index: 3;
  padding-block: calc(72px * var(--s));
  padding-top: calc(var(--header-height) + calc(72px * var(--s)));
}

/* Vanaf tablet: foto rechts, brede zachte overgang naar ivoor links */
@media (min-width: 768px) {
  .sigvard-hero__line { display: block; }
  picture.sigvard-hero__bg {
    left: auto;
    width: 70%;
  }
  /* 27 okt: foto naar rechts, zodat de brug met de mensen rechts van de tekst staat (was 30%, zonder verschuiving).
     Het vrijgekomen stuk links valt binnen het volledig ivoren deel van het verloop (0–20%). */
  picture.sigvard-hero__bg { overflow: hidden; }
  picture.sigvard-hero__bg img { object-position: 0% center; transform: translateX(14%); }
  picture.sigvard-hero__bg::after {
    background:
      linear-gradient(to right, var(--color-ivory) 0%, var(--color-ivory) 20%, rgb(251 250 247 / 0.75) 32%, rgb(251 250 247 / 0.3) 46%, rgb(251 250 247 / 0) 62%),
      linear-gradient(to bottom, rgb(251 250 247 / var(--hero-sky)) 0%, rgb(251 250 247 / 0) 48%);
  }
}
/* Tablet: te smal om de mensen naast de tekst te zetten; wel alle drie volledig in beeld (27 okt) */
@media (min-width: 768px) and (max-width: 1023px) {
  picture.sigvard-hero__bg img { object-position: 14% center; transform: none; }
  /* Ivoor loopt verder door achter de tekst, zodat de kop genoeg contrast heeft (27 okt, optie B) */
  picture.sigvard-hero__bg::after {
    background:
      linear-gradient(to right, var(--color-ivory) 0%, var(--color-ivory) 24%, rgb(251 250 247 / 0.85) 40%, rgb(251 250 247 / 0.55) 54%, rgb(251 250 247 / 0) 72%),
      linear-gradient(to bottom, rgb(251 250 247 / var(--hero-sky)) 0%, rgb(251 250 247 / 0) 48%);
  }
}
.sigvard-hero__eyebrow { margin-bottom: calc(20px * var(--s)); }
.sigvard-hero__text h1 { margin-bottom: calc(24px * var(--s)); }
.sigvard-hero__desc {
  max-width: 50ch;
  margin-bottom: calc(40px * var(--s));
  color: var(--color-ink);
}
.sigvard-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(24px * var(--s));
}
.sigvard-hero__text { max-width: calc(640px * var(--s)); }
.sigvard-hero .text-link { color: var(--color-ink); }


/* ═══════════════════════════════════════════
   BLOK 2 & 5 — MISTBANDEN
═══════════════════════════════════════════ */
.sigvard-mistband {
  position: relative;
  min-height: var(--mistband-desktop-height);
  background-color: var(--color-slate-quote);
  color: var(--color-white);
  display: grid;
  align-items: center;
  overflow: hidden;
}
picture.sigvard-mistband__bg {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
}
picture.sigvard-mistband__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sigvard-mistband::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(23, 44, 64, 0.22);
  z-index: 1;
  pointer-events: none;
}
/* Blok 2 (intro) is lichter van toon: overlay verhoogd naar 0.50 voor WCAG 4.5:1 tov wit */
.sigvard-mistband--intro::before {
  background: rgba(23, 44, 64, 0.50);
}
.sigvard-mistband .container {
  position: relative;
  z-index: 2;
  padding-block: calc(40px * var(--s));
}
.sigvard-mistband__text {
  font-family: var(--font-display);
  font-size: var(--fs-mist1);
  line-height: 1.5;
  color: var(--color-white);
  text-align: center;
  margin-inline: auto;
  max-width: calc(1100px * var(--s));
}
/* Blok 2: tekstblok staat in de mock-up 8 px boven het midden */
.sigvard-mistband--intro .container { padding-block: calc(28px * var(--s)) calc(52px * var(--s)); }
.sigvard-mistband--quote .container { padding-block: calc(28px * var(--s)) calc(52px * var(--s)); }
/* Bewust gelijk aan mistband 1 (grootte, gewicht, regelafstand); regelval op twee regels:
   "Succesvolle investeringen / beginnen met ondernemerschap." */
.sigvard-mistband--quote .sigvard-mistband__text { max-width: 15.2em; }

/* ═══════════════════════════════════════════
   BLOK 3 — HUIS / ONDERNEMERSCHAP
═══════════════════════════════════════════ */
/* Maten gemeten uit mock-up (÷ 2,253): blok 540 hoog, paneel 616 breed,
   tekening 529×460 met 40 px tot de kernwoorden, kernwoorden 15 px op 26 px regelafstand */
.sigvard-house {
  display: grid;
  grid-template-columns: minmax(0, 616fr) minmax(0, 824fr);
  min-height: calc(540px * var(--s));
}
.sigvard-house__copy {
  background: var(--color-slate);
  color: var(--color-white);
  display: flex;
  /* bovenaan vast (niet centreren), zodat openen van "Meer over ons" niets laat verspringen */
  align-items: flex-start;
  padding-top: calc(60px * var(--s));
  /* Links uitlijnen met container, ook op schermen breder dan 1440px */
  padding-inline-start: max(calc((100vw - var(--container-max)) / 2), var(--page-gutter));
}
.sigvard-house__copy-inner {
  padding-block: calc(44px * var(--s)) calc(66px * var(--s));
  padding-inline-end: clamp(calc(24px * var(--s)), calc(4vw * var(--s)), calc(48px * var(--s)));
  display: flex;
  flex-direction: column;
  max-width: calc(560px * var(--s));
  width: 100%;
}
.sigvard-house__copy-inner .text-link { align-self: flex-start; }
.sigvard-house__copy-inner .eyebrow {
  font-size: var(--fs-label-b3);
  letter-spacing: 0.137em;
  color: #EFF2F4;
  margin-bottom: calc(22px * var(--s));
}
.sigvard-house__copy { container-type: inline-size; }
.sigvard-house__copy-inner h2 { color: var(--color-white); margin-bottom: calc(20px * var(--s)); font-size: min(var(--fs-h2), (100cqi - calc(48px * var(--s))) / 8.8); max-width: 9.2em; /* "Ondernemerschap / als vertrekpunt" */ }
.sigvard-house__copy-inner > p:not(.eyebrow) {
  font-size: var(--fs-b3body);
  line-height: 1.48;
  color: #F6F8F9;
  max-width: calc(470px * var(--s));
  margin-bottom: calc(18px * var(--s));
}
.sigvard-house__copy-inner .text-link { font-size: var(--fs-link-b3); color: #F4F6F8; }

.sigvard-house__art {
  background: var(--color-panel-warm);
  /* raster bovenaan vast: tekening blijft staan als het blok hoger wordt; kernwoorden gecentreerd op de tekening */
  display: grid;
  grid-template-columns: minmax(0, calc(529px * var(--s))) max-content;
  align-items: center;
  align-content: start;
  column-gap: calc(40px * var(--s));
  padding-block: calc(40px * var(--s));
  padding-inline-start: clamp(calc(24px * var(--s)), calc(5vw * var(--s)), calc(72px * var(--s)));
  padding-inline-end: calc(max(0px, (100vw - calc(1440px * var(--s))) / 2) + calc(30px * var(--s)));
}
.sigvard-house__art picture {
  display: block;
  flex: 1 1 auto;
  max-width: calc(529px * var(--s));
  min-width: 0;
}
/* Wit van de tekening valt weg tegen het papier; zachte randen zodat geen rechthoek zichtbaar is */
.sigvard-house__img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  filter: contrast(1.12) brightness(1.02);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
.sigvard-house__keywords {
  list-style: none;
  padding: 0;
  margin: calc(7px * var(--s)) 0 0;
  flex: 0 0 auto;
}
.sigvard-house__keywords li {
  font-family: var(--font-body);
  font-size: var(--fs-kw);
  line-height: calc(26.2px * var(--s));
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #4E708D;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════
   BLOK 4 — DIENSTEN
═══════════════════════════════════════════ */
.sigvard-services { padding-block: calc(54px * var(--s)) calc(46px * var(--s)); }
.sigvard-services__eyebrow { color: var(--color-body); margin-bottom: calc(15px * var(--s)); }
.sigvard-services h2 { color: var(--color-navy); margin-bottom: 0; }
.sigvard-services__grid {
  display: grid;
  /* scheidingslijnen op x 382 / 726 / 1070 zoals in de mock-up */
  grid-template-columns: minmax(0, 310fr) minmax(0, 344fr) minmax(0, 344fr) minmax(0, 298fr);
  gap: 0;
  margin-top: calc(35px * var(--s));
}
.sigvard-service {
  min-width: 0;
  padding-inline: calc(46px * var(--s)) calc(26px * var(--s));
  border-right: var(--border-subtle);
}
.sigvard-service:first-child { padding-left: 0; }
.sigvard-service:last-child { border-right: 0; padding-right: 0; }
.sigvard-service__art {
  width: var(--size-icon-d);
  height: var(--size-icon-d);
  object-fit: contain;
  /* iconen gecentreerd boven de tekstkolom */
  margin: 0 auto calc(12px * var(--s));
}
.sigvard-service h3 {
  font-size: var(--fs-dtitle);
  color: var(--color-navy);
  margin-bottom: calc(12px * var(--s));
}
.sigvard-service p {
  font-size: var(--fs-dbody);
  line-height: 1.43;
  color: var(--color-navy-text);
}

/* ═══════════════════════════════════════════
   BLOK 6 — FOCUS
═══════════════════════════════════════════ */
.sigvard-focus-block { background: var(--color-focus-bg); padding-block: 0 calc(9px * var(--s)); }
.sigvard-focus {
  display: grid;
  grid-template-columns: minmax(0, 493fr) minmax(0, 815fr);
  column-gap: calc(40px * var(--s));
  align-items: start; /* openen van "Onze visie en criteria" rekt het raster rechts niet op */
}
.sigvard-focus__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: calc(66px * var(--s));
}
.sigvard-focus__intro .eyebrow { color: var(--color-focus-label); margin-bottom: calc(19px * var(--s)); }
.sigvard-focus__intro h2 { color: var(--color-navy); margin-bottom: calc(30px * var(--s)); }
.sigvard-focus__intro > p:not(.eyebrow) {
  font-size: var(--fs-fintro);
  line-height: 1.385;
  color: var(--color-focus-intro);
  max-width: calc(450px * var(--s));
  margin-bottom: calc(70px * var(--s));
}
.sigvard-focus__intro .text-link { color: var(--color-navy-deep); }

.sigvard-focus__grid {
  display: grid;
  /* kolommen 258 / 281 / 276 breed, lijnen op x 863 en 1144 */
  grid-template-columns: minmax(0, 258fr) minmax(0, 281fr) minmax(0, 276fr);
}
.sigvard-focus__item {
  position: relative;
  min-width: 0;
  padding: 0 calc(10px * var(--s)) 0 calc(42px * var(--s));
  --rule-top: 0px;
}
.sigvard-focus__item:nth-child(3n + 1) { padding-left: calc(23px * var(--s)); }
.sigvard-focus__item:nth-child(3n) { padding-right: 0; }
.sigvard-focus__item:nth-child(-n + 3) { --rule-top: calc(74px * var(--s)); border-bottom: var(--border-subtle); padding-bottom: calc(14px * var(--s)); }
.sigvard-focus__item:nth-child(n + 4) { margin-top: calc(26px * var(--s)); }
/* Verticale lijnen per rij, in rij 1 vanaf halverwege de iconen */
.sigvard-focus__item:not(:nth-child(3n))::after {
  content: '';
  position: absolute;
  top: var(--rule-top);
  bottom: 0;
  right: 0;
  width: 1px;
  background: var(--color-line);
}
.sigvard-focus__art {
  width: var(--size-icon-f);
  height: var(--size-icon-f);
  object-fit: contain;
  margin: 0 0 calc(8px * var(--s));
}
.sigvard-focus__item h3 {
  font-size: var(--fs-ftitle);
  font-weight: 600;
  line-height: 1.39;
  margin-bottom: calc(10px * var(--s));
  color: var(--color-navy-deep);
}
.sigvard-focus__item p {
  font-size: var(--fs-fitem);
  line-height: 1.43;
  color: var(--color-focus-item);
}
@media (min-width: 1200px) {
  /* Iconen dicht op de titel, zoals in de mock-up */
  .sigvard-service__art { margin-bottom: calc(-14px * var(--s)); }
  /* Kolom 3: regelval zoals in de mock-up ("om de volgende fase / mogelijk te maken.") */
  .sigvard-service:nth-child(3) p { max-width: calc(258px * var(--s)); }
}
/* Focus: driekoloms raster pas vanaf 1280 px, anders breekt "ontwikkelpotentieel" */
@media (min-width: 1280px) {
  .sigvard-focus__art { margin: calc(14px * var(--s)) 0 calc(-14px * var(--s)); }
  /* Rij 2 sluit direct aan op de lijn, zoals in de mock-up */
  .sigvard-focus__item:nth-child(n + 4) .sigvard-focus__art { margin-top: calc(-28px * var(--s)); }
  /* Tekstbreedte per vak zodat de regelval gelijk is aan de mock-up */
  .sigvard-focus__item:nth-child(1) p,
  .sigvard-focus__item:nth-child(4) p { max-width: calc(203px * var(--s)); }
  .sigvard-focus__item:nth-child(2) p { max-width: calc(200px * var(--s)); }
  .sigvard-focus__item:nth-child(3) p { max-width: calc(190px * var(--s)); }
  .sigvard-focus__item:nth-child(6) p { max-width: calc(220px * var(--s)); }
}

/* ═══════════════════════════════════════════
   BLOK 7 — TEAM
═══════════════════════════════════════════ */
.sigvard-team-block { padding-block: calc(4px * var(--s)) calc(80px * var(--s)); }
.sigvard-team {
  display: grid;
  grid-template-columns: minmax(0, 533fr) minmax(0, 754fr);
  column-gap: calc(40px * var(--s));
  align-items: start;
}
.sigvard-team__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: calc(97px * var(--s));
}
.sigvard-team__intro .eyebrow { color: #D4DBDE; margin-bottom: calc(19px * var(--s)); }
.sigvard-team__intro h2 { margin-bottom: calc(21px * var(--s)); }
@media (min-width: 1024px) {
  /* kop van 52 px past niet in de introkolom: mag doorlopen in de tussenruimte, vóór de portretten */
  .sigvard-team__intro h2 { margin-right: calc(-40px * var(--s)); }
}
.sigvard-team__intro > p:not(.eyebrow) {
  font-size: var(--fs-tbody);
  line-height: 1.6;
  color: #DFD8D4;
  max-width: calc(535px * var(--s));
  margin-bottom: calc(30px * var(--s));
}

.sigvard-team__people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.sigvard-team__person { text-align: center; }
/* Portretbestanden ongewijzigd; alleen weergavegrootte en positie volgen de mock-up */
.sigvard-team__portrait {
  height: clamp(calc(280px * var(--s)), calc(28.33vw * var(--s)), calc(408px * var(--s)));
  width: auto;
  margin-inline: auto;
}
.sigvard-team__name {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-name);
  line-height: 1.3;
  color: #F7F6F5;
  letter-spacing: 0;
  margin-top: 0;
}
.sigvard-team__role {
  font-size: var(--fs-role);
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #CFD5D9;
  margin-top: calc(10px * var(--s));
}
.sigvard-team__role::before { content: '– '; }
.sigvard-team__role::after { content: ' –'; }
.sigvard-team__quote {
  margin: calc(14px * var(--s)) auto 0;
  max-width: calc(270px * var(--s));
  padding: 0;
  border: 0;
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-quote);
  line-height: 1.38;
  color: #DFE1E2;
}
.sigvard-team__quote p { margin: 0; }

/* Teamkolommen: rijen gedeeld (subgrid), zodat naam, functie, quote en uitschuifblok
   in beide kolommen op dezelfde hoogte staan; openen laat de andere kolom staan */
.sigvard-team__people { grid-auto-rows: auto; }
.sigvard-team__person {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  align-content: start;
  row-gap: 0;
}
.sigvard-team__person > * { align-self: start; }
/* naam valt over de vervagende onderrand van het portret (mock-up: basislijn 52 px boven de portretonderkant) */
.sigvard-team__person > picture { display: block; margin-bottom: calc(clamp(calc(280px * var(--s)), calc(28.33vw * var(--s)), calc(408px * var(--s))) * -0.181); }
.sigvard-team__person .sigvard-more { margin-top: calc(16px * var(--s)); }
.sigvard-team__person .sigvard-more__body { max-width: calc(330px * var(--s)); margin-inline: auto; text-align: left; }

/* ═══════════════════════════════════════════
   UITSCHUIFBLOKKEN — <details>/<summary>, werkt zonder JavaScript
   Eén stijl; kleur en grootte volgen het blok waarin het staat
═══════════════════════════════════════════ */
.sigvard-more {
  --more-summary: var(--color-navy);
  --more-text: var(--color-navy-text);
  --more-line: rgba(31, 48, 63, 0.35);
  --more-size: calc(16px * var(--s));
  --more-body-size: calc(16px * var(--s));
  --more-body-line: 1.45;
}
.sigvard-more--dark {
  --more-summary: #F7F6F5;
  --more-text: #DFE1E2;
  --more-line: rgba(247, 246, 245, 0.35);
}
.sigvard-more summary {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--s));
  cursor: pointer;
  list-style: none;
  padding: calc(10px * var(--s)) 0 calc(6px * var(--s));
  font-size: var(--more-size);
  line-height: 1.2;
  color: var(--more-summary);
  border-bottom: 1px solid var(--more-line);
}
.sigvard-more summary::-webkit-details-marker { display: none; }
/* Focusrand alleen bij toetsenbordnavigatie, niet na een muisklik of tik */
.sigvard-more summary:focus { outline: none; }
.sigvard-more summary:focus-visible { outline: calc(3px * var(--s)) solid currentColor; outline-offset: calc(4px * var(--s)); }
.sigvard-more summary:hover { border-bottom-color: currentColor; }
.sigvard-more summary svg { flex: none; transition: transform 0.25s ease; }
.sigvard-more[open] summary svg { transform: rotate(180deg); }
.sigvard-more__body {
  margin-top: calc(14px * var(--s));
  font-size: var(--more-body-size);
  line-height: var(--more-body-line);
  color: var(--more-text);
}
.sigvard-more[open] .sigvard-more__body { animation: sigvard-uitschuif 0.3s ease-out; }
@keyframes sigvard-uitschuif {
  from { opacity: 0; transform: translateY(calc(-6px * var(--s))); }
  to { opacity: 1; transform: none; }
}
.sigvard-more__body p + p,
.sigvard-more__body p + ul,
.sigvard-more__body ul + a { margin-top: 0.8em; }
.sigvard-more__lead { margin-top: 0.8em; }
/* Tussenkopje in een uitschuifblok: koppenletter en kleur van de samenvatting */
.sigvard-more__heading {
  margin: 1.6em 0 0.6em;
  font-size: var(--fs-ftitle);
  line-height: 1.25;
  color: var(--more-summary);
}
.sigvard-more ul { margin: 0; padding: 0; list-style: none; }
.sigvard-more li { position: relative; padding-left: calc(18px * var(--s)); }
.sigvard-more li + li { margin-top: calc(6px * var(--s)); }
.sigvard-more li::before {
  content: '–' / '';
  position: absolute;
  left: 0;
  opacity: 0.6;
}
.sigvard-more__link {
  display: inline-block;
  margin-left: calc(18px * var(--s));
  color: var(--more-summary);
  text-decoration: none;
  border-bottom: 1px solid var(--more-line);
}
.sigvard-more__link:hover { border-bottom-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .sigvard-more summary svg { transition: none; }
  .sigvard-more[open] .sigvard-more__body { animation: none; }
}
/* Per blok: grootte van de vervangen link en de lopende tekst van dat blok */
.sigvard-house .sigvard-more {
  --more-text: #F6F8F9;
  --more-size: var(--fs-link-b3);
  --more-body-size: var(--fs-b3body);
  --more-body-line: 1.48;
  max-width: calc(470px * var(--s));
}
.sigvard-focus__intro .sigvard-more {
  --more-summary: var(--color-navy-deep);
  --more-text: var(--color-focus-intro);
  --more-line: rgba(31, 48, 63, 0.35);
  --more-size: var(--fs-link);
  --more-body-size: var(--fs-fitem);
  --more-body-line: 1.43;
  max-width: calc(452px * var(--s));
}
.sigvard-services__more { margin-top: calc(36px * var(--s)); }
.sigvard-services__more .sigvard-more {
  --more-body-size: var(--fs-dbody);
  --more-body-line: 1.43;
}
@media (min-width: 768px) {
  .sigvard-services__more ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(8px * var(--s)) calc(46px * var(--s));
  }
  .sigvard-services__more li + li { margin-top: 0; }
}
/* Aanpak per dienst: kopjes van de vier diensten herhaald (20 okt). Twee kolommen, van boven naar beneden gelezen */
.sigvard-more__blocks .sigvard-more__heading { margin: 1.1em 0 0.4em; }
.sigvard-more__blocks .sigvard-more__block:first-child .sigvard-more__heading { margin-top: 0.3em; }
@media (min-width: 768px) {
  .sigvard-more__blocks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: calc(46px * var(--s));
  }
  .sigvard-more__blocks .sigvard-more__block:nth-child(3) .sigvard-more__heading { margin-top: 0.3em; }
  .sigvard-services__more .sigvard-more__block ul { display: block; }
  .sigvard-services__more .sigvard-more__block li + li { margin-top: calc(6px * var(--s)); }
}

/* Mock-up: raster van focus en team loopt rechts tot ~20 px van de rand van het 1440-ontwerp */
@media (min-width: 1280px) {
  .sigvard-focus { margin-right: calc(-62px * var(--s)); }
  .sigvard-team { margin-right: calc(-41px * var(--s)); }
}

/* ═══════════════════════════════════════════
   FOOTER — ontwerp, nog niet geaccordeerd
   Een fractie donkerder dan het teamblok, met een dunne lijn erboven
═══════════════════════════════════════════ */
.site-footer {
  background: #1A2834;
  border-top: 1px solid rgba(253, 252, 249, 0.08);
  color: #CFD5D9;
  padding-block: calc(64px * var(--s)) calc(28px * var(--s));
  font-size: calc(16px * var(--s));
  line-height: 1.6;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, calc(240px * var(--s)));
  gap: calc(40px * var(--s));
  padding-bottom: calc(48px * var(--s));
}
/* Zelfde stijl als het logo in de header */
.site-footer__name {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--font-nav);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-white);
  margin-bottom: calc(18px * var(--s));
}
.site-footer__address { font-style: normal; }
/* Kantoor als lichte potloodlijn op de donkere footer: tekening omgekeerd, papier valt weg via screen */
/* Eigen kolom rechts, bovenkant gelijk met de kolomlabels; spiegelt het merkblok links */
.site-footer__office { display: block; width: calc(240px * var(--s)); max-width: 100%; justify-self: end; margin-top: calc(-6px * var(--s)); }
.site-footer__office img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) brightness(1.12) contrast(1.6) invert(1); /* eerst papier naar puur wit, dan omkeren */
  mix-blend-mode: screen;
  opacity: 0.72;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.site-footer__people li > * { display: block; width: fit-content; }
.site-footer .site-footer__people li + li { margin-top: calc(28px * var(--s)); } /* duidelijk meer ruimte tussen personen dan tussen regels */
.site-footer__people li > * + * { margin-top: calc(2px * var(--s)); }
.site-footer__person { color: var(--color-white); }
.site-footer__people a { border-bottom: 1px solid transparent; }
.site-footer__people a:hover { border-bottom-color: currentColor; }
.site-footer__label {
  font-size: calc(13px * var(--s));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9FAAB4;
  margin-bottom: calc(14px * var(--s));
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: calc(4px * var(--s)); }
.site-footer__col a { border-bottom: 1px solid transparent; }
.site-footer__col a:hover, .site-footer__powered a:hover, .site-footer__name:hover { border-bottom: 1px solid currentColor; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(8px * var(--s)) calc(24px * var(--s));
  border-top: 1px solid rgba(253, 252, 249, 0.1);
  padding-top: calc(20px * var(--s));
  font-size: calc(14px * var(--s));
  color: #9FAAB4;
}
.site-footer .vibe-powered { font-size: calc(13px * var(--s)); letter-spacing: 0.02em; }

/* Powered by VIBE Agency (vibe_standaard BLAUWDRUK C11): letters in de kleur van de footer, punt altijd oranje.
   Op een oranje footer: --kleur-vibe-punt-kader: #000 (zwart kader om de punt). */
.vibe-powered { margin: 0; }
.vibe-powered a { display: inline-flex; align-items: center; gap: .3em; color: inherit; text-decoration: none; white-space: nowrap; }
.vibe-powered a:hover { text-decoration: underline; }
.vibe-powered__woordmerk { display: inline-block; height: 1.1em; width: auto; }
.vibe-powered__woordmerk .vibe-punt-kader { fill: var(--kleur-vibe-punt-kader, transparent); }

/* ═══════════════════════════════════════════
   RESPONSIVE — KLEIN DESKTOP / TABLET (≤ 1199px)
   Diensten ≤ 1199 px en focus ≤ 1279 px: de maten uit de mock-up passen niet in 4 of 3 kolommen
═══════════════════════════════════════════ */
@media (max-width: 1199px) {
  .sigvard-services { padding-block: calc(64px * var(--s)); }
  .sigvard-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: calc(48px * var(--s));
  }
  .sigvard-service:nth-child(2n) { border-right: 0; padding-right: 0; }
  .sigvard-service:nth-child(3) { padding-left: 0; }
}
@media (max-width: 1279px) {
  .sigvard-focus-block { padding-block: var(--section-pad-y); }
  .sigvard-focus { grid-template-columns: 1fr; gap: calc(44px * var(--s)); }
  .sigvard-focus__intro { padding-top: 0; }
  .sigvard-focus__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sigvard-focus__item,
  .sigvard-focus__item:nth-child(3n + 1),
  .sigvard-focus__item:nth-child(-n + 3),
  .sigvard-focus__item:nth-child(n + 4) {
    --rule-top: 0px;
    margin-top: 0;
    padding: calc(20px * var(--s)) calc(24px * var(--s)) calc(24px * var(--s));
    border-bottom: var(--border-subtle);
  }
  .sigvard-focus__item:nth-last-child(-n + 2) { border-bottom: 0; }
  .sigvard-focus__item::after { display: none; }
  .sigvard-focus__item:nth-child(2n + 1)::after { display: block; }
  /* vaste regelval van de titels alleen in het driekoloms raster */
  .sigvard-focus__br { display: none; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1023px)
═══════════════════════════════════════════ */
@media (max-width: 1023px) {
  :root {
    --page-gutter: calc(32px * var(--s));
    --header-height: calc(80px * var(--s));
    --hero-min-height: calc(530px * var(--s));
    --section-pad-y: calc(64px * var(--s));
    --font-hero: calc(64px * var(--s));
  }
  .menu-toggle { display: flex; }
  .site-nav--desktop { display: none; }
  .sigvard-team-block { padding-block: var(--section-pad-y); }
  .sigvard-team__intro { padding-top: 0; }
  /* Blok 3 onder elkaar: tekst boven, tekening met kernwoorden eronder */
  .sigvard-house { grid-template-columns: 1fr; }
  .sigvard-house__copy { padding-inline: var(--page-gutter); }
  .sigvard-house__copy-inner h2 { font-size: min(var(--fs-h2), (100cqi - calc(48px * var(--s))) / 8.8); }
  .sigvard-house__copy-inner { max-width: calc(640px * var(--s)); }
  .sigvard-house__copy { padding-top: 0; }
  .sigvard-house__art {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(24px * var(--s));
    padding: calc(40px * var(--s)) var(--page-gutter);
  }
  .sigvard-house__art picture { width: 100%; }
  .sigvard-house__keywords {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 calc(18px * var(--s));
  }
  .sigvard-team { grid-template-columns: 1fr; row-gap: calc(40px * var(--s)); }
  .site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, calc(200px * var(--s))); }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__office { width: calc(200px * var(--s)); }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — MOBIEL (≤ 767px)
═══════════════════════════════════════════ */
@media (max-width: 767px) {
  :root {
    --page-gutter: calc(24px * var(--s));
    --header-height: calc(72px * var(--s));
    --hero-min-height: calc(640px * var(--s));
    --section-pad-y: calc(48px * var(--s));
    --font-hero: min(calc(48px * var(--s)), (100vw - calc(48px * var(--s))) / 6.3); /* "onderneming" past ook op 320 px */
    --font-subhead: calc(29px * var(--s));
    --font-card: calc(22px * var(--s));
    --font-body-size: calc(17px * var(--s));
    --font-small: calc(14px * var(--s));
    --font-eyebrow: calc(12px * var(--s));
  }
  .sigvard-hero { align-items: flex-end; }
  .sigvard-hero .container { padding-block: calc(48px * var(--s)); }
  .sigvard-hero__text { max-width: 100%; }
  .sigvard-hero__ctas { flex-direction: column; align-items: flex-start; }

  .sigvard-mistband .container { padding-block: calc(40px * var(--s)); }


  .sigvard-services { padding-block: calc(48px * var(--s)); }
  .sigvard-services__grid { grid-template-columns: 1fr; gap: 0; margin-top: calc(48px * var(--s)); }
  .sigvard-service,
  .sigvard-service:first-child,
  .sigvard-service:last-child,
  .sigvard-service:nth-child(2n),
  .sigvard-service:nth-child(3) {
    padding: 0 0 calc(28px * var(--s));
    border-right: 0;
    border-bottom: var(--border-subtle);
  }
  .sigvard-service:last-child { border-bottom: 0; padding-bottom: 0; }

  .sigvard-focus__grid { grid-template-columns: 1fr; }
  .sigvard-focus__item,
  .sigvard-focus__item:nth-child(3n + 1),
  .sigvard-focus__item:nth-child(-n + 3),
  .sigvard-focus__item:nth-child(n + 4),
  .sigvard-focus__item:nth-last-child(-n + 2) {
    border-bottom: var(--border-subtle);
    padding-inline: 0;
  }
  .sigvard-focus__item:last-child { border-bottom: 0; }
  .sigvard-focus__item:nth-child(2n + 1)::after { display: none; }

  .sigvard-team__people { grid-template-columns: 1fr; gap: calc(24px * var(--s)); }
  .site-footer { padding-top: calc(48px * var(--s)); }
  .site-footer__inner { grid-template-columns: 1fr; gap: calc(32px * var(--s)); padding-bottom: calc(36px * var(--s)); }
  .site-footer__office { justify-self: center; width: calc(200px * var(--s)); margin-top: 0; }

  /* Lopende tekst op telefoon minimaal 17 px en met ruimere regelafstand */
  .sigvard-focus__item p { font-size: calc(17px * var(--s)); }
  .sigvard-house__copy-inner > p:not(.eyebrow),
  .sigvard-service p,
  .sigvard-focus__intro > p:not(.eyebrow),
  .sigvard-focus__item p,
  .sigvard-team__intro > p:not(.eyebrow) { line-height: 1.45; }
  .sigvard-mistband__text { line-height: 1.3; }
}

/* ═══════════════════════════════════════════
   BLOK 3 — FOTO (20 okt)
   Foto sluit links aan op het blauwe vlak en vult tot de rechterrand; kernwoorden wit op de foto.
   Staat onderaan zodat het de responsive regels van de tekening overschrijft.
═══════════════════════════════════════════ */
.sigvard-house .sigvard-house__art--foto {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--color-team);
}
.sigvard-house__art--foto picture {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
}
.sigvard-house__art--foto .sigvard-house__img--foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  mix-blend-mode: normal;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}
/* Donkere verloop rechts, zodat de witte kernwoorden goed leesbaar zijn */
.sigvard-house__art--foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(25, 38, 52, 0.78) 0, rgba(25, 38, 52, 0.5) 18%, rgba(25, 38, 52, 0) 42%);
  pointer-events: none;
}
/* 27 okt: kernwoorden onderaan op het donkere deel van de berg (op de lichte lucht te weinig contrast) */
.sigvard-house__art--foto .sigvard-house__keywords {
  position: absolute;
  z-index: 1;
  bottom: clamp(calc(28px * var(--s)), calc(3vw * var(--s)), calc(43px * var(--s)));  /* max = waarde op 1440: groeit daarboven niet mee */
  right: clamp(calc(24px * var(--s)), calc(3.5vw * var(--s)), calc(50px * var(--s)));
  margin: 0;
}
.sigvard-house__art--foto .sigvard-house__keywords li {
  color: var(--color-white);
  text-shadow: 0 1px calc(10px * var(--s)) rgba(10, 20, 30, 0.45);
}
/* Onder elkaar: foto op volle breedte, kernwoorden wit op een donkere strook eronder */
@media (max-width: 1023px) {
  .sigvard-house .sigvard-house__art--foto { padding: 0; display: block; }
  .sigvard-house__art--foto picture { position: relative; inset: auto; display: block; aspect-ratio: 16 / 9; }
  .sigvard-house__art--foto .sigvard-house__img--foto { object-position: 55% 45%; }
  .sigvard-house__art--foto::after { display: none; }
  .sigvard-house__art--foto .sigvard-house__keywords {
    position: static;
    transform: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 calc(18px * var(--s));
    padding: calc(16px * var(--s)) var(--page-gutter) calc(20px * var(--s));
  }
  .sigvard-house__art--foto .sigvard-house__keywords li { text-shadow: none; }
}

/* ═══════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════
   BOVEN 1440 PX (27 okt): maten groeien niet mee
   Lettergroottes, iconen en de breedte van de inhoud blijven gelijk aan 1440; achtergronden, foto's en
   kleurvlakken lopen door tot de schermrand en de extra ruimte gaat naar de marges.
═══════════════════════════════════════════ */
@media (min-width: 1440px) {
  /* Blok 3: tekstkolom = marge + vaste tekstbreedte (534 px op 1440); de foto krijgt de rest */
  .sigvard-house { grid-template-columns: calc((100vw - var(--container-max)) / 2 + calc(534px * var(--s))) minmax(0, 1fr); }
}