/* ========================= 
   JJJ TECHS GLOBAL SYSTEM 
   ========================= */ 
 
:root{ 
  /* BRAND COLORS */ 
  --cool:#0074e8; 
  --heat:#ff3b00; 
  --refrig:#0a8f3c; 
  --electric:#ffb300; 
 :root{
  --jjj-blue:#0074e8;
  --jjj-blue-dark:#005bb5;
  --jjj-navy:#002855;
  --jjj-dark:#071a2d;
  --jjj-orange:#f59e0b;
  --jjj-text:#0b1220;
  --jjj-muted:#5b6472;
  --jjj-line:#dfe6ee;
  --jjj-soft:#f3f7fb;
  --jjj-card:#ffffff;
  --jjj-radius:18px;
  --jjj-shadow:0 12px 30px rgba(2,6,23,.09);
  --jjj-max:1180px;
}

/* =========================================================
GLOBAL RESET
========================================================= */

.jjj-page,
.jjj-page *{
  box-sizing:border-box;
}

.jjj-page{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  overflow:hidden;

  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  color:var(--jjj-text);
  background:#fff;

  line-height:1.5;
}

.jjj-page a{
  text-decoration:none;
}

.jjj-page img{
  max-width:100%;
  height:auto;
}

.jjj-page h1,
.jjj-page h2,
.jjj-page h3,
.jjj-page h4,
.jjj-page p,
.jjj-page ul,
.jjj-page ol{
  margin-top:0;
}

.jjj-page button,
.jjj-page input,
.jjj-page textarea,
.jjj-page select{
  font:inherit;
}

/* =========================================================
WRAPPER
========================================================= */

.jjj-wrap{
  width:min(var(--jjj-max),calc(100% - 40px));
  margin-left:auto;
  margin-right:auto;
}

/* =========================================================
SECTIONS
========================================================= */

.jjj-section{
  position:relative;
  width:100%;
  padding:85px 0;
  overflow:hidden;
}

.jjj-soft{
  background:var(--jjj-soft);
}

/* =========================================================
TYPOGRAPHY
========================================================= */

.jjj-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;

  margin-bottom:18px;

  color:var(--jjj-blue-dark);

  font-size:13px;
  font-weight:950;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.jjj-kicker:before{
  content:"";

  width:34px;
  height:3px;

  flex:none;

  background:var(--jjj-orange);
}

.jjj-h1{
  margin:0;

  max-width:900px;

  color:var(--jjj-navy);

  font-size:clamp(44px,6vw,68px);
  line-height:1;
  letter-spacing:-.045em;
  font-weight:950;
}

.jjj-h1 span{
  color:var(--jjj-blue);
}

.jjj-h2{
  margin:0;

  color:var(--jjj-navy);

  font-size:clamp(34px,4vw,50px);
  line-height:1.05;
  letter-spacing:-.035em;
  font-weight:950;
}

.jjj-h3{
  color:var(--jjj-navy);
  font-weight:950;
}

.jjj-lead{
  max-width:850px;
  margin:20px 0 0;

  color:var(--jjj-muted);

  font-size:17px;
  line-height:1.8;
}

/* =========================================================
BUTTONS
========================================================= */

.jjj-btnrow{
  display:flex;
  flex-wrap:wrap;
  gap:12px;

  margin-top:30px;
}

.jjj-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:50px;

  padding:13px 22px;

  border-radius:8px;

  font-size:15px;
  font-weight:900;
  line-height:1.2;

  text-decoration:none !important;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

.jjj-btn:hover{
  transform:translateY(-2px);
}

.jjj-btn.primary{
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      var(--jjj-blue),
      var(--jjj-blue-dark)
    );

  border:1px solid transparent;

  box-shadow:
    0 12px 30px rgba(0,116,232,.20);
}

.jjj-btn.primary:hover{
  color:#fff !important;

  box-shadow:
    0 15px 34px rgba(0,116,232,.28);
}

.jjj-btn.secondary{
  color:var(--jjj-navy) !important;

  background:#fff;

  border:1px solid var(--jjj-line);
}

.jjj-btn.secondary:hover{
  color:var(--jjj-blue) !important;
  border-color:var(--jjj-blue);
}

/* =========================================================
HERO
========================================================= */

.jjj-hero{
  position:relative;

  width:100%;
  min-height:600px;

  display:flex;
  align-items:center;

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(0,116,232,.25),
      transparent 30%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(245,158,11,.08),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #020b14 0%,
      #061525 55%,
      #0a2035 100%
    );

  color:#fff;
}

