:root{
  --primary:#1e88e5;
  --ink:#0c1220;
  --muted:#4a5568;
  --surface:#fff;
  --card:#f7f9fc;
  --ring:#e6ecf5;
  --header-h:72px;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--surface);line-height:1.5}
a{color:var(--primary);text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 16px}

.site-header{
  position:sticky; top:0; z-index:1000; background:#fff;
  border-bottom:1px solid #e8e8e8; padding:10px 16px; display:flex; align-items:center; gap:14px;
}
.brand{display:flex; align-items:center; gap:10px}
.site-logo{height:56px; width:auto; display:block; object-fit:contain}
.brand-text{font-weight:800; letter-spacing:.2px; color:#111; font-size:18px}

.contact-bar{margin-left:auto; display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.contact-bar a{color:#0a0a0a; font-weight:700}
.contact-bar .sep{opacity:.4}

.main-nav{display:flex; gap:10px; padding:8px 16px; border-bottom:1px solid #f0f0f0}
.main-nav a{padding:8px 10px; font-weight:600; color:#222}

.hero{background:linear-gradient(180deg,#eaf4ff,transparent); padding:28px 0 12px}
.hero .title{font-size:clamp(28px,4vw,44px); margin:10px 0 8px}
.hero p{margin:6px 0 0; color:var(--muted)}
.hero .hero-row{display:flex; gap:20px; align-items:center; flex-wrap:wrap}
.brand-badge{max-width:260px; border-radius:16px; border:1px solid rgba(255,255,255,.25)}

.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}
.btn{display:inline-block; padding:12px 16px; border-radius:10px; font-weight:700; border:2px solid var(--primary)}
.btn.primary{background:var(--primary); color:#fff}
.btn.ghost{background:#fff; color:var(--primary)}

.hero-qr{display:flex; align-items:center; gap:12px; margin-top:10px}
.hero-qr img{height:82px; width:82px; border-radius:10px; border:1px solid #e5eaf0}

.section{padding:54px 0}
.section h2{font-size:32px; margin:0 0 18px}

.services{background:#fff}
.services-grid{display:grid; gap:16px; grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) );}
.service{
  background:var(--card); border:1px solid var(--ring); border-radius:var(--radius);
  padding:18px; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.service h3{margin:0 0 6px; font-size:18px}
.service p{margin:0; color:#333}

.gallery img{width:100%; height:auto; border-radius:12px; border:1px solid #eef1f6; display:block}

#book iframe{width:100%; height:1200px; border:0; border-radius:12px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04)}

.footer{padding:28px 16px; border-top:1px solid #eee; color:#333; background:#fafbfe}
.footer p{margin:6px 0}

.call-now{
  position:fixed; left:0; right:0; bottom:0;
  display:block; text-align:center; padding:14px 16px;
  font-weight:800; color:#fff; background:var(--primary); text-decoration:none;
  box-shadow:0 -4px 12px rgba(0,0,0,.2); z-index:9999;
}
@media (min-width:768px){ .call-now{ display:none; } }

/* Anchor offsets so sections aren't hidden under sticky header */
#services, #book, #gallery, #contact{ scroll-margin-top: calc(var(--header-h) + 14px); }