/* ==========================================================================
   Section: Contact / Hero. Ported from contact-styles.css.
   Hero background dissolves to white over its lower half (matches other pages)
   instead of the design's hard edge.
   ========================================================================== */

.contact-hero {
	padding: 142px 0 0;
	background: linear-gradient(180deg, var(--bg-alt) 0, var(--bg) 100%);
	position: relative; overflow: hidden;
}
.contact-hero::before { content:''; position:absolute; top:-150px; right:-90px; width:560px; height:560px; background: radial-gradient(circle, rgba(24,173,231,0.09), transparent 64%); pointer-events:none; }
.contact-hero .container { position: relative; }
.contact-hero h1 { font-size: clamp(38px, 4.6vw, 58px); margin-top: 16px; max-width: 16ch; }
.contact-hero h1 .grad-text { background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.contact-hero p.sub { font-size: 18px; color: var(--body); max-width: 600px; margin-top: 18px; padding-bottom: 44px; }

@media (max-width: 620px) {
	.contact-hero { padding-top:120px; }
}