:root{
  --bg:#fff;
  --text:#111827;
  --muted:#6b7280;
  --accent:#FF0000;
  --container:1200px;
}
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  padding:0;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial;
  background:var(--bg);
  color:var(--text);
}
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px
}

/* header */
.site-header{
  position:sticky;
  top:0;z-index:90;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(6px);
  padding:14px 0;
  border-bottom:1px solid rgba(16,24,40,0.04)
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-weight:800;font-size:20px}
.logo .accent{color:var(--accent)}
.header-nav{display:flex;align-items:center;gap:12px}
.btn-primary{
  background:linear-gradient(90deg,var(--accent),#cc0000);
  border:none;
  padding:10px 16px;
  border-radius:10px;
  color:#fff;
  font-weight:700;
  cursor:pointer
}
.btn-link{color:var(--muted);text-decoration:none;padding:6px}

/* hero */
.hero-ctn{padding:28px 0 6px;background:linear-gradient(180deg,rgba(255,0,0,0.05),transparent)}
.title h1{margin:0;font-size:32px}
.title .lead{color:var(--muted);margin-top:8px}

/* contact panel layout */
.contact-panel{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:28px;
  padding:28px 0 60px;
  align-items:start
}

/* left column */
.cards-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:18px
}
.contact-card{
  background:#fff;
  border-radius:12px;
  padding:16px;
  box-shadow:0 10px 30px rgba(2,6,23,0.06);
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.contact-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,0.08);
}
.card-head{display:flex;gap:12px;align-items:center}
.icon{width:36px;height:36px;color:var(--accent)}
.card-body{display:flex;flex-direction:column;gap:8px}
.phone-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.phone-link{font-weight:700;color:var(--text);text-decoration:none}
.copy-btn{
  background:transparent;
  border:1px solid rgba(16,24,40,0.06);
  padding:6px 8px;
  border-radius:8px;
  cursor:pointer
}
.wa-btn{
  background:linear-gradient(90deg,#25D366,#128C7E);
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  display:inline-block;
  transition:transform .2s ease,box-shadow .2s ease;
}
.wa-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(37,211,102,0.25);
}

/* email card */
.card{
  background:#fff;
  border-radius:12px;
  padding:16px;
  box-shadow:0 10px 30px rgba(2,6,23,0.06);
}
.email-card{display:flex;flex-direction:column;gap:12px}
.email-link{color:var(--accent);font-weight:700;text-decoration:none}
.quick-form{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.quick-form input,
.quick-form textarea{
  padding:10px;
  border-radius:8px;
  border:1px solid rgba(16,24,40,0.08);
  font-size:0.95rem
}
.form-row{display:flex;gap:12px;align-items:center}

/* right column / map */
.map-card{display:flex;flex-direction:column;gap:12px}
.map-wrap{
  width:100%;
  height:320px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(2,6,23,0.06)
}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}

/* address + hours */
.address{font-size:0.95rem;margin-top:6px}
.open-hours ul{list-style:none;padding:0;margin:6px 0 0 0;color:var(--muted)}
.open-hours li{margin:4px 0}

/* footer */
.site-footer{
  padding:32px 0;
  border-top:1px solid rgba(16,24,40,0.03)
}
.footer-inner{display:flex;justify-content:space-between;gap:12px;color:var(--muted)}

/* small helpers */
.muted{color:var(--muted)}
.small{font-size:0.85rem}
.card{overflow:visible}

/* responsive */
@media (max-width: 980px){
  .contact-panel{grid-template-columns:1fr 360px}
  .cards-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .contact-panel{grid-template-columns:1fr;gap:20px}
  .cards-grid{grid-template-columns:1fr}
  .map-wrap{height:260px}
  .title h1{font-size:26px}
}
@media (max-width:480px){
  .title h1{font-size:22px}
  .contact-card{padding:12px}
  .card{padding:12px}
  .phone-link{font-size:0.9rem}
  .quick-form input, .quick-form textarea{font-size:0.9rem}
}