:root {
  --alrafi-ink: #1F1B18;
  --alrafi-brown: #4C3328;
  --alrafi-clay: #9A6049;
  --alrafi-sand: #D8C6AD;
  --alrafi-ivory: #F4EFE6;
  --alrafi-stone: #B5AA9C;
  --alrafi-white: #FBF9F5;
}

body {
  background-color: var(--alrafi-white);
  color: var(--alrafi-ink);
  font-family: 'Manrope', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.bg-grain {
  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)' opacity='0.03'/%3E%3C/svg%3E");
}

::selection {
  background: var(--alrafi-clay);
  color: var(--alrafi-ivory);
}

html { scroll-behavior: smooth; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--alrafi-ivory); }
::-webkit-scrollbar-thumb { background: var(--alrafi-stone); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--alrafi-clay); }

.gsap-reveal {
  opacity: 0;
  transform: translateY(24px);
}

@media (prefers-reduced-motion: reduce) {
  .gsap-reveal, .hero-title, .hero-label, .hero-desc, .hero-cta, .hero-link {
    opacity: 1 !important;
    transform: none !important;
  }
}

header.nav-transparent #navLogo { color: var(--alrafi-white); }
header.nav-transparent #navLogo:hover { color: var(--alrafi-sand); }
header.nav-transparent .brand-logo { filter: brightness(0) invert(1); }
header.nav-transparent nav a { color: rgba(251, 249, 245, 0.9); }
header.nav-transparent nav a:hover { color: var(--alrafi-white); }
header.nav-transparent nav a::after { background-color: var(--alrafi-sand); }
header.nav-transparent #navCta { border-color: rgba(251, 249, 245, 0.4); color: var(--alrafi-white); }
header.nav-transparent #navCta:hover { background-color: var(--alrafi-white); color: var(--alrafi-ink); }
header.nav-transparent #menuToggleBtn { color: var(--alrafi-white); }

header.nav-scrolled #navLogo { color: var(--alrafi-ink); }
header.nav-scrolled #navLogo:hover { color: var(--alrafi-clay); }
header.nav-scrolled nav a { color: rgba(31, 27, 24, 0.8); }
header.nav-scrolled nav a:hover { color: var(--alrafi-clay); }
header.nav-scrolled nav a::after { background-color: var(--alrafi-clay); }
header.nav-scrolled #navCta { border-color: rgba(31, 27, 24, 0.3); color: var(--alrafi-ink); }
header.nav-scrolled #navCta:hover { background-color: var(--alrafi-ink); color: var(--alrafi-ivory); }
header.nav-scrolled #menuToggleBtn { color: var(--alrafi-ink); }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.brand-mark {
  border-radius: 10px;
  flex-shrink: 0;
}

.product-frame {
  background: var(--alrafi-ivory);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.product-thumb {
  border: 1px solid transparent;
  padding: 0;
  cursor: pointer;
}

.product-thumb.is-active {
  border-color: var(--alrafi-clay);
}

.brand-logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

.brand-logo--dark,
.brand-logo--on-dark {
  height: 72px;
  max-width: 200px;
}

.brand-logo--on-dark {
  filter: brightness(0) invert(1);
}

@media (min-width: 768px) {
  .brand-logo {
    height: 64px;
    max-width: 180px;
  }
}