/* ============================================================
   Beauty2People — "Grote Beelden" variant
   Editorial, full-bleed photography, oversized type.
   ============================================================ */

@font-face { font-family: system-stack; src: local(Arial); }

:root{
  --ink:#0E1213;
  --ink-soft:#16201F;
  --petrol:#5FAAB8;   /* hoofdkleur (vlakken) */
  --teal-ink:#2E7886; /* donkerder variant voor tekst/iconen op licht */
  --petrol-deep:#0B3238;
  --teal:#5FAAB8;
  --teal-pale:#A9D0D8;
  --ivory:#EEF2EF;
  --mist:#EFF4F4;
  --paper:#FDFDFC;
  --line:rgba(14,18,19,.12);
  --line-light:rgba(255,255,255,.18);
  --grey:#5C615F;

  --radius:12px;
  --radius-sm:6px;

  --wrap:1440px;
  --gutter:clamp(20px, 5vw, 64px);

  --serif: "Times New Roman", "Georgia", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }
::selection{ background:var(--teal); color:var(--paper); }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.skip{ position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:12px 18px; z-index:999; }
.skip:focus{ left:12px; top:12px; }

/* ---------- type scale ---------- */
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.02em; line-height:1.06; }
.display{ font-size:clamp(2rem, 3.6vw, 3.4rem); line-height:1.1; }
.h2{ font-size:clamp(1.5rem, 2.2vw, 2.1rem); line-height:1.16; }
.h3{ font-size:clamp(1.05rem, 1.3vw, 1.25rem); line-height:1.25; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--grey); margin:0 0 20px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.55; }
.eyebrow--light{ color:var(--teal-pale); }
.lede{ font-size:clamp(0.95rem, 1vw, 1.02rem); line-height:1.65; color:var(--grey); max-width:44ch; }
em{ font-style:normal; color:var(--teal-ink); }
.on-dark em{ color:var(--teal-pale); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--teal); color:var(--paper);
  padding:15px 28px; border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:600; letter-spacing:-.01em;
  border:1px solid var(--teal);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  cursor:pointer;
}
.btn:hover{ background:var(--ink); border-color:var(--ink); transform:translateY(-2px); }
.btn .arw{ transition:transform .3s var(--ease); }
.btn:hover .arw{ transform:translateX(3px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.btn--light{ background:transparent; color:#fff; border-color:var(--line-light); }
.btn--light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn--solid-light{ background:var(--teal); color:#fff; border-color:var(--teal); }
.btn--solid-light:hover{ background:var(--teal-pale); border-color:var(--teal-pale); color:var(--petrol-deep); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.link{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; border-bottom:1px solid var(--line); padding-bottom:4px; transition:border-color .25s; }
.link:hover{ border-color:var(--ink); }

/* ================= HEADER ================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:26px var(--gutter);
  display:flex; align-items:center; gap:44px;
  color:#fff;
  transition:padding .4s var(--ease), background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header[data-solid]{
  padding-block:16px;
  background:rgba(253,253,252,.92);
  backdrop-filter:blur(14px);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line);
}
.brand{ display:flex; align-items:center; gap:12px; font-weight:600; font-size:17px; letter-spacing:-.01em; }
.brand img{ height:34px; width:auto; }
.brand__logo-light{ display:block; }
.brand__logo-dark{ display:none; }
.site-header[data-solid] .brand__logo-light{ display:none; }
.site-header[data-solid] .brand__logo-dark{ display:block; }

.head__right{ display:flex; align-items:center; gap:18px; margin-left:auto; }

.nav-inline{ display:none; align-items:center; gap:30px; }
.nav-inline a{ font-size:14.5px; font-weight:500; position:relative; padding-block:4px; }
.nav-inline a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor; transition:right .25s var(--ease); }
.nav-inline a:hover::after{ right:0; }

.head__actions{ display:none; align-items:center; gap:10px; }
.head__btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; font-size:13px; font-weight:600; letter-spacing:-.01em;
  border-radius:var(--radius-sm); border:1px solid var(--line-light); color:#fff;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.head__btn:hover{ background:rgba(255,255,255,.14); }
.head__btn--solid{ background:var(--teal); color:#fff; border-color:var(--teal); }
.head__btn--solid:hover{ background:var(--teal-pale); border-color:var(--teal-pale); color:var(--petrol-deep); }
.site-header[data-solid] .head__btn{ color:var(--ink); border-color:var(--line); }
.site-header[data-solid] .head__btn:hover{ background:var(--ivory); }
.site-header[data-solid] .head__btn--solid{ background:var(--teal); color:#fff; border-color:var(--teal); }
.site-header[data-solid] .head__btn--solid:hover{ background:var(--ink); border-color:var(--ink); }

.menu-btn{
  display:flex; align-items:center; gap:12px;
  background:transparent; border:1px solid currentColor; border-radius:var(--radius-sm);
  padding:11px 10px 11px 20px; color:inherit; cursor:pointer;
  font-size:14px; font-weight:600;
}
.menu-btn__box{ position:relative; width:26px; height:16px; flex:none; }
.menu-btn__box span{ position:absolute; left:0; right:0; height:1.4px; background:currentColor; transition:transform .35s var(--ease), opacity .35s var(--ease); }
.menu-btn__box span:nth-child(1){ top:0; }
.menu-btn__box span:nth-child(2){ top:7px; }
.menu-btn__box span:nth-child(3){ top:14px; }
.menu-btn__label-open{ display:inline; }
.menu-btn__label-close{ display:none; }

@media(min-width:1000px){
  .nav-inline{ display:flex; }
  .head__actions{ display:flex; }
  .menu-btn{ display:none; }
}

/* full-screen nav overlay */
.overlay{
  position:fixed; inset:0; z-index:99;
  background:var(--ink);
  color:#fff;
  display:flex; flex-direction:column; justify-content:space-between;
  gap:32px;
  padding:110px var(--gutter) 50px;
  transform:translateY(-100%);
  transition:transform .6s var(--ease);
  overflow-y:auto; /* if content is taller than the screen, scroll inside the
    panel instead of overflowing its box — translateY(-100%) moves by the
    box's own height, so any overflow outside the box gets dragged into view
    at the top when "closed" otherwise */
}
.overlay[data-open]{ transform:translateY(0); }
.overlay__nav{ display:flex; flex-direction:column; gap:6px; flex:none; }
.overlay__nav a{
  font-size:clamp(1.2rem, 4vh, 2.6rem); font-weight:600; letter-spacing:-.02em;
  padding:10px 0; border-bottom:1px solid var(--line-light);
  display:flex; justify-content:space-between; align-items:center;
  transition:color .25s, padding-left .25s;
}
.overlay__nav a span{ font-size:14px; color:var(--teal-pale); font-weight:400; letter-spacing:0; }
.overlay__nav a:hover{ color:var(--teal-pale); padding-left:14px; }
.overlay__foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; font-size:14px; color:rgba(255,255,255,.6); flex:none; }
.overlay__foot a{ color:#fff; }
@media (max-height: 700px){
  .overlay{ padding-top:90px; gap:24px; }
  .overlay__nav a{ padding-block:6px; }
}
body[data-menu-open]{ overflow:hidden; }

/* ================= HERO ================= */
.hero{
  position:relative; min-height:100svh; height:100svh;
  display:flex; align-items:flex-end;
  background:var(--ink); overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%; transform:scale(1.06); }
.hero__scrim{ position:absolute; inset:0; background:
  linear-gradient(0deg, rgba(8,10,11,.86) 0%, rgba(8,10,11,.32) 46%, rgba(8,10,11,.18) 100%); }
.hero__inner{ position:relative; z-index:2; width:100%; padding:0 var(--gutter) clamp(56px,8vh,110px); color:#fff; }
.hero__title{ max-width:20ch; text-wrap:balance; }
.hero__lede{ margin:22px 0 0; max-width:42ch; font-size:clamp(0.9rem,1vw,1rem); line-height:1.65; color:rgba(255,255,255,.82); }
.hero__actions{ margin-top:40px; }
.hero__scroll{
  position:absolute; right:var(--gutter); bottom:36px; z-index:2;
  display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.75); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  writing-mode:vertical-rl;
}
.hero__scroll::after{ content:""; width:1px; height:56px; background:rgba(255,255,255,.5); display:block; animation:scrolldown 2s infinite; }
@keyframes scrolldown{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 50.01%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ================= FACTS ================= */
.facts{ border-bottom:1px solid var(--line); }
.facts__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.facts__item{ padding:clamp(28px,4vw,52px) var(--gutter); border-right:1px solid var(--line); }
.facts__item:last-child{ border-right:none; }
.facts__n{ display:block; font-size:clamp(1.4rem,2vw,1.9rem); font-weight:600; letter-spacing:-.02em; }
.facts__l{ margin:10px 0 0; font-size:14px; color:var(--grey); line-height:1.5; max-width:22ch; }
@media(max-width:820px){
  .facts__grid{ grid-template-columns:repeat(2,1fr); }
  .facts__item:nth-child(2){ border-right:none; }
}

/* ================= SECTION SCAFFOLDING ================= */
.section{ padding-block:clamp(90px,11vw,180px); }
.section--tight{ padding-block:clamp(70px,9vw,140px); }
.bg-ivory{ background:var(--ivory); }
.bg-mist{ background:var(--mist); }
.bg-ink{ background:var(--ink); color:#fff; }
.bg-petrol{ background:var(--petrol); color:#fff; }
.bg-petrol-deep{ background:var(--petrol-deep); color:#fff; }
.section-head{ margin-bottom:clamp(48px,6vw,88px); }
.section-head--split{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.section-head--center{ text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }
.section-head--center .lede{ margin-inline:auto; }

/* ---------- social proof (avatars + stars) ---------- */
.proof{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; max-width:38ch;
}
.proof .avatars{ display:flex; flex:none; }
.proof .avatars img{
  width:38px; height:38px; border-radius:50%; object-fit:contain;
  padding:6px; background:var(--paper); border:1px solid var(--line);
  margin-left:-12px; box-shadow:0 6px 16px -10px rgba(14,33,38,.5);
}
.proof .avatars img.is-photo{ object-fit:cover; padding:0; }
.proof .avatars img:first-child{ margin-left:0; }
.proof__text{ font-size:13px; line-height:1.5; color:var(--grey); }
.proof__text strong{ display:block; color:var(--ink); font-weight:600; font-size:13.5px; }
.proof .stars{ display:block; color:var(--teal); font-size:12px; letter-spacing:.12em; margin-bottom:2px; }

/* ================= SPLIT / KENNISMAKING ================= */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,80px); align-items:center; }
.split--rev{ grid-template-columns:.95fr 1.05fr; }
.split--rev .split__media{ order:2; }
.split__media{ position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:6/7; }
.split__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.split__media:hover img{ transform:scale(1.045); }
.split__list{ display:grid; gap:16px; margin:30px 0 0; }
.split__list li{ display:flex; gap:14px; align-items:flex-start; font-size:15.5px; line-height:1.6; color:var(--grey); }
.split__list svg{ flex:none; margin-top:5px; color:var(--teal-ink); }
@media(max-width:900px){
  .split, .split--rev{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
}

/* ================= FULL-BLEED IMAGE BANDS ================= */
.bleed{ position:relative; width:100vw; margin-inline:calc(50% - 50vw); overflow:hidden; }
.bleed--tall{ height:92vh; }
.bleed--mid{ height:70vh; }
.bleed img{ width:100%; height:100%; object-fit:cover; }
.bleed__scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,10,11,.72) 0%, rgba(8,10,11,.05) 45%, rgba(8,10,11,0) 100%); }
.bleed__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(32px,5vw,64px) var(--gutter);
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;
}
.bleed__cap p{ margin:0; max-width:32ch; font-size:clamp(1.05rem,1.6vw,1.4rem); line-height:1.35; color:#fff; letter-spacing:-.01em; text-wrap:balance; }

/* ================= PILLARS ================= */
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light); border-radius:var(--radius); overflow:hidden; }
.pillar{ padding:clamp(28px,2.8vw,36px) clamp(22px,2.4vw,30px); background:var(--ink); }
.pillar__icon{ display:flex; color:var(--teal-ink); }
.pillar h3{ margin:20px 0 0; font-size:17px; }
.pillar p{ margin:12px 0 0; font-size:14.5px; line-height:1.6; color:var(--grey); }
.on-dark .proof__text{ color:rgba(255,255,255,.7); }
.on-dark .proof__text strong{ color:#fff; }
.on-dark .proof .stars{ color:var(--teal-pale); }
.on-dark .proof .avatars img{ border-color:var(--line-light); }
.on-dark .pillar{ background:var(--ink-soft); }
.on-dark .pillar__icon{ color:var(--teal-pale); }
.on-dark .pillar h3{ color:#fff; }
.on-dark .pillar p{ color:rgba(255,255,255,.68); }
@media(max-width:900px){ .pillars{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .pillars{ grid-template-columns:1fr; } }

/* ================= SCROLLABLE STRIP (merken / apparatuur) — stays inside the container ================= */
.strip-row{ display:flex; justify-content:flex-end; gap:10px; margin:-8px 0 24px; }
.strip-arrow{
  width:38px; height:38px; border-radius:50%; flex:none;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .25s, border-color .25s, color .25s;
}
.strip-arrow:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.strip{
  display:flex; align-items:stretch; gap:0;
  overflow-x:auto; scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  cursor:grab;
}
.strip::-webkit-scrollbar{ display:none; }
.strip[data-dragging]{ cursor:grabbing; scroll-behavior:auto; user-select:none; }
.strip[data-dragging] .tile{ pointer-events:none; }
.strip > .tile{ flex:0 0 clamp(230px, 29%, 360px); display:flex; flex-direction:column; border-right:1px solid var(--line); }
.strip > .tile:first-child{ border-left:1px solid var(--line); }
.tile{ background:none; display:block; }
.tile__media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--ink); }
.tile__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); user-select:none; -webkit-user-drag:none; }
.tile:hover .tile__media img{ transform:scale(1.06); }
.tile__body{ padding:18px 20px 24px; }
.tile__body h3{ margin:0; font-size:1.05rem; letter-spacing:-.02em; color:var(--ink); }
.tile__body p{ margin:8px 0 0; font-size:13.5px; line-height:1.5; color:var(--grey); }
.tile__more{ margin-top:12px; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--teal-ink); }
.tile--cta{ background:var(--teal); border-color:var(--teal); justify-content:center; text-align:center; }
.tile--cta .tile__body{ padding:clamp(20px,2.4vw,32px); }
.tile--cta .tile__body h3{ color:#fff; }
.tile--cta .tile__body p{ color:rgba(255,255,255,.95); margin-inline:auto; max-width:26ch; }
.tile--cta .tile__more{ justify-content:center; color:#fff; }
@media(max-width:640px){ .strip > .tile{ flex-basis:74%; } }

#merken-strip, #apparatuur-strip{ border-radius:var(--radius); }
#merken-strip > .tile:first-child .tile__media, #apparatuur-strip > .tile:first-child .tile__media{ border-radius:var(--radius) 0 0 var(--radius); }
#merken-strip > .tile:last-child.tile--cta, #apparatuur-strip > .tile:last-child.tile--cta{ border-radius:0 var(--radius) var(--radius) 0; }

/* ================= TESTIMONIALS ================= */
.tst{ display:grid; gap:0; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light); border-radius:var(--radius); overflow:hidden; }
.tst__card{ background:var(--ink-soft); color:#fff; border-right:1px solid var(--line-light); display:flex; flex-direction:column; }
.tst__card:first-child{ border-left:1px solid var(--line-light); }
.tst__media{ aspect-ratio:5/4; overflow:hidden; }
.tst__media img{ width:100%; height:100%; object-fit:cover; }
.tst__body{ padding:clamp(24px,2.6vw,36px); display:flex; flex-direction:column; flex:1; }
.stars{ color:var(--teal); letter-spacing:.14em; font-size:14px; }
.tst__quote{ margin:16px 0 0; font-size:16.5px; line-height:1.6; flex:1; }
.tst__quote .more{ display:none; }
.tst__card[data-open] .tst__quote .more{ display:inline; }
.tst__toggle{ margin-top:14px; align-self:flex-start; background:none; border:none; padding:0; font-size:13.5px; font-weight:600; color:var(--teal-pale); cursor:pointer; border-bottom:1px solid var(--line-light); }
.tst__meta{ margin-top:22px; display:flex; align-items:center; gap:14px; }
.tst__logo{ height:28px; width:auto; max-width:120px; object-fit:contain; }
.tst__meta div strong{ display:block; font-size:14px; color:#fff; }
.tst__meta div span{ font-size:12.5px; color:rgba(255,255,255,.6); }
@media(max-width:900px){
  .tst{ grid-template-columns:1fr; }
  .tst__card{ border-right:none; border-bottom:1px solid var(--line-light); }
  .tst__card:first-child{ border-left:none; }
  .tst__card:last-child{ border-bottom:none; }
}

/* ================= WORD PARTNER (dark, big) ================= */
.wp{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,90px); align-items:center; }
.wp__benefits{ display:grid; gap:14px; margin:28px 0 0; }
.wp__benefits li{ display:flex; gap:12px; align-items:center; font-size:15px; color:rgba(255,255,255,.85); }
.wp__benefits svg{ color:var(--teal-pale); flex:none; }
.wp__panel{ margin:0; background:var(--ink-soft); border:1px solid var(--line-light); border-radius:var(--radius); padding:clamp(28px,3vw,44px); }
.wp__panel blockquote{ margin:20px 0 0; font-size:clamp(1rem,1.2vw,1.15rem); line-height:1.55; letter-spacing:-.01em; }
.wp__attrib{ margin-top:26px; display:flex; align-items:center; gap:14px; }
.wp__attrib img{ height:20px; width:auto; background:#fff; padding:8px 12px; border-radius:4px; }
.wp__attrib strong{ display:block; font-size:14px; }
.wp__attrib span span{ font-size:12.5px; color:rgba(255,255,255,.6); }
@media(max-width:900px){ .wp{ grid-template-columns:1fr; } }

/* ================= AGENDA ================= */
.agenda{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:center; }
.agenda__row{ display:grid; grid-template-columns:110px 1fr auto; gap:24px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line); }
.agenda__row:first-of-type{ border-top:1px solid var(--line); }
.agenda__date{ display:flex; flex-direction:column; line-height:1; }
.agenda__date b{ font-size:26px; font-weight:600; }
.agenda__date span{ font-size:12px; color:var(--grey); margin-top:4px; text-transform:uppercase; letter-spacing:.08em; }
.agenda__row h4{ font-size:18px; }
.agenda__row p{ margin:6px 0 0; font-size:13.5px; color:var(--grey); }
.agenda__cta{ font-size:13.5px; font-weight:600; color:var(--teal-ink); white-space:nowrap; }
.agenda__note{ margin-top:28px; padding:20px 24px; background:var(--mist); border-radius:var(--radius-sm); font-size:14px; line-height:1.6; color:var(--grey); }
.agenda__media{ overflow:hidden; border-radius:var(--radius); }
.agenda__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
@media(max-width:900px){ .agenda{ grid-template-columns:1fr; } .agenda__row{ grid-template-columns:70px 1fr; } .agenda__cta{ display:none; } }

/* ================= NEWS ================= */
.news{ display:grid; gap:0; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light); border-radius:var(--radius); overflow:hidden; }
.news__card{ background:#12474F; color:#fff; border-right:1px solid var(--line-light); display:flex; flex-direction:column; }
.news__card:first-child{ border-left:1px solid var(--line-light); }
.news__media{ aspect-ratio:16/10; overflow:hidden; }
.news__media--contain{ background:var(--ink); display:flex; align-items:center; justify-content:center; }
.news__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.news__media--contain img{ object-fit:cover; }
.news__card:hover .news__media img{ transform:scale(1.06); }
.news__card time{ display:block; margin-top:18px; padding:0 20px; font-size:12px; color:rgba(255,255,255,.6); letter-spacing:.04em; }
.news__card h3{ margin:8px 0 0; padding:0 20px; font-size:19px; line-height:1.3; }
.news__card p{ margin:8px 0 20px; padding:0 20px; font-size:14px; line-height:1.6; color:rgba(255,255,255,.75); flex:1; }
@media(max-width:900px){
  .news{ grid-template-columns:1fr; }
  .news__card{ border-right:none; border-bottom:1px solid var(--line-light); }
  .news__card:first-child{ border-left:none; }
  .news__card:last-child{ border-bottom:none; }
}

/* ================= PERS ================= */
.pers{ display:grid; gap:0; grid-template-columns:1.4fr 1fr 1fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.pers__card{ background:var(--paper); padding:clamp(28px,3vw,40px); display:flex; flex-direction:column; border-right:1px solid var(--line); }
.pers__card:first-child{ border-left:1px solid var(--line); }
.pers__card--feature{ background:var(--petrol); border-color:var(--petrol); color:#fff; }
.pers__outlet{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); }
.pers__card--feature .pers__outlet{ color:#fff; }
.pers__card h3{ margin:16px 0 0; font-size:clamp(1rem,1.1vw,1.15rem); line-height:1.35; }
.pers__card p{ margin:14px 0 0; font-size:14.5px; line-height:1.6; color:var(--grey); flex:1; }
.pers__card--feature p{ color:rgba(255,255,255,.82); }
.pers__read{ margin-top:20px; display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; }
@media(max-width:900px){
  .pers{ grid-template-columns:1fr; }
  .pers__card{ border-right:none; border-bottom:1px solid var(--line); }
  .pers__card:first-child{ border-left:none; }
  .pers__card:last-child{ border-bottom:none; }
}

/* ================= TEAM ================= */
#team-strip{ border-radius:var(--radius); }
.team{ display:flex; gap:0; }
.team__card{
  flex:0 0 clamp(190px,18vw,230px); margin:0; display:flex; flex-direction:column;
  background:var(--paper); border-right:1px solid var(--line); overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.team__card:first-child{ border-left:1px solid var(--line); border-radius:var(--radius) 0 0 var(--radius); }
.team__card:last-child{ border-radius:0 var(--radius) var(--radius) 0; }
.team__card:hover{ transform:translateY(-5px); box-shadow:0 20px 36px -22px rgba(14,18,19,.28); }
.team__media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--ink); }
.team__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.55); transition:transform .7s var(--ease), filter .5s; user-select:none; -webkit-user-drag:none; }
.team__card:hover .team__media img{ transform:scale(1.07); filter:grayscale(0); }
.team__card figcaption{ padding:16px 18px 20px; }
.team__card figcaption b{ display:block; font-size:15px; letter-spacing:-.01em; }
.team__card figcaption span{ display:inline-block; margin-top:5px; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:var(--teal-ink); }
@media(max-width:560px){ .team__card{ flex-basis:44vw; } }

/* ================= CLOSING CTA ================= */
.closing{ text-align:center; padding-block:clamp(100px,14vw,200px); }
.closing h2{ font-size:clamp(1.8rem,3.6vw,3rem); line-height:1.1; }
.closing .lede{ margin-inline:auto; margin-top:24px; }
.closing .btn-row{ justify-content:center; margin-top:44px; }
.closing__details{ margin-top:64px; display:flex; justify-content:center; gap:clamp(24px,5vw,64px); flex-wrap:wrap; font-size:14.5px; }
.closing__details .k{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:6px; }

/* ================= FOOTER ================= */
.footer{ background:var(--ink); color:rgba(255,255,255,.7); padding-top:clamp(56px,7vw,90px); }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; padding-bottom:56px; border-bottom:1px solid var(--line-light); }
.footer__brand img{ height:34px; }
.footer__brand p{ margin:18px 0 0; max-width:30ch; font-size:14px; line-height:1.6; }
.footer__social{ display:flex; gap:14px; margin-top:24px; }
.footer__social a{ width:36px; height:36px; border:1px solid var(--line-light); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .25s,border-color .25s; }
.footer__social a:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.footer h5{ margin:0 0 18px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); font-weight:600; }
.footer ul{ display:grid; gap:12px; }
.footer a:hover{ color:#fff; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; padding-block:28px; font-size:12.5px; flex-wrap:wrap; gap:12px; }
.footer__bottom ul{ display:flex; gap:22px; }
@media(max-width:820px){ .footer__top{ grid-template-columns:1fr 1fr; } }

/* ================= REVEAL ================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal[data-in]{ opacity:1; transform:none; }

/* ================= UTIL ================= */
.mt-lg{ margin-top:clamp(56px,7vw,96px); }
@media(max-width:640px){
  .facts__grid{ display:block; }
}

/* ============================================================
   Aanpassingen en aanvullingen
   ============================================================ */
html, body { min-height: 100%; overflow-x: hidden; }
.hero--brand .hero__bg { object-position: center 58%; transform: none; }
.hero--brand .hero__scrim { background: linear-gradient(0deg, rgba(8,10,11,.84) 0%, rgba(8,10,11,.42) 42%, rgba(8,10,11,.14) 100%); }
.hero__brands { margin-top: clamp(40px,6vh,64px); padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22); display: flex; flex-wrap: wrap; gap: 8px 30px; font-size: 13px; letter-spacing: .02em; color: rgba(255,255,255,.72); }
.hero__brands b { font-weight: 600; color: #fff; }
.hero--brand .hero__brands { position:relative; }
.hero--brand .hero__scroll { position:absolute; right:0; top:auto; bottom:calc(100% + 26px); height:96px; overflow:hidden; background:none; border:none; cursor:pointer; font-family:inherit; padding:0; }
.hero--brand .hero__scroll::after { animation: scrollfill 2.6s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes scrollfill { 0% { transform:scaleY(0); transform-origin:top; opacity:0; } 15% { opacity:1; } 55% { transform:scaleY(1); transform-origin:top; opacity:1; } 55.01% { transform-origin:bottom; } 100% { transform:scaleY(0); transform-origin:bottom; opacity:.4; } }
@media (max-width: 900px) { .hero--brand .hero__scroll { display:none; } }
@media (prefers-reduced-motion: reduce) { .hero--brand .hero__scroll::after { animation:none; transform:none; } }
.wp__head { display:flex; align-items:flex-start; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom: clamp(32px,4vw,56px); }
.wp__head .proof { margin-top:6px; }
.pillars--light { background: var(--line); border-color: var(--line); }
.pillars--light .pillar { background: var(--paper); }
.pillars--light .pillar__icon { color: var(--teal-ink); }
.pillars--light .pillar h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink); }
.pillars--light .pillar p { font-size: 15px; color: var(--ink); }
.section--compact { padding-block: clamp(64px,8vw,120px); }
.lang { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; letter-spacing:.06em; margin-right:6px; }
.lang a { opacity:.55; transition:opacity .25s; } .lang a:hover { opacity:1; }
.lang a[aria-current] { opacity:1; border-bottom:1px solid currentColor; padding-bottom:1px; }
.lang i { font-style:normal; opacity:.4; }
.section-head--compact { margin-bottom: clamp(36px,4.5vw,64px); }
@media (max-width: 700px) {
  .hero--brand { height: auto; min-height: 88svh; }
  .hero--brand .hero__bg { object-position: 44% 60%; }
}

/* ============================================================
   Componenten (voorheen inline styles)
   ============================================================ */
.tile__img--focus-top{ object-position:50% 30%; }
.section-head__text--narrow{ max-width:40ch; }
.section-head--spaced{ margin-top:clamp(64px,8vw,110px); }
.section-more{ margin-top:32px; }
.strip-row--flush{ margin:0; }

.wp__title{ max-width:none; }
.wp .wp__lede{ margin-top:0; color:rgba(255,255,255,.78); }
.wp__benefits strong{ font-weight:600; color:#fff; }
.wp__panel .wp__panel-title{ font-size:1.35rem; letter-spacing:-.02em; }
.wp__panel .wp__panel-text{ margin:14px 0 0; font-size:15px; line-height:1.65; color:rgba(255,255,255,.78); }
.wp__panel .wp__panel-actions{ margin-top:28px; }

.agenda__title{ margin-bottom:clamp(28px,3vw,40px); }
.agenda__more{ padding-top:28px; }
.closing.closing--contact{ padding-block:clamp(80px,10vw,140px); }

/* Menu-knop: open/gesloten toestand via aria-expanded */
.menu-btn[aria-expanded="true"] .menu-btn__label-open{ display:none; }
.menu-btn[aria-expanded="true"] .menu-btn__label-close{ display:inline; }
.menu-btn[aria-expanded="true"] .menu-btn__box span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__box span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] .menu-btn__box span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   Merkenpagina
   ============================================================ */
.hero--page{ min-height:78svh; height:auto; }
.hero--page .hero__inner{ padding-top:150px; }
.hero__brands a{ color:inherit; border-bottom:1px solid transparent; transition:color .25s, border-color .25s; }
.hero__brands a:hover{ color:#fff; border-color:rgba(255,255,255,.6); }
.nav-inline a[aria-current="page"]::after{ right:0; }
#hydropeptide, #emotion-skincare, #dr-spiller, #manage-your-skin, #the-skin-concept{ scroll-margin-top:96px; }

/* uitgelicht merk */
.brand-feature{ display:grid; grid-template-columns:1.05fr .95fr; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); }
.brand-feature__media{ position:relative; min-height:560px; background:var(--ink); overflow:hidden; }
.brand-feature__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.brand-feature:hover .brand-feature__media img{ transform:scale(1.04); }
.brand-feature__body{ padding:clamp(28px,4.5vw,72px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.brand-feature__body .lede{ margin:18px 0 0; }
.brand-list{ display:grid; gap:14px; margin:28px 0 0; }
.brand-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.55; }
.brand-list svg{ flex:none; margin-top:4px; color:var(--teal-ink); }
.brand-quote{ margin:32px 0; padding:22px 0 0; border-top:1px solid var(--line); }
.brand-quote p{ margin:0; font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.55; letter-spacing:-.01em; }
.brand-quote footer{ margin-top:12px; font-size:13px; color:var(--grey); }
.brand-quote footer strong{ color:var(--ink); font-weight:600; }

/* twee merken naast elkaar */
.brand-duo{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); }
.brand-card{ display:flex; flex-direction:column; }
.brand-card + .brand-card{ border-left:1px solid var(--line); }
.brand-card__media{ aspect-ratio:16/11; overflow:hidden; background:var(--ink); }
.brand-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.brand-card:hover .brand-card__media img{ transform:scale(1.05); }
.brand-card__body{ padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; align-items:flex-start; flex:1; }
.brand-card__body h3{ font-size:clamp(1.15rem,1.5vw,1.4rem); }
.brand-card__body p{ margin:12px 0 24px; font-size:15px; line-height:1.65; color:var(--grey); flex:1; max-width:46ch; }

/* overige merken als rijen */
.brand-rows{ border-top:1px solid var(--line); }
.brand-row{ display:grid; grid-template-columns:clamp(140px,18vw,240px) 1fr auto; gap:clamp(20px,3vw,44px); align-items:center; padding:24px 0; border-bottom:1px solid var(--line); }
.brand-row__media{ display:block; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-sm); background:var(--ink); }
.brand-row__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.brand-row:hover .brand-row__media img{ transform:scale(1.06); }
.brand-row__text h3{ font-size:clamp(1.15rem,1.6vw,1.5rem); }
.brand-row__text p{ margin:8px 0 0; font-size:15px; line-height:1.6; color:var(--grey); max-width:52ch; }
.brand-row__cta{ font-size:13.5px; font-weight:600; color:var(--teal-ink); white-space:nowrap; }

