/*
 * REALPRO STUDIOS
 * MOBILE EXPERIENCE · CANONICAL V1
 *
 * Scope: <= 760px only.
 * Desktop/tablet >= 761px untouched.
 */

.rp-mobile-header-topline{
  display:none;
}


@media (max-width:760px){

  :root{
    --rp-mobile-topline-h:42px;
    --rp-mobile-header-h:86px;
  }


  /* ========================================================
     01 · MOBILE TOP STATEMENT
     Full-width strip ABOVE the actual header.
     ======================================================== */

  html body .rp-mobile-header-topline{
    position:fixed !important;
    z-index:1001 !important;

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

    box-sizing:border-box !important;

    width:100% !important;
    height:var(--rp-mobile-topline-h) !important;
    min-height:var(--rp-mobile-topline-h) !important;

    margin:0 !important;
    padding:0 18px !important;

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

    background:rgba(255,255,255,.985) !important;
    border:0 !important;
    border-bottom:1px solid rgba(19,40,68,.08) !important;
    border-radius:0 !important;

    box-shadow:none !important;

    color:#132844 !important;

    font-size:10px !important;
    line-height:1.15 !important;
    font-weight:800 !important;

    letter-spacing:.035em !important;
    text-align:center !important;
    text-transform:uppercase !important;

    white-space:normal !important;

    opacity:1 !important;
    visibility:visible !important;
    pointer-events:none !important;
  }


  html body .rp-mobile-header-topline strong{
    color:#e63236 !important;
    font-weight:900 !important;
  }


  html body .rp-mobile-header-topline em{
    color:#e63236 !important;
    font-style:normal !important;
    font-weight:900 !important;
  }


  /* The original phrase remains in the DOM for the existing
     header controllers, but is not visually rendered on mobile. */

  html body .site-header[data-header]
  .rp-header-statement,

  html body .site-header[data-header]
  [data-rp-header-statement],

  html body .site-header[data-header]
  .rp-client-header-message,

  html body .site-header[data-header]
  .rp-header-union-message{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }


  /* Move the actual fixed header DOWN.
     Do not redesign logo/menu/header itself. */

  html body .site-header[data-header],
  html body .site-header[data-header].is-scrolled{
    top:var(--rp-mobile-topline-h) !important;
  }


  /* ========================================================
     02 · CONTACT HERO MOBILE
     Correct viewport fit + centered content block.
     ======================================================== */

  html body.rp-page-contact
  main#main
  > section.rp-contact-hero{
    box-sizing:border-box !important;

    width:100% !important;

    height:100svh !important;
    min-height:640px !important;
    max-height:none !important;

    margin:0 !important;

    padding:
      calc(
        var(--rp-mobile-topline-h)
        + var(--rp-mobile-header-h)
        + 20px
      )
      0
      30px
      !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;
  }


  html body.rp-page-contact
  .rp-contact-hero__content{
    box-sizing:border-box !important;

    position:relative !important;
    inset:auto !important;

    width:calc(100% - 44px) !important;
    max-width:360px !important;

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

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

    display:flex !important;
    flex-direction:column !important;

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

    text-align:left !important;

    transform:none !important;
  }


  /* Eyebrow */

  html body.rp-page-contact
  .rp-contact-eyebrow{
    width:100% !important;

    margin:0 0 15px !important;

    font-size:11px !important;
    line-height:1.2 !important;

    letter-spacing:.22em !important;
  }


  /* Main title.
     Natural wrapping — no old forced line fitting. */

  html body.rp-page-contact
  #rp-contact-title{
    box-sizing:border-box !important;

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

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

    font-size:clamp(35px,9.6vw,40px) !important;
    line-height:.91 !important;

    letter-spacing:-.045em !important;

    text-align:left !important;

    transform:none !important;
  }


  html body.rp-page-contact
  #rp-contact-title
  .rp-contact-line,

  html body.rp-page-contact
  #rp-contact-title
  .rp-contact-word,

  html body.rp-page-contact
  #rp-contact-title
  span{
    display:inline !important;

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

    font-size:inherit !important;
    line-height:inherit !important;
    letter-spacing:inherit !important;

    white-space:normal !important;

    transform:none !important;
  }


  html body.rp-page-contact
  #rp-contact-title
  .rp-contact-line:not(:last-child)::after{
    content:" " !important;
  }


  /* Supporting copy */

  html body.rp-page-contact
  .rp-contact-hero__content
  > p:not(.eyebrow){
    width:100% !important;
    max-width:32ch !important;

    margin:20px 0 0 !important;
    padding:0 !important;

    font-size:15px !important;
    line-height:1.46 !important;

    letter-spacing:-.005em !important;

    color:rgba(255,255,255,.92) !important;

    text-align:left !important;

    transform:none !important;
  }


  /* Mobile photography framing */

  html body.rp-page-contact
  .rp-contact-hero__media{
    inset:0 !important;

    width:100% !important;
    height:100% !important;
  }


  html body.rp-page-contact
  .rp-contact-hero__media img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    object-position:67% center !important;
  }


  /* More controlled contrast behind the copy.
     Photography stays visible. */

  html body.rp-page-contact
  .rp-contact-hero__shade{
    background:
      linear-gradient(
        90deg,
        rgba(4,14,27,.91) 0%,
        rgba(4,14,27,.76) 42%,
        rgba(4,14,27,.38) 72%,
        rgba(4,14,27,.14) 100%
      )
      !important;
  }

}


