/* Prompt 700: the source's face has font-display: auto, hiding the headings until it loads; the same
   face again with swap, as the source's other faces have. The later of two equal faces wins. */
@font-face {
	font-family: Prompt;
	src: url("../media/8dacf4bb-661929a9803c6dd24d473089_subset-Prompt-ExtraBold.woff2") format("woff2"), url("../media/b678cd4e-661929a81d5d7f54a4374ae5_subset-Prompt-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* CLS: until Prompt arrives the text is set in a local Arial scaled to Prompt's width and line box
   (measured on its uppercase text, as the headings and
   crumbs set it: width ratio and font box per weight, a hair under so nothing rewraps), so the swap does not rewrap the
   breadcrumbs and move the article. Once Prompt loads nothing differs. */
@font-face {
	font-family: "Prompt Fallback";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"), local("Helvetica");
	font-weight: 400;
	size-adjust: 96.5%;
	ascent-override: 113%;
	descent-override: 43.5%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Prompt Fallback";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"), local("Helvetica");
	font-weight: 500;
	size-adjust: 96.5%;
	ascent-override: 113%;
	descent-override: 43.5%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Prompt Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"), local("Helvetica Bold");
	font-weight: 600;
	size-adjust: 95.5%;
	ascent-override: 114.1%;
	descent-override: 44%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Prompt Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"), local("Helvetica Bold");
	font-weight: 700 900;
	size-adjust: 95.5%;
	ascent-override: 114.1%;
	descent-override: 44%;
	line-gap-override: 0%;
}

body,
.breadcrumb-link {
	font-family: Prompt, "Prompt Fallback", sans-serif;
}

/* Open Sans: the source fetched all ten faces from Google through its WebFont loader on every page
   (inc/site/fonts.php drops it). The same latin files, self-hosted: one variable face per style covers
   300-800, and a page loads one only when its text is set in it. */
@font-face {
	font-family: "Open Sans";
	src: url("../fonts/open-sans-latin-normal.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-stretch: 100%;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Open Sans";
	src: url("../fonts/open-sans-latin-italic.woff2") format("woff2");
	font-weight: 300 800;
	font-style: italic;
	font-stretch: 100%;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Until it arrives, a local Arial at Open Sans's width and line box (measured: width 103.5% at 400,
   103% at 700; ascent 1.069em, descent 0.293em), so the swap does not rewrap. */
@font-face {
	font-family: "Open Sans Fallback";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"), local("Helvetica");
	font-weight: 300 500;
	size-adjust: 103.5%;
	ascent-override: 103.3%;
	descent-override: 28.3%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Open Sans Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"), local("Helvetica Bold");
	font-weight: 600 800;
	size-adjust: 103%;
	ascent-override: 103.8%;
	descent-override: 28.4%;
	line-gap-override: 0%;
}

.content-main p,
.dropdown-head {
	font-family: "Open Sans", "Open Sans Fallback", sans-serif;
}

/* FAQ:the source centres question and arrow through per-page #w-node ids (place-self: center). */
.faq-item .accordion-container__head-text,
.faq-item .accordion-container__head-button {
	align-self: center;
}

/* Contact us: Contact Form 7 inside the source's form. The source has no spinner and no
   message lines: its errors are red borders, its status the .w-form-done/.w-form-fail boxes. */
.contact-us-form .wpcf7-spinner {
	display: none;
}

.contact-us-form .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 0;
}

.contact-us-form .wpcf7-not-valid-tip {
	position: absolute;
	bottom: -17px;
	color: #cc1f1f;
	font-family: Prompt;
	font-size: 14px;
	font-weight: 500;
	line-height: 140%;
}

.contact-us-form .contacs-form__input.wpcf7-not-valid {
	color: #cc1f1f;
	border: 1px solid #cc1f1f !important;
}

/* Estimate form: CF7's wrap around the hidden fence-type input would take a grid row of its own. */
.contact-us-form .wpcf7-form-control-wrap:has(> .fence-type-select) {
	display: none;
}

/* Estimate form: the line under the fence tiles while the source's check frames them, in the fields' tip type. */
.fences .fences__error {
	display: none;
	grid-column: 1 / -1;
	margin: 0;
	color: #cc1f1f;
	font-family: Prompt;
	font-size: 14px;
	font-weight: 500;
	line-height: 140%;
}

.fences.invalid .fences__error:not(:empty) {
	display: block;
}

/* Estimate form: the success box fills .contact-us from its left edge, flush against the fence cards;
   on desktop it takes the form's column instead, inside the container's 15px gutters. */
@media screen and (min-width: 992px) {
	.fences-container .fences-message {
		left: 15px;
		right: 15px;
		width: auto;
	}
}

/* Why us: the source places the grid cells through per-page #w-node ids; the same placement by class. */
.why-us .why-us-absolute__img,
.why-us .why-us-item__title {
	align-self: start;
}

.why-us .why-us-absolute__info {
	grid-area: 1 / 2 / 2 / 3;
	align-self: start;
}

.why-us .why-us-item__img {
	grid-area: 1 / 1 / 3 / 2;
	align-self: start;
}

.why-us .why-us-item__text {
	grid-area: 2 / 2 / 3 / 3;
}

@media screen and (max-width: 991px) {
	.why-us .why-us-absolute__img-mobile {
		grid-area: 1 / 1 / 2 / 3;
		justify-self: stretch;
	}

	.why-us .why-us-absolute__info {
		grid-row: 2 / 3;
		grid-column-start: 1;
	}

	.why-us .why-us-absolute__img.mw636.mh0 {
		grid-area: span 1 / span 2 / span 1 / span 2;
	}
}

/* CTA boxes beside and inside an article are no headings of it: their titles are divs in an h2's dress. */
div.side-cta-title,
.promo-cta__info > div.accordion-container__title {
	margin-top: 0;
	letter-spacing: 2.24px;
	text-transform: uppercase;
	font-weight: 700;
}

div.side-cta-title {
	line-height: 110%;
}

.content-main .promo-cta__info > div.accordion-container__title {
	margin-top: 40px;
	font-size: 32px;
}

/* Orange text on the light backgrounds: the brand's #f26300 reads 2.6 to 3.2:1 there; these shades pass WCAG AA. */
.contact-us-form a.orange,
.contact-us__links.orange,
.heading-subtitle a.orange,
.warranty-item a.orange,
.vinyl-fence-calculator__disclaimer .orange,
.blog-content.w-richtext a:not(.btn),
.privacy-policy-content a,
.resources .calendar-control-item.swiper-pagination-bullet-active {
	color: #ad4700;
}

/* A link inside a line of text is told from the text by its underline, not its colour alone. */
.contact-us-form a.orange,
.contact-us__links.orange,
.heading-subtitle a.orange,
.warranty-item a.orange {
	text-decoration: underline;
}

.security-section.residential .orange-title,
.security-section.residential .hero-container__title-bold.orange,
.security-section.residential .bold-text-7 {
	color: #d15600;
}

fence-cost-calculator {
	--orange: #ad4700;
}

/* Contact forms: a keyboard's stop on a field shows. */
.contact-us-form .contacs-form__input:focus-visible,
.contact-us-form .select-button:focus-visible {
	outline: 2px solid #2d393b;
	outline-offset: 2px;
}

/* Similar posts: the source dresses the first card as the hub's featured one, white text meant for over its
   photo, but here the photo stops above the text, which is left white on beige (1.2:1). */
@media screen and (min-width: 992px) {
	.similar-blogs .blogs .blog:first-child .blog .blog-info-item * {
		color: #2d393b;
	}
}

/* Header: the closed drawer sits off screen, where its links still took the keyboard's focus unseen. Its
   `transition: all` keeps it visible while it slides out. */
@media screen and (max-width: 1279px) {
	.header-bottom:not(.header-bottom__open) {
		visibility: hidden;
	}

	/* A closed submenu of the phone menu (0 px tall, transparent) keeps its links out of the Tab order; its
	   toggle (main.js) is a keyboard stop that shows its focus. */
	.header-bottom__item-pullout:not(.open) > .header-bottom__submenu {
		visibility: hidden;
	}

	.header-bottom__item-trigger:focus-visible {
		outline: 2px solid #2d393b;
		outline-offset: 4px;
	}

	/* The open menu scrolled its items under the logo, which hangs below the bar (to 100 px, 124 px from 480).
	   A transparent top border, its own beige drawn under it, starts the scroll area below the logo; the
	   container's padding gives the same height back, so the unscrolled menu lies where the source's does. */
	.header-bottom.header-bottom__open {
		border-top: 56px solid transparent;
	}

	.header-bottom.header-bottom__open > .header-bottom__container {
		padding-top: 34px;
	}
}

@media screen and (min-width: 480px) and (max-width: 1279px) {
	.header-bottom.header-bottom__open {
		border-top-width: 78px;
	}

	.header-bottom.header-bottom__open > .header-bottom__container {
		padding-top: 12px;
	}
}

/* Projects: on a phone the first card's lazy photo is 0 px tall until it loads, a 10 px link to tap. One with
   its file's width and height (inc/img-autosizes.php) holds its own ratio; 4:3 would make it taller than the source. */
@media screen and (max-width: 479px) {
	.projects-grid > a.project-item.first .project-image.image-fulll-height:not([height]) {
		aspect-ratio: auto 4 / 3;
	}
}

@media screen and (max-width: 767px) {
	div.side-cta-title,
	.promo-cta__info > div.accordion-container__title {
		letter-spacing: 1.28px;
	}
}

/* Stats row (home, projects): at 768-899 its three numbers, 56 px each, are wider than the row and the
   swiper cut the last one; a size that fits keeps all three whole. */
@media screen and (min-width: 768px) and (max-width: 899px) {
	.numbers-container__item-main {
		font-size: 44px;
	}
}

/* Hero titles whose second line is a 72 px .fs72: the h1's 36 px line height laid it over the first line. */
@media screen and (max-width: 991px) {
	.hero-container__title > strong.fs72 {
		line-height: 100%;
	}
}

@media screen and (max-width: 479px) {
	.hero-container__title > strong.fs72:not(.hero-container__title-bold) {
		font-size: 48px;
	}
}

/* Gallery: its light hero has no top padding of its own below the desktop; the title starts below the logo. */
@media screen and (max-width: 991px) {
	.page-gallery .service-hero {
		padding-top: 140px;
	}
}

@media screen and (max-width: 767px) {
	.page-gallery .service-hero {
		padding-top: 120px;
	}
}

/* Fence-type tips: a "Learn more" link longer than its card on a phone wraps inside it. */
@media screen and (max-width: 479px) {
	.tip-subtitle .why-us-absolute__btn.max-content {
		width: auto;
		max-width: 100%;
	}
}

/* Featured projects: the swiper's inline margin from a narrower window stays on the desktop grid's cards
   and shifted the first one 12 px out of the slider, which cut its title and text. */
@media screen and (min-width: 992px) {
	.legacy-container__list > .legacy-container__item {
		margin-right: 0 !important;
	}
}

/* Featured projects' orange title: on a desktop the forest band above (z-index 2) ends 6 px into its letters
   and its cream cut their tops flat, the source's too; below 992 px the source lifts the title over it. The
   strong alone rises, so the line the band hides on the source's desktop stays hidden. */
@media screen and (min-width: 992px) {
	.legacy-background.pors {
		z-index: auto;
	}

	.legacy-background.pors .legacy-container__title-bold {
		position: relative;
		z-index: 3;
	}
}

/* Two-line section titles: the source pulls the second line up by a negative margin meant for one line,
   so a title that wraps on a phone or tablet ran into it. */
@media screen and (max-width: 991px) {
	.reviews-container__title,
	.accordion-container__title.margin-bottom0.lh100.minus-margin {
		margin-bottom: 0;
	}

	.reviews-container__title:not(:has(+ .reviews-container__title-bold)) {
		margin-bottom: 24px;
	}
}

/* Purpose cards (location pages): a second, absolute copy of the card's title showed through its text. */
.purpose-item > .purpose-text.to-left:has(~ .purpose__link-block) {
	display: none;
}

/* Blog hub: below the desktop grid the source keeps its post list a swiper with no arrows, two cards in
   view and the rest out of reach; the posts stack in one column instead. */
@media screen and (max-width: 991px) {
	.blog__target-block .related-blogs.swiper-wrapper {
		flex-direction: column;
		gap: 24px;
		transform: none !important;
	}

	.blog__target-block .related-blogs > .blogs__post {
		width: 100% !important;
		margin-right: 0 !important;
	}
}

/* Rich-text tables on a phone: 28 px header cells overran their quarter of the row. */
@media screen and (max-width: 479px) {
	.blog-content.w-richtext .w-embed th {
		font-size: 15px;
		line-height: 1.2;
		overflow-wrap: anywhere;
	}
}

/* Google rating badge (Elfsight): on a phone a floating badge always lies over some text as the page
   scrolls, so it is a smaller one in flow, below the footer, where it covers nothing. None over the
   open menu at any width the burger shows (768, a phone turned to landscape), below. */
@media screen and (max-width: 767px) {
	.es-slide-in-position-container {
		position: static !important;
		justify-content: flex-start !important;
		padding: 8px 0 8px 15px !important;
		height: auto !important;
		width: auto !important;
	}

	.es-slide-in-position-container .es-slide-in-activate-pointer-events {
		transform: scale(0.7);
		transform-origin: left bottom;
	}
}

body:has(.header-bottom.header-bottom__open) .es-slide-in-position-container {
	display: none !important;
}

/* Footer on tablet and phone: the round chat button (about 60 px, 20 px off the corner) sat over the last links
   at the page's end; 80 px more under the footer's last row keep them clear of it. Desktop keeps the source's. */
@media screen and (max-width: 991px) {
	.footer {
		padding-bottom: 100px;
	}
}

/* Gallery: its hero is light, but below 1280 the source prints the header phone white on it. (The residential
   fence pages whose photo is light behind the number keep it white over their hero's dark wash, below.) */
@media screen and (max-width: 1279px) {
	.page-gallery .header-top__tel-text {
		color: #000;
	}
}

/* Two-line section titles: one h2 holds both lines, each a span in the dress of the h2 and the div the source
   prints them as. The h2 makes no box and passes on its parent's type, as the div had it; the first line takes
   the h2's own type. */
h2.heading-pair {
	display: contents;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

:where(.heading-pair > *) {
	display: block;
}

:where(.heading-pair > :first-child) {
	color: #2d393b;
	letter-spacing: 2.24px;
	text-transform: uppercase;
	font-size: 56px;
	font-weight: 700;
	line-height: 110%;
}

@media screen and (max-width: 991px) {
	:where(.heading-pair > :first-child) {
		font-size: 32px;
	}
}

@media screen and (max-width: 767px) {
	:where(.heading-pair > :first-child) {
		letter-spacing: 1.28px;
	}
}

/* The custom select's options take keyboard focus (main.js) and show it as the form's fields do. */
.custom-select .select-dropdown li:focus {
	outline: 2px solid #2d393b;
	outline-offset: -2px;
}

/* Badges that were SVGs fitted their raster into the box; their WebPs keep that box. */
.page-about .image-426,
.widget-image {
	object-fit: contain;
}

/* The source's 636/350 box stretched its 638×282 pattern drawings; they fit the box instead. */
.fence-icon {
	object-fit: contain;
}

/* WCAG AA over the textured beige: the brand's #f26300 reads 2.4 to 2.6:1 under the section titles; the shade
   the security headings already take reads 3:1 and more. Over the light, tree-printed heroes of FAQ and gallery
   one darker still. */
.legacy-container__title-bold,
.contact-us-container__title-bold,
.why-us-absolute__title > .bold {
	color: #d15600;
}

/* At 1440 that shade still reads 2.71:1 under the projects title and 2.82:1 on the orange promo line, from the
   darkest beige behind their glyphs; the same hue a step darker reads 3:1 and more. */
.fence-projects .quality-container__title-bold {
	color: #c04f00;
}

.cta-promo--orange-2 {
	color: #c55100;
}

/* The orange second line of the section titles over the light, flecked pattern (process accordion, why-us) read
   2.7:1; the same shade. */
.accordion .accordion-container__title > strong.bold,
.accordion .heading-pair strong.bold,
.why-us .quality-container__title > .quality-container__title-bold,
.why-us .heading-pair strong.accordion-container__title,
.why-us .heading-pair .hero-container__title-bold.orange {
	color: #d15600;
}

.page-faq .service-hero .orange.fs72,
.page-gallery .service-hero .orange.fs72 {
	color: #b54b00;
}

/* The blog's inline CTA: its button text, 14 px orange on beige, takes the AA shade of the article's links. */
.blog-content.w-richtext a.btn-orange:not(:hover):not(:active) {
	color: #ad4700;
}

/* Hero photos: white titles over light photos (and over the light slides of the hero's swiper) take a dark
   wash between photo and text, a lighter one on the home page. */
.home .hero > .hero-bg::after,
.page-cedar-fence .hero > .hero-bg::after,
.page-chain-link-fence .hero > .hero-bg::after,
.page-dog-fence .hero > .hero-bg::after,
.page-pool-fence .hero > .hero-bg::after,
.page-decorative-fencing .hero > .hero-bg::after,
.page-privacy-fence .hero > .hero-bg::after,
.page-vinyl-fence .hero > .hero-bg::after,
.page-aluminum-fence .hero > .hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	background-image: linear-gradient(rgb(0 0 0 / 60%), rgb(0 0 0 / 45%) 200px);
	pointer-events: none;
}

.home .hero > .hero-bg::after {
	background-image: none;
	background-color: rgb(0 0 0 / 22%);
}

/* A project's hero: its orange title over the photo's lighter patches; the same wash, lighter. The fence cost
   calculators' orange h1 over their photo takes a darker one. */
.single-project section.hero.service::after,
.page-vinyl-fence-cost-calculator section.hero.service::after,
.page-cedar-fence-cost-calculator section.hero.service::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgb(0 0 0 / 36%);
	pointer-events: none;
}

