/**
 * Final responsive safeguards.
 *
 * Loaded after component and page styles. This file intentionally contains
 * media-query-only adjustments so established desktop designs remain intact.
 */

@media (max-width: 1599px) {
	:root {
		--container-padding: 28px;
	}

	#page :is(.container, .container-wide) {
		max-width: calc(100% - (var(--container-padding) * 2));
	}
}

@media (max-width: 1399px) {
	:root {
		--container-padding: 24px;
	}

	#page main {
		min-width: 0;
	}

	#page main :is(
		.about-profile-grid,
		.about-experience-grid,
		.about-service-layout,
		.about-renovation-grid,
		.contact-main-grid,
		.application-layout,
		.calculator-layout,
		.mortgage-detail-layout,
		.loan-program-grid,
		.mortgage-grid,
		.scenarios-grid,
		.testimonials-grid,
		.blog-grid,
		.footer-main-grid
	) > * {
		min-width: 0;
	}

	.inner-page-standard :is(
		.about-page-banner,
		.application-hero,
		.faq-hero,
		.contact-hero,
		.scenarios-hero,
		.privacy-hero,
		.terms-hero,
		.accessibility-hero,
		.licensing-hero,
		.mortgage-hero,
		.loan-program-hero,
		.blog-hero,
		.testimonials-hero,
		.search-page-hero
	) {
		min-height: 470px;
		padding-top: 165px;
		padding-bottom: 70px;
	}
}

@media (max-width: 1199px) {
	:root {
		--container-padding: 22px;
	}

	#page :is(img, video, iframe, svg) {
		max-width: 100%;
	}

	#page :is(table, pre) {
		max-width: 100%;
	}

	#page table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#page :is(
		.about-profile-grid,
		.about-experience-grid,
		.about-renovation-grid,
		.contact-main-grid,
		.application-layout,
		.calculator-layout,
		.mortgage-detail-layout
	) {
		gap: clamp(28px, 5vw, 52px);
	}

	#page :is(
		.about-section-heading,
		.faq-introduction,
		.loan-program-section-heading,
		.mortgage-section-heading,
		.scenarios-section-heading,
		.testimonials-section-heading,
		.blog-section-heading
	) {
		max-width: 100%;
	}
}

@media (max-width: 1023px) {
	#page :is(
		.loan-program-grid,
		.mortgage-grid,
		.scenarios-grid,
		.testimonials-grid,
		.blog-grid,
		.about-awards-grid
	) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#page :is(
		.contact-main-grid,
		.application-layout,
		.calculator-layout,
		.about-profile-grid,
		.about-experience-grid,
		.about-renovation-grid,
		.mortgage-detail-layout
	) {
		grid-template-columns: minmax(0, 1fr);
	}

	#page :is(
		.loan-program-section-heading,
		.mortgage-section-heading,
		.scenarios-section-heading
	) {
		align-items: start;
		grid-template-columns: minmax(0, 1fr);
	}

	#page .mortgage-detail-sidebar {
		position: static;
	}
}

@media (max-width: 767px) {
	:root {
		--container-padding: 18px;
	}

	html {
		-webkit-text-size-adjust: 100%;
	}

	body {
		overflow-x: clip;
	}

	#page :is(.container, .container-wide) {
		width: calc(100% - (var(--container-padding) * 2));
		max-width: none;
	}

	#page main > section:not([class*="hero"]):not([class*="banner"]):not(.contact-map-section) {
		scroll-margin-top: 82px;
	}

	.inner-page-standard :is(
		.about-page-banner,
		.application-hero,
		.faq-hero,
		.contact-hero,
		.scenarios-hero,
		.privacy-hero,
		.terms-hero,
		.accessibility-hero,
		.licensing-hero,
		.mortgage-hero,
		.loan-program-hero,
		.blog-hero,
		.testimonials-hero,
		.search-page-hero
	) {
		min-height: 360px;
		padding-top: 118px;
		padding-bottom: 55px;
	}

	.inner-page-standard :is(
		.about-page-banner,
		.application-hero,
		.faq-hero,
		.contact-hero,
		.scenarios-hero,
		.privacy-hero,
		.terms-hero,
		.accessibility-hero,
		.licensing-hero,
		.mortgage-hero,
		.loan-program-hero,
		.blog-hero,
		.testimonials-hero,
		.search-page-hero
	) h1 {
		max-width: 100%;
		margin-bottom: 18px;
		font-size: clamp(2.15rem, 9vw, 2.75rem);
		line-height: 1.1;
		overflow-wrap: anywhere;
	}

	.inner-page-standard nav[class*="breadcrumb"] {
		max-width: 100%;
		gap: 7px;
		font-size: .82rem;
		line-height: 1.5;
	}

	#page :is(
		.loan-program-grid,
		.mortgage-grid,
		.scenarios-grid,
		.testimonials-grid,
		.blog-grid,
		.about-awards-grid,
		.about-state-list,
		.scenario-financials
	) {
		grid-template-columns: minmax(0, 1fr);
	}

	#page :is(
		.loan-program-section-heading,
		.mortgage-section-heading,
		.scenarios-section-heading,
		.faq-introduction
	) {
		align-items: start;
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	#page :is(
		.loan-program-section-heading,
		.mortgage-section-heading,
		.scenarios-section-heading
	) > p {
		width: 100%;
		max-width: 100%;
		justify-self: start;
	}

	#page :is(
		.about-profile-section,
		.about-experience-section,
		.about-service-section,
		.about-cmg-section,
		.about-renovation-section,
		.about-accolades-section,
		.faq-content-section,
		.contact-main-section,
		.application-content-section,
		.calculator-section,
		.mortgage-listing-section,
		.mortgage-detail-section,
		.mortgage-related-section,
		.loan-program-listing-section,
		.scenarios-listing,
		.testimonials-list-section
	) {
		padding-top: 68px;
		padding-bottom: 76px;
	}

	#page :is(
		.loan-program-card,
		.mortgage-card,
		.testimonial-card,
		.scenario-card,
		.contact-profile-card,
		.contact-form-card,
		.mortgage-detail-card
	) {
		max-width: 100%;
		border-radius: 18px;
	}

	#page :is(
		.loan-program-card-content,
		.mortgage-card-content,
		.testimonial-card,
		.scenario-card-body,
		.contact-form-card
	) {
		padding-right: 22px;
		padding-left: 22px;
	}

	#page :is(.btn, button[type="submit"], input[type="submit"]) {
		max-width: 100%;
		white-space: normal;
	}

	#page :is(
		.faq-item summary,
		.mortgage-faq-item summary
	) {
		overflow-wrap: anywhere;
	}

	#page .contact-map-frame {
		height: clamp(320px, 72vw, 420px);
	}
}