@media(max-width:900px){
  .brand-feature{ grid-template-columns:1fr; }
  .brand-feature__media{ min-height:0; aspect-ratio:4/3; }
  .brand-duo{ grid-template-columns:1fr; }
  .brand-card + .brand-card{ border-left:none; border-top:1px solid var(--line); }
  .brand-row{ grid-template-columns:110px 1fr; }
  .brand-row__cta{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .brand-feature__media img, .brand-card__media img, .brand-row__media img{ transition:none; }
}

/* overzicht van alle merken */
.brand-index{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); }
.brand-index__item{ display:flex; flex-direction:column; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.brand-index__item:nth-child(3n){ border-right:none; }
.brand-index__item:nth-last-child(-n+3){ border-bottom:none; }
.brand-index__media{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--ink); }
.brand-index__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.brand-index__item:hover .brand-index__media img{ transform:scale(1.05); }
.brand-index__body{ display:flex; flex-direction:column; flex:1; padding:clamp(22px,2.4vw,32px); }
.brand-index__body h3{ font-size:clamp(1.15rem,1.5vw,1.35rem); letter-spacing:-.02em; }
.brand-index__body p{ margin:12px 0 0; font-size:15px; line-height:1.65; color:var(--grey); }
.brand-index__body p + p{ flex:1; }
.brand-index__body .tile__more{ margin-top:20px; }
.brand-index__item--cta{ background:var(--teal); justify-content:center; text-align:center; }
.brand-index__item--cta .brand-index__body{ flex:0 1 auto; align-items:center; }
.brand-index__item--cta h3{ color:#fff; }
.brand-index__item--cta p{ color:rgba(255,255,255,.95); max-width:28ch; flex:none; }
.brand-index__item--cta .tile__more{ color:#fff; }
@media(max-width:1000px){
  .brand-index{ grid-template-columns:repeat(2,1fr); }
  .brand-index__item, .brand-index__item:nth-child(3n){ border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .brand-index__item:nth-child(2n){ border-right:none; }
  .brand-index__item:nth-last-child(-n+2){ border-bottom:none; }
}
@media(max-width:640px){
  .brand-index{ grid-template-columns:1fr; }
  .brand-index__item, .brand-index__item:nth-child(2n), .brand-index__item:nth-child(3n){ border-right:none; border-bottom:1px solid var(--line); }
  .brand-index__item:last-child{ border-bottom:none; }
}
@media (prefers-reduced-motion: reduce){ .brand-index__media img{ transition:none; } }

.section-head__intro{ margin:18px 0 0; max-width:64ch; }

/* merkdetailpagina */
.hero__back{ display:inline-flex; align-items:center; gap:8px; margin-bottom:22px; font-size:13px; font-weight:600; color:rgba(255,255,255,.8); border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:3px; transition:color .25s, border-color .25s; }
.hero__back:hover{ color:#fff; border-color:#fff; }
.tst.tst--two{ grid-template-columns:repeat(2,1fr); }
.brand-feature__body .h2{ max-width:20ch; }
.brand-list strong{ font-weight:600; }
@media(max-width:900px){
  .tst.tst--two{ grid-template-columns:1fr; }
}

/* slider (uitgelicht) */
.brand-slider{ border-radius:var(--radius); scroll-snap-type:x mandatory; background:var(--paper); }
.strip > .brand-slide{ flex:0 0 clamp(280px,46%,620px); display:flex; flex-direction:column; border-right:1px solid var(--line); scroll-snap-align:start; }
.strip > .brand-slide:first-child{ border-left:1px solid var(--line); }
.brand-slide__media{ aspect-ratio:16/11; overflow:hidden; background:var(--ink); }
.brand-slide__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); user-select:none; -webkit-user-drag:none; }
.brand-slide:hover .brand-slide__media img{ transform:scale(1.05); }
.brand-slide__media--zoom img{ scale:1.7; transform-origin:78% 62%; }
.brand-slide__body{ padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; align-items:flex-start; flex:1; }
.brand-slide__body h3{ font-size:clamp(1.15rem,1.5vw,1.4rem); }
.brand-slide__body p{ margin:12px 0 24px; font-size:15px; line-height:1.65; color:var(--grey); flex:1; max-width:46ch; }
.strip > .brand-slide--cta{ background:var(--teal); border-color:var(--teal); justify-content:center; text-align:center; }
.brand-slide--cta .brand-slide__body{ align-items:center; justify-content:center; flex:1; }
.brand-slide--cta h3{ color:#fff; }
.brand-slide--cta p{ color:rgba(255,255,255,.78); flex:none; margin-bottom:20px; max-width:28ch; }
.brand-slide--cta .tile__more{ color:#fff; margin-top:0; }
@media(max-width:640px){ .strip > .brand-slide{ flex-basis:82%; } }
@media (prefers-reduced-motion: reduce){ .brand-slide__media img{ transition:none; } .brand-slider{ scroll-behavior:auto; } }

/* HydroPeptide: extra secties */
.hp-intro .h2{ max-width:26ch; }
.hp-wide{ margin-top:clamp(36px,4.5vw,64px); border-radius:var(--radius); overflow:hidden; aspect-ratio:21/10; background:var(--ivory); }
.hp-wide img{ width:100%; height:100%; object-fit:cover; }

.hp-tabs__list{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:clamp(28px,3.5vw,48px); overflow-x:auto; scrollbar-width:none; }
.hp-tabs__list::-webkit-scrollbar{ display:none; }
.hp-tabs__list [role="tab"]{ flex:none; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; padding:14px 20px; font-size:14.5px; font-weight:600; color:var(--grey); cursor:pointer; transition:color .25s, border-color .25s; }
.hp-tabs__list [role="tab"]:hover{ color:var(--ink); }
.hp-tabs__list [role="tab"][aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--teal-ink); }
.hp-tabs__list [role="tab"]:focus-visible{ outline:2px solid var(--teal-ink); outline-offset:-2px; border-radius:var(--radius-sm); }
.hp-panel{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px); align-items:center; }
.hp-panel[hidden]{ display:none; }
.hp-panel__text h3{ font-size:clamp(1.2rem,1.6vw,1.5rem); }
.hp-panel__text p{ margin:16px 0 0; font-size:16px; line-height:1.75; color:var(--grey); max-width:52ch; }
.hp-panel__media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:var(--ivory); }
.hp-panel__media img{ width:100%; height:100%; object-fit:cover; }

.hp-note{ margin-top:32px; padding-top:24px; border-top:1px solid var(--line); }
.hp-note h3{ font-size:1.05rem; }
.hp-note p{ margin:10px 0 0; font-size:14.5px; line-height:1.65; color:var(--grey); }

.pillars.pillars--three{ grid-template-columns:repeat(3,1fr); }
.pillars--three .pillar h3{ margin-top:0; font-size:1.1rem; }

.hp-statement{ max-width:760px; margin-inline:auto; text-align:center; }
.hp-statement .h2{ font-size:clamp(1.6rem,2.8vw,2.5rem); }
.hp-statement .lede{ max-width:52ch; margin:22px auto 0; font-size:clamp(1rem,1.2vw,1.15rem); }

.section-head--center .section-head__intro{ margin-inline:auto; }
.closing .closing__lede{ max-width:58ch; }

.hp-video{ position:relative; max-width:1000px; margin-inline:auto; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:linear-gradient(135deg,var(--petrol-deep) 0%,var(--petrol) 55%,#7cbdc9 100%); }
.hp-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.hp-video__play{ position:absolute; inset:0; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:none; border:none; color:#fff; cursor:pointer; }
.hp-video__icon{ width:76px; height:76px; border-radius:50%; background:#fff; color:var(--petrol-deep); display:flex; align-items:center; justify-content:center; padding-left:4px; transition:transform .4s var(--ease), background .3s; }
.hp-video__play:hover .hp-video__icon{ transform:scale(1.08); background:var(--teal-pale); }
.hp-video__play:focus-visible{ outline:2px solid #fff; outline-offset:-6px; }
.hp-video__label{ font-size:14px; font-weight:600; letter-spacing:-.01em; }

@media(max-width:900px){
  .hp-panel{ grid-template-columns:1fr; }
  .hp-panel__media{ order:-1; }
  .pillars.pillars--three{ grid-template-columns:1fr 1fr; }
}
@media(max-width:560px){
  .pillars.pillars--three{ grid-template-columns:1fr; }
  .hp-wide{ aspect-ratio:4/3; }
  .hp-video__icon{ width:64px; height:64px; }
}
@media (prefers-reduced-motion: reduce){ .hp-video__icon{ transition:none; } }
.on-dark .section-head__intro{ color:rgba(255,255,255,.78); }

/* randen rond de tabs, video en statement */
.hp-tabs{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); }
.hp-tabs__list{ margin-bottom:0; padding:0 clamp(12px,2vw,24px); background:var(--paper); }
.hp-panel{ gap:0; align-items:stretch; }
.hp-panel__text{ padding:clamp(28px,4vw,64px); display:flex; flex-direction:column; justify-content:center; }
.hp-panel__media{ aspect-ratio:auto; min-height:420px; border-radius:0; border-left:1px solid var(--line); position:relative; }
.hp-panel__media img{ position:absolute; inset:0; }
.hp-video{ border:1px solid var(--line); }
.hp-statement{ max-width:860px; padding:clamp(32px,5vw,72px) clamp(24px,5vw,72px); border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); }
@media(max-width:900px){
  .hp-panel__media{ order:-1; min-height:0; aspect-ratio:4/3; border-left:none; border-bottom:1px solid var(--line); }
}

/* voor wie geschikt */
.hp-fit{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); align-items:center; }
.hp-fit__body{ display:flex; flex-direction:column; align-items:flex-start; }
.hp-fit__lede{ margin:20px 0 0; max-width:44ch; font-size:clamp(1rem,1.15vw,1.1rem); line-height:1.65; color:var(--grey); }
.hp-fit__list{ display:grid; gap:14px; margin:32px 0 0; }
.hp-fit__list li{ display:flex; gap:14px; align-items:center; font-size:15.5px; font-weight:600; }
.hp-fit__list svg{ flex:none; color:var(--teal-ink); }
.hp-fit__actions{ margin-top:36px; }
.hp-fit__media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:5/4; background:var(--ivory); }
.hp-fit__media img{ width:100%; height:100%; object-fit:cover; object-position:60% center; }
@media(max-width:900px){
  .hp-fit{ grid-template-columns:1fr; }
  .hp-fit__media{ order:-1; aspect-ratio:16/10; }
}

.hp-fit--rev .hp-fit__media{ order:-1; }
.hp-fit__body .hp-note{ margin-top:36px; padding-top:0; border-top:none; }
.hp-fit__body .hp-note p{ max-width:46ch; }
@media(max-width:900px){ .hp-fit--rev .hp-fit__media{ order:-1; } }

/* apparatuurpagina */
.hero--apparatuur .hero__bg{ object-position:center 45%; }
.hero--apparatuur .hero__title{ max-width:18ch; }
.brand-index.brand-index--two{ grid-template-columns:repeat(2,1fr); }
.brand-index--two .brand-index__media{ aspect-ratio:16/10; }
.brand-index--two .brand-index__item, .brand-index--two .brand-index__item:nth-child(3n){ border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.brand-index--two .brand-index__item:nth-child(2n){ border-right:none; }
.brand-index--two .brand-index__item:nth-last-child(-n+2){ border-bottom:none; }
@media(max-width:700px){
  .brand-index.brand-index--two{ grid-template-columns:1fr; }
  .brand-index--two .brand-index__item, .brand-index--two .brand-index__item:nth-child(2n), .brand-index--two .brand-index__item:nth-child(3n){ border-right:none; border-bottom:1px solid var(--line); }
  .brand-index--two .brand-index__item:last-child{ border-bottom:none; }
}

/* T-AWAY2: lichte hero met productfoto */
.tw-hero{ background:var(--paper); padding:clamp(120px,14vw,170px) 0 clamp(48px,6vw,88px); }
.tw-hero__inner{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(24px,5vw,80px); align-items:center; }
.tw-hero__text .display{ font-size:clamp(2.4rem,5vw,4.4rem); }
.tw-hero__lede{ margin:20px 0 0; max-width:46ch; font-size:clamp(1rem,1.15vw,1.1rem); line-height:1.65; color:var(--grey); }
.tw-hero__text .btn-row{ margin-top:36px; }
.tw-hero__media img{ width:100%; height:auto; mix-blend-mode:multiply; }
.hero__back--dark{ color:var(--grey); border-bottom-color:var(--line); }
.hero__back--dark:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.hp-panel.hp-panel--single{ grid-template-columns:1fr; }
.hp-panel--single .hp-panel__text{ padding:clamp(28px,4vw,64px); }
.hp-panel--single .hp-panel__text p{ max-width:64ch; }
.hp-fit__media--product{ background:#fff; }
.hp-fit__media--product img{ object-fit:contain; mix-blend-mode:multiply; }
.hp-fit__media--zoom img{ object-fit:cover; scale:1.9; transform-origin:52% 40%; }
@media(max-width:900px){
  .tw-hero__inner{ grid-template-columns:1fr; }
  .tw-hero__media{ order:-1; }
}
#commercieel .hp-intro .h2{ max-width:34ch; }

/* trainingen */
.hero--trainingen .hero__bg{ object-position:center 40%; transform:none; }
.hero--trainingen .hero__title{ max-width:16ch; }
.hero--trainingen .hero__lede{ max-width:52ch; }
.tr-filter{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 20px; margin-bottom:clamp(24px,3vw,40px); }
.tr-filter__group{ display:flex; flex-direction:column; gap:8px; min-width:200px; }
.tr-filter label{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--grey); }
.tr-filter select{ appearance:none; -webkit-appearance:none; font:inherit; font-size:14.5px; font-weight:500; color:var(--ink); background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%230E1213' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center; border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 42px 13px 16px; cursor:pointer; transition:border-color .25s; }
.tr-filter select:hover{ border-color:var(--ink); }
.tr-filter select:focus-visible{ outline:2px solid var(--teal-ink); outline-offset:2px; }
.tr-filter__count{ margin:0 0 0 auto; font-size:14px; color:var(--grey); padding-bottom:13px; }

.tr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tr-card{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.tr-card[hidden]{ display:none; }
.tr-card:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -26px rgba(14,18,19,.32); }
.tr-card__media{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--ivory); }
.tr-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.tr-card:hover .tr-card__media img{ transform:scale(1.05); }
.tr-card__body{ display:flex; flex-direction:column; align-items:flex-start; flex:1; padding:22px 24px 26px; }
.tr-card__meta{ display:flex; flex-wrap:wrap; gap:4px 16px; margin:0; font-size:13px; color:var(--grey); }
.tr-card__level{ margin-top:14px; padding:4px 10px; border-radius:var(--radius-sm); background:var(--mist); color:var(--teal-ink); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.tr-card__body h3{ margin-top:14px; font-size:1.2rem; line-height:1.25; }
.tr-card__sub{ margin:8px 0 0; font-size:14.5px; color:var(--grey); flex:1; }
.tr-card__body h3:last-of-type{ flex:0; }
.tr-card__body .link{ margin-top:22px; }
.tr-card__sub + .link{ margin-top:22px; }
.tr-card__body h3 + .link{ margin-top:auto; padding-top:0; }
.tr-empty{ margin:0; padding:48px 0; text-align:center; color:var(--grey); }
.tr-empty[hidden], .tr-more[hidden]{ display:none; }
.tr-reset{ background:none; border:none; padding:0; font:inherit; font-weight:600; color:var(--teal-ink); border-bottom:1px solid var(--line); cursor:pointer; }
.tr-more{ display:flex; justify-content:center; margin-top:clamp(32px,4vw,56px); }
@media(max-width:1000px){ .tr-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){
  .tr-grid{ grid-template-columns:1fr; }
  .tr-filter__group{ flex:1 1 100%; }
  .tr-filter__count{ margin-left:0; padding-bottom:0; }
}
@media (prefers-reduced-motion: reduce){ .tr-card, .tr-card__media img{ transition:none; } }
.hp-fit__lede--next{ margin-top:16px; }

/* partnerpagina */
.pt-hero__media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:5/4; }
.pt-hero__media img{ width:100%; height:100%; object-fit:cover; }
.pt-hero .tw-hero__inner{ grid-template-columns:1.1fr .9fr; }
.pt-hero .tw-hero__text .display{ font-size:clamp(2rem,3.8vw,3.4rem); }
.pt-hero .tw-hero__lede{ max-width:52ch; }
@media(max-width:900px){ .pt-hero .tw-hero__inner{ grid-template-columns:1fr; } .pt-hero__media{ order:-1; aspect-ratio:16/10; } }

.tst .tst__quote br{ display:block; content:""; }
.tst__card[data-open] .tst__quote .more br + br{ display:block; }

.vid-strip{ border:none; gap:24px; cursor:auto; scroll-snap-type:x mandatory; }
.vid-strip > .vid-item{ flex:0 0 clamp(280px,46%,600px); scroll-snap-align:start; }
.vid-frame.hp-video{ max-width:none; margin:0; }
.vid-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
.vid-frame .hp-video__play{ background:linear-gradient(0deg, rgba(8,10,11,.42) 0%, rgba(8,10,11,.08) 55%); }
.vid-title{ margin:14px 0 0; font-size:15px; line-height:1.5; font-weight:600; letter-spacing:-.01em; max-width:40ch; }
@media(max-width:640px){ .vid-strip > .vid-item{ flex-basis:82%; } }

.pt-contact{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,6vw,96px); align-items:start; }
.pt-contact__details{ margin:36px 0 0; display:grid; gap:18px; }
.pt-contact__details dt{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:4px; }
.pt-contact__details dd{ margin:0; font-size:15.5px; }
.pt-contact__details a{ border-bottom:1px solid var(--line); transition:border-color .25s; }
.pt-contact__details a:hover{ border-color:var(--ink); }
.pt-form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.pt-field{ display:flex; flex-direction:column; gap:8px; }
.pt-field--full{ grid-column:1 / -1; }
.pt-field label{ font-size:13px; font-weight:600; color:var(--ink); }
.pt-field input, .pt-field textarea{ font:inherit; font-size:15px; color:var(--ink); background:var(--paper); border:1px solid rgba(14,18,19,.32); border-radius:var(--radius-sm); padding:13px 16px; width:100%; transition:border-color .25s, box-shadow .25s; }
.pt-field textarea{ resize:vertical; min-height:130px; }
.pt-field input:hover, .pt-field textarea:hover{ border-color:var(--ink); }
.pt-field input:focus-visible, .pt-field textarea:focus-visible{ outline:none; border-color:var(--teal-ink); box-shadow:0 0 0 3px rgba(95,170,184,.3); }
.pt-field input[aria-invalid="true"]{ border-color:#a4361f; }
.pt-form__error{ margin:18px 0 0; font-size:14px; color:#8a2a16; }
.pt-form .btn{ margin-top:28px; }
@media(max-width:900px){ .pt-contact{ grid-template-columns:1fr; } }
@media(max-width:560px){ .pt-form__grid{ grid-template-columns:1fr; } }

/* pers en nieuws */
.hero--pers .hero__bg{ object-position:center 40%; transform:none; }
.hero--pers .hero__title{ max-width:14ch; }
.hero--pers .hero__lede{ max-width:46ch; }
.news__more{ display:inline-block; margin:0 20px 24px; font-size:13.5px; font-weight:600; color:var(--teal-pale); }

/* over ons */
.oo-hero .pt-hero__media{ aspect-ratio:10/7; }
.oo-hero .tw-hero__inner{ grid-template-columns:1fr 1.1fr; }
.oo-hero .tw-hero__lede{ max-width:50ch; }
.hp-statement.hp-statement--plain{ border:none; background:none; padding:0; max-width:760px; }
.oo-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:32px 0 0; }
.oo-chips li{ padding:9px 16px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:14px; font-weight:600; background:var(--paper); }
.pillars.pillars--three-only{ grid-template-columns:repeat(3,1fr); }
.pillars--three-only .pillar h3{ margin-top:0; font-size:1.1rem; }
.pillars--light.pillars--three-only .pillar__icon + h3{ margin-top:20px; font-size:12px; }
.pillar__link{ margin-top:18px; }
@media(max-width:900px){ .pillars.pillars--three-only{ grid-template-columns:1fr; } }
.oo-versus{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,80px); max-width:820px; }
.oo-versus__col h3{ font-size:1.3rem; }
.oo-versus__col .hp-fit__list{ margin-top:18px; }
.oo-versus__col--not .hp-fit__list svg{ color:var(--grey); }
.oo-versus__col--not li{ color:var(--grey); }
@media(max-width:640px){ .oo-versus{ grid-template-columns:1fr; } }
.oo-team{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,32px) clamp(16px,2vw,28px); }
.oo-member{ margin:0; display:flex; flex-direction:column; }
.oo-member__media{ aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius); background:var(--ink); }
.oo-member__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.55); transition:transform .7s var(--ease), filter .5s; }
.oo-member:hover .oo-member__media img{ transform:scale(1.05); filter:grayscale(0); }
.oo-member figcaption{ padding:16px 2px 0; display:flex; flex-direction:column; align-items:flex-start; }
.oo-member figcaption b{ font-size:1.1rem; letter-spacing:-.01em; }
.oo-member__role{ margin-top:5px; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:var(--teal-ink); }
.oo-member figcaption p{ margin:12px 0 0; font-size:14px; line-height:1.6; color:var(--grey); }
.oo-member figcaption em{ margin-top:10px; font-size:13.5px; font-style:normal; font-weight:600; color:var(--ink); }
@media(max-width:1100px){ .oo-team{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:800px){ .oo-team{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .oo-team{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .oo-member__media img{ transition:none; } }

/* over ons: schermbrede teamfoto als hero */
.hero--overons .hero__bg{ object-position:center 40%; transform:none; }
.hero--overons .hero__title{ max-width:14ch; }
.hero--overons .hero__lede{ max-width:46ch; }
.hp-statement .hp-statement__second{ margin-top:16px; }

/* over ons: tekst links, vier begrippen als grotere kaarten rechts */
.oo-quality{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); align-items:center; }
.oo-quality__text .h2{ max-width:20ch; }
.oo-quality__cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.oo-quality__cards li{ position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:36px; min-height:250px; padding:clamp(22px,2.4vw,32px); color:#fff; background:var(--ink); border-radius:var(--radius); transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.oo-quality__cards li::before{ content:""; position:absolute; inset:0; z-index:-2; background:var(--bg) center/cover no-repeat; transition:transform 1s var(--ease); }
.oo-quality__cards li::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(8,10,11,.82) 0%, rgba(8,10,11,.46) 48%, rgba(8,10,11,.18) 100%); }
.oo-quality__cards li:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -28px rgba(14,18,19,.5); }
.oo-quality__cards li:hover::before{ transform:scale(1.06); }
.oo-quality__cards li:nth-child(1){ --bg:url(../img/merk-hydropeptide.jpg); }
.oo-quality__cards li:nth-child(2){ --bg:url(../img/hp-behandeling-thuis.jpg); }
.oo-quality__cards li:nth-child(3){ --bg:url(../img/hp-epigenetica.jpg); }
.oo-quality__cards li:nth-child(4){ --bg:url(../img/merk-dr-spiller.jpg); }
.oo-quality__icon{ display:none; }
.oo-quality__cards li{ justify-content:flex-end; }
.oo-quality__label{ font-size:clamp(1.05rem,1.4vw,1.3rem); font-weight:600; letter-spacing:-.02em; line-height:1.2; }
@media(max-width:900px){ .oo-quality{ grid-template-columns:1fr; } }
@media(max-width:480px){ .oo-quality__cards li{ min-height:190px; gap:24px; } }
@media (prefers-reduced-motion: reduce){ .oo-quality__cards li, .oo-quality__cards li::before{ transition:none; } }

