/* ============================================================
   UDM v2 Home page sections  ·  udm-home.css
   Loaded only on the home page (via @@section Styles).
   Built section-by-section in Phase 2 (Tasks 6–13).
   ============================================================ */

/* ============================================================
   HERO carousel  (Task 6)
   ============================================================ */
.udm-hero {
    position: relative;
    height: 880px;
    margin-top: calc(-1 * var(--udm-header-h));
    overflow: hidden;
    color: var(--udm-white);
    background: var(--udm-night);
}

.udm-hero__slide {
    position: absolute;
    inset: 0;
    visibility: hidden;
}

.udm-hero__slide.was {
    visibility: visible;
    z-index: 1;
}

.udm-hero__slide.is-on {
    visibility: visible;
    z-index: 2;
    animation: udm-sunrise 1.5s cubic-bezier(.7, 0, .2, 1) both;
}

@keyframes udm-sunrise {
    from { clip-path: circle(0% at 96% 30%); }
    to   { clip-path: circle(150% at 96% 30%); }
}

.udm-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: var(--udm-media-filter);
    transform: scale(1.06);        /* slight headroom for the scroll parallax (set via JS); kept small so images aren't over-zoomed */
    will-change: transform;
}

.udm-hero__img--fallback {
    background:
        radial-gradient(1200px 800px at 85% 20%, rgba(211, 0, 15, .5), transparent 60%),
        var(--udm-night);
}

.udm-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 6, 8, .92) 0%, rgba(20, 6, 8, .45) 48%, rgba(0, 0, 0, 0) 85%);
}

.udm-hero__scrim--bottom {
    inset: auto 0 0 0;
    height: 320px;
    background: linear-gradient(0deg, rgba(20, 6, 8, .92), rgba(0, 0, 0, 0));
}

.udm-hero__txt {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 200px;
}

.udm-hero__title {
    font-size: clamp(58px, 8vw, 116px);
    max-width: 980px;
    overflow: hidden;
    padding-bottom: .06em;
}

.udm-hero__title > span {
    display: block;
}

.udm-hero__slide.is-on .udm-hero__title > span {
    animation: udm-rise 1s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes udm-rise {
    from { transform: translateY(105%); }
    to   { transform: none; }
}

.udm-hero__sub {
    font-size: 20px;
    line-height: 1.55;
    max-width: 560px;
    margin: 26px 0 34px;
    color: rgba(255, 255, 255, .88);
}

.udm-hero__slide.is-on .udm-hero__sub {
    animation: udm-fadein .9s ease .5s both;
}

.udm-hero__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.udm-hero__slide.is-on .udm-hero__ctas {
    animation: udm-fadein .9s ease .65s both;
}

@keyframes udm-fadein {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Opening "brand" slide: the emblem front & centre ---- */
.udm-hero__slide--brand {
    background-color: #2a0d10;
    background-image:
        radial-gradient(1000px 720px at 30% 46%, rgba(16, 4, 6, .96) 0%, rgba(18, 5, 7, .9) 40%, rgba(24, 7, 9, .72) 72%, rgba(28, 8, 10, .6) 100%),
        linear-gradient(90deg, rgba(16, 4, 6, .9) 0%, rgba(20, 6, 8, .7) 55%, rgba(26, 8, 10, .5) 100%),
        url('/assets/images/brands/waving_flag.png');
    background-repeat: no-repeat;
    background-position: center, center, center right;
    background-size: cover, cover, cover;
}

.udm-herobrand { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; }

.udm-herobrand__in {
    display: grid;
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    width: 100%;
}

.udm-herobrand__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 520px;
}

.udm-herobrand__seal {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.udm-herobrand__glow {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .8) 40%, rgba(242, 183, 5, .34) 60%, transparent 72%);
    z-index: 0;
}

.udm-herobrand__badge {
    position: relative;
    z-index: 2;
    width: 400px;
    height: 400px;
    object-fit: contain;
    filter: drop-shadow(0 20px 44px rgba(0, 0, 0, .5));
}

.udm-hero__slide--brand.is-on .udm-herobrand__badge {
    animation: udm-badgepop 1.1s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes udm-badgepop {
    from { opacity: 0; transform: scale(.82) translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.udm-herobrand__flag { position: relative; z-index: 3; flex: 0 0 auto; align-self: flex-start; margin-top: 46px; }

.udm-herobrand__copy { position: relative; max-width: 640px; }

/* Faint emblem watermark behind the copy */
.udm-herobrand__copy > :not(.udm-herobrand__wm) { position: relative; z-index: 1; }

.udm-herobrand__wm {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: -110px;
    transform: translateY(-50%);
    width: 500px;
    height: 500px;
    background: center / contain no-repeat;
    opacity: .08;
    filter: grayscale(1) brightness(1.3) blur(3.5px);
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle at center, #000 34%, transparent 66%);
    mask-image: radial-gradient(circle at center, #000 34%, transparent 66%);
}

@media (max-width: 920px) {
    .udm-herobrand__wm { display: none; }
}

/* ============================================================
   PARTY ANTHEM band
   ============================================================ */
.udm-anthem {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    color: #fff;
    background: linear-gradient(135deg, #2a0d10 0%, #7e0009 58%, #d3000f 100%);
}

.udm-anthem::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--anthem-bg) center / cover no-repeat;
    opacity: .12;
}

.udm-anthem__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(900px 620px at 82% 16%, rgba(242, 183, 5, .16), transparent 60%),
        linear-gradient(90deg, rgba(20, 6, 8, .78) 0%, rgba(20, 6, 8, .4) 55%, rgba(20, 6, 8, .12) 100%);
}

.udm-anthem__in {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 56px;
    align-items: center;
}

.udm-anthem__copy { max-width: 620px; }

.udm-anthem__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--udm-accent);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 7px 13px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.udm-anthem__title { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -.01em; }

.udm-anthem__sub { font-size: 20px; font-weight: 700; color: var(--udm-accent-soft); margin: 10px 0 18px; }

.udm-anthem__text { font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .9); white-space: pre-line; max-width: 560px; }

.udm-anthem__flag { margin-top: 28px; }

.udm-anthem__player { position: relative; }

.udm-ytfacade {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
    border: 1px solid rgba(255, 255, 255, .16);
}

.udm-ytfacade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 2, 3, .28);
    transition: background .3s ease;
}

.udm-ytfacade:hover::after,
.udm-ytfacade:focus-visible::after { background: rgba(10, 2, 3, .12); }