.page-vinyl-fence-cost-calculator section.hero.service::after,
.page-cedar-fence-cost-calculator section.hero.service::after {
	background-color: rgb(0 0 0 / 40%);
}

/* About: below 992 px the white title sits on the phone photo's white fence, dimmed to 65% by the source:
   3.01:1. A step darker reads 3.4:1 and more; the desktop photo already reads 3.6:1. */
@media screen and (max-width: 991px) {
	.page-about .hero-bg__swiper.h100.hp {
		filter: brightness(60%);
	}
}

/* Gallery: its h1 over the hero's printed trees; a white veil between them pales the darker trees. */
.page-gallery .service-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgb(255 255 255 / 40%);
	pointer-events: none;
}

/* Tip cards: their beige titles sit on the photo's lower edge; a dark gradient rises behind them. A hovered card
   turns flat beige with dark text (sections/60349131.css), so the gradient goes with it. */
@media screen and (min-width: 992px) {
	.tips-item .tip-content {
		background-image: linear-gradient(to top, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 50%) 40%, rgb(0 0 0 / 0%) 75%);
	}

	.tips-item:hover .tip-content {
		background-image: none;
	}
}

/* Home hero's Google rating: the review count, white at 50% over the photo, read 2.2:1; whole white reads
   4.6:1 and more over every slide. */
