/* ============================================================
   MeepMeep Games — Modern Overhaul
   Layered on top of style.css. Brand orange: #E48632.
   ============================================================ */

:root {
    --mm-orange: #E48632;
    --mm-orange-bright: #ffae5c;
}

/* Slightly looser default letter-spacing for body copy (explicit values still win). */
body {
    letter-spacing: 0.03em;
}

/* Team card: reveal caption when keyboard focus enters it, and show a
   visible focus ring on the LinkedIn link inside */
#team figure:focus-within > .team-caption {
    opacity: 1;
}
#team figure:focus-within > img {
    filter: blur(2px) brightness(0.6);
}
#team .team-caption ul li > a:focus-visible {
    outline: 2px solid var(--mm-orange);
    outline-offset: 3px;
    background: var(--mm-orange);
    border-color: var(--mm-orange);
    color: #111;
}

/* Hero pause/resume button (WCAG 2.2.2 — pause auto-rotating content).
   Diamond shape matching the .icon-diamond CTAs (rotated square, orange
   border, fills on hover). The button itself is rotated 45deg; the SVG
   inside is counter-rotated so the glyph stays upright. */
.hero-pause-btn {
    position: absolute;
    bottom: 32px;
    right: 32px;
    z-index: 30;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid var(--mm-orange);
    background: #0d0d0d;
    color: #fff;
    cursor: pointer;
    transform: rotate(45deg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.hero-pause-btn:hover {
    background: var(--mm-orange);
    border-color: #111;
    box-shadow: 0 0 18px rgba(228,134,50,0.5);
    color: #111;
}
.hero-pause-btn:focus-visible {
    outline: 2px solid var(--mm-orange);
    outline-offset: 4px;
}
.hero-pause-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    display: block;
    transform: rotate(-45deg); /* keep icon upright while button is rotated */
}
/* Toggle which icon is visible based on aria-pressed state */
.hero-pause-btn .icon-play { display: none; }
.hero-pause-btn[aria-pressed="true"] .icon-pause { display: none; }
.hero-pause-btn[aria-pressed="true"] .icon-play { display: block; }

/* When the hero is paused, freeze the ken-burns zoom animation */
.modern-hero.is-paused .hero-bg-stack .hero-bg {
    animation-play-state: paused;
}

/* Responsive 16:9 wrapper for embedded videos */
.video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}
.video-embed > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Accessibility: visually-hidden skip link that becomes visible on focus */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--mm-orange);
    color: #000;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: bold;
}
.skip-link:focus {
    top: 0;
    outline: 2px solid #fff;
}

/* Respect reduced-motion: pause hero crossfade & morphext animations */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

html {
    scroll-behavior: auto;
}

body {
    background: #07070a url(../images/bg.png) repeat;
}

/* Slightly wider site */
@media (min-width: 1200px) {
    .container {
        max-width: 1240px;
    }
}

/* Ambient orange glow on the page */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse at 20% 10%, rgba(228,134,50,0.05), transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(228,134,50,0.04), transparent 60%);
}

/* Nav stacking. .container kept untouched so Bootstrap modals (z 1050) escape it. */
footer {
    position: relative;
    z-index: 2;
}

#main-header {
    z-index: 1000;
}

.navbar.fixed-top {
    z-index: 1001;
}

/* Universal scroll-margin so anchor jumps clear the fixed navbar */
#about, #games, #whats-next, #team, #contact {
    scroll-margin-top: 60px;
}

/* ============================================================
   HERO
   ============================================================ */
#hero-section.modern-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    padding: 0;
}

    #hero-section.modern-hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 220px;
        background: linear-gradient(180deg, rgba(7,7,10,0) 0%, rgba(7,7,10,0.3) 35%, rgba(7,7,10,0.6) 65%, rgba(7,7,10,0.9) 100%);
        z-index: 4;
        pointer-events: none;
    }

.hero-bg-stack {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000;
}

    .hero-bg-stack .hero-bg {
        position: absolute;
        inset: -5%;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        transform: scale(1.05);
        animation: heroZoom 18s ease-in-out infinite alternate;
        will-change: opacity;
    }

        .hero-bg-stack .hero-bg.active {
            opacity: 1;
        }

@keyframes heroZoom {
    0% {
        transform: scale(1.05) translate3d(0,0,0);
    }

    100% {
        transform: scale(1.18) translate3d(-2%, -1%, 0);
    }
}

.hero-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(7,7,10,0.2) 0%, rgba(7,7,10,0.075) 30%, rgba(7,7,10,0.22) 70%, rgba(7,7,10,0.475) 100%), linear-gradient(90deg, rgba(7,7,10,0.2) 0%, rgba(7,7,10,0.05) 50%, rgba(7,7,10,0.2) 100%);
}