/* once the video is loaded, drop the overlay/cursor so the YouTube controls (play/pause) are usable */
.udm-ytfacade.is-playing { cursor: default; }
.udm-ytfacade.is-playing::after { display: none; }

.udm-ytfacade__play {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    color: #fff;
    background: var(--udm-primary);
    box-shadow: 0 12px 34px rgba(211, 0, 15, .6);
    transition: transform .25s ease;
}

.udm-ytfacade:hover .udm-ytfacade__play { transform: translate(-50%, -50%) scale(1.08); }

.udm-ytfacade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Reusable horizontal video slider (_VideoSlider partial) ---- */
.udm-vslider { position: relative; }

.udm-vslider__track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 10px;
    scrollbar-width: thin;
}

.udm-vslider__track::-webkit-scrollbar { height: 6px; }
.udm-vslider__track::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 6px; }

.udm-vslider__item {
    flex: 0 0 min(380px, 82%);
    scroll-snap-align: start;
    margin: 0;
}

.udm-vslider__item .udm-ytfacade { box-shadow: 0 16px 40px rgba(0, 0, 0, .28); }

.udm-vslider__item .udm-ytfacade__play { width: 60px; height: 60px; }

.udm-vslider__cap {
    margin: 10px 2px 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--udm-ink-soft, #5b5156);
}

.udm-vslider__nav {
    position: absolute;
    top: calc(50% - 22px);
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--udm-primary);
    box-shadow: 0 8px 22px rgba(211, 0, 15, .42);
    cursor: pointer;
    z-index: 4;
    transition: transform .2s ease, background .2s ease;
}

.udm-vslider__nav:hover { transform: translateY(-50%) scale(1.08); }
.udm-vslider__nav--prev { left: -10px; }
.udm-vslider__nav--next { right: -10px; }

/* On dark sections (Ruto moment) captions go light */
.udm-moment .udm-vslider__cap,
.udm-homecoming .udm-vslider__cap { color: rgba(255, 255, 255, .82); }
.udm-homecoming__video { max-width: 860px; margin: 30px auto 0; width: 100%; }

@media (max-width: 640px) {
    .udm-vslider__nav { display: none; }
    .udm-vslider__item { flex-basis: 86%; }
}

@media (max-width: 920px) {
    .udm-anthem { padding: 72px 0; }
    .udm-anthem__in { grid-template-columns: 1fr; gap: 32px; }
    .udm-anthem__flag { margin-top: 22px; }
}

.udm-herobrand__eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 13px;
    font-weight: 800;
    color: var(--udm-accent);
    margin-bottom: 16px;
}

.udm-herobrand__title {
    font-size: clamp(46px, 6vw, 88px);
    line-height: .96;
    letter-spacing: -.02em;
    padding-bottom: .04em;
}

/* "kwa wote." drops to its own line so the headline never runs under the
   countdown cards on the first slide (line 1 = "Ustawi", line 2 = "kwa wote."). */
.udm-herobrand__title > span { color: var(--udm-accent); display: block; }

.udm-herobrand__lead {
    font-size: 19px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
    margin: 22px 0 24px;
    max-width: 560px;
}

.udm-herobrand__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }

.udm-herobrand__chip {
    font-size: 13px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .24);
    color: #fff;
    backdrop-filter: blur(4px);
}

.udm-hero__slide--brand.is-on .udm-herobrand__copy > * { animation: udm-fadein .9s ease both; }
.udm-hero__slide--brand.is-on .udm-herobrand__title { animation-delay: .12s; }
.udm-hero__slide--brand.is-on .udm-herobrand__lead { animation-delay: .22s; }
.udm-hero__slide--brand.is-on .udm-herobrand__chips { animation-delay: .32s; }
.udm-hero__slide--brand.is-on .udm-hero__ctas { animation-delay: .42s; }

@media (max-width: 920px) {
    .udm-herobrand__in { grid-template-columns: 1fr; gap: 24px; justify-items: center; text-align: center; }
    .udm-herobrand__visual { min-height: 0; }
    .udm-herobrand__badge { width: 270px; height: 270px; }
    .udm-herobrand__glow { width: 320px; height: 320px; }
    .udm-herobrand__flag { display: none; }
    .udm-herobrand__copy { max-width: 620px; }
    .udm-herobrand__chips, .udm-hero__slide--brand .udm-hero__ctas { justify-content: center; }
    .udm-herobrand__lead { font-size: 17px; margin-inline: auto; }
}

/* Sun rays anchored at the sunrise origin */
.udm-hero__rays {
    position: absolute;
    left: 96%;
    top: 30%;
    width: 0;
    height: 0;
    z-index: 3;
    pointer-events: none;
}

