html { scroll-behavior: smooth; }
body { font-family: 'Source Serif 4', Georgia, serif; }
.font-display { font-family: 'Bebas Neue', system-ui, sans-serif; }

/* Grain texture overlay */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 9999;
}

/* Staggered fade-up */
.fade-up { opacity: 0; transform: translateY(28px); animation: fadeUp 0.7s ease forwards; }
.d1 { animation-delay: 0.1s; } .d2 { animation-delay: 0.2s; }
.d3 { animation-delay: 0.3s; } .d4 { animation-delay: 0.4s; }
.d5 { animation-delay: 0.5s; } .d6 { animation-delay: 0.6s; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* Hero clip */
.hero-clip { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }

.hero-gradient {
	background: 
		linear-gradient(135deg, rgba(10, 26, 18, 0.92) 0%, rgba(15, 56, 38, 0.85) 40%, rgba(46, 139, 87, 0.75) 100%),
		url('../img/866e4067-ed00-45ea-b4c0-4d7d3e06dfd1.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
@media (min-width: 768px) { .hero-clip { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); } }

/* Service cards */
.service-card { transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s ease; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -12px rgba(0,0,0,0.12); }

/* CTA pulse */
.cta-pulse { animation: ctaPulse 2.5s infinite; }
@keyframes ctaPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(232, 117, 26, 0.35); }
	50% { box-shadow: 0 0 0 14px rgba(232, 117, 26, 0); }
}

/* FAQ */
.faq-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease, padding 0.35s ease;
	padding-bottom: 0;
}

.faq-item.active .faq-content {
	max-height: 300px;   /* tall enough for any answer */
	padding-bottom: 1.5rem;
}

/* Area badges */
.area-badge { transition: all 0.25s ease; }
.area-badge:hover { background: linear-gradient(135deg, #2E8B57, #3aa668); color: white; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(46,139,87,0.3); border-color: transparent; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Mobile menu */
.mobile-panel { transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.mobile-panel.open { transform: translateX(0); }

/* Nav scroll */
.nav-scrolled {
	background: linear-gradient(135deg, rgba(7,31,20,0.97), rgba(13,51,34,0.97)) !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

/* Quote mark */
.quote-mark { font-family: Georgia, serif; font-size: 5rem; line-height: 1; color: #2E8B57; opacity: 0.15; position: absolute; top: -10px; left: 12px; }

/* WhatsApp float */
.whatsapp-float { position: fixed; bottom: 24px; right: 24px; z-index: 1000; transition: transform 0.3s ease; }
.whatsapp-float:hover { transform: scale(1.12); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f5f2ef; }
::-webkit-scrollbar-thumb { background: #2E8B57; border-radius: 4px; }

/* Diagonal stripe */




.green-gradient-bg {
	background: linear-gradient(135deg, #0d3322 0%, #164a33 50%, #0d3322 100%);
}

/* Form focus ring green */
.form-input:focus { border-color: #2E8B57; box-shadow: 0 0 0 3px rgba(46,139,87,0.15); }

.service-check:checked + span {
	color: #2E8B57;
	font-weight: 600;
}

.service-check-label:has(.service-check:checked) {
	border-color: #2E8B57;
	background-color: rgba(46, 139, 87, 0.06);
}

/* Wrapper holds both bubble and button together */
.whatsapp-wrapper {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
}

/* Chat bubble — hidden by default */
.whatsapp-bubble {
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 8px 30px rgba(0,0,0,0.15);
	width: 280px;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(0.95);
	transform-origin: bottom right;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	position: relative;
}

/* Show bubble on wrapper hover */
.whatsapp-wrapper:hover .whatsapp-bubble {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.whatsapp-bubble-header {
	background: #075E54;
	padding: 0.85rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.whatsapp-bubble-body {
	padding: 1rem;
	background: #f0f4f3;
}

.whatsapp-bubble-body p {
	background: #fff;
	border-radius: 0 0.75rem 0.75rem 0.75rem;
	padding: 0.65rem 0.85rem;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.whatsapp-bubble-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.8rem 1rem;
	background: #25D366;
	color: #fff;
	text-decoration: none;
	transition: background 0.2s;
}

.whatsapp-bubble-btn:hover {
	background: #1ebe5d;
}

/* Little arrow at the bottom right */
.whatsapp-bubble-arrow {
	position: absolute;
	bottom: -8px;
	right: 22px;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #25D366;
}

/* Pulse animation on the button */
.whatsapp-float {
	animation: wa-pulse 2.5s infinite;
}

@keyframes wa-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
	70%  { box-shadow: 0 0 0 12px rgba(37,211,102,0); }
	100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* Mobile — smaller bubble */
@media (max-width: 640px) {
	.whatsapp-wrapper { bottom: 1.25rem; right: 1.25rem; }
	.whatsapp-bubble  { width: 240px; }
}