.qz-box {
     margin-top: 34px;
     padding: 26px;
     border-radius: 20px;
     background: #f6f8ff;
     border: 1px solid #e3e9fb
 }

 .qz-title {
     margin: 0 0 6px;
     font-size: 20px;
     line-height: 1.3;
     color: #0f1a44
 }

 .qz-sub {
     margin: 0 0 18px;
     font-size: 15px;
     color: #4a5170
 }

 .qz-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 12px
 }

 .qz-tile {
     display: flex;
     align-items: center;
     gap: 12px;
     width: 100%;
     padding: 14px 16px;
     text-align: left;
     cursor: pointer;
     background: #fff;
     border: 1px solid #e3e9fb;
     border-left: 5px solid var(--qa);
     border-radius: 12px;
     font: inherit;
     font-weight: 700;
     font-size: 15px;
     line-height: 1.3;
     color: #12183f;
     box-shadow: 0 4px 14px rgba(18, 24, 63, .06);
     transition: transform .2s, box-shadow .2s, background .2s;
 }

 .qz-tile i {
     flex: none;
     width: 38px;
     height: 38px;
     border-radius: 10px;
     display: grid;
     place-items: center;
     font-size: 18px;
     background: var(--qs);
     color: var(--qa);
 }

 .qz-tile:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 22px rgba(18, 24, 63, .12)
 }

 .qz-tile.is-active {
     background: var(--qa);
     color: #fff;
     border-color: var(--qa)
 }

 .qz-tile.is-active i {
     background: rgba(255, 255, 255, .25);
     color: #fff
 }

 .qz-c {
     --qa: #00aeef;
     --qs: #e6f6fd
 }

 .qz-m {
     --qa: #ec008c;
     --qs: #fde8f4
 }

 .qz-y {
     --qa: #e0a100;
     --qs: #fff6dc
 }

 .qz-y.is-active {
     color: #12183f
 }

 .qz-y.is-active i {
     color: #12183f
 }

 .qz-contact {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 12px;
     margin-top: 20px;
     padding-top: 18px;
     border-top: 1px dashed #cdd5ee;
 }

 .qz-contact span {
     font-weight: 700;
     color: #12183f;
     margin-right: 4px
 }

 .qz-contact a {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 10px 18px;
     border-radius: 8px;
     font-weight: 700;
     font-size: 15px;
     text-decoration: none;
     background: #0b5aa5;
     color: #fff;
     transition: .2s;
 }

 .qz-contact a:last-child {
     background: #25d366
 }

 .qz-contact a:hover {
     transform: translateY(-2px)
 }

 @media (max-width:575px) {
     .qz-box {
         padding: 20px
     }

     .qz-grid {
         grid-template-columns: 1fr
     }
 }



/* Get a Quote banner — correct HTML selectors */

.page-hero .ph-contact-art {
  position: absolute;
  top: 50%;
  right: 2.5%;
  transform: translateY(-50%);
  width: 47%;
  max-width: 610px;
  height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.page-hero .ph-contact-banner-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Mobile layout */
@media screen and (max-width: 767px) {
  .page-hero {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
    padding-bottom: 24px;
  }

  .page-hero > .container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .page-hero .ph-contact-art {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 420px;
    height: 220px !important;
    margin: 16px auto 0;
  }

  .page-hero .ph-contact-banner-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .page-hero .ph-contact-art .ph-chip {
    display: none !important;
  }
}

@media screen and (max-width: 380px) {
  .page-hero .ph-contact-art {
    height: 180px !important;
  }
}