/**
 * Block 5 - DLS Home: Mid CTA (DLS-142)
 *
 * Rules are the template's own (Homepage.html r61), generated and scoped under
 * `.dls-midcta`. The heading's "hidden until revealed" start state only applies once
 * ss-reveal.js has switched reveal on (html.dls-reveal-on), so the heading is
 * never stuck invisible in the editor, without JS, or under reduced motion.
 */

/* ---- wrapper (the template's shared `.sect` rules) ---- */
.dls-midcta {
	box-sizing: border-box;
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.dls-midcta *, .dls-midcta *::before, .dls-midcta *::after { box-sizing: border-box; }

.dls-midcta {
	padding: 0 var(--pad);
	background: var(--surface-neutral);
}
.dls-midcta .midcta__in {
	position: relative;
	overflow: clip;
	border-radius: var(--r-full);
	background: var(--black);
	padding: var(--s-xxl) var(--s-xl);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 32px;
	min-height: 264px;
	isolation: isolate;
}
.dls-midcta .midcta__base {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 1440px;
	height: 321px;
	background: #32126E;
	z-index: 0;
}
.dls-midcta .midcta__glow {
	position: absolute;
	left: -373px;
	top: -81px;
	width: 2104px;
	height: 2167px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.dls-midcta .midcta__glow i {
	width: 1477px;
	height: 1650px;
	border-radius: 50%;
	background: rgba(244,90,40,.1);
	filter: blur(80px);
	transform: rotate(30deg);
	transition: transform .3s cubic-bezier(0,0,.58,1);
}
.dls-midcta .midcta__mol {
	position: absolute;
	left: 302px;
	top: 121px;
	width: 792px;
	height: 701px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.dls-midcta .midcta__mol i {
	width: 674px;
	height: 545px;
	transform: rotate(15deg);
	display: block;
	transition: transform .3s cubic-bezier(0,0,.58,1);
}
.dls-midcta .midcta__mol path {
	transition: fill .3s cubic-bezier(0,0,.58,1), fill-opacity .3s cubic-bezier(0,0,.58,1);
}
.dls-midcta .midcta__in:hover .midcta__glow i {
	transform: translate(115px,-58px) rotate(30deg) scale(1.2256);
}
.dls-midcta .midcta__in:hover .midcta__mol i {
	transform: translate(30px,-42px) rotate(15deg) scale(1.0953);
}
.dls-midcta .midcta__in:hover .midcta__mol path {
	fill: #f45a28;
	fill-opacity: .06;
}
.dls-midcta .midcta__mol svg {
	width: 100%;
	height: 100%;
}
.dls-midcta .midcta__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
	width: 960px;
	max-width: 100%;
	text-align: center;
}
.dls-midcta .midcta__h2 {
	color: var(--white);
	font-size: var(--fs-xxxl);
	line-height: var(--lh-xxxl);
}
.dls-midcta .midcta__h2 b {
	font-weight: 700;
}
html.dls-reveal-on .dls-midcta .midcta__h2 {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .52s cubic-bezier(.23,1,.32,1) .15s, transform .52s cubic-bezier(.23,1,.32,1) .15s;
}
html.dls-reveal-on .dls-midcta .midcta__last {
	display: inline-block;
	opacity: 0;
	transform: translateY(14px) scale(.985);
	filter: blur(10px);
	transition: opacity .62s cubic-bezier(.23,1,.32,1) .43s, transform .62s cubic-bezier(.23,1,.32,1) .43s,
             filter .62s cubic-bezier(.23,1,.32,1) .43s;
}
.dls-midcta .midcta__in.in .midcta__h2 {
	opacity: 1;
	transform: none;
}
.dls-midcta .midcta__in.in .midcta__last {
	opacity: 1;
	transform: none;
	filter: blur(0);
}

@media (prefers-reduced-motion:reduce) {
	.dls-midcta .midcta__h2,
	.dls-midcta .midcta__last {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
}

@media (max-width:1679px) {
	.dls-midcta .midcta__base {
		width: 100%;
	}
}

@media (max-width:900px) {
	.dls-midcta {
		padding: 0 var(--pad);
	}
	.dls-midcta .midcta__inner {
		gap: 24px;
	}
}

.dls-midcta {
	padding-block: var(--s-xxl);
	background: radial-gradient(72.4% 289px at 43.5% 424px,
      var(--surface-neutral) 0 calc(100% - 1px), transparent 100%),
    var(--white);
}

@media (max-width:900px) {
	.dls-midcta {
		padding-block: var(--s-xl);
		background: radial-gradient(86% 220px at 43.5% 310px,
	        var(--surface-neutral) 0 calc(100% - 1px), transparent 100%),
	      var(--white);
	}
}

/* template r58: tablet (561-900px) section padding 30 -> 48 */
@media (min-width: 561px) and (max-width: 900px) {
	.dls-midcta {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

/* template: the shared `.sect` rule comes after `.midcta{padding:0 var(--pad)}`, so the
   centred 1440 content cap wins on wide screens (equal to --pad at 900px and below) */
.dls-midcta {
	padding-inline: max(var(--pad), calc((100% - var(--content)) / 2));
}

/* heading is one rich field now: bold comes from <strong>; the last word is wrapped in .midcta__last (the entrance animation) */
.dls-midcta .midcta__h2 strong { font-weight: 700; }
.dls-midcta .midcta__h2 a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color .25s var(--ease); }
.dls-midcta .midcta__h2 a:hover { color: var(--orange); }