/**
 * The Wicked — Path Rail (tw-path-rail).
 * Recreates the #rail grid of design-reference/careers-v05.html PLUS the
 * Applications block below it, as ONE widget.
 *
 * WHY ONE WIDGET
 * The reference bridges the gap between the last rail stop and the Applications
 * section with a hand-tuned stub (`top:-110px; height:114px`), reverse-engineered
 * from that section's 110px top padding. In Elementor each section is its own
 * container, so a line spanning a section boundary breaks the first time padding
 * changes. Here the line lives inside the widget and cannot leave it. There is
 * no stub and no number in this file that refers to anything outside the widget.
 *
 * HOW THE LINE STAYS CONTINUOUS WITHOUT A MAGIC NUMBER
 *   • Stops abut: there is NO row gap. The space between stops is padding INSIDE
 *     the content cell, so the gutter cell — a stretched grid item — spans it.
 *   • Each gutter draws up to two segments: `--up` from the top of the stop down
 *     to the dot centre, `--down` from the dot centre to the bottom of the stop.
 *   • The first stop omits `--up`, the last omits `--down`. The run therefore
 *     starts and ends exactly on a dot centre, whatever the content heights are.
 *   • Every segment is bounded by its own stop's box (top:0 / bottom:0), so it is
 *     structurally impossible for the line to render outside the widget.
 *
 * ONE control ("Dot vertical position") drives the dot's `top`, the up segment's
 * `height`, the down segment's `top` and the progressive fill's `top` — a single
 * control writing four REAL properties, never a CSS variable, because this
 * build's Elementor editor drops control-set --var declarations (PROJECT-NOTES §6).
 *
 * Colours/fonts read Elementor GLOBAL colours & fonts through --e-global-*, with
 * the design tokens as fallbacks. Per-element font SIZES live here: the kit's
 * system typography globals define family + weight only.
 */

.tw-path-rail {
	position: relative;
	width: 100%;
}

/* ---------------------------------------------------------------------------
   One stop: gutter | content.
   --------------------------------------------------------------------------- */
.tw-pr__stop {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	column-gap: clamp(40px, 5vw, 80px);
}

.tw-pr__gutter {
	position: relative;
}

.tw-pr__content {
	min-width: 0;
}

/* Space below a stop. Declared through :not(--last) — NOT as a separate
   "last child resets it to 0" rule — because the "Gap between stops" control
   compiles to `.elementor-element-<id> …` at equal-or-higher specificity and
   would beat any reset (PROJECT-NOTES §6: a widget's control CSS beats its own
   stylesheet at equal specificity). The last stop is simply never given one.
   The control's selector carries the same :not(), so it cannot re-add it. */
.tw-pr__stop:not(.tw-pr__stop--last) .tw-pr__content {
	padding-bottom: 120px;
}

/* ---------------------------------------------------------------------------
   The line.
   Segments live in the gutter; the optional progressive fill is a single
   element on the rail root (it has to span stops, so it cannot live in one).
   Paint order: segments (DOM order) → fill (later in the DOM, z-index 1) →
   dots (z-index 2). `.tw-pr__gutter` is positioned with z-index:auto, so it
   creates no stacking context and the dots compete with the fill directly.
   --------------------------------------------------------------------------- */
.tw-pr__seg {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	background-color: var(--e-global-color-cdc1318, rgba(255, 255, 255, .09));
}

.tw-pr__seg--up {
	top: 0;
	height: 8.5px; /* = dot centre offset; driven by the Dot vertical position control */
}

.tw-pr__seg--down {
	top: 8.5px; /* = dot centre offset */
	bottom: 0;
}

/* Progressive fill — off by default; render() omits the element unless the
   control is on. `left` is the gutter's centre (gutter width ÷ 2), written by
   the Gutter width control; `top` is the first dot's centre, which is also the
   top of the rail's first stop. Height is set in px by the script. */
