html, body {
    overflow-x: hidden;
    }

    /* On‑load fade overlay _ this ONLY happens on refresh or first load */
    #page-fade-onload {
      position: fixed;
      inset: 0;
      background: #000;
      opacity: 1;
      pointer-events: none;
      z-index: 5001;

      /* Smooth ease-out */
        transition: opacity 800ms cubic-bezier(0.33, 0, 0.5, 0); 

      /* Fast start, gentle coast */
      /* transition: opacity 520ms cubic-bezier(0.2, 0.8, 0.2, 1); */

      /* Custom “luxury” ease: slow open, confident glide */
      /* transition: opacity 640ms cubic-bezier(0.33, 0, 0.2, 1); */
    }

    #page-fade-onload.is-gone {
      opacity: 0;
    }


    /* --- Mobile Navigation Styles --- */
    /* --- Mobile Navigation Toggle (Hamburger) --- */
      .mobile-nav-toggle {
        display: none; /* Hidden by default, revealed on mobile */
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 16px);
        left: calc(env(safe-area-inset-left, 0px) + 16px);
        right: auto;
        z-index: 1800;
        background: rgba(0,0,0,0.8);
        border: 1px solid rgba(255,255,255,0.2);
        color: #fff;
        padding: 12px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 1.2rem;
        
        /* Starting state for animation */
        opacity: 0;
        pointer-events: none;
        transform: translateX(-100%);
      }

      .mobile-nav-toggle:hover {
        background: rgba(255,255,255,0.1);
        transform: scale(1.05);
      }

      /* Animate in when visible */
      .mobile-nav-toggle.visible {
        opacity: 1;
        pointer-events: auto;
        animation: slideInLeft 0.5s ease-out forwards;
      }

      @keyframes slideInLeft {
        from {
          transform: translateX(-100%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      /* Only show on mobile */
      @media (max-width: 768px) {
        .mobile-nav-toggle {
          display: block;
        }
      }

    .mobile-nav-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.95);
      z-index: 2000;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .mobile-nav-overlay.active {
      opacity: 1;
    }

    .mobile-nav-menu {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.8);
      text-align: center;
      transition: transform 0.3s ease;
    }

    .mobile-nav-overlay.active .mobile-nav-menu {
      transform: translate(-50%, -50%) scale(1);
    }

    .mobile-nav-menu .tab-btn {
      display: block;
      width: 250px;
      margin: 15px auto;
      padding: 20px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 8px;
      color: #fff;
      text-decoration: none;
      font-size: 1.1rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      transition: all 0.3s ease;
      transform: translateY(20px);
      opacity: 0;
    }

    .mobile-nav-overlay.active .mobile-nav-menu .tab-btn {
      transform: translateY(0);
      opacity: 1;
    }

    .mobile-nav-menu .tab-btn:nth-child(1) { transition-delay: 0.1s; }
    .mobile-nav-menu .tab-btn:nth-child(2) { transition-delay: 0.2s; }
    .mobile-nav-menu .tab-btn:nth-child(3) { transition-delay: 0.3s; }
    .mobile-nav-menu .tab-btn:nth-child(4) { transition-delay: 0.4s; }
    .mobile-nav-menu .tab-btn:nth-child(5) { transition-delay: 0.5s; }
    
    .mobile-nav-menu .tab-btn:hover,
    .mobile-nav-menu .tab-btn.active {
      background: rgba(255,255,255,0.2);
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    }

    /* --- Reset & Base --- */
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      font-family: 'Source Sans Pro', sans-serif;
      background:#0a0a0a; color:#fff; line-height:1.6; overflow-x:hidden;
    }

    /* Portfolio Logo */
    #logo {
    position: center;
    top: 50%;
    left: 50%;
    transform: translate(8%, -0%);
    width: 35vw;    /* scales with viewport width */
    max-width: 555px;  /* prevent it from getting TOO big */
    min-width: 120px;  /* keep it legible on tiny phones */
    height: auto;
    pointer-events: none;
    }

    .hero {
        height:100vh;
        background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
        url('https://res.cloudinary.com/dlepppgm2/image/upload/f_auto,q_auto,w_1920,c_limit/hero_shot_main_page') center/cover;
        position: relative; /* This is crucial for absolute positioning of children */
        display: flex; /* Keep this for centering the logo */
        flex-direction: column; /* Keep this for centering the logo */
        justify-content: center; /* Keep this for centering the logo vertically */
        align-items: center; /* Keep this for centering the logo horizontally */
        height: 100vh; /* Make sure the hero section takes up the full viewport height */
        overflow: hidden;
    }
    /* Mobile adjustments for hero image positioning */
      @media (max-width: 768px) {
        .hero {
          background-position: 75% center; /* Shift right - adjust the percentage as needed */
        }
      }

      /* For smaller phones if needed */
      @media (max-width: 480px) {
        .hero {
          background-position: 80% center; /* Shift even more right if necessary */
        }
      }
/* Portfolio Logo */
#logo {
  position: center;
  top: 50%;
  left: 50%;
  transform: translate(8%, -0%);
  width: 35vw;
  max-width: 555px;
  min-width: 120px;
  height: auto;
  pointer-events: none;
}

