/* Additional Portrait Section */
.project-portrait-section {
    width: 100%;
    height: 70vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portrait-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.portrait-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Project Story Section */
.project-story {
    background: transparent;
    padding: 4rem 0;
    text-align: center;
}

.story-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.story-title {
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 4px;
    margin-bottom: 2rem;
    color: #fff;
    text-transform: uppercase;
}

.story-content {
    max-width: 800px;
    margin: 0 auto;
}

.story-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
    letter-spacing: 0.5px;
    margin-bottom: 1.5rem;
}

/* Project Gallery Section */
.project-gallery {
    background: transparent;
    padding: 4rem 0;
}

.project-gallery .gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.project-gallery .image-grid {
    display: flex;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.project-gallery .grid-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.project-gallery .grid-item {
    overflow: hidden;
    position: relative;
}

.project-gallery .grid-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    display: block;
}

.project-gallery .grid-item:hover img {
    transform: scale(1.05);
}

.project-gallery .grid-large {
    grid-column: span 2;
    grid-row: span 2;
}

.project-gallery .grid-medium {
    grid-column: span 1;
    grid-row: span 2;
}

.project-gallery .grid-small {
    grid-column: span 1;
    grid-row: span 1;
}

/* Enhanced Footer Section */
.project-footer {
    background: transparent;
    padding: 3rem 0 2rem 0;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 2rem;
}

.social-icon {
    width: 38px;
    height: 38px;
    background-color: #5a5b5e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
    color: #131419;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.social-icon:hover {
    background-color: #ffffff;
    transform: scale(1.4);
}

.copyright-text {
    font-size: 0.8rem;
    color: #5D5E62;
    margin: 0;
    font-weight: 300;
    letter-spacing: 1px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Static background elements */
.background-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.bg-disk {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.3);
    border: 5px solid #ff0000;
}

.bg-disk.top-right {
    width: 140vw;
    height: 140vw;
    top: -70vw;
    right: -70vw;
    opacity: 0.8;
}

.bg-disk.bottom-left {
    width: 130vw;
    height: 130vw;
    bottom: -65vw;
    left: -65vw;
    opacity: 0.8;
}

.vertical-line {
    position: absolute;
    width: 5px;
    height: 70vh;
    background: #00ff00;
    opacity: 1;
}

.vertical-line.left {
    left: 17%;
    top: 20%;
    height: 60vh;
    opacity: 0.7;
}

.vertical-line.right {
    right: 32%;
    top: 15%;
    height: 70vh;
    opacity: 0.8;
}

.star {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: rgba(130, 177, 255, 0.5);
    box-shadow: 0 0 5px rgba(130, 177, 255, 0.8);
    opacity: 0.7;
    /* Make stars slightly more transparent overall */
}

.star1 {
    right: 25%;
    top: 23%;
    width: 3px;
    height: 3px;
    background-color: rgba(112, 219, 219, 0.7);
    box-shadow: 0 0 4px rgba(112, 219, 219, 0.9);
}

.star2 {
    left: 28%;
    bottom: 38%;
    width: 2px;
    height: 2px;
    background-color: rgba(138, 80, 232, 0.7);
    box-shadow: 0 0 5px rgba(138, 80, 232, 0.9);
}

.star3 {
    right: 75%;
    top: 65%;
    width: 2px;
    height: 2px;
    background-color: rgba(70, 168, 200, 0.6);
    box-shadow: 0 0 4px rgba(70, 168, 200, 0.8);
}

/* Anti-banding technique using noise overlay */
.reduce-banding {
    position: relative;
}

.reduce-banding::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: url("noise.svg");
    background-repeat: repeat;
    opacity: 0.3;
    z-index: 1;
    mix-blend-mode: overlay;
}

/* Base styles for html and body for smooth-scrollbar compatibility */
html {
    height: 100%;
    overflow: auto;
    /* CHANGED: Allow scrolling instead of hidden */
    scroll-behavior: smooth;
    background-color: #131419;
    /* Updated to the requested color */
}

body {
    height: 100%;
    /* Ensure body takes full height */
    font-family: 'Montserrat', sans-serif;
    background-color: transparent;
    /* Body itself needs to be transparent */
    color: #fff;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: auto;
    /* CHANGED: Allow scrolling instead of hidden */
}

/* New scroll container style */
#main-scroll-area {
    width: 100%;
    height: 100vh;
    /* Occupy full viewport height for scrolling */
    /* overflow: auto; smooth-scrollbar will handle actual scroll mechanism */
}

/* Portfolio Section Styling */
.portfolio-section {
    min-height: 100vh;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 2rem 2rem 2rem;
    text-align: center;
}

.portfolio-indicator {
    width: 24px;
    height: 24px;
    background-color: transparent;
    /* Make center transparent */
    border: 6px solid #FFD700;
    /* Yellow border to create the ring */
    border-radius: 50%;
    margin-top: 4rem;
    /* Space above indicator */
    margin-bottom: 8rem;
    /* Space below indicator */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-indicator:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.portfolio-image-mask {
    position: relative;
    width: 100%;
    /* Adjust percentage for responsiveness */
    max-width: 1440px;
    /* Max width for very large screens */
    aspect-ratio: 1443.999402 / 463.528267;
    /* Match true SVG path extent aspect ratio */
    /* border-radius: 200px; */
    /* Replaced by clip-path */
    overflow: hidden;
    margin-bottom: 2.5rem;
    /* Space below image */
    /* box-shadow: 0 8px 25px rgba(0,0,0,0.25); */
    /* Replaced by filter for conforming shadow */
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
    /* Shadow that conforms to clip-path */
    clip-path: url(#goggleClipPath);
}

.portfolio-image-mask video,
.portfolio-image-mask iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none;
    object-fit: cover;
    object-position: center;
    /* Centered by default */
    transform: scale(1);
    /* Normal size by default */
    transition: transform 0.4s ease-out, object-position 0.4s ease-out;
    /* Smooth transition */
}

.portfolio-image-mask:hover video,
.portfolio-image-mask:hover iframe {
    transform: scale(1.2);
    /* Zoom in on hover (120% zoom) */
    object-position: top;
    /* Align to top on hover */
}

.see-work-button {
    background-color: #E0E0E0;
    color: #1A1B1F;
    /* Dark text to match new section background */
    padding: 0.6rem 2rem;
    /* Reduced padding */
    border-radius: 50px;
    /* Keep the pill shape */
    text-decoration: none;
    font-weight: 600;
    /* Increased font weight for thicker text */
    font-size: 0.8rem;
    /* Further reduced font size */
    margin-bottom: 12rem;
    /* Keep existing margin for now */
    transition: background-color 0.3s, color 0.3s;
    display: inline-block;
    /* Ensure padding and margins work as expected */
}

.see-work-button:hover {
    background-color: #cccccc;
    transform: translateY(-2px);
}

.social-icons {
    display: flex;
    gap: 20px;
    /* Spacing between icons */
    margin-bottom: 2rem;
    /* Space below icons */
}

.social-icon {
    width: 38px;
    height: 38px;
    background-color: #5a5b5e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.social-icon i {
    font-size: 18px;
    color: #131419;
    transition: transform 0.3s ease;
}

.social-icon:hover {
    background-color: #ffffff;
    /* Background becomes white on hover */
}

.social-icon:hover i {
    transform: scale(1.4);
    /* Icon scales up on hover */
}


/* Basic placeholders - replace with actual SVG/Font icons */
.social-icon[aria-label="Twitter"]::before {
    content: 'T';
}

.social-icon[aria-label="YouTube"]::before {
    content: 'Y';
}

.social-icon[aria-label="Instagram"]::before {
    content: 'I';
}

.social-icon[aria-label="Behance"]::before {
    content: 'Bē';
}

.copyright-text {
    font-size: 0.8rem;
    color: #5D5E62;
    margin: 0;
    padding-top: 2rem;
}

/* Portfolio Footer */
.portfolio-footer {
    padding: 40px 20px 2rem 20px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 2rem;
    /* Add bottom margin to match other pages */
}

.portfolio-footer .social-icons {
    margin-bottom: 25px;
    margin-top: 44px;
    display: flex;
    justify-content: center;
}

.portfolio-footer .copyright-text {
    font-size: 0.8rem;
    color: #777;
    margin: 0;
    padding-top: 2rem;
}

/* Hide scrollbar for WebKit browsers - This might be redundant now if html/body overflow is hidden */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Firefox */
html,
body {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

/* Common styles for both ::before and ::after pseudo-elements */
body::before,
body::after {
    content: '';
    position: fixed;
    /* Fixed to viewport */
    top: 0;
    left: 0;
    width: 100vw;
    /* Use viewport units */
    height: 100vh;
    /* Use viewport units */
    background-size: cover;
    background-position: center center;
    /* More explicit */
    background-repeat: no-repeat;
    /* Explicitly no repeat */
    opacity: 0;
    /* Both start transparent */
    transition: opacity 0.35s ease-in-out;
    /* FASTER DURATION - Was 0.7s */
    z-index: -1;
    /* Behind body's content, in front of html's background */
    /* Default to transparent gradient and no image URL initially */
    background-image: linear-gradient(180deg, hsla(242, 75%, 9%, 0.7) 0%, hsla(252, 56%, 11%, 0.7) 33%, hsla(263, 74%, 13%, 0.7) 67%, hsla(282, 82%, 12%, 0.7) 100%), none;
}

body::before {
    background-image: var(--gradient-overlay, linear-gradient(180deg, hsla(242, 75%, 9%, 0.7) 0%, hsla(252, 56%, 11%, 0.7) 33%, hsla(263, 74%, 13%, 0.7) 67%, hsla(282, 82%, 12%, 0.7) 100%)),
        var(--bg-image-before, none);
}

body::after {
    background-image: var(--gradient-overlay, linear-gradient(180deg, hsla(242, 75%, 9%, 0.7) 0%, hsla(252, 56%, 11%, 0.7) 33%, hsla(263, 74%, 13%, 0.7) 67%, hsla(282, 82%, 12%, 0.7) 100%)),
        var(--bg-image-after, none);
}

/* SERVICE HOVER BACKGROUND CONTAINERS: These elements show background images when hovering over service items.
   IMPLEMENTATION: Extended height to reach the curved divider position, applied serviceHoverMask clip-path.
   DEBUG: Red borders added to visualize mask alignment with the curved divider.
   GOAL: The bottom curve of this mask should perfectly overlap the existing curved-section-divider. 
   
   ADJUSTMENT VARIABLES for fine-tuning alignment:
   - Adjust transform: translateY() to move the entire mask up/down
   - Modify the SVG path coordinates in the HTML file
   */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* Only cover hero section */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 0;
    pointer-events: none;
}

.hero-bg.before {
    background-image: var(--bg-image-before, none);
}

.hero-bg.after {
    background-image: var(--bg-image-after, none);
}

body.show-before .hero-bg.before,
body.show-after .hero-bg.after {
    opacity: 1;
}

.hero-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    padding: 2rem;
    position: relative;
    z-index: 2;
    /* Above background images */
    overflow: hidden;
}