.udm-hero__rays > div {
    position: absolute;
    left: -900px;
    top: -900px;
    width: 1800px;
    height: 1800px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(242, 183, 5, .30) 0deg 3deg, rgba(242, 183, 5, 0) 3deg 10deg);
    -webkit-mask-image: radial-gradient(circle, #000 0, #000 18%, transparent 62%);
    mask-image: radial-gradient(circle, #000 0, #000 18%, transparent 62%);
    animation: udm-raysin 2.2s cubic-bezier(.2, .7, .2, 1) both, udm-spin 180s linear infinite;
}

@keyframes udm-raysin {
    from { opacity: 0; transform: scale(.4) rotate(-20deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes udm-spin {
    to { transform: rotate(360deg); }
}

/* Election & nomination countdowns */
.udm-hero__countdowns {
    position: absolute;
    z-index: 5;
    right: 32px;
    top: 112px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(268px, 32vw);
}

.udm-cd {
    padding: 9px 11px;
    border-radius: 14px;
    background: rgba(20, 6, 8, .58);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.udm-cd--nom {
    background: rgba(28, 10, 2, .62);
    box-shadow: inset 0 0 0 1px rgba(242, 183, 5, .5);
}

.udm-cd__blocks {
    display: flex;
    gap: 5px;
}

.udm-cd__block {
    flex: 1;
    text-align: center;
    padding: 5px 2px 5px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .09);
}

.udm-cd__block b {
    display: block;
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.udm-cd__block i {
    display: block;
    margin-top: 4px;
    font-size: 8.5px;
    font-style: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

.udm-cd--nom .udm-cd__block b {
    color: var(--udm-accent);
}

.udm-cd__cap {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .88);
}

.udm-cd__label {
    display: block;
    font-weight: 600;
}

.udm-cd__cap a {
    display: inline-block;
    margin-top: 3px;
    color: var(--udm-accent-soft);
    font-weight: 700;
    text-decoration: none;
}

.udm-cd__cap a:hover {
    text-decoration: underline;
}

.udm-cd--nom .udm-cd__cap a {
    color: var(--udm-accent);
}

.udm-cd--nom.is-over {
    display: none;
}

/* Tabs + arrows */
.udm-hero__controls {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 44px;
}

.udm-hero__controls-row {
    display: flex;
    align-items: flex-end;
    gap: 36px;
}

.udm-hero__tabs {
    flex: 1;
    display: flex;
    gap: 24px;
}

.udm-htab {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    background: none;
    text-align: left;
    padding: 0;
    color: var(--udm-white);
    opacity: .62;
    transition: opacity .3s;
}

.udm-htab.is-on,
.udm-htab:hover {
    opacity: 1;
}

.udm-htab__bar {
    display: block;
    height: 2px;
    background: rgba(255, 255, 255, .3);
    margin-bottom: 12px;
    overflow: hidden;
}

.udm-htab__fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--udm-accent);
}

.udm-htab.is-on .udm-htab__fill {
    animation: udm-fill 7s linear forwards;
}

@keyframes udm-fill {
    to { width: 100%; }
}

.udm-htab__label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.udm-hero__arrows {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

@media (max-width: 1080px) {
    .udm-hero {
        height: 760px;
    }

    .udm-hero__tabs {
        display: none;
    }
}

@media (max-width: 640px) {
    .udm-hero {
        height: 720px;   /* a little taller so the full brand copy + CTAs fit without clipping */
    }

    .udm-hero__txt {
        bottom: 150px;
    }

    .udm-hero__title {
        font-size: 52px;
    }

    /* Brand slide: the emblem was huge (overlapping the header) and the copy overflowed,
       pushing the Join/leadership CTAs off-screen. Shrink + tighten so it all fits. */
    .udm-herobrand__badge { width: 190px; height: 190px; }
    .udm-herobrand__glow { width: 230px; height: 230px; }
    .udm-herobrand__in { gap: 14px; }
    .udm-herobrand__title { font-size: 42px; }
    .udm-herobrand__lead { font-size: 15px; }
    .udm-herobrand__chips { margin-bottom: 16px; gap: 8px; }
    .udm-herobrand__chip { font-size: 12.5px; padding: 7px 12px; }

    /* Carousel arrows: centre them at the very bottom, smaller, so they no longer
       sit on top of the feature chips. */
    .udm-hero__controls { bottom: 12px; }
    .udm-hero__controls-row { justify-content: center; gap: 16px; }
    .udm-hero__arrows { margin-left: 0; }
    .udm-hero__arrows .udm-circ { width: 42px; height: 42px; }

    .udm-hero__countdowns {
        position: static;
        right: auto;
        top: auto;
        width: auto;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        margin: 18px 16px 4px;
    }

    .udm-cd {
        flex: 1 1 150px;
        padding: 10px 11px;
    }

    .udm-cd__block b {
        font-size: 18px;
    }

    .udm-cd__block i {
        font-size: 8.5px;
    }

    .udm-cd__cap {
        font-size: 11px;
        margin-top: 8px;
    }
}

/* ============================================================
   "UDM at a glance" impact band (animated counters)
   ============================================================ */
.udm-impact {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 500px at 15% 0%, rgba(211, 0, 15, .5), transparent 60%),
        radial-gradient(900px 500px at 100% 120%, rgba(242, 183, 5, .14), transparent 55%),
        var(--udm-night);
    color: var(--udm-white);
    padding: 72px 0;
}

.udm-impact__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
    text-align: center;
}

.udm-impact__item {
    position: relative;
}

.udm-impact__item + .udm-impact__item::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: rgba(255, 255, 255, .14);
}

.udm-impact__num {
    font-size: clamp(30px, 3.6vw, 58px);
    line-height: 1.05;
    color: var(--udm-accent);
    white-space: nowrap;              /* keep "50,000+" on one line */
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.udm-impact__label {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, .78);
    letter-spacing: .01em;
}

/* Home shows 6 stats → 3 columns (2 tidy rows); About keeps its 4-across.
   Hide the vertical divider at the start of each wrapped row. */
@media (min-width: 641px) {
    .udm-impact--home .udm-impact__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 44px 40px;
    }

    .udm-impact--home .udm-impact__item:nth-child(3n + 1)::before {
        display: none;
    }
}

@media (max-width: 640px) {
    .udm-impact__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 24px;
    }

    .udm-impact__item:nth-child(odd) + .udm-impact__item::before,
    .udm-impact__item + .udm-impact__item::before {
        display: none;
    }
}

/* ============================================================
   Micro-interaction polish (hover lifts / depth)
   ============================================================ */
.udm-leadcard {
    transition: transform .28s var(--udm-ease);
}

.udm-leadcard:hover {
    transform: translateY(-6px);
}

.udm-leadcard__photo {
    transition: box-shadow .28s ease, transform .28s var(--udm-ease);
}

.udm-leadcard:hover .udm-leadcard__photo {
    box-shadow: 0 18px 40px rgba(30, 8, 10, .22);
}

.udm-newsrow {
    transition: transform .25s var(--udm-ease);
}

.udm-newsrow:hover {
    transform: translateX(6px);
}

.udm-way__icon {
    transition: transform .25s var(--udm-ease), box-shadow .25s ease;
}

.udm-way:hover .udm-way__icon {
    transform: scale(1.06);
    box-shadow: 0 8px 20px rgba(30, 8, 10, .18);
}

.udm-news__featimg {
    transition: box-shadow .3s ease;
}

.udm-news__feat:hover .udm-news__featimg {
    box-shadow: 0 24px 50px rgba(30, 8, 10, .18);
}

/* ============================================================
   Reusable logo placeholder (used where there is no photo)
   ============================================================ */
/* !important so centring + background win over container rules defined later */
.udm-logo-ph {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at 50% 38%, rgba(211, 0, 15, .14), transparent 68%),
        var(--udm-surface-2) !important;
}

/* !important so the centred logo wins over container `img{object-fit:cover}` rules */
.udm-logo-ph img {
    width: 46% !important;
    height: auto !important;
    max-width: 130px !important;
    object-fit: contain !important;
    opacity: .92;
    filter: drop-shadow(0 6px 16px rgba(30, 8, 10, .18));
}

.udm-logo-ph--dark img {
    max-width: 96px !important;
}

.udm-logo-ph--dark {
    background:
        radial-gradient(circle at 50% 38%, rgba(211, 0, 15, .42), transparent 65%),
        var(--udm-night);
}

.udm-logo-ph--dark img {
    opacity: .85;
}

