:root {
  --dark: #11110f;
  --black: #0b0b09;
  --orange: #df5b22;
  --orange-2: #f07a2f;
  --cream: #f6efe6;
  --muted: #73706a;
  --light: #fffaf3;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #171411;
  background: var(--light);
  overflow-x: hidden;
}

a {
  text-decoration: none
}

img {
  max-width: 100%;
  display: block
}

.section-pad {
  padding: 110px 0
  
}

.eyebrow {
  color: var(--orange);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 14px
}

h1 {
  font-size: clamp(42px, 7vw, 86px);
  line-height: .96;
  font-weight: 900;
  letter-spacing: -3px
}

h2 {
  font-size: clamp(32px, 4vw, 45px);
  font-weight: 900;
  letter-spacing: -2px
}

h3 {
  font-weight: 800
}

.btn-brand {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  border-radius: 0;
  padding: 14px 24px;
  font-weight: 800;
  text-transform: capitalize;
  position: relative;
  overflow: hidden
}

.btn-brand:hover {
  background: var(--black);
  border-color: var(--black);
  color: #fff
}

.btn-phone {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  border-radius: 20px;
  padding: 14px 24px;
  font-weight: 800;
  font-size: 40px;
  text-transform: capitalize;
  position: relative;
  overflow: hidden
}

.btn-phone:hover {
  background: white;
  border-color: var(--black);
  color: var(--orange);
}

.topbar {
  background: var(--black);
  color: #fff;
  font-size: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #ffffff12
}

.main-nav {
  background: #fffaf3;
  box-shadow: 0 18px 45px #0b0b0910
}

.navbar-brand {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 8px;
  color: #14110f !important
}

.nav-link {
  font-size: 14px;
  font-weight: 600;
  color: #111 !important;
  margin: 0 5px
}

.nav-link.active {
  font-size: 14px;
  font-weight: 600;
  color: #df5b22 !important;
  margin: 0 5px
}

/* HERO - keep this one */
.simple-hero {
  min-height: 760px;
  padding: 120px 0;
  background:
    linear-gradient(120deg, rgba(11, 11, 9, .86), rgba(11, 11, 9, .55)),
    url("../img/hero.webp");
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.simple-hero h1 {
  color: #fff;
  font-size: clamp(46px, 6vw, 55px);
  line-height: 1;
  letter-spacing: -3px;
  margin: 16px 0 22px
}

.simple-hero p {
  color: #eee4da;
  font-size: 18px;
  line-height: 1.8;
  max-width: 520px;
  margin-bottom: 30px
}

.hero-photo-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: 220px 220px;
  gap: 18px;
  position: relative;
  z-index: 2
}

.hero-photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 26px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .35)
}

.hero-photo-grid .big {
  grid-row: span 2
}

