.desantis-residential-roofing {
	--residential-hero-height: 940px;
	--residential-header-height: 190px;
	--residential-shell-width: 1280px;
}

@media (min-width: 1320px) {
	.desantis-residential-roofing .site-shell {
		width: var(--residential-shell-width);
		max-width: none;
		margin-inline: calc((100vw - var(--residential-shell-width)) / 2);
	}
}

.desantis-residential-roofing .site-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: transparent;
	border-bottom: 0;
}

.desantis-residential-roofing .utility-bar {
	height: 46px;
	background: #090909;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: geometricPrecision;
}

.desantis-residential-roofing .utility-bar__hours {
	font-family: var(--type-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 21px;
}

.desantis-residential-roofing .utility-bar__offices {
	display: grid;
	grid-template-columns: 272px 348px;
	width: 620px;
	margin-left: auto;
}

.desantis-residential-roofing .office-phone {
	display: flex;
	align-items: center;
	gap: 32px;
	min-width: 0;
	height: 28px;
	margin-block: 9px;
	padding: 0;
	border-left: 0;
}

.desantis-residential-roofing .office-phone + .office-phone {
	padding-left: 32px;
	border-left: 1px solid #404040;
}

.desantis-residential-roofing .office-phone span {
	grid-column: auto;
	color: var(--color-sand);
	font-family: var(--type-font-body);
	font-size: 0;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.desantis-residential-roofing .office-phone span::after {
	font-size: 18px;
}

.desantis-residential-roofing .office-phone:first-child span::after {
	content: "Apopka";
}

.desantis-residential-roofing .office-phone:last-child span::after {
	content: "Winter Garden";
}

.desantis-residential-roofing .office-phone:first-child span {
	flex: 0 0 71px;
}

.desantis-residential-roofing .office-phone:first-child strong {
	flex: 0 0 137px;
}

.desantis-residential-roofing .office-phone:last-child span {
	flex: 0 0 141px;
}

.desantis-residential-roofing .office-phone:last-child strong {
	flex: 0 0 142px;
}

.desantis-residential-roofing .office-phone span {
	transform: translateY(3px);
}

.desantis-residential-roofing .office-phone strong {
	transform: translateY(1px);
}

.desantis-residential-roofing .office-phone strong {
	color: var(--color-white);
	font-family: var(--type-font-body);
	font-size: 22px;
	font-weight: 700;
	line-height: 26px;
	white-space: nowrap;
}

.desantis-residential-roofing .primary-bar {
	height: 144px;
	background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, 0) 100%);
}

.desantis-residential-roofing .primary-bar__inner {
	height: 144px;
	min-height: 144px;
}

.desantis-residential-roofing .site-brand {
	width: 273px;
}

.desantis-residential-roofing .site-navigation {
	gap: 60px;
}

.desantis-residential-roofing .primary-menu {
	gap: 11.79px;
	width: 645px;
}

.desantis-residential-roofing .primary-menu > .menu-item:nth-child(1) {
	flex: 0 0 117.916px;
}

.desantis-residential-roofing .primary-menu > .menu-item:nth-child(2) {
	flex: 0 0 179.232px;
}

.desantis-residential-roofing .primary-menu > .menu-item:nth-child(3) {
	flex: 0 0 91.974px;
}

.desantis-residential-roofing .primary-menu > .menu-item:nth-child(4) {
	flex: 0 0 137.962px;
}

.desantis-residential-roofing .primary-menu > .menu-item:nth-child(5) {
	flex: 0 0 70.75px;
}

.desantis-residential-roofing .primary-menu > .menu-item:last-child {
	display: none;
}

.desantis-residential-roofing .primary-menu > .menu-item > a,
.desantis-residential-roofing .primary-menu > .menu-item > .menu-trigger {
	padding-inline: 0;
	font-family: var(--type-font-body);
	font-size: 21px;
	font-weight: 700;
	line-height: 25px;
}

.desantis-residential-roofing .primary-menu > .menu-item > .menu-trigger::after {
	content: "▾";
	width: auto;
	height: auto;
	margin-left: 8px;
	border: 0;
	color: var(--color-white);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	transform: none;
}

