/* Light theme with colors inspired by company logo (rose/mauve) */
:root{
  --bg: #fdf7f9;         /* very light pink background */
  --surface: #ffffff;    /* white surface for cards/sections */
  --ink: #3d2d2d;        /* deep brownish text color */
  --muted: #7a5c5c;      /* muted mauve for secondary text */
  --primary: #a45a68;    /* dusty rose as primary brand color */
  --primary-ink: #5c2f36;
  --ring: rgba(164,90,104,.35);
  --card: #ffffff;
  --card-border: #e8d9dc;
}

*{ box-sizing: border-box }
html, body { margin:0; padding:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: var(--ink); background: var(--bg); }
img{ max-width:100%; display:block }

.container{ max-width: 1100px; padding: 0 20px; margin: 0 auto; }

.site-header{
  background: var(--surface);
  border-bottom: 1px solid var(--card-border);
  position: sticky; top:0; z-index: 20;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap: 16px; padding: 10px 0;
}
.brand img{ height: 60px; width:auto }
.header-meta{ display:flex; align-items:center; gap: 12px }
.tel{ font-weight:700; text-decoration:none; color: var(--primary-ink) }
.btn{
  display:inline-block; padding: 12px 18px; border-radius: 14px;
  background: var(--surface); color: var(--primary-ink); text-decoration:none; font-weight:700; 
  transition: transform .06s ease, box-shadow .06s ease;
}
.btn:hover{ transform: translateY(-1px) }
.btn.primary{ background: var(--primary); color: white; border-color: var(--primary) }
.btn.ghost{ background: transparent; border-color: var(--primary); color: var(--primary-ink) }

.hero{
  background: radial-gradient(1200px 400px at 20% -10%, #f8ebee, transparent), var(--bg);
  padding: 64px 0 40px;
}
.hero-inner{ display:grid; grid-template-columns: 1fr; gap: 24px; align-items:center }
.hero-copy h1{ font-size: clamp(28px, 4.2vw, 44px); margin: 0 0 10px }
.hero-copy p{ font-size: 18px; color: var(--muted); max-width: 720px }
.hero-ctas{ display:flex; gap:12px; margin-top:10px; flex-wrap: wrap }

.highlights{ padding: 28px 0 }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 16px }
.card{ box-shadow: 0 1px 3px rgba(0,0,0,.05); background: var(--card);  border-radius: 16px; padding: 18px }
.card h3{ margin: 0 0 6px }

.services{ padding: 28px 0 18px }
.services h2{ margin-top:0 }
.service{ box-shadow: 0 1px 3px rgba(0,0,0,.05); background: var(--card);  border-radius: 16px; padding: 16px }
.bullets{ line-height: 1.9; color: var(--muted) }

.schedule{ padding: 28px 0 50px }
.field{ display:flex; flex-direction:column; gap:6px }
label{ font-weight: 600 }
input, select, textarea{
  width:100%; padding: 12px 14px; border-radius: 12px;  background: white; color: var(--ink);
  outline: none; box-shadow: 0 0 0 0 var(--ring);
}
input:focus, select:focus, textarea:focus{ box-shadow: 0 0 0 4px var(--ring) }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 14px }
.form-actions{ display:flex; align-items:center; gap: 14px; margin-top: 10px }
.form-note{ color: var(--muted) }

.alert{ margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-weight:600 }
.alert.success{ background:#f1f9f3; color:#14532d; border: 1px solid #c7e5d1 }
.alert.error{ background:#fde8e8; color:#9b1c1c; border: 1px solid #f5b5b5 }

.site-footer{ background: var(--surface); border-top:1px solid var(--card-border) }
.footer-inner{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding: 24px 0 }
.footer-col h4{ margin: 0 0 8px }
.legal{ text-align:center; font-size: 14px; color: var(--muted); padding: 10px 0; border-top:1px solid var(--card-border) }

@media (max-width: 820px){
  .grid-3{ grid-template-columns: 1fr }
  .grid-2{ grid-template-columns: 1fr }
  .header-inner{ flex-direction:column; align-items:flex-start }
}

.brand{ display:flex; align-items:center; gap: 12px; text-decoration:none }
.brand-name{ font-weight:800; letter-spacing:.2px; color: var(--primary-ink) }
.topnav{ display:flex; gap:14px; flex-wrap:wrap }
.topnav a{ text-decoration:none; font-weight:600; color: var(--muted); padding: 8px 10px; border-radius: 10px }
.topnav a:hover{ background: #f2e8ea; color: var(--primary-ink) }

.about, .why, .areas, .map, .map-frame{  border-radius: 16px; overflow:hidden; background:#fff }
.map-frame iframe{ width:100%; height:380px; border:0 }

.muted{ color: var(--muted) }


/* --- Professional polish & mobile layout improvements --- */
.site-header{
  background: var(--surface);
  border-bottom: 1px solid var(--card-border);
  position: sticky; top:0; z-index: 20;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.topnav{
  display:flex; gap:18px; flex-wrap:wrap;
}
@media (max-width: 820px){
  .header-inner{ width:100%; gap: 10px; }
  .brand{ align-items:center; }
  .topnav{ width:100%; justify-content: space-between; gap: 8px; }
  .topnav a{ padding:10px 12px;  background:#fff; flex:1; text-align:center }
  .header-meta{ width:100%; justify-content: space-between; gap: 10px }
  .tel{ font-weight:700; padding: 10px 12px;  border-radius:12px; background:#fff }
  .btn.primary{ flex:1; text-align:center }
  .hero{ padding: 36px 0 28px; }
  .hero-ctas .btn{ flex:1; text-align:center }
  .card{ box-shadow: 0 1px 3px rgba(0,0,0,.05); border-radius: 14px }
}

/* Center content blocks slightly and refine spacing */
.highlights, .services, .about, .why, .areas, .map, .container .grid-3 > .card, .service{ box-shadow: 0 1px 3px rgba(0,0,0,.05); box-shadow: 0 1px 3px rgba(0,0,0,.03); }