/* ==========================================================================
   YAAN HOLIDAYS - style.css (V5) (V5)  (the ONE stylesheet for every page)

   HOW IT IS ORGANISED
   - Colours, fonts and easing live in :root (top of file). Change them there.
   - One section per page/component, in the order listed below.
   - ALL responsive rules are at the bottom, grouped by breakpoint
     (1024 > 900 > 760 > 700 > 560), each chunk headed by its section name.
   - To restyle a component: edit its section AND the same-named chunk in the
     responsive blocks at the bottom.

   CONTENTS
   1. Tokens, reset, base & buttons
   2. Header & navigation
   3. Home: hero
   4. Home: destination strip & quick links
   5. Home: section heads & package cards
   6. Home: stats band
   7. Home: call-to-action banner
   8. Footer, WhatsApp button, tab bar & menu drawer
   9. Shared page banner, about page, plan band
   10. Packages page
   11. Destinations & hotels pages
   12. Blog: base list
   13. Gallery, reviews, contact & legal pages
   14. Blog: filters, sidebar, likes
   15. Package detail page
   16. Colour themes (10 palettes + picker)
   17. V3 polish: motion, trip finder, new home sections
   18. Blog post page
   19. Enquiry forms & Plan Tour page
   20. About page (redesign)
   21. V5 motion & delight: flags, ridges, mist, seasons, journey line, stamp, weather
   R. Responsive rules (bottom of file)
   ========================================================================== */


/* ---------- 1. Tokens, reset, base & buttons ---------- */
:root {
  --blue: #1560bd;
  --blue2: #0f4c99;
  --navy: #0b2447;
  --pale: #edf4fc;
  --line: #dde7f2;
  --muted: #5f7080;
  --deep: #071d3c;
  --display: 'Bricolage Grotesque', Poppins, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1)
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px
}

body {
  margin: 0;
  font-family: Poppins, system-ui, sans-serif;
  color: var(--navy);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased
}

a {
  text-decoration: none;
  color: inherit
}

h1,
h2,
h3,
h4,
p {
  margin: 0
}

img {
  width: 100%;
  display: block;
  object-fit: cover
}

svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.wrap {
  width: min(1180px, calc(100% - 48px));
  margin: auto
}

:focus-visible {
  outline: 3px solid #f2b134;
  outline-offset: 3px;
  border-radius: 6px
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: #fff;
  padding: 13px 26px;
  box-shadow: 0 10px 22px -12px var(--blue);
  font: 600 14px Poppins, sans-serif;
  cursor: pointer;
  transition: background .2s
}

.btn:hover {
  background: var(--blue2)
}

.btn.ghost {
  background: #ffffff1f;
  border: 1.5px solid #ffffffaa;
  backdrop-filter: blur(6px)
}

.btn.ghost:hover {
  background: #ffffff40
}


/* ---------- 2. Header & navigation ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  transition: box-shadow .25s
}

header.scrolled {
  box-shadow: 0 6px 24px -12px color-mix(in srgb, var(--navy) 27%, transparent)
}

.nav {
  height: 76px;
  display: flex;
  align-items: center;
  gap: 28px
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blue)
}

.logo .mark {
  width: 46px;
  height: 30px;
  fill: currentColor;
  stroke: none
}

.logo b {
  display: block;
  font: 700 20px/1.1 var(--display);
  letter-spacing: -.01em
}

.logo small {
  display: block;
  font: italic 400 12px Georgia, serif;
  color: var(--muted)
}

.nav nav {
  display: flex;
  gap: 24px;
  margin-left: auto
}

.nav nav a {
  font-size: 14px;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent
}

.nav nav a:hover,
.nav nav a.on {
  color: var(--blue);
  border-color: var(--blue)
}

.openmenu {
  display: none
}

.actions .btn {
  padding: 11px 22px
}


/* ---------- 3. Home: hero ---------- */
.hero {
  min-height: 540px;
  display: flex;
  align-items: center;
  color: #fff;
  background: linear-gradient(90deg, color-mix(in srgb, var(--deep) 80%, transparent), color-mix(in srgb, var(--deep) 40%, transparent) 55%, color-mix(in srgb, var(--deep) 8%, transparent)), url('https://images.unsplash.com/photo-1544735716-392fe2489ffa?auto=format&fit=crop&w=2200&q=85') center/cover
}

.hero .wrap {
  padding: 60px 0 90px
}

.hero h1 {
  font: 700 clamp(36px, 5vw, 60px)/1.1 var(--display);
  letter-spacing: -.02em;
  max-width: 640px
}

.hero h1 span {
  display: block;
  font-weight: 400
}

.hero p {
  max-width: 480px;
  margin: 20px 0 30px;
  font-size: 17px;
  color: #ffffffdd
}

.btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.hero .wrap>* {
  animation: rise .8s var(--ease) backwards
}

.hero .wrap>:nth-child(2) {
  animation-delay: .1s
}

.hero .wrap>:nth-child(3) {
  animation-delay: .2s
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px)
  }
}


/* ---------- 4. Home: destination strip & quick links ---------- */
.dests {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: -48px;
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--navy) 33%, transparent);
  padding: 20px 24px;
  z-index: 999;
}

.dests a,
.quick a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  flex: 1
}

.dests svg,
.quick svg {
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 50%;
  background: var(--pale);
  color: var(--blue);
  transition: background .2s, color .2s
}

.dests a:hover svg,
.quick a:hover svg {
  background: var(--blue);
  color: #fff
}

.quick {
  display: none
}


/* ---------- 5. Home: section heads & package cards ---------- */
.block {
  padding: 64px 0 0
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 26px
}

.head h2 {
  font: 700 28px/1.2 var(--display);
  letter-spacing: -.01em
}

.head p {
  color: var(--muted);
  font-size: 15px
}

.more {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue)
}

.more:hover {
  text-decoration: underline
}

.pkgs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}

.pkg {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--navy) 40%, transparent)
}

.pkg img {
  height: 170px;
  transition: transform .7s var(--ease)
}

.pkg:hover img {
  transform: scale(1.05)
}

.pkg>div {
  padding: 16px;
  background: #fff;
  position: relative
}

.pkg h3 {
  font: 600 18px var(--display)
}

.pkg small {
  display: block;
  color: var(--muted);
  font-size: 13px
}

.pkg p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600
}

.pkg i {
  font-style: normal;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background .2s
}

.pkg:hover i {
  background: var(--navy)
}

.pkgs {
  overflow: hidden
}


/* ---------- 6. Home: stats band ---------- */
.stats {
  background: var(--pale);
  margin-top: 64px;
  padding: 38px 0
}

.stats .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  gap: 16px
}

.stats b {
  display: block;
  font: 700 30px/1.2 var(--display);
  color: var(--blue)
}

.stats span {
  font-size: 14px;
  color: var(--muted)
}


/* ---------- 7. Home: call-to-action banner ---------- */
.cta {
  border-radius: 20px;
  text-align: center;
  color: #fff;
  padding: 70px 24px;
  background: linear-gradient(color-mix(in srgb, var(--deep) 60%, transparent), color-mix(in srgb, var(--deep) 70%, transparent)), url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1800&q=80') center/cover
}

.cta h2 {
  font: 700 clamp(28px, 4vw, 42px)/1.15 var(--display);
  letter-spacing: -.02em
}

.cta p {
  max-width: 520px;
  margin: 14px auto 26px;
  color: #ffffffe0
}


