/* ===== Hero (Viator-like) ===== */
.hero-wrap{
  position:relative; min-height:68vh; display:grid; place-items:center; color:#fff; overflow:hidden;
}
@media (max-width: 960px){ .hero-wrap{ min-height:60vh } }
@media (max-width: 640px){ .hero-wrap{ min-height:54vh } }

.hero-bg{
  --current: url("../img/hero/hero-1.jpg");
  --next: var(--current);
  position:absolute; inset:0; z-index:0;
  background-image: var(--current);
  background-size: cover; background-position:center; background-repeat:no-repeat;
  transition: background-image .0s;
}
.hero-bg.next{
  animation: heroFade .65s ease both;
  background-image: var(--next);
}
@keyframes heroFade{
  0%{ filter: opacity(.2) brightness(.9) }
  100%{ filter: opacity(1) brightness(1) }
}

.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
}

.hero-inner{
  position:relative; z-index:2; width:100%; max-width:1200px; margin:0 auto; padding:0 16px;
  text-align:center;
}

.hero-title{ font-size:56px; line-height:1.05; font-weight:900; margin:0 0 10px }
.hero-sub{ font-size:18px; opacity:.95; margin:0 0 28px }
@media (max-width: 960px){
  .hero-title{ font-size:42px }
  .hero-sub{ font-size:16px }
}
@media (max-width: 640px){
  .hero-title{ font-size:32px }
}

/* search pill */
.hero-search{ display:flex; justify-content:center }
.hs-group{
  display:flex; gap:14px; align-items:center;
  background:#fff; color:#111;
  border-radius:38px; padding:12px; width:min(900px, 94vw);
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
}
.hs-where{ display:flex; align-items:center; gap:10px; flex:1; min-width:0 }
.hs-label{ font-size:14px; font-weight:800; color:#374151; white-space:nowrap }
.hs-where input{
  flex:1; min-width:0; border:0; outline:0; font:inherit; padding:10px 4px; background:transparent
}
.hs-where input::placeholder{ color:#9aa3ab }
.hs-btn{
  width:52px; height:52px; border:0; border-radius:999px; cursor:pointer;
  background:#0ea5e9; color:#fff; display:grid; place-items:center; flex:0 0 52px;
}
.hs-btn:hover{ background:#0284c7 }

@media (max-width: 640px){
  .hs-group{ flex-direction:row; padding:10px; gap:8px }
  .hs-label{ display:none }
}

/* dots */
.hero-dots{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:2
}
.hero-dots span{
  width:9px; height:9px; border-radius:999px; background:#ffffff90; cursor:pointer; transition:.2s
}
.hero-dots span.on{ background:#fff }