@media (max-width: 1180px) {
    .main-menu a { padding: 9px 8px; font-size: 13px; }
    .brand { min-width: auto; }
    .brand-image-link { min-width: 430px; max-width: 485px; }
    .brand-full-logo { max-width: 485px; max-height: 82px; }
}

@media (max-width: 920px) {
    .top-bar-inner {
        justify-content: center;
        text-align: center;
    }
    .top-contact {
        display: none;
    }
    .menu-toggle {
        display: inline-flex;
        flex: 0 0 42px;
    }
    .nav-inner {
        min-height: 92px;
    }
    .brand {
        min-width: auto;
        gap: 10px;
    }
    .brand-image-link {
        min-width: 0;
        max-width: min(78vw, 430px);
        flex: 1 1 auto;
    }
    .brand-full-logo {
        max-width: min(78vw, 430px);
        max-height: 76px;
    }
    .main-menu {
        position: absolute;
        top: 100%;
        left: 16px;
        right: 16px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        background: var(--white-color);
        border: 1px solid var(--border-color);
        border-radius: 22px;
        padding: 12px;
        box-shadow: var(--shadow-soft);
    }
    .main-menu.is-open {
        display: flex;
    }
    .main-menu a {
        border-radius: 14px;
        padding: 12px 14px;
        font-size: 14px;
    }
    .intro-grid,
    .action-grid {
        grid-template-columns: 1fr;
    }
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-track {
        height: 440px;
        min-height: 440px;
    }
    .hero-content {
        text-align: left;
        padding-right: 56px;
    }
    .hero-shape-one {
        width: 260px;
        height: 260px;
        right: -40px;
    }
    .hero-shape-two {
        width: 180px;
        height: 180px;
        right: 18%;
        bottom: 8%;
    }
}

@media (max-width: 600px) {
    .container {
        width: min(100% - 22px, 1180px);
    }
    .top-bar-inner {
        min-height: 44px;
    }
    .top-actions {
        width: 100%;
        gap: 7px;
        justify-content: center;
    }
    .top-actions a {
        font-size: 11px;
        padding: 0 9px;
        min-height: 28px;
    }
    .nav-inner {
        min-height: 86px;
        gap: 8px;
    }
    .brand {
        min-width: auto;
        gap: 8px;
    }
    .brand-image-link {
        max-width: calc(100vw - 72px);
    }
    .brand-full-logo {
        max-width: calc(100vw - 72px);
        max-height: 72px;
    }
    .hero-track {
        height: 390px;
        min-height: 390px;
    }
    .hero-content {
        padding: 38px 10px 56px;
        text-align: center;
    }
    .hero-content h1 {
        font-size: clamp(31px, 10vw, 46px);
    }
    .hero-content p {
        font-size: 15px;
        margin-left: auto;
        margin-right: auto;
    }
    .hero-buttons {
        justify-content: center;
    }
    .hero-shape-one {
        width: 190px;
        height: 190px;
        right: -70px;
        top: 32px;
    }
    .hero-shape-two {
        width: 130px;
        height: 130px;
        left: -46px;
        right: auto;
        bottom: 26px;
    }
    .hero-dots {
        bottom: 12px;
    }
    .hero-control {
        width: 34px;
        height: 34px;
        font-size: 24px;
    }
    .hero-control.prev {
        left: 10px;
    }
    .hero-control.next {
        right: 10px;
    }
    .section-space {
        padding: 52px 0;
    }
    .cards-grid {
        grid-template-columns: 1fr;
    }
    .intro-card,
    .info-card,
    .action-card,
    .login-card {
        border-radius: 20px;
        padding: 22px;
    }
    .auth-logo {
        width: 104px;
        max-width: 44%;
    }
    .two-col-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    .top-actions a {
        font-size: 10px;
        padding: 0 7px;
    }
    .brand-image-link {
        max-width: calc(100vw - 72px);
    }
    .brand-full-logo {
        max-width: calc(100vw - 72px);
        max-height: 64px;
    }
}

