/* Final main-site header treatment: logo artwork aligned to the page edges with the gold divider precisely between HLONYANE and RESIDENTIAL. */
html{scroll-padding-top:104px}
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:20;
  width:100%;
  height:92px;
  min-height:92px;
  padding:0 4.5vw 0 390px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  overflow:visible;
  background:transparent!important;
  border-bottom:0;
}
/* Paint only the actual header band. Any overflow below the gold line remains transparent so the hero shows through. */
.site-header::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:92px;
  background:#171717;
  z-index:21;
  pointer-events:none;
}
.site-header::after{
  content:"";
  position:absolute;
  left:120px;
  right:0;
  top:92px;
  height:3px;
  background:#b9974a;
  z-index:24;
  pointer-events:none;
}
.site-header .brand{
  position:absolute;
  left:-9px;
  top:-31px;
  z-index:22;
  display:block;
  width:350px;
  height:178px;
  line-height:0;
  background:none!important;
}
.site-header .brand img{
  display:block!important;
  width:350px!important;
  height:178px!important;
  max-width:none;
  object-fit:contain;
  object-position:left top;
  opacity:1!important;
  background:transparent!important;
  mix-blend-mode:normal;
}
.site-header .site-nav{
  position:relative;
  z-index:25;
  display:flex;
  align-items:center;
  gap:28px;
  margin-left:auto;
  transform:translateY(-8px);
}
.site-header .site-nav a{font-size:14px}
.site-header .menu-toggle{position:relative;z-index:25}
.hero{
  margin-top:0!important;
  padding-top:172px;
  background-image:url("property-photos/1.jpg")!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.hero-art{
  top:0!important;
  background-image:url("property-photos/1.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

@media(max-width:1150px){
  .site-header{height:81px;min-height:81px;padding-left:315px;padding-right:3vw}
  .site-header::before{height:81px}
  .site-header::after{left:104px;top:81px}
  .site-header .brand{left:-8px;top:-27px;width:300px;height:153px}
  .site-header .brand img{width:300px!important;height:153px!important}
  .site-header .site-nav{gap:16px;transform:translateY(-6px)}
  .site-header .site-nav a{font-size:13px}
  .hero{padding-top:153px}
}

@media(max-width:800px){
  html{scroll-padding-top:80px}
  .site-header{height:72px;min-height:72px;padding:0 18px}
  .site-header::before{height:59px}
  .site-header::after{left:38px;top:59px;height:2px}
  .site-header .brand{left:-6px;top:-20px;width:220px;height:112px}
  .site-header .brand img{width:220px!important;height:112px!important}
  .site-header .menu-toggle{display:block;margin-left:auto}
  .site-header .site-nav{top:72px;background:#171717;border-bottom:1px solid #b9974a;transform:none}
  .hero{padding-top:136px;margin-top:0!important}
}