/* Live right-hugging hero, kept for pages whose approved GHL design predates the
   centred hero in src/shared/core.css. Copied from the live page Custom CSS
   (snapshots/2026-09-29); loads after core.css and overrides its hero geometry. */
.rq-redesign-site .hero.hero-with-illo { min-height: 620px; padding: 104px 0 88px; --illo-right: 0px; }
.rq-redesign-site .hero.hero-with-illo .wrap { padding-left: max(clamp(40px, 6vw, 96px), calc(100% - var(--illo-max, 9999px) - 604px)); }
.rq-redesign-site .hero-illo { right: 0; left: max(min(44%, 700px), calc(100% - var(--illo-max, 9999px))); width: auto; background-size: cover; }
@media (max-width: 1100px) {
  .rq-redesign-site .hero-illo { left: 50%; }
}

/* GHL hero illustration geometry.
   Matches the three-phase behavior for 1376x768 hero JPGs:
   reveal more image while widening, stop once full image is visible, then grow
   only the text-side margin. The sizing JS is bundled with each hero snippet. */
.rq-redesign-site .hero.hero-with-illo,
.rq-redesign-site .hero-with-illo {
  --hero-bg: #FDFCFA;
  --hero-bg-rgb: 253, 252, 250;
  --illo-max: 1376px;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

.rq-redesign-site .hero.hero-dark.hero-with-illo,
.rq-redesign-site .hero-dark.hero-with-illo {
  --hero-bg: #2F216E;
  --hero-bg-rgb: 47, 33, 110;
}

.rq-redesign-site .hero.hero-with-illo .hero-illo,
.rq-redesign-site .hero-with-illo .hero-illo {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: max(min(44%, 700px), calc(100% - var(--illo-max, 1376px))) !important;
  width: auto !important;
  height: auto !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  z-index: 0 !important;
  pointer-events: none;
}

.rq-redesign-site .hero.hero-with-illo .hero-illo::before,
.rq-redesign-site .hero-with-illo .hero-illo::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 420px !important;
  background: linear-gradient(
    90deg,
    var(--hero-bg) 0px,
    var(--hero-bg) 70px,
    rgba(var(--hero-bg-rgb), 0.75) 180px,
    rgba(var(--hero-bg-rgb), 0) 400px
  ) !important;
}

.rq-redesign-site .hero.hero-with-illo > .wrap,
.rq-redesign-site .hero-with-illo > .wrap {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: max(clamp(40px, 6vw, 96px), calc(100% - var(--illo-max, 1376px) - 604px)) !important;
  padding-right: clamp(24px, 4vw, 64px) !important;
}

.rq-redesign-site .hero.hero-with-illo h1,
.rq-redesign-site .hero-with-illo h1 {
  max-width: min(700px, calc(min(44vw, 700px) - 24px)) !important;
}

.rq-redesign-site .hero.hero-with-illo .lede,
.rq-redesign-site .hero-with-illo .lede,
.rq-redesign-site .hero.hero-with-illo .hero-meta,
.rq-redesign-site .hero-with-illo .hero-meta {
  max-width: min(620px, calc(min(44vw, 700px) - 24px)) !important;
}

@media (max-width: 860px) {
  .rq-redesign-site .hero.hero-with-illo,
  .rq-redesign-site .hero-with-illo {
    min-height: 0 !important;
    display: block !important;
    padding-bottom: 300px !important;
  }

  .rq-redesign-site .hero.hero-with-illo .hero-illo,
  .rq-redesign-site .hero-with-illo .hero-illo {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 300px !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .rq-redesign-site .hero.hero-with-illo .hero-illo::before,
  .rq-redesign-site .hero-with-illo .hero-illo::before {
    inset: 0 0 auto 0 !important;
    width: auto !important;
    height: 70% !important;
    background: linear-gradient(
      180deg,
      var(--hero-bg) 0%,
      rgba(var(--hero-bg-rgb), 0) 45%
    ) !important;
  }

  .rq-redesign-site .hero.hero-with-illo > .wrap,
  .rq-redesign-site .hero-with-illo > .wrap {
    padding-left: clamp(24px, 7vw, 40px) !important;
    padding-right: clamp(24px, 7vw, 40px) !important;
  }

  .rq-redesign-site .hero.hero-with-illo h1,
  .rq-redesign-site .hero-with-illo h1,
  .rq-redesign-site .hero.hero-with-illo .lede,
  .rq-redesign-site .hero-with-illo .lede,
  .rq-redesign-site .hero.hero-with-illo .hero-meta,
  .rq-redesign-site .hero-with-illo .hero-meta {
    max-width: none !important;
  }
}