/* ── Google Fonts ─────────────────────────────────────────────
   Loaded in header.php via <link> for performance.
   Fallback declarations here for editor contexts. */

:root {
  --color-bg:            #fdfcf7; /* warm ivory */
  --color-bg-secondary:  #f4f0e6; /* soft beige */
  --color-forest:        #1c2b21; /* deep forest green */
  --color-forest-light:  #2c4234;
  --color-gold:          #c39c4a; /* muted gold / brass */
  --color-gold-hover:    #a17d35;
  --color-gold-rgb:      195, 156, 74;
  --color-beige:         #1a201b; /* dark forest for text */
  --color-beige-muted:   #3a473d; /* secondary text */
  --color-text-secondary:#5e6b62;
  --color-border:        rgba(28, 43, 33, 0.15);
  --color-border-light:  rgba(28, 43, 33, 0.08);
  --font-primary: "Plus Jakarta Sans", sans-serif;
  --font-serif: var(--font-primary);
  --font-sans: var(--font-primary);
  --font-display: var(--font-primary);
  --transition-smooth:   all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast:     all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold) var(--color-bg);
  background-color: var(--color-bg);
  color: var(--color-beige);
  font-family:var(--font-primary);
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
  line-height: 1.6;
  background-color: var(--color-bg);
  color: var(--color-beige);
}

img { max-width: 100%; height: auto; }
a  { color: inherit; }

/* Custom Scrollbar */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--color-bg); }
::-webkit-scrollbar-thumb  { background: var(--color-gold); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-gold-hover); }

/* ── Utility ────────────────────────────────────────────────── */
.ms-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── Film Grain Overlay ─────────────────────────────────────── */
.grain-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  z-index: 9999;
}

/* ── Page Transition Curtain ────────────────────────────────── */
.page-transition {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--color-forest-light);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(100%);
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.page-transition.active  { transform: translateY(0); }
.page-transition.exit    { transform: translateY(-100%); }

.transition-banner {
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}
.page-transition.active .transition-banner {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}
.banner-logo {
  display: block;
  font-family:inherit;
  font-size: 2.5rem;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  font-weight: 800;
  margin-bottom: 0.5rem;
}
.banner-sub {
  font-size: 0.85rem;
  letter-spacing: 0.5em;
  color: var(--color-beige-muted);
  text-transform: uppercase;
}

/* ── Luxury Header & Nav ────────────────────────────────────── */
.luxury-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 999;
  background: transparent;
  padding-top: 1rem;
  /* We use CSS variable for sticky bg */
  --sticky-bg: rgba(0, 0, 0, 0.95);
  transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* On inner pages, start with a solid full-width background to prevent text overlap */
body:not(.home) .luxury-header {
  background-color: var(--sticky-bg);
}
/* When scrolling on inner pages, fade out the full-width background so the pill can take over */
body:not(.home) .luxury-header.scrolled {
  background-color: transparent;
}
.header-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  /* Pure transform transition, extremely smooth */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top center;
}

/* Background Pill built using a pseudo-element */
.header-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50px;
  background-color: var(--sticky-bg);
  opacity: 0;
  transform: scale(1.05); /* slightly expanded initially */
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}

.logo-link {
  text-decoration: none;
  color: var(--color-beige);
  display: flex;
  align-items: center;
  position: relative;
  min-height: 40px;
  /* Logo smoothly scales to fit perfectly in the pill */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: left center;
}
.default-logo {
  display: flex;
  flex-direction: column;
}

/* ── Pure Transform Scrolled State ── */
.luxury-header.scrolled {
  padding-top: 1rem;
}

/* Scale the entire container down by 15%, which mathematically pulls the edges inward perfectly! */
.luxury-header.scrolled .header-container {
  transform: scale(0.85);
}

/* Fade in the background pseudo-element and shrink it to fit the items exactly */
.luxury-header.scrolled .header-container::before {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.logo-text-large {
  font-family:inherit;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--color-gold);
  line-height: 1;
}
.logo-text-sub {
   font-family:inherit;
  font-size: 0.65rem;
  letter-spacing: 0.6em;
  color: var(--color-beige-muted);
  font-weight: 400;
  margin-top: 0.2rem;
  padding-left: 0.1em;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: transparent !important;
}
.nav-link-desktop {
   font-family:inherit;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-beige-muted);
  text-decoration: none;
  transition: var(--transition-fast);
}
.nav-link-desktop:hover { color: var(--color-gold); }

.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-beige);
  padding: 0;
}
.menu-text {
   font-family:inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  transition: var(--transition-fast);
}
.menu-hamburger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 24px;
}
.menu-hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-gold);
  transition: var(--transition-smooth);
}
.menu-hamburger span:last-child {
  width: 70%;
  align-self: flex-end;
}
.menu-toggle:hover .menu-hamburger span:last-child { width: 100%; }
.menu-hamburger.active span:first-child {
  transform: rotate(45deg) translate(5px, 6px);
}
.menu-hamburger.active span:last-child {
  width: 100%;
  transform: rotate(-45deg) translate(5px, -6px);
}

