/* Jolita Safari — shared styles
   Palette comes from the logo: espresso brown ("Jolita") + rhino tan ("Safari"). */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('../fonts/cabinet-grotesk-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('../fonts/cabinet-grotesk-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('../fonts/cabinet-grotesk-700.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap
}

:root {
  --canvas: #DCBF9A;
  --sand: #DCBF9A;
  --bark: #352317;
  --bark-2: #47311F;
  --tan: #B07E4A;
  --pop: #EFB54A;
  --pop-hi: #F5C467;
  --cream: #F4ECDF;
  --paper: #FBF7F1;
  --ink: #2B1B10;
  --cr: #F5EDD8;
  --gap: 20px;
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;
  --pad: clamp(28px, 5vw, 72px)
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

[hidden] {
  display: none !important
}

html {
  scroll-behavior: smooth
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Cabinet Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

img {
  display: block;
  max-width: 100%;
  height: auto
}

.i {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -.125em;
  flex-shrink: 0
}

a {
  color: inherit
}

.page {
  max-width: 1680px;
  margin: 0 auto;
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap)
}

/* ---------- panels ---------- */
.pn {
  background: var(--bark);
  color: var(--cr);
  border-radius: var(--r-lg);
  padding: var(--pad);
  position: relative
}

.pn.lt {
  background: var(--cream);
  color: var(--ink)
}

.pn.pop {
  background: var(--pop);
  color: var(--ink)
}

/* ---------- type ---------- */
.h-xl,
.h-lg {
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.02
}

.h-xl {
  font-size: clamp(38px, 3.7vw, 60px)
}

.h-lg {
  font-size: clamp(34px, 4.2vw, 62px)
}

.h-md {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.08
}

.h-xl em,
.h-lg em,
.h-md em {
  font-style: normal
}

.lead {
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 44ch
}

.hi {
  display: inline-block;
  height: .9em;
  width: auto;
  vertical-align: -.08em;
  margin: 0 .14em;
  transform: rotate(-8deg)
}

.sh-c {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 56px)
}

.sh-c .lead {
  margin: 18px auto 0;
  opacity: .8
}

.sh-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 52px)
}

.sh-row .lead {
  opacity: .8
}

/* ---------- buttons, chips, pills ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 24px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .25s, background .25s, color .25s, border-color .25s
}

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

.btn.pop {
  background: var(--pop);
  color: var(--ink)
}

.btn.pop:hover {
  background: var(--pop-hi)
}

.btn.sand {
  background: var(--sand);
  color: var(--ink)
}

.btn.sand:hover {
  background: #E7CDAA
}

.btn.dark {
  background: var(--bark);
  color: var(--cr)
}

.btn.dark:hover {
  background: var(--bark-2)
}

.btn.ghost {
  border-color: rgba(245, 237, 216, .45);
  color: var(--cr)
}

.btn.ghost:hover {
  background: var(--cr);
  border-color: var(--cr);
  color: var(--ink)
}

.lt .btn.ghost,
.pop .btn.ghost {
  border-color: rgba(43, 27, 16, .3);
  color: var(--ink)
}

.lt .btn.ghost:hover,
.pop .btn.ghost:hover {
  background: var(--bark);
  border-color: var(--bark);
  color: var(--cr)
}

.btn.sm {
  padding: 12px 18px;
  font-size: 14px
}

.lnk {
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px
}

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

.chip {
  padding: 13px 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(245, 237, 216, .45);
  background: transparent;
  color: var(--cr);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s
}

.chip:hover {
  border-color: var(--cr)
}

.chip.on {
  background: var(--cr);
  border-color: var(--cr);
  color: var(--ink)
}

.tagp {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(246, 239, 228, .84);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 22px rgba(43, 27, 16, .14)
}

/* ---------- floating nav bar ---------- */
.bar {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 900;
  width: min(1180px, calc(100% - 24px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 8px 8px 18px;
  background: rgba(246, 239, 228, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(43, 27, 16, .2);
  transform: translate(-50%, -160%);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1)
}

.bar.sc {
  transform: translate(-50%, 0)
}

.logo img {
  height: 46px;
  width: auto
}

.nl {
  display: flex;
  gap: 28px;
  list-style: none
}

.nl a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  opacity: .78;
  transition: opacity .2s;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px
}

.nl a:hover,
.nl a.on {
  opacity: 1
}

.nl a.on {
  text-decoration-line: underline
}

.hbg {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 12px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--bark);
  cursor: pointer
}