/* ============================================================
   Announcements & notices band
   ============================================================ */
.udm-notices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.udm-notices a {
    color: var(--udm-ink);
    text-decoration: none;
}

.udm-notice {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px;
    border-radius: var(--udm-radius);
    border: 1px solid var(--udm-border);
    background: var(--udm-white);
    transition: transform .25s var(--udm-ease), box-shadow .25s ease;
}

.udm-notice:hover {
    transform: translateY(-5px);
    box-shadow: var(--udm-shadow);
}

.udm-notice.is-urgent {
    border-color: transparent;
    box-shadow: inset 0 0 0 2px var(--udm-primary);
}

.udm-notice__badge {
    align-self: flex-start;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--udm-primary);
    background: rgba(211, 0, 15, .08);
    padding: 4px 11px;
    border-radius: var(--udm-radius-pill);
}

.udm-notice.is-urgent .udm-notice__badge {
    background: var(--udm-primary);
    color: var(--udm-white);
}

.udm-notice__title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.udm-notice__body {
    font-size: 15px;
    color: var(--udm-muted-2);
    line-height: 1.55;
}

.udm-notice__link {
    margin-top: auto;
    padding-top: 6px;
    font-weight: 700;
    color: var(--udm-primary);
    font-size: 14px;
}

@media (max-width: 1080px) {
    .udm-notices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .udm-notices {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   INTRO + "Join in the way that suits you"  (Task 7)
   ============================================================ */
.udm-intro {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 80px;
    align-items: end;
}

.udm-intro__lead {
    font-family: 'Archivo', sans-serif;
    font-stretch: 105%;
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.22;
    font-weight: 500;
    letter-spacing: -.015em;
    margin: 0;
}

.udm-intro__link {
    display: inline-block;
    margin-top: 26px;
    font-weight: 700;
    font-size: 17px;
    color: var(--udm-primary);
    text-decoration: none;
}

.udm-ways__title {
    font-size: 24px;
    margin-bottom: 12px;
}

/* .udm-intro scope keeps the row anchor above the base `.udm-v2 a` red. */
.udm-intro .udm-way {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 0;
    border-top: 1px solid var(--udm-border);
    text-decoration: none;
    color: var(--udm-ink);
}

.udm-intro .udm-way:hover {
    color: var(--udm-ink);
}

.udm-intro .udm-way:hover .udm-way__go {
    transform: translateX(6px);
}

.udm-way__icon {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.udm-way__icon--primary { background: var(--udm-primary); color: var(--udm-white); }
.udm-way__icon--accent  { background: var(--udm-accent);  color: var(--udm-accent-ink); }
.udm-way__icon--soft    { background: var(--udm-surface-2); color: var(--udm-ink); }

.udm-way__text strong {
    display: block;
    font-size: 19px;
}

.udm-way__text span {
    color: var(--udm-muted);
    font-size: 15px;
}

.udm-way__go {
    margin-left: auto;
    transition: transform .25s ease;
}

@media (max-width: 1080px) {
    .udm-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
}

/* ============================================================
   "Where UDM serves" map  (Task 8)
   ============================================================ */
.udm-mapsec__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.udm-mapsec__eyebrow {
    display: block;
    color: var(--udm-accent);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.udm-map__lead {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
    margin: 16px 0 0;
    max-width: 560px;
}

/* ---- Stat strip ---- */
.udm-map__seats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--udm-radius);
    overflow: hidden;
    margin-bottom: 34px;
}

.udm-map__seat {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, .03);
}

.udm-map__seat--hero {
    background: linear-gradient(135deg, rgba(211, 0, 15, .36), rgba(242, 183, 5, .14));
}

.udm-map__seat > span:nth-child(2) {
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
}

.udm-map__seatnum {
    font-size: 34px;
    line-height: 1;
    color: var(--udm-accent);
}

.udm-map__seatsplit {
    margin-top: 4px;
    color: rgba(255, 255, 255, .55);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: -.1px;
}

/* ---- Map + panel grid ---- */
.udm-mapgrid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    align-items: stretch;
}

.udm-map__wrap {
    position: relative;
    min-width: 0;
}

.udm-map__svg {
    width: 100%;
    max-width: 620px;
    display: block;
    margin: 0 auto;
    overflow: visible;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .45));
}

.udm-map__svg .cty {
    transition: fill .22s ease, filter .22s ease;
    vector-effect: non-scaling-stroke;   /* keep borders crisp while zooming */
    cursor: pointer;
}

/* Hover feedback via a filter only — never a transform, which would change the
   path geometry mid-click and cancel the click on SVG elements. */
.udm-map__svg .cty--served:hover,
.udm-map__svg .cty:hover {
    filter: brightness(1.12) drop-shadow(0 3px 8px rgba(0, 0, 0, .45));
}

.udm-map__label text { paint-order: stroke; }
.udm-map__label { transition: opacity .15s ease; }

.udm-map__hint {
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
    letter-spacing: .02em;
}

.udm-map__pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: udm-pulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes udm-pulse {
    from { transform: scale(1); opacity: .7; }
    to   { transform: scale(3.2); opacity: 0; }
}

/* ---- Side panel (blends with the map section — no card) ---- */
.udm-mappanel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 32px;
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.udm-mappanel__eyebrow {
    display: block;
    color: var(--udm-accent);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.udm-mappanel__name {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-stretch: 112%;
    font-weight: 800;
    font-size: 26px;
    margin: 6px 0 4px;
    color: #fff;
}

.udm-mappanel__info {
    display: block;
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    line-height: 1.5;
}

.udm-mappanel__list { margin-top: 24px; }

/* Leader names — clean two-column grid, no cards, no scroll */
.udm-mapnames {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 26px;
}

.udm-mapname {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    animation: udm-mapname-in .4s var(--udm-ease) both;
}

.udm-mapname:nth-child(2) { animation-delay: .05s; }
.udm-mapname:nth-child(3) { animation-delay: .10s; }
.udm-mapname:nth-child(4) { animation-delay: .15s; }
.udm-mapname:nth-child(5) { animation-delay: .20s; }
.udm-mapname:nth-child(6) { animation-delay: .25s; }

@keyframes udm-mapname-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.udm-mapname__ph {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .12);
}

.udm-mapname__ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.udm-mapname__txt {
    min-width: 0;
}

.udm-mapname__txt strong {
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 1.25;
}

.udm-mapname__txt span {
    display: block;
    color: var(--udm-accent);
    font-size: 13px;
    font-weight: 600;
    margin-top: 2px;
}

