/*
Theme Name: Ninefold
Theme URI: https://ninefoldpest.com/
Author: Josh Castro
Author URI: https://threeringfocus.com/
Description: Custom WordPress theme for Ninefold.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: gordon
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* =====================================================
   DEFAULTS
   ===================================================== */
/* Box model reset  */
*,
*::before,
*::after {
    box-sizing: border-box; /* border & padding included inside box */
    margin: 0;
    padding: 0;
}
/* Root & body base */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%; /* stop iOS auto-zooming text */
}
body {
    min-height: 100vh;
    line-height: 1.5; /* comfortable reading rhythm, better than browser default ~1.2 */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
}
/* Media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%; /* prevents images breaking layout on small screens */
    height: auto;
}
/* Typography resets */
h1, h2, h3, h4, h5, h6 {
    font-weight: inherit; /* don't force bold until you set your own scale */
}
p, li {
    overflow-wrap: break-word; /* long words/URLs don't overflow containers */
	line-height: 1.8rem;
}
a {
    color: inherit;
    text-decoration: none;
	transition: color .4s ease-in-out, background-color .4s ease-in-out;
}
/* Lists */
li {
	list-style-position: inside;
}
ul li::marker,
ol li::marker{
  color: #9d1c1f;
}
/* Forms & buttons inherit fonts (Safari/Firefox don't by default) */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}
button {
    cursor: pointer;
    background: none;
    border: none;
	transition: color .4s ease-in-out, background-color .4s ease-in-out, border-color .4s ease-in-out;
}
/* Tables */
table {
    border-collapse: collapse;
    width: 100%;
}
/* Root variables — Ninefold brand palette */
:root {
    /* Backgrounds */
    --color-background: #f7f0e3;
    --color-background-dark: #000;
    /* Text */
    --color-text: #111111;
    --color-text-on-dark: #f7f0e3;
    /* Headings */
    --color-heading-secondary: #555555;
    /* Buttons */
    --color-button-bg: #f7f0e3;
    --color-button-text: #b22223;
    --color-button-border: #f7f0e3;
    --color-button-bg-hover: #b22223;
    --color-button-text-hover: #f7f0e3;
    --color-button-red-bg: #b22223;
    --color-button-red-text: #f7f0e3;
    --color-button-red-border: #b22223;
    --color-button-red-bg-hover: #f7f0e3;
    --color-button-red-text-hover: #b22223;
    /* Typography */
    --font-base: univers-next-pro, sans-serif;
    --font-heading: univers-next-pro-condensed, sans-serif;
}
/* Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* Focus visibility (don't remove outlines without replacing them) */
:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
/* Screen-reader-only text: visually hidden but still announced by
   assistive tech. Reused for skip links, form labels, etc. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
/* When a screen-reader-text element receives focus (e.g. the skip
   link is tabbed to), reveal it visibly so sighted keyboard users
   can see and use it too. */
.screen-reader-text:focus {
    background-color: var(--color-background, #f1f1f1);
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: var(--color-heading-primary, #1a1a1a);
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}
/* Background images cover and are responsive */
.bg-cover {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* =====================================================
   BASE COMPONENTS
   ===================================================== */
body {
	font-size: 15px;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-base);
	background-image: url("images/global/bg-main.jpg");
	background-repeat: repeat;
	background-position: center;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
	font-weight: 900;
	text-transform: uppercase;
}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
    color: var(--color-heading-secondary);
	font-weight: 400;
	font-size: .52em;
}
/* Standard (light-context) button — solid fill by default, outlines on hover */
.button,
button[type="submit"],
input[type="submit"] {
    display: inline-block;
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    border: 2px solid var(--color-button-border);
    font-family: var(--font-heading);
    text-transform: uppercase;
    padding: .5em 1em;
    border-radius: 15px;
    font-weight: 500;
	font-size: 1.1em;
	line-height: normal;
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}
.button:hover,
.button:focus,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: var(--color-button-bg-hover);
    color: var(--color-button-text-hover);
}
.button-red{
    background-color: var(--color-button-red-bg);
    color: var(--color-button-red-text);
    border: 2px solid var(--color-button-red-border);
}
.button-red:hover,
.button-red:focus {
    background-color: var(--color-button-red-bg-hover);
    color: var(--color-button-red-text-hover);
}
/* Apply to any section with a dark background (e.g. footer, CTA banners)
   so text/links automatically use the light-on-dark palette. */
.has-dark-background {
    color: var(--color-text-on-dark);
}
.has-dark-background :is(h1, h2, h3, h4, h5, h6),
.has-dark-background :is(h1, h2, h3, h4, h5, h6) span {
    color: var(--color-text-on-dark);
}

