var {useState,useEffect,useRef} = React;

/* ============================================================
   HOME  (light-led, alternating dark)
   ============================================================ */
function Hero({navigate}){
  return (
    <section className="hero">
      <div className="wrap hero-banner">
        <div className="hero-left">
          <h1 className="hero-title">
            <span className="tline"><span style={{transitionDelay:'.05s'}}>Visit The Most</span></span>
            <span className="tline"><span style={{transitionDelay:'.14s'}}><em className="hero-accent">Beautiful Places</em> In</span></span>
            <span className="tline"><span style={{transitionDelay:'.23s'}}>The World</span></span>
          </h1>
          <window.Reveal variant="fade" delay={360} className="hero-sub-wrap">
            <p className="hero-sub">
              Customized travel, corporate events, team-building and wellness
              retreats: private, personalized journeys across India and the
              world, designed entirely around you.
            </p>
          </window.Reveal>
          <SearchBar navigate={navigate}/>
        </div>

        <div className="hero-right">
          <window.Reveal variant="fade" className="hero-globe">
            <window.GlobeHero navigate={navigate}/>
          </window.Reveal>
        </div>
      </div>
    </section>
  );
}

function SearchBar({navigate}){
  const dests=["Varanasi · Prayagraj · Ayodhya","Kashmir · Manali · Spiti Valley","Leh · Ladakh","Kerala","Rajasthan","Gujarat & Kutch","Mysuru · Ooty · Coorg","Kanyakumari · Rameswaram · Madurai","Goa","Andaman & Nicobar Islands","Darjeeling & North East","Singapore & Malaysia","Dubai · Qatar · Bahrain · UAE","Europe","Africa","South East Asia"];
  const [dest,setDest]=useState("");
  const [date,setDate]=useState("");
  const [guests,setGuests]=useState(2);
  const dateRef=useRef(null);

  const openDate=()=>{
    const el=dateRef.current; if(!el) return;
    if(el.showPicker){ try{ el.showPicker(); return; }catch(e){} }
    el.focus();
  };
  const today=new Date().toISOString().split('T')[0];

  return (
    <window.Reveal variant="fade" delay={420} className="searchbar-wrap">
      <div className="searchbar">
        {/* Location: free text with suggestions */}
        <div className="sb-field">
          <label className="sb-trigger" htmlFor="sb-loc">
            <window.Icon name="pin" size={18} className="sb-ico"/>
            <span className="sb-text">
              <span className="sb-label">Location</span>
              <input id="sb-loc" className="sb-input" type="text" list="sb-dests" autoComplete="off"
                placeholder="Where to?" value={dest} onChange={e=>setDest(e.target.value)}/>
            </span>
          </label>
          <datalist id="sb-dests">
            {dests.map(d=><option key={d} value={d}/>)}
          </datalist>
        </div>

        <span className="sb-div"></span>

        {/* Date: real date picker */}
        <div className="sb-field">
          <label className="sb-trigger" htmlFor="sb-date" onClick={openDate}>
            <window.Icon name="calendar" size={18} className="sb-ico"/>
            <span className="sb-text">
              <span className="sb-label">Date</span>
              <input id="sb-date" ref={dateRef} className="sb-input" type="date" min={today} max="2099-12-31"
                value={date} onChange={e=>setDate(window.clampDate(e.target.value, today, "2099-12-31"))}/>
            </span>
          </label>
        </div>

        <span className="sb-div"></span>

        {/* Guests: number stepper */}
        <div className="sb-field sb-field-guest">
          <div className="sb-trigger">
            <window.Icon name="users" size={18} className="sb-ico"/>
            <span className="sb-text">
              <span className="sb-label">Travellers</span>
              <span className="sb-stepper">
                <button type="button" className="sb-step" aria-label="Fewer travellers"
                  onClick={()=>setGuests(g=>Math.max(1,g-1))}><window.Icon name="minus" size={14}/></button>
                <input className="sb-guest-num" type="number" min="1" max="20" value={guests}
                  onChange={e=>setGuests(Math.max(1,Math.min(20,+e.target.value||1)))}/>
                <button type="button" className="sb-step" aria-label="More travellers"
                  onClick={()=>setGuests(g=>Math.min(20,g+1))}><window.Icon name="plus" size={14}/></button>
              </span>
            </span>
          </div>
        </div>

        <button className="sb-go" onClick={()=>{
          const dateStr = date ? date.split('-').reverse().join('/') : 'Flexible';
          window.openWA(
            `Hi LaLaLand\n\n`+
            `I'd like to enquire about a trip.\n\n`+
            `Destination: ${dest.trim()||'Not specified'}\n`+
            `Travel Dates: ${dateStr}\n`+
            `No. of Travellers: ${guests}\n\n`+
            `Please share the available options and pricing.\n\n`+
            `Thank you.`
          );
        }}>
          <window.Icon name="search" size={18}/>
          <span>Enquire now</span>
        </button>
      </div>
    </window.Reveal>
  );
}

