@font-face {
	font-family: "HGA Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/HGA-Montserrat.ttf") format("truetype");
}

:root {
	--hga-ink: #140521;
	--hga-purple: #4b0081;
	--hga-violet: #6d2d9c;
	--hga-gold: #c9a35e;
	--hga-paper: #fbfafc;
	--hga-lavender: #f4f0f7;
	--hga-muted: #5e5665;
	--hga-line: rgba(75, 0, 129, 0.13);
}

html { scroll-behavior: smooth; }
body, input, select, textarea { font-family: "HGA Montserrat", Montserrat, Arial, sans-serif; }
body { background: var(--hga-ink); color: var(--hga-muted); }
h1, h2, h3, h4, h5, h6 { color: var(--hga-ink); font-family: "HGA Montserrat", Montserrat, Arial, sans-serif; font-weight: 600; letter-spacing: -0.025em; }
p { color: var(--hga-muted); }

#wrapper {
	background:
		radial-gradient(circle at 78% 8%, rgba(139, 70, 191, 0.34), transparent 26rem),
		linear-gradient(145deg, #10031f 0%, #320653 54%, #160525 100%);
	max-width: calc(100% - 4em);
	position: relative;
}

#header { padding: 3.5rem 4rem 2.85rem; position: relative; }
#header:before { background: linear-gradient(90deg, transparent, var(--hga-gold), transparent); content: ""; height: 1px; left: 20%; opacity: 0.7; position: absolute; right: 20%; top: 0; }
#header h1 { color: #fff; font-size: 2.45rem; font-weight: 650; letter-spacing: -0.035em; }
#header p { color: rgba(255,255,255,0.76); font-size: 0.77rem; font-weight: 600; letter-spacing: 0.18em; margin-top: 0.45rem; text-transform: uppercase; }

#nav { background: rgba(255,255,255,0.96); border-bottom: 1px solid var(--hga-line); box-shadow: 0 0.75rem 2rem rgba(22,5,37,0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-sizing: border-box; left: 0; max-width: 100%; width: 100%; }
#nav.alt { left: 50%; max-width: calc(100% - 4em); transform: translateX(-50%); width: 64em; }
#nav ul li a { border-radius: 0; color: #4c4451; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.06em; padding: 1.25rem 1rem; text-transform: uppercase; }
#nav ul li a.active { background: transparent; box-shadow: inset 0 -3px 0 var(--hga-purple); color: var(--hga-purple); }
#nav ul li a:hover { color: var(--hga-purple); }

#main { background: var(--hga-paper); overflow: hidden; }
#main > .main { border-top: 1px solid var(--hga-line); padding: 5.6rem 4.75rem; }
#main > .main:first-child { border-top: 0; }
#main > .main.alt { background: var(--hga-lavender); }

