/*
 * REALPRO — INTERNAL PAGE BANNERS V1
 * Scope: internal pages only.
 * Home is explicitly excluded and receives no stylesheet enqueue.
 * Client requirement: internal hero -> compact premium masthead/banner.
 */

/* ------------------------------------------------------------
   DESKTOP / LARGE TABLET — INTERNAL PAGE BANNER
   ------------------------------------------------------------ */
html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero {
  min-height: clamp(340px, 28vw, 400px) !important;
  height: clamp(340px, 28vw, 400px) !important;
  max-height: none !important;
  overflow: hidden !important;
}

html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero > .rp-page-hero__content {
  min-height: 100% !important;
  height: 100% !important;
}

html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy {
  min-height: 0 !important;
  height: 100% !important;
  padding-top: clamp(92px, 7vw, 112px) !important;
  padding-bottom: clamp(26px, 2.5vw, 38px) !important;
  justify-content: center !important;
  gap: clamp(7px, .7vw, 11px) !important;
}

html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy .eyebrow {
  margin-bottom: 2px !important;
  font-size: clamp(10px, .7vw, 12px) !important;
  line-height: 1.15 !important;
}

html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
  margin: 0 !important;
  max-width: 18ch !important;
  font-size: clamp(42px, 3.6vw, 58px) !important;
  line-height: .94 !important;
  letter-spacing: -.045em !important;
}

html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
  max-width: 15ch !important;
}

html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
  max-width: 18ch !important;
}

html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
  max-width: 20ch !important;
}

html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy .lead,
html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy > p:not(.eyebrow) {
  max-width: 58ch !important;
  margin-top: 3px !important;
  font-size: clamp(14px, .95vw, 16px) !important;
  line-height: 1.45 !important;
}

html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy .button-row {
  margin-top: clamp(7px, .85vw, 12px) !important;
}

html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy .btn {
  min-height: 46px !important;
  padding-inline: clamp(20px, 1.65vw, 28px) !important;
  font-size: clamp(11px, .72vw, 13px) !important;
}

/* Recompose the shorter photographic crop instead of scaling the old hero. */
html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__media img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  object-fit: cover !important;
  transform: none !important;
  transform-origin: center !important;
}

/* Approved page-specific focal points. */
html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__media img {
  object-position: 60% 44% !important;
}

html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__media img {
  object-position: 61% 50% !important;
}

html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__media img {
  object-position: 58% 46% !important;
}

/* ------------------------------------------------------------
   CONTACT — COMPACT INTERNAL MASTHEAD, CONTENT-AWARE
   ------------------------------------------------------------ */
html body.rp-page-contact main#main > section.rp-contact-hero {
  height: auto !important;
  min-height: clamp(420px, 36vw, 500px) !important;
  max-height: none !important;
  overflow: hidden !important;
}

html body.rp-page-contact main#main > section.rp-contact-hero .rp-contact-hero__content {
  height: auto !important;
  min-height: inherit !important;
  padding-top: clamp(92px, 7vw, 112px) !important;
  padding-bottom: clamp(30px, 3vw, 42px) !important;
  justify-content: center !important;
}

html body.rp-page-contact main#main > section.rp-contact-hero h1,
html body.rp-page-contact main#main > section.rp-contact-hero #rp-contact-title {
  font-size: clamp(40px, 3.5vw, 58px) !important;
  line-height: .94 !important;
}

html body.rp-page-contact main#main > section.rp-contact-hero .rp-contact-hero__content > p:not(.eyebrow) {
  max-width: 58ch !important;
  margin-top: 10px !important;
  font-size: clamp(14px, .95vw, 16px) !important;
  line-height: 1.45 !important;
}

html body.rp-page-contact main#main > section.rp-contact-hero .rp-contact-hero__details {
  margin-top: 16px !important;
  padding-top: 12px !important;
}

/* ------------------------------------------------------------
   CLIENT'S REVISED SERVICES > BRAND IDENTITY ARTWORK
   Preserve complete 16:9 composition.
   ------------------------------------------------------------ */
html body.rp-page-services #brand-identity .rp-services-client-service__media {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  align-self: center !important;
  overflow: hidden !important;
}

html body.rp-page-services #brand-identity .rp-services-client-service__media img {
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

/* ------------------------------------------------------------
   TABLET / MOBILE — NEVER RETURN TO FULL-SCREEN HERO BEHAVIOR
   ------------------------------------------------------------ */