.hero-scanlines {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,0.01) 0 1px, transparent 1px 3px);
    pointer-events: none;
    mix-blend-mode: overlay;
}

.hero-content {
    position: relative;
    z-index: 4;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 24px;
}

.hero-text-backdrop {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 920px;
    padding: 0 12px;
}

    .hero-text-backdrop h2,
    .hero-text-backdrop .hero-studio {
        text-shadow: 0 2px 4px rgba(0,0,0,0.95), 0 4px 18px rgba(0,0,0,0.85), 0 0 40px rgba(0,0,0,0.6);
    }

/* Visually-hidden fallback h1 for SEO/SR (the logo image is the visible title) */
.hero-content h1.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.hero-content .hero-logo {
    display: block;
    max-width: min(720px, 88vw);
    width: 100%;
    height: auto;
    margin: 0 auto -64px auto;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.85)) drop-shadow(0 0 40px rgba(228,134,50,0.25));
    opacity: 0;
    animation: fadeUp 1s ease 0.4s forwards;
}

.hero-content h2.hero-subtitle {
    font-family: Urbanist, sans-serif;
    font-weight: 500;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    letter-spacing: 3px;
    color: #fff;
    margin: 4px 0 0 0;
    opacity: 0;
    animation: fadeUp 1s ease 0.6s forwards;
}

    .hero-content h2.hero-subtitle .cycle-word {
        color: var(--mm-orange);
        display: inline-block;
        min-width: 4ch;
    }

.hero-studio {
    margin-top: 42px;
    font-family: Atmospheric, Urbanist, sans-serif;
    color: #fff;
    font-size: clamp(0.9rem, 1.4vw, 1.15rem);
    letter-spacing: 3px;
    text-transform: none;
    opacity: 0;
    animation: fadeUp 1s ease 0.9s forwards;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ============================================================
   CTA BUTTONS — used in hero, game card, modal, project two
   ============================================================ */
.hero-cta-row {
    margin-top: 36px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    /* Offset margin-left helper of icon-diamond children to achieve perfect alignment */
    padding-right: 38px;
}

.hero-content .hero-cta-row {
    opacity: 0;
    animation: fadeUp 1s ease 1.1s forwards;
}

.hero-cta,
.hero-cta:visited,
.hero-cta:active,
.hero-cta:focus {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 30px;
    border: 1px solid var(--mm-orange);
    border-radius: 4px;
    background: rgba(228,134,50,0.08);
    color: #fff;
    text-decoration: none;
    font-family: Urbanist, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    backdrop-filter: blur(4px);
}

    .hero-cta:hover {
        background: var(--mm-orange);
        color: #111;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(228,134,50,0.35);
    }

    .hero-cta img {
        height: 24px;
        width: 24px;
        filter: brightness(0) invert(1);
        transition: filter 0.2s ease;
    }

    .hero-cta:hover img {
        filter: brightness(0);
    }

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    color: #fff;
    font-family: Urbanist, sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: bounce 2s ease-in-out infinite;
    transition: opacity 0.3s ease;
}

    .scroll-indicator.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .scroll-indicator .chev {
        width: 12px;
        height: 12px;
        border-right: 2px solid var(--mm-orange);
        border-bottom: 2px solid var(--mm-orange);
        transform: rotate(45deg);
    }

@keyframes bounce {
    0%, 100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, 8px);
    }
}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.row.heading h1,
.row.heading h2 {
    text-shadow: 0 0 24px rgba(228,134,50,0.15);
}

/* Demoted section headings (h2) should keep the visual weight of the old h1 */
.row.heading h2,
h2.next-title {
    font-size: 2.25rem; /* 36px — match original h1 */
    font-family: Atmospheric, Urbanist, sans-serif;
    letter-spacing: 5px;
    font-weight: normal;
}

/* ============================================================
   ABOUT
   ============================================================ */
#about {
    padding: 20px 0;
}

    #about p {
        font-size: 1.05rem;
        line-height: 1.8;
        color: #d8d8d8;
    }

/* ============================================================
   GAMES
   ============================================================ */
