/* =========================================================
   SRI MATHAJI GLASS & PLYWOOD — CONTACT PAGE
   Continues the existing site design system
   (Luxury Corporate / Navy + Gold / Glassmorphism)
   ========================================================= */

:root{
  --navy: #102645;
  --navy-deep: #0B1F3D;
  --gold: #D4A84D;
  --gold-light: #F4D98B;
  --ivory: #FAF8F4;
  --bg-section: #FAF8F4;
  --text-muted: #5C6B80;
  --text-muted-dark: rgba(250,248,244,.62);
  --border-gold: rgba(212,168,77,.28);
  --radius: 18px;
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
}

*{ box-sizing: border-box; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}
.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
a{ text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- shared eyebrow / heading system (matches Why Choose Us) ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--gold);
}
.eyebrow::before,
.eyebrow::after{
  content:"";
  width:28px; height:1px;
  display:inline-block;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow::after{ background: linear-gradient(90deg, var(--gold), transparent); }
.on-dark .eyebrow{ color: var(--gold-light); }

.section-head{
  text-align:center;
  max-width: 660px;
  margin: 0 auto 64px;
}
.section-head h2{
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight:600;
  margin: 16px 0 16px;
  letter-spacing:.01em;
}
.section-head h2 em{
  font-style:italic;
  color: var(--gold);
 
}
.on-dark .section-head h2{ color: var(--ivory); }
.on-dark .section-head h2 em{ color: var(--gold-light); }
.section-head p{
  color: #D4A84D;
  font-size: 15.5px;
  line-height:1.75;
  font-weight: 500;
}
.on-dark .section-head p{ color: var(--text-muted-dark); }

/* ---------- reveal-on-scroll ---------- */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* ---------- buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 16px 34px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight:600;
  letter-spacing:.02em;
  border-radius: 999px;
  cursor:pointer;
  border:none;
  overflow:hidden;
  isolation:isolate;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.btn:active{ transform: scale(.97); }
.btn-gold{
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy-deep);
  box-shadow: 0 16px 32px -14px rgba(212,168,77,.55);
}
.btn-gold:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -14px rgba(212,168,77,.7);
}
.btn-ghost{
  background: rgba(255,255,255,.06);
  color: var(--ivory);
  border: 1px solid rgba(244,217,139,.4);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{
  transform: translateY(-3px);
  border-color: var(--gold-light);
  background: rgba(255,255,255,.1);
}
.btn-outline-navy{
  background: transparent;
  color: var(--navy);
  border: 1px solid rgba(16,38,69,.25);
}
.btn-outline-navy:hover{
  border-color: var(--gold);
  color: var(--navy-deep);
  transform: translateY(-3px);
}
/* ripple */
.btn .ripple{
  position:absolute;
  border-radius:50%;
  background: rgba(255,255,255,.45);
  transform: scale(0);
  animation: ripple-anim .6s ease-out;
  pointer-events:none;
  z-index:0;
}
@keyframes ripple-anim{
  to{ transform: scale(3); opacity:0; }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .smgp-info-grid{ grid-template-columns: repeat(2, 1fr); }
  .smgp-showroom-grid{ grid-template-columns: 1fr; }
  .smgp-showroom-art{ aspect-ratio: 16/9; }
  .smgp-form-card{ padding: 44px 30px; }
}
@media (max-width: 640px){
  .smgp-contact-hero{ padding: 120px 0 90px; }
  .smgp-info-grid{ grid-template-columns: 1fr; }
  .smgp-form-grid{ grid-template-columns: 1fr; }
  .smgp-field.full{ grid-column: span 1; }
  .smgp-reason-list{ grid-template-columns: 1fr; }
  .smgp-hero-actions, .smgp-cta-actions{ flex-direction:column; align-items:stretch; }
  .smgp-map-frame iframe{ height: 300px; }
  .smgp-form-card{ padding:34px 22px; border-radius:18px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}