/* Global Settings & Reset */
:root {
    font-size: 18px;
    /* Standard Semplice Base */
    --bg-color: #f5f5f5;
    /* From #project-panel and overlay-menu */
    --text-color: #000000;
    --accent-color: #fc4535;
    /* Vivid Red from source */
    --link-color: #000000;
    --hover-color: #fc4535;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Neue Haas Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
    /* Crucial for negative margins */
    cursor: url('images/cursor.png'), auto !important;
}

/* Force everything to use the custom cursor */
*,
a,
button,
.pointer,
.thumb-inner {
    cursor: url('images/cursor.png'), auto !important;
}

a {
    cursor: url('images/cursor.png'), pointer !important;
    /* Updated custom cursor */
}

/* Fonts */
@font-face {
    font-family: 'terminal-grotesque';
    src: url('fonts/terminal-grotesque.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'VCR_OSD_MONO';
    src: url('fonts/VCR_OSD_MONO.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.font-terminal {
    font-family: 'terminal-grotesque', monospace;
}

.font-vcr {
    font-family: 'VCR_OSD_MONO', monospace;
}

/* Navigation - Keeping the user-approved styles but tweaking sizes to match source */
.corner-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 1000;
}

.corner-nav a {
    pointer-events: auto;
    position: absolute;
    font-family: 'VCR_OSD_MONO', monospace;
    font-size: 1.777rem;
    /* Source: 1.777rem */
    color: var(--text-color);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    border-bottom: 0.222rem solid transparent;
    /* Source thickness */
    padding-bottom: 0;
    line-height: 1;
}

.corner-nav a:hover {
    color: var(--accent-color);
    border-bottom-color: #000000;
    /* Source behavior: red text, black underline */
}

.corner-nav a.active {
    color: #fc4535;
    /* Red for active page */
    border-bottom-color: #498df8;
    /* Blue underline for active item (from source analysis) or custom user pref */
}

/* Revert active constraint if needed, but source says: currentColor is red, border is blue-ish */

.top-left {
    top: 2.222rem;
    left: 2.222rem;
}

.top-right {
    top: 2.222rem;
    right: 2.222rem;
}

.bottom-left {
    bottom: 2.222rem;
    left: 2.222rem;
}

.bottom-right {
    bottom: 2.222rem;
    right: 2.222rem;
}

/* Grid System - Simplified Semplice logic */
.container-fluid {
    width: 100%;
    padding: 0 2.222rem;
    box-sizing: border-box;
}

.container {
    max-width: 1980px;
    margin: 0 auto;
    padding: 0 1.667rem;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.column {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    position: relative;
}

/* Column Widths */
.col-12 {
    width: 100%;
}

.col-8 {
    width: 66.66%;
}

.col-7 {
    width: 58.33%;
}

.col-6 {
    width: 50%;
}

.col-5 {
    width: 41.66%;
}

.col-4 {
    width: 33.33%;
}

.col-3 {
    width: 25%;
}

.col-2 {
    width: 16.66%;
}

/* Button Styles (Restored) */
.nav_th8wb1r4m .menu-item a {
    font-family: 'VCR_OSD_MONO', monospace;
    font-size: 1.777rem;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    border-bottom: 0.222rem solid transparent;
    line-height: 1;
    padding-bottom: 0;
}

.nav_th8wb1r4m .menu-item a:hover {
    color: var(--accent-color);
    border-bottom-color: #000000;
}

/* Active Page Style */
.nav_th8wb1r4m .menu-item.current-menu-item a {
    color: #fc4535;
    border-bottom-color: #498df8;
}

.nav_th8wb1r4m {
    background-color: transparent;
    height: 5.278rem;
    padding-top: 0.667rem;
    padding-bottom: 0.667rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.nav_th8wb1r4m .container-fluid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 2.22rem;
    padding-right: 2.22rem;
}

.nav_th8wb1r4m .navbar-inner {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    /* Push everything to the right */
    align-items: center;
}

.nav_th8wb1r4m .logo {
    display: none;
    /* Hide the empty logo container */
}

.nav_th8wb1r4m .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2rem;
    margin-right: 2rem;
    /* Add some space before the hamburger if it's there */
}

.nav_th8wb1r4m .menu-item a {
    font-family: 'VCR_OSD_MONO', monospace;
    /* Restoring base font */
    font-size: 1.777rem;
    /* Matching corner-nav size */
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    border-bottom: 0.222rem solid transparent;
    /* Added underline base */
    line-height: 1;
    padding-bottom: 0;
}

.nav_th8wb1r4m .menu-item a:hover {
    color: var(--accent-color);
    border-bottom-color: #000000;
    /* Hover underline black */
}

/* Active Page Style */
.nav_th8wb1r4m .menu-item.current-menu-item a {
    color: #fc4535;
    /* Red Text */
    border-bottom-color: #498df8;
    /* Blue Underline */
}

.nav_th8wb1r4m .logo svg {
    height: 3rem;
}

/* --- About Page Specifics (REMOVED TO FIX DESKTOP BREAKAGE) --- */
/* The layout rules (negative margins, etc.) have been removed to restore the standard desktop view. */

/* Add necessary font classes from source if they are missing */
.font_oiipey6sk {
    font-family: 'terminal-grotesque', sans-serif;
    font-weight: normal;
}


.design-studio-text {
    font-family: 'terminal-grotesque', sans-serif;
    font-size: 9.944rem;
    line-height: 7.222rem;
    text-align: left;
    white-space: pre-line;
    letter-spacing: 0;
}

/* --- About Page Specifics (RESTORED TO CLEAN STATE) --- */
/* Removed all negative margins and absolute positioning to fix desktop layout. */

.bio-image-wrapper {
    width: 100%;
    max-width: 100%;
    position: relative;
}

.bio-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Restoring Standard Title */
.giant-title {
    font-family: 'terminal-grotesque', sans-serif;
    font-size: 5rem;
    /* Standard large size for desktop */
    line-height: 1;
    letter-spacing: -2px;
    margin-top: 0;
    padding: 0;
    color: #000000;
    position: relative;
}

.bio-text {
    font-family: 'terminal-grotesque', sans-serif;
    font-size: 1.5rem;
    /* Standard readable size */
    line-height: 1.4;
    margin-top: 2rem;
    position: relative;
}

.design-studio-block {
    margin-top: 0;
    margin-left: 0;
    position: relative;
    pointer-events: none;
    color: #000000;
}

.about-container {
    padding-top: 8rem;
    /* Aggressively reduced to ~144px (Header is ~95px) */
    /* Standard Header Clearance for desktop */
    margin-top: 0;
    padding-bottom: 2rem;
    /* Reduced bottom padding too */
}

.vide.about-container {
    padding-top: 3rem;
    /* Standard spacing */
    margin-top: 0;
    /* Reset negative margin */
    padding-bottom: 3rem;
}

.video-full {
    width: 100%;
    padding-top: 0.5rem;
    /* Reduced from 2.77rem */
    padding-bottom: 1rem;
    /* Reduced from 3.33rem */
}

.video-full video {
    width: 100%;
    height: auto;
}

.capabilities-title {
    font-family: 'VCR_OSD_MONO', monospace;
    font-size: 1rem;
    line-height: 2.222rem;
    letter-spacing: -0.072rem;
    margin-bottom: 0.2rem;
    /* Reduced from 1rem */
}

.capabilities-list {
    font-family: 'VCR_OSD_MONO', monospace;
    font-size: 1.667rem;
    line-height: 1.444rem;
    letter-spacing: -0.056rem;
    color: #000000;
}

.cap-grey {
    color: #919191;
}

.section-spacer {
    height: 1px;
    background: #919191;
    width: 100%;
    margin: 1rem 0;
    /* Reduced from 3rem */
    opacity: 0.3;
}

.btn-contact {
    display: inline-block;
    background-color: var(--accent-color);
    color: #fff;
    font-family: 'VCR_OSD_MONO', monospace;
    font-size: 3rem;
    padding: 0.88rem;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-contact:hover {
    background-color: #498df8;
    color: #fff;
}

/* --- NEW: Home Page Grid Styles (Source Based) --- */

.grid-padding {
    padding-top: 7rem;
    /* Make space for fixed nav */
    padding-bottom: 5rem;
}

/* Masonry Item Wrapper */
.masonry-item {
    padding: 0 10px 20px 10px;
    /* Spacing from source (#masonry-content... padding) */
    box-sizing: border-box;
    float: left;
    /* Essential for Masonry if using float mode, typically needed */
    margin-bottom: 2rem;
}

.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    /* Source Style */
    backface-visibility: hidden;
    transition: transform 0.7s ease;
}

/* Hover Interaction */
.thumb-inner {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    cursor: url('images/cursor.png'), pointer !important;
    /* Force custom cursor */
    background: #fff;
    /* fallback */
    width: 100%;
}

.thumb-inner:hover img {
    transform: scale(1.05);
    /* Zoom effect */
}

/* Overlay */
.thumb-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 20px;
    z-index: 10;
    /* Flexbox for centering text */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.thumb-inner:hover .thumb-hover {
    opacity: 1;
}

/* Meta Data (Text on Hover) */
.thumb-hover-meta p {
    margin: 0;
    line-height: 1.2;
}

.thumb-hover-meta .title {
    font-family: 'terminal-grotesque', sans-serif;
    /* Default varies, but typically around 2-3rem */
    font-size: 2rem;
    color: #fff;
    display: block;
    margin-bottom: 0.5rem;
}

.thumb-hover-meta .category {
    font-family: 'terminal-grotesque', sans-serif;
    font-size: 1.2rem;
    color: #eee;
}

/* Mobile Responsive */
@media (max-width: 1170px) {
    :root {
        font-size: 16px;
    }

    .design-studio-block {
        margin-top: -80rem;
        margin-left: 10rem;
    }

    .bio-image-wrapper {
        margin-left: 10rem;
        margin-bottom: -20rem;
    }

    .masonry-item {
        width: 50% !important;
    }

    /* Force 2 cols on tablet */
}

@media (max-width: 768px) {
    .design-studio-block {
        margin-top: 0;
        margin-left: 0;
    }

    .giant-title {
        font-size: 5rem;
        line-height: 1;
    }

    .bio-image-wrapper {
        margin: 0;
        margin-bottom: 2rem;
    }

    .masonry-item {
        width: 100% !important;
    }

    /* Mobile Navigation: Visible & Stacked */
    .top-left,
    .top-right,
    .bottom-left,
    .bottom-right {
        position: static;
        /* Remove fixed positioning */
        display: block;
        text-align: center;
        margin-bottom: 0.5rem;
        transform: none;
    }

    .corner-nav {
        position: relative;
        padding-top: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        background-color: var(--bg-color);
        /* Ensure contrast */
        z-index: 999;
    }

    /* Order adjustment if needed, but DOM order is fine: Work, About, IA, Insta */
}

/* Utility */
.text-red {
    color: var(--accent-color);
}

.text-underline {
    text-decoration: underline;
}

/* Back to Top Arrow */
.back-to-top {
    position: fixed;
    bottom: 2.222rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'VCR_OSD_MONO', monospace;
    font-size: 3rem;
    color: rgba(0, 0, 0, 0.5);
    /* Black semi-transparent */
    text-decoration: none;
    z-index: 999;
    line-height: 1;
    /* mix-blend-mode: difference; Removed */
    opacity: 0;
    /* Initially invisible */
    visibility: hidden;
    /* Prevent clicking when invisible */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    color: #fc4535;
    /* Accent color on hover */
}

html {
    scroll-behavior: smooth;
}

/* Placeholder for missing media */
.media-placeholder {
    width: 100%;
    /* Default height is handled inline per instance for variety */
    background-color: #2a2a2a;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
}

.media-placeholder span {
    z-index: 1;
}

/* Optional: Slight pattern or gradient to make it look nicer */
.media-placeholder::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Load More Button Styles */
.load-more-wrapper {
    width: 100%;
    text-align: center;
    padding: 4rem 0 6rem;
    clear: both;
}

.load-more-btn {
    display: inline-block;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.load-more-btn svg {
    width: 50px;
    height: 50px;
    fill: #000;
    /* Default black */
    transition: fill 0.3s ease;
}

.load-more-btn:hover svg {
    fill: #fc4535;
    /* Hover red */
    transform: rotate(90deg);
}

/* Hidden items utility */
.masonry-item.initially-hidden {
    display: none;
}

/* =========================================
   MOBILE RESPONSIVE FIXES (Max-width 768px)
   ========================================= */

@media only screen and (max-width: 768px) {

    /* 1. LAYOUT & GRID SYSTEM
       ----------------------------------------- */
    /* Force container to use available width with padding */
    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* Stack Flexbox Rows Vertically */
    .row {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Make Columns Full Width */
    .column,
    .grid-column,
    div[class*="column"],
    div[data-xl-width] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 30px !important;
        /* Spacing between stacked items */
    }

    /* 2. MEDIA (IMAGES & VIDEO)
       ----------------------------------------- */
    img,
    video,
    svg {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }

    /* Specific fix for Masonry/Grid items */
    .masonry-item,
    .thumb,
    .thumb-inner {
        width: 100% !important;
        position: relative !important;
        /* Reset masonry absolute positioning if active */
        top: auto !important;
        left: auto !important;
        margin-bottom: 40px !important;
        transform: none !important;
        /* Reset any JS transforms */
    }

    /* 3. TYPOGRAPHY SCALING
       ----------------------------------------- */
    h1,
    .post-title,
    .thumb-hover-meta .title {
        font-size: 28px !important;
        /* Readable mobile headline size */
        line-height: 1.2 !important;
        letter-spacing: -0.5px !important;
    }

    h2,
    h3,
    .title {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    p,
    .description,
    span,
    .category {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }


    /* Mobile Menu Fixes */
    /* Mobile Menu Fixes */
    /* .bio-wrapper rule removed to fix desktop layout breakage */

    /* Hide the standard desktop menu links */
    nav.standard,
    .desktop-nav {
        display: none !important;
    }

    /* Ensure Hamburger Icon is Visible and Positioned */
    .hamburger,
    .menu-icon {
        display: block !important;
        z-index: 1000 !important;
        position: relative;
    }

    /* Adjust Navbar container */
    header.semplice-navbar,
    .navbar-inner {
        padding: 15px 0 !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Logo Sizing */
    .logo svg,
    .logo img {
        width: 140px !important;
        /* Maintain brand visibility but fit screen */
        height: auto !important;
    }

    /* 5. SPACING & MARGINS
       ----------------------------------------- */
    /* Reduce excessive padding from desktop sections */
    section,
    .content-block {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .spacer,
    .empty-space {
        height: 30px !important;
        /* Reduce large spacers */
    }

    /* Remove negative margins that might cause overflow */
    .masonry,
    .content-wrapper {
        margin: 0 !important;
    }
}

/* =========================================
   MOBILE FIXES V2 (CORRECTIONS)
   ========================================= */
@media only screen and (max-width: 768px) {

    /* --- FIX 1: NAVIGATION STICKY & VISIBILITY --- */

    /* A. For Home/Project Pages (Corner Nav) -> Transform to Top Sticky Bar */
    nav.corner-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        /* Full width */
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        /* Just content height */
        background-color: #ffffff !important;
        /* White background for visibility */
        z-index: 99999 !important;
        /* On top of everything */
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        /* Center items */
        align-items: center !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #ddd !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    /* Reset individual link positioning */
    nav.corner-nav a {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 5px 10px !important;
        /* Spacing between links */
        color: #000000 !important;
        /* Force black text */
        font-size: 14px !important;
        text-transform: uppercase;
        text-decoration: none !important;
    }

    /* Hide the specific class that might be positioning them weirdly if applied */
    nav.corner-nav.top-left,
    nav.corner-nav.top-right,
    nav.corner-nav.bottom-left,
    nav.corner-nav.bottom-right {
        /* The container logic above overrides this, but ensuring no stray styles */
    }

    /* B. For About/Other Pages (Standard Header with Hamburger) */
    header.simple-navbar,
    header.semplice-navbar,
    .nav_th8wb1r4m {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background-color: #ffffff !important;
        /* Force white background */
        z-index: 99999 !important;
        padding: 10px 0 !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    /* Ensure Hamburger is Visible */
    .hamburger,
    .menu-icon {
        display: block !important;
        cursor: pointer;
    }

    /* Force Hamburger Lines Color */
    .menu-icon span,
    .menu-icon span::before,
    .menu-icon span::after {
        background-color: #000000 !important;
        height: 2px !important;
    }

    /* Adjust padding for content to not be hidden behind fixed header */
    body {
        padding-top: 70px !important;
    }

    /* --- FIX 2: FOOTER VISIBILITY --- */

    .semplice-next-prev {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 30px !important;
        padding-bottom: 50px !important;
        background: transparent !important;
        z-index: 10 !important;
    }

    .semplice-next-prev .container,
    .semplice-next-prev .row,
    .semplice-next-prev .column {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        visibility: visible !important;
    }

    /* Fix text visibility in footer */
    .np-label,
    .np-label-above {
        color: #000 !important;
        opacity: 1 !important;
    }

    /* --- FIX 3: MISC ADJUSTMENTS --- */
    /* Ensure no weird overflow */
    #content-holder {
        overflow-x: hidden !important;
        width: 100% !important;
    }
}


/* =========================================
   MOBILE HEADER Implementation (Universal)
   ========================================= */

/* Default State: Hidden on Desktop */
#mobile-header,
#mobile-menu-overlay {
    display: none;
}

@media only screen and (max-width: 768px) {

    /* 1. HIDE ALL DESKTOP NAVS */
    nav.corner-nav,
    .nav_th8wb1r4m,
    header.simple-navbar,
    header.semplice-navbar,
    .desktop-nav,
    .corner-nav.top-left,
    .corner-nav.top-right,
    .corner-nav.bottom-left,
    .corner-nav.bottom-right {
        display: none !important;
    }

    /* 2. SHOW MOBILE HEADER */
    #mobile-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        /* Slightly taller for better touch area */
        background-color: transparent !important;
        /* Transparent as requested */
        z-index: 99999;
        padding: 0 20px;
        box-sizing: border-box;
        /* Removed border-bottom to be fully transparent */
    }

    /* Logo Style */
    #mobile-header .mobile-logo a {
        font-family: 'Neue Haas Grotesk', Helvetica, Arial, sans-serif;
        font-weight: 700;
        font-size: 18px;
        color: #000000;
        text-decoration: none;
        letter-spacing: -0.5px;
    }

    /* Logo Image Style */
    #mobile-header .mobile-logo img {
        height: 35px;
        /* Reduced from 60px as per user feedback/reference */
        width: auto;
        display: block;
    }

    /* Burger Icon Style */
    #mobile-header .mobile-burger {
        width: 30px;
        height: 24px;
        /* Fixed height for calculations */
        position: relative;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #mobile-header .mobile-burger span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #000000;
        transform-origin: center;
        transition: all 0.3s ease-in-out;
        position: absolute;
        left: 0;
    }

    /* Default positions */
    #mobile-header .mobile-burger span:nth-child(1) {
        top: 0;
    }

    #mobile-header .mobile-burger span:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
    }

    #mobile-header .mobile-burger span:nth-child(3) {
        bottom: 0;
    }

    /* Clean Cross Animation */
    #mobile-header .mobile-burger.active span:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

    #mobile-header .mobile-burger.active span:nth-child(2) {
        opacity: 0;
    }

    #mobile-header .mobile-burger.active span:nth-child(3) {
        bottom: 50%;
        /* Move up */
        top: 50%;
        /* Force center */
        transform: translateY(-50%) rotate(-45deg);
    }

    /* Body padding tax */
    body {
        padding-top: 0px !important;
        /* Reset padding since header is transparent/overlaying */
    }
}


