/*
 * Sun & Shield theme styles. Measurements come from the Wix site at 1280px (desktop) and
 * 390px (phone). Page sections carry their own sizes as block attributes; this file covers
 * the header, footer, form, blog and the responsive rules the blocks need.
 */

:root {
	--ss-ink: #2c3131;
	--ss-charcoal: #373d3d;
	--ss-slate: #5c6464;
	--ss-mist: #dfe1e1;
	--ss-orange: #e67e22;
	--ss-amber: #f39c12;
	/* Side gutter: 20px on phones, none once the window is as wide as the Wix design (1280px). */
	--ss-gutter: clamp(0px, calc((1290px - 100vw) / 2), 20px);
	--ss-heading: var(--wp--preset--font-family--heading, "Archivo", sans-serif);
	--ss-body: var(--wp--preset--font-family--body, "Wix Madefor Text", sans-serif);
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--ss-ink);
	color: var(--ss-mist);
	font-family: var(--ss-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
}

/* Archivo at 115% width stands in for Murs Gothic (text widths match within 0.5%). */
h1,
h2,
h3,
h4,
h5,
h6,
.has-heading-font-family,
.wp-element-button,
.site-header__cta,
.site-footer__heading,
.site-footer__subheading {
	font-family: var(--ss-heading);
	font-stretch: 115%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	overflow-wrap: break-word;
}

p,
ul,
ol {
	margin: 0;
}

a {
	color: inherit;
}

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

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 16px;
	background: #fff;
	color: var(--ss-ink);
}

:focus-visible {
	outline: 2px solid var(--ss-amber);
	outline-offset: 2px;
}

[id] {
	scroll-margin-top: 140px;
}

