/* NEXT CTA Band widget: photo behind a dark fade, heading, text, button and phone.
 * Colors + fonts come from the site brand kit (--next-* tokens).
 */
.nx-cta {
  --nx-gutter: clamp(16px, 4vw, 56px);
  position: relative; overflow: hidden; isolation: isolate; box-sizing: border-box;
  padding: clamp(72px, 9vw, 130px) var(--nx-gutter);
  background: var(--next-black); color: #D6D6DA; font-family: var(--next-font-head);
}
.nx-cta *, .nx-cta *::before, .nx-cta *::after { box-sizing: border-box; }
.nx-cta-bg { position: absolute; inset: 0; z-index: -1; }
.nx-cta-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nx-cta-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .7) 45%, rgba(0, 0, 0, .25) 100%); }
/* Red bar along the top edge, its left end cut at 19.03° */
.nx-cta::before { content: ""; position: absolute; right: 0; top: 0; width: 34%; height: 10px; background: var(--next-red); clip-path: polygon(3.5px 0, 100% 0, 100% 100%, 0 100%); }
.nx-cta-in { position: relative; max-width: 1480px; margin: 0 auto; padding-inline: clamp(28px, 3vw, 56px); }

.nx-cta .nx-cta-title { margin: 0; max-width: 16ch; font: 700 clamp(34px, 4.4vw, 64px)/1.04 var(--next-font-head); letter-spacing: -.02em; color: var(--next-white); text-wrap: balance; }
.nx-cta .nx-cta-title b { font-weight: 900; color: var(--next-red); }
.nx-cta-text { margin: 18px 0 0; max-width: 52ch; font: 400 18px/1.6 var(--next-font-head); color: #D6D6DA; }

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

@media (max-width: 1100px) {
  .nx-cta-in { padding-inline: 28px; }
  .nx-cta-bg::after { background: linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .65) 100%); }
}
@media (max-width: 560px) {
  .nx-cta-in { padding-inline: 20px; }
  .nx-cta-text { font-size: 16px; }
}