/* ==========================================================================
   JANRATH TOUR & TRAVELS — Design System
   Palette: Crimson red (brand wings) + deep charcoal + warm amber (Happy Journey)
   Type: Bricolage Grotesque (display) + Inter (body) + Caveat (script accents)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600;700&family=Caveat:wght@600;700&display=swap');

:root{
  --red:        #C81E3B;
  --red-dark:   #8A1229;
  --red-light:  #F3D9DE;
  --black:      #1B1712;
  --charcoal:   #2E2822;
  --gold:       #F2A93B;
  --gold-dark:  #C7811C;
  --cream:      #FFF7EA;
  --cream-2:    #FFFDF8;
  --gray:       #6E6459;
  --gray-light: #E9E1D3;
  --white:      #FFFFFF;

  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-script: 'Caveat', cursive;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-soft: 0 10px 30px -12px rgba(27,23,18,0.18);
  --shadow-card: 0 6px 20px -8px rgba(27,23,18,0.22);
  --container: 1180px;
}

body.nav-open{overflow:hidden;}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; background:var(--cream);}
body{
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--black);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none;}
.container{max-width:var(--container); margin:0 auto; padding:0 24px;}
section{position:relative; padding:52px 0;}
@media (max-width:640px){section{padding:36px 0;}}
h1,h2,h3,h4{font-family:var(--font-display); line-height:1.15; color:var(--black); font-weight:700;}
.eyebrow{
  font-family:var(--font-body); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:.75rem; color:var(--red); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--gold); display:inline-block;}
.script{font-family:var(--font-script); color:var(--gold-dark); font-size:1.4em;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:11px 22px; border-radius:50px;
  font-weight:700; font-size:.86rem; transition:.25s ease; white-space:nowrap;
}
.btn svg{width:16px; height:16px; flex-shrink:0;}
.btn-block{width:100%; justify-content:center; padding:12px 18px; font-size:.86rem;}
.btn-primary{background:var(--red); color:var(--white); box-shadow:0 8px 20px -8px rgba(200,30,59,.6);}
.btn-primary:hover{background:var(--red-dark); transform:translateY(-2px);}
.btn-gold{background:var(--gold); color:var(--black);}
.btn-gold:hover{background:var(--gold-dark); color:var(--white); transform:translateY(-2px);}
.btn-outline{border:2px solid var(--black); color:var(--black); background:transparent;}
.btn-outline:hover{background:var(--black); color:var(--white);}
.btn-outline-light{border:2px solid rgba(255,255,255,.55); color:var(--white); background:transparent;}
.btn-outline-light:hover{background:var(--white); color:var(--black);}
.btn-sm{padding:10px 20px; font-size:.85rem;}
.btn-call-hero{padding:15px 30px; font-size:1.05rem; letter-spacing:.02em;}
.btn-call-hero svg{width:20px; height:20px;}
@media (max-width:640px){.btn-call-hero{padding:13px 24px; font-size:.94rem;}}

/* ---------- Floating travel-icon background layer ---------- */
.floaters{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.floaters svg{position:absolute; opacity:.14; animation:drift 18s ease-in-out infinite;}
.floaters svg:nth-child(odd){animation-duration:22s;}
.floaters svg:nth-child(3n){animation-duration:26s; animation-direction:reverse;}
@keyframes drift{
  0%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(18px,-22px) rotate(8deg);}
  100%{transform:translate(0,0) rotate(0deg);}
}
@media (prefers-reduced-motion: reduce){
  .floaters svg{animation:none;}
  html{scroll-behavior:auto;}
}

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
.topbar{background:var(--black); color:var(--gray-light); font-size:.8rem;}
.topbar .container{display:flex; justify-content:space-between; align-items:center; padding-top:8px; padding-bottom:8px; flex-wrap:wrap; gap:6px;}
.topbar a{color:var(--gold); font-weight:600;}
.topbar-left{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.topbar-sep{color:var(--gray-light); opacity:.5;}
.topbar-wa{margin-left:10px;}
@media (max-width:768px){.topbar{display:none;}}

header.site-header{
  position:sticky; top:0; z-index:200; background:var(--cream-2);
  border-bottom:1px solid var(--gray-light);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:10px 24px; max-width:var(--container); margin:0 auto;}
.brand{display:flex; align-items:center; gap:14px;}
.brand img{height:68px; width:auto;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-text strong{font-family:var(--font-display); font-size:1.8rem; letter-spacing:.01em;}
@media (max-width:640px){
  .brand{gap:10px;}
  .brand img{height:52px;}
  .brand-text strong{font-size:1.32rem;}
}

nav.main-nav{display:flex; align-items:center; gap:4px;}
.nav-scroll{display:contents;}
.nav-ic{display:none;}
nav.main-nav ul{display:flex; align-items:center; gap:2px;}
nav.main-nav ul > li{position:relative;}
nav.main-nav ul > li > a, nav.main-nav ul > li > button.nav-toggle-item{
  display:flex; align-items:center; gap:6px; padding:12px 16px; font-weight:600; font-size:.92rem;
  border-radius:50px; transition:.2s; background:none; color:var(--black);
}
nav.main-nav ul > li > a:hover, nav.main-nav ul > li.active > a,
nav.main-nav ul > li > button.nav-toggle-item:hover{ background:var(--red-light); color:var(--red-dark); }
nav.main-nav .chev{width:10px; height:10px; transition:.2s;}
nav.main-nav li.has-dropdown:hover .chev{transform:rotate(180deg);}

.dropdown{
  position:absolute; top:calc(100% + 10px); left:0; min-width:250px; background:var(--white);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-soft); padding:10px; opacity:0; visibility:hidden;
  transform:translateY(8px); transition:.2s ease; border:1px solid var(--gray-light);
}
li.has-dropdown:hover .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown a{display:flex; flex-direction:column; padding:10px 12px; border-radius:8px; gap:2px;}
.dropdown a:hover{background:var(--cream);}
.dropdown a strong{font-size:.88rem; font-weight:700; color:var(--black);}
.dropdown a small{font-size:.74rem; color:var(--gray);}

.nav-cta{display:flex; align-items:center; gap:10px;}

/* mobile toggle button */
.hamburger{display:none; flex-direction:column; gap:5px; width:38px; height:38px; align-items:center; justify-content:center; border-radius:10px; background:var(--red); }
.hamburger span{width:20px; height:2px; background:var(--white); border-radius:2px; transition:.25s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ==========================================================================
   MOBILE NAV — right-side sliding drawer
   ========================================================================== */
.nav-mobile-head{display:none;}
.nav-backdrop{display:none;}
.nav-cta-mobile{display:none;}
.nav-mobile-social{display:none;}
.nav-mobile-contact{display:none;}
@media (max-width: 960px){
  .nav-backdrop{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:190;
    opacity:0; visibility:hidden; transition:opacity .3s ease;
  }
  .nav-backdrop.open{opacity:1; visibility:visible;}

  nav.main-nav{
    position:fixed; top:0; right:0; left:auto; bottom:0; width:82%; max-width:340px; height:100vh; height:100dvh;
    background:var(--cream-2); transform:translateX(105%); transition:.35s cubic-bezier(.4,0,.2,1);
    overflow:hidden; box-shadow:-8px 0 30px -8px rgba(0,0,0,.35); z-index:250;
    border-radius:0; display:flex; flex-direction:column;
  }
  nav.main-nav.open{transform:translateX(0);}

  .nav-mobile-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 14px;
    background:var(--black); border-bottom:3px solid var(--gold); flex-shrink:0;
  }
  .nav-mobile-head .nav-mobile-brand{display:flex; align-items:center; gap:8px;}
  .nav-mobile-head .nav-mobile-brand img{height:26px; width:auto; background:#fff; border-radius:5px; padding:2px;}
  .nav-mobile-head .nav-mobile-brand strong{display:block; color:#fff; font-family:var(--font-display); font-size:.82rem; line-height:1.2;}
  .nav-mobile-head .nav-mobile-brand span{display:block; color:var(--gold); font-size:.56rem; letter-spacing:.04em; text-transform:uppercase; font-weight:700;}
  .nav-close{
    width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff;
    font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }

  .nav-scroll{overflow-y:auto; flex:1; display:flex; flex-direction:column;}

  nav.main-nav > .nav-scroll > ul{flex-direction:column; align-items:stretch; width:100%; gap:0;}
  nav.main-nav ul li{border-bottom:1px solid var(--gray-light);}
  nav.main-nav ul li > a, nav.main-nav ul li > button.nav-toggle-item{
    width:100%; justify-content:space-between; padding:11px 14px; border-radius:0; font-size:.84rem;
  }
  nav.main-nav ul li > a:hover, nav.main-nav ul li > button.nav-toggle-item:hover{background:none; color:var(--red);}
  .nav-item-label{display:flex; align-items:center; gap:9px;}
  .nav-ic{width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
  .nav-ic svg{width:18px; height:18px;}

  .dropdown{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none;
    max-height:0; overflow:hidden; padding:0 6px; transition:max-height .3s ease; background:var(--cream);
  }
  li.has-dropdown.open .dropdown{max-height:400px; padding:2px 6px 10px;}
  li.has-dropdown:hover .dropdown{max-height:0;} /* disable hover on mobile */
  li.has-dropdown.open:hover .dropdown{max-height:400px;}
  .hamburger{display:flex;}

  .nav-cta-mobile{display:flex; flex-direction:column; gap:7px; padding:12px 14px;}
  .nav-cta-mobile a{width:100%; justify-content:center; padding:10px 14px; font-size:.82rem;}
  .btn-whatsapp{background:#25D366; color:#fff;}
  .btn-whatsapp:hover{background:#1DA851;}

  .nav-mobile-social{display:block; padding:10px 14px; border-top:1px solid var(--gray-light);}
  .nav-mobile-label{display:block; font-size:.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--gray); margin-bottom:6px;}
  .nav-mobile-social .footer-social{margin-top:0; gap:8px;}
  .nav-mobile-social .footer-social svg{width:26px; height:26px;}

  .nav-mobile-contact{
    display:flex; flex-direction:column; gap:6px; padding:10px 14px 14px; border-top:1px solid var(--gray-light);
    font-size:.74rem; color:var(--charcoal);
  }
  .nav-mobile-contact a{color:var(--charcoal); font-weight:600;}
}
@media (max-width:380px){
  nav.main-nav{width:88%;}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
}
.hero.hero-slider{
  min-height:520px; display:flex; align-items:center; padding:70px 0;
}
.hero-slides{position:absolute; inset:0; z-index:0;}
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; animation:heroFade 20s infinite;
}
.hero-slide:nth-child(1){animation-delay:0s;}
.hero-slide:nth-child(2){animation-delay:4s;}
.hero-slide:nth-child(3){animation-delay:8s;}
.hero-slide:nth-child(4){animation-delay:12s;}
.hero-slide:nth-child(5){animation-delay:16s;}
@keyframes heroFade{
  0%{opacity:0;}
  2.5%{opacity:1;}
  17.5%{opacity:1;}
  22%{opacity:0;}
  100%{opacity:0;}
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg, rgba(20,16,12,.88) 0%, rgba(20,16,12,.62) 55%, rgba(20,16,12,.8) 100%);
}
.hero-content{position:relative; z-index:2; max-width:640px;}
.hero.hero-slider .eyebrow-light{color:var(--gold);}
.hero.hero-slider .eyebrow-light::before{background:var(--gold);}
.hero.hero-slider h1{color:#fff; font-size:clamp(1.75rem, 3.4vw, 2.7rem); margin-bottom:14px;}
.hero.hero-slider .script{color:var(--gold);}
.hero.hero-slider p.lead{font-size:.98rem; color:rgba(255,255,255,.86); max-width:500px; margin-bottom:20px;}
.hero .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px;}
.hero-stats{display:flex; gap:22px; flex-wrap:wrap;}
.hero.hero-slider .hero-stats div strong{display:block; font-family:var(--font-display); font-size:1.3rem; color:var(--gold);}
.hero.hero-slider .hero-stats div span{font-size:.7rem; color:rgba(255,255,255,.72); text-transform:uppercase; letter-spacing:.06em;}
.hero-stats div strong{display:block; font-family:var(--font-display); font-size:1.3rem; color:var(--red);}
.hero-stats div span{font-size:.7rem; color:var(--gray); text-transform:uppercase; letter-spacing:.06em;}

/* flight-route signature graphic */
.route-art{position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.route-art svg{width:100%; height:100%;}
.route-path{stroke-dasharray:8 10; animation:dash 30s linear infinite;}
@keyframes dash{to{stroke-dashoffset:-400;}}
.route-plane{animation:fly 6s ease-in-out infinite;}
@keyframes fly{0%,100%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(6px,-8px) rotate(4deg);}}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; text-align:center;}
  .hero p.lead{margin-left:auto; margin-right:auto;}
  .hero .cta-row{justify-content:center;} .hero-stats{justify-content:center;}
  .route-art{max-width:280px; margin:0 auto;}
  .hero.hero-slider{text-align:center; min-height:460px;}
  .hero.hero-slider .hero-content{max-width:100%; margin:0 auto;}
}
@media (max-width:640px){
  .hero-stats{flex-wrap:nowrap; gap:6px; justify-content:space-between;}
  .hero-stats div{flex:1; min-width:0; text-align:center;}
  .hero-stats div strong{font-size:1rem;}
  .hero-stats div span{font-size:.56rem; line-height:1.25; display:block;}
  .hero.hero-slider{min-height:400px; padding:44px 0;}
  .hero.hero-slider .hero-content{max-width:100%;}
}
@media (prefers-reduced-motion: reduce){
  .hero-slide{animation:none; opacity:0;}
  .hero-slide:first-child{opacity:1;}
}

/* ---------- Hero Varanasi photo collage (4 photos incl. shop front) ---------- */
.hero-photos{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:1fr 1fr;
  gap:8px; aspect-ratio:4/3; position:relative;
}
.hero-photos .hp{border-radius:14px; overflow:hidden; box-shadow:var(--shadow-card); border:3px solid var(--cream-2);}
.hero-photos .hp img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-photos .hp1{grid-column:1/2; grid-row:1/3;}
.hero-photos .hp2{grid-column:2/4; grid-row:1/2;}
.hero-photos .hp3{grid-column:2/3; grid-row:2/3;}
.hero-photos .hp4{grid-column:3/4; grid-row:2/3;}
.hero-photos .hp-badge{
  position:absolute; bottom:8px; left:8px; background:rgba(27,23,18,.72); color:var(--white); font-size:.68rem;
  font-weight:700; padding:4px 10px; border-radius:50px; z-index:4;
}
@media (max-width:900px){
  .hero-photos{max-width:380px; margin:0 auto; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:1/1;}
  .hero-photos .hp1{grid-column:1/2; grid-row:1/2;}
  .hero-photos .hp2{grid-column:2/3; grid-row:1/2;}
  .hero-photos .hp3{grid-column:1/2; grid-row:2/3;}
  .hero-photos .hp4{grid-column:2/3; grid-row:2/3;}
}
@media (max-width:480px){.hero-photos{max-width:300px;}}

/* ==========================================================================
   PAGE HEADER (inner pages)
   ========================================================================== */
.page-hero{
  position:relative; background:var(--black); color:var(--white); padding:38px 0 34px; overflow:hidden;
}
.page-hero .container{position:relative; z-index:2;}
.page-hero h1{color:var(--white); font-size:clamp(1.9rem,3.6vw,2.8rem);}
.page-hero p{color:var(--gray-light); max-width:600px; margin-top:12px;}
.breadcrumb{font-size:.8rem; color:var(--gold); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px; display:block;}

/* ==========================================================================
   SECTION HEADINGS
   ========================================================================== */
.section-head{max-width:640px; margin-bottom:28px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(1.6rem,3vw,2.3rem);}
.section-head p{color:var(--gray); margin-top:10px; font-size:1rem;}

/* ==========================================================================
   CARDS — services / grid
   ========================================================================== */
.grid{display:grid; gap:18px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}
@media (max-width:640px){
  .grid{gap:12px;}
  .card{padding:16px 16px;}
  .card .icon-badge{width:38px; height:38px; margin-bottom:8px;}
  .card .icon-badge svg{width:20px; height:20px;}
  .card h3{font-size:.95rem;}
  .card p{font-size:.82rem;}
  .package-body{padding:13px 14px 15px;}
  .section-head{margin-bottom:18px;}
}

.card{
  background:var(--white); border-radius:var(--radius-sm); padding:22px 20px; box-shadow:var(--shadow-card);
  border:1px solid var(--gray-light); transition:.25s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 16px 34px -14px rgba(27,23,18,.28);}
.card .icon-badge{
  width:44px; height:44px; border-radius:12px; background:var(--red-light); color:var(--red);
  display:flex; align-items:center; justify-content:center; margin-bottom:12px;
}
.card .icon-badge svg{width:22px; height:22px;}
.card h3{font-size:1.02rem; margin-bottom:6px;}
.card p{color:var(--gray); font-size:.86rem;}
.card ul{margin-top:10px; display:flex; flex-direction:column; gap:6px;}
.card ul li{font-size:.83rem; color:var(--charcoal); display:flex; gap:8px; align-items:flex-start;}
.card ul li::before{content:"›"; color:var(--gold-dark); font-weight:800;}

/* ---------- Package image-box cards ---------- */
.package-card{
  background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card);
  border:1px solid var(--gray-light); display:flex; flex-direction:column; transition:.25s ease;
}
.package-card:hover{transform:translateY(-6px);}
.package-img{
  height:130px; background:linear-gradient(135deg,var(--red) 0%, var(--gold) 100%);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.package-img svg{width:52px; height:52px;}
.package-img.has-photo{background:var(--charcoal);}
.package-img.has-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.package-tag{
  position:absolute; top:10px; left:10px; background:rgba(27,23,18,.75); color:var(--white); font-size:.65rem;
  font-weight:700; padding:4px 10px; border-radius:50px; text-transform:uppercase; letter-spacing:.05em;
}
.package-body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1;}
.package-body h3{font-size:.98rem;}
.package-body p{color:var(--gray); font-size:.82rem; flex:1;}
.package-foot{display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:10px;}
.package-enquiry-btn{width:100%; justify-content:center;}
.package-price{font-family:var(--font-display); font-weight:700; color:var(--red);}
.package-price small{font-family:var(--font-body); color:var(--gray); font-weight:500; font-size:.72rem;}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testi-card{
  background:var(--white); border-radius:var(--radius-sm); padding:20px; box-shadow:var(--shadow-card);
  border:1px solid var(--gray-light); position:relative; height:100%;
}
.testi-card .quote-mark{font-family:var(--font-script); font-size:2.4rem; color:var(--gold); line-height:0; display:block; margin-bottom:8px;}
.testi-stars{color:var(--gold-dark); font-size:.88rem; margin-bottom:8px; letter-spacing:2px;}
.testi-card p.msg{color:var(--charcoal); font-size:.86rem; margin-bottom:14px;}
.testi-person{display:flex; align-items:center; gap:10px;}
.testi-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--red); color:var(--white); display:flex;
  align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:.85rem;
}
.testi-person strong{display:block; font-size:.86rem;}
.testi-person span{font-size:.72rem; color:var(--gray);}