/* ------------------------------------------------------------------ header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ss-ink);
	border-top: 4px solid var(--ss-orange);
	border-bottom: 1px solid var(--ss-charcoal);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.admin-bar .site-header {
	top: 32px;
}

.site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: 24px;
	max-width: 1280px;
	min-height: 84px;
	margin: 0 auto;
	padding: 10px 40px 10px 30px;
}

.site-header__logo {
	grid-row: 1;
	grid-column: 1;
	display: block;
	line-height: 0;
}

.site-header__logo img {
	width: 200px;
	height: auto;
}

.site-header__cta {
	grid-row: 1;
	grid-column: 3;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 24px;
	border: 1px solid #fff;
	border-radius: 100px;
	background: var(--ss-amber);
	color: var(--ss-ink);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.1;
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s, color 0.2s;
}

.site-header__cta:hover {
	background: var(--ss-orange);
	color: #fff;
}

.site-header__cta-mobile {
	display: none;
}

.site-nav {
	grid-row: 1;
	grid-column: 2;
	justify-self: center;
}

.site-nav__menu,
.site-nav__menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__menu {
	display: flex;
	gap: 0;
}

.site-nav__menu > li {
	position: relative;
	display: flex;
	align-items: center;
}

.site-nav__menu a {
	display: block;
	text-decoration: none;
}

.site-nav__menu > li > a {
	padding: 7px 30px;
	color: #fff;
	font-size: 16px;
	letter-spacing: 1.6px;
	line-height: 21.6px;
	text-transform: uppercase;
}

.site-nav__menu > li.current-menu-item > a,
.site-nav__menu > li > a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.submenu-toggle {
	display: inline-flex;
	align-items: center;
	margin-left: -26px;
	padding: 4px;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}

.site-nav__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 10px;
	z-index: 10;
	min-width: 260px;
	padding: 8px 0;
	background: var(--ss-ink);
	border-top: 2px solid var(--ss-orange);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.site-nav__menu .sub-menu .sub-menu {
	top: -10px;
	left: 100%;
}

.site-nav__menu li:hover > .sub-menu,
.site-nav__menu li:focus-within > .sub-menu,
.site-nav__menu li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.site-nav__menu .sub-menu li {
	position: relative;
	display: flex;
	align-items: center;
}

.site-nav__menu .sub-menu a {
	flex: 1;
	padding: 9px 20px;
	color: var(--ss-mist);
	font-size: 15px;
	line-height: 1.3;
}

.site-nav__menu .sub-menu a:hover,
.site-nav__menu .sub-menu .current-menu-item > a {
	background: var(--ss-charcoal);
	color: #fff;
}

.site-nav__menu .sub-menu .submenu-toggle {
	margin: 0 10px 0 0;
	transform: rotate(-90deg);
}

.site-nav-toggle {
	display: none;
}

@media (max-width: 1100px) {
	.site-nav__menu > li > a {
		padding: 7px 18px;
	}

	.site-nav__menu > li > a {
		padding: 7px 12px;
	}

	.site-nav__menu > li.menu-item-has-children > a {
		padding-right: 30px;
	}

	.site-header__cta {
		padding: 10px 16px;
		font-size: 14px;
	}
}

@media (max-width: 960px) {
	.site-header {
		position: relative;
	}

	.site-header__inner {
		grid-template-columns: 1fr;
		justify-items: center;
		min-height: 0;
		padding: 18px var(--ss-gutter) 10px;
		row-gap: 14px;
	}

	.site-header__logo {
		grid-row: 1;
		grid-column: 1;
		align-self: center;
	}

	.site-header__logo img {
		width: 216px;
	}

	.site-header__cta {
		grid-row: 2;
		grid-column: 1;
		justify-self: center;
		min-width: 0;
		width: 136px;
		min-height: 52px;
		padding: 6px 10px;
		font-family: var(--ss-body);
		font-stretch: 100%;
		font-size: 15px;
		line-height: 1.3;
		white-space: normal;
	}

	.site-header__cta-desktop {
		display: none;
	}

	.site-header__cta-mobile {
		display: inline;
	}

	.site-nav-toggle {
		grid-row: 3;
		grid-column: 1;
		display: block;
		width: 44px;
		height: 36px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.site-nav-toggle__bars,
	.site-nav-toggle__bars::before,
	.site-nav-toggle__bars::after {
		display: block;
		width: 34px;
		height: 2px;
		margin: 0 auto;
		background: #fff;
		transition: transform 0.2s, opacity 0.2s;
	}

	.site-nav-toggle__bars {
		position: relative;
	}

	.site-nav-toggle__bars::before,
	.site-nav-toggle__bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.site-nav-toggle__bars::before {
		top: -10px;
	}

	.site-nav-toggle__bars::after {
		top: 10px;
	}

	.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bars {
		background: transparent;
	}

	.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bars::before {
		transform: translateY(10px) rotate(45deg);
	}

	.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bars::after {
		transform: translateY(-10px) rotate(-45deg);
	}

	.site-nav {
		grid-row: 4;
		grid-column: 1;
		display: none;
		width: 100%;
		margin: 0;
	}

	.site-nav.is-open {
		display: block;
	}

	.site-nav__menu {
		flex-direction: column;
		padding: 8px 0 12px;
	}

	.site-nav__menu li {
		flex-wrap: wrap;
	}

	.site-nav__menu > li > a {
		flex: 1;
		padding: 12px 4px;
		text-align: center;
	}

	.submenu-toggle,
	.site-nav__menu .sub-menu .submenu-toggle {
		margin: 0;
		padding: 12px;
		transform: none;
	}

	.site-nav__menu .sub-menu,
	.site-nav__menu .sub-menu .sub-menu {
		position: static;
		display: none;
		flex-basis: 100%;
		width: 100%;
		min-width: 0;
		padding: 0 0 0 16px;
		border: 0;
		box-shadow: none;
		background: transparent;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav__menu li.is-open > .sub-menu {
		display: block;
	}

	.site-nav__menu .sub-menu a {
		text-align: center;
	}
}

/* ------------------------------------------------------------------ page sections */

.site-main {
	display: block;
}

.entry-content > .alignfull,
.ss-section {
	margin-top: 0;
	margin-bottom: 0;
}

.ss-section {
	position: relative;
}

.entry-content > * + * {
	margin-block-start: 0;
}

/* Background images on cards and sections: keep them filling the box. */
.wp-block-group[style*="background-image"] {
	background-repeat: no-repeat;
}

