/* ===== UP Panchayat Sangh - Premium Sarkari Style ===== */
/* ============================================================
   DESIGN TOKENS — blue-led brand system
   60% white/neutral · 30% blue · 10% green
   Every colour in the site comes from these tokens.
   ============================================================ */
:root {
  /* Brand: exactly three hues — navy, blue, green (plus one text-safe shade
     of the same green and one red that is only ever used for form errors). */
  --navy: #0A2240;        /* dark surfaces, headings, nav, footer */
  --blue: #123A6D;        /* the only action colour: buttons, links, focus */
  --green: #004D40;       /* accent: dots, rules, big numbers, icon strokes */
  --green-dark: #004d40;  /* the text-safe shade of the same green */
  --danger: #B42318;      /* form errors only — never decorative */
  --danger-rgb: 180,35,24;

  /* One dark-surface stack. The hero, page headers, the dialog header and
     every navy panel paint these same three layers, so the brand never
     drifts into a second, slightly different blue gradient. */
  --glow-blue: radial-gradient(1100px 560px at 12% 18%, rgba(18,58,109,0.30) 0%, transparent 62%);
  --glow-green: radial-gradient(900px 480px at 88% 88%, rgba(0,77,64,0.18) 0%, transparent 60%);
  --glow-pattern: url('../images/pattern.svg?v=8');

  /* Neutrals */
  --bg: #FFFFFF;
  --surface: #F1F5F9;
  --card: #FFFFFF;
  --text: #374151;
  --muted: #64748B;
  --border: #E2E8F0;

  /* Tints — palette colours at low alpha, no extra hues */
  --blue-tint: rgba(18,58,109,0.08);
  --blue-tint-strong: rgba(18,58,109,0.16);
  --green-tint: rgba(0,77,64,0.12);
  --green-tint-strong: rgba(0,77,64,0.16);
  --navy-tint: rgba(10,34,64,0.05);
  --on-dark: rgba(255,255,255,0.78);
  --on-dark-dim: rgba(255,255,255,0.62);
  --hairline-dark: rgba(255,255,255,0.14);

  --shadow-sm: 0 1px 3px rgba(10,34,64,0.06);
  --shadow: 0 8px 28px rgba(10,34,64,0.08);
  --shadow-lg: 0 20px 56px rgba(10,34,64,0.12);
  --radius: 16px;
  --radius-sm: 10px;
  --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body {
  font-family:'Poppins','Noto Sans Devanagari',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a { text-decoration:none; }
img { max-width:100%; }

/* ===== Inline icon system =====
   Every interface icon is an inline <svg class="i"> with stroke:currentColor.
   Sizes are set here so an icon can never fall back to the 300x150 default. */
.i { width:1.15em; height:1.15em; flex:0 0 auto; vertical-align:-0.18em; }
.i-14 { width:14px; height:14px; } .i-16 { width:16px; height:16px; }
.i-18 { width:18px; height:18px; } .i-20 { width:20px; height:20px; }
.i-22 { width:22px; height:22px; } .i-24 { width:24px; height:24px; }
.i-28 { width:28px; height:28px; } .i-32 { width:32px; height:32px; }
.i-40 { width:40px; height:40px; } .i-56 { width:56px; height:56px; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:1rem; top:-4rem; z-index:2500; background:var(--navy); color:#fff; padding:0.7rem 1.15rem; border-radius:0 0 10px 10px; font-size:0.9rem; font-weight:600; box-shadow:var(--shadow); transition:top 0.18s ease; }
.skip-link:focus { top:0; color:#fff; }

/* ===== Notice strip =====
   Two identical groups, track translated by exactly -50%, so the loop is
   seamless (the old version started off-screen and left a blank band). */
.ticker-wrap { background:var(--navy); overflow:hidden; border-bottom:1px solid rgba(255,255,255,0.06); position:relative; }
/* Without this the marquee sliced words in half at both edges of the screen. */
.ticker-wrap::before, .ticker-wrap::after { content:''; position:absolute; top:0; bottom:0; width:46px; z-index:2; pointer-events:none; }
.ticker-wrap::before { left:0; background:linear-gradient(90deg, var(--navy) 20%, rgba(10,34,64,0)); }
.ticker-wrap::after { right:0; background:linear-gradient(270deg, var(--navy) 20%, rgba(10,34,64,0)); }
@media (max-width:600px) {
  .ticker-wrap::before, .ticker-wrap::after { width:34px; }
}
.ticker { display:flex; width:max-content; color:rgba(255,255,255,0.78); font-size:0.8rem; animation:tickerScroll 52s linear infinite; }
.ticker-group { display:flex; flex:0 0 auto; padding:0.5rem 0; }
.ticker-group > span { display:inline-flex; align-items:center; gap:0.4rem; margin-right:3rem; white-space:nowrap; }
.ticker .highlight { color:var(--green); font-weight:600; }
.ticker .i { width:15px; height:15px; stroke:rgba(255,255,255,0.5); }
.ticker-wrap:hover .ticker,
.ticker-wrap:focus-within .ticker { animation-play-state:paused; }
@keyframes tickerScroll {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}

/* ===== Top Bar ===== */
.topbar { background:var(--navy); color:rgba(255,255,255,0.70); font-size:0.75rem; padding:0.4rem 0; }
.topbar-inner { max-width:1200px; margin:0 auto; padding:0 1.5rem; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:0.5rem; text-align:center; }
.topbar a { color:rgba(255,255,255,0.70); transition:var(--transition); }
.topbar a:hover { color:#fff; }
.topbar-right { display:flex; gap:1.2rem; align-items:center; }
.topbar-right .sep { opacity:0.3; }

/* ===== Brand rule (single subtle blue → green accent line) ===== */
.tricolor { height:2px; background:linear-gradient(90deg,var(--blue) 0%,var(--green) 100%); }

/* ===== Header ===== */
.header { background:var(--card); box-shadow:0 1px 2px rgba(10,34,64,0.04); position:sticky; top:0; z-index:1000; border-bottom:1px solid var(--border); transition:box-shadow 0.3s; }
.header.scrolled { box-shadow:var(--shadow); }
.header-inner { max-width:1200px; margin:0 auto; padding:0.7rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.logo-block { display:flex; align-items:center; gap:0.8rem; }
.emblem { width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#fff; border:1px solid var(--border); flex-shrink:0; box-shadow:0 2px 8px rgba(10,34,64,0.10); overflow:hidden; background:var(--card) url('../images/emblem.png?v=20') center/contain no-repeat; background-size:100%; background-clip:padding-box; }
.logo-text .brand-name { font-size:0.95rem; font-weight:800; color:var(--navy); line-height:1.25; }
.logo-text p { font-size:0.68rem; color:var(--muted); font-weight:500; }
.nav-toggle { display:none; background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--navy); }
.nav-menu { display:flex; gap:0.15rem; list-style:none; align-items:center; }
.nav-menu a { color:var(--text); font-size:0.8rem; font-weight:600; padding:0.5rem 0.85rem; border-radius:var(--radius-sm); transition:var(--transition); position:relative; }
.nav-menu a:hover { background:var(--surface); color:var(--blue); }
.nav-menu a.active { background:var(--navy); color:#fff; box-shadow:0 3px 10px rgba(10,34,64,0.16); }
.nav-menu a.active::after { content:''; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); width:20px; height:2px; background:var(--green); border-radius:2px; }

/* ===== Brand dark surface =====
   Hero, page headers, the membership dialog header and every navy panel
   share one surface, one glow stack and one 2px brand rule. */
.hero, .page-header, .popup-header, .cert-header, .contact-info, .benefits-card {
  position:relative; overflow:hidden; isolation:isolate;
  background-color:var(--navy); color:#fff;
}
.hero::before, .page-header::before, .popup-header::before,
.cert-header::before, .contact-info::before, .benefits-card::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--glow-blue), var(--glow-green), var(--glow-pattern);
  background-size:auto, auto, 560px;
  background-position:center, center, center;
  background-repeat:no-repeat, no-repeat, repeat;
}
.hero::after, .page-header::after, .popup-header::after,
.cert-header::after, .contact-info::after, .benefits-card::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:1;
  background:linear-gradient(90deg, var(--blue), var(--green));
}
.hero > *, .page-header > *, .popup-header > *,
.cert-header > *, .contact-info > *, .benefits-card > * { position:relative; z-index:2; }

.hero { padding:5rem 1.5rem 6.2rem; }
.hero-inner { max-width:1200px; margin:0 auto; position:relative; z-index:2; }
.hero-badge { display:inline-flex; align-items:center; gap:0.5rem; backdrop-filter:blur(6px); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); padding:0.4rem 1rem; border-radius:50px; font-size:0.72rem; font-weight:500; margin-bottom:1.3rem; backdrop-filter:blur(10px); }
.hero-badge .dot { width:6px; height:6px; background:var(--green); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.4;transform:scale(0.7);} }
.hero h1 { font-size:clamp(1.75rem,3.5vw,2.85rem); font-weight:800; line-height:1.22; margin-bottom:0.85rem; font-family:'Noto Sans Devanagari','Poppins',sans-serif; letter-spacing:0; text-wrap:balance; text-shadow:0 2px 24px rgba(10,34,64,0.28); }
.hero h1 span { color:var(--green); }
.hero p { font-size:1.02rem; color:rgba(255,255,255,0.76); max-width:620px; margin:0 auto 2rem; line-height:1.75; text-wrap:pretty; }
/* The tagline used to end with a single orphaned word on its second line. */
.hero-tagline { text-wrap:balance; }
.hero-actions { display:flex; gap:0.7rem; justify-content:center; flex-wrap:wrap; }
/* ===== Buttons =====
   One animated behaviour for every call to action: a soft sheen sweeps across,
   the arrow slides forward, the control lifts on hover and presses back on tap.
   No page sets a button colour inline. */
.btn, .popup-btn, .form-submit {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:0.45rem;
  padding:0.85rem 1.9rem; border-radius:var(--radius-sm);
  font-family:inherit; font-size:0.88rem; font-weight:700; letter-spacing:0.2px;
  border:none; cursor:pointer; text-decoration:none;
  transition:transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s ease,
             background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease,
             background-position 0.65s cubic-bezier(0.22,1,0.36,1);
}
.btn-primary, .popup-btn, .form-submit {
  background-color:var(--blue); color:#fff;
  background-image:linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.30) 50%, transparent 62%);
  background-size:220% 100%; background-position:135% 0; background-repeat:no-repeat;
  box-shadow:0 6px 18px rgba(18,58,109,0.28);
}
.btn-primary:hover, .popup-btn:hover, .form-submit:hover {
  background-position:-35% 0; transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(18,58,109,0.40);
}
.btn-primary:active, .popup-btn:active, .form-submit:active { transform:translateY(0) scale(0.98); box-shadow:0 4px 12px rgba(18,58,109,0.30); }
/* A deeper shade of the same blue — mixed, not a fourth brand colour. On the
   navy hero the old hover (navy) made the button disappear. */
