/* ==========================================================================
   Kattenberg Wervingcampagne 2026 — gedeelde styles
   Design tokens uit Figma: Werken bij pagina Kattenberg
   ========================================================================== */

:root {
  /* Kleuren */
  --text-primary: #00224e;
  --text-secondary: #3d5778;
  --text-link: #0047c0;
  --text-lighter: #a3bde8;
  --text-white: #ffffff;

  --bg-default: #ffffff;
  --bg-darker: #ebf0fa;
  --bg-brand-blue: #0047c0;
  --bg-brand-blue-light: #c2d9df;
  --bg-brand-donker: #00224e;
  --bg-brand-orange: #ef7c00;
  --bg-brand-green: #007a3e;

  --blauw-400: #3d73cf;
  --blauw-700: #003286;
  --blauw-800: #00276a;
  --licht-300: #ddeaed;
  --licht-500: #c2d9df;
  --licht-600: #a5b8be;
  --grey-300: #a0a0a0;
  --oranje-500: #ef7c00;
  --oranje-600: #d96f00;

  --button-primary-bg: #ef7c00;
  --button-primary-text: #000d1e;
  --button-secondary-bg: #0047c0;
  --button-secondary-text: #ffffff;

  --border-default: #ddeaed;

  /* Spacing */
  --s4: 4px;  --s8: 8px;   --s12: 12px; --s16: 16px; --s20: 20px;
  --s24: 24px; --s32: 32px; --s40: 40px; --s56: 56px; --s72: 72px; --s96: 96px;

  /* Radii */
  --r8: 8px; --r16: 16px; --r24: 24px; --r999: 999px;

  /* Layout */
  --content-max: 1296px;
  --section-x: clamp(24px, 5vw, 72px);
}