/* ── Mega Menu Overlay ──────────────────────────────────────── */
.mega-menu {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.mega-menu.open {
  opacity: 1;
  pointer-events: auto;
}
.menu-backdrop {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(253, 252, 247, 0.97);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.menu-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8rem 2rem 4rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.menu-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  flex: 1;
  align-items: center;
}
.menu-col-left {
  border-right: 1px solid var(--color-border);
  padding-right: 4rem;
}
.menu-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  color: var(--color-gold);
  margin-bottom: 2rem;
  text-transform: uppercase;
}
.mega-menu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mega-menu-item {
  font-family:inherit;
  font-size: 2.2rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-beige-muted);
  transition: var(--transition-smooth);
  display: inline-block;
  line-height: 1.2;
}
.mega-menu-item:hover {
  color: var(--color-gold);
  transform: translateX(15px);
}
.menu-col-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.preview-default-content {
  border: 1px solid var(--color-border);
  background: rgba(28, 43, 33, 0.02);
  padding: 3rem;
  border-radius: 4px;
}
.preview-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--color-gold);
  margin-bottom: 1rem;
}
.preview-description {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 2rem;
}
.preview-badge {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  border: 1px solid var(--color-border);
}
.menu-preview-card { animation: fadeIn 0.4s ease forwards; }
.menu-preview-img-container {
  width: 100%;
  height: 250px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-bottom: 1.5rem;
}
.menu-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-preview-card:hover .menu-preview-img { transform: scale(1.08); }
.menu-preview-title {
  font-family:inherit;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}
.menu-preview-sub {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
}
.menu-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}
.menu-preview-list li {
  font-size: 0.75rem;
  background: rgba(28, 43, 33, 0.05);
  border: 1px solid var(--color-border-light);
  padding: 0.25rem 0.75rem;
  border-radius: 2px;
  color: var(--color-beige-muted);
}
.menu-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-border-light);
  padding-top: 2rem;
  margin-top: 2rem;
}
.menu-footer-links { display: flex; gap: 2rem; }
.menu-footer-link {
  text-decoration: none;
  font-size: 0.8rem;
  color: var(--color-beige-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: var(--transition-fast);
}
.menu-footer-link:hover { color: var(--color-gold); }
.menu-footer-info {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.05em;
}

/* ── Section Structures ─────────────────────────────────────── */
section { position: relative; width: 100%; }
.section-header {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8rem 2rem 4rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: end;
}
.sec-title {
  font-family:inherit;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.sec-desc {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 550px;
}

/* ── Hero Section ───────────────────────────────────────────── */
.hero-sec {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at center, var(--color-bg-secondary) 0%, var(--color-bg) 80%);
}
.hero-canvas-container {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.hero-globe-canvas { width: 100%; height: 100%; display: block; }
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 1000px;
  padding: 0 2rem;
}
.hero-label {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.5em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  font-weight: 600;
  animation: fadeInUp 1s ease forwards;
}
.hero-title {
  font-family:inherit;
  font-size: clamp(2.5rem, 6.5vw, 6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-beige);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  animation: fadeInUp 1.2s ease forwards;
}
.hero-subheading {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2vw, 1.6rem);
  font-style: italic;
  color: var(--color-beige-muted);
  max-width: 700px;
  margin: 0 auto 3.5rem auto;
  line-height: 1.5;
  animation: fadeInUp 1.4s ease forwards;
}
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 4rem;
  border-top: 1px solid var(--color-border);
  padding-top: 2rem;
  animation: fadeInUp 1.6s ease forwards;
}
.hero-stat-item { text-align: center; }
.hero-stat-num {
  display: block;
  font-family:inherit;
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.hero-stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

/* ── Ecosystem Section ──────────────────────────────────────── */
.ecosystem-sec {
  background: radial-gradient(circle at center, var(--color-bg-secondary) 0%, var(--color-bg) 100%);
  padding: 0 0 8rem 0;
}
.ecosystem-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 6rem;
  align-items: start;
  padding-top: 6rem;
}
.eco-left { position: sticky; top: 120px; }
.eco-title {
  font-family:inherit;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.eco-desc {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 3rem;
  max-width: 400px;
}
.eco-cat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.eco-cat-item {
  font-family:inherit;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-beige-muted);
  padding: 0.75rem 1.5rem;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.eco-cat-item:hover,
.eco-cat-item.active {
  color: var(--color-gold);
  border-left-color: var(--color-gold);
  background: rgba(195, 156, 74, 0.05);
}

/* Ecosystem Right Side (visuals) */
.eco-right {
  min-height: 500px;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(253, 252, 247, 0.5);
  position: relative;
}
.eco-network-wrapper { position: relative; width: 100%; height: 100%; min-height: 500px; }
.eco-network-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(195,156,74,0.05) 0%, transparent 70%);
}
.eco-main-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}
.eco-floating-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.5rem;
}
.eco-float-label {
   font-family:inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-beige);
  background: rgba(253, 252, 247, 0.95);
  border: 1px solid var(--color-border);
  padding: 0.4rem 1rem;
  border-radius: 2px;
  cursor: default;
  transition: var(--transition-fast);
}
.eco-float-label:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}
.eco-origin-tags {
  padding: 0 1.5rem 0.5rem;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}
.eco-origin-title {
  color: var(--color-gold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 0.5rem;
}
.eco-process-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 1.5rem 1.5rem;
}
.eco-chip {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  border: 1px solid rgba(195, 156, 74, 0.4);
  padding: 0.25rem 0.75rem;
  border-radius: 2px;
}

/* ── Commodity Showcase (Horizontal Scroll) ─────────────────── */
.showcase-sec {
  background: var(--color-bg);
  padding-bottom: 10rem;
}
.showcase-header {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8rem 2rem 4rem 2rem;
}
.showcase-title {
  font-family:inherit;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  text-transform: uppercase;
}
.showcase-horizontal-container {
  overflow: hidden;
  position: relative;
}
.showcase-track {
  display: flex;
  gap: 2rem;
  padding: 0 4rem;
  will-change: transform;
}
.showcase-slide {
  flex-shrink: 0;
  width: 380px;
  cursor: pointer;
  position: relative;
}
.showcase-slide-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  border: 1px solid var(--color-border-light);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  filter: grayscale(15%);
}
.showcase-slide:hover .showcase-slide-img {
  transform: scale(1.03);
  filter: grayscale(0%);
}
.showcase-slide-info {
  padding: 1.5rem 0.5rem 0;
}
.showcase-slide-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--color-beige);
  margin-bottom: 0.5rem;
  transition: var(--transition-fast);
}
.showcase-slide:hover .showcase-slide-title { color: var(--color-gold); }
.showcase-slide-cat {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 1rem;
}
.showcase-slide-btn {
   font-family:inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  background: none;
  border: 1px solid var(--color-gold);
  padding: 0.5rem 1.2rem;
  cursor: pointer;
  transition: var(--transition-fast);
  border-radius: 2px;
}
.showcase-slide-btn:hover {
  background: var(--color-gold);
  color: var(--color-bg);
}