#games {
    padding: 80px 0 20px 0;
}
    /* first section after hero — needs breath */
    #games .game-card {
        margin-bottom: 0 !important;
    }

    /* Responsive Video Aspect Ratio Helper (solves mobile video cutoff) */
    #games .game-card-left a.js-video-button {
        position: relative;
        display: block;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
        height: 0;
        overflow: hidden;
        border-radius: 4px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(228,134,50,0.15);
    }

    #games .game-card-left iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 4px;
    }

    #games .game-card-right {
        background: linear-gradient(180deg, rgba(228,134,50,0.05), rgba(255,255,255,0.02));
        border-left: 2px solid var(--mm-orange);
        padding: 28px 32px;
    }

        #games .game-card-right .game-description {
            color: #d8d8d8;
            line-height: 1.65;
        }

        #games .game-card-right .hero-cta-row {
            flex-wrap: nowrap;
            justify-content: flex-end;
            gap: 10px;
            padding-right: 0; /* Reset global offset so right-aligned button sits flush on desktop */
        }

        #games .game-card-right .hero-cta {
            flex: 0 0 auto;
            padding: 10px 16px;
            font-size: 0.78rem;
        }

            #games .game-card-right .hero-cta.icon-diamond {
                padding: 11px 28px 11px 54px; /* match the hero icon-diamond exactly */
                font-size: 0.9rem;
            }

/* Platform Buttons Row */
.platform-buttons-row {
    margin: 40px 0;
}

    .platform-buttons-row .hero-cta-row {
        margin-top: 0;
    }

/* Screenshot grid */
.shot-showcase {
    margin: 24px 0 40px 0;
}

.shot-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 180px;
    gap: 14px;
}

    .shot-grid .shot {
        position: relative;
        overflow: hidden;
        border-radius: 4px;
        background: #111;
        cursor: pointer;
        box-shadow: 0 4px 18px rgba(0,0,0,0.5);
        transition: transform 0.4s ease, box-shadow 0.4s ease;
    }

        .shot-grid .shot img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease, filter 0.4s ease;
            filter: saturate(0.9) brightness(0.9);
        }

        .shot-grid .shot:hover img {
            transform: scale(1.08);
            filter: saturate(1.1) brightness(1.05);
        }

        .shot-grid .shot:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 38px rgba(0,0,0,0.7), 0 0 0 1px var(--mm-orange);
        }

        .shot-grid .shot.big {
            grid-column: span 8;
            grid-row: span 2;
        }

        .shot-grid .shot.tall {
            grid-column: span 4;
            grid-row: span 2;
        }

        .shot-grid .shot.wide {
            grid-column: span 8;
            grid-row: span 1;
        }

        .shot-grid .shot.small {
            grid-column: span 4;
            grid-row: span 1;
        }

/* ============================================================
   WHAT'S NEXT
   ============================================================ */
#whats-next {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 30px 0 50px 0;
    overflow: hidden;
    text-align: center;
}

    #whats-next::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 50%, rgba(228,134,50,0.10) 0%, transparent 65%);
        pointer-events: none;
    }

.next-inner {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}

.next-title {
    font-family: Atmospheric, Urbanist, sans-serif;
    font-size: clamp(2.8rem, 7vw, 6rem);
    letter-spacing: 10px;
    margin: 0 0 20px 0;
    color: #fff;
    text-shadow: 0 0 40px rgba(228,134,50,0.35), 0 2px 30px rgba(0,0,0,0.8);
}

.next-sub {
    color: #ccc;
    font-family: Urbanist, sans-serif;
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 40px;
}

/* ============================================================
   TEAM
   ============================================================ */
#team {
    padding: 30px 0;
}

    #team figure {
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 4px 18px rgba(0,0,0,0.5);
        transition: transform 0.4s ease, box-shadow 0.4s ease;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

        #team figure img {
            border-radius: 0 !important;
            border-bottom: none !important;
            filter: saturate(0.9) brightness(0.9);
            transition: transform 0.6s ease, filter 0.4s ease;
            width: 100% !important;
            display: block;
        }

        #team figure:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 38px rgba(0,0,0,0.7), 0 0 0 1px var(--mm-orange);
        }

            #team figure:hover > img {
                transform: scale(1.08);
                filter: saturate(1.1) brightness(1.05);
            }

    #team .team-caption {
        background: linear-gradient(180deg, rgba(7,7,10,0.88) 0%, rgba(7,7,10,0.78) 100%);
        border-left: none !important;
        padding: 16px 14px !important;
    }

        #team .team-caption p {
            font-size: 0.9rem;
            line-height: 1.5;
        }

    #team .team-name {
        margin-top: 14px;
    }

    #team .team-caption ul {
        margin-top: 20px;
    }

        #team .team-caption ul li {
            margin: 0 8px;
        }

            #team .team-caption ul li > a,
            #team .team-caption ul li > a:focus {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 34px; /* Size adjusted so the diagonal aligns visually */
                height: 34px;
                border-radius: 0; /* Flat edges for a sharp diamond shape */
                border: 1px solid rgba(228,134,50,0.5);
                background: #0d0d0d; /* Solid fill keeps behind-lines hidden */
                color: #fff;
                text-decoration: none;
                transform: rotate(45deg); /* Rotates the box into a diamond shape */
                transition: all 0.25s ease;
            }

                #team .team-caption ul li > a i {
                    font-size: 1.15rem !important;
                    line-height: 1;
                    transform: rotate(-45deg); /* Rotates the LinkedIn icon back so it stays upright */
                }

                #team .team-caption ul li > a:hover {
                    background: var(--mm-orange);
                    border-color: var(--mm-orange);
                    color: #111;
                    transform: rotate(45deg) scale(1.1); /* Retains rotation while scaling up slightly */
                    box-shadow: 0 0 15px rgba(228, 134, 50, 0.4);
                }

