/* ==========================================================================
   HOME — VIDEO HERO

   Full-bleed brand film directly under the header, with the headline and lede
   reading off a light white fade on its left.

   Scoped entirely under .sud-vbanner, a class that exists on ONE container on
   ONE page. Nothing here can reach another section, the header or the footer.

   NOTHING IN THE PAGE DATA CHANGES FOR THIS LAYOUT.
   The video keeps its widget, its file and its own CSS; the copy keeps its two
   widgets. The composition is entirely a matter of where these three boxes are
   painted, so it is done here and the page structure is left alone.

   WHAT THIS VARIANT TAKES BACK FROM .sud-banner
   The container carries .sud-banner, which is built for white type over a
   photograph on a dark green ground: a green background-colour, a green scrim,
   white headings with a text-shadow, a 90%-white lede and a 3px brand hairline.
   This design is the inverse — dark type on light — so each of those is undone
   explicitly, at the point where it is overridden.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE BANNER

   ON THE HEIGHT — AND THE ONE REQUIREMENT THAT COULD NOT BE MET AS WRITTEN

   The brief asks for three things that cannot all hold at once: full viewport
   width, no crop on any of the four edges, and a height like the other banners
   (about 535px). The film is 1920x1080, so at a 1425px-wide viewport showing
   every pixel of it fixes the height at 1425 / 1.778 = 801px. There is no
   layout that avoids that; the arithmetic is the whole of it. At 535px the
   choice is a 33% crop off the top and bottom, or 237px of empty band down each
   side — the second being both a crop of the banner and the white gap the brief
   rules out.

   "Must not be cropped" is the requirement that wins here, so the banner is a
   16:9 box: the film fills it corner to corner, nothing is lost from any edge,
   and the height follows the width. It runs about 800px at 1440 and 432px at
   768 rather than a flat 535.

   Stated as a ratio rather than a height so it stays exact at every width.
   -------------------------------------------------------------------------- */

.elementor .e-con.sud-banner.sud-vbanner {
	--width: 100%;
	position: relative;
	inline-size: 100%;
	max-inline-size: none;

	/* Hard against the header and the section below it: no margin, no radius,
	   no border, no shadow, nothing inset. */
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;

	/*
	 * A FULL-BLEED BAND LIKE EVERY OTHER PAGE, BUT TALLER.
	 *
	 * The other pages open on a full-bleed banner 503px tall — 2.83:1 at 1440 —
	 * with its picture filling it corner to corner. This is that band, carrying
	 * a film instead of a photograph, so the home page opens the way the rest of
	 * the site does. It is taller than they are, and for a reason.
	 *
	 * At 503px the band was 2.83:1 and the film is 16:9, so filling it cost
	 * about 37% of the film's height. Giving the band the film's own ratio
	 * settles both at once: it is half as tall again — 802px at 1440 against
	 * 503 — which is the full-height hero this wants to be, and at that shape
	 * the frame meets all four edges exactly, so nothing is cropped and nothing
	 * is stretched.
	 *
	 * Written as a ratio, not a height, so it stays exact at every width.
	 */
	aspect-ratio: 16 / 9;
	block-size: auto;
	min-block-size: 0;

	/*
	 * NEVER TALLER THAN WHAT IS LEFT OF THE SCREEN.
	 *
	 * The ratio above takes the band's height from its WIDTH, which is right
	 * until the window is wide and short. At 1920x1080 and 1366x768 sixteen by
	 * nine comes to more than the whole screen: the band ran 78-79px past the
	 * fold with nothing left over for the header. A logged-in editor lost a
	 * further 32px to WordPress's bar and saw it at 1440x900 as well.
	 *
	 * So the ratio still decides the height and this decides the ceiling:
	 * whatever the screen has left once the header, its hairline and the admin
	 * bar are taken off. The header publishes its own height, so no measurement
	 * is repeated here and a change to the header carries through by itself.
	 *
	 * Where the ceiling binds, the band is wider than 16:9 and the film — which
	 * covers it — shows fractionally less at top and bottom. It is never
	 * stretched and never set back from the edges; cover is what this banner
	 * already used.
	 *
	 * svh rather than vh so a phone's retracting toolbar cannot push it over,
	 * with the vh line above it for anything too old to know svh.
	 */
	--sud-hero-chrome: calc(var(--sud-hd-h, 86px) + 1px);
	--sud-hero-bar: 0px;
	max-block-size: calc(100vh - var(--sud-hero-chrome) - var(--sud-hero-bar));
	max-block-size: calc(100svh - var(--sud-hero-chrome) - var(--sud-hero-bar));



	/*
	 * Elementor containers are COLUMN flex boxes, so the axes read the other way
	 * round: justify-content is the VERTICAL one here and align-items the
	 * horizontal. Stretch across, centre down.
	 */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;

	padding-block: 0;
	padding-inline: 0;

	/* .sud-banner's green ground would show for the moment before the film
	   paints, and through nothing else — the film covers the box exactly. */
	background-color: #fff;
	overflow: hidden;
}

