/* NEXT Footer widget (site-wide, Theme Builder footer) — big "Make it happen." statement,
 * link columns + contact, bottom bar, and the optional floating Get a Quote tab.
 * Colors + fonts come from the site brand kit (--next-* tokens).
 */
.nx-foot {
  --nx-slant: 19.03deg;   /* hero Request a Quote taper: atan(20 / 58) */
  --nx-gutter: clamp(16px, 4vw, 56px);
  --nx-text-d: #C9C9CC;
  --nx-dim: #8C8C92;
  --nx-line-d: rgba(255, 255, 255, .12);

  position: relative; overflow: hidden; isolation: isolate;
  box-sizing: border-box;
  padding: clamp(72px, 9vw, 130px) var(--nx-gutter) 28px;
  background: var(--next-panel);
  color: var(--nx-text-d);
  font-family: var(--next-font-head);
}
.nx-foot *, .nx-foot *::before, .nx-foot *::after { box-sizing: border-box; }
.nx-foot-in { max-width: 1480px; margin: 0 auto; padding-inline: clamp(28px, 3vw, 56px); }   /* lines up with the page sections */

/* LED dot field, top right (the brand Pixel Circle) */
.nx-foot::before {
  content: ""; position: absolute; z-index: -1; right: -160px; top: -160px; width: 720px; height: 720px; pointer-events: none;
  background-image: radial-gradient(circle, rgba(200,200,200,.45) 1.5px, transparent 2.1px); background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.45) 35%, transparent 66%);
          mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.45) 35%, transparent 66%);
  opacity: .35;
}

/* ── Statement ── */
.nx-foot-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; padding-bottom: clamp(56px, 7vw, 96px); }
.nx-foot .kicker {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  font: 700 12px/1 var(--next-font-sub); letter-spacing: .2em; text-transform: uppercase; color: var(--next-cyan);
}
.nx-foot .kicker::after { content: ""; width: 48px; height: 2px; background: currentColor; }
.nx-foot-big {
  margin: 0; color: var(--next-white);
  font: 900 clamp(56px, 9vw, 150px)/.86 var(--next-font-head); letter-spacing: -.05em; text-transform: uppercase;
}
.nx-foot-big em { display: block; font-style: normal; color: var(--next-red); }
.nx-foot-lede { margin: 0 0 28px; max-width: 42ch; font: 400 18px/1.6 var(--next-font-head); color: #D4D4D8; }
.nx-foot-actions { display: flex; flex-wrap: wrap; gap: 16px; }
/* address copy under the phone button — phones only */
.nx-foot-addr-m { display: none; margin-top: 18px; font-style: normal; font: 400 15px/1.55 var(--next-font-head); color: var(--nx-text-d); }

/* buttons: same shapes as the rest of the site */
.nx-foot .btn { display: inline-flex; align-items: stretch; height: 58px; text-decoration: none; }
.nx-foot .btn-label {
  display: flex; align-items: center; padding: 0 44px 0 28px;
  background: var(--next-red); color: var(--next-black);   /* black on red = 5.9:1, per the brand kit */
  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-foot .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-foot .btn-arrow svg { width: 15px; height: 15px; stroke: var(--next-black); fill: none; stroke-width: 2.6; transition: transform .25s; }
.nx-foot .btn:hover .btn-label { background: var(--next-red-hover); }
.nx-foot .btn:hover .btn-arrow svg { transform: translateX(4px); }
.nx-foot .btn-ghost {
  display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 24px;
  border: 2px solid var(--next-white); color: var(--next-white); text-decoration: none;
  font: 700 15px/1 var(--next-font-call); letter-spacing: .08em; text-transform: uppercase; transition: background .2s, color .2s;
}
.nx-foot .btn-ghost svg { width: 18px; height: 18px; fill: currentColor; }
.nx-foot .btn-ghost:hover { background: var(--next-white); color: var(--next-black); }
.nx-foot .btn:focus-visible, .nx-foot .btn-ghost:focus-visible { outline: 3px solid var(--next-cyan); outline-offset: 4px; }

/* thin rule with a red slanted marker, on the button's angle */
.nx-foot-rule { position: relative; height: 3px; margin-bottom: 64px; background: var(--nx-line-d); }
.nx-foot-rule::before {
  content: ""; position: absolute; left: 0; top: -5px; width: 180px; height: 13px; background: var(--next-red);
  clip-path: polygon(0 0, 100% 0, calc(100% - 4.5px) 100%, 0 100%);   /* 13px × tan(19.03°) */
}

/* ── Columns ── */
.nx-foot-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(var(--nx-menus, 3), minmax(0, 1fr)) minmax(0, 1.3fr); gap: 40px 32px; padding-bottom: 56px; }
/* Desktop: each column sized to its content and the space shared out equally, so the
   gaps between columns match whatever the menus contain (equal tracks left Products
   close to Resources and far from Company). */
@media (min-width: 1101px) {
  .nx-foot-cols { display: flex; justify-content: space-between; }
  .nx-foot-cols > * { flex: 0 1 auto; min-width: 0; }
  .nx-foot-brand { flex-basis: 30ch; }
}
.nx-foot-logo { display: inline-block; width: 150px; line-height: 0; color: var(--next-white); }
.nx-foot-logo svg { width: 100%; height: auto; }
.nx-foot-logo:focus-visible { outline: 3px solid var(--next-cyan); outline-offset: 4px; }
.nx-foot-brand p { margin: 20px 0 24px; max-width: 30ch; font: 400 15px/1.6 var(--next-font-head); color: var(--nx-text-d); }
.nx-foot-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nx-foot-social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22); color: var(--next-white); transition: background .2s, border-color .2s, color .2s;
}
.nx-foot-social a:hover, .nx-foot-social a:focus-visible { background: var(--next-red); border-color: var(--next-red); color: var(--next-black); outline: none; }
.nx-foot-social svg { width: 18px; height: 18px; fill: currentColor; }