.hbg span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--cr)
}

.mm {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bark);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px
}

.mm.op {
  display: flex
}

.mm a {
  color: var(--cr);
  text-decoration: none;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.022em;
  transition: color .2s
}

.mm a:hover {
  color: var(--pop)
}

.mm .btn {
  margin-top: 18px;
  font-size: 16px;
  letter-spacing: 0
}

.mm .btn:hover {
  color: var(--ink)
}

.mmc {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 237, 216, .35);
  background: none;
  color: var(--cr);
  font-size: 18px;
  cursor: pointer
}

/* ---------- split hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 10px;
  height: calc(100vh - 2 * var(--gap));
  min-height: 660px;
  max-height: 980px
}

.hero-l {
  display: flex;
  flex-direction: column;
  padding: 22px clamp(20px, 4vw, 56px) 36px
}

.hnav {
  justify-content: center;
  color: var(--cr)
}

.hcnt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 28px;
  padding: 32px 0 8px
}

.hcnt .lead {
  opacity: .86
}

.hrhino {
  width: clamp(150px, 15vw, 220px);
  height: auto
}

.hbtns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center
}

.bc {
  font-size: 13px;
  font-weight: 500;
  opacity: .6
}

.bc a {
  text-decoration: none
}

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

.hmeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 460px);
  text-align: left
}

.hmi {
  background: var(--bark-2);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font-size: 12.5px;
  opacity: .95;
  color: rgba(245, 237, 216, .7)
}

.hmi strong {
  display: block;
  color: var(--cr);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
  line-height: 1.25
}

.hero-r {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--paper)
}

.hero-r>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kb 26s ease-in-out infinite alternate
}

@keyframes kb {
  from {
    transform: scale(1.02)
  }

  to {
    transform: scale(1.1)
  }
}

.hero-r::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43, 27, 16, .08), rgba(43, 27, 16, 0) 30%, rgba(43, 27, 16, .22));
  pointer-events: none
}

.htop {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.hlogo {
  display: block;
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(246, 239, 228, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px)
}

.hlogo img {
  height: 46px;
  width: auto
}

.orbit {
  position: absolute;
  inset: 0;
  z-index: 2
}

.orbit .tagp {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  animation: bob 7s ease-in-out infinite;
  animation-delay: var(--d, 0s)
}

@keyframes bob {
  50% {
    transform: translate(-50%, calc(-50% - 7px))
  }
}

.ring {
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(46%, 300px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff
}

.ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 6deg, rgba(255, 250, 240, .42) 0 50deg, rgba(255, 250, 240, 0) 50deg 60deg);
  -webkit-mask: radial-gradient(farthest-side, transparent 57%, #000 58%);
  mask: radial-gradient(farthest-side, transparent 57%, #000 58%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: spin 60s linear infinite
}

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

.ring::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(rgba(43, 27, 16, .5), rgba(43, 27, 16, .22));
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px)
}

.ring span {
  position: relative;
  z-index: 1;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45)
}

.ring strong {
  display: block;
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1
}

/* ---------- media + feature cards (bento) ---------- */
.media {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  min-height: 200px
}

.media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s
}

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

.media .tagp {
  position: absolute;
  left: 14px;
  bottom: 14px
}