/* ==========================================================
   03 · VERY SMALL MOBILE
   ========================================================== */

@media (max-width:370px){

  html body.rp-page-contact
  .rp-contact-hero__content{
    width:calc(100% - 34px) !important;
  }

  html body.rp-page-contact
  #rp-contact-title{
    font-size:34px !important;
  }

  html body .rp-mobile-header-topline{
    font-size:9.5px !important;
    padding-inline:12px !important;
  }

}


/* ==========================================================
   MOBILE HEADER · NEVER SHOW LEGACY MESSAGE INSIDE HEADER
   Keep only .rp-mobile-header-topline above the header.
   ========================================================== */

@media (max-width:760px){

  html body
  .site-header[data-header]
  .rp-header-statement,

  html body
  .site-header[data-header]
  [data-rp-header-statement],

  html body
  .site-header[data-header]
  .rp-client-header-message,

  html body
  .site-header[data-header]
  .rp-header-union-message,

  html body
  .site-header[data-header].is-scrolled
  .rp-header-statement,

  html body
  .site-header[data-header].is-scrolled
  [data-rp-header-statement],

  html body
  .site-header[data-header].is-scrolled
  .rp-client-header-message,

  html body
  .site-header[data-header].is-scrolled
  .rp-header-union-message,

  html body
  .site-header[data-header].is-past-hero
  .rp-header-statement,

  html body
  .site-header[data-header].is-past-hero
  [data-rp-header-statement],

  html body
  .site-header[data-header].is-past-hero
  .rp-client-header-message,

  html body
  .site-header[data-header].is-past-hero
  .rp-header-union-message,

  html body
  .site-header[data-header][data-rp-v52-state="scrolled"]
  .rp-header-statement,

  html body
  .site-header[data-header][data-rp-v52-state="scrolled"]
  [data-rp-header-statement],

  html body
  .site-header[data-header][data-rp-v52-state="scrolled"]
  .rp-client-header-message,

  html body
  .site-header[data-header][data-rp-v52-state="scrolled"]
  .rp-header-union-message{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;

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

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

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

    overflow:hidden !important;

    pointer-events:none !important;

    position:absolute !important;
    left:-99999px !important;
    top:auto !important;
  }

}


/* ==========================================================
   REALPRO MOBILE HEADER · SCROLL CANONICAL V2
   Scope: mobile only.
   Desktop/tablet remain untouched.
   ========================================================== */