@media (max-width: 980px) {
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero > .rp-page-hero__content {
    height: auto !important;
    min-height: 0 !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: clamp(330px, 66vw, 410px) !important;
    padding: clamp(86px, 13vw, 104px) clamp(20px, 5vw, 38px) clamp(25px, 5vw, 34px) !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    max-width: 15ch !important;
    font-size: clamp(32px, 7.5vw, 44px) !important;
    line-height: .95 !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .lead,
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy > p:not(.eyebrow) {
    max-width: 42ch !important;
    margin-top: 4px !important;
    font-size: clamp(13px, 2.7vw, 15px) !important;
    line-height: 1.43 !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .button-row {
    margin-top: 8px !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .btn {
    min-height: 46px !important;
    padding-inline: 20px !important;
  }

  html body.rp-page-contact main#main > section.rp-contact-hero {
    height: auto !important;
    min-height: 0 !important;
  }

  html body.rp-page-contact main#main > section.rp-contact-hero .rp-contact-hero__content {
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(92px, 14vw, 108px) clamp(20px, 5vw, 38px) 32px !important;
  }

  html body.rp-page-contact main#main > section.rp-contact-hero h1,
  html body.rp-page-contact main#main > section.rp-contact-hero #rp-contact-title {
    max-width: 13ch !important;
    font-size: clamp(32px, 7.8vw, 44px) !important;
  }

  html body.rp-page-contact main#main > section.rp-contact-hero .rp-contact-hero__content > p:not(.eyebrow) {
    max-width: 42ch !important;
    font-size: 14px !important;
    line-height: 1.43 !important;
  }
}

@media (max-width: 520px) {
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy {
    min-height: 0 !important;
    padding: 88px 18px 26px !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    max-width: 15ch !important;
    font-size: clamp(29px, 8.4vw, 38px) !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .lead,
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy > p:not(.eyebrow) {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  html body.rp-page-contact main#main > section.rp-contact-hero .rp-contact-hero__content {
    padding: 92px 18px 28px !important;
  }
}

/* ============================================================
   REALPRO_INTERNAL_BANNERS_VISUAL_REFINEMENT_V2
   STAGING QA AUTHORITY
   Goals:
   - no clipped copy or CTA
   - compact internal mastheads, never full-screen
   - premium typography hierarchy
   - tighter banner -> content transition
   - preserve Home completely
   ============================================================ */

/* ---------- 1. STRUCTURAL SAFETY: CONTENT DEFINES HEIGHT ---------- */
html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero {
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero > .rp-page-hero__content {
  height: auto !important;
  min-height: inherit !important;
  max-height: none !important;
}

html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: inherit !important;
  max-height: none !important;
  justify-content: center !important;
  overflow: visible !important;
  padding-top: clamp(92px, 6.6vw, 108px) !important;
  padding-bottom: clamp(30px, 2.7vw, 40px) !important;
  gap: clamp(7px, .55vw, 10px) !important;
}

/* ---------- 2. PAGE-SPECIFIC COMPACT MASTHEAD HEIGHTS ---------- */
html body.rp-page-about main#main > section.rp-page-hero {
  min-height: clamp(380px, 23vw, 410px) !important;
}

html body.rp-page-services main#main > section.rp-page-hero,
html body.rp-page-process main#main > section.rp-page-hero {
  min-height: clamp(430px, 26vw, 465px) !important;
}

/* ---------- 3. TYPOGRAPHIC HIERARCHY ---------- */
html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy .eyebrow {
  margin: 0 0 4px !important;
  font-size: clamp(10px, .68vw, 12px) !important;
  line-height: 1.2 !important;
  letter-spacing: .22em !important;
}

html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
  margin: 0 !important;
  font-size: clamp(42px, 3.25vw, 56px) !important;
  line-height: .96 !important;
  letter-spacing: -.04em !important;
  text-wrap: balance !important;
  overflow: visible !important;
}

html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
  max-width: 14ch !important;
}

html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
  max-width: 17ch !important;
}

html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
  max-width: 18ch !important;
}

html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy .lead,
html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy > p:not(.eyebrow) {
  width: min(100%, 64ch) !important;
  max-width: 64ch !important;
  margin: 5px 0 0 !important;
  font-size: clamp(14px, .93vw, 16px) !important;
  line-height: 1.48 !important;
  text-wrap: pretty !important;
  overflow: visible !important;
}

/* ---------- 4. CTA: ALWAYS FULLY VISIBLE ---------- */
html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy .button-row {
  position: relative !important;
  margin: 10px 0 0 !important;
  padding: 0 0 3px !important;
  overflow: visible !important;
}

