/* ==========================================================================
   ESK Stages — "Five Stages" process timeline section
   Namespaced .esk-st — safe to load anywhere.
   Fonts: inherits theme Montserrat; mono accents use system mono stack.
   ========================================================================== */

.esk-st,
.esk-st * { box-sizing: border-box; }

.esk-st {
	--esk-st-accent: #E0664C;
	--esk-st-accent-soft: #F5A18B;
	--esk-st-navy: #022450;
	--esk-st-ink: #0B1B33;
	--esk-st-bg: #F6F8FB;
	--esk-st-muted: #51617C;
	--esk-st-track: #E2E8F1;
	position: relative;
	background: var(--esk-st-bg);
	padding: 116px 0;
	overflow: hidden;
	font-family: Montserrat, system-ui, sans-serif;
	/* full-bleed breakout from any theme container */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.esk-st__inner {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 28px;
}

/* ---- oversized heading --------------------------------------------------- */
.esk-st__title {
	margin: 0;
	font-family: Montserrat, system-ui, sans-serif;
	font-weight: 700; /* same weight as every other section heading */
	font-size: clamp(24px, 2.9vw, 37px); /* same scale as every other section heading */
	line-height: 1.06;
	letter-spacing: -.025em;
}
.esk-st__t1 { color: var(--esk-st-navy); }
.esk-st__t2 {
	background: linear-gradient(100deg, var(--esk-st-accent), var(--esk-st-accent-soft), #7FB2FF, var(--esk-st-accent));
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: esk-st-gradShift 7s ease-in-out infinite;
}
.esk-st__sub {
	margin: 10px 0 0;
	font-family: Montserrat, system-ui, sans-serif;
	font-weight: 500;
	font-size: clamp(15px, 1.8vw, 20px); /* balanced against the standard heading size */
	letter-spacing: -.01em;
	color: var(--esk-st-ink);
}
.esk-st__sub b,
.esk-st__sub strong { font-weight: 700; }
.esk-st__desc {
	margin: 16px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--esk-st-muted);
	max-width: 560px;
}

/* ---- columns -------------------------------------------------------------- */
.esk-st__cols {
	display: flex;
	gap: 40px;
	margin-top: 60px;
	align-items: flex-start;
	flex-wrap: wrap;
}
.esk-st__list {
	flex: 1.15;
	min-width: 300px;
	display: grid;
	gap: 34px;
}
.esk-st__ititle {
	font-family: Montserrat, system-ui, sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--esk-st-ink);
	margin: 0 0 8px;
}
.esk-st__idesc {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--esk-st-muted);
	margin: 0;
	max-width: 520px;
}

/* ---- timeline rail --------------------------------------------------------- */
.esk-st__rail {
	flex: 0 0 44px;
	position: relative;
	align-self: stretch;
	display: flex;
	justify-content: center;
	min-height: 360px;
}
.esk-st__track {
	position: absolute;
	top: 8px;
	bottom: 8px;
	width: 3px;
	background: var(--esk-st-track);
	border-radius: 3px;
}
.esk-st__fill {
	position: absolute;
	top: 8px;
	width: 3px;
	height: 0%;
	max-height: calc(100% - 16px);
	background: linear-gradient(180deg, var(--esk-st-accent), var(--esk-st-navy));
	border-radius: 3px;
	transition: height .2s linear;
}
.esk-st__dot {
	position: absolute;
	border-radius: 50%;
}
.esk-st__dot--first {
	top: 4px;
	width: 22px;
	height: 22px;
	border: 5px solid var(--esk-st-accent);
	background: var(--esk-st-bg);
}
.esk-st__dot--mid {
	width: 16px;
	height: 16px;
	background: var(--esk-st-accent);
}
.esk-st__dot--last {
	bottom: 4px;
	width: 22px;
	height: 22px;
	border: 5px solid var(--esk-st-navy);
	background: var(--esk-st-bg);
}