/* ── Origins Section ────────────────────────────────────────── */
.origins-sec {
  background: var(--color-bg);
  padding-bottom: 8rem;
}
.origins-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 6rem;
  align-items: center;
}
.origins-scroll-list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.origins-main-title {
  font-family:inherit;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 3rem;
}
.origin-card {
  opacity: 0.4;
  transform: translateY(20px);
  transition: var(--transition-smooth);
  cursor: pointer;
  padding-left: 2rem;
  border-left: 2px solid transparent;
}
.origin-card.active {
  opacity: 1;
  transform: translateY(0);
  border-left-color: var(--color-gold);
}
.origin-region {
  font-family:inherit;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}
.origin-desc {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.origins-visual {
  position: relative;
  height: 500px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}
.origins-map-svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Journey Section ────────────────────────────────────────── */
.journey-sec-outer { background: var(--color-bg-secondary); }
.journey-sec-sticky { position: relative; }
.journey-sec-pin {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.journey-header-static {
  position: absolute;
  top: 6vh;
  left: 0;
  width: 100%;
  max-width: 100%;
  padding: 0 4vw;
  text-align: center;
  z-index: 10;
}
.journey-title-main {
  font-family:inherit;
  font-size: clamp(2rem, 3.5vw, 4rem);
  font-weight: 800;
  text-transform: uppercase;
}
.journey-track-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  padding-top: 18vh;
}
.journey-track {
  display: flex;
  gap: 6vw;
  padding: 0 10vw;
  will-change: transform;
}
.journey-connector-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent);
  z-index: 0;
  pointer-events: none;
}
.journey-step {
  flex-shrink: 0;
  width: clamp(280px, 35vw, 450px);
  border: 1px solid var(--color-border);
  background: rgba(244, 240, 230, 0.5);
  padding: 3.5rem;
  border-radius: 4px;
  position: relative;
  transition: var(--transition-smooth);
  backdrop-filter: blur(8px);
}
.journey-step:hover,
.journey-step.active {
  background: rgba(223, 201, 128, 0.05);
  border-color: var(--color-gold);
}
.step-num {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  color: var(--color-gold);
  font-style: italic;
  line-height: 1;
  margin-bottom: 1.5rem;
  display: block;
}
.step-title {
  font-family:inherit;
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-beige);
  margin-bottom: 1rem;
}
.step-desc {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* ── Global Presence ────────────────────────────────────────── */
.presence-sec {
  background: var(--color-bg-secondary);
  padding-bottom: 8rem;
}
.presence-map-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 600px;
  position: relative;
  background: rgba(244, 240, 230, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}
.map-facility-tooltip {
  position: absolute;
  background: rgba(253, 252, 247, 0.98);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-gold);
  padding: 1rem;
  border-radius: 4px;
  pointer-events: none;
  display: none;
  font-size: 0.8rem;
  z-index: 10;
  max-width: 250px;
  box-shadow: 0 10px 30px rgba(28, 43, 33, 0.1);
}
.tooltip-title {
  font-family:inherit;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 0.25rem;
}
.tooltip-desc { color: var(--color-text-secondary); }

/* ── Trade Excellence (Stacked GSAP Cards) ────────────────────────── */
.trade-excellence-sec {
  background-color: #050505;
  color: #FFFFFF;
  position: relative;
}
.trade-pin-container {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.trade-section-header {
  padding: 12vh 2rem 2rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  z-index: 10;
}
.trade-main-title {
  font-family:inherit;
  font-size: clamp(2rem, 3.5vw, 4rem);
  font-weight: 800;
  text-transform: uppercase;
  color: #D4AF37;
  margin-bottom: 1rem;
}
.trade-subtitle {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.75);
  max-width: 800px;
  margin: 0 auto;
}
.trade-cards-stack {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem 2rem 2rem;
}
.trade-card {
  position: absolute;
  top: 0;
  left: 2rem;
  right: 2rem;
  bottom: 2rem;
  border-radius: 30px;
  overflow: hidden;
  will-change: transform, opacity;
  background: #0F172A;
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: translateY(100vh); /* Start off-screen */
}
/* Ensure the first card is visible immediately */
.trade-card:nth-child(1) { z-index: 1; transform: translateY(0); }
.trade-card:nth-child(2) { z-index: 2; }
.trade-card:nth-child(3) { z-index: 3; }
.trade-card:nth-child(4) { z-index: 4; }

