/* ==========================================================================
   Legacy modernization for AI — page stylesheet

   Contents (grep the file for "N." section headers):
   1  Shared layout — sections, reviews / case studies / FAQ
   2  About project stages — tabs + mobile accordion
   3  Strategic partner strip + client logos
   4  Why trust Azati — about-glance metrics grid
   5  Why trust Azati — legacy-compact modifier
   6  Readiness assessment CTA
   7  Engagement model
   8  Modernization framework
   9  Managed AI timeline
   10 Operationalize AI — glass accordion
   11 Signals — stats, checklist, when to modernize
   12 Specialty & benchmark — metrics + track tabs + CTA
   13 Track record — custom tabs
   14 Recognition & certifications
   15 Industry-specific solutions
   16 EU & US geo strategy (+ flow strip, geo CTA, expand/collapse, quote)
   17 Utilities — inline links

   Rule order and declarations are unchanged for cascade parity.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared layout — sections, reviews / case studies / FAQ, case study links
   (formerly bundled with p-qa-complex-systems.css on this route)
   -------------------------------------------------------------------------- */

section {
  margin-bottom: 0;
}

.section-reviews-homepage,
.section-case-studies,
.section-faq {
  padding: var(--spacing-80) 0;
}

.section-case-studies__description a {
  color: var(--accent-orange);
  text-decoration: underline;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

.section-case-studies__description a:hover {
  color: var(--accent-orange);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   3. Strategic partner strip + client logos (reuses about-clients BEM)
   -------------------------------------------------------------------------- */

.legacy-partner {
  padding: 80px 0;
  background: #f5f5f5;
}

.legacy-partner__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-40);
  align-items: center;
}

.legacy-partner__content h2 {
  margin-bottom: var(--spacing-24);
}

.legacy-partner__content h2 span {
  color: var(--color-brand-terracotta);
}

.legacy-partner__lead {
  color: var(--secondary-text);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
  margin: 0;
}

.legacy-partner__lead a {
  color: var(--color-brand-teal);
  text-decoration: none;
  transition: color 0.3s ease;
}

.legacy-partner__lead a:hover,
.legacy-partner__lead a:focus-visible {
  color: var(--color-brand-teal-300);
  text-decoration: none;
}

/* --- Partner strip: client logos (about-clients BEM, p-about parity) --- */

.legacy-partner .about-clients__logos {
  position: relative;
  height: auto;
  overflow: visible;
  padding: 18px 10px;
  align-self: center;
}

.legacy-partner .about-clients__logos::before,
.legacy-partner .about-clients__logos::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 160px;
  pointer-events: none;
  z-index: 2;
  display: none;
}

.legacy-partner .about-clients__logos-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: var(--spacing-40);
  gap: 48px 40px;
}

.legacy-partner .about-clients__logos-wrap img {
  width: auto;
  max-width: 180px;
  max-height: 42px;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.56;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
  animation: legacy-clients-logo-float 6s ease-in-out infinite;
  transform-origin: center;
}

.legacy-partner .about-clients__logos-wrap img:nth-child(2n) {
  animation-duration: 7s;
  animation-delay: -1.2s;
}

.legacy-partner .about-clients__logos-wrap img:nth-child(3n) {
  animation-duration: 6.6s;
  animation-delay: -2.1s;
}

.legacy-partner .about-clients__logos-wrap img:nth-child(4n) {
  animation-duration: 7.4s;
  animation-delay: -0.8s;
}

.legacy-partner .about-clients__logos-wrap img:hover,
.legacy-partner .about-clients__logos-wrap img:focus-visible {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-1px);
  animation-play-state: paused;
}

@keyframes legacy-clients-logo-float {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -4px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }}

@media (max-width: 1280px) {
  .legacy-partner .about-clients__logos-wrap {
    gap: var(--spacing-40);
    padding: 20px 12px;
  }

  .legacy-partner .about-clients__logos-wrap img {
    max-width: 160px;
    max-height: 38px;
  }}

@media (max-width: 980px) {
  .legacy-partner__grid {
    grid-template-columns: 1fr;
  }

  .legacy-partner .about-clients__logos {
    height: auto;
    padding: 0;
  }

  .legacy-partner .about-clients__logos::before,
  .legacy-partner .about-clients__logos::after {
    display: none;
  }

  .legacy-partner .about-clients__logos-wrap {
    gap: var(--spacing-24);
    padding: 12px 0;
  }

  .legacy-partner .about-clients__logos-wrap img {
    max-width: 120px;
    max-height: 30px;
  }}

