*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#050a11;color:#fff;font-family:Arial,Helvetica,sans-serif}header{position:fixed;z-index:9;top:0;width:100%;padding:16px 5%;display:flex;align-items:center;justify-content:space-between;background:#050a11d9;backdrop-filter:blur(12px);border-bottom:1px solid #ffffff18}.logo{color:#fff;text-decoration:none;font-weight:900;letter-spacing:2px}.logo b{color:#11aaff;margin-left:5px}.logo+nav{display:flex;gap:28px}nav a{color:#fff;text-decoration:none;font-weight:700}nav a:hover{color:#13b5ff}.call,.btn{border-radius:999px;padding:13px 24px;font-weight:900;text-decoration:none;display:inline-block}.call,.btn{background:linear-gradient(100deg,#ff7900,#ffb000);color:#071019}.call{font-size:14px}.hero{height:92vh;min-height:650px;position:relative;display:flex;align-items:center}.hero>img,.banner>img,.card img,.split>img,.twocol article>img{width:100%;height:100%;object-fit:contain;object-position:center center;background:#050a11}.hero>img{position:absolute;inset:0}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#030811d9,#03081155,#03081122)}.heroText{position:relative;z-index:2;margin-left:7%;max-width:720px}.heroText small,section>small,.split small,.banner small,.twocol small{font-weight:900;letter-spacing:3px;color:#18b6ff}.hero h1{font-size:clamp(48px,7vw,100px);line-height:.9;margin:15px 0}.hero h1 span{color:#0caeff}.hero p{font-size:20px}.intro,.dark,.contact{padding:100px 7%;}.intro{background:#f5f8fb;color:#07111c}.intro h2,.dark h2,.contact h2{font-size:clamp(36px,5vw,64px);margin:12px 0}.intro p{max-width:750px;font-size:18px;color:#52606e}.grid{padding:20px 3% 100px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.card{height:340px;position:relative;overflow:hidden;border-radius:16px}.card.big{height:440px}.card:after,.twocol article:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,#000c)}.card b{position:absolute;z-index:2;bottom:22px;left:25px;font-size:24px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}.features article{padding:30px;border:1px solid #ffffff18;border-radius:16px;background:#0b1420}.features strong{font-size:32px;color:#11aaff}.split{min-height:560px;display:grid;grid-template-columns:1fr 1fr;background:#f6f8fb;color:#07111c}.split.reverse{direction:rtl}.split>*{min-height:560px}.split div{padding:9%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.split h2{font-size:clamp(38px,5vw,64px);line-height:1;margin:12px 0}.split p{font-size:18px;color:#52606e;max-width:550px}.split.dark{background:#07111d;color:#fff}.split.dark p{color:#b5c2ce}.banner{min-height:600px;position:relative;display:flex;align-items:center}.banner>img{position:absolute;inset:0}.banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0003,#000d)}.banner>div{position:relative;z-index:2;margin-left:auto;margin-right:7%;max-width:650px}.banner h2{font-size:clamp(38px,5vw,68px);line-height:1}.twocol{display:grid;grid-template-columns:1fr 1fr}.twocol article{height:540px;position:relative;overflow:hidden}.twocol article>img{position:absolute;inset:0}.twocol article>div{position:absolute;z-index:2;bottom:45px;left:7%;right:7%}.twocol h2{font-size:clamp(32px,4vw,52px)}.contact{background:linear-gradient(110deg,#101c2b,#050a11)}.contact p{color:#afbbc8;font-size:18px}.outline{background:transparent;color:#fff;border:1px solid #ffffff66;margin-left:8px}footer{padding:45px 7%;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid #ffffff18;color:#a9b5c1}footer b{color:#fff;letter-spacing:2px}footer a{color:#fff;text-decoration:none}#menu{display:none;background:none;border:0;color:#fff;font-size:26px}@media(max-width:800px){nav{display:none!important;position:absolute;top:65px;left:0;right:0;background:#050a11;padding:25px;flex-direction:column}nav.open{display:flex!important}header .call{display:none}#menu{display:block}.heroText{margin-left:6%}.grid{grid-template-columns:1fr}.card,.card.big{height:300px}.features,.twocol{grid-template-columns:1fr}.split,.split.reverse{grid-template-columns:1fr;direction:ltr}.split>*{min-height:350px}.split div{padding:65px 8%}.banner{min-height:650px}.banner>div{margin:0 8%}.contact .btn{margin-top:10px}.outline{margin-left:0}}.imageLink{display:block;position:relative;width:100%;height:100%;min-height:inherit;z-index:1}.imageLink>img{width:100%;height:100%;object-fit:contain;object-position:center center;background:#050a11;display:block}.split>.imageLink{min-height:560px}.banner>.imageLink{position:absolute;inset:0;min-height:0}.twocol article>.imageLink{position:absolute;inset:0;min-height:0}.imageLink:hover{filter:brightness(1.08)}@media(max-width:800px){.split>.imageLink{min-height:350px}}.grid .card,.grid .card.big{height:auto;min-height:0;aspect-ratio:auto}.grid .card img{height:auto;aspect-ratio:auto;display:block;object-fit:contain;object-position:center center}.grid .card:after{pointer-events:none}@media(max-width:800px){.grid .card,.grid .card.big{height:auto;min-height:0}}
/* On mobile, make the ventilation image bars full viewport width. */
@media(max-width:800px){#ventilation>.imageLink{width:100vw;margin-left:calc((100vw - 100%)/-2);background:#050a11}#ventilation>.imageLink>img{width:100vw;max-width:none;object-fit:contain;background:#050a11}}
/* Make the Ventilation service card background white to match the light service cards. */
.grid .card:nth-child(3){background:#fff}

/* Match the Ventilation detail section to the light Cooling section. */
#ventilation{background:#f6f8fb;color:#07111c}
#ventilation p{color:#52606e}
#ventilation>.imageLink{background:#f6f8fb}

/* Maintenance section: keep the photo clean and put the wording in its own white box. */
.maintenanceSection{display:grid;grid-template-columns:1fr 1fr;background:#f6f8fb;color:#07111c;min-height:560px}
.maintenanceImage{min-height:560px;overflow:hidden}
.maintenanceImage .imageLink{height:100%;min-height:560px}
.maintenanceImage .imageLink>img{height:100%;object-fit:contain;background:#f6f8fb}
.maintenanceCopy{padding:9%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.maintenanceCopy small{font-weight:900;letter-spacing:3px;color:#18b6ff}
.maintenanceCopy h2{font-size:clamp(38px,5vw,64px);line-height:1;margin:12px 0}
@media(max-width:800px){
.maintenanceSection{grid-template-columns:1fr;min-height:0}
.maintenanceImage{min-height:350px;width:100vw;margin-left:calc((100vw - 100%)/-2);background:#050a11;overflow:hidden}
.maintenanceImage .imageLink{min-height:350px;width:100vw;background:#050a11}
.maintenanceImage .imageLink>img{width:100vw;max-width:none;object-fit:contain;background:#050a11}
.maintenanceCopy{padding:65px 8%;min-height:430px}
}

/* Repair and Installation: image first, clean white text box underneath. */
.twocol{display:grid;grid-template-columns:1fr 1fr;background:#f6f8fb}
.twocol article{height:auto;position:relative;overflow:hidden;background:#f6f8fb;color:#07111c}
.twocol .twocolImage{height:540px;min-height:540px;overflow:hidden;background:#050a11}
.twocol .twocolImage .imageLink{height:100%;min-height:540px}
.twocol .twocolImage .imageLink>img{height:100%;width:100%;object-fit:contain;background:#050a11;display:block}
.twocol .twocolCopy{position:static;padding:55px 7%;background:#f6f8fb;color:#07111c}
.twocol .twocolCopy h2{font-size:clamp(32px,4vw,52px);margin:12px 0}
.twocol .twocolCopy small{font-weight:900;letter-spacing:3px;color:#18b6ff}
@media(max-width:800px){
.twocol{grid-template-columns:1fr}
.twocol article{height:auto}
.twocol .twocolImage{height:auto;min-height:0;width:100vw;margin-left:calc((100vw - 100%)/-2);background:#050a11}
.twocol .twocolImage .imageLink{height:auto;min-height:0;width:100vw}
.twocol .twocolImage .imageLink>img{height:auto;width:100vw;max-width:none;object-fit:contain;background:#050a11}
.twocol .twocolCopy{padding:55px 8%;min-height:360px}
}

/* Make the Why Elemental Air 01/02/03 section white. */
#about{background:#f6f8fb;color:#07111c}
#about h2{color:#07111c}
#about .features article{background:#fff;color:#07111c;border-color:#dbe2e8}
#about .features article p{color:#52606e}

/* Make Repair and Installation description boxes pure white like the other light sections. */
.twocol .twocolCopy{background:#fff;color:#07111c}
.twocol .twocolCopy p{color:#52606e}

/* Match the black framing above and below the Repair and Installation images on mobile. */
@media(max-width:800px){
  .twocol .twocolImage{
    padding:70px 0;
    background:#050a11;
    overflow:hidden;
  }
  .twocol .twocolImage .imageLink{
    background:#050a11;
  }
  .twocol .twocolImage .imageLink>img{
    background:#050a11;
  }
}

/* Repair + Installation: keep the black framing equal on the top and bottom of each mobile image. */
@media(max-width:800px){
  .twocol .twocolImage{padding:45px 0;background:#050a11;}
  .twocol .twocolImage .imageLink{background:#050a11;}
}

/* Make Repair and Installation mobile images match the Ventilation image presentation exactly. */
@media(max-width:800px){
  .twocol .twocolImage{
    width:100vw;
    margin-left:calc((100vw - 100%)/-2);
    position:relative;
    left:auto;
    transform:none;
    padding:0;
    background:#050a11;
    overflow:hidden;
  }
  .twocol .twocolImage .imageLink{
    width:100vw;
    height:auto;
    min-height:0;
    margin:0;
    background:#050a11;
  }
  .twocol .twocolImage .imageLink>img{
    display:block;
    width:100vw;
    height:auto;
    max-width:none;
    object-fit:contain;
    background:#050a11;
  }
}

/* Repair + Installation: match the Heating/Cooling/Ventilation mobile image treatment — centered, uncropped, and clear. */
@media(max-width:800px){
  .twocol .twocolImage{
    width:100%;
    margin:0;
    left:auto;
    transform:none;
    height:350px;
    min-height:350px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#050a11;
    overflow:hidden;
  }
  .twocol .twocolImage .imageLink{
    width:100%;
    height:100%;
    min-height:350px;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#050a11;
  }
  .twocol .twocolImage .imageLink>img{
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
    object-fit:contain;
    object-position:center center;
    background:#050a11;
  }
}

/* Remove the dark shade overlay from Repair and Installation sections. */
@media(max-width:800px){
  .twocol article:after{display:none!important;}
}

/* Definitively remove the global dark overlay from Repair/Installation; their text panels must stay pure white. */
.twocol article:after{content:none!important;display:none!important;background:none!important;}
.twocol .twocolCopy{background:#fff!important;color:#07111c!important;position:relative;z-index:2;}

/* Final mobile fix: make Repair and Installation images span the full viewport with natural proportions, centered like Ventilation. */
@media(max-width:800px){
  .twocol .twocolImage{
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc((100vw - 100%)/-2)!important;
    margin-right:0!important;
    height:auto!important;
    min-height:0!important;
    padding:0!important;
    display:block!important;
    background:#050a11!important;
    overflow:hidden!important;
  }
  .twocol .twocolImage .imageLink{
    width:100vw!important;
    max-width:100vw!important;
    height:auto!important;
    min-height:0!important;
    display:block!important;
    margin:0!important;
    background:#050a11!important;
  }
  .twocol .twocolImage .imageLink>img{
    width:100vw!important;
    max-width:none!important;
    height:auto!important;
    display:block!important;
    object-fit:contain!important;
    object-position:center center!important;
    background:#050a11!important;
  }
}

/* Mobile full-bleed repair/install fix: move the entire two-column section out of the constrained content width. */
@media(max-width:800px){
  .twocol{
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc((100vw - 100%)/-2)!important;
    margin-right:0!important;
    overflow:visible!important;
  }
  .twocol article{
    width:100vw!important;
    max-width:100vw!important;
    overflow:visible!important;
  }
  .twocol .twocolImage,
  .twocol .twocolImage .imageLink,
  .twocol .twocolImage .imageLink>img{
    width:100vw!important;
    max-width:100vw!important;
  }
}

/* Final mobile fix for Repair + Installation: use the source image's natural ratio and center it against the viewport. */
@media(max-width:800px){
  #repair.split,
  #installation.split{
    width:100%;
    max-width:100%;
    overflow:visible;
    display:grid;
    grid-template-columns:1fr;
  }
  #repair.split>.imageLink,
  #installation.split>.imageLink{
    position:relative!important;
    inset:auto!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    width:100vw!important;
    max-width:100vw!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#050a11!important;
  }
  #repair.split>.imageLink>img,
  #installation.split>.imageLink>img{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100vw!important;
    max-width:100vw!important;
    height:auto!important;
    min-height:0!important;
    object-fit:contain!important;
    object-position:center center!important;
    margin:0!important;
    padding:0!important;
  }
}

/* Tighten the Repair + Installation mobile transition so the lettering starts closer to the image, like IAQ. */
@media(max-width:800px){
  #repair.split>div,
  #installation.split>div{
    padding:20px 8% 65px!important;
  }
}

/* FINAL REPAIR/INSTALLATION MOBILE TRANSITION FIX
   The text panel starts immediately at the image edge—no white spacer above the heading. */
@media (max-width:800px){
  #repair.split>div,
  #installation.split>div{
    min-height:0!important;
    padding:0 8% 65px!important;
    margin:0!important;
    border:0!important;
  }
  #repair.split>div small,
  #installation.split>div small{
    margin:0!important;
    padding:0!important;
  }
}


/* Zero-gap override: pull Repair and Installation copy upward so the heading/label touches the image section. */
@media(max-width:800px){
  #repair.split>div,
  #installation.split>div{
    margin-top:-40px!important;
    padding-top:0!important;
    min-height:0!important;
    position:relative!important;
    z-index:3!important;
    background:#f6f8fb!important;
  }
}


/* Cooling + Ventilation mobile text: remove the large vertically-centered gap around the description. */
@media(max-width:800px){
  #cooling.split>div,
  #ventilation.split>div{
    justify-content:flex-start!important;
    min-height:0!important;
    padding:20px 8% 65px!important;
    margin:0!important;
  }
  #cooling.split>div h2,
  #ventilation.split>div h2{
    margin-top:12px!important;
    margin-bottom:12px!important;
  }
  #cooling.split>div p,
  #ventilation.split>div p{
    margin-top:0!important;
    margin-bottom:18px!important;
  }
}


/* Match Cooling and Ventilation text panels to IAQ: content-sized mobile sections with the same bottom breathing room. */
@media(max-width:800px){
  #cooling.split>div,
  #ventilation.split>div{
    min-height:0!important;
    height:auto!important;
    box-sizing:border-box!important;
    padding:65px 8% 65px!important;
    justify-content:flex-start!important;
  }
  #cooling.split>div .btn,
  #ventilation.split>div .btn{
    margin-bottom:0!important;
  }
}


/* FINAL: remove the split section's 560px mobile minimum that is creating the large bottom gap. */
@media(max-width:800px){
  #cooling.split,
  #ventilation.split{
    min-height:0!important;
    height:auto!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
  }
  #cooling.split>.imageLink,
  #ventilation.split>.imageLink{
    min-height:0!important;
    height:auto!important;
  }
  #cooling.split>div,
  #ventilation.split>div{
    min-height:0!important;
    height:auto!important;
    padding:65px 8% 65px!important;
    justify-content:flex-start!important;
  }
}


/* HARD RESET FOR COOLING + VENTILATION MOBILE LAYOUT
   Use normal block flow instead of the shared split grid so no grid row can create a bottom spacer. */
@media(max-width:800px){
  #cooling.split,
  #ventilation.split{
    display:block!important;
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    overflow:visible!important;
  }
  #cooling.split>.imageLink,
  #ventilation.split>.imageLink{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
  }
  #cooling.split>.imageLink>img,
  #ventilation.split>.imageLink>img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
  }
  #cooling.split>div,
  #ventilation.split>div{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:flex-start!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:65px 8% 65px!important;
  }
}


/* Repair + Installation: make top spacing above the text match the bottom spacing. */
@media(max-width:800px){
  #repair.split>div,
  #installation.split>div{
    padding-top:65px!important;
    padding-bottom:65px!important;
    margin-top:0!important;
    min-height:0!important;
    height:auto!important;
    justify-content:flex-start!important;
  }
}


/* Repair + Installation: force a true equal visual gap above and below the copy content. */
@media(max-width:800px){
  #repair.split>div,
  #installation.split>div{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:flex-start!important;
    padding:65px 8%!important;
    margin:0!important;
    min-height:0!important;
    height:auto!important;
  }
  #repair.split>div small,
  #installation.split>div small{
    display:block!important;
    margin:0 0 12px!important;
  }
  #repair.split>div h2,
  #installation.split>div h2{
    margin:0 0 12px!important;
  }
  #repair.split>div p,
  #installation.split>div p{
    margin:0 0 18px!important;
  }
  #repair.split>div .btn,
  #installation.split>div .btn{
    margin:0!important;
  }
}


