/* Gedeelde stijl van de InMade-site.
   Stond tot 25-08 inline in index.html; eruit gehaald toen de cases-pagina's
   erbij kwamen, zodat header, footer, rail, knoppen en reveal op één plek staan.
   Paginaspecifieke stijl blijft inline op de pagina zelf. */

/* ── Inmade brand tokens ─────────────────────────────────── */
:root{
  --navy:        #002956;   /* primary */
  --navy-2:      #003264;   /* logo navy */
  --navy-deep:   #001a38;   /* dark sections / hero overlay */
  --silver:      #A5ADB1;
  --silver-lt:   #E7EAEB;
  --bg:          #ffffff;
  --grey:        #F1F1F1;
  --grey-2:      #E6E8EA;
  --ink:         #3c4a57;
  --ink-soft:    #6b7884;
  --border:      #dfe3e7;
  /* ── Layout-rail ────────────────────────────────────────
     Er zijn maar TWEE toegestane inhoudsbreedtes. Alles staat op dezelfde
     linkerrail (--gutter), en een blok is ofwel vol (--content) ofwel een
     leeskolom (--content-read). Geen losse max-widths per sectie meer: dat
     gaf zeven verschillende linkerranden (86/115/121/180/220/300/340 @1440)
     en koppen die niet uitlijnden met hun eigen inhoud. */
  --gutter:      clamp(22px, 8vw, 115px);
  --content:     1210px;
  --content-read: 760px;
  --pad-x:       var(--gutter);            /* oude naam, blijft werken */
  --gap-section: clamp(48px, 6vw, 92px);   /* verticaal ritme, één schaal */
  /* Open Sans voor de lopende tekst en de koppen. Playfair Display komt uit
     het logo en wordt alleen als accent gebruikt (cijfers, quote, klantkop). */
  --serif:       'Open Sans', ui-sans-serif, system-ui, sans-serif;
  --display:     'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:        'Open Sans', ui-sans-serif, system-ui, sans-serif;
  --maxw:        var(--content);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;          /* origineel: 18px body */
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--navy); color:#fff; }

h1,h2,h3,h4{ font-family:var(--sans); font-weight:700; color:var(--navy); line-height:1.18; letter-spacing:-.015em; }

.eyebrow{
  font-family:var(--sans);
  font-size:12px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--silver);
}

/* ── Site header (fixed glass, Renoir-layout: groot logo links over 2 rijen) ── */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:30;
  padding-top:12px;                       /* zwevend: glaspaneel 12px van de bovenrand */
  transition:box-shadow .35s ease;
}
/* Zwevend glaspaneel — exact als origineel: ingesprongen ~35px, 12px afronding,
   rgba(0,0,0,.13) + blur(20px). Glas op ::before zodat het position:fixed
   mobiele menu niet binnen de header geklemd wordt. */
.site-header::before{
  content:''; position:absolute; z-index:-1;
  /* Boven 1440px groeit het paneel niet verder mee: 1440 breed, gecentreerd. */
  inset:12px max(clamp(12px,2.4vw,35px), calc((100% - 1440px) / 2 + 35px)) 0;
  border-radius:12px;
  background:rgba(0,0,0,.13);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  transition:background .35s ease, box-shadow .35s ease;
}
.site-header.scrolled::before{
  background:rgba(255,255,255,.85);             /* licht frosted glas op de content */
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 10px 30px rgba(0,26,56,.12);
}

/* Logo-kolom links + rechterkolom (topbar boven, nav onder) — net als het origineel */
.header-inner{
  display:flex; align-items:stretch; gap:clamp(16px,2.3vw,33px);   /* logo→menu gap, zodat menu op x≈334 begint */
  padding:0 clamp(22px,5.3vw,76px);                                 /* header-inset 76px (breder dan body 115) */
  max-width:1440px; margin-inline:auto;                             /* zelfde kader als het glaspaneel */
}
.nav-logo{ display:flex; align-items:center; flex-shrink:0; text-decoration:none; }

/* ── Logo-lockup ──────────────────────────────────────────
   Beeldmerk als vector (de twee helften uit het originele Inmade-logo),
   woordmerk + regel eronder als echte tekst. Zo staat "InMade" in kleine
   letters i.p.v. de kapitalen die in het oude SVG-bestand zaten, en kan de
   regel "Industrial excellence" gewoon aangepast worden.
   Inline i.p.v. <img>, anders laadt het webfont niet in het SVG. */