/* ---------- 8. Footer, WhatsApp button, tab bar & menu drawer ---------- */
footer {
  background: var(--navy);
  color: #fff;
  margin-top: 64px;
  padding-top: 56px
}

footer .logo {
  color: #fff
}

footer .logo small {
  color: #aab9c9
}

.foot {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 36px;
  padding-bottom: 44px
}

.foot h4 {
  font: 600 15px var(--display);
  margin-bottom: 14px
}

.foot a,
.foot span {
  display: block;
  color: #c3cfdc;
  font-size: 14px;
  margin: 9px 0
}

.foot a:hover {
  color: #fff;
  text-decoration: underline
}

.foot .logo {
  margin: 0
}

.legal {
  border-top: 1px solid #ffffff1f;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: #9fb0c2;
  font-size: 13px
}

.legal a {
  display: inline;
  margin: 0 0 0 18px;
  color: #c3cfdc
}

.floatwa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1fa855;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 26px -8px #1fa85599
}

.floatwa svg {
  width: 28px;
  height: 28px
}

.tabbar,
#drawer {
  display: none
}


/* ---------- 9. Shared page banner, about page, plan band ---------- */
.banner {
  min-height: 250px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: linear-gradient(color-mix(in srgb, var(--deep) 33%, transparent), color-mix(in srgb, var(--deep) 80%, transparent)), url('https://images.unsplash.com/photo-1544735716-392fe2489ffa?auto=format&fit=crop&w=2000&q=80') center/cover
}

.banner .wrap {
  padding: 90px 0 34px
}

.banner h1 {
  font: 700 clamp(32px, 4.4vw, 48px)/1.15 var(--display);
  letter-spacing: -.02em
}

.crumb {
  margin-top: 6px;
  font-size: 14px;
  color: #ffffffcc
}

.crumb a:hover {
  text-decoration: underline
}

.story,
.mission {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center
}

.mission {
  grid-template-columns: .95fr 1.05fr
}

.label {
  font: 600 14px Poppins;
  color: var(--blue);
  margin-bottom: 8px
}

.about-copy h2 {
  font: 700 clamp(28px, 3.4vw, 40px)/1.15 var(--display);
  letter-spacing: -.02em;
  margin-bottom: 18px
}

.about-copy p:not(.label) {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  max-width: 58ch
}

.about-copy p+p {
  margin-top: 14px
}

.about-copy .btn {
  margin-top: 26px
}

.photo {
  position: relative
}

.photo img,
.mission>img {
  height: 420px;
  border-radius: 18px
}

.mission>img {
  height: 320px
}

.script {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background: #fffffff2;
  color: var(--blue);
  padding: 8px 18px;
  border-radius: 999px;
  font: italic 400 20px Georgia, serif;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--navy) 47%, transparent)
}

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--pale);
  border-radius: 16px;
  padding: 30px 12px
}

.facts div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  padding: 0 16px
}

.facts div+div {
  border-left: 1px solid var(--line)
}

.facts svg {
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  margin-bottom: 8px
}

.facts b {
  font: 700 20px/1.2 var(--display)
}

.facts span {
  font-size: 13px;
  color: var(--muted);
  max-width: 20ch
}

.planbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: var(--navy);
  color: #fff;
  border-radius: 18px;
  padding: 34px 40px
}

.planbar h2 {
  font: 700 24px/1.2 var(--display)
}

.planbar p {
  color: #c3cfdc;
  margin-top: 4px
}


/* ---------- 10. Packages page ---------- */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0)
}

[hidden] {
  display: none !important
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center
}

.tabs {
  display: flex;
  gap: 8px;
  margin-right: auto
}

.tabs button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font: 500 14px Poppins, sans-serif;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s
}

.tabs button:hover {
  border-color: var(--blue)
}

.tabs button.on {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff
}

.filters input,
.filters select {
  font: 400 14px Poppins, sans-serif;
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  background: #fff;
  min-width: 210px
}

.filters input:focus,
.filters select:focus {
  border-color: var(--blue);
  outline: 3px solid color-mix(in srgb, var(--blue) 20%, transparent)
}

.count {
  margin: 22px 0 16px;
  color: var(--muted);
  font-size: 14px
}

.pkgs.three {
  grid-template-columns: repeat(3, 1fr)
}

.pkgs.three .pkg img {
  height: 190px
}

.empty {
  text-align: center;
  padding: 56px 0
}

.empty h3 {
  font: 600 20px var(--display)
}

.empty p {
  color: var(--muted);
  margin-top: 6px
}

.empty .btn {
  margin-top: 18px
}


/* ---------- 11. Destinations & hotels pages ---------- */
.tabs {
  margin-bottom: 28px
}

.dgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 22px
}

.dtile .ph {
  overflow: hidden;
  border-radius: 14px
}

.dtile img {
  height: 240px;
  transition: transform .8s var(--ease)
}

.dtile:hover img {
  transform: scale(1.05)
}

.dtile h3 {
  font: 600 20px var(--display);
  margin-top: 12px
}

.dtile p {
  color: var(--muted);
  font-size: 14px
}

.dtile:hover h3 {
  color: var(--blue)
}

.hotel .photo img {
  height: 380px
}

.amen {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 10px
}

.amen li {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 15px
}

.amen svg {
  width: 24px;
  height: 24px;
  padding: 5px;
  border-radius: 50%;
  background: var(--pale);
  color: var(--blue);
  flex: none;
  stroke-width: 2.4
}


/* ---------- 12. Blog: base list ---------- */
.posts {
  max-width: 920px;
  margin: 0 auto
}

.post {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--line)
}

.post:first-child {
  padding-top: 0
}

.post img {
  height: 170px;
  border-radius: 12px
}

.post h2 {
  font: 600 22px/1.3 var(--display);
  letter-spacing: -.01em
}

.post time {
  display: block;
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: 14px
}


/* ---------- 13. Gallery, reviews, contact & legal pages ---------- */
.gal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px
}

.gal button {
  border: 0;
  padding: 0;
  background: none;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  display: block
}

.gal img {
  height: 220px;
  transition: transform .7s var(--ease)
}

.gal button:hover img {
  transform: scale(1.06)
}

.lb {
  border: 0;
  padding: 0;
  background: transparent;
  width: auto;
  max-width: 94vw;
  overflow: visible
}

.lb::backdrop {
  background: #04101fe8
}

.lb img {
  width: auto;
  max-width: 100%;
  max-height: 82vh;
  margin: auto;
  border-radius: 12px
}

.lb button {
  position: fixed;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: #ffffff26;
  color: #fff;
  font-size: 22px;
  cursor: pointer
}

.lb button:hover {
  background: #ffffff4d
}

.lb .x {
  top: 18px;
  right: 18px
}

.lb .pv {
  left: 18px;
  top: 50%
}

.lb .nx {
  right: 18px;
  top: 50%
}

.revs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px
}

.rev {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 10px 24px -20px color-mix(in srgb, var(--navy) 40%, transparent)
}

.who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px
}

.who b {
  display: block;
  font-weight: 600
}

.av {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pale);
  color: var(--blue);
  display: grid;
  place-items: center;
  font: 600 16px Poppins, sans-serif
}

.stars {
  color: #e8a317;
  letter-spacing: 2px;
  font-size: 15px
}

.rev p {
  color: var(--muted);
  line-height: 1.7
}

.contact {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start
}

.info {
  display: grid;
  gap: 14px
}

.info>* {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff
}

.info a:hover {
  border-color: var(--blue)
}

.info svg {
  width: 46px;
  height: 46px;
  padding: 12px;
  border-radius: 50%;
  background: var(--pale);
  color: var(--blue);
  flex: none
}

