.catalog-section {
  background: #00c9d8;
  overflow: hidden;
}

.catalog-section .section-heading { margin-bottom: 2rem; }
.catalog-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  background: #fff;
  border: 2px solid #171717;
  padding: .15rem .75rem;
  box-shadow: 4px 4px 0 #171717;
}
.catalog-search input { border: 0; box-shadow: none !important; background: transparent !important; }
.catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.catalog-item {
  background: #fff9f5;
  border: 2px solid #171717;
  padding: 1.15rem;
  min-height: 265px;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.catalog-item:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 #171717; z-index: 2; }
.catalog-item.span-2 { grid-column: span 2; }
.catalog-item.overflow-visible { overflow: visible; z-index: 3; }
.catalog-item[hidden] { display: none; }
.catalog-index { position: absolute; right: .65rem; top: .35rem; color: #ff4300; font-weight: 800; font-size: 1.8rem; line-height: 1; }
.catalog-item h3 { font-size: 1.25rem; margin: 0; padding-right: 2.4rem; }
.catalog-item > p { font-size: .82rem; min-height: 2.5rem; margin: .4rem 0 1.2rem; color: #504b47; }
.catalog-demo { margin-top: auto; }
.demo-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.square-action { width: 2.75rem; height: 2.75rem; border: 2px solid #171717; background: #fff; font-size: 1.3rem; font-weight: 800; box-shadow: 3px 3px 0 #171717; cursor: pointer; transition: transform .16s, box-shadow .16s; }
.square-action:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #171717; }
.orange-bg { background: #ff4300; color: #fff; }
.success-copy { color: #096437; font-weight: 800; }
.choice-list { border: 0; padding: 0; margin: 0; }
.choice-list legend { font-size: .8rem; font-weight: 800; margin-bottom: .45rem; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 800; }
.switch { width: 3.5rem; height: 1.9rem; border: 2px solid #171717; background: #ff4300; padding: .15rem; cursor: pointer; transition: background .2s; }
.switch span { display: block; width: 1.25rem; height: 1.25rem; background: #fff; border: 2px solid #171717; transform: translateX(1.55rem); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.switch[aria-checked=false] { background: #ccc; }
.switch[aria-checked=false] span { transform: translateX(0); }
.combobox { position: relative; display: flex; flex-direction: column; }
.combobox > label, .range-control label { font-size: .8rem; font-weight: 800; }
.combobox-control { display: flex; }
.combobox-control input { flex: 1; }
.combobox-control button { width: 2.8rem; border: 2px solid #171717; border-left: 0; background: #ff4300; color: #fff; font-weight: 800; }
.combobox ul { position: absolute; left: 0; right: 0; top: 4.45rem; background: #fff; border: 2px solid #171717; box-shadow: 5px 5px 0 #171717; list-style: none; padding: .35rem; margin: 0; z-index: 8; }
.combobox li { padding: .55rem .65rem; cursor: pointer; }
.combobox li:hover, .combobox li.active { background: #00c9d8; }
.upload-zone { position: relative; border: 2px dashed #171717; background: #fff; padding: 1rem; text-align: center; transition: background .2s, transform .2s; }
.upload-zone.dragging { background: #00c9d8; transform: scale(1.01); }
.upload-zone input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.upload-zone label { display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; }
.upload-zone small { display: block; color: #5c5651; }
.upload-icon { font-size: 2rem; font-weight: 800; color: #ff4300; }
.range-control > div { display: flex; justify-content: space-between; }
.range-control output { font-weight: 800; color: #ff4300; }
.range-control input { accent-color: #ff4300; width: 100%; }
.catalog-tab-panel { display: flex; flex-direction: column; background: #fff0e7; padding: 1rem; margin-top: .75rem; }
.catalog-tab-panel.changing { animation: tab-swap .28s ease; }
.accordion { border-top: 2px solid #171717; }
.accordion-item { border-bottom: 2px solid #171717; }
.accordion-item button { width: 100%; display: flex; justify-content: space-between; border: 0; background: transparent; padding: .8rem 0; text-align: left; font-weight: 800; cursor: pointer; }
.accordion-item button span { font-size: 1.15rem; }
.accordion-panel { font-size: .85rem; padding: 0 2rem .8rem 0; animation: accordion-in .22s ease; }
.breadcrumb { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-size: .85rem; }
.breadcrumb a { color: #171717; font-weight: 800; }
.page-numbers { display: flex; gap: .3rem; }
.page-numbers button { border: 2px solid #171717; background: #fff; min-width: 2.1rem; height: 2.1rem; cursor: pointer; font-weight: 800; }
.page-numbers button.current { background: #171717; color: #fff; }
.menu-wrap { position: relative; display: inline-block; }
.action-menu { position: absolute; left: 0; top: calc(100% + .5rem); min-width: 12rem; background: #fff; border: 2px solid #171717; box-shadow: 5px 5px 0 #171717; z-index: 10; padding: .35rem; }
.action-menu button { display: block; width: 100%; border: 0; background: #fff; padding: .6rem; text-align: left; cursor: pointer; }
.action-menu button:hover { background: #00c9d8; }
.tooltip-wrap { position: relative; display: inline-flex; }
.tooltip { position: absolute; left: 50%; bottom: calc(100% + .7rem); width: max-content; max-width: 13rem; transform: translate(-50%, .4rem); background: #171717; color: #fff; padding: .5rem .65rem; font-size: .75rem; opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s; z-index: 6; }
.tooltip::after { content: ""; position: absolute; left: 50%; top: 100%; border: .35rem solid transparent; border-top-color: #171717; transform: translateX(-50%); }
.tooltip-wrap:hover .tooltip, .tooltip-wrap:focus-within .tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.inline-alert { display: flex; align-items: flex-start; gap: .75rem; background: #ffe5f4; border: 2px solid #171717; padding: .85rem; }
.inline-alert > span { display: grid; place-items: center; flex: 0 0 2rem; height: 2rem; background: #ff1fa5; color: #fff; font-weight: 800; }
.inline-alert p { margin: .15rem 0 0; font-size: .82rem; }
.inline-alert button { margin-left: auto; border: 0; background: transparent; font-size: 1.4rem; cursor: pointer; }
.inline-alert.dismissed { animation: alert-out .25s ease forwards; }
.mini-table-wrap { overflow-x: auto; }
.mini-table { font-size: .78rem; }
.mini-table th, .mini-table td { padding: .6rem; }
.compact-stepper { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }
.compact-stepper .step { display: flex; align-items: center; gap: .45rem; font-size: .75rem; }
.compact-stepper .step span { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 2px solid #171717; background: #fff; font-weight: 800; }
.compact-stepper .step.done span { background: #171717; color: #fff; }
.compact-stepper .step.active span { background: #ff4300; color: #fff; }
.catalog-progress { margin-top: 1rem; }
.catalog-progress span { width: 55%; }
.catalog-empty { text-align: center; background: #fff9f5; border: 2px solid #171717; padding: 3rem; }
.catalog-empty strong { font-size: 1.4rem; }
.catalog-empty p { margin: .3rem 0 0; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(23,23,23,.55); z-index: 18; opacity: 0; transition: opacity .25s; }
.drawer-backdrop.visible { opacity: 1; }
.drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(430px,92vw); background: #fff9f5; border-left: 3px solid #171717; z-index: 19; padding: clamp(1.5rem,4vw,3rem); transform: translateX(105%); transition: transform .35s cubic-bezier(.2,.8,.2,1); box-shadow: -8px 0 0 #ff4300; }
.drawer.open { transform: none; }
.drawer h2 { font-size: clamp(2.5rem,5vw,4.5rem); line-height: .9; margin: 0; }
.drawer-close { position: absolute; right: 1rem; top: 1rem; border: 0; background: transparent; font-size: 2rem; cursor: pointer; }
.drawer-status { display: flex; justify-content: space-between; align-items: center; margin: 1.5rem 0; font-size: .8rem; }
.drawer dl { border-top: 2px solid #171717; margin: 1.5rem 0 2rem; }
.drawer dl div { display: flex; justify-content: space-between; border-bottom: 2px solid #171717; padding: .85rem 0; }
.drawer dt { font-weight: 800; }
.drawer dd { margin: 0; }
.no-scroll { overflow: hidden; }

/* Woningsplitsing: één volume wordt spelenderwijs twee thuisplekken. */
.split-experience {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(32rem, 1.15fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
  background: #fff9f5;
  overflow: hidden;
}
.split-copy h2 { margin: 0; font-size: clamp(2.8rem, 5vw, 5.8rem); line-height: .88; letter-spacing: -.045em; }
.split-lead { max-width: 39rem; font-size: clamp(1rem, 1.3vw, 1.2rem); margin: 1.5rem 0 2rem; }
.split-controls { border-top: 2px solid #171717; border-bottom: 2px solid #171717; padding: 1.25rem 0 1.4rem; }
.split-control-label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 800; }
.split-control-label output { color: #ff4300; font-size: 1.6rem; line-height: 1; }
.split-controls input[type=range] { width: 100%; height: 2.4rem; margin: .6rem 0 0; accent-color: #ff4300; cursor: ew-resize; }
.split-controls input[type=range]:focus-visible { outline: 3px solid #00c9d8; outline-offset: 3px; }
.split-controls #split-hint { color: #5c5651; font-size: .82rem; margin: .1rem 0 1.25rem; }
.split-guides { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.2rem; }
.split-guide { min-width: 0; display: flex; align-items: center; gap: .8rem; border: 2px solid #171717; background: #fff; padding: .55rem; }
.guide-portrait { width: 4rem; height: 4rem; flex: 0 0 4rem; overflow: hidden; background: #fff; }
.guide-portrait img { display: block; width: 170%; max-width: none; transform: translate(-20.5%, -7%); mix-blend-mode: multiply; }
.split-guide strong,.split-guide span { display: block; }
.split-guide strong { font-size: .92rem; }
.split-guide span { color: #5c5651; font-size: .75rem; line-height: 1.25; margin-top: .15rem; }

.split-stage {
  --split-progress: 0;
  min-height: 650px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  background: #00c9d8;
  border: 3px solid #171717;
  box-shadow: 9px 9px 0 #171717;
  padding: clamp(1rem, 3vw, 2rem);
}
.split-orbit { position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.orbit-one { width: 34%; aspect-ratio: 1; right: 4%; top: 5%; background: #ff1fa5; animation: soft-pulse 5s ease-in-out infinite; }
.orbit-two { width: 18%; aspect-ratio: 1; left: 5%; top: 22%; background: #ff4300; mix-blend-mode: multiply; animation: shape-float 6s -2s ease-in-out infinite alternate; }
.house-scene { width: min(100%, 650px); aspect-ratio: 1.23; position: relative; margin: 0 auto 1.1rem; }
.house-roof { position: absolute; inset: 2% 4% auto; height: 35%; background: #171717; clip-path: polygon(50% 0,100% 100%,0 100%); z-index: 4; }
.house-roof span { position: absolute; inset: 7px 9px 0; background: #ff4300; clip-path: inherit; }
.house-body { position: absolute; left: 10%; right: 10%; bottom: 8%; height: 62%; overflow: hidden; background: #fff9f5; border: 4px solid #171717; z-index: 5; }
.new-home-fill { position: absolute; inset: 0 0 0 auto; width: calc(var(--split-progress) * 1%); background: #ff1fa5; transition: width .45s cubic-bezier(.2,.8,.2,1); }
.home-half { position: absolute; inset-block: 0; overflow: hidden; transition: width .45s cubic-bezier(.2,.8,.2,1); }
.original-home { left: 0; width: calc(100% - (var(--split-progress) * 1%)); }
.new-home { right: 0; width: calc(var(--split-progress) * 1%); opacity: 0; transition: width .45s cubic-bezier(.2,.8,.2,1), opacity .25s; }
.split-stage.is-split .new-home { opacity: 1; }
.split-wall { position: absolute; left: calc(100% - (var(--split-progress) * 1%)); top: 0; bottom: 0; width: 5px; background: #171717; transform: translateX(-2px); transition: left .45s cubic-bezier(.2,.8,.2,1); z-index: 5; }
.split-wall span { position: absolute; left: 50%; top: 43%; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: 2px solid #171717; background: #fff; transform: translate(-50%,-50%) rotate(90deg); font-weight: 800; opacity: 0; transition: opacity .2s; }
.split-stage.is-split .split-wall span { opacity: 1; }
.window { position: absolute; width: 26%; aspect-ratio: 1.15; left: 16%; top: 20%; display: grid; grid-template-columns: 1fr 1fr; background: #00c9d8; border: 3px solid #171717; }
.window i { border: 1px solid #171717; }
.door { position: absolute; width: 20%; height: 40%; right: 15%; bottom: 0; background: #ff4300; border: 3px solid #171717; border-bottom: 0; }
.door span { position: absolute; width: .45rem; aspect-ratio: 1; right: 12%; top: 52%; border-radius: 50%; background: #171717; }
.new-home .window { width: 33%; left: 8%; top: 18%; background: #fff; }
.new-home .door { width: 30%; right: 10%; background: #00c9d8; transform: translateY(110%); transition: transform .45s .12s cubic-bezier(.2,.8,.2,1); }
.split-stage.is-split .new-home .door { transform: none; }
.resident { position: absolute; bottom: 0; width: 12%; height: 20%; border-radius: 50% 50% 0 0; background: #171717; opacity: .9; }
.resident::before { content: ""; position: absolute; width: 65%; aspect-ratio: 1; border-radius: 50%; background: inherit; left: 17%; top: -48%; }
.resident-one { left: 48%; }
.resident-two { left: 48%; background: #fff; transform: translateY(140%); transition: transform .5s .18s cubic-bezier(.2,.8,.2,1); }
.split-stage.is-split .resident-two { transform: none; }
.space-stamp { position: absolute; right: 4%; top: 6%; padding: .35rem .55rem; background: #00c9d8; border: 2px solid #171717; transform: rotate(4deg); font-size: clamp(.65rem, 1.3vw, .88rem); font-weight: 800; transition: background .25s, color .25s, transform .35s; z-index: 7; }
.split-stage.is-split .space-stamp { background: #171717; color: #fff; transform: rotate(-3deg) scale(1.05); }
.house-ground { position: absolute; left: 3%; right: 3%; bottom: 6%; height: 4px; background: #171717; }
.split-score { position: relative; z-index: 7; display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: center; background: #fff9f5; border: 2px solid #171717; padding: .85rem 1rem; }
.split-score div { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.split-score span { font-size: .75rem; text-transform: uppercase; font-weight: 800; letter-spacing: .06em; }
.split-score strong { font-size: clamp(1rem, 1.5vw, 1.25rem); }
.score-arrow { color: #ff4300; font-size: 1.5rem !important; transition: transform .35s; }
.split-stage.is-split .score-arrow { transform: translateX(.25rem) scale(1.2); }
.split-live { min-height: 2.8rem; margin: .8rem 0 0; font-size: .84rem; font-weight: 800; text-align: center; }
.burst { position: absolute; width: 1.2rem; height: 1.2rem; opacity: 0; pointer-events: none; z-index: 8; }
.burst-one { left: 13%; top: 15%; background: #ff4300; }
.burst-two { right: 8%; top: 34%; border-radius: 50%; background: #171717; }
.burst-three { left: 25%; top: 44%; background: #ff1fa5; transform: rotate(45deg); }
.burst-four { right: 24%; top: 9%; border: 4px solid #171717; }
.split-stage.celebrate .burst { animation: split-burst .8s cubic-bezier(.2,.8,.2,1) both; }
.split-stage.celebrate .burst-two { animation-delay: .08s; }
.split-stage.celebrate .burst-three { animation-delay: .14s; }
.split-stage.celebrate .burst-four { animation-delay: .2s; }

@keyframes accordion-in { from { opacity: 0; transform: translateY(-.4rem); } to { opacity: 1; transform: none; } }
@keyframes alert-out { to { opacity: 0; transform: translateX(1rem); } }
@keyframes split-burst { 0% { opacity: 0; scale: .2; translate: 0 1rem; } 45% { opacity: 1; scale: 1.4; } 100% { opacity: 0; scale: .8; translate: 0 -3.5rem; rotate: 35deg; } }

@media (max-width:1100px) { .catalog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width:1000px) { .split-experience { grid-template-columns: 1fr; } .split-stage { min-height: 580px; } }
@media (max-width:780px) { .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .catalog-item.span-2 { grid-column: span 2; } .split-stage { min-height: 520px; } }
@media (max-width:520px) { .catalog-grid { grid-template-columns: 1fr; } .catalog-item.span-2 { grid-column: span 1; } .catalog-item { min-height: auto; } .catalog-item > p { min-height: 0; } .compact-stepper { grid-template-columns: 1fr; } .combobox ul { position: static; } .site-header.nav-open nav { max-height: 390px; } .split-guides { grid-template-columns: 1fr; } .split-stage { min-height: 425px; padding: .75rem; box-shadow: 5px 5px 0 #171717; } .split-score { padding: .65rem; } .split-score div { flex-direction: column; gap: 0; } .house-scene { margin-bottom: .5rem; } }

@media (prefers-reduced-motion:reduce) {
  .split-stage * { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}