.trade-card-inner {
  display: flex;
  height: 100%;
  width: 100%;
}
.trade-card-content {
  flex: 1;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.trade-card-number {
  font-family:inherit;
  font-size: clamp(4rem, 6vw, 6rem);
  font-weight: 800;
  color: #D4AF37;
  line-height: 1;
  margin-bottom: 1rem;
}
.trade-card-title {
  font-family:inherit;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #FFFFFF;
}
.trade-card-label {
  font-size: 1.2rem;
  color: #D4AF37;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 2rem;
  display: block;
}
.trade-card-desc {
  font-size: 1.2rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  max-width: 500px;
}
.trade-card-visual {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.trade-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  .trade-card-inner { flex-direction: column; }
  .trade-card-content { padding: 2rem; flex: none; }
  .trade-card-number { font-size: 3rem; margin-bottom: 0.5rem; }
  .trade-card-title { font-size: 1.8rem; }
  .trade-card-label { margin-bottom: 1rem; }
  .trade-card-visual { flex: 1; }
  .trade-section-header { padding-top: 15vh; }
  .trade-card { left: 1rem; right: 1rem; bottom: 1rem; border-radius: 20px; }
  .trade-cards-stack { padding: 0 1rem 1rem 1rem; }
}

/* ── Trust & Expertise ──────────────────────────────────────── */
.trust-sec {
  background: var(--color-bg);
  padding: 8rem 0;
}
.trust-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
}
.trust-editorial {
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 3rem;
}
.trust-editorial h2 {
  font-family:inherit;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-beige);
  margin-bottom: 1rem;
}
.trust-editorial p {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* ── Numbers That Matter ────────────────────────────────────── */
.numbers-sec {
  background: var(--color-bg-secondary);
  padding: 8rem 0;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}
.numbers-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
}
.number-item { text-align: center; }
.number-giant {
  font-family:inherit;
  font-size: clamp(3.5rem, 7vw, 7.5rem);
  font-weight: 800;
  color: var(--color-gold);
  line-height: 1;
  margin-bottom: 1rem;
  display: inline-block;
}
.number-label {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--color-beige-muted);
}

/* ── CTA / Contact ──────────────────────────────────────────── */
.cta-sec {
  background: radial-gradient(circle at bottom center, var(--color-forest) 0%, var(--color-bg) 70%);
  padding: 10rem 0 6rem 0;
}
.cta-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}
.cta-heading {
  font-family:inherit;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 3rem;
  text-align: center;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 700px;
  margin: 0 auto;
  background: rgba(253, 252, 247, 0.8);
  border: 1px solid var(--color-border);
  padding: 3rem;
  border-radius: 4px;
  backdrop-filter: blur(10px);
}
.form-input, .form-textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-beige);
  padding: 0.75rem 0;
   font-family:inherit;
  font-size: 1rem;
  outline: none;
  transition: var(--transition-fast);
  width: 100%;
}
.form-input:focus, .form-textarea:focus { border-bottom-color: var(--color-gold); }
.form-textarea { resize: none; height: 100px; }
.form-submit-btn {
   font-family:inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-gold);
  border: 1px solid var(--color-gold);
  padding: 1rem 2rem;
  cursor: pointer;
  transition: var(--transition-fast);
  border-radius: 2px;
  margin-top: 1rem;
  text-align: center;
}
.form-submit-btn:hover { background: transparent; color: var(--color-gold); }

/* ── Elementor Form Override (for Elementor Pro Forms) ─────── */
.elementor-widget-form .elementor-field-group input,
.elementor-widget-form .elementor-field-group textarea,
.elementor-widget-form .elementor-field-group select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-beige);
   font-family:inherit;
  transition: var(--transition-fast);
}
.elementor-widget-form .elementor-field-group input:focus,
.elementor-widget-form .elementor-field-group textarea:focus {
  border-bottom-color: var(--color-gold);
  box-shadow: none;
}
.elementor-widget-form .elementor-button {
  background: var(--color-gold) !important;
  border-color: var(--color-gold) !important;
  font-family: var(--font-sans) !important;
  letter-spacing: 0.2em !important;
  border-radius: 2px !important;
}
.elementor-widget-form .elementor-button:hover {
  background: transparent !important;
  color: var(--color-gold) !important;
}

/* ── Footer ─────────────────────────────────────────────────── */
.luxury-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-light);
  padding: 4rem 0;
}
.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.footer-logo {
  font-family:inherit;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  font-weight: 700;
  text-decoration: none;
}
.footer-nav {
  display: flex;
  gap: 2rem;
}
.footer-copy {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

/* ── Product Category Page ──────────────────────────────────── */
.product-landing { min-height: 100vh; padding-top: 8rem; }
.product-hero {
  max-width: 1400px;
  margin: 0 auto;
  padding: 4rem 2rem 6rem 2rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 6rem;
  align-items: center;
}
.prod-hero-left { display: flex; flex-direction: column; }
.prod-hero-tag {
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.prod-hero-title {
  font-family:inherit;
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 2rem;
  color: var(--color-beige);
}
.prod-hero-desc {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
  max-width: 600px;
}
.prod-hero-right {
  height: 500px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.prod-hero-img { width: 100%; height: 100%; object-fit: cover; }
.prod-story-sec {
  background: var(--color-bg-secondary);
  padding: 8rem 0;
  border-top: 1px solid var(--color-border-light);
}
.prod-story-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.story-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rem;
  align-items: center;
}
.story-row--reverse { direction: rtl; }
.story-row--reverse .story-col-text { direction: ltr; }
.story-col-img {
  height: 550px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.story-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.5s ease;
}
.story-row:hover .story-img { transform: scale(1.05); }
.story-col-text { padding: 2rem; }
.story-meta {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--color-gold);
  font-style: italic;
  margin-bottom: 1rem;
  display: block;
}
.story-title {
  font-family:inherit;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-beige);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}
.story-desc {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: 2rem;
}
.story-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  border-top: 1px solid var(--color-border-light);
  padding-top: 2rem;
}
.story-spec-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  display: block;
}
.story-spec-val { font-size: 0.95rem; color: var(--color-beige-muted); }
.back-to-home {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 2rem;
  display: flex;
  justify-content: flex-start;
}
.back-btn {
  text-decoration: none;
   font-family:inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-transform: uppercase;
  transition: var(--transition-fast);
}
.back-btn:hover { transform: translateX(-5px); }

