.t02-s04,
.t02-s04 * {
	box-sizing: border-box;
}

.t02-s04 {
	background: var(--color-white);
	color: #111;
	font-family: var(--type-font-body);
	height: 940px;
	position: relative;
}

.t02-s04__shell {
	background: #f3f1ee;
	border-radius: 4px;
	height: 760px;
	left: 50%;
	overflow: hidden;
	position: absolute;
	top: 90px;
	transform: translateX(-50%);
	width: 1280px;
}

.t02-s04__shell::before {
	background: #c72d27;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 5;
}

.t02-s04__visual {
	background: #e8e5e1;
	height: 760px;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 700px;
}

.t02-s04__visual-eyebrow,
.t02-s04__eyebrow {
	align-items: center;
	color: #9a7543;
	display: flex;
	font-weight: 700;
	margin: 0;
	position: absolute;
	text-transform: uppercase;
}

.t02-s04__visual-eyebrow {
	font-size: 12px;
	gap: 12px;
	left: 38px;
	line-height: 16px;
	top: 32px;
}

.t02-s04__visual-eyebrow span {
	background: #c7a064;
	height: 1px;
	width: 42px;
}

.t02-s04__glow {
	height: 160px;
	left: 90px;
	position: absolute;
	top: 500px;
	width: 520px;
}

.t02-s04__roof {
	height: 557px;
	left: 18px;
	position: absolute;
	top: 95px;
	width: 680px;
}

.t02-roof-system {
	display: block;
	height: 100%;
	overflow: visible;
	position: relative;
	width: 100%;
}

.t02-roof-system__static,
.t02-roof-system__layer-visual,
.t02-roof-system__hit-map {
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.t02-roof-system__static {
	opacity: 1;
}

.t02-roof-system__hit-map {
	overflow: visible;
	pointer-events: none;
	z-index: 2;
}

.t02-roof-system__layer-visual {
	opacity: 0;
	pointer-events: none;
	transform-origin: 50% 50%;
	transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
	z-index: 2;
}

.t02-roof-system__hit-map [data-roof-layer] {
	fill: transparent;
	outline: none;
	pointer-events: visiblePainted;
	stroke: transparent;
	stroke-width: 12px;
}

.t02-s04.is-motion-ready:not(.is-assembled) .t02-roof-system__static {
	opacity: 0;
}

.t02-s04.is-motion-ready:not(.is-assembled) .t02-roof-system__layer-visual {
	animation: t02-roof-assemble 560ms cubic-bezier(.22, .8, .22, 1) both;
	will-change: opacity, transform;
}

.t02-s04.is-motion-ready:not(.is-assembled) .t02-roof-system__layer-visual--roof-framing { animation-delay: 0ms; }
.t02-s04.is-motion-ready:not(.is-assembled) .t02-roof-system__layer-visual--roof-deck { animation-delay: 130ms; }
.t02-s04.is-motion-ready:not(.is-assembled) .t02-roof-system__layer-visual--underlayment { animation-delay: 260ms; }
.t02-s04.is-motion-ready:not(.is-assembled) .t02-roof-system__layer-visual--roof-shingles { animation-delay: 390ms; }
.t02-s04.is-motion-ready:not(.is-assembled) .t02-roof-system__layer-visual--ridge-ventilation { animation-delay: 520ms; }
.t02-s04.is-motion-ready:not(.is-assembled) .t02-roof-system__layer-visual--ridge-cap { animation-delay: 650ms; }

.t02-s04.is-assembled .t02-roof-system__static {
	opacity: 1;
}

.t02-s04.is-assembled .t02-roof-system__layer-visual {
	opacity: 0;
}

.t02-s04.is-assembled .t02-roof-system__layer-visual.is-active {
	filter: brightness(1.1) drop-shadow(0 3px 4px rgba(196, 154, 90, .22));
	opacity: 1;
	transform: none;
}

.t02-roof-system__hit-map [data-roof-layer]:focus-visible {
	fill: rgba(196, 154, 90, .06);
	stroke: #c72d27;
	stroke-width: 2px;
}

@keyframes t02-roof-assemble {
	from {
		opacity: 0;
		filter: drop-shadow(0 8px 10px rgba(26, 20, 12, .12));
		transform: translateY(-14px) scale(.996);
	}
	to {
		opacity: 1;
		filter: drop-shadow(0 3px 5px rgba(26, 20, 12, .08));
		transform: translateY(0) scale(1);
	}
}

.t02-s04__layers {
	list-style: none;
	margin: 0;
	padding: 0;
}

.t02-s04__layer,
.t02-s04__layer-button,
.t02-s04__hotspot {
	position: absolute;
}

.t02-s04__leader-map {
	height: 760px;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 700px;
	z-index: 1;
}

.t02-s04__layer-button {
	align-items: center;
	background: var(--color-white);
	border: 1px solid #cdb78f;
	border-radius: 22px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .09);
	color: #161616;
	cursor: pointer;
	display: flex;
	font: 700 13px/16px "Gilroy", Arial, sans-serif;
	gap: 8px;
	height: 44px;
	justify-content: flex-start;
	margin: 0;
	overflow: hidden;
	padding: 0 7px;
	text-align: left;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
	width: 190px;
	z-index: 3;
}