/* --------------------------------------------------------------------------
   Reset & basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-default);
  color: var(--text-secondary);
  font-family: "Archivo", sans-serif;
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--text-link); }

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-primary); font-family: "Inter", sans-serif; }

p { margin: 0; }

/* Typografie-schaal (Figma: Heading/Desktop) */
.h1 { font-size: clamp(34px, 3.3vw, 47.78px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.h2 { font-size: clamp(29px, 2.8vw, 39.81px); font-weight: 800; line-height: 1.155; letter-spacing: -0.02em; }
.h4 { font-size: 27.65px; font-weight: 700; line-height: 32px; letter-spacing: -0.01em; }
.h6 { font-size: 19.2px; font-weight: 700; line-height: 22px; letter-spacing: -0.01em; }

.p-large { font-size: 19px; line-height: 30px; }
.p-medium { font-size: 16px; line-height: 26px; }
.p-small { font-size: 13px; line-height: 20px; }

.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  border-radius: var(--r8);
  border: none;
  font-family: "Archivo", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary { background: var(--button-primary-bg); color: var(--button-primary-text); }
.btn-primary:hover { background: var(--oranje-600); box-shadow: 0 6px 18px rgba(239, 124, 0, .35); transform: translateY(-2px); }

.btn-secondary { background: var(--button-secondary-bg); color: var(--button-secondary-text); }
.btn-secondary:hover { background: var(--blauw-700); box-shadow: 0 6px 18px rgba(0, 71, 192, .35); transform: translateY(-2px); }

.btn-outline-white { background: transparent; color: var(--text-white); border: 1.5px solid #ffffff; }
.btn-outline-white:hover { background: #ffffff; color: var(--bg-brand-blue); transform: translateY(-2px); }

.btn .btn-arrow { display: inline-block; transition: transform .2s ease; }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Header & kruimelpad
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: var(--bg-default);
  border-bottom: 1px solid var(--bg-darker);
  transition: box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 24px rgba(0, 34, 78, .10); }

.site-header .logo img { height: 76px; width: auto; transition: transform .2s ease; }
.site-header .logo:hover img { transform: scale(1.03); }

/* Header: WhatsApp-knop toont op mobiel alleen het icoon */
.site-header .btn .btn-icon { display: none; font-size: 24px; line-height: 24px; }

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 24px;
  font-size: 16px;
}

/* Mobiele terug-link (vervangt kruimelpad op mobiel) */
.breadcrumb-back {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  color: var(--text-link);
  font-size: 16px;
  line-height: 26px;
  text-decoration: none;
}
.breadcrumb-back:hover { color: var(--blauw-700); }
.breadcrumb .fa-house { color: var(--text-link); font-size: 16px; }
.breadcrumb a { color: var(--text-link); text-decoration: underline; text-underline-position: from-font; transition: color .15s ease; }
.breadcrumb a:hover { color: var(--blauw-700); }
.breadcrumb .fa-angle-right { color: var(--text-lighter); font-size: 14px; }
.breadcrumb .current { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   Sectie-layout
   -------------------------------------------------------------------------- */
.section { padding: var(--s96) var(--section-x); }
.section-inner { max-width: var(--content-max); margin: 0 auto; }

/* Vacaturesectie sluit direct op de hero aan (hero levert al 40px onderruimte) */
#vacatures { padding-top: 0; }

.section-header { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.section-header.centered { align-items: center; text-align: center; }

.bg-white { background: var(--bg-default); }
.bg-light { background: var(--bg-brand-blue-light); }
.bg-dark { background: var(--bg-brand-donker); }
.bg-blue { background: var(--bg-brand-blue); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { display: flex; align-items: center; gap: 56px; padding: 0 var(--section-x) 40px; max-width: 1440px; margin: 0 auto; }
/* Werkenbij-pagina heeft geen kruimelpad; geef de hero daar wat ruimte onder de header */
.hero:not(.hero-vacature) { padding-top: 32px; }

.hero-copy { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero-copy .intro { color: var(--text-secondary); }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 16px; }

.hero-media {
  flex: 1 0 0;
  min-width: 0;
  height: 530px;
  border-radius: var(--r24);
  overflow: hidden;
}
.hero.hero-vacature .hero-media { height: 390px; }

/* Ruitvormige hero-afbeelding (brandbook-vorm); alleen op desktop.
   Hoogte volgt de breedte via aspect-ratio, zodat de vorm altijd in verhouding blijft. */
.hero-media.ruit,
.hero.hero-vacature .hero-media.ruit {
  height: auto;
  aspect-ratio: 676 / 673;
  border-radius: 0;
  -webkit-mask: url("../assets/hero-ruit-werkenbij.svg") center / contain no-repeat;
  mask: url("../assets/hero-ruit-werkenbij.svg") center / contain no-repeat;
}
/* Bij een echte foto zit de ruitvorm al in het beeld: masker uit, anders dubbele randen */
.hero-media.ruit.has-photo {
  -webkit-mask: none;
  mask: none;
}
.hero-media picture,
.hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Foto's in de vacaturekaarten */
.vacature-card .card-media picture,
.vacature-card .card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Placeholder voor foto's / video */
.placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-darker);
  color: var(--grey-300);
  font-size: 13px;
  line-height: 20px;
}
.placeholder.uppercase { text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Vacature-kaarten (werkenbij)
   -------------------------------------------------------------------------- */
.vacature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.vacature-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-default);
  border: 1px solid var(--licht-300);
  border-radius: var(--r16);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.vacature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 34, 78, .12);
  border-color: var(--licht-500);
}
.vacature-card .card-media { height: 200px; flex-shrink: 0; }
.vacature-card .card-body { display: flex; flex-direction: column; flex: 1; justify-content: space-between; gap: 24px; padding: 32px; }
.vacature-card .card-text { display: flex; flex-direction: column; gap: 16px; }
.vacature-card .card-title-group { display: flex; flex-direction: column; gap: 8px; }
.vacature-card .btn { align-self: flex-start; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  padding: 8px 12px;
  border-radius: var(--r999);
  background: var(--bg-brand-blue-light);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.vacature-card:hover .pill { background: #b3d0d7; }

/* --------------------------------------------------------------------------
   USP-kaarten
   -------------------------------------------------------------------------- */
.usp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.usp-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 240px;
  padding: 96px 32px 32px;
  background: var(--bg-default);
  border-radius: var(--r16);
  transition: transform .25s ease, box-shadow .25s ease;
}
.usp-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0, 34, 78, .12); }

