:root {
  --accent: #1899a9;
  /* Both derived from --accent by default, so setting just the one Panel
     color coordinates hover/decorative shades too. header.php only
     overrides --accent-dark directly when the Panel's separate dark/hover
     field is actually filled in - otherwise this derivation wins. */
  --accent-dark: color-mix(in srgb, var(--accent) 100%, black 35%);
  --accent-light: color-mix(in srgb, var(--accent) 55%, white);
}

@font-face {
  font-family: Garamond;
  src: url("/assets/fonts/adobe_garamond_pro_regular.ttf");
}

* {
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  font-size: 15px;
}

h4 {
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-weight: 100;
}

h5 {
  font-size: 16px;
  font-weight: 500;
}

p {
  line-height: 30px;
  font-weight: 300;
  font-size: 19px;
}

li {
  font-weight: 300;
  font-size: 19px;
}

a {
  text-decoration: none;
  color: var(--accent);
}

img {
  max-width: 100%;
}

/* ── Layout ── */
.inner {
  position: relative;
  box-sizing: border-box;
  width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 1230px) {
  .inner {
    width: 100%;
    padding: 0 15px;
  }
}

.section {
  padding: 50px 0;
}

.center {
  text-align: center;
}

/* ── Buttons ── */
.btn {
  border-radius: 25px;
  padding: 15px 60px;
  text-decoration: none;
  text-transform: uppercase;
}
.btn-blue {
  background: var(--accent);
  color: #fff;
}
.btn-blue:hover {
  background: var(--accent-dark);
}
.btn-blue-2 {
  background: #002663;
  color: #fff;
}
.btn-blue-2:hover {
  background: #013b98;
}
.btn-blue-3 {
  background: var(--accent);
  color: #fff;
  display: inline-block;
  text-align: center;
}

/* ── Title / heading decorators ── */
.title {
  margin-bottom: 20px;
  font-size: 48px;
  font-weight: 100;
  font-family: "Roboto", sans-serif;
}

.line-head {
  height: 2px;
  width: 25px;
  max-width: 25px;
  margin-bottom: 30px;
  background: var(--accent);
}

.center-box {
  display: flex;
  justify-content: center;
}

/* ── Login bar ── */
.section--login_bar {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease;
}
.section--login_bar.is-open {
  max-height: 200px;
  opacity: 1;
}
.section--login_bar .hide--section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  min-height: 90px;
  background: var(--accent);
}
.section--login_bar .hide--section * { color: white; }
.section--login_bar .hide--section .inner {
  display: flex;
  justify-content: space-between;
}
.section--login_bar .hide--section .inner .lb--box {
  width: 45%;
  display: flex;
  align-items: center;
  height: 100%;
}
.section--login_bar .hide--section .inner .lb--box .lb--group {
  display: flex;
  align-items: center;
}
.section--login_bar .hide--section .inner .lb--box .lb--group h5 { font-size: 20px; }
.section--login_bar .hide--section .inner .lb--box .lb--group a.btn {
  padding: 10px 50px;
  margin-left: 10px;
}

/* ── Navigation ── */
.menu-container {
  position: relative;
}
.navigation {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 70px;
  padding-bottom: 60px;
}
.navigation .logo--box { width: 24%; }
.navigation .logo--box img { width: 100%; height: auto; }
.navigation ul {
  align-items: center;
  width: 76%;
  list-style: none;
  display: flex;
  justify-content: flex-end;
}
.navigation ul .menu:hover .submenu { display: block; }
.navigation ul a {
  margin-top: 8px;
  color: white;
  text-decoration: none;
}
.navigation ul a:hover {
  border-bottom: 2px solid var(--accent);
  padding-bottom: 5px;
}
.navigation ul .menu {
  margin-left: 2%;
  position: relative;
}
.navigation ul .menu .active {
  border-bottom: 2px solid var(--accent);
  padding-bottom: 5px;
}
.navigation ul .menu a { text-align: center; }
.navigation .menu2 a { width: 100%; }
.navigation .submenu-box {
  display: none;
  position: absolute;
  left: 0;
  top: 10px;
  width: max-content;
}
.navigation .submenu-box .menu2 {
  width: inherit;
  border-radius: 3px;
  padding: 0;
  background: rgba(255,255,255,0.7);
  display: flex;
  flex-direction: column;
  position: absolute !important;
}
.navigation .submenu-box .menu2 li {
  text-align: center;
  width: 100%;
  padding: 0 2px;
  box-sizing: border-box;
}
.navigation .submenu-box .menu2 li a {
  border-bottom: var(--accent) 1px solid;
  font-weight: 300;
  font-size: 19px;
  width: 100%;
  color: var(--accent);
  text-align: left;
  padding: 10px 20px;
  margin-top: 0;
  display: block;
  box-sizing: border-box;
}
.navigation .submenu-box .menu2 li:last-child a { border-bottom: none; }
.navigation .submenu-box .menu2 li a:hover { background: rgba(85,161,251,0.1); }

.arrow-bottom { margin-left: 6px; }

.submenu { z-index: 1111; }

/* Login button (top-right tab) - the original artwork's shape is kept as a
   mask (so it's pixel-identical to the original design) but the fill is a
   plain background-color, so it follows the theme accent color instead of
   being baked into the image. */