.t02-s04__layer-button.is-selected,
.t02-s04__layer-button.is-active {
	background: #171717;
	border-color: #171717;
	color: var(--color-white);
}

.t02-s04__layer-button:focus-visible {
	box-shadow: 0 0 0 3px var(--color-white), 0 0 0 6px #c72d27;
	outline: none;
}

.t02-s04__layer-number {
	align-items: center;
	background: #c72d27;
	border-radius: 50%;
	color: var(--color-white);
	display: inline-flex;
	flex: 0 0 26px;
	font-size: 10px;
	height: 26px;
	justify-content: center;
	line-height: 12px;
	width: 26px;
}

.t02-s04__hotspot {
	background: url("../images/residential-roof-layers/layer-hotspot.svg?v=3") center / 16px 16px no-repeat;
	height: 16px;
	transition: box-shadow 160ms ease, transform 160ms ease;
	width: 16px;
	z-index: 2;
}

.t02-s04__layer:has(.t02-s04__layer-button.is-active) .t02-s04__hotspot {
	box-shadow: 0 0 0 4px rgba(199, 45, 39, .16);
	transform: scale(1.08);
}

.t02-s04__layer--1 .t02-s04__layer-button { left: 468px; top: 90px; }
.t02-s04__layer--1 .t02-s04__hotspot { left: 447px; top: 151px; }

.t02-s04__layer--2 .t02-s04__layer-button { left: 26px; top: 183px; }
.t02-s04__layer--2 .t02-s04__hotspot { left: 310px; top: 197px; }

.t02-s04__layer--3 .t02-s04__layer-button { left: 498px; top: 240px; }
.t02-s04__layer--3 .t02-s04__hotspot { left: 402px; top: 254px; }

.t02-s04__layer--4 .t02-s04__layer-button { left: 24px; top: 333px; }
.t02-s04__layer--4 .t02-s04__hotspot { left: 312px; top: 347px; }

.t02-s04__layer--5 .t02-s04__layer-button { left: 485px; top: 534px; }
.t02-s04__layer--5 .t02-s04__hotspot { left: 461px; top: 462px; }

.t02-s04__layer--6 .t02-s04__layer-button { left: 46px; top: 584px; }
.t02-s04__layer--6 .t02-s04__hotspot { left: 382px; top: 542px; }

.t02-s04__copy {
	background: #fcfbf9;
	height: 760px;
	left: 700px;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 580px;
}

.t02-s04__eyebrow {
	font-size: 13px;
	gap: 14px;
	left: 54px;
	line-height: 18px;
	top: 44px;
}

.t02-s04__eyebrow span {
	background: #c7a064;
	height: 1px;
	width: 44px;
}

.t02-s04 h2 {
	font-family: "Roboto Condensed", Arial, sans-serif;
	font-size: var(--section-heading-font-size, 49px);
	font-weight: var(--section-heading-font-weight, 900);
	left: 54px;
	letter-spacing: -.35px;
	line-height: var(--section-heading-line-height, 53px);
	margin: 0;
	position: absolute;
	top: 88px;
	width: 470px;
}

.t02-s04 h2 span {
	display: block;
	height: 54px;
	width: max-content;
}

.t02-s04 h2 span:last-child {
	background: #c72d27;
	color: var(--color-white);
	height: 56px;
	padding: 0 12px;
	width: 390px;
}

.t02-s04__intro,
.t02-s04__body {
	color: #292929;
	font-weight: 400;
	left: 54px;
	margin: 0;
	position: absolute;
	width: 470px;
}

