/* Version 5: deliberately compact, simple typography and a visible language switch. */
body,
.en {
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 16px;
  font-weight: 400 !important;
}

h1,
h2,
h3,
.hero h1,
.stats b {
  font-family: Tahoma, Arial, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.hero h1 {
  font-size: clamp(38px, 4.1vw, 58px) !important;
  line-height: 1.55 !important;
}

h2,
.map-heading h2 {
  font-size: clamp(32px, 3.5vw, 52px) !important;
  line-height: 1.55 !important;
}

h3,
.cards h3 {
  font-size: 24px !important;
}

.stats b {
  font-size: 25px !important;
}

.language-switch {
  width: auto !important;
  min-width: 86px;
  height: 36px !important;
  padding: 5px 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-family: Tahoma, Arial, sans-serif !important;
}

.language-switch b {
  display: block !important;
  font-size: 11px;
  font-weight: 400;
}

.value-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* Keep the vision copy and image visually balanced. */
#vision > img {
  min-height: 560px;
}

#vision > div {
  padding-top: 65px;
  padding-bottom: 65px;
}

#vision > div > p:not(.kicker),
#vision li {
  font-size: 16px;
  line-height: 2;
}

#vision h3 {
  font-size: 24px !important;
  margin-top: 26px;
  margin-bottom: 10px;
}

@media (max-width: 560px) {
  .hero h1 { font-size: 36px !important; }
  h2, .map-heading h2 { font-size: 30px !important; }
  .language-switch { min-width: 78px; }
  .value-grid { grid-template-columns: 1fr !important; }
  #vision > img { min-height: 360px; }
  #vision > div { padding-top: 50px; padding-bottom: 50px; }
  #vision > div > p:not(.kicker), #vision li { font-size: 15px; }
}