html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy .btn {
  min-height: 46px !important;
  padding: 13px clamp(20px, 1.55vw, 27px) !important;
  line-height: 1.15 !important;
}

/* ---------- 5. SHORTER-CROP IMAGE RECOMPOSITION ---------- */
html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__media,
html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__media picture {
  height: 100% !important;
  min-height: 100% !important;
}

html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__media img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  transform: none !important;
}

html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__media img {
  object-position: 60% 44% !important;
}

html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__media img {
  object-position: 62% 50% !important;
}

html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__media img {
  object-position: 58% 46% !important;
}

/* ---------- 6. BANNER -> FIRST CONTENT SECTION RHYTHM ---------- */
html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero + section {
  margin-top: 0 !important;
  padding-top: clamp(58px, 4.2vw, 76px) !important;
}

html body.rp-page-services main#main > section.rp-page-hero + #brand-identity {
  padding-top: clamp(54px, 4vw, 70px) !important;
}

/* Brand Identity remains complete and visually integrated. */
html body.rp-page-services #brand-identity .rp-services-client-service__grid {
  align-items: center !important;
  column-gap: clamp(40px, 5vw, 88px) !important;
}

html body.rp-page-services #brand-identity .rp-services-client-service__media {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body.rp-page-services #brand-identity .rp-services-client-service__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

/* ---------- 7. TABLET ---------- */
@media (max-width: 980px) {
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero > .rp-page-hero__content,
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy {
    padding: clamp(96px, 12vw, 112px) clamp(22px, 5vw, 40px) clamp(30px, 5vw, 40px) !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    max-width: 16ch !important;
    font-size: clamp(34px, 6.4vw, 46px) !important;
    line-height: .97 !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .lead,
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy > p:not(.eyebrow) {
    width: min(100%, 48ch) !important;
    max-width: 48ch !important;
    font-size: 14px !important;
    line-height: 1.46 !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero + section {
    padding-top: clamp(48px, 7vw, 64px) !important;
  }

  html body.rp-page-services main#main > section.rp-page-hero + #brand-identity {
    padding-top: clamp(46px, 6.5vw, 60px) !important;
  }
}

/* ---------- 8. MOBILE ---------- */
@media (max-width: 640px) {
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy {
    padding: 92px 18px 28px !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 7px !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .eyebrow {
    margin-bottom: 2px !important;
    font-size: 10px !important;
    letter-spacing: .18em !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    max-width: 15ch !important;
    font-size: clamp(30px, 8.2vw, 38px) !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .lead,
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy > p:not(.eyebrow) {
    width: 100% !important;
    max-width: 42ch !important;
    margin-top: 4px !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .button-row {
    margin-top: 9px !important;
    padding-bottom: 2px !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .btn {
    min-height: 44px !important;
    padding: 12px 18px !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero + section {
    padding-top: 44px !important;
  }

  html body.rp-page-services main#main > section.rp-page-hero + #brand-identity {
    padding-top: 42px !important;
  }

  html body.rp-page-services #brand-identity .rp-services-client-service__grid {
    row-gap: 28px !important;
  }
}

/* Very narrow devices: never sacrifice copy to chase a fixed hero height. */
@media (max-width: 390px) {
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy {
    padding: 88px 16px 26px !important;
  }

  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    font-size: clamp(28px, 8.6vw, 34px) !important;
  }
}

/* ============================================================
   REALPRO_INTERNAL_TITLE_SCALE_V2
   SCOPE: internal banner H1 size/hierarchy only.
   No copy, spacing system, imagery, Home, DB, or Live changes.
   ============================================================ */

/* Desktop */
@media (min-width: 981px) {
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    font-size: clamp(58px, 4vw, 72px) !important;
    line-height: .92 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance !important;
    overflow: visible !important;
  }

  html body.rp-page-about
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-about
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    max-width: 15ch !important;
  }

  html body.rp-page-services
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-services
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-process
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-process
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    max-width: 18.5ch !important;
  }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 980px) {
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    font-size: clamp(46px, 6.4vw, 58px) !important;
    line-height: .94 !important;
    letter-spacing: -.04em !important;
    max-width: 16ch !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    font-size: clamp(36px, 10vw, 44px) !important;
    line-height: .94 !important;
    letter-spacing: -.04em !important;
    max-width: 15ch !important;
  }
}

@media (max-width: 390px) {
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    font-size: clamp(34px, 10.4vw, 40px) !important;
  }
}

/* ============================================================
   REALPRO_INTERNAL_BANNER_TITLE_SCALE_V3
   Title hierarchy refinement only.
   Goal: internal H1 must read as the dominant page heading
   without clipping, overflow or Home impact.
   ============================================================ */

