/* ═══ CTA Stripes ═══ */

.wtk-cs{
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
  background-color:#0a1821;
  color:#ffffff;
  text-align:center;
}
/* Full-bleed – same technique as the hero */
.wtk-cs--full{
  width:100vw !important;
  max-width:none !important;
  margin-left:calc(-50vw + 50%) !important;
}

/* Two slanted stripes, positioned independently and skewed around their own centre */
.wtk-cs-stripes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.wtk-cs-stripe{position:absolute;top:-20%;height:140%;transform:translateX(-50%) skewX(var(--wtk-cs-skew,-16deg))}
.wtk-cs-stripe-1{left:27%;width:4.5%;background-color:#2c6a69}
.wtk-cs-stripe-2{left:34%;width:5.5%;background-color:#f7941d}

.wtk-cs-inner{position:relative;z-index:2;padding:100px 0}
.wtk-cs-container{width:calc(100% - 64px);max-width:760px;margin:0 auto}

/* .wtk-cs prefix keeps these above theme / Elementor kit heading & paragraph rules */
.wtk-cs .wtk-cs-title{margin:0 0 26px;color:#ffffff;font-size:clamp(28px,3.6vw,44px);font-weight:900;line-height:1.15;text-transform:uppercase}
.wtk-cs .wtk-cs-desc{max-width:640px;margin:0 auto 40px;color:rgba(255,255,255,.75);font-size:18px;line-height:1.6}

.wtk-cs .wtk-cs-btn{
  display:inline-block;
  padding:20px 34px;
  background-color:#f7941d;
  color:#0a1821;
  font-size:15px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background-color .2s,color .2s;
}
.wtk-cs .wtk-cs-btn:hover{background-color:#ffffff;color:#0a1821}

.wtk-cs .wtk-cs-caption{margin-top:26px;color:#5c7480;font-family:'Roboto Mono',monospace,system-ui;font-size:12px;letter-spacing:.2em;text-transform:uppercase}

@media(max-width:767px){
  .wtk-cs-inner{padding:64px 0}
  .wtk-cs-container{width:calc(100% - 44px)}
  .wtk-cs .wtk-cs-desc{font-size:16px}
  .wtk-cs .wtk-cs-btn{display:block}
  .wtk-cs .wtk-cs-caption{font-size:11px;letter-spacing:.14em}
}