.jjj-hero:after{
  content:"HEAT PUMP";

  position:absolute;

  right:-35px;
  bottom:-65px;

  color:rgba(255,255,255,.035);

  font-size:145px;
  line-height:1;

  font-weight:1000;
  letter-spacing:-9px;

  pointer-events:none;
}

.jjj-hero-grid{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:1.08fr .92fr;

  gap:60px;

  align-items:center;

  padding:85px 0;
}

.jjj-hero .jjj-kicker{
  color:#7fc3ff;
}

.jjj-hero h1,
.jjj-hero .jjj-h1{
  color:#fff;
}

.jjj-hero h1 span,
.jjj-hero .jjj-h1 span{
  color:var(--jjj-blue);
}

.jjj-hero-text{
  max-width:760px;

  margin:25px 0 0;

  color:#b7c6d6;

  font-size:18px;
  line-height:1.75;
}

/* =========================================================
HEAT PUMP GRAPHIC
========================================================= */

.jjj-hp-graphic{
  position:relative;
  min-height:410px;
}

.jjj-hp-box{
  position:absolute;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  width:min(430px,100%);
  aspect-ratio:1/1;

  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(0,116,232,.16),
      transparent 45%
    ),
    rgba(255,255,255,.025);
}

.jjj-hp-grid{
  position:absolute;
  inset:25px;

  border:1px solid rgba(0,116,232,.25);
  border-radius:18px;

  background-image:
    linear-gradient(
      rgba(0,116,232,.06) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0,116,232,.06) 1px,
      transparent 1px
    );

  background-size:35px 35px;
}

.jjj-hp-unit{
  position:absolute;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  width:190px;
  height:145px;

  border:2px solid rgba(127,195,255,.65);
  border-radius:12px;

  background:
    linear-gradient(
      180deg,
      #163650,
      #081827
    );

  box-shadow:
    0 0 0 15px rgba(0,116,232,.05),
    0 0 55px rgba(0,116,232,.22);
}

.jjj-hp-unit:before{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:82px;
  height:82px;

  transform:translate(-50%,-50%);

  border:2px solid rgba(127,195,255,.35);
  border-radius:50%;

  background:
    repeating-conic-gradient(
      rgba(127,195,255,.12) 0deg 10deg,
      transparent 10deg 30deg
    );
}

.jjj-hp-unit:after{
  content:"";

  position:absolute;

  right:17px;
  bottom:17px;

  width:9px;
  height:9px;

  border-radius:50%;

  background:var(--jjj-blue);

  box-shadow:
    0 0 18px rgba(0,116,232,.9);
}

.jjj-hp-label{
  position:absolute;

  left:50%;
  bottom:15px;

  transform:translateX(-50%);

  color:#8fb4d8;

  font-size:9px;
  font-weight:900;

  letter-spacing:.15em;
  text-transform:uppercase;

  white-space:nowrap;
}

.jjj-hp-node{
  position:absolute;

  width:11px;
  height:11px;

  border-radius:50%;

  background:var(--jjj-orange);

  box-shadow:
    0 0 18px rgba(245,158,11,.7);
}

.jjj-hp-node.n1{
  top:72px;
  left:72px;
}

.jjj-hp-node.n2{
  top:90px;
  right:70px;
}

.jjj-hp-node.n3{
  bottom:75px;
  left:82px;
}

.jjj-hp-node.n4{
  bottom:60px;
  right:88px;
}

.jjj-hp-label-box{
  position:absolute;

  padding:8px 11px;

  border:1px solid rgba(255,255,255,.12);

  background:rgba(3,13,24,.82);

  color:#c4d5e6;

  font-size:10px;
  font-weight:900;

  letter-spacing:.1em;
  text-transform:uppercase;
}

.jjj-hp-label-box.l1{
  top:40px;
  left:25px;
}

.jjj-hp-label-box.l2{
  right:25px;
  bottom:40px;
}

/* =========================================================
INTRO
========================================================= */

.jjj-intro-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:60px;

  align-items:center;
}