/* =========================================
   MOBILE MENU STYLING (VCR Font + Effects)
   ========================================= */
@media only screen and (max-width: 768px) {

    /* 1. Semi-transparent Background & Positioning */
    #mobile-menu-overlay {
        display: none;
        /* Hidden by default */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 99998;
        /* Below header (99999) */
        background-color: rgba(255, 255, 255, 0.96) !important;
        /* Slightly more opaque */
        backdrop-filter: blur(10px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    #mobile-menu-overlay.active {
        display: flex !important;
        opacity: 1;
    }

    /* 2. Font & Link Styling */
    #mobile-menu-overlay .mobile-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
        /* Space between links */
        width: 100%;
    }

    #mobile-menu-overlay .mobile-nav a {
        font-family: 'VCR_OSD_MONO', monospace !important;
        font-size: 36px !important;
        /* Larger size for this specific font */
        color: #000000 !important;
        text-transform: uppercase;
        text-decoration: none !important;
        border-bottom: 4px solid transparent;
        /* Prepared for underline */
        padding-bottom: 5px;
        transition: all 0.3s ease;
    }

    /* 3. Hover & Active States */
    #mobile-menu-overlay .mobile-nav a:hover,
    #mobile-menu-overlay .mobile-nav a.active {
        color: #fc4535 !important;
        /* Red Text */
        border-bottom-color: #000000 !important;
        /* Black Underline */
    }
}

