/* ================================
   Accessibility & Focus
================================ */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

:root {
  /* Color System */
  --bg: #0a0a0a;
  --ink: #f5f5f5;
  --muted: #c7c7c7;
  --orange: #f18805;
  --orange-2: #f1a208;
  --teal: #0f3f44;
  --card: #111316;

  /* Typography */
  --font-sans: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Playfair Display", serif;
  --fs-1: 14px;
  --fs-2: 16px;
  --fs-3: 18px;
  --fs-4: 20px;
  --fs-5: 22px;
  --fs-6: 28px;
  --fs-7: 32px;
  --fs-8: 40px;
  --lh-tight: 1.2;
  --lh-base: 1.6;
  --lh-relaxed: 1.7;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px;
  --space-8: 40px;
  --space-9: 50px;
  --space-10: 60px;
  --space-11: 80px;

  /* Layout */
  --container-max: 1100px;
  --container-width: 92%;

  /* Radius */
  --radius-1: 8px;
  --radius-2: 12px;
  --radius-3: 16px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 20px 40px rgba(0, 0, 0, 0.3);
  --shadow: var(--shadow-2);

  /* Motion */
  --dur-1: 150ms;
  --dur-2: 300ms;
  --dur-3: 600ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index */
  --z-header: 50;
  --z-menu: 90;
  --z-overlay: 85;
  --z-fab: 1000;
  --z-lightbox: 9999;

  color-scheme: dark;
}

/* ================================
   Table of Contents
   1. Accessibility & Focus
   2. Design Tokens
   3. Global Resets & Defaults
   4. Typography
   5. Header
   6. Hero
   7. Pills & Checklists
   8. Sections (General)
   9. Contact Info
   10. Specialities
   11. Products
   12. Gallery
   13. Contact
   14. Buttons
   15. Location
   16. Testimonials
   17. Footer
   18. Scroll Reveal
   19. Back to Top
   20. Filters
   21. Lightbox
   22. Reduced Motion
================================ */

/* ================================
   Global Resets & Defaults
================================ */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  line-height: var(--lh-base);
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(var(--container-max), var(--container-width));
  margin-inline: auto;
}

@media (max-width: 640px) {
  .container {
    width: 100%;
    padding-inline: var(--space-4);
  }
}

/* ================================
   Typography
================================ */
.section-title {
  font-size: clamp(32px, 5vw, 48px); /* Responsive font size */
  font-weight: 700; /* Bolder weight */
  font-family: var(--font-serif);
  color: var(--ink);
  margin-bottom: 20px; /* Adjusted margin */
  position: relative;
  display: inline-block;
  padding-bottom: 15px; /* Increased padding */
  line-height: var(--lh-tight);
  letter-spacing: 0.3px;
  text-align: center;
}

.section-title::after {
  content: "";
  display: block;
  width: 80px; /* Increased width */
  height: 4px; /* Increased height */
  background: var(--orange);
  margin: 15px auto 0;
  border-radius: 5px;
}

/* Modifier for left-aligned section titles */
.section-title.left {
  text-align: left;
}

.section-title.left::after {
  margin-left: 0;
  margin-right: 0;
}

.section-subtitle {
  max-width: 650px; /* Increased max-width */
  margin: -15px auto 50px; /* Adjusted margin */
  color: var(--muted);
  font-size: var(--fs-3); /* Increased font size */
  line-height: var(--lh-relaxed);
}

.section-text p:not(.section-subtitle):not(.client-name) {
  font-size: var(--fs-2);
  font-weight: 300;
  /* slightly lighter for readability */
  line-height: var(--lh-relaxed);
  /* good spacing between lines */
  color: var(--muted);
  /* softer color for body text */
  margin-bottom: var(--space-4);
  /* spacing between paragraphs */
}

/* Enhance inline highlights */
.section-text p strong {
  font-weight: 600;
  color: var(--orange);
  /* highlights stand out */
}

.section-text p em {
  font-style: italic;
  color: var(--teal);
  /* subtle secondary highlight */
}

/* ================================
   Header
================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(10, 10, 10, .8);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #1b1b1b;
  transition: padding var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard);
}

.site-header.scrolled {
  padding: 5px 0;
  background: rgba(10, 10, 10, 0.95);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

@supports not (backdrop-filter: blur(8px)) {
  .site-header {
    background: rgba(10, 10, 10, 0.95);
  }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
}


.brand-text {
  letter-spacing: .3px;
}

/* Navigation */
.menu {
  display: flex;
  gap: var(--space-7);
}

.menu a {
  opacity: .9;
  font-weight: 200;
  font-size: var(--fs-3);
}

.menu a:hover {
  color: var(--orange);
}

