/* =========================================================
   PROJECTS BOOKS
   projects.html
   adventure.html
   goldenrim.html
   hmom.html
   j&j.html
   mfc.html
========================================================= */


/* =========================================================
   PROJECT PAGE
========================================================= */

.projects-page,
.client-page {

    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding: 30px 40px 60px;

    box-sizing: border-box;
}


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

.projects-intro {

    margin-bottom: 28px;
}


.projects-intro h1 {

    margin: 0 0 8px;

    color: #102b52;

    font-size: 36px;

    font-weight: 800;
}


.projects-intro p {

    max-width: 950px;

    margin: 0;

    color: #60728b;

    font-size: 16px;

    line-height: 1.5;
}


/* =========================================================
   PROJECT GRID
========================================================= */

.projects-grid {

    display: grid;

    grid-template-columns:
        1.4fr
        .95fr
        .95fr;

    grid-template-rows:
        285px
        285px;

    gap: 18px;
}


/* =========================================================
   PROJECT BOX
========================================================= */

.project-box {

    position: relative;

    display: block;

    overflow: hidden;

    padding: 23px;

    box-sizing: border-box;

    border: 1px solid #d8dde4;

    border-radius: 26px;

    background: #faf9f5;

    color: inherit;

    text-decoration: none;
}


.project-heading {

    display: flex;

    align-items: flex-start;

    gap: 14px;
}


.project-icon {

    width: 52px;

    height: 52px;

    min-width: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: #ff7118;

    color: #ffffff;

    font-size: 23px;
}


.project-box h2 {

    margin: 1px 0 6px;

    color: #102b52;

    font-size: 24px;

    font-weight: 800;

    line-height: 1.15;
}


.project-box p {

    max-width: 520px;

    margin: 0;

    color: #60728b;

    font-size: 14px;

    line-height: 1.45;
}


/* =========================================================
   CARD POSITIONS

   SOCIAL MEDIA = LARGE LEFT
   LOGO DESIGN = SMALL RIGHT
========================================================= */

.social-box {

    grid-column: 1 / 3;

    grid-row: 1;

    cursor: pointer;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.logo-box {

    grid-column: 3;

    grid-row: 1;

    cursor: pointer;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.brand-box {

    grid-column: 1;

    grid-row: 2;
}


.web-box {

    grid-column: 2;

    grid-row: 2;
}


.graphic-box {

    grid-column: 3;

    grid-row: 2;
}


/* =========================================================
   CARD HOVER
========================================================= */

.logo-box:hover,
.social-box:hover {

    transform: translateY(-4px);

    border-color: #ff7118;

    box-shadow:
        0 12px 30px rgba(16, 43, 82, .10);
}


/* =========================================================
   SOCIAL MEDIA
========================================================= */

.social-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 20px;

    width: 48%;

    max-width: 48%;
}


.social-tags span {

    padding: 8px 12px;

    border: 1px solid #d8dde4;

    border-radius: 30px;

    background: #ffffff;

    color: #102b52;

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   SOCIAL MEDIA POST PREVIEW
========================================================= */

.social-post-preview {

    position: absolute;

    top: 22px;

    right: 22px;

    width: 235px;

    height: 235px;

    overflow: hidden;

    border-radius: 18px;

    background: #eeeeee;

    border: 1px solid #d8dde4;

    z-index: 10;
}


.social-post-slider {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    transform: translateY(0);
}


.social-post-slide {

    width: 235px;

    height: 235px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    box-sizing: border-box;
}


/* =========================================================
   SOCIAL MEDIA IMAGE

   FULL IMAGE
   NO CROP
========================================================= */

.social-post-slide img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;

    border-radius: 12px;
}


/* =========================================================
   SOCIAL MEDIA OVERLAY

   TINANGGAL ANG COLOR COVER
========================================================= */

.social-post-overlay {

    display: none;
}


/* =========================================================
   SOCIAL MEDIA SCROLL
========================================================= */

.social-box:hover .social-post-slider {

    animation:
        socialPostScroll 22s linear infinite;
}


@keyframes socialPostScroll {

    0% {

        transform: translateY(0);
    }

    100% {

        transform: translateY(-2350px);
    }
}


/* =========================================================
   VIEW DESIGNS
========================================================= */

.view-designs {

    position: absolute;

    left: 23px;

    bottom: 20px;

    color: #ff7118;

    font-size: 14px;

    font-weight: 800;
}


/* =========================================================
   LOGO DESIGN PREVIEW
========================================================= */

.logo-preview {

    position: absolute;

    right: 18px;

    bottom: 18px;

    width: calc(100% - 36px);

    height: 125px;

    overflow: hidden;

    border-radius: 15px;

    background: #eeeeee;
}


.logo-slider {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1250px;

    transform: translateY(0);
}


.logo-slide {

    width: 100%;

    height: 125px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px;

    box-sizing: border-box;
}


.logo-slide img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;
}


/* =========================================================
   LOGO SCROLL
========================================================= */

.logo-box:hover .logo-slider {

    animation:
        logoScroll 18s linear infinite;
}


@keyframes logoScroll {

    0% {

        transform: translateY(0);
    }

    100% {

        transform: translateY(-1125px);
    }
}


/* =========================================================
   LOGO OVERLAY

   TINANGGAL ANG COLOR COVER
========================================================= */

.logo-preview-text {

    display: none;
}


/* =========================================================
   BRAND IDENTITY
========================================================= */

.brand-placeholder {

    position: absolute;

    left: 50%;

    bottom: -45px;

    width: 180px;

    height: 180px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #f1efe8;

    color: #102b52;

    font-size: 58px;

    font-weight: 800;
}


/* =========================================================
   WEB DESIGN
========================================================= */

.web-items {

    margin-top: 18px;
}


