/* =====================================================================
   YALA SAFARI — 2026 home redesign  (prefix .ys-)
   Forest-green + gold palette, Fraunces headings / Poppins body.
   Loaded AFTER style.css + yala-header.css so it wins the cascade.
   ===================================================================== */

:root{
  --ys-green-900:#12281a;
  --ys-green-800:#173324;
  --ys-green-700:#1b3a2b;
  --ys-green-600:#245039;
  --ys-gold:#e0a63d;
  --ys-gold-600:#c98f2c;
  --ys-cream:#faf6ef;
  --ys-ink:#22312a;
  --ys-muted:#5b6b60;
  --ys-line:#e7e0d3;
  --ys-serif:"Fraunces","Playfair Display",Georgia,serif;
  --ys-sans:"Poppins",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- global base ---------- */
body{ font-family:var(--ys-sans); color:var(--ys-ink); background:var(--ys-cream); }
h1,h2,h3,h4,h5,h6,
.section-title,h4.section-title,.banner-text h2,.hero-content h1{
  font-family:var(--ys-serif) !important;
  color:var(--ys-green-700);
  font-weight:600;
}
p{ font-family:var(--ys-sans); color:var(--ys-muted); }
a{ text-decoration:none; }
img{ max-width:100%; }

.ys-wrap{ max-width:1560px; margin:0 auto; padding:0 24px; }

html{ overflow-x:clip; }

/* border-box for the 2026 home sections — many children set their own padding
   + width, which overflowed the viewport on mobile under the default content-box */
.ys-hero,.ys-hero *,.ys-hero *::before,.ys-hero *::after,
.ys-quick,.ys-quick *,.ys-quick *::before,.ys-quick *::after,
.ys-usp,.ys-usp *,.ys-about,.ys-about *,
.ys-parks,.ys-parks *,.ys-why,.ys-why *,
.ys-packages,.ys-packages *,.ysp-section,.ysp-section *,
.ys-gallery,.ys-gallery *,.ys-connect,.ys-connect *,
.ys-tst,.ys-tst *,.ys-blog,.ys-blog *,
.ys-mapsec,.ys-mapsec *{
  box-sizing:border-box;
}

/* ---------- shared bits ---------- */
.ys-eyebrow{
  font-family:var(--ys-sans);
  font-size:12px; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:var(--ys-gold-600);
  display:inline-block; margin-bottom:14px;
}
.ys-h2{
  font-family:var(--ys-serif); color:var(--ys-green-700);
  font-size:clamp(28px,3.4vw,44px); line-height:1.15; font-weight:600; margin:0;
}
.ys-h2 em{ font-style:italic; color:var(--ys-gold); }

.ys-rule{
  display:block; width:66px; height:3px; border-radius:3px;
  background:var(--ys-gold); margin:18px 0 0;
}

.ys-btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--ys-sans); font-size:12.5px; font-weight:600;
  letter-spacing:1.2px; text-transform:uppercase;
  padding:11px 12px 11px 24px; border-radius:999px; border:0; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.ys-btn__circle{
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ys-btn__circle svg{ width:14px; height:14px; }
.ys-btn--gold{ background:var(--ys-gold); color:var(--ys-green-800); }
.ys-btn--gold .ys-btn__circle{ background:var(--ys-green-800); color:var(--ys-gold); }
.ys-btn--green{ background:var(--ys-green-700); color:#fff; }
.ys-btn--green .ys-btn__circle{ background:var(--ys-gold); color:var(--ys-green-800); }
.ys-btn--ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); }
.ys-btn--ghost .ys-btn__circle{ background:rgba(255,255,255,.16); color:#fff; }
.ys-btn--ghost:hover{ background:rgba(255,255,255,.12); }
.ys-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(20,48,31,.22); }

.ys-mini-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--ys-sans); font-size:11px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase;
  padding:10px 18px; border-radius:8px;
  background:var(--ys-green-700); color:#fff; white-space:nowrap;
  transition:background .2s ease, transform .2s ease;
}
.ys-mini-btn:hover{ background:var(--ys-gold); color:var(--ys-green-800); transform:translateY(-1px); }

.ys-link{
  font-family:var(--ys-sans); font-size:12px; font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--ys-green-700);
  display:inline-flex; align-items:center; gap:9px;
}
.ys-link svg{ width:16px; height:16px; }
.ys-link:hover{ color:var(--ys-gold-600); }
.ys-link--gold{ color:var(--ys-gold-600); }
.ys-link--gold:hover{ color:var(--ys-green-700); }

/* =====================================================================
   HEADER — transparent overlay over the hero (home only)
   ===================================================================== */
.yh-header--overlay{
  background:linear-gradient(180deg, rgba(15,32,21,.55) 0%, rgba(15,32,21,.18) 55%, rgba(15,32,21,0) 100%);
}
.yh-header--overlay .yh-nav__list a{ color:rgba(255,255,255,.92); }
.yh-header--overlay .yh-nav__list a:hover,
.yh-header--overlay .yh-nav__list a.is-active{ color:#fff; border-bottom-color:var(--ys-gold); }
.yh-header--overlay .yh-burger span{ background:#fff; }
.yh-header--overlay .Language + * ,
.yh-header--overlay #languageSelect{ color:#fff; }

.yh-header--overlay.is-stuck{
  background:#fff;
  box-shadow:0 2px 22px rgba(0,0,0,.08);
}
.yh-header--overlay.is-stuck .yh-nav__list a{ color:var(--ys-ink); }
.yh-header--overlay.is-stuck .yh-nav__list a:hover,
.yh-header--overlay.is-stuck .yh-nav__list a.is-active{ color:var(--ys-green-700); }
.yh-header--overlay.is-stuck .yh-burger span{ background:var(--ys-green-700); }

@media (max-width:960px){
  .yh-header--overlay .yh-nav__list a{ color:var(--ys-ink); }
}

/* =====================================================================
   HERO
   ===================================================================== */
.ys-hero{ position:relative; background:var(--ys-green-900); }
.ys-hero .splide__slide{ position:relative; }
.ys-hero .splide__slide img{
  width:100%; height:840px; object-fit:cover; display:block;
}
.ys-hero .splide__slide::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(15,32,21,.80) 0%, rgba(15,32,21,.38) 46%, rgba(15,32,21,.02) 72%),
    linear-gradient(0deg, rgba(15,32,21,.55) 0%, rgba(15,32,21,0) 42%);
}
.ys-hero__inner{
  position:absolute; inset:0; z-index:3;
  max-width:1560px; margin:0 auto; padding:110px 24px 90px;
  display:flex; flex-direction:column; justify-content:center;
}
.ys-hero__box{ max-width:760px; color:#fff; }
.ys-hero__eyebrow{
  font-size:13px; font-weight:600; letter-spacing:4px; text-transform:uppercase;
  color:var(--ys-gold); display:block; margin-bottom:18px;
}
.ys-hero__title{
  font-family:var(--ys-serif) !important; color:#fff !important;
  font-size:clamp(44px,6vw,80px); line-height:1.06; font-weight:700;
  margin:0 0 22px; max-width:720px;  text-wrap:balance;
  text-shadow:0 6px 30px rgba(0,0,0,.35);
}
.ys-hero__title em{ font-style:normal; color:var(--ys-gold); display:block; }
.ys-hero__text{
  color:rgba(255,255,255,.9) !important; font-size:17px; line-height:1.7;
  max-width:430px; margin:0 0 32px;
}
.ys-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.ys-hero__stamp{
  position:absolute; z-index:4; right:6%; bottom:200px;
  width:150px; height:150px; border-radius:50%;
  background:var(--ys-gold);
  box-shadow:0 22px 46px -16px rgba(0,0,0,.55);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--ys-green-800); transform:rotate(-8deg);
}
.ys-hero__stamp span{ font-size:10px; letter-spacing:3px; text-transform:uppercase; font-weight:600; }
.ys-hero__stamp b{ font-family:var(--ys-serif); font-size:24px; line-height:1.05; margin-top:4px; }

