/**
 * Callout Note Section
 * Layout: callout_note
 *
 * Ported from HTML/services.html .fp-note.blue pattern (lines 304-308).
 * Light card: white → blue-soft gradient background, dark text, solid blue
 * icon box with white SVG. box_bg_color in ACF overrides the default via
 * inline style on the .callout-note element.
 */

.callout-note {
	max-width: 912px;
  margin: 0 auto;
  text-align: center;
  padding: 35px 30px;
  border: 1px solid #e7ecf3;
  border-radius: var(--radius);
  color: var(--color-ink, #202124);
  box-shadow: var(--shadow-sm);
  background: linear-gradient(160deg, #ffffff, var(--color-blue-soft));
}

.callout-note-icon {
	width: 62px;
	height: 62px;
	border-radius: 13px;
	background: var(--color-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
	color: #ffffff;
}

.callout-note-icon svg {
	width: 31px;
	height: 31px;
}

.callout-note-heading {
	font-size: 23px;
	line-height: 1.3;
	margin: 0 0 8px;
	color: var(--color-blue-deep);
	font-weight: 800;
}

.callout-note-body {
	font-size: 18.8px;
	font-size: var(--font-size-18px);
	line-height: 1.6;
	margin: 0 auto;
	color: #4a4f57;
}

@media (max-width: 780px) {
	.callout-note {
		padding: 30px;
	}
}

@media (max-width: 640px) {
	.callout-note-heading {
		font-size: 20px;
	}
}

@media (max-width: 480px) {
	.callout-note {
		padding: 25px 20px;
	}
}