/* ESK Ways to Build — engagement model cards. Hover is CSS; the staggered
   entrance runs from esk-waysbuild.js. */

.eskwb { position: relative; overflow: hidden; background: #ffffff; color: #022450; }
.eskwb *, .eskwb *::before, .eskwb *::after { box-sizing: border-box; }
.eskwb a { color: inherit; text-decoration: none; }
.eskwb, .eskwb * { font-family: "niveaugroteskregular", system-ui, sans-serif !important; }

.eskwb__glow { display: none; }
.eskwb__grid-bg { display: none; }

.eskwb__wrap { position: relative; max-width: 1336px; margin: 0 auto; padding: var(--esk-section-pad) 28px; }

/* Header */
.eskwb__head { max-width: none; }
.eskwb__title { margin: 0; font-weight: 800; font-size: var(--esk-display) !important; line-height: var(--esk-display-lh) !important; letter-spacing: var(--esk-display-ls); text-transform: uppercase; color: #022450 !important; }
.eskwb__hl { color: #022450 !important; }
.eskwb__sub { margin: clamp(10px,1.6vh,18px) 0 0; font-weight: 800; font-size: var(--esk-subhead); line-height: var(--esk-subhead-lh); letter-spacing: -0.02em; text-transform: uppercase; color: #022450; }
.eskwb__desc { margin: clamp(14px,1.8vh,22px) 0 0; max-width: 560px; font-size: var(--esk-lead); line-height: 1.5; font-weight: 500; color: #5B6474; }

/* Cards */
.eskwb__cards { margin-top: clamp(34px,5vh,60px); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(18px,1.8vw,26px); }
.eskwb__card { position: relative; display: flex; flex-direction: column; border-radius: 24px; padding: clamp(26px,2.4vw,40px); background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72)); border: 1px solid rgba(2,36,80,0.08); backdrop-filter: blur(6px); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 18px 40px -28px rgba(2,36,80,0.35); transition: transform .4s cubic-bezier(.22,.7,.3,1), box-shadow .4s ease, border-color .4s ease; overflow: hidden; }
.eskwb__card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(2,36,80,0.45), 0 0 0 1px var(--accent); }

.eskwb__card-top { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(22px,3vh,40px); }
.eskwb__tile { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent); }
.eskwb__card-title { position: relative; margin: 0; font-weight: 800; font-size: clamp(26px,2.4vw,36px); line-height: 1.03; letter-spacing: -0.02em; color: #022450 !important; }
.eskwb__card-desc { position: relative; margin: clamp(14px,1.8vh,20px) 0 0; font-size: clamp(15px,1.05vw,17px); line-height: 1.55; font-weight: 500; color: #5B6474; }
.eskwb__card-foot { position: relative; margin-top: auto; padding-top: clamp(22px,3vh,34px); }
.eskwb__tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: clamp(12px,0.9vw,13.5px); letter-spacing: 0.06em; text-transform: uppercase; color: #022450; }
.eskwb__tag.is-accent { color: var(--accent) !important; }

/* Featured (dark) card */
.eskwb__card.is-featured { background: linear-gradient(155deg, #0A3268 0%, #022450 60%, #011B3C 100%); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: none; box-shadow: 0 30px 60px -30px rgba(2,36,80,0.7), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent); }
.eskwb__card.is-featured:hover { box-shadow: 0 40px 80px -30px rgba(2,36,80,0.8), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.eskwb__card-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(340px 220px at 82% 0%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 65%); }
.eskwb__card.is-featured .eskwb__tile { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: #FFB59E; }
.eskwb__card.is-featured .eskwb__card-title { color: #FFFFFF !important; }
.eskwb__card.is-featured .eskwb__card-desc { color: rgba(255,255,255,0.72); }
.eskwb__card.is-featured .eskwb__tag { color: #FFB59E !important; }
.eskwb__badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: #fff !important; font-weight: 800; font-size: clamp(10.5px,0.8vw,12px); letter-spacing: 0.12em; text-transform: uppercase; }
.eskwb__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.25); }

/* CTA — footer-button DNA scaled to the design size */
.eskwb__cta-wrap { margin-top: clamp(34px,5vh,60px); }
.eskwb__cta { display: inline-flex; align-items: center; gap: 10px; background-color: var(--accent); color: #fff !important; font-weight: 500; font-size: 15px; padding: 14px 28px; border-radius: 8px; text-decoration: none; white-space: nowrap; box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--accent) 65%, transparent); transition: background 0.25s ease, transform 0.3s cubic-bezier(.22,.7,.3,1), box-shadow 0.3s ease; }
.eskwb__cta, .eskwb__cta * { font-family: 'Roboto', system-ui, sans-serif !important; color: #fff !important; }
.eskwb__cta:hover, .eskwb__cta:focus { color: #fff !important; text-decoration: none; transform: translateY(-1px); box-shadow: 0 26px 50px -16px color-mix(in srgb, var(--accent) 75%, transparent); }
.eskwb__cta-ic { flex: 0 0 auto; width: 18px; height: 18px; transition: transform 0.3s cubic-bezier(.22,.7,.3,1); stroke: #fff; }
.eskwb__cta:hover .eskwb__cta-ic { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .eskwb__card:hover, .eskwb__cta:hover { transform: none; }
}

/* 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(.eskwb) { 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(.eskwb) { padding-left: 0 !important; padding-right: 0 !important; }
}


/* C4 hero slots: sub-line aligned to the shared support spec. */
.eskwb__sub { 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; margin-top: 0.35em; }

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


/* Support-line shimmer — same sweep as Why Choose (.eskw__t2). Longhands so
   background-position stays animatable (a !important shorthand would freeze it). */
.eskwb__sub {
  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: eskwbGrad 6s ease-in-out infinite !important;
}
@keyframes eskwbGrad { 0% { background-position: 0% 50%; } 75%, 100% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .eskwb__sub { animation: none !important; } }