/* NEXT Page Hero widget: inner-page top with copy + points on the left and a photo cut
 * at the 19.03° slant on the right (Why LED, product and market pages).
 * Colors + fonts come from the site brand kit (--next-* tokens).
 */
.nx-phero {
  --nx-gutter: clamp(16px, 4vw, 56px);
  --nx-inset: clamp(28px, 3vw, 56px);
  --nx-h: 600px;   /* photo height the slant is measured against: run = height × tan(19.03°) */

  position: relative; overflow: hidden; box-sizing: border-box;
  padding: 56px var(--nx-gutter) 0;
  background: var(--next-white); color: var(--next-body); font-family: var(--next-font-head);
}
.nx-phero *, .nx-phero *::before, .nx-phero *::after { box-sizing: border-box; }
/* Dot field on the left, same as the home hero and Page Header */
.nx-phero::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-phero-in {
  position: relative; max-width: 1480px; margin: 0 auto; padding-inline: var(--nx-inset);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; min-height: var(--nx-h);
}
.nx-phero--no-photo .nx-phero-in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.nx-phero-copy { align-self: center; padding: 16px 0 72px; }

.nx-phero-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-phero-crumbs li { margin: 0; }
.nx-phero-crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--next-red); }
.nx-phero-crumbs a { color: inherit; text-decoration: none; }
.nx-phero-crumbs a[href]:hover, .nx-phero-crumbs a:focus-visible { color: var(--next-black); }

/* ".nx-phero .nx-phero-title" out-ranks Elementor Site Settings typography (.elementor-kit-N h1) */
.nx-phero .nx-phero-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-phero .nx-phero-title b { font-weight: 900; color: var(--next-red); }
/* Product logo above the heading (product pages); the heading steps down a size so the logo leads */
.nx-phero .nx-phero-logo { display: block; width: var(--nx-logo-w, 340px); max-width: 100%; height: auto; margin: 0 0 30px; }
.nx-phero--logo .nx-phero-title { font-size: clamp(32px, 3.8vw, 56px); line-height: 1.05; }
.nx-phero--logo .nx-phero-title::before { content: ""; display: block; width: 64px; height: 6px; margin-bottom: 22px; background: var(--next-red); clip-path: polygon(0 0, 100% 0, calc(100% - 2.1px) 100%, 0 100%); }
.nx-phero-lede { margin: 22px 0 0; max-width: 50ch; font: 400 18px/1.65 var(--next-font-head); color: var(--next-body); }

/* Points: three columns under a black rule, each with a small red slanted marker */
.nx-phero-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 34px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--next-black); }
.nx-phero-points li { margin: 0; padding: 18px 18px 0 0; }
.nx-phero-points li + li { padding-left: 18px; border-left: 1px solid var(--next-border); }
.nx-phero-points b { display: flex; align-items: center; gap: 10px; font: 700 13px/1.2 var(--next-font-sub); letter-spacing: .16em; text-transform: uppercase; color: var(--next-black); }
.nx-phero-points b::before { content: ""; flex: none; width: 14px; height: 10px; background: var(--next-red); clip-path: polygon(0 0, 100% 0, calc(100% - 3.5px) 100%, 0 100%); }
/* Exactly four points: 2 × 2 */
.nx-phero-points--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-phero-points--4 li:nth-child(3) { padding-left: 0; border-left: 0; }
.nx-phero-points--4 li:nth-child(n+3) { margin-top: 18px; border-top: 1px solid var(--next-border); }
.nx-phero-points span { display: block; margin-top: 8px; font: 400 14.5px/1.5 var(--next-font-head); color: var(--next-muted); }
/* Big numbers style: below the button, number in NEXT Red */
.nx-phero-points--nums { margin-top: 40px; }
.nx-phero-points--nums b { display: block; font: 700 clamp(30px, 3vw, 42px)/1 var(--next-font-call); letter-spacing: 0; text-transform: none; color: var(--next-red); font-variant-numeric: tabular-nums; }
.nx-phero-points--nums b::before { content: none; }
/* Link chips style (e.g. market shortcuts): in place of the points */
.nx-phero-chips { margin: 30px 0 0; padding-top: 18px; border-top: 2px solid var(--next-black); max-width: 640px; }
.nx-phero-chips-label { margin: 0 0 12px; font: 700 12px/1 var(--next-font-sub); letter-spacing: .2em; text-transform: uppercase; color: var(--next-red); }
.nx-phero-chips ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nx-phero-chips li { margin: 0; }
.nx-phero-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; background: var(--next-tint); color: var(--next-black); text-decoration: none; font: 700 14px/1 var(--next-font-call); letter-spacing: .06em; text-transform: uppercase; transition: background .2s, color .2s; }
.nx-phero-chips a::before { content: ""; width: 9px; height: 9px; background: var(--next-red); clip-path: polygon(0 0, 100% 0, calc(100% - 3.1px) 100%, 0 100%); }
.nx-phero-chips a[href]:hover { background: var(--next-black); color: var(--next-white); }
.nx-phero-chips a:focus-visible { outline: 3px solid var(--next-cyan); outline-offset: 2px; }