.info b {
  display: block
}

.info span {
  color: var(--muted);
  font-size: 14px
}

.cform {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  display: grid;
  gap: 16px;
  box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--navy) 40%, transparent)
}

.cform h2 {
  font: 600 22px var(--display)
}

.cform .two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.cform label {
  font: 600 14px Poppins, sans-serif
}

.cform input,
.cform select,
.cform textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font: 400 15px Poppins, sans-serif;
  color: var(--navy);
  background: #fff
}

.cform input:focus,
.cform select:focus,
.cform textarea:focus {
  border-color: var(--blue);
  outline: 3px solid color-mix(in srgb, var(--blue) 20%, transparent)
}

.cform textarea {
  resize: vertical
}

.cform .btn {
  justify-self: start
}

.cform small {
  color: var(--muted);
  font-size: 13px
}

.map {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line)
}

.map iframe {
  width: 100%;
  height: 340px;
  border: 0;
  display: block
}

.doc {
  max-width: 780px;
  margin: 0 auto
}

.doc h2 {
  font: 600 20px var(--display);
  margin: 30px 0 8px
}

.doc h2:first-child {
  margin-top: 0
}

.doc p {
  color: var(--muted);
  line-height: 1.8
}

.doc-end {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line)
}

.doc a {
  color: var(--blue);
  text-decoration: underline
}


/* ---------- 14. Blog: filters, sidebar, likes ---------- */
.blog {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 44px;
  align-items: start
}

.blog .posts {
  max-width: none
}

.blog .post {
  grid-template-columns: 220px 1fr
}

.blog .tabs {
  margin: 0;
  flex-wrap: wrap
}

.blog .filters input {
  flex: 1 1 220px
}

.tabs button span {
  font-size: 12px;
  opacity: .65;
  margin-left: 2px
}

.tag {
  display: inline-block;
  font: 600 12px Poppins, sans-serif;
  color: var(--blue);
  background: var(--pale);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 8px
}

.post time {
  margin: 6px 0 12px
}

.acts {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap
}

.acts .more {
  margin-right: auto
}

.acts button {
  border: 0;
  background: none;
  font: 500 14px Poppins, sans-serif;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 2px
}

.acts button:hover {
  color: var(--navy)
}

.like[aria-pressed=true] {
  color: #d6336c
}

.side {
  display: grid;
  gap: 20px;
  position: sticky;
  top: 92px
}

.widget {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  background: #fff
}

.widget h3 {
  font: 600 17px var(--display);
  margin-bottom: 10px
}

.mini {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line)
}

.mini img {
  height: 56px;
  border-radius: 8px
}

.mini b {
  display: block;
  font: 600 14px/1.35 Poppins
}

.mini span {
  font-size: 13px;
  color: var(--muted)
}

.mini:hover b {
  color: var(--blue)
}

.widget .more {
  display: inline-block;
  margin-top: 10px
}

.tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.tagcloud button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font: 500 13px Poppins, sans-serif;
  color: var(--navy);
  cursor: pointer
}

.tagcloud button:hover {
  border-color: var(--blue);
  color: var(--blue)
}

.widget.dark {
  background: var(--navy);
  border: 0;
  color: #fff
}

.widget.dark p {
  color: #c3cfdc;
  font-size: 14px;
  margin-bottom: 16px
}

.widget.dark .btn {
  background: #1fa855
}


/* ---------- 15. Package detail page ---------- */
.pbanner {
  min-height: 280px
}

.pfacts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: -44px;
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--navy) 40%, transparent);
  padding: 22px 28px
}

.pfacts span {
  display: block;
  font-size: 13px;
  color: var(--muted)
}

.pfacts b {
  font: 600 17px/1.35 Poppins, sans-serif
}

.pfacts small {
  font: 400 13px Poppins, sans-serif;
  color: var(--muted)
}

.psub {
  position: sticky;
  top: 76px;
  z-index: 15;
  background: #fff;
  border-bottom: 1px solid var(--line);
  margin-top: 28px
}

.psub .wrap {
  display: flex;
  gap: 6px;
  overflow-x: auto
}

.psub a {
  padding: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  white-space: nowrap
}

.psub a:hover {
  color: var(--navy)
}

.psub a.on {
  color: var(--blue);
  border-color: var(--blue)
}

.pkg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px;
  align-items: start
}

.psec {
  padding-top: 44px;
  scroll-margin-top: 140px
}

.psec h2 {
  font: 700 26px/1.2 var(--display);
  letter-spacing: -.01em;
  margin-bottom: 14px
}

.psec h3 {
  font: 600 17px var(--display);
  margin: 26px 0 10px
}

.psec>p {
  color: var(--muted);
  line-height: 1.8;
  max-width: 68ch
}

.pgal {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 150px 150px;
  gap: 10px;
  margin-top: 22px
}

.pgal img {
  height: 100%;
  border-radius: 12px
}

.pgal img:first-child {
  grid-row: span 2
}

.hl,
.yes,
.no {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px
}

.hl {
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px
}

.hl li,
.yes li,
.no li {
  display: flex;
  gap: 10px;
  line-height: 1.5;
  font-size: 15px
}

.hl li:before,
.yes li:before {
  content: '✓';
  color: #1a8f4c;
  font-weight: 700
}

.no li:before {
  content: '✕';
  color: #c0392b;
  font-weight: 700
}

.shead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px
}

.shead h2 {
  margin: 0
}

.link-btn {
  border: 0;
  background: none;
  color: var(--blue);
  font: 600 14px Poppins, sans-serif;
  cursor: pointer;
  text-decoration: underline
}

.itin {
  display: grid;
  gap: 10px;
  margin-top: 16px
}

.itin details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff
}

.itin summary {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  cursor: pointer;
  font-weight: 600;
  list-style: none
}

.itin summary::-webkit-details-marker {
  display: none
}

.itin summary:after {
  content: '+';
  margin-left: auto;
  font-size: 22px;
  color: var(--blue)
}

.itin details[open] summary:after {
  content: '−'
}

.dn {
  background: var(--blue);
  color: #fff;
  border-radius: 8px;
  padding: 3px 11px;
  font-size: 13px;
  white-space: nowrap
}

.itin details>div {
  padding: 0 18px 18px;
  color: var(--muted);
  line-height: 1.75
}

.itin ul {
  margin: 8px 0 0;
  padding-left: 20px
}

.incexc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.incexc>div {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px
}

.incexc h3 {
  margin-top: 0
}

.tbl {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px
}

.rates {
  width: 100%;
  border-collapse: collapse;
  min-width: 460px
}

.rates th,
.rates td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 15px
}

.rates th {
  background: var(--pale);
  font-weight: 600
}

.rates tr:last-child td {
  border-bottom: 0
}

.rates td:last-child {
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap
}

.note {
  color: var(--muted);
  font-size: 14px;
  margin-top: 12px
}

.plain {
  color: var(--muted);
  line-height: 1.8;
  padding-left: 20px;
  max-width: 68ch
}

.plain a {
  color: var(--blue);
  text-decoration: underline
}

.pkg-side {
  position: sticky;
  top: 152px
}

.wbox {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  display: grid;
  gap: 14px;
  box-shadow: 0 22px 44px -28px color-mix(in srgb, var(--navy) 47%, transparent)
}

.wbox .from {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: -10px
}

.wbox .price b {
  font: 700 30px var(--display);
  color: var(--blue)
}

.wbox .price span {
  color: var(--muted);
  font-size: 14px
}

