:root {
	--tg-accent: #6FCBC6;
	--tg-accent-dark: #56B6B1;
	--tg-text: #222222;
	--tg-muted: #5f666a;
	--tg-bg-soft: #F4FAF9;
	--tg-border: #DDE8E7;
	--tg-white: #FFFFFF;
	--tg-radius: 10px;
	--tg-max: 1180px;
}

.tg-section {
	max-width: var(--tg-max);
	margin-inline: auto;
	padding: 64px 24px;
}

.tg-hero {
	padding-top: 72px;
	padding-bottom: 72px;
}

.tg-hero-title {
	font-size: clamp(2.4rem, 5vw, 4.4rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin-bottom: 22px;
}

.tg-eyebrow {
	color: #3E8F8B;
	font-weight: 700;
	margin-bottom: 14px;
}

.tg-lead,
.tg-section-intro {
	color: var(--tg-muted);
	font-size: 1.08rem;
	line-height: 1.75;
}

.tg-buttons {
	gap: 12px;
	margin-top: 28px;
}

.tg-button .wp-block-button__link {
	background: var(--tg-accent);
	color: var(--tg-white);
	border: 1px solid var(--tg-accent);
	border-radius: 6px;
	padding: 0.8em 1.25em;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.tg-button .wp-block-button__link:hover,
.tg-button .wp-block-button__link:focus {
	background: var(--tg-accent-dark);
	border-color: var(--tg-accent-dark);
	color: var(--tg-white);
}

.tg-button-secondary .wp-block-button__link {
	background: transparent;
	color: #2B7773;
}

.tg-button-secondary .wp-block-button__link:hover,
.tg-button-secondary .wp-block-button__link:focus {
	background: var(--tg-bg-soft);
	color: #235F5C;
}

.tg-image-placeholder {
	min-height: 300px;
	background: var(--tg-bg-soft);
	border: 1px dashed var(--tg-border);
	border-radius: var(--tg-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tg-muted);
}

.tg-card-grid {
	gap: 22px;
	margin-top: 22px;
}

.tg-card {
	background: var(--tg-white);
	border: 1px solid var(--tg-border);
	border-radius: var(--tg-radius);
	padding: 28px;
	height: 100%;
	box-shadow: 0 8px 24px rgba(0,0,0,.035);
}

.tg-card h3 {
	margin-top: 0;
}

.tg-card p {
	color: var(--tg-muted);
	line-height: 1.65;
}

.tg-cta {
	background: var(--tg-bg-soft);
	border: 1px solid var(--tg-border);
	border-radius: var(--tg-radius);
	padding: 28px;
	margin-top: 40px;
}

@media (max-width: 781px) {
	.tg-section,
	.tg-hero {
		padding: 40px 20px;
	}

	.tg-hero-title {
		font-size: clamp(2rem, 10vw, 3rem);
	}

	.tg-hero-columns {
		gap: 32px;
	}
}