/* ============================================================
   BUGABOO BEACHWOOD — Main Stylesheet
   Design tokens → Utilities → Components → Sections
   ============================================================ */

/* ---- DESIGN TOKENS ---- */
:root {
	--bb-font-body: 'Inter', sans-serif;
	--bb-font-display: 'Space Grotesk', sans-serif;

	--bb-navy: hsl(220, 50%, 20%);
	--bb-navy-light: hsl(220, 40%, 30%);
	--bb-navy-dark: hsl(220, 55%, 12%);
	--bb-green: hsl(145, 55%, 36%);
	--bb-green-light: hsl(145, 45%, 50%);
	--bb-green-dark: hsl(145, 60%, 25%);
	--bb-lime: hsl(90, 60%, 45%);
	--bb-lime-light: hsl(90, 65%, 55%);

	--bb-background: hsl(210, 20%, 98%);
	--bb-foreground: hsl(220, 40%, 13%);
	--bb-card: hsl(0, 0%, 100%);
	--bb-muted: hsl(210, 20%, 95%);
	--bb-muted-fg: hsl(215, 16%, 47%);
	--bb-border: hsl(214, 32%, 91%);
	--bb-destructive: hsl(0, 84%, 60%);
	--bb-accent: hsl(90, 60%, 45%);

	--bb-radius: 0.75rem;
	--bb-radius-xl: 1rem;
	--bb-radius-2xl: 1rem;
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
	font-family: var(--bb-font-body);
	color: var(--bb-foreground);
	background-color: var(--bb-background);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ---- TYPOGRAPHY ---- */
.bb_h1 { font-family: var(--bb-font-display); font-size: 48px; font-weight: 700; line-height: 1.15; margin: 0; }
.bb_h2 { font-family: var(--bb-font-display); font-size: 36px; font-weight: 700; line-height: 1.2; margin: 0; }
.bb_h3 { font-family: var(--bb-font-display); font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; }
.bb_h4 { font-family: var(--bb-font-display); font-size: 20px; font-weight: 600; line-height: 1.4; margin: 0; }
.bb_p { font-family: var(--bb-font-body); font-size: 16px; font-weight: 400; line-height: 1.75; margin: 0; }
.bb_p_lg { font-family: var(--bb-font-body); font-size: 18px; font-weight: 400; line-height: 1.6; margin: 0; }
.bb_p_sm { font-family: var(--bb-font-body); font-size: 14px; font-weight: 400; line-height: 1.7; margin: 0; }
.bb_label { font-family: var(--bb-font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin: 0; }

h1, h2, h3, h4, h5, h6 { font-family: var(--bb-font-display); }

/* ---- CONTAINER ---- */
.bb-container {
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: 16px;
}

/* ---- UTILITY: SPACING ---- */
.py-12 { padding-top: 48px; padding-bottom: 48px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }
.py-20 { padding-top: 80px; padding-bottom: 80px; }
.py-24 { padding-top: 96px; padding-bottom: 96px; }
.py-28 { padding-top: 112px; padding-bottom: 112px; }
.py-32 { padding-top: 128px; padding-bottom: 128px; }
.pt-8 { padding-top: 32px; }
.pb-8 { padding-bottom: 32px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mb-10 { margin-bottom: 40px; }
.mb-12 { margin-bottom: 48px; }
.mb-14 { margin-bottom: 56px; }
.mt-8 { margin-top: 32px; }
.mt-10 { margin-top: 40px; }
.mt-12 { margin-top: 48px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.gap-10 { gap: 40px; }

/* ---- UTILITY: TEXT ---- */
.text-center { text-align: center; }
.text-white { color: #fff; }
.text-foreground { color: var(--bb-foreground); }
.text-muted { color: var(--bb-muted-fg); }
.text-green { color: var(--bb-green); }
.text-lime { color: var(--bb-lime); }
.text-navy { color: var(--bb-navy); }
.text-gradient {
	background-image: linear-gradient(135deg, var(--bb-green) 0%, var(--bb-lime) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ---- UTILITY: BACKGROUNDS ---- */
.bg-navy { background-color: var(--bb-navy); }
.bg-navy-dark { background-color: var(--bb-navy-dark); }
.bg-muted { background-color: var(--bb-muted); }
.bg-white { background-color: #fff; }
.bg-gradient-hero {
	background: linear-gradient(135deg, var(--bb-navy-dark) 0%, var(--bb-navy) 50%, var(--bb-navy-light) 100%);
}
.bg-gradient-cta {
	background: linear-gradient(135deg, var(--bb-green) 0%, var(--bb-green-dark) 100%);
}
.bg-diagonal-lines {
	position: relative;
}
.bg-diagonal-lines::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 20px,
		hsla(220, 40%, 30%, 0.03) 20px,
		hsla(220, 40%, 30%, 0.03) 21px
	);
	pointer-events: none;
	z-index: 1;
}

/* ---- UTILITY: LAYOUT ---- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.grid { display: grid; }
.relative { position: relative; }
.z-10 { z-index: 10; }
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.max-w-2xl { max-width: 672px; }
.max-w-3xl { max-width: 768px; }
.max-w-4xl { max-width: 896px; }
.max-w-5xl { max-width: 1024px; }
.max-w-6xl { max-width: 1152px; }
.mx-auto { margin-inline: auto; }

/* ---- COMPONENTS: GLASS CARDS ---- */
.glass-card {
	background: hsla(0, 0%, 100%, 0.6);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid hsla(214, 32%, 91%, 0.4);
}
.glass-card-dark {
	background: hsla(220, 50%, 20%, 0.7);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid hsla(220, 40%, 30%, 0.3);
}

/* ---- COMPONENTS: SECTION ANGLES ---- */
.section-angle-top { clip-path: polygon(0 6%, 100% 0%, 100% 100%, 0% 100%); }
.section-angle-bottom { clip-path: polygon(0 0%, 100% 0%, 100% 94%, 0% 100%); }
.section-angle-both { clip-path: polygon(0 4%, 100% 0%, 100% 96%, 0% 100%); }

/* ---- COMPONENTS: ACCENT STRIPE ---- */
.accent-stripe-left { border-left: 4px solid var(--bb-green); }

/* ---- COMPONENTS: BUTTONS ---- */
.bb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--bb-font-body);
	font-weight: 600;
	font-size: 14px;
	height: 40px;
	padding: 0 16px;
	border-radius: var(--bb-radius);
	transition: all 0.3s ease;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid transparent;
}
.bb-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.bb-btn-sm { font-size: 14px; height: 36px; padding: 0 16px; }
.bb-btn-lg { font-size: 16px; height: 44px; padding: 0 32px; }
.bb-btn-lg-p { height: 44px; padding: 0 32px; }

.bb-btn-primary {
	background-color: var(--bb-green);
	color: #fff;
}
.bb-btn-primary:hover { background-color: var(--bb-green-dark); }

.bb-btn-secondary {
	background-color: var(--bb-navy);
	color: #fff;
}
.bb-btn-secondary:hover { opacity: 0.9; }

.bb-btn-outline {
	background: transparent;
	border: 1px solid var(--bb-border);
	color: var(--bb-foreground);
}
.bb-btn-outline:hover { background-color: var(--bb-lime); color: #fff; }

.bb-btn-outline-white {
	    border-color: rgba(255, 255, 255, .3);
    color: #000;
    background: #fff;
}
.bb-btn-outline-white:hover {     background: rgba(255, 255, 255, .1);
    color: #000; }

.bb-btn-white-outline {
	background: #fff;
	border: 1px solid hsla(90, 60%, 45%, 0.4);
	color: var(--bb-lime);
}
.bb-btn-white-outline:hover { background-color: hsla(90, 60%, 45%, 0.1); }

.bb-btn-pulse {
	animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
	0%, 100% { box-shadow: 0 0 0 0 hsla(145, 55%, 36%, 0.4); }
	50% { box-shadow: 0 0 0 12px hsla(145, 55%, 36%, 0); }
}

/* ---- COMPONENTS: ICON BOX ---- */
.bb-icon-box {
	width: 48px;
	height: 48px;
	border-radius: var(--bb-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.bb-icon-box svg { width: 24px; height: 24px; }
.bb-icon-box-lg { width: 56px; height: 56px; border-radius: var(--bb-radius-xl); }
.bb-icon-box-lg svg { width: 28px; height: 28px; }
.bb-icon-box-green { background-color: hsla(145, 55%, 36%, 0.1); color: var(--bb-green); }
.bb-icon-box-white { background-color: hsla(0, 0%, 100%, 0.1); color: #fff; }

/* ---- COMPONENTS: BADGE ---- */
.bb-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	border-radius: 9999px;
	font-size: 14px;
	font-weight: 500;
}
.bb-badge-green {
	background: hsla(145, 55%, 36%, 0.2);
	color: var(--bb-lime);
}

/* ---- COMPONENTS: FLOATING PARTICLES ---- */
.bb-particles {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.bb-particle {
	position: absolute;
	border-radius: 50%;
	opacity: 0.4;
	animation: bb-float 8s ease-in-out infinite;
}
@keyframes bb-float {
	0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; }
	25% { transform: translateY(-20px) translateX(10px); opacity: 0.7; }
	50% { transform: translateY(-5px) translateX(-5px); opacity: 0.5; }
	75% { transform: translateY(-15px) translateX(5px); opacity: 0.7; }
}

/* ---- COMPONENTS: SCROLL REVEAL ---- */
.bb-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.bb-reveal.bb-visible {
	opacity: 1;
	transform: translateY(0);
}
.bb-reveal-left { transform: translateX(-30px); }
.bb-reveal-left.bb-visible { transform: translateX(0); }
.bb-reveal-right { transform: translateX(30px); }
.bb-reveal-right.bb-visible { transform: translateX(0); }
.bb-reveal-scale { transform: scale(0.9); }
.bb-reveal-scale.bb-visible { transform: scale(1); }

/* ---- GLOW ---- */
.glow-green {
	box-shadow: 0 0 30px hsla(145, 55%, 36%, 0.3), 0 0 60px hsla(145, 55%, 36%, 0.1);
}

/* ---- CARD HOVER ---- */
.bb-card-hover { transition: all 0.3s ease; }
.bb-card-hover:hover { transform: translateY(-6px); box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); }

/* ============================================================
   NAVIGATION
   ============================================================ */
#main{
	padding-top: 80px;
}
.bb-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--bb-border);
	transition: all 0.3s;
}
.bb-nav.scrolled {
	background: hsla(0, 0%, 100%, 0.95);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.bb-nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
}
.bb-nav-logo img { height: 48px; width: auto; transition: transform 0.3s; }
.bb-nav-logo:hover img { transform: scale(1.05); }
.bb-nav-links { display: flex; align-items: center; gap: 4px; }
.bb-nav-links >ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.bb-nav-link {
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	color: hsla(220, 40%, 13%, 0.7);
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
}
.bb-nav-link:hover { color: var(--bb-foreground); background: var(--bb-muted); }
.bb-nav-link.active { color: var(--bb-navy); background: hsla(220, 50%, 20%, 0.1); font-weight: 500; }
.bb-nav-link svg { width: 14px; height: 14px; }

/* Dropdown */
.bb-dropdown { position: relative; }
.bb-dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 4px;
	width: 200px;
	background: var(--bb-card);
	border-radius: var(--bb-radius);
	box-shadow: 0 10px 30px rgba(0,0,0,0.12);
	border: 1px solid var(--bb-border);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all 0.2s;
	z-index: 100;
}
.bb-dropdown:hover .bb-dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.bb-dropdown-item {
	display: block;
	padding: 10px 16px;
	font-size: 14px;
	color: var(--bb-foreground);
	transition: all 0.15s;
}
.bb-dropdown-item:hover { background: var(--bb-muted); }
.bb-dropdown-item.active { background: var(--bb-green); color: #fff; }

/* Nav right */
.bb-nav-right { display: flex; align-items: center; gap: 12px; }

/* Mobile toggle */
.bb-nav-toggle {
	display: none;
	padding: 8px;
	color: var(--bb-foreground);
}
.bb-nav-toggle svg { width: 24px; height: 24px; }

/* Mobile menu */
.bb-mobile-menu {
	display: none;
	border-top: 1px solid var(--bb-border);
	background: #fff;
	padding: 16px;
}
.bb-mobile-menu.open { display: block; }
.bb-mobile-link {
	display: block;
	padding: 10px 16px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	color: hsla(220, 40%, 13%, 0.7);
}
.bb-mobile-link:hover { color: var(--bb-foreground); }
.bb-mobile-link.active { color: var(--bb-navy); background: hsla(220, 50%, 20%, 0.1); }
.bb-mobile-dropdown-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	color: hsla(220, 40%, 13%, 0.7);
}
.bb-mobile-dropdown-toggle svg { width: 14px; height: 14px; transition: transform 0.2s; }
.bb-mobile-dropdown-toggle.open svg { transform: rotate(180deg); }
.bb-mobile-sub { display: none; padding-left: 16px; }
.bb-mobile-sub.open { display: block; }
.bb-mobile-sub a {
	display: block;
	padding: 8px 16px;
	font-size: 14px;
	color: var(--bb-muted-fg);
}
.bb-mobile-sub a:hover { color: var(--bb-navy); }

@media (max-width: 1023px) {
	.bb-nav-links { display: none; }
	.bb-nav-toggle { display: block; }
}
@media (min-width: 1024px) {
	.bb-nav-inner { height: 80px; }
	.bb-nav-logo img { height: 56px; }
}

/* ============================================================
   HERO — HOME
   ============================================================ */
.bb-hero-home {
	position: relative;
	min-height: fit-content;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 0;
}
.bb-hero-home .bb-hero-ant-trail {
	position: absolute;
	top: -16px;
	left: 0;
	width: 100%;
	z-index: 1;
	pointer-events: none;
	object-fit: cover;
}
.bb-hero-home .bb-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: start;
	position: relative;
	z-index: 10;
	padding: 50px 0;
}
.bb-hero-home .bb-hero-content { display: flex; gap: 24px; }
.bb-hero-home .bb-accent-bar {
	display: none;
	width: 6px;
	background: linear-gradient(to bottom, var(--bb-green), var(--bb-accent), hsla(145, 55%, 36%, 0.2));
	border-radius: 9999px;
	flex-shrink: 0;
}
.bb-hero-home .bb-hero-title {
	font-family: var(--bb-font-display);
	font-size: 32px;
	font-weight: 700;
	color: hsla(210, 40%, 98%, 1);
	line-height: 1.15;
	margin-bottom: 12px;
}
.bb-hero-home .bb-hero-desc {
	font-size: 18px;
	color: hsla(210, 40%, 98%, 0.7);
	margin-bottom: 8px;
	max-width: 672px;
}
.bb-hero-home .bb-trust-badges-wrap {
	max-width: 200px;
	background: #fff;
	border-radius: var(--bb-radius);
	padding: 8px;
	box-shadow: 0 0 20px hsla(84, 81%, 44%, 0.3);
	overflow: hidden;
	margin-top: 12px;
}
.bb-hero-home .bb-trust-badges-wrap img { width: 100%; height: 40px; object-fit: cover; object-position: center 40%; }
.bb-hero-home .bb-hero-form-wrap { margin-top: 16px; }
.bb-hero-home .bb-hero-bottom-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 64px;
	background: linear-gradient(to top, var(--bb-background), transparent);
}
.hero-form-card iframe{
	background-color: #fff;
	border-radius: 12px;
	overflow: hidden;
	min-height: 420px;
	border: none;
	width: 100%;
}

@media (min-width: 1024px) {
	.bb-hero-home { min-height: 90vh; }
	.bb-hero-home .bb-hero-grid { grid-template-columns: 1fr 1fr; gap: 48px; padding: 48px 0 60px; }
	.bb-hero-home .bb-accent-bar { display: block; }
	.bb-hero-home .bb-hero-title { font-size: 60px; }
	.bb-hero-home .bb-hero-content { padding-top: 48px; }
	.bb-hero-home .bb-trust-badges-wrap { max-width: 384px; }
	.bb-hero-home .bb-trust-badges-wrap img { height: 55px; }
	.bb-hero-home .bb-hero-bottom-fade { height: 128px; }
	.bb-hero-home .bb-hero-ant-trail { top: -48px; }
	.bb-hero-home .bb-hero-form-wrap { margin-top: 32px; }
	.bb-stats-bar{margin-top: -32px;}
}
@media (min-width: 768px) {
	.bb-hero-home .bb-hero-title { font-size: 48px; }
	.hero-form-card iframe{border-radius: 16px;}
}

/* ---- SERVICE PAGE HERO (Residential / Commercial / Pest) ---- */
.bb-service-hero {
	position: relative;
	padding: 96px 0;
	color: hsl(210, 40%, 98%);
}
.bb-service-hero__title {
	font-family: var(--bb-font-display);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 12px;
	color: #fff;
}
.bb-service-hero__desc {
	font-size: 18px;
	line-height: 1.6;
	color: hsla(210, 40%, 98%, 0.7);
}
@media (min-width: 768px) {
	.bb-service-hero__title { font-size: 48px; margin-bottom: 24px; }
}
@media (min-width: 1024px) {
	.bb-service-hero { padding: 128px 0; }
}

/* ---- HERO STAGGERED ANIMATIONS ---- */
@keyframes bb-hero-fade-up {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes bb-hero-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes bb-hero-slide-right {
	from { opacity: 0; transform: translateX(30px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes bb-cursor-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}
.bb-hero-anim {
	opacity: 0;
}
.bb-hero-anim--badge      { animation: bb-hero-fade-up 0.8s ease-out 0.2s forwards; }
.bb-hero-anim--form       { animation: bb-hero-slide-right 0.8s ease-out 1s forwards; }
.bb-hero-anim--desc,
.bb-hero-anim--cta,
.bb-hero-anim--badges     { opacity: 0; }
.bb-hero-anim--desc.bb-anim-go       { animation: bb-hero-fade-in 0.8s ease-out forwards; }
.bb-hero-anim--cta.bb-anim-go        { animation: bb-hero-fade-up 0.6s ease-out 0.3s forwards; }
.bb-hero-anim--badges.bb-anim-go     { animation: bb-hero-fade-in 0.8s ease-out 0.8s forwards; }

.bb-typewriter-cursor {
	color: var(--bb-lime);
	animation: bb-cursor-blink 0.8s step-end infinite;
	font-weight: 400;
}

/* ============================================================
   HERO — INNER PAGES
   ============================================================ */
.bb-hero-inner {
	position: relative;
	padding: 96px 0;
	color: hsla(210, 40%, 98%, 1);
	overflow: hidden;
}
.bb-hero-inner .bb-hero-inner-title {
	font-family: var(--bb-font-display);
	font-size: 36px;
	font-weight: 700;
	margin-bottom: 24px;
}
.bb-hero-inner .bb-hero-inner-text {
	font-size: 18px;
	color: hsla(210, 40%, 98%, 0.7);
	max-width: 672px;
}
@media (min-width: 768px) {
	.bb-hero-inner .bb-hero-inner-title { font-size: 48px; }
}
@media (min-width: 1024px) {
	.bb-hero-inner { padding: 128px 0; }
}

/* Hero about variant (with bg image) */
.bb-hero-about {
	position: relative;
	padding: 128px 0 176px;
	color: hsla(210, 40%, 98%, 1);
	overflow: hidden;
}
.bb-hero-about .bb-service-hero__title{
	margin-bottom: 16px;
}
.bb-hero-about .bb-hero-bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bb-hero-about .bb-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, hsla(220, 55%, 12%, 0.92), hsla(220, 50%, 20%, 0.85), hsla(220, 55%, 12%, 0.7));
}
.bb-hero-about .bb-hero-about-subtitle {
	font-family: var(--bb-font-display);
	font-size: 24px;
	font-weight: 600;
	color: var(--bb-green);
	margin-bottom: 24px;
}
.bb-hero-about-content { max-width: 672px; }
.bb-hero-about-desc {
	font-size: 18px;
	line-height: 1.75;
	color: hsla(210, 40%, 98%, 0.7);
}

/* ============================================================
   STATS BAR
   ============================================================ */
.bb-stats-bar {
	position: relative;
	z-index: 20;
}
.bb-stats-bar .bb-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	padding: 20px;
	border-radius: 12px;
	background: hsla(220, 50%, 20%, 0.7);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid hsla(220, 40%, 30%, 0.3);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.bb-stat-item { text-align: center; }
.bb-stat-number {
	font-family: var(--bb-font-display);
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	color: var(--bb-lime);
}
.bb-stat-label {
	font-size: 14px;
	color: hsla(210, 40%, 98%, 0.7);
	margin-top: 4px;
	line-height: 20px;
}

@media (min-width: 768px) {
	.bb-stats-bar .bb-stats-grid{padding: 32px;gap: 24px; grid-template-columns: repeat(4, 1fr);border-radius: 16px;}
	.bb-stat-number { font-size: 48px; }
}

/* ============================================================
   INTRO SECTION (HOME)
   ============================================================ */
.bb-intro { }
.bb-intro-title { margin-bottom: 24px; }
.bb-intro-content { color: var(--bb-muted-fg); margin-bottom: 16px; }

/* Pest icon scroll */
.bb-pest-icons-row {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding-bottom: 16px;
}
.bb-pest-icons-row::-webkit-scrollbar { display: none; }
.bb-pest-icon-card {
	border-radius: var(--bb-radius-xl);
	padding: 20px;
	text-align: center;
	min-width: 130px;
	flex-shrink: 0;
	background: #ffffff99;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid #e1e7ef66;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
	transition: all 0.3s ease;
}
.bb-pest-icon-card img { width: 40px; height: 40px; margin: 0 auto 8px; object-fit: contain; }
.bb-pest-icon-card span { font-size: 14px; font-weight: 500; white-space: nowrap; }
.bb-pest-icon-card:hover{
	opacity: 1;
    transform: translateY(-4px) scale(1.05);
}
/* Marquee (mobile) */
.bb-pest-marquee { overflow: hidden; }
.bb-pest-marquee-track {
	display: flex;
	gap: 16px;
	width: max-content;
	animation: bb-scroll-left 20s linear infinite;
}
.bb-pest-marquee-track:hover { animation-play-state: paused; }
@keyframes bb-scroll-left {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
.bb-pest-marquee-desktop { display: none; }
@media (min-width: 768px) {
	.bb-pest-marquee { display: none; }
	.bb-pest-marquee-desktop { display: block; }
}

/* ============================================================
   SERVICES SECTION (HOME)
   ============================================================ */
.bb-services-section { color: #fff; }
.bb-service-card {
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.2);
	border: 1px solid hsla(0, 0%, 100%, 0.1);
	transition: transform 0.3s;
}
.bb-service-card:hover { transform: translateY(-4px); }
.bb-service-card-img {
	height: 224px;
	position: relative;
}
.bb-service-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bb-service-card-body {
	padding: 24px 20px;
	background: hsla(220, 50%, 20%, 0.8);
	backdrop-filter: blur(8px);
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.bb-service-card-body h3 {
	font-family: var(--bb-font-display);
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 12px;
}
.bb-service-card-body p { color: hsla(0, 0%, 100%, 0.8); font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
.bb-service-card-link { font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; transition: gap 0.2s; }
.bb-service-card-link:hover { gap: 8px; }
.bb-service-card-link svg { width: 16px; height: 16px; }

@media (min-width: 768px) {
	.bb-service-card { flex-direction: row; border-radius: 24px; }
	.bb-service-card.reverse { flex-direction: row-reverse; }
	.bb-service-card-img { width: 40%; height: auto; min-height: 240px; }
	.bb-service-card-body { width: 60%; padding: 32px 40px; }
}

/* ============================================================
   WHY CHOOSE (HOME)
   ============================================================ */
.bb-why-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.bb-why-card {
	border-radius: var(--bb-radius-xl);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform 0.3s;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}
.bb-why-card:hover { transform: scale(1.03); }
.bb-why-card p { font-size: 14px; font-weight: 500; line-height: 1.5; }

@media (min-width: 1024px) {
	.bb-why-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   PROCESS SECTION (HOME)
   ============================================================ */
.bb-process-section { color: hsla(210, 40%, 98%, 1); }
.bb-process-steps {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.bb-process-step {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 24px;
	position: relative;
	flex: 1;
}
.bb-process-step:last-child{padding-bottom: 0;}
.bb-process-step-circle {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--bb-green);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bb-font-display);
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	flex-shrink: 0;
	position: relative;
	z-index: 10;
}
.bb-process-step h3 {
	font-family: var(--bb-font-display);
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 4px;
}
.bb-process-step p { color: hsla(210, 40%, 98%, 0.6); font-size: 12px; line-height: 16px; }

@media (min-width: 768px) {
	.bb-process-steps { flex-direction: row; }
	.bb-process-step {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 8px;
		padding: 0 16px;
	}
	.bb-process-connector {
		display: block;
		position: absolute;
		top: 28px;
		left: calc(50% + 28px);
		width: calc(100% - 56px);
		height: 2px;
		background: hsla(145, 55%, 36%, 0.3);
	}
	.bb-cta-bottom{
		padding: 80px 0;
	}
}

/* ============================================================
   CTA SECTION (BOTTOM)
   ============================================================ */
.bb-cta-bottom {
	position: relative;
	padding: 60px 0;
	color: #fff;
	overflow: hidden;
}
.bb-cta-bottom .bb-cta-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 25%;
}
.bb-cta-bottom .bb-cta-overlay {
	position: absolute;
	inset: 0;
	background: hsla(220, 55%, 12%, 0.7);
}

/* ============================================================
   ABOUT PAGE SECTIONS
   ============================================================ */

/* Stats — overlapping hero bottom */
.bb-about-stats-overlap {
	position: relative;
	margin-top: -32px;
	z-index: 20;
	margin-bottom: 32px;
}
.bb-about-stats-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.bb-about-stat-pill {
	border-radius: 9999px;
	padding: 16px 32px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.bb-about-stat-pill svg { width: 24px; height: 24px; color: var(--bb-green); }
.bb-about-stat-pill .stat-label { font-family: var(--bb-font-display); font-weight: 700; font-size: 14px; }
.bb-about-stat-pill .stat-sub { font-size: 12px; color: var(--bb-muted-fg); }

/* Why Choose heading */
.bb-about-why-header { max-width: 896px; margin: 0 auto 40px; }
.bb-about-accent-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.bb-about-accent-bar::before {
	content: '';
	width: 6px;
	height: 40px;
	background: var(--bb-green);
	border-radius: 9999px;
	flex-shrink: 0;
}
.bb-about-why-title {
	font-family: var(--bb-font-display);
	font-size: 30px;
	font-weight: 700;
	margin: 0;
}
.bb-about-why-desc {
	color: var(--bb-muted-fg);
	font-size: 18px;
	line-height: 1.75;
	padding-left: 20px;
}
.bb-about-why-footer {
	color: var(--bb-muted-fg);
	font-size: 16px;
	line-height: 1.75;
	text-align: center;
	max-width: 768px;
	margin: 48px auto 0;
}
.bb-about-bento-text { font-weight: 500; }

/* Bento grid */
.bb-about-bento-grid {
	display: grid;
	gap: 16px;
	max-width: 1024px;
	margin: 0 auto;
}
.bb-about-bento-card {
	border-radius: var(--bb-radius-xl);
	padding: 20px;
	display: flex;
	gap: 16px;
	align-items: start;
	height: 100%;
}
.bb-about-icon-circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: hsla(145, 55%, 36%, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.bb-about-icon-circle svg { width: 20px; height: 20px; color: var(--bb-green); }
@media (min-width: 768px) {
	.bb-about-bento-grid { grid-template-columns: repeat(2, 1fr); }
	.bb-bento-md-wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
	.bb-about-bento-grid { grid-template-columns: repeat(3, 1fr); }
	.bb-bento-wide { grid-column: span 2; }
	.bb-bento-md-wide { grid-column: span 1; }
}

/* Mission — green gradient */
.bb-about-mission {
	padding: 64px 0;
	background: linear-gradient(135deg, var(--bb-green), hsl(145, 55%, 28%));
	color: #fff;
	position: relative;
	overflow: hidden;
}
.bb-about-mission-inner {
	padding-top: 32px;
	padding-bottom: 32px;
}
.bb-about-mission-row {
	max-width: 768px;
	margin: 0 auto;
	display: flex;
	gap: 24px;
	align-items: start;
}
.bb-about-mission-quote {
	flex-shrink: 0;
	display: none;
}
.bb-about-mission-quote svg { width: 64px; height: 64px; color: hsla(0, 0%, 100%, 0.2); }
@media (min-width: 768px) {
	.bb-about-mission-quote { display: block; }
}
.bb-about-mission-title {
	font-family: var(--bb-font-display);
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 16px;
	color: #fff;
}
.bb-about-mission-text {
	font-size: 18px;
	line-height: 1.75;
	color: hsla(0, 0%, 100%, 0.9);
}

/* About reviews section */
.bb-about-reviews-title {
	font-family: var(--bb-font-display);
	font-size: 30px;
	font-weight: 700;
	text-align: center;
	margin: 0 0 48px;
}
.bb-about-carousel-wrap {
	max-width: 768px;
	margin: 0 auto;
	position: relative;
}
.bb-about-review-slide {
	border-radius: var(--bb-radius-2xl);
	padding: 40px 56px;
	text-align: center;
}
.bb-about-review-slide .bb-review-stars { margin-bottom: 24px; }
.bb-about-review-text {
	font-size: 18px;
	line-height: 1.75;
	margin-bottom: 32px;
	font-style: italic;
	color: var(--bb-fg);
}
.bb-about-review-name {
	font-family: var(--bb-font-display);
	font-weight: 700;
	font-size: 18px;
	margin: 0;
}
.bb-about-review-source {
	font-size: 14px;
	color: var(--bb-muted-fg);
	margin-top: 4px;
}
.bb-review-counter {
	font-size: 14px;
	color: var(--bb-muted-fg);
	font-weight: 500;
}
.bb-about-all-reviews {
	text-align: center;
	margin-top: 32px;
}
.bb-about-all-reviews a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bb-green);
	font-weight: 600;
	text-decoration: none;
}

/* Integrity CTA — diagonal split */
.bb-about-integrity {
	position: relative;
	padding: 80px 0;
	overflow: hidden;
}
.bb-about-integrity-bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, hsl(220, 55%, 12%), hsl(220, 50%, 18%));
}
.bb-about-integrity-split {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 33.33%;
	height: 100%;
	background: linear-gradient(135deg, var(--bb-green), hsl(145, 55%, 28%));
	clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
}
.bb-about-integrity-content { max-width: 768px; }
.bb-about-integrity-title {
	font-family: var(--bb-font-display);
	font-size: 30px;
	font-weight: 700;
	margin: 0 0 24px;
	color: #fff;
}
.bb-about-integrity-text {
	font-size: 18px;
	line-height: 1.75;
	color: hsla(210, 40%, 98%, 0.7);
	margin-bottom: 32px;
}
@media (min-width: 1024px) {
	.bb-about-integrity-split { display: block; }
}

/* ============================================================
   REVIEW CAROUSEL (shared)
   ============================================================ */
.bb-review-carousel { position: relative; }
.bb-review-carousel-track { position: relative; overflow: hidden; }
.bb-review-slide {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: opacity 0.5s ease;
	pointer-events: none;
	visibility: hidden;
}
.bb-review-slide.bb-slide-active {
	opacity: 1;
	position: relative;
	pointer-events: auto;
	visibility: visible;
}
.bb-review-stars { display: flex; justify-content: center; gap: 4px; }
.bb-review-stars svg { width: 20px; height: 20px; fill: var(--bb-green); color: var(--bb-green); }
.bb-review-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 32px; }
.bb-review-nav-btn {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
	cursor: pointer;
}
.bb-review-nav-btn:hover { background: hsla(145, 55%, 36%, 0.1); }
.bb-review-nav-btn svg { width: 20px; height: 20px; }

/* ============================================================
   RESIDENTIAL PAGE
   ============================================================ */

/* Steps timeline (vertical accent line + glass cards) */
.bb-steps-timeline {
	position: relative;
	padding-left: 32px;
}
.bb-steps-line {
	position: absolute;
	left: 12px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: linear-gradient(to bottom, var(--bb-green), hsla(145, 55%, 36%, 0.5), transparent);
}
.bb-step-item {
	position: relative;
	margin-bottom: 24px;
}
.bb-step-dot {
	position: absolute;
	left: -20px;
	top: 4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--bb-green);
	border: 2px solid var(--bb-background);
}
.bb-step-card {
	border-radius: var(--bb-radius);
	padding: 16px;
}
.bb-step-num {
	font-family: var(--bb-font-display);
	font-weight: 700;
	font-size: 12px;
	color: var(--bb-green);
	margin-right: 8px;
}
.bb-step-text { color: var(--bb-foreground); }

