.hp-hero {
padding: 4rem 0;
background: var(--color-white);
}
.hero-grid {
display: grid;
grid-template-columns: 60fr 40fr;
gap: 3.5rem;
align-items: start;
}
.hero-grid--no-image {
grid-template-columns: 1fr;
max-width: 760px;
}
.hero-main-img {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}
.hero-main-img img { width: 100%; height: auto; display: block; }
.hero-content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.hero-content h1 {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
color: var(--color-dark);
line-height: 1.12;
font-weight: 800;
}
.hero-subheadline { font-size: 1.05rem; color: var(--color-dark); line-height: 1.6; }
.hero-cta { font-size: 1.05rem; padding: 0.9rem 2rem; }
.trust-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.trust-badge {
font-size: 0.82rem;
font-weight: 600;
color: var(--color-dark-mid);
background: var(--color-grey-light);
padding: 0.3rem 0.75rem;
border-radius: 999px;
border: 1px solid var(--color-border);
}
.hero-supporting {
font-size: 0.88rem;
color: var(--color-dark);
line-height: 1.6;
border-top: 1px solid var(--color-border);
padding-top: 0.75rem;
} .pre-hero-cta {
padding: 1rem 0;
text-align: center;
background: var(--color-white);
}
@media (max-width: 960px) {
.hero-grid { grid-template-columns: 1fr; gap: 2rem; }
}.hp-seo-text {
padding: var(--section-py) 0;
background: var(--color-white);
}
.seo-text-body {
max-width: 800px;
margin: 0 auto;
font-size: 1.05rem;
line-height: 1.75;
color: var(--color-dark);
}
.seo-text-body h2 {
font-family: var(--font-heading);
font-size: 1.6rem;
font-weight: 700;
color: var(--color-dark);
margin: 2.5rem 0 1rem;
}
.seo-text-body h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--color-dark);
margin: 2rem 0 .75rem;
}
.seo-text-body p {
margin-bottom: 1.25rem;
}
.seo-text-body ul, .seo-text-body ol {
margin: 0 0 1.25rem 1.5rem;
}
.seo-text-body li {
margin-bottom: .4rem;
}
.seo-text-body a {
color: var(--color-brand);
text-decoration: underline;
}
.seo-text-body a:hover {
color: var(--color-brand-dark);
}