/* Homepage hero and section spacing; reusable styles live in components.css. */
.hero { position: relative; min-height: calc(100svh - var(--header-height)); display: flex; align-items: center; isolation: isolate; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; z-index: -3; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(246,243,238,.94) 0%, rgba(246,243,238,.9) 28%, rgba(246,243,238,.55) 43%, rgba(246,243,238,0) 66%); }
.hero-copy { padding-block: 52px; }
.hero-copy::before { content: ''; display: block; width: 31px; height: 5px; background: var(--blue); margin-bottom: 20px; }
.hero h1 { max-width: 535px; }
.hero p { max-width: 475px; margin: 16px 0 20px; font-size: 18px; letter-spacing: .4px; }
.hero .button { min-width: 196px; }
.services { padding: 24px 0 32px; }
.pricing { padding: 24px 0 22px; }
.faq { padding: 22px 0 20px; }
@media (min-width: 1600px) {
.hero-photo { object-position: center 50%; }
}
@media (max-width: 800px) {
.hero h1 { max-width: 440px; }
.hero p { max-width: 385px; font-size: 17px; }
.hero-photo { object-position: 60% center; }
.hero::before { background: linear-gradient(90deg,rgba(246,243,238,.95),rgba(246,243,238,.85) 36%,rgba(246,243,238,.25) 75%,transparent); }
}
@media (max-width: 600px) {
.hero { align-items: flex-end; min-height: calc(100svh - var(--header-height)); }
.hero-photo { object-position: 68% center; }
.hero::before { background: linear-gradient(0deg,rgba(246,243,238,.98) 0%,rgba(246,243,238,.94) 29%,rgba(246,243,238,.65) 53%,rgba(246,243,238,0) 82%); }
.hero-copy { padding-block: 185px 32px; }
.hero-copy::before { margin-bottom: 16px; }
.hero h1 { max-width: 345px; }
.hero p { margin-top: 14px; font-size: 16px; max-width: 345px; }
.hero .button { min-width: 180px; }
.services, .how, .pricing, .faq { padding-block: 28px; }
}