/* ESK Services Scroll — visual styles (desktop look). Layout switching,
   rail stacking, panel heights + fit-scale are driven by esk-services.js. */

.esks { position: relative; background: #ffffff; color: #022450; font-family: "niveaugroteskregular", system-ui, sans-serif; }
.esks *, .esks *::before, .esks *::after { box-sizing: border-box; }
.esks a { color: inherit; text-decoration: none; }
/* Force the component font over the theme's element rules (theme sets
   h2/h3/p font-family, which beats our inherited font otherwise). */
.esks, .esks * { font-family: "niveaugroteskregular", system-ui, sans-serif !important; }
.esks__title, .esks__cname { color: #022450 !important; }

.esks__bg { display: none; }

.esks__scroll { position: relative; }
/* Pinned by JS (position toggled absolute -> fixed -> absolute). Not CSS
   sticky: the theme sets `html,body{overflow-x:hidden}`, which turns the body
   into a scroll container and breaks position:sticky pinning. */
/* flex-start, NOT center: centering the (unscaled) layout box clips the top
   when content is taller than the stage — JS centers via translateY instead. */
.esks__stage { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; }
.esks__fit { position: relative; max-width: 1280px; width: 100%; margin: 0 auto; padding: clamp(48px,6vh,84px) 0 clamp(28px,4vh,56px); display: flex; flex-direction: column; transform-origin: top center; transition: transform .4s ease; will-change: transform; }
/* gutters return once the viewport can no longer fit the grid + margins */
@media (max-width: 1336px) {
  .esks__fit { padding-left: 28px; padding-right: 28px; }
}

/* Header */
.esks__head { display: flex; justify-content: space-between; align-items: center; gap: clamp(24px,3vw,56px); flex-shrink: 0; }
.esks__head-main { min-width: 0; }
.esks__title { margin: 0; font-weight: 800; font-size: var(--esk-h2); line-height: var(--esk-h2-lh); letter-spacing: var(--esk-h2-ls); }
/* Only the two line spans are blocks — NOT the nested accent span, or the
   accent word breaks onto its own line. */
.esks__title > span { display: block; }
.esks__accent { display: inline; color: #022450 !important; }
.esks__intro { margin: clamp(16px,2vh,24px) 0 0; font-size: var(--esk-lead); line-height: 1.55; color: #5B6474; font-weight: 500; max-width: 520px; }

/* Main grid */
.esks__main { display: grid; grid-template-columns: minmax(208px,0.55fr) 1.85fr; gap: clamp(22px,2.6vw,44px); align-items: start; margin-top: clamp(12px,2vh,26px); }

/* Rail */
.esks__rail { position: relative; height: 482px; align-self: start; scrollbar-width: none; -ms-overflow-style: none; }
.esks__rail::-webkit-scrollbar { display: none; width: 0; height: 0; }
.esks__tab { position: absolute; left: 0; right: 0; top: 0; height: 62px; opacity: 0; cursor: pointer; will-change: transform, opacity; transition: transform .75s cubic-bezier(.22,.7,.25,1), opacity .6s cubic-bezier(.22,.7,.25,1), height .6s cubic-bezier(.22,.7,.25,1); }
.esks__card { height: 100%; display: flex; align-items: center; gap: 15px; padding: 0 20px; border-radius: 20px; border: 1.5px solid #E6E8ED; background: rgba(255,255,255,0.55); transition: background .4s ease, border-color .4s ease, box-shadow .4s ease; }
.esks__tile { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: #EDEEF2; color: #7A828F; transition: background .4s ease, color .4s ease; }
.esks__tile svg { width: 23px; height: 23px; }
.esks__tab-body { flex: 1 1 auto; min-width: 0; }
.esks__tab-name { display: block; font-weight: 700; font-size: 19px; letter-spacing: -0.015em; line-height: 1.28; color: #5B6474; transition: color .4s ease; }
.esks__tab-arrow { flex: 0 0 auto; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity .4s ease, transform .4s ease; display: flex; }
.esks__tab.is-active .esks__card { background: #FFFFFF; border-color: var(--accent); box-shadow: 0 26px 50px -28px color-mix(in srgb, var(--accent) 75%, transparent); }
.esks__tab.is-active .esks__tile { background: var(--accent); color: #fff; }
.esks__tab.is-active .esks__tab-name { color: #022450; }
.esks__tab.is-active .esks__tab-arrow { opacity: 1; transform: none; }

/* Content */
.esks__content { position: relative; min-width: 0; align-self: start; }
.esks__panel { position: absolute; top: 0; left: 0; right: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px) scale(0.995); transition: opacity .6s cubic-bezier(.22,.7,.3,1), transform .6s cubic-bezier(.22,.7,.3,1), visibility 0s linear .6s; will-change: opacity, transform; }
.esks__panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; transform: translateY(0) scale(1); transition: opacity .6s cubic-bezier(.22,.7,.3,1), transform .6s cubic-bezier(.22,.7,.3,1); }
.esks__card-main { position: relative; background: #FFFFFF; border: 1.5px solid #E9EBF0; border-radius: 26px; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(26px,2.6vw,42px); box-shadow: 0 30px 60px -42px rgba(2,36,80,0.30); }
.esks__chead { display: flex; align-items: center; gap: 14px; }
.esks__num { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 38px; padding: 0 12px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-weight: 800; font-size: 15px; }
.esks__cname { margin: 0; font-weight: 800; font-size: clamp(26px,2.6vw,40px); letter-spacing: -0.025em; line-height: 1.05; }
.esks__ctag { margin: 16px 0 0; font-size: var(--esk-lead); line-height: 1.5; color: #5B6474; font-weight: 500; max-width: 560px; }

.esks__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: clamp(12px,1.8vh,22px); }
.esks__svc { display: flex; align-items: center; gap: 13px; padding: 12px 15px; border-radius: 14px; border: 1px solid #EAECF1; background: #FAFAFC; position: relative; transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.esks__svc:hover { border-color: color-mix(in srgb, var(--accent) 42%, transparent); background: #fff; transform: translateY(-2px); }
.esks__svc-tile { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.esks__svc-tile svg { width: 23px; height: 23px; }
.esks__svc-body { flex: 1 1 auto; min-width: 0; padding-right: 22px; }
.esks__svc-title { display: block; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; line-height: 2.25; margin-bottom: 3px; color: #022450; }
.esks__svc-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; line-height: 1.45; color: #727A87; font-weight: 500; }
.esks__svc-arrow { position: absolute; right: 13px; top: 50%; margin-top: -9px; color: var(--accent); opacity: 0.5; transition: opacity .2s ease, transform .2s ease; display: flex; }
.esks__svc:hover .esks__svc-arrow { opacity: 1; transform: translateX(3px); }

.esks__cta-wrap { display: flex; justify-content: flex-end; margin-top: clamp(16px,2.4vh,28px); }
/* Unified site CTA — matches the footer "Book A Consultation" button used by
   the AI-First sections: coral, 8px radius, circle-arrow, hover lift + slide. */
.esks__cta { display: inline-flex; align-items: center; gap: 10px; background-color: #e36745; 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; }
.esks__cta, .esks__cta * { font-family: 'Roboto', system-ui, sans-serif !important; color: #fff !important; }
.esks__cta:hover, .esks__cta:focus { color: #fff !important; text-decoration: none; transform: translateY(-1px); }
.esks__cta-ic { flex: 0 0 auto; width: 18px; height: 18px; transition: transform 0.25s ease; stroke: #fff; }
.esks__cta:hover .esks__cta-ic { transform: translateX(4px); }

/* Mobile mode — JS toggles .is-mobile on the root at <=820px and clears the
   desktop inline transforms it set on the tabs, so these rules take over. */
.esks.is-mobile .esks__stage { position: static; width: auto; height: auto; overflow: visible; }
.esks.is-mobile .esks__fit { transform: none !important; }
.esks.is-mobile .esks__main { grid-template-columns: 1fr; gap: 22px; }
.esks.is-mobile .esks__grid { grid-template-columns: 1fr; }
.esks.is-mobile .esks__rail { display: flex; flex-direction: row; height: auto; overflow-x: auto; gap: 12px; padding-bottom: 4px; }
.esks.is-mobile .esks__tab { position: relative; top: auto; left: auto; right: auto; flex: 0 0 auto; width: 150px; height: auto; opacity: 1; }
.esks.is-mobile .esks__card { flex-direction: column; align-items: flex-start; justify-content: flex-start; height: 138px; gap: 16px; padding: 16px; }
.esks.is-mobile .esks__tab-arrow { display: none; }
.esks.is-mobile .esks__tab-name { max-width: none; }
.esks.is-mobile .esks__chead,
.esks.is-mobile .esks__ctag { display: none; }
.esks.is-mobile .esks__cta { width: 100%; justify-content: center; }
.esks.is-mobile .esks__cta-wrap { justify-content: stretch; }

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

/* Signature heading: line 1 = orange kicker, line 2 = statement (Experts pattern). */
.esks__title > span:first-child:not(.esks__hero):not(.esks__support) { font-size: var(--esk-kicker); font-weight: 700; letter-spacing: var(--esk-kicker-ls); text-transform: uppercase; color: var(--accent) !important; margin-bottom: 0.55em; }


/* C4 hero composition: kicker / HERO (display, two-tone) / support line. */
.esks__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; color: #022450 !important; }
.esks__hero .esks__accent { color: #022450 !important; }
.esks__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; color: #022450 !important; margin-top: 0.45em; }


/* Heading pins WITH the section. Size is capped by viewport HEIGHT: tall
   screens get the full display scale, short screens shrink just enough to
   keep the scroll-pin alive (never a hard shrink on big monitors).
   The intro paragraph hides while pinned to save vertical room. */
/* viewport cap removed — hero runs at the full display token; the pin
   engine self-budgets around the taller heading. */
.esks .esks__title .esks__support { font-size: 34px !important; }
.esks__fit { padding-top: min(var(--esk-section-pad), 7vh); }
/* short viewports: trim vertical padding so the CTA stays above the fold
   while pinned (stage sits 84px under the header, budget is tight) */
@media (max-height: 780px) and (min-width: 992px) {
  .esks__fit { padding-top: 3vh; padding-bottom: 14px; }
}
.esks.is-pin .esks__intro { display: none; }

/* Icon-free layout (user call): no rail tab icons, no 01/02 number badge,
   no per-service icon tiles. */
.esks__tab .esks__tile { display: none; }
.esks__num { display: none; }
.esks__svc-tile { display: none; }
.esks__svc { padding: 14px 18px; }

/* Service cards: title-only (descriptions hidden). */
.esks__svc-desc { display: none; }
.esks__svc-title { margin-bottom: 0; }

/* Featured service cards (Option A): icon + arrow, title, keyword list.
   Hover = signature spinning orange light-border + lift. */
@property --esks-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes esksSpin { to { --esks-a: 360deg; } }
/* flex:0 — the grid is only as tall as its content (not stretched to fill the
   panel), so cards equalise to the tallest card instead of leaving empty space
   below short descriptions. align-items:stretch keeps the row heights even. */
.esks__fcards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: clamp(18px,2.4vh,30px); flex: 0 0 auto; align-items: stretch; }
.esks__fcard { position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; height: 100%; border: 1.5px solid #E6E8ED; border-radius: 18px; background: #FFFFFF; padding: 18px 18px 20px; transition: transform .45s cubic-bezier(.22,.7,.3,1); overflow: hidden; }
.esks__fcard::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
  background: conic-gradient(from var(--esks-a),
    transparent 0deg, transparent 40deg,
    color-mix(in srgb, var(--accent) 55%, #fff) 90deg, var(--accent) 120deg, color-mix(in srgb, var(--accent) 30%, #fff) 150deg,
    transparent 200deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s ease; pointer-events: none; z-index: 2; }
.esks__fcard:hover { transform: translateY(-6px); }
.esks__fcard:hover::before { opacity: 1; animation: esksSpin 2.8s linear infinite; }
/* Title now leads the card (icon removed): title left, arrow right, desc below. */
.esks__fcard-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.esks__fcard-arrow { flex: 0 0 auto; color: var(--accent); transition: transform .3s ease; }
.esks__fcard:hover .esks__fcard-arrow { transform: translateX(4px); }
.esks__fcard-title { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; color: #022450; }
.esks__fcard-kw { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; line-height: 1.55; color: #5B6474; font-weight: 500; }
.esks.is-mobile .esks__fcards { grid-template-columns: 1fr; }

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


/* Mobile tab rail — pill style matching the Industries rail: compact,
   high-contrast, orange active state, snap scrolling. */
.esks.is-mobile .esks__rail { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; gap: 8px; padding: 2px 2px 8px; }
.esks.is-mobile .esks__tab { width: auto; scroll-snap-align: start; }
.esks.is-mobile .esks__card {
  flex-direction: row;
  align-items: center;
  height: auto;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1.5px solid #E4E7EC;
}
.esks.is-mobile .esks__tab-name { font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; color: #022450; }
.esks.is-mobile .esks__tab.is-active .esks__card {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}
.esks.is-mobile .esks__tab.is-active .esks__tab-name { color: #fff; }
.esks.is-mobile .esks__tile { display: none; }

/* Mobile: the pin engine's scroll-root height must never survive into the
   stacked layout — leftover inline height showed as a huge gap after the CTA. */
.esks.is-mobile .esks__scroll { height: auto !important; min-height: 0 !important; }


/* Support-line shimmer — same sweep as Why Choose (.eskw__t2): base-colour
   text, orange band drifts through every 9s. Reduced motion: static base. */
.esks__support {
  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: esksGrad 6s ease-in-out infinite !important;
}
@keyframes esksGrad { 0% { background-position: 0% 50%; } 75%, 100% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .esks__support { animation: none !important; }
}