/* ==========================================================================
   UMI — Salon Inrichting & Totaalontzorging  (landingspagina)
   Bouwt op de globale tokens uit main.css (:root). Scope: .umi-sli
   ========================================================================== */

.umi-sli { overflow-x: clip; }
.umi-sli .sli-ic { flex: 0 0 auto; }
.umi-sli .sli-sub { color: var(--ink-soft); max-width: 60ch; margin: 14px auto 0; font-size: 1.02rem; }
.umi-sli .sli-center { justify-content: center; text-align: center; }
.umi-sli .sli-center > div { max-width: 760px; }

/* ---- Dash-eyebrow (zelfde taal als homepage: gouden streepje + caps) ---- */
.umi-sli .sli-eyebrow {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: inherit; font-size: .72rem; font-weight: 600;
	letter-spacing: .2em; text-transform: uppercase; line-height: 1;
	color: var(--beige-dark); margin: 0 0 16px;
}
.umi-sli .sli-eyebrow::before {
	content: ""; display: inline-block; width: clamp(20px, 2.2vw, 32px);
	height: 2px; background: var(--beige-dark); border-radius: 1px; flex: 0 0 auto;
}
.umi-sli .sli-eyebrow--center { flex-direction: column; gap: 14px; }
.umi-sli .sli-eyebrow--center::before { width: 34px; }
.umi-sli .sli-eyebrow--light { color: rgba(255,255,255,.92); }
.umi-sli .sli-eyebrow--light::before { background: rgba(255,255,255,.7); }

/* ---- Twee-toon koppen (donker → gedempt, signature van de site) ---- */
.umi-sli .sli-mute { color: var(--ink-mute); font-weight: inherit; }

/* shared section rhythm */
.umi-sli section { padding: clamp(56px, 7vw, 96px) 0; }

