/* About page (/about-us) — DIF-630 / DES-59 page-scoped polish.
   Everything here is scoped to `.page.-about-us-v4` so the shared Header and
   TopDevelopersSection keep their existing look on every other host. */

/* ── Transparent hero header ────────────────────────────────────────────────
   The wrapper carries `-transparent-header` (see app/about-us/page.tsx), which
   the theme already turns into a transparent-over-hero bar with a white logo +
   white nav (same mechanism home `-home-v5` and the service pages use). The one
   gap: the active nav item ("About us") is forced dark (#131426 !important) with
   a dark underline — invisible on the dark photo. Whiten it in the top (not
   -fixed / -hover / -open) state; once scrolled the standard white bar takes
   over and the dark active style is correct again. */
.page.-about-us-v4.-transparent-header .header-v4:not(.-fixed):not(:hover):not(.-open) .menu-v4__item.-active {
  color: #fff !important;
}
@media (min-width: 1280px) {
  .page.-about-us-v4.-transparent-header .header-v4:not(.-fixed):not(:hover):not(.-open) .menu-v4__item.-active {
    border-bottom-color: #fff !important;
  }
}

/* ── Awards over the hero photo (Figma DES-59) ───────────────────────────────
   The comp does NOT put the badges on a panel: they float over the dark bottom
   of the hero photo with only a hairline outline and no fill. So on About we
   (a) drop the theme's navy `.top-developers` band and instead continue the
   hero image under a heavy dark overlay — starting at the hero's own ending
   opacity (0.9) so the seam is invisible — and (b) give each badge a hairline
   border with a transparent interior (no glass fill). Scoped to About;
   services/solutions keep the plain navy row. */
.page.-about-us-v4 .top-developers {
  background:
    linear-gradient(180deg, rgba(9, 8, 12, 0.92) 0%, rgba(7, 6, 10, 0.985) 62%, #07060a 100%),
    url('/images/about-us-v4/hero-bg.jpg') no-repeat center bottom / cover;
}
.page.-about-us-v4 .top-developers .wrap-v4 > .items {
  gap: 20px;
}
.page.-about-us-v4 .top-developers .wrap-v4 > .items .item {
  min-width: 0;
  max-width: none;
  flex: 1 1 0;
  padding: 28px 28px 26px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: transparent;
}
/* tighten the internal rhythm so the card doesn't look empty */
.page.-about-us-v4 .top-developers .wrap-v4 > .items .item div.success {
  margin-bottom: 24px;
}

@media (max-width: 1279px) {
  /* keep the mobile scroll-rail behaviour, just give the cards a fixed width
     and restore the inter-card gap the theme's negative margins would eat */
  .page.-about-us-v4 .top-developers .wrap-v4 > .items .item {
    flex: 0 0 auto;
    min-width: 240px;
    max-width: 240px;
  }
}