/* torn-paper divider (reuses banner-pattern.png in markup) */
.ys-hero__divider{
  position:absolute; left:0; right:0; bottom:-1px; z-index:3; line-height:0;
}
.ys-hero__divider img{ width:100%; height:120px; object-fit:cover; display:block; }

.ys-hero .splide__arrow{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4);
  width:44px; height:44px;
}
.ys-hero .splide__arrow svg{ fill:#fff; }
.ys-hero .splide__arrow:hover{ background:var(--ys-gold); border-color:var(--ys-gold); }

/* =====================================================================
   QUICK BOOKING FORM — floating card over the hero divider
   ===================================================================== */
.ys-quick{ position:relative; z-index:5; padding-bottom:40px; }
/* white fill behind the card — starts below the torn-paper divider so it stays visible */
.ys-quick::before{
  content:""; position:absolute; left:0; right:0; top:118px; bottom:0;
  background:#fff; z-index:-1;
}
.ys-quick__card{
  margin:-125px auto 0; position:relative;
  background:#fff;
  box-shadow:0 30px 60px -24px rgba(15,32,21,.30);
  border:1px solid var(--ys-line);
  padding:32px 38px;
  display:flex; flex-direction:column; gap:24px;
}
.ys-quick__top{
  display:flex; align-items:flex-end; gap:32px; flex-wrap:wrap;
}
.ys-quick__head{ flex:1 1 240px; padding-bottom:2px; }
.ys-quick__eyebrow{
  font-family:var(--ys-sans); font-size:12px; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:var(--ys-gold-600); display:block; margin-bottom:6px;
}
.ys-quick__title{
  font-family:var(--ys-serif) !important; color:var(--ys-green-700) !important;
  font-size:27px; line-height:1.15; font-weight:600; margin:0;
}
.ys-quick__hint{
  font-family:var(--ys-sans); font-size:13.5px; color:var(--ys-muted);
  margin:9px 0 0; max-width:36ch;
}
.ys-quick__fields{
  flex:1 1 620px;
  display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap;
}
.ys-quick__field{ flex:1 1 170px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.ys-quick__field--sm{ flex:0 0 100px; }
.ys-quick__field--lg{ flex:2 1 260px; }
.ys-quick__field span{
  font-family:var(--ys-sans); font-size:12px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--ys-muted);
}
.ys-quick__field select,
.ys-quick__field input{
  font-family:var(--ys-sans); font-size:15.5px; color:var(--ys-ink);
  padding:14px 16px; border:1px solid var(--ys-line); border-radius:12px;
  background:var(--ys-cream); width:100%; height:54px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ys-quick__field select:focus,
.ys-quick__field input:focus{
  outline:none; border-color:var(--ys-gold);
  box-shadow:0 0 0 3px rgba(224,166,61,.18);
}
.ys-quick__submit{ flex:0 0 auto; height:54px; font-size:14px; padding-left:26px; padding-right:26px; }

/* ---- dynamic package preview ---- */
.ys-quick__preview{
  display:flex; align-items:stretch; gap:20px;
  border-top:1px solid var(--ys-line); padding-top:18px;
  animation:ysQuickIn .3s ease;
}
@keyframes ysQuickIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.ys-quick__preview-media{
  flex:0 0 200px; border-radius:12px; overflow:hidden; background:var(--ys-cream);
  display:block; align-self:stretch;
}
.ys-quick__preview-media img{ width:100%; height:100%; min-height:140px; object-fit:cover; display:block; }
.ys-quick__preview-info{ flex:1 1 auto; min-width:0; }
.ys-quick__preview-info h3{
  font-family:var(--ys-serif) !important; color:var(--ys-green-700) !important;
  font-size:19px; font-weight:600; margin:0 0 8px;
}
.ys-quick__preview-meta{
  list-style:none; margin:0 0 10px; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 16px;
}
.ys-quick__preview-meta li{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--ys-sans); font-size:12.5px; color:var(--ys-muted);
}
.ys-quick__preview-meta i{ color:var(--ys-gold-600); font-size:14px; }
.ys-quick__preview-info p{
  font-family:var(--ys-sans); font-size:13px; line-height:1.6; color:var(--ys-muted); margin:0;
}
.ys-quick__preview-price{
  flex:0 0 180px; border-left:1px solid var(--ys-line); padding-left:20px;
  display:flex; flex-direction:column; justify-content:center; gap:2px;
}
.ys-quick__preview-from{
  font-family:var(--ys-sans); font-size:11px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--ys-muted);
}
.ys-quick__preview-price b{
  font-family:var(--ys-serif); color:var(--ys-green-700);
  font-size:22px; line-height:1.2; font-weight:600;
}
.ys-quick__preview-price .ys-link{ margin-top:10px; font-size:12px; }

@media (max-width:1000px){
  .ys-quick__preview{ flex-wrap:wrap; }
  .ys-quick__preview-media{ flex:0 0 100%; }
  .ys-quick__preview-media img{ min-height:180px; max-height:220px; }
  .ys-quick__preview-price{
    flex:1 1 100%; border-left:0; border-top:1px solid var(--ys-line);
    padding-left:0; padding-top:14px; margin-top:4px;
    flex-direction:row; align-items:baseline; gap:12px; flex-wrap:wrap;
  }
  .ys-quick__preview-price .ys-link{ margin-top:0; margin-left:auto; }
}
@media (max-width:900px){
  .ys-quick__card{ margin-top:-125px; gap:16px; padding:20px; }
  .ys-quick__fields{ flex:1 1 100%; }
  .ys-quick__field{ flex:1 1 45%; }
  .ys-quick__field--lg{ flex:1 1 100%; }
  .ys-quick__submit{ flex:1 1 100%; justify-content:center; }
}
@media (max-width:560px){
  .ys-quick__field,
  .ys-quick__field--sm{ flex:1 1 100%; }
}

/* =====================================================================
   USP strip — dark green band
   ===================================================================== */