/* Hamburger (mobile) */
.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: var(--fs-5);
  color: var(--ink);
  cursor: pointer;
  z-index: var(--z-menu);
  position: relative;
  width: 30px;
  height: 20px;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  position: absolute;
  transition: all var(--dur-2) var(--ease-standard);
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { top: 18px; }

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 9px;
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 9px;
}

/* Header - Responsive */
@media (max-width: 860px) {
  .menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -100%; /* Off-screen */
    width: 280px;
    height: 100vh;
    background: rgba(13, 15, 18, 0.98);
    backdrop-filter: blur(10px);
    padding: var(--space-11) var(--space-7);
    border-left: 1px solid #2a2f35;
    transition: right var(--dur-3) var(--ease-standard);
    z-index: var(--z-menu);
    gap: 15px;
  }

  .menu.active {
    right: 0;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  }

  .menu a {
    display: block;
    padding: 15px 20px;
    font-size: var(--fs-4);
    border-radius: var(--radius-2);
    opacity: 0;
    transform: translateX(20px);
    transition: all var(--dur-2) var(--ease-standard);
  }

  .menu.active a {
    opacity: 1;
    transform: translateX(0);
  }

  /* Staggered delay for menu items */
  .menu.active a:nth-child(1) { transition-delay: 0.1s; }
  .menu.active a:nth-child(2) { transition-delay: 0.2s; }
  .menu.active a:nth-child(3) { transition-delay: 0.3s; }
  .menu.active a:nth-child(4) { transition-delay: 0.4s; }
  .menu.active a:nth-child(5) { transition-delay: 0.5s; }

  .menu a:hover {
    background: rgba(241, 136, 5, 0.1);
    color: var(--orange);
  }

  .hamburger {
    display: block;
  }

  /* Overlay for when menu is open */
  .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all var(--dur-2) var(--ease-standard);
    z-index: var(--z-overlay);
  }

  .menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }
}

@supports not (backdrop-filter: blur(10px)) {
  @media (max-width: 860px) {
    .menu {
      background: #0d0f12;
    }
  }
}

/* ================================
   Hero Section
================================ */


.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: 32px;
  position: relative; /* Ensure relative positioning */
  z-index: 2; /* Ensure content is on top of bg and overlay */
}

.tagline {
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: clamp(32px, 5vw, 40px);
  margin: 0 0 10px;
}

.hero-copy p {
  color: var(--muted);
  max-width: 52ch;
  margin-bottom: 22px;
}

/* Hero Hex Frame */
.hex-frame {
  --size: 360px;
  width: var(--size);
  aspect-ratio: 1;
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  border: 6px solid #fff;
  outline: 12px solid var(--orange);
  box-shadow: var(--shadow);
  margin-inline: auto;
}

.accent-stripe {
  position: absolute;
  right: -120px;
  bottom: 10%;
  width: 320px;
  height: 70px;
  background: var(--orange);
  transform: skewX(-60deg);
}

/* Hero - Responsive */
@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hex-frame {
    --size: 300px;
  }

  .accent-stripe {
    display: none;
  }
}

/* ================================
   Pills & Checklists
================================ */
.pill {
  display: inline-block;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  margin: 12px 0;
}

.pill.orange {
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
}

.pill.yellow {
  background: linear-gradient(90deg, #ffce47, #ffb703);
  color: #111;
}

.checklist {
  display: grid;
  gap: 8px;
  padding-left: 0;
  list-style: none;
  margin: 12px 0;
}

.checklist li {
  position: relative;
  padding-left: 26px;
}

.checklist li:before {
  content: '>';
  position: absolute;
  left: 0;
  opacity: .9;
  color: var(--orange);
}

/* ================================
   Sections (General)
================================ */
.about,
.pillars,
.cards,
.products,
.gallery,
.contact {
  padding: var(--space-9) 0;
}

/* ================================
   Contact Info Section
================================ */
.contact-info {
  display: grid;
  gap: 16px;
  font-size: 16px;
  color: var(--muted);
  font-style: normal;
  /* reset <address> italics */
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

.contact-list li {
  display: flex;
  align-items: center; /* Changed from flex-start */
  gap: 15px; /* Increased gap */
  line-height: 1.6;
  font-size: var(--fs-3); /* Increased font size */
}

.contact-list i {
  font-size: 24px; /* Increased icon size */
  color: var(--orange);
  flex-shrink: 0;
  width: 30px; /* Added width for alignment */
  text-align: center;
}

.contact-list a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-standard);
}

.contact-list a:hover {
  color: var(--ink);
}

/* Pillars */
.pillars .bullets {
  margin: 0;
  padding-left: 18px;
}

.pillars .bullets li {
  margin: 8px 0;
}

/* ================================
   Specialities Section
================================ */
.specialities {
  background: #101214;
  padding: var(--space-10) 0;
  text-align: center;
}

