/* 't Behouden Huys – werken bij */
/* Kleuren: blauw #0161a2 (logo), lichtblauw #E8F1F7 (9%) en #D9E7F1 (15%), hover #014c80 */

:root{
  --ink: #0161a2;
  --blue: #0161a2;
  --blue-dark: #014c80;
  --blue-tint: #E8F1F7;   /* 9% van #0161a2 */
  --accent: #F59E0B;
  --accent-dark: #d9820a;
  --accent-text: #0161a2;
  --paper: #FFFFFF;
  --fog: #E8F1F7;
  --line: #D9E7F1;        /* 15% van #0161a2 */
  --charcoal: #334155;
  --muted: #6B7280;
  --white: #ffffff;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--charcoal);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 300;
}
h1,h2,h3,h4{
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}
a{ color: inherit; }
img{ max-width: 100%; display:block; }
.wrap{ max-width: 1160px; margin: 0 auto; padding: 0 32px; }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}
:focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;
  padding: 14px 26px;
  font-family:'DM Sans',sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration:none;
  border-radius: 6px;
  border: 1px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.btn-primary{ background: var(--accent); color: var(--accent-text); font-weight: 700; }
.btn-primary:hover, .btn-primary:focus-visible{ background: var(--accent-dark); }
.btn-secondary{
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.55);
}
.btn-secondary:hover, .btn-secondary:focus-visible{
  border-color: var(--white);
  background: rgba(255,255,255,0.08);
}
.cta-row{ display:flex; gap: 14px; flex-wrap: wrap; }

/* ---------- HERO (foto met logo + tekst erover) ---------- */
.hero{
  position: relative;
  min-height: 480px;
  display:flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink);
}
.hero-bg{
  position:absolute; inset:0;
  z-index: 0;
}
.hero-bg svg{ width:100%; height:100%; display:block; }
.hero-bg video{ width:100%; height:100%; display:block; object-fit:cover; object-position:center 40%; }
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(1,97,162,0.15) 0%, rgba(1,76,128,0.55) 100%);
  z-index: 1;
}
.hero-content{
  position: relative;
  z-index: 2;
  flex: 1;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 40px;
  padding: 28px 5% 64px;
}
.hero-top img{
  height: 92px;
  width: auto;
  display:block;
}
.hero-text{ max-width: 680px; }
.hero-eyebrow{
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
}
.hero-text h1{
  color: var(--white);
  font-size: 52px;
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 32px;
}
.photo-note{
  position:absolute; top:20px; right:20px;
  background: rgba(16,27,45,0.55);
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 4px;
  z-index: 2;
}

/* ---------- SECTIONS shared ---------- */
section{ padding: 88px 0; }

/* ---------- FEELING ---------- */
.feeling{ background: var(--paper); text-align:center; }
.feeling.feeling-alt{ background: var(--fog); }
.feeling .inner{ max-width: 720px; margin: 0 auto; text-align:left; }
.feeling h2{ font-size: 30px; margin-bottom: 24px; text-align:center; }
.feeling p{ color: var(--charcoal); font-size: 16.5px; margin: 0 0 18px; }
.feeling p:last-child{ margin-bottom: 0; }

.intro-story{ text-align:left; }
.story-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items:center;
}
.story-text h2{ text-align:left; font-size: 28px; margin-bottom: 20px; }
.story-photo{
  position:relative;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow:hidden;
}
.story-photo svg{ width:100%; height:100%; display:block; }
.story-photo img.closing-img{ width:100%; height:100%; display:block; object-fit:cover; object-position:85% center; }
.story-photo .tag{
  position:absolute; bottom:12px; left:14px;
  background: rgba(1,97,162,0.85);
  color: var(--white);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
}

