:root {
  --brand: #8a5a22;
  --brand-2: #c99a63;
}

body { scroll-behavior: smooth; }
.bg-gradient {
  background: radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.6), transparent 60%),
              linear-gradient(180deg, #fdebd2 0%, #efc58f 35%, #c98a4a 100%);
}
.hero .lead { color: rgba(0,0,0,.7); }
.hero-cover { max-width: 520px; }
.feature h3 { color: var(--brand); }
.btn-primary {
  background-color: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #734918;
  border-color: #734918;
}
footer { background: #fff; }

/* Prevent any horizontal scrolling on small screens */
html, body { overflow-x: hidden; }

/* Make sure the hero image never exceeds the viewport width */
.hero-cover {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* Stop image drag/ghosting on mobile */
.hero-cover {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none; /* if you need the image clickable, remove this */
}

/* Extra safety: ensure the hero row won't overflow */
.hero .row { overflow: hidden; }

/* (Optional) tighten spacing on very small screens */
@media (max-width: 400px) {
  .hero { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .display-5 { font-size: 1.9rem; }
}