/* NEXT Page Header widget (top of inner pages: About, Why LED, products, markets…).
 * Colors + fonts come from the site brand kit (--next-* tokens).
 */
.nx-ph {
  --nx-slant: 19.03deg;   /* hero Request a Quote taper: atan(20 / 58) */
  --nx-gutter: clamp(16px, 4vw, 56px);
  --nx-inset: clamp(28px, 3vw, 56px);

  position: relative; overflow: hidden; box-sizing: border-box;
  padding: 56px var(--nx-gutter) 0;
  background: linear-gradient(180deg, var(--next-white) 0%, var(--next-tint) 100%);
  color: var(--next-body); font-family: var(--next-font-head);
}
.nx-ph *, .nx-ph *::before, .nx-ph *::after { box-sizing: border-box; }
/* Dot field on the left, same as the home hero; fades out toward the top edge */
.nx-ph::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(0, 0, 0, .09) 1px, transparent 1.4px); background-size: 8px 8px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%), linear-gradient(180deg, transparent 0, #000 160px);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, #000 0%, transparent 55%), linear-gradient(180deg, transparent 0, #000 160px);
          mask-composite: intersect;
}
.nx-ph-in {
  position: relative; max-width: 1480px; margin: 0 auto; padding: 0 var(--nx-inset) 64px;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px 64px; align-items: end;
}

.nx-ph-crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; font: 700 11px/1 var(--next-font-sub); letter-spacing: .2em; text-transform: uppercase; color: var(--next-muted); }
.nx-ph-crumbs li { margin: 0; }
.nx-ph-crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--next-red); }
.nx-ph-crumbs a { color: inherit; text-decoration: none; }
.nx-ph-crumbs a:hover, .nx-ph-crumbs a:focus-visible { color: var(--next-black); }

/* ".nx-ph .nx-ph-title" out-ranks Elementor Site Settings typography (.elementor-kit-N h1) */
.nx-ph .nx-ph-title { margin: 0; color: var(--next-black); font: 700 clamp(40px, 5.6vw, 84px)/1 var(--next-font-head); letter-spacing: -.025em; text-wrap: balance; }
.nx-ph .nx-ph-title b { font-weight: 900; color: var(--next-red); }

.nx-ph-lede { margin: 0; max-width: 46ch; font: 400 18px/1.65 var(--next-font-head); color: var(--next-body); }
.nx-ph-facts { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 26px 0 0; padding: 0; list-style: none; }
.nx-ph-facts li { margin: 0; font: 700 11px/1.3 var(--next-font-sub); letter-spacing: .16em; text-transform: uppercase; color: var(--next-muted); }
.nx-ph-facts b { display: block; margin-bottom: 4px; font: 700 28px/1 var(--next-font-call); letter-spacing: 0; color: var(--next-red); }

/* Closing rule: black bar with a red lead-in, the red end cut at the 19.03° slant */
.nx-ph-rule { position: relative; max-width: 1480px; height: 14px; margin: 0 auto; }
.nx-ph-rule::before { content: ""; position: absolute; left: var(--nx-inset); right: calc(-1 * (var(--nx-gutter) + 100vw)); bottom: 0; height: 14px; background: var(--next-black); }
.nx-ph-rule::after { content: ""; position: absolute; left: var(--nx-inset); bottom: 0; width: 180px; height: 14px; background: var(--next-red); clip-path: polygon(0 0, 100% 0, calc(100% - 4.8px) 100%, 0 100%); }
.nx-ph--no-rule .nx-ph-in { padding-bottom: 72px; }

@media (max-width: 1100px) {
  .nx-ph-in { grid-template-columns: 1fr; padding-inline: 28px; padding-bottom: 48px; }
  .nx-ph-rule::before, .nx-ph-rule::after { left: 28px; }
}
@media (max-width: 560px) {
  .nx-ph { padding-top: 40px; }
  .nx-ph-in { padding-inline: 20px; }
  .nx-ph-rule::before, .nx-ph-rule::after { left: 20px; }
  .nx-ph-lede { font-size: 16px; }
}