/* ==========================================================================
   The page hero: a photographic band with a title and a standfirst.

   Two pages use it, tech and security and recruitment, and they share more
   than they differ: the 356 minimum, the 150px opening, the 791 column that
   keeps the title on one line, the 16px gap, and the title ladder. What each
   brings of its own is its artwork, its closing padding and the standfirst's
   size, so those sit on a variant class.

   Keyed on the class Elementor puts on the widget, so nothing here names a
   page or an element id.

   One thing this conversion simplifies rather than copies. As containers both
   bands fought Elementor's own generated background: the desktop plate needed
   `.e-con` to outrank it, the tablet crop needed `.e-con.e-parent`, and the
   440 crop needed the element class written twice. A widget generates no
   background of its own, so each rule here just says what it means.

   Tablet values are banded between 768 and 1024 rather than left to cascade
   down from a max-width, because a variant rule carries more weight than the
   shared 767 rule and would otherwise win at 440.
   ========================================================================== */

.elementor .elementor-widget-oyo-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 356px;
	/* The artwork reaches the viewport edge while the words stay in the 1400
	   column, so the container opts out with `oyo-bleed` and the gutter is
	   taken here. */
	padding: 150px max(var(--oyo-gutter), (100% - var(--oyo-content)) / 2);
	background-repeat: no-repeat;
}

.elementor .elementor-widget-oyo-hero .oyo-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	/* #332:1645 and #314:1241 both fix the column at 791, which is what keeps
	   the title on one line where the full 1400 would let it run. */
	width: 791px;
	max-width: 100%;
}

.elementor .elementor-widget-oyo-hero .oyo-hero__title {
	margin: 0;
	font-family: Arimo, sans-serif;
	font-size: 38px;
	font-weight: 400;
	line-height: 1.2em;
	letter-spacing: -1.5px;
	text-align: start;
	color: #ffffff;
}

.elementor .elementor-widget-oyo-hero .oyo-hero__body {
	font-family: Arimo, sans-serif;
	font-weight: 400;
	line-height: 1.6em;
	color: #cccccc;
}

.elementor .elementor-widget-oyo-hero .oyo-hero__body p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Tech and security. #314:1241 desktop, #449:2553 at 440.

   The desktop plate bakes the design's own gradient in, which is why the
   scrim below is drawn only under 768: with it on at desktop the band
   measured twice the design's brightness.
   -------------------------------------------------------------------------- */
/* No artwork at the desktop tier. The band's photograph is the one on its
   container, from the media library, and it stays there: the plate this
   project used to name never actually painted, because both selectors scored
   (0,4,0) and Elementor's per-document sheet loads last. Reproducing what the
   page renders means leaving that photograph alone and covering it only where
   the design uses a different crop, which is 1024 and below. */
.elementor .elementor-widget-oyo-hero.oyo-hero--tech {
	padding-bottom: 38.8px;
	/* This band was a row with its items centred, so wherever the minimum
	   height exceeds the content the words sit in the middle of what is left
	   rather than against the top padding. At 1024 that is the difference
	   between a top of 112 and one of 140. Recruitment's band does not do
	   this: it opens at the top. */
	justify-content: center;
}

/* --------------------------------------------------------------------------
   Recruitment. #332:1628 desktop, its own 440 export below.

   The strip the desktop file leaves transparent is what the background colour
   shows through; it is the plate the Figma frame sits on.
   -------------------------------------------------------------------------- */
.elementor .elementor-widget-oyo-hero.oyo-hero--careers {
	padding-bottom: 67.6px;
	background-color: var(--oyo-bg);
	background-image:
		linear-gradient(180deg, rgba(0, 2, 4, 0) 0%, rgba(0, 2, 4, 0) 22%, rgba(0, 2, 4, 0.1) 54%, rgba(0, 2, 4, 1) 100%),
		url(../../../design/careers/hero-careers-833a99.webp);
	background-size: 100% 100%;
	background-position: center;
}


/* The standfirst sizes are stated from 768 up only. Below it the shared clamp
   governs, and a variant selector carries more weight than the shared one, so
   leaving these at the top level would let them win at 440. */