/* ---------- TEAM DUO / CULTURE (shared card grid) ---------- */
.team-duo{ background: var(--fog); }
.culture{ background: var(--fog); }
.duo-head{ max-width: 640px; margin: 0 auto 44px; text-align:center; }
.duo-head h2{ font-size: 28px; }
.duo-head p{ margin-top: 12px; color: var(--muted); font-size: 16px; }
.duo-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.duo-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.duo-card .photo{ aspect-ratio: 16/10; position:relative; }
.duo-card .photo svg{ width:100%; height:100%; display:block; }
.duo-card .photo img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center 30%; }
.duo-card .photo .tag{
  position:absolute; bottom:12px; left:14px;
  background: rgba(1,97,162,0.85);
  color: var(--white);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
}
.duo-card .content{ padding: 28px; }
.duo-card h3{ font-size: 18px; margin-bottom: 14px; }
.duo-card blockquote{
  margin: 0;
  font-size: 16px;
  font-style: italic;
  color: var(--charcoal);
  line-height: 1.55;
}
.duo-card .name{ margin-top: 16px; font-size: 14px; color: var(--muted); }

/* ---------- BRIDGE STATEMENT ---------- */
.bridge{ background: var(--ink); text-align:center; padding: 30px 0; }
.bridge p{
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.45;
  color: var(--white);
  margin: 0;
}
.bridge.bridge-soft{ padding: 28px 0; }
.bridge-heading{
  color: var(--white);
  font-size: 21px;
  margin-bottom: 8px;
}
.bridge.bridge-soft p{
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  max-width: 820px;
  margin: 0 auto 16px;
}
.bridge.bridge-soft .btn{ display:inline-block; }

/* ---------- VACATURE ---------- */
.vacature{ background: var(--paper); }
.vac-label{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}
.vac-block{ max-width: 760px; }
.vac-block h2{ font-size: 30px; margin-bottom: 8px; }
.vac-block .meta{ color: var(--muted); font-size: 15px; margin-bottom: 26px; }
.vac-block .lead-question{
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
  margin-bottom: 16px;
}
.vac-block h4{
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 34px 0 10px;
}
.vac-block p{ color: var(--charcoal); margin: 0 0 14px; }
.vac-block ul{ color: var(--charcoal); margin: 0 0 14px; padding-left: 20px; }
.vac-block li{ margin-bottom: 6px; }
.vac-block p a{ color: var(--blue); text-decoration: underline; }
.vac-block .apply{ margin-top: 36px; }

.vac-badges{ display:flex; gap:10px; flex-wrap:wrap; margin: 0 0 30px; }
.vac-badges .badge{
  display:inline-flex; align-items:center;
  background: var(--blue-tint); color: var(--blue-dark);
  font-size: 13px; font-weight: 700;
  padding: 7px 16px; border-radius: 20px;
}

.intro-card{
  background: var(--blue-tint);
  border-radius: 8px;
  padding: 28px 32px;
  margin-bottom: 44px;
}
.intro-card .lead-question{ color: var(--ink); margin-bottom: 14px; }
.intro-card p{ color: var(--charcoal); }
.intro-card p:last-child{ margin-bottom: 0; }

.vac-item{ margin: 40px 0; }
.vac-item-body h4{ margin: 0 0 12px; }

.pull-quote{
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  color: var(--blue);
  border-left: 4px solid var(--blue);
  padding-left: 20px;
  margin: 28px 0 !important;
}

.why-blocks{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0 8px;
}
.why-block{
  background: var(--ink);
  border-radius: 10px;
  padding: 22px 22px 24px;
}
.why-block p{
  font-size: 14.5px;
  color: var(--white);
  line-height: 1.55;
  margin: 0;
}

.check-list{ list-style:none; padding-left: 0; margin: 0 0 14px; }
.check-list li{ position:relative; padding-left: 26px; margin-bottom: 9px; }
.check-list li::before{
  content: "";
  position:absolute; left:0; top: 1px;
  width: 13px; height: 19px;
  background-color: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2034%22%3E%3Cpath%20d%3D%22M2%2012%20L12%202%20L22%2012%20L22%2032%20L2%2032%20Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2034%22%3E%3Cpath%20d%3D%22M2%2012%20L12%202%20L22%2012%20L22%2032%20L2%2032%20Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") no-repeat center / contain;
}

