/* ============================================================
   Single Area Page Styles
   ============================================================ */

/* 1. Hero */
.area-hero {
	position: relative;
	background: var(--nb-ink) var(--hero-bg,none) center/cover no-repeat;
	min-height: 100vh;
	display: flex;
	align-items: center;
}
.area-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(17,18,20,.82) 38%, rgba(17,18,20,.38));
}
.area-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 480px;
	gap: 48px;
	align-items: start;
	padding: 120px 0 80px;
}
.area-hero__content { color: #fff; }
.area-hero__content h1 { font-size: clamp(1.9rem,4.5vw,3rem); line-height: 1.15; margin: 12px 0 16px; }
.area-hero__content p { color: rgba(255,255,255,.82); font-size: 1.06rem; max-width: 540px; margin-bottom: 20px; }
.area-hero__trust { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.area-hero__trust li { background: rgba(255,198,39,.15); color: var(--nb-yellow); border: 1px solid rgba(255,198,39,.3); border-radius: 20px; padding: 5px 12px; font-size: .82rem; font-weight: 600; }
@media (max-width: 960px) {
	.area-hero__grid { grid-template-columns: 1fr; gap: 40px; padding: 100px 0 60px; }
	.area-hero { min-height: auto; }
}

/* 2. Intro grid */
.area-intro__grid { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; }
.area-intro__content p { color: var(--nb-muted); line-height: 1.75; margin-bottom: 14px; }
.inspector-card { background: #fff; border: 2px solid #f0f0f0; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.08); }
.inspector-card img { width: 100%; height: 280px; object-fit: cover; object-position: top; display: block; }
.inspector-card__info { padding: 24px; }
.inspector-card__info strong { display: block; font-size: 1.1rem; margin-bottom: 2px; }
.inspector-card__info > span { font-size: .88rem; color: var(--nb-muted); display: block; margin-bottom: 16px; }
.inspector-card__info ul { list-style: none; padding: 0; margin: 0 0 16px; font-size: .87rem; }
.inspector-card__info ul li { padding: 4px 0; border-bottom: 1px solid #f5f5f5; }
.inspector-card__info ul li:last-child { border: none; }
.inspector-card__info a { font-size: .88rem; font-weight: 600; color: var(--nb-yellow); }
@media (max-width: 860px) { .area-intro__grid { grid-template-columns: 1fr; } }

/* 3. Services grid on area page — flex for orphan centering */
.services-grid--4col { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.service-card-area { flex: 0 1 calc(25% - 14px); min-width: 220px; }
.service-card-area { background: #fff; border: 2px solid #f0f0f0; border-radius: 16px; padding: 22px 18px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.service-card-area:hover { border-color: var(--nb-yellow); transform: translateY(-3px); }
.service-card-area h3 { font-size: .93rem; margin: 0; }
.service-card-area p { font-size: .84rem; color: var(--nb-muted); margin: 0; flex: 1; }
.service-card-area__link { font-size: .82rem; font-weight: 600; color: var(--nb-yellow); margin-top: auto; }
@media (max-width: 900px) { .service-card-area { flex: 0 1 calc(50% - 9px); } }
@media (max-width: 480px) { .service-card-area { flex: 0 1 100%; } }

/* 4. Why local stats panel */
.area-why-local__grid { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: center; }
.why-stats-panel { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.why-stat-card { background: #fff; border-radius: 18px; padding: 28px 20px; text-align: center; border: 2px solid #f0f0f0; }
.why-stat-card strong { display: block; font-size: 2rem; font-weight: 900; color: var(--nb-yellow); line-height: 1; margin-bottom: 8px; }
.why-stat-card span { font-size: .85rem; color: var(--nb-muted); line-height: 1.4; }
@media (max-width: 860px) { .area-why-local__grid { grid-template-columns: 1fr; } }

/* 5. Common issues */
.issues-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 36px; }
.issue-item { display: flex; gap: 14px; align-items: flex-start; background: #fff; padding: 20px; border-radius: 14px; border-left: 4px solid var(--nb-yellow); }
.issue-item svg { width: 22px; height: 22px; color: var(--nb-yellow); flex-shrink: 0; margin-top: 1px; }
.issue-item span { font-size: .92rem; color: var(--nb-ink); font-weight: 500; }
@media (max-width: 760px) { .issues-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .issues-grid { grid-template-columns: 1fr; } }

/* 6. Process (reuses .process-grid from services.css) */

/* 7. Area page certs bar (reuses .badge-wall from areas.css) */

/* 8. Nearby areas — flex for orphan centering (overrides global grid if any) */
.area-single .area-grid,
.area-nearby .area-grid,
.area-related-svcs .area-grid,
.svc-areas .area-grid,
.services-areas .area-grid {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
}
.area-card { background: #fff; border: 2px solid #f0f0f0; border-radius: 16px; padding: 22px 18px; flex: 0 1 calc(25% - 12px); min-width: 150px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.area-card:hover { border-color: var(--nb-yellow); transform: translateY(-3px); }
.area-card h3 { font-size: 1.05rem; margin: 0; }
.area-card small { font-size: .83rem; color: var(--nb-yellow); font-weight: 600; }
.area-card--sm { flex: 0 1 calc(20% - 13px); min-width: 140px; }
.area-card--sm h3 { font-size: .95rem; }
.area-nearby__extra { background: #f8f9fa; border-radius: 12px; padding: 16px 20px; text-align: center; margin-top: 20px; }
@media (max-width: 860px) { .area-card { flex: 0 1 calc(33.333% - 11px); } }
@media (max-width: 540px) { .area-card { flex: 0 1 calc(50% - 8px); } }
@media (max-width: 380px) { .area-card { flex: 0 1 100%; } }

/* 9. Reviews (shared) */

/* 10. FAQ (shared from services.css) */

/* 11. Local market section */
.area-market-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; margin-top: 40px; }
.area-market-card { background: #fff; border: 2px solid #f0f0f0; border-radius: 18px; padding: 28px 24px; }
.area-market-card__icon { width: 52px; height: 52px; background: #fff9e6; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; }
.area-market-card__icon svg.nbpi-icon { width: 24px; height: 24px; color: var(--nb-yellow); }
.area-market-card h3 { font-size: 1rem; margin-bottom: 10px; }
.area-market-card p { font-size: .9rem; color: var(--nb-muted,#4d535c); margin: 0; line-height: 1.7; }
@media (max-width: 700px) { .area-market-grid { grid-template-columns: 1fr; } }

/* 12. Scheduling section */
.area-sched__grid { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; }
.area-sched__features { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0; }
.area-sched-feat { display: flex; gap: 14px; align-items: flex-start; }
.area-sched-feat__icon { width: 40px; height: 40px; background: #fff9e6; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.area-sched-feat__icon svg.nbpi-icon { width: 20px; height: 20px; color: var(--nb-yellow); }
.area-sched-feat strong { display: block; font-size: .9rem; margin-bottom: 2px; }
.area-sched-feat span { font-size: .83rem; color: var(--nb-muted,#4d535c); }
.area-sched__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.area-sched__form-card { background: #fff; border: 2px solid #f0f0f0; border-radius: 20px; padding: 32px 28px; }
.area-sched__form-card h3 { margin-bottom: 20px; font-size: 1.05rem; }
.area-sched__checklist { list-style: none; padding: 0; margin: 0 0 24px; }
.area-sched__checklist li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f5f5f5; font-size: .9rem; }
.area-sched__checklist li:last-child { border-bottom: none; }
.area-sched__checklist li svg.nbpi-icon { width: 16px; height: 16px; color: var(--nb-yellow); flex-shrink: 0; }
@media (max-width: 960px) { .area-sched__grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .area-sched__features { grid-template-columns: 1fr; } }

/* 13. Related services grid — duplicated here because service-single.css isn't loaded on area pages */
.related-services-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 36px; }
.related-svc-card { flex: 0 1 calc(25% - 15px); min-width: 220px; background: #fff; border: 2px solid #f0f0f0; border-radius: 16px; padding: 24px 20px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.related-svc-card:hover { border-color: var(--nb-yellow); transform: translateY(-3px); }
.related-svc-card h3 { font-size: .97rem; margin: 0; }
.related-svc-card p { font-size: .87rem; color: var(--nb-muted); margin: 0; flex: 1; }
.related-svc-card span { font-size: .85rem; font-weight: 600; color: var(--nb-yellow); }
.related-services-grid--3 .related-svc-card { flex: 0 1 calc(33.333% - 14px); }
@media (max-width: 860px) { .related-svc-card { flex: 0 1 calc(50% - 10px); } }
@media (max-width: 500px) { .related-svc-card { flex: 0 1 100%; } }