/* over ons: wel / niet als twee grote kaarten */
.oo-versus{ max-width:none; gap:24px; }
.oo-versus .oo-versus__col{ display:flex; flex-direction:column; min-height:340px; padding:clamp(28px,4.5vw,64px); border-radius:var(--radius); background:var(--petrol); color:#fff; }
.oo-versus .oo-versus__col--not{ background:var(--mist); color:var(--ink); }
.oo-versus .oo-versus__col h3{ font-size:clamp(1.7rem,2.6vw,2.4rem); letter-spacing:-.03em; }
.oo-versus .oo-versus__col .hp-fit__list{ gap:20px; margin-top:auto; padding-top:36px; }
.oo-versus .oo-versus__col li{ font-size:clamp(1.05rem,1.4vw,1.3rem); gap:16px; }
.oo-versus .oo-versus__col svg{ width:22px; height:22px; color:#fff; }
.oo-versus .oo-versus__col--not li{ color:var(--grey); }
.oo-versus .oo-versus__col--not svg{ color:var(--grey); }
@media(max-width:640px){
  .oo-versus .oo-versus__col{ min-height:0; }
  .oo-versus .oo-versus__col .hp-fit__list{ margin-top:0; padding-top:28px; }
}

/* over ons: tekst links, wel/niet als twee kolommen rechts */
.oo-diff{ display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(32px,6vw,96px); align-items:center; }
.oo-diff__text .h2{ max-width:16ch; }
.oo-diff__text .hp-fit__lede{ max-width:46ch; }
.oo-diff__link{ margin-top:28px; }
.oo-diff .oo-versus{ gap:16px; }
.oo-diff .oo-versus .oo-versus__col{ min-height:380px; padding:clamp(22px,2.4vw,34px); }
.oo-diff .oo-versus .oo-versus__col h3{ font-size:clamp(1.5rem,2vw,1.9rem); }
.oo-diff .oo-versus .oo-versus__col li{ font-size:clamp(1rem,1.15vw,1.1rem); align-items:flex-start; gap:12px; }
.oo-diff .oo-versus .oo-versus__col svg{ width:20px; height:20px; margin-top:2px; }
.oo-diff .oo-versus .oo-versus__col li{ padding:0; }
.oo-diff .oo-versus .oo-versus__col li strong{ display:block; font-weight:600; letter-spacing:-.01em; }
.oo-diff .oo-versus .oo-versus__col li small{ display:block; margin-top:6px; font-size:14px; font-weight:400; line-height:1.55; color:rgba(255,255,255,.72); }
.oo-diff .oo-versus .oo-versus__col--not li small{ color:var(--grey); }
.oo-diff .oo-versus .oo-versus__col .hp-fit__list{ gap:22px; }
.oo-diff .oo-versus .oo-versus__col{ min-height:480px; }
@media(max-width:900px){
  .oo-diff{ grid-template-columns:1fr; }
  .oo-diff .oo-versus .oo-versus__col{ min-height:300px; }
}
@media(max-width:640px){
  .oo-diff .oo-versus{ grid-template-columns:1fr; }
  .oo-diff .oo-versus .oo-versus__col{ min-height:0; }
}

/* contactpagina */
.ct-top{ padding:clamp(120px,14vw,170px) 0 clamp(56px,7vw,110px); background:var(--paper); }
.ct-grid .display{ font-size:clamp(2.2rem,4.4vw,3.8rem); }
.ct-grid .tw-hero__lede{ margin-top:20px; }
.ct-route{ margin-top:28px; }
.ct-grid .pt-contact__details{ margin-top:40px; }
.ct-grid .pt-contact__details dd{ line-height:1.55; }

/* partners: schermbrede teamfoto als hero */
.hero--partners .hero__bg{ object-position:center 40%; transform:none; }
.hero--partners .hero__scrim{ background:linear-gradient(180deg, rgba(8,10,11,.6) 0%, rgba(8,10,11,0) 24%), linear-gradient(0deg, rgba(8,10,11,.88) 0%, rgba(8,10,11,.5) 42%, rgba(8,10,11,.24) 100%); }
.hero--partners .hero__title{ max-width:20ch; }
.hero--partners .hero__lede{ max-width:46ch; }
.section-head__intro--next{ margin-top:16px; }

/* partners: introtekst onder "Wij leveren meer dan producten" langer laten doorlopen */
.pt-samen .section-head__intro{ max-width:100ch; }

/* homepage: partnersectie, kop en tekst mogen breder */
.wp .wp__lede{ max-width:62ch; }

/* contactpagina: partnerinteresse */
.ct-partner{ margin:28px 0 0; max-width:48ch; font-size:15px; line-height:1.65; color:var(--grey); }
.ct-partner .link{ display:flex; width:fit-content; margin-top:16px; color:var(--ink); }
.pt-check{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; font-size:14.5px; line-height:1.5; color:var(--ink); }
.pt-check input{ flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--teal-ink); cursor:pointer; }
.pt-check input:focus-visible{ outline:2px solid var(--teal-ink); outline-offset:2px; }

/* homepage: tekst onder "Zullen we eens kennismaken?" breder */
.closing--home .lede{ max-width:100ch; }

/* onderaan alle pagina's: zelfde brede introtekst in het contactblok */
.closing .closing__lede{ max-width:100ch; }

/* één grootte voor alle lopende introteksten, op alle pagina's */
.lede,
.hp-fit__lede,
.tw-hero__lede,
.hp-panel__text p{ font-size:clamp(0.95rem, 1vw, 1.02rem); line-height:1.65; }

/* hero: introtekst onder de titel mag breder op alle pagina's */
.hero.hero--brand .hero__lede{ max-width:70ch; }

/* homepage: titels van de usp's onder de hero iets kleiner */
.facts__n{ font-size:clamp(1.15rem, 1.55vw, 1.5rem); }

/* kop met tekst rechts: geen extra ondermarge, zodat de tekst op gelijke hoogte met de titel staat */
.section-head--split > p.lede{ margin:0; }

/* trainingen: alinea's bij "Jouw ontwikkeling staat centraal" breder */
#over .hp-fit__lede{ max-width:none; }

/* trainingen: kaarten aan elkaar, gescheiden door dunne lijnen */
.tr-grid{ gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); }
.tr-card{ border:none; border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; margin:0 -1px -1px 0; transition:background .3s; }
.tr-card:hover{ transform:none; box-shadow:none; background:var(--ivory); }
.tr-card__body h3 + .link{ margin-top:auto; padding-top:22px; }

