/* ============================================================
   SAHARA GO — MAIN STYLESHEET
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Josefin Sans',sans-serif;
  font-weight:400;
  font-size:15px;
  line-height:1.7;
  background:#f9f5f0;
  color:#1c1a17;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{cursor:pointer;background:none;border:none;font-family:inherit}

/* ── TOKENS ── */
:root{
  --wine:#3d1a12;
  --terra:#8b3a1e;
  --gold:#c9972b;
  --cream:#f9f5f0;
  --sand:#f0e8dc;
  --dark:#1c1a17;
  --muted:#888480;
  /* Header — BIG at top, compact when scrolled */
  --nav-h:200px;
  --nav-h-scrolled:72px;
  --logo-h:200px;
  --logo-h-scrolled:72px0px;
}

/* ── TYPE HELPERS ── */
.serif{font-family:'EB Garamond',Georgia,serif}
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.7rem}
.section-title{
  font-family:'EB Garamond',Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:clamp(2rem,4.5vw,3.5rem);
  line-height:1.15;color:var(--wine);
}
p{font-size:15px;line-height:1.85;color:rgba(28,26,23,.75)}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  padding:.75rem 2.2rem;border:1px solid var(--wine);color:var(--wine);
  transition:background .3s,color .3s;
}
.btn:hover{background:var(--wine);color:#fff}
.btn-cream{border-color:rgba(255,255,255,.6);color:#fff}
.btn-cream:hover{background:rgba(255,255,255,.18);border-color:#fff}
.btn-solid{background:var(--wine);color:#fff}
.btn-solid:hover{background:#2a0f0a}
.divider{width:44px;height:1px;background:rgba(61,26,18,.22);margin:1.4rem 0}

/* ============================================================
   HEADER — fixed top, transparent → solid on scroll
   ============================================================ */
#site-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h);
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:0 3.5rem;
  overflow:visible; /* CRITICAL: allow lang dropdown to extend below header */
  transition:background .5s cubic-bezier(.4,0,.2,1), box-shadow .5s cubic-bezier(.4,0,.2,1), height .45s cubic-bezier(.4,0,.2,1);
}
#site-header.scrolled{
  background:var(--wine);
  box-shadow:0 4px 32px rgba(0,0,0,.3);
  height:var(--nav-h-scrolled);
}

/* LEFT — menu button */
.hd-left{display:flex;align-items:center;flex-shrink:0}
.menu-btn{
  display:flex;align-items:center;gap:.9rem;color:#fff;
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;
}
.menu-btn .bars{display:flex;flex-direction:column;gap:7px}
.menu-btn .bars span{display:block;height:1px;background:#fff;transition:.45s}
.menu-btn .bars span:nth-child(1){width:26px}
.menu-btn .bars span:nth-child(2){width:26px}
.menu-btn .bars span:nth-child(3){width:16px}
.menu-btn.open .bars span:nth-child(1){transform:translateY(8px) rotate(45deg);width:26px}
.menu-btn.open .bars span:nth-child(2){opacity:0}
.menu-btn.open .bars span:nth-child(3){transform:translateY(-8px) rotate(-45deg);width:26px}

/* CENTER LOGO — desktop: centered in col 2 */
.hd-logo{display:flex;align-items:center;justify-content:center;cursor:pointer}
.hd-logo img{
  height:var(--logo-h);
  width:auto;
  max-width:420px;
  object-fit:contain;
  display:block;
  transition:height .55s cubic-bezier(.4,0,.2,1), max-width .55s cubic-bezier(.4,0,.2,1), opacity .2s;
  will-change:height;
}
.hd-logo:hover img{opacity:.85}
#site-header.scrolled .hd-logo img{
  height:var(--logo-h-scrolled) !important;
  max-width:240px;
}

/* RIGHT — lang selector + contact */
.hd-right{display:flex;align-items:center;justify-content:flex-end;gap:2rem}
.lang-sw{display:none} /* legacy, not used */
.lang-btn{
  color:rgba(255,255,255,.55);padding:.25rem .45rem;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;transition:color .2s,background .2s;
}
.lang-btn.active,.lang-btn:hover{color:#fff}
.lang-sep{color:rgba(255,255,255,.2);font-size:11px;user-select:none}

/* ── LANGUAGE DRAWER (globe button + dropdown) ── */
.lang-drawer{position:relative;display:flex;align-items:center}
.lang-trigger{
  display:flex;align-items:center;gap:.5rem;color:#fff;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  padding:.4rem .8rem;border:1px solid rgba(255,255,255,.35);
  transition:border-color .2s,background .2s;cursor:pointer;
  position:relative; /* stacking context for children */
}
.lang-trigger:hover{border-color:#fff;background:rgba(255,255,255,.1)}
/* Block pointer events on all children — click always lands on the button itself */
.lang-trigger *{pointer-events:none}
.lang-trigger svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0}
.lang-trigger .chevron{font-size:9px;transition:transform .3s;line-height:1}
.lang-drawer.open .lang-trigger .chevron{transform:rotate(180deg)}
.lang-trigger .current-lang{font-size:11px;letter-spacing:.18em}
.lang-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--wine);border:1px solid rgba(255,255,255,.18);
  min-width:90px;
  opacity:0;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .25s,transform .25s;
  z-index:400;
}
.lang-drawer.open .lang-dropdown{opacity:1;pointer-events:all;transform:translateY(0)}
.lang-option{
  display:block;width:100%;text-align:left;padding:.65rem 1rem;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.55);transition:color .2s,background .2s;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.lang-option:last-child{border-bottom:none}
.lang-option:hover,.lang-option.active{color:#fff;background:rgba(255,255,255,.12)}
.hd-contact-btn{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#fff;
  border:1px solid rgba(255,255,255,.38);padding:.5rem 1.5rem;transition:.25s;font-weight:600;
}
.hd-contact-btn:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* ============================================================
   MENU OVERLAY
   ============================================================ */

#menu-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: var(--wine); display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .72s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

#menu-overlay.open { transform: translateX(0) }

/* Header inside overlay — kept small regardless of --nav-h */
.ov-header {
  height: 80px;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 3.5rem;
  border-bottom: none;
  flex-shrink: 0;
}

/* Hide the site logo if it appears inside the overlay header */
.ov-header .hd-logo,
.ov-header img:not(.ov-deco-logo-img) {
  display: none;
}

.ov-close {
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase; font-weight: 600;
  color: rgba(255,255,255,.8); transition: color .2s;
  display: flex; align-items: center; gap: .5rem;
}
.ov-close:hover { color: #fff }

.ov-body { flex: 1; display: flex; overflow: hidden; min-height: 0; }

/* Left nav column */
.ov-nav-col {
  flex: 0 0 55%;
  display: flex; flex-direction: column;
  padding: 0 3.5rem 2rem 5rem;
  overflow-y: auto;
  justify-content: center;
  min-height: 0;
}

.ov-nav { list-style: none; }

/* NO separation lines */
.ov-nav > li {
  border-bottom: none;
}

.ov-nav-link {
  display: block; width: 100%; text-align: left;
  padding: 0.7rem 0;       /* reduced from 1.1rem to prevent overflow */
  position: relative; overflow: hidden;
}

.ov-nav-link .link-text {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);   /* slightly reduced to fit */
  color: #fff; line-height: 1;
  display: inline-block; white-space: nowrap;
  transition: transform .5s cubic-bezier(.4,0,.2,1), color .5s;
}

.ov-nav-link .link-line {
  position: absolute; left: -80px; top: 50%; height: 1px;
  background: var(--gold); width: 60px;
  transition: left .5s cubic-bezier(.4,0,.2,1);
}

.ov-nav-link:hover .link-text { transform: translateX(56px); color: var(--gold); }
.ov-nav-link:hover .link-line { left: -4px; }

.ov-sub { list-style: none; padding: .1rem 0 .6rem; }

.ov-sub li a, .ov-sub li button {
  display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.6); padding: .3rem 0; transition: color .2s;
  font-weight: 400; text-align: left; width: 100%;
}
.ov-sub li a:hover, .ov-sub li button:hover { color: #fff; }

/* Right decorative column — RESTORED, uniform color, no divider */
.ov-deco-col {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  border-left: none;           /* no divider line */
  position: relative; overflow: hidden;
  background: transparent;     /* same red as left, no dark tint */
}

.ov-deco-logo-img {
  height: min(40vw, 340px);
  width: auto; max-width: 90%;
  object-fit: contain;
  opacity: .88;
  position: relative; z-index: 1;
  display: block;
}

.ov-deco-star {
  font-size: 420px; line-height: 1; color: rgba(255,255,255,.025);
  font-family: 'EB Garamond', serif;
  user-select: none; pointer-events: none; position: absolute;
}

/* Footer — no top line */
.ov-footer {
  padding: 1.2rem 5rem;
  border-top: none;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .8rem; flex-shrink: 0;
}

.ov-footer-langs { display: flex; gap: 0; border: 1px solid rgba(255,255,255,.18); overflow: hidden; }

.ov-footer-langs button {
  color: rgba(255,255,255,.45); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; transition: color .2s, background .2s;
  padding: .5rem 1.2rem; border-right: 1px solid rgba(255,255,255,.12);
}
.ov-footer-langs button:last-child { border-right: none; }
.ov-footer-langs button.active { color: #fff; background: rgba(255,255,255,.15); }
.ov-footer-langs button:hover { color: #fff; background: rgba(255,255,255,.08); }

.ov-footer-soc { display: flex; gap: 1.2rem; }
.ov-footer-soc a {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.3); transition: color .2s;
}
.ov-footer-soc a:hover { color: #fff; }

/* ============================================================
   HERO
   ============================================================ */
#hero{position:relative;height:100vh;min-height:650px;overflow:hidden;background:#1a0d09}
.hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.6s ease;will-change:opacity;
}
.hero-slide.active{opacity:1;animation:kb  9s ease-out forwards}
.hero-slide.alt   {opacity:1;animation:kb2 9s ease-out forwards}
@keyframes kb  {from{transform:scale(1)}        to{transform:scale(1.1) translate(-1%,-1%)}}
@keyframes kb2 {from{transform:scale(1.04) translate(1%,1%)} to{transform:scale(1.12) translate(-1%,-1%)}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.25) 0%,transparent 45%,rgba(0,0,0,.55) 100%)}
.hero-content{
  position:absolute;bottom:22%;right:5rem;
  max-width:460px;text-align:right;z-index:2;color:#fff;
}
.hero-tagline{
  font-family:'EB Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.65;
  margin-bottom:2.2rem;font-weight:400;
  color:#ffffff;
  opacity:1;
  text-shadow:0 1px 24px rgba(0,0,0,.7), 0 0 40px rgba(0,0,0,.4);
}
.hero-dots{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;gap:.8rem;z-index:2}
.hero-dot{height:2px;background:rgba(255,255,255,.35);cursor:pointer;transition:width .45s,background .45s;width:18px;border:none;padding:0}
.hero-dot.active{width:36px;background:#fff}

/* ============================================================
   SECTION 2 — PARALLAX
   ============================================================ */
.section-gap{height:clamp(3rem,5vw,5rem);background:var(--cream)}
.parallax-section{position:relative;overflow:hidden;min-height:clamp(440px,62vh,720px);display:flex;align-items:center}
.parallax-bg{position:absolute;inset:-35% 0;background-size:cover;background-position:center;will-change:transform}
.parallax-overlay{position:absolute;inset:0;background:rgba(28,16,10,.62)}
.parallax-content{position:relative;z-index:1;width:100%;text-align:center;padding:5rem 2rem;color:#fff}
.parallax-content .section-title{color:#ffffff;opacity:1;margin-bottom:1.2rem}
.para-divider{width:44px;height:1px;background:rgba(255,255,255,.32);margin:1.6rem auto}
.para-eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#ffffff;opacity:1;margin-bottom:.8rem;display:block;font-weight:600}
.para-line{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#ffffff;opacity:1;line-height:2.5;font-weight:400}

/* ============================================================
   SECTION 3 — TOUR CARDS
   ============================================================ */
#tours-section{background:var(--cream);padding:5.5rem 0 4.5rem}
.tours-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:1400px;margin:0 auto;padding:0 2.5rem}
.tour-card{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:1/1}
.tour-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.8s ease}
.tour-card:hover img{transform:scale(1.07)}
.tour-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,5,2,.84) 0%,rgba(15,5,2,.22) 55%,transparent 100%)}
.tour-card-body{position:absolute;inset:0;padding:2.5rem 2.8rem;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}
.tc-badge{font-size:10px;letter-spacing:.28em;text-transform:uppercase;opacity:.65;margin-bottom:.5rem;font-weight:600}
.tc-dates{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-bottom:.9rem;font-weight:400}
.tc-title{font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(1.5rem,2.5vw,2.4rem);font-weight:400;line-height:1.22;margin-bottom:1.8rem}
.tc-btn{display:inline-flex;align-items:center;gap:.5rem;font-size:11px;letter-spacing:.25em;text-transform:uppercase;font-weight:600;border:1px solid rgba(255,255,255,.55);padding:.7rem 1.9rem;width:fit-content;transition:.3s}
.tc-btn:hover{background:rgba(255,255,255,.15);border-color:#fff}
.tours-controls{display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:2rem auto 0;padding:0 2.5rem;flex-wrap:wrap;gap:1rem}
.tours-arrows{display:flex;align-items:center;gap:1rem}
.arrow-btn{width:48px;height:48px;border:1px solid rgba(61,26,18,.28);display:flex;align-items:center;justify-content:center;color:var(--wine);transition:.2s;font-size:1.3rem}
.arrow-btn:hover{border-color:var(--wine);background:rgba(61,26,18,.06)}
.arrow-btn:disabled{opacity:.2;cursor:not-allowed}
.tours-counter{font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;font-weight:600}

/* ============================================================
   SECTION 4 — ENGAGEMENTS
   ============================================================ */
#engagements-section{background:var(--cream);padding:5.5rem 0}
.engagements-inner{max-width:1400px;margin:0 auto;padding:0 2.5rem;display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
.eng-text .section-title{margin-bottom:1.2rem}
.eng-text p{font-size:15px;line-height:2;margin-bottom:1rem}
.eng-text p:last-of-type{margin-bottom:2.2rem}
.eng-img{position:relative;overflow:hidden;aspect-ratio:3/4}
.eng-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.8s ease}
.eng-img:hover img{transform:scale(1.05)}

/* ============================================================
   SECTION 5 — GALLERY ROWS
   ============================================================ */
#gallery-section{background:var(--cream);padding:4.5rem 0;overflow:hidden}
.gallery-row{overflow:hidden;margin-bottom:6px}
.gallery-track{display:flex;gap:6px;width:max-content;cursor:grab}
.gallery-track.dragging{cursor:grabbing;animation-play-state:paused}
.gallery-track.left {animation:scroll-l 40s linear infinite}
.gallery-track.right{animation:scroll-r 40s linear infinite}
.gallery-track:hover{animation-play-state:paused}
@keyframes scroll-l{from{transform:translateX(0)}   to{transform:translateX(-50%)}}
@keyframes scroll-r{from{transform:translateX(-50%)} to{transform:translateX(0)}}
.gallery-item{flex-shrink:0;overflow:hidden;width:clamp(280px,34vw,480px);height:clamp(200px,26vw,370px)}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   SECTION 6 — IMMERSION
   ============================================================ */
#immersion-section{background:var(--cream)}
.immersion-inner{max-width:1400px;margin:0 auto;padding:5.5rem 2.5rem;display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
.imm-text .eyebrow{margin-bottom:.7rem}
.imm-text .section-title{margin-bottom:1.2rem}
.imm-divider{width:40px;height:1px;background:rgba(61,26,18,.22);margin-bottom:1.6rem}
.imm-text p{font-size:15px;line-height:2;margin-bottom:2.5rem}
.imm-img{position:relative;overflow:hidden;aspect-ratio:4/5}
.imm-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.8s ease}
.imm-img:hover img{transform:scale(1.05)}

/* ============================================================
   SECTION 7 — GUESTHOUSE
   ============================================================ */
#guesthouse-section{position:relative;overflow:hidden;height:clamp(460px,62vh,720px)}
.gh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 14s ease-out infinite alternate}
.gh-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.78) 0%,rgba(0,0,0,.36) 60%,rgba(0,0,0,.08) 100%)}
.gh-body{position:absolute;inset:0;display:flex;align-items:center;padding:0 6rem;color:#fff;z-index:1}
.gh-body .section-title{color:#fff;max-width:560px;margin-bottom:1.8rem}
.gh-link{font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;display:inline-flex;align-items:center;gap:.5rem;transition:.2s}
.gh-link:hover{border-color:#fff}

/* ============================================================
   SECTION 8 — BLOG
   ============================================================ */
#blog-section{background:var(--cream);padding:5.5rem 0}
.blog-header{display:flex;align-items:flex-end;justify-content:space-between;max-width:1400px;margin:0 auto 3rem;padding:0 2.5rem;flex-wrap:wrap;gap:1rem}
.blog-header .section-title{margin:0}
.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:1400px;margin:0 auto;padding:0 2.5rem}
.blog-card{display:block;cursor:pointer}
.blog-card-img{aspect-ratio:3/4;overflow:hidden;margin-bottom:1.2rem}
.blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.blog-card:hover .blog-card-img img{transform:scale(1.06)}
.blog-date{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;font-weight:600;display:block}
.blog-title{font-family:'EB Garamond',serif;font-style:italic;font-size:1.3rem;font-weight:400;line-height:1.38;color:var(--wine);margin-bottom:.8rem;transition:opacity .2s;display:block}
.blog-card:hover .blog-title{opacity:.68}
.blog-read{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(61,26,18,.55);font-weight:600;display:flex;align-items:center;gap:.4rem;transition:color .2s}
.blog-card:hover .blog-read{color:var(--wine)}

/* ============================================================
   SECTION 9 — INSTAGRAM
   ============================================================ */
#instagram-section{background:var(--cream);padding:5rem 0}
.insta-header{text-align:center;margin-bottom:2.5rem}
.insta-header .section-title{font-size:2.2rem}
.insta-hashtag{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-top:.4rem;font-weight:600;display:block}
.insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;max-width:1400px;margin:0 auto;padding:0 2.5rem}
.insta-tile{aspect-ratio:1;overflow:hidden;position:relative;cursor:pointer;display:block}
.insta-tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;filter:brightness(.85)}
.insta-tile:hover img{transform:scale(1.1);filter:brightness(1)}
.insta-tile-hover{position:absolute;inset:0;background:rgba(61,26,18,0);transition:background .4s;display:flex;align-items:center;justify-content:center}
.insta-tile:hover .insta-tile-hover{background:rgba(61,26,18,.58)}
.insta-icon{opacity:0;transition:opacity .3s;color:#fff;font-size:1.6rem}
.insta-tile:hover .insta-icon{opacity:1}

/* ============================================================
   SECTION 10 — PARALLAX CONTACT
   ============================================================ */
#contact-cta-section{position:relative;overflow:hidden;min-height:clamp(440px,60vh,680px);display:flex;align-items:center;justify-content:center;background:#1a0d09}
.contact-cta-content{position:relative;z-index:1;text-align:center;padding:4rem 2rem;color:#fff}
.contact-cta-content .section-title{color:#fff;font-size:clamp(2.2rem,5.5vw,4.5rem);margin-bottom:2.8rem}
.contact-cta-eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#ffffff;opacity:1;margin-bottom:1.2rem;display:block;font-weight:600}

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer{background:#180a06;color:rgba(255,255,255,.55);padding:5.5rem 0 2rem}
.footer-inner{max-width:1400px;margin:0 auto;padding:0 2.5rem;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:4.5rem}
.footer-logo-img{height:200px;width:auto;object-fit:contain;opacity:.75;margin-bottom:1rem;display:block}
.footer-logo-img:hover{opacity:1}
.footer-col h4{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:1.4rem;font-weight:700}
.footer-col p,.footer-col a{font-size:13px;letter-spacing:.05em;line-height:2.4;color:rgba(255,255,255,.52)}
.footer-col a:hover{color:#fff}
.footer-contact-btn{display:inline-flex;margin-top:1.5rem;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;border:1px solid rgba(255,255,255,.22);color:#fff;padding:.5rem 1.5rem;transition:.2s}
.footer-contact-btn:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.footer-col ul{list-style:none}
.footer-col ul li{margin:.5rem 0}
.footer-col ul li a{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);transition:color .2s;display:block}
.footer-col ul li a:hover{color:#fff}
.footer-bottom{max-width:1400px;margin:3.5rem auto 0;padding:1.5rem 2.5rem 0;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem}
.footer-legal{display:flex;gap:2rem;flex-wrap:wrap}
.footer-legal a{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.22);transition:color .2s}
.footer-legal a:hover{color:rgba(255,255,255,.6)}
.footer-copy{font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.18)}
.footer-soc{display:flex;gap:1.2rem}
.footer-soc a{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.28);transition:color .2s}
.footer-soc a:hover{color:#fff}

/* ============================================================
   PAGE HERO
   ============================================================ */
.page-hero{position:relative;overflow:hidden;height:clamp(500px,74vh,840px);display:flex;align-items:flex-end}
.page-hero-bg{position:absolute;inset:-35% 0;background-size:cover;background-position:center;will-change:transform}
.page-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.18),rgba(0,0,0,.64))}
.page-hero-content{position:relative;z-index:1;padding:0 3.5rem 4.5rem;max-width:1400px;margin:0 auto;width:100%}
.page-breadcrumb{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:.8rem;display:block;font-weight:600}
.page-hero-title{font-family:'EB Garamond',serif;font-style:italic;font-weight:400;font-size:clamp(2.8rem,7vw,6rem);color:#fff;line-height:1.05;white-space:pre-line}

/* ============================================================
   INNER PAGE SECTIONS
   ============================================================ */
.page-section{padding:5.5rem 0}
.page-section.alt{background:var(--sand)}
.page-inner{max-width:1400px;margin:0 auto;padding:0 2.5rem}
.page-inner.narrow{max-width:960px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}
.num-row{display:grid;grid-template-columns:80px 1fr;gap:2.2rem;border-bottom:1px solid rgba(61,26,18,.1);padding:2.5rem 0;align-items:start}
.num-row:last-child{border-bottom:none}
.num{font-family:'EB Garamond',serif;font-style:italic;font-size:4.5rem;font-weight:400;color:rgba(61,26,18,.1);line-height:1}
.num-title{font-family:'EB Garamond',serif;font-style:italic;font-size:1.4rem;font-weight:400;color:var(--wine);margin-bottom:.6rem}
.body-text{font-size:15px;line-height:2;color:rgba(28,26,23,.7)}
.body-text p{margin-bottom:1.2rem}
.body-text strong{color:var(--dark);font-weight:600}
.border-item{border-top:1px solid rgba(61,26,18,.14);padding-top:2rem}
.check-list{list-style:none}
.check-list li{display:flex;align-items:flex-start;gap:.9rem;padding:.65rem 0;border-bottom:1px solid rgba(61,26,18,.07);font-size:14px;color:rgba(28,26,23,.7);line-height:1.7}
.check-list li::before{content:'✓';color:var(--gold);flex-shrink:0;font-weight:700;margin-top:.05rem}

/* Form */
.form-field{margin-bottom:1.8rem}
.form-field label{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;font-weight:700}
.form-field input,.form-field select,.form-field textarea{
  width:100%;border:none;border-bottom:1px solid rgba(61,26,18,.2);
  background:transparent;padding:.65rem 0;font-family:'Josefin Sans',sans-serif;
  font-size:14px;font-weight:400;color:var(--dark);outline:none;transition:border-color .25s;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--wine)}
.form-field textarea{resize:vertical;min-height:110px}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem}
.form-submit{
  width:100%;background:var(--wine);color:#fff;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;
  padding:1.1rem;transition:background .25s;border:none;cursor:pointer;margin-top:.5rem;
}
.form-submit:hover{background:#2a0f0a}
.form-note{text-align:center;font-size:11px;color:var(--muted);margin-top:.6rem;font-weight:600}

/* Accordion */
.accordion-item{border-bottom:1px solid rgba(61,26,18,.13)}
.accordion-trigger{width:100%;text-align:left;padding:1.6rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--wine);background:none;border:none;cursor:pointer}
.accordion-icon{font-size:1.4rem;color:rgba(61,26,18,.38);transition:transform .35s;line-height:1}
.accordion-item.open .accordion-icon{transform:rotate(45deg)}
.accordion-body{font-size:14px;line-height:2;color:rgba(28,26,23,.65);max-height:0;overflow:hidden;transition:max-height .45s,padding .3s}
.accordion-item.open .accordion-body{max-height:600px;padding-bottom:1.6rem}

