/* Dedicated Teams page (Views/Services/DedicatedTeams.cshtml). It loads softwareSolutions.css (the shell) and outsourcing.css (the
   banner flow, the section stack, the offer path and the other-lines row) first; this file adds the model cards, the hiring steps,
   the figures at a glance, the promises, the languages bar, the roles strip and the rate cards, set in the section stack, whose gap
   spaces them. The emd- blocks and their EMD_* texts come from the former Engagement Models page. */
.emd-page {
  --emd-wire: #9fe3e7;
}
.emd-label {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--ssw-muted);
}
/* English breaks as in the design; a translation is balanced so it does not leave a word or two on a line of their own */
html:not([lang=en]) .sdt-page :is(.ssw-hero__title, .sec-title, .sec-lead, .ssw-final__text) {
  text-wrap: balance;
}

/* ---------- The models: who steers each one, drawn above the team ---------- */
.emd-models {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.emd-model {
  display: flex;
  flex: 1 1 32rem;
  flex-direction: column;
  gap: 1.4rem;
  min-width: 0;
  padding: 2.4rem 2.2rem;
  border: 1px solid var(--ssw-line);
  border-radius: 2.2rem;
  background: #ffffff;
  box-shadow: 0 1.8rem 3.6rem -2.6rem rgba(14, 42, 56, 0.45);
}
.emd-model__head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--ssw-muted);
}
.emd-model__head strong {
  font-size: 2rem;
  line-height: 1.3;
}
.emd-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 19rem;
  padding: 1.4rem;
  border: 1px solid #e3eef0;
  border-radius: 1.6rem;
  background: #fbfeff;
}
.emd-diagram__badge {
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  background: var(--ssw-yellow);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.55;
  color: var(--ssw-navy);
}
.emd-diagram__wire {
  height: 2rem;
  border-left: 2px dashed var(--ssw-cyan);
}
.emd-diagram__wire--yellow {
  border-left-color: #f2c230;
}
.emd-diagram__box {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  gap: 1rem;
  padding: 1.2rem;
  border: 1.5px solid var(--emd-wire);
  border-radius: 1.4rem;
  background: var(--ssw-tint);
}
.emd-diagram__label {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ssw-teal-text);
}
.emd-diagram__team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}
.emd-diagram__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ssw-cyan);
  box-shadow: 0 0 0 3px rgba(0, 194, 203, 0.18);
}
.emd-diagram__break {
  flex-basis: 100%;
  height: 0;
}
.emd-diagram__chip {
  padding: 2px 6px;
  border: 1px solid var(--emd-wire);
  border-radius: 6px;
  background: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.55;
  color: var(--ssw-teal-text);
}

/* ---------- The roles we provide: one strip of chips after its label ---------- */
.sdt-roles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  padding: 1.8rem 2.4rem;
  border: 1px solid var(--ssw-line);
  border-radius: 1.8rem;
  background: #ffffff;
  line-height: 1.55;
}
.sdt-roles__label {
  margin-right: 0.6rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ssw-muted);
}
.sdt-role {
  display: inline-flex;
  flex-direction: column;
  padding: 0.8rem 1.4rem;
  border: 1px solid #cdeff1;
  border-radius: 1.4rem;
  background: var(--ssw-tint);
  font-size: 1.25rem;
  color: #4a6370;
}
.sdt-role strong {
  font-size: 1.4rem;
}

/* ---------- Why DESOL: the figures at a glance, two promises, then the languages we work in ---------- */
.emd-page .sec-title em {
  font-style: normal;
  color: #009aa2;
}
.emd-glance {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 2.4rem 2.8rem;
  border: 1px solid var(--ssw-line);
  border-radius: 2.2rem;
  background: #f3fbfc;
}
.emd-label.emd-glance__label {
  font-size: 1.3rem;
}
.emd-glance__items {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 0;
}
.emd-glance__item {
  display: flex;
  flex: 1 1 16rem;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem 1.8rem;
  border-left: 2px solid var(--ssw-chip-line);
  font-size: 1.4rem;
  line-height: 1.45;
}
.emd-glance__item strong {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ssw-teal-text);
}
.emd-work {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.emd-work__card {
  display: flex;
  flex: 1 1 38rem;
  gap: 1.8rem;
  min-width: 0;
  padding: 2.6rem 2.4rem;
  border: 1.5px solid transparent;
  border-radius: 2.2rem;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, var(--ssw-cyan), rgba(47, 127, 224, 0.4)) border-box;
  box-shadow: 0 2.2rem 4.4rem -3.2rem rgba(0, 131, 140, 0.7);
}
.emd-work__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 1.5rem;
  line-height: 1.6;
}
.emd-work__body strong {
  font-size: 1.8rem;
}
.emd-langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2.4rem;
  padding: 1.8rem 2.4rem;
  border: 1px solid var(--ssw-line);
  border-radius: 1.8rem;
  background: #f3fbfc;
  line-height: 1.55;
}
.emd-langs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: 1.5rem;
  color: var(--ssw-navy);
}
.emd-langs__chip {
  padding: 0.4rem 1rem;
  border: 1px solid var(--ssw-chip-line);
  border-radius: 999px;
  background: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ssw-teal-text);
}

