/* ============================================================
   Site-wide alignment (2026-11-05). Desktop and laptop only (1041px+).
   Content on every page has the same gap on both sides: the distance from
   the screen edge to where the company name starts in the logo.
   gap = navbar side padding + 2.1985 x logo height.
   If the logo size rules in custom.css change, update --ems-logo-h here.
   Accreditations stays edge to edge. Remove this file's <link> in
   includes/header.php to go back.
=============================================================*/
@media (min-width: 1041px) {
  :root { --ems-logo-h: 69px; --ems-nav-pad: 24px; --ems-edge: calc(var(--ems-nav-pad) + 2.1985 * var(--ems-logo-h)); }

  /* Inner pages: page title and content */
  html body #site .content-header .content-header-inner.wrap,
  html body #site #content-body .content-body-inner.wrap {
    width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
    padding-left: var(--ems-edge) !important; padding-right: var(--ems-edge) !important; box-sizing: border-box !important;
  }

  /* Pages whose sections run edge to edge: keep the backgrounds full width, inset only the content */
  html body.home #site #content-body .content-body-inner.wrap,
  html body.page-id-776 #site #content-body .content-body-inner.wrap,
  html body.page-id-486 #site #content-body .content-body-inner.wrap { padding-left: 0 !important; padding-right: 0 !important; }
  html body.home #site .content > .vc_row:not(#Accreditations) > .row-inner,
  html body.home #site .content > .vc_section > .vc_row:not(#Accreditations) > .row-inner,
  html body.page-id-776 #site .content > .vc_row > .row-inner,
  html body.page-id-776 #site .content > .vc_section > .vc_row > .row-inner,
  html body.page-id-486 #site .content > .vc_row > .row-inner,
  html body.page-id-486 #site .content > .vc_section > .vc_row > .row-inner {
    width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
    padding-left: calc(var(--ems-edge) - 15px) !important; padding-right: calc(var(--ems-edge) - 15px) !important; box-sizing: border-box !important;
  }

  /* Home hero: video frame at the same edges */
  html body.home #site .content > .vc_section.vc_custom_1665745970762 > .vc_row > .row-inner { padding-left: 0 !important; padding-right: 0 !important; }
  html body.home #site .ems-hero-wrap { width: auto; max-width: none; margin-left: var(--ems-edge); margin-right: var(--ems-edge); }

  /* Footer */
  html body .ems-footer .wrap { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: var(--ems-edge) !important; padding-right: var(--ems-edge) !important; box-sizing: border-box !important; }
}
@media (min-width: 1621px) { :root { --ems-nav-pad: 40px; } }
@media (min-width: 1216px) and (max-width: 1560px) { :root { --ems-logo-h: clamp(50px, calc((100vw - 885px) / 7.58), 62px); } }
@media (min-width: 1101px) and (max-width: 1215px) { :root { --ems-logo-h: clamp(50px, calc((100vw - 739px) / 7.58), 62px); } }
@media (min-width: 1041px) and (max-width: 1100px) { :root { --ems-logo-h: clamp(50px, calc((100vw - 672px) / 7.58), 62px); --ems-nav-pad: 16px; } }