@supports (background: color-mix(in srgb, #000 10%, #fff)) {
  .btn-primary:hover, .popup-btn:hover, .form-submit:hover {
    background-color:color-mix(in srgb, var(--blue) 86%, var(--navy));
  }
}
.btn__arrow { display:inline-block; transition:transform 0.22s cubic-bezier(0.22,1,0.36,1); }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow,
.popup-btn:hover .btn__arrow, .popup-btn:focus-visible .btn__arrow { transform:translateX(4px); }
.btn:focus-visible, .popup-btn:focus-visible, .form-submit:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.btn-outline { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.32); }
.btn-outline:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.55); }
.btn-ghost { background:var(--surface); color:var(--navy); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--card); border-color:var(--blue); color:var(--blue); }

/* ===== Stats Bar ===== */
.stats-bar { background:var(--navy); box-shadow:var(--shadow-lg); margin:-3.4rem auto 0; max-width:1100px; border-radius:var(--radius); padding:1.8rem 1.2rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0.5rem; position:relative; z-index:2; border:1px solid rgba(255,255,255,0.10); overflow:hidden; }
.stats-bar::before { content:''; position:absolute; inset:0; background:radial-gradient(760px 240px at 100% 0,rgba(18,58,109,0.16),transparent 72%); pointer-events:none; }
.stat { text-align:center; padding:0.5rem; }
.stat:not(:last-child) { border-right:1px solid rgba(255,255,255,0.12); }
.stat-num { font-size:1.95rem; font-weight:900; color:var(--green); letter-spacing:-0.5px; position:relative; font-variant-numeric:tabular-nums; }
.stat-label { font-size:0.72rem; color:rgba(255,255,255,0.74); font-weight:500; margin-top:0.2rem; letter-spacing:0.3px; position:relative; }

/* ===== Page Header ===== */
.page-header { padding:3.5rem 1.5rem; text-align:center; }
.page-header h1 { font-size:clamp(1.5rem,2.8vw,2.1rem); font-weight:800; margin-bottom:0.35rem; position:relative; z-index:1; letter-spacing:0; }
.page-header p { color:rgba(255,255,255,0.76); font-size:0.95rem; position:relative; z-index:1; }

/* ===== Section ===== */
.section { max-width:1200px; margin:0 auto; padding:4rem 1.5rem; }
.section-header { text-align:center; margin-bottom:2.5rem; }
.section-tag { display:inline-block; background:var(--green-tint); color:var(--green-dark); font-size:0.68rem; font-weight:700; letter-spacing:0.06em; padding:0.32rem 0.9rem; border-radius:50px; margin-bottom:0.7rem; border:1px solid rgba(0,77,64,0.30); }
.section-title { font-size:clamp(1.4rem,2.6vw,1.95rem); font-weight:800; color:var(--navy); margin-bottom:0.5rem; letter-spacing:0; text-wrap:balance; }
.section-subtitle { color:var(--muted); font-size:0.98rem; line-height:1.65; max-width:60ch; margin:0 auto; }

/* ===== Card ===== */
.card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); padding:2rem; }
.card h3 { font-size:1.1rem; color:var(--navy); margin-bottom:0.7rem; font-weight:700; }
.card p { color:var(--muted); margin-bottom:0.7rem; font-size:0.9rem; }

/* ===== Footer ===== */
.footer { background:var(--navy); color:rgba(255,255,255,0.70); padding:3.2rem 1.5rem 1.2rem; }
.footer-inner { max-width:1200px; margin:0 auto; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:1.8rem; }
.footer-brand h4 { color:#fff; font-size:0.9rem; margin-bottom:0.7rem; }
.footer-brand p { font-size:0.8rem; line-height:1.7; }
.footer-col h5 { color:#fff; font-size:0.82rem; margin-bottom:0.7rem; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:0.4rem; }
.footer-col ul li a { color:rgba(255,255,255,0.70); font-size:0.8rem; transition:var(--transition); }
.footer-col ul li a:hover { color:#fff; padding-left:3px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.06); padding-top:1.2rem; display:flex; justify-content:space-between; align-items:center; font-size:0.75rem; flex-wrap:wrap; gap:0.5rem; }
.footer-bottom .gov-tag { display:block; color:var(--green); font-weight:500; line-height:1.9; }
.footer-bottom .gov-tag .i { vertical-align:-0.16em; margin-right:0.25rem; }
.footer-bottom .gov-tag .admin-link { vertical-align:middle; }
@media (max-width:640px) {
  .footer-bottom .gov-tag { margin-top:0.5rem; }
  .footer-bottom .gov-tag .admin-link { margin:0.4rem 0 0; }
}

/* ===== Reveal Animation ===== */
.js .reveal { opacity:0; transform:translateY(24px); transition:opacity 0.5s ease,transform 0.5s ease; }
.js .reveal.visible { opacity:1; transform:translateY(0); }

/* ===== Membership Popup ===== */
.popup-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(10,34,64,0.62); backdrop-filter:blur(4px); z-index:9999; opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease; }
.popup-overlay.show { opacity:1; visibility:visible; }
.popup-card { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.9); background:var(--card); border-radius:16px; box-shadow:0 24px 80px rgba(10,34,64,0.25); z-index:10000; width:90%; max-width:440px; overflow:hidden; opacity:0; visibility:hidden; transition:opacity 0.35s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1), visibility 0.35s ease; }
.popup-card.show { opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
/* The dialog header is the hero: same navy, same glow, same pattern, same rule. */
.popup-header { padding:1.8rem 1.5rem 1.2rem; text-align:center; }
.popup-header .popup-icon { font-size:2.5rem; margin-bottom:0.5rem; }
.popup-header h3 { font-size:1.2rem; font-weight:800; margin-bottom:0.2rem; }
.popup-header p { font-size:0.8rem; color:rgba(255,255,255,0.80); }
.popup-close { position:absolute; top:0.6rem; right:0.8rem; background:rgba(255,255,255,0.15); border:none; color:#fff; width:28px; height:28px; border-radius:50%; font-size:1rem; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; }
.popup-close:hover { background:rgba(255,255,255,0.3); transform:rotate(90deg); }
.popup-body { padding:1.5rem; text-align:center; }
.popup-body p { color:var(--muted); font-size:0.88rem; line-height:1.6; margin-bottom:1.2rem; }
.popup-features { list-style:none; margin-bottom:1.3rem; text-align:left; }
.popup-features li { display:flex; align-items:center; gap:0.5rem; font-size:0.82rem; color:var(--text); margin-bottom:0.5rem; }
.popup-features li .tick { color:var(--green-dark); font-weight:700; }
.popup-btn { width:100%; padding:0.85rem; border-radius:10px; font-size:0.92rem; }
.popup-skip:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.popup-skip { display:block; margin-top:0.6rem; font-size:0.78rem; color:var(--muted); cursor:pointer; text-align:center; transition:color 0.2s; }
.popup-skip:hover { color:var(--blue); }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--blue); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--navy); }