/* Three-column photo cards (e.g. The Big 3 Guarantees): wider than the section's content
   width, and a tint plus text shadow so the white text reads over the photo. */
.ss-grid--3:has(> [style*="background-image"]) {
	width: min(1320px, calc(100vw - 40px));
	max-width: none !important;
	margin-right: auto !important;
	margin-left: 50% !important;
	transform: translateX(-50%);
}

.ss-grid--3 > [style*="background-image"] {
	position: relative;
	isolation: isolate;
}

.ss-grid--3 > [style*="background-image"]::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(rgba(20, 24, 24, 0.55), rgba(20, 24, 24, 0.35));
}

.ss-grid--3 > [style*="background-image"] :is(h2, h3, p, li) {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.6);
}

.ss-dim-10,
.ss-dim-20,
.ss-dim-30,
.ss-dim-40,
.ss-dim-50,
.ss-dim-60,
.ss-dim-70,
.ss-dim-80,
.ss-dim-90 {
	position: relative;
	isolation: isolate;
}

[class*="ss-dim-"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--ss-ink);
}

.ss-dim-10::before { opacity: 0.1; }
.ss-dim-20::before { opacity: 0.2; }
.ss-dim-30::before { opacity: 0.3; }
.ss-dim-40::before { opacity: 0.4; }
.ss-dim-50::before { opacity: 0.5; }
.ss-dim-60::before { opacity: 0.6; }
.ss-dim-70::before { opacity: 0.7; }
.ss-dim-80::before { opacity: 0.8; }
.ss-dim-90::before { opacity: 0.9; }

.ss-blur {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.wp-block-group,
.wp-block-column {
	min-width: 0;
}

.wp-block-image {
	margin: 0;
}

.wp-block-image img {
	display: block;
	max-width: 100%;
}

.wp-block-list {
	padding-left: 1.3em;
}

.has-text-align-center.wp-block-list {
	list-style-position: inside;
	padding-left: 0;
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--ss-slate);
	margin: 0;
}

.ss-vector svg {
	width: 100%;
	height: 100%;
}

/* A grid left with a single card spans the full width. */
.ss-grid > :only-child {
	grid-column: 1 / -1;
}

/* Card grids: 4 > 2 > 1 columns, 3 > 2 > 1. */
@media (max-width: 1024px) {
	.ss-grid.ss-grid--3,
	.ss-grid.ss-grid--4,
	.ss-grid.ss-grid--5,
	.ss-grid.ss-grid--6 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 640px) {
	.ss-grid.ss-grid--2,
	.ss-grid.ss-grid--3,
	.ss-grid.ss-grid--4,
	.ss-grid.ss-grid--5,
	.ss-grid.ss-grid--6 {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.wp-block-columns {
		row-gap: 24px;
	}

	.wp-block-button.has-custom-width {
		width: 100% !important;
	}

	.wp-block-image.is-resized img {
		width: 100% !important;
	}
}

/* Wix stacks columns on phones; core stacks below 782px, keep that. */
@media (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ------------------------------------------------------------------ buttons */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	transition: filter 0.2s, transform 0.2s;
}

.wp-block-button__link:hover {
	filter: brightness(1.08);
}

.wp-block-button.has-custom-width .wp-block-button__link {
	width: 100%;
}

.ss-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	border: 1px solid #fff;
	border-radius: 100px;
	background: var(--ss-orange);
	color: var(--ss-ink);
	font-family: var(--ss-heading);
	font-stretch: 115%;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
}

.ss-btn--ghost {
	background: transparent;
	color: #fff;
}

/* ------------------------------------------------------------------ estimate form */

/* At least 560px wide where there is room (Wix sized some forms at under 400px). */
.ss-form-wrap {
	min-width: min(560px, 100%);
	padding: 40px;
	border-radius: 12px;
	background: var(--ss-charcoal);
	color: #fff;
	text-align: left;
}

.ss-form {
	display: grid;
	gap: 20px;
}

.ss-form__field label,
.ss-form__field legend {
	display: block;
	margin-bottom: 8px;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
}

