/* Ridgeline Hero (Fold). rem-only (non-rem units only in media-query conditions). */

.rl-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100svh;            /* full-screen fold */
  color: var(--rl-white);
  /* True full-bleed: escape the constrained post-content width + global padding. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Spacing — editor-controlled CSS vars (rem), with desktop defaults as fallback. */
  padding-top:    var(--rl-hero-pt, 10rem);
  padding-bottom: var(--rl-hero-pb, 4.5rem);
  padding-left:   var(--rl-hero-pl, 2.5rem);
  padding-right:  var(--rl-hero-pr, 2.5rem);
  margin-top:     var(--rl-hero-mt, 0rem);
  margin-bottom:  var(--rl-hero-mb, 0rem);
}

/* Background image (LCP) — full bleed */
.rl-hero__bg {
  position: absolute;
  inset: 0rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  z-index: -2;
}
.rl-hero__scrim {
  position: absolute;
  inset: 0rem;
  z-index: -1;
  /* Same structure/opacities as before -- only the color changed, from
     the much-darker near-black navy #0e1344 to the brand blue #182e96
     Figma (node 2055-5) actually uses for this overlay. */
  background:
    linear-gradient(180deg, rgba(24, 46, 150, 0.25) 0%, rgba(24, 46, 150, 0.10) 35%, rgba(24, 46, 150, 0.30) 100%),
    linear-gradient(90deg, rgba(24, 46, 150, 0.88) 0%, rgba(24, 46, 150, 0.55) 42%, rgba(24, 46, 150, 0.15) 100%);
}

/* Inner column */
.rl-hero__inner {
  width: 100%;
  max-width: 78.4375rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.5rem;
}

/* ── Intro ── */
.rl-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  width: 100%;
}
.rl-hero__eyebrow {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35rem;
  letter-spacing: 0.0125rem;
}
.rl-hero__eyebrow-accent { color: var(--rl-gold); font-weight: 700; }

/* The audience clause sits on its own line at a smaller size, so the
   headline reads as one strong statement plus a qualifier rather than one
   very long sentence. Still a single H1. */
.rl-hero__title-sub {
  display: block;
  font-size: 0.62em;
  line-height: 1.2;
  margin-top: 0.35rem;
}

.rl-hero__title {
  font-family: var(--rl-font-heading);
  font-size: 4.25rem;
  font-weight: 700;
  line-height: 4.59rem;
  letter-spacing: -0.0425rem;
  max-width: 77.1875rem;
  margin-top: 0.25rem;
}
.rl-hero__lead {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.61rem;
  max-width: 64.5625rem;
  margin-top: 0.5rem;
}

.rl-hero__cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.rl-hero__hours {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.14rem;
  margin-top: 0.5rem;
}
.rl-hero__hours b { font-weight: 700; }

/* ── Buttons ── */
.rl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  font-family: var(--rl-font-body);
  font-weight: 500;
  border-radius: 2.6875rem;
  padding: 0.75rem 1.75rem;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.rl-btn .rl-arrow { width: 1.5rem; height: 1.5rem; }

.rl-btn--gold {
  background: var(--rl-gold);
  color: var(--rl-navy-deep);
  font-size: 1.125rem;
  line-height: 1.125rem;
}
/* Gold buttons on a dark ground flip to white, not to a darker gold.
   #d49a23 was a dim, not a state change. Navy or black would be a real
   colour change on a light section, but these two sit on #040b43, where
   a dark fill makes the button lose its shape entirely. White on navy is
   ~18:1 and matches .rl-ic--bar, which already hovers this way. */
