/* V300 — Website Refresh page visual-balance hotfix
   Scope: website-refresh-content.html only.
   Purpose: stop the service visuals from feeling stretched or oversized,
   and bring the image treatment back into a cleaner Vantora blue palette.
*/

body.v300-refresh-visual-fix .service-detail-section .service-offering,
body.v300-refresh-visual-fix .service-detail-section .service-offering.reverse {
  align-items: start !important;
  gap: clamp(34px, 4vw, 60px) !important;
}

@media (min-width: 901px) {
  body.v300-refresh-visual-fix .service-detail-section .service-offering {
    grid-template-columns: minmax(280px, .80fr) minmax(0, 1.20fr) !important;
  }

  body.v300-refresh-visual-fix .service-detail-section .service-offering.reverse {
    grid-template-columns: minmax(0, 1.20fr) minmax(280px, .80fr) !important;
  }

  body.v300-refresh-visual-fix .service-detail-section .service-offering__visual {
    width: 100% !important;
    max-width: 520px !important;
    align-self: start !important;
    justify-self: start !important;
    padding: 14px !important;
    border-color: rgba(80, 159, 233, .22) !important;
    border-radius: 26px !important;
    background: linear-gradient(160deg, rgba(5, 20, 41, .98), rgba(8, 30, 58, .95)) !important;
    box-shadow: 0 20px 52px rgba(1, 11, 26, .24), 0 0 0 1px rgba(57, 144, 228, .05) !important;
  }

  body.v300-refresh-visual-fix .service-detail-section .service-offering.reverse .service-offering__visual {
    justify-self: end !important;
  }

  body.v300-refresh-visual-fix .service-detail-section .service-offering__visual img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 18px !important;
    background: #081b37 !important;
  }
}

body.v300-refresh-visual-fix #refresh-repair .service-offering__visual img {
  filter: saturate(.84) contrast(1.03) brightness(.94) hue-rotate(-10deg) !important;
}

body.v300-refresh-visual-fix #copywriting .service-offering__visual img {
  filter: saturate(.78) contrast(1.03) brightness(.95) hue-rotate(-8deg) !important;
}

body.v300-refresh-visual-fix #brand-kit .service-offering__visual img {
  filter: saturate(.70) contrast(1.02) brightness(.95) hue-rotate(-16deg) !important;
}

body.v300-refresh-visual-fix .service-detail-section .service-offering__visual::after {
  inset: 14px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(0, 92, 196, .16), rgba(88, 182, 246, .11) 58%, rgba(0, 92, 196, .07)) !important;
  mix-blend-mode: color !important;
  opacity: .56 !important;
  box-shadow: inset 0 0 44px rgba(8, 91, 171, .10) !important;
}

body.v300-refresh-visual-fix #refresh-repair .service-offering__visual::after {
  opacity: .42 !important;
}

body.v300-refresh-visual-fix #brand-kit .service-offering__visual::after {
  opacity: .68 !important;
}

body.v300-refresh-visual-fix .service-detail-hero__art img {
  filter: saturate(.80) contrast(1.05) brightness(.90) hue-rotate(-6deg) !important;
}

body.v300-refresh-visual-fix .service-detail-hero__art::after {
  background: linear-gradient(135deg, rgba(4, 55, 108, .17), rgba(8, 112, 211, .29) 58%, rgba(67, 164, 239, .14)) !important;
  opacity: .78 !important;
}

@media (max-width: 900px) {
  body.v300-refresh-visual-fix .service-detail-section .service-offering,
  body.v300-refresh-visual-fix .service-detail-section .service-offering.reverse {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  body.v300-refresh-visual-fix .service-detail-section .service-offering__visual,
  body.v300-refresh-visual-fix .service-detail-section .service-offering.reverse .service-offering__visual {
    width: min(100%, 640px) !important;
    max-width: 640px !important;
    margin-inline: auto !important;
    justify-self: center !important;
    align-self: start !important;
    padding: 12px !important;
    border-color: rgba(80, 159, 233, .22) !important;
    background: linear-gradient(160deg, rgba(5, 20, 41, .98), rgba(8, 30, 58, .95)) !important;
  }

  body.v300-refresh-visual-fix .service-detail-section .service-offering__visual img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #081b37 !important;
  }

  body.v300-refresh-visual-fix .service-detail-section .service-offering__visual::after {
    inset: 12px !important;
    border-radius: 18px !important;
  }
}