/**
 * Le Sween Holidays LLP — Luxury Enhancement Layer
 * Additive styles only. Loaded after main.css so the original
 * Lestora template structure, typography and color system stay intact.
 * Adds: gold accent system, shimmer/glow buttons, glass panels,
 * tilt cards, animated dividers, marquee strip, floating WhatsApp CTA.
 */
/* Reduce bottom padding for the Destinations section */

:root{
  --ls-gold: #8ea695;
  --ls-gold-light: #b7c7bc;
  --ls-deep: #002d3f;
  --ls-deep-2: #001a26;
  --ls-jade: #8ea695;
}
/* Force override the section padding */
section.section.ls-dest-detail {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

section.featured-destinations.section {
  padding-bottom: 5px !important;
}

/* Also target by ID for maximum specificity */
section#destinations-grid.section {
  padding-bottom: 5px !important;
}

section#beijing.section,
section#shanghai.section,
section#zhangjiajie.section,
section#guilin-yangshuo.section,
section#guangzhou.section,
section#shenzhen.section,
section#chongqing.section,
section#harbin.section,
section#hainan-sanya.section,
section#xian.section,
section#chengdu.section,
section#hangzhou.section,
section#suzhou.section,
section#nanjing.section,
section#yunnan.section,
section#tibet.section,
section#macau.section,
section#hong-kong.section {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
/* ---------- Luxury section label ---------- */
.ls-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--nav-font);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ls-gold);
  margin-bottom: 14px;
}
.ls-eyebrow::before{
  content:"";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ls-gold));
}
.ls-eyebrow::after{
  content:"";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--ls-gold), transparent);
}

.ls-heading-underline{
  position: relative;
  display:block;
  padding-bottom: 14px;
}
.ls-heading-underline::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  height:3px; width:70px;
  background: linear-gradient(90deg, var(--ls-gold), var(--ls-jade));
  border-radius: 3px;
  transform-origin:left center;
  transform: scaleX(0.4);
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.ls-heading-underline.in-view::after,
section.section:hover .ls-heading-underline::after{
  transform: scaleX(1);
}

/* ---------- Buttons ---------- */
.ls-btn-gold{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 50px;
  background: linear-gradient(120deg, var(--ls-gold) 0%, var(--ls-gold-light) 45%, var(--ls-gold) 100%);
  background-size: 220% 100%;
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: .3px;
  overflow: hidden;
  box-shadow: 0 10px 30px -10px rgba(142,166,149,.65);
  transition: background-position .8s ease, transform .3s ease, box-shadow .3s ease;
}
.ls-btn-gold:hover{
  background-position: 100% 0;
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -8px rgba(142,166,149,.8);
  color: #ffffff !important;
}
.ls-btn-gold::before{
  content:"";
  position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.65), transparent);
  transform: skewX(-20deg);
  animation: ls-shimmer 3.2s ease-in-out infinite;
}
@keyframes ls-shimmer{
  0%{ left:-60%; }
  55%{ left:130%; }
  100%{ left:130%; }
}

.ls-btn-gold.ls-btn-square{
  border-radius: 12px;
  margin-top: 22px;
}

.ls-btn-outline-gold{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 13px 30px;
  border-radius: 50px;
  border: 1px solid var(--ls-gold);
  color: #ffffff !important;
  font-weight: 600;
  transition: all .35s ease;
  background: var(--ls-gold);
}
.ls-btn-outline-gold:hover{
  background: transparent;
  border-color: var(--ls-gold);
  color: var(--ls-gold) !important;
  transform: translateY(-3px);
}

/* ---------- Glass panel ---------- */
.ls-glass{
  position: relative;
  background: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 20px;
}

/* ---------- Tilt / lift hover cards ---------- */
.ls-tilt-card{
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
  will-change: transform;
}
.ls-tilt-card:hover{
  transform: translateY(-10px) rotateX(2deg) rotateZ(0.2deg) scale(1.015);
  box-shadow: 0 30px 60px -20px rgba(0,45,63,.45);
}

