/* ============================================================
   Tablet and small-screen fixes (2026-11-05). CSS only, no text changed.
   Remove this file's <link> in includes/header.php to go back.
=============================================================*/

/* ---------- Space between the banner and the first content ---------- */
@media (max-width: 1040px) {
  html body.page-id-363 #site #content-body .content-body-inner.wrap,
  html body.page-id-1606 #site #content-body .content-body-inner.wrap,
  html body.page-id-1851 #site #content-body .content-body-inner.wrap,
  html body.page-id-3 #site #content-body .content-body-inner.wrap,
  html body.page-id-3436 #site #content-body .content-body-inner.wrap,
  html body.page-id-142 #site #content-body .content-body-inner.wrap,
  html body.blog #site #content-body .content-body-inner.wrap { padding-top: 48px !important; }
}

/* ---------- Home: Featured Case Study stacks, image first ---------- */
@media (max-width: 1040px) {
  html body.home #site .ems-case > .row-inner { display: block !important; }
  html body.home #site .ems-case > .row-inner > .vc_column_container { display: block; width: 100% !important; max-width: none !important; aspect-ratio: auto !important; }
  html body.home #site .ems-case > .row-inner > .vc_column_container:first-child .vc_column-inner { height: auto; padding: 0 !important; }
  html body.home #site .ems-case > .row-inner > .vc_column_container:first-child .wpb_wrapper,
  html body.home #site .ems-case > .row-inner > .vc_column_container:first-child .wpb_single_image,
  html body.home #site .ems-case > .row-inner > .vc_column_container:first-child .vc_figure,
  html body.home #site .ems-case > .row-inner > .vc_column_container:first-child .vc_single_image-wrapper { display: block; width: 100%; height: auto; margin: 0; }
  html body.home #site .ems-case > .row-inner > .vc_column_container:first-child img { position: static; display: block; width: 100% !important; height: auto !important; aspect-ratio: 2000 / 1499; object-fit: cover; }
  html body.home #site .ems-case > .row-inner > .vc_column_container:last-child > .vc_column-inner { width: 100% !important; height: auto; min-height: 0 !important; margin: 0 !important; padding: 40px !important; box-sizing: border-box; }
}
@media (max-width: 767px) {
  html body.home #site .ems-case > .row-inner > .vc_column_container:last-child > .vc_column-inner { padding: 28px 20px !important; }
}

