/*
 * REAL.PRO Studios · Header Final V4
 *
 * One visual authority. Existing menu controller stays untouched.
 * Original image tags remain in the DOM for semantic continuity,
 * but brand rendering is controlled with fixed-size CSS surfaces so
 * intrinsic image dimensions can never explode into the layout.
 */

:root{
  --rp-h4-red:#e52f32;
  --rp-h4-navy:#071727;
  --rp-h4-white:#ffffff;
  --rp-h4-light:#ffffff;
  --rp-h4-border-dark:rgba(255,255,255,.07);
  --rp-h4-border-light:rgba(7,23,39,.08);
  --rp-h4-shadow:0 6px 18px rgba(0,0,0,.055);
}

/* ==========================================================
   HEADER SHELL
   ========================================================== */

html body .site-header[data-header],
html body .site-header[data-header].is-scrolled,
html body .site-header[data-header]:hover,
html body .site-header[data-header]:focus-within{
  box-sizing:border-box!important;

  left:0!important;
  right:0!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;

  width:100%!important;
  max-width:none!important;

  margin:0!important;

  border:0!important;
  border-bottom:1px solid transparent!important;

  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;

  box-shadow:none!important;

  overflow:visible!important;
  isolation:isolate!important;
  z-index:10050!important;
}

html body .site-header[data-header]::before,
html body .site-header[data-header]::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
}

html body .site-header[data-header] .rp-header-statement{
  display:none!important;
}

/* One state controls the complete header visual. */
html body .site-header[data-header][data-rp-state="dark-transparent"],
html body .site-header[data-header][data-rp-state="light-transparent"]{
  background:transparent!important;
  box-shadow:none!important;
}

html body .site-header[data-header][data-rp-state="dark-solid"],
html body .site-header[data-header][data-rp-state="menu-open"]{
  background:var(--rp-h4-navy)!important;
  border-bottom-color:var(--rp-h4-border-dark)!important;
  box-shadow:var(--rp-h4-shadow)!important;
}

html body .site-header[data-header][data-rp-state="light-solid"]{
  background:var(--rp-h4-light)!important;
  border-bottom-color:var(--rp-h4-border-light)!important;
  box-shadow:var(--rp-h4-shadow)!important;
}

/* No conventional inline navigation, ever. */
html body .rp-signature-nav,
html body .desktop-nav,
html body .desktop-nav--premium,
html body .header-nav,
html body .header-cta,
html body .nav-cta{
  display:none!important;
  visibility:hidden!important;
}

/* ==========================================================
   HEADER BRAND · ZERO INTRINSIC-IMAGE EXPLOSION
   ========================================================== */

html body .site-header[data-header] .header-logo,
html body .site-header[data-header].is-scrolled .header-logo{
  position:relative!important;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;

  flex:0 0 auto!important;

  width:auto!important;
  min-width:0!important;
  max-width:none!important;

  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;

  margin:0!important;
  padding:0!important;

  overflow:visible!important;
}

/*
 * Historical scripts are allowed to keep mutating this img.src,
 * but it can no longer render or affect geometry.
 */
html body .site-header[data-header]
.header-logo > img.rp-brand-logo--header{
  display:none!important;
  visibility:hidden!important;

  position:absolute!important;

  width:0!important;
  min-width:0!important;
  max-width:0!important;

  height:0!important;
  min-height:0!important;
  max-height:0!important;

  margin:0!important;
  padding:0!important;

  opacity:0!important;
  pointer-events:none!important;
}

/* Controlled visible wordmark. */
html body .site-header[data-header] .header-logo::before{
  content:""!important;

  display:block!important;

  width:var(--rp-h4-logo-w)!important;
  max-width:var(--rp-h4-logo-w)!important;

  height:var(--rp-h4-logo-h)!important;
  max-height:var(--rp-h4-logo-h)!important;

  flex:0 0 auto!important;

  background-image:url("../images/brand/realpro-logo-horizontal-on-dark.webp")!important;
  background-repeat:no-repeat!important;
  background-position:left center!important;
  background-size:contain!important;

  transform:none!important;
}

html body .site-header[data-header][data-rp-state^="light"]
.header-logo::before{
  background-image:url("../images/brand/realpro-logo-horizontal.webp")!important;
}

html body .site-header[data-header][data-rp-state="menu-open"]
.header-logo::before{
  background-image:url("../images/brand/realpro-logo-horizontal-on-dark.webp")!important;
}

/* ==========================================================
   HAMBURGER · ALL DEVICES
   ========================================================== */

html body .site-header[data-header] .menu-toggle,
html body .site-header[data-header].is-scrolled .menu-toggle{
  box-sizing:border-box!important;

  position:relative!important;

  display:inline-flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;

  flex:0 0 auto!important;

  width:50px!important;
  min-width:50px!important;
  height:50px!important;
  min-height:50px!important;

  margin:0!important;
  padding:0!important;

  border:1px solid rgba(127,127,127,.10)!important;
  border-radius:15px!important;

  background:rgba(127,127,127,.035)!important;
  box-shadow:none!important;

  transform:none!important;

  z-index:10060!important;
  touch-action:manipulation!important;
}

html body .site-header[data-header] .menu-toggle span{
  display:block!important;

  width:28px!important;
  height:2px!important;

  margin:3px 0!important;

  border:0!important;
  border-radius:999px!important;

  opacity:1!important;
  transform:none!important;

  transition:
    width .16s ease,
    margin .16s ease,
    background-color .10s linear!important;
}

html body .site-header[data-header][data-rp-state^="dark"]
.menu-toggle span,
html body .site-header[data-header][data-rp-state="menu-open"]
.menu-toggle span{
  background:#fff!important;
}

html body .site-header[data-header][data-rp-state^="light"]
.menu-toggle span{
  background:var(--rp-h4-navy)!important;
}

html body .site-header[data-header]
.menu-toggle span:nth-child(2){
  width:20px!important;
  margin-left:8px!important;
  background:var(--rp-h4-red)!important;
}

html body .site-header[data-header]
.menu-toggle:is(:hover,:focus-visible){
  background:rgba(127,127,127,.07)!important;
}

html body .site-header[data-header]
.menu-toggle:is(:hover,:focus-visible)
span:nth-child(2){
  width:28px!important;
  margin-left:0!important;
}

/* ==========================================================
   FULLSCREEN MENU · PRESERVE ORIGINAL CONTROLLER
   ========================================================== */

html body .fullscreen-menu[data-menu]{
  z-index:10100!important;
}

/* Never change display/visibility/open classes here. Existing JS owns that. */

