/* DIFWEB-298 — /about-us/ redesign (Figma YHP2SMNoNGEJZJGN16fI3Z, frame
   22530:15059; desktop only, 1024/768/375 derived).

   Loaded only by app/about-us/page.tsx, after service-v2.css. NOT part of
   styles.min.css, so the PurgeCSS postbuild never touches it (the history
   carousel's JS-toggled classes live here safely). Every rule is scoped under
   `.page.-about-v2`: About's own sections (hero, awards, values/history) and
   About-only adjustments to the shared blocks it reuses (TopDevelopersSection,
   MethodologySection, HowWeBuildV2, CasesCarouselSection), so every other host
   of those blocks keeps its look.

   Served unversioned with max-age=86400: a CSS-only change here can look
   unshipped for up to a day in a browser that visited before (DIFWEB-228). */

.page.-about-v2 {
  --about-ground: #100502;
  --about-ink: #131426;
}

/* ── Header: white active item over the dark hero ────────────────────────────
   The theme forces `.menu-v4__item.-active` to #131426 !important with a dark
   underline, invisible on the 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 right again. (Moved from about-page.css.) */
.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;
  }
}

.page.-about-v2 .about-br-desktop { display: inline; }
@media (max-width: 1279px) {
  .page.-about-v2 .about-br-desktop { display: none; }
}

/* ── 1. Hero + awards: one photo ground (Figma 22533:19787) ─────────────────
   The comp's hero is a single frame: the photo (top −24.8%, 108.84% tall) under
   a fade to #100502 that is solid by 52.9% of the frame, plus a thin top shade;
   the text, the stat tiles and the award row all sit on it. Here it spans the
   `.about-top` wrapper (HeroSection + TopDevelopersSection). */
.page.-about-v2 .about-top {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--about-ground);
}
.page.-about-v2 .about-top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -24.8%;
  height: 108.84%;
  background: url('/images/about-us-v4/hero-bg.jpg') no-repeat center / cover;
  z-index: -2;
}
.page.-about-v2 .about-top::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(16, 5, 2, 0) 94.68%, rgba(16, 5, 2, 0.4) 98.93%),
    linear-gradient(180deg, rgba(16, 5, 2, 0) 0%, var(--about-ground) 52.89%);
  z-index: -1;
}

.page.-about-v2 .about-hero { padding: 442px 0 0; }
.page.-about-v2 .about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 634fr) minmax(0, 600fr);
  column-gap: 66px;
  align-items: end;
}
.page.-about-v2 .about-hero__text h1 {
  max-width: 619px;
  margin: 0 0 32px;
  font-family: Gilroy, sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 64px;
  color: #fff;
}
.page.-about-v2 .about-hero__text p {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.36px;
  color: #fff;
}
.page.-about-v2 .about-hero__text p + p { margin-top: 12px; }
.page.-about-v2 .about-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page.-about-v2 .about-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 44px 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.02);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  text-align: center;
  color: #fff;
}
.page.-about-v2 .about-hero__stat .value {
  font-family: Gilroy, sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 53px;
  letter-spacing: -0.88px;
}
/* Two lines tall on every tile (the comp pads the one-line labels with
   breaks) so the four values share a baseline. */
.page.-about-v2 .about-hero__stat .label {
  min-height: 36px;
  font-family: Inter, sans-serif;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.24px;
  color: rgba(255, 255, 255, 0.64);
}

/* Awards (TopDevelopersSection, shared with /services/ and /solutions/ —
   restyled here only). The comp's award row: 50px under the hero row, five
   276px cards 12px apart, r24, a 4% hairline, no fill; the "All achievements"
   pill 24px under them, then 70px to the section's end. */
.page.-about-v2 .top-developers {
  background: transparent;
  padding: 80px 0 70px;
}
.page.-about-v2 .top-developers .wrap-v4 > .items { gap: 12px; }
.page.-about-v2 .top-developers .wrap-v4 > .items .item {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  padding: 32px 40px 40px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 24px;
  background: transparent;
}
.page.-about-v2 .top-developers .wrap-v4 > .items .item div.success { margin-bottom: 40px; }
.page.-about-v2 .top-developers .wrap-v4 > .items .item .content {
  flex: 1 1 auto;
  height: auto;
  justify-content: flex-start;
  gap: 40px;
}
/* Pin the logo to the card bottom so a three-line title (Capterra) doesn't
   push its logo below the row's. */