.rl-btn--gold:hover,
.rl-btn--gold:focus-visible { background: #000000; color: var(--rl-white, #ffffff); }
.rl-btn--gold:active { background: #eef4ff; color: var(--rl-navy-deep, #040b43); }

.rl-btn--ghost {
  background: transparent;
  color: var(--rl-white);
  font-size: 1.5rem;
  line-height: 1.5rem;
  font-weight: 600;
  padding-left: 1.75rem;
  padding-right: 0.75rem;
}
.rl-btn--ghost .rl-arrow { width: 2.25rem; height: 2.25rem; }
.rl-btn--ghost:hover,
.rl-btn--ghost:focus-visible {
  background: #000000;
  color: var(--rl-white, #ffffff);
  border-color: #000000;
}

.rl-btn--white {
  background: var(--rl-white);
  color: var(--rl-navy);
  font-size: 1rem;
  line-height: 1rem;
}
.rl-btn--white:hover { background: #000000; color: var(--rl-white, #ffffff); }

/* ── Cards ── */
.rl-hero__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8125rem;
  width: 100%;
  max-width: 72.25rem;
  margin-inline: auto;
}
.rl-card {
  min-height: 15.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 2.125rem 1.375rem 1.875rem;
  border-radius: 1.5625rem;
  background: rgba(0, 0, 0, 0.18);
  border: 0.0625rem solid rgba(255, 255, 255, 0.26);
  -webkit-backdrop-filter: blur(0.78rem);
  backdrop-filter: blur(0.78rem);
}
.rl-card__body { display: flex; flex-direction: column; gap: 0.5rem; }
.rl-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.65rem;
}
.rl-card__desc {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.41rem;
}
.rl-card__btn {
  width: 100%;
  font-size: 1rem;
  line-height: 1rem;
  padding: 0.625rem 1.5rem;
}

/* ── Closing CTA ── */
.rl-hero__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.rl-hero__bottom-title { font-size: 1.5rem; font-weight: 700; line-height: 1.65rem; }
.rl-hero__bottom-sub   { font-size: 1rem; font-weight: 400; line-height: 1.4rem; }
.rl-hero__bottom .rl-btn { margin-top: 1rem; }

/* ── Tablet ── */
@media (max-width: 64rem) {
  .rl-hero__title { font-size: 3rem; line-height: 3.3rem; }
  .rl-hero__cards { grid-template-columns: 1fr; max-width: 100%; gap: 1.25rem; }
}

/* ── 320px: prevent any overflow ── */
@media (max-width: 20rem) {
  .rl-hero__title { font-size: 1.75rem; line-height: 2rem; }
  .rl-hero__inner { gap: 2rem; }
  .rl-card { padding: 1.5rem 1rem 1.25rem; min-height: auto; }
  .rl-btn--ghost { font-size: 1.125rem; }
  .rl-btn { white-space: normal; text-align: center; }
}

/* ── Mobile ── */
@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-hero .rl-hero__inner { row-gap: 1.5rem; }   /* was 3rem */

  /* Mobile title->text rhythm, site-wide values. */
  .rl-hero .rl-card__body { row-gap: 0.75rem; }   /* card title -> desc (was 0.5rem) */

  .rl-arrow { display: none; }
  .rl-hero {
    padding-top:    var(--rl-hero-pt-m, var(--rl-hero-pt, 6rem));
    padding-bottom: var(--rl-hero-pb-m, var(--rl-hero-pb, 1.40625rem));
    padding-left:   var(--rl-hero-pl-m, var(--rl-hero-pl, 1.25rem));
    padding-right:  var(--rl-hero-pr-m, var(--rl-hero-pr, 1.25rem));
    margin-top:     var(--rl-hero-mt-m, var(--rl-hero-mt, 0rem));
    margin-bottom:  var(--rl-hero-mb-m, var(--rl-hero-mb, 0rem));
  }
  .rl-hero__inner { gap: 3rem; }
  .rl-hero__title { font-size: 2.25rem; line-height: 2.59rem; }
  .rl-hero__lead { font-size: 0.9375rem; }
  .rl-hero__eyebrow { font-size: 1rem; }

  .rl-hero__cta { flex-direction: column; width: 100%; gap: 0.5rem; }
  .rl-hero__cta .rl-btn { width: 100%; }
  .rl-btn--ghost { font-size: 1.25rem; line-height: 1.25rem; }

  .rl-hero__cards { max-width: 100%; }

  .rl-hero__bottom { width: 100%; }
  .rl-hero__bottom .rl-btn { width: 100%; justify-content: center; }

  .rl-hero__scrim {
    background: linear-gradient(180deg, rgba(24,46,150,0.65) 0%, rgba(24,46,150,0.45) 60%, rgba(24,46,150,0.7) 100%);
  }
}

/* ── Small mobile (≤500px): the bottom CTA's long phone number wraps to
   2 lines here, so loosen the line-height (was 1, i.e. equal to
   font-size) to keep the wrapped lines from crowding the arrow icon. ── */
@media (max-width: 31.25rem) {
  .rl-hero__bottom .rl-btn { line-height: 1.3; padding: 0.75rem 1.5rem; border-radius: 1rem; }
}