/* Default prompt (before a county is clicked) */
.udm-mapprompt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    color: rgba(255, 255, 255, .5);
    font-size: 15px;
}

.udm-mapprompt svg { color: var(--udm-accent); opacity: .8; }

.udm-mapempty {
    padding: 8px 0;
    color: rgba(255, 255, 255, .78);
}

.udm-mapempty p { margin: 0 0 16px; font-size: 16px; line-height: 1.5; }

@media (max-width: 1080px) {
    .udm-mapgrid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .udm-mappanel {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
        padding-left: 0;
        padding-top: 24px;
    }
}

@media (max-width: 520px) {
    .udm-mapnames { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   "What we stand for" manifesto panels  (Task 9)
   ============================================================ */
.udm-panels {
    display: flex;
    gap: 10px;
    height: 600px;
}

/* .udm-panels scope so colour beats the base `.udm-v2 button{color:inherit}` */
.udm-panels .udm-pnl {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    padding: 0;
    border-radius: var(--udm-radius);
    overflow: hidden;
    background: var(--udm-night);
    text-align: left;
    color: var(--udm-white);
    cursor: pointer;
    transition: flex-grow .8s var(--udm-ease);
}

.udm-pnl.on {
    flex-grow: 5;
}

/* Atmospheric photo layer (slow Ken Burns on the open panel) */
.udm-pnl__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    transition: transform 7s ease;
    will-change: transform;
}

.udm-pnl.on .udm-pnl__img {
    transform: scale(1.2);
}

.udm-pnl__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(20, 6, 8, .95) 8%, rgba(20, 6, 8, .32) 60%, rgba(20, 6, 8, .5)),
        linear-gradient(155deg, var(--pnl-color, #D3000F) -12%, rgba(30, 8, 10, 0) 58%);
}

.udm-pnl__vt {
    position: absolute;
    left: 24px;
    bottom: 28px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Archivo', sans-serif;
    font-stretch: 110%;
    font-weight: 700;
    font-size: 22px;
    white-space: nowrap;
    transition: opacity .3s;
}

.udm-pnl.on .udm-pnl__vt {
    opacity: 0;
}

.udm-pnl__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px;
    max-width: 640px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .45s ease .25s, transform .45s ease .25s;
}

.udm-pnl.on .udm-pnl__body {
    opacity: 1;
    transform: none;
}

/* Staggered text reveal when the panel opens */
.udm-pnl__title,
.udm-pnl__text,
.udm-pnl__cta {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s var(--udm-ease);
}

.udm-pnl.on .udm-pnl__title { opacity: 1; transform: none; transition-delay: .18s; }
.udm-pnl.on .udm-pnl__text  { opacity: 1; transform: none; transition-delay: .30s; }
.udm-pnl.on .udm-pnl__cta   { opacity: 1; transform: none; transition-delay: .42s; }

.udm-pnl__title {
    display: block;
    font-size: clamp(32px, 4vw, 48px);
}

.udm-pnl__text {
    display: block;
    font-size: 18px;
    line-height: 1.6;
    margin: 16px 0 22px;
    color: rgba(255, 255, 255, .88);
}

.udm-pnl__cta {
    display: inline-block;
    padding: 12px 20px;
    border-radius: var(--udm-radius-pill);
    background: var(--udm-accent);
    color: var(--udm-accent-ink);
    font-weight: 700;
    font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
    .udm-pnl__img { transition: none; }
    .udm-pnl.on .udm-pnl__img { transform: scale(1.06); }
}

@media (max-width: 1080px) {
    .udm-panels {
        flex-direction: column;
        height: auto;
    }

    .udm-pnl {
        min-height: 90px;
        flex: none;
        height: 90px;
        transition: height .7s var(--udm-ease);
    }

    .udm-pnl.on {
        height: 460px;
    }

    .udm-pnl__vt {
        writing-mode: horizontal-tb;
        transform: none;
        bottom: 30px;
    }

    .udm-pnl__body {
        max-width: none;
    }
}

/* ============================================================
   Party Leader quote + leadership grid  (Task 10)
   ============================================================ */
.udm-quote {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
    align-items: center;
}

.udm-emblem {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.udm-emblem__rays {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(242, 183, 5, .55) 0deg 2.5deg, rgba(242, 183, 5, 0) 2.5deg 9deg);
    -webkit-mask-image: radial-gradient(circle, transparent 0, transparent 30%, #000 31%, transparent 70%);
    mask-image: radial-gradient(circle, transparent 0, transparent 30%, #000 31%, transparent 70%);
    animation: udm-spin 120s linear infinite;
}

.udm-emblem__img {
    position: relative;
    width: 52%;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #000;
    box-shadow: 0 30px 60px rgba(30, 8, 10, .3);
}

.udm-quote__text {
    font-family: 'Archivo', sans-serif;
    font-stretch: 100%;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.18;
    letter-spacing: -.02em;
    margin: 0;
}

.udm-quote__by {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 34px;
    flex-wrap: wrap;
}

.udm-quote__avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--udm-primary);
    color: var(--udm-white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: none;
}

.udm-quote__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.udm-quote__name {
    font-weight: 700;
    font-size: 19px;
}

.udm-quote__role {
    color: var(--udm-muted);
}

.udm-quote__watch {
    margin-left: auto;
}

.udm-lead {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.udm-leadcard {
    display: block;
    text-decoration: none;
    color: var(--udm-ink);
}

.udm-leadcard__photo {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--udm-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--udm-surface-2);
    box-shadow: 0 2px 10px rgba(30, 8, 10, .08);
}

.udm-leadcard__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--udm-ease);
}

.udm-leadcard:hover .udm-leadcard__photo img {
    transform: scale(1.06);
}

.udm-leadcard__ini {
    font-size: clamp(48px, 6vw, 88px);
}

/* Category chip (top-left) */
.udm-leadcard__cat {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--udm-primary);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

/* Hover overlay revealing bio + view-profile affordance */
.udm-leadcard__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px;
    background: linear-gradient(0deg, rgba(20, 6, 8, .92) 12%, rgba(20, 6, 8, .35) 60%, rgba(20, 6, 8, 0));
    opacity: 0;
    transition: opacity .35s var(--udm-ease);
}

.udm-leadcard:hover .udm-leadcard__overlay,
.udm-leadcard:focus-visible .udm-leadcard__overlay {
    opacity: 1;
}

.udm-leadcard__bio {
    color: rgba(255, 255, 255, .92);
    font-size: 13.5px;
    line-height: 1.5;
    transform: translateY(10px);
    transition: transform .4s var(--udm-ease) .05s;
}