.fcard {
  border-radius: var(--r-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 300px
}

.fcard.pop {
  background: var(--pop);
  color: var(--ink)
}

.fcard.sand {
  background: var(--sand);
  color: var(--ink)
}

.fcard.dk {
  background: var(--bark-2);
  color: var(--cr)
}

.fcard.bk {
  background: var(--bark);
  color: var(--cr)
}

.fcard.lt {
  background: var(--paper);
  color: var(--ink)
}

.fcard h3 {
  font-size: clamp(24px, 2.2vw, 31px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.06
}

.fcard p {
  font-size: 14.5px;
  line-height: 1.6
}

.fcard p+p,
.fcard h3+p {
  margin-top: 12px
}

.fcard .lnk {
  display: inline-block;
  margin-top: 16px
}

.ic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 19px;
  background: rgba(43, 27, 16, .1)
}

.dk .ic,
.bk .ic {
  background: rgba(245, 237, 216, .1);
  color: var(--pop)
}

.num {
  font-size: 15px;
  font-weight: 600;
  opacity: .55
}

.bento {
  display: grid;
  grid-template-columns: 1fr 1.05fr 1.25fr;
  gap: 14px
}

.bcol {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.bcol>.fcard {
  flex: 1
}

.grid2,
.grid3,
.grid4 {
  display: grid;
  gap: 14px
}

.grid2 {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.grid3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.grid4 {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.stats.row {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.stat {
  border-radius: var(--r-md);
  padding: 22px 24px;
  background: var(--bark);
  color: var(--cr)
}

.stat b {
  display: block;
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--pop)
}

.stat span {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  opacity: .75
}

.stat.pop {
  background: var(--pop);
  color: var(--ink)
}

.stat.pop b {
  color: var(--ink)
}

.stat.lt {
  background: var(--cream);
  color: var(--ink)
}

.stat.lt b {
  color: var(--tan)
}

/* ---------- tour cards (title over image) ---------- */
.tcard {
  position: relative;
  display: block;
  height: clamp(360px, 31vw, 470px);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none
}

.tcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s
}

.tcard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--paper) 0%, rgba(251, 247, 241, .86) 20%, rgba(251, 247, 241, 0) 48%)
}

.tcard:hover img {
  transform: scale(1.06)
}

.tcard .tt {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 24px;
  right: 24px
}

.tcard .meta {
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 500;
  opacity: .7
}

.tcard .go {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pop);
  color: var(--ink);
  font-size: 18px;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s, transform .3s
}

.tcard:hover .go {
  opacity: 1;
  transform: none
}

.dgrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px
}

.dgrid>* {
  grid-column: span 2
}

.dgrid>:nth-child(-n+2) {
  grid-column: span 3;
  height: clamp(380px, 34vw, 520px)
}

/* dark variant: cream title over a dark top fade */
.tcard.dk {
  background: var(--bark-2);
  color: var(--cr)
}

.tcard.dk::before {
  background: linear-gradient(180deg, rgba(30, 20, 12, .78) 0%, rgba(30, 20, 12, .35) 32%, rgba(30, 20, 12, 0) 55%, rgba(30, 20, 12, .55) 100%)
}

.tcard .desc {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 22px;
  font-size: 14px;
  line-height: 1.55;
  max-width: 40ch
}

.tcard .desc .lnk {
  display: inline-block;
  margin-top: 10px
}

.tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px
}

/* ---------- featured card over photo ---------- */
.prem {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: clamp(540px, 46vw, 680px);
  background: var(--paper)
}

.prem>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.prem-card {
  position: absolute;
  right: clamp(16px, 7%, 110px);
  top: clamp(40px, 12%, 110px);
  bottom: 0;
  width: min(400px, 44%);
  padding: 32px;
  border-radius: 16px 16px 0 0;
  background: var(--sand);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px
}

.prem-card h2 {
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.04
}

.prem-card .price {
  margin-top: 10px;
  font-size: 20px
}

.prem-card p {
  font-size: 14.5px;
  line-height: 1.6
}

.prem-card ul {
  list-style: none;
  font-size: 14.5px;
  line-height: 1.75;
  margin-bottom: 22px
}

.prem-card li::before {
  content: '•';
  margin-right: 10px
}

.prem-card .tagp {
  align-self: flex-start;
  margin-bottom: 18px;
  box-shadow: none;
  background: rgba(246, 239, 228, .7)
}

/* split: copy on the left, photo card on the right */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch
}

.split .copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: clamp(8px, 2vw, 24px) 0
}

.split .copy p {
  font-size: 15.5px;
  line-height: 1.7;
  opacity: .85;
  max-width: 52ch
}

.split .media {
  min-height: 460px
}

.media .tagp.at {
  position: absolute;
  left: var(--x);
  top: var(--y);
  bottom: auto;
  transform: translate(-50%, -50%)
}