.page.-about-v2 .top-developers .wrap-v4 > .items .item .content div.logo { margin-top: auto; }
.page.-about-v2 .top-developers .wrap-v4 > .items .item .content h5 {
  min-height: 44px;
  margin: 0;
  color: #fff;
}
.page.-about-v2 .top-developers .actions { margin-top: 24px; }
.page.-about-v2 .top-developers .more-action {
  padding: 6px 38px 6px 16px;
  border-radius: 38px;
  font-size: 14px;
  line-height: 24px;
  color: #fff;
  background-position: calc(100% - 16px) center;
  background-size: 12px 12px;
}
@media (max-width: 1279px) {
  /* No scroll rail on About (DIFWEB-298 retest #4; /services/ and
     /solutions/ keep the theme's). The rail of 240px cards showed exactly four
     at 1024 with the fifth fully off-screen and nothing hinting at it, and the
     rail itself is not focusable. A 3 + 2 grid (six half-columns, the second
     row centred) with equal row heights. */
  .page.-about-v2 .top-developers .wrap-v4 > .items .item .content h5 { min-height: 36px; }
  .page.-about-v2 .top-developers .wrap-v4 > .items {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
  }
  .page.-about-v2 .top-developers .wrap-v4 > .items .item {
    grid-column: span 2;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 28px 28px 32px;
  }
  .page.-about-v2 .top-developers .wrap-v4 > .items .item:nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 767px) {
  /* 2 + 2 + 1 */
  .page.-about-v2 .top-developers .wrap-v4 > .items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page.-about-v2 .top-developers .wrap-v4 > .items .item:nth-child(4) { grid-column: span 2; }
  .page.-about-v2 .top-developers .wrap-v4 > .items .item:nth-child(5) { grid-column: 2 / span 2; }
  .page.-about-v2 .top-developers .wrap-v4 > .items .item { padding: 24px 16px 28px; }
  .page.-about-v2 .top-developers .wrap-v4 > .items .item div.success { margin-bottom: 28px; }
  .page.-about-v2 .top-developers .wrap-v4 > .items .item .content { gap: 28px; }
}

@media (max-width: 1279px) {
  .page.-about-v2 .about-hero { padding-top: 300px; }
  .page.-about-v2 .about-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
  .page.-about-v2 .about-hero__text h1 { font-size: 48px; line-height: 56px; }
  .page.-about-v2 .top-developers { padding-top: 64px; }
}
/* Below 1024 the copy stacks over the photo: the photo is a fixed-height top
   band and the fade to the ground is solid before the paragraphs start. */
@media (max-width: 1023px) {
  .page.-about-v2 .about-top::before { top: 0; height: 900px; background-position: center top; }
  .page.-about-v2 .about-top::after {
    background: linear-gradient(180deg, rgba(16, 5, 2, 0.35) 0, rgba(16, 5, 2, 0.55) 180px, rgba(16, 5, 2, 0.88) 420px, var(--about-ground) 640px);
  }
  .page.-about-v2 .about-hero { padding-top: 220px; }
  .page.-about-v2 .about-hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .page.-about-v2 .about-hero__text h1 { font-size: 40px; line-height: 48px; }
  .page.-about-v2 .about-hero__text p { max-width: 680px; }
  .page.-about-v2 .about-hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .page.-about-v2 .about-hero__stat { justify-content: flex-start; padding: 32px 8px; }
  .page.-about-v2 .about-hero__stat .value { font-size: 40px; line-height: 48px; }
}
@media (max-width: 767px) {
  .page.-about-v2 .about-top::after {
    background: linear-gradient(180deg, rgba(16, 5, 2, 0.2) 0, rgba(16, 5, 2, 0.5) 200px, rgba(16, 5, 2, 0.88) 360px, var(--about-ground) 560px);
  }
  .page.-about-v2 .about-hero { padding-top: 140px; }
  .page.-about-v2 .about-hero__text h1 { font-size: 34px; line-height: 40px; margin-bottom: 24px; }
  .page.-about-v2 .about-hero__text p { font-size: 16px; line-height: 26px; letter-spacing: -0.32px; }
  .page.-about-v2 .about-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page.-about-v2 .about-hero__stat { justify-content: flex-start; padding: 28px 8px; border-radius: 20px; }
  .page.-about-v2 .about-hero__stat .label { min-height: 54px; }
  .page.-about-v2 .about-hero__stat .value { font-size: 36px; line-height: 44px; }
  .page.-about-v2 .top-developers { padding: 48px 0 56px; }
}

/* ── 2. Services: the comp's 80px rhythm is the theme's; nothing to add. ── */

