/* fonts: self-hosted (OFL), so no visitor data goes to Google */
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/big-shoulders-display-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/big-shoulders-display-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-display: swap; font-weight: 800; src: url(fonts/big-shoulders-display-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-display: swap; font-weight: 800; src: url(fonts/big-shoulders-display-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-display: swap; font-weight: 900; src: url(fonts/big-shoulders-display-latin-ext-900-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-display: swap; font-weight: 900; src: url(fonts/big-shoulders-display-latin-900-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Work Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/work-sans-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Work Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/work-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Work Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/work-sans-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Work Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/work-sans-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Work Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/work-sans-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Work Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/work-sans-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Work Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/work-sans-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Work Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/work-sans-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Work Sans'; font-style: italic; font-display: swap; font-weight: 400; src: url(fonts/work-sans-latin-ext-400-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Work Sans'; font-style: italic; font-display: swap; font-weight: 400; src: url(fonts/work-sans-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root{
  --ink:#3B3937; --ink-deep:#262423; --sage:#B0C4BC; --sage-2:#C3D3CC; --mist:#E6EDE9;
  --paper:#F4F7F5; --wine:#681834; --wine-2:#82203F; --line:rgba(59,57,55,.22);
  --display:"Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body:"Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:1320px; --gut:clamp(20px,4vw,48px); --header:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header) + 12px); -webkit-text-size-adjust:100%}
body{margin:0; font-family:var(--body); font-size:17px; line-height:1.6; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--wine); outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--sage)}
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--wine); color:#fff; padding:10px 16px; border-radius:6px; text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut)}
.ico{width:1.1em; height:1.1em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* type */
.display{font-family:var(--display); font-weight:900; text-transform:uppercase; line-height:.9; letter-spacing:.005em; margin:0}
.h2{font-size:clamp(46px,6.6vw,96px)}
.lead{font-size:clamp(18px,1.6vw,20px); line-height:1.55; max-width:36rem}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55em; min-height:54px; padding:0 24px; border-radius:6px; border:2px solid transparent; font-weight:600; font-size:16px; text-decoration:none; cursor:pointer; transition:background-color .15s, border-color .15s, color .15s; white-space:nowrap}
.btn-wine{background:var(--wine); color:#fff}
.btn-wine:hover{background:var(--wine-2)}
.btn-line{border-color:currentColor; background:transparent}
.btn-line:hover{background:rgba(255,255,255,.08)}
.on-light .btn-line:hover{background:rgba(59,57,55,.06)}
.btn-sm{min-height:44px; padding:0 18px; font-size:15px}
.btn-ink{background:var(--ink); color:var(--mist)}
.btn-ink:hover{background:var(--ink-deep)}

/* header */
.site-header{position:sticky; top:0; z-index:50; background:var(--ink-deep); color:var(--mist); height:var(--header)}
.site-header .wrap{height:100%; display:flex; align-items:center; gap:28px}
.brand{display:flex; align-items:center; color:var(--mist); text-decoration:none}
.brand svg{width:190px; height:auto; fill:currentColor}
.nav{display:flex; gap:26px; margin-left:auto}
.nav a{text-decoration:none; font-size:15px; font-weight:500; color:var(--sage-2); padding:6px 0; border-bottom:2px solid transparent}
.nav a:hover{color:#fff; border-bottom-color:var(--sage)}
.lang{display:flex; border:1.5px solid rgba(176,196,188,.5); border-radius:6px; overflow:hidden}
.lang button{background:none; border:0; padding:6px 10px; font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--sage-2); cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--sage); color:var(--ink-deep)}
.menu-btn{display:none; background:none; border:0; color:var(--mist); padding:8px; margin-right:-8px; cursor:pointer}
.menu-btn .ico{width:28px; height:28px}
.mobile-menu{display:none}

/* hero */
.hero{position:relative; background:var(--ink-deep); color:var(--mist); overflow:hidden}
.hero .wrap{position:relative; z-index:2; min-height:min(calc(100svh - var(--header) - 52px), 860px); display:flex; flex-direction:column; justify-content:center; padding-block:clamp(22px,4.6vh,64px) clamp(28px,6vh,72px)}
.hero-copy{max-width:min(720px, 56%)}
.hero h1{font-size:clamp(56px, min(8.6vw, 12.6vh), 140px); color:var(--mist); line-height:.86}
.hero h1.h1-tight{font-size:clamp(52px, min(7.4vw, 12vh), 100px)}
.hero h1.h1-tight .l{white-space:nowrap}
.hero h1 .l{display:block}
.hero .lead{color:var(--sage-2); margin:clamp(12px,2.2vh,26px) 0 clamp(16px,3vh,30px); max-width:none}
.hero .checks{margin-top:clamp(12px,2vh,22px)}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px}
.hero-ctas .btn-line{color:var(--mist)}
.hero-proof{display:flex; align-items:center; gap:16px; margin-top:clamp(14px,2.6vh,32px); max-width:30rem}
.hero-proof .hp-ico{flex:none; display:grid; place-items:center; width:56px; height:56px; border-radius:50%; border:2px solid var(--sage); color:var(--mist)}
.hero-proof .hp-ico .ico{width:24px; height:24px}
.hero-proof p{margin:0; font-size:15px; line-height:1.45; color:var(--sage-2)}
.hero-proof strong{color:var(--mist); font-weight:600}
.checks{display:flex; flex-wrap:wrap; gap:10px 22px; list-style:none; padding:0; margin:22px 0 0; font-size:15px; color:var(--sage-2)}
.checks li{display:flex; align-items:center; gap:8px}
.checks .ico{color:var(--sage)}
.hero-photo{position:absolute; z-index:1; top:0; right:0; bottom:0; width:47%; clip-path:polygon(0 0,100% 0,100% 100%,33% 100%)}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 30%}

