/* Homepage hero, direction B2 (2026-09-03): text left, photo right, photo
   first on phones. Every size comes from the type-scale variables declared
   in header.html — no hardcoded font-size here, by design. The global h1/p
   rules (uppercase, tracking) are reset explicitly. */
.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1440px;
    margin: 0 auto;
    min-height: 640px;
    background: var(--paper);
}
.hero-split-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 56px 72px 56px 110px;
    text-align: left;
}
.hero-split h1 {
    font-family: var(--font-body);
    font-size: inherit;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    margin: 0;
}
.hero-kicker {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps-wide);
    text-transform: uppercase;
    color: var(--brand-deep);
    margin-bottom: 22px;
}
.hero-title {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    color: var(--ink);
}
.hero-script {
    display: block;
    font-family: var(--font-script);
    font-style: normal;
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    color: var(--brand);
    margin: 4px 0 0 0.55em; /* the script's opening swash reaches left of its box */
}
.hero-lead {
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    line-height: var(--lh-body);
    letter-spacing: 0;
    color: #3d3535;
    max-width: 440px;
    margin: 34px 0 30px; /* the script line's descenders need the extra room */
    text-align: left;
}
.hero-split .btnContainer {
    position: relative; /* blocDuo.css positions .btnContainer absolutely */
    width: 340px;
    height: 60px;
    max-width: 100%;
    margin: 0;
}
.hero-split .trustpilot-line {
    margin-top: 20px;
    font-size: var(--fs-sm);
    opacity: 0.85;
}
/* Breathing room between the hero and the four proof points, and under them */
.hero-split + .trust-strip {
    margin: 48px auto 70px;
    padding: 34px 20px;
}
.hero-split-media {
    position: relative;
    min-height: 640px;
}
.hero-split-media picture,
.hero-split-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%; /* keep the head when the box is wider than the photo (phones in landscape, tablets) */
}
@media screen and (max-width: 1050px) {
    .hero-split-text {
        padding: 44px 36px 44px 40px;
    }
    .hero-title,
    .hero-script {
        font-size: var(--fs-h1);
    }
}
@media screen and (max-width: 780px) {
    .hero-split {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .hero-split-media {
        order: -1;
        min-height: 0;
        height: auto;
        aspect-ratio: 39 / 40; /* the phone variant's own ratio: no crop at all on phones */
        max-height: 520px;     /* wider phones: the box stops growing and the crop keeps the head (object-position) */
    }
    .hero-split-text {
        padding: 28px 24px 12px;
    }
    .hero-kicker {
        margin-bottom: 14px;
    }
    .hero-title,
    .hero-script {
        font-size: var(--fs-display); /* the root scale already shrinks it to 40px here */
    }
    .hero-lead {
        font-size: var(--fs-md);
        margin: 30px 0 22px; /* the script line's descenders reach into the paragraph otherwise */
    }
    .hero-split .btnContainer {
        width: 100%;
    }
    .hero-split .btn {
        width: 100%;
    }
}