@media (max-width: 680px) {
  .legacy-partner .about-clients__logos-wrap {
    gap: var(--spacing-16);
    padding: 8px 0;
  }

  .legacy-partner .about-clients__logos-wrap img {
    max-width: 100px;
    max-height: 24px;
  }}

@media (prefers-reduced-motion: reduce) {
  .legacy-partner .about-clients__logos-wrap img {
    animation: none;
  }}

/* --------------------------------------------------------------------------
   4. Why trust Azati — about-glance metrics grid (dark band)
   -------------------------------------------------------------------------- */

.about-glance {
  padding: var(--spacing-80) 0;
  background: var(--color-brand-navy);
  color: var(--white-text);
}

.about-glance__grid {
  display: flex;
  flex-direction: column;
}

.about-glance__title {
  margin: 0 0 var(--spacing-40);
  max-width: 860px;
}

.about-glance__title span {
  color: var(--accent-orange);
}

.about-glance__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}

.about-glance__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-16);
}

.about-glance__list::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - (var(--spacing-16) / 2));
  height: 1px;
  background: linear-gradient(90deg, rgba(251, 133, 0, 0), rgba(251, 133, 0, 0.55), rgba(251, 133, 0, 0));
  pointer-events: none;
}

.about-glance__item {
  position: relative;
  display: grid;
  padding: var(--spacing-16);
  gap: 8px;
}

.about-glance__item::after {
  content: "";
  position: absolute;
  right: calc(var(--spacing-16) * -0.5);
  top: 14%;
  width: 1px;
  height: 72%;
  background: linear-gradient(180deg, rgba(251, 133, 0, 0), rgba(251, 133, 0, 0.55), rgba(251, 133, 0, 0));
  pointer-events: none;
}

.about-glance__item:nth-child(4n)::after {
  display: none;
}

.about-glance__value {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(28px, 2vw, 64px);
  line-height: 1.3;
  font-weight: var(--font-weight-600);
  margin: 0;
}

.about-glance__label {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .about-glance__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-glance__list::before {
    display: none;
  }

  .about-glance__item:nth-child(odd)::after {
    display: block;
  }

  .about-glance__item:nth-child(2n)::after {
    display: none;
  }

  .about-glance__item::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: calc(var(--spacing-16) * -0.5);
    height: 1px;
    background: linear-gradient(90deg, rgba(251, 133, 0, 0), rgba(251, 133, 0, 0.55), rgba(251, 133, 0, 0));
    pointer-events: none;
  }

  .about-glance__item:nth-last-child(-n + 2)::before {
    display: none;
  }}

@media (max-width: 640px) {
  .about-glance__list {
    grid-template-columns: 1fr;
  }

  .about-glance__list::before {
    display: none;
  }

  .about-glance__item::after {
    display: block;
    right: auto;
    left: 12%;
    top: auto;
    bottom: calc(var(--spacing-16) * -0.5);
    width: 76%;
    height: 1px;
    background: linear-gradient(90deg, rgba(251, 133, 0, 0), rgba(251, 133, 0, 0.55), rgba(251, 133, 0, 0));
  }

  .about-glance__item:nth-child(2n)::after {
    display: block;
  }

  .about-glance__item:last-child::after {
    display: none;
  }}

/* --------------------------------------------------------------------------
   5. Why trust Azati — legacy-compact modifier (denser type + radial wash)
   -------------------------------------------------------------------------- */

.about-glance--legacy-compact {
  position: relative;
}

.about-glance--legacy-compact .about-glance__value {
  font-size: clamp(22px, 2vw, 52px);
  line-height: 1.28;
}

.about-glance--legacy-compact .about-glance__label {
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.45;
}

.about-glance--legacy-compact .about-glance__value--text {
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   6. Readiness assessment CTA — moved to shared component _readiness-cta.css
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   7. Engagement model — co-innovation copy + model card
   -------------------------------------------------------------------------- */

.legacy-engagement {
  padding: var(--spacing-80) 0;
  background: #fff;
}
.legacy-engagement__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}
.legacy-engagement__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--spacing-64);
  align-items: center;
}

.legacy-engagement__intro h2 {
  margin: 0 0 var(--spacing-24);
  color: var(--primary-text);
}