/* ---------- Testimonial carousel (home page) ---------- */
.testi-slider{position:relative; padding:0 46px;}
.testi-viewport{overflow:hidden;}
.testi-track{display:flex; gap:18px; transition:transform .5s cubic-bezier(.4,0,.2,1);}
.testi-slide{flex:0 0 calc((100% - 36px)/3);}
@media (max-width:900px){.testi-slide{flex:0 0 calc((100% - 18px)/2);}}
@media (max-width:640px){.testi-slide{flex:0 0 100%;} .testi-slider{padding:0 40px;}}
.testi-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
  background:var(--white); border:1.5px solid var(--gray-light); box-shadow:var(--shadow-card);
  display:flex; align-items:center; justify-content:center; color:var(--red); z-index:5; transition:.2s;
}
.testi-arrow:hover{background:var(--red); color:var(--white); border-color:var(--red);}
.testi-arrow svg{width:18px; height:18px;}
.testi-arrow.prev{left:0;}
.testi-arrow.next{right:0;}
.testi-dots{display:flex; justify-content:center; gap:7px; margin-top:18px;}
.testi-dots button{width:8px; height:8px; border-radius:50%; background:var(--gray-light); padding:0;}
.testi-dots button.active{background:var(--red); width:22px; border-radius:6px;}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery-filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px;}
.gallery-filters button{
  padding:9px 20px; border-radius:50px; border:1.5px solid var(--gray-light); background:var(--white);
  font-weight:600; font-size:.85rem; transition:.2s;
}
.gallery-filters button.active, .gallery-filters button:hover{background:var(--red); color:var(--white); border-color:var(--red);}
.gallery-grid{columns:3 220px; column-gap:18px;}
.gallery-item{
  break-inside:avoid; margin-bottom:18px; border-radius:var(--radius-sm); overflow:hidden; position:relative;
  box-shadow:var(--shadow-card); background:var(--white);
}
.gallery-item img, .gallery-item video{width:100%; display:block;}
.gallery-item .cap{padding:10px 12px; font-size:.8rem; color:var(--gray); font-weight:600;}
.gallery-placeholder{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
  background:repeating-linear-gradient(45deg, var(--cream), var(--cream) 10px, #fff1dc 10px, #fff1dc 20px);
  color:var(--gray); font-size:.78rem; text-align:center; padding:14px;
}
.gallery-placeholder svg{width:30px; height:30px; color:var(--gold-dark);}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:start;}
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr;}}
.contact-info-card{background:var(--black); color:var(--white); border-radius:var(--radius-sm); padding:24px; }
.contact-info-card h3{color:var(--white); margin-bottom:4px;}
.contact-info-card p{color:var(--gray-light); font-size:.85rem; margin-bottom:18px;}
.contact-row{display:flex; gap:12px; margin-bottom:16px; align-items:flex-start;}
.contact-row .ic{width:34px; height:34px; border-radius:9px; background:var(--red); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.contact-row .ic svg{width:16px; height:16px; color:var(--white);}
.contact-row strong{display:block; font-size:.86rem;}
.contact-row span, .contact-row a{font-size:.8rem; color:var(--gray-light);}
.contact-form{background:var(--white); border-radius:var(--radius-sm); padding:24px; box-shadow:var(--shadow-card); border:1px solid var(--gray-light);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}
.field{margin-bottom:14px;}
.field label{display:block; font-size:.78rem; font-weight:700; margin-bottom:5px;}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border-radius:9px; border:1.5px solid var(--gray-light); font-family:inherit;
  font-size:.86rem; background:var(--cream-2); transition:.2s;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--red);}
