/**
 * Block 6 - DLS Home: Business Areas (DLS-142)
 *
 * Rules are the template's own (Homepage.html r61), generated and scoped under
 * `.dls-areas`. Pure CSS (sticky head, hover card, logo swap); no script.
 * Note: `.dls-areas` uses overflow:clip (not hidden) so the left column can stay sticky.
 */

.dls-areas {
	box-sizing: border-box;
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.dls-areas *, .dls-areas *::before, .dls-areas *::after { box-sizing: border-box; }


.dls-areas .areaquote {
	background: var(--purple-soft);
	border-radius: var(--r-mid);
	padding: var(--s-md) var(--s-lg);
	display: flex;
	flex-direction: column;
	gap: var(--s-xs);
}
.dls-areas .areaquote__txt {
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	color: var(--black);
	font-weight: 500;
}
.dls-areas .areaquote__by {
	font-size: var(--fs-xxs);
	line-height: var(--lh-xxs);
	color: var(--dark);
}
.dls-areas {
	background: var(--surface-neutral);
	padding: var(--s-4xl) var(--pad);
	position: relative;
	overflow: clip;
}
.dls-areas .areas__blob1 {
	position: absolute;
	right: -180px;
	bottom: 120px;
	width: 821px;
	height: 821px;
	border-radius: 50%;
	background: radial-gradient(circle,rgba(255,235,228,.9) 0%,rgba(247,249,251,0) 70%);
	pointer-events: none;
}
.dls-areas .areas__blob2 {
	position: absolute;
	left: 35%;
	bottom: -500px;
	width: 940px;
	height: 940px;
	border-radius: 50%;
	background: radial-gradient(circle,rgba(233,227,244,.85) 0%,rgba(247,249,251,0) 70%);
	pointer-events: none;
}
.dls-areas .areas__grid {
	position: relative;
	display: flex;
	gap: 64px;
	align-items: flex-start;
	max-width: 1440px;
	margin: 0 auto;
}
.dls-areas .areas__head {
	width: 480px;
	flex: none;
	position: sticky;
	top: 64px;
	display: flex;
	flex-direction: column;
	gap: var(--s-xl);
}
.dls-areas .areas__h2 {
	font-size: var(--fs-xxxl);
	line-height: var(--lh-xxxl);
	color: var(--heading-2);
	padding-top: 45px;
}
.dls-areas .areas__h2 b {
	font-weight: 700;
}
.dls-areas .areas__lead {
	font-size: var(--fs-md);
	line-height: var(--lh-md);
	color: var(--para);
}
.dls-areas .areas__photo {
	width: 100%;
	height: 389px;
	border-radius: var(--r-mid);
	overflow: clip;
	margin-top: 30px;
}
.dls-areas .areas__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.dls-areas .areas__list {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-top: 35px;
}
.dls-areas .area {
	padding: var(--s-xl);
	display: flex;
	flex-direction: column;
	gap: var(--s-md);
	position: relative;
	border: 1px solid transparent;
	border-radius: var(--r-full);
	background: transparent;
}
.dls-areas .area::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -20px;
	height: 1px;
	background: var(--border);
	transition: opacity .2s var(--ease);
}
.dls-areas .area:first-child::before {
	top: 0;
}
.dls-areas .area--interactive {
	transition: background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.dls-areas .area--interactive:hover {
	background: var(--white)
  radial-gradient(120% 130% at 100% 100%, rgba(239,114,48,.07), transparent 60%);
	border-color: var(--border);
	box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.dls-areas .area--interactive::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--border);
	transition: opacity .2s var(--ease);
}
.dls-areas .area--interactive + .area::before {
	content: none;
}
.dls-areas .area--interactive:hover::before,
.dls-areas .area--interactive:hover::after {
	opacity: 0;
}
.dls-areas .areaquote {
	margin-top: 12px;
}
.dls-areas .area__hd {
	display: flex;
	align-items: flex-end;
	gap: var(--s-md);
}
.dls-areas .area__ico {
	width: 48px;
	height: 48px;
	flex: none;
}
.dls-areas .area__ico svg {
	width: 100%;
	height: 100%;
}
.dls-areas .area__logo {
	width: 140px;
	height: 55px;
	flex: none;
	object-fit: contain;
}
.dls-areas .area__logowrap {
	position: relative;
	width: 140px;
	height: 55px;
	flex: none;
}
.dls-areas .area__logowrap .area__logo {
	position: absolute;
	inset: 0;
}
.dls-areas .area__logo--h {
	opacity: 0;
	transition: opacity .25s var(--ease);
}
.dls-areas .area--interactive:hover .area__logo--d {
	transition: opacity .25s var(--ease);
	opacity: 0;
}
.dls-areas .area--interactive:hover .area__logo--h {
	opacity: 1;
}
.dls-areas .area__name {
	font-size: var(--fs-xxl);
	line-height: var(--lh-xxl);
	font-weight: 400;
	color: var(--heading-2);
	transition: color .25s var(--ease);
}
.dls-areas .area--interactive:hover .area__name {
	color: var(--discovery-purple);
}
.dls-areas .area__body {
	font-size: var(--fs-md);
	line-height: var(--lh-md);
	color: var(--para);
}