.vent {
  min-height: 760px;
  padding: 120px 0;
  background:
    linear-gradient(120deg, rgba(11, 11, 9, .86), rgba(11, 11, 9, .55)),
    url("../img/hero-vent.webp");
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.furnace {
  min-height: 760px;
  padding: 120px 0;
  background:
    linear-gradient(120deg, rgba(11, 11, 9, .86), rgba(11, 11, 9, .55)),
    url("../img/furnace.webp");
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.ac {
  min-height: 760px;
  padding: 120px 0;
  background:
    linear-gradient(120deg, rgba(11, 11, 9, .86), rgba(11, 11, 9, .55)),
    url("../img/ac.webp");
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.duct {
  min-height: 760px;
  padding: 120px 0;
  background:
    linear-gradient(120deg, rgba(11, 11, 9, .86), rgba(11, 11, 9, .55)),
    url("../img/duct-sealing.webp");
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.dryer {
  min-height: 760px;
  padding: 120px 0;
  background:
    linear-gradient(120deg, rgba(11, 11, 9, .86), rgba(11, 11, 9, .55)),
    url("../img/dryer.webp");
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}


.wind-bg {
  position: relative;
  overflow: hidden
}

.wind-lines {
  position: absolute;
  inset: -20%;
  background: repeating-linear-gradient(115deg, transparent 0 42px, rgba(255, 255, 255, .08) 43px 44px, transparent 45px 90px);
  animation: windMove 13s linear infinite;
  pointer-events: none;
  z-index: 1
}

.wind-bg>.container {
  position: relative;
  z-index: 2
}

/* Clean section backgrounds - no annoying lines */
.about,
#services,
.process,
#projects,
#blog,
.contact,
.preventive,
.faq-stats {
  position: relative;
  overflow: hidden;
  background: #fffaf3
}

#services,
.preventive,
#blog {
  background: #f7f1e9
}

.about::before,
#services::before,
.process::before,
#projects::before,
#blog::before,
.contact::before,
.preventive::before,
.faq-stats::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(223, 91, 34, .045);
  filter: blur(95px);
  top: -170px;
  right: -160px;
  pointer-events: none;
}

.about>.container,
#services>.container,
.process>.container,
#projects>.container,
#blog>.container,
.contact>.container,
.preventive>.container,
.faq-stats>.container {
  position: relative;
  z-index: 2
}

.about-stack {
  position: relative
}

.about-stack img {
  height: 560px;
  object-fit: cover;
  border-radius: 35px
}

.badge-card {
  position: absolute;
  right: -20px;
  bottom: 35px;
  background: var(--orange);
  color: #fff;
  padding: 35px;
  font-size: 28px;
  font-weight: 900;
  box-shadow: 0 25px 50px #0002
}

.check-list {
  padding: 0;
  list-style: none
}

.check-list li {
  margin: 14px 0;
  font-weight: 800
}

.check-list li:before {
  content: '✓';
  color: var(--orange);
  margin-right: 10px
}

.marquee-wrap {
  background: var(--black);
  color: #fff;
  padding: 22px 0;
  overflow: hidden
}

.marquee {
  display: flex;
  white-space: nowrap;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 1px;
  animation: marquee 18s linear infinite
}

.marquee span {
  padding-right: 60px
}

.service-card,
.quote,
.blog,
.step {
  background: #fffdf8;
  padding: 26px;
  box-shadow: 0 15px 45px #00000010;
  transition: .35s;
  border-radius: 0;
  height: 100%
}

.service-card:hover,
.blog:hover,
.quote:hover,
.step:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 70px rgba(17, 17, 15, .18)
}

.service-card img {
  height: 210px;
  width: 100%;
  object-fit: cover;
  border-radius: 0;
  margin-bottom: 24px;
  filter: saturate(1.05) contrast(1.03)
}

.service-card a {
  color: var(--orange);
  font-weight: 900
}

.cta {
  margin-top: -1px;
  background: white
  
}

.cta-box {
  background: var(--orange);
  color: #fff;
  padding: 60px;
  margin-bottom: 30px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  flex-wrap: wrap;
  transform: translateY(70px);
  box-shadow: 0 25px 60px #0003
  
}

.cta-box h2,
.cta-box h3,
.cta-box span {
  color: #fff
}

.process {
  padding-top: 170px
}

.step {
  position: relative
}

.step b {
  position: absolute;
  top: -28px;
  left: 28px;
  width: 58px;
  height: 58px;
  background: var(--orange);
  color: #fff;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 24px
}

.step i {
  font-size: 56px;
  color: var(--orange);
  margin: 25px 0;
  display: block
}

.feature-dark {
  background: var(--black);
  color: #fff
}

.feature-dark p {
  color: #cfd2d5
}

.mini {
  display: flex;
  gap: 20px;
  margin-top: 26px
}

.mini i {
  font-size: 42px;
  color: var(--orange)
}

.project {
  position: relative;
  overflow: hidden;
  border-radius: 0
}

.project img {
  height: 370px;
  width: 100%;
  object-fit: cover;
  transition: .6s;
  filter: saturate(1.05) contrast(1.03)
}

.project h3 {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: #fff;
  padding: 18px;
  border-radius: 0;
  transform: translateY(110%);
  transition: .4s
}

.project:hover img {
  transform: scale(1.12)
}

.project:hover h3 {
  transform: translateY(0)
}

.quote {
  border-left: 5px solid var(--orange)
}

.quote span,
.blog small {
  color: var(--orange);
  font-weight: 800
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px
}

.stats-grid div {
  background: var(--black);
  color: #fff;
  margin-top: 30px;
  padding: 42px;
  border-radius: 24px
}

.stats-grid strong {
  font-size: 52px;
  display: block;
  color: var(--orange)
}

.blog img {
  height: 260px;
  width: 100%;
  object-fit: cover;
  border-radius: 0;
  margin-bottom: 22px;
  filter: saturate(1.05) contrast(1.03)
}

/* .contact-form {
  display: grid;
  gap: 16px
} */

/* .form-control {
  border-radius: 0;
  padding: 15px;
  border: 1px solid #ddd
} */

.footer {
  background: #0d1117;
  color: #cfd2d5;
  padding: 80px 0 25px
}

.footer h2,
.footer h3 {
  color: #fff
}

.footer a {
  display: inline-block;
  color: #cfd2d5;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  display: none
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--orange);
  border-radius: 50%
}