/* =====================================================
   TYPE SCALE
   ===================================================== */
h1 { font-size: 4rem; }
h2 { font-size: 3rem; }
h3 { font-size: 2.5rem; }
h4 { font-size: 2rem; }
h5 { font-size: 1.5rem; }
h6 { font-size: 1.25rem; }

/* =====================================================
   TYPOGRAPHY SPACING (vertical rhythm)
   ===================================================== */
h1, h2, h3, h4, h5, h6 {
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
	line-height: 1;
	letter-spacing: .05em;
}
p, ul, ol, blockquote, table, figure {
    margin-bottom: 1.25rem;
}
/* Remove the extra top margin when a heading is the very first
   element in a content block (e.g. right after opening a card,
   section, or .entry-content) — avoids unwanted gap at the top */
h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child,
p:first-child {
    margin-top: 0;
}
/* Remove trailing margin on the last element inside a content block. */
.entry-content > :last-child,
.entry-content-2 > :last-child,
.pr-col > :last-child{
    margin-bottom: 0;
}

/* =====================================================
   SITE HEADER
   ===================================================== */
.site-header {
	width: 100%;
	max-width: 1920px;
	margin: auto;
    padding: 30px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-heading);
}
.site-header-ad {
	width: 100%;
	max-width: 1920px;
	margin: auto;
    padding: 30px 20px;
	display: grid;
	grid-template-columns: 1fr auto 1fr; /* empty left column balances the phone column on the right, keeping the logo truly centered regardless of phone text width */
	align-items: center;
	gap: 20px;
	font-family: var(--font-heading);
}
.site-header-ad .site-logo {
	grid-column: 2;
	justify-self: center;
}
.site-header-ad p {
	grid-column: 3;
	justify-self: end;
	font-size: 1.2rem;
	font-weight: 500;
	text-align: right;
	margin: 0;
}
.site-header-ad p a:hover {
	color: #b22223;
}
.site-header-ad p .bullet {
	color: #b22223;
}
.site-logo {
	display: inline-block;
}
.site-logo img {
    display: block;
    max-height: 74px;
    width: auto;
}
.head-right {
	font-size: 1.2rem;
}
.head-right p {
	font-weight: 500;
	text-align: right;
}
.head-right p a:hover {
	color: #b22223;
}
.head-right span {
	color: #b22223;
}
.nav-wrap {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}
.head-button {
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
	padding: 13px 20px;
    font-weight: inherit;
    font-size: inherit;
	line-height: 1em;
}
/*
== NAVIGATION ==*/
@media screen and (min-width: 1000px) {
	.sfm-navicon-button {display: none;}
}
@media screen and (max-width: 1000px) {
	.nav-wrap {display: none;}
}
.navBox {
	padding: 0;
}
/* 1. Container & Main List */
#submenu {
    width: 100%;
    margin: 0;
}
#submenu ul {
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: flex-end;
}
.sfmenu li:first-child {
	border-radius: 15px 0 0 15px;
}
.sfmenu li:last-child {
	border-radius: 0 30px 30px 0;
}
.sfmenu li {
	color: #000;
	background-color: rgba(0, 0, 0, 0.1);
}
/* 2. Top Level List Items */
#submenu li {
    position: relative;
    margin: 0;
    padding: 0;
	line-height: 1em;
	text-transform: uppercase;
}
#submenu li:hover,
#submenu .current-menu-item {
	background-color: #b22223;
	transition: background-color .4s ease-in-out;
}
#submenu li:last-child,
#submenu li ul li {
	border: none;
}
#submenu li a {
    display: block;
    text-decoration: none;
    padding: 15px 12px;
}
#submenu li a:hover,
#submenu li:hover > a,
#submenu .current-menu-item > a{
    color: #ffffff;
}
/* 3. Sub-Menus (Level 2 Dropdown) */
#submenu li ul {
    position: absolute;
    top: 100%;
    left: -999em;
    display: block;
    width: 188px;
    padding: 0;
    z-index: 9999;
	background-color: rgba(0, 0, 0, 0.4);
    border-radius: 0;
	color: #ffffff;
}
.sub-menu li:first-child {
    border-radius: unset;
}
.sub-menu li:last-child {
    border-radius: unset;
}
.sub-menu li {
	background-color: unset;
}
/* 4. Deep Nesting (Level 3+ Fly-outs) */
#submenu li ul ul {
    top: 0;
    left: -999em;
    margin-left: 0;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 0;
}
/* 5. Hover Logic (The Bridge) */
#submenu li:hover > ul {
    left: 0;
}
#submenu li ul li:hover > ul {
    left: 100%;
}
/* 6. Sub-Menu Styling */
#submenu li li {
    width: 100%;
}
#submenu li li a {
    padding: 8px 15px;
    font-size: 0.9em;
    line-height: 1.4;
	color: #fff;
}
/* 7. Hide "Grandchildren" while hovering Parent */
#submenu li:hover ul ul,
#submenu li:hover ul ul ul {
    left: -999em;
}