.wbox label {
  font: 600 14px Poppins, sans-serif
}

.wbox select,
.wbox input {
  display: block;
  width: 100%;
  margin-top: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font: 400 15px Poppins, sans-serif;
  color: var(--navy);
  background: #fff
}

.wbox select:focus,
.wbox input:focus {
  border-color: var(--blue);
  outline: 3px solid color-mix(in srgb, var(--blue) 20%, transparent)
}

.trav,
.tot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 600 14px Poppins, sans-serif
}

.stepper {
  display: flex;
  align-items: center;
  gap: 14px
}

.stepper button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 18px;
  cursor: pointer;
  color: var(--navy)
}

.stepper button:hover {
  border-color: var(--blue);
  color: var(--blue)
}

.stepper output {
  min-width: 20px;
  text-align: center;
  font-weight: 700
}

.tot {
  padding-top: 14px;
  border-top: 1px dashed var(--line)
}

.tot b {
  font: 700 22px var(--display)
}

.wbox .wa {
  background: #1fa855
}

.wbox .wa:hover {
  background: #178a45
}

.call {
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--blue)
}

.wbox small {
  color: var(--muted);
  font-size: 12.5px;
  text-align: center
}


/* ---------- 16. Colour themes (visitor picker + default) ---------- */
/* Default = Himalayan blue (:root). Change the default by adding data-theme="tea|sunrise|monastery|glacier|orchid|rhododendron|midnight|golden|slate" to <html>. */
html[data-theme=tea] {
  --blue: #1d7a4f;
  --blue2: #14603c;
  --navy: #0e2a22;
  --pale: #eaf5ef;
  --line: #d6e7dd;
  --muted: #587066;
  --deep: #0a2119
}

html[data-theme=sunrise] {
  --blue: #c2570c;
  --blue2: #9a4309;
  --navy: #2b1608;
  --pale: #fdf1e6;
  --line: #f0dcc8;
  --muted: #73655a;
  --deep: #1f0f05
}

html[data-theme=monastery] {
  --blue: #9b1c31;
  --blue2: #7a1527;
  --navy: #2a0f17;
  --pale: #fbeef0;
  --line: #ecd6da;
  --muted: #6f5d62;
  --deep: #1c0a10
}

html[data-theme=glacier] {
  --blue: #0e7490;
  --blue2: #0b5a72;
  --navy: #082f3a;
  --pale: #e6f4f8;
  --line: #cfe5ec;
  --muted: #526b75;
  --deep: #052028
}

html[data-theme=orchid] {
  --blue: #7c3aed;
  --blue2: #5b21b6;
  --navy: #1e1236;
  --pale: #f3edfd;
  --line: #e2d8f5;
  --muted: #655a78;
  --deep: #140c26
}

html[data-theme=rhododendron] {
  --blue: #be185d;
  --blue2: #9d174d;
  --navy: #2e0b1d;
  --pale: #fdeef5;
  --line: #f3d6e4;
  --muted: #765a68;
  --deep: #1f0714
}

html[data-theme=midnight] {
  --blue: #3730a3;
  --blue2: #312e81;
  --navy: #11112e;
  --pale: #eceefb;
  --line: #d7dbf3;
  --muted: #5a5f80;
  --deep: #0a0a20
}

html[data-theme=golden] {
  --blue: #a16207;
  --blue2: #854d0e;
  --navy: #2a1d05;
  --pale: #fcf6e3;
  --line: #efe3bd;
  --muted: #6f6446;
  --deep: #1c1303
}

html[data-theme=slate] {
  --blue: #334155;
  --blue2: #1e293b;
  --navy: #0f172a;
  --pale: #f1f4f8;
  --line: #dde3ea;
  --muted: #5b6675;
  --deep: #0b111f
}

.themes {
  position: fixed;
  left: 16px;
  bottom: 20px;
  z-index: 30;
  view-transition-name: themes
}

.tbtn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--blue);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--navy) 50%, transparent)
}

.tpop {
  position: absolute;
  left: 0;
  bottom: 56px;
  width: min(310px, calc(100vw - 24px));
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 6px;
  box-shadow: 0 24px 44px -20px color-mix(in srgb, var(--navy) 55%, transparent)
}

.tpop b {
  grid-column: 1/-1;
  font: 700 14px var(--display);
  margin-bottom: 4px
}

.tpop button {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  background: none;
  border-radius: 10px;
  padding: 8px;
  font: 500 13px Poppins, sans-serif;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  min-width: 0
}

.tpop button:hover {
  background: var(--pale)
}

.tpop button[aria-pressed=true] {
  border-color: var(--blue);
  background: var(--pale)
}

.tpop i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line)
}

/* ---------- 17. V3 polish: motion, finder, new home sections ---------- */
@view-transition {
  navigation: auto
}

header {
  view-transition-name: site-header
}

.floatwa {
  view-transition-name: wa
}

h1,
h2 {
  text-wrap: balance
}

.btn:hover {
  transform: translateY(-2px)
}

.btn.ghost {
  box-shadow: none
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  z-index: 60;
  pointer-events: none;
  clip-path: polygon(0 100%, 3% 55%, 6% 80%, 11% 15%, 16% 70%, 22% 35%, 28% 85%, 35% 20%, 42% 75%, 49% 40%, 56% 90%, 63% 25%, 70% 70%, 77% 45%, 84% 85%, 91% 30%, 97% 70%, 100% 50%, 100% 100%);
  background: linear-gradient(90deg, var(--blue) calc(var(--p, 0)*100%), color-mix(in srgb, var(--blue) 14%, transparent) 0)
}

.totop {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 30;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s
}

.totop.show {
  opacity: 1;
  pointer-events: auto
}

.reveal {
  opacity: 0
}

.reveal.in {
  opacity: 1;
  animation: rise .7s var(--ease) var(--d, 0s) backwards
}

.pkg {
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s
}

.pkg:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 40px -24px color-mix(in srgb, var(--navy) 50%, transparent)
}

.chip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: #fffffff0;
  color: var(--navy);
  font: 600 12px Poppins, sans-serif;
  padding: 5px 11px;
  border-radius: 999px
}

.head h2 {
  font-size: clamp(26px, 3vw, 36px)
}

.finder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 12px;
  align-items: end;
  max-width: 860px;
  margin-top: 34px;
  padding: 14px;
  border-radius: 18px;
  background: #ffffff26;
  border: 1px solid #ffffff55;
  backdrop-filter: blur(14px)
}

.finder label {
  font: 600 12px Poppins, sans-serif;
  color: #ffffffe6
}

.finder select,
.finder input {
  display: block;
  width: 100%;
  margin-top: 6px;
  border: 0;
  border-radius: 10px;
  padding: 12px;
  font: 500 15px Poppins, sans-serif;
  color: var(--navy);
  background: #fff
}

.why {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

.why-card {
  background: var(--pale);
  border-radius: 16px;
  padding: 26px
}

.why-card svg {
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 12px;
  background: #fff;
  color: var(--blue);
  margin-bottom: 14px
}

.why-card h3 {
  font: 700 19px var(--display);
  margin-bottom: 6px
}

.why-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65
}

.alt {
  background: var(--pale);
  padding: 64px 0;
  margin-top: 64px
}

.revs.three {
  grid-template-columns: repeat(3, 1fr)
}

.pkgs.two {
  grid-template-columns: repeat(2, 1fr)
}

.pkgs.two img {
  height: 230px
}

.exp {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px
}

.exp a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--pale);
  transition: background .25s, color .25s
}