/* trainingen: lijnen tussen de kaarten duidelijker */
.tr-grid{ border-color:rgba(14,18,19,.28); }
.tr-card{ border-right-color:rgba(14,18,19,.28); border-bottom-color:rgba(14,18,19,.28); }

/* trainingen: lijnen links/boven per kaart, zodat ze over de foto's van de buurkaart heen liggen */
.tr-card{ border-right:none; border-bottom:none; border-left:1px solid rgba(14,18,19,.28); border-top:1px solid rgba(14,18,19,.28); margin:-1px 0 0 -1px; }

/* secties met tekst naast beeld: zelfde lettergrootte als de rest van de site, maar de tekst gebruikt de hele breedte van de kolom */
.hp-fit__lede,
.tw-hero__lede,
.hp-panel__text p{ font-size:clamp(0.95rem, 1vw, 1.02rem); line-height:1.65; }
.hp-fit__lede,
.oo-diff__text .hp-fit__lede,
.oo-quality__text .hp-fit__lede{ max-width:none; }

/* contact: hero met teamfoto */
.hero--contact .hero__bg{ object-position:center 18%; transform:none; }
.hero--contact .hero__scrim{ background:linear-gradient(0deg, rgba(8,10,11,.9) 0%, rgba(8,10,11,.55) 34%, rgba(8,10,11,.05) 62%); }
.hero--contact .hero__title{ max-width:14ch; }
.ct-grid .pt-contact__details{ margin-top:32px; }