/* Gallery page */
.gallery-filter{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-bottom:2.5rem}
.filter-btn{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;padding:.55rem 1.4rem;border:1px solid rgba(61,26,18,.22);color:rgba(61,26,18,.6);transition:.2s;background:none;cursor:pointer}
.filter-btn.active,.filter-btn:hover{border-color:var(--wine);background:var(--wine);color:#fff}
.gallery-mosaic{columns:3;gap:6px}
.gallery-tile{break-inside:avoid;margin-bottom:6px;position:relative;overflow:hidden;cursor:pointer}
.gallery-tile img{width:100%;display:block;transition:transform .8s ease}
.gallery-tile:hover img{transform:scale(1.05)}
.gallery-tile-caption{position:absolute;inset:0;background:rgba(15,5,2,0);transition:background .4s;display:flex;flex-direction:column;justify-content:flex-end;padding:1.4rem}
.gallery-tile:hover .gallery-tile-caption{background:rgba(15,5,2,.76)}
.gallery-tile-loc{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,0);margin-bottom:.3rem;transition:color .35s}
.gallery-tile-cap{font-family:'EB Garamond',serif;font-style:italic;font-size:1.15rem;color:rgba(255,255,255,0);transition:color .35s}
.gallery-tile:hover .gallery-tile-loc,.gallery-tile:hover .gallery-tile-cap{color:#fff}

/* Lightbox */
#lightbox{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;flex-direction:column}
#lightbox.open{display:flex}
#lightbox img{max-width:90vw;max-height:78vh;object-fit:contain}
.lb-caption{color:rgba(255,255,255,.7);text-align:center;margin-top:1.3rem}
.lb-cap-loc{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;opacity:.55;margin-bottom:.3rem;display:block}
.lb-cap-text{font-family:'EB Garamond',serif;font-style:italic;font-size:1.15rem;display:block}
.lb-counter{font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.3);margin-top:.4rem;display:block;font-weight:600}
.lb-close,.lb-prev,.lb-next{position:fixed;width:48px;height:48px;border:1px solid rgba(255,255,255,.28);color:#fff;display:flex;align-items:center;justify-content:center;transition:.2s;background:none;cursor:pointer;font-size:1.3rem}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.lb-close{top:1.5rem;right:1.5rem}
.lb-prev{top:50%;transform:translateY(-50%);left:1.5rem}
.lb-next{top:50%;transform:translateY(-50%);right:1.5rem}

/* Coming soon */
.coming-soon{min-height:55vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 2rem}
.coming-soon .section-title{margin-bottom:1.2rem}
.coming-soon p{font-size:15px;color:rgba(28,26,23,.62);max-width:520px;margin-bottom:2.5rem;line-height:1.9}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s,transform 1s}
.reveal.in{opacity:1;transform:translateY(0)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1200px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr;gap:3rem}
}
@media(max-width:1024px){
  .two-col,.engagements-inner,.immersion-inner{grid-template-columns:1fr;gap:4rem}
  .gallery-mosaic{columns:2}
  .insta-grid{grid-template-columns:repeat(3,1fr)}
  .tours-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  /* Mobile: bigger at top, compact when scrolled — matches desktop behavior */
  :root{--nav-h:130px;--nav-h-scrolled:80px;--logo-h:110px;--logo-h-scrolled:60px}
  /* Mobile header: 2 columns — menu left, logo right */
  #site-header{padding:0 1.4rem;grid-template-columns:auto 1fr}
  .hd-logo{justify-self:end}   /* logo snaps to the right */
  .hd-logo img{max-width:240px}
  #site-header.scrolled .hd-logo img{max-width:180px}
  /* Hide the right column (lang + contact) entirely on mobile */
  .hd-right{display:none}
  .ov-deco-col{display:none}
  .ov-nav-col{flex:1;padding:0 2rem 1.5rem;overflow:hidden}
  .ov-nav-link{overflow:hidden}
  .ov-nav-link .link-text{font-size:clamp(1.6rem,7vw,2.4rem);white-space:nowrap}
  .ov-footer{padding:1.2rem 2rem}
  .hero-content{right:1.5rem;left:1.5rem;max-width:100%;text-align:right;bottom:18%}
  .blog-grid{grid-template-columns:1fr 1fr;gap:4px}
  .footer-inner{grid-template-columns:1fr;gap:2rem}
  .gallery-mosaic{columns:1}
  .three-col{grid-template-columns:1fr}
  .page-inner,.blog-grid,.tours-grid,.tours-controls,.insta-grid,.blog-header,.footer-inner,.footer-bottom{padding-left:1.5rem;padding-right:1.5rem}
  .page-hero-content{padding:0 1.5rem 3rem}
  .gh-body{padding:0 2rem}
  .check-list{display:block}
  .engagements-inner,.immersion-inner{padding:4rem 1.5rem}
  /* Parallax: fill container on mobile, no transform effect */
  .parallax-bg{inset:0 !important;transform:none !important}
}
@media(max-width:480px){
  .blog-grid{grid-template-columns:1fr}
  .insta-grid{grid-template-columns:repeat(2,1fr)}
  .form-2col{grid-template-columns:1fr}
  .ov-footer-soc{display:none}
  .hero-tagline{font-size:1.2rem}
}
/* ── Remove menu separator lines ── */
.ov-nav > li {
  border-bottom: none !important;
}
/* ============================================================
   OVERLAY TEXT — BRIGHTER + SLIGHTLY LARGER (v20260514)
   Targets all text that sits ON TOP of images:
   hero, parallax intro, tour cards, guesthouse, contact CTA,
   page hero titles. Sizes bumped ~10-15%, faded items boosted,
   and a stronger text-shadow added for legibility.
   ============================================================ */

