/* Brand story (template-parts/home/brand-story.php), converted from the guardrail
   sections/brand-story.liquid stylesheet with the same geometry and breakpoints. The accent
   (eyebrow, value rules, solid button) is the Hagoma accent; the scroll motion states come
   from assets/css/home.css ([data-hg-motion-root]). */

.hg-story {
	padding-block: var(--hg-story-pad-top-m, 80px) var(--hg-story-pad-bottom-m, 80px);
	background: var(--hg-story-bg, var(--hg-footer-bg));
	color: var(--hg-story-text, var(--hg-nav-color));
}
.hg-story__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hg-story-gap-m, 32px);
	align-items: var(--hg-story-align, center);
	box-sizing: border-box;
	max-width: var(--hg-story-width, 1280px);
	margin-inline: auto;
	padding-inline: var(--hg-story-side-m, 20px);
}
.hg-story__copy { min-width: 0; }
.hg-story .hg-story__eyebrow {
	margin: 0 0 12px;
	color: var(--hg-story-eyebrow, #e0474d);
	font-size: var(--hg-story-eyebrow-size, 11px);
	font-weight: 700;
	letter-spacing: var(--hg-story-eyebrow-sp, 0.3em);
	line-height: 1.6;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
/* The accent (#b42026) is 3:1 on the default dark band, short of the 4.5:1 the small eyebrow
   needs, so there it takes the lighter red of the hero eyebrow (#e0474d, 4.9:1). A section with
   its own background keeps the accent, as before, unless it sets an eyebrow colour. */
.hg-story[style*="--hg-story-bg:"] .hg-story__eyebrow { color: var(--hg-story-eyebrow, var(--hg-accent)); }
.hg-story .hg-story__title {
	margin: 0 0 18px;
	color: var(--hg-story-heading, var(--hg-story-text, var(--hg-nav-color)));
	font-size: var(--hg-story-h-size-m, 23.4px);
	line-height: var(--hg-story-h-line, 1);
	overflow-wrap: anywhere;
}
.hg-story__body {
	max-width: var(--hg-story-body-width, 560px);
	font-size: var(--hg-story-body-size, 15px);
	line-height: var(--hg-story-body-line, 1.75);
	opacity: var(--hg-story-body-opacity, 0.85);
	overflow-wrap: anywhere;
}
.hg-story .hg-story__body p {
	margin: 0 0 14px;
	color: inherit;
}
.hg-story__body a,
.hg-story__body a:hover {
	color: inherit;
	text-decoration: underline;
}
/* Phones: value_columns_mobile across, but no column narrower than 6.5em of the value type, so
   enlarged text wraps to fewer columns instead of breaking words (the share is 1px short so
   rounding never drops a column). */
.hg-story__values {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(6.5em, (100% - (var(--hg-story-cols-m, 3) - 1) * 12px) / var(--hg-story-cols-m, 3) - 1px), 1fr));
	gap: 12px;
	margin: 28px 0;
	font-size: var(--hg-story-value-title, 12px);
}
.hg-story__value {
	min-width: 0;
	padding-top: 12px;
	border-top: var(--hg-story-rule-width, 2px) solid var(--hg-story-rule, var(--hg-accent));
	overflow-wrap: anywhere;
}
.hg-story__value strong {
	display: block;
	font-size: var(--hg-story-value-title, 12px);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.6;
	text-transform: uppercase;
}
.hg-story__value span {
	display: block;
	margin-top: 4px;
	font-size: var(--hg-story-value-text, 12px);
	line-height: 1.6;
	opacity: 0.7;
}
.hg-story__btn,
.hg-story__btn:hover,
.hg-story__btn:active {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 26px;
	border: 1px solid currentColor;
	color: var(--hg-story-text, var(--hg-nav-color));
	font-size: var(--hg-story-btn-size, 12px);
	font-weight: 700;
	letter-spacing: var(--hg-story-btn-sp, 0.18em);
	line-height: 1.6;
	text-transform: uppercase;
	text-decoration: none;
}
.hg-story--btn-solid .hg-story__btn,
.hg-story--btn-solid .hg-story__btn:hover,
.hg-story--btn-solid .hg-story__btn:active {
	border-color: var(--hg-accent);
	background: var(--hg-accent);
	color: #fff;
}
.hg-story__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
.hg-story__media {
	--hg-motion-radius: var(--hg-story-radius, 10px);
	overflow: hidden;
	aspect-ratio: var(--hg-story-ratio, 5 / 4);
	border-radius: var(--hg-story-radius, 10px);
	background: rgb(255 255 255 / 0.04);
}
.hg-story__media img,
.hg-story__placeholder {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
}
.hg-story__placeholder { opacity: 0.35; }
@media (max-width: 989px) {
	.hg-story--media-m-above .hg-story__media { order: -1; }

	/* Overlay (mobile_image_position "overlay"): one grid area. The photo runs edge to edge at
	   its own ratio, uncropped, and the copy sits on its lower part, starting --hg-story-clear
	   plus the scrim ramp below the top so the faces stay clear. The block grows with the copy;
	   the scrim is the band colour, so the photo fades into the band under longer copy. */
	.hg-story--overlay .hg-story__inner {
		gap: 0;
		padding-inline: 0;
	}
	.hg-story--overlay .hg-story__copy,
	.hg-story--overlay .hg-story__media { grid-area: 1 / 1; }
	.hg-story--overlay .hg-story__copy {
		--hg-story-ramp: 80px;
		position: relative;
		z-index: 1;
		align-self: end;
		padding: calc(var(--hg-story-clear, 47vw) + var(--hg-story-ramp)) var(--hg-story-side-m, 20px) 0;
	}
	.hg-story--overlay .hg-story__copy::before {
		--hg-story-scrim: linear-gradient(
			to bottom,
			transparent var(--hg-story-clear, 47vw),
			rgb(0 0 0 / 0.15) calc(var(--hg-story-clear, 47vw) + var(--hg-story-ramp) * 0.25),
			rgb(0 0 0 / 0.5) calc(var(--hg-story-clear, 47vw) + var(--hg-story-ramp) * 0.5),
			rgb(0 0 0 / 0.82) calc(var(--hg-story-clear, 47vw) + var(--hg-story-ramp) * 0.75),
			rgb(0 0 0 / 0.97) calc(var(--hg-story-clear, 47vw) + var(--hg-story-ramp)),
			rgb(0 0 0 / 0.98) calc(var(--hg-story-clear, 47vw) + var(--hg-story-ramp) + 160px)
		);
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		background: var(--hg-story-bg, var(--hg-footer-bg));
		-webkit-mask-image: var(--hg-story-scrim);
		mask-image: var(--hg-story-scrim);
		pointer-events: none;
	}
	/* Small red type on a photo: a halo in the band colour keeps it as legible as on the band. */
	.hg-story--overlay .hg-story__eyebrow {
		text-shadow: 0 0 2px var(--hg-story-bg, var(--hg-footer-bg)), 0 0 8px var(--hg-story-bg, var(--hg-footer-bg));
	}
	.hg-story--overlay .hg-story__media {
		--hg-motion-radius: 0px;
		align-self: stretch;
		aspect-ratio: auto;
		border-radius: 0;
		background: none;
	}
	.hg-story--overlay .hg-story__media img {
		height: auto;
		-webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent);
		mask-image: linear-gradient(to bottom, #000 75%, transparent);
	}
	.hg-story--overlay .hg-story__placeholder { aspect-ratio: 1; }
}
@media (min-width: 750px) {
	.hg-story { padding-block: var(--hg-story-pad-top, 80px) var(--hg-story-pad-bottom, 80px); }
}
@media (min-width: 768px) {
	.hg-story .hg-story__title { font-size: var(--hg-story-h-size, 34.5px); }
}
@media (min-width: 990px) {
	.hg-story__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--hg-story-gap, 72px);
		padding-inline: var(--hg-story-side, 40px);
	}
	.hg-story--media-left .hg-story__media { order: -1; }
	.hg-story__values { grid-template-columns: repeat(var(--hg-story-cols, 3), minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.hg-story .hg-story__title { font-size: var(--hg-story-h-size, 39.1px); }
}