/* =========================================================
   SUKHIJA & ASSOCIATES
   STATIC HERO + PROJECT ENQUIRY
   ========================================================= */

.sa-hero{
  position:relative;
  min-height:620px;
  margin-top:0;
  overflow:hidden;
  color:#fff;
  background:#071a33;
  isolation:isolate;
}

.sa-hero-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    url("../images/hero-construction.svg")
    center center / cover no-repeat !important;
  opacity:1 !important;
  transform:scale(1.04);
  filter:brightness(.92) contrast(1.04) saturate(.82);
}

.sa-hero-overlay{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,
      rgba(5,5,5,.82) 0%,
      rgba(5,5,5,.64) 42%,
      rgba(5,5,5,.35) 72%,
      rgba(5,5,5,.28) 100%
    ),
    linear-gradient(180deg,
      rgba(5,5,5,.12) 0%,
      rgba(5,5,5,.38) 100%
    ) !important;
}

.sa-hero-inner{
  min-height:620px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(410px,.72fr);
  align-items:center;
  gap:64px;
  padding-top:34px;
  padding-bottom:34px;
}

.sa-hero-content{
  max-width:730px;
}

.sa-hero-kicker,
.sa-enquiry-kicker{
  color:#87ceeb;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:2.2px;
  text-transform:uppercase;
}

.sa-hero-kicker{margin-bottom:18px}

.sa-hero h1{
  margin:0;
  color:#fff;
  font:700 clamp(3.2rem,5.3vw,5.8rem)/1.02 Georgia,serif;
  letter-spacing:-2.8px;
}

.sa-hero h1 span{color:#87ceeb}

.sa-hero-rule{
  width:82px;
  height:4px;
  margin:27px 0 23px;
  background:#c62828;
}

.sa-hero-content>p{
  max-width:690px;
  margin:0;
  color:#f1f6fb;
  font-size:1.08rem;
  line-height:1.8;
}

.sa-hero-services{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 32px;
  margin:34px 0 30px;
}

.sa-hero-services div{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:46px;
}

.sa-hero-services i{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  flex:0 0 52px;
  border:0;
  border-radius:50%;
  overflow:hidden;
  color:#c9a45c;
  font-style:normal;
  font-size:.72rem;
  font-weight:800;
  background:#101010;
}

.sa-hero-services i img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.sa-hero-services strong{
  color:#fff;
  font-size:.91rem;
}

.sa-hero-actions{
  display:flex;
  align-items:center;
  gap:25px;
}

.sa-hero-btn{
  display:inline-flex;
  align-items:center;
  gap:13px;
  padding:14px 22px;
  border-radius:6px;
  background:#c62828;
  color:#fff;
  font-weight:800;
  box-shadow:0 12px 28px rgba(0,0,0,.2);
  transition:.25s ease;
}

.sa-hero-btn:hover{
  color:#fff;
  background:#db3030;
  transform:translateY(-2px);
}

.sa-hero-btn span{font-size:1.2rem}

.sa-hero-link{
  position:relative;
  padding:8px 0;
  color:#fff;
  font-weight:750;
}

.sa-hero-link:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background:#87ceeb;
}

.sa-enquiry-card{
  width:100%;
  padding:30px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:14px;
  background:rgba(255,255,255,.98);
  color:#14243a;
  box-shadow:0 28px 75px rgba(0,0,0,.28);
}

.sa-enquiry-kicker{
  color:#c62828;
  letter-spacing:1.8px;
  margin-bottom:8px;
}

.sa-enquiry-card h2{
  margin:0 0 8px;
  color:#071a33;
  font:700 clamp(1.7rem,2.4vw,2.35rem)/1.15 Georgia,serif;
}

.sa-enquiry-card>p{
  margin:0 0 20px;
  color:#687386;
  font-size:.91rem;
  line-height:1.55;
}

.sa-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.sa-hero-form label{
  display:block;
  margin:0 0 5px;
  color:#596678;
  font-size:.72rem;
  font-weight:750;
}

.sa-hero-form input,
.sa-hero-form textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #d7dfe7;
  border-radius:6px;
  background:#fff;
  color:#152647;
  font:inherit;
  font-size:.9rem;
  outline:0;
  transition:.22s ease;
}