/* homepage: sectie 'Alles om sterker te werken', partnerschap onder de titel en knop rechts */
.samen__text{ max-width:72ch; }
.samen__text .section-head__intro{ max-width:none; }

/* homepage: vertrouwd-door-partners zit nu in het kader, tussen tekst en knop */
.wp__panel .proof{ margin-top:28px; max-width:none; }
.wp__panel .wp__panel-actions{ margin-top:32px; }

/* homepage partnersectie: kop en tekst samen links, kader rechts */
.wp{ align-items:start; }
.wp .wp__title{ margin-bottom:clamp(20px,2.4vw,32px); }

/* partnerkader: minder ruimte tussen de avatars en de sterren */
.wp__panel .proof{ row-gap:16px; }
.wp__panel .proof__text{ margin:0; }

/* over ons: 'Zo werkt samenwerken', tekst links en knop rechts */
.samenwerken__text{ max-width:72ch; }
.samenwerken__text .section-head__intro{ max-width:none; }

/* over ons: team als slider, zelfde opzet als op de homepage maar met persoonlijke tekst */
.oo-slider__text{ max-width:72ch; }
.oo-slider__text .section-head__intro{ max-width:none; }
.oo-slider.team{ gap:0; }
.oo-slider .team__card{ flex:0 0 clamp(270px,24vw,330px); }
.oo-slider .team__card figcaption{ padding:18px 20px 24px; }
.oo-slider .team__card figcaption p{ margin:14px 0 0; font-size:14px; line-height:1.6; color:var(--grey); }
.oo-slider .team__card figcaption em{ display:block; margin-top:12px; font-size:13.5px; font-style:normal; font-weight:600; color:var(--ink); }
@media(max-width:560px){ .oo-slider .team__card{ flex-basis:78vw; } }

