:root {
    /* Light, clean palette derived from the MFIB emblem */
    --bg: #F4F7FB;
    --bg-soft: #EDF2F9;
    --surface: #FFFFFF;
    --border: #E2E8F2;
    --border-strong: #CDD8E8;

    --navy: #12315F;
    --navy-deep: #0C2244;
    --teal: #1F9C8B;
    --teal-deep: #167E70;
    --gold: #E8A61E;

    --accent: #1B4C8B;
    --accent-soft: #EAF1FB;

    --text: #17233B;
    --text-muted: #5B6B85;
    --text-faint: #8494AC;

    --positive: #1F9C8B;
    --positive-deep: #167E70;
    --negative: #B23A4B;

    --radius: 18px;
    --radius-sm: 12px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(18, 49, 95, .06), 0 2px 8px rgba(18, 49, 95, .05);
    --shadow-md: 0 8px 24px rgba(18, 49, 95, .08), 0 2px 6px rgba(18, 49, 95, .05);
    --shadow-lg: 0 20px 50px rgba(18, 49, 95, .12);

    --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font);
    color: var(--text);
    background:
        radial-gradient(900px 500px at 88% -8%, rgba(31, 156, 139, .07), transparent 60%),
        radial-gradient(1000px 560px at -10% -6%, rgba(27, 76, 139, .07), transparent 60%),
        var(--bg);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 1.25rem; }

.skip-link {
    position: absolute; left: -999px; top: 0;
    background: var(--navy); color: #fff; padding: .6rem 1rem;
    border-radius: 0 0 10px 0; z-index: 20; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Header */
.site-header {
    background: rgba(255, 255, 255, .82);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 10;
    backdrop-filter: saturate(160%) blur(10px);
}
.header-inner {
    display: flex; align-items: center; gap: 1rem;
    padding-top: .85rem; padding-bottom: .85rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--text); }
.brand__mark { flex: none; object-fit: contain; display: block; width: 44px; height: 44px; border-radius: 10px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name { font-weight: 700; font-size: 1rem; color: var(--navy); letter-spacing: -.01em; }
.brand__tag { font-size: .72rem; color: var(--text-muted); }
.env-badge {
    margin-left: auto; font-size: .74rem; font-weight: 600; color: var(--teal-deep);
    border: 1px solid rgba(31, 156, 139, .3); border-radius: var(--radius-pill);
    padding: .35rem .85rem; white-space: nowrap; background: rgba(31, 156, 139, .08);
    display: inline-flex; align-items: center; gap: .4rem;
}

/* Main layout */
.main { flex: 1; padding-top: 2.4rem; padding-bottom: 3.5rem; display: flex; flex-direction: column; gap: 1.35rem; }

/* Hero */
.hero { text-align: center; padding: 1rem 0 .6rem; }
.hero__logo { width: 200px; height: auto; object-fit: contain; margin: 0 auto 1rem; display: block; }
.hero__eyebrow {
    display: inline-block; text-transform: uppercase; letter-spacing: .16em; font-size: .7rem;
    font-weight: 700; color: var(--teal-deep); margin: 0 0 .8rem;
    background: rgba(31, 156, 139, .09); padding: .35rem .8rem; border-radius: var(--radius-pill);
}
.hero__title {
    font-size: clamp(1.9rem, 5.2vw, 2.9rem); margin: 0 0 .7rem; line-height: 1.1;
    color: var(--navy); font-weight: 800; letter-spacing: -.02em;
}
.hero__lead { font-size: 1.08rem; color: var(--text-muted); margin: 0 auto; max-width: 33rem; }

/* Cards */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 1.75rem;
}
.card__title { margin: 0 0 1.1rem; font-size: 1.15rem; color: var(--navy); font-weight: 700; }
.card__text { color: var(--text-muted); margin: 0 0 1.1rem; }

.vote-card { box-shadow: var(--shadow-lg); }

