/* Mobile-specific overrides only (do not modify existing desktop styles) */
@media (max-width: 1023px) {

    /* Ensure page doesn't get unexpected horizontal scroll from desktop rules */
    html,
    body {
        overflow-x: hidden !important;
    }

    /* Disable desktop-only visual transforms for content blocks on mobile */
    .pgl-content-grid .content-block,
    .pgl-content-grid .content-block.center-active {
        /* animate only visual properties smoothly; promoted to GPU for less jank */
        transition: transform 2000ms cubic-bezier(.16, .84, .24, 1), box-shadow 520ms cubic-bezier(.16, .84, .24, 1) !important;
        will-change: transform, box-shadow !important;

        transform: none !important;
        box-shadow: none !important;
    }

    /* Hide hover overlay images on mobile, keep markup intact */
    .hover-image-content-block {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Ensure cb-image behaves as normal inline content on mobile */
    .pgl-content-grid .content-block .cb-image {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        pointer-events: auto !important;
    }

    .pgl-content-grid .content-block .cb-image img {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Make arrow buttons images slightly larger and touch-friendly on mobile */
    .pgl-bottom .arrow-btn .arrow-img {
        width: 1.6em !important;
        height: auto !important;
    }

    .arrow-btn {
        padding: 0.6rem !important;
        touch-action: manipulation;
    }

    /* Improve readability: slightly larger base font on small screens */
    body,
    p,
    li {
        font-size: 1rem !important;
        line-height: 1.45 !important;
    }

    p {
        margin: 1rem;
    }

    .project-description {
        margin: 0;
    }

    .project-overline {
        margin: 1rem;
        margin-bottom: -1rem;
    }

    /* Ensure menu toggle stays visible and tappable */
    #menu-toggle {
        width: 48px;
        height: 48px;
        font-size: 1.6rem;
        line-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Make the discover button sit naturally on mobile */
    .discover-btn {

        transform: none !important;
        margin: 1.5rem auto !important;
        left: auto !important;
        top: 70vh !important;
    }

    /* Ensure galleries and image grids are single column to avoid overflow */
    .gallery-grid,
    .projects-grid,
    .projects-grid-large {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        margin: 0 auto !important;
        padding: 0 1rem !important;
    }

    /* Timeline animations (match desktop behavior) */
    .education-timeline {
        list-style: none;
        padding: 0;
        margin-top: 2rem;
    }

    .education-timeline li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 1.5rem;
        opacity: 0;
        /* start hidden */
        transform: translateY(20px);
        /* start slightly below */
        transition: opacity 0.8s ease, transform 0.8s ease;
        cursor: pointer;
    }

    .education-timeline li.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .timeline-icon {
        width: 50px;
        height: auto;
        margin-right: 1rem;
    }

    .timeline-content {
        max-width: 600px;
    }

    .timeline-content h3 {
        margin: 0;
        font-size: 1.2rem;
        font-weight: bold;
        color: #003D24;
    }

    .timeline-date {
        font-size: 0.9rem;
        color: #674D2C;
        margin-bottom: 0.5rem;
        display: block;
    }

    .timeline-content p {
        margin: 0;
        font-size: 1rem;
        color: #674D2C;
    }

    .timeline-image img {
        width: 100%;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        margin-top: 1rem;
    }

    /* Icon grid transitions — keep same reveal behavior as desktop */
    .icon-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem;
        justify-content: center;
        margin: 1rem;
    }

    .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 120px;
        min-height: 120px;
        flex: 0 0 auto;
    }

    .icon-item img {
        width: 80px;
        height: 80px;
        object-fit: contain;
        display: block;
        opacity: 0;
        transform: translate3d(0, 20px, 0);
        transition: opacity 0.6s ease, transform 0.6s ease;
        will-change: opacity, transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .icon-grid .icon-item p {
        text-align: center;
        width: 100%;
        margin-top: 0.5rem;
        color: #674D2C;
        font-size: 1rem;
        line-height: 1.2;
    }

    .icon-grid img.visible {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) !important;
    }

    /* Keep the hidden state preserving layout space */
    .icon-grid img.hidden {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 0 !important;
        transform: translate3d(0, 20px, 0) !important;
    }

    /* Respect reduced motion preference */
    @media (prefers-reduced-motion: reduce) {

        .education-timeline li,
        .timeline-item,
        .icon-item img {
            transition: none !important;
            animation: none !important;
            transform: none !important;
        }
    }

    /* Begin: Projects large-grid rules copied from style.css so mobile uses same visuals & behaviour */

    /* desktop-style large projects grid applied on mobile to match visuals */
    .projects-grid-large {
        display: grid;
        /* originally: grid-template-columns: repeat(2, 1fr); on desktop.
       Use single-column flow for mobile but keep the same inner layout rules below */
        grid-template-columns: 1fr;
        gap: 1rem;
        width: 100% !important;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
    }

    .projects-grid-large .carousel-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
        border-radius: 15px;
        overflow: hidden;
        border: 5px solid #372417;
        background-color: #fff;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .projects-grid-large .carousel-item:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .projects-grid-large .carousel-item img {
        width: 100%;
        height: auto;
        object-fit: cover;
        aspect-ratio: 16 / 9;
    }

    .projects-grid-large .carousel-item h3 {
        margin-top: 1rem;
        font-size: 1.5rem;
        color: #59714B;
    }

    .projects-grid-large .carousel-item .project-description {
        font-size: 1rem;
        color: #674D2C;
        text-align: left;
        margin-top: -0.5rem;
    }

    /* pgl-top / middle / bottom layout copied */
    .pgl-top-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .projects-grid-large .pgl-middle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* pgl-content-grid — horizontal scroll area containing content-blocks */
    .pgl-content-grid {
        z-index: 4;
        display: flex !important;
        flex-direction: row !important;
        align-self: end;
        justify-content: flex-start !important;
        gap: 0 !important;
        width: 100% !important;

        box-sizing: border-box !important;
        overflow-x: auto !important;

        position: relative;
        padding-bottom: 20px;
        padding-top: 20px;
        bottom: -20px;
        width: 100vw !important;
        max-width: 100vw !important;
        padding-inline: 0 !important;
        /* keep blocks flush */
        scroll-padding-inline: 0 !important;
        box-sizing: border-box !important;
        overscroll-behavior-x: contain;
    }

    .projects-grid-large .pgl-content-grid::-webkit-scrollbar {
        display: none;
    }

    /* content-block sizing and visual rules (copied) */
    .projects-grid-large .content-block {
        flex: 0 0 auto !important;
        height: 20rem !important;
        max-height: 100% !important;
        box-sizing: border-box !important;
        align-self: center !important;
        background-color: #FFF8E7;
        border: 1px solid #674D2C !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 1.25rem !important;
        width: 30%;
        cursor: pointer;
        margin-right: 1rem;
        border-radius: 10px;
    }

    /* larger variant used on bigger mobile viewports */
    .projects-grid-large .content-block.large {
        height: min(34rem, calc((100vh - 4rem) * 0.55)) !important;
        max-height: min(34rem, calc((100vh - 4rem) * 0.55)) !important;
    }

    /* keep text left-aligned inside blocks where appropriate */
    .projects-grid-large .content-block h4,
    .projects-grid-large .content-block p {
        text-align: left !important;
        margin: 1.2rem 0 -.8rem 0 !important;
        color: inherit !important;
    }

    /* cb-image scaling inside content-block */
    .projects-grid-large .content-block .cb-image {
        width: auto !important;
        height: calc((min(34rem, calc((100vh - 4rem) * 0.55))) * 0.58) !important;
        aspect-ratio: 1 / 1;
        box-sizing: border-box !important;
        margin-bottom: 0.75rem;
    }

    .projects-grid-large .content-block .cb-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 10px !important;
        display: block !important;
    }

    /* visually emphasize center-active blocks (allow on mobile too if desired) */
    .pgl-content-grid .content-block {
        transition: transform 260ms cubic-bezier(.22, .9, .27, 1), box-shadow 260ms ease;
        will-change: transform;
        transform-origin: 50% 50%;
    }

    .pgl-content-grid .content-block.center-active {
        transform: scaleY(1.05);
        z-index: 3;
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
        overflow-y: visible;
    }

    /* pgl-bottom area (nav controls) */
    .pgl-bottom {
        display: flex !important;
        flex-direction: row;
        justify-content: center;
        padding: 1.25rem 3rem !important;
        background: transparent !important;
        color: inherit !important;
    }

    .pgl-bottom-inner {
        display: flex;
        gap: 1rem;
        align-items: center;
        z-index: 20;
    }

    .pgl-bottom .arrow-btn {
        background: transparent;
        border: none;
        font-size: 2rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ensure buttons/images remain touch friendly */
    .pgl-bottom .arrow-btn .arrow-img {
        width: 2rem;
        height: auto;
        display: block;
    }

    /* Mobile-specific projects grid: nearly full-width cards and center snap */
    :root {
        /* mobile block desired width; tweak as needed (keeps a small gutter) */
        --pgl-mobile-block-w: min(92vw, 720px);
        --pgl-mobile-gap: 1rem;
    }

    .projects-grid-large {
        /* ensure the outer grid doesn't constrain the horizontal scroller */
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    /* horizontal scroller: enable snapping and smooth touch scrolling */
    .pgl-content-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* allow first/last card to center by adding equal inline padding */
        padding-inline: calc((100vw - var(--pgl-mobile-block-w)) / 2);
        /* when programmatically scrolling, ensure the grid centers items correctly */
        scroll-padding-inline: calc((100vw - var(--pgl-mobile-block-w)) / 2);
        box-sizing: border-box !important;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /* Make each block almost full viewport width and snap to center */
    .projects-grid-large .content-block {
        flex: 0 0 var(--pgl-mobile-block-w) !important;
        width: var(--pgl-mobile-block-w) !important;
        max-width: var(--pgl-mobile-block-w) !important;
        height: auto !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        /* spacing handled by gap */
        scroll-snap-align: center;
        scroll-snap-stop: always;
        border-radius: 10px;
    }

    /* if center-active visual emphasis is desired on mobile, keep it subtle */
    .pgl-content-grid .content-block.center-active {
        transform: none !important;
        /* avoid heavy scaling on narrow screens */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10) !important;
        z-index: 3 !important;
    }

    /* ensure images inside scale to block's new size */
    .projects-grid-large .content-block .cb-image,
    .projects-grid-large .content-block .cb-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    /* reduce overscroll bounce effect interfering with snap on some devices */
    .pgl-content-grid {
        overscroll-behavior-x: contain;
    }

    /* --- Force full-bleed projects grid and blocks on mobile --- */

    /* Make the outer grid flush with the viewport and remove ancestor gutters */
    .projects-grid-large {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-inline: 0 !important;
        /* override generic padding */
        box-sizing: border-box !important;
    }

    /* Scroller: remove inline padding and gaps that create visible side gutters */


    /* Each content block becomes full viewport width (no white space left/right) */
    .projects-grid-large .content-block {
        flex: 0 0 70vw !important;
        width: 70vw !important;
        max-width: 70vw !important;
        box-sizing: border-box !important;
        /* include border/padding in width */
        margin-right: 1rem !important;
        padding: 1rem !important;
        /* internal gutter only */
        border-radius: 0.5rem !important;
        /* optional visual radius */
        scroll-snap-align: center;
    }

    .projects-grid-large .content-block:nth-of-type(1) {
        margin-left: 1rem !important;
    }

    /* Ensure images inside blocks cannot overflow */
    .projects-grid-large .content-block .cb-image,
    .projects-grid-large .content-block .cb-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Keep last block yellow (still full-bleed) */
    .projects-grid-large .content-block:last-child {
        background-color: #E3C140 !important;
        border-color: #E3C140 !important;
        color: #003D24 !important;
    }

    /* Make the scroller determine the height and force all children to stretch to it */
    .pgl-content-grid {
        align-items: stretch !important;
        /* stretch children to the scroller height (the tallest child defines the height) */
        /* ensure the scroller can grow/shrink with its content */
        height: auto !important;
        min-height: 0 !important;
    }

    /* Ensure blocks don't have fixed heights on mobile and will stretch equally */
    .projects-grid-large .content-block {
        display: flex !important;
        flex-direction: column !important;
        align-self: stretch !important;
        /* stretch to the scroller height */
        height: auto !important;
        /* override any fixed heights */
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    /* Keep images / image wrappers from forcing overflow and allow text areas to size naturally */
    .projects-grid-large .content-block .cb-image,
    .projects-grid-large .content-block .cb-image img {
        flex: 0 0 auto !important;
        /* image area keeps its intrinsic height */
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Make textual content able to grow/shrink inside the block, without changing block sizing rules */
    .projects-grid-large .content-block>h4,
    .projects-grid-large .content-block>p {
        flex: 0 0 auto !important;
        margin: 0.5rem 0 !important;
        box-sizing: border-box !important;
    }

    /* If blocks contain expandable descriptions, ensure they expand the scroller height,
     which will then propagate to all blocks because of align-items: stretch */
    .projects-grid-large .content-block .timeline-description,
    .projects-grid-large .content-block .expandable,
    .projects-grid-large .content-block .more-content {
        /* no forced max-height here — let content expand scroller */
        max-height: none !important;
    }

    /* Safety: remove any leftover fixed height declarations that could conflict */
    .projects-grid-large .content-block[style],
    .projects-grid-large .content-block {
        /* already set above, but repeat authoritative override */
        height: auto !important;
        min-height: 0 !important;
    }

    /* Mobile: smoother grow animation for the centered content-block (grow only, no vertical shift) */
    .pgl-content-grid .content-block {
        /* animate visual transform and box-shadow smoothly */
        transition: transform 360ms cubic-bezier(.22, .9, .27, 1), box-shadow 360ms cubic-bezier(.22, .9, .27, 1) !important;
        will-change: transform, box-shadow !important;
        transform-origin: 50% 50% !important;
        /* grow uniformly from the center */
    }

    /* Smoother, GPU-backed animation for center block (override previous rules) */
    .pgl-content-grid .content-block {
        /* longer duration + smoother bezier, animate only visual properties */
        transition: transform 520ms cubic-bezier(.16, .84, .24, 1), box-shadow 520ms cubic-bezier(.16, .84, .24, 1) !important;
        will-change: transform, box-shadow !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        transform-origin: 50% 50% !important;
        /* grow uniformly from center */
        /* force GPU compositing to reduce repaint jank */
        transform: translateZ(0);
    }

    .pgl-content-grid .content-block.center-active {
        /* pure scale (no translate), promoted to GPU */
        transform: scaleY(1.05) translateZ(0) !important;
        /* softer shadow so shadow animation is cheap */
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12) !important;
        z-index: 6 !important;
    }

    /* Respect reduced motion preference */
    @media (prefers-reduced-motion: reduce) {

        .pgl-content-grid .content-block,
        .pgl-content-grid .content-block.center-active {
            transition: none !important;
            transform: none !important;
            box-shadow: none !important;
        }
    }

    /* Ensure each block can host a framed image at the top (reserve space) */
    .projects-grid-large .content-block {
        position: relative !important;
        padding-top: 4.5rem !important;
        /* reserve space for the framed image */
        box-sizing: border-box !important;
    }

    /* Hover image: hidden by default on mobile, shown when block is 'clicked' */
    .projects-grid-large .content-block .hover-image-content-block {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 240ms ease, transform 240ms ease !important;
        position: absolute !important;
        top: 0.6rem !important;
        left: 50% !important;
        width: 84px !important;
        height: 84px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        border: 3px solid #674D2C !important;
        background: #FFF8E7 !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12) !important;
        z-index: 10 !important;
        pointer-events: none !important;
    }

    /* When a block is activated (clicked), show the framed hover image */
    .projects-grid-large .content-block.clicked .hover-image-content-block {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        object-fit: cover !important;
    }

    /* Lees meer button — hidden by default, visible when .clicked */
    .projects-grid-large .content-block .cb-more-btn {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        background: #003D24 !important;
        color: #FFF8E7 !important;
        border: 0 !important;
        padding: 0.6rem 1rem !important;
        border-radius: 8px !important;
        font-family: "dico-code-one", sans-serif !important;
        font-size: 1rem !important;
        z-index: 12 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 220ms ease !important;
    }

    .projects-grid-large .content-block.clicked .cb-more-btn {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Reduce main cb-image size so it sits under the framed hover image */
    .projects-grid-large .content-block .cb-image {
        width: 86% !important;
        height: auto !important;
        max-height: 120px !important;
        margin: 0.6rem auto 0.6rem auto !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        flex: 0 0 auto !important;
    }

    .projects-grid-large .content-block .cb-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Restore full-bleed hover image and keep main image fully visible */
    .projects-grid-large .content-block {
        position: relative !important;
        padding-top: 0 !important;
        /* no reserved framed area */
        box-sizing: border-box !important;
        overflow: hidden !important;
        border-radius: 0.5rem !important;
    }

    /* Hover image covers the entire block when active (hidden by default) */
    .projects-grid-large .content-block .hover-image-content-block {
        display: none !important;
        /* hidden until clicked */

        inset: 0 !important;
        /* top:0; right:0; bottom:0; left:0 */
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* fill block */
        border-radius: inherit !important;
        /* match the block radius */

        border: none !important;

        z-index: 12 !important;
        opacity: 0 !important;
        transition: opacity 260ms ease !important;
        pointer-events: none !important;
        /* allow clicks to reach the button beneath, if needed */
    }

    /* When block is activated, show the full-cover hover image */
    .projects-grid-large .content-block.clicked .hover-image-content-block {

        opacity: 1 !important;
        visibility: visible !important;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Keep the main cb-image fully visible (no forced small size) */
    .projects-grid-large .content-block .cb-image {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 0 0.6rem 0 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        flex: 0 0 auto !important;
    }

    .projects-grid-large .content-block .cb-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        /* ensure image fully visible inside its box */
        display: block !important;
    }

    /* Smaller "Lees meer" button: bottom-center, visible when .clicked */
    .projects-grid-large .content-block .cb-more-btn {
        position: absolute !important;
        left: 50% !important;
        bottom: 0.9rem !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        background: #003D24 !important;
        color: #FFF8E7 !important;
        border-width: 1rem;
        border-style: solid;
        border-color: #FFF8E7;
        padding: 0.35rem 0.6rem !important;
        /* smaller */
        border-radius: 0 !important;
        font-family: "dico-code-one", sans-serif !important;
        font-size: 0.9rem !important;
        /* slightly smaller text */
        z-index: 14 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 180ms ease !important;
    }

    .projects-grid-large .content-block.clicked .cb-more-btn {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Respect reduced motion preference */
    @media (prefers-reduced-motion: reduce) {

        .projects-grid-large .content-block .hover-image-content-block,
        .projects-grid-large .content-block .cb-more-btn,
        .projects-grid-large .content-block .cb-image {
            transition: none !important;
        }
    }

    /* Final authoritative fix: force hover image to fully cover the content block on mobile,
   and ensure the cb-image is behind it while the Lees meer button sits on top. */
    @media (max-width: 1023px) {

        /* Ensure content-block is positioned for absolute children */
        .projects-grid-large .content-block,
        .pgl-content-grid .content-block {
            position: relative !important;
            overflow: hidden !important;
        }

        /* Force the hover image to absolutely fill the block (override any earlier framed/partial sizing) */
        .projects-grid-large .content-block>.hover-image-content-block,
        .pgl-content-grid .content-block>.hover-image-content-block {
            position: absolute !important;
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            display: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
            border-radius: inherit !important;
            z-index: 110 !important;
            /* below the button but above block content */
            pointer-events: none !important;
            transition: opacity 240ms ease !important;
        }

        /* Show the overlay fully when the block has .clicked */
        .projects-grid-large .content-block.clicked>.hover-image-content-block,
        .pgl-content-grid .content-block.clicked>.hover-image-content-block {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        /* Keep the main cb-image behind the overlay */
        .projects-grid-large .content-block .cb-image,
        .pgl-content-grid .content-block .cb-image {
            position: relative !important;
            z-index: 100 !important;
        }

        /* Ensure Lees meer button always sits above the overlay and remains clickable */
        .projects-grid-large .content-block .cb-more-btn,
        .pgl-content-grid .content-block .cb-more-btn {
            z-index: 1000 !important;
            pointer-events: auto !important;
        }

    }

    /* Authoritative mobile override: make hover image fill the entire content-block (same behavior as style.css) */
    @media (max-width: 1023px) {

        /* ensure the content-block provides a positioning context */
        .projects-grid-large .content-block,
        .pgl-content-grid .content-block {
            position: relative !important;
            overflow: hidden !important;
            padding-top: 0 !important;
            /* remove any reserved framed space */
        }

        /* force the hover image to absolutely fill the block and behave like desktop */
        .projects-grid-large .content-block .hover-image-content-block,
        .pgl-content-grid .content-block .hover-image-content-block {
            position: absolute !important;
            inset: 0 !important;
            /* top:0; right:0; bottom:0; left:0 */
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            /* fill the block without distortion */
            border: none !important;
            /* remove framed border */
            border-radius: inherit !important;
            display: block !important;
            opacity: 0 !important;
            visibility: hidden !important;
            z-index: 110 !important;
            /* sit above block content but below the button */
            pointer-events: none !important;
            /* allow clicks to reach button */
            transition: opacity 260ms ease !important;
        }

        /* When activated, show the overlay fully */
        .projects-grid-large .content-block.clicked .hover-image-content-block,
        .pgl-content-grid .content-block.clicked .hover-image-content-block {
            opacity: 1 !important;
            visibility: visible !important;
        }

        /* Ensure main image sits behind the overlay */
        .projects-grid-large .content-block .cb-image,
        .pgl-content-grid .content-block .cb-image {
            position: relative !important;
            z-index: 100 !important;
        }

        /* Ensure Lees meer button stays above overlay and is clickable */
        .projects-grid-large .content-block .cb-more-btn,
        .pgl-content-grid .content-block .cb-more-btn {
            z-index: 120 !important;
            pointer-events: auto !important;
        }

    }

    /* Ensure "Lees meer" button is inert when hidden and clickable only when visible (mobile) */
    @media (max-width: 1023px) {

        /* default: button not interactive */
        .projects-grid-large .content-block .cb-more-btn,
        .pgl-content-grid .content-block .cb-more-btn {
            pointer-events: none !important;
            cursor: default !important;
            user-select: none !important;
        }

        /* when the block is activated (visible), enable the button */
        .projects-grid-large .content-block.clicked .cb-more-btn,
        .pgl-content-grid .content-block.clicked .cb-more-btn {
            pointer-events: auto !important;
            cursor: pointer !important;
            user-select: auto !important;
        }
    }

    /* Make the last content-block non-interactive on mobile and ensure no lees-meer button is visible */
    .projects-grid-large .content-block:last-child {
        pointer-events: none !important;
        cursor: default !important;
        /* keep visual appearance but disable interactions */
    }

    /* If a button was accidentally present, hide it on mobile for the last block */
    .projects-grid-large .content-block:last-child .cb-more-btn {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Authoritative: make hover image fill the full content-block and be centered */
    .projects-grid-large .content-block,
    .pgl-content-grid .content-block {
        position: relative !important;
        overflow: hidden !important;
        padding-top: 0 !important;
        /* ensure no reserved framed area interferes */
    }

    .projects-grid-large .content-block .hover-image-content-block,
    .pgl-content-grid .content-block .hover-image-content-block {
        position: absolute !important;
        inset: 0 !important;
        /* top:0; right:0; bottom:0; left:0 */
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* preserve aspect, cover whole area */
        object-position: center center !important;
        /* center the image content */
        border: none !important;
        border-radius: inherit !important;
        display: block !important;
        /* present in DOM; visibility controlled via opacity */
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: 110 !important;
        /* above block content but below the button */
        pointer-events: none !important;
        /* allow clicks to reach the button on top */
        transition: opacity 220ms ease !important;
    }

    /* Reveal overlay when block is activated */
    .projects-grid-large .content-block.clicked .hover-image-content-block,
    .pgl-content-grid .content-block.clicked .hover-image-content-block {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Layering: ensure main image sits behind the overlay and the button sits above it */
    .projects-grid-large .content-block .cb-image,
    .pgl-content-grid .content-block .cb-image {
        position: relative !important;
        z-index: 100 !important;
    }

    .projects-grid-large .content-block .cb-more-btn,
    .pgl-content-grid .content-block .cb-more-btn {
        z-index: 1200 !important;
        /* well above overlay */
        pointer-events: auto !important;
    }

    /* Final tweaks: darken hover-image and center the "Lees meer" button on mobile */
    @media (max-width: 1023px) {

        /* Ensure the hover image covers and is visually subdued */
        .projects-grid-large .content-block .hover-image-content-block,
        .pgl-content-grid .content-block .hover-image-content-block {
            /* already absolute/inset:0 from earlier rules; reinforce centering of image content */
            object-position: center center !important;
            /* darken the image so overlay text/button is readable */
            filter: brightness(0.34) contrast(1) saturate(0.95) !important;
            -webkit-filter: brightness(0.34) contrast(1) saturate(0.95) !important;
            /* slightly blur optional — comment out if undesired:
       filter: brightness(0.34) contrast(1) saturate(0.95) blur(0.25px) !important; */
        }

        /* Center the Lees meer button in the middle of the block when visible */
        .projects-grid-large .content-block .cb-more-btn,
        .pgl-content-grid .content-block .cb-more-btn {
            /* prepare centered placement (default: hidden / inert) */
            left: 50% !important;
            top: 50% !important;
            bottom: auto !important;
            transform: translate(-50%, -50%) !important;
            /* slightly smaller, unobtrusive pill */
            padding: 0.35rem 0.6rem !important;
            border-radius: 0 !important;
            font-size: 0.9rem !important;
            /* keep accessible stacking above the hover-image */
            z-index: 1300 !important;
            /* ensure it becomes clickable only when .clicked (existing mobile rules enable pointer-events on .clicked) */
        }

        /* when shown ensure it's visible and interactive (existing .clicked rules will set opacity/pointer-events) */
        .projects-grid-large .content-block.clicked .cb-more-btn,
        .pgl-content-grid .content-block.clicked .cb-more-btn {
            opacity: 1 !important;
            pointer-events: auto !important;
        }
    }

    input,
    textarea,
    button {
        width: fit-content;
        padding: 0.5rem;
        font-size: 1rem;
    }

    /* Force Lees meer button to have a slim white border and no radius on mobile (override previous mobile rules) */
    .projects-grid-large .content-block .cb-more-btn,
    .pgl-content-grid .content-block .cb-more-btn {
        border: 1px solid #FFF8E7 !important;
        border-radius: 0 !important;
        /* remove accidental large border declarations */
        border-width: .5px !important;
        border-style: solid !important;
        border-color: #FFF8E7 !important;
        box-sizing: border-box !important;
    }

    /* Mobile: redesigned projects-grid layout — center big image and place overlay centered on top */
    @media (max-width: 1023px) {

        /* Stack project entries vertically and center content */
        .projects-grid {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 1rem !important;
            width: 100% !important;
            padding: 0 1rem !important;
            box-sizing: border-box !important;
        }

        /* Make image-wrapper a positioned container so overlay can be absolutely centered */
        .projects-grid .image-wrapper {
            position: relative !important;
            width: 100% !important;
            max-width: 720px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: transparent !important;
            padding: 0 !important;
        }

        /* Big/base image — sits below the overlay */
        .projects-grid .image-wrapper .big-image {
            position: relative !important;
            z-index: 1 !important;
            width: 100% !important;
            height: auto !important;
            object-fit: cover !important;
            display: block !important;
        }

        /* Overlay image — absolutely centered on top of the big image */
        .projects-grid .image-wrapper .small-image {
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            z-index: 2 !important;
            width: min(60%, 280px) !important;
            /* responsive size */
            height: auto !important;
            object-fit: contain !important;
            pointer-events: none !important;
            /* allow taps to reach underlying controls if needed */
        }

        /* If your overlay uses the hover-image-content-block inside content-blocks, ensure it sits above cb-image */
        .projects-grid .content-block .cb-image {
            position: relative !important;
            z-index: 1 !important;
        }

        .projects-grid .content-block .hover-image-content-block {
            position: absolute !important;
            inset: 0 !important;
            /* fill the content-block */
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            object-position: center center !important;
            z-index: 3 !important;
            /* above cb-image */
            pointer-events: none !important;
        }

    }

    .project-item,
    .carousel-item {
        background-color: transparent;
        border: none;
        /* Set a uniform background color */
    }

    /* Mobile: ensure image block appears before the left-content block in vertical flow.
   Prefer :has() when available, otherwise fall back to the common two-item layout (nth-child(2)). */
    @media (max-width: 1023px) {

        /* make sure projects-grid is a column flex container (already set elsewhere, reinforce here) */
        .projects-grid {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
        }

        /* Default order (neutral) */
        .projects-grid .project-item {
            order: 0 !important;
        }

        /* If the browser supports :has(), put any project-item that contains an .image-wrapper first */
        @supports selector(:has) {
            .projects-grid .project-item:has(.image-wrapper) {
                order: -1 !important;
            }
        }

        /* Fallback for the current markup (image is the 2nd project-item) */
        .projects-grid .project-item:nth-child(2) {
            order: -1 !important;
        }

        /* Small spacing adjustment so the stacked items look balanced */
        .projects-grid .project-item {
            margin-top: 0.5rem !important;
            margin-bottom: 0.5rem !important;
        }
    }

    /* Mobile: projects-grid sits on a green rounded panel */
    @media (max-width: 1023px) {

        .projects-grid {
            /* keep it centered & full width inside viewport padding */
            height: calc(fit-content - var(--menu-header-h)) !important;
            max-width: 100vw !important;
            margin-top: 4rem !important;
            padding: 1rem !important;
            /* inner gutter so children don't touch edges */
            background: #003D24 !important;
            /* green used elsewhere in the design */
            border-radius: 16px !important;
            /* rounded corners */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
            overflow: hidden !important;
            /* ensure children are clipped to the rounded panel */
            box-sizing: border-box !important;
        }

        /* Make sure children preserve their intended backgrounds (transparent) so the green panel shows */
        .projects-grid .project-item,
        .projects-grid .image-wrapper,
        .projects-grid .project-item *,
        .projects-grid .image-wrapper * {
            background: transparent !important;
            background-color: transparent !important;
            border: none !important;
            box-shadow: none !important;

        }

        .scroll-more {
            margin-top: 4rem;
        }

        /* If any child used margins to create side gutters, reduce them slightly so they fit within the panel */
        .projects-grid .project-item {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* Keep scroller behavior intact for horizontal scrollers placed inside this panel */
        .projects-grid .pgl-content-grid,
        .projects-grid .projects-grid-large,
        .projects-grid .pgl-content-grid {
            width: 100% !important;
            padding-inline: 0 !important;
        }

    }

    #projects {
        background-color: #FFF8E7;
        /* Bisque */
        padding: 1rem;
        /* Add padding to ensure content fits */
        height: auto;
        /* Allow height to grow based on content */
        overflow: visible;
        /* Prevent elements from being cut off */
    }

    @media (max-width: 1023px) {

        /* Ensure all text inside the projects-grid is white on mobile */


        /* Make sure links and visited links inside the grid are white and not underlined */
        .projects-grid a,
        .projects-grid a:link,
        .projects-grid a:visited {
            color: #FFF8E7 !important;
            text-decoration: none !important;
        }

        /* Ensure buttons and project-specific controls show white text */
        .projects-grid .cb-more-btn,
        .projects-grid .project-item-desktop-btn,
        .projects-grid .project-description,
        .projects-grid p,
        .projects-grid div {
            color: #FFF8E7 !important;
        }

        .projects-grid .project-item-desktop-btn,
        .projects-grid .project-description,
        .projects-grid h3,
        .projects-grid h4 {
            color: #E3C140;
        }


        /* If any inline SVGs are used as icons, make them inherit white */
        .projects-grid svg {
            fill: #FFF8E7 !important;
            color: #FFF8E7 !important;
        }

        .scroll-text .line1,
        .scroll-text .line2 {
            display: block;
            font-family: 'Taprom', sans-serif;
            color: #E3C140;
            font-size: clamp(1.6rem, 5.5vw, 4.5rem);
        }

    }

    /* Square desktop-link button used inside project items (mobile presentation) */
    .projects-grid .project-item-desktop-btn,
    .project-item-desktop-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: fit-content !important;
        height: fit-content;
        padding: 1rem !important;

        border: 1px solid #FFF8E7 !important;
        /* small white border */
        background: transparent !important;
        color: #FFF8E7 !important;
        /* ensure label/icon is visible on dark panel */
        text-decoration: none !important;
        box-sizing: border-box !important;

        border-radius: 0 !important;
        /* square corners */
        font-size: 0.9rem !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    /* If the button contains inline text on very small screens, allow slight scaling */
    .projects-grid .project-item-desktop-btn span,
    .project-item-desktop-btn span {
        display: inline-block !important;
        transform: translateY(-1px) !important;
    }

    /* Mobile: remove the project intro headings/paragraph so they don't show on small screens */
    @media (max-width: 1023px) {

        /* hide the top project heading, intro paragraph and the "Waar ik me..." subheading */
        #projects>h2,
        #projects>p,
        /* safest to hide the first h3 inside #projects (the "Waar ik me..." line) */
        #projects>h3:first-of-type {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
        }
    }

    /* Use a green arrow graphic for the arrow buttons on mobile.
     The actual <img class="arrow-img"> is hidden visually but remains in the DOM for accessibility. */
    .pgl-bottom .arrow-btn {
        background-image: url('images/greenArrow.png') !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 100% !important;
        /* ensure the button keeps its touch area */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.6rem !important;
        border: none !important;
    }

    /* Right arrow: flip the background so it points the other way */
    .pgl-bottom .arrow-btn.arrow-right {
        transform: scaleX(-1) !important;
        -webkit-transform: scaleX(-1) !important;
    }

    /* Hide the original img visually but keep it available to screen readers (not removed from DOM) */
    .pgl-bottom .arrow-btn .arrow-img {
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* Ensure left-content and everything inside it is left-aligned on mobile */
    .left-content,
    .projects-grid .left-content,
    .left-content * {
        text-align: left !important;
    }

    /* Make left-content layout align items to start (prevents centered flex alignment) */
    .left-content,
    .projects-grid .left-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    /* Ensure interactive elements keep readable alignment */
    .left-content a,
    .left-content h1,
    .left-content h2,
    .left-content h3,
    .left-content h4,
    .left-content p,
    .left-content .project-description {
        text-align: left !important;
    }

    /* Ensure the mobile menu header is always visible & interactive on small screens.
       Override any .hidden toggles JS may apply so the header remains accessible. */
    #menu-header {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4rem !important;
        padding: 0.5rem 1rem !important;
        background: #003D24 !important;
        color: #FFF8E7 !important;
        z-index: 1400 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        transition: none !important;
        /* keep it stable on mobile */
    }

    /* If JS adds the .hidden class, ensure the menu header remains visible anyway */
    #menu-header.hidden {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        max-height: none !important;
    }

    /* Keep menu logo and heading layout intact */
    #menu-header img {
        position: absolute !important;
        z-index: 1410 !important;
    }

    #menu-header h2 {
        display: none;
    }


    /* Make sure the menu-toggle is always visible, clickable and sits above the fixed menu header on mobile */
    #menu-toggle {
        display: inline-flex !important;
        position: fixed !important;
        top: 0.5rem !important;
        right: 1rem !important;
        width: 48px !important;
        height: 48px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        color: #FFF8E7 !important;
        z-index: 1600 !important;
        /* above #menu-header (which uses ~1400) */
        cursor: pointer !important;
        /* keep original transitions */
        transition: transform 0.3s ease, color 0.3s ease !important;
    }

    /* Preserve existing light-background behavior */
    #menu-toggle.light-background {
        color: #003D24 !important;
    }

    /* Give the menu-header some right padding so its content doesn't visually collide with the toggle */
    #menu-header {
        padding-right: 3.5rem !important;
    }

    /* Ensure toggle remains interactive even if JS toggles .hidden on the header */
    #menu-header.hidden+#menu-toggle,
    #menu-toggle {
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Stack the interactive title into two rows on mobile:
       keep labels clickable and preserve hover/focus interactions. */
    #title .title-canvas .interactive-title {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.15ch !important;

    }

    /* Reduce mobile letter size and ensure each letter is its own flex item */
    #title .title-canvas .interactive-title .title-letter {
        flex: 0 0 auto !important;
        font-size: clamp(2.2rem, 20vw, 6.5rem) !important;
        line-height: 1 !important;
        padding: 0 0.06em !important;
        margin: 0 !important;
        display: inline-block !important;
        white-space: nowrap !important;
    }

    /* Force a break between the two words by making the space element occupy a full row.
       Keep it visually hidden so layout changes only. */
    #title .title-canvas .interactive-title .title-space {
        flex-basis: 100% !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Slightly reduce hover scale on mobile to avoid overflow */
    #title .title-canvas .interactive-title .title-letter:hover {
        transform: scale(1.04) !important;
    }

    /* ensure checked/alt states still respect the smaller size */
    .letter-toggle:checked+.title-letter,
    .title-letter.alt {
        transform: scale(1.02) !important;
        font-size: clamp(2.2rem, 9vw, 6.5rem) !important;
    }

    section#title {
        height: calc(100vh - var(--menu-header-h)) !important;
        min-height: 90vh !important;
        display: flex;
        flex-direction: column;
        /* meestal nodig */
        justify-content: center;
        /* verticaal centreren als de container hoogte heeft */
        align-items: center;
        padding: 0rem !important;
    }

    /* Mobile sizing vars used by the title/borders */
    :root {
        /* CSS now reads the measured header height set by JS (--menu-header-height).
		   If JS hasn't run yet, fall back to 4rem. */
        --menu-header-h: var(--menu-header-height, 4rem);
        --title-bg-height: calc(100vh - var(--menu-header-h));
        --title-bg-extra: 8vh;
        /* extra breathing room below borders */
        --decor-gap: 2rem;
        /* inner gap between outer & inner border */
        /* make the decorative block inset from the viewport by a total of 1rem (0.5rem each side) */
        --decor-outer-w: calc(100vw - 1rem);
        /* outer height equals remaining viewport under the fixed header, minus optional extra */
        --decor-outer-h: calc((100vh - var(--menu-header-h)) - var(--title-bg-extra));
    }

    /* Ensure the title section occupies the usable viewport below the fixed header */
    #title {
        /* set exact height = viewport minus header */
        min-height: var(--usable-h) !important;
        height: var(--usable-h) !important;
        /* push the title visually below the fixed header so centering is in the usable area */
        margin-top: var(--menu-header-h) !important;
        box-sizing: border-box !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        /* remove previous padding-top which disturbed centering */
        padding-top: 0 !important;
    }

    /* Outer decorative border — center inside #title and size from #title box (0.5rem inset each side) */
    #title::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* keep a total horizontal inset of 1rem (0.5rem each side) relative to #title */
        width: calc(100% - 1rem);
        height: calc(100% - 1rem);
        background: transparent;
        border: 3px solid #674D2C;
        box-sizing: border-box;
        pointer-events: none;
        z-index: 2;
        border-radius: 0;
    }

    /* Inner decorative border — same centering, inset by --decor-gap */
    #title::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* subtract outer inset (1rem) plus 2 * gap */
        width: calc(100% - 1rem - (2 * var(--decor-gap)));
        height: calc(100% - 1rem - (2 * var(--decor-gap)));
        background: transparent;
        border: 1px solid #674D2C;
        box-sizing: border-box;
        pointer-events: none;
        z-index: 3;
        border-radius: 30px;
    }

    /* Title background grid — center and size to match the inner decorative border */
    .title-bg-grid {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;

        /* match inner border size (same calc as ::before) */
        width: calc(100% - 1rem - (2 * var(--decor-gap)));
        height: calc(100% - 1rem - (2 * var(--decor-gap)));

        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 2rem;

        padding: 1rem;
        box-sizing: border-box;
        pointer-events: none;
        overflow: visible;
        /* allow stars to overflow the padding */
    }

    #contact h2 {
        color: #E3C140;
    }

    #menu-header:before {
        content: "";
        position: fixed;
        inset: 0;
        background: url(images/beige-paper.png) repeat;
        background-size: 50px 50px;
        opacity: 0.5;
        pointer-events: none;
        z-index: 100;
    }

    /* Ensure discover button stays visually centered on mobile and does not shift when tapped */
    #discover-btn,
    .discover-btn {
        /* center horizontally */
        left: 50% !important;
        transform: translateX(-50%) !important;
        /* preserve existing vertical placement */
        top: 70vh !important;
        margin: 1.5rem auto !important;
        /* ensure it sits above overlays/buttons */
        position: absolute !important;
        z-index: 1300 !important;
        /* avoid transition-caused jumps when tapped */
        transition: none !important;
        /* make transform changes cheap and predictable */
        will-change: transform !important;
    }

    /* Prevent click/focus states from changing position or showing unwanted outlines */
    #discover-btn:active,
    #discover-btn:focus,
    .discover-btn:active,
    .discover-btn:focus {
        transform: translateX(-50%) !important;
        outline: none !important;
        box-shadow: none !important;
    }

}