/* Decoratieve blob: exacte Figma-geometrie (wrapper 494x552 op -241/-402,
   met daarin de vorm 467x385 geroteerd). Pixel-verankerd aan de linkerbovenhoek,
   dus op elke schermbreedte identiek en het icoon valt altijd binnen het vlak. */
.usp-card .usp-deco-wrap {
  position: absolute;
  left: -241px;
  top: -402px;
  width: 494px;
  height: 552px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform .4s ease;
}
.usp-card:hover .usp-deco-wrap { transform: scale(1.05); }

.usp-card .usp-deco {
  flex: none;
  width: 467px;
  height: 385px;
  max-width: none;
  transform: rotate(105.23deg);
}

.usp-card .usp-icon {
  position: absolute;
  left: 44px;
  top: 32px;
  transform: translateX(-50%);
  color: var(--text-white);
  font-size: 24px;
  line-height: 24px;
  transition: transform .25s ease;
}
.usp-card:hover .usp-icon { transform: translateX(-50%) scale(1.15); }

.usp-card .usp-text { position: relative; display: flex; flex-direction: column; gap: 8px; }

/* --------------------------------------------------------------------------
   Video-sectie
   -------------------------------------------------------------------------- */
.video-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r24);
  background: var(--bg-brand-donker);
  color: var(--text-lighter);
  overflow: hidden;
}
.video-box .video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-brand-donker);
}
.video-box .play-button {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-brand-orange);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease, opacity .25s ease;
}
.video-box .play-button img { width: 30px; height: 30px; }
.video-box:not(.is-playing):hover .play-button,
.video-box .play-button:focus-visible {
  transform: scale(1.12);
  background: var(--oranje-600);
  box-shadow: 0 0 0 12px rgba(239, 124, 0, .25);
}
.video-box.is-playing .play-button { opacity: 0; visibility: hidden; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.testimonial-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  border-radius: var(--r16);
  background: var(--blauw-800);
  transition: transform .25s ease, background-color .25s ease;
}
.testimonial-card:hover { transform: translateY(-6px); background: #002d7a; }

.testimonial-card .quote-mark {
  font-family: "Inter", sans-serif;
  font-size: 39.81px;
  font-weight: 800;
  line-height: 46px;
  color: var(--oranje-500);
}
.testimonial-card .quote {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 19px;
  line-height: 30px;
  color: var(--text-white);
}
/* Quotes worden zonder foto's geplaatst: alleen naam en functie */
.testimonial-card .person { display: flex; align-items: center; gap: 16px; }
.testimonial-card .person .name { color: var(--text-white); font-size: 16px; line-height: 26px; }
.testimonial-card .person .role { color: var(--text-lighter); font-size: 13px; line-height: 20px; }

/* --------------------------------------------------------------------------
   Historie + tijdlijn
   -------------------------------------------------------------------------- */
.history-row { display: flex; align-items: center; gap: 56px; margin-bottom: 56px; }
.history-media {
  flex: 1 0 0;
  min-width: 0;
  height: 340px;
  border-radius: var(--r24);
  border: 1px solid var(--licht-300);
  overflow: hidden;
}
.history-media picture,
.history-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.history-copy { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.timeline { position: relative; display: flex; }
.timeline-item {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
/* Verbindingslijn: elk item tekent een segment van de eigen stip naar de
   volgende, zodat de lijn altijd exact van de eerste tot de laatste stip loopt */
.timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 100%;
  border-top: 2px solid var(--licht-500);
}
.timeline-item .dot {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-brand-blue);
  border: 4px solid var(--bg-darker);
  transition: transform .2s ease;
}
.timeline-item:hover .dot { transform: scale(1.3); }
.timeline-item.is-now .dot { background: var(--bg-brand-orange); }
.timeline-item .year { font-family: "Inter", sans-serif; font-weight: 700; font-size: 19.2px; line-height: 22px; letter-spacing: -0.01em; color: var(--text-primary); }
.timeline-item .label { font-size: 13px; line-height: 20px; color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   Sollicitatiestappen
   -------------------------------------------------------------------------- */
.steps { position: relative; display: flex; gap: 32px; max-width: 1100px; margin: 0 auto; }
.steps::before {
  content: "";
  position: absolute;
  top: 68px;
  left: 18%;
  right: 18%;
  border-top: 3px dashed var(--licht-300);
}

.step { position: relative; flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 12px; }

.step .step-circle-wrap { position: relative; }
.step .step-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 6px solid var(--licht-500);
  color: var(--text-white);
  font-size: 39.81px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.step:hover .step-circle { transform: scale(1.08) rotate(-3deg); box-shadow: 0 10px 30px rgba(0, 34, 78, .2); }
.step .step-circle.orange { background: var(--bg-brand-orange); }
.step .step-circle.blue { background: var(--bg-brand-blue); }
.step .step-circle.green { background: var(--bg-brand-green); }

.step .step-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(4deg);
  padding: 4px 12px;
  border-radius: var(--r999);
  background: var(--bg-brand-donker);
  color: var(--text-white);
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
  transition: transform .25s ease;
}
.step .step-badge.tilt-left { transform: translateX(-50%) rotate(-3deg); }
.step:hover .step-badge { transform: translateX(-50%) rotate(0deg) scale(1.08); }

.step .step-text { display: flex; flex-direction: column; gap: 8px; text-align: center; }

/* --------------------------------------------------------------------------
   FAQ (accordion)
   -------------------------------------------------------------------------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; width: min(880px, 100%); margin: 0 auto; }

.faq-item { background: var(--bg-default); border: 1px solid var(--border-default); border-radius: 16px; transition: border-color .2s ease, box-shadow .2s ease; }
.faq-item:hover { border-color: var(--licht-500); box-shadow: 0 4px 16px rgba(0, 34, 78, .06); }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 24px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 19.2px;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.faq-question .faq-icon { color: var(--bg-brand-orange); font-size: 16px; flex-shrink: 0; transition: transform .3s ease; }
.faq-item.open .faq-question .faq-icon { transform: rotate(180deg); }

.faq-answer {
  overflow: hidden;
  max-height: 0;
  /* visibility houdt een dicht antwoord uit de schermlezer en de tabvolgorde */
  visibility: hidden;
  transition: max-height .35s ease, visibility .35s ease;
}
.faq-item.open .faq-answer { visibility: visible; }
.faq-answer p { padding: 0 24px 24px; color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: var(--s96) var(--section-x);
  background: var(--bg-brand-blue-light);
  text-align: center;
}
.cta .cta-deco-1 {
  position: absolute;
  right: 27px;
  top: -90px;
  width: 340px;
  height: 340px;
  transform: rotate(12deg);
  opacity: .45;
  pointer-events: none;
}
.cta .cta-deco-2 {
  position: absolute;
  left: 15px;
  top: 212px;
  width: 300px;
  height: 300px;
  pointer-events: none;
}
.cta .cta-text { position: relative; display: flex; flex-direction: column; gap: 16px; max-width: var(--content-max); }
.cta h2 { color: var(--text-primary); }
.cta .sub { color: var(--text-secondary); font-size: 19px; line-height: 30px; }
.cta .cta-buttons { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cta .cta-mail {
  position: relative;
  margin-top: -8px;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-secondary);
}
.cta .cta-mail a { color: var(--blauw-800); text-decoration: underline; text-underline-offset: 3px; }
.cta .cta-mail a:hover { color: var(--bg-brand-orange); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer-main { background: var(--bg-brand-donker); padding: var(--s96) var(--section-x); }
.footer-main .footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px; max-width: var(--content-max); margin: 0 auto; }
.footer-main .footer-col { display: flex; flex-direction: column; gap: 32px; }
.footer-main .footer-block { display: flex; flex-direction: column; gap: 16px; }
.footer-main h3 { color: var(--text-white); font-size: 19.2px; font-weight: 700; line-height: 22px; letter-spacing: -0.01em; }
.footer-main p, .footer-main a { color: var(--text-lighter); font-size: 16px; line-height: 26px; }
.footer-main .label-white { color: var(--text-white); }
.footer-main .footer-links-plain { display: flex; flex-direction: column; }
.footer-main .footer-links-plain a { text-decoration: none; transition: color .15s ease, padding-left .2s ease; }
.footer-main .footer-links-plain a:hover { color: var(--text-white); padding-left: 4px; }

