/* =====================================================================
   BHROMI home page redesign (v081) — matched to the new home mock-up.
   LOAD LAST (after bh-typography.css). Scoped to .is-home (home route only).
   Numbers are CSS px measured from the mock-up at a 390px-wide phone.
   ===================================================================== */

.is-home{
  --bh-page-bg:#f4f7fc;            /* ONE background for everything under the hero */
  --bh-card:#fff;                  /* ONE card colour */
  --bh-card-radius:18px;
  /* Apple-style: hairline edge + 3 soft layered shadows (tight, mid, wide) */
  --bh-card-shadow:0 0 0 .5px rgba(20,35,70,.07),0 1px 2px rgba(20,35,70,.04),0 6px 14px rgba(20,35,70,.05),0 18px 36px rgba(40,80,150,.08);
}
/* every wrapper under the hero uses the same page background (no more patchy colours) */
.is-home .bg-white.min-h-screen,.is-home .bg-sand,.is-home .bg-sand>section{background:var(--bh-page-bg)!important}
.is-home section.bg-white{background:transparent!important}

/* ---------------------------------------------------------------- hero */
.is-home .home-top{
  position:relative;box-sizing:border-box;min-height:434px;padding-bottom:150px!important;
  background:url("/hero.jpg") 50% -36.6vw/100% auto no-repeat #8fe2e6!important;
}
/* the photo now runs down behind the search card and melts into the page colour (no hard edge) */
.is-home .home-top::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(244,247,252,0) 0%,rgba(244,247,252,.10) 18%,rgba(244,247,252,.30) 38%,
    rgba(244,247,252,.58) 58%,rgba(244,247,252,.84) 78%,#f4f7fc 100%);
}
.is-home .home-top>div.homepage-hero{
  margin:0!important;padding:83px 18px 0!important;height:165px;box-sizing:border-box;
}
.is-home .homepage-hero-eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;line-height:15px;color:#fff;margin:0;
  text-shadow:0 1px 3px rgba(0,25,55,.55),0 2px 10px rgba(0,25,55,.35);
}
.is-home .homepage-hero-title{
  font-size:25px;font-weight:800;line-height:28px;letter-spacing:-.015em;color:#fff;margin:6px 0 0;
  text-shadow:0 1px 3px rgba(0,25,55,.55),0 3px 16px rgba(0,25,55,.40);
}
/* soft dark scrim behind the headline so it reads on bright sky / palms (fades out before the service card) */
.is-home .home-top::before{
  content:"";position:absolute;left:0;right:0;top:0;height:210px;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,24,52,.58) 0%,rgba(4,24,52,.40) 55%,rgba(4,24,52,.10) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 62%,transparent 100%);
}
.is-home .home-top>div{position:relative;z-index:1}
.is-home .homepage-hero-sub{display:none!important}

