body {
      font-family: 'Inter', sans-serif;
      -webkit-font-smoothing: antialiased;
      scroll-behavior: smooth;
  }
  .grayscale-filter {
      filter: grayscale(100%);
  }
  
  /* Smooth transitions for Smart Animate feel */
  header {
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                  padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                  background-color 0.4s ease,
                  border-color 0.4s ease;
      z-index: 50;
  }

  #main-logo-container {
      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Compact state classes handled via JS */
  .header-compact {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
      border-bottom-color: rgba(0,0,0,0.05) !important;
  }
  .logo-compact {
      width: 6rem !important; /* Smaller logo */
  }

  /* Mobile Menu Transition */
  #mobile-menu {
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

    /* Contact Form Styles */
  .contact-input {
      width: 100%;
      border: none;
      border-bottom: 1px solid #000;
      padding: 0.75rem 0;
      font-size: 14px;
      outline: none;
      background: transparent;
  }
  .contact-input::placeholder {
      color: #9ca3af;
  }
  .form-icon {
      position: absolute;
      right: 0;
      bottom: 12px;
      width: 18px;
      height: 18px;
      color: #9ca3af;
      pointer-events: none;
  }


/* See More Button Animation - Sequential Stroke Border */
.see-more-btn {
    position: relative;
    padding: 8px 16px 8px 8px;
    gap:4px;
    display: inline-flex;
    align-items: center;
    background: transparent;
    cursor: pointer;
    box-sizing: border-box;
}

/* Top and Right Segments */
.see-more-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 1.5px solid transparent;
    border-right: 1.5px solid transparent;
    box-sizing: border-box;
    transition: width 0.1s linear 0.3s, height 0.1s linear 0.2s;
}

/* Bottom and Left Segments */
.see-more-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 1.5px solid transparent;
    border-left: 1.5px solid transparent;
    box-sizing: border-box;
    transition: width 0.1s linear 0.1s, height 0.1s linear;
}

.see-more-btn:hover::before {
    width: 100%;
    height: 100%;
    border-top-color: #252525;
    border-right-color: #252525;
    transition: width 0.1s linear, height 0.1s linear 0.1s;
}

.see-more-btn:hover::after {
    width: 100%;
    height: 100%;
    border-bottom-color: #252525;
    border-left-color: #252525;
    transition: width 0.1s linear 0.2s, height 0.1s linear 0.3s;
}

.see-more-btn .arrow-icon {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.see-more-btn .btn-text {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

.see-more-btn:hover .arrow-icon {
    transform: translateX(8px);
}

.see-more-btn:hover .btn-text {
    transform: translateX(2px);
}

/* Lightbox specific styles */
#lightbox {
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    opacity: 0;
}
#lightbox.active {
    pointer-events: auto;
    opacity: 1;
}

/* Mobile Devices / Touch Devices interaction for images */
@media (hover: none) and (pointer: coarse) {
    .group.mobile-in-center img {
        filter: grayscale(0) !important;
        transform: scale(1.05) !important;
    }
}