/**
 * Page Heroes (About, Contact, Pricing) — Shared Pure CSS
 */

/* ═══ About Hero ═══ */
.sh-about-hero { position: relative; width: 100%; min-height: 60vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #111; }
@media (min-width: 768px) { .sh-about-hero { min-height: 70vh; } }

.sh-about-hero__image { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; }
.sh-about-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.8) 100%); z-index: 1; }

.sh-about-hero__container { max-width: 800px; margin: 0 auto; padding: 6rem 1.5rem; position: relative; z-index: 10; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }

.sh-about-hero__badge { display: inline-block; padding: 0.375rem 1.25rem; border-radius: 2px; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); color: #fff; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.sh-about-hero__title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; color: #fff; margin: 0; text-transform: uppercase; letter-spacing: -0.025em; line-height: 1; text-shadow: 0 2px 20px rgba(0,0,0,0.3); }

.sh-about-hero__subtitle { font-size: clamp(1rem, 2.5vw, 1.375rem); font-weight: 300; color: rgba(255,255,255,0.85); margin: 0; font-style: italic; letter-spacing: 0.05em; }

/* ═══ Contact Hero ═══ */
.sh-contact-hero { position: relative; padding: 8rem 0; background: #111827; overflow: hidden; }
@media (min-width: 1024px) { .sh-contact-hero { padding: 12rem 0; } }

.sh-contact-hero__image { position: absolute; inset: 0; z-index: 0; opacity: 0.4; background-size: cover; background-position: center; }
.sh-contact-hero__fade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, #111827, rgba(17,24,39,0.6), rgba(17,24,39,0.3)); }

.sh-contact-hero__container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; position: relative; z-index: 10; text-align: center; }

.sh-contact-hero__label { display: block; color: var(--pi-secondary, #ffb703); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.875rem; margin-bottom: 1rem; }

.sh-contact-hero__title { font-size: 2.25rem; font-weight: 900; color: #fff; margin: 0 0 1.5rem; line-height: 1.15; }
@media (min-width: 768px) { .sh-contact-hero__title { font-size: 3rem; } }
@media (min-width: 1024px) { .sh-contact-hero__title { font-size: 3.75rem; } }

.sh-contact-hero__title-accent { background: linear-gradient(to right, var(--pi-primary, #007d3d), var(--pi-secondary, #ffb703)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.sh-contact-hero__desc { color: #d1d5db; font-size: 1.125rem; max-width: 42rem; margin: 0 auto; line-height: 1.625; }