/* ESK AI Tools Stack — headline + CTA + logo marquee. Marquee timing/pause
   is applied per row by esk-toolstack.js. */

.eskt { position: relative; overflow: hidden; background: #ffffff; color: #022450; padding: var(--esk-section-pad) 0; }
.eskt *, .eskt *::before, .eskt *::after { box-sizing: border-box; }
.eskt a { color: inherit; text-decoration: none; }
/* Force the component font over the theme's element rules. */
.eskt, .eskt * { font-family: "niveaugroteskregular", system-ui, sans-serif !important; }

.eskt__wrap { position: relative; z-index: 2; max-width: 1336px; margin: 0 auto; padding: 0 28px; }

/* Heading — bumped above the design size per request. */
.eskt__title { margin: 0; font-weight: 800; font-size: var(--esk-h2); line-height: var(--esk-h2-lh); letter-spacing: var(--esk-h2-ls); color: #022450 !important; }
.eskt__title > span { display: block; }
.eskt__hl { display: inline; color: #022450 !important; }

.eskt__sub { margin: clamp(16px,2vw,26px) 0 0; color: #022450 !important; font-weight: 600; font-size: var(--esk-subhead); letter-spacing: -0.01em; }
.eskt__sub b { font-weight: 800; }

/* CTA — unified site footer "Book A Consultation" button (bg follows accent). */
.eskt__cta-wrap { margin: clamp(24px,3vw,38px) 0 0; }
.eskt__cta { display: inline-flex; align-items: center; gap: 10px; background-color: var(--accent); color: #fff !important; font-size: 15px; font-weight: 500; padding: 14px 28px; border-radius: 8px; text-decoration: none; transition: background 0.25s ease, transform 0.2s ease; white-space: nowrap; }
.eskt__cta, .eskt__cta * { font-family: 'Roboto', system-ui, sans-serif !important; color: #fff !important; }
.eskt__cta:hover, .eskt__cta:focus { color: #fff !important; text-decoration: none; transform: translateY(-1px); }
.eskt__cta-ic { flex: 0 0 auto; width: 18px; height: 18px; transition: transform 0.25s ease; stroke: #fff; }
.eskt__cta:hover .eskt__cta-ic { transform: translateX(4px); }

/* Marquee */
@keyframes esktMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.eskt__rows { margin-top: clamp(40px,5vw,74px); display: flex; flex-direction: column; gap: clamp(12px,1.4vw,18px); }
.eskt__row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.eskt__track { display: flex; gap: clamp(12px,1.2vw,18px); width: max-content; will-change: transform; }
.eskt__chip { display: flex; align-items: center; gap: 13px; flex: 0 0 auto; height: clamp(66px,5.4vw,80px); padding: 0 clamp(20px,2vw,32px); border-radius: 16px; border: 1.5px solid #E9EBF0; background: #FFFFFF; box-shadow: 0 14px 28px -22px rgba(2,36,80,0.30); }
.eskt__mark { display: inline-flex; align-items: center; justify-content: center; height: 36px; flex: 0 0 auto; }
.eskt__label { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: #022450; white-space: nowrap; }
.eskt__label.is-italic { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .eskt__track { animation: none !important; }
}

/* Full-bleed inside WPBakery columns: drop the builder's default
   15px column padding when this element is the column content. */
.vc_column_container > .vc_column-inner:has(.eskt) { padding-left: 0; padding-right: 0; }

/* Kill the theme's mobile .vc_row{padding:0 12px} (320-768 media rule)
   for rows that contain this element — full-bleed on mobile too. */
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .vc_row:has(.eskt) { padding-left: 0 !important; padding-right: 0 !important; }
}


/* C4 hero slots. */
.eskt__kicker { font-size: var(--esk-kicker) !important; font-weight: 700; letter-spacing: var(--esk-kicker-ls); text-transform: uppercase; display: block; margin-bottom: 0.55em; color: var(--accent) !important; }
.eskt__hero { font-size: var(--esk-display) !important; line-height: var(--esk-display-lh) !important; letter-spacing: var(--esk-display-ls); font-weight: 800; text-transform: uppercase; display: block; color: #022450 !important; }
.eskt__hero .eskt__hl { color: #022450 !important; }
.eskt__support { font-size: clamp(22px, 2.4vw, 34px) !important; line-height: 1.15 !important; font-weight: 800; letter-spacing: 0.04em !important; word-spacing: 0.15em; text-transform: uppercase; display: block; margin-top: 0.45em; color: #022450 !important; }

/* mobile support size */
@media (max-width: 767px) {
  .eskt__support { font-size: 18px !important; }
}


/* Support-line shimmer — same sweep as Why Choose (.eskw__t2): base-colour
   text, orange band drifts through every 9s. Reduced motion: static base. */
.eskt__sub, .eskt__sub b {
  background-image: linear-gradient(100deg, #022450 0%, #022450 42%, #e36745 50%, #022450 58%, #022450 100%) !important;
  background-size: 300% auto !important;
  background-position: 0% 50%;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: esktGrad 6s ease-in-out infinite !important;
}
@keyframes esktGrad { 0% { background-position: 0% 50%; } 75%, 100% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .eskt__sub, .eskt__sub b { animation: none !important; }
}