/* Desktop / large screens */
html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
  font-size: clamp(58px, 4.25vw, 72px) !important;
  line-height: .92 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance !important;
  overflow: visible !important;
}

/* About can carry a slightly stronger editorial scale. */
html body.rp-page-about
main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-about
main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
  max-width: 13ch !important;
  font-size: clamp(60px, 4.4vw, 74px) !important;
}

/* Services: large, but controlled so the red emphasis remains balanced. */
html body.rp-page-services
main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-services
main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
  max-width: 16ch !important;
  font-size: clamp(56px, 4.05vw, 70px) !important;
}

/* Process: preserve clear multi-line reading without visual shrinking. */
html body.rp-page-process
main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-process
main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
  max-width: 17ch !important;
  font-size: clamp(56px, 4vw, 70px) !important;
}

/* Tablet */
@media (max-width: 980px) {
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    font-size: clamp(46px, 6.7vw, 58px) !important;
    line-height: .94 !important;
    max-width: 15ch !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    font-size: clamp(36px, 9.3vw, 46px) !important;
    line-height: .95 !important;
    letter-spacing: -.04em !important;
    max-width: 14ch !important;
  }
}

/* Narrow phones */
@media (max-width: 390px) {
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body:not(.rp-page-index):not(.home-model-page):not(.rp-page-contact)
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    font-size: clamp(33px, 9vw, 40px) !important;
    max-width: 14ch !important;
  }
}

/* ============================================================
   REALPRO_INTERNAL_PAGE_NAME_H1_V4
   Client-facing hierarchy:
   - page name is the dominant H1
   - descriptive lead remains intact
   - existing CTA remains intact
   - existing compact banner height remains intact
   - Home remains excluded
   ============================================================ */

/* Remove the secondary eyebrow visually on the three primary internal pages.
   Markup is preserved for rollback/content integrity. */
html body.rp-page-about
main#main > section.rp-page-hero .rp-page-hero__copy > .eyebrow,
html body.rp-page-services
main#main > section.rp-page-hero .rp-page-hero__copy > .eyebrow,
html body.rp-page-process
main#main > section.rp-page-hero .rp-page-hero__copy > .eyebrow {
  display: none !important;
}

/* One-word page names become the clear dominant brand-scale H1.
   We do NOT change the banner's client-approved compact height here. */
html body.rp-page-about
main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-about
main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
html body.rp-page-services
main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-services
main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
html body.rp-page-process
main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-process
main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  font-size: clamp(76px, 6.4vw, 112px) !important;
  line-height: .86 !important;
  letter-spacing: -.055em !important;
  text-transform: uppercase !important;
  text-wrap: nowrap !important;
  overflow: visible !important;
}

/* The descriptive sentence becomes the secondary layer, not a competing title. */
html body.rp-page-about
main#main > section.rp-page-hero .rp-page-hero__copy .lead,
html body.rp-page-services
main#main > section.rp-page-hero .rp-page-hero__copy .lead,
html body.rp-page-process
main#main > section.rp-page-hero .rp-page-hero__copy .lead {
  width: min(100%, 62ch) !important;
  max-width: 62ch !important;
  margin: 14px 0 0 !important;
  font-size: clamp(15px, 1vw, 17px) !important;
  line-height: 1.5 !important;
  text-wrap: pretty !important;
}

/* Existing CTA remains functional and gets a clean relationship to the lead. */
html body.rp-page-services
main#main > section.rp-page-hero .rp-page-hero__copy .button-row,
html body.rp-page-process
main#main > section.rp-page-hero .rp-page-hero__copy .button-row {
  margin-top: 16px !important;
}

/* Tablet */
@media (max-width: 980px) {
  html body.rp-page-about
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-about
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-services
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-services
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-process
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-process
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    font-size: clamp(60px, 10vw, 82px) !important;
    line-height: .88 !important;
    text-wrap: nowrap !important;
  }

  html body.rp-page-about
  main#main > section.rp-page-hero .rp-page-hero__copy .lead,
  html body.rp-page-services
  main#main > section.rp-page-hero .rp-page-hero__copy .lead,
  html body.rp-page-process
  main#main > section.rp-page-hero .rp-page-hero__copy .lead {
    max-width: 48ch !important;
    margin-top: 12px !important;
    font-size: 14px !important;
  }
}

