/*
 * Layout 05 luxury presentation.
 *
 * Shared property cards, form, and quote foundations remain in
 * article_hlp_main.css. This file owns only layout 05's luxury presentation,
 * including the scoped property panel and colour overrides.
 */

.cck_hlp .hlp-layout-05 {
    width: 100%;
}

.cck_hlp .hlp-layout-05 .hlp05-hero .btn-ghost,
.cck_hlp .hlp-layout-05 .hlp05-benefits .btn-ghost,
.cck_hlp .hlp-layout-05 .hlp05-story .btn-ghost,
.cck_hlp .hlp-layout-05 .hlp05-primary-cta .btn-ghost,
.cck_hlp .hlp-layout-05 .hlp05-feature-cta .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0.55rem 2.3rem;
    border: 2px solid #fa911b;
    border-radius: 0;
    background: transparent;
    color: #fa911b;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 160ms ease, color 160ms ease;
}

.cck_hlp .hlp-layout-05 .hlp05-hero .btn-ghost:hover,
.cck_hlp .hlp-layout-05 .hlp05-hero .btn-ghost:focus,
.cck_hlp .hlp-layout-05 .hlp05-benefits .btn-ghost:hover,
.cck_hlp .hlp-layout-05 .hlp05-benefits .btn-ghost:focus,
.cck_hlp .hlp-layout-05 .hlp05-story .btn-ghost:hover,
.cck_hlp .hlp-layout-05 .hlp05-story .btn-ghost:focus,
.cck_hlp .hlp-layout-05 .hlp05-primary-cta .btn-ghost:hover,
.cck_hlp .hlp-layout-05 .hlp05-primary-cta .btn-ghost:focus,
.cck_hlp .hlp-layout-05 .hlp05-feature-cta .btn-ghost:hover,
.cck_hlp .hlp-layout-05 .hlp05-feature-cta .btn-ghost:focus {
    border-color: #fa911b;
    background: #fa911b;
    color: #fff;
    text-decoration: none;
}

/* Luxury hero */
.cck_hlp .hlp-layout-05 .hlp05-hero {
    position: relative;
    display: flex;
    min-height: clamp(620px, 58vw, 920px);
    overflow: hidden;
    background: #10242d;
    isolation: isolate;
}

.cck_hlp .hlp-layout-05 .hlp05-hero__image,
.cck_hlp .hlp-layout-05 .hlp05-feature-cta__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cck_hlp .hlp-layout-05 .hlp05-hero__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(5, 20, 27, 0.48) 0%, rgba(5, 20, 27, 0.16) 58%, rgba(5, 20, 27, 0.08) 100%);
}

.cck_hlp .hlp-layout-05 .hlp05-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: clamp(90px, 10vw, 170px);
    padding-bottom: clamp(180px, 20vw, 310px);
}

.cck_hlp .hlp-layout-05 .hlp05-hero__content {
    width: min(680px, 100%);
    padding: clamp(28px, 4vw, 46px);
    background: rgba(16, 36, 45, 0.72);
    color: #fff;
}

.cck_hlp .hlp-layout-05 .hlp05-hero__content h1 {
    margin: 0 0 20px;
    color: #fff;
    font-size: clamp(2rem, 3.1vw, 3.35rem);
    line-height: 1.12;
}

.cck_hlp .hlp-layout-05 .hlp05-hero__intro,
.cck_hlp .hlp-layout-05 .hlp05-hero__intro p {
    color: #fff;
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    line-height: 1.55;
}

.cck_hlp .hlp-layout-05 .hlp05-hero__intro > :last-child {
    margin-bottom: 0;
}

.cck_hlp .hlp-layout-05 .hlp05-hero__content .btn-ghost {
    margin-top: 28px;
}

/* Normalized property cards presented in the established luxury panel. */
.cck_hlp .hlp-layout-05 .hlp05-properties {
    position: relative;
    z-index: 3;
    margin: 0;
    padding: 45px 0;
    background: #10242d;
    color: #e9e9e9;
}

.cck_hlp .hlp-layout-05 .hlp05-properties__panel {
    margin-top: -215px;
    padding: 40px;
    background: #10242d;
}