/* ---------- Home: hero badge stays inside the frame ---------- */
@media (min-width: 779px) and (max-width: 1024px) { html body.home #site .ems-hero { --bx: 735; } }
@media (min-width: 481px) and (max-width: 778px) { html body.home #site .ems-hero { --bx: 560; } }
@media (max-width: 480px) { html body.home #site .ems-hero { --bx: 340; } }

/* ---------- Careers and Core Values: three-column lists no longer touch ---------- */
@media (min-width: 600px) and (max-width: 1040px) {
  html body.page-id-1734 #site .iconlist.iconlist-icon-large.columns-3,
  html body.page-id-486 #site .iconlist.iconlist-icon-large.columns-3 {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box;
  }
  html body.page-id-1734 #site .iconlist.iconlist-icon-large.columns-3 > li,
  html body.page-id-486 #site .iconlist.iconlist-icon-large.columns-3 > li { width: auto !important; max-width: none !important; min-width: 0; flex: none !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; }
  html body.page-id-1734 #site .iconlist.iconlist-icon-large.columns-3 > li::after,
  html body.page-id-486 #site .iconlist.iconlist-icon-large.columns-3 > li::after { display: none !important; }
  html body.page-id-1734 #site .iconlist.iconlist-icon-large.columns-3 p,
  html body.page-id-486 #site .iconlist.iconlist-icon-large.columns-3 p { text-align: left !important; }
  html body.page-id-1734 #site .iconlist.iconlist-icon-large.columns-3 h3 { overflow-wrap: anywhere; }
}
/* Narrow tablets: three columns would be too tight, so one column */
@media (min-width: 600px) and (max-width: 899px) {
  html body.page-id-1734 #site .iconlist.iconlist-icon-large.columns-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Core Values and Why Choose Us: icon lists fit the page ---------- */
@media (min-width: 600px) and (max-width: 1040px) {
  html body.page-id-486 #site .iconlist.iconlist-icon-small,
  html body.page-id-776 #site .iconlist.iconlist-icon-small {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box;
  }
  html body.page-id-486 #site .iconlist.iconlist-icon-small > li,
  html body.page-id-776 #site .iconlist.iconlist-icon-small > li { position: relative; width: auto !important; max-width: none !important; min-width: 0; flex: none !important; margin: 0 !important; padding: 0 0 0 56px !important; box-sizing: border-box; }
  html body.page-id-486 #site .iconlist.iconlist-icon-small > li .iconlist-item-icon,
  html body.page-id-776 #site .iconlist.iconlist-icon-small > li .iconlist-item-icon { left: 0 !important; }
  html body.page-id-486 #site .iconlist.iconlist-icon-small p,
  html body.page-id-776 #site .iconlist.iconlist-icon-small p { text-align: left !important; }
  html body.page-id-486 #site .iconlist.iconlist-icon-small h3,
  html body.page-id-776 #site .iconlist.iconlist-icon-small h3 { overflow-wrap: anywhere; }
}

/* ---------- Clients: counter numbers and labels no longer collide ---------- */
@media (max-width: 1280px) {
  html body.page-id-1606 #site .counter { display: flex; align-items: center; gap: 16px; }
  html body.page-id-1606 #site .counter .counter-content { width: auto !important; flex: 0 0 auto; }
  html body.page-id-1606 #site .counter .counter-title { min-width: 0; }
}

/* ---------- Management: name list fills the content width ---------- */
@media (min-width: 600px) and (max-width: 1040px) {
  html body.page-id-363 #site .content .vc_section { margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  html body.page-id-363 #site .content .vc_row { margin: 0 !important; }
  html body.page-id-363 #site .content .row-inner { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; gap: 40px; }
  html body.page-id-363 #site .content .row-inner > .wpb_column { width: auto !important; max-width: none !important; flex: 1 1 0 !important; min-width: 0; padding: 0 !important; }
  html body.page-id-363 #site .content .row-inner > .wpb_column:empty { display: none; }
  html body.page-id-363 #site .content .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Management: names in two columns */
@media (min-width: 600px) and (max-width: 1040px) {
  html body.page-id-363 #site .content .row-inner { flex-wrap: wrap !important; gap: 0 40px; }
  html body.page-id-363 #site .content .row-inner > .wpb_column { flex: 1 1 calc(50% - 20px) !important; }
  html body.page-id-363 #site .content .row-inner > .wpb_column.vc_col-sm-12 { flex-basis: 100% !important; }
  html body.page-id-363 #site .content p.vc_custom_heading { margin-left: 0 !important; padding-left: 0 !important; text-align: left !important; }
}
/* Core Values: space under the lists */
@media (min-width: 600px) and (max-width: 1040px) {
  html body.page-id-486 #site .iconlist.iconlist-icon-large.columns-3 { margin-bottom: 40px !important; }
  html body.page-id-486 #site .iconlist.iconlist-icon-small { margin-bottom: 56px !important; }
}

/* Careers: How to apply box keeps its inner space */
@media (max-width: 1040px) {
  html body.page-id-1734 #site .content .vc_row[class*="vc_custom_161588914145"] { padding: 40px 36px !important; box-sizing: border-box; }
}
@media (max-width: 767px) {
  html body.page-id-1734 #site .content .vc_row[class*="vc_custom_161588914145"] { padding: 28px 22px !important; }
}

/* Home counters: the widest numbers fit next to the map on laptops and small desktops */
@media (min-width: 992px) and (max-width: 1319px) {
  html body.home #site .vc_custom_1712646913131 .counter { padding-left: 20px !important; padding-right: 16px !important; }
  html body.home #site .vc_custom_1712646913131 .counter-content { font-size: 50px !important; }
  html body.home #site .vc_custom_1712646913131 .counter-content .counter-suffix { font-size: 26px !important; }
  html body.home #site .vc_custom_1712646913131 .counter-title { font-size: 18px !important; }
}
@media (min-width: 992px) and (max-width: 1100px) {
  html body.home #site .vc_custom_1712646913131 .counter-content { font-size: 42px !important; }
  html body.home #site .vc_custom_1712646913131 .counter-content .counter-suffix { font-size: 22px !important; }
  html body.home #site .vc_custom_1712646913131 .counter-title { font-size: 16px !important; }
}

/* Careers: building graphic stands on the line, with clear space above it and below the line */
@media (max-width: 1040px) {
  html body.page-id-1734 #site .content .vc_custom_1750144600929 { padding-bottom: 0 !important; margin-bottom: 56px !important; background-position: right bottom !important; background-size: 220px auto !important; }
  html body.page-id-1734 #site .content .vc_custom_1750144600929 .vc_separator { margin: 161px 0 0 !important; }
  html body.page-id-1734 #site .content .vc_custom_1750144600929 .vc_separator ~ * { display: none !important; }
  html body.page-id-1734 #site .content .vc_custom_1750144600929 .row-inner,
  html body.page-id-1734 #site .content .vc_custom_1750144600929 .wpb_wrapper { margin-bottom: 0 !important; padding-bottom: 0 !important; }
}
@media (max-width: 767px) {
  html body.page-id-1734 #site .content .vc_custom_1750144600929 { margin-bottom: 40px !important; background-size: 170px auto !important; }
  html body.page-id-1734 #site .content .vc_custom_1750144600929 .vc_separator { margin-top: 124px !important; }
}

/* Health and Safety: every image full width at its own shape, text underneath */
@media (max-width: 1100px) {
  html body #site .ems-hs__split { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 0; padding-right: 0; align-items: start; }
  html body #site .ems-hs__split-media img { display: block; width: 100%; height: auto; aspect-ratio: 510 / 226; object-fit: cover; }
  html body #site .ems-hs__cards { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 0; padding-right: 0; }
  html body #site .ems-hs__card { display: block; }
  html body #site .ems-hs__card img { display: block; width: 100%; height: auto; aspect-ratio: 510 / 226; object-fit: cover; }
  html body #site .ems-hs__card-body { padding: 28px 32px 32px; }
  html body #site .ems-hs__card h3 { font-size: 24px; }
  html body #site .ems-hs__roles { gap: 20px; }
}
@media (max-width: 599px) {
  html body #site .ems-hs__roles { grid-template-columns: minmax(0, 1fr); }
  html body #site .ems-hs__card-body { padding: 24px 20px 26px; }
}

/* ---------- Management team list, tablet only: space between name, job title and the next person (2026-11-06) ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
  html body.page-id-363 #site .member.style2 { margin-bottom: 22px !important; padding-bottom: 20px !important; }
  html body.page-id-363 #site .member.style2 .member-name { margin-bottom: 10px !important; }
}

/* ---------- Page banner, phone and tablet only: title at the bottom of the banner (2026-11-06) ---------- */
@media (max-width: 1024px) {
  html body #site .content-header .content-header-inner { display: flex; flex-direction: column; justify-content: flex-end; }
  html body #site .content-header .content-header-inner > .flex-inner { width: 100%; height: auto; margin-top: 0; }
  html body #site .content-header .page-title-wrap { margin-bottom: 0; padding-bottom: 0; }
}

/* ---------- Clients page logos: 2 per row on phones; 4 per row and 40% larger on tablets. Last row centred (2026-11-06) ---------- */
@media (max-width: 1024px) {
  html body.page-id-1606 #site #brdr_id { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
  html body.page-id-1606 #site #brdr_id::before, html body.page-id-1606 #site #brdr_id::after { display: none; }
  html body.page-id-1606 #site #brdr_id > .vc_row, html body.page-id-1606 #site #brdr_id > .vc_row > .row-inner { display: contents; }
  html body.page-id-1606 #site #brdr_id .row-inner > .wpb_column { display: block !important; float: none; flex: 0 0 25% !important; width: 25% !important; max-width: 25% !important; min-width: 0; margin: 0 !important; padding: 0 !important; box-sizing: border-box; }
  html body.page-id-1606 #site #brdr_id .row-inner > .wpb_column:not(:has(img)) { display: none !important; }
  html body.page-id-1606 #site #brdr_id .vc_column-inner { padding: 8px !important; }
  html body.page-id-1606 #site #brdr_id .wpb_single_image { margin: 0 !important; }
  html body.page-id-1606 #site #brdr_id .vc_figure, html body.page-id-1606 #site #brdr_id .vc_single_image-wrapper { display: block; width: 100%; text-align: center; }
  html body.page-id-1606 #site #brdr_id .vc_single_image-img { display: block; width: calc(23.33vw - 56px) !important; max-width: 100%; height: auto !important; margin: 0 auto; }
}
@media (max-width: 767px) {
  html body.page-id-1606 #site #brdr_id .row-inner > .wpb_column { flex-basis: 50% !important; width: 50% !important; max-width: 50% !important; }
  html body.page-id-1606 #site #brdr_id .vc_single_image-img { width: 100% !important; max-width: 220px; }
}

/* ---------- Service pages, tablet only: a leftover last item fills the row instead of sitting on the left (2026-11-06) ---------- */
@media (min-width: 768px) and (max-width: 1040px) {
  html body #site .ems-svc__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Clients page, phones only: label on the left, larger building on the right, smaller numbers (2026-11-06) ---------- */
@media (max-width: 767px) {
  html body.page-id-1606 #site .vc_row.bg-custom5 { --ems-bld: min(70vw, 320px); background-size: var(--ems-bld) auto !important; background-position: right calc(20px - 0.1346 * var(--ems-bld)) bottom !important; margin-bottom: 24px !important; }
  html body.page-id-1606 #site .vc_row.bg-custom5 .iconlist { margin-bottom: calc(var(--ems-bld) * .64 - 40px) !important; }
  html body.page-id-1606 #site .vc_separator h4 { flex: 0 0 auto; text-align: left !important; white-space: nowrap; margin-left: 0 !important; padding-left: 0 !important; }
  html body.page-id-1606 #site .counter { align-items: center; }
  html body.page-id-1606 #site .counter .counter-content { flex: 0 0 124px !important; font-size: 40px !important; line-height: 1.1 !important; }
  html body.page-id-1606 #site .counter .counter-value { font-size: 40px !important; line-height: 1.1 !important; }
  html body.page-id-1606 #site .counter .counter-suffix { font-size: 24px !important; }
  html body.page-id-1606 #site .counter .counter-title { text-align: left; }
}

/* Phone and tablet menu: current page (and its parent item) in red. Sustainability stays green. */
html body #off-canvas-right li.current-menu-item:not(.sustainability-menu) > a,
html body #off-canvas-right li.current_page_item:not(.sustainability-menu) > a,
html body #off-canvas-right li.current-menu-ancestor:not(.sustainability-menu) > a,
html body #off-canvas-right li.current-menu-parent:not(.sustainability-menu) > a { color: #ff5a60 !important; opacity: 1 !important; }

/* ---------- Policies page, phones only: text no longer touches the View button (2026-11-06) ---------- */
@media (max-width: 767px) {
  html body.page-id-3639 #site .policy-card { gap: 16px; }
  html body.page-id-3639 #site .policy-btn { flex: 0 0 auto; }
}
@media (max-width: 479px) {
  html body.page-id-3639 #site .policy-card { flex-direction: column; align-items: flex-start; }
}

/* ---------- Sustainability page: space between the banner and the first section, same as other pages (2026-11-06) ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
  html body.page-id-2792 #site #content-body .content-body-inner.wrap { padding-top: 48px !important; }
}
@media (max-width: 767px) {
  html body.page-id-2792 #site #content-body .content-body-inner.wrap { padding-top: 32px !important; }
}

/* ================================================================
   TABLET & MOBILE FIXES (2026-11-06) — 5 items requested by user
   ================================================================ */

/* ---------- Fix 1: Featured Projects — reduce top gap on tablet & mobile ---------- */
@media (max-width: 1040px) {
  /* Hide the 95px spacer that sits just before the Featured Projects section */
  html body.home #site .vc_section.vc_custom_1712647137248 { padding-top: 24px !important; }
  /* Also suppress the 40px empty-space div inside the section */
  html body.home #site .vc_custom_1712647137248 .vc_empty_space[style*='height: 40px'] { height: 8px !important; overflow: hidden !important; }
  /* Carousel images: show whole image without cropping (like the reference screenshot) */
  html body.home #site .project-carousel .project-thumbnail img { aspect-ratio: 3 / 2 !important; object-fit: cover !important; }
}
@media (max-width: 767px) {
  html body.home #site .vc_section.vc_custom_1712647137248 { padding-top: 16px !important; }
}

/* ---------- Fix 2: Our Commitments icons — a little smaller on mobile ---------- */
@media (max-width: 767px) {
  html body.home #site .vc_custom_1712646890980 .iconlist li > .iconlist-item-icon {
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
  }
  html body.home #site .vc_custom_1712646890980 .iconlist-item-icon svg {
    width: 30px !important;
    height: 30px !important;
  }
  html body.home #site .vc_custom_1712646890980 .iconlist-item-icon img {
    width: 30px !important;
    height: 30px !important;
  }
}

/* ---------- Fix 3: About Us team image — exact same width as navbar on tablet ---------- */
@media (min-width: 768px) and (max-width: 1040px) {
  html body.page-id-142 #site .vc_custom_1750135978636 .wpb_single_image {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body.page-id-142 #site .vc_custom_1750135978636 .vc_figure,
  html body.page-id-142 #site .vc_custom_1750135978636 .vc_single_image-wrapper,
  html body.page-id-142 #site .vc_custom_1750135978636 .vc_single_image-img {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
}

/* ---------- Fix 4: Clients counters — medium font, proper align, no text cut-off on tablet ---------- */
@media (min-width: 768px) and (max-width: 1040px) {
  html body.page-id-1606 #site .counter {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  html body.page-id-1606 #site .counter .counter-content {
    flex: 0 0 auto !important;
    font-size: 44px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  html body.page-id-1606 #site .counter .counter-value {
    font-size: 44px !important;
    line-height: 1 !important;
  }
  html body.page-id-1606 #site .counter .counter-suffix {
    font-size: 26px !important;
  }
  html body.page-id-1606 #site .counter .counter-title {
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    min-width: 0 !important;
  }
}