.footer-main .contact-row { display: flex; gap: 16px; }
.footer-main .contact-row .place { color: var(--text-white); width: 90px; flex-shrink: 0; }
.footer-main .contact-row a { text-decoration: none; }
.footer-main .contact-row a:hover { color: var(--text-white); }

.social-row { display: flex; gap: 8px; }
.social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r8);
  background: var(--bg-brand-blue);
  color: var(--text-white);
  font-size: 13px;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.social-button:hover { background: var(--blauw-400); transform: translateY(-3px); }

/* Keurmerken-strip */
.cert-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 40px;
  padding: 24px var(--section-x);
  background: var(--bg-default);
  border-bottom: 1px solid var(--bg-darker);
}
.cert-strip > img, .cert-strip .iso-logo {
  height: 53px;
  width: 110px;
  object-fit: contain;
  filter: grayscale(0%);
  transition: transform .2s ease;
}
.cert-strip > img:hover, .cert-strip .iso-logo:hover { transform: scale(1.08); }
.cert-strip .mondial { height: 10px; object-fit: contain; }

/* ISO-keurmerk: drie certificeringsregels gestapeld (ISO 9001 / 14001 / 27001) */
.cert-strip .iso-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
}
.cert-strip .iso-logo img {
  display: block;
  height: 13px;
  width: auto;
  max-width: none;
  object-fit: contain;
}
/* Breedte per regel afgeleid van de eigen viewBox-verhouding (behoudt tekst-ratio) */
.cert-strip .iso-logo img:nth-child(1) { aspect-ratio: 70.4286 / 14.2692; }
.cert-strip .iso-logo img:nth-child(2) { aspect-ratio: 80.5715 / 14.1124; }
.cert-strip .iso-logo img:nth-child(3) { aspect-ratio: 79.8571 / 14.2692; }