.hero-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Match hero section height */
    z-index: 0;
    /* Behind gradient overlay */
    pointer-events: none;
    overflow: hidden;
    /* Contain within hero */
}

/* Full background container - matches test SVG dimensions exactly */
.full-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh + 180px);
    /* Exact same height as test SVG */
    z-index: 0;
    /* Above background but below content */
    pointer-events: none;
    overflow: hidden;
}

.full-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    clip-path: url(#serviceHoverMask);
    /* Apply the curve mask */
}

.full-bg.before {
    background-image: var(--bg-image-before, none);
}

.full-bg.after {
    background-image: var(--bg-image-after, none);
}

body.show-before .full-bg.before,
body.show-after .full-bg.after {
    opacity: 1;
}

/* Mask styles have been removed as requested */

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            hsla(242, 75%, 9%, 0.6) 0%,
            /* Original opacity */
            hsla(252, 56%, 11%, 0.6) 33%,
            hsla(263, 74%, 13%, 0.6) 67%,
            hsla(282, 82%, 12%, 0.6) 100%);
    z-index: 1;
    /* Above background images but below content */
    pointer-events: none;
}

/* Hero and divider container */
.hero-container {
    position: relative;
    min-height: 100vh;
    z-index: 1;
    margin-bottom: 0;
    /* Ensure no gap */
}

/* Curved divider section */
.curved-section-divider {
    position: relative;
    width: 100%;
    height: 100px;
    /* Adjust based on your design */
    background: #0a0925;
    z-index: 2;
    margin-top: 0;
    /* Remove any gap */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.portfolio-section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    background: #0a0925;
    /* Solid dark background for portfolio section */
    z-index: 2;
    /* Above the hero background */
    padding: 2rem;
    box-sizing: border-box;
    margin-top: -1px;
    /* Fix for any potential gap */
}

/* Common Logo Header Styles - Consistent across all pages */
.logo-header {
    display: flex;
    justify-content: center;
    padding: 3rem 20px 20px;
    /* 48px top padding for consistency */
    width: 100%;
    box-sizing: border-box;
}

.logo-header .logo {
    margin-bottom: 0;
}

.logo-header .logo img {
    max-width: 200px;
    height: auto;
    opacity: 1;
}

/* Override individual page headers to maintain consistency */
header {
    display: flex;
    justify-content: center;
    padding-top: 3rem;
    /* Changed from 2rem to 3rem (48px) */
    position: relative;
    z-index: 10;
}

/* Override for index page header inside hero-section */
.hero-section header {
    padding-top: 1rem;
    /* Reduced from 3rem because hero-section already has 2rem padding */
}

.logo img {
    max-width: 200px;
    height: auto;
    opacity: 1;
    /* Ensure logo is fully opaque */
    position: relative;
    z-index: 10;
    /* Place logo above any overlays */
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    position: relative;
}

.services {
    display: flex;
    position: relative;
    z-index: 3;
    /* Ensure services are above the background */
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    text-align: center;
}

.service-item {
    position: relative;
    padding: 0.5rem 1rem;
    font-weight: 300;
    letter-spacing: 5px;
    color: #C8BEDC;
    font-size: 1.5rem;
    transition: transform 0.3s ease-out, color 0.3s ease;
    opacity: 0.8;
    cursor: pointer;
    text-decoration: none;
}

.service-item:hover {
    transform: scale(1.05);
    opacity: 1;
    color: #FFFFFF;
    /* White text on hover */
}

.service-item::before,
.service-item::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(138, 80, 232, 0.3), transparent);
    top: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.service-item::before {
    left: 0;
}

.service-item::after {
    right: 0;
}

.service-item:hover::before,
.service-item:hover::after {
    opacity: 0;
    /* Keep borders hidden on hover */
}

.reel-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 120px;
    /* Increased from 20px to move it up */
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 6s infinite;
    cursor: pointer;
    z-index: 10;
}

/* Keyframes for the reel section's bounce */
@keyframes bounce {

    0%,
    100% {
        /* Start and end of the full 6s cycle, and also the resting state after the quick bounce */
        transform: translateX(-50%) translateY(0);
    }

    8% {
        /* Peak of the quick bounce (0.08 * 6s = 0.48s into the animation) */
        transform: translateX(-50%) translateY(-10px);
        /* Adjust -10px for more/less bounce height */
    }

    16% {
        /* End of the quick bounce, back to rest (0.16 * 6s = 0.96s into the animation) */
        transform: translateX(-50%) translateY(0);
    }

    /* From 16% to 100%, it stays at translateY(0), creating the pause */
}

.reel-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    /* Reduced from 0.8rem */
    font-weight: 500;
    color: rgba(200, 190, 220, 0.7);
    /* Reduced from 0.85 opacity */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.reel-arrow {
    width: 30px;
    height: 20px;
    position: relative;
}

.reel-arrow::before,
.reel-arrow::after {
    content: '';
    position: absolute;
    width: 10px;
    /* Increased from 8px */
    height: 22px;
    /* Increased from 18px */
    background-color: #FFD89C;
    border-radius: 11px;
    /* Increased from 9px */
    bottom: 0;
}

.reel-arrow::before {
    left: 50%;
    transform: translateX(-100%) rotate(45deg);
    transform-origin: bottom right;
}

.reel-arrow::after {
    left: 50%;
    transform: rotate(-45deg);
    transform-origin: bottom left;
}

/* Back Section (similar to reel-section but pointing up) */
.back-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin: 4rem auto 3rem auto;
    animation: bounce-up 6s infinite;
    cursor: pointer;
    z-index: 10;
}

/* Keyframes for the back section's bounce (upward direction) */
@keyframes bounce-up {

    0%,
    100% {
        /* Start and end of the full 6s cycle, and also the resting state after the quick bounce */
        transform: translateY(0);
    }

    8% {
        /* Peak of the quick bounce (0.08 * 6s = 0.48s into the animation) */
        transform: translateY(-15px);
        /* Bounce upward more prominently */
    }

    16% {
        /* End of the quick bounce, back to rest (0.16 * 6s = 0.96s into the animation) */
        transform: translateY(0);
    }

    /* From 16% to 100%, it stays at translateY(0), creating the pause */
}

.back-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(200, 190, 220, 0.7);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-top: 10px;
    /* Changed from margin-bottom to margin-top */
    letter-spacing: 2px;
}

.back-arrow {
    width: 30px;
    height: 20px;
    position: relative;
    /* Remove the rotation - we want the arrow to point up naturally */
}

.back-arrow::before,
.back-arrow::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 22px;
    background-color: #FFD89C;
    border-radius: 11px;
    top: 0;
    /* Change from bottom to top */
}

.back-arrow::before {
    left: 50%;
    transform: translateX(-100%) rotate(-45deg);
    /* Flip the angle to point up */
    transform-origin: top right;
    /* Change origin to top */
}

.back-arrow::after {
    left: 50%;
    transform: rotate(45deg);
    /* Flip the angle to point up */
    transform-origin: top left;
    /* Change origin to top */
}

footer {
    padding: 1rem 0;
    text-align: center;
    padding: 20px 0;
    position: relative;
    z-index: 100;
    /* Very high z-index to ensure it's above all overlays */
    opacity: 1 !important;
    /* Force full opacity */
}