/* vacatures */
.hero--vacatures .hero__bg{ object-position:center 18%; transform:none; }
.hero--vacatures .hero__scrim{ background:linear-gradient(0deg, rgba(8,10,11,.9) 0%, rgba(8,10,11,.55) 34%, rgba(8,10,11,.05) 62%); }
.hero--vacatures .hero__title{ max-width:22ch; }

.vac-grid{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid rgba(14,18,19,.28); border-radius:var(--radius); overflow:hidden; background:var(--paper); }
.vac-card{ display:flex; flex-direction:column; align-items:flex-start; padding:clamp(24px,3vw,40px); border-left:1px solid rgba(14,18,19,.28); margin-left:-1px; }
.vac-card h3{ margin-top:14px; font-size:clamp(1.15rem,1.5vw,1.35rem); line-height:1.25; }
.vac-card h3:first-child{ margin-top:0; }
.vac-card h3 a{ transition:color .25s; }
.vac-card:hover h3 a{ color:var(--teal-ink); }
.vac-card p{ margin:14px 0 0; font-size:14.5px; line-height:1.65; color:var(--grey); flex:1; }
.vac-card .link{ margin-top:24px; }
.vac-meta{ display:flex; flex-wrap:wrap; gap:8px 10px; margin:0; }
.vac-meta li{ padding:6px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:13px; font-weight:600; background:var(--paper); }
.vac-meta--small{ margin-top:20px; }
.vac-meta--small li{ font-size:12.5px; padding:5px 10px; }
@media(max-width:1000px){ .vac-grid{ grid-template-columns:1fr; } .vac-card{ border-left:none; border-top:1px solid rgba(14,18,19,.28); margin:0; } .vac-card:first-child{ border-top:none; } }