/* Pest pills */
.bb-pest-pills { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.bb-pest-pills::-webkit-scrollbar { display: none; }
.bb-pest-pill {
	padding: 8px 16px;
	border-radius: 9999px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	cursor: default;
}
.bb-pest-pill svg { width: 14px; height: 14px; color: var(--bb-green); }

/* Residential services grid — featured + stacked (matches Loveable 5-col layout) */
.bb-res-services-grid {
	display: grid;
	gap: 24px;
}
.bb-res-featured-card {
	border-radius: 16px;
	padding: 32px;
	height: 100%;
}
.bb-res-featured-card.glass-card{
	border-left: 4px solid #298e53 !important;
}
.bb-res-featured-card svg { width: 40px; height: 40px; color: var(--bb-green); margin-bottom: 16px; }
.bb-res-stacked-cards {
	display: grid;
	gap: 16px;
}
.bb-res-service-card {
	border-radius: 12px;
	padding: 20px;
	height: 100%;
}
.bb-res-service-card svg { width: 28px; height: 28px; color: var(--bb-green); margin-bottom: 12px; }

@media (min-width: 640px) {
	.bb-res-stacked-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.bb-res-services-grid { grid-template-columns: 2fr 3fr; }
}

/* FAQ Accordion */
.bb-faq-accordion { }
.bb-faq-item { border-bottom: 1px solid var(--bb-border); }
.bb-faq-question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	text-align: left;
	font-size: 16px;
	font-weight: 500;
	color: var(--bb-foreground);
}
.bb-faq-question svg { width: 16px; height: 16px; color: var(--bb-muted-fg); transition: transform 0.3s; flex-shrink: 0; margin-left: 16px; }
.bb-faq-item.open .bb-faq-question svg { transform: rotate(180deg); }
.bb-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	color: var(--bb-muted-fg);
	font-size: 14px;
	line-height: 1.43;
}
.bb-faq-answer .bb_p { font-size: 14px; line-height: 1.43; }
.bb-faq-item.open .bb-faq-answer { max-height: 500px; padding-bottom: 16px; }