/* ---- featured destinations ---- */
function Featured({navigate}){
  const data=[
    {n:"Spiritual North India",r:"Varanasi · Prayagraj · Ayodhya",src:"varanasi",tone:"t-himalaya",d:"6 days",tag:"Ganga Aarti"},
    {n:"God's Own Country",r:"Kerala, India",src:"houseboat",tone:"t-ocean",d:"7 days",tag:"Backwaters"},
    {n:"Royal Rajasthan",r:"Udaipur · Jaipur · Jodhpur",src:"rajasthan",tone:"t-desert",d:"9 days",tag:"Forts & palaces"},
    {n:"Dubai & UAE",r:"Dubai · Abu Dhabi",src:"dubai",tone:"t-sunset",d:"6 days",tag:"Desert & skylines"},
  ];
  return (
    <section className="section featured-sec" id="featured">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <window.Reveal as="h2" className="h2" delay={60}>
              Places that<br/>stay with you.
            </window.Reveal>
          </div>
          <window.Reveal variant="fade" delay={120} className="sec-head-side">
            <p className="lead col-moss">A short list, refreshed each season. Every itinerary below is fully bespoke: these are just starting points.</p>
            <button className="textlink" onClick={()=>navigate('services')}>
              View all journeys <window.Icon name="arrowUR" size={16} className="arrow"/>
            </button>
          </window.Reveal>
        </div>

        <div className="feat-grid">
          {data.map((c,i)=>(
            <window.Reveal key={c.n} delay={i*90} className="feat-card" as="div">
              <div className="feat-card-inner">
                <window.Frame src={c.src} tone={c.tone} className="feat-img"
                  label={c.n+', '+c.r.split(',')[0]} tag={c.tag} parallax={0.05}/>
                <div className="feat-meta">
                  <div className="feat-row">
                    <h3 className="h3">{c.n}</h3>
                    <span className="feat-days"><window.Icon name="clock" size={14}/> {c.d}</span>
                  </div>
                  <div className="feat-row sub">
                    <span className="col-moss">{c.r}</span>
                  </div>
                  <button className="feat-enquire" onClick={()=>window.openWA(`Hi LaLaLand! I'm interested in the ${c.n} (${c.r}) trip. Could you share the details?`)}>
                    Enquire now <window.Icon name="arrowUR" size={16} className="arrow"/>
                  </button>
                </div>
              </div>
            </window.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- cinematic interlude (DARK, parallax full bleed) ---- */
function Interlude({navigate}){
  return (
    <section className="interlude">
      <window.Frame src="patagonia" tone="t-night" className="interlude-bg" parallax={0.12}/>
      <div className="interlude-scrim"></div>
      <div className="wrap interlude-inner">
        <window.Reveal as="h2" delay={80} className="h1" style={{maxWidth:'18ch'}}>
          We don't sell packages.<br/>We <span className="tcolor">create experiences.</span>
        </window.Reveal>
        <div className="interlude-stats">
          {[["120+","Curated routes"],["48","Countries mapped"],["4.9","Traveller rating"]].map(([n,l],i)=>(
            <window.Reveal key={l} delay={120+i*90} className="il-stat">
              <span className="stat-num">{n}</span>
              <span className="mono il-stat-l">{l}</span>
            </window.Reveal>
          ))}
        </div>
        <window.Reveal variant="fade" delay={300} style={{marginTop:44}}>
          <button className="btn on-dark" onClick={()=>navigate('about')}>
            <span>Our story <window.Icon name="arrow" size={17} className="arrow"/></span>
          </button>
        </window.Reveal>
      </div>
    </section>
  );
}

/* ---- what we do (service categories) ---- */
function WhatWeDo(){
  const items=[
    {ic:"compass",t:"Travel",d:"Family holidays, getaways and curated journeys across India and the world."},
    {ic:"users",t:"Corporate Events",d:"Offsites, conferences and incentive trips, planned end to end."},
    {ic:"route",t:"Team Building",d:"Retreats and activities that bring teams closer, anywhere."},
    {ic:"sparkle",t:"Destination Events",d:"Weddings and celebrations in unforgettable settings."},
    {ic:"leaf",t:"Yoga & Ayurveda Retreats",d:"Restorative wellness journeys for body and mind."},
  ];
  return (
    <section className="section tight wwd-sec">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <window.Reveal as="h2" className="h2" delay={60}>What we do.</window.Reveal>
          </div>
          <window.Reveal variant="fade" delay={120} className="sec-head-side">
            <p className="lead col-moss">A customized travel and destination management company: designing private, personalized experiences for every occasion.</p>
          </window.Reveal>
        </div>
        <div className="wwd-grid">
          {items.map((it,i)=>(
            <window.Reveal key={it.t} delay={i*70} className="wwd-card">
              <span className="wwd-ico"><window.Icon name={it.ic} size={22}/></span>
              <h3 className="wwd-t">{it.t}</h3>
              <p className="wwd-d col-moss">{it.d}</p>
            </window.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- why us ---- */
function WhyUs(){
  const items=[
    {ic:"route",t:"100% customized itineraries",d:"Every journey is built from a blank map around your interests, budget and travel style: never a fixed brochure."},
    {ic:"shield",t:"Private & personalized",d:"Your own private departure. No strangers, no rigid group schedule: just the people you're travelling with."},
    {ic:"star",t:"Handpicked hotels & transport",d:"Stays and vehicles we've personally vetted for comfort, character and location on every route."},
    {ic:"compass",t:"End-to-end planning",d:"Flights, stays, transfers, sightseeing and permits: one team handles the whole journey, start to finish."},
    {ic:"phone",t:"Dedicated travel assistance",d:"A real human on call before and throughout your trip, across every time zone, from first idea to flight home."},
    {ic:"users",t:"Flexible for everyone",d:"Families, couples, groups and corporates: packages that flex to the size and spirit of your trip."},
  ];
  return (
    <section className="section tight whyus-sec">
      <div className="wrap">
        <div className="sec-head whyus-head">
          <div>
            <window.Reveal as="h2" className="h2" delay={60}>Why choose<br/>LaLaLand.</window.Reveal>
          </div>
          <window.Reveal variant="fade" delay={120} className="sec-head-side">
            <p className="lead col-moss">We don't sell packages: we create experiences. Every trip is crafted around your preferences, so your travel story is uniquely yours.</p>
          </window.Reveal>
        </div>
        <div className="promise-grid six">
          {items.map((it,i)=>(
            <window.Reveal key={it.t} delay={i*80} className="promise-card">
              <span className="promise-ico"><window.Icon name={it.ic} size={24}/></span>
              <h3 className="h3" style={{marginTop:22}}>{it.t}</h3>
              <p className="col-moss" style={{marginTop:10}}>{it.d}</p>
            </window.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- testimonials / reviews (light) ---- */
function Testimonials(){
  const data=[
    {q:"We had a fantastic experience for our Thailand honeymoon. Everything was well-organized and the daily itinerary was spot on. Whenever we needed help, the friendly team assisted us by phone, and the prices were so affordable, even booking last-minute. Lala Land really made it unforgettable.",
     n:"Gowrika Hegde",r:"Thailand honeymoon · 3 months ago",initials:"GH",color:"var(--forest-2)",rating:5},
    {q:"Our spiritual tour to Kashi, Prayag Raj and Ayodhya was absolutely fantastic: meticulously planned and executed. The itinerary let us visit every key temple without feeling rushed, the vehicles were comfortable, and we were treated like family wherever we went.",
     n:"Manjunath Shetty",r:"Kashi · Prayagraj · Ayodhya · 1 year ago",initials:"MS",color:"#1f7a6b",rating:5},
    {q:"Planned a trip for Ayodhya, Prayagraj and Kashi with Lalaland Holidays. Our family had an excellent, well-organized experience: comfortable and hassle-free, letting us focus on the beauty and spirituality of these destinations. Professional, friendly and responsive throughout.",
     n:"Shyamaraja Shetty",r:"Ayodhya · Prayagraj · Kashi · 1 year ago",initials:"SS",color:"var(--royal)",rating:5},
    {q:"Our North East getaway to Darjeeling was beautifully arranged: the heritage cottage stay was magical, the toy-train ride unforgettable, and every transfer ran like clockwork. Lalaland thought of details we wouldn't have. Already planning the next one with them.",
     n:"Shivaprasad Bhat",r:"Darjeeling & North East · recently",initials:"SB",color:"#2a4aa0",rating:5,
     photos:["assets/reviews/ne-1.webp","assets/reviews/ne-2.webp","assets/reviews/ne-3.webp","assets/reviews/ne-4.webp"]},
    {q:"Thailand with Lalaland was seamless from start to finish: the temples, the islands, the food, all perfectly paced. Booking, stays and local guides were handled end to end, so we just relaxed and enjoyed. Honestly the easiest holiday we've ever taken.",
     n:"Sumedh Khasnis",r:"Phuket & Thailand · recently",initials:"SK",color:"#1f7a6b",rating:5,
     photos:["assets/reviews/phuket-1.webp","assets/reviews/phuket-2.webp","assets/reviews/phuket-3.webp","assets/reviews/phuket-4.webp"]},
  ];
  const [i,setI]=useState(0);
  const [lb,setLb]=useState(null); // {photos, idx}
  const go=(d)=>setI(p=>(p+d+data.length)%data.length);
  useEffect(()=>{const t=setInterval(()=>setI(p=>(p+1)%data.length),8000);return ()=>clearInterval(t);},[lb]);
  const c=data[i];

  useEffect(()=>{
    if(!lb) return;
    const onKey=(e)=>{
      if(e.key==='Escape') setLb(null);
      if(e.key==='ArrowRight') setLb(s=>s&&{...s,idx:(s.idx+1)%s.photos.length});
      if(e.key==='ArrowLeft') setLb(s=>s&&{...s,idx:(s.idx-1+s.photos.length)%s.photos.length});
    };
    window.addEventListener('keydown',onKey);
    document.body.style.overflow='hidden';
    return ()=>{window.removeEventListener('keydown',onKey);document.body.style.overflow='';};
  },[lb]);

  return (
    <section className="section testi">
      <div className="wrap">
        <div className="testi-head">
          <window.Reveal as="h2" className="h2" variant="fade" style={{fontSize:'clamp(26px,3vw,40px)'}}>What our travellers say</window.Reveal>
          <div className="testi-nav">
            <button onClick={()=>go(-1)} aria-label="Previous"><window.Icon name="arrow" size={18} style={{transform:'rotate(180deg)'}}/></button>
            <button onClick={()=>go(1)} aria-label="Next"><window.Icon name="arrow" size={18}/></button>
          </div>
        </div>
        <div className="testi-body">
          <span className="testi-quote"><window.Icon name="quote" size={56}/></span>
          <blockquote key={i} className="testi-q">{c.q}</blockquote>
          {c.photos && (
            <div key={'p'+i} className="testi-photos">
              {c.photos.map((src,k)=>(
                <button key={src} className="testi-photo" onClick={()=>setLb({photos:c.photos,idx:k,name:c.n})}
                  style={{animationDelay:(k*70)+'ms'}}>
                  <img src={src} alt={c.n+' trip photo'} loading="lazy"/>
                  <span className="testi-photo-zoom"><window.Icon name="plus" size={16}/></span>
                </button>
              ))}
            </div>
          )}
          <div className="testi-by">
            <div className="testi-mono" style={{background:c.color}}>{c.initials}</div>
            <div>
              <strong>{c.n}</strong>
              <span className="mono testi-trip">{c.r}</span>
            </div>
            <div className="testi-stars">
              {Array.from({length:c.rating}).map((_,k)=><window.Icon key={k} name="star" size={15}/>)}
            </div>
          </div>
        </div>
        <div className="testi-dots">
          {data.map((_,k)=>(
            <button key={k} className={k===i?'on':''} onClick={()=>setI(k)} aria-label={'Go to '+(k+1)}/>
          ))}
        </div>
      </div>

      {lb && (
        <div className="lightbox" onClick={()=>setLb(null)}>
          <button className="lb-close" onClick={()=>setLb(null)} aria-label="Close"><window.Icon name="close" size={22}/></button>
          <button className="lb-arrow left" onClick={(e)=>{e.stopPropagation();setLb(s=>({...s,idx:(s.idx-1+s.photos.length)%s.photos.length}));}} aria-label="Previous">
            <window.Icon name="arrow" size={24} style={{transform:'rotate(180deg)'}}/>
          </button>
          <div className="lb-stage" onClick={e=>e.stopPropagation()}>
            <img key={lb.idx} className="lb-photo" src={lb.photos[lb.idx]} alt={lb.name+' trip photo'}/>
            <div className="lb-meta">
              <span><window.Icon name="pin" size={14}/> {lb.name}'s journey</span>
              <span className="mono lb-count">{String(lb.idx+1).padStart(2,'0')} / {String(lb.photos.length).padStart(2,'0')}</span>
            </div>
          </div>
          <button className="lb-arrow right" onClick={(e)=>{e.stopPropagation();setLb(s=>({...s,idx:(s.idx+1)%s.photos.length}));}} aria-label="Next">
            <window.Icon name="arrow" size={24}/>
          </button>
        </div>
      )}
    </section>
  );
}

/* ---- instagram ---- */
function InstaTile({src,href,i}){
  const ref=window.useReveal();
  return (
    <a ref={ref} className="insta-tile reveal" style={{transitionDelay:(i*50)+'ms'}}
       href={href} target="_blank" rel="noopener" aria-label="View LaLaLand Holidays on Instagram">
      <img src={src} alt="LaLaLand Holidays trip on Instagram" loading="lazy"/>
      <span className="insta-ov"><window.SocialIcon name="insta" size={24}/></span>
    </a>
  );
}

function InstaFeed(){
  const IG="https://www.instagram.com/lalaland_holidays/";
  const shots=[
    "assets/gallery/thai-phiphi.webp",
    "assets/reviews/ne-1.webp",
    "assets/gallery/darj-toytrain.webp",
    "assets/reviews/phuket-1.webp",
    "assets/gallery/thai-beach.webp",
    "assets/gallery/darj-verandah.webp",
    "assets/reviews/ne-3.webp",
    "assets/gallery/thai-bigbuddha.webp",
  ];
  return (
    <section className="section insta-sec">
      <div className="wrap">
        <div className="insta-head">
          <div className="insta-head-l">
            <a className="insta-ig" href={IG} target="_blank" rel="noopener" aria-label="Instagram"><window.SocialIcon name="insta" size={28}/></a>
            <div>
              <window.Reveal as="h2" className="h2" delay={40} style={{fontSize:'clamp(24px,2.6vw,34px)'}}>Follow the journey</window.Reveal>
              <a className="insta-handle" href={IG} target="_blank" rel="noopener">@lalaland_holidays</a>
            </div>
          </div>
          <a className="btn terra insta-follow" href={IG} target="_blank" rel="noopener">
            <span>Follow on Instagram <window.Icon name="arrowUR" size={16} className="arrow"/></span>
          </a>
        </div>
        <div className="insta-grid">
          {shots.map((s,i)=><InstaTile key={s} src={s} href={IG} i={i}/>)}
        </div>
      </div>
    </section>
  );
}

window.HomePage = function({navigate}){
  return (
    <div className="home">
      <Hero navigate={navigate}/>
      <WhatWeDo/>
      <Featured navigate={navigate}/>
      <Interlude navigate={navigate}/>
      <WhyUs/>
      <Testimonials/>
      <InstaFeed/>
    </div>
  );
};

/* ============================================================
   HOME STYLES
   ============================================================ */
(function(){
  if(document.getElementById('home-style'))return;
  const s=document.createElement('style');s.id='home-style';
  s.textContent=`
.home{background:var(--paper)}
.hero{position:relative;padding-top:clamp(104px,13vh,140px);padding-bottom:clamp(56px,8vw,96px);overflow:hidden;background:var(--paper)}
.hero-banner{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(30px,5vw,68px);align-items:center}
.hero-left{position:relative;z-index:2}
.hero-title{margin:0;color:var(--ink);font-weight:800;letter-spacing:-.04em;line-height:.98;
  font-size:clamp(40px,5.4vw,76px)}
.hero-accent{font-style:normal;color:var(--accent-blue)}
.hero-sub-wrap{margin-top:24px}
.hero-sub{max-width:42ch;font-size:clamp(15px,1.25vw,18px);line-height:1.55;color:var(--ink-soft)}

/* photo collage */
.hero-right{position:relative}
.hero-globe{width:100%}
.collage{display:grid;grid-template-columns:1.05fr 1fr 1.05fr;grid-template-rows:repeat(6,clamp(46px,5vw,66px));
  gap:12px;width:100%}
.col-tile{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
  opacity:0;transform:scale(1.04);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
.collage.in .col-tile{opacity:1;transform:none}
.col-img{position:absolute;inset:0;border-radius:16px}
.col-img .ph-label{display:none}
.c1{grid-column:1;grid-row:1/4;border-top-left-radius:80px}
.c2{grid-column:2;grid-row:1/3;border-top-right-radius:80px}
.c3{grid-column:3;grid-row:1/4}
.c4{grid-column:1;grid-row:4/7}
.c5{grid-column:2;grid-row:3/7}
.c6{grid-column:3;grid-row:4/7;border-bottom-right-radius:80px}
.c1,.c2,.c3,.c4,.c5,.c6{}
.c1 .col-img{border-top-left-radius:80px}
.c2 .col-img{border-top-right-radius:80px}
.c6 .col-img{border-bottom-right-radius:80px}
.col-tile:hover{transform:translateY(-4px)!important;box-shadow:var(--shadow-lg)}
.hero-arcs{position:absolute;right:-10px;top:-26px;width:clamp(40px,4vw,58px);height:auto;z-index:3;
  opacity:0;animation:arrowIn 1s var(--ease-out) 1.1s forwards}
@media(max-width:760px){.hero-arcs{display:none}}

/* search bar (compact, light) */
.searchbar-wrap{position:relative;z-index:5;margin-top:34px;max-width:560px}
.searchbar{width:100%;background:var(--cream);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  display:flex;align-items:stretch;padding:8px;gap:2px;color:var(--ink)}
.sb-field{position:relative;flex:1}
.sb-trigger{width:100%;height:100%;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;text-align:left;transition:background .3s;cursor:text}
.sb-field-guest .sb-trigger{cursor:default}
.sb-trigger:hover,.sb-field:focus-within .sb-trigger{background:var(--paper-2)}
.sb-ico{color:var(--accent-blue);flex:0 0 auto}
.sb-text{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.sb-label{font-size:11px;font-weight:700;color:var(--ink)}
.sb-input{border:none;background:transparent;outline:none;font-family:inherit;font-weight:500;font-size:12px;
  color:var(--ink);padding:1px 0;width:100%;min-width:0}
.sb-input::placeholder{color:var(--moss);opacity:.8}
.sb-input[type=date]{cursor:pointer;color:var(--ink);text-transform:uppercase;letter-spacing:.01em}
.sb-input[type=date]:not(:valid){color:var(--moss)}
.sb-input[type=date]::-webkit-calendar-picker-indicator{opacity:.75;cursor:pointer;color:var(--accent-blue)}
.sb-input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
/* guest stepper */
.sb-stepper{display:flex;align-items:center;gap:8px;margin-top:1px}
.sb-step{width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);color:var(--ink);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:all .3s var(--ease-out)}
.sb-step:hover{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff}
.sb-guest-num{width:24px;border:none;background:transparent;outline:none;font-family:inherit;font-weight:600;
  font-size:13px;color:var(--ink);text-align:center;-moz-appearance:textfield}
.sb-guest-num::-webkit-outer-spin-button,.sb-guest-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sb-div{width:1px;background:var(--line);margin:12px 0}
.sb-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;min-width:160px;background:var(--cream);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:20;animation:pop .35s var(--ease-out)}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sb-menu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:8px;font-size:13px;font-weight:500;transition:background .25s}
.sb-menu button:hover{background:var(--paper-2)}
.sb-menu button.sel{color:var(--accent-blue);font-weight:600}
.sb-go{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--grad-accent);color:#fff;
  font-weight:600;font-size:14px;border-radius:12px;padding:0 22px;transition:filter .4s,transform .4s var(--ease-out)}
.sb-go:hover{filter:saturate(1.3) brightness(1.06);transform:translateY(-1px)}
@media(max-width:520px){
  .searchbar{flex-direction:column}
  .sb-div{height:1px;width:auto;margin:0 12px}
  .sb-go{padding:14px}
}
@media(max-width:900px){
  .hero-banner{grid-template-columns:1fr;gap:36px}
  .hero-right{order:-1;max-width:560px}
}

/* section head */
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:60px}
.sec-head-side{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
@media(max-width:820px){.sec-head{grid-template-columns:1fr;gap:24px;margin-bottom:40px}}

/* featured grid */
.featured-sec{background:var(--paper-2)}
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.feat-card-inner{cursor:pointer;position:relative}
.feat-img{aspect-ratio:16/11;border-radius:18px;box-shadow:var(--shadow);transition:transform .7s var(--ease-out)}
.feat-card-inner:hover .feat-img{transform:translateY(-6px)}
.feat-meta{padding:20px 4px 4px}
.feat-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.feat-row.sub{margin-top:7px;font-size:14px}
.feat-days{display:inline-flex;align-items:center;gap:6px;color:var(--moss);font-size:13px}
.feat-enquire{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:11px 20px;border-radius:100px;
  background:var(--grad-accent);color:#fff;font-weight:600;font-size:14px;transition:filter .4s,transform .4s var(--ease-out)}
.feat-enquire:hover{filter:saturate(1.3) brightness(1.06);transform:translateY(-2px)}
.feat-enquire .arrow{transition:transform .4s var(--ease-out)}
.feat-enquire:hover .arrow{transform:translate(3px,-3px)}
@media(max-width:720px){.feat-grid{grid-template-columns:1fr}}

/* interlude (DARK) */
.interlude{position:relative;min-height:86vh;display:flex;align-items:center;overflow:hidden;color:var(--cream)}
.interlude .tcolor{background:linear-gradient(96deg,#8fb6f5 0%,#cadefb 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.interlude-bg{position:absolute!important;inset:-6% 0;z-index:0;border-radius:0!important;will-change:transform}
.interlude-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(16,27,72,.92) 0%,rgba(16,27,72,.62) 52%,rgba(16,27,72,.25) 100%)}
.interlude-label{z-index:2;top:18px;left:18px;bottom:auto}
.interlude-inner{position:relative;z-index:2;padding:80px 40px}
.interlude .eyebrow.muted{color:var(--terra-soft)}
.interlude-stats{display:flex;gap:60px;margin-top:50px;flex-wrap:wrap}
.il-stat{display:flex;flex-direction:column;gap:8px}
.il-stat-l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra-soft)}
@media(max-width:600px){
  .interlude-stats{gap:22px 26px}
  .interlude-inner{padding:58px 22px}
  .stat-num{font-size:clamp(34px,11vw,46px)}
  .il-stat-l{font-size:10px}
}

/* why us */
.whyus-sec{background:var(--paper)}
.whyus-head{margin-bottom:54px}
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--line);padding-top:54px}
.promise-grid.six{row-gap:46px}
.promise-card{padding-right:20px}
.promise-ico{width:60px;height:60px;border-radius:16px;background:var(--paper-2);color:var(--terra);
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
@media(max-width:820px){.promise-grid{grid-template-columns:1fr;gap:36px}.whyus-head{margin-bottom:30px}}

/* what we do */
.wwd-sec{background:var(--paper)}
.wwd-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.wwd-card{padding:26px 22px;background:var(--cream);border:1px solid var(--line);border-radius:18px;
  transition:transform .5s var(--ease-out),box-shadow .5s,border-color .5s}
.wwd-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.wwd-ico{width:52px;height:52px;border-radius:14px;background:var(--accent-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .4s,color .4s,transform .4s}
.wwd-card:hover .wwd-ico{transform:translateY(-2px) scale(1.05)}
.wwd-t{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-top:20px;line-height:1.2}
.wwd-d{font-size:13.5px;line-height:1.5;margin-top:9px}
@media(max-width:1000px){.wwd-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.wwd-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.wwd-grid{grid-template-columns:1fr}}

/* testimonials (light) */
.testi{background:var(--paper-2)}
.testi-head{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:30px;margin-bottom:8px;text-align:center;flex-wrap:wrap}
.testi-head .h2{text-wrap:balance}
.testi-nav{display:flex;gap:10px}
.testi-nav button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-strong);color:var(--ink);
  display:flex;align-items:center;justify-content:center;transition:all .4s var(--ease-out);background:var(--cream)}
.testi-nav button:hover{background:var(--ink);border-color:var(--ink);color:var(--cream);transform:translateY(-2px)}
.testi-body{position:relative;max-width:min(900px,94%);margin:30px auto 0;text-align:center}
.testi-quote{color:var(--terra);display:block;margin-bottom:14px}
.testi-q{font-size:clamp(19px,2.5vw,31px);font-weight:600;letter-spacing:-.02em;line-height:1.28;color:var(--ink);
  animation:fadeUp .8s var(--ease-out)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.testi-by{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:34px;text-align:left}
.testi-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;position:relative;flex:0 0 auto}
.testi-mono{width:56px;height:56px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:18px;letter-spacing:.02em}
.testi-by strong{display:block;font-size:16px;color:var(--ink)}
.testi-trip{font-size:12px;color:var(--terra);letter-spacing:.04em}
.testi-stars{display:flex;gap:3px;color:var(--gold)}
.testi-photos{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap;justify-content:center}
.testi-photo{position:relative;width:96px;height:96px;border-radius:14px;overflow:hidden;flex:0 0 auto;
  box-shadow:var(--shadow-sm);border:1px solid var(--line);cursor:pointer;
  animation:photoIn .6s var(--ease-out) both}
@keyframes photoIn{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}
.testi-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.testi-photo:hover img{transform:scale(1.08)}
.testi-photo-zoom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(16,27,72,.34);color:#fff;opacity:0;transition:opacity .4s}
.testi-photo:hover .testi-photo-zoom{opacity:1}
@media(max-width:560px){.testi-photo{width:74px;height:74px}}
.testi-dots{display:flex;gap:8px;margin-top:40px;justify-content:center}
.testi-dots button{width:30px;height:4px;border-radius:4px;background:var(--line-strong);transition:background .4s}
.testi-dots button.on{background:var(--terra)}
@media(max-width:560px){.testi-stars{display:none}}

/* reviews lightbox */
.testi .lightbox{position:fixed;inset:0;z-index:9500;background:rgba(8,12,40,.92);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;padding:40px;animation:lbfade .35s ease}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
.testi .lb-close{position:absolute;top:26px;right:30px;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:all .4s var(--ease-out);z-index:3}
.testi .lb-close:hover{background:var(--terra);border-color:var(--terra);transform:rotate(90deg)}
.testi .lb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:58px;height:58px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:all .4s var(--ease-out);z-index:2}
.testi .lb-arrow.left{left:30px}.testi .lb-arrow.right{right:30px}
.testi .lb-arrow:hover{background:var(--terra);border-color:var(--terra)}
.testi .lb-stage{max-width:min(720px,86vw);animation:lbpop .45s var(--ease-out)}
@keyframes lbpop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.testi .lb-photo{max-width:100%;max-height:78vh;border-radius:16px;display:block;margin:0 auto;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);object-fit:contain;animation:lbfade .4s ease}
.testi .lb-meta{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px;color:#fff}
.testi .lb-meta span{display:inline-flex;align-items:center;gap:6px;font-size:14px}
.testi .lb-count{color:var(--terra-soft);letter-spacing:.08em}
@media(max-width:700px){
  .testi .lb-arrow{width:46px;height:46px}.testi .lb-arrow.left{left:12px}.testi .lb-arrow.right{right:12px}
  .testi .lightbox{padding:18px}
}

/* instagram */
.insta-sec{background:var(--paper-2)}
.insta-head{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.insta-head-l{display:flex;align-items:center;gap:18px}
.insta-ig{width:58px;height:58px;border-radius:16px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(45deg,#f09433,#e6683c 28%,#dc2743 52%,#cc2366 74%,#bc1888);box-shadow:var(--shadow);transition:transform .4s var(--ease-out)}
.insta-ig:hover{transform:translateY(-2px) rotate(-3deg)}
.insta-handle{display:inline-block;margin-top:6px;font-weight:600;color:var(--terra);font-size:16px;letter-spacing:.01em}
.insta-handle:hover{text-decoration:underline}
.insta-follow{flex:0 0 auto}
.insta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.insta-tile{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);
  display:block;background:var(--paper)}
.insta-tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.insta-tile:hover img{transform:scale(1.07)}
.insta-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(180deg,rgba(16,27,72,.04),rgba(16,27,72,.52));opacity:0;transition:opacity .4s}
.insta-tile:hover .insta-ov{opacity:1}
@media(max-width:820px){.insta-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.insta-grid{grid-template-columns:repeat(2,1fr)}.insta-head-l{gap:14px}.insta-follow{width:100%;justify-content:center}}
`;
  document.head.appendChild(s);
})();