/* Below 1150px the header switches to its shorter, mobile height. */
@media (max-width: 1150px) {
	.elementor .e-con.sud-banner.sud-vbanner {
		--sud-hero-chrome: calc(var(--sud-hd-h-mobile, 68px) + 1px);
	}
}

/*
 * The admin bar, for the stylesheet's own fallback.
 *
 * WordPress puts .admin-bar on the body when the bar is showing, so the height
 * it takes can be accounted for here as well as in the script. A logged-in
 * editor is exactly who was seeing the banner hang below the fold, and that
 * should not depend on JavaScript having run.
 */
body.admin-bar .elementor .e-con.sud-banner.sud-vbanner {
	--sud-hero-bar: 32px;
}

/* Below 783px WordPress's bar is taller, and it scrolls away rather than sticking. */
@media screen and (max-width: 782px) {
	body.admin-bar .elementor .e-con.sud-banner.sud-vbanner {
		--sud-hero-bar: 46px;
	}
}

/* The banner system's 3px brand hairline is a band device; it would draw a line
   between the film and the section below it. Off for this variant. */
.sud-banner.sud-vbanner::after { content: none; }

/* --------------------------------------------------------------------------
   THE FADE

   .sud-banner::before is the component's green scrim. It is redefined rather
   than switched off and rebuilt elsewhere, because it is already the full-bleed
   layer at z-index -1 sitting between the film and the copy — exactly where
   this fade belongs.

   White, left only, and much lighter than a scrim, because it is doing a much
   smaller job: dark type on a light wash is the forgiving direction. The floor
   is arithmetic rather than taste. #00301F needs a background at luminance
   0.285 to clear 4.5:1, which is a composite of 145; over the DARKEST frame the
   film has, 255a + 20(1-a) >= 145 solves to a >= .53.

   The lede is capped at 400px and starts at the content gutter, so it ends near
   30% of the viewport, where this ramp still reads .62 — clear of that floor
   with margin. From there it falls to nothing by 50%, so the whole right half
   of the frame carries no tint at all.
   -------------------------------------------------------------------------- */

.sud-banner.sud-vbanner::before {
	content: '';
	background: linear-gradient(to right,
		rgba(255, 255, 255, .86) 0%,
		rgba(255, 255, 255, .78) 18%,
		rgba(255, 255, 255, .62) 30%,
		rgba(255, 255, 255, .30) 40%,
		rgba(255, 255, 255, 0) 50%);
}

[dir="rtl"] .sud-banner.sud-vbanner::before {
	background: linear-gradient(to left,
		rgba(255, 255, 255, .86) 0%,
		rgba(255, 255, 255, .78) 18%,
		rgba(255, 255, 255, .62) 30%,
		rgba(255, 255, 255, .30) 40%,
		rgba(255, 255, 255, 0) 50%);
}

/* --------------------------------------------------------------------------
   THE FILM

   Stretched across the whole banner. Absolute against the banner — which is
   `position: relative` — and NOT against the row, which is deliberately left
   unpositioned so the film runs edge to edge while the copy stays on the
   content gutter.

   The banner is 16:9 and so is the file, so wherever the two agree the frame
   meets all four edges exactly and nothing is lost. `contain` is what holds
   when they cannot agree — a height capped below the fold, a phone — because
   the whole frame being visible is this banner's first requirement.

   STACKING
   .sud-banner sets `isolation: isolate`, so this is a self-contained context:
   film at -2, fade at -1, copy above both.
   -------------------------------------------------------------------------- */

