/*
 * REALPRO STUDIOS
 * CONTACT REFINEMENT R3.3
 * Hero typography normalization
 * Contact intro section polish
 */


/* ==========================================================
   01 · CONTACT HERO TYPOGRAPHY
   ========================================================== */

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]{
  height:clamp(360px,44svh,500px) !important;
  min-height:clamp(360px,44svh,500px) !important;
  max-height:500px !important;
  padding:
    clamp(84px,9svh,108px)
    0
    clamp(30px,4svh,44px)
    !important;
  align-items:flex-end !important;
}

html body.rp-page-contact
.rp-contact-title-final,

html body.rp-page-contact
h1#rp-contact-title{
  width:min(100%,11.2ch) !important;
  max-width:11.2ch !important;
  font-size:clamp(34px,3.35vw,58px) !important;
  line-height:.92 !important;
  letter-spacing:-.04em !important;
  margin:0 !important;
}

html body.rp-page-contact
.rp-contact-title-final
.rp-contact-line{
  white-space:normal !important;
}

html body.rp-page-contact
.rp-contact-hero__content
> p:not(.eyebrow){
  width:min(100%,40ch) !important;
  max-width:40ch !important;
  margin-top:18px !important;
  font-size:clamp(14px,.96vw,17px) !important;
  line-height:1.55 !important;
  color:rgba(255,255,255,.84) !important;
}

html body.rp-page-contact
.rp-contact-eyebrow{
  margin-bottom:14px !important;
}


/* ==========================================================
   02 · CONTACT SECTION BELOW HERO
   Immediate next section only
   ========================================================== */

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section{
  padding:
    clamp(56px,6vw,88px)
    0
    clamp(64px,7vw,96px)
    !important;
  min-height:auto !important;
}

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section
.container{
  display:grid !important;
  grid-template-columns:
    minmax(0,1.05fr)
    minmax(360px,.95fr)
    !important;
  gap:clamp(28px,4vw,60px) !important;
  align-items:start !important;
}

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section
h1,

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section
h2{
  max-width:8.4ch !important;
  font-size:clamp(40px,4.15vw,68px) !important;
  line-height:.92 !important;
  letter-spacing:-.045em !important;
  color:#142746 !important;
  margin:0 !important;
}

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section
p{
  color:#5a6d8b !important;
  font-size:clamp(16px,1vw,18px) !important;
  line-height:1.55 !important;
}

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section
.container
> :last-child{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px !important;
  align-content:start !important;
}

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section
.container
> :last-child
> *:nth-child(3){
  grid-column:1 / -1 !important;
}

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section
a[href^="mailto:"],

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section
a[href^="tel:"],

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section
.rp-contact-card,

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section
.contact-card{
  min-height:92px !important;
  border-radius:24px !important;
  padding:20px 24px !important;
  background:
    linear-gradient(
      180deg,
      #f7f9fc 0%,
      #edf1f6 100%
    )
    !important;
  border:1px solid rgba(20,39,70,.10) !important;
  box-shadow:0 16px 32px rgba(19,36,66,.08) !important;
  color:#142746 !important;
  text-decoration:none !important;
}

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section
a[href^="mailto:"]:hover,

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section
a[href^="tel:"]:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 18px 34px rgba(19,36,66,.11) !important;
}

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section
a[class*="btn"],

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section
a[class*="button"]{
  min-height:58px !important;
  border-radius:999px !important;
  padding:0 30px !important;
  box-shadow:0 16px 30px rgba(231,55,58,.24) !important;
}

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section
hr{
  opacity:.28 !important;
  margin-top:18px !important;
}


/* ==========================================================
   03 · MOBILE
   ========================================================== */

@media (max-width:760px){

  html body.rp-page-contact
  main#main
  > section.rp-contact-hero[data-rp-surface="dark"]{
    height:clamp(390px,52svh,480px) !important;
    min-height:clamp(390px,52svh,480px) !important;
    max-height:480px !important;
    padding:88px 0 28px !important;
  }

  html body.rp-page-contact
  .rp-contact-title-final,

  html body.rp-page-contact
  h1#rp-contact-title{
    max-width:10.5ch !important;
    font-size:clamp(30px,9.2vw,42px) !important;
    line-height:.94 !important;
  }

  html body.rp-page-contact
  .rp-contact-hero__content
  > p:not(.eyebrow){
    max-width:30ch !important;
    margin-top:14px !important;
    font-size:14px !important;
    line-height:1.45 !important;
  }

  html body.rp-page-contact
  main#main
  > section.rp-contact-hero[data-rp-surface="dark"]
  + section
  .container{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  html body.rp-page-contact
  main#main
  > section.rp-contact-hero[data-rp-surface="dark"]
  + section
  h1,

  html body.rp-page-contact
  main#main
  > section.rp-contact-hero[data-rp-surface="dark"]
  + section
  h2{
    max-width:8.6ch !important;
    font-size:clamp(34px,10vw,46px) !important;
  }

  html body.rp-page-contact
  main#main
  > section.rp-contact-hero[data-rp-surface="dark"]
  + section
  .container
  > :last-child{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  html body.rp-page-contact
  main#main
  > section.rp-contact-hero[data-rp-surface="dark"]
  + section
  .container
  > :last-child
  > *:nth-child(3){
    grid-column:auto !important;
  }

}