/* ===================================================================
	 Section: What we do — inverted, sticky left + scroll-driven rail right
	 =================================================================== */

section#whatdo {
	position: relative;
	background: var(--color-bg);
	color: var(--color-fg);
	padding: 6rem 0 0;
}
.whatdo .eyebrow { color: var(--color-fg-muted); }
.whatdo .eyebrow::before { background: var(--color-accent); }

.whatdo__layout {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(2rem, 1rem + 4vw, 6rem);
	align-items: start;
	position: relative;
}

/* Left: sticky heading */
.whatdo__sticky {
	position: sticky;
	top: clamp(5rem, 4rem + 3vw, 7rem);
	display: grid;
	gap: var(--space-md);
	align-content: start;
	padding-bottom: 6rem;
}
.whatdo__sticky h2 {
	font-size: var(--step-3xl);
	font-weight: 500;
	letter-spacing: -0.035em;
	max-width: 14ch;
}
.whatdo__sticky h2 em { color: var(--color-accent); font-style: italic; font-weight: 400; }
.whatdo__intro {
	color: var(--color-fg-muted);
	font-size: var(--step-sm);
	max-width: 38ch;
}

/* Right: rail with scroll-reveal points */
.whatdo__rail {
	position: relative;
	display: grid;
	gap: 0;
}

/* Vertical rail line */
.whatdo__track {
	position: absolute;
	left: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--color-line);
	overflow: hidden;
}
/* The fill that grows with scroll */
.whatdo__track::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: calc(var(--fill, 0) * 100%);
/*	background: linear-gradient(to bottom, var(--color-accent), color-mix(in srgb, var(--color-accent) 50%, transparent));*/
	background: var(--color-accent);
	will-change: height;
}

/* Each point — tall, one screen-ish each. Node stays static, only card animates. */
.whatdo__point {
	position: relative;
	display: grid;
	gap: var(--space-md);
	padding-block: 6rem 0;
	place-items: start start;
	height: clamp(380px, 66svh, 480px);
}
/* Card appears when fill crosses the node */
.whatdo__card {
	opacity: 0.2;
	transform: translateX(-16px);
	transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), background 0.5s var(--ease-out), border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.whatdo__point.is-filled .whatdo__card {
	opacity: 1;
	transform: translateX(0);
	background: var(--color-bg-raised);
	border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
	box-shadow: 0 20px 50px -30px rgba(0,0,0,0.5);
}

/* Node on the rail — centered on the track line */
.whatdo__node {
	position: absolute;
	left: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
	top: 10rem;
	transform: translateX(-50%) translateY(-50%);
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--color-bg);
	border: 2px solid var(--color-line);
	display: grid;
	place-items: center;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--color-fg-muted);
	z-index: 2;
	transition: border-color 0.4s var(--ease-out), background 0.4s var(--ease-out), color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), width 0.4s var(--ease-out), height 0.4s var(--ease-out);
}

/* Filled state: the accent fill has reached this node — glow + pulse */
.whatdo__point.is-filled .whatdo__node {
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: #fff;
	width: 40px; height: 40px;
	box-shadow:
		0 0 0 4px color-mix(in srgb, var(--color-accent) 15%, transparent),
		0 0 20px color-mix(in srgb, var(--color-accent) 60%, transparent);
	animation: node-pulse 2s ease-in-out infinite;
}
@keyframes node-pulse {
	0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 15%, transparent), 0 0 20px color-mix(in srgb, var(--color-accent) 60%, transparent); }
	50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-accent) 20%, transparent), 0 0 36px color-mix(in srgb, var(--color-accent) 85%, transparent); }
}

/* Card */
.whatdo__card {
	background: rgba(244,244,243,0.02);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);

	padding: 2rem 2rem 2rem 2rem;
	margin-inline-start: 6rem;
}
.whatdo__card h3 {
	font-size: var(--step-lg);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin-block-end: var(--space-xs);
}
.whatdo__card p {
	color: var(--color-fg-muted);
	font-size: var(--step-sm);
}

.whatdo__card-icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(255, 77, 46, 0.08);
	color: var(--color-accent);
	margin-bottom: 1.25rem;
}


/* ---- Bridge point 04: finishes the track, no card, node at the bottom ---- */
.whatdo__point--bridge {
	min-height: 0;
	padding-block: 0 0;
	display: block;
	height: 1px; /* takes up no extra rail height; the node is positioned below */
}
.whatdo__point--bridge .whatdo__node {
	/* sit exactly at the track's bottom edge so the fill reaches the node */
	top: auto;
	bottom: 0;
	transform: translateX(-50%) translateY(50%);
}

/* ---- Horizontal connector: simple full-container-width line, grows out of node 04 ----
   Drawn via the same scroll fill (reversible). Child of .whatdo__layout,
   spans its full content-box (left:0; right:0), sitting at the rail's bottom. */
.whatdo__connector {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	pointer-events: none;
	overflow: visible;
	transform: scaleX(var(--connector, 0));
	transform-origin: center center;
	background: var(--color-accent);
	transition: transform 0.2s linear;
	margin-inline: var(--gutter);
}

@media (prefers-reduced-motion: reduce) {
	.whatdo__connector { transform: scaleX(1); }
}

@media (max-width: 880px) {

	section#whatdo {
		padding: 4rem 0 0;
	}
	.whatdo__layout {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.whatdo__sticky {
		position: relative;
		top: 0;
		padding-bottom: 2rem;
	}
	.whatdo__sticky h2 {
	}

	.whatdo__point {
		height: clamp(320px, 50svh, 440px);
		padding-block: 4.5rem 0;
	}
	.whatdo__point--bridge {
		height: auto !important;

	}
	.whatdo__node {
		top: 7.5rem;
	}

	.whatdo__card {
		padding: 1rem 1rem 1rem 1rem;
		margin-inline-start: 5rem;
	}

	.whatdo__connector {
		left: 1rem;
	}
}