/* ---------- Fix 5: Single project — remove gap between image and details box on tablet ---------- */
@media (min-width: 768px) and (max-width: 1040px) {
  html body.single-nproject #site .main-content .project-inner {
    gap: 0 !important;
  }
  html body.single-nproject #site .main-content .project-thumbnail {
    margin-bottom: 0 !important;
  }
  html body.single-nproject #site .main-content .project-detail:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
  }
  html body.single-nproject #site .main-content .project-detail {
    margin-bottom: 0 !important;
  }
}

/* ================================================================
   ADDITIONAL FIXES (2026-11-06b)
   ================================================================ */

/* ---------- Fix A: Featured Projects — collapse the 95px spacer (end of  What We Do grey section) ---------- */
@media (max-width: 1040px) {
  /* The 95px spacer at the very end of the grey services carousel section */
  html body.home #site .vc_custom_1712646934392 .vc_empty_space { height: 16px !important; overflow: hidden !important; }
  /* Remove the extra 40px empty space that sits just above the carousel inside Featured Projects */
  html body.home #site .vc_custom_1712647137248 .vc_empty_space[style*='height: 40px'] { display: none !important; }
  /* Reduce padding-top of Featured Projects section itself */
  html body.home #site .vc_section.vc_custom_1712647137248 { padding-top: 20px !important; margin-top: 0 !important; }
}
@media (max-width: 767px) {
  html body.home #site .vc_section.vc_custom_1712647137248 { padding-top: 12px !important; }
}