/* Mobile: preserve strong hierarchy without allowing horizontal clipping. */
@media (max-width: 640px) {
  html body.rp-page-about
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-about
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-services
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-services
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-process
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-process
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    max-width: 100% !important;
    font-size: clamp(48px, 15vw, 68px) !important;
    line-height: .9 !important;
    letter-spacing: -.05em !important;
    text-wrap: nowrap !important;
  }

  html body.rp-page-about
  main#main > section.rp-page-hero .rp-page-hero__copy .lead,
  html body.rp-page-services
  main#main > section.rp-page-hero .rp-page-hero__copy .lead,
  html body.rp-page-process
  main#main > section.rp-page-hero .rp-page-hero__copy .lead {
    width: 100% !important;
    max-width: 40ch !important;
    margin-top: 10px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
}

/* Very narrow phones: the page name still stays on one line. */
@media (max-width: 390px) {
  html body.rp-page-about
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-about
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-services
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-services
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-process
  main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-process
  main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    font-size: clamp(42px, 14.5vw, 58px) !important;
  }
}

/* ============================================================
   REALPRO_INTERNAL_MASTHEAD_FINAL_V5
   Final internal-page masthead system.
   Reference principles: oversized section-opening typography,
   restrained supporting UI, editorial photography, consistent
   modular proportions.
   Home is explicitly excluded.
   ============================================================ */

/* ------------------------------------------------------------
   DESKTOP: approximately one-third of the visible viewport.
   33.333svh is the design target; 280–360px guardrails prevent
   short/very-tall screens from harming legibility.
   ------------------------------------------------------------ */
html body.rp-page-about main#main > section.rp-page-hero,
html body.rp-page-services main#main > section.rp-page-hero,
html body.rp-page-process main#main > section.rp-page-hero {
  box-sizing: border-box !important;
  height: clamp(280px, 33.333svh, 360px) !important;
  min-height: clamp(280px, 33.333svh, 360px) !important;
  max-height: clamp(280px, 33.333svh, 360px) !important;
  overflow: hidden !important;
}

html body.rp-page-about main#main > section.rp-page-hero > .rp-page-hero__content,
html body.rp-page-services main#main > section.rp-page-hero > .rp-page-hero__content,
html body.rp-page-process main#main > section.rp-page-hero > .rp-page-hero__content {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Anchor the masthead typography to the lower-left editorial zone. */
html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding-top: 78px !important;
  padding-bottom: clamp(22px, 2.2vw, 32px) !important;
  overflow: visible !important;
}

/* The page name is the only dominant typographic statement. */
html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(104px, 7.6vw, 144px) !important;
  font-weight: 800 !important;
  line-height: .82 !important;
  letter-spacing: -.062em !important;
  text-transform: uppercase !important;
  text-wrap: nowrap !important;
  overflow: visible !important;
}

/* V5 intentionally removes the descriptive legend from the visual masthead.
   The source copy remains untouched for rollback/content integrity. */
html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy .lead,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .lead,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .lead {
  display: none !important;
}

/* The old eyebrow also remains in source but is not part of the final masthead. */
html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy > .eyebrow,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy > .eyebrow,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy > .eyebrow {
  display: none !important;
}

/* Keep existing conversion CTA on Services and Process, subordinate to H1. */
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .button-row,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .button-row {
  display: flex !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .btn,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .btn {
  min-height: 42px !important;
  padding: 11px 20px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

/* Recompose photography inside the shorter editorial crop. */
html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__media,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__media,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__media,
html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__media picture,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__media picture,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__media picture {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__media img,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__media img,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__media img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  transform: none !important;
}

html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__media img {
  object-position: 60% 44% !important;
}

html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__media img {
  object-position: 62% 50% !important;
}

html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__media img {
  object-position: 58% 46% !important;
}

/* Tight, deliberate hand-off into page content. */
html body.rp-page-about main#main > section.rp-page-hero + section,
html body.rp-page-services main#main > section.rp-page-hero + section,
html body.rp-page-process main#main > section.rp-page-hero + section {
  margin-top: 0 !important;
  padding-top: clamp(44px, 3.4vw, 60px) !important;
}

/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */
@media (max-width: 980px) {
  html body.rp-page-about main#main > section.rp-page-hero,
  html body.rp-page-services main#main > section.rp-page-hero,
  html body.rp-page-process main#main > section.rp-page-hero {
    height: clamp(270px, 35svh, 330px) !important;
    min-height: clamp(270px, 35svh, 330px) !important;
    max-height: clamp(270px, 35svh, 330px) !important;
  }

  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy {
    padding: 74px clamp(22px, 5vw, 40px) 24px !important;
  }

  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    font-size: clamp(76px, 11.4vw, 108px) !important;
    line-height: .84 !important;
  }

  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .button-row,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .button-row {
    margin-top: 13px !important;
  }
}

