/* ============================================================
   Home page refinements (2026-11-05). Remove this file's <link> in
   includes/header.php to go back to the previous look.
=============================================================*/

/* 1. Hero: video in a black frame, lined up with the navbar (logo left edge to Contact us right edge) */
body.home #site .vc_section.vc_custom_1665745970762 { padding-bottom: 40px !important; background: #000 !important; background-image: none !important; }
body.home #site .content > .vc_section.vc_custom_1665745970762 > .vc_row > .row-inner { padding-left: 40px; padding-right: 55px; }
/* The video is 16:9: a 16:9 frame shows all of it, nothing cropped */
@media (min-width: 779px) {
  body.home #site .ems-hero { height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 1040px) {
  body.home #site .content > .vc_section.vc_custom_1665745970762 > .vc_row > .row-inner { padding-left: 20px; padding-right: 20px; }
  body.home #site .vc_section.vc_custom_1665745970762 { padding-bottom: 20px !important; }
}

/* 2. Accreditations: smaller logos, more space between them */
body.home #site #Accreditations .marquee-track img { width: 160px; height: 80px; margin: 0 24px; }
@media (max-width: 767px) {
  body.home #site #Accreditations .marquee-track img { width: 110px; height: 55px; margin: 0 16px; }
}

/* 3. Featured Case Study: image at its own 4:3 shape, text vertically centred beside it */
@media (min-width: 768px) {
  body.home #site .ems-case > .row-inner > .vc_column_container:first-child { aspect-ratio: 4 / 3; }
  body.home #site .ems-case > .row-inner > .vc_column_container:last-child > .vc_column-inner {
    display: flex !important; flex-direction: column; justify-content: center; min-height: 0;
  }
}

/* 4. Our Commitments: white cards, white icon on a red tile; hover only lifts the card */
body.home #site .vc_custom_1712646890980 .iconlist li,
body.home #site .vc_custom_1712646890980 .iconlist.iconlist-icon-small.has-border li {
  background: #fff !important; transition: transform .3s ease;
}
body.home #site .vc_custom_1712646890980 .iconlist li::before { display: none !important; }
body.home #site .vc_custom_1712646890980 .iconlist li:hover { transform: translateY(-6px); box-shadow: none !important; }
body.home #site .vc_custom_1712646890980 .iconlist li > .iconlist-item-icon,
body.home #site .vc_custom_1712646890980 .iconlist li:hover > .iconlist-item-icon { background: #BD2026 !important; transition: none; }
body.home #site .vc_custom_1712646890980 .iconlist-item-icon svg,
body.home #site .vc_custom_1712646890980 .iconlist li:hover .iconlist-item-icon svg { stroke: #fff !important; transition: none; }

/* Hero frame follows the navbar's own side padding at each screen size */
@media (min-width: 1041px) and (max-width: 1620px) {
  body.home #site .content > .vc_section.vc_custom_1665745970762 > .vc_row > .row-inner { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1041px) and (max-width: 1100px) {
  body.home #site .content > .vc_section.vc_custom_1665745970762 > .vc_row > .row-inner { padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 768px) and (max-width: 1040px) {
  body.home #site .content > .vc_section.vc_custom_1665745970762 > .vc_row > .row-inner { padding-left: 40px; padding-right: 40px; }
}

/* Our Commitments hover: same soft feel as What We Do (lift + soft shadow, .35s ease) */
body.home #site .vc_custom_1712646890980 .iconlist li,
body.home #site .vc_custom_1712646890980 .iconlist.iconlist-icon-small.has-border li { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
body.home #site .vc_custom_1712646890980 .iconlist li:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.08) !important; border-color: #dcdcdc !important; }

/* What We Do hover: everything eases together, in and out (the lift, red fill, text and icon colours used to jump) */
body.home #site .wwd-live .iconbox {
  transition: transform .4s ease, background-color .4s ease, color .4s ease, box-shadow .4s ease, border-color .4s ease !important;
}
body.home #site .wwd-live .iconbox .box-title { transition: color .4s ease, background-size .9s ease !important; }
body.home #site .wwd-live .iconbox .box-content,
body.home #site .wwd-live .iconbox .box-content p { transition: color .4s ease !important; }
body.home #site .wwd-live .iconbox .box-icon { transition: background-color .4s ease !important; }
body.home #site .wwd-live .iconbox .box-icon svg { transition: stroke .4s ease !important; }