@media (max-width:760px){

  :root{
    --rp-mobile-topline-h:40px;
  }


  /* --------------------------------------------------------
     TOP OF PAGE
     Header overlays hero. No message strip.
     -------------------------------------------------------- */

  html:not(.rp-mobile-header-scrolled)
  body
  .rp-mobile-header-topline{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;

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

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

    overflow:hidden !important;
    pointer-events:none !important;
  }


  html:not(.rp-mobile-header-scrolled)
  body
  .site-header[data-header],

  html:not(.rp-mobile-header-scrolled)
  body
  .site-header[data-header].is-scrolled{
    top:0 !important;

    background:transparent !important;

    border:0 !important;
    border-bottom:0 !important;

    box-shadow:none !important;

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


  /* --------------------------------------------------------
     SCROLLED STATE
     Message strip appears ABOVE header.
     -------------------------------------------------------- */

  html.rp-mobile-header-scrolled
  body
  .rp-mobile-header-topline{
    position:fixed !important;

    z-index:2201 !important;

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

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

    box-sizing:border-box !important;

    width:100% !important;

    height:var(--rp-mobile-topline-h) !important;
    min-height:var(--rp-mobile-topline-h) !important;

    margin:0 !important;

    padding:0 14px !important;

    align-items:center !important;
    justify-content:center !important;

    background:rgba(255,255,255,.985) !important;

    border:0 !important;
    border-bottom:1px solid rgba(19,40,68,.08) !important;
    border-radius:0 !important;

    box-shadow:none !important;

    color:#142746 !important;

    font-size:10px !important;
    font-weight:800 !important;

    line-height:1.12 !important;
    letter-spacing:.02em !important;

    text-align:center !important;
    text-transform:uppercase !important;

    pointer-events:none !important;

    transition:
      opacity .22s ease,
      visibility .22s ease
      !important;
  }


  html.rp-mobile-header-scrolled
  body
  .rp-mobile-header-topline strong,

  html.rp-mobile-header-scrolled
  body
  .rp-mobile-header-topline em{
    color:#e63236 !important;

    font-style:normal !important;
    font-weight:900 !important;
  }


  html.rp-mobile-header-scrolled
  body
  .site-header[data-header],

  html.rp-mobile-header-scrolled
  body
  .site-header[data-header].is-scrolled,

  html.rp-mobile-header-scrolled
  body
  .site-header[data-header].is-past-hero,

  html.rp-mobile-header-scrolled
  body
  .site-header[data-header][data-rp-v52-state="scrolled"]{
    top:var(--rp-mobile-topline-h) !important;

    background:rgba(250,250,248,.96) !important;

    border:0 !important;
    border-bottom:1px solid rgba(19,40,68,.08) !important;

    box-shadow:
      0 8px 24px rgba(5,17,32,.06)
      !important;

    -webkit-backdrop-filter:
      blur(14px) saturate(1.05)
      !important;

    backdrop-filter:
      blur(14px) saturate(1.05)
      !important;
  }


  /* --------------------------------------------------------
     NEVER show legacy phrase inside the header on mobile.
     -------------------------------------------------------- */

  html body
  .site-header[data-header]
  .rp-header-statement,

  html body
  .site-header[data-header]
  [data-rp-header-statement],

  html body
  .site-header[data-header]
  .rp-client-header-message,

  html body
  .site-header[data-header]
  .rp-header-union-message,

  html body
  .site-header[data-header].is-scrolled
  .rp-header-statement,

  html body
  .site-header[data-header].is-scrolled
  [data-rp-header-statement],

  html body
  .site-header[data-header].is-scrolled
  .rp-client-header-message,

  html body
  .site-header[data-header].is-scrolled
  .rp-header-union-message,

  html body
  .site-header[data-header].is-past-hero
  .rp-header-statement,

  html body
  .site-header[data-header].is-past-hero
  [data-rp-header-statement],

  html body
  .site-header[data-header]
  [data-rp-v52-state="scrolled"]
  .rp-header-statement{
    display:none !important;

    visibility:hidden !important;
    opacity:0 !important;

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

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

    overflow:hidden !important;

    pointer-events:none !important;

    position:absolute !important;
    left:-99999px !important;
  }


  /* --------------------------------------------------------
     HERO ALIGNMENT
     No navy spacer between header and first hero.
     Global across primary hero pages.
     -------------------------------------------------------- */

  html:not(.rp-mobile-header-scrolled)
  body
  main#main
  > :first-child{
    margin-top:0 !important;
  }


  /* Contact keeps its approved image and mobile composition */

  html body.rp-page-contact
  main#main
  > section.rp-contact-hero{
    margin-top:0 !important;

    min-height:100svh !important;

    padding-top:
      calc(
        var(--rp-mobile-header-h,86px)
        + 22px
      )
      !important;
  }

}


/* ==========================================================
   MOBILE MENU TOGGLE · CONTRAST FIX
   White outer lines + red center line on dark header.
   ========================================================== */

@media (max-width:760px){

  html body
  .site-header[data-header]
  .menu-toggle{
    color:#ffffff !important;
  }

  html body
  .site-header[data-header]
  .menu-toggle span{
    background:#ffffff !important;
    opacity:1 !important;
  }

  html body
  .site-header[data-header]
  .menu-toggle span:nth-child(2){
    background:#ef3f3f !important;
  }

}


/* ==========================================================
   MOBILE MENU TOGGLE · INSTANT COLOR STATE
   Our html scroll state is the only color authority.
   No delayed color transition.
   ========================================================== */

@media (max-width:760px){

  /* Never animate hamburger color on mobile */

  html body
  .site-header[data-header]
  .menu-toggle,

  html body
  .site-header[data-header]
  .menu-toggle span{
    transition:none !important;
    animation:none !important;
  }


  /* --------------------------------------------------------
     TOP / OVER DARK HERO
     White + red immediately.
     Ignore legacy .is-scrolled state while our canonical
     controller says we are at the top.
     -------------------------------------------------------- */

  html:not(.rp-mobile-header-scrolled)
  body
  .site-header[data-header]
  .menu-toggle,

  html:not(.rp-mobile-header-scrolled)
  body
  .site-header[data-header].is-scrolled
  .menu-toggle,

  html:not(.rp-mobile-header-scrolled)
  body
  .site-header[data-header].is-past-hero
  .menu-toggle,

  html:not(.rp-mobile-header-scrolled)
  body
  .site-header[data-header][data-rp-v52-state="scrolled"]
  .menu-toggle{
    color:#ffffff !important;
  }


  html:not(.rp-mobile-header-scrolled)
  body
  .site-header[data-header]
  .menu-toggle span,

  html:not(.rp-mobile-header-scrolled)
  body
  .site-header[data-header].is-scrolled
  .menu-toggle span,

  html:not(.rp-mobile-header-scrolled)
  body
  .site-header[data-header].is-past-hero
  .menu-toggle span,

  html:not(.rp-mobile-header-scrolled)
  body
  .site-header[data-header][data-rp-v52-state="scrolled"]
  .menu-toggle span{
    background:#ffffff !important;
    color:#ffffff !important;
    opacity:1 !important;
    transition:none !important;
  }


  html:not(.rp-mobile-header-scrolled)
  body
  .site-header[data-header]
  .menu-toggle span:nth-child(2),

  html:not(.rp-mobile-header-scrolled)
  body
  .site-header[data-header].is-scrolled
  .menu-toggle span:nth-child(2),

  html:not(.rp-mobile-header-scrolled)
  body
  .site-header[data-header].is-past-hero
  .menu-toggle span:nth-child(2),

  html:not(.rp-mobile-header-scrolled)
  body
  .site-header[data-header][data-rp-v52-state="scrolled"]
  .menu-toggle span:nth-child(2){
    background:#ef3f3f !important;
    color:#ef3f3f !important;
  }


  /* --------------------------------------------------------
     SCROLLED / LIGHT HEADER
     Navy + red immediately.
     -------------------------------------------------------- */

  html.rp-mobile-header-scrolled
  body
  .site-header[data-header]
  .menu-toggle{
    color:#132844 !important;
  }


  html.rp-mobile-header-scrolled
  body
  .site-header[data-header]
  .menu-toggle span{
    background:#132844 !important;
    color:#132844 !important;
    opacity:1 !important;
    transition:none !important;
  }


  html.rp-mobile-header-scrolled
  body
  .site-header[data-header]
  .menu-toggle span:nth-child(2){
    background:#ef3f3f !important;
    color:#ef3f3f !important;
  }

}