/* ═════════════════════════════════════════════════════════════════
   TYPOGRAPHY — Shared text utility classes
   ═════════════════════════════════════════════════════════════════ */

/* ── Eyebrow labels ──
   Figma spec: Urbanist 20 / 22 / 600, uppercase. */
.eyebrow {
	font-family: var(--f-sans);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	line-height: 1.1; /* 22/20 = 110% */
	font-style: normal;
	letter-spacing: .08em;
	color: var(--green);
	text-transform: uppercase;
	margin: 0 0 1.25rem;
}
.eyebrow.orange { color: var(--orange); }
.eyebrow.cream  { color: var(--cream); }

/* ── Display / heading utility classes ── */
.display,
.h2 {
	font-family: var(--f-sans);
	font-weight: 500;
	text-transform: uppercase;
	line-height: clamp(46px, 6.94vw, 100px);
	/* line-height: 100px; */

	letter-spacing: -.01em;
	color: var(--ink);
}
.display { font-size: var(--fs-display-xl); }
.h2      { font-size: var(--fs-h2); }

/* ── Italic serif tail (used inside display/h2 headings) ── */
.it-tail {
	font-family: var(--f-serif);
	font-style: italic;
	font-weight: 400;
	font-size: var(--fs-h2-it);
	text-transform: none;
	letter-spacing: -1.4px;
	display: inline-block;
	padding-top: 5px;
	padding-bottom: 23px;
}
.it-tail.green  { color: var(--green); }
.it-tail.orange { color: var(--orange); }
.it-tail.cream  { color: var(--cream); }
.it-tail.ink    { color: var(--ink); }

.display .it-tail { font-size: var(--fs-display-it); display: block; }
.display .hl-line .it-tail { display: inline; }

/* ── Lead paragraph ── */
.lede {
	font-size: var(--fs-lead);
	color: var(--ink-soft);
	max-width: 68ch;
	margin: 1rem 0 2rem;
	line-height: 1.45;
}

/* ── Headline line helper (used inside .display / .h2) ── */
.display .hl-line, .h2 .hl-line, .finalcta h2 .hl-line { display: block; }

/* When split-word markup is used inside section headings (not .hero-headline),
   GSAP animates the .hl-line parent — cancel the sw-inner's own animation so
   the text is visible once the parent animates in. */
.section .display .split-word .sw-inner,
.section .h2 .split-word .sw-inner,
.finalcta h2 .split-word .sw-inner {
	transform: none;
	opacity: 1;
	transition: none;
}


/* When .it-tail is nested inside an .hl-line, GSAP animates the parent
   .hl-line and the tail should ride along — cancel its own pre-hide.
   vertical-align:top aligns the tail's top with the split-word's top
   so both pieces of the line appear at the same height. */
.section .display .hl-line .it-tail,
.section .h2 .hl-line .it-tail,
.finalcta h2 .hl-line .it-tail {
	opacity: 1;
	transform: none;
	vertical-align: top;
}

/* Same top-anchoring for the split-word sibling — keeps the pair visually
   level and preserves the block height at exactly line-height. */
.section .display .hl-line .split-word,
.section .h2 .hl-line .split-word,
.finalcta h2 .hl-line .split-word {
	vertical-align: top;
}