.nx-foot-col h3 { margin: 0 0 18px; color: var(--next-white); font: 700 12px/1 var(--next-font-sub); letter-spacing: .2em; text-transform: uppercase; }
.nx-foot-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.nx-foot-col li { margin: 0; list-style: none; }
.nx-foot-col .sub-menu { display: none; }   /* footer shows top-level items only */
.nx-foot-col a { color: var(--nx-text-d); text-decoration: none; font: 400 15px/1.4 var(--next-font-head); transition: color .2s; }
.nx-foot-col a:hover, .nx-foot-col a:focus-visible {
  color: var(--next-white); outline: none;
  text-decoration: underline; text-decoration-color: var(--next-red); text-decoration-thickness: 2px; text-underline-offset: 4px;
}

.nx-foot-contact { display: grid; gap: 18px; align-content: start; }
.nx-foot-call { display: flex; align-items: center; gap: 12px; color: var(--next-white); text-decoration: none; }
.nx-foot-call .sq { width: 46px; height: 46px; flex: none; display: grid; place-items: center; background: var(--next-red); }
.nx-foot-call .sq svg { width: 20px; height: 20px; fill: var(--next-black); }
.nx-foot-call small { display: block; font: 400 12px/1.2 var(--next-font-head); color: var(--nx-dim); }
.nx-foot-call b { display: block; font: 700 18px/1.3 var(--next-font-head); }
.nx-foot-call:focus-visible { outline: 3px solid var(--next-cyan); outline-offset: 4px; }
.nx-foot-contact address { font-style: normal; font: 400 15px/1.55 var(--next-font-head); color: var(--nx-text-d); }
.nx-foot-more { color: var(--next-white); text-decoration: none; font: 700 13px/1 var(--next-font-sub); letter-spacing: .14em; text-transform: uppercase; }
.nx-foot-more span { color: var(--next-red); display: inline-block; transition: transform .25s; }
.nx-foot-more:hover span { transform: translateX(4px); }
.nx-foot-more:focus-visible { outline: 3px solid var(--next-cyan); outline-offset: 4px; }

/* ── Bottom bar ── */
.nx-foot-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 28px;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
  font: 400 13px/1.5 var(--next-font-head); color: var(--nx-dim);
}
.nx-foot-legal p { margin: 0; }
.nx-foot-legal ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.nx-foot-legal a { color: inherit; text-decoration: none; }
.nx-foot-legal a:hover, .nx-foot-legal a:focus-visible { color: var(--next-white); text-decoration: underline; text-underline-offset: 3px; outline: none; }
.nx-foot .bbb { display: inline-flex; align-items: stretch; color: inherit; text-decoration: none; }
.nx-foot .bbb img { display: block; height: 44px; width: auto; }
.nx-foot .bbb-txt { display: inline-flex; align-items: stretch; border: 1px solid rgba(255,255,255,.22); }
.nx-foot .bbb-txt .m { display: grid; place-items: center; width: 44px; background: var(--next-white); color: var(--next-black); font: 900 12px/1 var(--next-font-head); }
.nx-foot .bbb-txt .t { padding: 6px 10px; font: 700 11px/1.25 var(--next-font-sub); letter-spacing: .1em; text-transform: uppercase; }
.nx-foot .bbb:focus-visible { outline: 3px solid var(--next-cyan); outline-offset: 3px; }

/* ── Floating Get a Quote tab (site-wide, lives with the footer) ── */
.nx-qtab {
  position: fixed; right: 0; top: 55%; z-index: 90; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 12px 22px 14px; background: var(--next-red); color: var(--next-black); text-decoration: none;
  clip-path: polygon(0 12px, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: padding .2s, background .2s;
  font-family: var(--next-font-head);
}
.nx-qtab span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 13px/1 var(--next-font-call); letter-spacing: .14em; text-transform: uppercase; }
.nx-qtab i { display: grid; place-items: center; width: 26px; height: 26px; background: var(--next-cyan); }
.nx-qtab i svg { width: 12px; height: 12px; stroke: var(--next-black); stroke-width: 2.6; fill: none; }
.nx-qtab:hover { background: var(--next-red-hover); padding-right: 18px; }
.nx-qtab:focus-visible { outline: 3px solid var(--next-cyan); outline-offset: 3px; }
html.nx-lock .nx-qtab { display: none; }   /* hidden while the header's menu panel is open */

/* ── Responsive ── */
@media (max-width: 1100px) {
  .nx-foot-in { padding-inline: 28px; }
  .nx-foot-top { grid-template-columns: 1fr; }
  .nx-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .nx-foot-in { padding-inline: 20px; }
  /* one column: brand, then Products, Company, Resources stacked */
  .nx-foot-cols { grid-template-columns: 1fr; gap: 36px; }
  /* Contact column hidden; its phone + address already sit under the statement */
  .nx-foot-contact { display: none; }
  .nx-foot-addr-m { display: block; }
  .nx-foot-legal { flex-direction: column; align-items: flex-start; }
  .nx-qtab { top: auto; bottom: 16px; transform: none; flex-direction: row; padding: 12px 14px; clip-path: none; }
  .nx-qtab span { writing-mode: horizontal-tb; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-foot .btn-arrow svg, .nx-foot-more span, .nx-qtab { transition: none; }
}