/* ============================================================
   Evergreen Travels — built to the Figma "Desktop - 38" board
   Canvas: 1440px. All px values below are canvas-true.
   ============================================================ */

:root{
  --ink:            #363636;   /* headline, rgba(0,0,0,.79) */
  --ink-strong:     #2A2A2A;
  --ink-soft:       #4B4B4B;
  --ink-mute:       #6B6B6B;
  --green:          #6E8A50;   /* accent word */
  --green-deep:     #143725;   /* badges, outlines */
  --cream:          #FBFAEE;   /* package cards, story band */
  --cream-line:     #E9E7D4;
  --sage-bar:       #E9EADC;   /* filter track */
  --pill-grey:      #F2F2F2;
  --dark:           #292929;
  --star:           #F88000;
  --maxw:           1280px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:#fff;
  color:var(--ink-soft);
  font-family:"Geist","Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4{ margin:0 }
p{ margin:0 }

/* ---------- shared ---------- */
.section-title{
  font-family:"Andika",sans-serif;
  font-weight:700;
  font-size:48px;
  line-height:1.15;
  letter-spacing:-.01em;
  color:#3A3A3A;
  text-align:center;
}
.section-title em{ font-style:normal; color:var(--green) }

.btn-dark{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 22px;
  border-radius:22px;
  background:var(--dark); color:#fff;
  font-family:"Geist",sans-serif; font-size:13px; font-weight:500;
  letter-spacing:-.01em;
  transition:background .18s ease, transform .18s ease;
}
.btn-dark:hover{ background:#111; transform:translateY(-1px) }

/* ============ NAV ============ */
/* Fixed and fully transparent at the top of the page; on scroll it collapses
   into a floating rounded bar (see pages.css section 3). Because it is fixed,
   the document needs the height back — body gets padding-top, except on pages
   whose hero photograph is meant to run under the bar (body.has-banner). */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:transparent;
  border-bottom:1px solid transparent;
}
body{ padding-top:84px }
body.has-banner{ padding-top:0 }
.nav__inner{
  margin:0 auto; height:84px; max-width:2400px;
  padding:0 80.5px 0 82.5px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav__logo img{ width:71px; height:auto }
.nav__links{ display:flex; gap:34.5px }
.nav__links a{
  font-family:"Inter",sans-serif;
  /* Figma specified 11.47px; that is unreadable in a browser, so this is a
     deliberate, client-approved deviation from the board — 2x the spec. */
  font-size:19px; font-weight:350;
  letter-spacing:-.01em;
  color:#111;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease;
}
.nav__links a:hover{ border-color:var(--green) }
.nav__cta{ font-size:15px }

/* ============ HERO ============ */
.hero{ padding:73px 24px 0; text-align:center }
.hero__pill{
  display:inline-block;
  background:var(--pill-grey);
  border-radius:12px;
  padding:5px 14px;
  font-family:"Geist",sans-serif;
  font-size:11.5px; font-weight:400; letter-spacing:-.01em;
  color:#3B3B3B;
}
.hero__title{
  margin-top:8px;
  font-family:"Andika",sans-serif;
  font-weight:400;
  font-size:80px;
  line-height:1.15;
  letter-spacing:0;
  color:rgba(0,0,0,.79);
}
.hero__flag{
  display:inline-block; vertical-align:-4px;
  height:40px; width:auto; border-radius:4px;
  margin-left:10px;
}
.hero__sub{
  margin:22px auto 0; max-width:902px;
  font-family:"Andika",sans-serif;
  font-size:16.86px; line-height:1.48; letter-spacing:-.01em;
  color:#3E3E3E;
}
.hero__sub strong{ font-weight:700; color:#1F1F1F }

.btn-cta{
  margin-top:14px;
  display:inline-flex; align-items:center; gap:10px;
  padding:22px 24px;
  border-radius:19.19px;
  background:var(--ink-strong); color:#fff;
  font-family:"Geist",sans-serif; font-weight:500;
  font-size:18.32px; line-height:1; letter-spacing:-.03em;
  box-shadow:0 26px 44px -18px rgba(0,0,0,.55);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-cta:hover{ transform:translateY(-2px); box-shadow:0 32px 52px -18px rgba(0,0,0,.6) }
.btn-cta .arrow{ font-size:17px; line-height:1 }

/* ---- hero shot + stat bar ---- */
.hero-shot{ position:relative; margin:37px 0 0 }
.hero-shot img{ width:100%; height:auto }
.hero-shot__stats{
  position:absolute; left:0; right:0; bottom:0;
  padding:56px 80px 26px;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:linear-gradient(to top,rgba(16,26,36,.82) 0%,rgba(16,26,36,.55) 45%,rgba(16,26,36,0) 100%);
}
.stat{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  color:#fff;
}
.stat svg{ width:28px; height:28px }
.stat span{
  font-family:"Geist",sans-serif;
  font-size:15.5px; font-weight:400; letter-spacing:.055em;
}

/* ============ TOPO BACKGROUND ============ */
.topo{
  position:relative;
  background:#FFFDFB url("/assets/topo.webp") repeat;
  background-size:800px 800px;
}
.topo--gap{ height:127px }

.cutout{ position:absolute; z-index:5; pointer-events:none; user-select:none }

/* ============ EXPLORE ============ */
.explore{ position:relative; padding:133px 0 0 }
.cutout--dancer-l{ top:-128px; left:7px; width:462px; height:659px }

.bento{
  width:1142px; margin:56px auto 0;
  display:grid; grid-template-columns:555px 555px; gap:32px;
  align-items:start;
  position:relative; z-index:3;
}
.bento__col{ display:grid; gap:32px; align-content:start }
.bento__pair{ display:grid; grid-template-columns:262px 262px; gap:31px; height:373px }

.dcard{
  position:relative; overflow:hidden;
  border-radius:20px;
  background:#111;
  isolation:isolate;
}
.dcard img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.dcard:hover img{ transform:scale(1.045) }
.dcard::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.45) 26%,rgba(0,0,0,0) 55%);
}
.dcard__go{
  position:absolute; top:16px; right:16px; z-index:3;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(24,34,44,.72); color:#fff;
  backdrop-filter:blur(3px);
}
.dcard__go svg{ width:17px; height:17px }
.dcard__body{
  position:absolute; z-index:3; left:0; right:0; bottom:22px;
  padding:0 22px; text-align:center; color:#fff;
}
.dcard__body h3{ font-family:"Geist",sans-serif; font-weight:600; letter-spacing:-.02em }
.dcard__body p{ font-family:"Geist",sans-serif; opacity:.94 }
.dcard--sm .dcard__body h3{ font-size:22px }
.dcard--sm .dcard__body p{ font-size:14px; line-height:1.4; margin-top:5px }
.dcard--lg .dcard__body h3{ font-size:48px }
.dcard--lg .dcard__body p{ font-size:17px; margin-top:8px }

/* ============ PACKAGES ============ */
.packages{ position:relative; padding:171px 0 0 }
.filters{
  margin:44px auto 0; width:469px; height:52px;
  background:var(--sage-bar); border-radius:26px;
  display:flex; justify-content:space-between;
  align-items:center; padding:5px;
  position:relative; left:14px; z-index:3;
}
.filters__pill{
  height:42px; padding:0 14px; border:0; background:transparent; cursor:pointer;
  border-radius:21px;
  font-family:"Geist",sans-serif; font-size:15.5px; font-weight:400;
  letter-spacing:.04em; color:#4E5347;
  transition:background .2s ease, color .2s ease;
}
.filters__pill.is-active{ background:#fff; color:#20241C }

.pkg-grid{
  width:1230px; margin:45px auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:34.5px;
  position:relative; left:13.5px; z-index:3;
}
.pkg{
  position:relative;
  background:var(--cream);
  border:1px solid var(--cream-line);
  border-radius:20px;
  padding:24px;
  display:flex; flex-direction:column;
}
.pkg__media{ position:relative; border-radius:12px; overflow:hidden }
.pkg__media img{ width:100%; height:192px; object-fit:cover }
.pkg__days{
  position:absolute; top:16px; right:15px; z-index:2;
  background:var(--green-deep); color:#fff;
  border-radius:20px; padding:0 17px; height:26px;
  display:inline-flex; align-items:center;
  font-family:"Geist",sans-serif; font-size:14.5px; font-weight:400;
}
.pkg h3{
  margin-top:22px;
  font-family:"Geist",sans-serif; font-weight:400; font-size:33px;
  line-height:1.15; letter-spacing:-.02em; color:#1E1E1E;
}
.pkg > p{
  margin-top:14px;
  font-family:"Geist",sans-serif; font-size:16.5px; line-height:1.5;
  color:#4A4A4A;
}
.pkg hr{ margin:19px 0 0; border:0; border-top:1px solid #E4E2CE }
.pkg__stops{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px }
.pkg__stops li{
  display:flex; align-items:center; gap:10px; line-height:1.4;
  font-family:"Geist",sans-serif; font-size:16px; color:#20241C;
}
.pkg__stops svg{ width:17px; height:17px; flex:0 0 17px; color:var(--green-deep) }
.pkg__wa{
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:48px; margin-top:52px;
  border:1px solid var(--green-deep); border-radius:24px;
  font-family:"Geist",sans-serif; font-size:14px; letter-spacing:.055em;
  color:var(--green-deep);
  transition:background .2s ease, color .2s ease;
}
/* Cards in a row are the same height (grid default stretch), so the slack has
   to go somewhere inside the card rather than under it: the button block gets
   margin-top:auto and sits on the card foot, level across the row. */
.pkg-grid > .pkg > .pkg__stops{ margin-bottom:52px }
.pkg-grid > .pkg > .pkg__wa{ margin-top:auto }
.pkg__wa svg{ width:18px; height:18px }
.pkg__wa:hover{ background:var(--green-deep); color:#fff }

/* ============ REVIEWS ============ */
.reviews{ position:relative; padding:146px 0 0 }
.cutout--buddha{ top:-81px; right:-6px; width:515px; height:654px }

.score{
  margin-top:83px;
  display:flex; align-items:center; justify-content:center; gap:30px;
  position:relative; z-index:3;
}
.score__laurel{ height:147px; width:auto }
.score__num{
  font-family:"Geist",sans-serif; font-weight:400; font-size:94px;
  line-height:1; letter-spacing:-.02em; color:#1A1A1A; position:relative; top:-20px;
}

.breakdown{
  width:1084px; margin:33px auto 0;
  display:grid; grid-template-columns:repeat(6,1fr);
  position:relative; z-index:3;
}
.breakdown > div{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:16px 6px;
  border-left:1px solid #D9D9D9;
}
.breakdown > div:first-child{ border-left:0 }
.breakdown span{ font-family:"Geist",sans-serif; font-size:16.5px; color:#4A4A4A; text-align:center; white-space:nowrap }
.breakdown b{ font-family:"Geist",sans-serif; font-weight:400; font-size:28px; color:#111 }

/* Reviews marquee. The rail drifts on its own, edge to edge, and parks while
   the pointer is on it so a card can be read. Pure CSS — the track holds the
   six cards twice, so translating half its width loops seamlessly. */
.review-rail{
  width:100%; margin:148px 0 0;
  position:relative; z-index:3; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.review-track{
  display:flex; gap:40px; width:max-content;
  padding:6px 0 22px;
  animation:reviewMarquee 78s linear infinite;
}
.review-rail:hover .review-track,
.review-rail:focus-within .review-track{ animation-play-state:paused }
.review-track > .review{ flex:0 0 380px }
/* -50% lands mid-gap, so pull back half a gap to line the clone up exactly */
@keyframes reviewMarquee{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(calc(-50% - var(--rev-gap,20px)),0,0) }
}
@media (prefers-reduced-motion: reduce){
  .review-track{ animation:none; overflow-x:auto; width:auto; scrollbar-width:none }
  .review-track > .review[aria-hidden="true"]{ display:none }
}

.rail-nav{
  position:absolute; top:50%; z-index:4;
  width:44px; height:44px; margin-top:-22px;
  display:grid; place-items:center;
  border:1px solid var(--cream-line); border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--green-deep);
  backdrop-filter:blur(6px); cursor:pointer;
  box-shadow:0 8px 22px -12px rgba(30,40,20,.5);
  transition:opacity .2s ease, transform .2s ease, background .2s ease;
}
.rail-nav svg{ width:20px; height:20px }
.rail-nav:hover{ background:#fff; transform:scale(1.06) }
.rail-nav--prev{ left:-54px }
.rail-nav--next{ right:-54px }
/* JS marks the ends; with no JS both stay usable */
.rail-nav[disabled]{ opacity:0; pointer-events:none }
.rail-dots{
  display:flex; justify-content:center; gap:9px; margin-top:26px;
}
.rail-dots button{
  width:7px; height:7px; padding:0; border:0; border-radius:50%;
  background:#C9CDC2; cursor:pointer;
  transition:width .35s cubic-bezier(.4,0,.2,1), background .35s ease;
}
.rail-dots button[aria-selected="true"]{ width:22px; border-radius:4px; background:var(--green-deep) }

/* card lift; the track owns the horizontal motion, this is only the resting state */
.review{
  transition:transform .45s cubic-bezier(.22,.8,.3,1), box-shadow .45s ease;
}
.review:hover{ transform:translateY(-5px) }

.review header{ display:flex; align-items:center; gap:16px }
.review header img,
.review__av{
  flex:0 0 auto; width:58px; height:58px; border-radius:50%; object-fit:cover;
}
.review__av{
  display:grid; place-items:center;
  background:var(--av,#2F5D3A); color:#fff;
  font-family:"Geist",sans-serif; font-weight:500; font-size:19px; letter-spacing:.5px;
}
.review header b{ display:block; font-family:"Geist",sans-serif; font-size:16px; color:#111 }
.review header span{ display:block; margin-top:2px; font-family:"Geist",sans-serif; font-size:15px; color:#6B6B6B }
.review__stars{ margin-top:12px; color:var(--star); font-size:20px; letter-spacing:1px }
.review__stars .off{ color:#D9D6C8 }
/* half star: the same glyph, painted half gold half grey through the text */
.review__stars .half{
  background:linear-gradient(90deg,var(--star) 50%,#D9D6C8 50%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.review p{ margin-top:16px; font-family:"Geist",sans-serif; font-size:15px; line-height:1.55; color:#3F3F3F }

/* ============ OUR STORY ============ */
.story-head{ position:relative; padding:176px 0 189px }
.cutout--dragon{ top:-62px; left:-40px; width:773px; height:640px }

.story{ background:var(--cream); height:654px }
.story__inner{
  padding:0 76px 0 97px;
  height:100%;
  display:grid; grid-template-columns:588px 640px;
  justify-content:space-between; align-items:center;
}
.story__text p{
  font-family:"Geist",sans-serif; font-weight:300;
  font-size:23px; line-height:1.42; letter-spacing:.01em; color:#3D3D3D;
}
.story__text p + p{ margin-top:26px }
.story__text hr{ margin:44px 0 0; border:0; border-top:1px solid #DEDCC7 }
.story__stats{ margin:26px 0 0; display:flex; gap:56px }
.story__stats dt{ font-family:"Geist",sans-serif; font-size:20px; color:#20241C }
.story__stats dd{ margin:6px 0 0; font-family:"Geist",sans-serif; font-size:12px; letter-spacing:.08em; color:#5C5C5C }
.story__shot{ margin:0; align-self:start; margin-top:-24px }
.story__shot img{ width:640px; height:632px; object-fit:cover; border-radius:20px }
/* crossfading photo stack: incoming slide fades in above the previous one,
   so the background never bleeds through mid-transition */
.story__shot--slides{ position:relative }
.story__shot--slides img + img{ position:absolute; inset:0; width:100%; height:100%; opacity:0 }
.story__shot--slides img{ transition:opacity 1.3s ease }
.story__shot--slides.is-live img{ opacity:0 }
.story__shot--slides img.is-prev{ opacity:1; z-index:1 }
.story__shot--slides img.is-on{ opacity:1; z-index:2 }
@media (prefers-reduced-motion:reduce){ .story__shot--slides img + img{ display:none } }

/* ============ FOOTER ============ */
.footer{ position:relative; isolation:isolate }
.footer__bg{ width:100%; height:auto; display:block }
.footer__glass{
  position:absolute; bottom:71px; left:50%; transform:translateX(-50%);
  width:1082px; max-width:calc(100% - 48px);
  border-radius:32px;
  border:1px solid rgba(255,255,255,.62);
  background:rgba(255,255,255,.46);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.4);
  overflow:hidden;
}
.footer__top{
  padding:52px 60px 50px;
  display:grid; grid-template-columns:511px 167px 167px 1fr;
  border-bottom:1px solid rgba(255,255,255,.5);
}
.footer__brand img{ width:55px; height:auto }
.footer__brand p{
  margin-top:26px; max-width:248px;
  font-family:"Geist",sans-serif; font-size:16px; line-height:24px; color:#1E1E1E;
}
.footer__social{ margin-top:37px; display:flex; gap:12px }
.footer__social a{
  width:42px; height:42px; border-radius:11px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.65);
  background:rgba(255,255,255,.16);
  color:#1E1E1E;
  transition:background .2s ease;
}
.footer__social a:hover{ background:rgba(255,255,255,.42) }
.footer__social svg{ width:19px; height:19px }

.footer__col{ padding-top:5px }
.footer__col h4{
  font-family:"Geist",sans-serif; font-weight:500; font-size:15px;
  color:#41504A; margin-bottom:32px;
}
.footer__col a{
  display:block; margin-top:15px; line-height:16px;
  font-family:"Geist",sans-serif; font-size:16px; color:#111614;
  transition:opacity .18s ease;
}
.footer__col a:first-of-type{ margin-top:0 }
.footer__col a:hover{ opacity:.6 }

.footer__bar{
  padding:31px 60px;
  display:flex; align-items:center; justify-content:space-between;
  font-family:"Geist",sans-serif; font-size:16px; line-height:17px; color:#1C2321;
}
.footer__bar i{ font-style:normal; opacity:.5; margin:0 6px }

/* ============ RESPONSIVE ============ */
@media (max-width:1180px){
  .nav__inner{ padding:0 32px }
  .hero__title{ font-size:60px }
  .bento{
    grid-template-columns:1fr 1fr; grid-template-rows:none;
    grid-template-areas:"a b" "c c" "d d" "e e";
    gap:20px; max-width:720px;
  }
  .bento > [style*="grid-area:c"],
  .bento > [style*="grid-area:e"]{ height:400px }
  .bento > [style*="grid-area:d"]{ grid-column:auto; width:auto; height:400px }
  .pkg-grid{ grid-template-columns:1fr 1fr }
  .breakdown{ grid-template-columns:repeat(3,1fr); gap:8px 0 }
  .breakdown > div:nth-child(4){ border-left:0 }
  .cutout--buddha{ height:340px }
  .footer__top{ grid-template-columns:1fr 1fr }
}
@media (max-width:760px){
  .nav__links{ display:none }
  .nav__inner{ padding:0 20px }
  .hero{ padding-top:48px }
  .hero__title{ font-size:38px; letter-spacing:-.02em }
  .hero__flag{ height:26px }
  .hero__sub{ font-size:15px }
  .btn-cta{ font-size:16px; padding:18px 26px }
  .hero-shot__stats{ grid-template-columns:1fr 1fr; gap:18px; padding:40px 20px 22px }
  .stat span{ font-size:11px }
  .section-title{ font-size:30px }
  .bento{ grid-template-columns:1fr; grid-template-areas:"a" "b" "c" "d" "e" }
  .bento > .dcard{ height:300px !important; width:auto !important; grid-column:auto !important }
  .dcard--lg .dcard__body h3{ font-size:34px }
  .filters{ width:auto; margin:32px 20px 0 }
  .filters__pill{ font-size:11px }
  .pkg-grid{ grid-template-columns:1fr; padding:0 20px }
  .breakdown{ grid-template-columns:1fr 1fr }
  .breakdown > div:nth-child(odd){ border-left:0 }
  .review-track{ gap:20px; --rev-gap:10px }
  .review-track > .review{ flex:0 0 78vw }
  .review-rail{ margin-top:52px }
  .score__laurel{ height:64px }
  .score__num{ font-size:52px }
  .story__inner{ grid-template-columns:1fr; padding:64px 24px; gap:36px }
  .story__text p{ font-size:18px }
  .cutout{ display:none }
  .footer__glass{
    position:static; transform:none; width:auto; max-width:none;
    border-radius:0; background:rgba(255,255,255,.86);
  }
  .footer__bg{ display:none }
  .footer__top{ grid-template-columns:1fr; padding:40px 24px 32px }
  .footer__bar{ flex-direction:column; gap:12px; padding:20px 24px 28px; text-align:center }
}

/* ---------- hero kicker: "The Last Shangri-La" ---------- */
.hero__kicker{
  display:block;
  margin-bottom:6px;
  font-family:"Andika",sans-serif;
  font-weight:700;
  font-size:19px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--green);
}
@media (max-width:900px){ .hero__kicker{ font-size:15px; letter-spacing:.18em } }
@media (max-width:600px){ .hero__kicker{ font-size:12.5px; letter-spacing:.14em } }



/* the trust rail runs to 1230px, so its arrows only have gutter to sit in on
   wide screens; below that the track is swipe/dot driven */
@media (max-width:1345px){ .rail-nav{ display:none } }
.trust__rail .rail-dots{ margin-top:18px }