/* ===== Responsive ===== */
@media(max-width:900px) {
  .nav-toggle { display:block; }
  .nav-menu { display:none; position:absolute; top:100%;left:0;right:0; background:var(--card); flex-direction:column; padding:0.6rem; box-shadow:var(--shadow-lg); border-top:1px solid var(--border); gap:0.15rem; border-radius:0 0 var(--radius) var(--radius); }
  .nav-menu.show { display:flex; }
  .nav-menu a { padding:0.6rem 0.9rem; }
  .hero h1 { font-size:1.4rem; }
  .hero p { font-size:0.9rem; }
  .stats-bar { grid-template-columns:repeat(2,1fr); padding:1.2rem; }
  .stat:nth-child(2) { border-right:none; }
  .stat:nth-child(3),.stat:nth-child(4) { border-top:1px solid rgba(255,255,255,0.12); padding-top:0.7rem; }
  .stat:nth-child(4) { border-right:none; }
  .section { padding:2.5rem 1.5rem; }
  .section-title { font-size:1.35rem; }
  .footer-top { grid-template-columns:1fr; }
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr !important; }
  .logo-text .brand-name { font-size:0.82rem; }
  .logo-text p { font-size:0.62rem; }
  .ticker { font-size:0.7rem; }
}

/* ===== Sticky Header Safety Fix ===== */
/* overflow:clip does NOT create a scroll container (unlike hidden),
   so position:sticky on .header keeps working on all pages */
html, body {
  overflow-x: clip;
  width: 100%;
}
body {
  position: relative;
}

/* ===== Extra Mobile Polish (500px and below) ===== */
@media(max-width:500px) {
  .hero { padding:3rem 1rem 4.5rem; }
  .hero h1 { font-size:1.15rem; line-height:1.35; }
  .hero p { font-size:0.85rem; }
  .hero-badge { font-size:0.62rem; padding:0.3rem 0.8rem; }
  .hero-actions { flex-direction:column; width:100%; }
  .hero-actions .btn { width:100%; justify-content:center; }
  .stats-bar { grid-template-columns:repeat(3,1fr); gap:0; padding:1rem 0.3rem; }
  .stat { border-right:1px solid rgba(255,255,255,0.12) !important; border-bottom:none !important; border-top:none !important; padding:0.2rem 0 !important; }
  .stat:last-child { border-right:none !important; }
  .stat-num { font-size:1.32rem; }
  .stat-label { font-size:0.64rem; }
  .stat-icon { width:20px; height:20px; margin-bottom:0.25rem; }
  .section { padding:2.2rem 1rem; }
  .section-title { font-size:1.2rem; }
  .header-inner { padding:0.5rem 1rem; }
  .logo-text .brand-name { font-size:0.72rem; }
  .logo-text p { font-size:0.58rem; }
  .emblem { width:40px; height:40px; }
  .page-header { padding:2.2rem 1rem; }
  .page-header h1 { font-size:1.35rem; }
  .footer { padding:2.2rem 1rem 1.2rem; }
  .footer-bottom { flex-direction:column; text-align:center; gap:0.4rem; }
  .popup-card { width:94%; max-width:360px; }
  .form-row { grid-template-columns:1fr; }
  .about-grid, .message-card { grid-template-columns:1fr !important; text-align:center; }
  .message-photo { margin:0 auto !important; width:140px !important; height:140px !important; font-size:2.5rem !important; }
  .cert-row { flex-direction:column; gap:0.15rem; align-items:flex-start; }
  .cert-row .label { min-width:0; }
  .cert-row .value { text-align:left; }
  .contact-grid { grid-template-columns:1fr !important; }
  .membership-grid { grid-template-columns:1fr !important; }   .leader-grid:not(#homeCommittee) { grid-template-columns:1fr !important; }
  .block-grid { grid-template-columns:1fr !important; }
  .gallery-grid { grid-template-columns:1fr !important; }
  .news-grid, .obj-grid { grid-template-columns:1fr !important; }
  .timeline { padding-left:1.6rem; }
  .timeline-item::before { left:-2rem; }
}

/* Ensure all images and embeds stay inside viewport */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ===== Smooth Animations & Android Polish ===== */

/* 1. Page entrance animation - every page smoothly fades in */
@keyframes pageFadeIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
body {
  animation: pageFadeIn 0.5s ease-out;
}

/* 2. Page exit animation - applied by JS before nav click */
@keyframes pageFadeOut {
  from { opacity:1; transform:translateY(0); }
  to   { opacity:0; transform:translateY(-8px); }
}
body.page-exit {
  animation: pageFadeOut 0.18s ease-in both;
}

/* 3. Android touch polish */
html { -webkit-tap-highlight-color:transparent; }
body { touch-action:manipulation; -webkit-touch-callout:none; }
input, select, textarea { font-size:16px !important; } /* prevents Android auto-zoom on focus */

/* 4. Tap feedback on touch (Android) */
.btn:active, .form-submit:active, .popup-btn:active, .filter-btn:active, .nav-toggle:active, .popup-close:active {
  transform:scale(0.96);
}

/* ===== Keyboard focus visibility (accessible, blue ring) ===== */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:2px;
  border-radius:4px;
}
.nav-toggle:active { background:var(--surface); border-radius:8px; }

/* 5. Nav link animated underline (smooth, no jhatka) */
.nav-menu a::after {
  content:''; position:absolute; left:50%; bottom:2px; width:0; height:2px;
  background:var(--green); border-radius:2px; transform:translateX(-50%);
  transition:width 0.3s cubic-bezier(0.4,0,0.2,1);
}
.nav-menu a:hover::after { width:60%; }
.nav-menu a.active::after { width:20px; bottom:-4px; }

/* 6. Card hover lift (desktop) + tap lift (touch) */
@media (hover:hover) {
  .card:hover, .obj-card:hover, .news-card:hover, .leader-card:hover, .block-card:hover, .gallery-item:hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow);
  }
}
@media (hover:none) {
  .card:active, .obj-card:active, .news-card:active, .leader-card:active, .block-card:active, .gallery-item:active {
    transform:translateY(-2px);
    box-shadow:var(--shadow-sm);
  }
}

/* 7. Hero badge - allow text to wrap (was clipping ID on small screens) */
.hero-badge {
  flex-wrap:wrap;
  justify-content:center;
  text-align:center;
  max-width:100%;
  line-height:1.5;
}

