:root{ --ars-blue:#253d79; --ars-blue-hover:#1c2f5e; }

/* =========================
   HERO (Residential page only)
   ========================= */
#blog{ min-height: 0; }

#blog .parallax-overlay{
  min-height: 220px;
  padding-top: 55px;
  padding-bottom: 25px;
  display: flex;
  align-items: center;
}

#blog.parallax{
  background-attachment: scroll;
  background-position: center 15%;
}

/* =========================
   INTRO BAND (like Commercial)
   ========================= */
.res-intro-band{
  padding: 50px 0 50px;
}

.res-intro-card{
  margin: 0;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  background-image: none;
  box-shadow: none;
}

.res-intro-row{
  margin: 0;
}

.res-intro-photo-col{
  padding: 0;
}

.res-intro-copy{
  padding: 24px 28px;
}

.res-intro-copy h2{
  margin: 0 0 10px 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: rgba(37,61,121,.85);
}

.res-lead{
  margin: 0 0 12px 0;
  font-size: 18px;
  line-height: 1.6;
  color: #59544c;
}

.res-body{
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: #59544c;
}

.res-intro-photo{
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  box-shadow: none;
}

/* =========================
   SERVICE OPTIONS PANEL (like Commercial/Roll-off)
   ========================= */
.res-grid{
  padding-top: 50px;
  padding-bottom: 35px;
}

.res-panel{
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,0.10);
}

.res-panel .panel-heading{
  background: rgba(37, 61, 121, 0.85);
  border: 0;
}

.res-panel .panel-title{
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}

.res-panel .panel-body{
  padding: 22px;
}

.res-card{
  background:#fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  margin-bottom: 28px;
}

.res-media{
  padding: 18px 18px 10px;
  text-align: center;
  background: linear-gradient(180deg, rgba(37,61,121,0.06), rgba(37,61,121,0));
}

.res-media img{
  width: 100%;
  max-width: 260px;
  height: 240px;
  object-fit: contain;
  display: inline-block;
}

.res-bodywrap{
  padding: 14px 16px 16px;
  text-align: left;
}

.res-title{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: #253d79;
  text-align: center;
}

.res-desc{
  margin: 0;
  padding: 12px 12px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 10px;
  color: #4a4a4a;
  line-height: 1.55;
  font-size: 15px;
}

.res-cta{
  text-align: center;
  padding-top: 12px;
}

/* ===== Residential options layout (inside panel) ===== */
.res-options-media{
  text-align: center;
  padding: 10px 8px 0;
}

.res-options-cart{
  width: 100%;
  max-width: 240px;
  height: auto;
  display: inline-block;
}

.res-options-callout{
  margin: 14px 6px 0;
  padding: 16px 14px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: rgba(37,61,121,0.06);
  text-align: center;
}

.res-options-callout a{
  text-decoration: none;
}

.res-call-btn{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(37,61,121,0.22);
  background: rgba(37,61,121,0.10);
  color: rgba(37,61,121,0.92);
  font-weight: 800;
  line-height: 1;
}

.res-call-btn:hover{
  background: rgba(37,61,121,0.14);
  border-color: rgba(37,61,121,0.30);
  color: rgba(37,61,121,1);
}

.res-call-subtext{
  margin-top: 10px;
  color: #59544c;
  font-weight: 600;
  font-size: 14px;
}

/* ===== Service options list (clean rows + bullet) ===== */
.res-option-list{
  display: grid;
  gap: 25px;
}

.res-option{
  position: relative;
  padding: 0 0 0 26px;
  border-bottom: 0;
}

.res-option:before{
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ars-blue, #253d79);
  border: 0;
}

.res-option-title{
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 900;
  color: rgba(37,61,121,.90);
}

.res-option-desc,
.res-option-meta{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #59544c;
}

/* ===== Residential: Quick Link cards (between the two boxes) ===== */
.res-quicklinks{
  padding: 18px 0 12px;
}

.res-quickcard{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.res-quickcard:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.09);
  border-color: rgba(37,61,121,.25);
}

.res-quickicon{
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(37,61,121,0.08);
  border: 1px solid rgba(37,61,121,0.14);
}

