/* Flyme Manifesto — pinned one-screen section. Slides cross-fade; each slide's
   blue SVG circle drifts horizontally, clipped inside the stage. Cursor trail. */

.flyme-manifesto {
	position: relative;
	width: 100%;
	min-height: var( --flyme-total, 200vh );
	background: var( --flyme-bg, #1d1d1b );
}

/* Sticky stage — sticks to the top while the section scrolls past (does NOT
   block the scroll). Clips the circles so only a half-circle ever shows. */
.flyme-manifesto__stage {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

/* Fixed "See more work" link, top-right of the stage (Readymag: a floating
   link that closes the work section, independent of the slides). */
.flyme-manifesto__work,
.flyme-manifesto__work:hover,
.flyme-manifesto__work:focus {
	position: absolute;
	z-index: 2;
	/* Readymag keeps this control close to the viewport edge. */
	top: clamp( 20px, 3vh, 32px );
	right: clamp( 20px, 2.5vw, 48px );
	display: inline-flex;
	align-items: center;
	gap: 36px;
	font-family: var( --flyme-text, "Satoshi", "Helvetica Neue", Arial, sans-serif );
	font-weight: 500;
	font-size: 28px;
	line-height: 34px;
	text-decoration: none !important;
	transition: gap 0.25s ease;
}

.flyme-manifesto__work:hover {
	gap: 1em;
}

/* Slides stacked on top of each other; only the active one is visible.
   Title left, body+link right; the block sits in the lower third of the
   stage (Readymag) rather than dead-centre. */
.flyme-manifesto__slide {
	position: absolute;
	inset: 0;
	display: grid;
	/* Title left (x ~20vw), body right (x ~50vw). Vertical placement differs per
	   slide (set below) to mirror Readymag: slide 1's text sits low so its big
	   top-right disc reads above it with dark air; slide 2's text sits high so its
	   bottom-left disc reads below it. Text cross-fades between the two positions. */
	justify-content: start;
	/* BOTH statements settle at the SAME vertical height so one simply substitutes
	   the other in place. A fixed top offset (not centring) guarantees identical
	   height regardless of line count; the disc above (slide 1) and the disc below
	   (slide 2) each keep their gap to this shared text band. */
	align-content: start;
	/* Body column width matched to Readymag (~30vw). With the body font below, the
	   paragraph wraps line-for-line like Readymag ("…and ensure strategy /",
	   "…By crossing /", "disciplines, we connect …"). */
	grid-template-columns: minmax(0, 26vw) minmax(0, 30vw);
	align-items: start;
	padding: 0 5vw 0 20vw;
	opacity: 0;
}

/* Readymag per-slide vertical placement: slide 1's statement sits LOW so its big
   top-right disc reads above it; slide 2's sits HIGH so its bottom-left disc reads
   below it (with air between text and disc). The CTA lives inside each statement,
   so it follows the text. */
/* MISMA altura vertical en todos los slides: el texto no salta, solo se
   cross-fade en el sitio (un statement sustituye al otro). Los discos van
   anclados a las esquinas (arriba/abajo), así que no dependen de esto. */
.flyme-manifesto__slide--right,
.flyme-manifesto__slide--left {
	padding-top: 26vh;
}

/* Without JS, show the first slide. */
.flyme-manifesto__slide.is-first {
	opacity: 1;
}

/* Big blue circle — anchored in a corner, behind the text, never overlapping
   the centered text. A saved value below 56vw is clamped to the reference size. */
.flyme-manifesto__circle {
	position: absolute;
	z-index: 0;
	width: var( --flyme-circle-size, 56vw );
	height: auto;
	pointer-events: none;
	will-change: transform;
}

.flyme-manifesto__circle circle {
	fill: var( --flyme-circle-c, #253bff );
}

/* Readymag exact positions (viewport 1440×960, disc 653px):
   top-right: left=107vw, top=-325px. bottom-left: left=-75vw, bottom=24.5vh. */
.flyme-manifesto__slide--right .flyme-manifesto__circle {
	/* Bigger disc, raised well above centre: a large arc still reads at the top
	   while leaving a generous gap to the middle text (Readymag keeps lots of air
	   between the disc and the text).
	   The disc's bottom edge sits 56px above the text band — the exact gap in
	   Readymag, where the disc ends at 6489 and the text widget starts at 6545.
	   Anchored to the same 26vh the slide uses as padding-top, so the gap holds
	   at any viewport height. It used to overlap the headline by 77px. */
	width: min( 80vw, 1000px );
	top: calc( 26vh - 56px - min( 80vw, 1000px ) );
	right: -10vw;
}

.flyme-manifesto__slide--left .flyme-manifesto__circle {
	/* Bottom-left, big disc. Its whole width sits on screen with a small gap at
	   the left edge (Readymag) — NOT jammed into the corner — reaching well to the
	   right; anchored low so its top clears the shared text band with a gap and its
	   right edge stays clear of the CTA. Its centre sits on the stage's bottom edge
	   so only the TOP HALF shows — cut where the module ends (Readymag). */
	width: min( 52vw, 720px );
	bottom: calc( min( 52vw, 720px ) / -2 );
	left: 1vw;
}

.flyme-manifesto__title,
.flyme-manifesto__col {
	position: relative;
	z-index: 1;
}

.flyme-manifesto__title {
	margin: 0;
	font-family: var( --flyme-display, "Degular Display", "Satoshi", "Helvetica Neue", Arial, sans-serif );
	font-weight: 600;
	/* Smaller than before — the reference title is ~60px, not 80px+. */
	font-size: clamp(2rem, 6.3vw, 7rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var( --flyme-title-c, #e4dccc );
	margin-top: -0.1em;
}

/* Readymag gives the second statement the larger display scale. */
.flyme-manifesto__slide:nth-of-type(2) .flyme-manifesto__title {
	/* Ancho ajustado para que "AI powered by us" parta como "AI powered / by us"
	   (no "…by / us"). La posición horizontal ya NO se fija aquí: la alinea el JS
	   (alignTitles) igualando el borde derecho con el del primer título. */
	width: 30vw;
	font-size: clamp( 2rem, 5.8vw, 6rem );
}

.flyme-manifesto__col {
	max-width: 50ch;
}

.flyme-manifesto__body {
	margin: 0;
	font-family: var( --flyme-text, "Satoshi", "Helvetica Neue", Arial, sans-serif );
	font-weight: 400;
	/* ~18px at 1440 to match Readymag's body scale (line-for-line wrapping). */
	font-size: clamp(0.95rem, 1.25vw, 1.2rem);
	line-height: 1.32;
	color: var( --flyme-body-c, #e4dccc );
}

.flyme-manifesto__body strong {
	font-weight: 700;
}

.flyme-manifesto__link,
.flyme-manifesto__link:hover,
.flyme-manifesto__link:focus {
	display: inline-flex;
	align-items: center;
	gap: 50px;
	/* Air between the statement and its CTA (Readymag keeps a clear gap). */
	margin-top: clamp(2rem, 7vh, 5rem);
	font-family: var( --flyme-text, "Satoshi", "Helvetica Neue", Arial, sans-serif );
	font-weight: 500;
	font-size: 21px;
	line-height: 25px;
	text-decoration: none !important;
	transition: gap 0.25s ease;
}

.flyme-manifesto__link-arrow {
	color: var( --flyme-arrow-c, #3531ff );
}

.flyme-manifesto__link .flyme-manifesto__link-text {
	display: block;
	flex: 0 0 128px;
	max-width: 128px;
	color: var( --flyme-link-c, #ff5c00 );
}

.flyme-manifesto__work .flyme-manifesto__link-text {
	white-space: nowrap;
	color: var( --flyme-title-c, #e4dccc );
}

.flyme-manifesto__work .flyme-manifesto__link-arrow {
	color: #f85c16;
}

.flyme-manifesto__link-arrow {
	position: relative;
	display: block;
	flex: 0 0 25px;
	width: 25px;
	height: 14px;
	font-size: 0;
	color: #fff;
	transition: transform 0.25s ease;
}

.flyme-manifesto__link-arrow::before {
	position: absolute;
	top: 6px;
	left: 0;
	width: 24px;
	border-top: 1.4px solid currentColor;
	content: "";
}

.flyme-manifesto__link-arrow::after {
	position: absolute;
	top: 2px;
	right: 0;
	width: 8px;
	height: 8px;
	border-top: 1.4px solid currentColor;
	border-right: 1.4px solid currentColor;
	content: "";
	transform: rotate(45deg);
}

/* En hover se mueve la FLECHA hacia el texto (no el texto). El gap se mantiene
   fijo para que el texto no se desplace. */
.flyme-manifesto__link:hover .flyme-manifesto__link-arrow {
	transform: translateX( 20px );
}

/* Cursor trail canvas (clipped to the stage). */
.flyme-manifesto__trail {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	overflow: hidden;
}

.flyme-manifesto__trail canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

@media (max-width: 782px) {
	.flyme-manifesto__slide {
		grid-template-columns: 1fr;
		row-gap: 1.5rem;
		padding: 0 20px clamp(9vh, 20vh, 240px);
	}
	/* The mock stacks both statements in flow instead of cross-fading them on a
	   pinned stage — no sticky, no 200vh of scroll for two paragraphs. The discs
	   stay: each one now anchors to its own statement and drifts in with the
	   scroll (view.js keeps the circle timeline and drops the text one). */
	.flyme-manifesto {
		min-height: 0;
		overflow: hidden; /* the discs overhang on purpose; no sideways scroll */
	}

	.flyme-manifesto__stage {
		position: static;
		height: auto;
		overflow: visible;
	}

	.flyme-manifesto__slide {
		position: relative;
		inset: auto;
		opacity: 1;
		grid-template-columns: 1fr;
		row-gap: 6.4vw;
		padding: 0 5.07vw;
	}

	.flyme-manifesto__slide--right,
	.flyme-manifesto__slide--left {
		padding-top: 0;
	}

	/* 80px between the two statements in the mock, measured box to box: 18.4vw
	   plus the headline's half-leading lands on it. */
	.flyme-manifesto__slide + .flyme-manifesto__slide {
		margin-top: 18.4vw;
	}

	/* One CTA, after the last statement — not one per slide. */
	.flyme-manifesto__slide:not(:last-of-type) .flyme-manifesto__link {
		display: none;
	}

	/* "See more work" leaves its absolute corner and sits above the first
	   statement, flush right, as in the mock. */
	.flyme-manifesto__work,
	.flyme-manifesto__work:hover,
	.flyme-manifesto__work:focus {
		position: relative;
		top: auto;
		right: auto;
		margin: 0 0.8vw 6.4vw auto;
	}

	.flyme-manifesto__slide--right .flyme-manifesto__circle {
		width: 60vw;
		top: -20vw;
		right: -15vw;
	}

	.flyme-manifesto__slide--left .flyme-manifesto__circle {
		width: 60vw;
		bottom: -20vw;
		left: -15vw;
	}

	/* Mobile mock: the headline turns orange and wraps in a narrow column,
	   with the body text narrower still. Desktop keeps the cream headline. */
	.flyme-manifesto__title {
		/* width, not just max-width: as a grid item it shrank to its longest
		   word (113px) and broke "AI powered by us" onto three lines instead of
		   the mock's two. */
		width: 45vw;
		max-width: 45vw;
		color: var( --flyme-accent-warm, #f85c16 );
		font-size: min(10.13vw, 42px);
		line-height: 0.91;
	}

	/* The second statement carries its own desktop width (30vw), at a higher
	   specificity than the rule above — matched here or it keeps breaking onto
	   three lines. */
	.flyme-manifesto__slide:nth-of-type(2) .flyme-manifesto__title {
		width: 45vw;
		font-size: min(10.13vw, 42px);
	}

	.flyme-manifesto__body {
		max-width: 78.2vw;
		font-size: min(4vw, 17px);
		line-height: 1.2;
	}

	/* Both in-slide links read at 16px in the mock, not 28 and 21. */
	.flyme-manifesto__work,
	.flyme-manifesto__link {
		font-size: min(4.27vw, 18px);
		line-height: 1.2;
	}
}

@media (min-width: 783px) and (max-width: 1200px) {
	.flyme-manifesto__slide {
		grid-template-columns: 21vw 36vw;
	}
}