/* ---------- Fix B: Our Commitment (Sustainability) — less gap above in mobile ---------- */
@media (max-width: 767px) {
  html body.page-id-2792 #site .sustainability-page .main-content-bg.py-5 { padding-top: 1.25rem !important; }
  html body.page-id-2792 #site .sustainability-page .section-space { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
  html body.page-id-2792 #site .sustainability-page .section-space:first-child { padding-top: 0.75rem !important; }
}

/* ================================================================
   Fix C: Featured Projects carousel images — JS-proof aspect ratio
   OWL autoHeight overrides aspect-ratio on <img>; padding-bottom
   trick on the <figure> survives JS reinitialization. (2026-11-06c)
   ================================================================ */
@media (max-width: 1040px) {
  /* Establish a fixed aspect-ratio box on the figure itself
     so OWL measures this padded height, not the natural img size */
  html body.home #site .project-carousel .project-thumbnail {
    position: relative !important;
    height: 0 !important;
    padding-bottom: 66.67% !important; /* 3:2 ratio */
    overflow: hidden !important;
    margin: 0 !important;
  }
  /* Absolutely fill the aspect-ratio box with the image */
  html body.home #site .project-carousel .project-thumbnail img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    aspect-ratio: unset !important; /* remove old rule */
  }
}

/* ---------- Featured Projects, phone and tablet: smaller gap above the heading and between the heading and the photos (2026-11-06d) ---------- */
@media (max-width: 1040px) {
  html body.home #site .vc_section.vc_custom_1712647137248 { padding-top: 12px !important; }
  html body.home #site .vc_custom_1712647137248 > .vc_row:first-child { margin-bottom: 0 !important; }
  html body.home #site .vc_custom_1712647137248 > .vc_row:first-child .vc_empty_space { height: 24px !important; }
}
@media (max-width: 767px) {
  html body.home #site .vc_section.vc_custom_1712647137248 { padding-top: 8px !important; }
  html body.home #site .vc_custom_1712647137248 > .vc_row:first-child .vc_empty_space { height: 18px !important; }
}

/* ---------- Sustainability, phone and tablet: smaller gap between the hero image and "Our Commitment" (2026-11-06d) ---------- */
@media (max-width: 1040px) {
  html body.page-id-2792 #site .sustainability-page .hero-section { margin-bottom: 24px !important; }
  html body.page-id-2792 #site .sustainability-page .main-content-bg.py-5 { padding-top: 0 !important; }
  html body.page-id-2792 #site .sustainability-page .main-content-bg > .section-space:first-child { padding-top: 0 !important; }
  html body.page-id-2792 #site .sustainability-page .main-content-bg > .section-space:first-child .section-title h2 { margin-top: 16px !important; }
}
@media (max-width: 767px) {
  html body.page-id-2792 #site .sustainability-page .hero-section { margin-bottom: 16px !important; }
  html body.page-id-2792 #site .sustainability-page .main-content-bg > .section-space:first-child .section-title h2 { margin-top: 12px !important; }
}