.ys-usp{ background:var(--ys-green-800); }
.ys-usp__grid{
  max-width:1560px; margin:0 auto; padding:26px 24px;
  display:grid; grid-template-columns:repeat(5,1fr); gap:22px;
}
.ys-usp__item{ display:flex; align-items:center; gap:13px; }
.ys-usp__item + .ys-usp__item{ border-left:1px solid rgba(255,255,255,.12); padding-left:22px; }
.ys-usp__ico{
  width:44px; height:44px; flex-shrink:0; border-radius:50%;
  border:1.5px solid var(--ys-gold); color:var(--ys-gold);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.ys-usp__item h4{
  font-family:var(--ys-sans) !important; color:#fff !important;
  font-size:13px; font-weight:600; margin:0 0 2px; line-height:1.3;
}
.ys-usp__item p{ font-size:11.5px; margin:0; color:rgba(255,255,255,.62); line-height:1.3; }

/* =====================================================================
   Section scaffolding
   ===================================================================== */
.ys-section{ padding:84px 0; }
.ys-section--tint{ background:#fff; }
.ys-section__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:44px;
}
.ys-section__head .ys-eyebrow{ margin-bottom:8px; }
.ys-section__head--stack,
.ys-section__head--center{ display:block; text-align:left; }
.ys-section__head--center{ text-align:center; }
.ys-section__head--center .ys-eyebrow{ margin-bottom:8px; }

/* =====================================================================
   About us — centred editorial + Sri Lanka skyline
   ===================================================================== */
.ys-about{
  position:relative; background:#fff; overflow:hidden;
  padding-bottom:clamp(260px,30vw,440px);
}
/* two-column editorial: heading / CTA on the left, body copy on the right */
.ys-about__inner{
  position:relative; z-index:2;
  text-align:left;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(40px,5vw,96px); row-gap:26px;
  align-items:start;
}

.ys-about__eyebrow{
  grid-column:1;
  align-items:center; gap:12px;
  font-family:var(--ys-sans); font-size:12px; font-weight:600;
  letter-spacing:3.5px; text-transform:uppercase; color:var(--ys-gold-600);
}
.ys-about__eyebrow i{
  width:26px; height:12px; background:var(--ys-gold); border-radius:1px; display:block;
}

.ys-about__title{
  grid-column:1; position:relative;
  font-family:var(--ys-serif) !important; color:var(--ys-green-800) !important;
  font-weight:600;
  font-size:clamp(50px,3.4vw,75px); line-height:0.9; letter-spacing:.5px;
  margin:0; max-width:15ch; padding-bottom:26px; text-wrap:balance;
}
.ys-about__title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:74px; height:3px; border-radius:3px; background:var(--ys-gold);
}
.ys-about__title em{ font-style:italic; text-transform:none; color:var(--ys-gold-600); }

.ys-about__copy{
  grid-column:2; grid-row:1 / span 3; margin:0; max-width:64ch;
}
.ys-about__copy p{
  font-size:15px; line-height:1.95; color:var(--ys-muted); margin:0 0 18px;
}
.ys-about__copy p:first-child{
  font-size:17.5px; line-height:1.8; color:var(--ys-ink); 
}
.ys-about__copy p:last-child{ margin-bottom:0; }

.ys-about__cta{
  grid-column:1; align-self:start; justify-self:start; margin-top:6px;
}

/* full-width safari photo band anchored to the bottom, behind the copy */
.ys-about__scape{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  height:clamp(300px,33vw,480px); margin:0; line-height:0; pointer-events:none;
}
.ys-about__scape svg,
.ys-about__scape img{
  width:100%; height:100%; object-fit:cover; object-position:center 82%; display:block;
}
/* white wash so the photo melts up into the section and any overlap stays readable */
.ys-about__scape::before{
  content:""; position:absolute; left:0; right:0; top:0; height:58%; pointer-events:none;
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.7) 34%,rgba(255,255,255,0) 100%);
}
.ys-about__scape::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:36%; pointer-events:none;
  background:linear-gradient(0deg,rgba(18,40,26,.14),rgba(18,40,26,0));
}

@media (max-width:900px){
  .ys-about__inner{ grid-template-columns:1fr; text-align:center; row-gap:20px; }
  .ys-about__eyebrow,
  .ys-about__title,
  .ys-about__copy,
  .ys-about__cta{ grid-column:1; }
  .ys-about__copy{ grid-row:auto; margin:0 auto; }
  .ys-about__cta{ justify-self:center; }
  .ys-about__title{ max-width:24ch; margin:0 auto; }
  .ys-about__title::after{ left:50%; transform:translateX(-50%); }
}
@media (max-width:900px){
  .ys-about{ padding-bottom:clamp(200px,52vw,300px); }
  .ys-about__scape{ height:clamp(220px,56vw,320px); }
}
@media (max-width:640px){
  .ys-about__copy p{ font-size:14px; line-height:1.85; }
  .ys-about__copy p:first-child{ font-size:15.5px; }
}

/* =====================================================================
   Popular national parks
   ===================================================================== */
.ys-parks{ background:#fff; }
.ys-park-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.ys-park-card{
  position:relative; border-radius:16px; overflow:hidden; display:block;
  aspect-ratio:5/7; background:var(--ys-green-800);
  box-shadow:0 12px 30px -20px rgba(18,40,26,.55);
  transition:transform .3s ease, box-shadow .3s ease;
}
.ys-park-card:hover{ transform:translateY(-6px); box-shadow:0 28px 46px -22px rgba(18,40,26,.5); }
.ys-park-card__media{ position:absolute; inset:0; display:block; overflow:hidden; }
.ys-park-card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease;
}
.ys-park-card:hover .ys-park-card__media img{ transform:scale(1.07); }
.ys-park-card::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(11,26,16,.94) 4%, rgba(11,26,16,.66) 32%, rgba(11,26,16,.08) 58%);
}
.ys-park-card__body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:20px 18px 20px;
}
.ys-park-card__body h3{
  font-family:var(--ys-serif) !important; font-size:17px; line-height:1.18;
  margin:0 0 8px; color:#fff !important; text-transform:uppercase;
}
.ys-park-card__body h3 a{ color:#fff; }
.ys-park-card__body h3 a:hover{ color:var(--ys-gold) !important; }
.ys-park-card__body p{ font-size:12px; line-height:1.55; margin:0 0 12px; color:rgba(255,255,255,.82); }
.ys-park-card__body .ys-link{ font-size:10.5px; color:var(--ys-gold); }
.ys-park-card__body .ys-link:hover{ color:#fff; }
.ys-park-card__body .ys-link svg{ width:15px; height:15px; }

/* =====================================================================
   Why choose us
   ===================================================================== */
.ys-why{
  position:relative; overflow:hidden; background:#fff;
}
/* soft cream field on the left — the image sits on it, fading out before the copy */
.ys-why::before{
  content:""; position:absolute; inset:0 auto 0 0; width:58%; z-index:0; pointer-events:none;
  background:
    radial-gradient(80% 60% at 8% 12%, rgba(224,166,61,.13), transparent 60%),
    linear-gradient(90deg, var(--ys-cream) 0%, var(--ys-cream) 62%, rgba(250,246,239,0) 100%);
}

.ys-why__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:460px; height:460px; right:-150px; top:40px; border-radius:50%;
  background:radial-gradient(circle, rgba(35,80,57,.10), transparent 70%);
}

.ys-why__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(40px,5.5vw,90px);
  align-items:center;
}