.cursor-ring {
  width: 38px;
  height: 38px;
  border: 1px solid var(--orange);
  border-radius: 50%;
  transition: .12s
}

#preloader {
  position: fixed;
  inset: 0;
  background: var(--black);
  color: #fff;
  z-index: 10000;
  display: grid;
  place-content: center;
  text-align: center;
  transition: .7s
}

#preloader h1 {
  font-size: 42px;
  letter-spacing: 14px;
  margin-bottom: 18px
}

#preloader span {
  color: var(--orange);
  font-weight: 800
}

.loaded #preloader {
  opacity: 0;
  visibility: hidden
}

.reveal {
  opacity: 0;
  transform: translateY(55px);
  transition: 1s cubic-bezier(.2, .8, .2, 1)
}

.reveal.show {
  opacity: 1;
  transform: none
}

.delay-1 {
  transition-delay: .15s
}

.delay-2 {
  transition-delay: .3s
}

.delay-3 {
  transition-delay: .45s
}

@keyframes marquee {
  to {
    transform: translateX(-50%)
  }
}

@keyframes float {
  50% {
    transform: translateY(-30px) rotate(10deg)
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #ff6b2c77
  }

  70% {
    box-shadow: 0 0 0 24px #ff6b2c00
  }

  100% {
    box-shadow: 0 0 0 0 #ff6b2c00
  }
}

@keyframes windMove {
  from {
    transform: translateX(-8%) translateY(0)
  }

  to {
    transform: translateX(8%) translateY(-6%)
  }
}

@media (pointer:fine) {

  .cursor-dot,
  .cursor-ring {
    display: block
  }

  body {
    cursor: none
  }
}

@media (max-width:991px) {

  
.btn-phone {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  border-radius: 20px;
  padding: 14px 24px;
  font-weight: 800;
  font-size: 30px;
  text-transform: capitalize;
  position: relative;
  overflow: hidden
}

.btn-phone:hover {
  background: white;
  border-color: var(--black);
  color: var(--orange);
}

  .section-pad {
    padding: 75px 0
  }

  .simple-hero {
    min-height: auto;
    padding: 90px 0
  }

  .hero-photo-grid {
    grid-template-rows: 180px 180px
  }

  .about-stack img {
    height: 420px
  }

  .cta-box {
    display: block
  }

  .stats-grid {
    grid-template-columns: 1fr
  }

  .marquee {
    font-size: 28px
  }

  .navbar-brand {
    letter-spacing: 4px
  }
}

@media (max-width:575px) {
  .hero-photo-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 160px 140px 140px
  }

  .hero-photo-grid .big {
    grid-column: span 2;
    grid-row: auto
  }
}

#services span{
font-size: 27px;
font-weight: 900;
display: block;
}

/* Floating circles background */

#services,
.process,
#projects,
#blog,
.about,
.contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#services::before,
.process::before,
#projects::before,
#blog::before,
.about::before,
.contact::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(223, 91, 34, .12);
  top: 10%;
  right: 5%;
  animation: circleFloat1 12s ease-in-out infinite;
  z-index: 0;
}

#services::after,
.process::after,
#projects::after,
#blog::after,
.about::after,
.contact::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(223, 91, 34, .08);
  bottom: 15%;
  left: 5%;
  animation: circleFloat2 10s ease-in-out infinite;
  z-index: 0;
}

#services .container,
.process .container,
#projects .container,
#blog .container,
.about .container,
.contact .container {
  position: relative;
  z-index: 2;
}