.exp a:after {
  content: '→';
  margin-top: 10px;
  font-weight: 700;
  color: var(--blue)
}

.exp b {
  font: 700 18px var(--display)
}

.exp span {
  font-size: 14px;
  color: var(--muted)
}

.exp a:hover {
  background: var(--blue);
  color: #fff
}

.exp a:hover span,
.exp a:hover:after {
  color: #fff
}

/* ---------- 18. Blog post page ---------- */
.post-banner {
  min-height: 340px
}

.post-banner h1 {
  max-width: 820px
}

.post-banner .tag {
  background: #ffffff26;
  color: #fff;
  backdrop-filter: blur(6px)
}

.pmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 12px;
  color: #ffffffd9;
  font-size: 14px
}

.pmeta:empty {
  display: none
}

.lead-img {
  height: 380px;
  border-radius: 16px
}

.article .acts {
  margin: 18px 0 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line)
}

.prose {
  max-width: 70ch;
  margin-top: 26px;
  color: var(--navy)
}

.prose h2 {
  font: 700 24px/1.25 var(--display);
  margin: 34px 0 10px
}

.prose p {
  font-size: 17px;
  line-height: 1.85;
  margin: 0 0 16px
}

.prose ul {
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.85;
  margin: 0 0 16px
}

.prose li {
  margin-bottom: 6px
}

.prose blockquote {
  margin: 24px 0;
  padding: 6px 0 6px 20px;
  border-left: 4px solid var(--blue);
  font: 600 20px/1.5 var(--display)
}

.ptags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0
}

.ptags a,
.tagcloud a {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font: 500 13px Poppins, sans-serif;
  color: var(--navy)
}

.ptags a:hover,
.tagcloud a:hover {
  border-color: var(--blue);
  color: var(--blue)
}

.callout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  background: var(--pale);
  border-radius: 16px;
  padding: 22px 26px;
  margin: 30px 0
}

.callout b {
  display: block;
  font: 700 18px var(--display)
}

.callout span {
  color: var(--muted);
  font-size: 15px
}

.callout .btn {
  background: #1fa855;
  flex: none
}

.pnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.pnav a {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .2s
}

.pnav a:hover {
  border-color: var(--blue)
}

.pnav>:nth-child(2) {
  text-align: right
}

.pnav small {
  color: var(--muted);
  font-size: 13px
}

.pnav b {
  font: 600 15px/1.4 Poppins, sans-serif
}

.related h2 {
  font: 700 24px var(--display);
  margin: 40px 0 18px
}

/* ---------- 19. Enquiry forms & Plan Tour page ---------- */
.finder .fnote {
  grid-column: 1/-1;
  font-size: 13px;
  color: #ffffffe6
}

.finder .fnote:empty {
  display: none
}

.info>.steps {
  display: block
}

.info>.steps h3 {
  font: 700 18px var(--display);
  margin-bottom: 10px
}

.info>.steps ol {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.8;
  font-size: 15px
}

.faq {
  max-width: 820px
}

.post h2 a:hover {
  color: var(--blue)
}

/* ---------- 20. About page (redesign) ---------- */
.banner h1 span {
  font-weight: 500;
  color: #ffffffd9
}

.split {
  display: grid;
  grid-template-columns: .9fr 1.3fr;
  gap: clamp(30px, 6vw, 80px);
  align-items: start
}

.split h2 {
  font: 700 clamp(30px, 3.6vw, 44px)/1.1 var(--display);
  letter-spacing: -.02em
}

.pull {
  margin: 22px 0 0;
  padding-left: 20px;
  border-left: 4px solid var(--blue);
  font: 600 clamp(20px, 2.2vw, 26px)/1.35 var(--display)
}

.copy p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.85;
  margin: 0 0 16px;
  max-width: 62ch
}

.founder {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  background: var(--pale);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 44px)
}

.mono {
  aspect-ratio: 1;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: #fff;
  display: grid;
  place-items: center;
  font: 800 64px var(--display);
  overflow: hidden
}

.mono img {
  height: 100%
}

.founder h2 {
  font: 700 15px Poppins, sans-serif;
  color: var(--blue);
  margin-bottom: 12px
}

.founder blockquote {
  margin: 0;
  font: 600 clamp(20px, 2.4vw, 28px)/1.4 var(--display)
}



.sign {
  margin: 18px 0 0;
  display: grid;
  gap: 2px
}

.sign b {
  font-size: 17px
}

.sign span {
  color: var(--muted);
  font-size: 14px
}

.why.three {
  grid-template-columns: repeat(3, 1fr)
}

.ops {
  background: var(--navy);
  color: #fff;
  padding: clamp(56px, 7vw, 88px) 0;
  margin-top: 64px
}

.ops .head p {
  color: #c3cfdc
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.chips a {
  border: 1px solid #ffffff44;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 15px;
  transition: background .2s, color .2s
}

.chips a:hover {
  background: #fff;
  color: var(--navy)
}

.opsnote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: #c3cfdc;
  font-size: 15px
}

.opsnote svg {
  width: 20px;
  height: 20px
}

.reasons {
  list-style: none;
  margin: 0;
  padding: 0
}

.reasons li {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line)
}

.reasons li:first-child {
  padding-top: 0
}

.reasons svg {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 50%;
  background: var(--pale);
  color: var(--blue);
  stroke-width: 2.4
}

.reasons b {
  display: block;
  font: 700 18px var(--display)
}

.reasons span {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65
}

.reg {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: var(--pale);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 40px)
}

.reg>svg {
  flex: none;
  width: 58px;
  height: 58px;
  padding: 15px;
  border-radius: 16px;
  background: #fff;
  color: var(--blue)
}

.reg h2 {
  font: 700 clamp(26px, 3vw, 34px)/1.15 var(--display);
  margin-bottom: 10px
}

.reg p {
  color: var(--muted);
  line-height: 1.8;
  max-width: 64ch;
  margin: 0 0 10px
}

.reg b {
  color: var(--navy)
}

.promise {
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: #fff;
  text-align: center;
  padding: clamp(64px, 9vw, 112px) 0;
  margin-top: 64px
}

.promise h2 {
  font: 800 clamp(40px, 7vw, 84px)/1 var(--display);
  letter-spacing: -.04em;
  margin-bottom: 24px
}

.promise p {
  max-width: 56ch;
  margin: 0 auto 14px;
  font-size: 18px;
  line-height: 1.75;
  color: #ffffffe6
}

/* ---------- 21. V5 motion & delight ---------- */
/* Everything here is CSS-only motion (transform and opacity), paused when off-screen and switched off by reduced-motion. */
.hero,
.banner {
  position: relative;
  overflow: hidden
}

.hero .wrap,
.banner .wrap {
  position: relative;
  z-index: 2
}

.hero .wrap {
  padding-top: 118px
}

.hero:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--sky, transparent), transparent 70%);
  pointer-events: none
}

.greet {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 14px Poppins, sans-serif;
  letter-spacing: .03em;
  color: #ffffffe6;
  margin-bottom: 12px
}

/* prayer flags */
.flags {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1
}

.hero>.flags {
  height: 110px
}

footer {
  position: relative
}

footer>.flags {
  height: 60px
}

.f {
  transform-origin: 0 0;
  animation: flutter var(--t, 3s) ease-in-out var(--d, 0s) infinite alternate
}

@keyframes flutter {
  0% {
    transform: rotate(-5deg) skewX(-6deg)
  }

  50% {
    transform: rotate(2deg) skewX(4deg) scaleX(.88)
  }

  100% {
    transform: rotate(5deg) skewX(7deg) scaleX(.96)
  }
}

