/* ===========================================================
   BrosCS / ikkomwerken
   Merkkleuren lichtgroen A3C955 en lichtblauw 64B8E1,
   donkerblauw 0D2D3D als drager. Lettertypes worden overgenomen van het actieve Salient-thema.
   Eén vaste look: dit is een merkpagina, geen systeemthema.
   =========================================================== */
.broscs-lp{
  --navy:#0d2d3d;
  --navy-2:#143c50;
  --navy-3:#1b4b62;
  --paper:#f4f7f8;
  --white:#ffffff;
  --green:#a3c955;
  --green-ink:#6d8c35;
  --blue:#64b8e1;
  --blue-ink:#2e7192;
  --ink:#12303f;
  --ink-2:#3f5f6e;
  --slate:#7b95a1;
  --on-navy:#edf4f6;
  --on-navy-2:#9dbbc7;
  --line:#dbe4e8;
  --line-navy:#22516a;
  --e-out:cubic-bezier(0.23,1,0.32,1);
  --pad:clamp(20px,5vw,40px);
  --ratio:2252/4000;
}
.broscs-lp *{box-sizing:border-box}
.broscs-lp{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:inherit;
  font-size:17px;font-weight:400;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.broscs-lp img{max-width:100%;display:block;border:0;border-radius:0;margin:0;box-shadow:none}
.broscs-lp a{color:inherit;text-decoration:none}
.broscs-lp h1,
.broscs-lp h2,
.broscs-lp h3{font-weight:700;letter-spacing:-.022em;margin:0;text-wrap:balance}
.broscs-lp h1{font-size:clamp(2.2rem,6.2vw,4rem);line-height:1.03}
.broscs-lp h2{font-size:clamp(1.75rem,4.2vw,2.85rem);line-height:1.12}
.broscs-lp h3{font-size:clamp(1.05rem,2vw,1.28rem);line-height:1.25;letter-spacing:-.012em}
.broscs-lp p{padding:0;margin:0 0 1.05rem;max-width:64ch}
.broscs-lp p:last-child{margin-bottom:0}
.broscs-lp h2 + p,
.broscs-lp h2 + .lead{margin-top:18px}
.broscs-lp strong{font-weight:600}
.broscs-lp .wrap{max-width:1140px;margin:0 auto;padding-inline:var(--pad);position:relative;z-index:1}
.broscs-lp .band{padding-block:clamp(58px,9vw,112px)}
.broscs-lp .band--navy{background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden}
.broscs-lp .band--navy h1,
.broscs-lp .band--navy h2,
.broscs-lp .band--navy h3{color:var(--on-navy)}
.broscs-lp .band--navy p{color:var(--on-navy-2)}
.broscs-lp .band--paper{background:var(--paper)}
.broscs-lp .band--white{background:var(--white)}
.broscs-lp .eyebrow{display:block;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--green-ink);margin-bottom:16px}
.broscs-lp .band--navy .eyebrow{color:var(--green)}
.broscs-lp .lead{font-size:clamp(1.02rem,1.8vw,1.22rem);line-height:1.55;font-weight:400;max-width:56ch}
.broscs-lp .small{font-size:.92rem;color:var(--slate)}
.broscs-lp .band--navy .small{color:var(--on-navy-2)}
.broscs-lp .arc{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.broscs-lp .arc--g{background:radial-gradient(circle,rgba(163,201,85,.16) 0%,rgba(163,201,85,.07) 45%,rgba(163,201,85,0) 70%)}
.broscs-lp .arc--b{background:radial-gradient(circle,rgba(100,184,225,.15) 0%,rgba(100,184,225,.06) 45%,rgba(100,184,225,0) 70%)}
/* Knoppen */
.broscs-lp .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:inherit;font-size:1rem;font-weight:600;line-height:1;
  padding:19px 30px;border:2px solid transparent;border-radius:2px;text-decoration:none;cursor:pointer;
  transition:transform 160ms var(--e-out),background-color 200ms ease,border-color 200ms ease,color 200ms ease;
}
.broscs-lp .btn svg{width:18px;height:18px;flex:none}
.broscs-lp .btn--primary{background:var(--green);color:#102a13;border-color:var(--green)}
.broscs-lp .btn--primary svg{fill:#102a13}
.broscs-lp .btn--ghost{background:rgba(13,45,61,.35);color:var(--white);border-color:rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.broscs-lp .btn--ghost svg{fill:var(--white)}
.broscs-lp .btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
.broscs-lp .btn--primary:hover{background:#b2d566;border-color:#b2d566}
.broscs-lp .btn--ghost:hover{border-color:var(--white);background:rgba(13,45,61,.55)}
}
.broscs-lp .btn:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.broscs-lp .btnrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
/* ---------- HERO: foto loopt door, tekst eroverheen ---------- */
.broscs-lp .hero{position:relative;overflow:hidden;background:var(--navy);isolation:isolate;min-height:clamp(560px,86vh,860px);display:flex;flex-direction:column}
.broscs-lp .hero-media{position:absolute;inset:0;z-index:0}
.broscs-lp .hero-media img{width:100%;height:100%;object-fit:cover;object-position:56% 46%}
.broscs-lp .hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(13,45,61,.92) 0%,rgba(13,45,61,.86) 26%,rgba(13,45,61,.58) 50%,rgba(13,45,61,.18) 74%,rgba(13,45,61,.06) 100%),
    linear-gradient(to top,rgba(13,45,61,.5) 0%,rgba(13,45,61,0) 34%);
}
.broscs-lp .hero-boog{
  position:absolute;z-index:2;pointer-events:none;border-radius:50%;
  background:var(--green);
  width:min(70vw,600px);aspect-ratio:1;
  right:min(-20vw,-150px);top:min(-26vw,-215px);
}
.broscs-lp .hero-top{position:relative;z-index:3;padding:calc(clamp(20px,3.4vw,34px) + var(--broscs-header-overlap,0px)) var(--pad) 0;max-width:1220px;width:100%;margin-inline:auto}
.broscs-lp .hero-top .tel{
  display:inline-flex;align-items:center;gap:9px;font-size:.92rem;font-weight:500;
  color:var(--white);text-decoration:none;white-space:nowrap;
  transition:color 200ms ease;
}
.broscs-lp .hero-top .tel svg{width:15px;height:15px;flex:none;fill:var(--green)}
@media (hover:hover) and (pointer:fine){
.broscs-lp .hero-top .tel:hover{color:var(--green)}
}
.broscs-lp .hero-copy{
  position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:1220px;width:100%;margin-inline:auto;
  padding:clamp(34px,6vw,64px) var(--pad) clamp(46px,7vw,86px);
}
.broscs-lp .hero h1{color:var(--white);max-width:16ch}
.broscs-lp .hero h1 em{font-style:normal;color:var(--green);display:block}
.broscs-lp .hero .lead{color:rgba(255,255,255,.86);margin-top:24px;max-width:46ch}
.broscs-lp .hero .note{margin-top:24px;font-size:.93rem;color:rgba(255,255,255,.78);max-width:46ch}
.broscs-lp .hero .note b{color:var(--green);font-weight:600}
.broscs-lp .hero-rule{position:relative;z-index:3;display:flex;height:6px;margin-top:auto}
.broscs-lp .hero-rule i{flex:1}
.broscs-lp .hero-rule i:nth-child(1){background:var(--green-ink)}
.broscs-lp .hero-rule i:nth-child(2){background:var(--green)}
.broscs-lp .hero-rule i:nth-child(3){background:var(--blue)}
.broscs-lp .hero-rule i:nth-child(4){background:var(--navy-3)}
@media (max-width:899px){
.broscs-lp .hero{min-height:calc(100svh - var(--broscs-header-height,80px))}
.broscs-lp .hero-media img{object-position:54% 38%}
.broscs-lp .hero-scrim{background:
    linear-gradient(to bottom,rgba(13,45,61,.78) 0%,rgba(13,45,61,.5) 26%,rgba(13,45,61,.72) 62%,rgba(13,45,61,.93) 100%)}
.broscs-lp .hero-boog{width:56vw;right:-19vw;top:-21vw}
.broscs-lp .hero-copy{justify-content:flex-end}
}
/* ---------- vier soorten werk ---------- */
.broscs-lp .werk{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px;grid-template-columns:1fr}
@media (min-width:620px){
.broscs-lp .werk{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
.broscs-lp .werk{grid-template-columns:repeat(4,1fr)}
}
.broscs-lp .werk > div{background:var(--white);padding:26px 24px 28px}
.broscs-lp .werk .ic{width:28px;height:28px;margin-bottom:16px;display:block;fill:var(--green-ink)}
.broscs-lp .werk h3{margin-bottom:8px}
.broscs-lp .werk p{font-size:.92rem;line-height:1.5;color:var(--ink-2);margin:0}
/* ---------- werkgever ---------- */
.broscs-lp .belofte{display:grid;gap:0;margin-top:46px;border-top:1px solid var(--line-navy)}
.broscs-lp .belofte > div{display:grid;grid-template-columns:1fr;gap:6px 34px;padding:28px 0;border-bottom:1px solid var(--line-navy)}
@media (min-width:760px){
.broscs-lp .belofte > div{grid-template-columns:1.05fr 1fr;align-items:baseline}
}
.broscs-lp .belofte h3{font-family:var(--broscs-heading-font,inherit);font-size:clamp(1.15rem,2.3vw,1.5rem);line-height:1.25;color:var(--white)}
.broscs-lp .belofte p{font-size:.98rem;margin:0;color:var(--on-navy-2)}
/* ---------- split ---------- */
.broscs-lp .split{display:grid;gap:clamp(30px,5vw,64px);align-items:center;grid-template-columns:1fr}
@media (min-width:880px){
.broscs-lp .split{grid-template-columns:.85fr 1.15fr}
}
.broscs-lp .frame{position:relative;overflow:hidden;background:var(--navy-2);aspect-ratio:var(--ratio)}
.broscs-lp .frame img{width:100%;height:100%;object-fit:cover}
/* ---------- fotostrook ---------- */
.broscs-lp .strip{display:grid;gap:clamp(10px,1.6vw,18px);grid-template-columns:repeat(2,1fr);margin-top:34px}
@media (min-width:760px){
.broscs-lp .strip{grid-template-columns:repeat(4,1fr)}
}
.broscs-lp .strip figure{margin:0}
.broscs-lp .strip figcaption{font-size:.76rem;font-weight:500;letter-spacing:.04em;color:var(--on-navy-2);margin-top:10px;line-height:1.4}
/* ---------- zes stappen: twee rijen van drie ---------- */
.broscs-lp .seq{display:grid;gap:1px;margin:38px 0 0;padding:0;grid-template-columns:1fr;background:var(--line-navy);border:1px solid var(--line-navy)}
@media (min-width:560px){
.broscs-lp .seq{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:860px){
.broscs-lp .seq{grid-template-columns:repeat(3,1fr)}
}
.broscs-lp .seq > li{background:var(--navy);padding:28px 26px 30px;list-style:none}
.broscs-lp .seq .n{font-family:var(--broscs-heading-font,inherit);font-size:.86rem;font-weight:700;color:var(--green);display:block;margin-bottom:14px;letter-spacing:.06em}
.broscs-lp .seq .n.opt{color:var(--blue)}
.broscs-lp .seq h3{margin-bottom:8px;color:var(--white)}
.broscs-lp .seq p{font-size:.92rem;line-height:1.5;color:var(--on-navy-2);margin:0}
/* ---------- verticale reeks (het omkleden) ---------- */
.broscs-lp .seqv{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line-navy)}
.broscs-lp .seqv li{display:grid;grid-template-columns:44px 1fr;gap:4px 20px;padding:20px 0;border-bottom:1px solid var(--line-navy)}
@media (min-width:680px){
.broscs-lp .seqv li{grid-template-columns:54px 200px 1fr;align-items:baseline}
}
.broscs-lp .seqv .n{font-family:var(--broscs-heading-font,inherit);font-size:1rem;font-weight:700;color:var(--green)}
.broscs-lp .seqv h3{color:var(--white)}
.broscs-lp .seqv p{font-size:.94rem;color:var(--on-navy-2);margin:0;grid-column:2/-1}
@media (min-width:680px){
.broscs-lp .seqv p{grid-column:3/-1}
}
/* ---------- uitklapper ---------- */
.broscs-lp .acc{background:var(--navy-2);border:1px solid var(--line-navy);overflow-anchor:none}
.broscs-lp .acc summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;
  padding:clamp(22px,3vw,30px) clamp(20px,3vw,34px);transition:background-color 200ms ease;
}
.broscs-lp .acc summary::-webkit-details-marker{display:none}
.broscs-lp .acc summary:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
@media (hover:hover) and (pointer:fine){
.broscs-lp .acc summary:hover{background:var(--navy-3)}
}
.broscs-lp .acc .st{flex:1;min-width:0}
.broscs-lp .acc .st b{display:block;font-family:var(--broscs-heading-font,inherit);font-size:clamp(1.1rem,2.2vw,1.42rem);font-weight:700;line-height:1.25;color:var(--white);letter-spacing:-.015em}
.broscs-lp .acc .st span{display:block;font-size:.92rem;color:var(--on-navy-2);margin-top:6px}
.broscs-lp .acc .chev{flex:none;width:34px;height:34px;border:1px solid var(--line-navy);border-radius:50%;display:grid;place-items:center;transition:transform 260ms var(--e-out),border-color 200ms ease}
.broscs-lp .acc .chev svg{width:15px;height:15px;fill:var(--green)}
.broscs-lp .acc[open] .chev{transform:rotate(180deg);border-color:var(--green)}
.broscs-lp .acc-body{padding:0 clamp(20px,3vw,34px) clamp(30px,4vw,44px)}
.broscs-lp .acc-body > *:first-child{margin-top:0}
.broscs-lp .acc[open] .acc-body{animation:broscsAccordionIn 420ms var(--e-out) both}
@keyframes broscsAccordionIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
/* ---------- voordelen: twee rijen van drie ---------- */
.broscs-lp .perks{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px;grid-template-columns:1fr}
@media (min-width:560px){
.broscs-lp .perks{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:860px){
.broscs-lp .perks{grid-template-columns:repeat(3,1fr)}
}
.broscs-lp .perks > div{background:var(--white);padding:28px 26px 30px}
.broscs-lp .perks h3{margin-bottom:6px}
.broscs-lp .perks p{font-size:.92rem;color:var(--ink-2);margin:0;line-height:1.5}
.broscs-lp .perks .ic{width:26px;height:26px;margin-bottom:16px;display:block;fill:var(--green-ink)}
/* ---------- vacatures ---------- */
.broscs-lp .roles{display:grid;gap:clamp(16px,2.4vw,24px);margin-top:44px;grid-template-columns:1fr}
@media (min-width:820px){
.broscs-lp .roles{grid-template-columns:1fr 1fr}
}
.broscs-lp .role{background:var(--navy-2);border:1px solid var(--line-navy);padding:clamp(28px,3.4vw,40px);display:flex;flex-direction:column;gap:14px}
.broscs-lp .role h3{font-size:clamp(1.3rem,2.4vw,1.6rem);color:var(--white)}
.broscs-lp .role p{font-size:.96rem;color:var(--on-navy-2);margin:0}
.broscs-lp .role .meta{font-size:.84rem;color:var(--blue);font-weight:500;margin-top:auto;padding-top:8px}
/* ---------- CTA ---------- */
.broscs-lp .cta{text-align:center;position:relative;isolation:isolate}
.broscs-lp .cta-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.broscs-lp .cta-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.broscs-lp .cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,60,80,.93) 0%,rgba(13,45,61,.95) 55%,rgba(13,45,61,.97) 100%)}
.broscs-lp .cta h2{max-width:18ch;margin-inline:auto}
.broscs-lp .cta p{margin-inline:auto;text-align:center}
.broscs-lp .cta .lead{margin-top:22px}
.broscs-lp .telbig{
  display:inline-flex;align-items:center;gap:16px;margin-top:40px;
  font-family:var(--broscs-heading-font,inherit);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2rem,6.6vw,3.4rem);line-height:1;color:var(--white);text-decoration:none;
  transition:transform 160ms var(--e-out),color 200ms ease;padding:6px 4px;
}
.broscs-lp .telbig svg{width:clamp(28px,5vw,42px);height:clamp(28px,5vw,42px);fill:var(--green);flex:none}
.broscs-lp .telbig:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
.broscs-lp .telbig:hover{color:var(--green)}
}
.broscs-lp .telbig:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.broscs-lp .cta .who{margin-top:14px;font-size:1rem;color:var(--on-navy-2)}
.broscs-lp .cta .btnrow{justify-content:center;margin-top:36px}