/* ── Product Modal ──────────────────────────────────────────── */
.product-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-modal.open { opacity: 1; pointer-events: auto; }
.modal-backdrop {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(253, 252, 247, 0.95);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.modal-wrapper {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 950px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  animation: zoomIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.modal-img-container { height: 500px; border-right: 1px solid var(--color-border); }
.modal-img { width: 100%; height: 100%; object-fit: cover; }
.modal-info { padding: 3.5rem; display: flex; flex-direction: column; justify-content: space-between; }
.modal-close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  background: none;
  border: none;
  color: var(--color-gold);
  cursor: pointer;
  padding: 0.5rem;
  transition: var(--transition-fast);
}
.modal-close:hover { transform: rotate(90deg); }
.modal-header-top { margin-bottom: 2rem; }
.modal-cat {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  display: block;
}
.modal-title {
  font-family:inherit;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-beige);
}
.modal-desc {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 2rem;
}
.modal-specs {
  border-top: 1px solid var(--color-border-light);
  padding-top: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.spec-title {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.25rem;
}
.spec-val { font-family: var(--font-serif); font-size: 1rem; color: var(--color-beige); }
.modal-cta-btn {
  display: inline-block;
  text-decoration: none;
   font-family:inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-bg);
  background: var(--color-gold);
  border: 1px solid var(--color-gold);
  padding: 0.8rem 1.8rem;
  border-radius: 2px;
  text-align: center;
  text-transform: uppercase;
  transition: var(--transition-fast);
  margin-top: 2rem;
}
.modal-cta-btn:hover { background: transparent; color: var(--color-gold); }

/* ── Elementor Integration Overrides ────────────────────────── */
body.elementor-page .elementor-section,
body.elementor-page .e-con {
   font-family:inherit;
}
.elementor-heading-title {
  font-family:inherit;
}
/* Ensure Elementor full-width works */
.elementor-section.elementor-section-stretched {
  max-width: 100% !important;
}

/* ── Keyframes & Animations ─────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: 0.7; }
  50%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 0.7; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .menu-grid { grid-template-columns: 1fr; gap: 2rem; }
  .menu-col-left { border-right: none; padding-right: 0; }
  .menu-col-right { display: none; }
  .section-header { grid-template-columns: 1fr; padding: 6rem 2rem 3rem; }
  .origins-content { grid-template-columns: 1fr; gap: 4rem; }
  .origins-visual { height: 350px; }
  .split-layout { grid-template-columns: 1fr; gap: 3rem; }
  .eco-left { position: static; }
  .trust-grid { grid-template-columns: 1fr; }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .product-hero { grid-template-columns: 1fr; gap: 3rem; }
  .prod-hero-right { height: 350px; }
  .story-row { grid-template-columns: 1fr; gap: 3rem; }
  .story-row--reverse { direction: ltr; }
  .story-col-img { height: 380px; }
}

@media (max-width: 768px) {
  .nav-link-desktop { display: none; }
  .hero-stats { flex-direction: column; gap: 2rem; }
  .numbers-grid { grid-template-columns: 1fr; }
  .modal-wrapper { grid-template-columns: 1fr; }
  .modal-img-container { height: 250px; }
  .modal-info { padding: 2rem; }
  .footer-container { flex-direction: column; text-align: center; }
  .footer-nav { justify-content: center; }
}


/* --- EXTRA MOBILE RESPONSIVENESS OVERRIDES --- */
@media (max-width: 991px) {
  /* Fix the button overlapping the text in Trade Excellence on mobile */
  .tc-zone-mid {
      flex-direction: column !important;
      padding-bottom: 80px !important; /* Leave space for relative button */
  }
  .tc-btn-wrap {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      transform: none !important;
      margin-top: 20px !important;
      display: flex;
      justify-content: flex-start;
  }
}
@media (max-width: 768px) {
  /* 1. Hero Title */
  .hero-title {
      font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
      word-break: break-word; /* Prevent cutting off */
  }
  
  /* 2. Category Showcase */
  .showcase-title {
      font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
      word-break: break-word;
  }
  /* Make the image cards wider instead of thin slivers */
  .showcase-slide {
      min-width: 280px !important;
      width: 85vw !important;
  }
  
  /* 3. Capabilities / Sourcing Statements */
  .cap-statement {
      font-size: clamp(1.5rem, 5vw, 2.2rem) !important;
      padding: 0 15px !important;
      word-break: break-word;
  }
  
  /* 4. Journey / Quality Standards Title */
  .journey-title-main {
      font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
      word-break: break-word;
  }
  
  /* 5. Trade Excellence / Quality Assurance Main Title */
  .trade-main-title {
      font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
      word-break: break-word;
  }
}

/* --- TABLET & LAPTOP RESPONSIVENESS OVERRIDES --- */

/* Fix overlapping button and mid-zone alignment on Tablet/Laptop screens */
@media (max-width: 1199px) {
  .tc-zone-mid {
      flex-direction: column !important;
      padding-bottom: 80px !important; 
  }
  .tc-btn-wrap {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      transform: none !important;
      margin-top: 20px !important;
      display: flex;
      justify-content: flex-start;
  }
}

/* Fluid typography for Laptops and below to prevent text from ever cutting off */
@media (max-width: 1400px) {
  /* Hero Title */
  .hero-title {
      font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
      word-break: break-word;
  }
  
  /* Category Showcase */
  .showcase-title {
      font-size: clamp(1.8rem, 5vw, 3.5rem) !important;
      word-break: break-word;
  }
  
  /* Capabilities / Sourcing Statements */
  .cap-statement {
      font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
      padding: 0 5% !important;
      word-break: break-word;
  }
  
  /* Journey / Quality Standards Title */
  .journey-title-main {
      font-size: clamp(1.8rem, 5vw, 3.5rem) !important;
      word-break: break-word;
  }
  
  /* Trade Excellence / Quality Assurance Main Title */
  .trade-main-title {
      font-size: clamp(1.8rem, 5vw, 3.5rem) !important;
      word-break: break-word;
  }
}

