/* NEXT Stats widget (home section 2 — "Built for impact").
 * Colors + fonts come from the site brand kit (--next-* tokens).
 */
.nx-stats {
  /* Slant of the red hover panels. It's the hero Request a Quote button's taper:
     20px of run over a 58px-tall button → atan(20 / 58) ≈ 19.03°. */
  --nx-slant: 19.03deg;
  --nx-gutter: clamp(16px, 4vw, 56px);

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

/* Header: heading left, intro right */
.nx-stats-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 56px; }
.nx-stats .eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0 0 16px;
  font: 700 12px/1 var(--next-font-sub); letter-spacing: .2em; text-transform: uppercase; color: var(--next-red);
}
.nx-stats .eyebrow::after { content: ""; width: 48px; height: 2px; background: var(--next-red); }
.nx-stats-head h2, .nx-stats-head h3 {
  margin: 0; color: var(--next-black);
  font: 700 clamp(32px, 4vw, 52px)/1.08 var(--next-font-head); letter-spacing: -.02em; text-wrap: balance;
}
.nx-stats .intro { margin: 0; max-width: 62ch; font: 400 18px/1.65 var(--next-font-head); color: var(--next-body); }

/* Spec-sheet row */
.nx-stats-grid { display: grid; grid-template-columns: repeat(var(--nx-cols, 4), minmax(0, 1fr)); border-top: 3px solid var(--next-black); }
.nx-stat {
  /* Big-number size follows the card width (container query) so the longest
     default, "NATIONWIDE" (≈5.1em wide in Roboto Condensed caps), plus its icon
     always fits on one line: (card width − padding − gap) ÷ 5.8em. */
  container-type: inline-size;
  --nx-num: clamp(32px, calc((100cqi - 68px) / 5.8), 64px);
  position: relative; isolation: isolate; overflow: hidden; display: block;
  padding: 36px 28px 40px; color: inherit; text-decoration: none;
  border-right: 1px solid var(--next-border); border-bottom: 1px solid var(--next-border);
}
.nx-stat:last-child { border-right: 0; }
.nx-stat-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 26px; }
.nx-stat-num {
  font: 700 var(--nx-num)/.9 var(--next-font-call); letter-spacing: -.01em; text-transform: uppercase;
  color: var(--next-red); transition: color .3s;
  overflow-wrap: break-word;   /* only if someone types something much longer */
}
/* Icon = cap height of the big number (0.71em in Roboto Condensed), nudged down to
   sit exactly on the first line of it (cap top is 0.084em below the line box top
   at line-height .9). */
.nx-stat-ico {
  flex: none; width: calc(var(--nx-num) * .71); height: calc(var(--nx-num) * .71);
  margin-top: calc(var(--nx-num) * .084);
  color: var(--next-red); transition: color .3s;
}
.nx-stat-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nx-stat-ico img { width: 100%; height: 100%; object-fit: contain; }
.nx-stat-ico.nx-ico-lib { display: grid; place-items: center; font-size: calc(var(--nx-num) * .62); line-height: 1; }
.nx-stat-ico.nx-ico-lib svg { fill: currentColor; stroke: none; }
.nx-stat h3 { margin: 0 0 8px; color: var(--next-black); font: 700 18px/1.3 var(--next-font-head); }
.nx-stat p { margin: 0; font: 400 15.5px/1.55 var(--next-font-head); color: var(--next-body); transition: color .3s; }

/* Hover (from Logiz section 2): two red panels slide in from the sides, on the
   hero button's slant. Text goes black on red (5.9:1), per the brand kit. */
.nx-stat::before, .nx-stat::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; width: 62%;
  background: var(--next-red);
  opacity: 0; transition: transform .35s ease, opacity .35s ease;
}
.nx-stat::before { left: -8%;  transform: translateX(-100%) skewX(calc(var(--nx-slant) * -1)); }
.nx-stat::after  { right: -8%; transform: translateX(100%)  skewX(calc(var(--nx-slant) * -1)); }
.nx-stat:hover::before, .nx-stat:hover::after,
.nx-stat:focus-visible::before, .nx-stat:focus-visible::after { opacity: 1; transform: translateX(0) skewX(calc(var(--nx-slant) * -1)); }
.nx-stat:hover .nx-stat-num, .nx-stat:focus-visible .nx-stat-num,
.nx-stat:hover .nx-stat-ico, .nx-stat:focus-visible .nx-stat-ico,
.nx-stat:hover p, .nx-stat:focus-visible p { color: var(--next-black); }
.nx-stat:focus-visible { outline: 3px solid var(--next-cyan); outline-offset: 2px; }

/* Desktop: sit close under the hero (tablet/phone keep the full spacing) */
@media (min-width: 1101px) {
  .nx-stats { padding-top: 24px; }
}
@media (max-width: 1100px) {
  .nx-stats-in { padding-inline: 28px; }   /* same inset as the hero copy on tablet */
  .nx-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-stat:nth-child(2n) { border-right: 0; }
  /* wider, shorter cards: pull the red panels in so white corners still show */
  .nx-stat::before { left: 0; width: 56%; }
  .nx-stat::after  { right: 0; width: 56%; }
  /* heading block centered beside the intro on its right */
  .nx-stats-head { align-items: center; }
}
@media (max-width: 700px) {
  .nx-stats-head { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .nx-stats-in { padding-inline: 20px; }
  .nx-stats-grid { grid-template-columns: 1fr; }
  .nx-stat { border-right: 0; }
  .nx-stats .intro { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-stat::before, .nx-stat::after, .nx-stat-num, .nx-stat-ico, .nx-stat p { transition: none; }
}