/* ==========================================================================
   Umbrella Organization Nepal — site stylesheet
   1. Legacy utilities
   2. Design system (tokens, layout, components)
   3. Page styles (one section per Blade view)
   ========================================================================== */

/* ---------- 1. Legacy utilities ---------- */
/* Legacy utilities. Global look & feel lives in umbrella.css (loaded after this file). */

/* btn-yellow for yellow collor with hover   */
:root {
    /* --primary: #2d307f;  */
    --primary: linear-gradient(180deg, #0e5f61 0%, #0e5f61 100%);;
    --primary-solid: #0e5f61;
    --primary-off: #5c67a2;
    --primary-off-off: #f8f8ff;
    --secondary: #f9f9ff;
    --white-off: #f5f5ff;
    --third: #06afda;
    --white: rgba(255, 255, 255, 1);
    --bs-yellow: rgb(21 178 79);
    --font-family: ""Figtree", sans-serif";
    --font-family-inter: "inter";
    --border-radius: 4px;
    --icon-size: 24px;
    --off-black: rgba(0, 0, 0, 0.6);
    --black-off: rgb(75 85 99);
    --weight400: 400;
    --weight500: 500;
    --weight600: 600;
    --weight700: 700;
    --radius4: 4px;
    --radius8: 8px;
    --radius20: 20px;
    --radius100: 100px;
    --border-radius: 8px;
    --extra-grey: rgba(149, 164, 183, 0.11);
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

*[lang="en"] body {
    font-family: "Roboto", sans-serif;
}

*[lang="ne"] body {
    font-family: "Mukta", sans-serif;
}

a {
    text-decoration: none;
    color: #333;
}

li {
    list-style: none;
}


.btn-nonebg {
    background: none;
    border: 1px solid var(--primary);
    color: var(--primary);
}


.hero-description {
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity));
}

@media screen and (max-width: 600px) {
    .en_ne {
        height: 80px;
        width: 15px;
        margin-top: 0;
        transition: 0.1s all;
        display: inline-block;
    }
}

/* For Top Navbar */
.topheader {
    background: var(--primary);
    color: white;
}

.topheader .fab {
    color: var(--primary);
}

.top_right span {
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--font-family);
}

.info {
    display: flex;
    text-align: center;
}

.topheader input {
    color: var(--bs-yellow);
    border: 2px solid var(--bs-yellow);
    padding-left: 8px;
    padding-right: 2px;
}

/* For Phone Numbers */
.left_top {
    display: flex;
    justify-content: space-between;
}

.contact_no {
    color: var(--first);
    font-size: 18px;
}

.top_right {
    display: flex;
    padding: 10px 0px;
}

.search-form {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.search-form button {
    background-color: var(--bs-yellow);
    color: #fff;
    border: 2px solid var(--bs-yellow);
}


.card-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--primary);
}

.card-text {
    color: var(--off-black);
    margin-bottom: 1.5rem;
    flex: 1;
}

.card-footer {
    padding: 1rem 1.5rem;
    background: var(--secondary);
    border-top: 1px solid var(--extra-grey);
}

@media screen and (max-width: 768px) {
    .card-img-top {
        height: 200px;
    }
}

/* For Team */

/* For Team Page */

/* For Team Memeber */

/* Team Page */
.team_card {
    width: 100%;
    overflow: hidden;
    text-align: center;
    background: var(--white);
    border-radius: var(--radius4);
}

.team_card .image {
    height: 220px;
    width: 100%;
}

.team_card i {
    font-size: 24px !important;
    margin: 0.6rem;
    color: var(--black-off);
}

.team_name {
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
    font-family: var(--font-family);
}

.team_position,
.team_email,
.team_contact {
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    font-family: var(--font-family);
}

/* For Images in gallery */

/* For The image section */

.accordion {
    width: 100%;
    max-width: 100%;
    height: 250px;
    overflow: hidden;
    margin: 0px auto;
}

.accordion ul {
    width: 100%;
    display: table;
    table-layout: fixed;
    margin: 0;
    padding: 0;
}

.accordion ul li {
    display: table-cell;
    vertical-align: bottom;
    position: relative;
    width: 16.666%;
    height: 250px;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 500ms ease;
    background-size: cover;
}

.accordion ul li div {
    display: block;
    overflow: hidden;
    width: 100%;
}

.accordion ul li div a {
    display: block;
    height: 250px;
    width: 100%;
    position: relative;
    z-index: 3;
    vertical-align: bottom;
    padding: 15px 20px;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none;
    font-family: Open Sans, sans-serif;
    transition: all 200ms ease;
}

.accordion ul li div a * {
    opacity: 0;
    margin: 0;
    width: 100%;
    text-overflow: ellipsis;
    position: relative;
    z-index: 5;
    /* var(--white)-space: nowrap; */
    overflow: hidden;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease;
}

.accordion ul li div a h2 {
    font-family: Montserrat, sans-serif;
    text-overflow: clip;
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 2px;
    top: 160px;
}

.accordion ul li div a p {
    top: 160px;
    font-size: 13.5px;
}

.accordion ul:hover li,
.accordion ul:focus-within li {
    width: 8%;
}

.accordion ul li:focus {
    outline: none;
}

.accordion ul:hover li:hover,
.accordion ul li:focus,
.accordion ul:focus-within li:focus {
    width: 60%;
    background-size: cover;
}

.accordion ul:hover li:hover a,
.accordion ul li:focus a,
.accordion ul:focus-within li:focus a {
    background: rgba(0, 0, 0, 0.4);
}

.accordion ul:hover li:hover a *,
.accordion ul li:focus a *,
.accordion ul:focus-within li:focus a * {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.accordion ul:hover li {
    width: 8% !important;
}

.accordion ul:hover li a * {
    opacity: 0 !important;
}

.accordion ul:hover li:hover {
    width: 60% !important;
}

.accordion ul:hover li:hover a {
    background: rgba(0, 0, 0, 0.4);
}

.accordion ul:hover li:hover a * {
    opacity: 1 !important;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

/* For Images in Single ID */
/* For SIngle Gallery Images */
.gallery_image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
}

/* For VideoSection */

.video_card iframe {
    height: 300px;
}

.vid_desc {
    font-size: 18px;
    font-weight: 600;
    color: #0b1f6d;
    font-family: var(--font-family);
    text-transform: capitalize;
}

/* For Sample Page for single countries and sinle posts and all */

.sample_page_image {
    margin: 10px 10px 10px 0;
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center;
}

.sample_page_list {
    /* background-image: linear-gradient(#4e0206, #37080b); */
    background: var(--secondary);
    height: fit-content;
    border-radius: 4px;
}

.sample_page_list h3 {
    color: var(--primary) !important;
    text-transform: capitalize;
}

.sample_page_list ul {
    list-style: none;
}

.sample_page_list li {
    position: relative;
    font-size: 20px;
    margin: 10px;
    color: var(--primary) !important;
}

.sample_page_list ul li::before {
    content: "\2022";
    color: var(--primary);
    position: absolute;
    font-size: 25px;
    left: -19px;
    top: -3px;
}

.sample_page_list ul li:before {
    content: "\1F892";
    font-size: 30px;
    left: -18px;
    top: -12px;
}

.sample_page_list ul li a {
    text-decoration: none;
    color: var(--primary);
}

/* nirajan sigdel add css */

.herosectiontitle {
    font-size: 50px; /* Larger font size for more impact */
    font-weight: bolder; /* Extra bold font weight */
    text-transform: uppercase; /* Make the text all uppercase for emphasis */ /* Slightly spaced out letters */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); /* Adds a shadow effect to make it pop */
    font-family: var(--font-family);
}

@media (max-width: 700px) {
    .herosectiontitle {
        font-size: 54px;
    }
}

@media (max-width: 500px) {
    .herosectiontitle {
        font-size: 32px;
    }
}

/* indexpagesection2 */
.apply-btn {
    text-transform: capitalize;
    outline: none !important;
    border: none;
    background-color: var(--white);
    padding: 8px 20px;
    letter-spacing: 0.8px;
    font-size: 18px;
    color: var(--off-black);
    border-bottom: 4px solid var(--bs-yellow);
    border-radius: var(--border-radius);
}

.apply-btn:hover {
    background: var(--primary);
    border-bottom-color: transparent !important;
    color: var(--white);
}


.img-box img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.profile-details {
    margin-top: 1rem;
    flex-grow: 1;
}

.apply-button {
    margin: 1rem;
}

.to {
    color: var(--third) !important;
}

.experience {
    margin-top: 200px !important;
    background-repeat: no-repeat;
    background-position: top;
}

/* Define the animation keyframes */

.ceomessage img {
    height: 40vh;
    width: 100%;
    object-fit: contain;
    margin: 0 !;
}

.clientsay {
    background: url(../img/clientback.png);
    filter: brightness(90%);

    background-repeat: no-repeat;
    background-size: cover;
    color: var(--var(--white));
    font-family: var(--font-family);
}

.clientsay::after {
    content: "";
    /* Ensure content is present for ::after to work */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /* Adjust the opacity to your preference */
    z-index: 1;
    /* Ensure it's above the background image */
}

.clientcard {
    background: var(--third) !important;
    border-radius: 4px;
    border: none;
    position: relative;
    color: var(--white);
    /* Ensure content within .clientcard stays on top */
    z-index: 2;
    /* Ensure content within .clientcard stays on top */
}

/* what client say */

.clientcard {
    border: 1px solid #ccc;
    padding: 20px;
    position: relative;
}

.clientcard-icon {
    font-size: 40px;
    color: var(--third);
    /* Example icon color */
    background: white;
    /* Example background color */
    padding: 10px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-95%) translateX(0%);
}
.clientssay {
    background: var(--white);
}

.messagefromclient {
    text-align: justify;
    /* Ensure text is justified */
    font-family: var(--font-inika);
}

.featurette h3 {
    color: var(--primary);
    font-size: 32px;
    text-transform: none;
    font-weight: 600 !important;
    font-family: var(--font-family);
}

.companydes-section .featurette p {
    display: flex;
    text-align: justify;
    font-family: var(--font-family);
}

/* about section */
.aboutherosection h3 {
    color: var(--primary);
    font-weight: 700 !important;
    text-transform: uppercase;
    font-family: var(--font-family);
}

@media (max-width: 600px) {
    .aboutherosection .row {
        margin: 0 !important;
    }
}

/* herosectionforcontact about and demand page */

.herosectionforallpage {
    position: relative;
}

.herosectionforallpage img {
    filter: brightness(80%);
    height: 40vh;
    width: 100%;
    object-fit: cover;
    object-position: top;
}

.maintitle {
    font-size: 36px;
    font-weight: 600;
    text-transform: capitalize;
    font-family: var(--font-family);
    color: var(--white);
    letter-spacing: 0.5px;
}

.herosectionforallpage .navigatetitle {
    width: 100%;
    font-size: 24px;
    font-weight: var(--weight500);
    color: var(--white);
    border-radius: 4px;
    letter-spacing: 0.1px;
    text-transform: capitalize;
}

.herosectionforallpage a :hover {
    cursor: pointer;
    color: var(--bs-yellow) !important;
}

.herosectionforallpage .innercontent {
    position: absolute;
    left: 10rem;
    bottom: 3rem;
}

@media (max-width: 500px) {
    .herosectionforallpage .innercontent {
        position: absolute;
        left: 2rem;
        bottom: 3rem;
    }
}


ul {
    margin: 0px;
    padding: 0px;
}

.single-cta i {
    color: var(--primary);
    font-size: 30px;
    float: left;
    margin-top: 8px;
}

.cta-text {
    display: inline-block;
    font-family: var(--font-family);
}

.cta-text h4 {
    color: var(--primary);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 2px;
    font-family: var(--font-family);
}

.cta-text span {
    color: var(--primary);
    font-size: 15px;
    font-family: var(--font-family);
}


.facebook-bg,
.google-bg,
.twitter-bg {
    background: #3b5998;
}

.contactstart {
    background-image: url("../image/contacts.png");
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--primary);
    padding: 20px;
    min-height: 400px; /* Ensure there's enough height */
}

.customconnectwithus {
    background: var(--white);
}

.customconnectwithus-innersection-left_inputcontainer input,
.customconnectwithus-innersection-left_inputcontainer textarea {
    border-radius: var(--border-radius);
    padding: 9px;
    margin: 7px 0;
    border: 1px solid #9ca3af;
}
.customconnectwithus-innersection-left_inputcontainer input:focus,
.customconnectwithus-innersection-left_inputcontainer textarea:focus {
    border: 1px solid var(--primary) !important;
    stroke: none;
    outline: none;
}
.customconnectwithus-innersection-left_inputcontainer button {
    background: var(--primary);
    border-radius: var(--border-radius);
    padding: 12px;
    margin: 8px 0;
    border: 1px solid #9ca3af;
    color: var(--white) !important;
}
.customconnectwithus-innersection-left_inputcontainer button:hover {
    background: var(--third);
}
.customconnectwithus-innersection-right {
    background: var(--primary-off);
    border-radius: 8px;
}
.customconnectwithus-innersection-right-ourdetail {
    background: var(--white) !important;
    border-radius: 8px;
}
.customconnectwithus-innersection-right-text {
    color: var(--white);
}
@media (max-width: 600px) {
    .customconnectwithus-innersection {
        display: flex;
        flex-direction: column;
    }

    .customconnectwithus-innersection-left {
        border: 1px solid #24354f;
        padding: 8px 0 0 8px;
        margin: 8px !important;
        border-radius: 8px;
        margin: 16px 0 24px 0;
    }

    .customconnectwithus-innersection-left_inputcontainer input,
    .customconnectwithus-innersection-left_inputcontainer textarea {
        width: 70vw;
    }
}
.extralarger {
    font-family: var(--font-family);
    letter-spacing: 0.8px;
    z-index: 2;
    padding: 0;
    margin: 0;
    font-size: 29px;
    font-weight: var(--weight500);
    text-transform: capitalize;
}

.mdimage {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius100);
}
.fcc {
    display: flex;
    justify-content: center;
    align-items: center;
}
.fbc {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*
hello */

/* button  to control the button*/
/* common csss of button */

/* textdescription */

.lg-texts,
.md-text,
.sm-text,
.xs-text,
.xs-text-md,
.xs-text-bd,
.sm-text-bd,
.extralarger {
    font-family: var(--font-family);
    letter-spacing: 0.8px;
    z-index: 2;
    padding: 0;
    margin: 0;
}

.extralarger {
    font-size: 32px;
    font-weight: var(--weight600);
    text-transform: capitalize;
    font-family: var(--font-family);
}

.companytheme {
    font-family: var(--font-family);
    letter-spacing: 0.8px;
    z-index: 2;
    padding: 0;
    margin: 0;
    font-size: 18px;
    font-weight: var(--weight600);
    text-transform: capitalize;
    color: var(--bs-yellow);
}

.lg-texts {
    font-size: 32px;
    font-weight: var(--weight600);
    color: var(--text-gray);
    text-transform: capitalize;
}

.lg-text-md {
    font-size: 28px;
    font-weight: var(--weight600);
    color: var(--text-gray);
    text-transform: capitalize;
    font-family: var(--font-family);
}

.md-text {
    font-size: 20px;
    font-weight: var(--weight600);
    color: var(--text-gray);
    text-transform: capitalize;
    font-family: var(--font-family);
}

.md-text-dup {
    font-size: 19px;
    font-weight: var(--weight600);
    color: var(--text-gray);
    text-transform: capitalize;
    font-family: var(--font-family);
    padding: 2px 0;
    margin: 0;
}

.sm-text {
    font-size: 18px;
    color: var(--text-gray);
    font-weight: var(--weight500);
    font-family: var(--font-family);
}

.sm-text-bd {
    font-size: 16px;
    color: var(--text-gray);
    font-weight: var(--weight600);
    font-family: var(--font-family);
}

.sm-text:first-letter,
.sm-text-bd:first-letter {
    text-transform: capitalize;
}

.xs-text {
    font-size: 16px;
    color: rgb(156 163 175);
    font-weight: var(--weight400);
    letter-spacing: 0.4px;
}

.xs-text-bd {
    font-size: 16px;
    color: var(--off-white);
    font-weight: var(--weight700);
}

.xs-text-md {
    font-size: 16px;
    color: var(--text-black);
    font-weight: var(--weight600);
}

.xs-text:first-letter,
.xs-text-md:first-letter,
.xs-text-bd:first-letter {
    text-transform: capitalize;
}

.text14px {
    font-size: 14px;
    color: var(--text-black);
    font-family: var(--font-family);
    letter-spacing: 1px;
    font-weight: 300;
}

.whitehighlight {
    color: var(--white);
}

.blackhighlight {
    color: var(--black-off);
}

.bluehighlight {
    color: var(--primary);
}

.yellowhighlight {
    color: var(--bs-yellow);
}

.title {
    margin-bottom: 1rem;
}

/* for input and textarea */

/* for input */

.input {
    border: 2px solid var(--border-color);
    stroke: none;
    border-radius: var(--border-radius);
    padding: 8px;
    font-size: 20px;
    width: 100%;
}

option {
    font-size: 16px !important;
}

.disabled,
.selected {
    font-size: 16px !important;
}

.textarea {
    border: 2px solid var(--border-color);
    stroke: none;
    border-radius: var(--border-radius);
    padding: 14px 8px;
    font-size: 20px;
    width: 100%;
}


/* icons size */
.customicon,
.customicon_yellow,
.customicon_pink,
.customicon_blue {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius100);
    color: var(--pure-white);
    font-size: 20px;
    height: calc(10px + 4.6vh);
    width: calc(4px + 2.6vw);
}

.customicon {
    background: var(--off-green);
}

.customicon_yellow {
    background: var(--yellow);
}

.customicon_blue {
    background-color: #007bb6;
}

.customicon_pink {
    background-color: rgba(255, 0, 116, 0.75);
}

.customicon,
.customicon_yellow,
.customicon_pink,
.customicon_blue:hover {
    cursor: pointer;
}

@media (max-width: 992px) {
    .customicon,
    .customicon_yellow,
    .customicon_blue,
    .customicon_pink {
        font-size: 20px;
        height: calc(10px + 4.6vh);
        width: calc(30px + 2.6vw);
    }
}

@media (max-width: 500px) {
    .xs-text {
        font-size: 14px;
    }

    .lg-text-md {
        font-size: 18px;
    }

    .md-text {
        font-size: 18px;
    }

    .xs-text-bd {
        font-size: 14px;
    }

    .extralarger {
        font-size: 32px;
    }

    .extralg-texts {
        font-size: 14px;
        text-transform: capitalize;
    }
    .sm-text-bd {
        font-size: 11px;
    }
}

/* image controller */
.lgimage-lg {
    width: 400px;
    height: 355px;
    border-radius: var(--radius20);
    object-fit: cover;
}

.lgimage-lgheightcd {
    height: 420px;
    width: 350px;
    border-radius: var(--radius20);
    object-fit: cover;
}

.lgimage {
    width: 400px;
    height: 300px;
    object-fit: cover;
}

.lgimageheightcontroller {
    width: 400px;
    height: 200px;
    object-fit: cover;
}

.mdimage-exlg {
    width: 260px;
    height: 400px;
    object-fit: cover;
}

.mdimage-exlgcd {
    width: 260px;
    height: 300px;
    object-fit: cover;
}

.mdimage-lglg {
    width: 250px;
    height: 150px;
    object-fit: cover;
}

.mdimage-lg {
    width: 150px;
    height: 120px;
    object-fit: cover;
}

.mdimage {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius100);
}

.smimage-lg,
.smimage {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.smimage {
    border-radius: var(--radius100);
}

.smimage-lg {
    width: 64px;
    border-radius: var(--radius8);
}

@media (max-width: 550px) {
    .mdimage-lg {
        width: 90px;
        height: 70px;
    }

    .indexbannerimage {
        width: 120px;
        height: 100px;
    }

    .smimage {
        width: 40px;
        height: 40px;
        object-fit: cover;
    }
    .smimage-extra {
        width: 30px;
        height: 30px;
        object-fit: cover;
    }

    .lgimageheightcontroller {
        width: 400px;
        height: 200px;
    }
}

@media (max-width: 427px) {
    .lgimageheightcontroller {
        width: 100%;
        height: 200px;
    }
}

/* d-flex content-center align-items-center */

.fcc {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fbc {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sectiongap {
    margin: 3rem 0;
}

.city-detail:nth-child(1) {
    order: 1;
    object-fit: contain;
    width: 850px !important;
}

.city-detail:nth-child(2) {
    order: 2;
    width: 400px;
}

.city-detail:nth-child(3) {
    order: 3;
    width: 400px;
}

.city-detail:nth-child(4) {
    order: 4;
    width: 850px !important;
}

.logout {
    height: 36px;
}

.left-items {
    background: rgb(244, 244, 244);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
    height: calc(300px + 10vh);
}

@media (max-width: 768px) {
    .left-items {
        display: flex !important;
        justify-content: space-between;
        height: auto;
    }
}

/* ----/start of each page /------------------------------------------------------------------------------------------------ */

/* --------------------------------------- explore blade------------------------------------------------------------*/

@media (max-width: 450px) {
    .needhide {
        display: none;
    }
}

/* demand and service of index page */


.btn-yellow {
    background-color: rgb(255, 243, 224);
    color: #f9a002 !important;
}

.btn-blue {
    background-color: #c5c9de;
    color: var(--primary) !important;
}
@media (max-width: 408px) {
    .forhide {
        display: none;
    }
}

/* General Card Styling */
.custom-card-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: transform 0.9s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;
    border: 1px solid var(--off-black);
}
/* Image Styling */
.custom-multi-post-image {
    position: relative;
    overflow: hidden;
}
.custom-card-img-top {
    width: 100%;
    height: 30vh;
    object-fit: cover;
    transition: transform 0.9s ease; /* Smooth transition on hover */
}
/* Card Hover Effect */
.custom-card-wrapper:hover .custom-card-img-top {
    transform: scale(1.05); /* Image "pop-in" effect */
}

.featurette-heading {
    font-family: var(--font-family);
    color: var(--primary);
    font-size: 32px;
    font-weight: 600 !important ;
}


.lead {
    font-size: 20px;
    font-family: var(--font-family);
    text-align: justify;
}

.read-more-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: bold;
}

.read-more-link:hover {
    text-decoration: underline;
}
.post-description {
    font-size: 18px;
    font-family: var(--font-family);
    text-align: justify;
}

/* added for  hreasy nepal */

/* Optional: Add some margin between cards */
.multi_post .card {
    border-radius: 8px;
    transition: transform 0.3s ease;
}

/* Optional: Add a hover effect on cards */
.multi_post .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Optional: Style the Read More button */
.multi_post .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.multi_post .btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.sample_page {
    background-color: #ffffff;
    padding-top: 50px;
    padding-bottom: 50px;
}

.sample_page_content_dup {
    background: #f7fafc;
    border-radius: 8px;
    padding: 15px;
}

.forbottomborder {
    border-bottom: 2px solid #dddddd;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.insiderpages {
    background: #dddddd;
}

.singleservicepage {
    background: var(--primary-off-off);
}

.related-card {
    border: none;
    border-radius: var(--radius8);
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    margin: 5px 0px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.Project {
    color: var(--primary);
    padding: 20px;
}

.image-bg {
    border-radius: 8px;
    padding: 2px;
}

/* Dynamic background colors based on the index of child */
.Project .row .col-md-4:nth-child(1) .image-bg {
    background: var(--bs-yellow);
}

.Project .row .col-md-4:nth-child(2) .image-bg {
    background: #2ecd9a;
}

.Project .row .col-md-4:nth-child(3) .image-bg {
    background: var(--primary);
}

.Project .row .col-md-4:nth-child(4) .image-bg {
    background: gray;
}

.Project.row .col-md-4:nth-child(5) .image-bg {
    background: yellow;
}

.Project .row .col-md-4:nth-child(6) .image-bg {
    background: purple;
}


.top_right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.search-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-form input {
    border: 1px solid var(--extra-grey);
    border-radius: var(--radius4);
    padding: 0.5rem 1rem;
    transition: var(--transition);
}

.search-form input:focus {
    outline: none;
    border-color: var(--bs-yellow);
    box-shadow: 0 0 0 2px rgba(21, 178, 79, 0.1);
}

.search-form button {
    background-color: var(--bs-yellow);
    color: white;
    border: none;
    border-radius: var(--radius4);
    padding: 0.5rem 1rem;
    transition: var(--transition);
}

.search-form button:hover {
    background-color: var(--third);
}


/* Enhanced Social Icons */
.social-button {
    transition: transform 0.3s ease;
}

.social-button:hover {
    transform: translateY(-3px);
}

/* Enhanced Typography */
.section-title {
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 1rem;
}

.section-title:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    /* background-color: var(--bs-yellow); */
}

/* Content Spacing */
.content-wrapper {
    margin-bottom: 2rem;
}

/* Card Content Spacing */
.card-body {
    padding: 1.5rem;
}

.card-title {
    margin-bottom: 1rem;
}

.card-text {
    margin-bottom: 1.5rem;
}

/* List Styling */
.feature-list {
    padding-left: 0;
}

.feature-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.feature-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--bs-yellow);
}