/* =====================================================
   FRONT PAGE
   ===================================================== */
.hero-wrap {
	width: 100%;
	max-width: 1920px;
	margin: auto;
	padding: 0 20px;
	display: flex;
	gap: 14px;
}
.hero-main {
	position: relative;
	overflow: hidden;
	min-height: 600px;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
	padding: 40px;
	display: flex;
	align-items: flex-end;
	flex: 2;
}
.hero-video-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top right;
	z-index: 0;
}
.hero-text {
	position: relative;
	z-index: 2;
}
.hero-text p {
	margin: 2em 0;
}
.hero-column {
	flex: 1;
	display: flex;
	gap: 14px;
	flex-direction: column;
}
.hero-block {
	min-height: 500px;
	border-top-right-radius: 15px;
	padding: 40px;
	background-color: var(--color-button-red-bg);
	background-image:url("images/global/nf-corner.png"), url("images/global/bg-red.jpg");
	background-repeat: no-repeat, repeat;
	background-position: bottom left, center;
	display: flex;
    align-items: center;
	position: relative;
}
.hero-video-box {
	min-height: 340px;
	border-bottom-right-radius: 15px;
	background-image: url("images/home/video-poster.jpg");
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.box-shadow {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 1;
	background-color: #000;
	opacity: 0;
	transition: opacity .4s ease-in-out;
}
.hero-video-box:hover .box-shadow {
	opacity: .3;
}
.hero-video-box .fa-youtube {
	font-size: 4em;
	position: relative;
	z-index: 10;
	color: rgba(247,240,227,.7);
	transition: color .4s ease-in-out;
}
.hero-video-box .fa-youtube:hover {
	font-size: 4em;
	color: rgba(247,240,227,1);
}
.ninex-bg {
	background-image: url("images/global/bg-icon-9x.png");
	background-repeat: no-repeat;
	background-position: right top;
}
.front-page-one {
    width: 100%;
    padding: 90px 20px 1px;
}
.fp1-text {
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
}
.fp1-wrap {
	width: 100%;
	max-width: 1440px;
	margin: 60px auto 0 auto;
	display: flex;
    gap: 40px;
	justify-content: space-evenly;
    flex-wrap: wrap;
}
.fp1-item {
	width: calc(50% - 20px);
    position: relative;
    margin-bottom: 20px;
}
/* Blurred ellipse, centered below each box. */
.bottom-shadow {
	position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
    width: 70%;
    height: 12px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    filter: blur(12px);
    z-index: 0;
}
.fp1-box {
	position: relative;
	z-index: 1; /* guarantees this paints above .fp1-shadow, regardless of flex stacking quirks */
	width: 100%;
	border-radius: 15px;
	min-height: 300px;
	padding: 40px 30px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
}
.fp1-bg1 {
	background-image: url("images/home/bg-01.jpg");
} 
.fp1-bg2 {
	background-image: url("images/home/bg-02.jpg");
}
.fp1-box h3 {
	font-weight: 500;
}
.front-page-two {
	width: 100%;
    padding: 100px 20px 1px 20px;
	position: relative;
}
.wasp {
	width: 280px;
	height: 195px;
	background-image: url("images/home/wasp.png");
	position: absolute;
	top: 0;
	left: 8vw;
	z-index: 0;
}
.fp2-text {
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
}
.fp2-text img {
	margin: 0 auto;
}
.fp2-text h2 {
	margin-top: 10px;
}
.fp2-wrap {
	width: 100%;
	max-width: 1440px;
	margin: 70px auto 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 40px;
}
.fp2-box {
	width: 100%;
	max-width: 420px;
	border-radius: 15px;
	padding: 10px 30px;
	background-color: var(--color-button-red-bg);
	background-image: url("images/global/bg-red.jpg");
	background-repeat: repeat;
	background-size: auto;
	background-position: 0 0;
}
/* Each box shows a different third of the same 300%-wide image —
   0%, 50%, 100% — so together they read as one continuous image
   spanning all three boxes. This only works because all three boxes
   share the same width (see .fp2-box above); if that ever changes,
   this technique breaks. 
.fp2-box:nth-child(2) {
	background-position: 50% bottom, 0 0;
}
.fp2-box:nth-child(3) {
	background-position: 100% bottom, 0 0;
}*/
.front-page-three {
	width: 100%;
    padding: 100px 20px 60px 20px;
}
.fp3-wrap {
	max-width: 1780px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}
.fp3w-v2,
.fp3w-v3 {
	margin-top: 80px;
}
.fp3-text {
	width: 100%;
	max-width: 680px;
}
.fp3-item {
	width: 100%;
	max-width: 960px;
	position: relative;
}
.fp3-image {
	width: 100%;
	min-height: 600px;
	border-radius: 15px;
	position: relative;
	z-index: 1;
}
.fp3-video {
	border-radius: 15px;
	overflow: hidden; /* clips the iframe to match fp3-image's rounded corners */
	position: relative;
	z-index: 1;
}
.front-page-four {
	width: 100%;
    padding: 140px 0px 200px 20px;
}
.fp4-wrap {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.fp4-col {
	width: 100%;
	max-width: 860px;
	margin-right: -80px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex: 1;
}
.fp4-text {
	width: 100%;
	max-width: 680px;
}
.fp4-image {
	width: 100%;
    max-width: 1300px;
    flex: 1.25;
}
.front-page-five {
	width: 100%;
    padding: 1px 20px;
}
.fp5-box {
	width: 100%;
    padding: 70px 20px;
	background-image: url("images/home/bg-05.jpg");
	border-radius: 15px;
	text-align: center;
}
.fp5-text {
	max-width: 1200px;
	margin: 0 auto;
}
/* TESTIMONIALS */
.testimonials {
	width: 100%;
	max-width: 1280px;
	margin: 50px auto 0 auto;
	position: relative;
	overflow: hidden;
	min-height: 240px; /* fallback if JS hasn't measured/set the real height yet (or never runs) */
	transition: height 0.5s ease-in-out;
}
.tc3-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10; /* above .tc-role-center's z-index: 3 */
	background: none;
	border: none;
	color: #ffffff;
	font-size: 1.5rem;
	padding: 10px;
	cursor: pointer;
	transition: opacity 0.3s ease-in-out;
}
.tc3-arrow:hover,
.tc3-arrow:focus-visible {
	opacity: 0.7;
}
.tc3-prev {
	left: -10px;
}
.tc3-next {
	right: -10px;
}
.testimonial-item {
	position: absolute;
	top: 0;
	left: 50%;
	width: 100%;
	max-width: 660px;
	opacity: 0;
	z-index: 0;
	transform: translateX(45%) scale(0.55); /* default/fallback position for any item not currently in an active role */
	transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
	pointer-events: none;
}
/* No-JS fallback: show the first testimonial as a plain static card.
   Placed before the .tc-role-* rules so those take over once JS runs,
   since equal-specificity rules resolve in source order. */
.testimonial-item:first-child {
	opacity: 1;
	z-index: 3;
	transform: translateX(-50%) scale(1);
	pointer-events: auto;
}
.testimonial-item.tc-role-center {
	transform: translateX(-50%) scale(1);
	opacity: 1;
	z-index: 3;
	pointer-events: auto;
}
.testimonial-item.tc-role-left {
	transform: translateX(-105%) scale(0.75);
	opacity: 0.7;
	z-index: 2;
}
.testimonial-item.tc-role-right {
	transform: translateX(5%) scale(0.75);
	opacity: 0.7;
	z-index: 2;
}
.testimonial-item.tc-role-far-left {
	transform: translateX(-160%) scale(0.55);
	opacity: 0;
	z-index: 1;
}
.testimonial-item.tc-role-far-right {
	transform: translateX(60%) scale(0.55);
	opacity: 0;
	z-index: 1;
}
/* Mobile: only the center testimonial is shown at all — left/right/far
   roles are faded out entirely rather than peeking in from the sides,
   since there isn't enough width to make the scaled side-cards read as
   intentional rather than just cramped. */
@media (max-width: 700px) {
	.testimonial-item.tc-role-left,
	.testimonial-item.tc-role-right,
	.testimonial-item.tc-role-far-left,
	.testimonial-item.tc-role-far-right {
		opacity: 0;
	}
}
.testimonial {
	text-align: center;
	border-radius: 15px;
	padding: 20px 30px;
	background-color: var(--color-button-red-bg);
	background-image: url("images/global/bg-red.jpg");
	position: relative;
	z-index: 1;
}
.testimonial img {
	margin: 0 auto;
}
.testimonial p {
	margin: 20px 0 0 0;
}
.bs-v2 {
	bottom: -20px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.75);
    filter: blur(20px);
}
.front-page-six {
	width: 100%;
    padding: 130px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}
