@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#071b25;--deep:#102b36;--paper:#eee9e2;--white:#fff;--muted:#536d76;--accent:#e1a477;--line:rgba(7,27,37,.16)}

.hero.hero-business{--hero:url('/assets/hobby-pand-100m.webp')}
.hero.hero-home{--hero:url('/assets/private-home-aerial.webp')}
.hero.hero-video{--hero:url('/assets/caravanstalling-a20-poster.webp')}
.case-link{margin-top:32px}

.hero h1{overflow-wrap:anywhere}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font:16px/1.6 Manrope,Arial,sans-serif}
a{color:inherit}
.top{position:absolute;z-index:2;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,6vw,86px);color:#fff}
.brand-logo{display:block;width:clamp(132px,14vw,180px);height:auto}
.back{font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.65);padding-bottom:5px}
.hero{--hero:url('/assets/hero-dordrecht.webp');min-height:76vh;display:grid;align-items:end;position:relative;isolation:isolate;padding:clamp(140px,18vw,220px) clamp(22px,8vw,130px) clamp(55px,8vw,96px);color:#fff;background:#0b2733}
.hero:before{content:"";position:absolute;z-index:-2;inset:0;background:var(--hero) center/cover}
.hero:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(2,16,22,.9),rgba(2,16,22,.38) 58%,rgba(2,16,22,.12))}
.hero-inner{max-width:900px}
.crumbs{font-size:12px;color:#dce7e8;margin-bottom:22px}
.crumbs a{text-underline-offset:4px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#ffd9bd}
.section:not(.deep) .eyebrow,.cta .eyebrow{color:#69442f}
.hero h1,.section h2,.cta h2{font-weight:750;line-height:.95;letter-spacing:-.045em}
.hero h1{max-width:980px;margin:14px 0 22px;font-size:clamp(46px,7vw,94px)}
.hero-lead{max-width:720px;margin:0;font-size:clamp(17px,2vw,22px);color:#eef4f4}
.facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:36px}
.facts span{border-left:1px solid rgba(255,255,255,.45);padding-left:12px;font-size:13px}
.facts b{display:block;color:#ffd9bd;font-size:10px;letter-spacing:1.3px;text-transform:uppercase}
.section{padding:clamp(76px,10vw,135px) clamp(22px,8vw,130px)}
.section.white{background:#fff}
.section.deep{background:var(--deep);color:#fff}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.8fr);gap:clamp(48px,9vw,130px);align-items:start}
.section h2,.cta h2{font-size:clamp(40px,5vw,70px);margin:10px 0 26px}
.section p{max-width:720px}
.muted{color:var(--muted)}
.deep .muted{color:#c1d0d4}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:22px;padding:12px 20px;background:var(--accent);color:#142630;border-radius:2px;font-weight:800;text-decoration:none}
.text-link{font-weight:800;text-underline-offset:5px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:42px}
.card{padding:28px;border:1px solid var(--line);background:rgba(255,255,255,.46)}
.deep .card{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.card h3{margin:10px 0 9px;font-size:20px}
.card p{margin:0;color:var(--muted)}
.deep .card p{color:#c1d0d4}
.num{font-size:11px;letter-spacing:1.4px;color:#a66e48;font-weight:800}
.deep .num{color:#ffd9bd}
.media-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-top:46px}
.media-grid img,.visual img{display:block;width:100%;height:100%;min-height:260px;object-fit:cover}
.media-grid img:first-child{min-height:460px}
.checklist{list-style:none;padding:0;margin:25px 0 0}
.checklist li{position:relative;padding:12px 0 12px 28px;border-bottom:1px solid var(--line)}
.checklist li:before{content:"✓";position:absolute;left:0;color:#a66e48;font-weight:900}
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:42px;background:rgba(255,255,255,.16)}
.step{counter-increment:step;padding:27px;background:var(--deep)}
.step:before{content:"0" counter(step);display:block;color:#ffd9bd;font-size:11px;letter-spacing:1.3px;margin-bottom:18px}
.step h3{margin:0 0 8px;font-size:18px}
.step p{margin:0;color:#c1d0d4;font-size:14px}
.faq{max-width:900px}
.faq details{border-top:1px solid var(--line);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:800;font-size:18px}
.faq details p{margin:12px 0 0;color:var(--muted)}
.cta{padding:clamp(76px,10vw,130px) clamp(22px,8vw,130px);background:#d9c1af}
.cta-inner{max-width:850px}
.service-nav{display:flex;gap:12px 24px;flex-wrap:wrap;margin-top:35px;font-size:13px;font-weight:700}
.footer{display:flex;justify-content:space-between;gap:25px;padding:28px clamp(22px,8vw,130px);background:#071b25;color:#dfe9e9;font-size:12px}
.footer a{text-underline-offset:4px}
.floating-home{position:fixed;z-index:3;right:18px;bottom:18px;padding:11px 15px;background:#fff;color:var(--ink);box-shadow:0 8px 28px rgba(0,0,0,.18);font-size:12px;font-weight:800;text-decoration:none}
.price{font-size:13px;color:var(--muted);margin-top:18px}
.price strong{color:var(--ink);font-size:22px}
@media(max-width:800px){.top{padding:18px 20px}
.back{font-size:10px}
.hero{min-height:72vh;padding-top:130px}
.split,.cards,.media-grid,.steps{grid-template-columns:1fr}
.cards{gap:10px}
.media-grid img,.media-grid img:first-child{min-height:260px;aspect-ratio:4/3}
.section,.cta{padding-left:22px;padding-right:22px}
.footer{display:block;padding-left:22px;padding-right:22px}
.footer span{display:block;margin-bottom:8px}
.floating-home{bottom:12px}
.hero h1{font-size:clamp(43px,14vw,68px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}
.portrait-feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:clamp(42px,8vw,110px);align-items:center}
.portrait-visual{margin:0}
.portrait-visual img{height:auto;min-height:0;aspect-ratio:3/2;object-fit:cover}
.portrait-visual figcaption{margin-top:12px;color:var(--muted);font-size:12px}
.portrait-copy h2{max-width:700px}
.portrait-copy p{max-width:620px}
@media(max-width:800px){.portrait-feature{grid-template-columns:1fr}
.portrait-copy{order:-1}
.portrait-visual img{aspect-ratio:3/2}
}