/* sw11 round, group global */

/* ---------- footer: labelled groups, a calmer and shorter block ---------- */
html:root body footer.gf:not(#a):not(#b){padding-top:64px!important}
html:root body footer.gf .gf-in:not(#a):not(#b){grid-template-columns:minmax(0,4.2fr) minmax(0,5.6fr) minmax(0,2.6fr)!important;column-gap:48px!important;align-items:start!important}
html:root body footer.gf nav.xg-nav:not(#a):not(#b){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 48px!important;justify-self:end;width:100%;max-width:470px}
html:root body footer.gf .xg-grp{display:flex;flex-direction:column;align-items:flex-start}
html:root body footer.gf :is(.xg-h,.g46-fv-h):not(#a):not(#b){margin:0 0 10px!important;font-size:13px!important;line-height:20px!important;font-weight:650!important;letter-spacing:.02em!important;color:#f0c83a!important}
html:root body footer.gf :is(.xg-grp,nav.g46-fv)>a:not(#a):not(#b){display:inline-flex!important;align-items:center!important;min-height:34px!important;padding:0!important;font-size:16px!important;line-height:1.3!important}
html:root body footer.gf nav.g46-fv:not(#a):not(#b){gap:0!important;align-content:start!important}
html:root body footer.gf .legal-line:not(#a):not(#b){margin-top:44px!important;display:flex!important;flex-wrap:wrap;align-items:center;column-gap:6px}
html:root body footer.gf .legal-line:not(#a):not(#b)::before{flex:0 0 100%}
html:root body footer.gf .xg-legal{margin-left:auto;display:inline-flex;gap:28px}
html:root body footer.gf .xg-legal a:not(#a):not(#b){min-height:0!important;color:inherit;text-decoration:none!important}
html:root body footer.gf .xg-legal a:not(#a):not(#b):hover{text-decoration:underline!important}

/* ---------- text links: no circled arrow outside buttons; a plain underlined link everywhere ---------- */
html:root body main :is(a,button).g-tl:not(.g46-na):not(.g45-row *):not(.pk-rows *):not(#x):not(#y):not(#z)::after,
html:root body main :is(a,button).g-tl:not(.g46-na):not(.g45-row *):not(.pk-rows *):not(#x):not(#y):not(#z)::before{display:none!important;content:none!important}
html:root body main :is(a,button).g-tl:not(.g46-na):not(.g45-row *):not(.pk-rows *):not(#x):not(#y):not(#z){display:inline!important;min-height:0!important;padding:0!important;gap:0!important;background:none!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:5px!important;text-decoration-color:rgba(242,205,69,.7)!important}
html:root body main :is(a,button).g-tl:not(.g46-na):not(.g45-row *):not(.pk-rows *):not(#x):not(#y):not(#z):hover{text-decoration-color:#f2cd45!important}
/* the second action in every closing block is the ghost button (x-global.js adds the classes) */
html:root body a.xg-gh:not(#a):not(#b){margin-left:0!important}
html:root body .g-close-in .g-acts:not(#a):not(#b){display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:20px!important}
html:root body .g-close-in .g-acts>*:not(#a):not(#b){flex:none!important;white-space:nowrap!important}

/* ---------- scroll reveals: headings and the closing block are complete as soon as they are on screen ---------- */
@supports (animation-timeline:view()){
  html.b2-on body main :is(h2,h3):not(#a):not(#b):not(#c),
  html.b2-on body main :is(h2,h3):not(#a):not(#b):not(#c)::before,
  html.b2-on body main :is(h2,h3):not(#a):not(#b):not(#c)::after,
  html.b2-on body main .g-close :not(#a):not(#b):not(#c),
  html.b2-on body main .g-close :not(#a):not(#b):not(#c)::before,
  html.b2-on body main .g-close :not(#a):not(#b):not(#c)::after{animation-range:entry 0px entry 100px!important}
}

/* ---------- sw12 v2: section choreography (x-global.js adds .sw-rv to blocks below the first screen, .sw-in when they play) ---------- */
@media (prefers-reduced-motion:no-preference){
  html body main .sw-rv:not(.sw-in):not(#a):not(#b){opacity:0!important;transform:translate3d(0,22px,0)!important}
  html body main .sw-rv:not(#a):not(#b){transition:opacity .8s cubic-bezier(.16,1,.3,1) var(--sw-d,0ms),transform 1s cubic-bezier(.16,1,.3,1) var(--sw-d,0ms)!important}
  html body main .sw-rv.sw-in:not(#a):not(#b){opacity:1!important;transform:none!important}
  /* the old per-element fade of group c is folded into this one */
  html body.cpg main .c-rv:not(#x):not(#y):not(#z){opacity:1!important;transform:none!important;transition:none!important}
}
@keyframes sw-hero{from{opacity:0;transform:translateY(30px) scale(.975)}to{opacity:1;transform:none}}
@keyframes sw-show{to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  html.sw-js body :is(.xb-pf li.xb-lead .xb-a,.xb-ov .g37-ch-f .g-print,.xb-mk .g-roomo-x .wp-hf,.cpg-ww li.ww22-s figure.g40-zf):not(.sw-go):not(#a){opacity:0;animation:sw-show .01s 3s forwards}
  html.sw-js body :is(.xb-pf li.xb-lead .xb-a,.xb-ov .g37-ch-f .g-print,.xb-mk .g-roomo-x .wp-hf,.cpg-ww li.ww22-s figure.g40-zf).sw-go:not(#a){animation:sw-hero 1s cubic-bezier(.2,.7,.2,1) var(--sw-d,0ms) both}
}
/* sw12: current page in the menu, a thin flag-yellow line under the word */
html:root body header .g22-nav .g22-n.xg-cur:not(.g22-n-cta):not(#a):not(#b):not(#c){color:#fff6dc!important;background:rgba(242,205,69,.13)!important;background-image:none!important;box-shadow:inset 0 0 0 1px rgba(242,205,69,.34)!important;border-radius:999px!important}

@media (min-width:1101px){
/* sw12 (owner 12 Nov): the application form on vacatures runs across the page instead of one long column */
html body .vac-apply-in:not(#a):not(#b){display:block!important}
html body .vac-apply-in .vac-apply-t:not(#a):not(#b){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,520px);column-gap:72px;align-items:end;margin-bottom:40px;max-width:none!important}
html body .vac-apply-in .vac-apply-t .lab:not(#a):not(#b){grid-column:1/-1}
html body .vac-apply-in .vac-apply-t .sub:not(#a):not(#b){margin:0 0 10px!important}
html body .vac-apply-in .g43-card:not(#a):not(#b){width:100%!important;max-width:none!important;margin:0!important;position:static!important}
html body .vac-apply-in .g43-form:not(#a):not(#b){display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:32px;row-gap:26px;align-items:start}
html body .vac-apply-in .g43-form>*:not(#a):not(#b){grid-column:1/-1;margin:0!important}
html body .vac-apply-in .g43-form>.g37-fhd:not(#a):not(#b){grid-column:1/span 2;align-self:center}
html body .vac-apply-in .g43-form>fieldset[data-name="functie"]:not(#a):not(#b){grid-column:3/-1}
html body .vac-apply-in .g43-form>.g37-grid:not(#a):not(#b){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px 32px!important}
html body .vac-apply-in .g43-form>.g37-grid:has(#g43-ervaring):not(#a):not(#b){grid-template-columns:repeat(2,minmax(0,1fr))!important}
html body .vac-apply-in .g43-form>.g37-grid>*:not(#a):not(#b){grid-column:auto!important;margin:0!important}
html body .vac-apply-in .g43-form .g43-lang:not(#a):not(#b){display:grid!important;grid-template-columns:160px minmax(0,1fr);align-items:center;gap:16px;margin:0 0 10px!important}
html body .vac-apply-in .g43-form .g43-lang .g37-pills:not(#a):not(#b){flex-wrap:nowrap!important;margin:0!important}
html body .vac-apply-in .g43-form>fieldset[data-name="vervoer"]:not(#a):not(#b),html body .vac-apply-in .g43-form>fieldset[data-name="wab"]:not(#a):not(#b){grid-column:1/span 3}
html body .vac-apply-in .g43-form>.g43-cv:not(#a):not(#b){grid-column:1/span 3;grid-row:span 2}
html body .vac-apply-in .g43-form>.g43-chk:not(#a):not(#b){grid-column:4/-1;align-self:center}
html body .vac-apply-in .g43-form>.g37-send:not(#a):not(#b){grid-column:1/-1;display:flex!important;align-items:center;gap:24px}
html body .vac-apply-in .g43-form>.g43-hp:not(#a):not(#b){position:absolute!important}
}
/* the date picker button looks like the other fields */
html body .vac-apply-in .g46-dp-b:not(#a):not(#b){background:rgba(246,239,220,.04)!important;border:1px solid rgba(246,239,220,.16)!important;border-radius:12px!important;box-shadow:inset 0 0 0 1px rgba(243,238,228,.2)!important}
/* websites, below desktop: "Bij elk pakket" as a simple list above the table */
@media (max-width:1100px){
  html body.cpg-web #vergelijken .c-all-b{margin:24px 0 32px;padding:18px 0;border-top:1px solid rgba(242,205,69,.35);border-bottom:1px solid rgba(255,255,255,.08)}
  html body.cpg-web #vergelijken .c-all-h{margin:0 0 12px;font:600 15px/1.4 Manrope,sans-serif;color:#f3eee4}
  html body.cpg-web #vergelijken .c-all-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px 24px}
  html body.cpg-web #vergelijken .c-all-l li{position:relative;padding-left:26px;font-size:15px;line-height:1.4;color:#efe9dc}
  html body.cpg-web #vergelijken .c-all-l li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:#f2cd45}
}
/* below desktop the package column labels have no columns to sit over */
@media (max-width:1100px){html body.cpg-web .c-pkhd{display:none!important}}
/* ---------- sw12 below desktop: elements the 1440 round added get a simple stacked style ---------- */
@media (max-width:1100px){
  html body .xb-note:not(#a){display:flex;flex-direction:column;gap:4px;margin:18px 0 22px;font-size:13px;color:rgba(240,234,220,.7)}
  html body .xb-note span:first-child{color:#f2cd45}
  html body .xb-cap:not(#a){display:flex;flex-direction:column;gap:4px;margin-top:12px}
  html body .xb-cap .xb-tr{font-size:22px;line-height:1.2;color:#f3eee4}
  html body .xb-cap .xb-pp{font-size:13px;color:#f2cd45}
  html body .xb-cap .xb-nm{font-size:14px;line-height:1.45;color:rgba(240,234,220,.75)}
  html body .xb-cap .xb-nm b{color:#f3eee4;font-weight:600;margin-right:4px}
  html body .xb-list:not(#a){list-style:none;margin:0;padding:0;display:grid;gap:36px}
  html body ul.c-facts:not(#a){list-style:none;margin:24px 0;padding:0;display:grid;gap:18px}
  html body ul.c-facts li{display:flex;flex-direction:column;gap:4px;padding-top:14px;border-top:1px solid rgba(246,239,220,.12)}
  html body ul.c-facts li b{font-size:20px;font-weight:400;color:#f3eee4}
  html body ul.c-facts li span{font-size:15px;line-height:1.5;color:rgba(240,234,220,.75)}
  html body .xb-ov-act:not(#a){display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
  html body .xb-ov-pp{display:flex;gap:8px;font-size:14px;color:rgba(240,234,220,.75)}
  html body .xb-ov-pp b{color:#f3eee4;font-weight:600}
  html:root body .g-close-in .g-acts:not(#a):not(#b):not(#c){flex-wrap:wrap!important}
  html:root body .g-close-in .g-acts>*:not(#a):not(#b):not(#c){white-space:normal!important}
}
/* sw12 mobile: header and spacing sweep below desktop (phone and tablet). Sections start a normal distance under the bar
   and sit closer together. Desktop is untouched. */
@media (max-width:1100px){
  html:root{--sw-s:64px;--sw-s2:48px}
  /* first section starts right under the header bar */
  html:root body main>:first-child:not(.gx-hall):not(#a):not(#b):not(#c){margin-top:0!important;padding-top:36px!important}
  /* gaps between sections */
  html:root body main>:is(.g-sec,.g-close,.g-invite,.g43-sol-o,.g37-after):not(:first-child):not(.vac-cmp):not(.g-vac-inv):not(.ww22):not(#a):not(#b):not(#c){padding-top:var(--sw-s)!important;margin-top:0!important}
  html:root body main>.sec.close:not(#a):not(#b):not(#c){margin-top:0!important;padding-top:var(--sw-s)!important;padding-bottom:var(--sw-s)!important}
  html:root body main>:is(.g-close,.pz-year,.pz-faq,.pk-end,.g43-sol-o,.g37-after,.g-invite,.paperband):not(#a):not(#b):not(#c){padding-bottom:var(--sw-s2)!important}
  html:root body main>.paperband:not(#a):not(#b):not(#c){margin-top:24px!important}
  html:root body main>:first-child .g-roomo-in:not(#a):not(#b):not(#c){padding-bottom:40px!important;row-gap:36px!important}
}
@media (min-width:700px) and (max-width:1100px){
  html:root{--sw-s:72px;--sw-s2:56px}
  /* iPad: logo and Menu button get room from the bar edges */
  html:root body .gh:not(#a):not(#b):not(#c){padding:0 28px!important}
  html:root body .gh .g22-nav:not(#a):not(#b):not(#c){padding:6px 14px!important}
  html:root body main>:first-child:not(.gx-hall):not(#a):not(#b):not(#c){padding-top:48px!important}
}
/* sw12 mobile: comparison table package switcher (websites and merkidentiteit) */
.sw-pills{display:none}
@media (max-width:1100px){
  html:root body .sw-pills:not(#a){display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 20px}
  html:root body .sw-pills button{display:inline-flex;align-items:baseline;gap:6px;min-height:44px;padding:10px 12px;border-radius:999px;border:1px solid rgba(246,239,220,.22);background:transparent;color:#f3eee4;font:600 13.5px/1.2 Manrope,sans-serif;cursor:pointer}
  html:root body .sw-pills button small{font-weight:500;font-size:12.5px;color:rgba(240,234,220,.6)}
  html:root body .sw-pills button[aria-pressed="true"]{background:#f2cd45;border-color:#f2cd45;color:#14130f}
  html:root body .sw-pills button[aria-pressed="true"] small{color:rgba(20,19,15,.7)}
  html:root body .pz-scroll:has(.sw-pick):not(#a):not(#b){overflow:visible!important}
  html:root body table.sw-pick:not(#a):not(#b):not(#c){display:block!important;width:100%!important;min-width:0!important;table-layout:auto!important;border-collapse:separate!important}
  html:root body table.sw-pick thead:not(#a):not(#b){display:none!important}
  html:root body table.sw-pick tbody:not(#a):not(#b){display:block!important}
  html:root body table.sw-pick tr:not(#a):not(#b):not(#c){display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)!important;column-gap:16px!important;align-items:center!important;padding:13px 0!important;border-top:1px solid rgba(246,239,220,.12)!important;background:none!important}
  html:root body table.sw-pick tr>:is(th,td):not(#a):not(#b):not(#c){display:none!important;padding:0!important;border:0!important;background:none!important;width:auto!important;min-width:0!important;text-align:left!important;font-size:15px!important;line-height:1.4!important;position:static!important}
  html:root body table.sw-pick tr>th:not(#a):not(#b):not(#c){display:block!important;color:rgba(240,234,220,.72)!important;font-weight:500!important}
  html:root body table.sw-pick[data-col="1"] tr>td:nth-child(2):not(#a):not(#b):not(#c),
  html:root body table.sw-pick[data-col="2"] tr>td:nth-child(3):not(#a):not(#b):not(#c),
  html:root body table.sw-pick[data-col="3"] tr>td:nth-child(4):not(#a):not(#b):not(#c),
  html:root body table.sw-pick[data-col="4"] tr>td:nth-child(5):not(#a):not(#b):not(#c){display:block!important;color:#f3eee4!important}
  html:root body table.sw-pick td:empty::before{content:"";display:inline-block;width:14px;height:1.5px;background:rgba(246,239,220,.3);vertical-align:middle}
}
/* sw12 mobile: older /g22/ "rise" reveals show at once on phone and tablet too (Moreno 13 Nov) */
@media (max-width:1100px){html:root body main .rise:not(#a){opacity:1!important;transform:none!important;transition:none!important}}
/* sw12 mobile: vacatures table stacked on phone */
@media (max-width:699px){
  html:root body table.vac-t:not(#a), html:root body table.vac-t:not(#a) tbody, html:root body table.vac-t:not(#a) tr{display:block!important;width:100%!important}
  html:root body table.vac-t:not(#a) thead{display:none!important}
  html:root body table.vac-t:not(#a) tr{padding:16px 0!important;border-top:1px solid rgba(243,236,217,.14)!important}
  html:root body table.vac-t:not(#a) th, html:root body table.vac-t:not(#a) td{display:block!important;width:auto!important;padding:0!important;border:0!important;text-align:left!important}
  html:root body table.vac-t:not(#a) th{margin-bottom:10px!important}
  html:root body table.vac-t:not(#a) td{margin-top:8px!important}
  html:root body table.vac-t:not(#a) td::before{content:attr(data-h);display:block;font-size:13px;opacity:.7;margin-bottom:2px}
}