/* ================================================================
   ONESKY INNOVATIONS — PROJECTS & CLIENTS
   Exact stylesheet for projects.html
   ================================================================ */

.projects-page {
    --pj-blue: #0070E0;
    --pj-cyan: #00C2FF;
    --pj-dark: #081226;
    --pj-text: #0F172A;
    --pj-muted: #64748B;
    --pj-border: #E2E8F0;
    --pj-bg: #F8FAFC;
    --pj-shadow: 0 18px 45px rgba(15, 23, 42, .08);
    --pj-transition: all .35s cubic-bezier(.16, 1, .3, 1);
}

/* HERO */
.projects-hero {
    position: relative;
    overflow: hidden;
    padding: 105px 0 72px;
    background: radial-gradient(circle at 12% 20%, rgba(0, 112, 224, .08), transparent 30%), radial-gradient(circle at 90% 15%, rgba(0, 194, 255, .08), transparent 30%), linear-gradient(180deg, #fff, #f8fbff)
}

.projects-hero:after {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    right: -330px;
    top: -280px;
    border: 1px solid rgba(0, 112, 224, .08);
    border-radius: 50%;
    animation: projectOrb 10s ease-in-out infinite
}

@keyframes projectOrb {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }
}

.projects-hero-content {
    position: relative;
    z-index: 2;
    max-width: 920px
}

.projects-eyebrow {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--pj-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase
}

.projects-hero h1 {
    max-width: 900px;
    margin: 0 0 22px;
    color: var(--pj-dark);
    font-size: clamp(42px, 5.5vw, 72px);
    line-height: 1.03;
    letter-spacing: -.055em;
    font-weight: 800
}

.projects-hero h1 span {
    background: linear-gradient(120deg, #0066D6, #008FEA, #00C2FF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent
}

.projects-hero-content>p {
    max-width: 770px;
    color: var(--pj-muted);
    font-size: 17px;
    line-height: 1.75;
    margin: 0 0 30px
}

.projects-hero-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap
}

.projects-text-link {
    color: var(--pj-dark);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: var(--pj-transition)
}

.projects-text-link:hover {
    color: var(--pj-blue);
    transform: translateX(3px)
}

/* PROJECTS */
.projects-section {
    padding: 90px 0;
    background: #fff
}

.projects-heading {
    max-width: 1000px !important;
    margin: 0 auto 36px !important;
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 50px;
    align-items: end
}

.projects-heading>div {
    min-width: 0
}

.section-kicker {
    display: block;
    margin-bottom: 12px;
    color: var(--pj-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase
}

.projects-heading h2,
.client-directory-heading h2,
.testimonials-heading h2 {
    margin: 0;
    color: var(--pj-dark);
    font-size: clamp(31px, 4vw, 48px);
    line-height: 1.08;
    letter-spacing: -.04em;
    font-weight: 800
}

.projects-heading p,
.client-directory-heading p {
    margin: 0;
    color: var(--pj-muted);
    font-size: 15px;
    line-height: 1.7
}

.project-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px
}

.filter-btn {
    appearance: none;
    border: 1px solid var(--pj-border);
    background: #fff;
    color: #64748B;
    border-radius: 8px;
    padding: 9px 13px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--pj-transition)
}

.filter-btn:hover {
    color: var(--pj-blue);
    border-color: rgba(0, 112, 224, .3);
    transform: translateY(-2px)
}

.filter-btn.active {
    color: #fff;
    border-color: var(--pj-blue);
    background: linear-gradient(120deg, #006DD8, #00A8EF);
    box-shadow: 0 7px 18px rgba(0, 112, 224, .16)
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.project-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--pj-border);
    border-radius: 17px;
    background: #fff;
    transition: var(--pj-transition);
    display: flex;
    flex-direction: column;
    min-width: 0
}

.project-card:hover {
    transform: translateY(-7px);
    border-color: rgba(0, 112, 224, .27);
    box-shadow: var(--pj-shadow)
}

.project-card.is-hidden {
    display: none
}

.project-visual {
    position: relative;
    height: 215px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f9fc
}

.project-visual:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, .35));
    pointer-events: none
}