.udm-leadcard:hover .udm-leadcard__bio {
    transform: none;
}

.udm-leadcard__view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--udm-accent);
    color: var(--udm-accent-ink);
    font-weight: 800;
    font-size: 13.5px;
    transform: translateY(10px);
    transition: transform .4s var(--udm-ease) .12s;
}

.udm-leadcard:hover .udm-leadcard__view {
    transform: none;
}

.udm-leadcard__name {
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    margin-top: 16px;
}

.udm-leadcard__role {
    color: var(--udm-primary);
    font-weight: 600;
    font-size: 14px;
    margin-top: 4px;
}

@media (max-width: 1080px) {
    .udm-quote {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .udm-lead {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .udm-lead {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .udm-quote__watch {
        margin-left: 0;
    }
}

/* ============================================================
   UDM TV + "From the field" gallery  (Task 11)
   ============================================================ */
.udm-tv {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 28px;
}

.udm-ph {
    position: relative;
    overflow: hidden;
    border: 0;
    padding: 0;
    background: #2A1C1C;
    display: block;
    width: 100%;
    color: var(--udm-white);
    text-align: left;
    cursor: pointer;
}

.udm-ph > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s ease;
    filter: var(--udm-media-filter);
}

.udm-ph:hover > img {
    transform: scale(1.05);
}

.udm-ph--fallback::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 500px at 70% 10%, rgba(211, 0, 15, .45), transparent 60%), #2A1C1C;
}

.udm-play {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--udm-primary);
    box-shadow: 0 0 0 12px rgba(255, 255, 255, .18);
    transition: transform .25s ease;
}

.udm-ph:hover .udm-play {
    transform: scale(1.08);
}

.udm-tv__upnext {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.udm-tv__up {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: var(--udm-white);
}

.udm-tv__upthumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    background: #2A1C1C;
}

.udm-tv__upthumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--udm-media-filter);
}

.udm-tv__uptitle {
    display: block;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
}

.udm-tv__upmeta {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, .6);
    margin-top: 6px;
}

.udm-rail {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

.udm-rail > * {
    flex: 0 0 420px;
    scroll-snap-align: start;
}

.udm-ph__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px;
    font-weight: 600;
    background: linear-gradient(0deg, rgba(20, 6, 8, .85), rgba(20, 6, 8, 0));
}

@media (max-width: 1080px) {
    .udm-tv {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .udm-rail > * {
        flex-basis: 82%;
    }
}

/* ============================================================
   Lightbox (shared by videos + gallery)
   ============================================================ */
.udm-lb {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(20, 6, 8, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
}

.udm-lb.is-open {
    opacity: 1;
    visibility: visible;
}

.udm-lb__close { position: absolute; top: 20px; right: 20px; }
.udm-lb__prev  { position: absolute; left: 20px; top: 50%; margin-top: -26px; }
.udm-lb__next  { position: absolute; right: 20px; top: 50%; margin-top: -26px; }

.udm-lb__fig {
    margin: 0;
    max-width: 1180px;
    width: 100%;
    text-align: center;
}

.udm-lb__stage {
    position: relative;
}

.udm-lb__img {
    max-width: 100%;
    max-height: 78vh;
    border-radius: 16px;
    display: block;
    margin: 0 auto;
    filter: var(--udm-media-filter);
}

.udm-lb__video {
    position: relative;
    width: 100%;
    max-width: 1180px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--udm-white);
}

.udm-lb__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.udm-lb__cap {
    color: var(--udm-white);
    margin-top: 18px;
    font-size: 17px;
    font-weight: 600;
}

.udm-lb__count {
    color: rgba(255, 255, 255, .55);
    font-weight: 400;
    margin-left: 8px;
}

/* ============================================================
   Latest news  (Task 12)
   ============================================================ */
.udm-newsg {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 40px;
}

/* Keep news links ink, not the base red (udm-home.css loads after design) */
.udm-newsg a {
    color: var(--udm-ink);
    text-decoration: none;
}

.udm-news__feat {
    display: block;
}

.udm-news__featimg {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 20px;
    overflow: hidden;
    background: var(--udm-night);
}

.udm-news__featimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s ease;
}

.udm-news__feat:hover .udm-news__featimg img {
    transform: scale(1.04);
}

.udm-news__meta {
    margin-top: 22px;
    font-size: 14px;
    font-weight: 700;
    color: var(--udm-primary);
}

.udm-news__title {
    font-size: clamp(28px, 3.4vw, 38px);
    margin-top: 10px;
}

.udm-news__excerpt {
    font-size: 17px;
    line-height: 1.6;
    color: var(--udm-muted-2);
    margin: 14px 0 0;
    max-width: 640px;
}

.udm-share {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

.udm-share__label {
    font-size: 14px;
    color: var(--udm-muted);
    margin-right: 4px;
}

.udm-newslist {
    display: flex;
    flex-direction: column;
}

.udm-newsrow {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 20px;
    padding: 22px 0;
    border-top: 1px solid #E2DAD7;
}

.udm-newsrow:first-child {
    border-top: 0;
    padding-top: 0;
}

.udm-newsrow__thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: var(--udm-night);
    display: flex;
    align-items: center;
    justify-content: center;
}

.udm-newsrow__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.udm-newsrow__mono {
    font-size: 26px;
    color: var(--udm-accent);
}

.udm-newsrow__meta {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--udm-primary);
}

.udm-newsrow__title {
    display: block;
    font-size: 22px;
    margin-top: 8px;
}

