/* Basic responsive styles for the contact page */
:root{
  --bg:#f1dfba;            /* warm paper */
  --card:#ffffff;          /* card background for contrast */
  --accent-dark:#670707;   /* deep coffee brown (header left) */
  --accent:#6f4e37;        /* coffee brown (mid) */
  --accent-2:#8b5e3c;      /* coffee brown (lighter) */
  --text:#2b1f1a;          /* dark brown text */
  --muted:#5b463f;         /* muted brown */
  --shadow: rgba(27,20,18,0.12);
}

*{box-sizing:border-box}
body{
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  margin:0;
  background:var(--card);
  color:var(--accent-dark);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

/* header: darker coffee gradient, compact and elegant */
.site-header{
  background: linear-gradient(90deg,var(--bg),var(--bg));
  color: #fff;
  padding: 1.25rem 0;
  border-bottom: 3px solid rgba(0,0,0,0.06);
}
.site-header .container{
  display: flex;
  flex-direction: column;     /* stack title + tagline */
  align-items: center;        /* center vertically within column */
  justify-content: center;    /* center horizontally in header */
  gap: 0.25rem;
  text-align: center;         /* ensure multiline text is centered */
}

/* brand */
.business-name{
  margin:0;
  font-size:2.6rem;
  color:var(--accent-dark);
  font-weight:700;
  letter-spacing:0.6px;
}
.tagline{
  margin:0.25rem 0 0;
  color:var(--accent-dark);
  opacity:0.95;
  font-weight:600;
  font-size:1.55rem;
}

/* main card and layout */
.content{
  padding:2rem 1rem;
}
.contact-card{
  background:var(--bg);
  padding:1.5rem;
  border-radius:12px;
  box-shadow:0 10px 30px var(--shadow);
  border:1px solid rgba(27,20,18,0.04);
}
.lead{color:var(--muted);margin-top:0}
.info-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
.info-grid h3{margin:.25rem 0}
.address,address{font-style:normal;color:var(--muted)}
.map-note{margin-top:1rem;color:var(--muted);font-size:.95rem}
.site-footer{padding:1rem 0;text-align:center;color:var(--muted)}

/* two-column layout: contact + image (right) */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
  margin-top: 28px;
}

/* right-side image panel */
.image-panel {
  display: flex;
  justify-content: center;
  align-items: start;
}

/* image sizing and appearance with subtle hover */
.product-image {
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(27,20,18,0.12);
  object-fit: contain;
  transition: transform .25s ease, box-shadow .25s ease;
}
.product-image:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(27,20,18,0.18);
}

/* responsive: stack on small screens */
@media (max-width: 800px) {
  .site-header .container{flex-direction:column;align-items:flex-start}
  .content-grid {
    grid-template-columns: 1fr;
  }

  .image-panel {
    margin-top: 12px;
  }

  .product-image {
    max-width: 480px;
    width: 100%;
  }
}