@media (min-width: 768px) {
	.elementor .elementor-widget-oyo-hero.oyo-hero--tech .oyo-hero__body {
		font-size: 22px;
	}

	.elementor .elementor-widget-oyo-hero.oyo-hero--careers .oyo-hero__body {
		font-size: 24px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	/* The tablet crop is the band's own window at 2x rather than the desktop
	   file resized: the desktop export bakes in its window and offset. */
	.elementor .elementor-widget-oyo-hero.oyo-hero--tech {
		padding-top: 112px;
		padding-bottom: 60px;
		/* The crop covers the top 28% of the band and the page colour carries
		   the rest, which is what showed when this artwork sat on the
		   container: replacing its photograph left the remainder transparent.
		   The widget sits over that photograph instead, so it has to be opaque
		   or the photograph reappears below the crop. */
		background-color: var(--oyo-bg);
		background-image: url(../../../design/heroes/hero-tech-m-538f8e.webp);
		background-size: 100% 28.2555%;
		background-position: left top;
	}

	.elementor .elementor-widget-oyo-hero.oyo-hero--tech .oyo-hero__inner {
		width: 100%;
	}

	.elementor .elementor-widget-oyo-hero.oyo-hero--tech .oyo-hero__title {
		font-size: clamp(32px, calc(29.7241px + 0.5172vw), 38px);
	}

	.elementor .elementor-widget-oyo-hero.oyo-hero--careers {
		padding-top: 118px;
		padding-bottom: 56px;
		background-image:
			linear-gradient(180deg, rgba(0, 2, 4, 0) 0%, rgba(0, 2, 4, 0) 21.63%, rgba(0, 2, 4, 0.1) 54.33%, rgba(0, 2, 4, 1) 100%),
			url(../../../design/careers/hero-careers-m-4e6450.webp);
		background-size: 100% 100%, cover;
		background-position: left top, center;
	}

	.elementor .elementor-widget-oyo-hero.oyo-hero--careers .oyo-hero__title {
		font-size: 32px;
	}

	.elementor .elementor-widget-oyo-hero.oyo-hero--careers .oyo-hero__body {
		font-size: clamp(22px, calc(16px + 0.78125vw), 24px);
	}
}

@media (max-width: 767px) {
	.elementor .elementor-widget-oyo-hero .oyo-hero__inner {
		width: 100%;
	}

	.elementor .elementor-widget-oyo-hero .oyo-hero__title {
		font-size: clamp(16px, 7.2727vw, 32px);
	}

	.elementor .elementor-widget-oyo-hero .oyo-hero__body {
		font-size: clamp(16px, 5vw, 22px);
	}

	.elementor .elementor-widget-oyo-hero.oyo-hero--tech {
		min-height: 508px;
		padding-top: 126px;
		padding-bottom: 80px;
		background-color: var(--oyo-bg);
		background-image: url(../../../design/heroes/hero-tech-m-2109.webp);
		background-size: 168.79% 186.8px;
		background-position: 42.04% top;
	}

	/* #449:2553 states its own gradient, which the desktop plate already
	   carries baked in. Without it this band measured twice the design's
	   brightness at 440. */
	.elementor .elementor-widget-oyo-hero.oyo-hero--tech::before {
		content: "";
		position: absolute;
		inset: 0;
		width: auto;
		height: auto;
		background-image: linear-gradient(180deg, rgba(0, 2, 4, 0.5) 0%, rgba(0, 2, 4, 0.5) 22%, rgba(0, 2, 4, 0.6) 54%, rgba(0, 2, 4, 1) 100%);
		pointer-events: none;
	}

	.elementor .elementor-widget-oyo-hero.oyo-hero--careers {
		min-height: 366px;
		padding-top: 126px;
		padding-bottom: 43px;
		background-image:
			linear-gradient(180deg, rgba(0, 2, 4, 0) 0%, rgba(0, 2, 4, 0) 21.63%, rgba(0, 2, 4, 0.1) 54.33%, rgba(0, 2, 4, 1) 100%),
			url(../../../design/careers/hero-careers-m-4e6450.webp);
		background-size: 100% 100%, cover;
		background-position: left top, center;
	}
}