.pp-hero { position: relative; background: var(--pp-colour-surface); overflow: hidden; }
.pp-hero picture { display: block; }
.pp-hero picture, .pp-hero-image { width: 100%; }
.pp-hero-image { display: block; height: auto; }
.pp-hero-inner { position: absolute; inset: 0; z-index: 2; }
.pp-hero-awards { position: absolute; top: 44%; right: clamp(1rem, 4vw, 4.5rem); z-index: 4; display: flex; align-items: flex-start; justify-content: flex-end; gap: clamp(.25rem, 1vw, .8rem); width: min(32vw, 30rem); transform: translateY(-50%); pointer-events: none; filter: drop-shadow(0 .5rem .8rem color-mix(in srgb, var(--pp-colour-primary) 20%, transparent)); }
.pp-hero-awards img { display: block; flex: 1 1 0; width: 48%; max-width: 15rem; height: auto; }
.pp-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--pp-colour-surface-98) 0%, var(--pp-colour-surface-94) 22%, var(--pp-colour-surface-72) 36%, color-mix(in srgb, var(--pp-colour-surface) 8%, transparent) 54%, transparent 68%); pointer-events: none; }
.pp-hero-title sup { position: relative; top: -.25em; color: var(--pp-colour-accent); }
.pp-hero-title { font-size: clamp(2.1rem, 3.8vw, 5.25rem); line-height: 1.16; }
.pp-hero-title span { display: block; color: var(--pp-colour-accent); }
.pp-hero-title .pp-hero-title-line { margin-top: .12em; color: var(--pp-colour-primary); font-size: .72em; line-height: 1.16; }
.pp-hero-title .pp-hero-title-emphasis { display: inline; color: var(--pp-colour-accent); }
.pp-hero-eyebrow { color: var(--pp-colour-primary); transform-origin: left center; }
.pp-hero-eyebrow span { display: block; }
.pp-hero-eyebrow-line-with-motif { display: flex !important; align-items: center; gap: .35rem; width: max-content; }
.pp-hero-motif { display: inline-block; width: clamp(2.25rem, 3.5vw, 3.5rem); height: auto; margin-left: .2rem; vertical-align: middle; transform: translateY(-.2rem) rotate(-6deg); }
.pp-hero-separator { width: 3.25rem; height: .2rem; margin: 0 0 1.25rem; border-radius: 999px; background: var(--pp-colour-accent); }
.pp-hero--title-solid .pp-hero-title span { color: var(--pp-colour-primary); }
.pp-hero-star { margin-top: .5rem; margin-bottom: clamp(.65rem, 1.3vw, 1.5rem); padding-left: .15rem; color: var(--pp-colour-primary); }
.pp-hero-star sup { margin-right: .15rem; color: var(--pp-colour-accent); }
.pp-hero-star-icon { margin-right: .35rem; color: var(--pp-colour-accent); }
.pp-hero-detail .mb-4 { margin-bottom: clamp(.65rem, 1.3vw, 1.5rem) !important; }
.pp-hero-detail-panel { display: none; }
.pp-hero-action-whatsapp { display: none !important; }

.pp-hero--bleed-image {
    /* The panel owns the hero height; the image is allowed to crop/bleed. */
    height: clamp(28rem, 34vw, 38rem);
    overflow: visible;
    isolation: isolate;
    z-index: 1;
}

.pp-hero--bleed-image picture {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: clamp(-7rem, -9vw, -5rem);
    width: min(68%, 76rem);
}

.pp-hero--bleed-image .pp-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right 72%;
}

@media (min-width: 992px) {
    .pp-hero--bleed-image picture {
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 24%, black 100%);
        mask-image: linear-gradient(90deg, transparent 0%, black 24%, black 100%);
    }

    .pp-hero--bleed-image.pp-hero--radial-fade picture {
        -webkit-mask-image: radial-gradient(ellipse 135% 125% at 0% 0%, transparent 0%, rgba(0, 0, 0, .16) 28%, black 66%, black 100%);
        mask-image: radial-gradient(ellipse 135% 125% at 0% 0%, transparent 0%, rgba(0, 0, 0, .16) 28%, black 66%, black 100%);
    }
}

.pp-hero--bleed-image::after {
    background: linear-gradient(
        90deg,
        var(--pp-hero-background, var(--pp-colour-surface)) 0%,
        color-mix(in srgb, var(--pp-hero-background, var(--pp-colour-surface)) 92%, transparent) 24%,
        color-mix(in srgb, var(--pp-hero-background, var(--pp-colour-surface)) 36%, transparent) 54%,
        transparent 78%
    );
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 78%, transparent 100%);
}

.pp-hero--bleed-image.pp-hero--radial-fade::after {
    z-index: 1;
    background:
        radial-gradient(ellipse 78% 118% at 0% 0%,
            var(--pp-hero-background, var(--pp-colour-surface)) 0%,
            color-mix(in srgb, var(--pp-hero-background, var(--pp-colour-surface)) 94%, transparent) 28%,
            color-mix(in srgb, var(--pp-hero-background, var(--pp-colour-surface)) 58%, transparent) 52%,
            transparent 82%),
        linear-gradient(to bottom, transparent 68%, color-mix(in srgb, var(--pp-colour-page) 76%, transparent) 90%, var(--pp-colour-page) 100%);
    -webkit-mask-image: none;
    mask-image: none;
}