@media (min-width: 1041px) {
  /* Hero row must not take the content inset as well (the video frame already sits at the edge) */
  html body.home #site #content-body .content > .vc_section.vc_custom_1665745970762 > .vc_row > .row-inner { padding-left: 0 !important; padding-right: 0 !important; }
  /* Featured Projects: no part of the next card beyond the right edge */
  html body.home #site .project-carousel .owl-wrapper-outer { clip-path: inset(-40px 15px -80px 15px); }
}
/* Projects page with the narrower content width */
@media (min-width: 1280px) and (max-width: 1400px) { html body.page-id-1073 #site .projects-masonry .project-thumbnail img { aspect-ratio: 2 / 3; } html body.page-id-1073 #site .projects-masonry .project:nth-last-child(2):nth-child(3n+1) .project-thumbnail img, html body.page-id-1073 #site .projects-masonry .project:last-child:nth-child(3n+2) .project-thumbnail img { aspect-ratio: 3 / 2; } }
@media (min-width: 1041px) and (max-width: 1279px) {
  html body.page-id-1073 #site .projects-masonry .projects-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.page-id-1073 #site .projects-shortcode.projects-masonry .projects-items .project,
  html body.page-id-1073 #site .projects-shortcode.projects-masonry .projects-items .project:nth-last-child(2):nth-child(3n+1),
  html body.page-id-1073 #site .projects-shortcode.projects-masonry .projects-items .project:last-child:nth-child(3n+2) { grid-column: auto; }
  html body.page-id-1073 #site .projects-masonry .project-thumbnail img,
  html body.page-id-1073 #site .projects-masonry .project:nth-last-child(2):nth-child(3n+1) .project-thumbnail img,
  html body.page-id-1073 #site .projects-masonry .project:last-child:nth-child(3n+2) .project-thumbnail img { position: static; height: auto !important; aspect-ratio: 4 / 5 !important; }
}

/* Navbar lines up with the sections on both sides: logo at the left edge, Contact us at the right edge.
   Menu spacing is compact so it fits. Where the screen is too narrow for both, the logo edge comes first,
   and the right gap takes what is left (never under 24px). --ems-menu = menu width + 17px scrollbar allowance. */
@media (min-width: 1216px) {
  :root { --ems-menu: 838px; --ems-logo-w: calc(7.208 * var(--ems-logo-h)); }
  html body #site #site-header .header-content { gap: 16px !important; }
  html body #site #site-header .navigator > .menu { gap: 0 !important; }
  html body #site #site-header .navigator > .menu > li { margin-left: 0 !important; margin-right: 0 !important; }
  html body #site #site-header .navigator > .menu > li > a { padding-left: 9px !important; padding-right: 9px !important; }
  html body #site #site-header .navigator > .menu > li.menu-item-has-children > a { padding-right: 25px !important; }
  html body #site #site-header .navigator > .menu > li.ems-phone > a { padding-left: 14px !important; padding-right: 0 !important; margin-left: 8px !important; }
  html body #site #site-header .navigator > .menu > li.menu-item-1243 { margin-left: 12px !important; }
  html body #site #site-header .navigator > .menu > li.menu-item-1243 > a { padding: 0 16px !important; }
  html body #site #site-header .header-brand { margin-left: clamp(0px, calc(100vw - var(--ems-nav-pad) - 24px - var(--ems-logo-w) - 16px - var(--ems-menu)), calc(2.1048 * var(--ems-logo-h))) !important; }
  html body #site #site-header .site-header-inner { padding-right: clamp(24px, calc(100vw - var(--ems-edge) - var(--ems-logo-w) - 16px - var(--ems-menu)), var(--ems-edge)) !important; }
}
@media (min-width: 1216px) {
  /* Hover and current-page underline follows the tighter menu spacing */
  html body #site #site-header .navigator > .menu > li:not(.ems-phone):not(.menu-item-1243):not(.menu-item-has-children) > a { background-position: left 9px bottom 4px !important; }
  html body #site #site-header .navigator > .menu > li:not(.ems-phone):not(.menu-item-1243):not(.menu-item-has-children) > a:hover,
  html body #site #site-header .navigator > .menu > li.current-menu-item:not(.ems-phone):not(.menu-item-1243):not(.menu-item-has-children) > a,
  html body #site #site-header .navigator > .menu > li.current_page_item:not(.ems-phone):not(.menu-item-1243):not(.menu-item-has-children) > a { background-size: calc(100% - 18px) 2px !important; }
  html body #site #site-header .navigator > .menu > li.menu-item-has-children > a { background-position: left 9px bottom 4px, right 7px center !important; }
  html body #site #site-header .navigator > .menu > li.menu-item-has-children:hover > a,
  html body #site #site-header .navigator > .menu > li.menu-item-has-children:focus-within > a,
  html body #site #site-header .navigator > .menu > li.menu-item-has-children.current-menu-item > a,
  html body #site #site-header .navigator > .menu > li.menu-item-has-children.current-menu-ancestor > a { background-size: calc(100% - 34px) 2px, 16px 16px !important; }
}
/* Smallest laptops that still show the phone number: tighter again so Contact us stays on screen */
@media (min-width: 1216px) and (max-width: 1250px) {
  html body #site #site-header .navigator > .menu > li > a { padding-left: 6px !important; padding-right: 6px !important; }
  html body #site #site-header .navigator > .menu > li.menu-item-has-children > a { padding-right: 22px !important; }
  html body #site #site-header .navigator > .menu > li:not(.ems-phone):not(.menu-item-1243):not(.menu-item-has-children) > a { background-position: left 6px bottom 4px !important; }
  html body #site #site-header .navigator > .menu > li.menu-item-has-children > a { background-position: left 6px bottom 4px, right 4px center !important; }
  html body #site #site-header .navigator > .menu > li.ems-phone > a { padding-left: 12px !important; padding-right: 0 !important; margin-left: 6px !important; }
  html body #site #site-header .navigator > .menu > li.menu-item-1243 > a { padding: 0 14px !important; }
}

/* ---------- Same edge for logo, sections, video, footer and Contact us at every width (any browser zoom) ----------
   The gap is the start of the company name, reduced only as far as needed for the navbar to fit between the two edges. */
@media (min-width: 1041px) {
  :root {
    --ems-ink: calc(0.0937 * var(--ems-logo-h));
    --ems-logo-w: calc(7.208 * var(--ems-logo-h));
    --ems-menu: 838px;
    --ems-edge: clamp(calc(var(--ems-nav-pad) + var(--ems-ink)), calc((100vw - var(--ems-logo-w) - 16px - var(--ems-menu) + var(--ems-ink)) / 2), calc(var(--ems-nav-pad) + 2.1985 * var(--ems-logo-h)));
  }
  html body #site #site-header .header-brand { margin-left: max(0px, calc(var(--ems-edge) - var(--ems-ink) - var(--ems-nav-pad))) !important; }
  html body #site #site-header .site-header-inner { padding-right: var(--ems-edge) !important; }
  html body #site #site-header .header-content { gap: 16px !important; }
}
@media (min-width: 1041px) and (max-width: 1215px) { :root { --ems-menu: 700px; } }

/* Tablets and phones: content lines up with the logo */
@media (max-width: 1040px) {
  :root { --ems-edge: 45px; }
  html body #site .content-header .content-header-inner.wrap,
  html body #site #content-body .content-body-inner.wrap { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: var(--ems-edge) !important; padding-right: var(--ems-edge) !important; box-sizing: border-box !important; }
  html body.home #site #content-body .content-body-inner.wrap,
  html body.page-id-776 #site #content-body .content-body-inner.wrap,
  html body.page-id-486 #site #content-body .content-body-inner.wrap { padding-left: 0 !important; padding-right: 0 !important; }
  html body.home #site .content > .vc_row:not(#Accreditations) > .row-inner,
  html body.home #site .content > .vc_section > .vc_row:not(#Accreditations) > .row-inner,
  html body.page-id-776 #site .content > .vc_row > .row-inner,
  html body.page-id-776 #site .content > .vc_section > .vc_row > .row-inner,
  html body.page-id-486 #site .content > .vc_row > .row-inner,
  html body.page-id-486 #site .content > .vc_section > .vc_row > .row-inner { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: calc(var(--ems-edge) - 15px) !important; padding-right: calc(var(--ems-edge) - 15px) !important; box-sizing: border-box !important; }
  html body.home #site #content-body .content > .vc_section.vc_custom_1665745970762 > .vc_row > .row-inner { padding-left: 0 !important; padding-right: 0 !important; }
  html body.home #site .ems-hero-wrap { width: auto; max-width: none; margin-left: var(--ems-edge); margin-right: var(--ems-edge); }
  html body .ems-footer .wrap { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: var(--ems-edge) !important; padding-right: var(--ems-edge) !important; box-sizing: border-box !important; }
}
@media (max-width: 767px) { :root { --ems-edge: 24px; } }

/* Tablets and phones: remove older side padding so these pages sit on the same edge */
@media (max-width: 1040px) {
  html body.page-id-144 #site .vc_custom_1713963201961 { padding-left: 0 !important; padding-right: 0 !important; }
  html body.page-id-2792 #site .sustainability-page .main-content-bg { padding-left: 0 !important; padding-right: 0 !important; }
  html body.page-id-1734 #site .content .vc_section,
  html body.page-id-1734 #site .content .vc_row,
  html body.page-id-1734 #site .content .row-inner,
  html body.page-id-1734 #site .content .wpb_column,
  html body.page-id-1734 #site .content .vc_column-inner { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
}

/* Core Values, tablets: the list stays inside the page edges */
@media (min-width: 768px) and (max-width: 1040px) {
  html body.page-id-486 #site .iconlist.iconlist-icon-large { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  html body.page-id-486 #site .iconlist.iconlist-icon-large > li { padding-left: 0 !important; padding-right: 24px !important; box-sizing: border-box; min-width: 0; }
  html body.page-id-486 #site .iconlist.iconlist-icon-large > li:nth-child(even) { padding-right: 0 !important; padding-left: 24px !important; }
}