/* 8. Staggered reveal for grid children (subtle, premium feel) - only when JS active */
.js .reveal > .obj-grid > *,
.js .reveal > .news-grid > *,
.js .reveal > .leader-grid > *,
.js .reveal > .block-grid > *,
.js .reveal > .gallery-grid > * {
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.js .reveal.visible > .obj-grid > *,
.js .reveal.visible > .news-grid > *,
.js .reveal.visible > .leader-grid > *,
.js .reveal.visible > .block-grid > *,
.js .reveal.visible > .gallery-grid > * {
  opacity:1;
  transform:translateY(0);
}
.js .reveal.visible > .obj-grid > *:nth-child(1), .js .reveal.visible > .news-grid > *:nth-child(1), .js .reveal.visible > .leader-grid > *:nth-child(1), .js .reveal.visible > .block-grid > *:nth-child(1), .js .reveal.visible > .gallery-grid > *:nth-child(1) { transition-delay:0.05s; }
.js .reveal.visible > .obj-grid > *:nth-child(2), .js .reveal.visible > .news-grid > *:nth-child(2), .js .reveal.visible > .leader-grid > *:nth-child(2), .js .reveal.visible > .block-grid > *:nth-child(2), .js .reveal.visible > .gallery-grid > *:nth-child(2) { transition-delay:0.12s; }
.js .reveal.visible > .obj-grid > *:nth-child(3), .js .reveal.visible > .news-grid > *:nth-child(3), .js .reveal.visible > .leader-grid > *:nth-child(3), .js .reveal.visible > .block-grid > *:nth-child(3), .js .reveal.visible > .gallery-grid > *:nth-child(3) { transition-delay:0.19s; }
.js .reveal.visible > .obj-grid > *:nth-child(4), .js .reveal.visible > .news-grid > *:nth-child(4), .js .reveal.visible > .leader-grid > *:nth-child(4), .js .reveal.visible > .block-grid > *:nth-child(4), .js .reveal.visible > .gallery-grid > *:nth-child(4) { transition-delay:0.26s; }
.js .reveal.visible > .obj-grid > *:nth-child(5), .js .reveal.visible > .news-grid > *:nth-child(5), .js .reveal.visible > .leader-grid > *:nth-child(5), .js .reveal.visible > .block-grid > *:nth-child(5), .js .reveal.visible > .gallery-grid > *:nth-child(5) { transition-delay:0.33s; }
.js .reveal.visible > .obj-grid > *:nth-child(6), .js .reveal.visible > .news-grid > *:nth-child(6), .js .reveal.visible > .leader-grid > *:nth-child(6), .js .reveal.visible > .block-grid > *:nth-child(6), .js .reveal.visible > .gallery-grid > *:nth-child(6) { transition-delay:0.4s; }
.js .reveal.visible > .obj-grid > *:nth-child(7), .js .reveal.visible > .news-grid > *:nth-child(7), .js .reveal.visible > .leader-grid > *:nth-child(7), .js .reveal.visible > .block-grid > *:nth-child(7), .js .reveal.visible > .gallery-grid > *:nth-child(7) { transition-delay:0.47s; }
.js .reveal.visible > .obj-grid > *:nth-child(8), .js .reveal.visible > .news-grid > *:nth-child(8), .js .reveal.visible > .leader-grid > *:nth-child(8), .js .reveal.visible > .block-grid > *:nth-child(8), .js .reveal.visible > .gallery-grid > *:nth-child(8) { transition-delay:0.54s; }

/* ===== Hero Entrance Animation (staggered, Android-friendly) ===== */
.hero-inner > * {
  opacity: 0;
  transform: translateY(22px);
  animation: heroIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-inner > *:nth-child(1) { animation-delay: 0.05s; }
.hero-inner > *:nth-child(2) { animation-delay: 0.18s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.32s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.46s; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stronger reveal (more visible) */
.js .reveal { transform: translateY(28px) scale(0.985); }
.js .reveal.visible { transform: translateY(0) scale(1); }

/* ===== Touch targets >= 44px (Android) ===== */
@media (max-width: 900px) {
  .nav-menu a {
    padding: 0.8rem 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav-toggle {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
  }
  .btn {
    min-height: 46px;
  }
  .filter-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .form-submit {
    min-height: 48px;
  }
  .popup-close {
    width: 34px;
    height: 34px;
  }
  .footer-col ul li a {
    display: inline-block;
    padding: 0.3rem 0;
    min-height: 36px;
  }
}

/* ===== Back to top button positioning ===== */
#backToTop {
  -webkit-tap-highlight-color: transparent;
}
#backToTop:active {
  transform: scale(0.92) !important;
}

/* Reduced motion: sirf minimum animation */
@media (prefers-reduced-motion: reduce) {
  .hero-inner > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .js .reveal,
  .js .reveal > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ===== Audit fixes: touch targets + robustness ===== */

/* popup-close 34px -> 44px hit area */
.popup-close {
  width: 44px !important;
  height: 44px !important;
  font-size: 1.15rem !important;
}

/* Footer + topbar links stay tappable but no longer 44px tall each: a footer
   of eleven full-height rows was most of a phone screen. */
@media (max-width: 900px) {
  .footer-col ul li a,
  .topbar a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.35rem;
  }
  .popup-skip { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  /* Two footer columns instead of four stacked ones (brand spans both). */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem; }
  .footer-brand { grid-column: 1 / -1; }
}

/* overflow-x: clip fallback for old browsers (Chrome <90) */
@supports not (overflow: clip) {
  html, body {
    overflow-x: hidden !important;
  }
}

/* Ticker on reduced motion: stop the loop and let the notices wrap instead of
   clipping them off-screen. */
@media (prefers-reduced-motion: reduce) {
  .ticker { animation:none !important; transform:none !important; width:auto; }
  .ticker-group { flex-wrap:wrap; padding:0.4rem 1rem; row-gap:0.15rem; }
  .ticker-group[aria-hidden="true"] { display:none; }
  .ticker-group > span { white-space:normal; margin-right:1.5rem; }
}

.admin-link { color:rgba(255,255,255,0.88); font-size:0.72rem; margin-left:0.6rem; padding:0.35rem 0.5rem; text-decoration:none; border:1px solid rgba(255,255,255,0.25); border-radius:6px; white-space:nowrap; }
.admin-link:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.5); color:#fff; }

/* ===== Premium polish (ET masterclass inspired) ===== */
.hero-badge { border-color:rgba(255,255,255,0.18); background:rgba(255,255,255,0.08); backdrop-filter:blur(6px); box-shadow:0 4px 18px rgba(10,34,64,0.18); }
.hero-badge .dot { background:var(--green); }
.section-header { margin-bottom:2.8rem; }
.section-subtitle { font-size:0.92rem; }
.footer-brand h4 { font-size:0.95rem; letter-spacing:0.3px; }
.footer-col h5 { letter-spacing:0.02em; font-size:0.8rem; color:rgba(255,255,255,0.92); }
.message-photo, .leader-photo, .block-card .photo { border:1px solid var(--border); box-shadow:0 4px 16px rgba(10,34,64,0.12); }
.message-card, .obj-card, .leader-card, .block-card, .news-card, .gallery-item { border:1px solid var(--border); }
.form-card { border:1px solid var(--border); }

.leader-card, .block-card, .obj-card, .news-card, .gallery-item, .message-card { box-shadow:0 6px 18px rgba(10,34,64,0.07); }
.leader-photo, .block-card .photo, .message-photo { background:var(--surface); }
.obj-icon { background:var(--blue-tint); color:var(--blue); border:1px solid rgba(18,58,109,0.16); }

/* ===== Premium design elements (seal, pattern, ornament, icons) ===== */
/* Section titles stay plain — the ornament is reserved for page headers, so it
   reads as a deliberate mark instead of repeating decoration. */
.stat-icon { width:26px; height:26px; display:block; margin:0 auto 0.4rem; opacity:0.95; }
.obj-card { position:relative; }
.obj-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--blue),rgba(18,58,109,0)); border-radius:3px 3px 0 0; }
/* The page header uses the same stack, only with a tighter pattern tile. */
.page-header::before { background-size:auto, auto, 420px; }
.page-header h1::after { content:''; display:block; width:90px; height:12px; margin:0.6rem auto 0; background:url('../images/ornament.svg') center/contain no-repeat; }
@media (max-width: 640px) {
  .hero::before, .popup-header::before, .cert-header::before,
  .contact-info::before, .benefits-card::before { background-size:auto,auto,420px; }
}

/* ===== Public Admin Button (nav) ===== */
.nav-admin { margin-left:0.35rem; }
.admin-btn { display:inline-flex; align-items:center; gap:0.35rem; padding:0.5rem 1.05rem; background:transparent; color:var(--navy) !important; font-weight:700; font-size:0.85rem; border-radius:8px; border:1px solid var(--border); box-shadow:none; text-decoration:none; transition:background 0.2s, color 0.2s, border-color 0.2s; white-space:nowrap; }
.admin-btn:hover { background:var(--navy); color:#fff !important; border-color:var(--navy); }
.admin-btn:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
@media (max-width: 900px) {
  .nav-admin { margin-left:0; margin-top:0.45rem; }
  .admin-btn { display:flex; justify-content:center; width:100%; }
}
/* ===== नए sections: मिशन-विजन, कार्यकारिणी, नक्शा, गैलरी, सदस्यता QR, socials ===== */
.hero-tagline { font-size:1.02rem; font-weight:600; color:rgba(255,255,255,0.92); margin:0 auto 0.6rem; max-width:700px; }

/* Every panel that is navy in HTML gets the same surface as the hero,
   whether or not the page also declares a plain background for it. */
.popup-header, .cert-header, .contact-info, .benefits-card { color:#fff; }
.hero-media { margin:1.6rem auto 0; max-width:820px; }
.hero-media img { width:100%; height:auto; border-radius:var(--radius); border:3px solid rgba(255,255,255,0.25); box-shadow:var(--shadow-lg); display:block; }

.news-tag { display:inline-block; background:var(--blue-tint); color:var(--blue); font-size:0.62rem; font-weight:700; letter-spacing:0.06em; padding:0.18rem 0.6rem; border-radius:50px; margin-bottom:0.35rem; }

.chip-row { display:flex; gap:0.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.8rem; }
.chip { padding:0.45rem 1.05rem; border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:50px; font-size:0.8rem; font-weight:600; cursor:pointer; font-family:inherit; transition:var(--transition); }
.chip:hover { border-color:var(--blue); color:var(--blue); }
.chip.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.chip:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }

.two-col { display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
.join-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:1.4rem; align-items:start; }

.info-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.9rem 1.5rem; box-shadow:0 6px 18px rgba(10,34,64,0.07); transition:var(--transition); }
.info-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(18,58,109,0.35); }
.info-card.glass { background:linear-gradient(160deg,rgba(255,255,255,0.96),rgba(241,245,249,0.92)); backdrop-filter:blur(6px); }
.info-icon { width:48px; height:48px; border-radius:14px; background:var(--blue-tint); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:1.35rem; margin-bottom:0.9rem; box-shadow:none; }
.info-card h3 { font-size:1.06rem; color:var(--navy); margin-bottom:0.5rem; font-weight:700; }
.info-card p { color:var(--muted); font-size:0.86rem; line-height:1.75; }

