/* ==========================================================
   RELIABLE TRAVELS — title banner shared by inner pages (package.html, story.html, …)
   Photo with a slow cinematic zoom-in, copy rising in, plane in the sky and the road with cars below
   (the plane .sky and the road .road are styled in header-hero.css).
   ========================================================== */
.title-banner { position: relative; height: min(720px, 86vh); min-height: 520px; overflow: hidden; background: var(--ink); color: #fff; }
.title-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: heroCine 1.8s var(--ease-out) both; will-change: transform; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #031a15db 0%, #031a1570 52%, #031a151f 100%), linear-gradient(0deg, #031a15d9 0%, #031a1500 55%); }
.hero-grain { position: absolute; inset: 0; opacity: .1; mix-blend-mode: soft-light; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-edition { position: absolute; z-index: 2; right: 28px; top: 34%; writing-mode: vertical-rl; font: 600 10px Manrope, sans-serif; letter-spacing: .2em; color: #ffffff8c; }
.hero-copy { position: absolute; z-index: 6; left: clamp(20px, 7vw, 120px); right: clamp(20px, 7vw, 120px); bottom: clamp(48px, 11vh, 110px); max-width: 900px; }
.hero-copy > * { animation: heroCopy 1.1s var(--ease-out) both; }
.hero-copy > :nth-child(1) { animation-delay: .25s; }
.hero-copy > :nth-child(2) { animation-delay: .38s; }
.hero-copy > :nth-child(3) { animation-delay: .5s; }
.hero-copy > :nth-child(4) { animation-delay: .65s; }
.hero-crumb { margin: 0 0 18px; font: 700 11px "DM Sans", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #c3d4cf; }
.hero-label { display: inline-flex; align-items: center; gap: 14px; font: 700 11px "DM Sans", sans-serif; letter-spacing: .19em; text-transform: uppercase; color: var(--accent); }
.hero-label:before { content: ""; width: 42px; height: 2px; background: var(--accent); }
.hero-copy h1 { margin: 18px 0 16px; font-size: clamp(44px, 7vw, 104px); text-shadow: 0 15px 45px #0005; }
.hero-place { margin: 0; font-size: 17px; color: #e1ebe8; }
.hero-scroll { position: absolute; z-index: 6; right: clamp(60px, 6vw, 100px); bottom: clamp(48px, 11vh, 110px); display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; font: 700 11px "DM Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.hero-scroll i { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #ffffff5c; border-radius: 50%; font-style: normal; animation: scrollBob 2s ease-in-out infinite; }
@keyframes heroCine { from { transform: scale(1.18); filter: blur(7px) saturate(.7); } to { transform: scale(1.03); filter: none; } }
@keyframes heroCopy { from { opacity: 0; transform: translateY(55px); } to { opacity: 1; transform: none; } }
@keyframes scrollBob { 50% { transform: translateY(7px); } }

@media (max-width: 1000px) { .hero-scroll, .hero-edition { display: none; } }
@media (max-width: 560px) { .title-banner { min-height: 460px; } }
@media (prefers-reduced-motion: reduce) {
  .title-banner > img { animation: none; transform: none !important; }
  .hero-copy > *, .hero-scroll i { animation: none; }
}