/* ---------- HERO (rijk full-bleed beeld + ronde onderkant — homepage-taal) ---------- */
.sli-hero { position: relative; min-height: clamp(560px, 82vh, 760px); display: flex; align-items: flex-end; padding: 0; border-radius: 0 0 36px 36px; overflow: hidden; }
.sli-hero__media { position: absolute; inset: 0; z-index: 0; }
.sli-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sli-hero__wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,14,.14) 0%, rgba(20,17,14,0) 24%, rgba(20,17,14,.10) 48%, rgba(20,17,14,.58) 84%, rgba(20,17,14,.74) 100%); }
.sli-hero__inner { position: relative; z-index: 1; width: 100%; padding-top: 120px; padding-bottom: clamp(94px, 11vw, 148px); }
.sli-hero__copy { max-width: 640px; }
.sli-hero__title { color: #fff; font-family: inherit; font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 500; line-height: 1.03; letter-spacing: -.025em; margin: 0; text-shadow: 0 2px 28px rgba(0,0,0,.34); }
.umi-sli .sli-hero__title .sli-mute { color: rgba(255,255,255,.72); }
.sli-hero__sub { color: rgba(255,255,255,.92); font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.55; margin: 20px 0 0; max-width: 52ch; text-shadow: 0 1px 16px rgba(0,0,0,.3); }
.sli-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.sli-hero__ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.sli-hero__ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* zwevende stats-band over de ronde hero-onderkant — count-up animatie */
.sli-stats-wrap { position: relative; z-index: 3; margin-top: clamp(-72px, -6vw, -52px); }
.sli-stats { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: repeat(4, 1fr); }
.sli-stat { text-align: center; padding: clamp(20px, 2.4vw, 30px) 18px; position: relative; }
.sli-stat + .sli-stat::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 46px; background: var(--line-soft); }
.sli-stat__n { display: block; font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 600; line-height: 1; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sli-stat__l { display: block; font-size: .82rem; color: var(--ink-soft); margin: 10px auto 0; line-height: 1.3; max-width: 20ch; }

/* ---------- INTRO / EXPERTISE ---------- */
.sli-intro { background: var(--bg); }
.sli-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 5vw, 72px); align-items: end; margin-bottom: clamp(32px, 5vw, 54px); }
.sli-intro__lead-col h2 { margin: 0; font-size: clamp(1.9rem, 4vw, 3.2rem); }
.sli-intro__copy-col p { color: var(--ink-soft); line-height: 1.6; margin: 0; }
.sli-intro__we { color: var(--ink) !important; font-weight: 500; margin-top: 16px !important; }
.sli-exp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sli-exp { display: flex; align-items: flex-start; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s, border-color .25s; }
.sli-exp:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--beige-dark); }
.sli-exp__ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: var(--bg-warm); color: var(--taupe-dark); display: inline-flex; align-items: center; justify-content: center; }
.sli-exp__ic .sli-ic { width: 24px; height: 24px; }
.sli-exp__txt strong { display: block; font-size: 1.02rem; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.sli-exp__txt span { display: block; font-size: .88rem; color: var(--ink-soft); line-height: 1.4; }

/* ---------- TRAJECTEN ---------- */
.sli-trajecten { background: var(--bg-soft); }
.sli-traj-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: stretch; margin-top: 14px; }
.sli-traj { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.sli-traj:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sli-traj__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sli-traj__icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--bg-warm); color: var(--taupe-dark); }
.sli-traj__icon .sli-ic { width: 26px; height: 26px; }
.sli-traj__step { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; }
.sli-traj h3 { font-size: 1.5rem; margin: 0 0 8px; }
.sli-traj__desc { color: var(--ink-soft); line-height: 1.55; margin: 0 0 18px; }
.sli-traj__incl-label { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 12px; font-weight: 600; }
.sli-ticks { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sli-ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: var(--ink); line-height: 1.4; }
.sli-ticks .sli-ic { width: 18px; height: 18px; color: var(--sage); margin-top: 1px; }
.sli-traj__cta { margin-top: auto; }
/* featured */
.sli-traj--featured { background: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: var(--shadow-lg); }
.sli-traj--featured h3, .sli-traj--featured .sli-traj__desc { color: #fff; }
.sli-traj--featured .sli-traj__desc { color: rgba(255,255,255,.8); }
.sli-traj--featured .sli-traj__icon { background: rgba(255,255,255,.1); color: #fff; }
.sli-traj--featured .sli-traj__step, .sli-traj--featured .sli-traj__incl-label { color: rgba(255,255,255,.6); }
.sli-traj--featured .sli-ticks li { color: rgba(255,255,255,.94); }
.sli-traj--featured .sli-ticks .sli-ic { color: var(--sage); }
.sli-traj__flag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; background: var(--sage); color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .02em; padding: 7px 16px; border-radius: 999px; white-space: nowrap; box-shadow: var(--shadow); }
.sli-traj__flag .sli-ic { width: 16px; height: 16px; }

/* ---------- ZO WERKEN WIJ — JOURNEY (centrale lijn, afwisselend) ---------- */
.sli-journey { background: var(--bg); }
.sli-jrn { list-style: none; margin: clamp(32px, 4vw, 54px) auto 0; padding: 0; max-width: 940px; position: relative; }
.sli-jrn::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(var(--beige-dark) 0%, var(--beige) 60%, var(--line-soft) 100%); }
.sli-jrn__row { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; margin-bottom: 20px; align-items: center; }
.sli-jrn__card { grid-column: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 24px; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s, border-color .25s; }
.sli-jrn__row:nth-child(even) .sli-jrn__card { grid-column: 2; }
.sli-jrn__card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--beige-dark); }
.sli-jrn__step { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.sli-jrn__card h3 { font-size: 1.15rem; margin: 7px 0 6px; }
.sli-jrn__card p { color: var(--ink-soft); font-size: .94rem; line-height: 1.5; margin: 0; }
.sli-jrn__node { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: var(--card); border: 2px solid var(--beige-dark); color: var(--taupe-dark); font-weight: 600; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; z-index: 2; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 7px var(--bg); }

/* ---------- FINANCIERING ---------- */
.sli-finance { background: var(--bg-soft); }
.sli-finance__box { display: flex; align-items: center; gap: 26px; background: linear-gradient(120deg, var(--sage-soft), var(--card-soft)); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(26px, 4vw, 40px); box-shadow: var(--shadow-sm); }
.sli-finance__icon { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--sage); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.sli-finance__icon .sli-ic { width: 30px; height: 30px; }
.sli-finance__copy { flex: 1 1 auto; }
.sli-finance__copy h3 { font-size: 1.3rem; margin: 0 0 4px; }
.sli-finance__copy p { color: var(--ink-soft); margin: 0; line-height: 1.5; max-width: 60ch; }
.sli-finance__cta { flex: 0 0 auto; }

/* ---------- VAN ONTWERP NAAR REALISATIE (interactieve voor/na-slider) ---------- */
.sli-ba { background: var(--bg); }
.sli-ba__viewer { position: relative; max-width: 1000px; margin: clamp(30px, 4vw, 50px) auto 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 16/10; user-select: none; touch-action: pan-y; --ba-pos: 50%; }
.sli-ba__viewer img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sli-ba__after { position: absolute; inset: 0; }
.sli-ba__before { position: absolute; inset: 0; width: var(--ba-pos); overflow: hidden; }
.sli-ba__before img { height: 100%; object-fit: cover; }
.sli-ba__tag { position: absolute; top: 16px; z-index: 3; background: rgba(20,17,14,.6); color: #fff; font-size: .78rem; font-weight: 500; letter-spacing: .02em; padding: 6px 13px; border-radius: 999px; }
.sli-ba__tag--l { left: 16px; }
.sli-ba__tag--r { right: 16px; }
.sli-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 6; }
.sli-ba__handle { position: absolute; top: 50%; left: var(--ba-pos); transform: translate(-50%, -50%); z-index: 5; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); pointer-events: none; }
.sli-ba__handle::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3px; height: 100vh; background: #fff; z-index: -1; }
.sli-ba__drag { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4; background: rgba(20,17,14,.55); color: #fff; font-size: .74rem; padding: 6px 14px; border-radius: 999px; pointer-events: none; transition: opacity .3s; }
.sli-ba__viewer.is-touched .sli-ba__drag { opacity: 0; }

/* ---------- PROJECTEN ---------- */
.sli-projects { background: var(--bg-soft); }
.sli-proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 14px; }
.sli-proj { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.sli-proj:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sli-proj:hover .sli-proj__media img { transform: scale(1.05); }
.sli-proj__media { position: relative; display: block; width: 100%; aspect-ratio: 4/3; overflow: hidden; border: 0; padding: 0; margin: 0; background: none; cursor: zoom-in; font: inherit; }
.sli-proj__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sli-proj__chip { position: absolute; left: 14px; bottom: 14px; background: rgba(255,255,255,.92); color: var(--ink); font-size: .78rem; font-weight: 500; padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.sli-proj__zoom { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s; box-shadow: var(--shadow-sm); }
.sli-proj__media:hover .sli-proj__zoom, .sli-proj__media:focus-visible .sli-proj__zoom { opacity: 1; transform: scale(1); }
.sli-proj__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.sli-proj__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sli-proj__head h3 { font-size: 1.25rem; margin: 0; }
.sli-proj__loc { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--ink-mute); white-space: nowrap; }
.sli-proj__loc .sli-ic { width: 15px; height: 15px; }
.sli-proj__body p { color: var(--ink-soft); line-height: 1.5; margin: 10px 0 18px; flex: 1 1 auto; }
.sli-proj__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--sage-dark); font-size: .94rem; border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; }
.sli-proj__link .sli-ic { width: 18px; height: 18px; transition: transform .2s; }
.sli-proj__link:hover .sli-ic { transform: scale(1.12); }
.sli-proj-note { text-align: center; color: var(--ink-mute); font-size: .82rem; margin-top: 22px; font-style: italic; }