.legacy-engagement__intro h2 span {
  color: var(--color-brand-terracotta);
}

.legacy-engagement__lead {
  margin: 0 0 var(--spacing-24);
  font-family: var(--font-body);
  font-weight: var(--font-weight-500);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--secondary-text);
}

.legacy-engagement__statement {
  padding-left: var(--spacing-16);
  border-left: 3px solid var(--color-brand-terracotta-600);
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: var(--font-weight-600);
  font-size: var(--fs-manifesto);
  line-height: var(--lh-manifesto);
  letter-spacing: var(--ls-manifesto);
  color: var(--primary-text);
}

.legacy-engagement__text {
  margin: 0;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.65;
}

.legacy-engagement__model {
  padding: var(--spacing-32);
  background: var(--secondary-bg);
  border-top: 3px solid var(--color-brand-terracotta-600);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}

.legacy-engagement__model-top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.legacy-engagement__model-label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: var(--font-weight-700);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--secondary-text);
}

.legacy-engagement__model-title {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: var(--font-weight-600);
  margin-bottom: var(--spacing-16);
  line-height: 1.2;
  color: var(--primary-text);
}

.legacy-engagement__model-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.legacy-engagement__model-list li {
  position: relative;
  padding-left: 18px;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.5;
  color: var(--primary-text);
}

.legacy-engagement__model-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-terracotta);
}

.legacy-engagement__badge {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(251, 133, 0, 0.12);
  border: 1px solid rgba(251, 133, 0, 0.3);
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: var(--font-weight-700);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--accent-orange);
}

@media (max-width: 900px) {
  .legacy-engagement__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-40);
  }}

/* --------------------------------------------------------------------------
   8. Modernization framework — four-phase grid
   -------------------------------------------------------------------------- */

.legacy-framework {
  padding: var(--spacing-80) 0;
}

.legacy-framework__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--spacing-40);
}

.legacy-framework__header h2 {
  margin: 0 0 var(--spacing-16);
  color: var(--primary-text);
}

.legacy-framework__header h2 span {
  color: var(--color-brand-terracotta);
}

.legacy-framework__subtitle {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.5;
  color: var(--secondary-text);
}

.legacy-framework__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: #e2e4eb;
  border-radius: 16px;
  overflow: hidden;
  list-style: none;
  margin: 0 0 var(--spacing-24);
  padding: 0;
}

.legacy-framework__step {
  background: #fff;
  padding: var(--spacing-32) var(--spacing-24);
}

.legacy-framework__step--featured {
  background: #fff;
  box-shadow: inset 0 3px 0 var(--color-brand-terracotta-700);
}

.legacy-framework__step-top {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-24);
}

.legacy-framework__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-brand-terracotta-700);
  color: #fff;
  font-size: 14px;
  font-weight: var(--font-weight-700);
  letter-spacing: 0.04em;
}

.legacy-framework__step-phase {
  font-size: 12px;
  font-weight: var(--font-weight-600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary-text);
}

.legacy-framework__step-title {
  margin: 0 0 var(--spacing-16);
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: var(--font-weight-600);
  line-height: 1.35;
  color: var(--primary-text);
}

.legacy-framework__step-description{
    margin: 0 0 var(--spacing-16);
    font-size: clamp(14px, 2vw, 16px);
    line-height: 1.5;
}

.legacy-framework__step-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.legacy-framework__step-list li {
  position: relative;
  padding-left: 14px;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.5;
}

.legacy-framework__step-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-brand-terracotta);
}

@media (max-width: 1100px) {
  .legacy-framework__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }}

@media (max-width: 560px) {
  .legacy-framework__steps {
    grid-template-columns: 1fr;
  }}

/* --------------------------------------------------------------------------
   9. Managed AI timeline — vertical steps (shared BEM prefix)
   -------------------------------------------------------------------------- */

.section-managed-ai-timeline {
  padding: var(--spacing-80) 0;
  background: var(--primary-bg);
}

.section-managed-ai-timeline__inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
}

.section-managed-ai-timeline__header {
  text-align: center;
  margin-bottom: var(--spacing-40);
}

.section-managed-ai-timeline__header-title {
  color: var(--primary-text);
  margin: 0 auto;
}

.section-managed-ai-timeline__item {
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  gap: var(--spacing-24);
  padding-bottom: var(--spacing-24);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.section-managed-ai-timeline__item:last-child {
  border-bottom: none;
}

.section-managed-ai-timeline__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.section-managed-ai-timeline__month {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--secondary-text);
}