.sud-vbanner .sud-vbanner__video {
	position: absolute;
	inset: 0;
	z-index: -2;

	inline-size: auto;
	block-size: auto;
	aspect-ratio: auto;

	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: #fff;             /* the ground any letterbox band lands on */
	overflow: hidden;
}

/*
 * The widget, its wrapper and the <video> all fill that box. Elementor's video
 * widget builds an intrinsic-ratio box with bottom padding; the widget's own
 * custom CSS already zeroes that, and this pins the rest so the banner is the
 * only thing deciding the shape.
 */
.sud-vbanner .sud-vbanner__video > .elementor-widget-video,
.sud-vbanner .sud-vbanner__video .elementor-widget-container,
.sud-vbanner .sud-vbanner__video .elementor-wrapper {
	position: absolute;
	inset: 0;
	block-size: 100%;
	inline-size: 100%;
	padding-bottom: 0;
}

/*
 * The film itself, filling the band exactly as every other banner's picture
 * fills its own.
 *
 * The film is 16:9 and the band is 2.83:1, so filling it leaves some of the
 * film's height outside the frame — about 37% at 1440, split top and bottom.
 * That is the trade the band asks for: keeping every pixel instead would leave
 * the film 894px wide inside a 1425px banner, which does not read as a banner
 * at all. The subject sits mid-frame, so the centre is what survives.
 *
 * WRITTEN AT FOUR CLASSES AND A TYPE, DELIBERATELY.
 * Elementor prints the widget's own custom CSS as
 * `.elementor-86 .elementor-element-cf70276 video` — two classes and a type,
 * the same weight as the obvious rule here — and prints it AFTER this
 * stylesheet, so an equal-weight rule loses on source order alone. Its copy
 * carries `object-fit: contain !important`, which is what letterboxed the film
 * inside the band until this outranked it.
 */
.elementor .e-con.sud-vbanner .sud-vbanner__video .elementor-wrapper video,
.elementor .e-con.sud-vbanner .sud-vbanner__video video {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover !important;
	object-position: center center;
	background: transparent;
}

/* --------------------------------------------------------------------------
   THE COPY

   Left, vertically centred, sitting on the site's own content gutter so the
   headline starts on the same line as the copy in every section beneath it.
   There is no panel and no card behind it — the fade IS its ground.
   -------------------------------------------------------------------------- */

.elementor .e-con.sud-vbanner__row {
	position: static;             /* so the film measures against the banner */

	/* A ROW, explicitly — the container default is column, and on a column box
	   `align-items: center` centres horizontally rather than vertically. */
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;

	inline-size: 100%;
	max-inline-size: var(--sud-maxw, 1240px);
	margin-inline: auto;
	padding-block: 0;
	padding-inline: clamp(1.25rem, 3vw, 2rem);
}

/*
 * `--width: auto` because every Elementor container emits `--width: 100%` at
 * three classes from a stylesheet that loads after this one; left alone the copy
 * would span the row and the lede would run out across the film.
 * `min-inline-size: 0` is the matching half — without it a long unbroken word
 * refuses to wrap and pushes the box past its cap.
 */
/*
 * The three structural containers carry no margin of their own.
 *
 * This is a guard, not a preference. The copy container was found carrying
 * `--margin-left: -113px; --margin-top: -24px` from the page data — an editor
 * nudge, not anything this file or the build script sets — and it pulled the
 * copy clean out of its row: measured at x=11 against a row starting at x=92,
 * so the headline sat hard against the viewport edge instead of on the content
 * gutter.
 *
 * Position here is decided by the row's max-width and padding. Anything dragged
 * onto these containers in the editor fights that silently, so their margins are
 * zeroed and the layout stays where it is meant to be.
 */
.elementor .e-con.sud-vbanner__row,
.elementor .e-con.sud-vbanner__video,
.elementor .e-con.sud-vbanner__copy {
	margin: 0;
}

.elementor .e-con.sud-vbanner__copy {
	--width: auto;
	position: relative;
	z-index: 1;

	display: flex;
	flex-direction: column;
	justify-content: center;

	inline-size: auto;
	min-inline-size: 0;
	max-inline-size: 440px;
	gap: 0;

	padding-block: 0;
	padding-inline: 0;
}