/* ---------- media ---------- */
.ys-why__media{ position:relative; }
.ys-why__frame{
  position:relative; border-radius:6px; overflow:hidden;
  box-shadow:0 40px 80px -34px rgba(18,40,26,.5);
}
.ys-why__frame::after{
  content:""; position:absolute; inset:0; border-radius:6px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(18,40,26,.08);
}
.ys-why__frame img{
  width:100%; height:100%; min-height:520px; object-fit:cover; display:block;
}
.ys-why__badge{
  position:absolute; right:20px; top:20px; z-index:3;
  background:var(--ys-green-800); color:#fff;
  border-radius:6px; padding:12px 18px; text-align:center;
  box-shadow:0 20px 38px -16px rgba(18,40,26,.55);
}
.ys-why__badge b{
  font-family:var(--ys-serif); font-size:30px; line-height:1; color:var(--ys-gold);
  display:block;
}
.ys-why__badge b i{ font-style:normal; font-size:18px; }
.ys-why__badge span{
  display:block; margin-top:4px;
  font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase; color:rgba(255,255,255,.82);
}
.ys-why__count{
  position:absolute; left:-18px; bottom:28px; z-index:3;
  background:var(--ys-gold); color:var(--ys-green-900);
  border-radius:6px; padding:13px 18px; display:flex; align-items:center; gap:11px;
  box-shadow:0 22px 40px -16px rgba(18,40,26,.5);
}
.ys-why__count > i{ font-size:26px; }
.ys-why__count-txt{ display:flex; flex-direction:column; line-height:1.1; }
.ys-why__count-txt b{ font-family:var(--ys-serif); font-size:20px; }
.ys-why__count-txt span{ font-size:10px; letter-spacing:.6px; text-transform:uppercase; font-weight:600; }

/* ---------- copy ---------- */
.ys-why__copy .ys-eyebrow{ color:var(--ys-gold-600); }
.ys-why__copy .ys-h2{ margin-bottom:0; color:var(--ys-green-700); }
.ys-why__copy .ys-h2 em{ font-style:italic; color:var(--ys-gold-600); }
.ys-why__lead{
  margin:22px 0 0; max-width:52ch;
  font-size:15px; line-height:1.95; color:var(--ys-muted);
}
.ys-why__cta{ margin-top:28px; }

/* ---------- compact feature points (in the copy column, under the CTA) ---------- */
.ys-why__points{
  margin-top:34px; padding-top:30px; border-top:1px solid var(--ys-line);
  display:grid; grid-template-columns:repeat(2,1fr); gap:22px 28px;
}
.ys-why__point{ display:flex; align-items:flex-start; gap:13px; }
.ys-why__ico{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(150deg, rgba(35,80,57,.14), rgba(224,166,61,.22));
  color:var(--ys-green-600);
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.ys-why__point h4{
  font-family:var(--ys-sans) !important; color:var(--ys-ink) !important;
  font-size:13.5px; font-weight:600; margin:1px 0 4px; letter-spacing:.2px;
}
.ys-why__point p{ font-size:12px; line-height:1.6; margin:0; color:var(--ys-muted); }

/* =====================================================================
   Safari packages
   ===================================================================== */
.ys-packages{ background:var(--ys-cream); --ys-maroon:#7c1f2c; --ys-maroon-dark:#651823; }
.ys-packages .ys-eyebrow{ color:var(--ys-green-600); }

/* image-overlay grid — 3 up on desktop, thin gutters like the mockup */
.ys-pkg-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
}

.ys-pkg-card{
  position:relative; display:flex; flex-direction:column;
  background:#fff; overflow:hidden;
  box-shadow:0 18px 40px -30px rgba(18,40,26,.5);
}

/* media + overlaid text */
.ys-pkg-card__media{
  position:relative; display:block; flex:1;
  min-height:440px; overflow:hidden;
}
.ys-pkg-card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.ys-pkg-card:hover .ys-pkg-card__media img{ transform:scale(1.05); }
.ys-pkg-card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(15,25,18,.82) 0%,rgba(15,25,18,.35) 42%,rgba(15,25,18,0) 68%);
}

.ys-pkg-card__days{
  position:absolute; top:16px; left:16px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--ys-green-800);
  font-family:var(--ys-sans); font-size:11px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase;
  padding:8px 14px;
}
.ys-pkg-card__days i{ color:var(--ys-green-600); font-size:13px; }

.ys-pkg-card__overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:22px 22px 20px; color:#fff;
}
.ys-pkg-card__overlay h3{
  font-family:var(--ys-serif) !important; color:#fff !important;
  font-size:clamp(19px,1.5vw,23px); line-height:1.2; font-weight:600;
  text-transform:uppercase; margin:0 0 10px;
}
.ys-pkg-card__cat{
  display:block; font-family:var(--ys-sans);
  font-size:11px; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:var(--ys-gold);
}
.ys-pkg-card__loc{
  display:inline-flex; align-items:center; gap:7px; margin-top:8px;
  font-family:var(--ys-sans); font-size:11.5px; font-weight:500;
  letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.9);
}
.ys-pkg-card__loc i{ color:var(--ys-gold); font-size:13px; }

/* maroon dual-action bar */
.ys-pkg-card__actions{
  display:flex; align-items:stretch;
  background:var(--ys-maroon); color:#fff;
}
.ys-pkg-card__explore,
.ys-pkg-card__details{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ys-sans); font-size:11px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase; color:#fff;
  padding:16px 18px; transition:background .25s ease;
}
.ys-pkg-card__explore{ flex:1; }
.ys-pkg-card__explore span{ transition:transform .25s ease; }
.ys-pkg-card__explore:hover{ background:var(--ys-maroon-dark); color:#fff; }
.ys-pkg-card__explore:hover span{ transform:translateX(4px); }
.ys-pkg-card__details{
  border-left:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.9);
}
.ys-pkg-card__details i{ font-size:13px; }
.ys-pkg-card__details:hover{ background:var(--ys-maroon-dark); color:#fff; }

/* custom-packages tile keeps the dark-green promo look */
.ys-pkg-card--custom{
  background:var(--ys-green-700);
  padding:36px 30px; justify-content:center; text-align:left; color:#fff;
  min-height:440px;
}
.ys-pkg-card__paw{
  width:48px; height:48px; border-radius:50%;
  background:rgba(224,166,61,.16); color:var(--ys-gold);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.ys-pkg-card__paw svg{ width:26px; height:26px; }
.ys-pkg-card--custom h3{
  font-family:var(--ys-serif) !important; font-weight:600; color:#fff !important;
  font-size:22px; letter-spacing:.4px; line-height:1.25; margin:0 0 12px; text-transform:uppercase;
}
.ys-pkg-card--custom p{ color:rgba(255,255,255,.78) !important; font-size:12.5px; line-height:1.65; margin:0 0 22px; max-width:340px; }
.ys-pkg-card--custom .ys-btn{ align-self:flex-start; }

/* =====================================================================
   Packages listing page  (view_packages.php)  — light green/gold cards
   ===================================================================== */
.ysp-section{ background:var(--ys-cream); }
.ysp-section .ys-h2 em{ color:var(--ys-gold-600); font-style:italic; }

/* interior page banner heading sits on a darkened photo — keep it white */
.section-banner .banner-text h2{ color:#fff !important; position:relative; z-index:2; }

/* banner "From: <price>" — show as a gold pill above the title */
.section-banner .banner-text h5{
  display:inline-flex; align-items:baseline; gap:.4em;
  margin:0 auto 14px; padding:8px 20px;
  position:relative; z-index:2;
  font-family:var(--ys-sans) !important;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#fff !important;
  background:linear-gradient(135deg,var(--ys-gold),var(--ys-gold-600));
  border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.section-banner .banner-text h5 span{
  font-family:var(--ys-serif) !important;
  font-size:20px; font-weight:600; letter-spacing:.02em;
  color:#fff !important;
}

.ysp-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:34px 26px; align-items:stretch;
}

.ysp-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--ys-line); 
  overflow:hidden;
  box-shadow:0 26px 50px -34px rgba(18,40,26,.55);
  transition:transform .3s ease, box-shadow .3s ease;
}
.ysp-card:hover{ transform:translateY(-6px); box-shadow:0 34px 60px -30px rgba(18,40,26,.55); }

.ysp-card__media{ position:relative; aspect-ratio:16/11; overflow:hidden; }
.ysp-card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease;
}
.ysp-card:hover .ysp-card__media img{ transform:scale(1.06); }

