/* 10 — slot: afsluitend statement — donkere kaart, reuzenkop links, portret met woordmerk rechts */
.slot {
  --slot-kaart: #14110F;
  --slot-kop: clamp(2.6rem, 5.4vw, 5rem);
  --slot-stip: #25D366;
  padding: 0 20px 20px;
}
.slot .slot__kaart {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0; border-radius: 18px; background: var(--slot-kaart);
  display: grid; grid-template-columns: minmax(0, 52%) 1fr; align-items: center;
  min-height: clamp(600px, 44vw, 660px);
}

/* beeldvak: één doorlopende laag over de hele kaart (geen naad), portret rechts */
.slot .slot__beeld {
  position: absolute; inset: 0; z-index: 0;
  background-color: var(--slot-kaart);
  background-image:
    radial-gradient(38% 70% at 70% 34%, rgba(34, 43, 54, .9) 0%, rgba(28, 35, 44, .4) 50%, transparent 85%),
    radial-gradient(50% 80% at 100% 100%, rgba(30, 111, 184, .08), transparent 70%);
}
.slot .slot__beeld::before { z-index: 5; opacity: .1; mix-blend-mode: normal; }
.slot .slot__beeld::after {
  z-index: 6; left: auto; right: 28px; bottom: 24px; text-align: right;
  font-size: 10px; color: rgba(233, 232, 227, .46);
}
.slot .slot__merk { /* groot woordmerk op de muur achter het hoofd */
  position: absolute; left: 57%; top: 2%; width: 38%; z-index: 1;
  transform: rotate(-6deg) translate3d(0, var(--slot-schuif, 0px), 0);
  transform-origin: 50% 50%; opacity: .55;
}
.slot .slot__merk img { display: block; width: 100%; height: auto; filter: brightness(.88); }
.slot .slot__licht { /* spot op het gezicht */
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(18% 30% at 69% 44%, rgba(150, 185, 220, .13), transparent 70%);
}
.slot .slot__beeld .slot__licht { /* zachte spot waar straks het gezicht staat */
  background:
    radial-gradient(22% 34% at 72% 46%, rgba(150, 185, 220, .16), transparent 70%),
    radial-gradient(34% 60% at 72% 100%, rgba(233, 232, 227, .06), transparent 70%);
}
.slot .slot__schaduw { /* zachte vignet: tekstkant donker, randen donker — één verloop, geen harde overgang */
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20,17,15,.92) 0%, rgba(20,17,15,.7) 30%, rgba(20,17,15,0) 55%),
    radial-gradient(120% 90% at 70% 40%, transparent 60%, rgba(10,9,8,.55) 100%);
}

/* portretvak: vaste staande plek tot de onderrand; hier komt het uitgesneden portret */
.slot .slot__portret {
  position: absolute; z-index: 3; right: 6%; bottom: 0;
  width: min(35%, 490px); height: 86%;
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(60% 34% at 50% 26%, rgba(233, 232, 227, .16), transparent 72%),
    linear-gradient(180deg, #2B2E33 0%, #1C1E21 55%, #151617 100%);
  box-shadow: inset 0 1px 0 rgba(233, 232, 227, .1);
}
.slot .slot__portret { overflow: hidden; }
.slot .slot__portret img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: saturate(.9) brightness(.92); }
.slot .slot__portret::after { /* onderrand laten opgaan in de kaart */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(20,17,15,.55) 88%, rgba(20,17,15,.85) 100%);
}

/* tekst */
.slot .slot__tekst { position: relative; z-index: 7; grid-column: 1; padding: 110px 0 110px clamp(40px, 5.3vw, 80px); align-self: center; }
.slot .slot__kop {
  margin: 0;
  font-family: var(--font-kop); font-weight: 900; text-transform: uppercase;
  font-size: var(--slot-kop); line-height: .9; letter-spacing: -.04em;
  color: var(--krijt);
}
.slot .slot__kop span { display: block; white-space: nowrap; }
.slot .slot__alinea {
  margin: 36px 0 0; max-width: 440px;
  font-size: 18px; line-height: 1.6; font-weight: 500; letter-spacing: -.005em;
  color: var(--grijs-licht);
}
.slot .slot__knop { margin-top: 48px; height: 50px; padding: 0 30px; }
.slot .slot__pijl {
  display: inline-grid; place-items: center; width: 0; overflow: hidden; margin-left: -10px;
  transition: width .35s var(--ease), margin .35s var(--ease);
}
.slot .slot__knop:hover .slot__pijl,
.slot .slot__knop:focus-visible .slot__pijl { width: 14px; margin-left: 0; }
.slot .slot__knop:focus-visible { outline: 2px solid var(--krijt); outline-offset: 4px; }

.slot .slot__labels {
  margin: 30px 0 0; padding: 0; list-style: none;
  display: flex; align-items: center; flex-wrap: wrap; gap: 22px;
  font-family: var(--font-tekst); font-size: 12.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: #A9A9A5;
}
.slot .slot__labels li { display: inline-flex; align-items: center; gap: 12px; }

html.is-shot .slot .slot__merk { --slot-schuif: 0px; }


/* tablet */
@media (max-width: 1100px) {
  .slot .slot__kaart { grid-template-columns: minmax(0, 64%) 1fr; }
  .slot .slot__merk { left: 38%; width: 70%; }
}

/* mobiel: portret achter de tekst, tekst bovenop */
@media (max-width: 760px) {
  .slot { --slot-kop: clamp(2rem, 9.9vw, 3.1rem); padding: 0 10px 96px; }
  .slot .slot__kaart { display: flex; flex-direction: column; align-items: stretch; min-height: 0; border-radius: 16px; }
  .slot .slot__tekst { order: 1; align-self: stretch; }
  .slot .slot__beeld { position: relative; inset: auto; order: 2; height: 300px; }
  .slot .slot__merk { left: 16%; top: 5%; width: 68%; opacity: .45; }
  .slot .slot__portret { right: auto; left: 50%; transform: translateX(-50%); width: 94%; height: 88%; opacity: 1; border-radius: 999px 999px 0 0; }
  .slot .slot__licht { background: radial-gradient(40% 30% at 56% 34%, rgba(150,185,220,.16), transparent 70%); }
  .slot .slot__schaduw { background: linear-gradient(180deg, rgba(20,17,15,1) 0%, rgba(20,17,15,.7) 18%, rgba(20,17,15,0) 48%); }
  .slot .slot__beeld::before { opacity: .05; }
  .slot .slot__beeld::after { left: 50%; right: auto; transform: translateX(-50%); text-align: center; bottom: 12px; font-size: 9px; color: rgba(233, 232, 227, .5); }
  .slot .slot__tekst { padding: 52px 22px 40px; }
  .slot .slot__alinea { margin-top: 22px; font-size: 16px; max-width: 300px; }
  .slot .slot__knop { margin-top: 44px; height: 50px; padding: 0 28px; }
  .slot .slot__labels { margin-top: 24px; font-size: 12px; flex-wrap: nowrap; }
}

/* mobiel: zelfde zijmarge als de rest, weinig ruimte tot de footer */
@media (max-width: 760px) {
  .slot { padding: 0 var(--zij, 20px) 20px; }
}