/* mountain ridges and mist */
.scene {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  pointer-events: none;
  z-index: 1
}

.banner .scene {
  height: 56px
}

.scene svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.scene.light path {
  fill: #fff
}

.scene.dark path {
  fill: var(--deep)
}

.scene path:nth-child(1) {
  opacity: .22;
  transform: translateY(calc(var(--sy, 0)*.08px))
}

.scene path:nth-child(2) {
  opacity: .5;
  transform: translateY(calc(var(--sy, 0)*.04px))
}

.scene path:nth-child(3) {
  opacity: 1
}

.scene.dark path:nth-child(1) {
  opacity: .3
}

.scene.dark path:nth-child(2) {
  opacity: .5
}

.scene.dark path:nth-child(3) {
  opacity: .8
}

.mist {
  position: absolute;
  bottom: 20px;
  left: -10%;
  width: 55%;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #ffffff70, transparent);
  filter: blur(10px);
  animation: drift 38s ease-in-out infinite alternate
}

.mist.m2 {
  left: 45%;
  bottom: 40px;
  opacity: .7;
  animation-duration: 52s;
  animation-direction: alternate-reverse
}

@keyframes drift {
  from {
    transform: translateX(-12%)
  }

  to {
    transform: translateX(18%)
  }
}

.banner .mist {
  display: none
}

.off .f,
.off .mist,
.off .fall b {
  animation-play-state: paused
}

/* snow in winter, rhododendron petals in spring */
.fall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1
}

.fall b {
  position: absolute;
  top: -20px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #fff;
  opacity: .55;
  animation: fall var(--t) linear var(--d) infinite
}

.fall.petal b {
  border-radius: 60% 0 60% 0;
  background: #ff8fb1;
  opacity: .65
}

@keyframes fall {
  to {
    transform: translate(50px, 640px) rotate(220deg)
  }
}

/* journey line on the package itinerary */
.journey {
  position: relative;
  padding-left: 38px
}

.journey:before {
  content: '';
  position: absolute;
  left: 11px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: repeating-linear-gradient(var(--line) 0 6px, transparent 6px 12px)
}

.journey:after {
  content: '';
  position: absolute;
  left: 11px;
  top: 14px;
  width: 2px;
  height: calc((100% - 28px)*var(--jp, 0));
  background: var(--blue)
}

.journey details {
  position: relative
}

.journey details:before {
  content: '';
  position: absolute;
  left: -33px;
  top: 19px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  z-index: 1;
  transition: background .3s, border-color .3s
}

.journey details.passed:before {
  background: var(--blue);
  border-color: var(--blue)
}

.jpin {
  position: absolute;
  z-index: 2;
  left: 12px;
  top: calc(14px + (100% - 28px)*var(--jp, 0));
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid #fff;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 45%, transparent);
  animation: ping 2s infinite
}

@keyframes ping {
  to {
    box-shadow: 0 0 0 12px transparent
  }
}

/* passport stamp after an enquiry */
.stamp {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  pointer-events: none
}

.stamp>div {
  transform: rotate(-9deg);
  border: 5px double var(--blue);
  color: var(--blue);
  background: #ffffffe8;
  border-radius: 16px;
  padding: 18px 32px;
  text-align: center;
  font: 800 30px/1.1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 24px 60px -20px #0008;
  animation: thud .5s cubic-bezier(.2, 1.4, .4, 1) both, fade .4s 2.4s forwards
}

.stamp small {
  display: block;
  font: 600 12px Poppins, sans-serif;
  letter-spacing: .18em;
  margin-top: 10px
}

@keyframes thud {
  from {
    transform: rotate(-9deg) scale(2.4);
    opacity: 0
  }

  to {
    transform: rotate(-9deg) scale(1);
    opacity: 1
  }
}

@keyframes fade {
  to {
    opacity: 0
  }
}

/* best time badges */
.best {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1fa855;
  color: #fff;
  font: 600 11px Poppins, sans-serif;
  padding: 5px 11px;
  border-radius: 999px
}

.best:before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.8s ease-in-out infinite
}

@keyframes pulse {
  50% {
    opacity: .35;
    transform: scale(.7)
  }
}

.now {
  font: 600 11px Poppins, sans-serif;
  font-style: normal;
  background: #1fa855;
  color: #fff;
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 8px;
  vertical-align: middle
}

/* card photo grows into the next page (browsers that support it) */
::view-transition-group(hero-photo) {
  animation-duration: .55s;
  animation-timing-function: var(--ease)
}

/* weather widget: a sky card that changes colour with the weather */
.wx {
  --a: #134a8c;
  --b: #2b7bc8;
  position: relative;
  overflow: hidden;
  color: #fff;
  border-radius: 22px;
  padding: 22px;
  display: grid;
  gap: 18px;
  background: linear-gradient(#0000001a, #0000001a), linear-gradient(150deg, var(--a), var(--b))
}

.wx[data-sky=cloud] {
  --a: #3f5a75;
  --b: #5f7d9a
}

.wx[data-sky=rain] {
  --a: #2a4059;
  --b: #466581
}

.wx[data-sky=storm] {
  --a: #23274a;
  --b: #444a7c
}

.wx[data-sky=snow] {
  --a: #4a6585;
  --b: #6a86a6
}

.wx[data-sky=fog] {
  --a: #556672;
  --b: #6b7d8a
}

.wx[data-sky=night] {
  --a: #0c1836;
  --b: #26407a
}

.wx-top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center
}

.wx-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.wx-unit {
  display: flex;
  border: 1px solid #ffffff55;
  border-radius: 999px;
  overflow: hidden
}

.wx button {
  border: 1px solid #ffffff44;
  background: #ffffff1f;
  color: #fff;
  font: 500 14px Poppins, sans-serif;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, color .2s
}

.wx-unit button {
  border: 0;
  border-radius: 0;
  padding: 8px 14px
}

.wx button:hover {
  background: #ffffff38
}

.wx button[aria-pressed=true] {
  background: #fff;
  color: var(--navy)
}

.wx button small {
  margin-left: 5px;
  font-size: 11px;
  opacity: .75
}

.wx-body {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 20px 28px;
  align-items: center;
  min-height: 132px
}

.wx-now {
  display: flex;
  align-items: center;
  gap: 16px
}

.wxi {
  width: 96px;
  height: 96px;
  flex: none;
  filter: drop-shadow(0 6px 10px #0003)
}

.wx-t {
  font: 800 64px/1 var(--display);
  letter-spacing: -.04em
}

.wx-c {
  font-size: 17px;
  font-weight: 600;
  margin-top: 4px
}

.wx-loc {
  font-size: 13px;
  opacity: .85;
  margin-top: 2px
}

.wx-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px
}

.wx-stats li {
  background: #ffffff1f;
  border-radius: 14px;
  padding: 12px 14px
}

.wx-stats span {
  display: block;
  font-size: 12px;
  opacity: .85
}

.wx-stats b {
  font: 700 18px var(--display)
}

.wx-days {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px
}

.wx-d {
  background: #ffffff1a;
  border-radius: 14px;
  padding: 12px 14px
}

.wx-dh {
  display: flex;
  justify-content: space-between;
  font-size: 13px
}

.wx-dh b {
  font-weight: 600
}

.wx-dh span {
  opacity: .85
}

.wx-dm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0
}

.wx-dm .wxi {
  width: 44px;
  height: 44px;
  filter: none
}