.section-managed-ai-timeline__label {
  color: var(--color-brand-terracotta);
  text-transform: none;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: var(--font-weight-600);
}

.section-managed-ai-timeline__title {
  margin: 0 0 var(--spacing-16);
  line-height: 1.3;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: var(--font-weight-600);
  color: var(--primary-text);
}

.section-managed-ai-timeline__text {
  margin: 0 0 var(--spacing-16);
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.6;
  color: var(--secondary-text);
}

.section-managed-ai-timeline__list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.section-managed-ai-timeline__list li {
  position: relative;
  padding-left: 14px;
  color: var(--primary-text);
  line-height: 1.5;
}

.section-managed-ai-timeline__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-terracotta-300);
}

/* --------------------------------------------------------------------------
   10. Operationalize AI — glass accordion + intro column
   -------------------------------------------------------------------------- */

.legacy-advantages {
  padding: var(--spacing-80) 0;
  background: var(--color-brand-navy);
  position: relative;
}

.legacy-advantages__title span {
  color: var(--accent-orange);
}

.legacy-advantages__choose {
  display: flex;
  gap: var(--spacing-80);
  justify-content: space-between;
  align-items: start;
  border-top: none;
}

.legacy-advantages__title {
  margin: 0 0 var(--spacing-24);
  color: var(--white-text);
}

.legacy-advantages__intro {
  max-width: 800px;
  margin-bottom: var(--spacing-24);
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.legacy-advantages__glass {
  padding: 8px;
  border-radius: 16px;
  max-width: 800px;
  background: #0D1326;
  border: 1px solid color-mix(in srgb, var(--color-brand-teal) 20%, transparent);
}

.legacy-advantages__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--spacing-16);
}

.legacy-advantages__item:last-child {
  border-bottom: none;
}

.legacy-advantages__summary {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  cursor: pointer;
  padding: var(--spacing-24);
  position: relative;
  font-family: inherit;
  font-size: clamp(17px, 1.05vw, 20px);
  font-weight: var(--font-weight-600);
  line-height: 1.35;
  color: var(--white-text);
  text-align: left;
  background: transparent;
  border: none;
  user-select: none;
  padding-right: 64px;
}

.legacy-advantages__summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  font-weight: var(--font-weight-500);
  color: var(--color-brand-teal);
  background: #242425;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.legacy-advantages__item.is-open .legacy-advantages__summary::after {
  content: "\2212";
  color: var(--white-text);
  background: var(--color-brand-teal);
  border-color: rgba(255, 255, 255, 0.12);
}

.legacy-advantages__collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease;
}

.legacy-advantages__item.is-open .legacy-advantages__collapse {
  grid-template-rows: 1fr;
}

.legacy-advantages__collapse-inner {
  min-height: 0;
  overflow: hidden;
}

.legacy-advantages__body {
  padding: 0 var(--spacing-24) var(--spacing-24);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  color: var(--white-text);
}
.legacy-advantages__body p {
  margin: 0;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
}

.legacy-advantages .legacy-inline-link {
  color: var(--color-brand-teal);
  text-decoration: none;
}
.legacy-advantages .legacy-inline-link:hover,
.legacy-advantages .legacy-inline-link:focus-visible {
  color: var(--color-brand-teal-300);
  text-decoration: none;
}

.legacy-advantages__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8) var(--spacing-24);
  color: var(--white-text);
  margin-bottom: var(--spacing-24);
}

.legacy-advantages__list li {
  position: relative;
  padding-left: 18px;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.4;
}

.legacy-advantages__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-terracotta-300);
}

@media (min-width: 981px) {
  .legacy-advantages__choose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-80);
    align-items: start;
  }

  .legacy-advantages__intro-block {
    width: 100%;
    max-width: none;
  }

  .legacy-advantages__glass {
    width: 100%;
    justify-self: stretch;
    max-width: 800px;
  }}

@media (max-width: 980px) {
  .legacy-advantages__choose {
    flex-direction: column;
    margin-top: 0;
    gap: var(--spacing-40);
    padding-top: 0;
  }}

@media (max-width: 768px) {
  .section-managed-ai-timeline__item {
    grid-template-columns: 1fr;
  }}