/* Image Containers */
.img-container {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.img-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Contact Form Spacing */
.contact-form .form-group {
    margin-bottom: 1.5rem;
}

.contact-form label {
    margin-bottom: 0.5rem;
    display: block;
    font-weight: 500;
}
/* Smooth Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}


/* Hover Effects */
.hover-grow {
    transition: transform 0.3s ease;
}

.hover-grow:hover {
    transform: scale(1.02);
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Loading States */
.btn.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

.btn.loading:after {
    content: "";
    width: 1em;
    height: 1em;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    position: absolute;
    right: 0.5em;
    top: 50%;
    margin-top: -0.5em;
    animation: spin 0.6s linear infinite;
}

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

.bg-soft-blue {
    background-color: #eaf6ff; /* Soft sky blue */
}

.section-title {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
}

.section-subtitle {
    font-size: 1rem;
    color: #555;
    max-width: 700px;
    margin: 0 auto;
}

.xs-text-des {
    font-size: 1.15rem; /* Slightly larger for better readability */
    color: #444; /* Darker gray for better contrast */
    line-height: 1.6; /* More line spacing for comfort */
    font-weight: 400; /* Normal weight for smooth reading */
    font-family: var(--font-family-inter); /* Clean modern font */
    margin-bottom: 1.5rem; /* Space below paragraph */
    letter-spacing: 0.02em; /* Slight letter spacing for better flow */
}


.blog-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-8px);
}

.blog-img {
    width: 100%;
    height: 320px;
    object-fit: cover;
}

.blog-info {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    color: white;
    padding: 20px;
    transition: all 0.3s ease;
    transform: translateY(50%);
}

.blog-card:hover .blog-info {
    transform: translateY(0%);
}

.blog-info .badge {
    background-color: #fff;
    color: #b40000;
    font-weight: 600;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 12px;
    margin-bottom: 10px;
}

.blog-info h5 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.blog-info p {
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.blog-card:hover .blog-info p {
    opacity: 1;
}

.read-more-btn {
    border: 2px solid #fff;
    color: white;
}

.read-more-btn:hover {
    color: black !important;
    background: white;
}

.classgreen {
    color: var(--primary);
}
.bg-green {
    background: var(--primary) !important;
    color: white !important;
}
.hovergreen:hover {
    background: #448c4c !important;
}
.cssblack:hover {
  color: black !important; /* Ensures it overrides Bootstrap styles */
}


/* ---------- 2. Design system ---------- */
/* =========================================================================
   UMBRELLA ORGANIZATION NEPAL — DESIGN SYSTEM
   Loaded after bootstrap.min.css and style.css. Every frontend page uses
   these tokens and components; page templates only add what is unique.

   Brand palette (unchanged — consolidated from the existing site):
     teal    #0e5f61  primary: links, headings accents, header/footer
     forest  #1a332d  ink: headings, dark text
     deep    #0a2e26  dark sections / overlays
     sun     #ffce56  Donate / call-to-action accent
     green   #2f8b45  positive / supportive accent
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
    /* Brand */
    --u-teal: #0e5f61;
    --u-teal-600: #0b4f51;
    --u-teal-50: rgba(14, 95, 97, 0.06);
    --u-teal-100: rgba(14, 95, 97, 0.12);
    --u-forest: #1a332d;
    --u-deep: #0a2e26;
    --u-sun: #ffce56;
    --u-sun-600: #fdcb01;
    --u-green: #2f8b45;

    /* Neutrals */
    --u-ink: #1a332d;
    --u-text: #4b5563;
    --u-muted: #6b7280;
    --u-line: #e5e7eb;
    --u-surface: #ffffff;
    --u-surface-alt: #f8fafc;
    --u-surface-tint: #f3f7f6;

    /* Type */
    --u-font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --u-fs-hero: clamp(2.25rem, 1.2rem + 3.2vw, 3.25rem);
    --u-fs-h1: clamp(2rem, 1.3rem + 3vw, 3.25rem);
    --u-fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    --u-fs-h3: clamp(1.15rem, 1rem + 0.5vw, 1.375rem);
    --u-fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
    --u-fs-body: 1rem;
    --u-fs-sm: 0.9375rem;
    --u-fs-xs: 0.8125rem;
    --u-lh: 1.65;
    --u-measure: 68ch;

    /* Layout */
    --u-container: 1240px;
    --u-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
    --u-section: clamp(3.5rem, 2rem + 6vw, 7rem);
    --u-gap: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
    --u-header-h: 76px;

    /* Shape */
    --u-radius-sm: 8px;
    --u-radius: 14px;
    --u-radius-lg: 22px;
    --u-radius-pill: 999px;

    /* Elevation */
    --u-shadow-sm: 0 1px 2px rgba(16, 40, 34, 0.06), 0 2px 8px rgba(16, 40, 34, 0.05);
    --u-shadow: 0 10px 30px rgba(16, 40, 34, 0.08);
    --u-shadow-lg: 0 20px 50px rgba(16, 40, 34, 0.14);

    /* Motion */
    --u-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --u-dur: 0.3s;

    /* Legacy aliases so existing templates keep working */
    --primary: var(--u-teal);
    --primary-solid: var(--u-teal);
    --shadow: var(--u-shadow-sm);
    --shadow-sm: var(--u-shadow-sm);
    --shadow-md: var(--u-shadow);
    --shadow-lg: var(--u-shadow-lg);
    --transition: all var(--u-dur) var(--u-ease);
    --text-gray: var(--u-text);
    --text-black: var(--u-ink);
    --off-white: rgba(255, 255, 255, 0.85);
    --font-family: var(--u-font);
}

/* ---------- 2. Base ---------- */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--u-header-h) + 1rem);
}

body {
    font-family: var(--u-font);
    font-size: var(--u-fs-body);
    line-height: var(--u-lh);
    color: var(--u-text);
    background: var(--u-surface);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

*[lang="en"] body { font-family: var(--u-font); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--u-font);
    color: var(--u-ink);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

p { text-wrap: pretty; }

img, video, iframe { max-width: 100%; }
img { height: auto; }

a { color: var(--u-teal); transition: color var(--u-dur) var(--u-ease); }
a:hover { color: var(--u-teal-600); }

::selection { background: var(--u-sun); color: var(--u-forest); }

/* Visible, consistent keyboard focus */
:focus-visible {
    outline: 3px solid var(--u-sun);
    outline-offset: 3px;
    border-radius: 4px;
}
.u-on-dark :focus-visible { outline-color: #fff; }

.u-skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 3000;
    background: var(--u-forest);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: var(--u-radius-sm);
    font-weight: 600;
}
.u-skip-link:focus { top: 1rem; color: #fff; }

/* ---------- 3. Layout ---------- */
/* One container width for the whole site: Bootstrap's .container is aligned
   to it so legacy markup and new markup share the same left/right edge. */
.container,
.u-container {
    width: 100%;
    max-width: calc(var(--u-container) + var(--u-gutter) * 2);
    padding-left: var(--u-gutter);
    padding-right: var(--u-gutter);
    margin-left: auto;
    margin-right: auto;
}
.u-container--narrow { max-width: calc(860px + var(--u-gutter) * 2); }

.u-section { padding-block: var(--u-section); position: relative; }
.u-section--tight { padding-block: calc(var(--u-section) * 0.65); }
.u-section--alt { background: var(--u-surface-alt); }
.u-section--tint { background: var(--u-surface-tint); }
.u-section--dark { background: var(--u-deep); color: rgba(255, 255, 255, 0.82); }
.u-section--dark h1, .u-section--dark h2, .u-section--dark h3,
.u-section--dark .u-title { color: #fff; }

.u-grid {
    display: grid;
    gap: var(--u-gap);
    grid-template-columns: 1fr;
}
@media (min-width: 576px) {
    .u-grid--2, .u-grid--3, .u-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .u-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .u-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.u-grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

.u-split {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
    grid-template-columns: 1fr;
}
@media (min-width: 992px) {
    .u-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .u-split--45-55 { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
    .u-split--55-45 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
    .u-split--reverse > :first-child { order: 2; }
}

.u-stack > * + * { margin-top: 1rem; }

/* ---------- 4. Typography ---------- */
.u-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--u-fs-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--u-teal);
    margin-bottom: 0.9rem;
}
.u-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--u-sun);
}
.u-on-dark .u-eyebrow,
.u-section--dark .u-eyebrow { color: var(--u-sun); }

.u-title {
    font-size: var(--u-fs-h2);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--u-ink);
    margin: 0 0 1rem;
}
.u-title-hero {
    font-size: var(--u-fs-hero);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.03em;
}
.u-title-sm { font-size: var(--u-fs-h3); font-weight: 700; line-height: 1.3; }
.u-title .u-accent,
.u-accent { color: var(--u-teal); }
.u-section--dark .u-accent, .u-on-dark .u-accent { color: var(--u-sun); }

.u-lead {
    font-size: var(--u-fs-lead);
    line-height: 1.7;
    color: var(--u-text);
    max-width: var(--u-measure);
}
.u-text { color: var(--u-text); max-width: var(--u-measure); }
.u-muted { color: var(--u-muted); }
.u-small { font-size: var(--u-fs-sm); }
.u-prose { max-width: var(--u-measure); color: var(--u-text); }
.u-prose > * + * { margin-top: 1.1em; }
.u-prose h2, .u-prose h3 { margin-top: 1.8em; }
.u-prose img { border-radius: var(--u-radius); }
.u-prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Section header: eyebrow / title / supporting copy / optional CTA */
.u-section-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
    max-width: 760px;
}
.u-section-header p { margin: 0; }
.u-section-header--center {
    align-items: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.u-section-header--center .u-lead { margin-inline: auto; }
.u-section-header--split {
    max-width: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}
.u-section-header--split > :first-child { max-width: 720px; }

/* ---------- 5. Buttons ---------- */
.u-btn {
    --_bg: var(--u-teal);
    --_fg: #fff;
    --_bd: var(--u-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.75rem 1.6rem;
    font-family: var(--u-font);
    font-size: 0.975rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none !important;
    text-transform: none;
    white-space: nowrap;
    color: var(--_fg) !important;
    background: var(--_bg);
    border: 2px solid var(--_bd);
    border-radius: var(--u-radius-pill);
    cursor: pointer;
    transition: background-color var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease),
        border-color var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease),
        transform var(--u-dur) var(--u-ease);
}
.u-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(10, 46, 38, 0.18); }
.u-btn:active { transform: translateY(0); }
.u-btn .u-btn-icon { transition: transform var(--u-dur) var(--u-ease); }
.u-btn:hover .u-btn-icon { transform: translateX(3px); }

.u-btn--primary { --_bg: var(--u-teal); --_bd: var(--u-teal); --_fg: #fff; }
.u-btn--primary:hover { --_bg: var(--u-teal-600); --_bd: var(--u-teal-600); }

.u-btn--donate { --_bg: var(--u-sun); --_bd: var(--u-sun); --_fg: var(--u-forest); }
.u-btn--donate:hover { --_bg: var(--u-sun-600); --_bd: var(--u-sun-600); }

.u-btn--outline { --_bg: transparent; --_bd: var(--u-teal); --_fg: var(--u-teal); }
.u-btn--outline:hover { --_bg: var(--u-teal); --_fg: #fff; }

.u-btn--light { --_bg: #fff; --_bd: #fff; --_fg: var(--u-forest); }
.u-btn--light:hover { --_bg: var(--u-sun); --_bd: var(--u-sun); }

.u-btn--ghost-light { --_bg: transparent; --_bd: rgba(255, 255, 255, 0.7); --_fg: #fff; }
.u-btn--ghost-light:hover { --_bg: #fff; --_bd: #fff; --_fg: var(--u-forest); }

.u-btn--sm { min-height: 40px; padding: 0.5rem 1.15rem; font-size: 0.9rem; }
.u-btn--lg { min-height: 56px; padding: 0.95rem 2rem; font-size: 1.05rem; }
.u-btn--block { width: 100%; }

.u-btn:disabled, .u-btn.is-disabled, .u-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

.u-btn-group { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

/* Bootstrap button variants mapped to the brand so any remaining .btn markup
   matches the design system. */
.btn {
    --bs-btn-padding-x: 1.35rem;
    --bs-btn-padding-y: 0.65rem;
    --bs-btn-font-family: var(--u-font);
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--u-radius-pill);
    --bs-btn-focus-box-shadow: 0 0 0 4px var(--u-teal-100);
    transition: background-color var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease),
        border-color var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}
.btn-primary, .btn-success, .btn-teal {
    --bs-btn-bg: var(--u-teal);
    --bs-btn-border-color: var(--u-teal);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--u-teal-600);
    --bs-btn-hover-border-color: var(--u-teal-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--u-teal-600);
    --bs-btn-active-border-color: var(--u-teal-600);
    --bs-btn-disabled-bg: var(--u-teal);
    --bs-btn-disabled-border-color: var(--u-teal);
}
.btn-warning {
    --bs-btn-bg: var(--u-sun);
    --bs-btn-border-color: var(--u-sun);
    --bs-btn-color: var(--u-forest);
    --bs-btn-hover-bg: var(--u-sun-600);
    --bs-btn-hover-border-color: var(--u-sun-600);
    --bs-btn-hover-color: var(--u-forest);
    --bs-btn-active-bg: var(--u-sun-600);
    --bs-btn-active-border-color: var(--u-sun-600);
    --bs-btn-active-color: var(--u-forest);
}
.btn-outline-primary, .btn-outline-success {
    --bs-btn-color: var(--u-teal);
    --bs-btn-border-color: var(--u-teal);
    --bs-btn-hover-bg: var(--u-teal);
    --bs-btn-hover-border-color: var(--u-teal);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--u-teal);
    --bs-btn-active-border-color: var(--u-teal);
}

/* Inline text link with animated arrow */
.u-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--u-teal);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    padding-bottom: 2px;
    transition: background-size var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease);
}
.u-link:hover { background-size: 100% 2px; color: var(--u-teal-600); }
.u-link .u-link-arrow { transition: transform var(--u-dur) var(--u-ease); }
.u-link:hover .u-link-arrow { transform: translateX(4px); }

/* ---------- 6. Cards ---------- */
.u-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-lg);
    overflow: hidden;
    box-shadow: var(--u-shadow-sm);
    color: var(--u-text);
    text-decoration: none;
    transition: transform var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease),
        border-color var(--u-dur) var(--u-ease);
}
a.u-card { color: var(--u-text); }
.u-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--u-shadow);
    border-color: transparent;
}
.u-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--u-surface-tint);
}
.u-card-media--4x3 { aspect-ratio: 4 / 3; }
.u-card-media--square { aspect-ratio: 1 / 1; }
.u-card-media--portrait { aspect-ratio: 4 / 5; }
.u-card-media img,
.u-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    transition: transform 0.6s var(--u-ease);
}
.u-card:hover .u-card-media img { transform: scale(1.05); }
.u-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.6rem;
    padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}
.u-card-title {
    font-size: var(--u-fs-h3);
    font-weight: 700;
    line-height: 1.3;
    color: var(--u-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.u-card-title a { color: inherit; text-decoration: none; }
.u-card-title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.u-card-text {
    margin: 0;
    color: var(--u-text);
    font-size: var(--u-fs-sm);
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.u-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: var(--u-fs-xs);
    color: var(--u-muted);
}
.u-card-footer { margin-top: auto; padding-top: 0.75rem; }
.u-card--flat { box-shadow: none; }
.u-card--pad { padding: clamp(1.5rem, 1.1rem + 1vw, 2.25rem); }

/* Badge / category pill */
.u-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    padding: 0.35rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--u-teal);
    background: var(--u-teal-50);
    border: 1px solid var(--u-teal-100);
    border-radius: var(--u-radius-pill);
}
.u-badge--sun { color: var(--u-forest); background: var(--u-sun); border-color: var(--u-sun); }
.u-card-media .u-badge { position: absolute; top: 1rem; left: 1rem; z-index: 1; background: rgba(255, 255, 255, 0.95); }

/* Icon tile */
.u-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 1.4rem;
    color: var(--u-teal);
    background: var(--u-teal-50);
    transition: background-color var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease);
}
.u-icon--sun { color: var(--u-forest); background: var(--u-sun); }
.u-icon--sm { width: 44px; height: 44px; border-radius: 12px; font-size: 1.1rem; }
.u-card:hover .u-icon:not(.u-icon--sun) { background: var(--u-teal); color: #fff; }

/* ---------- 7. Stats / impact ---------- */
.u-stat {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    padding: clamp(1.5rem, 1.1rem + 1vw, 2.25rem);
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-lg);
    transition: transform var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}
.u-stat:hover { transform: translateY(-4px); box-shadow: var(--u-shadow); }
.u-stat-value {
    font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--u-teal);
    font-variant-numeric: tabular-nums;
}
.u-stat-label { font-size: 1.1rem; font-weight: 700; color: var(--u-ink); margin: 0; }
.u-stat-text { font-size: var(--u-fs-sm); color: var(--u-text); margin: 0; }
.u-stat-bar {
    height: 6px;
    border-radius: 6px;
    background: var(--u-teal-100);
    overflow: hidden;
    margin-top: auto;
}
.u-stat-bar > span {
    display: block;
    height: 100%;
    width: var(--value, 0%);
    background: var(--u-teal);
    border-radius: inherit;
    transition: width 1.2s var(--u-ease);
}
.u-section--dark .u-stat { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
.u-section--dark .u-stat-value { color: var(--u-sun); }
.u-section--dark .u-stat-label { color: #fff; }
.u-section--dark .u-stat-text { color: rgba(255, 255, 255, 0.75); }
.u-section--dark .u-stat-bar { background: rgba(255, 255, 255, 0.12); }
.u-section--dark .u-stat-bar > span { background: var(--u-sun); }

/* ---------- 8. Process / steps ---------- */
.u-steps { counter-reset: u-step; }
.u-step { position: relative; }
.u-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 1rem;
    color: var(--u-forest);
    background: var(--u-sun);
    box-shadow: 0 0 0 6px rgba(255, 206, 86, 0.25);
}

/* ---------- 9. Media helpers ---------- */
.u-media {
    position: relative;
    border-radius: var(--u-radius-lg);
    overflow: hidden;
    background: var(--u-surface-tint);
    box-shadow: var(--u-shadow);
}
.u-media img, .u-media video, .u-media iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.u-ratio-16x9 { aspect-ratio: 16 / 9; }
.u-ratio-16x10 { aspect-ratio: 16 / 10; }
.u-ratio-4x3 { aspect-ratio: 4 / 3; }
.u-ratio-4x5 { aspect-ratio: 4 / 5; }
.u-ratio-1x1 { aspect-ratio: 1 / 1; }

/* Gallery grid */
.u-gallery {
    display: grid;
    gap: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .u-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .u-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 359.98px) { .u-gallery { grid-template-columns: 1fr; } }
.u-gallery-item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--u-radius);
    overflow: hidden;
    background: var(--u-surface-tint);
}
.u-gallery-item img, .u-gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--u-ease);
}
.u-gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 46, 38, 0.65), transparent 55%);
    opacity: 0;
    transition: opacity var(--u-dur) var(--u-ease);
}
.u-gallery-item:hover img { transform: scale(1.06); }
.u-gallery-item:hover::after, .u-gallery-item:focus-visible::after { opacity: 1; }
.u-gallery-caption {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.85rem;
    z-index: 1;
    color: #fff;
    font-weight: 600;
    font-size: var(--u-fs-sm);
    line-height: 1.35;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--u-dur) var(--u-ease), transform var(--u-dur) var(--u-ease);
}
.u-gallery-item:hover .u-gallery-caption,
.u-gallery-item:focus-visible .u-gallery-caption { opacity: 1; transform: none; }
@media (hover: none) {
    .u-gallery-item::after, .u-gallery-caption { opacity: 1; transform: none; }
}

/* Partner logos */
.u-logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 112px;
    padding: 1.25rem 1.5rem;
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    transition: border-color var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}
.u-logo-tile img {
    max-width: 100%;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter var(--u-dur) var(--u-ease), opacity var(--u-dur) var(--u-ease);
}
.u-logo-tile:hover { border-color: var(--u-teal-100); box-shadow: var(--u-shadow-sm); }
.u-logo-tile:hover img, .u-logo-tile:focus-visible img { filter: none; opacity: 1; }