/* Onderste footer-links */
.footer-bottom { background: var(--bg-default); padding: 40px var(--section-x); }
.footer-bottom .footer-bottom-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; max-width: var(--content-max); margin: 0 auto; }
.footer-bottom .col { display: flex; flex-direction: column; }
.footer-bottom a { color: var(--text-link); font-size: 16px; line-height: 26px; text-decoration: none; transition: color .15s ease, padding-left .2s ease; }
.footer-bottom a:hover { color: var(--blauw-700); text-decoration: underline; padding-left: 4px; }

/* --------------------------------------------------------------------------
   Vacature-detailpagina
   -------------------------------------------------------------------------- */
.vacature-info-strip { padding: 0 var(--section-x); }
.vacature-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 1440px; margin: 0 auto; }
/* Vacatures zonder rijbewijseis tonen drie specificaties */
.vacature-info-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.info-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px;
  border-radius: var(--r16);
  background: var(--bg-brand-blue-light);
  transition: transform .2s ease, box-shadow .2s ease;
}
.info-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 34, 78, .12); }
.info-card .info-label { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.info-card .info-label i { color: var(--text-link); font-size: 16px; }
.info-card .info-value { color: var(--text-primary); }

.vacature-content { display: flex; flex-direction: column; gap: 40px; }
.vacature-content .content-block { display: flex; flex-direction: column; gap: 16px; }

.bullet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bullet-list li { display: flex; gap: 12px; }
.bullet-list li::before { content: "•"; color: var(--text-link); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Instagram-sectie
   -------------------------------------------------------------------------- */
.insta-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; width: 100%; }

.insta-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--r24);
  border: 1px solid var(--licht-300);
  background: var(--bg-darker);
  color: var(--grey-300);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.insta-tile:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0, 34, 78, .12); }