/* Force every photo tagged .ls-tilt-card into the same box, regardless of
   whether the source photo is landscape or portrait, so sections never
   look mismatched/misaligned next to each other. */
img.ls-tilt-card{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

/* ---------- Gold ring badge ---------- */
.ls-badge-ring{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px; height:64px;
  border-radius:50%;
  border: 1.5px dashed var(--ls-gold);
  color: var(--ls-gold);
  font-size: 22px;
  animation: ls-spin-slow 14s linear infinite;
}
@keyframes ls-spin-slow{ to{ transform: rotate(360deg); } }

/* ---------- Marquee strip (destinations / trust bar) ---------- */
.ls-marquee{
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 18px 0;
}
.ls-marquee .ls-marquee-track{
  display: flex;
  gap: 48px;
  width: max-content;
  animation: ls-marquee-scroll 32s linear infinite;
}
.ls-marquee:hover .ls-marquee-track{ animation-play-state: paused; }
.ls-marquee span{
  font-family: var(--heading-font);
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
  display:flex;
  align-items:center;
  gap:14px;
}
.ls-marquee span i{ color: var(--ls-gold); font-size: 8px; }
@keyframes ls-marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------- Process / Journey ribbon (ARRIVE-STAY-TRAVEL...) ---------- */
.ls-journey{
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  counter-reset: ls-step;
}
.ls-journey-step{
  flex: 1 1 150px;
  position: relative;
  text-align:center;
  padding: 30px 14px;
  counter-increment: ls-step;
}
.ls-journey-step::before{
  content: counter(ls-step,decimal-leading-zero);
  display:block;
  font-family: var(--heading-font);
  font-weight:800;
  font-size: 13px;
  letter-spacing:2px;
  color: var(--ls-gold);
  margin-bottom: 10px;
}
.ls-journey-step i{
  font-size: 30px;
  color: var(--ls-jade);
  margin-bottom: 12px;
  display:block;
  transition: transform .4s ease;
}
.ls-journey-step:hover i{ transform: translateY(-6px) scale(1.08); }
.ls-journey-step h5{ color:#fff; font-size:16px; margin-bottom:6px; }
.ls-journey-step p{ color: rgba(255,255,255,.7); font-size:13.5px; margin:0; }
.ls-journey-step:not(:last-child)::after{
  content: "";
  position: absolute;
  right: -1px; top: 44px;
  width: 1px; height: calc(100% - 60px);
  background: linear-gradient(180deg, transparent, rgba(142,166,149,.5), transparent);
}
@media (max-width: 991px){
  .ls-journey-step:not(:last-child)::after{ display:none; }
}

/* ---------- Accordion-style destination detail panels ---------- */
.ls-dest-detail{
  scroll-margin-top: 120px;
}
.ls-attr-pill{
  display:inline-block;
  padding: 7px 16px;
  margin: 0 8px 8px 0;
  border-radius: 30px;
  font-size: 13px;
  background: rgba(142,166,149,.12);
  border: 1px solid rgba(142,166,149,.35);
  color: var(--default-color);
  transition: all .3s ease;
}
.ls-attr-pill:hover{
  background: var(--ls-jade);
  color:#fff;
  transform: translateY(-2px);
  border-color: var(--ls-jade);
}
.dark-background .ls-attr-pill{
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}

/* ---------- More to Explore — polished card grid ---------- */
.ls-explore-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 991px){
  .ls-explore-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px){
  .ls-explore-grid{ grid-template-columns: 1fr; }
}
.ls-explore-item{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px 22px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(142,166,149,.16);
  box-shadow: 0 6px 18px rgba(0,45,63,.06);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  overflow: hidden;
}
.ls-explore-item::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ls-gold), var(--ls-gold-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.ls-explore-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(0,45,63,.14);
  border-color: rgba(142,166,149,.4);
}
.ls-explore-item:hover::before{ transform: scaleX(1); }
.ls-explore-item .ls-explore-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ls-jade), transparent 88%);
  color: var(--ls-jade);
  font-size: 20px;
  transition: all .35s ease;
}
.ls-explore-item:hover .ls-explore-icon{
  background: var(--ls-jade);
  color: #fff;
  transform: rotate(-6deg) scale(1.05);
}
/* Backward-compat: older markup places the icon directly, not inside .ls-explore-icon */
.ls-explore-item > i{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ls-jade), transparent 88%);
  color: var(--ls-jade);
  font-size: 19px;
  transition: all .35s ease;
}
.ls-explore-item:hover > i{
  background: var(--ls-jade);
  color: #fff;
  transform: rotate(-6deg) scale(1.05);
}
.ls-explore-item .ls-explore-text{ min-width: 0; }
.ls-explore-item h6{
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--heading-color);
}
.ls-explore-item p{
  font-size: 13.75px;
  line-height: 1.6;
  margin: 0;
  color: var(--default-color);
  opacity: .82;
}
.dark-background .ls-explore-item{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  box-shadow: none;
}
.dark-background .ls-explore-item:hover{
  background: rgba(255,255,255,.07);
  box-shadow: 0 18px 34px rgba(0,0,0,.25);
}
.dark-background .ls-explore-item h6{ color: #fff; }
.dark-background .ls-explore-item p{ color: rgba(255,255,255,.75); }

/* ---------- Our Canton Fair Services — modern card grid ---------- */
.differentiators-area{
  padding-top: 3.5rem;
  margin-top: 1rem;
  border-top: 1px solid rgba(142,166,149,.22);
}
.differentiators-area .diff-header{
  margin-bottom: 3rem;
}
.differentiators-area .diff-header h3{
  font-size: 2.1rem;
  font-weight: 700;
  margin-top: .5rem;
  color: var(--heading-color);
}
@media (max-width: 768px){
  .differentiators-area .diff-header h3{ font-size: 1.65rem; }
}
.differentiators-area .diff-card{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  height: 100%;
  padding: 1.6rem 1.5rem;
  border-radius: 16px;
  background: linear-gradient(150deg, #ffffff 0%, #f4f8f6 100%);
  border: 1px solid rgba(142,166,149,.18);
  box-shadow: 0 8px 22px rgba(0,45,63,.07);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.differentiators-area .diff-card::after{
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ls-gold), transparent 75%), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
}
.differentiators-area .diff-card:hover{
  transform: translateY(-7px) scale(1.015);
  box-shadow: 0 20px 40px rgba(0,45,63,.16);
  border-color: var(--ls-gold);
}
.differentiators-area .diff-card:hover::after{ opacity: 1; }
.differentiators-area .diff-card .diff-icon{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--ls-jade), var(--ls-deep));
  color: #fff;
  font-size: 1.3rem;
  box-shadow: 0 6px 14px rgba(142,166,149,.35);
  transition: transform .35s ease;
}
.differentiators-area .diff-card:hover .diff-icon{
  transform: rotate(-8deg) scale(1.08);
}
.differentiators-area .diff-card .diff-body h4{
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.35;
  margin: 0;
  color: var(--heading-color);
}
@media (max-width: 768px){
  .differentiators-area .diff-card{ padding: 1.3rem 1.2rem; }
}
.dark-background .differentiators-area .diff-card{
  background: linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.12);
}
.dark-background .differentiators-area .diff-card .diff-body h4{ color: #fff; }

/* ---------- Floating WhatsApp CTA ---------- */
.ls-whatsapp-float{
  position: fixed;
  right: 26px;
  bottom: 96px;
  z-index: 99998;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg,#25D366,#1aa851);
  color:#fff !important;
  font-size: 28px;
  box-shadow: 0 10px 26px -6px rgba(37,211,102,.65);
  transition: transform .3s ease;
}
.ls-whatsapp-float:hover{ transform: scale(1.08); color:#fff !important; }
.ls-whatsapp-float::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border: 2px solid #25D366;
  animation: ls-pulse-ring 2.2s ease-out infinite;
}
@keyframes ls-pulse-ring{
  0%{ transform: scale(1); opacity:.7; }
  100%{ transform: scale(1.9); opacity:0; }
}

/* ---------- Luxury page hero overlay tint (keeps template bg-image usage) ---------- */
.ls-hero-tint::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,26,38,.55), rgba(0,26,38,.88));
  z-index: 0;
}
.ls-hero-tint .container{ z-index: 1; }

