
:root{
  --navy:#0b315f; --navy-deep:#08284d; --orange:#ffb84b; --cream:#fffaf3;
  --mint:#cfe7e3; --mint-soft:#eef6f4; --text:#173b68; --muted:#54708f;
  --line:#e8edef; --white:#fff; --max:980px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);font-family:Arial,"Segoe UI",sans-serif;line-height:1.7}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:min(var(--max),calc(100% - 72px));margin:0 auto}
.top{background:var(--cream);border-bottom:1px solid #eee9e1}
.nav{min-height:92px;display:flex;align-items:center;gap:22px;justify-content:space-between}
.logo{width:128px;flex:0 0 128px}.logo img{width:100%;height:auto}
.navmenu{display:flex;align-items:center;justify-content:center;gap:26px;font-size:13px;font-weight:700;flex:1}
.navmenu a{padding:11px 13px;border-radius:999px;white-space:nowrap}
.navmenu a.active{background:#f9e3c7}
.nav-actions{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border-radius:999px;padding:13px 19px;font-size:13px;font-weight:800;border:1px solid var(--navy);background:#fff}
.btn.orange{background:var(--orange);border-color:var(--orange);color:var(--navy)}
.btn.white{background:#fff;color:var(--navy)}
.hero{padding:52px 0 48px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:50px;align-items:center}
.hero-copy{padding-left:18px}
.eyebrow{font-size:13px;letter-spacing:.2em;font-weight:800;color:#f0a42f;text-transform:uppercase;margin-bottom:20px}
h1,h2,h3{color:var(--navy);margin:0 0 18px;line-height:1.08;letter-spacing:-.03em}
h1{font-size:54px;font-weight:800}.hero p,.page-text{font-size:17px;max-width:620px}
h2{font-size:34px}h3{font-size:20px}
.dot{color:var(--orange)}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:25px}
.hero-media{position:relative;min-height:360px;isolation:isolate}
.hero-media .shape-bg{position:absolute;z-index:0;inset:0;background:#fbf4ea;border-radius:48% 52% 43% 57% / 38% 41% 59% 62%}
.home-vase{position:absolute;z-index:2;right:-12px;bottom:0;width:90%;max-width:510px;border-radius:0 42% 42% 44%/0 31% 50% 48%}
.visual-blob{position:relative;z-index:2;width:100%;height:380px;overflow:hidden;border-radius:45% 55% 42% 58% / 38% 38% 62% 62%}
.visual-blob img{width:100%;height:100%;object-fit:cover}
.page-section{padding:44px 0}.soft-section{background:#fbfcfb}
.divider-title{text-align:center;margin-bottom:28px}.divider{width:44px;height:3px;background:var(--orange);margin:9px auto}
.home-help{display:grid;grid-template-columns:1fr 1.45fr;gap:44px;align-items:start}
.service-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:28px}
.service-card{padding:10px 30px;border-right:1px solid var(--line)}.service-card:last-child{border:0}
.circle{width:58px;height:58px;background:#fce9c8;border-radius:50%;display:grid;place-items:center;color:var(--navy);font-size:23px;font-weight:700;margin-bottom:12px}
.service-head{display:flex;align-items:center;gap:14px}.service-head .circle{margin:0;flex:0 0 58px}
.service-card p{font-size:13px;color:var(--muted)}
.softbox,.notice{background:#fbfaf6;border-radius:27px;padding:28px 32px;border:1px solid #f0ece5}
.softbox ul,.checks{list-style:none;margin:0;padding:0}.checks li{position:relative;padding-left:22px;margin:9px 0;font-size:13px}.checks li:before{content:"✓";position:absolute;left:0;color:#f4a62f;font-weight:900}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.review{padding:20px 18px;border:1px solid var(--line);border-radius:20px;background:#fff;min-height:170px}.review p{font-size:13px}.stars{color:#f6a52e;letter-spacing:2px;font-size:15px}
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.about-photo{width:100%;height:340px;object-fit:cover;border-radius:44% 56% 42% 58% / 38% 40% 60% 62%}
.cta{background:var(--navy);color:#fff;border-radius:28px;padding:24px 30px;display:flex;justify-content:space-between;align-items:center;gap:22px}
.cta h2,.cta p{color:#fff;margin-bottom:7px}.cta p{font-size:13px}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.footer{background:linear-gradient(135deg,#1a2d45,#08284d);color:#fff;margin-top:35px;border-top:0}
.footer.dark{background:linear-gradient(135deg,#1a2d45,#08284d);color:#fff;border-top:0}
.footer .footer-title,.footer a,.footer p{color:#fff}
.footer-main{padding:34px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.15fr .9fr 1fr .95fr .7fr;gap:30px;align-items:start}
.footer-logo img{width:145px}.footer-logo img{filter:brightness(0) invert(1)}
.footer p,.footer a{font-size:12px;color:#fff}.footer h3{font-size:15px;margin-bottom:11px}.footer ul{list-style:none;margin:0;padding:0}.footer li{margin:5px 0}
.footer-follow{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.footer-follow h3{margin-bottom:0}.footer-follow .socials{margin-top:0}
.socials{display:flex;gap:10px;margin-top:15px}.social{width:38px;height:38px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font-weight:800}
.footer-bottom{background:var(--navy);color:#fff;font-size:10px;padding:9px 0}.footer.dark .footer-bottom{background:rgba(0,0,0,.18)}
.footer-bottom .container{display:flex;justify-content:space-between;gap:10px}
.breadcrumb{padding:20px 0 12px;font-size:12px;color:#59708e}.breadcrumb span{color:var(--navy)}
.page-hero{padding:16px 0 44px}.page-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
.inner-hero-visual{height:375px;position:relative;z-index:1}
.inner-hero-visual img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;border-radius:45% 55% 48% 52% / 35% 43% 57% 65%}
.section-title{text-align:center;margin-bottom:25px}.section-title .divider{margin-bottom:0}
.three-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 8px 25px rgba(20,55,90,.04)}
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.process-item{text-align:center}.process-icon{width:58px;height:58px;border-radius:50%;background:#eff5f3;margin:0 auto 12px;display:grid;place-items:center;font-size:23px}.process-line{height:2px;background:#9ad5c9;margin:29px 0 -43px}
.steps{display:grid;gap:14px;max-width:850px;margin:0 auto}.step{display:grid;grid-template-columns:60px 78px 1fr;align-items:center;gap:22px;border:1px solid var(--line);border-radius:20px;padding:17px 22px}.step .num{width:44px;height:44px;border-radius:50%;background:#70b6ae;color:white;display:grid;place-items:center;font-weight:800}.step .icon{width:58px;height:58px;border-radius:50%;background:#eef4f2;display:grid;place-items:center;font-size:23px}
.four-values{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.value{text-align:center;padding:4px 20px;border-right:1px solid var(--line)}.value:last-child{border:0}.value .circle{margin:0 auto 12px}
.about-approach{background:#fffaf5;border-radius:25px;padding:30px 36px}.approach-grid{display:grid;grid-template-columns:1fr .8fr;gap:35px;align-items:center}
.samen-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.partner-card{border:1px solid var(--line);border-radius:24px;padding:24px;background:#fff}.partner-top{display:grid;grid-template-columns:180px 1fr;gap:22px}.partner-photo{width:180px;height:180px;object-fit:cover;border-radius:20px}.partner-card .mini{border-top:1px solid var(--line);margin-top:14px;padding-top:8px}.partner-card p{font-size:13px}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px}.form{background:#fff;border:1px solid var(--line);padding:26px;border-radius:24px}.field{margin-bottom:13px}.field label{display:block;font-size:12px;font-weight:800;margin-bottom:5px}.field input,.field textarea{width:100%;font:inherit;border:1px solid #dfe7ec;border-radius:12px;padding:12px}.field textarea{height:140px}
@media(max-width:920px){.navmenu{display:none}.hero-grid,.page-grid,.about-grid,.approach-grid,.contact-grid{grid-template-columns:1fr}.hero-copy{padding-left:0}.hero{padding-top:30px}.three-cards,.review-grid,.four-values,.service-row,.footer-grid,.samen-grid{grid-template-columns:1fr 1fr}.process{grid-template-columns:repeat(3,1fr)}.partner-top{grid-template-columns:140px 1fr}.partner-photo{width:140px;height:140px}}
@media(max-width:620px){.container{width:min(var(--max),calc(100% - 30px))}.nav{min-height:76px}.logo{width:120px;flex-basis:120px}.nav-actions .btn.white{display:none}.nav-actions .btn.orange{font-size:11px;padding:11px 13px}.hero{padding-bottom:25px}.hero-media{min-height:290px}.home-vase{width:100%}h1{font-size:40px}.hero p,.page-text{font-size:15px}.page-section{padding:35px 0}.three-cards,.review-grid,.four-values,.service-row,.footer-grid,.samen-grid,.process{grid-template-columns:1fr}.service-card{border-right:0;border-bottom:1px solid var(--line);padding:16px 0}.step{grid-template-columns:46px 58px 1fr;gap:10px;padding:14px}.step .num{width:40px;height:40px}.step .icon{width:52px;height:52px}.partner-top{grid-template-columns:1fr}.partner-photo{width:100%;height:210px}.cta{flex-direction:column;align-items:flex-start}.cta-actions{width:100%}.cta-actions .btn{width:100%}.footer-bottom .container{display:block}.footer.dark{padding-top:0}}

.hero-illustration{position:relative;z-index:3;width:100%;height:100%;object-fit:contain;display:block}


/* ===== SoVisie mobile menu ===== */
.mobile-menu-toggle{
  display:none;
  width:46px;height:46px;
  border:0;border-radius:50%;
  background:#f8e7cc;color:var(--navy);
  align-items:center;justify-content:center;
  cursor:pointer;padding:0;
}
.mobile-menu-toggle span,
.mobile-menu-toggle span:before,
.mobile-menu-toggle span:after{
  display:block;width:20px;height:2px;background:currentColor;border-radius:2px;
}
.mobile-menu-toggle span{position:relative}
.mobile-menu-toggle span:before,
.mobile-menu-toggle span:after{content:"";position:absolute;left:0}
.mobile-menu-toggle span:before{top:-6px}
.mobile-menu-toggle span:after{top:6px}

.mobile-menu-overlay{
  position:fixed;inset:0;
  background:rgba(8,40,77,.42);
  backdrop-filter:blur(5px);
  opacity:0;visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;
  z-index:200;
}
.mobile-menu-panel{
  position:absolute;top:0;right:0;
  width:min(88vw,390px);height:100%;
  background:#fffaf3;
  padding:22px 22px 26px;
  box-shadow:-22px 0 50px rgba(6,35,67,.18);
  transform:translateX(100%);
  transition:transform .28s ease;
  overflow:auto;
}
.mobile-menu-overlay.open{opacity:1;visibility:visible}
.mobile-menu-overlay.open .mobile-menu-panel{transform:translateX(0)}
.mobile-menu-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:15px;padding-bottom:18px;border-bottom:1px solid #eee9e1;
}
.mobile-menu-close{
  width:42px;height:42px;border:1px solid #dfe6e8;border-radius:50%;
  background:#fff;color:var(--navy);font-size:23px;line-height:1;cursor:pointer;
}
.mobile-menu-links{display:grid;gap:7px;margin:20px 0}
.mobile-menu-links a{
  padding:14px 15px;border-radius:16px;font-size:16px;font-weight:800;color:var(--navy);
}
.mobile-menu-links a.active{background:#f8e7cc}
.mobile-menu-links .mobile-sub{
  padding-left:30px;font-size:14px;font-weight:700;color:#45637f;
}
.mobile-menu-cta{
  border-top:1px solid #eee9e1;padding-top:20px;margin-top:12px;display:grid;gap:10px;
}
.mobile-menu-cta .btn{width:100%;min-height:48px}
.mobile-menu-meta{
  margin-top:22px;padding-top:18px;border-top:1px solid #eee9e1;
  font-size:12px;color:#657b95;
}
body.menu-open{overflow:hidden}

@media(max-width:920px){
  .navmenu{display:none !important}
  .mobile-menu-toggle{display:inline-flex}
}
@media(max-width:620px){
  .nav{min-height:76px}
  .nav-actions .btn.white{display:none}
  .nav-actions{margin-left:auto}
  .mobile-menu-toggle{flex:0 0 46px}
}

.step{grid-template-columns:60px 1fr}
@media(max-width:620px){.step{grid-template-columns:46px 1fr}}


/* ===== Correcties opdrachtgever v14 - behoud bestaande SoVisie kleuren ===== */
.portrait-card{background:var(--cream);border-radius:30px;padding:18px;box-shadow:0 12px 40px rgba(20,55,90,.08)}
.portrait-card .visual-blob{height:430px}
.portrait-card .visual-blob img{object-position:center top}
.home-help.stacked-help{display:block;max-width:900px;margin:34px auto 0}
.home-help.stacked-help .review-block{margin-top:26px}
.home-help.stacked-help .review-block .divider-title{text-align:center!important}
.home-help.stacked-help .review-block .divider{margin-left:auto!important;margin-right:auto!important}
.service-card.no-badge,.card.no-badge{padding-top:24px}
.centered-process{grid-template-columns:repeat(4,minmax(130px,1fr));max-width:760px;margin:0 auto}
.center-two-cards{display:grid;grid-template-columns:repeat(2,minmax(280px,390px));justify-content:center;gap:24px}
.center-two-cards .card{height:100%}
.partner-card .partner-photo.wide-source{object-position:center center}
@media(max-width:920px){.centered-process{grid-template-columns:repeat(2,1fr)}.center-two-cards{grid-template-columns:1fr;max-width:620px;margin:0 auto}}
@media(max-width:620px){.portrait-card .visual-blob{height:360px}.centered-process{grid-template-columns:1fr}}


/* V15: alleen gerichte opdrachtgever-correcties; bestaande kleuren blijven gelijk. */
.about-vase-card{background:#fffaf3;border-radius:28px;padding:18px;min-height:280px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.about-vase-card img{width:100%;max-height:320px;object-fit:contain;border-radius:22px}
@media(max-width:620px){.about-vase-card{min-height:240px;padding:14px}.about-vase-card img{max-height:280px}}
