/* ---------- Service Area ---------- */
.service-area { position: relative; overflow: hidden; padding: 110px 0; background-color: #efe0d6; background-image: url("https://ckz.kamiwebdesign.nl/wp-content/uploads/2026/09/cta-bg.webp"); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; isolation: isolate; }
.service-area::before { position: absolute; z-index: 1; inset: 0; content: ""; background: rgba(239, 224, 214, .76); pointer-events: none; }
.service-area .site-container { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "content visual"; gap: 70px; align-items: center; }
.service-area--content-right .site-container { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "visual content"; }

/* ---------- Service Area Content ---------- */
.service-area__content { grid-area: content; max-width: 520px; }
.service-area--content-right .service-area__content { justify-self: end; }
.service-area__eyebrow { display: inline-flex; align-items: center; margin: 0 0 20px; color: var(--kami-color-rose); font-family: var(--kami-font-sans); font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.service-area__eyebrow::before { display: block; flex: 0 0 36px; width: 36px; height: 2px; margin-right: 12px; content: ""; background: var(--kami-color-rose); border-radius: 999px; }
.service-area__title { max-width: 520px; margin: 0 0 24px; color: var(--kami-color-text); font-family: var(--kami-font-serif); font-size: clamp(38px, 3.5vw, 50px); line-height: 1.05; font-weight: 500; letter-spacing: -.03em; }
.service-area__title em { color: var(--kami-color-rose-dark); font-weight: 500; }
.service-area__text { max-width: 500px; color: var(--kami-color-text-soft); font-family: var(--kami-font-sans); font-size: 16px; line-height: 1.8; }
.service-area__text p { margin: 0; }
.service-area__text p + p { margin-top: 16px; }
.service-area__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.service-area__actions .button { min-height: 50px; padding-right: 22px; padding-left: 22px; }

/* ---------- Service Area Visual ---------- */
.service-area__visual { grid-area: visual; width: 100%; }
.service-area__visual-inner { position: relative; overflow: hidden; min-height: 390px; padding: 82px 48px 40px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(177, 121, 119, .12); border-radius: 38px; box-shadow: 0 20px 55px rgba(110, 73, 68, .065); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.service-area__visual-inner::before { position: absolute; top: -90px; right: -60px; width: 260px; height: 260px; content: ""; background: rgba(245, 227, 227, .72); border-radius: 50%; pointer-events: none; }
.service-area__visual-inner::after { position: absolute; bottom: -90px; left: -70px; width: 220px; height: 220px; content: ""; background: rgba(237, 227, 238, .58); border-radius: 50%; pointer-events: none; }

/* ---------- Service Area Marker ---------- */
.service-area__marker { position: absolute; z-index: 2; top: 20px; left: 50%; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: var(--kami-color-rose); border: 6px solid rgba(255, 255, 255, .72); border-radius: 50% 50% 50% 0; box-shadow: 0 12px 28px rgba(191, 116, 124, .22); transform: translateX(-50%) rotate(-45deg); }
.service-area__marker span { display: block; width: 12px; height: 12px; background: #fff; border-radius: 50%; transform: rotate(45deg); }

/* ---------- Service Area Locations ---------- */
.service-area__locations { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: center; }
.service-area__location { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 16px 20px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .85); border-radius: 17px; box-shadow: 0 8px 24px rgba(73, 53, 50, .045); }
.service-area__location-dot { flex: 0 0 9px; width: 9px; height: 9px; background: var(--kami-color-rose); border-radius: 50%; box-shadow: 0 0 0 5px rgba(214, 160, 167, .13); }
.service-area__location-name { color: var(--kami-color-text); font-family: var(--kami-font-sans); font-size: 14px; line-height: 1.3; font-weight: 600; }
.service-area__location:nth-child(4n + 2) .service-area__location-dot { background: var(--kami-color-purple); box-shadow: 0 0 0 5px rgba(124, 46, 128, .09); }
.service-area__location:nth-child(4n + 3) .service-area__location-dot { background: var(--kami-color-sage-dark); box-shadow: 0 0 0 5px rgba(111, 131, 95, .11); }
.service-area__location:nth-child(4n + 4) .service-area__location-dot { background: var(--kami-color-rose-dark); }

/* ---------- Service Area Responsive ---------- */
@media (max-width: 1100px) {
.service-area { padding: 90px 0; }
.service-area .site-container { gap: 48px; }
.service-area__visual-inner { min-height: 370px; padding: 78px 36px 36px; }
}

@media (max-width: 900px) {
.service-area .site-container, .service-area--content-right .site-container { grid-template-columns: 1fr; grid-template-areas: "content" "visual"; gap: 44px; }
.service-area__content, .service-area--content-right .service-area__content { justify-self: start; max-width: 650px; }
.service-area__text { max-width: 620px; }
.service-area__visual-inner { min-height: 0; }
}

@media (max-width: 768px) {
.service-area { padding: 72px 0; background-image: url("https://ckz.kamiwebdesign.nl/wp-content/uploads/2026/09/BG_Mobile_CTA.webp"); background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; }
.service-area::before { background: rgba(239, 224, 214, .78); }
.service-area .site-container { gap: 36px; }
.service-area__eyebrow { margin-bottom: 14px; font-size: 12px; }
.service-area__eyebrow::before { flex-basis: 28px; width: 28px; margin-right: 10px; }
.service-area__title { margin-bottom: 20px; font-size: clamp(32px, 8vw, 40px); }
.service-area__text { font-size: 15px; line-height: 1.75; }
.service-area__actions { margin-top: 26px; }
.service-area__visual-inner { padding: 72px 28px 28px; border-radius: 28px; }
.service-area__locations { gap: 10px; }
.service-area__location { min-height: 58px; padding: 12px 15px; border-radius: 15px; }
.service-area__location-name { font-size: 13px; }
.service-area__marker { top: 18px; width: 46px; height: 46px; }
}

@media (max-width: 500px) {
.service-area { padding: 60px 0; background-position: center bottom; background-size: 100% auto; }
.service-area::before { background: rgba(239, 224, 214, .80); }
.service-area .site-container { gap: 32px; }
.service-area__title { font-size: 34px; }
.service-area__actions .button { width: 100%; }
.service-area__visual-inner { padding: 64px 16px 18px; border-radius: 22px; box-shadow: 0 18px 46px rgba(110, 73, 68, .06); }
.service-area__visual-inner::before { top: -70px; right: -80px; width: 210px; height: 210px; }
.service-area__visual-inner::after { bottom: -70px; left: -70px; width: 170px; height: 170px; }
.service-area__locations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.service-area__location { gap: 9px; min-height: 52px; padding: 10px 11px; border-radius: 13px; }
.service-area__location-dot { flex-basis: 7px; width: 7px; height: 7px; box-shadow: 0 0 0 4px rgba(214, 160, 167, .13); }
.service-area__location-name { font-size: 12px; }
.service-area__marker { top: 16px; width: 42px; height: 42px; border-width: 5px; }
.service-area__marker span { width: 10px; height: 10px; }
}

@media (max-width: 380px) {
.service-area__visual-inner { padding-right: 12px; padding-left: 12px; }
.service-area__locations { gap: 7px; }
.service-area__location { gap: 8px; padding-right: 9px; padding-left: 9px; }
.service-area__location-name { font-size: 11.5px; }
}