/* ═══════════════════════════════════════════════════════════
   CONNECT SECTION (template part — reusable on any page)
   ═══════════════════════════════════════════════════════════ */

.cnt-section {
	background: #E9F2F4;
	padding: 5.5rem 0 6rem;
	border-top: 1px solid #d0e6ea;
}

.cnt-section__inner {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.cnt-section__head {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 3.5rem;
}
.cnt-section__head--left {
	text-align: left;
	margin: 0 0 2.5rem;
}
.cnt-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.cnt-btn {
	font-size: 1rem;
	padding: .75rem 2rem;
}

.cnt-section__title {
	font-family: 'Comic Relief', system-ui, sans-serif;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 900;
	color: #1a1a2e;
	margin: 0 0 1rem;
	letter-spacing: -.025em;
	line-height: 1.1;
}

.cnt-section__sub {
	font-size: 1rem;
	color: #6b7280;
	line-height: 1.75;
	margin: 0;
}

.cnt-section__body {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 5rem;
	align-items: start;
}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE (standalone)
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────── */
.cnt-hero {
	background: #E9F2F4;
	padding: 6rem 0 5rem;
	text-align: center;
	border-bottom: 1px solid #d0e6ea;
}

.cnt-hero__inner {
	max-width: 680px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.cnt-eyebrow {
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .13em;
	color: #9ca3af;
	margin: 0 0 1rem;
}

.cnt-hero__title {
	font-family: 'Comic Relief', system-ui, sans-serif;
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 900;
	color: #1a1a2e;
	margin: 0 0 1.25rem;
	letter-spacing: -.03em;
	line-height: 1.05;
}

.cnt-hero__sub {
	font-size: 1.05rem;
	color: #6b7280;
	line-height: 1.75;
	margin: 0;
}

/* ── Body: links + form ─────────────────────────────────── */
.cnt-body {
	background: #fff;
	padding: 5.5rem 0 6rem;
}

.cnt-body__inner {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 5rem;
	align-items: start;
}

/* ── Centered variant (3-col grid, no form) ─────────────── */
.cnt-links--centered {
	max-width: 940px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

/* ── Left: connect links ────────────────────────────────── */
.cnt-links__heading {
	font-family: 'Comic Relief', system-ui, sans-serif;
	font-size: 1.35rem;
	font-weight: 700;
	color: #1a1a2e;
	margin: 0 0 1.75rem;
}

.cnt-link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.25rem;
	border: 1.5px solid #d0e6ea;
	border-radius: 16px;
	text-decoration: none;
	color: inherit;
	margin-bottom: 1rem;
	transition: box-shadow .2s, transform .2s, border-color .2s;
}
.cnt-link:last-child { margin-bottom: 0; }
.cnt-link:hover {
	box-shadow: 0 6px 24px rgba(0,0,0,.08);
	transform: translateY(-2px);
	border-color: #d1d5db;
	text-decoration: none;
	color: inherit;
}

/* Vertical card style inside the centered grid */
.cnt-links--centered .cnt-link {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 2rem 1.75rem 1.75rem;
	background: #fff;
	border: 1.5px solid #d0e6ea;
	border-radius: 20px;
	color: #1a1a2e;
	margin-bottom: 0;
	min-height: 190px;
}
.cnt-links--centered .cnt-link:hover {
	background: #fff;
	border-color: #d1d5db;
	box-shadow: 0 10px 36px rgba(0,0,0,.09);
	transform: translateY(-5px);
	color: #1a1a2e;
}

.cnt-link__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cnt-links--centered .cnt-link__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	margin-bottom: 1.25rem;
}

.cnt-link__body { flex: 1; min-width: 0; }
.cnt-links--centered .cnt-link__body {
	margin-bottom: 1.5rem;
}

.cnt-link__name {
	font-size: .9rem;
	font-weight: 700;
	color: #1a1a2e;
	margin: 0 0 .2rem;
}
.cnt-links--centered .cnt-link__name {
	font-size: 1rem;
	color: #1a1a2e;
}

.cnt-link__handle {
	font-size: .775rem;
	color: #9ca3af;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cnt-links--centered .cnt-link__handle {
	color: #9ca3af;
	white-space: normal;
}

.cnt-link__arrow {
	color: #d1d5db;
	flex-shrink: 0;
	transition: color .2s, transform .2s;
}
.cnt-links--centered .cnt-link__arrow {
	color: #d1d5db;
	margin-top: auto;
	align-self: flex-end;
}
.cnt-link:hover .cnt-link__arrow {
	color: #6b7280;
	transform: translateX(3px);
}
.cnt-links--centered .cnt-link:hover .cnt-link__arrow {
	color: #7ed957;
}

/* ── Right: contact form ────────────────────────────────── */
.cnt-form__heading {
	font-family: 'Comic Relief', system-ui, sans-serif;
	font-size: 1.35rem;
	font-weight: 700;
	color: #1a1a2e;
	margin: 0 0 1.75rem;
}

.cnt-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.cnt-form__group {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin-bottom: 1.25rem;
}
.cnt-form__group:last-of-type { margin-bottom: 1.5rem; }

.cnt-form__group label {
	font-size: .8rem;
	font-weight: 600;
	color: #374151;
	letter-spacing: .02em;
}

.cnt-form__group input,
.cnt-form__group textarea {
	width: 100%;
	padding: .75rem 1rem;
	border: 1.5px solid #d0e6ea;
	border-radius: 10px;
	font-size: .9rem;
	color: #1a1a2e;
	background: #E9F8F9;
	transition: border-color .2s, box-shadow .2s;
	font-family: inherit;
	resize: vertical;
	box-sizing: border-box;
}
.cnt-form__group input::placeholder,
.cnt-form__group textarea::placeholder { color: #c1bdb6; }
.cnt-form__group input:focus,
.cnt-form__group textarea:focus {
	outline: none;
	border-color: #7ed957;
	box-shadow: 0 0 0 3px rgba(126,217,87,.18);
	background: #fff;
}

.cnt-form__btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: #7ed957;
	color: #1a1a2e;
	border: none;
	border-radius: 50px;
	padding: .85rem 2rem;
	font-size: .9rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .18s, transform .18s;
	font-family: inherit;
}
.cnt-form__btn:hover {
	background: #5cbe33;
	transform: translateY(-1px);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
	.cnt-body__inner,
	.cnt-section__body {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
	.cnt-links--centered {
		grid-template-columns: 1fr;
		max-width: 480px;
	}
	.cnt-links--centered .cnt-link {
		min-height: auto;
	}
}

@media (max-width: 640px) {
	.cnt-links--centered {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 540px) {
	.cnt-form__row { grid-template-columns: 1fr; }
	.cnt-hero { padding: 4rem 0 3rem; }
}

/* ═══════════════════════════════════════════════════════════
   LEGAL PAGES (Privacy Policy / Terms & Conditions)
   ═══════════════════════════════════════════════════════════ */

.legal-hero {
	background: #E9F2F4;
	padding: 5rem 0 4rem;
	text-align: center;
	border-bottom: 1px solid #d0e6ea;
}

.legal-hero__inner {
	max-width: 680px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.legal-hero__title {
	font-family: 'Comic Relief', system-ui, sans-serif;
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 900;
	color: #1a1a2e;
	margin: 0 0 .75rem;
	letter-spacing: -.03em;
	line-height: 1.1;
}

.legal-hero__meta {
	font-size: .85rem;
	color: #9ca3af;
	margin: 0;
}

.legal-body {
	background: #fff;
	padding: 5rem 0 6rem;
}

.legal-body__inner {
	max-width: 760px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.legal-content h2 {
	font-family: 'Comic Relief', system-ui, sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	color: #1a1a2e;
	margin: 2.5rem 0 .75rem;
}
.legal-content h2:first-child { margin-top: 0; }

.legal-content p {
	font-size: .95rem;
	color: #374151;
	line-height: 1.8;
	margin: 0 0 1rem;
}

.legal-content ul {
	padding-left: 1.5rem;
	margin: 0 0 1rem;
}

.legal-content ul li {
	font-size: .95rem;
	color: #374151;
	line-height: 1.8;
	margin-bottom: .4rem;
}

.legal-content strong { color: #1a1a2e; }