.jjj-section-label{
  margin-bottom:12px;

  color:var(--jjj-blue-dark);

  font-size:12px;
  font-weight:950;

  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.jjj-intro p{
  color:var(--jjj-muted);

  font-size:17px;
  line-height:1.8;
}

.jjj-intro-panel{
  position:relative;

  padding:34px;

  border:1px solid var(--jjj-line);

  background:#f7f9fc;

  overflow:hidden;
}

.jjj-intro-panel:after{
  content:"";

  position:absolute;

  right:-55px;
  bottom:-70px;

  width:190px;
  height:190px;

  border-radius:50%;

  border:28px solid rgba(0,116,232,.06);
}

.jjj-intro-panel strong{
  display:block;

  margin-bottom:8px;

  color:var(--jjj-blue-dark);

  font-size:14px;

  letter-spacing:.12em;
  text-transform:uppercase;
}

.jjj-intro-panel span{
  color:var(--jjj-muted);

  font-size:15px;
  line-height:1.7;
}

/* =========================================================
CARDS
========================================================= */

.jjj-grid3{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:18px;

  margin-top:42px;
}

.jjj-grid2{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:18px;

  margin-top:42px;
}

.jjj-card{
  position:relative;

  min-width:0;

  padding:32px;

  background:#fff;

  border:1px solid var(--jjj-line);

  overflow:hidden;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.jjj-card:hover{
  transform:translateY(-4px);

  box-shadow:var(--jjj-shadow);
}

.jjj-card:before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--jjj-blue),
      var(--jjj-orange)
    );
}

.jjj-card-number{
  color:#c3ced9;

  font-size:12px;
  font-weight:950;

  line-height:1.2;
  letter-spacing:.15em;
}

.jjj-card h3{
  margin:28px 0 10px;

  color:var(--jjj-navy);

  font-size:23px;
  line-height:1.2;
  font-weight:950;
}

.jjj-card p{
  margin:0;

  color:var(--jjj-muted);

  font-size:15px;
  line-height:1.75;
}

/* =========================================================
PROBLEM SECTION
========================================================= */

.jjj-problem{
  background:#f3f6f9;
}

.jjj-list{
  margin:0;
  padding-left:20px;
}

.jjj-list li{
  margin-bottom:11px;

  color:var(--jjj-muted);

  line-height:1.65;
}

.jjj-list li::marker{
  color:var(--jjj-orange);
}

/* =========================================================
DIAGNOSTICS DARK
========================================================= */

.jjj-dark-section{
  background:
    radial-gradient(
      circle at 90% 15%,
      rgba(0,116,232,.14),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #04101c,
      #071a2d
    );

  color:#fff;
}

.jjj-dark-section .jjj-section-label{
  color:#71bcff;
}

.jjj-dark-section .jjj-h2{
  color:#fff;
}

.jjj-dark-intro{
  max-width:780px;

  margin:18px 0 42px;

  color:#9fb2c6;

  font-size:17px;
  line-height:1.75;
}

.jjj-diagnostic-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:18px;
}

.jjj-diagnostic-card{
  min-width:0;

  padding:34px;

  border:1px solid rgba(255,255,255,.12);

  background:rgba(255,255,255,.035);
}

.jjj-diagnostic-card h3{
  margin:0 0 12px;

  color:#fff;

  font-size:23px;
  line-height:1.25;
  font-weight:950;
}

.jjj-diagnostic-card p{
  margin:0;

  color:#9fb2c6;

  font-size:15px;
  line-height:1.75;
}

/* =========================================================
REPAIR / REPLACE
========================================================= */

.jjj-decision-card{
  position:relative;

  min-width:0;

  padding:38px;

  background:#fff;

  border:1px solid var(--jjj-line);

  overflow:hidden;
}

.jjj-decision-card:before{
  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:4px;

  background:var(--jjj-orange);
}

.jjj-decision-card h3{
  margin:0 0 18px;

  color:var(--jjj-navy);

  font-size:25px;
  line-height:1.2;
  font-weight:950;
}

/* =========================================================
SERVICE AREA
========================================================= */

.jjj-area-section{
  background:#f3f6f9;
}

.jjj-area-head{
  max-width:850px;

  margin-bottom:42px;
}

.jjj-area-head p{
  margin:18px 0 0;

  color:var(--jjj-muted);

  font-size:17px;
  line-height:1.75;
}

.jjj-service-area-box{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:18px;

  margin-top:42px;
}

.jjj-service-area-item{
  position:relative;

  display:flex;
  align-items:flex-start;

  gap:22px;

  min-width:0;

  padding:32px;

  background:#fff;

  border:1px solid var(--jjj-line);

  overflow:hidden;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.jjj-service-area-item:before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--jjj-blue),
      var(--jjj-orange)
    );
}

.jjj-service-area-item:hover{
  transform:translateY(-4px);

  box-shadow:var(--jjj-shadow);
}