.fp6-text {
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
}
.fp6-box {
	width: 100%;
	max-width: 940px;
	border-radius: 15px;
	padding: 30px;
	background-color: var(--color-button-red-bg);
	background-image:url("images/global/nf-corner.png"), url("images/global/bg-red.jpg");
	background-repeat: no-repeat, repeat;
	background-position: bottom left, center;
}


/* =====================================================
   STANDARD PAGES
   ===================================================== */
.entry-thumbnail {
	position: relative;
	width: calc(100% - 40px); /* 20px gutter per side via width + centering, not padding */
	max-width: 1920px;
    margin: 0 auto;
	max-height: 520px;
	border-radius: 15px;
	overflow: hidden;
}
.entry-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
article {
	width: 100%;
	max-width: 1920px;
    margin: 0 auto;
	padding: 20px 20px;
}
.entry-content {
	width: 100%;
	max-width: 1060px;
    margin: 60px auto 80px auto;
}

/* =====================================================
   BLOG ARCHIVE / CARD GRID
   ===================================================== */
.blog-grid {
	width: 100%;
	max-width: 1400px;
	margin: 60px auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
.blog-card {
	display: flex;
	flex-direction: column;
}
.blog-card-thumb {
	display: block;
	margin-bottom: 20px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 15px;
}
.blog-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 15px;
}
.blog-card-content {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.blog-card .entry-title {
	margin-top: 0;
	font-size: 1.5em;
}
.blog-card .entry-excerpt {
	flex: 1; /* pushes the button to align at the same height across cards with uneven excerpt lengths */
	margin-bottom: 20px;
}
.blog-card .button {
	align-self: flex-start;
}
.blog-pagination {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto 80px auto;
	padding: 0 20px;
	text-align: center;
}
@media (max-width: 900px) {
	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.blog-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}
.entry-content h2 {
    color: var(--color-heading-secondary);
	font-weight: 400;
	font-size: 3rem;
}
.breadcrumbs {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
}
.bc-line {
	height: 1px;
	flex: 1; /* fills all remaining space, however long/short the nav ends up being */
	background-color: #6b6b6b;
}
.breadcrumb-nav {
	flex: 0 1 auto; /* was flex-shrink: 0 — now allowed to shrink so wrapping can kick in */
	min-width: 0; /* overrides flexbox's default min-width:auto, which otherwise blocks shrinking below content's natural width */
}
.breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	row-gap: 6px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.breadcrumb-list li {
	color: #6b6b6b;
	font-family: univers-next-pro-condensed, sans-serif;
	text-transform: uppercase;
	font-weight: 500;
}
.breadcrumb-list li:not(:last-child)::after {
	content: ">";
	margin: 0 8px;
	color: #6b6b6b;
}
.breadcrumb-list a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease-in-out;
}
.breadcrumb-list a:hover {
	color: #000000;
}
.breadcrumb-list li[aria-current="page"] {
	color: #000000; /* current page is always black, never a link */
}
/* WP-PAGINATION*/
.wp-paginate span.current {
    background: var(--color-button-red-bg);
    border: 1px solid var(--color-button-red-bg);
}
/* WORDPRESS ADJUSTMENTS */
h3.wp-block-accordion-heading {
    margin: 0;
	letter-spacing: normal;
}
.wp-block-accordion-heading span{
    font-size: 1.1rem;
    font-weight: 600;
    font-family: univers-next-pro, sans-serif;
}
.wp-block-accordion {
    border-bottom: 1px solid #000;
}
/*
.entry-content > :last-child, .entry-content-2 > :last-child, .pr-col > :last-child {
    margin-bottom: 0;
    border-bottom: 1px solid #000;
}*/