@media (prefers-reduced-motion: reduce) {
  .legacy-advantages__collapse {
    transition-duration: 0.01ms;
  }}

/* --------------------------------------------------------------------------
   11. Signals — stats, checklist, when to modernize
   -------------------------------------------------------------------------- */

.legacy-signals {
  padding: var(--spacing-80) 0;
  background: #fff;
}

.legacy-signals__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--spacing-40);
}

.legacy-signals__header h2 {
  margin: 0 0 var(--spacing-16);
  color: var(--primary-text);
}

.legacy-signals__header h2 span {
  color: var(--color-brand-terracotta);
}

.legacy-signals__subtitle {
  margin: 0;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.65;
  color: var(--secondary-text);
}

.legacy-signals__stats {
  display: block;
  max-width: 760px;
  margin: 0 auto var(--spacing-40);
}

/* Technology-focused services  */

.about-value-proposition {
  padding-top: 80px;
  padding-bottom: 80px;
}

#technology-focused-services{
  margin-bottom: 0;
}

.about-value-proposition__inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--spacing-80);
  align-items: start;
  margin-bottom: var(--spacing-40);
}

.about-value-proposition__intro h2 {
  margin: 0 0 var(--spacing-24);
}

.about-value-proposition__intro h2 span {
  color: var(--color-brand-terracotta);
}

.about-value-proposition__intro p {
  margin: 0 auto;
  color: var(--secondary-text);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
}

.about-value-proposition__content p {
  margin: 0 0 var(--spacing-24);
  color: var(--secondary-text);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
}

.about-value-proposition__content ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-value-proposition__content ul li {
  position: relative;
  padding: 0 0 0 20px;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.45;
}

.about-value-proposition__content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-terracotta);
  box-shadow: 0 0 0 3px var(--color-brand-terracotta-50);
}

.about-value-proposition a {
  color: var(--color-brand-teal);
  text-decoration: none;
  transition: all 0.3s ease;
}

.about-value-proposition a:hover,
.about-value-proposition a:focus-visible {
  color: var(--color-brand-teal-300);
  text-decoration: none;
}

.about-value-proposition__caveat-note {
  margin: 0 0 var(--spacing-16);
  color: var(--secondary-text);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
}

.about-value-proposition__caveat-sources {
  margin: var(--spacing-16) 0 0;
  font-size: 14px;
  opacity: 0.7;
}

@media (max-width: 767px) {
  .about-value-proposition__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-24);
  }
}

/* --- Signals: outcomes row (divided metrics, about-outcomes language) --- */

.legacy-signals__stats--outcomes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  max-width: 900px;
}

.legacy-signals__stats--outcomes .legacy-signals__stat {
  text-align: center;
  padding: var(--spacing-16) clamp(12px, 2vw, 24px);
  position: relative;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.legacy-signals__stats--outcomes .legacy-signals__stat::before {
  content: "";
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 0;
  width: 1px;
  height: auto;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    rgba(251, 133, 0, 0.7) 50%,
    #ffffff 100%
  );
  display: none;
}

.legacy-signals__stats--outcomes .legacy-signals__stat:not(:first-child)::before {
  display: block;
}

.legacy-signals__stat-value {
  margin: 0 0 var(--spacing-16);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: var(--font-weight-600);
  line-height: 1.15;
  color: var(--color-brand-terracotta);
}

.legacy-signals__stat-label {
  margin: 0;
  font-size: clamp(14px, 1.35vw, 16px);
  line-height: 1.4;
  color: var(--secondary-text);
  font-weight: var(--font-weight-400);
}

.legacy-signals__stat-label a {
  color: var(--color-brand-teal);
  text-decoration: none;
  transition: color 0.3s ease;
}

.legacy-signals__stat-label a:hover,
.legacy-signals__stat-label a:focus-visible {
  color: var(--color-brand-teal-300);
  text-decoration: none;
}

.legacy-signals__check {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--spacing-64);
  align-items: start;
  padding-top: var(--spacing-40);
  border-top: 1px solid #e8eaef;
}

.legacy-signals__check-title {
  margin: 0 0 var(--spacing-16);
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: var(--font-weight-600);
  line-height: 1.3;
  color: var(--primary-text);
}

.legacy-signals__check-lead {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.65;
  color: var(--secondary-text);
}

