html, body {
  background: #f5f2eb;
  font-family: 'Copacetic', Arial, sans-serif;
  color: #382914;
  margin: 0;
  padding: 0;
}

.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: #e2d2bc;
  overflow: hidden;
}

.hero video {
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  object-fit: cover;
  opacity: 0.32; /* plus transparent */
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: linear-gradient(120deg, #fff6 0%, #e2d2bc80 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-center {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1.1em;
  padding: 5em 1em 2em 1em;
}
.logo-vr {
  max-width: 180px;
  border-radius: 1.5rem;
  box-shadow: 0 6px 32px #0002;
  margin-bottom: 1em;
}
.hero h1 {
  font-family: 'Druk Wide', 'Copacetic', Arial, sans-serif;
  font-size: 2.5rem;
  margin: 0 0 0.35em 0;
  letter-spacing: 0.06em;
  color: #493624;
  text-shadow: 0 3px 16px #fff5, 0 2px 16px #0002;
}
.slogan {
  font-size: 1.18rem;
  color: #77553a;
  margin-bottom: 0.7em;
}
.hero-cta {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1.5em;
  margin-top: 1.5em;
}
.btn-cta {
  font-size: 1.08rem;
  padding: 0.82em 2.4em;
  background: #dfb773;
  color: #493624;
  border: none;
  border-radius: 1.9em;
  font-weight: bold;
  box-shadow: 0 3px 16px #e8c79432;
  text-decoration: none;
  transition: background 0.18s, box-shadow 0.19s, transform 0.18s;
  cursor: pointer;
}
.btn-cta:hover, .btn-cta:focus {
  background: #f7e8cd;
  color: #b8852b;
  box-shadow: 0 6px 28px #e8c79462;
  transform: translateY(-2px) scale(1.06);
}
.hero-switch {
  margin-top: 1.4em;
  font-size: 1rem;
  color: #7d6037;
}
.hero-switch a {
  color: #b8852b;
  text-decoration: none;
  font-weight: bold;
  padding: 0.15em 0.4em;
  border-radius: 1em;
  transition: background 0.17s, color 0.16s;
}
.hero-switch a.active, .hero-switch a:hover {
  background: #f7e8cd;
  color: #ad8033;
}
.navbar {
  background: #e8dcc9ee;
  border-bottom: 1px solid #e6d3b2;
  box-shadow: 0 2px 12px #c2ad7a14;
  width: 100vw;
  z-index: 10;
  padding: 0.1em 0 0.12em 0;
  position: sticky;
  top: 0;
}
.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.2em;
  list-style: none;
  margin: 0;
  padding: 0.7em 0;
}
.nav-links a {
  font-family: 'Copacetic', Arial, sans-serif;
  font-size: 1.14rem;
  color: #735730;
  text-decoration: none;
  padding: 0.37em 1.19em;
  border-radius: 2em;
  font-weight: bold;
  position: relative;
  background: none;
  transition: color 0.16s, background 0.17s, box-shadow 0.19s;
}
.nav-links a:hover, .nav-links a:focus {
  background: #f7e9cd;
  color: #b8852b;
  box-shadow: 0 3px 16px #e8c79432;
}

