/* hero: a real wide photo, one big hand-lettered word in the sky, copy at the bottom */
.hero{position:relative;isolation:isolate;overflow:hidden;margin-top:-80px;padding:0;min-height:clamp(660px,94vh,900px);color:#fff}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 64%;z-index:-2;transition:transform .8s var(--ease-in)}
/* light at the top (header + dark lettering), shade at the bottom (white copy) */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 20%,rgba(6,18,40,0) 40%,rgba(6,18,40,.45) 62%,rgba(6,18,40,.74) 100%)}

.hero-word{position:absolute;left:0;right:0;top:clamp(96px,14vh,150px);margin:0;text-align:center;font-family:var(--hand);font-weight:700;font-size:clamp(56px,13vw,220px);line-height:.85;letter-spacing:.03em;text-transform:uppercase;color:#0B1F3F;opacity:0;animation:wordIn 1.4s .15s var(--ease-in) forwards;pointer-events:none}
@keyframes wordIn{from{opacity:0;transform:translateY(20px)}to{opacity:.9;transform:none}}

.hero-inner{position:relative;min-height:inherit;display:flex;align-items:flex-end;padding-top:340px;padding-bottom:180px}
.hero-copy{max-width:720px}
.hero .eyebrow{color:#fff}
.hero h1{color:#fff;font-size:clamp(32px,3.4vw,52px);line-height:1.02;letter-spacing:-.02em;margin:14px 0 16px;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .line>*{display:inline-block;transform:translateY(105%);animation:lineUp .9s var(--ease-in) .35s forwards}
.hero h1 .line:nth-child(2)>*{animation-delay:.47s}
.hero h1 em{font-weight:500;color:#D6E5FB}
@keyframes lineUp{to{transform:none}}
.hero p.lead{font-size:clamp(16px,1.2vw,18px);max-width:54ch;color:rgba(255,255,255,.92);line-height:1.6;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.trust{display:flex;align-items:center;gap:14px;margin-top:24px;font-size:14px;color:rgba(255,255,255,.92)}
.avatars{display:flex;flex:none}
.avatars img{width:34px;height:34px;border-radius:50%;border:2px solid #fff;margin-left:-10px;object-fit:cover}
.avatars img:first-child{margin-left:0}
.stars{color:#F2A65A;letter-spacing:2px}

/* used by the My Trip phone mock-up */
.live{display:inline-flex;align-items:center;gap:6px;color:var(--ok)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ok);position:relative}
.live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:ping 1.6s infinite}
@keyframes ping{to{transform:scale(2.6);opacity:0}}

@media (max-width:720px){
  .hero{margin-top:-64px;min-height:680px}
  .hero-bg{object-position:58% 60%}
  .hero-word{top:96px;font-size:clamp(46px,14vw,80px)}
  .hero-inner{padding-top:260px;padding-bottom:130px}
  .hero-cta .btn{flex:1}
  .trust{flex-wrap:wrap;gap:10px}
}