@layer components {
	/* Fades straight into the footer black (design DNA): no bottom edge, no padding. */
	.panorama {
		position: relative;
		isolation: isolate;
		background: var(--black);
		color: var(--white-text);
		width: 100%;
		max-width: 100%;
		aspect-ratio: var(--ratio-panorama-mobile);
		min-height: 300px;
		overflow: hidden;
		margin-top: 0;
	}
	.panorama__media, .panorama__media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; }
	.panorama__overlay { position: absolute; inset: 0; z-index: -1; background: var(--overlay-panorama-warm), var(--overlay-panorama); }
	.panorama__inner { height: 100%; display: flex; align-items: center; justify-content: center; }
	.panorama__quote {
		font-family: var(--font-display);
		font-weight: var(--fw-medium);
		font-size: var(--fs-h3);
		letter-spacing: var(--ls-label);
		line-height: 1.5;
		text-transform: uppercase;
		text-align: center;
		text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
	}
	@media (min-width: 768px) {
		.panorama { aspect-ratio: var(--ratio-panorama); min-height: 200px; max-height: 300px; }
		.panorama__inner { justify-content: flex-end; align-items: center; }
		.panorama__quote { text-align: right; }
	}
}