/* ------------------------------------------------------------
   MOBILE
   Exact 1/3 is relaxed slightly only when needed to preserve the
   no-clipping rule and the fixed header/CTA touch target.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  html body.rp-page-about main#main > section.rp-page-hero,
  html body.rp-page-services main#main > section.rp-page-hero,
  html body.rp-page-process main#main > section.rp-page-hero {
    height: clamp(250px, 36svh, 300px) !important;
    min-height: clamp(250px, 36svh, 300px) !important;
    max-height: clamp(250px, 36svh, 300px) !important;
  }

  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy {
    padding: 76px 18px 22px !important;
  }

  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    max-width: 100% !important;
    font-size: clamp(54px, 16vw, 76px) !important;
    line-height: .86 !important;
    letter-spacing: -.055em !important;
    text-wrap: nowrap !important;
  }

  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .button-row,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .button-row {
    margin-top: 12px !important;
  }

  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .btn,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .btn {
    min-height: 42px !important;
    padding: 11px 17px !important;
  }

  html body.rp-page-about main#main > section.rp-page-hero + section,
  html body.rp-page-services main#main > section.rp-page-hero + section,
  html body.rp-page-process main#main > section.rp-page-hero + section {
    padding-top: 40px !important;
  }
}

@media (max-width: 390px) {
  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    font-size: clamp(48px, 15vw, 64px) !important;
  }
}

/* ============================================================
   REALPRO_INTERNAL_MASTHEAD_FINAL_V6
   Final hierarchy:
   - large brand-scale page-name H1
   - descriptive legend restored
   - hero CTAs removed on Services and Process
   - compact internal masthead, approx. 1/3 viewport
   - Home excluded
   ============================================================ */

/* 1. Compact masthead, following the client's ~1/3-screen direction. */
html body.rp-page-about main#main > section.rp-page-hero,
html body.rp-page-services main#main > section.rp-page-hero,
html body.rp-page-process main#main > section.rp-page-hero {
  box-sizing: border-box !important;
  height: clamp(300px, 33.333svh, 370px) !important;
  min-height: clamp(300px, 33.333svh, 370px) !important;
  max-height: clamp(300px, 33.333svh, 370px) !important;
  overflow: hidden !important;
}

html body.rp-page-about main#main > section.rp-page-hero > .rp-page-hero__content,
html body.rp-page-services main#main > section.rp-page-hero > .rp-page-hero__content,
html body.rp-page-process main#main > section.rp-page-hero > .rp-page-hero__content {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* 2. Editorial lower-left composition. */
html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding-top: 76px !important;
  padding-bottom: clamp(26px, 2.4vw, 36px) !important;
  overflow: visible !important;
}

/* 3. Remove small eyebrow so nothing competes with the page name. */
html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy > .eyebrow,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy > .eyebrow,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy > .eyebrow {
  display: none !important;
}

/* 4. Page-name H1 becomes the dominant brand statement. */
html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy h1,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(108px, 7.9vw, 148px) !important;
  font-weight: 800 !important;
  line-height: .84 !important;
  letter-spacing: -.062em !important;
  text-transform: uppercase !important;
  text-wrap: nowrap !important;
  overflow: visible !important;
}

/* 5. Restore descriptive legend as a restrained secondary layer. */
html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy .lead,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .lead,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .lead {
  display: block !important;
  width: min(100%, 62ch) !important;
  max-width: 62ch !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  font-size: clamp(15px, .98vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.48 !important;
  letter-spacing: 0 !important;
  text-wrap: pretty !important;
  overflow: visible !important;
}

/* 6. Remove hero CTAs from Services and Process only.
      Underlying page/service CTAs elsewhere remain untouched. */
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .button-row,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .button-row {
  display: none !important;
}

/* 7. Preserve cinematic crop inside the shorter banner. */
html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__media,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__media,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__media,
html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__media picture,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__media picture,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__media picture {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__media img,
html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__media img,
html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__media img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  transform: none !important;
}

html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__media img {
  object-position: 60% 44% !important;
}

html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__media img {
  object-position: 62% 50% !important;
}

html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__media img {
  object-position: 58% 46% !important;
}

/* 8. Clean transition to the following page content. */
html body.rp-page-about main#main > section.rp-page-hero + section,
html body.rp-page-services main#main > section.rp-page-hero + section,
html body.rp-page-process main#main > section.rp-page-hero + section {
  margin-top: 0 !important;
  padding-top: clamp(44px, 3.2vw, 58px) !important;
}