footer a:hover,
footer .footer-link:hover,
footer .footer-item a:hover {
    color: #ffd89c !important;
    /* Desired hover color, made more assertive */
    transition: color 0.3s ease;
    /* Smooth transition for the color change */
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 5rem;
    opacity: 1 !important;
    /* Force navigation list to be fully opaque */
    position: relative;
    z-index: 101;
}

nav ul li a {
    color: #a0a0a0 !important;
    /* Force the exact color - no opacity */
    text-decoration: none;
    font-size: 0.9rem;
    /* Match gallery font size */
    letter-spacing: 2px;
    transition: color 0.3s ease;
    text-transform: uppercase;
    font-weight: 500 !important;
    /* Force the thickness */
    opacity: 1 !important;
    /* Force full opacity */
    position: relative;
    z-index: 101;
    /* Above footer */
}

nav ul li a:hover {
    color: #ffffff;
}

.blinking-star {
    position: relative;
    /* width & height will be set by size classes */
    /* background-color & box-shadow will be set by color+size classes */
    animation: blinkFade 3s infinite ease-in-out;
    clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
}

/* --- Star Color 1 (Cyan) --- */
.blinking-star.star-color-1.star-size-s {
    width: 7px;
    height: 7px;
    /* Was 10px */
    background-color: rgba(80, 200, 220, 0.8);
    box-shadow: 0 0 3px rgba(80, 200, 220, 0.7), 0 0 6px rgba(80, 200, 220, 0.5), 0 0 8px rgba(80, 200, 220, 0.3);
    /* Adjusted */
}

.blinking-star.star-color-1.star-size-m {
    width: 10px;
    height: 10px;
    /* Was 15px */
    background-color: rgba(80, 200, 220, 0.8);
    box-shadow: 0 0 4px rgba(80, 200, 220, 0.7), 0 0 8px rgba(80, 200, 220, 0.5), 0 0 12px rgba(80, 200, 220, 0.3);
    /* Adjusted */
}

.blinking-star.star-color-1.star-size-l {
    width: 12px;
    height: 12px;
    /* Was 17px */
    background-color: rgba(80, 200, 220, 0.8);
    box-shadow: 0 0 5px rgba(80, 200, 220, 0.7), 0 0 10px rgba(80, 200, 220, 0.5), 0 0 15px rgba(80, 200, 220, 0.3);
    /* Adjusted */
}

/* --- Star Color 2 (Bluish) --- */
.blinking-star.star-color-2.star-size-s {
    width: 7px;
    height: 7px;
    /* Was 10px */
    background-color: rgba(180, 180, 220, 0.7);
    box-shadow: 0 0 3px rgba(180, 180, 220, 0.6), 0 0 6px rgba(180, 180, 220, 0.4), 0 0 8px rgba(180, 180, 220, 0.2);
    /* Adjusted */
}

.blinking-star.star-color-2.star-size-m {
    width: 10px;
    height: 10px;
    /* Was 15px */
    background-color: rgba(180, 180, 220, 0.7);
    box-shadow: 0 0 4px rgba(180, 180, 220, 0.6), 0 0 8px rgba(180, 180, 220, 0.4), 0 0 12px rgba(180, 180, 220, 0.2);
    /* Adjusted */
}

.blinking-star.star-color-2.star-size-l {
    width: 12px;
    height: 12px;
    /* Was 17px */
    background-color: rgba(180, 180, 220, 0.7);
    box-shadow: 0 0 5px rgba(180, 180, 220, 0.6), 0 0 10px rgba(180, 180, 220, 0.4), 0 0 15px rgba(180, 180, 220, 0.2);
    /* Adjusted */
}

/* --- Star Color 3 (Yellowish) --- */
.blinking-star.star-color-3.star-size-s {
    width: 7px;
    height: 7px;
    /* Was 10px */
    background-color: rgba(230, 200, 120, 0.7);
    box-shadow: 0 0 3px rgba(230, 200, 120, 0.6), 0 0 6px rgba(230, 200, 120, 0.4), 0 0 8px rgba(230, 200, 120, 0.2);
    /* Adjusted */
}

.blinking-star.star-color-3.star-size-m {
    width: 10px;
    height: 10px;
    /* Was 15px */
    background-color: rgba(230, 200, 120, 0.7);
    box-shadow: 0 0 4px rgba(230, 200, 120, 0.6), 0 0 8px rgba(230, 200, 120, 0.4), 0 0 12px rgba(230, 200, 120, 0.2);
    /* Adjusted */
}

.blinking-star.star-color-3.star-size-l {
    width: 12px;
    height: 12px;
    /* Was 17px */
    background-color: rgba(230, 200, 120, 0.7);
    box-shadow: 0 0 5px rgba(230, 200, 120, 0.6), 0 0 10px rgba(230, 200, 120, 0.4), 0 0 15px rgba(230, 200, 120, 0.2);
    /* Adjusted */
}

/* --- Star Color 4 (Purplish-blue) --- */
.blinking-star.star-color-4.star-size-s {
    width: 7px;
    height: 7px;
    /* Was 10px */
    background-color: rgba(150, 170, 230, 0.7);
    box-shadow: 0 0 3px rgba(150, 170, 230, 0.6), 0 0 6px rgba(150, 170, 230, 0.4), 0 0 8px rgba(150, 170, 230, 0.2);
    /* Adjusted */
}

.blinking-star.star-color-4.star-size-m {
    width: 10px;
    height: 10px;
    /* Was 15px */
    background-color: rgba(150, 170, 230, 0.7);
    box-shadow: 0 0 4px rgba(150, 170, 230, 0.6), 0 0 8px rgba(150, 170, 230, 0.4), 0 0 12px rgba(150, 170, 230, 0.2);
    /* Adjusted */
}

.blinking-star.star-color-4.star-size-l {
    width: 12px;
    height: 12px;
    /* Was 17px */
    background-color: rgba(150, 170, 230, 0.7);
    box-shadow: 0 0 5px rgba(150, 170, 230, 0.6), 0 0 10px rgba(150, 170, 230, 0.4), 0 0 15px rgba(150, 170, 230, 0.2);
    /* Adjusted */
}

/* Clean up old general color definitions if any remain that are not combined with size */
/* Ensure pseudo-element styles for cross shape are fully removed */
.blinking-star::before,
.blinking-star::after {
    content: '';
    /* Keep for potential future use, but not for shape now */
    position: absolute;
    /* Keep for potential future use */
}

/* --- Shooting Star --- */
/* Shooting Stars - Fixed Visibility & JS Ready */
.shooting-star {
    position: absolute;
    bottom: 0;
    /* background will be set by JS for dynamic gradients */
    transform-origin: bottom left;
    /* animation-name, animation-duration, animation-timing-function will be set by JS */
    animation-play-state: paused;
    opacity: 0;
    /* Start hidden, JS will make it appear */
    z-index: 5;
    /* Default dimensions - these will be overridden by specific classes */
    width: 100px;
    /* Default width */
    height: 1px;
    /* Default height */
    border-radius: 50%;
    /* Make it round */
}

.shooting-star::before {
    /* Head of the shooting star */
    content: '';
    position: absolute;
    top: 0;
    /* Aligns with the 'tip' of the tail */
    right: 0;
    /* Aligns with the 'tip' of the tail */
    width: 3px;
    /* Head width */
    height: 3px;
    /* Head height */
    background: rgba(255, 220, 100, 0.9);
    box-shadow: 0 0 10px rgba(255, 220, 100, 0.7);
    border-radius: 50%;
    /* Make it round */
}

/* Individual star SIZES and POSITIONS - Timing is handled by JS */
.shooting-star.star-main {
    /* width: 140px !important; -- JS will set this */
    /* height: 3px !important; -- JS will set this */
    left: 30%;
    /* Changed from 50% to avoid dead center */
}

.shooting-star.star-1 {
    /* width: 100px !important; -- JS will set this */
    /* height: 2.5px !important; -- JS will set this */
    left: 20%;
}

.shooting-star.star-2 {
    /* width: 80px !important; -- JS will set this */
    /* height: 2px !important; -- JS will set this */
    left: 70%;
}

.shooting-star.star-3 {
    /* width: 90px !important; -- JS will set this */
    /* height: 1.5px !important; -- JS will set this */
    left: 40%;
}

.shooting-star.star-4 {
    /* width: 70px !important; -- JS will set this */
    /* height: 1px !important; -- JS will set this */
    left: 85%;
}

@keyframes shoot-fast {
    0% {
        opacity: 0;
        transform: translateY(0) rotate(-90deg) translateX(-50%);
    }

    10% {
        opacity: 0.7;
    }

    /* Quick appearance */
    70% {
        opacity: 0.7;
        transform: translateY(-80vh) rotate(-90deg) translateX(-50%);
    }

    /* Visible for a short while, partial travel */
    100% {
        opacity: 0;
        transform: translateY(-110vh) rotate(-90deg) translateX(-50%);
    }

    /* Fades out quickly, completes travel */
}

