:root {
  --noble-ivory: #fbf4e8;
  --noble-cream: #f1e2cb;
  --noble-sand: #dfc49d;
  --noble-ink: #141414;
  --noble-soft-black: #181818;
  --noble-green: #082f27;
  --noble-gold: #a77a3c;
}

html,
body {
  background-color: var(--noble-ivory) !important;
}

body {
  color: var(--noble-ink) !important;
  background:
    radial-gradient(circle at 10% 8%, rgba(167,122,60,.22), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(8,47,39,.10), transparent 30%),
    linear-gradient(135deg, #fff8ec 0%, #f1e2cb 46%, #dfc49d 100%) !important;
}

body,
p,
li,
a,
button,
select,
input,
textarea,
.nav a,
.menu-btn,
.lang-select,
.btn,
.eyebrow,
.section-kicker,
[class*="kicker"],
[class*="eyebrow"] {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Segoe UI", sans-serif !important;
}

h1,
h2,
h3,
h4,
.brand {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Segoe UI", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.042em !important;
}

.site-header,
header.site-header {
  background: rgba(255, 248, 236, .97) !important;
  border-bottom: 1px solid rgba(20,20,20,.10) !important;
  backdrop-filter: blur(18px) !important;
}

.site-header .brand,
header.site-header .brand {
  color: var(--noble-ink) !important;
  font-weight: 600 !important;
  letter-spacing: .055em !important;
}

.nav a,
.menu-btn,
.lang-select {
  color: var(--noble-ink) !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
}

.eyebrow,
.section-kicker,
[class*="kicker"],
[class*="eyebrow"] {
  color: var(--noble-gold) !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
}

main {
  background:
    linear-gradient(180deg, rgba(255,248,236,.38), rgba(241,226,203,.30), rgba(255,248,236,.34)) !important;
}

.intro,
.founder-section,
.noble-luxury-collections,
.noble-vip-tour-section,
.experience-section,
.process-section,
.faq-section,
.certificates-section,
.africa-mission-section,
.zimmi {
  background:
    radial-gradient(circle at 12% 10%, rgba(167,122,60,.14), transparent 28%),
    linear-gradient(135deg, rgba(255,248,236,.92), rgba(241,226,203,.82)) !important;
}

.cards {
  background:
    linear-gradient(135deg, rgba(24,24,24,.96), rgba(34,33,31,.94)) !important;
  color: #fff8ec !important;
}

.cards h1,
.cards h2,
.cards h3,
.cards p,
.cards li {
  color: #fff8ec !important;
}

.card,
.founder-copy-text,
.experience-grid article,
.process-grid article,
.faq-item,
.noble-collection-card,
.product-card,
.catalogue-card {
  background: rgba(255, 250, 242, .84) !important;
  border-color: rgba(167,122,60,.28) !important;
  box-shadow: 0 20px 54px rgba(20,20,20,.075) !important;
}

.noble-bespoke-section {
  background:
    radial-gradient(circle at 72% 18%, rgba(167,122,60,.24), transparent 32%),
    linear-gradient(135deg, #181818 0%, #252421 55%, #111111 100%) !important;
}

.noble-bespoke-section,
.noble-bespoke-section h1,
.noble-bespoke-section h2,
.noble-bespoke-section h3,
.noble-bespoke-section p,
.noble-bespoke-section li {
  color: #fff8ec !important;
}

footer,
#contact,
.contact-section {
  background:
    radial-gradient(circle at 78% 10%, rgba(167,122,60,.16), transparent 30%),
    linear-gradient(135deg, #181818 0%, #232220 58%, #111111 100%) !important;
  color: #fff8ec !important;
}

footer h1,
footer h2,
footer h3,
#contact h1,
#contact h2,
#contact h3,
.contact-section h1,
.contact-section h2,
.contact-section h3 {
  color: #fff8ec !important;
}

footer p,
footer a,
#contact p,
#contact a,
.contact-section p,
.contact-section a {
  color: rgba(255,248,236,.76) !important;
}

.btn.primary,
.noble-vip-tour-actions a:first-child,
.noble-bespoke-actions a:first-child {
  background: var(--noble-soft-black) !important;
  color: #fff8ec !important;
  border-color: rgba(24,24,24,.9) !important;
}

.btn.secondary,
.noble-vip-tour-actions a:last-child,
.noble-bespoke-actions a:last-child {
  background: rgba(255,248,236,.62) !important;
  color: var(--noble-ink) !important;
  border-color: rgba(167,122,60,.42) !important;
}

.hero#home h1,
.hero#home .hero-text,
.hero#home .btn,
.hero#home::before {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Segoe UI", sans-serif !important;
}

.hero#home h1 {
  font-weight: 300 !important;
  letter-spacing: -0.055em !important;
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 10% 5%, rgba(167,122,60,.18), transparent 32%),
      linear-gradient(135deg, #fff8ec 0%, #f1e2cb 54%, #dfc49d 100%) !important;
  }

  .cards {
    background:
      linear-gradient(135deg, rgba(24,24,24,.96), rgba(34,33,31,.94)) !important;
  }
}