html body .fullscreen-menu[data-menu] .menu-scrim{
  background:rgba(0,0,0,.42)!important;

  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

html body .fullscreen-menu[data-menu] .menu-panel{
  box-sizing:border-box!important;

  width:100%!important;
  max-width:none!important;

  min-height:100dvh!important;
  height:100dvh!important;

  margin:0!important;

  color:#fff!important;

  background:
    radial-gradient(circle at 16% 18%,rgba(255,255,255,.045),transparent 34%),
    linear-gradient(135deg,#07111F 0%,#0A1726 66%,#060B13 100%)!important;

  border:0!important;
  box-shadow:none!important;

  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;

  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
}

/* Top row is always fully visible and never clipped. */
html body .fullscreen-menu[data-menu] .menu-top{
  box-sizing:border-box!important;

  position:relative!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;

  width:100%!important;
  min-height:var(--rp-h4-menu-top-h)!important;

  margin:0!important;
  padding:0!important;

  overflow:visible!important;
  z-index:2!important;
}

/* Hide the historical 856x572 symbol completely. */
html body .fullscreen-menu[data-menu]
.menu-top > img.rp-brand-logo--menu{
  display:none!important;
  visibility:hidden!important;

  position:absolute!important;

  width:0!important;
  min-width:0!important;
  max-width:0!important;

  height:0!important;
  min-height:0!important;
  max-height:0!important;

  opacity:0!important;
  pointer-events:none!important;
}

/* Replace it with the approved white/red horizontal brand. */
html body .fullscreen-menu[data-menu] .menu-top::before{
  content:""!important;

  display:block!important;

  width:var(--rp-h4-menu-logo-w)!important;
  height:var(--rp-h4-menu-logo-h)!important;

  flex:0 0 auto!important;

  background-image:url("../images/brand/realpro-logo-horizontal-on-dark.webp")!important;
  background-repeat:no-repeat!important;
  background-position:left center!important;
  background-size:contain!important;
}

/* Existing functional close button becomes an unambiguous premium X. */
html body .fullscreen-menu[data-menu] .menu-close{
  box-sizing:border-box!important;

  position:relative!important;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  flex:0 0 50px!important;

  width:50px!important;
  min-width:50px!important;
  height:50px!important;
  min-height:50px!important;

  margin:0!important;
  padding:0!important;

  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:15px!important;

  background:rgba(255,255,255,.025)!important;
  box-shadow:none!important;

  color:transparent!important;
  font-size:0!important;

  overflow:visible!important;

  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;

  transform:none!important;
  touch-action:manipulation!important;
}

html body .fullscreen-menu[data-menu] .menu-close > span{
  display:none!important;
}

html body .fullscreen-menu[data-menu] .menu-close > i{
  position:absolute!important;

  right:8px!important;
  bottom:8px!important;

  display:block!important;

  width:6px!important;
  height:6px!important;

  border-radius:999px!important;
  background:var(--rp-h4-red)!important;

  box-shadow:0 0 0 3px rgba(229,47,50,.10)!important;
}

html body .fullscreen-menu[data-menu] .menu-close > i::before,
html body .fullscreen-menu[data-menu] .menu-close > i::after{
  display:none!important;
  content:none!important;
}

html body .fullscreen-menu[data-menu] .menu-close::before,
html body .fullscreen-menu[data-menu] .menu-close::after{
  content:""!important;

  position:absolute!important;
  left:50%!important;
  top:50%!important;

  width:28px!important;
  height:2px!important;

  border-radius:999px!important;
  background:#fff!important;

  transform-origin:center!important;
}

html body .fullscreen-menu[data-menu] .menu-close::before{
  transform:translate(-50%,-50%) rotate(45deg)!important;
}

html body .fullscreen-menu[data-menu] .menu-close::after{
  transform:translate(-50%,-50%) rotate(-45deg)!important;
}

/* Remove the scroll-to-top control from the menu visual layer. */
html body.menu-open .rp-scroll-top,
html:has(.fullscreen-menu.is-open) body .rp-scroll-top{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Menu content is constrained and never allowed to escape viewport. */
html body .fullscreen-menu[data-menu] .menu-content{
  box-sizing:border-box!important;

  width:100%!important;
  max-width:100%!important;

  margin:0!important;
  padding:0!important;
}

html body .fullscreen-menu[data-menu] .menu-links{
  display:grid!important;
  grid-template-columns:1fr!important;

  width:min(100%,760px)!important;
  max-width:760px!important;

  margin:0!important;
  padding:0!important;
}

html body .fullscreen-menu[data-menu] .menu-links a{
  box-sizing:border-box!important;

  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;

  width:100%!important;
  min-height:0!important;

  margin:0!important;

  color:#fff!important;
  background:transparent!important;

  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.085)!important;

  text-decoration:none!important;
  text-transform:uppercase!important;

  font-family:"REALPRO Display","Arial Narrow",Arial,sans-serif!important;
  font-weight:700!important;
  line-height:.92!important;
  letter-spacing:-.028em!important;

  transform:none!important;
  opacity:1!important;
}

html body .fullscreen-menu[data-menu]
.menu-links a[aria-current="page"],
html body .fullscreen-menu[data-menu]
.menu-links a.is-active,
html body .fullscreen-menu[data-menu]
.menu-links a:hover,
html body .fullscreen-menu[data-menu]
.menu-links a:focus-visible{
  color:var(--rp-h4-red)!important;
}

html body .fullscreen-menu[data-menu] .menu-signature{
  color:rgba(255,255,255,.58)!important;

  text-transform:uppercase!important;

  font-family:Inter,Arial,sans-serif!important;
  font-weight:700!important;
  letter-spacing:.30em!important;
}

/* ==========================================================
   RESPONSIVE CONTRACT
   ========================================================== */

@media (max-width:599px){
  :root{
    --rp-h4-logo-w:148px;
    --rp-h4-logo-h:38px;

    --rp-h4-menu-logo-w:148px;
    --rp-h4-menu-logo-h:38px;
    --rp-h4-menu-top-h:58px;
  }

  html body .site-header[data-header],
  html body .site-header[data-header].is-scrolled{
    height:72px!important;
    min-height:72px!important;

    padding:
      0
      max(16px,env(safe-area-inset-right))
      0
      max(16px,env(safe-area-inset-left))!important;
  }

  html body .fullscreen-menu[data-menu] .menu-panel{
    padding:
      max(18px,env(safe-area-inset-top))
      max(20px,env(safe-area-inset-right))
      calc(28px + env(safe-area-inset-bottom))
      max(20px,env(safe-area-inset-left))!important;
  }

  html body .fullscreen-menu[data-menu] .menu-content{
    padding-top:18px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-links{
    width:100%!important;
    max-width:none!important;
  }

  html body .fullscreen-menu[data-menu] .menu-links a{
    padding:14px 2px 16px!important;
    font-size:clamp(40px,12vw,52px)!important;
  }

  html body .fullscreen-menu[data-menu] .menu-signature{
    margin:38px 0 0!important;
    padding:0 2px!important;
    font-size:10px!important;
    line-height:1.6!important;
  }
}

@media (max-width:360px){
  :root{
    --rp-h4-logo-w:134px;
    --rp-h4-logo-h:35px;
    --rp-h4-menu-logo-w:134px;
    --rp-h4-menu-logo-h:35px;
  }

  html body .fullscreen-menu[data-menu] .menu-links a{
    padding:12px 2px 14px!important;
    font-size:clamp(36px,11.6vw,43px)!important;
  }
}

@media (min-width:600px) and (max-width:760px){
  :root{
    --rp-h4-logo-w:158px;
    --rp-h4-logo-h:39px;
    --rp-h4-menu-logo-w:158px;
    --rp-h4-menu-logo-h:39px;
    --rp-h4-menu-top-h:60px;
  }

  html body .site-header[data-header],
  html body .site-header[data-header].is-scrolled{
    height:74px!important;
    min-height:74px!important;
    padding:0 clamp(18px,3vw,24px)!important;
  }

  html body .fullscreen-menu[data-menu] .menu-panel{
    padding:24px clamp(24px,4vw,36px) 30px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-content{
    padding-top:22px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-links a{
    padding:14px 2px 16px!important;
    font-size:clamp(42px,8vw,56px)!important;
  }
}

@media (min-width:761px) and (max-width:1024px){
  :root{
    --rp-h4-logo-w:176px;
    --rp-h4-logo-h:40px;
    --rp-h4-menu-logo-w:176px;
    --rp-h4-menu-logo-h:40px;
    --rp-h4-menu-top-h:62px;
  }

  html body .site-header[data-header],
  html body .site-header[data-header].is-scrolled{
    height:78px!important;
    min-height:78px!important;
    padding:0 clamp(24px,3.5vw,38px)!important;
  }

  html body .fullscreen-menu[data-menu] .menu-panel{
    padding:28px clamp(34px,5vw,56px) 34px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-content{
    padding-top:26px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-links a{
    padding:12px 0 14px!important;
    font-size:clamp(48px,6.3vw,66px)!important;
  }
}

@media (min-width:1025px) and (max-width:1439px){
  :root{
    --rp-h4-logo-w:190px;
    --rp-h4-logo-h:42px;
    --rp-h4-menu-logo-w:190px;
    --rp-h4-menu-logo-h:42px;
    --rp-h4-menu-top-h:64px;
  }

  html body .site-header[data-header],
  html body .site-header[data-header].is-scrolled{
    height:82px!important;
    min-height:82px!important;
    padding:0 clamp(32px,4vw,58px)!important;
  }

  html body .fullscreen-menu[data-menu] .menu-panel{
    padding:30px clamp(48px,5.5vw,78px) 38px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-content{
    padding-top:28px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-links a{
    padding:10px 0 12px!important;
    font-size:clamp(52px,4.8vw,70px)!important;
  }
}

@media (min-width:1440px){
  :root{
    --rp-h4-logo-w:206px;
    --rp-h4-logo-h:45px;
    --rp-h4-menu-logo-w:206px;
    --rp-h4-menu-logo-h:45px;
    --rp-h4-menu-top-h:66px;
  }

  html body .site-header[data-header],
  html body .site-header[data-header].is-scrolled{
    height:86px!important;
    min-height:86px!important;
    padding:0 clamp(46px,4.6vw,88px)!important;
  }

  html body .site-header[data-header] .menu-toggle{
    width:52px!important;
    min-width:52px!important;
    height:52px!important;
    min-height:52px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-panel{
    padding:32px clamp(58px,5.5vw,96px) 42px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-content{
    padding-top:30px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-links a{
    padding:9px 0 11px!important;
    font-size:clamp(56px,4.15vw,76px)!important;
  }

  html body .fullscreen-menu[data-menu] .menu-signature{
    margin-top:34px!important;
  }
}

@media (min-width:1920px){
  :root{
    --rp-h4-logo-w:216px;
    --rp-h4-logo-h:46px;
    --rp-h4-menu-logo-w:216px;
    --rp-h4-menu-logo-h:46px;
  }

  html body .fullscreen-menu[data-menu] .menu-links a{
    font-size:76px!important;
  }
}

@media (max-width:760px) and (max-height:560px) and (orientation:landscape){
  :root{
    --rp-h4-logo-w:138px;
    --rp-h4-logo-h:34px;
    --rp-h4-menu-logo-w:138px;
    --rp-h4-menu-logo-h:34px;
    --rp-h4-menu-top-h:52px;
  }

  html body .site-header[data-header],
  html body .site-header[data-header].is-scrolled{
    height:66px!important;
    min-height:66px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-panel{
    padding:12px 24px 18px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-content{
    padding-top:8px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-links a{
    padding:6px 0 8px!important;
    font-size:clamp(28px,5.8vw,38px)!important;
  }

  html body .fullscreen-menu[data-menu] .menu-signature{
    margin-top:12px!important;
  }
}

/* ==========================================================
   ACCESSIBILITY / MOTION
   ========================================================== */

html body .site-header[data-header] a:focus-visible,
html body .site-header[data-header] button:focus-visible,
html body .fullscreen-menu[data-menu] a:focus-visible,
html body .fullscreen-menu[data-menu] button:focus-visible{
  outline:2px solid var(--rp-h4-red)!important;
  outline-offset:4px!important;
}

@media (prefers-reduced-motion:reduce){
  html body .site-header[data-header],
  html body .site-header[data-header] *,
  html body .fullscreen-menu[data-menu],
  html body .fullscreen-menu[data-menu] *{
    animation:none!important;
    transition:none!important;
  }
}


/* ==========================================================
   REALPRO_HEADER_FINAL_V41
   State sync + mega-menu visual restoration
   ========================================================== */

/*
 * First paint safety:
 * when legacy data-rp-surface already exists, choose the correct
 * brand asset even before the V4.1 controller performs its first sample.
 */

html body .site-header[data-header][data-rp-surface="light"]
.header-logo::before,
html body .site-header[data-header].is-light
.header-logo::before,
html body.rp-header-light
.site-header[data-header]
.header-logo::before{
  background-image:url("../images/brand/realpro-logo-horizontal.webp")!important;
}

html body .site-header[data-header][data-rp-surface="dark"]
.header-logo::before{
  background-image:url("../images/brand/realpro-logo-horizontal-on-dark.webp")!important;
}


/* ----------------------------------------------------------
   1. FAST, SYNCHRONIZED CLOSED HEADER
   ---------------------------------------------------------- */

html body .site-header[data-header]{
  transition:
    background-color .11s linear,
    border-color .11s linear,
    box-shadow .11s linear!important;
}

html body .site-header[data-header] .header-logo::before{
  opacity:1!important;
  visibility:visible!important;

  transition:none!important;
}

html body .site-header[data-header] .menu-toggle{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;

  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
}


/* Closed header state must always render its wordmark. */

html body .site-header[data-header]:not([data-rp-state="menu-open"])
.header-logo::before{
  display:block!important;
}


/* ----------------------------------------------------------
   2. MENU OPEN = SYMBOL + X ONLY
   ---------------------------------------------------------- */

/*
 * The fullscreen menu owns its own brand/close row.
 * Hide closed-header branding while the overlay is open.
 */

html body .site-header[data-header][data-rp-state="menu-open"]
.header-logo::before,
html body.menu-open
.site-header[data-header]
.header-logo::before,
html:has(.fullscreen-menu.is-open)
body
.site-header[data-header]
.header-logo::before{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}


/*
 * The header hamburger is not the close control while the mega menu
 * is open. The existing functional [data-menu-close] button remains
 * the single close target.
 */

html body .site-header[data-header][data-rp-state="menu-open"]
.menu-toggle,
html body.menu-open
.site-header[data-header]
.menu-toggle,
html:has(.fullscreen-menu.is-open)
body
.site-header[data-header]
.menu-toggle{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}


/* ----------------------------------------------------------
   3. TRUE FULLSCREEN MEGA MENU · NO BOX
   ---------------------------------------------------------- */

html body .fullscreen-menu[data-menu]{
  position:fixed!important;
  inset:0!important;

  width:100vw!important;
  max-width:none!important;

  height:100dvh!important;
  min-height:100dvh!important;

  margin:0!important;
  padding:0!important;

  border:0!important;
  border-radius:0!important;

  overflow:hidden!important;

  z-index:10100!important;
}


/*
 * No visible card, drawer, panel edge or floating-box treatment.
 */

html body .fullscreen-menu[data-menu] .menu-panel{
  position:absolute!important;
  inset:0!important;

  box-sizing:border-box!important;

  width:100vw!important;
  min-width:100vw!important;
  max-width:100vw!important;

  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;

  margin:0!important;

  border:0!important;
  border-radius:0!important;

  box-shadow:none!important;

  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;

  overflow-x:hidden!important;
  overflow-y:auto!important;

  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}


html body .fullscreen-menu[data-menu] .menu-scrim{
  background:transparent!important;

  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}


/* ----------------------------------------------------------
   4. TOP ROW · ONLY REAL.PRO SYMBOL + X
   ---------------------------------------------------------- */

html body .fullscreen-menu[data-menu] .menu-top{
  box-sizing:border-box!important;

  position:sticky!important;
  top:0!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;

  width:100%!important;

  margin:0!important;

  overflow:visible!important;

  background:linear-gradient(
    180deg,
    rgba(7,17,31,.985) 0%,
    rgba(7,17,31,.94) 72%,
    rgba(7,17,31,0) 100%
  )!important;

  z-index:20!important;
}


/*
 * Remove V4's horizontal mega-menu wordmark replacement.
 */

html body .fullscreen-menu[data-menu] .menu-top::before{
  display:none!important;
  content:none!important;

  width:0!important;
  height:0!important;

  background:none!important;
}


/*
 * Restore the project's real symbol asset at a controlled premium size.
 * Intrinsic 856×572 dimensions cannot affect the layout.
 */

html body .fullscreen-menu[data-menu]
.menu-top > img.rp-brand-logo--menu{
  position:relative!important;

  display:block!important;
  visibility:visible!important;

  flex:0 0 auto!important;

  width:var(--rp-v41-symbol-w)!important;
  min-width:var(--rp-v41-symbol-w)!important;
  max-width:var(--rp-v41-symbol-w)!important;

  height:auto!important;
  min-height:0!important;
  max-height:var(--rp-v41-symbol-h)!important;

  margin:0!important;
  padding:0!important;

  object-fit:contain!important;
  object-position:left center!important;

  opacity:1!important;

  transform:none!important;
  filter:none!important;

  pointer-events:none!important;
}


/*
 * Functional existing close button.
 * No rectangle/card around it: just an elegant X + red micro-detail.
 */

html body .fullscreen-menu[data-menu] .menu-close{
  position:relative!important;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  flex:0 0 50px!important;

  width:50px!important;
  min-width:50px!important;

  height:50px!important;
  min-height:50px!important;

  margin:0!important;
  padding:0!important;

  border:0!important;
  border-radius:0!important;

  background:transparent!important;
  box-shadow:none!important;

  color:transparent!important;
  font-size:0!important;

  overflow:visible!important;

  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;

  transform:none!important;

  z-index:30!important;
}


html body .fullscreen-menu[data-menu] .menu-close::before,
html body .fullscreen-menu[data-menu] .menu-close::after{
  content:""!important;

  position:absolute!important;
  left:50%!important;
  top:50%!important;

  display:block!important;

  width:30px!important;
  height:2px!important;

  border-radius:999px!important;
  background:#fff!important;

  transform-origin:center!important;
}


html body .fullscreen-menu[data-menu] .menu-close::before{
  transform:translate(-50%,-50%) rotate(45deg)!important;
}

html body .fullscreen-menu[data-menu] .menu-close::after{
  transform:translate(-50%,-50%) rotate(-45deg)!important;
}


/* Existing <i> becomes the red micro-detail. */

html body .fullscreen-menu[data-menu] .menu-close > i{
  position:absolute!important;

  right:5px!important;
  bottom:5px!important;

  display:block!important;

  width:6px!important;
  height:6px!important;

  border-radius:999px!important;

  background:var(--rp-h4-red)!important;

  box-shadow:0 0 0 3px rgba(229,47,50,.11)!important;

  opacity:1!important;
  visibility:visible!important;

  pointer-events:none!important;
}


html body .fullscreen-menu[data-menu] .menu-close > i::before,
html body .fullscreen-menu[data-menu] .menu-close > i::after{
  display:none!important;
  content:none!important;
}


/* ----------------------------------------------------------
   5. MEGA MENU CONTENT · NEVER CLIP
   ---------------------------------------------------------- */

html body .fullscreen-menu[data-menu] .menu-content{
  box-sizing:border-box!important;

  position:relative!important;

  width:100%!important;
  max-width:none!important;

  min-height:0!important;

  margin:0!important;

  overflow:visible!important;
}


html body .fullscreen-menu[data-menu] .menu-links{
  box-sizing:border-box!important;

  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;

  width:min(100%,780px)!important;
  max-width:780px!important;

  margin:0!important;
  padding:0!important;

  overflow:visible!important;
}


html body .fullscreen-menu[data-menu] .menu-links a{
  box-sizing:border-box!important;

  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;

  width:100%!important;
  max-width:100%!important;

  min-height:0!important;

  margin:0!important;

  white-space:normal!important;
  overflow:visible!important;

  text-wrap:balance!important;

  border-bottom:1px solid rgba(255,255,255,.085)!important;
}


html body .fullscreen-menu[data-menu] .menu-signature{
  box-sizing:border-box!important;

  width:100%!important;
  max-width:100%!important;

  overflow:visible!important;
}


/* The global back-to-top control must never enter the menu composition. */

html body.menu-open .rp-scroll-top,
html body .fullscreen-menu.is-open ~ .rp-scroll-top,
html:has(.fullscreen-menu.is-open) body .rp-scroll-top{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}


/* ----------------------------------------------------------
   6. RESPONSIVE MEGA MENU GEOMETRY
   ---------------------------------------------------------- */

@media (max-width:599px){
  :root{
    --rp-v41-symbol-w:62px;
    --rp-v41-symbol-h:44px;
  }

  html body .fullscreen-menu[data-menu] .menu-panel{
    padding:
      max(10px,env(safe-area-inset-top))
      max(20px,env(safe-area-inset-right))
      calc(28px + env(safe-area-inset-bottom))
      max(20px,env(safe-area-inset-left))!important;
  }

  html body .fullscreen-menu[data-menu] .menu-top{
    min-height:66px!important;
    padding:0!important;
  }

  html body .fullscreen-menu[data-menu] .menu-content{
    padding:12px 0 0!important;
  }

  html body .fullscreen-menu[data-menu] .menu-links{
    width:100%!important;
    max-width:none!important;
  }

  html body .fullscreen-menu[data-menu] .menu-links a{
    padding:13px 2px 15px!important;

    font-size:clamp(34px,10.7vw,48px)!important;
    line-height:.94!important;
  }

  html body .fullscreen-menu[data-menu] .menu-signature{
    margin:34px 0 0!important;
    padding:0 2px!important;

    font-size:10px!important;
    line-height:1.55!important;
  }
}


@media (max-width:360px){
  :root{
    --rp-v41-symbol-w:56px;
    --rp-v41-symbol-h:40px;
  }

  html body .fullscreen-menu[data-menu] .menu-links a{
    padding:11px 2px 13px!important;

    font-size:clamp(32px,10.2vw,40px)!important;
  }

  html body .fullscreen-menu[data-menu] .menu-signature{
    margin-top:26px!important;
  }
}


@media (min-width:600px) and (max-width:760px){
  :root{
    --rp-v41-symbol-w:66px;
    --rp-v41-symbol-h:46px;
  }

  html body .fullscreen-menu[data-menu] .menu-panel{
    padding:16px clamp(26px,4vw,36px) 32px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-top{
    min-height:68px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-content{
    padding-top:16px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-links a{
    padding:13px 0 15px!important;
    font-size:clamp(40px,7.6vw,54px)!important;
  }
}


@media (min-width:761px) and (max-width:1024px){
  :root{
    --rp-v41-symbol-w:70px;
    --rp-v41-symbol-h:48px;
  }

  html body .fullscreen-menu[data-menu] .menu-panel{
    padding:18px clamp(38px,5vw,58px) 36px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-top{
    min-height:72px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-content{
    padding-top:18px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-links a{
    padding:12px 0 14px!important;

    font-size:clamp(46px,6vw,62px)!important;
  }
}


@media (min-width:1025px) and (max-width:1439px){
  :root{
    --rp-v41-symbol-w:74px;
    --rp-v41-symbol-h:50px;
  }

  html body .fullscreen-menu[data-menu] .menu-panel{
    padding:22px clamp(54px,5.5vw,82px) 40px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-top{
    min-height:74px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-content{
    padding-top:20px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-links a{
    padding:10px 0 12px!important;

    font-size:clamp(50px,4.55vw,68px)!important;
  }
}


@media (min-width:1440px){
  :root{
    --rp-v41-symbol-w:78px;
    --rp-v41-symbol-h:52px;
  }

  html body .fullscreen-menu[data-menu] .menu-panel{
    padding:24px clamp(66px,5.7vw,104px) 44px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-top{
    min-height:76px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-content{
    padding-top:22px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-links a{
    padding:9px 0 11px!important;

    font-size:clamp(54px,4vw,74px)!important;
  }

  html body .fullscreen-menu[data-menu] .menu-signature{
    margin-top:32px!important;
  }
}


@media (max-width:760px) and (max-height:560px) and (orientation:landscape){
  :root{
    --rp-v41-symbol-w:54px;
    --rp-v41-symbol-h:36px;
  }

  html body .fullscreen-menu[data-menu] .menu-panel{
    padding:8px 24px 16px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-top{
    min-height:52px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-content{
    padding-top:4px!important;
  }

  html body .fullscreen-menu[data-menu] .menu-links a{
    padding:5px 0 7px!important;

    font-size:clamp(27px,5.5vw,36px)!important;
  }

  html body .fullscreen-menu[data-menu] .menu-signature{
    margin-top:10px!important;
  }
}


/* ==========================================================
   REALPRO_HEADER_FINAL_V411
   Mega-menu symbol artifact hotfix
   ========================================================== */

/*
 * The historical 856×572 <img> can still paint outside the intended
 * top-row geometry under some legacy menu styles.
 * Remove that physical image completely.
 */

html body .fullscreen-menu[data-menu]
.menu-top > img,
html body .fullscreen-menu[data-menu]
.menu-top > img.rp-brand-logo--menu{
  display:none!important;
  visibility:hidden!important;

  position:absolute!important;

  width:0!important;
  min-width:0!important;
  max-width:0!important;

  height:0!important;
  min-height:0!important;
  max-height:0!important;

  margin:0!important;
  padding:0!important;

  opacity:0!important;
  overflow:hidden!important;

  pointer-events:none!important;
}


/*
 * Render exactly one controlled symbol as part of the top row itself.
 * It cannot bleed below the row or expose intrinsic image dimensions.
 */

html body .fullscreen-menu[data-menu] .menu-top::before{
  content:""!important;

  position:relative!important;

  display:block!important;
  visibility:visible!important;

  flex:0 0 var(--rp-v41-symbol-w)!important;

  width:var(--rp-v41-symbol-w)!important;
  min-width:var(--rp-v41-symbol-w)!important;
  max-width:var(--rp-v41-symbol-w)!important;

  height:var(--rp-v41-symbol-h)!important;
  min-height:var(--rp-v41-symbol-h)!important;
  max-height:var(--rp-v41-symbol-h)!important;

  margin:0!important;
  padding:0!important;

  background:
    url("../images/brand/realpro-logo-symbol-on-dark.webp")
    left center / contain
    no-repeat!important;

  overflow:hidden!important;

  opacity:1!important;
  transform:none!important;

  pointer-events:none!important;
}


/*
 * Keep the brand/X row clean and self-contained.
 */

html body .fullscreen-menu[data-menu] .menu-top{
  overflow:hidden!important;
}

html body .fullscreen-menu[data-menu] .menu-content{
  clear:both!important;
}


/*
 * Nothing decorative may protrude through the boundary below the top row.
 */

html body .fullscreen-menu[data-menu]
.menu-top > *:not(.menu-close){
  max-height:var(--rp-v41-symbol-h)!important;
}


/* ==========================================================
   REALPRO_HEADER_FINAL_V412
   Open-menu top-layer correction
   ========================================================== */

/*
 * When the fullscreen menu owns the viewport, the regular site header
 * must not remain above it. This removes the empty dark band and the
 * cropped symbol fragment seen below that band.
 */

html body.menu-open .site-header[data-header],
html:has(.fullscreen-menu#siteMenu.is-open)
body .site-header[data-header],
html body:has(.fullscreen-menu#siteMenu.is-open)
.site-header[data-header]{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;

  transform:none!important;

  z-index:-1!important;
}


/*
 * The open mega menu becomes the sole visual owner of the top area.
 */

html body .fullscreen-menu#siteMenu.is-open{
  position:fixed!important;
  inset:0!important;

  width:100vw!important;
  height:100dvh!important;

  visibility:visible!important;
  pointer-events:auto!important;

  z-index:2147483000!important;
}


html body .fullscreen-menu#siteMenu.is-open .menu-panel{
  position:absolute!important;
  inset:0!important;

  width:100vw!important;
  min-width:100vw!important;
  max-width:100vw!important;

  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;

  margin:0!important;

  opacity:1!important;
  visibility:visible!important;

  transform:none!important;

  overflow-x:hidden!important;
  overflow-y:auto!important;

  z-index:1!important;
}


/*
 * Lock the brand/X row to the true top of the menu viewport.
 * Reset every property that could be inherited from historical menu CSS.
 */

html body .fullscreen-menu#siteMenu.is-open .menu-top{
  box-sizing:border-box!important;

  position:sticky!important;
  top:0!important;
  left:auto!important;
  right:auto!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;

  width:100%!important;
  min-width:0!important;
  max-width:none!important;

  height:auto!important;
  min-height:var(--rp-h4-menu-top-h,76px)!important;
  max-height:none!important;

  margin:0!important;
  padding:0!important;

  opacity:1!important;
  visibility:visible!important;

  transform:none!important;

  overflow:visible!important;

  z-index:2147483001!important;
}


/*
 * Historical physical menu image stays completely removed.
 */

html body .fullscreen-menu#siteMenu.is-open
.menu-top > img,
html body .fullscreen-menu#siteMenu.is-open
.menu-top > img.rp-brand-logo--menu{
  display:none!important;
  visibility:hidden!important;

  position:absolute!important;

  width:0!important;
  min-width:0!important;
  max-width:0!important;

  height:0!important;
  min-height:0!important;
  max-height:0!important;

  margin:0!important;
  padding:0!important;

  opacity:0!important;

  transform:none!important;

  pointer-events:none!important;
}


/*
 * Controlled REAL.PRO symbol.
 */

html body .fullscreen-menu#siteMenu.is-open
.menu-top::before{
  content:""!important;

  position:relative!important;

  display:block!important;
  visibility:visible!important;

  flex:0 0 var(--rp-v41-symbol-w)!important;

  width:var(--rp-v41-symbol-w)!important;
  min-width:var(--rp-v41-symbol-w)!important;
  max-width:var(--rp-v41-symbol-w)!important;

  height:var(--rp-v41-symbol-h)!important;
  min-height:var(--rp-v41-symbol-h)!important;
  max-height:var(--rp-v41-symbol-h)!important;

  margin:0!important;
  padding:0!important;

  background:
    url("../images/brand/realpro-logo-symbol-on-dark.webp")
    left center / contain
    no-repeat!important;

  opacity:1!important;
  visibility:visible!important;

  transform:none!important;

  overflow:hidden!important;

  z-index:2147483002!important;
  pointer-events:none!important;
}


/*
 * Functional close control must always be fully visible.
 */

html body .fullscreen-menu#siteMenu.is-open .menu-close{
  position:relative!important;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  flex:0 0 50px!important;

  width:50px!important;
  min-width:50px!important;
  max-width:50px!important;

  height:50px!important;
  min-height:50px!important;
  max-height:50px!important;

  margin:0!important;
  padding:0!important;

  opacity:1!important;
  visibility:visible!important;

  transform:none!important;

  pointer-events:auto!important;

  z-index:2147483003!important;
}


/*
 * Keep menu content below the top row and never let it paint over symbol/X.
 */

html body .fullscreen-menu#siteMenu.is-open .menu-content{
  position:relative!important;

  margin-top:0!important;

  opacity:1!important;
  visibility:visible!important;

  transform:none!important;

  z-index:2!important;
}


/*
 * Defensive: no other pseudo-element may create a brand artifact
 * immediately under the menu top row.
 */

html body .fullscreen-menu#siteMenu.is-open .menu-top::after{
  pointer-events:none!important;
}


/*
 * Top row padding by viewport class.
 */

@media (max-width:599px){
  html body .fullscreen-menu#siteMenu.is-open .menu-top{
    min-height:66px!important;
    padding:
      max(10px,env(safe-area-inset-top))
      0
      6px!important;
  }
}

@media (min-width:600px) and (max-width:760px){
  html body .fullscreen-menu#siteMenu.is-open .menu-top{
    min-height:68px!important;
    padding:6px 0!important;
  }
}

@media (min-width:761px) and (max-width:1024px){
  html body .fullscreen-menu#siteMenu.is-open .menu-top{
    min-height:72px!important;
    padding:8px 0!important;
  }
}

@media (min-width:1025px) and (max-width:1439px){
  html body .fullscreen-menu#siteMenu.is-open .menu-top{
    min-height:74px!important;
    padding:10px 0!important;
  }
}

@media (min-width:1440px){
  html body .fullscreen-menu#siteMenu.is-open .menu-top{
    min-height:76px!important;
    padding:10px 0!important;
  }
}

/* ==========================================================
   REALPRO_HEADER_FINAL_V413
   Open menu top shadow + close X refinement
   ========================================================== */

/* subtle premium top shadow / depth across full viewport when menu is open */
html body .fullscreen-menu#siteMenu.is-open .menu-top{
  position:sticky!important;
  top:0!important;
  background:linear-gradient(180deg, rgba(3,17,35,.94) 0%, rgba(3,17,35,.90) 58%, rgba(3,17,35,.78) 100%)!important;
  box-shadow:
    0 18px 38px rgba(1,8,18,.26),
    0 6px 16px rgba(1,8,18,.16),
    inset 0 -1px 0 rgba(255,255,255,.06)!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* extend the top layer visually edge-to-edge */
html body .fullscreen-menu#siteMenu.is-open .menu-top::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:0!important;
  transform:translateX(-50%)!important;
  width:100vw!important;
  height:100%!important;
  background:linear-gradient(180deg, rgba(3,17,35,.96) 0%, rgba(3,17,35,.90) 56%, rgba(3,17,35,.78) 100%)!important;
  box-shadow:
    0 18px 38px rgba(1,8,18,.24),
    0 6px 16px rgba(1,8,18,.14),
    inset 0 -1px 0 rgba(255,255,255,.05)!important;
  z-index:-1!important;
  pointer-events:none!important;
}

/* keep controlled symbol visible above the top layer */
html body .fullscreen-menu#siteMenu.is-open .menu-top::before{
  z-index:2!important;
}

/* correct the close control */
html body .fullscreen-menu#siteMenu.is-open .menu-close,
html body .fullscreen-menu#siteMenu.is-open [data-menu-close]{
  position:relative!important;
  width:52px!important;
  min-width:52px!important;
  max-width:52px!important;
  height:52px!important;
  min-height:52px!important;
  max-height:52px!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  background:rgba(7,23,44,.48)!important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05)!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  text-indent:-9999px!important;
  overflow:hidden!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

html body .fullscreen-menu#siteMenu.is-open .menu-close > *,
html body .fullscreen-menu#siteMenu.is-open [data-menu-close] > *{
  opacity:0!important;
}

html body .fullscreen-menu#siteMenu.is-open .menu-close::before,
html body .fullscreen-menu#siteMenu.is-open .menu-close::after,
html body .fullscreen-menu#siteMenu.is-open [data-menu-close]::before,
html body .fullscreen-menu#siteMenu.is-open [data-menu-close]::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:22px!important;
  height:2px!important;
  border-radius:999px!important;
  transform-origin:center!important;
  box-shadow:none!important;
}

html body .fullscreen-menu#siteMenu.is-open .menu-close::before,
html body .fullscreen-menu#siteMenu.is-open [data-menu-close]::before{
  background:#ffffff!important;
  transform:translate(-50%,-50%) rotate(45deg)!important;
}

html body .fullscreen-menu#siteMenu.is-open .menu-close::after,
html body .fullscreen-menu#siteMenu.is-open [data-menu-close]::after{
  background:#ef3b3a!important;
  transform:translate(-50%,-50%) rotate(-45deg)!important;
}

html body .fullscreen-menu#siteMenu.is-open .menu-close:hover,
html body .fullscreen-menu#siteMenu.is-open .menu-close:focus-visible,
html body .fullscreen-menu#siteMenu.is-open [data-menu-close]:hover,
html body .fullscreen-menu#siteMenu.is-open [data-menu-close]:focus-visible{
  border-color:rgba(255,255,255,.16)!important;
  background:rgba(8,25,48,.62)!important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.07)!important;
  outline:none!important;
}

/* remove any red circular fill from previous implementations */
html body .fullscreen-menu#siteMenu.is-open .menu-close svg,
html body .fullscreen-menu#siteMenu.is-open [data-menu-close] svg,
html body .fullscreen-menu#siteMenu.is-open .menu-close img,
html body .fullscreen-menu#siteMenu.is-open [data-menu-close] img{
  opacity:0!important;
}

/* mobile sizing */
@media (max-width:599px){
  html body .fullscreen-menu#siteMenu.is-open .menu-close,
  html body .fullscreen-menu#siteMenu.is-open [data-menu-close]{
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    border-radius:13px!important;
  }

  html body .fullscreen-menu#siteMenu.is-open .menu-close::before,
  html body .fullscreen-menu#siteMenu.is-open .menu-close::after,
  html body .fullscreen-menu#siteMenu.is-open [data-menu-close]::before,
  html body .fullscreen-menu#siteMenu.is-open [data-menu-close]::after{
    width:20px!important;
  }
}

/* ==========================================================
   REALPRO_HEADER_FINAL_V414
   Mega menu top band removal / keep only symbol + X
   ========================================================== */

/* remove the full-width band entirely when the mega menu is open */
html body .fullscreen-menu#siteMenu.is-open .menu-top{
  position:fixed!important;
  top:max(20px, calc(env(safe-area-inset-top, 0px) + 8px))!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  height:0!important;
  min-height:0!important;
  padding:0 56px!important;
  margin:0!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  overflow:visible!important;
  isolation:isolate!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  pointer-events:none!important;
}

html body .fullscreen-menu#siteMenu.is-open .menu-top::after{
  content:none!important;
  display:none!important;
}

/* keep only the controlled symbol floating on the canvas */
html body .fullscreen-menu#siteMenu.is-open .menu-top::before{
  position:absolute!important;
  left:56px!important;
  top:0!important;
  z-index:3!important;
  pointer-events:none!important;
  box-shadow:none!important;
}

/* keep the close button floating without the bar */
html body .fullscreen-menu#siteMenu.is-open .menu-close,
html body .fullscreen-menu#siteMenu.is-open [data-menu-close]{
  position:absolute!important;
  right:56px!important;
  top:0!important;
  z-index:4!important;
  pointer-events:auto!important;
}

/* remove any historical separator under the old top band */
html body .fullscreen-menu#siteMenu.is-open .menu-top,
html body .fullscreen-menu#siteMenu.is-open .menu-top *{
  border-top-color:transparent!important;
}

/* if a dedicated top-row wrapper exists, neutralize its strip styling */
html body .fullscreen-menu#siteMenu.is-open .menu-top-row,
html body .fullscreen-menu#siteMenu.is-open .menu-header,
html body .fullscreen-menu#siteMenu.is-open .fullscreen-menu__header,
html body .fullscreen-menu#siteMenu.is-open .nav-top,
html body .fullscreen-menu#siteMenu.is-open .menu-bar{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* preserve clean spacing for the content below */
html body .fullscreen-menu#siteMenu.is-open .menu-inner,
html body .fullscreen-menu#siteMenu.is-open .menu-panel,
html body .fullscreen-menu#siteMenu.is-open .menu-content,
html body .fullscreen-menu#siteMenu.is-open .menu-grid,
html body .fullscreen-menu#siteMenu.is-open .fullscreen-menu__inner{
  padding-top:0!important;
}

/* keep links area visually intact while the symbol/X float above */
html body .fullscreen-menu#siteMenu.is-open .menu-nav,
html body .fullscreen-menu#siteMenu.is-open nav,
html body .fullscreen-menu#siteMenu.is-open .menu-primary,
html body .fullscreen-menu#siteMenu.is-open .fullscreen-menu__nav{
  margin-top:0!important;
}

@media (max-width:1199px){
  html body .fullscreen-menu#siteMenu.is-open .menu-top{
    top:max(16px, calc(env(safe-area-inset-top, 0px) + 6px))!important;
    padding:0 40px!important;
  }
  html body .fullscreen-menu#siteMenu.is-open .menu-top::before{
    left:40px!important;
  }
  html body .fullscreen-menu#siteMenu.is-open .menu-close,
  html body .fullscreen-menu#siteMenu.is-open [data-menu-close]{
    right:40px!important;
  }
}