@keyframes shoot-medium {

    /* This was the original 'shoot' */
    0% {
        opacity: 0;
        transform: translateY(0) rotate(-90deg) translateX(-50%);
    }

    20% {
        opacity: 0.7;
    }

    /* Changed from 1 */
    80% {
        opacity: 0.7;
        transform: translateY(-90vh) rotate(-90deg) translateX(-50%);
    }

    /* Changed from 1 */
    100% {
        opacity: 0;
        transform: translateY(-110vh) rotate(-90deg) translateX(-50%);
    }
}

@keyframes shoot-slow {
    0% {
        opacity: 0;
        transform: translateY(0) rotate(-90deg) translateX(-50%);
    }

    25% {
        opacity: 0.7;
    }

    /* Slower appearance */
    90% {
        opacity: 0.7;
        transform: translateY(-100vh) rotate(-90deg) translateX(-50%);
    }

    /* Stays visible longer, nearly full travel */
    100% {
        opacity: 0;
        transform: translateY(-110vh) rotate(-90deg) translateX(-50%);
    }

    /* Fades out at the very end */
}

@keyframes blinkFade {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

/* Simple bounce animation removed - using the one with translateX for reel section */

/* Commenting out original scroll indicator as it's being replaced */
/*
.scroll-indicator {
{{ ... */

/* Curved Section Divider Styling */
.curved-section-divider {
    width: 100%;
    height: 180px;
    background: linear-gradient(180deg,
            hsla(282, 82%, 12%, 0.6) 0%,
            /* Starts with hero's bottom color */
            hsla(270, 60%, 15%, 0.65) 50%,
            /* Middle point: slightly more saturated and a bit lighter */
            hsla(265, 50%, 20%, 0.7) 100%
            /* End point: noticeably lighter and more purplish */
        );
    position: relative;
    clip-path: url(#heroDividerCurveClip);
    /* Has the curve shape */
    z-index: 1;
    /* Same level as hero section */
}

/*
.curved-section-divider::after {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #131419; 
    clip-path: ellipse(50% 270px at 50% 100%); 
    z-index: 1; 
}
*/

/* Portfolio Section */
.portfolio-section {
    min-height: 100vh;
    background-color: transparent;
    /* Changed to transparent */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Center content vertically, adjust with margins if needed */
    padding: 0.1rem 2rem 2rem 2rem;
    /* Inset content, further reduced top padding */
    text-align: center;
    /* Helps with centering some inline or inline-block elements */
    position: relative;
    /* Keep for child positioning or future pseudo-elements */
    /* z-index: 0; */
    /* Typically not needed unless specific stacking conflicts arise */
}

.portfolio-indicator {
    width: 24px;
    height: 24px;
    background-color: transparent;
    /* Make center transparent */
    border: 6px solid #FFD700;
    /* Yellow border to create the ring */
    border-radius: 50%;
    margin-bottom: 8rem;
    /* Space below indicator */
}

/* Gallery Page Specific Styles */

/* Gallery Header */
.gallery-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 20px 20px;
    /* Changed from 40px to 3rem (48px) for consistency */
    width: 100%;
    box-sizing: border-box;
}

.gallery-header .logo {
    margin-bottom: 30px;
    /* Space between logo and nav */
}

.gallery-header .logo img {
    height: 25px;
    /* Adjusted height for the 'O' logo version */
    width: auto;
}

.gallery-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.gallery-nav li {
    margin: 0 20px;
    /* Spacing between nav items */
}

.gallery-nav a {
    text-decoration: none;
    color: rgba(160, 160, 160, 0.6);
    /* More transparent default color */
    font-size: 0.9rem;
    font-weight: 300;
    /* Thinner weight for non-active items */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.3s ease, font-weight 0.3s ease, opacity 0.3s ease;
}

.gallery-nav a:hover,
.gallery-nav a.active {
    color: #ffffff;
    /* Active/hover nav item color */
    font-weight: 500;
    /* Normal weight for active/hovered items */
}

/* Gallery Container & Grid */
/* Gallery container styles */

.gallery-container {
    padding: 40px 0;
    /* Vertical padding, no horizontal padding */
    width: 100%;
    /* Use 100% of parent width instead of viewport width */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Bottom SVG styles */
.overlay-svg-bottom {
    z-index: 1000 !important;
}

.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    /* No gap between images */
    width: 100%;
    /* Ensure the grid itself takes full width of its container */
}

@media (max-width: 768px) {
    .gallery-grid {
        flex-direction: column !important;
    }

    .project-gallery .image-grid {
        flex-direction: column !important;
    }
}

.gallery-item {
    height: 30vh;
    /* Explicit uniform height for all gallery items */
    overflow: hidden;
    position: relative;
    background-color: transparent;
    /* Make the item background transparent */
    transition: opacity 0.3s ease-in-out;
    will-change: opacity;
    box-sizing: border-box;
    /* Ensure padding/borders don't break flex sizing */
    margin: 0;
    /* No margin */
    padding: 0;
    /* No padding */
    border: none;
    /* No border */
}

.gallery-item a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0 !important;
    /* Make images transparent to see container colors */
    min-width: 100%;
    min-height: 100%;
}

.gallery-item:hover img {
    transform: scale(1.2);
    /* Subtle scale instead of darkening */
    opacity: 0.3;
    /* Keep full opacity */
    filter: none;
    /* Remove any filters */
}

/* New size classes for gallery items - Flexbox version */
.size-1of6 {
    flex: 0 0 calc(100% / 6);
    /* Exact 1/6 */
    background-color: red !important;
    /* Debug color */
}

.size-1-5of6 {
    flex: 0 0 25%;
    /* 1.5/6 = 25% */
    background-color: blue !important;
    /* Debug color */
}

.size-2of6 {
    flex: 0 0 calc(200% / 6);
    /* Exact 2/6 */
    background-color: green !important;
    /* Debug color */
}

.size-3of6 {
    flex: 0 0 calc(300% / 6);
    /* Exact 3/6 */
    background-color: yellow !important;
    /* Debug color */
}

/* Gallery Footer (similar to index page footer, but with specific class for potential overrides) */
.gallery-footer {
    padding: 40px 20px 2rem 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 30px;
    margin-bottom: 2rem;
    /* Add bottom margin to match other pages */
}

.gallery-footer .footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    /* Space below nav links */
    display: flex;
    justify-content: center;
}

.gallery-footer .footer-nav li {
    margin: 0 15px;
}

.gallery-footer .footer-nav a {
    text-decoration: none;
    color: #a0a0a0;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.gallery-footer .footer-nav a:hover {
    color: #ffffff;
}

.gallery-footer .social-icons {
    margin-bottom: 25px;
    /* Space below social icons */
    margin-top: 44px;
    /* Space above social icons */
}

.gallery-footer .copyright-text {
    font-size: 0.8rem;
    color: #777;
    margin: 0;
    padding-top: 2rem;
}

/* Gallery Styles - removed duplicate .gallery-item definition */

.gallery-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    /* Very light semi-transparent overlay */
    opacity: 1;
    /* Always visible */
    visibility: visible;
    pointer-events: none;
    z-index: 1;
    /* Base z-index for the overlay */
}

.gallery-item:hover .gallery-hover-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gallery-hover-overlay img {
    display: block;
    /* Removes any extra space below the image if it were inline */
    height: 80%;
    /* SVG height is 80% of the .gallery-hover-overlay's height */
    width: auto;
    /* Maintains the SVG's aspect ratio */
    max-width: 80%;
    /* Optional: Prevents the SVG from becoming wider than 80% of the overlay width */
}

/* Ensure overlay and all children are always fully opaque */
.gallery-hover-overlay {
    z-index: 10;
}

.gallery-hover-overlay {
    visibility: visible !important;
}

.gallery-hover-overlay * {
    visibility: visible !important;
}

/* SVGs are hidden by default and shown on hover */
.overlay-svg-top,
.overlay-svg-bottom {
    opacity: 0 !important;
    visibility: visible !important;
}

.gallery-item:hover .overlay-svg-top,
.gallery-item:hover .overlay-svg-bottom {
    opacity: 1 !important;
}

/* Base styles for both SVGs */
.overlay-svg-top,
.overlay-svg-bottom {
    position: absolute;
    left: 50%;
    width: 50%;
    height: auto;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    will-change: transform, opacity;
    z-index: 20;
    /* Above the dark overlay */
    opacity: 0;
    /* Hidden by default */
}

/* Top SVG specific */
.overlay-svg-top {
    top: 0;
    transform: translate(-50%, 5%);
}

/* Bottom SVG specific */
.overlay-svg-bottom {
    bottom: 100px;
    transform: translateX(-50%);
}

/* Hover states - show and transform */
.gallery-item:hover .overlay-svg-top,
.gallery-item:hover .overlay-svg-bottom {
    opacity: 1;
    /* Show on hover */
}

.gallery-item:hover .overlay-svg-top {
    transform: translate(-50%, 25%);
}

.gallery-item:hover .overlay-svg-bottom {
    transform: translate(-50%, -38%);
}