/* ---------- INTAKE FORM ---------- */
.sli-intake { background: var(--bg); scroll-margin-top: 90px; }
.sli-intake__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.sli-intake__aside { position: sticky; top: 100px; }
.sli-intake__aside h2 { margin: 12px 0 0; }
.sli-intake__aside > p { color: var(--ink-soft); margin-top: 14px; line-height: 1.6; }
.sli-intake__usps { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sli-intake__usps li { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--ink); }
.sli-intake__usps .sli-ic { width: 20px; height: 20px; color: var(--sage); }

.sli-intake__formwrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow); }
.sli-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sli-form__progress { margin-bottom: 26px; }
.sli-form__bar { height: 7px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.sli-form__bar span { display: block; height: 100%; background: var(--sage); border-radius: 999px; transition: width .35s cubic-bezier(.4,0,.2,1); }
.sli-form__count { font-size: .82rem; color: var(--ink-mute); margin: 10px 0 0; font-weight: 500; }

.sli-step-panel { border: 0; margin: 0; padding: 0; min-inline-size: auto; animation: sliFade .35s ease; }
.sli-step-panel[hidden] { display: none; }
@keyframes sliFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sli-step-panel legend { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 500; color: var(--ink); margin-bottom: 20px; padding: 0; }
.sli-step-panel__k { width: 38px; height: 38px; border-radius: 12px; background: var(--sage-soft); color: var(--sage-dark); display: inline-flex; align-items: center; justify-content: center; }
.sli-step-panel__k .sli-ic { width: 20px; height: 20px; }

.sli-field { margin-bottom: 18px; }
.sli-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sli-label { display: block; font-size: .9rem; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.sli-label em { color: var(--sage-dark); font-style: normal; }
.sli-input { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 13px 15px; font: inherit; font-size: .96rem; color: var(--ink); transition: border-color .2s, box-shadow .2s, background .2s; }
.sli-input:focus { outline: none; border-color: var(--sage); background: #fff; box-shadow: 0 0 0 3px var(--sage-soft); }
textarea.sli-input { resize: vertical; min-height: 96px; }
select.sli-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A7866' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; }

/* option chips (radio) */
.sli-opts { display: grid; gap: 10px; }
.sli-opts--2 { grid-template-columns: 1fr 1fr; }
.sli-opts--3 { grid-template-columns: repeat(3, 1fr); }
.sli-opt { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 10px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; font-size: .92rem; color: var(--ink); transition: border-color .2s, background .2s, box-shadow .2s; }
.sli-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sli-opt:hover { border-color: var(--beige-dark); }
.sli-opt:has(input:checked) { border-color: var(--sage); background: var(--sage-soft); box-shadow: 0 0 0 1px var(--sage); font-weight: 500; }
.sli-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--sage-soft); }

.sli-consent { display: flex; align-items: flex-start; gap: 12px; margin: 6px 0 4px; cursor: pointer; }
.sli-consent input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--sage); }
.sli-consent span { font-size: .88rem; color: var(--ink-soft); line-height: 1.45; }
.sli-consent em { color: var(--sage-dark); font-style: normal; }

