/* LS Wonen — Services Grid (interactive maatwerk picker) */
.lsw-sv-section { --white:#FFFFFF; --bone:#F8F6F2; --ink:#14151A; --ink-soft:#2E2F34; --body:#6E707A; --rule:#ECECEA; --accent:#C89F49; --accent-soft:#FCEFE8; font-family:'Manrope',system-ui,sans-serif; background:var(--white); color:var(--ink); }
.lsw-sv-section *, .lsw-sv-section *::before, .lsw-sv-section *::after { box-sizing:border-box; }
.lsw-sv { max-width:1280px; margin:0 auto; padding:96px 32px; }

.lsw-sv__head { text-align:center; max-width:680px; margin:0 auto 56px; }
.lsw-sv__eyebrow { display:inline-flex; align-items:center; gap:10px; padding:5px 14px 5px 5px; background:#fff; border:1px solid var(--rule); border-radius:999px; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:18px; box-shadow:0 6px 18px -10px rgba(15,15,15,.12), 0 1px 2px rgba(15,15,15,.04); letter-spacing:-.005em; }
.lsw-sv__eyebrow-icon { width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg, var(--accent-soft) 0%, #F6DDD0 100%); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.lsw-sv__eyebrow-icon svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lsw-sv__h2 { font-size:clamp(28px, 3.2vw, 42px); line-height:1.1; letter-spacing:-.02em; font-weight:700; margin:0 0 14px; color:var(--ink); }
.lsw-sv__intro { font-size:15px; line-height:1.6; color:var(--body); margin:0; }

.lsw-sv__pick { display:grid; grid-template-columns:1fr 1.15fr; gap:32px; align-items:stretch; }
.lsw-sv__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.lsw-sv__item { display:block; }
.lsw-sv__item-btn { width:100%; display:grid; grid-template-columns:36px 36px 1fr 28px; gap:14px; align-items:center; padding:16px 18px; background:#fff; border:1px solid var(--rule); border-radius:16px; cursor:pointer; text-align:left; font-family:inherit; transition:background .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); position:relative; overflow:hidden; }
.lsw-sv__item-btn::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); transform:scaleY(0); transform-origin:center; transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.lsw-sv__item-btn:hover { background:var(--bone); transform:translateX(2px); }
.lsw-sv__item.is-active .lsw-sv__item-btn { background:var(--bone); border-color:transparent; box-shadow:0 12px 30px -16px rgba(15,15,15,.16); }
.lsw-sv__item.is-active .lsw-sv__item-btn::before { transform:scaleY(1); }
.lsw-sv__num { font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--body); }
.lsw-sv__item.is-active .lsw-sv__num { color:var(--accent); }
.lsw-sv__item-icon { width:36px; height:36px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s ease, color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.lsw-sv__item.is-active .lsw-sv__item-icon, .lsw-sv__item-btn:hover .lsw-sv__item-icon { background:var(--accent); color:#fff; transform:rotate(-6deg); }
.lsw-sv__item-icon svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lsw-sv__item-txt strong { display:block; font-size:15px; font-weight:700; color:var(--ink); line-height:1.2; margin-bottom:2px; letter-spacing:-.005em; }
.lsw-sv__item-txt span { font-size:12.5px; color:var(--body); }
.lsw-sv__item-arrow { width:28px; height:28px; border-radius:50%; background:#fff; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; transition:background .3s ease, color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); border:1px solid var(--rule); }
.lsw-sv__item.is-active .lsw-sv__item-arrow { background:var(--ink); color:#fff; border-color:var(--ink); transform:rotate(-45deg); }
.lsw-sv__item-arrow svg { width:13px; height:13px; }

.lsw-sv__preview { display:grid; grid-template-columns:1fr; background:var(--bone); border-radius:24px; overflow:hidden; position:relative; }
.lsw-sv__panel { grid-area:1 / 1; display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .45s ease; }
.lsw-sv__panel.is-active { opacity:1; pointer-events:auto; }
.lsw-sv__panel-img { position:relative; aspect-ratio:16/10; overflow:hidden; }
.lsw-sv__panel-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04); transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.lsw-sv__panel.is-active .lsw-sv__panel-img img { transform:scale(1); }
.lsw-sv__panel-img::after { content:""; position:absolute; inset:auto 0 0 0; height:50%; background:linear-gradient(180deg, transparent 0%, rgba(15,15,15,.45) 100%); pointer-events:none; }
.lsw-sv__panel-tag { position:absolute; top:18px; left:18px; padding:6px 12px 6px 8px; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:999px; font-size:11px; font-weight:700; color:var(--ink); display:inline-flex; align-items:center; gap:6px; z-index:1; }
.lsw-sv__panel-tag::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.lsw-sv__panel-swatches { position:absolute; top:18px; right:18px; display:flex; gap:6px; padding:6px 8px; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:999px; z-index:1; }
.lsw-sv__panel-swatch { width:20px; height:20px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--rule); }
.lsw-sv__panel-body { padding:24px 28px 28px; background:#fff; }
.lsw-sv__panel-h { font-size:24px; font-weight:700; line-height:1.15; margin:0 0 8px; color:var(--ink); letter-spacing:-.015em; }
.lsw-sv__panel-desc { font-size:14px; line-height:1.55; color:var(--body); margin:0 0 18px; }
.lsw-sv__panel-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px; }
.lsw-sv__panel-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:var(--bone); border-radius:999px; font-size:12px; font-weight:600; color:var(--ink); }
.lsw-sv__panel-chip::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.lsw-sv__panel-cta { display:inline-flex; align-items:center; gap:10px; padding:13px 14px 13px 22px; background:var(--ink); color:#fff; border-radius:999px; font-size:13.5px; font-weight:600; text-decoration:none; transition:background .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.lsw-sv__panel-cta:hover { background:var(--accent); transform:translateY(-2px); }
.lsw-sv__panel-cta-arrow { width:28px; height:28px; border-radius:50%; background:var(--accent); display:inline-flex; align-items:center; justify-content:center; transition:transform .35s cubic-bezier(.2,.7,.2,1), background .3s ease, color .3s ease; }
.lsw-sv__panel-cta:hover .lsw-sv__panel-cta-arrow { background:#fff; color:var(--accent); transform:rotate(-45deg); }
.lsw-sv__panel-cta-arrow svg { width:13px; height:13px; color:#fff; transition:color .3s ease; }
.lsw-sv__panel-cta:hover .lsw-sv__panel-cta-arrow svg { color:var(--accent); }

@media (max-width: 980px) {
    .lsw-sv { padding:72px 20px; }
    .lsw-sv__pick { grid-template-columns:1fr; gap:20px; }
}
@media (max-width: 720px) {
    .lsw-sv { padding:56px 16px; }
    .lsw-sv__head { margin-bottom:40px; }
    .lsw-sv__panel-body { padding:22px 20px; }
}
@media (max-width: 560px) {
    .lsw-sv__item-btn { grid-template-columns:32px 1fr 24px; padding:12px 14px; gap:10px; }
    .lsw-sv__num { display:none; }
    .lsw-sv__item-icon { width:32px; height:32px; }
    .lsw-sv__item-txt strong { font-size:14px; }
    .lsw-sv__panel-h { font-size:20px; }
    .lsw-sv__panel-body { padding:20px 22px 22px; }
    .lsw-sv__panel-swatches { display:none; }
}
@media (prefers-reduced-motion: reduce) {
    .lsw-sv__panel-img img { transform:scale(1) !important; }
    .lsw-sv__panel { transition:opacity .15s ease; }
}