.pp-hero--bleed-image::before {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: clamp(-7rem, -9vw, -5rem);
    left: 0;
    height: 34%;
    background: linear-gradient(transparent, var(--pp-colour-page));
    content: "";
    pointer-events: none;
}

.pp-hero--bleed-image .pp-hero-inner { z-index: 3; }

@media (min-width: 992px) {
    .pp-hero-star { margin-top: -1.5rem; margin-bottom: 2rem; }
    .pp-hero-detail-panel { display: none; }
}

@media (max-width: 991.98px) {
    .pp-hero-inner { position: relative; inset: auto; padding-top: 3rem; padding-bottom: 3rem; }
    .pp-hero-awards { top: 1rem; right: auto; left: 50%; width: min(82%, 19rem); transform: translateX(-50%); }
    .pp-hero-awards img { max-width: none; }
    .pp-hero::after { background: color-mix(in srgb, var(--pp-colour-surface) 72%, transparent); }
    .pp-hero-detail { display: none; }
    .pp-hero-detail-panel { display: block; padding: 3rem 0; background: var(--pp-colour-page); }

    .pp-hero--bleed-image {
        height: auto;
        min-height: 0;
        overflow: hidden;
    }

    .pp-hero--bleed-image picture {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        height: clamp(16rem, 62vw, 25rem);
        overflow: hidden;
    }

    .pp-hero--bleed-image .pp-hero-image {
        height: 100%;
        object-fit: cover;
    }

    .pp-hero--bleed-image::before,
    .pp-hero--bleed-image::after {
        display: none;
    }

    .pp-hero--mobile-image-first {
        display: flex;
        flex-direction: column;
    }

    .pp-hero--mobile-image-first picture {
        order: 1;
    }

    .pp-hero--mobile-image-first .pp-hero-inner {
        order: 2;
        background: var(--pp-colour-surface);
    }

    .pp-hero--mobile-bleed-image {
        overflow: visible;
    }

    .pp-hero--mobile-bleed-image picture {
        z-index: 0;
        height: auto;
        overflow: visible;
    }

.pp-hero--mobile-bleed-image .pp-hero-image {
        height: clamp(17rem, 70vw, 25rem);
        object-fit: cover;
        object-position: center 70%;
        -webkit-mask-image: linear-gradient(to bottom, black 72%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 72%, transparent 100%);
    }

    .pp-hero--mobile-bleed-image picture::after {
        position: absolute;
        right: 0;
        bottom: -5.5rem;
        left: 0;
        height: 9rem;
        background: linear-gradient(transparent, var(--pp-colour-surface) 78%);
        content: "";
        pointer-events: none;
    }

    .pp-hero--mobile-bleed-image .pp-hero-inner {
        position: relative;
        z-index: 2;
        margin-top: -6.5rem;
        padding-top: 5rem;
        background: transparent;
    }
}

/* Tablet portrait uses the stacked mobile composition, without the mobile
   bleed overlap. Desktop keeps the image-led overlay above 992px. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .pp-hero--mobile-bleed-image {
        overflow: hidden;
    }

    .pp-hero--mobile-bleed-image::after,
    .pp-hero--mobile-bleed-image picture::after {
        display: none;
    }

    .pp-hero--mobile-bleed-image .pp-hero-image {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .pp-hero--mobile-bleed-image .pp-hero-inner {
        margin-top: 0;
        padding-top: 3rem;
        background: var(--pp-colour-surface);
    }

    .pp-hero--mobile-image-first .pp-hero-inner .row {
        justify-content: center;
    }

    .pp-hero--mobile-image-first .pp-hero-inner .row > div {
        width: 100%;
        max-width: none;
        text-align: center;
    }

    .pp-hero--mobile-image-first .pp-hero-title {
        max-width: none;
    }

    .pp-hero--mobile-image-first .pp-hero-eyebrow {
        text-align: center;
        transform-origin: center;
    }

    .pp-hero--mobile-image-first .pp-hero-star {
        text-align: center;
    }
}

/* Preserve the homepage's two-stage responsive presentation. */
.pp-hero-title sup { top: -.25em; }
.pp-hero-star { margin-top: 1.25rem; margin-bottom: 2.75rem; }
.pp-hero-detail .pp-hero-lead { line-height: 1.7; }
.pp-hero-title { font-size: clamp(2.1rem, 3.8vw, 5.25rem); }
.pp-check-list { font-size: clamp(.82rem, .9vw, 1rem); list-style: none; }
.pp-check-list li { position: relative; margin-bottom: .65rem; padding-left: 1.9rem; font-weight: 500; }
.pp-check-list li::before { content: ''; position: absolute; left: 0; top: .05rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--pp-colour-accent); }
.pp-check-list li::after { content: '✓'; position: absolute; left: .27rem; top: .06rem; width: .6rem; height: 1.2rem; display: flex; align-items: center; justify-content: center; color: var(--pp-colour-inverse); font-size: .75rem; font-weight: 700; line-height: 1; }
.pp-uk-note { display: flex; align-items: center; gap: .8rem; color: var(--pp-colour-muted); font-size: .95rem; }
.pp-uk-note strong { color: var(--pp-colour-text); }
.pp-uk-flag { font-size: 1.8rem; }