.hero .elfsight-inline .es-badge-reviews-count {
	color: #fff !important;
	text-shadow: 0 0 2px rgb(0 0 0 / 60%);
}

/* Projects: the cards' white titles over a light patch of the photo (2.3:1 on a phone, at 1440 too); a dark
   wash rises behind them. */
.fences-item .text-block-4 {
	isolation: isolate;
}

.fences-item .text-block-4::before {
	content: "";
	position: absolute;
	inset: -50px -10px -10px;
	z-index: -1;
	background-image: linear-gradient(to top, rgb(0 0 0 / 40%), rgb(0 0 0 / 35%) 80px, rgb(0 0 0 / 0%));
	pointer-events: none;
}

/* Location pages: the form's orange title over the service-area map sits on a white panel, as the form does. */
.contact-us-container__right > h2.orange.title {
	background-color: #fff;
	padding: 16px 24px;
}

/* The 404 page: the source's own embed before its <main>, stacking the forest drawing under the block. */
.zstack {
	display: grid;
}

.zstack > * {
	grid-area: 1 / 1 / 1 / 1;
}

/* The 404 drawing's wrapper makes no box, so the drawing sits as the source places it. */
.heading-404 {
	display: contents;
}

/* The 404 and 410 pages' h1 in words, under the drawing: the site's 32px heading, centred like the block. */
._404-container ._404-container__title {
	margin-top: 32px;
	margin-bottom: 16px;
	text-align: center;
}

/* Temporary keyless map embed until the client's Maps key has billing: it fills the JS map's box. */
.locations-map__embed {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}