@font-face { font-family:"Instrument Sans"; src:url("https://home-plaza.nl/wp-content/mu-plugins/home-plaza-project-barneveld/assets/InstrumentSans.ttf") format("truetype"); font-weight:400 700; font-display:swap; }
main.hpp {
  --navy:#0b1220; --navy-2:#111a2e; --paper:#ffffff; --ink:#141a26; --muted:#5a6170; --line:#e4e7ec; --yellow:#f5c84c; --red:#a3361f;
  --wrap:1180px;
  --tabs-dur:250ms; --tabs-ease:cubic-bezier(0.22, 1, 0.36, 1);
  --modal-open-dur:250ms; --modal-close-dur:150ms; --modal-scale:.96; --modal-scale-close:.96; --modal-ease:cubic-bezier(0.22, 1, 0.36, 1);
}
main.hpp, main.hpp * { box-sizing:border-box; }
main.hpp { -webkit-text-size-adjust:100%; scroll-padding-top:90px; }
main.hpp { margin:0; background:var(--paper); color:var(--ink); font:400 18px/1.6 "Instrument Sans", system-ui, sans-serif; }
main.hpp img { display:block; max-width:100%; }
main.hpp a { color:inherit; text-decoration-color:var(--yellow); text-decoration-thickness:2px; text-underline-offset:3px; }
main.hpp a:hover { text-decoration-color:currentColor; }
main.hpp .wrap { width:min(var(--wrap), 100% - 40px); margin-inline:auto; }
main.hpp .eyebrow { margin:0; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
main.hpp h1, main.hpp h2, main.hpp h3 { font-weight:600; letter-spacing:-.025em; line-height:1.08; margin:0; }
main.hpp h2 { font-size:clamp(30px, 4vw, 50px); max-width:22ch; margin-top:8px; }
main.hpp h3 { font-size:clamp(21px, 2vw, 26px); }
main.hpp p { margin:0; }
main.hpp .lede { font-size:clamp(19px, 1.7vw, 22px); max-width:62ch; margin-top:20px; }
main.hpp section { padding:clamp(64px, 8vw, 112px) 0; }
main.hpp section + section { border-top:1px solid var(--line); }
main.hpp .btn { display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:17px; padding:15px 24px; text-decoration:none; }
main.hpp .btn.y { background:var(--yellow); color:var(--navy); }
main.hpp .btn.o { border:1.5px solid currentColor; }
main.hpp .btn:focus-visible, main.hpp button:focus-visible, main.hpp a:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }
main.hpp .concept { background:var(--yellow); color:var(--navy); font-size:15px; font-weight:600; }
main.hpp .concept .wrap { display:flex; gap:16px; align-items:center; justify-content:space-between; padding:10px 0; flex-wrap:wrap; }
main.hpp .concept a { text-decoration-color:var(--navy); }
main.hpp .topbar { background:#121a2b; color:#d9d3c8; font-size:14px; }
main.hpp .topbar .wrap { display:flex; gap:28px; justify-content:flex-end; padding:10px 0; flex-wrap:wrap; }
main.hpp .topbar b { color:var(--yellow); letter-spacing:.1em; }
main.hpp .site { background:var(--navy); color:#fff; position:sticky; top:0; z-index:20; }
main.hpp .site .wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; }
main.hpp .site .logo img { width:130px; height:auto; }
main.hpp .site nav ul { list-style:none; display:flex; gap:22px; margin:0; padding:0; font-size:15px; }
main.hpp .site nav a { text-decoration:none; color:#e7e1d6; }
main.hpp .site nav a:hover { color:#fff; }
main.hpp .site .acts { display:flex; gap:10px; }
main.hpp .site .acts .btn { padding:10px 18px; font-size:15px; border-radius:999px; }
main.hpp .crumbs { font-size:14px; color:var(--muted); padding:22px 0 0; }
main.hpp .crumbs ol { list-style:none; display:flex; gap:8px; padding:0; margin:0; flex-wrap:wrap; }
main.hpp .crumbs li + li::before { content:"›"; margin-right:8px; color:var(--line); }
main.hpp .hero { padding:36px 0 clamp(64px, 8vw, 104px); border:0; }
main.hpp .hero .wrap { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 400px); gap:clamp(32px, 6vw, 80px); align-items:start; }
main.hpp .hero h1 { font-size:clamp(40px, 5.6vw, 76px); letter-spacing:-.035em; margin-top:14px; max-width:15ch; }
main.hpp .facts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 32px; margin:36px 0 0; padding:24px 0 0; border-top:1px solid var(--line); max-width:620px; }
main.hpp .facts dt { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; }
main.hpp .facts dd { margin:4px 0 0; font-size:20px; font-weight:600; }
main.hpp .facts dd.big { font-size:34px; letter-spacing:-.02em; }
main.hpp .facts .tbd { color:var(--red); font-size:16px; font-weight:600; }
main.hpp .hero .cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
main.hpp .hero-video video { width:100%; aspect-ratio:9 / 16; background:#000; display:block; }
main.hpp .hero-video p { font-size:14px; color:var(--muted); margin-top:10px; }
main.hpp .strip { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; margin-top:40px; }
main.hpp .strip img { width:100%; aspect-ratio:3 / 4; object-fit:cover; }
main.hpp .ba-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin-top:44px; }
main.hpp .ba-item { margin:0; }
main.hpp .ba-frame { position:relative; aspect-ratio:3 / 4; overflow:hidden; background:var(--line); --p:50%; touch-action:pan-y; }
main.hpp .ba-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
main.hpp .ba-frame .after { clip-path:inset(0 0 0 var(--p)); }
main.hpp .ba-line { position:absolute; top:0; bottom:0; left:var(--p); width:4px; margin-left:-2px; background:var(--yellow); pointer-events:none; }
main.hpp .ba-tag { position:absolute; top:14px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:6px 10px; background:var(--navy); color:#fff; }
main.hpp .ba-tag.l { left:14px; }
main.hpp .ba-tag.r { right:14px; background:var(--yellow); color:var(--navy); }
main.hpp .ba-frame input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }
main.hpp .ba-frame:focus-within .ba-line { outline:2px solid var(--ink); }
main.hpp .ba-item figcaption { font-size:16px; margin-top:12px; color:var(--muted); }
main.hpp .ba-item figcaption b { color:var(--ink); }
main.hpp .parts { margin-top:48px; }
main.hpp .part { display:grid; grid-template-columns:minmax(0, 420px) minmax(0, 1fr); gap:clamp(28px, 5vw, 64px); align-items:center; padding:36px 0; border-top:1px solid var(--line); }
main.hpp .part:nth-child(even) .pimg { order:2; }
main.hpp .part .pimg img { width:100%; aspect-ratio:4 / 5; object-fit:cover; }
main.hpp .part p { margin-top:12px; max-width:58ch; }
main.hpp .vid { background:var(--navy); color:#f4efe6; border:0; }
main.hpp .vid .eyebrow { color:var(--yellow); }
main.hpp .vid .lede { color:#d9d3c8; }
main.hpp .vwrap { display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(0, 1fr); gap:56px; align-items:start; margin-top:40px; }
main.hpp .t-tabs { position:relative; display:inline-flex; flex-wrap:nowrap; max-width:100%; overflow-x:auto; scrollbar-width:none; align-items:center; gap:3px; padding:3px; border-radius:48px; background:var(--navy-2); border:1px solid #26314a; }
main.hpp .t-tab { position:relative; appearance:none; border:0; background:transparent; height:38px; padding:4px 14px; color:#b9b3a8; cursor:pointer; border-radius:48px; z-index:1; white-space:nowrap; flex:0 0 auto; font:600 15px "Instrument Sans", system-ui, sans-serif; transition:color var(--tabs-dur) var(--tabs-ease); }
main.hpp .t-tab[aria-selected="true"], main.hpp .t-tab:not([aria-selected="true"]):hover { color:var(--navy); }
main.hpp .t-tab:not([aria-selected="true"]):hover { color:#fff; }
main.hpp .t-tabs-pill { position:absolute; top:3px; left:0; height:38px; width:0; background:var(--yellow); border-radius:48px; transform:translateX(0); transition:transform var(--tabs-dur) var(--tabs-ease), width var(--tabs-dur) var(--tabs-ease); z-index:0; pointer-events:none; }
main.hpp .vpane { margin-top:24px; }
main.hpp .vpane video { display:block; background:#000; max-height:72vh; max-width:100%; }
main.hpp .vmeta { font-size:14px; color:#b9b3a8; margin-top:10px; }
main.hpp .vpane details { margin-top:12px; font-size:16px; color:#d9d3c8; max-width:52ch; }
main.hpp .vpane summary { cursor:pointer; font-weight:600; color:#fff; }
main.hpp .vuse { list-style:none; padding:0; margin:0; }
main.hpp .vuse li { padding:16px 0; border-top:1px solid #26314a; }
main.hpp .vuse li b { display:block; color:#fff; }
main.hpp .tr-cta { background:var(--navy); color:#fff; border:0; }
main.hpp .tr-cta .lede { color:#d9d3c8; }
main.hpp .tr-cta .lede a { color:#fff; }
main.hpp .tr-cta .row { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
main.hpp .tr-cta .tr-img img { width:100%; aspect-ratio:4 / 5; object-fit:cover; }
main.hpp .cost .wrap { display:grid; grid-template-columns:minmax(0, 420px) minmax(0, 1fr); gap:clamp(32px, 6vw, 72px); align-items:center; }
main.hpp .cost .amount { font-size:clamp(56px, 8vw, 104px); font-weight:600; letter-spacing:-.04em; line-height:1; }
main.hpp .cost .amount small { display:block; font-size:16px; letter-spacing:0; font-weight:500; color:var(--muted); margin-top:10px; }
main.hpp .gtabs { margin-top:28px; }
main.hpp .gal { list-style:none; padding:0; margin:20px 0 0; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:6px; }
main.hpp .gthumb { all:unset; cursor:zoom-in; display:block; position:relative; aspect-ratio:3 / 4; overflow:hidden; background:var(--line); width:100%; }
main.hpp .gthumb img { width:100%; height:100%; object-fit:cover; }
main.hpp .gthumb span { position:absolute; left:0; bottom:0; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:4px 7px; background:var(--navy); color:#fff; }
main.hpp .gthumb:focus-visible { outline:3px solid var(--yellow); outline-offset:-3px; }
main.hpp .t-modal-backdrop { position:fixed; inset:0; background:rgba(8,13,26,.9); display:grid; place-items:center; z-index:50; opacity:0; pointer-events:none; transition:opacity var(--modal-open-dur) var(--modal-ease); }
main.hpp .t-modal-backdrop.is-open { opacity:1; pointer-events:auto; }
main.hpp .t-modal { transform-origin:center; transform:scale(var(--modal-scale)); opacity:0; transition:transform var(--modal-open-dur) var(--modal-ease), opacity var(--modal-open-dur) var(--modal-ease); max-width:min(92vw, 900px); }
main.hpp .t-modal-backdrop.is-open .t-modal { transform:scale(1); opacity:1; }
main.hpp .t-modal-backdrop.is-closing .t-modal { transform:scale(var(--modal-scale-close)); opacity:0; transition:transform var(--modal-close-dur) var(--modal-ease), opacity var(--modal-close-dur) var(--modal-ease); }
main.hpp .t-modal img { max-height:82vh; width:auto; margin:auto; }
main.hpp .t-modal p { color:#d9d3c8; font-size:15px; margin-top:10px; text-align:center; }
main.hpp .mbtn { position:fixed; top:18px; right:18px; background:var(--yellow); color:var(--navy); border:0; font:600 16px "Instrument Sans", sans-serif; padding:10px 16px; cursor:pointer; }
main.hpp .mnav { position:fixed; top:50%; transform:translateY(-50%); background:var(--navy-2); color:#fff; border:1px solid #26314a; font:600 22px sans-serif; width:48px; height:48px; cursor:pointer; }
main.hpp .mnav.prev { left:12px; }
main.hpp .mnav.next { right:12px; }
main.hpp .cta-band { position:relative; color:#fff; border:0; overflow:hidden; background:var(--navy); }
main.hpp .cta-band video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; }
main.hpp .cta-band .wrap { position:relative; }
main.hpp .cta-band h2 { max-width:18ch; }
main.hpp .cta-band p { color:#e7e1d6; }
main.hpp .cta-band .row { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
main.hpp .more { list-style:none; padding:0; margin:36px 0 0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
main.hpp .more a { text-decoration:none; display:block; }
main.hpp .more img { width:100%; aspect-ratio:4 / 3; object-fit:cover; }
main.hpp .more span { display:block; font-weight:600; font-size:19px; margin-top:12px; }
main.hpp .more a:hover span { text-decoration:underline; text-decoration-color:var(--yellow); }
main.hpp .check { background:#f3f5f8; border:0; }
main.hpp .check ol { margin:24px 0 0; padding-left:22px; max-width:70ch; }
main.hpp .check li { margin:10px 0; }
main.hpp footer { background:var(--navy); color:#b9b3a8; font-size:15px; padding:56px 0 40px; }
main.hpp footer .cols { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:32px; }
main.hpp footer h4 { color:#fff; margin:0 0 12px; font-size:15px; letter-spacing:.06em; text-transform:uppercase; }
main.hpp footer ul { list-style:none; padding:0; margin:0; }
main.hpp footer li { margin:6px 0; }
main.hpp footer a { text-decoration:none; }
main.hpp footer a:hover { color:#fff; }
main.hpp footer .legal { margin-top:40px; padding-top:20px; border-top:1px solid #26314a; font-size:13px; }
@media (max-width: 980px) {main.hpp .site nav { display:none; }
main.hpp .hero .wrap, main.hpp .vwrap, main.hpp .cost .wrap { grid-template-columns:minmax(0, 1fr); }
main.hpp .hero-video { max-width:400px; }
main.hpp .ba-grid { grid-template-columns:1fr; max-width:480px; }
main.hpp .part { grid-template-columns:1fr; }
main.hpp .part:nth-child(even) .pimg { order:0; }
main.hpp .part .pimg { max-width:480px; }
main.hpp .more { grid-template-columns:1fr; max-width:480px; }
main.hpp footer .cols { grid-template-columns:1fr 1fr; }
main.hpp .strip { grid-template-columns:repeat(2, minmax(0, 1fr)); }

}
@media (max-width: 480px) {main.hpp { font-size:17px; }
main.hpp .wrap { width:calc(100% - 32px); }
main.hpp .topbar .wrap { justify-content:flex-start; gap:6px 18px; font-size:13px; }
main.hpp .site .acts .btn.o { display:none; }
main.hpp .facts { grid-template-columns:1fr 1fr; gap:16px; }
main.hpp .facts dd.big { font-size:28px; }
main.hpp footer .cols { grid-template-columns:1fr; }
main.hpp .gal { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px; }

}
@media (prefers-reduced-motion: reduce) {main.hpp .t-tabs-pill, main.hpp .t-tab, main.hpp .t-modal, main.hpp .t-modal-backdrop { transition:none !important; }
main.hpp .cta-band video { display:none; }

}


main.hpp { display:block; } main.hpp section { margin:0; } main.hpp h1, main.hpp h2, main.hpp h3 { font-family:inherit; color:inherit; text-transform:none; }

main.hpp-hub .hub-card { display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:40px; align-items:center; text-decoration:none; color:inherit; }
main.hpp-hub .hub-card video { width:100%; aspect-ratio:16 / 9; object-fit:cover; background:#0b1220; display:block; }
main.hpp-hub .hub-meta { display:flex; flex-direction:column; gap:12px; }
main.hpp-hub .hub-title { font-size:clamp(30px, 3.4vw, 44px); font-weight:600; letter-spacing:-.025em; line-height:1.08; }
main.hpp-hub .hub-go { font-weight:600; text-decoration:underline; text-decoration-color:#f5c84c; text-decoration-thickness:2px; text-underline-offset:4px; }
main.hpp-hub .hub-card:hover .hub-title { text-decoration:underline; text-decoration-color:#f5c84c; }
main.hpp-hub .cta-band { background:#0b1220; color:#fff; }
@media (max-width: 860px) { main.hpp-hub .hub-card { grid-template-columns:minmax(0, 1fr); gap:20px; } }