/* Service area tiles with small aerial thumbnails, and project gallery cards. */
.area-regions { display:grid; gap:36px; }
.area-region { display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px; padding-top:28px; border-top:1px solid var(--line); }
.area-region h3 { margin:12px 0 0; font-size:15px; font-weight:560; letter-spacing:-.015em; }
.area-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.area-tile { display:grid; grid-template-columns:52px minmax(0,1fr) 16px; align-items:center; gap:14px; padding:9px 14px 9px 9px; border:1px solid #e3e8e5; border-radius:16px; background:#fff; transition:border-color .2s,box-shadow .3s var(--ease); }
.area-tile img { width:52px; height:52px; border-radius:11px; object-fit:cover; background:#dfe6e2; }
.area-tile-copy strong { display:block; font-size:14.5px; font-weight:520; letter-spacing:-.015em; }
.area-tile-copy span { display:block; margin-top:1px; color:var(--muted); font-size:12px; }
.area-tile-arrow { width:16px; height:16px; color:#9aa5a1; transition:translate .3s var(--ease),color .2s; }
.area-tile:hover { border-color:#c9d3ce; box-shadow:0 16px 30px -24px #1a2e2866; }
.area-tile:hover .area-tile-arrow { translate:3px 0; color:var(--ink); }
.area-tile:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.area-note { display:grid; justify-items:center; gap:14px; margin-top:36px; padding:30px 24px; border-radius:18px; background:#eef2f0; text-align:center; }
.area-note-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#fff; color:#173342; }
.area-note-icon .icon { width:19px; height:19px; }
.area-note p { max-width:620px; margin:0; font-size:14px; line-height:1.6; }
.area-note strong { color:var(--ink); font-weight:560; }
.area-note a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

.work-projects { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:36px 0 0; padding:0; list-style:none; }
.work-project { position:relative; display:block; overflow:hidden; border-radius:22px; aspect-ratio:4/5; background:#dfe6e2; color:#fff; isolation:isolate; }
.work-project-image,.work-project-image img { position:absolute; inset:0; width:100%; height:100%; }
.work-project-image img { object-fit:cover; transition:scale .7s var(--ease); }
.work-project::after { content:""; position:absolute; inset:45% 0 0; z-index:1; background:linear-gradient(transparent,#0b1816c7); pointer-events:none; }
.work-project-copy { position:absolute; left:20px; right:64px; bottom:18px; z-index:2; }
.work-project-copy strong { display:block; font-size:24px; font-weight:500; line-height:1.1; letter-spacing:-.035em; }
.work-project-copy span { display:block; margin-top:6px; color:#ffffffc7; font-size:12px; }
.work-project-arrow { position:absolute; right:16px; bottom:18px; z-index:2; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#ffffff26; backdrop-filter:blur(8px); transition:background .25s,color .25s; }
.work-project-arrow .icon { width:16px; height:16px; }
.work-project:hover img { scale:1.05; }
.work-project:hover .work-project-arrow { background:#fff; color:var(--ink); }
.work-project:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

@media (max-width:900px) {
 .work-projects { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:24px; }
 .work-project { border-radius:18px; aspect-ratio:1; }
 .work-project-copy { left:14px; right:52px; bottom:14px; }
 .work-project-copy strong { font-size:19px; }
 .work-project-arrow { right:12px; bottom:14px; width:32px; height:32px; }
}
@media (max-width:1100px) { .area-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) {
 .area-region { grid-template-columns:1fr; gap:14px; padding-top:22px; }
 .area-region h3 { margin:0; }
 .area-regions { gap:26px; }
}
@media (max-width:560px) {
 .area-tiles { gap:8px; }
 .area-tile { grid-template-columns:40px minmax(0,1fr); gap:10px; padding:7px 10px 7px 7px; border-radius:14px; }
 .area-tile img { width:40px; height:40px; border-radius:9px; }
 .area-tile-copy strong { font-size:13.5px; line-height:1.25; }
 .area-tile-copy span { font-size:11px; }
 .area-tile-arrow { display:none; }
 .area-note { padding:24px 20px; }
}
@media (prefers-reduced-motion:reduce) { .area-tile,.area-tile-arrow,.work-project-image img { transition:none; } }