/* ---------- quotes ---------- */
.stars {
  color: var(--pop);
  letter-spacing: 3px;
  font-size: 15px
}

.pop .stars,
.fcard.pop .stars {
  color: var(--ink)
}

.fcard blockquote {
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.35
}

.fcard cite {
  font-style: normal;
  font-size: 13.5px;
  opacity: .7
}

/* ---------- CTA ---------- */
.cta {
  text-align: center;
  padding-top: clamp(64px, 9vw, 120px);
  padding-bottom: clamp(64px, 9vw, 120px);
  overflow: hidden
}

.cta .h-lg {
  max-width: 15ch;
  margin: 0 auto 20px
}

.cta p {
  max-width: 46ch;
  margin: 0 auto 32px;
  font-size: 16px
}

.cta .deco {
  position: absolute;
  width: clamp(140px, 16vw, 240px);
  opacity: .9;
  pointer-events: none
}

.cta .deco.l {
  left: -30px;
  bottom: -30px;
  transform: scaleX(-1) rotate(8deg)
}

.cta .deco.r {
  right: 40px;
  top: 36px;
  width: clamp(48px, 5vw, 70px);
  transform: rotate(14deg)
}

.cta>* {
  position: relative
}

/* ---------- footer ---------- */
.foot {
  background: var(--bark);
  color: var(--cr);
  border-radius: var(--r-lg);
  padding: clamp(36px, 5vw, 64px) var(--pad) 28px
}

.fg {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin-bottom: 48px
}

.flogo {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--cream);
  margin-bottom: 20px
}

.flogo img {
  height: 54px;
  width: auto
}

.fabout {
  font-size: 15px;
  opacity: .72;
  max-width: 34ch
}

.fc h4 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 16px
}

.fc ul {
  list-style: none
}

.fc li {
  margin-bottom: 9px
}

.fc a {
  font-size: 15px;
  text-decoration: none;
  opacity: .75;
  transition: opacity .2s, color .2s
}

.fc a:hover {
  opacity: 1;
  color: var(--pop)
}

.fb {
  border-top: 1px solid rgba(245, 237, 216, .12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap
}

.fc2 {
  font-size: 13px;
  opacity: .55
}

.fsr {
  display: flex;
  gap: 8px
}

.fsr a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 237, 216, .3);
  display: grid;
  place-items: center;
  text-decoration: none;
  font-size: 15px;
  transition: all .25s
}

.fsr a:hover {
  background: var(--pop);
  border-color: var(--pop);
  color: var(--ink)
}

/* simple footer used on the safari detail pages */
.footer-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px
}

.footer-in p {
  font-size: 13px;
  opacity: .6
}

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

.footer-links a {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(245, 237, 216, .3);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all .25s
}

.footer-links a:hover {
  background: var(--cr);
  border-color: var(--cr);
  color: var(--ink)
}

/* ---------- reveal ---------- */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .75s ease, transform .75s ease
}

.rv.vi {
  opacity: 1;
  transform: none
}

/* ======================================================
   Page-specific pieces
   ====================================================== */

/* safaris: contact pills */
.cpills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px
}

.cp {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--paper);
  text-decoration: none;
  transition: transform .25s
}

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

.cp .ic {
  flex-shrink: 0;
  background: var(--pop);
  color: var(--ink);
  font-size: 17px
}

.cp strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3
}

.cp small {
  font-size: 13px;
  opacity: .65
}

/* safaris: collection cards */
.srows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.sr2 {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none
}

.si2 {
  position: relative;
  height: clamp(220px, 22vw, 300px);
  overflow: hidden;
  margin: 8px 8px 0;
  border-radius: 12px
}

.si2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s
}

.sr2:hover .si2 img {
  transform: scale(1.06)
}

.si2 .tagp {
  position: absolute;
  top: 14px;
  left: 14px
}

.sc3 {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1
}

.ttags,
.tpks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.ttag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tan)
}

.ttag+.ttag::before {
  content: '·';
  margin-right: 6px
}

.sr2 .tt {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.06
}

.sr2 .tt em {
  font-style: normal;
  opacity: .55
}

.td {
  font-size: 14.5px;
  line-height: 1.6;
  opacity: .8
}

.tme {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px
}

