/**
 * Text Feature: centered heading + body columns + optional CTA over the dark ground
 * with a faded GHS monogram. Namespaced (text-feature / tf-).
 */

.text-feature{
	--tf-gold:#b79d60;        /* unified brand gold (matches the landing hero) */
	--tf-ground:#21160d;      /* dark warm ground the content sits on */
	--tf-text:#f6f5f3;        /* off-white */
	position:relative;
	overflow:hidden;
	padding:clamp(72px,12vw,160px) 24px;
	background:var(--tf-ground);
	color:var(--tf-text);
	font-family:'Jost',system-ui,sans-serif;
}
.text-feature *{box-sizing:border-box}

/* light placement variant, so the module also works on light pages */
.text-feature--light{
	--tf-ground:#f4f1ea;
	--tf-text:#2b2b2b;
}

/* faded GHS monogram watermark, centred behind the content (CSS mask = recolourable).
   The fill is applied only where masking is supported, so browsers without it show
   nothing rather than a gold rectangle. */
.tf-monogram{
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	width:min(466px,58vw);aspect-ratio:466 / 519;
	opacity:.09;pointer-events:none;
}
@supports ((-webkit-mask:url('ghs-monogram.svg')) or (mask:url('ghs-monogram.svg'))){
	.tf-monogram{
		background-color:var(--tf-gold);
		-webkit-mask:url('ghs-monogram.svg') no-repeat center / contain;
		mask:url('ghs-monogram.svg') no-repeat center / contain;
	}
}

.tf-inner{
	position:relative;z-index:1;
	max-width:1044px;margin:0 auto;
	display:flex;flex-direction:column;align-items:center;gap:32px;
	padding:0 clamp(0px,6vw,112px);
}

.tf-heading{
	margin:0;
	font-family:'Jost',sans-serif;font-weight:400;
	font-size:clamp(30px,4vw,40px);line-height:1.05;letter-spacing:-.03em;
	text-align:center;color:var(--tf-text);
}

.tf-cols{display:flex;gap:24px;width:100%}
.tf-col{flex:1 1 0;min-width:0;font-size:16px;line-height:1.6;opacity:.8}
.tf-col > :first-child{margin-top:0}
.tf-col > :last-child{margin-bottom:0}
.tf-col a{color:var(--tf-gold);text-decoration:underline}

.tf-cta-wrap{display:flex;justify-content:center}
.tf-cta{
	display:inline-flex;align-items:center;justify-content:center;
	border:1px solid var(--tf-gold);color:var(--tf-gold);background:none;
	padding:16px 32px;border-radius:500px;
	font:400 16px/1.2 'Jost',sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;
	transition:background .2s ease, color .2s ease;
}
.tf-cta:hover,.tf-cta:focus-visible{background:var(--tf-gold);color:var(--tf-ground)}

@media (max-width:760px){
	.tf-cols{flex-direction:column;gap:16px}
	.tf-inner{padding-left:0;padding-right:0;align-items:flex-start}   /* the section already gives 24px; don't double it on mobile */
	.tf-heading{text-align:left}
	.tf-cta-wrap{justify-content:flex-start}
}

@media (prefers-reduced-motion: reduce){
	.tf-cta{transition:none}
}