.project-name {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    /* Semi-bold */
    font-size: 1.2rem;
    /* Adjust as needed */
    text-transform: uppercase;
    white-space: nowrap;
    /* Prevent text wrapping */
    letter-spacing: 1.0em;
    /* Larger spacing when not hovered */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s, letter-spacing 0.3s ease-in-out;
    z-index: 30;
    /* Above both overlay and SVGs */
    pointer-events: none;
    /* So it doesn't interfere with hover on SVGs or underlying elements */
    text-align: center;
    /* Keep text centered */
    padding: 0 20px;
    /* Add some horizontal padding */
    width: auto;
    /* Let the content determine the width */
    max-width: 100%;
    /* Ensure it doesn't overflow the viewport */
}

.gallery-item:hover .project-name {
    opacity: 1;
    visibility: visible;
    letter-spacing: 0.5em;
    /* Tighter spacing on hover */
    transition: opacity 0.3s ease-in-out, visibility 0s 0s, letter-spacing 0.3s ease-in-out;
}

/* About Page Styles */
.about-hero-container {
    position: relative;
    min-height: 100vh;
    z-index: 1;
    margin-bottom: 0;
}

.about-hero-section {
    min-height: 100vh;
    background: rgba(33, 3, 44, 0.3);
    position: relative;
    z-index: 2;
}

.about-section-divider {
    width: 100%;
    height: 180px;
    background: rgba(33, 3, 44, 0.3);
    position: relative;
    clip-path: url(#aboutDividerCurveClip);
    z-index: 1;
}

.about-team-section {
    position: relative;
    width: 100vw;
    min-height: auto;
    background: transparent;
    z-index: 2;
    padding: 0 2rem 2rem 2rem;
    box-sizing: border-box;
    margin-top: -1px;
}

.about-page {
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

.about-section {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Who We Are Section */
.who-we-are {
    text-align: center;
    padding-top: 2rem;
}

.about-logo {
    margin-bottom: 3rem;
    padding-top: 1rem;
    /* Add padding to match other pages' 48px total */
}

.about-logo a {
    display: inline-block;
    transition: transform 0.3s ease;
}

.about-logo a:hover {
    transform: scale(1.05);
}

.about-logo img {
    max-width: 200px;
    height: auto;
    opacity: 1;
}

.astronaut-container {
    display: flex;
    justify-content: center;
    margin-bottom: 4rem;
}

.astronaut-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.astronaut-image:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(255, 216, 156, 0.4);
}

.astronaut-image::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: linear-gradient(45deg, #FFD89C, transparent, #FFD89C);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.astronaut-image:hover::before {
    opacity: 0.6;
}

.astronaut-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 6px;
    color: #FFD89C;
    margin-bottom: 3rem;
    text-transform: uppercase;
    text-align: left;
    margin-left: 20%;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
    position: relative;
}

.intro-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    font-weight: 300;
    max-width: 500px;
    margin-left: auto;
    margin-right: 15%;
    text-align: right;
}

.accent-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FFD89C, transparent);
    margin: 2rem 0;
    margin-left: 20%;
}

.manifesto-text {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    font-weight: 300;
    font-style: italic;
    max-width: 550px;
    margin-left: 10%;
}

.genesis-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    margin-top: 2rem;
    max-width: 650px;
    margin-left: auto;
    margin-right: 15%;
    text-align: right;
}

/* Contact Info Section */
.contact-info {
    padding: 2rem;
}

.contact-container {
    display: block;
    max-width: 400px;
    margin: 0;
    margin-left: 20%;
}

.studio-info {
    margin-bottom: 3rem;
}

.general-enquiries {
    margin-bottom: 2rem;
}

.contact-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.studio-address {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-weight: 300;
    font-size: 1.1rem;
}

.studio-address p {
    margin: 0.2rem 0;
}

.contact-details {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
    font-size: 1.1rem;
}

.email {
    margin-bottom: 0.5rem;
}

.phone {
    margin: 0;
}

/* Our Team Section */
.our-team {
    text-align: center;
    padding: 0 2rem 2rem 2rem;
}

.our-team .section-title {
    margin-bottom: 8rem;
    text-align: center;
    margin-left: 0;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
}

.team-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8rem;
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.team-member {
    text-align: center;
}

.member-image {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 2.5rem;
    background: rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.member-image:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 216, 156, 0.3);
}

.member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: #FFD89C;
    margin-bottom: 0.6rem;
    letter-spacing: 1.5px;
    text-transform: capitalize;
}

.member-role {
    font-size: 0.75rem;
    color: #fff;
    font-weight: 300;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* About Footer */
.about-footer {
    padding: 40px 20px 2rem 20px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 2rem;
    /* Add bottom margin to match other pages */
}

.about-footer .footer-nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 3rem;
    margin: 0 0 25px 0;
    /* Space below nav links - matches gallery */
}

.about-footer .footer-nav li {
    margin: 0 15px;
    /* Matches gallery spacing */
}

.about-footer .footer-nav a {
    color: #a0a0a0;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 2px;
    transition: color 0.3s ease;
    text-transform: uppercase;
    font-weight: 500;
}

.about-footer .footer-nav a:hover,
.about-footer .footer-nav a.active {
    color: #ffd89c;
}

.about-footer .social-icons {
    margin-bottom: 25px;
    margin-top: 44px;
    display: flex;
    justify-content: center;
}

.about-footer .copyright-text {
    font-size: 0.8rem;
    color: #777;
    margin: 0;
    padding-top: 2rem;
}

/* Contact Page Styles */
.contact-page {
    min-height: 100vh;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.contact-header {
    display: flex;
    justify-content: center;
    padding: 3rem 20px 20px;
    /* Changed from 40px to 3rem (48px) for consistency */
    width: 100%;
    box-sizing: border-box;
}

.contact-header .logo {
    margin-bottom: 0;
}

.contact-header .logo img {
    max-width: 200px;
    height: auto;
    opacity: 1;
}

/* Contact Form Section */
.contact-form-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.contact-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 10px;
    color: #F4C87E;
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
}

.contact-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 3rem;
    text-align: center;
    font-weight: 300;
}

/* Contact Form */
.contact-form {
    width: 100%;
    max-width: 900px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
    overflow: hidden;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 0;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 1.5rem 2rem;
    background: transparent;
    border: none;
    border-radius: 0;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    transition: all 0.3s ease;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.form-row .form-input:last-child,
.form-row .form-select:last-child {
    border-right: none;
}

.form-select {
    margin-bottom: 0;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4C87E' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2rem center;
    background-size: 20px;
    padding-right: 4rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1.5rem 2rem;
}

.form-row:last-of-type .form-input,
.form-row:last-of-type .form-select {
    border-bottom: none;
}

.form-select:first-child {
    grid-column: 1 / -1;
    border-right: none;
}

.form-select option {
    background: transparent;
    color: #FFFFFF;
}

.form-textarea {
    resize: none;
    margin-bottom: 0;
    min-height: 150px;
    grid-column: 1 / -1;
    border-right: none;
    border-bottom: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Checkbox styling */
.form-checkbox {
    display: flex;
    align-items: center;
    padding: 2rem;
    cursor: pointer;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
}

.form-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    margin-right: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    background: rgba(255, 255, 255, 0.1);
}

.form-checkbox input[type="checkbox"]:checked {
    background: #F4C87E;
    border-color: #F4C87E;
}

.form-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    background: #1a1a2e;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.form-checkbox label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-weight: 300;
    cursor: pointer;
    user-select: none;
}

/* Submit button container */
.form-submit-container {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

/* Submit button */
.form-submit {
    background: linear-gradient(90deg, rgba(255, 216, 156, 0.8), rgba(255, 216, 156, 0.6));
    color: #1a1a2e;
    padding: 1rem 3rem;
    border: none;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    box-shadow: 0 4px 15px rgba(255, 216, 156, 0.3);
}

.form-submit:hover {
    background: linear-gradient(90deg, rgba(255, 216, 156, 1), rgba(255, 216, 156, 0.8));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 216, 156, 0.4);
}

.form-submit:active {
    transform: translateY(0);
}

/* Form result messages */
.form-result {
    margin-top: 1rem;
    padding: 1rem 2rem;
    border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(-10px);
    display: none;
}

.form-result.show {
    opacity: 1;
    transform: translateY(0);
    display: block;
}

.form-result.success {
    background: linear-gradient(90deg, rgba(144, 238, 144, 0.2), rgba(144, 238, 144, 0.1));
    color: #90EE90;
    border: 1px solid rgba(144, 238, 144, 0.3);
}

.form-result.error {
    background: linear-gradient(90deg, rgba(255, 99, 99, 0.2), rgba(255, 99, 99, 0.1));
    color: #FF6B6B;
    border: 1px solid rgba(255, 99, 99, 0.3);
}

.form-result.loading {
    background: linear-gradient(90deg, rgba(255, 216, 156, 0.2), rgba(255, 216, 156, 0.1));
    color: rgba(255, 216, 156, 0.8);
    border: 1px solid rgba(255, 216, 156, 0.3);
}

/* Contact Footer */
.contact-footer {
    padding: 40px 20px 2rem 20px;
    text-align: center;
    margin-top: auto;
    margin-bottom: 2rem;
    /* Match other pages */
}

.contact-footer .footer-nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 3rem;
    margin: 0 0 25px 0;
}

.contact-footer .footer-nav li {
    margin: 0 15px;
}