@media (max-width: 991.98px) {
    .pp-hero-title { font-size: clamp(2.7rem, 7vw, 5.25rem); max-width: 7.5ch; line-height: 1.05; }
    .pp-hero-detail-panel { padding: 2.5rem 0; background: var(--pp-colour-primary-dark); color: var(--pp-colour-inverse-85); }
    .pp-hero-detail-panel .d-flex { justify-content: center; column-gap: 1rem !important; row-gap: .9rem !important; }
    .pp-hero-detail-panel .pp-hero-lead,
    .pp-hero-detail-panel .pp-check-list,
    .pp-hero-detail-panel .pp-uk-note { color: var(--pp-colour-inverse-85); }
    .pp-hero-detail-panel .pp-uk-note strong { color: var(--pp-colour-inverse); }
    .pp-hero-detail-panel .btn-outline-secondary { --bs-btn-color: var(--pp-colour-inverse); --bs-btn-border-color: var(--pp-colour-inverse-70); --bs-btn-hover-color: var(--pp-colour-primary-dark); --bs-btn-hover-bg: var(--pp-colour-inverse); --bs-btn-hover-border-color: var(--pp-colour-inverse); }
    .pp-hero-detail .pp-hero-action-whatsapp,
    .pp-hero-detail-panel .pp-hero-action-whatsapp { display: inline-flex !important; }
}

@media (max-width: 575.98px) {
    .pp-hero { display: flex; flex-direction: column; }
    .pp-hero-inner { position: static; order: 1; display: block; padding: 1.75rem 0; background: var(--pp-colour-surface); }
    .pp-hero picture { order: 2; }
    .pp-hero::after { display: none; }
    .pp-hero-title { max-width: none; margin: 0; text-align: center; font-size: clamp(2.25rem, 10vw, 3rem); }
    .pp-hero-detail-panel { padding: 2rem 0; }
    .pp-hero-star { text-align: center; }
    .pp-hero-eyebrow { text-align: center; transform-origin: center; }
    .pp-hero-eyebrow-line-with-motif { margin-right: auto; margin-left: auto; }
    .pp-hero-motif { display: inline-block; margin: 0; }
    .pp-hero-separator { margin-right: auto; margin-left: auto; }
}


/* Optional palette-slot colour roles supplied by Fragment::colourStyle(). */
.pp-hero {
    background: var(--pp-hero-background, var(--pp-colour-surface));
    color: var(--pp-hero-text, var(--pp-colour-text));
}

.pp-hero::after {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--pp-hero-background, var(--pp-colour-surface)) 98%, transparent) 0%,
        color-mix(in srgb, var(--pp-hero-background, var(--pp-colour-surface)) 94%, transparent) 22%,
        color-mix(in srgb, var(--pp-hero-background, var(--pp-colour-surface)) 72%, transparent) 36%,
        color-mix(in srgb, var(--pp-hero-background, var(--pp-colour-surface)) 8%, transparent) 54%,
        transparent 68%
    );
}

.pp-hero-title,
.pp-hero-title .pp-hero-title-line,
.pp-hero-eyebrow,
.pp-hero-star,
.pp-uk-note strong {
    color: var(--pp-hero-title, var(--pp-colour-primary));
}

.pp-hero-title span,
.pp-hero-title .pp-hero-title-emphasis,
.pp-hero-title sup,
.pp-hero-star sup,
.pp-hero-star-icon {
    color: var(--pp-hero-emphasis, var(--pp-colour-accent));
}

.pp-hero-separator,
.pp-check-list li::before {
    background: var(--pp-hero-emphasis, var(--pp-colour-accent));
}

.pp-hero-uk-note {
    color: var(--pp-hero-text, var(--pp-colour-muted));
}

@media (max-width: 991.98px) {
    .pp-hero::after {
        background: color-mix(in srgb, var(--pp-hero-background, var(--pp-colour-surface)) 72%, transparent);
    }

    .pp-hero-detail-panel {
        background: var(--pp-hero-background, var(--pp-colour-primary-dark));
        color: var(--pp-hero-text, var(--pp-colour-inverse-85));
    }

    .pp-hero-detail-panel .pp-hero-lead,
    .pp-hero-detail-panel .pp-check-list,
    .pp-hero-detail-panel .pp-uk-note {
        color: var(--pp-hero-text, var(--pp-colour-inverse-85));
    }

    .pp-hero-detail-panel .pp-uk-note strong {
        color: var(--pp-hero-title, var(--pp-colour-inverse));
    }
}

@media (max-width: 575.98px) {
    .pp-hero-inner,
    .pp-hero--mobile-image-first .pp-hero-inner {
        background: var(--pp-hero-background, var(--pp-colour-surface));
    }
}