/**
 * GC Founder Letters.
 * Prefix: .gc-fl-* / --gc-fl-*
 *
 * Long-form letters from the people who started the company, set as editorial
 * rather than as cards: one portrait surface per letter, the copy running beside
 * it against a margin rule, and a signature at the foot. The portrait sticks
 * while its letter scrolls, so the face stays with the voice.
 *
 * Letters alternate sides. Nothing is boxed except the portrait, which is the
 * only place elevation earns its keep.
 */

.gc-fl {
	--gc-fl-max: none;
	--gc-fl-pad-y: 64px;
	--gc-fl-pad-x: 48px;

	--gc-fl-ink: var(--gc-ink, #14212B);
	--gc-fl-muted: var(--gc-muted, #5A6B75);
	--gc-fl-accent: var(--gc-blue, #5BA7DB);
	--gc-fl-accent-deep: var(--gc-blue-dark, #3D82B3);

	--gc-fl-portrait-w: 340px;
	--gc-fl-gap: clamp(28px, 4vw, 64px);
	--gc-fl-letter-gap: clamp(48px, 6vw, 96px);
	--gc-fl-radius: var(--gc-radius-md, 16px);

	--gc-fl-surface: var(--gc-white, #fff);
	--gc-fl-line: var(--gc-line, #E1E9EE);
	--gc-fl-shadow: var(--gc-shadow-card, 0 10px 28px -8px rgba(20, 33, 43, 0.12));
	--gc-fl-shadow-hover: var(--gc-shadow-card-hover, 0 18px 40px -10px rgba(20, 33, 43, 0.22));

	--gc-fl-edge: inset 0 0 0 1px var(--gc-fl-line);
	--gc-fl-edge-hover: inset 0 0 0 1px var(--gc-fl-line);

	--gc-fl-eyebrow-size: 11.5px;
	--gc-fl-heading-size: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);
	--gc-fl-lead-size: 16px;
	--gc-fl-greeting-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem);
	--gc-fl-body-size: 15.5px;
	--gc-fl-ease: cubic-bezier(.22, 1, .36, 1);

	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	width: 100%;
	padding-block: var(--gc-fl-pad-y);
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
	color: var(--gc-fl-ink);
}

.gc-fl *,
.gc-fl *::before,
.gc-fl *::after { box-sizing: border-box; }

@keyframes gc-fl-reveal { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }

.gc-fl [data-reveal] {
	opacity: 0;
	transform: none;
	translate: 0 28px;
	transition: none;
	animation: gc-fl-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	.gc-fl [data-reveal] { opacity: 1; translate: none; animation: none; }
}

.gc-fl--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

.gc-fl__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--gc-fl-bg, transparent);
	pointer-events: none;
}
.gc-fl--fade .gc-fl__bg {
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--gc-fl-fade, 18%), #000 calc(100% - var(--gc-fl-fade, 18%)), transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 var(--gc-fl-fade, 18%), #000 calc(100% - var(--gc-fl-fade, 18%)), transparent 100%);
}

.gc-fl__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--gc-fl-max);
	margin-inline: auto;
	padding-inline: var(--gc-fl-pad-x);
}

/* ---- Header ---- */

.gc-fl__head {
	max-width: 940px;
	margin-bottom: clamp(26px, 3vw, 44px);
}
.gc-fl--center .gc-fl__head {
	margin-inline: auto;
	text-align: center;
}

.gc-fl__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
	font-size: var(--gc-fl-eyebrow-size);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gc-fl-accent-deep);
}
.gc-fl__eyebrow::before,
.gc-fl__eyebrow::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: currentColor;
	opacity: .28;
}
.gc-fl:not(.gc-fl--center) .gc-fl__eyebrow::before { display: none; }

.gc-fl__title {
	margin: 14px 0 0;
	font-family: var(--gc-font-heading, "Manrope", sans-serif);
	font-weight: 700;
	font-size: var(--gc-fl-heading-size);
	line-height: 1.14;
	letter-spacing: -.022em;
	color: var(--gc-fl-heading-color, var(--gc-fl-ink));
	text-wrap: balance;
}
.gc-fl__title em {
	font-style: normal;
	color: var(--gc-fl-swap-color, var(--gc-fl-accent));
}