.contact-footer .footer-nav a {
    color: #a0a0a0;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 2px;
    transition: color 0.3s ease;
    text-transform: uppercase;
    font-weight: 500;
}

.contact-footer .footer-nav a:hover,
.contact-footer .footer-nav a.active {
    color: #ffd89c;
}

.contact-footer .social-icons {
    margin-bottom: 25px;
    margin-top: 44px;
    display: flex;
    justify-content: center;
}

.contact-footer .copyright-text {
    font-size: 0.8rem;
    color: #777;
    margin: 0;
    padding-top: 2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-container {
        margin: 0 auto;
        text-align: center;
    }

    .team-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .section-title {
        font-size: 2rem;
        letter-spacing: 4px;
        margin-left: 0;
        text-align: center;
    }

    .about-section {
        padding: 2rem 1rem;
    }

    .about-footer .footer-nav ul {
        flex-direction: column;
        gap: 1rem;
    }

    .about-content {
        margin: 0 auto;
        text-align: center;
    }

    .intro-text,
    .manifesto-text,
    .genesis-text {
        margin-left: auto;
        margin-right: auto;
        max-width: 90%;
    }

    .accent-line {
        margin: 2rem auto;
    }

    /* Contact page responsive */
    .contact-title {
        font-size: 1.8rem;
        letter-spacing: 4px;
    }

    .contact-form {
        border-radius: 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-row .form-input,
    .form-row .form-select {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .form-row:last-of-type .form-input:last-child {
        border-bottom: none;
    }

    .contact-footer .footer-nav ul {
        flex-direction: column;
        gap: 1rem;
    }

    .form-submit {
        padding: 0.8rem 2rem;
        font-size: 0.8rem;
    }
}

/* PROJECT DETAIL PAGE STYLES */

/* Project Hero Section */
.project-hero {
    position: relative;
    width: 100%;
    height: 60vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-hero-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-logo {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.project-logo img {
    height: 2.5rem;
    width: auto;
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.project-hero-image {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.project-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* COMPLETE PROJECT DETAIL PAGE REBUILD */

/* Hero Section - 70vh with logo and first portrait */
.project-hero-full {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-hero-full .project-logo {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
}

.project-hero-full .project-logo img {
    height: 1.5rem;
    width: auto;
    opacity: 1;
    filter: brightness(0) invert(1);
}

.hero-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.project-hero-full .project-logo {
    z-index: 20;
}

/* Project Hero Section - matching Adobe XD exactly */
.project-hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Portrait background covering full viewport */
.hero-portrait-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-portrait-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Gray overlay for Adobe XD style - much stronger to match the clean look */
.hero-portrait-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(128, 128, 128, 0.95);
    z-index: 2;
}

/* Blue circular element matching Adobe XD */
.blue-circle-element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 3px solid #4A90E2;
    border-radius: 50%;
    z-index: 8;
}

.blue-circle-element::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: #4A90E2;
    border-radius: 50%;
}

/* Logo at top center */
.hero-logo {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.hero-logo img {
    height: 1.5rem;
    width: auto;
    filter: brightness(0) invert(1);
}

/* Content area overlaid on background like Adobe XD */
.hero-content-area {
    position: absolute;
    bottom: 8%;
    left: 0;
    right: 0;
    background: transparent;
    padding: 3rem 0;
    z-index: 9;
}

.content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: start;
}

.main-content {
    color: #fff;
}

.main-content .project-title {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 6px;
    margin-bottom: 1rem;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.2;
}

.main-content .project-subtitle {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
}

.main-content .project-description p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
    letter-spacing: 0.5px;
    max-width: 500px;
}

.credits-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.credits-content .credit-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
    text-align: right;
}

.credits-content .credit-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.credits-content .credit-value {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55) !important;
    /* Dimmer than labels (0.6) */
    font-weight: 600 !important;
    /* Significantly thicker - semi-bold */
}

.credits-content .project-link {
    display: inline-block;
    padding: 0 !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: none !important;
    transition: all 0.3s ease;
    background: transparent !important;
    text-align: left;
}

.credits-content .project-link:hover {
    color: #fff;
    transform: none;
}

.project-info-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: start;
}

.project-main-content {
    color: #fff;
}

.project-main-content .project-title {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 6px;
    margin-bottom: 1rem;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.2;
}

.project-main-content .project-subtitle {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
}

.project-main-content .project-description p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
    letter-spacing: 0.5px;
    max-width: 500px;
}

.project-credits-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.project-credits-section .credit-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
    text-align: right;
}

.project-credits-section .credit-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.project-credits-section .credit-value {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 400;
}

.full-credit-link {
    margin-top: 2rem;
}

.project-link {
    display: inline-block;
    padding: 0 !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: none !important;
    transition: all 0.3s ease;
    background: transparent !important;
    text-align: left;
}

.project-link:hover {
    color: #fff;
    transform: none;
}

/* Second Portrait Section */
.second-portrait-section {
    width: 100%;
    height: 70vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portrait-image {
    width: 100%;
    height: 100%;
}

.portrait-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Story Section with Image Grid */
.story-section {
    background: #1a1a1a;
    padding: 4rem 0;
    text-align: center;
}

.story-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.story-title {
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 4px;
    margin-bottom: 2rem;
    color: #fff;
    text-transform: uppercase;
}

.story-content {
    margin-bottom: 3rem;
}

.story-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
    letter-spacing: 0.5px;
    max-width: 800px;
    margin: 0 auto;
}

/* Image Grid within Story Section */
.story-section .image-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 250px);
    gap: 1rem;
}

.grid-item {
    overflow: hidden;
    position: relative;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.grid-item:hover img {
    transform: scale(1.05);
}

.grid-large {
    grid-column: span 2;
    grid-row: span 2;
}

.grid-medium {
    grid-column: span 1;
    grid-row: span 2;
}

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

/* Footer Section */
.project-footer-section {
    background: #1a1a1a;
    padding: 3rem 0 2rem 0;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.back-button {
    margin-bottom: 3rem;
}

.back-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.back-link:hover {
    color: #fff;
}

.back-arrow {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    transform: rotate(0deg);
}

.back-text {
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-nav .nav-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.footer-nav .nav-link:hover {
    color: #fff;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: translateY(-2px);
}

.copyright p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
    letter-spacing: 1px;
}

/* Legacy project styles cleanup */

/* PROJECT HERO SECTION */
.project-hero {
    position: relative;
    width: 100%;
    height: 60vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-hero-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-logo {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.project-logo img {
    height: 2rem;
    width: auto;
    opacity: 1;
    filter: brightness(1.5) contrast(1.2);
}

.project-hero-image {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.project-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* PROJECT DETAILS SECTION */
.project-details {
    background: transparent;
    padding: 4rem 0;
    min-height: 40vh;
}

.project-details-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Legacy project-content styles (now handled by project-content-overlay) */
.project-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 6rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    align-items: start;
}

/* Project content styles restored to original */

.project-main-info {
    color: #fff;
}

.project-title {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 6px;
    margin-bottom: 1rem;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.2;
}

.project-subtitle {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
}

.project-description {
    margin-top: 2rem;
}

.project-description p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
    letter-spacing: 0.5px;
    max-width: 500px;
}

.project-meta {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    text-align: left;
}

.project-credits {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-align: left;
    align-items: flex-start;
    /* Ensure content aligns to the start */
}

.credit-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-start;
}

.credit-item:last-child {
    margin-bottom: 0;
}

.credit-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: none;
}

.credit-value {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55) !important;
    /* Dimmer than labels (0.6) */
    font-weight: 600 !important;
    /* Significantly thicker - semi-bold */
    text-transform: none;
}

.credit-separator {
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
    font-size: 0.85rem;
}

.project-links {
    margin-top: 0.75rem;
    width: 100%;
}

.project-credits .project-link {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.5px;
    text-decoration: none;
    font-weight: 300;
    text-transform: none;
    transition: color 0.3s ease;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    margin-top: 1.5rem;
    display: inline-block;
    /* Changed from block to inline-block */
    position: relative;
    width: fit-content;
    /* Ensure link only takes width of text */
    /* overflow: hidden; */
    /* REMOVED - was cutting off underline */
}

.project-credits .project-link::after {
    content: '';
    position: absolute;
    bottom: -3px;
    /* Moved further down to ensure visibility */
    left: 0;
    width: 0;
    height: 2px;
    background: #ffffff;
    /* Changed to white */
    transition: width 0.4s ease;
}

.project-link:hover {
    color: #fff !important;
}

.project-credits .project-link:hover {
    color: #fff !important;
}

.project-credits .project-link:hover::after {
    width: 100% !important;
}

/* Project Footer Navigation */
.project-footer {
    background: transparent;
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.project-nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #fff;
}

