:root{
  --container-max: 1100px;
  --bg:#FAF8F4;
  --muted:#6b6b6b;
  --accent:#7a5a35; /* warm earthy */
  --accent-2:#7ea785; /* soft green */
  --card:#fff;
  --radius:12px;
  --gap:1.25rem;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--bg);
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:18px; /* larger text for older audience */
}
.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:1.5rem;
}

/* HEADER */
.site-header{background:transparent; position:sticky; top:0; z-index:50; backdrop-filter: blur(4px);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.brand{font-weight:700; font-size:1.15rem; color:var(--accent);}
.menu{list-style:none; display:flex; gap:0.75rem; margin:0; padding:0; align-items:center;}
.menu a{color:#1b1b1b; text-decoration:none; padding:0.5rem; border-radius:8px;}
.menu a:hover, .menu a:focus{background:rgba(0,0,0,0.04); outline:none;}

/* mobile menu */
#menu-toggle{display:none; font-size:1.25rem; background:none; border:none; cursor:pointer}

/* HERO */
.hero{position:relative; min-height:60vh; display:flex; align-items:center; color:#fff; overflow:hidden;}
.hero-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.45; filter:grayscale(5%);}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,21,19,0.35), rgba(9,7,5,0.35));}
.hero-content{position:relative; z-index:2; padding:4rem 1.5rem; text-align:left; max-width:900px;}
.hero h1{font-size:2.2rem; margin:0 0 0.5rem; line-height:1.05;}
.hero .accent{color:var(--accent-2);}
.lead{font-size:1.05rem; margin-bottom:1rem; color:#f2f2f2;}
.cta-row{display:flex; gap:0.75rem; margin-bottom:0.5rem;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.65rem 1rem; border-radius:10px; border:1px solid transparent; font-weight:600; text-decoration:none; cursor:pointer;}
.btn.primary{background:var(--accent); color:white;}
.btn.ghost{background:transparent; color:white; border-color:rgba(255,255,255,0.18);}

/* target note */
.target-note{font-size:0.9rem; color:#e9e9e9; margin-top:0.5rem}

/* SECTIONS */
section{padding:2.25rem 0;}
h2{margin-top:0; margin-bottom:0.75rem; font-size:1.4rem; color:var(--accent);}

/* ABOUT */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:center; margin-top:1rem;}
.about-grid img{width:100%; border-radius:var(--radius); box-shadow:0 6px 18px rgba(40,40,40,0.06)}

/* FEATURES */
.feature-list{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; list-style:none; padding:0; margin:0; margin-top:1rem;}
.feature-list li{background:var(--card); padding:1rem; border-radius:12px; box-shadow:0 6px 18px rgba(30,30,30,0.05); display:flex; gap:1rem; align-items:flex-start;}
.feature-list .icon{font-size:1.6rem; margin-top:2px;}

/* GALLERY */
.gallery-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0.6rem; margin-top:1rem;}
.gallery-item{background:transparent; border:0; padding:0; cursor:pointer;}
.gallery-item img{width:100%; height:220px; object-fit:cover; border-radius:10px; display:block;}

/* Lightbox */
.lightbox{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.75); padding:1rem; opacity:0; pointer-events:none; transition:opacity .22s ease;}
.lightbox[aria-hidden="false"]{opacity:1; pointer-events:auto;}
.lightbox img{max-width:95%; max-height:85vh; border-radius:8px; box-shadow:0 12px 40px rgba(0,0,0,0.6);}
.lightbox-close{position:absolute; top:1rem; right:1rem; background:transparent; border:0; color:#fff; font-size:1.5rem; cursor:pointer;}

/* MAP */
.map-wrap{height:320px; border-radius:12px; overflow:hidden; margin-top:1rem; box-shadow:0 8px 30px rgba(20,20,20,0.06)}
.map-wrap iframe{width:100%; height:100%; border:0; display:block}

/* CONTACT */
.contact-form{max-width:720px; margin-top:1rem; background:var(--card); padding:1rem; border-radius:12px; box-shadow:0 6px 20px rgba(20,20,20,0.05)}
.form-row{display:flex; flex-direction:column; margin-bottom:0.75rem;}
.form-row label{font-weight:600; margin-bottom:0.35rem; font-size:0.95rem}
.form-row input, .form-row textarea{padding:0.65rem; border-radius:8px; border:1px solid #e6e6e6; font-size:1rem}
.form-actions{display:flex; gap:0.6rem; align-items:center; margin-top:0.5rem;}
.form-feedback{margin-top:0.6rem; color:var(--muted)}

/* FOOTER */
.site-footer{padding:1.25rem 0; background:transparent; color:var(--muted); font-size:0.95rem; margin-top:2rem;}
.small{font-size:0.85rem; color:var(--muted)}

/* RESPONSIVE */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .feature-list{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .hero h1{font-size:1.7rem}
  #menu-toggle{display:inline-block}
  .menu{display:none; position:absolute; top:64px; right:1.5rem; background:rgba(255,255,255,0.98); padding:0.5rem; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,0.06); flex-direction:column;}
  .menu a{padding:0.6rem 1rem;}
}
/* === Logo and Header Styling === */
.brand {
  display: flex;
  align-items: center;
  gap: 10px; /* Space between logo and name */
  font-size: 1.5rem;
  font-weight: bold;
  color: #2c3e50; /* Adjust to match your theme */
}

.brand .logo {
  height: 50px; /* Adjust size */
  width: auto;
  border-radius: 5px; /* Optional: soft edges */
}
/* ===== Gallery Slider Styling ===== */
#gallery {
  text-align: center;
  padding: 40px 0;
  background-color: #fafafa;
}

.slider {
  position: relative;
  max-width: 50px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
}

.slides img {
  width: 100%;
  display: none;
  border-radius: 10px;
}

.slides img.active {
  display: block;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 9px;
  cursor: pointer;
  border-radius: 9%;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

}
/* ===== Side-to-Side Gallery Slider ===== */
#gallery .slides {
  display: flex;
  transition: transform 0.8s ease-in-out;
  width: 100%;
}

#gallery .slides img {
  width: 50%;
  height: auto;
  flex-shrink: 0;
  border-radius: 9px;
}
#gallery .slides img {
  width: 50% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 10px;
}