.perks-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 8px; }
.perk{
  display:flex; align-items:flex-start; gap: 12px;
  background: var(--blue-tint); border-radius: 8px; padding: 16px 18px;
}
.perk .check{
  width: 13px; height: 19px; flex-shrink:0; margin-top: 2px;
  background-color: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2034%22%3E%3Cpath%20d%3D%22M2%2012%20L12%202%20L22%2012%20L22%2032%20L2%2032%20Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2034%22%3E%3Cpath%20d%3D%22M2%2012%20L12%202%20L22%2012%20L22%2032%20L2%2032%20Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") no-repeat center / contain;
}
.perk span.text{ font-size: 14.5px; color: var(--charcoal); line-height: 1.5; }

.closing-card{
  background: var(--blue-tint);
  border-radius: 12px;
  padding: 36px 40px;
  margin-top: 52px;
}
.closing-card h4{ margin-top: 0; color: var(--ink); }
.closing-card p{ color: var(--charcoal); }
.closing-card p a{ color: var(--ink); text-decoration: underline; }
.closing-card .apply{ margin-top: 22px; }

.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- CLOSING ---------- */
.closing{ background: var(--fog); text-align:center; }
.closing .inner{ max-width: 600px; margin: 0 auto; }
.closing h2{ font-size: 32px; margin-bottom: 10px; }
.closing .lead{ font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 20px; }
.closing .desc{ color: var(--muted); font-size: 16px; margin-bottom: 32px; }

/* ---------- FOOTER ---------- */
footer{ background: var(--ink); color: #ffffff; padding: 56px 0 32px; }
.foot-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
footer h5{ color: var(--white); font-family:'Outfit', sans-serif; font-size:15px; margin: 0 0 14px; font-weight: 700; }
footer a{ color: #ffffff; text-decoration:none; }
footer a:hover{ color: var(--white); }
footer p{ margin: 0 0 6px; font-size: 14px; }
.foot-bottom{
  padding-top: 20px; font-size: 13px; color: #ffffff;
  display:flex; justify-content: space-between; flex-wrap:wrap; gap:8px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .hero{ min-height: 560px; }
  .hero-text h1{ font-size: 34px; }
  .hero-top img{ height: 68px; }
  .duo-grid{ grid-template-columns: 1fr; }
  .story-grid{ grid-template-columns: 1fr; gap: 32px; }
  .story-photo{ order: -1; }
  .foot-grid{ grid-template-columns: 1fr; gap: 28px; }
  section{ padding: 60px 0; }
  .bridge p{ font-size: 18px; }
  .why-blocks{ grid-template-columns: 1fr; }
}

/* ---------- FOOTER (slim) ---------- */
footer.foot-slim{ padding: 26px 0; text-align:center; }
footer.foot-slim p{ margin:0; font-size: 14px; line-height: 1.9; }
footer.foot-slim strong{ font-family:'Outfit',sans-serif; }
footer.foot-slim .sep{ margin: 0 10px; opacity: .6; }
footer.foot-slim a{ color:#fff; text-decoration:none; }
footer.foot-slim a:hover{ text-decoration: underline; }
@media (max-width: 600px){
  footer.foot-slim .sep{ display:block; height:0; overflow:hidden; margin:0; }
}

/* ---------- v21: vacature direct onder hero ---------- */
.hero-text h1{ margin-bottom: 20px; }
.hero-text{ max-width: 980px; }
.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; margin: 0 0 28px; }
.hero-badges .badge{
  display:inline-flex; align-items:center;
  background: var(--blue-tint);
  border: 1px solid var(--blue-tint);
  color: var(--blue-dark);
  font-size: 13.5px; font-weight: 700;
  padding: 7px 16px; border-radius: 20px;
}
.vacature{ padding-top: 56px; }
.intro-row{ display:grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 38%, 430px); gap: 32px; align-items: stretch; margin-bottom: 44px; }
.intro-row .intro-card{ margin-bottom: 0; }
.intro-photo{ aspect-ratio: auto; min-height: 320px; }
.intro-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: 47% 40%; display:block; }
.vac-block > .vac-item:first-child{ margin-top: 0; }
.vacature .vac-block > .vac-item:last-child{ margin-bottom: 0; }
.vacature .vac-item:last-child ul{ margin-bottom: 0; }
.intro-card h2{ font-size: 22px; line-height: 1.3; margin-bottom: 14px; }
.intro-card h3{ font-size: 17px; line-height: 1.35; margin: 26px 0 12px; }