/* ── 3. Methodology (MethodologySection variant="full") ─────────────────── */
.page.-about-v2 .sv2-method { padding: 80px 0; }
@media (max-width: 1279px) {
  .page.-about-v2 .sv2-method { padding: 64px 0; }
}
@media (max-width: 767px) {
  .page.-about-v2 .sv2-method { padding: 24px 0 48px; }
}
/* ── 4. Values · featured on · history (Figma 22533:19182) ──────────────── */
.page.-about-v2 .about-values {
  --hist-card: 390px;
  --hist-gap: 12px;
  overflow: hidden;
  padding: 140px 0;
  background: #fff;
}
.page.-about-v2 .about-values .wrap-v4 { display: flex; flex-direction: column; gap: 140px; }
.page.-about-v2 .about-values__title {
  margin: 0 0 80px;
  font-family: Gilroy, sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -1.12px;
  text-align: center;
  color: #000;
}
.page.-about-v2 .about-values__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
/* 44px + the 4px stroke = the comp's 48px inset (the Figma stroke is inside
   the 422.67 x 336 card; ours is a border, outside the padding). */
.page.-about-v2 .about-values__card {
  padding: 44px;
  border: 4px solid #f7f8fd;
  border-radius: 24px;
  background: #fff;
}
.page.-about-v2 .about-values__card img { display: block; width: 40px; height: 40px; margin-bottom: 40px; }
.page.-about-v2 .about-values__card h3 {
  margin: 0 0 16px;
  font-family: Gilroy, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.64px;
  color: var(--about-ink);
}
.page.-about-v2 .about-values__card p {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: #74757f;
}
.page.-about-v2 .about-values__subtitle {
  margin: 0;
  font-family: Gilroy, sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 48px;
  text-align: center;
  color: var(--about-ink);
}
.page.-about-v2 .about-values__featured .about-values__subtitle { margin-bottom: 64px; }
/* 5 + 4 equal cells, 64px tall, 36px apart. The nine PNGs share an 81px-tall
   canvas with different amounts of ink; the comp scales every one of them to
   the same 0.79 (≈64px box), which is what the cells do here. The theme's
   white marks are knocked to black. */