.tm2 {
  background: var(--cream);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  opacity: .9
}

.tm2 strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3
}

.tpk {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(43, 27, 16, .16);
  font-size: 13px;
  font-weight: 500
}

.vbtn {
  margin-top: auto;
  align-self: flex-start
}

/* about: team */
.tm {
  height: clamp(380px, 34vw, 520px)
}

/* contact: form */
.cgrid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 14px;
  align-items: start
}

.cform-wrap {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: clamp(24px, 3.5vw, 44px)
}

.cform-wrap h2 {
  margin-bottom: 28px
}

.frow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px
}

.frow label {
  font-size: 13px;
  font-weight: 600
}

.frow input,
.frow select,
.frow textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1.5px solid rgba(43, 27, 16, .14);
  background: var(--cream);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .2s, background .2s
}

.frow input:focus,
.frow select:focus,
.frow textarea:focus {
  border-color: var(--tan);
  background: #fff
}

.frow textarea {
  min-height: 140px;
  resize: vertical
}

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

.fsub {
  width: 100%;
  margin-top: 6px
}

.cinfo {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.ccard {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 4px 16px;
  align-items: center;
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--paper)
}

.ccard .ic {
  grid-row: span 2;
  background: var(--cream);
  color: var(--tan)
}

.ccard h4 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .6
}

.ccard a,
.ccard>p:not(.note) {
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4
}

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

.ccard p {
  font-size: 13.5px;
  line-height: 1.5
}

.ccard .note {
  grid-column: 2;
  opacity: .65;
  font-weight: 400
}

.ccard.pop {
  background: var(--pop)
}

.ccard.pop .ic {
  background: var(--bark);
  color: var(--pop)
}

/* contact: faq */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 920px;
  margin: 0 auto
}

.faq-item {
  background: var(--bark-2);
  border-radius: var(--r-md);
  overflow: hidden
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: -.01em;
  cursor: pointer
}

.faq-q span {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(245, 237, 216, .1);
  font-size: 20px;
  transition: transform .3s, background .3s, color .3s
}

.faq-item.open .faq-q span {
  transform: rotate(45deg);
  background: var(--pop);
  color: var(--ink)
}

.faq-a {
  display: none;
  padding: 0 24px 24px;
  font-size: 15px;
  line-height: 1.7;
  opacity: .82;
  max-width: 72ch
}

.faq-item.open .faq-a {
  display: block
}

/* ---------- safari detail pages ---------- */
.hero.dt h1 {
  font-size: clamp(34px, 3.4vw, 54px)
}

.hero.dt h1 em {
  display: block;
  margin-top: 12px;
  font-size: .44em;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--sand)
}

.sbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start
}

.ssidebar {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.sblock {
  margin-bottom: clamp(44px, 5vw, 64px)
}

.sblock:last-child {
  margin-bottom: 0
}

.btitle {
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.05;
  margin-bottom: 24px
}

.btitle em {
  font-style: normal
}

.intro {
  font-size: 16.5px;
  line-height: 1.7;
  opacity: .85;
  max-width: 68ch
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 14px;
  font-weight: 500
}

.pill .i {
  color: var(--tan)
}

.day-card {
  background: var(--paper);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow .3s
}

.day-card.open {
  box-shadow: 0 14px 40px rgba(43, 27, 16, .08)
}

.day-hd {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 18px 14px 14px;
  cursor: pointer
}

.dnum {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--sand);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1
}

.dnum small {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .65;
  margin-top: 4px
}

.day-card.open .dnum {
  background: var(--pop)
}

.dtitle {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.25
}

.dsub {
  font-size: 13.5px;
  opacity: .6;
  margin-top: 3px
}

.dtog {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bark);
  color: var(--cr);
  font-size: 20px;
  transition: transform .3s
}

.day-card.open .dtog {
  transform: rotate(45deg)
}

.dbody {
  display: none;
  padding: 4px 24px 24px 96px
}

.day-card.open .dbody {
  display: block
}

.dbody p {
  font-size: 15.5px;
  line-height: 1.7;
  opacity: .85;
  margin-bottom: 14px
}

.dbody ul {
  list-style: none
}

