/* Page-specific styles for about-us/index.html. */
/* Shared visuals remain in the legacy MOSINTER UI bundle and common CSS. */

/* Capability labels replace unsupported numerical metrics. */
.about-profile-metrics .about-capability-title {
  margin: 0;
  color: #bf4d0a;
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* The profile uses one content width and normal document flow throughout. */
body.mos-about-page { background: #f6f6f6; color: #1b1b1b; }
body.mos-about-page .about-profile-metrics { padding: 32px 0 0; }
body.mos-about-page .about-profile-metrics .about-shared-shell {
  box-sizing: border-box; width: 100%; max-width: 1200px; padding-inline: 15px; margin-inline: auto;
}
body.mos-about-page .about-profile-metrics .about-banner-numbers-grid {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0;
  padding: 0; margin: 0; border: 1px solid #ede5df; background: #fff;
}
body.mos-about-page .about-profile-metrics .about-banner-cell {
  min-width: 0; padding: 24px 20px; border: 0; border-right: 1px solid #ede5df;
}
body.mos-about-page .about-profile-metrics .about-banner-cell:last-child { border-right: 0; }
body.mos-about-page .about-capability-title { font-size: 18px; line-height: 1.4; }
body.mos-about-page > section.section { padding-block: 72px; }
body.mos-about-page > section.without-top-spacing { padding-top: 0; }
body.mos-about-page .about-us-wrap { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 64px; }
body.mos-about-page .about-us-side-text-wrap { min-width: 0; }
body.mos-about-page .why-choose-us-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; width: 100%; min-width: 0; }
body.mos-about-page .why-choose-us-cell { min-width: 0; padding: 26px; border: 1px solid #ede5df; margin: 0; }
body.mos-about-page .why-choose-us-cell-title-wrap { align-items: center; gap: 14px; }
body.mos-about-page .why-choose-us-icon { width: 36px; height: 36px; flex: 0 0 36px; object-fit: contain; }
body.mos-about-page .why-choose-us-title { font-size: 20px; line-height: 1.35; }
body.mos-about-page .why-choose-us-cell-text { font-size: 16px; line-height: 1.65; }
body.mos-about-page .team-collection-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
body.mos-about-page .team-collection-item { min-width: 0; width: auto; }
body.mos-about-page .team-member-photo-wrap { width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: hidden; }
body.mos-about-page .team-member-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
body.mos-about-page .team-member-card-info { padding: 20px 0; gap: 16px; }
body.mos-about-page .vertical-section { display: grid; grid-template-columns: minmax(240px,.7fr) minmax(0,1.3fr); gap: 64px; align-items: start; }
body.mos-about-page .faq-section-left-sidebar { position: static; width: auto; min-width: 0; max-width: none; }
body.mos-about-page .faq-one-column { width: 100%; min-width: 0; }
body.mos-about-page .testimonials-heading { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 64px; margin-bottom: 36px; }
body.mos-about-page .about-title-wrap { width: 100%; max-width: none; }
body.mos-about-page .about-block-title { max-width: 900px; font-size: clamp(28px,3vw,42px); line-height: 1.2; }
body.mos-about-page .about-feedback-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
body.mos-about-page .about-feedback-grid .testimonial-card { width: auto; min-width: 0; height: 100%; margin: 0; padding: 28px; border: 1px solid #ede5df; }
body.mos-about-page .about-feedback-grid .paragraph-large { font-size: 17px; line-height: 1.65; }
body.mos-about-page .about-feedback-grid .client-wrap { gap: 14px; align-items: center; }
body.mos-about-page .about-feedback-grid .client-image { width: 52px; height: 52px; flex: 0 0 52px; object-fit: cover; border-radius: 50%; }
@media (min-width:1440px) { body.mos-about-page .about-profile-metrics .about-shared-shell { max-width: 1350px; } }
@media (min-width:1920px) { body.mos-about-page .about-profile-metrics .about-shared-shell { max-width: 1710px; } }
@media (max-width:991px) {
  body.mos-about-page .about-profile-metrics .about-shared-shell { max-width: 728px; }
  body.mos-about-page .about-profile-metrics .about-banner-numbers-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.mos-about-page .about-profile-metrics .about-banner-cell { border: 1px solid #ede5df; }
  body.mos-about-page .about-us-wrap, body.mos-about-page .vertical-section, body.mos-about-page .testimonials-heading { grid-template-columns: minmax(0,1fr); gap: 28px; }
  body.mos-about-page .about-us-title-wrap { max-width: none; }
  body.mos-about-page .about-feedback-grid { grid-template-columns: minmax(0,1fr); }
  body.mos-about-page > section.section { padding-block: 48px; }
}
@media (max-width:767px) {
  body.mos-about-page .about-profile-metrics .about-shared-shell { max-width: none; }
  body.mos-about-page .team-collection-list, body.mos-about-page .why-choose-us-grid { grid-template-columns: minmax(0,1fr); }
  body.mos-about-page .about-capability-title { font-size: 16px; }
  body.mos-about-page .about-profile-metrics .about-banner-cell { padding: 18px 14px; }
}

body.mos-about-page .about-us-wrap .about-capability-photo { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; margin-bottom:24px; }

/* Compact photo cards, including legacy center/right variants. */
html body.mos-about-page .about-us-wrap .why-choose-us-grid .why-choose-us-cell {
  padding:12px; gap:12px; justify-content:flex-start;
}
html body.mos-about-page .about-us-wrap .why-choose-us-grid .about-capability-photo {
  margin:0; flex:none;
}

/* Seamless four-photo grid on every screen size. */
html body.mos-about-page .about-us-wrap .why-choose-us-grid.about-photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0; border:0; align-content:start; }
html body.mos-about-page .about-us-wrap .about-photo-grid > .about-capability-photo { display:block; width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; margin:0; padding:0; border:0; min-width:0; }

/* Equal capability cells regardless of label length. */
body.mos-about-page .about-profile-metrics .about-banner-numbers-grid { grid-auto-rows: 1fr; }
body.mos-about-page .about-profile-metrics .about-banner-cell {
  width: auto; height: auto; min-height: 110px; align-self: stretch;
  display: flex; align-items: center; justify-content: center; text-align: center;
}

body.mos-about-page .about-profile-metrics .about-banner-cell { justify-self: stretch; max-width: none; }