/* HERO TAGLINE — bigger + crisper shadow */
.hero-tagline{
  font-size:clamp(1.5rem,2.7vw,2.15rem) !important;
  text-shadow:0 2px 28px rgba(0,0,0,.85), 0 0 50px rgba(0,0,0,.5) !important;
  font-weight:500;
}
.hero-content .btn{
  font-size:12.5px !important;
  letter-spacing:.28em;
  border-width:1.5px;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
/* Hero slide dots — less faded */
.hero-dot{background:rgba(255,255,255,.55) !important}
.hero-dot.active{background:#fff !important}

/* PARALLAX INTRO — eyebrow, title, lines all crisper */
.parallax-overlay{background:rgba(28,16,10,.55) !important} /* slightly less dark */
.parallax-content{
  text-shadow:0 1px 18px rgba(0,0,0,.45);
}
.para-eyebrow{
  font-size:12.5px !important;
  font-weight:700 !important;
  letter-spacing:.3em !important;
}
.parallax-content .section-title{
  font-size:clamp(2.1rem,4.6vw,3.4rem) !important;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.para-divider{background:rgba(255,255,255,.6) !important}
.para-line{
  font-size:14px !important;
  font-weight:500 !important;
  text-shadow:0 1px 16px rgba(0,0,0,.5);
}

/* TOUR CARD OVERLAY TEXT — labels brighter, title bigger */
.tc-badge{
  font-size:11.5px !important;
  opacity:.95 !important;
  font-weight:700 !important;
  text-shadow:0 1px 12px rgba(0,0,0,.7);
}
.tc-dates{
  font-size:11.5px !important;
  opacity:.88 !important;
  font-weight:500 !important;
  text-shadow:0 1px 12px rgba(0,0,0,.7);
}
.tc-title{
  font-size:clamp(1.7rem,2.8vw,2.7rem) !important;
  text-shadow:0 2px 22px rgba(0,0,0,.7);
}
.tc-btn{
  font-size:11.5px !important;
  border-color:rgba(255,255,255,.85) !important;
  border-width:1.5px !important;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}

/* GUESTHOUSE BANNER — title bigger + brighter link */
.gh-body .section-title{
  font-size:clamp(2rem,4.3vw,3.4rem) !important;
  text-shadow:0 2px 26px rgba(0,0,0,.7);
}
.gh-link{
  font-size:12.5px !important;
  border-bottom:1.5px solid rgba(255,255,255,.85) !important;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}

/* CONTACT CTA — eyebrow + title crisper */
.contact-cta-eyebrow{
  font-size:12.5px !important;
  font-weight:700 !important;
  letter-spacing:.32em !important;
  text-shadow:0 1px 16px rgba(0,0,0,.55);
}
.contact-cta-content .section-title{
  font-size:clamp(2.4rem,5.8vw,4.7rem) !important;
  text-shadow:0 2px 28px rgba(0,0,0,.6);
}
.contact-cta-content .btn{
  font-size:12.5px !important;
  border-width:1.5px;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}

/* PAGE HERO TITLES (subpages) — bigger + stronger shadow */
.page-hero-title{
  font-size:clamp(3rem,7.4vw,6.4rem) !important;
  text-shadow:0 3px 32px rgba(0,0,0,.7);
}
.page-hero-overlay{
  background:linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,.55)) !important;
}

/* MOBILE — slightly more restrained */
@media (max-width:768px){
  .hero-tagline{font-size:1.35rem !important}
  .parallax-content .section-title{font-size:1.85rem !important}
  .para-line{font-size:13px !important;line-height:2.1 !important}
  .tc-title{font-size:1.5rem !important}
  .gh-body .section-title{font-size:1.7rem !important}
  .contact-cta-content .section-title{font-size:2rem !important}
  .page-hero-title{font-size:2.5rem !important}
}

/* ============================================================
   SPLASH LOADER — first visit only (v20260514)
   Plays /images/logo-animation.mp4 then fades out.
   sessionStorage('sg-loader-shown') prevents replay.
   ============================================================ */
html.sg-loading{overflow:hidden;background:#000}
html.sg-loading body{background:#000}
html.sg-loading::before{
  content:"";
  position:fixed;inset:0;z-index:99998;
  background:#000;
  pointer-events:none;
}
#sg-splash{
  position:fixed;inset:0;z-index:99999;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .75s ease;
}
#sg-splash.hide{opacity:0;pointer-events:none}
#sg-splash video{
  width:100vw;height:100vh;
  object-fit:cover;
  display:block;
  background:transparent;
}
#sg-splash-skip{
  position:absolute;bottom:2.2rem;right:2.2rem;
  background:none;border:1px solid rgba(255,255,255,.4);
  color:rgba(255,255,255,.75);
  font-family:'Josefin Sans',sans-serif;
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;
  padding:.55rem 1.1rem;cursor:pointer;
  transition:.2s;
}
#sg-splash-skip:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
@media (max-width:768px){
  #sg-splash-skip{bottom:1.4rem;right:1.4rem;font-size:10px;padding:.5rem .9rem}
}


/* ============================================================
   CITY SWITCHER (in tour page heroes)
   ============================================================ */
.city-switch{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.15rem;margin:2.2rem auto 0;max-width:900px;
  font-family:'Josefin Sans',sans-serif;
}
.city-switch a{
  color:rgba(255,255,255,.75);
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;text-decoration:none;
  padding:.55rem 1rem;
  transition:color .2s, border-color .2s;
  border-bottom:1.5px solid transparent;
  text-shadow:0 1px 12px rgba(0,0,0,.65);
}
.city-switch a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
.city-switch a.active{color:#fff;border-bottom-color:#fff;font-weight:700}
.city-switch a:not(:last-child)::after{
  content:"";display:inline-block;
  width:3px;height:3px;background:rgba(255,255,255,.45);border-radius:50%;
  margin-left:1.05rem;vertical-align:middle;
}
@media(max-width:768px){
  .city-switch{gap:0;margin-top:1.5rem}
  .city-switch a{padding:.4rem .55rem;font-size:10px;letter-spacing:.14em}
  .city-switch a:not(:last-child)::after{margin-left:.55rem;width:2px;height:2px}
}