.project-content {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.project-type {
    color: var(--pj-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 8px
}

.project-content h3 {
    margin: 0 0 10px;
    color: var(--pj-dark);
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -.025em
}

.project-content p {
    margin: 0;
    color: var(--pj-muted);
    font-size: 13px;
    line-height: 1.7
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 18px
}

.project-tags span {
    padding: 5px 8px;
    border: 1px solid #E7EDF3;
    border-radius: 999px;
    background: #F8FAFC;
    color: #64748B;
    font-size: 9px;
    font-weight: 700
}

/* INVOICELL VISUAL */
.project-invoicell {
    background: radial-gradient(circle at 50% 45%, rgba(0, 194, 255, .13), transparent 60%), #F5FAFF
}

.visual-window {
    width: 78%;
    max-width: 300px;
    border: 1px solid #D8E4ED;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 34px rgba(15, 60, 100, .13);
    transform: perspective(800px) rotateX(3deg) rotateY(-4deg);
    transition: var(--pj-transition)
}

.project-card:hover .visual-window {
    transform: perspective(800px) rotateX(0) rotateY(0) translateY(-5px) scale(1.03)
}

.visual-topbar {
    height: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    background: #F1F5F9;
    border-bottom: 1px solid #E5EBF0
}

.visual-topbar span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #CBD5E1
}

.invoice-layout {
    display: flex;
    min-height: 145px
}

.invoice-sidebar {
    width: 38px;
    padding: 14px 7px;
    background: #0A162B
}

.invoice-logo {
    font-size: 5px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 14px
}

.invoice-sidebar i {
    display: block;
    height: 4px;
    margin-bottom: 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .28)
}

.invoice-main {
    flex: 1;
    padding: 12px
}

.invoice-title strong,
.invoice-title small {
    display: block
}

.invoice-title strong {
    font-size: 10px;
    color: #172033
}

.invoice-title small {
    font-size: 6px;
    color: #94A3B8;
    margin-top: 3px
}

.invoice-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin: 12px 0
}

.invoice-stats div {
    height: 28px;
    border-radius: 4px;
    background: #EDF5FA
}

.invoice-table {
    display: grid;
    gap: 5px
}

.invoice-table span {
    height: 5px;
    border-radius: 4px;
    background: #E5EBF1
}

.invoice-table span:nth-child(2) {
    width: 82%
}

.invoice-table span:nth-child(3) {
    width: 70%
}

.invoice-table span:nth-child(4) {
    width: 90%
}