/* Testimonials */
.u-quote {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: 100%;
    padding: clamp(1.5rem, 1.1rem + 1vw, 2.25rem);
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-lg);
    box-shadow: var(--u-shadow-sm);
}
.u-quote-mark { font-size: 2rem; line-height: 1; color: var(--u-sun); }
.u-quote-text { margin: 0; color: var(--u-ink); font-size: 1.02rem; line-height: 1.7; }
.u-quote-person { display: flex; align-items: center; gap: 0.85rem; margin-top: auto; }
.u-quote-person img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--u-surface);
    box-shadow: 0 0 0 2px var(--u-teal-100);
}
.u-quote-name { font-weight: 700; color: var(--u-ink); margin: 0; line-height: 1.3; }
.u-quote-role { font-size: var(--u-fs-xs); color: var(--u-muted); margin: 0; }

/* Highlighted pull quote (teal block, as on the Why Us page) */
.u-quote-block {
    position: relative;
    margin: 0 0 1.75rem;
    padding: clamp(1.5rem, 1.1rem + 1vw, 2.25rem);
    background: var(--u-teal);
    border-radius: var(--u-radius-lg);
    color: #fff;
}
.u-quote-block .u-quote-mark { display: block; margin-bottom: 0.5rem; }
.u-quote-block p {
    margin: 0;
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
}

/* Checklist */
.u-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.u-checklist li {
    position: relative;
    padding-left: 2rem;
    color: var(--u-text);
    line-height: 1.55;
}
.u-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--u-teal-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230e5f61' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}

/* ---------- 10. CTA band ---------- */
.u-cta {
    position: relative;
    overflow: hidden;
    border-radius: var(--u-radius-lg);
    padding: clamp(2.25rem, 1.5rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 4vw, 4.5rem);
    background: var(--u-teal);
    color: rgba(255, 255, 255, 0.86);
    isolation: isolate;
}
.u-cta::before {
    content: "";
    position: absolute;
    inset: auto -10% -60% auto;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    z-index: -1;
}
.u-cta h2, .u-cta .u-title { color: #fff; }
.u-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.75rem 3rem;
}
.u-cta-inner > :first-child { max-width: 640px; }
.u-cta p { margin: 0; color: rgba(255, 255, 255, 0.85); }

/* ---------- 11. Forms ---------- */
.u-form { display: grid; gap: 1.1rem; }
.u-form-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .u-form-row--2 { grid-template-columns: 1fr 1fr; } }

.u-label,
.u-form label:not(.form-check-label) {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--u-ink);
}

.u-input,
.u-form input[type="text"],
.u-form input[type="email"],
.u-form input[type="tel"],
.u-form input[type="number"],
.u-form input[type="date"],
.u-form input[type="url"],
.u-form input[type="file"],
.u-form select,
.u-form textarea,
.form-control,
.form-select {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 0.75rem 1rem;
    font-family: var(--u-font);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--u-ink);
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: var(--u-radius-sm);
    box-shadow: none;
    transition: border-color var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}
.u-form textarea, textarea.form-control, textarea.u-input { min-height: 140px; resize: vertical; }
.u-input:hover, .form-control:hover, .form-select:hover,
.u-form input:hover, .u-form select:hover, .u-form textarea:hover { border-color: #9ca3af; }
.u-input:focus, .form-control:focus, .form-select:focus,
.u-form input:focus, .u-form select:focus, .u-form textarea:focus {
    outline: none;
    border-color: var(--u-teal);
    box-shadow: 0 0 0 4px var(--u-teal-100);
}
.u-input::placeholder, .form-control::placeholder,
.u-form input::placeholder, .u-form textarea::placeholder {
    color: #9ca3af !important;
    font-size: 0.975rem;
    text-transform: none;
}
.is-invalid, .u-form .is-invalid { border-color: #b42318 !important; }
.u-error, .invalid-feedback {
    display: block;
    margin-top: 0.35rem;
    font-size: var(--u-fs-xs);
    font-weight: 600;
    color: #b42318;
}
.form-check-input:checked { background-color: var(--u-teal); border-color: var(--u-teal); }
.form-check-input:focus { box-shadow: 0 0 0 4px var(--u-teal-100); border-color: var(--u-teal); }

/* ---------- 12. Header ---------- */
.u-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid transparent;
    transition: box-shadow var(--u-dur) var(--u-ease), border-color var(--u-dur) var(--u-ease),
        background-color var(--u-dur) var(--u-ease);
}
@supports (backdrop-filter: blur(10px)) {
    .u-header { background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); }
}
.u-header.is-scrolled {
    border-bottom-color: var(--u-line);
    box-shadow: 0 6px 24px rgba(16, 40, 34, 0.07);
}
.u-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--u-header-h);
}
.u-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.u-brand img {
    display: block;
    height: 52px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}
.u-nav { display: none; }
.u-nav-list {
    display: flex;
    align-items: center;
    gap: clamp(0.15rem, -0.6rem + 1.2vw, 0.9rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.u-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 0.55rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--u-forest);
    background: none;
    border: 0;
    white-space: nowrap;
    text-decoration: none;
    border-radius: var(--u-radius-sm);
    transition: color var(--u-dur) var(--u-ease);
}
.u-nav-link::after {
    content: "";
    position: absolute;
    left: 0.55rem;
    right: 0.55rem;
    bottom: 0.25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--u-teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--u-dur) var(--u-ease);
}
.u-nav-link:hover, .u-nav-link.is-active, .u-nav-link[aria-expanded="true"] { color: var(--u-teal); }
.u-nav-link:hover::after, .u-nav-link.is-active::after { transform: scaleX(1); }
.u-nav-link .u-caret { font-size: 0.65rem; transition: transform var(--u-dur) var(--u-ease); }
.u-nav-link[aria-expanded="true"] .u-caret { transform: rotate(180deg); }
.u-nav .dropdown-menu {
    min-width: 240px;
    margin-top: 0.6rem !important;
    padding: 0.5rem;
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow-lg);
}
.u-nav .dropdown-item {
    padding: 0.6rem 0.85rem;
    border-radius: var(--u-radius-sm);
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--u-forest);
    white-space: normal;
}
.u-nav .dropdown-item:hover, .u-nav .dropdown-item:focus,
.u-nav .dropdown-item.is-active { background: var(--u-teal-50); color: var(--u-teal); }
.u-header-cta { display: none; }
@media (min-width: 1200px) {
    .u-nav { display: block; }
    .u-header-cta { display: inline-flex; }
    .u-menu-toggle { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1365.98px) {
    .u-nav-link { font-size: 0.9rem; padding-inline: 0.4rem; }
    .u-header-cta.u-btn { padding-inline: 1.15rem; }
}

.u-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--u-line);
    border-radius: 12px;
    background: #fff;
    color: var(--u-forest);
}
.u-menu-toggle-bars { display: grid; gap: 5px; width: 22px; }
.u-menu-toggle-bars span { display: block; height: 2px; border-radius: 2px; background: currentColor; }

/* Mobile drawer */
.u-drawer.offcanvas { width: min(88vw, 380px); border: 0; }
.u-drawer .offcanvas-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--u-line);
    min-height: var(--u-header-h);
}
.u-drawer .offcanvas-header img { height: 44px; width: auto; }
.u-drawer .offcanvas-body { padding: 0.75rem 1.25rem 1.5rem; display: flex; flex-direction: column; }
.u-drawer-list { list-style: none; margin: 0; padding: 0; }
.u-drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 0.75rem 0.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--u-forest);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--u-line);
    text-align: left;
    text-decoration: none;
}
.u-drawer-link:hover, .u-drawer-link.is-active { color: var(--u-teal); }
.u-drawer-link .u-caret { font-size: 0.75rem; transition: transform var(--u-dur) var(--u-ease); }
.u-drawer-link[aria-expanded="true"] .u-caret { transform: rotate(180deg); }
.u-drawer-sub { list-style: none; margin: 0; padding: 0.25rem 0 0.5rem 0.75rem; border-bottom: 1px solid var(--u-line); }
.u-drawer-sub a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.4rem 0.5rem;
    color: var(--u-text);
    font-weight: 500;
    border-radius: var(--u-radius-sm);
}
.u-drawer-sub a:hover, .u-drawer-sub a.is-active { color: var(--u-teal); background: var(--u-teal-50); }
.u-drawer-foot { margin-top: auto; padding-top: 1.5rem; display: grid; gap: 1rem; }
.u-drawer-social { display: flex; gap: 0.6rem; }

/* ---------- 13. Page hero (inner pages) ---------- */
.u-page-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(280px, 38vw, 440px);
    padding-block: clamp(3rem, 2rem + 4vw, 5rem);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    background: var(--u-deep);
}
.u-page-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    z-index: -2;
}
.u-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(10, 46, 38, 0.92) 0%, rgba(10, 46, 38, 0.55) 45%, rgba(10, 46, 38, 0.25) 100%),
        linear-gradient(to right, rgba(10, 46, 38, 0.55), transparent 70%);
}
.u-page-hero .u-container { position: relative; }
.u-page-hero-title {
    color: #fff;
    font-size: var(--u-fs-h1);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
    max-width: 22ch;
}
.u-page-hero-lead { margin: 1rem 0 0; max-width: 60ch; color: rgba(255, 255, 255, 0.85); font-size: var(--u-fs-lead); }
.u-breadcrumb { margin-top: 1.1rem; }
.u-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--u-fs-sm);
}
.u-breadcrumb li { display: inline-flex; align-items: center; gap: 0.6rem; color: rgba(255, 255, 255, 0.75); }
.u-breadcrumb li + li::before { content: "/"; color: rgba(255, 255, 255, 0.45); }
.u-breadcrumb a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.u-breadcrumb a:hover { color: var(--u-sun); }
.u-breadcrumb [aria-current="page"] { color: #fff; font-weight: 600; }

/* ---------- 14. Footer ---------- */
.u-footer {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--u-teal); /* original footer colour #0e5f61 */
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--u-fs-sm);
}
.u-footer > * { position: relative; z-index: 1; }

/* Decorative floating bubbles */
.u-footer > .u-footer-bubble {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
    will-change: transform;
    animation: uFooterBubble 14s ease-in-out infinite;
}
.u-footer-bubble--1 { width: 120px; height: 120px; top: -40px; left: 6%; }
.u-footer-bubble--2 { width: 56px; height: 56px; top: 38%; left: 46%; animation-duration: 11s; animation-delay: -3s; }
.u-footer-bubble--3 { width: 88px; height: 88px; bottom: 18%; right: 8%; animation-duration: 16s; animation-delay: -6s; }
.u-footer-bubble--4 { width: 34px; height: 34px; top: 22%; right: 28%; animation-duration: 12s; animation-delay: -2s; }
.u-footer-bubble--5 { width: 180px; height: 180px; bottom: -90px; left: 30%; animation-duration: 18s; animation-delay: -8s; }
@keyframes uFooterBubble {
    0%, 100% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(12px, -10px, 0); }
    50% { transform: translate3d(0, -18px, 0); }
    75% { transform: translate3d(-12px, -8px, 0); }
}
@media (max-width: 767.98px) { .u-footer-bubble--2, .u-footer-bubble--4 { display: none; } }
.u-footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.u-footer a:hover { color: var(--u-sun); }
.u-footer-cta {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.u-footer-cta .u-cta-inner h2 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin: 0 0 0.4rem; }
.u-footer-main {
    display: grid;
    gap: 1.75rem 2rem;
    padding-block: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 575.98px) {
    .u-footer-main { gap: 1.5rem 1.25rem; }
    .u-footer-brand, .u-footer-main > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 992px) { .u-footer-main { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } }
.u-footer-brand img {
    height: 48px;
    width: auto;
    border-radius: var(--u-radius-sm);
    background: #fff;
    padding: 5px 8px;
    margin-bottom: 0.85rem;
}
.u-footer-brand p { max-width: 38ch; margin: 0 0 1rem; line-height: 1.6; }
.u-footer h3 {
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 0.85rem;
}
.u-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.u-footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.u-footer-contact li { display: flex; gap: 0.7rem; align-items: flex-start; line-height: 1.5; }
.u-footer-contact i { color: var(--u-sun); margin-top: 0.25rem; width: 1rem; text-align: center; flex-shrink: 0; }
.u-footer-contact span { word-break: break-word; }
.u-social { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.u-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background-color var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease), transform var(--u-dur) var(--u-ease);
}
.u-social a:hover { background: var(--u-sun); color: var(--u-forest); transform: translateY(-2px); }
.u-social--light a { color: var(--u-teal); background: var(--u-teal-50); border-color: var(--u-teal-100); }
.u-social--light a:hover { color: #fff; background: var(--u-teal); }
.u-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-block: 0.85rem;
    font-size: var(--u-fs-xs);
}
.u-footer-bottom .u-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
    align-items: center;
}

/* ---------- 15. Floating actions ---------- */
.u-fab-stack {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 1020;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--u-dur) var(--u-ease), transform var(--u-dur) var(--u-ease), visibility var(--u-dur);
}
.u-fab-stack.is-visible { opacity: 1; visibility: visible; transform: none; }
.u-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    color: #fff;
    background: var(--u-teal);
    box-shadow: 0 8px 20px rgba(10, 46, 38, 0.25);
    transition: transform var(--u-dur) var(--u-ease), background-color var(--u-dur) var(--u-ease);
}
.u-fab:hover { color: #fff; transform: translateY(-2px); background: var(--u-teal-600); }
.u-fab--facebook { background: #1877f2; }
.u-fab--facebook:hover { background: #0f63d1; }

/* ---------- 16. Modals ---------- */
.modal-content { border: 0; border-radius: var(--u-radius-lg); box-shadow: var(--u-shadow-lg); overflow: hidden; }
.modal-backdrop.show { opacity: 0.6; }

/* ---------- 17. Pagination ---------- */
.pagination { gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.pagination .page-link {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--u-radius-sm) !important;
    border: 1px solid var(--u-line);
    color: var(--u-forest);
    font-weight: 600;
}
.pagination .page-item.active .page-link { background: var(--u-teal); border-color: var(--u-teal); color: #fff; }
.pagination .page-link:hover { background: var(--u-teal-50); color: var(--u-teal); }

/* ---------- 18. Reveal-on-scroll ---------- */
/* Only hides content once JS has confirmed it can reveal it again. */
.u-js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--u-ease), transform 0.7s var(--u-ease);
    transition-delay: var(--reveal-delay, 0ms);
}
.u-js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ---------- 19. Utilities ---------- */
.u-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.u-text-center { text-align: center; }
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-center { display: flex; justify-content: center; }
.u-mt-section { margin-top: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.u-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--u-muted);
    background: var(--u-surface-alt);
    border: 1px dashed var(--u-line);
    border-radius: var(--u-radius-lg);
}

.u-grid > .u-empty { grid-column: 1 / -1; }
.u-section--dark .u-lead, .u-section--dark .u-text, .u-on-dark .u-lead { color: rgba(255, 255, 255, 0.8); }
.u-card--static:hover { transform: none; box-shadow: var(--u-shadow-sm); border-color: var(--u-line); }
input[type="file"]::file-selector-button {
    margin-right: 0.85rem;
    padding: 0.45rem 1rem;
    font: 600 0.9rem var(--u-font);
    color: var(--u-teal);
    background: var(--u-teal-50);
    border: 1px solid var(--u-teal-100);
    border-radius: var(--u-radius-pill);
    cursor: pointer;
}

/* ---------- 20. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .u-js [data-reveal] { opacity: 1; transform: none; }
}


/* ---------- 3. Page styles ---------- */

/* ==========================================================================
   frontend/Procurement.blade.php
   ========================================================================== */
/* Procurement notices — only what umbrella.css does not cover */
.p-proc-list { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.p-proc-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.5rem;
    height: auto;
    padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem) clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
}
.p-proc-item:hover { transform: none; box-shadow: var(--u-shadow); border-color: var(--u-teal-100); }
.p-proc-title {
    margin: 0 0 0.3rem;
    font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem);
    line-height: 1.4;
    color: var(--u-ink);
    overflow-wrap: anywhere;
}
.p-proc-date {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--u-fs-xs);
    font-weight: 600;
    color: var(--u-muted);
}
.p-proc-date i { color: var(--u-teal); }
.p-proc-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; }

/* Modal */
.p-proc-modal .modal-header {
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--u-deep);
    color: #fff;
    border: 0;
}
.p-proc-modal .modal-title { color: #fff; font-size: var(--u-fs-h3); line-height: 1.35; }
.p-proc-modal .modal-body { padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.p-proc-modal-question { font-size: var(--u-fs-h3); margin: 0 0 0.75rem; }
.p-proc-modal-answer { color: var(--u-text); line-height: 1.75; }
.p-proc-modal-photo { margin-top: 1.5rem; }
.p-proc-modal-photo img {
    display: block;
    max-width: 100%;
    max-height: 400px;
    margin-inline: auto;
    border-radius: var(--u-radius);
    object-fit: contain;
}
.p-proc-modal-files { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--u-line); }

@media (max-width: 767.98px) {
    .p-proc-item { grid-template-columns: auto minmax(0, 1fr); }
    .p-proc-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 575.98px) {
    .p-proc-item { grid-template-columns: minmax(0, 1fr); }
    .p-proc-item > .u-icon { display: none; }
    .p-proc-actions .u-btn { flex: 1 1 auto; }
    .p-proc-modal-files .u-btn { width: 100%; }
}

/* ==========================================================================
   frontend/aboutus.blade.php
   ========================================================================== */
/* About page — only what umbrella.css does not already provide */

/* Mission / vision / values cards */
.p-about-pillar { gap: 0.9rem; }
.p-about-pillar h3 { font-size: var(--u-fs-h3); margin: 0.35rem 0 0; }
.p-about-pillar p { margin: 0; font-size: var(--u-fs-sm); line-height: 1.7; }
.p-about-pillar .u-checklist {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--u-line);
}
.p-about-pillar .u-checklist li { font-size: var(--u-fs-sm); font-weight: 600; color: var(--u-ink); }

/* Programs sidebar + main column */
.p-about-layout {
    display: grid;
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
    grid-template-columns: 1fr;
    align-items: start;
}
.p-about-aside { display: grid; gap: 1.25rem; }
.p-about-programs {
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-lg);
    overflow: hidden;
    box-shadow: var(--u-shadow-sm);
}
.p-about-programs-head {
    padding: 1.15rem 1.5rem;
    background: var(--u-sun);
}
.p-about-programs-head h3 { margin: 0; font-size: 1.2rem; color: var(--u-forest); }
.p-about-programs ul { list-style: none; margin: 0; padding: 0.35rem 0; }
.p-about-programs li + li { border-top: 1px solid var(--u-line); }
.p-about-programs a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0.8rem 1.5rem;
    font-weight: 600;
    font-size: var(--u-fs-sm);
    color: var(--u-forest);
    text-decoration: none;
    transition: background-color var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease);
}
.p-about-programs a i { font-size: 0.75rem; color: var(--u-teal); flex-shrink: 0; }
.p-about-programs a:hover { background: var(--u-teal-50); color: var(--u-teal); }

.p-about-contact {
    padding: clamp(1.5rem, 1.1rem + 1vw, 2rem);
    border-radius: var(--u-radius-lg);
    background: var(--u-teal);
    color: rgba(255, 255, 255, 0.86);
}
.p-about-contact h3 { color: #fff; font-size: 1.25rem; margin: 0 0 0.5rem; }
.p-about-contact p { margin: 0; font-size: var(--u-fs-sm); }
.p-about-contact hr { border-color: rgba(255, 255, 255, 0.3); opacity: 1; margin: 1rem 0; }
.p-about-contact .p-about-phone { font-weight: 700; font-size: 1.05rem; color: #fff; }
.p-about-contact a { color: #fff; text-decoration: none; }
.p-about-contact a:hover { color: var(--u-sun); }

.p-about-main > * + * { margin-top: clamp(2.5rem, 1.8rem + 2vw, 3.5rem); }
.p-about-main .u-media { margin-bottom: 1.5rem; }
.p-about-block { padding-top: clamp(2rem, 1.6rem + 1.5vw, 2.75rem); border-top: 1px solid var(--u-line); }
.p-about-block .u-title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: 0.5rem; }
.p-about-block > .u-text { margin-bottom: 1.5rem; }
.p-about-feature { display: flex; flex-direction: row; gap: 1rem; align-items: flex-start; }
.p-about-feature h3 { font-size: 1.1rem; margin: 0 0 0.35rem; }
.p-about-feature p { margin: 0; font-size: var(--u-fs-sm); }

/* Chairperson */
.p-about-chair .u-media img { object-position: center 15%; }
.p-about-chair .u-media { max-width: 460px; }

/* Team cards: 4 / 3 / 2 / 1 */
.p-about-team {
    display: grid;
    gap: var(--u-gap);
    grid-template-columns: 1fr;
}
.p-about-team .u-card-media img { object-position: center top; }
.p-about-team .u-card-body { gap: 0.3rem; }
.p-about-team .u-card-title { font-size: 1.15rem; text-transform: capitalize; }
.p-about-role { margin: 0; font-size: var(--u-fs-sm); color: var(--u-teal); font-weight: 600; }
.p-about .u-section--dark .u-lead { color: rgba(255, 255, 255, 0.78); }
/* Board members (dark section): dark cards so the white names are readable */
.p-about .u-section--dark .p-about-team .u-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: none;
}
.p-about .u-section--dark .p-about-team .u-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.24);
}
.p-about .u-section--dark .p-about-team .u-card-title { color: #fff; }
.p-about .u-section--dark .p-about-role { color: var(--u-sun); }

@media (min-width: 576px) {
    .p-about-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .p-about-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .p-about-layout { grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr); }
    .p-about-aside { position: sticky; top: calc(var(--u-header-h) + 1.5rem); }
}
@media (min-width: 1200px) {
    .p-about-team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .p-about-chair .u-media { margin-inline: auto; }
}
@media (max-width: 767.98px) {
    .p-about-programs a { padding-inline: 1.15rem; }
}
@media (max-width: 575.98px) {
    .p-about-feature { flex-direction: column; }
    .p-about-team { max-width: 380px; margin-inline: auto; }
}

/* ==========================================================================
   frontend/apply-career.blade.php
   ========================================================================== */
