/* ============================================================
   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; }

/* Hero video: full screen width, no side frame */
body.home #site .content > .vc_section.vc_custom_1665745970762 > .vc_row > .row-inner { padding-left: 0; padding-right: 0; }

/* Hero: no black strip under the video */
body.home #site .vc_section.vc_custom_1665745970762 { padding-bottom: 0 !important; }

/* Hero: original look. Black section, centred video frame at its original 1920x900 shape, no red shape. A little wider than the original frame. */
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: 0; padding-right: 0; }
body.home #site .ems-hero-wrap { width: 92%; max-width: 1920px; margin-left: auto; margin-right: auto; }
body.home #site .ems-hero { height: calc(var(--gh) * var(--u)); aspect-ratio: auto; }
@media (min-width: 1200px) { body.home #site .ems-hero-wrap { width: 85%; } }
@media (min-width: 1700px) { body.home #site .ems-hero-wrap { width: 75%; } }
@media (min-width: 1041px) { body.home #site .vc_section.vc_custom_1665745970762 { padding-top: 116px !important; } }
@media (max-width: 1040px) { body.home #site .vc_section.vc_custom_1665745970762 { padding-top: 96px !important; padding-bottom: 24px !important; } }

/* Hero video: left edge at the start of the company name in the logo, right edge at the Contact us button (logo offset + 30.5% of logo width) */
@media (min-width: 1041px) {
  body.home #site .ems-hero-wrap { width: auto; max-width: none; margin-left: 134px; margin-right: 24px; }
}
@media (min-width: 1041px) and (max-width: 1100px) {
  body.home #site .ems-hero-wrap { margin-left: 126px; margin-right: 16px; }
}
@media (min-width: 1561px) {
  body.home #site .ems-hero-wrap { margin-left: 147px; margin-right: 24px; }
}
@media (min-width: 1621px) {
  body.home #site .ems-hero-wrap { margin-left: 163px; margin-right: 55px; }
}

/* Carousel arrows no longer touch the View All Projects button */
body.home #site .vc_btn3-container.btn-class { margin-top: 28px !important; }
@media (max-width: 767px) {
  body.home #site .elements-carousel .owl-buttons div { width: 56px !important; height: 56px !important; line-height: 56px !important; }
  body.home #site .vc_btn3-container.btn-class { margin-top: 24px !important; }
}
/* Phones: logo slider removed (the logos are already in Accreditations) */
body.home #site .vc_row:has(> .row-inner > .wpb_column .client-slider-logo),
body.home #site .wpb_column:has(.client-slider-logo) { display: none !important; }

/* What We Do: titles stay inside the cards at every width, carousel grows with the cards so nothing is clipped */
body.home #site .wwd-live .iconbox .box-title { font-size: clamp(19px, 1.45vw, 27px) !important; letter-spacing: 0.5px; overflow-wrap: anywhere; }
body.home #site .wwd-live .iconbox { padding: 36px 28px 40px !important; }
body.home #site .wwd-live .owl-wrapper-outer { height: auto !important; }
@media (min-width: 1041px) and (max-width: 1199px) { body.home #site .wwd-live .iconbox .box-title { font-size: 22px !important; } }
@media (min-width: 545px) and (max-width: 1040px) { body.home #site .wwd-live .iconbox .box-title { font-size: clamp(16px, 2.6vw, 22px) !important; } body.home #site .wwd-live .iconbox { padding: 28px 22px 32px !important; } }

/* Featured Projects: no scrollbar in the details panel */
body.home #site .project-carousel .project .project-info { max-height: none !important; overflow: hidden !important; scrollbar-width: none; }
body.home #site .project-carousel .project .project-info::-webkit-scrollbar { display: none; }