.jjj-area-icon{
  display:flex;

  align-items:center;
  justify-content:center;

  flex:none;

  width:48px;
  height:48px;

  border-radius:10px;

  background:var(--jjj-navy);

  color:#fff;

  font-size:12px;
  font-weight:950;

  letter-spacing:.08em;
}

.jjj-service-area-item h3{
  margin:0 0 10px;

  color:var(--jjj-navy);

  font-size:23px;
  line-height:1.2;
  font-weight:950;
}

.jjj-service-area-item p{
  margin:0;

  color:var(--jjj-muted);

  font-size:15px;
  line-height:1.7;
}

/* =========================================================
TOWN GRID
========================================================= */

.jjj-town-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:18px;
}

.jjj-town-card{
  position:relative;

  min-height:210px;

  padding:32px;

  background:#fff;

  border:1px solid var(--jjj-line);

  overflow:hidden;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.jjj-town-card:hover{
  transform:translateY(-4px);

  box-shadow:var(--jjj-shadow);
}

.jjj-town-card:before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--jjj-blue),
      var(--jjj-orange)
    );
}

.jjj-town-number{
  color:#c3ced9;

  font-size:12px;
  font-weight:950;

  letter-spacing:.15em;
}

.jjj-town-card h3{
  margin:28px 0 10px;

  color:var(--jjj-navy);

  font-size:23px;
  line-height:1.2;
  font-weight:950;
}

.jjj-town-card p{
  margin:0;

  color:var(--jjj-muted);

  font-size:15px;
  line-height:1.7;
}

.jjj-town-link{
  display:inline-flex;

  margin-top:18px;

  color:var(--jjj-blue-dark) !important;

  font-size:14px;
  font-weight:950;

  text-decoration:none !important;
}

.jjj-town-link:hover{
  color:var(--jjj-orange) !important;
}

/* =========================================================
RELATED SERVICES
========================================================= */

.jjj-related{
  background:#fff;
}

.jjj-related-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:18px;

  margin-top:42px;
}

.jjj-related-card{
  min-width:0;

  padding:32px;

  border:1px solid var(--jjj-line);

  background:#f7f9fb;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.jjj-related-card:hover{
  transform:translateY(-4px);

  box-shadow:var(--jjj-shadow);
}

.jjj-related-card h3{
  margin:0 0 10px;

  font-size:21px;
  line-height:1.25;
  font-weight:950;
}

.jjj-related-card h3 a{
  color:var(--jjj-navy);

  text-decoration:none !important;
}

.jjj-related-card h3 a:hover{
  color:var(--jjj-blue);
}

.jjj-related-card p{
  margin:0;

  color:var(--jjj-muted);

  font-size:15px;
  line-height:1.7;
}

/* =========================================================
FAQ
========================================================= */

.jjj-faq{
  max-width:900px;

  margin-top:42px;
}

.jjj-faq details{
  margin-bottom:12px;

  background:#fff;

  border:1px solid var(--jjj-line);

  overflow:hidden;
}

.jjj-faq summary{
  cursor:pointer;

  padding:21px 24px;

  color:var(--jjj-navy);

  font-weight:900;
  font-size:16px;

  line-height:1.5;

  list-style:none;
}

.jjj-faq summary::-webkit-details-marker{
  display:none;
}

.jjj-faq summary:after{
  content:"+";

  float:right;

  color:var(--jjj-orange);

  font-size:22px;
  line-height:1;
}

.jjj-faq details[open] summary:after{
  content:"−";
}

.jjj-faq details p{
  margin:0;

  padding:0 24px 22px;

  color:var(--jjj-muted);

  font-size:15px;
  line-height:1.75;
}

/* =========================================================
FINAL CTA
========================================================= */

.jjj-final{
  position:relative;

  width:100%;

  padding:100px 0;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(0,116,232,.20),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #020a12,
      #061827
    );

  text-align:center;

  color:#fff;
}

.jjj-final-inner{
  position:relative;

  max-width:850px;

  margin:0 auto;
}

.jjj-final .jjj-section-label{
  color:#71bcff;
}

.jjj-final h2{
  margin:0 0 15px;

  color:#fff;

  font-size:clamp(38px,5vw,60px);

  line-height:1;

  letter-spacing:-.04em;

  font-weight:950;
}

.jjj-final p{
  max-width:720px;

  margin:0 auto;

  color:#a9bacb;

  font-size:17px;
  line-height:1.75;
}