/* OIL */
.project-oil {
    background: linear-gradient(145deg, #FFF8EC, #FFFDF9)
}

.pouch {
    position: absolute;
    width: 105px;
    height: 145px;
    border-radius: 5px 5px 10px 10px;
    background: linear-gradient(135deg, #D69A22, #F1BF4B);
    box-shadow: 0 18px 30px rgba(130, 80, 10, .16);
    transition: var(--pj-transition)
}

.pouch-back {
    transform: translateX(35px) rotate(7deg);
    opacity: .65
}

.pouch-front {
    transform: rotate(-4deg);
    z-index: 2;
    padding: 17px 11px;
    text-align: center;
    color: #fff
}

.project-card:hover .pouch-front {
    transform: rotate(0) translateY(-6px) scale(1.03)
}

.pouch-front:before {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    height: 1px;
    background: rgba(255, 255, 255, .6)
}

.pouch-brand {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .1em
}

.pouch-name {
    margin-top: 28px;
    font-size: 22px;
    line-height: 1.05;
    font-weight: 800
}

.pouch-size {
    margin-top: 13px;
    font-size: 8px;
    letter-spacing: .1em
}

/* HISTORY */
.project-history {
    background: linear-gradient(145deg, #FFF7F5, #FFFDFB)
}

.history-pack {
    width: 105px;
    height: 145px;
    border-radius: 7px;
    padding: 14px;
    color: #fff;
    background: linear-gradient(145deg, #8C1F2D, #C54A2A);
    box-shadow: 0 18px 30px rgba(90, 20, 10, .14);
    transform: rotate(-4deg);
    transition: var(--pj-transition)
}

.project-card:hover .history-pack {
    transform: rotate(0) translateY(-6px)
}

.history-mark {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800
}

.history-name {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em
}

.history-name span {
    font-size: 7px
}

.history-line {
    height: 1px;
    margin: 14px 0;
    background: rgba(255, 255, 255, .45)
}

.history-product {
    font-size: 8px;
    letter-spacing: .15em
}

/* ROSHAN */
.project-roshan {
    background: linear-gradient(145deg, #F7FAF5, #FFFFFF)
}

.fruit-orb {
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 15px 28px rgba(30, 80, 30, .12)
}

.fruit-one {
    width: 75px;
    height: 75px;
    left: 23%;
    top: 27%;
    background: radial-gradient(circle at 35% 30%, #FFB84A, #F0782D)
}

.fruit-two {
    width: 68px;
    height: 68px;
    right: 24%;
    top: 20%;
    background: radial-gradient(circle at 35% 30%, #E9FF72, #72B83D)
}

.fruit-three {
    width: 58px;
    height: 58px;
    right: 29%;
    bottom: 16%;
    background: radial-gradient(circle at 35% 30%, #FF7777, #D9344E)
}

.roshan-card {
    position: relative;
    z-index: 2;
    padding: 13px 18px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 10px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 15px 28px rgba(20, 50, 30, .1);
    text-align: center
}

.roshan-card strong {
    display: block;
    color: #172B22;
    font-size: 16px;
    letter-spacing: .1em
}

.roshan-card small {
    display: block;
    margin-top: 4px;
    color: #708174;
    font-size: 7px;
    letter-spacing: .14em
}

/* KMG */
.project-kmg {
    background: radial-gradient(circle at 50% 50%, rgba(67, 100, 247, .11), transparent 62%), #F7F9FF
}

.phone-frame {
    position: relative;
    width: 92px;
    height: 174px;
    padding: 5px;
    border: 3px solid #1B2940;
    border-radius: 18px;
    background: #1B2940;
    box-shadow: 0 20px 35px rgba(20, 35, 70, .2);
    transform: rotate(-4deg);
    transition: var(--pj-transition)
}

.project-card:hover .phone-frame {
    transform: rotate(0) translateY(-7px)
}

.phone-frame:before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 5px;
    left: 50%;
    width: 34px;
    height: 7px;
    transform: translateX(-50%);
    border-radius: 0 0 7px 7px;
    background: #1B2940
}

.phone-screen {
    height: 100%;
    overflow: hidden;
    border-radius: 11px;
    background: #fff;
    padding: 25px 10px 10px
}

.kmg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    color: #24324A;
    font-size: 7px
}

.kmg-header span {
    color: #94A3B8
}

.kmg-profile {
    display: flex;
    gap: 7px;
    align-items: center
}

.kmg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4364F7, #6BCBFF)
}

.kmg-profile strong,
.kmg-profile small {
    display: block
}

.kmg-profile strong {
    font-size: 7px;
    color: #24324A
}

.kmg-profile small {
    font-size: 5px;
    color: #94A3B8;
    margin-top: 2px
}

.kmg-row {
    height: 6px;
    margin-top: 12px;
    border-radius: 5px;
    background: #E7ECF3
}

.kmg-row:nth-of-type(3) {
    width: 78%
}

.kmg-row:nth-of-type(4) {
    width: 62%
}

/* CLOSTRE */
.project-clostre {
    background: radial-gradient(circle at center, rgba(0, 112, 224, .09), transparent 65%), #F7FAFD
}

.browser-window {
    width: 78%;
    max-width: 285px;
    overflow: hidden;
    border: 1px solid #DCE5ED;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 17px 30px rgba(15, 50, 80, .12);
    transition: var(--pj-transition)
}

.project-card:hover .browser-window {
    transform: translateY(-6px) scale(1.025)
}

.browser-bar {
    height: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 8px;
    background: #F2F5F8;
    border-bottom: 1px solid #E3E9EF
}

.browser-bar span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #CBD5E1
}

.clostre-page {
    height: 145px;
    padding: 18px;
    background: linear-gradient(135deg, #0A1A33, #1D4368)
}

.clostre-brand {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em
}

.clostre-hero-line {
    width: 65%;
    height: 7px;
    margin-top: 23px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .55)
}

.clostre-blocks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 22px
}

.clostre-blocks i {
    height: 35px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .16)
}

/* KINGS */
.project-kings {
    background: linear-gradient(145deg, #F5FAF8, #FBFDFC)
}

.kings-card {
    width: 145px;
    padding: 22px 18px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, #155E4A, #278B6D);
    box-shadow: 0 18px 32px rgba(20, 90, 70, .17);
    transform: rotate(-3deg);
    transition: var(--pj-transition)
}

.project-card:hover .kings-card {
    transform: rotate(0) translateY(-7px)
}

.kings-card span {
    display: block;
    font-size: 8px;
    letter-spacing: .15em
}

.kings-card strong {
    display: block;
    margin-top: 3px;
    font-size: 21px;
    line-height: 1.05;
    letter-spacing: .04em
}

.kings-card small {
    display: block;
    margin-top: 18px;
    font-size: 6px;
    letter-spacing: .12em
}

/* FABRIC */
.project-fabric {
    background: linear-gradient(145deg, #F6F7FA, #FCFCFD)
}

.fabric-card {
    width: 150px;
    height: 145px;
    padding: 22px;
    border: 1px solid #DCE4EC;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 30px rgba(20, 35, 60, .09);
    transform: rotate(-3deg);
    transition: var(--pj-transition);
    overflow: hidden
}

.project-card:hover .fabric-card {
    transform: rotate(0) translateY(-6px)
}

.fabric-pattern {
    height: 62px;
    margin: -22px -22px 18px;
    background: repeating-linear-gradient(45deg, #D9E6F0 0 7px, #F6FAFC 7px 14px)
}

.fabric-card strong,
.fabric-card span {
    display: block
}

.fabric-card strong {
    color: #18283F;
    font-size: 15px;
    letter-spacing: .12em
}

.fabric-card span {
    color: #62748C;
    font-size: 10px;
    letter-spacing: .2em;
    margin-top: 4px
}

/* GOOGLE */
.project-google {
    background: radial-gradient(circle at center, rgba(66, 133, 244, .08), transparent 65%), #F8FAFD
}

.google-card {
    width: 190px;
    padding: 20px;
    border: 1px solid #DCE5ED;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 30px rgba(15, 50, 80, .1);
    text-align: center
}

.google-icon {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #4285F4, #34A853, #FBBC05, #EA4335);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.google-card strong {
    display: block;
    margin-top: 10px;
    color: #1E293B;
    font-size: 12px
}

.google-rating {
    margin-top: 7px;
    font-size: 10px;
    letter-spacing: 2px;
    color: #F5B301
}

.google-card small {
    display: block;
    margin-top: 8px;
    color: #94A3B8;
    font-size: 7px
}

/* CLIENT DIRECTORY */
.client-directory-section {
    position: relative;
    padding: 90px 0;
    background: radial-gradient(circle at 10% 20%, rgba(0, 112, 224, .045), transparent 30%), linear-gradient(180deg, #F8FAFC 0%, #fff 100%);
    border-top: 1px solid var(--pj-border);
    overflow: hidden
}

.client-directory-section:before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -250px;
    top: 100px;
    border: 1px solid rgba(0, 112, 224, .06);
    border-radius: 50%;
    pointer-events: none
}

.client-directory-heading {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 50px;
    align-items: end;
    max-width: 1000px !important;
    margin: 0 auto 38px !important
}

.client-directory-heading .section-kicker {
    margin-bottom: 12px
}

.client-directory-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px
}

.client-directory-grid>* {
    min-width: 0
}

.client-directory-grid .client-card,
.client-directory-grid .client-logo-card,
.client-directory-grid .client-item {
    position: relative;
    min-height: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border: 1px solid var(--pj-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .88);
    transition: var(--pj-transition)
}

.client-directory-grid .client-card:hover,
.client-directory-grid .client-logo-card:hover,
.client-directory-grid .client-item:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 112, 224, .25);
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .07)
}

.client-directory-grid img {
    display: block;
    max-width: 100%;
    max-height: 58px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .3s ease, opacity .3s ease
}

.client-directory-grid>*:hover img {
    transform: scale(1.04)
}

.directory-note {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 13px;
    max-width: 700px;
    margin: 25px auto 0;
    padding: 14px 18px;
    border: 1px solid rgba(0, 112, 224, .1);
    border-radius: 10px;
    background: rgba(255, 255, 255, .7)
}

.directory-note>span {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 112, 224, .08);
    color: var(--pj-blue);
    font-size: 18px
}