.wx-dm strong {
  font: 700 22px var(--display)
}

.wx-dm em {
  font-style: normal;
  opacity: .8;
  font-size: 15px
}

.wx-bar {
  display: block;
  height: 6px;
  border-radius: 6px;
  background: #ffffff2e;
  position: relative
}

.wx-bar u {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #8fd3f4, #ffd24d)
}

.wx-tip {
  grid-column: 1/-1;
  font-size: 14px;
  line-height: 1.5;
  background: #00000024;
  border-radius: 12px;
  padding: 12px 14px
}

.wx-tip b {
  margin-right: 6px
}

.wx-credit {
  font-size: 12px;
  opacity: .8
}

.wx-credit a {
  text-decoration: underline
}

.wx-err {
  grid-column: 1/-1
}

.wx-skel {
  grid-column: 1/-1;
  display: grid;
  gap: 10px
}

.wx-skel i {
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(90deg, #ffffff14, #ffffff30, #ffffff14) 0 0/200% 100%;
  animation: shine 1.4s linear infinite
}

@keyframes shine {
  to {
    background-position: -200% 0
  }
}

.wxi .ray {
  transform-origin: 32px 32px;
  animation: spin 28s linear infinite
}

.wxi .cl {
  animation: bob 6s ease-in-out infinite alternate
}

.wxi .drop {
  animation: drip 1.4s linear infinite
}

.wxi .drop:nth-child(2) {
  animation-delay: .45s
}

.wxi .drop:nth-child(3) {
  animation-delay: .9s
}

.wx-days .wxi * {
  animation: none
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes bob {
  to {
    transform: translateX(3px)
  }
}

@keyframes drip {
  from {
    transform: translateY(-4px);
    opacity: 0
  }

  30% {
    opacity: 1
  }

  to {
    transform: translateY(9px);
    opacity: 0
  }
}

.off .wxi .ray,
.off .wxi .cl,
.off .wxi .drop {
  animation-play-state: paused
}

/* ==========================================================================
   R. RESPONSIVE RULES
   ========================================================================== */


/* ----- @media(max-width:1024px) ----- */
@media(max-width:1024px) {

  /* About page */
  .why.three {
    grid-template-columns: 1fr 1fr
  }

  /* V3: home sections, keep exploring */
  .why,
  .exp {
    grid-template-columns: 1fr 1fr
  }

  /* Core: header, menu drawer, tab bar, home */
  .nav nav,
  .actions .btn {
    display: none
  }

  .nav {
    height: 64px
  }

  .nav .actions {
    margin-left: auto
  }

  .openmenu {
    display: block;
    background: none;
    border: 0;
    font-size: 26px;
    color: var(--navy);
    cursor: pointer;
    padding: 6px
  }

  .dests {
    display: none
  }

  .quick {
    display: flex;
    margin-top: -40px;
    position: relative;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 14px 32px -18px color-mix(in srgb, var(--navy) 40%, transparent);
    padding: 16px 8px;
    z-index: 999;
  }

  .hero {
    min-height: 440px;
    align-items: flex-start
  }

  .hero .wrap {
    padding: 44px 0 90px
  }

  .hero p {
    font-size: 15px
  }

  .pkgs {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px
  }

  .pkg img {
    height: 140px
  }

  .head h2 {
    font-size: 24px
  }

  .stats .wrap {
    grid-template-columns: 1fr 1fr;
    gap: 24px
  }

  .foot {
    grid-template-columns: 1fr 1fr;
    gap: 28px
  }

  .foot>div:first-child {
    grid-column: span 2
  }

  #drawer {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: fixed;
    inset: 0;
    z-index: 50;
    padding: 22px 26px;
    color: #fff;
    background: linear-gradient(180deg, var(--navy), var(--blue2));
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .35s var(--ease), visibility 0s .35s;
    overflow: auto
  }

  #drawer.open {
    visibility: visible;
    transform: none;
    transition-delay: 0s
  }

  #drawer .logo {
    color: #fff
  }

  #drawer .logo small {
    color: #b6c6d8
  }

  #drawer nav {
    display: flex;
    flex-direction: column
  }

  #drawer nav a {
    padding: 14px 0;
    border-bottom: 1px solid #ffffff1c;
    font-size: 17px;
    font-weight: 500
  }

  #drawer .btn {
    background: #1fa855;
    margin-top: auto
  }

  #close {
    align-self: flex-end;
    background: none;
    border: 0;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    order: -1
  }

  /* Packages page */
  .pkgs.three {
    grid-template-columns: repeat(2, 1fr)
  }

  .pkgs.three .pkg img {
    height: 140px
  }

  /* Destinations & hotels pages */
  .dgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 14px
  }

  .dtile img {
    height: 170px
  }

  /* Gallery, reviews, contact & legal pages */
  .gal {
    grid-template-columns: repeat(2, 1fr)
  }

  .gal img {
    height: 180px
  }

  /* Blog: filters, sidebar, likes */
  .blog {
    grid-template-columns: 1fr
  }

  .side {
    position: static;
    grid-template-columns: 1fr 1fr
  }

  .widget.dark {
    grid-column: span 2
  }

  /* Package detail page */
  .pkg-layout {
    grid-template-columns: 1fr;
    gap: 0
  }

  .pkg-side {
    position: static;
    order: -1;
    padding-top: 28px
  }

  .psub {
    top: 64px
  }

  .psec {
    scroll-margin-top: 130px
  }

  /* V5 */
  .hero .wrap {
    padding-top: 104px
  }
}