/* Alleen deze templateschil wordt uitgelijnd. Header/footer blijven van Salient. */
body.broscs-landing-active .broscs-landing-shell.container-wrap {
  padding:0 !important; margin:0; min-height:0; background:#f4f7f8;
}
body.broscs-landing-active .broscs-landing-shell > .container.main-content {
  max-width:none !important; width:100% !important; padding:0 !important; margin:0 !important;
}
body.broscs-landing-active .broscs-landing-shell > .container.main-content > .row {
  display:block; width:auto; padding:0 !important; margin:0 !important;
}
.broscs-lp { width:100%; position:relative; isolation:isolate; text-align:left; }
.broscs-lp *, .broscs-lp *::before, .broscs-lp *::after { box-sizing:border-box; }
.broscs-lp picture { display:block; }
.broscs-lp :is(h1,h2,h3) { padding:0; text-transform:none; }
.broscs-lp :is(ol,ul) { padding-left:0; }
.broscs-lp li { margin-left:0; }
.broscs-lp :is(a,button,summary):focus-visible { outline:3px solid var(--green); outline-offset:5px; }
.broscs-lp [id] { scroll-margin-top:calc(var(--broscs-header-height,100px) + 24px); }
.broscs-lp .hero, .broscs-lp .band { width:100%; margin:0; }
.broscs-lp .hero { color:var(--on-navy); }
.broscs-lp .btn { min-height:52px; box-shadow:none; letter-spacing:normal; text-transform:none; white-space:normal; text-align:center; }
.broscs-lp .btn::after { display:none; }
.broscs-lp .frame picture, .broscs-lp .hero-media picture, .broscs-lp .cta-bg picture { height:100%; }
.broscs-lp .hero-media img { max-width:none; }
.broscs-lp .small { color:#526d7a; }
.broscs-lp .band--navy .small { color:var(--on-navy-2); }
.broscs-lp .seq > li, .broscs-lp .seqv > li { list-style:none; margin:0; }
.broscs-lp .band--white h2 + p { margin-top:20px; }
.broscs-lp .acc { clear:both; }
.broscs-lp .acc summary { border:0; margin:0; }
.broscs-lp .acc summary::marker { content:""; }
.broscs-lp .hero-boog { opacity:.92; }
@media (max-width:599px) {
  .broscs-lp .hero h1 { font-size:clamp(2rem,8.7vw,3.15rem); line-height:1.08; }
  .broscs-lp .hero .btnrow { gap:12px; }
  .broscs-lp .hero .btnrow .btn { padding:17px 19px; }
  .broscs-lp .hero-copy { padding-top:44px; padding-bottom:48px; }
  .broscs-lp .telbig { gap:10px; font-size:clamp(1.7rem,7.4vw,2.5rem); }
  .broscs-lp .telbig svg { width:26px; height:26px; }
  .broscs-lp .cta .btn { font-size:.92rem; line-height:1.35; padding:17px 20px; }
}

/* Animaties worden pas ingeschakeld NADAT JavaScript de observer heeft aangemaakt.
   Zonder JavaScript, bij een scriptfout of bij minder-bewegen blijft alles leesbaar. */
.broscs-lp.motion-ready :is(.rv,.rv-h,.rv-img) {
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 80ms);
}
.broscs-lp.motion-ready .rv-h { transform:translate3d(0,34px,0); }
.broscs-lp.motion-ready .rv-img { transform:translate3d(0,28px,0); transition-duration:.95s,1.1s; }
.broscs-lp.motion-ready :is(.rv,.rv-h,.rv-img).is-in { opacity:1; transform:translate3d(0,0,0); }
.broscs-lp.motion-ready .rv-img img {
  transform:scale(1.075);
  transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}
