/* ==========================================================================
   The closing call to action band.

   Everything this section needs to look right, keyed on the class Elementor
   puts on the widget itself. Nothing here names a page or an element id, so
   the band can be dropped into any document and arrive dressed.

   What is deliberately NOT here, because it is shared rather than this
   section's own:

     - the -23px / -30px overlap with the footer, which a page's closing band
       opts into through `oyo-band` on its container. Home's contact section
       uses the same rule.
     - the 60 / 40 / 32 gap ladder, which eleven sections share, also through
       `oyo-band`.
     - the pill's gradient, stroke, blur and hover, shared by six buttons and
       matched here through `oyo-cta__btn`.

   Figma: #314:891 with the #314:892 overlay, and #314:1354 / #314:1355 for the
   products page. Both are tints; the Earth and the starfield come from the
   page backdrop behind them.
   ========================================================================== */

.elementor .elementor-widget-oyo-cta {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* The band bleeds to the viewport edge while its content stays in the
	   1400 column, which a container padding cannot do both of. So the
	   container opts out with `oyo-bleed` and the gutter is taken here,
	   the same arrangement the industry hero already uses. */
	padding: 100px max(var(--oyo-gutter), (100% - var(--oyo-content)) / 2) 150px;
	/* 633:1770 and 633:1445 are the same four visible fills, bottom first:
	   069ea631 at 0.30, 14ef5f3d, 0375cde9, then one gradient. The two crops
	   this already shipped are the right windows - bg-cta-41b588 is 0375cde9's
	   and bg-cf-b-18419d is 069ea631's, both landing across the whole band -
	   so what changed on 14/10 is the glass over them, not the pictures.

	   Three corrections. The 0.84-to-transparent layer on top came from
	   #314:892, an overlay frame the new file does not have, and it is out.
	   069ea631's own 0.30 was never painted, which is why this band read
	   brighter than the design; it is the 0.70 scrim below, sized to the image
	   the way every other starfield in this project states it. And 14ef5f3d
	   is not a full-band stretch: sy 1.358643 ty -0.678675 renders the plate
	   at 1 / sy = 73.603% of the band, opening -ty / (sy - 1) = 189.241% down
	   it, which is the lower horizon rather than a second full-height copy. */
	background-image:
		linear-gradient(180deg, rgba(0, 2, 4, 0.84) 0%, rgba(0, 2, 4, 0.42) 100%),
		url(../../../design/home/bg-cta-41b588.webp),
		url(../../../design/home/bg-cf-a-64a538.webp),
		linear-gradient(rgba(0, 2, 4, 0.7), rgba(0, 2, 4, 0.7)),
		url(../../../design/home/bg-cf-b-18419d.webp);
	background-size: 100% 100%, 100% 100%, 100% 73.603%, 100% 100%, 100% 100%;
	background-position: center top, center top, center 189.241%, center top, center top;
	background-repeat: no-repeat;
}

/* Tech and security states the same gradient at full opacity where products
   has it at 0.84: 633:1770 carries no layer opacity, 633:1445 carries 0.84.
   One value, and it is the one that makes this band's first rows read as the
   page colour rather than as a tint over the starfield.

   Desktop only. The two pages agree again at 440 - 633:2617 and 633:2559 both
   carry the gradient at full opacity - so the tier below states it once, for
   both, and this would only overwrite that stack's images with the desktop
   crops while leaving it the mobile sizing. */
@media (min-width: 1025px) {
	.elementor .elementor-element-oytsctasec .elementor-widget-oyo-cta {
		background-image:
			linear-gradient(180deg, rgba(0, 2, 4, 1) 0%, rgba(0, 2, 4, 0.5) 100%),
			url(../../../design/home/bg-cta-41b588.webp),
			url(../../../design/home/bg-cf-a-64a538.webp),
			linear-gradient(rgba(0, 2, 4, 0.7), rgba(0, 2, 4, 0.7)),
			url(../../../design/home/bg-cf-b-18419d.webp);
	}
}

.elementor .oyo-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

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

/* #314:896 - the same pill the contact form's submit wears. The surface and
   the stroke are this section's own; the transition and the hover colour are
   shared with five other buttons and stay in the shared sheet, matched through
   this same class. */