/* Name field */
.field { margin-bottom: 1.4rem; }
.field__label { display: block; font-weight: 600; margin-bottom: .5rem; color: var(--text); font-size: .95rem; }
.field__input {
    width: 100%; font-size: 1.05rem; color: var(--text);
    background: var(--surface); border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm); padding: .85rem 1rem; min-height: 52px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field__input::placeholder { color: var(--text-faint); }
.field__input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.field__help { font-size: .84rem; color: var(--text-faint); margin: .5rem 0 0; }
.field__error { font-size: .9rem; color: var(--negative); margin: .5rem 0 0; font-weight: 600; }

/* Vote buttons */
.vote-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-size: 1.05rem; font-weight: 700; cursor: pointer;
    border-radius: var(--radius-pill); border: 1.5px solid transparent;
    padding: .95rem 1.2rem; min-height: 58px;
    transition: transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn--yes {
    background: linear-gradient(180deg, var(--positive), var(--positive-deep));
    color: #fff; box-shadow: 0 6px 16px rgba(31, 156, 139, .28);
}
.btn--yes:hover { box-shadow: 0 10px 22px rgba(31, 156, 139, .34); transform: translateY(-1px); }

.btn--no {
    background: var(--surface); color: var(--navy); border-color: var(--border-strong);
}
.btn--no:hover { border-color: var(--navy); background: var(--bg-soft); }

.btn--ghost {
    background: var(--surface); color: var(--accent); border-color: var(--border-strong);
}
.btn--ghost:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Result */
.result {
    margin-top: 1.35rem; padding: 1rem 1.15rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg-soft);
    font-size: 1.02rem; color: var(--text);
}
.result--yes { border-color: rgba(31, 156, 139, .4); background: rgba(31, 156, 139, .09); }
.result--no  { border-color: rgba(178, 58, 75, .35); background: rgba(178, 58, 75, .07); }

/* Counter */
.counter-card { text-align: center; background: linear-gradient(180deg, #fff, var(--accent-soft)); }
.counter__label { margin: 0 0 .5rem; font-size: .98rem; color: var(--text-muted); font-weight: 600; }
.counter__value {
    margin: 0; font-size: clamp(3rem, 12vw, 4.75rem); font-weight: 800; line-height: 1;
    color: var(--navy); letter-spacing: -.02em;
}

/* SOC mode */
.soc-card { background: var(--surface); }
.soc__summary {
    cursor: pointer; font-weight: 700; font-size: 1.05rem; padding: .3rem 0; color: var(--navy);
    list-style: none; display: flex; align-items: center; gap: .5rem;
}
.soc__summary::-webkit-details-marker { display: none; }
.soc__summary::before { content: "\25B8"; color: var(--teal); transition: transform .15s ease; }
details[open] .soc__summary::before { transform: rotate(90deg); }
.soc__summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.soc__intro { color: var(--text-muted); margin: .9rem 0; }
.soc__grid {
    display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: .55rem .9rem;
    margin: 0; font-size: .93rem;
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 1rem 1.15rem;
}
.soc__grid dt { color: var(--text-muted); font-weight: 600; }
.soc__grid dd { margin: 0; font-family: "Cascadia Code", Consolas, monospace; color: var(--navy-deep); word-break: break-word; }
.soc__disclaimer {
    margin: 1rem 0 0; font-size: .84rem; color: var(--text-muted);
    border-left: 3px solid var(--teal); padding-left: .85rem;
}

/* Footer */
.site-footer { border-top: 1px solid var(--border); background: rgba(255, 255, 255, .6); }
.footer-inner { padding-top: 1.6rem; padding-bottom: 1.8rem; }
.footer__org { font-weight: 700; margin: 0 0 .5rem; color: var(--navy); }
.footer__dept { font-weight: 400; color: var(--text-muted); font-size: .9rem; }
.footer__fine { font-size: .8rem; color: var(--text-faint); margin: 0; }

/* Responsive */
@media (max-width: 480px) {
    .vote-buttons { grid-template-columns: 1fr; }
    .env-badge { margin-left: 0; }
    .header-inner { gap: .6rem; }
    .card { padding: 1.35rem; }
    .hero__logo { width: 160px; }
}