/* Application page — only what umbrella.css does not cover */
.p-apply.p-apply--career .u-split { align-items: start; }
.p-apply.p-apply--career .u-card { height: auto; }
.p-apply.p-apply--career .u-card:hover { transform: none; box-shadow: var(--u-shadow-sm); border-color: var(--u-line); }
.p-apply--career .p-apply-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.p-apply--career .p-apply-card-head h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); margin: 0; }
.p-apply--career .p-apply-job {
    margin-top: 1.25rem;
    padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
    background: var(--u-surface-tint);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
}
.p-apply--career .p-apply-job h3 { font-size: var(--u-fs-h3); margin: 0 0 0.85rem; }
.p-apply--career .p-apply-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.4rem 1rem;
    margin: 0 0 1rem;
    font-size: var(--u-fs-sm);
}
.p-apply--career .p-apply-facts dt { font-weight: 700; color: var(--u-ink); }
.p-apply--career .p-apply-facts dd { margin: 0; color: var(--u-text); overflow-wrap: anywhere; }
.p-apply--career .p-apply-block { font-size: var(--u-fs-sm); }
.p-apply--career .p-apply-block h4 { font-size: 1rem; margin: 1rem 0 0.35rem; }
.p-apply--career .p-apply-hint { display: block; margin-top: 0.35rem; font-size: var(--u-fs-xs); color: var(--u-muted); }
.p-apply--career .p-apply-req { color: #b42318; }
.p-apply--career .p-apply-alert { border-radius: var(--u-radius-sm); margin: 0 0 1rem; }
.p-apply--career .p-apply-cta { margin-top: 1.25rem; }
.p-apply.p-apply--career .u-form input[type="file"] { padding: 0.6rem 0.75rem; cursor: pointer; }
.p-apply.p-apply--career .u-form input[type="file"]::file-selector-button {
    margin-right: 0.85rem;
    padding: 0.45rem 0.9rem;
    font-weight: 600;
    color: var(--u-teal);
    background: var(--u-teal-50);
    border: 1px solid var(--u-teal-100);
    border-radius: var(--u-radius-pill);
    cursor: pointer;
}
@media (min-width: 992px) {
    .p-apply--career .p-apply-summary { position: sticky; top: calc(var(--u-header-h) + 1.5rem); }
}
@media (max-width: 575.98px) {
    .p-apply.p-apply--career .u-btn-group .u-btn { width: 100%; }
    .p-apply--career .p-apply-facts { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
    .p-apply--career .p-apply-facts dd + dt { margin-top: 0.5rem; }
}

/* ==========================================================================
   frontend/apply.blade.php
   ========================================================================== */
/* Demand application page — only what umbrella.css does not cover */
.p-apply.p-apply--vacancy .u-split { align-items: start; }
.p-apply.p-apply--vacancy .u-card { height: auto; }
.p-apply.p-apply--vacancy .u-card:hover { transform: none; box-shadow: var(--u-shadow-sm); border-color: var(--u-line); }
.p-apply--vacancy .p-apply-summary h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); margin: 0 0 0.6rem; }
.p-apply--vacancy .p-apply-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.4rem 1rem;
    margin: 1.25rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--u-line);
    font-size: var(--u-fs-sm);
}
.p-apply--vacancy .p-apply-facts dt { font-weight: 700; color: var(--u-ink); }
.p-apply--vacancy .p-apply-facts dd { margin: 0; color: var(--u-text); overflow-wrap: anywhere; }
.p-apply--vacancy .p-apply-form-title { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); margin: 0 0 1.25rem; }
.p-apply--vacancy .p-apply-req { color: #b42318; }
.p-apply--vacancy .p-apply-hint { font-weight: 500; color: var(--u-muted); }
.p-apply.p-apply--vacancy .u-form input[type="file"] { padding: 0.6rem 0.75rem; cursor: pointer; }
.p-apply.p-apply--vacancy .u-form input[type="file"]::file-selector-button {
    margin-right: 0.85rem;
    padding: 0.45rem 0.9rem;
    font-weight: 600;
    color: var(--u-teal);
    background: var(--u-teal-50);
    border: 1px solid var(--u-teal-100);
    border-radius: var(--u-radius-pill);
    cursor: pointer;
}
.p-apply--vacancy .p-apply-captcha { max-width: 100%; overflow-x: auto; }
@media (min-width: 992px) {
    .p-apply--vacancy .p-apply-summary { position: sticky; top: calc(var(--u-header-h) + 1.5rem); }
}
@media (max-width: 575.98px) {
    .p-apply.p-apply--vacancy .u-btn { width: 100%; }
    .p-apply--vacancy .p-apply-facts { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
    .p-apply--vacancy .p-apply-facts dd + dt { margin-top: 0.5rem; }
}
@media (max-width: 359.98px) {
    /* reCAPTCHA is a fixed 304px iframe; scale it down on very small phones */
    .p-apply--vacancy .p-apply-captcha .g-recaptcha { transform: scale(0.88); transform-origin: 0 0; }
}

/* ==========================================================================
   frontend/blogpostcategories.blade.php
   ========================================================================== */
/* Articles & Insights — only what the design system does not cover */
.p-blog .p-blog-grid > .p-blog-featured,
.p-blog .p-blog-grid > .u-empty { grid-column: 1 / -1; }
@media (min-width: 576px) and (max-width: 991.98px) {
    .p-blog .p-blog-featured .u-card-media { aspect-ratio: 2 / 1; }
}
@media (min-width: 992px) {
    .p-blog .p-blog-featured .u-card { flex-direction: row; }
    .p-blog .p-blog-featured .u-card-media { flex: 0 0 58%; aspect-ratio: auto; min-height: 360px; }
    .p-blog .p-blog-featured .u-card-body { justify-content: center; padding: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
    .p-blog .p-blog-featured .u-card-title { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); -webkit-line-clamp: 3; }
    .p-blog .p-blog-featured .u-card-text { -webkit-line-clamp: 5; font-size: var(--u-fs-body); }
}

/* Value flow — decorative circles */
.p-flow-grid {
    display: grid;
    gap: clamp(2rem, 1.4rem + 2vw, 3rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    text-align: center;
}
.p-flow-grid > .p-flow-last { grid-column: 1 / -1; }
.p-flow .p-flow-item { position: relative; display: flex; flex-direction: column; align-items: center; }
.p-flow .circle-img {
    position: relative;
    width: min(220px, 100%);
    aspect-ratio: 1 / 1;
    padding: 10px;
    border-radius: 50%;
    border: 2px dashed var(--u-teal);
    background: var(--u-teal-50);
}
.p-flow .circle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.p-flow .label-tag {
    position: absolute;
    right: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: var(--u-shadow-sm);
}
.p-flow .central-logo img {
    width: min(200px, 100%);
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
.p-flow .flow-caption {
    margin: 1rem 0 0;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--u-ink);
}

@media (max-width: 991.98px) {
    .p-flow .circle-img { width: min(180px, 100%); }
    .p-flow .central-logo img { width: min(160px, 100%); }
}
@media (max-width: 767.98px) {
    .p-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-flow-grid > .p-flow-logo { grid-column: 1 / -1; order: -1; }
    .p-flow .label-tag { right: -0.25rem; }
}
@media (max-width: 575.98px) {
    .p-flow-grid { grid-template-columns: 1fr; }
    .p-flow .circle-img { width: min(170px, 100%); }
    .p-flow .label-tag { right: 0; }
}

/* ==========================================================================
   frontend/blogpostcategory.blade.php
   ========================================================================== */
/* Single article — only what the design system does not cover */
.p-article .p-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-bottom: 1.5rem;
    font-size: var(--u-fs-sm);
    color: var(--u-muted);
}
.p-article .p-article-meta time { display: inline-flex; align-items: center; gap: 0.4rem; }
.p-article .p-article-figure { margin: 0 0 clamp(1.75rem, 1.3rem + 1.5vw, 2.75rem); }
.p-article .u-prose {
    font-size: 1.0625rem;
    line-height: 1.8;
    white-space: pre-line; /* content is plain text: keep its line breaks */
    overflow-wrap: anywhere;
}
.p-article .p-article-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--u-line);
}

@media (max-width: 991.98px) {
    .p-article .u-prose { font-size: 1.03rem; }
}
@media (max-width: 767.98px) {
    .p-article .p-article-figure .u-media { border-radius: var(--u-radius); }
}
@media (max-width: 575.98px) {
    .p-article .u-prose { font-size: 1rem; line-height: 1.75; }
}

/* ==========================================================================
   frontend/career.blade.php
   ========================================================================== */
/* Career listing — only what umbrella.css does not cover */
.p-career-list { display: grid; gap: var(--u-gap); list-style: none; margin: 0; padding: 0; }
.p-career-job {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
}
.p-career-job:hover { transform: none; box-shadow: var(--u-shadow); border-color: var(--u-teal-100); }
.p-career-job--media { grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); }
.p-career-job .u-card-media { aspect-ratio: auto; min-height: 100%; }
.p-career-job .u-card-media img { position: absolute; inset: 0; }
.p-career-job .u-card-body { gap: 0.85rem; }
.p-career-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}
.p-career-head .u-card-title { -webkit-line-clamp: 3; }
.p-career-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.p-career-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: var(--u-fs-xs);
    font-weight: 600;
    color: var(--u-ink);
    background: var(--u-surface-alt);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-pill);
}
.p-career-chip i { color: var(--u-teal); }
.p-career-chip--deadline { background: var(--u-teal-50); border-color: var(--u-teal-100); }
.p-career-chip--closed { color: #b42318; }
.p-career-chip--closed i { color: currentColor; }
.p-career-req { margin: 0; font-size: var(--u-fs-sm); }
.p-career-req strong { color: var(--u-ink); }
.p-career-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.25rem; }
.p-career-details {
    padding-top: 1rem;
    border-top: 1px solid var(--u-line);
    font-size: var(--u-fs-sm);
}
.p-career-details h4 { font-size: 1rem; margin: 0 0 0.35rem; }
.p-career-details > div + div { margin-top: 1rem; }
.p-career-empty .u-icon { margin-bottom: 1rem; }
.p-career-empty h3 { color: var(--u-ink); font-size: var(--u-fs-h3); }

@media (max-width: 991.98px) {
    .p-career-job--media { grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .p-career-job--media { grid-template-columns: minmax(0, 1fr); }
    .p-career-job .u-card-media { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 575.98px) {
    .p-career-actions .u-btn { width: 100%; }
}

/* ==========================================================================
   frontend/careerapply.blade.php
   ========================================================================== */
/* Volunteer application page — only what umbrella.css does not cover */
.p-apply.p-apply--careerapply .u-split { align-items: start; }
.p-apply.p-apply--careerapply .u-card { height: auto; }
.p-apply.p-apply--careerapply .u-card:hover { transform: none; box-shadow: var(--u-shadow-sm); border-color: var(--u-line); }
.p-apply--careerapply .p-apply-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.p-apply--careerapply .p-apply-card-head h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); margin: 0; }
.p-apply--careerapply .p-apply-job {
    margin-top: 1.25rem;
    padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
    background: var(--u-surface-tint);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
}
.p-apply--careerapply .p-apply-job h3 { font-size: var(--u-fs-h3); margin: 0 0 0.85rem; }
.p-apply--careerapply .p-apply-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.4rem 1rem;
    margin: 0 0 1rem;
    font-size: var(--u-fs-sm);
}
.p-apply--careerapply .p-apply-facts dt { font-weight: 700; color: var(--u-ink); }
.p-apply--careerapply .p-apply-facts dd { margin: 0; color: var(--u-text); overflow-wrap: anywhere; }
.p-apply--careerapply .p-apply-block { font-size: var(--u-fs-sm); }
.p-apply--careerapply .p-apply-block h4 { font-size: 1rem; margin: 1rem 0 0.35rem; }
.p-apply--careerapply .p-apply-cta { margin-top: 1.25rem; }
.p-apply--careerapply .p-apply-req { color: #b42318; }
.p-apply.p-apply--careerapply .u-form input[type="file"] { padding: 0.6rem 0.75rem; cursor: pointer; }
.p-apply.p-apply--careerapply .u-form input[type="file"]::file-selector-button {
    margin-right: 0.85rem;
    padding: 0.45rem 0.9rem;
    font-weight: 600;
    color: var(--u-teal);
    background: var(--u-teal-50);
    border: 1px solid var(--u-teal-100);
    border-radius: var(--u-radius-pill);
    cursor: pointer;
}
@media (min-width: 992px) {
    .p-apply--careerapply .p-apply-summary { position: sticky; top: calc(var(--u-header-h) + 1.5rem); }
}
@media (max-width: 575.98px) {
    .p-apply.p-apply--careerapply .u-btn-group .u-btn { width: 100%; }
    .p-apply--careerapply .p-apply-facts { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
    .p-apply--careerapply .p-apply-facts dd + dt { margin-top: 0.5rem; }
}

/* ==========================================================================
   frontend/contactpage.blade.php
   ========================================================================== */
/* Contact page — only what umbrella.css does not cover */
.p-contact .u-split { align-items: start; }

.p-contact-info { display: grid; gap: 1rem; }
.p-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  height: auto;
}
.p-contact-item:hover { transform: none; }
.p-contact-item h3 {
  font-size: 1.05rem;
  margin: 0 0 0.2rem;
}
.p-contact-item .u-small { margin: 0 0 0.5rem; color: var(--u-muted); }
.p-contact-values { margin: 0; padding: 0; list-style: none; }
.p-contact-values li {
  font-weight: 600;
  color: var(--u-ink);
  overflow-wrap: anywhere;
}
.p-contact-values a { color: var(--u-ink); text-decoration: none; }
.p-contact-values a:hover { color: var(--u-teal); text-decoration: underline; }
.p-contact-social h3 {
  font-size: var(--u-fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--u-muted);
  margin: 0.75rem 0 0.75rem;
}

.p-contact-form-card { height: auto; }
.p-contact-form-card:hover { transform: none; box-shadow: var(--u-shadow-sm); border-color: var(--u-line); }
.p-contact-form-card .u-title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.p-contact-req { color: #b42318; }
.p-contact-check { display: flex; gap: 0.6rem; align-items: flex-start; }
.p-contact-check .form-check-input { margin-top: 0.25rem; flex-shrink: 0; }
.p-contact-check label { font-size: var(--u-fs-sm); color: var(--u-text); }

.p-contact-map {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--u-line);
}
.p-contact-map iframe { border: 0; }

@media (max-width: 767.98px) {
  .p-contact-map { aspect-ratio: 4 / 3; }
}
@media (max-width: 575.98px) {
  .p-contact-item { gap: 0.85rem; }
  .p-contact-item .u-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 1.1rem; }
  .p-contact .u-btn { width: 100%; }
}

/* ==========================================================================
   frontend/donation.blade.php
   ========================================================================== */
/* =========================================================
   DONATION PAGE
========================================================= */

.donation-page {
    overflow: hidden;
}


/* =========================================================
   DONATION HERO
========================================================= */

.donation-hero {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}

.donation-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 32, 25, 0.92) 0%,
            rgba(7, 32, 25, 0.78) 45%,
            rgba(7, 32, 25, 0.48) 100%
        );

    z-index: 1;
}

.donation-hero .container {
    position: relative;
    z-index: 2;
}

