/* =========================================================
   Pest Control Network — Design Tokens
   Colors locked to the brand logo (navy / orange / white).
   Change values here to restyle the entire site from one place.
   ========================================================= */
:root {
	--pcn-navy-900: #0B2545;
	--pcn-navy-800: #133A6B;
	--pcn-orange-600: #F47920;
	--pcn-orange-700: #D9650F;
	--pcn-white: #FFFFFF;
	--pcn-gray-50: #F7F8FA;
	--pcn-gray-100: #EEF1F5;
	--pcn-gray-200: #E3E7ED;
	--pcn-gray-600: #5B6470;
	--pcn-success: #1F8A4C;

	--pcn-font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
	--pcn-font-body: 'Inter', system-ui, -apple-system, sans-serif;

	--pcn-radius-sm: 6px;
	--pcn-radius-md: 12px;
	--pcn-shadow-card: 0 2px 16px rgba(11, 37, 69, 0.08);
	--pcn-container-width: 1180px;
}

/* Font loading — system fallbacks keep this fast even if the CDN is briefly unavailable. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700;800&display=swap');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--pcn-font-body);
	color: var(--pcn-navy-900);
	background: var(--pcn-white);
	line-height: 1.6;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--pcn-font-heading);
	color: var(--pcn-navy-900);
	line-height: 1.25;
	margin: 0 0 0.5em;
	overflow-wrap: break-word;
	word-break: break-word;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0 0 1em; color: var(--pcn-gray-600); }
a { color: var(--pcn-orange-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
ul { padding-left: 1.2em; }

.pcn-container {
	max-width: var(--pcn-container-width);
	margin: 0 auto;
	padding: 0 20px;
}

.pcn-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--pcn-navy-900);
	color: #fff;
	padding: 10px 16px;
	z-index: 1000;
}
.pcn-skip-link:focus { left: 10px; top: 10px; }

/* Buttons */
.pcn-btn {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	min-height: 44px;
	gap: 6px;
	padding: 12px 22px;
	border-radius: var(--pcn-radius-sm);
	font-weight: 600;
	font-size: 0.95rem;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.15s ease, background 0.15s ease;
}
.pcn-btn:hover { text-decoration: none; transform: translateY(-1px); }
.pcn-btn-primary { background: var(--pcn-orange-600); color: #fff; }
.pcn-btn-primary:hover { background: var(--pcn-orange-700); color: #fff; }
/* Secondary action buttons (Book Appointment, Get a Quote, header phone button):
   a bordered white pill that reads clearly on every background used on this site —
   white header, navy hero, orange final-CTA sections — without the contrast issues
   a solid-color button runs into when it happens to match its background. */
.pcn-btn-ghost,
.pcn-btn-secondary,
.pcn-btn-white,
.pcn-btn-outline-white,
.pcn-btn-outline-orange {
	background: #fff;
	border-color: var(--pcn-navy-900);
	color: var(--pcn-navy-900);
	box-shadow: 0 1px 3px rgba(11,37,69,0.12);
}
.pcn-btn-ghost:hover,
.pcn-btn-secondary:hover,
.pcn-btn-white:hover,
.pcn-btn-outline-white:hover,
.pcn-btn-outline-orange:hover {
	background: var(--pcn-navy-900);
	color: #fff;
}
/* WhatsApp keeps the same bordered-white family for visual consistency, with its
   signature green as the accent so it's still instantly recognizable. */
.pcn-btn-whatsapp {
	background: #fff;
	border-color: #25D366;
	color: #128C4A;
	box-shadow: 0 1px 3px rgba(11,37,69,0.12);
}
.pcn-btn-whatsapp:hover { background: #25D366; color: #fff; }
.pcn-btn-block { width: 100%; justify-content: center; }
.pcn-btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--pcn-orange-600);
	outline-offset: 2px;
}

/* Header */
.pcn-header {
	position: sticky;
	top: 0;
	background: #fff;
	border-bottom: 1px solid var(--pcn-gray-200);
	z-index: 100;
}
.pcn-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap: 10px;
	gap: 16px;
	padding: 12px 20px;
}
.pcn-logo { display: flex; align-items: center; gap: 10px; }
.pcn-logo img { border-radius: 6px; object-fit: contain; }
.pcn-logo-img { width: 56px; height: 56px; aspect-ratio: 1 / 1; object-fit: contain; }
.pcn-footer-logo-img { width: 64px; height: 64px; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 6px; }
.pcn-logo-text { font-family: var(--pcn-font-heading); font-weight: 600; color: var(--pcn-navy-900); font-size: 1.05rem; }
.pcn-logo-text strong { color: var(--pcn-orange-600); }

