*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;color:#0b315b;line-height:1.6}a{text-decoration:none;color:inherit}.navwrap{max-width:1240px;margin:auto;height:82px;padding:0 20px;display:flex;align-items:center;gap:30px}.logo{display:flex;align-items:center;gap:10px;min-width:280px;color:#0b315b}.logo b{font-size:25px}.logo b span,footer b span{color:#2faef0}.logo small{display:block;font-size:11px;color:#4e789b}.compass{width:44px;height:44px;border:2px solid #2faef0;border-radius:50%;display:grid;place-items:center;color:#2faef0;font-size:23px}nav{display:flex;gap:25px;flex:1;justify-content:center;font-size:14px}nav a{padding:29px 0;border-bottom:2px solid transparent}nav a:hover,nav a.active{color:#169fe8;border-color:#2faef0}.menu{display:none;border:0;background:none;font-size:23px}.hero{display:grid;grid-template-columns:1fr 1fr;background:#effaff;overflow:hidden}.heroText{padding:85px max(30px,calc((100vw - 1240px)/2)) 85px  max(20px,calc((100vw - 1240px)/2));align-self:center}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:800;color:#2faef0}.hero h1{font-size:54px;line-height:1.08;margin:10px 0 20px}.hero h1 em{display:block;color:#2faef0;font-style:normal}.heroText>p:not(.eyebrow){color:#537896;max-width:600px;font-size:17px}.checks{display:flex;gap:20px;flex-wrap:wrap;color:#3575a4;margin:25px 0}.btn{display:inline-block;padding:14px 25px;background:#2faef0;color:white;border-radius:999px;font-weight:700;border:0}.btn:hover{background:#129de7}.heroImg{min-height:560px;height:560px;overflow:hidden}.heroImg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}.benefits{background:#f1faff;display:grid;grid-template-columns:repeat(4,1fr);gap:25px;padding:28px max(20px,calc((100vw - 1200px)/2))}.benefits div{display:flex;flex-direction:column}.benefits small{color:#6283a0}.section{max-width:1240px;margin:auto;padding:75px 20px}.section h2{font-size:34px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{border:1px solid #d9edf9;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 8px 25px #0b4d7310}.card>div{height:155px;display:grid;place-items:center;background:linear-gradient(135deg,#dff5ff,#f1fbff);color:#159fe9;font-weight:800}.card h3,.card p,.card a{margin-left:20px;margin-right:20px}.card h3{margin-bottom:5px}.card p{color:#66849e}.card a{display:block;margin-bottom:20px;color:#159fe9;font-weight:700}.cta{background:#2faef0;color:white;padding:55px max(20px,calc((100vw - 1200px)/2));display:flex;justify-content:space-between;gap:30px;align-items:center}.cta h2{font-size:34px;margin:5px 0}.white{background:white;color:#159fe9}.pagehero{background:linear-gradient(135deg,#effaff,#fff);padding:75px max(20px,calc((100vw - 1200px)/2))}.pagehero h1{font-size:50px;line-height:1.1;margin:0 0 15px}.pagehero p:not(.eyebrow){max-width:750px;color:#587a98;font-size:18px}.two,.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:60px}.box{background:#f1faff;border:1px solid #d9edf9;border-radius:20px;padding:30px}.contact form{display:grid;gap:15px}.contact label{font-weight:700}.contact input,.contact textarea{display:block;width:100%;margin-top:6px;border:1px solid #cfe7f5;border-radius:10px;padding:12px;font:inherit}.contact textarea{resize:vertical}footer{background:#062b51;color:#cce1f0;padding:45px 20px;text-align:center}footer b{font-size:22px;color:white}footer small{color:#94b4cc}footer a{display:block;margin:5px}@media(max-width:850px){nav{display:none}.menu{display:block;margin-left:auto}.navwrap{height:70px}.logo{min-width:0}.logo small{display:none}.hero{grid-template-columns:1fr}.heroText{padding:55px 20px}.hero h1{font-size:40px}.heroImg{min-height:300px;height:300px}.benefits{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr 1fr}.two,.contact{grid-template-columns:1fr}.cta{display:block}.cta .btn{margin-top:20px}}@media(max-width:520px){.benefits,.grid{grid-template-columns:1fr}.hero h1{font-size:34px}.pagehero h1{font-size:38px}.checks{display:grid;gap:8px}}
.quote-nav{background:#2faef0!important;color:#fff!important;border-radius:999px;padding:9px 16px!important;border:0!important;white-space:nowrap}.quote-nav:hover,.quote-nav.active{background:#159fe9!important;color:#fff!important;border:0!important}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}.btn.outline{background:transparent;color:#159fe9;border:2px solid #2faef0;box-shadow:none}.btn.outline:hover{background:#e9f8ff}
.quote-strip{max-width:1240px;margin:0 auto 30px;padding:35px 20px;background:#effaff;border:1px solid #d9edf9;border-radius:20px;display:flex;justify-content:space-between;align-items:center;gap:30px}.quote-strip h2{margin:4px 0;font-size:30px}.quote-strip p{color:#5c7c98}
.quote-page{padding-top:55px}.quote-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:35px;align-items:start}.quote-info h2{font-size:32px;line-height:1.2}.quote-step{display:flex;gap:15px;margin:28px 0}.quote-step>strong{width:40px;height:40px;border-radius:50%;background:#dff5ff;color:#159fe9;display:grid;place-items:center;flex:none}.quote-step b{display:block}.quote-step p{margin:3px 0;color:#66849e}.quote-form{border:1px solid #d9edf9;border-radius:20px;padding:32px;background:#fff;box-shadow:0 12px 35px #0b4d7310;display:grid;gap:18px}.quote-form h2{margin:0 0 5px;font-size:30px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.quote-form label{font-weight:700}.quote-form input:not([type=checkbox]),.quote-form select,.quote-form textarea{display:block;width:100%;margin-top:7px;border:1px solid #cfe7f5;border-radius:10px;padding:12px 13px;font:inherit;color:#0b315b;background:#fff}.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{outline:none;border-color:#2faef0;box-shadow:0 0 0 3px #2faef018}.check{display:flex;align-items:flex-start;gap:8px;font-weight:500!important;color:#557693;font-size:13px}.check input{margin-top:4px}.form-note{color:#159fe9;font-weight:700}
@media(max-width:850px){.quote-nav{display:block!important;text-align:center}.quote-strip{margin:0 14px 25px;display:block}.quote-strip .btn{margin-top:15px}.quote-layout{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}

.portfolio-hero{padding-bottom:65px}.portfolio-intro{display:grid;grid-template-columns:1fr .7fr;gap:50px;align-items:end;margin-bottom:35px}.portfolio-intro h2{font-size:36px;line-height:1.2;margin:5px 0}.portfolio-intro>p{color:#64829c;margin:0}.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:25px}.project-card{border:1px solid #d9edf9;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 10px 30px #0b4d7310;transition:transform .25s,box-shadow .25s}.project-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px #0b4d7318}.project-image{height:320px;overflow:hidden;background:#eaf7fd}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.project-card:hover .project-image img{transform:scale(1.04)}.project-one .project-image img{object-position:center}.project-two .project-image img{object-position:72% center;filter:saturate(.9) brightness(1.02)}.project-three .project-image img{object-position:28% center;filter:saturate(.85)}.project-four .project-image img{object-position:center 62%;filter:brightness(1.05) saturate(.8)}.project-five .project-image img{object-position:60% 35%;filter:saturate(.82) contrast(.96)}.project-six .project-image img{object-position:40% 65%;filter:brightness(1.03)}.project-content{padding:24px}.project-content span{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#2faef0;font-weight:800}.project-content h3{font-size:25px;margin:7px 0}.project-content p{color:#66849e;margin:0}.portfolio-quote{background:#2faef0;color:#fff;padding:60px max(20px,calc((100vw - 1200px)/2));display:flex;justify-content:space-between;align-items:center;gap:35px}.portfolio-quote h2{font-size:36px;line-height:1.2;margin:5px 0 8px}.portfolio-quote p{max-width:650px}.portfolio-quote .eyebrow{color:#dff5ff}@media(max-width:850px){.portfolio-intro,.portfolio-grid{grid-template-columns:1fr}.project-image{height:280px}.portfolio-quote{display:block}.portfolio-quote .btn{margin-top:18px}}

.project-seven .project-image img{object-position:22% 38%;filter:saturate(.78) brightness(1.08)}
.project-eight .project-image img{object-position:82% 48%;filter:brightness(.88) contrast(1.06) saturate(.85)}
.project-nine .project-image img{object-position:48% 12%;filter:saturate(.9) brightness(1.02)}
.project-ten .project-image img{object-position:68% 72%;filter:contrast(1.04) saturate(.75)}
.project-eleven .project-image img{object-position:15% 70%;filter:brightness(1.06) saturate(.88)}
.project-twelve .project-image img{object-position:55% 55%;filter:saturate(.82) brightness(1.04)}

@media(max-width:850px){nav.open{display:flex;position:absolute;left:14px;right:14px;top:70px;background:#fff;border:1px solid #d9edf9;border-radius:16px;padding:10px;box-shadow:0 15px 35px #0b4d7318;z-index:20;flex-direction:column;gap:4px}nav.open a{padding:11px 14px;border:0}}

/* Exact preview-style homepage */
:root{--blue:#159fe9;--navy:#0b315b;--muted:#557693;--pale:#effaff}
.site-header{background:#fff;box-shadow:0 1px 0 rgba(11,49,91,.05);position:relative;z-index:30}
.navwrap{max-width:1390px;height:72px;padding:0 28px;gap:28px}
.logo{min-width:340px;gap:12px}.logo-copy small{font-size:10px;letter-spacing:1.3px;color:#7692a8}.logo b{font-size:24px}.compass{width:44px;height:44px}
nav{gap:27px;font-size:13px}nav a{padding:25px 0}.quote-nav{padding:11px 19px!important}
.hero-preview{display:grid;grid-template-columns:47% 53%;min-height:655px;overflow:hidden;background:#fff}
.hero-copy{position:relative;padding:82px 70px 50px max(45px,calc((100vw - 1390px)/2));display:flex;flex-direction:column;justify-content:center;background:linear-gradient(100deg,#fff 0%,#fff 82%,rgba(255,255,255,.86) 100%);z-index:2}
.hero-swoosh{position:absolute;left:78px;top:125px;width:165px;height:26px;border-top:7px solid #7bdcff;border-radius:50%;transform:rotate(4deg);opacity:.9}
.hero-copy .eyebrow{margin:0 0 15px}.constant-title{font-size:54px;line-height:1.08;letter-spacing:-1.7px;margin:0 0 22px;color:var(--navy);animation:heroFloat 3.4s ease-in-out infinite}.constant-title span{display:block;color:var(--navy)}
.hero-lead{max-width:620px;color:#5d7890;font-size:16px;line-height:1.65;margin:0 0 24px}.hero-buttons{display:flex;gap:14px;flex-wrap:wrap}.btn{padding:14px 23px;background:var(--blue);border-radius:999px;box-shadow:0 9px 22px rgba(21,159,233,.18)}.btn.outline{background:#fff;color:var(--navy);border:1px solid #67bff0}.btn.outline:hover{background:#effaff}
.hero-points{display:flex;gap:0;margin-top:54px}.hero-points>span{min-width:145px;padding-right:22px;margin-right:22px;border-right:1px solid #b9d5e6;color:var(--blue);font-size:23px;display:grid;grid-template-columns:28px 1fr}.hero-points>span:last-child{border:0}.hero-points b,.hero-points small{font-size:12px;line-height:1.25;color:var(--navy)}.hero-points small{color:#6e879b}.hero-points b{font-weight:700}.hero-photo{min-height:655px;overflow:hidden;background:#e8f6fc}.hero-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;animation:heroZoom 8s ease-out both}
.benefits-preview{display:grid;grid-template-columns:repeat(4,1fr);max-width:100%;background:#f1faff;padding:24px max(28px,calc((100vw - 1280px)/2));gap:0}.benefit{display:flex;align-items:center;gap:15px;justify-content:center;border-right:1px solid #c9e2f0;min-height:55px}.benefit:last-child{border-right:0}.benefit-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--blue);border:2px solid #d6effc;font-size:20px;box-shadow:0 4px 14px rgba(21,159,233,.08)}.benefit b,.benefit small{display:block}.benefit b{font-size:13px;color:var(--navy)}.benefit small{font-size:11px;color:#7190a6;margin-top:2px}
.category-section{max-width:1470px;margin:auto;padding:38px 30px 55px}.category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.category-card{position:relative;min-width:0;border:1px solid #d8edf8;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(11,77,115,.08);transition:transform .25s ease,box-shadow .25s ease}.category-card:hover{transform:translateY(-6px);box-shadow:0 17px 35px rgba(11,77,115,.15)}.cat-image{height:165px;background-image:var(--card-bg);background-size:cover;background-position:center;position:relative}.cat-image:after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(180deg,transparent,rgba(255,255,255,.96))}.cat-body{padding:0 15px 16px;margin-top:-20px;position:relative;z-index:2;background:linear-gradient(#fff 0%,#fff 100%)}.cat-label{font-size:9px;letter-spacing:1.1px;color:#2faef0;font-weight:800}.cat-body h3{font-size:20px;line-height:1.15;margin:7px 0 7px;color:var(--navy)}.cat-body p{font-size:12px;line-height:1.45;color:#63819b;min-height:52px;margin:0 0 13px}.cat-body a{font-size:11px;font-weight:800;color:var(--blue)}
.home-copy{padding-top:50px;padding-bottom:60px;max-width:900px}.home-copy h2{font-size:34px;margin:4px 0 12px}.home-copy>p:last-child{color:#63819b;max-width:750px}
.cta{margin-top:0}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes heroZoom{0%{transform:scale(1.04)}100%{transform:scale(1)}}
@media(max-width:1150px){.navwrap{padding:0 18px}.logo{min-width:275px}.category-grid{grid-template-columns:repeat(3,1fr)}.hero-copy{padding-left:35px;padding-right:35px}.hero-points{margin-top:32px}}
@media(max-width:850px){.hero-preview{grid-template-columns:1fr}.hero-copy{padding:55px 24px 45px}.hero-photo{min-height:390px;height:390px}.hero-swoosh{left:30px;top:86px}.constant-title{font-size:43px}.benefits-preview{grid-template-columns:1fr 1fr;padding:18px}.benefit{justify-content:flex-start;padding:8px 10px;border-bottom:1px solid #c9e2f0}.benefit:nth-child(2){border-right:0}.benefit:nth-child(3),.benefit:nth-child(4){border-bottom:0}.category-grid{grid-template-columns:1fr 1fr}.category-section{padding-left:16px;padding-right:16px}}
@media(max-width:520px){.navwrap{height:68px}.logo b{font-size:20px}.logo{min-width:0}.logo-copy small{display:none}.hero-copy{padding:45px 20px 38px}.constant-title{font-size:35px;letter-spacing:-.8px}.hero-swoosh{display:none}.hero-lead{font-size:15px}.hero-points{display:none}.hero-photo{min-height:310px;height:310px}.benefits-preview{grid-template-columns:1fr;padding:12px 18px}.benefit{border-right:0!important;border-bottom:1px solid #c9e2f0!important}.benefit:last-child{border-bottom:0!important}.category-grid{grid-template-columns:1fr}.cat-image{height:210px}}
@media(prefers-reduced-motion:reduce){.constant-title,.hero-photo img{animation:none}}

/* Homepage match to supplied reference */
.hero-preview{position:relative;display:block;min-height:455px;height:455px;background:#102b43;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(4,20,36,.93) 0%,rgba(4,20,36,.84) 27%,rgba(4,20,36,.43) 43%,rgba(4,20,36,.08) 58%,rgba(4,20,36,0) 76%),url('assets/hero-exact-bathroom.jpg');background-size:cover;background-position:center 52%;transform:scale(1.01);animation:heroZoom 10s ease-out both}
.hero-copy{position:relative;z-index:2;width:min(690px,54vw);height:100%;padding:58px 30px 35px max(45px,calc((100vw - 1390px)/2));justify-content:flex-start;background:transparent;color:#fff}
.hero-copy .eyebrow{display:inline-flex;width:max-content;border:1px solid rgba(255,255,255,.65);border-radius:999px;padding:6px 15px;margin:0 0 16px;color:#fff;letter-spacing:.3px;font-size:12px;font-weight:500}
.hero-swoosh{left:78px;top:158px;width:170px;border-top-color:#43bdf4;opacity:.9}
.constant-title{color:#fff;font-size:52px;line-height:1.05;letter-spacing:-1.7px;margin:0 0 22px;text-shadow:0 3px 18px rgba(0,0,0,.24)}
.constant-title span{color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.24)}
.constant-title span i{color:#39b9f4;font-style:normal}
.hero-lead{max-width:610px;color:rgba(255,255,255,.92);font-size:15px;line-height:1.72;margin:0 0 23px;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.hero-buttons{gap:14px}.hero-buttons .btn{box-shadow:0 8px 24px rgba(0,0,0,.16)}.hero-buttons .btn.outline{background:rgba(255,255,255,.02);color:#fff;border-color:rgba(255,255,255,.75)}.hero-buttons .btn.outline:hover{background:rgba(255,255,255,.12)}
.hero-points{margin-top:28px}.hero-points>span{border-color:rgba(255,255,255,.35);color:#fff}.hero-points b,.hero-points small{color:#fff}.hero-points small{color:rgba(255,255,255,.72)}
.hero-photo{display:none}
.benefits-preview{position:relative;z-index:3;padding:21px max(28px,calc((100vw - 1280px)/2));background:#eef9ff}
.category-section{padding-top:28px;padding-bottom:45px}
@media(max-width:1150px){.hero-copy{padding-left:35px;width:64vw}.constant-title{font-size:46px}}
@media(max-width:850px){.hero-preview{height:auto;min-height:0}.hero-bg{position:absolute;min-height:430px;background-position:center center}.hero-copy{width:100%;height:auto;min-height:430px;padding:48px 24px 35px}.constant-title{font-size:42px}.hero-points{margin-top:24px}.benefits-preview{padding:18px}.category-section{padding-top:22px}}
@media(max-width:520px){.hero-bg{min-height:520px;background-position:61% center}.hero-copy{min-height:520px;padding:40px 20px 30px}.constant-title{font-size:35px}.hero-lead{font-size:14px}.hero-points{display:none}.hero-buttons .btn{width:100%;text-align:center}.benefits-preview{padding:12px 18px}}


/* ===== Unified SanitairKompas visual system: preview style across every page ===== */
:root{
  --sk-blue:#159fe9;
  --sk-blue-2:#39b9f4;
  --sk-navy:#0b315b;
  --sk-text:#355f80;
  --sk-muted:#6b879d;
  --sk-pale:#eef9ff;
  --sk-line:#d6ebf7;
  --sk-dark:#071f35;
}
html{scroll-behavior:smooth}
body{background:#fff;color:var(--sk-navy)}
header{background:#fff;box-shadow:0 1px 0 rgba(11,49,91,.06);position:relative;z-index:30}
.navwrap{max-width:1390px;height:72px;padding:0 28px}
.logo{min-width:340px}
nav a{transition:color .2s ease,border-color .2s ease}
.quote-nav{background:var(--sk-blue)!important;box-shadow:0 7px 18px rgba(21,159,233,.18)!important}

/* Dark photographic page heroes, matching the supplied homepage reference */
.pagehero{position:relative;min-height:400px;padding:0 max(28px,calc((100vw - 1390px)/2));display:flex;align-items:center;overflow:hidden;background:#09263e;color:#fff}
.pagehero:before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.015);animation:pageHeroZoom 9s ease-out both}
.pagehero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,20,36,.93) 0%,rgba(4,20,36,.82) 30%,rgba(4,20,36,.42) 56%,rgba(4,20,36,.10) 80%,rgba(4,20,36,0) 100%)}
.pagehero>div{position:relative;z-index:2;max-width:760px;padding:72px 0}
.pagehero h1{font-size:52px;line-height:1.05;letter-spacing:-1.5px;margin:10px 0 18px;color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.22)}
.pagehero p:not(.eyebrow){font-size:16px;line-height:1.75;max-width:700px;color:rgba(255,255,255,.91);margin:0}
.pagehero .eyebrow{display:inline-flex;border:1px solid rgba(255,255,255,.58);border-radius:999px;padding:6px 15px;color:#fff;letter-spacing:.7px;font-size:11px;font-weight:700;margin:0}
.pagehero-badkamers:before{background-image:url('assets/portfolio-09.jpg')}
.pagehero-sanitair:before{background-image:url('assets/card-kranen.jpg')}
.pagehero-inspiratie:before{background-image:url('assets/portfolio-05.jpg')}
.pagehero-over-ons:before{background-image:url('assets/portfolio-01.jpg')}
.pagehero-contact:before{background-image:url('assets/portfolio-03.jpg')}
.pagehero-offerte:before{background-image:url('assets/portfolio-12.jpg')}
.pagehero-portfolio:before{background-image:url('assets/hero-exact-bathroom.jpg')}

/* Light-blue content bands and panels */
.section{max-width:1390px;padding:65px 30px}
.section>h2,.section>div>h2{font-size:34px;line-height:1.15;letter-spacing:-.5px}
.section>p:not(.eyebrow),.section>div>p:not(.eyebrow){color:var(--sk-text)}
.quote-strip{max-width:1240px;margin:28px auto 0;padding:28px 30px;background:var(--sk-pale);border:1px solid var(--sk-line);border-radius:18px;box-shadow:0 8px 24px rgba(11,77,115,.05)}
.box{background:var(--sk-pale);border-color:var(--sk-line);box-shadow:0 8px 24px rgba(11,77,115,.05)}
.cta{background:linear-gradient(120deg,#129de7,#39b9f4);position:relative;overflow:hidden}
.cta:after{content:"";position:absolute;width:380px;height:180px;right:-100px;bottom:-90px;border-radius:50%;border:35px solid rgba(255,255,255,.12)}
.cta>*{position:relative;z-index:1}

/* Every regular content card gets the same photographic treatment */
.section .grid{gap:18px}
.section .card{border:1px solid var(--sk-line);border-radius:16px;background:#fff;box-shadow:0 8px 25px rgba(11,77,115,.08);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.section .card:hover{transform:translateY(-5px);box-shadow:0 17px 35px rgba(11,77,115,.14)}
.section .card>div{height:150px;position:relative;display:flex;align-items:flex-end;justify-content:flex-start;padding:14px 16px;color:#fff;font-size:10px;letter-spacing:1.2px;text-shadow:0 2px 9px rgba(0,0,0,.55);background-size:cover;background-position:center;overflow:hidden}
.section .card>div:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,20,36,.02) 20%,rgba(4,20,36,.62) 100%)}
.section .card>div{isolation:isolate}
.section .card>div::before{content:"";position:absolute;inset:0;background:inherit;z-index:-1}
.section .card>div{z-index:0}
.section .card>div{font-weight:800}
.section .card>div{color:#fff}
.section .card>div{background-image:var(--card-bg)}
.section .card h3,.section .card p,.section .card a{position:relative;z-index:1}
.section .card h3{font-size:22px;margin-top:18px}
.section .card p{font-size:14px;line-height:1.55}
.section .card a{font-size:12px}
/* Rotate through the real project/category photos */
.section .grid .card:nth-child(1)>div{--card-bg:url('assets/card-badkamers.jpg')}
.section .grid .card:nth-child(2)>div{--card-bg:url('assets/card-kranen.jpg')}
.section .grid .card:nth-child(3)>div{--card-bg:url('assets/card-douches.jpg')}
.section .grid .card:nth-child(4)>div{--card-bg:url('assets/card-toiletten.jpg')}
.section .grid .card:nth-child(5)>div{--card-bg:url('assets/card-meubels.jpg')}
.section .grid .card:nth-child(6)>div{--card-bg:url('assets/card-accessoires.jpg')}
.section .grid .card:nth-child(7)>div{--card-bg:url('assets/portfolio-07.jpg')}
.section .grid .card:nth-child(8)>div{--card-bg:url('assets/portfolio-08.jpg')}

/* Quote/offerte forms in the same clean premium language */
.quote-form{border:1px solid var(--sk-line);box-shadow:0 14px 40px rgba(11,77,115,.09);border-radius:20px}
.quote-form h2,.quote-info h2{color:var(--sk-navy)}
.quote-step>strong{background:#e1f5ff}
.contact form{background:#fff;border:1px solid var(--sk-line);border-radius:20px;padding:30px;box-shadow:0 14px 40px rgba(11,77,115,.08)}
.contact form h2{margin-top:0;font-size:30px}
.contact input,.contact textarea{border-color:#cfe6f3}

/* Portfolio becomes a more editorial/photo-led gallery */
.portfolio-intro{margin-top:10px}
.portfolio-grid{gap:20px}
.project-card{border-color:var(--sk-line);box-shadow:0 10px 30px rgba(11,77,115,.08)}
.project-content{padding:24px}
.portfolio-quote{background:linear-gradient(120deg,#129de7,#39b9f4)}

/* Consistent footer */
footer{background:#061f37;padding:52px 28px 30px;text-align:left}
.foot{max-width:1240px;margin:0 auto 28px;display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:50px}
.foot>div{display:flex;flex-direction:column;gap:4px}
.foot>div:first-child p{color:#9bb9cc;margin-top:5px}
.foot b{font-size:20px;margin-bottom:7px}
.foot a{color:#a9c3d4;margin:0;transition:color .2s}
.foot a:hover{color:#fff}
footer>small{display:block;max-width:1240px;margin:0 auto;color:#7898ae;border-top:1px solid rgba(255,255,255,.08);padding-top:20px}

/* Scroll-in motion */
.pagehero>div,.quote-strip,.section,.portfolio-quote,.cta{animation:sectionIn .7s ease both}
@keyframes sectionIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pageHeroZoom{from{transform:scale(1.07)}to{transform:scale(1.015)}}
@media(prefers-reduced-motion:reduce){.pagehero:before,.pagehero>div,.quote-strip,.section,.portfolio-quote,.cta{animation:none}.section .card{transition:none}}

@media(max-width:850px){
 .navwrap{height:68px;padding:0 18px}.logo{min-width:0}
 .pagehero{min-height:420px}.pagehero>div{padding:55px 0}.pagehero h1{font-size:42px}
 .section{padding:52px 20px}.quote-strip{margin-left:14px;margin-right:14px}
 .foot{grid-template-columns:1fr 1fr;gap:30px}.foot>div:first-child{grid-column:1/-1}
}
@media(max-width:520px){
 .pagehero{min-height:500px}.pagehero:after{background:linear-gradient(90deg,rgba(4,20,36,.9),rgba(4,20,36,.56))}.pagehero h1{font-size:36px}.pagehero p:not(.eyebrow){font-size:15px}
 .section .card>div{height:190px}.section{padding:45px 16px}.foot{grid-template-columns:1fr}.foot>div:first-child{grid-column:auto}
}