/* ---------- Simple fade/scale-in utility (pairs with AOS but also standalone) ---------- */
.ls-float-slow{ animation: ls-float 6s ease-in-out infinite; }
@keyframes ls-float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* ---------- Divider ---------- */
.ls-divider{
  display:flex;
  align-items:center;
  gap:16px;
  margin: 10px 0 30px;
}
.ls-divider i{ color: var(--ls-gold); font-size: 18px; }
.ls-divider .line{ flex:1; height:1px; background: linear-gradient(90deg, rgba(142,166,149,.5), transparent); }

/* ---------- Contact/Inquiry gold-outline form focus ---------- */
.ls-form .form-control,
.ls-form .form-select{
  border-radius: 10px;
  border: 1px solid rgba(0,45,63,.15);
  padding: 12px 14px;
}
.ls-form .form-control:focus,
.ls-form .form-select:focus{
  border-color: var(--ls-gold);
  box-shadow: 0 0 0 4px rgba(142,166,149,.15);
}
.ls-form label{
  font-weight:600;
  font-size: 13.5px;
  margin-bottom:6px;
  color: var(--heading-color);
}

/* ---------- Footer-adjacent CTA band: matches header navy ---------- */
.ls-cta-blue{
  --background-color: #002d3f;
  --surface-color: #073a52;
  position: relative;
  overflow: hidden;
}
.ls-cta-blue::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 140% at 15% 20%, rgba(142,166,149,.16), transparent 60%),
    radial-gradient(50% 120% at 85% 100%, rgba(142,166,149,.12), transparent 60%);
  pointer-events:none;
}
.ls-cta-blue .container{ position:relative; z-index:1; }