.ysp-card__body{
  position:relative; flex:1;
  display:flex; flex-direction:column;
  padding:26px 26px 24px;
}

.ysp-card__title{
  font-family:var(--ys-serif) !important; color:var(--ys-green-800) !important;
  font-size:20px; line-height:1.24; font-weight:700;
  text-transform:uppercase; letter-spacing:.3px; margin:0 0 10px;
}
.ysp-card__title a{ color:inherit; text-decoration:none; }
.ysp-card__title a:hover{ color:var(--ys-gold-600) !important; }

.ysp-card__loc{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:12px;
  font-family:var(--ys-sans); font-size:11px; font-weight:600;
  letter-spacing:1.3px; text-transform:uppercase; color:var(--ys-gold-600);
}
.ysp-card__loc i{ font-size:13px; }

.ysp-card__desc{
  font-family:var(--ys-sans); font-size:13.5px; line-height:1.7;
  color:var(--ys-muted); margin:0 0 20px;
}

.ysp-card__foot{ margin-top:auto; display:flex; flex-direction:column; gap:18px; }

.ysp-card__meta{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px 18px;
  padding-top:18px; border-top:1px solid var(--ys-line);
}
.ysp-card__price{ flex:1 1 auto; min-width:0; }
.ysp-card__duration{ flex:0 1 auto; }
.ysp-card__price + .ysp-card__duration{
  text-align:right; padding-left:18px; border-left:1px solid var(--ys-line);
}

.ysp-card__meta-label{
  display:block; font-family:var(--ys-sans);
  font-size:10px; font-weight:600; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--ys-muted); margin-bottom:5px;
}
.ysp-card__price-value{
  display:block; font-family:var(--ys-serif); font-size:20px; font-weight:700;
  color:var(--ys-green-700); line-height:1.1; white-space:nowrap;
}
.ysp-card__meta-unit{
  font-family:var(--ys-sans); font-size:10px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; color:var(--ys-muted);
}
.ysp-card__duration-value{
  display:inline-flex; align-items:baseline; gap:6px;
  font-family:var(--ys-serif); font-size:16px; font-weight:700;
  color:var(--ys-gold-600); line-height:1.25;
}
.ysp-card__duration-value i{ font-size:14px; color:var(--ys-gold); align-self:center; }

.ysp-card__cta{ align-self:flex-start; }
.ysp-card__cta:hover{ background:var(--ys-green-800); transform:translateY(-2px); }

/* dark-green "custom package" promo tile (home grid) */
.ysp-card--custom{
  background:var(--ys-green-700); border-color:var(--ys-green-700);
  justify-content:center; padding:38px 32px; color:#fff;
}
.ysp-card--custom h3{
  font-family:var(--ys-serif) !important; color:#fff !important;
  font-size:22px; font-weight:700; line-height:1.25;
  text-transform:uppercase; letter-spacing:.3px; margin:16px 0 12px;
}
.ysp-card--custom p{
  color:rgba(255,255,255,.8) !important;
  font-size:13px; line-height:1.7; margin:0 0 24px; max-width:340px;
}
.ysp-card--custom .ys-btn{ align-self:flex-start; }

@media (max-width:1100px){
  .ysp-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .ysp-grid{ grid-template-columns:1fr; gap:40px 0; }

  /* keep price + duration side-by-side on mobile instead of stacking */
  .ysp-card__meta{ flex-wrap:nowrap; gap:0; }
  .ysp-card__price{ flex:1 1 50%; min-width:0; }
  .ysp-card__duration{ flex:1 1 50%; min-width:0; }
  .ysp-card__price + .ysp-card__duration{ padding-left:14px; }
  .ysp-card__price-value{ font-size:18px; }
  .ysp-card__duration-value{ font-size:14px; white-space:nowrap; }
}

/* =====================================================================
   Safari gallery — "Connect with us" band + photo grid + CTA tile
   ===================================================================== */
.ys-gallery{ background:var(--ys-cream); position:relative; overflow:hidden; }

/* "Connect with us" — heads the gallery section, centred over the full width */
.ys-connect{ text-align:left; max-width:900px; margin:0 0 48px; }
.ys-connect__title{
  font-family:"Kalam","Fraunces",cursive;
  font-weight:700; color:var(--ys-green-800);
  font-size:clamp(30px,3.8vw,48px); line-height:1.08; margin:0;
}
.ys-connect__text{
  margin:16px 0 0; max-width:64ch;
  font-family:var(--ys-sans); font-size:14.5px; line-height:1.8; color:var(--ys-muted);
}
.ys-connect__text a{
  color:var(--ys-gold-600); font-weight:600;
  text-decoration:underline; text-underline-offset:2px;
}
.ys-connect__text a:hover{ color:var(--ys-green-700); }
.ys-connect__reviews{
  margin-top:24px;
  display:flex; align-items:center; justify-content:flex-start; gap:28px; flex-wrap:wrap;
}
.ys-connect__review{ display:inline-flex; align-items:center; gap:12px; }
.ys-connect__review img{ width:40px; height:40px; object-fit:contain; flex-shrink:0; }
.ys-connect__review span{
  font-family:var(--ys-serif);  font-weight:600;
  font-size:13px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--ys-ink); line-height:1.2; text-align:left;
}
.ys-connect__review:hover span{ color:var(--ys-green-700); }
.ys-connect__divider{ width:1px; height:34px; background:var(--ys-line); }

/* stand-alone Connect band (About page) */
.ys-connect-sec{ background:var(--ys-cream); }
.ys-connect-sec .ys-connect{ margin-bottom:0; }

@media (max-width:520px){
  .ys-connect__reviews{ gap:18px; }
  .ys-connect__divider{ display:none; }
}

/* photo grid — N image cards + a promo tile, fills the row like .ys-blog-grid */
.ys-gallery-grid{
  display:grid;
  grid-template-columns:repeat(var(--ys-gallery-cols,4),1fr) 1.15fr;
  gap:16px; align-items:stretch; margin-top:4px;
}

.ys-gallery-card{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:3/4;
  background:var(--ys-green-800);
  box-shadow:0 20px 44px -28px rgba(18,40,26,.55);
  transition:transform .3s ease, box-shadow .3s ease;
}
.ys-gallery-card:hover{
  transform:translateY(-6px);
  box-shadow:0 32px 56px -26px rgba(18,40,26,.5);
}
.ys-gallery-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease;
}
.ys-gallery-card:hover img{ transform:scale(1.08); }
.ys-gallery-card::after{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(15,32,21,.6),rgba(15,32,21,0) 55%);
  transition:opacity .35s ease;
}
.ys-gallery-card:hover::after{ opacity:1; }

