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

  /* =========================
     HERO (Roll-off 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%;
  }

  /* =========================
     COMBINED INTRO + FEATURES CARD
     ========================= */
  .rolloff-intro-band{
    padding: 50px 0 22px;
  }

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

  .rolloff-combined-section{
    padding: 24px 28px;
  }

  .rolloff-combined-divider{
    border-top: 1px solid rgba(0,0,0,0.08);
  }

  /* Make sure inner wrappers don’t look like separate boxes */
  .rolloff-intro-card,
  .rolloff-features-well{
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* =========================
     INTRO (left image + right text)
     ========================= */
  .rolloff-intro-title{
    margin: 0 0 10px 0;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    color: rgba(37,61,121,.85);
  }

  .rolloff-intro-photo{
    margin-top: 30px; /* drops image down under the title */
    border: 0;
    box-shadow: none;
    display: block;
    width: 100%;
    height: auto;
  }

  .rolloff-intro-copy{
    padding-top: 6px;
  }

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

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

  /* Keep the JOB SITE image from overflowing its column at 992–1199 */
@media (min-width: 992px){
  .rolloff-intro-photo{
    width: auto;
    max-width: 100%;   /* prevents overlap into the right column */
    height: auto;
  }
}

/* On wide desktop (1200+), keep your “good” target size */
@media (min-width: 1200px){
  .rolloff-intro-photo{
    max-width: 470px;  /* your image is 470px wide */
  }
}

  /* =========================
     FEATURES (checklist + truck image)
     ========================= */
  .rolloff-features-list{
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .rolloff-features-list li{
    position: relative;
    padding-left: 34px;
    margin: 10px 0;
    color: #333;
    line-height: 1.5;
  }

  .rolloff-features-list li:before{
    content: "\f058"; /* FontAwesome check-circle */
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 0;
    color: #333;
    font-size: 18px;
  }

  .rolloff-features-truck{
    margin-top: 6px;
    width: 100%;
    height: auto;
    display: block;
  }

  /* Desktop: pull list + truck inward (closer together) + make truck bigger */
  @media (min-width: 992px){
    /* IMPORTANT: your HTML uses col-md-7 / col-md-5 */
    .rolloff-features-well .col-md-7{
      padding-left: 40px;
    }

    .rolloff-features-well .col-md-5{
      padding-right: 40px;
      text-align: right;
    }

    /* right-align image nicely inside the right column */
    .rolloff-features-truck{
      display: inline-block;
      max-width: 520px; /* bigger on desktop */
    }
  }

  /* =========================
     SIZE GRID + CARDS
     ========================= */
  .rolloff-grid{
    padding-top: 10px;
    padding-bottom: 35px;
  }

  .rolloff-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);
  }

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

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

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

  .rolloff-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;
    transition: transform 160ms ease, box-shadow 160ms ease;
  }

  .rolloff-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0,0,0,0.12);
  }

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

  .rolloff-media img{
    width: 100%;
    max-width: 420px;
    height: 220px;
    object-fit: contain;
    display: inline-block;
  }

  .rolloff-bodywrap{
    padding: 14px 16px 16px;
    text-align: center;
  }

  .rolloff-title{
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    color: #253d79;
  }

  .rolloff-spec,
  .rolloff-dims{
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: rgba(37,61,121,0.90);
  }

  .rolloff-spec{ margin-bottom: 4px; }

  /* =========================
     RESPONSIVE
     ========================= */
  @media (max-width: 991px){
    .rolloff-intro-copy{
      margin-top: 18px;
    }
  }

  @media (max-width: 767px){
    .rolloff-lead,
    .rolloff-body{
      font-size: 16px;
    }
    .rolloff-media img{
      height: 170px;
    }
  }
  @media (min-width: 992px) and (max-width: 1199px) {
  .page-title {
    white-space: nowrap;
  }
}