/* ============================================================
   GENERIC helper layouts & animation reveal-on-scroll
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

    .reveal.in-view {
        opacity: 1;
        transform: translateY(0);
    }

/* Flexible Line Break utility inside standard flex rows */
.flex-break {
    flex-basis: 100%;
    height: 0;
}

/* ============================================================
   NAV
   ============================================================ */
.navbar-dark.scrolled {
    background-color: rgba(7,7,10,0.7);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(228,134,50,1);
}
/* Shrink logo + tighten navbar height */
.navbar.fixed-top {
    padding-top: 4px;
    padding-bottom: 4px;
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

#logo img {
    height: 40px;
    width: auto;
}

.navbar-dark .navbar-nav .nav-link {
    position: relative;
    padding: 8px 14px !important;
}

    .navbar-dark .navbar-nav .nav-link::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 4px;
        height: 2px;
        background: var(--mm-orange);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.25s ease;
    }

    .navbar-dark .navbar-nav .nav-link:hover::after {
        transform: scaleX(1);
    }

/* ============================================================
   FOOTER
   ============================================================ */
#main-footer {
    margin-top: 60px;
}

/* ============================================================
   MODAL
   ============================================================ */
.game-modal {
    z-index: 1060 !important;
}

.modal-backdrop {
    z-index: 1055 !important;
}

.game-modal .modal-dialog {
    margin-top: 110px;
    margin-bottom: 60px;
}

.game-modal .modal-content {
    background: #14141a !important;
    border: 1px solid rgba(228,134,50,0.4);
    box-shadow: 0 30px 80px rgba(0,0,0,0.8);
    border-radius: 6px;
    color: #f0f0f0;
}

.game-modal .modal-body {
    color: #f0f0f0;
    background: #14141a;
}

    .game-modal .modal-body p {
        font-size: 1rem;
        line-height: 1.65;
        color: #f0f0f0;
    }

.game-modal .modal-header {
    position: relative;
    background: linear-gradient(180deg, rgba(228,134,50,0.15), rgba(0,0,0,0));
    background-image: none !important;
    height: auto !important;
    padding: 22px 28px;
    border-bottom: 1px solid rgba(228,134,50,0.4);
}

.game-modal .modal-title {
    margin: 0 !important;
    color: #fff;
}

.game-modal .close {
    position: absolute;
    top: 12px;
    right: 16px;
    margin: 0 !important;
    padding: 4px 10px !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    opacity: 0.9 !important;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    z-index: 20;
    text-shadow: none;
    transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

    .game-modal .close:hover,
    .game-modal .close:focus {
        color: var(--mm-orange) !important;
        opacity: 1 !important;
        transform: scale(1.25);
        outline: none;
    }

.game-modal .modal-footer {
    background: rgba(0,0,0,0.4);
    border-top: 1px solid rgba(228,134,50,0.3);
}

    .game-modal .modal-footer .modal-cta-row {
        margin: 0;
        width: 100%;
        justify-content: flex-end;
    }

/* ============================================================
   CONTACT
   ============================================================ */
#contact .contact-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 20px 40px;
    margin-top: 24px;
}

