.pp-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: clamp(340px, 56vh, 520px);
    padding-bottom: clamp(44px, 4.6vw, 84px);
    color: #fff;
    background: #0a2a45;
}

.pp-hero-media { position: absolute; inset: -6% 0; z-index: -2; }
.pp-hero-bg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; will-change: transform; }
.pp-hero-media > picture { display: contents; }
.pp-hero-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(2, 18, 36, .5) 0, rgba(2, 18, 36, 0) 170px),
        linear-gradient(90deg, rgba(2, 18, 36, .72) 0%, rgba(2, 18, 36, .4) 42%, rgba(2, 18, 36, .06) 100%),
        linear-gradient(to top, rgba(2, 18, 36, .45) 0%, rgba(2, 18, 36, 0) 45%);
}
.pp-hero-veil::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(36, 62, 92, .74) 0%, rgba(62, 90, 120, .44) 32%, rgba(118, 142, 168, .2) 62%, rgba(118, 142, 168, 0) 88%);
}
.pp-hero-veil::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(150, 174, 200, .62) 0%, rgba(150, 174, 200, .36) 45%, rgba(150, 174, 200, .1) 80%, rgba(150, 174, 200, 0) 100%);
    mix-blend-mode: soft-light;
}
.pp-hero-eau { background: radial-gradient(120% 90% at 70% 40%, #1d6fa6, #0a3a66 60%, #062a4d); }
.pp-hero-eau .hw-gl { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; }
.pp-hero-eau .hw-gl.is-on { opacity: 1; }
.pp-hero-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(2, 18, 36, .5) 0, rgba(2, 18, 36, 0) 170px),
        radial-gradient(70% 90% at 18% 62%, rgba(2, 18, 36, .58), rgba(2, 18, 36, .24) 55%, rgba(2, 18, 36, 0) 82%); }

.pp-hero-inner {
    position: relative;
    z-index: 2;
    width: min(100% - 2rem, 1320px);
    margin: 0 auto;
    padding: clamp(104px, 15vh, 158px) 0 clamp(8px, 2vh, 22px);
}
.pp-hero-inner > * { animation: hpIn 1.1s cubic-bezier(.3, .8, .3, 1) both; }
.pp-hero-inner > :nth-child(2) { animation-delay: .08s; }
.pp-hero-inner > :nth-child(3) { animation-delay: .16s; }
.pp-hero-inner > :nth-child(4) { animation-delay: .24s; }
@keyframes hpIn { from { opacity: 0; transform: translateY(18px); } }

.pp-hero-kicker {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .6rem;
    font-size: clamp(.7rem, 1.1vw, .82rem);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #cfe9ff;
    text-shadow: 0 1px 10px rgba(0, 15, 30, .5);
}
.pp-hero-kicker::before { content: ''; flex: none; width: 24px; height: 1.5px; background: currentColor; }

.pp-hero-title {
    margin: 0 0 .55rem;
    font-size: clamp(2.4rem, 6vw, 4.1rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.02em;
    color: #fff;
    text-shadow: 0 4px 24px rgba(0, 15, 30, .5);
}
.pp-hero-title-long { max-width: 900px; font-size: clamp(2rem, 4.6vw, 3.4rem); }

.pp-hero-lead {
    max-width: 46ch;
    margin: 0 0 1.4rem;
    font-size: clamp(.96rem, 1.5vw, 1.16rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 2px 12px rgba(0, 15, 30, .55);
}

.pp-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.pp-hero .pp-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.55rem;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    font-size: clamp(.88rem, 1.2vw, .96rem);
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .3s cubic-bezier(.3, .8, .3, 1), background-color .3s, box-shadow .3s, color .3s;
}
.pp-hero .pp-btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.pp-hero .pp-btn:hover { transform: translateY(-2px); }
.pp-hero .pp-btn:hover svg { transform: translateX(3px); }
.pp-hero .pp-btn:focus-visible { outline: 3px solid #3fb6e8; outline-offset: 3px; }
.pp-hero .pp-btn-primary { background: #fff; color: #003366; box-shadow: 0 12px 28px rgba(0, 18, 36, .32); }
.pp-hero .pp-btn-primary:hover { background: #fff; box-shadow: 0 16px 34px rgba(0, 18, 36, .38); }
.pp-hero .pp-btn-ghost {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.pp-hero .pp-btn-ghost:hover { background: rgba(255, 255, 255, .2); }

.pp-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 1;
    height: clamp(44px, 4.6vw, 84px);
    background: var(--hp-wave, #fff);
    pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 44' preserveAspectRatio='none'%3E%3Cpath fill-opacity='.45' d='M0 22 C 60 6, 120 6, 190 20 S 320 36, 390 14 V44 H0 Z'/%3E%3Cpath d='M0 30 C 70 16, 140 18, 210 30 S 330 40, 390 26 V44 H0 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 44' preserveAspectRatio='none'%3E%3Cpath fill-opacity='.45' d='M0 22 C 60 6, 120 6, 190 20 S 320 36, 390 14 V44 H0 Z'/%3E%3Cpath d='M0 30 C 70 16, 140 18, 210 30 S 330 40, 390 26 V44 H0 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

@media (min-width: 1025px) {
    .pp-hero-inner { padding-top: max(calc(15 * var(--vhz, 1vh)), 172px); }
}
@media (max-width: 768px) {
    .pp-hero { min-height: 0; }
    .pp-hero-inner { padding-top: clamp(88px, 12vh, 122px); padding-bottom: clamp(4px, 1vh, 10px); }
    .pp-hero-lead { max-width: 100%; }
}
@media (max-width: 400px) {
    .pp-hero-actions { flex-direction: column; align-items: stretch; }
    .pp-hero .pp-btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-hero-inner > * { animation: none; }
    .pp-hero .pp-btn, .pp-hero .pp-btn svg { transition: none; }
}