.specialities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  text-align: left;
}

.speciality-card {
  background: var(--card);
  border: 1px solid #2a2f35;
  border-radius: var(--radius-3);
  padding: var(--space-7);
  transition: all var(--dur-2) var(--ease-standard);
  position: relative;
  overflow: hidden;
}

.speciality-card:hover {
  transform: translateY(-10px);
  border-color: var(--orange);
  box-shadow: var(--shadow-3);
}

.card-icon {
  font-size: 40px;
  color: var(--orange);
  margin-bottom: 20px;
  display: inline-block;
}

.speciality-card h3 {
  margin: 0 0 15px;
  color: var(--ink);
  font-size: var(--fs-5);
}

.speciality-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: var(--lh-relaxed);
}

@media (max-width: 900px) {
  .specialities-grid {
    grid-template-columns: 1fr;
  }
}



/* ================================
   Products
================================ */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
}

.category {
  background: var(--card);
  border: 1px solid #2a2f35;
  border-radius: var(--radius-3);
  overflow: hidden;
  text-align: center;
  transition: all var(--dur-2) var(--ease-standard);
  position: relative;
}

.category:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-3);
  border-color: var(--orange);
}

.category img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #fff;
  transition: transform var(--dur-2) var(--ease-standard);
}

.category:hover img {
  transform: scale(1.05);
}

.category span {
  display: block;
  padding: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  position: relative;
  z-index: 1;
}

/* Pagination Styles */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}

.pagination-btn {
  background: #1a1d20;
  color: var(--muted);
  border: 1px solid #2a2f35;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-standard);
  font-weight: 600;
}

.pagination-btn:hover {
  border-color: var(--orange);
  color: var(--ink);
}

.pagination-btn.active {
  background: var(--orange);
  color: #111;
  border-color: var(--orange);
  transform: scale(1.1);
}

@media (max-width: 640px) {
  .category-grid {
    grid-template-columns: 1fr 1fr; /* 2 columns on mobile */
    gap: 15px;
  }
  .category img {
    object-fit: contain;
    padding: 6px;
    background: #fff;
  }
}

@media (max-width: 420px) {
  .category-grid {
    grid-template-columns: 1fr;
  }
  .menu {
    width: 100%;
  }
}

/* ================================
   Gallery
================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.gallery-grid img {
  border-radius: var(--radius-2);
  border: 1px solid #1b1b1b;
}

@media (max-width: 860px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================
   Contact
================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ================================
   Contact Form & Validation
================================ */
.contact-form {
  display: grid;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.form-group label {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}

.contact-form input,
.contact-form textarea {
  border: 1px solid #2a2f35;
  background: #0f1114;
  color: var(--ink);
  padding: 12px 15px;
  border-radius: var(--radius-2);
  transition: all var(--dur-2) var(--ease-standard);
  font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--orange);
  background: #14171b;
}

.error-msg {
  color: #ff4d4d;
  font-size: 12px;
  margin-top: 4px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--dur-2) var(--ease-standard);
}

.form-group.invalid input,
.form-group.invalid textarea {
  border-color: #ff4d4d;
  background: rgba(255, 77, 77, 0.05);
}

.form-group.invalid .error-msg {
  opacity: 1;
  visibility: visible;
}

.form-group.valid input,
.form-group.valid textarea {
  border-color: #4CAF50;
}


@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================
   Buttons
================================ */
.btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 600;
  transition: transform var(--dur-2) var(--ease-standard), filter var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}

.btn.primary {
  background: var(--orange);
  color: #111;
}

.btn.primary:hover {
  filter: brightness(.92);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-11) 0;
  overflow: hidden;
  color: var(--ink);
}

.hero-carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero-slide.active {
  opacity: 1;
}

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

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(10, 10, 10, 0.75), rgba(10, 10, 10, 0.45));
  z-index: 1;
}

/* Location Section */
.location {
  padding: var(--space-9) 0;
  background: #0f1114;
  /* dark background */
}

.location .section-title {
  text-align: center;
  color: var(--ink);
}

.map-wrapper {
  margin: 24px auto 0;
  max-width: 850px;
  /* limit width */
  border-radius: var(--radius-3);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  border: 1px solid #1b1f22;
}

/* ================================
   Testimonials
================================ */
.testimonials {
  padding: 48px 0;
  text-align: center;
  background: #101214;
  /* dark theme background */
  color: var(--ink);
}

.testimonial-slider {
  position: relative;
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
}

.testimonial-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.testimonial {
  min-width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.testimonial blockquote {
  font-size: var(--fs-3);
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

.client-name {
  font-weight: 600;
  margin-top: 8px;
  color: var(--orange);
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--orange);
  object-fit: cover;
  margin-bottom: 10px;
}

/* Slider Buttons */
.testimonial-slider button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 50%;
  padding: 10px 14px;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-standard);
}