.web-items div {

    display: flex;

    justify-content: space-between;

    padding: 10px 0;

    border-bottom: 1px solid #e1e3e5;

    color: #102b52;

    font-size: 13px;
}


.web-items strong {

    color: #ff7118;
}


/* =========================================================
   GRAPHIC DESIGN
========================================================= */

.graphic-items {

    margin-top: 18px;
}


.graphic-items div {

    padding: 9px 0;

    border-bottom: 1px solid #e1e3e5;

    color: #102b52;

    font-size: 13px;

    font-weight: 700;
}


/* =========================================================
   SOCIAL MEDIA FOLDERS
========================================================= */

.social-folders {

    margin-top: 40px;

    padding-top: 38px;

    border-top: 1px solid #d8dde4;
}


.social-folder-header {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 22px;
}


.small-label {

    display: block;

    margin-bottom: 4px;

    color: #ff7118;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.social-folder-header h2 {

    margin: 0 0 5px;

    color: #102b52;

    font-size: 29px;
}


.social-folder-header p {

    margin: 0;

    color: #60728b;

    font-size: 14px;
}


/* =========================================================
   CLIENT FOLDERS
========================================================= */

.folders-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}


.client-folder {

    position: relative;

    min-height: 230px;

    padding: 22px;

    box-sizing: border-box;

    border: 1px solid #d8dde4;

    border-radius: 23px;

    background: #faf9f5;

    color: inherit;

    text-decoration: none;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.client-folder:hover {

    transform: translateY(-5px);

    border-color: #ff7118;

    box-shadow:
        0 12px 30px rgba(16, 43, 82, .10);
}


.folder-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 17px;

    border-radius: 14px;

    background: #ff7118;

    font-size: 23px;
}


.folder-count {

    position: absolute;

    top: 22px;

    right: 22px;

    padding: 6px 10px;

    border-radius: 20px;

    background: #f0eee8;

    color: #60728b;

    font-size: 11px;

    font-weight: 700;
}


.client-folder h3 {

    margin: 0 0 7px;

    color: #102b52;

    font-size: 20px;
}


.client-folder p {

    margin: 0;

    color: #60728b;

    font-size: 13px;

    line-height: 1.5;
}


.open-folder {

    position: absolute;

    left: 22px;

    bottom: 19px;

    color: #ff7118;

    font-size: 13px;

    font-weight: 800;
}


/* =========================================================
   CLIENT PAGE
========================================================= */

.client-page {

    padding-top: 30px;
}


.back-projects {

    display: inline-block;

    margin-bottom: 20px;

    color: #ff7118;

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;
}


.back-projects:hover {

    text-decoration: underline;
}


.client-header {

    display: flex;

    align-items: center;

    gap: 17px;

    margin-bottom: 20px;

    padding: 25px;

    border: 1px solid #d8dde4;

    border-radius: 24px;

    background: #faf9f5;
}


.client-main-icon {

    width: 62px;

    height: 62px;

    min-width: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background: #ff7118;

    font-size: 26px;
}


.client-header h1 {

    margin: 0 0 6px;

    color: #102b52;

    font-size: 30px;
}


.client-header p {

    max-width: 900px;

    margin: 0;

    color: #60728b;

    font-size: 14px;

    line-height: 1.5;
}


.design-count {

    margin-bottom: 15px;

    color: #102b52;

    font-size: 15px;

    font-weight: 800;
}


/* =========================================================
   DESIGN GALLERY
========================================================= */

.design-gallery {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 16px;
}


.design-item {

    position: relative;

    overflow: hidden;

    aspect-ratio: 1 / 1;

    border: 1px solid #d8dde4;

    border-radius: 17px;

    background: #eeeeee;

    cursor: pointer;
}


.design-item img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .3s ease;
}


.design-item:hover img {

    transform: scale(1.05);
}


.design-number {

    position: absolute;

    left: 10px;

    bottom: 10px;

    z-index: 2;

    padding: 5px 9px;

    border-radius: 20px;

    background:
        rgba(16, 43, 82, .90);

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;
}


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

.image-lightbox {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 25px;

    background:
        rgba(5, 10, 20, .94);
}


.image-lightbox.active {

    display: flex;
}


.lightbox-content {

    width: min(1000px, 90vw);

    max-height: 92vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}


.lightbox-image {

    max-width: 100%;

    max-height: 76vh;

    width: auto;

    height: auto;

    object-fit: contain;

    border-radius: 10px;

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


.lightbox-number {

    margin-bottom: 12px;

    padding: 7px 13px;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, .10);

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;
}


.lightbox-close {

    position: absolute;

    top: 25px;

    right: 30px;

    width: 45px;

    height: 45px;

    border: 1px solid rgba(255, 255, 255, .3);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .08);

    color: #ffffff;

    font-size: 25px;

    cursor: pointer;
}


.lightbox-close:hover {

    background: #ff7118;
}


.lightbox-prev,
.lightbox-next {

    position: absolute;

    top: 50%;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform: translateY(-50%);

    border: 1px solid rgba(255, 255, 255, .3);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .08);

    color: #ffffff;

    font-size: 25px;

    cursor: pointer;
}


.lightbox-prev {

    left: 25px;
}


.lightbox-next {

    right: 25px;
}


.lightbox-prev:hover,
.lightbox-next:hover {

    background: #ff7118;
}


/* =========================================================
   THUMBNAILS
========================================================= */

.lightbox-thumbnails {

    width: 100%;

    display: flex;

    gap: 7px;

    margin-top: 15px;

    padding: 8px;

    overflow-x: auto;

    border-radius: 12px;

    background:
        rgba(0, 0, 0, .35);
}


.lightbox-thumb {

    position: relative;

    flex: 0 0 55px;

    width: 55px;

    height: 55px;

    overflow: hidden;

    padding: 0;

    border: 2px solid transparent;

    border-radius: 7px;

    background: transparent;

    cursor: pointer;
}


