/* The header floats over the purple, as it does on the simple hero. Repeated
   here because a section stylesheet only loads with its own layout, so a page
   that opens with this hero never loads that one. */
.section-builder-hero-view .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
}

.service-hero {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: var(--color-primary);
    color: var(--color-white);
    isolation: isolate;
}

/* A screen tall with the copy centred on it. The block padding keeps the copy
   clear of the floating header on short screens, and it is the same top and
   bottom so the centre does not move on tall ones. */
.service-hero__inner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding-block: 7.5rem;
}

.service-hero__content {
    position: relative;
    z-index: 1;
    min-width: 0;
}

/* The measure sets a long title on two lines, as the package mockups do, and
   leaves room for a short one like Ready to start's to stay on one. */
.service-hero__title {
    max-width: 13em;
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-style: italic;
    font-weight: var(--fw-bold);
    line-height: var(--lh-display);
    letter-spacing: 0;
    text-wrap: balance;
}

/* The measure puts the design's break after "pet parents". It is in em so the
   break holds while the type scales down. The design sets the two lines
   looser than the title3 default. */
.service-hero__subtitle {
    max-width: 25.75em;
    margin: 2rem 0 0;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-title3);
    font-weight: var(--fw-medium);
    line-height: 1.3;
    letter-spacing: 0;
    text-wrap: pretty;
}

.service-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.service-hero__fact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.service-hero__fact-label {
    margin: 0;
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: var(--fw-semibold);
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.service-hero__fact-value {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: var(--text-title3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-title3);
    letter-spacing: 0;
}

.service-hero__actions {
    position: relative;
    margin-top: 3rem;
}

/* Paint and a base size. The shared button size (global.css) only arrives with
   .btn-fx-ready, which main.js adds, so this is what shows before it runs. */
.service-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-accent-01);
    border-radius: 999px;
    background: var(--color-accent-01);
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--text-title6);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-title6);
    text-decoration: none;
    white-space: nowrap;
}

/* Two faint lines hang from under the button to the bottom of the screen. They
   are drawn a screen long and the section's overflow cuts them at its edge.
   The left one is the brighter; the right one starts lower and stays fainter,
   as in the design. */
.service-hero__actions::before,
.service-hero__actions::after {
    content: "";
    position: absolute;
    top: 100%;
    width: 1px;
    height: 100vh;
    pointer-events: none;
}

.service-hero__actions::before {
    left: 4.125rem;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--color-secondary) 12%, transparent),
        color-mix(in srgb, var(--color-secondary) 28%, transparent) 12.5rem,
        color-mix(in srgb, var(--color-secondary) 20%, transparent) 16rem
    );
}

.service-hero__actions::after {
    left: 9.5rem;
    background: linear-gradient(
        to bottom,
        transparent 3rem,
        color-mix(in srgb, var(--color-secondary) 18%, transparent) 9rem
    );
}

/* Bottom right, hanging 12px past the column as in the design. */
.service-hero__image {
    position: absolute;
    right: calc(var(--container-pad) - 0.75rem);
    bottom: 3.6875rem;
    z-index: 0;
    display: block;
    width: clamp(11rem, 19vw, 17.6875rem);
    height: auto;
    pointer-events: none;
}

@media (max-width: 768px) {
    .service-hero__inner {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        padding-block: 7rem 2.5rem;
    }

    /* No designed break to keep here, so even out the lines instead of
       leaving one word on the last. */
    .service-hero__subtitle {
        text-wrap: balance;
    }

    .service-hero__facts {
        gap: 1rem 1.5rem;
    }

    .service-hero__fact {
        gap: 0.25rem;
    }

    .service-hero__fact-label {
        font-size: 0.875rem;
    }

    .service-hero__actions {
        margin-top: 2.5rem;
    }

    .service-hero__image {
        position: relative;
        right: auto;
        bottom: auto;
        align-self: flex-end;
        width: clamp(10rem, 46vw, 13.75rem);
        margin: 2.5rem -0.5rem 0 0;
    }
}