.ss-form__field input,
.ss-form__field select,
.ss-form__field textarea {
	width: 100%;
	min-height: 42px;
	padding: 8px 12px;
	border: 1px solid var(--ss-slate);
	border-radius: 2px;
	background: var(--ss-ink);
	color: #fff;
	font: 16px/1.4 var(--ss-body);
}

.ss-form__field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23dfe1e1' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 14px 8px;
	color: var(--ss-mist);
}

.ss-form__field textarea {
	min-height: 120px;
	resize: vertical;
}

.ss-form__field input:focus,
.ss-form__field select:focus,
.ss-form__field textarea:focus {
	border-color: var(--ss-orange);
	outline: none;
}

.ss-form__field--radio {
	margin: 0;
	padding: 0;
	border: 0;
}

.ss-form__field--radio label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}

.ss-form__field--radio input {
	width: 16px;
	height: 16px;
	min-height: 0;
	margin: 0;
	accent-color: var(--ss-orange);
}

.ss-form__submit {
	width: 100%;
	min-height: 42px;
	border: 0;
	border-radius: 2px;
	background: var(--ss-orange);
	color: var(--ss-ink);
	font: 16px/1.4 var(--ss-body);
	cursor: pointer;
	transition: filter 0.2s;
}

.ss-form__submit:hover {
	filter: brightness(1.08);
}

.ss-form__notice {
	margin-bottom: 20px;
	padding: 14px 16px;
	border-left: 4px solid var(--ss-orange);
	background: var(--ss-ink);
	color: #fff;
}

.ss-form__notice--error {
	border-color: #e74c3c;
}

.ss-form__hp {
	position: absolute;
	left: -9999px;
}

@media (max-width: 640px) {
	.ss-form-wrap {
		padding: 24px 16px;
	}
}

/* ------------------------------------------------------------------ footer */

.site-footer {
	background: var(--ss-ink);
	border-top: 1px solid var(--ss-charcoal);
	color: var(--ss-mist);
	font-size: 14px;
	line-height: 1.35;
}

.site-footer a {
	color: inherit;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 246px 236px 253px 1fr;
	gap: 22px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 40px 40px 10px;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.site-footer__logo {
	line-height: 0;
}

.site-footer__logo img {
	width: 246px;
}

.site-footer__about {
	max-width: 211px;
	margin-top: 68px;
}

.site-footer__office {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	margin: 88px 0 0 35px;
	color: var(--ss-slate);
	font-family: var(--ss-heading);
	font-stretch: 115%;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.12;
	text-align: left;
}

.site-footer__office a {
	color: inherit;
}

.site-footer__badges {
	margin: 40px 0 0;
	padding-left: 18px;
	color: #fff;
	text-align: center;
}

.site-footer__social {
	display: flex;
	gap: 12px;
	margin: 60px 0 0 85px;
	padding: 0;
	list-style: none;
}

.site-footer__social a {
	display: block;
	color: #000;
	line-height: 0;
}

.site-footer__social a:hover {
	color: var(--ss-orange);
}

.site-footer__heading {
	margin: 34px 0 52px;
	color: var(--ss-orange);
	font-size: 18px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.site-footer__links {
	margin: 0;
	padding: 0 0 0 6px;
	list-style: none;
}

.site-footer__links li + li {
	margin-top: 12px;
}

.site-footer__links a {
	color: #fff;
	font-size: 16px;
}

.site-footer__links--small {
	padding-left: 0;
}

.site-footer__links--small li + li {
	margin-top: 14px;
}

.site-footer__links--small a {
	color: var(--ss-mist);
	font-size: 14px;
}

.site-footer__roc {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 52px 0 0 6px;
	color: var(--ss-orange);
	font-weight: 700;
}

.site-footer__subheading {
	margin: 0 0 18px 14px;
	color: #fff;
	font-size: 18px;
}

.site-footer__cities {
	margin: 0;
	padding-left: 25px;
	color: var(--ss-mist);
}

.site-footer__cities--columns {
	columns: 2;
	column-gap: 24px;
}

.site-footer__map {
	max-width: 1232px;
	margin: 0 auto;
	padding: 0 24px 32px;
}

.site-footer__map iframe {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
	border-radius: 8px;
	filter: grayscale(0.2);
}

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	max-width: 1232px;
	margin: 0 auto;
	padding: 32px 0 44px;
	border-top: 1px solid var(--ss-charcoal);
	color: var(--ss-slate);
}

@media (max-width: 1100px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		padding: 40px var(--ss-gutter);
	}
}