/*
 * The lede takes a shorter measure than the headline — what keeps the block
 * compact and stops the paragraph reaching out across the film.
 *
 * Written at five classes and a child combinator: Elementor's own
 * `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }` sits at
 * four and would otherwise hold the lede at the full column width.
 */
.elementor .e-con.sud-vbanner__copy > .elementor-widget.elementor-widget-text-editor {
	max-inline-size: 400px;
	margin-block-start: clamp(.75rem, 1.2vw, 1rem);
}

/* --------------------------------------------------------------------------
   THE TWO GREEN RULES

   One above the headline, one below it.

   Drawn as pseudo-elements rather than added as widgets: they are decoration,
   and a widget would be a change to the page's content. The site already draws
   this mark above the hero headline in hero-scene.css — 44px of
   --sud-green-500 with a small radius — so the proportion is the system's.
   -------------------------------------------------------------------------- */

.sud-vbanner .sud-vbanner__copy::before,
.sud-vbanner .sud-vbanner__copy h1::after {
	content: '';
	display: block;
	inline-size: 40px;
	block-size: 3px;
	border-radius: 3px;
	background: var(--sud-green-500, #43B649);
}

.sud-vbanner .sud-vbanner__copy::before { margin-block-end: clamp(.75rem, 1.3vw, 1.1rem); }
.sud-vbanner .sud-vbanner__copy h1::after { margin-block-start: clamp(.75rem, 1.3vw, 1.1rem); }

/* --------------------------------------------------------------------------
   TYPE — DARK ON LIGHT, AND COMPACT

   .sud-banner pins every text role to white WITH `!important`, because on its
   own dark ground a leaked Elementor colour would be invisible. That is the
   right default there and the wrong one here, so each role is turned back over
   at a higher specificity carrying the same `!important` it has to beat:

     .sud-banner h1 ............................... (0,1,1) !important
     .elementor .e-con.sud-vbanner__copy h1 ....... (0,4,1) !important

   The text-shadow goes with it: it exists to hold white type against a
   photograph and only muddies dark type on a light fade.

   The headline is set lighter than the banner system's 800 and smaller than a
   full hero would take, so the block stays as compact as the reference.
   -------------------------------------------------------------------------- */

.elementor .e-con.sud-vbanner__copy h1,
.elementor .e-con.sud-vbanner__copy h1 .elementor-heading-title {
	margin: 0;
	color: var(--sud-green-900, #00301F) !important;
	text-shadow: none;
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -.012em;
}

.elementor .e-con.sud-vbanner__copy .elementor-widget-text-editor,
.elementor .e-con.sud-vbanner__copy .elementor-widget-text-editor p {
	color: rgba(11, 31, 23, .76) !important;
	text-shadow: none;
}

.elementor .e-con.sud-vbanner__copy .elementor-widget-text-editor p {
	margin: 0;
	font-size: clamp(.8125rem, .95vw, .9375rem);
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   RESPONSIVE

   The banner keeps its 16:9 box and its full width all the way down, so the
   film is never cropped. What moves is how much of the width the copy takes and
   how far the fade has to carry to cover it.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {
	.sud-banner.sud-vbanner::before {
		background: linear-gradient(to right,
			rgba(255, 255, 255, .88) 0%,
			rgba(255, 255, 255, .80) 26%,
			rgba(255, 255, 255, .64) 44%,
			rgba(255, 255, 255, .30) 56%,
			rgba(255, 255, 255, 0) 66%);
	}

	.elementor .e-con.sud-vbanner__copy { max-inline-size: min(56%, 380px); }
	.elementor .e-con.sud-vbanner__copy > .elementor-widget.elementor-widget-text-editor { max-inline-size: none; }
}

/*
 * PHONES
 *
 * A 16:9 box is only 211px tall at 375, which the copy cannot sit inside. The
 * old answer was to let the copy set the height and fill the taller box with
 * `cover`, which trimmed the sides of the film — a crop, and the one thing this
 * banner must not do.
 *
 * So the two stop overlapping. The row turns into a column: the film keeps its
 * own 16:9 across the full width, whole and uncropped, and the copy sits
 * directly beneath it on the banner's white ground. The section's height is
 * then simply the film plus the words — no viewport height, no crop, nothing
 * below the fold that belongs to the film.
 *
 * The fade goes with the overlap: it exists to hold dark type over the film,
 * and here the type is on white.
 */
@media (max-width: 767px) {
	.elementor .e-con.sud-banner.sud-vbanner {
		aspect-ratio: auto;
		block-size: auto;            /* the band's fixed height is desktop only */
		min-block-size: 0;
		max-block-size: none;
		display: block;
	}

	.sud-banner.sud-vbanner::before,
	[dir="rtl"] .sud-banner.sud-vbanner::before { content: none; }

	.elementor .e-con.sud-vbanner__row {
		flex-direction: column;
		align-items: stretch;
		max-inline-size: none;
		padding: 0;
	}

	/*
	 * Back into the flow, above the copy. It stays positioned — the widget, its
	 * wrapper and the <video> are all absolute against this box — but it is no
	 * longer absolute itself, so it takes up room and the section grows to hold
	 * it.
	 */
	.sud-vbanner .sud-vbanner__video {
		position: relative;
		inset: auto;
		z-index: auto;
		inline-size: 100%;
		aspect-ratio: 16 / 9;
	}

	.elementor .e-con.sud-vbanner__copy {
		max-inline-size: none;
		padding-block: clamp(1.25rem, 5vw, 1.75rem);
		padding-inline: clamp(1.25rem, 5vw, 1.5rem);
	}

	.elementor .e-con.sud-vbanner__copy > .elementor-widget.elementor-widget-text-editor { max-inline-size: none; }
}


/* ==========================================================================
 * THE CLOSING VIDEO — DESKTOP ONLY
 *
 * The last section on the home page (56b736f) holds one video widget
 * (9a71d70) showing the original 1280x720 film. Two settings were fighting
 * it: a 21:9 box (--video-aspect-ratio: 2.33333) with object-fit: fill,
 * stretching a 16:9 film onto a shape it was never cut for. The band itself
 * was a fixed calc(100vh - 100px), a height with no relation to the film.
 *
 * A 16:9 film cannot sit in a box of another shape without being stretched,
 * cut, or set back from the edges. So the band takes the film's shape: the
 * section is 16:9, and the film fills it. Both are then the same rectangle,
 * which is why `contain` leaves nothing over — there is no bar to show.
 *
 * On a 16:9 display this works out at exactly 100vh.
 *
 * The section keeps its full-bleed width, its padding and its margins. Only
 * the fixed height gives way, because that was the thing the film could not
 * fit. The file is untouched, at its original 1280x720.
 *
 * Desktop only — Elementor's tablet breakpoint ends at 1024px.
 * ========================================================================== */

@media (min-width: 1025px) {

	/* The band is the film's shape. Width is left alone: it is already full bleed. */
	.elementor-86 .elementor-element.elementor-element-56b736f {
		aspect-ratio: 16 / 9;
		block-size: auto;
		min-block-size: 0;
	}

	/* Carry that height down to the film, unchanged, through every box between. */
	.elementor-86 .elementor-element.elementor-element-56b736f > .e-con-inner {
		block-size: 100%;
	}

	.elementor-86 .elementor-element.elementor-element-56b736f .elementor-element.elementor-element-9a71d70 {
		flex: 1 1 auto;
		min-block-size: 0;
		align-self: stretch;
	}

	/* Drop the 21:9 box; the wrapper is only a sleeve around the film now. */
	.elementor-86 .elementor-element.elementor-element-56b736f .elementor-element.elementor-element-9a71d70 .elementor-wrapper {
		--video-aspect-ratio: auto;
		aspect-ratio: auto;
		inline-size: 100%;
		block-size: 100%;
	}

	/*
	 * The film, filling the band. `contain` is the guarantee that it is never
	 * cut or stretched; because the band is the film's own shape, it also
	 * leaves nothing empty.
	 */
	.elementor-86 .elementor-element.elementor-element-56b736f .elementor-element.elementor-element-9a71d70 .elementor-wrapper video {
		display: block;
		inline-size: 100% !important;
		block-size: 100% !important;
		max-inline-size: none !important;
		object-fit: contain !important;
		background-color: transparent;
	}
}