.desantis-residential-roofing .primary-menu > .menu-item > .menu-trigger[aria-expanded="true"]::after {
	transform: none;
}

.desantis-residential-roofing .menu-item--about .menu-trigger::after {
	display: none;
}

.desantis-residential-roofing .button--header {
	width: 257px;
	height: 72px;
	min-height: 72px;
	padding: 0 28px;
	border-radius: var(--button-border-radius, 10px);
	font-family: var(--type-font-body);
	font-size: var(--button-font-size, 20px);
	font-weight: var(--button-font-weight, 700);
	line-height: var(--button-line-height, 20px);
	transform: translateY(3px);
}

.residential-roofing-page {
	min-height: var(--residential-hero-height);
}

.residential-hero {
	position: relative;
	min-height: var(--residential-hero-height);
	overflow: hidden;
	background: var(--color-white);
	color: var(--color-white);
}

.residential-hero__media {
	position: absolute;
	top: -27px;
	left: 50%;
	width: 2000px;
	height: 894px;
	transform: translateX(-50%);
}

.residential-hero__media picture,
.residential-hero__media img,
.residential-hero__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.residential-hero__media img,
.residential-hero__media video {
	object-fit: cover;
	object-position: center center;
}

.residential-hero__shade {
	position: absolute;
	top: 6px;
	left: 50%;
	width: 2000px;
	height: 860px;
	transform: translateX(-50%);
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(41, 44, 49, 0) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(41, 44, 49, 0) 100%),
		linear-gradient(0deg, rgba(0, 0, 0, .32) 0%, rgba(41, 44, 49, 0) 100%);
}

.residential-hero__layout {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 860px) 355px;
	column-gap: 50px;
	min-height: var(--residential-hero-height);
	padding-top: 237px;
}

.residential-hero__content {
	width: 860px;
}

.residential-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 14px;
	color: var(--color-sand);
	font-family: var(--type-font-body);
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
}

.residential-hero__eyebrow::before {
	content: "";
	display: block;
	width: 50px;
	height: 1px;
	background: currentColor;
}

.residential-hero__title {
	margin: 0;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-size: 54px;
	font-weight: 900;
	line-height: 67px;
	letter-spacing: 0;
	text-transform: none;
}

.residential-hero__title > span {
	display: block;
	width: max-content;
	max-width: 100%;
	padding-left: 6px;
}

.residential-hero__title > .residential-hero__title-highlight {
	position: relative;
	isolation: isolate;
	width: 649px;
	padding-right: 10px;
}

.residential-hero__title-highlight::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 2px 0 2px;
	background: url("../images/heading-highlight.svg") center / 100% 100% no-repeat;
}