.qr-img { width:190px; height:190px; object-fit:contain; background:#fff; border:1px solid var(--border); border-radius:12px; padding:8px; margin:0.2rem 0 0.9rem; display:block; }
.upi-line { font-size:0.9rem; color:var(--text); }
.upi-label { color:var(--muted); font-size:0.78rem; }
.upi-note { font-size:0.76rem; color:var(--muted); margin-top:0.4rem; }

.social-links { display:flex; gap:0.55rem; flex-wrap:wrap; margin-top:1rem; }
.social-btn { width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.10); color:#fff; border:1px solid rgba(255,255,255,0.18); transition:var(--transition); }
.social-btn:hover { background:var(--green); color:var(--navy); border-color:var(--green); transform:translateY(-2px); }
.social-btn:focus-visible { outline:3px solid var(--green); outline-offset:2px; }

.map-block { display:flex; justify-content:center; }
.map-block img { width:100%; max-width:520px; height:auto; display:block; }
.map-block iframe { width:100%; max-width:820px; height:420px; border:0; border-radius:var(--radius); box-shadow:var(--shadow); display:block; }

.gallery-tabs { display:flex; gap:0.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:1rem; }
.tab { padding:0.45rem 1.05rem; border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:50px; font-size:0.8rem; font-weight:600; cursor:pointer; font-family:inherit; transition:var(--transition); }
.tab:hover { border-color:var(--blue); color:var(--blue); }
.tab.active { background:var(--blue); color:#fff; border-color:var(--blue); font-weight:700; }
.tab:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }

@media (max-width: 900px) {
  .two-col, .join-grid { grid-template-columns:1fr; }
  .map-block iframe { height:300px; }
}


/* ===== 2026-10 hero: copy on the left, the district on the right =====
   The photograph is the subject's own landscape (paddy fields under the
   Himalayan foothills), so it gets its own pane instead of sitting behind
   a 90% scrim where nobody could see it. */
.hero { padding:4rem 1.5rem 5.4rem; }
.hero-inner {
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,0.96fr);
  gap:3.2rem; align-items:center; text-align:left;
}
.hero-copy { max-width:600px; }
.hero-badge { margin-bottom:1.4rem; }
.hero p.hero-tagline { margin:0 0 0.55rem; }
.hero-copy > p { max-width:52ch; margin:0 0 1.9rem; }
.hero-actions { justify-content:flex-start; }
.hero-visual { position:relative; }
.hero-figure { margin:0; position:relative; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,0.18); box-shadow:0 28px 64px rgba(3,12,26,0.55); background:var(--navy); }
.hero-figure img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; object-position:center 62%; }
.hero-caption { position:absolute; inset:auto 0 0 0; padding:2.6rem 1.05rem 0.85rem; font-size:0.72rem; line-height:1.4; color:rgba(255,255,255,0.9); background:linear-gradient(180deg,rgba(4,14,28,0) 0%,rgba(4,14,28,0.82) 58%,rgba(4,14,28,0.94) 100%); display:flex; align-items:center; gap:0.4rem; text-shadow:0 1px 2px rgba(0,0,0,0.45); }
.hero-caption .i { stroke:var(--green); }
.hero::before { z-index:1; }
@media (max-width:980px) {
  .hero-inner { grid-template-columns:1fr; gap:1.9rem; text-align:center; }
  .hero-copy { max-width:none; }
  .hero p { margin-left:auto; margin-right:auto; }
  .hero-actions { justify-content:center; }
  .hero-visual { width:100%; max-width:540px; margin:0 auto; }
  .hero-caption { font-size:0.68rem; }
}

/* ===== issue cards (ग्राम पंचायत के मुद्दे) ===== */
.issue-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.issue-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:var(--transition); }
.issue-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.issue-media { aspect-ratio:16/9; overflow:hidden; background:var(--surface); }
.issue-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease; }
.issue-card:hover .issue-media img { transform:scale(1.05); }
.issue-body { padding:1rem 1.1rem 1.15rem; }
.issue-body h3 { font-size:1rem; color:var(--navy); margin-bottom:0.25rem; font-weight:700; }
.issue-body p { font-size:0.82rem; color:var(--muted); line-height:1.6; }
@media (max-width: 900px) { .issue-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px) { .issue-grid { grid-template-columns:1fr; } }

/* ===== 2026-10 revision: component details ===== */

/* Icons inside tiles sit on a fixed grid, so no tile is ever off-centre */
.obj-icon .i, .info-icon .i { width:22px; height:22px; }
.cert-header .i { width:18px; height:18px; stroke:currentColor; }
.popup-icon .i { width:38px; height:38px; stroke:currentColor; }
.map-placeholder .i { width:52px; height:52px; stroke:var(--muted); }

/* Popup behaves like a real dialog: page behind cannot scroll */
.popup-card { outline:none; }
.popup-card:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
body.popup-open { overflow:hidden; }

/* Form details */
.req { color:var(--danger); font-weight:700; }
.form-note { margin-top:0.7rem; font-size:0.82rem; color:var(--muted); text-align:center; }
.form-help { display:block; font-size:0.76rem; font-weight:400; color:var(--muted); margin-top:0.25rem; }
.form-status { margin-top:0.8rem; }

/* Long identifiers never push the layout */
.logo-text .brand-name, .footer-brand h4, .cert-row .value, .contact-item .text span { overflow-wrap:anywhere; }

/* Empty states (news / gallery) get an icon tile like every other card */
.empty-state { padding:2.6rem 1.5rem; }
.empty-icon { width:56px; height:56px; margin:0 auto 0.9rem; border-radius:16px; background:var(--surface); color:var(--muted); display:grid; place-items:center; }
.empty-icon .i { stroke:var(--muted); }

/* Headings that carry an icon */
h3 .i { color:var(--green-dark); margin-right:0.35rem; vertical-align:-0.12em; }
.page-header .i, .cert-header .i { color:inherit; }

/* Popup "later" control is a real button now */
.popup-skip { background:none; border:0; font-family:inherit; width:100%; }
.popup-features .tick-svg { stroke:var(--green-dark); stroke-width:2.6; }

/* Readability: Hindi body copy needs more size and looser leading than Latin */
.card p { font-size:0.94rem; }
.info-card p { font-size:0.92rem; line-height:1.8; }
.issue-body p { font-size:0.9rem; line-height:1.7; }
.footer-brand p { font-size:0.84rem; }
.footer-col ul li a { font-size:0.84rem; }
.contact-item { font-size:0.9rem; }

.form-nosc { margin:0.8rem 0 0; padding:0.85rem 1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:0.84rem; color:var(--text); line-height:1.6; }
.form-nosc a { color:var(--blue); text-decoration:underline; }

/* ===== Committee / leadership cards (shared by index.html and committee.html) ===== */
.leader-section { margin-bottom:3rem; }
.leader-section h3 { font-size:1.3rem; color:var(--navy); margin-bottom:1.5rem; text-align:center; font-weight:700; }
.leader-grid { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:1.5rem; max-width:880px; margin:0 auto; }
.leader-card { flex:0 1 262px; background:var(--card); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow-sm); overflow:hidden; transition:var(--transition); }
.leader-card:hover { box-shadow:var(--shadow); transform:translateY(-4px); }
.leader-photo { aspect-ratio:4/5; height:auto; background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:4rem; color:var(--muted); overflow:hidden; }
.leader-photo img { width:100%; height:100%; object-fit:cover; object-position:center center; display:block; }
.leader-info { padding:1.3rem; text-align:center; }
.leader-info h4 { font-size:1.1rem; color:var(--navy); margin-bottom:0.2rem; }
.leader-info .role { font-size:0.8rem; color:var(--green-dark); font-weight:600; margin-bottom:0.5rem; }
.leader-info .phone { font-size:0.85rem; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:0.3rem; }
@media(max-width:640px) {
  .leader-grid { gap:0.9rem; }
  .leader-card { flex:1 1 150px; max-width:320px; }
  .leader-info { padding:0.95rem 0.7rem; }
  .leader-info h4 { font-size:0.95rem; }
  .leader-info .role { font-size:0.72rem; }
  .leader-info .phone { font-size:0.76rem; }
}

/* ===== Contact page: no second form — direct call / mail ===== */
.contact-cta { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:2.2rem 2rem; }
.contact-cta h3 { font-size:1.15rem; color:var(--navy); margin-bottom:0.6rem; }
.contact-cta p { color:var(--muted); font-size:0.95rem; line-height:1.8; margin-bottom:1rem; }
.cta-row { display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:0.6rem; }
.contact-cta .btn { min-height:46px; }
.cta-note { font-size:0.82rem; color:var(--muted); margin-top:1rem; line-height:1.8; }