.login-btn {
  z-index: 1;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: -1px;
  width: 220px;
  height: 60px;
  background-color: var(--accent);
  -webkit-mask-image: url("/assets/images/btn.png");
  mask-image: url("/assets/images/btn.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top;
  mask-position: top;
}
.login-btn:hover {
  background-color: var(--accent-dark);
}
.login-btn p {
  color: white;
  padding-top: 4px;
  text-align: center;
}

/* Controls (search + lang) */
.controls {
  position: relative;
  width: 100px;
  margin-left: 20px;
  display: flex;
  justify-content: space-around;
}
.controls .control {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background-color: rgba(85,96,115,0.7);
  border-radius: 15px;
}
.controls .control:hover {
  background-color: rgb(85,96,115);
  cursor: pointer;
}
.controls-sub-menu {
  width: 90px;
  right: 0;
  top: 30px;
  position: absolute;
  /* .sub-menu-langs's own z-index:1 (below) has no effect since it isn't
     itself positioned - without this, the whole dropdown sits at the
     default z-index:auto paint layer, same as the hero image, and loses
     that tie because the hero comes later in the DOM. */
  z-index: 10;
  margin-right: 3px;
}
.sub-menu-langs {
  background-color: transparent !important;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  transform: translateY(-2em);
  z-index: 1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}
.sub-menu-langs a:hover { border: none !important; background: none; }
.sub-menu-langs .control.ico-lang { z-index: 2; cursor: pointer !important; white-space: nowrap; }
.sub-menu-langs .control.ico-lang span { font-size: 16px; padding-left: 4px; color: white; }
/* :hover itself - not just the click-passthrough problem it enables - has
   to be kept off touchscreens here. WebKit/Blink apply :hover to whatever
   was tapped on touchend regardless of any JS click handler, so even with
   the JS .open toggle below, leaving this unscoped meant the tap's own
   :hover match revealed the list synchronously as part of that same tap,
   and the tap's click then landed on whatever language link the reveal
   animation had already put under the finger - usually just the first one,
   which is why tapping only ever seemed to toggle between two markets
   instead of opening a real menu (same on the live site - this dropdown is
   hover-only there too). Scoping to (hover: hover) - true for mouse/
   trackpad, false on touch - leaves .open (toggled by app.js on click) as
   the only trigger on touch, so a tap can no longer both reveal and select
   in one motion. */
@media (hover: hover) {
  .ctrl--langs:hover .sub-menu-langs {
    visibility: visible;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
  }
}
.ctrl--langs.open .sub-menu-langs {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}
.ctrl--langs { margin-left: 10px; }
.search-ico { margin-top: 0 !important; }
.search-ico:hover { padding-bottom: 0 !important; border-bottom: 0 !important; }
.empty-s { height: 20px; }
.uppercase { text-transform: uppercase !important; }

.ico-user:before {
  content: url("/assets/images/user.png");
  padding-right: 6px;
  padding-top: 1px;
}

/* ── Mobile nav ── */
.mobile-menu-ico { display: none; margin-left: 20px; }
.menu-mobile {
  background: var(--accent);
  display: none;
  z-index: 100;
  position: absolute;
  width: 100%;
  text-align: center;
}
.menu-mobile .active { background: var(--accent-dark); }
.menu-mobile .submenu--mobile { display: none; padding: 0; background: var(--accent); }
.menu-mobile .submenu--mobile li a { font-size: 12px; }
.menu-mobile ul { padding: 10px 0; list-style: none; }
.menu-mobile li a {
  color: white;
  padding: 15px 0;
  display: block;
  width: 100%;
  text-transform: uppercase;
  text-decoration: none;
  /* Without this, tapping a link on iOS/Android shows the browser's own
     default tap-highlight overlay (independent of any of our CSS colors)
     for an instant before/instead of our :hover background below - which
     is what read as a stray color flash on tap. */
  -webkit-tap-highlight-color: transparent;
}
.menu-mobile li a:hover { background: var(--accent-dark); }
.menu-mobile li a.active { font-weight: 800; }
.flex-center {
  display: flex;
  justify-content: center;
  max-width: 200px;
  margin: 0 auto;
}
.arrow-menu { margin-left: 8px; }
.arrow { border: solid #fff; border-width: 0 2px 2px 0; display: inline-block; padding: 4px; }
.arrow.down { transform: rotate(45deg); -webkit-transform: rotate(45deg); }

/* ── Hero section ── */
section.section--top {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  position: relative;
  min-height: 650px;
}
section.section--top .bg-img {
  height: 100%;
  position: absolute;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.s--items { display: none; }
.s--items-home.s--items {
  width: 55%;
  display: block;
  position: relative;
  z-index: 2;
  min-height: 400px;
  padding-top: 60px;
  padding-bottom: 180px; /* leave room for news bar */
}
.s--items-page.s--items {
  width: 70%;
  display: block;
  position: relative;
  z-index: 2;
  min-height: 400px;
  padding-top: 60px;
  padding-bottom: 60px;
}
@media screen and (max-width: 900px) {
  .s--items-page.s--items { width: 100%; }
}

/* About Us hero: text sits lower over the background photo, this page only.
   Keeps within the section's 650px min-height so the bg photo doesn't stretch. */
.s--items-about-us.s--items-page { padding-top: 360px; padding-bottom: 30px; }

/* Hero text slider — track-based, JS-controlled */
.hero-text-slider { overflow: hidden; width: 100%; }
.hero-text-track {
  display: flex;
  transition: transform 0.5s ease;
}
.slider--main-page {
  min-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.text--slider {
  width: 100%;
  color: #fff;
  outline: none !important;
}
.text--slider h2 {
  margin-bottom: 40px;
  font-size: 32px;
  font-weight: 100;
  font-family: "Roboto", sans-serif;
}
.text--slider.slider--main-page .ts-title * {
  font-weight: 300;
  font-family: Roboto, sans-serif !important;
}
.text--slider.slider--main-page .ts-item { width: 83%; }
.text--slider.slider--main-page .ts-item * {
  font-weight: 300;
  font-family: "Roboto", sans-serif !important;
}
.ts-title h1 {
  font-family: "Roboto", sans-serif;
  font-size: 50px;
  color: white;
  margin-bottom: 20px;
  font-weight: 300;
}
.text-2-slider { font-size: 28px; color: white; font-family: "Roboto", sans-serif; font-weight: 300; }
.text-2-slider p { font-size: inherit; font-family: inherit; font-weight: inherit; color: white; line-height: 1.4; }
.text-2-slider span { font-size: inherit !important; font-family: inherit !important; }

/* Hero text slider dots */
.hero-dots {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}
.hero-dots button {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, border-color 0.2s;
}
.hero-dots button.active {
  background: #fff;
  border-color: #fff;
}

/* Hero article ticker — full-width dark bar at the bottom of the hero */
.s--article-box {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 35px 0 5px 0;
  background: rgba(0, 0, 20, 0.5);
  z-index: 3;
}
/* The slider container — slides are shown one at a time via JS */
.js_article_slider { display: block; overflow: hidden; position: relative; }
.js_article_slider .slider-track {
  display: flex;
  transition: transform 0.4s ease;
}
.js_article_slider .slider-track > a {
  min-width: 100%;
  box-sizing: border-box;
  padding: 0 40px;
  transition: transform 0.25s;
}
.js_article_slider .slider-track > a:hover { transform: translateY(-4px); }
.js_article_slider .slider-track > a:hover .article-thumb img { transform: scale(1.06); }
/* Slider dots */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  margin-bottom: 8px;
}
.slider-dots button {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}
.slider-dots button.active { background: var(--accent); }

.s--article-flex { display: flex; align-items: center; }
.s--article-left { margin-right: 40px; flex-shrink: 0; }
.s--article-left .article-thumb { width: 200px; height: 108px; overflow: hidden; }
.s--article-left .article-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  border: 1px solid white;
  transition: transform 0.35s;
}
.s--article-right { width: 70%; }
.date-field {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: grey 1px solid;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  font-weight: 300;
}
.s--article-box-title {
  transition: 0s color;
  padding-bottom: 10px;
  font-size: 17px;
  color: #dca773;
  font-weight: bold;
  font-family: "Roboto", sans-serif;
  margin: 6px 0 4px;
}
.s--article-box-title::after {
  padding-left: 20px;
  padding-top: 6px;
  content: url("/assets/images/arr_blue.png");
  display: inline-block;
  vertical-align: middle;
}
.s--article-box a:hover .s--article-box-title { color: #b7855c !important; transition: all 0.4s ease; }
.s--article-box-p {
  font-size: 17px;
  line-height: 20px;
  color: white;
  font-weight: 300;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.s--article-box a:hover .s--article-box-p { color: #d5d5d5 !important; transition: all 0.4s ease; }
@media screen and (max-width: 600px) {
  .s--article-flex { flex-wrap: wrap; }
  .s--article-left { display: none; }
  .s--article-right { width: 100%; }
}

/* ── Popup (private investor circle) ── */
.popup-circle {
  z-index: 99;
  display: none;
  position: fixed;
  bottom: 0;
  right: 0;
}
@media screen and (max-width: 600px) {
  .popup-circle { bottom: 10px; right: 10px; }
}
.popup-circle .popup-box {
  position: absolute;
  right: 50px;
  bottom: 50px;
}
@media screen and (max-width: 600px) {
  .popup-circle .popup-box { position: relative; right: inherit; bottom: inherit; }
}
.popup-circle .popup-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  width: 420px;
  height: 420px;
  border-radius: 250px;
  background: #b9e0e5;
  padding: 40px;
}
@media screen and (max-width: 600px) {
  .popup-circle .popup-inner { width: 300px; height: 300px; }
  .popup-circle .popup-inner .popup-text * { font-size: 20px; }
}
.popup-circle .popup-text { text-align: center; }
.popup-circle .popup-text * {
  line-height: 1.3;
  font-size: 28px;
  font-family: "Roboto", sans-serif;
}
.popup-circle .popup-close {
  color: gray;
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 24px;
  cursor: pointer;
}
@media screen and (max-width: 600px) {
  .popup-circle .popup-close { right: 10px; bottom: 10px; }
}
.popup-circle .btn { margin-top: 25px; padding: 15px 40px; }
@media screen and (max-width: 600px) { .popup-circle .btn { padding: 10px 20px; } }

/* ── Section: Our offer (boxes) ── */
.section--boxes { box-sizing: border-box; padding-top: 50px; }
.section--boxes .boxes {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.section--boxes .boxes .box { margin: 7px; width: 31.5%; }
.section--boxes .boxes .box img { transition: filter 0.5s ease; }
.section--boxes .boxes .box:hover img { filter: brightness(50%); transition: filter 0.5s ease; }

.section--boxes.col-2 .boxes .box { width: 35%; margin: 20px; transition: transform 0.25s, box-shadow 0.25s; }
.section--boxes.col-2 .boxes .box:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(27,42,68,.12); }
@media screen and (max-width: 1000px) {
  .section--boxes.col-2 .boxes .box { margin: 7px; }
}

.boxes { margin-top: 80px; display: flex; justify-content: space-around; flex-wrap: wrap; }
.boxes .box { margin: 0 0 20px 0; width: 32%; }
.boxes .box .b-img-box { border-radius: 5px; }
.boxes .box img { border-radius: 5px 5px 0 0; display: block; width: 100%; height: auto; }
.boxes .box .b-title { font-size: 19px; color: var(--accent-dark); margin-bottom: 10px; letter-spacing: 1px; text-transform: uppercase; }
.boxes .box .b-title p { font-size: 19px; font-weight: 400; color: var(--accent-dark); }
.boxes .box .desc {
  border-radius: 0 0 5px 5px;
  min-height: 100px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: var(--accent-light);
}
.boxes .box .desc p { text-align: center; }

/* ── Section: Why Moventum (icons circle) ── */
.section--icons-circle .inner { padding-top: 10px; }
.icons-desc { margin-bottom: 20px; }
.icons-desc p { font-size: 19px; font-weight: 300; }
.icons-circle {
  margin-top: 40px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.icons-circle-item {
  width: 18%;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}
.circle-bg {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.circle-bg img { width: 55px; height: 55px; object-fit: contain; }
.icons-circle-item .icons-desc p { font-size: 15px; line-height: 22px; }

/* Staggered scroll-reveal - "pre-reveal" is added by JS right before
   observing, so a no-JS visitor just sees the items in their normal
   static (visible) state instead of stuck invisible. */
.icons-circle-item.pre-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.icons-circle-item.pre-reveal.in { opacity: 1; transform: none; }
.icons-circle-item:nth-child(1) { transition-delay: 0s; }
.icons-circle-item:nth-child(2) { transition-delay: 0.1s; }
.icons-circle-item:nth-child(3) { transition-delay: 0.2s; }
.icons-circle-item:nth-child(4) { transition-delay: 0.3s; }
.icons-circle-item:nth-child(5) { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .icons-circle-item.pre-reveal { opacity: 1; transform: none; transition: none; }
}
.icons-circle-item:hover, .icons-circle-item.pre-reveal.in:hover {
  transform: scale(1.08);
  transition: transform 0.25s ease;
}

/* Staggered scroll-reveal (appear, lift, zoom in) for card grids - About
   us "Unsere Werte" (carousel-card-deck) and Investmentdepot account-type
   details (logo-card-grid). "pre-reveal" is added by JS right before
   observing, so a no-JS visitor just sees the cards in their normal
   static (visible) state instead of stuck invisible. */
.reveal-card.pre-reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.94);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-card.pre-reveal.in { opacity: 1; transform: none; }
.reveal-card:nth-child(1) { transition-delay: 0s; }
.reveal-card:nth-child(2) { transition-delay: 0.1s; }
.reveal-card:nth-child(3) { transition-delay: 0.2s; }
.reveal-card:nth-child(4) { transition-delay: 0.3s; }
.reveal-card:nth-child(5) { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .reveal-card.pre-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Section: Global orientation (map/stats) ── */
.section--box_map { width: 100%; }
.bm-desc-box { width: 100%; display: flex; justify-content: center; }
.bm-boxes-switch {
  margin-top: 60px;
  box-sizing: border-box;
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
}
.bm-boxes-switch .bm-box {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  height: 160px;
  cursor: pointer;
  background: var(--accent-light);
  margin: 10px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}
/* Hover tease: the stat's own photo (already used in the click-to-switch
   detail panel below) fades in behind the tile, tinted by the existing
   accent-dark hover fill turned translucent, layered on top rather than
   replacing the click behavior. */
.bm-boxes-switch .bm-box .bm-box-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.45s;
}
.bm-boxes-switch .bm-box > *:not(.bm-box-bg) { position: relative; z-index: 1; }
.bm-boxes-switch .bm-box:hover { background: color-mix(in srgb, var(--accent-dark) 82%, transparent); transform: translateY(-3px); }
.bm-boxes-switch .bm-box:hover .bm-box-bg { opacity: 0.4; }
.bm-boxes-switch .bm-box:hover * { color: #fff; }
.bm-boxes-switch .bm-box h2 { font-size: 40px; color: var(--accent-dark); font-family: "Roboto", sans-serif; }
.bm-boxes-switch .bm-box p { width: 100%; text-align: center; }
.bm-img-box { margin-top: 30px; display: flex; justify-content: center; align-items: flex-start; }
.bm--hidden { display: none; }
.bm--hidden.active {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Without an explicit width, this - as the only visible flex item in
     .bm-img-box - shrink-wraps to its own content's preferred width
     instead of filling the row, since the img/.content children's own
     percentage widths can't resolve against an indeterminate parent.
     Panels with shorter detail text ended up very slightly narrower than
     the rest, which read as the map image "shifting" when switching to
     that one panel. */
  width: 100%;
}
/* aspect-ratio reserves the image's box before it finishes loading (all
   six stat images are the same 720x349 continents map) - without it the
   row has no height to give this <img> until the file decodes, so it pops
   in and shifts everything below it. Only visible on whichever box is
   showing by default on page load (box 1) - the rest start
   "display: none" via .bm--hidden above, so their own reflow happens
   off-screen before a hover ever reveals them. */
.bm--hidden img { width: 60%; aspect-ratio: 720 / 349; }
.bm--hidden .content { width: 35%; }
.bm--hidden .content h1 { font-size: 24px; font-weight: 600; font-family: "Roboto", sans-serif; text-align: right; }
.bm--hidden .content p { font-size: 16px; line-height: 24px; text-align: right; }

/* ── Newsletter section ── */
.content-section-item .content-news { margin-top: 30px; text-align: center; }
.content-section-item .content-text p { font-size: 18px; line-height: 28px; }

/* ── Long-form legal/body text (left-aligned, not the centered newsletter-blurb style above) ── */
.legal-body {
  max-width: 900px;
  margin: 30px auto 0;
  text-align: left;
}
.legal-body p { font-size: 17px; line-height: 28px; margin-bottom: 16px; }
.legal-body ul { padding-left: 22px; margin-bottom: 16px; }
.legal-body li { font-size: 17px; line-height: 26px; margin-bottom: 8px; }
.legal-body small { font-size: 13px; line-height: 22px; }

/* Per-field Panel color/font/size overrides (site/plugins/styling) are
   applied as an inline style on the wrapper around a field's rendered
   output. For plain fields (->esc()) that wrapper IS the text node, so
   the override just works. For richtext fields (->kt()) the wrapper
   instead contains child tags (p, li, ...), and those pick up their own
   color/font-family/font-size from sitewide rules - the "* { font-family:
   Roboto }" reset, "p { font-size: 19px }", a few containers' own
   "color: #444" on their <p> - which always win over an inherited value
   regardless of the wrapper's own override. Re-enable inheritance on
   descendants of a wrapper that actually carries a given override,
   scoped to just that one property, so e.g. a color-only choice doesn't
   also reset font-family/font-size on unrelated kt() output.
   "color:" is matched anchored (start-of-string or right after a ";")
   so it doesn't also catch "background-color:" elsewhere on the page.
   !important because ":where(...)" is specificity-zero by design, so
   without it this would lose any tie (on source order) against a
   same-or-later container-specific rule like ".lrc-content p" - same
   fix already used for this exact problem in .text-2-slider span below. */
[style^="color:"] :where(p, li, span, strong, em, a, blockquote, h1, h2, h3, h4, h5, h6),
[style*=";color:"] :where(p, li, span, strong, em, a, blockquote, h1, h2, h3, h4, h5, h6) {
  color: inherit !important;
}
[style*="font-family"] :where(p, li, span, strong, em, a, blockquote, h1, h2, h3, h4, h5, h6) {
  font-family: inherit !important;
}
[style*="font-size"] :where(p, li, span, strong, em, a, blockquote, h1, h2, h3, h4, h5, h6) {
  font-size: inherit !important;
}

/* ── Footer ── */
.menu--footer {
  border-top: 1px solid #e5e6e8;
  padding: 60px 0 0 0;
  box-shadow: -10px 10px 36px -7px rgba(0,0,0,0.75);
}
.menu--footer .inner .mf-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.menu--footer span {
  margin-bottom: 10px;
  margin-top: 10px;
  color: #91979d;
  font-size: 14px;
  font-weight: 300;
}
.menu--footer ul {
  margin-bottom: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
  list-style: none;
}
.menu--footer ul li {
  margin-bottom: 6px;
  margin-top: 6px;
  font-size: 16px;
  margin-right: 22px;
}
@media screen and (max-width: 900px) {
  .menu--footer ul li { font-size: 14px; }
}
.menu--footer ul li a, .menu--footer ul li b {
  text-transform: uppercase;
  color: #0d1928;
}
.footer-menu { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }
.footer-menu ul { width: 25%; flex-direction: column; }
.footer-menu ul li { margin-right: 0; }
.footer-green {
  margin-top: 40px;
  background: #0d1928;
  padding: 20px 0;
}
.footer-green .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-green .white { color: #fff; font-size: 14px; font-weight: 300; }
.social--media { margin-bottom: 10px; margin-top: 10px; display: flex; }
.social--media img { width: 30px; height: 30px; margin-left: 10px; }

/* ── Popup ── */
.popup-circle { display: none; }

/* ── Responsive ── */
/* Desktop nav, "squeezed tablet" zone (e.g. iPad Pro portrait, ~1024px) -
   above the mobile-hamburger cutoff below, but too narrow at the nav's
   normal 19px link size for every label ("Institutional investors" /
   "Institutionelle Investoren" is the long pole) to fit on one line. Flex
   then shrinks that item's box below its content width and the label
   wraps to two lines, which - since ".navigation ul" is align-items:
   center - throws off its vertical position relative to every one-line
   sibling and reads as random extra gaps in the row. This doesn't happen
   on the live site either (it has the same issue at this width), but
   nothing here depends on matching that, so it's just fixed outright:
   shrink the link/gap sizing slightly so everything clears one line. */
@media screen and (min-width: 901px) and (max-width: 1150px) {
  .navigation ul a { font-size: 16px; white-space: nowrap; }
  .navigation ul .menu { margin-left: 1.2%; }
  .controls { margin-left: 10px; }
}
@media screen and (max-width: 900px) {
  /* Keep the desktop padding-top (70px) here - the login-btn tab is an
     absolutely positioned 60px-tall overlay pinned to the top of this nav
     (see .login-btn above), and shrinking this padding on mobile pulls the
     hamburger icon up underneath it, blocking taps on the menu (matches
     the live site, which never overrides this on mobile either). */
  /* A fixed width, not a percentage - matches the live site's own
     ".logo--box { width: 240px !important }" mobile override. A percentage
     here scales the logo up with the viewport, so it reads oversized at
     tablet widths (e.g. iPad Air's 820px) even though it looks fine on a
     phone. */
  .navigation .logo--box { width: 240px; }
  .mobile-menu-ico { display: flex; align-items: center; }
  .menu--desktop { display: none !important; }
  /* text-2-slider's font-size drops here, matching the live site's own
     ".s--items h2 { font-size: 25px }" mobile override, so the headline
     wraps to fewer lines instead of ballooning the hero's height. Needs the
     "h2.text-2-slider" compound to out-specificity the base
     ".text--slider h2 { font-size: 40px }" rule above. */
  .s--items-home.s--items { width: 100%; min-height: 0; padding-bottom: 250px; }
  .text--slider h2.text-2-slider { font-size: 25px; }
  /* News ticker bar (.s--article-box) stays visible on mobile on the live
     site too - only its thumbnail image is dropped, with the text taking
     the full width (matches live's ".s--article-flex .s--article-left {
     display: none }" / ".s--article-right { width: 100% }" mobile rules).
     The ticker is pinned (position: absolute; bottom: 0) to the hero, so
     .s--items-home's padding-bottom above needed bumping past the desktop
     180px - the hero-dots slide indicator otherwise ends up underneath the
     ticker's higher z-index and becomes invisible/unclickable, the same
     class of bug as the login-btn/hamburger overlap fixed above. */
  .s--article-flex .s--article-left { display: none; }
  .s--article-flex .s--article-right { width: 100%; }
  /* Section headings (Our Services, About Us, ...) - matches the live
     site's own "h2.title { font-size: 33px }" mobile override; unscoped
     .title is 48px (see base rule above), which reads oversized on phones. */
  h2.title { font-size: 33px; }
  .section--boxes.col-2 .boxes .box { width: 45%; }
  .icons-circle-item { width: 45%; }
  .bm-boxes-switch .bm-box { width: 40%; }
  .bm--hidden.active { flex-direction: column; }
  .bm--hidden img { width: 100%; }
  .bm--hidden .content { width: 100%; }
  .footer-menu { flex-direction: column; gap: 10px; }
  .footer-menu ul { width: 100%; }

  /* Login bar (AccountView / MoventumOffice quick-login) - stack the two
     boxes instead of 45%-width columns, which overflowed on phone widths. */
  .section--login_bar.is-open { max-height: 400px; }
  .section--login_bar .hide--section { min-height: 0; padding: 15px 0; }
  .section--login_bar .hide--section .inner { flex-direction: column; gap: 15px; }
  .section--login_bar .hide--section .inner .lb--box { width: 100%; justify-content: center; }
  .section--login_bar .hide--section .inner .lb--box .lb--group a.btn { padding: 10px 24px; }
}
@media screen and (max-width: 600px) {
  .section--boxes.col-2 .boxes .box { width: 90%; }
  .icons-circle-item { width: 90%; }
}

/* Hamburger icon */
#nav-icon3 { width: 30px; height: 24px; position: relative; cursor: pointer; }
#nav-icon3 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #0d1928;
  border-radius: 2px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}
#nav-icon3 span:nth-child(1) { top: 0px; }
#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) { top: 10px; }
#nav-icon3 span:nth-child(4) { top: 20px; }

/* ── Inner page: slim header ── */
.slim--header {
  min-height: 300px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}
.slim--header-2 { min-height: 220px; }
.ts-title-no-margin { margin-top: 0; }
.slim--header h1 {
  font-size: 40px;
  font-weight: 300;
  font-family: "Roboto", sans-serif;
  color: #0d1928;
}

.article-heading {
  font-size: 40px;
  font-weight: 300;
  font-family: "Roboto", sans-serif;
  color: #0d1928;
  margin-top: 30px;
  margin-bottom: 20px;
}

.article-hero-img {
  margin-top: 30px;
}
.article-hero-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.article-hero-img + .article-heading {
  margin-top: 20px;
}
.article-text p { text-align: justify; }

/* ── Inner page: sub-navigation ── */
.section--menu-subpage {
  background: var(--accent);
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 50;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  transition: box-shadow .25s ease;
}
/* Set by app.js once the bar is pinned to the top of the viewport. */
.section--menu-subpage.is-stuck { box-shadow: 0 6px 20px rgba(13, 25, 40, 0.25); }
.menu--subpage {
  display: flex;
  align-items: center;
  gap: 6px;
}
.menu--subpage .ms-title {
  flex-shrink: 0;
  font-weight: 500;
  color: #fff;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 18px 0 0;
  padding-right: 24px;
  line-height: 36px;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.menu--subpage p {
  margin: 0;
  line-height: 36px;
}
.menu--subpage a {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.menu--subpage a:hover,
.menu--subpage a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  outline: none;
}
/* Section currently in view (scroll spy in app.js). */
.menu--subpage a.is-active {
  color: var(--accent);
  background: #fff;
  border-color: #fff;
}
/* Small screens: one swipeable row instead of wrapping into a tall block
   that eats the viewport while sticky. */
@media screen and (max-width: 900px) {
  .menu--subpage {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .menu--subpage::-webkit-scrollbar { display: none; }
  .menu--subpage .ms-title { margin-right: 10px; padding-right: 16px; }
  .menu--subpage a { padding: 6px 14px; font-size: 13px; }
}

/* ── Inner page: section title block ── */
.section__title {
  padding: 40px 0 10px;
}
.section__title h2 { margin-bottom: 10px; }
#expat-de-services-gap { padding-bottom: 40px; }
.center-box.after-title { margin-top: 0; }

/* ── Inner page: left/right content ── */
.section--left_right_content { padding: 40px 0; }
.lrc--box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.lrc-content {
  flex: 1;
  min-width: 280px;
}
.lrc-content p { font-size: 17px; line-height: 28px; margin-bottom: 12px; }
.lrc-content ul { padding-left: 20px; margin-bottom: 12px; }
.lrc-content li { font-size: 16px; line-height: 26px; }
.lrc--images {
  flex-shrink: 0;
}
.lrc--images.one-image img {
  max-width: 500px;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.box-btn {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

/* ── Inner page: logos section ── */
.section--logos { padding: 40px 0; }
.l-boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 30px;
  margin-top: 30px;
}
.l-box {
  width: 45%;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* The "MOVE" wordmark is already the same pixel cap-height across all 4
   logo files - the earlier "different sizes" bug was the CSS forcing a
   shared width or height (old: "max-width:160px;height:auto"), which
   made each image scale by its OWN factor to hit that target since their
   canvases are different total widths/heights (driven by each suffix
   word's own length/descender, not by "MOVE" itself). Rendering at
   natural size avoids that per-image scaling entirely; max-width is just
   a responsive safety net for narrow viewports, not a sizing mechanism. */
.l-box > img { width: auto; height: auto; max-width: 100%; margin-bottom: 16px; }
/* Matches the live site's own mobile/tablet override: at desktop widths
   these render at native size (above), but below 1024px they additionally
   cap at 300px so the largest logos (classic 349px, active 332px) don't
   render noticeably bigger than they do live at those widths. */
@media screen and (max-width: 1024px) {
  .l-box > img { width: 100%; max-width: 300px; }
}
.l-box-content { width: 100%; }
.l-box-helper { display: flex; align-items: center; margin-bottom: 10px; }
/* Fixed short width and a neutral color, matching the live site - not
   full-width/per-box-colored. Since each box's logo is a different
   native height, this divider naturally lands a few px off between
   boxes in the same row on the live site too; keeping it short and
   low-contrast (rather than a bold full-width accent bar) is what keeps
   that from reading as "misaligned" the way a loud full-width color bar
   would. */
.l-box-helper .line { width: 60px; height: 2px; background: #002663; }
.l-box-title p { font-size: 16px; font-weight: 500; margin-bottom: 6px; line-height: 22px; }
.l-box-p p { font-size: 14px; line-height: 22px; color: #444; }

/* ── Inner page: person/contact card ── */
.section--person { padding: 50px 0; }
.section--person .center-box { margin-bottom: 20px; }
.c-person {
  display: flex;
  align-items: center;
  max-width: 1050px;
  margin: 0 auto;
}
.c-person-img {
  width: 45%;
  display: flex;
  justify-content: flex-end;
}
.c-person-img img {
  max-width: 100%;
  height: auto;
  border-radius: 500px;
  border: 4px solid var(--accent);
  margin: 0 30px;
}
.c-person-text { width: 55%; margin: 0 30px; }
.c-person-h { font-size: 32px; font-weight: 500; margin-bottom: 8px; }
.c-person-title-2 { font-size: 15px; font-weight: 400; color: #888; letter-spacing: 1px; display: block; margin-bottom: 16px; white-space: nowrap; }
.c-person-contact { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.c-person-phone, .c-person-email { font-size: 17px; color: #0d1928; }
@media screen and (max-width: 1024px) {
  .c-person { flex-wrap: wrap; justify-content: center; }
  .c-person-img { width: 100%; justify-content: center; }
  .c-person-text { width: 100%; margin-top: 30px; text-align: center; }
}
.c-person-email { color: var(--accent); text-decoration: underline; }

/* ── Inner page: values carousel ── */
.section--carousel_desc { padding: 40px 0; }
.carousel-box-main { margin-top: 30px; }
.carousel-center-box { display: flex; justify-content: center; }
.carousel-boxes-switch-2 {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.carousel-box-2 { width: 386px; margin-top: 50px; cursor: pointer; }
.cd--bg {
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  min-height: 629px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.cd--short {
  padding: 20px;
  background: rgba(0,0,0,0.45);
}
.cd--long-desc {
  display: none;
  padding: 40px 20px 20px 20px;
  background: color-mix(in srgb, var(--accent) 92%, transparent);
  position: absolute;
  inset: 0;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
}
.carousel-box-2:hover .cd--long-desc { display: flex; }
.carousel-box-2:hover .cd--short { opacity: 0; }
.name-person { font-weight: 600; color: #fff; font-size: 25px; margin-bottom: 4px; }
.position { color: #d0f0f3; font-size: 15px; margin-bottom: 8px; }
.long-desc { color: #fff; font-size: 15px; line-height: 19px; }

/* ── Inner page: text columns ── */
.section--text-columns { padding: 40px 0; }
.text-columns {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.icons-text-columns { flex: 1; min-width: 240px; }
.tc-text ul { padding-left: 18px; }
.tc-text li { font-size: 15px; line-height: 24px; color: #fff; margin-bottom: 10px; }
.tc-text strong { color: #fff; }

/* ── Inner page: box_map switch-2 variant ── */
.bm-boxes-switch-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
}
.bm-boxes-switch-2 .bm-box {
  border-radius: 8px;
  padding: 20px;
  background: var(--accent-light);
  min-width: 180px;
  max-width: 220px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s, background 0.2s;
}
.bm-boxes-switch-2 .bm-box:hover { background: var(--accent-dark); transform: translateY(-4px); box-shadow: 0 14px 34px rgba(27,42,68,.12); }
.bm-boxes-switch-2 .bm-box:hover * { color: #fff; }
.bm-boxes-switch-2 .bm-box p { font-size: 15px; line-height: 22px; }
.bm-boxes-switch-2 img { margin-bottom: 17px; }
.bm-boxes-switch-3 .bm-box { max-width: 260px; }
.btn-center-2 { display: flex; justify-content: center; margin-top: 20px; }
.bm-display { display: flex; justify-content: center; width: 100%; }
.bm-display .lrc-content { max-width: 700px; }
/* Card wrapper for embedded third-party widgets (e.g. the Ex-ante cost
   calculator) - can't style inside the iframe itself (cross-origin), so
   this dresses up the frame around it instead. */
.embed-frame {
  margin-top: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(27, 42, 68, .08);
  padding: 24px;
}
.embed-frame iframe { display: block; width: 100%; border: 0; }

/* ── Downloads page: language tabs + factsheet accordion ── */
.tabs--nav {
  margin-top: 30px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  flex-wrap: wrap;
  padding-left: 11px;
}
.tabs--nav .tn--item {
  cursor: pointer;
  display: block;
  padding: 15px 60px;
  color: #333333;
  position: relative;
  top: 1px;
}
.tabs--nav .tn--item:hover { background: #d9d9d9; }
.tabs--nav .tn--item.active {
  border: 1px solid #d9d9d9;
  border-bottom: 1px solid #ffffff;
  color: var(--accent);
  border-radius: 5px 5px 0 0;
}

.fn--list { margin-top: 20px; }
.fn--list .fn--item_all {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #d9d9d9;
}
.fn--list .fn--item_all:last-child { border: 0; }
.fn--list p.show-box {
  cursor: pointer;
  padding-left: 30px;
  color: var(--accent);
  position: relative;
}
/* Arrow is a 12x7 mask rather than the plain PNGs used elsewhere - those
   are hardcoded to a fixed teal that doesn't track the Panel's accent
   color, which is exactly why this looked "green" regardless of the
   navy theme in use everywhere else on the page. */
.fn--list p.show-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 7px;
  background-color: var(--accent);
  -webkit-mask-image: url('/assets/images/arrow-up-blue.png');
  mask-image: url('/assets/images/arrow-up-blue.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.fn--list p.show-box.closed {
  color: #333333;
}
.fn--list p.show-box.closed::before {
  background-color: #333333;
  -webkit-mask-image: url('/assets/images/arrow-down-blue.png');
  mask-image: url('/assets/images/arrow-down-blue.png');
}

.fn--box { display: none; }
.fn--box > p { padding: 10px 10px 20px; font-size: 15px; line-height: 24px; color: #444; }
.fn--box .bm-boxes-switch-2 {
  margin-top: 30px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.fn--box .bm-boxes-switch-2 .bm-box {
  padding: 0 10px;
  width: inherit !important;
  max-width: 270px !important;
  min-width: 270px !important;
  height: auto;
  background: transparent;
}
.fn--box .bm-boxes-switch-2 .bm-box:hover { background: #dce7ea; }
/* Document tiles in accordions (Asset Management fund documents, Downloads
   factsheets and disclosures): icon pinned to the tile's left edge so every
   icon in a row lines up, and the label left-aligned in the space beside
   it - centring both made each icon start wherever its label's length put
   it, and the 110px icon left the label too narrow for most names to fit
   on one or two lines. */
.fn--box .bm-boxes-switch-2 .bm-box {
  justify-content: flex-start;
  gap: 14px;
  text-align: left;
}
.fn--box .bm-boxes-switch-2 .bm-box img { flex: none; width: 70px; height: auto; margin: 0; }
.fn--box .bm-boxes-switch-2 .bm-box p { display: block; flex: 1; min-width: 0; padding: 0; font-size: 14px; line-height: 20px; }

/* ── Asset Management page: risk notice (bold lead-in, smaller justified body) ── */
.risk-notice { text-align: justify; }
.risk-notice-heading { font-size: 15px; }
.risk-notice-body { font-size: 13px; }

/* ── Asset Management page: minimal microsite footer (no full sitemap) ── */
.am-footer {
  background: var(--accent);
  padding: 20px 0;
}
.am-footer .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.am-footer .white { color: white; }
.am-footer-links { text-align: right; color: white; }
.am-footer-links a { color: white; display: block; }

/* ── Asset Management page: centered feature blocks ── */
.feature-block { text-align: center; max-width: 700px; margin: 0 auto 30px; }
.feature-block h3 { font-family: "Roboto", sans-serif; font-weight: 400; margin-bottom: 8px; }
.feature-block p { margin: 0; }
.feature-divider { border: none; border-top: 1px solid var(--accent-light); max-width: 200px; margin: 10px auto 30px; }

/* ── Asset Management page: live NAV fund-prices table ── */
.nav-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.nav-price-table th,
.nav-price-table td {
  border: 1px solid var(--accent-light);
  padding: 8px 10px;
  text-align: center;
}
.nav-price-table th {
  background: var(--accent);
  color: white;
}
.nav-price-table tbody tr:nth-child(even) { background: #f4f9fa; }

/* ── Downloads page: media brochures list ── */
.tag {
  border-radius: 25px;
  padding: 10px 30px;
  font-size: 12px;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  background: var(--accent);
}
.see-more { float: right; color: var(--accent); margin-top: 20px; cursor: pointer; }
.inner--slim { margin: 0 auto; width: 670px; max-width: 100%; }
@media screen and (max-width: 700px) {
  .inner--slim { box-sizing: border-box; width: 100%; padding: 0 15px; }
}
.section--download .inner--slim { margin-top: 80px; }
.section--download .files { margin-bottom: 60px; }
.section--download .files .f-item {
  background: var(--accent-light);
  box-sizing: border-box;
  border-radius: 7px;
  padding: 0 20px;
  margin-top: 20px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section--download .files .f-item:hover { background: #d6e0e2; }
.section--download .files .f-item .f-item-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.section--download .files .f-item .f-item-left img { margin-right: 30px; }
.section--download .files .f-item .f-item-left p { font-weight: 500; color: #0d1928; }

/* ── Contact page ── */
.section--contact { padding: 50px 0; }
.c-maps {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 50px;
}
.cm-item {
  flex: 1;
  min-width: 180px;
}
.cm-map {
  width: 100%;
  height: 180px;
  margin-bottom: 12px;
  border-radius: 4px;
  overflow: hidden;
  /* Leaflet's own panes/controls use z-index up to 1000 (leaflet.css).
     .leaflet-container is already position:relative but has no z-index
     of its own, so those panes escape into the page's root stacking
     context and render above the sticky jump menu (z-index: 50) while
     scrolling. Giving the container an explicit z-index confines its
     children's stacking to itself. */
  z-index: 0;
}
.cm-text h4 { font-size: 18px; margin-bottom: 8px; color: var(--accent); }
.cm-text p { font-size: 14px; line-height: 22px; margin-bottom: 4px; }
.cm-text a { color: var(--accent); text-decoration: underline; }
.c-form { max-width: 700px; margin: 0 auto; }
.c-form .content { margin-bottom: 24px; }
.c-form h2 { margin-bottom: 16px; }
.c-form p { font-size: 15px; line-height: 24px; }
/* Audience choice: the radios are visually hidden (still focusable) and
   their labels act as buttons; the selected one takes the accent color. */
.main-group-radio {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}
.group-radio { position: relative; display: flex; }
.account-r {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.account-radio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid #d6dbe3;
  border-radius: 6px;
  background: #fff;
  color: #1d2433;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.account-radio:hover { border-color: var(--accent); }
.account-r:checked + .account-radio {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, white);
  color: var(--accent);
  font-weight: 500;
}
.account-r:focus-visible + .account-radio { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, white); }
.form-content { display: flex; flex-direction: column; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 13px; font-weight: 500; color: #555; }
.form-group input, .form-group textarea, .form-group select {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 15px;
  font-family: inherit;
}
.c-form .form-group label { color: #4a5568; }
.c-form .form-group input, .c-form .form-group textarea, .c-form .form-group select {
  border: 1px solid #d6dbe3;
  border-radius: 6px;
  padding: 11px 14px;
  background: #fff;
  color: #1d2433;
  transition: border-color .15s, box-shadow .15s;
}
.c-form .form-group input:hover, .c-form .form-group textarea:hover, .c-form .form-group select:hover { border-color: #b4bdcc; }
.c-form .form-group input:focus, .c-form .form-group textarea:focus, .c-form .form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, white);
}
.c-form .form-group:has(.field-error) input, .c-form .form-group:has(.field-error) textarea, .c-form .form-group:has(.field-error) select { border-color: #b00020; }
.c-form .form-group input::placeholder, .c-form .form-group textarea::placeholder { color: #8a94a6; }
.form-group textarea { resize: vertical; }
.form-group select { max-width: 100%; }
.form-row { display: flex; gap: 10px; }
.form-row .form-group { flex: 1; }
.form-group-smaller { width: 30%; }
.form-row .form-group-smaller { width: auto; flex: 0 0 140px; }
.form-group-bigger { width: 65%; }
.btn-submit-box { margin-top: 24px; }
.alert { display: none; padding: 12px 16px; border-left: 4px solid; border-radius: 0 6px 6px 0; margin-bottom: 16px; font-size: 14px; line-height: 1.5; }
.alert.show { display: block; }
.alert-danger { background: #fdf2f3; border-color: #b00020; color: #8a0019; }
.alert-success { background: color-mix(in srgb, var(--accent) 6%, white); border-color: var(--accent); color: var(--accent); }
.field-error { color: #b00020; font-size: 12px; margin: 2px 0 0; }

/* ── News page ── */
.article-content { display: flex; }
.article-content > .section--menu-subpage {
  position: sticky;
  top: 0;
  width: 220px;
  flex-shrink: 0;
  min-height: 100vh;
  align-items: flex-start;
  padding-top: 30px;
}
.article-content > .section--menu-subpage .inner { flex-direction: column; align-items: flex-start; }
.section--news .boxes { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.section--news .boxes .box {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e6e8;
  display: flex;
  flex-direction: column;
  color: #0d1928;
  transition: transform 0.25s, box-shadow 0.25s;
}
.section--news .boxes .box:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(27,42,68,.12); }
.section--news .date { padding: 8px 12px; background: var(--accent); }
.section--news .date span { color: #fff; font-size: 13px; }
.title-news { font-size: 17px; font-weight: 500; padding: 12px 12px 6px; line-height: 24px; color: var(--accent-dark); }
.section--news .box p {
  font-size: 13px;
  line-height: 20px;
  padding: 0 12px 10px;
  flex: 1;
}
.read-more {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
}
.section--news .boxes .box .read-more img { width: 12px; height: 12px; }
.section--news .boxes .box:hover .read-more { color: var(--accent); }
.box-article-thumb { overflow: hidden; }
.box-article-thumb img { width: 100%; height: 160px; object-fit: cover; display: block; }
.pagination { display: flex; gap: 8px; justify-content: center; margin: 30px 0; list-style: none; flex-wrap: wrap; }
.pagination li a { padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
.pagination .active a { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Responsive for inner pages ── */
@media screen and (max-width: 900px) {
  .lrc--box { flex-direction: column; }
  .lrc--images.one-image img { max-width: 100%; }
  .l-box { width: 45%; }
  .long-desc { font-size: 12px; }
  .section--news .boxes { grid-template-columns: repeat(2, 1fr); }
  .article-content { flex-direction: column; }
  .article-content > .section--menu-subpage { width: 100%; min-height: auto; position: relative; }
  .text-columns { flex-direction: column; }
  .c-maps { flex-direction: column; }
}
@media screen and (max-width: 600px) {
  .l-box { width: 90%; }
  .section--news .boxes { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; }
  .form-row .form-group-smaller { width: 100%; flex: none; }
  .main-group-radio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the number field's spacer label only aligns it with the dial-code select side by side */
  .form-row .form-group-bigger label { display: none; }
}

/* ── Search page ── */
.search_results { min-height: 300px; }
.search_results .infoResults { margin-top: 30px; }
.search_results .form-group {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 0;
}
.form-group-bigger { width: 80%; }
.search_results .form-group input {
  position: relative;
  padding: 0 20px;
  box-sizing: border-box;
  border-radius: 8px;
  flex: 1;
  min-width: 0;
  border: 1px solid #7eacb2;
  background: #94bdc2;
  height: 46px;
}
.search_results .form-group #searchButton {
  border: 0;
  border-radius: 0;
  position: relative;
  left: -10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  cursor: pointer;
}
.activeElement { background: #c9d5d8; }
.breadcrumbs-r { margin-top: 15px; border-top: 1px solid #cfd0cf; }
.search_results .breadcrumbs-r .clearfix {
  padding: 15px 0;
  display: flex;
  justify-content: flex-start;
  list-style: none;
}
.search_results .breadcrumbs-r .clearfix li { margin-right: 10px; }
.search_results .breadcrumbs-r .clearfix a { color: black; }
.search_results .breadcrumbs-r .clearfix a:hover { text-decoration: underline; }
.content--search h2 {
  margin-bottom: 20px;
  font-size: 35px;
  font-weight: 100;
  font-family: "Roboto", sans-serif;
  color: black;
  position: relative;
}
.content--search h2:after {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: var(--accent);
  content: "";
}
.content--search p { color: black; }
.element { padding-bottom: 20px; }
@media screen and (max-width: 600px) {
  .form-group-bigger { width: 100%; }
}