.nx-phero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 32px; margin-top: 30px; }
/* Button: the hero Request a Quote shape (black text on red) */
.nx-phero .btn { display: inline-flex; align-items: stretch; height: 58px; text-decoration: none; }
.nx-phero .btn-label {
  display: flex; align-items: center; padding: 0 44px 0 28px;
  background: var(--next-red); color: var(--next-black);
  font: 700 15px/1 var(--next-font-call); letter-spacing: .08em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%); transition: background .2s;
}
.nx-phero .btn-arrow { width: 64px; margin-left: -14px; padding-left: 14px; display: grid; place-items: center; background: var(--next-cyan); clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%); }
.nx-phero .btn-arrow svg { width: 15px; height: 15px; stroke: #000; fill: none; stroke-width: 2.6; transition: transform .25s; }
.nx-phero .btn[href]:hover .btn-label { background: var(--next-red-hover); }
.nx-phero .btn[href]:hover .btn-arrow svg { transform: translateX(4px); }
.nx-phero .btn:focus-visible { outline: 3px solid var(--next-cyan); outline-offset: 4px; }
.nx-phero .phone { display: inline-flex; align-items: center; gap: 12px; color: var(--next-black); text-decoration: none; }
.nx-phero .phone .sq { width: 58px; height: 58px; display: grid; place-items: center; background: var(--next-red); }
.nx-phero .phone .sq svg { width: 24px; height: 24px; fill: var(--next-black); }
.nx-phero .phone small { display: block; font: 700 11px/1.2 var(--next-font-sub); letter-spacing: .12em; text-transform: uppercase; color: var(--next-muted); }
.nx-phero .phone b { display: block; font: 700 22px/1.1 var(--next-font-call); letter-spacing: .02em; }
.nx-phero .phone:focus-visible { outline: 3px solid var(--next-cyan); outline-offset: 4px; }

/* Photo: runs to the right edge of the screen, left side cut at 19.03°, red bar along the bottom */
.nx-phero-media { position: relative; margin-right: calc(-1 * (var(--nx-inset) + var(--nx-gutter) + max(0px, (100vw - 1480px - 2 * var(--nx-gutter)) / 2))); clip-path: polygon(calc(var(--nx-h) * .345) 0, 100% 0, 100% 100%, 0 100%); background: var(--next-tint); }
.nx-phero-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* Rotating photos: cross-fade with a slow zoom (next-page-hero.js moves .is-on) */
.nx-phero-media--rotate .nx-phero-slide { opacity: 0; transition: opacity 1.2s ease; z-index: 0; }
/* The zoom runs through the whole time a photo is visible, including its fade-out (.is-leaving),
   so it never jumps back; the incoming photo fades in on top. */
.nx-phero-media--rotate .nx-phero-slide.is-on,
.nx-phero-media--rotate .nx-phero-slide.is-leaving { animation: nxPheroZoom var(--nx-zoom, 7s) linear both; }
.nx-phero-media--rotate .nx-phero-slide.is-on { opacity: 1; z-index: 2; }
.nx-phero-media--rotate .nx-phero-slide.is-leaving { opacity: 0; z-index: 1; }
@keyframes nxPheroZoom { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .nx-phero-media--rotate .nx-phero-slide { transition: none; }
  .nx-phero-media--rotate .nx-phero-slide.is-on,
  .nx-phero-media--rotate .nx-phero-slide.is-leaving { animation: none; }
}
.nx-phero-media::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46%; height: 12px; background: var(--next-red); }
.nx-phero-tag { position: absolute; right: calc(var(--nx-inset) + var(--nx-gutter) + 24px); bottom: 36px; z-index: 2; padding: 16px 20px; background: var(--next-black); color: var(--next-white); font: 700 11px/1.3 var(--next-font-sub); letter-spacing: .16em; text-transform: uppercase; }
.nx-phero-tag b { display: block; margin-bottom: 4px; font: 700 30px/1 var(--next-font-call); letter-spacing: 0; color: var(--next-red); }

@media (max-width: 1100px) {
  .nx-phero-in { grid-template-columns: 1fr; min-height: 0; padding-inline: 28px; gap: 0; }
  .nx-phero-copy { padding-bottom: 48px; }
  .nx-phero-media { height: 380px; margin-inline: calc(-28px - var(--nx-gutter)); clip-path: none; }
  .nx-phero-tag { right: calc(28px + var(--nx-gutter)); bottom: 32px; }
}
@media (max-width: 700px) {
  .nx-phero-points { grid-template-columns: 1fr; }
  .nx-phero-points li, .nx-phero-points li + li { padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--next-border); }
  .nx-phero-media { height: 300px; }
}
@media (max-width: 560px) {
  .nx-phero { padding-top: 40px; }
  .nx-phero-in { padding-inline: 20px; }
  .nx-phero-media { margin-inline: calc(-20px - var(--nx-gutter)); }
  .nx-phero-tag { right: calc(20px + var(--nx-gutter)); }
  .nx-phero-lede { font-size: 16px; }
  .nx-phero .nx-phero-logo { max-width: min(100%, 240px); margin-bottom: 24px; }
}