.gc-fl__lead {
	margin: 14px 0 0;
	max-width: 72ch;
	font-size: var(--gc-fl-lead-size);
	font-weight: 400;
	line-height: 1.6;
	color: var(--gc-fl-lead-color, var(--gc-fl-muted));
}
.gc-fl--center .gc-fl__lead { margin-inline: auto; }

/* ---- Founders' statement ----
   A panel, not naked type: bare copy on the site's patterned background read as
   an unfinished divider. Same surface language as every other Gencore card, a
   white plane carrying the edge glow over a blue-tinted shadow.

   Two columns, because the statement holds a readable measure and the plane runs
   the full band: the signature takes the second column against a vertical rule
   instead of leaving that half of the panel empty. */

.gc-fl__statement {
	position: relative;
	display: block;
	max-width: var(--gc-fl-statement-max, 1360px);
	margin: 0 auto clamp(36px, 4vw, 64px);
	padding: clamp(30px, 3vw, 46px) 0 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-align: center;
	overflow: visible;
}
.gc-fl__statement::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 56px;
	height: 3px;
	margin-left: -28px;
	border-radius: 2px;
	background: var(--gc-fl-accent-deep);
}

/* Weight 500 rather than 800: at this size the statement carries on scale alone,
   and the heavy cut turned a founders' line into a shouted headline. */
.gc-fl__statement-text {
	margin: 0 auto;
	max-width: 64ch;
	font-family: var(--gc-font-heading, "Manrope", sans-serif);
	font-weight: 500;
	font-size: var(--gc-fl-statement-size, clamp(1.35rem, 1rem + 1.2vw, 2.2rem));
	line-height: 1.38;
	letter-spacing: -.014em;
	color: var(--gc-fl-statement-color, var(--gc-fl-ink));
	text-wrap: pretty;
}
.gc-fl__statement-text em {
	font-style: normal;
	font-weight: 600;
	color: var(--gc-fl-swap-color, var(--gc-fl-accent));
}

/* The attribution takes the second column and sits against a vertical rule, which
   is what fills the panel: a full-width statement with the signature dropped
   underneath it left the right half of the plane empty. */
.gc-fl__statement-meta {
	display: grid;
	gap: 4px;
	justify-items: center;
	margin-top: 22px;
	padding-left: 0;
	border-left: 0;
}
.gc-fl__statement-meta .gc-fl__eyebrow { margin: 0 0 4px; }
.gc-fl__statement-meta .gc-fl__eyebrow::before,
.gc-fl__statement-meta .gc-fl__eyebrow::after { display: none; }

.gc-fl__attrib {
	font-family: var(--gc-font-heading, "Manrope", sans-serif);
	font-weight: 600;
	font-size: 15.5px;
	letter-spacing: -.01em;
	color: var(--gc-fl-attrib-color, var(--gc-fl-ink));
}
.gc-fl__attrib-note {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--gc-fl-muted);
}


@media (max-width: 640px) {
	.gc-fl {
		--gc-fl-pad-y: 42px;
		--gc-fl-pad-x: 20px;
		--gc-fl-eyebrow-size: 10.5px;
		--gc-fl-heading-size: 1.6rem;
		--gc-fl-lead-size: 15px;
		--gc-fl-radius: 14px;
	}
	.gc-fl__eyebrow { gap: 10px; }
	.gc-fl__statement-text { max-width: none; }
}

@media (max-width: 480px) {
	.gc-fl {
		--gc-fl-pad-y: 36px;
		--gc-fl-pad-x: 16px;
		--gc-fl-heading-size: 1.45rem;
	}
}

/* ---- Letters ---- */

.gc-fl__letters {
	display: grid;
	gap: var(--gc-fl-letter-gap);
}

.gc-fl__letter {
	display: grid;
	grid-template-columns: var(--gc-fl-portrait-w) minmax(0, 1fr);
	gap: var(--gc-fl-gap);
	align-items: start;
}
.gc-fl__letter + .gc-fl__letter {
	padding-top: var(--gc-fl-letter-gap);
	border-top: 1px solid var(--gc-fl-line);
}
.gc-fl__letter--right {
	grid-template-columns: minmax(0, 1fr) var(--gc-fl-portrait-w);
}
.gc-fl__letter--right .gc-fl__portrait { order: 2; }
.gc-fl__letter--right .gc-fl__body { order: 1; }

/* ---- Portrait ---- */

