.g55-bh-section {
--text-main: #111111;
--text-muted: #737373;
--border-color: #eaeaea;
--hero-blue: var(--g55-brand-navy);
padding: 120px max(40px, calc((100vw - 1400px) / 2)) 60px;
background: transparent;
color: var(--text-main);
box-sizing: border-box;
}
.g55-bh-section *,
.g55-bh-section *::before,
.g55-bh-section *::after { box-sizing: border-box; } .g55-bh-section .g55-bh-stage {
position: relative;
border-radius: 32px;
min-height: 720px;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
padding: 64px;
}
.g55-bh-section .g55-bh-stage::before {
content: "";
position: absolute;
inset: 0;
border-radius: 32px;
background-color: var(--hero-blue);
background-image: var(--g55-bh-bg, none);
background-size: cover;
background-position: center bottom;
z-index: 0;
} .g55-bh-section .g55-bh-left {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 40px;
color: #fff;
position: relative;
z-index: 2;
}
.g55-bh-section .g55-bh-headline {
display: flex;
flex-direction: column;
gap: 28px;
}
.g55-bh-section .g55-bh-headline h2 {
margin: 0;
color: #fff;
font-size: var(--g55-h2-size);
line-height: var(--g55-h2-line);
font-weight: var(--g55-h2-weight);
letter-spacing: var(--g55-h2-tracking);
}
.g55-bh-section .g55-bh-meta {
display: flex;
flex-wrap: wrap;
gap: 32px;
align-items: center;
}
.g55-bh-section .g55-bh-meta-item {
display: inline-flex;
align-items: center;
gap: 10px;
color: #fff;
font-size: 15px;
}
.g55-bh-section .g55-bh-meta-icon {
width: 30px;
height: 30px;
border-radius: 8px;
background: rgba(255,255,255,0.18);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.g55-bh-section .g55-bh-meta-icon svg {
width: 14px;
height: 14px;
color: #fff;
} .g55-bh-section .g55-bh-stephen-card {
background: #fff;
border-radius: 18px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 16px;
max-width: 300px;
box-shadow: 0 14px 36px rgba(0,0,0,0.10);
}
.g55-bh-section .g55-bh-stephen-row {
display: flex;
gap: 14px;
align-items: flex-start;
}
.g55-bh-section .g55-bh-stephen-img {
width: 48px;
height: 48px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
.g55-bh-section .g55-bh-stephen-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.g55-bh-section .g55-bh-stephen-name {
color: var(--text-main);
font-size: 15px;
font-weight: 600;
line-height: 1.3;
}
.g55-bh-section .g55-bh-stephen-desc {
color: var(--text-muted);
font-size: 13px;
}
.g55-bh-section .g55-bh-ask-btn {
background: #000;
color: #fff;
border: none;
border-radius: 30px;
padding: 11px 20px;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
width: fit-content;
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: opacity 0.2s;
}
.g55-bh-section .g55-bh-ask-btn:hover { opacity: 0.85; }
.g55-bh-section .g55-bh-ask-btn svg { width: 13px; height: 13px; } .g55-bh-section .g55-bh-right {
position: relative;
z-index: 2;
margin-top: -80px;
margin-bottom: -80px;
align-self: start;
}
.g55-bh-section .g55-bh-form-card {
background: #fff;
border-radius: 24px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: 0 22px 52px rgba(0,0,0,0.12);
}
.g55-bh-section .g55-bh-form-title {
margin: 0;
color: var(--text-main);
font-size: 26px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.01em;
}
.g55-bh-section .g55-bh-form-title .g55-grey {
color: var(--g55-brand-navy);
display: block;
font-weight: 600;
}
.g55-bh-section .g55-bh-form-intro {
color: var(--text-muted);
margin: 0;
font-size: 14px;
line-height: 1.5;
}
.g55-bh-section .g55-bh-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.g55-bh-section .g55-bh-field label {
color: var(--text-main);
font-size: 14px;
font-weight: 500;
}
.g55-bh-section .g55-bh-field input,
.g55-bh-section .g55-bh-field textarea {
background: #f3f3f3;
border: 1px solid transparent;
border-radius: 12px;
padding: 14px 16px;
color: var(--text-main);
width: 100%;
font-family: inherit;
font-size: 14px;
transition: border-color 0.2s, background 0.2s;
}
.g55-bh-section .g55-bh-field input::placeholder,
.g55-bh-section .g55-bh-field textarea::placeholder {
color: #a3a3a3;
}
.g55-bh-section .g55-bh-field input:focus,
.g55-bh-section .g55-bh-field textarea:focus {
outline: none;
border-color: var(--g55-brand-navy);
background: #fff;
}
.g55-bh-section .g55-bh-field textarea {
resize: vertical;
min-height: 110px;
}
.g55-bh-section .g55-bh-submit {
background: #8a8a8a;
color: #fff;
border: none;
border-radius: 30px;
padding: 14px 22px;
cursor: pointer;
width: 100%;
margin-top: 4px;
font-size: 14px;
font-weight: 500;
transition: background 0.2s;
}
.g55-bh-section .g55-bh-submit:hover:not(:disabled) { background: #111; }
.g55-bh-section .g55-bh-submit:disabled { cursor: not-allowed; opacity: 0.85; }
.g55-bh-section .g55-bh-form-note {
color: var(--text-muted);
margin: 4px 0 0;
font-size: 12px;
line-height: 1.4;
font-style: italic;
} .g55-bh-section .g55-bh-form-embed .wpcf7-form { gap: 14px; }
.g55-bh-section .g55-bh-form-embed .wpcf7-form input[type="text"],
.g55-bh-section .g55-bh-form-embed .wpcf7-form input[type="email"],
.g55-bh-section .g55-bh-form-embed .wpcf7-form input[type="tel"],
.g55-bh-section .g55-bh-form-embed .wpcf7-form input[type="url"],
.g55-bh-section .g55-bh-form-embed .wpcf7-form input[type="number"],
.g55-bh-section .g55-bh-form-embed .wpcf7-form textarea,
.g55-bh-section .g55-bh-form-embed .wpcf7-form select {
padding: 12px 14px;
font-size: 14px;
}
.g55-bh-section .g55-bh-form-embed .wpcf7-form select {
background-position: right 14px center;
padding-right: 38px;
}
.g55-bh-section .g55-bh-form-embed .wpcf7-form textarea {
min-height: 100px;
} .g55-bh-section .g55-bh-form-embed .wpcf7-form label {
gap: 6px;
} @media (max-width: 992px) {
.g55-bh-section { padding: 60px 20px; }
.g55-bh-section .g55-bh-stage {
grid-template-columns: 1fr;
padding: 40px 28px;
min-height: 0;
}
.g55-bh-section .g55-bh-left { gap: 32px; }
.g55-bh-section .g55-bh-right {
margin-top: 0;
margin-bottom: 0;
}
}
@media (max-width: 560px) {
.g55-bh-section { padding: 40px 16px; }
.g55-bh-section .g55-bh-stage {
padding: 32px 20px;
border-radius: 24px;
}
.g55-bh-section .g55-bh-stage::before { border-radius: 24px; }
.g55-bh-section .g55-bh-meta { gap: 16px; }
.g55-bh-section .g55-bh-form-card { padding: 24px; border-radius: 20px; }
.g55-bh-section .g55-bh-form-title { font-size: 24px; }
.g55-bh-section .g55-bh-stephen-card { max-width: 100%; }
}