/* Match all description-box eyebrow labels to the orange button color. */
.split small,
.maintenanceCopy small{
  color:#ff7900!important;
}
@media(max-width:800px){
  #repair.split>div small,
  #installation.split>div small,
  #cooling.split>div small,
  #ventilation.split>div small,
  #heating.split>div small,
  #iaq.split>div small{
    color:#ff7900!important;
  }
}


/* Restore black bars above and below Cooling, Ventilation, Repair and Installation images on mobile. */
@media(max-width:800px){
  #cooling.split>.imageLink,
  #ventilation.split>.imageLink,
  #repair.split>.imageLink,
  #installation.split>.imageLink{
    padding:45px 0!important;
    background:#050a11!important;
    box-sizing:border-box!important;
  }
  #cooling.split>.imageLink>img,
  #ventilation.split>.imageLink>img,
  #repair.split>.imageLink>img,
  #installation.split>.imageLink>img{
    background:#050a11!important;
  }
}


/* Final label colors: only Maintenance uses the reddish-orange accent; all other service labels stay blue. */
.split small,
#heating small,
#cooling small,
#ventilation small,
#iaq small,
#repair small,
#installation small{
  color:#18b6ff!important;
}
.maintenanceCopy small{
  color:#ff7900!important;
}
/* Make the Explore Services button embedded in the hero image clickable. */
.heroImageOnly{height:auto;min-height:0;display:block;position:relative;overflow:hidden;}
.heroImageOnly>img{position:relative;inset:auto;width:100%;height:auto;display:block;object-fit:contain;object-position:center center;}
.heroImageOnly .heroExplore{position:absolute;z-index:5;left:6%;top:78.2%;width:49%;height:7.7%;display:block;background:transparent;border-radius:999px;}
.heroImageOnly .heroExplore:focus-visible{outline:3px solid #18b6ff;outline-offset:3px;}

/* FINAL: visible clickable Explore Services button over the artwork button. */
.heroImageOnly .heroExplore{
  position:absolute!important;
  z-index:100!important;
  left:5%!important;
  top:70%!important;
  width:52%!important;
  height:70px!important;
  min-height:70px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 18px!important;
  margin:0!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(100deg,#ff7900,#ffb000)!important;
  color:#071019!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:18px!important;
  font-weight:900!important;
  line-height:1!important;
  text-decoration:none!important;
  box-shadow:0 4px 14px #0008!important;
  cursor:pointer!important;
}
@media(max-width:800px){
 .heroImageOnly .heroExplore{
   left:5%!important;
   top:70%!important;
   width:54%!important;
   height:58px!important;
   min-height:58px!important;
   font-size:17px!important;
 }
}

/* The artwork already contains the exact button. Keep the clickable overlay invisible. */
.heroImageOnly .heroExplore{
  position:absolute!important;
  z-index:100!important;
  left:5%!important;
  top:72%!important;
  width:54%!important;
  height:11%!important;
  display:block!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  color:transparent!important;
  box-shadow:none!important;
  text-decoration:none!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
}
.heroImageOnly .heroExplore:focus,
.heroImageOnly .heroExplore:active{
  outline:none!important;
  background:transparent!important;
}

/* FINAL BUTTON ALIGNMENT: smaller invisible hit area centered exactly over the artwork button. */
.heroImageOnly .heroExplore{
  left:5.5%!important;
  top:73.5%!important;
  width:48%!important;
  height:8.5%!important;
}
@media(max-width:800px){
  .heroImageOnly .heroExplore{
    left:5.5%!important;
    top:73.5%!important;
    width:48%!important;
    height:8.5%!important;
  }
}


/* Hide the duplicate website header printed inside the hero artwork.
   Keep the real site header above it untouched. */
.heroImageOnly::before,
.heroImageOnly::after{
  content:"";
  position:absolute!important;
  z-index:20!important;
  top:3.2%!important;
  height:7.2%!important;
  background:#050a11!important;
  pointer-events:none!important;
}
.heroImageOnly::before{
  left:3.2%!important;
  width:40%!important;
}
.heroImageOnly::after{
  right:3.2%!important;
  width:9%!important;
}
@media(max-width:800px){
  .heroImageOnly::before,
  .heroImageOnly::after{
    top:3.2%!important;
    height:7.2%!important;
  }
  .heroImageOnly::before{
    left:3.2%!important;
    width:42%!important;
  }
  .heroImageOnly::after{
    right:3.2%!important;
    width:10%!important;
  }
}



/* RESTORE HERO ARTWORK: remove all CSS blackout overlays from the image. */
.heroImageOnly::before,
.heroImageOnly::after{
  content:none!important;
  display:none!important;
  background:transparent!important;
  height:0!important;
  width:0!important;
}