/*
 * Styles for procednew.php
 * Extracted from the PHP page without changing selectors or declaration order.
 */

/* Extracted from procednew.php - style block 1 */
/* =========================================================
   GLOBAL
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
}


/* =========================================================
   HERO CONTAINER
   ========================================================= */

.hero-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}


/* =========================================================
   FLASH NEWS
   ========================================================= */

.top-nav {
    width: 100%;
    background: #212167;
    position: relative;
    overflow: hidden;
}

.breakingNews {
    width: 100%;
    height: 40px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.bn-title h2 {
    margin: 0;
    font-size: 20px;
    color: #fff;
    white-space: nowrap;
}

.bn-red .bn-title {
    background: #f44a56;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.bn-title span {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 10px;
    border-color:
        transparent
        transparent
        transparent
        #f44a56;
    position: absolute;
    right: -10px;
    top: 0;
}

.news-ticker {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.news-track {
    white-space: nowrap;
    display: inline-block;
    padding-left: 100%;
    animation: ticker 40s linear infinite;
}

.news-track:hover {
    animation-play-state: paused;
}

.news-track a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    padding-left: 20px;
    white-space: nowrap;
}

@keyframes ticker {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }

}


/* =========================================================
   IMAGE
   ========================================================= */

.imagedata {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    overflow: visible;
}

.imagedata picture {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

.imagedata img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: block;
}


/* =========================================================
   WELCOME SECTION
   ========================================================= */

.df-welcome {
    display: none;
}


/* =========================================================
   BUTTON
   ========================================================= */

.btn-log {
    width: 100%;
    margin: 0;
    padding: 15px 30px 20px;
    background: #fff;
    text-align: center;
}

.btn-log .btn-data {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 14px 10px;
}


/* =========================================================
   MOBILE - ALL DEVICES
   320px TO 768px
   ========================================================= */

@media screen and (max-width: 768px) {

    html,
    body {
        width: 100%;
        min-width: 100%;
        margin: 0;
        padding: 0;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        display: block;
        min-height: 100vh;
        background: #fff;
    }


    /* ---------------------------------------------------------
       HEADER
       --------------------------------------------------------- */

    body > header {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }


    /* ---------------------------------------------------------
       HERO
       --------------------------------------------------------- */

    .hero-container {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }


    /* ---------------------------------------------------------
       FLASH NEWS
       --------------------------------------------------------- */

    .top-nav {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden;
    }

    .breakingNews {
        width: 100%;
        height: 60px;
    }

    .bn-red .bn-title {
        height: 60px;

        padding: 0 20px;

        font-size: clamp(16px, 5vw, 22px);
    }

    .bn-title h2 {
        font-size: clamp(18px, 5.5vw, 24px);
        line-height: 1;
    }

    .bn-title span {
        border-width: 30px 0 30px 15px;

        right: -15px;

        top: 0;
    }

    .news-ticker {
        height: 60px;
        min-width: 0;
    }

    .news-track a {
        font-size: clamp(13px, 4vw, 16px);
    }


    /* ---------------------------------------------------------
       FULL WIDTH IMAGE
       --------------------------------------------------------- */

    .imagedata {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        overflow: visible !important;
    }

    .imagedata picture {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;
    }

    .imagedata img {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        object-fit: initial !important;
    }


    /* ---------------------------------------------------------
       BUTTON
       --------------------------------------------------------- */

    .btn-log {
        width: 100% !important;

        margin: 0 !important;

        padding: 15px 20px 20px !important;

        background: #fff;

        position: relative !important;

        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        z-index: 10;
    }

    .btn-log .btn-data {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;

        padding: 14px 8px !important;

        font-size: clamp(16px, 4.5vw, 20px);

        line-height: 1.3;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   320px - 359px
   ========================================================= */

@media screen and (max-width: 359px) {

    .breakingNews {
        height: 40px;
    }

    .bn-red .bn-title {
        height: 52px;
        padding: 0 14px;
    }

    .bn-title h2 {
        font-size: 17px;
    }

    .bn-title span {
        border-width: 26px 0 26px 12px;
        right: -12px;
    }

    .news-ticker {
        height: 52px;
    }

    .news-track a {
        font-size: 12px;
    }

    .btn-log {
        padding: 10px 12px 15px !important;
    }

}


/* =========================================================
   SMALL MOBILE
   360px - 389px
   ========================================================= */

@media screen and (min-width: 360px) and (max-width: 389px) {

    .breakingNews {
        height: 56px;
    }

    .bn-red .bn-title {
        height: 56px;
        padding: 0 16px;
    }

    .bn-title h2 {
        font-size: 19px;
    }

    .bn-title span {
        border-width: 28px 0 28px 13px;
        right: -13px;
    }

    .news-ticker {
        height: 56px;
    }

}


/* =========================================================
   NORMAL MOBILE
   390px - 430px
   ========================================================= */

@media screen and (min-width: 390px) and (max-width: 430px) {

    .breakingNews {
        height: 60px;
    }

    .bn-red .bn-title {
        height: 60px;
        padding: 0 20px;
    }

    .bn-title h2 {
        font-size: 21px;
    }

    .bn-title span {
        border-width: 30px 0 30px 15px;
        right: -15px;
    }

}


/* =========================================================
   LARGE MOBILE / SMALL TABLET
   431px - 600px
   ========================================================= */

@media screen and (min-width: 431px) and (max-width: 600px) {

    .breakingNews {
        height: 60px;
    }

    .bn-red .bn-title {
        height: 60px;
        padding: 0 22px;
    }

    .bn-title h2 {
        font-size: 22px;
    }

}


/* =========================================================
   TABLET PORTRAIT
   601px - 768px
   ========================================================= */

@media screen and (min-width: 601px) and (max-width: 768px) {

    .breakingNews {
        height: 60px;
    }

    .bn-red .bn-title {
        height: 60px;
        padding: 0 25px;
    }

    .bn-title h2 {
        font-size: 24px;
    }

    .news-track a {
        font-size: 16px;
    }
 

    .btn-log {
        padding: 15px 30px 20px !important;
    }

    .btn-log .btn-data {
        max-width: 500px !important;
    }

}


/* =========================================================
   EXTRA SAFETY FOR MOBILE
   ========================================================= */

@media screen and (max-width: 768px) {

    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
    }

    img {
        max-width: 100%;
    }

}

/* =========================================================
   FINAL VIEWPORT FIX
   NO VERTICAL PAGE SCROLL + ANIMATED CTA BUTTON
   ========================================================= */

/* Keep the complete page inside the visible screen */
html,
body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
}

