/* Tablet layout */
@media (max-width: 992px) {
    .top-recruiters {
        padding: 45px 28px 30px;
    }

    .coe-banner {
        flex-direction: column;
    }

    .stats-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        padding: 0;
    }

    .stat-item {
        min-width: 0;
        text-align: center;
        padding: 18px 10px;
        background: rgba(255, 255, 255, 0.68);
        border: 1px solid rgba(16, 29, 61, 0.06);
        border-radius: 12px;
    }

    .stat-item span {
        white-space: normal;
    }

    .recruiter-strip {
        padding: 22px 24px;
    }
}

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

    html,
    body {
        overflow-x: clip;
        width: 100%;
        max-width: 100vw;
    }

    .hero {
        margin-top: 46px;
    }

    .section {
        padding: 40px 20px;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .chips {
        display: none;
    }

    .section-heading {
        font-size: 1.8rem;
    }

    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
        background: var(--white);
        /* backdrop-filter on the navbar would make it the containing block for
           the position:fixed drawer + overlay, breaking their full-viewport
           geometry. The bar is opaque here, so the blur buys us nothing. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 2px 12px rgba(16, 29, 61, 0.10);
        border-bottom: 1px solid rgba(31, 67, 121, 0.08);
        padding: 10px 16px;
        justify-content: space-between;
        align-items: center;
        display: flex;
    }

    .mobile-header-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-width: 0;
        height: 42px;
    }

    .mobile-brand {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-width: 0;
        flex: 1;
        height: 40px;
    }

    .mobile-brand img {
        display: block;
        height: 36px;
        width: auto;
        max-width: 160px;
        object-fit: contain;
        transform: scale(1.5);
        transform-origin: left center;
    }

    /* Hide logo-full on mobile sidebar */
    .nav-menu .clg-logo .logo-full {
        display: none;
    }

    .hamburger {
        position: static;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        min-width: 42px;
        cursor: pointer;
        background: rgba(31, 67, 121, 0.08);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        padding: 8px;
        border-radius: 11px;
        box-sizing: border-box;
        box-shadow: 0 5px 16px rgba(16, 29, 61, 0.08);
        z-index: 1004;
        flex-shrink: 0;
        transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
        touch-action: manipulation;
    }

    .hamburger span {
        display: block;
        height: 3.5px;
        background: var(--primary-blue);
        border-radius: 999px;
        width: 100%;
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, background 0.2s ease;
    }

    .menu-toggle:checked+.mobile-header-left .hamburger {
        background: rgba(249, 192, 4, 0.14);
        box-shadow: 0 8px 20px rgba(249, 192, 4, 0.15);
    }

    .menu-toggle:checked+.mobile-header-left .hamburger span:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg);
    }

    .menu-toggle:checked+.mobile-header-left .hamburger span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle:checked+.mobile-header-left .hamburger span:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
    }

    .nav-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 0;
        margin-top: 20px;
        height: 100vh;
        height: 100dvh;
    }

    .menu-toggle:checked~.nav-menu {
        display: flex;
    }

    .nav-links {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .nav-links a {
        display: block;
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        color: var(--white);
    }

    .nav-links a::after {
        display: none;
    }

    .nav-links a:hover {
        color: var(--orange);
        transform: none;
    }

    .contact-info {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        gap: 15px;
        margin-top: 15px;
        color: var(--white);
    }

    .contact-info.nav-menu-actions {
        display: flex;
        flex-direction: row;
        gap: 12px;
        width: 100%;
    }

    .nav-action-btn {
        flex: 1;
        padding: 12px;
        text-align: center;
        border-radius: 8px;
        font-weight: 700;
        font-size: 1rem;
        text-decoration: none;
        border: none;
        cursor: pointer;
        display: block;
    }

    .contact-info .nav-call-btn,
    .contact-info .nav-apply-btn {
        background-color: var(--primary-blue);
        color: var(--white);
    }

    .hero {
        padding: 76px 16px 32px;
        text-align: center;
        flex-direction: column;
        gap: 0;
    }

    .hero-bg {
        background-image: url('../images/New%20Photos/Admissions%20Open%20Banner%20Mobile.webp');
        background-position: -10px center;
    }

    .hero::before {
        background: linear-gradient(180deg,
                rgba(28, 42, 79, 0.5) 0%,
                rgba(28, 42, 79, 0.4) 100%);
    }

    .hero-content {
        margin: 0 auto;
        width: 100%;
    }

    .hero-form-container {
        display: none;
    }

    .mobile-hero-form {
        display: block;
        padding: 10px 16px 90px;
        position: relative;
        z-index: 5;
    }


    .hero-form-card {
        padding: 0;
        border-radius: 16px;
    }

    .hero-form-card h2 {
        font-size: 1.35rem;
    }

    .hero-admission-form input,
    .hero-admission-form select {
        min-height: 46px;
        font-size: 15px;
    }

    .hero-form-card .admission-submit {
        width: 100%;
        min-height: 48px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-title span {
        font-size: 1.5rem;
    }

    .chips {
        justify-content: center;
    }

    .scholarship h2 {
        font-size: 3rem;
    }

    .scholarship h2 span {
        font-size: 1.5rem;
    }

    .form-container {
        flex-direction: column;
        text-align: center;
    }

    .enquiry-form {
        display: flex;
        flex-direction: row;
        width: 100%;

    }

    .enquiry-form input,
    .enquiry-form button {
        width: 100%;
        padding: 15px;
    }

    .placements-banner {
        flex-direction: column;
    }

    .student-slider-overflow {
        overflow: hidden;
        width: 100%;
    }

    .placement-student-details {
        display: flex;
        gap: 14px;
        flex-wrap: nowrap;
        padding-top: 4px;
        padding-bottom: 18px;
        transition: transform 0.5s ease-in-out;
    }

    .placement-student-details .student-card {
        flex: 0 0 calc(100% - 30px);
        max-width: calc(100% - 30px);
        margin: 0 7px;
    }

    .student-slider-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        margin-top: 8px;
    }

    .student-slider-progress {
        min-width: 68px;
        color: var(--text-light);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-align: center;
    }

    .banner-left {
        flex: 0 0 100%;
        width: 100%;
        border-right: none;
        border-bottom: 2px solid rgba(255, 255, 255, 0.2);
        text-align: center;
    }

    .banner-left h3 {
        font-size: 2rem;
    }

    .banner-right {
        flex: 0 0 100%;
        width: 100%;
        background-position: bottom center;
        background-size: 250px;
        padding: 30px 20px 220px 20px;
        text-align: center;
        min-height: 400px;
    }

    .coe-content {
        padding: 30px 20px;
    }

    .coe-content h2 {
        font-size: 1.8rem;
    }

    .coe-features {
        grid-template-columns: 1fr;
    }

    .campus-container {
        padding: 28px 16px;
    }

    .course-slider-overflow {
        overflow: hidden;
        width: 100%;
    }

    .courses-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 15px;
        padding-bottom: 20px;
        justify-content: flex-start;
    }

    .course-card {
        flex: 0 0 calc(100% - 40px);
        max-width: calc(100% - 40px);
    }

    .programme-details {
        padding-left: 0;
        padding-right: 0;
    }

    .programme-details>.section-heading {
        padding: 0 20px;
        margin-bottom: 22px;
    }

    .programme-intro {
        padding: 0 20px;
        margin: -8px auto 24px;
        font-size: 13px;
    }

    .programme-details .courses-grid {
        width: 100%;
        padding-top: 4px;
        padding-bottom: 20px;
        gap: 14px;
        transition: transform 0.5s ease-in-out;
    }

    .programme-details .course-card {
        flex: 0 0 calc(100% - 30px);
        max-width: calc(100% - 30px);
        margin: 0 7px;
    }

    .programme-details .course-card img {
        aspect-ratio: 4 / 3;
    }

    .programme-details .course-card p {
        padding: 14px 15px;
        font-size: 15px;
    }

    .course-slider-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        margin-top: 2px;
    }

    .course-slider-progress {
        min-width: 68px;
        color: var(--text-light);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-align: center;
    }

    /* Hide mosaic on mobile, show gallery slider */
    .campus-mosaic {
        display: none !important;
    }

    .gallery-wrapper {
        display: block !important;
    }

    .gallery-slider {
        aspect-ratio: 4 / 10;
    }

    .collage-layout {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 8px;
    }

    .img-1 {
        grid-area: 1 / 1 / 3 / 3;
    }

    .img-2 {
        grid-area: 3 / 1 / 4 / 2;
    }

    .img-3 {
        grid-area: 3 / 2 / 4 / 3;
    }

    .img-4 {
        grid-area: 4 / 1 / 5 / 2;
    }

    .img-5 {
        grid-area: 4 / 2 / 5 / 3;
    }

    .collage-layout img {
        border-radius: 8px;
    }

    .gallery-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .gallery-progress {
        display: flex;
        align-items: center;
        min-width: 68px;
        color: var(--white);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-align: center;
    }

    .logos-grid {
        gap: 10px;
    }

    .logo-box {
        padding: 10px 15px;
        font-size: 14px;
    }

    .stat-item h3 {
        font-size: 2.2rem;
    }

    .recruiter-strip {
        padding: 32px 22px;
        border-radius: 14px;
    }

    .recruiter-logos-track {
        gap: 14px;
        justify-content: flex-start;
    }

    /* Mobile gap is 14px, so the seam offset must be half of that (7px), not 15px */
    @keyframes scrollLogos {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-50% - 7px));
        }
    }

    .recruiter-logo-item {
        flex-basis: 155px;
        padding: 8px;
    }

    .recruiter-logo-item img {
        height: 58px;
        width: auto;
        max-width: 100%;
    }

    .test-card {
        flex: 0 0 100%;
        height: auto;
    }

    .testimonial-heading {
        margin-bottom: 20px;
    }

    .testimonial-intro {
        font-size: 14px;
    }

    .testimonial-controls .gallery-btn {
        width: 48px;
        height: 48px;
        font-size: 21px;
    }

    .test-slider-overflow {
        padding-bottom: 14px;
    }

    .fees-images {
        flex-direction: column;
        align-items: center;
    }

    .fees-images img {
        width: 100%;
        max-width: 300px;
    }

    .main-footer {
        padding: 30px 20px;
        text-align: center;
    }

    .footer-content {
        text-align: center;
    }

    .footer-info {
        flex-direction: column;
        gap: 15px;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .top-recruiters {
        padding: 36px 14px 24px;
    }

    .stats-container {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .stat-item {
        padding: 14px 12px;
    }

    .recruiters-subtitle {
        font-size: 14px;
        line-height: 1.5;
    }

    .recruiter-logo-item {
        flex-basis: 140px;
    }
}

/* Final phone layout refinements */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
        width: 100%;
    }

    .topbar {
        padding: 9px 14px;
        font-size: 11px;
        line-height: 1.4;
    }

    .navbar {
        min-height: 0;
        padding: 0;
    }

    .hamburger {
        width: 34px;
        height: 24px;
        padding: 6px;
        top: 10px;
        right: 12px;
    }

    .nav-menu {
        margin-top: 14px;
        padding: 6px 2px 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .nav-links a {
        padding: 13px 2px;
        font-size: 14px;
    }

    .contact-info {
        padding: 8px 2px 2px;
        font-size: 13px;
    }

    .contact-info svg {
        width: 20px;
        height: 20px;
    }

    .hero {
        min-height: auto;
        aspect-ratio: 3 / 2;
        padding: 60px 16px 0;
    }

    .hero-content {
        width: 100%;
    }

    .section-heading,
    .hero-title {
        font-size: 2rem !important;
        line-height: 1.08 !important;
    }

    .hero-title {
        margin-bottom: 20px;
    }

    .hero-title span {
        font-size: 1.45rem;
        letter-spacing: 1px;
    }

    .specializations {
        margin-top: 20px;
    }

    .specializations p {
        font-size: 13px;
        line-height: 1.5;
    }

    .chips {
        gap: 7px;
        margin-bottom: 28px;
    }

    .chips span {
        padding: 7px 9px;
        font-size: 9px;
        letter-spacing: 0.05em;
    }

    .scholarship {
        gap: 8px;
        padding: 14px 13px;
        border-radius: 16px;
        max-width: 100%;
    }

    .scholarship p {
        font-size: 10px;
    }

    .scholarship h2 {
        font-size: 2.7rem;
    }

    .scholarship h2 span {
        font-size: 1.25rem;
    }

    .scholarship-text {
        font-size: 13px;
    }

    .scholarship-text span {
        font-size: 9px;
    }

    .enquiry-form-section {
        padding: 14px 16px;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .form-container {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        gap: 12px;
        padding: 16px 14px;
        border-radius: 14px;
        box-sizing: border-box;
    }

    .form-title {
        font-size: 16px;
        white-space: normal;
    }

    .enquiry-form {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        gap: 9px;
    }

    .enquiry-form input,
    .enquiry-form button {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 48px;
        border-radius: 10px;
        box-sizing: border-box;
    }

    .section {
        min-height: auto;
        padding: 36px 14px;
        overflow-x: hidden;
    }

    .section-heading {
        margin-bottom: 16px;
        word-break: break-word;
    }

    .placements-banner,
    .coe-banner {
        border-radius: 18px;
        max-width: 100%;
    }

    .placement-student-details .student-card {
        flex-basis: calc(100vw - 44px);
    }

    .gallery-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .gallery-controls,
    .testimonial-controls {
        display: flex;
        gap: 12px;
        margin-top: 14px;
    }

    .testimonials-wrapper {
        gap: 18px;
        max-width: 100%;
    }

    .test-card {
        border-radius: 16px;
    }

    .test-card img {
        border-radius: 16px;
    }

    .fees-buttons {
        gap: 9px;
        margin-bottom: 24px;
    }

    .footer-lead>.container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
        padding: 0;
        margin: 12px auto 0;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .footer-lead>.container>div {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        background: var(--white);
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(16, 29, 61, 0.06);
        gap: 8px;
    }

    .footer-lead>.container>div {
        grid-column: span 1;
    }

    .footer-lead>.container>div .red-btn {
        width: 100%;
        font-size: 12px;
        padding: 9px 12px;
        min-height: 38px;
    }

    .footer-lead>.container img {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        border-radius: 10px;
    }

    .red-btn,
    .unlock-btn,
    .apply-now-btn {
        min-height: 46px;
        padding: 11px 18px;
        border-radius: 10px;
    }

    /* Industry section mobile fixes */
    .industry-learning {
        padding: 24px 0;
        overflow: hidden;
    }

    .industry-learning .content {
        max-width: 100%;
        overflow: hidden;
    }

    .industry-learning .section-heading {
        padding: 0 16px;
    }

    .industry-logo-box {
        flex: 0 0 220px;
        padding: 16px;
        height: 140px;
        border-radius: 16px;
    }

    .industry-logo-box .logo-text {
        font-size: 18px;
    }

    /* Stats container mobile fix */
    .stats-container {
        gap: 14px;
        padding: 0;
        max-width: 100%;
    }

    .stat-item {
        padding: 14px 8px;
    }

    .stat-item span {
        white-space: normal;
        word-break: break-word;
    }

    .stat-item h3 {
        font-size: 2rem;
    }

    /* Recruiter strip mobile fix */
    .recruiter-strip {
        padding: 30px 20px;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* COE section mobile fix */
    .center-excellence {
        overflow: hidden;
    }

    .coe-banner {
        flex-direction: column;
        max-width: 100%;
        overflow: hidden;
    }

    .coe-content {
        padding: 24px 16px;
    }

    .coe-image {
        width: 100%;
        max-width: 100%;
        padding: 10px 16px;
        overflow: hidden;
    }

    .coe-image img {
        width: 100%;
        max-width: 280px;
        height: auto;
        margin: 0 auto;
        display: block;
    }

    .highlight-box {
        word-break: break-word;
    }

    /* Footer mobile fix */
    .main-footer {
        padding: 20px 16px 16px;
    }

    .footer-content h3 {
        font-size: 1.25rem;
    }

    .footer-info {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        align-items: center;
    }

    /* Hero full-width fix */
    .hero {
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    /* Scholarship section mobile */
    .scholarship {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
    }

    /* Footer lead section heading fix */
    .footer-lead .section-heading {
        font-size: 1.3rem !important;
        padding: 0 8px;
        margin-bottom: 6px;
    }
}

@media (max-width: 420px) {
    .hero {
        padding-top: 100px;
    }

    .section-heading,
    .hero-title {
        font-size: 1.8rem !important;
    }

    .scholarship {
        align-items: center;
    }

    .scholarship h2 {
        font-size: 2.35rem;
    }

    .scholarship-text {
        font-size: 11px;
    }

    .banner-left,
    .banner-right {
        padding-left: 16px;
        padding-right: 16px;
    }

    .course-card {
        flex-basis: 92%;
        max-width: 92%;
    }

    .programme-details .course-card {
        flex-basis: calc(100vw - 44px);
        max-width: calc(100vw - 44px);
    }

    .programme-carousel-controls {
        margin-top: 0;
    }

    .admission-modal {
        padding: 12px;
        align-items: center;
        justify-content: center;
    }

    .admission-modal-card {
        background: var(--primary-blue);
        max-height: 92dvh;
        padding: 30px 18px 20px;
        border-radius: 20px;
        width: calc(100% - 24px);
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .admission-modal {
        padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        align-items: center;
        justify-content: center;
    }

    .admission-modal-card {
        width: calc(100% - 24px);
        max-height: 92vh;
        max-height: 92dvh;
        padding: 24px 18px 18px;
        border-radius: 20px;
        margin: 0 auto;
    }

    .admission-modal-card h2 {
        max-width: calc(100% - 36px);
        font-size: 1.75rem;
    }

    .modal-description {
        margin-bottom: 20px;
        font-size: 13px;
    }

    .admission-modal-form {
        gap: 12px;
    }

    .admission-modal-form input,
    .admission-modal-form select {
        min-height: 50px;
        font-size: 16px;
    }

    .admission-submit {
        min-height: 52px;
        margin-top: 4px;
    }
}

@media (max-width: 768px) {
    .close-sidebar-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        color: var(--white);
        font-size: 32px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1005;
        transition: background 0.2s ease;
    }

    .close-sidebar-btn:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    .nav-menu {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1003;
        width: min(86vw, 360px);
        height: 100vh;
        height: 100dvh;
        max-height: none;
        padding: 92px 24px 28px;
        margin-top: 0;
        overflow-y: auto;
        background: linear-gradient(180deg, #1f4379 0%, #1f4379 100%);
        box-shadow: -18px 0 40px rgba(8, 17, 38, 0.30);
        opacity: 0;
        transform: translateX(105%);
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.4s ease;
    }

    .nav-menu .clg-logo {
        width: 100%;
        margin: 0 auto 12px;
        justify-content: center;
    }

    .mobile-topbar-strip {
        width: 100%;
        background: #f9c004;
        border-radius: 8px;
        padding: 8px 12px;
        margin-bottom: 18px;
        text-align: center;
    }

    .mobile-topbar-strip p {
        font-size: 11px;
        font-weight: 700;
        color: #1f4379;
        margin: 0;
        letter-spacing: 0.02em;
    }

    .nav-menu .clg-logo .logo-full {
        display: none;
    }

    .nav-menu .clg-logo .logo-mark {
        display: block;
        width: min(100%, 224px);
        height: 64px;
        aspect-ratio: 3.5 / 1;
        max-width: 100%;
        object-fit: cover;
        object-position: center;
        transform: none;
    }

    .menu-toggle:checked~.nav-menu {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1002;
        background: rgba(5, 12, 28, 0.58);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .menu-toggle:checked~.sidebar-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav-links {
        align-items: stretch;
    }

    .nav-links a {
        border-bottom-color: rgba(255, 255, 255, 0.08);
        padding: 16px 16px;
        font-size: 1.15rem;
        font-weight: 500;
        border-radius: 8px;
        margin-bottom: 4px;
        transition: background-color 0.2s ease, padding-left 0.2s ease;
    }

    .nav-links a:hover {
        background-color: rgba(255, 255, 255, 0.05);
        padding-left: 24px;
    }

    .nav-links a,
    .contact-info {
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.25s ease, transform 0.3s ease;
    }

    .menu-toggle:checked~.nav-menu .nav-links a,
    .menu-toggle:checked~.nav-menu .contact-info {
        opacity: 1;
        transform: translateY(0);
    }

    .menu-toggle:checked~.nav-menu .nav-links a:nth-child(1) {
        transition-delay: 0.08s;
    }

    .menu-toggle:checked~.nav-menu .nav-links a:nth-child(2) {
        transition-delay: 0.13s;
    }

    .menu-toggle:checked~.nav-menu .nav-links a:nth-child(3) {
        transition-delay: 0.18s;
    }

    .menu-toggle:checked~.nav-menu .nav-links a:nth-child(4) {
        transition-delay: 0.23s;
    }

    .menu-toggle:checked~.nav-menu .nav-links a:nth-child(5) {
        transition-delay: 0.28s;
    }

    .menu-toggle:checked~.nav-menu .contact-info {
        transition-delay: 0.33s;
    }
}

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

    .hamburger,
    .hamburger span,
    .nav-menu,
    .sidebar-overlay,
    .nav-links a,
    .contact-info {
        transition: none;
    }
}

/* Placement highlights responsive */
@media (max-width: 768px) {
    .placement-highlights {
        position: relative;
        top: 0;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        margin: 0 auto 12px auto;
        border-radius: 16px;
        overflow: hidden;
    }

    .highlight-card {
        padding: 14px 8px;
    }

    .highlight-card h3 {
        font-size: 1.5rem;
    }

    .highlight-card h3 span {
        font-size: 0.8rem;
    }

    .highlight-card p {
        font-size: 10px;
    }

    .highlight-card .fortune-label {
        font-size: 8px;
        letter-spacing: 0.08em;
    }
}

/* Approvals Section Responsive */
@media (max-width: 991px) {
    .approval-image-box {
        flex: 1 1 calc(33.333% - 20px);
        max-width: calc(33.333% - 20px);
    }
}

@media (max-width: 768px) {
    .approval-slider-wrapper {
        overflow: hidden;
        width: 100%;
    }

    .approvals .approval-images-container {
        display: flex;
        flex-wrap: nowrap;
        gap: 14px;
        padding: 4px 20px 18px;
        justify-content: flex-start;
        transition: transform 0.5s ease-in-out;
    }

    .approval-image-box {
        flex: 0 0 calc(100% - 40px);
        max-width: calc(100% - 40px);
        scroll-snap-align: center;
    }

    .approval-slider-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        margin-top: 8px;
    }

    .approval-slider-progress {
        min-width: 68px;
        color: var(--text-light);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-align: center;
    }
}

/* ========================================= */
/* PHONE POLISH — 480px and below            */
/* ========================================= */
@media (max-width: 480px) {

    /* ---- Hero ---- */
    .hero {
        padding: 60px 16px 0;
        min-height: auto;
        aspect-ratio: 3 / 2;
        gap: 0;
    }

    .hero-bg {
        background-image: url('../images/New%20Photos/Admissions%20Open%20Banner%20Mobile.webp');
        background-position: -10px center;
        background-size: cover;
    }

    .hero::before {
        background: linear-gradient(180deg,
                rgba(28, 42, 79, 0.55) 0%,
                rgba(28, 42, 79, 0.45) 100%);
    }

    .hero-content {
        display: none;
    }

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

    .hero-form-card {
        padding: 20px 16px;
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    }

    .hero-form-card h2 {
        font-size: 1.3rem;
        margin-bottom: 6px;
    }

    .hero-form-card .modal-kicker {
        font-size: 11px;
        margin-bottom: 4px;
    }

    .hero-form-card .modal-description {
        font-size: 12px;
        margin-bottom: 14px;
    }

    .hero-admission-form {
        gap: 8px;
    }

    .hero-admission-form label {
        font-size: 11px;
        gap: 4px;
    }

    .hero-admission-form input,
    .hero-admission-form select {
        padding: 11px 12px;
        font-size: 15px;
        border-radius: 10px;
        min-height: 44px;
    }

    .hero-form-card .admission-submit {
        width: 100%;
        padding: 14px;
        font-size: 15px;
        border-radius: 10px;
        margin-top: 2px;
    }

    /* ---- Placement highlights ---- */
    .placement-highlights {
        top: 0;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .highlight-card {
        padding: 12px 8px;
    }

    .highlight-card h3 {
        font-size: 1.3rem;
    }

    .highlight-card h3 span {
        font-size: 0.7rem;
    }

    .highlight-card p {
        font-size: 9px;
        line-height: 1.3;
    }

    /* ---- Student cards ---- */
    .placement-student-details .student-card {
        flex: 0 0 calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        padding: 10px 8px;
        border-radius: 14px;
    }

    .placement-student-details .student-card>img {
        border-radius: 10px;
        margin-bottom: 8px;
    }

    .placement-student-details .student-name {
        font-size: 14px;
    }

    .placement-student-details .student-card>p {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .placement-student-details .company-logo {
        height: 40px;
        padding: 4px 6px;
    }

    .placement-student-details .company-logo img {
        height: 28px;
        min-height: 28px;
    }

    /* ---- Section headings ---- */
    .section-heading {
        font-size: 1.4rem !important;
        margin-top: 10px;
        margin-bottom: 12px;
    }

    .section-heading::after {
        width: 50px;
        height: 3px;
        margin: 8px auto 0;
    }

    /* ---- Programme courses ---- */
    .programme-details .course-card {
        flex: 0 0 calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        border-radius: 14px;
    }

    .programme-details .course-card img {
        aspect-ratio: 16 / 9;
    }

    .programme-details .course-card p {
        padding: 10px 12px;
        font-size: 14px;
    }

    /* ---- COE banner ---- */
    .coe-content {
        padding: 20px 16px;
    }

    .coe-content h2 {
        font-size: 1.5rem;
        margin-bottom: 14px;
    }

    .coe-features {
        gap: 10px;
    }

    .coe-features li {
        font-size: 12px;
    }

    .coe-image img {
        max-width: 220px;
    }

    /* ---- Campus ---- */
    .campus-container {
        padding: 24px 12px;
    }

    .campus-container h3 {
        font-size: 1.6rem;
        margin-bottom: 18px;
    }

    .gallery-slider {
        aspect-ratio: 3 / 10;
        border-radius: 10px;
    }

    .gallery-btn {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .gallery-controls {
        margin-top: 16px;
        gap: 14px;
    }

    /* ---- Testimonials ---- */
    .testimonials-wrapper {
        padding: 0 4px;
    }

    .test-card {
        border-radius: 12px;
    }

    .test-card img {
        border-radius: 12px;
    }

    .testimonial-controls .gallery-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    /* ---- Footer lead ---- */
    .footer-lead {
        padding: 28px 12px;
    }

    .footer-lead .section-heading {
        font-size: 1.15rem !important;
        padding: 0 4px;
        margin-bottom: 4px;
    }

    .footer-lead>.container {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 0;
        margin-top: 10px;
    }

    .footer-lead>.container>div {
        padding: 8px;
        border-radius: 10px;
    }

    .footer-lead>.container>div .red-btn {
        font-size: 11px;
        padding: 8px 10px;
        min-height: 36px;
    }

    .footer-lead>.container img {
        border-radius: 8px;
    }

    /* ---- Footer ---- */
    .main-footer {
        padding: 18px 12px 12px;
    }

    .footer-content h3 {
        font-size: 1.1rem;
    }

    .apply-now-btn {
        width: 100%;
        font-size: 14px;
        padding: 13px;
        border-radius: 10px;
    }

    /* ---- Industry logos ---- */
    .industry-logo-box {
        flex: 0 0 160px;
        height: 110px;
        border-radius: 12px;
    }

    /* ---- Recruiter strip ---- */
    .recruiter-strip {
        padding: 20px 12px;
    }

    .recruiter-logo-item {
        flex-basis: 130px;
    }

    .recruiter-logo-item img {
        height: 48px;
    }

    /* ---- Sticky header on small screens ---- */
    .navbar {
        background: var(--white);
        box-shadow: 0 2px 12px rgba(16, 29, 61, 0.10);
        border-bottom: 1px solid rgba(31, 67, 121, 0.08);
    }

    .hamburger {
        width: 38px;
        height: 28px;
        padding: 7px;
    }

    .hero {
        scroll-margin-top: 0;
    }

    /* ---- Topbar: now shown on mobile too (pinned above the fixed navbar via JS) ---- */

    /* ---- Section spacing ---- */
    /* Neighbouring sections each carried 28px top + 28px bottom, so every
       seam opened 56px of dead air — a full third of the gaps measured on a
       390px screen. One phone-sized vertical rhythm instead. */
    .section {
        padding: 18px 12px;
    }

    .placements {
        padding-top: 0;
        margin-top: 0;
    }

    /* ---- Admission modal ---- */
    .admission-modal-card {
        padding: 20px 14px 16px;
        border-radius: 16px;
    }

    .admission-modal-card h2 {
        font-size: 1.5rem;
    }

    .admission-modal-form input,
    .admission-modal-form select {
        min-height: 46px;
        font-size: 15px;
    }

    .admission-submit {
        min-height: 48px;
    }
}

/* Even smaller screens — 360px and below */
@media (max-width: 360px) {
    .hero {
        padding: 50px 12px 0;
        min-height: auto;
        aspect-ratio: 3 / 2;
    }

    .hero-form-card {
        padding: 16px 12px;
    }

    .hero-form-card h2 {
        font-size: 1.15rem;
    }

    .hero-admission-form input,
    .hero-admission-form select {
        padding: 10px;
        font-size: 14px;
    }

    .highlight-card h3 {
        font-size: 1.1rem;
    }

    .section-heading {
        font-size: 1.25rem !important;
    }

    .footer-lead .section-heading {
        font-size: 1.05rem !important;
    }
}

/* ========================================= */
/* PHONE UX — layout, media, a11y            */
/* ========================================= */
@media (max-width: 768px) {

    /* ---- Campus life: the phone `.section` padding overrode this section's own
       `padding: 0`, so the navy band was framed in white on all four sides and
       read as a card floating on the page. Let the band run edge to edge and
       inset its contents instead. ---- */
    .campus-life {
        padding: 0;
    }

    /* ---- Microsoft Center of Excellence: full width edge-to-edge & 1:1 ratio on mobile ---- */
    .coe-gallery {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .coe-gallery-wrapper,
    .coe-gallery-overflow,
    .coe-gallery-track,
    .coe-gallery-slide {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .coe-gallery-slide picture {
        display: block;
        width: 100%;
    }

    .coe-gallery-slide img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
    }

    .campus-container {
        padding: 24px 16px;
    }

    /* ---- Campus gallery: stop the 10-tall strip, fit one screen ---- */
    .gallery-slider {
        aspect-ratio: 4 / 5;
    }

    .collage-layout {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 6px;
    }

    .collage-layout .img-1 {
        grid-area: 1 / 1 / 3 / 2;
    }

    .collage-layout .img-2 {
        grid-area: 1 / 2 / 2 / 3;
    }

    .collage-layout .img-3 {
        grid-area: 2 / 2 / 3 / 3;
    }

    .collage-layout .img-4 {
        grid-area: 3 / 1 / 4 / 2;
    }

    .collage-layout .img-5 {
        grid-area: 3 / 2 / 4 / 3;
    }

    /* ---- Approval logos: cap height ---- */
    .approval-image-box {
        max-height: 240px;
    }

    .approval-image-box img {
        max-height: 210px;
        width: auto;
    }

    /* ---- Student cards: bound the photo so cards stay scannable ---- */
    .placement-student-details .student-card>img {
        aspect-ratio: 4 / 3;
    }

    .placement-student-details .company-logo {
        height: 42px;
        padding: 4px 6px;
    }

    .placement-student-details .company-logo img {
        height: 30px;
        min-height: 30px;
    }

    /* ---- Sliders: keep progress row compact, thumb-reachable ---- */
    .student-slider-controls,
    .course-slider-controls,
    .approval-slider-controls,
    .testimonial-controls,
    .gallery-controls {
        gap: 18px;
    }

    .gallery-btn {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    /* ---- Footer ---- */
    .main-footer {
        /* bottom padding also clears the sticky apply bar */
        padding: 22px 16px calc(96px + env(safe-area-inset-bottom, 0px));
        text-align: center;
    }

    .main-footer .footer-content {
        text-align: center;
        max-width: none;
    }

    /* The sticky bar carries the primary Apply Now, so keep this one quiet and
       in proportion instead of shouting over it. */
    .main-footer .footer-content h3 {
        font-size: 1.05rem;
        line-height: 1.4;
        margin-bottom: 14px;
        max-width: 24ch;
        margin-left: auto;
        margin-right: auto;
    }

    .main-footer .apply-now-btn {
        width: 100%;
        margin-bottom: 0;
        min-height: 48px;
        border-radius: 12px;
        /* One primary action per screen: the sticky bar owns it, so the footer's
           copy is a secondary outline button instead of a second yellow slab
           with the same label sitting 200px above the red one. */
        background: transparent;
        border: 1.5px solid rgba(255, 255, 255, 0.55);
        color: var(--white);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.01em;
    }

    .main-footer .download-brochure-btn {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 10px 0 0;
        min-height: 48px;
        padding: 14px 18px;
        border-radius: 12px;
        font-size: 15px;
        text-align: center;
    }

    .main-footer .apply-now-btn:active {
        background: rgba(255, 255, 255, 0.1);
    }

    /* Same crop as the base rule, sized for the phone. */
    .main-footer .footer-logo {
        width: 184px;
        margin: 0 auto 6px;
    }

    .main-footer .footer-info {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
        /* the divider separates the action band from the information band */
        margin-top: 22px;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
        padding-top: 16px;
        font-size: 13px;
    }

    .main-footer .footer-info p {
        margin: 0;
        max-width: 36ch;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.75);
    }

    .main-footer .footer-info .privacy-link {
        padding: 0;
        font-size: 13px;
        color: #f9c004;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .main-footer .copyright {
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        text-align: center;
        font-size: 11.5px;
        letter-spacing: 0.01em;
        color: rgba(255, 255, 255, 0.6);
    }

    /* ---- Sticky apply bar ---- */
    .mobile-cta-bar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        z-index: 999;
        /* below navbar/menu/overlay so the nav sits on top */
        display: flex;
        align-items: stretch;
        gap: 10px;
        padding: 10px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 10px 30px rgba(8, 17, 38, 0.22);
        animation: ctaBarIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .mobile-cta-bar .cta-call {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 14px;
        min-height: 46px;
        border-radius: 12px;
        background: rgba(31, 67, 121, 0.08);
        color: var(--primary-blue);
        font-size: 14px;
        font-weight: 800;
        text-decoration: none;
    }

    .mobile-cta-bar .cta-call:active {
        transform: scale(0.97);
    }

    .mobile-cta-bar .cta-apply {
        flex: 1 1 auto;
        min-height: 46px;
        border: none;
        border-radius: 12px;
        background: var(--red);
        color: var(--white);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0.02em;
        cursor: pointer;
    }

    .mobile-cta-bar .cta-apply:active {
        transform: scale(0.98);
    }

    /* The entrance animation uses fill-mode:both, which pins opacity to 1 and
       outranks a plain opacity:0 — kill the animation so the bar really hides. */
    body.modal-open .mobile-cta-bar,
    body.nav-open .mobile-cta-bar {
        animation: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .mobile-cta-bar {
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    /* ---- Drawer: lock the page behind it and contain its own scrolling ---- */
    body.nav-open {
        overflow: hidden;
    }

    .nav-menu {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- Drawer polish: desktop's `justify-content: space-between` spread the
       four menu items across the whole screen, leaving a dead void under the
       logo. Stack top-down instead and anchor the contact block deliberately. ---- */
    .nav-menu {
        justify-content: flex-start;
        align-items: stretch;
    }

    /* The "Admissions Open" strip is markup that desktop hides and mobile never
       un-hid, so it rendered as nothing. Give it back. */
    .mobile-topbar-strip {
        display: block;
    }

    .nav-menu .nav-links {
        margin-top: 6px;
    }

    .contact-info {
        margin-top: auto;
        padding: 16px 0 2px;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        font-size: 15px;
    }

    /* Make the phone number a real thumb-sized target instead of a bare link. */
    .contact-info .contact-call {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 46px;
        padding: 0 16px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.12);
    }

    .contact-info svg {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
    }

    .contact-info a {
        color: var(--white);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0.02em;
    }

    /* ---- Hero: on phone the hero holds nothing but the banner image (its
       headline and chips are baked into the artwork, and .hero-content is empty),
       so the 50% navy scrim was only muting the artwork it was meant to sit behind. ---- */
    .hero::before {
        background: none;
    }

    /* The 90px pad under the hero form was breathing room left over from an
       earlier layout; the card's own shadow is all the separation it needs. */
    .mobile-hero-form {
        padding: 10px 12px 20px;
    }

    /* The LeadX embed paints its own navy body, so the card's white padding was
       double padding: it squeezed the form ~40px narrower, which wrapped every
       row and pushed "Already Registered? / Login" past the iframe's fixed
       height, where it was clipped with no way to scroll it back. Let the embed
       fill the card instead — wider fields, and the form now fits. */
    .mobile-hero-form .hero-form-card {
        padding: 0;
    }

    /* The embed is a fixed-height form with no height reporting, so its box is
       sized here rather than inline: it fits at 445px from ~380px wide up, and
       narrower phones re-wrap its consent line and need the extra slack (see the
       narrow-screen block at the bottom of this file). */
    .mobile-hero-form #leadx-mobile-iframe {
        height: 445px;
    }

    /* The embed's white page also shows as a wedge in each *top* corner of the
       iframe — the two notches beside the heading. Our wrapper's top corners sit
       exactly on the embed's own corners, 56px below the card's edge where the
       card's own radius cannot hide them, so clip the same corners here.
       Clipping a corner of radius R removes a wedge with legs R, so R is set
       comfortably above the embed's own 12px radius to cut the wedge whole.
       The bottom edge is handled in styles.css, where the wrapper is clipped to
       the form's real height. ---- */
    .admission-modal-card .leadx-form-wrapper {
        border-radius: 40px 40px 0 0;
    }

    @container (min-width: 320px) {
        .admission-modal-card .leadx-form-wrapper {
            height: 438px;
        }
    }

    /* ---- Admission modal (the form that auto-opens on scroll): centre it on
       the phone screen rather than pinning it to the bottom edge, so it reads
       as a dialog belonging to the page instead of a stranded sheet.

       The header strip still has to be reserved: the form's own title row sits
       at the top of the cross-origin iframe and the close button was landing on
       top of it, cutting the heading off. ---- */
    /* flex, not the base grid: a centred auto grid track collapses to the
       iframe's intrinsic 300px, which is what kept the card narrow. */
    .admission-modal {
        display: flex;
        align-items: center;
        justify-content: center;
        /* symmetric padding keeps the card optically centred in the viewport */
        padding: 20px 16px;
    }

    .admission-modal-card {
        width: min(100%, 440px);
        /* 100% of the padded modal box = viewport minus 40px, so the centred
           card can never overflow on a short screen; it scrolls internally
           instead and keeps the Register button reachable. */
        max-height: 100%;
        /* compact title band for the embedded form and close button */
        padding: 16px 0 0;
        border-radius: 20px;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .admission-modal-close {
        top: 8px;
        right: 10px;
        z-index: 1001;
    }

    /* ---- Header: hamburger sits on the right, matching the side the drawer
       slides in from. `order` keeps the markup (and the :checked label wiring) as-is. ---- */
    .mobile-header-left {
        padding: 0 14px;
        gap: 12px;
    }

    .mobile-header-left .mobile-brand {
        order: 1;
    }

    .mobile-header-left .hamburger {
        order: 2;
    }

    /* ---- Tap targets: several controls measured under the ~44px minimum ---- */
    .mobile-header-left,
    .mobile-brand {
        min-height: 44px;
    }

    .hamburger {
        width: 44px;
        height: 44px;
        padding: 11px 10px;
    }

    .red-btn {
        min-height: 44px;
        align-items: center;
    }

    .footer-lead>.container>div .red-btn {
        min-height: 44px;
    }

    .privacy-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 8px;
    }

    /* ---- Admission modal: keep the close button clear of notch/rounded corners ---- */
    .admission-modal-close {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ---- Narrow phones: the embedded hero form re-wraps and needs more height ---- */
@media (max-width: 380px) {

    .mobile-hero-form #leadx-mobile-iframe {
        height: 480px;
    }
}

/* Desktop: never show the mobile bar */
@media (min-width: 769px) {
    .mobile-cta-bar {
        display: none;
    }
}

@keyframes ctaBarIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- 16px inputs prevent iOS Safari focus zoom ---- */
@media (max-width: 768px) {

    .admission-modal-form input,
    .admission-modal-form select,
    .enquiry-form input,
    .hero-admission-form input,
    .hero-admission-form select {
        font-size: 16px;
    }

    .admission-submit {
        font-size: 16px;
    }
}

/* Respect users who turn off animations: stop marquees & auto animations */
@media (prefers-reduced-motion: reduce) {
    .recruiter-logos-track {
        animation: none;
    }

    .mobile-cta-bar {
        animation: none;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Fix chatbot overlap with mobile CTA bar */
@media (max-width: 768px) {
    .chatbot-widget-container {
        bottom: 90px !important;
        z-index: 998 !important; /* Ensure it is behind/above appropriately, the bottom bar is z-index 999 so putting this below is fine, wait no, CTA bar is 999. We can just move it up */
    }
    
    .chatbot-window {
        height: 70vh !important;
        max-height: 70vh !important;
    }
}