.sli-form__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
.sli-form__nav .btn { min-width: 120px; }
.sli-form__err { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--r-sm); background: var(--error-soft); color: var(--error); font-size: .9rem; }
.sli-input.is-invalid, .sli-opts.is-invalid .sli-opt { border-color: var(--error); }

.sli-form__ok { text-align: center; padding: 16px 8px; animation: sliFade .4s ease; }
.sli-form__tick { width: 64px; height: 64px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.sli-form__tick .sli-ic { width: 32px; height: 32px; stroke-width: 2; }
.sli-form__ok h3 { font-size: 1.5rem; margin: 0 0 10px; }
.sli-form__ok p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 22px; line-height: 1.6; }

/* ---------- FAQ ---------- */
.sli-faq { background: var(--bg-soft); }
.sli-faq__grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.sli-faq__intro { position: sticky; top: 100px; }
.sli-faq__intro h2 { margin: 12px 0 0; }
.sli-faq__intro p { color: var(--ink-soft); margin-top: 14px; line-height: 1.6; }
.sli-faq__item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.sli-faq__item[open] { border-color: var(--beige-dark); box-shadow: var(--shadow-sm); }
.sli-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-size: 1.05rem; font-weight: 500; color: var(--ink); }
.sli-faq__item summary::-webkit-details-marker { display: none; }
.sli-faq__plus { position: relative; flex: 0 0 auto; width: 22px; height: 22px; }
.sli-faq__plus::before, .sli-faq__plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; background: var(--sage); transform: translate(-50%, -50%); transition: transform .25s; border-radius: 2px; }
.sli-faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.sli-faq__item[open] .sli-faq__plus::after { transform: translate(-50%, -50%) rotate(0); }
.sli-faq__a { padding: 0 24px 22px; }
.sli-faq__a p { color: var(--ink-soft); line-height: 1.6; margin: 0; max-width: 64ch; }

