:root{
  --green: #274023;      /* deep safari green */
  --gold: #d6b04f;       /* warm gold */
  --brown: #6a402b;      /* earthy brown */
  --sand: #f5f0e7;       /* light sand */
  --muted: #6b6b6b;
  --radius: 12px;
  --container-width: 1100px;
  --max-width: 1200px;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color: #222;
  background: #fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Container helper */
.container{
  max-width: var(--container-width);
  margin:0 auto;
  padding: 0 20px;
}

/* Header */
.site-header{
  background: linear-gradient(180deg, rgba(39,64,35,0.96), rgba(39,64,35,0.9));
  color: #fff;
  position: sticky;
  top:0;
  z-index: 60;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--container-width);
  margin:0 auto;
  padding:12px 20px;
}
.logo img{
  height:48px;
  display:block;
}

/* Desktop nav */
.main-nav ul{
  display:flex;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
  align-items:center;
}
.main-nav a{
  color: #fff;
  text-decoration:none;
  font-weight:600;
  font-size:0.95rem;
}
.main-nav a:hover{color:var(--gold)}

/* Hamburger button */
.hamburger{
  display:inline-block;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:8px;
  margin-left:10px;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
}
.hamburger span{
  display:block;
  height:3px;
  width:24px;
  background:#fff;
  margin:5px 0;
  border-radius:3px;
}

/* Mobile menu (slide-in) */
.mobile-menu{
  position:fixed;
  right:-320px;
  top:0;
  height:100%;
  width:320px;
  max-width: 90%;
  background: linear-gradient(180deg, rgba(39,64,35,1), rgba(106,64,43,1));
  color:#fff;
  box-shadow: -10px 0 30px rgba(0,0,0,0.4);
  transition: right 0.36s ease, transform 0.36s ease;
  z-index:100;
  padding:20px;
}
.mobile-menu.open{ right:0; }
.mobile-menu .close-menu{
  background:transparent;
  color:#fff;
  border:0;
  font-size:36px;
  line-height:1;
  position:absolute;
  right:14px;
  top:8px;
  cursor:pointer;
}
.mobile-menu ul{ margin-top:50px; padding:0; list-style:none; }
.mobile-menu a{ color:#fff; text-decoration:none; display:block; padding:12px 6px; font-weight:600; border-radius:8px; }
.mobile-menu a:hover{ background:rgba(255,255,255,0.06); color:var(--gold) }

/* Hero */
.hero{
  min-height: 72vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-size:cover;
  background-position:center;
  position:relative;
  transition: opacity 0.45s ease;
  background-repeat:no-repeat;
}
.hero-overlay{
  width:100%;
  backdrop-filter: blur(0.5px);
  background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.28));
  color:#fff;
  padding: 64px 20px;
}
.hero-inner{
  max-width:900px;
  margin:0 auto;
  text-align:center;
  color:#fff;
}
.hero h1{
  font-family: "Merriweather", serif;
  font-size:2rem;
  margin:0 0 8px;
  font-weight:700;
}
.hero h2{
  font-size:1.5rem;
  margin:0 0 10px;
  font-weight:600;
}
.hero .lead{ color: #f2eadf; margin-bottom:18px; font-size:1rem; }
.btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:0.2px;
}
.btn-primary{
  background:var(--gold);
  color:var(--brown);
  box-shadow:0 6px 12px rgba(212,176,79,0.18);
}
.btn-primary:hover{ transform:translateY(-3px); }

/* Sections */
.section{ padding:48px 0; background:var(--sand); }
.section:nth-of-type(even){ background: #fff; }
.section h2, .section h3{ text-align:center; color:var(--green); font-family: "Merriweather", serif; margin-bottom:12px; }
.section p.sub{ text-align:center; color:var(--muted); margin-bottom:20px; max-width:900px; margin-left:auto; margin-right:auto; }

/* Highlights grid */
.highlight-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
  margin-top:20px;
}
.highlight-grid img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:12px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

/* STORIES GRID - new section */
.stories-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(1, 1fr);
  gap:14px;
}
/* Each story small card */
.story-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#fff;
  padding:10px;
  border-radius:10px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}
.story-card img{
  width:120px;
  height:90px;
  object-fit:cover;
  border-radius:8px;
  flex:0 0 120px;
}
.story-body h4{ margin:0 0 6px; color:var(--brown); font-family: "Merriweather", serif; font-size:1rem; }
.story-body p{ margin:0; color:var(--muted); font-size:0.92rem; }

/* Cards grid (for Wild Moments) */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(1, 1fr);
  gap:16px;
  margin-top:18px;
}
.card{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  display:flex;
  flex-direction:row;
  gap:12px;
}
.card img{ width:140px; height:100%; object-fit:cover; }
.card-body{ padding:12px; }
.card h4{ margin:0 0 6px; color:var(--brown); font-family: "Merriweather", serif; }

/* Experience gallery */
.experience-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
  margin-top:18px;
}
.experience-grid img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:10px;
}

/* Contact styling */
.contact .contact-lines a{ color:var(--green); text-decoration:none; font-weight:600; }

/* Footer */
.site-footer{
  background:var(--green);
  color:#fff;
  padding:18px 0;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-footer a{ color:var(--gold); text-decoration:none; font-weight:600; }

/* WhatsApp floating - white circle + green official logo */
.whatsapp-float{
  position:fixed;
  bottom:22px;
  right:18px;
  background: #fff;            /* white circle */
  color:#25D366;              /* whatsapp green for the icon */
  width:56px;
  height:56px;
  border-radius:50%;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  font-size:22px;
  text-decoration:none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  border: 3px solid rgba(37,211,102,0.12);
}
.whatsapp-float .wh-icon { display:inline-flex; align-items:center; justify-content:center; }
.whatsapp-float:hover{ transform:translateY(-4px); box-shadow: 0 14px 26px rgba(0,0,0,0.28); }

/* Responsive rules */
@media(min-width:600px){
  .stories-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .cards-grid{ grid-template-columns: repeat(2, 1fr); }
  .highlight-grid{ grid-template-columns: repeat(3, 1fr); }
  .experience-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media(min-width:900px){
  .highlight-grid{ grid-template-columns: repeat(4, 1fr); gap:18px; }
  .stories-grid{ grid-template-columns: repeat(3, 1fr); }
  .cards-grid{ grid-template-columns: repeat(3, 1fr); }
  .experience-grid{ grid-template-columns: repeat(4, 1fr); }
  .story-card img{ width:140px; height:100px; flex:0 0 140px; }
}

/* Desktop nav visible and improved spacing */
@media(max-width:699px){
  .main-nav{ display:none; }
  .header-inner{ padding:12px 16px;}
  .hero { min-height:60vh; }
  .highlight-grid{ grid-template-columns: repeat(2, 1fr); }
  .experience-grid{ grid-template-columns: repeat(2, 1fr); }
  .card img{ width:110px; }
}