#contact .contact-card {
    position: relative;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    padding: 11px 28px 11px 54px; /* match the hero icon-diamond exactly */
    margin-left: 22px; /* room for the diamond protruding left */
    min-width: 0;
    border: 1px solid var(--mm-orange);
    border-radius: 4px;
    background: rgba(228,134,50,0.08);
    color: #fff;
    text-decoration: none;
    font-family: Urbanist, sans-serif;
    font-size: 0.9rem;
    transition: all 0.25s ease;
    backdrop-filter: blur(4px);
}

    #contact .contact-card:hover {
        background: var(--mm-orange);
        border-color: var(--mm-orange);
        color: #111;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(228,134,50,0.35);
        text-decoration: none;
    }

    #contact .contact-card .cc-icon {
        position: absolute;
        top: 50%;
        left: -11px;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1rem;
        z-index: 2;
        transition: color 0.25s ease;
    }

        #contact .contact-card .cc-icon::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 46px;
            height: 46px;
            transform: translate(-50%, -50%) rotate(45deg);
            border: 2px solid var(--mm-orange);
            background: #0d0d0d;
            transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
            z-index: 0;
        }

        #contact .contact-card .cc-icon > * {
            position: relative;
            z-index: 1;
        }

    #contact .contact-card:hover .cc-icon {
        color: #111;
    }

        #contact .contact-card:hover .cc-icon::before {
            background: var(--mm-orange);
            border-color: #111;
            box-shadow: 0 0 18px rgba(228,134,50,0.5);
        }

    #contact .contact-card .cc-icon img {
        width: 18px;
        height: 18px;
        filter: brightness(0) invert(1);
        transition: filter 0.2s ease;
    }

    #contact .contact-card:hover .cc-icon img {
        filter: brightness(0);
    }

    #contact .contact-card .cc-value {
        font-size: 1rem;
        font-weight: 500;
        color: #fff;
        white-space: nowrap;
    }

/* ============================================================
   PRESS KIT & DYNAMIC VIDEO ASPECT RATIO OVERRIDES
   ============================================================ */
/* Universal 16:9 video aspect ratio utility to resolve mobile cutoff */
#games .game-card-left a.js-video-button,
#videos .js-video-button {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio spacing */
    height: 0;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(228,134,50,0.15);
}

    #games .game-card-left iframe,
    #videos .js-video-button iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 4px;
    }

/* Store & social media button modifications for the press kit */
.button-store {
    background: rgba(228, 134, 50, 0.08) !important;
    border: 1px solid var(--mm-orange) !important;
    color: #fff !important;
    border-radius: 4px !important;
    transition: all 0.25s ease !important;
    display: inline-flex;
    align-items: center;
    padding: 8px 18px !important;
    text-decoration: none !important;
    height: auto !important;
    width: auto !important;
}

    .button-store:hover {
        background: var(--mm-orange) !important;
        color: #111 !important;
        box-shadow: 0 4px 15px rgba(228, 134, 50, 0.35);
        transform: translateY(-1px);
        text-decoration: none !important;
    }

    .button-store img.svg-icon {
        filter: brightness(0) invert(1) !important;
        margin-right: 8px !important;
        margin-top: 0 !important;
        transition: filter 0.25s ease !important;
        float: none !important;
    }

    .button-store:hover img.svg-icon {
        filter: brightness(0) !important;
    }

    .button-store p {
        color: inherit !important;
        padding: 0 !important;
        margin: 0 !important;
        font-family: Urbanist, sans-serif !important;
        font-weight: 500 !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
        float: none !important;
    }

    .button-store i {
        color: inherit !important;
        margin-right: 8px !important;
        font-size: 1rem !important;
        float: none !important;
        transition: none !important;
    }

/* ============================================================
   LEGAL TEXT COHERENCY (Privacy & Terms of Service)
   ============================================================ */
.legal-text p {
    font-family: Urbanist, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
    color: #d8d8d8 !important;
    margin-bottom: 20px !important;
}

.legal-text ul {
    list-style-type: disc !important;
    padding-left: 24px !important;
    margin-bottom: 24px !important;
    color: #d8d8d8 !important;
}

    .legal-text ul li {
        margin-bottom: 8px !important;
        font-family: Urbanist, sans-serif !important;
        font-size: 1rem !important;
    }

.legal-text strong {
    color: var(--mm-orange) !important;
    font-size: 1.25rem !important;
    display: block !important;
    margin-top: 30px !important;
    margin-bottom: 12px !important;
}

.legal-text a {
    color: var(--mm-orange) !important;
    text-decoration: underline !important;
    transition: opacity 0.2s ease;
}

    .legal-text a:hover {
        opacity: 0.8;
    }

/* ============================================================
   404 ERROR OVERHAUL
   ============================================================ */
#container-404 {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
}

.text-404 h1 {
    font-family: Atmospheric, Urbanist, sans-serif !important;
    font-size: clamp(3rem, 8vw, 6rem) !important;
    letter-spacing: 8px !important;
    color: var(--mm-orange) !important;
    text-shadow: 0 0 30px rgba(228, 134, 50, 0.35) !important;
    margin-bottom: 20px !important;
}

.text-404 h3 {
    font-family: Urbanist, sans-serif !important;
    font-weight: 300 !important;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important;
    color: #ccc !important;
    margin-bottom: 40px !important;
}