/* Specific Mobile Fix for About Page Image (Angel) */
/* Specific Mobile Fix for About Page Image (Angel) */
@media only screen and (max-width: 768px) {

    /* Fix Top Spacing for About, IA Creation, and Projects (Match 'Work' page layout) */
    .page-about #content-holder,
    .page-ia-creation #content-holder,
    .page-project #content-holder,
    .project-panel #content-holder {
        /* Guessing generic wrapper */
        padding-top: 70px !important;
        /* Push content below fixed header */
        margin-top: 0 !important;
    }

    /* KILL NEGATIVE MARGIN */
    .page-about .about-container {
        margin-top: 0 !important;
        transform: none !important;
        /* Stop masonry positioning */
    }

    /* 1. Logo Fix: Override the global img rule */
    #mobile-header .mobile-logo img {
        height: 35px !important;
        /* Force small size */
        width: auto !important;
        display: block;
    }

    /* 2. Bio Text Styling */
    .page-about .bio-text p {
        font-size: 18px !important;
        line-height: 30px !important;
        margin-bottom: 0 !important;
        /* Managed by row margin now */
        color: #292a2c !important;
        /* Exact reference color */
    }

    /* 3. Top Image Styling (ensure it fits) */
    .bio-image-wrapper img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* 4. Angel Image Positioning */
    .page-about .video-full {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        position: relative;
        z-index: 1;
        text-align: left !important;
        padding-left: 0 !important;
    }

    .page-about .video-full img {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: block;
        opacity: 1 !important;
    }

    /* 5. Ensure "MES SKILS" text stays on top */
    .capabilities-title,
    .capabilities-list {
        position: relative;
        z-index: 10;
        margin-top: 40px !important;
    }
}