/* ----- @media(max-width:900px) ----- */
@media(max-width:900px) {

  /* About page */
  .split {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .founder {
    grid-template-columns: 200px 1fr
  }

  /* V3: stories */
  .revs.three {
    grid-template-columns: 1fr
  }

  /* Shared page banner, about page, plan band */
  .story,
  .mission {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .photo img {
    height: 320px
  }

  .mission>img {
    height: 260px
  }

  .planbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px
  }

  /* Destinations & hotels pages */
  .hotel .photo {
    order: -1
  }

  .hotel .photo img {
    height: 280px
  }

  /* Gallery, reviews, contact & legal pages */
  .revs,
  .contact {
    grid-template-columns: 1fr
  }

  /* V5 */
  .wx-body {
    grid-template-columns: 1fr
  }
}

/* ----- @media(max-width:760px) ----- */
@media(max-width:760px) {

  /* About page */
  .why.three {
    grid-template-columns: 1fr
  }

  .founder {
    grid-template-columns: 1fr
  }

  .mono {
    max-width: 180px;
    font-size: 52px
  }

  .reg {
    flex-direction: column;
    gap: 16px
  }

  /* V3: blog post page */
  .post-banner {
    min-height: 300px
  }

  .lead-img {
    height: 230px
  }

  .callout {
    flex-direction: column;
    align-items: flex-start
  }

  .pnav {
    grid-template-columns: 1fr
  }

  .pnav>:nth-child(2) {
    text-align: left
  }

  /* V3: finder, theme picker, back to top */
  .why {
    grid-template-columns: 1fr
  }

  .finder {
    grid-template-columns: 1fr 1fr
  }

  .finder label:nth-child(-n+4),
  .finder .btn {
    grid-column: 1/-1
  }

  .themes {
    bottom: 78px;
    left: 12px
  }

  .totop {
    bottom: 138px;
    right: 14px
  }

  .alt {
    padding: 48px 0;
    margin-top: 44px
  }

  .pkgs.two img {
    height: 140px
  }

  /* Core: header, menu drawer, tab bar, home */
  body {
    padding-bottom: 64px
  }

  .wrap {
    width: calc(100% - 32px)
  }

  .hero h1 {
    font-size: 34px
  }

  .btns .ghost {
    display: none
  }

  .block {
    padding-top: 44px
  }

  .head .more {
    font-size: 13px
  }

  .head p {
    display: none
  }

  .stats {
    margin-top: 44px
  }

  .cta {
    padding: 48px 20px
  }

  .legal {
    flex-direction: column
  }

  .legal a {
    margin: 0 18px 0 0
  }

  .floatwa {
    bottom: 78px;
    right: 14px;
    width: 50px;
    height: 50px
  }

  .tabbar {
    display: flex;
    position: fixed;
    inset: auto 0 0;
    z-index: 25;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px))
  }

  .tabbar a,
  .tabbar button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font: 500 11px Poppins;
    color: var(--muted);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0
  }

  .tabbar button {
    font-size: 20px;
    line-height: 22px
  }

  .tabbar button span {
    font-size: 11px;
    line-height: 1.4
  }

  .tabbar svg {
    width: 22px;
    height: 22px
  }

  .tabbar .on {
    color: var(--blue)
  }

  /* Shared page banner, about page, plan band */
  .banner {
    min-height: 210px
  }

  .banner .wrap {
    padding: 70px 0 26px
  }

  .facts {
    grid-template-columns: 1fr 1fr;
    gap: 26px 0;
    padding: 26px 8px
  }

  .facts div+div {
    border: 0
  }

  .planbar .btn {
    width: 100%
  }

  /* Packages page */
  .tabs {
    width: 100%;
    margin-right: 0
  }

  .filters input,
  .filters select {
    flex: 1 1 100%;
    min-width: 0
  }

  /* Blog: base list */
  .post {
    grid-template-columns: 110px 1fr;
    gap: 14px;
    padding: 20px 0
  }

  .post img {
    height: 104px
  }

  .post h2 {
    font-size: 16px
  }

  .post time {
    margin: 4px 0 8px;
    font-size: 13px
  }

  /* Package detail page */
  .pfacts {
    grid-template-columns: 1fr 1fr;
    padding: 18px
  }

  .pgal {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 130px)
  }

  .pgal img:first-child {
    grid-column: span 2;
    grid-row: auto
  }

  .hl,
  .incexc {
    grid-template-columns: 1fr
  }

  .shead {
    align-items: flex-start
  }

  /* V5 */
  .hero .wrap {
    padding-top: 100px
  }

  .banner .scene {
    height: 44px
  }

  .progress {
    height: 10px
  }

  .wx {
    padding: 16px
  }

  .wx-t {
    font-size: 52px
  }

  .wxi {
    width: 76px;
    height: 76px
  }

  .wx-stats {
    grid-template-columns: repeat(2, 1fr)
  }

  .wx-dh span {
    display: none
  }

  .wx-dm {
    flex-wrap: wrap;
    gap: 4px 8px
  }

  .wx-dm .wxi {
    width: 36px;
    height: 36px
  }

  .wx-dm strong {
    font-size: 18px
  }

  .stamp>div {
    font-size: 22px;
    padding: 14px 22px
  }
}

/* ----- @media(max-width:700px) ----- */
@media(max-width:700px) {

  /* Blog: filters, sidebar, likes */
  .blog .post {
    grid-template-columns: 110px 1fr
  }

  .side {
    grid-template-columns: 1fr
  }

  .widget.dark {
    grid-column: auto
  }

  .acts {
    gap: 12px
  }
}

/* ----- @media(max-width:560px) ----- */
@media(max-width:560px) {

  /* Gallery, reviews, contact & legal pages */
  .cform .two {
    grid-template-columns: 1fr
  }

  .cform {
    padding: 22px 18px
  }

  .cform .btn {
    width: 100%
  }

  .lb .pv {
    left: 8px
  }

  .lb .nx {
    right: 8px
  }
}

/* ----- @media(prefers-reduced-motion:reduce) ----- */
@media(prefers-reduced-motion:reduce) {

  /* Core: header, menu drawer, tab bar, home */
  html {
    scroll-behavior: auto
  }

  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important
  }
}



/* ---------- 22. Pagination (numbered, trail and load-more) ---------- */
.pager{display:grid;justify-items:center;gap:14px;margin:44px 0 0}
.pager-info{font-size:14px;color:var(--muted)}
.pager-info b{color:var(--navy);font-weight:600}
.pager ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.pager li{position:relative;display:flex}
.pager li>a,.pager li>span{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--navy);font:600 15px Poppins,sans-serif;transition:background .2s,color .2s,border-color .2s,transform .2s}
.pager li>a:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.pager li>[aria-current=page]{background:linear-gradient(135deg,var(--blue),var(--blue2));border-color:transparent;color:#fff;box-shadow:0 10px 20px -10px var(--blue)}
.pager .gap>span{border:0;background:none;min-width:24px;padding:0;color:var(--muted)}
.pager .nav>*{padding:0 18px}
.pager .dis>span{opacity:.4;cursor:not-allowed}
.pager .prev>:first-child:before,.pager .next>:first-child:after{content:'';width:8px;height:8px;border:solid currentColor}
.pager .prev>:first-child:before{border-width:0 0 2px 2px;transform:rotate(45deg);margin-right:2px}
.pager .next>:first-child:after{border-width:2px 2px 0 0;transform:rotate(45deg);margin-left:2px}
.pager .count{display:none}
.pager .count>span{border:0;background:none;color:var(--muted);font-weight:500}
/* trail: pages are stops on a dotted route, the part you have walked turns solid */
.pager.trail ul{gap:22px}
.pager.trail li:not(.nav)>*{width:44px;padding:0}
.pager.trail li+li:before{content:'';position:absolute;right:100%;top:50%;width:22px;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 8px)}
.pager.trail li.done+li:before{background:var(--blue)}
.pager.trail li.done>a{border-color:var(--blue);color:var(--blue)}
.pager.trail .nav:before,.pager.trail .prev+li:before{display:none}
.pager.trail li>[aria-current=page]{animation:ping 2s infinite}
/* load more */
.pager.more .bar{display:block;width:min(320px,100%);height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.pager.more .bar u{display:block;height:100%;width:var(--w,25%);border-radius:6px;background:linear-gradient(90deg,var(--blue),var(--blue2));transition:width .5s var(--ease)}

.places{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.places a,.places span{display:inline-block;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font:500 14px Poppins,sans-serif;color:var(--navy);transition:border-color .2s,color .2s}
.places a:hover{border-color:var(--blue);color:var(--blue)}
.cardcta{display:flex;flex-direction:column;justify-content:center;gap:10px;border:2px dashed var(--line);border-radius:14px;padding:26px;background:var(--pale)}
.cardcta h3{font:700 20px/1.2 var(--display)}
.cardcta p{color:var(--muted);font-size:15px}
.cardcta .btn{align-self:flex-start;margin-top:6px}

/* ----- @media(max-width:560px) ----- */
@media(max-width:560px){
/* Gallery, reviews, contact & legal pages */
.cform .two{grid-template-columns:1fr}.cform{padding:22px 18px}.cform .btn{width:100%}.lb .pv{left:8px}.lb .nx{right:8px}
/* Pagination: show "Page 2 of 8" between Previous and Next */
.pager .pn{display:none}
.pager .count{display:flex}
.pager ul{flex-wrap:nowrap;gap:10px}
.pager .nav>*{padding:0 14px}
.pager.trail li:before{display:none}
}