.text-404 a.button {
    background: rgba(228, 134, 50, 0.08) !important;
    border: 1px solid var(--mm-orange) !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 12px 30px !important;
    text-transform: uppercase !important;
    font-family: Urbanist, sans-serif !important;
    font-weight: 500 !important;
    display: inline-block !important;
    transition: all 0.25s ease !important;
}

    .text-404 a.button:hover {
        background: var(--mm-orange) !important;
        color: #111 !important;
        box-shadow: 0 8px 24px rgba(228, 134, 50, 0.35) !important;
        transform: translateY(-2px) !important;
    }

/* ============================================================
   RESPONSIVE
   ============================================================
   Breakpoints:
   - <=991px : tablet / hamburger drawer
   - <=767px : phones
   - <=480px : small phones
   ============================================================ */

@media (max-width: 991px) {
    /* Hamburger drawer */
    .navbar-dark .navbar-collapse {
        background: rgba(7,7,10,0.96);
        backdrop-filter: blur(10px);
        margin-top: 8px;
        padding: 8px 14px;
        border-radius: 4px;
        border: 1px solid rgba(228,134,50,0.25);
    }

    .navbar-dark .navbar-nav .nav-link {
        padding: 10px 4px !important;
    }

        .navbar-dark .navbar-nav .nav-link::after {
            display: none;
        }

    /* Screenshot grid collapses */
    .shot-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 160px;
    }

        .shot-grid .shot.big,
        .shot-grid .shot.tall,
        .shot-grid .shot.wide,
        .shot-grid .shot.small {
            grid-column: span 6;
            grid-row: span 1;
        }

        .shot-grid .shot.big {
            grid-row: span 2;
        }

    /* Game card stacks — buttons can wrap */
    #games .game-card-right {
        padding: 22px 24px;
    }

        #games .game-card-right .hero-cta-row {
            flex-wrap: wrap;
        }
}

@media (max-width: 767px) {
    #hero-section.modern-hero {
        height: 100vh;
        min-height: 540px;
    }

    .hero-text-backdrop {
        padding: 0 16px;
        max-width: 94%;
    }

    .hero-content .hero-logo {
        max-width: 92vw;
        margin-bottom: -20px;
    }

    .hero-content h2.hero-subtitle {
        font-size: 1.05rem;
        letter-spacing: 2px;
    }

    .hero-studio {
        margin-top: 28px;
        font-size: 0.85rem;
        letter-spacing: 2px;
    }

    .hero-cta-row {
        margin-top: 26px;
        gap: 24px; /* Prevents vertical overlapping of rotated diamonds */
        flex-direction: column;
        align-items: center; /* Center aligns elements in the column layout */
        width: 100%;
        padding-right: 0; /* Resets desktop counterbalance on stacked column layout */
    }

    .hero-cta {
        justify-content: center;
        width: auto; /* Stops full-width stretching */
        padding: 14px 24px;
        font-size: 0.85rem;
    }

        .hero-cta.icon-diamond {
            /* Symmetrical margins guarantee absolute visual centering on mobile */
            margin-left: 22px;
            margin-right: 22px;
            padding: 11px 28px 11px 48px;
        }

    .scroll-indicator {
        display: none;
    }

    #games {
        padding-top: 50px;
    }

    #about {
        padding: 20px 0;
    }

        #about p {
            font-size: 1rem;
            line-height: 1.65;
        }

    #whats-next {
        padding: 30px 0 40px 0;
    }

    .next-sub {
        font-size: 1rem;
    }

    .shot-showcase {
        margin: 20px 0 30px 0;
    }

    .shot-grid {
        gap: 10px;
        grid-auto-rows: 140px;
    }

    .game-modal .modal-dialog {
        margin-top: 90px;
        margin-bottom: 30px;
    }

    .game-modal .modal-body p {
        font-size: 0.95rem;
    }

    #team figure {
        margin: 0px auto 20px auto !important; /* Forces 20px margin below team images on mobile */
    }

    #contact .contact-grid {
        flex-direction: column;
        align-items: baseline; /* Prevents Contact Us buttons from stretching full-width */
        margin-left: 12px;
        gap: 24px;
    }

    #contact .contact-card {
        padding: 14px 18px 14px 54px;
    }

        #contact .contact-card .cc-value {
            white-space: normal;
        }
}

@media (max-width: 480px) {
    .hero-content h2.hero-subtitle {
        font-size: 0.95rem;
        letter-spacing: 1px;
    }

    .hero-studio {
        letter-spacing: 1px;
    }

    .next-title {
        letter-spacing: 6px;
    }
}

