About Us: overlay title on the hero images + rename nav item to "About Us"

- Rework the About Us hero so the eyebrow, title and description are overlaid on
  the auto-rotating team images (centred, white, text-shadowed) exactly like the
  landing hero, instead of sitting in a separate white band above them. Remove the
  old page-header band and move its text into the hero. All three languages.
- Rename the "Who We Are" menu item from "Our team" to "About Us"
  (MK "За нас", SI "O nas") across all pages; footer "About us" link unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

css/pages/_about.css

@@ -467,8 +467,9 @@
    ========================================================================== */
 .about-hero {
     position: relative; left: 50%; transform: translateX(-50%);
-    width: 100vw; height: clamp(280px, 42vw, 520px);
-    overflow: hidden; margin: 4px 0 8px;
+    width: 100vw; min-height: clamp(440px, 60vw, 640px);
+    display: flex; align-items: center; justify-content: center; text-align: center;
+    overflow: hidden; margin: 0 0 8px;
 }
 .about-hero-slide {
     position: absolute; inset: 0; z-index: 1;
@@ -478,7 +479,26 @@
 .about-hero-slide.is-active { opacity: 1; }
 .about-hero-overlay {
     position: absolute; inset: 0; z-index: 2; pointer-events: none;
-    background: linear-gradient(180deg, rgba(45, 115, 140, 0.52) 0%, rgba(28, 84, 105, 0.60) 100%);
+    background: linear-gradient(180deg, rgba(45, 115, 140, 0.58) 0%, rgba(24, 74, 94, 0.66) 100%);
+}
+/* Title + text overlaid on the rotating images (like the landing hero) */
+.about-hero-content {
+    position: relative; z-index: 3;
+    max-width: 900px; padding: 64px 24px; color: #FFFFFF;
+}
+.about-hero-eyebrow {
+    display: inline-block; text-transform: uppercase; letter-spacing: 0.08em;
+    font-size: 14px; font-weight: 700; color: #FFCBB0; margin-bottom: 14px;
+    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
+}
+.about-hero-content h1 {
+    font-size: clamp(30px, 5vw, 48px); line-height: 1.15; font-weight: 700;
+    color: #FFFFFF; margin: 0 0 18px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.32);
+}
+.about-hero-lead {
+    font-size: clamp(16px, 2vw, 19px); line-height: 1.5;
+    color: rgba(255, 255, 255, 0.92); margin: 0 auto; max-width: 680px;
+    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
 }
 @media (prefers-reduced-motion: reduce) {
     .about-hero-slide { transition: none; }