.insta-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.insta-tile:hover img { transform: scale(1.05); }

.insta-tile .insta-icon {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: #ffffff;
  font-size: 18px;
  filter: drop-shadow(0 1px 4px rgba(0, 13, 30, .55));
  opacity: 0;
  transition: opacity .2s ease;
}
.insta-tile:hover .insta-icon { opacity: 1; }

/* --------------------------------------------------------------------------
   Modal "Laat je nummer achter"
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 13, 30, .6);
  opacity: 0;
  pointer-events: none;
  /* visibility houdt de dichte modal uit de tabvolgorde en uit de schermlezer */
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; visibility: visible; }

.modal {
  width: min(440px, 100%);
  background: var(--bg-default);
  border-radius: var(--r16);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: translateY(16px);
  transition: transform .25s ease;
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal h3 { font-size: 27.65px; line-height: 32px; letter-spacing: -0.01em; }
.modal input {
  padding: 14px 16px;
  border: 1px solid var(--licht-500);
  border-radius: var(--r8);
  font-family: "Archivo", sans-serif;
  font-size: 16px;
  color: var(--text-primary);
}
.modal input:focus { outline: 2px solid var(--bg-brand-blue); border-color: transparent; }
.modal .modal-close {
  position: absolute;
  background: none; border: none;
  cursor: pointer;
}
.modal .modal-actions { display: flex; gap: 12px; }
.modal .success { color: var(--bg-brand-green); font-weight: 700; }
.modal .form-error { color: #c0392b; }

.modal .consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 20px;
  color: var(--text-secondary);
  cursor: pointer;
}
.modal .consent input[type="checkbox"] {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--bg-brand-blue);
  cursor: pointer;
}
.modal .consent a { color: var(--text-link); }

/* --------------------------------------------------------------------------
   Scroll-reveal animaties
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .usp-grid, .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vacature-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-main .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) and (min-width: 821px) {
  .insta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobiel — volgt de 390px-frames uit Figma */