/* ---- figure / robot --------------------------------------------------------- */
.esk-st__figure {
	flex: 1;
	min-width: 280px;
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: center;
}
.esk-st__robot,
.esk-st__img {
	width: min(420px, 100%);
	height: auto;
	display: block;
}
.esk-st__ship-txt {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 9.5px;
	fill: #fff;
}

/* robot animations */
.esk-st__bot { animation: esk-st-floatB 3.5s ease-in-out infinite; }
.esk-st__eyes {
	animation: esk-st-blink 3s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}
.esk-st__arm {
	animation: esk-st-armSwing 1.8s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: 10% 80%;
}
.esk-st__tb {
	animation: esk-st-typeBar 2.4s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: left center;
}
.esk-st__tb--2 { animation-delay: .25s; }
.esk-st__tb--3 { animation-delay: .5s; }
.esk-st__tb--4 { animation-delay: .75s; }
.esk-st__pop { animation: esk-st-popIn 2.4s ease-in-out infinite 1.1s; }

/* ---- reveal animations -------------------------------------------------------- */
.esk-st [data-esk-st-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
.esk-st [data-esk-st-reveal][data-rt="left"] { transform: translateX(-32px); }
.esk-st [data-esk-st-reveal].is-in {
	opacity: 1;
	transform: none;
}
.esk-st.no-js [data-esk-st-reveal] {
	opacity: 1;
	transform: none;
}

/* ---- keyframes (namespaced) ------------------------------------------------------ */
@keyframes esk-st-gradShift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
@keyframes esk-st-floatB {
	0%, 100% { transform: translateY(0) translateX(0); }
	50%      { transform: translateY(10px) translateX(6px); }
}
@keyframes esk-st-blink {
	0%, 44%, 52%, 100% { transform: scaleY(1); }
	48%                { transform: scaleY(.1); }
}
@keyframes esk-st-armSwing {
	0%, 100% { transform: rotate(0deg); }
	50%      { transform: rotate(-8deg); }
}
@keyframes esk-st-typeBar {
	0%       { transform: scaleX(0); opacity: 0; }
	18%      { opacity: 1; }
	38%, 78% { transform: scaleX(1); opacity: 1; }
	100%     { transform: scaleX(1); opacity: 0; }
}
@keyframes esk-st-popIn {
	0%, 8%     { transform: scale(.6); opacity: 0; }
	18%        { transform: scale(1.06); opacity: 1; }
	24%, 82%   { transform: scale(1); opacity: 1; }
	100%       { transform: scale(1); opacity: 0; }
}

/* ---- reduced motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.esk-st__t2,
	.esk-st__bot,
	.esk-st__eyes,
	.esk-st__arm,
	.esk-st__tb,
	.esk-st__pop,
	.esk-st__item::before { animation: none; }
	.esk-st [data-esk-st-reveal] { opacity: 1; transform: none; transition: none; }
	.esk-st__fill { transition: none; }
}

/* ---- mobile -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.esk-st { padding: 72px 0; }
	.esk-st__inner { padding: 0 20px; }
	.esk-st__cols { gap: 28px; margin-top: 40px; }
	.esk-st__title { line-height: 1.2; }
	.esk-st__sub { line-height: 1.35; }
	.esk-st__ititle { line-height: 1.4; }
	.esk-st__rail { display: none; }

	/* mobile timeline: gradient line + dots run down the left of the stages */
	.esk-st__list {
		gap: 26px;
		position: relative;
		padding-left: 30px;
	}
	/* track */
	.esk-st__list::before {
		content: "";
		position: absolute;
		left: 8px;
		top: 8px;
		bottom: 8px;
		width: 3px;
		border-radius: 3px;
		background: var(--esk-st-track);
	}
	/* scroll-progress fill (height driven by JS via --esk-st-mfill) */
	.esk-st__list::after {
		content: "";
		position: absolute;
		left: 8px;
		top: 8px;
		width: 3px;
		height: var(--esk-st-mfill, 0%);
		max-height: calc(100% - 16px);
		border-radius: 3px;
		background: linear-gradient(180deg, var(--esk-st-accent), var(--esk-st-navy));
		box-shadow: 0 0 10px rgba(224, 102, 76, .45);
		transition: height .2s linear;
	}
	.esk-st__item { position: relative; }
	.esk-st__item::before {
		content: "";
		position: absolute;
		left: -29px;
		top: 3px;
		width: 17px;
		height: 17px;
		border-radius: 50%;
		background: var(--esk-st-bg);
		border: 4px solid var(--esk-st-accent);
		animation: esk-st-dotPulse 2.4s ease-in-out infinite;
	}
	.esk-st__item:nth-child(2)::before { animation-delay: .4s; }
	.esk-st__item:nth-child(3)::before { animation-delay: .8s; }
	.esk-st__item:nth-child(4)::before { animation-delay: 1.2s; }
	.esk-st__item:last-child::before {
		border-color: var(--esk-st-navy);
		animation-delay: 1.6s;
	}
}
@keyframes esk-st-dotPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(224, 102, 76, .35); }
	50%      { box-shadow: 0 0 0 6px rgba(224, 102, 76, 0); }
}