.tw-pr__fill {
	position: absolute;
	left: 28px;
	top: 8.5px;
	transform: translateX(-50%);
	width: 1px;
	height: 0;
	z-index: 1;
	background-color: var(--e-global-color-accent, #B18051);
	transition-property: height;
	transition-duration: .3s;
	transition-timing-function: ease;
}

/* ---------------------------------------------------------------------------
   The dot. Positioned by its CENTRE (translate(-50%,-50%)) so one control can
   drive both the dot and the two line segments without composing a value.
   Border is written as LONGHANDS with literal style/width — never a shorthand
   built from a var(), which computes to `none` and vanishes (PROJECT-NOTES §6).
   NOTE: the active glow is deliberately NOT declared here. It is owned by the
   "Glow strength" control alone, so switching Glow off emits no box-shadow rule
   at all — a stylesheet default would out-rank nothing and could not be undone.
   --------------------------------------------------------------------------- */
.tw-pr__dot {
	position: absolute;
	left: 50%;
	top: 8.5px;
	transform: translate(-50%, -50%);
	z-index: 2;
	box-sizing: border-box;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border-style: solid;
	border-width: 1px;
	border-color: var(--e-global-color-290f850, rgba(255, 255, 255, .14));
	background-color: var(--e-global-color-a3c8691, #08080a);
	transition-property: background-color, border-color, box-shadow, color;
	transition-duration: .3s;
	transition-timing-function: ease;
}

.tw-pr__dot.is-active {
	border-color: var(--e-global-color-accent, #B18051);
	background-color: var(--e-global-color-accent, #B18051);
	/* `color` feeds the glow through currentColor — same idiom as tw-status-line,
	   so one colour control drives fill + halo without chaining through a var. */
	color: var(--e-global-color-accent, #B18051);
}

/* ---------------------------------------------------------------------------
   Content.
   --------------------------------------------------------------------------- */
.tw-pr__eyebrow {
	margin: 0 0 24px;
	font-family: var(--e-global-typography-8cf005f-font-family, 'Inter', sans-serif);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--e-global-color-accent, #B18051);
}

/* ⚠️ Prefixed with `.tw-path-rail` on purpose. The Elementor KIT styles headings
   by tag — `.elementor-kit-6 h2{font-size:3rem; letter-spacing:-0.7px; …}` — at
   (0,1,1), which beats a bare `.tw-pr__heading` (0,1,0) and silently replaced the
   reference's fluid clamp with a flat 48px (measured on Sandbox 9, 2026-07-30).
   (0,2,0) wins that and still sits far below the Heading controls' (0,4,0), so
   the Typography control keeps overriding this. Every tag the Heading HTML tag
   control offers (h1–h6) has such a kit rule, so this must not be un-prefixed. */
.tw-path-rail .tw-pr__heading {
	margin: 0;
	max-width: 820px;
	font-family: var(--e-global-typography-secondary-font-family, 'Cormorant Garamond', serif);
	font-weight: 600;
	font-size: clamp(2.6rem, 5vw, 4.25rem);
	line-height: 1.02;
	letter-spacing: -.02em;
	color: var(--e-global-color-primary, #f6f4f0);
	text-wrap: balance;
}

.tw-pr__body {
	max-width: 640px;
	font-family: var(--e-global-typography-text-font-family, 'Inter', sans-serif);
	font-size: clamp(1.05rem, 1.3vw, 1.25rem);
	line-height: 1.75;
	color: var(--e-global-color-text, #c4c1ba);
	text-wrap: pretty;
}

/* The body is a WYSIWYG: its paragraphs inherit size/leading so a per-stop size
   override (inline, from the repeater) reaches them. */
.tw-pr__body p {
	margin: 0 0 1em;
	font-size: inherit;
	line-height: inherit;
}

.tw-pr__body p:last-child {
	margin-bottom: 0;
}

/* Only when a heading is present does the body take the reference's 48px lead. */
.tw-pr__heading ~ .tw-pr__body {
	margin-top: 48px;
}

.tw-pr__note {
	margin-top: 48px;
	max-width: 520px;
	font-family: var(--e-global-typography-text-font-family, 'Inter', sans-serif);
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--e-global-color-0c2c23a, #9d9a92);
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   Optional per-stop link — the reference's big serif mailto with the arrow.
   Border as longhands (see the dot). Hover colours are controls.
   --------------------------------------------------------------------------- */
/* Prefixed for the same reason as the heading: the kit styles bare `a`
   (`.elementor-kit-6 a{color:accent}`, (0,1,1)). */
.tw-path-rail .tw-pr__link {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	margin-top: 56px;
	padding-bottom: 12px;
	font-family: var(--e-global-typography-primary-font-family, 'Cormorant Garamond', serif);
	font-weight: 600;
	font-size: clamp(2rem, 3.4vw, 3rem);
	line-height: 1;
	text-decoration: none;
	color: var(--e-global-color-primary, #f6f4f0);
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: var(--e-global-color-290f850, rgba(255, 255, 255, .14));
	transition: color .3s ease, border-bottom-color .3s ease;
}

.tw-path-rail .tw-pr__link:hover,
.tw-path-rail .tw-pr__link:focus {
	color: var(--e-global-color-4061c46, #c9a074);
	border-bottom-color: var(--e-global-color-accent, #B18051);
}

.tw-pr__link svg {
	flex: none;
	width: 26px;
	height: 26px;
}

/* ---------------------------------------------------------------------------
   Reduced motion. The script does the real work — when the user has asked for
   no motion it skips the scroll listener entirely and lights every dot, so no
   emphasis is lost (the reference only neutered animation-duration and left its
   scroll handler running). This block is the belt to that braces: it kills the
   one transition that would otherwise run as the states are applied.
   `!important` is deliberate — the duration/easing CONTROLS compile at instance
   specificity and would otherwise win. Nothing else here is !important.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.tw-pr__dot,
	.tw-pr__fill {
		transition-duration: 0s !important;
	}
}