.page.-about-v2 .about-values__logos { display: flex; flex-direction: column; gap: 36px; }
.page.-about-v2 .about-values__logo-row { display: flex; justify-content: center; }
.page.-about-v2 .about-values__logo {
  flex: 1 1 0;
  min-width: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page.-about-v2 .about-values__logo img {
  height: 64px;
  width: auto;
  max-width: none;
  filter: brightness(0);
}

.page.-about-v2 .about-values__history { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.page.-about-v2 .about-values__history .about-values__subtitle { width: 100%; }
/* The rail is the column's width (the step math reads it) but paints past the
   column's right edge to the viewport, like the comp; the left edge clips. */
.page.-about-v2 .about-values__rail {
  width: 100%;
  clip-path: inset(-10px -100vw -10px 0);
}
.page.-about-v2 .about-values__track { display: flex; align-items: stretch; gap: var(--hist-gap); }
.page.-about-v2 .about-values__slide {
  flex: 0 0 var(--hist-card);
  min-width: 0;
  transition: opacity 0.3s ease;
}
.page.-about-v2 .about-values__slide.-peek { opacity: 0.4; }
.page.-about-v2 .about-values__slide.-far { opacity: 0.3; }
.page.-about-v2 .about-values__hist-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 450px;
  padding: 40px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 24px;
  background: linear-gradient(180deg, #23252b 0%, #323c59 100%);
  color: #fff;
}
.page.-about-v2 .about-values__glow {
  position: absolute;
  top: 74px;
  width: 2156.5px;
  max-width: none;
  height: 615.2px;
  z-index: -1;
  pointer-events: none;
}
.page.-about-v2 .about-values__hist-card .year {
  font-family: Gilroy, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
}
.page.-about-v2 .about-values__hist-card .hist-icon {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 100px;
  height: 100px;
}
.page.-about-v2 .about-values__hist-card .text {
  margin: 0;
  font-family: Gilroy, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
}
.page.-about-v2 .about-values__nav { display: flex; gap: 8px; }
.page.-about-v2 .about-values__nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f1f2f7;
  color: var(--about-ink);
  cursor: pointer;
}
.page.-about-v2 .about-values__nav button:hover { background: #e4e6ef; }
.page.-about-v2 .about-values__nav button:focus-visible { outline: 2px solid var(--about-ink); outline-offset: 2px; }

@media (max-width: 1279px) {
  .page.-about-v2 .about-values { padding: 112px 0; }
  .page.-about-v2 .about-values .wrap-v4 { gap: 112px; }
  .page.-about-v2 .about-values__title { font-size: 48px; line-height: 56px; margin-bottom: 56px; }
  .page.-about-v2 .about-values__card { padding: 36px; }
  .page.-about-v2 .about-values__card h3 { font-size: 28px; line-height: 32px; }
  .page.-about-v2 .about-values__logo img { height: 52px; }
}
@media (max-width: 1023px) {
  .page.-about-v2 .about-values { padding: 88px 0; }
  .page.-about-v2 .about-values .wrap-v4 { gap: 88px; }
  .page.-about-v2 .about-values__title { font-size: 40px; line-height: 48px; margin-bottom: 40px; }
  .page.-about-v2 .about-values__cards { grid-template-columns: minmax(0, 1fr); }
  .page.-about-v2 .about-values__featured .about-values__subtitle { margin-bottom: 40px; }
  .page.-about-v2 .about-values__logos { gap: 24px; }
  .page.-about-v2 .about-values__logo img { height: 44px; }
}
@media (max-width: 767px) {
  .page.-about-v2 .about-values {
    --hist-card: calc(100vw - 30px - 44px);
    padding: 64px 0;
  }
  .page.-about-v2 .about-values .wrap-v4 { gap: 64px; }
  .page.-about-v2 .about-values__title { font-size: 34px; line-height: 40px; }
  .page.-about-v2 .about-values__card { padding: 28px; }
  .page.-about-v2 .about-values__card img { margin-bottom: 28px; }
  .page.-about-v2 .about-values__card h3 { font-size: 24px; line-height: 28px; margin-bottom: 12px; }
  .page.-about-v2 .about-values__subtitle { font-size: 24px; line-height: 32px; }
  /* 3 + 3 + 3 on a phone */
  .page.-about-v2 .about-values__logos { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px 0; }
  .page.-about-v2 .about-values__logo-row { display: contents; }
  .page.-about-v2 .about-values__logo { flex: 0 0 33.333%; height: 44px; }
  .page.-about-v2 .about-values__logo img { height: 36px; }
  .page.-about-v2 .about-values__hist-card { height: 420px; padding: 28px; }
  .page.-about-v2 .about-values__hist-card .hist-icon { top: 24px; right: 24px; width: 80px; height: 80px; }
}

/* ── 5. How we build (HowWeBuildV2): white ground, the comp's 88/48 ─────── */
.page.-about-v2 .sv2-hwb { padding: 88px 0 48px; background: #fff; }
@media (max-width: 1279px) {
  .page.-about-v2 .sv2-hwb { padding: 64px 0 40px; }
}
@media (max-width: 767px) {
  .page.-about-v2 .sv2-hwb { padding: 40px 0 24px; }
}

/* ── 6. Discovery banner (CtaBannerV2): on white, like the comp ────────── */
.page.-about-v2 .sv2-banner { background: #fff; }

/* ── 7. Executive team: the bio card opens on keyboard focus as on hover
   (DIFWEB-298 retest #8). Each .member is tabIndex=0 (TeamSection); nothing
   changes at rest. The theme's hover rules are .-about-us-v4-scoped. ─────── */
.page.-about-v2 .exec-team .member:focus-within .member-desc {
  top: -12px;
  opacity: 1;
}
.page.-about-v2 .exec-team .member:focus-visible { outline: none; }
/* The bio overhangs the member by 24px each side; keep it clear of the rail edge when focus scrolls it in. */
.page.-about-v2 .exec-team .member { scroll-margin-inline: 24px; }
.page.-about-v2 .exec-team .member:focus-visible .member-desc {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (max-width: 1279px) {
  .page.-about-v2 .exec-team .member:focus-within .member-desc {
    top: 0;
    bottom: 0;
  }
}

/* ── 10. Success stories (CasesCarouselSection, shared by ~12 pages):
   48px heading and 120px above it (SPEC D8; "See case study" and the
   "See more cases" banner stay). */
.page.-about-v2 .cases-carousel-v4 { padding-top: 120px; }
.page.-about-v2 .cases-carousel-v4 .heading .title {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.96px;
}
@media (max-width: 1279px) {
  .page.-about-v2 .cases-carousel-v4 { padding-top: 96px; }
  .page.-about-v2 .cases-carousel-v4 .heading .title { font-size: 40px; line-height: 48px; }
}
@media (max-width: 767px) {
  .page.-about-v2 .cases-carousel-v4 { padding-top: 64px; }
  .page.-about-v2 .cases-carousel-v4 .heading .title { font-size: 32px; line-height: 36px; letter-spacing: -0.64px; }
}