@media (max-width: 575px) {
	:root {
		--container-padding: 16px;
	}

	#page :is(
		.about-profile-section,
		.about-experience-section,
		.about-service-section,
		.about-cmg-section,
		.about-renovation-section,
		.about-accolades-section,
		.faq-content-section,
		.contact-main-section,
		.application-content-section,
		.calculator-section,
		.mortgage-listing-section,
		.mortgage-detail-section,
		.mortgage-related-section,
		.loan-program-listing-section,
		.scenarios-listing,
		.testimonials-list-section
	) {
		padding-top: 58px;
		padding-bottom: 66px;
	}

	#page :is(
		.faq-item summary,
		.mortgage-faq-item summary
	) {
		grid-template-columns: 34px minmax(0, 1fr) 30px;
		gap: 10px;
		padding: 13px 12px;
		font-size: .94rem;
	}

	#page .faq-item summary::before,
	#page .mortgage-faq-item summary::before {
		width: 34px;
		height: 34px;
	}

	#page :is(
		.faq-answer,
		.mortgage-faq-answer
	) {
		margin-left: 56px;
		padding-right: 8px;
	}

	#page .testimonials-final-action {
		padding: 30px 22px;
	}

	#page .scenario-financials div {
		min-width: 0;
	}
}

@media (max-width: 420px) {
	:root {
		--container-padding: 14px;
	}

	#page :is(.container, .container-wide) {
		width: calc(100% - 28px);
	}

	.inner-page-standard :is(
		.about-page-banner,
		.application-hero,
		.faq-hero,
		.contact-hero,
		.scenarios-hero,
		.privacy-hero,
		.terms-hero,
		.accessibility-hero,
		.licensing-hero,
		.mortgage-hero,
		.loan-program-hero,
		.blog-hero,
		.testimonials-hero,
		.search-page-hero
	) h1 {
		font-size: clamp(2rem, 10vw, 2.35rem);
	}

	#page main section:not([class*="hero"]):not([class*="banner"]) :is(
		.section-title,
		[class*="section-heading"] > h2,
		header > .section-kicker + h2,
		.faq-introduction h2,
		.testimonials-section-heading h2
	) {
		font-size: clamp(1.85rem, 8.5vw, 2.15rem) !important;
	}

	#page :is(
		.loan-program-card-content,
		.mortgage-card-content,
		.testimonial-card,
		.scenario-card-body,
		.contact-form-card,
		.mortgage-detail-content
	) {
		padding-right: 18px;
		padding-left: 18px;
	}

	#page .btn {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 359px) {
	:root {
		--container-padding: 12px;
	}

	#page :is(.container, .container-wide) {
		width: calc(100% - 24px);
	}

	#page :is(
		.faq-item summary,
		.mortgage-faq-item summary
	) {
		grid-template-columns: 30px minmax(0, 1fr) 28px;
		gap: 8px;
		padding: 12px 10px;
	}

	#page .faq-item summary::before,
	#page .mortgage-faq-item summary::before {
		width: 30px;
		height: 30px;
	}
}