.residential-hero__description {
	width: 491px;
	margin: 17px 0 0;
	font-family: var(--type-font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
}

.residential-hero__trust-list {
	display: grid;
	gap: 8px;
	width: max-content;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.residential-hero__trust-list li {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 24px;
	padding-left: 36px;
	font-family: var(--type-font-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 20px;
}

.residential-hero__trust-list li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	background: url("../images/trust-check.svg") center / contain no-repeat;
}

.residential-hero__actions {
	display: flex;
	align-items: center;
	gap: 40px;
	margin-top: 26px;
}

.residential-hero__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 249px;
	min-height: 76px;
	padding: 12px 24px;
	border-radius: var(--button-border-radius, 10px);
	background: var(--button-background, linear-gradient(81.134deg, #f8d7a7 0%, #e3c08c 51.086%, #cfaa73 99.374%));
	color: var(--button-color, #000);
	font-family: var(--type-font-body);
	font-size: var(--button-font-size, 24px);
	font-weight: var(--button-font-weight, 900);
	line-height: var(--button-line-height, 29px);
	letter-spacing: -.02em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.residential-hero__cta:hover,
.residential-hero__cta:focus-visible {
	filter: brightness(1.05);
	transform: translateY(-1px);
}

.residential-hero__phones {
	display: grid;
	gap: 6px;
	align-self: flex-start;
	margin-top: 11px;
}

.residential-hero__phones a {
	display: grid;
	grid-template-columns: 25px 162px auto;
	align-items: center;
	column-gap: 13px;
	min-height: 30px;
	color: var(--color-white);
	text-decoration: none;
}

.residential-hero__phones a:nth-child(2) {
	grid-template-columns: 25px 164px auto;
	transform: translateX(-2px);
}

.residential-hero__phones img {
	align-self: start;
	width: 25px;
	height: 23px;
	margin-top: 3px;
}

.residential-hero__phones strong {
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-size: 26px;
	font-weight: 900;
	line-height: 30px;
}

.residential-hero__phones span {
	color: rgba(255, 255, 255, .8);
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	transform: translateY(3px);
	text-transform: uppercase;
	white-space: nowrap;
}

.residential-hero__form-slot {
	grid-column: 2;
	align-self: start;
	width: 355px;
	height: 420px;
	min-height: 420px;
	margin-top: 48px;
	visibility: visible;
}

.residential-lead-form,
.residential-lead-form * {
	box-sizing: border-box;
}

.residential-lead-form .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.residential-lead-form {
	position: relative;
	width: 355px;
	height: 420px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 12px;
	background: var(--color-white);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
	color: #262626;
	font-family: var(--type-font-body);
}

.residential-lead-form__header {
	position: absolute;
	top: 0;
	left: 0;
	width: 355px;
	height: 76px;
	background: var(--color-brand-red);
	color: var(--color-white);
}

.residential-lead-form__title,
.residential-lead-form__intro,
.residential-lead-form__progress,
.residential-lead-form__reassurance {
	margin: 0;
}

.residential-lead-form__title {
	position: absolute;
	top: 14px;
	left: 24px;
	width: 250px;
	height: 28px;
	font-family: var(--type-font-body);
	font-size: 23px;
	font-weight: 700;
	line-height: 1.1;
	outline: 0;
}

.residential-lead-form__intro {
	position: absolute;
	top: 48px;
	left: 24px;
	width: 250px;
	color: rgba(255, 255, 255, .82);
	font-size: 12px;
	font-weight: 400;
	line-height: 14px;
}

.residential-lead-form.is-contact-step .residential-lead-form__title {
	font-size: 21px;
}

.residential-lead-form__progress {
	position: absolute;
	top: 18px;
	left: 285px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 20px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 12px;
	background: rgba(255, 255, 255, .14);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.residential-lead-form__step {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.residential-lead-form__step[hidden] {
	display: none;
}

.residential-lead-form__label {
	position: absolute;
	left: 24px;
	width: 307px;
	font-size: 14px;
	font-weight: 600;
	line-height: 17px;
}

.residential-lead-form__label--service {
	top: 96px;
}

.residential-lead-form__label--message {
	top: 186px;
}

.residential-lead-form__select-wrap {
	position: absolute;
	top: 118px;
	left: 24px;
	width: 307px;
	height: 48px;
}

.residential-lead-form__select-wrap::after {
	content: "▾";
	position: absolute;
	top: 11px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 20px;
	color: #404040;
	font-size: 16px;
	font-weight: 700;
	pointer-events: none;
}

.residential-lead-form select,
.residential-lead-form textarea,
.residential-lead-form input {
	width: 100%;
	border: 1px solid #d7d2ce;
	border-radius: 6px;
	background: var(--color-white);
	color: #333;
	font-family: var(--type-font-body);
	font-weight: 400;
	outline: 0;
}

.residential-lead-form select {
	height: 48px;
	padding: 0 42px 0 13px;
	appearance: none;
	font-size: 14px;
}

.residential-lead-form textarea {
	position: absolute;
	top: 208px;
	left: 24px;
	width: 307px;
	height: 76px;
	padding: 21px 13px 13px;
	resize: none;
	background: #fafafa;
	font-size: 13px;
	line-height: 1.3;
}

.residential-lead-form textarea::placeholder {
	color: #77716e;
	opacity: 1;
}

.residential-lead-form select:focus-visible,
.residential-lead-form textarea:focus-visible,
.residential-lead-form input:focus-visible {
	border-color: #8d211d;
	box-shadow: 0 0 0 3px rgba(180, 45, 39, .16);
}

.residential-lead-form__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 52px;
	padding: 0;
	border: 1px solid #2b241c;
	border-radius: var(--button-border-radius, 6px);
	background: var(--button-background, #e8c184);
	color: var(--button-color, #1e1e1e);
	font-family: var(--type-font-body);
	font-size: var(--button-font-size, 16px);
	font-weight: var(--button-font-weight, 700);
	line-height: var(--button-line-height, 1);
	text-transform: uppercase;
	cursor: pointer;
}

.residential-lead-form__button:hover,
.residential-lead-form__button:focus-visible {
	background: var(--button-background, #f0ce98);
}

.residential-lead-form__button--continue {
	position: absolute;
	top: 306px;
	left: 24px;
	width: 307px;
}

.residential-lead-form__reassurance {
	position: absolute;
	top: 385px;
	left: 24px;
	width: 307px;
	color: #77716e;
	font-size: 12px;
	font-weight: 400;
	line-height: 14px;
	text-align: center;
	white-space: nowrap;
}

.residential-lead-form__contact-grid {
	position: absolute;
	top: 92px;
	left: 24px;
	display: grid;
	grid-template-columns: 147px 148px;
	gap: 12px;
	width: 307px;
}

.residential-lead-form__contact-grid label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	line-height: 15px;
}

.residential-lead-form__contact-grid input {
	height: 42px;
	margin-top: 4px;
	padding: 0 11px;
	font-size: 14px;
}

.residential-lead-form__contact-grid .residential-lead-form__wide {
	grid-column: 1 / -1;
}

.residential-lead-form__optional {
	float: right;
	color: #77716e;
	font-size: 10px;
	font-weight: 400;
}

.residential-lead-form__final-actions {
	position: absolute;
	top: 344px;
	left: 24px;
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 8px;
	width: 307px;
}

.residential-lead-form__back {
	height: 52px;
	padding: 0;
	border: 1px solid #d7d2ce;
	border-radius: 6px;
	background: var(--color-white);
	color: #404040;
	font-family: var(--type-font-body);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.residential-lead-form__button--submit {
	width: 237px;
	font-size: var(--button-font-size, 13px);
}

.residential-lead-form__honeypot,
.residential-lead-form__noscript {
	position: absolute;
	left: -9999px;
}

@media (max-width: 1100px) {
	.desantis-residential-roofing .site-header {
		position: relative;
		background: #1b1b1b;
	}

	.residential-hero__layout {
		display: block;
		min-height: 680px;
		padding: 120px 20px 80px;
	}

	.residential-hero__content {
		width: min(100%, 760px);
	}
}

@media (max-width: 1023px) {
	/*
	 * Keep the page-specific desktop header measurements from overriding the
	 * global compact header. The previous 620px office grid widened the entire
	 * document on mobile, while the fixed chat/quote launchers stayed in-bounds.
	 */
	.desantis-residential-roofing .utility-bar__offices {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		width: 100%;
		margin-left: 0;
	}

	.desantis-residential-roofing .office-phone,
	.desantis-residential-roofing .office-phone + .office-phone {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 0;
		height: 44px;
		margin: 0;
		padding: 6px 16px 5px;
	}

	.desantis-residential-roofing .office-phone + .office-phone {
		border-left: 1px solid #343434;
	}

	.desantis-residential-roofing .office-phone span,
	.desantis-residential-roofing .office-phone:first-child span,
	.desantis-residential-roofing .office-phone:last-child span,
	.desantis-residential-roofing .office-phone strong,
	.desantis-residential-roofing .office-phone:first-child strong,
	.desantis-residential-roofing .office-phone:last-child strong {
		flex: 0 1 auto;
		max-width: 100%;
		transform: none;
	}

	.desantis-residential-roofing .office-phone span {
		display: block;
		font-size: 9px;
		line-height: 11px;
		letter-spacing: .63px;
	}

	.desantis-residential-roofing .office-phone:first-child span::after,
	.desantis-residential-roofing .office-phone:last-child span::after {
		content: none;
	}

	.desantis-residential-roofing .office-phone strong {
		overflow: hidden;
		font-size: 13px;
		line-height: 16px;
		text-overflow: ellipsis;
	}

	.residential-hero__trust-list {
		width: 100%;
		max-width: 100%;
	}

	.residential-hero__trust-list li {
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.residential-hero__cta {
		transition: none;
	}
}