.legacy-signals__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.legacy-signals__checklist li {
  padding: var(--spacing-16) var(--spacing-24);
  background: var(--secondary-bg);
  border-left: 3px solid var(--color-brand-terracotta);
  border-radius: 0 10px 10px 0;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.5;
  color: var(--primary-text);
  transition: background 0.2s ease;
}

.legacy-signals__checklist li:hover {
  background: color-mix(in srgb, var(--color-brand-terracotta-50) 20%, transparent);
}

@media (max-width: 900px) {
  .legacy-signals__check {
    grid-template-columns: 1fr;
    gap: var(--spacing-32);
  }}

@media (max-width: 640px) {
  .legacy-signals__stats--outcomes {
    grid-template-columns: 1fr;
  }

  .legacy-signals__stats--outcomes .legacy-signals__stat::before {
    display: none !important;
  }

  .legacy-signals__stats--outcomes .legacy-signals__stat:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: var(--spacing-24);
    margin-bottom: var(--spacing-24);
  }}

/* --------------------------------------------------------------------------
   12. Specialty & benchmark — metrics grid, track tabs, CTA
   -------------------------------------------------------------------------- */

.legacy-benchmark {
  padding: var(--spacing-80) 0;
  background: #fff;
}

.legacy-benchmark__header {
  max-width: 900px;
  margin: 0 auto var(--spacing-40);
  text-align: center;
}

.legacy-benchmark__title {
  margin: 0 auto var(--spacing-24) auto;
}
.legacy-benchmark__title span {
  color: var(--color-brand-terracotta);
}
.legacy-benchmark__lead {
  margin: 0;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.65;
  color: var(--secondary-text);
}
.legacy-benchmark__lead a {
  color: var(--color-brand-teal);
  text-decoration: none;
  transition: color 0.3s ease;
}
.legacy-benchmark__lead a:hover,
.legacy-benchmark__lead a:focus-visible {
  color: var(--color-brand-teal-300);
  text-decoration: none;
}

.legacy-benchmark__metrics-title,
.legacy-benchmark__tabs-heading {
  margin: 0 auto var(--spacing-40) auto;
  text-align: center;
  font-size: clamp(24px, 2vw, 28px);
  font-weight: var(--font-weight-600);
  line-height: 1.3;
  color: var(--primary-text);
}

.legacy-benchmark__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  margin: 0 0 var(--spacing-40);
}

.legacy-benchmark__metric-card {
  position: relative;
  text-align: center;
  background: #fff;
  padding: var(--spacing-16) clamp(12px, 2vw, 20px);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  align-items: center;
}

/* --- Benchmark: vertical dividers between metric cards --- */

.legacy-benchmark__metric-card:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    rgba(251, 133, 0, 0.7) 50%,
    #ffffff 100%
  );
}

.legacy-benchmark__metric-label {
  margin: 0;
  font-size: 12px;
  font-weight: var(--font-weight-600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary-text);
}

.legacy-benchmark__metric-value {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: var(--font-weight-600);
  line-height: 1.1;
}
.legacy-benchmark__metric-value a {
  color: var(--color-brand-teal);
  text-decoration: none;
  transition: all 0.3s ease;
}
.legacy-benchmark__metric-value a:hover,
.legacy-benchmark__metric-value a:focus-visible {
  color: var(--color-brand-teal-300);
  text-decoration: none;
}
.legacy-benchmark__metric-detail {
  margin: 0;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.4;
  color: var(--secondary-text);
}

/* --------------------------------------------------------------------------
   13. Track record — custom tabs: see static/css/_rail-tabs.css
   -------------------------------------------------------------------------- */

.legacy-benchmark__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-40);
  padding: var(--spacing-24) 0;
  border-top: 1px solid #e2e4eb;
}
.legacy-benchmark__cta-text span {
color: var(--accent-orange);
}
.legacy-benchmark__cta-text {
  margin: 0;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.6;
  color: var(--primary-text);
  font-weight: var(--font-weight-600);
}

.legacy-benchmark__cta-btn {
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  .legacy-benchmark__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legacy-benchmark__metric-card::before {
    display: none;
  }

  .legacy-benchmark__metric-card:nth-child(2n)::before {
    display: block;
  }}

@media (max-width: 680px) {
  .legacy-benchmark__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-16);
  }}

@media (max-width: 480px) {
  .legacy-benchmark__metrics {
    grid-template-columns: 1fr;
  }

  .legacy-benchmark__metric-card::before {
    display: none !important;
  }

  .legacy-benchmark__metric-card:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: var(--spacing-24);
    margin-bottom: var(--spacing-24);
  }}