.form-msg{padding:12px 16px; border-radius:10px; font-size:.88rem; margin-bottom:16px; display:none;}
.form-msg.show{display:block;}
.form-msg.ok{background:#E6F4EA; color:#1E7B34;}
.form-msg.err{background:#FBE7E9; color:var(--red-dark);}

/* ==========================================================================
   CTA STRIP + FOOTER
   ========================================================================== */
.cta-strip{background:linear-gradient(120deg,var(--red) 0%, var(--red-dark) 100%); color:var(--white); text-align:center; padding:32px 0;}
.cta-strip h2{color:var(--white); font-size:clamp(1.3rem,3vw,2.1rem); margin-bottom:10px;}
.cta-strip p{color:var(--red-light); margin-bottom:18px; font-size:.9rem;}
.cta-strip .cta-row{display:flex; gap:10px; justify-content:center; flex-wrap:nowrap;}
@media (max-width:640px){
  .cta-strip{padding:24px 0;}
  .cta-strip .container{padding-left:16px; padding-right:16px;}
  .cta-strip .cta-row{gap:8px;}
  .cta-strip .btn{flex:1; padding:11px 10px; font-size:.76rem; white-space:normal; line-height:1.2;}
  .cta-strip .btn svg{width:14px; height:14px;}
}

footer{background:var(--black); color:var(--gray-light); padding:60px 0 0;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1);}
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px;}
  .footer-grid > div:nth-child(1){grid-column:1/-1;}
  .footer-grid > div:nth-child(4){grid-column:1/-1;}
}
@media (max-width:640px){
  footer{padding:32px 0 0;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:18px; padding-bottom:24px;}
  .footer-brand{margin-bottom:10px;}
  footer p{font-size:.78rem;}
  footer h4{font-size:.82rem; margin-bottom:10px;}
  footer ul li{margin-bottom:7px;}
  footer ul li a, footer ul li{font-size:.78rem;}
}
.footer-brand{display:flex; gap:10px; align-items:center; margin-bottom:14px;}
.footer-brand img{height:44px;}
.footer-brand strong{font-family:var(--font-display); color:var(--white); font-size:1.05rem;}
footer p{font-size:.86rem; color:var(--gray-light); opacity:.85;}
footer h4{color:var(--white); font-size:.92rem; margin-bottom:16px; text-transform:uppercase; letter-spacing:.06em;}
footer ul li{margin-bottom:10px;}
footer ul li a{font-size:.86rem; color:var(--gray-light); opacity:.85; transition:.2s;}
footer ul li a:hover{color:var(--gold); opacity:1;}
.footer-social{display:flex; gap:10px; margin-top:16px;}
.footer-social a{width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.2s;}
.footer-social a:hover{transform:translateY(-3px);}
.footer-social svg{width:36px; height:36px;}
.footer-bottom{display:flex; justify-content:space-between; padding:20px 0; font-size:.78rem; color:var(--gray-light); opacity:.7; flex-wrap:wrap; gap:8px;}
@media (max-width:640px){.footer-bottom{padding:14px 0; font-size:.7rem; flex-direction:column; gap:4px; text-align:center;}}
.dev-credit-btn{color:var(--gold); font-weight:700; text-decoration:underline dotted; text-underline-offset:2px; background:none; cursor:pointer; font-size:inherit; font-family:inherit;}
.dev-phone{display:none; margin-left:4px;}
.dev-phone.show{display:inline;}
.dev-phone a{color:var(--gold); font-weight:700;}