.res-quickicon svg{
  width: 22px;
  height: 22px;
  fill: var(--ars-blue, #253d79);
}

.res-quicktitle{
  display: block;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
  color: rgba(37,61,121,.90);
}

.res-quickdesc{
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: #59544c;
}

.res-quickarrow{
  margin-left: auto;
  font-size: 22px;
  font-weight: 800;
  color: rgba(37,61,121,.70);
}

.res-call-mini{
  margin: 14px 0 0;
  text-align: center;
}

.res-call-label{
  margin-bottom: 10px;
  color: #59544c;
  font-weight: 600;
  font-size: 18px;
}

.res-call-number{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(37,61,121,0.18);
  background: rgba(37,61,121,0.08);
  color: rgba(37,61,121,0.95);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.res-call-number:hover{
  background: rgba(37,61,121,0.12);
  border-color: rgba(37,61,121,0.25);
  text-decoration: none;
}

.res-call-number i{
  color: rgba(37,61,121,0.95);
}

.res-call-row{
  margin-top: 12px;
}

.res-call-pill{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(37,61,121,.22);
  background: rgba(37,61,121,.06);
  color: rgba(37,61,121,.90);
  font-weight: 800;
  text-decoration: none;
  line-height: 1;
}

.res-call-pill i{
  margin-right: 8px;
  color: rgba(37,61,121,.90);
}

.res-call-pill:hover{
  background: rgba(37,61,121,.10);
  border-color: rgba(37,61,121,.32);
  text-decoration: none;
}

@media (max-width: 767px){
  .res-quicklinks{ padding: 8px 0 6px; }
  .res-quickcard{ margin-bottom: 12px; }
}

/* =========================
   RESIDENTIAL: phone button positioning by breakpoint
   ========================= */

/* >=992 default: keep right-aligned under the left copy (your current behavior) */
@media (min-width: 992px){
  .res-option-list{ padding-left: 10px; }
  .res-call-row{
    display: flex;
    justify-content: flex-end;
    padding-right: 18px;
  }
}

@media (min-width: 768px){
  .res-quickcard{ margin-bottom:25px; }
}

/* 992–1199: center the phone button across the ENTIRE intro card (not just the left column) */
@media (min-width: 992px) and (max-width: 1199px){

  /* anchor absolute positioning inside the intro card */
  .res-intro-card{
    position: relative;
  }

  /* create space so the centered button doesn't overlap copy/photo */
  .res-intro-copy{
    padding-bottom: 86px;
  }

  /* center the button across the full card width */
  .res-call-row{
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);

    width: 100%;
    display: flex;
    justify-content: center;

    padding: 0;
    margin: 0;
  }
}

@media (max-width: 991px){
  .res-options-callout{ margin-bottom: 16px; }
  .res-intro-copy{ padding: 18px; }
  .res-option-list {margin-top: 50px}
  .res-call-row {
    margin-top: 25px ;
    margin-bottom:18px ;
  }
}

@media (max-width: 767px){
  .res-lead,
  .res-body{ font-size: 16px; }
  .res-media img{ height: 190px; }
}
@media (max-width: 1200px){
  .res-call-row { 
    max-width: 157px;
    margin-left: auto; 
    margin-right: auto;
  } 
}
/* =========================
   RESIDENTIAL: Service Guidelines content
   ========================= */
.res-guidelines{
  margin-top: 10px;
}

.res-guidelines h3{
  margin: 18px 0 10px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
  color: rgba(37,61,121,.92);
}

.res-list{
  margin: 10px 0 12px 18px;
  padding: 0;
}

.res-list li{
  margin: 6px 0;
  line-height: 1.55;
  color: #59544c;
  font-size: inherit;
}

.res-tight{
  margin-top: 6px;
}

.res-note{
  margin-top: 12px;
  font-size: 14px;
  color: #6b6760;
}
/* =========================
   RESIDENTIAL: Guidelines layout polish (grid + cards)
   ========================= */

.res-guidelines-card{
  margin-top: 22px;
}

.res-guideline-grid{
  margin-top: 14px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px){
  .res-guideline-grid{
    grid-template-columns: 1fr 1fr;
  }
}

.res-guideline-item{
  
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
}

.res-guideline-title{
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 900;
  color: rgba(37,61,121,.92);
}

/* keep lists tidy inside guideline cards */
.res-guideline-item .res-list{
  margin: 8px 0 10px 18px;
}

.res-guideline-item .res-list li{
  margin: 5px 0;
}

/* optional helper class if you want to center a call button row */
.res-call-row-center{
  display: flex;
  justify-content: center;
}
/* =========================
   RESIDENTIAL: Hide intro photo at 991px and below
   ========================= */
@media (max-width: 991px){
  .res-intro-photo-col{
    display: none;
  }
}