.section_films {
	z-index: 3;
	width: 100vw;
	height: 100vh;
	position: relative;
}
.films_container {
	justify-content: center;
	align-items: stretch;
	height: 100%;
	padding-left: 0;
	padding-right: 0;
	display: flex;
	position: relative;
}
.films_wrapper {
	z-index: 1;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	display: flex;
	position: relative;
}
.film {
	/* 1 is fully grey on hover; lower it for a partial wash. */
	--film-hover-grey: 1;
	pointer-events: auto;
	width: 100%;
	height: 100%;
	padding: 5.25rem 2rem 2rem;
	text-decoration: none;
	position: relative;
	/* The mobile image is set to 125% height and would otherwise spill into the
	   panel below it. */
	overflow: hidden;
}
/* Only where there is a real pointer. On a touchscreen :hover latches after a
   tap and the panel would stay grey until you tapped somewhere else. */
@media (hover: hover) and (pointer: fine) {
	.film_img {
		transition: filter 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	}
	.film:hover .film_img {
		filter: grayscale(var(--film-hover-grey));
	}
}
/* Auto margins on both sides absorb the free space equally, which centres the
   heading in the panel while leaving the button at the foot of the column. */
.film_head {
	z-index: 2;
	margin-top: auto;
	margin-bottom: auto;
	grid-column-gap: 0.5rem;
	grid-row-gap: 0.5rem;
	width: 100%;
	/* Off-white, matching the hero: these sit on photographs whose tones are
	   not controlled, and gold has nowhere near enough separation from them. */
	color: var(--vv-off-white);
	flex-flow: column;
	display: flex;
	position: relative;
}
.film_heading_wrapper {
	width: 100%;
}
/* The label and its button as one group at the foot of the panel — the label
   directly above the button with a clear gap, never touching it. */
.film_foot {
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	color: var(--vv-off-white);
	position: relative;
}
/* Centred, not spread. space-between throws two or three short words to the
   panel edges — with two panels side by side the last word of the left one
   ends up touching the first word of the right one and they read as one
   phrase. The gap replaces the word spaces that flex layout discards.
   hero-stack.js re-applies this to each SplitText line; both have to agree. */
.film_heading {
	text-align: center;
	flex-flow: wrap;
	justify-content: center;
	align-items: center;
	column-gap: 0.25em;
	/* Sized so the longer of the two headings stays on ONE line at every desktop
	   width. "What we handle" needs 7.58em; a panel is half the viewport less
	   4rem of padding, and at the template's 6.67vw that overflows from 1920px
	   all the way down to 992px. Two headings of different line counts cannot
	   sit level with each other, so the size is set by the longer one. */
	font-size: 5.2vw;
	display: flex;
}
.film_heading .line {
	column-gap: 0.25em;
}
/* Both source files are cut to 0.89 — the panel's own proportion — so cover
   fills the frame edge to edge with almost nothing trimmed, and the two panels
   read as a matched pair. Letterboxing them instead left one with bars down the
   sides and the other with bars top and bottom, which is what made them look
   mismatched. Re-crop the masters in image-masters/ if the panel ever changes
   shape. */
.film_img {
	z-index: 1;
	transform-origin: 50% 0;
	object-fit: cover;
	object-position: 50% 50%;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0%;
}
.film_inner {
	z-index: 3;
	flex-flow: column;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
}
/* The template's 0.1 was cut for dark film stills. These are bright daylight
   photographs — white walls, white linen, open sky — and the headings sit off-
   white in the middle of them, where the left panel measured 1.41:1 against the
   sky inside the arch. Tune with --film-scrim; below about 0.4 the brightest
   patches stop clearing 3:1. */
.film_overlay {
	--film-scrim: 0.45;
	z-index: 2;
	opacity: var(--film-scrim);
	background-color: #000;
	position: absolute;
	inset: 0%;
}
.films_overlay {
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	background-color: #000;
	position: absolute;
	inset: 0%;
}
.film_heading_span_one {
	min-width: 25%;
}
@media screen and (max-width: 991px) {
	.section_films {
		height: calc(var(--vh) * 100);
	}
	.films_wrapper {
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		flex-flow: column;
	}
	.film {
		padding-top: 2rem;
	}
	.film_heading {
		font-size: 3rem;
	}
	.film_img {
		height: 125%;
	}
}
@media screen and (max-width: 767px) {
	.film {
		padding: 1rem;
	}
	.film_heading {
		font-size: 2.75rem;
	}
}
@media screen and (max-width: 479px) {
	.films_container.u-container {
		padding-left: 0;
		padding-right: 0;
	}
	.films_wrapper {
		flex-flow: column;
	}
	.film {
		padding-top: 2rem;
	}
	.film_head {
		flex-flow: column-reverse;
	}
	.film_heading {
		font-size: 2.75rem;
	}
	.film_heading_span_one {
		min-width: 25%;
	}
}