.directory-note p {
    margin: 0;
    color: var(--pj-muted);
    font-size: 12px;
    line-height: 1.6
}

/* TESTIMONIALS */
.testimonials-section {
    padding: 90px 0;
    background: #fff
}

.testimonials-heading {
    margin: 0 0 36px !important
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px
}

.testimonial-card {
    position: relative;
    padding: 30px;
    border: 1px solid var(--pj-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .04)
}

.quote-mark {
    color: var(--pj-blue);
    font-size: 42px;
    line-height: .7;
    font-weight: 800;
    margin-bottom: 20px
}

.testimonial-card p {
    margin: 0;
    color: var(--pj-muted);
    font-size: 14px;
    line-height: 1.8
}

.testimonial-person {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 24px
}

.testimonial-avatar {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #EAF4FF;
    color: var(--pj-blue);
    font-size: 11px;
    font-weight: 800
}

.testimonial-person strong,
.testimonial-person span {
    display: block
}

.testimonial-person strong {
    color: var(--pj-dark);
    font-size: 12px
}

.testimonial-person span {
    margin-top: 3px;
    color: #94A3B8;
    font-size: 10px
}

/* CTA */
.projects-cta {
    padding: 0 0 90px;
    background: #fff
}

.projects-cta-box {
    position: relative;
    overflow: hidden;
    padding: 55px 60px;
    border-radius: 20px;
    background: linear-gradient(120deg, #081226, #0B2444);
    color: #fff
}

.projects-cta-box:after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    right: -150px;
    top: -180px;
    border: 1px solid rgba(0, 194, 255, .18);
    border-radius: 50%
}

