/* ========================================================================== 
   REALPRO Studios — Home Hero Composition V66

   A self-contained hero composition: stable local typography, balanced space
   around the copy, and a separate trust section so no carousel can enter the
   first viewport. The content and header share one visual rail, with an
   optical (rather than merely mathematical) center on every screen size.
   Only the Home page is affected.
   ========================================================================== */

@font-face {
  font-family: "REALPRO Display";
  src: url("../fonts/realpro-inter-tight-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "REALPRO Display";
  src: url("../fonts/realpro-inter-tight-900.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  /* Matches the header's lateral rhythm exactly. The logo, menu and message
     now sit on a single editorial grid instead of appearing independently. */
  --rp-hero-rail: clamp(24px, 7vw, 138px);
}

/* ---------- First viewport: hero content only ---------- */
html body.rp-page-index main#main > section.hero {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  min-height: 100svh !important;
  height: auto !important;
  padding: clamp(116px, 12svh, 136px) 0 clamp(112px, 12svh, 152px) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

html body.rp-page-index main#main > section.hero > .hero-inner {
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 var(--rp-hero-rail) !important;
  transform: none !important;
}

/* The approved visual begins with the statement, not an additional label. */
html body.rp-page-index main#main > section.hero > .hero-inner > .kicker {
  display: none !important;
}

html body.rp-page-index main#main > section.hero #hero-title {
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: #f7f8fb !important;
  -webkit-text-fill-color: #f7f8fb !important;
  font-family: "REALPRO Display", Arial, sans-serif !important;
  font-size: clamp(78px, 5.9vw, 120px) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-synthesis: none !important;
  line-height: .96 !important;
  letter-spacing: -.047em !important;
  text-transform: uppercase !important;
  text-wrap: nowrap !important;
  white-space: nowrap !important;
  text-shadow: 0 18px 50px rgba(0, 0, 0, .36) !important;
}

/* The two words receive a real, locally loaded 900 master — no synthetic
   thickening and no adjustment to the title's line height or alignment. */
html body.rp-page-index main#main > section.hero #hero-title :is(strong, em) {
  display: inline !important;
  color: #ef3f3f !important;
  -webkit-text-fill-color: #ef3f3f !important;
  font-family: "REALPRO Display", Arial, sans-serif !important;
  font-size: inherit !important;
  font-style: normal !important;
  font-weight: 900 !important;
  font-synthesis: none !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-shadow: inherit !important;
  transform: none !important;
}

html body.rp-page-index main#main > section.hero .hero-copy {
  max-width: 1050px !important;
  margin: 36px 0 44px !important;
  color: rgba(245, 247, 252, .88) !important;
  font-family: var(--sans, "Segoe UI", Arial, sans-serif) !important;
  font-size: clamp(17px, 1.03vw, 21px) !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  text-shadow: 0 9px 28px rgba(0, 0, 0, .28) !important;
}

html body.rp-page-index main#main > section.hero .rp-hero-copy-break {
  display: block;
}

html body.rp-page-index main#main > section.hero .btn.btn-red {
  min-width: 308px !important;
  min-height: 66px !important;
  padding-inline: 30px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .025em !important;
  box-shadow: 0 20px 44px rgba(211, 47, 47, .28), 0 0 28px rgba(211, 47, 47, .12) !important;
}

/* ---------- Trust carousel: intentionally after the hero ---------- */
html body.rp-page-index main#main > .trusted-hero-section {
  position: relative !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
  padding: clamp(38px, 4.2svh, 64px) 0 clamp(42px, 4.8svh, 74px) !important;
  overflow: hidden !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 16% 26%, rgba(211, 47, 47, .10), transparent 32%),
    linear-gradient(145deg, #07111f 0%, #091624 62%, #050b14 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
}

html body.rp-page-index main#main > .trusted-hero-section > .trusted-hero {
  position: relative !important;
  inset: auto !important;
  width: min(calc(100% - 120px), 1420px) !important;
  margin: 0 auto !important;
  transform: none !important;
}