/* marquee */
.marquee{background:var(--wine); color:var(--mist); overflow:hidden; height:52px; display:flex; align-items:center}
.marquee-track{display:flex; flex:none; white-space:nowrap; animation:marquee 46s linear infinite}
.marquee span{font-weight:600; font-size:15px; letter-spacing:.16em; text-transform:uppercase; padding-right:1.4em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* sections */
.section{padding-block:clamp(72px,9vw,128px)}
.s-sage{background:var(--sage)}
.s-ink{background:var(--ink); color:var(--mist)}
.s-deep{background:var(--ink-deep); color:var(--mist)}
.s-wine{background:var(--wine); color:var(--mist)}
.s-mist{background:var(--mist)}
.s-paper{background:var(--paper)}

/* vacatures */
.vac-head{display:grid; grid-template-columns:1fr minmax(0,26rem); gap:24px 48px; align-items:end}
.vac-head p{margin:0}
.tabs{display:flex; flex-wrap:wrap; gap:6px 26px; margin:48px 0 0; padding:0; list-style:none}
.tab{background:none; border:0; padding:4px 0 6px; cursor:pointer; font-family:var(--display); font-weight:800; font-size:clamp(24px,2.4vw,32px); color:rgba(59,57,55,.55); border-bottom:4px solid transparent; line-height:1.1}
.tab sup{font-family:var(--body); font-size:13px; font-weight:600; margin-left:3px; vertical-align:super}
.tab:hover{color:var(--ink)}
.tab[aria-pressed="true"]{color:var(--ink); border-bottom-color:var(--wine)}
.filters{display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 34px; align-items:center}
.select{position:relative}
.select select{appearance:none; -webkit-appearance:none; background:rgba(255,255,255,.35); border:1.5px solid rgba(59,57,55,.4); border-radius:6px; padding:10px 40px 10px 14px; font-size:15px; font-weight:500; cursor:pointer}
.select::after{content:""; position:absolute; right:15px; top:50%; width:8px; height:8px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:translateY(-70%) rotate(45deg); pointer-events:none}
.result-count{font-size:15px; margin-left:auto}
.vac-list{list-style:none; margin:0; padding:0; border-bottom:1.5px solid var(--line)}
.vac{display:grid; grid-template-columns:minmax(0,1fr) 280px auto; gap:12px 32px; align-items:center; padding:26px 10px; margin-inline:-10px; border-top:1.5px solid var(--line); transition:background-color .15s}
.vac:hover{background:rgba(255,255,255,.18)}
.vac h3{font-family:var(--display); font-weight:800; font-size:clamp(28px,2.7vw,38px); line-height:1; margin:0 0 10px}
.vac-meta{display:flex; flex-wrap:wrap; gap:6px 20px; font-size:15px; margin:0; padding:0; list-style:none}
.vac-meta li{display:flex; align-items:center; gap:7px}
.pay{font-family:var(--display); font-weight:800; font-size:clamp(28px,2.4vw,36px); line-height:1; white-space:nowrap}
.pay small{display:block; font-family:var(--body); font-weight:500; font-size:14px; margin-top:6px}
.vac-actions{display:flex; gap:10px; justify-content:flex-end}
.icon-btn{width:44px; height:44px; display:inline-grid; place-items:center; border-radius:6px; border:2px solid var(--ink); color:var(--ink); text-decoration:none}
.icon-btn:hover{background:var(--ink); color:var(--mist)}
.icon-btn .ico{width:20px; height:20px}
.vac-empty{padding:40px 0; font-size:18px}
.open-app{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-top:44px; padding:28px 32px; background:var(--ink); color:var(--mist); border-radius:8px}
.open-app p{margin:0; font-size:18px; max-width:38rem}
.open-app strong{font-family:var(--display); font-weight:800; font-size:30px; display:block; line-height:1.05; margin-bottom:4px}

/* steps */
.steps-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,6vw,96px); align-items:center}
.steps-photo{clip-path:polygon(0 0,100% 0,100% 100%,28% 100%); aspect-ratio:3/4}
.steps-photo img{width:100%; height:100%; object-fit:cover}
.steps{list-style:none; margin:44px 0 0; padding:0; display:grid; gap:30px}
.step{display:grid; grid-template-columns:72px 1fr; gap:20px; align-items:start}
.step-n{font-family:var(--display); font-weight:900; font-size:76px; line-height:.8; color:var(--sage)}
.step h3{margin:0 0 4px; font-size:21px; font-weight:600; color:#fff}
.step p{margin:0; color:var(--sage-2); max-width:32rem}

/* over ons */
.about-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,6vw,96px); align-items:center}
.about-photo{position:relative}
.about-photo::before{content:""; position:absolute; left:-18px; bottom:-18px; width:62%; height:58%; background:var(--wine); z-index:0}
.about-photo img{position:relative; z-index:1; width:100%; aspect-ratio:4/5; object-fit:cover}
.quote{margin:30px 0 26px; padding:0; font-size:clamp(21px,2vw,26px); line-height:1.45; font-weight:500; max-width:34rem}
.quote p{margin:0}
.quote p::before{content:"“"; color:var(--wine); font-family:var(--display); font-weight:900; font-size:1.6em; line-height:0; vertical-align:-.28em; margin-right:4px}
.quote cite{display:block; margin-top:14px; font-style:normal; font-size:15px; font-weight:600; color:var(--wine)}
.about-lead{margin:26px 0 18px; font-size:clamp(20px,1.9vw,24px); line-height:1.45; font-weight:500; max-width:34rem}
.about-body{max-width:36rem; margin:0}
.values{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:40px 0 0; padding-top:30px; border-top:1.5px solid var(--line)}
.values dt{font-family:var(--display); font-weight:800; font-size:28px; color:var(--wine); line-height:1}
.values dd{margin:8px 0 0; font-size:15.5px; line-height:1.5}