/* TABLET */
@media (max-width: 980px) {
  html body.rp-page-about main#main > section.rp-page-hero,
  html body.rp-page-services main#main > section.rp-page-hero,
  html body.rp-page-process main#main > section.rp-page-hero {
    height: clamp(285px, 35svh, 340px) !important;
    min-height: clamp(285px, 35svh, 340px) !important;
    max-height: clamp(285px, 35svh, 340px) !important;
  }

  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy {
    padding: 74px clamp(22px, 5vw, 40px) 26px !important;
  }

  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    font-size: clamp(78px, 11.5vw, 110px) !important;
    line-height: .85 !important;
  }

  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy .lead,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .lead,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .lead {
    max-width: 50ch !important;
    margin-top: 13px !important;
    font-size: 14px !important;
    line-height: 1.46 !important;
  }
}

/* MOBILE */
@media (max-width: 640px) {
  html body.rp-page-about main#main > section.rp-page-hero,
  html body.rp-page-services main#main > section.rp-page-hero,
  html body.rp-page-process main#main > section.rp-page-hero {
    height: clamp(270px, 38svh, 315px) !important;
    min-height: clamp(270px, 38svh, 315px) !important;
    max-height: clamp(270px, 38svh, 315px) !important;
  }

  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy {
    padding: 76px 18px 24px !important;
  }

  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    max-width: 100% !important;
    font-size: clamp(56px, 16.5vw, 78px) !important;
    line-height: .87 !important;
    letter-spacing: -.055em !important;
    text-wrap: nowrap !important;
  }

  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy .lead,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .lead,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .lead {
    width: 100% !important;
    max-width: 38ch !important;
    margin-top: 11px !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  html body.rp-page-about main#main > section.rp-page-hero + section,
  html body.rp-page-services main#main > section.rp-page-hero + section,
  html body.rp-page-process main#main > section.rp-page-hero + section {
    padding-top: 40px !important;
  }
}

@media (max-width: 390px) {
  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy h1,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .rp-unified-hero-title {
    font-size: clamp(50px, 15.5vw, 66px) !important;
  }

  html body.rp-page-about main#main > section.rp-page-hero .rp-page-hero__copy .lead,
  html body.rp-page-services main#main > section.rp-page-hero .rp-page-hero__copy .lead,
  html body.rp-page-process main#main > section.rp-page-hero .rp-page-hero__copy .lead {
    max-width: 34ch !important;
    font-size: 12.5px !important;
  }
}

/* ============================================================
   REALPRO_INTERNAL_WHITE_REVEAL_BAND_V7
   Purpose:
   - standardize a clean white transition area after the
     internal masthead on About / Services / Process
   - keep real page content physically below that area
   - allow the site's existing section IntersectionObserver
     system to reveal content naturally as the user scrolls
   - no new animation engine; no duplicate observer
   ============================================================ */

html body.rp-page-about .rp-internal-reveal-band,
html body.rp-page-services .rp-internal-reveal-band,
html body.rp-page-process .rp-internal-reveal-band {
  display: block !important;
  width: 100% !important;
  height: clamp(130px, 17svh, 190px) !important;
  min-height: clamp(130px, 17svh, 190px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #fff !important;
  pointer-events: none !important;
}

/* The actual first content section starts after the white band.
   Remove any artificial top offset previously used as a spacer;
   keep only the section's own editorial breathing room. */
html body.rp-page-about main#main > .rp-internal-reveal-band + section,
html body.rp-page-services main#main > .rp-internal-reveal-band + section,
html body.rp-page-process main#main > .rp-internal-reveal-band + section {
  margin-top: 0 !important;
  padding-top: clamp(52px, 4vw, 72px) !important;
}

/* Tablet */
@media (max-width: 980px) {
  html body.rp-page-about .rp-internal-reveal-band,
  html body.rp-page-services .rp-internal-reveal-band,
  html body.rp-page-process .rp-internal-reveal-band {
    height: clamp(110px, 14svh, 150px) !important;
    min-height: clamp(110px, 14svh, 150px) !important;
  }

  html body.rp-page-about main#main > .rp-internal-reveal-band + section,
  html body.rp-page-services main#main > .rp-internal-reveal-band + section,
  html body.rp-page-process main#main > .rp-internal-reveal-band + section {
    padding-top: clamp(46px, 6vw, 62px) !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  html body.rp-page-about .rp-internal-reveal-band,
  html body.rp-page-services .rp-internal-reveal-band,
  html body.rp-page-process .rp-internal-reveal-band {
    height: clamp(82px, 12svh, 112px) !important;
    min-height: clamp(82px, 12svh, 112px) !important;
  }

  html body.rp-page-about main#main > .rp-internal-reveal-band + section,
  html body.rp-page-services main#main > .rp-internal-reveal-band + section,
  html body.rp-page-process main#main > .rp-internal-reveal-band + section {
    padding-top: 42px !important;
  }
}