.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-section {
    width: min(1053px, 100%);
    margin: 0 auto;
}

.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-properties {
    justify-content: center;
}

.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card {
    border-color: #375160;
    background: #375160;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card__content,
.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card__footer {
    background: #375160;
}

.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card__content h4,
.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card__content span,
.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card__facts span {
    color: #e9e9e9;
    text-shadow: none;
}

.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card__content h4 a {
    color: #77c9f1;
    text-shadow: none;
}

.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card__content h4 a:hover,
.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card__content h4 a:focus {
    color: #fff;
}

.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card__no-image {
    background: #263d48;
    color: #e9e9e9;
}

.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card__facts img {
    width: 25px;
    height: 25px;
}

.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card__facts {
    gap: 5px;
}

.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card__facts span {
    gap: 2px;
    font-size: 0.75rem;
}

.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card .btn-enq {
    border-color: #77c9f1;
    background: #77c9f1;
    color: #fff;
    text-shadow: none;
}

.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card .btn-enq:hover,
.cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card .btn-enq:focus {
    border-color: #fa911b;
    background: #fa911b;
    color: #fff;
}

/* Why Choose / introductory benefits */
.cck_hlp .hlp-layout-05 .hlp05-benefits {
    padding: clamp(80px, 8vw, 125px) 0;
    background: #fff;
    color: #10242d;
    text-align: center;
}

.cck_hlp .hlp-layout-05 .hlp05-benefits__intro {
    width: min(1040px, 100%);
    margin: 0 auto;
}

.cck_hlp .hlp-layout-05 .hlp05-benefits__intro h1,
.cck_hlp .hlp-layout-05 .hlp05-benefits__intro h2,
.cck_hlp .hlp-layout-05 .hlp05-benefits__intro h3 {
    margin-top: 0;
    margin-bottom: 28px;
    color: #10242d;
}

.cck_hlp .hlp-layout-05 .hlp05-benefits__lead,
.cck_hlp .hlp-layout-05 .hlp05-benefits__copy,
.cck_hlp .hlp-layout-05 .hlp05-benefits__intro p {
    color: #10242d;
    font-size: 1.125rem;
    line-height: 1.7;
}

.cck_hlp .hlp-layout-05 .hlp05-benefits__intro > :last-child,
.cck_hlp .hlp-layout-05 .hlp05-benefits__copy > :last-child {
    margin-bottom: 0;
}

.cck_hlp .hlp-layout-05 .hlp05-benefits__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 42px;
}

.cck_hlp .hlp-layout-05 .hlp05-benefit-card {
    display: flex;
    flex: 0 1 calc((100% - 48px) / 3);
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 205px;
    padding: 30px 24px;
    background: #10242d;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    color: #fff;
}

.cck_hlp .hlp-layout-05 .hlp05-benefits--cards-1 .hlp05-benefit-card {
    flex-basis: min(580px, 100%);
}

.cck_hlp .hlp-layout-05 .hlp05-benefits--cards-2 .hlp05-benefit-card {
    flex-basis: calc((100% - 24px) / 2);
}

.cck_hlp .hlp-layout-05 .hlp05-benefit-card h2,
.cck_hlp .hlp-layout-05 .hlp05-benefit-card h3,
.cck_hlp .hlp-layout-05 .hlp05-benefit-card h4,
.cck_hlp .hlp-layout-05 .hlp05-benefit-card p,
.cck_hlp .hlp-layout-05 .hlp05-benefit-card a {
    color: #fff;
}

.cck_hlp .hlp-layout-05 .hlp05-benefit-card h2,
.cck_hlp .hlp-layout-05 .hlp05-benefit-card h3,
.cck_hlp .hlp-layout-05 .hlp05-benefit-card h4 {
    margin-top: 0;
    font-size: 1.4rem;
}

.cck_hlp .hlp-layout-05 .hlp05-benefit-card > :last-child,
.cck_hlp .hlp-layout-05 .hlp05-benefit-card > :last-child > :last-child {
    margin-bottom: 0;
}

