/* components/relo-hero.css — scoped hook for .rp-relo-hero (Relocation hero, Figma 16781:39663).
   Loaded via inc/kadence-relo-hero.php (presence-gated, EN + AR). Cowork owns styling
   (relo reuses lp/cor structure). Hero layout/bg come from shared Webflow hero classes;
   only the immigration mock needs capping so it doesn't over-upscale. RTL in -rtl. */

.rp-relo-hero .main-hero-section-img,
.rp-relo-hero img[src*="relo-hero-immigration-mock"] {
  max-width: 620px;
  width: 100%;
  height: auto;
}

/* ── Surgical pass 2026-06-30 (Immigration QA, Figma 16781:39663) ─────────────────────────────
   #1 HERO: the canonical H1 is larger (wraps to 4 lines, "visa headaches" blue) and the hero band
   has more top breathing room than the live build. Bump the H1 + add top padding (scoped to
   .rp-relo-hero so no other landing page is touched). */
.rp-relo-hero .lp-hero-title,
.rp-relo-hero h1.double-slide-landing-page-left-main-header {
  font-size: 42px;
  line-height: 1.18;
  letter-spacing: -0.5px;
  max-width: 560px;  /* ~ the canonical hero column; bigger H1 + sentence case (capitalize undone below) */
}
.rp-relo-hero.new_rp_hero_double_section,
.rp-relo-hero .new_rp_hero_double_section,
.rp-relo-hero.adjust-padding {
  padding-top: 56px;
}

/* #5 CASING: migration.css:1310 forces `text-transform: capitalize` on the
   .new_landing_page_payroll_header…new-rp-section-header chain, visually Title-Casing the
   (sentence-case) DB copy. The canonical is sentence case — undo the transform for the relocation
   page only. Section headers live in the pain/intro/features/how-it-works/countries/cta patterns;
   this file (relo-hero.css) always loads on the page, so the override reaches them. The hero brands
   label gets the same fix. */
.rp-relo-hero .new_landing_page_brands_header,
.rp-relo-pain .new-rp-section-header,
.rp-relo-intro .new-rp-section-header,
.rp-relo-features .new-rp-section-header,
.rp-relo-howitworks .new-rp-section-header,
.rp-relo-countries .new-rp-section-header,
.rp-relo-cta .new-rp-section-header {
  text-transform: none !important;
}

@media (max-width: 991px) {
  .rp-relo-hero .lp-hero-title,
  .rp-relo-hero h1.double-slide-landing-page-left-main-header { font-size: 40px; max-width: none; }
}