/* Dynamic Image Card Sizing for Tablets & Laptops */
@media (max-width: 1199px) and (min-width: 769px) {
  .showcase-slide {
      min-width: 320px !important;
      width: 45vw !important; /* Shows ~2 cards at once on tablet */
  }
}

/* Ensure mobile cards remain full-width */
@media (max-width: 768px) {
  .showcase-slide {
      min-width: 280px !important;
      width: 85vw !important; /* Shows 1 card + peeking edge on mobile */
  }
}

/* --- ADDITIONAL MOBILE & TABLET REFINEMENTS --- */

@media (max-width: 1199px) {
  /* Fix button alignment so it matches the padding of the text above it */
  .tc-btn-wrap {
      padding-left: 2rem !important;
      padding-bottom: 2rem !important;
  }
}

@media (max-width: 768px) {
  /* 1. Move the golden globe up slightly and reduce main title size so stats aren't pushed down */
  .hero-canvas-container {
      transform: translateY(-10vh);
  }
  .hero-title {
      font-size: clamp(2rem, 9vw, 2.8rem) !important; /* Smaller than before to fit nicely */
      line-height: 1.1 !important;
  }
  
  /* 2. Increase the Category Showcase title because it was too small */
  .showcase-title {
      font-size: clamp(2.2rem, 8vw, 3rem) !important;
  }
  
  /* 3. Force category images to stay wide by preventing flex shrink */
  .showcase-slide {
      flex: 0 0 85vw !important;
      max-width: 85vw !important;
  }
  
  /* 4. Center align the Quality/Journey headings */
  .trade-main-title, .journey-title-main {
      text-align: center !important;
  }
  
  /* 5. Add left/right padding to the Contact Form section */
  .ms-premium-contact .ms-container,
  .ms-contact-grid {
      padding-left: 20px !important;
      padding-right: 20px !important;
      box-sizing: border-box !important;
  }
}

/* --- FINAL MOBILE CACHE BUST & OVERFLOW FIXES --- */

@media (max-width: 768px) {
  /* 1. Ensure Category Showcase Slides are unconditionally 85vw wide */
  body #commodity-showcase .showcase-slide,
  html body .showcase-slide {
      min-width: 85vw !important;
      width: 85vw !important;
      max-width: 85vw !important;
      flex: 0 0 85vw !important;
  }
  
  /* Ensure Category title is definitely larger */
  body #commodity-showcase .showcase-title,
  html body .showcase-title {
      font-size: clamp(2.2rem, 9vw, 3.5rem) !important;
  }

  /* 2. Fix Trade Excellence (Journey) Cards from cutting off at the bottom! */
  /* Because the card is pinned to 100vh height, we must shrink the inside contents so the images at the bottom don't overflow outside the screen */
  .tc-zone-top {
      padding: 1rem 1.5rem !important;
  }
  .tc-title {
      font-size: clamp(1.2rem, 5vw, 2rem) !important;
  }
  .tc-zone-mid {
      padding-bottom: 10px !important; /* Less space needed for button */
  }
  .tc-mid-left {
      padding: 1rem 1.5rem 0.5rem 1.5rem !important;
      border-bottom: none !important;
  }
  .tc-mid-right {
      padding: 0 1.5rem 1rem 1.5rem !important;
      display: none !important; /* Hide the second bullet on mobile to save vertical space! */
  }
  .tc-desc {
      font-size: 0.85rem !important;
      line-height: 1.4 !important;
      margin-bottom: 0 !important;
  }
  .tc-btn-wrap {
      padding-left: 1.5rem !important;
      padding-bottom: 1rem !important;
      margin-top: 10px !important;
  }
  .tc-zone-bottom {
      padding: 0.5rem 1.5rem 1.5rem 1.5rem !important;
      max-height: 35vh !important; /* Don't let images take over the screen */
      overflow: hidden !important;
  }
  .tc-app-window {
      height: 100% !important;
  }
  .tc-img-grid {
      height: 15vh !important; /* Force a small height so they fit on screen */
  }
}

/* --- EDITORIAL ARCHIVE MOBILE FIXES --- */
@media (max-width: 768px) {
  /* Give category heading 6vh font size */
  .archive-title {
    font-size: 6vh !important;
    line-height: 1 !important;
  }
  
  /* Fix category images being extremely thin slivers (overriding Tailwind w-[20vw] classes) */
  #archive-track > a {
    width: 80vw !important;
    min-width: 80vw !important;
    height: 55vh !important;
    margin-top: 20vh !important; /* Uniform margin so they don't jump off screen */
    margin-left: 0 !important;
  }
}

/* --- Adjust Archive Title Top Spacing for Mobile --- */
@media (max-width: 768px) {
  #archive-sticky-sec .top-\[12vh\] {
    top: 10vh !important;
  }
}

/* --- PRODUCTS PAGE MOBILE FIXES --- */
@media (max-width: 768px) {
  /* 1. Fix Search Container Overflowing */
  .ms-search-container {
      padding: 15px !important;
      box-sizing: border-box !important;
  }
  .ms-search-pill, 
  .ms-dropdown-pill,
  .ms-search-section,
  .ms-dropdown-section {
      width: 100% !important;
      max-width: 100% !important;
      margin: 5px 0 !important;
      box-sizing: border-box !important;
  }
  .ms-search-input {
      width: 100% !important;
      box-sizing: border-box !important;
  }

  /* 2. Make Category Filter show exactly 2 items per row instead of cutting off */
  .ms-category-bar-wrapper {
      border-radius: 20px !important;
      padding: 15px !important;
      height: auto !important;
      overflow: visible !important;
  }
  .ms-category-bar {
      display: flex !important;
      flex-wrap: wrap !important;
      width: 100% !important;
      gap: 10px !important;
      justify-content: space-between !important;
      padding-inline: 0 !important;
  }
  .ms-category-bar .ms-cat-btn,
  .ms-category-bar .ms-pill {
      flex: 0 0 calc(50% - 5px) !important;
      max-width: calc(50% - 5px) !important;
      box-sizing: border-box !important;
      padding: 10px 5px !important;
      font-size: 0.85rem !important;
      text-align: center !important;
      white-space: normal !important;
      margin: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
  }
}