/* Alternating luxury stories */
.cck_hlp .hlp-layout-05 .hlp05-stories {
    padding: clamp(80px, 8vw, 120px) 0;
    background: #10242d;
    color: #e9e9e9;
}

.cck_hlp .hlp-layout-05 .hlp05-stories > .container {
    max-width: 1440px;
}

.cck_hlp .hlp-layout-05 .hlp05-story {
    display: flex;
    align-items: center;
    margin-bottom: clamp(70px, 8vw, 115px);
}

.cck_hlp .hlp-layout-05 .hlp05-story:last-child {
    margin-bottom: 0;
}

.cck_hlp .hlp-layout-05 .hlp05-story--reversed {
    flex-direction: row-reverse;
}

.cck_hlp .hlp-layout-05 .hlp05-story__media,
.cck_hlp .hlp-layout-05 .hlp05-story__content {
    width: 54%;
    min-width: 0;
}

.cck_hlp .hlp-layout-05 .hlp05-story__media {
    min-height: clamp(390px, 34vw, 550px);
    overflow: hidden;
}

.cck_hlp .hlp-layout-05 .hlp05-story__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

.cck_hlp .hlp-layout-05 .hlp05-story__content {
    position: relative;
    z-index: 1;
    width: 52%;
    margin-left: -6%;
    padding: clamp(35px, 5vw, 72px);
    background: #10242d;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.cck_hlp .hlp-layout-05 .hlp05-story--reversed .hlp05-story__content {
    margin-right: -6%;
    margin-left: 0;
}

.cck_hlp .hlp-layout-05 .hlp05-story__content h2 {
    margin: 0 0 24px;
    color: #fff;
    font-size: clamp(1.8rem, 2.5vw, 2.35rem);
    line-height: 1.2;
}

.cck_hlp .hlp-layout-05 .hlp05-story__copy,
.cck_hlp .hlp-layout-05 .hlp05-story__copy p {
    color: #e9e9e9;
    font-size: 1.125rem;
    line-height: 1.7;
}

.cck_hlp .hlp-layout-05 .hlp05-story__copy > :last-child {
    margin-bottom: 0;
}

.cck_hlp .hlp-layout-05 .hlp05-story__button {
    margin-top: 26px;
}

/* Existing shared form and quote, scoped spacing refinements only. */
.cck_hlp .hlp-layout-05 .hlp05-form,
.cck_hlp .hlp-layout-05 .hlp05-quote {
    margin: 0;
}

.cck_hlp .hlp-layout-05 .hlp05-primary-cta {
    padding: 0 0 90px;
    background: #fff;
    text-align: center;
}

/* Full-width final image/text feature */
.cck_hlp .hlp-layout-05 .hlp05-feature-cta {
    position: relative;
    display: flex;
    min-height: clamp(520px, 48vw, 760px);
    overflow: hidden;
    background: #10242d;
    isolation: isolate;
}

.cck_hlp .hlp-layout-05 .hlp05-feature-cta__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(16, 36, 45, 0.56) 0%, rgba(16, 36, 45, 0.18) 68%, rgba(16, 36, 45, 0.08) 100%);
}

.cck_hlp .hlp-layout-05 .hlp05-feature-cta__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: 90px;
    padding-bottom: 90px;
}

.cck_hlp .hlp-layout-05 .hlp05-feature-cta__content {
    width: min(560px, 100%);
    padding: clamp(30px, 4vw, 48px);
    background: rgba(16, 36, 45, 0.84);
    color: #e9e9e9;
}

.cck_hlp .hlp-layout-05 .hlp05-feature-cta__content h2 {
    margin: 0 0 24px;
    color: #fff;
    font-size: clamp(1.9rem, 2.7vw, 2.5rem);
    line-height: 1.2;
}

.cck_hlp .hlp-layout-05 .hlp05-feature-cta__copy,
.cck_hlp .hlp-layout-05 .hlp05-feature-cta__copy p {
    color: #e9e9e9;
    font-size: 1.125rem;
    line-height: 1.7;
}

.cck_hlp .hlp-layout-05 .hlp05-feature-cta__copy > :last-child {
    margin-bottom: 0;
}

