/* The metrology photograph dissolves into the page's own theme surface. */
.pg-quality .page-hero--short {
  --quality-surface-rgb: 246, 245, 243;
  /* This photo hero inherits data-tone="night" from the shared template.
     Restore the page colours here so its lower edge meets the next section. */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --accent-text: var(--red-ink);
  color-scheme: light;
  min-height: 450px;
  display: flex;
  align-items: center;
  padding-block: clamp(48px, 5.5vw, 84px);
  background: var(--bg);
}
:root[data-theme="dark"] .pg-quality .page-hero--short {
  --quality-surface-rgb: 16, 16, 20;
  --bg: var(--paper);
  --accent-text: #ff6a4d;
  color-scheme: dark;
}
.pg-quality .page-hero__inner { max-width: none; }
.pg-quality .page-hero__title {
  max-width: 57%;
  font-size: clamp(2.5rem, 4.4vw, 4.15rem);
  text-wrap: balance;
}
.pg-quality .page-hero__lead { max-width: 47%; color: var(--fg-2); }
.pg-quality .page-hero__media {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 57%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 57%, transparent 100%);
}
.pg-quality .page-hero__img { object-position: center 59%; opacity: .72; }
.pg-quality .page-hero__scrim {
  background:
    linear-gradient(90deg, rgba(var(--quality-surface-rgb),1) 0%, rgba(var(--quality-surface-rgb),.96) 23%, rgba(var(--quality-surface-rgb),.84) 43%, rgba(var(--quality-surface-rgb),.17) 66%, rgba(var(--quality-surface-rgb),.08) 82%, rgba(var(--quality-surface-rgb),.34) 100%),
    linear-gradient(180deg, rgba(var(--quality-surface-rgb),.18), transparent 26%);
}
@media (max-width: 760px) {
  .pg-quality .page-hero--short {
    min-height: 0;
    padding-block: 32px 270px;
    align-items: flex-start;
  }
  .pg-quality .page-hero__title {
    max-width: none;
    font-size: clamp(2rem, 7.9vw, 3rem);
  }
  .pg-quality .page-hero__lead { max-width: 38rem; font-size: 1rem; }
  .pg-quality .page-hero__media {
    top: 36%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 62%, transparent 100%);
  }
  .pg-quality .page-hero__img { object-position: 63% 55%; opacity: .8; }
  .pg-quality .page-hero__scrim {
    background:
      linear-gradient(180deg, rgba(var(--quality-surface-rgb),1) 0%, rgba(var(--quality-surface-rgb),.82) 13%, rgba(var(--quality-surface-rgb),.15) 42%, transparent 66%),
      linear-gradient(90deg, rgba(var(--quality-surface-rgb),.28), transparent 25%, transparent 76%, rgba(var(--quality-surface-rgb),.24));
  }
}