/* ESK Experts — framed team cards. Hover is CSS; entrance in esk-experts.js. */

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

.eske__outer { position: relative; max-width: 1336px; margin: 0 auto; padding: var(--esk-section-pad) 28px; }
.eske__frame { position: relative; border-radius: 0; background: transparent; border: none; box-shadow: none; padding: 0; overflow: hidden; }

/* Header */
.eske__head { margin-bottom: clamp(32px,4.5vh,56px); }
.eske__eyebrow { font-weight: 700; font-size: var(--esk-kicker); letter-spacing: var(--esk-kicker-ls); color: var(--accent) !important; text-transform: uppercase; }
.eske__title { margin: 4px 0 0; font-weight: 800; font-size: var(--esk-display) !important; line-height: var(--esk-display-lh) !important; letter-spacing: var(--esk-display-ls); color: var(--navy) !important; text-transform: uppercase; }
.eske__bar { display: none; }
.eske__sub { margin: 0; font-weight: 700; font-size: var(--esk-subhead); letter-spacing: 0.005em; color: var(--navy) !important; text-transform: uppercase; }
.eske__lead { margin: clamp(10px,1.4vh,16px) 0 0; max-width: 54ch; font-size: var(--esk-lead); line-height: 1.5; font-weight: 400; color: #6B7280; }

/* Cards */
.eske__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px), 1fr)); gap: clamp(20px,2.6vw,34px); }
.eske__card { display: block; border-radius: 32px; border: 1.5px solid #E7E9EE; background: transparent; padding: clamp(10px,0.9vw,13px); cursor: pointer; transition: transform .5s cubic-bezier(.22,.7,.3,1), border-color .5s ease; }
.eske__card:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.eske__card-in { border-radius: 20px; background: #FFFFFF; border: 1px solid #ECEDF1; box-shadow: 0 6px 18px -12px rgba(2,36,80,0.10); overflow: hidden; }

/* Photo */
.eske__photo-wrap { position: relative; width: 100%; aspect-ratio: 1/1.02; background: var(--navy); overflow: hidden; }
.eske__photo-glow { position: absolute; inset: 0; background: radial-gradient(120% 90% at 78% 12%, rgba(88,112,168,0.34), transparent 58%), radial-gradient(120% 120% at 20% 100%, rgba(9,15,30,0.55), transparent 60%); }
.eske__photo-hatch { position: absolute; inset: 0; opacity: 0.5; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 46px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 5%, transparent) 0 1px, transparent 1px 46px); }
.eske__photo { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.22,.7,.3,1); }
.eske__card:hover .eske__photo { transform: scale(1.045); }
/* cover fills the full card width; the taller 4:3 box + face-zone anchor
   (18% from top) keeps heads fully in frame — only excess bg is trimmed. */
.eske__photo .eske__img, .eske__photo img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: none !important; object-fit: cover; object-position: 50% 12%; display: block; }
.eske__tab { display: none; } /* orange accent bar hidden per request */

/* Footer */
.eske__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #FAFAFB; padding: clamp(20px,2.1vw,30px) clamp(18px,2vw,30px) clamp(20px,2.2vw,32px) clamp(20px,2.5vw,36px); }
.eske__who { min-width: 0; }
.eske__name { font-weight: 800; font-size: clamp(24px,2.5vw,33px); letter-spacing: -0.005em; color: var(--navy) !important; text-transform: uppercase; line-height: 1.05; }
.eske__role { margin-top: 8px; font-weight: 500; font-size: clamp(15px,1.35vw,19px); color: #5F6B7A; }

@media (prefers-reduced-motion: reduce) {
  .eske__card:hover { transform: none; }
  .eske__card:hover .eske__photo { 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(.eske) { 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(.eske) { padding-left: 0 !important; padding-right: 0 !important; }
}


/* C4 hero slots: sub-line aligned to the shared support spec. */
.eske__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; }

/* mobile support size */
@media (max-width: 767px) {
  .eske__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). */
.eske__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: eskeGrad 6s ease-in-out infinite !important;
}
@keyframes eskeGrad { 0% { background-position: 0% 50%; } 75%, 100% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .eske__sub { animation: none !important; } }