/* ---------- Compact laptops ---------- */
@media (min-width: 1181px) and (max-height: 960px) {
  html body.rp-page-index main#main > section.hero {
    display: flex !important;
    padding: clamp(100px, 13svh, 118px) 0 clamp(76px, 10svh, 96px) !important;
  }

  html body.rp-page-index main#main > section.hero #hero-title {
    font-size: clamp(68px, 5.1vw, 102px) !important;
    line-height: .94 !important;
  }

  html body.rp-page-index main#main > section.hero .hero-copy {
    margin: 26px 0 32px !important;
  }

  html body.rp-page-index main#main > section.hero .btn.btn-red {
    min-height: 60px !important;
  }
}

/* ---------- Tablets ---------- */
@media (min-width: 761px) and (max-width: 1180px) {
  html body.rp-page-index main#main > section.hero {
    display: flex !important;
    padding: clamp(106px, 13svh, 132px) 0 clamp(76px, 10svh, 104px) !important;
  }

  html body.rp-page-index main#main > section.hero > .hero-inner {
    width: auto !important;
    max-width: none !important;
    margin-inline: var(--rp-hero-rail) !important;
  }

  html body.rp-page-index main#main > section.hero #hero-title {
    width: 100% !important;
    font-size: clamp(58px, 7.4vw, 90px) !important;
    line-height: .94 !important;
  }

  html body.rp-page-index main#main > section.hero .hero-copy {
    max-width: 860px !important;
    margin: 30px 0 36px !important;
    font-size: clamp(16px, 1.75vw, 20px) !important;
  }

  html body.rp-page-index main#main > section.hero .rp-hero-copy-break {
    display: none;
  }

  html body.rp-page-index main#main > .trusted-hero-section > .trusted-hero {
    width: auto !important;
    margin-inline: var(--rp-hero-rail) !important;
  }
}

/* Tall tablets need the content slightly above geometric center: this keeps
   the message inside the thumb-safe and header-safe zone without leaving a
   heavy, empty upper half. */
@media (min-width: 761px) and (max-width: 1180px) and (min-height: 1000px) {
  html body.rp-page-index main#main > section.hero > .hero-inner {
    transform: translateY(-6svh) !important;
  }
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  html body.rp-page-index main#main > section.hero {
    display: block !important;
    min-height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body.rp-page-index main#main > section.hero > .hero-inner {
    width: calc(100% - 42px) !important;
    min-height: 100svh !important;
    padding: clamp(100px, 14svh, 122px) 0 clamp(34px, 5svh, 50px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  html body.rp-page-index main#main > section.hero #hero-title {
    width: 100% !important;
    max-width: 10.8ch !important;
    font-size: clamp(48px, 13.2vw, 64px) !important;
    line-height: .93 !important;
    letter-spacing: -.05em !important;
    text-wrap: balance !important;
    white-space: normal !important;
  }

  html body.rp-page-index main#main > section.hero .hero-copy {
    max-width: 34ch !important;
    margin: 22px 0 25px !important;
    font-size: clamp(15px, 4.05vw, 17px) !important;
    line-height: 1.56 !important;
  }

  html body.rp-page-index main#main > section.hero .rp-hero-copy-break {
    display: none;
  }

  html body.rp-page-index main#main > section.hero .btn.btn-red {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
  }

  html body.rp-page-index main#main > .trusted-hero-section {
    padding-block: 28px 34px !important;
  }

  html body.rp-page-index main#main > .trusted-hero-section > .trusted-hero {
    width: calc(100% - 22px) !important;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  html body.rp-page-index main#main > section.hero > .hero-inner {
    padding-top: 88px !important;
    padding-bottom: 24px !important;
  }

  html body.rp-page-index main#main > section.hero #hero-title {
    font-size: clamp(42px, 11.8vw, 54px) !important;
  }

  html body.rp-page-index main#main > section.hero .hero-copy {
    margin: 16px 0 20px !important;
    font-size: 14px !important;
    line-height: 1.46 !important;
  }

  html body.rp-page-index main#main > section.hero .btn.btn-red {
    min-height: 52px !important;
  }
}

@media (max-width: 390px) {
  html body.rp-page-index main#main > section.hero > .hero-inner {
    width: calc(100% - 34px) !important;
  }

  html body.rp-page-index main#main > section.hero #hero-title {
    font-size: clamp(44px, 12.6vw, 56px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.rp-page-index main#main > section.hero #hero-title,
  html body.rp-page-index main#main > section.hero .hero-copy,
  html body.rp-page-index main#main > section.hero .btn.btn-red {
    animation: none !important;
    transition: none !important;
  }
}