/* Vormlaag in de stijl van apple.com (29-10-2026), ronde 2; bovenkant en vacatures naar variant C (30-10).
   Thijs: "fonts, indelingen, tekstgroottes, foto placements ... zoals Apple ... ook mega geschikt voor mobiel", en daarna
   "ik zie niet echt mega verschil ... je mag wel meer aanpassen en netjes maken en beter design maken".
   Wat deze laag doet: een letter en vaste maten; bovenaan de foto's, dan het bedrag in een lime blok, de knop en het
   rijtje met vinkjes; vacatures als lijst in een witte kaart met het bedrag rechts; Werk in het magazijn als galerij van grote staande foto's; vragen als lijst met
   dunne lijnen; ronde knoppen; een smalle doorzichtige kopbalk. Geen tekst veranderd. Alleen de openbare pagina's. */

#public-shell{
  --pv-kop1:32px; --pv-kop1-lh:1.1; --pv-kop1-ls:-.022em;
  --pv-kop2:28px; --pv-kop2-lh:1.14; --pv-kop2-ls:-.018em;
  --pv-tekst:17px; --pv-tekst-lh:1.47; --pv-tekst-ls:-.012em;
  --pv-label:12px;
  --pv-grijs:#6E6E73;
  --pv-lijn:#D2D2D7;
  --pv-hoek:22px;
  --pv-tussen:80px;
  --pv-breed:1120px;
}
@media (min-width:768px){ #public-shell{ --pv-kop1:48px; --pv-kop1-lh:1.08; --pv-kop2:40px; --pv-kop2-lh:1.1; --pv-tussen:104px; } }
@media (min-width:1068px){ #public-shell{ --pv-kop1:64px; --pv-kop1-lh:1.06; --pv-kop1-ls:-.024em; --pv-kop2:48px; --pv-kop2-lh:1.08; --pv-kop2-ls:-.02em; --pv-tussen:128px; --pv-hoek:28px; } }

/* 1. Een letter: het stappenplan stond nog in Natio. */
#public-shell #stapplan, #public-shell #stapplan *{font-family:var(--font)!important}

/* 2. Kopbalk: smal, wit doorschijnend, met een dunne lijn, zoals apple.com. Op desktop op de randen van de inhoud. */
#public-shell > .pub-top{padding-top:10px!important;padding-bottom:10px!important;background:rgba(255,255,255,.82)!important;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.07)!important}
#public-shell > .pub-top .rechts .knop{height:36px!important;min-height:36px!important;padding:0 16px!important;font-size:14px!important;border-radius:999px!important}
@media (min-width:1068px){
  #public-shell > .pub-top{padding-left:max(32px,calc((100% - var(--pv-breed)) / 2))!important;padding-right:max(32px,calc((100% - var(--pv-breed)) / 2))!important}
}

/* 3. Een inhoudsbreedte op grote schermen en een vaste ruimte tussen de blokken. */
@media (min-width:1068px){
  #public-shell #screen-home > :not(.ahero-a),
  #public-shell .pub-main > .bento-kop--midden,
  #public-shell .pub-main > .faq-card,
  #public-shell .pub-main > .pub-footer{max-width:var(--pv-breed);margin-left:auto!important;margin-right:auto!important}
}
#public-shell #screen-home #vac-boven{margin-top:calc(var(--pv-tussen) * .75)!important}
#public-shell #screen-home .logos-sectie,
#public-shell #screen-home #stapplan,
#public-shell #screen-home #vacatures-anchor,
#public-shell #screen-home .faces-sectie,
#public-shell .pub-main > .bento-kop--midden{margin-top:var(--pv-tussen)!important;margin-bottom:0!important}

/* 4. Bovenkant (variant C, Thijs 30-10): de foto's, het label, het bedrag in een lime blok, de regel, de knop en het
   rijtje met vinkjes, alles op dezelfde linkerlijn. Op groot scherm staan de vinkjes rechts naast het bedrag. */
#public-shell #screen-home .ahero-a{display:flex!important;flex-direction:column!important;align-items:stretch!important;text-align:left!important;padding-top:16px!important}
#public-shell #screen-home .ha-txt{display:contents!important}
#public-shell #screen-home .ha-txt .eyebrow{order:1;font-size:var(--pv-label)!important;line-height:1.33!important;letter-spacing:.07em!important;font-weight:600!important;color:#7342F4!important;margin:18px 0 8px!important;text-align:left}
#public-shell #screen-home .ha-txt .ha-sub{order:2;font-size:var(--pv-tekst);line-height:1.35;letter-spacing:var(--pv-tekst-ls);font-weight:600;color:#1A1A1C;margin:0 0 10px}
#public-shell #screen-home .ha-txt h1{order:3;background:#C2FFAD;border-radius:16px;padding:11px 16px;font-size:min(8.7vw,34px)!important;line-height:1.18!important;letter-spacing:-.025em!important;font-weight:700!important;color:#1A1A1C;max-width:none;margin:0!important;text-align:left;text-wrap:balance}
#public-shell #screen-home .ha-txt .ha-regel{order:4;margin:12px 0 0;font-size:19px;line-height:26px;font-weight:600;letter-spacing:-.015em;color:#1A1A1C;text-align:left;text-wrap:balance}
#public-shell #screen-home .ha-txt .ha-regel[hidden]{display:none}
#public-shell #screen-home .ha-txt .ha-cta{order:5;margin-top:16px!important;width:100%;justify-content:flex-start!important}
#public-shell #screen-home .ha-media{order:0;margin-top:0!important;width:100%}
#public-shell #screen-home .ha-txt .lead{order:7;font-size:var(--pv-tekst)!important;line-height:var(--pv-tekst-lh)!important;letter-spacing:var(--pv-tekst-ls)!important;color:var(--pv-grijs)!important;text-align:left;max-width:none;margin:24px 0 0!important}
@media (min-width:1068px){
  #public-shell #screen-home .ahero-a{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:start!important;max-width:var(--pv-breed);margin:0 auto!important}
  #public-shell #screen-home .ha-media{grid-column:1 / -1;grid-row:1}
  #public-shell #screen-home .ha-txt .eyebrow{grid-column:1;grid-row:2;margin-top:40px!important}
  #public-shell #screen-home .ha-txt .ha-sub{grid-column:1;grid-row:3}
  #public-shell #screen-home .ha-txt h1{grid-column:1;grid-row:4;justify-self:start;padding:12px 22px;font-size:48px!important;line-height:56px!important}
  #public-shell #screen-home .ha-txt .ha-regel{grid-column:1;grid-row:5}
  #public-shell #screen-home .ha-txt .ha-cta{grid-column:1;grid-row:6}
  #public-shell #screen-home .ha-txt .lead{grid-column:1 / -1;grid-row:7;font-size:21px!important;line-height:1.38!important;margin:40px 0 0!important}
}
/* Bovenaan de staande video in het midden en de foto's ernaast (30-10, Thijs). Op de telefoon staat hij bij binnenkomst
   in het midden (landing.js) en veeg je naar de foto's; vanaf tablet staan ze naast elkaar. */
#public-shell #screen-home .ha-right{display:contents!important}
#public-shell #screen-home .ha-foto{order:1}
#public-shell #screen-home .ha-vid{order:2;position:relative;cursor:pointer;background:#E7E8EA}
#public-shell #screen-home .ha-foto2{order:3}
#public-shell #screen-home .ha-foto,#public-shell #screen-home .ha-foto2,#public-shell #screen-home .ha-vid{background-size:cover!important;background-position:center!important;border-radius:var(--pv-hoek)!important}
@media (max-width:767px){
  #public-shell #screen-home .ha-media{--rij:min(77vw,300px);display:flex!important;flex-direction:row!important;gap:10px!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    width:100vw!important;max-width:100vw!important;align-self:center;padding:0 18px!important;height:auto!important}
  #public-shell #screen-home .ha-media::-webkit-scrollbar{display:none}
  #public-shell #screen-home .ha-foto,#public-shell #screen-home .ha-foto2,#public-shell #screen-home .ha-vid{height:var(--rij)!important;aspect-ratio:auto;scroll-snap-align:center}
  #public-shell #screen-home .ha-foto,#public-shell #screen-home .ha-foto2{flex:0 0 calc(var(--rij) * .75)!important;width:calc(var(--rij) * .75)!important}
  #public-shell #screen-home .ha-vid{flex:0 0 calc(var(--rij) * .5625)!important;width:calc(var(--rij) * .5625)!important}
}
@media (min-width:768px){
  #public-shell #screen-home .ha-media{--rij:min(440px,52vh);display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px!important;max-width:var(--pv-breed);height:auto!important}
  #public-shell #screen-home .ha-foto,#public-shell #screen-home .ha-foto2{width:auto!important;height:var(--rij)!important;aspect-ratio:auto}
  #public-shell #screen-home .ha-vid{width:calc(var(--rij) * .5625)!important;height:var(--rij)!important;aspect-ratio:auto}
}
/* De geluidsknop op de video: zichtbaar 36, aanraakvlak 44. */
#public-shell #screen-home .ha-geluid{position:absolute;right:8px;bottom:8px;width:36px;height:36px;padding:0;border:0;border-radius:999px;background:rgba(20,20,22,.6);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#public-shell #screen-home .ha-geluid[hidden]{display:none}
#public-shell #screen-home .ha-geluid::after{content:"";position:absolute;inset:-4px}
#public-shell #screen-home .ha-geluid svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#public-shell #screen-home .ha-geluid .golf{display:none}
#public-shell #screen-home .ha-geluid.aan .golf{display:inline}
#public-shell #screen-home .ha-geluid.aan .kruis{display:none}

/* 5. De aanmeldknop als ronde knop, zoals de knoppen op apple.com. */
#public-shell .ha-cta .knop-cta.ha-primair,
#public-shell .flex-cta .knop-cta{border-radius:999px!important}
#public-shell #screen-home .ha-cta .knop-cta.ha-primair{min-height:56px!important;padding:8px 8px 8px 35px!important}
#public-shell #screen-home .ha-cta .knop-cta.ha-primair .cta-lbl{font-size:17px!important;font-weight:600!important}
#public-shell #screen-home .ha-cta .knop-cta.ha-primair .cta-arr,
#public-shell .flex-cta .knop-cta .cta-arr{border-radius:999px!important;width:40px!important;height:40px!important}
@media (min-width:768px){ #public-shell #screen-home .ha-cta .knop-cta.ha-primair{width:auto!important;min-width:320px;padding-left:26px!important} }
/* De WhatsApp-knop onder de aanmeldknop (30-10, Thijs koos B): klein, zo breed als de tekst, de tekst op dezelfde lijn als bij de aanmeldknop. */
#public-shell #screen-home .ha-txt .ha-cta{align-items:flex-start}
#public-shell #screen-home .ha-cta .knop-wa{justify-content:flex-start;gap:10px;box-sizing:border-box;width:auto;min-height:44px;margin-top:0;padding:6px 7px 6px 35px;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:-.005em;color:#16181a;text-decoration:none}
#public-shell #screen-home .ha-cta .knop-wa[hidden]{display:none}
#public-shell #screen-home .ha-cta .knop-wa .cta-arr{width:30px;height:30px;border-radius:999px;background:#C2FFAD}
#public-shell #screen-home .ha-cta .knop-wa .cta-arr svg{width:16px;height:16px}
@media (min-width:768px){
  #public-shell #screen-home .ha-txt .ha-cta{flex-direction:column;width:fit-content}
  #public-shell #screen-home .ha-cta .knop-wa{padding-left:26px}
}

/* 6. Het rijtje met vinkjes: vinkje 24 op regelhoogte 24, dus het staat altijd precies op de eerste regel. */
#public-shell #screen-home .ha-punten{order:6;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:stretch!important;align-self:stretch!important;
  width:auto!important;max-width:none!important;gap:12px!important;overflow:visible;margin:20px 0 0!important;padding:0!important;list-style:none}
#public-shell #screen-home .ha-punten[hidden]{display:none!important}
#public-shell #screen-home .ha-punten li{display:flex!important;flex-direction:row!important;align-items:flex-start!important;justify-content:flex-start;gap:12px!important;
  min-height:0;padding:0!important;background:none!important;border:0!important;border-radius:0!important;font-size:17px!important;font-weight:500!important;line-height:24px!important;letter-spacing:-.012em;text-align:left!important;color:#1A1A1C}
#public-shell #screen-home .ha-punten .ha-punt{min-width:0;text-wrap:balance}
#public-shell #screen-home .ha-punten .ha-vink{flex:0 0 24px!important;width:24px!important;height:24px!important}
#public-shell #screen-home .ha-punten .ha-vink svg{width:14px!important;height:14px!important}
@media (min-width:1068px){
  #public-shell #screen-home .ha-punten{grid-column:2;grid-row:2 / span 5;align-self:start!important;gap:14px!important;margin:40px 0 0!important}
  #public-shell #screen-home .ha-punten li{font-size:19px!important;line-height:26px!important}
  #public-shell #screen-home .ha-punten .ha-vink{flex-basis:26px!important;width:26px!important;height:26px!important}
}

/* 7. Alle sectiekoppen even groot en links uitgelijnd, met hetzelfde kleine label erboven. */
#public-shell #screen-home #vac-boven .partner-subkop,
#public-shell #screen-home .logos-titel,
#public-shell #screen-home .sp-kop h2,
#public-shell #screen-home .bento-kop h2,
#public-shell #screen-home .faces-kop h2,
#public-shell #sec-faq-titel{font-size:var(--pv-kop2)!important;line-height:var(--pv-kop2-lh)!important;letter-spacing:var(--pv-kop2-ls)!important;font-weight:700!important;text-align:left!important}
#public-shell #screen-home #vac-boven .partner-subkop,
#public-shell #screen-home .logos-titel{margin:0 0 22px!important}
#public-shell #screen-home .faces-kop,
#public-shell .pub-main > .bento-kop--midden{text-align:left!important;justify-content:flex-start!important}
#public-shell .pub-main > .bento-kop--midden{max-width:760px;margin-left:auto!important;margin-right:auto!important;margin-bottom:12px!important}
#public-shell #screen-home .eyebrow2,
#public-shell #screen-home .faces-eyebrow{font-size:var(--pv-label)!important;line-height:1.33!important;letter-spacing:.07em!important;font-weight:600!important;margin-bottom:8px!important}
#public-shell #screen-home .eyebrow2{color:var(--pv-grijs)!important}

/* 8. Vacatures: een witte kaart met rijen, een dunne lijn tussen de rijen en het bedrag rechts (Thijs 30-10). */
#public-shell #screen-home #vac-boven .partner-blok{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
#public-shell #screen-home .partnergrid.vk-lijst{background:#fff!important;border:1px solid #E8E8ED!important;border-radius:16px!important;overflow:hidden}
#public-shell #screen-home .vk-rij{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff!important;border:0!important;border-radius:0!important}
#public-shell #screen-home .vk-rij + .vk-rij{border-top:1px solid #E8E8ED!important}
@media (hover:hover){ #public-shell #screen-home .vk-rij:hover{background:#F5F5F7!important} }
#public-shell #screen-home .vk-foto{width:60px;height:60px;border-radius:12px}
#public-shell #screen-home .vk-tekst{gap:3px}
#public-shell #screen-home .vk-tekst b{font-size:15px;line-height:1.3;letter-spacing:-.005em;font-weight:650}
#public-shell #screen-home .vk-tekst span{font-size:13px;line-height:1.3;color:var(--pv-grijs)}
#public-shell #screen-home .vk-loon{font-size:12px;font-weight:650;padding:6px 9px;margin-left:auto}
@media (max-width:374px){
  #public-shell #screen-home .vk-rij{gap:10px;padding:12px}
  #public-shell #screen-home .vk-foto{width:48px;height:48px}
}
@media (min-width:768px){
  #public-shell #screen-home .vk-rij{gap:16px;padding:14px 18px}
  #public-shell #screen-home .vk-foto{width:64px;height:64px}
  #public-shell #screen-home .vk-tekst b{font-size:17px}
  #public-shell #screen-home .vk-tekst span{font-size:15px}
  #public-shell #screen-home .vk-loon{font-size:14px;padding:7px 12px}
}

/* 10. Werk in het magazijn: een galerij van grote staande foto's, zonder kader eromheen. */
#public-shell #screen-home #vacatures-anchor .flex-blok{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
#public-shell #screen-home .flex-carr{margin-left:-18px!important;margin-right:-18px!important;padding:0!important}
#public-shell #screen-home #flex-events{gap:12px!important;scroll-snap-type:x mandatory;padding:0 18px 4px!important;scroll-padding-left:18px}
#public-shell #screen-home .flex-ev{flex:0 0 72%!important;width:72%!important;max-width:320px!important;height:auto!important;aspect-ratio:2/3;border-radius:var(--pv-hoek)!important;overflow:hidden;scroll-snap-align:start}
#public-shell #screen-home .flex-ev img,#public-shell #screen-home .flex-ev video{width:100%!important;height:100%!important;object-fit:cover;display:block}
#public-shell #screen-home .flex-ev .ha-geluid{right:12px;bottom:12px;z-index:3}
#public-shell #screen-home .flex-ev-lab{font-size:21px!important;font-weight:700!important;letter-spacing:-.01em!important;left:18px!important;bottom:16px!important}
#public-shell #screen-home .flex-cta{margin-top:24px!important}
@media (min-width:1068px){
  #public-shell #screen-home .flex-carr{margin:0!important}
  #public-shell #screen-home #flex-events{padding:0 0 4px!important;scroll-padding-left:0}
  #public-shell #screen-home .flex-ev{flex-basis:300px!important;width:300px!important}
}
#public-shell #screen-home .hq-blok{border-radius:var(--pv-hoek)!important}

/* 11. Kantoorteam en stappenplan: dezelfde hoeken en maten als de rest. */
#public-shell #screen-home .faces-sectie{border-radius:var(--pv-hoek)!important}
#public-shell #stapplan h4{font-size:28px!important;line-height:1.14!important;letter-spacing:-.018em!important;font-weight:700!important}
@media (min-width:1068px){ #public-shell #stapplan h4{font-size:36px!important} }
#public-shell #stapplan .lb-p{font-size:var(--pv-tekst)!important;line-height:var(--pv-tekst-lh)!important}
#public-shell #stapplan li{font-size:16px!important;line-height:1.4!important}
#public-shell #screen-home .vr-titel{font-size:19px!important;line-height:1.26!important;letter-spacing:-.012em!important;font-weight:600!important}
#public-shell #screen-home .vr-intro{font-size:15px!important;line-height:1.47!important}
/* Kantoorvacatures: de tekst staat ingeklapt, op elk scherm (Thijs 30-10). */
#public-shell #screen-home .vacrij{align-items:flex-start}
#public-shell #screen-home .vr-metas{order:2}
#public-shell #screen-home .vr-intro{order:3;display:none}
#public-shell #screen-home .vacrij.open .vr-intro{display:block}
#public-shell #screen-home .vr-meer{order:4;display:inline-flex;align-items:center;gap:4px;align-self:flex-start;min-height:44px;margin:-4px 0 -12px;padding:0;border:0;background:none;font-size:15px;font-weight:600;color:#7342F4;cursor:pointer}
#public-shell #screen-home .vr-meer svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s ease}
#public-shell #screen-home .vacrij.open .vr-meer svg{transform:rotate(180deg)}

/* 12. Vragen: een lijst met dunne lijnen, zonder kaart, op tekstbreedte. */
#public-shell .pub-main > .faq-card{max-width:760px!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
#public-shell .faq .faq-item{background:none!important;border:0!important;border-top:1px solid var(--pv-lijn)!important;border-radius:0!important;box-shadow:none!important;margin:0!important}
#public-shell .faq .faq-item:last-child{border-bottom:1px solid var(--pv-lijn)!important}
#public-shell .faq .faq-v{padding:20px 0!important;font-size:var(--pv-tekst)!important;line-height:1.35!important;letter-spacing:var(--pv-tekst-ls)!important;font-weight:600!important;background:none!important}
#public-shell .faq .faq-a p{font-size:16px!important;line-height:1.5!important;color:var(--pv-grijs)}