/* Homepage composition only. Shared styles live in components.css. */
.hero { position: relative; isolation: isolate; min-height: calc(100svh - var(--header-height)); display: flex; align-items: flex-end; padding-block: 64px; }
.hero-photo { position: absolute; inset: 0; z-index: -2; }
.hero-photo img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 48%; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #18283935 0%, #18283910 40%, transparent 68%); }
.hero-card { background: var(--color-white); box-shadow: var(--shadow); padding: 32px; width: 592px; max-width: calc(100% + 16px); margin-left: -40px; }
.hero-card p { font-size: 20px; line-height: 1.5; margin-top: 16px; }
.hero-actions { display: flex; gap: 24px; margin-top: 24px; }
.hero-actions .button { flex: 1; }
.trust { padding-block: 32px; border-bottom: 1px solid var(--color-line); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; }
.services { padding-block: 32px 40px; }
.services .photo-panel { margin-right: min(-6.7vw, calc((1248px - 100vw) / 2)); }
@media (min-width: 801px) {
.services .photo-panel { align-self: stretch; margin-bottom: 0; }
.services .photo-panel img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}
.services-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }
.how { background: var(--color-navy); color: var(--color-white); padding-block: 32px 40px; }
.how h2, .how h3 { color: var(--color-white); }
.pricing { background: var(--color-paper); padding-block: 32px 40px; }
.about { padding-block: 48px; }
.about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.about .photo-panel img { aspect-ratio: 5 / 4; object-position: 74% center; }
.about .photo-panel figcaption { left: auto; right: -40px; bottom: 24px; width: 240px; }
.about-copy p { margin-top: 16px; }
.reviews { padding-block: 32px 40px; border-top: 1px solid var(--color-line); }
.faq { background: var(--color-paper); padding-block: 40px 48px; }
.how :focus-visible { outline-color: var(--color-amber); }
@media (max-width: 1100px) {
.hero-card { width: 544px; margin-left: -16px; }
.services-grid { grid-template-columns: 1.2fr .8fr; gap: 40px; }
.about-grid { gap: 56px; }
}
@media (max-width: 800px) {
.hero { padding-block: 40px; }
.hero-card { margin-left: 0; max-width: 100%; width: 544px; }
.hero-photo img { object-position: 66% center; }
.trust-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
.services-grid { grid-template-columns: 1fr; gap: 32px; }
.services .photo-panel { margin-left: 40px; margin-right: 0; }
.about-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.about .photo-panel img { aspect-ratio: 3 / 4; }
.about .photo-panel figcaption { right: -24px; width: 216px; }
.about-copy p { font-size: 17px; }
}
@media (max-width: 600px) {
.hero { padding-top: 224px; padding-bottom: 32px; }
.hero-card { padding: 24px; }
.hero-card p { font-size: 18px; }
.hero-actions { flex-direction: column; gap: 12px; }
.hero-photo img { object-position: 70% center; }
.trust { padding-block: 32px; }
.trust-grid { gap: 24px 16px; }
.services .photo-panel { margin-left: 24px; }
.how { padding-block: 32px; }
.about-grid { grid-template-columns: 1fr; }
.about { padding-block: 40px; }
.about-grid { gap: 32px; }
.about .photo-panel { margin-right: 24px; }
.about .photo-panel img { aspect-ratio: 5 / 4; }
.about .photo-panel figcaption { bottom: 16px; }
.about-copy p { font-size: 18px; }
}