section {
  max-width: 860px;
  margin: 2.5rem auto 2.7rem auto;
  background: #fff8f0;
  border-radius: 2rem;
  box-shadow: 0 6px 40px #0001;
  padding: 2.1em 2.5vw 2.3em 2.5vw;
  text-align: center;
}
section h2 {
  font-family: 'Druk Wide', 'Copacetic', Arial, sans-serif;
  font-size: 1.55rem;
  margin-bottom: 0.8em;
  color: #5b3f1b;
}
.products-grid {
  display: flex;
  gap: 2.5em;
  flex-wrap: wrap;
  justify-content: center;
}
.product {
  width: 270px;
  margin-bottom: 1.6em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product img {
  width: 100%;
  max-width: 240px;
  height: auto;
  max-height: 160px;
  border-radius: 1.2em;
  box-shadow: 0 4px 18px #0001;
  margin-bottom: 0.8em;
  object-fit: cover;
  background: #eee4d7;
}
.product h3 {
  margin-top: 0.3em;
  font-size: 1.11em;
  color: #7d6037;
}
blockquote {
  margin: 0.5em auto 1.2em auto;
  padding: 1.1em 1.1em 1.1em 1.1em;
  background: #f6ede4;
  border-left: 4px solid #ddb982;
  border-radius: 0.5em;
  font-size: 1.11rem;
  color: #543f26;
  max-width: 600px;
  box-shadow: 0 1.5px 10px #cba95e11;
}
blockquote small {
  color: #947e56;
}
.contact-locations {
  display: flex;
  flex-direction: row;
  gap: 2em;
  justify-content: center;
  align-items: flex-start;
  margin: 1.5em 0 2.5em 0;
  flex-wrap: wrap;
}
.contact-info {
  background: #f8f2e8;
  border-radius: 1.6em;
  box-shadow: 0 3px 18px #d9c6a322;
  padding: 1.2em 2em;
  margin: 0.5em 0;
  min-width: 250px;
  max-width: 320px;
  text-align: left;
  font-size: 1.07em;
  flex: 1 1 250px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: box-shadow 0.19s;
}
.contact-info h3 {
  margin-top: 0;
  color: #7d6037;
  font-size: 1.14em;
  letter-spacing: 0.02em;
}
.contact-info a {
  color: #ad8033;
  text-decoration: none;
}
.contact-info a:hover {
  text-decoration: underline;
  color: #b8852b;
}
.contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3em;
  margin-top: 2em;
  width: 100%;
}
.contact-fields {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0.8em;
  max-width: 420px;
  margin: 0 auto;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  border-radius: 1.2em;
  border: 1.5px solid #e0c8a2;
  font-size: 1.07rem;
  padding: 0.7em 1.1em;
  margin: 0;
  background: #fff;
  color: #493624;
  box-sizing: border-box;
  transition: border 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border: 1.5px solid #caa86a;
  outline: none;
}
.contact-form textarea {
  min-height: 90px;
  resize: vertical;
}
.contact-form .btn-main {
  margin-top: 0.5em;
  width: 80%;
  max-width: 220px;
}

.btn-main {
  font-family: inherit;
  background: #ddbd8a;
  color: #493624;
  border: none;
  border-radius: 1.7em;
  font-size: 1.08rem;
  padding: 0.75em 2.1em;
  margin: 0.3em 0.5em;
  box-shadow: 0 2px 12px #0001;
  transition: background 0.18s, box-shadow 0.19s, transform 0.18s;
  cursor: pointer;
}
.btn-main:hover, .btn-main:focus {
  background: #f7e8cd;
  box-shadow: 0 4px 18px #e8c79445;
  transform: translateY(-2px) scale(1.035);
}
footer {
  margin: 3.7rem auto 0 auto;
  color: #a78657;
  font-size: 1.07rem;
  text-align: center;
  padding-top: 2.1em;
}
@media (max-width: 900px) {
  .contact-locations { flex-direction: column; gap: 1.2em; align-items: stretch; }
  .contact-info { max-width: 100%; min-width: 0; width: 100%; }
  .products-grid { flex-direction: column; gap: 2em; align-items: center; }
}
@media (max-width: 700px) {
  .hero h1 { font-size: 1.6rem; }
  .logo-vr { max-width: 120px; }
  .hero-center { min-height: 56vh; padding: 1.6em 0.4em 2em 0.4em; }
  section { padding-left: 0.2em; padding-right: 0.2em; }
  .hero-cta { flex-direction: column; gap: 0.7em; }
  .btn-cta { width: 100%; padding: 0.97em 0; }
}
::-webkit-input-placeholder { color: #a39a8c; }
::-moz-placeholder { color: #a39a8c; }
:-ms-input-placeholder { color: #a39a8c; }
::placeholder { color: #a39a8c; }