/* ---------- Whatsapp float button ---------- */
.wa-float{
  position:fixed; bottom:22px; right:22px; z-index:300; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -8px rgba(0,0,0,.4);
  animation:pulse 2.4s ease-in-out infinite;
}
.wa-float svg{width:28px; height:28px; color:#fff;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}

/* ---------- Fade-in on scroll ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal.visible{opacity:1; transform:translateY(0);}

/* ---------- Reusable compact photo containers ---------- */
.photo-strip-item{border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-card);}
.photo-strip-item img{width:100%; height:200px; object-fit:cover; display:block;}
.photo-frame{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card); border:1px solid var(--gray-light);}
.photo-frame img{width:100%; display:block; max-height:420px; object-fit:cover;}
.story-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
@media (max-width:900px){
  .story-grid{grid-template-columns:1fr; gap:16px;}
  .story-photo{order:-1;}
}

/* ---------- Feature-split: text column + small feature-card column, used in "Local Speciality" and "Build Your Own" sections ---------- */
.feature-split{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
@media (max-width:900px){
  .feature-split{grid-template-columns:1fr; gap:22px;}
}
.mini-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:640px){
  .mini-grid-2{gap:10px;}
  .mini-grid-2 .card{padding:12px 10px;}
  .mini-grid-2 .card .icon-badge{width:32px; height:32px; margin-bottom:6px;}
  .mini-grid-2 .card .icon-badge svg{width:18px; height:18px;}
  .mini-grid-2 .card h3{font-size:.82rem; margin-bottom:4px;}
  .mini-grid-2 .card p{font-size:.72rem; line-height:1.35;}
}