@media (max-width: 920px) {
    .service-flow-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .honorary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .service-flow-grid {
        grid-template-columns: 1fr;
    }
    .flow-card,
    .honorary-panel,
    .verification-panel {
        border-radius: 22px;
        padding: 22px;
    }
}

@media (max-width: 920px) {
    html {
        scroll-padding-top: 110px;
    }

    main > section,
    .home-intro,
    .program-preview,
    .wcu-service-flow,
    .wcu-honorary-section,
    .action-section,
    .wcu-about-exact,
    .course-highlight-section {
        scroll-margin-top: 112px;
    }
}

@media (max-width: 600px) {
    html {
        scroll-padding-top: 102px;
    }

    main > section,
    .home-intro,
    .program-preview,
    .wcu-service-flow,
    .wcu-honorary-section,
    .action-section,
    .wcu-about-exact,
    .course-highlight-section {
        scroll-margin-top: 104px;
    }

    .wcu-service-flow.section-space,
    .wcu-honorary-section.section-space,
    .action-section.section-space {
        padding-top: 62px;
    }
}

/* =========================================================
   Exact Matrix model inspired About section final sizing
   Uses: assets/frontend/images/home/about-main.png
   ========================================================= */
.wcu-about-exact {
    background: #ffffff !important;
    overflow: hidden !important;
    padding: 82px 0 108px !important;
}

.wcu-about-exact .container {
    width: min(1180px, calc(100% - 32px)) !important;
}

.wcu-about-exact-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 690px) 430px !important;
    gap: 60px !important;
    align-items: center !important;
}

.wcu-about-exact-content {
    max-width: 760px !important;
}

.wcu-about-exact-content h1 {
    margin: 0 !important;
    max-width: 720px !important;
    color: #083579 !important;
    font-size: clamp(34px, 2.15vw, 38px) !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
}

.wcu-about-underline {
    display: block !important;
    width: 218px !important;
    height: 20px !important;
    margin: 9px 0 18px 190px !important;
    position: relative !important;
    transform: none !important;
}

.wcu-about-underline::before,
.wcu-about-underline::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    border-radius: 999px !important;
    background: #1c8a3c !important;
    transform: rotate(-3deg) scaleX(0) !important;
    transform-origin: left center !important;
    will-change: transform, opacity !important;
}

.wcu-about-underline::before {
    top: 7px !important;
    width: 180px !important;
    height: 3px !important;
    animation: wcuAboutUnderlineDrawOne 4.2s cubic-bezier(.55, 0, .15, 1) infinite !important;
}

.wcu-about-underline::after {
    top: 12px !important;
    left: 18px !important;
    width: 150px !important;
    height: 3px !important;
    opacity: .82 !important;
    animation: wcuAboutUnderlineDrawTwo 4.2s cubic-bezier(.55, 0, .15, 1) infinite .14s !important;
}

@keyframes wcuAboutUnderlineDrawOne {
    0% {
        transform: rotate(-3deg) scaleX(0);
        opacity: 0;
    }
    7% {
        opacity: 1;
    }
    42% {
        transform: rotate(-3deg) scaleX(1);
        opacity: 1;
    }
    88% {
        transform: rotate(-3deg) scaleX(1);
        opacity: 1;
    }
    96%, 100% {
        transform: rotate(-3deg) scaleX(0);
        opacity: 0;
    }
}

@keyframes wcuAboutUnderlineDrawTwo {
    0% {
        transform: rotate(-3deg) scaleX(0);
        opacity: 0;
    }
    9% {
        opacity: .82;
    }
    46% {
        transform: rotate(-3deg) scaleX(1);
        opacity: .82;
    }
    88% {
        transform: rotate(-3deg) scaleX(1);
        opacity: .82;
    }
    96%, 100% {
        transform: rotate(-3deg) scaleX(0);
        opacity: 0;
    }
}