@media (max-width: 1080px) {
    .udm-newsg {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================
   Become a member + M-Pesa donation  (Task 13)
   ============================================================ */
.udm-join {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 56px;
    align-items: start;
}

.udm-join__lead {
    font-size: 18px;
    line-height: 1.6;
    color: var(--udm-muted-2);
    margin: 20px 0 30px;
    max-width: 520px;
}

.udm-regtabs {
    margin-bottom: 26px;
}

.udm-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.udm-step {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--udm-border);
    width: 100%;
    align-items: start;
}

/* higher specificity than `.udm-step span` so the big number keeps its size */
.udm-step .udm-step__n {
    font-size: 34px;
    line-height: 1;
    color: var(--udm-primary);
}

.udm-step strong {
    display: block;
    font-size: 18px;
    color: var(--udm-ink);
    margin-bottom: 3px;
}

.udm-step span {
    color: var(--udm-muted-2);
    font-size: 15.5px;
    line-height: 1.55;
}

.udm-regcta {
    margin-top: 22px;
}

/* Donation card */
.udm-donate {
    position: relative;
    overflow: hidden;
    background: var(--udm-night);
    color: var(--udm-white);
    border-radius: 28px;
    padding: 44px;
}

.udm-donate__rays {
    position: absolute;
    right: -220px;
    top: -220px;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(242, 183, 5, .35) 0deg 3deg, rgba(242, 183, 5, 0) 3deg 10deg);
    -webkit-mask-image: radial-gradient(circle, #000 0, transparent 68%);
    mask-image: radial-gradient(circle, #000 0, transparent 68%);
    pointer-events: none;
}

.udm-donate__title {
    font-size: clamp(38px, 5vw, 52px);
    position: relative;
}

.udm-donate__desc {
    color: rgba(255, 255, 255, .78);
    margin: 14px 0 26px;
    line-height: 1.55;
    font-size: 17px;
    position: relative;
}

.udm-donate__freq {
    display: inline-flex;
    background: rgba(255, 255, 255, .08);
    border-radius: var(--udm-radius-pill);
    padding: 4px;
    margin-bottom: 20px;
    position: relative;
}

.udm-donate__freq button {
    border: 0;
    border-radius: var(--udm-radius-pill);
    padding: 10px 20px;
    font-weight: 700;
    font-size: 14px;
    background: transparent;
    color: var(--udm-white);
}

.udm-donate__freq button[aria-pressed="true"] {
    background: var(--udm-white);
    color: var(--udm-ink);
}

.udm-amounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
    position: relative;
}

.udm-amt {
    padding: 16px 6px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 17px;
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
    background: transparent;
    color: var(--udm-white);
    transition: background .2s;
}

.udm-amt[aria-pressed="true"] {
    background: var(--udm-accent);
    color: var(--udm-accent-ink);
    box-shadow: none;
}

.udm-donate__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    position: relative;
}

.udm-donate__phone {
    margin-bottom: 14px;
    position: relative;
}

.udm-donate__paybill {
    position: relative;
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
    line-height: 1.6;
}

.udm-donate__paybill strong {
    color: var(--udm-white);
}

@media (max-width: 1080px) {
    .udm-join {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
}

/* ============================================================
   Section background animations — aurora blobs + watermark
   (Join-in-the-way #1 and Become-a-member #6)
   ============================================================ */
.udm-joinwrap,
.udm-memberwrap {
    position: relative;
    overflow: hidden;
}

.udm-joinwrap__bg,
.udm-memberwrap__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.udm-joinwrap > .udm-wrap,
.udm-memberwrap > .udm-wrap {
    position: relative;
    z-index: 1;
}

/* Soft drifting colour blobs */
.udm-aurora {
    position: absolute;
    width: 46vw;
    height: 46vw;
    max-width: 640px;
    max-height: 640px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    will-change: transform;
}

.udm-aurora--a {
    top: -14%;
    left: -8%;
    background: radial-gradient(circle, rgba(211, 0, 15, .5), transparent 62%);
    animation: udm-aurora-a 20s ease-in-out infinite;
}

.udm-aurora--b {
    bottom: -18%;
    right: -10%;
    background: radial-gradient(circle, rgba(242, 183, 5, .42), transparent 62%);
    animation: udm-aurora-b 24s ease-in-out infinite;
}

.udm-memberwrap .udm-aurora { opacity: .32; }

@keyframes udm-aurora-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(8%, 10%) scale(1.14); }
}

@keyframes udm-aurora-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-10%, -8%) scale(1.18); }
}

/* Faded motto watermark behind the "join" section */
.udm-joinwrap__mark {
    position: absolute;
    right: -1%;
    bottom: -4%;
    font-family: 'Archivo', sans-serif;
    font-stretch: 118%;
    font-weight: 800;
    font-size: clamp(60px, 13vw, 200px);
    line-height: .9;
    letter-spacing: -.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(17, 17, 17, .05);
    white-space: nowrap;
    user-select: none;
    animation: udm-mark-drift 18s ease-in-out infinite;
}

@keyframes udm-mark-drift {
    0%, 100% { transform: translateY(0); opacity: .9; }
    50%      { transform: translateY(-10px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .udm-aurora,
    .udm-joinwrap__mark { animation: none !important; }
}

/* ============================================================
   UDM TV header — live button + lead
   ============================================================ */
.udm-tv__lead {
    color: rgba(255, 255, 255, .72);
    font-size: 17px;
    line-height: 1.5;
    margin: 12px 0 0;
    max-width: 520px;
}

.udm-tv__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.udm-tv__live {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.udm-tv__livedot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
    animation: udm-livepulse 1.8s ease-out infinite;
}

@keyframes udm-livepulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
    70%  { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .udm-tv__livedot { animation: none; }
}

/* ============================================================
   Home additions — achievements timeline, testimonials,
   events, newsletter band
   ============================================================ */

/* ---- Achievements timeline ---- */
.udm-timeline {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    position: relative;
    max-width: 840px;
}

.udm-timeline::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: linear-gradient(var(--udm-primary), var(--udm-accent));
}

.udm-tl {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 22px;
    padding: 0 0 34px;
}

.udm-tl:last-child { padding-bottom: 0; }

.udm-tl__marker {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--udm-white);
    border: 2px solid var(--udm-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    box-shadow: 0 6px 16px rgba(211, 0, 15, .15);
}

.udm-tl__icon {
    width: 26px;
    height: 26px;
    color: var(--udm-primary);
    display: inline-flex;
}

.udm-tl__icon svg { width: 100%; height: 100%; }

.udm-tl__content { padding-top: 3px; }

.udm-tl__year {
    display: inline-block;
    font-size: 22px;
    color: var(--udm-primary);
    line-height: 1;
}

.udm-tl__title {
    display: block;
    font-size: 19px;
    color: var(--udm-ink);
    font-weight: 800;
    margin-top: 3px;
}

.udm-tl__text {
    display: block;
    color: var(--udm-muted);
    font-size: 15px;
    line-height: 1.6;
    margin-top: 6px;
    max-width: 580px;
}

/* ---- Testimonials ---- */
.udm-tcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}

.udm-tcard {
    position: relative;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--udm-radius);
    padding: 30px 26px 24px;
    overflow: hidden;
}

.udm-tcard__mark {
    position: absolute;
    top: 2px;
    right: 22px;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 96px;
    line-height: 1;
    color: var(--udm-accent);
    opacity: .2;
    pointer-events: none;
}

.udm-tcard__quote {
    position: relative;
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .92);
    font-size: 17px;
    line-height: 1.6;
}