/* --------------------------------------------------------------------------
   14. Recognition & certifications (Clutch badges strip)
   -------------------------------------------------------------------------- */

/* .about-recognition* rules moved to shared _recognition-badges.css */
/* --------------------------------------------------------------------------
   15. Industry-specific solution cards
   moved to shared _legacy-industry-solutions.css
   -------------------------------------------------------------------------- */

/* --- Process flow cards (`section-flow` include) --- */

.section-flow {
  padding: var(--spacing-80) 0;
  background: var(--white-text);
}

/* --------------------------------------------------------------------------
   16. EU & US geo strategy — two-column cards + responsive min-heights
   -------------------------------------------------------------------------- */

.legacy-geo-strategy {
  padding: var(--spacing-80) 0;
  background: #fff;
}

.legacy-geo-strategy__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--spacing-40);
}

.legacy-geo-strategy__header h2 {
  margin: 0;
  color: var(--primary-text);
}

.legacy-geo-strategy__header h2 span {
  color: var(--color-brand-terracotta);
}

.legacy-geo-strategy__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-24);
  align-items: start;
}

@media (min-width: 901px) {
  .legacy-geo-strategy__card {
    min-height: var(--legacy-geo-card-min-h, auto);
  }}

.legacy-geo-strategy__card {
  display: flex;
  flex-direction: column;
  background: var(--secondary-bg);
  border-top: 3px solid var(--color-brand-terracotta-600);
  border-radius: 16px;
  overflow: hidden;
}

.legacy-geo-strategy__card-top {
  padding: var(--spacing-32);
  border-bottom: 1px solid #e2e4eb;
}

.legacy-geo-strategy__tag {
  display: inline-block;
  margin-bottom: var(--spacing-16);
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(171, 61, 17, 0.1);
  border: 1px solid rgba(171, 61, 17, 0.28);
  font-size: 12px;
  font-weight: var(--font-weight-600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-terracotta);
}

.legacy-geo-strategy__card-title {
  margin: 0 0 var(--spacing-16);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: var(--font-weight-600);
  line-height: 1.3;
  color: var(--primary-text);
}

.legacy-geo-strategy__card-lead {
  margin: 0 0 var(--spacing-16);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.65;
  color: var(--secondary-text);
}

.legacy-geo-strategy__card-focus {
  margin: 0;
  padding-left: var(--spacing-16);
  border-left: 3px solid var(--color-brand-terracotta-600);
  font-size: clamp(14px, 2vw, 16px);
  font-weight: var(--font-weight-600);
  line-height: 1.5;
  color: var(--primary-text);
}

.legacy-geo-strategy__card-body {
  padding: var(--spacing-32);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.legacy-geo-strategy__subsection {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.legacy-geo-strategy__subsection-label {
  margin-bottom: var(--spacing-8);
  font-size:14px;
  font-weight: var(--font-weight-600);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--secondary-text);
}

.legacy-geo-strategy__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.legacy-geo-strategy__list li {
  position: relative;
  padding-left: 16px;
  font-size:14px;
  line-height: 1.4;
}

.legacy-geo-strategy__list-lead {
  font-weight: var(--font-weight-700);
  color: var(--primary-text);
}

.legacy-geo-strategy__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-brand-terracotta-300);
}

.legacy-geo-strategy__value-prop {
  margin: 0;
  padding: var(--spacing-16);
  background: rgba(171, 61, 17, 0.1);
  border: 1px solid var(--color-brand-terracotta);
  border-radius: 10px;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: var(--font-weight-600);
  line-height: 1.4;
  color: var(--primary-text);
}

@media (max-width: 900px) {
  .legacy-geo-strategy__grid {
    grid-template-columns: 1fr;
  }}

@media (max-width: 640px) {
  .legacy-geo-strategy__card-top,
  .legacy-geo-strategy__card-body {
    padding: var(--spacing-24);
  }}

/* --- Geo strategy: bottom CTA strip --- */

.legacy-geo-cta {
  position: relative;
  overflow: hidden;
  background: var(--color-brand-navy);
}

.legacy-geo-cta::before,
.legacy-geo-cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(28vw, 320px);
  pointer-events: none;
}

