/* Hero basis */
.mdf-ss{ position:relative; height:var(--mdf-height,70vh); color:#fff; background:#000; isolation:isolate; overflow:hidden; }
@media (max-width:980px){ .mdf-ss{height:var(--mdf-height,65vh);} }
@media (max-width:560px){ .mdf-ss{height:var(--mdf-height,60vh);} }

/* Achtergrond */
.mdf-ss__bg{position:absolute; inset:0;}
.mdf-ss__bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; visibility:hidden; transition:opacity 450ms cubic-bezier(.22,.61,.36,1), visibility 450ms; }
.mdf-ss__bg img.is-active{opacity:1; visibility:visible;}
.mdf-ss__overlay{position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.2) 75%); pointer-events:none;}

/* Verticale centrering van de content */
.mdf-ss__grid{ position:relative; z-index:2; height:100%; display:flex; align-items:center; padding:clamp(16px,3vw,40px); }

/* Twee kolommen: links titels, rechts lijst */
.mdf-ss__stack{ display:flex; align-items:center; justify-content:space-between; gap:clamp(18px,3.5vw,40px); width:100%; max-width: min(1200px, 92vw); margin-inline:auto; }
.mdf-ss__titles{display:flex; flex-direction:column; gap:.45rem; max-width:min(60ch,55%);}
.mdf-ss__titles h1{font-size:clamp(26px,6vw,56px); line-height:1.05; margin:0; font-weight:800; color:#fff;}
.mdf-ss__titles h2{font-size:clamp(14px,2.5vw,20px); margin:0; font-weight:600; color:#fff; opacity:.95;}

/* Rechter kolom (lijst) */
.mdf-ss__roles-wrap{position:relative; padding-left:28px; margin-top:0;}
.mdf-ss__roles-mask{ overflow:hidden; }
.mdf-ss__arrow{ position:absolute; left:0; top:0; width:40px; height:32px; border-radius:999px; border:0; background:var(--mdf-brand,#256bc6); color:#fff; cursor:pointer; transform:translateY(0); transition:transform 300ms cubic-bezier(.22,.61,.36,1); }
.mdf-ss__arrow:focus-visible{outline:3px solid #ffffff66; outline-offset:2px;}
.mdf-ss__roles{list-style:none !important; padding:0 !important; margin:0; max-height:min(230px, 40vh); display:flex; flex-direction:column; gap:6px; will-change:transform;}
.mdf-ss__item{list-style-type:none !important; transition: transform 350ms cubic-bezier(.22,.61,.36,1), opacity 350ms;}
.mdf-ss__item.is-active{transform: translateX(clamp(12px,2.2vw,24px));}
.mdf-ss__link{ display:block; text-decoration:none; color:#fff; padding:.08rem .9rem; font-weight:800; font-size:clamp(20px,3.2vw,34px); line-height:1.12; opacity:.8; word-break:break-word; }
.mdf-ss__link:hover, .mdf-ss__link:focus-visible{opacity:.98;}
.mdf-ss__link[aria-current="true"]{opacity:1;}

/* Mobiel: onder elkaar en nog steeds verticaal gecentreerd */
@media (max-width:980px){
  .mdf-ss__grid{ align-items:center; }
  .mdf-ss__stack{ flex-direction:column; align-items:flex-start; justify-content:center; max-width: 92vw; }
  .mdf-ss__titles{ max-width:100%; }
  .mdf-ss__titles h1{font-size:clamp(22px,6.4vw,34px); line-height:1.15;}
  .mdf-ss__titles h2{font-size:clamp(13px,3.5vw,16px);}
  .mdf-ss__roles-wrap{ padding-left:28px; margin-top:.35rem; }
  .mdf-ss__link{ font-size:clamp(18px,5.2vw,24px); }
}