.donation-hero-row {
    padding: 38px 0;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.donation-content {
    max-width: 670px;
    padding: 8px 0;
}

.donation-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 15px;
    padding: 7px 13px;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 30px;

    color: #d9f0df;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
    text-transform: uppercase;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.donation-eyebrow-line {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;

    background: #9fddb0;

    border-radius: 50%;

    box-shadow:
        0 0 0 4px rgba(159, 221, 176, 0.12);
}


/* =========================================================
   HERO TITLE
========================================================= */

.donation-title {
    max-width: 650px;

    margin: 0 0 17px;

    color: #ffffff;

    font-size: clamp(38px, 4.2vw, 58px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.7px;

    text-shadow:
        0 4px 18px rgba(0, 0, 0, 0.22);
}

.donation-title::after {
    content: "";

    display: block;

    width: 55px;
    height: 3px;

    margin-top: 16px;

    background: #9fddb0;

    border-radius: 10px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.donation-description {
    max-width: 600px;

    margin-bottom: 22px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 15px;

    line-height: 1.7;

    font-weight: 400;
}


/* =========================================================
   IMPACT LIST
========================================================= */

.donation-list {
    max-width: 600px;

    padding: 15px 17px;

    background: rgba(255, 255, 255, 0.07);

    border-left:
        2px solid rgba(159, 221, 176, 0.65);

    border-radius: 0 12px 12px 0;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.donation-list ul {
    display: flex;
    flex-direction: column;
    gap: 9px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.donation-list li {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    color: rgba(255, 255, 255, 0.94);

    font-size: 13px;

    line-height: 1.5;
}

.donation-check {
    flex: 0 0 20px;

    width: 20px;
    height: 20px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    color: #2f8b45;

    font-size: 9px;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.12);
}

.donation-list-text {
    padding-top: 1px;
}


/* =========================================================
   DONATION PANEL
========================================================= */

.donation-panel {
    width: 100%;

    max-width: 470px;

    margin-left: auto;

    background: #fff;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.25);
}

.donation-panel-header {
    position: relative;

    padding: 17px 22px;

    background:
        linear-gradient(
            135deg,
            #116b6b,
            #2f8b45
        );

    color: #fff;

    overflow: hidden;
}

.donation-panel-header::after {
    content: "";

    position: absolute;

    width: 75px;
    height: 75px;

    right: -25px;
    top: -35px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.08);
}

.donation-panel-header-content {
    position: relative;
    z-index: 2;
}

.donation-panel-icon {
    width: 36px;
    height: 36px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 7px;

    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.15);

    font-size: 16px;
}

.donation-panel-header h2 {
    margin: 0 0 4px;

    color: #fff;

    font-size: 20px;

    font-weight: 700;
}

.donation-panel-header p {
    margin: 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: 12px;

    line-height: 1.45;
}


/* =========================================================
   PANEL BODY
========================================================= */

.donation-panel-body {
    padding: 16px 20px 18px;

    background: #fff;
}


/* =========================================================
   BANK DETAILS CARD
========================================================= */

:is(.donation-page, .donation-page-modal) .bank-details-card {
    margin-bottom: 10px;

    padding: 12px 15px;

    background: #f5faf6;

    border:
        1px solid #dcebe0;

    border-radius: 11px;
}


/* =========================================================
   BANK TITLE
========================================================= */

:is(.donation-page, .donation-page-modal) .bank-details-title {
    display: flex;

    align-items: center;

    gap: 7px;

    margin: 0 0 7px;

    padding-bottom: 7px;

    border-bottom:
        1px solid #dce8df;

    color: #214d40;

    font-size: 13px;

    font-weight: 700;
}

:is(.donation-page, .donation-page-modal) .bank-details-title i {
    color: #2f8b45;
}


/* =========================================================
   BANK DETAIL ROW
========================================================= */

:is(.donation-page, .donation-page-modal) .bank-detail-row {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 8px;

    padding: 8px 0;

    border-bottom:
        1px solid #e3ece6;

    font-size: 11px;
}

:is(.donation-page, .donation-page-modal) .bank-detail-row:last-child {
    border-bottom: none;

    padding-bottom: 0;
}

:is(.donation-page, .donation-page-modal) .bank-detail-row span {
    flex: 1;

    color: #737b75;
}

:is(.donation-page, .donation-page-modal) .bank-detail-row strong {
    flex: 1.2;

    color: #214b42;

    font-weight: 600;

    text-align: right;

    word-break: break-word;
}


/* =========================================================
   BANK QR / PAYMENT IMAGE
========================================================= */

:is(.donation-page, .donation-page-modal) .bank-image-wrapper {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    margin-top: 14px;

    padding-top: 14px;

    border-top:
        1px solid #dce8df;

    text-align: center;
}

:is(.donation-page, .donation-page-modal) .bank-image-label {
    display: block;

    margin-bottom: 9px;

    color: #214d40;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}

:is(.donation-page, .donation-page-modal) .bank-account-image {
    display: block;

    width: 100%;

    max-width: 256px !important;

    height: auto;

    object-fit: contain;

    padding: 8px;

    background: #ffffff;

    border:
        1px solid #dcebe0;

    border-radius: 10px;

    box-shadow:
        0 5px 18px rgba(31, 48, 38, 0.08);

}




/* =========================================================
   THANK YOU
========================================================= */

:is(.donation-page, .donation-page-modal) .donate-thankyou {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    padding: 10px 12px;

    background: #fff8df;

    border:
        1px solid #f0e2ae;

    border-radius: 9px;

    color: #705d24;

    font-size: 11px;

    line-height: 1.45;
}

:is(.donation-page, .donation-page-modal) .donate-thankyou i {
    margin-top: 2px;

    color: #b39432;
}


/* =========================================================
   EMPTY BANK
========================================================= */

:is(.donation-page, .donation-page-modal) .bank-empty {
    padding: 18px;

    background: #f7f7f7;

    border-radius: 10px;

    color: #777;

    text-align: center;

    font-size: 12px;
}


/* =========================================================
   EMPTY DONATION
========================================================= */

.donation-empty {
    padding: 80px 20px;

    background: #f7faf8;

    color: #555;

    text-align: center;
}


/* =========================================================
   POST DONATION SECTION
========================================================= */

.post-donation-section {
    padding: 60px 0;

    background: #f7faf8;
}


/* =========================================================
   SECTION INTRO
========================================================= */

.post-donation-intro {
    max-width: 760px;

    margin: 0 auto 70px;

    text-align: center;
}

.post-donation-label {
    display: inline-block;

    margin-bottom: 12px;

    color: #2f8b45;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}

.post-donation-intro h2 {
    margin: 0 0 18px;

    color: #1f2922;

    font-size: clamp(30px, 4vw, 44px);

    line-height: 1.2;

    font-weight: 750;

    letter-spacing: -0.5px;
}

.post-donation-intro p {
    max-width: 650px;

    margin: auto;

    color: #69736c;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   POST WRAPPER
========================================================= */

.post-donation-wrapper {
    max-width: 1180px;

    margin: auto;
}


/* =========================================================
   POST ROW
========================================================= */

.post-donation-row {
    position: relative;

    display: flex;

    align-items: stretch;

    min-height: 420px;

    margin-bottom: 65px;

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 12px 45px rgba(31, 48, 38, 0.08);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.post-donation-row:hover {
    transform: translateY(-4px);

    box-shadow:
        0 20px 55px rgba(31, 48, 38, 0.12);
}

.post-donation-row:last-child {
    margin-bottom: 0;
}

.post-donation-row.reverse {
    flex-direction: row-reverse;
}


/* =========================================================
   POST DONATION PHOTO
========================================================= */

.post-donation-photo {
    position: relative;

    width: 50%;

    min-height: 420px;

    overflow: hidden;

    background: #e9eee9;
}


/* =========================================================
   PHOTO OVERLAY
========================================================= */

.post-donation-photo::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 65%,
            rgba(0, 0, 0, 0.18)
        );

    pointer-events: none;

    z-index: 5;
}


/* =========================================================
   CAROUSEL
========================================================= */

.post-donation-photo .carousel {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 420px;
}

.post-donation-photo .carousel-inner {
    width: 100%;
    height: 100%;

    min-height: 420px;
}

.post-donation-photo .carousel-item {
    width: 100%;
    height: 100%;

    min-height: 420px;
}

.post-donation-photo .carousel-item img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 420px;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}


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

.post-donation-photo > img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 420px;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}


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

.post-donation-row:hover
.post-donation-photo img {
    transform: scale(1.035);
}


/* =========================================================
   CAROUSEL CONTROLS
========================================================= */

.post-donation-photo .carousel-control-prev,
.post-donation-photo .carousel-control-next {
    z-index: 10;

    width: 42px;
    height: 42px;

    top: 50%;

    transform: translateY(-50%);

    margin: 0 15px;

    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.35);

    opacity: 0.75;

    transition:
        all 0.3s ease;
}

.post-donation-photo .carousel-control-prev:hover,
.post-donation-photo .carousel-control-next:hover {
    background:
        rgba(47, 139, 69, 0.9);

    opacity: 1;
}


/* =========================================================
   CAROUSEL INDICATORS
========================================================= */

.post-donation-photo .carousel-indicators {
    z-index: 10;

    margin-bottom: 15px;
}

.post-donation-photo .carousel-indicators button {
    width: 8px;
    height: 8px;

    margin: 0 4px;

    border: none;

    border-radius: 50%;

    opacity: 0.6;
}

.post-donation-photo .carousel-indicators .active {
    opacity: 1;
}


/* =========================================================
   POST CONTENT
========================================================= */

.post-donation-info {
    width: 50%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 55px 60px;
}


/* =========================================================
   DATE
========================================================= */

.post-donation-date {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 15px;

    color: #2f8b45;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.5px;

    text-transform: uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.post-donation-info h3 {
    max-width: 530px;

    margin: 0 0 17px;

    color: #202820;

    font-size: 32px;

    line-height: 1.25;

    font-weight: 750;
}


/* =========================================================
   SHORT DESCRIPTION
========================================================= */

.post-donation-short {
    margin: 0 0 15px;

    color: #3f4942;

    font-size: 17px;

    line-height: 1.7;

    font-weight: 500;
}


/* =========================================================
   CONTENT PREVIEW
========================================================= */

.post-donation-impact {
    max-width: 560px;

    margin-bottom: 22px;

    color: #727b74;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   FULL CONTENT
========================================================= */

.post-donation-full-content {
    margin-bottom: 22px;

    color: #626b64;

    font-size: 15px;

    line-height: 1.8;

    overflow-wrap: break-word;
}

.post-donation-full-content p {
    margin-bottom: 14px;
}


/* =========================================================
   ACTIONS
========================================================= */

.post-donation-actions {
    margin-top: 4px;

    display: flex;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;
}


/* =========================================================
   LEARN MORE
========================================================= */

.post-donation-read {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #2f8b45;

    font-size: 14px;

    font-weight: 800;

    text-decoration: none;

    transition:
        color 0.25s ease;
}

.post-donation-read:hover {
    color: #1e6832;
}

.post-donation-read i {
    transition:
        transform 0.25s ease;
}

.post-donation-read:hover i {
    transform: translateX(5px);
}

.post-donation-read[aria-expanded="true"] i {
    transform: rotate(90deg);
}


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

.post-donation-donate {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 10px 23px;

    background: #2f8b45;

    color: #fff;

    border-radius: 25px;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    transition:
        all 0.3s ease;
}

.post-donation-donate:hover {
    background: #216832;

    color: #fff;

    transform: translateY(-2px);
}


/* =========================================================
   DONATE MODAL
========================================================= */

:is(.donation-page, .donation-page-modal) .donate-modal {
    border: 0;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25);
}

:is(.donation-page, .donation-page-modal) .donate-modal .modal-header {
    background:
        linear-gradient(
            135deg,
            #116b6b,
            #2f8b45
        );

    color: #fff;

    padding: 20px 25px;

    border-bottom: 0;
}

:is(.donation-page, .donation-page-modal) .donate-modal .modal-title {
    font-size: 20px;

    font-weight: 700;
}

:is(.donation-page, .donation-page-modal) .donate-modal .btn-close {
    filter: brightness(0) invert(1);

    opacity: 0.9;
}

:is(.donation-page, .donation-page-modal) .donate-modal .modal-body {
    padding: 25px;

    background: #fff;
}

:is(.donation-page, .donation-page-modal) .donate-intro {
    color: #555;

    font-size: 14px;

    line-height: 1.6;

    margin-bottom: 20px;
}


/* =========================================================
   MODAL BANK CARD
========================================================= */

:is(.donation-page, .donation-page-modal) .donate-modal .bank-details-card {
    margin-bottom: 15px;

    padding: 17px;

    background: #f5faf7;

    border:
        1px solid #dcebe3;

    border-radius: 13px;
}

:is(.donation-page, .donation-page-modal) .donate-modal .bank-details-title {
    margin-bottom: 9px;

    padding-bottom: 9px;

    font-size: 14px;
}

:is(.donation-page, .donation-page-modal) .donate-modal .bank-detail-row {
    padding: 9px 0;

    font-size: 12px;
}

:is(.donation-page, .donation-page-modal) .donate-modal .bank-detail-row span {
    color: #737b75;
}

:is(.donation-page, .donation-page-modal) .donate-modal .bank-detail-row strong {
    color: #214b42;

    font-weight: 600;
}


/* =========================================================
   MODAL QR IMAGE
========================================================= */

:is(.donation-page, .donation-page-modal) .donate-modal .bank-image-wrapper {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin-top: 16px;

    padding-top: 16px;

    border-top:
        1px solid #dce8df;

    text-align: center;
}

:is(.donation-page, .donation-page-modal) .donate-modal .bank-image-label {
    display: block;

    margin-bottom: 10px;

    color: #214d40;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}

:is(.donation-page, .donation-page-modal) .donate-modal .bank-account-image {
    display: block;

    width: 256px !important;

    max-width: 100%;

    height: auto;

    padding: 8px;

    background: #fff;

    border:
        1px solid #dcebe0;

    border-radius: 11px;

    object-fit: contain;

    box-shadow:
        0 6px 20px rgba(31, 48, 38, 0.08);
}


/* =========================================================
   MODAL THANK YOU
========================================================= */

:is(.donation-page, .donation-page-modal) .donate-modal .donate-thankyou {
    margin-top: 15px;

    padding: 12px 14px;

    background: #fff8df;

    border:
        1px solid #f0e2ae;

    border-radius: 10px;

    color: #705d24;

    font-size: 12px;

    line-height: 1.5;

    text-align: center;
}

:is(.donation-page, .donation-page-modal) .donate-modal .donate-thankyou i {
    margin-right: 5px;

    color: #b39432;
}


/* =========================================================
   MODAL FOOTER
========================================================= */

:is(.donation-page, .donation-page-modal) .donate-modal .modal-footer {
    padding: 15px 25px;

    background: #fff;

    border-top:
        1px solid #eee;
}

:is(.donation-page, .donation-page-modal) .donate-modal .modal-footer .btn {
    padding: 9px 22px;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 600;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .donation-hero {
        min-height: auto;

        padding: 35px 0;
    }

    .donation-hero-row {
        padding: 5px 0;
    }

    .donation-content {
        max-width: 100%;

        padding: 0 0 15px;
    }

    .donation-title {
        font-size: 42px;
    }

    .donation-description {
        font-size: 16px;
    }

    .donation-panel {
        max-width: 100%;

        margin: 0;
    }

    .post-donation-section {
        padding: 80px 0;
    }

    .post-donation-row,
    .post-donation-row.reverse {
        flex-direction: column;
    }

    .post-donation-photo {
        width: 100%;

        height: 350px;

        min-height: 350px;
    }

    .post-donation-photo .carousel,
    .post-donation-photo .carousel-inner,
    .post-donation-photo .carousel-item {
        height: 350px;

        min-height: 350px;
    }

    .post-donation-photo .carousel-item img,
    .post-donation-photo > img {
        min-height: 350px;
    }

    .post-donation-info {
        width: 100%;

        padding: 45px;
    }
}


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

@media (max-width: 576px) {

    .donation-hero {
        padding: 30px 0;
    }

    .donation-hero-row {
        padding: 0;
    }

    .donation-content {
        padding: 0;
    }

    .donation-eyebrow {
        margin-bottom: 12px;

        padding: 6px 11px;

        font-size: 9px;

        letter-spacing: 1.7px;
    }

    .donation-eyebrow-line {
        width: 6px;
        height: 6px;

        flex-basis: 6px;
    }

    .donation-title {
        margin-bottom: 14px;

        font-size: 31px;

        line-height: 1.12;

        letter-spacing: -0.7px;
    }

    .donation-title::after {
        width: 42px;

        height: 2px;

        margin-top: 12px;
    }

    .donation-description {
        margin-bottom: 17px;

        font-size: 13px;

        line-height: 1.6;
    }

    .donation-list {
        padding: 12px 13px;
    }

    .donation-list ul {
        gap: 8px;
    }

    .donation-list li {
        gap: 8px;

        font-size: 12px;
    }

    .donation-check {
        flex-basis: 19px;

        width: 19px;
        height: 19px;

        font-size: 8px;
    }


    /* =====================================================
       PANEL
    ====================================================== */

    .donation-panel {
        border-radius: 13px;
    }

    .donation-panel-header {
        padding: 13px 17px;
    }

    .donation-panel-icon {
        width: 32px;
        height: 32px;

        margin-bottom: 6px;

        font-size: 14px;
    }

    .donation-panel-header h2 {
        font-size: 19px;
    }

    .donation-panel-header p {
        font-size: 11px;
    }

    .donation-panel-body {
        padding: 13px 15px 15px;
    }

    :is(.donation-page, .donation-page-modal) .bank-details-card {
        padding: 12px;

        margin-bottom: 8px;
    }

    :is(.donation-page, .donation-page-modal) .bank-details-title {
        font-size: 12px;

        margin-bottom: 6px;

        padding-bottom: 6px;
    }

    :is(.donation-page, .donation-page-modal) .bank-detail-row {
        gap: 4px;

        padding: 3px 0;

        font-size: 10px;
    }

    :is(.donation-page, .donation-page-modal) .bank-detail-row span {
        flex: 1;
    }

    :is(.donation-page, .donation-page-modal) .bank-detail-row strong {
        flex: 1.2;
    }


    /* =====================================================
       BANK IMAGE MOBILE
    ====================================================== */

    :is(.donation-page, .donation-page-modal) .bank-image-wrapper {
        margin-top: 12px;

        padding-top: 12px;
    }

    :is(.donation-page, .donation-page-modal) .bank-image-label {
        margin-bottom: 7px;

        font-size: 9px;
    }

    :is(.donation-page, .donation-page-modal) .bank-account-image {
        max-width: 256px !important;

        padding: 6px;

        border-radius: 8px;
    }


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

    :is(.donation-page, .donation-page-modal) .donate-modal {
        margin: 10px;

        border-radius: 14px;
    }

    :is(.donation-page, .donation-page-modal) .donate-modal .modal-header {
        padding: 16px 18px;
    }

    :is(.donation-page, .donation-page-modal) .donate-modal .modal-title {
        font-size: 18px;
    }

    :is(.donation-page, .donation-page-modal) .donate-modal .modal-body {
        padding: 18px;
    }

    :is(.donation-page, .donation-page-modal) .donate-intro {
        font-size: 13px;
    }

    :is(.donation-page, .donation-page-modal) .donate-modal .bank-details-card {
        padding: 13px;
    }

    :is(.donation-page, .donation-page-modal) .donate-modal .bank-detail-row {
        flex-direction: column;

        gap: 3px;

        font-size: 11px;
    }

    :is(.donation-page, .donation-page-modal) .donate-modal .bank-detail-row strong {
        text-align: left;
    }

    :is(.donation-page, .donation-page-modal) .donate-modal .bank-account-image {
        width: 256px !important;
    }

    :is(.donation-page, .donation-page-modal) .donate-modal .modal-footer {
        padding: 13px 18px;
    }


    /* =====================================================
       THANK YOU
    ====================================================== */

    :is(.donation-page, .donation-page-modal) .donate-thankyou {
        padding: 9px 10px;

        font-size: 10px;
    }


    /* =====================================================
       POST DONATION
    ====================================================== */

    .post-donation-section {
        padding: 60px 0;
    }

    .post-donation-intro {
        margin-bottom: 45px;
    }

    .post-donation-intro h2 {
        font-size: 30px;
    }

    .post-donation-intro p {
        font-size: 14px;
    }

    .post-donation-row {
        margin-bottom: 40px;

        border-radius: 14px;
    }

    .post-donation-photo {
        height: 240px;

        min-height: 240px;
    }

    .post-donation-photo .carousel,
    .post-donation-photo .carousel-inner,
    .post-donation-photo .carousel-item {
        height: 240px;

        min-height: 240px;
    }

    .post-donation-photo .carousel-item img,
    .post-donation-photo > img {
        min-height: 240px;
    }

    .post-donation-photo .carousel-control-prev,
    .post-donation-photo .carousel-control-next {
        width: 34px;
        height: 34px;

        margin: 0 8px;
    }

    .post-donation-photo .carousel-indicators {
        margin-bottom: 8px;
    }

    .post-donation-info {
        padding: 30px 25px;
    }

    .post-donation-info h3 {
        font-size: 24px;
    }

    .post-donation-short {
        font-size: 15px;
    }

    .post-donation-impact {
        font-size: 14px;
    }

    .post-donation-full-content {
        font-size: 14px;
    }

}


/* =========================================================
   POLISH — same layout, refined visuals (brand tokens from umbrella.css)
========================================================= */

/* ---------- Hero ---------- */
.donation-hero {
    background-color: var(--u-deep);
}
.donation-hero::before {
    background:
        radial-gradient(ellipse at 85% 20%, rgba(255, 206, 86, 0.10), transparent 55%),
        linear-gradient(90deg, rgba(10, 46, 38, 0.95) 0%, rgba(10, 46, 38, 0.84) 50%, rgba(14, 95, 97, 0.62) 100%);
}
.donation-hero-row { padding: clamp(48px, 6vw, 88px) 0; }

.donation-eyebrow {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: var(--u-sun) !important;
    letter-spacing: 0.16em !important;
    backdrop-filter: blur(6px);
}
.donation-eyebrow-line { background: var(--u-sun) !important; }

.donation-title {
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.06 !important;
    text-wrap: balance;
}
.donation-title::after { background: var(--u-sun) !important; }

.donation-description {
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: var(--u-fs-lead) !important;
    line-height: 1.7 !important;
    max-width: 58ch;
}

.donation-list {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-left: 3px solid var(--u-sun) !important;
    border-radius: var(--u-radius) !important;
    backdrop-filter: blur(6px);
}
.donation-list li { color: rgba(255, 255, 255, 0.9) !important; }
.donation-check {
    background: var(--u-sun) !important;
    color: var(--u-forest) !important;
    border: 0 !important;
}

/* ---------- Donation panel ---------- */
.donation-panel {
    border-radius: var(--u-radius-lg) !important;
    box-shadow: 0 30px 70px rgba(5, 25, 20, 0.35) !important;
}
.donation-panel-header {
    background: linear-gradient(135deg, var(--u-teal) 0%, var(--u-teal-600) 100%) !important;
    padding: 20px 24px !important;
}
.donation-panel-icon {
    background: var(--u-sun) !important;
    color: var(--u-forest) !important;
    border-radius: 12px !important;
}
.donation-panel-body { padding: 20px 22px 22px !important; }

:is(.donation-page, .donation-page-modal) .bank-image-label { color: var(--u-teal) !important; letter-spacing: 0.16em !important; }
:is(.donation-page, .donation-page-modal) .bank-image-wrapper {
    border: 1px solid var(--u-line) !important;
    border-radius: var(--u-radius) !important;
    box-shadow: var(--u-shadow-sm);
}
:is(.donation-page, .donation-page-modal) .bank-details-card {
    border: 1px solid var(--u-line) !important;
    border-radius: var(--u-radius) !important;
    background: var(--u-surface-alt) !important;
}
:is(.donation-page, .donation-page-modal) .bank-details-title { color: var(--u-forest) !important; font-weight: 700 !important; }
:is(.donation-page, .donation-page-modal) .bank-details-title i { color: var(--u-teal) !important; }
:is(.donation-page, .donation-page-modal) .bank-detail-row {
    border-color: var(--u-line) !important;
    transition: background-color var(--u-dur) var(--u-ease);
}
:is(.donation-page, .donation-page-modal) .bank-detail-row:hover { background: var(--u-teal-50); }
:is(.donation-page, .donation-page-modal) .bank-detail-row span:first-child { color: var(--u-muted) !important; }
:is(.donation-page, .donation-page-modal) .bank-detail-row span:last-child, :is(.donation-page, .donation-page-modal) .bank-detail-row strong { color: var(--u-ink) !important; font-weight: 600 !important; }
:is(.donation-page, .donation-page-modal) .donate-thankyou {
    background: rgba(255, 206, 86, 0.16) !important;
    border: 1px solid rgba(255, 206, 86, 0.55) !important;
    border-radius: var(--u-radius-sm) !important;
    color: var(--u-forest) !important;
}
:is(.donation-page, .donation-page-modal) .donate-thankyou i { color: var(--u-teal) !important; }

/* ---------- Stories / posts ---------- */
.post-donation-section {
    background: var(--u-surface-alt) !important;
    padding: var(--u-section) 0 !important;
}
.post-donation-intro { margin-bottom: clamp(40px, 5vw, 64px) !important; }
.post-donation-label {
    display: inline-flex !important;
    align-items: center;
    gap: 0.6rem;
    color: var(--u-teal) !important;
    letter-spacing: 0.16em !important;
}
.post-donation-label::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--u-sun);
}
.post-donation-intro h2 {
    color: var(--u-ink) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    font-size: var(--u-fs-h2) !important;
}
.post-donation-intro p { color: var(--u-text) !important; font-size: var(--u-fs-lead) !important; }

/* align the card with the site container edges */
.post-donation-wrapper { max-width: var(--u-container) !important; }

.post-donation-row {
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-lg) !important;
    box-shadow: var(--u-shadow-sm) !important;
}
.post-donation-row:hover {
    transform: translateY(-4px);
    box-shadow: var(--u-shadow) !important;
    border-color: transparent;
}

.post-donation-photo .carousel-control-prev,
.post-donation-photo .carousel-control-next {
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--u-forest) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    opacity: 1 !important;
}
.post-donation-photo .carousel-control-prev-icon,
.post-donation-photo .carousel-control-next-icon { filter: invert(1) brightness(0.3); }
.post-donation-photo .carousel-control-prev:hover,
.post-donation-photo .carousel-control-next:hover { background: var(--u-sun) !important; }
.post-donation-photo .carousel-indicators button { background-color: rgba(255, 255, 255, 0.6) !important; }
.post-donation-photo .carousel-indicators .active { background-color: var(--u-sun) !important; }

.post-donation-date {
    color: var(--u-teal) !important;
    letter-spacing: 0.08em !important;
}
.post-donation-info h3 {
    color: var(--u-ink) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
}
.post-donation-short { color: var(--u-ink) !important; }
.post-donation-impact, .post-donation-full-content { color: var(--u-text) !important; }

.post-donation-read { color: var(--u-teal) !important; font-weight: 700 !important; }
.post-donation-read:hover { color: var(--u-teal-600) !important; }

.post-donation-donate {
    background: var(--u-sun) !important;
    color: var(--u-forest) !important;
    border: 2px solid var(--u-sun) !important;
    border-radius: var(--u-radius-pill) !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
}
.post-donation-donate:hover {
    background: var(--u-sun-600) !important;
    border-color: var(--u-sun-600) !important;
    color: var(--u-forest) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(10, 46, 38, 0.18) !important;
}

/* ---------- Page-level donate modal ---------- */
:is(.donation-page, .donation-page-modal) .donate-modal .modal-header {
    background: linear-gradient(135deg, var(--u-teal) 0%, var(--u-teal-600) 100%) !important;
}
:is(.donation-page, .donation-page-modal) .donate-modal .btn-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--u-teal);
    --bs-btn-border-color: var(--u-teal);
    --bs-btn-hover-bg: var(--u-teal);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--u-teal);
}

/* ==========================================================================
   frontend/event.blade.php
   ========================================================================== */
/* News & Events list */
.p-events .u-card-meta i { color: var(--u-teal); margin-right: 0.35rem; }

/* ==========================================================================
   frontend/galleries.blade.php
   ========================================================================== */
/* Gallery page — only what the design system does not cover */
.p-gallery .p-gallery-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.p-gallery .p-gallery-tabs .nav {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    padding: 0.35rem;
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-pill);
    box-shadow: var(--u-shadow-sm);
}
.p-gallery .p-gallery-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.55rem 1.4rem;
    font-weight: 700;
    font-size: var(--u-fs-sm);
    color: var(--u-forest);
    background: transparent;
    border: 0;
    border-radius: var(--u-radius-pill);
    transition: background-color var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease);
}
.p-gallery .p-gallery-tabs .nav-link:hover { color: var(--u-teal); background: var(--u-teal-50); }
.p-gallery .p-gallery-tabs .nav-link.active { color: #fff; background: var(--u-teal); }
.p-gallery .p-gallery-count {
    font-size: var(--u-fs-xs);
    font-weight: 700;
    min-width: 1.6rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--u-radius-pill);
    background: var(--u-teal-50);
    color: var(--u-teal);
}
.p-gallery .nav-link.active .p-gallery-count { background: rgba(255, 255, 255, 0.2); color: #fff; }

.p-gallery .u-gallery-caption { display: grid; gap: 0.15rem; }
.p-gallery .p-gallery-caption-title {
    font-size: 1rem;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.p-gallery .p-gallery-caption-meta { font-size: var(--u-fs-xs); font-weight: 600; color: var(--u-sun); }

.p-gallery .p-video { margin: 0; display: flex; flex-direction: column; gap: 0.9rem; height: 100%; }
.p-gallery .p-video .u-media { box-shadow: var(--u-shadow-sm); }
.p-gallery .p-video iframe { border: 0; }
.p-gallery .u-grid > .u-empty { grid-column: 1 / -1; }
.p-gallery .p-video figcaption { font-weight: 700; color: var(--u-ink); line-height: 1.4; }

@media (max-width: 991.98px) {
    .p-gallery .p-gallery-tabs .nav-link { padding-inline: 1.15rem; }
}
@media (max-width: 767.98px) {
    .p-gallery .p-gallery-caption-title { font-size: var(--u-fs-sm); }
}
@media (max-width: 575.98px) {
    .p-gallery .p-gallery-tabs .nav { width: 100%; }
    .p-gallery .p-gallery-tabs .nav-item { flex: 1 1 0; }
    .p-gallery .p-gallery-tabs .nav-link { width: 100%; justify-content: center; padding-inline: 0.75rem; }
    .p-gallery .u-gallery-caption { left: 0.65rem; right: 0.65rem; bottom: 0.6rem; }
    .p-gallery .p-gallery-caption-meta { display: none; }
}

/* ==========================================================================
   frontend/history.blade.php
   ========================================================================== */
/* History page — layout follows the original umbrellanepal.org "About us" page */

/* Pill label (the original page's coloured section buttons) */
.p-hist-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.1rem;
    padding: 0.55rem 1.15rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: #fff;
    background: var(--u-teal);
    border-radius: var(--u-radius-pill);
}
.p-hist-pill--sun { color: var(--u-forest); background: var(--u-sun); }

/* Divider line */
.p-hist-divider {
    display: block;
    height: 2px;
    margin: 0 0 1.5rem;
    border: 0;
    background: linear-gradient(to right, var(--u-sun) 0 64px, var(--u-line) 64px 100%);
    opacity: 1;
}

.p-hist-text { display: grid; gap: 1rem; }
.p-hist-text p { margin: 0; color: var(--u-text); line-height: 1.8; }

/* Photos are shown at their natural size (never stretched) */
.p-hist-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}
.p-hist-photo { margin: 0; max-width: 100%; }
.p-hist-photo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow);
    background: var(--u-surface-tint);
}
.p-hist-caption {
    margin: 0.85rem 0 0;
    font-size: var(--u-fs-sm);
    font-style: italic;
    line-height: 1.6;
    color: var(--u-muted);
}