.broscs-lp.motion-ready .rv-img.is-in img { transform:scale(1); }
.broscs-lp.motion-ready .hero-media img { animation:broscsHeroSettle 1.8s cubic-bezier(.16,1,.3,1) both; }
.broscs-lp.motion-ready .hero-boog { animation:broscsArcEnter 1.2s cubic-bezier(.16,1,.3,1) .12s both; }
@keyframes broscsHeroSettle { from { transform:scale(1.055); } to { transform:scale(1); } }
@keyframes broscsArcEnter { from { opacity:0; transform:translate(30px,-24px); } to { opacity:.92; transform:translate(0,0); } }
.broscs-lp .btn {
  transition:transform .3s cubic-bezier(.16,1,.3,1), background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.broscs-lp .btn svg { transition:transform .35s cubic-bezier(.16,1,.3,1); }
.broscs-lp .role { transition:border-color .3s ease,background-color .3s ease; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .broscs-lp .btn:hover { transform:translateY(-3px); box-shadow:0 9px 24px rgba(0,0,0,.14); }
  .broscs-lp .btn:hover svg { transform:translateY(-1px) rotate(-5deg); }
  .broscs-lp .role:hover { border-color:var(--blue); background:var(--navy-3); }
  .broscs-lp .rv-img.is-in:hover img { transform:scale(1.025); }
}

/* Deze balk wordt door JS direct onder body geplaatst. Zo blijft hij ook bij
   Salient-wrappers met transforms aan de viewport vastzitten. */
.broscs-lp-dock {
  position:fixed; inset:auto 0 0; z-index:900; width:100%;
  display:none; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(13,45,61,.98); border-top:1px solid var(--line-navy);
  transform:translateY(110%); visibility:hidden; pointer-events:none;
  transition:transform .35s cubic-bezier(.16,1,.3,1), visibility .35s;
}
.broscs-lp-dock[hidden] { display:none !important; }
.broscs-lp-dock.is-on { transform:translateY(0); visibility:visible; pointer-events:auto; }
.broscs-lp-dock .btn { flex:1; min-width:0; padding:15px 12px; font-size:.95rem; line-height:1.15; }
.broscs-lp-dock .btn--ghost { backdrop-filter:none; background:transparent; border-color:var(--line-navy); }
@media (max-width:899px) { .broscs-lp-dock { display:flex; } }
body.material-ocm-open .broscs-lp-dock { visibility:hidden; pointer-events:none; }

@media (prefers-reduced-motion:reduce) {
  .broscs-lp-dock { transition:none; }
  .broscs-lp *, .broscs-lp *::before, .broscs-lp *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .broscs-lp.motion-ready :is(.rv,.rv-h,.rv-img),
  .broscs-lp.motion-ready .rv-img img,
  .broscs-lp .hero-media img,
  .broscs-lp .hero-boog { opacity:1; transform:none; filter:none; }
  .broscs-lp .btn:hover, .broscs-lp .btn:active, .broscs-lp .telbig:active { transform:none; }
}
@media print {
  .broscs-lp :is(.rv,.rv-h,.rv-img), .broscs-lp .rv-img img { opacity:1 !important; transform:none !important; }
  .broscs-lp-dock { display:none !important; }
  .broscs-lp :is(.hero-media img,.hero-boog) { animation:none !important; }
}

/* Groene rand, zonder de afmetingen van de tegel te veranderen. */
.broscs-lp .werk > .highlight {
  position: relative;
  z-index: 1;
  overflow: visible;
  outline: 1px solid var(--green, #a3c955);
  outline-offset: -1px;
}

/* Alleen de gloed pulseert. De tegel en tekst blijven stil. */
.broscs-lp .werk > .highlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 0 18px 3px rgba(163, 201, 85, 0.35),
    0 0 40px 8px rgba(163, 201, 85, 0.18);
  opacity: 0.35;
  animation: broscs-cleanrooms-glow 4s ease-in-out infinite;
}

@keyframes broscs-cleanrooms-glow {
  0%, 100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

/* Vaste, subtiele gloed bij een voorkeur voor minder beweging. */
@media (prefers-reduced-motion: reduce) {
  .broscs-lp .werk > .highlight::after {
    animation: none;
    opacity: 0.45;
  }
}