/* Hexagon Photostat — shared styles (home page + Bhopal Development Plan 2047 page) */
:root{
  --black:#141414; --near-black:#121212; --white:#ffffff;
  --yellow:#FFCC00; --cyan:#00AEEF; --magenta:#EC008C;
  --grey-dark:#5A5A5A; --grey-mid:#8a8a8a; --grey-light:#F3F3F3; --border-grey:#E6E6E6;
  --max-w:1160px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:'Poppins',system-ui,sans-serif; color:var(--black); background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 24px; }
section{ padding:88px 0; }
h1,h2,h3{ margin:0; font-weight:700; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--yellow); color:var(--black); padding:10px 16px; z-index:100; font-weight:600; }
.skip-link:focus{ left:8px; top:8px; }

/* Calibration strip */
.strip{ display:flex; width:100%; height:10px; }
.strip span{ flex:1; }

/* Announcement bar */
.announce{ background:var(--yellow); color:var(--black); font-size:.86rem; font-weight:600; text-align:center; padding:9px 16px; line-height:1.4; }
.announce a{ text-decoration:underline; text-underline-offset:3px; }
.announce .new{ background:var(--black); color:var(--yellow); border-radius:4px; padding:1px 8px; margin-right:8px; font-size:.7rem; letter-spacing:.07em; }

/* Header */
header.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.96); backdrop-filter:saturate(180%) blur(6px); border-bottom:1px solid var(--border-grey); }
.header-inner{ max-width:var(--max-w); margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brandmark{ display:flex; align-items:center; gap:12px; }
.brandmark svg{ width:44px; height:auto; flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text .name{ font-weight:700; font-size:1.15rem; }
.brand-text .tag{ font-size:.68rem; color:var(--grey-dark); letter-spacing:.02em; }
nav.main-nav ul{ display:flex; gap:26px; align-items:center; }
nav.main-nav a{ font-size:.93rem; font-weight:500; color:var(--black); white-space:nowrap; }
nav.main-nav a:hover{ color:var(--magenta); }
nav.main-nav a.nav-plan{ background:var(--black); color:var(--yellow); padding:6px 12px; border-radius:6px; font-weight:600; }
nav.main-nav a.nav-plan:hover{ color:var(--white); }
nav.main-nav a.nav-plan .pill{ background:var(--yellow); color:var(--black); font-size:.62rem; padding:1px 6px; border-radius:4px; margin-left:6px; letter-spacing:.05em; }
.header-actions{ display:flex; align-items:center; gap:14px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; border-radius:8px; font-weight:600; font-size:.92rem; border:2px solid transparent; cursor:pointer; white-space:nowrap; font-family:inherit; }
.btn-primary{ background:var(--yellow); color:var(--black); }
.btn-primary:hover{ background:#e6b800; }
.btn-dark{ background:var(--black); color:var(--yellow); }
.btn-dark:hover{ background:#2a2a2a; }
.btn-outline{ border-color:var(--black); color:var(--black); background:transparent; }
.btn-outline:hover{ background:var(--black); color:var(--white); }
.btn-outline-light{ border-color:rgba(255,255,255,.5); color:var(--white); background:transparent; }
.btn-outline-light:hover{ border-color:var(--white); background:rgba(255,255,255,.08); }
.btn svg{ width:18px; height:18px; flex:none; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--black); margin:5px 0; }

/* Section headings */
.section-head{ text-align:center; max-width:680px; margin:0 auto 52px; }
.section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.2; }
.section-head p{ color:var(--grey-dark); margin-top:10px; font-size:1.02rem; }
.section-head .rule{ width:56px; height:5px; background:var(--yellow); margin:16px auto 0; border-radius:3px; }

/* Footer */
footer.site-footer{ background:var(--near-black); color:#d6d6d6; padding:48px 0 26px; }
.footer-top{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; margin-bottom:30px; }
.footer-top .brandmark svg{ width:38px; }
.footer-top .brand-text .name{ color:var(--white); }
.footer-top .brand-text .tag{ color:#9c9c9c; }
footer.site-footer nav ul{ display:flex; gap:24px; flex-wrap:wrap; }
footer.site-footer nav a{ font-size:.9rem; color:#cfcfcf; }
footer.site-footer nav a:hover{ color:var(--yellow); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; color:#8f8f8f; }
.footer-bottom a{ text-decoration:underline; text-underline-offset:3px; }

/* WhatsApp float */
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:60; width:58px; height:58px; border-radius:50%; background:var(--yellow); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.wa-float svg{ width:28px; height:28px; }

@media (max-width:1180px){
  .header-actions .btn-outline{ display:none; }
}
@media (max-width:1000px){
  nav.main-nav ul{ gap:16px; }
  .brand-text .tag{ display:none; }
}
@media (max-width:900px){
  section{ padding:64px 0; }
}
@media (max-width:820px){
  nav.main-nav{ display:none; }
  .nav-toggle{ display:block; }
  .header-actions .btn-outline{ display:none; }
}
nav.main-nav.open{ display:flex; position:absolute; top:100%; left:0; right:0; background:var(--white); flex-direction:column; padding:18px 24px; gap:6px; border-bottom:1px solid var(--border-grey); }
nav.main-nav.open ul{ flex-direction:column; gap:4px; align-items:flex-start; }
nav.main-nav.open a{ display:inline-block; padding:10px 0; }
nav.main-nav.open a.nav-plan{ padding:8px 12px; }
@media (max-width:520px){
  .header-inner{ gap:10px; padding:12px 16px; }
  .header-actions{ gap:8px; }
  .header-actions .btn-primary{ padding:8px 12px; font-size:.8rem; }
  .hide-sm{ display:none; }
  .brandmark{ gap:8px; }
  .brandmark svg{ width:36px; }
  .brand-text .name{ font-size:1rem; }
  .brand-text .tag{ display:none; }
}