.jjj-phone{
  display:inline-block;

  margin:28px 0 0;

  color:#fff !important;

  font-size:28px;
  font-weight:950;

  text-decoration:none !important;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:1000px){

  .jjj-hero-grid,
  .jjj-intro-grid{
    grid-template-columns:1fr;
  }

  .jjj-hp-graphic{
    min-height:390px;
  }

  .jjj-grid3,
  .jjj-town-grid,
  .jjj-related-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:760px){

  .jjj-section{
    padding:70px 0;
  }

  .jjj-hero{
    min-height:auto;
  }

  .jjj-hero-grid{
    padding:70px 0;
  }

  .jjj-h1{
    font-size:48px;
  }

  .jjj-hp-graphic{
    min-height:330px;
  }

  .jjj-hp-box{
    width:330px;
  }

  .jjj-grid2,
  .jjj-diagnostic-grid,
  .jjj-service-area-box{
    grid-template-columns:1fr;
  }

  .jjj-btnrow{
    flex-direction:column;
  }

  .jjj-btn{
    width:100%;
  }

}

@media(max-width:500px){

  .jjj-wrap{
    width:min(calc(100% - 28px),var(--jjj-max));
  }

  .jjj-h1{
    font-size:42px;
  }

  .jjj-hp-graphic{
    min-height:285px;
  }

  .jjj-hp-box{
    width:285px;
  }

  .jjj-hp-unit{
    width:145px;
    height:115px;
  }

  .jjj-service-area-item{
    flex-direction:column;
    gap:16px;
  }

}
  /* CORE UI */ 
  --navy:#002855; 
  --text:#1f2937; 
  --muted:#6b7280; 
  --line:#e5e7eb; 
  --bg:#ffffff; 
  --soft:#f7f9fb; 
 
  /* GRADIENTS */ 
  --grad-main:linear-gradient(135deg,#0074e8,#ff3b00); 
  --grad-cool:linear-gradient(135deg,#0074e8,#00c6ff); 
  --grad-heat:linear-gradient(135deg,#ff3b00,#ff8c00); 
 
  /* EFFECTS */ 
  --radius:16px; 
  --shadow:0 12px 30px rgba(0,0,0,.08); 
} 
 
 
/* ========================= 
   BASE 
   ========================= */ 
 
body{ 
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; 
  color:var(--text); 
  background:var(--bg); 
  line-height:1.7; 
} 
 
 
/* ========================= 
   LEGACY TYPOGRAPHY 
   ========================= 
   Intentionally scoped so older pages 
   can use these classes without 
   overriding new JJJ page systems. 
   ========================= */ 
 
.section-dark{ 
  background:var(--navy); 
  color:#fff; 
} 
 
.section-dark h1, 
.section-dark h2, 
.section-dark h3, 
.section-dark p{ 
  color:#fff; 
} 
 
 
/* ========================= 
   LINKS 
   ========================= */ 
 
a{ 
  color:var(--cool); 
  font-weight:700; 
  text-decoration:none; 
} 
 
a:hover{ 
  color:var(--heat); 
  text-decoration:underline; 
} 
 
 
/* ========================= 
   BUTTONS 
   ========================= */ 
 
button, 
.wp-block-button__link{ 
  background:var(--cool); 
  color:#fff; 
  border:none; 
  padding:14px 20px; 
  border-radius:10px; 
  font-weight:800; 
  transition:.2s ease; 
} 
 
button:hover, 
.wp-block-button__link:hover{ 
  background:var(--heat); 
} 
 
 
/* ========================= 
   LEGACY SECTIONS 
   ========================= */ 
 
.section{ 
  padding:70px 0; 
} 
 
.section-soft{ 
  background:var(--soft); 
} 
 
 
/* ========================= 
   LEGACY CARDS 
   ========================= */ 
 
.card{ 
  background:#fff; 
  border:1px solid var(--line); 
  border-radius:var(--radius); 
  padding:24px; 
  box-shadow:var(--shadow); 
  transition:.25s ease; 
} 
 
.card:hover{ 
  transform:translateY(-5px); 
  box-shadow:0 20px 50px rgba(0,0,0,.12); 
} 
 
 
/* ========================= 
   SERVICE COLOR BORDERS 
   ========================= */ 
 
.card.cool{ 
  border-top:5px solid var(--cool); 
} 
 
.card.heat{ 
  border-top:5px solid var(--heat); 
} 
 
.card.refrig{ 
  border-top:5px solid var(--refrig); 
} 
 
.card.electric{ 
  border-top:5px solid var(--electric); 
} 
 
 
/* ========================= 
   CTA SECTION 
   ========================= */ 
 
.cta{ 
  background:var(--grad-main); 
  color:#fff; 
  text-align:center; 
  padding:60px 20px; 
  border-radius:20px; 
} 
 
.cta h2, 
.cta p{ 
  color:#fff; 
} 
 
 
/* ========================= 
   SERVICE STRIP 
   ========================= */ 
 
.service-strip{ 
  display:grid; 
  grid-template-columns:repeat(4,1fr); 
  text-align:center; 
  font-weight:900; 
  color:#fff; 
} 
 
.service-strip div{ 
  padding:16px; 
} 
 
.service-strip .cool{ 
  background:var(--cool); 
} 
 
.service-strip .heat{ 
  background:var(--heat); 
} 
 
.service-strip .refrig{ 
  background:var(--refrig); 
} 
 
.service-strip .electric{ 
  background:var(--electric); 
} 
 
 
/* ========================= 
   IMAGES 
   ========================= */ 
 
img{ 
  max-width:100%; 
  height:auto; 
  border-radius:12px; 
} 
 
 
/* ========================= 
   JJJ TECHS FOOTER 
   ========================= */ 
 
.jjj-footer{ 
  width:100%; 
  background:#ffffff; 
  border-top:1px solid #e5e7eb; 
  padding:60px 20px 25px; 
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; 
} 
 
.jjj-footer-wrap{
  max-width:1180px;
  margin:0 auto;
}
 
.jjj-footer-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:50px;
  align-items:start;
}
 
.jjj-footer h3{ 
  color:#002855; 
  font-size:22px; 
  line-height:1.3; 
  margin:0 0 18px; 
} 
 
.jjj-footer p{ 
  color:#5b6472; 
  margin:0 0 12px; 
  line-height:1.7; 
} 
 
.jjj-footer ul{ 
  list-style:none; 
  padding:0; 
  margin:0; 
} 
 
.jjj-footer li{ 
  margin-bottom:10px; 
} 
 
.jjj-footer a{ 
  color:#0074e8; 
  text-decoration:none; 
  font-weight:600; 
} 
 
.jjj-footer a:hover{ 
  color:#002855; 
} 
 
.jjj-footer-bottom{ 
  margin-top:45px; 
  padding-top:20px; 
  border-top:1px solid #e5e7eb; 
  text-align:center; 
  color:#5b6472; 
  font-size:14px; 
} 
 
 
/* ========================= 
   MOBILE 
   ========================= */ 
 
@media(max-width:768px){ 
 
  .section{ 
    padding:50px 0; 
  } 
 
  .service-strip{ 
    grid-template-columns:1fr 1fr; 
  } 
 
} 
 
 
/* ========================= 
   FOOTER MOBILE 
   ========================= */ 
 
@media(max-width:850px){ 
 
  .jjj-footer-grid{ 
    grid-template-columns:1fr; 
    gap:35px; 
  } 
 
  .jjj-footer{ 
    padding:45px 20px 25px; 
  } 
 
} 
.jjj-footer-wrap{
  max-width:1180px;
  margin:0 auto;
}
.jjj-footer-wrap{
  max-width:1180px;
  margin:0 auto;
}
/* =========================================================
JJJ TECHS FURNACE CITY PAGE — H1 ONLY
========================================================= */

.jjj-area-hero h1{
  margin:0 !important;
  max-width:800px !important;

  color:#fff !important;

  font-size:clamp(44px,6vw,70px) !important;
  line-height:.99 !important;
  letter-spacing:-.045em !important;
  font-weight:950 !important;
}

.jjj-area-hero h1 span{
  color:#0074e8 !important;
}

@media(max-width:760px){

  .jjj-area-hero h1{
    font-size:48px !important;
  }

}

@media(max-width:500px){

  .jjj-area-hero h1{
    font-size:42px !important;
  }

}
/* =========================================================
   JJJ TECHS — GLOBAL HERO TITLE
   WHITE TITLE + BLUE LOCATION
========================================================= */

.jjj-page .jjj-hero h1.jjj-h1{
  color:#ffffff !important;
}

.jjj-page .jjj-hero h1.jjj-h1 span,
.jjj-page .jjj-hero h1.jjj-h1 .jjj-h1-blue{
  color:#71bcff !important;
}.jjj-home .jjj-hp-hero h1{
  color:#fff !important;
}

.jjj-home .jjj-hp-hero h1 span{
  color:#168cff !important;
}