.ys-gallery__zoom{
  position:absolute; right:13px; bottom:13px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  background:rgba(250,246,239,.94); color:var(--ys-green-800);
  display:flex; align-items:center; justify-content:center;
  transform:translateY(8px); opacity:0;
  transition:transform .35s ease, opacity .35s ease;
}
.ys-gallery__zoom svg{ width:16px; height:16px; }
.ys-gallery-card:hover .ys-gallery__zoom{ transform:none; opacity:1; }

/* dark-green promo tile — mirrors .ys-blog-cta */
.ys-gallery-cta{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:38px 32px; color:#fff; min-height:100%;
  box-shadow:0 20px 44px -28px rgba(18,40,26,.55);
}
.ys-gallery-cta__bg{ position:absolute; inset:0; z-index:0; }
.ys-gallery-cta__bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.ys-gallery-cta__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(150deg, rgba(18,40,26,.95), rgba(18,40,26,.6));
}
.ys-gallery-cta__in{ position:relative; z-index:1; }
.ys-gallery-cta h3{
  font-family:var(--ys-serif) !important; color:#fff !important;
  font-size:clamp(20px,2.1vw,25px); line-height:1.22; margin:0 0 12px;
}
.ys-gallery-cta p{
  color:rgba(255,255,255,.82) !important;
  font-size:13px; line-height:1.65; margin:0 0 22px; max-width:34ch;
}
.ys-gallery-cta .ys-btn{ align-self:flex-start; }

@media (max-width:1100px){
  .ys-gallery-grid{ grid-template-columns:repeat(3,1fr); }
  .ys-gallery-cta{ grid-column:1 / -1; min-height:200px; }
}
@media (max-width:760px){
  .ys-gallery-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .ys-gallery{ padding:52px 0 64px; }
  .ys-gallery-cta{ padding:30px 26px; min-height:180px; }
  .ys-gallery-cta p{ max-width:none; }
}

/* =====================================================================
   Testimonials
   ===================================================================== */