/* ---------- FAQ accordion: compact, click-to-expand ---------- */
.faq-list{display:flex; flex-direction:column; gap:10px;}

/* ---------- Daily Bus Service strip ---------- */
.bus-strip{background:var(--cream-2); padding:20px 0; border-bottom:1px solid var(--gray-light); overflow:hidden;}
.bus-strip-inner{display:flex; align-items:center; gap:20px;}
.bus-strip-icon{
  flex-shrink:0; width:52px; height:52px; border-radius:14px; background:var(--red-light);
  display:flex; align-items:center; justify-content:center;
}
.bus-strip-icon svg{width:30px; height:30px;}
.bus-strip-text{flex:1; min-width:0;}
.bus-strip-text h3{font-size:1.05rem; color:var(--black); margin-bottom:2px;}
.bus-strip-text p{font-size:.82rem; color:var(--gray); line-height:1.4;}
.bus-strip-btn{flex-shrink:0; white-space:nowrap;}
@media (max-width:768px){
  .bus-strip-inner{flex-direction:column; text-align:center; gap:12px;}
  .bus-strip-icon{margin:0 auto;}
  .bus-strip-text{width:100%;}
  .bus-strip-btn{width:100%; justify-content:center; white-space:normal;}
}
@media (max-width:640px){
  .bus-strip{padding:16px 0;}
  .bus-strip-icon{width:44px; height:44px; border-radius:12px;}
  .bus-strip-icon svg{width:24px; height:24px;}
  .bus-strip-text h3{font-size:.92rem;}
  .bus-strip-text p{font-size:.76rem; line-height:1.4;}
  .bus-strip-btn{padding:11px 16px; font-size:.82rem;}
}