/* ---------- How it works: the hiring steps, all the client's, on a yellow wire ---------- */
.ssw-steps.emd-hire__steps {
  row-gap: 1.2rem;
}
.emd-hire__step {
  display: flex;
  flex: 1 1 17rem;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.8rem;
  border: 1px solid var(--ssw-yellow-line);
  border-radius: 1.6rem;
  background: #fffaeb;
  font-size: 1.35rem;
  line-height: 1.5;
}
.emd-hire__step strong {
  font-size: 1.5rem;
}
.emd-hire__steps .ssw-steps__wire {
  flex-basis: 2.6rem;
}

/* ---------- Rates: one card per role, the hourly rate large, the monthly one under a dashed rule ---------- */
.sou-stack.sdt-rates__stack {
  gap: 4rem;
}
.sdt-rates {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.sdt-rate {
  display: flex;
  flex: 1 1 19rem;
  flex-direction: column;
  gap: 0.8rem;
  padding: 2.2rem;
  border: 1px solid var(--ssw-line);
  border-radius: 1.8rem;
  background: #ffffff;
  box-shadow: 0 1.4rem 2.8rem -2.4rem rgba(14, 42, 56, 0.45);
}
.sdt-rate__name {
  font-size: 1.6rem;
  color: var(--ssw-navy);
}
/* Japanese names break only at their spaces (and the zero-width space in SDT_RATE1_NAME), not mid-word */
html[lang=ja] .sdt-rate__name {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* A name on two lines (in Vietnamese or Japanese) pushes no rate out of line with the cards beside it */
.sdt-rate__from {
  margin-top: auto;
  font-size: 1.3rem;
  color: var(--ssw-muted);
}
/* On a narrow card the unit drops below the figure, which never breaks */
.sdt-rate__hour {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 1.4rem;
  color: #4a6370;
}
.sdt-rate__hour strong {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--ssw-teal-text);
}
/* A rate in đồng is three digits longer than in dollars, so its figure is set smaller to stay on one line with its unit */
html[lang=vi] .sdt-rate__hour strong {
  font-size: 2.6rem;
}
.sdt-rate__month {
  padding-top: 0.8rem;
  border-top: 1px dashed var(--ssw-line);
  font-size: 1.35rem;
  color: #4a6370;
}
.sdt-rates__note {
  margin: 0;
  font-size: 1.35rem;
  color: var(--ssw-muted);
  text-align: center;
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .emd-work__card {
    padding: 2rem;
  }
  /* Card titles at the phone Home's 17px (main.css) */
  .emd-model__head strong,
  .emd-work__body strong {
    font-size: 1.7rem;
  }
  /* Figures sit between the section and page titles (main.css); a card is a full row here, so đồng fits at the same size */
  .emd-glance__item strong,
  .sdt-rate__hour strong,
  html[lang=vi] .sdt-rate__hour strong {
    font-size: 2.2rem;
  }
  .emd-hire__steps.ssw-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .emd-glance {
    padding: 2rem;
  }
  /* As in the flow on the services page: each step's name keeps its line and its tags wrap under it when they do not fit */
  .sdt-page .sou-flow__step {
    flex-wrap: wrap;
    min-height: 0;
    padding: 1rem 1.2rem;
  }
  .sdt-page .sou-flow .sou-flow__name {
    flex: 1 0 auto;
    max-width: calc(100% - 2.2rem);
  }
  .sdt-page .sou-flow__tags {
    justify-content: flex-start;
  }
  .sdt-roles {
    padding: 1.8rem 2rem;
  }
  .sdt-roles__label {
    flex-basis: 100%;
  }
}