.sa-hero-form input{
  height:46px;
  padding:0 13px;
  margin-bottom:12px;
}

.sa-hero-form textarea{
  min-height:88px;
  padding:11px 13px;
  resize:vertical;
  margin-bottom:12px;
}

.sa-hero-form input:focus,
.sa-hero-form textarea:focus{
  border-color:#c62828;
  box-shadow:0 0 0 3px rgba(198,40,40,.1);
}

.sa-enquiry-btn{
  position:relative;
  width:100%;
  min-height:53px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:0;
  border-radius:7px;
  background:linear-gradient(135deg,#c62828,#a91f1f);
  color:#fff;
  font-weight:800;
  font-size:.98rem;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(198,40,40,.25);
  transition:.25s ease;
}

.sa-enquiry-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 30px rgba(198,40,40,.34);
}

.sa-enquiry-btn b{
  font-size:1.2rem;
  transition:.25s;
}

.sa-enquiry-btn:hover b{transform:translateX(4px)}

.sa-enquiry-card small{
  display:block;
  margin-top:10px;
  color:#8b95a2;
  text-align:center;
  font-size:.66rem;
}







@media(max-width:1050px){
  .sa-hero-inner{
    grid-template-columns:1fr;
    gap:38px;
    padding-top:70px;
  }
  .sa-enquiry-card{max-width:720px}
}

@media(max-width:800px){
  .sa-hero{
    margin-top:0;
    min-height:auto;
  }

  .sa-hero-inner{
    min-height:auto;
    width:min(92%,700px);
    padding-top:58px;
    padding-bottom:50px;
  }

  .sa-hero h1{
    font-size:clamp(2.65rem,11vw,4.2rem);
    letter-spacing:-1.8px;
  }

  .sa-hero-content>p{font-size:1rem}

  .sa-hero-services{
    grid-template-columns:1fr;
    gap:11px;
  }

  .sa-enquiry-card{padding:24px 20px}

  .sa-form-grid{grid-template-columns:1fr}
}

@media(max-width:480px){
  .sa-hero-actions{
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
  }

  .sa-hero-btn{width:100%;justify-content:center}

  .sa-enquiry-card h2{font-size:1.7rem}
}


/* =========================================================
   SAFETY: KEEP EXISTING LOWER SECTIONS IN NORMAL DOCUMENT FLOW
   These rules are intentionally scoped only to the new hero.
   ========================================================= */
.sa-hero + section,
.sa-hero ~ section{
  position:relative;
  float:none;
  clear:both;
  width:auto;
  height:auto;
  min-height:0;
  overflow:visible;
  display:block;
}

.sa-hero + section .container,
.sa-hero ~ section .container{
  height:auto;
  min-height:0;
}

/* Do not let the hero stylesheet override existing component layouts. */
.sa-hero ~ section .row{
  display:flex;
}


/* Compact hero spacing — final override */
.sa-hero{
  width:100%;
  max-width:100%;
  min-height:620px !important;
}
.sa-hero .sa-hero-inner {
    width: min(1180px,92%);
    max-width: 100%;
    min-height: 620px !important;
    padding-top: 53px !important;
    padding-bottom: 34px !important;
}
.sa-hero-content,
.sa-enquiry-card{
  min-width:0;
}

@media (max-width: 1050px){
  .sa-hero .sa-hero-inner{
    grid-template-columns:minmax(0,1fr);
  }
}

@media (max-width: 900px){
  .sa-hero,
  .sa-hero .sa-hero-inner{
    min-height:auto !important;
  }
  .sa-hero .sa-hero-inner{
    padding-top:35px !important;
    padding-bottom:55px !important;
  }
}

@media (max-width: 800px){
  .sa-hero{
    overflow:hidden;
  }
  .sa-hero .sa-hero-inner{
    width:min(92%,700px);
    max-width:100%;
    grid-template-columns:minmax(0,1fr);
  }
  .sa-hero-content{
    width:100%;
    max-width:100%;
  }
  .sa-hero h1{
    max-width:100%;
    overflow-wrap:break-word;
  }
  .sa-enquiry-card{
    width:100%;
    max-width:100%;
  }
}