/* forms */
.apply-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(36px,5vw,80px); align-items:start}
.apply-side .h2{font-size:clamp(46px,5.2vw,80px)}
.apply-side .lead{color:#F0DCE3; margin:24px 0 30px}
.apply-side .btn-line{color:#fff}
.apply-side .contact-lines{margin-top:30px; font-size:15px; color:#F0DCE3}
.apply-side .contact-lines p{margin:4px 0}
.panel{background:var(--paper); color:var(--ink); border-radius:10px; padding:clamp(24px,3.4vw,44px)}
.form-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px 16px}
.f{grid-column:span 6; display:flex; flex-direction:column; gap:6px}
.f-3{grid-column:span 3} .f-2{grid-column:span 2} .f-4{grid-column:span 4}
.f label,.f legend{font-size:14.5px; font-weight:600}
.f .opt{font-weight:400; color:#6d6a67}
.f input[type=text],.f input[type=email],.f input[type=tel],.f input[type=number],.f input[type=date],.f select,.f textarea{width:100%; background:#fff; border:1.5px solid #B9B6B2; border-radius:6px; padding:12px 14px; font-size:16px; min-height:50px}
.f textarea{min-height:110px; resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--ink); outline:2px solid var(--sage); outline-offset:0}
.f .hint,.hint{font-size:13.5px; color:#6d6a67; margin:0}
.f.invalid input,.f.invalid select,.f.invalid textarea{border-color:#B3261E}
.err{font-size:13.5px; color:#B3261E; font-weight:500; margin:0}
fieldset.f{border:0; margin:0; padding:0; min-width:0}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:2px}
.chip{position:relative}
.chip input{position:absolute; opacity:0; inset:0; cursor:pointer}
.chip span{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1.5px solid #B9B6B2; border-radius:6px; background:#fff; font-size:15px; font-weight:500; cursor:pointer}
.chip input:checked + span{background:var(--ink); border-color:var(--ink); color:#fff}
.chip input:focus-visible + span{outline:3px solid var(--wine); outline-offset:2px}
.form-sep{grid-column:span 6; display:flex; align-items:center; gap:14px; margin-top:8px; font-family:var(--display); font-weight:800; font-size:24px}
.form-sep::after{content:""; flex:1; height:1.5px; background:var(--line)}
.form-sep small{font-family:var(--body); font-size:14px; font-weight:500; color:#6d6a67}
.file{position:relative; display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 14px; border:1.5px dashed #9E9A96; border-radius:6px; background:#fff; cursor:pointer; font-size:15px}
.file:hover{border-color:var(--ink)}
.file input{position:absolute; inset:0; opacity:0; cursor:pointer}
.file .ico{width:22px; height:22px; color:var(--wine)}
.file .fname{color:#6d6a67; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.file.has-file{border-style:solid; border-color:var(--ink)}
.file.has-file .fname{color:var(--ink); font-weight:500}
.consent{grid-column:span 6; display:flex; gap:12px; align-items:flex-start; font-size:14.5px}
.consent input{width:22px; height:22px; margin-top:1px; accent-color:var(--wine); flex:none}
.linkish{background:none; border:0; padding:0; text-decoration:underline; cursor:pointer; font-weight:600}
.form-foot{grid-column:span 6; display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:6px}
.hp{position:absolute; left:-9999px}
.success{text-align:left; padding:10px 0}
.success h3{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(40px,4.5vw,60px); line-height:.92; margin:0 0 14px}
.success p{margin:0 0 12px; max-width:32rem}
.demo-note{font-size:13.5px; background:var(--mist); border-left:4px solid var(--wine); padding:10px 14px; margin-top:16px}

/* employers */
.emp-photo{height:clamp(240px,34vw,460px); clip-path:polygon(0 0,100% 0,100% 100%,14% 100%)}
.emp-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 45%}
.emp-grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(36px,5vw,80px); align-items:start; margin-top:clamp(48px,6vw,80px)}
.emp-grid .lead{color:var(--sage-2); margin:26px 0 0}
.points{list-style:none; padding:0; margin:40px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:30px 32px}
.points li{border-top:2px solid var(--sage); padding-top:16px}
.points h3{margin:0 0 6px; font-size:19px; font-weight:600; color:#fff}
.points p{margin:0; font-size:15.5px; color:var(--sage-2)}
.emp-also{margin-top:34px; font-size:15.5px; color:var(--sage-2)}
.emp-also strong{color:#fff}
.panel h3.ph{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(36px,3.4vw,48px); line-height:.92; margin:0 0 8px}
.panel .psub{margin:0 0 24px; font-size:15.5px}

/* memberships */
.mem-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:20px}
.mem-head p{margin:0; max-width:30rem}
.mem{list-style:none; padding:0; margin:48px 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.mem li{background:#fff; border-radius:8px; padding:26px 24px; display:flex; flex-direction:column; gap:14px}
.mem .logo{height:72px; display:flex; align-items:center}
.mem .logo img{max-height:72px; width:auto}
.mem .seal{width:72px; height:72px; border-radius:50%; border:2.5px solid var(--ink); display:grid; place-items:center; color:var(--ink)}
.mem .seal .ico{width:32px; height:32px}
.mem .seal.pending{border-style:dashed; color:var(--wine); border-color:var(--wine)}
.mem h3{margin:0; font-size:18px; font-weight:600; line-height:1.3}
.mem p{margin:0; font-size:14.5px; line-height:1.5; color:#5b5855}
.tag{align-self:flex-start; font-size:12.5px; font-weight:600; padding:3px 9px; border-radius:4px; background:var(--mist); color:var(--ink)}
.tag.wine{background:#F3E3E8; color:var(--wine)}

/* faq */
.faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); margin-top:48px}
.faq-grid h3{font-family:var(--display); font-weight:800; font-size:32px; margin:0 0 14px}
details{border-top:1.5px solid var(--line)}
details:last-of-type{border-bottom:1.5px solid var(--line)}
summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; padding:18px 0; font-weight:600; font-size:17.5px}
summary::-webkit-details-marker{display:none}
summary .ico{width:22px; height:22px; margin-top:3px; transition:transform .2s}
details[open] summary .ico{transform:rotate(45deg)}
details p{margin:0 0 20px; max-width:36rem}
.faq-a{max-width:36rem}
.faq-a p{margin:0 0 14px} .faq-a > :last-child{margin-bottom:20px}
.faq-a ul{margin:0 0 14px; padding-left:1.2em}

/* footer */
.site-footer{position:relative; background:var(--ink-deep); color:var(--sage-2); overflow:hidden}
.foot-call{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:28px 40px; padding:clamp(64px,8vw,112px) 0 clamp(44px,5vw,72px); border-bottom:1px solid rgba(176,196,188,.18)}
.foot-kicker{margin:0 0 10px; font-size:clamp(18px,1.6vw,21px); color:var(--sage-2)}
.foot-phone{display:inline-block; font-family:var(--display); font-weight:900; font-size:clamp(50px,10vw,150px); line-height:.86; letter-spacing:.005em; color:var(--mist); text-decoration:none; padding-bottom:.06em;
  background:linear-gradient(var(--wine),var(--wine)) no-repeat 0 100% / 0 .08em; transition:background-size .7s var(--ease), color .3s}
.foot-phone:hover,.foot-phone:focus-visible{background-size:100% .08em; color:#fff}
.foot-actions{display:flex; flex-wrap:wrap; gap:12px; padding-bottom:.4em}
.foot-actions .btn{color:var(--mist)}
.foot-grid{display:grid; grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.5fr)); gap:40px; padding:clamp(48px,5vw,72px) 0 clamp(48px,5vw,64px)}
.foot-logo{display:inline-block}
.foot-brand svg{width:230px; fill:var(--mist)}
.foot-brand p{margin:14px 0 0; font-size:15.5px; color:var(--sage)}
.foot-certs{display:flex; align-items:center; gap:24px; margin-top:30px}
.foot-certs img{height:44px; width:auto; filter:brightness(0) invert(1); opacity:.72}
.site-footer h3{font-size:14px; font-weight:600; color:var(--mist); margin:0 0 16px}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:15.5px}
.site-footer ul a,.foot-bottom a{text-decoration:none; background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0 1px; transition:background-size .4s var(--ease), color .2s}
.site-footer ul a:hover,.foot-bottom a:hover{color:#fff; background-size:100% 1px}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding:22px 0 26px; border-top:1px solid rgba(176,196,188,.18); font-size:14px}
.foot-bottom .links{display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px}
.foot-bottom .linkish{font-weight:400}
.made a{color:var(--mist); font-weight:600}
.foot-mark{max-width:var(--wrap); margin:clamp(8px,2vw,24px) auto 0; padding:0 var(--gut); line-height:0}
.foot-mark svg{display:block; width:100%; fill:rgba(176,196,188,.1); transform:translateY(5%)}

/* dialog */
dialog{border:0; border-radius:10px; padding:0; max-width:680px; width:calc(100% - 32px); color:var(--ink); background:var(--paper)}
dialog::backdrop{background:rgba(38,36,35,.7)}
.dlg{padding:32px clamp(22px,4vw,40px) 28px; max-height:80vh; overflow:auto}
.dlg h2{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:40px; line-height:.95; margin:0 0 16px}
.dlg h3{font-size:16px; margin:20px 0 4px}
.dlg p,.dlg li{font-size:15px}
.dlg ul,.dlg ol{padding-left:20px; margin:6px 0 10px}
.dlg a{color:var(--wine)}
.dlg .pv-date{font-size:13px; color:#6b706d; margin-top:22px}
.dlg-close{position:absolute; top:12px; right:12px; background:none; border:0; padding:8px; cursor:pointer}
.dlg-close .ico{width:24px; height:24px}

/* sticky mobile bar */
.mbar{display:none}
body.menu-open .mbar{visibility:hidden}

/* ===== motion: everything follows the diagonal wedge from the logo ===== */
@property --x{syntax:"<percentage>"; inherits:true; initial-value:140%}
:root{--ease:cubic-bezier(.16,1,.3,1)}

/* wedge wipe: a wine blade sweeps across, the photo follows behind it */
.rv-wedge{position:relative}
.rv-wedge img,.hero-photo img{clip-path:polygon(0 0, var(--x) 0, calc(var(--x) - 25%) 100%, 0 100%)}
.rv-wedge::after,.hero-photo::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--wine);
  clip-path:polygon(var(--x) 0, calc(var(--x) + 16%) 0, calc(var(--x) - 9%) 100%, calc(var(--x) - 25%) 100%)}

@media (prefers-reduced-motion:no-preference){
  /* load: one orchestrated hero moment */
  .motion .hero-photo{animation:wipe 1.5s var(--ease) .05s both}
  .motion .hero h1 .l,.motion .vac-hero h1{animation:slot 1s var(--ease) both}
  .motion .hero h1 .l:nth-child(1),.motion .vac-hero h1{animation-delay:.3s}
  .motion .hero h1 .l:nth-child(2){animation-delay:.4s}
  .motion .hero h1 .l:nth-child(3){animation-delay:.5s}
  .motion .hero .lead,.motion .vac-hero .crumbs,.motion .vac-hero-meta{animation:lift .8s var(--ease) .7s both}
  .motion .hero-ctas,.motion .vac-hero-pay{animation:lift .8s var(--ease) .8s both}
  .motion .hero .checks,.motion .vac-hero .hero-ctas{animation:lift .8s var(--ease) .9s both}
  .motion .hero-proof,.motion .vac-hero .checks{animation:lift .8s var(--ease) 1s both}
  @keyframes wipe{from{--x:-20%}}
  @keyframes slot{from{transform:translateY(100%); clip-path:inset(-10% -5% 100% -5%)} to{clip-path:inset(-10% -5% -10% -5%)}}
  @keyframes lift{from{opacity:0; transform:translateY(14px)}}

  /* scroll: display type rises out of its slot, photos get the wedge wipe */
  .motion .rv-type{transition:transform 1s var(--ease), clip-path 1s var(--ease)}
  .motion .rv-type:not(.in){transform:translateY(100%); clip-path:inset(-20% -5% 100% -5%)}
  .motion .rv-type.in{clip-path:inset(-20% -5% -20% -5%)}
  .motion .rv-wedge{transition:--x 1.5s var(--ease)}
  .motion .rv-wedge:not(.in){--x:-20%}
  .motion .about-photo::before{transition:transform 1.1s var(--ease) .35s}
  .motion .about-photo:not(.in)::before{transform:translate(-26px,26px) scale(.9)}
  .motion .rv-up{transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--i,0) * 90ms)}
  .motion .rv-up:not(.in){opacity:0; transform:translateY(24px)}

  /* steps: numbers are outlines until you scroll past them */
  .motion .step-n{transition:color .5s, -webkit-text-stroke-color .5s}
  .motion .step:not(.lit) .step-n{color:transparent; -webkit-text-stroke:1.5px var(--sage)}

  /* vacancy list: rows come in one after another, also after filtering */
  .motion .vac-list:not(.in) .vac{opacity:0}
  .motion .vac-list.in .vac{animation:lift .6s var(--ease) both; animation-delay:calc(var(--i,0) * 55ms)}

  /* scroll-linked depth on the big photos */
  @supports (animation-timeline:view()){
    .hero-photo img{animation:drift linear both; animation-timeline:scroll(root); animation-range:0 100vh}
    .steps-photo img{animation:drift-in linear both; animation-timeline:view()}
    @keyframes drift{from{transform:scale(1.12)} to{transform:scale(1.12) translateY(5%)}}
    @keyframes drift-in{from{transform:scale(1.12) translateY(-4.5%)} to{transform:scale(1.12) translateY(4.5%)}}
  }

  /* faq answers open smoothly */
  @supports (interpolate-size:allow-keywords){
    :root{interpolate-size:allow-keywords}
    details::details-content{block-size:0; overflow:hidden; transition:block-size .45s var(--ease), content-visibility .45s allow-discrete}
    details[open]::details-content{block-size:auto}
  }
  summary .ico{transition:transform .35s var(--ease)}
}

/* the monogram, drawn as an outline behind the wine sections */
.s-wine{overflow:hidden}
.apply-side{position:relative}
.apply-side > :not(.mono-bg){position:relative; z-index:1}
.apply-grid .panel{position:relative; z-index:1}
.mono-bg{position:absolute; z-index:0; left:-14%; top:calc(100% + 40px); height:clamp(460px,50vw,720px); aspect-ratio:73/134.6; pointer-events:none; overflow:visible}
.mono-bg use{fill:none; stroke-linejoin:round; stroke-linecap:round}
.mono-bg .mb-base{stroke:rgba(240,220,227,.22); stroke-width:.24}
.mono-bg .mb-trace{stroke:#F0DCE3; stroke-width:.34; opacity:0}
@media (prefers-reduced-motion:no-preference){
  .motion .mono-bg .mb-base{stroke-dasharray:1000; stroke-dashoffset:1000; transition:stroke-dashoffset 3.2s cubic-bezier(.65,0,.35,1)}
  .motion .mono-bg.in .mb-base{stroke-dashoffset:0}
  .motion .mono-bg.in .mb-trace{opacity:.75; stroke-dasharray:46 454; transition:opacity 1.2s 2.4s; animation:trace 14s linear infinite}
  @keyframes trace{to{stroke-dashoffset:-1000}}
  @supports (animation-timeline:view()){
    .motion .mono-bg{animation:mono-drift linear both; animation-timeline:view()}
    @keyframes mono-drift{from{transform:translateY(-5%)} to{transform:translateY(5%)}}
  }
}
@media (max-width:920px){
  .mono-bg{left:auto; right:-6%; top:-36px; height:min(96vw,440px)}
}

/* hover: the same diagonal, on things you can click */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn{position:relative; isolation:isolate; overflow:hidden; transition:color .35s var(--ease), border-color .35s var(--ease)}
  .btn::before{content:""; position:absolute; inset:-2px; z-index:-1; background:var(--sweep, var(--ink-deep));
    clip-path:polygon(0 0, 0% 0, -30% 100%, 0 100%); transition:clip-path .5s var(--ease)}
  .btn:hover::before{clip-path:polygon(0 0, 130% 0, 100% 100%, 0 100%)}
  .btn .ico{transition:transform .4s var(--ease)}
  .btn:hover .ico{transform:rotate(-10deg) scale(1.08)}
  .btn-ink{--sweep:var(--wine)}
  .btn-line{--sweep:var(--ink)}
  .btn.btn-line:hover{color:var(--mist)}
  .on-dark .btn-line{--sweep:var(--mist)}
  .on-dark .btn.btn-line:hover{color:var(--ink-deep); border-color:var(--mist)}
  .hero .btn-wine,.vac-hero .btn-wine,.site-header .btn-wine,.mobile-menu .btn-wine,.s-ink .btn-wine,.s-deep .btn-wine{--sweep:var(--mist)}
  .hero .btn-wine:hover,.vac-hero .btn-wine:hover,.site-header .btn-wine:hover,.mobile-menu .btn-wine:hover,.s-ink .btn-wine:hover,.s-deep .btn-wine:hover{color:var(--wine)}
  .eb-actions .btn-line:hover{background:transparent}

  .vac{position:relative}
  .vac::before{content:""; position:absolute; left:0; top:-1.5px; bottom:0; width:5px; background:var(--wine); transform:scaleY(0); transform-origin:50% 100%; transition:transform .45s var(--ease)}
  .vac:hover::before{transform:scaleY(1)}
  .vac > div:first-child{transition:transform .45s var(--ease)}
  .vac:hover > div:first-child{transform:translateX(12px)}
  .vac h3 a:hover{text-decoration:none}

  .nav a{border-bottom-color:transparent !important; background:linear-gradient(var(--sage),var(--sage)) no-repeat 0 100% / 0 2px; transition:background-size .4s var(--ease), color .2s}
  .nav a:hover,.nav a[aria-current="page"]{background-size:100% 2px}
  .tab{background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 100% / 0 4px; transition:background-size .4s var(--ease), color .2s}
  .tab:hover{background-size:100% 4px}
  .tab[aria-pressed="true"]{background-image:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee-track{animation:none}
}

/* responsive */
@media (max-width:1080px){
  .nav{gap:18px}
  .nav a{font-size:14px}
  .brand svg{width:160px}
  .mem{grid-template-columns:1fr 1fr}
}
@media (max-width:920px){
  .nav,.header-cta{display:none}
  .lang{margin-left:auto}
  .menu-btn{display:block}
  .mobile-menu{position:fixed; inset:var(--header) 0 0 0; z-index:49; background:var(--ink-deep); color:var(--mist); padding:28px var(--gut); flex-direction:column; gap:6px}
  .mobile-menu.open{display:flex}
  .mobile-menu a:not(.btn){font-family:var(--display); font-weight:800; font-size:40px; text-decoration:none; padding:4px 0}
  .mobile-menu .btn{margin-top:24px}
  .hero .wrap{min-height:0; padding-block:44px 40px}
  .hero-copy{max-width:none}
  .hero-photo{position:relative; width:100%; height:62vw; max-height:460px; clip-path:polygon(0 0,100% 0,100% 100%,22% 100%)}
  .vac-head,.steps-grid,.about-grid,.apply-grid,.emp-grid{grid-template-columns:1fr}
  .steps-photo{aspect-ratio:16/10; order:2}
  .about-photo{max-width:440px}
  .vac{grid-template-columns:1fr auto; padding:22px 10px}
  .vac-actions{grid-column:span 2; justify-content:flex-start}
  .faq-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr; gap:40px 24px}
  .foot-brand{grid-column:span 2}
}
@media (max-width:620px){
  body{font-size:16.5px; padding-bottom:72px}
  .foot-actions{width:100%}
  .foot-actions .btn{flex:1}
  .brand svg{width:150px}
  .hero h1,.hero h1.h1-tight{font-size:clamp(54px,17vw,92px)}
  .hero h1.h1-tight .l{white-space:normal}
  .tabs{flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut); scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap}
  .result-count{margin-left:0; width:100%}
  .vac{grid-template-columns:1fr}
  .vac-actions{grid-column:auto}
  .vac-actions .btn{flex:1}
  .points,.values,.mem{grid-template-columns:1fr}
  .f-3{grid-column:span 6}
  .filters .select{flex:1}
  .filters select{width:100%}
  .step{grid-template-columns:44px 1fr; gap:14px}
  .step-n{font-size:58px}
  .open-app{padding:24px}
  .mbar{display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:8px; position:fixed; z-index:60; left:0; right:0; bottom:0; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--ink-deep); box-shadow:0 -6px 20px rgba(0,0,0,.25)}
  /* iOS 26+: als de browserbalk inklapt blijft een vaste onderbalk zweven. Daarom schuift de balk weg bij naar beneden scrollen
     (dan klapt ook de browserbalk in) en komt hij terug bij omhoog scrollen, bovenaan en onderaan de pagina. */
  .mbar{transition:transform .28s var(--ease), visibility 0s linear 0s}
  .mbar.away{transform:translateY(calc(100% + 24px)); visibility:hidden; transition:transform .28s var(--ease), visibility 0s linear .28s}
  .mbar a{min-height:48px; padding:0 10px; font-size:14.5px}
  .mbar .btn-line{color:var(--mist)}
}

/* single-column faq */
.faq-one{max-width:860px; margin-top:40px}
.faq-emp{margin:26px 0 0; font-size:16px}
.faq-emp a{font-weight:600}

/* employer banner (home) */
.eb{background:var(--sage); color:var(--ink); overflow:hidden}
.eb-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); min-height:480px}
.eb-photo{clip-path:polygon(0 0,74% 0,100% 100%,0 100%)}
.eb-photo img{width:100%; height:100%; object-fit:cover}
.eb-copy{align-self:center; padding:clamp(56px,6vw,96px) var(--gut) clamp(56px,6vw,96px) clamp(16px,3vw,40px); max-width:760px}
.eb-copy h2{font-size:clamp(52px,6.6vw,104px); color:var(--ink)}
.eb-copy p{color:var(--ink); font-size:clamp(18px,1.6vw,20px); max-width:34rem; margin:24px 0 32px}
.eb-actions{display:flex; flex-wrap:wrap; gap:14px}
.eb-actions .btn-line{color:var(--ink)}
.eb-actions .btn-line:hover{background:rgba(59,57,55,.08)}

/* employer page */
.benefits{list-style:none; padding:0; margin:56px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:44px 64px}
.benefits li{display:grid; grid-template-columns:56px 1fr; gap:20px; align-items:start}
.bi{width:56px; height:56px; border-radius:50%; background:var(--sage); color:var(--ink); display:grid; place-items:center}
.bi .ico{width:26px; height:26px}
.benefits h3{font-family:var(--display); font-weight:800; font-size:32px; line-height:1; margin:6px 0 10px}
.benefits p{margin:0; max-width:30rem}
.roles{list-style:none; padding:0; margin:52px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 48px}
.roles li{border-top:1.5px solid var(--line); padding:24px 0 34px}
.roles h3{font-family:var(--display); font-weight:800; font-size:clamp(30px,3vw,40px); line-height:1; margin:0 0 10px}
.roles p{margin:0; max-width:22rem}
.wtta-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(36px,5vw,80px); align-items:center}
.wtta-grid .lead{margin:24px 0 10px}
.wtta-src{font-size:14px; color:#6d6a67; margin:0}
.wtta-src a{color:inherit}
.wtta-card{background:var(--ink); color:var(--mist); border-radius:10px; padding:clamp(28px,3vw,40px)}
.wtta-card p{margin:0; color:var(--sage-2); font-size:17px}
.wtta-card .wtta-date{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(56px,6vw,84px); line-height:.9; color:var(--sage); margin:0 0 18px}
.chain-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px)}
.chain-grid > div{border-top:2px solid var(--sage); padding-top:24px}
.chain-grid h2{font-size:clamp(38px,4.2vw,60px); color:var(--mist)}
.chain-grid p{color:var(--sage-2); font-size:18px; max-width:32rem; margin:18px 0 0}
.nav a[aria-current="page"]{color:#fff; border-bottom-color:var(--sage)}
@media (max-width:920px){
  .eb-grid{grid-template-columns:1fr; min-height:0}
  .eb-photo{height:62vw; max-height:440px; clip-path:polygon(0 0,100% 0,100% 82%,0 100%)}
  .wtta-grid,.chain-grid{grid-template-columns:1fr}
  .roles{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .benefits,.roles{grid-template-columns:1fr}
  .benefits h3{font-size:28px}
  .eb-actions .btn{flex:1 1 100%}
}

/* vacancy title links */
.vac h3 a{color:inherit; text-decoration:none}
.vac h3 a:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px}

/* vacancy page */
.vac-hero{background:var(--ink-deep); color:var(--mist); padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,96px)}
.crumbs{margin:0 0 22px; font-size:15px; color:var(--sage-2)}
.crumbs a{color:var(--mist)}
.crumbs span[aria-hidden]{margin:0 6px; color:var(--sage)}
.vac-hero h1{font-size:clamp(52px,7.4vw,112px); color:var(--mist); max-width:15ch}
.vac-hero-meta{list-style:none; padding:0; margin:26px 0 0; display:flex; flex-wrap:wrap; gap:8px 26px; font-size:17px; color:var(--sage-2)}
.vac-hero-meta li{display:flex; align-items:center; gap:8px}
.vac-hero-meta .ico{color:var(--sage)}
.vac-hero-pay{font-family:var(--display); font-weight:900; font-size:clamp(40px,4.6vw,64px); color:var(--sage); margin:20px 0 30px; line-height:1}
.vac-hero-pay small{font-family:var(--body); font-weight:500; font-size:17px; color:var(--sage-2)}
.vac-hero .btn-line{color:var(--mist)}
.vac-body{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(36px,5vw,80px); align-items:start}
.vac-h2{font-size:clamp(40px,4.4vw,60px); margin-bottom:22px}
.vac-desc{max-width:40rem; font-size:18px}
.vac-desc p{margin:0 0 16px}
.vac-desc ul{margin:0 0 16px; padding-left:22px}
.vac-desc li{margin-bottom:6px}
.vac-facts{background:#fff; border-radius:10px; padding:28px}
.vac-facts h3{font-family:var(--display); font-weight:800; font-size:30px; margin:0 0 14px}
.vac-facts dl{margin:0 0 18px}
.vac-facts dl div{display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1.5px solid var(--line)}
.vac-facts dt{color:#6d6a67}
.vac-facts dd{margin:0; font-weight:600; text-align:right}
.checks.dark{display:grid; gap:8px; color:var(--ink); margin:0}
.checks.dark .ico{color:var(--wine)}
@media (max-width:920px){ .vac-body{grid-template-columns:1fr} }

/* cookie choice */
.cookie{position:fixed; z-index:80; left:20px; bottom:20px; width:min(400px, calc(100vw - 40px)); background:var(--mist); color:var(--ink); border-radius:12px; padding:22px 22px 20px; box-shadow:0 18px 50px rgba(0,0,0,.32), 0 0 0 1px rgba(38,36,35,.06)}
.cookie h2{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:30px; line-height:.95; margin:0 0 8px; color:var(--ink-deep)}
.cookie p{font-size:14.5px; line-height:1.55; margin:0 0 16px}
.cookie .linkish{color:var(--wine); font-weight:500}
.cookie-btns{display:flex; gap:8px}
.cookie-btns .btn{flex:1; min-height:46px}
.cookie-btns .btn-line{color:var(--ink)}
.cookie-btns .btn-line:hover{background:rgba(59,57,55,.06)}
.motion .cookie:not([hidden]){animation:ckIn .55s cubic-bezier(.2,.8,.2,1) .6s both}
@keyframes ckIn{from{transform:translateY(18px); opacity:0}}
@media (max-width:620px){ .cookie{left:10px; right:10px; width:auto; bottom:calc(78px + env(safe-area-inset-bottom)); padding:18px 18px 16px} .cookie h2{font-size:26px} }

/* vacature-alert */
.alert-card{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,4vw,56px); margin-top:20px; padding:clamp(24px,3.4vw,44px); background:var(--paper); color:var(--ink); border-radius:10px; align-items:start}
.alert-card .kicker{text-transform:uppercase; letter-spacing:.14em; font-size:13px; font-weight:600; color:var(--wine); margin:0 0 10px}
.alert-title{font-size:clamp(46px,5.2vw,76px); margin:0 0 16px}
.alert-intro p:not(.kicker){font-size:17px; margin:0; max-width:30rem}
.alert-panel .form-grid{gap:14px}
.alert-panel .chip span{min-height:40px; padding:0 14px; font-size:14.5px}
.alert-send{flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:4px}
.alert-send .hint .linkish{font-weight:500; color:var(--ink)}
.alert-err{margin-top:10px}
.alert-panel .success h3{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:34px; line-height:1; margin:0 0 8px}
.alert-section{padding-top:clamp(40px,5vw,64px); padding-bottom:clamp(40px,5vw,64px)}
.alert-section .alert-card{margin-top:0}
@media (max-width:920px){ .alert-card{grid-template-columns:1fr} }
@media (max-width:620px){ .alert-panel .f-3{grid-column:span 6} }

/* losse privacypagina (/privacy/) */
.pv-page{background:var(--paper); padding:clamp(40px,7vw,96px) 0 clamp(56px,8vw,120px)}
.pv-page .wrap{max-width:820px}
.pv-page .pv-title{font-family:var(--display); font-size:clamp(44px,7vw,84px); line-height:.95; text-transform:uppercase; margin:0 0 28px}
.pv-page h3{font-size:21px; margin:34px 0 8px}
.pv-page a{color:var(--wine)}

/* telefoon met landcode */
.tel-wrap{display:flex; gap:8px}
.tel-wrap .tel-cc{flex:0 0 112px; width:112px !important; min-width:0; padding:12px 26px 12px 12px}
.tel-wrap input{flex:1; min-width:0}