/* Numbered cards (template-parts/home/numbered-cards.php), converted from the guardrail
   sections/numbered-cards.liquid stylesheet with the same geometry and breakpoints. Background
   and text default to the Hagoma page colours, numbers and eyebrow to the Hagoma accent; the
   scroll motion states come from assets/css/home.css ([data-hg-motion-root]). */

.hg-why {
	padding-block: var(--hg-why-pad-top-m, 64px) var(--hg-why-pad-bottom-m, 64px);
	background: var(--hg-why-bg, var(--hg-bg));
	color: var(--hg-why-text, var(--hg-text));
}
.hg-why__inner {
	box-sizing: border-box;
	max-width: var(--hg-why-width, 1280px);
	margin-inline: auto;
	padding-inline: var(--hg-why-side-m, 20px);
}
.hg-why--center .hg-why__inner { text-align: center; }
.hg-why--center .hg-why__intro { margin-inline: auto; }
.hg-why .hg-why__eyebrow {
	margin: 0 0 10px;
	color: var(--hg-why-eyebrow, var(--hg-accent));
	font-size: var(--hg-why-eyebrow-size, 12px);
	font-weight: 600;
	letter-spacing: var(--hg-why-eyebrow-sp, 0.22em);
	line-height: 1.3;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
.hg-why .hg-why__title {
	margin: 0 0 10px;
	color: var(--hg-why-heading, var(--hg-why-text, var(--hg-text)));
	font-size: var(--hg-why-h-size-m, 23.4px);
	line-height: var(--hg-why-h-line, 1);
	overflow-wrap: anywhere;
}
.hg-why__intro {
	max-width: var(--hg-why-intro-width, 620px);
	margin: 0 0 28px;
	font-size: var(--hg-why-intro-size, 16px);
	line-height: 1.6;
	opacity: var(--hg-why-intro-opacity, 0.85);
	overflow-wrap: anywhere;
}
.hg-why .hg-why__intro p {
	margin: 0;
	color: inherit;
}
.hg-why .hg-why__intro p + p { margin-top: 10px; }
.hg-why__intro a,
.hg-why__intro a:hover {
	color: inherit;
	text-decoration: underline;
}
.hg-why__grid {
	display: grid;
	grid-template-columns: repeat(var(--hg-why-cols-m, 1), minmax(0, 1fr));
	gap: var(--hg-why-gap, 12px);
}
.hg-why__card {
	box-sizing: border-box;
	min-width: 0;
	padding: var(--hg-why-pad-y, 20px) var(--hg-why-pad-x, 18px);
	border: 1px solid var(--hg-why-border, #e3ddd3);
	border-radius: var(--hg-why-radius, 6px);
	background: var(--hg-why-card-bg, #fff);
	overflow-wrap: anywhere;
}
.hg-why__num {
	display: block;
	margin-bottom: 8px;
	color: var(--hg-why-number, var(--hg-accent));
	font-family: var(--hg-font-heading);
	font-size: var(--hg-why-number-size, 13px);
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.6;
}
.hg-why .hg-why__card-title {
	margin: 0 0 6px;
	color: var(--hg-why-card-title, var(--hg-why-text, var(--hg-text)));
	font-family: var(--hg-font-heading);
	font-size: var(--hg-why-title-size, 18px);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}
.hg-why__card-text {
	font-size: var(--hg-why-card-text, 14px);
	line-height: 1.6;
	opacity: var(--hg-why-card-opacity, 0.82);
}
.hg-why .hg-why__card-text p {
	margin: 0;
	color: inherit;
}
.hg-why .hg-why__card-text p + p { margin-top: 8px; }
.hg-why__card-text a,
.hg-why__card-text a:hover {
	color: inherit;
	text-decoration: underline;
}
@media (min-width: 750px) {
	.hg-why { padding-block: var(--hg-why-pad-top, 64px) var(--hg-why-pad-bottom, 64px); }
	.hg-why__grid { grid-template-columns: repeat(var(--hg-why-cols-t, 2), minmax(0, 1fr)); }
}
@media (min-width: 768px) {
	.hg-why .hg-why__title { font-size: var(--hg-why-h-size, 34.5px); }
}
@media (min-width: 1100px) {
	.hg-why__inner { padding-inline: var(--hg-why-side, 40px); }
	.hg-why__grid { grid-template-columns: repeat(var(--hg-why-cols, 4), minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.hg-why .hg-why__title { font-size: var(--hg-why-h-size, 39.1px); }
}