/* Unicorn Chemical – Service & City SEO Pages : default styling.
   Uses generic classes so it's easy to override in your theme's own CSS
   (just add rules with higher specificity, e.g. body .usp-hero {...}) */

.usp-container { max-width: 960px; margin: 0 auto; padding: 32px 20px 64px; }

.usp-breadcrumb { font-size: 13px; color: #666; margin-bottom: 18px; }
.usp-breadcrumb a { color: #666; text-decoration: underline; }

.usp-hero h1 { font-size: 32px; line-height: 1.25; margin-bottom: 12px; }
.usp-lead { font-size: 17px; line-height: 1.6; color: #333; max-width: 760px; }

.usp-cta { margin-top: 18px; }
.usp-btn {
	display: inline-block; background: #128C7E; color: #fff; padding: 12px 22px;
	border-radius: 6px; text-decoration: none; font-weight: 600;
}
.usp-btn:hover { background: #0e6f63; color: #fff; }

.usp-block { margin-top: 40px; }
.usp-block h2 { font-size: 22px; margin-bottom: 14px; }
.usp-block h3 { font-size: 17px; margin: 0 0 6px; }

.usp-points, .usp-areas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.usp-points li, .usp-areas li { padding-left: 22px; position: relative; }
.usp-points li:before, .usp-areas li:before { content: "✓"; position: absolute; left: 0; color: #128C7E; font-weight: 700; }

@media (max-width: 600px) {
	.usp-points, .usp-areas { grid-template-columns: 1fr; }
}

.usp-faq-item { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.usp-faq-item:last-child { border-bottom: none; }

.usp-contact { background: #f7f7f7; padding: 24px; border-radius: 10px; }

/* Homepage services grid */
.usp-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 24px 0; }
.usp-service-card {
	display: block; padding: 22px; border: 1px solid #e5e5e5; border-radius: 10px;
	text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s;
}
.usp-service-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.usp-service-card h3 { margin: 0 0 8px; font-size: 18px; color: #111; }
.usp-service-card p { margin: 0 0 12px; font-size: 14px; color: #555; }
.usp-card-cta { font-size: 13px; font-weight: 600; color: #128C7E; }

@media (max-width: 900px) {
	.usp-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.usp-services-grid { grid-template-columns: 1fr; }
}

/* Cities directory grid */
.usp-cities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 24px 0; }
.usp-province-block h2 { font-size: 16px; text-transform: uppercase; letter-spacing: .04em; color: #888; margin-bottom: 10px; }
.usp-city-list { list-style: none; margin: 0; padding: 0; }
.usp-city-list li { margin-bottom: 8px; }
.usp-city-list a { text-decoration: none; color: #111; font-weight: 500; }
.usp-city-list a:hover { text-decoration: underline; }

@media (max-width: 700px) {
	.usp-cities-grid { grid-template-columns: 1fr 1fr; }
}

.usp-hub-list { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.usp-hub-list a { text-decoration: none; color: #128C7E; font-weight: 500; }
.usp-hub-list a:hover { text-decoration: underline; }