/* ============================================================
   COMMERCIAL PAGE
   ============================================================ */

/* Quality section — full-width bg image with glass overlay */
.bb-com-quality {
	position: relative;
	overflow: hidden;
}
.bb-com-quality-bg-wrap {
	position: absolute;
	inset: 0;
}
.bb-com-quality-bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bb-com-quality-overlay {
	position: absolute;
	inset: 0;
	background: hsla(210, 20%, 98%, 0.8);
	backdrop-filter: blur(4px);
}
.bb-com-quality-card {
	border-radius: var(--bb-radius-2xl);
	padding: 40px;
	max-width: 672px;
}

/* General package — banner image */
.bb-com-banner-img {
	border-radius: var(--bb-radius-2xl);
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	margin-bottom: 40px;
}
.bb-com-banner-img img {
	width: 100%;
	height: 256px;
	object-fit: cover;
	display: block;
}
@media (min-width: 768px) {
	.bb-com-banner-img img { height: 320px; }
}

/* Icon box — reusable green-tinted wrapper */
.bb-icon-box {
	width: 48px;
	height: 48px;
	border-radius: var(--bb-radius);
	background: hsla(145, 55%, 36%, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-bottom: 16px;
}
.bb-icon-box svg { color: var(--bb-green); }
.bb-icon-box--md {
	width: 40px;
	height: 40px;
	margin-bottom: 0;
}

/* Industries horizontal scroll */
.bb-industries-row {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	padding-bottom: 16px;
}
/* .bb-industries-row::-webkit-scrollbar { display: none; } */
.bb-industry-card {
	border-radius: var(--bb-radius-xl);
	padding: 24px;
	min-width: 320px;
	max-width: 360px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.bb-industry-card h3 { font-family: var(--bb-font-display); font-weight: 600; font-size: 18px; margin-bottom: 8px; }
.bb-industry-card p { color: var(--bb-muted-fg); font-size: 14px; flex: 1; }

/* Timeline services */
.bb-com-timeline { display: flex; flex-direction: column; gap: 24px; }
.bb-timeline-item {
	display: flex;
	gap: 24px;
	align-items: start;
	border-radius: var(--bb-radius-xl);
	padding: 24px;
}
.bb-timeline-number {
	font-family: var(--bb-font-display);
	font-size: 48px;
	font-weight: 700;
	color: hsla(145, 55%, 36%, 0.15);
	flex-shrink: 0;
	line-height: 1;
	user-select: none;
}
@media (min-width: 768px) {
	.bb-timeline-number { font-size: 60px; }
}
.bb-timeline-content { flex: 1; }
.bb-timeline-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.bb-timeline-item h3 { font-family: var(--bb-font-display); font-weight: 600; font-size: 18px; }
.bb-timeline-item p { color: var(--bb-muted-fg); font-size: 14px; }

/* Why choose commercial */
.bb-com-why { color: hsla(210, 40%, 98%, 1); }
.bb-com-why-inner {
	display: flex;
	gap: 32px;
	max-width: 768px;
	margin: 0 auto;
}
.bb-com-why-accent {
	display: none;
	width: 6px;
	border-radius: 9999px;
	background: linear-gradient(to bottom, var(--bb-green), hsla(145, 55%, 36%, 0.5), transparent);
	flex-shrink: 0;
}
@media (min-width: 768px) {
	.bb-com-why-accent { display: block; }
}
.bb-com-why-reasons {
	display: grid;
	gap: 12px;
}
.bb-com-why-reason {
	display: flex;
	align-items: start;
	gap: 12px;
}
.bb-com-why-reason svg { width: 20px; height: 20px; color: var(--bb-green); flex-shrink: 0; margin-top: 2px; }
@media (min-width: 640px) {
	.bb-com-why-reasons { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   PEST LIBRARY PAGE
   ============================================================ */
.bb-pest-search {
	max-width: 448px;
	position: relative;
}
.bb-pest-search input {
	width: 100%;
	height: 48px;
	padding: 0 16px 0 48px;
	border-radius: var(--bb-radius);
	border: 1px solid hsla(0, 0%, 100%, 0.2);
	background: hsla(0, 0%, 100%, 0.1);
	color: #fff;
	font-size: 16px;
}
.bb-pest-search input::placeholder { color: hsla(210, 40%, 98%, 0.4); }
.bb-pest-search svg {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	color: hsla(210, 40%, 98%, 0.5);
}

/* Pest accordion list */
.bb-pest-list { display: flex; flex-direction: column; gap: 12px; }
.bb-pest-accordion-item {
	border-radius: var(--bb-radius-xl);
	overflow: hidden;
}
.bb-pest-accordion-header {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	text-align: left;
	transition: background 0.15s;
}
.bb-pest-accordion-header .bb-icon-box { margin-bottom: 0; }
.bb-pest-accordion-header:hover { background: hsla(145, 55%, 36%, 0.05); }
.bb-pest-accordion-header h3 { font-family: var(--bb-font-display); font-weight: 700; font-size: 18px; flex: 1; }
.bb-pest-accordion-header .chevron { width: 20px; height: 20px; color: var(--bb-muted-fg); transition: transform 0.2s; }
.bb-pest-accordion-item.open .chevron { transform: rotate(180deg); }
.bb-pest-accordion-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}
.bb-pest-accordion-item.open .bb-pest-accordion-body { max-height: 500px; }
.bb-pest-accordion-content {
	padding: 8px 20px 20px;
	border-top: 1px solid hsla(214, 32%, 91%, 0.5);
}
.bb-pest-info-grid {
	display: grid;
	gap: 16px;
	margin-bottom: 16px;
}
.bb-pest-info-item { display: flex; align-items: start; gap: 8px; }
.bb-pest-info-item svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.bb-pest-info-item:first-child svg { color: hsl(0, 84%, 60%); }
.bb-pest-info-item:nth-child(2) svg { color: var(--bb-lime); }
.bb-pest-info-item:nth-child(3) svg { color: var(--bb-green); }
.bb-pest-info-label { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.bb-pest-info-text { color: var(--bb-muted-fg); font-size: 14px; }
@media (min-width: 640px) {
	.bb-pest-info-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   SINGLE PEST PAGE
   ============================================================ */

/* Pest page h2 — Loveable uses text-3xl (30px), not our global 36px */
.bb-pest-page .bb_h2 { font-size: 30px; }
@media (max-width: 767px) {
	.bb-pest-page .bb_h2 { font-size: 24px; }
}

/* Hero — decorative large bg icon */
.bb-pest-hero-bg-icon {
	position: absolute;
	right: 32px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.03;
	pointer-events: none;
	z-index: 1;
}
.bb-pest-hero-bg-icon svg { width: 256px; height: 256px; color: #fff; }

/* Hero label row */
.bb-pest-hero-label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.bb-pest-hero-label svg { width: 32px; height: 32px; color: var(--bb-green); }
.bb-pest-hero-label span { color: var(--bb-green); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 14px; }

/* Signs heading */
.bb-pest-signs-heading {
	font-family: var(--bb-font-display);
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 24px;
}

/* Signs grid — glass cards */
.bb-pest-signs-grid {
	display: grid;
	gap: 16px;
}
.bb-pest-sign-card {
	border-radius: var(--bb-radius-xl);
	padding: 16px;
	display: flex;
	align-items: start;
	gap: 12px;
}
.bb-pest-sign-card svg { width: 20px; height: 20px; color: var(--bb-green); flex-shrink: 0; margin-top: 2px; }
.bb-pest-sign-card span { color: var(--bb-muted-fg); font-size: 14px; }
@media (min-width: 640px) {
	.bb-pest-signs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.bb-pest-signs-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Process — horizontal row with arrows */
.bb-pest-process-row {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.bb-pest-process-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}
.bb-pest-process-card {
	border-radius: var(--bb-radius-xl);
	padding: 24px;
	text-align: center;
	height: 100%;
	width: 100%;
}
.bb-pest-process-card h3 { font-family: var(--bb-font-display); font-weight: 600; font-size: 18px; margin-bottom: 8px; }
.bb-pest-process-card p { color: var(--bb-muted-fg); font-size: 14px; line-height: 1.6; }
.bb-process-arrow { display: none; }
.bb-icon-box--lg {
	width: 56px;
	height: 56px;
	border-radius: var(--bb-radius-xl);
	background: hsla(145, 55%, 36%, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.bb-icon-box--lg svg { color: var(--bb-green); }
@media (min-width: 768px) {
	.bb-pest-process-row { flex-direction: row; gap: 0; }
	.bb-pest-process-step { flex-direction: row; align-items: start; }
	.bb-process-arrow {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		margin-top: 48px;
		margin-left: 4px;
		margin-right: 4px;
	}
	.bb-process-arrow svg { width: 24px; height: 24px; color: hsla(145, 55%, 36%, 0.4); }
}

/* Why Choose — accent bar */
.bb-pest-why-content { display: flex; gap: 24px; }
.bb-pest-why-content .bb-accent-bar-vert {
	display: none;
	width: 6px;
	background: linear-gradient(to bottom, var(--bb-green), hsla(145, 55%, 36%, 0.5), transparent);
	border-radius: 9999px;
	flex-shrink: 0;
}
@media (min-width: 768px) {
	.bb-pest-why-content .bb-accent-bar-vert { display: block; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.bb-contact-hero { padding: 64px 0 80px; position: relative; }
@media (min-width: 1024px) { .bb-contact-hero { padding: 80px 0; } }
.bb-contact-hero-bg {
	position: absolute;
	top: -48px;
	left: 0;
	width: 100%;
	z-index: 1;
	pointer-events: none;
	object-fit: cover;
}
.bb-contact-grid {
	display: grid;
	gap: 48px;
}
@media (min-width: 1024px) {
	.bb-contact-grid { grid-template-columns: 1fr 1fr; }
	.bb-contact-sidebar { position: sticky; top: 96px; align-self: start; }
}
.bb-contact-qr-banner {
	background: linear-gradient(135deg, var(--bb-green), hsl(145, 55%, 28%));
	color: #fff;
	border-radius: var(--bb-radius-xl);
	padding: 24px;
}
.bb-contact-info-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	border-radius: var(--bb-radius-xl);
	transition: box-shadow 0.2s;
}
.bb-contact-info-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.bb-contact-icon-box {
	width: 48px;
	height: 48px;
	border-radius: var(--bb-radius);
	background: hsla(145, 55%, 36%, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.2s;
}
.bb-contact-info-card:hover .bb-contact-icon-box { background: hsla(145, 55%, 36%, 0.2); }
.bb-contact-icon-box svg { width: 24px; height: 24px; color: var(--bb-green); }

/* ============================================================
   QUOTE PAGE
   ============================================================ */
.bb-quote-steps {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 448px;
	margin: 0 auto 48px;
}
.bb-quote-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}
.bb-quote-step-circle {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--bb-green);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.bb-quote-step-circle svg { width: 24px; height: 24px; color: #fff; }
.bb-quote-step span { margin-top: 8px; font-size: 12px; font-weight: 600; }
.bb-quote-connector {
	flex: 1;
	height: 4px;
	border-radius: 9999px;
	background: hsla(145, 55%, 36%, 0.2);
	margin: 0 8px 24px;
	position: relative;
	overflow: hidden;
}
.bb-quote-connector::after {
	content: '';
	position: absolute;
	inset: 0;
	background: hsla(145, 55%, 36%, 0.4);
	border-radius: 9999px;
}

/* ============================================================
   REVIEWS PAGE
   ============================================================ */
.bb-reviews-hero { padding: 96px 0; }
@media (min-width: 1024px) { .bb-reviews-hero { padding: 128px 0; } }
.bb-reviews-hero-row {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
@media (min-width: 1024px) {
	.bb-reviews-hero-row {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}
.bb-reviews-hero-stats-wrap { flex-shrink: 0; }
.bb-reviews-hero-stats {
	border-radius: var(--bb-radius-2xl);
	padding: 24px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.bb-reviews-count { font-family: var(--bb-font-display); font-size: 36px; font-weight: 700; color: var(--bb-lime); }

/* Decorative quote icon */
.bb-reviews-quote-decor {
	position: absolute;
	top: -16px;
	left: 32px;
	display: none;
}
.bb-reviews-quote-decor svg { width: 80px; height: 80px; color: hsla(220, 55%, 15%, 0.08); }
@media (min-width: 768px) { .bb-reviews-quote-decor { display: block; } }

/* Edge arrows (desktop) */
.bb-review-edge-btn {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: hsla(0, 0%, 100%, 0.8);
	backdrop-filter: blur(8px);
	border: 1px solid hsla(0, 0%, 0%, 0.06);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s;
}
.bb-review-edge-btn:hover { background: hsla(145, 55%, 36%, 0.1); }
.bb-review-edge-btn svg { width: 24px; height: 24px; }
.bb-review-edge-prev { left: 0; }
.bb-review-edge-next { right: 0; }
@media (min-width: 768px) { .bb-review-edge-btn { display: flex; } }

/* Mobile arrows + dots row */
.bb-review-nav-mobile {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
}
.bb-review-mobile-arrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--bb-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s;
}
.bb-review-mobile-arrow:hover { background: hsla(145, 55%, 36%, 0.15); }
@media (min-width: 768px) { .bb-review-mobile-arrow { display: none; } }

/* Dots */
.bb-review-dots { display: flex; align-items: center; gap: 8px; }
.bb-review-dot {
	width: 10px;
	height: 10px;
	border-radius: 9999px;
	background: hsla(215, 20%, 65%, 0.3);
	border: none;
	cursor: pointer;
	transition: all 0.3s;
	padding: 0;
}
.bb-review-dot.active {
	background: var(--bb-green);
	width: 24px;
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.bb-legal h1 { margin-bottom: 32px; }
.bb-legal h2 { font-size: 20px; font-weight: 600; margin-top: 32px; margin-bottom: 12px; }
.bb-legal p { color: var(--bb-muted-fg); font-size: 14px; line-height: 1.8; margin-bottom: 16px; }
.bb-legal ul { padding-left: 24px; margin-bottom: 16px; }
.bb-legal ul li { color: var(--bb-muted-fg); font-size: 14px; line-height: 1.8; margin-bottom: 8px; list-style: disc; }

/* ============================================================
   FOOTER
   ============================================================ */
.bb-footer { background: #fff; padding: 64px 0; }
.bb-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
.bb-footer-brand img { height: 56px; width: auto; margin-bottom: 16px; }
.bb-footer-brand p { color: var(--bb-navy); font-size: 14px; line-height: 1.6; }
.bb-footer-guarantee { display: flex; align-items: center; gap: 8px; color: var(--bb-navy); font-size: 14px; font-weight: 600; margin-top: 16px; }
.bb-footer-guarantee svg { width: 16px; height: 16px; }
.bb-footer h4 { font-family: var(--bb-font-display); font-weight: 600; font-size: 18px; line-height: 28px; margin-bottom: 8px; }
.bb-footer-links a { display: block; color: var(--bb-muted-fg); font-size: 14px; line-height: 20px; padding: 4px 0; transition: color 0.15s; }
.bb-footer-links a:hover { color: var(--bb-navy); }
.bb-footer-contact a,
.bb-footer-contact p,
.bb-footer-contact div { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 12px; }
.bb-footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; }
.bb-footer-phone { color: var(--bb-navy); font-weight: 600; }
.bb-footer-phone:hover { color: hsla(220, 50%, 20%, 0.8); }
.bb-footer-address { color: var(--bb-muted-fg); }
.bb-footer-address:hover { color: var(--bb-navy); }
.bb-footer-contact p{color: var(--bb-muted-fg);}

.bb-footer-bottom {
    margin-top: 44px;
    padding-top: 32px;
    border-top: 1px solid var(--bb-border);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    align-items: center;
}
.bb-footer-bottom-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.bb-footer-copyright {
    font-size: 12px;
    color: var(--bb-muted-fg);
    display: flex;
    justify-content: space-between;
    align-items: center;
	flex-wrap: wrap;
	width: 100%;
	gap: 12px;
	text-align: center;
}
.bb-footer-brand .bb-footer-tagline { font-weight: 400; color: hsla(220, 50%, 20%, 0.7); }
.bb-footer-legal { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.bb-footer-legal a { color: var(--bb-muted-fg); transition: color 0.15s; }
.bb-footer-legal a:hover { color: var(--bb-navy); }
.bb-footer-legal span { color: var(--bb-muted-fg); }

@media (min-width: 768px) {
	.bb-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
	.bb-footer-bottom-inner { flex-direction: row; justify-content: space-between; }
	.bb-footer h4{margin-bottom: 12px;}
}
@media (min-width: 1024px) {
	.bb-footer-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   404 PAGE
   ============================================================ */
.bb-404 {
	display: flex;
	min-height: 100vh;
	align-items: center;
	justify-content: center;
	background: var(--bb-muted);
	text-align: center;
}
.bb-404 h1 { font-size: 64px; font-weight: 700; margin-bottom: 16px; }
.bb-404 p { font-size: 20px; color: var(--bb-muted-fg); margin-bottom: 16px; }
.bb-404 a { color: var(--bb-navy); text-decoration: underline; }
.bb-404 a:hover { color: hsla(220, 50%, 20%, 0.8); }

/* ============================================================
   GRAVITY FORMS STYLING
   ============================================================ */
.bb-form-wrap .gform_wrapper input[type="text"],
.bb-form-wrap .gform_wrapper input[type="email"],
.bb-form-wrap .gform_wrapper input[type="tel"],
.bb-form-wrap .gform_wrapper input[type="number"],
.bb-form-wrap .gform_wrapper textarea,
.bb-form-wrap .gform_wrapper select {
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius);
	padding: 12px 16px;
	font-family: var(--bb-font-body);
	font-size: 14px;
	transition: border-color 0.2s;
}
.bb-form-wrap .gform_wrapper input:focus,
.bb-form-wrap .gform_wrapper textarea:focus,
.bb-form-wrap .gform_wrapper select:focus {
	outline: none;
	border-color: var(--bb-green);
	box-shadow: 0 0 0 3px hsla(145, 55%, 36%, 0.15);
}
.bb-form-wrap .gform_wrapper .gform_button {
	background: var(--bb-green);
	color: #fff;
	border: none;
	border-radius: var(--bb-radius);
	padding: 14px 32px;
	font-family: var(--bb-font-body);
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: background 0.2s;
}
.bb-form-wrap .gform_wrapper .gform_button:hover { background: var(--bb-green-dark); }

/* ============================================================
   TWO-COL SECTION
   ============================================================ */
.bb-two-col {
	display: flex;
	flex-direction: column;
	gap: 32px;	
}
@media (min-width: 1024px) {
	.bb-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center;}
}
.bb-two-col-image { border-radius: var(--bb-radius-2xl); overflow: hidden; }
.bb-two-col-image img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
	#main{
		padding: 64px 0 0;
	}
}
@media (max-width: 767px) {
	.bb-container { padding-inline: 20px; }
	.bb_h1 { font-size: 32px; }
	.bb_h2 { font-size: 28px; }
	.bb_h3 { font-size: 20px; }

	/* Section padding — ~30% reduction */
	.py-12 { padding-top: 32px; padding-bottom: 32px; }
	.py-16 { padding-top: 42px; padding-bottom: 42px; }
	.py-20 { padding-top: 56px; padding-bottom: 56px; }
	.py-24 { padding-top: 60px; padding-bottom: 60px; }
	.py-28 { padding-top: 72px; padding-bottom: 72px; }
	.py-32 { padding-top: 80px; padding-bottom: 80px; }
	.bb-service-hero { padding: 60px 0; }

	/* Card padding — ~30% reduction */
	.bb-why-card { padding: 16px; border-radius: 12px; }
	.bb-specialized-card { padding: 14px; }
	.bb-specialized-card-featured { padding: 22px; }
	.bb-industry-card { padding: 16px; min-width: 260px; }
	.bb-timeline-item { padding: 16px; gap: 16px; margin-bottom: 16px; flex-direction: column;}
	.bb-timeline-number { font-size: 36px; }
	.bb-faq-question { padding: 14px 0; font-size: 14px;line-height: 20px; }
	.bb-faq-item.open .bb-faq-answer { padding-bottom: 14px; }
	.glass-card { padding: 16px; }

	/* Margins — ~30% reduction */
	.mb-4 { margin-bottom: 10px; }
	.mb-6 { margin-bottom: 16px; }
	.bb-intro-title, .mb-8 { margin-bottom: 20px; }
	.mb-10 { margin-bottom: 28px; }
	.mb-12 { margin-bottom: 30px; }
	.mb-14 { margin-bottom: 32px; }
	.mt-8 { margin-top: 22px; }
	.mt-10 { margin-top: 28px; }
	.mt-12 { margin-top: 32px; }

	/* Gaps — ~30% reduction */
	.gap-4 { gap: 12px; }
	.gap-6 { gap: 16px; }
	.gap-8 { gap: 24px; }
	.gap-10 { gap: 28px; }
	.bb-specialized-grid { gap: 16px; }
	.bb-industries-row { gap: 16px; }
	.bb-com-why-reasons { gap: 8px; }

	.bb-why-grid { grid-template-columns: 1fr; }
	.bb-btn { border-radius: 10px; }
	.section-angle-top { clip-path: polygon(0 2%, 100% 0%, 100% 100%, 0% 100%); }
	.section-angle-bottom { clip-path: polygon(0 0%, 100% 0%, 100% 98%, 0% 100%); }
	.section-angle-both { clip-path: polygon(0 2%, 100% 0%, 100% 98%, 0% 100%); }
	.bb-process-connector { display: none; }

	.bb-pest-icon-card{width: 100%;flex: 0 0 auto;max-width: calc(33% - 10.67px );min-width: initial;}

	.bb-service-hero__desc,
	.bb-hero-home .bb-hero-desc,
	.bb_p_lg{font-size: 16px;line-height: 24px;}

	.bb-btn, .bb-btn-lg, .bb-btn-lg-p{padding: 0 16px;}

	/* Footer padding reduction */
	.bb-footer { padding: 45px 0 20px; }
	.bb-footer-bottom { margin-top: 32px;padding-top: 16px; }
	.bb-footer-copyright{justify-content: center;}
	:root {
		--bb-radius-xl: 8px;
		--bb-radius-2xl: 12px;
	}

	/* ── ABOUT PAGE mobile ── */
	.bb-hero-about { padding: 80px 0 60px; }
	.bb-hero-about .bb-hero-about-subtitle { font-size: 18px; margin-bottom: 16px; }
	.bb-about-stats-overlap { margin-top: -24px; }
	.bb-about-stat-pill { padding: 12px 20px; font-size: 14px; }
	.bb-about-bento-grid { grid-template-columns: 1fr; }
	.bb-bento-wide,
	.bb-bento-md-wide { grid-column: span 1; }
	.bb-about-bento-card { padding: 16px; gap: 12px; }
	.bb-about-icon-circle { width: 36px; height: 36px; }
	.bb-about-mission { padding: 48px 0; }

	/* About & Reviews — Review carousel card mobile */
	.bb-about-review-slide { padding: 24px 20px !important; }
	.bb-review-slide.glass-card { padding: 24px 20px !important; }
	.bb-review-slide .bb-review-stars svg { width: 18px; height: 18px; }
	.bb-about-review-text { font-size: 16px !important; margin-bottom: 24px !important; }
	.bb-about-review-name { font-size: 16px !important; }
	.bb-about-reviews-title { font-size: 24px; margin-bottom: 32px; }
	.bb-about-why-title { font-size: 24px; }
	.bb-about-why-desc { font-size: 16px; padding-left: 0; }
	.bb-about-integrity-title { font-size: 24px; }
	.bb-about-integrity-text { font-size: 16px; }
	.bb-about-mission-title { font-size: 20px; }
	.bb-about-mission-text { font-size: 16px; }

	/* About — Integrity section mobile */
	.bb-about-integrity { padding: 56px 0; }

	/* ── REVIEWS PAGE mobile ── */
	.bb-reviews-hero { padding: 64px 0; }
	.bb-reviews-hero-stats { padding: 16px 20px; gap: 12px; }
	.bb-reviews-count { font-size: 28px; }
	.bb-review-dots { gap: 6px; }
	.bb-review-dot { width: 8px; height: 8px; }
	.bb-review-dot.active { width: 20px; }

	/* ── CONTACT PAGE mobile ── */
	.bb-contact-hero { padding: 56px 0 64px; }
	.bb-contact-qr-banner { padding: 20px; }
	.bb-contact-info-card { padding: 16px; }
	.bb-contact-icon-box { width: 40px; height: 40px; }
	.bb-contact-hero-bg { opacity: 0.08; top: -24px; }
	.bb-contact-grid { gap: 32px !important; }
	.bb-contact-grid .glass-card { padding: 5px !important; }
}

@media (max-width: 440px) {
	.bb-pest-icon-card{ max-width: calc(50% - 8px); }
	.bb-nav-right{gap: 1px;}
	.bb-nav-right .bb-btn { padding: 0 12px;}
}