@media (max-width:767px){
  html body .fullscreen-menu#siteMenu.is-open .menu-top{
    top:max(12px, calc(env(safe-area-inset-top, 0px) + 4px))!important;
    padding:0 20px!important;
  }
  html body .fullscreen-menu#siteMenu.is-open .menu-top::before{
    left:20px!important;
  }
  html body .fullscreen-menu#siteMenu.is-open .menu-close,
  html body .fullscreen-menu#siteMenu.is-open [data-menu-close]{
    right:20px!important;
  }
}

/* ==========================================================
   REALPRO_HEADER_FINAL_V415
   Floating controls cleanup / no band / no overlap
   ========================================================== */

/*
 * The regular header hamburger must never remain visible once the
 * fullscreen mega menu is open. This removes the duplicate X at far left.
 */
html body.menu-open [data-menu-open],
html:has(.fullscreen-menu#siteMenu.is-open) body [data-menu-open],
html body:has(.fullscreen-menu#siteMenu.is-open) [data-menu-open],
html body.menu-open .site-header[data-header] .menu-toggle,
html:has(.fullscreen-menu#siteMenu.is-open) body .site-header[data-header] .menu-toggle{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/*
 * Keep the open mega-menu top completely bandless.
 * Symbol and X float independently over the menu canvas.
 */
html body .fullscreen-menu#siteMenu.is-open .menu-top{
  position:fixed!important;
  inset:auto 0 auto 0!important;
  top:max(18px, calc(env(safe-area-inset-top, 0px) + 8px))!important;

  width:100%!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;

  margin:0!important;
  padding:0!important;

  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;

  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;

  overflow:visible!important;
  pointer-events:none!important;

  z-index:2147483001!important;
}

html body .fullscreen-menu#siteMenu.is-open .menu-top::after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
}

/*
 * Controlled brand symbol only. Never use intrinsic image geometry.
 */
html body .fullscreen-menu#siteMenu.is-open .menu-top::before{
  content:""!important;
  position:absolute!important;
  left:clamp(20px,3.25vw,58px)!important;
  top:0!important;

  display:block!important;
  visibility:visible!important;

  width:72px!important;
  min-width:72px!important;
  max-width:72px!important;

  height:50px!important;
  min-height:50px!important;
  max-height:50px!important;

  margin:0!important;
  padding:0!important;

  background:
    url("../images/brand/realpro-logo-symbol-on-dark.webp")
    left center / contain no-repeat!important;

  border:0!important;
  box-shadow:none!important;

  opacity:1!important;
  transform:none!important;
  overflow:hidden!important;

  pointer-events:none!important;
  z-index:2147483002!important;
}

