/* styles.css - shared styles for all pages */
:root{
  --gold-100: #f7e8d0;
  --gold-200: #e6c88a;
  --gold:    #c08a2f;
  --gold-dark:#7a4410;
  --accent:  #6b5a3c;
  --muted:   #666;
  --bg:      #ffffff;
  --maxw:    1100px;
  --radius: 12px;
  --glass: rgba(255,255,255,0.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #fffdfa 0%, var(--gold-100) 100%);
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  padding-bottom:60px;
}

/* layout */
.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px;
}

/* header & nav */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:inherit;
}
.brand img{height:64px; width:64px; object-fit:contain; border-radius:12px; background:linear-gradient(180deg,var(--gold) 0%, var(--gold-dark) 100%); padding:6px;}
.brand h1{margin:0; font-size:20px; letter-spacing:1px;}
.brand p{margin:0; font-size:12px; color:var(--muted)}

.nav{
  display:flex;
  gap:12px;
  align-items:center;
}
.nav a{
  text-decoration:none;
  padding:10px 14px;
  border-radius:8px;
  color:var(--gold-dark);
  font-weight:600;
}
.nav a:hover{background: rgba(192,138,47,0.10)}
.nav a.active{background: linear-gradient(90deg, rgba(192,138,47,0.15), rgba(192,138,47,0.05)); box-shadow: 0 2px 8px rgba(160,100,20,0.08)}

.hero{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:28px;
  align-items:center;
  margin-top:22px;
}
.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6));
  border-radius:16px;
  padding:28px;
  box-shadow: 0 8px 24px rgba(120,80,20,0.06);
}
.hero h2{margin:0 0 10px 0; font-size:34px; color:var(--gold-dark)}
.lead{color:#3b3b3b; margin-bottom:16px}
.cta{
  display:flex;
  gap:10px;
}
.btn{
  padding:12px 18px;
  border-radius:10px;
  border:0;
  cursor:pointer;
  font-weight:700;
}
.btn-primary{
  background: linear-gradient(90deg,var(--gold), var(--gold-dark));
  color:white;
  box-shadow: 0 6px 18px rgba(120,70,20,0.18);
}
.btn-ghost{
  background: transparent;
  border: 2px solid rgba(160,120,60,0.12);
  color:var(--gold-dark);
}

/* features */
.features{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin-top:22px;
}
.feature{
  background: white;
  border-radius:12px;
  padding:18px;
  box-shadow: 0 6px 18px rgba(40,30,20,0.04);
}
.feature h3{margin:0 0 8px 0; color:var(--gold-dark)}
.feature p{margin:0; color:var(--muted); font-size:14px}

/* sections */
.section{
  margin-top:34px;
  padding:22px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
  box-shadow: 0 10px 30px rgba(120,80,20,0.04);
}

/* grid two-col */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 380px;
  gap:22px;
  align-items:start;
}

/* cards in sidebar */
.info-card{
  background: linear-gradient(180deg, var(--gold-100), #fff);
  border-radius:12px;
  padding:16px;
  border:1px solid rgba(200,160,100,0.12);
}
.info-card h4{margin:0 0 8px 0; color:var(--gold-dark)}

/* footer */
.footer{
  position:fixed;
  left:0; right:0; bottom:0;
  background: white;
  border-top:1px solid rgba(160,120,60,0.06);
  padding:10px 0;
}
.footer .container{display:flex; justify-content:space-between; gap:12px; align-items:center}
.small{font-size:13px; color:var(--muted)}

/* contact form */
.form-row{display:flex; gap:12px}
.form-row .col{flex:1}
.input, textarea, select{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(120,80,20,0.12);
  background: transparent;
  font-size:14px;
  resize:vertical;
}
label{font-size:13px; color:var(--muted); display:block; margin-bottom:6px}

.address{font-size:14px; color:#333}

/* responsive */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .features{grid-template-columns: repeat(2,1fr)}
}
@media (max-width:640px){
  .features{grid-template-columns:1fr}
  .nav{display:none}
  .brand h1{font-size:18px}
  .brand img{height:52px; width:52px}
  body{padding-bottom:100px}
}