.why{ background: var(--paper); }
.why-head{ max-width: 760px; }
.why-head h2{ font-size: 28px; margin-bottom: 16px; }
.why-head p{ margin: 0 0 14px; }
.why-head p:last-child{ margin-bottom: 0; }
.why-head h3{ font-size: 18px; line-height: 1.35; margin: 28px 0 12px; }
.why .why-blocks{ margin: 32px 0 0; gap: 20px; grid-template-columns: repeat(2, 1fr); }
.why .why-block{ padding: 28px; }
.why .why-block p{ font-size: 15.5px; }

.closing-cta{ background: var(--paper); }
.closing-cta .vac-block{ margin: 0 auto; }
.closing-cta .closing-card{ margin-top: 0; }

.btn-outline{ background: var(--white); color: var(--blue); border-color: var(--blue); font-weight: 700; }
.btn-outline:hover, .btn-outline:focus-visible{ background: var(--blue-tint); }
.sticky-cta{ display:none; }

@media (max-width: 900px){
  .hero{ min-height: 0; }
  .hero-content{ gap: 26px; padding: 22px 6% 40px; }
  .hero-eyebrow{ font-size: 18px; margin-bottom: 10px; }
  .vacature{ padding-top: 36px; }
  .intro-row{ grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; }
  .intro-photo{ order: 0; aspect-ratio: 4/3; min-height: 0; }
  .why .why-blocks{ grid-template-columns: 1fr; }
  .perks-grid{ grid-template-columns: 1fr; gap: 10px; }
  .hero-text h1{ font-size: 30px; margin-bottom: 16px; }
  .hero-top img{ height: 60px; }
  .hero-badges{ gap: 8px; margin-bottom: 20px; }
  .hero-badges .badge{ font-size: 13px; padding: 6px 13px; }
  .hero .cta-row{ flex-wrap: nowrap; gap: 10px; }
  .hero .cta-row .btn{ padding: 13px 14px; font-size: 14px; text-align:center; white-space: nowrap; }
  .hero .cta-row .btn-primary{ flex: 1; }
  .intro-card{ padding: 24px 22px; }
  .closing-card{ padding: 28px 24px; }
  .sticky-cta{
    display:flex; gap:10px;
    position: fixed; left:0; right:0; bottom:0; z-index: 50;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--white);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(1,97,162,0.10);
    transform: translateY(110%);
    transition: transform 0.3s ease;
  }
  .sticky-cta.is-on{ transform: none; }
  .sticky-cta .btn{ flex:1; text-align:center; padding: 13px 10px; }
  footer.foot-slim{ padding-bottom: 96px; }
}

/* ---------- v61: invliegende proost-tekst in hero ---------- */
.hero-proost{
  position:absolute; right:4%; bottom:44px; margin:0;
  background: var(--white); color: var(--blue);
  font-family:'Outfit', sans-serif; font-weight:700; font-size:40px; line-height:1.15; max-width: 560px;
  padding: 22px 32px; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(1,40,70,0.38);
  transform: rotate(-3deg);
  animation: proost-in 0.9s cubic-bezier(.2,.9,.25,1.15) 1.6s both;
}
.hero-proost span{ white-space:nowrap; }
@keyframes proost-in{
  from{ opacity:0; transform: translateX(120vw) rotate(6deg); }
  to{ opacity:1; transform: translateX(0) rotate(-3deg); }
}
@media (max-width: 900px){
  .hero-proost{ position:static; align-self:flex-start; font-size:26px; max-width:none; padding: 14px 18px; margin-top:-2px; }
}
@media (prefers-reduced-motion: reduce){
  .hero-proost{ animation:none; }
}

/* ---------- v70: eerste intro-alinea iets groter ---------- */
.intro-card h2 + p{ font-size: 18px; font-weight: 400; line-height: 1.6; }
@media (max-width: 900px){ .intro-card h2 + p{ font-size: 17px; } }
.perk-wide strong{ font-weight: 700; color: var(--ink); }

