/* Shared area-page hero: copy + geographic map, no contact-form column. */
.area-hero {
  --area-stage: clamp(480px, calc(70svh - var(--nav-h) - var(--utility-h)), 720px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.area-hero > .hero-background { opacity: .11; object-position: 50% 63%; }
.area-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4.5vw, 72px);
  min-height: var(--area-stage);
  padding-block: 36px;
}
.area-copy { min-width: 0; padding-block: 12px; }
.area-copy .font__h1 { margin-block: .55em; text-wrap: balance; }
.area-copy .font__body--lead { max-width: 47ch; }
.area-copy .hero-actions { margin-top: 28px; }
.area-assurance { display: flex; align-items: center; gap: 10px; margin-top: 19px; }
.area-assurance::before { content: ''; width: 7px; height: 7px; border: 1.5px solid var(--red); border-radius: 50%; flex-shrink: 0; }
.area-map { position: relative; min-width: 0; margin: 0; }
/* Hyvin hillitty pehmuste kartan alla. Suunta on tummempaan, ei vaaleampaan:
   kartan takana oleva pinta on jo ~237/255 (--white ja sen paalla valokuva .11
   opacitylla), joten valkoinen .30 nostaisi sita 5.5 askelta ja taysin peittava
   valkoinenkin vain 18. Vaalealla pohjalla ei ole vaaleampaa varaa, joten kehan
   ainoa tapa nakya on laskea ymparistoa - silloin keskusta lukee korostettuna.
   Kaksi asiaa pitavat sen pehmusteena eivatka ympyrana:
   1) Loppusavy on sama vari nolla-alphalla, ei "transparent". transparent on
      rgba(0,0,0,0), ja siihen interpoloitaessa selain kulkee eri savyn kautta,
      mika piirtaa nakyvan renkaan reunaan.
   2) Valipysakkeja on viisi eika yksi. Kahden pysakin gradientti laskee
      lineaarisesti ja jattaa silmalle havaittavan reunan.
   --map-pad on --service-text. Voimakkuutta saadetaan keskimmaisesta alphasta:
   .08 vastaa noin 13 askelta, eli juuri ja juuri havaittavaa. */
.area-map { --map-pad: 74 80 73; }
.area-map::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgb(var(--map-pad) / .08) 0%,
    rgb(var(--map-pad) / .066) 20%,
    rgb(var(--map-pad) / .042) 40%,
    rgb(var(--map-pad) / .018) 58%,
    rgb(var(--map-pad) / .006) 72%,
    rgb(var(--map-pad) / 0) 84%);
}
/* Kartta kehan paalle: ::before on absoluuttinen ja maalautuisi muuten
   asemoimattoman SVG:n ylle. */
.area-map-svg { position: relative; z-index: 1; display: block; width: 100%; height: clamp(438px, calc(70svh - var(--nav-h) - var(--utility-h) - 62px), 638px); overflow: visible; }
.area-map .map-label { font-family: var(--font); }
@media (min-width: 1001px) {
  .area-copy .font__h1 { font-size: clamp(34px, 3.5vw, 52px); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .area-grid { gap: 22px; }
  .area-copy .font__h1 { font-size: 34px; }
  .area-copy .hero-actions { gap: 16px; }
  .area-copy .button { padding-inline: 16px; }
  .area-copy .text-link { font-size: 11px; gap: 6px; }
}
@media (max-width: 760px) {
  /* Kartan yla- ja alavali yhta suuret ja pienet: gap on kartan ylapuolinen
     vali (viimeinen teksti -> kartta) ja padding-bottom sen alapuolinen.
     12px: tiukka mutta ei kiinni, kun kartalla on oma sisainen marginaalinsa. */
  .area-grid { grid-template-columns: minmax(0, 1fr); padding-block: 40px 12px; gap: 12px; }
  .area-copy { padding: 0; }
  .area-copy .font__h1 { font-size: clamp(28px, 6.5vw, 42px); }
  .area-copy .hero-actions { gap: 18px; }
  .area-copy .button { padding-inline: 16px; font-size: 12px; }
  .area-copy .text-link { font-size: 11px; gap: 5px; }
  /* Kiintea korkeus teki laatikosta kontin suhteen liian matalan, jolloin
     xMidYMid meet skaalasi kartan korkeuden mukaan ja sivuille jai tyhjaa:
     342px levealla kontilla piirros oli vain 262px. aspect-ratio antaa
     laatikolle viewBoxin oman suhteen, jolloin skaala tulee leveydesta ja
     kartta kasvaa 297px:aan (+14%) - suurin mahdollinen ilman etta se ylittaa
     gutterin, koska laatikko on tasan kontin levyinen.
     max-height pitaa kartan jarkevana leveilla puhelimilla ja pikkutableteilla,
     joilla pelkka suhde tekisi siita yli 600px korkean. */
  .area-map-svg { height: auto; aspect-ratio: 540 / 525; max-height: 58svh; }
  /* Western neighbours extend the original map sideways without shrinking it.
     Pan towards the selected municipality; the hero clips the distant edge. */
  .area-map-svg[data-map-layout="west"] { transform: translateX(var(--map-mobile-shift, 0%)); }
}
@media (max-width: 370px) {
  .area-copy .hero-actions { gap: 12px; }
  .area-copy .button { padding-inline: 12px; font-size: 11px; }
  .area-copy .text-link { font-size: 10px; }
}

/* Source remains available without taking space underneath the map. */
.area-map-attribution { position: absolute; right: 10px; bottom: 4px; z-index: 1; }
.area-map-attribution summary { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--white); cursor: pointer; font-size: 12px; list-style: none; }
.area-map-attribution summary::-webkit-details-marker { display: none; }
.area-map-attribution p { position: absolute; right: 0; bottom: 32px; width: 220px; padding: 14px; background: var(--paper); border: 1px solid var(--line); font-size: 11px; line-height: 1.7; color: var(--muted); }
.area-map-attribution a { text-decoration: underline; text-underline-offset: 2px; }