/* Shared two-column geometry used by the existing Careers and Contact heroes. */
:root {
  --hero-layout-max-width: 1320px;
  --hero-layout-gutter: clamp(24px, 3vw, 44px);
  --hero-layout-side-padding: clamp(24px, 3vw, 40px);
}

.hero--two-column {
  width: min(100%, var(--hero-layout-max-width));
  margin-inline: auto;
  padding: 20px var(--hero-layout-side-padding) 60px;
}

/* Home-style full-width photo treatment: deliberately opt-in so only the
   Services and About Us heroes carrying this modifier are affected. */
.hero--two-column.hero--home-style {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 680px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #F7F1E6;
}

.hero--two-column.hero--home-style::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(247, 241, 230, 1) 0%,
    rgba(247, 241, 230, 1) 31%,
    rgba(247, 241, 230, 0.96) 39%,
    rgba(247, 241, 230, 0.80) 48%,
    rgba(247, 241, 230, 0.54) 56%,
    rgba(247, 241, 230, 0.28) 64%,
    rgba(247, 241, 230, 0.08) 71%,
    rgba(247, 241, 230, 0) 76%);
}

/* About Us has a wrapper, while Services does not. */
.hero--two-column.hero--home-style .hero-inner {
  display: contents;
}

.hero--two-column.hero--home-style .hero-text,
.hero--two-column.hero--home-style .hero-content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: min(100%, 1320px);
  min-height: 680px;
  margin: 0 auto;
  padding: 40px clamp(24px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero--two-column.hero--home-style .hero-copy--home-aligned {
  max-width: 640px;
}

.hero--two-column.hero--home-style .hero-image {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100% !important;
  border-radius: 0 !important;
  overflow: hidden;
}

.hero--two-column.hero--home-style .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}

@media (max-width: 900px) {
  .hero--two-column.hero--home-style,
  .hero--two-column.hero--home-style .hero-text,
  .hero--two-column.hero--home-style .hero-content {
    min-height: 600px;
  }

  .hero--two-column.hero--home-style .hero-text,
  .hero--two-column.hero--home-style .hero-content {
    padding: 40px 24px;
  }
}

@media (max-width: 520px) {
  .hero--two-column.hero--home-style,
  .hero--two-column.hero--home-style .hero-text,
  .hero--two-column.hero--home-style .hero-content {
    min-height: 620px;
  }

  .hero--two-column.hero--home-style .hero-text,
  .hero--two-column.hero--home-style .hero-content {
    padding: 56px 24px 36px;
  }
}