/* ===== Contact form: message box, honeypot, optional label ===== */
.hp-field { position:absolute !important; left:-9999px !important; top:auto !important; width:1px; height:1px; overflow:hidden; }
.form-msg { border-radius:10px; padding:0.85rem 1rem; font-size:0.88rem; line-height:1.7; margin-bottom:0.9rem; }
.form-msg.ok { background:var(--green-tint); border:1px solid rgba(0,77,64,0.38); color:var(--green-dark); }
.form-msg.err { background:rgba(var(--danger-rgb),0.06); border:1px solid rgba(var(--danger-rgb),0.30); color:var(--danger); }
.muted-opt { color:var(--muted); font-weight:400; font-size:0.92em; }

/* ===== Smooth scrolling =====
   Scroll ko CSS hi handle karta hai (JS animation + CSS smooth dono ek saath
   chalne se jhatka lagta tha). Sticky header ke liye padding/margin. */
[id] { scroll-margin-top:84px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
}

/* ===== Breadcrumbs + FAQ (SEO) ===== */
.crumbs { background:var(--bg); border-bottom:1px solid var(--border); }
.crumbs-in { max-width:1200px; margin:0 auto; padding:0.55rem 1.5rem; font-size:0.78rem; color:var(--muted); display:flex; gap:0.45rem; align-items:center; flex-wrap:wrap; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--blue); }
.crumbs [aria-current] { color:var(--navy); font-weight:600; }
.faq-list { max-width:820px; margin:0 auto; }
.faq-item { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:0.9rem 1.1rem; margin-bottom:0.7rem; }
.faq-item summary { cursor:pointer; font-weight:600; color:var(--navy); font-size:0.95rem; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; color:var(--blue); font-weight:700; }
.faq-item[open] summary::after { content:'–'; }
.faq-a { color:var(--muted); font-size:0.9rem; line-height:1.8; padding-top:0.6rem; }

/* ==========================================================================
   2026-10 brand pass — one palette, one dark surface, animated controls
   Everything below is shared. No page needs an inline colour for these.
   ========================================================================== */

/* --- Text links: one colour (blue), never a page-local green --------------- */
.text-link { color:var(--blue); font-weight:600; }
.text-link:hover { color:var(--navy); text-decoration:underline; text-underline-offset:2px; }

/* Links inside a navy panel stay white, since blue-on-navy is unreadable. */
.cert-body a,
.contact-info a,
.benefits-card a,
.footer a { color:inherit; }
.contact-info a:hover,
.cert-body a:hover { text-decoration:underline; text-underline-offset:2px; }

