/* Location: introduction followed by equal benefit cards. */
.location-story { background: #f6f7f5; scroll-margin-top: 112px; }
.location-inner { max-width: 1200px; margin: auto; }
.location-heading { max-width: 880px; margin: 0 auto; text-align: center; }
.location-heading h2 { font-size: clamp(28px, 3vw, 38px); text-transform: none; letter-spacing: .35px; line-height: 1.25; margin: 0 0 24px; }
.location-intro p { margin: 0; }
.location-intro p + p { margin-top: 16px; }
.location-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; padding: 0; margin: 40px 0 0; list-style: none; }
.location-benefits li {
  --card-accent: var(--blue);
  --card-tint: rgba(127, 179, 213, .14);
  position: relative;
  flex: 0 1 calc((100% - 48px) / 3);
  padding: 30px;
  background: linear-gradient(145deg, #fff 65%, var(--card-tint));
  border: 1px solid rgba(0, 0, 0, .055);
  border-radius: 18px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .025), 0 12px 28px -12px rgba(0, 0, 0, .16);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.location-benefits li:nth-child(even) {
  --card-accent: var(--tan);
  --card-tint: rgba(166, 123, 91, .10);
}
.location-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  font-size: 28px;
  line-height: 1;
  margin-bottom: 22px;
  background: var(--card-tint);
  border-radius: 17px;
  box-shadow: inset 0 -3px 0 var(--card-accent);
}
.location-benefits h3 { margin: 0 0 12px; color: var(--green); font: 700 18px/1.4 var(--font-head); }
.location-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.location-benefits li:nth-child(even) .location-icon svg { stroke: var(--tan); }
.location-benefits p { margin: 0; font-size: 15px; line-height: 1.7; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .location-benefits li:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .025), 0 20px 34px -14px rgba(0, 0, 0, .20);
  }
}
@media (prefers-reduced-motion: reduce) {
  .location-benefits li { transition: none; }
}
@media (max-width: 950px) {
  .location-benefits li { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 600px) {
  .location-story { scroll-margin-top: 78px; }
  .location-benefits li { flex-basis: 100%; padding: 24px; }
}