/* Historical physical symbol stays disabled. */
html body .fullscreen-menu#siteMenu.is-open .menu-top > img,
html body .fullscreen-menu#siteMenu.is-open .menu-top > img.rp-brand-logo--menu{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  width:0!important;
  height:0!important;
  max-width:0!important;
  max-height:0!important;
  pointer-events:none!important;
}

/*
 * Keep exactly one functional close control, on the right.
 */
html body .fullscreen-menu#siteMenu.is-open .menu-top .menu-close,
html body .fullscreen-menu#siteMenu.is-open .menu-top [data-menu-close]{
  position:absolute!important;
  right:clamp(20px,3.25vw,58px)!important;
  top:0!important;

  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;

  width:52px!important;
  min-width:52px!important;
  max-width:52px!important;
  height:52px!important;
  min-height:52px!important;
  max-height:52px!important;

  margin:0!important;

  pointer-events:auto!important;
  z-index:2147483003!important;
}

/* Defensive: hide duplicate close controls outside the canonical top row. */
html body .fullscreen-menu#siteMenu.is-open > .menu-close,
html body .fullscreen-menu#siteMenu.is-open > [data-menu-close],
html body .fullscreen-menu#siteMenu.is-open .menu-panel > .menu-close,
html body .fullscreen-menu#siteMenu.is-open .menu-panel > [data-menu-close]{
  display:none!important;
}

