/*
 * Brand plaque — full-bleed factory photo strip between Hero and Benchmark.
 * Shows real factory with MATLEX signage — credibility for B2B buyers.
 */
.plaque {
  position: relative;
  overflow: hidden;
  margin: 0;
  isolation: isolate;
}

.plaque-img {
  display: block;
  width: 100%;
  height: clamp(360px, 56vh, 560px);
  object-fit: cover;
  /* Anchor slightly above image midline so the MATLEX signage + company
     banner stay inside the visible crop regardless of viewport height. */
  object-position: center 45%;
}

/* <video> variant of the plaque backdrop — same sizing, different tag. */
video.plaque-img {
  background: var(--text);
}

/* Quality plaque — pellet-video backdrop, darker side-to-side gradient so
   the heading text stays readable over high-contrast macro pellet footage. */
.plaque-quality .plaque-overlay {
  background: linear-gradient(
    95deg,
    rgba(14, 15, 18, 0.88) 0%,
    rgba(14, 15, 18, 0.6) 45%,
    rgba(14, 15, 18, 0.2) 80%,
    rgba(14, 15, 18, 0.05) 100%
  );
}

/* The source pellet clip is low resolution — a heavy gaussian blur turns
   pixelation into a tasteful soft bokeh and reads as "atmospheric" rather
   than "pixelated". Scale slightly up to hide the transparent fringe the
   blur leaves at the element's edges. */
.plaque-quality .plaque-img {
  filter: blur(14px);
  transform: scale(1.08);
  transform-origin: center;
  will-change: filter, transform;
}

/* HQ plaque — bright-blue-sky + light-building photo, so the copy-side
   needs a stronger dark wash to stay legible. Keeps the building's
   signage visible on the right while anchoring white text on the left. */
.plaque-hq .plaque-overlay {
  background: linear-gradient(
    100deg,
    rgba(14, 15, 18, 0.82) 0%,
    rgba(14, 15, 18, 0.55) 48%,
    rgba(14, 15, 18, 0.18) 78%,
    rgba(14, 15, 18, 0.05) 100%
  );
}

/* Fine-tune the crop: on this photo the MATLEX sign and company banner
   live in the middle-right third, so bias the crop a bit left + upward
   to give the overlay copy room while keeping the signage in frame. */
.plaque-hq .plaque-img {
  object-position: center 42%;
}

@media (max-width: 720px) {
  .plaque-hq .plaque-img { object-position: center 35%; }
  .plaque-hq .plaque-overlay {
    background: linear-gradient(
      180deg,
      rgba(14, 15, 18, 0.25) 0%,
      rgba(14, 15, 18, 0.88) 100%
    );
  }
}

.plaque-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(14, 15, 18, 0.92) 0%,
    rgba(14, 15, 18, 0.7) 40%,
    rgba(14, 15, 18, 0.25) 75%,
    rgba(14, 15, 18, 0.05) 100%
  );
  display: flex;
  align-items: flex-end;
  padding: 56px 0;
}

.plaque-content {
  max-width: 680px;
}

.plaque-tag {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.plaque-tag::before { background: var(--accent-mid); }

.plaque h2 {
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 22px 0 20px;
  max-width: 20ch;
  font-feature-settings: "calt" 1;
  text-wrap: pretty;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.plaque p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
  max-width: 52ch;
}

.plaque p strong {
  color: #ffffff;
  font-weight: 600;
}

@media (max-width: 720px) {
  .plaque-img { height: 420px; object-position: center 38%; }
  .plaque-overlay {
    padding: 40px 0;
    background: linear-gradient(
      180deg,
      rgba(14, 15, 18, 0.3) 0%,
      rgba(14, 15, 18, 0.88) 100%
    );
  }
  .plaque h2 { font-size: clamp(28px, 7vw, 40px); }
  .plaque p { font-size: 15px; }
  /* Second plaque uses same mobile treatment as the first */
  .plaque-quality .plaque-overlay {
    background: linear-gradient(
      180deg,
      rgba(14, 15, 18, 0.35) 0%,
      rgba(14, 15, 18, 0.9) 100%
    );
  }
}