/* =====================================================
   TEMPLATE PAGES
   ===================================================== */

[class*="pad-side-zero"].pad-side-zero {
	padding-left: 0;
	padding-right: 0;
}
.front-page h1 { font-size: 5.5rem; }
.front-page h2 { font-size: 4.5rem; }
.front-page h3, .front-page-two h3 { font-size: 3.5rem; }
.front-page h4 { font-size: 2.5rem; }
.centerHead {
	width: 100%;
	text-align: center;
}
.location-one {
	width: 100%;
    padding: 100px 0px 60px 0px;
}
.loc1-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}
.loc1w-v2 {
	margin-top: 80px;
}
.loc1-text {
	width: 100%;
	max-width: 680px;
}
.loc1-item {
	width: 100%;
	max-width: 960px;
	position: relative;
}
.loc1-image {
	width: 100%;
	min-height: 600px;
	border-radius: 15px;
	position: relative;
	z-index: 1;
}
.location-two {
	width: 100%;
    padding: 100px 0px 1px 0px;
}
.loc2-box {
	background-image: url("images/pages/bg-loc-01.jpg");
	border-radius: 15px;
	padding: 80px 20px 100px 20px;
}
.loc2-text {
	width: 100%;
	max-width: 1040px;
	margin: auto;
	text-align: center;
}
.pests-wrap {
	width: 100%;
	max-width: 1660px;
	margin: 60px auto 0 auto;
	display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.pest-box {
	display: flex;
	align-items: center;
	gap: 20px;
	width: calc(20% - 30px);
}
.pest-box-link {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
	color: inherit;
	text-decoration: none;
}
.pest-box-link:hover h3,
.pest-box-link:focus h3 {
	color: var(--color-button-red-bg);
	transition: color .4s ease-in-out;
}
.pest-icon {
	width: 85px;
	height: 85px;
	flex: 0 0 auto;
	border: 2px solid #fff;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pest-box h3 {
	font-family: univers-next-pro-condensed, sans-serif;
	font-weight: 500;
	font-style: italic;
	flex: 1;
	margin: 0;
	font-size: 1.5em;
}
.location-three {
	width: 100%;
    padding: 60px 0px 80px 0px;
}
.loc3-text {
	width: 100%;
	max-width: 1040px;
	margin: auto;
	text-align: center;
}
.loc3-wrap {
	width: 100%;
	max-width: 1440px;
	margin: 70px auto 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 40px;
}
.loc3-box {
	width: 100%;
	max-width: 420px;
	border-radius: 15px;
	padding: 30px 30px 10px 30px;
	background-color: var(--color-button-red-bg);
	background-image: url("images/global/bg-red.jpg");
	background-repeat: repeat;
	background-size: auto;
	background-position: 0 0;
}
/*
.loc3-box:nth-child(2) {
	background-position: 50% bottom, 0 0;
}
.loc3-box:nth-child(3) {
	background-position: 100% bottom, 0 0;
}*/
.loc3-wrap h3 {
	font-weight: 300;
	margin-top: 2rem;
}
.loc3-topper {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.loc3-line {
	width: calc(50% - 45px);
	height: 1px;
	background-color: #fff;
}
.location-base {
	width: 100%;
	margin: 0px auto;
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
.lb-content,
.lb-map {
	border-radius: 15px;
	background-color: #000;
}
.lb-content {
	width: 40%;
	padding: 20px 40px;
}
.lb-map {
	width: 60%;
	min-height: 300px;
	position: relative;
}
.lb-map .map-container {
	position: absolute;
	inset: 0;
	height: 100%; /* overrides the base rule's height: 0 from the aspect-ratio hack */
	padding: 0;
}
/* Main Location Template */
.main-loc-one {
	width: 100%;
    padding: 100px 0px 60px 0px;
}
.main-loc-one h1 {
	width: 100%;
    text-align: center;
    margin: 0 0 80px 0;
}
.center-button {
	width: 100%;
	text-align: center;
	margin-top: 50px;
}
/* Google Ad Page Template */
.ppc-section-one {
	width: 100%;
    padding: 20px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}
.ppc1-text {
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
}
.ppc1-box {
	width: 100%;
	max-width: 940px;
	border-radius: 15px;
	padding: 30px;
	color: var(--color-text-on-dark);
	background-color: var(--color-button-red-bg);
	background-image:url("images/global/nf-corner.png"), url("images/global/bg-red.jpg");
	background-repeat: no-repeat, repeat;
	background-position: bottom left, center;
}
.ppc1-box h2 {
	font-weight: 500;
}
.ppc-section-two {
	width: 100%;
    padding: 140px 0px 120px 0px;
}
.ppc-section-two h2 {
	width: 100%;
	text-align: center;
}
.ppc2-wrap {
	width: 100%;
	max-width: 1150px;
	margin: 80px auto 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}
.ppc2-wrap h2 {
	font-size: 4rem;
}
.ppc2-row {
	width: calc(50% - 10px);
	margin-bottom: 20px;
}
.ppc2-item {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ppc2-item i {
	font-size: 1.75rem;
}
.ppc2-item span {
	color: var(--color-button-text);
	font-family: var(--font-heading);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 1.25rem;
}
.ppc-section-four {
	margin-top: 80px;
}
.ppc-section-five {
	width: 100%;
    padding: 100px 0px 60px 0px;
}
.ppc5-wrap {
	max-width: 1780px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}
.ppc5-text {
	width: 100%;
	max-width: 680px;
}
.ppc5-text h2 {
	margin-bottom: 40px;
	font-size: 3.5em;
}
.ppc5-text .button {
	margin-top: 20px;
}
.ppc5-item {
	width: 100%;
	max-width: 960px;
	position: relative;
}
.ppc5-image {
	width: 100%;
	min-height: 600px;
	border-radius: 15px;
	position: relative;
	z-index: 1;
}
.ppc-section-six {
	width: 100%;
	max-width: 1400px;
	margin: 100px auto;
}
.ppc-section-six h2 {
	text-align: center;
	margin-bottom: 60px;
	font-size: 3.5em;
}
.ppc6-box {
	padding: 50px;
	border-radius: 15px;
    border: 2px solid var(--color-button-red-border);
}
.ppc6-box .wp-block-accordion-heading span {
    color: var(--color-button-text);
	text-transform: capitalize;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 2rem;
}
.ppc6-box .wp-block-accordion-item>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	color: black;
	font-size: 1.75rem;
}
.ppc6-box .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
    text-decoration: none;
}
.ppc6-box .wp-block-accordion {
    border-bottom: 1px solid #000;
    padding: 10px 0;
}
.ppc6-box .wp-block-accordion:last-child {
	border-bottom: none;
}

/* =====================================================
   GRAVITY FORMS
   ===================================================== */
.fp6-box .gform-theme--foundation .gform_fields,
.ppc1-box .gform-theme--foundation .gform_fields {
    row-gap: 10px;
}
.fp6-box .gfield_label,
.fp6-box .gfield_required,
.fp6-box label,
.ppc1-box .gfield_label,
.ppc1-box .gfield_required,
.ppc1-box label {
	color: #fff !important;
}
.fp6-box input,
.fp6-box textarea,
.fp6-box select,
.ppc1-box input,
.ppc1-box textarea,
.ppc1-box select {
	border: 1px solid var(--color-button-border) !important;
	background-color: rgba(247,240,227,.25) !important;
	color: var(--color-text-on-dark) !important;
}
.fp6-box input::placeholder,
.fp6-box select::placeholder,
.ppc1-box input::placeholder,
.ppc1-box select::placeholder {
	color: var(--color-text-on-dark) !important;
}
.fp6-box .gform_button,
.ppc1-box .gform_button {
    background-color: var(--color-button-bg) !important;
    color: var(--color-button-text) !important;
    border: 2px solid var(--color-button-border) !important;
    font-family: var(--font-heading) !important;
    text-transform: uppercase !important;
    padding: .5em 1em !important;
    border-radius: 15px !important;
    font-weight: 500 !important;
	font-size: 1.1em !important;
	line-height: normal !important;
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out !important;
}
.fp6-box .gform_button:hover,
.fp6-box .gform_button:focus,
.ppc1-box .gform_button:hover,
.ppc1-box .gform_button:focus {
    background-color: var(--color-button-bg-hover) !important;
	color: var(--color-button-text-hover) !important;
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
	padding: 55px 20px 70px 20px;
	text-transform: uppercase;
	text-align: center;
	background-color: #010101;
	font-size: 1.1em;
}
.site-footer p {
	margin: 0;
}
.site-footer a:hover {
	color: var(--color-button-red-text-hover);
}
.logo-foot {
	max-width: 254px;
	margin: 0 auto 50px auto;
}
.footer-navigation {
	list-style: none;	
}
.footer-navigation ul {
	margin: 30px 0;
}
.footer-navigation li {
	display: inline-block;
	border-right: 1px solid #f7f0e3;
	padding: 0px 15px;
	line-height: 1em;
}
.footer-navigation li:last-child {
	border-right: none;
}
#attribution {
	font-size: .8em;
}

/* =====================================================
   RESPONSIVE ELEMENTS
   ===================================================== */
.response img {
    width: 100%;
    height: auto;
    display: block;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.map-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
	border-radius: 15px;
}
.map-container iframe, .map-container object, .map-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* =====================================================
   VIDEO LIGHTBOX
   ===================================================== */
.video-lightbox {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-in-out;
}
.video-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}
.video-lightbox-inner {
	width: 100%;
	max-width: 960px;
	position: relative;
}
.video-lightbox-close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	color: #fff;
	font-size: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.video-lightbox-close:hover {
	color: #b22223;
}
/* .video-container (aspect-ratio box) is already defined above under
   RESPONSIVE ELEMENTS — reused here for the embedded iframe itself. */

