/* Photo-led cards follow the section palette. */
.sx-site #main .service-showcase .card.has-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #516985;
  border-radius: 16px;
  background: linear-gradient(145deg, #2b425f, #12253f 55%, #0b1c34);
  color: #fff;
  box-shadow: 0 9px 22px #07172c29;
}
.sx-site #main .service-showcase .card.has-photo .card-photo {
  -webkit-mask-image: linear-gradient(#000 65%, transparent);
  mask-image: linear-gradient(#000 65%, transparent);
}
.sx-site #main .service-showcase .card.has-photo .card-copy {
  position: relative;
  margin-top: -12px;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sx-site #main .service-showcase .card.has-photo :is(h3, h3 a, p, li, summary) { color: #fff; }
.sx-site #main .service-showcase .card.has-photo .card-more { border-color: #d7e7ff38; }
.sx-site #main .service-showcase .card.has-photo .card-more summary::after { color: var(--orange); }

/* The property and service grids on white sections use white reading panels. */
.sx-site.surface-property #property-section-1 .card.has-photo {
  background: #fff;
  border-color: #d5e0ec;
  box-shadow: none;
}
.sx-site #main .region-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #516985;
  border-radius: 16px;
  background: #0b1c34;
  color: #fff;
  box-shadow: 0 9px 22px #07172c29, inset 0 1px #e1efff69;
}
.sx-site #main .region-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #e7f3ffb3, transparent) top / 100% 1px no-repeat;
  box-shadow: inset 1px 0 #e1efff52;
}
.sx-site #main .region-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.5vw, 24px);
  max-width: 880px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.region-card-grid > li { min-width: 0; }

.sx-site #main .region-card {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  text-decoration: none;
}

.region-card > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.region-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 34%, #0b1c3440 55%, #0b1c34d9 78%, #0b1c34 100%);
}

.region-card-caption {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(12px, 2.5vw, 20px);
  color: #fff;
  font-size: clamp(1.12rem, 2.3vw, 1.45rem);
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 0 1px 5px #07152b;
}

.region-card-arrow {
  display: grid;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 2px solid #e2eeffb3;
  border-radius: 50%;
  background: linear-gradient(145deg, #29486a, #112a45);
  box-shadow: inset 0 1px #ecf4ff47;
  color: var(--orange);
}

.sx-site #main .region-card-arrow svg {
  width: 23px;
  height: 23px;
  color: inherit;
  stroke-width: 2.6;
}

.sx-site #main .region-card:hover .region-card-caption > span:first-child {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 600px) {
  .sx-site #main .region-card-grid { grid-template-columns: minmax(0, 1fr); }
}

.region-card-copy { display: grid; gap: 3px; min-width: 0; }
.region-card-copy strong { font-size: inherit; }
.region-card-copy > span { font-size: clamp(.76rem, 1.4vw, .9rem); font-weight: 500; line-height: 1.25; }
.region-card-copy .region-card-action { margin-top: 4px; font-weight: 850; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sx-site #main .region-card:hover .region-card-action { text-decoration-thickness: 2px; }
.sx-site #main .region-card:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
@media (max-width: 360px) {
  .region-card-caption { padding: 11px; gap: 8px; }
  .region-card-copy > span { font-size: .72rem; }
  .region-card-arrow { width: 44px; height: 44px; }
}