:root{--bg:#f2f0ea;--ink:#111;--accent:#0f6b5b;--hot:#ff5c35;--line:rgba(17,17,17,.18);--paper:#f7f5ef}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,sans-serif;overflow-x:hidden}a{color:inherit}img{display:block;max-width:100%}
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;padding:22px 30px;mix-blend-mode:multiply}.nav{display:flex;justify-content:space-between;align-items:center}.logo{font:400 26px 'Archivo Black',Arial,sans-serif;letter-spacing:-1px;text-decoration:none}.navlinks{display:flex;gap:25px;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.navlinks a{text-decoration:none;position:relative}.navlinks a:after{content:'';position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:currentColor;transition:.25s}.navlinks a:hover:after,.navlinks a.active:after{right:0}.menu-btn{display:none;border:0;background:none;font:600 12px Inter;text-transform:uppercase;letter-spacing:.08em}
.hero{min-height:100vh;position:relative;padding:130px 30px 40px;display:grid;grid-template-columns:1.45fr .55fr;align-items:end}.hero-word{font:400 clamp(90px,17vw,280px)/.72 'Archivo Black',Arial,sans-serif;letter-spacing:-.08em;text-transform:uppercase;margin:0;position:relative;z-index:4}.hero-word .line{display:block}.hero-word .accent{color:var(--accent)}.hero-side{padding-bottom:25px;position:relative;z-index:5}.hero-side p{font-size:18px;line-height:1.55;max-width:420px}.hero-side a,.text-link{display:inline-block;margin-top:22px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}.kicker{font-size:12px;text-transform:uppercase;letter-spacing:.15em}.living-visual{position:absolute;right:0;top:9vh;width:46vw;height:70vh;z-index:1;pointer-events:none}.living-visual svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.living-visual .route-main{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:6 10;opacity:.72}.living-visual .route-accent{fill:none;stroke:var(--hot);stroke-width:6;opacity:.95}.photo-dot{position:absolute;border-radius:50%;overflow:hidden;border:6px solid var(--bg);box-shadow:0 12px 30px rgba(0,0,0,.12)}.photo-dot img{width:100%;height:100%;object-fit:cover}.p1{width:180px;height:180px;right:7%;top:5%}.p2{width:105px;height:105px;right:39%;top:48%}.p3{width:140px;height:140px;right:4%;bottom:0}.signal{position:absolute;width:16px;height:16px;background:var(--hot);border-radius:50%;box-shadow:0 0 0 0 rgba(255,92,53,.35);animation:pulse 2s infinite}.s1{left:40%;top:27%}.s2{left:63%;top:53%}.s3{left:50%;top:77%}@keyframes pulse{70%{box-shadow:0 0 0 26px rgba(255,92,53,0)}}
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden}.ticker-track{display:inline-block;padding:18px 0;font:500 18px/1 Inter;animation:tick 24s linear infinite}.ticker-track span{margin-right:52px}@keyframes tick{to{transform:translateX(-50%)}}
.manifesto{padding:150px 30px 100px;display:grid;grid-template-columns:.6fr 1.4fr;gap:60px}.manifesto h2,.display{font:400 clamp(54px,7vw,110px)/.92 'Archivo Black',Arial,sans-serif;letter-spacing:-.06em;text-transform:uppercase;margin:0}.manifesto h2 em,.display em{font-style:normal;color:var(--accent)}
.flow{padding:30px 30px 140px}.flow-wrap{position:relative;min-height:840px;border-top:1px solid var(--line)}.flow svg{position:absolute;inset:0;width:100%;height:100%}.flow-copy{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:70px}.phase{padding-right:26px}.phase:nth-child(2){margin-top:150px}.phase:nth-child(3){margin-top:300px}.phase:nth-child(4){margin-top:450px}.phase b{font:400 38px 'Archivo Black';display:block;margin-bottom:14px}.phase p{font-size:15px;line-height:1.55;max-width:240px}
.jobs{background:#111;color:#f3f0e8;padding:90px 0 0}.jobs-head{padding:0 30px 55px;display:flex;justify-content:space-between;align-items:end}.jobs-head h2{font:400 clamp(60px,8vw,125px)/.86 'Archivo Black';text-transform:uppercase;letter-spacing:-.06em;margin:0}.jobs-head p{max-width:390px;line-height:1.5}.jobrow{display:grid;grid-template-columns:110px 1.4fr .8fr 70px;align-items:center;padding:30px;border-top:1px solid rgba(255,255,255,.18);text-decoration:none;transition:.25s}.jobrow:hover{background:var(--accent);padding-left:44px}.jobrow .no{font-size:12px;opacity:.55}.jobrow strong{font:400 clamp(30px,4vw,58px)/1 'Archivo Black';text-transform:uppercase;letter-spacing:-.03em}.jobrow span{font-size:15px;opacity:.75}.jobrow i{font-style:normal;font-size:28px}
.split{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.split .image{position:sticky;top:0;height:100vh;overflow:hidden}.split img{width:100%;height:100%;object-fit:cover}.split .copy{padding:120px 60px;display:flex;flex-direction:column;justify-content:center}.split h3{font:400 clamp(56px,6vw,95px)/.9 'Archivo Black';text-transform:uppercase;letter-spacing:-.055em;margin:0 0 30px}.split p{font-size:20px;line-height:1.6;max-width:600px}.split .quote{font-size:14px;text-transform:uppercase;letter-spacing:.1em;margin-top:45px}
.footer{padding:70px 30px;display:flex;justify-content:space-between;gap:30px;border-top:1px solid var(--line)}.footer a{text-decoration:none}.footer nav{display:flex;gap:20px;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
/* interior pages */
.page-hero{min-height:82vh;padding:180px 30px 70px;display:grid;grid-template-columns:.75fr 1.25fr;gap:60px;align-items:end;border-bottom:1px solid var(--line);position:relative}.page-hero .eyebrow{align-self:start;padding-top:16px}.page-title{font:400 clamp(72px,11vw,180px)/.78 'Archivo Black';letter-spacing:-.075em;text-transform:uppercase;margin:0}.page-title em{display:block;color:var(--accent);font-style:normal}.page-lede{max-width:560px;font-size:20px;line-height:1.6;margin:28px 0 0}.route-mark{position:absolute;right:5vw;top:15vh;width:22vw;height:22vw;border:1px solid var(--line);border-radius:50%;opacity:.8}.route-mark:before,.route-mark:after{content:'';position:absolute;border-radius:50%;background:var(--hot)}.route-mark:before{width:14px;height:14px;left:16%;top:60%}.route-mark:after{width:9px;height:9px;right:12%;top:22%}
.editorial{padding:120px 30px;display:grid;grid-template-columns:.6fr 1.4fr;gap:70px;border-bottom:1px solid var(--line)}.editorial .body{max-width:980px}.editorial h2{font:400 clamp(46px,6vw,92px)/.95 'Archivo Black';letter-spacing:-.055em;text-transform:uppercase;margin:0 0 36px}.editorial p{font-size:19px;line-height:1.72;max-width:780px}.editorial .lead{font-size:28px;line-height:1.45;max-width:900px}.stripes{padding:0 30px}.stripe{display:grid;grid-template-columns:100px 1fr .5fr;gap:30px;align-items:start;padding:34px 0;border-top:1px solid var(--line)}.stripe:last-child{border-bottom:1px solid var(--line)}.stripe h3{font:400 clamp(28px,3vw,48px)/1 'Archivo Black';text-transform:uppercase;letter-spacing:-.03em;margin:0}.stripe p{margin:0;line-height:1.65;max-width:480px}.stripe .num{font-size:12px;opacity:.65}
.bigquote{padding:140px 30px;background:var(--accent);color:#f4f1e8}.bigquote p{font:400 clamp(48px,7vw,110px)/.92 'Archivo Black';letter-spacing:-.055em;text-transform:uppercase;margin:0;max-width:1300px}
.image-band{height:75vh;overflow:hidden;position:relative}.image-band img{width:100%;height:100%;object-fit:cover}.image-band .caption{position:absolute;left:30px;bottom:30px;background:var(--bg);padding:10px 14px;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.filterbar{position:sticky;top:75px;z-index:20;background:rgba(242,240,234,.94);backdrop-filter:blur(12px);padding:22px 30px;border-bottom:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap}.filterbar button{border:1px solid var(--ink);background:transparent;padding:10px 14px;border-radius:100px;font:500 12px Inter;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}.filterbar button.active,.filterbar button:hover{background:var(--ink);color:var(--bg)}
.vacancy-list{background:var(--ink);color:var(--bg)}.vacancy-list .jobrow{grid-template-columns:90px 1.1fr .8fr .7fr 50px}.jobrow[hidden]{display:none}.demo-note{padding:18px 30px;border-bottom:1px solid rgba(255,255,255,.18);font-size:12px;opacity:.65;text-transform:uppercase;letter-spacing:.08em}
.job-hero{min-height:92vh;padding:170px 30px 60px;background:var(--ink);color:var(--bg);display:grid;grid-template-columns:.7fr 1.3fr;gap:60px;align-items:end}.job-hero h1{font:400 clamp(72px,11vw,175px)/.8 'Archivo Black';letter-spacing:-.075em;text-transform:uppercase;margin:0}.job-meta{display:flex;gap:30px;flex-wrap:wrap;margin-top:35px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;opacity:.8}.job-actions{align-self:start;padding-top:12px}.apply-link{display:inline-flex;align-items:center;gap:25px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:8px;font-size:20px}.job-body{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px;padding:110px 30px}.job-body aside{position:sticky;top:120px;align-self:start}.job-body article{max-width:860px}.job-body h2{font:400 48px/1 'Archivo Black';text-transform:uppercase;letter-spacing:-.04em;margin:0 0 24px}.job-body p,.job-body li{font-size:18px;line-height:1.7}.job-body ul{padding-left:20px;margin-bottom:55px}.apply-panel{background:var(--accent);color:var(--bg);padding:100px 30px;display:grid;grid-template-columns:.7fr 1.3fr;gap:60px}.apply-panel h2{font:400 clamp(54px,6vw,92px)/.9 'Archivo Black';text-transform:uppercase;letter-spacing:-.05em;margin:0}.apply-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}.apply-form label{font-size:12px;text-transform:uppercase;letter-spacing:.08em}.apply-form input,.apply-form select,.apply-form textarea{width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.6);background:transparent;color:inherit;padding:12px 0;font:16px Inter}.apply-form textarea{min-height:100px;resize:vertical}.apply-form .wide{grid-column:1/-1}.apply-form button{justify-self:start;border:1px solid currentColor;background:transparent;color:inherit;border-radius:100px;padding:14px 20px;font:600 12px Inter;text-transform:uppercase;letter-spacing:.08em}
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}.contact-copy{padding:180px 30px 80px;background:var(--accent);color:var(--bg)}.contact-copy h1{font:400 clamp(72px,10vw,150px)/.8 'Archivo Black';text-transform:uppercase;letter-spacing:-.07em;margin:0 0 40px}.contact-copy p{font-size:19px;line-height:1.6;max-width:540px}.contact-form{padding:180px 7vw 80px;display:flex;align-items:center}.contact-form form{width:100%;display:grid;gap:24px}.contact-form input,.contact-form textarea,.contact-form select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--ink);padding:12px 0;font:16px Inter}.contact-form textarea{height:120px}.contact-form button{justify-self:start;border:1px solid var(--ink);background:transparent;border-radius:100px;padding:14px 20px;font:600 12px Inter;text-transform:uppercase;letter-spacing:.08em}
.faq{padding:120px 30px}.faq-item{border-top:1px solid var(--line);padding:28px 0}.faq-item:last-child{border-bottom:1px solid var(--line)}.faq-item summary{cursor:pointer;font:400 clamp(26px,3vw,44px)/1.1 'Archivo Black';text-transform:uppercase;letter-spacing:-.03em;list-style:none}.faq-item p{max-width:820px;font-size:17px;line-height:1.7;margin:24px 0 5px}
@media(max-width:900px){.site-header{padding:18px 20px}.navlinks{display:none}.menu-btn{display:block}.nav.open .navlinks{display:flex;position:absolute;left:20px;right:20px;top:60px;background:var(--bg);padding:20px;flex-direction:column;border:1px solid var(--line)}.hero{grid-template-columns:1fr;padding:110px 20px 34px}.hero-word{font-size:23vw}.hero-side{padding-top:40px}.living-visual{width:70vw;height:45vh;top:26vh;right:-15vw;opacity:.95}.p1{width:110px;height:110px}.p2{width:75px;height:75px}.p3{width:90px;height:90px}.manifesto,.editorial,.job-body,.apply-panel,.job-hero,.page-hero{grid-template-columns:1fr}.manifesto{padding:95px 20px 70px}.flow{padding:20px 20px 90px}.flow-copy{grid-template-columns:1fr}.phase:nth-child(n){margin-top:40px}.flow-wrap{min-height:auto}.flow svg{display:none}.jobs-head{padding:70px 20px 40px;display:block}.jobrow,.vacancy-list .jobrow{grid-template-columns:50px 1fr 35px;padding:25px 20px}.jobrow span:not(.no),.vacancy-list .jobrow span{display:none}.split{grid-template-columns:1fr}.split .image{position:relative;height:58vh}.split .copy{padding:80px 20px}.footer{padding:50px 20px;flex-direction:column}.footer nav{flex-wrap:wrap}.page-hero{padding:145px 20px 50px;min-height:70vh}.route-mark{width:42vw;height:42vw;top:13vh}.editorial{padding:80px 20px}.stripes{padding:0 20px}.stripe{grid-template-columns:55px 1fr}.stripe p{grid-column:2}.bigquote{padding:90px 20px}.image-band{height:55vh}.filterbar{top:62px;padding:15px 20px}.job-hero{padding:145px 20px 50px}.job-body{padding:75px 20px}.job-body aside{position:relative;top:auto}.apply-panel{padding:80px 20px}.apply-form{grid-template-columns:1fr}.apply-form .wide{grid-column:auto}.contact-wrap{grid-template-columns:1fr}.contact-copy{padding:145px 20px 70px}.contact-form{padding:80px 20px}.faq{padding:80px 20px}}