body {
    height: 100vh;
    height: 100dvh;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* Header must keep only the space it actually needs */
body > header {
    flex: 0 0 auto;
}

/* Hero takes only the remaining viewport height */
.hero-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

.top-nav,
.breakingNews {
    flex: 0 0 auto;
}

/* Image area automatically fits the remaining free space */
.imagedata {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto;
    background: #001a32;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.imagedata picture {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.imagedata img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Bottom button area stays inside viewport */
.btn-log {
    width: 100% !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 10px 16px 12px !important;
    background: #fff;
    text-align: center;
    position: relative !important;
    z-index: 20;
}

/* Modern animated CTA */
.btn-log .btn-data {
    position: relative;
    isolation: isolate;
    width: min(100%, 500px) !important;
    min-height: 54px;
    margin: 0 auto !important;
    padding: 14px 58px 14px 28px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    border: 0 !important;
    border-radius: 999px !important;
    overflow: hidden;

    color: #fff !important;
    text-decoration: none !important;
    font-size: clamp(15px, 2vw, 18px);
    font-weight: 700;
    letter-spacing: .25px;

    background:
        linear-gradient(120deg, #17175d 0%, #292993 48%, #f44a56 100%) !important;

    box-shadow:
        0 10px 24px rgba(33, 33, 103, .24),
        inset 0 1px 0 rgba(255, 255, 255, .22);

    transform: translateZ(0);
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        filter .28s ease;
}

/* Soft moving shine */
.btn-log .btn-data::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -70%;
    left: -45%;
    width: 34%;
    height: 240%;
    transform: rotate(22deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .12),
        rgba(255, 255, 255, .72),
        rgba(255, 255, 255, .12),
        transparent
    );
    animation: buttonShine 3s ease-in-out infinite;
}

/* Animated arrow */
.btn-log .btn-data::after {
    content: "→";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 25px;
    line-height: 1;
    font-weight: 700;
    animation: buttonArrow 1.15s ease-in-out infinite;
}

.btn-log .btn-data:hover,
.btn-log .btn-data:focus-visible {
    transform: translateY(-2px) scale(1.012);
    box-shadow:
        0 14px 30px rgba(33, 33, 103, .30),
        0 4px 14px rgba(244, 74, 86, .18);
    filter: saturate(1.08);
}

.btn-log .btn-data:active {
    transform: translateY(0) scale(.985);
}

.btn-log .btn-data:focus-visible {
    outline: 3px solid rgba(244, 74, 86, .28) !important;
    outline-offset: 3px;
}

@keyframes buttonShine {
    0%, 18% {
        left: -45%;
        opacity: 0;
    }

    28% {
        opacity: 1;
    }

    58% {
        left: 120%;
        opacity: 0;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}

@keyframes buttonArrow {
    0%, 100% {
        transform: translate(-2px, -50%);
    }

    50% {
        transform: translate(5px, -50%);
    }
}

/* Mobile viewport tuning */
@media screen and (max-width: 768px) {
    html,
    body {
        height: 100%;
        min-height: 100%;
        overflow: hidden !important;
    }

    body {
        height: 100vh;
        height: 100dvh;
        min-height: 0 !important;
    }

    .hero-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .imagedata,
    .imagedata picture {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .imagedata img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    .btn-log {
        flex: 0 0 auto !important;
        padding: 8px 14px calc(10px + env(safe-area-inset-bottom)) !important;
    }

    .btn-log .btn-data {
        width: 100% !important;
        max-width: 500px !important;
        min-height: 50px;
        padding: 12px 52px 12px 22px !important;
        font-size: clamp(14px, 4vw, 17px) !important;
        line-height: 1.2;
    }

    .btn-log .btn-data::after {
        right: 19px;
        font-size: 23px;
    }
}

/* Very short mobile screens */
@media screen and (max-width: 768px) and (max-height: 700px) {
    .breakingNews {
        height: 44px !important;
    }

    .bn-red .bn-title {
        height: 44px !important;
        padding: 0 14px !important;
    }

    .bn-title h2 {
        font-size: 17px !important;
    }

    .bn-title span {
        border-width: 22px 0 22px 11px !important;
        right: -11px !important;
    }

    .news-ticker {
        height: 44px !important;
    }

    .btn-log {
        padding-top: 6px !important;
        padding-bottom: calc(23px + env(safe-area-inset-bottom)) !important;
    }

    .btn-log .btn-data {
        min-height: 46px;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

/* Accessibility: avoid forced animation when user requests less motion */
@media (prefers-reduced-motion: reduce) {
    .btn-log .btn-data,
    .btn-log .btn-data::before,
    .btn-log .btn-data::after {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   FINAL IMAGE NO-CROP SAFEGUARD
   Entire hero artwork remains visible on desktop + mobile.
   ========================================================= */
.hero-container,
.imagedata,
.imagedata picture {
    min-height: 0 !important;
}

.imagedata {
    /*display: flex !important;*/
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

.imagedata picture {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.imagedata img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Mobile source also stays completely visible */
@media screen and (max-width: 768px) {
    .imagedata,
    .imagedata picture,
    .imagedata img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .imagedata img {
        height: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}


/* =========================================================
   DESKTOP / WEB RESTORE
   Keep web image/layout like the original code.
   Mobile (<= 768px) is intentionally NOT changed here.
   ========================================================= */
@media screen and (min-width: 769px) {

    html,
    body {
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        display: block !important;
        background: #fff !important;
    }

    .hero-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    .top-nav,
    .breakingNews {
        flex: none !important;
    }

    .imagedata {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .imagedata picture {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .imagedata img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        object-fit: initial !important;
        object-position: initial !important;
    }

    /* Keep redesigned animated CTA, but let it sit normally after the image */
    .btn-log {
        width: 100% !important;
        margin: 0 !important;
        padding: 15px 30px 20px !important;
        position: relative !important;
    }
}


/* =========================================================
   THE PEOPLE PROJECT IMAGE BUTTON
   ========================================================= */

.btn-log {
    width: 100%;
    margin: 0;
    padding: 15px 30px 20px;
    background: #fff;
    text-align: center;
}

.people-project-btn {
    position: relative !important;

    display: inline-block !important;

    width: min(100%, 500px) !important;

    margin: 0 auto !important;
    padding: 0 !important;

    border: 0 !important;
    outline: none !important;

    background: transparent !important;
    box-shadow: none !important;

    text-decoration: none !important;

    overflow: hidden;

    /* Arrow completely removed */
    font-size: 0;
    line-height: 0;

    cursor: pointer;
}


/* =========================================================
   IMAGE
   ========================================================= */

.people-project-image {
    display: block;

    width: 25%;
    max-width: 500px;

    height: auto;

    margin: 0 auto;
    padding: 0;

    border: 0;
    outline: none;

    object-fit: contain;

    cursor: pointer;

    /* truth3.jpeg must remain static */
    animation: none !important;

    transform: none !important;
    transform-origin: center center;

    transition: none !important;
}


/* =========================================================
   IMAGE ANIMATION
   ========================================================= */

@keyframes peopleProjectAnimation {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }

}


/* Hover */
.people-project-btn:hover .people-project-image {
    transform: none !important;
}


/* =========================================================
   REMOVE ALL ARROW / PSEUDO ELEMENTS
   ========================================================= */

.people-project-btn::before,
.people-project-btn::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 768px) {

    .btn-log {
        width: 100% !important;

      
    }

    .people-project-btn {
        width: 100% !important;
        max-width: 500px !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }

    .people-project-image {
        /* Same clean size on all mobile screens */
        width: 150px !important;
        max-width: calc(100vw - 24px) !important;

        height: auto !important;
        max-height: none !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;

        animation: none !important;
        transform: none !important;
        transition: none !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 380px) {

    .btn-log {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .people-project-image {
        width: 150px !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }

}


/* =========================================================
   VERY SHORT MOBILE
   ========================================================= */

@media screen and (max-width: 768px) and (max-height: 700px) {

    .btn-log {
        padding-top: 6px !important;
        padding-bottom:
            calc(7px + env(safe-area-inset-bottom))
            !important;
    }

    .people-project-image {
        width: 150px !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        max-height: none !important;

        margin: 0 auto !important;
        object-fit: contain !important;

        animation: none !important;
        transform: none !important;
        transition: none !important;
    }

}


/* =========================================================
   MOBILE IMAGE - FULL WIDTH / NO BACKGROUND
   ========================================================= */
@media screen and (max-width: 768px) {
    .imagedata {
        width: 100% !important;
        height: auto !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .imagedata picture {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        background: transparent !important;
    }

    .imagedata img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
        background: transparent !important;
    }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .people-project-image {
        animation: none !important;
        transition: none !important;
    }

}


/* =========================================================
   FINAL RESPONSIVE truth3.jpeg FIX
   IMPORTANT: Keep this block at the VERY END of <style>.
   Mobile only. Desktop/tablet remain unchanged.
   ========================================================= */

/* Disable animation permanently for truth3.jpeg */
.people-project-image,
.people-project-btn:hover .people-project-image,
.people-project-btn:focus .people-project-image,
.people-project-btn:active .people-project-image {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

/* Extra Small Mobile - 320px and below */
@media screen and (max-width: 320px) {
    .btn-log {
        width: 100% !important;
        height: 92px !important;
        min-height: 92px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .btn-log a,
    .people-project-btn {
        width: 140px !important;
        height: 72px !important;
        max-width: 140px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .people-project-image {
        width: 140px !important;
        height: 72px !important;
        max-width: 140px !important;
        max-height: 72px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* Small Mobile - 321px to 375px */
@media screen and (min-width: 321px) and (max-width: 375px) {
    .btn-log {
        width: 100% !important;
        height: 96px !important;
        min-height: 96px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .btn-log a,
    .people-project-btn {
        width: 150px !important;
        height: 76px !important;
        max-width: 150px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .people-project-image {
        width: 150px !important;
        height: 76px !important;
        max-width: 150px !important;
        max-height: 76px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* Mobile - 376px to 425px */
@media screen and (min-width: 376px) and (max-width: 425px) {
    .btn-log {
        width: 100% !important;
        height: 100px !important;
        min-height: 100px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .btn-log a,
    .people-project-btn {
        width: 160px !important;
        height: 80px !important;
        max-width: 160px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .people-project-image {
        width: 160px !important;
        height: 80px !important;
        max-width: 160px !important;
        max-height: 80px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* Large Mobile - 426px to 575px */
@media screen and (min-width: 426px) and (max-width: 575px) {
    .btn-log {
        width: 100% !important;
        height: 104px !important;
        min-height: 104px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .btn-log a,
    .people-project-btn {
        width: 170px !important;
        height: 84px !important;
        max-width: 170px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .people-project-image {
        width: 170px !important;
        height: 84px !important;
        max-width: 170px !important;
        max-height: 84px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* Common safety for ALL mobile devices */
@media screen and (max-width: 575px) {
    body {
        overflow-x: hidden !important;
    }

    .btn-log {
        box-sizing: border-box !important;
        background: #fff !important;
        text-align: center !important;
    }

    .btn-log a,
    .people-project-btn {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    .people-project-image {
        position: static !important;
        float: none !important;
        border: 0 !important;
        outline: 0 !important;
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}


/* =========================================================
   FINAL MOBILE-ONLY FIX
   Remove the white area contained at the bottom of webdate.jpeg
   Desktop / Web view remains unchanged.
   ========================================================= */

@media screen and (max-width: 768px) {

    /* Crop only the mobile hero image */
    .imagedata {
        width: 100% !important;
        height: 138vw !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #061a2e !important;
        display: block !important;
    }

    .imagedata picture {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: hidden !important;
        background: #061a2e !important;
    }

    .imagedata img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        object-fit: cover !important;
        object-position: top center !important;
        background: #061a2e !important;
    }

    /* Truth section */
    .btn-log {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 5px 0 7px !important;
        background: #061a2e !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .btn-log > a,
    .btn-log .people-project-btn {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .people-project-image {
        width: 65px !important;
        height: auto !important;
        max-width: 65px !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}

/* 320px - 380px */
@media screen and (max-width: 380px) {

    .imagedata {
        height: 138vw !important;
    }

    .btn-log {
        padding: 4px 0 6px !important;
        background: #061a2e !important;
    }

    .people-project-image {
        width: 60px !important;
        max-width: 60px !important;
    }
}

/* 381px - 768px */
@media screen and (min-width: 381px) and (max-width: 768px) {

    .imagedata {
        height: 138vw !important;
    }

    .btn-log {
        padding: 5px 0 7px !important;
        background: #061a2e !important;
    }

    .people-project-image {
        width: 65px !important;
        max-width: 65px !important;
    }
}


/* =========================================================
   FINAL MOBILE ONLY FIX
   - Keep 4-side border of webdate.jpeg visible
   - Crop only the unwanted bottom white area
   - Increase truth3.jpeg size
   - Desktop / Web view remains unchanged
   ========================================================= */

@media screen and (max-width: 768px) {

    /* Mobile hero: keep full width and crop only from bottom */
    .imagedata {
        width: 100% !important;
        height: 138vw !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #061a2e !important;
        display: block !important;
    }

    .imagedata picture {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    .imagedata img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;

        /* Do NOT use cover: it can cut the left/right border */
        object-fit: initial !important;
        object-position: top center !important;
    }

    /* Bottom truth section */
    .btn-log {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 6px 0 8px !important;
        background: #061a2e !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .btn-log > a,
    .btn-log .people-project-btn {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: transparent !important;
        overflow: visible !important;
    }

    /* Increased truth3.jpeg size */
    .people-project-image {
        width: 105px !important;
        height: auto !important;
        max-width: 105px !important;
        max-height: none !important;

        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;

        object-fit: contain !important;
        object-position: center center !important;

        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 380px) {

    .imagedata {
        height: 138vw !important;
    }

    .btn-log {
        padding: 5px 0 7px !important;
        background: #b87612!important;
    }

    .people-project-image {
        width: 95px !important;
        max-width: 95px !important;
    }
}


/* =========================================================
   381px - 768px
   ========================================================= */

@media screen and (min-width: 381px) and (max-width: 768px) {

    .imagedata {
        height: 138vw !important;
    }

    .btn-log {
        padding: 6px 0 8px !important;
        background: #b87612 !important;
    }

    .people-project-image {
        width: 105px !important;
        max-width: 105px !important;
    }
}


/* =========================================================
   PEOPLE REPORT DATA - WEB + MOBILE
   Existing body images are replaced by report data.
   ========================================================= */

.people-report-content {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 18px 24px 24px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.people-report-title {
    margin: 0 0 18px !important;
    padding: 0 !important;
    text-align: center !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(28px, 3vw, 42px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

.people-report-main {
    width: min(100%, 850px) !important;
    margin: 0 auto !important;
    /*display: grid !important;*/
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    column-gap: 40px !important;
}

.people-report-visual {
    min-height: 260px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.justice-icon {
    font-family: "Times New Roman", serif !important;
    font-size: clamp(150px, 18vw, 260px) !important;
    line-height: .8 !important;
    color: #a96d18 !important;
    transform: scaleX(.78) !important;
    user-select: none !important;
}

.people-report-score {
    text-align: center !important;
}

.people-report-percentage {
    color: #df2b21 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(56px, 7vw, 92px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.people-report-percentage span {
    /*font-size: .42em !important;*/
    vertical-align: top !important;
    margin-left: 2px !important;
}

.people-report-caption {
    margin-top: 8px !important;
    color: #14274a !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(14px, 1.5vw, 20px) !important;
    font-weight: 400 !important;
}

.people-report-options {
    width: min(100%, 850px) !important;
    margin: 18px auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.people-report-option {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #172747 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
}

.people-report-option input {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    margin: 0 !important;
    border: 2px solid #24395d !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.people-report-option input:checked {
    box-shadow: inset 0 0 0 4px #fff !important;
    background: #24395d !important;
}

/* Mobile */
@media screen and (max-width: 768px) {

    .people-report-content {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 12px 20px 18px !important;
        background: #fff !important;
        overflow: visible !important;
    }

    .people-report-title {
        margin: 0 0 14px !important;
        font-size: clamp(25px, 7vw, 32px) !important;
    }

    .people-report-main {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 8px !important;
    }

    .people-report-visual {
        min-height: 215px !important;
    }

    .justice-icon {
        font-size: clamp(135px, 40vw, 185px) !important;
    }

    .people-report-percentage {
        font-size: clamp(50px, 15vw, 70px) !important;
    }

    .people-report-caption {
        margin-top: 6px !important;
        font-size: 12px !important;
    }

    .people-report-options {
        width: 100% !important;
        margin: 12px auto 0 !important;
        gap: 6px !important;
    }

    .people-report-option {
        gap: 9px !important;
        font-size: 14px !important;
    }

    .people-report-option input {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
    }
}

/* Small mobile */
@media screen and (max-width: 380px) {

    .people-report-content {
        padding: 0px 2px 2px !important;
    }

    .people-report-title {
        font-size: 25px !important;
        margin-bottom: 12px !important;
    }

    .people-report-visual {
        min-height: 200px !important;
    }

    .justice-icon {
        font-size: 130px !important;
    }

    .people-report-percentage {
        font-size: 48px !important;
    }

    .people-report-caption {
        font-size: 11px !important;
    }

    .people-report-option {
        font-size: 13px !important;
    }
}

/* Desktop */
@media screen and (min-width: 769px) {
    .people-report-content {
        min-height: 430px !important;
    }
}


/* =========================================================
   NEW1.PNG - INCREASE IMAGE SIZE
   ========================================================= */

.mobile-report-logo {
    width: 280px !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Mobile */
@media screen and (max-width: 768px) {
    .mobile-report-logo {
        width: 172px !important;
        max-width: calc(100vw - 30px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }
}

/* Small mobile */
@media screen and (max-width: 380px) {
    .mobile-report-logo {
        width: 122px !important;
        max-width: calc(100vw - 24px) !important;
    }
}


/* =========================================================
   NEW1.PNG SIZE + VERTICAL LINE BETWEEN LOGO AND TITLE
   ========================================================= */

/* Smaller logo */
.mobile-report-logo {
    width: 190px !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Center vertical line between top logo and The People Report */
.people-report-logo-divider {
    width: 2px !important;
    height: 28px !important;
    margin: 6px auto 8px !important;
    background: #000 !important;
    display: block !important;
}

/* Mobile */
@media screen and (max-width: 768px) {
    .mobile-report-logo {
        width: 150px !important;
        max-width: calc(100vw - 30px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .people-report-logo-divider {
        width: 2px !important;
        height: 24px !important;
        margin: 5px auto 7px !important;
    }
}

/* Small mobile */
@media screen and (max-width: 380px) {
    .mobile-report-logo {
        width: 140px !important;
        max-width: calc(100vw - 24px) !important;
    }

    .people-report-logo-divider {
        height: 22px !important;
        margin: 4px auto 6px !important;
    }
}


/* =========================================================
   HORIZONTAL LINE BETWEEN TOP LOGO AND THE PEOPLE REPORT
   ========================================================= */

.people-report-logo-divider {
    width: 220px !important;
    height: 2px !important;
    margin: 7px auto 9px !important;
    background: #000 !important;
    display: block !important;
}

@media screen and (max-width: 768px) {
    .people-report-logo-divider {
        width: 180px !important;
        height: 2px !important;
        margin: 5px auto 7px !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-logo-divider {
        width: 160px !important;
        height: 2px !important;
        margin: 4px auto 6px !important;
    }
}


/* =========================================================
   FULL VIEWPORT-WIDTH HORIZONTAL LINE BELOW TOP LOGO
   ========================================================= */

.people-report-logo-divider {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 2px !important;
    margin: 7px 0 9px !important;
    margin-left: calc(50% - 50vw) !important;
    padding: 0 !important;
    background: #000 !important;
    display: block !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 768px) {
    .people-report-logo-divider {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 2px !important;
        margin: 5px 0 7px !important;
        margin-left: calc(50% - 50vw) !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-logo-divider {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 2px !important;
        margin: 4px 0 6px !important;
        margin-left: calc(50% - 50vw) !important;
    }
}



/* =========================================================
   FINAL MOBILE UPDATE
   - Increase Assets/Logo/new1.png size on mobile
   - Increase radio button text size
   - Desktop/Web remains unchanged
   ========================================================= */

@media screen and (max-width: 768px) {
    .mobile-report-logo {
        width: 220px !important;
        max-width: calc(100vw - 24px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .people-report-option {
        font-size: 18px !important;
        line-height: 1.35 !important;
        gap: 11px !important;
    }

    .people-report-option input {
        width: 21px !important;
        height: 21px !important;
        min-width: 21px !important;
    }
}

@media screen and (max-width: 380px) {
    .mobile-report-logo {
        width: 205px !important;
        max-width: calc(100vw - 20px) !important;
    }

    .people-report-option {
        font-size: 17px !important;
        line-height: 1.35 !important;
    }

    .people-report-option input {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
    }
}



/* =========================================================
   FINAL PEOPLE REPORT BOX + TEXT SIZE UPDATE
   - The People Report + Truth in our Democracy in one box
   - Truth in our Democracy centered and bold
   - Radio text increased
   ========================================================= */

.people-report-heading-box {
    width: min(100%, 760px) !important;
    margin: 0 auto 22px !important;
    padding: 20px 24px 18px !important;
    text-align: center !important;
    /*background: #fff !important;*/
    border: 2px solid #172747 !important;
    border-radius: 14px !important;
    box-shadow: 0 5px 16px rgba(23, 39, 71, .12) !important;
    box-sizing: border-box !important;
}

.people-report-heading-box .people-report-title {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: clamp(30px, 3.2vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.people-report-heading-box .people-report-caption {
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    color: #14274a !important;
    font-size: clamp(20px, 2vw, 27px) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.people-report-option {
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    gap: 12px !important;
}

.people-report-option input {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
}

@media screen and (max-width: 768px) {
    .people-report-heading-box {
        width: 70% !important;
        margin: 16px auto 18px !important;
        padding: 16px 14px 15px !important;
        border-width: 2px !important;
        border-radius: 12px !important;
    }

    .people-report-heading-box .people-report-title {
        font-size: clamp(27px, 8vw, 34px) !important;
    }

    .people-report-heading-box .people-report-caption {
        margin-top: 8px !important;
        font-size: clamp(19px, 5.5vw, 25px) !important;
        font-weight: 800 !important;
        text-align: center !important;
    }

    .people-report-option {
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        gap: 11px !important;
    }

    .people-report-option input {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-heading-box {
        padding: 14px 10px 13px !important;
        margin-bottom: 16px !important;
    }

    .people-report-heading-box .people-report-title {
        font-size: 27px !important;
    }

    .people-report-heading-box .people-report-caption {
        font-size: 24px !important;
    }

    .people-report-option {
        font-size: 19px !important;
    }

    .people-report-option input {
        width: 21px !important;
        height: 21px !important;
        min-width: 21px !important;
    }
}



/* =========================================================
   FINAL PEOPLE REPORT DROPDOWN + DIVIDER SPACING
   ========================================================= */

/* Remove all top padding around the logo/divider area */
.people-report-content {
    padding-top: 0 !important;
}

/* Logo divider: no padding and minimum spacing */
.people-report-logo-divider {
    margin-top: 0 !important;
    margin-bottom: 3px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Dropdown below the percentage */
.people-report-dropdown {
    width: min(100%, 850px) !important;
    margin: 14px auto 0 !important;
    position: relative !important;
}

.people-report-dropdown-toggle {
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border: 2px solid #172747 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #172747 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

/* Left-side dropdown icon */
.people-report-dropdown-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #172747 !important;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    transition: transform .2s ease !important;
}

/* Rotate icon when dropdown is open */
.people-report-dropdown-toggle[aria-expanded="true"] .people-report-dropdown-icon {
    transform: rotate(180deg) !important;
}

/* Hidden by default */
.people-report-options[hidden] {
    display: none !important;
}

/* Open radio options */
.people-report-dropdown .people-report-options {
    width: 100% !important;
    margin: 7px 0 0 !important;
    padding: 10px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    border: 1px solid #d7dce5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 12px rgba(23, 39, 71, .10) !important;
}

.people-report-dropdown .people-report-option {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 7px 4px !important;
    color: #172747 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

.people-report-dropdown .people-report-option input {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    margin: 0 !important;
}

@media screen and (max-width: 768px) {
    .people-report-content {
        padding-top: 0 !important;
    }

    .people-report-logo-divider {
        margin-top: 0 !important;
        margin-bottom: 2px !important;
        padding: 0 !important;
    }

    .people-report-dropdown {
        margin-top: 10px !important;
    }

    .people-report-dropdown-toggle {
        min-height: 48px !important;
        padding: 8px 12px !important;
        font-size: 18px !important;
    }

    .people-report-dropdown-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        font-size: 20px !important;
    }

    .people-report-dropdown .people-report-options {
        padding: 8px 10px !important;
        gap: 5px !important;
    }

    .people-report-dropdown .people-report-option {
        padding: 6px 2px !important;
        font-size: 17px !important;
        gap: 9px !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-dropdown {
        margin-top: 8px !important;
    }

    .people-report-dropdown-toggle {
        min-height: 45px !important;
        font-size: 17px !important;
    }

    .people-report-dropdown .people-report-option {
        font-size: 16px !important;
    }
}



/* =========================================================
   FINAL MOBILE PEOPLE REPORT DESIGN
   ========================================================= */
.mobile-report-arrow-btn {
    display: none !important;
}

.people-report-modal-content {
    border: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.people-report-modal-content .modal-header {
    background: #172747 !important;
    color: #fff !important;
    border-bottom: 0 !important;
}

.people-report-modal-content .modal-title {
    font-weight: 700 !important;
}

.people-report-modal-content .btn-close {
    filter: brightness(0) invert(1);
}

.people-report-modal-content .modal-body {
    padding: 18px !important;
}

.people-report-modal-content .people-report-option {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
    padding: 10px 6px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}

@media screen and (max-width: 768px) {
    /* Better heading box */
    .people-report-heading-box {
        width: 80% !important;
        margin: 0 auto 14px !important;
        padding: 10px 12px !important;
        border: 1px solid #172747 !important;
        border-radius: 10px !important;
               background: linear-gradient(180deg, #172747 0%, #172747 100%) !important;
        box-shadow: 0 3px 10px rgba(23, 39, 71, .10) !important;
    }

    .people-report-heading-box .people-report-title {
        font-size: 22px !important;
        line-height: 1.15 !important;
        letter-spacing: .2px !important;
    }

    /* Keep logo centered and increase its size */
    .mobile-report-logo {
        width: 220px !important;
        max-width: calc(100vw - 30px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* Image first, then percentage row */
    .people-report-main {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .people-report-visual {
        width: 100% !important;
    }

    /* Arrow left + percentage/caption right */
    .people-report-score {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 54px 1fr !important;
        align-items: center !important;
        column-gap: 8px !important;
        text-align: right !important;
        padding: 4px 2px 0 !important;
    }

    .mobile-report-arrow-btn {
        display: inline-flex !important;
        width: 46px !important;
        height: 46px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #172747 !important;
        color: #fff !important;
        box-shadow: 0 4px 10px rgba(23,39,71,.20) !important;
        cursor: pointer !important;
    }

    .mobile-report-arrow-btn span {
        display: block !important;
        font-size: 28px !important;
        line-height: 1 !important;
        transform: translateY(-2px) !important;
    }

    .people-report-percentage {
        text-align: right !important;
        font-size: 48px !important;
        line-height: .95 !important;
        margin: 0 !important;
    }

    .people-report-caption {
        grid-column: 2 !important;
        text-align: right !important;
        margin: 3px 0 0 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;
    }

    /* Desktop dropdown stays available on desktop, hidden on mobile */
    .people-report-dropdown {
        display: none !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-heading-box .people-report-title {
        font-size: 20px !important;
    }

    .mobile-report-logo {
        width: 210px !important;
        max-width: calc(100vw - 24px) !important;
    }

    .people-report-score {
        grid-template-columns: 50px 1fr !important;
    }

    .mobile-report-arrow-btn {
        width: 43px !important;
        height: 43px !important;
    }

    .people-report-percentage {
        font-size: 44px !important;
    }

    .people-report-caption {
        font-size: 15px !important;
    }
}


/* FINAL MOBILE PEOPLE REPORT OVERRIDES */
@media screen and (max-width: 768px) {
    .mobile-report-logo { width: 220px !important; max-width: calc(100vw - 24px) !important; height: auto !important; }
    .mobile-people-report-controls { width:100% !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; }
    .mobile-people-report-arrow { width:34px !important; height:34px !important; min-width:34px !important; padding:0 !important; border:1px solid #222 !important; border-radius:4px !important; background:#fff !important; color:#222 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:20px !important; line-height:1 !important; box-shadow:none !important; }
    .mobile-people-report-score { margin-left:auto !important; text-align:right !important; flex:0 0 auto !important; }
    .mobile-people-report-score .people-report-percentage { font-size:52px !important; line-height:.95 !important; }
    .mobile-people-report-score .people-report-caption { font-size:20px !important; line-height:1.2 !important; white-space:nowrap !important; }
}
@media screen and (max-width:380px) {
    .mobile-report-logo { width:205px !important; max-width:calc(100vw - 24px) !important; }
    .mobile-people-report-score .people-report-percentage { font-size:46px !important; }
    .mobile-people-report-score .people-report-caption { font-size:20px !important; }
}


/* =========================================================
   FINAL MOBILE PEOPLE REPORT POSITION + LOGO SIZE
   ========================================================= */
@media screen and (max-width: 768px) {

    /* Increase the People Report top logo */
    .mobile-report-logo {
        width: 230px !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
    }

    /* Percentage LEFT, simple dropdown arrow RIGHT */
    .mobile-people-report-controls {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .mobile-people-report-score {
        order: 1 !important;
        margin: 0 !important;
        text-align: left !important;
        flex: 1 1 auto !important;
    }

    .mobile-people-report-arrow {
        order: 2 !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        padding: 0 !important;
        margin-left: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #222 !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }

    .mobile-people-report-arrow:focus,
    .mobile-people-report-arrow:active {
        outline: none !important;
        box-shadow: none !important;
    }

    .mobile-people-report-score .people-report-percentage {
        font-size: 55px !important;
        line-height: .95 !important;
        text-align: left !important;
    }

    .mobile-people-report-score .people-report-caption {
        font-size: 15px !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }
}

@media screen and (max-width: 380px) {
    .mobile-report-logo {
        width: 215px !important;
        max-width: calc(100vw - 18px) !important;
    }

    .mobile-people-report-score .people-report-percentage {
        font-size: 48px !important;
    }
}



/* =========================================================
   FINAL MOBILE PEOPLE REPORT LAYOUT
   - Percentage LEFT
   - Arrow RIGHT
   - Truth in our Democracy CENTERED BELOW IMAGE
   - Mobile only; desktop unchanged
   ========================================================= */
@media screen and (max-width: 768px) {

    .people-report-main {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .mobile-report-logo {
        width: 230px !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto 4px !important;
    }

    .people-report-score {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        column-gap: 10px !important;
        row-gap: 2px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        text-align: left !important;
    }

    .people-report-percentage {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        color: #df2b21 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 55px !important;
        font-weight: 800 !important;
        line-height: .95 !important;
        letter-spacing: -1px !important;
    }

    .mobile-report-arrow-btn {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: inline-flex !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #172747 !important;
        box-shadow: none !important;
        cursor: pointer !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .mobile-report-arrow-btn span {
        display: block !important;
        font-size: 34px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        transform: translateY(-3px) !important;
    }

    .people-report-caption {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
        text-align: center !important;
        color: #14274a !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: .2px !important;
    }
}

@media screen and (max-width: 380px) {

    .mobile-report-logo {
        width: 215px !important;
        max-width: calc(100vw - 18px) !important;
    }

    .people-report-percentage {
        font-size: 48px !important;
    }

    .mobile-report-arrow-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    .mobile-report-arrow-btn span {
        font-size: 30px !important;
    }

    .people-report-caption {
        font-size: 17px !important;
    }
}



/* =========================================================
   FINAL MOBILE FIX
   - Percentage CENTER
   - Arrow remains RIGHT
   - Everything else unchanged
   - Mobile only
   ========================================================= */
@media screen and (max-width: 768px) {

    .people-report-score {
        width: 100% !important;
        position: relative !important;
        margin: 0 !important;
        text-align: center !important;
        display: block !important;
    }

    .people-report-score .people-report-percentage {
        width: 100% !important;
        display: block !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .mobile-report-arrow-btn {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }

    .mobile-report-arrow-btn span {
        display: inline-block !important;
    }
}

@media screen and (max-width: 380px) {

    .people-report-score .people-report-percentage {
        text-align: center !important;
    }

    .mobile-report-arrow-btn {
        right: 0 !important;
    }
}


/* =========================================================
   FINAL MOBILE PEOPLE REPORT SPACING + CAPTION SIZE
   ========================================================= */
@media screen and (max-width: 768px) {

    /* Add visible gap between the top line and the People Report title box */
    .people-report-heading-box {
        margin-top: 12px !important;
    }

    /* Increase Truth in our Democracy text */
    .people-report-caption {
        font-size: 20px !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-heading-box {
        margin-top: 10px !important;
    }

    .people-report-caption {
        font-size: 20px !important;
    }
}



/* =========================================================
   FINAL MOBILE FIX - TRUTH IN OUR DEMOCRACY TITLE 25PX
   Desktop / Web view remains unchanged.
   ========================================================= */
@media screen and (max-width: 768px) {
    .people-report-caption {
        font-size: 25px !important;
        line-height: 1.25 !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-caption {
        font-size: 25px !important;
        line-height: 1.25 !important;
    }
}



/* =========================================================
   FINAL MOBILE TRIANGLE DROPDOWN ICON
   Replace the old down-chevron with a clean triangle.
   ========================================================= */
@media screen and (max-width: 768px) {
    .mobile-report-arrow-btn span {
        width: 0 !important;
        height: 0 !important;
        display: block !important;
        border-left: 9px solid transparent !important;
        border-right: 9px solid transparent !important;
        border-top: 12px solid #172747 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        transform: none !important;
    }
}

@media screen and (max-width: 380px) {
    .mobile-report-arrow-btn span {
        border-left-width: 8px !important;
        border-right-width: 8px !important;
        border-top-width: 10px !important;
    }
}


/* =========================================================
   PEOPLE REPORT / CHANGE MAKERS CSS FIX
   Added without removing the original design.
   ========================================================= */

.people-report-content {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 24px 24px;
    background: #fff;
    box-sizing: border-box;
}

.people-report-heading-box {
    width: min(100%, 850px);
    margin: 0 auto 16px;
    padding: 14px 20px;
    background: #212167;
    border-radius: 12px;
    box-sizing: border-box;
}

.people-report-title {
    margin: 0 !important;
    color: #fff !important;
    text-align: center !important;
    font-size: clamp(24px, 3vw, 38px) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.cm-search-panel {
    width: min(100%, 850px);
    margin: 0 auto 12px;
    position: relative;
    z-index: 5;
}

.cm-filter-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #f1f3f5;
    border: 1px solid #e1e5e8;
    border-radius: 12px;
    box-sizing: border-box;
}

.cm-az-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}

.cm-az-nav::-webkit-scrollbar {
    display: none;
}

.cm-az-btn {
    flex: 0 0 auto;
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    border: 0;
    border-radius: 7px;
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .18s ease;
}

.cm-az-btn:hover,
.cm-az-btn.active {
    background: #212167;
    color: #fff;
}

.cm-search-toggle,
.cm-search-back,
.cm-search-clear {
    border: 0;
    cursor: pointer;
}

.cm-search-toggle {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #212167;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.truism-search-wrap {
    width: 100%;
    display: none;
    align-items: center;
    gap: 8px;
}

.truism-search-wrap.active,
.truism-search-wrap.search-open {
    display: flex;
}

.cm-search-back {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background: #f1f3f5;
    color: #212167;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.truism-search-box {
    flex: 1;
    min-width: 0;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: #f1f3f5;
    border: 1px solid #e1e5e8;
    border-radius: 22px;
}

.truism-search-icon {
    flex: 0 0 auto;
    color: #64748b;
}

.truism-search-input {
    width: 100%;
    min-width: 0;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #172033;
    font-size: 14px;
}

.cm-search-clear {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: transparent;
    color: #64748b;
    font-size: 22px;
    line-height: 1;
}

.truism-search-results {
    position: absolute;
    left: 48px;
    right: 0;
    top: 48px;
    display: none;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e1e5e8;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 50;
}

.truism-search-result-item,
.truism-search-empty {
    padding: 11px 14px;
    border-bottom: 1px solid #edf0f2;
    color: #172033;
    font-size: 13px;
    cursor: pointer;
}

.truism-search-result-item:hover {
    background: #f5f6f6;
}

.cm-groups-wrap {
    width: min(100%, 850px);
    margin: 0 auto;
    max-height: 58vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 2px 8px;
    scrollbar-width: thin;
}

.changemakers-section {
    width: 100%;
    margin: 0;
}

.changemakers-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.truth-democracy-card {
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 2px solid #6c757da3;
    box-sizing: border-box;
    transition: background .15s ease;
}

.truth-democracy-card:hover {
    background: #f7f8f9;
}

.cm-person-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.truth-photo-box {
    position: relative;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 50%;
    overflow: hidden;
    background: #e9eef5;
}

.truth-photo-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.photo-placeholder {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #212167;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
}

.cm-person-content {
    min-width: 0;
    flex: 1 1 auto;
}

.cm-person-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.truth-name-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #172033;
    font-size: 15px;
    font-weight: 700;
}

.cm-percentage {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 800;
}

.cm-progress-high-text { color: #159447; }
.cm-progress-medium-text { color: #d48714; }
.cm-progress-low-text { color: #df2b21; }

.truth-heading {
    margin: 3px 0 5px !important;
    color: #667781;
    font-size: 12px;
}

.cm-progress {
    height: 5px !important;
    margin: 0 0 7px;
    overflow: hidden;
    border-radius: 99px;
    background: #e9edef !important;
}

.cm-progress .progress-bar {
    border-radius: 99px;
}

.cm-progress-high {
    background: #159447 !important;
}

.cm-progress-medium {
    background: #d48714 !important;
}

.cm-progress-low {
    background: #df2b21 !important;
}

.truth-links-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
}

.truth-links-row::-webkit-scrollbar {
    display: none;
}

.truth-link {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #2563eb;
    padding: 0;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 600;
    cursor: pointer;
}

.truth-link span {
    font-weight: 800;
}

.truth-link:disabled {
    color: #a8b0b8;
    cursor: default;
}

@media screen and (max-width: 768px) {
    .people-report-content {
        /*padding: 10px 8px 14px !important;*/
    }

    .people-report-heading-box {
        width: 100%;
        margin-bottom: 9px;
        padding: 10px 12px;
        border-radius: 9px;
    }

    .people-report-title {
        font-size: 25px !important;
    }

    .cm-search-panel,
    .cm-groups-wrap {
        width: 100%;
    }

    .cm-filter-toolbar {
        padding: 6px;
        border-radius: 9px;
    }

    .cm-az-nav {
        gap: 3px;
    }

    .cm-az-btn {
        min-width: 27px;
        height: 28px;
        padding: 0 6px;
        font-size: 11px;
    }

    .cm-search-toggle,
    .cm-search-back {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .cm-groups-wrap {
        max-height: 62vh;
        padding-bottom: 4px;
    }

    .truth-democracy-card {
        padding: 9px 8px;
    }

    .truth-photo-box {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .cm-person-row {
        gap: 9px;
    }

    .truth-name-value {
        font-size: 14px;
    }

    .cm-percentage {
        font-size: 12px;
        margin-bottom: -49px;
    }

    .truth-heading {
        font-size: 11px;
    }

    .truth-link {
        font-size: 10.5px;
    }
}

@media screen and (max-width: 380px) {
    .people-report-content {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .truth-photo-box {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .truth-name-value {
        font-size: 13px;
    }

    .cm-groups-wrap {
        max-height: 64vh;
    }
}


/* =========================================================
   SEARCH + PEOPLE REPORT FONT SIZE UPDATE
   ========================================================= */

/* When search icon is clicked, hide A-Z letters completely */
.cm-search-panel.search-open .cm-filter-toolbar {
    display: none !important;
}

.cm-search-panel.search-open .truism-search-wrap {
    display: flex !important;
}

/* Keep search box open/visible until Back is clicked */
.cm-search-panel.search-open {
    display: block !important;
}

.cm-search-panel.search-open .truism-search-wrap {
    width: 100% !important;
}

/* Bigger person names */
.truth-name-value {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

/* Bigger "Truth in Our Democracy" text */
.truth-heading {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 4px 0 7px !important;
}

/* Bigger My Solution / My Action / My Ideas */
.truth-link {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

/* Keep search input comfortable */
.truism-search-input {
    font-size: 16px !important;
    min-height: 40px !important;
}

@media screen and (max-width: 768px) {
    .truth-name-value {
        font-size: 17px !important;
    }

    .truth-heading {
        font-size: 14px !important;
    }

    .truth-link {
        font-size: 13px !important;
    }

    .truism-search-input {
        font-size: 16px !important;
    }
}

@media screen and (max-width: 380px) {
    .truth-name-value {
        font-size: 16px !important;
    }

    .truth-heading {
        font-size: 13.5px !important;
    }

    .truth-link {
        font-size: 12.5px !important;
    }
}


/* =========================================================
   DESKTOP / WEB VIEW
   Match the existing MOBILE design exactly.
   IMPORTANT: Mobile CSS is NOT changed.
   ========================================================= */
@media screen and (min-width: 769px) {

    /* Full-width report like the mobile layout */
    .people-report-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 8px 14px !important;
        background: #fff !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Same heading treatment */
    .people-report-heading-box {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 9px !important;
        padding: 10px 12px !important;
        border-radius: 9px !important;
        box-sizing: border-box !important;
    }

    .people-report-title {
        font-size: 25px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    /* Same search / A-Z toolbar width */
    .cm-search-panel {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 12px !important;
    }

    .cm-filter-toolbar {
        width: 100% !important;
        padding: 6px !important;
        border-radius: 9px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .cm-az-nav {
        gap: 3px !important;
        overflow-x: auto !important;
    }

    .cm-az-btn {
        min-width: 27px !important;
        height: 28px !important;
        padding: 0 6px !important;
        font-size: 11px !important;
    }

    .cm-search-toggle,
    .cm-search-back {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
    }

    .truism-search-input {
        font-size: 16px !important;
        min-height: 40px !important;
    }

    /* IMPORTANT:
       Mobile has a normal page/list flow.
       Desktop now uses the same flow instead of a 58vh inner scroll. */
    .cm-groups-wrap {
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 2px 8px !important;
        overflow: visible !important;
    }

    .changemakers-section,
    .changemakers-grid {
        width: 100% !important;
    }

    /* Same card spacing and structure as mobile */
    .truth-democracy-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 9px 8px !important;
        box-sizing: border-box !important;
    }

    .cm-person-row {
        width: 100% !important;
        gap: 9px !important;
        align-items: center !important;
    }

    .truth-photo-box {
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 48px !important;
    }

    .truth-name-value {
        font-size: 17px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
    }

    .cm-percentage {
        font-size: 12px !important;
    }

    .truth-heading {
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin: 4px 0 7px !important;
    }

    .truth-link {
        font-size: 13px !important;
        line-height: 1.45 !important;
        font-weight: 700 !important;
    }

    /* Keep the percentage aligned exactly like the compact card */
    .cm-person-topline {
        width: 100% !important;
    }

    /* Search results use the full web width */
    .truism-search-results {
        left: 44px !important;
        right: 0 !important;
    }

    /* Keep the bottom hand icon/functionality intact */
    .btn-log {
        width: 100% !important;
        margin: 0 !important;
        padding: 6px 0 8px !important;
        background: #b87612 !important;
        text-align: center !important;
    }

    .people-project-btn {
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .people-project-image {
        width: 105px !important;
        max-width: 105px !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
        object-fit: contain !important;
    }
}

/* Extracted from procednew.php - style block 2 */
/* =========================================================
   FINAL PERCENTAGE BOX SIZE FIX
   - Keeps percentage box on the RIGHT
   - Increases box width + height
   - Increases percentage font size
   - Web + Mobile
   - Everything else remains unchanged
   ========================================================= */
.cm-person-content {
    position: relative !important;
}

/* Percentage box on the right side of Truth in Our Democracy */
.cm-person-topline .cm-percentage {
    position: absolute !important;
    right: 0 !important;
    top: 0px !important;

    /* Increased desktop/web box size */
    width: 100px !important;
    height: 42px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    margin: 0 !important;
    padding: 0 9px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    border-radius: 7px !important;
    border: 2px solid #000 !important;
    background: #eef3f8 !important;

    /* Increased percentage font */
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    z-index: 2 !important;
}

/* Keep Truth heading clear of the larger percentage box */
.truth-heading {
    padding-right: 112px !important;
    box-sizing: border-box !important;
}

/* Preserve existing percentage status colours */
.cm-person-topline .cm-progress-high-text {
    color: #159447 !important;
}

.cm-person-topline .cm-progress-medium-text {
    color: #d48714 !important;
}

.cm-person-topline .cm-progress-low-text {
    color: #df2b21 !important;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media screen and (max-width: 768px) {

    .cm-person-topline .cm-percentage {
        top: 0px !important;

        /* Increased mobile box size */
        width: 92px !important;
        height: 38px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        font-weight: bold !important;
        padding: 0 8px !important;
        border-radius: 6px !important;

        /* Increased mobile percentage font */
        font-size: 18px !important;
    }

    .truth-heading {
        padding-right: 104px !important;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */
@media screen and (max-width: 380px) {

    .cm-person-topline .cm-percentage {
        top: 0px !important;

        width: 86px !important;
        height: 36px !important;
        min-width: 86px !important;
        max-width: 86px !important;
        min-height: 36px !important;
        max-height: 36px !important;

        padding: 0 7px !important;
        border-radius: 6px !important;

        font-size: 15px !important;
    }

    .truth-heading {
        padding-right: 98px !important;
    }
}

/* Extracted from procednew.php - style block 3 */
/* Change Makers popup */
#cmDetailModal .modal-dialog {
    width: min(92vw, 760px);
}

#cmDetailModal .modal-content {
    border: 0 !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
}

#cmDetailModal .modal-header {
    background: #172747 !important;
    color: #fff !important;
    border-bottom: 0 !important;
    padding: 16px 20px;
}

#cmDetailModal .modal-title {
    font-size: 20px !important;
    font-weight: 700 !important;
}

#cmDetailModal .btn-close {
    filter: brightness(0) invert(1);
    opacity: 1;
}

#cmDetailModal .modal-body {
    padding: 20px !important;
    background: #fff;
}

#cmDetailModal .cm-detail-table {
    margin: 0 !important;
    font-size: 16px;
}

#cmDetailModal .cm-detail-table th {
    background: #f2f4f8;
    font-weight: 700;
    white-space: nowrap;
}

#cmDetailModal .cm-detail-table td,
#cmDetailModal .cm-detail-table th {
    padding: 12px 14px;
    vertical-align: middle;
}

.truth-link.cm-modal-trigger:not(:disabled) {
    cursor: pointer !important;
}

.truth-link.cm-modal-trigger:disabled {
    cursor: not-allowed !important;
    opacity: .55;
}

@media screen and (max-width: 576px) {
    #cmDetailModal .modal-dialog {
        width: calc(100% - 20px);
        margin: 10px auto;
    }

    #cmDetailModal .modal-title {
        font-size: 17px !important;
    }

    #cmDetailModal .modal-body {
        padding: 12px !important;
    }

    #cmDetailModal .cm-detail-table {
        font-size: 14px;
    }

    #cmDetailModal .cm-detail-table td,
    #cmDetailModal .cm-detail-table th {
        padding: 10px 9px;
    }
}


/* =========================================================
   WEB ONLY - ADD INNER SCROLL
   Mobile view is NOT changed.
   Outer page scroll + inner report scroll are both enabled.
   ========================================================= */
@media screen and (min-width: 769px) {

    /* Keep the outer browser/page scroll */
    html,
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Inner report area gets its own vertical scrollbar */
    .people-report-content {
        max-height: 75vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

}

/* Dynamic progress widths moved out of inline CSS. */
.cm-progress-score-0 { width: 0%; }
.cm-progress-score-1 { width: 1%; }
.cm-progress-score-2 { width: 2%; }
.cm-progress-score-3 { width: 3%; }
.cm-progress-score-4 { width: 4%; }
.cm-progress-score-5 { width: 5%; }
.cm-progress-score-6 { width: 6%; }
.cm-progress-score-7 { width: 7%; }
.cm-progress-score-8 { width: 8%; }
.cm-progress-score-9 { width: 9%; }
.cm-progress-score-10 { width: 10%; }
.cm-progress-score-11 { width: 11%; }
.cm-progress-score-12 { width: 12%; }
.cm-progress-score-13 { width: 13%; }
.cm-progress-score-14 { width: 14%; }
.cm-progress-score-15 { width: 15%; }
.cm-progress-score-16 { width: 16%; }
.cm-progress-score-17 { width: 17%; }
.cm-progress-score-18 { width: 18%; }
.cm-progress-score-19 { width: 19%; }
.cm-progress-score-20 { width: 20%; }
.cm-progress-score-21 { width: 21%; }
.cm-progress-score-22 { width: 22%; }
.cm-progress-score-23 { width: 23%; }
.cm-progress-score-24 { width: 24%; }
.cm-progress-score-25 { width: 25%; }
.cm-progress-score-26 { width: 26%; }
.cm-progress-score-27 { width: 27%; }
.cm-progress-score-28 { width: 28%; }
.cm-progress-score-29 { width: 29%; }
.cm-progress-score-30 { width: 30%; }
.cm-progress-score-31 { width: 31%; }
.cm-progress-score-32 { width: 32%; }
.cm-progress-score-33 { width: 33%; }
.cm-progress-score-34 { width: 34%; }
.cm-progress-score-35 { width: 35%; }
.cm-progress-score-36 { width: 36%; }
.cm-progress-score-37 { width: 37%; }
.cm-progress-score-38 { width: 38%; }
.cm-progress-score-39 { width: 39%; }
.cm-progress-score-40 { width: 40%; }
.cm-progress-score-41 { width: 41%; }
.cm-progress-score-42 { width: 42%; }
.cm-progress-score-43 { width: 43%; }
.cm-progress-score-44 { width: 44%; }
.cm-progress-score-45 { width: 45%; }
.cm-progress-score-46 { width: 46%; }
.cm-progress-score-47 { width: 47%; }
.cm-progress-score-48 { width: 48%; }
.cm-progress-score-49 { width: 49%; }
.cm-progress-score-50 { width: 50%; }
.cm-progress-score-51 { width: 51%; }
.cm-progress-score-52 { width: 52%; }
.cm-progress-score-53 { width: 53%; }
.cm-progress-score-54 { width: 54%; }
.cm-progress-score-55 { width: 55%; }
.cm-progress-score-56 { width: 56%; }
.cm-progress-score-57 { width: 57%; }
.cm-progress-score-58 { width: 58%; }
.cm-progress-score-59 { width: 59%; }
.cm-progress-score-60 { width: 60%; }
.cm-progress-score-61 { width: 61%; }
.cm-progress-score-62 { width: 62%; }
.cm-progress-score-63 { width: 63%; }
.cm-progress-score-64 { width: 64%; }
.cm-progress-score-65 { width: 65%; }
.cm-progress-score-66 { width: 66%; }
.cm-progress-score-67 { width: 67%; }
.cm-progress-score-68 { width: 68%; }
.cm-progress-score-69 { width: 69%; }
.cm-progress-score-70 { width: 70%; }
.cm-progress-score-71 { width: 71%; }
.cm-progress-score-72 { width: 72%; }
.cm-progress-score-73 { width: 73%; }
.cm-progress-score-74 { width: 74%; }
.cm-progress-score-75 { width: 75%; }
.cm-progress-score-76 { width: 76%; }
.cm-progress-score-77 { width: 77%; }
.cm-progress-score-78 { width: 78%; }
.cm-progress-score-79 { width: 79%; }
.cm-progress-score-80 { width: 80%; }
.cm-progress-score-81 { width: 81%; }
.cm-progress-score-82 { width: 82%; }
.cm-progress-score-83 { width: 83%; }
.cm-progress-score-84 { width: 84%; }
.cm-progress-score-85 { width: 85%; }
.cm-progress-score-86 { width: 86%; }
.cm-progress-score-87 { width: 87%; }
.cm-progress-score-88 { width: 88%; }
.cm-progress-score-89 { width: 89%; }
.cm-progress-score-90 { width: 90%; }
.cm-progress-score-91 { width: 91%; }
.cm-progress-score-92 { width: 92%; }
.cm-progress-score-93 { width: 93%; }
.cm-progress-score-94 { width: 94%; }
.cm-progress-score-95 { width: 95%; }
.cm-progress-score-96 { width: 96%; }
.cm-progress-score-97 { width: 97%; }
.cm-progress-score-98 { width: 98%; }
.cm-progress-score-99 { width: 99%; }
.cm-progress-score-100 { width: 100%; }

/* Former inline styles; page-prefixed classes prevent cross-page collisions. */
.uod-procednew-inline-001 { display:none; }
.uod-procednew-inline-002 { width:70px; }