.vac-top{ padding:clamp(120px,14vw,170px) 0 clamp(28px,4vw,48px); background:var(--paper); }
.vac-top__title{ margin-top:6px; font-size:clamp(2rem,4vw,3.4rem); max-width:24ch; }
.vac-top .vac-meta{ margin-top:28px; }
.vac-body-wrap{ padding-top:clamp(24px,3vw,40px); }
.vac-layout{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:clamp(32px,6vw,96px); align-items:start; }
.vac-article{ max-width:70ch; }
.vac-article h2{ margin:clamp(32px,4vw,52px) 0 0; font-size:clamp(1.25rem,1.7vw,1.55rem); letter-spacing:-.02em; line-height:1.2; }
.vac-article > h2:first-child{ margin-top:0; }
.vac-article p{ margin:16px 0 0; font-size:clamp(0.95rem,1vw,1.02rem); line-height:1.7; color:var(--grey); }
.vac-article h2 + p, .vac-article h2 + ul{ margin-top:16px; }
.vac-list{ margin:16px 0 0; display:grid; gap:10px; }
.vac-list li{ position:relative; padding-left:24px; font-size:clamp(0.95rem,1vw,1.02rem); line-height:1.6; color:var(--ink); }
.vac-list li::before{ content:""; position:absolute; left:0; top:12px; width:12px; height:2px; background:var(--petrol); }
.vac-aside{ position:sticky; top:96px; padding:clamp(24px,2.6vw,34px); background:var(--mist); border-radius:var(--radius); }
.vac-aside__title{ font-size:1.25rem; letter-spacing:-.02em; line-height:1.25; }
.vac-aside > p{ margin:12px 0 0; font-size:14.5px; line-height:1.6; color:var(--grey); }
.vac-aside__facts{ margin:24px 0 28px; display:grid; gap:14px; }
.vac-aside__facts dt{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:3px; }
.vac-aside__facts dd{ margin:0; font-size:15px; overflow-wrap:anywhere; }
.vac-aside__facts a{ border-bottom:1px solid var(--line); }
@media(max-width:900px){ .vac-layout{ grid-template-columns:1fr; } .vac-aside{ position:static; } }

