
:root{
  --ink:#0b2b4f;      /* deep hospital blue */
  --ink-2:#1e3a8a;
  --brand:#0a58ca;    /* button blue */
  --muted:#f1f5f9;
  --card:#ffffff;
  --ring:#e5e7eb;
  --success:#22c55e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji';color:#0f172a}
a{color:var(--ink-2);text-decoration:none}
.container{max-width:1120px;margin:auto;padding:0 16px}
h1,h2{color:var(--ink);margin:0 0 10px}
h2{font-size:26px}
p{line-height:1.6}

/* Header */
.site-top{background:linear-gradient(90deg,#0b2b4f,#1e3a8a);color:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:36px;height:36px}
.brand-text h1{font-size:20px;color:#fff;margin:0}
.brand-text p{margin:2px 0 0;color:#cbd5e1;font-size:12px}
.menu{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.menu a{color:#cbd5e1;font-weight:600}
.menu a.btn{background:#22c55e;color:#052e16;padding:8px 14px;border-radius:999px}

/* Hero */
.hero{position:relative;background:#e2e8f0}
.hero-img{width:100%;height:320px;object-fit:cover;display:block;filter:saturate(1.1)}
.hero-card{position:absolute;left:16px;bottom:16px;background:#ffffffcc;backdrop-filter:blur(4px);border-radius:16px;padding:16px 18px;max-width:380px;border:1px solid var(--ring)}
.hero-title{font-weight:800;color:var(--ink);font-size:22px;margin-bottom:10px}
.btn-lg{background:var(--success);color:#052e16;border:0;padding:10px 16px;border-radius:999px;font-weight:700}

/* Sections */
main .container{padding:0}
.section-head{display:flex;align-items:end;gap:12px;justify-content:space-between}
.section-head .hint{color:#475569}

.quick, .find, .depts, .why, .stories, .gallery, .about{padding:28px 16px}
.cards{display:grid;gap:16px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--ring);border-radius:16px;padding:16px}
.card .title{font-weight:700;color:var(--ink)}

.action{display:flex;align-items:center;gap:12px}
.action .circle{width:42px;height:42px;border-radius:999px;background:linear-gradient(180deg,#1e40af,#1d4ed8);color:#e0e7ff;display:flex;align-items:center;justify-content:center;font-weight:800}
.action .title{color:#0b2b4f}

/* Find a doctor */
.find-bar{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin:12px 0 6px}
.find-bar select,.find-bar input{height:44px;border-radius:10px;border:1px solid var(--ring);padding:0 12px}
.btn{background:var(--brand);color:#fff;border:0;border-radius:10px;height:44px;padding:0 16px;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.doc{border:1px solid var(--ring);border-radius:14px;padding:14px;background:#fff}
.doc .name{font-weight:800;color:var(--ink)}
.doc .meta{color:#334155;font-size:14px}

/* Departments */
.dept{display:flex;gap:12px;align-items:center}
.dept .icon{width:40px;height:40px;border-radius:10px;background:#eff6ff;display:flex;align-items:center;justify-content:center;font-weight:800;color:#1d4ed8}

/* Why Us badges */
.badge{background:#ffffff;border:1px solid #e5e7eb;border-radius:16px;padding:16px}
.badge .t{font-weight:800;color:#0b2b4f;margin-bottom:6px}
.badge .d{color:#334155}

/* Patient stories */
.story{background:#ffffff;border:1px solid #e5e7eb;border-radius:16px;padding:16px}
.story .name{font-weight:800;margin-top:10px;color:#0b2b4f}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gallery-grid img{width:100%;height:160px;object-fit:cover;border-radius:12px;border:1px solid var(--ring)}

/* About */
.about-body{background:#ffffff;border:1px solid var(--ring);border-radius:16px;padding:16px;color:#0f172a}

/* Footer */
.site-foot{background:#0b2b4f;color:#cbd5e1;margin-top:24px}
.foot{display:flex;align-items:center;justify-content:space-between;padding:18px 16px}
.copy{opacity:.8}

/* Responsive */
@media (max-width:960px){
  .cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .find-bar{grid-template-columns:1fr;grid-auto-rows:44px}
  .hero-img{height:260px}
}
@media (max-width:560px){
  .cards.three{grid-template-columns:1fr}
  .cards.four{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .hero-card{left:12px;right:12px;max-width:unset}
}