/* ---------------------------------------------------------------- service tiles card */
.is-home .home-top>div:not(.homepage-hero){
  padding:0 8px!important;margin-left:auto;margin-right:auto;
}
.is-home .shortcut-card{
  box-sizing:border-box;padding:2px 2.3px;border:0;border-radius:var(--bh-card-radius);
  background:var(--bh-card);
  box-shadow:var(--bh-card-shadow);
}
.is-home .shortcut-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.is-home .shortcut-card .shortcut-tile:not(#x){
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  box-sizing:border-box;height:59px;min-height:0;margin:3.95px 4.8px;padding:5.5px 0 0;gap:0;width:auto;
  border:0;border-radius:15px;background:transparent;color:#25304f;
}
.is-home .shortcut-card .shortcut-tile-primary:not(#x){background:transparent}
.is-home .shortcut-card .shortcut-icon-circle:not(#x){
  width:27px;height:27px;flex:none;border-radius:0!important;background:none!important;color:#10163f!important;
  display:flex;align-items:center;justify-content:center;
}
.is-home .shortcut-card .shortcut-icon-circle:not(#x) svg{display:none!important}
.is-home .shortcut-card .shortcut-icon-circle:not(#x)::before{
  content:"";display:block;width:var(--cw,26px);height:var(--ch,26px);
  background:var(--img) center/contain no-repeat;filter:drop-shadow(0 2px 2px rgba(15,15,15,.25));
}
.is-home .shortcut-card .shortcut-tile-primary .shortcut-icon-circle:not(#x){color:#10163f!important}
.is-home .tile-stays{--ico:url(/assets/tile-stays.svg);--iw:19px;--ih:19px;--img:url(/assets/tile-stays-bw.svg);--img-on:url(/assets/tile-stays-on.svg);--cw:26px;--ch:26px}
.is-home .tile-flights{--ico:url(/assets/tile-tickets.svg);--iw:22px;--ih:14px;--img:url(/assets/tile-flights-bw.svg);--img-on:url(/assets/tile-flights-on.svg);--cw:26px;--ch:26px}
.is-home .tile-packages{--ico:url(/assets/tile-packages.svg);--iw:17.6px;--ih:16.5px;--img:url(/assets/tile-packages-bw.svg);--img-on:url(/assets/tile-packages-on.svg);--cw:26px;--ch:26px}
.is-home .tile-tours{--ico:url(/assets/tile-tours.svg);--iw:18.7px;--ih:16.5px;--img:url(/assets/tile-tours-bw.svg);--img-on:url(/assets/tile-tours-on.svg);--cw:26px;--ch:26px}
.is-home .tile-rentals{--ico:url(/assets/tile-rentals-key3.svg);--iw:24px;--ih:17.5px;--img:url(/assets/tile-rentals-bw.svg);--img-on:url(/assets/tile-rentals-on.svg);--cw:26px;--ch:26px}
.is-home .shortcut-card .shortcut-icon-circle.tile-rentals:not(#x)::before{flex:none;margin-top:1px}
.is-home .tile-attractions{--ico:url(/assets/tile-attractions.svg);--iw:19.3px;--ih:16.3px;--img:url(/assets/tile-attractions-bw.svg);--img-on:url(/assets/tile-attractions-on.svg);--cw:26px;--ch:26px}
.is-home .tile-shopping{--ico:url(/assets/tile-shopping.svg);--iw:16.1px;--ih:18.6px;--img:url(/assets/tile-shopping-bw.svg);--img-on:url(/assets/tile-shopping-on.svg);--cw:26px;--ch:26px}
.is-home .tile-experiences{--ico:url(/assets/tile-experiences.svg);--iw:19.3px;--ih:19.3px;--img:url(/assets/tile-experiences-bw.svg);--img-on:url(/assets/tile-experiences-on.svg);--cw:26px;--ch:26px}
.is-home .tile-taxis{--ico:url(/assets/tile-taxis.svg);--iw:19.9px;--ih:18.7px;--img:url(/assets/tile-taxis-bw.svg);--img-on:url(/assets/tile-taxis-on.svg);--cw:26px;--ch:26px}
.is-home .tile-more{--ico:url(/assets/tile-more.svg);--iw:17.4px;--ih:17.6px;--img:url(/assets/tile-more-bw.svg);--img-on:url(/assets/tile-more-on.svg);--cw:26px;--ch:26px}
.is-home .shortcut-card .shortcut-label:not(#x){
  display:flex;align-items:center;justify-content:center;min-height:21px;width:100%;margin-top:0;
  font-size:11px;font-weight:600;line-height:1.15;letter-spacing:-.01em;text-align:center;color:#191919;
}
.is-home .shortcut-card .shortcut-tile-primary .shortcut-label:not(#x){color:#191919;font-weight:600}

/* ---------------------------------------------------------------- search section */
.is-home section.bg-white{
  background:transparent;padding-bottom:5.2px;margin-top:-145px;position:relative;z-index:2;
}
.is-home .search-form-wrap{padding:8.5px 9.5px 0!important}
/* Mobile: pull the search section up so only a slim photo line stays between the
   service strip and the search card (owner: 'etto gap kno', 2026-11-13) */
@media (max-width:767px){
  .is-home section.bg-white{margin-top:-158px}
  .is-home .search-form-wrap{padding-top:2px!important}
}
.is-home .search-form-wrap>.search-form-card{
  box-sizing:border-box;display:flex;flex-direction:column;gap:0!important;padding:10px 10px 8px;
  border:0;border-radius:var(--bh-card-radius);background:var(--bh-card);
  box-shadow:var(--bh-card-shadow);
}
.is-home .search-form-card>*{margin:0!important}
.is-home .search-form-card .sf-field{
  box-sizing:border-box;display:flex;align-items:center;gap:0;min-height:0!important;height:44px;
  padding:0 0 0 10.5px!important;border:1px solid #e6ebf4;border-radius:11px!important;background:#f8f9fd;color:#1b2447;
}
.is-home .search-form-card .sf-ic{width:21px!important;height:21px!important;color:#10163f;margin-right:2px}
.is-home .search-form-card .sf-txt{line-height:1}
.is-home .search-form-card .sf-txt em{font-size:10.5px!important;font-weight:400;color:#5d6a8a;line-height:13px}
.is-home .search-form-card .sf-txt b{font-size:12.5px!important;font-weight:600;color:#4b5b7c;line-height:16px;margin-top:2px}
.is-home .search-form-card .sf-txt{padding-top:3px}
.is-home .search-form-card .sf-dest .sf-txt{padding-top:0;margin-top:-1.5px}
.is-home .search-form-card .sf-dest{
  height:38px;padding:0 0 0 6px!important;border:0;background:transparent;
}
.is-home .search-form-card .sf-dest .sf-ic-lg{width:23px!important;height:23px!important;margin-right:7px}
.is-home .search-form-card .sf-dest .sf-txt b{font-size:14px!important;font-weight:700;color:#10163f;line-height:18px;margin:0}
.is-home .search-form-card .sf-dest .sf-txt em{font-size:11.3px!important;color:#7683a3;line-height:14px;margin-top:2px}
.is-home .search-form-card .sf-dest .sf-ic-end{
  width:20px!important;height:20px!important;margin:0 2.5px 0 0;color:#5b6b8c;
  box-sizing:content-box;padding:3px 0 3px 17px;border-left:1px solid #dfe5f0;
}
.is-home .search-form-card .sf-row{display:grid;gap:7px}
.is-home .search-form-card .sf-row2{margin-top:7.5px!important}
.is-home .search-form-card .sf-row3{margin-top:7.4px!important}
.is-home .search-form-card .sf-guest{padding:0 8px 0 12px!important}
.is-home .search-form-card .sf-guest .sf-ic{width:20px!important;height:20px!important;margin-right:1px}
.is-home .search-form-card .sf-guest .sf-txt{flex:1}
.is-home .search-form-card .sf-guest .sf-txt b{font-size:17px!important;font-weight:700;color:#10163f;line-height:20px;margin-top:0}
.is-home .search-form-card .sf-chev{width:14px!important;height:14px!important;color:#10163f;margin-left:auto}
.is-home .search-form-card .sf-search{
  box-sizing:border-box;height:41px!important;margin:6px -2.3px 0!important;padding:0;border-radius:999px!important;
  background:#027ffd;color:#fff;font-size:15px!important;font-weight:600;letter-spacing:0;gap:9px;
  box-shadow:0 4px 12px rgba(2,127,253,.25);
}
.is-home .search-form-card .sf-search .sf-ic{width:20px!important;height:20px!important;color:#fff;margin:0}
.is-home .search-form-card .sf-search .sf-arrow{display:none}

/* ---------------------------------------------------------------- promo banner */
.hbn-wrap{padding:0;max-width:860px;margin:0 auto}
.hbn{position:relative;overflow:hidden;border-radius:var(--bh-card-radius);box-shadow:var(--bh-card-shadow);background:#fff}
.hbn-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.hbn-slide{display:block;flex:0 0 100%;height:132px;line-height:0}
.hbn-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:left center}
.hbn-dots{position:absolute;left:0;right:0;bottom:7px;display:flex;justify-content:center;gap:6px}
.hbn-dots button{width:9px;height:9px;padding:0;border:1.5px solid rgba(255,255,255,.85);border-radius:999px;background:transparent;transition:width .25s,background .25s}
.hbn-dots button.is-on{width:18px;background:#fff;border-color:#fff}

/* ---------------------------------------------------------------- saved search card */
.is-home .bg-sand>section:first-child{padding-top:6px!important;padding-bottom:14px!important}
/* promo banner now sits under Recent search: same 16px side margin + same 14px gap as the other cards */
.is-home .bg-sand>section.hbn-sec{padding:0 16px 8px!important;margin-top:0}
.is-home .bg-sand>section.hbn-sec:first-child{padding-top:12px!important}
.is-home .saved-card{
  box-sizing:border-box;height:69px;gap:12px;padding:5.4px 6px;border:0;border-radius:var(--bh-card-radius);background:var(--bh-card);box-shadow:var(--bh-card-shadow);
}
.is-home .saved-img{width:83px;height:57.5px;border-radius:12px;background:#cfe6f5 url(/assets/saved-fallback.jpg) center/cover no-repeat;font-size:0;color:transparent}
.is-home .saved-body{gap:0}
.is-home .saved-body small{font-size:10.3px;line-height:13px;color:#6b7694;position:relative;top:-3px}
.is-home .saved-body strong{font-size:13.4px;line-height:18px;font-weight:600;color:#10163f;margin-top:2px;letter-spacing:-.01em}
.is-home .saved-meta{font-size:11px;line-height:14px;color:#6b7694;margin-top:3px;position:relative;top:1px}
.is-home .saved-meta svg{width:12px;height:12px;color:#6b7694}
.is-home .saved-meta .saved-u{margin-left:12px}

/* help FAB position (mock: 75.8px above the bottom edge) */
.is-home .bh-hl-fab:not(#x){bottom:calc(74.7px + env(safe-area-inset-bottom,0px))!important}

/* ---------------------------------------------------------------- tablet / desktop: keep the same composition, centred */
@media (min-width:768px){
  .is-home .home-top>div.homepage-hero{max-width:876px;margin:0 auto!important;padding-left:16px!important;padding-right:16px!important}
  .is-home .home-top>div:not(.homepage-hero){max-width:876px}
  .is-home .search-form-wrap{max-width:876px;margin-left:auto;margin-right:auto}
  .is-home .bg-sand>section:first-child,.is-home .bg-sand>section.hbn-sec{max-width:876px;margin-left:auto;margin-right:auto}
  .hbn-slide{height:auto;aspect-ratio:1314/303}
  .hbn-wrap{max-width:876px}
}

/* ---------------------------------------------------------------- service tile tap animations (assets/tile-anim.js) */
.is-home .shortcut-tile{position:relative}
.is-home .shortcut-card .shortcut-icon-circle:not(#x){transform-origin:50% 55%;will-change:transform,filter}

/* soft ripple behind the icon on every tap */
.is-home .shortcut-tile::after{content:"";position:absolute;left:50%;top:17.5px;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;
  background:radial-gradient(circle,rgba(2,127,253,.20) 0%,rgba(2,127,253,.10) 55%,rgba(2,127,253,0) 72%);opacity:0;transform:scale(.3);pointer-events:none}
.is-home .shortcut-tile[data-pop]::after{animation:bhRipple .6s cubic-bezier(.2,.7,.3,1) both}

.is-home .shortcut-tile[data-pop] .shortcut-icon-circle:not(#x){animation:bhPop .55s cubic-bezier(.34,1.56,.64,1) both}
.is-home .shortcut-tile[data-anim=stays][data-pop] .shortcut-icon-circle:not(#x){transform-origin:50% 100%;animation:bhBuild .65s cubic-bezier(.34,1.56,.64,1) both}
.is-home .shortcut-tile[data-anim=flights][data-pop] .shortcut-icon-circle:not(#x){animation:bhTicket .7s cubic-bezier(.4,0,.2,1) both}
.is-home .shortcut-tile[data-anim=packages][data-pop] .shortcut-icon-circle:not(#x){transform-origin:50% 90%;animation:bhGift .75s ease-in-out both}
.is-home .shortcut-tile[data-anim=tours][data-pop] .shortcut-icon-circle:not(#x){animation:bhTurn .7s cubic-bezier(.45,0,.25,1) both}
.is-home .shortcut-tile[data-anim=rentals][data-pop] .shortcut-icon-circle:not(#x){transform-origin:50% 85%;animation:bhDrive .8s cubic-bezier(.45,0,.3,1) both}
.is-home .shortcut-tile[data-anim=taxis][data-pop] .shortcut-icon-circle:not(#x){transform-origin:50% 85%;animation:bhApproach .8s cubic-bezier(.3,.9,.3,1) both}
.is-home .shortcut-tile[data-anim=attractions][data-pop] .shortcut-icon-circle:not(#x){animation:bhSnap .6s ease-out both}
.is-home .shortcut-tile[data-anim=shopping][data-pop] .shortcut-icon-circle:not(#x){transform-origin:50% 12%;animation:bhSwing .9s ease-in-out both}
.is-home .shortcut-tile[data-anim=experiences][data-pop] .shortcut-icon-circle:not(#x){animation:bhCompass .95s cubic-bezier(.3,.8,.3,1) both}
.is-home .shortcut-tile[data-anim=more][data-pop] .shortcut-icon-circle:not(#x){animation:bhMore .6s cubic-bezier(.34,1.56,.64,1) both}
.is-home .shortcut-tile[data-pop] .shortcut-label:not(#x){animation:bhLbl .5s ease-out both}

@keyframes bhRipple{0%{opacity:1;transform:scale(.35)}100%{opacity:0;transform:scale(1.9)}}
@keyframes bhPop{0%{transform:scale(1)}22%{transform:scale(.8)}60%{transform:scale(1.2)}82%{transform:scale(.96)}100%{transform:scale(1)}}
/* Stays: building grows up from the ground */
@keyframes bhBuild{0%{transform:scale(1,1)}20%{transform:scale(1.08,.55)}55%{transform:scale(.94,1.22)}78%{transform:scale(1.03,.97)}100%{transform:scale(1,1)}}
/* Flights: plane flies straight off to the right, new plane glides in from the left */
@keyframes bhFly{0%{transform:translateX(0) scale(1);opacity:1}14%{transform:translateX(-3px) scale(.96);opacity:1}55%{transform:translateX(22px) scale(1.04);opacity:0}56%{transform:translateX(-22px) scale(.96);opacity:0}100%{transform:translateX(0) scale(1);opacity:1}}
/* Gift: two little hops with a wiggle */
@keyframes bhGift{0%{transform:translateY(0) rotate(0) scale(1)}15%{transform:translateY(1px) scale(1.06,.9)}35%{transform:translateY(-5px) rotate(-9deg) scale(1)}50%{transform:translateY(0) rotate(0) scale(1.05,.94)}68%{transform:translateY(-3px) rotate(8deg)}85%{transform:translateY(0) rotate(-3deg)}100%{transform:translateY(0) rotate(0)}}
/* Tours: map turns over like a card */
@keyframes bhTurn{0%{transform:perspective(70px) rotateY(0) scale(1)}50%{transform:perspective(70px) rotateY(180deg) scale(1.12)}100%{transform:perspective(70px) rotateY(360deg) scale(1)}}
/* Cars (front view): drives away a little, then comes straight toward you */
@keyframes bhApproach{0%{transform:scale(1) translateY(0);opacity:1}18%{transform:scale(.55) translateY(-2px);opacity:.35}62%{transform:scale(1.26) translateY(1px);opacity:1}76%{transform:scale(1.26) translateY(-1.5px)}88%{transform:scale(1.1) translateY(.5px)}100%{transform:scale(1) translateY(0);opacity:1}}
/* Rentals (car + bike): drive off to the right, come back in from the left with a small bounce */
@keyframes bhDrive{0%{transform:translateX(0) scale(1);opacity:1}12%{transform:translateX(-3px) scale(.95,1.03);opacity:1}50%{transform:translateX(20px);opacity:0}51%{transform:translateX(-20px);opacity:0}78%{transform:translateX(2px) scale(1.04);opacity:1}90%{transform:translateX(-1px) scale(.99)}100%{transform:translateX(0) scale(1);opacity:1}}
/* Attractions: camera shutter + flash */
@keyframes bhSnap{0%{transform:scale(1);filter:none}18%{transform:scale(.82,.7);filter:none}38%{transform:scale(1.18);filter:drop-shadow(0 0 5px rgba(2,127,253,.85)) brightness(1.15)}100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(2,127,253,0))}}
/* Shopping: bag swings from its handle */
@keyframes bhSwing{0%{transform:rotate(0) scale(1)}15%{transform:rotate(16deg) scale(1.08)}35%{transform:rotate(-13deg) scale(1.06)}55%{transform:rotate(8deg) scale(1.03)}75%{transform:rotate(-4deg)}100%{transform:rotate(0) scale(1)}}
/* Experiences: compass spins and settles with a wobble */
@keyframes bhCompass{0%{transform:rotate(0) scale(1)}55%{transform:rotate(390deg) scale(1.14)}72%{transform:rotate(346deg) scale(1.06)}86%{transform:rotate(365deg)}100%{transform:rotate(360deg) scale(1)}}
/* More: dots pop apart and turn */
@keyframes bhMore{0%{transform:rotate(0) scale(1)}30%{transform:rotate(-25deg) scale(.78)}70%{transform:rotate(100deg) scale(1.18)}100%{transform:rotate(90deg) scale(1)}}
@keyframes bhLbl{0%{transform:translateY(0)}30%{transform:translateY(1.5px)}100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .is-home .shortcut-tile[data-pop] .shortcut-icon-circle:not(#x),.is-home .shortcut-tile[data-pop] .shortcut-label:not(#x),.is-home .shortcut-tile[data-pop]::after{animation:none!important}
}

/* ---------------------------------------------------------------- offer / new-product banner cards */
.hbn-card{position:relative;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:100%;padding:0 18px;overflow:hidden;line-height:1.2;color:#fff;text-align:left}
.hbn-orange{background:linear-gradient(115deg,#ff9a3c 0%,#ff5f4a 100%)}
.hbn-blue{background:linear-gradient(115deg,#1f7bff 0%,#45c0ff 100%)}
.hbn-green{background:linear-gradient(115deg,#0ea77e 0%,#35d0a0 100%)}
.hbn-purple{background:linear-gradient(115deg,#6d4bff 0%,#b07dff 100%)}
.hbn-pink{background:linear-gradient(115deg,#ff4f8b 0%,#ff8fb1 100%)}
.hbn-navy{background:linear-gradient(115deg,#10163f 0%,#2b3a8f 100%)}
.hbn-txt{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:68%}
.hbn-badge{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.25);font-size:12px;font-weight:700;letter-spacing:.02em;line-height:16px}
.hbn-txt strong{font-size:17px;font-weight:800;line-height:21px;letter-spacing:-.01em}
.hbn-txt small{font-size:12px;font-weight:400;line-height:15px;opacity:.92}
.hbn-cta{margin-top:3px;padding:3px 10px;border-radius:999px;background:#fff;font-size:12px;font-weight:700;line-height:16px;color:#10163f}
.hbn-orange .hbn-cta{color:#e5482f}.hbn-blue .hbn-cta{color:#1565d8}.hbn-green .hbn-cta{color:#0a8a67}.hbn-purple .hbn-cta{color:#5a38e0}
.hbn-art{position:absolute;right:-6px;top:50%;width:112px;height:112px;margin-top:-56px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.28);font-size:104px;font-weight:800;line-height:1;transform:rotate(-8deg)}
.hbn-art:not(.hbn-art-pct){background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.hbn-art-stays{--ico:url(/assets/tile-stays.svg)}
.hbn-art-taxis{--ico:url(/assets/tile-taxis.svg)}
.hbn-art-packages{--ico:url(/assets/tile-packages.svg)}
.hbn-art-tours{--ico:url(/assets/tile-tours.svg)}
.hbn-art-flights{--ico:url(/assets/tile-flights.svg)}
.hbn-art-shopping{--ico:url(/assets/tile-shopping.svg)}
.hbn-dots{z-index:2}
@media (min-width:768px){.hbn-txt strong{font-size:26px;line-height:30px}.hbn-txt small{font-size:15px;line-height:19px}.hbn-art{width:190px;height:190px;margin-top:-95px;font-size:170px}.hbn-card{padding:0 40px}}

/* when there is no recent search the first section is "Exclusive offers": keep its normal top spacing */
.is-home .bg-sand>section:first-child:not(:has(.saved-card)):not(.hbn-sec){padding-top:12px!important}

/* ---------------------------------------------------------------- "Where2Go" stacked photo cards (matched to the design mock-up, 1 css px = 3.282 mock-up px) */
@font-face{font-family:"Lato";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/lato-Regular.woff) format("woff")}
@font-face{font-family:"Lato";font-weight:800;font-style:normal;font-display:swap;src:url(/assets/lato-ExtraBold.woff) format("woff")}
@font-face{font-family:"Lato";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/lato-Bold.woff) format("woff")}
.w2g{--w2g-ff:"Lato","Inter","Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding-bottom:0!important}
.w2g *{font-family:var(--w2g-ff)}
.w2g-head{display:flex;align-items:center;justify-content:space-between;height:22px;margin:0}
.w2g-head h2{margin:0;font-size:18px;font-weight:700;line-height:22px;letter-spacing:0;color:#000}
.w2g-all{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;line-height:15px;letter-spacing:0;color:#0a84ff;text-decoration:none}
.w2g-all-ic{display:inline-grid;place-items:center;width:12.8px;height:12.8px;border-radius:50%;background:#0a84ff;color:#fff}
.w2g-all-ic svg{width:7px;height:7px}
.w2g-row{display:flex;align-items:flex-start;gap:40.6px;overflow-x:auto;overflow-y:hidden;margin:17px 0 0;padding:15px 16px 46px 0;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.w2g-row::-webkit-scrollbar{display:none}
.w2g-card{position:relative;isolation:isolate;flex:0 0 179.2px;width:179.2px;height:169.3px;box-sizing:border-box;border-radius:16px;text-decoration:none;color:#4a4a4a;scroll-snap-align:start;
  -webkit-tap-highlight-color:transparent;transition:transform .18s ease}
.w2g-face{position:absolute;inset:0;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.85) 100%),linear-gradient(270deg,#ffe1ce 0,#fff 49%);box-shadow:0 6px 14px rgba(0,0,0,.10)}
.w2g-card:active{transform:scale(.975)}
/* the two sheets of paper behind the card */
.w2g-card::before,.w2g-card::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.7) 100%),linear-gradient(270deg,#ffeadf 0,#fff 55%);box-shadow:0 4px 12px rgba(0,0,0,.10)}
.w2g-card::before{transform:translate(6px,9px) rotate(-4.5deg)}
.w2g-card::after{transform:translate(8px,15px) rotate(-8.5deg);z-index:-2}
.w2g-clip{position:absolute;z-index:3;left:-.6px;top:-14.2px;width:35.3px;height:39px;pointer-events:none;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.18))}
.w2g-img{position:absolute;left:7.9px;top:7.8px;width:163.3px;height:98.7px;border-radius:14px;overflow:hidden;background:#dfe9ef}
.w2g-img img{display:block;width:100%;height:100%;object-fit:cover}
.w2g-card strong{position:absolute;left:15.5px;right:6px;top:114.4px;margin:0;font-size:14px;font-weight:800;line-height:17px;letter-spacing:0;color:#4a4a4a;white-space:nowrap}
.w2g-card small{position:absolute;left:15.5px;right:6px;top:133.2px;margin:0;font-size:12px;font-weight:400;line-height:15px;letter-spacing:0;color:#4a4a4a;white-space:nowrap}
/* "Share your travel stories" end card */
.w2g-story{position:relative;flex:0 0 99.9px;width:99.9px;height:186.5px;margin-top:-.9px;box-sizing:border-box;border-radius:18px;overflow:hidden;text-decoration:none;color:#000;text-align:center;scroll-snap-align:end;
  background:#fff url(/assets/w2g-story.jpg) 0 0/100% 100% no-repeat;box-shadow:0 6px 16px rgba(0,0,0,.09)}
.w2g-story strong{position:absolute;left:0;right:0;top:79px;margin:0;font-size:14px;font-weight:700;line-height:18px;letter-spacing:0;color:#000}
.w2g-story-go{position:absolute;left:50%;top:126.8px;width:31.7px;height:31.1px;margin-left:-15.85px;box-sizing:border-box;border:2px solid #2a73d8;border-radius:9px;display:grid;place-items:center;color:#2a73d8}
.w2g-story-go svg{width:17px;height:17px}
@media (min-width:768px){.w2g-row{margin-left:0}}

/* ---- Where2Go header v2: matches "Explore" / "Trending cities" header language (cards untouched) ---- */
.w2g .w2g-head,.w2g .w2g-head *{font-family:"Inter","Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.w2g .w2g-head{position:relative;height:26px;align-items:flex-start}
.w2g .w2g-head h2{font-size:19px;font-weight:800;line-height:24px;color:#020924;letter-spacing:0}
.w2g .w2g-head h2 em{font-style:normal;color:#0557ef}
.w2g .w2g-head::before{content:"";position:absolute;left:1px;top:30px;width:20px;height:2px;border-radius:2px;background:#0b5aef}
.w2g .w2g-head::after{content:"";position:absolute;left:24px;top:30px;width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,#d1e1f6 0,#d1e1f6 45%,rgba(209,225,246,0) 100%)}
.w2g .w2g-all{gap:3px;height:26px;padding:0 9px 0 13px;border-radius:999px;background:#e0ecfe;color:#0950f4;font-size:12px;font-weight:700;line-height:1;-webkit-tap-highlight-color:transparent}
.w2g .w2g-all:active{transform:scale(.97)}
.w2g .w2g-all-ic{width:auto;height:auto;border-radius:0;background:none;color:#0950f4}
.w2g .w2g-all-ic svg{width:9px;height:9px;stroke-width:3}
.w2g .w2g-row{margin-top:23px}

/* ---- Home banners: swipe + photo on card slides ---- */
.hbn{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hbn-slide{-webkit-user-drag:none}
.hbn-photo{position:absolute;top:0;right:0;bottom:0;width:54%;background-size:cover;background-position:center;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 38%,#000 72%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 38%,#000 72%)}
.hbn-has-img .hbn-txt{max-width:66%;text-shadow:0 1px 6px rgba(0,0,0,.18)}
.hbn-has-img .hbn-badge,.hbn-has-img .hbn-cta{text-shadow:none}

/* v28: taller promo banner + larger, easier-to-read offer text (mobile) */
@media (max-width:767px){
  .hbn-slide{height:144px}
  .hbn-card{padding:0 16px}
  .hbn-txt{gap:4px;max-width:82%}
  .hbn-badge{padding:2px 10px;font-size:13px;line-height:17px}
  .hbn-txt strong{font-size:18.5px;line-height:23px;white-space:nowrap}
  .hbn-txt small{font-size:13px;line-height:16px;max-width:78%}
  .hbn-cta{margin-top:4px;padding:4px 12px;font-size:13.5px;line-height:18px}
  .hbn-art{width:120px;height:120px;margin-top:-60px;font-size:110px}
  .hbn-dots{bottom:8px}
}

/* v30: hero headline - clean white text on a soft navy scrim (the old white-glow rule in index css was fighting it) */
.is-home .home-top:not(.home-top-rentals)>div.homepage-hero{padding-top:64px!important}
.is-home .home-top:not(.home-top-rentals) .homepage-hero-eyebrow{
  position:relative;display:block;padding-top:11px;
  font-size:11.5px;font-weight:700;line-height:15px;letter-spacing:.2em;color:rgba(255,255,255,.96);
  text-shadow:0 1px 2px rgba(4,20,48,.55),0 2px 10px rgba(4,20,48,.35);
}
/* small brand-blue accent bar above the eyebrow */
.is-home .home-top:not(.home-top-rentals) .homepage-hero-eyebrow::before{
  content:"";position:absolute;left:0;top:0;width:30px;height:3px;border-radius:3px;background:#2e9bff;box-shadow:0 0 8px rgba(46,155,255,.65);
}
.is-home .home-top:not(.home-top-rentals) .homepage-hero-title{
  font-size:26px;font-weight:800;line-height:29px;letter-spacing:-.02em;color:#fff;margin:7px 0 0;
  text-shadow:0 1px 2px rgba(4,20,48,.50),0 3px 14px rgba(4,20,48,.38);
}
/* scrim: deeper navy on the left (behind the words), melting out to the right and bottom */
.is-home .home-top:not(.home-top-rentals)::before{
  height:240px;
  background:linear-gradient(100deg,rgba(5,24,58,.66) 0%,rgba(5,24,58,.46) 48%,rgba(5,24,58,.08) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 66%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 66%,transparent 100%);
}
@media (min-width:768px){.is-home .home-top:not(.home-top-rentals) .homepage-hero-title{font-size:44px;line-height:48px}.is-home .home-top:not(.home-top-rentals) .homepage-hero-eyebrow{font-size:13px}}

/* v053: tagline 'Travel, made effortless.' (mixed case -> tighter tracking, a touch larger) */
.is-home .home-top:not(.home-top-rentals) .homepage-hero-eyebrow{font-size:14px;letter-spacing:.03em;font-weight:600;line-height:18px}

/* v056: rotating hero tagline (swaps every 5s with a soft fade/slide) */
.is-home .bh-tag{white-space:nowrap;will-change:opacity,transform;transition:opacity .38s ease,transform .38s ease}
.is-home .bh-tag-in{opacity:1;transform:none;animation:bhTagIn .45s cubic-bezier(.2,.8,.2,1) both}
.is-home .bh-tag-out{opacity:0;transform:translateX(14px)}
@keyframes bhTagIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.is-home .bh-tag,.is-home .bh-tag-in{animation:none;transition:none}}

/* v057: Our trusted partners - slow infinite logo strip (moves left -> right, loops forever, pauses on touch/hover) */
.is-home .bhp{padding:22px 0 30px;overflow:hidden}
.is-home .bhp-head{padding:0 16px;margin-bottom:12px}
.is-home .bhp-view{position:relative;overflow:hidden;padding:6px 0 10px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.is-home .bhp-track{display:flex;width:max-content;animation:bhpRun 48s linear infinite;will-change:transform}
.is-home .bhp-view:hover .bhp-track,.is-home .bhp-view:active .bhp-track{animation-play-state:paused}
.is-home .bhp-list{display:flex;flex:none;gap:12px;padding:0 6px;margin:0;list-style:none}
.is-home .bhp-chip{box-sizing:border-box;flex:none;width:136px;height:66px;display:grid;place-items:center;padding:8px 12px;background:#fff;border:1px solid #e6ebf3;border-radius:16px;box-shadow:0 4px 14px rgba(20,50,110,.06)}
.is-home .bhp-chip img{max-width:100%;max-height:44px;width:auto;height:auto;object-fit:contain;display:block}
.is-home .bhp-word{font-size:12.5px;font-weight:700;line-height:15px;letter-spacing:-.005em;color:#1d3a8a;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* left -> right: start shifted back by one list-width, glide to 0 */
@keyframes bhpRun{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (min-width:768px){.is-home .bhp{max-width:876px;margin:0 auto}.is-home .bhp-chip{width:160px;height:74px}}
@media (prefers-reduced-motion:reduce){.is-home .bhp-track{animation-duration:140s}}

/* v058: partners heading fix - --xu was only defined on .ex, so the title/sub/bar collapsed on top of each other */
.is-home .bhp{--xu:calc(1px / 3.9385);padding:6px 0 30px}
.is-home .bhp-head{padding:0;margin:0 16px 4px}
.is-home .bhp-chip{width:150px;height:72px;padding:10px 14px}
.is-home .bhp-chip img{max-height:48px}
@media (min-width:768px){.is-home .bhp-chip{width:176px;height:82px}.is-home .bhp-chip img{max-height:54px}}

@keyframes bhTicket{0%{transform:rotate(0) scale(1)}25%{transform:rotate(-14deg) scale(1.12)}55%{transform:rotate(9deg) scale(1.08)}80%{transform:rotate(-3deg) scale(1.02)}100%{transform:rotate(0) scale(1)}}

/* ---- Recent searches (all services): more visible, swipeable cards ---- */
.is-home .rs-sec{padding-top:16px!important;padding-bottom:4px!important}
.is-home .rs-head{display:flex;align-items:center;gap:7px;margin:0 2px 9px;color:#10163f}
.is-home .rs-head svg{width:18px;height:18px;color:#2563eb;flex-shrink:0}
.is-home .rs-head b{font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.is-home .rs-head small{margin-left:auto;font-size:11px;font-weight:600;color:#2563eb}
.is-home .rs-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 2px 10px;margin:0 -2px}
.is-home .rs-row::-webkit-scrollbar{display:none}
.is-home .rs-card{flex:0 0 88%;scroll-snap-align:start;min-width:0;padding:10px 10px 10px 12px;gap:12px;border:1px solid #c9dcfb;border-left:4px solid #2563eb;background:linear-gradient(135deg,#fff 0%,#eaf2ff 100%);box-shadow:0 8px 20px rgba(37,99,235,.18);border-radius:16px}
.is-home .rs-row.one .rs-card{flex-basis:100%}
.is-home .rs-card .saved-img{width:74px;height:60px;flex-shrink:0}
.is-home .rs-ic{width:60px;height:60px;border-radius:15px;background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px rgba(37,99,235,.3)}
.is-home .rs-ic svg{width:28px;height:28px}
.is-home .rs-bus{border-left-color:#f97316}.is-home .rs-bus .rs-ic{background:#f97316;box-shadow:0 4px 10px rgba(249,115,22,.3)}
.is-home .rs-train{border-left-color:#7c3aed}.is-home .rs-train .rs-ic{background:#7c3aed;box-shadow:0 4px 10px rgba(124,58,237,.3)}
.is-home .rs-ship{border-left-color:#0891b2}.is-home .rs-ship .rs-ic{background:#0891b2;box-shadow:0 4px 10px rgba(8,145,178,.3)}
.is-home .rs-package{border-left-color:#db2777}.is-home .rs-package .rs-ic{background:#db2777;box-shadow:0 4px 10px rgba(219,39,119,.3)}
.is-home .rs-card .saved-body{min-width:0;gap:1px}
.is-home .rs-card .saved-body small{top:0;font-size:10.5px;line-height:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#2563eb}
.is-home .rs-card .saved-body strong{font-size:15.5px;line-height:20px;font-weight:700;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.is-home .rs-card .saved-meta{font-size:12px;line-height:15px;color:#4b5877;margin-top:3px;top:0;overflow:hidden;text-overflow:ellipsis;display:block;white-space:nowrap}
.is-home .rs-card .saved-meta svg{display:inline-block;vertical-align:-2px;margin-right:4px;width:13px;height:13px}
.is-home .rs-card .saved-chev{width:24px;height:24px;color:#2563eb}
.is-home .rs-card{height:auto!important;min-height:80px;align-items:center}

/* ── Service tiles fill (2026-11-11): when the admin hides tiles, bh-visibility marks
   the grid with data-vis="<tiles still standing>" and the survivors spread across the
   whole card instead of leaving empty tracks. Fewer rows also give their height back
   to the hero, so the search card below rises to meet the tiles. ── */
.is-home .shortcut-grid[data-vis="1"]{grid-template-columns:repeat(1,minmax(0,1fr))}
.is-home .shortcut-grid[data-vis="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.is-home .shortcut-grid[data-vis="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.is-home .shortcut-grid[data-vis="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.is-home .shortcut-grid[data-vis="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.is-home .shortcut-grid[data-vis="7"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.is-home .shortcut-grid[data-vis="8"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.is-home .home-top:has(.shortcut-grid[data-vis="1"]),
.is-home .home-top:has(.shortcut-grid[data-vis="2"]),
.is-home .home-top:has(.shortcut-grid[data-vis="3"]),
.is-home .home-top:has(.shortcut-grid[data-vis="4"]),
.is-home .home-top:has(.shortcut-grid[data-vis="5"]){min-height:376.5px}
.is-home .shortcut-card:has(.shortcut-grid[data-vis="0"]){display:none}
.is-home .home-top:has(.shortcut-grid[data-vis="0"]){min-height:319px}

/* Locked (coming soon) service tiles: no extra line — the tile's own content goes
   softly faded and a small lock sits at the tile's corner. The words appear only
   as a tap toast (.bh-soon-toast), so the grid keeps its exact shape. */
.is-home .shortcut-tile[data-bh-state="coming_soon"] .shortcut-icon-circle,
.is-home .shortcut-tile[data-bh-state="coming_soon"] .shortcut-label{opacity:.45;filter:saturate(.55)}
.is-home .shortcut-tile [data-bh-vis="lock"]{position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:999px;background:#fff;color:#10163f;box-shadow:0 1px 4px rgba(16,22,63,.28);display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none}
.is-home .shortcut-tile [data-bh-vis="lock"] svg{width:9px;height:9px}
.bh-soon-toast{position:fixed;z-index:3000;transform:translate(-50%,-100%);background:#10163f;color:#fff;font-size:11px;font-weight:600;line-height:1;padding:7px 11px;border-radius:999px;box-shadow:0 6px 18px rgba(16,22,63,.3);pointer-events:none;opacity:0;transition:opacity .18s ease;white-space:nowrap}
.bh-soon-toast.on{opacity:1}
.is-home .shortcut-tile [data-bh-vis="newbadge"]{position:absolute;top:3px;right:3px;background:#0a62ec;color:#fff;font-size:8px;font-weight:700;letter-spacing:.04em;line-height:1;padding:3px 5px;border-radius:999px;box-shadow:0 1px 4px rgba(10,98,236,.35);z-index:3;pointer-events:none}

/* Selected / tapped tile: same B/W icon, only its accent part turns light orange */
.is-home .shortcut-card .shortcut-tile.shortcut-tile-primary .shortcut-icon-circle:not(#x)::before{background-image:var(--img-on)}
.is-home .shortcut-card .shortcut-tile:active .shortcut-icon-circle:not(#x)::before{background-image:var(--img-on)}

/* Hero tagline: same Bricolage family as the headline, but NOT bold (owner, 2026-11-13) */
.is-home .home-top:not(.home-top-rentals) .homepage-hero-eyebrow{font-family:"Bricolage Grotesque",Inter,"Noto Sans Bengali",sans-serif;font-weight:500}
/* Hero headline display font — Bricolage Grotesque 800 (owner pick, 2026-11-13) */
.is-home .home-top:not(.home-top-rentals) .homepage-hero-title{font-family:"Bricolage Grotesque",Inter,"Noto Sans Bengali",sans-serif;font-size:25px;line-height:28px;letter-spacing:-.01em}
/* one-line headline: pull the hero (and everything below it) up so no empty gap stays — mobile only */
@media (max-width:767px){.is-home .home-top:not(.home-top-rentals)>div.homepage-hero{height:136px}}
@media (min-width:768px){.is-home .home-top:not(.home-top-rentals) .homepage-hero-title{font-size:46px;line-height:50px}}

/* Blue accent bar: stays fixed in its place (no longer rides with the sliding
   tagline) and lengthens in sync with each new line's arrival (owner, 2026-11-13) */



@keyframes bhBarGrow{0%{width:30px}45%{width:58px}100%{width:30px}}


/* Tagline slide runs on the inner span (.bh-tag-txt): the blue bar is the <p>'s
   own ::before, so it now stays fixed in place while the text slides; the bar
   lengthens in sync with each new line's arrival (owner, 2026-11-13). */
.is-home .home-top .bh-tag{transition:none}
.is-home .home-top .bh-tag-in{animation:none}
.is-home .home-top .bh-tag-out{opacity:1;transform:none}
.is-home .bh-tag .bh-tag-txt{display:inline-block;will-change:opacity,transform;transition:opacity .38s ease,transform .38s ease}
.is-home .bh-tag-in .bh-tag-txt{opacity:1;transform:none;animation:bhTagIn .45s cubic-bezier(.2,.8,.2,1) both}
.is-home .bh-tag-out .bh-tag-txt{opacity:0;transform:translateX(14px)}
.is-home .home-top:not(.home-top-rentals) .bh-tag-in::before{animation:bhBarGrow .55s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.is-home .bh-tag .bh-tag-txt{animation:none;transition:none}.is-home .home-top:not(.home-top-rentals) .bh-tag-in::before{animation:none}}