/* Re-enable canonical control in menu-top after defensive selectors. */
html body .fullscreen-menu#siteMenu.is-open .menu-top > .menu-close,
html body .fullscreen-menu#siteMenu.is-open .menu-top > [data-menu-close]{
  display:inline-flex!important;
}

/*
 * Reserve clean visual space for the floating symbol/X.
 * This prevents HOME from colliding with the controls while preserving
 * the exact typography, hierarchy and width of the existing menu.
 */
html body .fullscreen-menu#siteMenu.is-open .menu-content{
  padding-top:104px!important;
  margin-top:0!important;
}

/* Do not alter link typography or existing mega-menu background. */
html body .fullscreen-menu#siteMenu.is-open .menu-links{
  margin-top:0!important;
}

@media (min-width:761px) and (max-width:1024px){
  html body .fullscreen-menu#siteMenu.is-open .menu-top::before{
    width:68px!important;
    min-width:68px!important;
    max-width:68px!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
  }

  html body .fullscreen-menu#siteMenu.is-open .menu-content{
    padding-top:98px!important;
  }
}

@media (max-width:760px){
  html body .fullscreen-menu#siteMenu.is-open .menu-top{
    top:max(12px, calc(env(safe-area-inset-top, 0px) + 4px))!important;
  }

  html body .fullscreen-menu#siteMenu.is-open .menu-top::before{
    left:20px!important;
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
  }

  html body .fullscreen-menu#siteMenu.is-open .menu-top .menu-close,
  html body .fullscreen-menu#siteMenu.is-open .menu-top [data-menu-close]{
    right:20px!important;
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
  }

  html body .fullscreen-menu#siteMenu.is-open .menu-content{
    padding-top:82px!important;
  }
}

@media (max-width:760px) and (max-height:560px) and (orientation:landscape){
  html body .fullscreen-menu#siteMenu.is-open .menu-top{
    top:8px!important;
  }

  html body .fullscreen-menu#siteMenu.is-open .menu-top::before{
    width:52px!important;
    min-width:52px!important;
    max-width:52px!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
  }

  html body .fullscreen-menu#siteMenu.is-open .menu-content{
    padding-top:62px!important;
  }
}