@media (max-width: 640px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.site-footer__about,
	.site-footer__office,
	.site-footer__social {
		margin: 32px auto 0;
		align-items: center;
		text-align: center;
	}

	.site-footer__heading {
		margin: 24px 0;
	}

	.site-footer__links,
	.site-footer__roc {
		align-items: center;
		padding: 0;
	}

	.site-footer__subheading {
		margin-left: 0;
	}

	.site-footer__cities,
	.site-footer__badges {
		list-style-position: inside;
		padding: 0;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: center;
		margin: 0 var(--ss-gutter);
		text-align: center;
	}
}

/* ------------------------------------------------------------------ blog */

/* Measured from the Wix blog: 940px column, three 290px cards, 34px apart. */
.ss-blog,
.ss-post-page {
	max-width: calc(940px + 2 * var(--ss-gutter));
	margin: 0 auto;
	padding: 16px var(--ss-gutter) 96px;
}

.ss-blog__nav {
	padding: 6px 0 40px;
	font-size: 14px;
}

.ss-blog__nav a {
	color: var(--ss-mist);
	text-decoration: none;
}

.ss-blog__nav a[aria-current="page"],
.ss-blog__nav a:hover {
	color: var(--ss-orange);
}

.ss-blog__title {
	margin-bottom: 40px;
	color: #fff;
	font-size: clamp(32px, 4vw, 48px);
}

.ss-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 34px;
}

.ss-card-post {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 350px;
	border: 1px solid rgba(223, 225, 225, 0.25);
	background: var(--ss-ink);
}

.ss-card-post__image {
	display: block;
	aspect-ratio: 290 / 162;
	overflow: hidden;
	background: var(--ss-charcoal);
}

.ss-card-post__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.ss-card-post:hover .ss-card-post__image img {
	transform: scale(1.03);
}

.ss-card-post__body {
	padding: 20px 24px 24px;
}

.ss-card-post__title {
	margin: 0 0 12px;
	color: #fff;
	font-size: 18px;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ss-card-post__title a {
	text-decoration: none;
}

/* The title link covers the card, image included. */
.ss-card-post__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ss-card-post__title a:hover,
.ss-card-post:hover .ss-card-post__title a {
	color: var(--ss-orange);
}

.ss-card-post__excerpt {
	color: var(--ss-mist);
	font-size: 14px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ss-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}

.ss-pagination .page-numbers {
	padding: 6px 12px;
	color: #fff;
}

.ss-pagination .current {
	color: var(--ss-orange);
}

@media (max-width: 900px) {
	.ss-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.ss-blog__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ss-post {
	padding: 48px 0 40px;
	border: 1px solid rgba(223, 225, 225, 0.25);
	color: var(--ss-mist);
	font-size: 16px;
	line-height: 1.5;
}

.ss-post__header,
.ss-post__body {
	max-width: calc(640px + 2 * var(--ss-gutter));
	margin: 0 auto;
	padding: 0 var(--ss-gutter);
}

.ss-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--ss-mist);
	font-size: 12px;
}

.ss-post__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--ss-orange);
	color: #fff;
	font-size: 14px;
}

.ss-post__title {
	margin: 20px 0 24px;
	color: #fff;
	font-size: clamp(26px, 3vw, 32px);
	line-height: 1.3;
}

.ss-post__banner img {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: cover;
}

.ss-post__body {
	margin-top: 48px;
}

.ss-post__body > * + * {
	margin-top: 0;
}

.ss-post__body h2,
.ss-post__body h3,
.ss-post__body h4 {
	margin: 28px 0 8px;
	color: #fff;
	font-size: 24px;
	line-height: 1.35;
}

.ss-post__body h3 {
	font-size: 20px;
}