/* --- Gallery filters: same pill system as chips/tabs, blue when active ---- */
.filter-btn {
  padding:0.5rem 1.2rem; border:1px solid var(--border); background:var(--card);
  color:var(--text); border-radius:50px; font-size:0.82rem; font-weight:600;
  font-family:inherit; cursor:pointer;
  transition:background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.filter-btn:hover { border-color:var(--blue); color:var(--blue); transform:translateY(-1px); }
.filter-btn.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.filter-btn:active { transform:scale(0.97); }
.filter-btn:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.gallery-filter { display:flex; gap:0.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.8rem; }

/* --- Back-to-top: the styles live here, not in a JS style string ---------- */
.to-top {
  position:fixed; bottom:22px; right:18px; width:46px; height:46px; border-radius:50%;
  background:var(--blue); color:#fff; border:1px solid rgba(255,255,255,0.22);
  font-size:1.3rem; font-weight:700; cursor:pointer; z-index:9000;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
  box-shadow:0 4px 14px rgba(10,34,64,0.35);
  display:flex; align-items:center; justify-content:center; touch-action:manipulation;
}
.to-top.show { opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover { background:color-mix(in srgb, var(--blue) 86%, var(--navy)); }
.to-top:active { transform:scale(0.92); }
.to-top:focus-visible { outline:3px solid var(--green); outline-offset:3px; }

/* --- Form submit inherits the shared button animation --------------------- */
.form-submit { width:100%; padding:0.85rem; margin-top:0.5rem; }

/* --- Dialog: keep the hero surface on small screens too ------------------- */
@media (max-width:500px) {
  .popup-header { padding:1.5rem 1.1rem 1rem; }
  .popup-header .popup-icon .i { width:32px; height:32px; }
}

/* --- Reduced motion: keep every control usable, drop the movement --------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .popup-btn, .form-submit, .filter-btn, .to-top {
    transition:none !important;
  }
  .btn-primary, .popup-btn, .form-submit { background-position:135% 0; }
  .btn:hover, .popup-btn:hover, .form-submit:hover,
  .filter-btn:hover, .btn__arrow { transform:none !important; }
}

/* ==========================================================================
   2026-10 tight layout + premium scroll
   Same elements, less air: the page reads as one composed sheet instead of a
   long stack of loosely spaced blocks. Nothing here changes the palette.
   ========================================================================== */

/* --- Rhythm: one spacing scale, tighter than before ---------------------- */
body { line-height:1.58; }
.section { padding:2.4rem 1.5rem; }
.section-header { margin-bottom:1.5rem; }
.section-title { margin-bottom:0.3rem; }
.section-subtitle { font-size:0.9rem; line-height:1.55; }
.section-tag { margin-bottom:0.45rem; }

/* --- Hero: shorter, denser, still the same brand surface ----------------- */
.hero { padding:2.6rem 1.5rem 3.4rem; }
.hero-inner { gap:2.1rem; }
.hero h1 { font-size:clamp(1.65rem,3.2vw,2.55rem); line-height:1.14; margin-bottom:0.5rem; }
.hero-copy > p { max-width:46ch; margin:0 0 1.25rem; line-height:1.62; }
.hero p.hero-tagline { margin:0 0 0.4rem; }
.hero-badge { margin-bottom:0.9rem; padding:0.32rem 0.9rem; }
.hero-actions { gap:0.55rem; }
.btn { padding:0.75rem 1.5rem; }

/* --- Shared components: dense cards, smaller gaps ----------------------- */
.stats-bar { padding:1.15rem 1rem; margin:-2.7rem auto 0; }
.stat { padding:0.3rem; }
.stat-num { font-size:1.6rem; }
.stat-label { font-size:0.7rem; }
.stat-icon { width:22px; height:22px; margin-bottom:0.25rem; }
.card { padding:1.35rem; }
.about-grid { gap:1.6rem; }
.message-card { padding:1.45rem; gap:1.3rem; }
.obj-grid, .news-grid { gap:0.95rem; }
.obj-card { padding:1.25rem 1.05rem; }
.obj-icon, .info-icon { margin-bottom:0.55rem; }
.info-card { padding:1.35rem 1.15rem; }
.two-col, .join-grid { gap:1rem; }
.issue-grid { gap:0.95rem; }
.issue-body { padding:0.8rem 0.9rem 0.95rem; }
.leader-grid { gap:1rem; }
.leader-info { padding:0.95rem; }
.page-header { padding:2.2rem 1.5rem; }
.footer { padding:2.3rem 1.5rem 1rem; }
.footer-top { gap:1.4rem; margin-bottom:1.3rem; }
.crumbs-in { padding:0.4rem 1.5rem; }
.form-card { padding:1.5rem; }
.benefits-card, .contact-info { padding:1.7rem; }

/* --- Copy: Hindi body text a touch tighter, never cramped ---------------- */
.about-text p, .message-content p, .card p, .info-card p,
.issue-body p, .contact-cta p, .form-nosc { line-height:1.68; }
.about-text h3 { margin-bottom:0.45rem; }
.about-text p { margin-bottom:0.6rem; }
.about-list { margin-top:0.9rem; }
.about-list li { margin-bottom:0.45rem; }
.faq-item { padding:0.75rem 0.95rem; margin-bottom:0.5rem; }

/* --- Scroll progress: one hairline, blue → green ------------------------ */
.scroll-progress {
  position:fixed; top:0; left:0; right:0; height:2px; z-index:1500;
  background:linear-gradient(90deg, var(--blue), var(--green));
  transform:scaleX(0); transform-origin:0 50%;
  pointer-events:none; opacity:0; transition:opacity 0.25s ease;
}
.scroll-progress.on { opacity:1; }

/* --- Header condenses as you scroll (the "tight" VIP feel) --------------- */
.header { backdrop-filter:saturate(150%) blur(6px); }
.header-inner { transition:padding 0.25s cubic-bezier(0.22,1,0.36,1); }
.emblem { transition:width 0.25s cubic-bezier(0.22,1,0.36,1), height 0.25s cubic-bezier(0.22,1,0.36,1); }
.logo-text .brand-name { transition:font-size 0.25s cubic-bezier(0.22,1,0.36,1); }
.header.scrolled .header-inner { padding-top:0.45rem; padding-bottom:0.45rem; }
.header.scrolled .emblem { width:42px; height:42px; }
.header.scrolled .logo-text .brand-name { font-size:0.88rem; }
.header.scrolled { box-shadow:0 6px 22px rgba(10,34,64,0.10); }

/* --- Reveal: a softer rise, no bounce ----------------------------------- */
.js .reveal { transform:translateY(18px); transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.js .reveal.visible { transform:translateY(0); }
.js .reveal > .obj-grid > *, .js .reveal > .news-grid > *,
.js .reveal > .leader-grid > *, .js .reveal > .gallery-grid > * {
  transform:translateY(14px);
  transition:opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
}

/* --- Hero photograph drifts a few pixels as the page scrolls ------------ */
.hero-figure img { will-change:transform; backface-visibility:hidden; }

@media (max-width:900px) {
  .section { padding:2.05rem 1.25rem; }
  .section-header { margin-bottom:1.35rem; }
  .hero { padding:2.15rem 1.25rem 2.9rem; }
  .stats-bar { margin-top:-2.2rem; }
  .page-header { padding:1.9rem 1.25rem; }
  .message-card, .card, .form-card, .benefits-card, .contact-info { padding:1.2rem; }
}
@media (max-width:500px) {
  .section { padding:1.8rem 1rem; }
  .hero { padding:1.9rem 1rem 2.5rem; }
  .hero h1 { font-size:1.28rem; }
  .header.scrolled .emblem { width:38px; height:38px; }
}

/* Dialog + reveal keep working, but without motion, when the OS asks for it */
@media (prefers-reduced-motion: reduce) {
  .popup-card { transform:translate(-50%,-50%) !important; transition:none !important; }
  .popup-overlay { transition:none !important; }
  .header-inner, .emblem, .logo-text .brand-name { transition:none !important; }
}

/* --- Mobile: the notice strip stays one line, the logo stays two --------- */
@media (max-width: 600px) {
  .topbar { font-size:0.68rem; }
  .topbar-inner { justify-content:center; text-align:center; }
  .topbar-right { display:none; }
  .hero-actions { gap:0.5rem; }
}
@media (max-width: 420px) {
  /* .brand-name is a <p> too, so hide only the English subtitle */
  .logo-text p:not(.brand-name) { display:none; }
  .logo-text .brand-name { font-size:0.78rem; line-height:1.3; }
}

/* ==========================================================================
   2026-10 VIP scroll pass
   One more layer of polish on the same three brand colours:
   the pattern on the hero fades out before it reaches the stats bar, the
   page never jumps when a dialog opens, and the scrollbar never shifts.
   ========================================================================== */

/* Scrollbar gutter: opening the dialog must not move the whole page 4px. */
html { scrollbar-gutter:stable; }

/* Selection is brand blue, not the browser default. */
::selection { background:rgba(18,58,109,0.18); color:var(--navy); }

/* Hero pattern fades toward the bottom edge, so the big circles stop
   before the stats bar instead of cutting through it. */
.hero::before {
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}

/* Dialog lock: fixed body keeps the reading position (overflow:hidden alone
   silently drops it). main.js writes the offset into --lock-offset. */
body.popup-open {
  position:fixed; left:0; right:0; width:100%;
  top:var(--lock-offset, 0px); overflow:hidden;
}

/* While the dialog is open the page behind is dimmed, so the card reads as
   the only live surface. */
.popup-overlay { background:rgba(10,34,64,0.66); }
.popup-card { box-shadow:0 30px 90px rgba(10,34,64,0.34); }

/* A compact “back to top” row already exists; keep it off the footer text. */
#backToTop.show { bottom:20px; }

/* Tight section stacks: the gap between two sections is one grid step. */
.section + .section { padding-top:1.9rem; }
@media (max-width:900px) { .section + .section { padding-top:1.6rem; } }

/* Drafts of dense lists: no stray leading between short lines. */
.about-list, .popup-features, .footer-col ul { line-height:1.5; }

/* Scrolling is native. The wheel is never intercepted: no JS momentum layer,
   no scroll-snap, no scroll speed multiplier. html{scroll-behavior:smooth}
   above only eases in-page anchor jumps, and opts out under reduced motion.
   The progress hairline is the only element hinted for the compositor. */
.scroll-progress { will-change:transform; }

/* ==========================================================================
   2026-10 Portal shell — quick links · main content · news & alerts
   Three columns on wide screens, one tight stack below 1100px. The two side
   rails stick while the middle column scrolls, which is what makes the page
   feel like a live portal rather than a long brochure.
   ========================================================================== */
/* Two columns, not three. The old left rail repeated the header menu and stole
   228px from the content, leaving a 630px column that made every section feel
   cramped. Its helpline block now lives in the right rail, the main column
   breathes (~880px) and the page reads as content + one useful side rail. */
.portal {
  max-width:1260px; margin:0 auto; padding:0.9rem 1.5rem 2.4rem;
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:2.2rem;
  align-items:start;
}
.portal-main { min-width:0; }

/* The rails */
.rail { position:sticky; top:84px; display:flex; flex-direction:column; gap:0.85rem; }
.rail-block {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:0.9rem 0.95rem;
  box-shadow:var(--shadow-sm);
}
.rail-title {
  font-size:0.74rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--navy); padding-bottom:0.5rem; margin-bottom:0.5rem;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:0.4rem;
}
.rail-title::before {
  content:''; width:3px; height:12px; border-radius:2px;
  background:linear-gradient(180deg,var(--blue),var(--green)); flex:0 0 auto;
}

.rail-list { list-style:none; display:flex; flex-direction:column; gap:0.05rem; }
.rail-list a {
  display:flex; align-items:center; gap:0.45rem;
  padding:0.45rem 0.4rem; border-radius:7px;
  font-size:0.815rem; font-weight:600; color:var(--text);
  transition:background-color 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}
.rail-list a::before {
  content:''; width:4px; height:4px; border-radius:50%;
  background:var(--green); opacity:0.6; flex:0 0 auto;
  transition:opacity 0.18s ease, transform 0.18s ease;
}
.rail-list a:hover, .rail-list a:focus-visible {
  background:var(--blue-tint); color:var(--blue); padding-left:0.6rem;
}
.rail-list a:hover::before { opacity:1; transform:scale(1.5); }

.rail-help .rail-phone {
  display:flex; align-items:center; gap:0.4rem;
  font-size:0.86rem; font-weight:700; color:var(--blue);
}
.rail-help .rail-phone .i { stroke:var(--blue); }
.rail-help .rail-phone:hover { color:var(--navy); }
.rail-note { font-size:0.72rem; color:var(--muted); line-height:1.55; margin-top:0.35rem; }

/* Sections inside the middle column lose the page-wide max-width */
.portal-main > .section {
  max-width:none; margin:0; padding:1.25rem 0;
}
.portal-main > .section:first-child { padding-top:0.4rem; }
.portal-main > .section + .section { padding-top:1.25rem; }
.portal-main > .section:last-child { padding-bottom:0.4rem; }
.portal-main .section-header { margin-bottom:1.15rem; }
.portal-main > .section.reveal {
  /* Cards inside the column are narrower, so the copy gets a touch more air. */
  padding-left:0; padding-right:0;
}

/* मुख्य सेवाएँ — four compact tiles */
.svc-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0.6rem; }
.svc {
  display:flex; flex-direction:column; gap:0.12rem;
  padding:0.8rem 0.75rem; border-radius:10px;
  background:var(--card); border:1px solid var(--border);
  transition:transform 0.2s cubic-bezier(0.22,1,0.36,1), border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.svc .i { stroke:var(--blue); margin-bottom:0.35rem; }
.svc strong { font-size:0.83rem; font-weight:700; color:var(--navy); line-height:1.3; }
.svc span { font-size:0.72rem; color:var(--muted); line-height:1.35; }
.svc:hover { transform:translateY(-2px); border-color:rgba(18,58,109,0.35); box-shadow:var(--shadow-sm); }
.svc:hover strong { color:var(--blue); }
.svc:active { transform:scale(0.985); }

/* संपर्क विवरण — three plain facts, no card stack */
.cd-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.6rem; }
.cd-item {
  display:flex; flex-direction:column; gap:0.1rem;
  padding:0.85rem 0.9rem; border-radius:10px;
  background:var(--surface); border:1px solid var(--border);
  transition:border-color 0.2s ease, background-color 0.2s ease;
}
.cd-item .i { stroke:var(--blue); margin-bottom:0.3rem; }
.cd-item strong { font-size:0.72rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); }
.cd-item span { font-size:0.84rem; font-weight:600; color:var(--navy); line-height:1.45; overflow-wrap:anywhere; }
.cd-item:hover { background:var(--card); border-color:rgba(18,58,109,0.35); }