/* =====================================================
   PAGE BREAKS
   ===================================================== */
@media (max-width: 1400px) {
	.pest-box {width: calc(25% - 30px);}
}
@media (max-width: 1300px) {
}
@media (max-width: 1200px) {
}
@media (max-width: 1100px) {
	.hero-wrap, .location-base, .ppc-section-one {flex-direction: column;}
	.hero-main {border-radius: 15px 15px 0 0;}
	.hero-column {flex-direction: row;}
	.hero-block {width: 100%; border-radius: 0 0 0 15px;}
	.hero-video {width: 100%; border-radius: 0 0 15px 0;}
	.pest-box {width: calc(33.33% - 30px);}
	.lb-content {width: 100%;}
	.lb-map {width: 100%; height: 400px;}
	.ppc-section-one {gap: 20px;}
}
@media (max-width: 1000px) {
	.site-header {padding: 20px 94px 20px 20px}
	.sfm-navicon-button {right: 20px !important;}
	.head-right p {margin: 0;}
}
@media (max-width: 900px) {
	.front-page-three {padding: 1px 20px;}
	.fp3-wrap, .loc1-wrap {flex-direction: column-reverse;}
	.fp3-text, .loc1-text {margin-top: 30px;}
	.fp3w-v2, .loc1w-v2, .ppc5-wrap, .front-page-six {flex-direction: column;}
	.front-page-four {padding: 150px 0px;}
	.fp4-wrap {flex-direction: column-reverse;}
	.fp4-col {margin: 30px auto 0 auto; padding: 0 20px; justify-content: center; align-items: center;}
	.pest-box {width: calc(50% - 30px);}
	.ppc-section-two h2 {text-align: left;}
	.ppc2-row {width: 100%;}
}
@media (max-width: 800px) {
	.fp2-wrap, .loc3-wrap {flex-direction: column;}
	.fp2-box, .loc3-box {max-width: 100%; background-image: url(images/global/bg-red.jpg); background-repeat: repeat; background-size: auto; background-position: center;}
	.loc3-box, .fp6-box, .lb-content {padding-right: 20px; padding-left: 20px;}
	.site-header-ad {grid-template-columns: auto 1fr;}
	.site-header-ad .site-logo {grid-column: 1; justify-self: start;}
	.site-header-ad p {grid-column: 2; justify-self: end;}
	.ppc6-box {padding: 20px;}
}
@media (max-width: 700px) {
	h1, .front-page h1, .ppc2-wrap h2 { font-size: 2.5rem; }
	h2, .front-page h2, .front-page h3, .front-page-two h3, .ppc5-text h2, .ppc-section-six h2 { font-size: 2rem; }
	h3 { font-size: 1.75rem; }
	h4, .ppc6-box .wp-block-accordion-heading span { font-size: 1.5rem; }
	h5 { font-size: 1.25rem; }
	h6 { font-size: 1rem; }
	
	.hero-column,.fp1-wrap {flex-direction: column;}
	.hero-block {border-radius: 0;}
	.hero-video {border-radius: 0 0 15px 15px;}
	.fp1-item {width: 100%;}
	.fp1-text {margin: 0 auto;}
	.fp1-box {padding: 30px 20px;}
	.fp2-box {padding: 10px 20px;}
	.wasp {width: 200px; height: 140px; top: -30px; left: 0px;}
	.fp3-image, .ppc5-image { min-height: 300px;}
	.main-loc-one {padding: 60px 0px 30px 0px;}
}
@media (max-width: 600px) {
	.head-right {display: none;}
	.hero-main, .hero-block {min-height: 400px; padding: 40px 20px;}
	.pest-box {width: 100%;}
	.ppc1-box {padding: 30px 20px;}
}
@media (max-width: 500px) {
	.site-header-ad p .phone-extra {
		display: none;
	}
}

/* =====================================================
   GOOGLE AD PAGE TEMPLATE
   ===================================================== */
/* Belt-and-suspenders: Superfly Menu's assets are also dequeued in
   functions.php, but this guarantees its sidebar/trigger button stay
   hidden even if the plugin echoes markup independent of that. */
.page-template-page-google-ad #sfm-sidebar,
.page-template-page-google-ad .sfm-rollback,
.page-template-page-google-ad .sfm-navicon-button {
	display: none !important;
}