/* Shared reconstruction for Royale concierge, chef, chauffeur and wellness services. */
body.royale-service-page .legacy-page {
    --service-hero: none;
    padding: 0 0 6rem;
    background: var(--color-bg-light);
}

body.royale-service-page .legacy-page .container {
    max-width: 1120px;
}

body.royale-service-page .legacy-page h1,
body.royale-service-page .legacy-page .container > h2:first-child {
    width: 100vw;
    min-height: 425px;
    margin: 0 0 5.5rem calc(50% - 50vw);
    padding: 11rem 2rem 4rem;
    display: grid;
    place-items: center;
    text-align: center;
    color: #fff;
    background: linear-gradient(rgb(7 15 30 / 52%), rgb(7 15 30 / 52%)), var(--service-hero) center / cover no-repeat;
}

body.royale-service-page .legacy-page h1 + h2,
body.royale-service-page .legacy-page .container > h2:nth-child(2) {
    max-width: 840px;
    margin: 0 auto 1.5rem;
    text-align: center;
    color: var(--color-primary);
}

body.royale-service-page .legacy-page p {
    max-width: 760px;
    margin: 0 auto 1.5rem;
    color: var(--color-text-muted);
    font-size: 1.06rem;
    line-height: 1.8;
}

body.royale-service-page .legacy-page h2 {
    max-width: 760px;
    margin: 4.5rem auto 1rem;
    color: var(--color-primary);
}

body.royale-service-page .legacy-page h2 + h2 {
    margin-top: 1.25rem;
    font-size: 1.55rem;
    color: var(--color-secondary);
}

body.royale-service-page .legacy-page figure {
    display: inline-flex;
    width: calc(33.333% - 1.2rem);
    min-height: 155px;
    margin: 2.5rem .45rem 1rem;
    align-items: center;
    justify-content: center;
    vertical-align: top;
}

body.royale-service-page .legacy-page figure img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-medium);
}

body.royale-service-page .legacy-page figure + h2 {
    display: inline-block;
    width: calc(33.333% - 1.2rem);
    margin: 0 .45rem 1rem;
    padding: 0 .4rem;
    vertical-align: top;
    font-size: 1.35rem;
}

body.royale-service-page .legacy-page figure + h2 + p {
    display: inline-block;
    width: calc(33.333% - 1.2rem);
    margin: 0 .45rem 2rem;
    padding: 0 .4rem;
    vertical-align: top;
    font-size: .96rem;
}

body.royale-concierge-page .legacy-page { --service-hero: url('../images/services/royale-concierge/hero.webp'); }
body.royale-chef-page .legacy-page { --service-hero: url('../images/services/royale-chef/hero.webp'); }
body.royale-chauffeur-page .legacy-page { --service-hero: url('../images/services/royale-chauffeur/hero.webp'); }
body.royale-massage-page .legacy-page { --service-hero: url('../images/services/royale-massage/hero.webp'); }

@media (max-width: 760px) {
    body.royale-service-page .legacy-page .container { padding: 0 1.25rem; }
    body.royale-service-page .legacy-page h1,
    body.royale-service-page .legacy-page .container > h2:first-child { min-height: 330px; margin-bottom: 4rem; padding-top: 9rem; }
    body.royale-service-page .legacy-page figure,
    body.royale-service-page .legacy-page figure + h2,
    body.royale-service-page .legacy-page figure + h2 + p { width: 100%; margin-left: 0; margin-right: 0; }
}