/* 1. Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:110px}
img{max-width:100%;display:block}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}

/* 2. Variables */
:root{
  --charcoal:#172126;--slate:#3E565F;--ivory:#F3F0E8;--teal:#6FA6A1;--sand:#D6B477;
  --radius:6px;--wrap:1160px;--gap:clamp(1rem,2.5vw,1.75rem);
  --pad:clamp(3.5rem,8vw,6.5rem);
}

/* 3. Global typography */
body{
  font-family:'Manrope',system-ui,sans-serif;font-size:1rem;line-height:1.65;color:var(--charcoal);
  background:var(--charcoal);
  overflow-x:hidden;
  overflow-x:clip;
}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2rem,4.6vw,3.2rem)}
h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:1.25rem}
h3{font-size:1.15rem;margin-bottom:.4rem}
p{max-width:64ch}
.label{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin-bottom:1rem}
.label.dark{color:var(--slate)}
.lead{font-size:1.1rem;color:var(--slate);max-width:70ch}
.page{background:var(--ivory)}
section{padding-block:var(--pad)}
.btn{display:inline-block;padding:.8rem 1.4rem;border-radius:var(--radius);font-weight:700;font-size:.95rem;border:2px solid transparent;transition:background .25s,color .25s,transform .25s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn-sand{background:var(--sand);color:var(--charcoal)}
.btn-sand:hover{background:#e2c48f}
.btn-ghost{border-color:rgba(243,240,232,.6);color:var(--ivory)}
.btn-ghost:hover{background:var(--ivory);color:var(--charcoal)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* 4. Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--charcoal);color:var(--ivory)}
.topbar{background:#0f171b;font-size:.8rem;color:#c9d3d1}
.topbar .wrap{display:flex;justify-content:space-between;gap:1rem;padding-block:.4rem}
.topbar i{color:var(--sand);margin-right:.3rem}
.mainbar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.9rem}
.brand{font-weight:800;font-size:clamp(1.05rem,2.2vw,1.25rem);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.brand i{color:var(--teal);flex:0 0 auto}
.brand span{color:var(--sand)}

/* 5. Navigation */
.nav{display:flex;align-items:center;gap:1.75rem;margin-left:auto;font-weight:500;font-size:.95rem}
.nav a:not(.btn){transition:color .2s}
.nav a:not(.btn):hover{color:var(--sand)}
.nav-btn,.burger{display:none}
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.burger{font-size:1.5rem;cursor:pointer;width:2.5rem;height:2.5rem;place-items:center}
.burger .close{display:none}
.nav-toggle:checked+.burger .open{display:none}
.nav-toggle:checked+.burger .close{display:block}
.nav-toggle:focus-visible+.burger{outline:3px solid var(--teal)}

/* 6. Hero */
.hero{
  position:relative;isolation:isolate;
  min-height:calc(100vh - 100px);min-height:calc(100svh - 100px);
  display:flex;align-items:center;padding-block:var(--pad);
  background:var(--charcoal) url("img/hvac-bg.jpg") center/cover no-repeat;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(23,33,38,.90) 0%,rgba(23,33,38,.62) 42%,rgba(23,33,38,.40) 70%,rgba(23,33,38,.72) 100%),
    radial-gradient(900px 520px at 12% 15%,rgba(111,166,161,.28),transparent 62%),
    radial-gradient(760px 420px at 88% 78%,rgba(214,180,119,.24),transparent 62%);
}
.hero .wrap{display:flex;justify-content:flex-end}
.hero-panel{width:min(100%,560px);background:rgba(23,33,38,.86);backdrop-filter:blur(3px);color:var(--ivory);padding:clamp(1.5rem,4vw,2.75rem);border-radius:var(--radius);border-left:4px solid var(--sand);box-shadow:0 24px 60px rgba(0,0,0,.35);animation:enter .9s ease both}
.hero-panel h1{margin-bottom:1rem}
.hero-panel p:not(.label){color:#d5dcda;margin-bottom:1.5rem}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.75rem}
.hero-points{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;padding-top:1.25rem;border-top:1px solid rgba(243,240,232,.2);font-size:.9rem}
.hero-points i{color:var(--teal);margin-right:.35rem}
@keyframes enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* 7. Problems */
.split{display:grid;grid-template-columns:.9fr 1.3fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.problems-intro{position:sticky;top:130px}
.vtitle{font-size:clamp(2.2rem,5vw,3.6rem);border-left:5px solid var(--teal);padding-left:1rem}
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.card{background:#fff;padding:1.5rem;border-radius:var(--radius);border:1px solid #ddd8ca;transition:transform .25s}
.card:hover{transform:translateY(-4px)}
.card:nth-child(even){margin-top:2.5rem}
.card i,.svc i{font-size:1.5rem;color:var(--slate);margin-bottom:.9rem;display:block;transition:transform .3s,color .3s}
.card:hover i,.svc:hover i{transform:scale(1.15);color:var(--teal)}
.card p,.svc p{font-size:.95rem;color:#4b5b60}

/* 8. System */
.system{padding-top:0}
.system .wrap{padding-top:var(--pad);border-top:1px solid #d8d3c4}
.panels{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--gap);margin-top:2.5rem}
.panel{padding:clamp(1.5rem,3vw,2.5rem);border-radius:var(--radius)}
.panel h3{font-size:1.4rem;margin-bottom:.8rem}
.panel h3 i{margin-right:.5rem}
.panel-light{background:var(--teal);color:var(--charcoal)}
.panel-dark{background:var(--slate);color:var(--ivory);margin-top:2rem}
.panel-dark h3 i{color:var(--sand)}
.about-contact{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:var(--gap);padding:1.4rem clamp(1.25rem,3vw,2rem);background:#fff;border:1px solid #ddd8ca;border-left:4px solid var(--sand);border-radius:var(--radius)}
.about-contact-text h3{font-size:1.15rem;margin-bottom:.25rem}
.about-contact-text p{font-size:.95rem;color:#4b5b60;max-width:52ch}
.about-phone{display:inline-flex;align-items:center;gap:.85rem;font-weight:800;font-size:clamp(1.15rem,2.4vw,1.55rem);letter-spacing:-.01em;white-space:nowrap;transition:color .25s}
.about-phone i{flex:0 0 3rem;width:3rem;height:3rem;border-radius:50%;background:var(--charcoal);color:var(--sand);display:grid;place-items:center;font-size:1.15rem;transition:background .25s,color .25s,transform .3s}
.about-phone small{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:.15rem}
.about-phone:hover{color:var(--teal)}
.about-phone:hover i{background:var(--teal);color:#fff;transform:scale(1.06)}

/* 9. Services */
.services{padding-top:0}
.service-layout{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:2rem}
.featured{grid-column:2/4;grid-row:1/3;background:var(--charcoal);color:var(--ivory);padding:clamp(1.5rem,3vw,2.5rem);border-radius:var(--radius)}
.featured>i{font-size:2rem;color:var(--sand);margin-bottom:1rem;display:block}
.featured h3{font-size:1.7rem}
.featured p{color:#d0d8d6;margin-block:.6rem 1.2rem}
.featured ul{display:flex;flex-wrap:wrap;gap:.5rem}
.featured li{border:1px solid rgba(243,240,232,.3);border-radius:99px;padding:.2rem .8rem;font-size:.85rem}
.svc{background:#fff;border:1px solid #ddd8ca;border-radius:var(--radius);padding:1.25rem;transition:transform .25s}
.svc:hover{transform:translateY(-4px)}
.svc h3{font-size:1.05rem}
.s1{grid-column:1;grid-row:1}.s2{grid-column:4;grid-row:1}
.s3{grid-column:1;grid-row:2}.s4{grid-column:4;grid-row:2}
.s5{grid-column:1/3;grid-row:3}.s6{grid-column:3/5;grid-row:3}

/* 10. Maintenance */
.maintenance{padding-top:0}
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:2.5rem}
.timeline::before{content:"";position:absolute;top:1.5rem;left:0;right:0;height:2px;background:var(--slate);opacity:.35}
.timeline li{position:relative;padding-top:4rem}
.dot{position:absolute;top:0;left:0;width:3rem;height:3rem;border-radius:50%;background:var(--sand);display:grid;place-items:center;border:4px solid var(--ivory);transition:transform .3s}
.timeline li:hover .dot{transform:scale(1.1)}
.timeline p{font-size:.95rem;color:#4b5b60}

/* 11. Process */
.process{background:var(--charcoal);color:var(--ivory)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:2.5rem;position:relative}
.steps li{position:relative;padding-top:4.25rem}
.num{position:absolute;top:0;left:0;width:3.25rem;height:3.25rem;border-radius:50%;border:2px solid var(--sand);color:var(--sand);display:grid;place-items:center;font-weight:800;font-size:1.2rem;background:var(--charcoal);z-index:1}
.steps li:not(:last-child)::before{content:"";position:absolute;top:1.6rem;left:3.25rem;right:-1rem;height:2px;background:var(--slate)}
.steps p{color:#c9d3d1;font-size:.95rem}

/* 12. Tips */
.tips-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:2rem}
.big-tip{font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:700;line-height:1.35;letter-spacing:-.01em;padding:1.5rem 0 1.5rem 1.5rem;border-left:5px solid var(--sand)}
.big-tip i{display:block;color:var(--sand);margin-bottom:.75rem}
.tip-list li{padding:.9rem 0;border-bottom:1px solid #d8d3c4;transition:padding-left .25s}
.tip-list li:hover{padding-left:.5rem}
.tip-list li:first-child{border-top:1px solid #d8d3c4}

/* 13. Contact */
.contact{background:var(--charcoal);color:var(--ivory);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;top:-8rem;right:-8rem;width:26rem;height:26rem;border-radius:50%;background:radial-gradient(circle,rgba(111,166,161,.30),transparent 68%);pointer-events:none}
.contact::after{content:"";position:absolute;bottom:-10rem;left:-6rem;width:20rem;height:20rem;border-radius:50%;background:radial-gradient(circle,rgba(214,180,119,.18),transparent 68%);pointer-events:none}
.contact-cta{position:relative;z-index:1;max-width:820px;margin-inline:auto;text-align:center;padding:clamp(2rem,5vw,3.5rem);background:rgba(243,240,232,.05);border:1px solid rgba(243,240,232,.14);border-top:4px solid var(--sand);border-radius:var(--radius)}
.contact-badge{display:grid;place-items:center;width:4rem;height:4rem;margin:0 auto 1.25rem;border-radius:50%;background:rgba(214,180,119,.15);color:var(--sand);font-size:1.5rem;transition:transform .35s,background .35s,color .35s}
.contact-cta:hover .contact-badge{transform:rotate(-12deg) scale(1.06);background:rgba(214,180,119,.25)}
.contact-cta .label{margin-bottom:.75rem}
.contact-cta h2{margin-bottom:.85rem}
.contact-cta>p:not(.label){color:#c9d3d1;margin:0 auto 2rem}
.contact-cta .btns{justify-content:center;margin-bottom:0}

/* 14. Footer */
.site-footer{background:#0f171b;color:#c9d3d1;padding-top:3rem;font-size:.92rem}
.site-footer .brand{color:var(--ivory);margin-bottom:.75rem}
.site-footer .foot-about p{font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
.foot-grid h4{color:var(--ivory);margin-bottom:.75rem}
.foot-grid a:not(.btn):not(.brand){display:block;padding:.15rem 0;transition:color .2s}
.foot-grid a:not(.btn):hover{color:var(--sand)}
.foot-details{display:grid;gap:.7rem;margin-top:.25rem}
.foot-details li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.5}
.foot-details i{flex:0 0 1.05rem;width:1.05rem;margin-top:.28rem;color:var(--sand);text-align:center}
.foot-grid .foot-details a:not(.btn){display:inline;padding:0;word-break:break-word}
.foot-details b{color:var(--ivory);font-weight:700;margin-right:.35rem}
.foot-contact .btn{margin-top:1.4rem}
.copy{text-align:center;margin-top:2.5rem;padding:1.25rem;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;max-width:none}

/* Reveal on scroll (CSS only, applied where supported) */
@supports (animation-timeline:view()){
  .reveal .wrap{animation:enter linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
}

/* 15. Responsive */
@media (max-width:1024px){
  .service-layout{grid-template-columns:repeat(2,1fr)}
  .featured{grid-column:1/-1;grid-row:auto}
  .s1,.s2,.s3,.s4,.s5,.s6{grid-column:auto;grid-row:auto}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:2.5rem}
  .steps li:nth-child(2)::before{display:none}
  .timeline{grid-template-columns:repeat(2,1fr);row-gap:2rem}
  .timeline::before{display:none}
}
@media (max-width:860px){
  .mainbar{position:relative}
  .head-btn{display:none}
  .burger{display:grid;margin-left:auto}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;background:var(--charcoal);padding:0 1.25rem;max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .35s ease,opacity .25s,visibility .35s,padding .35s}
  .nav a:not(.btn){padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav-btn{display:block;text-align:center;margin-top:1rem}
  .nav-toggle:checked~.nav{max-height:480px;opacity:1;visibility:visible;padding-block:.5rem 1.25rem}
  .topbar span{display:none}
  .topbar .wrap{justify-content:center}
  .split,.panels,.tips-layout{grid-template-columns:1fr}
  .problems-intro{position:static}
  .panel-dark{margin-top:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-contact{grid-column:1/-1}
  .about-contact{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  .hero .wrap{justify-content:center}
  .btns .btn{width:100%;text-align:center}
  .problem-grid,.service-layout,.foot-grid{grid-template-columns:1fr}
  .card:nth-child(even){margin-top:0}
  .timeline{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;row-gap:0}
  .steps li{padding:0 0 2rem 4.5rem;min-height:5rem}
  .steps li:not(:last-child)::before{display:block;top:3.25rem;left:1.6rem;right:auto;width:2px;height:calc(100% - 3.25rem)}
  .timeline li{padding:0 0 1rem 4rem;min-height:3.5rem}
  .about-phone{font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto}
}