.gc-fl__portrait {
	position: relative;
	margin: 0;
	border-radius: var(--gc-fl-radius);
	background: var(--gc-fl-surface);
	box-shadow: var(--gc-fl-edge), var(--gc-fl-shadow);
	overflow: hidden;
	transition: box-shadow .35s ease, transform .35s var(--gc-fl-ease);
}
.gc-fl--sticky .gc-fl__portrait {
	position: sticky;
	top: var(--gc-fl-sticky-top, 120px);
}
@media (hover: hover) {
	.gc-fl__letter:hover .gc-fl__portrait {
		box-shadow: var(--gc-fl-edge-hover), var(--gc-fl-shadow-hover);
		transform: translateY(-6px);
	}
}
.gc-fl__portrait img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--gc-fl-portrait-ratio, 4 / 5);
	object-fit: cover;
	object-position: center top;
}

/* ---- Side by side: two columns with a rule between them ----
   Both letters keep the same portrait shape and the same greeting baseline, so
   the two columns read as one spread rather than as two stacked components. */

.gc-fl--side .gc-fl__letters {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(24px, 2.2vw, 36px);
	row-gap: 0;
	align-items: stretch;
	max-width: var(--gc-fl-letters-max, none);
	margin-inline: auto;
}

.gc-fl--side .gc-fl__letter {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: clamp(26px, 2.4vw, 42px);
	background: var(--gc-fl-surface);
	border: 1px solid var(--gc-fl-line);
	border-radius: var(--gc-fl-radius);
	box-shadow: var(--gc-fl-shadow);
	transition: box-shadow .35s ease, border-color .35s ease;
}

.gc-fl--side .gc-fl__letter:hover {
	border-color: color-mix(in srgb, var(--gc-fl-accent) 42%, var(--gc-fl-line));
	box-shadow: var(--gc-fl-shadow-hover);
}

.gc-fl--side .gc-fl__portrait {
	position: relative;
	top: auto;
	max-width: none;
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 22px;
	padding: 0 0 20px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--gc-fl-line);
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}

.gc-fl--side .gc-fl__portrait img {
	flex: none;
	width: var(--gc-fl-avatar, 104px);
	height: var(--gc-fl-avatar, 104px);
	aspect-ratio: 1;
	border-radius: 50%;
	object-position: center top;
	border: 1px solid color-mix(in srgb, var(--gc-fl-accent) 70%, transparent);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--gc-fl-accent) 20%, transparent),
		0 0 22px color-mix(in srgb, var(--gc-fl-accent) 40%, transparent);
	transition: box-shadow .35s ease;
}

.gc-fl--side .gc-fl__letter:hover .gc-fl__portrait img {
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--gc-fl-accent) 34%, transparent),
		0 0 32px color-mix(in srgb, var(--gc-fl-accent) 60%, transparent);
}

.gc-fl--side .gc-fl__plate {
	padding: 0;
	gap: 4px;
	background: none;
	border-top: 0;
}

.gc-fl__plate {
	position: relative;
	display: grid;
	gap: 3px;
	padding: 16px 18px 18px;
	border-top: 1px solid var(--gc-fl-line);
	background: var(--gc-fl-surface);
}
.gc-fl__name {
	font-family: var(--gc-font-heading, "Manrope", sans-serif);
	font-weight: 800;
	font-size: 17px;
	letter-spacing: -.015em;
	color: var(--gc-fl-name-color, var(--gc-fl-ink));
}
.gc-fl__role {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--gc-fl-role-color, var(--gc-fl-accent-deep));
}

/* ---- The letter itself ---- */

.gc-fl__body {
	position: relative;
	padding-left: clamp(18px, 2vw, 30px);
	border-left: 1px solid var(--gc-fl-line);
}
.gc-fl__letter--right .gc-fl__body {
	padding-left: 0;
	padding-right: clamp(18px, 2vw, 30px);
	border-left: 0;
	border-right: 1px solid var(--gc-fl-line);
	text-align: left;
}

.gc-fl__greeting {
	margin: 0;
	font-family: var(--gc-font-heading, "Manrope", sans-serif);
	font-weight: 800;
	font-size: var(--gc-fl-greeting-size);
	line-height: 1.14;
	letter-spacing: -.02em;
	color: var(--gc-fl-greeting-color, var(--gc-fl-ink));
	text-wrap: balance;
}

