.csp-hero {
  --csp-bg: #080808;
  --csp-white: #f7f7f7;
  --csp-gray: #b8b8bc;
  color: var(--csp-white);
  color-scheme: dark;
  background-color: var(--csp-bg);
  background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 112px 112px;
  font-family: "CMYKER Gilroy", Gilroy, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  text-align: left;
  isolation: isolate;
  overflow: clip;
}
/* The homepage route class has a mobile background override in performance.css. */
body.home .csp-hero {
  background-color: var(--csp-bg) !important;
  background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px) !important;
}
.csp-hero, .csp-hero *, .csp-hero *::before, .csp-hero *::after { box-sizing: border-box; }
.csp-hero :is(h1,h2,p,figure,ol,li) { margin: 0; padding: 0; font-family: inherit; }
.csp-hero :is(button,a) { font-family: inherit; }
.csp-hero .csp-wrap { width: min(100%, 1390px); padding: 27px 34px 78px; margin: 0 auto; }
.csp-hero .csp-back { color: var(--csp-gray); display: inline-flex; align-items: center; min-height: 42px; font-size: 16px; text-decoration: none; }
.csp-hero .csp-back:hover { color: var(--csp-white); }
.iw-case .csp-hero .csp-back { color: var(--csp-gray) !important; }
.iw-case .csp-hero .csp-back:hover { color: var(--csp-white) !important; }
.csp-hero .csp-stage { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .88fr) minmax(280px, .68fr); gap: clamp(16px, 2.4vw, 34px); align-items: center; min-height: 470px; padding-top: 18px; }
.csp-hero .csp-intro { align-self: center; position: relative; z-index: 1; }
.csp-hero .csp-category { color: var(--csp-accent); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; }
body .csp-hero .csp-intro h1 { color: var(--csp-white); font-size: clamp(44px, 4.1vw, 66px); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; margin: 18px 0 0; overflow-wrap: anywhere; text-transform: none; }
.csp-hero .csp-description { color: var(--csp-gray); max-width: 570px; font-size: clamp(17px, 1.24vw, 20px); line-height: 1.57; margin: 28px 0 0; }
.csp-hero .csp-visual { min-width: 0; width: 100%; min-height: 365px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 0; }
.csp-hero .csp-visual img { display: block; width: 100%; max-width: 405px; max-height: 390px; height: auto; object-fit: contain; filter: drop-shadow(0 24px 24px #0007); }
.csp-hero .csp-visual figcaption { color: #95959b; font-size: 11px; line-height: 1.35; letter-spacing: .02em; text-align: center; margin-top: 8px; }
.csp-hero .csp-offer { position: relative; z-index: 1; min-width: 0; align-self: center; padding-top: 58px; }
.csp-hero .csp-big-number { position: absolute; right: 0; top: -95px; z-index: -1; color: transparent; -webkit-text-stroke: 1px #ffffff18; font-size: clamp(130px, 14vw, 220px); font-weight: 700; line-height: 1; letter-spacing: -.07em; user-select: none; }
.csp-hero .csp-price-label { color: var(--csp-gray); font-size: 14px; letter-spacing: .09em; }
.csp-hero .csp-price { color: var(--csp-white); font-size: clamp(34px, 3.1vw, 49px); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; margin: 17px 0 0; white-space: nowrap; }
.csp-hero .csp-price-note { color: var(--csp-gray); font-size: 15px; line-height: 1.5; min-height: 46px; margin: 18px 0 0; }
.csp-hero .csp-cta { display: block; position: relative; appearance: none; width: 100%; min-height: 72px; border: 0; border-radius: 999px; background: var(--csp-accent); color: #080808; padding: 12px 59px 12px 24px; margin: 25px 0 0; font-size: 16px; font-weight: 700; line-height: 1.2; text-align: left; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.csp-hero .csp-cta::after { content: "↗"; display: grid; place-items: center; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: #080808; color: white; font-size: 25px; font-weight: 400; }
.csp-hero .csp-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 25px #0005; }
.csp-hero .csp-cta[aria-pressed="true"] { background: #f7f7f7; }
.csp-hero .csp-nudge { display: block; width: max-content; max-width: 100%; color: var(--csp-accent); font-family: "Segoe Script", "Comic Sans MS", cursive; font-size: 18px; line-height: 1.25; transform: rotate(-6deg); margin: 24px auto 0; }
.csp-hero .csp-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 27px; list-style: none; padding: 0; margin: 45px 0 0; }
.csp-hero .csp-step { min-width: 0; list-style: none; }
.csp-hero .csp-step__icon, .csp-hero .csp-step__icon svg { display: block; width: 64px; height: 64px; color: var(--csp-white); }
.csp-hero .csp-step__number { display: block; color: var(--csp-accent); font-size: 16px; font-weight: 700; margin-top: 12px; }
body .csp-hero .csp-step h2 { color: var(--csp-white); font-size: 21px; font-weight: 600; letter-spacing: -.018em; line-height: 1.25; margin: 8px 0 0; }
.csp-hero .csp-step p { color: var(--csp-gray); font-size: 17px; line-height: 1.52; margin: 11px 0 0; }
.csp-hero :is(a,button):focus-visible { outline: 2px solid var(--csp-accent); outline-offset: 5px; }

/* Neutral service diagrams; they are illustrations, never client work. */
.csp-diagram { position: relative; width: min(100%,390px); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; color: #fff; }
.csp-diagram--mark { background: radial-gradient(circle at center,#ff299421,transparent 62%); }
.csp-diagram--mark i { width: 62%; aspect-ratio: 1; border: 1px solid #ffffff66; border-radius: 50%; box-shadow: 0 0 0 34px #ff29940e, 0 0 0 68px #ff299409; }
.csp-diagram--mark b { position: absolute; font-size: 160px; font-weight: 400; line-height: 1; color: #ff2994; }
.csp-diagram--mark span { position: absolute; bottom: 11%; left: 9%; font-size: 12px; line-height: 1.2; letter-spacing: .16em; }
.csp-diagram--identity { gap: 0; perspective: 600px; }
.csp-diagram--identity .csp-sheet { position: absolute; display: flex; flex-direction: column; justify-content: space-between; width: 58%; height: 64%; padding: 22px; background: #eee; color: #101010; box-shadow: 0 22px 34px #000a; transform: rotate(-10deg) translateX(-19%); }
.csp-diagram--identity .csp-sheet + .csp-sheet { background: #ff2994; transform: rotate(8deg) translateX(34%); }
.csp-diagram--identity b { font-size: 64px; line-height: 1; }
.csp-diagram--identity span { font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.csp-diagram--marketplace .csp-product { position: absolute; width: 54%; height: 72%; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 16px; background: #fff; color: #111; transform: rotate(-8deg) translateX(-22%); box-shadow: 0 24px 35px #0009; }
.csp-diagram--marketplace .csp-product--second { background: #ff2994; transform: rotate(9deg) translateX(36%); z-index: -1; }
.csp-diagram--marketplace .csp-product span { font-size: 11px; font-weight: 700; letter-spacing: .07em; }
.csp-diagram--marketplace .csp-product i { display: block; width: 70%; aspect-ratio: 1; margin: auto; border-radius: 40% 60% 30% 70%; background: linear-gradient(135deg,#7a42ed,#ff2994); }
.csp-diagram--marketplace .csp-product b { font-size: 17px; line-height: 1.1; }
.csp-diagram--website .csp-browser { width: 78%; height: 62%; display: flex; flex-direction: column; justify-content: space-between; padding: 26px; border: 1px solid #ff2994; border-radius: 10px; background: linear-gradient(135deg,#281d2b,#101010); box-shadow: 0 22px 38px #0009; }
.csp-diagram--website .csp-browser span { color: #ff2994; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.csp-diagram--website .csp-browser b { font-size: 31px; line-height: 1.08; }
.csp-diagram--website .csp-browser i { height: 4px; width: 66%; background: #ff2994; }
.csp-diagram--website .csp-phone { position: absolute; right: 0; bottom: 5%; width: 27%; height: 45%; display: flex; flex-direction: column; justify-content: space-between; padding: 15px 10px; border: 4px solid #eee; border-radius: 18px; background: #251521; box-shadow: 0 16px 24px #0009; }
.csp-diagram--website .csp-phone span { font-size: 8px; }
.csp-diagram--website .csp-phone b { color: #ff2994; font-size: 50px; text-align: right; line-height: 1; }
.csp-diagram--event .csp-paper { position: absolute; width: 58%; height: 74%; padding: 24px 19px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #d9ca94; background: #f7f1dc; color: #222; transform: rotate(-8deg) translateX(-18%); box-shadow: 0 22px 34px #0008; }
.csp-diagram--event .csp-paper--back { transform: rotate(9deg) translateX(33%); background: #e0d5ba; z-index: -1; }
.csp-diagram--event small { font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.csp-diagram--event b { font-family: Georgia,serif; font-size: 35px; line-height: 1; }
.csp-diagram--event span { font-size: 12px; }
.csp-diagram--stickers { background: radial-gradient(circle,#f9e1111a,transparent 69%); }
.csp-diagram--stickers :is(i,b,span,em) { position: absolute; display: grid; place-items: center; font-style: normal; color: #080808; box-shadow: 0 18px 24px #0009; }
.csp-diagram--stickers i { top: 16%; left: 15%; width: 42%; height: 32%; border-radius: 18px; background: #f9e111; font-weight: 800; font-size: 30px; transform: rotate(-12deg); }
.csp-diagram--stickers b { top: 18%; right: 9%; width: 32%; aspect-ratio: 1; border-radius: 50%; background: white; font-size: 60px; transform: rotate(14deg); }
.csp-diagram--stickers span { left: 26%; bottom: 14%; width: 48%; height: 34%; border-radius: 20px; background: #dedede; font-size: 17px; font-weight: 800; line-height: 1.15; text-align: center; transform: rotate(7deg); }
.csp-diagram--stickers em { right: 10%; bottom: 17%; width: 20%; aspect-ratio: 1; border-radius: 50%; background: #f9e111; font-size: 40px; }
.csp-diagram--prepress .csp-file { width: 68%; height: 78%; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #17d6e9; background: #f5f5f5; color: #111; box-shadow: 0 0 0 15px #17d6e918, 0 20px 30px #0008; }
.csp-diagram--prepress .csp-file span { font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.csp-diagram--prepress .csp-file b { align-self: center; color: #17b7c9; font-size: 110px; font-weight: 400; line-height: 1; }
.csp-diagram--prepress .csp-file i { height: 8px; width: 100%; background: linear-gradient(90deg,#17d6e9 0 25%,#ff2994 25% 50%,#f9e111 50% 75%,#111 75%); }
.csp-diagram--prepress .csp-file small { font-size: 11px; }
.csp-diagram--rebuild { gap: 12px; }
.csp-diagram--rebuild :is(.csp-source,.csp-target) { width: 39%; height: 62%; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; border: 1px solid #777; background: #333; }
.csp-diagram--rebuild .csp-target { border-color: #17d6e9; background: #edf9f9; color: #111; }
.csp-diagram--rebuild small { font-size: 9px; letter-spacing: .08em; }
.csp-diagram--rebuild b { align-self: center; font-size: 96px; line-height: 1; }
.csp-diagram--rebuild .csp-source b { filter: blur(3px); }
.csp-diagram--rebuild > span { color: #17d6e9; font-size: 34px; }
.csp-diagram--retouch { gap: 0; }
.csp-diagram--retouch :is(.csp-before,.csp-after) { height: 73%; width: 41%; display: flex; align-items: end; padding: 16px; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.csp-diagram--retouch .csp-before { background: linear-gradient(150deg,#42515b,#977d78,#bb9e8b); filter: saturate(.45); }
.csp-diagram--retouch .csp-after { background: linear-gradient(150deg,#185b86,#ed8a65,#f4bd85); }
.csp-diagram--retouch i { position: absolute; width: 4px; height: 73%; background: white; }

@media (max-width: 1199px) {
  .csp-hero .csp-stage { grid-template-columns: minmax(0,1fr) minmax(0,.8fr); min-height: 0; }
  .csp-hero .csp-intro { grid-column: 1; }
  .csp-hero .csp-visual { grid-column: 2; min-height: 300px; }
  .csp-hero .csp-offer { grid-column: 1/-1; padding-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
  .csp-hero .csp-big-number { display: none; }
  .csp-hero .csp-price-label, .csp-hero .csp-price, .csp-hero .csp-price-note { grid-column: 1; }
  .csp-hero .csp-cta { grid-column: 2; grid-row: 2 / 4; align-self: center; margin: 0; }
  .csp-hero .csp-nudge { display: none; }
  .csp-hero .csp-steps { margin-top: 65px; }
}
@media (max-width: 767px) {
  .csp-hero .csp-wrap { padding: 19px 21px 54px; }
  .csp-hero .csp-back { font-size: 15px; }
  .csp-hero .csp-stage { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 22px; }
  .csp-hero .csp-category { font-size: 12px; }
  body .csp-hero .csp-intro h1 { font-size: clamp(36px, 9.8vw, 52px); margin-top: 13px; }
  .csp-hero .csp-description { font-size: 17px; line-height: 1.55; margin-top: 20px; }
  .csp-hero .csp-visual { width: 100%; min-height: 0; margin: 14px auto 0; }
  .csp-hero .csp-visual img { max-height: 300px; }
  .csp-diagram { width: min(100%,310px); }
  .csp-hero .csp-offer { display: block; width: 100%; margin-top: 19px; }
  .csp-hero .csp-price-label { font-size: 12px; }
  .csp-hero .csp-price { font-size: 41px; margin-top: 10px; }
  .csp-hero .csp-price-note { min-height: 0; font-size: 15px; margin-top: 12px; }
  .csp-hero .csp-cta { min-height: 62px; margin-top: 22px; padding-left: 24px; font-size: 17px; }
  .csp-hero .csp-steps { grid-template-columns: 1fr; gap: 27px; margin-top: 48px; }
  .csp-hero .csp-step { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 0 17px; }
  .csp-hero .csp-step__icon { grid-column: 1; grid-row: 1 / 4; }
  .csp-hero .csp-step__icon, .csp-hero .csp-step__icon svg { width: 48px; height: 48px; }
  .csp-hero .csp-step__number { grid-column: 2; grid-row: 1; margin: 0; font-size: 13px; }
  body .csp-hero .csp-step h2 { grid-column: 2; grid-row: 2; font-size: 18px; margin: 3px 0 0; }
  .csp-hero .csp-step p { grid-column: 2; grid-row: 3; font-size: 16px; margin: 6px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .csp-hero .csp-cta { transition: none; } .csp-hero .csp-cta:hover { transform: none; } }