@media (max-width: 820px) {
  /* Typografie (Heading/Mobile) */
  .h1 { font-size: 34.6px; line-height: 42px; }
  .h2 { font-size: 30.75px; line-height: 37px; }
  .h4 { font-size: 24.3px; line-height: 29px; }

  /* Secties: 16px zijmarge, 32px verticaal */
  .section { padding: 32px 16px; }
  .section-header { gap: 16px; margin-bottom: 24px; }

  /* Titels links uitlijnen op mobiel, behalve secties die gecentreerd blijven */
  .h2.text-center { text-align: left; }
  .section-header.centered:not(.stay-centered) { align-items: flex-start; text-align: left; }

  /* Header: kleiner logo, icoon-knop */
  .site-header { padding: 16px; }
  .site-header .logo img { height: 52px; }
  .site-header .btn { padding: 16px; }
  .site-header .btn .btn-icon { display: inline-block; }
  .site-header .btn .btn-label { display: none; }

  /* Kruimelpad wordt terug-link */
  .breadcrumb { display: none; }
  .breadcrumb-back { display: flex; }

  /* Hero: afbeelding eerst, knoppen full-width */
  .hero, .history-row { flex-direction: column; align-items: stretch; }
  .hero-copy, .hero-media, .history-media, .history-copy { flex: 0 0 auto; }
  .hero { padding: 0 16px 32px; gap: 24px; }
  .hero:not(.hero-vacature) { padding-top: 16px; }
  .hero.hero-vacature { padding: 0 16px 32px; }
  .hero-media { order: -1; height: 250px; }
  .hero.hero-vacature .hero-media { height: 250px; }
  /* Ruitvorm is minder geschikt voor mobiel: terug naar afgeronde rechthoek */
  .hero-media.ruit,
  .hero.hero-vacature .hero-media.ruit {
    height: 250px;
    aspect-ratio: auto;
    border-radius: var(--r24);
    -webkit-mask: none;
    mask: none;
  }
  /* Gestapelde knoppen op volle breedte hebben meer lucht nodig dan de 16px
     die naast elkaar wel werkt. Ook meer ruimte tussen tekst en knoppen. */
  .hero-copy { gap: 32px; }
  .hero-buttons { flex-direction: column; width: 100%; gap: 20px; }
  .hero-buttons .btn { width: 100%; }

  /* Kaarten gestapeld */
  .vacature-grid, .usp-grid, .testimonial-grid { grid-template-columns: 1fr; }

  /* Vacature-infocards: 2x2 grid */
  .vacature-info-strip { padding: 0 16px; }
  .vacature-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-bottom: 32px; }
  .info-card { padding: 20px 24px; }

  /* Video: 16:9 */

  /* Historie + verticale tijdlijn */
  .history-row { gap: 24px; margin-bottom: 24px; }
  .history-media { height: 240px; }
  .timeline { flex-direction: column; align-items: stretch; gap: 24px; }
  /* Verticaal segment van eigen stip naar de volgende (overbrugt ook de 24px gap) */
  .timeline-item:not(:last-child)::before {
    top: 9px;
    left: 8px;
    width: 0;
    height: calc(100% + 24px);
    border-top: none;
    border-left: 2px solid var(--licht-500);
  }
  .timeline-item { flex-direction: row; align-items: flex-start; gap: 8px; text-align: left; }
  .timeline-item .dot { position: relative; z-index: 1; flex-shrink: 0; }
  .timeline-item .label { text-align: left; }

  /* Sollicitatiestappen gestapeld */
  .steps { flex-direction: column; align-items: center; gap: 32px; }
  .steps::before { display: none; }
  .step { max-width: 360px; }

  /* Instagram: 2x2, vijfde tegel verbergen zoals in het design */
  .insta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insta-tile:nth-child(5) { display: none; }

  /* CTA: knoppen full-width, één decoratie */
  .cta { padding: 32px 16px; }
  .cta .cta-buttons { flex-direction: column; width: 100%; gap: 20px; }
  .cta .cta-buttons .btn { width: 100%; }
  .cta .cta-mail { margin-top: 0; font-size: 15px; line-height: 24px; }
  .cta .cta-deco-2 { display: none; }
  .cta .cta-deco-1 { right: -60px; top: -114px; width: 241px; height: 241px; }

  /* Footer: één kolom, categorieën inklapbaar */
  .footer-main { padding: 32px 16px; }
  .footer-main .footer-grid { display: flex; flex-direction: column; gap: 24px; }
  .footer-main .footer-col { gap: 24px; }
  .footer-main .footer-block:not(.always-open) { gap: 0; }
  .footer-main .footer-block:not(.always-open) h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .footer-main .footer-block:not(.always-open) h3::after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 19px;
    color: var(--bg-brand-orange);
    transition: transform .25s ease;
  }
  .footer-main .footer-block:not(.always-open).open h3::after { transform: rotate(180deg); }
  .footer-main .footer-block:not(.always-open) .footer-links-plain,
  .footer-main .footer-block:not(.always-open) .footer-block-body { display: none; margin-top: 16px; }
  .footer-main .footer-block:not(.always-open).open .footer-links-plain,
  .footer-main .footer-block:not(.always-open).open .footer-block-body { display: flex; flex-direction: column; }

  /* Keurmerken en onderste links */
  .cert-strip { gap: 16px 24px; padding: 24px 16px; }
  .footer-bottom { padding: 32px 16px; }
  .footer-bottom .footer-bottom-grid { grid-template-columns: 1fr; gap: 24px; }
}