.work-container {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  overflow-x: hidden;
}

.work-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: clamp(1em, 3vw, 2em);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  flex-wrap: wrap;
  gap: 1em;
}

.work-header .site-logo {
  position: relative;
  top: auto;
  left: auto;
}

.work-header .nav {
  position: relative;
  right: auto;
  width: auto;
  padding: 0;
}

.work-hero {
  padding: clamp(8em, 15vh, 12em) clamp(1em, 3vw, 2em) clamp(3em, 8vh, 6em) clamp(1em, 3vw, 2em);
  max-width: 1400px;
  margin: 0 auto;
}

.hero-text h2 {
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.5em;
  color: #000;
}

.hero-text p {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-weight: 400;
  color: #666;
  max-width: 600px;
}

.projects-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(2em, 5vw, 4em) clamp(1em, 3vw, 2em);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(2em, 5vw, 4em) clamp(1.5em, 4vw, 3em);
}

.project-card {
  position: relative;
  cursor: pointer;
  transition: transform 0.4s ease;
}

.project-card:hover {
  transform: translateY(-10px);
}

.project-image {
  width: 100%;
  height: clamp(300px, 50vw, 500px);
  overflow: hidden;
  margin-bottom: 1.5em;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  filter: saturate(0.8);
}

.project-card:hover .project-image img {
  transform: scale(1.05);
  filter: saturate(1);
}

.project-info h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  margin-bottom: 0.5em;
  color: #000;
}

.project-category {
  font-family: 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(0.7rem, 1.5vw, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #999;
  margin-bottom: 1em;
}

.project-description {
  font-size: clamp(0.9rem, 2vw, 1rem);
  line-height: 1.6;
  color: #666;
  max-width: 400px;
}

.work-footer {
  background-color: #f8f8f8;
  padding: clamp(2em, 5vw, 4em) clamp(1em, 3vw, 2em);
  margin-top: clamp(3em, 8vw, 6em);
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: clamp(2em, 5vw, 4em);
  flex-wrap: wrap;
}

.footer-col {
  flex: 1;
  min-width: 200px;
}

.footer-label {
  font-family: 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(0.7rem, 1.5vw, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1em;
  color: #000;
  font-weight: 600;
}

.footer-col p {
  font-size: clamp(0.8rem, 1.8vw, 0.9rem);
  line-height: 1.6;
  color: #666;
}

/* Responsive Design */

/* Font Updates */
body,
html {
  font-family: 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.hero-text h2,
.project-info h3,
.logo,
h1 {
  font-family: inherit !important;
  /* Override Playfair */
}

.project-category,
.footer-label,
.btn {
  font-family: inherit !important;
  /* Override Lato/Mono */
  letter-spacing: 0.05em;
}

/* Force Desktop Grid on Mobile */
@media (max-width: 768px) {
  .work-header {
    flex-direction: row !important;
    /* Keep row */
    align-items: center !important;
  }

  .work-header .nav {
    display: flex !important;
    /* Show nav if space permits, or hide if too small but don't stack */
    width: auto !important;
  }

  .projects-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    /* Force grid */
    gap: 2em !important;
  }

  .project-image {
    height: 300px !important;
    /* Standard height */
  }

  /* Hide mobile toggle if we want full desktop UI? 
     Actually if we want DESKTOP UI, we should hide mobile toggle and show normal nav. 
     But normal nav might overflow. 
     I'll enable scrolling for nav or wrap it. 
  */
  .work-mobile-nav-toggle {
    display: none !important;
  }

  .work-header .nav {
    position: relative !important;
    display: flex !important;
  }
}

/* Override other mobile media queries */
@media (max-width: 480px) {
  .projects-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
    gap: 1.5em !important;
  }
}