/* 1. Mission band */
.p-hist-mission .u-container {
    display: grid;
    gap: 1.25rem 3rem;
    align-items: center;
}
.p-hist-mission-text {
    margin: 0;
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
    font-weight: 600;
    line-height: 1.6;
    color: var(--u-ink);
}
@media (min-width: 992px) {
    .p-hist-mission .u-container { grid-template-columns: minmax(220px, 1fr) 2.2fr; }
    .p-hist-mission .p-hist-divider { margin-bottom: 0; }
}

/* 2. Intro — text columns beside the photos */
.p-hist-intro-grid {
    display: grid;
    gap: 2rem 3rem;
    align-items: start;
}
@media (min-width: 992px) {
    .p-hist-intro-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
    .p-hist-intro-grid .p-hist-text { columns: 2 280px; column-gap: 2.5rem; display: block; }
    .p-hist-intro-grid .p-hist-text p { break-inside: avoid; margin-bottom: 1rem; }
}

/* 3. Feature chapters — 50/50, photo side alternates */
.p-hist-feature .u-split { align-items: start; }
.p-hist-feature .p-hist-photos { justify-content: center; }
/* several photos: sit side by side instead of stacking */
.p-hist-photos--multi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.p-hist-photos--multi .p-hist-photo img { width: 100%; }
@media (max-width: 359.98px) { .p-hist-photos--multi { grid-template-columns: 1fr; } }

/* 4. Team years — two stacked columns */
.p-hist-teams {
    columns: 2 420px;
    column-gap: clamp(2rem, 1rem + 3vw, 4rem);
}
.p-hist-team {
    break-inside: avoid;
    margin: 0 0 clamp(2rem, 1.5rem + 1.5vw, 3rem);
    padding: clamp(1.5rem, 1.1rem + 1vw, 2rem);
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-lg);
    box-shadow: var(--u-shadow-sm);
}
.p-hist-team .p-hist-photos { margin-top: 1.25rem; }

@media (max-width: 575.98px) {
    .p-hist-pill { font-size: 0.9rem; }
}

/* ===== Original umbrellanepal.org look ===== */
.p-hist-page { --hist-serif: "Old Standard TT", Georgia, "Times New Roman", serif; }

/* outlined heading boxes */
.p-hist-pill,
.p-hist-pill--sun {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--u-ink);
    background: transparent;
    border: 2px solid var(--u-green);
    border-radius: 0;
}

/* serif, justified body text */
.p-hist-page .p-hist-text p {
    font-family: var(--hist-serif);
    font-size: 1.02rem;
    line-height: 1.75;
    color: #666;
    text-align: justify;
    hyphens: auto;
}
.p-hist-mission-text { font-family: var(--hist-serif); font-weight: 400; }

/* framed photos: white frame, light-grey mat, photo centred at natural size */
.p-hist-photo {
    width: 100%;
    padding: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}
.p-hist-mat {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e9e9e9;
}
.p-hist-photo img {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.p-hist-photos { gap: 1.25rem; }
.p-hist-caption {
    margin-top: 0.9rem;
    font-family: var(--hist-serif);
    font-size: 0.85rem;
    font-style: normal;
    line-height: 1.4;
    color: #222;
}

/* team years: two columns split by a vertical rule, no cards */
.p-hist-teams-section { background: #f2f2f0; }
.p-hist-teams {
    column-gap: clamp(2.5rem, 1.5rem + 3vw, 5rem);
    column-rule: 2px solid #1f1f1f;
}
.p-hist-team {
    padding: 0 0.25rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.p-hist-team .p-hist-pill { display: table; margin: 0 auto 1.75rem; }
.p-hist-team .p-hist-photos { margin-top: 2rem; }
@media (max-width: 899.98px) {
    .p-hist-teams { column-rule: 0; }
    .p-hist-team + .p-hist-team { padding-top: 2rem; border-top: 1px solid #cfcfcf; }
}

/* ==========================================================================
   frontend/includes/contact.blade.php
   ========================================================================== */
/* ---- Media collage ---- */
.h-impact-media {
  position: relative;
  padding: 0 12% 12% 0;
}
.h-impact-main { aspect-ratio: 4 / 5; }
.h-impact-inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1 / 1;
  border: 6px solid var(--u-surface);
  border-radius: var(--u-radius-lg);
  overflow: hidden;
  box-shadow: var(--u-shadow-lg);
  background: var(--u-surface-tint);
}
.h-impact-inset img { width: 100%; height: 100%; object-fit: cover; display: block; }

.h-impact-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 240px;
  padding: 0.85rem 1.1rem;
  background: var(--u-surface);
  border-radius: var(--u-radius);
  box-shadow: var(--u-shadow);
  color: var(--u-ink);
  font-weight: 700;
  font-size: var(--u-fs-sm);
  line-height: 1.3;
}
.h-impact-chip--volunteers { top: 1.25rem; left: 1.25rem; flex-direction: column; align-items: flex-start; }
.h-impact-chip--projects { bottom: calc(12% + 1.25rem); left: 1.25rem; }

.h-impact-avatars { display: flex; }
.h-impact-avatars img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--u-surface);
  margin-left: -10px;
  background: var(--u-surface-tint);
}
.h-impact-avatars img:first-child { margin-left: 0; }

/* ---- Content ---- */
.h-impact-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.75rem 0;
  padding: 0;
  list-style: none;
}
.h-impact-tab {
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  font-family: var(--u-font);
  font-size: var(--u-fs-sm);
  font-weight: 600;
  color: var(--u-teal);
  background: var(--u-surface);
  border: 1px solid var(--u-teal-100);
  border-radius: var(--u-radius-pill);
  cursor: pointer;
  transition: background-color var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease), border-color var(--u-dur) var(--u-ease);
}
.h-impact-tab:hover { border-color: var(--u-teal); }
.h-impact-tab.active { background: var(--u-teal); border-color: var(--u-teal); color: #fff; }

.h-impact-feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.4rem;
  margin-bottom: 2rem;
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius-lg);
  box-shadow: var(--u-shadow-sm);
}
.h-impact-feature h3 { font-size: 1.1rem; margin: 0 0 0.35rem; }
.h-impact-feature p { margin: 0; font-size: var(--u-fs-sm); color: var(--u-text); }

@media (max-width: 991.98px) {
  .h-impact-media { max-width: 560px; margin-inline: auto; width: 100%; }
}
@media (max-width: 575.98px) {
  .h-impact-media { padding: 0; display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr; }
  .h-impact-main { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .h-impact-inset { display: none; }
  .h-impact-chip { position: static; max-width: none; padding: 0.75rem; font-size: var(--u-fs-xs); }
  .h-impact-avatars img { width: 28px; height: 28px; }
  .h-impact-feature { padding: 1.1rem; }
  .h-impact-cta { width: 100%; }
}

/* ==========================================================================
   frontend/includes/donate-modal.blade.php
   ========================================================================== */
.u-donate-modal .modal-dialog { margin: 0.75rem auto; padding-inline: 0.75rem; }
@media (min-width: 576px) {
    .u-donate-modal .modal-dialog { max-width: 620px; margin-block: 1.75rem; }
}
.u-donate-modal .modal-content { border-radius: var(--u-radius-lg); }

/* Header */
.u-donate-modal .modal-header {
    gap: 1rem;
    padding: 1.15rem 1.5rem;
    background: var(--u-teal);
    color: #fff;
    border-bottom: 0;
}
.u-donate-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
    font-weight: 800;
    color: #fff;
}
.u-donate-modal .modal-title i { color: var(--u-sun); }
.u-donate-modal .btn-close {
    flex-shrink: 0;
    opacity: 0.9;
    filter: brightness(0) invert(1);
}
.u-donate-modal .btn-close:hover { opacity: 1; }
.u-donate-modal .btn-close:focus-visible { box-shadow: none; outline: 3px solid var(--u-sun); }

/* Body */
.u-donate-modal .modal-body {
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    background: var(--u-surface);
}
.u-donate-modal .donate-intro {
    margin: 0 0 1.25rem;
    font-size: var(--u-fs-lead);
    line-height: 1.6;
    color: var(--u-text);
}

/* Bank card */
.u-donate-modal .bank-details-card {
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.35rem 0.5rem;
    background: var(--u-surface-tint);
    border: 1px solid var(--u-teal-100);
    border-radius: var(--u-radius);
}
.u-donate-modal .bank-details-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
    padding-bottom: 0.85rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--u-ink);
    border-bottom: 1px solid var(--u-teal-100);
}
.u-donate-modal .bank-details-title i { color: var(--u-teal); }

.u-donate-modal .bank-detail-list { margin: 0; }
.u-donate-modal .bank-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.25rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--u-teal-100);
    font-size: var(--u-fs-sm);
}
.u-donate-modal .bank-detail-row:last-child { border-bottom: 0; }
.u-donate-modal .bank-detail-row dt { margin: 0; font-weight: 500; color: var(--u-muted); }
.u-donate-modal .bank-detail-row dd {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-weight: 700;
    color: var(--u-ink);
    text-align: right;
    overflow-wrap: anywhere;
}
.u-donate-modal .bank-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    padding: 0;
    color: var(--u-teal);
    background: var(--u-surface);
    border: 1px solid var(--u-teal-100);
    border-radius: var(--u-radius-sm);
    cursor: pointer;
    transition: background-color var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease);
}
.u-donate-modal .bank-copy-btn:hover { background: var(--u-teal); color: #fff; }
.u-donate-modal .bank-copy-btn.is-copied { background: var(--u-green); border-color: var(--u-green); color: #fff; }

/* QR */
.u-donate-modal .bank-image-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0 1.25rem;
    border-bottom: 1px solid var(--u-teal-100);
}
.u-donate-modal .bank-image-label {
    margin-bottom: 0.75rem;
    font-size: var(--u-fs-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--u-teal);
}
.u-donate-modal .bank-account-image {
    display: block;
    width: min(240px, 100%);
    height: auto;
    padding: 0.5rem;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow-sm);
}

/* Thank you */
.u-donate-modal .donate-thankyou {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: var(--u-forest);
    background: rgba(255, 206, 86, 0.22);
    border: 1px solid rgba(255, 206, 86, 0.6);
    border-radius: var(--u-radius);
}
.u-donate-modal .donate-thankyou i { color: var(--u-teal); }

/* Footer */
.u-donate-modal .modal-footer {
    padding: 1rem 1.5rem;
    background: var(--u-surface);
    border-top: 1px solid var(--u-line);
}

@media (max-width: 575.98px) {
    .u-donate-modal .modal-dialog { padding-inline: 0.5rem; }
    .u-donate-modal .modal-header { padding: 1rem; }
    .u-donate-modal .bank-details-card { padding: 1rem 1rem 0.25rem; }
    .u-donate-modal .bank-detail-row { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
    .u-donate-modal .bank-detail-row dd { text-align: left; }
    .u-donate-modal .modal-footer { padding: 0.85rem 1rem; }
    .u-donate-modal .modal-footer .u-btn { width: 100%; }
}

/* ==========================================================================
   frontend/includes/donate.blade.php
   ========================================================================== */
/* ---------- Home: How We Work / transparency ---------- */
.h-work { overflow: hidden; isolation: isolate; }
.h-work::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(14, 95, 97, 0.55), transparent 70%),
        radial-gradient(40% 60% at 0% 100%, rgba(14, 95, 97, 0.35), transparent 70%);
}
.h-work .u-section-header--split .u-lead { color: rgba(255, 255, 255, 0.78); margin-bottom: 1.5rem; }
.h-work-aside { max-width: 30rem; }

.h-work .u-stat { gap: 0.75rem; }
.h-work-stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.h-work-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
}
.h-work-stat-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h-work .u-stat-label { margin-top: 0.25rem; }
.h-work .u-stat-text { line-height: 1.65; margin-bottom: 0.75rem; }
.h-work .u-stat-bar { margin-top: auto; }

.h-work-empty { grid-column: 1 / -1; color: rgba(255, 255, 255, 0.6); text-align: center; padding-block: 1.5rem; margin: 0; }

@media (max-width: 991.98px) {
    .h-work-aside { max-width: none; }
}

/* ==========================================================================
   frontend/includes/herosection.blade.php
   ========================================================================== */
/* ---------- Home hero ---------- */
.h-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(calc(100svh - var(--u-header-h)), 820px);
    padding-block: clamp(4rem, 3rem + 4vw, 6rem);
    color: #fff;
    background: var(--u-deep);
    overflow: hidden;
    isolation: isolate;
}
.h-hero-media { position: absolute; inset: 0; z-index: -2; }
.h-hero-media .carousel-inner,
.h-hero-media .carousel-item { height: 100%; }
.h-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 30%;
    display: block;
}
#heroCarousel.carousel-fade .carousel-item { transition: opacity 1.4s ease-in-out; }

.h-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(10, 46, 38, 0.9) 0%, rgba(10, 46, 38, 0.72) 32%, rgba(10, 46, 38, 0.32) 62%, rgba(10, 46, 38, 0.12) 100%),
        linear-gradient(to top, rgba(10, 46, 38, 0.55) 0%, transparent 35%);
}

.h-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
}
.h-hero-content { max-width: 42rem; }

.h-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;
    margin-bottom: 1.5rem;
    padding: 0.4rem 1rem 0.4rem 0.4rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--u-radius-pill);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.h-hero-avatars { display: flex; flex-shrink: 0; }
.h-hero-avatars span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--u-forest);
    overflow: hidden;
}
.h-hero-avatars span + span { margin-left: -9px; }
.h-hero-avatars img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h-hero-badge-text {
    font-size: var(--u-fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.3;
}

.h-hero-title {
    color: #fff;
    margin: 0 0 1.25rem;
    text-shadow: 0 2px 24px rgba(10, 46, 38, 0.35);
}
.h-hero-text {
    max-width:100%;
    margin: 0 0 2rem;
    font-size: var(--u-fs-lead);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
    min-height: 3.3em; /* avoids jump as the slide caption changes */
}

/* Right column: logo + social */
.h-hero-aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
    justify-self: end;
}

/* Circular logo with rings that pulse outward on a loop */
.h-hero-logo {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(170px, 13vw + 40px, 230px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18), 0 18px 45px rgba(0, 0, 0, 0.35);
    isolation: isolate;
}
.h-hero-logo img {
    display: block;
    width: 84%;
    height: 84%;
    object-fit: contain;
    border-radius: 50%;
}
/* slowly turning dashed ring */
.h-hero-logo::before {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.55);
    animation: h-hero-spin 22s linear infinite;
    z-index: -1;
}
/* pulse rings */
.h-hero-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--u-sun);
    opacity: 0;
    animation: h-hero-pulse 3.2s var(--u-ease) infinite;
    pointer-events: none;
    z-index: -1;
}
.h-hero-ring--2 { animation-delay: 1.6s; }
.h-hero-logo:hover .h-hero-ring,
.h-hero-logo:focus-visible .h-hero-ring { animation-duration: 2s; }

@keyframes h-hero-pulse {
    0%   { transform: scale(1);    opacity: 0.85; }
    100% { transform: scale(1.55); opacity: 0; }
}
@keyframes h-hero-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .h-hero-ring { display: none; }
    .h-hero-logo::before { animation: none; }
}

.h-hero-social { flex-direction: row; justify-content: center; }

/* Indicators */
.h-hero-indicators {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
    z-index: 2;
}
.h-hero-indicators .u-container { display: flex; gap: 0.5rem; }
.h-hero-dot {
    position: relative;
    width: 34px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.h-hero-dot::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.4);
    transition: background-color var(--u-dur) var(--u-ease);
}
.h-hero-dot:hover::before { background: rgba(255, 255, 255, 0.75); }
.h-hero-dot.active::before { background: var(--u-sun); }

.h-hero :focus-visible { outline-color: #fff; }

@media (max-width: 991.98px) {
    .h-hero { min-height: 0; padding-block: 4.5rem 5rem; }
    .h-hero-inner { grid-template-columns: 1fr; }
    .h-hero-logo { display: none; }
    .h-hero-aside { align-items: flex-start; }
    .h-hero-social { flex-direction: row; }
    .h-hero::before {
        background: linear-gradient(90deg, rgba(10, 46, 38, 0.88) 0%, rgba(10, 46, 38, 0.6) 100%);
    }
}
@media (max-width: 767.98px) {
    .h-hero { padding-block: 3.5rem 4.5rem; }
    .h-hero-text { margin-bottom: 1.75rem; }
}
@media (max-width: 575.98px) {
    .h-hero-badge { padding-right: 0.85rem; }
    .h-hero-badge-text { font-size: 0.72rem; letter-spacing: 0.05em; }
    .h-hero-cta .u-btn { flex: 1 1 100%; }
    .h-hero-media img { object-position: 55% 30%; }
}

/* ==========================================================================
   frontend/includes/indexgallary.blade.php
   ========================================================================== */
.h-gallery .u-lead { color: rgba(255, 255, 255, 0.78); }
.h-gallery .u-gallery-item { color: #fff; text-decoration: none; }
.h-gallery .u-gallery-item:hover { color: #fff; }
.h-gallery .u-gallery-caption {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.h-gallery-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.h-gallery-more {
  font-size: var(--u-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--u-sun);
}
.h-gallery-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
}
.h-gallery .u-gallery-item { background: rgba(255, 255, 255, 0.06); }
.h-gallery .u-gallery-item:focus-visible { outline-color: #fff; }

@media (max-width: 767.98px) {
  .h-gallery .u-section-header--split { align-items: flex-start; }
}
@media (max-width: 575.98px) {
  .h-gallery-more { display: none; }
  .h-gallery .u-gallery-caption { left: 0.75rem; right: 0.75rem; bottom: 0.65rem; font-size: var(--u-fs-xs); }
}

/* ==========================================================================
   frontend/includes/indexproject.blade.php
   ========================================================================== */
.Service {
  color: var(--primary);
  padding: 20px 2rem;
}

.image-bg {
  border-radius: 8px;
  padding: 2px;
}

/* Dynamic background colors based on the index of child */
.Service .row .col-md-4:nth-child(1) .image-bg {
  background: var(--bs-yellow);
}

.Service .row .col-md-4:nth-child(2) .image-bg {
  background: #2ECD9A;
}

.Service .row .col-md-4:nth-child(3) .image-bg {
  background: var(--primary);
}

.Service .row .col-md-4:nth-child(4) .image-bg {
  background: gray;
}

.Service .row .col-md-4:nth-child(5) .image-bg {
  background: yellow;
}

.Service .row .col-md-4:nth-child(6) .image-bg {
  background: purple;
}

.course-card {
  transition: transform 0.3s ease;
  border: none;
  border-radius: 12px;
  overflow: hidden;
}

.course-card:hover {
  transform: translateY(-5px);
}

.course-img {
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.course-card .card-body {
  padding: 1rem;
}

.course-title {
  color: #2c3e50;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  min-height: 40px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-desc {
  color: #5d6d7e;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  min-height: 20px;
}

.join-btn {
  display: inline-block;
  padding: 4px 12px;
  background: var(--primary);
  color: white;
  border-radius: 15px;
  font-size: 0.8rem;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid var(--primary);
}

.join-btn:hover {
  background: transparent;
  color: var(--primary);
}

.view-more-btn {
  padding: 8px 24px;
  font-size: 0.95rem;
}

/* Hidden by default */
.demand-section {
  display: none;
}

/* Show the active section */
.demand-section.active {
  display: block;
}

/* ==========================================================================
   frontend/includes/indexservice.blade.php
   ========================================================================== */
/* ---------- Home: Our Actions for Social Change ---------- */
.h-actions .actions-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: clamp(340px, 30vw, 420px);
    padding: clamp(1.5rem, 1.1rem + 1vw, 2.25rem);
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-lg);
    box-shadow: var(--u-shadow-sm);
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    transition: transform var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease),
        border-color var(--u-dur) var(--u-ease);
}
.h-actions .actions-card:hover { transform: translateY(-4px); box-shadow: var(--u-shadow); }

/* Photo layer revealed on the active card */
.h-actions .actions-card-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.6s var(--u-ease);
}
.h-actions .actions-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 1.2s var(--u-ease);
}
.h-actions .actions-card-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 46, 38, 0.95) 0%, rgba(10, 46, 38, 0.82) 45%, rgba(14, 95, 97, 0.7) 100%);
}

.h-actions .actions-card-num {
    position: absolute;
    top: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
    right: clamp(1.5rem, 1.1rem + 1vw, 2.25rem);
    font-size: var(--u-fs-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--u-muted);
    transition: color var(--u-dur) var(--u-ease);
}
.h-actions .actions-card-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
    border-radius: 18px;
    background: var(--u-teal-50);
    overflow: hidden;
    flex-shrink: 0;
    transition: background-color var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}