.t02-s04__intro {
	font-size: 16px;
	line-height: 23px;
	top: 230px;
}

.t02-s04__subheading {
	color: #a47c46;
	font-size: 12px;
	font-weight: 700;
	left: 54px;
	line-height: 16px;
	margin: 0;
	position: absolute;
	text-transform: uppercase;
}

.t02-s04__subheading--water { top: 326px; }
.t02-s04__subheading--surface { top: 444px; }

.t02-s04__body {
	color: #3d3d3d;
	font-size: 15px;
	line-height: 22px;
}

.t02-s04__body--water { top: 352px; }
.t02-s04__body--surface { top: 470px; }

.t02-s04__note {
	background: #171717;
	border-left: 4px solid #c72d27;
	border-radius: 6px;
	color: var(--color-white);
	height: 142px;
	left: 54px;
	overflow: hidden;
	padding: 14px 18px 0 14px;
	position: absolute;
	top: 548px;
	width: 470px;
}

.t02-s04__note h3,
.t02-s04__note p {
	margin: 0;
}

.t02-s04__note h3 {
	color: #d7ad70;
	font-size: 11px;
	font-weight: 700;
	line-height: 15px;
	text-transform: uppercase;
}

.t02-s04__note p {
	font-size: 13px;
	font-weight: 400;
	line-height: 18px;
	margin-top: 9px;
}

@media (max-width: 1319px) {
	.t02-s04 {
		height: auto;
		padding: 72px 24px;
	}

	.t02-s04__shell {
		height: auto;
		left: auto;
		margin: 0 auto;
		overflow: visible;
		position: relative;
		top: auto;
		transform: none;
		width: min(700px, 100%);
	}

	.t02-s04__visual,
	.t02-s04__copy {
		left: auto;
		position: relative;
		top: auto;
		width: 100%;
	}

	.t02-s04__copy {
		height: 720px;
	}
}

@media (max-width: 1023px) {
	.t02-s04 {
		padding: 56px 20px;
	}

	.t02-s04__visual {
		height: auto;
		min-height: 620px;
	}

	.t02-s04__visual-eyebrow {
		left: 20px;
		top: 28px;
	}

	.t02-s04__glow {
		display: none;
	}

	.t02-s04__roof {
		aspect-ratio: 680 / 557;
		height: auto;
		left: 0;
		top: 72px;
		width: 100%;
	}

	.t02-s04__layers {
		display: grid;
		gap: 10px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 0 16px 20px;
		position: relative;
		row-gap: 10px;
		top: calc((100vw - 40px) * .819 + 88px);
	}

	.t02-s04__layer {
		position: relative;
	}

	.t02-s04__layer-button {
		font-size: 11px;
		left: auto !important;
		position: relative;
		top: auto !important;
		width: 100%;
	}

	.t02-s04__leader-map,
	.t02-s04__hotspot {
		display: none;
	}

	.t02-s04__copy {
		height: auto;
		min-height: 0;
		overflow: visible;
		padding: 48px 24px 40px;
	}

	.t02-s04__copy .t02-s04__eyebrow,
	.t02-s04__copy h2,
	.t02-s04__intro,
	.t02-s04__subheading,
	.t02-s04__body,
	.t02-s04__note {
		left: auto;
		position: relative;
		top: auto;
		width: 100%;
	}

	.t02-s04__copy h2 {
		font-size: var(--section-heading-font-size, 40px);
		line-height: var(--section-heading-line-height, 44px);
		margin-top: 24px;
	}

	.t02-s04__copy h2 span {
		height: 44px;
	}

	.t02-s04__copy h2 span:last-child {
		height: 48px;
		padding: 0 8px;
		width: max-content;
	}

	.t02-s04__intro {
		margin-top: 32px;
	}

	.t02-s04__subheading {
		margin-top: 26px;
	}

	.t02-s04__body {
		margin-top: 8px;
	}

	.t02-s04__note {
		height: auto;
		margin-top: 32px;
		padding: 16px 18px 18px 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.t02-s04 .t02-roof-system__static {
		opacity: 1;
	}

	.t02-s04 .t02-roof-system__layer-visual {
		animation: none !important;
		transition: none;
	}

	.t02-s04.is-assembled .t02-roof-system__layer-visual.is-active {
		opacity: 1;
		transform: none;
	}

	.t02-s04__layer-button,
	.t02-s04__hotspot {
		transition: none;
	}
}