/* NEXT Solutions widget (home section 3 — "A sign for every place you need to be seen").
 * Colors + fonts come from the site brand kit (--next-* tokens).
 */
.nx-sol {
  --nx-slant: 19.03deg;   /* hero Request a Quote taper: atan(20 / 58) */
  --nx-gutter: clamp(16px, 4vw, 56px);
  --nx-card: #171717;
  --nx-card-hi: #1E1E1E;
  --nx-text-d: #C9C9CC;

  position: relative; overflow: hidden; isolation: isolate;
  box-sizing: border-box;
  padding: clamp(64px, 8vw, 110px) var(--nx-gutter);
  background: var(--next-panel);
  color: var(--next-white);
  font-family: var(--next-font-head);
}
.nx-sol *, .nx-sol *::before, .nx-sol *::after { box-sizing: border-box; }
.nx-sol-in { max-width: 1480px; margin: 0 auto; padding-inline: clamp(28px, 3vw, 56px); } /* lines up with the hero + stats */

/* halftone field, top-right (the brand Pixel Circle) */
.nx-sol--dots::before {
  content: ""; position: absolute; z-index: -1; top: -120px; right: -120px; width: 620px; height: 620px;
  background-image: radial-gradient(circle, rgba(200,200,200,.5) 1.5px, transparent 2.1px); background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 35%, transparent 66%);
          mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 35%, transparent 66%);
  opacity: .35; pointer-events: none;
}

/* Header */
.nx-sol-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; }
.nx-sol .kicker {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font: 700 11px/1 var(--next-font-sub); letter-spacing: .2em; text-transform: uppercase; color: var(--next-white);
}
.nx-sol .kicker::before { content: ""; width: 26px; height: 10px; background: var(--next-red); transform: skewX(calc(var(--nx-slant) * -1)); }
.nx-sol-head h2, .nx-sol-head h3 {
  margin: 0; max-width: 16ch; color: var(--next-white);
  font: 700 clamp(34px, 3.6vw, 52px)/1.08 var(--next-font-head); letter-spacing: -.02em; text-wrap: balance;
}
.nx-sol-all {
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px;
  border: 2px solid var(--next-white); color: var(--next-white); text-decoration: none;
  font: 700 13px/1 var(--next-font-call); letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.nx-sol-all svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.nx-sol-all:hover, .nx-sol-all:focus-visible { background: var(--next-white); color: var(--next-black); outline: none; }

/* Second copy of the button under the grid — only used on the single-column layout */
.nx-sol-foot { display: none; margin-top: 32px; }

/* Cards */
.nx-sol-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.nx-sol-card {
  display: flex; flex-direction: column; background: var(--nx-card);
  color: var(--next-white); text-decoration: none; transition: background .3s;
}
.nx-sol-media { position: relative; aspect-ratio: 16 / 10; background: #2A2A2C; }
.nx-sol-clip { position: absolute; inset: 0; overflow: hidden; }
.nx-sol-clip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }

/* placeholder panel (no photo yet): halftone circle on a brand color */
.nx-sol-ph { position: absolute; inset: 0; }
.nx-sol-ph::after {
  content: ""; position: absolute; right: -10%; top: -10%; width: 80%; aspect-ratio: 1;
  background-image: radial-gradient(circle, rgba(255,255,255,.75) 1.4px, transparent 2px); background-size: 8px 8px;
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.4) 40%, transparent 68%);
          mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.4) 40%, transparent 68%);
}
.nx-sol-ph--grey { background: #D2D2D4; }
.nx-sol-ph--dark { background: #2A2A2C; }
.nx-sol-ph--red  { background: var(--next-red); }
.nx-sol-ph--cyan { background: var(--next-cyan); }
.nx-sol-chip {
  position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 9px; background: var(--next-white); color: #111;
  font: 700 9.5px/1 var(--next-font-sub); letter-spacing: .14em; text-transform: uppercase;
}
.nx-sol-chip svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; fill: none; }

.nx-sol-num {
  position: absolute; right: 22px; bottom: -22px; z-index: 2;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--next-red); color: var(--next-black);   /* black on red = 5.9:1, per the brand kit */
  font: 700 17px/1 var(--next-font-call); letter-spacing: .02em;
}
.nx-sol-body { display: flex; flex-direction: column; flex: 1; padding: 30px 24px 28px; }
.nx-sol-card h3 { margin: 0 0 10px; color: var(--next-white); font: 700 21px/1.2 var(--next-font-head); }
.nx-sol-card p { margin: 0 0 18px; font: 400 14.5px/1.55 var(--next-font-head); color: var(--nx-text-d); }
.nx-sol-go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font: 700 12px/1 var(--next-font-sub); letter-spacing: .14em; text-transform: uppercase; color: var(--next-white);
}
.nx-sol-go svg { width: 14px; height: 14px; stroke: var(--next-red); stroke-width: 2.2; fill: none; transition: transform .25s; }

a.nx-sol-card:hover, a.nx-sol-card:focus-visible { background: var(--nx-card-hi); }
a.nx-sol-card:hover .nx-sol-clip img, a.nx-sol-card:focus-visible .nx-sol-clip img { transform: scale(1.05); }
a.nx-sol-card:hover .nx-sol-go svg, a.nx-sol-card:focus-visible .nx-sol-go svg { transform: translateX(4px); }
a.nx-sol-card:focus-visible { outline: 3px solid var(--next-cyan); outline-offset: 2px; }

@media (max-width: 1100px) {
  .nx-sol-in { padding-inline: 28px; }
  .nx-sol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .nx-sol-in { padding-inline: 20px; }
  .nx-sol-grid { grid-template-columns: 1fr; }
  /* single column: the button moves from the header to below the last card */
  .nx-sol-head .nx-sol-all { display: none; }
  .nx-sol-foot { display: block; }
  .nx-sol-foot .nx-sol-all { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-sol-card, .nx-sol-clip img, .nx-sol-go svg { transition: none; }
}