/* ---------- v99: korte zin onder de kop in hero ---------- */
.hero-sub{ color:#fff; font-size:20px; line-height:1.5; font-weight:400; max-width:560px; margin:-6px 0 22px; text-shadow:0 1px 12px rgba(0,0,0,.35); }
@media (max-width: 900px){ .hero-sub{ font-size:17px; margin:-4px 0 18px; } }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.apply .btn-row{ justify-content:flex-start; }
.perk strong{ font-weight:700; color: var(--ink); }
@media (max-width: 900px){ .apply .btn-row .btn{ flex:1 1 40%; text-align:center; } }

/* ---------- v76: sticky balk bovenaan met logo (gelijk aan verhaalpagina's) ---------- */
.topbar{ position: sticky; top: 0; z-index: 50; background: var(--accent); color: var(--accent-text); }
.topbar .inner{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 16px; padding: 8px 5%; font-family:'Outfit', sans-serif; font-weight:700; font-size: 15px; }
.topbar-logo{ justify-self:start; display:block; }
.topbar-logo img{ height: 58px; width:auto; display:block; }
.topbar-msg{ display:flex; align-items:center; justify-content:center; gap: 16px; flex-wrap:wrap; text-align:center; }
.topbar-btn{ color: var(--white); background: var(--ink); padding: 7px 14px; border-radius: 6px; text-decoration:none; text-transform: uppercase; font-size: 13px; letter-spacing: .02em; }
.topbar-btn:hover, .topbar-btn:focus-visible{ background: var(--blue-dark); }
.hero-content{ padding-top: 56px; }
#solliciteren, #vacature{ scroll-margin-top: 90px; }
@media (max-width: 900px){
  .topbar .inner{ grid-template-columns: auto 1fr; gap: 14px; padding: 8px 6%; }
  .topbar-logo img{ height: 50px; }
  .topbar-msg{ flex-direction:column; align-items:flex-end; gap: 6px; text-align:right; font-size: 13px; line-height:1.3; }
  .hero-content{ padding-top: 32px; }
}
/* v77: vaste balk onderaan op mobiel verwijderd */
footer.foot-slim{ padding-bottom: 26px; }
/* op mobiel geen vaste balk: de balk bovenaan scrolt mee weg */
@media (max-width: 900px){ .topbar{ position: static; } }

/* op mobiel: oranje balk weg, logo terug in de header boven de titel */
.hero-top-mobile{ display:none; }
@media (max-width: 900px){
  .topbar{ display:none; }
  .hero-top-mobile{ display:block; }
  .hero-top-mobile img{ height: 60px; width:auto; display:block; }
  .hero-content, .story-hero .hero-content{ padding-top: 22px; }
}

/* ---------- v103: video werken bij ---------- */
.video-sec{ background: var(--fog); }

.video-sec .duo-head{ margin-bottom: 32px; }
.video-frame{
  position:relative; max-width: 880px; margin: 0 auto;
  aspect-ratio: 848/480; border-radius: 12px; overflow:hidden;
  background: var(--ink);
  box-shadow: 0 18px 44px rgba(1,76,128,0.18);
}
.video-frame video{ width:100%; height:100%; display:block; object-fit:cover; }
.video-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border:0; padding:0; cursor:pointer;
  background: linear-gradient(180deg, rgba(1,76,128,0) 40%, rgba(1,76,128,0.45) 100%);
}
.video-play .circle{
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--accent); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
  transition: transform .2s ease, background .2s ease;
}
.video-play .circle svg{ width: 30px; height: 30px; margin-left: 5px; fill: var(--accent-text); }
.video-play:hover .circle, .video-play:focus-visible .circle{ transform: scale(1.07); background: var(--accent-dark); }
.video-play .label{
  position:absolute; left: 22px; bottom: 18px; color:#fff;
  font-family:'Outfit',sans-serif; font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.03em;
}
.video-frame.is-playing .video-play{ display:none; }
@media (max-width: 900px){
  .video-play .circle{ width: 66px; height: 66px; }
  .video-play .circle svg{ width: 24px; height: 24px; }
  .video-play .label{ left: 16px; bottom: 12px; font-size: 13px; }
}