/* ---------- Package category cards (tours.html) ---------- */
.ls-pkg-section{
  scroll-margin-top: 120px;
}
.ls-pkg-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  border-radius:50%;
  background: rgba(142,166,149,.12);
  border: 1.5px solid rgba(142,166,149,.4);
  color: var(--ls-gold);
  font-family: var(--heading-font);
  font-weight:800;
  font-size:16px;
  flex-shrink:0;
}
.ls-pkg-check-list{
  list-style:none;
  margin: 18px 0 8px;
  padding:0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px 18px;
}
.ls-pkg-check-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size: 14.5px;
  color: color-mix(in srgb, var(--default-color), transparent 8%);
  line-height:1.4;
}
.ls-pkg-check-list li i{
  color: var(--ls-gold);
  font-size:16px;
  margin-top:2px;
  flex-shrink:0;
}
@media (max-width: 575px){
  .ls-pkg-check-list{ grid-template-columns: 1fr; }
}
.ls-pkg-pillbar{
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px dashed rgba(142,166,149,.35);
}
.ls-pkg-pillbar .pillbar-label{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  margin-bottom: 10px;
}
@media (max-width: 575px){
  .ls-whatsapp-float{ width:52px; height:52px; font-size:24px; right:16px; bottom:80px; }
}

/* ==========================================================
   Real Traveller Stories — Auto-Sliding Testimonial Carousel
   ========================================================== */