.logo-lockup{ height:56px; width:auto; display:block; transition:height .35s ease; overflow:visible; }
.logo-lockup .lm-a,
.logo-lockup .lm-b{ fill:#fff; transition:fill .35s ease; }
.logo-lockup .lm-word{
  font-family:'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size:40px; font-weight:500; fill:#fff; transition:fill .35s ease;
}
.logo-lockup .lm-rule{ stroke:#fff; stroke-width:1.1; opacity:.75; transition:stroke .35s ease; }
.logo-lockup .lm-tag{
  font-family:'Open Sans', Arial, sans-serif;
  font-size:8px; font-weight:600; fill:#fff; transition:fill .35s ease;
}
/* Lichte ondergrond (header na scrollen): beeldmerk terug naar zilver/navy, tekst navy */
.site-header.scrolled .lm-a{ fill:url(#imdGrad); }
.site-header.scrolled .lm-b{ fill:var(--navy-2); }
.site-header.scrolled .lm-word,
.site-header.scrolled .lm-tag{ fill:var(--navy-2); }
.site-header.scrolled .lm-rule{ stroke:var(--navy-2); opacity:.55; }

.site-header.scrolled .nav-logo .logo-lockup{ height:44px; }
.header-right{ flex:1; min-width:0; display:flex; flex-direction:column; }

/* ── Top utility-rij (links: pay-off · rechts: contact) ──── */
.topbar{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:16px 0;
  font-size:14px; font-weight:300; color:rgba(255,255,255,.72); letter-spacing:.01em;
  border-bottom:1px solid rgba(255,255,255,.14);
  overflow:hidden; max-height:46px;
  transition:max-height .35s ease, padding .35s ease, opacity .3s ease, border-color .35s ease, color .35s ease;
}
.topbar .tb-right{ display:flex; gap:22px; flex-shrink:0; }
.topbar a{ text-decoration:none; color:inherit; }
.topbar a:hover{ color:#fff; }
.site-header.scrolled .topbar{
  max-height:0; padding-top:0; padding-bottom:0; opacity:0; border-color:transparent;
}

/* ── Nav-rij (links: menu · rechts: CTA) ─────────────────── */
.nav{ display:flex; align-items:center; padding:24px 0; transition:padding .35s ease; }
.site-header.scrolled .nav{ padding:14px 0; }
.nav-links{ flex:1; display:flex; align-items:center; gap:clamp(20px,2.1vw,38px); }
.nav-links a{
  font-size:16px; font-weight:300; color:rgba(255,255,255,.9);   /* origineel: 16px / 300 */
  text-decoration:none; letter-spacing:.01em; transition:color .2s;
}
.nav-links a:hover{ color:#fff; }
.site-header.scrolled .nav-links a{ color:var(--navy); }
.site-header.scrolled .nav-links a:hover{ color:var(--silver); }
.nav-cta{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
  font-size:13px; font-weight:700; letter-spacing:.04em;
  color:#fff; background:var(--navy);
  border:1px solid rgba(255,255,255,.18);
  padding:11px 22px; border-radius:40px; text-decoration:none;
  transition:background .2s, color .2s, transform .2s, border-color .2s;
}
.nav-cta:hover{ background:var(--navy-2); transform:translateY(-1px); }
.site-header.scrolled .nav-cta{ border-color:var(--navy); }
/* CTA staat binnen .nav-links → extra specificiteit nodig zodat de tekst wit
   blijft i.p.v. navy (van de scrolled .nav-links a-regel). */
.nav-links a.nav-cta,
.site-header.scrolled .nav-links a.nav-cta,
.site-header.scrolled .nav-links a.nav-cta:hover{ color:#fff; }
.nav-links a.nav-cta{ font-size:14px; padding:12px 26px; line-height:1; }   /* ≈ 40px hoog, als origineel */
.nav-cta .arr{ transition:transform .2s; }
.nav-cta:hover .arr{ transform:translateX(3px); }
.nav-burger{ display:none; background:none; border:0; cursor:pointer; padding:6px; margin-left:14px; }
.nav-burger span{ display:block; width:24px; height:2px; background:#fff; margin:5px 0; transition:.3s; }
.site-header.scrolled .nav-burger span{ background:var(--navy); }
.nav-burger.open span{ background:var(--navy); }  /* kruisje zichtbaar op wit paneel */
@media(max-width:980px){
  .topbar{ display:none; }
  .header-inner{ align-items:center; }
  .nav{ padding:14px 0; }
  .nav-logo .logo-lockup{ height:46px; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(300px,80vw);
    background:#fff; flex-direction:column; align-items:flex-start;
    padding:90px 32px; gap:26px; flex:none;
    transform:translateX(100%); transition:transform .35s ease;
    box-shadow:-10px 0 40px rgba(0,26,56,.12); z-index:29;
  }
  .nav-links a{ color:var(--navy); }  /* donkere tekst op het witte mobiele paneel */
  .nav-links a.nav-cta{ color:#fff; }  /* maar de CTA-pill houdt witte tekst */
  .nav-links.open{ transform:translateX(0); }
  .nav-cta{ margin-left:0; }
  .nav-burger{ display:block; z-index:31; margin-left:auto; }  /* rechts, zoals gebruikelijk (26-09, Peter) */
  .nav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2){ opacity:0; }
  .nav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ── Hero ──────────────────────────────────────────────────
   Hero + belofteband vullen samen precies het eerste scherm, zodat de vier
   beloften bij binnenkomst tegen de onderrand staan. svh i.p.v. vh vanwege
   de verdwijnende adresbalk op mobiel; de wrap groeit mee als de tekst niet
   past (lage vensters). */
.hero-wrap{ min-height:100svh; display:flex; flex-direction:column; }
.hero{
  position:relative;
  flex:1; min-height:0;
  display:flex; align-items:flex-end;
  padding:clamp(120px,16vh,180px) var(--gutter) clamp(48px,7vh,88px);
  overflow:hidden;
  color:#fff;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
/* Beeld iets hoger dan de hero en aan de bovenkant verankerd, zodat het scherm
   wat lager in beeld zakt en niet tegen de menubalk aan ligt. Boven de 108%
   raakt de onderrand van het scherm de kop "Onze Missie". Alleen desktop:
   op mobiel bepaalt de uitsnede al wat je ziet. */
@media(min-width:701px){
  .hero-bg img{ height:108%; object-position:center top; }
}
/* Lichte/frisse hero zoals het origineel: beeld blijft helder, alleen een zachte
   verdonkering bovenin (voor de nav) en onderin-links (voor de tekst). */
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,18,42,.40) 0%, rgba(0,18,42,0) 26%, rgba(0,18,42,.08) 44%, rgba(0,18,42,.60) 74%, rgba(0,18,42,.90) 100%),
    linear-gradient(90deg, rgba(0,18,42,.56) 0%, rgba(0,18,42,.14) 44%, rgba(0,18,42,0) 68%);
}
/* Smal scherm: cover snijdt de foto flink aan, dus de uitsnede bepaalt of het
   dashboard zichtbaar blijft. Waarde hoort bij de foto die erin zit: bij de
   huidige 3:2-foto valt op 50% de hele kop "OEE OVERZICHT - LIJN 2.1" binnen,
   op 46% viel de 2.1 er net buiten. Wissel je van foto, meet dit opnieuw. */
@media(max-width:700px){
  .hero-bg img{ object-position:50% center; }
  /* Onderhelft extra verdonkeren: daar staat op mobiel de tekst, terwijl het
     dashboard in de bovenhelft zit en dus onaangetast blijft. */
  .hero-bg::after{
    background:
      linear-gradient(180deg, rgba(0,18,42,.42) 0%, rgba(0,18,42,.06) 28%, rgba(0,18,42,.38) 50%, rgba(0,18,42,.84) 76%, rgba(0,18,42,.93) 100%),
      linear-gradient(90deg, rgba(0,18,42,.44) 0%, rgba(0,18,42,.12) 55%, rgba(0,18,42,0) 82%);
  }
}
/* Tekst op dezelfde rail als de secties (--content); de foto blijft schermbreed. */
.hero-inner{ position:relative; z-index:1; width:100%; max-width:var(--content); margin-inline:auto; }
.hero-text{ max-width:600px; position:relative; }
/* Zachte verdonkering achter alleen het tekstblok. De hele scrim aantrekken zou
   ook de onderhelft van het dashboard dimmen; dit raakt alleen de tekst.
   Nodig omdat het scherm iets lager staat en de lichte wand mee naar beneden
   zakt, waardoor de eyebrow op een laag venster onder AA kwam (2,92). */
.hero-text::before{
  content:''; position:absolute; inset:-120px -260px -110px -200px; z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at 34% 54%, rgba(0,16,38,.58) 0%, rgba(0,16,38,.34) 34%, rgba(0,16,38,.12) 55%, rgba(0,16,38,0) 74%);
}
.hero .eyebrow{ color:#bcd2f2; margin-bottom:16px; }
.hero h1{
  color:#fff;
  font-size:clamp(40px,4.8vw,62px);                /* groter/steviger — koptekst springt eruit (klant-feedback 1) */
  font-weight:800; line-height:1.08; letter-spacing:-.015em;
  margin-bottom:18px;
  text-shadow:0 2px 30px rgba(0,12,30,.62);
}
.hero p{
  font-size:clamp(15px,1.4vw,19px);
  line-height:1.6; color:rgba(255,255,255,.9);
  max-width:62ch;
  text-shadow:0 1px 16px rgba(0,12,30,.5);
}
/* Scroll-hint rechtsonder: dun lijntje met een lichtpunt dat naar beneden zakt.
   Geen bonkend muisje (staat in de anti-slop-canon). Vervaagt zodra je scrollt. */
.hero-hint{
  position:absolute; right:max(var(--gutter), calc((100% - var(--content)) / 2)); bottom:clamp(20px,4vh,40px); z-index:2;
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  transition:opacity .4s ease;
}
/* Zachte verdonkering achter de hint. Zonder dit haalt hij op een lichte plek in
   de foto geen AA (gemeten 2,16 op het slechtste pixel). Radiaal en niet als pil,
   zodat er geen zichtbare rand ontstaat. Meten: scripts/hero-contrast.mjs */
.hero-hint::before{
  content:''; position:absolute; inset:-16px -22px; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,16,38,.82) 0%, rgba(0,16,38,.55) 48%, rgba(0,16,38,0) 78%);
}
.hero-hint:hover{ opacity:.82; }
.hero-hint .rail{
  position:relative; display:block; width:1px; height:44px;
  background:rgba(255,255,255,.28); overflow:hidden;
}
.hero-hint .rail::after{
  content:''; position:absolute; left:-1px; width:3px; height:14px; border-radius:2px;
  background:#fff; animation:hintDrop 2.4s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes hintDrop{
  0%   { top:-16px; opacity:0; }
  22%  { opacity:1; }
  70%  { opacity:1; }
  100% { top:46px; opacity:0; }
}
/* Zodra de bezoeker scrollt is de hint zijn werk kwijt */
body.scrolled-past .hero-hint{ opacity:0; pointer-events:none; }
@media(max-width:600px){ .hero-hint span.label{ display:none; } }

/* ── Belofteband onder de hero ───────────────────────────── */
.promise-band{ background:var(--navy); color:#fff; padding:clamp(20px,2.2vw,28px) var(--pad-x); }
.promise-list{
  list-style:none; max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:14px clamp(18px,2.4vw,36px); text-align:center;
}
.promise-list li{
  position:relative;
  font-size:clamp(14px,1.15vw,17px); font-weight:600; line-height:1.35; letter-spacing:.01em;
}
.promise-list li:not(:first-child)::before{
  content:''; position:absolute; left:calc(clamp(18px,2.4vw,36px) / -2); top:1px; bottom:1px;
  width:1px; background:rgba(255,255,255,.22);
}
/* getal en eenheid horen op één regel */
.nw{ white-space:nowrap; }
@media(max-width:760px){
  .promise-list{ grid-template-columns:1fr 1fr; gap:16px 22px; }
  .promise-list li:nth-child(odd)::before{ display:none; }
}
@media(max-width:359px){
  .promise-list{ grid-template-columns:1fr; }
  .promise-list li::before{ display:none; }
}

/* ── Generic section ─────────────────────────────────────── */
.section{ padding:var(--gap-section) var(--gutter); }
/* Ankersprong: kop niet onder de vaste header laten vallen */
.section[id], .footer[id]{ scroll-margin-top:120px; }
/* Achtergrond blijft full-width, de inhoud staat op de rail.
   Eén breedte voor alles; leesblokken krijgen los .read (zie onder). */
.section > *{ max-width:var(--content); margin-inline:auto; }
/* Leeskolom: smaller, maar overal exact dezelfde maat */
.read{ max-width:var(--content-read); margin-inline:auto; }
.section.soft{ background:#fafafa; }           /* "Waarom het ertoe doet"-sectie */
.section.grey{ background:var(--grey); }
.section.navy{ background:linear-gradient(135deg, #0a3d70 0%, var(--navy) 46%, var(--navy-deep) 100%); color:#fff; }
.section .eyebrow{ display:none; }   /* origineel heeft geen sectie-eyebrows (alleen hero) */
.sec-head{ max-width:var(--maxw); margin-bottom:clamp(34px,4vw,56px); }
.sec-head h2{ font-size:clamp(28px,3.6vw,46px); margin-bottom:16px; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.lead{ font-size:clamp(15px,1.3vw,18px); color:var(--ink-soft); line-height:1.7; }
/* Renoir-signatuur: grote, LICHTE sectiekoppen (links uitgelijnd) — geeft de
   elegante/professionele uitstraling van het origineel. Hero-h1 blijft vet. */
.sec-head h2, .approach h2, .who h2, .matters h2{
  font-weight:600; letter-spacing:-.01em; line-height:1.16;   /* steviger/professioneler (klant-feedback 2) */
}
.sec-head h2{ font-size:clamp(32px,4vw,50px); }          /* Why Renoir / What We Do: 50px */
.approach h2, .who h2{ font-size:clamp(30px,3.4vw,43px); } /* Our Approach: 43px */
.matters h2{ font-size:clamp(28px,3.2vw,40px); }

/* ── Onze aanpak (Approach + testimonial card) ───────────── */
.approach{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(40px,6vw,88px); align-items:start;
}
.approach h2{ font-size:clamp(28px,3.4vw,44px); margin-bottom:30px; }
.approach-block{ margin-bottom:28px; }
.approach-block h3{ font-size:19px; margin-bottom:8px; }
.approach-block p{ color:var(--ink-soft); }
.tcard{
  background:var(--grey);
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:4px;
  padding:clamp(28px,3vw,40px);
}
.stars{ color:var(--navy); letter-spacing:3px; font-size:18px; margin-bottom:6px; }
.stars .score{ color:var(--ink-soft); font-size:13px; letter-spacing:0; margin-left:8px; font-family:var(--sans); }
.tcard blockquote{
  font-family:var(--serif); font-size:clamp(16px,1.4vw,19px);
  line-height:1.55; color:var(--navy); margin:20px 0 8px;
}
.tcard cite{ display:block; font-style:normal; font-size:13px; color:var(--ink-soft); margin-bottom:26px; }
.tcard cite:last-of-type{ margin-bottom:0; }
.tcard hr{ border:0; border-top:1px solid var(--border); margin:0 0 22px; }

/* ── 3-step process ──────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(36px,4.5vw,64px); }  /* blokken verder uit elkaar */
.step{ position:relative; }
.step:not(:first-child)::before{                /* verticale scheidingslijn, gecentreerd in de tussenruimte */
  content:''; position:absolute; top:2px; bottom:2px;
  left:calc(clamp(36px,4.5vw,64px) / -2); width:1px; background:var(--border);
}
.step .num{                                     /* "01" inline vóór de titel */
  display:inline; font-family:var(--display); font-weight:500; font-size:38px;
  letter-spacing:0; color:var(--navy); opacity:.55; margin:0 12px 0 0;
}
.step h3{ display:inline; font-size:36px; font-weight:500; color:var(--navy); letter-spacing:0; line-height:1.1; }
.step p{ color:var(--ink-soft); font-size:15px; margin-top:14px; }
.step .step-sub{                                /* tussenkop per stap */
  color:var(--navy); font-size:18px; font-weight:600; line-height:1.4;
  letter-spacing:-.005em; margin-top:22px;
}
.step .step-sub + p{ margin-top:10px; }

/* ── Waarom InMade (icon cards) ──────────────────────────── */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,40px); }
.why-card{
  background:transparent; border:0; border-radius:0; padding:0;   /* randloos, net als origineel */
}
.why-ic{
  width:66px; height:66px; border-radius:50%;
  background:var(--navy); color:#fff;                 /* gevuld + wit icoon = sprekender (klant-feedback 3) */
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px; box-shadow:0 8px 20px rgba(0,41,86,.22);
}
.why-ic svg{ width:34px; height:34px; }
.why-card h3{ font-size:24px; font-weight:600; line-height:1.2; letter-spacing:-.01em; margin-bottom:12px; }
.why-card p{ color:var(--ink-soft); font-size:15px; }
.why-card p + p{ margin-top:12px; }

/* ── Wie wij zijn (text + portrait) ──────────────────────── */
.who{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:center; }
.who h2{ font-size:clamp(28px,3.4vw,44px); margin-bottom:20px; }
.who p{ color:var(--ink-soft); margin-bottom:24px; max-width:48ch; }
.who-cta{
  display:inline-block; font-size:14px; font-weight:700; letter-spacing:.03em;
  color:var(--navy); text-decoration:none; border-bottom:2px solid var(--silver);
  padding-bottom:3px; transition:border-color .2s;
}
.who-cta:hover{ border-color:var(--navy); }
.who-fig{ position:relative; }
.who-fig img{ width:100%; height:clamp(320px,42vw,480px); object-fit:cover; border-radius:4px; }
.who-tag{
  position:absolute; left:0; bottom:0;
  background:var(--navy); color:#fff;
  padding:18px 24px; border-radius:0 4px 0 4px;
}
.who-tag strong{ display:block; font-family:var(--serif); font-size:18px; font-weight:600; }
.who-tag span{ font-size:13px; color:var(--silver-lt); }

/* ── Onze expertise (dark services grid) ──────────────────
   Renoir toont per kaart alleen de titel, en dat blijft de rusttoestand.
   Dirks teksten (07-09-2026) zijn te lang voor een tegel, dus de rest zit in
   een <details>. Bewust geen JavaScript en geen display:none op de inhoud: de
   tekst staat gewoon in de HTML en is dus leesbaar voor crawlers en voor de
   AI-antwoordmachines waar llms.txt op mikt. */
.section.navy h2{ color:#fff; }
.sec-lead{ color:#fff; font-size:clamp(18px,1.6vw,22px); font-weight:600; margin-bottom:14px; }
.sec-intro{ color:var(--silver-lt); font-size:16px; max-width:var(--content-read); }
.services{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px);
  align-items:start;   /* een open kaart mag zijn buren niet meetrekken */
}
.svc{
  background:var(--grey); border-radius:12px;            /* alle hoeken afgerond (klant-feedback 4) */
  box-shadow:0 8px 22px rgba(0,0,0,.16);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.svc:not([open]):not(.svc-open):hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.26); }
.svc[open]{ box-shadow:0 18px 40px rgba(0,0,0,.26); }
.svc > summary{
  list-style:none; cursor:pointer;
  /* Tegel en geen regel: nummer bovenaan, titel onderaan, teken rechtsonder.
     De eerste opzet zette alles op één rij en dat las als een instellingenlijst
     in plaats van als de kaarten van het origineel. */
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(18px,2vw,26px);
  padding:clamp(22px,2vw,28px);
  min-height:clamp(146px,12vw,178px);
}
.svc > summary::-webkit-details-marker{ display:none; }
.svc > summary:focus-visible{ outline:2px solid var(--navy); outline-offset:-4px; border-radius:12px; }
.svc-nr{
  font-family:var(--display); font-size:13px; font-weight:600;
  color:var(--navy-2); letter-spacing:.14em;
}
/* Nummer links, teken rechts, allebei bovenaan. Het teken stond eerst naast de
   titel onderaan, en dat viel scheef uit zodra een titel over twee regels liep. */
.svc-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.svc h3{
  color:var(--navy); font-size:clamp(20px,1.7vw,25px); font-weight:600;
  letter-spacing:-.01em; margin:0; text-wrap:balance;
}
/* flex:1 hoort alleen in de bovenrij van een uitklapkaart, waar de titel de
   ruimte naast het teken moet vullen. Als generieke regel op .svc h3 lekt hij
   naar variant B, waar de titel een directe flexkolom-kind is: die rekte dan
   uit tot 137px en duwde de witruimte tussen kop en tekst in plaats van boven
   de resultaatregel. Zelfde soort fout als de vaste hoogte bij Carlogic:
   de regel die het veroorzaakt staat in een ander blok dan waar je kijkt. */
.svc > summary h3{ flex:1; }
/* Plus dat een min wordt: twee lijnen, de verticale draait weg bij open. */
.svc-teken{ position:relative; width:18px; height:18px; flex:none; }
.svc-teken::before, .svc-teken::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:2px; margin-top:-1px;
  background:var(--navy); transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.svc-teken::after{ transform:rotate(90deg); }
.svc[open] .svc-teken::after{ transform:rotate(0deg); }
.svc-body{ padding:0 clamp(20px,1.9vw,26px) clamp(22px,2vw,28px); }
.svc-lead{ color:var(--navy); font-size:16px; font-weight:600; margin-bottom:12px; }
.svc-body p{ color:var(--ink); font-size:15px; }
.svc-body p + p{ margin-top:12px; }
.svc-focus-kop{
  color:var(--ink-soft); font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; margin:20px 0 10px;
}
.svc-focus{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.svc-focus li{
  font-size:13px; color:var(--navy); background:#fff;
  border:1px solid var(--grey-2); border-radius:40px; padding:5px 12px;
}
.svc-res{ margin-top:20px; padding-top:16px; border-top:1px solid var(--grey-2); }
.svc-res span{ font-weight:700; color:var(--navy); }
.services-slot{
  margin-top:clamp(32px,3.4vw,48px); color:#fff; text-align:center;
  font-size:clamp(19px,2vw,26px); font-weight:600; letter-spacing:-.01em;
}
/* ── Variant B: alles zichtbaar, alle blokken even hoog ───
   grid-auto-rows:1fr maakt elke rij zo hoog als zijn hoogste kaart, en
   align-items:stretch laat de kaarten die hoogte ook echt vullen (.services
   staat op start, omdat een open uitklapkaart daar zijn buren niet mag
   meetrekken). De resultaatregel gaat op margin-top:auto, zodat de witruimte
   in een korte kaart bóven die regel valt en de zes slotregels op één lijn
   uitkomen. */
.services-open{ align-items:stretch; grid-auto-rows:1fr; }
.svc-open{ padding:clamp(22px,2vw,28px); display:flex; flex-direction:column; }
.svc-open:hover{ transform:none; box-shadow:0 8px 22px rgba(0,0,0,.16); }
.svc-open .svc-nr{ display:block; margin-bottom:10px; }
.svc-open h3{ margin-bottom:18px; }
.svc-open .svc-body{ padding:0; display:flex; flex-direction:column; flex:1; }
.svc-open .svc-focus{ margin-bottom:4px; }
.svc-open .svc-res{ margin-top:auto; }

/* ── Variant C: open op desktop, uitklappen op mobiel ─────
   Onder 881px is dit gewoon variant A: de kaarten staan dicht en het plusje
   doet zijn werk. Daarboven zet het scriptje ze open en nemen ze het gedrag
   van B over: even hoge blokken, geen plusje, en de summary is geen knop meer.
   Twee dingen bewust zo: de kaarten staan DICHT in de HTML (anders flitst er
   op mobiel open inhoud voorbij die daarna dichtklapt), en zonder JavaScript
   blijft het de accordeon. De tekst staat er in beide gevallen. */
@media(min-width:881px){
  .services-hybride{ align-items:stretch; grid-auto-rows:1fr; }
  .services-hybride > .svc{ display:flex; flex-direction:column; }
  .services-hybride > .svc:hover{ transform:none; box-shadow:0 8px 22px rgba(0,0,0,.16); }
  .services-hybride > .svc > summary{
    min-height:0; gap:10px; cursor:default; padding-bottom:0;
  }
  /* De summary is hier geen bedieningselement meer: niet aanklikbaar, niet in
     de tabvolgorde. Dat laatste kan CSS niet, dus dat regelt het scriptje. */
  .services-hybride > .svc > summary{ pointer-events:none; }
  .services-hybride .svc-teken{ display:none; }
  .services-hybride .svc-body{ padding-top:18px; flex:1; display:flex; flex-direction:column; }
  .services-hybride .svc-res{ margin-top:auto; }
}

@media(max-width:880px){ .services{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){
  .services{ grid-template-columns:1fr; }
  /* Eén kolom: de tegelhoogte die op desktop een raster maakt, laat hier
     alleen leegte onder de titel staan. Compacter, en de zes blijven onderling
     even hoog omdat geen enkele titel op deze breedte over twee regels loopt. */
  .svc > summary{ min-height:0; gap:14px; }
  /* Huisregel: bodytekst minstens 16px op mobiel. De rest van deze site staat op 15px
     (bestaand, site-breed); deze sectie is nieuw, dus die haalt de drempel wel. */
  .svc-body p, .svc-lead, .svc-focus li{ font-size:16px; }
}
@media (prefers-reduced-motion: reduce){
  .svc, .svc-teken::before, .svc-teken::after{ transition:none; }
}

/* ── Waarom het ertoe doet (split CTA) ───────────────────── */
.matters{ display:block; max-width:var(--content-read); margin-inline:auto; text-align:center; }
.matters h2{ font-size:clamp(28px,3.4vw,44px); margin-bottom:26px; }
/* Kop en uitgelichte regel blijven gecentreerd, lopende tekst links —
   met vier alinea's leest gecentreerde bodytekst niet meer prettig. */
.matters p{ color:var(--ink-soft); margin:0 0 16px; text-align:left; }
.btn-navy{
  display:inline-block; margin-top:22px;
  font-size:14px; font-weight:700; letter-spacing:.04em;
  color:#fff; background:var(--navy); padding:14px 30px; border-radius:40px;  /* pill, als origineel */
  text-decoration:none; transition:background .2s, transform .2s;
}
.btn-navy:hover{ background:var(--navy-2); transform:translateY(-1px); }
/* Secundaire actie: het contactblok onderaan is de primaire bestemming,
   dus deze knop is visueel ondergeschikt. */
.btn-ghost{
  display:inline-block; margin-top:22px;
  font-size:14px; font-weight:700; letter-spacing:.04em;
  color:var(--navy); background:transparent;
  border:1px solid rgba(0,41,86,.28); padding:13px 28px; border-radius:40px;
  text-decoration:none; transition:border-color .2s, background .2s, transform .2s;
}
.btn-ghost:hover{ border-color:var(--navy); background:rgba(0,41,86,.05); transform:translateY(-1px); }
/* Uitgelichte regel midden in "Waarom het juist nu belangrijk is" */
.matters .pullquote{
  margin:34px auto; padding:26px 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  font-family:var(--display); font-size:clamp(21px,2.2vw,29px);
  font-weight:500; line-height:1.34; letter-spacing:-.005em;
  color:var(--navy); max-width:26ch; text-align:center;
}

/* ── Onze Belofte ────────────────────────────────────────── */
.promise{ display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(28px,5vw,80px); align-items:start; }
.promise-head h2{ font-size:clamp(30px,3.4vw,44px); font-weight:600; letter-spacing:-.01em; line-height:1.16; }
.promise-sub{ margin-top:14px; font-size:19px; font-weight:600; color:var(--navy); line-height:1.4; }
.promise-body p{ color:var(--ink-soft); }
.promise-body p + p{ margin-top:16px; }
.promise-body .statement{
  margin-top:28px; padding-top:24px; border-top:1px solid var(--border);
  font-size:clamp(17px,1.6vw,21px); font-weight:600; color:var(--navy); line-height:1.5;
}

/* ── Daarom InMade (op navy) ─────────────────────────────── */
.section.navy > .daarom{ max-width:var(--content-read); }
.section.navy .daarom h2{ font-size:clamp(30px,3.6vw,46px); font-weight:600; letter-spacing:-.01em; margin-bottom:26px; }
.daarom p{ color:rgba(255,255,255,.84); }
.daarom p + p{ margin-top:16px; }
.daarom .daarom-punch{
  margin-top:32px; padding-top:26px; border-top:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:clamp(19px,2vw,26px); font-weight:600; line-height:1.4;
}

/* ── Afsluitende alinea boven de klantenband ─────────────── */
/* ── Contactblok ─────────────────────────────────────────── */
.contact-block{ max-width:var(--content-read); margin-inline:auto; text-align:center; }
.contact-block h2{ font-size:clamp(28px,3.4vw,44px); font-weight:600; letter-spacing:-.01em; line-height:1.16; margin-bottom:22px; }
.contact-block p{ color:var(--ink-soft); text-align:left; }
.contact-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px 26px; margin-top:30px; }
.contact-actions .btn-navy{ margin-top:0; }
.contact-tel{
  font-size:15px; font-weight:600; color:var(--navy); text-decoration:none;
  border-bottom:1px solid rgba(0,41,86,.28); padding-bottom:2px; transition:border-color .2s;
}
.contact-tel:hover{ border-color:var(--navy); }
@media(max-width:560px){
  .contact-actions{ flex-direction:column; align-items:stretch; }
  .contact-actions .btn-navy{ display:block; width:100%; text-align:center; }
  .contact-tel{ text-align:center; }
}

/* ── Cases & inzichten ───────────────────────────────────── */
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,32px); }
.case{
  border:0; background:transparent; transition:transform .3s; text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
}
/* Hover alleen op een klikbare kaart: zolang de cases uit staan zijn het divs
   zonder link, en een kaart die omhoog springt belooft een klik die er niet is. */
a.case:hover{ transform:translateY(-4px); }
/* Related Insights: titel links + knop rechts (als origineel) */
.cases-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.cases-head .pill{
  flex-shrink:0; display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:700; letter-spacing:.04em; color:#fff; background:var(--navy);
  border-radius:40px; padding:12px 24px; text-decoration:none; transition:background .2s, transform .2s;
}
.cases-head .pill:hover{ background:var(--navy-2); transform:translateY(-1px); }
/* Onder ~560px past de knop niet meer naast de kop: met space-between en
   flex-shrink:0 duwde hij de pagina 59px breed op 320. Stapelen, en volle
   breedte zoals elke knop op mobiel. */
@media(max-width:560px){
  .cases-head{ flex-direction:column; align-items:stretch; gap:18px; }
  .cases-head .pill{ width:100%; justify-content:center; }
}
.case-img{
  height:210px; position:relative; overflow:hidden; border-radius:6px;
  display:flex; align-items:flex-end; padding:18px;
}
.case-img img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; transition:transform .55s ease;
}
a.case:hover .case-img img{ transform:scale(1.06); }
.case-img::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,18,42,.04) 0%, rgba(0,18,42,.14) 100%);
}
.case-img .metric{
  position:relative; z-index:2;
  font-family:var(--serif); font-size:42px; font-weight:700; color:#fff; line-height:1;
  text-shadow:0 2px 16px rgba(0,18,42,.55);
}
.case-img .metric small{ font-size:16px; vertical-align:super; }
.case-body{ padding:16px 0 0; }
.case-body .tag{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--silver); }
.case-body h3{ font-size:17px; line-height:1.35; margin-top:8px; }

/* ── Client band ─────────────────────────────────────────── */
.clients{ text-align:center; }
.clients p.kop{
  font-family:var(--display); font-weight:500; font-size:clamp(19px,2.1vw,28px);
  line-height:1.32; color:var(--navy); max-width:32ch;
  margin:0 auto clamp(30px,3.6vw,48px);
}
/* Logo-raster. De logo's worden monochroom navy gerenderd via een CSS-mask:
   die gebruikt alleen het alfakanaal, dus het bronbestand mag SVG of PNG zijn
   en in welke kleur dan ook. Zo staat er geen bonte rij merkkleuren.
   --h per logo omdat de verhoudingen enorm verschillen (Kimberly-Clark is 8:1,
   de McDonald's-bogen zijn bijna vierkant); op gelijke hoogte oogt het ene
   logo dan twee keer zo groot als het andere. */
.client-grid{
  list-style:none;
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(26px,3.4vw,48px) clamp(18px,2.4vw,36px);
  align-items:center;
}
.client-grid li{ display:flex; align-items:center; justify-content:center; min-height:52px; }
.client-logo{
  display:block; width:100%; height:var(--h,30px);
  background:var(--navy); opacity:.46;
  transition:opacity .3s ease;
  -webkit-mask-image:var(--src); -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center; -webkit-mask-size:contain;
  mask-image:var(--src); mask-repeat:no-repeat;
  mask-position:center; mask-size:contain;
}
.client-grid li:hover .client-logo{ opacity:.85; }
/* Merk zonder bruikbaar logo blijft als naam staan, in dezelfde toon */
.client-name{
  font-family:var(--display); font-size:clamp(15px,1.3vw,18px);
  color:var(--navy); opacity:.46; letter-spacing:.01em; text-align:center;
  transition:opacity .3s ease;
}
.client-grid li:hover .client-name{ opacity:.85; }
@media(max-width:900px){ .client-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:520px){ .client-grid{ grid-template-columns:repeat(2,1fr); } }

/* ── Footer ──────────────────────────────────────────────── */
.footer{ background:var(--navy-deep); color:rgba(255,255,255,.72); padding:clamp(54px,7vw,88px) var(--pad-x) 36px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(30px,4vw,64px); padding-bottom:42px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-logo .logo-lockup{ height:44px; margin-bottom:20px; }
.footer-top p{ font-size:14px; line-height:1.7; max-width:36ch; }
.footer h4{ color:#fff; font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px; }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.footer ul a{ font-size:14px; text-decoration:none; color:rgba(255,255,255,.72); transition:color .2s; }
.footer ul a:hover{ color:#fff; }
.footer-bot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; padding-top:26px; font-size:12.5px; color:rgba(255,255,255,.5); }
.footer-bot a{ color:rgba(255,255,255,.6); text-decoration:none; }
.footer-bot a:hover{ color:#fff; }
@media(max-width:780px){ .footer-top{ grid-template-columns:1fr; } }

/* ── Toetsenbordfocus ────────────────────────────────────── */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--navy); outline-offset:3px; border-radius:3px;
}
.hero a:focus-visible, .section.navy a:focus-visible, .footer a:focus-visible,
.promise-band a:focus-visible, .site-header a:focus-visible,
.site-header button:focus-visible{ outline-color:#fff; }
/* op het lichte glaspaneel na scrollen weer navy */
.site-header.scrolled a:focus-visible,
.site-header.scrolled button:focus-visible{ outline-color:var(--navy); }

/* ── Reveal animation ──────────────────────────────────────
   Korte afstand en een zachte curve; de vertraging loopt per sectie op
   (niet per element over de hele pagina), zodat blokken die niets met
   elkaar te maken hebben ook niet samen bewegen. */
.reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d, 0s);
}
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .hero-hint .rail::after{ animation:none; top:14px; }
  html{ scroll-behavior:auto; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:880px){
  .approach,.who,.matters,.promise{ grid-template-columns:1fr; }
  .promise-head{ margin-bottom:6px; }
  .steps,.why-grid,.cases{ grid-template-columns:1fr; }
  .tcard{ position:static; }
  .who-fig{ order:-1; }
}
@media(min-width:881px) and (max-width:1100px){
  .why-grid,.cases{ grid-template-columns:1fr 1fr; }
}