/* Reduced motion:
   the existing motion system is responsible for disabling reveal
   transforms. The white structural band remains unchanged. */
@media (prefers-reduced-motion: reduce) {
  .rp-internal-reveal-band {
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   REALPRO_BRAND_IDENTITY_EXACT_IMAGE_FIT_V8
   Exact user-provided artwork.
   No regeneration. No crop. No color change. No added elements.
   ============================================================ */

html body.rp-page-services #brand-identity .rp-services-client-service__grid {
  align-items: center !important;
}

/* Neutralize any previous fixed/tall media geometry. */
html body.rp-page-services #brand-identity .rp-services-client-service__media {
  position: relative !important;
  align-self: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  background: transparent !important;
}

/* Neutralize picture wrappers that could force cover behavior. */
html body.rp-page-services #brand-identity .rp-services-client-service__media picture {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
}

/* Show the exact 2048x1152 artwork in its native 16:9 ratio. */
html body.rp-page-services #brand-identity .rp-services-client-service__media img {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  margin: 0 auto !important;
  border-radius: inherit !important;
}

/* Ensure no inherited pseudo-layer masks the artwork edges. */
html body.rp-page-services #brand-identity .rp-services-client-service__media::before,
html body.rp-page-services #brand-identity .rp-services-client-service__media::after {
  clip-path: none !important;
}

/* Tablet/mobile keep the exact same full-image behavior. */
@media (max-width: 980px) {
  html body.rp-page-services #brand-identity .rp-services-client-service__media,
  html body.rp-page-services #brand-identity .rp-services-client-service__media picture,
  html body.rp-page-services #brand-identity .rp-services-client-service__media img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* ============================================================
   REALPRO_SERVICES_MEDIA_STANDARD_V9
   Standard visual system for ALL Services media cards:
   - identical 16:9 presentation frame
   - no crop
   - object-fit: contain
   - consistent inner safe area
   - same rounded-card proportions
   - light/dark surface awareness
   ============================================================ */

/* Consistent media frame geometry across every Services section. */
html body.rp-page-services .rp-services-client-service__media {
  box-sizing: border-box !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
  padding: clamp(12px, .9vw, 18px) !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(20, 34, 58, .10) !important;
  box-shadow: 0 18px 48px rgba(7, 17, 31, .10) !important;
}

/* Surface-aware framing keeps images visually integrated. */
html body.rp-page-services .rp-services-client-service--light .rp-services-client-service__media {
  background: #ffffff !important;
}

html body.rp-page-services .rp-services-client-service--dark .rp-services-client-service__media {
  background: #081629 !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* picture wrappers must not impose crop or fixed heights. */
html body.rp-page-services .rp-services-client-service__media picture {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
}

/* Exact full-image visibility for every service visual. */
html body.rp-page-services .rp-services-client-service__media img,
html body.rp-page-services .rp-services-client-service__media img.image-cover {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  scale: 1 !important;
  margin: 0 auto !important;
  filter: none !important;
}

/* Neutralize inherited masks/overlays that visually trim the media edges. */
html body.rp-page-services .rp-services-client-service__media::before,
html body.rp-page-services .rp-services-client-service__media::after {
  display: none !important;
  content: none !important;
}

/* Keep the media column visually consistent with the copy column. */
html body.rp-page-services .rp-services-client-service__grid {
  align-items: center !important;
}

/* Tablet */
@media (max-width: 980px) {
  html body.rp-page-services .rp-services-client-service__media {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    padding: 12px !important;
    border-radius: 24px !important;
  }

  html body.rp-page-services .rp-services-client-service__media picture,
  html body.rp-page-services .rp-services-client-service__media img,
  html body.rp-page-services .rp-services-client-service__media img.image-cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  html body.rp-page-services .rp-services-client-service__media {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    padding: 9px !important;
    border-radius: 20px !important;
  }

  html body.rp-page-services .rp-services-client-service__media picture,
  html body.rp-page-services .rp-services-client-service__media img,
  html body.rp-page-services .rp-services-client-service__media img.image-cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}