/*==========================================================
  style.css  -  HOMEPAGE ONLY
  Navigation + footer adjustments for the new home page, plus the
  small pieces the new page still needs. layout.css (shared with the
  old-design pages) is NOT edited: everything is overridden from here.
  Section map:
    0. Variables + misc      4. Mobile header + menu
    1. Theme toggle          5. Search popup
    2. Spacing               footer colours
    3. Desktop header        6. Header height, scroll states, logo, country selector
==========================================================*/

/*==========================================================
  0. VARIABLES + MISC
  (all other theme tokens live in reset.css)
==========================================================*/
:root {
  --hdr-bg: var(--ink-2, #11161f);
  --hdr-shadow: rgba(0,0,0,0.55);
  --hdr-h: 76px;                         /* header height: desktop (was 100px) */
}
[data-theme="light"] { --hdr-shadow: rgba(12,16,24,0.18); }
@media (max-width: 1200px) {
  :root { --hdr-h: 56px; }               /* header height: mobile + tablet bar */
}

/*==========================================================
  0b. TYPOGRAPHY  (Kanit is the only font: no Archivo, no Fraunces)
  reset.css still names the old fonts in --font-sans / --font-serif; they are overridden here.
==========================================================*/
:root {
  --font-heading: "Kanit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans: var(--font-heading);
  --font-serif: var(--font-heading);
}

.vt1-display, .vt1-hero h1, .vt1-position__title, .vt1-dompanel__title, .vt1-lead__title,
.vt1-quote p, .vt1-stat__num, .vt1-ccard__metric, .vt1-why__k, .vt1-why-client__proof,
.vt1-logos__row .vt1-logo, .vt1-dom__num, .vt1-flow__copy .vt1-n, .vt1-quote__mark,
.vt1-lead__meta div b { font-family: var(--font-heading); }

.vt1-display        { font-weight: 500; font-size: clamp(2.3rem, 4.9vw, 3.9rem); line-height: 1.12; letter-spacing: -0.015em; }
.vt1-hero h1        { font-weight: 500; font-size: clamp(2.4rem, 4.3vw, 3.85rem); line-height: 1.12; letter-spacing: -0.02em; max-width: 22ch; }
.vt1-hero h1 .vt1-rot { font-weight: 500; font-style: italic; }
.vt1-position__title { font-weight: 500; font-size: clamp(1.85rem, 3.1vw, 2.75rem); line-height: 1.15; letter-spacing: -0.01em; }
.vt1-dompanel__title { font-weight: 500; font-size: clamp(1.65rem, 2.8vw, 2.4rem); line-height: 1.15; letter-spacing: -0.01em; }
.vt1-lead__title    { font-weight: 500; font-size: clamp(2.1rem, 3.6vw, 3.1rem); line-height: 1.12; letter-spacing: -0.015em; }
.vt1-stat__num      { font-weight: 400; font-size: clamp(2.3rem, 4.1vw, 3.3rem); line-height: 1.1; letter-spacing: -0.01em; }
.vt1-ccard__metric  { font-weight: 400; font-size: 1.4rem; line-height: 1.15; }
.vt1-why__k         { font-weight: 500; font-size: 2.5rem; }
.vt1-why-client__proof { font-weight: 500; font-size: clamp(1.5rem, 2.1vw, 2.1rem); line-height: 1.15; }
.vt1-quote p        { font-weight: 300; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.5; }
.vt1-quote__mark    { font-weight: 400; }
.vt1-logos__row .vt1-logo { font-size: 1.3rem; font-weight: 300; }
.vt1-dom__num, .vt1-flow__copy .vt1-n { font-size: 0.95rem; }
.vt1-lead__meta div b { font-size: 1.6rem; font-weight: 400; }

@media (min-width: 1025px) and (max-width: 1440px) {
  .vt1-hero h1 { font-size: clamp(2.2rem, 3.7vw, 3.3rem); }
}
/* laptops (up to 1600px wide): slightly smaller section headings */
@media (min-width: 1025px) and (max-width: 1600px) {
  .vt1-display         { font-size: clamp(2.1rem, 3.9vw, 3.3rem); }
  .vt1-lead__title     { font-size: clamp(1.95rem, 3.2vw, 2.7rem); }
  .vt1-dompanel__title { font-size: clamp(1.55rem, 2.5vw, 2.1rem); }
  .vt1-position__title { font-size: clamp(1.7rem, 2.7vw, 2.3rem); }
}
@media (max-width: 767px) {
  .vt1-hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
}

/* headings follow the theme text colour (Bootstrap / custom.css set their own) */
h1, h2, h3, h4 { color: var(--paper); }

/* animated arcs in the stats banner SVG */
.wm-arc { stroke: var(--orange); stroke-width: 1.4; fill: none; opacity: 0.32; stroke-dasharray: 5 7; animation: stdash 4s linear infinite; }


/*==========================================================
  1. THEME TOGGLE BUTTON
==========================================================*/
html body .vt-theme-toggle-wrap {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}
html body .vt-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-2, rgba(255,255,255,0.14));
  background: transparent;
  color: var(--paper-dim, #b9c1cd);
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
html body .vt-theme-toggle:hover,
html body .vt-theme-toggle:focus-visible {
  color: var(--paper, #f4f5f7);
  border-color: var(--paper-dim, #b9c1cd);
  background: rgba(127,127,127,0.10);
  outline: none;
}
html body .vt-theme-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.5s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
html body .vt-theme-toggle:hover svg { transform: rotate(35deg); }
/* dark theme shows the sun (click = go light), light theme shows the moon */
html body .vt-theme-toggle .moon { display: none; }
html[data-theme="light"] body .vt-theme-toggle .sun { display: none; }
html[data-theme="light"] body .vt-theme-toggle .moon { display: block; }

/* logo swap (theme css already provides .logo-dark / .logo-light).
   Use both <img> tags only if you have a logo for each theme. */
html body .hdr .logo-dark,
html body .headermobmenu-mobile .logo-dark { display: block; }
html body .hdr .logo-light,
html body .headermobmenu-mobile .logo-light { display: none; }
html[data-theme="light"] body .hdr .logo-dark,
html[data-theme="light"] body .headermobmenu-mobile .logo-dark { display: none; }
html[data-theme="light"] body .hdr .logo-light,
html[data-theme="light"] body .headermobmenu-mobile .logo-light { display: block; }

/* mobile bar: smaller toggle that sits between search and language */
html body .headermobmenu-mobile .vt-theme-toggle-wrap { margin: 0 0.35rem 0 0.5rem; }
html body .headermobmenu-mobile .vt-theme-toggle { width: 32px; height: 32px; }
html body .headermobmenu-mobile .vt-theme-toggle svg { width: 16px; height: 16px; }


/*==========================================================
  2. SPACING ADJUSTMENTS (make room for the toggle)
==========================================================*/
/* tighten search-button side margins (Bootstrap .mx-4 = 1.5rem !important) */
html body .m2e-nav .mx-4 {
  margin-left: 1rem !important;
  margin-right: 0.75rem !important;
}
/* slightly tighter top-level menu padding on mid-size desktops */
/* @media (min-width: 1201px) and (max-width: 1440px) {
  html body .hdr .mmenu > li > a {
    padding-left: 14px;
    padding-right: 14px;
  }
} */


/*==========================================================
  3. DESKTOP HEADER
==========================================================*/
/* IMPORTANT: no backdrop-filter on .hdr.
   The mega menu / language dropdown live INSIDE .hdr. A parent that has
   backdrop-filter becomes the "backdrop root", and then the child's own
   backdrop-filter has nothing to blur (looks like "blur not working").
   So the bar is a solid theme color, like the original solid #000. */
html body .hdr,
html body.has-sticky .m2e-transparent .hdr,
html.has-sticky body .m2e-transparent .hdr,
html body .has-sticky .m2e-transparent .hdr {
  background-color: var(--hdr-bg);
  box-shadow:
    0 1px 0 var(--line-2, rgba(255,255,255,0.14)),
    0 10px 30px -14px var(--hdr-shadow);
}
html body .m2e-content { color: var(--paper, #f4f5f7); }

/* top-level links */
html body .hdr .mmenu > li > a {
  color: var(--paper-dim, #b9c1cd);
  border-bottom-color: transparent;
}

html body .hdr .mmenu > li.menu-extral > a{
  padding-right: 20px;
}
html body .hdr .mmenu > li:hover { color: var(--paper, #f4f5f7); border-bottom-color: var(--orange, #f58220); }
html body .hdr .mmenu > li:hover > a { color: var(--paper, #f4f5f7); }
html body .hdr .menu-extral::after { color: var(--paper-dim); }
html body .hdr .menu-extral:hover::after { color: var(--paper, #f4f5f7); }

/* mega / drop-down panel */
html body .hdr .mmenu-submenu,
html body .hdr .mmenu-submenu .submenu-list ul {
  background-color: var(--ink-2, #11161f);
}
/* custom.css sets this background with !important, so !important is needed here too */
html body .hdr .mmenu li.hovered .mmenu-submenu {
  background: var(--glass-bg, rgba(17,22,31,0.9)) !important;                          /* fallback */
  background: color-mix(in srgb, var(--ink-2, #11161f) 50%, transparent) !important;    /* 70% like the original, but theme colored */
  -webkit-backdrop-filter: blur(30px) !important;
  backdrop-filter: blur(30px) !important;
  box-shadow:
    inset 0 -1px 0 var(--line-2, rgba(255,255,255,0.14)),
    0 28px 50px -24px var(--hdr-shadow);
}

html body .hdr .submenu-title { color: var(--paper, #f4f5f7); }
html body .hdr .submenu-title a { color: var(--paper-dim, #b9c1cd); }
html body .hdr .submenu-title a:hover { color: var(--orange, #f58220); }
/* Thought Leadership headings: custom.css forces #fff !important */
html body .hdr .menu-h3-custom,
html body .hdr .submenu-title a.menu-h3-custom { color: var(--paper, #f4f5f7) !important; }
html body .hdr .submenu-title a.menu-h3-custom:hover { color: var(--orange, #f58220) !important; }

html body .hdr .submenu-list a,
html body .hdr .mmenu-item--mega .mmenu-submenu .submenu-list > li > a {
  color: var(--paper-dim, #b9c1cd);
}
html body .hdr .submenu-list a:hover,
html body .hdr .submenu-list a.active,
html body .hdr .mmenu-item--mega .mmenu-submenu .submenu-list > li > a:hover {
  color: var(--orange, #f58220);
  background-color: transparent;
}
html body .hdr .submenu-list li.active > a,
html body .hdr .submenu-list li.hovered > a {
  color: var(--orange, #f58220);
  background-color: transparent;
}
html body .hdr .mmenu-item--mega .mmenu-submenu-2 a { color: var(--paper-dim, #b9c1cd); }
html body .hdr .mmenu-item--mega .mmenu-submenu-2 a:hover { color: var(--orange, #f58220); }

/* left vertical tabs (What We Do / Insights) */
html body .hdr .vertical-tabs ul { background: var(--ink-3, #171d28); }
html body .hdr .vertical-tabs a { color: var(--paper-dim, #b9c1cd); }
html body .hdr .vertical-tabs a:hover { color: var(--paper, #f4f5f7); }
html body .hdr .vertical-tabs a.active {
  color: var(--orange, #f58220) !important;
  background: var(--orange-soft, rgba(245,130,32,0.12)) !important;
}

/* Insights overview (Bootstrap .text-white is fixed white) */
html body .hdr .mmenu-submenu .text-white,
html body .hdr .mmenu-submenu h2.text-white { color: var(--paper, #f4f5f7) !important; }
html body .hdr .mmenu-submenu p.text-white,
html body .hdr .mmenu-submenu a.text-white { color: var(--paper-dim, #b9c1cd) !important; }
html body .hdr .mmenu-submenu a.text-white:hover { color: var(--orange, #f58220) !important; }

/* buttons inside the menu */
.menuBtn-more {
  color: var(--paper-dim, #b9c1cd);
  border-color: var(--line-2, rgba(255,255,255,0.14));
}
html body .hdr .menuBtn-more {
  margin-top: 10px;
}

html body .hdr .menuBtn-more:hover {
  color: var(--on-orange, #1a1204);
  background: var(--orange, #f58220);
  border-color: var(--orange, #f58220);
}
html body .hdr .explore-more-link { color: var(--orange, #f58220) !important; }

/* search button: mobile icon colour (the desktop "Search" pill is styled in section 6.1) */
html body .headermobmenu-mobile .search-btn { color: var(--orange, #f58220) !important; }

/* language selector (desktop custom select)
   custom.css makes it borderless + transparent, so only the colors change here */
html body .lang-selector-wrapper .select,
html body .lang-selector-wrapper .styledSelect {
  background: transparent;
  background-color: transparent;
}
html body .lang-selector-wrapper .styledSelect { color: var(--paper, #f4f5f7); }
html body .lang-selector-wrapper .styledSelect::after {
  border-bottom-color: var(--paper, #f4f5f7);
  border-right-color: var(--paper, #f4f5f7);
}
html body .lang-selector-wrapper .options {
  background-color: var(--glass-bg, rgba(17,22,31,0.9));                                /* fallback */
  background-color: color-mix(in srgb, var(--ink-2, #11161f) 70%, transparent);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
   box-shadow:
    inset 0 0 0 1px var(--line-2, rgba(255,255,255,0.14)),
    0 20px 40px -20px var(--hdr-shadow);
}
html body .lang-selector-wrapper .options li {
  color: var(--paper-dim, #b9c1cd);
  background: transparent;
}
html body .lang-selector-wrapper .options li:hover {
  color: var(--orange, #f58220);
  background: transparent;
}
html body .lang-selector-wrapper .options::-webkit-scrollbar-thumb {
  background: var(--paper-dimmer, #86909e);
}


/*==========================================================
  4. MOBILE HEADER + MOBILE MENU
==========================================================*/
/* No backdrop-filter on the mobile bar either: the side menu panel is INSIDE it. */
html body .headermobmenu-mobile {
  background-color: var(--hdr-bg);
  box-shadow:
    0 1px 0 var(--line-2, rgba(255,255,255,0.14)),
    0 10px 30px -14px var(--hdr-shadow);
}

html body .mobile-nav-activator .nav-icon,
html body .mobile-nav-activator .btn-close-lg { fill: var(--paper, #f4f5f7); }
/* close (X) icon is a white image: invert it on the light theme */
html[data-theme="light"] body .mobile-nav-activator .btn-close-lg { filter: invert(1); }

/* Mobile side menu panel.
   custom/layout set  rgb(0 0 0 / 70%)  +  border-top #595959  on this panel.
   Theme-aware version: dark theme = dark glass, light theme = light glass,
   and all text inside (rules below) switches with it.
   NOTE: ".mobile-menu-opened" is a class on <body> itself, so the generated
   selectors also cover "html body.mobile-menu-opened ..." (see header note). */
html body.mobile-menu-opened .headermobmenu-mobile__navigation,
html.mobile-menu-opened body .headermobmenu-mobile__navigation,
html body .mobile-menu-opened .headermobmenu-mobile__navigation {
  background-color: var(--overlay-bg, rgba(12,16,24,0.85));                             /* fallback */
  background-color: color-mix(in srgb, var(--ink, #0c1018) 70%, transparent);           /* 70% like the original rgb(0 0 0 / 70%) */
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top-color: var(--line-2, rgba(255,255,255,0.14));
}
html body .headermobmenu-mobile__navigation .navigation__link { color: var(--paper, #f4f5f7); }
html body .headermobmenu-mobile__navigation .js-nav-left {
  color: var(--paper, #f4f5f7);
  background: var(--ink-3, #171d28);
}
html body .headermobmenu-mobile__navigation .navigation__item .sub-menu .submenu-title {
  background: var(--ink-3, #171d28);
}
html body .headermobmenu-mobile__navigation .navigation__item .sub-menu .submenu-title a {
  color: var(--paper, #f4f5f7);
}

html body .sub-menu__item a { color: var(--paper-dim, #b9c1cd); }
html body .sub-menu__item a:hover { color: var(--orange, #f58220); }
html body .sub-menu__list .submenu-innter-title {
  color: var(--paper, #f4f5f7);
  background: var(--ink-3, #171d28);
}
html body .sub-menu__list .submenu-innter-title a { color: var(--orange, #f58220); }
html body .headermobmenu-mobile__navigation .text-white { color: var(--paper, #f4f5f7) !important; }
html body .headermobmenu-mobile__navigation p.text-white { color: var(--paper-dim, #b9c1cd) !important; }

/* mobile language dropdown: panel + item colours (size / shape are in section 6) */
html body .headermobmenu-mobile .vt-location .dropdown-menu {
  background-color: var(--glass-bg, rgba(17,22,31,0.9));                                /* fallback */
  background-color: color-mix(in srgb, var(--ink-2, #11161f) 70%, transparent);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  box-shadow:
    inset 0 0 0 1px var(--line-2, rgba(255,255,255,0.14)),
    0 20px 40px -20px var(--hdr-shadow);
}
html body .headermobmenu-mobile .vt-location .dropdown-item {
  color: var(--paper-dim, #b9c1cd);
  background-color: transparent;
}
html body .headermobmenu-mobile .vt-location .dropdown-item:hover,
html body .headermobmenu-mobile .vt-location .dropdown-item:focus {
  color: var(--orange, #f58220);
  background-color: transparent;
}




html[data-theme="light"] body .hdr .mmenu > li:hover,
html[data-theme="light"] body .hdr .submenu-title a:hover,
html[data-theme="light"] body .hdr .submenu-list a:hover,
html[data-theme="light"] body .hdr .submenu-list li.active > a,
html[data-theme="light"] body .hdr .submenu-list li.hovered > a,
html[data-theme="light"] body .hdr .mmenu-item--mega .mmenu-submenu-2 a:hover,
html[data-theme="light"] body footer.ds .menu-footer__nav li a:hover,
html[data-theme="light"] body footer.ds .footerPri-link li a:hover,
html[data-theme="light"] body footer.ds .foot-quick-link li a:hover,
html[data-theme="light"] body section.footer-bottom a:hover,
html[data-theme="light"] body section.footer-bottom .footer-bottom-link li a:hover {
  color: var(--orange-2, #b85a0c);
}
html[data-theme="light"] body .hdr .vertical-tabs a.active {
  color: var(--orange-2, #b85a0c) !important;
}
html[data-theme="light"] body .hdr .explore-more-link,
html[data-theme="light"] body footer.ds .page_footer p.spec span:first-child {
  color: var(--orange-2, #b85a0c) !important;
}
html[data-theme="light"] body .hdr .menuBtn-more:hover {
  background: var(--orange-2, #b85a0c);
  border-color: var(--orange-2, #b85a0c);
  color: #ffffff;
}



/*==========================================================
  5. SEARCH POPUP  (compact panel under the header)
     Same markup + open/close script as before (.search-open is toggled by
     the page's jQuery). It is no longer a full-screen overlay: one small
     panel with the input and the Search button on a single row.
     layout.css is not touched, its rules are overridden here.
==========================================================*/
html body .search-box.search-elem {
  position: fixed;
  top: calc(var(--hdr-h) + 10px);
  right: 24px;
  left: auto;
  bottom: auto;
  width: min(440px, calc(100vw - 24px));
  height: auto;
  margin: 0;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 100;
  background: var(--glass-bg, rgba(17,22,31,0.9));
  border: 1px solid var(--line-2, rgba(255,255,255,0.14));
  border-radius: 18px;
  box-shadow: 0 24px 50px -20px var(--hdr-shadow);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  /* closed state: invisible AND not focusable (visibility) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s var(--ease, ease), transform 0.2s var(--ease, ease), visibility 0s linear 0.2s;
}
html body .search-box.search-elem.search-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* input + Search button row */
html body .search-box.search-elem .inner {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  position: static;
  top: auto;
  transform: none;
}
html body .search-box.search-elem .inner .columns { width: 100%; padding: 0; }
html body .search-box.search-elem form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
html body .search-box.search-elem input[type=text] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 42px;
  padding: 0 16px;
  font-size: 16px;                       /* 16px = no auto-zoom on iPhone */
  font-weight: 400;
  line-height: 42px;
  color: var(--paper, #f4f5f7);
  background: var(--ink-3, #171d28);
  border: 1px solid var(--line-2, rgba(255,255,255,0.14));
  border-radius: 100px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
html body .search-box.search-elem input[type=text]:focus {
  border-color: var(--orange, #f58220);
  box-shadow: 0 0 0 3px var(--orange-soft, rgba(245,130,32,0.12));
}
html body .search-box.search-elem input[type=text]::placeholder { color: var(--paper-dimmer, #86909e); opacity: 1; }
html body .search-box.search-elem button.submit {
  position: static;
  flex: 0 0 auto;
  height: 42px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--on-orange, #1a1204);
  background: var(--orange, #f58220);
  border: 0;
  border-radius: 100px;
  box-shadow: none !important;
  cursor: pointer;
  outline: none;
  transition: opacity 0.2s, filter 0.2s;
}
html body .search-box.search-elem button.submit:hover:not([disabled]) { filter: brightness(1.08); }
html body .search-box.search-elem button.submit:focus-visible { box-shadow: 0 0 0 3px var(--orange-soft, rgba(245,130,32,0.12)) !important; outline: 2px solid var(--orange, #f58220); outline-offset: 2px; }
html body .search-box.search-elem button.submit[disabled] {
  color: var(--on-orange, #1a1204);
  background: var(--orange, #f58220);
  font-size: 14px;
  font-weight: 600;
  opacity: 0.4;
  cursor: not-allowed;
}

/* close (x) */
html body .search-box.search-elem .close-btn {
  order: 2;
  position: static;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0 !important;
  display: grid;
  place-items: center;
  font-size: 0;                          /* the "x" text is replaced by the icon below */
  line-height: 1;
  color: var(--paper-dim, #b9c1cd);
  background-color: transparent !important;   /* layout.css forces red with !important */
  border: 1px solid var(--line-2, rgba(255,255,255,0.14));
  border-radius: 50%;
  opacity: 1;
  outline: none;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
html body .search-box.search-elem .close-btn::before { content: "\00d7"; font-size: 22px; line-height: 1; transform: translateY(-1px); }
html body .search-box.search-elem .close-btn:hover { color: var(--orange, #f58220); border-color: var(--orange, #f58220); }
html body .search-box.search-elem .close-btn:focus-visible { outline: 2px solid var(--orange, #f58220); outline-offset: 2px; }

@media (max-width: 767px) {
  html body .search-box.search-elem { left: 12px; right: 12px; width: auto; top: calc(var(--hdr-h) + 8px); }
  html body .search-box.search-elem button.submit { padding: 0 16px; }
}

/*==========================================================
    footer-theme.css  -  COLOR-ONLY overrides for the footer
    Matches the new design theme (dark default + [data-theme="light"]).

    - Only color / background-color / border-color are changed.
      No size, spacing, font, position or layout is touched.
    - Every value uses the theme variables from the new theme CSS
      (--ink, --ink-2, --ink-3, --paper, --paper-dim, --paper-dimmer,
       --line, --line-2, --orange, --on-orange), so the footer
      switches automatically when the theme toggle changes.
    - Fallback values (2nd argument of var()) are the dark-theme colors.

    WORKS WITH custom.css: every selector below is prefixed with
    "html body" (higher specificity), so the HTML link order does
    NOT matter - custom.css can stay where it is.
    (custom.css sets .footer-bottom color:#ccc and "footer a:hover"
     #bdbdbd - both are overridden here.)

==========================================================*/

/* ---------- Footer backgrounds ---------- */
html body footer.ds {
  background-color: var(--ink-2, #11161f);
  color: var(--paper, #f4f5f7);
  box-shadow: inset 0 1px 0 var(--line-2, rgba(255,255,255,0.14));
  
}
html body footer.ds .page_footer {
  background-color: var(--ink-3, #171d28);
  box-shadow: inset 0 1px 0 var(--line, rgba(255,255,255,0.08));
}
html body section.footer-bottom {
  background: var(--ink, #0c1018);
  color: var(--paper-dimmer, #86909e);
  box-shadow: inset 0 1px 0 var(--line-2, rgba(255,255,255,0.14));
}

/* ---------- Top band: "Let's talk" / email / social ---------- */
html body footer.ds .page_footer h4.back {
  color: var(--line, rgba(255,255,255,0.08));
  opacity: 1;
}
html body footer.ds .page_footer p.spec,
html body footer.ds .page_footer p.spec a,
html body footer.ds .page_footer p.spec a:hover,
html body footer.ds .page_footer p.spec a:focus {
  color: var(--paper, #f4f5f7);
}
html body footer.ds .page_footer p.spec span:first-child {
  color: var(--orange, #f58220);
}

html body footer.ds .menu-footer__nav li a {
  color: var(--paper, #f4f5f7);
}
html body footer.ds .menu-footer__nav li a:hover {
  color: var(--orange, #f58220);
}
html body footer.ds .menu-footer__nav li:not(:last-child)::after {
  color: var(--paper-dimmer, #86909e);
}

/* ---------- Middle area: question badge, phones, links ---------- */
html body footer.ds .foot-question {
  background: var(--orange, #f58220);
}
html body footer.ds .foot-question h2 {
  color: var(--on-orange, #1a1204) !important;
}

html body footer.ds .footerPhone,
html body footer.ds .footerPhone span {
  color: var(--paper, #f4f5f7);
}

html body footer.ds .footerPri-link {
  border-left-color: var(--line-2, rgba(255,255,255,0.14));
}
html body footer.ds .footerPri-link li a {
  color: var(--paper-dim, #b9c1cd);
}

html body footer.ds h3 {
  color: var(--paper, #f4f5f7);
  font-weight: 500;
}
html body footer.ds .foot-quick-link li a {
  color: var(--paper-dim, #b9c1cd);
  border-left-color: var(--line-2, rgba(255,255,255,0.14));
}

/* divider line under the phone / primary-links row (Bootstrap .border-bottom) */
html body footer.ds .border-bottom {
  border-bottom-color: var(--line, rgba(255,255,255,0.08)) !important;
}

html body footer.ds .footerPri-link li a:hover,
html body footer.ds .foot-quick-link li a:hover {
  color: var(--orange, #f58220);
}

/* ---------- Bottom bar: copyright + contact link ---------- */
html body section.footer-bottom,
html body section.footer-bottom div,
html body section.footer-bottom p {
  color: var(--paper-dimmer, #86909e);
}
html body section.footer-bottom a {
  color: var(--paper-dim, #b9c1cd);
}
html body section.footer-bottom a:hover {
  color: var(--orange, #f58220);
}
html body section.footer-bottom .footer-bottom-link li a {
  color: var(--paper-dimmer, #86909e);
  border-left-color: var(--line-2, rgba(255,255,255,0.14));
}
html body section.footer-bottom .footer-bottom-link li a:hover {
  color: var(--orange, #f58220);
}


/*==========================================================
  6. HEADER: height, scroll states, logo, country selector
==========================================================*/

/* ---------- 6.1 Compact height ---------- */
html { scroll-padding-top: calc(var(--hdr-h) + 12px); }

/* layout.css hides the desktop header at <=1200px AND the mobile bar at >=1200px,
   so at exactly 1200px nothing showed. Keep the mobile bar up to and including 1200px. */
@media (max-width: 1200px) {
  html body .headermobmenu-mobile { display: block; }
}

/* desktop (>= 1201px only: below that the desktop header is hidden and must take no space).
   layout.css gave every top link 30px padding + 50px line-height (~114px bar) */
@media (min-width: 1201px) {
  html body header.m2e-wrap .hdr { height: var(--hdr-h); min-height: 0; padding-top: 0; padding-bottom: 0; }
  html body header.m2e-wrap .hdr .m2e-content,
  html body header.m2e-wrap .hdr .m2e-content > .container,
  html body header.m2e-wrap .hdr .m2e-content > .container > .row { height: 100%; }
  html body header.m2e-wrap .hdr .m2e-nav { height: 100%; padding-top: 0; padding-bottom: 0; }
  /* link = bar height minus the li border (2px) and the link border (2px), so the hover underline sits on the bar edge */
  html body .hdr .mmenu > li > a { padding-top: 0; padding-bottom: 0; line-height: calc(var(--hdr-h) - 4px); }
  /* the bar is 100px high with a 140px logo: never let the links / Search button wrap onto 2 lines */
  html body .hdr .mmenu > li > a,
  html body .hdr .search-btn-wrapper { white-space: nowrap; }

  /* "Search" button: same neutral pill as the theme toggle and the country selector (was an orange box) */
  html body .hdr .search-btn { color: var(--paper-dim, #b9c1cd) !important; text-decoration: none; }
  html body .hdr .search-btn-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    margin: 0;
    padding: 0 16px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    color: inherit;
    background: transparent;
    border: 1px solid var(--line-2, rgba(255,255,255,0.14));
    border-radius: 100px;
    transition: color 0.25s, border-color 0.25s, background-color 0.25s;
  }
  html body .hdr .search-btn-wrapper i { margin: 0; font-size: 14px; color: var(--orange, #f58220); }
  html body .hdr .search-btn:hover { color: var(--paper, #f4f5f7) !important; }
  html body .hdr .search-btn:hover .search-btn-wrapper {
    color: var(--paper, #f4f5f7);
    border-color: var(--orange, #f58220);
    background: var(--orange-soft, rgba(245,130,32,0.12));
  }
  html body .hdr .search-btn:focus-visible .search-btn-wrapper { outline: 2px solid var(--orange, #f58220); outline-offset: 2px; }
  html body .hdr .header-logo { flex: 0 0 auto; }
}
/* tighter link padding on the narrowest desktop widths so everything still fits next to the 140px logo */
@media (min-width: 1201px) and (max-width: 1360px) {
  html body .hdr .mmenu > li > a { padding-left: 9px; padding-right: 9px; }
  html body .m2e-nav .mx-4 { margin-left: 0.5rem !important; margin-right: 0.4rem !important; }
  html body .vt-theme-toggle-wrap { margin-right: 0.5rem; }
}

/* mobile / tablet bar: 80px -> 56px */
html body .headermobmenu-mobile { height: var(--hdr-h); min-height: var(--hdr-h); }
html body .headermobmenu-mobile .search-btn { line-height: 1; }


/* ---------- 6.2 Logo: one <img> per theme ---------- */
html body .hdr .header-logo { display: flex; align-items: center; }
html body .hdr .header-logo img {
  width: 220px !important;               /* desktop logo width (the <img> also carries an inline width) */
  max-width: none;
  height: auto;
}
html body .headermobmenu-mobile .logo { min-width: 0; }
html body .headermobmenu-mobile .logo > a{
  display: block;
}
html body .headermobmenu-mobile .logo__image {
  width: auto;
  height: 30px;
  /* max-width: clamp(96px, 34vw, 140px); */
  max-height: 49px;
  object-fit: contain;
}

/* ---------- 6.3 Header that follows the scroll (like the Chrome toolbar) ----------
   theme.js adds html.vee-smart and drives each bar's position (desktop: inline transform, mobile: inline `top`; -height ... 0) from the scroll:
   it leaves with the page when you scroll down and slides back in gradually when you scroll up.
   Without JS (no .vee-smart) the desktop bar stays in the page flow and the mobile bar is absolute.
   Bars without [data-smart-header] (old pages) are not affected. */
html.vee-smart body header.m2e-wrap[data-smart-header] { z-index: 90; }          /* its height is held by theme.js */
html.vee-smart body header.m2e-wrap[data-smart-header] > .hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

/* mobile / tablet bar */
html body .headermobmenu-mobile[data-smart-header] {
  position: absolute !important;         /* beats Bootstrap .position-absolute / layout.css fixed */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 90;
  transition: background-color 0.3s;
}
html.vee-smart body .headermobmenu-mobile[data-smart-header] {
  position: fixed !important;
  will-change: top;
}
html body.mobile-menu-opened .headermobmenu-mobile[data-smart-header] { z-index: 1050; }

/* stop page scroll while the mobile menu is open (class set by theme.js) */
html.vee-scroll-lock, html.vee-scroll-lock body { overflow: hidden; }


/* ---------- 6.4 Country selector: desktop (custom select) ---------- */
html body .lang-selector-wrapper { display: flex; align-items: center; }
html body .lang-selector-wrapper > li { list-style: none; }
html body .lang-selector-wrapper .select {
  display: block;                        /* inline-block left a baseline gap that pushed the pill 3px below the others */
  position: relative;
  width: auto;
  min-width: 140px;
  height: 34px;
  font-size: 14px;
  border: 1px solid var(--line-2, rgba(255,255,255,0.14)) !important;   /* layout.css uses !important too */
  border-radius: 100px !important;
  background: transparent;
  transition: border-color 0.25s, background-color 0.25s;
}
html body .lang-selector-wrapper .select:hover,
html body .lang-selector-wrapper .select:focus-within {
  border-color: var(--paper-dim, #b9c1cd) !important;
  background: rgba(127,127,127,0.08);
}
html body .lang-selector-wrapper .styledSelect {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 34px 0 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border-radius: 100px;
  user-select: none;
}
html body .lang-selector-wrapper .styledSelect::after {
  width: 7px;
  height: 7px;
  right: 14px;
  margin-top: -7px;
  border-bottom: 1.5px solid var(--paper-dim, #b9c1cd);
  border-right: 1.5px solid var(--paper-dim, #b9c1cd);
}
html body .lang-selector-wrapper .options {
  top: calc(100% + 10px);
  left: auto;
  right: 0;
  min-width: 220px;
  max-height: min(70vh, 360px);
  overflow-y: auto;
  padding: 8px;
  border: 0;
  border-radius: 16px;
  text-align: left;
  animation: veeLangIn 0.2s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
@keyframes veeLangIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
html body .lang-selector-wrapper .options li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
html body .lang-selector-wrapper .options li:hover { background: var(--orange-soft, rgba(245,130,32,0.12)); }
html body .lang-selector-wrapper .options li .fa,
html body .lang-selector-wrapper .options li .flag-icon { flex: 0 0 22px; width: 22px; margin: 0 !important; text-align: center; }   /* !important: the globe carries Bootstrap .mx-2 */
html body .lang-selector-wrapper .options li .flag-icon {
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--line-2, rgba(255,255,255,0.14));
}
html[data-theme="light"] body .lang-selector-wrapper .options li:hover { color: var(--orange-2, #b85a0c); }


/* ---------- 6.5 Country selector: mobile / tablet dropdown (.vt-location) ---------- */
html body .headermobmenu-mobile > .container { gap: 2px; }
html body .headermobmenu-mobile .vt-location { position: relative; flex: 0 0 auto; }
html body .headermobmenu-mobile .vt-location .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line-2, rgba(255,255,255,0.14));
  border-radius: 100px;
  background: transparent;
  color: var(--paper, #f4f5f7);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  transition: border-color 0.25s, background-color 0.25s;
}
html body .headermobmenu-mobile .vt-location .btn:hover,
html body .headermobmenu-mobile .vt-location .btn[aria-expanded="true"] {
  border-color: var(--paper-dim, #b9c1cd);
  background: rgba(127,127,127,0.10);
}
html body .headermobmenu-mobile .vt-location .btn:focus { outline: none; box-shadow: none; }
html body .headermobmenu-mobile .vt-location .btn:focus-visible { outline: 2px solid var(--orange, #f58220); outline-offset: 2px; }
/* custom.css gave the globe / flag a 40px left margin */
html body .headermobmenu-mobile .vt-location .btn i,
html body .headermobmenu-mobile .vt-location .btn img { margin: 0 !important; }   /* the globe carries Bootstrap .mx-2 (!important) */
html body .headermobmenu-mobile .vt-location .btn i { font-size: 15px; }
html body .headermobmenu-mobile .vt-location .btn::after { margin: 0 0 0 2px; border-top-width: 0.3em; border-left-width: 0.3em; border-right-width: 0.3em; }

html body .headermobmenu-mobile .vt-location .dropdown-menu {
  min-width: 200px;
  max-width: calc(100vw - 24px);
  margin-top: 10px;
  padding: 8px;
  border: 0;
  border-radius: 16px;
  font-size: 14px;
}
html body .headermobmenu-mobile .vt-location .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;                    /* comfortable touch target */
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.2;
  white-space: normal;
}
html body .headermobmenu-mobile .vt-location .dropdown-item i,
html body .headermobmenu-mobile .vt-location .dropdown-item img {
  flex: 0 0 22px;
  width: 22px;
  margin: 0 !important;
  text-align: center;
}
html body .headermobmenu-mobile .vt-location .dropdown-item img {
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--line-2, rgba(255,255,255,0.14));
}
html body .headermobmenu-mobile .vt-location .dropdown-item:hover,
html body .headermobmenu-mobile .vt-location .dropdown-item:focus { background: var(--orange-soft, rgba(245,130,32,0.12)); }
html[data-theme="light"] body .headermobmenu-mobile .vt-location .dropdown-item:hover,
html[data-theme="light"] body .headermobmenu-mobile .vt-location .dropdown-item:focus { color: var(--orange-2, #b85a0c); }

/* small phones: keep the bar on one line (menu | logo | search | theme | country) */
@media (max-width: 575px) {
  html body .headermobmenu-mobile > .container { padding-left: 12px; padding-right: 12px; }
  html body .headermobmenu-mobile .vt-location__label { display: none; }      /* globe / flag only */
  html body .headermobmenu-mobile .vt-location .btn { padding: 0 10px; }
  html body .headermobmenu-mobile .search-btn { margin: 0; padding: 0 8px; }
  html body .headermobmenu-mobile .vt-theme-toggle-wrap { margin: 0 0.15rem; }
}
@media (max-width: 359px) {
  html body .headermobmenu-mobile .logo__image { max-width: 84px; }
  html body .headermobmenu-mobile .vt-location .btn::after { display: none; }
}

/* Reduced motion: stop the endless dash loop on the presence-map arcs (everything else keeps its normal transitions) */
@media (prefers-reduced-motion: reduce) {
  .wm-arc { animation: none; }
}