/* Browser compatibility fixes */

/* Fix for text size adjust + prevent horizontal overflow / right-edge gap on mobile */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

/* Fix for font smoothing error */
body {
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

main {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

/* Additional browser compatibility fixes */
.user-select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.appearance-none {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.smooth-scrolling {
  scroll-behavior: smooth;
}

/* Ensure transitions work across browsers */
.transition {
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Section photo backgrounds — asymmetric fade, keeps colour without washing out content */
.section-bg-photo > .absolute {
  overflow: hidden;
}

.section-bg-photo__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-filter: saturate(0.85) brightness(0.88);
  filter: saturate(0.85) brightness(0.88);
}

.section-bg-photo__overlay {
  position: absolute;
  inset: 0;
}

/* Process: photo peeks through on the right, content stays clean on the left/center */
.section-bg-photo--process .section-bg-photo__image {
  object-position: 70% center;
}

.section-bg-photo--process .section-bg-photo__overlay {
  background: linear-gradient(
    105deg,
    rgba(249, 250, 251, 0.97) 0%,
    rgba(255, 255, 255, 0.9) 42%,
    rgba(255, 255, 255, 0.72) 68%,
    rgba(255, 255, 255, 0.45) 100%
  );
}

/* About: photo anchors the bottom, text sits on a soft white lift */
.section-bg-photo--about .section-bg-photo__image {
  object-position: center 65%;
}

.section-bg-photo--about .section-bg-photo__overlay {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.82) 45%,
    rgba(249, 250, 251, 0.62) 100%
  );
}

@media (max-width: 767px) {
  .section-bg-photo--process .section-bg-photo__overlay {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(249, 250, 251, 0.82) 55%,
      rgba(255, 255, 255, 0.68) 100%
    );
  }

  .section-bg-photo--about .section-bg-photo__overlay {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.93) 0%,
      rgba(255, 255, 255, 0.78) 100%
    );
  }
}