.lightbox-thumb img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
}


.lightbox-thumb.active {

    border-color: #ff7118;
}


.lightbox-thumb-number {

    position: absolute;

    right: 2px;

    bottom: 2px;

    padding: 2px 4px;

    border-radius: 4px;

    background:
        rgba(0, 0, 0, .75);

    color: #ffffff;

    font-size: 8px;
}


/* =========================================================
   LOGO GALLERY
========================================================= */

.logo-design-item {

    border: 1px solid #d8dde4;

    padding: 0;
}


.logo-design-item img {

    object-fit: contain;

    padding: 14px;

    background: #ffffff;
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode .project-box,
body.dark-mode .client-folder,
body.dark-mode .client-header {

    background: #101827;

    border-color: #263449;
}


body.dark-mode .projects-intro h1,
body.dark-mode .project-box h2,
body.dark-mode .social-folder-header h2,
body.dark-mode .client-folder h3,
body.dark-mode .client-header h1,
body.dark-mode .design-count {

    color: #ffffff;
}


body.dark-mode .projects-intro p,
body.dark-mode .project-box p,
body.dark-mode .social-folder-header p,
body.dark-mode .client-folder p,
body.dark-mode .client-header p {

    color: #aeb9ca;
}


body.dark-mode .social-tags span {

    background: #1b2638;

    border-color: #263449;

    color: #ffffff;
}


body.dark-mode .folder-count {

    background: #1b2638;

    color: #aeb9ca;
}


body.dark-mode .web-items div,
body.dark-mode .graphic-items div {

    color: #ffffff;

    border-color: #263449;
}


body.dark-mode .logo-preview,
body.dark-mode .social-post-preview {

    background: #1b2638;

    border-color: #263449;
}


body.dark-mode .logo-design-item img {

    background: #101827;
}


body.dark-mode .logo-design-item {

    border-color: #263449;
}


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

@media (max-width: 1100px) {

    .projects-page,
    .client-page {

        padding: 25px;
    }


    .projects-grid {

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            280px
            260px
            260px;
    }


    /* SOCIAL MEDIA - LARGE */

    .social-box {

        grid-column: 1 / 3;

        grid-row: 1;
    }


    /* LOGO DESIGN */

    .logo-box {

        grid-column: 1;

        grid-row: 2;
    }


    /* BRAND */

    .brand-box {

        grid-column: 2;

        grid-row: 2;
    }


    /* WEB */

    .web-box {

        grid-column: 1;

        grid-row: 3;
    }


    /* GRAPHIC */

    .graphic-box {

        grid-column: 2;

        grid-row: 3;
    }


    .social-post-preview {

        width: 190px;

        height: 190px;

        top: 20px;

        right: 20px;
    }


    .social-post-slide {

        width: 190px;

        height: 190px;
    }


    .social-tags {

        width: 48%;

        max-width: 48%;
    }


    .social-box .project-heading > div:last-child {

        padding-right: 210px;
    }


    @keyframes socialPostScroll {

        0% {

            transform: translateY(0);
        }

        100% {

            transform: translateY(-1900px);
        }
    }


    .logo-preview {

        height: 110px;

        width: calc(100% - 36px);
    }


    .logo-slider {

        height: 1100px;
    }


    .logo-slide {

        height: 110px;
    }


    @keyframes logoScroll {

        0% {

            transform: translateY(0);
        }

        100% {

            transform: translateY(-990px);
        }
    }


    .folders-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .design-gallery {

        grid-template-columns:
            repeat(3, 1fr);
    }

}


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

@media (max-width: 700px) {

    .projects-page,
    .client-page {

        padding: 20px 15px 45px;
    }


    .projects-intro h1 {

        font-size: 28px;
    }


    .projects-grid {

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows: auto;
    }


    .logo-box,
    .brand-box,
    .social-box,
    .web-box,
    .graphic-box {

        grid-column: auto;

        grid-row: auto;

        min-height: 270px;
    }


    /* =====================================================
       MOBILE LOGO PREVIEW
    ===================================================== */

    .logo-preview {

        position: absolute;

        right: 18px;

        left: 18px;

        bottom: 18px;

        width: auto;

        height: 145px;
    }


    .logo-slider {

        height: 1450px;
    }


    .logo-slide {

        height: 145px;

        padding: 15px;
    }


    @keyframes logoScroll {

        0% {

            transform: translateY(0);
        }

        100% {

            transform: translateY(-1305px);
        }
    }


    /* =====================================================
       MOBILE SOCIAL MEDIA
    ===================================================== */

    .social-post-preview {

        top: auto;

        right: 18px;

        bottom: 18px;

        width: 125px;

        height: 125px;
    }


    .social-post-slide {

        width: 125px;

        height: 125px;
    }


    .social-tags {

        width: auto;

        max-width: 100%;

        padding-right: 140px;

        box-sizing: border-box;
    }


    .social-box .project-heading > div:last-child {

        padding-right: 0;
    }


    @keyframes socialPostScroll {

        0% {

            transform: translateY(0);
        }

        100% {

            transform: translateY(-1250px);
        }
    }


    .folders-grid {

        grid-template-columns: 1fr;
    }


    .client-header {

        align-items: flex-start;

        flex-direction: column;
    }


    .client-header h1 {

        font-size: 26px;
    }


    .design-gallery {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 10px;
    }


    .lightbox-prev {

        left: 10px;
    }


    .lightbox-next {

        right: 10px;
    }


    .lightbox-image {

        max-width: 88vw;

        max-height: 70vh;
    }

}
/* =========================================================
   ADDITION ONLY: UI/UX CARD CLICK EFFECT
   ========================================================= */

.uiux-project-link {
    cursor: pointer;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.uiux-project-link:hover {
    transform: translateY(-4px);
    border-color: #ff7118;
    box-shadow: 0 12px 30px rgba(16, 43, 82, 0.10);
}

.uiux-project-link:focus-visible {
    outline: 3px solid #22D3EE;
    outline-offset: 4px;
}



/* =========================================================
   DARK MODE FIX - HIGH CONTRAST
   Supports theme classes on body OR html, plus data-theme.
   Keep this section at the VERY END of the stylesheet.
========================================================= */

:root {
    color-scheme: light;
}

/* Dark theme detection: common theme-toggle conventions */
html.dark-mode,
body.dark-mode,
html.dark,
body.dark,
html[data-theme="dark"],
body[data-theme="dark"],
[data-bs-theme="dark"] {
    color-scheme: dark;
}

/* Dark mode card and preview surfaces */
html.dark-mode .projects-page .project-box,
body.dark-mode .projects-page .project-box,
html.dark .projects-page .project-box,
body.dark .projects-page .project-box,
html[data-theme="dark"] .projects-page .project-box,
body[data-theme="dark"] .projects-page .project-box,
[data-bs-theme="dark"] .projects-page .project-box,
html.dark-mode .client-page .client-folder,
body.dark-mode .client-page .client-folder,
html.dark .client-page .client-folder,
body.dark .client-page .client-folder,
html[data-theme="dark"] .client-page .client-folder,
body[data-theme="dark"] .client-page .client-folder,
[data-bs-theme="dark"] .client-page .client-folder,
html.dark-mode .client-page .client-header,
body.dark-mode .client-page .client-header,
html.dark .client-page .client-header,
body.dark .client-page .client-header,
html[data-theme="dark"] .client-page .client-header,
body[data-theme="dark"] .client-page .client-header,
[data-bs-theme="dark"] .client-page .client-header {
    background-color: #101827 !important;
    border-color: #35445a !important;
    color: #f4f7fb !important;
}

/* Headings: prevent white-on-cream or dark-on-dark text */
html.dark-mode .projects-intro h1,
body.dark-mode .projects-intro h1,
html.dark .projects-intro h1,
body.dark .projects-intro h1,
html[data-theme="dark"] .projects-intro h1,
body[data-theme="dark"] .projects-intro h1,
[data-bs-theme="dark"] .projects-intro h1,
html.dark-mode .project-box h2,
body.dark-mode .project-box h2,
html.dark .project-box h2,
body.dark .project-box h2,
html[data-theme="dark"] .project-box h2,
body[data-theme="dark"] .project-box h2,
[data-bs-theme="dark"] .project-box h2,
html.dark-mode .social-folder-header h2,
body.dark-mode .social-folder-header h2,
html.dark .social-folder-header h2,
body.dark .social-folder-header h2,
html[data-theme="dark"] .social-folder-header h2,
body[data-theme="dark"] .social-folder-header h2,
[data-bs-theme="dark"] .social-folder-header h2,
html.dark-mode .client-folder h3,
body.dark-mode .client-folder h3,
html.dark .client-folder h3,
body.dark .client-folder h3,
html[data-theme="dark"] .client-folder h3,
body[data-theme="dark"] .client-folder h3,
[data-bs-theme="dark"] .client-folder h3,
html.dark-mode .client-header h1,
body.dark-mode .client-header h1,
html.dark .client-header h1,
body.dark .client-header h1,
html[data-theme="dark"] .client-header h1,
body[data-theme="dark"] .client-header h1,
[data-bs-theme="dark"] .client-header h1,
html.dark-mode .design-count,
body.dark-mode .design-count,
html.dark .design-count,
body.dark .design-count,
html[data-theme="dark"] .design-count,
body[data-theme="dark"] .design-count,
[data-bs-theme="dark"] .design-count {
    color: #f4f7fb !important;
}

/* Paragraphs and descriptive text */
html.dark-mode .projects-intro p,
body.dark-mode .projects-intro p,
html.dark .projects-intro p,
body.dark .projects-intro p,
html[data-theme="dark"] .projects-intro p,
body[data-theme="dark"] .projects-intro p,
[data-bs-theme="dark"] .projects-intro p,
html.dark-mode .project-box p,
body.dark-mode .project-box p,
html.dark .project-box p,
body.dark .project-box p,
html[data-theme="dark"] .project-box p,
body[data-theme="dark"] .project-box p,
[data-bs-theme="dark"] .project-box p,
html.dark-mode .social-folder-header p,
body.dark-mode .social-folder-header p,
html.dark .social-folder-header p,
body.dark .social-folder-header p,
html[data-theme="dark"] .social-folder-header p,
body[data-theme="dark"] .social-folder-header p,
[data-bs-theme="dark"] .social-folder-header p,
html.dark-mode .client-folder p,
body.dark-mode .client-folder p,
html.dark .client-folder p,
body.dark .client-folder p,
html[data-theme="dark"] .client-folder p,
body[data-theme="dark"] .client-folder p,
[data-bs-theme="dark"] .client-folder p,
html.dark-mode .client-header p,
body.dark-mode .client-header p,
html.dark .client-header p,
body.dark .client-header p,
html[data-theme="dark"] .client-header p,
body[data-theme="dark"] .client-header p,
[data-bs-theme="dark"] .client-header p {
    color: #bdc9d9 !important;
}

/* Lists, tags, and count labels */
html.dark-mode .web-items div,
body.dark-mode .web-items div,
html.dark .web-items div,
body.dark .web-items div,
html[data-theme="dark"] .web-items div,
body[data-theme="dark"] .web-items div,
[data-bs-theme="dark"] .web-items div,
html.dark-mode .graphic-items div,
body.dark-mode .graphic-items div,
html.dark .graphic-items div,
body.dark .graphic-items div,
html[data-theme="dark"] .graphic-items div,
body[data-theme="dark"] .graphic-items div,
[data-bs-theme="dark"] .graphic-items div {
    color: #f4f7fb !important;
    border-bottom-color: #35445a !important;
}

html.dark-mode .social-tags span,
body.dark-mode .social-tags span,
html.dark .social-tags span,
body.dark .social-tags span,
html[data-theme="dark"] .social-tags span,
body[data-theme="dark"] .social-tags span,
[data-bs-theme="dark"] .social-tags span,
html.dark-mode .folder-count,
body.dark-mode .folder-count,
html.dark .folder-count,
body.dark .folder-count,
html[data-theme="dark"] .folder-count,
body[data-theme="dark"] .folder-count,
[data-bs-theme="dark"] .folder-count {
    background-color: #1b2638 !important;
    border-color: #35445a !important;
    color: #e5edf7 !important;
}

/* Image preview surfaces remain distinct from cards */
html.dark-mode .social-post-preview,
body.dark-mode .social-post-preview,
html.dark .social-post-preview,
body.dark .social-post-preview,
html[data-theme="dark"] .social-post-preview,
body[data-theme="dark"] .social-post-preview,
[data-bs-theme="dark"] .social-post-preview,
html.dark-mode .logo-preview,
body.dark-mode .logo-preview,
html.dark .logo-preview,
body.dark .logo-preview,
html[data-theme="dark"] .logo-preview,
body[data-theme="dark"] .logo-preview,
[data-bs-theme="dark"] .logo-preview {
    background-color: #1b2638 !important;
    border-color: #35445a !important;
}

/* Brand placeholder and logo images */
html.dark-mode .brand-placeholder,
body.dark-mode .brand-placeholder,
html.dark .brand-placeholder,
body.dark .brand-placeholder,
html[data-theme="dark"] .brand-placeholder,
body[data-theme="dark"] .brand-placeholder,
[data-bs-theme="dark"] .brand-placeholder {
    background-color: #1b2638 !important;
    color: #f4f7fb !important;
}

html.dark-mode .logo-design-item img,
body.dark-mode .logo-design-item img,
html.dark .logo-design-item img,
body.dark .logo-design-item img,
html[data-theme="dark"] .logo-design-item img,
body[data-theme="dark"] .logo-design-item img,
[data-bs-theme="dark"] .logo-design-item img {
    background-color: #ffffff !important;
}

/* Lightbox text stays readable */
html.dark-mode .lightbox-number,
body.dark-mode .lightbox-number,
html.dark .lightbox-number,
body.dark .lightbox-number,
html[data-theme="dark"] .lightbox-number,
body[data-theme="dark"] .lightbox-number,
[data-bs-theme="dark"] .lightbox-number {
    color: #ffffff !important;
}

/* Accessibility: visible keyboard focus */
html.dark-mode .uiux-project-link:focus-visible,
body.dark-mode .uiux-project-link:focus-visible,
html.dark .uiux-project-link:focus-visible,
body.dark .uiux-project-link:focus-visible,
html[data-theme="dark"] .uiux-project-link:focus-visible,
body[data-theme="dark"] .uiux-project-link:focus-visible,
[data-bs-theme="dark"] .uiux-project-link:focus-visible {
    outline-color: #22d3ee !important;
}

/* =========================================================
   FINAL OVERRIDE: PROJECTS DARK MODE TEXT VISIBILITY
   This block intentionally goes last.
========================================================= */

:is(html, body).dark-mode .projects-page .project-box,
:is(html, body).dark-mode .client-page .client-folder,
:is(html, body).dark-mode .client-page .client-header,
:is(html, body).dark .projects-page .project-box,
:is(html, body).dark .client-page .client-folder,
:is(html, body).dark .client-page .client-header,
:is(html, body)[data-theme="dark"] .projects-page .project-box,
:is(html, body)[data-theme="dark"] .client-page .client-folder,
:is(html, body)[data-theme="dark"] .client-page .client-header,
[data-bs-theme="dark"] .projects-page .project-box,
[data-bs-theme="dark"] .client-page .client-folder,
[data-bs-theme="dark"] .client-page .client-header {
    background: #101827 !important;
    color: #f4f7fb !important;
    border-color: #35445a !important;
}

:is(html, body).dark-mode .projects-page .project-box h2,
:is(html, body).dark-mode .projects-page .project-box p,
:is(html, body).dark-mode .projects-page .web-items div,
:is(html, body).dark-mode .projects-page .graphic-items div,
:is(html, body).dark-mode .projects-page .brand-placeholder,
:is(html, body).dark-mode .social-folder-header h2,
:is(html, body).dark-mode .social-folder-header p,
:is(html, body).dark-mode .client-page .client-folder h3,
:is(html, body).dark-mode .client-page .client-folder p,
:is(html, body).dark-mode .client-page .client-header h1,
:is(html, body).dark-mode .client-page .client-header p,
:is(html, body).dark-mode .client-page .design-count,
:is(html, body).dark .projects-page .project-box h2,
:is(html, body).dark .projects-page .project-box p,
:is(html, body).dark .projects-page .web-items div,
:is(html, body).dark .projects-page .graphic-items div,
:is(html, body).dark .projects-page .brand-placeholder,
:is(html, body).dark .social-folder-header h2,
:is(html, body).dark .social-folder-header p,
:is(html, body).dark .client-page .client-folder h3,
:is(html, body).dark .client-page .client-folder p,
:is(html, body).dark .client-page .client-header h1,
:is(html, body).dark .client-page .client-header p,
:is(html, body).dark .client-page .design-count,
:is(html, body)[data-theme="dark"] .projects-page .project-box h2,
:is(html, body)[data-theme="dark"] .projects-page .project-box p,
:is(html, body)[data-theme="dark"] .projects-page .web-items div,
:is(html, body)[data-theme="dark"] .projects-page .graphic-items div,
:is(html, body)[data-theme="dark"] .projects-page .brand-placeholder,
:is(html, body)[data-theme="dark"] .social-folder-header h2,
:is(html, body)[data-theme="dark"] .social-folder-header p,
:is(html, body)[data-theme="dark"] .client-page .client-folder h3,
:is(html, body)[data-theme="dark"] .client-page .client-folder p,
:is(html, body)[data-theme="dark"] .client-page .client-header h1,
:is(html, body)[data-theme="dark"] .client-page .client-header p,
:is(html, body)[data-theme="dark"] .client-page .design-count,
[data-bs-theme="dark"] .projects-page .project-box h2,
[data-bs-theme="dark"] .projects-page .project-box p,
[data-bs-theme="dark"] .projects-page .web-items div,
[data-bs-theme="dark"] .projects-page .graphic-items div,
[data-bs-theme="dark"] .projects-page .brand-placeholder,
[data-bs-theme="dark"] .social-folder-header h2,
[data-bs-theme="dark"] .social-folder-header p,
[data-bs-theme="dark"] .client-page .client-folder h3,
[data-bs-theme="dark"] .client-page .client-folder p,
[data-bs-theme="dark"] .client-page .client-header h1,
[data-bs-theme="dark"] .client-page .client-header p,
[data-bs-theme="dark"] .client-page .design-count {
    color: #f4f7fb !important;
}

:is(html, body).dark-mode .projects-page .brand-placeholder,
:is(html, body).dark .projects-page .brand-placeholder,
:is(html, body)[data-theme="dark"] .projects-page .brand-placeholder,
[data-bs-theme="dark"] .projects-page .brand-placeholder {
    background: #1b2638 !important;
}

:is(html, body).dark-mode .projects-page .social-tags span,
:is(html, body).dark-mode .projects-page .folder-count,
:is(html, body).dark .projects-page .social-tags span,
:is(html, body).dark .projects-page .folder-count,
:is(html, body)[data-theme="dark"] .projects-page .social-tags span,
:is(html, body)[data-theme="dark"] .projects-page .folder-count,
[data-bs-theme="dark"] .projects-page .social-tags span,
[data-bs-theme="dark"] .projects-page .folder-count {
    background: #1b2638 !important;
    color: #f4f7fb !important;
    border-color: #35445a !important;
}

:is(html, body).dark-mode .projects-page .open-folder,
:is(html, body).dark-mode .projects-page .view-designs,
:is(html, body).dark-mode .client-page .back-projects,
:is(html, body).dark .projects-page .open-folder,
:is(html, body).dark .projects-page .view-designs,
:is(html, body).dark .client-page .back-projects,
:is(html, body)[data-theme="dark"] .projects-page .open-folder,
:is(html, body)[data-theme="dark"] .projects-page .view-designs,
:is(html, body)[data-theme="dark"] .client-page .back-projects,
[data-bs-theme="dark"] .projects-page .open-folder,
[data-bs-theme="dark"] .projects-page .view-designs,
[data-bs-theme="dark"] .client-page .back-projects {
    color: #ff8a3d !important;
}

/* Keep the actual design images' intended colors */
:is(html, body).dark-mode .social-post-preview,
:is(html, body).dark-mode .logo-preview,
:is(html, body).dark .social-post-preview,
:is(html, body).dark .logo-preview,
:is(html, body)[data-theme="dark"] .social-post-preview,
:is(html, body)[data-theme="dark"] .logo-preview,
[data-bs-theme="dark"] .social-post-preview,
[data-bs-theme="dark"] .logo-preview {
    background: #1b2638 !important;
    border-color: #35445a !important;
}

/* =========================================================
   EXTRA FIX: ALL H3 HEADINGS IN DARK MODE
   Ensures H3 text remains readable across project/client pages.
========================================================= */
html.dark-mode .projects-page h3,
body.dark-mode .projects-page h3,
html.dark .projects-page h3,
body.dark .projects-page h3,
html[data-theme="dark"] .projects-page h3,
body[data-theme="dark"] .projects-page h3,
[data-bs-theme="dark"] .projects-page h3,
html.dark-mode .client-page h3,
body.dark-mode .client-page h3,
html.dark .client-page h3,
body.dark .client-page h3,
html[data-theme="dark"] .client-page h3,
body[data-theme="dark"] .client-page h3,
[data-bs-theme="dark"] .client-page h3,
html.dark-mode .social-folders h3,
body.dark-mode .social-folders h3,
html.dark .social-folders h3,
body.dark .social-folders h3,
html[data-theme="dark"] .social-folders h3,
body[data-theme="dark"] .social-folders h3,
[data-bs-theme="dark"] .social-folders h3 {
    color: #f4f7fb !important;
}

/* =========================================================
   LAST OVERRIDE: ALL PROJECT / CLIENT TEXT + H3 FIX
   Keep this section at the very end of the stylesheet.
========================================================= */

/* Ensure every heading, including h3, is readable in dark mode. */
body.dark-mode .projects-page h1,
body.dark-mode .projects-page h2,
body.dark-mode .projects-page h3,
body.dark-mode .projects-page h4,
body.dark-mode .projects-page h5,
body.dark-mode .projects-page h6,
body.dark-mode .client-page h1,
body.dark-mode .client-page h2,
body.dark-mode .client-page h3,
body.dark-mode .client-page h4,
body.dark-mode .client-page h5,
body.dark-mode .client-page h6,
html.dark-mode .projects-page h1,
html.dark-mode .projects-page h2,
html.dark-mode .projects-page h3,
html.dark-mode .projects-page h4,
html.dark-mode .projects-page h5,
html.dark-mode .projects-page h6,
html.dark-mode .client-page h1,
html.dark-mode .client-page h2,
html.dark-mode .client-page h3,
html.dark-mode .client-page h4,
html.dark-mode .client-page h5,
html.dark-mode .client-page h6,
body.dark .projects-page h1,
body.dark .projects-page h2,
body.dark .projects-page h3,
body.dark .projects-page h4,
body.dark .projects-page h5,
body.dark .projects-page h6,
body.dark .client-page h1,
body.dark .client-page h2,
body.dark .client-page h3,
body.dark .client-page h4,
body.dark .client-page h5,
body.dark .client-page h6,
html[data-theme="dark"] .projects-page h1,
html[data-theme="dark"] .projects-page h2,
html[data-theme="dark"] .projects-page h3,
html[data-theme="dark"] .projects-page h4,
html[data-theme="dark"] .projects-page h5,
html[data-theme="dark"] .projects-page h6,
html[data-theme="dark"] .client-page h1,
html[data-theme="dark"] .client-page h2,
html[data-theme="dark"] .client-page h3,
html[data-theme="dark"] .client-page h4,
html[data-theme="dark"] .client-page h5,
html[data-theme="dark"] .client-page h6,
[data-bs-theme="dark"] .projects-page h1,
[data-bs-theme="dark"] .projects-page h2,
[data-bs-theme="dark"] .projects-page h3,
[data-bs-theme="dark"] .projects-page h4,
[data-bs-theme="dark"] .projects-page h5,
[data-bs-theme="dark"] .projects-page h6,
[data-bs-theme="dark"] .client-page h1,
[data-bs-theme="dark"] .client-page h2,
[data-bs-theme="dark"] .client-page h3,
[data-bs-theme="dark"] .client-page h4,
[data-bs-theme="dark"] .client-page h5,
[data-bs-theme="dark"] .client-page h6 {
    color: #f4f7fb !important;
}

/* Paragraphs and supporting text across the project/client sections. */
body.dark-mode .projects-page p,
body.dark-mode .client-page p,
html.dark-mode .projects-page p,
html.dark-mode .client-page p,
body.dark .projects-page p,
body.dark .client-page p,
html[data-theme="dark"] .projects-page p,
html[data-theme="dark"] .client-page p,
[data-bs-theme="dark"] .projects-page p,
[data-bs-theme="dark"] .client-page p {
    color: #bdc9d9 !important;
}

/* Text in service lists and category rows. */
body.dark-mode .projects-page .web-items *,
body.dark-mode .projects-page .graphic-items *,
html.dark-mode .projects-page .web-items *,
html.dark-mode .projects-page .graphic-items *,
body.dark .projects-page .web-items *,
body.dark .projects-page .graphic-items *,
html[data-theme="dark"] .projects-page .web-items *,
html[data-theme="dark"] .projects-page .graphic-items *,
[data-bs-theme="dark"] .projects-page .web-items *,
[data-bs-theme="dark"] .projects-page .graphic-items * {
    color: #f4f7fb !important;
    border-color: #35445a !important;
}

/* Cards, client headers, and folders. */
body.dark-mode .projects-page .project-box,
body.dark-mode .client-page .client-folder,
body.dark-mode .client-page .client-header,
html.dark-mode .projects-page .project-box,
html.dark-mode .client-page .client-folder,
html.dark-mode .client-page .client-header,
body.dark .projects-page .project-box,
body.dark .client-page .client-folder,
body.dark .client-page .client-header,
html[data-theme="dark"] .projects-page .project-box,
html[data-theme="dark"] .client-page .client-folder,
html[data-theme="dark"] .client-page .client-header,
[data-bs-theme="dark"] .projects-page .project-box,
[data-bs-theme="dark"] .client-page .client-folder,
[data-bs-theme="dark"] .client-page .client-header {
    background-color: #101827 !important;
    border-color: #35445a !important;
    color: #f4f7fb !important;
}

/* Muted count labels and tags. */
body.dark-mode .projects-page .folder-count,
body.dark-mode .projects-page .social-tags span,
html.dark-mode .projects-page .folder-count,
html.dark-mode .projects-page .social-tags span,
body.dark .projects-page .folder-count,
body.dark .projects-page .social-tags span,
html[data-theme="dark"] .projects-page .folder-count,
html[data-theme="dark"] .projects-page .social-tags span,
[data-bs-theme="dark"] .projects-page .folder-count,
[data-bs-theme="dark"] .projects-page .social-tags span {
    background-color: #1b2638 !important;
    border-color: #35445a !important;
    color: #f4f7fb !important;
}

/* Links remain orange so they stand out on dark cards. */
body.dark-mode .projects-page .open-folder,
body.dark-mode .projects-page .view-designs,
body.dark-mode .client-page .back-projects,
html.dark-mode .projects-page .open-folder,
html.dark-mode .projects-page .view-designs,
html.dark-mode .client-page .back-projects,
body.dark .projects-page .open-folder,
body.dark .projects-page .view-designs,
body.dark .client-page .back-projects,
html[data-theme="dark"] .projects-page .open-folder,
html[data-theme="dark"] .projects-page .view-designs,
html[data-theme="dark"] .client-page .back-projects,
[data-bs-theme="dark"] .projects-page .open-folder,
[data-bs-theme="dark"] .projects-page .view-designs,
[data-bs-theme="dark"] .client-page .back-projects {
    color: #ff8a3d !important;
}

/* =========================================================
   FINAL OVERRIDE: ALL PROJECT / UI-UX / WEB / GRAPHIC / CLIENT TEXT
   Supports a dark-mode class on either <html> or <body>,
   plus common data-theme attributes. Place at the end of CSS.
========================================================= */

/* Dark-mode card surfaces */
.dark-mode .project-box,
.dark-mode .client-folder,
.dark-mode .client-header,
.dark .project-box,
.dark .client-folder,
.dark .client-header,
[data-theme="dark"] .project-box,
[data-theme="dark"] .client-folder,
[data-theme="dark"] .client-header,
[data-bs-theme="dark"] .project-box,
[data-bs-theme="dark"] .client-folder,
[data-bs-theme="dark"] .client-header {
    background: #101827 !important;
    border-color: #35445a !important;
    color: #f4f7fb !important;
}

/* All headings in the listed sections, including h3 */
.dark-mode .projects-intro h1,
.dark-mode .project-box h1,
.dark-mode .project-box h2,
.dark-mode .project-box h3,
.dark-mode .project-box h4,
.dark-mode .project-box h5,
.dark-mode .project-box h6,
.dark-mode .social-folder-header h1,
.dark-mode .social-folder-header h2,
.dark-mode .social-folder-header h3,
.dark-mode .client-folder h1,
.dark-mode .client-folder h2,
.dark-mode .client-folder h3,
.dark-mode .client-folder h4,
.dark-mode .client-header h1,
.dark-mode .client-header h2,
.dark-mode .client-header h3,
.dark-mode .client-header h4,
.dark-mode .design-count,
.dark .project-box h1,
.dark .project-box h2,
.dark .project-box h3,
.dark .project-box h4,
.dark .project-box h5,
.dark .project-box h6,
.dark .client-folder h1,
.dark .client-folder h2,
.dark .client-folder h3,
.dark .client-folder h4,
[data-theme="dark"] .project-box h1,
[data-theme="dark"] .project-box h2,
[data-theme="dark"] .project-box h3,
[data-theme="dark"] .project-box h4,
[data-theme="dark"] .project-box h5,
[data-theme="dark"] .project-box h6,
[data-theme="dark"] .client-folder h1,
[data-theme="dark"] .client-folder h2,
[data-theme="dark"] .client-folder h3,
[data-theme="dark"] .client-folder h4,
[data-bs-theme="dark"] .project-box h1,
[data-bs-theme="dark"] .project-box h2,
[data-bs-theme="dark"] .project-box h3,
[data-bs-theme="dark"] .project-box h4,
[data-bs-theme="dark"] .project-box h5,
[data-bs-theme="dark"] .project-box h6,
[data-bs-theme="dark"] .client-folder h1,
[data-bs-theme="dark"] .client-folder h2,
[data-bs-theme="dark"] .client-folder h3,
[data-bs-theme="dark"] .client-folder h4 {
    color: #f4f7fb !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Descriptions and ordinary text */
.dark-mode .projects-intro p,
.dark-mode .project-box p,
.dark-mode .project-box small,
.dark-mode .project-box label,
.dark-mode .project-box li,
.dark-mode .project-box .web-items div,
.dark-mode .project-box .graphic-items div,
.dark-mode .client-folder p,
.dark-mode .client-folder small,
.dark-mode .client-folder label,
.dark-mode .client-header p,
.dark-mode .social-folder-header p,
.dark .projects-intro p,
.dark .project-box p,
.dark .client-folder p,
.dark .client-header p,
[data-theme="dark"] .projects-intro p,
[data-theme="dark"] .project-box p,
[data-theme="dark"] .project-box small,
[data-theme="dark"] .project-box label,
[data-theme="dark"] .project-box li,
[data-theme="dark"] .client-folder p,
[data-theme="dark"] .client-folder small,
[data-theme="dark"] .client-header p,
[data-theme="dark"] .social-folder-header p,
[data-bs-theme="dark"] .projects-intro p,
[data-bs-theme="dark"] .project-box p,
[data-bs-theme="dark"] .project-box small,
[data-bs-theme="dark"] .project-box label,
[data-bs-theme="dark"] .project-box li,
[data-bs-theme="dark"] .client-folder p,
[data-bs-theme="dark"] .client-folder small,
[data-bs-theme="dark"] .client-header p,
[data-bs-theme="dark"] .social-folder-header p {
    color: #bdc9d9 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* UI/UX placeholder and service lists */
.dark-mode .brand-placeholder,
.dark .brand-placeholder,
[data-theme="dark"] .brand-placeholder,
[data-bs-theme="dark"] .brand-placeholder {
    background: #1b2638 !important;
    color: #f4f7fb !important;
}

.dark-mode .web-items div,
.dark-mode .graphic-items div,
.dark .web-items div,
.dark .graphic-items div,
[data-theme="dark"] .web-items div,
[data-theme="dark"] .graphic-items div,
[data-bs-theme="dark"] .web-items div,
[data-bs-theme="dark"] .graphic-items div {
    color: #f4f7fb !important;
    border-color: #35445a !important;
}

/* Counts, tags and folder links */
.dark-mode .folder-count,
.dark .folder-count,
[data-theme="dark"] .folder-count,
[data-bs-theme="dark"] .folder-count {
    background: #1b2638 !important;
    color: #bdc9d9 !important;
}

.dark-mode .social-tags span,
.dark .social-tags span,
[data-theme="dark"] .social-tags span,
[data-bs-theme="dark"] .social-tags span {
    background: #1b2638 !important;
    border-color: #35445a !important;
    color: #f4f7fb !important;
}

.dark-mode .open-folder,
.dark-mode .view-designs,
.dark-mode .back-projects,
.dark .open-folder,
.dark .view-designs,
.dark .back-projects,
[data-theme="dark"] .open-folder,
[data-theme="dark"] .view-designs,
[data-theme="dark"] .back-projects,
[data-bs-theme="dark"] .open-folder,
[data-bs-theme="dark"] .view-designs,
[data-bs-theme="dark"] .back-projects {
    color: #ff8a3d !important;
}