:root{
  --bg:#FAF9F5;
  --surface:#FFFFFF;
  --ink:#16211D;
  --muted:#5C6862;
  --line:#E4E1D8;
  --primary:#0D3B36;
  --primary-light:#175C52;
  --primary-tint:#E7EFEC;
  --accent:#C13B2F;
  --accent-tint:#FBEAE7;
  --gold:#B8863B;
  --gold-tint:#F7EFDF;
  --radius:14px;
  --shadow: 0 12px 32px -16px rgba(13,59,54,0.22);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:1240px; margin:0 auto; padding:0 28px;}
h1,h2,h3,h4{font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.01em; color:var(--primary);}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before{content:""; width:18px; height:1.5px; background:var(--accent); display:inline-block;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:999px;
  font-weight:600; font-size:14.5px; cursor:pointer;
  border:1.5px solid transparent; transition:.2s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:#a33127; transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--primary); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--primary); background:var(--primary-tint);}
.btn-light{background:#fff; color:var(--primary);}
.btn-light:hover{background:var(--primary-tint);}
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--primary-light); outline-offset:2px;
}

/* ---------- Top utility bar ---------- */
.topbar{ background:var(--primary); color:#DCEAE6; font-size:13px; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:40px; }
.topbar-left{display:flex; gap:22px; align-items:center;}
.topbar-left a{opacity:.92; display:flex; gap:6px; align-items:center;}
.topbar-left a:hover{opacity:1; text-decoration:underline;}
.emergency-pill{ background:var(--accent); color:#fff; padding:3px 12px; border-radius:999px; font-weight:700; letter-spacing:.02em; font-size:12.5px; }
.topbar-right{display:flex; gap:16px;}
.topbar-right a{width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center;}
.topbar-right a:hover{background:rgba(255,255,255,0.22);}

/* ---------- Main nav ---------- */
header.mainnav{ background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.mainnav .wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px; }
.logo{display:flex; align-items:center; gap:10px;}
.logo-mark{ width:38px; height:38px; border-radius:10px; background:var(--primary); display:flex; align-items:center; justify-content:center; }
.logo-mark svg{width:20px; height:20px;}
.logo-text{font-family:'Fraunces',serif; font-size:22px; font-weight:700; color:var(--primary); line-height:1;}
.logo-sub{font-size:10px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; margin-top:2px;}

nav.primary-links{display:flex; gap:6px; align-items:center;}
nav.primary-links > div{position:relative;}
.nav-link{ padding:10px 14px; border-radius:8px; font-weight:600; font-size:14.5px; color:var(--ink); display:flex; align-items:center; gap:5px; cursor:pointer; }
.nav-link:hover, .nav-link.active{background:var(--primary-tint); color:var(--primary);}
.nav-link svg{width:13px; height:13px; opacity:.6;}

.mega{
  position:absolute; top:calc(100% + 10px); left:0;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px; width:340px;
  display:none; grid-template-columns:1fr 1fr; gap:6px;
}
nav.primary-links > div:hover .mega{display:grid;}
.mega a{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:9px; font-size:13.5px; font-weight:600; }
.mega a:hover{background:var(--primary-tint);}
.mega-icon{width:30px; height:30px; border-radius:8px; background:var(--primary-tint); display:flex; align-items:center; justify-content:center; flex:none;}
.mega-icon svg{width:16px; height:16px; stroke:var(--primary);}

.hamburger-btn{
  display:none; width:40px; height:40px; border-radius:10px; border:1.5px solid var(--line);
  background:#fff; align-items:center; justify-content:center; cursor:pointer;
}
.hamburger-btn svg{width:19px; height:19px; stroke:var(--primary);}
body.nav-open{overflow:hidden;}

.nav-cta{display:flex; align-items:center; gap:10px;}
.icon-btn{ width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.icon-btn:hover{border-color:var(--primary); background:var(--primary-tint);}
.icon-btn svg{width:17px; height:17px; stroke:var(--primary);}

/* ---------- Hero (home) ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(1100px 480px at 82% -10%, rgba(184,134,59,0.16), transparent 60%),
    linear-gradient(180deg, #0D3B36 0%, #0A2F2B 100%);
  color:#fff; padding:64px 0 150px; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:26px 26px; opacity:.5;
  mask-image:linear-gradient(180deg, black, transparent 80%);
}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center;}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16);
  padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:600;
  color:#E7C889; margin-bottom:22px;
}
.hero-eyebrow svg{width:14px; height:14px;}
.hero h1{ color:#fff; font-size:clamp(34px,4.4vw,54px); line-height:1.06; font-weight:600; margin-bottom:20px; }
.hero h1 em{color:#E7C889; font-style:normal;}
.hero p.lede{ font-size:17px; color:#C9DAD5; max-width:480px; margin-bottom:30px; }
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:38px;}
.hero-stats{display:flex; gap:34px; flex-wrap:wrap;}
.hero-stats div{border-left:2px solid rgba(231,200,137,0.5); padding-left:12px;}
.hero-stats b{display:block; font-family:'Fraunces',serif; font-size:26px; color:#fff;}
.hero-stats span{font-size:12.5px; color:#9FB6AF;}

.hero-visual{
  position:relative; height:420px; border-radius:20px; overflow:hidden;
  background:
    linear-gradient(160deg, #175C52 0%, #0D3B36 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 34px);
  border:1px solid rgba(255,255,255,0.14);
}
.hero-visual .badge{
  position:absolute; bottom:20px; left:20px; right:20px;
  background:rgba(10,32,29,0.72); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.15); border-radius:12px;
  padding:16px 18px; display:flex; gap:12px; align-items:center;
}
.hero-visual .badge svg{width:26px; height:26px; stroke:#E7C889; flex:none;}
.hero-visual .badge b{display:block; font-size:14px; color:#fff;}
.hero-visual .badge span{font-size:12.5px; color:#B7CCC6;}
.pulse-line{position:absolute; top:14px; left:14px; right:14px; opacity:.55;}

/* ---------- Floating appointment card ---------- */
.booking-card{
  position:relative; z-index:5;
  max-width:1120px; margin:-96px auto 0;
  background:#fff; border-radius:18px; box-shadow:var(--shadow);
  border:1px solid var(--line); padding:26px 30px;
  display:grid; grid-template-columns:1.3fr 1.3fr 1.3fr 1fr; gap:22px; align-items:end;
}
.field label{ display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:8px; }
.field select, .field input, .field textarea{
  width:100%; border:1.5px solid var(--line); border-radius:9px; padding:11px 12px;
  font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); background:#fff;
}
.field textarea{resize:vertical; min-height:110px;}
.booking-card .btn-primary{width:100%; justify-content:center; padding:13px;}

section{padding:88px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:44px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(26px,3vw,36px);}
.section-head p{color:var(--muted); max-width:520px; margin-top:10px; font-size:15px;}

/* ---------- Specialities ---------- */
.spec-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.spec-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px 16px; text-align:center; transition:.2s ease; cursor:pointer; }
.spec-card:hover{border-color:var(--primary); transform:translateY(-4px); box-shadow:var(--shadow);}
.spec-icon{ width:52px; height:52px; border-radius:14px; margin:0 auto 14px; background:var(--primary-tint); display:flex; align-items:center; justify-content:center; }
.spec-icon svg{width:26px; height:26px; stroke:var(--primary);}
.spec-card b{font-size:13.5px; font-weight:700; color:var(--ink);}

/* ---------- Why choose (model of care) ---------- */
.why-band{background:var(--primary); color:#fff;}
.why-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:rgba(255,255,255,0.14); border-radius:16px; overflow:hidden; margin-top:10px;}
.why-item{background:var(--primary); padding:30px 22px;}
.why-item svg{width:26px; height:26px; stroke:#E7C889; margin-bottom:16px;}
.why-item b{display:block; font-family:'Fraunces',serif; font-size:16.5px; margin-bottom:8px; color:#fff; font-weight:600;}
.why-item span{font-size:13px; color:#AFC6C0;}
.why-band .section-head h2, .why-band .section-head p{color:#fff;}
.why-band .section-head p{color:#AFC6C0;}
.why-band .eyebrow{color:#E7C889;}
.why-band .eyebrow::before{background:#E7C889;}

/* ---------- Services ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.svc-card{ border:1px solid var(--line); border-radius:16px; padding:26px; background:var(--surface); display:flex; flex-direction:column; gap:14px; transition:.2s; }
.svc-card:hover{box-shadow:var(--shadow); border-color:var(--primary);}
.svc-icon{width:46px; height:46px; border-radius:12px; background:var(--accent-tint); display:flex; align-items:center; justify-content:center;}
.svc-icon svg{width:22px; height:22px; stroke:var(--accent);}
.svc-card h4{font-size:17px; color:var(--ink); font-weight:700; font-family:'Inter',sans-serif;}
.svc-card p{font-size:13.5px; color:var(--muted); flex:1;}
.svc-card a{font-size:13px; font-weight:700; color:var(--primary); display:flex; align-items:center; gap:5px;}
.svc-card a svg{width:13px; height:13px;}

/* ---------- EKG divider ---------- */
.ekg-divider{width:100%; height:44px; opacity:.5;}

/* ---------- Stats strip ---------- */
.stats-strip{background:var(--gold-tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stats-strip .wrap{display:flex; justify-content:space-between; padding:38px 28px; flex-wrap:wrap; gap:24px;}
.stat{text-align:center; flex:1; min-width:150px;}
.stat b{display:block; font-family:'Fraunces',serif; font-size:34px; color:var(--primary);}
.stat span{font-size:13px; color:var(--muted); font-weight:600;}

/* ---------- Doctors / testimonial ---------- */
.doc-panel{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center;}
.doc-visual{ height:380px; border-radius:18px; background:linear-gradient(155deg,#175C52,#0D3B36); position:relative; overflow:hidden; border:1px solid var(--line); }
.doc-visual::after{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(60deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 22px); }
.doc-quote-card{ position:absolute; left:20px; right:20px; bottom:20px; background:rgba(255,255,255,0.96); border-radius:12px; padding:16px 18px; }
.doc-quote-card b{font-size:13.5px; color:var(--ink); display:block;}
.doc-quote-card span{font-size:12px; color:var(--muted);}
.doc-copy h2{margin-bottom:16px;}
.doc-copy p{color:var(--muted); font-size:15px; margin-bottom:26px; max-width:520px;}
.doc-tags{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px;}
.doc-tags span{ border:1.5px solid var(--line); padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600; color:var(--primary); }

/* ---------- Hospital network ---------- */
.net-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.net-card{border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--surface);}
.net-photo{height:150px; background:linear-gradient(135deg,var(--primary-light),var(--primary)); position:relative;}
.net-photo span{ position:absolute; bottom:10px; left:12px; color:#fff; font-family:'Fraunces',serif; font-size:15px; font-weight:600; }
.net-body{padding:16px 18px;}
.net-body b{font-size:13.5px; display:block; margin-bottom:10px; color:var(--ink); font-weight:700;}
.net-body a{font-size:12.5px; font-weight:700; color:var(--primary);}

/* ---------- Awards ---------- */
.awards-strip{ display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; }
.awards-strip::-webkit-scrollbar{display:none;}
.award-card{ flex:none; width:230px; border:1px solid var(--gold); border-radius:14px; background:var(--gold-tint); padding:22px; }
.award-card .yr{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold); font-weight:600; letter-spacing:.06em;}
.award-card b{display:block; font-family:'Fraunces',serif; font-size:16px; margin:10px 0 6px; color:var(--primary);}
.award-card span{font-size:12.5px; color:var(--muted);}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--accent); border-radius:22px; padding:52px 56px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; color:#fff;
}
.cta-band h2{color:#fff; font-size:28px; margin-bottom:8px;}
.cta-band p{color:#F8DAD6; font-size:14.5px;}
.cta-band .btn-light{color:var(--accent);}

/* ---------- Footer ---------- */
footer{background:#0A2622; color:#B7CCC6; padding-top:70px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,0.1);}
.foot-grid h4{color:#fff; font-size:13.5px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px; font-family:'Inter',sans-serif; font-weight:700;}
.foot-grid li{margin-bottom:11px; font-size:13.5px;}
.foot-grid li a:hover{color:#fff; text-decoration:underline;}
.foot-logo{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.foot-logo .logo-mark{background:#E7C889;}
.foot-logo .logo-mark svg{stroke:#0A2622;}
.foot-logo b{font-family:'Fraunces',serif; color:#fff; font-size:20px;}
.foot-desc{font-size:13.5px; max-width:280px; margin-bottom:20px; color:#8FA9A2;}
.foot-app{display:flex; gap:10px;}
.foot-app a{border:1px solid rgba(255,255,255,0.2); border-radius:9px; padding:9px 14px; font-size:12px; font-weight:600; color:#fff;}
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:12.5px; flex-wrap:wrap; gap:12px; }
.foot-social{display:flex; gap:10px;}
.foot-social a{width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center;}

/* =======================================================
   INNER-PAGE HERO (About / Appointment / Contact / Blog / Gallery / Events / Testimonials)
   ======================================================= */
.page-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 380px at 85% -20%, rgba(184,134,59,0.18), transparent 60%),
    linear-gradient(180deg, #0D3B36 0%, #0A2F2B 100%);
  color:#fff; padding:54px 0 64px;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:26px 26px; opacity:.5;
  mask-image:linear-gradient(180deg, black, transparent 85%);
}
.page-hero .wrap{position:relative;}
.breadcrumb{display:flex; gap:8px; align-items:center; font-size:13px; color:#9FB6AF; margin-bottom:16px;}
.breadcrumb a:hover{color:#fff; text-decoration:underline;}
.breadcrumb span{opacity:.6;}
.page-hero h1{color:#fff; font-size:clamp(28px,3.6vw,42px); margin-bottom:12px;}
.page-hero p{color:#C9DAD5; font-size:15.5px; max-width:560px;}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.testi-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px; display:flex; flex-direction:column; gap:16px; }
.stars{display:flex; gap:3px;}
.stars svg{width:15px; height:15px; fill:var(--gold); stroke:var(--gold);}
.testi-card p.quote{font-size:14.5px; color:var(--ink); flex:1; line-height:1.65;}
.testi-who{display:flex; align-items:center; gap:12px;}
.avatar{ width:44px; height:44px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:700; font-size:16px; flex:none; }
.testi-who b{font-size:13.5px; display:block; color:var(--ink);}
.testi-who span{font-size:12px; color:var(--muted);}
.testi-tag{ align-self:flex-start; background:var(--primary-tint); color:var(--primary); font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px; }

.testi-hero-card{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:40px; display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;
  box-shadow:var(--shadow); margin-bottom:56px;
}
.testi-hero-card .avatar{width:64px; height:64px; font-size:22px;}
.testi-hero-card p.quote{font-size:19px; font-family:'Fraunces',serif; color:var(--primary); font-weight:500; line-height:1.5;}

.filter-pills{display:flex; gap:10px; flex-wrap:wrap;}
.filter-pills button{
  border:1.5px solid var(--line); background:#fff; padding:9px 18px; border-radius:999px;
  font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; transition:.2s;
}
.filter-pills button:hover, .filter-pills button.active{ border-color:var(--primary); color:var(--primary); background:var(--primary-tint); }

/* ---------- Blog ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.blog-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:.2s; }
.blog-card:hover{box-shadow:var(--shadow); border-color:var(--primary); transform:translateY(-3px);}
.blog-thumb{height:180px; position:relative; background:linear-gradient(150deg,var(--primary-light),var(--primary));}
.blog-thumb.t2{background:linear-gradient(150deg,#B8863B,#7C5A26);}
.blog-thumb.t3{background:linear-gradient(150deg,#C13B2F,#7E251C);}
.blog-thumb.t4{background:linear-gradient(150deg,#175C52,#0A2622);}
.blog-cat{ position:absolute; top:12px; left:12px; background:rgba(255,255,255,0.94); color:var(--primary); font-size:11px; font-weight:700; padding:5px 11px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; }
.blog-body{padding:20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.blog-date{font-size:12px; color:var(--muted); font-family:'IBM Plex Mono',monospace;}
.blog-body h3{font-size:16.5px; line-height:1.35; font-family:'Inter',sans-serif; font-weight:700; color:var(--ink);}
.blog-body p{font-size:13.5px; color:var(--muted); flex:1;}
.blog-body a{font-size:13px; font-weight:700; color:var(--primary); display:flex; align-items:center; gap:5px; margin-top:4px;}
.blog-featured{ display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden; margin-bottom:56px; }
.blog-featured .blog-thumb{height:100%; min-height:300px;}
.blog-featured .blog-body{padding:36px 40px 36px 0;}
.blog-featured .blog-body h3{font-size:24px; font-family:'Fraunces',serif;}

/* ---------- Article (blog detail) ---------- */
.article-header{max-width:760px; margin:0 auto;}
.article-header .eyebrow{margin-bottom:14px;}
.article-header h1{font-size:clamp(28px,4vw,42px); color:#fff; margin-bottom:18px;}
.article-meta{display:flex; gap:18px; flex-wrap:wrap; color:#C9DAD5; font-size:13px; align-items:center;}
.article-meta .avatar{width:32px; height:32px; font-size:12px;}
.article-meta-item{display:flex; align-items:center; gap:8px;}
.article-cover{ height:360px; border-radius:18px; background:linear-gradient(150deg,var(--primary-light),var(--primary)); margin:-96px auto 48px; max-width:920px; position:relative; z-index:5; box-shadow:var(--shadow); border:1px solid var(--line); }
.article-body{max-width:720px; margin:0 auto;}
.article-body p{font-size:16px; color:var(--ink); margin-bottom:20px; line-height:1.75;}
.article-body h2{font-size:24px; margin:36px 0 16px;}
.article-body h3{font-size:19px; margin:28px 0 12px; color:var(--ink); font-family:'Inter',sans-serif; font-weight:700;}
.article-body ul{margin:0 0 20px 0;}
.article-body ul li{ font-size:15.5px; color:var(--ink); padding-left:22px; position:relative; margin-bottom:10px; }
.article-body ul li::before{ content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:2px; background:var(--accent); }
.article-body blockquote{ border-left:3px solid var(--accent); padding:6px 0 6px 22px; font-family:'Fraunces',serif; font-size:19px; color:var(--primary); font-weight:500; margin:28px 0; }
.article-tags{display:flex; gap:10px; flex-wrap:wrap; margin:36px 0;}
.article-tags span{ border:1.5px solid var(--line); padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--primary); }
.article-author-card{ display:flex; gap:16px; align-items:center; background:var(--primary-tint); border-radius:16px; padding:22px; margin:40px 0; }
.article-author-card .avatar{width:52px; height:52px; font-size:18px;}
.article-author-card b{display:block; font-size:14.5px; color:var(--ink);}
.article-author-card span{font-size:12.5px; color:var(--muted);}
.related-grid{max-width:920px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:14px;}
.gallery-item{ border-radius:14px; position:relative; overflow:hidden; background:linear-gradient(150deg,var(--primary-light),var(--primary)); }
.gallery-item.tall{grid-row:span 2;}
.gallery-item.g2{background:linear-gradient(150deg,#B8863B,#7C5A26);}
.gallery-item.g3{background:linear-gradient(150deg,#C13B2F,#7E251C);}
.gallery-item.g4{background:linear-gradient(150deg,#0A2622,#175C52);}
.gallery-item.g5{background:linear-gradient(150deg,#5C6862,#16211D);}
.gallery-caption{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px; background:linear-gradient(0deg, rgba(0,0,0,0.55), transparent); color:#fff; font-size:13px; font-weight:600; opacity:0; transition:.2s; }
.gallery-item:hover .gallery-caption{opacity:1;}

/* ---------- Events ---------- */
.event-tabs{display:flex; gap:10px; margin-bottom:36px;}
.event-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.event-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.event-thumb{height:150px; position:relative; background:linear-gradient(150deg,var(--primary-light),var(--primary));}
.event-thumb.e2{background:linear-gradient(150deg,#B8863B,#7C5A26);}
.event-thumb.e3{background:linear-gradient(150deg,#C13B2F,#7E251C);}
.event-date-badge{ position:absolute; top:12px; left:12px; background:#fff; border-radius:10px; padding:7px 10px; text-align:center; line-height:1.1; }
.event-date-badge b{display:block; font-size:17px; color:var(--accent); font-family:'Fraunces',serif;}
.event-date-badge span{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:700;}
.event-body{padding:20px;}
.event-body .eyebrow{margin-bottom:10px;}
.event-body h3{font-size:16px; font-family:'Inter',sans-serif; font-weight:700; color:var(--ink); margin-bottom:10px;}
.event-meta{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); margin-bottom:16px;}
.event-meta-item{display:flex; align-items:center; gap:8px;}
.event-meta-item svg{width:14px; height:14px; stroke:var(--primary); flex:none;}
.event-list-row{ display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 22px; margin-bottom:14px; }
.event-list-row b{font-size:15px; color:var(--ink); display:block; margin-bottom:4px;}
.event-list-row span{font-size:12.5px; color:var(--muted);}

/* ---------- Contact page ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:44px;}
.contact-info-list{display:flex; flex-direction:column; gap:16px; margin-top:28px;}
.contact-info-item{ display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; }
.contact-info-item .ic{ width:40px; height:40px; border-radius:10px; background:var(--primary-tint); display:flex; align-items:center; justify-content:center; flex:none; }
.contact-info-item .ic svg{width:19px; height:19px; stroke:var(--primary);}
.contact-info-item b{display:block; font-size:14px; color:var(--ink); margin-bottom:3px;}
.contact-info-item span{font-size:13px; color:var(--muted);}
.map-placeholder{ height:200px; border-radius:14px; margin-top:16px; background:repeating-linear-gradient(45deg, var(--primary-tint), var(--primary-tint) 10px, #fff 10px, #fff 20px); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; font-weight:600; }
.form-panel{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:34px; box-shadow:var(--shadow); }
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px;}
.form-grid .field.full{grid-column:1/3;}
.location-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.location-tabs button{ border:1.5px solid var(--line); background:#fff; padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; }
.location-tabs button.active, .location-tabs button:hover{border-color:var(--primary); color:var(--primary); background:var(--primary-tint);}

/* ---------- Appointment page ---------- */
.appt-steps{display:flex; gap:0; margin-bottom:36px;}
.appt-step{ flex:1; text-align:center; padding-bottom:14px; border-bottom:3px solid var(--line); color:var(--muted); font-size:13px; font-weight:700; position:relative; }
.appt-step.active{border-color:var(--accent); color:var(--primary);}
.appt-step b{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--line); color:#fff; font-size:12px; margin:0 auto 8px; }
.appt-step.active b{background:var(--accent);}
.appt-panel{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:36px; max-width:760px; margin:0 auto; box-shadow:var(--shadow); }
.radio-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.radio-card{ border:1.5px solid var(--line); border-radius:12px; padding:16px; text-align:center; cursor:pointer; transition:.2s; }
.radio-card:hover{border-color:var(--primary);}
.radio-card.active{border-color:var(--accent); background:var(--accent-tint);}
.radio-card svg{width:22px; height:22px; stroke:var(--primary); margin:0 auto 8px;}
.radio-card b{font-size:13px; color:var(--ink);}
.appt-summary{ background:var(--primary-tint); border-radius:12px; padding:18px 20px; margin:24px 0; font-size:13.5px; color:var(--primary); }
.appt-summary b{color:var(--primary);}

/* ---------- About page ---------- */
.about-split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.about-visual{ height:420px; border-radius:20px; background:linear-gradient(150deg,var(--primary-light),var(--primary)); border:1px solid var(--line); position:relative; overflow:hidden; }
.timeline{display:flex; flex-direction:column; gap:0; max-width:760px; margin:0 auto;}
.timeline-item{ display:grid; grid-template-columns:110px auto 1fr; gap:20px; padding-bottom:36px; position:relative; }
.timeline-item:not(:last-child)::before{ content:""; position:absolute; left:120px; top:8px; bottom:0; width:1.5px; background:var(--line); }
.timeline-yr{font-family:'Fraunces',serif; font-size:18px; color:var(--accent); font-weight:600;}
.timeline-dot{width:12px; height:12px; border-radius:50%; background:var(--accent); margin-top:6px;}
.timeline-item h4{font-size:15.5px; margin-bottom:6px; color:var(--ink); font-family:'Inter',sans-serif; font-weight:700;}
.timeline-item p{font-size:13.5px; color:var(--muted);}
.value-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.value-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px;}
.value-card svg{width:26px; height:26px; stroke:var(--primary); margin-bottom:16px;}
.value-card b{display:block; font-size:15px; margin-bottom:8px; color:var(--ink);}
.value-card span{font-size:13px; color:var(--muted);}

/* ---------- Mobile nav drawer ---------- */
@media(max-width:900px){
  .hamburger-btn{display:flex;}
  nav.primary-links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:2px;
    padding:12px 16px 18px; box-shadow:var(--shadow);
    max-height:80vh; overflow-y:auto;
  }
  nav.primary-links.open{display:flex;}
  nav.primary-links > div{position:static;}
  nav.primary-links .nav-link{width:100%; justify-content:space-between;}
  nav.primary-links .mega{
    position:static; display:none; box-shadow:none; border:none; width:auto;
    grid-template-columns:1fr; background:var(--primary-tint); margin:4px 0 8px; padding:10px;
  }
  nav.primary-links > div:hover .mega{display:none;}
  nav.primary-links > div.mega-open .mega{display:grid;}
}

/* ---------- Doctors listing ---------- */
.doctor-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.doctor-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:.2s;}
.doctor-card:hover{box-shadow:var(--shadow); border-color:var(--primary); transform:translateY(-3px);}
.doctor-photo{height:180px; position:relative; background:linear-gradient(150deg,var(--primary-light),var(--primary));}
.doctor-photo.d2{background:linear-gradient(150deg,#B8863B,#7C5A26);}
.doctor-photo.d3{background:linear-gradient(150deg,#C13B2F,#7E251C);}
.doctor-photo.d4{background:linear-gradient(150deg,#0A2622,#175C52);}
.doctor-avail{position:absolute; top:12px; right:12px; background:#fff; color:var(--primary); font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:999px;}
.doctor-body{padding:18px;}
.doctor-body b.name{display:block; font-size:15px; color:var(--ink); margin-bottom:4px;}
.doctor-body .role{font-size:12.5px; color:var(--accent); font-weight:600; margin-bottom:10px; display:block;}
.doctor-meta{display:flex; gap:12px; font-size:12px; color:var(--muted); margin-bottom:14px; flex-wrap:wrap;}
.doctor-meta span{display:flex; align-items:center; gap:5px;}
.doctor-body a.btn{width:100%; justify-content:center; padding:10px;}

/* ---------- Doctor profile detail ---------- */
.doctor-hero{display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:start;}
.doctor-hero-photo{width:280px; height:320px; border-radius:18px; background:linear-gradient(150deg,var(--primary-light),var(--primary)); border:1px solid var(--line); flex:none;}
.doctor-hero-info .role{color:#E7C889; font-weight:700; font-size:14.5px; margin-bottom:16px; display:block;}
.doctor-stats-row{display:flex; gap:28px; margin:22px 0; flex-wrap:wrap;}
.doctor-stats-row div{border-left:2px solid rgba(231,200,137,0.5); padding-left:14px;}
.doctor-stats-row b{display:block; font-family:'Fraunces',serif; font-size:22px; color:#fff;}
.doctor-stats-row span{font-size:12px; color:#9FB6AF;}
.doctor-tabs{display:flex; gap:0; border-bottom:1px solid var(--line); margin:0 0 28px; flex-wrap:wrap;}
.doctor-tabs button{background:none; border:none; padding:14px 4px; margin-right:26px; font-weight:700; font-size:14px; color:var(--muted); cursor:pointer; border-bottom:2.5px solid transparent;}
.doctor-tabs button.active{color:var(--primary); border-color:var(--accent);}
.doctor-tabs button:hover{color:var(--primary);}
.expertise-tags{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
[data-tab-panel]{}

/* ---------- Department / Service detail ---------- */
.detail-overview{display:grid; grid-template-columns:1.3fr 0.9fr; gap:48px;}
.chip-list{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.chip-list span{background:var(--primary-tint); color:var(--primary); font-size:13px; font-weight:600; padding:8px 14px; border-radius:999px;}
.step-list{display:flex; flex-direction:column; gap:22px;}
.step-list .step{display:grid; grid-template-columns:auto 1fr; gap:16px;}
.step-list .step .num{width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; font-family:'Fraunces',serif;}
.step-list .step b{display:block; margin-bottom:4px; font-size:15px; color:var(--ink);}
.step-list .step p{font-size:13.5px; color:var(--muted); margin:0;}
.faq-item{border-bottom:1px solid var(--line); padding:18px 0;}
.faq-item summary{font-weight:700; font-size:15px; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:20px; color:var(--accent); flex:none;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin-top:12px; font-size:13.5px; color:var(--muted);}
.side-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; margin-bottom:20px;}
.side-card h4{font-size:14px; margin-bottom:14px; color:var(--ink); font-family:'Inter',sans-serif;}
.side-doc-row{display:flex; gap:12px; align-items:center; margin-bottom:14px;}
.side-doc-row .avatar{width:40px; height:40px; font-size:14px;}
.side-doc-row b{font-size:13px; display:block; color:var(--ink);}
.side-doc-row span{font-size:11.5px; color:var(--muted);}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .spec-grid{grid-template-columns:repeat(3,1fr);}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(3,1fr);}
  .net-grid{grid-template-columns:repeat(2,1fr);}
  .doc-panel{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr; row-gap:40px;}
  .booking-card{grid-template-columns:1fr 1fr; margin-top:-60px;}
  .testi-grid{grid-template-columns:repeat(2,1fr);}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .blog-featured{grid-template-columns:1fr;}
  .blog-featured .blog-thumb{min-height:220px;}
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
  .event-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;}
  .about-split{grid-template-columns:1fr;}
  .value-grid{grid-template-columns:repeat(2,1fr);}
  .related-grid{grid-template-columns:1fr;}
  .doctor-grid{grid-template-columns:repeat(2,1fr);}
  .doctor-hero{grid-template-columns:1fr;}
  .doctor-hero-photo{width:100%; height:260px;}
  .detail-overview{grid-template-columns:1fr;}
}
@media(max-width:720px){
  .topbar-left span.hide-sm{display:none;}
  .hero .wrap{grid-template-columns:1fr;}
  .hero-visual{height:260px;}
  .spec-grid{grid-template-columns:repeat(2,1fr);}
  .svc-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr 1fr;}
  .booking-card{grid-template-columns:1fr; margin-top:-40px;}
  .net-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .cta-band{flex-direction:column; text-align:center;}
  section{padding:56px 0;}
  .testi-grid{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:140px;}
  .event-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .form-grid .field.full{grid-column:1;}
  .radio-cards{grid-template-columns:1fr;}
  .value-grid{grid-template-columns:1fr;}
  .testi-hero-card{grid-template-columns:1fr; text-align:center;}
  .article-cover{height:220px; margin-top:-40px;}
  .timeline-item{grid-template-columns:70px auto 1fr;}
  .timeline-item:not(:last-child)::before{left:80px;}
  .doctor-grid{grid-template-columns:1fr;}
  .doctor-tabs{gap:0; overflow-x:auto;}
  .doctor-tabs button{margin-right:16px; white-space:nowrap;}
}