.pcn-nav { display: flex; gap: 22px; align-items: center; }
.pcn-nav a { color: var(--pcn-navy-900); font-weight: 500; }
.pcn-nav a:hover { color: var(--pcn-orange-600); text-decoration: none; }

.pcn-header-cta { display: flex; align-items: center; gap: 10px; }
.pcn-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}
.pcn-nav-toggle span { width: 24px; height: 2px; background: var(--pcn-navy-900); display: block; }

/* Hero */
.pcn-hero {
	background: linear-gradient(135deg, var(--pcn-navy-900), var(--pcn-navy-800));
	color: #fff;
	padding: 60px 0;
}
.pcn-hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.pcn-hero h1 { color: #fff; }
.pcn-hero .pcn-eyebrow { color: var(--pcn-orange-600); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; }
.pcn-hero p.lead { color: #E3E7ED; font-size: 1.1rem; }
.pcn-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.pcn-hero-image img { border-radius: var(--pcn-radius-md); box-shadow: var(--pcn-shadow-card); }
.pcn-trust-badges { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 30px; }
.pcn-trust-badge { display: flex; align-items: center; gap: 8px; color: #E3E7ED; font-size: 0.9rem; }

/* Sections */
.pcn-section { padding: 60px 0; }
.pcn-section-alt { background: var(--pcn-gray-50); }
.pcn-section-header { text-align: center; max-width: 640px; margin: 0 auto 40px; }

/* Cards / grids */
.pcn-grid { display: grid; gap: 24px; }
.pcn-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pcn-grid-4 { grid-template-columns: repeat(4, 1fr); }
.pcn-card {
	background: #fff;
	border: 1px solid var(--pcn-gray-200);
	border-radius: var(--pcn-radius-md);
	padding: 24px;
	box-shadow: var(--pcn-shadow-card);
}
.pcn-card-icon { font-size: 2rem; margin-bottom: 10px; }
.pcn-service-card { border-top: 4px solid var(--pcn-orange-600); }
.pcn-service-card h3 a { color: var(--pcn-navy-900); }
.pcn-service-card h3 a:hover { color: var(--pcn-orange-600); }

/* Process steps */
.pcn-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.pcn-step { text-align: center; }
.pcn-step-number {
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--pcn-orange-600); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; margin: 0 auto 12px;
}

/* Testimonials */
.pcn-testimonial { border-left: 4px solid var(--pcn-orange-600); }
.pcn-testimonial p { font-style: italic; color: var(--pcn-navy-900); }
.pcn-testimonial-name { font-weight: 600; color: var(--pcn-gray-600); font-style: normal; font-size: 0.9rem; }

/* FAQ */
.pcn-faq-item { border-bottom: 1px solid var(--pcn-gray-200); padding: 16px 0; }
.pcn-faq-item summary { font-weight: 600; cursor: pointer; color: var(--pcn-navy-900); }
.pcn-faq-item[open] summary { color: var(--pcn-orange-600); }

/* Final CTA */
.pcn-final-cta { background: var(--pcn-orange-600); color: #fff; text-align: center; padding: 60px 0; }
.pcn-final-cta h2 { color: #fff; }
.pcn-final-cta p { color: #FFE8D6; }
.pcn-cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* Footer */
.pcn-footer { background: var(--pcn-navy-900); color: #C8D2E0; padding: 50px 0 20px; }
.pcn-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 30px; }
.pcn-footer h3 { color: #fff; font-size: 1rem; margin-bottom: 12px; }
.pcn-footer ul { list-style: none; padding: 0; margin: 0; }
.pcn-footer li { margin-bottom: 8px; }
.pcn-footer a { color: #C8D2E0; }
.pcn-footer a:hover { color: var(--pcn-orange-600); }
.pcn-footer-bottom { border-top: 1px solid #1F3A63; margin-top: 40px; padding-top: 20px; font-size: 0.85rem; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.pcn-footer-social { display: flex; gap: 14px; }
.pcn-social-icon {
	width: 40px; height: 40px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.pcn-social-icon:hover { transform: translateY(-2px); opacity: 0.9; }
.pcn-social-icon svg { width: 18px; height: 18px; }
.pcn-social-facebook { background: #1877F2; }
.pcn-social-instagram { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF, #515BD4); }
.pcn-social-whatsapp { background: #25D366; }

/* Forms */
.pcn-form { max-width: 640px; }
.pcn-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.pcn-form-group { margin-bottom: 16px; }
.pcn-form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
.pcn-form input, .pcn-form select, .pcn-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--pcn-gray-200);
	border-radius: var(--pcn-radius-sm);
	font-family: inherit;
	font-size: 1rem;
	background: #fff;
	color: var(--pcn-navy-900);
}
.pcn-form textarea { min-height: 120px; resize: vertical; }
.pcn-form-honeypot { position: absolute; left: -9999px; opacity: 0; }
.pcn-form-status { margin-top: 14px; padding: 12px 16px; border-radius: var(--pcn-radius-sm); display: none; }
.pcn-form-status.success { background: #E6F4EA; color: var(--pcn-success); display: block; }
.pcn-form-status.error { background: #FBEAE8; color: #C0392B; display: block; }

/* Booking steps */
.pcn-booking-steps { display: flex; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; }
.pcn-booking-step-indicator {
	flex: 1; min-width: 90px; text-align: center; padding: 8px 4px;
	border-bottom: 3px solid var(--pcn-gray-200); font-size: 0.8rem; color: var(--pcn-gray-600); font-weight: 600;
}
.pcn-booking-step-indicator.active { border-color: var(--pcn-orange-600); color: var(--pcn-navy-900); }

/* Breadcrumbs */
.pcn-breadcrumbs { font-size: 0.85rem; color: var(--pcn-gray-600); padding: 16px 0; }
.pcn-breadcrumbs a { color: var(--pcn-gray-600); }

/* Page hero (interior pages) */
.pcn-page-hero { background: var(--pcn-gray-50); padding: 40px 0; border-bottom: 1px solid var(--pcn-gray-200); }

/* Blog */
.pcn-blog-card img { border-radius: var(--pcn-radius-md); margin-bottom: 14px; }
.pcn-blog-meta { font-size: 0.8rem; color: var(--pcn-gray-600); text-transform: uppercase; letter-spacing: 0.03em; }
.pcn-blog-body h2 { margin-top: 1.5em; }

/* Utility */
.pcn-text-center { text-align: center; }
.pcn-mt-40 { margin-top: 40px; }
.pcn-badge { display: inline-block; background: var(--pcn-gray-100); color: var(--pcn-navy-900); padding: 4px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }

/* Responsive */
@media (max-width: 900px) {
	.pcn-hero-inner { grid-template-columns: 1fr; }
	.pcn-grid-3, .pcn-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.pcn-steps { grid-template-columns: repeat(2, 1fr); }
	.pcn-footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Nav collapses to a hamburger menu well before the header runs out of room for the
   phone + booking buttons (this threshold intentionally sits above the container's
   max-width of 1180px minus its own padding, so there is no "squeeze zone" where the
   full nav and the CTA buttons compete for space and the buttons get pushed to their
   own line — that was the cause of a header layout bug reported after the previous fix). */
@media (max-width: 1120px) {
	.pcn-nav {
		position: absolute; top: 100%; left: 0; right: 0;
		background: #fff; flex-direction: column; align-items: flex-start;
		padding: 16px 20px; border-bottom: 1px solid var(--pcn-gray-200);
		display: none;
	}
	.pcn-nav.is-open { display: flex; }
	.pcn-nav-toggle { display: flex; }
	.pcn-header-cta .pcn-btn-ghost { display: none; }
}

@media (max-width: 720px) {
	.pcn-grid-3, .pcn-grid-4 { grid-template-columns: 1fr; }
	.pcn-steps { grid-template-columns: 1fr; }
	.pcn-footer-grid { grid-template-columns: 1fr; }
	.pcn-form-row { grid-template-columns: 1fr; }
}