/* =====================================================================
   Omnios design system, version 3.15.
   Rich and calm: full-width bands only. The homepage hero and every page head
   are a full-width photo that fades into deep aubergine behind the text, quotes
   are deep aubergine bands, other sections white or lilac bands. Photo cards
   carry their text on the image. Figtree throughout, bold headings and calm
   18 px text, pill buttons, green status chips, a dark footer. No icons in
   boxes. A smooth molar after the logo frames the key photo on Werken bij and
   Zorginstellingen. Calm motion: the head settles, content rises into view once,
   and none of it runs when reduced motion is asked for.
   Tokens map 1:1 to theme.json.
   ===================================================================== */
:root{
  --aubergine:#5D006E; --aubergine-deep:#3A0046;
  --nacht:#28102F;                /* deep aubergine: quote band, footer */
  --bladgroen:#57C438; --diepgroen:#2F7D1E;
  --focus:var(--diepgroen);       /* 5.2:1 on white; bright green on dark bands */
  --inkt:#24132A; --inkt-zacht:#5A4C61;
  --kop:var(--aubergine-deep);    /* headings */
  --blos:#F1EBF6;                 /* cool lavender: bands, image placeholders */
  --groen-licht:#9EDC84;          /* light green on dark panels */
  --donker:linear-gradient(135deg,#46085A 0%,#36004A 52%,#2A0634 100%); /* dark bands */
  --lila-zacht:#F4EEF6;           /* soft brand tint: carousel buttons, 404 mark */
  --lijn:#E9E1E8;                 /* hairlines and card borders */
  --veld:#8F8896;                 /* form field borders, 3.5:1 on white */
  --munt:#E6F6DE;
  --f-display:"Figtree","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-body:var(--f-display);
  --f-ui:var(--f-display);
  --dur-1:160ms; --dur-2:300ms; --ease-out:cubic-bezier(.22,1,.36,1);
  --container:1360px;
  --gutter:clamp(16px,4vw,56px);
  --space:clamp(64px,7.5vw,120px);  /* section spacing, smaller inside panels */
  --r-l:12px; --r-m:8px; --r-s:6px; --r-btn:999px;
  --kies:url("../img/kies-mask.svg");
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:100px}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{margin:0;background:#fff;color:var(--inkt);font:400 18px/1.65 var(--f-body);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,picture{display:block;max-width:100%}
img{height:auto}
p{margin:0;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:700;color:var(--kop);letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word}
h1,h2{letter-spacing:-.02em}
h1{font-weight:800}
h2{font-weight:750}
h2{font-size:clamp(30px,3.3vw,48px);line-height:1.1}
h3{line-height:1.15}
a{color:inherit}
a:not([href]){cursor:default}
b,a,dd,dt{overflow-wrap:break-word}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
::selection{background:var(--groen-licht);color:var(--aubergine-deep)}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.container{max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:12px 16px;border-radius:var(--r-s);background:var(--inkt);color:#fff;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* ---------- photo frames ---------- */
.shape{position:relative;overflow:hidden;background:var(--blos)}
.shape picture,.shape img{width:100%;height:100%}
.shape img{object-fit:cover}
.shape--rond{border-radius:var(--r-l)}
.shape--vierkant{aspect-ratio:1/1}
.shape--kies{aspect-ratio:944/992;-webkit-mask:var(--kies) center/100% 100% no-repeat;mask:var(--kies) center/100% 100% no-repeat}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:0;border-radius:var(--r-btn);background:var(--aubergine);color:#fff;font:700 16.5px/1.15 var(--f-ui);letter-spacing:.005em;text-decoration:none;cursor:pointer;transition:background var(--dur-1),color var(--dur-1),box-shadow var(--dur-1),transform var(--dur-1)}
.btn:not(.btn--rand){box-shadow:0 12px 22px -14px rgba(58,0,70,.6)}
.btn:hover{background:var(--aubergine-deep)}
.btn:not(.btn--rand):hover{transform:translateY(-1px);box-shadow:0 16px 26px -14px rgba(58,0,70,.65)}
.btn--small{min-height:46px;padding:0 22px;font-size:15.5px}
.btn--rand{background:transparent;color:var(--inkt);box-shadow:inset 0 0 0 1.5px var(--inkt)}
.btn--rand:hover{background:var(--inkt);color:#fff}
.textlink{color:var(--aubergine);font-weight:700;text-decoration:underline;text-decoration-color:rgba(93,0,110,.35);text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color var(--dur-1)}
.textlink:hover{text-decoration-color:currentColor}
/* status chips: dark green on mint */
.pill,.type{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--munt);font:700 14px/1.25 var(--f-ui);color:var(--diepgroen)}
.type{padding:3px 10px;font-size:13px}
.pill,.type,.notice__date{justify-self:start;width:fit-content}

/* ---------- header: the logo at full size, plain menu links, a shadow once scrolled ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);transition:box-shadow var(--dur-2)}
.header.is-scrolled{box-shadow:0 1px 0 var(--lijn),0 12px 28px -20px rgba(42,6,52,.3)}
.header__bar{display:flex;align-items:center;gap:clamp(16px,2vw,32px);height:88px;transition:height var(--dur-2) var(--ease-out)}
.header.is-scrolled .header__bar{height:72px}
.logo{flex:none;display:block}
.logo img{height:64px;width:auto;transition:height var(--dur-2) var(--ease-out)}
.header.is-scrolled .logo img{height:50px}
.nav{--nx:14px;display:flex;gap:2px;margin-inline:auto}
.nav a{position:relative;padding:14px var(--nx);font:600 16px/1 var(--f-ui);text-decoration:none;white-space:nowrap;transition:color var(--dur-1)}
.nav a::after{content:"";position:absolute;left:var(--nx);right:var(--nx);bottom:5px;height:2px;border-radius:2px;background:var(--aubergine);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease-out)}
.nav a:hover{color:var(--aubergine)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--aubergine)}
.nav a[aria-current="page"]::after{background:var(--bladgroen)}
.header__right{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav+.header__right{margin-left:0}
.header__tel{display:grid;gap:4px;font:700 16px/1 var(--f-ui);text-decoration:none;white-space:nowrap}
.header__tel small{font:600 12.5px/1 var(--f-ui);color:var(--inkt-zacht)}
.header__tel:hover{color:var(--aubergine)}
.header__right .btn[aria-current="page"]{background:var(--aubergine-deep)}
.menu-button{display:none;align-items:center;gap:10px;min-height:44px;padding:0 2px 0 10px;border:0;background:none;font:700 16px/1 var(--f-ui);color:var(--inkt);cursor:pointer}
.menu-button__icon,.menu-button__icon::before,.menu-button__icon::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform var(--dur-2) var(--ease-out),background var(--dur-1)}
.menu-button__icon{position:relative}
.menu-button__icon::before,.menu-button__icon::after{content:"";position:absolute;left:0}
.menu-button__icon::before{top:-6px}.menu-button__icon::after{top:6px}
.menu-button[aria-expanded="true"] .menu-button__icon{background:transparent}
.menu-button[aria-expanded="true"] .menu-button__icon::before{transform:translateY(6px) rotate(45deg)}
.menu-button[aria-expanded="true"] .menu-button__icon::after{transform:translateY(-6px) rotate(-45deg)}
.drawer{position:fixed;inset:var(--header-h,68px) 0 auto;z-index:49;max-height:calc(100dvh - var(--header-h,68px));overflow-y:auto;padding:8px var(--gutter) 28px;background:#fff;border-bottom:1px solid var(--lijn);box-shadow:0 30px 40px -36px rgba(36,19,42,.5)}
.drawer nav{display:grid}
.drawer nav a{padding:15px 0;border-bottom:1px solid var(--lijn);font:700 20px/1.2 var(--f-display);text-decoration:none}
.drawer nav a[aria-current="page"]{color:var(--aubergine);box-shadow:inset 4px 0 0 var(--bladgroen);padding-left:16px}
.drawer__contact{margin-top:18px;font-size:17px;color:var(--inkt-zacht)}
.drawer__contact a{color:var(--inkt);font-weight:700}
@media (max-width:1100px){ .nav{display:none} .menu-button{display:inline-flex} .header__right,.nav+.header__right{margin-left:auto} }
@media (max-width:1280px){ .nav{--nx:11px} .nav a{font-size:15.5px} .header__tel{display:none} }
@media (max-width:600px){ .header__right .btn{display:none} .header__bar,.header.is-scrolled .header__bar{height:70px} .logo img,.header.is-scrolled .logo img{height:48px} }

/* ---------- sections and bands ---------- */
.section{padding-block:var(--space)}
.section--top-0{padding-top:clamp(32px,4vw,64px)}
/* bands: full-width sections in lilac or deep aubergine */
:is(.team,.gallery,.work,.section--tint,.kp:not(.kp--page),.pillars--band){--lijn:#DFD6EA;background:var(--blos)}
:is(.team,.gallery,.work,.section--tint,.kp:not(.kp--page),.pillars--band)+:is(.team,.gallery,.work,.section--tint,.kp:not(.kp--page),.pillars--band){border-top:1px solid var(--lijn)}
/* deep aubergine: homepage hero, page heads, quotes */
:is(.hero,.page-head,.voice--donker){--kop:#fff;--focus:var(--bladgroen);--lijn:rgba(255,255,255,.18);color:#fff}
.voice--donker{background:var(--donker)}
:is(.hero,.page-head,.voice--donker) .btn{background:#fff;color:var(--aubergine)}
:is(.hero,.page-head,.voice--donker) .btn:hover{background:var(--lila-zacht)}
:is(.hero,.page-head,.voice--donker) .btn--rand{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
:is(.hero,.page-head,.voice--donker) .btn--rand:hover{background:#fff;color:var(--aubergine)}
:is(.hero,.page-head,.voice--donker) .textlink,:is(.hero,.page-head,.voice--donker) .jumps a{color:#fff}
:is(.hero,.page-head,.voice--donker) :is(.textlink,.jumps a){text-decoration-color:rgba(255,255,255,.45)}
:is(.hero,.page-head,.voice--donker) :is(.textlink,.jumps a):hover{text-decoration-color:#fff}
:is(.hero,.page-head,.voice--donker) .shape{background:rgba(255,255,255,.08)}
/* a short green bar under the headings of the split sections */
:is(.dichtbij,.work,.split) h2::after{content:"";display:block;width:56px;height:4px;margin-top:18px;border-radius:2px;background:var(--bladgroen)}
.panel{position:relative}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px}
.section-head p{max-width:56ch;margin-top:12px;color:var(--inkt-zacht)}
.section-head p,.strip-head p,.kp__head p,.section__head p,.pillars__intro,.work__intro{font-size:clamp(17px,1.3vw,19px);line-height:1.6}

/* ======================= HOMEPAGE ======================= */
/* full-width hero: the photo fills the right side and fades into deep aubergine behind the text */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--aubergine-deep)}
.hero__bg{position:absolute;top:0;right:0;bottom:0;z-index:-1;width:68%;margin:0;overflow:hidden}
.hero__bg picture,.hero__bg img{width:100%;height:100%}
.hero__bg img{object-fit:cover;object-position:50% 45%}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--aubergine-deep) 0%,rgba(58,0,70,.86) 22%,rgba(58,0,70,.42) 44%,rgba(58,0,70,0) 66%)}
.hero__inner{display:flex;align-items:center;min-height:clamp(560px,76vh,800px);padding-block:clamp(56px,7vw,112px) clamp(112px,11vw,168px)}
.hero__text{max-width:min(660px,54%)}
.hero h1{font-size:clamp(40px,4.4vw,64px);line-height:1.04}
.hero h1 em{display:block;font-style:normal;color:var(--groen-licht)}
.hero__lead{max-width:42ch;margin-top:clamp(20px,2.2vw,32px);font-size:clamp(19px,1.5vw,22px);color:rgba(255,255,255,.86)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3vw,40px)}
@media (max-width:879px){
  .hero__bg{position:relative;width:100%;height:clamp(240px,64vw,460px)}
  .hero__bg::after{background:linear-gradient(0deg,var(--aubergine-deep) 0%,rgba(58,0,70,.5) 22%,rgba(58,0,70,0) 50%)}
  .hero__inner{min-height:0;padding-block:4px clamp(88px,15vw,112px)}
  .hero__text{max-width:none}
}
@media (max-width:479px){ .hero h1 em{display:inline} }
/* verified facts on a white card that rises over the bottom of the hero, no icons */
.trustbar{position:relative;z-index:2;margin-top:calc(-1 * clamp(56px,5.5vw,84px))}
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:clamp(4px,.6vw,8px) clamp(6px,1vw,14px);list-style:none;border-radius:var(--r-l);background:#fff;box-shadow:0 2px 6px rgba(42,6,52,.06),0 30px 60px -34px rgba(42,6,52,.42)}
.trust li{display:grid;gap:7px;align-content:start;padding:clamp(20px,2.2vw,30px) clamp(16px,2vw,30px);border-left:1px solid var(--lijn)}
.trust li:first-child{border-left:0}
.trust b{font:800 clamp(30px,2.6vw,40px)/1 var(--f-display);letter-spacing:-.02em;color:var(--aubergine)}
.trust span{font-size:15.5px;line-height:1.45;color:var(--inkt-zacht)}
.trust a{color:inherit;text-underline-offset:3px}
.trust a:hover{color:var(--aubergine)}
@media (max-width:879px){ .trustbar{margin-top:-56px} }
@media (max-width:760px){ .trust{grid-template-columns:repeat(2,minmax(0,1fr))} .trust li:nth-child(3){border-left:0} .trust li:nth-child(n+3){border-top:1px solid var(--lijn)} }
@media (max-width:480px){ .trust li{padding:18px 12px 18px 14px} .trust span{font-size:14.5px} }
@media (max-width:359px){ .trust{grid-template-columns:1fr} .trust li{border-left:0} .trust li+li{border-top:1px solid var(--lijn)} }

/* the three audiences as photo cards with the text on the image. The whole card is the link */
.audience{padding-bottom:var(--space)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin:0;padding:clamp(40px,5vw,72px) 0 0;list-style:none}
.tile{position:relative;isolation:isolate;display:grid;min-height:clamp(360px,32vw,480px);overflow:hidden;border-radius:var(--r-l);background:var(--nacht);transition:transform 500ms var(--ease-out),box-shadow 500ms var(--ease-out)}
.tile:hover{transform:translateY(-4px);box-shadow:0 30px 50px -30px rgba(42,6,52,.6)}
.tile::before{content:"";grid-area:1/1;z-index:-1;background:linear-gradient(to top,rgba(36,6,44,.92) 0%,rgba(36,6,44,.8) 35%,rgba(36,6,44,.35) 62%,rgba(36,6,44,0) 82%)}
.tile__media{grid-area:1/1;z-index:-2;position:relative;overflow:hidden;background:var(--blos)}
.tile__media picture,.tile__media img{width:100%;height:100%}
.tile__media img{object-fit:cover;transition:transform 700ms var(--ease-out)}
.tile:hover .tile__media img{transform:scale(1.03)}
.tile--werk .tile__media img{object-position:50% 20%}
.tile__body{grid-area:1/1;align-self:end;display:grid;gap:8px;padding:clamp(20px,2.2vw,30px)}
.tile h3{font-size:clamp(21px,1.8vw,26px);line-height:1.15;color:#fff}
.tile__link{text-decoration:none}
.tile__link::after{content:"";position:absolute;inset:0;z-index:1}
.tile__link:focus-visible{outline:none}
.tile:hover .tile__link,.tile__link:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.tile:has(.tile__link:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.tile p{font-size:17px;line-height:1.5;color:rgba(255,255,255,.86)}
@media (max-width:900px){ .tiles{grid-template-columns:1fr} .tile{min-height:clamp(300px,64vw,420px)} .tile::before{background:linear-gradient(to top,rgba(36,6,44,.92) 0%,rgba(36,6,44,.82) 45%,rgba(36,6,44,.3) 74%,rgba(36,6,44,0) 92%)} }

/* photo strip: stays inside the content area and shows whole photos only */
.team,.gallery{padding-block:var(--space)}
.strip-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:18px 40px;margin-bottom:clamp(24px,3vw,40px)}
.strip-head>div:first-child{max-width:760px}
.strip-head p{max-width:56ch;margin-top:14px;color:var(--inkt-zacht)}
.strip-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.strip-nav{display:flex;gap:8px}
.strip-nav button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-s);background:var(--lila-zacht);color:var(--aubergine);cursor:pointer;transition:background var(--dur-1),color var(--dur-1),opacity var(--dur-1)}
:is(.team,.gallery) .strip-nav button{background:#fff}
.strip-nav button:hover:not(:disabled){background:var(--aubergine);color:#fff}
.strip-nav button:disabled{opacity:.4;cursor:default}
.strip{position:relative;container-type:inline-size;margin-inline:max(var(--gutter),calc((100% - var(--container)) / 2));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip:focus-visible{outline-offset:2px;border-radius:var(--r-l)}
.strip ul{--sg:clamp(14px,1.6vw,24px);display:grid;grid-auto-flow:column;grid-auto-columns:100cqw;align-items:start;gap:var(--sg);width:max-content;margin:0;padding:0;list-style:none}
@container (min-width:520px){ .strip ul{grid-auto-columns:calc((100cqw - var(--sg)) / 2)} }
@container (min-width:820px){ .strip ul{grid-auto-columns:calc((100cqw - 2 * var(--sg)) / 3)} .strip .is-breed{grid-column:span 2} }
@container (min-width:1080px){ .strip ul{grid-auto-columns:calc((100cqw - 3 * var(--sg)) / 4)} }
.strip li{scroll-snap-align:start}
.strip figure{margin:0}
.strip .shape{aspect-ratio:4/5}
.strip .shape--vierkant{aspect-ratio:1/1}
.strip .is-breed .shape{aspect-ratio:16/10}
.strip .shape img{transition:transform 700ms var(--ease-out)}
.strip li:hover .shape img{transform:scale(1.03)}
.strip figcaption{margin-top:14px;font-size:16px;line-height:1.45;color:var(--inkt-zacht)}
.strip figcaption b{display:block;margin-bottom:2px;font:700 18px/1.25 var(--f-ui);color:var(--inkt)}

/* pillars: text columns on white */
.pillars{padding-block:var(--space)}
.pillars__intro{margin-top:12px;max-width:52ch;color:var(--inkt-zacht);font-size:clamp(18px,1.5vw,20px)}
.pillar-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,3vw,56px) clamp(24px,3vw,56px);margin-top:clamp(32px,4vw,52px)}
.pcard{display:grid;gap:12px;align-content:start}
.pcard__text{display:grid;gap:12px;justify-items:start}
.pcard h3{font-size:clamp(22px,2vw,28px)}
.pcard p{color:var(--inkt-zacht);font-size:17.5px}
@media (max-width:900px){ .pillar-cards{grid-template-columns:1fr} }
.pillar-list{margin:clamp(24px,3.4vw,44px) 0 0;border-bottom:1px solid var(--lijn)}
.pillar-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px clamp(28px,5vw,80px);padding-block:clamp(22px,3vw,36px);border-top:1px solid var(--lijn)}
.pillar-row dt{font:750 clamp(24px,2.4vw,34px)/1.12 var(--f-display);letter-spacing:-.02em;color:var(--kop)}
.pillar-row dd{margin:0;display:grid;gap:14px;justify-items:start;max-width:58ch;color:var(--inkt-zacht)}
@media (max-width:760px){ .pillar-row{grid-template-columns:1fr} }

/* quote */
.voice__quote{margin:0;padding-block:clamp(48px,6vw,96px);max-width:1040px}
.voice blockquote{margin:0}
.voice blockquote p{font:700 clamp(28px,3.4vw,48px)/1.14 var(--f-display);letter-spacing:-.02em;text-indent:-.42em;max-width:24ch;color:var(--kop)}
.voice figcaption{margin-top:clamp(20px,2.4vw,30px);max-width:58ch;font-size:18px;color:var(--inkt-zacht)}
.voice figcaption b{color:var(--inkt)}
/* homepage quote on the deep aubergine band */
.voice--donker:not(.voice--foto) .voice__quote{margin-inline:auto;text-align:center}
.voice--donker:not(.voice--foto) blockquote p{margin-inline:auto;text-indent:0}
.voice--donker:not(.voice--foto) figcaption{margin-inline:auto}
.voice--donker figcaption{color:rgba(255,255,255,.75)}
.voice--donker figcaption b,.voice--donker .textlink{color:#fff}
.voice--foto .voice__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(56px,7vw,104px)}
.voice--foto .voice__quote{padding-block:0}
.voice--foto blockquote p{font-size:clamp(26px,2.8vw,40px)}
.voice__media{width:100%;max-width:420px;justify-self:center}
@media (max-width:860px){ .voice--foto .voice__grid{grid-template-columns:1fr} .voice__media{max-width:300px;justify-self:start} }

/* poetskaarten */
.kp__inner{padding-block:var(--space)}
.kp__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px}
.kp__head p{max-width:56ch;margin-top:12px;color:var(--inkt-zacht)}
.kp__body{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(16px,2.4vw,32px)}
.kp--page{background:#fff;padding-block:clamp(48px,6vw,96px)}
.fan{--w:clamp(120px,12.6vw,190px);display:flex;justify-content:center;align-items:flex-end;padding:56px 0 20px}
.fan__card{position:relative;flex:0 0 auto;width:var(--w);margin-inline:calc(var(--w) * -.15);padding:0;border:0;border-radius:6px;background:#fff;box-shadow:0 1px 2px rgba(36,19,42,.12),0 14px 28px -18px rgba(36,19,42,.45);transform:translateY(var(--y,0)) rotate(var(--r,0deg));transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2),opacity var(--dur-2);cursor:zoom-in}
.fan__card img{width:100%;border-radius:6px}
.fan__card:hover,.fan__card:focus-visible{z-index:5;transform:translateY(calc(var(--y,0px) - 22px)) rotate(0deg);box-shadow:0 1px 2px rgba(36,19,42,.14),0 24px 36px -20px rgba(36,19,42,.5)}
.fan.has-pick .fan__card{opacity:.4}
.fan.has-pick .fan__card.is-picked{z-index:6;opacity:1;transform:translateY(-32px) rotate(0deg);outline:3px solid var(--aubergine);outline-offset:4px}
.chooser{display:grid;gap:14px;align-content:start;padding:clamp(22px,2.4vw,30px);border-radius:var(--r-l);background:#fff;border:1px solid var(--lijn)}
.chooser__title{font-size:22px}
.chooser__q{font-size:18px;font-weight:700;line-height:1.4}
.chooser__q:focus{outline:none}
.chooser__answers{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.chooser__answers button{min-height:46px;min-width:84px;padding:0 20px;border:0;border-radius:var(--r-btn);background:#fff;box-shadow:inset 0 0 0 1.5px var(--inkt);font:700 16px/1 var(--f-ui);color:var(--inkt);cursor:pointer;transition:background var(--dur-1),color var(--dur-1)}
.chooser__answers button:hover{background:var(--inkt);color:#fff}
.chooser__result{font-size:18px;line-height:1.45}
.chooser__result b{display:block;font:700 22px/1.25 var(--f-display);color:var(--aubergine)}
.chooser__links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:16px}
.chooser__restart{padding:0;border:0;background:none;font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
@media (max-width:900px){
  .kp__body{grid-template-columns:1fr}
  .fan{--w:150px;justify-content:flex-start;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:34px 4px 16px;scrollbar-width:none}
  .fan::-webkit-scrollbar{display:none}
  .fan__card{margin:0;transform:none;scroll-snap-align:start}
  .fan__card:hover,.fan__card:focus-visible{transform:translateY(-10px)}
  .fan.has-pick .fan__card.is-picked{transform:translateY(-14px)}
}

/* documents as a plain list */
.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:clamp(16px,2vw,24px) clamp(16px,2vw,32px);margin-top:clamp(28px,3.4vw,44px)}
.docs--flush{margin-top:0}
.doc{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center;text-decoration:none}
.doc picture{overflow:hidden;aspect-ratio:7/10;border-radius:4px;box-shadow:0 1px 3px rgba(36,19,42,.18)}
.doc picture img{width:100%;height:100%;object-fit:cover;object-position:top}
.doc b{display:block;font:700 17.5px/1.3 var(--f-ui)}
.doc:hover b{color:var(--aubergine);text-decoration:underline;text-underline-offset:4px}
.doc small{font-size:15px;color:var(--inkt-zacht)}

/* card dialog */
.card-dialog{width:min(940px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:var(--r-l);background:#fff;color:var(--inkt);box-shadow:0 30px 80px -30px rgba(20,8,26,.6)}
.card-dialog::backdrop{background:rgba(36,19,42,.55)}
.card-dialog__inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(18px,3vw,36px);padding:clamp(16px,2.5vw,28px)}
.card-dialog__img img{width:100%;max-height:calc(100dvh - 90px);object-fit:contain;border-radius:6px;box-shadow:0 1px 3px rgba(36,19,42,.2)}
.card-dialog__side{display:grid;align-content:start;gap:16px}
.card-dialog__side h2{font-size:clamp(24px,2.6vw,32px)}
.card-dialog__side p{color:var(--inkt-zacht)}
.card-dialog__close{justify-self:start;margin-top:8px;min-height:44px;padding:0 18px;border:0;border-radius:var(--r-btn);background:#fff;box-shadow:inset 0 0 0 1.5px var(--inkt);font-weight:700;color:var(--inkt);cursor:pointer}
::view-transition-group(kaart){animation-duration:420ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:200ms}

/* ---------- motion (only with html.motion, set in the head before the first paint unless reduced motion is asked for) ---------- */
/* the head runs on CSS alone: lines rise one after another, the photo settles, the facts follow */
.motion :is(.hero__text>*,.page-head .container>div>*,.page-head .container>:not(.page-head__figure,div)){animation:rise 800ms var(--ease-out) calc(100ms + var(--n,0) * 90ms) backwards}
:is(.hero__text,.page-head .container,.page-head .container>div)>:nth-child(2){--n:1}
:is(.hero__text,.page-head .container,.page-head .container>div)>:nth-child(3){--n:2}
:is(.hero__text,.page-head .container,.page-head .container>div)>:nth-child(4){--n:3}
:is(.hero__text,.page-head .container,.page-head .container>div)>:nth-child(5){--n:4}
:is(.hero__text,.page-head .container,.page-head .container>div)>:nth-child(6){--n:5}
.motion .trust{animation:rise 800ms var(--ease-out) 420ms backwards}
/* the rest waits for the script (.rise, .wait), so nothing stays hidden if the script does not load */
.motion .rise.is-in{animation:rise 800ms var(--ease-out) var(--d,0ms) backwards}
.motion .rise:not(.is-in){opacity:0}
.motion :is(.hero__bg,.page-head__figure) img{animation:settle-in 1600ms var(--ease-out) backwards}
/* photos inside a rising block settle as the block arrives */
.motion :is(.dichtbij__media,.work__collage,.split__media,.tile,.ncard,.news__feature).is-in img{animation:settle 1400ms var(--ease-out) backwards}
/* the poetskaarten fan opens card by card */
.motion .fan.wait:not(.is-in) .fan__card{opacity:0}
.motion .fan.is-in .fan__card{animation:fan-in 900ms var(--ease-out) calc(var(--i,0) * 90ms) backwards}
/* the molar frame opens from the middle */
.motion .shape--kies.wait:not(.is-in){opacity:0}
.motion .shape--kies.is-in{animation:kies-open 1100ms var(--ease-out) backwards}
@keyframes rise{from{opacity:0;translate:0 22px}}
@keyframes settle-in{from{opacity:0;scale:1.06}}
@keyframes settle{from{scale:1.06}}
@keyframes fan-in{from{opacity:0;transform:translateY(60px) rotate(0deg)}}
@keyframes kies-open{from{opacity:0;-webkit-mask-size:72% 72%;mask-size:72% 72%}}
@media (prefers-reduced-motion:no-preference){
  /* page to page: a short cross-fade, the header stays put */
  @view-transition{navigation:auto}
  .header{view-transition-name:site-header}
  :root:active-view-transition{overflow-x:clip}
  /* answers in the FAQ open smoothly where the browser supports it */
  @supports (interpolate-size:allow-keywords){
    :root{interpolate-size:allow-keywords}
    .faq details::details-content{block-size:0;overflow-y:clip;transition:block-size 350ms var(--ease-out),content-visibility 350ms allow-discrete}
    .faq details[open]::details-content{block-size:auto}
  }
}
@media print{ .motion :is(.rise,.fan__card,.shape--kies){opacity:1!important;animation:none!important} }
@media (max-width:700px){ .card-dialog__inner{grid-template-columns:1fr} .card-dialog__img img{max-height:58dvh} }

/* Mondzorg Dichtbij */
.dichtbij__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,88px);align-items:center;padding-block:var(--space)}
.dichtbij h2{margin:16px 0 22px}
.dichtbij p{max-width:56ch}
.dichtbij__links{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.dichtbij__media{width:100%;max-width:480px;justify-self:end}
.dichtbij__media .shape--rond{aspect-ratio:4/5}
@media (max-width:900px){ .dichtbij__grid{grid-template-columns:1fr} .dichtbij__media{max-width:420px;justify-self:start} }

/* Werken bij */
.work__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:center;padding-block:var(--space)}
.work__intro{margin-top:22px;max-width:52ch;color:var(--inkt-zacht)}
.work__collage{width:100%}
.work__main{aspect-ratio:4/3}
.vacancies{margin:28px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--lijn)}
.vacancies li{display:grid;gap:2px;padding:14px 0;border-top:1px solid var(--lijn)}
.vacancies a{font:700 19px/1.25 var(--f-ui);text-decoration:none}
.vacancies a:hover{color:var(--aubergine);text-decoration:underline;text-underline-offset:4px}
.vacancies span{font-size:15.5px;color:var(--inkt-zacht)}
.work__more{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:900px){ .work__grid{grid-template-columns:1fr} }

/* news */
.news-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2.4vw,40px);margin-top:clamp(24px,3vw,40px)}
.ncard{display:grid;gap:12px;align-content:start;padding-bottom:24px;overflow:hidden;border:1px solid var(--lijn);border-radius:var(--r-l);background:#fff;text-decoration:none;transition:border-color var(--dur-2),box-shadow var(--dur-2),transform 500ms var(--ease-out)}
.ncard:hover{transform:translateY(-4px);border-color:#DCCDDA;box-shadow:0 26px 44px -30px rgba(58,0,70,.45)}
.ncard>:not(.shape){margin-inline:clamp(18px,1.8vw,24px)}
.ncard .shape{aspect-ratio:4/3;margin-bottom:6px;border-radius:0}
.ncard:first-child .shape{aspect-ratio:auto;height:clamp(260px,26vw,380px)}
.ncard .shape img{transition:transform 700ms var(--ease-out)}
.ncard:hover .shape img{transform:scale(1.03)}
.ncard__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-size:15px;color:var(--inkt-zacht)}
.ncard h3{font-size:clamp(20px,1.8vw,25px);line-height:1.2}
.ncard:first-child h3{font-size:clamp(24px,2.4vw,32px)}
.ncard:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
@media (max-width:900px){ .news-grid{grid-template-columns:1fr 1fr} .ncard:first-child{grid-column:1/-1} }
@media (max-width:560px){ .news-grid{grid-template-columns:1fr} }

/* ---------- footer ---------- */
.footer{--lijn:rgba(255,255,255,.16);--kop:#fff;--focus:var(--bladgroen);background:var(--nacht);color:rgba(255,255,255,.75);font-size:16px}
.footer a{color:#fff;text-decoration:none}
.footer__news{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;padding-block:clamp(32px,4vw,48px);border-bottom:1px solid var(--lijn)}
.footer__news p{max-width:46ch;font-size:17px;color:rgba(255,255,255,.8)}
.footer__news b{display:block;margin-bottom:4px;font:750 24px/1.2 var(--f-display);letter-spacing:-.01em;color:#fff}
.footer__news form{display:flex;flex-wrap:wrap;gap:10px;flex:1 1 380px;max-width:540px}
.footer__news input{flex:1 1 220px;min-width:0;min-height:52px;padding:0 20px;border:1.5px solid #fff;border-radius:var(--r-btn);background:#fff;color:var(--inkt);font-size:17px}
.footer__news .thanks{font-weight:700;color:#fff}
.footer .btn{background:#fff;color:var(--aubergine)}
.footer .btn:hover{background:var(--lila-zacht)}
.footer__grid{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:32px;padding-block:56px 40px}
.footer img{height:64px;width:auto;margin-bottom:22px}
.footer address{font-style:normal;line-height:1.7}
.footer address a{font-weight:700}
.footer h2{margin-bottom:16px;font:700 16px/1.2 var(--f-ui);letter-spacing:0;color:var(--kop)}
.footer ul{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.footer ul a,.footer__fine a{color:rgba(255,255,255,.75)}
.footer ul a:hover,.footer__fine a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer__members{padding-top:20px;border-top:1px solid var(--lijn);font-size:14.5px}
.footer__fine{display:flex;flex-wrap:wrap;gap:8px 24px;padding-block:20px 36px;font-size:14.5px}
@media (max-width:900px){ .footer__grid{grid-template-columns:1fr 1fr} .footer__brand{grid-column:1/-1} }

/* ======================= SUBPAGE TEMPLATES ======================= */
/* page heads: like the homepage hero, the photo fills the right side and fades into deep aubergine behind the text */
.page-head{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(400px,50vh,560px);padding-block:clamp(48px,6vw,96px);overflow:hidden;background:var(--aubergine-deep)}
.page-head>.container{width:100%}
.page-head .container>:not(.page-head__figure){max-width:min(660px,56%)}
.page-head h1{font-size:clamp(36px,4.4vw,62px);line-height:1.06;max-width:18ch}
.page-head--text h1{max-width:24ch}
.page-head__kicker{margin-bottom:12px;font:700 15px/1.2 var(--f-ui);color:var(--aubergine)}
.page-head__lead{margin-top:clamp(18px,2.2vw,28px);max-width:54ch;font-size:clamp(19px,1.5vw,22px);color:var(--inkt-zacht)}
.page-head :is(.page-head__lead,.job-posted,.article__meta){color:rgba(255,255,255,.82)}
.page-head .page-head__kicker{color:var(--groen-licht)}
.page-head :is(.crumbs,.crumbs a){color:rgba(255,255,255,.75)}
.page-head .crumbs a:hover{color:#fff}
.page-head .crumbs li+li::before,.page-head .job-facts li+li::before{color:rgba(255,255,255,.45)}
.page-head .pillar-tabs a{color:rgba(255,255,255,.75)}
.page-head .pillar-tabs a:hover{color:#fff}
.page-head .pillar-tabs a[aria-current="page"]{color:#fff;border-bottom-color:var(--groen-licht)}
.page-head__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:clamp(22px,2.6vw,32px)}
.page-head__figure{position:absolute;top:0;right:0;bottom:0;z-index:-1;width:62%;margin:0;overflow:hidden}
.page-head__figure picture,.page-head__figure img{width:100%;height:100%}
.page-head__figure img{object-fit:cover;object-position:50% 40%}
.page-head__figure::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--aubergine-deep) 0%,rgba(58,0,70,.86) 22%,rgba(58,0,70,.42) 44%,rgba(58,0,70,0) 66%)}
.crumbs{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 clamp(16px,2vw,24px);padding:0;list-style:none;font-size:15px;color:var(--inkt-zacht)}
.crumbs li+li::before{content:"/";margin-right:8px;color:#B5ADBA}
.crumbs a{color:var(--inkt-zacht);text-underline-offset:3px}
.crumbs a:hover{color:var(--inkt)}
.jumps{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:clamp(18px,2.2vw,28px)}
.jumps a{font:700 15.5px/1.6 var(--f-ui);color:var(--aubergine);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.jumps a:hover{text-decoration-thickness:3px}
@media (max-width:899px){
  .page-head{display:block;min-height:0;padding-top:0}
  .page-head__grid{display:flex;flex-direction:column}
  .page-head__figure{position:relative;order:-1;width:auto;height:clamp(220px,56vw,400px);margin:0 calc(-1 * var(--gutter)) clamp(20px,4vw,32px)}
  .page-head__figure::after{background:linear-gradient(0deg,var(--aubergine-deep) 0%,rgba(58,0,70,.5) 22%,rgba(58,0,70,0) 50%)}
  .page-head .container>:not(.page-head__figure){max-width:none}
}

.section__head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(26px,3.2vw,44px)}
.section__head p{max-width:58ch;color:var(--inkt-zacht)}
.section__head--single{grid-template-columns:1fr}
.small-head{margin-bottom:12px;font:700 15px/1.2 var(--f-ui)!important;letter-spacing:0;color:var(--inkt-zacht)}
.note-line{margin-top:16px;font-size:15.5px;color:var(--inkt-zacht)}
.more-link{margin-top:22px}
@media (max-width:760px){ .section__head{grid-template-columns:1fr} }

/* long text */
.prose{max-width:68ch}
.prose>*+*{margin-top:1em}
.prose h2{margin-top:1.6em;font-size:clamp(26px,2.6vw,36px)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.4em;font-size:clamp(20px,1.8vw,24px)}
.prose ul,.prose ol{padding-left:1.2em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--aubergine)}
.prose a:not(.btn){color:var(--aubergine);font-weight:700;text-underline-offset:3px}
.prose figure{margin:1.8em 0}
.prose figure picture{overflow:hidden;border-radius:var(--r-l)}
.prose figure img{width:100%}
.prose figcaption{margin-top:12px;font-size:15px;color:var(--inkt-zacht)}

/* content and side column */
.layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(28px,5vw,88px);align-items:start}
.layout--aside{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.toc-side{position:sticky;top:110px;padding-left:18px;border-left:2px solid var(--lijn);font-size:16px}
.toc-side p{margin-bottom:10px;font:700 15px/1.2 var(--f-ui);color:var(--inkt-zacht)}
.toc-side ol{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.toc-side a{display:block;padding:6px 0;text-decoration:none;line-height:1.35}
.toc-side a:hover{color:var(--aubergine);text-decoration:underline;text-underline-offset:3px}
.aside-box{position:sticky;top:110px;display:grid;gap:12px;padding:clamp(22px,2.4vw,30px);border-radius:var(--r-l);background:var(--blos)}
.section--tint .aside-box{background:#fff}
.aside-box h2{font-size:23px}
.aside-box p{font-size:17px}
.aside-box--inline,.aside-box--static{position:relative;top:auto}
.aside-box--inline{margin-top:2.4em}
.aside-box--static{margin-top:28px}
.aside-box__small{font-size:15.5px!important;color:var(--inkt-zacht)}
@media (max-width:960px){ .layout,.layout--aside{grid-template-columns:1fr} .toc-side{position:static} .aside-box{position:relative;top:auto} }

/* facts, steps and links: hairlines instead of boxes */
.facts-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:clamp(24px,2.4vw,36px) clamp(24px,3vw,48px);margin:0;padding:0;list-style:none}
.facts-list li{display:grid;gap:6px;align-content:start}
.facts-list b{font:700 19px/1.3 var(--f-ui)}
.facts-list span{font-size:17px;color:var(--inkt-zacht)}
.sequence{counter-reset:stap;display:grid;max-width:960px;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--lijn)}
.sequence li{counter-increment:stap;display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 16px;align-items:baseline;padding:18px 0;border-top:1px solid var(--lijn)}
.sequence li::before{content:counter(stap,decimal-leading-zero);grid-row:span 2;font:700 19px/1.3 var(--f-ui);color:var(--aubergine)}
.sequence b{font:700 19px/1.3 var(--f-ui)}
.sequence span{color:var(--inkt-zacht)}
.sequence--compact li{grid-template-columns:40px minmax(0,1fr);padding:14px 0}
.link-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(24px,2.4vw,32px) clamp(24px,3vw,48px);margin:0;padding:0;list-style:none}
.link-rows a{display:grid;gap:6px;align-content:start;height:100%;text-decoration:none}
.link-rows b{font:700 19px/1.3 var(--f-ui);color:var(--aubergine)}
.link-rows a:hover b{text-decoration:underline;text-underline-offset:4px}
.link-rows span{font-size:16.5px;color:var(--inkt-zacht)}
.ticks{display:grid;gap:10px;margin:12px 0 0;padding:0;list-style:none}
.ticks li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px}
.ticks li::before{content:"";width:13px;height:7px;margin:8px 0 0 4px;border-left:2.5px solid var(--diepgroen);border-bottom:2.5px solid var(--diepgroen);transform:rotate(-45deg)}
.three-up{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.three-up h3{font-size:21px}
.three-up p{margin-top:8px;color:var(--inkt-zacht)}
@media (max-width:860px){ .three-up{grid-template-columns:1fr} }

/* faq */
.faq{display:grid;max-width:920px;border-bottom:1px solid var(--lijn)}
.faq details{border-top:1px solid var(--lijn)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font:700 19px/1.35 var(--f-ui);list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:400 30px/1 var(--f-body);color:var(--aubergine);transition:transform var(--dur-2) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{max-width:64ch;padding-bottom:22px;color:var(--inkt-zacht)}

/* closing call to action */
.closing{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 40px;padding-block:clamp(56px,7vw,104px)}
.closing h2{max-width:22ch;font-size:clamp(28px,3vw,44px)}
.closing__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;color:var(--inkt-zacht)}

/* pillar tabs */
.pillar-tabs{display:flex;flex-wrap:wrap;gap:4px 24px;margin:clamp(18px,2.2vw,28px) 0 0;padding:0;list-style:none}
.pillar-tabs a{display:inline-block;padding:8px 0;border-bottom:2px solid transparent;font:700 15.5px/1.2 var(--f-ui);text-decoration:none;color:var(--inkt-zacht)}
.pillar-tabs a:hover{color:var(--inkt)}
.pillar-tabs a[aria-current="page"]{color:var(--aubergine);border-bottom-color:var(--aubergine)}

/* timeline */
.timeline-list{display:grid;margin:0;border-bottom:1px solid var(--lijn)}
.timeline-list div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:baseline;padding:14px 0;border-top:1px solid var(--lijn)}
.timeline-list dt{font:700 16px/1.3 var(--f-ui);color:var(--aubergine)}
.timeline-list dd{margin:0;font-weight:700}

/* filters and library */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.filters+.filters{margin-bottom:24px}
.filter{min-height:42px;padding:0 16px;border:0;border-radius:var(--r-btn);background:#fff;box-shadow:inset 0 0 0 1px var(--veld);font:700 15px/1 var(--f-ui);color:var(--inkt);cursor:pointer;transition:background var(--dur-1),color var(--dur-1)}
.filter:hover{box-shadow:inset 0 0 0 1.5px var(--inkt)}
.filter[aria-pressed="true"]{background:var(--inkt);color:#fff;box-shadow:none}
.library{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:clamp(16px,2vw,32px);margin:0;padding:0;list-style:none}
.library a{display:grid;gap:12px;text-decoration:none}
.library picture,.thumb-cover{overflow:hidden;border-radius:6px;box-shadow:0 1px 2px rgba(36,19,42,.12),0 10px 22px -16px rgba(36,19,42,.4);transition:transform var(--dur-2) var(--ease-out)}
.library picture img{width:100%;aspect-ratio:7/10;object-fit:cover;object-position:top}
.library a:hover picture,.library a:hover .thumb-cover{transform:translateY(-4px)}
.library b{display:block;font:700 17.5px/1.3 var(--f-ui)}
.library a:hover b{color:var(--aubergine);text-decoration:underline;text-underline-offset:4px}
.library small{font-size:14.5px;color:var(--inkt-zacht)}
/* a cover for documents without one, in the style of the Omnios pdf covers: aubergine top, green curve, white foot with the logo */
.thumb-cover{position:relative;display:grid;align-content:start;gap:8px;aspect-ratio:7/10;padding:clamp(14px,1.4vw,20px);background:linear-gradient(160deg,var(--aubergine) 0%,var(--aubergine-deep) 75%);color:#fff}
.thumb-cover::after{content:"";position:absolute;left:-30%;right:-30%;top:66%;bottom:-40%;border-radius:50% 50% 0 0;border-top:5px solid var(--bladgroen);background:#fff}
.thumb-cover small{font:700 12.5px/1.25 var(--f-ui);color:var(--groen-licht)}
.thumb-cover strong{font:800 clamp(17px,1.4vw,21px)/1.15 var(--f-display);letter-spacing:-.01em;-webkit-hyphens:auto;hyphens:auto}
.thumb-cover img{position:absolute;right:12%;bottom:7%;z-index:1;width:42%;height:auto}
.filter-empty{margin-top:18px;color:var(--inkt-zacht)}
.card-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin:0;padding:0;list-style:none}
.card-row a{display:grid;gap:12px;text-decoration:none}
.card-row picture{overflow:hidden;border-radius:6px;box-shadow:0 1px 2px rgba(36,19,42,.12),0 10px 22px -16px rgba(36,19,42,.4);transition:transform var(--dur-2) var(--ease-out)}
.card-row a:hover picture{transform:translateY(-4px)}
.card-row span{font:700 16.5px/1.3 var(--f-ui)}
@media (max-width:760px){ .card-row{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* resource page */
.resource{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.resource__card{position:sticky;top:110px;margin:0}
.resource__card picture{overflow:hidden;border-radius:8px;box-shadow:0 1px 3px rgba(36,19,42,.14),0 24px 44px -30px rgba(36,19,42,.5)}
.resource__card img{width:100%}
.resource__body h1{font-size:clamp(34px,3.8vw,52px);line-height:1.08}
.resource__h2{margin-top:clamp(32px,4vw,48px);font-size:clamp(22px,2vw,28px)}
.resource__body>.resource__h2:first-child{margin-top:0}
@media (max-width:860px){ .resource{grid-template-columns:1fr} .resource__card{position:static;max-width:380px} }

/* Actueel */
.archive{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:start}
.news__feature{display:grid;gap:14px;align-content:start;text-decoration:none}
.news__feature picture{overflow:hidden;border-radius:var(--r-l)}
.news__feature img{width:100%;transition:transform 700ms var(--ease-out)}
.news__feature:hover img{transform:scale(1.03)}
.archive .news__feature h2{font-size:clamp(26px,2.6vw,36px);line-height:1.12}
.archive .news__feature:hover h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.news__meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;font-size:15px;color:var(--inkt-zacht)}
.archive-list{display:grid;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--lijn)}
.archive-list li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 20px;align-items:baseline;padding:16px 0;border-top:1px solid var(--lijn);font-size:15px;color:var(--inkt-zacht)}
.archive-list a{font:700 19px/1.3 var(--f-ui);color:var(--inkt);text-decoration:none}
.archive-list a:hover{color:var(--aubergine);text-decoration:underline;text-underline-offset:4px}
.archive-list--stacked li{grid-template-columns:1fr;gap:4px}
.archive-list--stacked .type{order:-1}
@media (max-width:860px){ .archive{grid-template-columns:1fr} }
@media (max-width:600px){ .archive-list li{grid-template-columns:1fr} }

/* article */
.article__head{max-width:960px}
.article__meta{display:flex;flex-wrap:wrap;margin-top:16px;font-size:15px;color:var(--inkt-zacht)}
.article__meta>*+*::before{content:"·";margin:0 10px}
.article__body{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);gap:clamp(28px,5vw,88px);padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,104px);align-items:start}
.article__figure{margin-top:0!important}
.article__note{padding:16px 18px;border-radius:var(--r-m);background:var(--blos);font-size:15px;color:var(--inkt-zacht)}
.article__aside{position:sticky;top:110px}
@media (max-width:960px){ .article__body{grid-template-columns:1fr} .article__aside{position:static} }

/* vacancies */
.job-facts{display:flex;flex-wrap:wrap;margin:20px 0 0;padding:0;list-style:none;font:700 16px/1.6 var(--f-ui)}
.job-facts li+li::before{content:"·";margin:0 10px;color:var(--inkt-zacht)}
.job-posted{margin-top:12px;font-size:15px;color:var(--inkt-zacht)}
.jobs-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:0 clamp(24px,3vw,48px);margin:0;padding:0;list-style:none}
.jobs-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:center;padding:16px 0;border-top:1px solid var(--lijn);text-decoration:none}
.jobs-list a:hover b{color:var(--aubergine);text-decoration:underline;text-underline-offset:4px}
.jobs-list b{font:700 19px/1.25 var(--f-ui)}
.jobs-list span{grid-column:1;font-size:16px;color:var(--inkt-zacht)}
.jobs-list em{grid-column:2;grid-row:1/3;padding:4px 10px;border-radius:999px;background:var(--munt);font:700 13px/1.2 var(--f-ui);font-style:normal;color:var(--diepgroen)}

/* contact and forms */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,96px);align-items:start}
.contact-list{display:grid;margin:0;border-bottom:1px solid var(--lijn)}
.contact-list div{padding:16px 0;border-top:1px solid var(--lijn)}
.contact-list dt{font:700 15px/1.2 var(--f-ui);color:var(--inkt-zacht)}
.contact-list dd{margin:6px 0 0;font:700 24px/1.3 var(--f-display)}
.contact-list dd a{text-decoration:none}
.contact-list dd a:hover{color:var(--aubergine);text-decoration:underline;text-underline-offset:4px}
.form{display:grid;gap:18px;max-width:700px;padding:clamp(22px,3vw,40px);border:1px solid var(--lijn);border-radius:var(--r-l);background:#fff}
.form h2{font-size:clamp(24px,2.4vw,32px)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:8px;font:700 16px/1.2 var(--f-ui)}
.form label>:is(input,select,textarea){grid-column:1/-1}
.form .req{font:400 14px/1 var(--f-body);color:var(--inkt-zacht)}
.form input,.form select,.form textarea{width:100%;min-height:52px;padding:12px 14px;border:1.5px solid var(--veld);border-radius:var(--r-m);background:#fff;font:400 17px/1.4 var(--f-body);color:var(--inkt);transition:border-color var(--dur-1)}
.form textarea{resize:vertical;min-height:160px}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--inkt)}
.form [aria-invalid="true"]{border-color:#B3261E}
.form__note{font-size:15px;color:var(--inkt-zacht)}
.form__error{font-weight:700;color:#B3261E}
.form-success{display:grid;gap:10px;padding:28px;border-radius:var(--r-l);background:var(--munt)}
.form-success h2{font-size:26px}
@media (max-width:860px){ .contact{grid-template-columns:1fr} }
@media (max-width:560px){ .form__row{grid-template-columns:1fr} }

/* Mondzorg Dichtbij on subpages */
.notice{padding-block:clamp(56px,7vw,104px)}
.notice__grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:18px clamp(28px,5vw,80px);align-items:start}
.notice__date{padding:5px 12px;border-radius:999px;background:var(--munt);font:700 14px/1.25 var(--f-ui);color:var(--diepgroen)}
.notice h2{margin-bottom:14px}
.notice p{max-width:62ch}
.notice__links{display:flex;flex-wrap:wrap;gap:10px 26px;margin:20px 0 0;padding:0;list-style:none}
@media (max-width:760px){ .notice__grid{grid-template-columns:1fr} }

/* list or text next to a framed photo */
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:center}
.split__media{width:100%;max-width:460px;justify-self:end}
@media (max-width:900px){ .split{grid-template-columns:1fr} .split__media{max-width:360px;justify-self:start} }

/* 404 */
.notfound{padding-block:clamp(40px,6vw,96px) clamp(56px,8vw,120px)}
.notfound__grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(28px,5vw,80px);align-items:center}
.notfound h1{font-size:clamp(36px,4.4vw,62px);line-height:1.06;max-width:16ch}
.notfound .link-rows{margin-top:28px}
.notfound__mark{width:100%;max-width:260px;color:var(--lila-zacht);justify-self:end}
@media (max-width:760px){ .notfound__grid{grid-template-columns:1fr} .notfound__mark{max-width:120px;justify-self:start;order:-1} }

/* long Dutch compounds on small screens */
/* grid and flex children may shrink below their longest word; long Dutch compounds carry soft hyphens in the text */
:where(.library,.library a,.card-row,.card-row a,.docs,.doc,.tiles,.news-grid,.facts-list,.facts-list li,.link-rows,.link-rows a,.jobs-list,.jobs-list a,.pillar-cards,.three-up,.trust,.trust li,.footer__grid,.archive-list li,.sequence li,.contact-list div,.vacancies li)>*{min-width:0}
@media (max-width:480px){ h1,h2,h3{-webkit-hyphens:auto;hyphens:auto} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
}