.dbody ul li {
  position: relative;
  padding: 4px 0 4px 24px;
  font-size: 15px;
  line-height: 1.6;
  opacity: .85
}

.dbody ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--tan);
  font-weight: 600
}

.dacc {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 12px 12px 14px;
  border-radius: 14px;
  background: var(--cream)
}

.dacc-ico {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sand);
  flex-shrink: 0
}

.dacc-info {
  flex: 1;
  min-width: 0
}

.dacc-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3
}

.dacc-type {
  font-size: 13px;
  opacity: .6
}

.dacc-link {
  flex-shrink: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bark);
  color: var(--cr);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s
}

.dacc-link:hover {
  background: var(--bark-2)
}

.ie-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.inc-block,
.exc-block {
  border-radius: var(--r-md);
  padding: 28px
}

.inc-block {
  background: var(--bark);
  color: var(--cr)
}

.exc-block {
  background: var(--sand);
  color: var(--ink)
}

.inc-block h4,
.exc-block h4 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.02em;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px
}

.inc-block h4 .i {
  color: var(--pop)
}

.inc-item,
.exc-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.55
}

.inc-item::before,
.exc-item::before {
  content: '';
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-top: 5px;
  -webkit-mask: var(--mk) center / contain no-repeat;
  mask: var(--mk) center / contain no-repeat
}

.inc-item::before {
  --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  background: var(--pop)
}

.exc-item::before {
  --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  background: #7A4B22
}

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

.gallery img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px
}

.scta {
  background: var(--pop);
  border-radius: var(--r-md);
  padding: 28px
}

.scta h3 {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: 8px
}

.scta p {
  font-size: 14px;
  margin-bottom: 22px;
  opacity: .8
}

.scta a {
  display: block;
  padding: 15px;
  border-radius: var(--r-sm);
  background: var(--bark);
  color: var(--cr);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .25s
}

.scta a:hover {
  background: var(--bark-2)
}

.qfacts {
  background: var(--bark);
  color: var(--cr);
  border-radius: var(--r-md);
  padding: 26px
}

.qfacts h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.02em;
  margin-bottom: 10px;
  color: var(--pop)
}

.frow2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(245, 237, 216, .12)
}

.frow2:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.flabel {
  font-size: 13px;
  opacity: .6;
  flex-shrink: 0
}

.fval {
  font-size: 14.5px;
  font-weight: 500;
  text-align: right
}

.scontact {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 24px
}

.scontact p {
  font-size: 14px;
  opacity: .7;
  margin-bottom: 12px
}

.scontact a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none
}

.scontact a .i {
  width: 18px;
  color: var(--tan)
}

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

/* ---------- destination guides ---------- */
.stat.sand {
  background: var(--sand);
  color: var(--ink)
}

.stat.sand b {
  color: var(--ink)
}

.fcard.sm {
  min-height: 240px
}

.fcard .tagp {
  align-self: flex-start;
  box-shadow: none
}

.fcard.lt .tagp {
  background: var(--sand)
}

.grid5 {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr))
}

.months {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px
}

.mo {
  border-radius: 12px;
  padding: 12px 6px 10px;
  background: var(--paper);
  text-align: center;
  font-size: 14px;
  font-weight: 700
}

.mo b {
  display: block;
  height: 8px;
  border-radius: 4px;
  margin: 10px 4px 8px
}

.mo i {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  opacity: .6
}

.mo.peak b {
  background: var(--pop)
}

.mo.good b {
  background: var(--tan)
}

.mo.wet b {
  background: rgba(43, 27, 16, .16)
}

.gal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 15vw, 230px);
  gap: 12px
}

.gal .media {
  min-height: 0
}

.gal .media:first-child {
  grid-column: span 2;
  grid-row: span 2
}

.gal .media:nth-child(4),
.gal .media:nth-child(5),
.gal .media:nth-child(6) {
  grid-column: span 2
}

.gal .media:nth-child(5):last-child {
  grid-column: span 4
}

.credits {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.6;
  opacity: .62
}

.credits a {
  text-underline-offset: 2px
}

/* photos inside each itinerary day */
.dpics {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-auto-rows: clamp(150px, 15vw, 220px);
  gap: 8px;
  margin: 4px 0 18px
}

.dpics .media {
  min-height: 0;
  border-radius: 14px
}

