/* Option 2: native Image + Heading widgets, scoped only to #services. */
body #services.tpi-service-mosaic {
  --sm-orange: #ea7d00;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 34px 0 40px;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  hyphens: none;
}
body #services.tpi-service-mosaic .e-con {
  --container-default-padding-top: 0;
  --container-default-padding-right: 0;
  --container-default-padding-bottom: 0;
  --container-default-padding-left: 0;
  --gap: 0;
  min-width: 0;
  padding: 0;
}
body #services.tpi-service-mosaic .elementor-widget { margin: 0; min-width: 0; }
body #services.tpi-service-mosaic .tpi-service-mosaic__inner {
  display: flex;
  flex-direction: column;
  width: calc(100% - 64px);
  max-width: 1320px;
  margin-inline: auto;
  gap: 24px;
}
body #services.tpi-service-mosaic .tpi-service-mosaic__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center;
  gap: 36px;
  padding-inline: 0;
  width: 100%;
}
body #services.tpi-service-mosaic .tpi-service-mosaic__intro { width: 100%; gap: 10px; }
body #services.tpi-service-mosaic .tpi-service-mosaic__eyebrow .elementor-heading-title {
  color: var(--sm-orange);
  font: 600 clamp(14px, 1.12vw, 19px)/1.3 var(--tpi-body-font, Montserrat, sans-serif);
  font-size: clamp(14px, 1.12vw, 19px) !important;
  letter-spacing: .16em;
  margin: 0;
}
body #services.tpi-service-mosaic .tpi-service-mosaic__title h2 {
  font-family: var(--tpi-section-font, Montserrat, sans-serif) !important;
  font-size: clamp(30px, 3.55vw, 60px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -.04em;
  text-align: left;
  color: var(--ink);
  margin: 0;
  max-width: none;
  text-wrap: balance;
}
body #services.tpi-service-mosaic .tpi-service-mosaic__summary {
  font-size: clamp(16px, 1.68vw, 28px) !important;
  line-height: 1.4;
  font-weight: 400;
  color: var(--ink);
  text-align: left;
}
body #services.tpi-service-mosaic .tpi-service-mosaic__summary p { margin: 0; font: inherit !important; hyphens: none; }
body #services.tpi-service-mosaic .tpi-service-mosaic__branding { display: block; width: 190px; height: 152px; overflow: hidden; }
body #services.tpi-service-mosaic .tpi-service-mosaic__logo img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; }
body #services.tpi-service-mosaic .tpi-service-mosaic__logo { transform: translateY(-8px); }
body #services.tpi-service-mosaic .tpi-service-mosaic__logo--dark { display: none; }
html[data-theme="dark"] body #services.tpi-service-mosaic .tpi-service-mosaic__logo--light { display: none; }
html[data-theme="dark"] body #services.tpi-service-mosaic .tpi-service-mosaic__logo--dark { display: block; }
body #services.tpi-service-mosaic .tpi-service-mosaic__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(250px, 1fr));
  gap: 12px;
  width: 100%;
  aspect-ratio: 2.64;
  align-items: stretch;
}
body #services.tpi-service-mosaic .tpi-service-mosaic__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: #24231f;
  isolation: isolate;
}
body #services.tpi-service-mosaic .tpi-service-mosaic__card--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
body #services.tpi-service-mosaic .tpi-service-mosaic__card--2 { grid-column: 3 / 5; }
body #services.tpi-service-mosaic .tpi-service-mosaic__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
body #services.tpi-service-mosaic .tpi-service-mosaic__image .elementor-widget-container { height: 100%; }
body #services.tpi-service-mosaic .tpi-service-mosaic__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}
body #services.tpi-service-mosaic .tpi-service-mosaic__card--2 img { object-position: center 24%; }
/* Readability wash over real photographs; no imagery is replaced. */
body #services.tpi-service-mosaic .tpi-service-mosaic__card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,.76), rgba(0,0,0,.22) 32%, transparent 65%);
}
body #services.tpi-service-mosaic .tpi-service-mosaic__label { width: 100%; padding: 28px 26px 20px; }
body #services.tpi-service-mosaic .tpi-service-mosaic__label h3 {
  margin: 0;
  color: #fff;
  font: 650 clamp(22px, 1.66vw, 28px)/1.14 var(--tpi-section-font, Montserrat, sans-serif);
  font-size: clamp(22px, 1.66vw, 28px) !important;
  font-weight: 650 !important;
  line-height: 1.14 !important;
  letter-spacing: -.03em;
  text-align: left;
  text-wrap: balance;
}
body #services.tpi-service-mosaic .tpi-service-mosaic__label h3::after {
  content: '';
  display: block;
  width: 54px;
  height: 4px;
  margin-top: 12px;
  background: var(--sm-orange);
}
body #services.tpi-service-mosaic .tpi-service-mosaic__card--1 .tpi-service-mosaic__label { padding: 32px 30px 26px; }
body #services.tpi-service-mosaic .tpi-service-mosaic__card--1 h3 { font-size: clamp(26px, 2.02vw, 34px) !important; }
body #services.tpi-service-mosaic .tpi-service-mosaic__card--1 h3::after { width: 64px; }
body #services.tpi-service-mosaic .tpi-service-mosaic__cta { align-self: flex-end; margin-right: 0; }
body #services.tpi-service-mosaic .tpi-service-mosaic__cta .elementor-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0 3px;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 2px solid var(--sm-orange);
  border-radius: 0;
  font: 650 clamp(18px, 1.32vw, 22px)/1.4 var(--tpi-section-font, Montserrat, sans-serif);
  font-size: clamp(18px, 1.32vw, 22px) !important;
  letter-spacing: -.03em;
}
body #services.tpi-service-mosaic .tpi-service-mosaic__cta .elementor-button-content-wrapper { flex-direction: row; align-items: center; gap: 14px; }
body #services.tpi-service-mosaic .tpi-service-mosaic__cta .elementor-button-text { order: 1; font: inherit !important; }
body #services.tpi-service-mosaic .tpi-service-mosaic__cta .elementor-button-icon { order: 2; }
body #services.tpi-service-mosaic .tpi-service-mosaic__cta .dashicons { width: 26px; height: 26px; font-size: 26px; }
body #services.tpi-service-mosaic .tpi-service-mosaic__cta a:hover { color: var(--sm-orange); }
body #services.tpi-service-mosaic .tpi-service-mosaic__cta a:focus-visible { outline: 2px solid var(--sm-orange); outline-offset: 5px; }
@media (max-width: 1100px) {
  body #services.tpi-service-mosaic .tpi-service-mosaic__header { grid-template-columns: minmax(0, 1fr) 130px; gap: 24px; padding-inline: 0; }
  body #services.tpi-service-mosaic .tpi-service-mosaic__branding { width: 130px; height: 112px; }
  body #services.tpi-service-mosaic .tpi-service-mosaic__grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; grid-auto-rows: minmax(280px, auto); aspect-ratio: auto; }
  body #services.tpi-service-mosaic .tpi-service-mosaic__card--1,
  body #services.tpi-service-mosaic .tpi-service-mosaic__card--2 { grid-column: auto; grid-row: auto; }
  body #services.tpi-service-mosaic .tpi-service-mosaic__card--1 h3 { font-size: 24px !important; }
  body #services.tpi-service-mosaic .tpi-service-mosaic__label,
  body #services.tpi-service-mosaic .tpi-service-mosaic__card--1 .tpi-service-mosaic__label { padding: 24px; }
}
@media (max-width: 767px) {
  body #services.tpi-service-mosaic .tpi-service-mosaic__inner { width: calc(100% - 40px); }
}
@media (max-width: 720px) {
  body #services.tpi-service-mosaic { padding: 30px 0 36px; }
  body #services.tpi-service-mosaic .tpi-service-mosaic__inner { gap: 22px; }
  body #services.tpi-service-mosaic .tpi-service-mosaic__header { grid-template-columns: 1fr; gap: 16px; }
  body #services.tpi-service-mosaic .tpi-service-mosaic__branding { display: none; }
  body #services.tpi-service-mosaic .tpi-service-mosaic__title h2 { font-size: 30px !important; line-height: 1.16 !important; text-wrap: initial; }
  body #services.tpi-service-mosaic .tpi-service-mosaic__summary { font-size: 16px !important; }
  body #services.tpi-service-mosaic .tpi-service-mosaic__grid { grid-template-columns: minmax(0,1fr); grid-auto-rows: minmax(280px, auto); }
  body #services.tpi-service-mosaic .tpi-service-mosaic__label h3 { font-size: 24px !important; }
  body #services.tpi-service-mosaic .tpi-service-mosaic__cta { margin-right: 0; }
}
