/*
 * REALPRO STUDIOS
 * CONTACT REFINEMENT R3.4
 * Final typography + CTA correction
 */


/* ==========================================================
   01 · HERO — stronger title + supporting copy
   ========================================================== */

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

html body.rp-page-contact
h1#rp-contact-title{
  width:min(100%,12.4ch) !important;
  max-width:12.4ch !important;
  font-size:clamp(44px,4.15vw,72px) !important;
  line-height:.90 !important;
  letter-spacing:-.045em !important;
}

html body.rp-page-contact
.rp-contact-eyebrow{
  font-size:clamp(11px,.78vw,13px) !important;
  letter-spacing:.24em !important;
  margin-bottom:16px !important;
}

html body.rp-page-contact
.rp-contact-hero__content
> p:not(.eyebrow){
  width:min(100%,46ch) !important;
  max-width:46ch !important;
  margin-top:22px !important;
  font-size:clamp(16px,1.08vw,19px) !important;
  line-height:1.55 !important;
  color:rgba(255,255,255,.88) !important;
}


/* ==========================================================
   02 · CONTACT INTRO — improve title hierarchy
   ========================================================== */

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{
  width:min(100%,11ch) !important;
  max-width:11ch !important;
  font-size:clamp(46px,4.65vw,76px) !important;
  line-height:.91 !important;
  letter-spacing:-.048em !important;
}

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


/* ==========================================================
   03 · CONTACT CARDS
   Slightly stronger typography
   ========================================================== */

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:"]{
  font-size:clamp(16px,1.05vw,19px) !important;
  font-weight:700 !important;
  color:#142746 !important;
}


/* ==========================================================
   04 · START YOUR PROJECT
   Restore brand-red CTA explicitly
   ========================================================== */

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"],

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section
[data-rp-open-form="project"]{
  min-height:58px !important;
  padding:0 32px !important;

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

  background:#df2f32 !important;
  background-image:none !important;

  color:#ffffff !important;

  border:1px solid #df2f32 !important;
  border-radius:999px !important;

  box-shadow:
    0 14px 30px
    rgba(223,47,50,.26)
    !important;

  font-weight:800 !important;
  text-decoration:none !important;

  opacity:1 !important;
  filter:none !important;

  transition:
    transform .2s ease,
    background-color .2s ease,
    box-shadow .2s ease
    !important;
}

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

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

html body.rp-page-contact
main#main
> section.rp-contact-hero[data-rp-surface="dark"]
+ section
[data-rp-open-form="project"]:hover{
  background:#c9282b !important;
  border-color:#c9282b !important;
  color:#ffffff !important;

  transform:translateY(-2px) !important;

  box-shadow:
    0 18px 34px
    rgba(223,47,50,.32)
    !important;
}


/* ==========================================================
   05 · MOBILE
   ========================================================== */

@media (max-width:760px){

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

  html body.rp-page-contact
  h1#rp-contact-title{
    max-width:11.2ch !important;
    font-size:clamp(34px,10.4vw,46px) !important;
    line-height:.92 !important;
  }

  html body.rp-page-contact
  .rp-contact-hero__content
  > p:not(.eyebrow){
    max-width:33ch !important;
    font-size:15px !important;
    line-height:1.48 !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:10.5ch !important;
    font-size:clamp(38px,11vw,50px) !important;
    line-height:.92 !important;
  }

}