/* Home page: place names that pop up on scroll, then the numbers. Without JavaScript (or with reduced motion)
   everything is simply visible. */
.pl{position:relative;padding:90px 0 40px}
.pl-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;padding:0 calc(var(--rail,64px) + 24px) 0 48px;text-align:center}
.pl-head h2{margin:14px 0 8px;font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;font-weight:700;line-height:1.1}
.pl-head p{margin:0;color:var(--mute,#5f5f66);font-size:14px}
.pl-cities{display:flex;flex-wrap:wrap;justify-content:center;gap:.08em .55em;max-width:1120px}
.pl-name{display:inline-block;font-size:clamp(34px,6.2vw,100px);font-weight:700;letter-spacing:-.045em;line-height:1.04;color:var(--text,#111);transform-origin:50% 70%;will-change:transform,opacity}
.pl-name:nth-child(even){color:#8a8a90}
.pl-name small{display:block;margin-top:2px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute,#5f5f66)}
.pl-name:hover{color:var(--accent,#000000)}
.pl-states{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pl-state{display:inline-block;padding:10px 20px;border:1px solid var(--line-2,rgba(0,0,0,.14));border-radius:999px;font-weight:600;font-size:14px;background:var(--card);will-change:transform,opacity}
.pl-state:hover{background:#111;color:#fff;border-color:#111}
.pl-name:focus-visible,.pl-state:focus-visible{outline:3px solid #000000;outline-offset:4px;border-radius:8px}

/* scroll-driven version (added by home-extras.js): the section is tall and its content stays pinned */
.pl.js-on{height:260vh;padding:0}
.pl.js-on .pl-stage{position:sticky;top:0;height:100vh}
.pl.js-on .pl-name,.pl.js-on .pl-state{visibility:hidden;opacity:0}

/* numbers: the page's own .kpis / .kpi cards; the word card uses a smaller figure so it fits */
.kpi b.kpi-word{font-size:34px;padding-top:9px;letter-spacing:-.03em}
.kpi span{max-width:30ch;margin-left:auto;margin-right:auto}

@media (max-width:760px){
  .pl-stage{padding:0 20px;gap:26px}
  .pl-name{font-size:clamp(30px,10vw,52px)}
  .pl.js-on{height:230vh}
}
@media (prefers-reduced-motion:reduce){
  .pl.js-on{height:auto;padding:90px 0 40px}
  .pl.js-on .pl-stage{position:static;height:auto}
  .pl.js-on .pl-name,.pl.js-on .pl-state{visibility:visible;opacity:1}
}

/* "Tour packages are mostly loved": editorial look. Warm paper band, one terracotta accent, a serif italic for the emphasis,
   hairline borders instead of glows and gradients. Scoped to #published so other pages keep the plain package cards. */
#published{--pk-ink:#111111;--pk-paper:var(--bg);--pk-line:rgba(0,0,0,.16);--pk-accent:#111111;--pk-serif:"Instrument Serif",Georgia,"Times New Roman",serif;background:var(--pk-paper)}
#tourGrid .tr-card[hidden],#tourMore .tr-card[hidden]{display:none}
.pk-fav{position:relative;text-align:center;max-width:880px;margin:70px auto 44px;padding:0 4px}
.pk-fav .pill{display:inline-flex;align-items:center;gap:14px;padding:0;border:0;background:none;box-shadow:none;border-radius:0;font:600 11.5px/1 Inter,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--pk-accent)}
.pk-fav .pill::before,.pk-fav .pill::after{content:"";width:38px;height:1px;background:currentColor;opacity:.55}
.pk-fav h2{margin:22px 0 16px;font-size:clamp(34px,5vw,68px);line-height:1.02;letter-spacing:-.04em;font-weight:600;color:var(--pk-ink)}
.pk-fav h2 em{font:italic 400 1.12em/.9 var(--pk-serif);letter-spacing:-.01em;color:var(--pk-accent)}
.pk-fav-lead{margin:0 auto;max-width:560px;color:var(--mute);font-size:15.5px;line-height:1.65}
.pk-fav-link{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--pk-ink);border-bottom:1px solid var(--pk-ink);padding-bottom:2px}
.pk-fav-link:hover{color:var(--pk-accent);border-color:var(--pk-accent)}
.pk-search{display:flex;align-items:center;gap:12px;max-width:600px;margin:36px auto 22px;padding:0 10px 0 22px;height:58px;background:var(--card);border:1px solid var(--pk-ink);border-radius:999px;transition:box-shadow .2s,border-color .2s}
.pk-search:focus-within{border-color:var(--pk-accent);box-shadow:0 0 0 4px rgba(17,17,17,.22)}
.pk-search svg{flex:none;color:var(--pk-ink)}
.pk-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 16px/1 Inter,system-ui,sans-serif;color:var(--pk-ink)}
.pk-search input::placeholder{color:#5C5C5C}
.pk-clear{flex:none;border:0;background:var(--pk-ink);color:var(--rf-cream);border-radius:999px;padding:9px 16px;font:600 12.5px Inter,system-ui,sans-serif;cursor:pointer}
.pk-chips{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;max-width:720px;margin:0 auto}
.pk-chips::before{content:"Popular";margin-right:6px;font:italic 400 21px/1 var(--pk-serif);color:var(--mute)}
.pk-chip{border:1px solid var(--pk-line);background:transparent;color:var(--pk-ink);border-radius:999px;padding:8px 16px;font:500 13px Inter,system-ui,sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pk-chip:hover{border-color:var(--pk-ink)}
.pk-chip.on{background:var(--pk-ink);color:var(--rf-cream);border-color:var(--pk-ink)}
.pk-chip:focus-visible,.pk-clear:focus-visible{outline:3px solid var(--rf-brown);outline-offset:3px}
.pk-count{margin:20px 0 0;min-height:20px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.pk-count:empty{display:none}
.pk-none{margin:12px auto 0;max-width:560px;padding:18px 20px;border:1px dashed var(--pk-line);border-radius:14px;font-size:14px;line-height:1.6;background:var(--card)}
.pk-none .pk-btn{margin:10px 8px 0 0}
#published .pk-btn{background:var(--rf-olive-deep);color:var(--rf-cream);box-shadow:0 8px 22px rgba(0,0,0,.22)}
#published .pk-btn:hover{background:var(--rf-olive-deeper);filter:none}
.pk-none a{text-decoration:underline;text-underline-offset:3px}

#published .tr-grid{gap:26px}
#published .tr-more-h{margin:64px 0 24px;font:600 clamp(24px,3vw,34px)/1.1 Inter,system-ui,sans-serif;letter-spacing:-.02em;color:var(--pk-ink)}
#published .tr-card{position:relative;border:1px solid var(--pk-line);border-radius:16px;background:var(--card);box-shadow:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s}
#published .tr-card:hover{transform:translateY(-4px);border-color:rgba(0,0,0,.3);box-shadow:0 18px 40px rgba(0,0,0,.12)}
#published .tr-media{position:relative;aspect-ratio:4/3}
#published .tr-media img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
#published .tr-card:hover .tr-media img{transform:scale(1.045)}
#published .tr-meta{position:absolute;z-index:2;top:14px;left:14px;right:14px;gap:6px;flex-wrap:wrap;font-size:10.5px;font-weight:600;letter-spacing:.08em}
#published .tr-meta span{padding:6px 11px;border-radius:999px;background:var(--card);color:var(--pk-ink)}
#published .tr-body{padding:20px 22px 22px;gap:4px}
#published .tr-body h3{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.22;color:var(--pk-ink)}
#published .tr-body p{font-size:13.5px;color:var(--mute)}
#published .tr-foot{margin-top:16px;padding-top:16px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;border-top:1px solid var(--pk-line)}
#published .tr-foot b{grid-column:1;font:400 27px/1.1 var(--pk-serif);letter-spacing:0;color:var(--pk-ink)}
#published .tr-foot small{grid-column:1;font-size:11.5px;color:var(--mute)}
#published .tr-foot::after{content:"→";grid-column:2;grid-row:1 / span 2;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:17px;color:var(--pk-ink);border:1px solid var(--pk-ink);transition:background .25s,color .25s,transform .25s}
#published .tr-card:hover .tr-foot::after{background:var(--pk-ink);color:var(--rf-cream);transform:translateX(3px)}
#published .tr-card:focus-visible{outline:3px solid var(--pk-accent);outline-offset:4px}

/* cards fade up one after another when the section scrolls into view (JS adds the classes; without JS they are simply there) */
#published.pk-anim .tr-card{opacity:0;transform:translateY(24px)}
#published.pk-live .tr-card{animation:pkRise .8s cubic-bezier(.2,.7,.2,1) both}
#published.pk-live .tr-card:nth-child(3n+2){animation-delay:.08s}
#published.pk-live .tr-card:nth-child(3n+3){animation-delay:.16s}
@keyframes pkRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .pk-fav{margin-top:50px}
  .pk-search{height:54px;padding-left:16px;margin-top:28px}
  .pk-search input{font-size:15px}
  .pk-chips::before{width:100%;text-align:center;margin:0 0 4px}
  #published .tr-grid{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  #published.pk-anim .tr-card{opacity:1;transform:none}
  #published.pk-live .tr-card{animation:none}
  #published .tr-card,#published .tr-media img,#published .tr-foot::after{transition:none}
}

/* ===== package view opened from the home page (#pkDetail): calculator in the orange box, main places and services in dark black, larger text ===== */
#pkDetail .tr-hero{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:0 32px 30px;box-sizing:border-box}
#pkDetail .tr-hero .pk-lead,#pkDetail .tr-hero h1{position:static;left:auto;bottom:auto;right:auto}
#pkDetail .tr-hero .pk-lead{margin-bottom:14px;font-size:16px}
#pkDetail .pk-day{padding:20px 22px;gap:20px}
#pkDetail .pk-day b{font-size:17px}
#pkDetail .pk-day strong{font-size:20px;color:#111}
#pkDetail .tr-items{margin-top:12px;font-size:17px;line-height:1.65;color:#2a2a2e}
#pkDetail .tr-items li{margin:5px 0}
#pkDetail .pk-day .tt-hl,.tt-hl{font-weight:700;font-size:1em;color:#000}
.tt-main{margin:12px 0 4px;padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid rgba(0,0,0,.08)}
.tt-main>span{display:block;margin-bottom:8px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#111}
.tt-main ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.tt-main li{padding:7px 13px;border-radius:999px;background:#000000;color:#fff;font-size:14.5px;font-weight:600;line-height:1.2}
.tt-svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:760px}
.tt-svc li{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:14px;background:#000000;color:#fff;font-size:16px;font-weight:600;line-height:1.4}
.tt-svc svg{flex:none;width:30px;height:30px;padding:6px;box-sizing:border-box;border-radius:50%;background:rgba(255,255,255,.14)}
#pkDetail .pk-facts .row{font-size:12.5px}
.tt-calc{margin:6px 0 10px;padding-top:16px;border-top:1px solid rgba(255,255,255,.35)}
.tt-calc h4{margin:0 0 6px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.tt-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;font-size:16px;font-weight:700}
.tt-row small{display:block;font-size:12.5px;font-weight:500;opacity:.9}
.tt-row i{font-style:normal}
.tt-step{display:flex;align-items:center;gap:6px}
.tt-step button{width:38px;height:38px;border-radius:50%;border:0;background:var(--card);color:#0b0b0c;font:600 20px/1 Inter,sans-serif;cursor:pointer;transition:background .15s,color .15s}
.tt-step button:hover:not(:disabled){background:#000000;color:#fff}
.tt-step button:disabled{opacity:.4;cursor:not-allowed}
.tt-step button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.tt-step output{min-width:30px;text-align:center;font-size:22px;font-weight:700}
.tt-total{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:8px;padding:14px 16px;border-radius:12px;background:#000000;color:#fff}
.tt-total span{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.tt-total strong{font-size:28px;letter-spacing:-.02em}
.tt-per{margin:8px 0 0;text-align:right;font-size:12.5px}
.tt-per i{font-style:normal;font-weight:700}
.tt-fine{margin:8px 0 0;font-size:11.5px;line-height:1.5;opacity:.92;text-transform:none;letter-spacing:0}
@media (max-width:720px){
  #pkDetail .tr-hero{padding:0 18px 22px}
  .tt-svc{grid-template-columns:1fr}
  #pkDetail .tr-items{font-size:16px}
}

/* ===== "Why Travel Trendzz": the section fades to a soft grey as it comes into view (home-extras.js adds .why-on) ===== */
#why{padding-bottom:120px;transition:background-color .9s ease}
#why.why-on{background:var(--card)}
#why .why div{transition:background-color .9s ease,box-shadow .9s ease}
#why.why-on .why div{background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.04)}
#why .why-q figure{transition:background-color .9s ease,border-color .9s ease}
#why.why-on .why-q figure{background:var(--card);border-color:rgba(0,0,0,.06)}
@media (prefers-reduced-motion:reduce){#why,#why .why div,#why .why-q figure{transition:none}}

/* ===== "What We Do" stacked cards removed at the owner's request (28 Oct). The section stays in the HTML, hidden, because
   packages.js builds the shared package detail view from it (used by the home page package cards). ===== */
#packages{display:none!important}

/* ===== "Why Travel Trendzz" extras: founder, ratings and approvals, always-included strip (markup from build/home_extras.py) ===== */
.wy-more{display:grid;grid-template-columns:1.6fr 1fr;gap:12px;margin-top:12px}
.wy-founder{display:flex;gap:24px;align-items:center;padding:26px;border-radius:18px;background:var(--card)}
.wy-photo{flex:none;width:120px;height:120px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#1c1c1f,#3a3a40);display:grid;place-items:center}
.wy-photo img{width:100%;height:100%;object-fit:cover}
.wy-ini{font-size:54px;font-weight:700;color:#fff;letter-spacing:-.04em}
.wy-founder h3{margin:10px 0 0;font-size:clamp(28px,3vw,40px);letter-spacing:-.04em;line-height:1}
.wy-role{margin:6px 0 10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute,#5f5f66)}
.wy-founder p:last-child{margin:0;font-size:15px;line-height:1.6;color:#333}
.wy-trust{display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:18px;background:#000000;color:#fff}
.wy-trust .pill{align-self:flex-start;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.wy-stat{display:flex;align-items:baseline;gap:14px}
.wy-stat b{font-size:46px;letter-spacing:-.04em;line-height:1}
.wy-stat b small{font-size:18px;opacity:.6;margin-left:2px}
.wy-stat span{font-size:14px;line-height:1.45;color:rgba(255,255,255,.75)}
.wy-stat a{display:block;color:#fff;text-decoration:underline;text-underline-offset:3px;margin-top:2px}
.wy-appr{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.wy-appr li{padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.25);font-size:12.5px}
.wy-since{margin:auto 0 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.wy-inc{grid-column:1/-1;padding:22px 26px;border-radius:18px;background:var(--card)}
.wy-inc-h{margin:0 0 14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#111}
.wy-inc ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 22px}
.wy-inc li{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600;line-height:1.35;color:#222}
.wy-inc svg{flex:none;width:40px;height:40px;padding:9px;box-sizing:border-box;border-radius:50%;background:#111;color:#fff}
#why:not(.why-on) .wy-founder,#why:not(.why-on) .wy-inc{background:var(--card)}
#why .wy-founder,#why .wy-inc{transition:background-color .9s ease}
@media (max-width:1000px){.wy-more{grid-template-columns:1fr}.wy-inc ul{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.wy-founder{flex-direction:column;align-items:flex-start;padding:22px}.wy-photo{width:88px;height:88px}.wy-ini{font-size:40px}.wy-inc ul{grid-template-columns:1fr}}
/* included items as black pill buttons (owner request, 28 Oct) */
.wy-inc ul{display:flex;flex-wrap:wrap;gap:10px}
.wy-inc li{gap:10px;padding:8px 18px 8px 8px;border-radius:999px;background:#111111;color:#fff;font-size:14.5px;font-weight:600;box-shadow:0 6px 16px rgba(0,0,0,.12);transition:transform .2s ease,box-shadow .2s ease}
.wy-inc li:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.18)}
.wy-inc svg{width:34px;height:34px;padding:8px;background:var(--card);color:#111111}
@media (max-width:640px){.wy-inc li{width:100%;box-sizing:border-box}}
@media (prefers-reduced-motion:reduce){.wy-inc li{transition:none}}
.wy-quote{margin:14px 0 0;padding:12px 0 0 16px;border-left:3px solid #111;font-size:17px;font-weight:600;line-height:1.45;letter-spacing:-.01em;color:#111}
.wy-quote cite{display:block;margin-top:6px;font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--mute,#5f5f66)}
/* founder card: full width and taller, with a large portrait space for Aata's photo (owner request, 28 Oct) */
.wy-more{grid-template-columns:1fr 2fr}
.wy-founder{grid-column:1/-1;align-items:stretch;gap:clamp(24px,4vw,56px);padding:clamp(22px,3vw,36px);min-height:400px}
.wy-photo{width:clamp(220px,26vw,340px);height:auto;min-height:340px;border-radius:18px}
.wy-ini{font-size:clamp(96px,10vw,150px)}
.wy-founder>div:last-child{display:flex;flex-direction:column;justify-content:center;max-width:640px}
.wy-founder h3{font-size:clamp(40px,4.6vw,68px)}
.wy-founder p:last-of-type{font-size:17px;line-height:1.65}
.wy-quote{font-size:clamp(18px,1.6vw,22px)}
.wy-inc{grid-column:auto}
@media (max-width:1000px){.wy-more{grid-template-columns:1fr}}
@media (max-width:640px){.wy-founder{min-height:0}.wy-photo{width:100%;min-height:300px;aspect-ratio:4/5}}
.wy-founder>div:last-child{align-items:flex-start}
.wy-photo{width:clamp(220px,24vw,320px);min-height:0;aspect-ratio:4/5;align-self:center}
.wy-photo img{object-position:50% 8%}
.wy-nums{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:4px 0 2px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.14)}
.wy-nums div{padding:16px 16px 14px;background:#111}
.wy-nums b{display:block;font-size:36px;letter-spacing:-.04em;line-height:1}
.wy-nums span{display:block;margin-top:6px;font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.65)}
.wy-stat b{font-size:36px}
/* "At a glance" card: muted footage behind the figures (home-extras.js adds it), darkened so the text stays readable */
.wy-trust{position:relative;overflow:hidden;isolation:isolate}
.wy-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.wy-trust::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,.62),rgba(10,10,10,.8))}
.wy-trust .wy-nums{background:rgba(255,255,255,.18)}
.wy-trust .wy-nums div{background:rgba(12,12,12,.55);backdrop-filter:blur(2px)}
.wy-foot{position:absolute;right:16px;bottom:14px;font-size:11px;color:rgba(255,255,255,.6)}

/* ===== guest reviews: deck and written testimonials in one section (markup moved by build/home_extras.py) ===== */
#reviews .tm-head{padding:110px 0 0;position:relative;z-index:2}
#reviews .tm-head .sec-head{margin-bottom:0}
#reviews .tm-all{background:transparent;padding:30px 0 90px;position:relative;z-index:2}
.tm-all-h{margin:0 0 18px;text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#111}
@media (max-width:760px){#reviews .tm-head{padding-top:70px}#reviews .tm-all{padding-bottom:60px}}
#reviews .tm-label{visibility:hidden}   /* the section heading above now names it */


/* ===== trip enquiry form under "From Idea to Itinerary" ===== */
.enq{margin:28px 0 64px;padding:clamp(22px,3vw,40px);border-radius:22px;background:#000000;color:#fff}
.enq-head h3{margin:0;font-size:clamp(26px,3vw,40px);letter-spacing:-.035em;line-height:1.05}
.enq-head p{margin:8px 0 0;color:rgba(255,255,255,.7);font-size:15px}
.enq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 18px;margin-top:26px}
.enq-f{display:flex;flex-direction:column;gap:7px;min-width:0}
.enq-f>span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.75)}
.enq-f b{color:#fff}
.enq-f input{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.06);color:#fff;padding:13px 14px;font:500 16px/1.2 Inter,system-ui,sans-serif;outline:0;transition:border-color .2s,background .2s}
.enq-f input::placeholder{color:rgba(255,255,255,.4)}
.enq-f input:focus{border-color:#fff;background:rgba(255,255,255,.1)}
.enq-f.err input{border-color:#8a8a8a}
.enq small{color:#b0b0b0;font-size:12.5px}
.enq-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin-top:20px}
.enq-pref{display:flex;gap:16px;align-items:center;border:0;margin:0;padding:0;font-size:14px}
.enq-pref legend{float:left;margin-right:6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.75)}
.enq-pref label,.enq-consent{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;cursor:pointer}
.enq-consent{font-size:13.5px;color:rgba(255,255,255,.8)}
.enq-consent.err{color:#b0b0b0}
.enq input[type=radio],.enq input[type=checkbox]{accent-color:#fff;width:17px;height:17px;margin:0}
.enq-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.enq-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:24px}
.enq-btn{border:0;border-radius:999px;background:var(--card);color:#111;padding:15px 30px;font:700 15px/1 Inter,system-ui,sans-serif;cursor:pointer;transition:transform .2s}
.enq-btn:hover{transform:translateY(-2px)}
.enq-btn:disabled{opacity:.6;cursor:wait;transform:none}
.enq-btn:focus-visible,.enq-f input:focus-visible{outline:3px solid #000000;outline-offset:2px}
.enq-msg{margin:0;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.85)}
.enq-msg a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.enq-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.enq-grid{grid-template-columns:1fr}.enq-btn{width:100%}}
.enq-or{font-size:13px;color:#cccccc}
.enq-call{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:13px 24px;color:#fff;text-decoration:none;font:700 15px/1 Inter,system-ui,sans-serif;transition:background .2s,color .2s}
.enq-call b{font-weight:500;opacity:.8}
.enq-call:hover{background:var(--card);color:#111}
.enq-call:focus-visible{outline:3px solid #000000;outline-offset:2px}
.enq-act .enq-msg{flex-basis:100%}
@media (max-width:560px){.enq-or{display:none}.enq-call{width:100%;justify-content:center;box-sizing:border-box}}
/* Why section: grey throughout, cards a shade darker grey (owner request, 28 Oct); the black "At a glance" card stays black */
#why,#why.why-on{background:var(--card)}
#why .why div,#why.why-on .why div,#why .why-q figure,#why.why-on .why-q figure,
#why .wy-founder,#why .wy-inc,#why:not(.why-on) .wy-founder,#why:not(.why-on) .wy-inc{background:var(--card);border-color:transparent;box-shadow:none}
#why .wy-founder .pill{background:var(--card)}


/* ===== contact globe zoomed on South India, on a scenery background (markup from build/home_extras.py, drawing in home-extras.js) ===== */
.globe.sg{position:relative;height:520px;border-radius:24px;overflow:hidden;background:#2c2c2c url(../images/posters/coorg.webp) center/cover no-repeat}
.globe.sg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45))}
.globe.sg #sglobe{position:relative;display:block;width:100%;height:100%}
.sg-tip{position:absolute;z-index:3;display:flex;flex-direction:column;gap:3px;min-width:150px;max-width:240px;padding:11px 13px;border-radius:12px;background:#111;color:#fff;font-size:12.5px;line-height:1.4;box-shadow:0 14px 34px rgba(0,0,0,.3)}
.sg-tip[hidden]{display:none}
.sg-tip b{font-size:14px}
.sg-tip .st{font-weight:600}
.sg-tip span{color:rgba(255,255,255,.75)}
.sg-tip a{margin-top:4px;color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.sg-legend{position:absolute;z-index:2;left:14px;right:14px;bottom:12px;display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:12px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.sg-legend span{display:inline-flex;align-items:center;gap:6px}
.sg-legend i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.sg-legend i.pk{background:var(--card);box-shadow:0 0 0 4px rgba(255,255,255,.35)}
.sg-foot{position:absolute;z-index:2;top:12px;right:14px;font-size:11px;color:rgba(255,255,255,.75)}
@media (max-width:760px){.globe.sg{height:420px}}
#globe[hidden]{display:none!important}


/* ===== home hero copy on the waterfall: headline, "Where to?" search, quick picks, buttons ===== */
.hero-ui::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6))}
.hx{position:absolute;left:clamp(18px,4vw,64px);bottom:clamp(28px,8vh,84px);width:min(680px,calc(100% - 36px));color:#fff;will-change:opacity,transform}
.hx-k{margin:0 0 10px;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.85)}
.hx-h{margin:0;font-size:clamp(40px,6vw,88px);line-height:.98;letter-spacing:-.045em;font-weight:700;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hx-l{margin:14px 0 0;max-width:520px;font-size:clamp(15px,1.4vw,18px);line-height:1.5;color:rgba(255,255,255,.9)}
.hx-s{display:flex;align-items:center;gap:10px;margin-top:22px;max-width:560px;height:58px;padding:0 6px 0 18px;border-radius:999px;background:var(--card);color:#111;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.hx-s svg{flex:none;color:#555}
.hx-s input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 16px/1 Inter,system-ui,sans-serif;color:#111}
.hx-s input::placeholder{color:#888}
.hx-s button{flex:none;height:46px;padding:0 20px;border:0;border-radius:999px;background:#111;color:#fff;font:600 14px Inter,system-ui,sans-serif;cursor:pointer}
.hx-s button:hover{background:#000}
.hx-picks{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hx-picks button{border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.25);color:#fff;border-radius:999px;padding:7px 14px;font:600 13px Inter,system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(4px)}
.hx-picks button:hover{background:var(--card);color:#111}
.hx-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hx-btn{display:inline-flex;align-items:center;height:48px;padding:0 24px;border-radius:999px;border:1px solid #fff;background:var(--card);color:#111;font:700 15px Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer}
.hx-btn.ghost{background:transparent;color:#fff}
.hx-btn:hover{transform:translateY(-1px)}
.hx button:focus-visible,.hx a:focus-visible,.hx-s input:focus-visible{outline:3px solid #000000;outline-offset:2px}
@media (max-width:760px){
  .hx{bottom:22px}
  .hx-h{font-size:clamp(34px,10vw,46px)}
  .hx-s{height:52px}
  .hx-s button{padding:0 14px;font-size:13px;height:40px}
  .hx-picks button{padding:6px 12px;font-size:12px}
}

@media (max-width:760px){.hx{bottom:86px}.hx-acts{margin-top:12px}.hx-btn{height:44px;padding:0 18px;font-size:14px}}
.hero-ui::after{opacity:var(--hx-o,1)}
.sg-legend i{box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}   /* Karnataka is black now: ring keeps it visible on the photo */
.globe.sg{background:#1a1a1a url(../images/posters/coorg.webp) center/cover no-repeat}
.globe.sg::before{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.8))}
#reviews.tm{background:var(--bg)!important}   /* aqua theme: the review deck no longer switches to grey/beige */
/* aqua theme: shared light surfaces */
:root{--card:var(--rf-sand-hi);--bg:var(--rf-sand)}
.kpi{background:linear-gradient(180deg,var(--card),var(--bg))!important}

/* ===== "Why Travel Trendzz" in the reference's motion style: dark band with a wireframe ring, numbered rows with tilting photo cards ===== */
#why{padding-top:60px}
.wy-band{margin:0 auto 40px;width:min(1240px,calc(100% - 32px));border-radius:28px;background:#000000;color:#ffffff;overflow:hidden}
.wy-band-in{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:clamp(20px,4vw,60px);padding:clamp(28px,5vw,64px)}
.wy-torus{width:100%;aspect-ratio:1/1;max-height:420px;display:block}
.wy-kick{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.wy-kick i{width:40px;height:1px;background:rgba(255,255,255,.5)}
.wy-band h2{margin:0;font-size:clamp(34px,4.4vw,64px);line-height:1.02;letter-spacing:-.04em;font-weight:600;color:#fff}
.wy-band-copy>p:last-child{margin:18px 0 0;max-width:520px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.78)}
.wy-rows{display:grid;gap:clamp(40px,8vh,90px);padding:20px 0 50px}
.wy-row{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:clamp(24px,5vw,80px);perspective:1400px}
.wy-row.rev{grid-template-columns:1fr 1.25fr}
.wy-row.rev .wy-media{order:2}
.wy-media{aspect-ratio:16/10;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.28);transform-origin:50% 50%;will-change:transform;background:#000000}
.wy-media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);will-change:transform}
.wy-copy{position:relative;will-change:transform,opacity}
.wy-doodle{position:absolute;top:-70px;right:0;width:84px;height:84px;fill:none;stroke:#111111;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.wy-row.rev .wy-doodle{right:auto;left:0;stroke:#6f6f6f}
.wy-n{display:flex;align-items:center;gap:14px;margin:0 0 14px;font-size:14px;font-weight:600;letter-spacing:.06em;color:#000000}
.wy-bar{position:relative;width:120px;height:2px;background:rgba(0,0,0,.15);overflow:hidden}
.wy-bar i{position:absolute;inset:0;background:#111111;transform-origin:0 50%;transform:scaleX(var(--pg,0))}
.wy-copy h3{margin:0;font-size:clamp(26px,2.8vw,40px);line-height:1.08;letter-spacing:-.035em;color:#000000}
.wy-copy>p:last-child{margin:14px 0 0;max-width:460px;font-size:16.5px;line-height:1.65;color:#444444}
@media (max-width:900px){
  .wy-band-in{grid-template-columns:1fr}
  .wy-torus{max-height:300px}
  .wy-row,.wy-row.rev{grid-template-columns:1fr}
  .wy-row.rev .wy-media{order:0}
  .wy-doodle{top:-58px;width:64px;height:64px}
}
@media (prefers-reduced-motion:reduce){.wy-media,.wy-media img,.wy-copy{transform:none!important}}


/* ===== Why carousel, as in the reference recording: pinned, one big card centred, the next card curved at the top right ===== */
#why{padding-top:0}
.wc{position:relative}
.wc-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1600px}
.wc-cards{position:absolute;inset:0}
.wc-card{position:absolute;left:24%;top:7vh;width:48%;transform-origin:50% 50%;will-change:transform,opacity}
.wc-media{aspect-ratio:16/9;overflow:hidden;background:var(--card)}
.wc-media img{width:100%;height:100%;object-fit:cover;display:block}
.wc-info{position:relative;padding:18px 40px 0 0}
.wc-info h3{margin:0;font-size:clamp(24px,2.6vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.1;color:#111111}
.wc-go{position:absolute;right:0;top:18px;font-size:28px;line-height:1;color:#111111}
.wc-info p{margin:12px 0 0;max-width:620px;font:400 13px/1.55 "Space Mono",ui-monospace,Menlo,Consolas,monospace;color:#4b5051}
.wc-doodle{position:absolute;left:44%;top:18vh;width:160px;height:160px;fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;z-index:3;pointer-events:none}
.wc-doodle path{opacity:0}
.wc-doodle path:nth-child(odd){stroke:#767676}
.wc-doodle path:nth-child(even){stroke:#6f6f6f}
.wc-bar{position:absolute;left:32px;right:32px;bottom:26px;display:grid;grid-template-columns:auto 140px auto 1fr auto;align-items:center;gap:14px;font:400 13px/1 "Space Mono",ui-monospace,Menlo,Consolas,monospace;color:#111111;z-index:4}
.wc-n{font-size:26px}
.wc-line{position:relative;height:2px;background:rgba(0,0,0,.15);overflow:hidden}
.wc-line i{position:absolute;inset:0;background:#111111;transform-origin:0 50%;transform:scaleX(var(--wp,0))}
.wc-of{color:#4b5051}
.wc-hint{justify-self:center}
.wc-hint b{display:inline-block;margin-left:12px;font-size:20px;font-weight:400}
.wc-side{color:#4b5051}
@media (max-width:900px){
  .wc-card{left:6%;width:88%;top:12vh}
  .wc-doodle{left:8%;top:4vh;width:90px;height:90px}
  .wc-bar{grid-template-columns:auto 90px auto 1fr;left:16px;right:16px}
  .wc-side{display:none}
}
@media (prefers-reduced-motion:reduce){.wc-stage{position:static;height:auto}.wc-cards{position:static;display:grid;gap:40px;padding:40px 0}.wc-card{position:static;width:auto;margin:0 6%}.wc-doodle,.wc-bar{display:none}}
.wc-bar{right:190px}   /* keeps clear of the floating Plan a trip button */
@media (max-width:900px){.wc-bar{right:16px;bottom:84px}}


/* ===== Vehicle showcase (assets/js/vehicle-show.js), motion from the owner's reference video ===== */
.vs{position:relative;margin:clamp(18px,4vh,40px) auto clamp(30px,6vh,60px);width:min(1100px,100%);height:clamp(420px,62vh,600px);overflow:hidden;border-radius:26px;
  background:radial-gradient(70% 60% at 50% 60%,var(--bg),#E6E6E6);box-shadow:inset 0 0 0 1px rgba(62,62,62,.08)}
.vs-stage{position:absolute;inset:0;touch-action:pan-y}
.vs-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding-top:clamp(28px,6vh,56px);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.vs-brand,.vs-model{margin:0;overflow:hidden;text-align:center;line-height:1}
.vs-brand span,.vs-model span{display:inline-block;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.vs-brand{font:700 clamp(16px,2vw,26px) "Space Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#5b5b5b;padding-bottom:6px}
.vs-model{font:800 clamp(52px,10vw,138px)/.95 "Tektur","Inter",sans-serif;letter-spacing:-.02em;text-transform:uppercase;color:#9d9d9d;white-space:nowrap;padding:0 4%}
.vs-car{position:absolute;left:50%;bottom:clamp(86px,15vh,130px);width:min(56%,560px);transform:translateX(-50%);transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .6s ease}
.vs-car img{display:block;width:100%;height:auto;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 52%,#000 62%,transparent 100%);
  filter:drop-shadow(0 26px 22px rgba(0,0,0,.22))}
/* entering and leaving: car drives across, name lifts out / rises in */
.vs-slide.from-right .vs-car{transform:translateX(70%)}
.vs-slide.from-left .vs-car{transform:translateX(-170%)}
.vs-slide.from-right .vs-car,.vs-slide.from-left .vs-car{opacity:0}
.vs-slide.from-right .vs-model span,.vs-slide.from-left .vs-model span,.vs-slide.from-right .vs-brand span,.vs-slide.from-left .vs-brand span{transform:translateY(105%);opacity:0}
.vs-slide.on .vs-car{transform:translateX(-50%);opacity:1;transition-delay:.18s}
.vs-slide.on .vs-model span,.vs-slide.on .vs-brand span{transform:none;opacity:1}
.vs-slide.on .vs-model span{transition-delay:.3s}.vs-slide.on .vs-brand span{transition-delay:.22s}
.vs-slide.out-left .vs-car{transform:translateX(-190%);opacity:0;transition-duration:.75s,.5s;transition-timing-function:cubic-bezier(.55,0,.75,.3),ease}
.vs-slide.out-right .vs-car{transform:translateX(90%);opacity:0;transition-duration:.75s,.5s;transition-timing-function:cubic-bezier(.55,0,.75,.3),ease}
.vs-slide.out-left .vs-model span,.vs-slide.out-right .vs-model span,.vs-slide.out-left .vs-brand span,.vs-slide.out-right .vs-brand span{transform:translateY(-110%);opacity:0;transition-duration:.45s}
/* controls */
.vs-arrow{position:absolute;top:44%;z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:#000000;font:400 34px/1 Inter,sans-serif;cursor:pointer;transition:background .2s,opacity .4s}
.vs-arrow:hover{background:rgba(96,96,96,.12)}
.vs-arrow.prev{left:14px}.vs-arrow.next{right:14px}
.vs-acts{position:absolute;left:50%;bottom:clamp(40px,7vh,60px);z-index:3;display:flex;gap:10px;transform:translateX(-50%);transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.vs-acts button{height:40px;padding:0 22px;border-radius:8px;font:600 13.5px Inter,system-ui,sans-serif;cursor:pointer}
.vs-book{border:0;background:#000000;color:#fff}
.vs-det{border:1px solid rgba(62,62,62,.35);background:transparent;color:#000000}
.vs-dots{position:absolute;left:50%;bottom:16px;z-index:3;display:flex;gap:7px;transform:translateX(-50%);transition:opacity .4s}
.vs-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(62,62,62,.25);cursor:pointer;transition:width .3s,background .3s}
.vs-dots button[aria-selected="true"]{width:22px;border-radius:5px;background:#000000}
.vs-back{position:absolute;top:16px;left:16px;z-index:4;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#000000;font:400 30px/1 Inter,sans-serif;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s}
.vs button:focus-visible{outline:3px solid #111111;outline-offset:2px}
/* details stage: lift the vehicle, specs from the right, information strip from the bottom */
.vs-specs{position:absolute;top:22px;right:22px;z-index:3;width:120px;text-align:center;opacity:0;transform:translateX(24px);transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1);pointer-events:none}
.vs-h{margin:0 0 10px;font:600 10.5px Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#5b5b5b}
.vs-specs ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.vs-specs li{display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.vs-specs svg{width:22px;height:22px;color:#000000}
.vs-specs b{font:700 13px Inter,sans-serif;color:#111111}
.vs-specs span{font-size:10.5px;color:#5b5b5b}
.vs-more{position:absolute;left:22px;right:22px;bottom:18px;z-index:3;padding:16px 18px;border-radius:16px;background:var(--card);opacity:0;transform:translateY(60%);transition:opacity .5s,transform .7s cubic-bezier(.16,1,.3,1);pointer-events:none}
.vs-more-in p{margin:0 0 6px;font-size:14px;line-height:1.5;color:#444444}
.vs-more-acts{display:flex;gap:10px;margin-top:10px}
.vs-more-acts button{height:38px;padding:0 18px;border-radius:8px;font:600 13px Inter,sans-serif;cursor:pointer}
.vs-full{border:1px solid rgba(62,62,62,.35);background:transparent;color:#000000}
.vs-book2{border:0;background:#000000;color:#fff}
.vs.det .vs-acts,.vs.det .vs-dots,.vs.det .vs-arrow{opacity:0;pointer-events:none}
.vs.det .vs-acts{transform:translate(-50%,20px)}
.vs.det .vs-slide{transform:translateY(-9%) scale(.86)}
.vs.det .vs-back{opacity:1;pointer-events:auto}
.vs.det .vs-specs{opacity:1;transform:none;pointer-events:auto;transition-delay:.25s}
.vs.det .vs-specs li{opacity:1;transform:none}
.vs.det .vs-specs li:nth-child(1){transition-delay:.35s}.vs.det .vs-specs li:nth-child(2){transition-delay:.45s}.vs.det .vs-specs li:nth-child(3){transition-delay:.55s}
.vs.det .vs-more{opacity:1;transform:none;pointer-events:auto;transition-delay:.4s}
@media (max-width:760px){
  .vs{height:clamp(420px,78vh,560px);border-radius:20px}
  .vs-car{width:84%;bottom:118px}
  .vs-model{font-size:clamp(40px,14vw,64px)}
  .vs-arrow{top:auto;bottom:62px}
  .vs-acts{bottom:56px}
  .vs-specs{position:absolute;top:auto;bottom:178px;right:14px;width:auto;display:flex;align-items:center;gap:10px}
  .vs-specs .vs-h{display:none}
  .vs-specs ul{grid-auto-flow:column;gap:12px}
  .vs-more{left:12px;right:12px;bottom:12px}
  .vs.det .vs-slide{transform:translateY(-14%) scale(.8)}
}
@media (prefers-reduced-motion:reduce){.vs *,.vs-slide{transition:none!important}}
/* showcase refinements: photo blends into the backdrop (no filter, so multiply works), a soft floor shadow, name larger and clearer above the car */
.vs-car img{filter:none;-webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 52%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 60% 62% at 50% 52%,#000 55%,transparent 100%)}
.vs-car::after{content:"";position:absolute;left:12%;right:12%;bottom:8%;height:16%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.28),transparent);filter:blur(4px)}
.vs-car{bottom:clamp(96px,16vh,140px);width:min(58%,600px);isolation:auto}
.vs-model{color:#878787;font-size:clamp(60px,11vw,150px);padding-top:.04em}
.vs-brand{color:#444444}
.vs-car img{mix-blend-mode:normal;border-radius:14px}
.vs-car.cut img{-webkit-mask-image:none;mask-image:none;border-radius:0;filter:drop-shadow(0 22px 18px rgba(0,0,0,.22))}
.vs-car.cut::after{display:none}
.vs-car{width:auto;max-width:62%}
.vs-car img{width:auto;max-width:100%;max-height:clamp(170px,36vh,310px);margin:0 auto}
.vs-acts button{white-space:nowrap}
@media (max-width:760px){.vs-car{max-width:86%}.vs-car img{max-height:200px}}
.vs-car{bottom:clamp(120px,19vh,165px)}   /* the vehicle overlaps the lower part of its name, as in the reference */
@media (max-width:760px){.vs-car{bottom:150px}}

/* the vehicle tile grid is removed at the owner's request (29 Oct): the showroom slider above shows all the vehicles; the grid stays in the
   page, hidden, because taxi.js registers the vehicle details view from it ("View full details" in the slider still opens it) */
#taxi .tx-grid{display:none}


/* ===== Vehicle section: cinematic sliding panels (assets/js/vehicle-panels.js), from the owner's reference video ===== */
#taxi .vs{display:none}                     /* the earlier showroom slider is replaced by these panels */
.vp{position:relative;margin:clamp(14px,3vh,30px) 0 clamp(20px,4vh,40px)}
.vp-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.vp-slide{position:absolute;inset:clamp(12px,2.2vh,22px) clamp(10px,1.4vw,22px);display:grid;grid-template-columns:42fr 58fr;gap:clamp(8px,.8vw,12px)}
.vp-slide.rev{grid-template-columns:58fr 42fr}
.vp-panel{position:relative;border-radius:22px;overflow:hidden;will-change:transform;box-shadow:0 20px 50px rgba(0,0,0,.18)}
.vp-text{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2.6vw,38px);background:#000000;color:#ffffff}
.vp-text h3{margin:0;max-width:12ch;font:500 clamp(32px,4.2vw,66px)/1.02 Inter,system-ui,sans-serif;letter-spacing:-.035em;color:#ffffff;will-change:transform}
.vp-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.vp-count{font:400 13px/1 "Space Mono",ui-monospace,monospace;color:rgba(255,255,255,.6);white-space:nowrap}
.vp-count b{font-weight:400;color:#fff}
.vp-foot p{margin:0;max-width:300px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.85);text-align:right}
.vp-acts{position:absolute;top:clamp(20px,2.6vw,38px);right:clamp(20px,2.6vw,38px);display:flex;gap:8px}
.vp-btn{height:38px;padding:0 16px;border-radius:999px;border:0;background:var(--bg);color:#000000;font:600 13px Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.vp-btn.ghost{background:transparent;color:#ffffff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.vp-btn:hover{filter:brightness(1.06)}
.vp-btn:focus-visible{outline:3px solid #ffffff;outline-offset:2px}
.vp-photo{background:radial-gradient(80% 70% at 50% 55%,var(--bg),#E6E6E6)}
.vp-photo img{position:absolute;left:-6%;top:0;width:112%;height:100%;object-fit:cover;will-change:transform}
.vp-photo.cut img{left:4%;width:92%;object-fit:contain;filter:drop-shadow(0 26px 22px rgba(0,0,0,.25))}
.vp-tag{position:absolute;left:16px;bottom:16px;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;font:600 11.5px Inter,sans-serif;letter-spacing:.04em}
@media (max-width:760px){
  .vp-slide,.vp-slide.rev{grid-template-columns:1fr;grid-template-rows:46fr 54fr;inset:70px 10px 14px}
  .vp-slide.rev .vp-photo{order:0}
  .vp-text h3{font-size:clamp(28px,8.5vw,40px)}
  .vp-acts{position:static;margin-top:12px}
  .vp-foot{flex-direction:column;align-items:flex-start}
  .vp-foot p{text-align:left}
}
.vp-static .vp-stage{position:static;height:auto;overflow:visible;display:grid;gap:16px}
.vp-static .vp-slide{position:relative;inset:auto;height:min(80vh,560px)}
/* panels: let the stage pin (overflow:hidden on the section and content-visibility both stop sticky), run full width, buttons under the title */
#taxi.tx{overflow:clip}
#taxi.tt-cv{content-visibility:visible}
.vp{width:100vw;margin-left:calc(50% - 50vw)}
.vp-acts{position:static;margin-top:18px}
.vp-text>h3+.vp-acts{order:0}
.vp-text{justify-content:flex-start}
.vp-foot{margin-top:auto}
/* photos that have their own scene are small, so they sit contained in the panel with softened edges instead of being stretched */
.vp-photo:not(.cut) img{left:8%;width:84%;object-fit:contain;-webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 60%,transparent 100%)}
.vp-photo img{max-height:100%}
.vp-photo.cut img{left:10%;width:80%}
.vp-photo:not(.cut) img{inset:0;margin:auto;left:0;top:0;width:auto;height:auto;max-width:82%;max-height:62%;object-fit:contain;border-radius:18px;-webkit-mask-image:none;mask-image:none;box-shadow:0 24px 50px rgba(0,0,0,.22)}
@media (max-width:760px){.vp-photo:not(.cut) img{max-width:88%;max-height:74%}}
.vp-panel{box-shadow:-22px 0 40px rgba(0,0,0,.32),0 20px 50px rgba(0,0,0,.18)}   /* the leading edge shows clearly when a panel slides over the one before */
.vp-text{border:1px solid rgba(255,255,255,.08)}

/* ===== vehicle panels, corrected (29 Oct): one fixed-size frame, every vehicle uses the same card, text grouped, no see-through ===== */
.vp-stage{display:flex;align-items:center;justify-content:center}
.vp-frame{position:relative;width:min(1180px,calc(100vw - 32px));height:min(580px,calc(100svh - 120px));overflow:hidden;border-radius:24px}
.vp-slide,.vp-slide.rev{inset:0;grid-template-columns:56fr 44fr;gap:12px;background:var(--bg);will-change:transform}
.vp-slide.rev{grid-template-columns:44fr 56fr}
.vp-panel{box-shadow:none;border-radius:22px}
.vp-slide{box-shadow:-24px 0 44px rgba(0,0,0,.22)}
.vp-text{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,3vw,44px);border:0}
.vp-in{display:flex;flex-direction:column;gap:14px;max-width:440px;will-change:opacity}
.vp-count{font:400 12.5px/1 "Space Mono",ui-monospace,monospace;letter-spacing:.04em;color:rgba(255,255,255,.65)}
.vp-text h3{max-width:none;font-size:clamp(32px,3.6vw,54px);line-height:1.04}
.vp-in>p{margin:0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.85)}
.vp-acts{position:static;margin-top:8px}
.vp-foot{display:none}
.vp-photo img,.vp-photo.cut img,.vp-photo:not(.cut) img{position:absolute;inset:0;margin:auto;left:0;top:0;width:auto;height:auto;max-width:84%;max-height:72%;object-fit:contain;-webkit-mask-image:none;mask-image:none}
.vp-photo:not(.cut) img{border-radius:16px;box-shadow:0 22px 46px rgba(0,0,0,.22)}
.vp-photo.cut img{filter:drop-shadow(0 24px 20px rgba(0,0,0,.24))}
@media (max-width:760px){
  .vp-frame{height:calc(100svh - 150px);width:calc(100vw - 20px);border-radius:18px}
  .vp-slide,.vp-slide.rev{grid-template-columns:1fr;grid-template-rows:42fr 58fr;gap:8px}
  .vp-slide.rev .vp-photo{order:0}
  .vp-text{justify-content:flex-start;padding:20px}
  .vp-in{gap:10px}
  .vp-text h3{font-size:clamp(28px,8vw,38px)}
  .vp-in>p{font-size:14.5px}
  .vp-photo img,.vp-photo.cut img,.vp-photo:not(.cut) img{max-width:88%;max-height:80%}
}
.vp-static .vp-frame{height:auto;overflow:visible;display:grid;gap:14px}
.vp-static .vp-slide{position:relative;height:min(78vh,540px);visibility:visible!important}
/* same footprint for every vehicle: text column 44%, photo column 56%; every image fills the same box width (aspect kept) */
.vp-slide{grid-template-columns:44fr 56fr}
.vp-slide.rev{grid-template-columns:56fr 44fr}
.vp-photo img,.vp-photo.cut img,.vp-photo:not(.cut) img{width:78%;height:auto;max-width:78%;max-height:70%}
@media (max-width:760px){.vp-slide,.vp-slide.rev{grid-template-columns:1fr}.vp-photo img,.vp-photo.cut img,.vp-photo:not(.cut) img{width:86%;max-width:86%;max-height:82%}}
@media (max-width:760px){.vp-slide .vp-photo,.vp-slide.rev .vp-photo{order:-1}.vp-slide,.vp-slide.rev{grid-template-rows:50fr 50fr}.vp-text{justify-content:center}}   /* phones: every vehicle the same way round, photo on top */


/* ===== Contact section: realistic rotating Earth (assets/js/earth-globe.js), from the owner's reference video (29 Oct) ===== */
.globe.sg{background:linear-gradient(180deg,#212121,#0b0b0b);isolation:isolate}
.globe.sg::before{display:none}
.globe.sg #sglobe{display:none}
.globe.sg.sg-flat #sglobe{display:block}                       /* the drawn globe, only when WebGL 2 or the images are unavailable */
.eg-gl,.eg-ov{position:absolute;inset:0;width:100%;height:100%;display:block}
.eg-ov{z-index:1;touch-action:pan-y}
.eg-gl{opacity:0;transition:opacity .6s ease}
.sg.eg-on .eg-gl{opacity:1}
.globe.sg .eg-cap{position:relative;z-index:2;margin:0;padding:18px 20px 0;font-size:12.5px;line-height:1.5;font-weight:600;color:rgba(255,255,255,.92);letter-spacing:.01em}
.globe.sg .eg-cap span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#e6e6e6}
.globe.sg.sg-flat .eg-cap{display:none}                      /* the drawn globe already circles the state names */
.globe.sg .sg-legend{color:rgba(255,255,255,.88)}
.globe.sg .sg-tip{z-index:4}
@media (max-width:760px){.globe.sg{height:440px}.globe.sg .eg-cap{padding:14px 14px 0;font-size:11.5px}}


/* ===== Packages: one large Mysuru card turns into the nine-card grid as you scroll (assets/js/packages-morph.js, 29 Oct) ===== */
#published .pg{position:relative}
#published.pg-on #tourGrid{position:sticky}                        /* its top offset is set by the script */
#published.pg-on #tourGrid .tr-card{position:absolute;margin:0;animation:none!important;will-change:left,top,width,height}
#published.pg-on.pk-anim #tourGrid .tr-card{transform:none}
#published.pg-on #tourGrid .tr-card:hover{transform:translateY(-4px)}
#published.pg-on #tourGrid .tr-media{aspect-ratio:auto;flex:1 1 0;min-height:0}   /* the photo takes whatever height the card has */
#published.pg-on #tourGrid .tr-body{flex:none}
@media (max-width:767px){                                          /* phones: a two-column grid instead of the swipe row */
  #published.pg-on #tourGrid,#published.pg-measure #tourGrid{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;
    gap:12px;margin:0;padding:0;overflow:visible;scroll-snap-type:none}
  #published.pg-on #tourGrid .tr-body,#published.pg-measure #tourGrid .tr-body{padding:12px 12px 14px}
  #published.pg-on #tourGrid .tr-body h3,#published.pg-measure #tourGrid .tr-body h3{font-size:15px}
  #published.pg-on #tourGrid .tr-body p,#published.pg-measure #tourGrid .tr-body p{font-size:12px}
  #published.pg-on #tourGrid .tr-meta,#published.pg-measure #tourGrid .tr-meta{top:8px;left:8px;right:8px;gap:4px;font-size:10px;letter-spacing:.04em}   /* was 8.5px (responsive pass 8 Nov) */
  #published.pg-on #tourGrid .tr-meta span,#published.pg-measure #tourGrid .tr-meta span{padding:4px 7px}
  #published.pg-on #tourGrid .tr-foot,#published.pg-measure #tourGrid .tr-foot{margin-top:10px;padding-top:10px}
  #published.pg-on #tourGrid .tr-foot b,#published.pg-measure #tourGrid .tr-foot b{font-size:19px}
  #published.pg-on #tourGrid .tr-foot small,#published.pg-measure #tourGrid .tr-foot small{font-size:10.5px}
  #published.pg-on #tourGrid .tr-foot::after,#published.pg-measure #tourGrid .tr-foot::after{width:30px;height:30px;font-size:13px}
  #published.pg-measure #tourGrid .tr-media{aspect-ratio:4/3}
}
#published.pg-on #tourGrid .tr-card{transform-origin:50% 50%}


/* Packages: the four-directional unfolding around the Mysore card (assets/js/packages-morph.js, 30 Oct) */
#published.pg-on .pg{overflow:clip}
#published.pg-on #tourGrid{position:sticky;top:0;display:block;gap:0;margin:0;padding:0;overflow:visible}
#published.pg-on #tourGrid .tr-card{will-change:transform}
/* smaller cards above and below keep every detail, a little tighter */
#published.pg-on #tourGrid .tr-card.pg-s .tr-body{padding:10px 12px 12px;gap:2px}
#published.pg-on #tourGrid .tr-card.pg-s .tr-body h3{font-size:14.5px;line-height:1.2}
#published.pg-on #tourGrid .tr-card.pg-s .tr-body p{font-size:11.5px}
#published.pg-on #tourGrid .tr-card.pg-s .tr-meta{top:8px;left:8px;right:8px;gap:4px;font-size:9.5px;letter-spacing:.04em}   /* was 8.5px (responsive pass 8 Nov) */
#published.pg-on #tourGrid .tr-card.pg-s .tr-meta span{padding:4px 7px}
#published.pg-on #tourGrid .tr-card.pg-s .tr-foot{margin-top:8px;padding-top:8px}
#published.pg-on #tourGrid .tr-card.pg-s .tr-foot b{font-size:18px}
#published.pg-on #tourGrid .tr-card.pg-s .tr-foot small{font-size:10.5px}
#published.pg-on #tourGrid .tr-card.pg-s .tr-foot::after{width:28px;height:28px;font-size:12px}

/* The founder block now sits after the globe (build/section_order.py, 30 Oct); these are its rules from #why, unchanged */
#founder{background:var(--card);padding:60px 0 120px}
#founder .wy-founder,#founder .wy-inc{background:var(--card);border-color:transparent;box-shadow:none}
#founder .wy-founder .pill{background:var(--card)}

/* The floating search bar replaces the one in this section (30 Oct); its input stays, hidden, as the filter the floating bar and quick picks drive */
.pk-search{display:none}
.pk-chips{margin-top:30px}

/* "Our Story" button, where the founder card was (build/section_order.py, 30 Oct): a soft pulse invites the click, and on hover black fills the pill */
.wy-story{grid-column:1/-1;justify-self:center;position:relative;display:inline-flex;align-items:center;gap:18px;height:72px;padding:0 10px 0 36px;margin-bottom:clamp(14px,3vh,30px);border:1px solid #111;border-radius:999px;overflow:hidden;isolation:isolate;
  color:#111;text-decoration:none;font:400 clamp(26px,2.6vw,34px)/1 "Instrument Serif",Georgia,serif;transition:color .45s ease,opacity .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);animation:wyStoryPulse 2.6s ease-in-out infinite}
.wy-story::before{content:"";position:absolute;inset:0;z-index:-1;background:#111;border-radius:inherit;transform:translateX(-101%);transition:transform .55s cubic-bezier(.65,0,.2,1)}
.wy-story-a{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#111;color:#FFFFFF;transition:background .45s ease,color .45s ease}
.wy-story-a svg{animation:wyStoryArrow 1.6s ease-in-out infinite}
.wy-story:hover,.wy-story:focus-visible{color:#FFFFFF;animation-play-state:paused}
.wy-story:hover::before,.wy-story:focus-visible::before{transform:none}
.wy-story:hover .wy-story-a,.wy-story:focus-visible .wy-story-a{background:#FFFFFF;color:#111}
.wy-story:focus-visible{outline:3px solid #111;outline-offset:3px}
@keyframes wyStoryPulse{0%,100%{box-shadow:0 0 0 0 rgba(17,17,17,.28)}60%{box-shadow:0 0 0 14px rgba(17,17,17,0)}}
@keyframes wyStoryArrow{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@media (max-width:640px){.wy-story{height:62px;padding:0 8px 0 28px}.wy-story-a{width:46px;height:46px}}
@media (prefers-reduced-motion:reduce){.wy-story,.wy-story-a svg{animation:none}}

/* "More Travel Trendzz packages" (owner's request, 4 Nov): always visible, never waiting for the fade-in, in a plain grid of
   1 column on small phones, 2 on larger phones and tablets, 3 on laptops and 4 on wide screens. Same cards and look as above. */
#published.pk-anim #tourMore .tr-card,#published.pk-live #tourMore .tr-card{opacity:1;transform:none;animation:none}
#published #tourMore{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;gap:22px;
  margin:0;padding:0;overflow:visible;scroll-snap-type:none}
#published #tourMore .tr-card{scroll-snap-align:none}
#published #tourMore .tr-media{aspect-ratio:4/3}
#published #tourMore .tr-body{padding:18px 20px 20px}
#published #tourMore .tr-body h3{font-size:18px}
#published #tourMore .tr-foot b{font-size:24px}
#published #tourMore .tr-card:hover{transform:translateY(-4px)}
@media (max-width:1279px){#published #tourMore{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:999px){#published #tourMore{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (max-width:559px){#published #tourMore{grid-template-columns:minmax(0,1fr);gap:16px}
  #published .tr-more-h{margin:44px 0 18px}}