.ss-post__body .wp-block-list {
	padding-left: 1.5em;
}

.ss-post__body .wp-block-image {
	margin: 24px auto;
}

.ss-post__body .wp-block-image img {
	width: auto;
	max-height: 380px;
	margin: 0 auto;
}

.ss-recent {
	margin-top: 56px;
}

.ss-recent__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 20px;
}

.ss-recent__head h2 {
	color: #fff;
	font-family: var(--ss-body);
	font-stretch: 100%;
	font-size: 16px;
	font-weight: 400;
}

.ss-recent__head a {
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

/* ------------------------------------------------------------------ 404 */

.ss-notfound {
	max-width: 720px;
	margin: 0 auto;
	padding: 120px var(--ss-gutter);
	text-align: center;
}

.ss-notfound h1 {
	color: #fff;
	font-size: clamp(36px, 6vw, 64px);
}

.ss-notfound p {
	margin-top: 20px;
	font-size: 18px;
}

.ss-notfound__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

/* Full-bleed bands inside a section (e.g. the stats band under the home hero). */
.ss-section > .alignfull {
	width: auto;
	max-width: none;
	margin-right: calc(-1 * var(--ss-gutter)) !important;
	margin-left: calc(-1 * var(--ss-gutter)) !important;
}

/* ------------------------------------------------------------------ phone call bar */

/* Call and free-estimate buttons fixed to the bottom of the screen on phones. */
.ss-callbar {
	display: none;
}

@media (max-width: 781px) {
	body {
		padding-bottom: 60px;
	}

	.ss-callbar {
		position: fixed;
		z-index: 90;
		right: 0;
		bottom: 0;
		left: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--ss-ink);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35);
	}

	.ss-callbar a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 60px;
		padding: 0 8px;
		color: #fff;
		font-family: var(--ss-heading);
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0.5px;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
	}

	.ss-callbar__estimate {
		background: var(--ss-orange);
		color: #000 !important;
	}
}


/* ------------------------------------------------------------------ estimate form sections */

/* Some form sections are only 590px wide (home): the heading gets at least 1100px (or the
   full width on smaller screens) so it isn't broken into many short lines. The form keeps
   its width, and wider sections are left as they are. */
.ss-section:has(.ss-form-wrap) > .wp-block-heading {
	min-width: min(1100px, 100%);
}

/* ------------------------------------------------------------------ comparison table (home) */

/* Header and body cells share the same column widths with no gaps, so the orange
   "Sun & Shield" header fills its column and lines up with the rows below it. */
.ss-compare {
	overflow: hidden;
}