.ys-tst .ys-tst__splide{ padding:0 4px; }
.ys-tst__splide:not(.is-initialized) .splide__list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  list-style:none; margin:0; padding:0;
}
.ys-tst__splide:not(.is-initialized) .splide__list > li{ list-style:none; }
.ys-tst-card{
  background:var(--ys-cream); border:1px solid var(--ys-line); border-radius:14px;
  padding:26px 24px 28px; height:100%;
}
.ys-tst-card__head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.ys-tst-card__head img{
  width:46px; height:46px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.ys-tst-card__head b{
  font-family:var(--ys-serif); font-size:15px; color:var(--ys-green-700); display:block;
}
.ys-tst-card__head span{ font-size:11.5px; color:var(--ys-muted); }
.ys-tst-card__head .ys-stars{ margin-left:auto; }
.ys-stars{ color:var(--ys-gold); font-size:13px; letter-spacing:2px; }
.ys-tst-card p{ font-size:12.5px; line-height:1.75; font-style:italic; margin:0; color:var(--ys-muted); }

.ys-tst__splide .splide__arrow{
  background:var(--ys-green-700); opacity:1; width:38px; height:38px;
}
.ys-tst__splide .splide__arrow svg{ fill:#fff; width:14px; height:14px; }
.ys-tst__splide .splide__arrow:hover{ background:var(--ys-gold); }
.ys-tst__splide .splide__arrow--prev{ left:-8px; }
.ys-tst__splide .splide__arrow--next{ right:-8px; }
.ys-tst__splide .splide__pagination{ bottom:-34px; }
.ys-tst__splide .splide__pagination__page{ background:var(--ys-line); }
.ys-tst__splide .splide__pagination__page.is-active{ background:var(--ys-green-700); transform:scale(1.2); }

/* =====================================================================
   Latest from blog
   ===================================================================== */
/* blog runs edge-to-edge — wider than the standard wrap */
.ys-blog > .ys-wrap{ max-width:1560px; }
.ys-blog-grid{
  display:grid;
  grid-template-columns:repeat(var(--ys-blog-cols,4),1fr) 1.15fr;
  gap:24px; align-items:stretch;
}
.ys-blog-card{
  background:#fff; border:1px solid var(--ys-line); 
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.ys-blog-card:hover{ transform:translateY(-5px); box-shadow:0 20px 36px -22px rgba(18,40,26,.4); }
.ys-blog-card__media{ display:block; overflow:hidden; }
.ys-blog-card__media img{ width:100%; height:210px; object-fit:cover; display:block; transition:transform .5s ease; }
.ys-blog-card:hover .ys-blog-card__media img{ transform:scale(1.06); }
.ys-blog-card__body{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.ys-blog-card__body h3{
  font-family:var(--ys-serif) !important; font-size:16.5px; line-height:1.32;
  margin:0 0 12px; color:var(--ys-green-700) !important;
}
.ys-blog-card__body h3 a{ color:inherit; }
.ys-blog-card__body h3 a:hover{ color:var(--ys-gold-600) !important; }
.ys-blog-card__meta{ margin-top:auto; font-size:11.5px; color:var(--ys-muted); letter-spacing:.4px; }

.ys-blog-cta{
  position:relative;  overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:34px 30px; color:#fff; min-height:100%;
}
.ys-blog-cta__bg{ position:absolute; inset:0; z-index:0; }
.ys-blog-cta__bg img{ width:100%; height:100%; object-fit:cover; }
.ys-blog-cta__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(150deg, rgba(18,40,26,.94), rgba(18,40,26,.62));
}
.ys-blog-cta__in{ position:relative; z-index:1; }
.ys-blog-cta h3{
  font-family:var(--ys-serif) !important; color:#fff !important;
  font-size:clamp(20px,2.2vw,26px); line-height:1.2; margin:0 0 12px;
}
.ys-blog-cta p{ color:rgba(255,255,255,.82) !important; font-size:13px; line-height:1.65; margin:0 0 22px; }

/* =====================================================================
   Footer resets (bare `footer` rules from style.css)
   ===================================================================== */
footer.yf-footer{ padding:0 !important; background:var(--ys-green-900) !important; }
@media (max-width:992px){ footer.yf-footer{ padding:0 !important; background:var(--ys-green-900) !important; } }
.yf-footer h1,.yf-footer h2{ all:unset; }

/* =====================================================================
   Things to do — Sri Lanka pinned map  (light, blue cloud-wash)
   ===================================================================== */
.ys-mapsec{ position:relative; overflow:hidden; background:#fff; }
.ys-mapsec *,.ys-mapsec *::before,.ys-mapsec *::after{ box-sizing:border-box; }

/* soft blue watercolour field behind the map so its feathered edges melt into colour, not a white box */
.ys-mapsec::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:64%; top:-6%; width:min(1200px,64%); aspect-ratio:5/6; transform:translateX(-50%);
  background:
    radial-gradient(closest-side at 48% 44%, rgba(150,196,230,.55), rgba(150,196,230,0) 78%),
    radial-gradient(closest-side at 62% 64%, rgba(120,178,224,.40), rgba(120,178,224,0) 74%),
    radial-gradient(closest-side at 36% 74%, rgba(182,214,240,.34), rgba(182,214,240,0) 76%);
  filter:blur(26px);
}

.ys-mapsec__grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(260px,340px) minmax(0,1fr);
  gap:clamp(28px,4vw,72px); align-items:start;
}
.ys-mapsec__grid > *{ min-width:0; }

.ys-mapsec__intro{ max-width:360px; padding-top:6px; }
.ys-mapsec__title{
  font-family:var(--ys-serif) !important; font-weight:600 !important;
   color:var(--ys-green-800) !important;
  font-size:clamp(34px,3.7vw,54px); line-height:1.12; letter-spacing:.5px; margin:14px 0 0;
}
.ys-mapsec__title span{
  display:block; margin-top:.5em;
  font-size:.44em; font-weight:600; letter-spacing:.5px; color:var(--ys-green-800);
}
.ys-mapsec__lead{
  margin:20px 0 0; font-size:13px; line-height:1.9; color:#7b8b96; max-width:40ch;
}

/* ---- clickable parks list ---- */
.ys-mapsec__list{
  list-style:none; margin:26px 0 0; padding:0;
  border-top:1px solid #ece7dc;
}
.ys-mapsec__list li{ border-bottom:1px solid #ece7dc; }
.ys-mapsec__list-btn{
  width:100%; border:0; background:none; cursor:pointer;
  display:grid; grid-template-columns:26px 1fr auto; align-items:baseline; gap:14px;
  padding:11px 4px; text-align:left; font-family:var(--ys-sans);
  transition:padding-left .18s ease, color .18s ease;
}
.ys-mapsec__list-no{
  font-size:10.5px; font-weight:700; letter-spacing:.5px; color:#c2cad0;
  transition:color .18s ease;
}
.ys-mapsec__list-name{
  font-size:13px; font-weight:700; color:#1c2a33; text-transform:uppercase; letter-spacing:.4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .18s ease;
}
.ys-mapsec__list-type{
  font-size:9.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
  color:#a9b4bb; white-space:nowrap; transition:color .18s ease;
}
.ys-mapsec__list-btn:hover{ padding-left:10px; }
.ys-mapsec__list-btn:hover .ys-mapsec__list-name{ color:var(--ys-green-700); }
.ys-mapsec__list-btn.is-active .ys-mapsec__list-no,
.ys-mapsec__list-btn.is-active .ys-mapsec__list-name{ color:#e0342a; }
.ys-mapsec__list-btn.is-active .ys-mapsec__list-type{ color:#e0342a; opacity:.65; }

/* ---- map (Leaflet + OSM tiles) — feathered, no hard box, bleeds right ---- */
.ys-map{
  position:relative; margin:0; align-self:stretch; overflow:hidden;
  /* isolate so Leaflet's internal pane z-indexes stay contained and don't
     paint over the feature card that floats beside the map */
  isolation:isolate; z-index:1;
  width:calc(100% + 24px + max(0px, (100vw - 1560px) / 2));
  min-height:clamp(520px,54vw,740px);
 
}
.ys-map__canvas{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; }
.ys-map .leaflet-container{
  width:100%; height:100%; background:transparent;
  font-family:var(--ys-sans); font-size:12px;
}
/* no zoom chrome — the feathered map is a showcase, the list + markers do the navigating */
.ys-map .leaflet-control-zoom{ display:none; }
.ys-map .leaflet-control-attribution{ font-size:9px; background:rgba(255,255,255,.55); }

/* divIcon markers */
.ys-mkr{ position:relative; display:block; width:24px; height:32px; color:#1f5f6b; }
.ys-mkr svg{ width:24px; height:24px; display:block; filter:drop-shadow(0 3px 4px rgba(15,45,55,.45)); }
.ys-mkr svg path{ fill:currentColor; }
.ys-mkr svg circle{ fill:#fff; }
.ys-mkr__label{
  position:absolute; left:50%; top:-4px; transform:translate(-50%,-100%);
  white-space:nowrap; font-family:var(--ys-sans); font-size:10.5px; font-weight:700;
  letter-spacing:.2px; text-transform:uppercase; color:#16232b;
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
}
.ys-mkr.is-active{ color:#e0342a; z-index:1000; }
.ys-mkr.is-active svg{ filter:drop-shadow(0 3px 5px rgba(15,45,55,.45)) drop-shadow(0 0 6px rgba(224,52,42,.5)); }
.ys-mkr.is-active .ys-mkr__label{ color:#e0342a; }

/* ---- feature card — floats over the map ---- */
.ys-mapcard{
  position:absolute; z-index:6;
  right:clamp(16px, 5.5vw, 118px); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column;
  width:clamp(360px,35vw,512px); overflow:hidden;
  background:#fff; 
  border-top:4px solid var(--ys-gold);
  box-shadow:0 44px 90px -28px rgba(15,32,21,.55), 0 0 0 1px rgba(15,32,21,.06);
  transition:transform .3s ease, box-shadow .3s ease;
}
.ys-mapcard:hover{ transform:translateY(-53%); box-shadow:0 62px 120px -26px rgba(15,32,21,.62), 0 0 0 1px rgba(224,166,61,.5); }
.ys-mapcard__media{ display:block; width:100%; aspect-ratio:16/10; overflow:hidden; }
.ys-mapcard__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.ys-mapcard:hover .ys-mapcard__media img{ transform:scale(1.05); }
.ys-mapcard__body{ padding:32px 36px 34px; display:flex; flex-direction:column; background-color:var(--ys-cream) }
.ys-mapcard__body h3{
  font-family:var(--ys-serif) !important; font-weight:700 !important;
  text-transform:uppercase; color:#101820 !important;
  font-size:27px; line-height:1.18; margin:0 0 10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ys-mapcard__tag{
  font-family:var(--ys-sans); font-size:11px; font-weight:600; letter-spacing:1.9px;
  text-transform:uppercase; color:#a9b4bb; margin-bottom:17px;
}
.ys-mapcard__body p{
  font-size:14.5px; line-height:1.8; margin:0 0 26px; color:#7b8b96;
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.ys-mapcard__go{
  width:56px; height:56px; border-radius:50%; border:1.5px solid #d3dbe0;
  display:flex; align-items:center; justify-content:center; color:#16232b;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.ys-mapcard__go svg{ width:22px; height:22px; }
.ys-mapcard__go:hover{
  background:var(--ys-green-700); border-color:var(--ys-green-700); color:#fff; transform:translateX(3px);
}

@media (max-width:1180px){
  .ys-mapcard{ right:clamp(0px,3vw,24px); width:clamp(300px,40vw,400px); }
}
@media (max-width:960px){
  .ys-mapsec__grid{ grid-template-columns:1fr; gap:0; }
  .ys-mapsec__intro{ max-width:none; }
  .ys-map{
    width:calc(100% + 48px); margin:34px -24px 0;
    min-height:clamp(420px,90vw,560px);
  }
  .ys-mapcard{
    position:static; transform:none; width:100%; max-width:420px; margin:-70px auto 0;
    box-shadow:none;
  }
  .ys-mapcard:hover{ transform:translateY(-4px); box-shadow:none; }
}
@media (max-width:720px){
  .ys-mkr__label{ font-size:9px; }
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1200px){
  .ys-park-grid{ grid-template-columns:repeat(2,1fr); }
  .ys-park-card{ aspect-ratio:16/13; }
  .ys-blog-grid{ grid-template-columns:repeat(2,1fr); }
  .ys-blog-cta{ grid-column:1 / -1; min-height:220px; }
}
@media (max-width:960px){
  .ys-pkg-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:992px){
  .ys-hero .splide__slide img{ height:800px; }
  .ys-hero__inner{ padding-bottom:110px; }
  .ys-hero__stamp{ width:118px; height:118px; bottom:150px; }
  .ys-hero__stamp b{ font-size:19px; }
  .ys-usp__grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .ys-usp__item + .ys-usp__item{ border-left:0; padding-left:0; }
  .ys-park-grid{ grid-template-columns:repeat(2,1fr); }
  .ys-why::before{ inset:0 0 auto 0; width:100%; height:52%;
    background:linear-gradient(180deg, var(--ys-cream) 0%, var(--ys-cream) 60%, rgba(250,246,239,0) 100%); }
  .ys-why__grid{ grid-template-columns:1fr; gap:40px; }
  .ys-why__copy{ order:2; }
  .ys-why__media{ order:1; }
  .ys-why__frame img{ min-height:340px; }
  .ys-why__lead{ max-width:none; }
  .ys-why__count{ left:6px; }
  .ys-why__badge{ right:6px; }
  .ys-section{ padding:60px 0; }
  .ys-section__head{ flex-direction:column; align-items:flex-start; gap:14px; }
}
@media (max-width:640px){
  /* mobile hero: the photo fills the whole 800px panel (JS sets the track height),
     copy overlays it like desktop — no separate stacked green block */
  .ys-hero .splide__slide img{ height:800px; object-position:center; }
  .ys-hero .splide__slide{ overflow:hidden; }
  /* right padding keeps the copy clear of the fixed social sidebar */
  .ys-hero__inner{
    width:100%; max-width:100%;
    padding:96px 62px 150px 20px; justify-content:center;
  }
  .ys-hero__box{ max-width:none; min-width:0; }
  .ys-hero__eyebrow{ font-size:11px; letter-spacing:3px; margin-bottom:12px; }
  .ys-hero__title{ font-size:40px; line-height:1.12; margin-bottom:14px; }
  .ys-hero__text{ font-size:14px; line-height:1.6; margin-bottom:22px; max-width:none; }
  .ys-hero__cta{ flex-direction:column; align-items:flex-start; gap:10px; }
  .ys-hero__cta .ys-btn{ width:auto; max-width:100%; }
  .ys-hero__stamp{ display:none; }
  .ys-usp__grid{ grid-template-columns:1fr; }
  .ys-park-grid{ grid-template-columns:1fr; }
  .ys-park-card{ aspect-ratio:4/3; }
  .ys-pkg-splide:not(.is-initialized) .splide__list{ grid-template-columns:1fr; }
  .ys-pkg-card__media img{ height:200px; }
  .ys-blog-grid{ grid-template-columns:1fr; }
  .ys-why__points{ grid-template-columns:1fr; gap:16px; }
  .ys-why__media{ display:flex; flex-wrap:wrap; gap:10px; }
  .ys-why__frame{ order:-1; flex:1 1 100%; }
  .ys-why__count,.ys-why__badge{ position:static; display:inline-flex; margin:0; }
  .ys-why__badge{ text-align:left; }
  .ys-wrap{ padding:0 18px; }
}

/* =====================================================================
   Single package — Inclusions / Exclusions / Conditions
   ===================================================================== */
.pkg-info{
  border:1px solid #e6ddcb; 
  background:#fff; padding:22px 24px;
  border-left:4px solid var(--ys-gold-600);
}
.pkg-info--in{ border-left-color:var(--ys-green-600); }
.pkg-info--out{ border-left-color:#b23b3b; }
.pkg-info--cond{ border-left-color:var(--ys-gold-600); }

.pkg-info .package-title{ color:var(--ys-green-600); }
.pkg-info--out .package-title{ color:#b23b3b; }

.pkg-info__body{ font-size:15px; line-height:1.75; color:var(--ys-ink); }
.pkg-info__body p{ margin:0 0 10px; }
.pkg-info__body ul,.pkg-info__body ol{ margin:0; padding-left:0; list-style:none; }
.pkg-info__body ul li{
  position:relative; padding-left:28px; margin-bottom:9px;
}
.pkg-info__body ul li::before{
  content:"\2713"; position:absolute; left:0; top:0;
  font-weight:700; color:var(--ys-green-600);
}
.pkg-info--out .pkg-info__body ul li::before{ content:"\2715"; color:#b23b3b; }
.pkg-info--cond .pkg-info__body ul li::before{ content:"\2022"; color:var(--ys-gold-600); font-size:20px; line-height:1; }
.pkg-info__body ol{ padding-left:20px; list-style:decimal; }
.pkg-info__body ol li{ margin-bottom:9px; }

/* =====================================================================
   Single package — "Get in Touch" booking form (WhatsApp)
   ===================================================================== */
.ysbf{
  background:var(--ys-green-800,#16311f);
  border:1px solid rgba(255,255,255,.08);
 
  padding:30px 28px 28px;
  box-shadow:0 30px 60px -34px rgba(10,24,15,.7);
  position:sticky; top:96px;
}
.ysbf__title{
  font-family:var(--ys-serif,"Fraunces",serif);
  font-weight:600; text-transform:uppercase; letter-spacing:.5px;
  font-size:30px; line-height:1.1; color:#fff; margin:0;
}
 
.ysbf__rule{ display:block; width:46px; height:3px; background:#7c1f2c; margin:12px 0 14px; }
.ysbf__lead{
  color:rgba(255,255,255,.72); font-size:13.5px; line-height:1.7; margin:0 0 18px;
}
.ysbf__contact{ list-style:none; margin:0 0 22px; padding:0 0 20px; border-bottom:1px solid rgba(255,255,255,.1); }
.ysbf__contact li{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.ysbf__contact i{ color:var(--ys-gold-600); font-size:14px; }
.ysbf__contact a{ color:#fff; font-size:14px; font-weight:600; text-decoration:none; }
.ysbf__contact a:hover{ color:var(--ys-gold-600); }

.ysbf__form{ display:flex; flex-direction:column; gap:14px; }
.ysbf__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ysbf__field{ display:flex; flex-direction:column; }
.ysbf__field label{
  font-family:var(--ys-serif,"Fraunces",serif);
  font-size:11.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--ys-gold-600); margin-bottom:6px;
}
.ysbf__field label span{ color:#e06666; }
.ysbf__field input,
.ysbf__field select,
.ysbf__field textarea{
  width:100%; font-family:var(--ys-sans); font-size:14px; color:var(--ys-ink);
  background:#eef1ec; border:1px solid transparent; 
  padding:12px 13px; outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.ysbf__field textarea{ resize:vertical; min-height:96px; }
.ysbf__field input::placeholder,
.ysbf__field textarea::placeholder{ color:#8a938a; }
.ysbf__field input:focus,
.ysbf__field select:focus,
.ysbf__field textarea:focus{
  border-color:var(--ys-gold-600); box-shadow:0 0 0 3px rgba(201,143,44,.22);
}
.ysbf__submit{
  margin-top:6px; width:100%; border:0; cursor:pointer;
  background:#7c1f2c; color:#fff;
  font-family:var(--ys-serif,"Fraunces",serif);
  font-weight:600; letter-spacing:1.4px; text-transform:uppercase; font-size:14px;
  padding:15px 16px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:background .2s ease, transform .2s ease;
}
.ysbf__submit i{ font-size:16px; }
.ysbf__submit:hover{ background:#651823; transform:translateY(-2px); }

@media (max-width:767px){
  .ysbf{ position:static; }
}