.cck_hlp .hlp-layout-05 .hlp05-feature-cta__button {
    margin-top: 26px;
}

@media (max-width: 991.98px) {
    .cck_hlp .hlp-layout-05 .hlp05-hero {
        min-height: 680px;
    }

    .cck_hlp .hlp-layout-05 .hlp05-benefit-card {
        flex-basis: calc((100% - 24px) / 2);
    }

    .cck_hlp .hlp-layout-05 .hlp05-story,
    .cck_hlp .hlp-layout-05 .hlp05-story--reversed {
        flex-direction: column;
    }

    .cck_hlp .hlp-layout-05 .hlp05-story__media,
    .cck_hlp .hlp-layout-05 .hlp05-story__content {
        width: 100%;
    }

    .cck_hlp .hlp-layout-05 .hlp05-story__content,
    .cck_hlp .hlp-layout-05 .hlp05-story--reversed .hlp05-story__content {
        margin: -42px 24px 0;
        width: calc(100% - 48px);
    }
}

@media (max-width: 767.98px) {
    .cck_hlp .hlp-layout-05 .hlp05-hero {
        /* Keep enough vertical room for the complete intro above the
         * normalized luxury property panel's overlapping top edge. */
        min-height: 680px;
    }

    .cck_hlp .hlp-layout-05 .hlp05-hero__inner {
        align-items: center;
        padding-top: 90px;
        padding-bottom: 240px;
    }

    .cck_hlp .hlp-layout-05 .hlp05-properties__panel {
        padding: 28px 20px;
    }

    .cck_hlp .hlp-layout-05 .hlp05-benefits {
        padding: 65px 0;
        text-align: left;
    }

    .cck_hlp .hlp-layout-05 .hlp05-benefits__grid {
        gap: 18px;
        margin-top: 32px;
    }

    .cck_hlp .hlp-layout-05 .hlp05-benefit-card,
    .cck_hlp .hlp-layout-05 .hlp05-benefits--cards-2 .hlp05-benefit-card {
        flex-basis: 100%;
        min-height: 0;
    }

    .cck_hlp .hlp-layout-05 .hlp05-stories {
        padding: 65px 0;
    }

    .cck_hlp .hlp-layout-05 .hlp05-story {
        margin-bottom: 65px;
    }

    .cck_hlp .hlp-layout-05 .hlp05-story__media {
        min-height: 300px;
    }

    .cck_hlp .hlp-layout-05 .hlp05-story__content,
    .cck_hlp .hlp-layout-05 .hlp05-story--reversed .hlp05-story__content {
        width: calc(100% - 28px);
        margin: -28px 14px 0;
        padding: 30px 24px;
    }

    .cck_hlp .hlp-layout-05 .hlp05-primary-cta {
        padding-bottom: 65px;
    }

    .cck_hlp .hlp-layout-05 .hlp05-feature-cta__inner {
        align-items: flex-end;
        padding-top: 70px;
        padding-bottom: 70px;
    }
}

@media (max-width: 435px) {
    .cck_hlp .hlp-layout-05 .hlp05-hero {
        min-height: 640px;
    }

    .cck_hlp .hlp-layout-05 .hlp05-hero__content,
    .cck_hlp .hlp-layout-05 .hlp05-feature-cta__content {
        padding: 25px 20px;
    }

    .cck_hlp .hlp-layout-05 .hlp05-properties__panel {
        padding: 20px 14px;
    }

    .cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card__facts img {
        width: 18px;
        height: 18px;
    }

    .cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card__facts {
        gap: 4px;
    }

    .cck_hlp .hlp-layout-05 .hlp05-properties .hlp-selected-property-card__facts span {
        font-size: 0.7rem;
    }

    .cck_hlp .hlp-layout-05 .hlp05-story__media {
        min-height: 230px;
    }

    .cck_hlp .hlp-layout-05 .hlp05-story__content,
    .cck_hlp .hlp-layout-05 .hlp05-story--reversed .hlp05-story__content {
        width: 100%;
        margin: 0;
    }
}