/* Global - CTA Box widget: the CTA Band's look in a box (black, photo fading in on the
 * right, red top bar), with the NEXT logo in its own column.
 * Colors + fonts come from the site brand kit (--next-* tokens).
 */
.nx-ctabox {
  --nx-gutter: clamp(16px, 4vw, 56px);
  box-sizing: border-box;
  padding: clamp(56px, 7vw, 96px) var(--nx-gutter);
  background: var(--next-white); font-family: var(--next-font-head);
}
.nx-ctabox *, .nx-ctabox *::before, .nx-ctabox *::after { box-sizing: border-box; }
.nx-ctabox-box {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: 940px; margin: 0 auto;   /* same width as the FAQ questions */
  display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: stretch;
  background: var(--next-black); color: #D6D6DA;
}
.nx-ctabox--wide .nx-ctabox-box { max-width: calc(1480px - 2 * clamp(28px, 3vw, 56px)); }
.nx-ctabox-box--no-logo { grid-template-columns: minmax(0, 1fr); }
/* Red bar along the top edge, its left end cut at 19.03° (same as the CTA Band) */
.nx-ctabox-box::before { content: ""; position: absolute; right: 0; top: 0; z-index: 2; width: 34%; height: 10px; background: var(--next-red); clip-path: polygon(3.5px 0, 100% 0, 100% 100%, 0 100%); }

.nx-ctabox-bg { position: absolute; inset: 0 0 0 38%; z-index: -1; }
.nx-ctabox-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nx-ctabox-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .78) 35%, rgba(0, 0, 0, .35) 100%); }

.nx-ctabox-logo { display: grid; place-items: center; padding: 40px 32px; border-right: 1px solid rgba(255, 255, 255, .14); color: var(--next-white); }
.nx-ctabox-logo svg, .nx-ctabox-logo img { display: block; width: 120px; max-width: 100%; height: auto; }

.nx-ctabox-copy { padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 64px); }
.nx-ctabox .nx-ctabox-title { margin: 0; max-width: 20ch; font: 700 clamp(30px, 3.6vw, 52px)/1.05 var(--next-font-head); letter-spacing: -.02em; color: var(--next-white); text-wrap: balance; }
.nx-ctabox .nx-ctabox-title b { font-weight: 900; color: var(--next-red); }
.nx-ctabox-text { margin-top: 18px; max-width: 64ch; }
.nx-ctabox-text p { margin: 0 0 12px; font: 400 17px/1.65 var(--next-font-head); color: #D6D6DA; }
.nx-ctabox-text p:last-child { margin-bottom: 0; }
.nx-ctabox-text strong, .nx-ctabox-text b { color: var(--next-white); }
.nx-ctabox-text a { color: var(--next-white); text-decoration-color: var(--next-red); }

.nx-ctabox-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-ctabox .btn { display: inline-flex; align-items: stretch; height: 58px; text-decoration: none; }
.nx-ctabox .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-ctabox .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-ctabox .btn-arrow svg { width: 15px; height: 15px; stroke: #000; fill: none; stroke-width: 2.6; transition: transform .25s; }
.nx-ctabox .btn[href]:hover .btn-label { background: var(--next-red-hover); }
.nx-ctabox .btn[href]:hover .btn-arrow svg { transform: translateX(4px); }
.nx-ctabox .btn:focus-visible { outline: 3px solid var(--next-cyan); outline-offset: 4px; }
.nx-ctabox .phone { display: inline-flex; align-items: center; gap: 12px; color: var(--next-white); text-decoration: none; }
.nx-ctabox .phone .sq { width: 58px; height: 58px; display: grid; place-items: center; background: var(--next-red); }
.nx-ctabox .phone .sq svg { width: 24px; height: 24px; fill: var(--next-black); }
.nx-ctabox .phone small { display: block; font: 700 11px/1.2 var(--next-font-sub); letter-spacing: .12em; text-transform: uppercase; color: #B9B9BE; }
.nx-ctabox .phone b { display: block; font: 700 22px/1.1 var(--next-font-call); letter-spacing: .02em; }
.nx-ctabox .phone:focus-visible { outline: 3px solid var(--next-cyan); outline-offset: 4px; }

@media (max-width: 1100px) {
  .nx-ctabox-box { max-width: none; }
  .nx-ctabox-bg { inset: 0; }
  .nx-ctabox-bg::after { background: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .7) 100%); }
}
@media (max-width: 700px) {
  .nx-ctabox-box { grid-template-columns: 1fr; }
  .nx-ctabox-logo { justify-items: start; padding: 36px 24px 0; border-right: 0; }
  .nx-ctabox-logo svg, .nx-ctabox-logo img { width: 84px; }
  .nx-ctabox-copy { padding: 24px 24px 36px; }
  .nx-ctabox-text p { font-size: 16px; }
}