/* ===== Ons verhaal — jaartallen-carousel ===== */
.st4{position:relative;overflow-x:hidden !important}
.st4-head{align-self:center}
.st4-viewport{position:relative;width:100%;padding:0 !important}
.st4-track{display:flex !important;overflow-x:auto !important;overflow-y:hidden !important;
  scroll-snap-type:x mandatory;
  padding-left:max(40px, calc(50% - 610px)) !important;
  scroll-padding-left:max(40px, calc(50% - 610px));
  padding-right:max(40px, calc(100% - 880px)) !important;
  padding-top:0 !important;padding-bottom:0 !important;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;align-items:stretch !important}
.st4-track::-webkit-scrollbar{display:none}

.st4-slide{flex:0 0 840px !important;max-width:88vw;scroll-snap-align:start;
  overflow:hidden !important;opacity:.42;transition:opacity .35s ease}
.st4-slide.is-active{opacity:1}
.st4-photo{align-self:stretch;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.05)}
.st4-year .elementor-heading-title{letter-spacing:-1px}
.st4-title{margin-top:34px !important}

/* pijlen + as + label worden door de JS opgebouwd uit de slides */
.st4 .st4-rail{position:absolute;left:22px;top:168px;writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:11px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;
  color:#0C2D6A;opacity:.7;z-index:2}
.st4 .st4-navs{position:static}
.st4 .st4-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  border-radius:999px !important;border:1.6px solid #0c2d6a !important;background:#fff !important;
  color:#0c2d6a !important;display:flex;align-items:center;justify-content:center;cursor:pointer;
  z-index:4;transition:background .2s,color .2s;padding:0}
.st4 .st4-nav:hover{background:#0c2d6a !important;color:#fff !important}
.st4 .st4-nav svg{width:22px;height:22px}
.st4 .st4-prev{left:26px}
.st4 .st4-next{right:26px}
.st4 .st4-next svg{transform:rotate(180deg)}

.st4 .st4-axis{width:100%;max-width:1300px;margin:52px auto 0;padding:0 40px;box-sizing:border-box}
.st4 .st4-axis-line{position:relative;display:flex;justify-content:space-between;
  align-items:flex-end;padding-bottom:20px}
.st4 .st4-axis-line::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1.5px;
  background:rgba(12,45,106,.18)}
.st4 .st4-tick{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;
  background:none !important;border:0 !important;cursor:pointer;font-family:"Nunito Sans",sans-serif;
  font-size:15px;font-weight:800;color:rgba(12,45,106,.35) !important;padding:0;transition:color .2s}
.st4 .st4-tick::after{content:"";width:9px;height:9px;border-radius:999px;
  background:rgba(12,45,106,.28);transition:transform .2s,background .2s}
.st4 .st4-tick:hover{color:#0c2d6a !important}
.st4 .st4-tick.is-active{color:#0c2d6a !important;font-size:17px}
.st4 .st4-tick.is-active::after{background:#0c2d6a;transform:scale(1.5)}

@media(max-width:900px){
  .st4 .st4-axis{padding:0 20px !important}
  .st4 .st4-rail{display:none}
  /* pijlen op mobiel: midden onder de kaart */
  .st4 .st4-navs{display:flex;justify-content:center;gap:16px;margin-top:24px}
  .st4 .st4-nav{position:static;transform:none;width:46px !important;height:46px !important}
  .st4 .st4-nav svg{width:19px;height:19px}
  .st4-slide{flex:0 0 calc(100vw - 56px) !important;max-width:none;min-height:0 !important}
  .st4-track{padding-left:20px !important;padding-right:40px !important;scroll-padding-left:20px}
  .st4-year .elementor-heading-title{font-size:56px}
  .st4-title{margin-top:18px !important}
  .st4 .st4-tick{font-size:0 !important}
  .st4 .st4-tick.is-active{font-size:0 !important}
}

/* footer: het logo is navy, in de footer moet het wit */
.rm-foot-logo img{filter:brightness(0) invert(1);width:190px;max-width:100%}
.rm-footer .elementor-icon-list-icon{display:none}
.rm-footer .elementor-icon-list-item{line-height:1.45}

/* mintbalk tussen de laatste sectie en de navy footer */
.rm-cta-tel a{color:#0c2d6a !important;text-decoration:none}
.rm-cta-tel a:hover{text-decoration:underline}
@media(max-width:767px){
  .rm-cta .elementor-widget-text-editor{text-align:left !important}
  .rm-cta .rm-cta-btn .elementor-button{width:100%}
}