/* ---------- Featured package highlight checklist ---------- */
.pkg-highlights{display:flex; flex-direction:column; gap:10px; margin-bottom:24px;}
.pkg-highlights li{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:rgba(255,255,255,.9);}
.pkg-highlights li::before{content:"✓"; flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--gold); color:var(--black); font-size:.7rem; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:1px;}
@media (max-width:640px){.pkg-highlights li{font-size:.84rem;}}

/* ---------- Tick list (dark text, light background variant) ---------- */
.tick-list{display:flex; flex-direction:column; gap:10px;}
.tick-list li{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--charcoal);}
.tick-list li::before{content:"✓"; flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--red-light); color:var(--red-dark); font-size:.7rem; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:1px;}
@media (max-width:640px){.tick-list li{font-size:.84rem;}}.faq-item{
  background:var(--white); border:1px solid var(--gray-light); border-radius:var(--radius-sm);
  padding:0; overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; padding:16px 18px; font-weight:700; font-size:.92rem; color:var(--black);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-plus{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--red-light); color:var(--red-dark);
  display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:700; transition:.2s;
}
.faq-item[open] .faq-plus{transform:rotate(45deg); background:var(--red); color:#fff;}
.faq-item p{padding:0 18px 16px; color:var(--gray); font-size:.86rem;}
@media (max-width:640px){
  .faq-item summary{padding:13px 14px; font-size:.86rem;}
  .faq-plus{width:20px; height:20px; font-size:.9rem;}
  .faq-item p{padding:0 14px 13px; font-size:.8rem;}
}
@media (max-width:640px){
  .photo-strip-item img{height:140px;}
  .photo-frame img{max-height:200px;}
}

/* ---------- Call-now flash popup (auto-shows on page load, auto-dismisses) ---------- */
.call-flash{
  position:fixed; bottom:22px; left:22px; z-index:310; background:var(--red); color:#fff;
  border-radius:50px; box-shadow:0 10px 26px -8px rgba(200,30,59,.55);
  display:flex; align-items:center; opacity:0; transform:translateY(16px) scale(.96); pointer-events:none;
  transition:opacity .35s ease, transform .35s ease; animation:flashPulse 1.1s ease-in-out infinite;
}
.call-flash.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.call-flash .cf-link{display:flex; align-items:center; gap:8px; padding:12px 34px 12px 16px; font-weight:700; font-size:.84rem; color:#fff;}
.call-flash .cf-icon svg{width:16px; height:16px;}
.call-flash .cf-close{
  position:absolute; right:6px; top:50%; transform:translateY(-50%); width:20px; height:20px; border-radius:50%;
  background:rgba(255,255,255,.28); color:#fff; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.call-flash .cf-close:hover{background:rgba(255,255,255,.45);}
@keyframes flashPulse{
  0%,100%{box-shadow:0 10px 26px -8px rgba(200,30,59,.55);}
  50%{box-shadow:0 10px 34px -4px rgba(200,30,59,.9);}
}
@media (max-width:640px){.call-flash{left:14px; bottom:14px;} .call-flash .cf-link{padding:10px 30px 10px 14px; font-size:.8rem;}}

/* ---------- misc ---------- */
.divider-wave{display:block; width:100%; height:auto; margin-top:-2px;}
.tag-pill{display:inline-block; background:var(--gold); color:var(--black); font-size:.72rem; font-weight:700; padding:5px 14px; border-radius:50px; text-transform:uppercase; letter-spacing:.05em;}