.udm-tcard__by {
    display: flex;
    align-items: center;
    gap: 12px;
}

.udm-tcard__ph {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 2px rgba(242, 183, 5, .4);
}

.udm-tcard__ph img { width: 100%; height: 100%; object-fit: cover; }

.udm-tcard__who strong { display: block; color: #fff; font-size: 15px; }

.udm-tcard__who span {
    display: block;
    color: var(--udm-accent);
    font-size: 13px;
    font-weight: 600;
    margin-top: 1px;
}

/* ---- Upcoming events ---- */
.udm-events {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.udm-event {
    display: flex;
    gap: 18px;
    background: var(--udm-white);
    border: 1px solid var(--udm-border);
    border-radius: var(--udm-radius);
    padding: 20px;
    transition: transform .25s var(--udm-ease), box-shadow .25s ease;
}

.udm-event:hover {
    transform: translateY(-3px);
    box-shadow: var(--udm-shadow);
}

.udm-event__date {
    flex: 0 0 66px;
    text-align: center;
    background: linear-gradient(160deg, var(--udm-primary), var(--udm-primary-dark));
    color: #fff;
    border-radius: 14px;
    padding: 12px 6px;
    height: fit-content;
}

.udm-event__day { display: block; font-size: 28px; line-height: 1; }

.udm-event__mon {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    margin-top: 4px;
}

.udm-event__body { min-width: 0; }

.udm-event__cat {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--udm-primary);
    background: var(--udm-surface);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 9px;
}

.udm-event__title {
    font-size: 19px;
    color: var(--udm-ink);
    margin: 0 0 6px;
    font-weight: 800;
    line-height: 1.25;
}

.udm-event__text {
    color: var(--udm-muted);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0 0 12px;
}

.udm-event__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.udm-event__meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--udm-muted);
    font-size: 14px;
}

.udm-event__meta svg { color: var(--udm-primary); flex: 0 0 auto; }

.udm-event__cta {
    font-weight: 700;
    color: var(--udm-primary);
    font-size: 14px;
    text-decoration: none;
}

.udm-event__cta:hover { color: var(--udm-primary-dark); }

/* ---- Newsletter band ---- */
.udm-nl {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--udm-primary), #8c0a12);
    border-radius: 28px;
    padding: 54px 40px;
    color: #fff;
    text-align: center;
}

.udm-nl__rays {
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(from 0deg at 86% 12%, rgba(255, 255, 255, .08) 0deg 3deg, rgba(255, 255, 255, 0) 3deg 10deg);
    pointer-events: none;
}

.udm-nl__text {
    position: relative;
    max-width: 640px;
    margin: 0 auto 26px;
}

.udm-nl__title {
    font-size: clamp(28px, 4vw, 42px);
    color: #fff;
    margin: 0 0 12px;
}

.udm-nl__lead {
    color: rgba(255, 255, 255, .9);
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
}

.udm-nl__form {
    position: relative;
    display: flex;
    gap: 10px;
    max-width: 640px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.udm-nl__input {
    flex: 1 1 200px;
    background: rgba(255, 255, 255, .96);
    border: 0;
    color: var(--udm-ink);
}

.udm-nl__btn { flex: 0 0 auto; }

.udm-nl__msg {
    position: relative;
    margin: 16px 0 0;
    font-size: 15px;
    font-weight: 600;
    min-height: 20px;
}

.udm-nl__msg.is-ok { color: #CFF5D8; }
.udm-nl__msg.is-err { color: #FFD9DC; }

@media (max-width: 760px) {
    .udm-events { grid-template-columns: minmax(0, 1fr); }
    .udm-nl { padding: 40px 22px; }
}

/* ============================================================
   Election track record — home summary cards
   ============================================================ */
.udm-elyears {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}

.udm-elyear {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--udm-white);
    border: 1px solid var(--udm-border);
    border-radius: var(--udm-radius);
    padding: 24px 22px 20px;
    text-decoration: none;
    color: var(--udm-ink);
    overflow: hidden;
    transition: transform .25s var(--udm-ease), box-shadow .25s ease, border-color .25s ease;
}

/* animated accent bar (top) */
.udm-elyear::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    z-index: 2;
    background: linear-gradient(90deg, var(--udm-primary), var(--udm-accent), var(--udm-primary));
    background-size: 200% 100%;
    background-position: 0 0;
}

.udm-elyear.is-zero::before { background: rgba(0, 0, 0, .14); }

/* faint watermark year in the card background */
.udm-elyear::after {
    content: attr(data-year);
    position: absolute;
    right: -8px; bottom: -22px;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-stretch: 118%;
    font-size: 92px;
    line-height: 1;
    letter-spacing: -.04em;
    color: rgba(211, 0, 15, .055);
    pointer-events: none;
    z-index: 0;
    transition: transform .35s var(--udm-ease), color .35s ease;
}
.udm-elyear.is-zero::after { color: rgba(30, 20, 20, .045); }

/* keep the card content above the watermark */
.udm-elyear > * { position: relative; z-index: 1; }

.udm-elyear:hover {
    transform: translateY(-4px);
    box-shadow: var(--udm-shadow);
    border-color: var(--udm-primary);
}
.udm-elyear:hover::after { transform: scale(1.07) translateY(-6px); color: rgba(211, 0, 15, .09); }
.udm-elyear:not(.is-zero):hover::before { animation: udm-elshine 1.1s linear infinite; }

@keyframes udm-elshine { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .udm-elyear:hover::before { animation: none; }
    .udm-elyear::after { transition: none; }
}

.udm-elyear__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 12px;
}

.udm-elyear__year { font-size: 34px; line-height: 1; color: var(--udm-ink); flex-shrink: 0; }

.udm-elyear__era {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--udm-surface);
    color: var(--udm-muted);
    white-space: nowrap;
}

.udm-elyear__total { font-size: 15px; color: var(--udm-muted); margin-bottom: 14px; }
.udm-elyear__total .udm-x { font-size: 22px; color: var(--udm-primary); margin-right: 3px; }

.udm-elyear__wins {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.udm-elchip {
    font-size: 12.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(211, 0, 15, .08);
    color: var(--udm-primary);
}
.udm-elchip--split {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    border-radius: 12px;
    line-height: 1.25;
}
.udm-elchip__split {
    font-size: 10.5px;
    font-weight: 600;
    opacity: .7;
}

.udm-elyear__none {
    font-size: 14px;
    color: var(--udm-muted);
    font-style: italic;
    margin-bottom: 16px;
}

.udm-elyear__go {
    margin-top: auto;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--udm-primary);
}