.areas-hero { position: relative; overflow: hidden; }
.areas-hero::after { content: ""; position: absolute; right: -160px; bottom: -260px; width: 540px; height: 540px; border: 1px solid rgba(214,103,44,.22); border-radius: 50%; pointer-events: none; }
.areas-hero .container { position: relative; z-index: 1; }
.location-group { padding-top: 34px; border-top: 1px solid var(--line); }
.location-group + .location-group { margin-top: 70px; }
.location-group > h3 { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; font-size: clamp(1.65rem, 3vw, 2.25rem); }
.location-group > h3::before { content: ""; width: 34px; height: 3px; flex: 0 0 auto; background: var(--copper); }
.location-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.location-card { min-height: 230px; display: flex; flex-direction: column; padding: 26px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--ink); text-decoration: none; box-shadow: 0 8px 24px rgba(23,26,31,.04); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.location-card:hover, .location-card:focus-visible { transform: translateY(-4px); border-color: var(--copper); box-shadow: 0 18px 40px rgba(23,26,31,.1); outline: none; }
.location-card span { color: var(--copper-dark); font-size: .68rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.location-card strong { display: block; margin-top: 20px; font-family: Georgia, "Times New Roman", serif; font-size: 1.4rem; line-height: 1.12; letter-spacing: -.02em; }
.location-card small { display: block; margin-top: 11px; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.location-card b { display: block; margin-top: auto; padding-top: 22px; color: var(--copper-dark); font-size: .74rem; letter-spacing: .03em; }
.location-hero__visual { position: relative; }
.location-hero__visual img { width: 100%; height: 440px; object-fit: cover; border-radius: 8px 100px 8px 8px; box-shadow: var(--shadow); }
.location-hero__visual span { position: absolute; right: 16px; bottom: 16px; padding: 9px 12px; border-radius: 4px; background: rgba(23,26,31,.9); color: var(--white); font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.context-list { display: grid; gap: 14px; }
.context-list article { padding: 24px 26px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.context-list h3 { margin-bottom: 8px; font-size: 1.3rem; }
.context-list p { margin: 0; color: var(--muted); }
.project-proof { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.project-proof__images { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; min-height: 500px; }
.project-proof__images img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.related-area-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.related-area-links a { display: grid; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); text-decoration: none; }
.related-area-links a:hover, .related-area-links a:focus-visible { border-color: var(--copper); box-shadow: 0 12px 28px rgba(23,26,31,.07); outline: none; }
.related-area-links span { color: var(--muted); font-size: .82rem; }
.area-hub-link { margin-top: 28px; }
@media (max-width: 1050px) { .location-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .location-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-proof { grid-template-columns: 1fr; } .related-area-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .location-group + .location-group { margin-top: 52px; } .location-grid, .related-area-links { grid-template-columns: 1fr; } .location-card { min-height: 0; } .location-hero__visual img { height: 320px; } .project-proof__images { min-height: 360px; } }
@media (prefers-reduced-motion: reduce) { .location-card { transition: none; } }