.testimonial-slider button:hover {
  background: var(--teal);
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}


/* ================================
   Footer Layout
================================ */
.site-footer {
  background: #0f1114;
  border-top: 1px solid #2a2f35;
  padding: var(--space-9) 0 0;
  color: var(--muted);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr 1fr;
  gap: 40px;
  padding-bottom: var(--space-8);
}

.footer-column h4 {
  color: var(--orange);
  margin-bottom: 20px;
  font-weight: 600;
  font-size: var(--fs-3);
}

.footer-brand p {
  font-size: var(--fs-1);
  line-height: var(--lh-relaxed);
  max-width: 90%;
  margin-top: 15px;
}

.footer-links ul,
.footer-contact ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.footer-links a,
.footer-contact a,
.footer-contact span {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-standard);
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--orange);
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-contact i {
  color: var(--orange);
  font-size: 16px;
}

.footer-social .social-links {
  display: flex;
  gap: 15px;
}

.footer-social .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1a1d20;
  color: var(--muted);
  transition: all var(--dur-2) var(--ease-standard);
}

.footer-social .social-links a:hover {
  background: var(--orange);
  color: #111;
  transform: translateY(-3px);
}

/* Footer Bottom */
.footer-bottom {
  border-top: 1px solid #2a2f35;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--fs-1);
}

.footer-bottom .credit strong {
  color: var(--orange);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* ================================
   Scroll Reveal Animations
================================ */
.reveal-hidden {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), transform 0.8s cubic-bezier(0.5, 0, 0, 1);
  will-change: opacity, transform;
}

.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Base transitions for elements that can be revealed */
.category, .speciality-card, .card, .testimonial {
  transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.6s ease;
}


/* ================================
   Back to Top Floating Button
================================ */
.back-to-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--orange);
  color: #111;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: all var(--dur-2) var(--ease-standard);
  z-index: var(--z-fab);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.back-to-top-btn:hover {
  background: var(--orange-2);
  transform: translateY(-5px);
}

/* ================================
   Active Nav Link
================================ */
.menu a.active {
  color: var(--orange);
  font-weight: 500;
  border-bottom: 2px solid var(--orange);
}

/* ================================
   Product & Card Enhancements
================================ */
/* ================================
   Filter Buttons
================================ */
.filter-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.filter-btn {
  background: #1a1d20;
  color: var(--muted);
  border: 1px solid #2a2f35;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-standard);
  font-weight: 500;
}

.filter-btn:hover {
  border-color: var(--orange);
  color: var(--ink);
}

.filter-btn.active {
  background: var(--orange);
  color: #111;
  border-color: var(--orange);
}

.category.hide {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
}


/* ================================
   Form Success State
================================ */
.form-success {
  text-align: center;
  padding: 40px;
  background: #111;
  border-radius: var(--radius-3);
  border: 1px solid var(--orange);
}

/* ================================
   Lightbox Modal Styles
================================ */
.lightbox {
  display: none;
  position: fixed;
  z-index: var(--z-lightbox);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.lightbox.active {
  display: flex;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-1);
  box-shadow: 0 0 40px rgba(241, 136, 5, 0.3);
  animation: lightboxFadeIn var(--dur-2) ease-out;
}

.lightbox-caption {
  margin-top: 15px;
  color: var(--orange);
  font-weight: 500;
  font-size: 1.2rem;
  text-align: center;
}

/* Lightbox Navigation & Close Buttons */
.lightbox button {
  position: absolute;
  background: rgba(241, 136, 5, 0.2);
  color: #fff;
  border: 1px solid rgba(241, 136, 5, 0.4);
  font-size: 2rem;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 50%;
  transition: all var(--dur-2) var(--ease-standard);
  z-index: calc(var(--z-lightbox) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}

.lightbox button:hover {
  background: var(--orange);
  color: #111;
  transform: scale(1.1);
}

.lightbox-close {
  top: 20px;
  right: 20px;
  font-size: 2.5rem;
}

.lightbox-prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

@keyframes lightboxFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Ensure body doesn't scroll when lightbox or mobile menu is open */
body.lightbox-open,
body.no-scroll {
  overflow: hidden;
}

@media (max-width: 768px) {
  .lightbox-prev, .lightbox-next {
    top: auto;
    bottom: 30px;
    transform: none;
  }
  .lightbox-prev {
    left: calc(50% - 60px);
  }
  .lightbox-next {
    right: calc(50% - 60px);
  }
  .lightbox-content {
    max-width: 95%;
  }
}

/* ================================
   Reduced Motion
================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}