.page-hero {
	background:
		radial-gradient(circle at 88% 20%, rgba(137,62,190,0.36), transparent 23rem),
		linear-gradient(125deg, #10031f, #4b0081);
	color: #fff;
	position: relative;
}
.page-hero h2 { color: #fff; font-size: 3rem; font-weight: 650; letter-spacing: -0.045em; line-height: 1.08; margin-bottom: 1.35rem; max-width: 54rem; }
.page-hero h2.contact-hero-title { font-size: 2.55rem; max-width: none; }
.page-hero p { color: rgba(255,255,255,0.78); font-size: 1.08rem; line-height: 1.8; max-width: 55rem; }
.page-hero .kicker { color: #e0c595; }

.kicker { color: var(--hga-purple); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.17em; margin: 0 0 0.9rem; text-transform: uppercase; }
.section-intro { font-size: 1.02rem; line-height: 1.75; margin: 0 0 2.75rem; max-width: 54rem; }
.content-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2.5rem; }
.content-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.panel { background: #fff; border: 1px solid var(--hga-line); border-radius: 0.3rem; box-shadow: 0 0.75rem 2rem rgba(31,9,50,0.055); padding: 2.1rem; }
.panel h3 { font-size: 1.12rem; margin-bottom: 0.75rem; text-align: center; }
.panel p { font-size: 0.9rem; line-height: 1.75; margin-bottom: 0.9rem; }
.panel p:last-child { margin-bottom: 0; }
.panel ul { margin-bottom: 0; }
.panel li { color: var(--hga-muted); font-size: 0.86rem; line-height: 1.65; margin-bottom: 0.5rem; }
.works-with { display: flex; flex-direction: column; justify-content: center; padding: 2.35rem 2.6rem; }
.works-with h3 { font-size: 1.3rem; margin-bottom: 1.5rem; text-align: center; }
.works-with ul { margin: 0; }
.works-with li { font-size: 0.98rem; line-height: 1.65; margin-bottom: 0.85rem; }
.works-with li:last-child { margin-bottom: 0; }

.sequence { counter-reset: hga-step; display: grid; gap: 1rem; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 2.5rem; }
.sequence-item { background: #fff; border: 1px solid var(--hga-line); border-top: 3px solid var(--hga-purple); min-height: 13.5rem; padding: 1.5rem 1.15rem; text-align: center; }
.sequence-item:before { color: var(--hga-gold); content: "0" counter(hga-step); counter-increment: hga-step; display: block; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.1em; margin-bottom: 0.8rem; }
.sequence-item h3 { font-size: 0.98rem; margin-bottom: 0.5rem; text-align: center; }
.sequence-item p { font-size: 0.78rem; line-height: 1.55; margin: 0; }
.engagement-icon { display: block; height: 3.6rem; margin: 0 auto 0.9rem; object-fit: contain; width: 3.6rem; }

.proof-list { list-style: none; margin: 0; padding: 0; }
.proof-list li { border-top: 1px solid var(--hga-line); color: var(--hga-muted); font-size: 0.9rem; line-height: 1.7; padding: 1.15rem 0; }
.proof-list li:last-child { border-bottom: 1px solid var(--hga-line); }
.proof-list strong { color: var(--hga-ink); display: block; font-size: 0.98rem; margin-bottom: 0.2rem; }

.insight-card { align-items: center; display: grid; gap: 3.5rem; grid-template-columns: minmax(15rem, 0.9fr) minmax(18rem, 1.1fr); }
.insight-card img { border: 1px solid rgba(75,0,129,0.16); border-radius: 0.3rem; box-shadow: 0 1.25rem 2.8rem rgba(38,11,72,0.2); display: block; height: auto; width: 100%; }

.conversation-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2.5rem 0; }
.conversation-option { background: #fff; border: 1px solid var(--hga-line); border-top: 3px solid var(--hga-purple); padding: 1.8rem; }
.conversation-option h3 { font-size: 1.02rem; margin-bottom: 0.55rem; text-align: center; }
.conversation-option p { font-size: 0.84rem; line-height: 1.65; margin: 0; }

.contact-scheduling { background: linear-gradient(135deg, #f3edf7, #fff); border: 1px solid var(--hga-line); border-left: 4px solid var(--hga-gold); box-shadow: 0 1rem 2.6rem rgba(31,9,50,0.07); margin: 2.5rem 0; padding: 2rem 2.25rem; text-align: center; }
.contact-scheduling h3 { font-size: 1.22rem; margin: 0 0 0.45rem; text-align: center; }
.contact-scheduling p { font-size: 0.84rem; line-height: 1.65; margin: 0 auto 1.35rem; max-width: 48rem; }
.contact-scheduling .schedule-options { align-items: stretch; justify-content: center; margin: 0; }
.contact-scheduling .schedule-options li { display: flex; }
#main .contact-scheduling .button { align-items: center; background-color: transparent; box-shadow: none; color: var(--hga-purple) !important; display: inline-flex; justify-content: center; padding: 0 1.15rem; }
#main .contact-scheduling .button:hover { background: rgba(75,0,129,0.05); }
#main .contact-scheduling .button.primary { background-color: var(--hga-purple); border-color: var(--hga-purple); box-shadow: 0 0.6rem 1.35rem rgba(75,0,129,0.18); color: #fff !important; }
#main .contact-scheduling .button.primary:hover { background-color: var(--hga-violet); border-color: var(--hga-violet); }
#main .contact-scheduling .event-button { border-color: var(--hga-gold); color: var(--hga-ink) !important; }
#main .contact-scheduling .event-button:hover { background: rgba(201,163,94,0.12); border-color: var(--hga-gold); }

.button { border: 1px solid rgba(75,0,129,0.24); border-radius: 0.25rem; box-shadow: none; color: var(--hga-purple) !important; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; padding: 0 1.55rem; text-transform: uppercase; }
.button:hover { background: rgba(75,0,129,0.05); border-color: var(--hga-purple); }
.button.primary { background-color: var(--hga-purple); border-color: var(--hga-purple); box-shadow: 0 0.6rem 1.35rem rgba(75,0,129,0.18); color: #fff !important; }
.button.primary:hover { background-color: var(--hga-violet); border-color: var(--hga-violet); }

.cta-panel { background: linear-gradient(135deg, #f3edf7, #fff); border: 1px solid var(--hga-line); border-left: 4px solid var(--hga-gold); box-shadow: 0 1rem 2.6rem rgba(31,9,50,0.07); margin-top: 2rem; padding: 2.75rem; }
.cta-panel h3 { font-size: 1.35rem; text-align: center; }

#footer { background: #10031e; border-top: 1px solid rgba(201,163,94,0.28); padding: 4rem 4.75rem 2.5rem; }
#footer h2 { color: #fff; }
#footer p, #footer dd, #footer dt { color: rgba(255,255,255,0.66); }
#footer .copyright { width: 100%; }

@media screen and (min-width: 981px) {
	.page-hero h2.contact-hero-title { white-space: nowrap; }
}

@media screen and (max-width: 980px) {
	#main > .main { padding: 4.5rem 3rem; }
	.content-grid.three, .conversation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sequence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 736px) {
	#header { padding: 2.9rem 1.5rem 2.35rem; }
	#header h1 { font-size: 1.9rem; }
	#nav { overflow-x: auto; }
	#nav ul { min-width: max-content; padding: 0 0.5rem; }
	#nav ul li a { padding: 1rem 0.75rem; }
	#main > .main { padding: 3.8rem 1.5rem; }
	.page-hero h2 { font-size: 2.3rem; }
	.content-grid, .content-grid.three, .conversation-grid, .sequence, .insight-card { grid-template-columns: 1fr; }
	.panel { padding: 1.6rem; }
	.contact-scheduling { padding: 1.6rem; }
	.contact-scheduling .schedule-options { display: grid; grid-template-columns: 1fr; }
	.contact-scheduling .schedule-options li, .contact-scheduling .schedule-options .button { width: 100%; }
	#footer { padding: 3rem 1.5rem 2rem; }
}

@media screen and (max-width: 480px) {
	#wrapper { max-width: calc(100% - 2em); }
}

@media screen and (max-width: 360px) {
	#wrapper { max-width: 100%; }
}