.wcu-about-exact-content p {
    max-width: 760px !important;
    margin: 0 0 16px !important;
    color: #667085 !important;
    font-size: 15.5px !important;
    line-height: 1.72 !important;
    text-align: justify !important;
}

.wcu-about-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 14px !important;
    min-height: 56px !important;
    padding: 0 25px !important;
    border-radius: 6px !important;
    background: #21873a !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    box-shadow: 0 16px 30px rgba(33, 135, 58, .18) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}

.wcu-about-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 20px 38px rgba(33, 135, 58, .25) !important;
}

.wcu-about-exact-visual {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-height: 430px !important;
}

.wcu-about-main-image {
    display: block !important;
    width: 430px !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    filter: none !important;
}

/* Programme image card style */
.programmes-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
}

.programme-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 322px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--white-color) !important;
    border: 1px solid rgba(231,237,245,.95) !important;
    border-radius: 28px !important;
    box-shadow: 0 18px 44px rgba(16,32,51,.08) !important;
    color: var(--dark-color) !important;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}

.programme-card::after {
    content: '' !important;
    position: absolute !important;
    left: 26px !important;
    right: 26px !important;
    bottom: -18px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(0,168,107,.26) !important;
    filter: blur(16px) !important;
    opacity: 0 !important;
    transition: opacity .28s ease, bottom .28s ease !important;
}

.programme-card:hover {
    transform: translateY(-10px) scale(1.018) !important;
    border-color: rgba(0,168,107,.28) !important;
    box-shadow: 0 28px 68px rgba(16,32,51,.16) !important;
}

.programme-card:hover::after {
    opacity: 1 !important;
    bottom: -8px !important;
}

.programme-visual {
    height: 220px !important;
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
}

.programme-visual::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(circle at 78% 18%, rgba(255,255,255,.32), transparent 24%),
        radial-gradient(circle at 22% 78%, rgba(255,255,255,.18), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.06), transparent) !important;
}

.programme-visual::after {
    content: '' !important;
    position: absolute !important;
    width: 112px !important;
    height: 112px !important;
    right: 26px !important;
    bottom: 24px !important;
    border-radius: 30px !important;
    border: 2px solid rgba(255,255,255,.42) !important;
    transform: rotate(12deg) !important;
}

.programme-card h3 {
    min-height: 84px !important;
    margin: 0 !important;
    padding: 22px 20px 24px !important;
    display: grid !important;
    place-items: center !important;
    color: var(--primary-color) !important;
    font-size: 21px !important;
    line-height: 1.22 !important;
    text-align: center !important;
}