.ss-compare > .wp-block-group {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.ss-compare .wp-block-columns {
	gap: 0 !important;
	align-items: stretch !important;
	margin-block: 0;
}

.ss-compare .wp-block-column > .wp-block-group {
	height: 100%;
	border-radius: 0 !important;
}

.ss-compare .wp-block-column:first-child > .wp-block-heading {
	padding-left: clamp(16px, 12.49px + 0.9vw, 24px);
}

.ss-compare .wp-block-column > p {
	padding-inline: 12px;
}

@media (min-width: 782px) {
	.ss-compare .wp-block-column:nth-child(1) {
		flex-basis: 27.32% !important;
	}

	.ss-compare .wp-block-column:nth-child(2),
	.ss-compare .wp-block-column:nth-child(3) {
		flex-basis: 36.34% !important;
	}

	/* The body cells had their own top margin; centre them vertically in the row instead. */
	.ss-compare .wp-block-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.ss-compare > .wp-block-group .wp-block-column > :is(h2, p) {
		margin-block: 16px !important;
	}
}

@media (max-width: 781px) {
	/* Stacked on phones: a little air between the rows. */
	.ss-compare > .wp-block-group {
		padding-block: 10px !important;
	}

	.ss-compare .wp-block-columns {
		row-gap: 4px;
	}

	.ss-compare .wp-block-column > :is(h2, p) {
		margin-top: 6px !important;
	}
}

/* Four-item strips (Years of Roofing Experience...; Born & Raised in Arizona...): edge to edge
   with four equal columns. Two shapes from Wix: the strip closing a hero (Home, Services), or
   a section of its own holding only the strip (Phoenix page). Wix sized the columns unevenly
   and inset them, and left 1px of the hero photo showing under the strip. */
.ss-section:has(> .alignfull:last-child > .wp-block-columns:only-child > .wp-block-column:nth-child(4):last-child) {
	padding-bottom: 0 !important;
}

.alignfull:has(> .wp-block-columns:only-child > .wp-block-column:nth-child(4):last-child),
.ss-section:has(> .wp-block-columns:only-child > .wp-block-column:nth-child(4):last-child) {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.alignfull > .wp-block-columns:only-child:has(> .wp-block-column:nth-child(4):last-child),
.ss-section > .wp-block-columns:only-child:has(> .wp-block-column:nth-child(4):last-child) {
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

@media (min-width: 782px) {
	.alignfull > .wp-block-columns:only-child > .wp-block-column:nth-child(4):last-child,
	.alignfull > .wp-block-columns:only-child > .wp-block-column:has(~ .wp-block-column:nth-child(4):last-child),
	.ss-section > .wp-block-columns:only-child > .wp-block-column:nth-child(4):last-child,
	.ss-section > .wp-block-columns:only-child > .wp-block-column:has(~ .wp-block-column:nth-child(4):last-child) {
		flex: 1 1 0 !important;
	}

	/* Columns as wide as the screen: keep the text off the outer edges. */
	.ss-section > .wp-block-columns:only-child > .wp-block-column:nth-child(4):last-child,
	.ss-section > .wp-block-columns:only-child > .wp-block-column:has(~ .wp-block-column:nth-child(4):last-child) {
		padding-inline: 24px;
	}
}

/* ------------------------------------------------------------------ text over photos */

/* White text on a photo background: a shadow so it stays readable on bright areas. Light
   text only: on dark text (Foam page hero) a dark shadow only smudges it. */
.ss-section[style*="background-image"] > :is(h1, h2, p):not(.has-ink-color),
.ss-section[style*="background-image"] > .wp-block-group:not(.has-background) :is(h1, h2, h3, p):not(.has-ink-color) {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* Dark text on a slate button (Foam, Commercial) was hard to read: lighter grey behind it. */
.wp-block-button__link.has-ink-color.has-slate-background-color {
	background-color: var(--wp--preset--color--silver, #bdc3c7) !important;
}

.wp-block-button__link.has-ink-color.has-slate-background-color:hover {
	background-color: var(--wp--preset--color--mist, #dfe1e1) !important;
}

/* Body text straight on a photo is a little bolder too (not on Wix; easier to read). */
.ss-section[style*="background-image"] > p,
.ss-section[style*="background-image"] > .wp-block-group:not(.has-background) p {
	font-weight: 500;
}

/* Heroes with text straight on the photo (About): a dark tint behind it, as on Wix. */
.ss-hero-dim {
	position: relative;
	isolation: isolate;
}

.ss-hero-dim::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(90deg, rgba(20, 24, 24, 0.72), rgba(20, 24, 24, 0.45));
}

/* Hero content on the left instead of centred (Phoenix page monsoon section). */
.ss-hero-left {
	padding-left: max(var(--ss-gutter), clamp(20px, 7vw, 120px)) !important;
}

/* ------------------------------------------------------------------ text on amber / orange boxes */

/* Wix put orange and light grey text on amber boxes (Free Roof Inspection: "What you get" and
   the captions under each item), which barely shows. Dark ink instead; labels bold. */
:is(.has-amber-background-color, .has-orange-background-color) :is(p, h2, h3, h4, li).has-orange-color,
:is(.has-amber-background-color, .has-orange-background-color) :is(p, h2, h3, h4, li).has-amber-color {
	color: var(--ss-ink) !important;
	font-weight: 700;
}

:is(.has-amber-background-color, .has-orange-background-color) :is(p, li).has-mist-color,
:is(.has-amber-background-color, .has-orange-background-color) :is(p, li).has-silver-color {
	color: var(--ss-ink) !important;
}