/* Page designs: about, programmes, housing, contribute, governance, roadmap, risks */
.sr { position:absolute; left:-9999px; }

/* slogan */
.slogan { display:inline-block; font:700 clamp(1.15rem, 3vw, 1.6rem)/1.3 var(--head); color:#fff; margin:0 0 14px; padding:8px 18px; border-left:5px solid var(--orange); background:rgba(255,255,255,.1); border-radius:0 12px 12px 0; }
.slogan.small { font-size:1.05rem; margin:12px 0 0; padding:6px 14px; }
.slogan-top { font-weight:600; color:#ffd9a6; }
.foot-slogan { font:italic 1.2rem var(--head); color:#ffd9a6; margin:22px 0 0; }
@media (max-width:640px) { .slogan { display:block; text-align:left; } }
.grid.two { grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }

/* about */
.story { display:grid; grid-template-columns:260px 1fr; gap:34px; align-items:center; background:var(--card); border-radius:24px; padding:clamp(20px,4vw,40px); box-shadow:var(--shadow); margin:8px 0 22px; }
.story img { width:100%; border-radius:50%; box-shadow:0 0 0 5px var(--gold), 0 14px 34px rgba(14,58,82,.25); background:var(--paper); }
.values-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:14px; }
.value { background:linear-gradient(160deg,var(--navy),var(--navy-l)); color:#fff; border-radius:var(--radius); padding:18px; text-align:center; font-weight:600; box-shadow:var(--shadow); }
.value span { display:block; font-size:1.8rem; margin-bottom:6px; }

/* programmes */
.spotlight { display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; background:linear-gradient(135deg,var(--navy-d),var(--navy-l)); color:#dcebf2; border-radius:24px; padding:clamp(22px,4vw,40px); box-shadow:var(--shadow); margin:8px 0; position:relative; overflow:hidden; }
.spotlight::after { content:""; position:absolute; right:-70px; bottom:-70px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(90,169,48,.5), transparent 65%); }
.spotlight > * { position:relative; z-index:1; }
.spotlight h2 { color:#fff; margin-top:6px; } .spotlight p { max-width:640px; }
.spot-icon { font-size:4rem; width:110px; height:110px; display:grid; place-items:center; background:rgba(255,255,255,.12); border-radius:28px; }
.spotlight .btn.outline { color:#fff; border-color:#fff; background:transparent; } .spotlight .btn.outline:hover { background:#fff; color:var(--navy); }
.card.prog { min-height:220px; }
.phasebar { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.ph { padding:14px 12px; color:#fff; border-radius:12px; text-align:center; font-size:.85rem; }
.ph b { display:block; font-size:1rem; }
.ph1 { background:var(--green-d); } .ph2 { background:#2b7a8f; } .ph3 { background:var(--blue); } .ph4 { background:var(--orange); } .ph5 { background:var(--gold); }

/* housing */
.intro-row { display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:10px; }
.intro-row p { flex:1 1 420px; margin:0; }
.tablist { display:flex; gap:6px; background:var(--card); padding:6px; border-radius:99px; box-shadow:var(--shadow); width:fit-content; max-width:100%; overflow-x:auto; margin:14px 0; }
.tablist button { background:transparent; color:var(--navy); box-shadow:none; white-space:nowrap; }
.tablist button:hover { background:var(--soft); transform:none; box-shadow:none; }
.tablist button.on { background:var(--navy); color:#fff; }
.tabs:not(.js) .tablist { display:none; } .tabs:not(.js) .tabpanel { margin-bottom:20px; }
.tabpanel[hidden] { display:none; }
.score-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0; }
.score-row > div { background:var(--soft); border-radius:14px; padding:12px 16px; text-align:center; min-width:96px; }
.score-row b { display:block; font:700 1.5rem var(--head); color:var(--navy); } .score-row span { font-size:.78rem; color:var(--muted); }
.score-row i { font-style:normal; font-weight:700; color:var(--muted); }
.score-row .tot { background:var(--green-d); } .score-row .tot b, .score-row .tot span { color:#fff; }

/* contribute */
.calc-hero { display:grid; grid-template-columns:1.2fr 1fr; gap:22px; background:linear-gradient(135deg,var(--navy-d),var(--navy-l)); border-radius:24px; padding:clamp(20px,4vw,36px); color:#fff; box-shadow:var(--shadow); margin-bottom:14px; }
.calc-hero label { color:#ffe6c4; font-size:1.05rem; }
.calc-in { display:flex; gap:14px; align-items:center; margin:12px 0 16px; }
.calc-in input[type=number] { max-width:130px; text-align:center; font-weight:700; font-size:1.2rem; }
.calc-in input[type=range] { padding:0; min-height:0; border:0; accent-color:var(--orange); background:transparent; flex:1; box-shadow:none; }
.calc-out { display:grid; gap:12px; align-content:center; } .calc-out div { background:rgba(255,255,255,.1); border-radius:16px; padding:14px 20px; }
.calc-out span { font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:#ffd9a6; }
.calc-out b { display:block; font:700 clamp(1.5rem,4vw,2.2rem) var(--head); }
.alloc { display:grid; gap:12px; }
.alloc-row { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; background:var(--card); border-radius:14px; padding:12px 16px; box-shadow:var(--shadow); }
.alloc-row .dot { width:16px; height:16px; border-radius:50%; } .alloc-row small { display:block; color:var(--muted); }
.alloc-row .meter { margin:6px 0 0; } .alloc-row b { font-size:1.05rem; color:var(--navy); }
.scen { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:12px; }
.scen .card { text-align:center; padding:16px; margin:0; }
.scen b { display:block; font:700 1.6rem var(--head); color:var(--navy); } .scen span { color:var(--muted); font-size:.82rem; }
.scen em { display:block; font-style:normal; margin-top:6px; } .scen strong { color:var(--green-d); }
.bars { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; align-items:end; height:300px; background:var(--card); border-radius:var(--radius); padding:18px 14px 12px; box-shadow:var(--shadow); }
.bar-col { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; text-align:center; }
.bar-col .barfill { width:60%; background:linear-gradient(180deg,var(--green),var(--blue)); border-radius:10px 10px 0 0; min-height:8px; }
.bar-col .amt { font:600 .72rem var(--body); color:var(--navy); margin-bottom:4px; } .bar-col small { color:var(--muted); font-size:.72rem; }
.growth-focus { margin-top:16px; }

/* governance */
.org { display:grid; justify-items:center; gap:0; }
.org-top { max-width:560px; width:100%; text-align:center; margin:0; }
.org-top b, .org-row b { display:block; color:var(--navy); } .org-top span, .org-row span { color:var(--muted); font-size:.9rem; }
.org-line { width:3px; height:26px; background:linear-gradient(var(--blue),var(--green)); }
.org-line.dashed { background:repeating-linear-gradient(var(--gold) 0 5px, transparent 5px 9px); }
.org-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:14px; width:100%; } .org-row .card { margin:0; text-align:center; }
.controls { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:12px; }
.controls > div { background:var(--card); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); display:flex; gap:12px; align-items:center; }
.controls span { font-size:1.5rem; flex:none; width:44px; height:44px; display:grid; place-items:center; background:var(--soft); border-radius:12px; }
.gate-card { display:flex; gap:18px; align-items:center; margin-top:28px; } .gate-card .icon { flex:none; margin:0; }
.gate-card h3 { margin-bottom:4px; } .gate-card p { margin:0; }

/* roadmap */
.timeline { position:relative; display:grid; gap:18px; padding-left:34px; margin:8px 0 24px; }
.timeline::before { content:""; position:absolute; left:15px; top:8px; bottom:8px; width:4px; border-radius:4px; background:linear-gradient(var(--blue), var(--green), var(--orange), var(--gold)); }
.tl-item { position:relative; }
.tl-dot { position:absolute; left:-34px; top:14px; width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:700; box-shadow:0 0 0 4px var(--paper); }
.t2 .tl-dot { background:var(--green-d); } .t3 .tl-dot { background:var(--blue); } .t4 .tl-dot { background:var(--orange); } .t5 .tl-dot { background:var(--gold); } .t6 .tl-dot { background:#6a4b8f; }
.tl-card { margin:0; } .outcome { margin:0; color:var(--green-d); font-weight:600; }
@media (min-width:900px) {
  .timeline { grid-template-columns:1fr 1fr; padding-left:0; gap:22px 60px; }
  .timeline::before { left:50%; margin-left:-2px; }
  .tl-item:nth-child(odd) { text-align:right; } .tl-item .tl-dot { left:auto; right:-47px; } .tl-item:nth-child(even) .tl-dot { left:-47px; right:auto; }
  .tl-item:nth-child(even) { margin-top:46px; }
}

/* risks */
.legend-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.sev { display:inline-block; padding:3px 12px; border-radius:99px; font:700 .76rem var(--body); color:#fff; }
.sev.s1 { background:var(--green-d); } .sev.s2 { background:#b88a00; } .sev.s3 { background:var(--orange); } .sev.s4 { background:var(--bad); }
.risks { grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }
.card.risk header { display:flex; justify-content:space-between; gap:10px; align-items:start; } .card.risk h3 { margin:0; }
.card.risk.r1 { border-top-color:var(--green-d); } .card.risk.r2 { border-top-color:#b88a00; } .card.risk.r3 { border-top-color:var(--orange); } .card.risk.r4 { border-top-color:var(--bad); }
.meta { display:flex; gap:16px; color:var(--muted); font-size:.88rem; margin:10px 0; } .meta b { color:var(--ink); }

@media (max-width:860px) {
  .calc-hero { grid-template-columns:1fr; }
  .story { grid-template-columns:1fr; text-align:center; } .story img { max-width:200px; margin:auto; }
}
@media (max-width:640px) {
  .spotlight { grid-template-columns:1fr; text-align:center; } .spot-icon { margin:auto; width:90px; height:90px; font-size:3rem; } .spotlight .cta-row { justify-content:center; }
  .phasebar { grid-template-columns:1fr; }
  .bars { height:260px; gap:6px; padding:12px 6px; } .bar-col .amt { font-size:.6rem; } .bar-col small { display:none; }
  .alloc-row { grid-template-columns:auto 1fr; } .alloc-row b { grid-column:2; }
  .gate-card { flex-direction:column; text-align:center; }
  .score-row i { display:none; } .score-row > div { flex:1 1 40%; }
}