/* ===== v23: fixes for dark "related services" blocks ===== */

/* The old layout inherited white text from .section-dark while links themselves had white backgrounds.
   Force a readable foreground and give the cards a finished visual state. */
.section-dark .related-grid a,
.section-dark .related-grid a:visited {
  position:relative;
  display:flex;
  align-items:center;
  min-height:72px;
  padding:18px 46px 18px 20px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:15px;
  background:linear-gradient(180deg,#ffffff 0%,#faf8fb 100%);
  color:#272028 !important;
  font-size:13px;
  font-weight:800;
  line-height:1.35;
  box-shadow:0 8px 22px rgba(0,0,0,.10);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;
}

.section-dark .related-grid a::after {
  content:"→";
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  color:#7f168a;
  font-size:18px;
  font-weight:700;
}

.section-dark .related-grid a:hover {
  color:#7f168a !important;
  border-color:#c7a4cb;
  transform:translateY(-2px);
  box-shadow:0 13px 30px rgba(0,0,0,.15);
}

/* Headline/readability in dark service cross-link sections */
.section-dark .section-head.light h2 {
  color:#fff;
}
.section-dark .section-head.light .eyebrow {
  color:#dba1e1;
}
.section-dark .section-head.light > p {
  color:#c9c1cb;
}

/* Make uneven last rows look intentional rather than broken */
.section-dark .related-grid {
  align-items:stretch;
}
.section-dark .related-grid a {
  height:100%;
}

@media(max-width:980px){
  .section-dark .related-grid a{min-height:66px}
}
@media(max-width:520px){
  .section-dark .related-grid a{
    min-height:60px;
    padding:16px 42px 16px 17px;
    font-size:12px;
  }
}