.hero {
  height:100vh;
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
  url('https://res.cloudinary.com/dlepppgm2/image/upload/f_auto,q_auto,w_1920,c_limit/hero_shot_main_page') center/cover;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

/* Mobile adjustments for hero image positioning */
@media (max-width: 768px) {
  .hero {
    background-position: 75% center;
  }
}

@media (max-width: 480px) {
  .hero {
    background-position: 80% center;
  }
}

    /* Hero stuff */
    .hero-title,
    .hero-divider,
    .hero-subtitle {
      position: absolute;
      bottom: 20%; 
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      width: 80%;
      max-width: 800px;
      font-size: clamp(1rem, 1.5vw, 1.75rem);
      color: #fff;
      z-index: 10;
    }

    /* Push subtitle down more on 1080p and 2k (but not 4k or mobile) */
    @media (min-width: 1024px) and (max-width: 2560px) {
      .hero-subtitle {
        bottom: 16%; /* was 20%, now lower */
      }
    }

    /* Parallax-ready hero elements */
    .hero {
      position: relative;
      overflow: visible;
    }

    #logo,
    .hero-subtitle {
      transition: opacity 0.3s ease-out, transform 0.3s ease-out;
      will-change: opacity, transform;
    }

    /* Smooth scroll behavior */
    html {
      scroll-behavior: smooth;
    }

    /* --- About / sections --- */
    .about-brief { 
      padding: 92px 20px 80px; /* increased top padding from 80px to 92px (~15% more) */
      text-align:center; 
      max-width:min(90vw, 1400px); 
      margin:0 auto; 
    }
    .about-brief p { 
      font-size:clamp(1.2rem, 1.5vw, 1.6rem); 
      line-height:1.8; 
      opacity:0.9; 
      margin-bottom:20px; 
    }

    /* --- Reels grid --- */
    .featured-reels { padding:80px 20px; max-width:min(95vw, 1800px); margin:0 auto; }
    .reels-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:80px; }
    .reel-item {
      position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; cursor:pointer;
      transition:transform .3s ease, box-shadow .3s ease;
    }
    .reel-item:hover { transform:translateY(-10px); box-shadow:0 20px 40px rgba(0,0,0,.5); }
    .reel-item img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
    .reel-item:hover img { transform:scale(1.05); }
    .reel-overlay {
      position:absolute; bottom:0; left:0; right:0;
      background: linear-gradient(transparent, rgba(0,0,0,.8));
      padding:30px 20px 20px; transform:translateY(100%); transition:transform .3s ease;
    }
    .reel-item:hover .reel-overlay { transform:translateY(0); }
    .reel-title { font-family:'Montserrat',sans-serif; font-size:1.4rem; font-weight:600; margin-bottom:8px; }
    .reel-description { font-size:.9rem; opacity:.8; }

    /* --- Tab nav --- */
    .tab-navigation {
      display:flex; justify-content:center; gap:0; margin-bottom:80px;
      border:1px solid rgba(255,255,255,.2); border-radius:4px; overflow:hidden; max-width:600px; margin-left:auto; margin-right:auto;
    }

    /* Desktop only: add more space above tab nav */
    @media (min-width: 769px) {
      .tab-navigation {
        margin-top: 100px; /* adds breathing room from reels section */
      }
    }

    .tab-btn {
      background:transparent; border:none; color:#fff; padding:15px 25px; font-size:.9rem; letter-spacing:1px; text-transform:uppercase;
      cursor:pointer; transition:all .3s ease; border-right:1px solid rgba(255,255,255,.2); flex:1;
    }
    .tab-btn:last-child { border-right:none; }
    .tab-btn:hover, .tab-btn.active { background:rgba(255,255,255,.1); color:#fff; }

    /* --- Project / page styles --- */
    .lazy-media,
    .media-embed { opacity: 0; transition: opacity .3s ease; }
    .lazy-loaded { opacity: 1; }

    .project-hero {
      height:60vh; background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)); background-size: cover; background-position: center; background-repeat: no-repeat;
      display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; position:relative;
    }
    .project-hero h1 { font-family:'Montserrat',sans-serif; font-size:3rem; font-weight:300; letter-spacing:4px; margin-bottom:20px; text-transform:uppercase; }
    .project-hero p { font-size:1.1rem; opacity:0.8; max-width:600px; }

    .project-content { padding:80px 20px; max-width:min(92vw, 1600px); margin:0 auto; }
    .project-section { margin-bottom:60px; background:rgba(255,255,255,.02); padding:40px; border-radius:8px; }
    .project-section h2 { font-family:'Montserrat',sans-serif; font-size:clamp(1.8rem, 2.5vw, 2.8rem); font-weight:300; margin-bottom:30px; letter-spacing:2px; color:#fff; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:15px; }
    .project-section p { font-size:clamp(1.1rem, 1.3vw, 1.4rem); line-height:1.8; opacity:.9; margin-bottom:20px; }
    .project-section ul { list-style:none; padding-left:0; }
    .project-section li { font-size:clamp(1rem, 1.2vw, 1.3rem); opacity:.8; margin-bottom:10px; padding-left:20px; position:relative; }
    .project-section li::before { content:'▸'; position:absolute; left:0; color:rgba(255,255,255,.5); }

    /* Project Media Blocks */
    .project-media {
      margin: 60px 0;
      width: 100%;
      max-width: 1400px;
      margin-left: auto;
      margin-right: auto;
    }

    .project-media img,
    .project-media video,
    .project-media .media-embed {
      width: 100%;
      height: auto;
      border-radius: 8px;
      background: #000;
      display: block;
    }

    .project-media video {
      max-height: 80vh;
      object-fit: contain;
    }

    /* Embedded video containers (YouTube, Vimeo) */
    .media-embed {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 */
      height: 0;
      overflow: hidden;
      border-radius: 8px;
      background: #000;
    }

    .media-embed iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      border-radius: 8px;
    }

    .media-caption {
      margin-top: 12px;
      font-size: 0.95rem;
      opacity: 0.75;
      text-align: center;
      font-style: italic;
    }

    /* PDF link block */
    .project-link-block {
      margin: 40px 0 10px;
      text-align: center;
    }

    .project-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 20px;
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 8px;
      color: #fff;
      text-decoration: none;
      transition: background .2s ease, border-color .2s ease, transform .05s ease;
      backdrop-filter: blur(2px);
    }

    .project-link::before {
      content: "📄";
      font-size: 1.1em;
    }

    .project-link:hover {
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.4);
    }

    .project-link:active {
      transform: translateY(1px);
    }

    /* Optional full-bleed modifier for media */
    .project-media--bleed { 
      max-width: none; 
      width: 100vw; 
      margin-left: 50%; 
      transform: translateX(-50%); 
    }
    .project-media--bleed .media-embed,
    .project-media--bleed img,
    .project-media--bleed video {
      border-radius: 0;
    }

    @media (max-width: 768px) {
      .project-media { margin: 36px 0; }
    }

    /* Project 1 media sizing - all media at ~90% width */
    #project1 .project-media img,
    #project1 .project-media video {
      width: 90%;
      max-width: 90vw;
      height: auto;
      margin-left: auto;
      margin-right: auto;
      display: block;
    }

  /* Project 1 Topology Carousel */
  #project1-topology-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding: 50%;
    height: clamp(300px, 30vw, 400px); /* responsive height */
    width: 100%;
    cursor: default;
    user-select: none;
    scrollbar-width: auto;
    scrollbar-color: rgba(255,255,255,0.36) rgba(255,255,255,0.08);
    padding-bottom: 20px;
  }

  #project1-topology-carousel .carousel-item {
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    scroll-snap-align: center;
  }

  #project1-topology-carousel .carousel-item:hover {
    transform: scale(1.05);
  }

  #project1-topology-carousel .carousel-item img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
    pointer-events: none;
  }

  /* Project 1 section titles */
  #project1 h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(1rem, 4vw, 1.8rem);
  }

  @media (max-width: 480px) {
    #project1 h2 {
      font-size: clamp(0.9rem, 5vw, 1.3rem);
      letter-spacing: 1px;
    }
  }
  /* Mobile optimizations */
  @media (max-width: 768px) {
    #project1-topology-carousel {
      height: clamp(200px, 40vw, 300px); /* smaller on tablets */
      gap: 16px;
      padding: 0 6%;
      scroll-padding: 6%;
      padding-bottom: 20px;
    }
  }

  @media (max-width: 480px) {
    #project1-topology-carousel {
      height: clamp(150px, 45vw, 220px); /* even smaller on phones */
      gap: 12px;
      padding: 0 5%;
      scroll-padding: 5%;
      padding-bottom: 18px;
    }
    
    #project1-topology-carousel .carousel-item:hover {
      transform: none; /* disable hover effect on touch */
    }
  }

  /* Beefier custom scrollbar (desktop only) */
  @media (hover: hover) and (pointer: fine) {
    #project1-topology-carousel::-webkit-scrollbar {
      height: 14px;
    }

    #project1-topology-carousel::-webkit-scrollbar-track {
      background: rgba(255,255,255,0.08);
      border-radius: 7px;
      margin: 0 20px;
    }

    #project1-topology-carousel::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.36);
      border-radius: 7px;
      border: 3px solid rgba(0,0,0,0.1);
      background-clip: padding-box;
      cursor: grab;
      min-width: 60px;
    }

    #project1-topology-carousel::-webkit-scrollbar-thumb:hover {
      background: rgba(255,255,255,0.5);
      background-clip: padding-box;
    }

    #project1-topology-carousel::-webkit-scrollbar-thumb:active {
      cursor: grabbing;
      background: rgba(255,255,255,0.6);
      background-clip: padding-box;
    }
  }

    /* --- Resume styles --- */
    .resume-section {
    margin-bottom: 60px;
    background: rgba(255, 255, 255, 0.02);
    padding: 40px;
    border-radius: 8px;
    }

    .resume-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.8rem, 2.5vw, 2.8rem);
    font-weight: 300;
    margin-bottom: 30px;
    letter-spacing: 2px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 15px;
    }

    /* Accordion Items */
    .resume-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 0;
    }

    .resume-item:last-child {
    border-bottom: none;
    }

    /* Accordion Headings */
    .resume-item h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 10px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    letter-spacing: 1px;
    }

    .resume-item h3::after {
    content: "▸"; /* arrow indicator */
    transition: transform 0.3s;
    font-size: 1rem;
    opacity: 0.7;
    }

    .resume-item.active h3::after {
    transform: rotate(90deg);
    }

    /* Collapsible Details */
    .resume-details {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-5px); /* start slightly above */
    transition: 
        max-height 0.4s ease,
        opacity 0.3s ease,
        transform 0.4s ease;
    }

    .resume-item.active .resume-details {
    max-height: 500px; /* enough space for content */
    opacity: 1;
    transform: translateY(0); /* smoothly slides down */
    }

    /* Details Typography */
    .resume-details .position {
    font-size: 1.1rem;
    opacity: 0.8;
    margin-bottom: 5px;
    }

    .resume-details .date {
    font-size: 0.9rem;
    opacity: 0.6;
    margin-bottom: 15px;
    }

    .resume-details p {
    font-size: clamp(1rem, 1.2vw, 1.3rem);
    line-height: 1.8;
    opacity: 0.9;
    }

    /* --- Page Transition Overlay Styles --- */
    
    .page {
        display: none;
        opacity: 0;
        transition: opacity 0.5s ease-in-out; /* Smoother, simpler fade */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        z-index: 0; /* Default z-index */
        }

    .page.active {
        display: block;
        opacity: 1;
        z-index: 1; /* Active page on top */
        }

    /* Home page is special – it scrolls the body, not itself */
    #home.page.active {
    position: relative;  /* back in normal flow */
    height: auto;
    overflow: visible;
    }
    
    /* --- Back to Home --- */
    .back-home {
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity 0.5s ease, transform 0.5s ease;
      position: fixed !important;
      top: 20px;
      left: 20px; /* move it to the top left */
      right: auto;
      background: rgba(0,0,0,.8);
      border: 1px solid rgba(255,255,255,.2);
      color: #fff;
      padding: 12px 20px;
      border-radius: 25px;
      text-decoration: none;
      font-size: 1rem;
      letter-spacing: 1px;
      transition: all .3s ease;
      z-index: 1001;
      cursor: pointer;
      min-width: 44px;         /* ensures touch target size */
      min-height: 44px;
    }

    .back-home:hover {
      background: rgba(255,255,255,.1);
      transform: translateY(-2px);
    }

    .back-home.visible {
    opacity: 1;
    transform: translateY(0);
    }

    /* Mobile tweak */
    @media (max-width: 768px) {
      .back-home {
        top: 20px;
        left: auto;
        right: 20px;       /* keep it right-aligned on tablets/phones */
        font-size: .9rem;
        padding: 10px 16px;
      }
    }

    @media (max-width: 480px) {
      .back-home {
        top: 15px;
        left: auto;
        right: 15px;       /* a little tighter on tiny screens */
        font-size: 0.8rem;
        padding: 8px 14px;
      }
    }

    /* --- Additional Work  --- */
    .additional-work { padding:80px 20px; max-width:min(95vw, 1800px); margin:0 auto; }
    .work-category { margin-bottom:80px; }
    .category-title {
      font-family:'Montserrat', sans-serif;
      font-weight:300;
      text-align:center;
      margin-bottom:40px;
      letter-spacing:2px;
      text-transform:uppercase;

      white-space: nowrap;            
      overflow: hidden;                
      text-overflow: ellipsis;         
      font-size: clamp(1rem, 4vw, 1.8rem); 
    }

    @media (max-width: 768px) {
      .featured-reels { padding: 50px 20px; }
      .additional-work { padding: 50px 20px; }
      .reels-grid { margin-bottom: 50px; }
      .work-category { margin-bottom: 50px; }
    }

    @media (max-width: 480px) {
      .category-title {
        font-size: clamp(0.9rem, 5vw, 1.3rem);
        letter-spacing: 1px;
      }
    }
        
    /* Scroller */
    .carousel {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x proximity;
      scroll-padding: 50%;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      touch-action: pan-y pinch-zoom;
      overscroll-behavior-x: contain;
      overscroll-behavior-y: none;
      align-items: stretch;
      height: clamp(414px, 38vw, 511px);
      width: 100%;
      cursor: default;
      user-select: none;
      scrollbar-width: none;
      scrollbar-gutter: stable;
    }
    .carousel::-webkit-scrollbar { display: none; }

    /* Tiny invisible spacer to guarantee overflow when few items */
    .carousel::after {
      content: "";
      flex: 0 0 1px;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    /* Items */
    .carousel-item {
      flex: 0 0 auto;
      height: 100%;
      width: auto;
      position: relative;
      border-radius: 12px;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      scroll-snap-align: center;
      scroll-snap-stop: normal;
      cursor: pointer;
      transition: transform 0.3s ease;
      pointer-events: auto;
    }
    .carousel-item:hover { transform: scale(1.05); }

    /* Media within items */
    .carousel-item img,
    .carousel-item video {
      height: 100%;
      width: auto;
      object-fit: contain;
      object-position: center;
      display: block;
      pointer-events: none;
      overscroll-behavior: contain;
      touch-action: manipulation;
    }

    /* Container and rail */
    .carousel-container {
      max-width: min(95vw, 1800px);
      margin: 0 auto;
      padding: 0 clamp(16px, 3vw, 40px);
    }
    .carousel-rail {
      position: relative;
      padding-bottom: 18px;
      width: 100%;
      display: block;
    }

    @media (max-width: 768px) {
      .carousel-container {
        max-width: none;
        padding-left: 0; 
        padding-right: 0;
      }
      
      .carousel-rail,
      .carousel {
        width: 100vw; 
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
      }
    
      .carousel {
        gap: 16px; 
        padding: 0 6%; 
        scroll-padding: 6%; 
      }
      
      .carousel-item {
        min-width: auto; 
        max-width: none;
        flex: 0 0 auto; 
      }
    }

    /* Heights on small/very large screens */
    @media (max-width: 480px) {
      .carousel { 
        height: clamp(161px, 48vw, 253px);
        padding: 0 5%; /* ⬅️ Slightly less padding on small screens */
        scroll-padding: 5%;
        gap: 12px;
      }
      .carousel-item { 
        min-width: auto;
        max-width: none;
        flex: 0 0 auto;
      }
    }
    
    @media (min-width: 1600px) {
      .carousel { height: clamp(299px, 25vw, 483px); }
    }

    /* Carousel item title overlay */
    .carousel-item-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0,0,0,0.8));
      padding: 20px 15px 15px;
      transform: translateY(100%);
      transition: transform 0.3s ease;
      pointer-events: none;
    }

    .carousel-item:hover .carousel-item-overlay {
      transform: translateY(0);
    }

    .carousel-item-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 1rem;
      font-weight: 600;
      margin: 0;
      color: #fff;
      text-align: center;
    }

    /* Hide carousel overlays on mobile to preserve touch navigation */
    @media (max-width: 768px) {
      .carousel-item-overlay {
        display: none !important;
      }
    }

    /* Carousel hint arrows (mobile only) */
    .carousel-hint-arrows {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 10;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .carousel-hint-arrows.visible {
      opacity: 1;
    }

    .carousel-hint-arrows.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .carousel-hint-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 52px;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.8);
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
      animation: arrowPulse 1.8s ease-in-out infinite;
      pointer-events: none;
    }

    .carousel-hint-left {
      left: 2vw; /* ⬅️ Closer to screen edge */
      animation-delay: 0s;
    }

    .carousel-hint-right {
      right: 2vw; /* ⬅️ Closer to screen edge */
      animation-delay: 0.9s;
    }

    @keyframes arrowPulse {
      0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(1); }
      50% { opacity: 1; transform: translateY(-50%) scale(1.2); }
    }

    /* Hide on desktop */
    @media (hover: hover) and (pointer: fine) {
      .carousel-hint-arrows {
        display: none !important;
      }
    }

    /* Real track + thumb (clipping) */
    .scroll-track {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 4px;
      height: 8px;
      background: rgba(255,255,255,0.08);
      border-radius: 4px;
      overflow: hidden;
      pointer-events: none;
      display: block !important; /* ✅ Force visibility */
      visibility: visible !important;
      z-index: 7777;
    }
    .scroll-thumb {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      height: 100%;
      width: 80px;
      background: rgba(255,255,255,0.36);
      border-radius: 4px;
      pointer-events: auto;
      will-change: transform, width;
      transition: width 120ms ease, background 120ms ease, transform 60ms linear;
      cursor: grab;
      touch-action: none;
      display: block !important;
      visibility: visible !important;
      z-index: 7777;
    }
    .scroll-thumb:active { cursor: grabbing; }
    .scroll-track:hover .scroll-thumb { background: rgba(255,255,255,0.5); }

    /* Desktop overrides */
    @media (hover: hover) and (pointer: fine) {
      .carousel {
        gap: 24px;
        scroll-snap-type: none !important;
        scroll-padding: 0 !important;
        scroll-behavior: auto;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
        touch-action: auto;
      }
      .carousel-item {
        min-width: 260px;
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
      }
      }

    /* --- Contact --- */
    .contact { padding:80px 20px; text-align:center; background:rgba(255,255,255,.02); max-width:min(95vw, 1600px); margin:0 auto; transform-style: preserve-3d; perspective: 1000px;}
    .contact h2 { font-family:'Montserrat',sans-serif; font-size:clamp(2rem, 3vw, 3.5rem); font-weight:300; margin-bottom:40px; letter-spacing:2px; transform: translateY(0); opacity: 1; will-change: transform, opacity; transition: transform 300ms ease-out, opacity 300ms ease-out; }
    .contact p { font-size: 1.1rem; margin-bottom: 20px; opacity: 0.8;transition: transform 0.1s ease-out, opacity 0.1s ease-out; will-change: transform, opacity; transition: transform 300ms ease-out, opacity 300ms ease-out; }
    .contact-links { display:flex; justify-content:center; gap:40px; margin-top:40px; transform: translateY(0); opacity: 1; will-change: transform; transition: transform 300ms ease-out; }
    .contact-link { display:flex; flex-direction:column; align-items:center; text-decoration:none; color:#fff; transition:transform .3s ease, opacity .3s ease; will-change: transform; }
    .contact-link:hover { transform:translateY(-5px); opacity:.8; }
    /* Contact icon container */
    .contact-icon {
    width: 60px;
    height: 60px;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    transition: transform 0.1s ease-out;
    will-change: transform;
    overflow: hidden;
    }

    /* SVG styling */
    .contact-icon svg {
    width: 60%;
    height: 60%;
    color: rgba(255, 255, 255, 0.85); /* controls 'currentColor' */
    transition: color 0.3s ease, transform 0.3s ease;
    }

    /* Hover effects */
    .contact-link:hover .contact-icon {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px) scale(1.05);
    }

    .contact-link:hover .contact-icon svg {
    color: rgba(255, 255, 255, 1); /* brighten on hover */
    transform: scale(1.10); /* slight zoom */
    }
    
    /* --- Lightbox styles (rich version) --- */
    .lightbox { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.95); z-index:3000; opacity:1; transition:none; }
    .lightbox.active { display:flex; opacity:1; align-items:center; justify-content:center; }
    .lightbox-content { position:relative; max-width:90vw; max-height:90vh; display:flex; flex-direction:column; align-items:center; animation:lightboxZoom .3s ease; }
    @keyframes lightboxZoom { from{ transform:scale(.8); opacity:0 } to{ transform:scale(1); opacity:1 } }
    .lightbox-media-container { 
    position: relative; 
    width: min(90vw, 1000px); 
    height: auto;
    min-height: 50vh;
    max-height: 70vh; 
    margin-bottom: 20px; 
    display: flex;
    align-items: center;
    justify-content: center;
}
    
    /* Hide native browser fullscreen button */
    .lightbox-media-container::-webkit-media-controls-fullscreen-button,
    .lightbox-video::-webkit-media-controls-fullscreen-button {
      display: none !important;
    }

    .lightbox-media-container::--webkit-full-page-media,
    .lightbox-video::-webkit-full-page-media {
      display: none !important;
    }

    /* For Firefox */
    .lightbox-media-container:-moz-full-screen-ancestor:not(iframe),
    .lightbox-video:-moz-full-screen-ancestor:not(iframe) {
      display: none !important;
    }

    /* General fallback */
    video::-webkit-media-controls-fullscreen-button {
      display: none !important;
    }
    
    .lightbox-image, .lightbox-video { width: 100%; height: auto; min-height: 50vh; max-height: 70vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.8); transition: opacity .3s ease; }
    .lightbox-video { background:#000; }
    .lightbox-sub-carousel { display: flex; gap: clamp(8px, 1vw, 15px); margin: clamp(1rem, 3vh, 2rem) 0; padding: 0 clamp(1rem, 2vw, 2rem); max-width: 100%; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; box-sizing: border-box; -ms-overflow-style: none; scrollbar-width: none; }
    .lightbox-sub-carousel::-webkit-scrollbar { display: none; }
    .sub-carousel-item { min-width: clamp(70px, 10vw, 100px); height: clamp(50px, 7.5vw, 75px); border-radius:6px; overflow:hidden; cursor:pointer; transition:all .3s ease; border:2px solid transparent; position:relative; }
    .sub-carousel-item:hover { transform:scale(1.05); border-color:rgba(255,255,255,.5); }
    .sub-carousel-item.active { border-color:#fff; box-shadow:0 0 15px rgba(255,255,255,.3); }
    .sub-carousel-item img, .sub-carousel-item video { width:100%; height:100%; object-fit:cover; }
    .sub-carousel-item .play-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:20px; height:20px; background:rgba(255,255,255,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; color:#000; }
    .placeholder { padding: 20px; font-style: italic; color: #888; text-align: center; }
    
    .lightbox-info { background:rgba(0,0,0,.8); padding: clamp(0.8rem, 1.5vw, 1.5rem); border-radius:8px; text-align:center; max-width:600px; width:100%; overflow-y: auto; max-height: calc(100vh - 120px); box-sizing: border-box; /* ensures it never cuts below screen */}
      @media (max-width: 1920px) and (min-width: 1024px) {
        .lightbox-info {
          padding: 1rem;
        }
      }
    /* Custom video play button overlay */
    .video-play-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 200;
      pointer-events: auto;
    }

    .video-play-overlay:hover {
      background: rgba(255, 255, 255, 1);
      transform: translate(-50%, -50%) scale(1.1);
    }

    .video-play-overlay::after {
      content: '▶';
      font-size: 2rem;
      color: #000;
      margin-left: 4px; /* Optical centering */
    }

    .video-play-overlay.hidden {
      opacity: 0;
      pointer-events: none;
    }

    /* Mobile expansion hint - fixed to top like close button */
    .lightbox-expansion-hint {
      position: fixed; 
      top: 15px; 
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      font-size: 0.6rem;
      color: rgba(255, 255, 255, 0.6);
      font-family: 'Montserrat', sans-serif;
      font-weight: 300;
      letter-spacing: 0.5px;
      white-space: nowrap; 
      padding: 6px 10px;
      background: rgba(0, 0, 0, 0.3); 
      backdrop-filter: blur(8px);
      border-radius: 12px;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      z-index: 3200; 
      display: none; 
    }

    /* Show on mobile only */
    @media (max-width: 768px) {
      .lightbox-expansion-hint {
        display: block;
      }
      
      /* Show hint when lightbox is active and NOT expanded */
      .lightbox.active:not(.expanded-mode) .lightbox-expansion-hint {
        opacity: 1;
      }
      
      /* Hide hint when expanded */
      .lightbox.expanded-mode .lightbox-expansion-hint {
        opacity: 0;
      }
    }

    /* Add top padding to media container so content never overlaps hint */
    @media (max-width: 768px) {
      .lightbox-media-container {
        padding-top: 40px; /* ⬅️ Space for hint + breathing room */
      }
      
      /* Remove padding when expanded */
      .lightbox-media-container.expanded {
        padding-top: 0;
      }
    }

    .lightbox-title { font-family:'Montserrat',sans-serif; font-size: clamp(1.3rem, 2.5vw, 2rem); font-weight:600; margin-bottom: clamp(0.6rem, 1.5vh, 1rem); color:#fff; }
    .lightbox-tabs { display:flex; justify-content:center; margin-bottom:15px; border-bottom:1px solid rgba(255,255,255,.2); }
    .lightbox-tab { background:transparent; border:none; color:rgba(255,255,255,.6); padding:10px 20px; font-size: clamp(0.8rem, 1.5vw, 1rem); cursor:pointer; transition:all .3s ease; border-bottom:2px solid transparent; }
    .lightbox-tab[style*="display: none"] { display: none !important; }
    .lightbox-tab.active { color:#fff; border-bottom-color:#fff; }
    .lightbox-tab:hover { color:#fff; }
    .lightbox-tab-content { display:none; animation:fadeIn .3s ease; }
    .lightbox-tab-content.active { display:block; }
    @keyframes fadeIn { from{opacity:0} to{opacity:1} }
    .lightbox-description { font-size: clamp(0.9rem, 1.5vw, 1.1rem); opacity:.8; color:#fff; line-height:1.6; margin-bottom: clamp(0.6rem, 1.5vh, 1rem); }
    .lightbox-details { font-size: clamp(0.8rem, 1.2vw, 1rem); opacity:.7; color:#fff; line-height:1.5; margin-bottom: clamp(0.6rem, 1.5vh, 1rem); }
    .lightbox-links { display:flex; gap:clamp(0.6rem, 1.2vw, 1rem); flex-wrap: wrap; justify-content:center; margin-top: clamp(0.6rem, 1.5vh, 1rem); }
    .lightbox-link { display:inline-block; padding: clamp(0.4rem, 1vw, 0.7rem) clamp(0.8rem, 2vw, 1.2rem); background:rgba(255,255,255,.1); color:#fff; text-decoration:none; border-radius:4px; font-size: clamp(0.8rem, 1.3vw, 1rem); transition:background .3s ease; }
    .lightbox-link:hover { background:rgba(255,255,255,.2); }
    #lightbox-iframe { width: 100%; height: 100%; border: none; background: #000; }
    #lightbox-image { transition: opacity 0.2s ease, filter 0.2s ease; }
    .lightbox-close { 
        position: absolute; 
        top: calc(env(safe-area-inset-top, 0px) + clamp(16px, 2vh, 20px));
        right: calc(env(safe-area-inset-right, 0px) + clamp(16px, 2vw, 20px));
        background: rgba(255,255,255,.1); 
        border: none; 
        color: #fff; 
        font-size: clamp(1.6rem, 3vw, 2rem);
        width: clamp(40px, 8vw, 50px);
        height: clamp(40px, 8vw, 50px);
        border-radius: 50%; 
        cursor: pointer; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        transition: background .3s ease, transform .3s ease;
        z-index: 3500;
        touch-action: manipulation;
        }

    .lightbox-close:hover { 
        background: rgba(255,255,255,.2); 
        transform: scale(1.1); 
        }
    
    /* --- Lightbox Navigation Arrows (arrows + labels) --- */
    .lightbox-nav {
      position: absolute;
      background: rgba(255,255,255,.1);
      border: none;
      color: #fff;
      font-size: 2rem;             /* arrows stay clear and bold */
      width: auto;
      height: 60px;
      border-radius: 30px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;                      /* gap between arrow & text */
      padding: 0 16px;
      transition: background .3s ease, transform .3s ease;
      line-height: 1;                 /* normalize line box */
      z-index: 3500;
    }

    .lightbox-nav:hover {
      background: rgba(255,255,255,.2);
      transform: scale(1.05);
    }

    /* Positioning */
    .lightbox-prev {
      left: calc(env(safe-area-inset-left, 0px) + 20px);
      top: 50%;
      transform: translateY(-50%);
    }

    .lightbox-next {
      right: calc(env(safe-area-inset-right, 0px) + 20px);
      top: 50%;
      transform: translateY(-50%);
    }

    /* Labels */
    .lightbox-nav .label {
      font-size: 0.9rem;
      line-height: 1;                 /* remove extra ascent/descent */
      position: relative;
      top: 1.5px; 
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    /* Desktop: show labels ONLY on hover */
    @media (min-width: 769px) {
      .lightbox-nav:hover .label {
        opacity: 1;
      }
      .lightbox-nav {
        line-height: 1; /* normalize container line box */
        height: 60px;   /* already set, reiterate for clarity */
    }

    .lightbox-nav .icon,
    .lightbox-nav .label {
        display: inline-flex;
        align-items: center; /* centers each piece within its own box */
        line-height: 1;
    }

    /* Slight optical nudge for text; adjust ±1px if needed */
    .lightbox-nav .label {
        position: relative;
        top: 1px;
        font-size: 0.95rem; /* tiny bump helps baselines match 2rem icon */
    }

    /* Optional: counter-nudge for the arrow if it feels heavy */
    .lightbox-nav .icon {
        position: relative;
        top: -0.5px; /* lift icon slightly; tweak to 0 or -1px if needed */
        font-size: 2rem; /* keep your current size */
        line-height: 1;
    }
    }

    /* Tighter sizing for 1080p and below */
    @media (max-width: 1920px) and (min-width: 1024px) {
      .sub-carousel-item { 
        min-width: clamp(55px, 6.5vw, 75px);
        height: clamp(38px, 4.5vw, 55px);
      }   
      .lightbox-media-container {
        max-height: 60vh; /* Even more at 1080p */
        }
      .lightbox-image, .lightbox-video {
      max-height: 60vh;
        }
      }

    /* Mobile: permanently show arrows + labels, docked lower */
    @media (max-width: 768px) {
      .lightbox-nav {
        bottom: 60px;
        top: auto;
        transform: none;
        font-size: 1.8rem;   /* keep arrows bold */
        height: 40px;
        background: rgba(0, 0, 0, 0.7);    /* ✅ more opaque black background */
        backdrop-filter: blur(4px);    /* ✅ subtle blur for polish */
      }

      .lightbox-prev { left: calc(env(safe-area-inset-left, 0px) + 30px); }
      .lightbox-next { right: calc(env(safe-area-inset-right, 0px) + 30px); }

      .lightbox-nav .label {
        opacity: 1;    /* labels always visible on mobile */
      }
    }

    @media (max-width: 480px) {
      .lightbox-nav {
        font-size: 1.6rem;
        height: 33px;
        bottom: 50px;
        padding: 0 12px;
        background: rgba(0, 0, 0, 0.7);    /* ✅ more opaque black background */
        backdrop-filter: blur(4px);    /* ✅ subtle blur for polish */
      }

      .lightbox-prev { left: calc(env(safe-area-inset-left, 0px) + 20px); }
      .lightbox-next { right: calc(env(safe-area-inset-right, 0px) + 20px); }

      .lightbox-nav .label {
        font-size: 0.8rem;
      }
    }
    /* Lightbox fullscreen hint (desktop only) */
    .lightbox-hint {
      position: relative;
      text-align: center;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.5);
      font-family: 'Montserrat', sans-serif;
      font-weight: 300;
      letter-spacing: 0.5px;
      padding: 8px 0;
      margin-bottom: 12px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .lightbox-content:hover .lightbox-hint {
      opacity: 1;
    }

    /* Hide on mobile (since there's already a fullscreen icon) */
    @media (max-width: 768px) {
      .lightbox-hint {
        display: none;
      }
    }

    /* Ensure hamburger never shows on desktop */
    @media (min-width: 769px) {
      .mobile-nav-toggle {
        display: none !important;
      }

      .mobile-nav-overlay {
        display: none !important;
      }
    }

    /* Extra safety: hide mobile overlay if user resizes back to desktop */
    @media (min-width: 769px) {
      .mobile-nav-overlay.active {
        display: none !important;
        opacity: 0 !important;
      }
    }


    /* Mobile-friendly navigation arrows enhancements */
    .lightbox-nav {
      touch-action: manipulation;
    }

    /* --- Responsive small mobile tweaks --- */
    @media (max-width:768px) {
        .hero-title { font-size:2.5rem; letter-spacing:4px; }
        .project-hero { height: 45vh; padding: 15px; }
        .project-hero h1 { font-size: clamp(1.5rem, 8.0vw, 2.8rem); letter-spacing: 2px; }
        .project-hero p { font-size: clamp(0.9rem, 4.0vw, 1.5rem); max-width: 90%;line-height: 1.5; }
        .project-content { padding: 30px 15px; }
        .project-section { margin-bottom: 30px; padding: 20px; }
        .project-section h2 { font-size: clamp(1.5rem, 8.0vw, 2.8rem); letter-spacing: 2px }
        .project-section p,
        .project-section li { font-size: clamp(0.9rem, 4.0vw, 1.5rem); line-height: 1.6; /* slightly tighter for mobile */ }
        .resume-section { padding: 20px; margin-bottom: 25px; }
        .resume-section h2 { font-size: clamp(1.5rem, 8.0vw, 2.2rem); letter-spacing: 2px; }
        .resume-item h3 { font-size: clamp(1.1rem, 5vw, 1.4rem); }
        .resume-details .position { font-size: clamp(0.9rem, 3.8vw, 1rem); }
        .resume-details .date { font-size: clamp(0.75rem, 3.5vw, 0.9rem); }
        .resume-details p { font-size: clamp(0.9rem, 4vw, 1.1rem); line-height: 1.5; }
        .reels-grid { grid-template-columns:1fr; gap:30px; }
      
      /* Hide desktop navigation on mobile */
      .tab-navigation { display: none; }
      
      /* Show mobile navigation toggle */
      .mobile-nav-toggle { display: block; }
      
      .contact-links { flex-direction:row; flex-wrap: wrap; gap:20px; }
      .contact-link { flex: 1 1 auto; max-width: 120px; }
      .lightbox-sub-carousel { gap:10px; }
      .sub-carousel-item { min-width:80px; height:60px; }

      /* Hero adjustments for mobile */
      #logo { width: clamp(200px, 75vw, 350px); }
      
      .hero-subtitle {
        position: static;
        transform: translateY(-15%);
        margin-top: 20px;
        font-size: clamp(1.1rem, 4.5vw, 1.4rem);
        width: 65%; /* Widen it so lines don't break as early */
        max-width: none; /* Remove max-width constraint on mobile */
        line-height: 1.4; /* Add breathing room between lines */
      }
    }
    /* --- Dynamic Scaling for Titles / Text --- */
    .lightbox-title {
      font-size: clamp(0.9rem, 2vw, 2rem); /* Reduced min from 1rem */
      line-height: 1.2;
      margin-bottom: clamp(0.4rem, 1vh, 0.8rem);
      word-wrap: break-word;
    }

    /* Further reduce title size at 1080p */
    @media (max-width: 1920px) and (min-width: 1024px) {
      .lightbox-title {
        font-size: clamp(0.75rem, 1.3vw, 1.2rem);
        margin-bottom: 0.4rem;
          }
        }

    /* Tabs */
    .lightbox-tabs {
    margin-bottom: clamp(0.4rem, 1vh, 0.8rem);
    }
    .lightbox-tab {
    font-size: clamp(0.7rem, 1.2vw, 0.95rem);
    padding: clamp(0.3rem, 0.8vw, 0.6rem) clamp(0.5rem, 1vw, 0.9rem);
    }

    /* Description & details */
    .lightbox-description {
    font-size: clamp(0.75rem, 1.2vw, 1rem);
    line-height: 1.4; 
    margin-bottom: clamp(0.4rem, 1vh, 0.8rem);
    white-space: normal;   /* wrap instead of pushing down */
    }

    .lightbox-details {
    font-size: clamp(0.7rem, 1vw, 0.9rem);
    line-height: 1.4;
    }

    /* Links */
    .lightbox-links {
    gap: clamp(0.4rem, 1vw, 0.8rem);
    }
    .lightbox-link {
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    padding: clamp(0.25rem, 0.6vw, 0.5rem) clamp(0.6rem, 1.2vw, 1rem);
    }


    /* Subcarousel always safely below */
    .lightbox-sub-carousel {
      flex-shrink: 0;
      margin: clamp(0.4rem, 0.8vh, 0.8rem) 0; /* Tighter margins */
      padding: 0 clamp(0.8rem, 1.0vw, 1.0rem);
      gap: clamp(6px, 0.8vw, 12px);
    }
    /* Only enable smooth scroll when user initiates, not during programmatic restores */
    @media (prefers-reduced-motion: no-preference) {
    :root.user-initiated-scroll {
        scroll-behavior: smooth;
    }
    }

    /* --- Smooth swipe support for lightbox --- */
    .lightbox-media-container {
      position: relative; /* already present, but keep */
      overflow: hidden;   /* ensure sliding media doesn’t leak outside */
    }

    .lightbox-media-container img,
    .lightbox-media-container video {
      transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
    }

    .lightbox-media-container.swiping img,
    .lightbox-media-container.swiping video {
      transition: none; /* disable animation while finger is dragging */
    }

    /* Preview element that slides in from the side during swipe */
    .lightbox-media-preview {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0;
      pointer-events: none;
      transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .lightbox-track {
      display: flex;
      width: 100%;
      height: 100%;
      transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
    }

    .lightbox-track img,
    .lightbox-track video {
      flex: 0 0 100%;   /* each media takes full width */
      max-width: 100%;
      max-height: 50vh;
      object-fit: contain;
    }

    /* Prevent body scroll when lightbox is active */
    body.lightbox-open,
    
    body.is-locked {
    overflow: hidden !important;   /* belt-and-suspenders */
    touch-action: pan-x pan-y pinch-zoom;            /* block touch gestures */
    overscroll-behavior: none;     /* stop elastic bounce */
    }

    /* Optional stabilization for iOS/layout jitter while locked */
    html.is-locked,
    body.is-locked {
    width: 100%;
    }

    /* Lightbox pop/subpage transition visual glitch cover up */   
    #page-fade {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    pointer-events: none;     /* don’t block clicks when hidden */
    transition: opacity 0.3s ease-in-out !important; /* super fast */
    z-index: 10000;            /* higher than everything else */
    }

    #page-fade.active {
    opacity: 1;
    pointer-events: auto;     /* optional: block input during transition */
    }
    
    /* Kill ghost renders immediately when lightbox closes */
    .lightbox:not(.active) .lightbox-image,
    .lightbox:not(.active) .lightbox-video {
    visibility: hidden !important;
    }
    /* === Hide scrollbars on desktop, keep native on mobile === */
    @media (min-width: 769px) {
    html, body, .page {
        scrollbar-width: none;       /* Firefox */
        -ms-overflow-style: none;    /* IE + Edge */
    }
    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    .page::-webkit-scrollbar {
        display: none;               /* Chrome/Safari */
    }
    }
    
    /* === Mobile Lightbox Arrow Position (lower) — overrides === */
    @media (max-width: 768px) {
      .lightbox-nav {
        bottom: 22px;
        top: auto;
        transform: none;
        font-size: 1.8rem;
        height: 40px;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        z-index: 3001; /* ⬅️ Higher than .lightbox-content */
        pointer-events: auto; /* ⬅️ Ensure they're clickable */
      }

      /* Ensure lightbox-content doesn't block nav */
      .lightbox-content {
        pointer-events: none; /* ⬅️ Let clicks pass through to nav */
        z-index: 3000;
      }

      /* Re-enable pointer events for interactive elements inside content */
      .lightbox-content * {
        pointer-events: auto;
      }

      .lightbox-prev { left: calc(env(safe-area-inset-left, 0px) + 30px); }
      .lightbox-next { right: calc(env(safe-area-inset-right, 0px) + 30px); }

      .lightbox-nav .label {
        opacity: 1;
      }
    }

    /* Very small phones */
    @media (max-width: 480px) {
      .lightbox-nav {
        bottom: 18px; /* slightly closer to bottom on tiny screens */
      }
    }

    /* Fullscreen tweaks for lightbox media */
    :fullscreen .lightbox-media-container,
    .lightbox-media-container:fullscreen {
      max-width: 100vw !important;
      max-height: 100vh !important;
    }

    :fullscreen .lightbox-track img,
    :fullscreen .lightbox-track video,
    .lightbox-media-container:fullscreen img,
    .lightbox-media-container:fullscreen video {
      max-height: 100vh !important;
      width: auto;
      object-fit: contain;
    }

    /* Lightbox: give media more height in landscape and on mobile */
    @media (max-width: 768px) {
      .lightbox-content {
        max-width: 100vw;
        max-height: 100dvh;
      }
      .lightbox-media-container {
        max-width: 100vw;
        max-height: min(80dvh, 80vh);
      }
      .lightbox-image, .lightbox-video {
        max-height: inherit;
        object-fit: contain;
      }
    }

    @media (max-height: 520px) and (orientation: landscape) {
      .lightbox-media-container {
        max-height: 84dvh;
      }
      .sub-carousel-item {
        min-width: clamp(60px, 9vw, 90px); /* Reduced from 11vw/110px */
        height: clamp(45px, 6.5vw, 65px); /* Reduced from 8vw/80px */
      }
    }

    /* Freeze transitions during layout recalcs to avoid orientation-change jank */
    .no-transition *,
    .no-transition *::before,
    .no-transition *::after {
      transition: none !important;
    }

    /* Lightbox info padding for nav buttons */
    @media (max-width: 768px) {
    .lightbox-info {
      padding-bottom: 60px; /* Creates space for nav buttons */
      max-height: calc(100vh - 200px); /* Prevents it from growing too tall */
    }
    }

    /* === Expanded Mode Styles === */
    .lightbox-media-container.expanded {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    z-index: 5500;
    background: #000;
    transition: all 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .lightbox-media-container.expanded .lightbox-track {
    width: 100%;
    height: 100%;
    }

    .lightbox-media-container.expanded .lightbox-image,
    .lightbox-media-container.expanded .lightbox-video {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100%;
    height: 100%;
    object-fit: contain;
    }

    /* Slide title, tabs, description UNDER the media */
    /* === Z-Index Layering: UI Elements UNDER Media === */
    .lightbox-media-container {
    position: relative;
    z-index: 100; /* ✅ Media on top */
    }

    .lightbox-info {
    position: relative;
    z-index: 50; /* ✅ Under media */
    }
    /* Custom scrollbar for lightbox info section */
    .lightbox-info {
      scrollbar-width: thin; /* Firefox */
      scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2); /* Firefox */
    }

    /* Webkit browsers (Chrome, Safari, Edge) */
    .lightbox-info::-webkit-scrollbar {
      width: 8px;
    }

    .lightbox-info::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 4px;
    }

    .lightbox-info::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 4px;
      transition: background 0.3s ease;
    }

    .lightbox-info::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.5);
    }
    .lightbox-sub-carousel {
    position: relative;
    z-index: 50; /* ✅ Under media */
    }

    .lightbox-nav {
    z-index: 3500; /* ✅ Under media */
    }

    /* === Staggered Cascade Animation === */

    /* 1. Next/Prev Project Buttons (first to slide, 0ms delay) */
    .lightbox-nav {
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms,
                opacity 0.35s ease 0ms;
    }

    .lightbox.expanded-mode .lightbox-nav {
    transform: translateY(-150%);
    opacity: 0;
    pointer-events: none;
    }

    /* 2. Description Text & Tabs (second, 80ms delay) */
    .lightbox-info .lightbox-tab-content,
    .lightbox-info .lightbox-tabs {
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 80ms,
                opacity 0.35s ease 80ms;
    }

    .lightbox.expanded-mode .lightbox-info .lightbox-tab-content,
    .lightbox.expanded-mode .lightbox-info .lightbox-tabs {
    transform: translateY(-150%);
    opacity: 0;
    pointer-events: none;
    }

    /* 3. Title (third, 160ms delay) */
    .lightbox-title {
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 160ms,
                opacity 0.35s ease 160ms;
    }

    .lightbox.expanded-mode .lightbox-title {
    transform: translateY(-150%);
    opacity: 0;
    pointer-events: none;
    }

    /* 4. Subcarousel (last, 240ms delay) */
    .lightbox-sub-carousel {
    transition: transform 0.40s cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms,
                opacity 0.20s ease 200ms;
    }

    .lightbox.expanded-mode .lightbox-sub-carousel {
    transform: translateY(-150%);
    opacity: 0;
    pointer-events: none;
    }

    /* Hide close button in expanded mode */
    .lightbox.expanded-mode .lightbox-close {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    }

    /* === Reverse Animation on Exit === */
    /* When .expanded-mode is REMOVED, delays reverse automatically via CSS */
    .lightbox:not(.expanded-mode) .lightbox-nav {
    transition-delay: 240ms; /* ✅ Reversed: last becomes first */
    }

    .lightbox:not(.expanded-mode) .lightbox-info .lightbox-tab-content,
    .lightbox:not(.expanded-mode) .lightbox-info .lightbox-tabs {
    transition-delay: 160ms;
    }

    .lightbox:not(.expanded-mode) .lightbox-title {
    transition-delay: 80ms;
    }

    .lightbox:not(.expanded-mode) .lightbox-sub-carousel {
    transition-delay: 0ms; /* ✅ First to return */
    }

    .hidden {
    display: none !important;
    }

  /* Fullscreen subcarousel navigation arrows */
  .fullscreen-nav-arrows {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9999; /* ⬅️ Bumped up for desktop visibility – arrows on top! */
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  /* Show arrows when expanded with pulse */
  .lightbox-media-container.expanded .fullscreen-nav-arrows {
    opacity: 1;
    animation: arrowsFadeInPulseOut 3.5s ease forwards;
  }

  /* Fade in, pulse a couple times, then fade out */
  @keyframes arrowsFadeInPulseOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    30% { opacity: 0.6; }
    50% { opacity: 1; }
    70% { opacity: 0.6; }
    85% { opacity: 1; }
    100% { opacity: 0; }
  }

  .fullscreen-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 52px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    pointer-events: auto;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
  }

  .fullscreen-nav-arrow:hover {
    color: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
  }

  .fullscreen-nav-left {
    left: 2vw;
  }

  .fullscreen-nav-right {
    right: 2vw;
  }

  /* Desktop arrow key hint (pulses and fades, only on desktop) */
  .desktop-nav-hint {
    display: none; /* Hidden by default */
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    white-space: nowrap;
    animation: arrowsFadeInPulseOut 3.5s ease forwards; /* Same pulse as arrows */
  }

  @media (min-width: 769px) {
    .lightbox-media-container.expanded .desktop-nav-hint {
      display: block;
    }
  }

  /* Enable pinch-zoom in expanded mode */
  .lightbox-media-container.expanded {
  touch-action: pinch-zoom;
  }