.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);
}.hp-faq {
padding: var(--section-py) 0;
background: var(--color-white);
}
.faq-grid {
display: block;
max-width: 780px;
margin: 0 auto;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 0;
margin-top: 0.5rem;
border-top: 1px solid var(--color-border);
}
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 0.75rem;
border-radius: var(--radius-sm, 4px);
font-size: 0.97rem;
font-weight: 600;
color: var(--color-dark);
text-align: left;
transition: color var(--transition);
background: none;
border: none;
cursor: pointer;
font-family: inherit;
}
.faq-question:hover,
.faq-question:focus,
.faq-question:active,
.faq-question:focus-visible {
color: var(--color-dark);
background: none;
outline: none;
box-shadow: none;
}
.faq-icon {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--color-grey-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 400;
line-height: 1;
transition: background var(--transition), color var(--transition);
color: var(--color-dark);
}
.faq-item.is-open .faq-question {
background: none;
color: var(--color-dark);
}
.faq-item.is-open .faq-icon {
background: var(--color-grey-light);
color: var(--color-dark);
}
.faq-answer { display: none; padding: 0 0.75rem 1.1rem; }
.faq-item.is-open .faq-answer { display: block; }
.faq-answer p { font-size: 0.92rem; color: var(--color-dark); line-height: 1.7; }.hp-cta-banner {
background: var(--color-dark);
padding: var(--section-py) 0;
color: var(--color-white);
}
.cta-banner-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.hp-cta-banner .cta-copy h2,
.hp-cta-banner .cta-copy h2 * {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF;
margin-bottom: 1rem;
line-height: 1.14;
font-weight: 800;
}
.cta-sub {
font-size: 1rem;
color: rgba(255,255,255,0.72);
line-height: 1.65;
margin-bottom: 1.25rem;
}
.cta-action {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.cta-bullets {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.cta-bullets li {
position: relative;
padding-left: 1.5rem;
font-size: 1rem;
color: rgba(255,255,255,0.85);
line-height: 1.6;
}
.cta-bullets li::before {
content: '\2713';
position: absolute;
left: 0;
color: var(--color-brand);
font-weight: 700;
}
.cta-bullets a {
color: var(--color-brand);
text-decoration: underline;
}
.cta-btn {
font-size: 1.05rem;
padding: 0.9rem 2.25rem;
}
@media (max-width: 960px) {
.cta-banner-inner { grid-template-columns: 1fr; }
}