.h-actions .actions-card-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h-actions .actions-card-title {
    font-size: var(--u-fs-h3);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.75rem;
    color: var(--u-ink);
    transition: color var(--u-dur) var(--u-ease);
}
.h-actions .actions-card-text {
    margin: 0 0 1.5rem;
    font-size: var(--u-fs-sm);
    line-height: 1.7;
    color: var(--u-text);
    transition: color var(--u-dur) var(--u-ease);
}
.h-actions .actions-card-foot {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--u-line);
    transition: border-color var(--u-dur) var(--u-ease);
}

/* Active state */
.h-actions .actions-card.active { border-color: transparent; box-shadow: var(--u-shadow-lg); }
.h-actions .actions-card.active .actions-card-bg { opacity: 1; }
.h-actions .actions-card.active .actions-card-bg img { transform: scale(1); }
.h-actions .actions-card.active .actions-card-icon { background: #fff; box-shadow: 0 0 0 4px rgba(255, 206, 86, 0.6); }
.h-actions .actions-card.active .actions-card-title { color: #fff; }
.h-actions .actions-card.active .actions-card-text { color: rgba(255, 255, 255, 0.85); }
.h-actions .actions-card.active .actions-card-num { color: var(--u-sun); }
.h-actions .actions-card.active .actions-card-foot { border-color: rgba(255, 255, 255, 0.18); }
.h-actions .actions-card.active .u-link { color: var(--u-sun); }
.h-actions .actions-card.active :focus-visible { outline-color: var(--u-sun); }

@media (max-width: 767.98px) {
    .h-actions .actions-card { min-height: 0; }
}

/* ==========================================================================
   frontend/includes/indextestimonials.blade.php
   ========================================================================== */
.h-voices .u-quote { transition: transform var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease); }
.h-voices .u-quote:hover { transform: translateY(-4px); box-shadow: var(--u-shadow); }
.h-voices .u-quote-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.h-voices .u-quote-mark { font-size: 2.25rem; }
.h-voices-stars { display: inline-flex; gap: 0.2rem; color: var(--u-sun-600); font-size: 0.85rem; }
.h-voices .u-quote-person {
  padding-top: 1.25rem;
  border-top: 1px solid var(--u-line);
}
.h-voices-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  font-weight: 800;
  color: var(--u-teal);
  background: var(--u-teal-50);
  box-shadow: 0 0 0 2px var(--u-teal-100);
}
.h-voices-initial[hidden], .h-voices .u-quote-person img[hidden] { display: none; }
.h-voices .u-quote-person > div { min-width: 0; }
.h-voices .u-quote-name, .h-voices .u-quote-role { overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .h-voices .u-section-header--split .u-btn { width: 100%; }
}

/* ==========================================================================
   frontend/includes/joinform.blade.php
   ========================================================================== */
.registration-container {
    max-width: 620px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 0.75rem + 2vw, 2.25rem) clamp(1.5rem, 1rem + 2vw, 2.25rem);
    background: var(--u-surface);
}

/* Step indicator */
.registration-container .step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}
.registration-container .step-indicator li { display: flex; align-items: center; }
.registration-container .step-indicator li + li::before {
    content: "";
    width: clamp(28px, 8vw, 56px);
    height: 2px;
    margin-inline: 0.5rem;
    background: var(--u-line);
}
.registration-container .step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: var(--u-fs-sm);
    font-weight: 800;
    color: var(--u-muted);
    background: var(--u-surface-alt);
    border: 1px solid var(--u-line);
    transition: background-color var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease);
}
.registration-container .step.active {
    color: #fff;
    background: var(--u-teal);
    border-color: var(--u-teal);
}

/* Steps */
.registration-container .form-step { display: none; }
.registration-container .form-step.active { display: grid; gap: 1.1rem; }

.registration-container .section-title { text-align: center; margin-bottom: 0.5rem; }
.registration-container .section-title h2 {
    margin: 0 0 0.5rem;
    font-size: var(--u-fs-h3);
    font-weight: 800;
    color: var(--u-ink);
}
.registration-container .section-title p {
    margin: 0;
    font-size: var(--u-fs-sm);
    line-height: 1.6;
    color: var(--u-text);
}

.registration-container .form-group { margin: 0; }
.registration-container select {
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e5f61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 18px;
}
.registration-container select:disabled { background-color: var(--u-surface-alt); color: var(--u-muted); cursor: not-allowed; }

/* Session time chips */
.registration-container .time-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 110px), 1fr));
    gap: 0.6rem;
}
.registration-container .time-option {
    min-height: 46px;
    padding: 0.6rem 0.75rem;
    font-family: var(--u-font);
    font-size: var(--u-fs-sm);
    font-weight: 600;
    text-align: center;
    color: var(--u-ink);
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: var(--u-radius-sm);
    cursor: pointer;
    transition: background-color var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease), border-color var(--u-dur) var(--u-ease);
}
.registration-container .time-option:hover { border-color: var(--u-teal); }
.registration-container .time-option.selected {
    color: #fff;
    background: var(--u-teal);
    border-color: var(--u-teal);
}

.registration-container .button-group {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.registration-container .button-group .u-btn { flex: 1 1 0; }

.registration-container .success-message {
    display: none;
    padding: 1.5rem 0.5rem;
    text-align: center;
}
.registration-container .success-message h2 {
    margin: 1rem 0 0.5rem;
    font-size: var(--u-fs-h3);
    font-weight: 800;
    color: var(--u-ink);
}
.registration-container .success-message p { margin: 0; color: var(--u-text); }

@media (max-width: 575.98px) {
    .registration-container .button-group { flex-direction: column-reverse; }
}

/* ==========================================================================
   frontend/includes/ourclient.blade.php
   ========================================================================== */
.h-partners-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.h-partners-rail {
  display: flex;
  width: max-content;
  animation: h-partners-scroll calc(var(--h-partners-count, 6) * 3.5s) linear infinite;
}
.h-partners-marquee:hover .h-partners-rail,
.h-partners-marquee:focus-within .h-partners-rail,
.h-partners.is-paused .h-partners-rail { animation-play-state: paused; }

.h-partners-track {
  display: flex;
  gap: var(--u-gap);
  padding-right: var(--u-gap);
  margin: 0;
  padding-left: 0;
  list-style: none;
  flex-shrink: 0;
}
.h-partners-track > li { width: clamp(150px, 14vw + 60px, 210px); flex-shrink: 0; }
.h-partners .u-logo-tile { width: 100%; text-decoration: none; }
.h-partners .u-logo-tile img { max-height: 64px; }

/* Partner name slides up on hover / keyboard focus (as on the previous site) */
.h-partners .u-logo-tile { position: relative; overflow: hidden; }
.h-partners-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.55rem 0.75rem;
  font-size: var(--u-fs-xs);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: #fff;
  background: var(--u-teal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--u-dur) var(--u-ease), transform var(--u-dur) var(--u-ease);
}
.h-partners .u-logo-tile:hover .h-partners-name,
.h-partners .u-logo-tile:focus-visible .h-partners-name { opacity: 1; transform: translateY(0); }
.h-partners .u-logo-tile:hover img,
.h-partners .u-logo-tile:focus-visible img { transform: translateY(-10px); }
.h-partners .u-logo-tile img { transition: filter var(--u-dur) var(--u-ease), opacity var(--u-dur) var(--u-ease), transform var(--u-dur) var(--u-ease); }
/* touch screens have no hover: keep names visible */
@media (hover: none) {
  .h-partners-name { opacity: 1; transform: none; position: static; margin-top: auto; background: transparent; color: var(--u-ink); padding: 0.35rem 0 0; }
  .h-partners .u-logo-tile { flex-direction: column; justify-content: center; gap: 0.25rem; height: auto; min-height: 112px; }
  .h-partners .u-logo-tile:hover img { transform: none; }
}

@keyframes h-partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.h-partners-controls { display: flex; justify-content: center; margin-top: 1.5rem; }
.h-partners-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  font: 600 var(--u-fs-xs) / 1 var(--u-font);
  color: var(--u-muted);
  background: transparent;
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius-pill);
  cursor: pointer;
  transition: color var(--u-dur) var(--u-ease), border-color var(--u-dur) var(--u-ease);
}
.h-partners-toggle:hover { color: var(--u-teal); border-color: var(--u-teal-100); }
.h-partners-toggle .h-icon-play { display: none; }
.h-partners.is-paused .h-partners-toggle .h-icon-play { display: inline; }
.h-partners.is-paused .h-partners-toggle .h-icon-pause { display: none; }

/* Reduced motion: static responsive grid (6 / 4 / 3 / 2 columns) */
@media (prefers-reduced-motion: reduce) {
  .h-partners-marquee { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .h-partners-rail { animation: none; width: auto; display: block; }
  .h-partners-track[aria-hidden="true"], .h-partners-clone, .h-partners-controls { display: none; }
  .h-partners-track {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding-right: 0;
  }
  .h-partners-track > li { width: auto; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1199.98px) { .h-partners-track { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) and (max-width: 767.98px)  { .h-partners-track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) and (max-width: 575.98px)  { .h-partners-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 575.98px) {
  .h-partners .u-logo-tile { height: 92px; padding: 0.9rem 1rem; }
  .h-partners .u-logo-tile img { max-height: 52px; }
}

/* ==========================================================================
   frontend/includes/project.blade.php
   ========================================================================== */
/* ---------- Home: Projects & Initiatives ---------- */
.h-projects .u-card-media .u-badge {
    max-width: calc(100% - 2rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.h-projects .u-card-text { margin-bottom: 0.25rem; }
.h-projects .u-card-footer .u-link { position: relative; z-index: 1; }

/* ==========================================================================
   frontend/includes/rescue.blade.php
   ========================================================================== */
.h-process .u-lead { color: rgba(255, 255, 255, 0.78); }
.h-process-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  row-gap: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
}
.h-process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.h-process-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.h-process .u-step-num {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 6px rgba(255, 206, 86, 0.18);
}
.h-process-title {
  margin: 0;
  font-size: var(--u-fs-h3);
  color: #fff;
}
.h-process-text {
  margin: 0;
  font-size: var(--u-fs-sm);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.74);
}

/* Desktop: horizontal connecting line through the markers, title below */
@media (min-width: 992px) {
  .h-process-head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .h-process-step:not(:last-child) .h-process-head::after {
    content: "";
    position: absolute;
    top: 28px;
    left: 56px;
    right: calc(var(--u-gap) * -1);
    height: 2px;
    background: linear-gradient(to right, rgba(255, 206, 86, 0.55), rgba(255, 255, 255, 0.12));
  }
}

/* Mobile: vertical connecting line on the left */
@media (max-width: 575.98px) {
  .h-process-step { padding-left: 4.5rem; }
  .h-process-head { position: static; }
  .h-process .u-step-num { position: absolute; left: 0; top: 0; width: 48px; height: 48px; font-size: 0.95rem; }
  .h-process-title { min-height: 48px; display: flex; align-items: center; }
  .h-process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 60px;
    bottom: -1.5rem;
    width: 2px;
    background: rgba(255, 255, 255, 0.14);
  }
}

/* ==========================================================================
   frontend/includes/section4.blade.php
   ========================================================================== */
/* ---------- Home: About / Movement Built Hope ---------- */
.h-about-visual {
    position: relative;
    padding: 0 clamp(1rem, 0.5rem + 2vw, 2rem) clamp(1rem, 0.5rem + 2vw, 2rem) 0;
}
.h-about-visual::before {
    content: "";
    position: absolute;
    inset: clamp(1.5rem, 1rem + 2vw, 3rem) 0 0 clamp(1.5rem, 1rem + 2vw, 3rem);
    border-radius: var(--u-radius-lg);
    background: var(--u-teal-100);
    z-index: 0;
}
.h-about-visual .u-media { position: relative; z-index: 1; }
.h-about-visual .u-media img { object-position: center 35%; }

.h-about-badge {
    position: absolute;
    z-index: 2;
    left: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
    bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem);
    display: flex;
    flex-direction: column;
    padding: 1rem 1.35rem;
    background: var(--u-sun);
    color: var(--u-forest);
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow-lg);
    line-height: 1.15;
}
.h-about-badge-number { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; }
.h-about-badge-label { font-size: var(--u-fs-sm); font-weight: 700; }

.h-about-features {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
    gap: 1.25rem;
    align-items: stretch;
    margin: 1.75rem 0 2rem;
}
.h-about-features .u-checklist {
    padding: 1.5rem;
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow-sm);
    align-content: center;
}
.h-about-features .u-media { box-shadow: var(--u-shadow-sm); border-radius: var(--u-radius); min-height: 160px; }
.h-about-features .u-media img { position: absolute; inset: 0; }

.h-about-video {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    color: var(--u-forest);
    text-decoration: none;
}
.h-about-video:hover { color: var(--u-teal); }
.h-about-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--u-sun);
    color: var(--u-forest);
    font-size: 0.85rem;
    box-shadow: 0 0 0 6px rgba(255, 206, 86, 0.25);
    transition: transform var(--u-dur) var(--u-ease);
}
.h-about-video:hover .h-about-play { transform: scale(1.06); }

@media (max-width: 991.98px) {
    .h-about-visual { max-width: 560px; }
}
@media (max-width: 575.98px) {
    .h-about-features { grid-template-columns: 1fr; }
    .h-about-features .u-media { aspect-ratio: 16 / 9; min-height: 0; }
    .h-about-features .u-checklist { padding: 1.25rem; }
}

/* ==========================================================================
   frontend/includes/trekking.blade.php
   ========================================================================== */
.s-treks .u-section-header { margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.s-treks .u-grid > .u-empty { grid-column: 1 / -1; }
@media (max-width: 575.98px) {
    .s-treks .s-treks-more .u-btn { width: 100%; }
}

/* ==========================================================================
   frontend/index.blade.php
   ========================================================================== */
/* Notification modal (home page only) */
.h-notice .modal-header {
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--u-teal);
    color: #fff;
    border-bottom: 0;
}
.h-notice .modal-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    min-width: 0;
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
    font-weight: 700;
    color: #fff;
    overflow-wrap: anywhere;
}
.h-notice .modal-title i { color: var(--u-sun); flex-shrink: 0; }
.h-notice .btn-close { flex-shrink: 0; opacity: 0.9; }
.h-notice .btn-close:hover { opacity: 1; }
.h-notice .btn-close:focus-visible { box-shadow: none; outline: 3px solid var(--u-sun); }
.h-notice .modal-body {
    padding: clamp(1rem, 0.75rem + 1vw, 1.75rem);
    background: var(--u-surface);
}
.h-notice-img {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow-sm);
}
@media (max-width: 575.98px) {
    .h-notice .modal-header { padding: 0.9rem 1rem; }
    .h-notice-img { max-height: 60vh; }
}

/* ==========================================================================
   frontend/service.blade.php
   ========================================================================== */
/* Single trek — same design language as the Why Us page */
.p-trek .p-trek-top { align-items: start; }
.p-trek .p-trek-media { position: sticky; top: calc(var(--u-header-h) + 1.5rem); }
.p-trek .u-prose {
    white-space: pre-line; /* keeps line breaks from plain-text descriptions */
    overflow-wrap: anywhere;
    font-size: 1.0625rem;
    line-height: 1.8;
}
.p-trek .p-trek-actions { margin-top: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); }

.p-trek-more .u-card-title { font-size: var(--u-fs-h3); }

@media (max-width: 991.98px) {
    .p-trek .p-trek-media { position: static; max-width: 720px; }
}
@media (max-width: 575.98px) {
    .p-trek .u-prose { font-size: 1rem; line-height: 1.75; }
    .p-trek .p-trek-actions .u-btn { width: 100%; }
}

/* ==========================================================================
   frontend/services.blade.php
   ========================================================================== */
/* Trek with Umbrella — same design language as the Why Us page */
.p-treks .p-treks-top { align-items: start; }
.p-treks .u-prose p { margin-bottom: 0; }
.p-treks .p-trek-num {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    font-size: var(--u-fs-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--u-teal);
}
.p-treks .p-trek-num::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--u-sun);
}
.p-treks .p-trek-excerpt {
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.p-treks .p-trek-actions { margin-top: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

@media (max-width: 991.98px) {
    .p-treks .u-split .u-media { max-width: 720px; }
}
@media (max-width: 575.98px) {
    .p-treks .p-trek-actions .u-btn { width: 100%; }
}

/* ==========================================================================
   frontend/singleImage.blade.php
   ========================================================================== */
/* Single album — only what the design system does not cover */
.p-album .p-album-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
}
.p-album .p-album-head .u-text { margin: 0; }
.p-album .p-album-desc { margin: 0.5rem 0 0; }
.p-album .p-album-zoom {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--u-forest);
    background: rgba(255, 255, 255, 0.92);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity var(--u-dur) var(--u-ease), transform var(--u-dur) var(--u-ease);
}
.p-album .u-gallery-item:hover .p-album-zoom,
.p-album .u-gallery-item:focus-visible .p-album-zoom { opacity: 1; transform: none; }
.p-album .p-album-back { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }

/* Magnific Popup — brand tint on the overlay */
.mfp-bg { background: var(--u-deep); opacity: 0.94; }

@media (hover: none) {
    .p-album .u-gallery-item::after { opacity: 0; }
}
@media (max-width: 991.98px) {
    .p-album .p-album-head { align-items: flex-start; }
}
@media (max-width: 767.98px) {
    .p-album .p-album-zoom { display: none; }
}
@media (max-width: 575.98px) {
    .p-album .p-album-head .u-btn { width: 100%; }
}

/* ==========================================================================
   frontend/singleevents.blade.php
   ========================================================================== */
/* Single event article */
.p-event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: var(--u-fs-sm);
    color: var(--u-muted);
}
.p-event-meta i { color: var(--u-teal); margin-right: 0.35rem; }
.p-event .u-media { margin-bottom: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); }
.p-event-content { font-size: 1.0625rem; line-height: 1.8; max-width: none; }
.p-event-content img { max-width: 100%; height: auto; }
.p-event-content table { width: 100%; display: block; overflow-x: auto; }
.p-event-content iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--u-radius); }
.p-event-back {
    margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--u-line);
}
.p-events-related .u-card-meta i { color: var(--u-teal); margin-right: 0.35rem; }
@media (max-width: 575.98px) {
    .p-event-content { font-size: 1rem; }
}

/* ==========================================================================
   frontend/testimonials.blade.php
   ========================================================================== */
/* Testimonials page */
.p-testi .u-quote-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.p-testi-stars { display: inline-flex; gap: 0.2rem; color: var(--u-sun-600); font-size: 0.9rem; }
.p-testi .u-quote-person { padding-top: 1.25rem; border-top: 1px solid var(--u-line); }
.p-testi-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    font-weight: 700;
    color: var(--u-teal);
    background: var(--u-teal-50);
}
@media (max-width: 575.98px) {
    .p-testi .u-quote-text { font-size: 1rem; }
}

/* ==========================================================================
   frontend/volunteer.blade.php
   ========================================================================== */
/* Volunteer page */
.p-vol-card { gap: 1.25rem; }
.p-vol-card h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin: 0; }
.p-vol-facts {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 1.25rem;
    background: var(--u-surface-tint);
    border-radius: var(--u-radius);
}
.p-vol-facts { list-style: none; }
.p-vol-facts li { display: flex; gap: 0.75rem; align-items: flex-start; min-width: 0; }
.p-vol-label { display: block;  font-size: var(--u-fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--u-muted); margin: 0; }
.p-vol-value { display: block;  margin: 0; font-weight: 600; color: var(--u-ink); }
.p-vol-card p { margin: 0; }
.p-vol-card .u-btn-group { margin-top: 0.5rem; }
@media (max-width: 575.98px) {
    .p-vol-facts { grid-template-columns: 1fr; }
    .p-vol-card .u-btn { width: 100%; }
}

/* ==========================================================================
   frontend/whyus.blade.php
   ========================================================================== */
/* Why Us page */
.p-why-quote {
    position: relative;
    margin: 0 0 1.75rem;
    padding: clamp(1.5rem, 1.1rem + 1vw, 2.25rem);
    background: var(--u-teal);
    border-radius: var(--u-radius-lg);
    color: #fff;
}
.p-why-quote .u-quote-mark { display: block; margin-bottom: 0.5rem; }
.p-why-quote p {
    margin: 0;
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
}
.p-why .u-prose p { margin-bottom: 0; }
.p-why .p-why-top { align-items: start; }
.p-why-partners { columns: 2 320px; column-gap: clamp(2rem, 1rem + 3vw, 4rem); max-width: none; }
.p-why-partners > p { break-inside: avoid; margin: 0 0 1.1em; }
.p-why-partners > * + * { margin-top: 0; }

.p-why-feature { gap: 0.85rem; }
.p-why-feature h3 { font-size: var(--u-fs-h3); margin: 0.35rem 0 0; }
.p-why-feature p { margin: 0; font-size: var(--u-fs-sm); line-height: 1.7; }
.p-why-feature .u-media { box-shadow: none; border-radius: var(--u-radius); margin-top: auto; }

@media (max-width: 991.98px) {
    .p-why .u-split .u-media { max-width: 720px; }
}
@media (max-width: 575.98px) {
    .p-why-partners { columns: 1; }
}

/* ==========================================================================
   projects/show.blade.php
   ========================================================================== */
/* Project detail — only what the design system does not cover */
.p-project-block + .p-project-block {
    margin-top: clamp(3.5rem, 2rem + 5vw, 6.5rem);
    padding-top: clamp(3.5rem, 2rem + 5vw, 6.5rem);
    border-top: 1px solid var(--u-line);
}
.p-project-block .u-split { align-items: start; }
.p-project-media { width: 100%; }
.p-project-media-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--u-muted);
    font-size: var(--u-fs-sm);
    box-shadow: none;
    border: 1px dashed var(--u-line);
}
.p-project-content .u-title { margin-bottom: 0.5rem; }
.p-project-subtitle {
    font-size: var(--u-fs-lead);
    font-weight: 600;
    color: var(--u-teal);
    margin: 0 0 1.25rem;
}
.p-project-content .u-prose ul,
.p-project-content .u-prose ol { padding-left: 1.4rem; }
.p-project-content .u-prose img { max-width: 100%; height: auto; }
.p-project-content .u-prose table { width: 100%; display: block; overflow-x: auto; }
.p-project-content .u-prose { overflow-wrap: anywhere; }
.p-project-gallery { margin-top: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); }
.p-project-gallery-label {
    font-size: var(--u-fs-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--u-muted);
    margin: 0 0 1rem;
}
.p-project-pagination { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); display: flex; justify-content: center; }

@media (min-width: 992px) {
    .p-project-media { position: sticky; top: calc(var(--u-header-h) + 1.5rem); }
}
@media (max-width: 991.98px) {
    .p-project-content .u-prose { max-width: none; }
}
@media (max-width: 767.98px) {
    .p-project-subtitle { margin-bottom: 1rem; }
}
@media (max-width: 575.98px) {
    .p-project-block + .p-project-block { margin-top: 2.75rem; padding-top: 2.75rem; }
}