@media (min-width: 769px) {
  .legacy-geo-cta::before,
  .legacy-geo-cta::after {
    width: min(34vw, 440px);
    filter: blur(22px);
    -webkit-filter: blur(22px);
  }}


.legacy-geo-cta__inner {
  position: relative;
  z-index: 1;
  padding: var(--spacing-80) 0;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.legacy-geo-cta__title {
  margin: 0 0 var(--spacing-16);
  color: var(--white-text);
}

.legacy-geo-cta__text {
  margin: 0 0 var(--spacing-32);
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
}

/* --- Geo strategy: expand / collapse (card top + button + collapse grid) --- */

.legacy-geo-strategy__card-top {
  border-bottom: none;
}

.legacy-geo-strategy__expand-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-16) 0;
  border-radius: var(--btn-radius);
  border: none;
  background: transparent;
  color: var(--color-brand-teal);
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--font-weight-600);
  cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease;
}

.legacy-geo-strategy__expand-btn:hover {
  color: var(--color-brand-teal-300);
}

.legacy-geo-strategy__expand-btn .toggle-icon {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.legacy-geo-strategy__expand-btn .toggle-icon__svg--minus {
  opacity: 0;
}

.legacy-geo-strategy__expand-btn[aria-expanded="true"] .toggle-icon__svg--plus {
  opacity: 0;
}

.legacy-geo-strategy__expand-btn[aria-expanded="true"] .toggle-icon__svg--minus {
  opacity: 1;
}

.legacy-geo-strategy__collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.legacy-geo-strategy__collapse.is-open {
  grid-template-rows: 1fr;
}

.legacy-geo-strategy__collapse-inner {
  min-height: 0;
  overflow: hidden;
}

.legacy-geo-strategy__card-body {
  border-top: 1px solid #e2e4eb;
}

/* --- Geo strategy: founder quote (compliance-aware panel) --- */

.legacy-founder-quote {
  margin: var(--spacing-24) auto 0 auto;
  padding: var(--spacing-32) var(--spacing-40);
  background: var(--color-brand-navy);
  border-radius: 16px;
  position: relative;
  max-width: 1100px;
  overflow: hidden;
}


@media (max-width: 767px) {
  #ai-agents-change-legacy-migration .legacy-founder-quote {
    margin-top: 64px;
  }
}

.legacy-founder-quote__quote-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.legacy-founder-quote__blockquote {
  margin: 0;
  padding: 0;
  border: none;
}

.legacy-founder-quote__blockquote::before {
  content: "";
  display: block;
  width: clamp(28px, 4vw, 36px);
  height: clamp(28px, 3.5vw, 40px);
  margin-bottom: var(--spacing-16);
  background-color: var(--color-brand-orange);
  -webkit-mask: url("../img/iconsFont/blockquote.aa3eb7409d5f.svg") left center / contain no-repeat;
  mask: url("../img/iconsFont/blockquote.aa3eb7409d5f.svg") left center / contain no-repeat;
  pointer-events: none;
}

.legacy-founder-quote__blockquote p {
  margin: 0;
  font-style: normal;
  font-weight: var(--font-weight-500);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.65;
  color: #ffffff;
}

.legacy-founder-quote__author {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
}

.legacy-founder-quote__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.legacy-founder-quote__author-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.legacy-founder-quote__name {
  font-size: 16px;
  font-weight: var(--font-weight-600);
  color: var(--white-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.legacy-founder-quote__name:hover,
.legacy-founder-quote__name:focus-visible {
  color: var(--accent-orange);
}

.legacy-founder-quote__name:first-child{
  cursor: inherit;
}

.legacy-founder-quote__name:first-child:hover,
.legacy-founder-quote__name:first-child:focus-visible{
  color: var(--white-text);
}

.legacy-founder-quote__name:focus-visible {
  outline: none;
}

.legacy-founder-quote__role {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}

/* --------------------------------------------------------------------------
   17. Utilities — inline text links on this page
   -------------------------------------------------------------------------- */

.legacy-inline-link {
  color: var(--color-brand-teal);
  text-decoration: none;
  transition: all 0.3s ease;
}
.legacy-inline-link:hover,
.legacy-inline-link:focus-visible {
  color: var(--color-brand-teal-300);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   18. bf-techstack — page-specific overrides (legacy modernization)
   -------------------------------------------------------------------------- */

#ai-agents-change-legacy-migration.bf-techstack {
  padding-top: 80px;
  padding-bottom: 0;
  background: none;
}