.ls-stories-section{
  position: relative;
  background-color: #f4f6f5;
  background-image:
    radial-gradient(circle, rgba(142,166,149,.16) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  overflow: hidden;
  padding-top: 70px;
  padding-bottom: 80px;
}
.ls-stories-swiper{
  padding: 46px 6px 60px;
  overflow: visible;
}
.ls-stories-swiper .swiper-wrapper{
  align-items: stretch;
}
.ls-story-card{
  position: relative;
  height: 100%;
  border-radius: 22px;
  padding: 56px 30px 34px;
  text-align: center;
  background: linear-gradient(165deg, #5c8577 0%, #3d6152 65%, #2f4d40 100%);
  box-shadow: 0 18px 34px -14px rgba(31,58,48,.45);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
.ls-story-card::before{
  content:"";
  position:absolute;
  inset: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  pointer-events: none;
}
.swiper-slide-active .ls-story-card{
  transform: translateY(-6px);
  box-shadow: 0 26px 46px -16px rgba(31,58,48,.55);
}
.ls-story-photo{
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 4px solid #f4f6f5;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.35);
  overflow: hidden;
  background: #cfe0d7;
}
.ls-story-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ls-story-headline{
  font-family: var(--heading-font);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 15.5px;
  color: #ffffff;
  margin-bottom: 14px;
}
.ls-story-rating{
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ls-gold-light);
}
.ls-story-text{
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255,255,255,.82);
  margin-bottom: 20px;
  min-height: 128px;
}
.ls-story-name{
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
  margin-bottom: 4px;
}
.ls-story-source{
  display: block;
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--ls-gold-light);
}
.ls-stories-swiper .swiper-pagination{
  bottom: 8px;
}
.ls-stories-swiper .swiper-pagination-bullet{
  width: 8px;
  height: 8px;
  background: #c3cfc9;
  opacity: 1;
}
.ls-stories-swiper .swiper-pagination-bullet-active{
  background: var(--ls-gold);
  width: 22px;
  border-radius: 5px;
}
.ls-stories-autoplay-toggle{
  position: absolute;
  left: 8px;
  bottom: 4px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--ls-gold);
  font-size: 16px;
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform .3s ease, background .3s ease;
  z-index: 5;
}
.ls-stories-autoplay-toggle:hover{
  transform: scale(1.08);
  background: var(--ls-gold);
  color: #fff;
}
.ls-stories-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(142,166,149,.35);
  background: #ffffff;
  color: var(--ls-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  z-index: 5;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.ls-stories-nav:hover{
  background: var(--ls-gold);
  color: #fff;
  transform: translateY(-50%) scale(1.06);
}
.ls-stories-nav.ls-stories-prev{ left: -6px; }
.ls-stories-nav.ls-stories-next{ right: -6px; }
@media (max-width: 991px){
  .ls-stories-nav{ display: none; }
}
@media (max-width: 575px){
  .ls-story-card{ padding: 52px 22px 30px; }
  .ls-story-text{ min-height: 0; }
}

/* ---------- Real Traveller Stories — filter pills ---------- */
.ls-stories-filters{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
}
.ls-stories-filters li{
  padding: 9px 20px;
  font-family: var(--nav-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--default-color);
  background: #ffffff;
  border: 1px solid rgba(142,166,149,.35);
  border-radius: 30px;
  cursor: pointer;
  transition: all .3s ease;
  user-select: none;
}
.ls-stories-filters li:hover{
  border-color: var(--ls-gold);
  color: var(--ls-gold);
}
.ls-stories-filters li.ls-filter-active{
  background: var(--ls-gold);
  border-color: var(--ls-gold);
  color: #ffffff;
  box-shadow: 0 8px 18px -8px rgba(142,166,149,.6);
}

/* ---------- Trip-type pill on each card ---------- */
.ls-story-pill{
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 30px;
}

/* ---------- Location / destination meta ---------- */
.ls-story-meta{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255,255,255,.2);
}
.ls-story-meta span{
  font-size: 12.5px;
  color: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ls-story-meta i{
  color: var(--ls-gold-light);
  font-size: 13px;
}
@media (max-width: 575px){
  .ls-stories-filters li{ padding: 7px 14px; font-size: 12px; }
}

/* =========================================================
   Brand Positioning Highlight Strip (Your Trip. Your Choice.)
   ========================================================= */
.ls-brand-strip{
  margin-top: 3.5rem;
  padding: 3rem 2rem;
  border-radius: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ls-deep) 0%, var(--ls-deep-2) 100%);
  border: 1px solid rgba(142,166,149,.35);
  box-shadow: 0 24px 50px rgba(0,26,38,.35);
}
.ls-brand-strip::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--ls-gold), transparent 85%), transparent 55%),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--ls-gold), transparent 88%), transparent 55%);
  pointer-events: none;
}
.ls-brand-strip-name{
  position: relative;
  display: block;
  font-family: var(--heading-font);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: #ffffff;
}
.ls-brand-strip-tagline{
  position: relative;
  display: block;
  margin-top: .4rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--ls-gold-light);
}
.ls-brand-strip-sub{
  position: relative;
  margin: 1.1rem auto 0;
  max-width: 560px;
  font-size: 1.3rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.4;
}
.ls-brand-strip-pills{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: 1.5rem 0 1.6rem;
}
.ls-brand-strip-pills span{
  padding: .4rem 1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .3px;
  color: #ffffff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(142,166,149,.5);
  border-radius: 30px;
}
.ls-brand-strip-close{
  position: relative;
  margin: 0;
  font-size: 1rem;
  color: rgba(255,255,255,.82);
}
.ls-brand-strip-close strong{ color: var(--ls-gold-light); }
@media (max-width: 768px){
  .ls-brand-strip{ padding: 2.2rem 1.2rem; }
  .ls-brand-strip-sub{ font-size: 1.08rem; }
}