/* --- REVERT & REFINE PRODUCTS PAGE FIXES --- */
@media (max-width: 768px) {
  /* 1. Fix the huge right gap by forcing 100% width */
  .ms-search-container {
      width: 100% !important;
      display: flex !important;
  }
  
  /* 2. Revert Categories back to one scrollable row, but prevent "cutting" appearance */
  .ms-category-bar-wrapper {
      border-radius: 9999px !important; /* Back to original pill shape */
      padding: 8px !important;
      width: 100% !important;
      overflow: hidden !important;
  }
  .ms-category-bar {
      flex-wrap: nowrap !important; /* Back to one row */
      overflow-x: auto !important;
      justify-content: flex-start !important;
      scroll-snap-type: x mandatory !important;
      -webkit-overflow-scrolling: touch !important;
      gap: 10px !important;
  }
  .ms-category-bar::-webkit-scrollbar {
      display: none !important;
  }
  .ms-category-bar .ms-cat-btn,
  .ms-category-bar .ms-pill {
      /* Make each pill exactly half the screen width minus gap so exactly 2 fit perfectly, hiding the 3rd until swiped */
      flex: 0 0 calc(50% - 5px) !important;
      max-width: none !important;
      scroll-snap-align: start !important;
      white-space: nowrap !important;
      border-radius: 999px !important;
  }
}

/* --- COMPREHENSIVE PRODUCTS PAGE FIXES --- */
@media (max-width: 768px) {
  /* SEARCH BAR FIXES */
  .ms-search-container {
      width: 100% !important;
      padding: 15px !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
  }
  .ms-search-pill, 
  .ms-dropdown-pill,
  .ms-search-section,
  .ms-dropdown-section {
      width: 100% !important;
      max-width: 100% !important;
      margin: 5px 0 !important;
      box-sizing: border-box !important;
  }
  .ms-search-input {
      width: 100% !important;
      box-sizing: border-box !important;
  }

  /* CATEGORY BAR FIXES (ONE ROW, NO WEIRD CUTTING) */
  .ms-category-bar-wrapper {
      border-radius: 9999px !important;
      padding: 8px !important;
      width: 100% !important;
      box-sizing: border-box !important;
  }
  .ms-category-bar {
      display: flex !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      justify-content: flex-start !important;
      scroll-snap-type: x mandatory !important;
      -webkit-overflow-scrolling: touch !important;
      gap: 10px !important;
      padding: 5px !important;
      margin: 0 !important;
      box-sizing: border-box !important;
  }
  .ms-category-bar::-webkit-scrollbar {
      display: none !important;
  }
  .ms-category-bar .ms-cat-btn,
  .ms-category-bar .ms-pill {
      /* Force width to a clean fraction so exactly 2 buttons fit on screen */
      width: calc(50% - 5px) !important;
      flex: 0 0 calc(50% - 5px) !important;
      max-width: calc(50% - 5px) !important;
      box-sizing: border-box !important;
      scroll-snap-align: start !important;
      white-space: nowrap !important;
      border-radius: 9999px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 10px !important;
      height: 48px !important; 
      margin: 0 !important;
  }
}

/* --- FINAL RESPONSIVE PRODUCTS PAGE --- */

/* 1. LAPTOP FIXES (769px to 1024px) - Prevent Search Bar Stacking */
@media (min-width: 769px) and (max-width: 1024px) {
    .ms-intro-row {
        flex-direction: row !important;
        align-items: center !important;
    }
    .ms-intro-right {
        width: auto !important;
        flex: 1 !important;
        justify-content: flex-end !important;
        margin-top: 0 !important;
    }
    .ms-search-container {
        flex-direction: row !important;
        height: 76px !important;
        border-radius: 999px !important;
        padding: 12px 18px !important;
        width: max-content !important;
    }
    .ms-search-section, .ms-dropdown-section {
        padding: 0 !important;
    }
}

/* 2. MOBILE FIXES (up to 768px) */
@media (max-width: 768px) {
  /* SEARCH BAR FIXES */
  .ms-search-container {
      width: 100% !important;
      padding: 15px !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
  }
  .ms-search-pill, 
  .ms-dropdown-pill,
  .ms-search-section,
  .ms-dropdown-section {
      width: 100% !important;
      max-width: 100% !important;
      margin: 5px 0 !important;
      box-sizing: border-box !important;
  }
  .ms-search-input {
      width: 100% !important;
      box-sizing: border-box !important;
  }

  /* CATEGORY BAR FIXES (ONE ROW, NO WEIRD CUTTING) */
  .ms-category-bar-wrapper {
      border-radius: 9999px !important;
      padding: 8px !important;
      width: 100% !important;
      box-sizing: border-box !important;
  }
  .ms-category-bar {
      width: 100% !important; /* CRITICAL FIX: prevents stretching bug */
      display: flex !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      justify-content: flex-start !important;
      scroll-snap-type: x mandatory !important;
      -webkit-overflow-scrolling: touch !important;
      gap: 10px !important;
      padding: 5px !important;
      margin: 0 !important;
      box-sizing: border-box !important;
  }
  .ms-category-bar::-webkit-scrollbar {
      display: none !important;
  }
  .ms-category-bar .ms-cat-btn,
  .ms-category-bar .ms-pill {
      /* Clean 45% width ensures exactly 2 fit nicely, 3rd snaps perfectly */
      width: 45% !important;
      min-width: 45% !important;
      flex: 0 0 45% !important;
      max-width: 45% !important;
      box-sizing: border-box !important;
      scroll-snap-align: start !important;
      white-space: nowrap !important;
      border-radius: 9999px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 10px !important;
      height: 48px !important; 
      margin: 0 !important;
      text-align: center !important;
  }
}