/* ==========================================================================
   frontend/news/index.blade.php
   ========================================================================== */
/* News listing: featured card, filter chips, search — the grid is the design system's */
.p-news-featured { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); height: auto; }
.p-news-featured .u-card-media .u-badge--sun { background: var(--u-sun); }
.p-news-featured .u-card-meta { align-items: center; }
@media (min-width: 576px) and (max-width: 991.98px) {
    .p-news-featured .u-card-media { aspect-ratio: 2 / 1; }
}
@media (min-width: 992px) {
    .p-news-featured { flex-direction: row; }
    .p-news-featured .u-card-media { flex: 0 0 56%; aspect-ratio: auto; min-height: 380px; }
    .p-news-featured .u-card-body { justify-content: center; padding: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
    .p-news-featured .u-card-title { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); -webkit-line-clamp: 3; }
    .p-news-featured .u-card-text { -webkit-line-clamp: 5; font-size: var(--u-fs-body); }
}

.p-news-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}
.p-news-chips,
.p-updates-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}
.p-news .p-news-chip,
.p-updates .p-news-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.45rem 1rem;
    font-size: var(--u-fs-sm);
    font-weight: 600;
    color: var(--u-forest);
    text-decoration: none;
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-pill);
    transition: background-color var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease), border-color var(--u-dur) var(--u-ease);
}
.p-news .p-news-chip:hover,
.p-updates .p-news-chip:hover { border-color: var(--u-teal); color: var(--u-teal); }
.p-news .p-news-chip.is-active,
.p-updates .p-news-chip.is-active { background: var(--u-teal); border-color: var(--u-teal); color: #fff; }

.p-news-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 1 340px;
    min-width: 0;
}
.p-news-search .u-input { min-height: 44px; padding-block: 0.5rem; padding-inline: 1.1rem; border-radius: var(--u-radius-pill); }
.p-news-search .u-btn { min-height: 44px; width: 44px; padding: 0; flex-shrink: 0; }
.p-news-result { margin: 0 0 1.5rem; }
.p-news-pagination { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); display: flex; justify-content: center; }
.p-news-pagination nav { max-width: 100%; }

@media (max-width: 767.98px) {
    .p-news-search { flex: 1 1 100%; }
}

/* ==========================================================================
   frontend/news/show.blade.php
   (also styles the shared partials: share links, tags, admin preview banner)
   ========================================================================== */
.p-news-article-meta,
.p-update-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.1rem;
    margin-bottom: 1.5rem;
    font-size: var(--u-fs-sm);
    color: var(--u-muted);
}
.p-news-article-meta time,
.p-news-article-meta span,
.p-update-article-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.p-news-article-meta a.u-badge,
.p-update-article-meta a.u-badge { text-decoration: none; }
.p-news-article-meta a.u-badge:hover,
.p-update-article-meta a.u-badge:hover { background: var(--u-teal-100); }
.p-news-article-lead,
.p-update-article-lead { margin: 0 0 clamp(1.5rem, 1.2rem + 1vw, 2.25rem); color: var(--u-ink); font-weight: 500; }
.p-news-article-figure,
.p-update-article-figure { margin: 0 0 clamp(1.75rem, 1.3rem + 1.5vw, 2.75rem); }

/* Rich text from the admin editor */
.p-news-article-body,
.p-update-article-body {
    max-width: none;
    font-size: 1.0625rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}
.p-news-article-body h2, .p-update-article-body h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); }
.p-news-article-body h3, .p-update-article-body h3 { font-size: var(--u-fs-h3); }
.p-news-article-body ul, .p-news-article-body ol,
.p-update-article-body ul, .p-update-article-body ol { padding-left: 1.4rem; }
.p-news-article-body li + li, .p-update-article-body li + li { margin-top: 0.35rem; }
.p-news-article-body img, .p-update-article-body img { max-width: 100%; height: auto !important; }
.p-news-article-body iframe, .p-update-article-body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--u-radius); }
.p-news-article-body table, .p-update-article-body table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
.p-news-article-body th, .p-news-article-body td,
.p-update-article-body th, .p-update-article-body td { padding: 0.5rem 0.75rem; border: 1px solid var(--u-line); }
.p-news-article-body blockquote, .p-update-article-body blockquote {
    margin-inline: 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--u-sun);
    background: var(--u-surface-alt);
    border-radius: 0 var(--u-radius-sm) var(--u-radius-sm) 0;
    color: var(--u-ink);
}

.p-news-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: clamp(1.75rem, 1.4rem + 1vw, 2.5rem) 0 0;
    padding: 0;
}
.p-news-tags .u-badge { text-transform: none; letter-spacing: 0; }

.p-news-article-foot,
.p-update-article-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: space-between;
    align-items: center;
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--u-line);
}

/* Share links */
.p-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem; }
.p-share-label {
    margin: 0;
    font-size: var(--u-fs-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--u-muted);
}
.p-share-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.p-share-list a,
.p-share-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    color: var(--u-teal);
    background: var(--u-teal-50);
    border: 1px solid var(--u-teal-100);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease), transform var(--u-dur) var(--u-ease);
}
.p-share-list a:hover,
.p-share-copy:hover { color: #fff; background: var(--u-teal); transform: translateY(-2px); }
.p-share-copy.is-copied { color: var(--u-forest); background: var(--u-sun); border-color: var(--u-sun); }
.p-share-status { font-size: var(--u-fs-xs); font-weight: 600; color: var(--u-teal); }

/* Admin preview banner (only on /admin/.../preview) */
.p-preview-banner {
    position: sticky;
    top: var(--u-header-h);
    z-index: 1020;
    background: var(--u-forest);
    color: #fff;
    border-bottom: 3px solid var(--u-sun);
}
.p-preview-banner-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-block: 0.75rem;
}
.p-preview-banner p { margin: 0; font-size: var(--u-fs-sm); }
.p-preview-banner strong { color: var(--u-sun); }
.p-preview-banner i { margin-right: 0.35rem; color: var(--u-sun); }

@media (max-width: 575.98px) {
    .p-news-article-body, .p-update-article-body { font-size: 1rem; line-height: 1.75; }
    .p-news-article-foot, .p-update-article-foot { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   frontend/latest-updates/index.blade.php
   ========================================================================== */
/* Latest Updates: compact dated list (timeline feel), distinct from the News cards */
.p-updates .u-section-header--split { align-items: flex-end; }

.p-updates-highlight {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
    padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
    background: var(--u-teal);
    color: rgba(255, 255, 255, 0.88);
    border-radius: var(--u-radius-lg);
    border-left: 6px solid var(--u-sun);
    box-shadow: var(--u-shadow);
    overflow: hidden;
}
.p-updates-highlight-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-size: var(--u-fs-sm);
    margin-bottom: 0.75rem;
}
.p-updates-highlight-title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
    color: #fff;
}
.p-updates-highlight-title a { color: inherit; text-decoration: none; }
.p-updates-highlight-title a::after { content: ""; position: absolute; inset: 0; }
.p-updates-highlight p { margin: 0 0 1rem; max-width: 70ch; }
.p-updates-highlight .u-link { color: var(--u-sun); }
.p-updates-highlight:hover .u-link { background-size: 100% 2px; }
.p-updates-highlight:hover .u-link-arrow { transform: translateX(4px); }
.p-updates-highlight-media { border-radius: var(--u-radius); overflow: hidden; aspect-ratio: 16 / 10; }
.p-updates-highlight-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 768px) {
    .p-updates-highlight { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); align-items: center; }
}

.p-updates-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--u-line);
}
.p-updates-row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem clamp(1rem, 0.6rem + 1.5vw, 2rem);
    align-items: start;
    padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem) clamp(0.25rem, 0.1rem + 0.8vw, 1rem);
    border-bottom: 1px solid var(--u-line);
    transition: background-color var(--u-dur) var(--u-ease);
}
.p-updates-row:hover { background: var(--u-surface-alt); }
.p-updates-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 76px;
    min-height: 76px;
    padding: 0.5rem;
    text-align: center;
    line-height: 1.1;
    background: var(--u-teal-50);
    border: 1px solid var(--u-teal-100);
    border-radius: var(--u-radius);
}
.p-updates-day { font-size: 1.75rem; font-weight: 800; color: var(--u-teal); letter-spacing: -0.02em; }
.p-updates-month { margin-top: 0.2rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--u-muted); }
.p-updates-body { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.p-updates-title { margin: 0; font-size: var(--u-fs-h3); line-height: 1.35; }
.p-updates-title a { color: var(--u-ink); text-decoration: none; }
.p-updates-title a::after { content: ""; position: absolute; inset: 0; }
.p-updates-row:hover .p-updates-title a { color: var(--u-teal); }
.p-updates-text {
    margin: 0;
    font-size: var(--u-fs-sm);
    color: var(--u-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.p-updates-row:hover .p-updates-more { background-size: 100% 2px; }
.p-updates-thumb { display: none; }
@media (min-width: 768px) {
    .p-updates-row:has(.p-updates-thumb) { grid-template-columns: auto minmax(0, 1fr) 160px; }
    .p-updates-thumb { display: block; aspect-ratio: 4 / 3; border-radius: var(--u-radius); overflow: hidden; background: var(--u-surface-tint); }
    .p-updates-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
@media (max-width: 575.98px) {
    .p-updates-date { width: 60px; min-height: 64px; }
    .p-updates-day { font-size: 1.4rem; }
    .p-updates .u-section-header--split { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   frontend/latest-updates/show.blade.php
   ========================================================================== */
/* Single update — body/meta/foot rules are shared with the news article above */
.p-update-article-head {
    display: flex;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.p-update-article .p-updates-date { flex-shrink: 0; }
.p-update-article-head .p-update-article-meta { margin-bottom: 0; }

/* ==========================================================================
   frontend/includes/indexnews.blade.php
   ========================================================================== */
/* Home: Latest News + Latest Updates side by side */
.h-news .h-news-split { align-items: start; }
.h-news .h-news-split--single { grid-template-columns: 1fr; }
.h-news-col { min-width: 0; }
.h-news-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
}
.h-news-head .u-title { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); }
.h-news-head .u-eyebrow { margin-bottom: 0.5rem; }

.h-news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.h-news-item { flex-direction: row; border-radius: var(--u-radius); }
.h-news-item .u-card-media { flex: 0 0 clamp(110px, 32%, 200px); aspect-ratio: 16 / 10; }
.h-news-item .u-card-body { justify-content: center; padding: 0.9rem 1.15rem; gap: 0.35rem; }
.h-news-item .u-card-title { font-size: 1.05rem; }

.h-updates-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 1.25rem;
    background: var(--u-surface-alt);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-lg);
}
.h-updates-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}
.h-updates-row + .h-updates-row { border-top: 1px solid var(--u-line); }
.h-updates-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    line-height: 1.05;
    background: var(--u-surface);
    border: 1px solid var(--u-teal-100);
    border-radius: var(--u-radius-sm);
}
.h-updates-day { font-size: 1.3rem; font-weight: 800; color: var(--u-teal); }
.h-updates-month { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--u-muted); }
.h-updates-body { min-width: 0; }
.h-updates-type {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--u-teal);
}
.h-updates-title {
    margin: 0.15rem 0 0;
    font-size: 1rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.h-updates-title a { color: var(--u-ink); text-decoration: none; }
.h-updates-title a::after { content: ""; position: absolute; inset: 0; }
.h-updates-row:hover .h-updates-title a { color: var(--u-teal); }

@media (max-width: 575.98px) {
    .h-news-item .u-card-media { flex-basis: 108px; aspect-ratio: 1 / 1; }
    .h-news-item .u-card-body { padding: 0.75rem 0.9rem; }
    .h-news-item .u-card-title { font-size: 0.98rem; }
    .h-updates-list { padding-inline: 1rem; }
}

/* ==========================================================================
   frontend/news/partials/attachment.blade.php
   ========================================================================== */
/* "Download PDF" card on News / Latest Update detail pages + PDF badge on listings */
.p-attachment {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-top: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
    padding: 1.1rem 1.25rem;
    background: var(--u-surface-alt);
    border: 1px solid var(--u-line);
    border-left: 4px solid var(--u-teal);
    border-radius: var(--u-radius);
}
.p-attachment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--u-radius-sm);
    font-size: 1.4rem;
    color: var(--u-teal);
    background: var(--u-teal-50);
}
.p-attachment-info { flex: 1 1 200px; min-width: 0; }
.p-attachment-name { margin: 0; font-weight: 700; color: var(--u-ink); overflow-wrap: anywhere; }
.p-attachment-meta { margin: 0.15rem 0 0; font-size: var(--u-fs-xs); color: var(--u-muted); }
.p-attachment .u-btn { flex-shrink: 0; }
.p-pdf-badge { padding: 0.2rem 0.55rem; font-size: 0.68rem; }
.p-updates-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
@media (max-width: 575.98px) {
    .p-attachment .u-btn { width: 100%; }
}

/* ==========================================================================
   frontend/knowledge-hub.blade.php
   ========================================================================== */
/* tab bar: one content area, the selected tab decides what is shown */
.p-hub-section { padding-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.p-hub-tabs {
    position: sticky;
    top: var(--u-header-h);
    z-index: 20;
    display: flex;
    gap: 0.5rem;
    margin: 0 calc(var(--u-gutter) * -1) clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
    padding: 0.85rem var(--u-gutter);
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--u-surface);
    border-bottom: 1px solid var(--u-line);
}
.p-hub-tabs::-webkit-scrollbar { display: none; }
.p-hub-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    min-height: 44px;
    padding: 0.5rem 1.15rem;
    font: 600 var(--u-fs-sm) / 1 var(--u-font);
    white-space: nowrap;
    color: var(--u-teal);
    background: var(--u-teal-50);
    border: 1px solid var(--u-teal-100);
    border-radius: var(--u-radius-pill);
    cursor: pointer;
    transition: background-color var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease), border-color var(--u-dur) var(--u-ease);
}
.p-hub-tab:hover { background: var(--u-teal-100); }
.p-hub-tab.is-active {
    color: #fff;
    background: var(--u-teal);
    border-color: var(--u-teal);
    box-shadow: 0 6px 16px rgba(14, 95, 97, 0.25);
}
.p-hub-tab.is-active i { color: var(--u-sun); }
/* without JavaScript every panel stays visible; with it, only the selected one */
.u-js .p-hub-panel:not(.is-active) { display: none; }
.u-js .p-hub-panel.is-active { animation: p-hub-fade 0.35s var(--u-ease); }
.p-hub-panel + .p-hub-panel { margin-top: var(--u-section); }
.u-js .p-hub-panel + .p-hub-panel { margin-top: 0; }
.p-hub-panel:focus-visible { outline-offset: 8px; }
@keyframes p-hub-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* latest updates rows */
.p-hub-updates { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.p-hub-update {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    color: var(--u-text);
    text-decoration: none;
    transition: border-color var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease), transform var(--u-dur) var(--u-ease);
}
.p-hub-update:hover { border-color: var(--u-teal-100); box-shadow: var(--u-shadow-sm); transform: translateY(-2px); color: var(--u-text); }
.p-hub-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 0.5rem 0.6rem;
    font-size: var(--u-fs-xs);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--u-forest);
    background: var(--u-sun);
    border-radius: var(--u-radius-sm);
}
.p-hub-date span { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.p-hub-update-body { display: grid; gap: 0.3rem; min-width: 0; }
.p-hub-update-body .u-badge { justify-self: start; }
.p-hub-update-title { font-weight: 700; color: var(--u-ink); font-size: 1.05rem; line-height: 1.35; }
.p-hub-update-text { font-size: var(--u-fs-sm); color: var(--u-muted); }
.p-hub-update-arrow { color: var(--u-teal); transition: transform var(--u-dur) var(--u-ease); }
.p-hub-update:hover .p-hub-update-arrow { transform: translateX(4px); }

/* videos & testimonials */
.p-hub-video { margin: 0; }
.p-hub-video .u-media { box-shadow: var(--u-shadow-sm); }
.p-hub-video figcaption { margin-top: 0.75rem; font-weight: 600; color: var(--u-ink); }
.p-hub-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    font-weight: 700;
    color: var(--u-teal);
    background: var(--u-teal-50);
}
.p-hub .u-section--dark .u-empty { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.75); }

@media (max-width: 575.98px) {
    .p-hub-update { grid-template-columns: auto 1fr; gap: 0.9rem; padding: 0.9rem; }
    .p-hub-update-arrow { display: none; }
    .p-hub-date { min-width: 60px; }
    .p-hub .u-section-header--split .u-btn { width: 100%; }
}

/* ==========================================================================
   Motion system — entrance animations (applied automatically by main.js)
   data-reveal="" (rise) | "left" | "right" | "zoom" | "tilt" | "blur" | "pop"
                | "curtain" | "curtain-left"
   Respects prefers-reduced-motion (see bottom of this block).
   ========================================================================== */
.u-js [data-reveal] {
    transition:
        opacity 0.85s var(--u-ease),
        transform 0.85s var(--u-ease),
        filter 0.85s var(--u-ease),
        clip-path 1.1s var(--u-ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.u-js [data-reveal="left"]  { transform: translateX(-56px); }
.u-js [data-reveal="right"] { transform: translateX(56px); }
.u-js [data-reveal="zoom"]  { transform: scale(0.88); }
.u-js [data-reveal="pop"]   { transform: scale(0.6); }
.u-js [data-reveal="blur"]  { filter: blur(12px); transform: scale(1.04); }
.u-js [data-reveal="tilt"]  {
    transform: perspective(900px) rotateX(16deg) translateY(36px);
    transform-origin: 50% 100%;
}
/* image "curtain": the photo is wiped open while it settles from a slight zoom */
/* The clip goes on the block's CHILDREN, never on the observed block itself:
   a fully clipped element counts as invisible, so it would never be revealed. */
.u-js [data-reveal^="curtain"] { opacity: 1; transform: none; }
.u-js [data-reveal^="curtain"] > * {
    clip-path: inset(-40px 100% -40px -40px);
    transition: clip-path 1.1s var(--u-ease);
    transition-delay: var(--reveal-delay, 0ms);
}
.u-js [data-reveal="curtain-left"] > * { clip-path: inset(-40px -40px -40px 100%); }
.u-js [data-reveal^="curtain"] img { transform: scale(1.18); transition: transform 1.6s var(--u-ease); }
.u-js [data-reveal^="curtain"].is-revealed > * { clip-path: inset(-40px -40px -40px -40px); }
.u-js [data-reveal^="curtain"].is-revealed img { transform: none; }

.u-js [data-reveal].is-revealed { opacity: 1; transform: none; filter: none; }

/* Section headers: the eyebrow's sun line draws in, then the title rises */
.u-js .u-section-header[data-reveal] .u-eyebrow::before {
    width: 0;
    transition: width 0.7s var(--u-ease) 0.25s;
}
.u-js .u-section-header[data-reveal].is-revealed .u-eyebrow::before { width: 28px; }
.u-js .u-section-header[data-reveal] .u-title,
.u-js .u-section-header[data-reveal] .u-lead {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s var(--u-ease), transform 0.8s var(--u-ease);
}
.u-js .u-section-header[data-reveal] .u-title { transition-delay: 0.12s; }
.u-js .u-section-header[data-reveal] .u-lead { transition-delay: 0.24s; }
.u-js .u-section-header[data-reveal].is-revealed .u-title,
.u-js .u-section-header[data-reveal].is-revealed .u-lead { opacity: 1; transform: none; }

/* Page-load entrances: home hero + inner page heroes */
@keyframes u-rise-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes u-zoom-in { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }
@keyframes u-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }

.u-js .h-hero-content > *,
.u-js .u-page-hero .u-container > * { animation: u-rise-in 0.9s var(--u-ease) both; }
.u-js .h-hero-content > :nth-child(1), .u-js .u-page-hero .u-container > :nth-child(1) { animation-delay: 0.1s; }
.u-js .h-hero-content > :nth-child(2), .u-js .u-page-hero .u-container > :nth-child(2) { animation-delay: 0.25s; }
.u-js .h-hero-content > :nth-child(3), .u-js .u-page-hero .u-container > :nth-child(3) { animation-delay: 0.4s; }
.u-js .h-hero-content > :nth-child(4), .u-js .u-page-hero .u-container > :nth-child(4) { animation-delay: 0.55s; }
.u-js .h-hero-content > :nth-child(5), .u-js .u-page-hero .u-container > :nth-child(5) { animation-delay: 0.7s; }
.u-js .h-hero-aside { animation: u-zoom-in 1.1s var(--u-ease) 0.45s both; }
/* slow "Ken Burns" zoom on hero photos */
.h-hero-media .carousel-item.active img,
.u-page-hero-img { animation: u-kenburns 12s ease-out both; }

/* Approach steps: the connecting line draws across once the step appears; the number pops */
.u-js .h-process-step .h-process-head::after,
.u-js .h-process-step::after {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s var(--u-ease);
    transition-delay: calc(var(--reveal-delay, 0ms) + 0.35s);
}
.u-js .h-process-step::after { transform: scaleY(0); transform-origin: center top; }
.u-js .h-process-step.is-revealed .h-process-head::after,
.u-js .h-process-step.is-revealed::after { transform: none; }
.u-js .h-process-step .u-step-num {
    transform: scale(0.4);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    transition-delay: calc(var(--reveal-delay, 0ms) + 0.15s);
}
.u-js .h-process-step.is-revealed .u-step-num { transform: none; opacity: 1; }

/* Phones & tablets: side slides become gentle rises so nothing pushes past the screen edge */
@media (max-width: 991.98px) {
    .u-js [data-reveal="left"],
    .u-js [data-reveal="right"] { transform: translateY(32px); }
}
/* safety net: entrance offsets must never create sideways scrolling */
#main-content { overflow-x: clip; }

/* Impact stats: value counts up (main.js); keep digits steady while counting */
.u-stat-value { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .u-js [data-reveal],
    .u-js [data-reveal^="curtain"],
    .u-js [data-reveal^="curtain"] img,
    .u-js [data-reveal^="curtain"] > *,
    .u-js .u-section-header[data-reveal] .u-title,
    .u-js .u-section-header[data-reveal] .u-lead,
    .u-js .h-process-step .u-step-num { opacity: 1; transform: none; filter: none; clip-path: none; }
    .u-js .u-section-header[data-reveal] .u-eyebrow::before { width: 28px; }
    .u-js .h-process-step .h-process-head::after, .u-js .h-process-step::after { transform: none; }
    .h-hero-media .carousel-item.active img, .u-page-hero-img { animation: none; }
}