/* Right rail: news reads as a list, not as three big cards */
.rail-news .news-grid { grid-template-columns:1fr; gap:0.55rem; }
.rail-news .news-card { box-shadow:none; border-radius:8px; }
.rail-news .news-img { height:96px; }
.rail-news .news-img .i { width:26px; height:26px; }
.rail-news .news-body { padding:0.65rem 0.7rem; }
.rail-news .news-body h4 { font-size:0.83rem; margin-bottom:0.2rem; line-height:1.35; }
.rail-news .news-body p { font-size:0.78rem; line-height:1.5; }
.rail-news .news-date { font-size:0.64rem; }
.rail-news .news-tag { font-size:0.58rem; padding:0.12rem 0.45rem; }
.rail-news .news-card:hover { transform:none; border-color:rgba(18,58,109,0.35); }
.rail-news .chip-row { gap:0.3rem; margin-bottom:0.6rem; justify-content:flex-start; }
.rail-news .chip { font-size:0.68rem; padding:0.25rem 0.6rem; }

.alert-list { list-style:none; display:flex; flex-direction:column; gap:0.4rem; }
.alert-list li {
  position:relative; padding-left:0.85rem;
  font-size:0.78rem; line-height:1.5; color:var(--muted);
}
.alert-list li::before {
  content:''; position:absolute; left:0; top:0.48em;
  width:5px; height:5px; border-radius:50%; background:var(--green);
}
.rail-cta {
  display:flex; align-items:center; justify-content:center;
  margin-top:0.65rem; padding:0.55rem 0.8rem; border-radius:8px;
  background:var(--blue); color:#fff; font-size:0.8rem; font-weight:700;
  transition:transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s ease, background-color 0.2s ease;
  box-shadow:0 4px 12px rgba(18,58,109,0.22);
}
.rail-cta:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(18,58,109,0.32); }
.rail-cta:active { transform:scale(0.985); }

/* Narrower laptops: the rail keeps a little less width, still sticks. */
@media (max-width:1100px) {
  .portal { grid-template-columns:minmax(0,1fr) 264px; gap:1.5rem; }
}
/* One column: the content leads, the rail follows it. A rail above the content
   only pushes the page down on a tablet, so it goes last. */
@media (max-width:900px) {
  .portal { display:flex; flex-direction:column; align-items:stretch; padding:0 1.1rem 2rem; }
  .portal-main { order:1; }
  .rail-news { order:2; position:static; flex-direction:column; margin-top:1.2rem; }
  .rail-news .news-grid { grid-template-columns:1fr; }
  .svc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cd-grid { grid-template-columns:1fr; }
  .portal-main > .section { padding:1rem 0; }
}
@media (max-width:520px) {
  .svc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.5rem; }
}

/* ==========================================================================
   Legal notices (2026-10 compliance pass)
   The disclaimer sits above the copyright line on every page: quiet enough not
   to shout, plain enough to be read.
   ========================================================================== */
.footer-disclaimer {
  font-size:0.82rem; line-height:1.7; color:rgba(255,255,255,0.74);
  padding:0.75rem 0.9rem; margin-bottom:1rem;
  background:rgba(255,255,255,0.045);
  border-left:3px solid var(--green); border-radius:0 8px 8px 0;
}
.footer-disclaimer strong { color:rgba(255,255,255,0.88); font-weight:700; }
.footer-disclaimer a { color:var(--green); text-decoration:underline; text-underline-offset:2px; }
.footer-disclaimer a:hover { color:#fff; }
.ext-note { color:rgba(255,255,255,0.45); font-size:0.92em; }

/* Consent line under a form's submit button */
.form-consent {
  font-size:0.78rem; line-height:1.6; color:var(--muted);
  margin-top:0.55rem; text-align:left;
}
.form-consent a { color:var(--blue); text-decoration:underline; text-underline-offset:2px; }

/* DPDP: explicit opt-in checkbox (consent is an action, not small print) */
.consent-row {
  display:flex; align-items:flex-start; gap:0.6rem;
  margin-top:0.85rem; padding:0.7rem 0.8rem;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  font-size:0.78rem; line-height:1.65; color:var(--muted); text-align:left; cursor:pointer;
}
.consent-row input[type="checkbox"] {
  flex:0 0 auto; width:18px; height:18px; margin-top:0.15rem;
  accent-color:var(--blue); cursor:pointer;
}
.consent-row a { color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.consent-row:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(18,58,109,0.12); }

/* Disclaimer page section: same card system as privacy/terms */
.policy-list { list-style:none; margin:0.2rem 0 1rem; }
.policy-list li {
  position:relative; padding-left:1.05rem; margin-bottom:0.5rem;
  color:var(--muted); font-size:0.94rem; line-height:1.75;
}
.policy-list li::before {
  content:''; position:absolute; left:0; top:0.62em;
  width:5px; height:5px; border-radius:50%; background:var(--green);
}

/* Middle column is ~630px, so the full-page grids need one step of scaling:
   headings ease down, the certificate sits under its paragraph, and the
   leadership cards get shorter photos so three fit a row. */
.portal-main .section-title { font-size:clamp(1.22rem,1.9vw,1.5rem); }
.portal-main .section-subtitle { font-size:0.86rem; }
/* About copy and the certificate now sit side by side again — at 630px the
   certificate had to drop below the text and floated in a half-empty row. */
.portal-main .about-grid { grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:1.7rem; align-items:start; }
.portal-main .cert-card { max-width:none; }
@media (max-width:780px) {
  .portal-main .about-grid { grid-template-columns:1fr; gap:1.1rem; }
}
.portal-main .leader-grid { gap:0.7rem; }
.portal-main .leader-card { flex:1 1 168px; max-width:214px; }
.portal-main .leader-photo { aspect-ratio:1/1; }
.portal-main .leader-info { padding:0.7rem 0.55rem; }
.portal-main .leader-info h4 { font-size:0.9rem; line-height:1.25; }
.portal-main .leader-info .role { font-size:0.7rem; line-height:1.35; }
.portal-main .leader-info .phone { font-size:0.72rem; }
.portal-main .message-card { grid-template-columns:132px 1fr; gap:1.05rem; }
.portal-main .message-photo { width:132px; height:150px; }
.portal-main .obj-card h4 { font-size:0.94rem; }
.portal-main .issue-body h3 { font-size:0.94rem; }
.portal-main .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }

/* Registration certificate: it is the trust anchor, so it fills its column and
   the numbers line up instead of drifting row to row. */
.cert-grid { display:grid; grid-template-columns:1fr; }
.cert-card .cert-body { padding:1.15rem 1.2rem 1.2rem; }
.cert-row .value { font-variant-numeric:tabular-nums; }

/* Executive strip on the homepage: four equal cards in one row. The old flex
   grid fitted three and dropped the fourth alone onto a second row. */
#homeCommittee { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0.75rem; max-width:none; }
#homeCommittee .leader-card { max-width:none; }
#homeCommittee .leader-photo { aspect-ratio:1/1; }
#homeCommittee .leader-info { padding:0.85rem 0.6rem 1rem; }
/* Same crop anchor + one brand rule on every card: four different photographs
   (studio, outdoor, curtain, office) start to read as one set. */
#homeCommittee .leader-card { position:relative; }
#homeCommittee .leader-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:3; background:linear-gradient(90deg,var(--blue),var(--green)); }
#homeCommittee .leader-photo img { object-position:center 14%; }
@media (max-width:1024px) { #homeCommittee { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.85rem; } }
@media (max-width:520px) { #homeCommittee { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.6rem; } }

/* Membership section: the single card left half the row empty */
.join-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.join-grid > #qrBlock { grid-column:1 / -1; }
.join-list { list-style:none; display:flex; flex-direction:column; gap:0.45rem; }
.join-list li { position:relative; padding-left:1.05rem; font-size:0.9rem; color:var(--text); line-height:1.55; }
.join-list li::before { content:''; position:absolute; left:0; top:0.55em; width:5px; height:5px; border-radius:50%; background:var(--green); }
@media (max-width:780px) { .join-grid { grid-template-columns:1fr; } }

/* Helpline block that moved from the removed left rail into the news rail */
.rail-help .rail-mail { display:flex; align-items:center; gap:0.4rem; margin-top:0.5rem; font-size:0.78rem; font-weight:600; color:var(--text); overflow-wrap:anywhere; }
.rail-help .rail-mail .i { stroke:var(--muted); }
.rail-help .rail-mail:hover { color:var(--blue); }
.rail-help .rail-mail:hover .i { stroke:var(--blue); }

@media (max-width:860px) {
  .portal-main .message-card { grid-template-columns:1fr; text-align:center; }
  .portal-main .message-photo { margin:0 auto; }
  .portal-main .leader-card { max-width:none; }
  .portal-main .gallery-grid { grid-template-columns:1fr; }
}

/* Reduced motion: stagger stays, movement goes */
@media (prefers-reduced-motion: reduce) {
  .svc, .rail-cta, .rail-list a { transition:none !important; }
  .svc:hover, .rail-cta:hover { transform:none !important; }
}