.nav-center {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-separator {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
}

.back-link,
.next-link {
    font-weight: 400;
}

/* Gallery Item Links */
.gallery-item-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.gallery-item-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item-link:hover img {
    transform: scale(1.05);
}

/* Responsive Design for Complete Project Detail */
@media (max-width: 768px) {
    .project-hero-full .project-logo {
        top: 1.5rem;
    }

    .project-hero-full .project-logo img {
        height: 1.5rem;
    }

    .project-info-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1rem;
    }

    .project-credits-section {
        align-items: flex-start;
        text-align: left;
    }

    .project-credits-section .credit-item {
        text-align: left;
    }

    .second-portrait-section {
        height: 50vh;
    }

    .story-container {
        padding: 0 1rem;
    }

    .story-title {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }

    .image-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, 200px);
        padding: 0 1rem;
    }

    .grid-large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .grid-medium {
        grid-column: span 1;
        grid-row: span 2;
    }

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

    .footer-nav {
        flex-direction: column;
        gap: 1.5rem;
    }

    .social-links {
        gap: 0.5rem;
    }

    .social-link {
        width: 35px;
        height: 35px;
        font-size: 0.75rem;
    }

    .project-details {
        padding: 2rem 0;
    }

    .project-details-container {
        padding: 0 1rem;
    }

    .project-content {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 0 1rem;
    }

    .project-meta {
        align-items: flex-start;
        text-align: left;
    }

    .credit-item {
        text-align: left;
    }

    .project-links {
        align-self: flex-start;
    }

    .project-title {
        font-size: 1.8rem;
        letter-spacing: 3px;
    }

    .project-subtitle {
        font-size: 0.9rem;
        letter-spacing: 1px;
    }

    .project-nav {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .nav-center {
        order: -1;
    }

    .back-link {
        order: 1;
    }

    .next-link {
        order: 2;
    }
}

/* Movie Credits Overlay Styles */
.movie-credits-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    /* Completely transparent */
    backdrop-filter: none;
    /* No blur */
    z-index: 10000;
    /* Higher than background elements (9999) */
    display: none;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    box-sizing: border-box;
}

.credits-content {
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    /* Hide default scrollbar completely */
    text-align: right;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    padding: 2rem;
    background-color: transparent;
    border-radius: 0;
    backdrop-filter: none;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    position: relative;
}

/* Custom scrollable content container */
.credits-scrollable {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-right: 68px;
    /* Reduced gap by another 4px */
    margin-right: -20px;
    /* Keep default scrollbar hidden */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    scroll-behavior: smooth;
    /* Native smooth scrolling */
}

/* Hide webkit scrollbar completely */
.credits-scrollable::-webkit-scrollbar {
    display: none;
}

/* Custom scrollbar track */
.custom-scrollbar {
    position: absolute;
    right: 16px;
    /* Moved further from content */
    top: 2rem;
    bottom: 2rem;
    width: 8px;
    background: rgba(128, 128, 128, 0.3);
    border-radius: 10px;
    z-index: 10;
}

/* Custom scrollbar thumb */
.custom-scrollbar-thumb {
    position: absolute;
    right: 0;
    width: 8px;
    background: linear-gradient(180deg, #FFD89C 0%, #F4C87E 50%, #E6B566 100%);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 20px;
}

.custom-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #FFDC9C 0%, #F6CA7E 50%, #E8B766 100%);
    box-shadow: 0 4px 8px rgba(255, 216, 156, 0.4);
    transform: scaleX(1.2);
}