.projects-cta-box h2 {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 0 12px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.1;
    letter-spacing: -.04em
}

.projects-cta-box p {
    position: relative;
    z-index: 1;
    max-width: 650px;
    margin: 0 0 24px;
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    line-height: 1.7
}

.projects-cta-box .btn {
    position: relative;
    z-index: 2
}

/* RESPONSIVE */
@media(max-width:1000px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .client-directory-grid {
        grid-template-columns: repeat(4, 1fr)
    }

    .projects-heading,
    .client-directory-heading {
        grid-template-columns: 1fr;
        gap: 15px;
        align-items: start
    }
}

@media(max-width:760px) {
    .projects-hero {
        padding: 85px 0 60px
    }

    .projects-section,
    .client-directory-section,
    .testimonials-section {
        padding: 70px 0
    }

    .projects-grid,
    .testimonials-grid {
        grid-template-columns: 1fr
    }

    .client-directory-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px
    }

    .client-directory-grid .client-card,
    .client-directory-grid .client-logo-card,
    .client-directory-grid .client-item {
        min-height: 90px;
        padding: 13px
    }

    .projects-cta-box {
        padding: 42px 28px
    }
}

@media(max-width:520px) {
    .projects-hero h1 {
        font-size: 42px
    }

    .project-visual {
        height: 200px
    }

    .client-directory-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .projects-hero-actions {
        gap: 14px
    }

    .project-content {
        padding: 20px
    }

    .directory-note {
        align-items: flex-start
    }

    .projects-cta-box {
        padding: 35px 22px
    }
}

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

    .projects-hero:after,
    .visual-label,
    .project-card * {
        animation: none !important;
        transition: none !important
    }
}

/* ================================================================
   CLIENT DIRECTORY — GENERATED CARD FIX
   script.js generates .client-directory-card elements.
   ================================================================ */

.projects-page .client-directory-grid .client-directory-card {
    position: relative;
    min-width: 0;
    min-height: 155px;
    padding: 22px 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 7px;
    box-sizing: border-box;
    border: 1px solid var(--pj-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 6px 20px rgba(15, 23, 42, .035);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1),
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.projects-page .client-directory-grid .client-directory-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 112, 224, .24);
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .09);
}

.projects-page .client-card-logo-wrap {
    width: 100%;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.projects-page .client-card-logo-wrap img {
    display: block;
    width: auto;
    height: auto;
    max-width: 125px;
    max-height: 54px;
    object-fit: contain;
}

.projects-page .client-card-initials {
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #EFF6FF;
    border: 1px solid #D9EAFE;
    color: var(--pj-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
}

.projects-page .client-directory-card>strong {
    display: block;
    width: 100%;
    margin: 0;
    color: var(--pj-dark);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.projects-page .client-directory-card>span {
    display: block;
    width: 100%;
    margin: 0;
    color: var(--pj-muted);
    font-size: 10px;
    line-height: 1.45;
    font-weight: 500;
    overflow-wrap: anywhere;
}

@media (max-width: 1000px) {
    .projects-page .client-directory-grid .client-directory-card {
        min-height: 150px;
    }
}

@media (max-width: 760px) {
    .projects-page .client-directory-grid .client-directory-card {
        min-height: 135px;
        padding: 17px 12px 15px;
    }

    .projects-page .client-card-logo-wrap {
        height: 50px;
    }

    .projects-page .client-card-logo-wrap img {
        max-width: 105px;
        max-height: 46px;
    }
}

@media (max-width: 520px) {
    .projects-page .client-directory-grid .client-directory-card {
        min-height: 132px;
        padding: 15px 10px 13px;
        border-radius: 12px;
    }

    .projects-page .client-directory-card>strong {
        font-size: 12px;
    }

    .projects-page .client-directory-card>span {
        font-size: 9px;
    }
}