.page-hero{position:relative;aspect-ratio:16/9;max-height:62vh;min-height:200px;width:100%;background:var(--blue);overflow:hidden}
.page-hero img{width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,25,70,.85),transparent 60%)}
.page-hero h1{position:absolute;z-index:2;bottom:0;inset-inline:0;color:#fff;padding:16px;font-size:1.6rem;line-height:1.3;max-width:1100px;margin:0 auto}
.back{display:inline-flex;align-items:center;min-height:44px;color:var(--blue);font-weight:700;margin:12px 0}
.back:hover{color:var(--orange)}
.details{background:var(--soft);border-radius:var(--r);padding:24px 18px;text-align:center;border-top:5px solid var(--orange);margin:12px 0 40px}
.details h2{color:var(--blue);margin-bottom:6px}
.details p{margin-bottom:6px}
@media (min-width:700px){.page-hero h1{font-size:2.4rem;padding:24px 16px}}
.page-hero::after{background:linear-gradient(0deg,rgba(0,58,140,.95),rgba(0,97,209,.2) 60%,transparent)}
.page-hero{border-bottom:6px solid var(--orange)}
.page-hero h1::after{content:"";display:block;width:80px;height:6px;border-radius:6px;margin-top:8px;background:linear-gradient(90deg,var(--orange),var(--yellow))}
.details{background:linear-gradient(135deg,#e6f0ff,#fff1de);border-top-color:var(--blue2)}