/* The offer stays consistent; only the welcome atmosphere changes. */
.hero .hero-lockup .wordmark{font-size:clamp(28px,3vw,44px)}
.hero .hero-lockup .lockup-mark{width:44px}
.hero h1.hero-tagline{font-size:clamp(38px,5.3vw,76px);line-height:1.04;letter-spacing:-.045em;max-width:17ch;font-weight:650;margin:0;text-wrap:balance}
.hero .hero-side{gap:22px;min-height:820px;padding-top:150px}
.hero[data-welcome="1"] .hero-media::after{background:linear-gradient(90deg,#092a36df,#163b3b44),linear-gradient(0deg,#0b2625ec,transparent 80%)}
.hero[data-welcome="2"] .hero-media::after{background:linear-gradient(90deg,#302511e8,#403b1a44),linear-gradient(0deg,#172819ef,transparent 80%)}
.ux-views{display:flex;flex-wrap:wrap;gap:8px}
.ux-views button{font:inherit;font-size:13px;color:white;background:#132f2470;border:1px solid #ffffff80;border-radius:30px;padding:9px 14px;cursor:pointer;min-height:40px}
.ux-views button[aria-pressed="true"]{background:#fff7e6;color:#153e2a;border-color:#fff7e6;font-weight:650}
.ux-views button:focus-visible,.ux-offer summary:focus-visible{outline:3px solid #e4b95b;outline-offset:4px}
.ux-offer{position:relative;background:#fffdf7;border:1px solid #d8dfd5;border-radius:20px;box-shadow:0 12px 35px #1531241c;display:flex;flex-direction:column;min-width:0;transition:box-shadow .25s,border-color .25s}
.ux-offer .lane{border:0;box-shadow:none;background:transparent;border-radius:19px 19px 0 0;flex:1}
.ux-offer .lane:hover{transform:none;box-shadow:none}
.ux-offer .lane-foot{border:1px solid #ede5d3;box-shadow:0 4px 22px #0003}
.ux-offer .lane-t{font-size:23px;letter-spacing:-.025em}
.ux-offer.is-near{border-color:#9ab69e;box-shadow:0 16px 40px #15312426}
.ux-offer:hover,.ux-offer:focus-within{border-color:#397851;box-shadow:0 18px 48px #15312430}
.ux-offer-details{border-top:1px solid #dce5da;margin:0 20px 18px;color:#34523d;font-size:14px}
.ux-offer-details summary{padding:14px 0 0;cursor:pointer;font-weight:650;min-height:40px}
.ux-offer-details p{margin:12px 0;line-height:1.65}
.ux-offer-details>a{display:inline-block;padding:8px 0;color:#1d603b;font-weight:650}
.ux-form-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:40px;align-items:start}
.ux-form{background:#fffdf7;padding:32px;border:1px solid #d7dfd3;border-radius:20px;display:grid;gap:20px;min-width:0;box-shadow:0 12px 36px #1730240c}
.ux-form label{display:grid;gap:8px;font-weight:600;font-size:15px}
.ux-form input:not([type=checkbox]),.ux-form select,.ux-form textarea,#memberSearch,#memberFilter{box-sizing:border-box;width:100%;font:inherit;padding:13px 14px;border:1px solid #adbcae;border-radius:9px;background:white;color:#173024;min-height:46px}
.ux-form textarea{min-height:140px;resize:vertical}
.ux-form input:focus,.ux-form textarea:focus,.ux-form select:focus{outline:2px solid #3e8155;outline-offset:2px}
.ux-form .ux-check,.ux-check{display:flex;align-items:flex-start;gap:12px;line-height:1.55;font-weight:400}
.ux-check input{width:20px;height:20px;flex:0 0 20px;accent-color:#286c43;margin-top:3px}
.ux-honey{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.ux-aside{padding:30px;background:#eaf0e5;border-radius:20px;border-top:4px solid #3f7450}
.ux-aside ol{padding-left:24px}.ux-aside li{padding:8px 0}
.ux-aside .btn{margin:12px 0;white-space:normal}
#memberStatus:not(:empty),#adminMemberStatus:not(:empty){padding:18px 20px;border-left:4px solid #a78034;background:#f9efdb;border-radius:8px;line-height:1.6;margin:20px 0;overflow-wrap:anywhere}
#memberStatus{grid-column:1/-1}
#memberManage{padding:24px;background:#fffdf7;border:1px solid #cbd8c9;border-radius:16px}
#manageActions{display:flex;flex-wrap:wrap;gap:18px}#manageActions p,#manageActions label{flex-basis:100%}
.ux-readiness{padding:20px;background:#eef2e8;border-left:4px solid #457653;border-radius:8px;line-height:1.65;margin-bottom:28px}
.ux-doc{max-width:960px}.ux-doc>h2{margin-top:36px;font-size:27px}.ux-doc p,.ux-doc li{line-height:1.85}.ux-doc li{margin:10px 0}
.ux-contract-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}
.ux-contract-grid details{border:1px solid #c8d7c4;background:#fffdf7;padding:22px;border-radius:12px;align-self:start}
.ux-contract-grid summary{font-size:18px;font-weight:650;cursor:pointer;min-height:40px}
.ux-contract-grid p{font-size:15px;margin:15px 0 0}
.ux-record{padding:20px;border:1px solid #ccdbcb;border-radius:12px;margin:16px 0;background:#fffdf7;overflow-wrap:anywhere}
.ux-record>summary{cursor:pointer;font-weight:600;padding:8px 0}.ux-record .ux-form{margin-top:20px;box-shadow:none}
.ux-admin-shortcut{display:block;background:#e4eedb;padding:12px;text-align:center;color:#235435;position:relative;z-index:100}
button:disabled{cursor:not-allowed;opacity:.55}
[hidden]{display:none!important}
@media(min-width:1000px){.hero[data-welcome="1"] .hero-side{align-items:flex-end;text-align:right}.hero[data-welcome="1"] .hero-actions,.hero[data-welcome="1"] .hero-facts{justify-content:flex-end}}
@media(max-width:700px){.hero .hero-side{min-height:740px;padding-top:130px;gap:20px}.hero h1.hero-tagline{font-size:43px;max-width:16ch}.hero .hero-lockup .wordmark{font-size:30px}.hero .hero-lockup .lockup-mark{width:34px}.ux-views button{font-size:12px;padding:9px 11px}.ux-form-layout{grid-template-columns:1fr;gap:24px}.ux-form,.ux-aside{padding:22px}.ux-contract-grid{grid-template-columns:1fr}.ux-offer .lane-visual{aspect-ratio:16/9}.ux-offer-details summary{padding-bottom:6px}.ux-doc .btn{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.ux-offer{transition:none}}
@media print{.site-header,.site-footer,.wa-float,.ux-doc button,.ux-doc .btn{display:none!important}.page-head{padding-top:0!important}.ux-contract-grid{display:block}.ux-contract-grid details{break-inside:avoid}.ux-contract-grid details::details-content{content-visibility:visible!important}.ux-doc{max-width:none}}
/* Expanded information belongs to its own card, without stretching neighbours. */
#laneGrid{align-items:start}
.ux-offer .lane{flex:none}
.ux-offer .lane-body{min-height:190px}
@media(max-width:560px){.ux-offer .lane-body{min-height:0}}
/* Scrollable offer rail: native touch and keyboard navigation. */
#laneGrid{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:4px;padding:4px 4px 24px;scrollbar-width:thin;scrollbar-color:#6c947f transparent;align-items:flex-start}
#laneGrid>.ux-offer{flex:0 0 calc((100% - 88px)/4);min-width:0;scroll-snap-align:start}
#laneGrid .lane-t{font-size:clamp(23px,2.1vw,32px)}
#laneGrid .lane-body{min-height:215px;padding:24px}
#laneGrid .lane-d{font-size:18px}
#laneGrid .lane-soft{font-size:21px;max-width:150px}
#laneGrid:focus-visible{outline:3px solid #ba873e;outline-offset:5px}
.offer-controls{display:flex;align-items:center;gap:10px;padding:10px 4px 18px;color:#315a47;font-size:14px}
.offer-controls>span:first-child{margin-right:auto;font-weight:600}
.offer-controls button{border:1px solid #9cb5a4;border-radius:99px;background:#fffdf6;color:#214f3a;min-width:44px;min-height:44px;padding:8px 16px;cursor:pointer;font:inherit}
.offer-controls button:hover:not(:disabled){background:#e2ecdf}.offer-controls button:disabled{opacity:.35;cursor:default}
.offer-controls button:focus-visible{outline:3px solid #ba873e;outline-offset:3px}
.stay-intro{padding-top:160px;background:#edf1e8}.stay-intro h1{max-width:850px}.stay-intro .lead{max-width:740px}
.stay-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:52px;align-items:center}.stay-layout figure{margin:0}.stay-layout img{width:100%;height:480px;object-fit:cover;border-radius:24px}.stay-layout figcaption{font-size:14px;color:#526457;margin-top:12px}.stay-layout h2:not(:first-child){margin-top:28px}.stay-layout p{margin:16px 0 24px}.stay-faq{max-width:850px;margin:70px auto}.stay-faq details{border-bottom:1px solid #c4d1c3;padding:22px 0}.stay-faq summary{cursor:pointer;font-weight:600;font-size:21px}.stay-faq p{padding-top:18px}.stay-invest{background:#edf1e8;padding:36px;border-radius:22px}.stay-invest p{max-width:780px;margin:16px 0 24px}
@media(max-width:1100px){#laneGrid>.ux-offer{flex-basis:calc((100% - 64px)/3)}}
@media(max-width:800px){#laneGrid>.ux-offer{flex-basis:calc((100% - 44px)/2)}.stay-layout{grid-template-columns:1fr;gap:30px}}
@media(max-width:560px){#laneGrid>.ux-offer{flex-basis:86%}#laneGrid .lane-body{min-height:190px}.offer-controls{flex-wrap:wrap}.offer-controls>span:first-child{flex-basis:100%}.stay-layout img{height:300px}.stay-intro{padding-top:130px}.stay-invest{padding:24px}}
@media(prefers-reduced-motion:reduce){#laneGrid{scroll-behavior:auto}.ux-offer{transition:none}}

/* Preserve the complete upright photograph of the opened trailer. */
#laneGrid .lane-visual:has(img[src$="vouwwagen-opgezet-eigen.jpeg"]){background:#e7e8dc}
#laneGrid .lane-visual>img[src$="vouwwagen-opgezet-eigen.jpeg"]{object-fit:contain;object-position:left center}
#laneGrid .lane-visual:has(img[src$="vouwwagen-opgezet-eigen.jpeg"]) .lane-foot{right:8px;bottom:12px;padding:12px;font-size:14px}
#svcGrid .photo:has(img[src$="vouwwagen-opgezet-eigen.jpeg"]){background:#e7e8dc}
#svcGrid .photo img[src$="vouwwagen-opgezet-eigen.jpeg"]{object-fit:contain}

/* A steady rail, with native swiping when the visitor takes over. */
#laneGrid.is-auto-moving{scroll-snap-type:none;scroll-behavior:auto}
#laneGrid .lane-visual{height:auto;aspect-ratio:4/3;overflow:hidden}
#laneGrid .lane-visual>img{position:absolute;inset:0;width:100%;height:100%}
#laneGrid .lane-visual:has(img[src$="vouwwagen-opgezet-eigen.jpeg"])::after{display:none}
@media(hover:hover) and (pointer:fine){
 .ux-offer .lane-more svg,.ux-offer .lane-more span{transition:transform .25s ease}
 .ux-offer:hover .lane-more svg{transform:translateX(4px)}
}
.ux-offer-details[open] p{animation:offer-detail-in .22s ease-out}
@keyframes offer-detail-in{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.ux-offer-details[open] p{animation:none}}