:root{
  --hero-blue:#126df4;
  --hero-dark:#0d267f;
  --hero-cyan:#69e4ff;
  --hero-white:#fff;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  width:100%;
  overflow-x:hidden;
  font-family:Arial,Helvetica,sans-serif;
  background:#fff;
}

.property-hero {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    height: clamp(273px, 18.9vw, 313px);
    overflow: hidden;
    isolation: isolate;
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url("../images/desktop-original-crop.jpg");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:100% 100%;
}

/* These layers hide the text/buttons that were present in the supplied
   reference artwork. The actual content is recreated as HTML below. */
.hero-mask{
  position:absolute;
  z-index:1;
  pointer-events:none;
}

.hero-mask-center{
  left:25%;
  right:25%;
  top:0;
  height:76%;
  background:
    radial-gradient(circle at 50% 12%,rgba(55,145,255,.45),rgba(8,91,188,.18) 48%,rgba(0,72,165,.08) 100%);
}

.hero-mask-right{
  right:0;
  top:0;
  width:27%;
  height:72%;
  background:linear-gradient(90deg,rgba(0,90,190,.05),rgba(0,80,170,.40));
}

.hero-content{
  position:absolute;
  z-index:2;
  top:8%;
  left:50%;
  width:min(650px,42vw);
  transform:translateX(-50%);
  text-align:center;
  color:#fff;
}

.hero-title{
  margin:0;
  font-size:clamp(25px,2.15vw,38px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.8px;
  text-shadow:0 2px 8px rgba(0,30,100,.22);
}

.hero-title span,
.hero-title strong{
  display:inline;
}

.hero-title strong{
  color:var(--hero-cyan);
}

.hero-subtitle{
  margin:8px 0 18px;
  font-size:clamp(15px,1.15vw,21px);
  line-height:1.35;
  font-weight:400;
  color:#fff;
  text-shadow:0 1px 5px rgba(0,30,100,.2);
}

.hero-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.hero-call-btn,
.hero-callback-btn{
  height:60px;
  border-radius:11px;
  font-size:clamp(15px,1.08vw,20px);
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
}

.hero-call-btn{
  width:340px;
  color:#fff;
  background:linear-gradient(135deg,#087cff,#1761f4);
  border:2px solid #5bd0ff;
  box-shadow:0 3px 8px rgba(0,35,130,.18);
  gap:10px;
}

.hero-call-btn b{
  font-weight:700;
}

.phone-icon{
  width:27px;
  height:27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:3px solid #fff;
  border-top-color:transparent;
  border-radius:50%;
  transform:rotate(-42deg);
  font-size:0;
  position:relative;
}

.phone-icon:after{
  content:"";
  width:8px;
  height:14px;
  background:#fff;
  border-radius:5px;
  position:absolute;
  right:-2px;
  bottom:-2px;
}

.hero-callback-btn{
  width:280px;
  color:#102487;
  background:#fff;
  border:2px solid #263cff;
  box-shadow:0 3px 8px rgba(0,35,130,.18);
}

.hero-call-btn:hover,
.hero-callback-btn:hover{
  transform:translateY(-1px);
}

.hero-call-btn,
.hero-callback-btn{
  transition:transform .18s ease,box-shadow .18s ease;
}

@media (max-width:1199.98px){
  .hero-content{width:min(620px,48vw)}
  .hero-actions{gap:10px}
  .hero-call-btn{width:320px}
  .hero-callback-btn{width:260px}
}

@media (max-width:767.98px){
  .property-hero{
    height:calc(100vw * 750 / 497);
    min-height:560px;
    max-height:750px;
  }

  .hero-bg{
    background-image:url("../images/mobile-original.jpg");
    background-size:100% 100%;
    background-position:center top;
  }

  .hero-mask-center{
    left:0;
    right:0;
    top:0;
    height:44%;
    background:
      linear-gradient(180deg,rgba(0,77,169,.10),rgba(0,93,190,.34) 55%,rgba(0,87,184,.20));
  }

  .hero-mask-right{
    right:0;
    top:39%;
    width:39%;
    height:24%;
    background:linear-gradient(90deg,rgba(0,83,177,.06),rgba(0,85,180,.55));
  }

  .hero-content{
    top:5.6%;
    left:50%;
    width:86%;
  }

  .hero-title{
    font-size:clamp(31px,8.2vw,41px);
    line-height:1.03;
    letter-spacing:-1px;
  }

  .hero-title span,
  .hero-title strong{
    display:block;
  }

  .hero-subtitle{
    margin:12px auto 14px;
    width:100%;
    font-size:clamp(15px,4vw,20px);
    line-height:1.35;
  }

  .desktop-break{display:none}

  .hero-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .hero-call-btn,
  .hero-callback-btn{
    width:100%;
    height:56px;
    border-radius:10px;
    font-size:clamp(15px,4.1vw,19px);
  }

  .hero-call-btn{
    gap:9px;
  }

  .phone-icon{
    width:25px;
    height:25px;
  }
}

@media (max-width:380px){
  .hero-content{top:5%}
  .hero-subtitle{margin-top:10px;margin-bottom:12px}
  .hero-call-btn,.hero-callback-btn{height:52px}
}

@media (prefers-reduced-motion:reduce){
  .hero-call-btn,.hero-callback-btn{transition:none}
}