/* UB-UBUNTU Party public site — implemented from design_handoff_ub_ubuntu (5 pages, shared chrome) */

:root {
  --cream: #FBF7EC;
  --card: #FFFDF6;
  --border: #E8E0CE;
  --border-input: #D8CFB8;
  --ink: #2A2318;
  --body-text: #5A5142;
  --muted: #8A7F68;
  --saffron: #DE7327;
  --saffron-hover: #C4621E;
  --blue: #1F4E9E;
  --blue-hover: #173C7A;
  --green: #2E7D46;
  --green-hover: #25663A;
  --danger: #B0433A;
  --dark: #2A2318;
  --dark-2: #3D3324;        /* lighter warm dark — distinguishes Get Involved from the footer */
  --dark-2-border: #5A4C31;
  --dark-border: #453B2A;
  --dark-muted: #B0A68C;
  --track: #EFE8D6;
  --table-head: #F3EDDD;
  --khaki: #C4B87F;
  --serif: 'Marcellus', Georgia, serif;
  --sans: 'Public Sans', 'Segoe UI', Arial, sans-serif;
  --devanagari: 'Noto Serif Devanagari', Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  padding-top: 5px;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); text-decoration: underline; }

input, select, textarea { font-family: var(--sans); box-sizing: border-box; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

h1, h2, h3 { font-weight: 400; }

/* Tricolor bars (top + bottom of viewport) */
.tricolor-bar { position: fixed; left: 0; right: 0; z-index: 60; height: 5px; display: flex; }
.tricolor-bar.at-top { top: 0; }
.tricolor-bar.at-bottom { bottom: 0; }
.tricolor-bar span { flex: 1; }
.tricolor-bar span:nth-child(1) { background: var(--saffron); }
.tricolor-bar span:nth-child(2) { background: #FFFFFF; }  /* pure white — page background is a shade deeper so it shows */
.tricolor-bar span:nth-child(3) { background: var(--green); }

/* Header */
.site-header {
  position: sticky; top: 5px; z-index: 50;
  background: rgba(243, 235, 216, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 1180px; margin: 0 auto; padding: 13px 24px;
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
}
.brand-link { display: flex; align-items: center; gap: 14px; color: inherit !important; flex-shrink: 0; }
.brand-link:hover { text-decoration: none; }
.logo-mark {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--blue);               /* solid blue coin — all three tiranga dots stand out */
  border: 2.5px solid var(--blue);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.logo-mark svg { width: 28px; height: 28px; display: block; }
.wordmark { display: flex; flex-direction: column; white-space: nowrap; flex-shrink: 0; }
.wordmark-title { font-family: var(--serif); font-size: 22px; letter-spacing: 0.04em; }
.wordmark-sub {
  font-size: 9.5px; letter-spacing: 0.13em;
  color: var(--muted); text-transform: uppercase;
}
.site-nav {
  margin-left: auto; display: flex; gap: 16px; align-items: center;
  font-size: 14px; font-weight: 500; white-space: nowrap; flex-wrap: nowrap;
  min-width: 0;
}
.site-nav > a { color: var(--ink); }
.site-nav > a.is-active { color: var(--blue); font-weight: 700; }

.lang-pill {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
  border: 1px solid var(--border-input); border-radius: 20px;
  background: var(--card); padding: 2px 10px 2px 12px;
}
.lang-glyph-dev { font-size: 11px; color: var(--saffron); font-weight: 700; font-family: var(--devanagari); }
.lang-glyph-lat { font-size: 11px; color: var(--blue); font-weight: 700; }
.lang-pill select {
  border: none; background: transparent;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  padding: 5px 2px; cursor: pointer; max-width: 150px;
}
.lang-pill option.opt-hindi { color: var(--saffron); font-weight: 700; }

.nav-faq {
  border: 1.5px solid var(--saffron); color: var(--saffron) !important;
  padding: 7px 16px; border-radius: 20px; font-weight: 700;
}
.nav-faq:hover { background: var(--saffron); color: var(--cream) !important; text-decoration: none; }
.faq-more { text-align: center; margin-top: 20px; color: var(--muted); font-size: 14.5px; }

.nav-cta {
  background: var(--blue); color: var(--cream) !important;
  padding: 10px 22px; border-radius: 4px; font-weight: 600;
}
.nav-cta:hover { background: var(--blue-hover); text-decoration: none; }

/* Buttons */
.btn { display: inline-block; border-radius: 4px; cursor: pointer; font-family: var(--sans); border: none; }
.btn-saffron { background: var(--saffron); color: var(--cream) !important; padding: 15px 34px; font-weight: 700; font-size: 16px; }
.btn-saffron:hover { background: var(--saffron-hover); text-decoration: none; }
.btn-outline-dark { border: 1.5px solid var(--ink); color: var(--ink) !important; padding: 15px 34px; font-weight: 600; font-size: 16px; background: transparent; }
.btn-outline-dark:hover { background: var(--ink); color: var(--cream) !important; text-decoration: none; }
.btn-blue { background: var(--blue); color: var(--cream) !important; padding: 13px 28px; font-weight: 600; font-size: 15px; }
.btn-blue:hover { background: var(--blue-hover); text-decoration: none; }
.btn-outline-blue { border: 1.5px solid var(--blue); color: var(--blue) !important; padding: 13px 28px; font-weight: 600; font-size: 15px; background: transparent; }
.btn-outline-blue:hover { background: var(--blue); color: var(--cream) !important; text-decoration: none; }

/* Section primitives */
.eyebrow {
  font-size: 12px; letter-spacing: 0.16em; color: var(--saffron);
  font-weight: 700; text-transform: uppercase; margin-bottom: 10px;
}
.container { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ---- Home: hero ---- */
.hero { max-width: 1180px; margin: 0 auto; padding: 48px 24px 36px; text-align: center; }
.hero-eyebrow { font-family: var(--devanagari); font-size: 21px; color: var(--saffron); margin-bottom: 10px; font-weight: 600; }
.hero h1 { font-family: var(--serif); font-size: 78px; line-height: 1.02; margin: 0 0 18px; letter-spacing: 0.02em; }
.hero-taglines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.hero-tagline-en { font-size: 23px; color: var(--ink); margin: 0; font-weight: 600; }
.hero-tagline-hi { font-family: var(--devanagari); font-size: 19px; color: var(--ink); margin: 0; font-weight: 600; }
.lang-grid {
  max-width: 960px; margin: 0 auto 20px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 18px;
}
.lang-card { border: 1px solid var(--border); background: var(--card); border-radius: 6px; padding: 10px 14px; text-align: center; }
.lang-card-name {
  font-size: 10px; letter-spacing: 0.12em; color: var(--saffron);
  font-weight: 700; text-transform: uppercase; margin-bottom: 3px;
}
.lang-card-text { font-size: 14.5px; color: var(--body-text); line-height: 1.45; }
.hero-verify { font-size: 15px; letter-spacing: 0.18em; color: var(--blue); font-weight: 700; margin: 0 0 26px; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- Home: countdown ---- */
.countdown-section { max-width: 1180px; margin: 0 auto 40px; padding: 0 24px; }
.countdown-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 22px 28px; display: flex; align-items: center; gap: 28px;
}
.countdown-label { font-size: 12px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.countdown-num { font-family: var(--serif); font-size: 44px; line-height: 1; }
.countdown-num-sub { font-size: 24px; color: var(--muted); }
.countdown-caption { font-size: 13px; color: var(--body-text); margin-top: 4px; }
.countdown-track { height: 14px; background: var(--track); border-radius: 7px; overflow: hidden; display: flex; }
.countdown-fill { background: linear-gradient(90deg, var(--saffron), var(--green)); border-radius: 7px; transition: width 0.6s; }
.countdown-note { font-size: 13.5px; color: var(--body-text); margin: 12px 0 0; line-height: 1.55; }

/* ---- Home: quick links ---- */
.quicklinks-section { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 36px 0; }
.quicklinks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.quicklink-card {
  border: 1px solid var(--border); border-radius: 6px; padding: 18px;
  background: var(--cream); color: var(--ink) !important; display: block;
  position: relative; overflow: hidden;
}
/* tiranga top line — same on every card */
.quicklink-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg,
    var(--saffron) 0 33.4%, #FFFFFF 33.4% 66.7%, var(--green) 66.7% 100%);
}
.quicklink-card:hover { text-decoration: none; border-color: var(--border-input); }
.quicklink-title { font-family: var(--serif); font-size: 22px; }
.quicklink-text { font-size: 13.5px; color: var(--body-text); margin: 6px 0 0; line-height: 1.5; }

/* ---- Home: newsroom ---- */
.newsroom-section { max-width: 1180px; margin: 0 auto; padding: 44px 24px; }
.newsroom-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.newsroom-head h2 { font-family: var(--serif); font-size: 38px; margin: 0; }
.newsroom-link { font-size: 14px; font-weight: 600; }
.newsroom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.update-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; display: flex; flex-direction: column;
}
.update-strip { height: 3px; display: flex; }
.update-strip span { flex: 1; }
.update-strip span:nth-child(1) { background: var(--saffron); }
.update-strip span:nth-child(2) { background: #FFFFFF; }
.update-strip span:nth-child(3) { background: var(--green); }
.update-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.update-meta { font-size: 11.5px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.update-title { font-family: var(--serif); font-size: 21px; line-height: 1.25; }
.update-text { font-size: 14px; color: var(--body-text); line-height: 1.55; margin: 0; flex: 1; }
.update-more { font-size: 13.5px; font-weight: 600; }

/* ---- Home: get involved (dark) ---- */
.involved-section { background: var(--dark-2); padding: 40px 0; }
.involved-head { text-align: center; margin-bottom: 24px; }
.involved-head h2 { font-family: var(--serif); font-size: 38px; margin: 0; color: var(--cream); }
.involved-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.involved-card {
  border: 1px solid var(--dark-2-border); border-radius: 6px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.involved-title-row { display: flex; align-items: center; gap: 14px; }
.involved-num {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 19px; flex-shrink: 0;
}
.involved-num.n1 { background: var(--saffron); color: var(--cream); }
.involved-num.n2 { background: var(--cream); color: var(--dark); }
.involved-num.n3 { background: var(--green); color: var(--cream); }
.involved-title { font-family: var(--serif); font-size: 22px; color: var(--cream); }
.involved-text { font-size: 14px; color: var(--dark-muted); line-height: 1.55; margin: 0; flex: 1; }
.involved-link { color: var(--saffron) !important; font-weight: 600; font-size: 14px; align-self: flex-end; }
.involved-link.green { color: #7FBF8E !important; }
.involved-muted { color: var(--cream); font-weight: 600; font-size: 14px; align-self: flex-end; }

/* ---- Footer ---- */
.site-footer { background: var(--dark); color: #D8CFB8; padding: 32px 0 0; border-top: 1px solid var(--dark-border); }
.footer-grid {
  max-width: 1180px; margin: 0 auto; padding: 0 24px 28px;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px;
}
.footer-wordmark { font-family: var(--serif); font-size: 22px; color: var(--cream); letter-spacing: 0.04em; margin-bottom: 10px; }
.footer-about { font-size: 13.5px; line-height: 1.65; margin: 0; max-width: 380px; }
.footer-col-label { font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.footer-links { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.footer-links a { color: #D8CFB8; }
.footer-newsletter-band { border-top: 1px solid var(--dark-border); }
.footer-newsletter {
  max-width: 1180px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.newsletter-blurb { max-width: 300px; line-height: 1.5; }
.newsletter-title { font-size: 14.5px; font-weight: 600; color: var(--cream); }
.newsletter-sub { font-size: 12.5px; color: var(--muted); }
.newsletter-form { display: flex; gap: 8px; flex: 1; min-width: 320px; max-width: 460px; }
.newsletter-form input {
  flex: 1; padding: 11px 14px; border: 1px solid var(--dark-border);
  border-radius: 4px; background: var(--card); font-size: 14px;
}
.newsletter-form button {
  background: var(--saffron); border: none; color: var(--cream);
  padding: 11px 22px; border-radius: 4px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.newsletter-form button:hover { background: var(--saffron-hover); }
.newsletter-done { font-size: 14px; font-weight: 600; color: #7FBF8E; }
/* Subscription result modal — closable ONLY via its ✕ / Close buttons */
.sub-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(26, 20, 12, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.sub-modal {
  position: relative; width: 100%; max-width: 460px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; box-shadow: 0 18px 50px rgba(26, 20, 12, 0.3);
}
.sub-modal-bar { height: 6px; display: flex; }
.sub-modal-bar span { flex: 1; }
.sub-modal-bar span:nth-child(1) { background: var(--saffron); }
.sub-modal-bar span:nth-child(2) { background: #FFFFFF; }
.sub-modal-bar span:nth-child(3) { background: var(--green); }
.sub-modal-x {
  position: absolute; top: 14px; right: 14px;
  border: 1px solid var(--border-input); background: var(--cream); color: var(--ink);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  font-size: 14px; line-height: 1; font-family: var(--sans);
}
.sub-modal-x:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.sub-modal-body { padding: 24px 26px 26px; }
.sub-modal-title { font-family: var(--serif); font-size: 21px; margin: 0 26px 10px 0; color: var(--green); }
.sub-modal.is-error .sub-modal-title { color: var(--danger); }
.sub-modal-msg { font-size: 14.5px; color: var(--body-text); line-height: 1.65; margin: 0 0 20px; }
.sub-modal-close {
  background: var(--blue); color: var(--cream); border: none; border-radius: 4px;
  padding: 11px 28px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: var(--sans);
}
.sub-modal-close:hover { background: var(--blue-hover); }
.footer-social { display: flex; gap: 8px; margin-left: auto; }
.footer-social a {
  border: 1px solid var(--dark-border); color: #D8CFB8;
  border-radius: 4px; padding: 8px 14px; font-size: 12.5px; font-weight: 600;
}
.disclaimer-bar {
  position: fixed; bottom: 5px; left: 0; right: 0; z-index: 50;
  background: var(--dark); border-top: 1px solid var(--dark-border);
  padding: 12px 24px; text-align: center;
  font-size: 12.5px; color: var(--muted); font-weight: 700;
}
/* tiranga colors inside the fixed disclaimer bar */
.disclaimer-bar .d-saffron { color: #F58634; }
.disclaimer-bar .d-white   { color: #FFFFFF; }
.disclaimer-bar .d-green   { color: #4CA866; }
.footer-spacer { height: 64px; }

/* ---- White paper ---- */
.papers-section { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 44px 0; }
.papers-section h2, .section-title-lg { font-family: var(--serif); font-size: 42px; margin: 0 0 10px; }
.papers-lead { font-size: 16.5px; color: var(--body-text); max-width: 720px; line-height: 1.6; margin: 0 0 24px; }
.phase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.milestone-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.phase-card { border: 1px solid var(--border); border-radius: 6px; padding: 18px; background: var(--cream); }
.phase-card.accent-saffron { border-top: 3px solid var(--saffron); }
.phase-card.accent-blue { border-top: 3px solid var(--blue); }
.phase-card.accent-green { border-top: 3px solid var(--green); }
.phase-card.accent-khaki { border-top: 3px solid var(--khaki); }
.phase-title { font-family: var(--serif); font-size: 26px; }
.phase-text { font-size: 14px; color: var(--body-text); margin: 8px 0 0; line-height: 1.5; }

.highlight-card {
  border: 1px solid var(--border); border-left: 4px solid var(--saffron); border-radius: 6px;
  background: var(--cream); padding: 22px 26px; margin-bottom: 24px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center;
}
.highlight-eyebrow { font-size: 11px; letter-spacing: 0.14em; color: var(--saffron); font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }
.highlight-title { font-family: var(--serif); font-size: 28px; line-height: 1.15; margin-bottom: 10px; }
.highlight-text { font-size: 14.5px; color: var(--body-text); line-height: 1.6; margin: 0; }
.stat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-tile { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 16px; text-align: center; }
.stat-tile-num { font-family: var(--serif); font-size: 26px; }
.stat-tile-num.saffron { color: var(--saffron); }
.stat-tile-num.green { color: var(--green); }
.stat-tile-num.blue { color: var(--blue); }
.stat-tile-label { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pledge-row {
  grid-column: 1 / 3; display: flex; gap: 10px; justify-content: center;
  white-space: nowrap; border-top: 1px solid var(--border); padding-top: 18px;
}
.pledge-chip { border: 1px solid; border-radius: 20px; padding: 7px 16px; font-size: 13px; font-weight: 700; }
.pledge-chip.saffron { border-color: var(--saffron); color: var(--saffron); }
.pledge-chip.blue { border-color: var(--blue); color: var(--blue); }
.pledge-chip.green { border-color: var(--green); color: var(--green); }

.policy-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.policy-chip {
  border: 1px solid var(--border); background: var(--cream); border-radius: 20px;
  padding: 8px 18px; font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.papers-ctas { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }

.constitution-section { max-width: 1180px; margin: 0 auto; padding: 44px 24px; }
.constitution-section h2 { font-family: var(--serif); font-size: 42px; margin: 0 0 24px; }
.constitution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.constitution-card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 20px; }
.constitution-card-title { font-family: var(--serif); font-size: 21px; margin-bottom: 10px; color: var(--blue); }
.constitution-card p { font-size: 14.5px; color: var(--body-text); line-height: 1.6; margin: 0; }

/* ---- Membership: tiers ---- */
.members-section { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 44px 0; }
.members-lead { font-size: 16px; color: var(--body-text); max-width: 680px; line-height: 1.6; margin: 0 0 26px; }
.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tier-card {
  border: 1px solid var(--border); border-radius: 6px; background: var(--cream);
  padding: 20px; display: flex; flex-direction: column; gap: 8px;
}
.tier-roman {
  width: 44px; height: 44px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cream); font-family: var(--serif); font-size: 20px;
}
.tier-card.t1 .tier-roman { background: var(--saffron); }
.tier-card.t2 .tier-roman { background: var(--blue); }
.tier-card.t3 .tier-roman { background: var(--green); }
.tier-card.t4 .tier-roman { background: var(--muted); }
.tier-name { font-family: var(--serif); font-size: 22px; }
.tier-tag { font-size: 12px; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; }
.tier-card.t1 .tier-tag { color: var(--saffron); }
.tier-card.t2 .tier-tag { color: var(--blue); }
.tier-card.t3 .tier-tag { color: var(--green); }
.tier-card.t4 .tier-tag { color: var(--muted); }
.tier-text { font-size: 14px; color: var(--body-text); line-height: 1.55; margin: 0; }

/* ---- Forms (Membership + Contact) ---- */
.join-section { background: var(--card); border-top: 1px solid var(--border); padding: 44px 0; }
.join-head { text-align: center; margin-bottom: 28px; }
.join-head h2 { font-family: var(--serif); font-size: 42px; margin: 0 0 8px; }
.join-head p { font-size: 15.5px; color: var(--body-text); margin: 0; }
.form-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
.form-tab {
  border: 1.5px solid var(--border-input); background: transparent; color: var(--ink);
  padding: 11px 26px; border-radius: 4px; font-weight: 600; font-size: 14.5px;
  cursor: pointer; font-family: var(--sans);
}
.form-tab.is-active { border-color: var(--blue); background: var(--blue); color: var(--cream); }

.form-card {
  max-width: 820px; margin: 0 auto; background: var(--cream);
  border: 1px solid var(--border); border-radius: 8px; padding: 26px 30px;
}
.form-card-title { font-family: var(--serif); font-size: 24px; margin-bottom: 6px; }
.form-card-note { font-size: 13.5px; color: var(--muted); margin: 0 0 20px; line-height: 1.5; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-grid .span-2 { grid-column: 1 / 3; }
.form-grid label, .field-label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 6px; }
.form-grid input[type="text"], .form-grid input[type="date"], .form-grid input[type="tel"],
.form-grid input[type="email"], .form-grid select, .form-grid textarea, .stack-form input, .stack-form textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border-input);
  border-radius: 4px; background: var(--card); font-size: 14px;
}
.form-grid textarea, .stack-form textarea { resize: vertical; }
.input-id { letter-spacing: 0.06em; }
.input-pan { text-transform: uppercase; }

.dropzone {
  border: 1.5px dashed var(--khaki); border-radius: 6px; background: var(--card);
  padding: 22px; text-align: center; cursor: pointer;
}
.dropzone:hover, .dropzone.is-drag { border-color: var(--blue); }
.dropzone-cta { font-size: 13.5px; font-weight: 600; color: var(--blue); }
.dropzone-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.dropzone.has-file .dropzone-cta { color: var(--green); }
.dropzone.has-error .dropzone-cta { color: var(--danger); }
.dropzone input[type="file"] { display: none; }

.consent-row { display: flex; gap: 10px; align-items: flex-start; }
.consent-row input { margin-top: 3px; }
.consent-row p { font-size: 13px; color: var(--body-text); line-height: 1.55; margin: 0; }

.submit-saffron {
  background: var(--saffron); border: none; color: var(--cream);
  padding: 14px 36px; border-radius: 4px; font-weight: 700; font-size: 15.5px; cursor: pointer;
}
.submit-saffron:hover { background: var(--saffron-hover); }
.submit-blue {
  background: var(--blue); border: none; color: var(--cream);
  padding: 14px 36px; border-radius: 4px; font-weight: 700; font-size: 15.5px; cursor: pointer;
}
.submit-blue:hover { background: var(--blue-hover); }
.submit-green {
  background: var(--green); border: none; color: var(--cream);
  padding: 13px; border-radius: 4px; font-weight: 700; font-size: 15px; cursor: pointer;
}
.submit-green:hover { background: var(--green-hover); }

.form-success {
  background: #E4EFE0; border: 1px solid var(--green); color: var(--green);
  border-radius: 6px; padding: 12px 16px; font-size: 14px; font-weight: 600; margin-bottom: 18px;
}
.form-success.is-error { background: #F7E3D6; border-color: var(--danger); color: var(--danger); }
.form-error-note { color: var(--danger); font-size: 13px; font-weight: 600; margin-top: 8px; }

.contact-panel { max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-card { background: var(--cream); border: 1px solid var(--border); border-radius: 8px; padding: 22px; }
.contact-card-title { font-family: var(--serif); font-size: 22px; margin-bottom: 12px; }
.contact-address { font-size: 14.5px; color: var(--body-text); line-height: 1.7; margin: 0 0 12px; }
.contact-lines { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.contact-lines .k { color: var(--muted); }
.stack-form { display: flex; flex-direction: column; gap: 14px; }

/* ---- Founder ---- */
.founder-section { max-width: 1180px; margin: 0 auto; padding: 44px 24px; }
.founder-grid { display: grid; grid-template-columns: 340px 1fr; gap: 32px; align-items: start; }
.founder-portrait { width: 100%; border-radius: 6px; border: 1px solid var(--border); display: block; }
.founder-caption { margin-top: 14px; text-align: center; }
.founder-name { font-family: var(--serif); font-size: 24px; }
.founder-role { font-size: 13px; letter-spacing: 0.12em; color: var(--saffron); font-weight: 700; text-transform: uppercase; margin-top: 4px; }
.founder-body h2 { font-family: var(--serif); font-size: 38px; margin: 0 0 18px; }
.founder-body > p { font-size: 15.5px; color: var(--body-text); line-height: 1.65; margin: 0 0 16px; }
.founder-body strong { color: var(--ink); }
.founder-bullets { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.founder-bullet { display: flex; gap: 12px; align-items: baseline; }
.founder-bullet .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; transform: translateY(-2px); }
.founder-bullet .dot.saffron { background: var(--saffron); }
.founder-bullet .dot.blue { background: var(--blue); }
.founder-bullet .dot.green { background: var(--green); }
.founder-bullet p { font-size: 14.5px; color: var(--body-text); line-height: 1.55; margin: 0; }
.pillars-card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 16px 20px; }
.pillars-label { font-size: 12px; letter-spacing: 0.13em; color: var(--muted); text-transform: uppercase; margin-bottom: 12px; }
.pillars-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pillar-chip {
  border: 1px solid var(--border); background: var(--cream); border-radius: 20px;
  padding: 7px 16px; font-size: 13.5px; font-weight: 600;
}
.pillars-label-second { margin-top: 18px; }
.pillar-chip-more { color: var(--muted); font-weight: 500; border-style: dashed; }

/* ---- Contact: FAQ ---- */
.faq-section { max-width: 860px; margin: 0 auto; padding: 44px 24px; }
.faq-head { text-align: center; margin-bottom: 24px; }
.faq-head h2 { font-family: var(--serif); font-size: 38px; margin: 0; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.faq-q {
  width: 100%; background: none; border: none; padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  cursor: pointer; text-align: left; font-family: var(--sans);
}
.faq-q-text { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.faq-mark { font-family: var(--serif); font-size: 20px; color: var(--blue); }
.faq-a { font-size: 14.5px; color: var(--body-text); line-height: 1.65; margin: 0; padding: 0 18px 16px; }
.faq-item:not(.is-open) .faq-a { display: none; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .hero h1 { font-size: 58px; }
  .quicklinks-grid, .milestone-grid, .tier-grid { grid-template-columns: repeat(2, 1fr); }
  .pledge-row { flex-wrap: wrap; white-space: normal; }
}
/* Header stays on ONE row at every width: compress, then let the nav scroll */
@media (max-width: 1120px) {
  .site-nav { gap: 12px; font-size: 13.5px; }
  .lang-pill select { max-width: 110px; }
  .nav-cta { padding: 8px 14px; }
}
@media (max-width: 960px) {
  .wordmark-sub { display: none; }
  .wordmark-title { font-size: 19px; }
  .site-nav { gap: 10px; font-size: 13px; }
  .lang-pill select { max-width: 84px; }
}
@media (max-width: 780px) {
  .header-inner { padding: 10px 14px; gap: 10px; }
  .lang-glyph-dev, .lang-glyph-lat { display: none; }
  .site-nav { overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .nav-cta { padding: 7px 12px; }
  .nav-faq { padding: 5px 12px; }
}
@media (max-width: 900px) {
  .newsroom-grid, .involved-grid, .phase-grid, .constitution-grid { grid-template-columns: 1fr; }
  .highlight-card { grid-template-columns: 1fr; }
  .pledge-row { grid-column: auto; }
  .countdown-card { flex-direction: column; align-items: stretch; gap: 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .founder-grid { grid-template-columns: 1fr; }
  .founder-portrait { max-width: 340px; margin: 0 auto; }
  .contact-panel { grid-template-columns: 1fr; }
  .lang-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hero h1 { font-size: 42px; }
  .hero { padding-top: 32px; }
  .lang-grid, .quicklinks-grid, .milestone-grid, .tier-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .papers-section h2, .join-head h2, .constitution-section h2 { font-size: 32px; }
  .disclaimer-bar { font-size: 11px; padding: 10px 12px; }
}

/* ---- Organisation page ---- */
.org-section { padding: 56px 0 30px; }
.org-head { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.org-lead { color: var(--body-text); font-size: 15px; line-height: 1.7; }
.org-node {
  position: relative; overflow: hidden; background: var(--card);
  border: 1px solid var(--border); border-radius: 8px; padding: 20px 22px;
  text-align: center; max-width: 620px; margin: 0 auto;
}
.org-node::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--saffron) 0 33.4%, #FFFFFF 33.4% 66.7%, var(--green) 66.7% 100%);
}
.org-node-title { font-family: var(--serif); font-size: 21px; }
.org-node-sub { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--saffron); font-weight: 700; margin-top: 2px; }
.org-node-text { font-size: 13.5px; color: var(--body-text); margin: 8px 0 0; line-height: 1.6; }
.org-node.is-president { border-color: var(--saffron); box-shadow: 0 6px 22px rgba(222, 115, 39, 0.12); }
.org-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.org-chip {
  background: var(--cream); border: 1px solid var(--border-input); border-radius: 12px;
  padding: 3px 11px; font-size: 11.5px; font-weight: 600; color: var(--body-text);
}
.org-chip.strong { border-color: var(--saffron); color: var(--saffron); }
.org-line { width: 2px; height: 26px; background: var(--border-input); margin: 0 auto; }
.org-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; margin: 0 auto; }
.org-split .org-node { max-width: none; margin: 0; }
.org-split .org-line { height: 20px; }
.org-levels { max-width: 620px; margin: 0 auto; }
.org-levels .org-node { max-width: none; }
.org-level-tag { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.rule-card {
  position: relative; overflow: hidden; background: var(--card);
  border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px;
}
.rule-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--saffron) 0 33.4%, #FFFFFF 33.4% 66.7%, var(--green) 66.7% 100%);
}
.rule-card-title { font-family: var(--serif); font-size: 17.5px; margin-bottom: 6px; }
.rule-card-text { font-size: 13px; color: var(--body-text); line-height: 1.6; margin: 0; }
.org-cta-band {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 26px; text-align: center; margin-top: 34px;
}
.org-cta-band .btn { display: inline-block; margin-top: 14px; }
@media (max-width: 860px) {
  .org-split, .rules-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) and (min-width: 861px) {
  .rules-grid { grid-template-columns: repeat(2, 1fr); }
}