/* ---------- v115: liggende video op desktop, staande video op mobiel ---------- */
.video-frame{ aspect-ratio: 16/9; }
.video-frame .video-staand{ display:none; }
@media (max-width: 900px){
  .video-frame{ aspect-ratio: 9/16; max-width: 420px; }
  .video-frame .video-liggend{ display:none; }
  .video-frame .video-staand{ display:block; }
}

/* ---------- v109: opsommingen uitgelijnd met de tekst ---------- */
.vac-block ul.check-list{ padding-left: 0; }

/* ---------- v111: waarom werken bij + dit krijg je samengevoegd, alles in blauwe vlakken ---------- */
.why-merged .why-blocks{ margin: 32px 0 0; }
.why-merged .perks-title{ font-size: 24px; color: var(--ink); margin: 56px 0 20px; text-transform: none; letter-spacing: 0; }
.why-merged .perks-grid{ gap: 20px; margin-top: 32px; }
.why-merged .perk{ background: var(--ink); border-radius: 10px; padding: 22px 24px; }
.why-merged .perk .check{ background-color: #fff; }
.why-merged .perk span.text{ color: #fff; font-size: 15px; line-height: 1.55; }
.why-merged .perk strong, .why-merged .perk-wide strong{ color: #fff; }
.why-merged .why-head h2{ font-size: 16px; letter-spacing: 0.24px; line-height: 26.4px; margin: 0 0 12px; }
@media (max-width: 900px){ .why-merged .perks-grid{ gap: 12px; } .why-merged .perks-title{ margin-top: 36px; font-size: 20px; } }
/* ---------- v112: gelijke witruimte tussen alle secties ---------- */
section.vacature, section.why, section.team-duo, section.video-sec, section.intro-story, section.closing-cta{ padding-top: 64px; padding-bottom: 64px; }
section.closing-cta, section.video-sec{ padding-top: 0; } /* zelfde kleur op elkaar: ruimte komt van de sectie erboven */
.vacature .vac-item:last-child .check-list li:last-child{ margin-bottom: 0; }
.why-merged .perks-grid{ margin-bottom: 0; }
@media (max-width: 900px){
  section.vacature, section.why, section.team-duo, section.video-sec, section.intro-story, section.closing-cta{ padding-top: 44px; padding-bottom: 44px; }
  section.closing-cta, section.video-sec{ padding-top: 0; }
}
/* ---------- v113: solliciteerblok compact op wit ---------- */
.closing-cta .closing-card{ background: none; border-radius: 0; padding: 0; }
.closing-cta .closing-card h4{ font-size: 22px; margin-bottom: 12px; }
.closing-cta .closing-card p{ margin-bottom: 10px; }
.closing-cta .closing-card .apply{ margin-top: 20px; }
.closing-cta .vac-block{ margin: 0; }
.closing-cta .closing-card p:last-child{ margin-bottom: 0; }
/* ---------- v114: overal een kleur blauw (#0161a2) voor tekst ---------- */
.hero-badges .badge, .vac-badges .badge{ color: var(--blue); }
.hero-badges .badge{ background: #fff; border-color: #fff; }

/* ---------- logo linksboven: wit vectorlogo op het oranje ---------- */
.topbar-logo img{ height: 58px; width: auto; }
@media (max-width: 900px){ .topbar-logo img{ height: 50px; } }

/* ---------- v120: mobiel overal dezelfde marge links en rechts (20px) ---------- */
@media (max-width: 900px){
  .wrap{ padding-left: 20px; padding-right: 20px; }
  .hero-content, .story-hero .hero-content{ padding-left: 20px; padding-right: 20px; }
  .hero-proost{ max-width: calc(100% - 8px); }
}
.nowrap{ white-space: nowrap; } /* uren en salaris niet afbreken */

/* ---------- v121: belknop toont op desktop het nummer, op mobiel "Bel ons" ---------- */
.lbl-desk{ display:inline; } .lbl-mob{ display:none; }
@media (max-width: 900px){ .lbl-desk{ display:none; } .lbl-mob{ display:inline; } }

/* ---------- v122: staande video op mobiel is 4:5 (1080x1350) ---------- */
@media (max-width: 900px){
  .video-frame{ aspect-ratio: 4/5; max-width: 480px; }
}