/* /// ICON DIAMOND — diamond is centered on the button's LEFT edge; button rectangle sits behind it /// */
.hero-cta.icon-diamond {
    position: relative;
    overflow: visible;
    margin-left: 38px; /* room for the left half of the diamond protruding outside the button */
    padding: 11px 28px 11px 48px; /* shorter button + extra left padding so text clears the diamond with breathing room */
    font-size: 0.9rem;
}

    .hero-cta.icon-diamond .cta-icon {
        position: absolute;
        top: 50%;
        left: -11px; /* span (22px wide) centered on the button's left edge → diamond center sits on that edge */
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        z-index: 2; /* sit above the button rectangle so the diamond hides the button's border */
    }

.hero-cta .cta-icon img {
    position: relative;
    z-index: 1;
    height: 22px;
    width: 22px;
    filter: brightness(0) invert(1);
    transition: filter 0.2s ease;
}

.hero-cta .cta-icon i {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    transition: color 0.2s ease;
}

.hero-cta.icon-diamond:hover .cta-icon i {
    color: #111;
}

.hero-cta.icon-diamond .cta-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 2px solid var(--mm-orange);
    background: #0d0d0d; /* opaque so the button's lines underneath are fully covered */
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    z-index: 0;
}

.hero-cta.icon-diamond:hover .cta-icon::before {
    background: var(--mm-orange);
    border-color: #111; /* keep diamond outline visible against the orange fill */
    box-shadow: 0 0 18px rgba(228, 134, 50, 0.5);
}

.hero-cta.icon-diamond:hover .cta-icon img {
    filter: brightness(0);
}

/* /// DIAMOND BUTTON — closed rectangle with a diamond at each corner /// */
.diamond-btn,
.diamond-btn:visited,
.diamond-btn:active {
    --diamond-size: 14px;
    --diamond-gap: 10px; /* gap between the vertical line ends and the diamonds */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 30px;
    background-color: rgba(228,134,50,0.08);
    /* vertical side lines drawn as 2px-wide background gradients,
       height shorter than the button so they don't touch the diamonds */
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 2px calc(100% - var(--diamond-size) - (var(--diamond-gap) * 2));
    background-position: left center, right center;
    border: 0;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: #fff;
    text-decoration: none;
    font-family: Urbanist, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

    .diamond-btn::before,
    .diamond-btn::after {
        content: "";
        position: absolute;
        left: calc(var(--diamond-size) / -2);
        right: calc(var(--diamond-size) / -2);
        height: var(--diamond-size);
        pointer-events: none;
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: var(--diamond-size) var(--diamond-size);
        -webkit-mask-position: left center, right center;
        mask-repeat: no-repeat;
        mask-size: var(--diamond-size) var(--diamond-size);
        mask-position: left center, right center;
    }

    /* Top row: triangles whose right-angle sits at the top-left / top-right corner */
    .diamond-btn::before {
        top: calc(var(--diamond-size) / -2 - 1px);
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><polygon points='0,0 14,0 0,14' fill='black'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><polygon points='0,0 14,0 14,14' fill='black'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><polygon points='0,0 14,0 0,14' fill='black'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><polygon points='0,0 14,0 14,14' fill='black'/></svg>");
    }

    /* Bottom row: triangles whose right-angle sits at the bottom-left / bottom-right corner */
    .diamond-btn::after {
        bottom: calc(var(--diamond-size) / -2 - 1px);
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><polygon points='0,0 0,14 14,14' fill='black'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><polygon points='14,0 14,14 0,14' fill='black'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><polygon points='0,0 0,14 14,14' fill='black'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><polygon points='14,0 14,14 0,14' fill='black'/></svg>");
    }

    .diamond-btn:hover,
    .diamond-btn:focus {
        background-color: var(--mm-orange);
        color: #111;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(228,134,50,0.35);
        outline: none;
    }

/* ============================================================
   TYPOGRAPHY CONSISTENCY
   Group 1 — body copy: about, game-card description, what's-next, team caption
   Group 2 — tags / role subtitles
   Group 3 — section sub-headings: modal h2.short-hr-left, team-name
   ============================================================ */
#about p,
#games .game-card-right .game-description,
.next-sub,
#team .team-caption p {
    font-family: Urbanist, sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.45;
    color: #d8d8d8;
}

.tags,
.tags .subtle,
#team .subtle {
    font-family: Urbanist, sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #e0e0e0;
    text-transform: none;
}

.game-modal .modal-body h2.short-hr-left,
#team .team-name {
    font-family: Urbanist, sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: 1px;
    color: var(--mm-orange);
    margin: 0 0 4px 0;
    padding-bottom: 0;
}

/* ============================================================
   PRESS KIT SPECIFIC HOVER & CTA GROUPS
   ============================================================ */