@media (max-width:1500px) {
	.dls-areas .areas__grid {
		gap: 44px;
	}
	.dls-areas .areas__head {
		width: 400px;
	}
}

@media (max-width:1024px) {
	.dls-areas .areas__grid {
		flex-direction: column;
	}
	.dls-areas .areas__head {
		width: 100%;
		position: static;
		flex-direction: row;
		align-items: flex-start;
		gap: var(--s-xl);
		flex-wrap: wrap;
	}
	.dls-areas .areas__h2 {
		padding-top: 0;
		flex: 1 1 320px;
	}
	.dls-areas .areas__lead {
		flex: 1 1 320px;
	}
	.dls-areas .areas__photo {
		margin-top: 0;
		height: 280px;
	}
}

@media (max-width:900px) {
	.dls-areas .areas__grid {
		gap: 28px;
	}
	.dls-areas .area {
		padding: var(--s-md) 0;
	}
	.dls-areas .area--interactive {
		padding: var(--s-xl);
		background: var(--white)
	    radial-gradient(120% 130% at 100% 100%, rgba(239,114,48,.05), transparent 60%);
		border-color: var(--border);
		border-radius: var(--r-full);
		box-shadow: 0 10px 30px rgba(0,0,0,.15);
	}
	.dls-areas .area--interactive::before,
	.dls-areas .area--interactive::after {
		content: none;
	}
	.dls-areas .area--interactive + .area::before {
		content: "";
	}
	.dls-areas .area--interactive .area__hd {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-md);
	}
	.dls-areas .area--interactive .area__logo--d {
		opacity: 0;
	}
	.dls-areas .area--interactive .area__logo--h {
		opacity: 1;
	}
}

.dls-areas {
	padding-block: var(--s-xxl);
}

@media (max-width:900px) {
	.dls-areas {
		padding-block: var(--s-xl);
	}
}

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

/* heading is one rich field now: bold comes from <strong> */
.dls-areas .areas__h2 strong { font-weight: 700; }
.dls-areas .areas__h2 a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color .25s var(--ease); }
.dls-areas .areas__h2 a:hover { color: var(--orange); }

/* Rich-text fields (lead, area text, quote, attribution): editors may add paragraphs, bold, italic, links */
.dls-areas .areas__lead p,
.dls-areas .area__body p,
.dls-areas .areaquote__txt p,
.dls-areas .areaquote__by p {
	margin: 0;
	font: inherit;
	color: inherit;
}
.dls-areas .areas__lead p + p,
.dls-areas .area__body p + p {
	margin-top: 0.75em;
}
.dls-areas .areaquote__txt p + p,
.dls-areas .areaquote__by p + p {
	margin-top: 0.5em;
}
.dls-areas .areas__lead strong, .dls-areas .areas__lead b,
.dls-areas .area__body strong, .dls-areas .area__body b,
.dls-areas .areaquote__txt strong, .dls-areas .areaquote__txt b,
.dls-areas .areaquote__by strong, .dls-areas .areaquote__by b {
	font-weight: 700;
}
.dls-areas .areas__lead a,
.dls-areas .area__body a,
.dls-areas .areaquote__txt a,
.dls-areas .areaquote__by a {
	color: inherit;
	text-decoration: underline;
}
.dls-areas .areas__lead a:hover,
.dls-areas .area__body a:hover,
.dls-areas .areaquote__txt a:hover,
.dls-areas .areaquote__by a:hover {
	color: var(--orange);
}