.gc-fl__copy { margin-top: 16px; }
.gc-fl__copy p {
	margin: 0;
	max-width: 66ch;
	font-size: var(--gc-fl-body-size);
	line-height: 1.8;
	color: var(--gc-fl-body-color, var(--gc-fl-muted));
}
.gc-fl__copy p + p { margin-top: 14px; }
.gc-fl__copy p.is-lead {
	font-size: calc(var(--gc-fl-body-size) + 1.5px);
	line-height: 1.7;
	color: var(--gc-fl-ink);
}

.gc-fl__creds {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}
.gc-fl__creds li {
	position: relative;
	padding-left: 18px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--gc-fl-accent-deep);
}
.gc-fl__creds li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .6em;
	width: 9px;
	height: 1px;
	background: currentColor;
	opacity: .8;
}

.gc-fl__sign {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	margin: 26px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--gc-fl-line);
}
.gc-fl__sign-name {
	font-family: var(--gc-font-heading, "Manrope", sans-serif);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: -.02em;
	color: var(--gc-fl-sign-color, var(--gc-fl-accent-deep));
}
.gc-fl__sign-note {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gc-fl-muted);
}

.gc-fl--side {
	--gc-fl-body-size: 16px;
}

.gc-fl--side .gc-fl__letter--left .gc-fl__portrait,
.gc-fl--side .gc-fl__letter--right .gc-fl__portrait { order: 0; }

.gc-fl--side .gc-fl__letter--left .gc-fl__body,
.gc-fl--side .gc-fl__letter--right .gc-fl__body {
	order: 1;
	padding: 0;
	border: 0;
	text-align: left;
}

.gc-fl--side .gc-fl__letter--left .gc-fl__portrait,
.gc-fl--side .gc-fl__letter--right .gc-fl__portrait {
	background: none;
	box-shadow: none;
	border: 0;
	border-bottom: 1px solid var(--gc-fl-line);
	border-radius: 0;
	overflow: visible;
}

.gc-fl--side .gc-fl__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.gc-fl--side .gc-fl__greeting { margin-bottom: 2px; }

.gc-fl--side .gc-fl__copy { margin-top: 18px; margin-bottom: 26px; }
.gc-fl--side .gc-fl__copy p { max-width: none; line-height: 1.75; }
.gc-fl--side .gc-fl__copy p + p { margin-top: 18px; }

.gc-fl--side .gc-fl__copy p.is-lead {
	font-size: calc(var(--gc-fl-body-size) + 2px);
	line-height: 1.6;
	font-weight: 500;
	color: var(--gc-fl-ink);
}

.gc-fl--side .gc-fl__creds {
	flex-direction: column;
	gap: 7px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--gc-fl-line);
}

.gc-fl--side .gc-fl__sign {
	margin-top: 22px;
	padding-top: 0;
	border-top: 0;
}

@media (max-width: 1024px) {
	.gc-fl { --gc-fl-portrait-w: 260px; }
}

@media (max-width: 860px) {
	.gc-fl {
		--gc-fl-gap: 22px;
		--gc-fl-letter-gap: 40px;
	}
	.gc-fl--side .gc-fl__letters {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 20px;
	}
	.gc-fl--side .gc-fl__portrait { --gc-fl-avatar: 76px; }
	.gc-fl--side .gc-fl__creds { margin-top: 26px; }
	.gc-fl__letter,
	.gc-fl__letter--right {
		grid-template-columns: minmax(0, 1fr);
	}
	.gc-fl__letter--right .gc-fl__portrait,
	.gc-fl__letter--right .gc-fl__body { order: 0; }
	.gc-fl--sticky .gc-fl__portrait { position: relative; top: auto; }
	.gc-fl--stacked .gc-fl__portrait { max-width: 300px; }
	.gc-fl--stacked .gc-fl__portrait img { aspect-ratio: var(--gc-fl-portrait-ratio, 1); }
	.gc-fl__body,
	.gc-fl__letter--right .gc-fl__body {
		padding: 0;
		border: 0;
	}
	.gc-fl__copy p { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.gc-fl__portrait { transition: none; }
	.gc-fl__letter:hover .gc-fl__portrait { transform: none; }
}

/* Eyebrow: one spec across every Gencore widget. Inter 11.5/600/.16em,
   uppercase, no trailing rule. */
.gc-fl__eyebrow {
	display: block;
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.4;
	margin-bottom: 14px;
}

.gc-fl__eyebrow::before,
.gc-fl__eyebrow::after { display: none; }

@media (max-width: 640px) {
	.gc-fl__eyebrow { font-size: 10.5px; margin-bottom: 12px; }
}