/* --- FINAL RESPONSIVE PRODUCTS PAGE --- */

/* 1. LAPTOP FIXES (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Let the title and search bar stack vertically to use full width */
    .ms-intro-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .ms-intro-right {
        width: 100% !important;
        justify-content: flex-start !important;
        margin-top: 20px !important;
    }
    /* Keep the search inputs side-by-side and fill the width */
    .ms-search-container {
        flex-direction: row !important;
        height: 76px !important;
        border-radius: 999px !important;
        padding: 12px 18px !important;
        width: 100% !important;
        display: flex !important;
        gap: 15px !important;
        box-sizing: border-box !important;
    }
    .ms-search-section, .ms-dropdown-section {
        padding: 0 !important;
        margin: 0 !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
    }
    .ms-search-pill {
        flex: 1 !important;
        width: auto !important;
        max-width: none !important;
    }
    .ms-search-container > .ms-dropdown-pill:nth-child(2) {
        width: 250px !important;
        flex: 0 0 250px !important;
    }
}

/* 2. MOBILE FIXES (up to 768px) */
@media (max-width: 768px) {
  /* SEARCH BAR FIXES */
  .ms-search-container {
      width: 100% !important;
      padding: 15px !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
  }
  .ms-search-pill, 
  .ms-dropdown-pill,
  .ms-search-section,
  .ms-dropdown-section {
      width: 100% !important;
      max-width: 100% !important;
      margin: 5px 0 !important;
      box-sizing: border-box !important;
  }
  .ms-search-input {
      width: 100% !important;
      box-sizing: border-box !important;
  }

  /* CATEGORY BAR FIXES (ONE ROW, NO WEIRD CUTTING) */
  .ms-category-bar-wrapper {
      border-radius: 9999px !important;
      padding: 8px !important;
      width: 100% !important;
      box-sizing: border-box !important;
  }
  .ms-category-bar {
      width: 100% !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      justify-content: flex-start !important;
      scroll-snap-type: x mandatory !important;
      -webkit-overflow-scrolling: touch !important;
      gap: 10px !important;
      padding: 5px !important;
      margin: 0 !important;
      box-sizing: border-box !important;
      /* Force hide scrollbar on all browsers */
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
  }
  .ms-category-bar::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
      background: transparent !important;
  }
  .ms-category-bar .ms-cat-btn,
  .ms-category-bar .ms-pill {
      width: 45% !important;
      min-width: 45% !important;
      flex: 0 0 45% !important;
      max-width: 45% !important;
      box-sizing: border-box !important;
      scroll-snap-align: start !important;
      white-space: nowrap !important;
      border-radius: 9999px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 10px !important;
      height: 48px !important; 
      margin: 0 !important;
      text-align: center !important;
  }
}

/* --- FINAL RESPONSIVE PRODUCTS PAGE --- */

/* 1. LAPTOP FIXES (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Let the title and search bar stack vertically to use full width */
    .ms-intro-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .ms-intro-right {
        width: 100% !important;
        justify-content: flex-start !important;
        margin-top: 20px !important;
    }
    /* Keep the search inputs side-by-side and fill the width */
    .ms-search-container {
        flex-direction: row !important;
        height: 76px !important;
        border-radius: 999px !important;
        padding: 12px 18px !important;
        width: 100% !important;
        display: flex !important;
        gap: 15px !important;
        box-sizing: border-box !important;
    }
    .ms-search-section, .ms-dropdown-section {
        padding: 0 20px !important; /* CRITICAL FIX: Restored padding inside pills */
        margin: 0 !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
    }
    .ms-search-pill {
        flex: 1 !important;
        width: auto !important;
        max-width: none !important;
    }
    .ms-search-container > .ms-dropdown-pill:nth-child(2) {
        width: 250px !important;
        flex: 0 0 250px !important;
    }
}

/* 2. MOBILE FIXES (up to 768px) */
@media (max-width: 768px) {
  /* SEARCH BAR FIXES */
  .ms-search-container {
      width: 100% !important;
      padding: 15px !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
  }
  .ms-search-pill, 
  .ms-dropdown-pill,
  .ms-search-section,
  .ms-dropdown-section {
      width: 100% !important;
      max-width: 100% !important;
      margin: 5px 0 !important;
      box-sizing: border-box !important;
  }
  .ms-search-input {
      width: 100% !important;
      box-sizing: border-box !important;
  }

  /* CATEGORY BAR FIXES (ONE ROW, NO WEIRD CUTTING) */
  .ms-category-bar-wrapper {
      border-radius: 9999px !important;
      padding: 8px !important;
      width: 100% !important;
      box-sizing: border-box !important;
  }
  .ms-category-bar {
      width: 100% !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      justify-content: flex-start !important;
      scroll-snap-type: x mandatory !important;
      -webkit-overflow-scrolling: touch !important;
      gap: 10px !important;
      padding: 5px !important;
      margin: 0 !important;
      box-sizing: border-box !important;
      /* Force hide scrollbar on all browsers */
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
  }
  .ms-category-bar::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
      background: transparent !important;
  }
  .ms-category-bar .ms-cat-btn,
  .ms-category-bar .ms-pill {
      width: 45% !important;
      min-width: 45% !important;
      flex: 0 0 45% !important;
      max-width: 45% !important;
      box-sizing: border-box !important;
      scroll-snap-align: start !important;
      white-space: nowrap !important;
      border-radius: 9999px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 10px !important;
      height: 48px !important; 
      margin: 0 !important;
      text-align: center !important;
  }
}