/* =========================================================
   Special China Travel Experiences — homepage teaser section
   ========================================================= */
.special-experiences-teaser{
  position: relative;
  overflow: hidden;
}
.se-teaser-swiper{
  padding-bottom: 10px;
}
.se-teaser-swiper .swiper-wrapper{
  align-items: stretch;
}
.se-card{
  position: relative;
  display: block;
  height: 340px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,45,63,.12);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.se-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 24px 46px rgba(0,45,63,.24);
}
.se-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.se-card:hover img{ transform: scale(1.08); }
.se-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0,26,38,.92) 100%);
}
.se-card-body{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1.3rem 1.3rem 1.5rem;
}
.se-card-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  margin-bottom: .7rem;
  background: color-mix(in srgb, var(--ls-gold), transparent 20%);
  color: #ffffff;
  font-size: 1.1rem;
}
.se-card-body h4{
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: .3rem;
}
.se-card-body p{
  color: rgba(255,255,255,.82);
  font-size: .85rem;
  margin: 0;
  line-height: 1.45;
}
.se-teaser-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--ls-gold);
  color: var(--ls-gold);
  background: var(--surface-color);
  cursor: pointer;
  transition: all .3s ease;
  z-index: 5;
}
.se-teaser-nav:hover{ background: var(--ls-gold); color: #fff; }
.se-teaser-nav.swiper-button-disabled{ opacity: .35; cursor: default; }

/* =========================================================
   Special Experiences page — shared components
   ========================================================= */
.se-page-hero{
  padding: 150px 0 70px;
  background: linear-gradient(135deg, var(--ls-deep) 0%, var(--ls-deep-2) 100%);
  text-align: center;
}
.se-page-hero h1{
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  margin: .6rem 0 1rem;
}
.se-page-hero p{
  color: rgba(255,255,255,.8);
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.05rem;
}
@media (max-width: 768px){
  .se-page-hero h1{ font-size: 1.7rem; }
}

.se-section{ padding: 80px 0; }
.se-section.alt-bg{ background: var(--ls-deep); }
.se-section.alt-bg .ls-eyebrow,
.se-section.alt-bg h2{ color: #ffffff; }
.se-section.alt-bg .section-sub{ color: rgba(255,255,255,.75); }

.se-route-card{
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.1rem 1.3rem;
  border-radius: 14px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  box-shadow: 0 6px 18px rgba(0,45,63,.06);
  height: 100%;
  transition: all .3s ease;
}
.se-route-card:hover{ transform: translateY(-4px); border-color: var(--ls-gold); }
.se-route-card .se-route-city{
  font-weight: 700;
  font-size: .95rem;
  color: var(--heading-color);
}
.se-route-card i.bi-arrow-right{ color: var(--ls-gold); font-size: 1.1rem; }

.se-service-list{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem 1.2rem;
}
@media (max-width: 575px){ .se-service-list{ grid-template-columns: 1fr; } }
.se-service-list li{
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .95rem;
  color: var(--default-color);
  line-height: 1.5;
}
.se-service-list li i{
  color: var(--ls-gold);
  margin-top: 3px;
  flex-shrink: 0;
}

.se-tag-grid{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.se-tag-grid span{
  padding: .5rem 1.1rem;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 30px;
  background: color-mix(in srgb, var(--ls-gold), transparent 90%);
  color: var(--heading-color);
  border: 1px solid color-mix(in srgb, var(--ls-gold), transparent 65%);
}

.se-tabs .nav-link{
  border: none;
  border-radius: 30px;
  padding: .7rem 1.4rem;
  margin: 0 .3rem .6rem 0;
  font-weight: 600;
  font-size: .92rem;
  color: var(--default-color);
  background: var(--surface-color);
  box-shadow: 0 3px 12px rgba(0,45,63,.08);
}
.se-tabs .nav-link.active{
  background: linear-gradient(135deg, var(--ls-jade), var(--ls-deep));
  color: #ffffff;
}
.se-tab-panel{
  padding: 2rem;
  border-radius: 18px;
  background: var(--surface-color);
  box-shadow: 0 10px 30px rgba(0,45,63,.08);
}
.se-tab-panel h3{
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: .4rem;
  color: var(--heading-color);
}
.se-tab-panel .se-tab-intro{
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 1.5rem;
}

/* ---------- China Travel & Business Support Partner Band ---------- */
html, body{
  overflow-x: hidden;
}
.ls-partner-band{
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 90px 20px;

}
.ls-partner-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,26,38,.82) 0%, rgba(0,26,38,.70) 45%, rgba(0,26,38,.88) 100%);
  z-index: 1;
}
.ls-partner-band .container{ z-index: 2; }
.ls-partner-content{
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.ls-partner-brand{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.ls-partner-name{
  color: var(--ls-gold-light);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: .82rem;
  text-transform: uppercase;
}
.ls-partner-divider{
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.35);
}
.ls-partner-tagline{
  color: rgba(255,255,255,.72);
  font-weight: 600;
  letter-spacing: 2px;
  font-size: .76rem;
  text-transform: uppercase;
}
.ls-partner-heading{
  color: #ffffff;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.28;
  margin-bottom: 30px;
}
.ls-partner-tags{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 34px;
}
.ls-partner-tags li{
  padding: 9px 22px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .3px;
  transition: all .3s ease;
}
.ls-partner-tags li:hover{
  background: var(--ls-gold);
  border-color: var(--ls-gold);
  transform: translateY(-2px);
}
.ls-partner-statement{
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: rgba(255,255,255,.92);
  font-weight: 500;
  margin: 0;
  line-height: 1.5;
}
.ls-partner-statement span{
  color: var(--ls-gold-light);
  font-weight: 700;
}
@media (max-width: 768px){
  .ls-partner-band{
    background-attachment: scroll;
    padding: 64px 16px;
    min-height: auto;
  }
}