/* Screenshots hover to match index shots but with added download icon */
.image-download-wrapper {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 4px;
    background: #111;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0,0,0,0.5);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

    .image-download-wrapper img {
        width: 100%;
        height: auto;
        object-fit: cover;
        transition: transform 0.6s ease, filter 0.4s ease;
        filter: saturate(0.9) brightness(0.9);
    }

    .image-download-wrapper:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 38px rgba(0,0,0,0.7), 0 0 0 1px var(--mm-orange);
    }

        .image-download-wrapper:hover img {
            transform: scale(1.05);
            filter: saturate(1.1) brightness(1.05);
        }

    .image-download-wrapper .overlay {
        position: absolute;
        inset: 0;
        background: rgba(7, 7, 10, 0.5) !important; /* translucent dark overlay on hover */
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0 !important;
        border: none !important; /* remove old style.css border-left */
        transition: opacity 0.3s ease !important;
        pointer-events: none;
    }

    .image-download-wrapper:hover .overlay {
        opacity: 1 !important;
    }

    .image-download-wrapper .overlay i {
        position: static !important; /* overrides absolute layout from style.css */
        font-size: 2.5rem !important;
        color: #fff !important;
        text-shadow: 0 0 15px rgba(228, 134, 50, 0.6);
        transition: transform 0.3s ease;
    }

    .image-download-wrapper:hover .overlay i {
        transform: scale(1.1);
    }

/* Presskit Left-aligned CTA Groups */
.presskit-cta-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 14px;
    row-gap: 20px;
    margin-top: 12px;
    margin-bottom: 24px;
}
    /* Mathematically counterbalances the left margin to center the Download button perfectly */
    .presskit-cta-group.justify-content-center {
        padding-right: 28px;
    }

    /* Elegant, compact diamond buttons for the sidebar layout */
    .presskit-cta-group .hero-cta.icon-diamond {
        margin-left: 28px; /* Reduced left room to align with smaller diamond */
        padding: 8px 18px 8px 38px; /* Compact padding block */
        font-size: 0.82rem; /* Downscaled text size */
    }

        .presskit-cta-group .hero-cta.icon-diamond .cta-icon {
            width: 18px; /* Scaled down container width */
            height: 18px; /* Scaled down container height */
            left: -9px; /* Centers the smaller diamond on the left edge */
        }

            .presskit-cta-group .hero-cta.icon-diamond .cta-icon::before {
                width: 36px; /* Scaled down rotated diamond border from 48px */
                height: 36px;
                border-width: 1.5px; /* Balanced border line weight */
            }

            .presskit-cta-group .hero-cta.icon-diamond .cta-icon img {
                width: 16px; /* Compact inner image size */
                height: 16px;
            }

            .presskit-cta-group .hero-cta.icon-diamond .cta-icon i {
                font-size: 0.85rem; /* Compact inner FontAwesome icon size */
            }

@media (max-width: 767px) {
    .presskit-cta-group {
        justify-content: center !important;
        width: 100%;
        padding-right: 0 !important; /* Reset offset padding on stacked mobile rows */
    }

        .presskit-cta-group.social-group {
            flex-direction: column;
            align-items: center;
            width: 100%;
            row-gap: 20px;
        }

        .presskit-cta-group .hero-cta.icon-diamond {
            margin-left: 18px; /* Symmetrical margins for mobile centered stacking */
            margin-right: 18px;
            width: auto;
        }
}
/* Features Screenshot Carousel (Press kit) */
#features-carousel {
    border-radius: 4px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    border: 1px solid rgba(228, 134, 50, 0.15);
    transition: border-color 0.3s ease;
}

    #features-carousel:hover {
        border-color: rgba(228, 134, 50, 0.4);
    }

/* ============================================================
   PRESS KIT
   ============================================================ */
#presskit-hero.modern-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 48vh;
    min-height: 300px;
    margin-top: 0;
    overflow: hidden;
    padding: 0;
}

.presskit-capsule-wrap {
    margin-top: -18vh;
    margin-bottom: 18px;
    position: relative;
    z-index: 10;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
}

    .presskit-capsule-wrap img {
        display: block;
        width: 100%;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    }

#assets .image-download-wrapper {
    background: transparent;
}

    #assets .image-download-wrapper img {
        filter: none;
    }

        #assets .image-download-wrapper:hover img {
            filter: none;
        }

@media (max-width: 991.98px) {
    #presskit-hero.modern-hero {
        height: 38vh;
        min-height: 260px;
    }

    .presskit-capsule-wrap {
        margin-top: -14vh;
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 575.98px) {
    #presskit-hero.modern-hero {
        height: 30vh;
        min-height: 200px;
    }

    .presskit-capsule-wrap {
        margin-top: -10vh;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}