.service-areas { padding: 64px 24px; scroll-margin-top: 110px; background: #f2f8f8; color: #173f42; }
.service-areas-inner { max-width: 1120px; margin: 0 auto; }
.service-areas h2 { margin: 0 0 16px; font-size: clamp(26px, 4vw, 36px); line-height: 1.2; font-weight: 800; }
.service-areas p { max-width: 800px; margin: 0 0 28px; font-size: 16px; line-height: 1.65; }
.service-area-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.service-area-group { padding: 24px; background: white; border: 1px solid #c3d8d8; border-radius: 14px; }
.service-area-group-primary { grid-column: 1 / -1; border-top: 4px solid #b51a59; }
.service-area-group h3 { color: #173f42; font-size: 20px; line-height: 1.3; margin: 0 0 18px; font-weight: 700; }
.service-area-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.service-area-group-primary ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.service-area-group li { margin: 0; min-width: 0; }
.service-area-group a { display: block; padding: 10px 0; color: #173f42; font-size: 16px; line-height: 1.5; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.service-area-group a span { display: block; font-size: 12px; font-weight: 400; }
.service-area-group a:hover, .service-areas-all:hover { color: #b51a59; }
.service-areas-all { display: inline-block; margin-top: 24px; padding: 10px 0; color: #173f42; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.service-areas a:focus-visible { outline: 3px solid #b51a59; outline-offset: 4px; border-radius: 3px; }
@media (max-width: 700px) { .service-area-groups { grid-template-columns: minmax(0, 1fr); } .service-area-group-primary ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .service-areas { padding: 40px 16px; } .service-area-group { padding: 20px; } .service-area-group ul { grid-template-columns: minmax(0, 1fr); } }