.dpics .media .tagp {
  left: 12px;
  bottom: 12px;
  padding: 7px 12px;
  font-size: 11px
}

/* photo credits page */
.credit-list {
  columns: 2 360px;
  column-gap: 48px
}

.cgroup {
  break-inside: avoid;
  margin-bottom: 32px
}

.cgroup h2 {
  margin-bottom: 12px
}

.cgroup ul {
  list-style: none;
  font-size: 13.5px;
  line-height: 1.55
}

.cgroup li {
  padding: 7px 0;
  border-bottom: 1px solid rgba(43, 27, 16, .1);
  overflow-wrap: anywhere
}

.cgroup a {
  text-underline-offset: 2px
}

/* ======================================================
   Responsive
   ====================================================== */
@media (max-width: 1200px) {
  .bento {
    grid-template-columns: 1fr 1fr
  }

  .bento .bcol:last-child {
    grid-column: 1 / -1
  }

  .grid4 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .grid5 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .dgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .dgrid>*,
  .dgrid>:nth-child(-n+2) {
    grid-column: auto
  }

  .dgrid>:first-child {
    grid-column: 1 / -1
  }

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

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

  .ssidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

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

@media (max-width: 900px) {
  .bar {
    transform: translate(-50%, 0)
  }

  .bar .nl,
  .bar .btn {
    display: none
  }

  .hbg {
    display: flex
  }

  .logo img {
    height: 40px
  }

  .page {
    padding-top: 80px
  }

  .hero {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    max-height: none
  }

  .hnav,
  .htop {
    display: none
  }

  .hero-l {
    padding: 36px 16px 32px
  }

  .hcnt {
    padding: 0;
    gap: 22px
  }

  .hero-r {
    height: min(68vh, 520px)
  }

  .split,
  .cgrid {
    grid-template-columns: 1fr
  }

  .split .media {
    min-height: 360px
  }

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

  .months {
    grid-template-columns: repeat(6, minmax(0, 1fr))
  }

  .gal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 180px
  }

  .gal .media:nth-child(n) {
    grid-column: span 1;
    grid-row: span 1
  }

  .gal .media:nth-child(5):last-child {
    grid-column: span 1
  }

  .gal .media:first-child,
  .gal .media:nth-child(even):last-child {
    grid-column: span 2
  }

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

  .stats.row {
    grid-template-columns: 1fr 1fr
  }

  .prem {
    min-height: 0;
    display: flex;
    flex-direction: column
  }

  .prem>img {
    position: relative;
    height: 340px
  }

  .prem-card {
    position: relative;
    inset: auto;
    width: auto;
    margin: -60px 14px 0;
    border-radius: 16px 16px 0 0
  }

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

  .dbody {
    padding: 4px 20px 22px
  }

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

@media (max-width: 640px) {
  :root {
    --gap: 10px;
    --r-lg: 22px;
    --pad: 22px 18px
  }

  .page {
    padding-top: 76px
  }

  .bento,
  .grid2,
  .grid3,
  .grid4,
  .grid5,
  .dgrid,
  .fg {
    grid-template-columns: 1fr
  }

  .dgrid>:nth-child(-n+2) {
    height: 400px
  }

  .fcard {
    min-height: 240px
  }

  .tcard {
    height: 400px
  }

  .orbit .tagp {
    padding: 7px 11px;
    font-size: 10.5px
  }

  .orbit .tagp:nth-of-type(n+7) {
    display: none
  }

  .ring {
    width: 52%
  }

  .tools {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch
  }

  .tools .chips {
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -18px;
    padding: 0 18px 4px;
    scrollbar-width: none
  }

  .chip {
    flex-shrink: 0
  }

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

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

  .day-hd {
    grid-template-columns: 52px 1fr auto;
    gap: 12px
  }

  .dnum {
    width: 52px;
    height: 52px;
    font-size: 18px
  }

  .dacc {
    flex-wrap: wrap
  }

  .dacc-info {
    flex: 1 1 160px
  }

  .dacc-link {
    margin-left: 56px
  }

  .cta .deco.r {
    display: none
  }

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

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

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

  .rv {
    opacity: 1;
    transform: none
  }
}