/* Ridgeline — Services. rem-only. */

.rl-sv {
  background: #eef4ff;
  padding-top:    var(--sv-pt, 4.5rem);
  padding-bottom: var(--sv-pb, 4.5rem);
  margin-top:     var(--sv-mt, 0rem);
  margin-bottom:  var(--sv-mb, 0rem);
  /* Full-bleed */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.rl-sv__inner {
  max-width: 85rem;
  margin-inline: auto;
  padding-inline: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.5rem;
}

.rl-sv__heading {
  font-family: var(--rl-font-heading);
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rl-navy);
  text-align: center;
  margin: 0rem;
}

/* ── Cards grid ── */
.rl-sv__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.rl-sv__card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 415 / 610;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.rl-sv__card-media {
  position: absolute;
  inset: 0rem;
}

.rl-sv__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

.rl-sv__card-scrim {
  position: absolute;
  inset: 0rem;
  background: linear-gradient(to bottom, transparent 0%, transparent 40%, currentColor 75%);
  color: inherit;
}

.rl-sv__card[style*="182e96"] .rl-sv__card-scrim {
  background: linear-gradient(to bottom, rgba(24, 46, 150, 0) 0%, rgba(24, 46, 150, 0) 40%, #182e96 75%);
}

.rl-sv__card[style*="040b43"] .rl-sv__card-scrim {
  background: linear-gradient(to bottom, rgba(4, 11, 67, 0) 0%, rgba(4, 11, 67, 0) 40%, #040b43 75%);
}

.rl-sv__card-body {
  position: relative;
  z-index: 1;
  padding: 0rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rl-sv__card-title {
  font-family: var(--rl-font-heading);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--rl-white, #ffffff);
  margin: 0rem;
}

.rl-sv__card-desc {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.61;
  color: var(--rl-white, #ffffff);
  margin: 0rem 0rem 0.5rem;
  /* Figma gives all 3 cards a fixed-height (302x59) description box so
     the button row lines up regardless of copy length -- match that
     with a min-height (3 lines @ 0.875rem/1.61 line-height ≈ 3.38rem)
     instead of letting shorter descriptions leave the button higher. */
  min-height: 3.38rem;
}

.rl-sv__card-btn {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  align-self: flex-start;
  background: #fab529;
  color: #040b43;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.625rem 1.5rem;
  border-radius: 2.6875rem;
  text-decoration: none;
}

.rl-sv__card-btn:hover,
.rl-sv__card-btn:focus-visible { background: #000000; color: var(--rl-white, #ffffff); }

.rl-sv__card-btn-arrow {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* ── Closing block ── */
.rl-sv__closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
  max-width: 44.5rem;
  margin-top: 2rem;
}

.rl-sv__closing-heading {
  font-family: var(--rl-font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--rl-navy);
  margin: 0rem;
}

.rl-sv__closing-body {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.61;
  color: var(--rl-navy);
  margin: 0rem;
}

.rl-sv__cta:hover { background: #000000; color: var(--rl-white, #ffffff); }

.rl-sv__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: #182e96;
  color: var(--rl-white, #ffffff);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.75rem 1.75rem;
  border-radius: 2.6875rem;
  text-decoration: none;
}

.rl-sv__cta strong {
  font-weight: 700;
}

.rl-sv__cta-arrow {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* ── Tablet (≤900px) ── */
@media (max-width: 56.25rem) {
  .rl-sv__heading         { font-size: 2.75rem; }
  .rl-sv__grid            { grid-template-columns: 1fr 1fr; }
  .rl-sv__closing-heading { font-size: 1.875rem; }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 48rem) {
  /* Block-to-block inside a section: site-wide 2rem mobile value.
     Two classes so these beat the base/variant rules above. */
  .rl-sv .rl-sv__inner { row-gap: 1.5rem; }   /* was 2.5rem */

  /* Mobile title->text rhythm, site-wide values. */
  .rl-sv .rl-sv__closing { row-gap: 1.25rem; }   /* closing heading -> body (was 1.75rem) */

  .rl-sv__cta, .rl-sv__card-btn { text-align: center; justify-content: center; }
  .rl-sv__cta-arrow { display: none; }
  .rl-sv__card-btn-arrow { display: none; }
  .rl-sv {
    padding-top:    var(--sv-pt-m, var(--sv-pt, 1.40625rem));
    padding-bottom: var(--sv-pb-m, var(--sv-pb, 1.40625rem));
    margin-top:     var(--sv-mt-m, var(--sv-mt, 0rem));
    margin-bottom:  var(--sv-mb-m, var(--sv-mb, 0rem));
  }
  .rl-sv__inner    { padding-inline: 1.25rem; gap: 2.5rem; }
  .rl-sv__heading  { font-size: 2.25rem; }
  .rl-sv__grid     { grid-template-columns: 1fr; }
  .rl-sv__card     { aspect-ratio: 375 / 520; }
  .rl-sv__card-btn { width: 100%; }
  .rl-sv__cta      { width: 100%; justify-content: center; }

  /* Card is shorter relative to width on mobile (375/460 vs desktop's
     415/610), pushing the heading further up into the gradient's
     transparent zone -- extend the scrim so it starts and fully darkens
     earlier, keeping text readable against the photo. */
  .rl-sv__card-scrim {
    background: linear-gradient(to bottom, transparent 0%, transparent 10%, currentColor 55%);
  }
  .rl-sv__card[style*="182e96"] .rl-sv__card-scrim {
    background: linear-gradient(to bottom, rgba(24, 46, 150, 0) 0%, rgba(24, 46, 150, 0) 10%, #182e96 55%);
  }
  .rl-sv__card[style*="040b43"] .rl-sv__card-scrim {
    background: linear-gradient(to bottom, rgba(4, 11, 67, 0) 0%, rgba(4, 11, 67, 0) 10%, #040b43 55%);
  }
}

/* ── Small mobile (≤500px): CTA label + phone wrap to 2 lines here, so
   loosen the line-height (was 1, i.e. equal to font-size). ── */
@media (max-width: 31.25rem) {
  .rl-sv__cta { line-height: 1.3; padding: 0.75rem 1.25rem; border-radius: 1rem; }
}

/* ── 320px ── */
@media (max-width: 20rem) {
  .rl-sv__inner   { padding-inline: 0.75rem; }
  .rl-sv__heading { font-size: 1.75rem; }
}