/* ============================================================
   Component-global (every page using [esk_stages]) — inner wrap on the page's 1280px grid
   (user-supplied values). Other pages using this section untouched.
   ============================================================ */
.esk-st__inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 28px 0 0; }
/* Below the grid width the wrap needs both side gutters back. */
@media (max-width: 1279px) {
  .esk-st__inner { padding: 0 20px; }
}

/* Section surface matches the page's flat background. !important because the
   component prints its admin colour settings as an inline style var. */
.esk-st { --esk-st-bg: #ffffff; background: #ffffff !important; }

/* C4 heading: FIVE STAGES = display hero, all navy (gradient stripped);
   sub line = the shared support spec used by every other section. */
.esk-st__title, .esk-st__title * {
  font-family: "niveaugroteskregular", system-ui, sans-serif !important;
}
.esk-st__title {
  font-size: var(--esk-display, clamp(72px, 10vw, 160px)) !important;
  line-height: var(--esk-display-lh, 0.88) !important;
  letter-spacing: var(--esk-display-ls, normal);
  font-weight: 800;
  text-transform: uppercase;
  color: #022450 !important;
}
.esk-st__t1 { color: #022450 !important; }
.esk-st__t2 {
  background: none !important; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: currentColor; color: #022450 !important; animation: none !important;
}
.esk-st__sub, .esk-st__sub b, .esk-st__sub strong {
  font-family: "niveaugroteskregular", system-ui, sans-serif !important;
  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;
}
.esk-st__sub { margin-top: 0.35em; }

/* mobile support size */
@media (max-width: 767px) {
  .esk-st__sub, .esk-st__sub b, .esk-st__sub strong { font-size: 18px !important; }
}

/* Body copy on the page's type system: family page-wide, lead spec for
   paragraphs, stage titles sized like the page's list/item titles. */
.esk-st, .esk-st * {
  font-family: "niveaugroteskregular", system-ui, sans-serif !important;
}
.esk-st__desc, .esk-st__idesc {
  font-size: var(--esk-lead, 17px);
  line-height: 1.5;
  font-weight: 500;
  color: #5B6474;
}
.esk-st__ititle {
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 800;
  color: #022450;
}


/* Component-global mobile heading sizes: literal values so pages without
   esk-tokens.css match the homepage. */
@media (max-width: 767px) {
  .esk-st__title { font-size: clamp(36px, 10.4vw, 54px) !important; line-height: 0.9 !important; }
  .esk-st__sub, .esk-st__sub b, .esk-st__sub strong { font-size: 18px !important; }
  .esk-st {
    padding-top: clamp(36px, 9vw, 48px) !important;
    padding-bottom: clamp(36px, 9vw, 48px) !important;
  }
}


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