.programme-engineering { background: linear-gradient(135deg, #0B4F9F, #0aa3b8) !important; }
.programme-science { background: linear-gradient(135deg, #006b80, #00A86B) !important; }
.programme-arts { background: linear-gradient(135deg, #203a80, #28b487) !important; }
.programme-commerce { background: linear-gradient(135deg, #063d82, #18b980) !important; }
.programme-computer { background: linear-gradient(135deg, #082f63, #0b8f87) !important; }
.programme-library { background: linear-gradient(135deg, #134e75, #00A86B) !important; }
.programme-law { background: linear-gradient(135deg, #102033, #0B4F9F) !important; }
.programme-education { background: linear-gradient(135deg, #0B4F9F, #31b77e) !important; }
.programme-management { background: linear-gradient(135deg, #0a5b9a, #028d91) !important; }
.programme-health { background: linear-gradient(135deg, #08737f, #16b77f) !important; }
.programme-vocational { background: linear-gradient(135deg, #064a8d, #08a977) !important; }
.programme-social { background: linear-gradient(135deg, #08335f, #00A86B) !important; }

@media (max-width: 1260px) {
    .wcu-about-exact-grid {
        grid-template-columns: minmax(0, 1fr) 410px !important;
        gap: 40px !important;
    }

    .wcu-about-main-image {
        width: 410px !important;
    }
}

@media (max-width: 1100px) {
    .wcu-about-exact-grid {
        grid-template-columns: minmax(0, 1fr) 380px !important;
        gap: 34px !important;
    }

    .wcu-about-main-image {
        width: 380px !important;
    }

    .programmes-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 22px !important;
    }
}

@media (max-width: 920px) {
    .wcu-about-exact-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .wcu-about-exact-content h1 {
        max-width: 100% !important;
    }

    .wcu-about-exact-visual {
        min-height: auto !important;
        justify-content: flex-start !important;
    }

    .wcu-about-main-image {
        width: min(100%, 430px) !important;
    }

    .programmes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .programme-card {
        min-height: 300px !important;
    }

    .programme-visual {
        height: 200px !important;
    }
}

@media (max-width: 600px) {
    .wcu-about-exact {
        padding: 54px 0 64px !important;
    }

    .wcu-about-exact-grid {
        gap: 24px !important;
    }

    .wcu-about-exact-content h1 {
        font-size: clamp(30px, 8vw, 40px) !important;
    }

    .wcu-about-underline {
        margin: 9px 0 18px 0 !important;
        transform: none !important;
    }

    .wcu-about-exact-content p {
        text-align: justify !important;
        text-align-last: left !important;
        font-size: 15px !important;
        hyphens: auto !important;
    }

    .wcu-about-exact-content .button-row {
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    .wcu-about-btn {
        width: auto !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        text-align: center !important;
        white-space: normal !important;
        align-self: flex-start !important;
    }

    .wcu-about-main-image {
        width: min(100%, 430px) !important;
    }

    .programmes-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .programme-card {
        min-height: auto !important;
        border-radius: 22px !important;
    }

    .programme-visual {
        height: 210px !important;
    }

    .programme-card h3 {
        min-height: auto !important;
        padding: 20px 16px 22px !important;
        font-size: 19px !important;
    }
}


/* =========================================================
   WCU REAL WORKING UNDERLINE FIX
   Works for all possible title-line class names:
   .wcu-about-underline / .model-title-line / .animated-title-line
   Also supports JS-created .wcu-live-underline.
   ========================================================= */
.wcu-about-exact-content .wcu-about-underline,
.wcu-about-exact-content .model-title-line,
.wcu-about-exact-content .animated-title-line,
.wcu-about-exact-content .wcu-live-underline,
.wcu-about-model-content .wcu-about-underline,
.wcu-about-model-content .model-title-line,
.wcu-about-model-content .animated-title-line,
.wcu-about-model-content .wcu-live-underline,
.wcu-about-content .wcu-about-underline,
.wcu-about-content .model-title-line,
.wcu-about-content .animated-title-line,
.wcu-about-content .wcu-live-underline {
    display: block !important;
    position: relative !important;
    width: 218px !important;
    height: 20px !important;
    margin: 9px 0 18px 190px !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    transform: none !important;
    opacity: 1 !important;
}

.wcu-about-exact-content .wcu-about-underline::before,
.wcu-about-exact-content .model-title-line::before,
.wcu-about-exact-content .animated-title-line::before,
.wcu-about-exact-content .wcu-live-underline::before,
.wcu-about-model-content .wcu-about-underline::before,
.wcu-about-model-content .model-title-line::before,
.wcu-about-model-content .animated-title-line::before,
.wcu-about-model-content .wcu-live-underline::before,
.wcu-about-content .wcu-about-underline::before,
.wcu-about-content .model-title-line::before,
.wcu-about-content .animated-title-line::before,
.wcu-about-content .wcu-live-underline::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 7px !important;
    width: 180px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: #1c8a3c !important;
    opacity: 1 !important;
    transform-origin: left center !important;
    will-change: transform, opacity !important;
    animation: wcuRealUnderlineOne 4.2s cubic-bezier(.55, 0, .15, 1) infinite !important;
}

.wcu-about-exact-content .wcu-about-underline::after,
.wcu-about-exact-content .model-title-line::after,
.wcu-about-exact-content .animated-title-line::after,
.wcu-about-exact-content .wcu-live-underline::after,
.wcu-about-model-content .wcu-about-underline::after,
.wcu-about-model-content .model-title-line::after,
.wcu-about-model-content .animated-title-line::after,
.wcu-about-model-content .wcu-live-underline::after,
.wcu-about-content .wcu-about-underline::after,
.wcu-about-content .model-title-line::after,
.wcu-about-content .animated-title-line::after,
.wcu-about-content .wcu-live-underline::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 18px !important;
    top: 12px !important;
    width: 150px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: #1c8a3c !important;
    opacity: .82 !important;
    transform-origin: left center !important;
    will-change: transform, opacity !important;
    animation: wcuRealUnderlineTwo 4.2s cubic-bezier(.55, 0, .15, 1) infinite .14s !important;
}

@keyframes wcuRealUnderlineOne {
    0% {
        transform: rotate(-3deg) scaleX(.04);
        opacity: .22;
    }
    8% {
        opacity: 1;
    }
    42% {
        transform: rotate(-3deg) scaleX(1);
        opacity: 1;
    }
    88% {
        transform: rotate(-3deg) scaleX(1);
        opacity: 1;
    }
    100% {
        transform: rotate(-3deg) scaleX(.04);
        opacity: .22;
    }
}

@keyframes wcuRealUnderlineTwo {
    0% {
        transform: rotate(-3deg) scaleX(.04);
        opacity: .20;
    }
    10% {
        opacity: .82;
    }
    46% {
        transform: rotate(-3deg) scaleX(1);
        opacity: .82;
    }
    88% {
        transform: rotate(-3deg) scaleX(1);
        opacity: .82;
    }
    100% {
        transform: rotate(-3deg) scaleX(.04);
        opacity: .20;
    }
}

@media (max-width: 600px) {
    .wcu-about-exact-content .wcu-about-underline,
    .wcu-about-exact-content .model-title-line,
    .wcu-about-exact-content .animated-title-line,
    .wcu-about-exact-content .wcu-live-underline,
    .wcu-about-model-content .wcu-about-underline,
    .wcu-about-model-content .model-title-line,
    .wcu-about-model-content .animated-title-line,
    .wcu-about-model-content .wcu-live-underline,
    .wcu-about-content .wcu-about-underline,
    .wcu-about-content .model-title-line,
    .wcu-about-content .animated-title-line,
    .wcu-about-content .wcu-live-underline {
        margin: 9px 0 18px 0 !important;
    }
}

/* =========================================================
   FINAL FIX: WCU ABOUT GREEN UNDERLINE ONLY
   This is intentionally at the very end of responsive.css so it overrides
   older duplicate underline attempts without changing layout.
   ========================================================= */
body .wcu-about-exact .wcu-about-exact-content > span.wcu-about-underline {
    display: block !important;
    position: relative !important;
    width: 190px !important;
    height: 18px !important;
    margin: 7px 0 18px 190px !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    opacity: 1 !important;
    transform: none !important;
}

body .wcu-about-exact .wcu-about-exact-content > span.wcu-about-underline::before,
body .wcu-about-exact .wcu-about-exact-content > span.wcu-about-underline::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    border-radius: 999px !important;
    background: #1c8a3c !important;
    transform-origin: left center !important;
    will-change: transform !important;
}

body .wcu-about-exact .wcu-about-exact-content > span.wcu-about-underline::before {
    left: 0 !important;
    top: 5px !important;
    width: 178px !important;
    height: 3px !important;
    opacity: 1 !important;
    animation: wcuFinalOnlyUnderlineOne 4.2s cubic-bezier(.55, 0, .15, 1) infinite !important;
}

body .wcu-about-exact .wcu-about-exact-content > span.wcu-about-underline::after {
    left: 18px !important;
    top: 10px !important;
    width: 148px !important;
    height: 3px !important;
    opacity: .82 !important;
    animation: wcuFinalOnlyUnderlineTwo 4.2s cubic-bezier(.55, 0, .15, 1) infinite .12s !important;
}

@keyframes wcuFinalOnlyUnderlineOne {
    0% { transform: rotate(-3deg) scaleX(0); }
    45% { transform: rotate(-3deg) scaleX(1); }
    88% { transform: rotate(-3deg) scaleX(1); }
    100% { transform: rotate(-3deg) scaleX(0); }
}

@keyframes wcuFinalOnlyUnderlineTwo {
    0% { transform: rotate(-3deg) scaleX(0); }
    50% { transform: rotate(-3deg) scaleX(1); }
    88% { transform: rotate(-3deg) scaleX(1); }
    100% { transform: rotate(-3deg) scaleX(0); }
}

@media (max-width: 600px) {
    body .wcu-about-exact .wcu-about-exact-content > span.wcu-about-underline {
        margin: 7px 0 18px 0 !important;
        width: 180px !important;
    }
}
/* =========================================================
   FINAL RESPONSIVE OVERRIDE: WCU PROGRAMMES PREMIUM CARDS
   Keeps 4 cards inside the same container width on desktop,
   2 cards on tablet, and 1 card on mobile.
   ========================================================= */
.wcu-programmes-final.section-space {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
}

.wcu-programmes-final .programmes-grid,
.wcu-programmes-final .wcu-programmes-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.wcu-programmes-final .programme-card {
    min-height: 282px !important;
    border-radius: 24px !important;
}

.wcu-programmes-final .programme-visual {
    height: 178px !important;
}

.wcu-programmes-final .programme-card h3 {
    font-size: 17.2px !important;
}

@media (max-width: 1100px) {
    .wcu-programmes-final.section-space {
        padding-top: 44px !important;
    }

    .wcu-programmes-final .programmes-grid,
    .wcu-programmes-final .wcu-programmes-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .wcu-programmes-final .programme-card {
        min-height: 264px !important;
        border-radius: 21px !important;
    }

    .wcu-programmes-final .programme-visual {
        height: 162px !important;
        border-radius: 21px 21px 0 0 !important;
    }

    .wcu-programmes-final .programme-card-body {
        min-height: 102px !important;
        padding: 15px 10px 17px !important;
    }

    .wcu-programmes-final .programme-card h3 {
        font-size: 15.6px !important;
    }
}

@media (max-width: 920px) {
    .wcu-programmes-final.section-space {
        padding-top: 42px !important;
        padding-bottom: 58px !important;
    }

    .wcu-programmes-final .programmes-grid,
    .wcu-programmes-final .wcu-programmes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .wcu-programmes-final .programme-card {
        min-height: 286px !important;
    }

    .wcu-programmes-final .programme-visual {
        height: 184px !important;
    }

    .wcu-programmes-title p {
        max-width: 680px !important;
    }
}

@media (max-width: 600px) {
    .wcu-programmes-final.section-space {
        padding-top: 38px !important;
        padding-bottom: 52px !important;
    }

    .wcu-programmes-title {
        margin-bottom: 24px !important;
        text-align: center !important;
    }

    .wcu-programmes-title h2 {
        font-size: clamp(27px, 8vw, 36px) !important;
    }

    .wcu-programmes-title p {
        font-size: 14.5px !important;
        line-height: 1.6 !important;
    }

    .wcu-programmes-line {
        margin-top: 7px !important;
    }

    .wcu-programmes-final .programmes-grid,
    .wcu-programmes-final .wcu-programmes-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .wcu-programmes-final .programme-card {
        width: min(100%, 380px) !important;
        min-height: auto !important;
        margin: 0 auto !important;
        border-radius: 22px !important;
    }

    .wcu-programmes-final .programme-visual {
        height: 210px !important;
        border-radius: 22px 22px 0 0 !important;
    }

    .wcu-programmes-final .programme-card-body {
        min-height: auto !important;
        padding: 18px 16px 20px !important;
    }

    .wcu-programmes-final .programme-card h3 {
        font-size: 19px !important;
    }

    .wcu-programmes-final .programme-card-body span {
        font-size: 12.5px !important;
    }
}

@media (max-width: 380px) {
    .wcu-programmes-final .programme-visual {
        height: 190px !important;
    }

    .wcu-programmes-final .programme-card h3 {
        font-size: 18px !important;
    }
}

/* =========================================================
   FINAL REFINEMENT: WCU PROGRAMMES MATRIX-INSPIRED SMOOTH CARDS
   Purpose:
   - Removes visible Explore text if an older browser cache keeps it.
   - Makes the programme cards compact, premium and smoother on hover.
   - Keeps image area rounded on top and suitable for future card images.
   ========================================================= */
.wcu-programmes-final.section-space {
    padding-top: 44px !important;
    padding-bottom: 62px !important;
}

.wcu-programmes-final .programmes-grid,
.wcu-programmes-final .wcu-programmes-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
}

.wcu-programmes-final .programme-card {
    position: relative !important;
    min-height: 246px !important;
    border-radius: 24px !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    isolation: isolate !important;
    transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1),
        filter .55s cubic-bezier(.22, 1, .36, 1) !important;
}

.wcu-programmes-final .programme-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    border-radius: inherit !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(218, 229, 241, .96) !important;
    box-shadow:
        0 9px 24px rgba(8, 53, 121, .075),
        0 1px 0 rgba(255,255,255,.95) inset !important;
    transition:
        box-shadow .55s cubic-bezier(.22, 1, .36, 1),
        border-color .55s cubic-bezier(.22, 1, .36, 1),
        background .55s cubic-bezier(.22, 1, .36, 1) !important;
}

.wcu-programmes-final .programme-card::after {
    content: '' !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: 18px !important;
    bottom: -12px !important;
    z-index: -2 !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 50% 104%, rgba(0,168,107,.42), transparent 48%),
        radial-gradient(circle at 4% 48%, rgba(0,168,107,.24), transparent 34%),
        radial-gradient(circle at 96% 48%, rgba(0,168,107,.24), transparent 34%),
        radial-gradient(circle at 50% 0%, rgba(11,79,159,.14), transparent 42%) !important;
    filter: blur(18px) !important;
    opacity: 0 !important;
    transform: translate3d(0, 14px, 0) scale(.96) !important;
    transition:
        opacity .55s cubic-bezier(.22, 1, .36, 1),
        transform .55s cubic-bezier(.22, 1, .36, 1) !important;
    pointer-events: none !important;
}

.wcu-programmes-final .programme-card:hover,
.wcu-programmes-final .programme-card:focus-visible {
    transform: translate3d(0, -7px, 0) !important;
}

.wcu-programmes-final .programme-card:hover::before,
.wcu-programmes-final .programme-card:focus-visible::before {
    border-color: rgba(0,168,107,.34) !important;
    background: #ffffff !important;
    box-shadow:
        0 20px 48px rgba(8, 53, 121, .13),
        0 0 0 1px rgba(0,168,107,.06),
        0 0 38px rgba(0,168,107,.18) !important;
}

.wcu-programmes-final .programme-card:hover::after,
.wcu-programmes-final .programme-card:focus-visible::after {
    opacity: 1 !important;
    transform: translate3d(0, 2px, 0) scale(1) !important;
}

.wcu-programmes-final .programme-visual {
    height: 162px !important;
    margin: 8px 8px 0 !important;
    border-radius: 19px 19px 0 0 !important;
    overflow: hidden !important;
    background: var(--programme-gradient, linear-gradient(135deg, #0B4F9F, #00A86B)) !important;
    box-shadow: none !important;
    transform: translate3d(0, 0, 0) !important;
}

.wcu-programmes-final .programme-visual::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background-image: var(--programme-image), var(--programme-gradient, linear-gradient(135deg, #0B4F9F, #00A86B)) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center !important;
    background-size: cover, cover !important;
    filter: saturate(1.04) contrast(1.02) !important;
    transform: scale(1.001) !important;
    transition:
        transform .70s cubic-bezier(.22, 1, .36, 1),
        filter .70s cubic-bezier(.22, 1, .36, 1) !important;
    will-change: transform !important;
}

.wcu-programmes-final .programme-visual::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 38%),
        linear-gradient(0deg, rgba(3,31,75,.13) 0%, rgba(3,31,75,0) 58%) !important;
    pointer-events: none !important;
    opacity: .72 !important;
    transition: opacity .55s cubic-bezier(.22, 1, .36, 1) !important;
}

.wcu-programmes-final .programme-card:hover .programme-visual::before,
.wcu-programmes-final .programme-card:focus-visible .programme-visual::before {
    transform: scale(1.055) !important;
    filter: saturate(1.10) contrast(1.04) !important;
}

.wcu-programmes-final .programme-card:hover .programme-visual::after,
.wcu-programmes-final .programme-card:focus-visible .programme-visual::after {
    opacity: .48 !important;
}

.wcu-programmes-final .programme-card-body {
    min-height: 76px !important;
    padding: 14px 13px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.wcu-programmes-final .programme-card h3 {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    color: #083579 !important;
    font-size: 16.8px !important;
    line-height: 1.20 !important;
    font-weight: 900 !important;
    letter-spacing: -.012em !important;
    text-align: center !important;
    transition: color .40s ease !important;
}

.wcu-programmes-final .programme-card:hover h3,
.wcu-programmes-final .programme-card:focus-visible h3 {
    color: #064080 !important;
}

.wcu-programmes-final .programme-card-body span {
    display: none !important;
}

@media (max-width: 1100px) {
    .wcu-programmes-final .programmes-grid,
    .wcu-programmes-final .wcu-programmes-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 15px !important;
    }

    .wcu-programmes-final .programme-card {
        min-height: 232px !important;
        border-radius: 22px !important;
    }

    .wcu-programmes-final .programme-visual {
        height: 150px !important;
        margin: 7px 7px 0 !important;
        border-radius: 17px 17px 0 0 !important;
    }

    .wcu-programmes-final .programme-card-body {
        min-height: 74px !important;
        padding: 13px 10px 15px !important;
    }

    .wcu-programmes-final .programme-card h3 {
        font-size: 15.4px !important;
    }
}

@media (max-width: 920px) {
    .wcu-programmes-final.section-space {
        padding-top: 42px !important;
        padding-bottom: 58px !important;
    }

    .wcu-programmes-final .programmes-grid,
    .wcu-programmes-final .wcu-programmes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .wcu-programmes-final .programme-card {
        min-height: 268px !important;
    }

    .wcu-programmes-final .programme-visual {
        height: 184px !important;
    }

    .wcu-programmes-final .programme-card-body {
        min-height: 82px !important;
    }

    .wcu-programmes-final .programme-card h3 {
        font-size: 18px !important;
    }
}

@media (max-width: 600px) {
    .wcu-programmes-final.section-space {
        padding-top: 38px !important;
        padding-bottom: 52px !important;
    }

    .wcu-programmes-final .programmes-grid,
    .wcu-programmes-final .wcu-programmes-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .wcu-programmes-final .programme-card {
        width: min(100%, 380px) !important;
        min-height: auto !important;
        margin: 0 auto !important;
        border-radius: 22px !important;
    }

    .wcu-programmes-final .programme-visual {
        height: 210px !important;
        margin: 8px 8px 0 !important;
        border-radius: 17px 17px 0 0 !important;
    }

    .wcu-programmes-final .programme-card-body {
        min-height: 78px !important;
        padding: 16px 16px 18px !important;
    }

    .wcu-programmes-final .programme-card h3 {
        font-size: 19px !important;
        line-height: 1.22 !important;
    }
}

@media (max-width: 380px) {
    .wcu-programmes-final .programme-visual {
        height: 190px !important;
    }

    .wcu-programmes-final .programme-card h3 {
        font-size: 18px !important;
    }
}