.project-regions { padding: 80px var(--page-pad); background: var(--white); scroll-margin-top: 100px; }
.project-regions-inner { max-width: var(--max); margin: 0 auto; }
.project-regions-heading { max-width: 800px; margin-bottom: 32px; }
.project-regions-heading h2 { margin: 8px 0 16px; font-size: 42px; line-height: 1.12; }
.project-regions-heading > p:last-child { color: var(--muted); max-width: 650px; }
.project-regions-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.project-regions-map { position: relative; margin: 0; width: 100%; aspect-ratio: 14 / 15; overflow: hidden; }
.project-regions-map > img { width: 100%; height: 100%; object-fit: contain; }
.project-region-marker { position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; padding: 0; transform: translate(-50%, -50%); border: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.project-region-marker::before { content: ''; display: block; width: 17px; height: 17px; margin: auto; background: var(--green-deep); border: 3px solid white; border-radius: 50%; box-shadow: 0 0 0 7px rgba(0,150,64,.15); }
.project-region-marker[aria-pressed="true"]::before { background: #a56815; box-shadow: 0 0 0 10px rgba(199,144,45,.25); }
.project-region-marker:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.project-regions-map figcaption { position: absolute; bottom: 12px; left: 12px; font-size: 12px; background: rgba(255,255,255,.95); color: #485246; padding: 4px 8px; }
.project-regions-list { display: grid; border-top: 1px solid var(--line); }
.project-regions-list button { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 12px; width: 100%; text-align: left; padding: 19px 12px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.project-regions-list button[aria-pressed="true"] { background: #f0f5ee; box-shadow: inset 3px 0 var(--green-deep); }
.project-regions-list button:focus-visible { outline: 3px solid var(--green-deep); outline-offset: -3px; }
.project-regions-list button > span:first-child { font-size: 13px; padding-top: 3px; color: var(--muted); }
.project-regions-list strong { display: block; font-size: 18px; line-height: 1.3; font-weight: 600; }
.project-regions-list small { display: block; margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.project-regions-note { font-size: 14px; color: var(--muted); margin: 24px 0 0; }
@media (max-width: 760px) {
  .project-regions { padding: 56px var(--page-pad); }
  .project-regions-heading h2 { font-size: 32px; }
  .project-regions-layout { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .project-regions-map { max-width: 520px; margin-inline: auto; }
  .project-region-marker { width: 28px; height: 28px; }
  .project-region-marker::before { width: 14px; height: 14px; border-width: 2px; box-shadow: 0 0 0 4px rgba(0,150,64,.15); }
  .project-region-marker[aria-pressed="true"]::before { box-shadow: 0 0 0 6px rgba(199,144,45,.25); }
  .project-regions-list button { padding: 16px 10px; }
}