.work-area{padding:72px 5% 56px;max-width:1440px;margin:auto;scroll-margin-top:24px}
.work-area-heading{display:flex;justify-content:space-between;align-items:end;gap:48px;margin-bottom:36px}.work-area-heading h2{font-size:clamp(40px,4.4vw,62px)}.work-area-heading h2 em{font-weight:400}.work-area-heading>p{max-width:38ch;font-size:17px;line-height:1.7;margin-bottom:5px}
.work-area-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(340px,1fr);gap:clamp(32px,4vw,64px);align-items:start}.area-map-column{min-width:0;position:sticky;top:24px}
.area-map{position:relative;width:100%;height:auto;min-height:0;aspect-ratio:1;flex:none;border-radius:50%;overflow:hidden;isolation:isolate;background:#dce7e7}.area-geography{position:absolute;inset:0;width:100%;height:100%}.area-geography path{vector-effect:non-scaling-stroke}.map-land{fill:#f1efe6;stroke:#d1d1c4;stroke-width:.8}.map-service-area{fill:#7f9677;stroke:#f6f3e9;stroke-width:1}.map-service-area.is-selected{stroke:#203c4c;stroke-width:2}.map-neighborhoods{stroke:#637360;stroke-width:.5;opacity:.35;pointer-events:none}.is-city-view .map-neighborhoods{opacity:.5;stroke-width:.65}.map-water{fill:#dce7e7;stroke:#dce7e7;stroke-width:.7;pointer-events:none}
.map-label{position:absolute;display:flex;gap:5px;align-items:center;transform:translate(-50%,-50%);font-size:14px;line-height:1.25;white-space:nowrap;color:#2f493c;pointer-events:none}.map-dot{width:5px;height:5px;border-radius:50%;background:#3d5947;flex:none}.map-label-name{display:none;text-shadow:0 1px #f6f3e9,1px 0 #f6f3e9,-1px 0 #f6f3e9,0 -1px #f6f3e9}.map-label[data-landmark] .map-label-name{display:inline}.map-label-city{display:none}.map-label.is-selected{z-index:2;background:var(--navy);color:#fcfaf5;padding:7px 10px}.map-label.is-selected .map-label-name{display:inline;text-shadow:none}.map-label.is-selected .map-dot{background:currentColor}.is-city-view .map-label:not(.map-label-city){display:none}.is-city-view .map-label-city{display:flex}.is-city-view .map-label-city .map-label-name{display:inline}.is-city-view .map-label[data-map-label=oud-west]{transform:translate(-90%,-50%)}.is-city-view .map-label[data-map-label=oud-zuid]{transform:translate(-80%,-50%)}.is-city-view .map-label[data-map-label=rivierenbuurt]{transform:translate(-25%,-50%)}
.map-north{position:absolute;top:9%;left:48%;font-size:14px;letter-spacing:.08em;color:#36546c}.map-sea{position:absolute;left:9%;top:45%;font:italic 20px Georgia,serif;color:#47657a;writing-mode:vertical-rl;transform:rotate(180deg)}.is-city-view .map-sea{display:none}.map-selection{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.4;white-space:nowrap;color:#304a40}.map-key-dot{width:12px;height:12px;background:#aabc9e;border:1px solid #63795c}.map-instruction{font-size:14px;line-height:1.6;text-align:center;color:var(--muted);margin:20px auto 0;max-width:36ch}
.area-directory{padding-top:0}.area-group{padding:20px 0;border-top:1px solid var(--line)}.area-group:first-child{padding-top:8px;border-top:0}.area-group h3{font:24px/1.2 Georgia,serif;letter-spacing:-.025em;color:var(--navy);margin:0 0 10px}.area-group h3 button{font:inherit;line-height:inherit;background:none;border:0;padding:0;min-height:36px;color:inherit;cursor:pointer}.area-group h3 button span{font:18px Arial,sans-serif;padding-left:8px;color:var(--accent)}.area-place-list{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}.area-choice{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:9px 0;text-align:left;min-height:44px;font-size:15px;line-height:1.4;color:var(--ink);border:0;background:none;cursor:pointer}.area-choice>span:last-child{font-size:18px;color:var(--accent);opacity:0}.area-choice:hover,.area-choice[aria-pressed=true]{color:var(--accent)}.area-choice:hover>span:last-child,.area-choice[aria-pressed=true]>span:last-child{opacity:1}.area-choice[aria-pressed=true]>span:first-child{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@media(max-width:1050px){.work-area-layout{grid-template-columns:minmax(0,1.1fr) minmax(300px,1fr);gap:32px}.map-label[data-map-label=castricum]{transform:translate(-30%,-50%)}.map-label[data-map-label=purmerend]{transform:translate(-70%,-50%)}.work-area-heading>p{max-width:34ch}}
@media(max-width:760px){.work-area{padding:48px 6% 32px}.work-area-heading{display:block;margin-bottom:28px}.work-area-heading h2{font-size:44px}.work-area-heading>p{margin-top:24px;font-size:16px;max-width:42ch}.work-area-layout{display:flex;flex-direction:column;gap:28px}.area-map-column{position:static;width:100%;max-width:540px;align-self:center}.area-directory{width:100%}.map-instruction{margin-top:16px}.area-group{padding:20px 0}.area-group h3{font-size:26px}.area-choice{font-size:16px;min-height:46px}.map-sea{font-size:18px;left:7%}.map-north{top:7%}.map-label[data-map-label=zaandam]{transform:translate(-30%,-30%)}.map-label[data-map-label=hoofddorp]{transform:translate(-50%,-80%)}.map-selection{bottom:6%;font-size:14px}.map-selection span:last-child{max-width:190px;text-align:center;white-space:normal}.is-city-view .map-label[data-map-label=centrum]{transform:translate(-10%,-95%)}.is-city-view .map-label[data-map-label=oud-west]{transform:translate(-95%,-85%)}.is-city-view .map-label[data-map-label=oud-zuid]{transform:translate(-85%,-15%)}.is-city-view .map-label[data-map-label=rivierenbuurt]{transform:translate(-15%,20%)}}
@media(prefers-reduced-motion:no-preference){.map-service-area{transition:fill 180ms ease-out}.area-map.has-entered .map-service-area{animation:map-reveal 600ms ease-out both}@keyframes map-reveal{from{opacity:0}to{opacity:1}}}
@media(prefers-reduced-motion:reduce){.work-area *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.map-reset{position:absolute;top:8%;left:50%;transform:translateX(-50%);z-index:3;background:#fbf9f1;color:var(--navy);border:1px solid #c7cbbd;font-size:14px;line-height:1.3;padding:10px 14px;min-height:44px;white-space:nowrap;cursor:pointer}.is-city-view .map-north{display:none}
.area-map{scroll-margin-top:20px}
.is-city-view .map-label[data-map-label=de-baarsjes]{transform:translate(-95%,-120%)}
.is-city-view .map-label[data-map-label=de-pijp]{transform:translate(-5%,-50%)}
@media(max-width:760px){.map-reset{top:6%;padding:9px 12px}.is-city-view .map-label-city:not(.is-selected) .map-label-name{display:none}}