/* Nieuws op witte achtergrond */
.news-section--light .news{ border-color:var(--line); }
.news-section--light .news__card{ border-color:var(--line); }
.news-section--light .news__empty{ color:var(--ink); }
.news-section--light .news{ gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.news-section--light .news__card{ background:#fff; color:var(--ink); border:0; border-right:1px solid var(--line); border-radius:0; }
.news-section--light .news__card:nth-child(3n){ border-right:0; }
.news-section--light .news__card:nth-child(n+4){ border-top:1px solid var(--line); }
.news-section--light .news__card:first-child{ border-left:0; }
.news-section--light .news__card time{ color:rgba(14,18,19,.55); }
.news-section--light .news__card h3{ color:var(--ink); }
.news-section--light .news__card p{ color:rgba(14,18,19,.72); }
.news-section--light .news__more{ color:var(--teal-ink); }
.news-section--light .news__media--contain{ background:var(--mist); }
@media (max-width:900px){ .news-section--light .news__card, .news-section--light .news__card:nth-child(3n){ border-right:0; border-top:0; border-bottom:1px solid var(--line); } .news-section--light .news__card:last-child{ border-bottom:0; } }

/* Pers-carrousel (logo + publicatie) en foto's in de mediastrook */
.press-strip > .press-card{ flex:0 0 clamp(270px,30%,380px); display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; color:var(--ink); }
.press-card__media{ display:block; aspect-ratio:4/3; background:var(--mist); overflow:hidden; }
.press-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.press-card:hover .press-card__media img{ transform:scale(1.05); }
.press-card__logo{ display:flex; align-items:center; height:64px; padding:0 clamp(20px,2vw,28px); border-bottom:1px solid var(--line); background:#fff; }
.press-card__logo img{ max-height:30px; max-width:70%; width:auto; object-fit:contain; }
.press-card__logo b{ font-size:15px; letter-spacing:-.01em; }
.press-card .pers__outlet{ margin:20px clamp(20px,2vw,28px) 0; }
.press-card h3{ margin:12px clamp(20px,2vw,28px) 0; font-size:clamp(1rem,1.1vw,1.15rem); line-height:1.35; }
.press-card p{ margin:12px clamp(20px,2vw,28px) 0; font-size:14.5px; line-height:1.6; color:var(--grey); flex:1; }
.press-card .pers__read{ margin:18px clamp(20px,2vw,28px) 24px; }
.vid-frame--photo{ cursor:default; }
.press-card__logo{ height:110px; border-bottom:1px solid var(--line); }
.press-card__logo img{ max-height:52px; max-width:75%; }
.press-card__logo b{ font-size:19px; }
.press-card .pers__outlet{ margin-top:24px; }

/* partners: stappenplan om partner te worden, als losse kaarten */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.step{ display:flex; flex-direction:column; padding:clamp(24px,2.4vw,32px) clamp(20px,2vw,26px); background:var(--paper); }
.step__icon{ display:flex; width:52px; height:52px; align-items:center; justify-content:center; border-radius:50%; background:var(--ivory); color:var(--teal-ink); }
.bg-ivory .step__icon{ background:#fff; }
.step__n{ display:block; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-ink); }
.step h3{ margin:8px 0 0; font-size:18px; }
.step p{ margin:12px 0 0; font-size:14.5px; line-height:1.6; color:var(--grey); }
@media (max-width:1100px){ .steps{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .steps{ grid-template-columns:1fr; } }

/* Fluent Forms in het formulierblok: zelfde look als het eigen formulier */
.pt-fluent .ff-el-group{ margin-bottom:20px; }
.pt-fluent .ff-t-container{ gap:20px; }
.pt-fluent .ff-el-input--label label{ font-size:13px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.pt-fluent .ff-el-form-control{ font:inherit; font-size:15px; color:var(--ink); background:var(--paper); border:1px solid rgba(14,18,19,.32); border-radius:var(--radius-sm); padding:13px 16px; box-shadow:none; transition:border-color .25s, box-shadow .25s; }
.pt-fluent textarea.ff-el-form-control{ min-height:130px; resize:vertical; }
.pt-fluent .ff-el-form-control:hover{ border-color:var(--ink); }
.pt-fluent .ff-el-form-control:focus{ outline:none; border-color:var(--teal-ink); box-shadow:0 0 0 3px rgba(95,170,184,.3); background:var(--paper); color:var(--ink); }
.pt-fluent .ff-btn-submit{ display:inline-flex; align-items:center; gap:10px; margin-top:8px; padding:15px 28px; border-radius:999px; background:var(--teal); color:#fff; border:1px solid var(--teal); font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:background .25s, border-color .25s; }
.pt-fluent .ff-btn-submit:hover{ background:var(--teal-ink); border-color:var(--teal-ink); color:#fff; }
.pt-fluent .ff-message-success{ background:none; border:0; box-shadow:none; padding:0; font-size:15.5px; color:var(--ink); }
.pt-fluent .error.text-danger{ font-size:13px; color:#8a2a16; }

/* Fluent Forms: velden naast elkaar (naam, plaats/adres, ...) ook als de standaard Fluent-css niet geladen is */
.pt-fluent .ff-t-container{ display:flex; gap:20px; width:100%; }
.pt-fluent .ff-t-cell{ flex:1 1 0; min-width:0; }
.pt-fluent .ff-el-input--content, .pt-fluent .ff-el-form-control{ width:100%; box-sizing:border-box; }
@media (max-width:600px){ .pt-fluent .ff-t-container{ flex-direction:column; gap:0; } }

/* hero: tellers als glasblokken, naast elkaar op de hoogte van de knoppen */
.hero__stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:28px; }
.hero__stat{ padding:12px 16px; border:1px solid rgba(255,255,255,.24); border-radius:var(--radius); background:rgba(255,255,255,.1); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.hero__stat-n{ display:block; font-size:clamp(1.25rem,1.7vw,1.6rem); font-weight:600; letter-spacing:-.02em; line-height:1.1; color:#fff; white-space:nowrap; }
.hero__stat-l{ display:block; margin-top:4px; font-size:12.5px; line-height:1.4; color:rgba(255,255,255,.82); }
@media (min-width:1000px){
  .hero__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; }
  .hero__row .hero__actions{ margin-top:40px; }
  .hero__stats{ grid-template-columns:repeat(4,auto); margin-top:0; }
  .hero__stat{ min-width:120px; }
}

/* hero: scroll-aanwijzer iets verder naar rechts, in de marge, zodat hij niet op de tellers staat */
@media (min-width:1000px){
  .hero--brand .hero__scroll{ right:calc(var(--gutter) * -.6); }
}

/* hero: tellers aan elkaar, als één balk met scheidingslijnen */
.hero__stats{ gap:0; border:1px solid rgba(255,255,255,.24); border-radius:var(--radius); background:rgba(255,255,255,.1); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); overflow:hidden; }
.hero__stat{ border:0; border-radius:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.hero__stat + .hero__stat{ border-left:1px solid rgba(255,255,255,.24); }
@media (max-width:999px){
  .hero__stat:nth-child(odd){ border-left:0; }
  .hero__stat:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.24); }
}
.vid-strip--portrait > .vid-item{ flex-basis:clamp(240px,26%,360px); }
.vid-strip--portrait .vid-frame.hp-video{ aspect-ratio:4/5; }
@media(max-width:640px){ .vid-strip--portrait > .vid-item{ flex-basis:72%; } }
.vid-strip--portrait .vid-title{ display:none; }
.vid-frame--photo.is-zoomable{ cursor:zoom-in; }
.vid-frame--photo.is-zoomable:focus-visible{ outline:2px solid var(--teal,#2a8a97); outline-offset:3px; }
.b2p-lightbox{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; background:rgba(8,10,11,.88); padding:24px; }
.b2p-lightbox[hidden]{ display:none; }
.b2p-lightbox__img{ max-width:min(92vw,1000px); max-height:92vh; width:auto; height:auto; object-fit:contain; background:#fff; border-radius:4px; box-shadow:0 10px 50px rgba(0,0,0,.5); }
.b2p-lightbox__btn{ position:absolute; display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(8,10,11,.5); color:#fff; font-size:28px; line-height:1; cursor:pointer; }
.b2p-lightbox__btn:hover{ background:#fff; color:#080a0b; }
.b2p-lightbox__close{ top:18px; right:18px; font-size:32px; }
.b2p-lightbox__prev{ left:18px; top:50%; transform:translateY(-50%); }
.b2p-lightbox__next{ right:18px; top:50%; transform:translateY(-50%); }
@media(max-width:640px){ .b2p-lightbox{ padding:12px; } .b2p-lightbox__prev{ left:8px; } .b2p-lightbox__next{ right:8px; } .b2p-lightbox__img{ max-width:96vw; } }
.vid-logo{ margin:18px 0 0; height:34px; display:flex; align-items:center; justify-content:center; }
.vid-logo img{ display:block; height:100%; width:auto; max-width:80%; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.vid-soon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:clamp(18px,2vw,26px); letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.vid-strip--free > .vid-item{ flex:0 0 auto; }
.vid-strip--free .vid-frame.hp-video{ display:block; aspect-ratio:auto; width:auto; height:clamp(320px,36vw,460px); }
.vid-strip--free .vid-poster{ position:static; display:block; width:auto; height:100%; max-width:none; }
.vid-strip--free .vid-title{ display:none; }
/* hamburger-alleen: mobiele menuknop zonder tekst en kader; de labels blijven voor schermlezers */
.menu-btn{ gap:0; padding:12px; border:0; }
.menu-btn__label-open, .menu-btn__label-close{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
/* nieuws als slider */
.news-head-tools{ display:flex; align-items:center; gap:24px; }
.news-head-tools .strip-row[hidden]{ display:none; }
.news--slider{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.news--slider::-webkit-scrollbar{ display:none; }
.news--slider .news__card{ flex:0 0 clamp(270px,31.5%,420px); scroll-snap-align:start; }
.bg-petrol-deep .news-head-tools .strip-arrow{ background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.bg-petrol-deep .news-head-tools .strip-arrow:hover{ background:#fff; border-color:#fff; color:var(--petrol-deep); }
@media(max-width:900px){
  .news--slider .news__card{ flex-basis:78%; border-right:1px solid var(--line-light); border-bottom:none; }
  .news--slider .news__card:first-child{ border-left:1px solid var(--line-light); }
  .news-section--light .news--slider .news__card, .news-section--light .news--slider .news__card:nth-child(3n){ border-right:1px solid var(--line); border-bottom:0; border-top:0; }
}
.news-section--light .news--slider .news__card:nth-child(n+4){ border-top:0; }
.news-section--light .news--slider .news__card:nth-child(3n){ border-right:1px solid var(--line); }
@media(max-width:560px){ .news-head-tools{ gap:14px; } }
/* hero-bovenruimte: op tablet en mobiel ruimte onder de vaste header, zodat de titel niet tegen het logo staat */
@media(max-width:900px){ .hero__inner{ padding-top:124px; } }
/* brand-slider-onder-elkaar: "Uitgelicht uit het assortiment" op mobiel onder elkaar in plaats van zijwaarts schuiven */
@media(max-width:640px){
  .strip.brand-slider{ flex-direction:column; overflow:visible; scroll-snap-type:none; cursor:auto; border:1px solid var(--line); overflow:hidden; }
  .strip.brand-slider > .brand-slide{ flex:none; width:100%; border-right:0; border-left:0; border-bottom:1px solid var(--line); scroll-snap-align:none; }
  .strip.brand-slider > .brand-slide:first-child{ border-left:0; }
  .strip.brand-slider > .brand-slide:last-child{ border-bottom:0; }
}
/* 404-pagina */
.hero--404 .hero__bg{ object-position:center 40%; transform:none; }
.nf-links{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.nf-links a{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:28px 24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); font-size:17px; font-weight:600; transition:background .25s, color .25s; }
.nf-links a:hover{ background:var(--ink); color:#fff; }
@media(max-width:900px){ .nf-links{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .nf-links{ grid-template-columns:1fr; } .nf-links a{ padding:22px 20px; } }
/* tabs-alleen-zijwaarts: de tabbalk scrolt alleen horizontaal, niet een beetje omhoog en omlaag */
.hp-tabs__list{ overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; }
/* juridische tekstpagina's (bijv. cookiebeleid) */
.hero--legal .hero__bg{ object-position:center 40%; transform:none; }
.hero--legal .hero__title{ max-width:16ch; }
.legal-text{ max-width:880px; }
.legal-text h2{ font-size:clamp(1.45rem,2.3vw,1.9rem); line-height:1.25; margin:2.2em 0 .6em; }
.legal-text h2:first-child{ margin-top:0; }
.legal-text h3{ font-size:1.2rem; line-height:1.3; margin:1.8em 0 .5em; }
.legal-text h4, .legal-text h5{ font-size:1rem; line-height:1.4; margin:1.4em 0 .4em; }
.legal-text p, .legal-text li, .legal-text td, .legal-text dd{ font-size:16px; line-height:1.7; color:var(--grey); }
.legal-text a{ color:var(--teal-ink); text-decoration:underline; text-underline-offset:2px; }
.legal-text ul, .legal-text ol{ padding-left:1.25em; margin:.8em 0 1.2em; }
.legal-text details{ border-top:1px solid var(--line); padding:14px 0; }
.legal-text details:last-of-type{ border-bottom:1px solid var(--line); }
.legal-text summary{ cursor:pointer; font-weight:600; color:var(--ink); }
.legal-text table{ width:100%; border-collapse:collapse; margin:1em 0 1.6em; }
.legal-text th, .legal-text td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.legal-text img{ max-width:100%; height:auto; }
/* hero--light-img: lichte hero-foto; donkere blauwtint, zodat de witte tekst en het menu leesbaar blijven */
.hero--light-img .hero__bg{ object-position:center 60%; transform:none; }
.hero--light-img .hero__scrim{ background:
  linear-gradient(180deg, rgba(8,24,36,.62) 0%, rgba(8,24,36,.25) 22%, rgba(8,24,36,0) 42%),
  linear-gradient(0deg, rgba(8,24,36,.9) 0%, rgba(8,24,36,.68) 46%, rgba(8,24,36,.4) 100%); }
/* vcar-hele-kaart: op mobiel schuift de videobalk altijd naar een hele kaart (ook de laatste), nooit over meerdere heen */
@media (max-width:900px){
  .vcar .vcar__rail::after{ content:""; display:block; }
  .vcar .vcar__thumb{ scroll-snap-stop:always; }
}
/* strip-arrow-uit: pijl uitgeschakeld als er in die richting niets meer is */
.strip-arrow:disabled{ opacity:.3; cursor:default; pointer-events:none; }
/* eigen videobestand (staand) in plaats van YouTube */
.hp-video.hp-video--file{ aspect-ratio:auto; max-width:420px; background:#000; }
.hp-video--file video{ display:block; width:100%; height:auto; max-height:80svh; object-fit:contain; background:#000; }
.hp-video__start{ position:absolute; inset:0; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; border:none; color:#fff; cursor:pointer; background:linear-gradient(0deg, rgba(8,10,11,.42) 0%, rgba(8,10,11,.08) 55%); }
.hp-video__start[hidden]{ display:none; }
.hp-video__start:hover .hp-video__icon{ transform:scale(1.08); background:var(--teal-pale); }
.hp-video__start:focus-visible{ outline:2px solid #fff; outline-offset:-6px; }
/* video-sectie: tekst links, video rechts */
.vsplit{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:clamp(32px,6vw,96px); align-items:center; }
.vsplit__text .lede{ margin:18px 0 0; max-width:54ch; }
.vsplit__text .h2 + .lede{ margin-top:22px; }
.vsplit__media .hp-video{ margin-inline:auto 0; }
@media(max-width:900px){ .vsplit{ grid-template-columns:1fr; } .vsplit__media .hp-video{ margin-inline:auto; } }