/* Homepage: stronger service hierarchy, partnership narrative and NIKA concepts. */
#aanpak .service-intro{max-width:760px;margin-bottom:32px;}
#aanpak .service-intro .p-title{margin-bottom:14px;}
#aanpak .service-intro .body{max-width:48ch;}
#aanpak .svc-kies{border:0;margin:0;padding:0;}
#aanpak .svc-grid{gap:24px;}
#aanpak .svc-door{min-height:370px;padding:36px;border:0;border-radius:20px;box-shadow:none;background:var(--purple);color:var(--maroon);}
#aanpak .svc-door.web{background:var(--lime);}
#aanpak .svc-door::after{display:none;}
#aanpak .svc-door .sd-no{padding:0;background:none;color:inherit;font-size:12px;letter-spacing:.12em;}
#aanpak .svc-door h3{font-size:clamp(36px,4.6vw,58px);line-height:1.06;margin:30px 0 14px;}
#aanpak .svc-door .svc-kop{font-size:21px;line-height:1.3;opacity:1;margin-bottom:12px;}
#aanpak .svc-door p{font-size:16px;line-height:1.55;opacity:1;max-width:39ch;}
#aanpak .svc-door .service-terms{font-size:13px;margin-top:20px;}
#aanpak .svc-door .more{color:inherit;border-top:1px solid rgba(25,0,0,.22);display:flex;justify-content:space-between;width:100%;padding-top:20px;margin-top:28px;font-size:15px;}
#aanpak .svc-door .more span{font-size:26px;line-height:1;}
#aanpak .svc-door:hover{transform:translateY(-5px);box-shadow:0 14px 35px -25px var(--maroon);}
#aanpak .svc-door:focus-visible{outline:3px solid var(--maroon);outline-offset:5px;}
#filosofie.nika-home .pinner{padding-top:100px;padding-bottom:110px;}
#filosofie.nika-home{background:#5d319e;}
#filosofie.nika-home .cloud-edge{color:#5d319e;}
@media(max-width:700px){#aanpak .svc-grid{grid-template-columns:1fr;}#aanpak .svc-door{min-height:0;padding:28px;}#aanpak .svc-door h3{margin-top:24px;}#aanpak .svc-door p{max-width:none;}#filosofie.nika-home .pinner{padding-top:72px;padding-bottom:90px;}}
@media(prefers-reduced-motion:reduce){#aanpak .svc-door:hover{transform:none;}}
/* Recognisable imagery under brand-colour overlays. */
#aanpak .svc-door{isolation:isolate;min-height:580px;padding:32px;}
#aanpak .svc-door .service-visual{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;}
#aanpak .svc-door .service-visual img{display:block;position:absolute;width:118%;max-width:none;height:auto;top:30px;left:10%;border-radius:10px;box-shadow:0 20px 60px #19000040;transform:rotate(-9deg);}
#aanpak .svc-door.web .service-visual img{width:126%;left:3%;top:25px;transform:rotate(7deg);border:8px solid #fafaf8;border-top-width:25px;}
#aanpak .svc-door::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#9466fa66 0%,#9466fa88 25%,#9466faf2 49%,#9466fa 63%);}
#aanpak .svc-door.web::before{background:linear-gradient(180deg,#c2ff4040 0%,#c2ff4070 25%,#c2ff40f2 49%,#c2ff40 63%);}
#aanpak .svc-door h3{margin-top:184px;}
#aanpak .svc-door .sd-no{background:#fafaf8ed;border-radius:5px;padding:7px 9px;color:#190000;}

#aanpak .svc-door .more{margin-top:auto;padding-top:20px;}
#aanpak .svc-door .service-terms{margin-bottom:24px;}

@media(max-width:700px){#aanpak .svc-door{padding:26px;min-height:565px;}#aanpak .svc-door h3{margin-top:175px;}}
@media(max-width:420px){#aanpak .svc-door h3{margin-top:145px;}}
/* Approved refinements: white Ads title and a clearer website preview. */
#aanpak .svc-door.ads h3{color:#fff;text-shadow:0 2px 14px #44207735;}
#aanpak .svc-door.web::before{background:linear-gradient(180deg,#c2ff4015 0%,#c2ff4035 25%,#c2ff40f2 49%,#c2ff40 63%);}
#aanpak .svc-door.web .service-visual img{width:112%;left:7%;top:42px;transform:rotate(4deg);}

/* Services: purple Ads, lime Webdesign, contrasting labels and burgundy CTAs. */
#aanpak .svc-door{--service-tone:var(--purple);--service-ink:var(--white);background:var(--service-tone);color:var(--service-ink)}
#aanpak .svc-door.web{--service-tone:var(--lime);--service-ink:var(--burgundy);background:var(--service-tone);color:var(--service-ink)}
#aanpak .svc-door::before,#aanpak .svc-door.web::before{background:linear-gradient(180deg,color-mix(in srgb,var(--service-tone) 12%,transparent) 0%,color-mix(in srgb,var(--service-tone) 25%,transparent) 25%,color-mix(in srgb,var(--service-tone) 95%,transparent) 49%,var(--service-tone) 63%)}
#aanpak .svc-door h3,#aanpak .svc-door.ads h3,#aanpak .svc-door.web h3,#aanpak .svc-door p,#aanpak .svc-door.web p,#aanpak .svc-door strong{color:var(--service-ink);opacity:1;text-shadow:none}
#aanpak .svc-door .sd-no{background:var(--lime);color:var(--burgundy);border:1px solid var(--lime);border-radius:999px;padding:9px 13px}
#aanpak .svc-door.web .sd-no{background:var(--purple);color:var(--white);border-color:var(--purple)}
#aanpak .svc-door .more,#aanpak .svc-door.web .more{display:inline-flex;align-self:flex-start;align-items:center;justify-content:center;width:auto;max-width:100%;min-height:50px;padding:14px 22px;margin-top:auto;border:2px solid var(--white);border-radius:9px;background:var(--burgundy);color:var(--white);font-size:15px;font-weight:800;line-height:1.3;text-decoration:none;transition:box-shadow .2s ease,background .2s ease}
#aanpak .svc-door:hover .more,#aanpak .svc-door:focus-visible .more{box-shadow:0 0 0 3px color-mix(in srgb,var(--service-ink) 28%,transparent)}
#aanpak .svc-door:focus-visible{outline:3px solid var(--burgundy);outline-offset:5px}

/* Keep the website photo in its own image area, clear of the Webdesign heading. */
#aanpak .svc-door.web .service-visual{inset:0 0 auto;height:220px;mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
#aanpak .svc-door.web .service-visual img{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;transform:none;border:0;border-radius:0;box-shadow:none}
@media(max-width:700px){#aanpak .svc-door.web .service-visual{height:200px}}
@media(max-width:420px){#aanpak .svc-door.web .service-visual{height:175px}}

/* Mobiel: de twee kopregels mogen binnen hun eigen regel afbreken, zodat
   "Google Ads & webdesign." niet meer rechts wordt afgekapt (inline nowrap). */
@media(max-width:700px){
  .hero-copy h1 > span{display:block;white-space:normal!important;}
  .hero-copy h1{font-size:clamp(26px,7.4vw,34px);}
}

/* Homepagekop: op smalle schermen mag elke regel afbreken (was afgekapt door inline nowrap; plan 8 okt 2026) */
@media (max-width:600px){#heroCopy h1 span{white-space:normal!important;}}

/* Mobiel (12 okt 2026): kop boven in de hero, onder het menu. Onderin vielen kop en subregel achter de zwevende
   Safari-balk (iOS 26) en de WhatsApp-knop, terwijl het logo het midden vult. */
@media(max-width:700px){
  #heroCopy.hero-copy{top:104px;bottom:auto}
  #heroCopy.hero-copy .hero-sub{margin-top:12px}
}