/* ---------- AFSLUITENDE CTA ---------- */
.sli-cta { position: relative; color: #fff; text-align: center; }
.sli-cta__media { position: absolute; inset: 0; z-index: 0; }
.sli-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.sli-cta__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,14,.55), rgba(20,17,14,.72)); }
.sli-cta__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.sli-cta h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); }
.sli-cta p { color: rgba(255,255,255,.9); font-size: 1.1rem; line-height: 1.55; margin: 18px auto 30px; max-width: 56ch; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* ---------- EIGEN ONTWERP (traject 4) ---------- */
.sli-eigen { background: var(--bg-warm); }
.sli-eigen__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.sli-eigen__eyebrow { display: inline-block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; margin-bottom: 12px; }
.sli-eigen__txt h2 { margin: 0 0 14px; }
.sli-eigen__txt .sli-sub { margin: 0 0 22px; }
.sli-eigen__txt .sli-ticks { margin-bottom: 28px; }
.sli-eigen__cta { align-self: flex-start; }

/* Mozaïek: staand beeld links over twee rijen, twee liggende beelden rechts.
   De liggende beelden bepalen de rijhoogte; het staande beeld rekt mee. */
.sli-eigen__mozaiek { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.sli-eigen__fig { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--bg-soft); }
.sli-eigen__fig--groot { grid-row: 1 / span 2; }
.sli-eigen__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sli-eigen__fig:not(.sli-eigen__fig--groot) img { aspect-ratio: 3 / 2; }

/* ---------- VOORBEELDEN PER BRANCHE ---------- */
.sli-voorbeelden { background: var(--bg-soft); }

/* Branche-pillen, zelfde taal als de kaarten elders op de pagina. */
.sli-branches { list-style: none; margin: 0 0 34px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sli-branches li { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 17px; font-size: .88rem; color: var(--ink); box-shadow: var(--shadow-sm); }

/* Zes kolommen, zodat elke rij precies uitkomt: 3+3, 2+2+2, 3+3.
   De verhoudingen (16/9 breed, 4/3 smal) houden de rijen even hoog. */
.sli-vb-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.sli-vb { grid-column: span 2; margin: 0; }
.sli-vb--groot { grid-column: span 3; }
.sli-vb__btn { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 0; padding: 0; margin: 0; background: var(--bg-warm); cursor: zoom-in; font: inherit; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.sli-vb--groot .sli-vb__btn { aspect-ratio: 16 / 9; }
.sli-vb__btn img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.sli-vb__btn:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sli-vb__btn:hover img { transform: scale(1.05); }
.sli-vb__zoom { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s; box-shadow: var(--shadow-sm); }
.sli-vb__btn:hover .sli-vb__zoom, .sli-vb__btn:focus-visible .sli-vb__zoom { opacity: 1; transform: scale(1); }
.sli-vb__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 980px) {
	.sli-vb-grid { grid-template-columns: repeat(2, 1fr); }
	.sli-vb, .sli-vb--groot { grid-column: span 1; }
	.sli-vb--groot .sli-vb__btn { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
	.sli-vb-grid { grid-template-columns: 1fr; }
	.sli-branches { gap: 8px; }
	.sli-branches li { font-size: .82rem; padding: 7px 14px; }
}

@media (max-width: 980px) {
	.sli-eigen__grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 640px) {
	.sli-eigen__mozaiek { grid-template-columns: 1fr; }
	.sli-eigen__fig--groot { grid-row: auto; }
	.sli-eigen__fig--groot img { aspect-ratio: 3 / 4; }
}

@media (max-width: 980px) {
	.sli-intro__grid { grid-template-columns: 1fr; gap: 18px; }
	.sli-exp-grid { grid-template-columns: repeat(2, 1fr); }
	.sli-intake__grid, .sli-faq__grid { grid-template-columns: 1fr; }
	.sli-intake__aside, .sli-faq__intro { position: static; }
	.sli-stats { grid-template-columns: 1fr 1fr; }
	.sli-stat:nth-child(odd)::before { display: none; }
	.sli-stat:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 720px) {
	.sli-ba__viewer { aspect-ratio: 4/3; }
	.sli-jrn { max-width: 520px; }
	.sli-jrn::before { left: 27px; }
	.sli-jrn__row { grid-template-columns: 1fr; margin-bottom: 14px; }
	.sli-jrn__card, .sli-jrn__row:nth-child(even) .sli-jrn__card { grid-column: 1; margin-left: 70px; }
	.sli-jrn__node { left: 27px; top: 26px; transform: translate(-50%, 0); width: 46px; height: 46px; font-size: .95rem; box-shadow: 0 0 0 6px var(--bg); }
}
@media (max-width: 860px) {
	.sli-traj-grid, .sli-proj-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
	.sli-traj--featured { order: -1; }
	.sli-hero { border-radius: 0 0 24px 24px; min-height: clamp(480px, 76vh, 620px); }
	.sli-hero__inner { padding-top: 100px; padding-bottom: clamp(80px, 16vw, 120px); }
	.sli-hero__wash { background: linear-gradient(180deg, rgba(20,17,14,.22) 0%, rgba(20,17,14,.12) 34%, rgba(20,17,14,.52) 74%, rgba(20,17,14,.78) 100%); }
}
@media (max-width: 640px) {
	.sli-exp-grid { grid-template-columns: 1fr; }
	.sli-stat__l { font-size: .76rem; }
	.sli-finance__box { flex-direction: column; text-align: center; }
	.sli-finance__copy p { margin-inline: auto; }
	.sli-row2 { grid-template-columns: 1fr; }
	.sli-opts--3 { grid-template-columns: 1fr; }
	.sli-hero__ctas .btn { flex: 1 1 100%; }
	.sli-form__nav { flex-direction: column-reverse; }
	.sli-form__nav .btn { width: 100%; }
}

/* ==========================================================================
   SCROLL-REVEAL + STAGGER  (alleen actief zodra JS .sli-anim op <html> zet;
   zonder JS blijft alles gewoon zichtbaar)
   ========================================================================== */
.sli-anim [data-sli-reveal],
.sli-anim .umi-sli .sec-head { opacity: 0; transform: translateY(22px); will-change: opacity, transform; }
.sli-anim [data-sli-reveal].sli-in,
.sli-anim .umi-sli .sec-head.sli-in {
	opacity: 1; transform: none;
	transition: opacity .7s cubic-bezier(.2,.65,.3,1), transform .7s cubic-bezier(.2,.65,.3,1);
}

/* cohesie: zachtere kaartranden = minder blokkerig, meer eenheid */
.umi-sli .sli-exp,
.umi-sli .sli-jrn__card,
.umi-sli .sli-proj { border-color: var(--line-soft); }

/* ==========================================================================
   LIGHTBOX (projecten)
   ========================================================================== */
.sli-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(20,17,14,.88); opacity: 0; transition: opacity .25s ease; }
.sli-lightbox[hidden] { display: none; }
.sli-lightbox.is-open { opacity: 1; }
.sli-lightbox__fig { margin: 0; display: flex; flex-direction: column; gap: 12px; transform: scale(.96); transition: transform .3s cubic-bezier(.2,.65,.3,1); }
.sli-lightbox.is-open .sli-lightbox__fig { transform: scale(1); }
.sli-lightbox__fig img { max-width: min(1100px, 92vw); max-height: 82vh; object-fit: contain; border-radius: var(--r); box-shadow: 0 30px 80px rgba(0,0,0,.55); display: block; }
.sli-lightbox__fig figcaption { color: rgba(255,255,255,.85); font-size: .9rem; text-align: center; }
.sli-lightbox__close { position: absolute; top: 18px; right: 22px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; transition: background .2s; }
.sli-lightbox__close:hover { background: rgba(255,255,255,.28); }

/* reduced motion: laat reveals/animaties met rust */
@media (prefers-reduced-motion: reduce) {
	.sli-step-panel, .sli-form__ok { animation: none; }
	.sli-proj__media img, .sli-ba__viewer img { transition: none; }
	.sli-lightbox, .sli-lightbox__fig { transition: none; }
}

/* Tussenmaat: 2 kaarten naast elkaar. Als bereik geschreven, zodat de bestaande
   860px-regel (1 kolom) niet afhankelijk is van de volgorde in dit bestand. */
@media (min-width: 861px) and (max-width: 1180px) {
	.sli-traj-grid { grid-template-columns: repeat(2, 1fr); }
}