/* sections/about-story.php */
.hs-section {
	box-sizing: border-box; width: 100%;
	padding: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem) var(--space-gutter);
	--hs-blue: color-mix(in srgb, var(--c-primary) 8%, var(--c-primary-dark));
	background: var(--c-bg); color: var(--c-text);
	font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.6;
}
.hs-section *, .hs-section *::before, .hs-section *::after { box-sizing: border-box; }
.hs-icon { flex: none; width: 1.375rem; height: 1.375rem; }
.hs-inner { display: grid; gap: var(--space-7); max-width: var(--container); margin: 0 auto; }
.hs-inner > * { min-width: 0; }

.hs-text { display: flex; flex-direction: column; align-items: flex-start; }
.hs-label {
	display: inline-flex; align-items: center; gap: var(--space-2);
	margin: 0 0 var(--space-3); padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill); background: var(--c-primary-soft); color: var(--c-primary);
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.hs-label::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-accent); }
.hs-section .hs-title {
	margin: 0; color: var(--c-heading);
	font-family: var(--f-heading); font-size: var(--fs-2xl); font-weight: 800;
	line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance;
}
.hs-p { margin: var(--space-4) 0 0; color: var(--c-text-muted); font-size: var(--fs-lg); }

/* Motto: flat reference navy, red quote badge, the sentence on two lines */
.hs-motto {
	display: flex; align-items: center; gap: var(--space-4); align-self: stretch;
	margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-lg) 2.5rem var(--radius-lg) 2.5rem; background: var(--hs-blue); color: var(--c-on-dark);
	box-shadow: var(--shadow-lg);
}
.hs-motto-icon { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); }
.hs-motto p { margin: 0; color: color-mix(in srgb, var(--c-on-dark) 80%, transparent); font-size: var(--fs-sm); }
.hs-motto strong { display: block; color: var(--c-on-dark); font: 800 var(--fs-xl)/1.25 var(--f-heading); letter-spacing: -0.01em; }
.hs-motto strong span { color: var(--c-primary-light); }

/* Method: intro line, three numbered cards, eco line */
.hs-method { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); }
.hs-method-intro { margin: 0 0 var(--space-1); color: var(--c-heading); font: 700 var(--fs-lg)/1.35 var(--f-heading); }
.hs-steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.hs-step {
	position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-4); align-items: center;
	padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);
	border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-bg-alt);
	transition: border-color 0.25s, background-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.hs-step:hover { border-color: var(--c-primary); background: var(--c-surface); box-shadow: var(--shadow-md); transform: translateX(4px); }
.hs-step-icon {
	position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius);
	background: var(--c-primary); color: var(--c-on-primary); transition: background-color 0.25s;
}
.hs-step:hover .hs-step-icon { background: var(--c-accent); }
/* The step's number on a small red disc over the icon tile */
.hs-step-icon::after {
	content: attr(data-n); position: absolute; top: -0.4rem; right: -0.4rem; display: grid; place-items: center;
	width: 1.25rem; height: 1.25rem; border: 2px solid var(--c-bg-alt); border-radius: 50%;
	background: var(--c-accent); color: var(--c-on-accent); font: 800 0.6875rem/1 var(--f-heading);
}
.hs-step:hover .hs-step-icon::after { background: var(--c-primary); border-color: var(--c-surface); }
.hs-section .hs-step-title { margin: 0; color: var(--c-heading); font: 700 var(--fs-lg)/1.3 var(--f-heading); }
.hs-step-text { margin: var(--space-1) 0 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.hs-eco { display: flex; align-items: flex-start; gap: var(--space-3); margin: var(--space-2) 0 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.hs-eco .hs-icon { margin-top: 0.1rem; color: var(--c-success); }

@media (min-width: 1024px) {
	.hs-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: stretch; }
	.hs-motto { margin-top: auto; } /* the bar closes the column level with the last card */
	.hs-p:last-of-type { margin-bottom: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
	.hs-section * { transition: none !important; }
}