/* TDG 2026-09-16: fixes na Playwright-controle mobiel/iPad */
.hero{overflow:hidden}
/* header: geen multiply meer (menu liet de kop erdoorheen schijnen, logo verdween op zwart);
   script.js zet .on-dark op logo/menu boven donkere vlakken */
.site-header{mix-blend-mode:normal}.logo,.menu-btn,.navlinks{transition:color .2s}
.logo.on-dark,.menu-btn.on-dark{color:var(--bg)}
@media(min-width:901px){.navlinks.on-dark{color:var(--bg)}}
/* titels passen in hun kolom (oude clamp liep op 1180-1440 buiten beeld) */
.job-hero h1{font-size:clamp(64px,8.5vw,150px)}.page-title{font-size:clamp(64px,10.5vw,170px)}
/* grid-kinderen mogen smaller worden dan hun langste woord */
.hero>*,.manifesto>*,.editorial>*,.job-hero>*,.job-body>*,.apply-panel>*,.page-hero>*,.split>*,.contact-wrap>*,.stripe>*,.jobrow>*{min-width:0}
@media(max-width:900px){
  .menu-btn{color:var(--ink);padding:10px 0 10px 16px}
  .nav.open .navlinks{padding:8px 20px;box-shadow:0 18px 40px rgba(0,0,0,.12)}
  .nav.open .navlinks a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav.open .navlinks a:last-child{border-bottom:0}
  .nav.open .navlinks a:after{display:none}
  .vacancy-list .jobrow span{display:revert}
  .vacancy-list .jobrow span:not(.no){display:none}
  .jobrow strong{overflow-wrap:anywhere}
  .job-hero h1{font-size:clamp(40px,12.5vw,110px);line-height:.86}
  .job-meta{gap:10px 24px}
  .page-title{font-size:clamp(52px,16vw,130px)}
  .bigquote p{font-size:clamp(30px,10vw,80px)}
  .manifesto h2,.display{font-size:clamp(38px,11vw,80px)}
  .editorial h2{font-size:clamp(34px,10vw,72px)}
  .editorial .lead{font-size:22px}
  .split h3{font-size:clamp(40px,12vw,80px)}
  .contact-copy h1{font-size:clamp(60px,20vw,140px)}
  .jobs-head h2{font-size:clamp(56px,17vw,120px)}
  .job-body h2{font-size:clamp(30px,9vw,48px)}
  .apply-panel h2{font-size:clamp(40px,11vw,80px)}
  .faq-item summary{font-size:clamp(22px,6.5vw,40px)}
  .stripe h3{font-size:clamp(24px,7.5vw,44px)}
  .footer nav{gap:14px 20px}
  .living-visual{right:-3vw;width:66vw}
}
@media(max-width:600px){
  .page-hero{padding-top:200px}
  .route-mark{top:76px;right:20px;width:24vw;height:24vw}
  .living-visual{top:12vh;height:40vh;width:64vw;right:-2vw}
  .p1{width:88px;height:88px}.p2{width:60px;height:60px}.p3{width:72px;height:72px}
  .photo-dot{border-width:4px}
}
/* fotocirkels bleven op desktop/iPad over de hero-tekst liggen: visual lager maken */
@media(min-width:901px){.living-visual{height:54vh}}