.elementor .oyo-cta__btn .elementor-button {
	font-family: Arimo, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2em;
	fill: #ffffff;
	color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 20px;
	padding: 16px 24px;
	background-image: linear-gradient(90deg, #000204 0%, #040694 100%);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

@media (max-width: 1024px) {
	/* ------------------------------------------------------------------
	   The band's artwork below the desktop tier.

	   Same five layers as above, two gradients over three crops, but two of
	   the three windows move and one gradient rescales, so the whole stack is
	   restated rather than resized.

	   #392:5674's fills, bottom first, with the band 410 tall:

	     069ea631  sy .39063 ty .31624 - the desktop window's own height at a
	                different offset, so source rows 632..1414 rather than
	                0..781. It lands across the whole band.
	     14ef5f3d  sy 1.35864 ty -.67867 - the window opens above the plate, so
	                the plate renders at 1/sy = 73.603% of the band and its own
	                top row falls at .67867/1.35864 = 49.952% down it. Both are
	                fractions of the band, so the placement holds at any
	                height; bg-cf-a is already the whole 1400x512 plate.
	     0375cde9  FILL, so cover, but cover of the whole photograph rather
	                than of the desktop window bg-cta-41b588 carries.

	   The 14/10 frames settle the glass the same way the desktop tier does.
	   633:2559 on products and 633:2617 on tech are the same band and they
	   agree: four visible fills, and the one gradient runs 1.0 to 0.5 on both.
	   So the #392:5675 overlay that used to sit on top is gone here as well,
	   and the two pages do not split at this tier the way they do at desktop.
	   069ea631's 0.30 is the 0.70 scrim, since bg-ctab-m is the raw crop.
	   ------------------------------------------------------------------ */
	.elementor .elementor-widget-oyo-cta {
		padding: 80px max(var(--oyo-gutter), (100% - var(--oyo-content)) / 2) 110px;
		background-image:
			linear-gradient(180deg, rgba(0, 2, 4, 1) 0%, rgba(0, 2, 4, 0.5) 100%),
			url(../../../design/home/bg-cta-m-9e433e.webp),
			url(../../../design/home/bg-cf-a-64a538.webp),
			linear-gradient(rgba(0, 2, 4, 0.7), rgba(0, 2, 4, 0.7)),
			url(../../../design/home/bg-ctab-m-d4d049.webp);
		background-size: 100% 100%, cover, 100% 73.603%, 100% 100%, 100% 100%;
		background-position: center top, center, center 189.241%, center top, center top;
	}

	.elementor .oyo-cta__title {
		font-size: 38px;
	}
}

@media (max-width: 767px) {
	.elementor .elementor-widget-oyo-cta {
		padding: 60px max(var(--oyo-gutter), (100% - var(--oyo-content)) / 2) 150px;
	}

	.elementor .oyo-cta__title {
		font-size: clamp(16px, 8.1818vw, 36px);
	}

	/* 633:2562 is "REQUEST \nEARLY ACCESS" - the break is typed, not a wrap,
	   where the desktop node 633:1773 is one line. At 440 the heading fits
	   "REQUEST EARLY" on its first line and breaks before ACCESS, which is two
	   lines of the right height but not the design's two lines. The coloured
	   half is already its own span, so it takes the second line. */
	.elementor .oyo-cta__title span {
		display: block;
	}

	.elementor .oyo-cta__btn .elementor-button {
		font-size: clamp(16px, 4.5455vw, 20px);
	}
}

/* --------------------------------------------------------------------------
   The compact variant, which is what the industry single template carries.

   Four values differ there and they are kept rather than levelled: the band
   opens 100px below 768 instead of 60, and the type stops scaling with the
   viewport. Whether that is intended or drift in the design has not been
   settled, so this preserves what the page renders today and the question is
   logged rather than answered by a silent change.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.elementor .oyo-cta--compact .oyo-cta__btn .elementor-button {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.elementor .elementor-widget-oyo-cta.oyo-cta--compact {
		padding-top: 100px;
	}

	.elementor .oyo-cta--compact .oyo-cta__title {
		font-size: 30px;
	}

	.elementor .oyo-cta--compact .oyo-cta__btn .elementor-button {
		font-size: 16px;
	}
}