@keyframes circleFloat1 {
  0% {
    transform: translateY(0) translateX(0);
  }

  50% {
    transform: translateY(-40px) translateX(20px);
  }

  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes circleFloat2 {
  0% {
    transform: translateY(0) translateX(0);
  }

  50% {
    transform: translateY(35px) translateX(-25px);
  }

  100% {
    transform: translateY(0) translateX(0);
  }
}

.floating-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.c1 {
  width: 140px;
  height: 140px;
  background: rgba(223, 91, 34, .12);
  top: 10%;
  right: 8%;
  animation: float1 8s ease-in-out infinite;
}

.c2 {
  width: 90px;
  height: 90px;
  background: rgba(223, 91, 34, .08);
  bottom: 15%;
  left: 8%;
  animation: float2 10s ease-in-out infinite;
}

.c3 {
  width: 60px;
  height: 60px;
  background: rgba(223, 91, 34, .15);
  top: 50%;
  right: 20%;
  animation: float3 7s ease-in-out infinite;
}

@keyframes float1 {
  50% {
    transform: translateY(-50px);
  }
}

@keyframes float2 {
  50% {
    transform: translateY(40px);
  }
}

@keyframes float3 {
  50% {
    transform: translate(-30px, -30px);
  }
}

.hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 28px 20px;
  background: #0f172a;
  color: #ffffff;
}

.hero-divider h2 {
  font-size: 25px;
  letter-spacing: 1px;
}

.hero-divider .line {
  flex: 1;
  max-width: 260px;
  height: 1px;
  background: linear-gradient(to right,
      transparent,
      #df5b22,
      transparent);
}

.divider-content {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.divider-content .icon {
  width: 42px;
  height: 42px;
  border: 1px solid var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  font-size: 22px;
}

.divider-content p {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 600px) {
  .hero-divider {
    gap: 12px;
    padding: 22px 14px;
  }

  .hero-divider .line {
    max-width: 80px;
  }

  .divider-content {
    flex-direction: column;
    gap: 8px;
  }

  .divider-content p {
    font-size: 14px;
  }

  .divider-content .icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}


.map{
  width: 600px;
  height: 650px;
  border-radius: 20px;
}





.CUS{
    padding:0;
}

.CUS .form-row{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.CUS .form-row p{
    flex:1;
    margin:0;
}

.CUS label{
    display:block;
    font-size:14px;
    margin-bottom:6px;
    color:#666;
    font-weight:500;
}

.CUS input,
.CUS select,
.CUS textarea{
    width:100%;
    padding:10px 20px;
    border:1px solid #e5e5e5;
    border-radius:15px;
    background:#fff;
    font-size:15px;
    color:#222;
    transition:.3s ease;
    box-sizing:border-box;
    margin: 2px;
}

.CUS textarea{
    min-height:140px;
    resize:none;
}

.CUS input::placeholder,
.CUS textarea::placeholder{
    color:#a0a0a0;
    
}

.CUS input:focus,
.CUS select:focus,
.CUS textarea:focus{
    border-color:#1e88e5;
    box-shadow:0 10px 25px rgba(30,136,229,.12);
    outline:none;
    transform:translateY(-2px);
}

.CUS .submit{
    background:#1e88e5;
    color:#fff;
    border:none;
    border-radius:15px;
    padding:16px 35px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.CUS .submit:hover{
    background:#1565c0;
    transform:translateY(-2px);
}

form.CUS,
.CUS fieldset{
    border:none;
    padding:0;
}

@media(max-width:500px){
    .CUS .form-row{
        flex-direction:column;
    }
}

.cta-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.cta-box > div{
    flex:1;
}

.cta-box img{
    max-width:100%;
    height:auto;
}

@media(max-width:768px){
    .cta-box{
        flex-direction:column;
        text-align:center;
    }
}


/* locations */
.service-areas{
 
    background: var(--light);
}

.area-card{
    background:#fff;
    padding:25px 15px;
    text-align:center;
    border-radius:12px;
    height:100%;
    transition:.3s;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.area-card:hover{
    transform:translateY(-5px);
}



.area-card i{
    font-size:32px;
    color: var(--orange);
    margin-bottom:12px;
    display:block;
}

.area-card h5{
    margin:0;
    font-size:18px;
}