.custom-scrollbar-thumb:active {
    background: linear-gradient(180deg, #E6B566 0%, #D4A555 50%, #C29444 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Remove all webkit scrollbar styling - fallback */
.credits-content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.credits-content::-webkit-scrollbar-track {
    display: none !important;
}

.credits-content::-webkit-scrollbar-thumb {
    display: none !important;
}

.credits-content::-webkit-scrollbar-button {
    display: none !important;
}



.credits-title {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 4px;
    margin-bottom: 3rem;
    /* Reverted back to original */
    color: #FFD89C;
    text-transform: uppercase;
    text-align: right;
    /* Changed from center to right */
    width: 100%;
}

.credits-section {
    margin-bottom: 2.5rem;
    /* Reverted back to original */
    animation: fadeInUp 0.8s ease-out;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Changed from center to flex-end for right alignment */
    text-align: right;
    /* Changed from center to right */
    width: 100%;
}

.credits-section:nth-child(even) {
    animation-delay: 0.1s;
}

.credits-section:nth-child(odd) {
    animation-delay: 0.2s;
}

.credits-role {
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.credits-name {
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: #ffffff;
    line-height: 1.4;
}

.special-thanks .credits-name {
    font-size: 1rem;
    line-height: 1.6;
}

.final-credit {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.studio-credit {
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    color: #FFD89C !important;
    letter-spacing: 3px !important;
    margin-bottom: 1rem !important;
}

.credits-year {
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
}

/* Fade in animation for credits */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Mobile responsive adjustments for credits */
@media (max-width: 768px) {
    .movie-credits-overlay {
        padding: 1rem;
    }

    .credits-content {
        padding: 1.5rem;
        max-height: 90vh;
    }

    .credits-title {
        font-size: 2rem;
        letter-spacing: 2px;
        margin-bottom: 2rem;
    }

    .credits-section {
        margin-bottom: 2rem;
    }

    .studio-credit {
        font-size: 1.5rem !important;
        letter-spacing: 2px !important;
    }
}

/* Project Page Credit Items - Increase gap between Agency and Director */
.credit-item {
    margin-bottom: 0.75rem;
    /* Reduced gap between credit items */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-start;
    width: 280px;
    /* Fixed width container for consistent alignment */
    min-width: 280px;
    /* Ensure minimum width */
}


/* Index Page Responsive Styles */
@media (max-width: 768px) {

    /* Hero Section Adjustments */
    .hero-section {
        padding: 1rem;
    }

    .logo-header {
        padding-top: 1.5rem;
    }

    .logo img {
        max-width: 150px;
    }

    .services {
        gap: 1.5rem;
    }

    .service-item {
        font-size: 1.2rem;
        letter-spacing: 3px;
    }

    .reel-section {
        bottom: 100px;
        /* Adjusted position */
    }

    .reel-text {
        font-size: 0.6rem;
    }

    /* Navigation Adjustments */
    nav ul {
        gap: 2rem;
    }

    nav ul li a {
        font-size: 0.8rem;
    }

    /* Portfolio Section Adjustments */
    .portfolio-section {
        padding: 1rem;
        justify-content: center;
    }

    .portfolio-indicator {
        margin-top: 2rem;
        margin-bottom: 4rem;
        width: 20px;
        height: 20px;
        border-width: 4px;
    }

    .portfolio-image-mask {
        margin-bottom: 2rem;
        /* Width is already 100%, aspect ratio handles height */
    }

    .see-work-button {
        padding: 0.5rem 1.5rem;
        font-size: 0.75rem;
        margin-bottom: 6rem;
        /* Reduce bottom margin */
    }

    .portfolio-footer {
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .portfolio-footer .social-icons {
        margin-top: 2rem;
        margin-bottom: 1.5rem;
    }

    /* Adjust curved divider height to prevent sharp curve on mobile */
    .curved-section-divider {
        height: 60px;
        /* Reduced from 180px */
    }

    /* Adjust full-bg-container to match new total height */
    .full-bg-container {
        height: calc(100vh + 60px);
    }

    /* GALLERY PAGE RESPONSIVE STYLES */

    /* Gallery Header */
    .gallery-header {
        padding-top: 1.5rem;
    }

    .gallery-header .logo {
        margin-bottom: 1.5rem;
    }

    .gallery-header .logo img {
        height: 20px;
        /* Smaller logo on mobile */
    }

    /* Gallery Navigation */
    .dynamic-gallery-nav ul {
        gap: 1rem;
        flex-wrap: wrap;
        /* Allow wrapping on small screens */
        padding: 0 1rem;
    }

    .dynamic-gallery-nav li {
        margin: 0;
        /* Reset margin */
    }

    .dynamic-gallery-nav a {
        font-size: 0.75rem;
        /* Smaller text */
        letter-spacing: 1px;
    }

    /* Gallery Grid - Force Column Layout on Mobile */
    .gallery-grid {
        flex-direction: column !important;
        /* Override JS inline styles if any */
        display: block !important;
        /* Simplify layout */
    }

    /* Override JS-assigned sizes on mobile to full width */
    .gallery-item,
    .nested-stack,
    .size-1of6,
    .size-1-5of6,
    .size-2of6,
    .size-3of6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        height: 40vh !important;
        /* Fixed reasonable height for mobile */
        margin-bottom: 0;
        /* No margin between items */
    }

    /* Reset nested stacks to just be containers */
    .nested-stack {
        height: auto !important;
        display: block !important;
    }

    /* Gallery Footer */
    .gallery-footer {
        padding-top: 2rem;
    }

    .gallery-footer .footer-nav ul {
        flex-direction: column;
        gap: 1rem;
    }

    /* PROJECT PAGE RESPONSIVE STYLES (PREMIUM REVAMP) */

    /* Project Hero Image - Use Dynamic Viewport Height */
    .project-hero {
        height: 60vh !important;
        /* Taller hero specifically for mobile */
        min-height: 400px;
    }

    .project-hero .logo img {
        height: 24px;
        /* Slightly larger, clearer logo */
        margin-top: 1rem;
    }

    /* Refined Play Button */
    .play-button,
    .portrait-play-button {
        width: 80px !important;
        /* Fixed touch-friendly size */
        height: 80px !important;
        border-radius: 50% !important;
        /* Circle shape implies action */
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(10px);
        bottom: 50% !important;
        left: 50% !important;
        transform: translate(-50%, 50%) !important;
        /* Centered visually */
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .play-icon-container,
    .portrait-play-icon-container {
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .play-icon,
    .portrait-play-icon {
        font-size: 24px !important;
        color: #FFD89C !important;
        margin-left: 4px;
        /* Optical center adjustment for play triangle */
    }

    /* Project Main Info - Magazine Style Layout */
    .project-main-info {
        padding: 2rem 1.5rem;
        text-align: left;
    }

    .project-title {
        font-size: clamp(2rem, 5vw, 3rem);
        /* Dynamic fluid typography */
        letter-spacing: -0.5px;
        /* Tighter, more modern tracking */
        line-height: 1.1;
        margin-bottom: 0.5rem;
        font-weight: 600;
        background: linear-gradient(180deg, #FFFFFF 0%, #E0E0E0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .project-subtitle {
        font-size: 0.8rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #FFD89C;
        margin-bottom: 2rem;
        opacity: 0.9;
    }

    .project-description {
        padding: 0 1.5rem;
        margin-bottom: 3rem;
    }

    .project-description p {
        font-size: 1.1rem;
        /* Larger, more readable body text */
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 300;
    }

    /* Refined Credits Section - Minimalist & Clean */
    .project-meta {
        padding: 0 1.5rem;
        background: transparent;
        margin-top: 1rem;
    }

    .project-credits {
        display: flex;
        flex-direction: column;
        background: transparent;
        /* Remove box background */
        border-radius: 0;
        padding: 0;
        gap: 2rem;
        border: none;
        /* Remove border */
    }

    .credit-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        width: 100%;
        position: relative;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        /* Clean divider */
        margin: 0;
    }

    /* Remove border for the last item (before the link) */
    .credit-item:nth-last-child(2) {
        border-bottom: none;
        padding-bottom: 0;
    }

    .credit-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: rgba(255, 255, 255, 0.5);
        /* Mutable label */
        font-weight: 500;
    }

    .credit-separator {
        display: none;
    }

    .credit-value {
        font-size: 1.3rem;
        /* Prominent value */
        color: #fff;
        font-weight: 300;
        letter-spacing: 0.5px;
    }

    .project-link {
        grid-column: auto;
        margin-top: 0.5rem;
        font-size: 0.85rem;
        letter-spacing: 2px;
        color: #FFD89C;
        text-align: left;
        display: inline-block;
        opacity: 0.9;
        transition: opacity 0.3s ease;
    }

    /* Floating Back Button - Glassmorphism */
    .floating-back-button {
        left: 20px !important;
        bottom: 30px !important;
        padding: 12px 20px !important;
        background: rgba(20, 20, 20, 0.6) !important;
        backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 30px !important;
        color: white !important;
        font-size: 0.9rem !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    /* Portrait Section - Clean vertical rhythm */
    .project-portrait-section {
        height: 70vh !important;
        /* Taller portrait section */
        margin: 4rem 0;
    }

    /* Story Section */
    .project-story {
        padding: 2rem 1.5rem;
    }

    .story-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        color: #FFD89C;
    }

    .story-content p {
        font-size: 1rem;
        line-height: 1.8;
        margin-bottom: 1.5rem;
    }

    /* Premium Gallery Layout - Horizontal Scroll Snap */
    .row-gallery {
        padding: 0;
        /* Remove side padding for full-bleed scroll */
        gap: 2rem;
    }

    .gallery-row {
        flex-direction: row;
        /* Keep row direction */
        overflow-x: auto;
        /* Enable horizontal scroll */
        scroll-snap-type: x mandatory;
        /* Snap effect */
        padding: 0 1.5rem;
        /* Start text alignment padding */
        gap: 1rem;
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll on iOS */
        scrollbar-width: none;
        /* Hide scrollbar Firefox */
    }

    .gallery-row::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar Chrome/Safari */
    }

    /* Smart sizing based on original intent */
    .row-item.row-full {
        min-width: calc(100vw - 3rem);
        /* Full width minus padding */
        height: 60vw;
        /* Cinema aspect ratio */
        border-radius: 8px;
        scroll-snap-align: center;
    }

    /* For multi-item rows, show part of the next item to encourage scroll */
    .row-item.row-half,
    .row-item.row-two-thirds {
        min-width: 85vw;
        /* Almost full width */
        height: 100vw;
        /* Portrait aspect ratio */
        border-radius: 8px;
        scroll-snap-align: center;
    }

    .row-item.row-third,
    .row-item.row-quarter {
        min-width: 60vw;
        /* Smaller cards */
        height: 80vw;
        border-radius: 8px;
        scroll-snap-align: center;
    }

    .row-item img {
        border-radius: 8px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }
}

@media (max-width: 480px) {
    .logo img {
        max-width: 120px;
    }

    .services {
        gap: 1.2rem;
    }

    .service-item {
        font-size: 1rem;
        letter-spacing: 2px;
    }

    .reel-section {
        bottom: 80px;
    }

    nav ul {
        gap: 1.5rem;
    }

    /* Ensure background elements don't overwhelm */
    .bg-disk {
        opacity: 0.5;
    }

    /* Adjust shooting stars for mobile */
    .shooting-star {
        transform: scale(0.7);
    }

    /* Gallery Specific Mobile Tweaks */
    .gallery-item {
        height: 30vh !important;
        /* Slightly shorter on very small screens */
    }

    .dynamic-gallery-nav ul {
        justify-content: center;
        gap: 0.8rem;
    }

    .dynamic-gallery-nav a {
        font-size: 0.7rem;
    }

    /* Refine mobile even further */
    .project-title {
        font-size: 2.2rem;
    }

    .project-hero {
        height: 55vh !important;
    }



    /* Mobile Play Button - Default Hidden State */
    .play-button,
    .portrait-play-button {
        width: 60px !important;
        height: 60px !important;
        /* Center normally */
        bottom: 50% !important;
        left: 50% !important;
        transform: translate(-50%, 50%) !important;

        /* HIDE by default (when .visible is missing) */
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease !important;
        display: flex !important;
        /* Keep layout but hide visually */
    }

    /* Show when .visible is present */
    .play-button.visible,
    .portrait-play-button.visible {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translate(-50%, 50%) !important;
        /* Keep centered */
    }

    /* Enhanced Exit Button Visibility - Moves to bottom */
    .play-button.exit-mode {
        background: rgba(0, 0, 0, 0.6) !important;
        border-color: rgba(255, 255, 255, 0.4) !important;
        z-index: 1000 !important;
        bottom: 15% !important;
        /* Higher up */
        transform: translate(-50%, 0) !important;
        /* Reset vertical centering */
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 50px !important;
        /* Smaller exit button */
        height: 50px !important;
    }

    .play-button.exit-mode i {
        font-size: 20px !important;
        /* Smaller icon */
    }

    /* Project Hero Fullscreen Handling - Force Override */
    .project-hero[style*="height: 100vh"] {
        height: 100vh !important;
        /* FORCE override of 55vh !important */
        min-height: 100vh !important;
        z-index: 999;
        background: #000;
        margin: 0;
        padding: 0;
        position: fixed;
        /* Ensure it covers everything including sticky navs */
        top: 0;
        left: 0;
    }

    /* Project Hero Fullscreen Handling */
    .project-hero[style*="height: 100vh"] {
        z-index: 999;
        background: #000;
        /* Ensure black background for letterboxing */
    }

    /* Force efficient vertical stacking for ALL gallery types on mobile */
    .gallery-row {
        flex-direction: column !important;
        gap: 1rem !important;
        overflow-x: hidden !important;
        /* Disable horizontal scroll, prefer stack */
        padding: 0 !important;
    }

    .row-item,
    .row-item.row-half,
    .row-item.row-third,
    .row-item.row-quarter,
    .row-item.row-two-thirds,
    .row-item.row-full {
        width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 100% !important;
        height: 60vh !important;
        /* Tall immersive height */
        margin-bottom: 0.5rem;
    }

    .project-gallery-rows {
        padding: 2rem 1.5rem !important;
    }

    /* Optimize Grid Gallery for Mobile */
    .project-gallery {
        display: block !important;
        column-count: 1 !important;
        /* Force single column masonry */
        padding: 0 1.5rem !important;
    }

    .grid-column {
        width: 100% !important;
        display: block !important;
    }

    .grid-item {
        width: 100% !important;
        margin-bottom: 2rem;
    }
}

/* TABLET OPTIMIZATION (max-width: 768px) - Ensure duplicate logic */
@media (max-width: 768px) {
    /* ... (Ensure existing 768 styles remain) ... */

    /* Force efficient vertical stacking for ALL gallery types */
    .gallery-row {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .row-item,
    .row-item.row-half,
    .row-item.row-third,
    .row-item.row-quarter,
    .row-item.row-two-thirds {
        width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 100% !important;
        height: 50vh !important;
    }

    /* Optimize Grid Gallery */
    .grid-container {
        display: flex;
        flex-direction: column;
    }

    .grid-column {
        width: 100%;
        margin-bottom: 2rem;
    }
}