/* ============================================================
   SOUK GOLD BULLION — Global Stylesheet
   Design: Luxury Dark + Gold Accent (pamp.com inspired)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Tokens ── */
:root {
  /* Brand gold (kept — appears in the logo & gold-bullion product) */
  --gold:        #C9A84C;
  --gold-light:  #DDBE63;
  --gold-dark:   #8E6D26;

  /* NEW: navy blue from the logo — used for minor headers / eyebrows */
  --blue:        #1F4E79;
  --blue-dark:   #173963;
  --blue-light:  #2E6BA8;

  /* Light theme surfaces — soft warm sage/parchment, brightened */
  --bg:          #EAEBDC;
  --bg-2:        #DFE0CE;
  --bg-card:     #F4F5E8;
  --surface:     #ECEDDE;

  /* Borders — neutral on light theme so they don't look orange */
  --border:      rgba(10,9,5,0.12);
  --border-2:    rgba(10,9,5,0.06);

  /* Text — black headings, near-black body, dark utility (darkened for readability) */
  --text:        #0A0905;
  --text-muted:  #1E1B14;
  --text-dim:    #3A3527;

  --green:       #2A7F5C;
  --red:         #B83A3A;
  --nav-h:       72px;

  --ease-gold: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-size: 16px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }

/* ── Typography ── */
h1, h2, h3, h4, h5 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.15rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; font-weight: 500; }

.gold { color: var(--gold); }
.label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}

/* ── Layout ── */
.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; }
section { padding: 100px 0; }

/* ── Gold Rule ── */
.gold-rule {
  width: 48px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 16px auto;
}
.gold-rule.left { margin-left: 0; }

/* ============================================================
   NAVIGATION
   ============================================================ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  transition: background 0.4s var(--ease-gold), box-shadow 0.4s;
}
#navbar.scrolled {
  background: rgba(64, 40, 18, 0.32);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 rgba(10,9,5,0.10);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}
.nav-logo {
  display: flex; align-items: center;
}
.nav-logo img {
  height: 48px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex; align-items: center; gap: 36px;
}
.nav-links a {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0A0905;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
  transition: color 0.25s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s var(--ease-gold);
}
.nav-links a:hover,
.nav-links a.active { color: var(--gold-dark); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

.nav-cta {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 22px;
  border: 1px solid var(--gold-dark);
  color: #0A0905;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.45);
  transition: background 0.25s, color 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-cta-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.nav-cta:hover { background: var(--gold-dark); color: #FFFFFF; text-shadow: none; border-color: var(--gold-dark); }

/* Mobile menu */
.nav-hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  padding: 8px;
}
.nav-hamburger span {
  display: block; width: 24px; height: 2px;
  background: #0A0905;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(16px);
  padding: 24px;
  border-top: 1px solid var(--border);
  z-index: 999;
  flex-direction: column; gap: 0;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 0;
  border-bottom: 1px solid var(--border-2);
  transition: color 0.25s;
}
.nav-mobile a:hover { color: var(--gold); }

/* ── Gold Ticker Bar ── */
/* page offset for fixed nav only (ticker removed) */
.page-offset { padding-top: var(--nav-h); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  color: var(--bg);
  border: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-gold::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.12);
  opacity: 0;
  transition: opacity 0.25s;
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(201,168,76,0.28); }
.btn-gold:hover::after { opacity: 1; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 13px 31px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  transition: background 0.25s, color 0.25s;
}
.btn-outline:hover { background: rgba(201,168,76,0.08); }

/* ============================================================
   HERO — Full viewport gold bars image
   ============================================================ */

/* Fixed translucent navbar — light cream glass for readable dark text */
#navbar,
#navbar.scrolled {
  background: rgba(244, 245, 232, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 rgba(10,9,5,0.10);
  border-bottom: 1px solid rgba(10,9,5,0.08);
}

#hero {
  position: relative;
  height: 100dvh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Wrapper that holds hero + rates over a shared video */
.hero-rates-wrap {
  position: relative;
  isolation: isolate;
}

/* Background video — spans hero AND rates section */
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
}

/* Soft sage-cream veil over the hero — keeps the warm fire video
   visible as a textured background while the page palette stays light */
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(234,235,220,0.18) 0%,
    rgba(234,235,220,0.32) 55%,
    rgba(234,235,220,0.55) 100%);
  z-index: 1;
}

/* Removed extra hero bottom fade — rates section gradient picks up the same opacity for seamless flow */
.hero-fade-bottom { display: none; }

/* Centered text content */
.hero-inner {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 24px;
  max-width: 860px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.hero-eyebrow-line {
  width: 40px; height: 1px;
  background: var(--blue);
  flex-shrink: 0;
}

.hero-title {
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 0.95;
  margin-bottom: 8px;
  text-shadow: 0 2px 24px rgba(255,255,255,0.55);
}
.hero-title-sub {
  display: block;
  font-size: clamp(1.4rem, 3.5vw, 2.8rem);
  font-weight: 400;
  letter-spacing: 0.36em;
  color: var(--blue-dark);
  text-shadow: 0 1px 14px rgba(255,255,255,0.55);
  margin-top: 6px;
}

.hero-subtitle {
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
  margin: 28px auto 40px;
  max-width: 640px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 8px rgba(255,255,255,0.6);
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-cta { min-width: 160px; justify-content: center; }

/* Scroll hint */
.hero-scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.55);
}
.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(201,168,76,0.55), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50%       { opacity: 0.4; transform: scaleY(0.6); }
}

/* Hero price card */
.hero-price-widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 32px;
  position: relative;
}
.hero-price-widget::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.hw-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hw-live {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}
.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}
.hw-main-price {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 3rem;
  font-weight: 600;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 4px;
}
.hw-main-unit {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  margin-bottom: 20px;
}
.hw-divider {
  height: 1px;
  background: var(--border-2);
  margin: 20px 0;
}
.hw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.hw-cell {
  padding: 14px 16px;
  background: rgba(201,168,76,0.04);
  border: 1px solid var(--border-2);
}
.hw-cell-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.hw-cell-value {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hw-cell-value.buy { color: var(--green); }
.hw-cell-value.sell { color: var(--red); }
.hw-updated {
  margin-top: 16px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.62rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

/* ============================================================
   LIVE PRICE TICKER (HOME SECTION)
   ============================================================ */
#live-prices {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 72px 0;
}
.lp-header {
  text-align: center;
  margin-bottom: 48px;
}
.price-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2px;
  background: var(--border);
}
.price-card {
  background: var(--bg-card);
  padding: 32px 28px;
  position: relative;
  transition: background 0.25s;
}
.price-card:hover { background: var(--surface); }
.pc-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.pc-purity {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0.1em;
}
.pc-unit-tag {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border-2);
  padding: 3px 8px;
}
.pc-spot {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 6px;
}
.pc-spot-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 20px;
}
.pc-rates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pc-rate {
  padding: 12px 14px;
  border: 1px solid var(--border-2);
  background: rgba(255,255,255,0.015);
}
.pc-rate-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pc-rate-label.we-buy { color: var(--green); }
.pc-rate-label.we-sell { color: var(--red); }
.pc-rate-val {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pc-rate-val.buy { color: var(--green); }
.pc-rate-val.sell { color: var(--red); }
.pc-rate-sub {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.6rem;
  color: var(--text-dim);
  margin-top: 2px;
}
.pc-change {
  display: flex; align-items: center; gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-2);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.pc-change.up { color: var(--green); }
.pc-change.down { color: var(--red); }

/* ============================================================
   ABOUT / COMPANY PROFILE
   ============================================================ */
#about {
  position: relative;
  overflow: hidden;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about-visual {
  position: relative;
}
.about-img-wrap {
  position: relative;
  aspect-ratio: 4/5;
  background: #FAFAF3;            /* near-white, very gentle warmth */
  border: 1px solid var(--border);
  overflow: hidden;
}
.about-img-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 30% 30%, rgba(201,168,76,0.12) 0%, transparent 60%);
}
.about-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 6rem;
  font-weight: 300;
  color: rgba(201,168,76,0.15);
  letter-spacing: 0.1em;
}

/* Company logo inside the about visual frame */
.about-logo {
  position: relative;
  z-index: 1;                         /* sit above the gold radial glow */
  width: 70%;
  max-width: 360px;
  height: auto;
  margin: auto;
  display: block;
  /* Center inside the frame */
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 24px rgba(201,168,76,0.18));
}
@media (max-width: 768px) {
  .about-logo { width: 60%; max-width: 260px; }
}

/* SSM Certificate of Incorporation inside the about visual frame */
.about-ssm {
  position: absolute;
  inset: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  object-fit: contain;
  z-index: 1;
  filter: drop-shadow(0 8px 24px rgba(10,9,5,0.18));
  border-radius: var(--radius-sm);
}
@media (max-width: 768px) {
  .about-ssm { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
}
.about-accent-box {
  position: absolute;
  bottom: -20px; right: -20px;
  width: 180px; height: 180px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 3;                     /* sit ABOVE the certificate frame */
  box-shadow: 0 10px 30px rgba(10,9,5,0.15);
}
.about-accent-num {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 3rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}
.about-accent-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
.about-text .label { margin-bottom: 12px; }
.about-text h2 { margin-bottom: 24px; }
.about-text p {
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.75;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
  margin-top: 40px;
}
.stat-block {
  background: var(--bg-card);
  padding: 20px 16px;
  text-align: center;
}
.stat-num {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}
.stat-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 4px;
}

/* ============================================================
   PRODUCTS PAGE
   ============================================================ */
.products-hero {
  padding: 80px 0 60px;
  text-align: center;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.products-hero .label { margin-bottom: 12px; }
.products-hero h1 { margin-bottom: 16px; }
.products-hero p {
  color: var(--text);
  font-weight: 500;
  max-width: 580px;
  margin: 0 auto;
}

/* Market rate banner */
.market-banner {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.market-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.mb-item {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}
.mb-label {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mb-val {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}
.mb-divider {
  width: 1px; height: 24px;
  background: var(--border);
}

/* Product section */
.product-section { padding: 80px 0; }
.product-section:nth-child(even) { background: var(--bg-2); }

.product-header {
  margin-bottom: 48px;
}
.product-title-row {
  display: flex; align-items: flex-end; gap: 20px;
  flex-wrap: wrap;
}
.product-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: rgba(201,168,76,0.05);
  margin-bottom: 8px;
}
.product-desc {
  color: var(--text-muted);
  max-width: 600px;
  margin-top: 12px;
  line-height: 1.7;
}

/* Pricing table */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--border);
  max-width: 900px;
}
.pricing-panel {
  background: var(--bg-card);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
}
.pricing-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.pricing-panel.we-buy::before   { background: linear-gradient(90deg, transparent, var(--green), transparent); }
.pricing-panel.we-sell::before  { background: linear-gradient(90deg, transparent, var(--red), transparent); }

.pp-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.pp-label.buy  { color: var(--green); }
.pp-label.sell { color: var(--red); }
.pp-label-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.buy .pp-label-dot  { background: var(--green); }
.sell .pp-label-dot { background: var(--red); }

.pp-price {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 2.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 6px;
}
.pricing-panel.we-buy .pp-price  { color: var(--green); }
.pricing-panel.we-sell .pp-price { color: var(--red); }

.pp-unit {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 24px;
}
.pp-detail {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.6;
  border-top: 1px solid var(--border-2);
  padding-top: 16px;
}
.pp-detail strong { color: var(--text); font-weight: 600; }
.pp-markup {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 0;
  margin-top: 8px;
}
.pp-markup.up   { background: rgba(76,175,130,0.1);  color: var(--green); border: 1px solid rgba(76,175,130,0.2); }
.pp-markup.down { background: rgba(224,92,92,0.1);   color: var(--red);   border: 1px solid rgba(224,92,92,0.2); }

/* ============================================================
   CLIENTS / PORTFOLIO
   ============================================================ */
#clients {
  background: var(--bg-2);
}
.clients-header {
  text-align: center;
  margin-bottom: 60px;
}
.client-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2px;
  background: var(--border);
  margin-bottom: 60px;
}
.client-cat {
  background: var(--bg-card);
  padding: 32px 28px;
}
.cc-icon {
  width: 40px; height: 40px;
  margin-bottom: 16px;
  color: var(--gold);
}
.cc-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 8px;
}
.cc-desc {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.65;
}
.client-logos-label {
  text-align: center;
  margin-bottom: 32px;
}
.client-logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 2px;
  background: var(--border);
}
.client-logo-card {
  background: var(--bg-card);
  padding: 28px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  transition: background 0.25s;
}
.client-logo-card:hover { background: var(--surface); }
.client-logo-card span {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-align: center;
  transition: color 0.25s;
  text-transform: uppercase;
}
.client-logo-card:hover span { color: var(--gold); }

/* testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2px;
  background: var(--border);
  margin-top: 60px;
}
.testimonial-card {
  background: var(--bg-card);
  padding: 32px 28px;
}
.tc-quote {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--text);
  font-weight: 500;
  line-height: 1.7;
  margin-bottom: 20px;
  position: relative;
  padding-top: 16px;
}
.tc-quote::before {
  content: '\201C';
  position: absolute;
  top: -8px; left: -4px;
  font-size: 3rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.5;
}
.tc-author {
  display: flex; align-items: center; gap: 12px;
}
.tc-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bg);
  flex-shrink: 0;
}
.tc-name {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.06em;
}
.tc-role {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
}

/* ============================================================
   WHY SOUK — FEATURES
   ============================================================ */
#why {
  text-align: center;
}
.why-header { margin-bottom: 60px; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2px;
  background: var(--border);
}
.why-card {
  background: var(--bg-card);
  padding: 36px 28px;
  text-align: left;
  transition: background 0.25s;
}
.why-card:hover { background: var(--surface); }
.why-icon {
  width: 44px; height: 44px;
  margin-bottom: 20px;
  color: var(--gold);
}
.why-card h4 {
  margin-bottom: 10px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.why-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 80px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse at center, rgba(201,168,76,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.cta-band h2 { margin-bottom: 16px; }
.cta-band p {
  color: var(--text-muted);
  margin-bottom: 32px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background-color: var(--bg);
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
  position: relative;
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/footer-pattern.jpg');
  background-size: 480px auto;
  background-repeat: repeat;
  opacity: 0.18;
  mix-blend-mode: multiply;   /* darkens — pattern is visible on white */
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 100%);
}
footer > * { position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand p {
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.7;
  margin: 16px 0 20px;
  max-width: 280px;
}
.footer-col-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 20px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a {
  font-size: 0.86rem;
  color: var(--text);
  font-weight: 500;
  transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--gold-dark); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p {
  font-size: 0.74rem;
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.footer-legal {
  display: flex; gap: 20px;
}
.footer-legal a {
  font-size: 0.74rem;
  color: var(--text);
  font-weight: 500;
  transition: color 0.2s;
}
.footer-legal a:hover { color: var(--gold-dark); }

/* ============================================================
   PAGE SECTIONS (multi-page)
   ============================================================ */
.page { display: none; }
.page.active { display: block; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; gap: 48px; }
  .hero-subtitle { max-width: 100%; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-visual { order: -1; max-width: 420px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --nav-h: 60px; }
  section { padding: 64px 0; }
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .pricing-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .market-banner-inner { gap: 20px; }
}

@media (max-width: 480px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .hw-main-price { font-size: 2.2rem; }
  .about-accent-box { width: 130px; height: 130px; right: -10px; bottom: -10px; }
  .about-accent-num { font-size: 2.2rem; }
}

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-gold), transform 0.6s var(--ease-gold);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold-dark); }

/* ============================================================
   SELECTION
   ============================================================ */
::selection { background: rgba(201,168,76,0.28); color: var(--text); }

/* ============================================================
   RATES TABLE SECTION
   ============================================================ */
#rates-table {
  /* Continues the hero overlay's fade — starts at the same 55% cream
     veil that .hero-overlay ends on, then ramps up to fully solid */
  background:
    linear-gradient(to bottom,
      rgba(234,235,220,0.55) 0%,
      rgba(234,235,220,0.80) 22%,
      rgba(234,235,220,0.96) 50%,
      var(--bg-2) 100%);
  border-top: none;
  border-bottom: 1px solid var(--border);
  padding: 72px 0 56px;
  position: relative;
  z-index: 1;
}

/* ── Top header row ── */
.rt-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin-bottom: 48px;
}
.rt-col-head { display: flex; flex-direction: column; gap: 10px; }
.rt-col-head-right { align-items: flex-end; }

.rt-heading {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text);
  margin: 0;
}

.rt-gold-line {
  width: 56px; height: 2px;
  background: var(--gold);
}
.rt-col-head-right .rt-gold-line { margin-left: auto; }

/* ── Center clock ── */
.rt-center-clock {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 28px;
  border-left: 1px solid var(--border-2);
  border-right: 1px solid var(--border-2);
  min-width: 180px;
}
.rt-date {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rt-time {
  font-size: 1.5rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--gold-light);
  line-height: 1;
}
.rt-live-dot-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.rt-status-text {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}

/* ── Table body layout ── */
.rt-body {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  align-items: start;
}

.rt-divider {
  background: var(--border);
  align-self: stretch;
  margin: 0 40px;
}

/* ── Table ── */
.rt-table-wrap { width: 100%; }

.rt-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
}

/* Column headers */
.rt-th {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 10px 16px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.rt-th-price { text-align: right; }

/* Rows */
.rt-row { transition: background 0.2s; }
.rt-row:hover { background: rgba(201,168,76,0.04); }
.rt-row-alt { background: rgba(255,255,255,0.02); }
.rt-row-alt:hover { background: rgba(201,168,76,0.06); }

.rt-td-label {
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text-muted);
  padding: 18px 16px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border-2);
}

.rt-td-price {
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 18px 16px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border-2);
}
.rt-td-price.gold-val   { color: var(--gold-light); }
.rt-td-price.silver-val { color: #C8C8C8; }

/* Disclaimer */
.rt-disclaimer {
  margin-top: 20px;
  padding: 14px 16px;
  font-size: 0.68rem;
  color: var(--text-dim);
  line-height: 1.65;
  border-top: 1px solid var(--border-2);
  font-style: italic;
  letter-spacing: 0.01em;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .rt-top {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .rt-col-head-right { align-items: center; }
  .rt-col-head-right .rt-gold-line { margin-left: auto; margin-right: auto; }
  .rt-center-clock {
    border: 1px solid var(--border-2);
    border-radius: 0;
    padding: 12px 20px;
    order: -1;
  }
  .rt-body {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .rt-divider { display: none; }
  .rt-table-wrap:first-child {
    border-bottom: 1px solid var(--border);
    padding-bottom: 32px;
    margin-bottom: 32px;
  }
}

/* ============================================================
   PRODUCT PAGE
   ============================================================ */

/* ── Page hero ── */
.prod-page-hero {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  padding: 64px 0 48px;
  text-align: center;
}
.prod-page-hero .label { margin-bottom: 10px; }
.prod-page-hero h1     { margin-bottom: 12px; }
.prod-page-hero p      { color: var(--text-muted); max-width: 500px; margin: 0 auto 20px; }

.prod-clock-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 8px 20px;
  margin-top: 4px;
}
.prod-clock-date {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.prod-clock-time {
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gold-light);
  letter-spacing: 0.06em;
}
.prod-clock-sep { color: var(--text-dim); font-size: 0.7rem; }
.prod-fx {
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

/* ── Section wrapper ── */
.prod-section { padding: 64px 0 80px; }

/* ── Product grid — two columns ── */
.prod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ── Product card ── */
.prod-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: row; /* info left · image right */
  transition: border-color 0.3s, box-shadow 0.3s;
}
.prod-card:hover {
  border-color: rgba(201,168,76,0.4);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}

/* ── Card image panel sits on the LEFT ── */
.prod-card-img {
  order: 1;
  position: relative;
  width: 260px;
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid var(--border);
}
.gold-img-bg   { background: var(--bg-card); }
.silver-img-bg { background: var(--bg-card); }

/* No overlay needed — blend mode handles the bg */
.prod-img-overlay { display: none; }

/* Bar image — sized by width so it never overflows vertically */
.prod-bar-img {
  width: 76%;
  height: auto;
  max-height: 88%;
  object-fit: contain;
  mix-blend-mode: lighten;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.4));
  transition: transform 0.45s ease;
}
.prod-card:hover .prod-bar-img {
  transform: scale(1.05);
}

/* ── Card body sits on the RIGHT ── */
.prod-card-body { order: 2; }

/* Responsive: stack on narrow screens */
@media (max-width: 640px) {
  .prod-card { flex-direction: column; }
  .prod-card-img {
    order: 1;
    width: 100%;
    height: 220px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .prod-card-body { order: 2; }
  .prod-bar-img { width: 45%; max-height: 90%; }
}

.prod-status-badge {
  position: absolute;
  top: 12px; right: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--green);
  z-index: 2;
}

/* ── Card body ── */
.prod-card-body {
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.prod-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.prod-purity-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 10px;
  margin-bottom: 8px;
}
.gold-tag   { background: rgba(201,168,76,0.1); color: var(--gold); border: 1px solid rgba(201,168,76,0.25); }
.silver-tag { background: rgba(192,192,200,0.08); color: #B0B8C8; border: 1px solid rgba(192,192,200,0.2); }

.prod-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 3px;
}
.prod-card-sub {
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

/* Spot reference column */
.prod-spot-col { text-align: right; flex-shrink: 0; }
.prod-spot-label {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.prod-spot-val {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.gold-spot   { color: var(--gold-light); }
.silver-spot { color: #B8C0D0; }
.prod-spot-unit {
  font-size: 0.6rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  margin-top: 2px;
}
.prod-usd-ref {
  font-size: 0.62rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

/* ── Buy / Sell price row ── */
.prod-price-row {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-2);
}
.prod-price-divider { background: var(--border-2); }
.prod-price-block   { padding: 14px 16px 12px; }

.prod-price-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sell-lbl { color: var(--red); }
.buy-lbl  { color: var(--green); }

.prod-price-main {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 4px;
}
.sell-price { color: var(--red); }
.buy-price  { color: var(--green); }

.prod-price-unit {
  font-size: 0.6rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Specs strip ── */
.prod-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--border-2);
}
.prod-spec {
  background: var(--bg);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.prod-spec-k {
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.prod-spec-v {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}
.gold-v   { color: var(--gold); }
.silver-v { color: #B0B8C8; }

/* ── Enquire button ── */
.prod-enquire-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: opacity 0.2s, transform 0.2s;
  margin-top: auto;
}
.prod-enquire-btn:hover { opacity: 0.85; transform: translateY(-1px); }

.gold-btn {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  color: var(--bg);
}
.silver-btn {
  background: linear-gradient(135deg, #606878, #8890A0, #A8B0C0);
  color: #0e0f12;
}

/* ── Disclaimer ── */
.prod-disclaimer {
  margin-top: 32px;
  padding: 16px 20px;
  border: 1px solid var(--border-2);
  font-size: 0.68rem;
  color: var(--text-dim);
  line-height: 1.7;
  font-style: italic;
  text-align: center;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .prod-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .prod-card-top    { flex-direction: column; }
  .prod-spot-col    { text-align: left; }
  .prod-price-main  { font-size: 1.3rem; }
  .prod-specs       { grid-template-columns: repeat(2, 1fr); }
  .prod-clock-wrap  { flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   ABOUT PAGE — FIXED VIDEO BACKGROUND
   ============================================================ */

/* Fixed video — stays in place as page content scrolls over it */
.about-video-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

/* Sage-cream veil — light enough to let the video atmosphere through,
   strong enough to keep dark text readable */
.about-video-overlay {
  position: fixed;
  inset: 0;
  background: rgba(234, 235, 220, 0.55);
  z-index: 1;
  pointer-events: none;
}

/* All about sections sit above the fixed video */
#page-about > .page-offset,
#page-about > section,
#page-about > .cta-band {
  position: relative;
  z-index: 2;
  background: transparent;
}

/* Strip the inline bg from the values/team sections so video shows through */
#page-about section[style] {
  background: transparent !important;
}

/* Start content right under the navbar — no big top gap */
#page-about #about {
  padding-top: 48px;
}
#page-about .page-offset {
  padding-top: var(--nav-h);
}

/* ============================================================
   PRODUCTS PAGE — REDESIGN
   ============================================================ */

/* Status row in hero */
.prod-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}
.prod-status-sep { color: var(--border-2); }
.prod-status-text { color: var(--gold); font-weight: 500; }

/* Section header */
.prod-section-hdr { margin-bottom: 40px; }
.prod-section-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 8px;
  max-width: 520px;
}
.prod-section-alt { background: var(--bg-2); }

/* Simplified price block inside card */
.prod-spot-line {
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.prod-spot-inline {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.prod-spot-usd {
  font-size: 0.68rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.prod-price-simple {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.pps-divider { background: var(--border); }
.pps-block { padding: 16px 18px; }
.pps-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.pps-price {
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 4px;
}
.pps-unit {
  font-size: 0.58rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.gold-sell-color { color: var(--gold-light); }
.gold-buy-color  { color: var(--text); }
.silver-sell-color { color: #B8C0D0; }
.silver-buy-color  { color: var(--text-muted); }

/* ── Retail price table ── */
.retail-table {
  border: 1px solid var(--border);
  overflow: hidden;
}
.retail-table-head {
  display: grid;
  grid-template-columns: 140px 1fr 1fr 120px;
  padding: 10px 24px;
  background: rgba(201,168,76,0.06);
  border-bottom: 1px solid var(--border);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.retail-row {
  display: grid;
  grid-template-columns: 140px 1fr 1fr 120px;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.2s;
}
.retail-row:last-child { border-bottom: none; }
.retail-row:hover { background: rgba(201,168,76,0.03); }

.retail-weight {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.ret-weight-num {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ret-weight-unit {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.retail-sell {
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gold-light);
}
.retail-buy {
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.retail-enquire {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid rgba(201,168,76,0.35);
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
}
.retail-enquire:hover {
  background: rgba(201,168,76,0.1);
  border-color: var(--gold);
}

@media (max-width: 640px) {
  .retail-table-head { grid-template-columns: 80px 1fr 1fr 70px; padding: 8px 14px; }
  .retail-row { grid-template-columns: 80px 1fr 1fr 70px; padding: 14px; }
  .ret-weight-num { font-size: 1rem; }
}

/* ============================================================
   PRODUCTS PAGE — TABS + CLEAN WHOLESALE + RETAIL CARDS
   ============================================================ */

/* ── Tab switcher ── */
.prod-tabs {
  display: inline-flex;
  gap: 0;
  margin-top: 28px;
  border-bottom: 1px solid var(--border);
}
.prod-tab {
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 12px 28px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: color 0.25s;
}
.prod-tab:hover { color: var(--text); }
.prod-tab.active { color: var(--gold); }
.prod-tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gold);
}

/* Tab panels */
.prod-tab-panel { display: none; }
.prod-tab-panel.active { display: block; }

/* ── Clean wholesale (no back boxes) ── */
.ws-clean-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}

.ws-clean {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 8px 0;
}

.ws-img {
  flex-shrink: 0;
  width: 200px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  transition: transform 0.45s ease, filter 0.45s ease;
}
.ws-clean:hover .ws-img img {
  transform: scale(1.04);
  filter: drop-shadow(0 8px 18px rgba(78, 56, 22, 0.16));
}

.ws-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ws-title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 4px 0 0;
}

.ws-spot-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.ws-spot-lbl {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.6rem;
  color: var(--text-muted);
}
.ws-spot-val {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ws-spot-usd {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.ws-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--border);
}
.ws-price-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ws-price-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ws-price-val {
  font-size: 1.55rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ws-price-unit {
  font-size: 0.62rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ws-enquire-link {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 0;
  transition: opacity 0.2s, transform 0.2s;
  border-bottom: 1px solid currentColor;
}
.ws-enquire-link:hover { opacity: 0.7; transform: translateX(3px); }
.gold-link   { color: var(--gold); }
.silver-link { color: #B8C0D0; }

@media (max-width: 900px) {
  .ws-clean-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 560px) {
  .ws-clean { flex-direction: column; gap: 16px; }
  .ws-img { width: 100%; height: 200px; }
  .ws-img img { width: 50%; }
  .ws-prices { gap: 16px; }
  .ws-price-val { font-size: 1.35rem; }
}

/* ── Retail card grid ── */
.retail-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .retail-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 880px) {
  .retail-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .retail-grid { grid-template-columns: repeat(2, 1fr); }
}

.retail-card {
  display: flex;
  flex-direction: column;
  border: none;
  background: transparent;
  transition: transform 0.25s;
  overflow: visible;
  height: 100%;          /* fill the grid cell */
}
.retail-card:hover {
  transform: translateY(-3px);
}

.retail-img {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-bottom: none;
  padding: 8px 0 14px;
}
.retail-img img {
  max-width: 70%;
  max-height: 100%;
  object-fit: contain;
  filter: none;
  transition: transform 0.4s ease, filter 0.4s ease;
}
.retail-card:hover .retail-img img {
  transform: scale(1.06);
  filter: drop-shadow(0 6px 14px rgba(78, 56, 22, 0.15));
}

.retail-body {
  padding: 4px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;                /* fill remaining height inside the card */
}
.retail-body .retail-card-cta { margin-top: auto; }  /* push CTA to bottom */

.retail-weight-lbl {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.rw-num {
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.rw-unit {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.retail-sub {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.retail-prices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.retail-prices > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.rp-lbl {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rp-val {
  font-size: 0.92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.retail-card-cta {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  align-self: flex-start;
  border-bottom: 1px solid rgba(201,168,76,0.35);
  padding-bottom: 2px;
  transition: border-color 0.2s, color 0.2s;
}
.retail-card-cta:hover {
  color: var(--gold-light);
  border-color: var(--gold-light);
}

@media (max-width: 480px) {
  .retail-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .retail-img { height: 130px; padding: 10px; }
  .rw-num { font-size: 1.3rem; }
  .rp-val { font-size: 0.82rem; }
}

/* ============================================================
   RATES TABLE — REDESIGN (single unified 3-col table)
   ============================================================ */

/* Section header */
.rt-hdr {
  text-align: center;
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.rt-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 4px 0 0;
}
.rt-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.rt-meta-sep { color: var(--text-muted); }

/* Card container */
.rt-card {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(201,168,76,0.04), rgba(0,0,0,0));
  overflow: hidden;
}

/* Table */
.rt-table-v2 {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

/* Bigger, bolder headers */
.rt-th-v2 {
  padding: 22px 28px;
  font-size: 1rem;          /* big & readable */
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  border-bottom: 1px solid var(--border);
  background: rgba(201,168,76,0.06);
  text-align: right;
  white-space: nowrap;
}
.rt-th-details { text-align: left; }

/* Rows */
.rt-row-v2 {
  transition: background 0.2s;
}
.rt-row-v2:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.rt-row-v2:hover { background: rgba(201,168,76,0.04); }

/* Detail cell — asset chip + name + unit */
.rt-row-v2 .rt-td-label {
  padding: 26px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.rt-asset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  flex-shrink: 0;
}
.gold-asset   { color: var(--gold); background: rgba(201,168,76,0.08); border-color: rgba(201,168,76,0.3); }
.silver-asset { color: #C8D0E0; background: rgba(192,200,224,0.06); border-color: rgba(192,200,224,0.25); }

.rt-detail { display: flex; flex-direction: column; gap: 3px; }
.rt-detail-name {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.rt-detail-unit {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Price cells */
.rt-row-v2 .rt-td-price {
  padding: 26px 28px;
  text-align: right;
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
}
.rt-row-v2 .rt-td-price.gold-val   { color: var(--gold-dark); }
.rt-row-v2 .rt-td-price.silver-val { color: #4A5060; }

/* Disclaimer */
.rt-disclaimer-v2 {
  margin-top: 20px;
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.7;
  text-align: center;
  font-style: italic;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive */
@media (max-width: 760px) {
  .rt-th-v2 { padding: 14px 14px; font-size: 0.78rem; letter-spacing: 0.14em; }
  .rt-row-v2 .rt-td-label { padding: 18px 14px; gap: 10px; }
  .rt-row-v2 .rt-td-price { padding: 18px 14px; font-size: 1.05rem; }
  .rt-asset { width: 36px; height: 36px; font-size: 0.95rem; }
  .rt-detail-name { font-size: 0.92rem; }
  .rt-detail-unit { font-size: 0.62rem; }
}
@media (max-width: 480px) {
  .rt-th-v2.rt-th-sell, .rt-th-v2.rt-th-buy { font-size: 0.68rem; padding: 12px 8px; }
  .rt-row-v2 .rt-td-price { font-size: 0.92rem; padding: 14px 8px; }
  .rt-row-v2 .rt-td-label { padding: 14px 10px; }
  .rt-asset { display: none; } /* tighten on tiny screens */
}

/* ============================================================
   OUR SERVICES SECTION (Bullion + Surat Pajak)
   ============================================================ */
#services {
  padding: 100px 0 90px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

.svc-header {
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.svc-header h2 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 4px 0 0;
}
.svc-subtitle {
  max-width: 640px;
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.7;
  margin-top: 4px;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.svc-card {
  position: relative;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0));
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.svc-card:hover {
  border-color: rgba(201,168,76,0.35);
  transform: translateY(-3px);
  box-shadow: 0 14px 50px rgba(0,0,0,0.4);
}

.svc-icon {
  width: 64px;
  height: 64px;
  color: var(--gold);
  margin-bottom: 6px;
}
.svc-icon svg { width: 100%; height: 100%; }

.svc-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 0;
  margin-bottom: 4px;
}
.svc-tag.gold-tag {
  background: rgba(201,168,76,0.14);
  color: var(--gold-dark);
  border: 1px solid rgba(142,109,38,0.4);
}
.svc-tag.pajak-tag {
  background: rgba(184,108,52,0.14);
  color: #9A5A22;
  border: 1px solid rgba(154,90,34,0.4);
}

.svc-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.2;
}
.svc-desc {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--text);
  margin: 0;
}

.svc-points {
  list-style: none;
  padding: 0;
  margin: 8px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.svc-points li {
  position: relative;
  padding-left: 22px;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
}
.svc-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-weight: 700;
}

.svc-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 14px;
}

.svc-link {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding: 4px 0;
  transition: opacity 0.2s, transform 0.2s;
}
.svc-link.gold-link { color: var(--gold-dark); }
.svc-link:hover { opacity: 0.7; transform: translateX(3px); }

.svc-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  background: #25D366;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.svc-wa-btn:hover {
  background: #1ebe5b;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37,211,102,0.3);
}
.svc-wa-btn svg { width: 16px; height: 16px; }
.svc-wa-btn.pajak-wa { background: #25D366; }

.svc-faq-note {
  margin-top: 36px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.8;
  font-style: italic;
  padding: 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.svc-faq-note strong {
  color: var(--gold);
  font-style: normal;
  letter-spacing: 0.04em;
}

/* Responsive */
@media (max-width: 1080px) {
  .svc-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 880px) {
  .svc-grid { grid-template-columns: 1fr; gap: 22px; }
  #services { padding: 70px 0 60px; }
}
@media (max-width: 480px) {
  .svc-card { padding: 26px 22px; }
  .svc-title { font-size: 1.25rem; }
  .svc-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .svc-wa-btn { justify-content: center; }
  .svc-link { text-align: center; }
}

/* ============================================================
   FLOATING WHATSAPP BUTTON (global, all pages)
   ============================================================ */
.wa-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(37,211,102,0.45), 0 2px 6px rgba(0,0,0,0.3);
  z-index: 999;
  transition: transform 0.2s, box-shadow 0.2s;
}
.wa-fab:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 12px 32px rgba(37,211,102,0.6), 0 4px 12px rgba(0,0,0,0.4);
}
.wa-fab:active { transform: scale(0.96); }

.wa-fab-icon {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: flex;
}
.wa-fab-icon svg { width: 100%; height: 100%; }

/* Pulse ring */
.wa-fab-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: 0.6;
  animation: waPulse 2.4s ease-out infinite;
  z-index: 1;
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.6); opacity: 0;    }
  100% { transform: scale(1.6); opacity: 0;    }
}

/* Tooltip */
.wa-fab-tip {
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20,18,12,0.95);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  border: 1px solid var(--border);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.wa-fab-tip::after {
  content: "";
  position: absolute;
  right: -6px; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: rgba(20,18,12,0.95);
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.wa-fab:hover .wa-fab-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(-4px);
}

/* Mobile: smaller, no tooltip */
@media (max-width: 640px) {
  .wa-fab { width: 52px; height: 52px; bottom: 18px; right: 18px; }
  .wa-fab-icon { width: 26px; height: 26px; }
  .wa-fab-tip { display: none; }
}

/* ============================================================
   OUR COLLECTIONS — Featured product showcase (home page)
   ============================================================ */
#collections {
  padding: 100px 0;
  background: var(--bg);
}

.coll-header {
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.coll-header h2 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 4px 0 0;
}
.coll-sub {
  max-width: 540px;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: 4px;
}

.coll-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.coll-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s var(--ease-gold);
}
.coll-card:hover { transform: translateY(-6px); }

.coll-img-wrap {
  position: relative;
  height: 280px;
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse at center bottom,
      rgba(201,168,76,0.08) 0%,
      transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.coll-card:hover .coll-img-wrap {
  border-color: rgba(201,168,76,0.45);
  box-shadow: 0 14px 50px rgba(201,168,76,0.12);
}

.coll-img-wrap img {
  max-width: 70%;
  max-height: 80%;
  object-fit: contain;
  filter: none;
  transition: transform 0.5s var(--ease-gold), filter 0.5s var(--ease-gold);
}
.coll-card:hover .coll-img-wrap img {
  transform: scale(1.06);
  filter: drop-shadow(0 8px 18px rgba(78, 56, 22, 0.16));
}

.coll-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(31,78,121,0.88) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  opacity: 0;
  transition: opacity 0.3s;
}
.coll-card:hover .coll-overlay { opacity: 1; }

.coll-overlay-text {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
}

.coll-meta {
  text-align: center;
  padding: 18px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.coll-tag {
  display: inline-block;
  align-self: center;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 3px 10px;
}
.coll-tag.gold-tag {
  background: rgba(201,168,76,0.1);
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.25);
}
.coll-tag.silver-tag {
  background: rgba(61,78,104,0.08);
  color: #3D4E68;
  border: 1px solid rgba(61,78,104,0.3);
}
.coll-name {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 4px 0 0;
}
.coll-cat {
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coll-cta-row {
  text-align: center;
  margin-top: 48px;
}
.coll-view-all {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid currentColor;
  padding: 4px 0;
  transition: opacity 0.2s, transform 0.2s;
  display: inline-block;
}
.coll-view-all:hover { opacity: 0.7; transform: translateX(3px); }

/* Responsive */
@media (max-width: 1100px) {
  .coll-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .coll-img-wrap { height: 240px; }
}
@media (max-width: 540px) {
  .coll-grid { grid-template-columns: 1fr; }
  .coll-img-wrap { height: 260px; }
}

/* ============================================================
   SURAT PAJAK PAGE
   ============================================================ */
.sp-intro {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 64px;
  align-items: center;
  padding: 80px 0 40px;
}
.sp-intro-text { display: flex; flex-direction: column; gap: 18px; }
.sp-intro-text h2 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.sp-intro-text p {
  font-size: 0.96rem;
  line-height: 1.85;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0;
}
.sp-intro-text p em {
  color: var(--gold-light);
  font-style: italic;
}

.sp-cta-row {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.sp-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sp-cta-icon { width: 16px; height: 16px; flex-shrink: 0; }

.sp-intro-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  background: var(--bg-2);
  padding: 8px 0;
}
.sp-stat {
  padding: 28px 32px;
  text-align: center;
  border-bottom: 1px solid var(--border-2);
}
.sp-stat:last-child { border-bottom: none; }
.sp-stat-num {
  font-family: 'Inter', sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.sp-stat-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sp-cases-header {
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sp-cases-header h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 4px 0 0;
}

.sp-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.sp-case {
  padding: 32px;
  border: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.3s, transform 0.3s var(--ease-gold);
}
.sp-case:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}
.sp-case-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.sp-case h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}
.sp-case p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}
.sp-case p em { color: var(--gold-light); font-style: italic; }

.sp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
}
.sp-step {
  text-align: center;
  padding: 36px 24px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.sp-step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 8px;
}
.sp-step h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}
.sp-step p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  max-width: 280px;
}
.sp-step p em { color: var(--gold-light); font-style: italic; }

.sp-faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sp-faq-item {
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 20px 24px;
  transition: border-color 0.3s;
}
.sp-faq-item[open] { border-color: var(--gold); }
.sp-faq-item summary {
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.sp-faq-item summary::-webkit-details-marker { display: none; }
.sp-faq-item summary::after {
  content: '+';
  color: var(--gold);
  font-size: 1.4rem;
  font-weight: 300;
  transition: transform 0.3s;
}
.sp-faq-item[open] summary::after {
  content: '−';
}
.sp-faq-item p {
  margin: 14px 0 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .sp-intro { grid-template-columns: 1fr; gap: 40px; padding: 60px 0 20px; }
  .sp-cases-grid { grid-template-columns: 1fr; }
  .sp-steps { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE OPTIMIZATION PASS — UI/UX best practices
   Tap targets >=44px, readable type, single-column layouts,
   safe-area insets, no horizontal overflow
   ============================================================ */

/* Phone (default mobile improvements: <=768px) */
@media (max-width: 768px) {

  /* ── Global ─────────────────────────────────────────────── */
  :root { --nav-h: 60px; }
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; line-height: 1.6; }
  .container { padding: 0 20px; }
  section { padding: 56px 0; }

  /* Respect iOS safe-area on fixed/floating elements */
  #navbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .nav-mobile { padding-bottom: max(24px, env(safe-area-inset-bottom)); }

  /* Headings: tighter on mobile */
  h1 { font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.15; }
  h2 { font-size: clamp(1.6rem, 6vw, 2.1rem); line-height: 1.2; }
  h3 { font-size: 1.2rem; }

  /* ── Navigation ─────────────────────────────────────────── */
  .nav-hamburger {
    width: 44px; height: 44px;       /* enforce 44x44 tap target */
    align-items: center; justify-content: center;
    gap: 6px; padding: 12px 10px;
  }
  .nav-hamburger span { width: 22px; }
  .nav-logo img { height: 40px; }

  .nav-mobile {
    padding: 16px 24px 32px;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
  }
  .nav-mobile a {
    font-size: 0.95rem;
    padding: 18px 4px;               /* 44px+ tap target */
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* Add a primary CTA inside the mobile menu (replaces hidden navbar CTA) */
  .nav-mobile::after {
    content: '';
    display: block;
    height: 8px;
  }

  /* ── Hero ──────────────────────────────────────────────── */
  #hero { min-height: 560px; height: 100dvh; }
  .hero-inner { padding: 0 20px; }
  .hero-title-sub { font-size: 0.55em !important; letter-spacing: 0.4em; }
  .hero-subtitle { font-size: 1rem; line-height: 1.6; max-width: 100%; }
  .hero-actions {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta {
    width: 100%;
    justify-content: center;
    min-height: 50px;
    padding: 16px 24px;
  }
  .hero-scroll-hint { bottom: 24px; }

  /* ── Buttons (global) ───────────────────────────────────── */
  .btn-gold, .btn-outline {
    min-height: 48px;
    padding: 14px 24px;
    font-size: 0.78rem;
  }

  /* ── Rates table ────────────────────────────────────────── */
  #rates-table { padding: 56px 0 48px; }
  .rt-card { border-radius: 0; margin: 0 -4px; }    /* slight bleed for breathing room */
  .rt-th-v2 { padding: 12px 10px; font-size: 0.7rem; letter-spacing: 0.1em; }
  .rt-row-v2 .rt-td-label { padding: 16px 10px; gap: 10px; }
  .rt-row-v2 .rt-td-price { padding: 16px 10px; font-size: 1rem; font-weight: 600; }
  .rt-detail-name { font-size: 0.95rem; line-height: 1.2; }
  .rt-detail-unit { font-size: 0.6rem; }
  .rt-meta { font-size: 0.7rem; flex-wrap: wrap; justify-content: center; }
  .rt-disclaimer-v2 { font-size: 0.66rem; padding: 0 8px; }

  /* ── Services cards ─────────────────────────────────────── */
  #services { padding: 64px 0; }
  .svc-grid { grid-template-columns: 1fr; gap: 20px; }
  .svc-card { padding: 28px 22px; }
  .svc-icon { width: 56px; height: 56px; }
  .svc-title { font-size: 1.25rem; }
  .svc-desc { font-size: 0.92rem; line-height: 1.65; }
  .svc-points li { font-size: 0.88rem; padding-left: 26px; min-height: 28px; }
  .svc-actions { flex-wrap: wrap; gap: 12px; }
  .svc-link, .svc-wa-btn { min-height: 44px; }
  .svc-wa-btn { padding: 12px 18px; }
  .svc-faq-note { padding: 24px 20px; font-size: 0.85rem; line-height: 1.7; }

  /* ── Collections (Featured Bullion) ─────────────────────── */
  #collections { padding: 64px 0; }
  .coll-header { margin-bottom: 36px; }
  .coll-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .coll-img-wrap { height: 200px; }
  .coll-meta { padding: 14px 12px; gap: 6px; }
  .coll-name { font-size: 0.95rem; line-height: 1.25; }
  .coll-cat { font-size: 0.7rem; }
  .coll-tag { font-size: 0.6rem; padding: 3px 8px; }
  .coll-cta-row { margin-top: 28px; }
  .coll-view-all { min-height: 44px; display: inline-flex; align-items: center; }

  /* ── Why-section / about ─────────────────────────────────── */
  .why-grid { grid-template-columns: 1fr; gap: 16px; }
  .about-stat-num { font-size: 1.6rem; }
  .about-stat-label { font-size: 0.62rem; }

  /* ── CTA band ──────────────────────────────────────────── */
  .cta-band { padding: 64px 0; }
  .cta-actions { flex-direction: column; gap: 12px; align-items: stretch; max-width: 320px; margin: 24px auto 0; }
  .cta-actions a { width: 100%; justify-content: center; }

  /* ── Surat Pajak page ──────────────────────────────────── */
  .sp-intro { padding: 48px 0 16px; gap: 32px; }
  .sp-intro-text h2 { font-size: clamp(1.7rem, 6vw, 2.2rem); }
  .sp-intro-text p { font-size: 0.95rem; }
  .sp-intro-card { padding: 4px 0; }
  .sp-stat { padding: 22px 24px; }
  .sp-stat-num { font-size: 2rem; }
  .sp-stat-label { font-size: 0.65rem; }
  .sp-cta-row { flex-direction: column; gap: 12px; }
  .sp-cta-row a { width: 100%; justify-content: center; min-height: 50px; }
  .sp-cases-header { margin-bottom: 36px; }
  .sp-case { padding: 24px 20px; }
  .sp-case h3 { font-size: 1.05rem; }
  .sp-step { padding: 28px 18px; }
  .sp-step h3 { font-size: 1rem; }
  .sp-faq-item { padding: 16px 18px; }
  .sp-faq-item summary { font-size: 0.92rem; }
  .sp-faq-item p { font-size: 0.88rem; }

  /* ── Products page ─────────────────────────────────────── */
  .prod-section { padding: 56px 0; }
  .prod-card { flex-direction: column; }
  .prod-img, .prod-info { width: 100%; }

  /* ── Contact page ──────────────────────────────────────── */
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  input, textarea, select {
    font-size: 16px !important;       /* prevent iOS auto-zoom */
    min-height: 48px;
    padding: 14px 16px;
  }
  textarea { min-height: 120px; }
  button[type="submit"], .form-submit { min-height: 50px; width: 100%; }

  /* ── Footer ────────────────────────────────────────────── */
  footer { padding: 56px 0 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; text-align: left; }
  .footer-brand p { max-width: 100%; font-size: 0.9rem; }
  .footer-col-title { margin-bottom: 14px; }
  .footer-col ul { gap: 4px; }
  .footer-col ul li a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
  }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-bottom p { font-size: 0.7rem; line-height: 1.55; }
  .footer-legal a { min-height: 36px; display: inline-flex; align-items: center; }

  /* ── Floating WhatsApp FAB ─────────────────────────────── */
  .wa-fab {
    width: 56px; height: 56px;
    bottom: max(20px, env(safe-area-inset-bottom));
    right: 20px;
  }
  .wa-fab-icon { width: 28px; height: 28px; }

  /* ── Page hero (sub-pages) ─────────────────────────────── */
  .products-hero { padding: 36px 0 28px; }
  .products-hero h1 { font-size: clamp(2rem, 7vw, 2.6rem); }
  .products-hero p { font-size: 0.95rem; max-width: 100%; }

  /* ── Clients page ──────────────────────────────────────── */
  .client-categories { grid-template-columns: 1fr; gap: 16px; }
  .client-logos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Tiny phones (<=420px) */
@media (max-width: 420px) {
  .container { padding: 0 16px; }
  section { padding: 48px 0; }

  .hero-title { font-size: clamp(2.4rem, 14vw, 3rem); letter-spacing: -0.02em; }
  .hero-subtitle { font-size: 0.95rem; }

  .coll-grid { grid-template-columns: 1fr; gap: 18px; }
  .coll-img-wrap { height: 240px; }
  .coll-name { font-size: 1rem; }

  .svc-card { padding: 24px 18px; }

  .sp-stat-num { font-size: 1.7rem; }
  .sp-case { padding: 20px 16px; }

  .rt-asset { display: none; }       /* free up space */
  .rt-row-v2 .rt-td-price { font-size: 0.92rem; }
  .rt-detail-name { font-size: 0.88rem; }

  .client-logos-grid { grid-template-columns: 1fr; }

  .footer-bottom p { font-size: 0.66rem; }
}

/* ============================================================
   NAV DROPDOWN — Services menu
   ============================================================ */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.nav-chevron {
  width: 10px;
  height: 7px;
  transition: transform 0.25s var(--ease-gold);
  opacity: 0.7;
}
.nav-dropdown:hover .nav-chevron,
.nav-dropdown:focus-within .nav-chevron { transform: rotate(180deg); opacity: 1; }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 340px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.22s, transform 0.22s var(--ease-gold), visibility 0.22s;
  z-index: 1100;
  box-shadow: 0 24px 60px rgba(10,9,5,0.12), 0 1px 0 var(--border-2);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 22px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid transparent;
  transition: color 0.18s, background 0.18s, padding-left 0.18s;
}
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a:hover {
  color: var(--gold);
  background: rgba(201,168,76,0.05);
  padding-left: 26px;
}
.ndd-num {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--gold-dark);
  min-width: 22px;
  font-weight: 700;
}
.nav-dropdown-menu a:hover .ndd-num { color: var(--gold-light); }

/* Mobile services group (uses native <details>) */
.nav-mobile-group {
  border-bottom: 1px solid var(--border-2);
}
.nav-mobile-group > summary {
  list-style: none;
  cursor: pointer;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.25s;
}
.nav-mobile-group > summary::-webkit-details-marker { display: none; }
.nav-mobile-group > summary::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s;
}
.nav-mobile-group[open] > summary { color: var(--gold); }
.nav-mobile-group[open] > summary::after { transform: rotate(-135deg); }
.nav-mobile-group > a {
  padding: 11px 0 11px 18px;
  font-size: 0.72rem;
  border-bottom: 1px dashed var(--border-2);
  color: var(--text-muted);
}
.nav-mobile-group > a:last-of-type { border-bottom: none; }

/* ============================================================
   SERVICES PAGE
   ============================================================ */

/* ── Tab rail ── */
.srv-tabs-wrap {
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  position: sticky;
  top: var(--nav-h);
  z-index: 20;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.srv-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dark) transparent;
  padding: 0 0 1px 0;
  scroll-behavior: smooth;
}
.srv-tabs::-webkit-scrollbar { height: 4px; }
.srv-tabs::-webkit-scrollbar-track { background: transparent; }
.srv-tabs::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 2px; }

.srv-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  padding: 18px 22px;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
  white-space: nowrap;
}
.srv-tab:hover { color: var(--text); background: rgba(201,168,76,0.04); }
.srv-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.srv-tab-num {
  font-size: 0.66rem;
  color: var(--gold-dark);
  letter-spacing: 0.16em;
  font-weight: 700;
}
.srv-tab.active .srv-tab-num { color: var(--gold-light); }

/* ── Panels ── */
.srv-panel { display: none; padding: 80px 0 96px; }
.srv-panel.active { display: block; }

/* Two-column detail layout */
.srv-detail {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 72px;
  align-items: start;
}
.srv-detail-side h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: 22px;
}
.srv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 20px;
}
.srv-eyebrow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 8px;
  background: var(--blue);
  border: 1px solid var(--blue);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}
.srv-lead {
  font-size: 1.02rem;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 18px;
  max-width: 56ch;
}
.srv-detail-side p {
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 16px;
  max-width: 60ch;
}
.srv-disclaimer-line {
  font-size: 0.83rem;
  padding: 14px 18px;
  background: rgba(201,168,76,0.04);
  border-left: 2px solid var(--gold-dark);
  color: var(--text-muted);
}
.srv-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* Aside column */
.srv-detail-aside {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 32px 30px;
}
.srv-aside-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  position: relative;
  padding-bottom: 12px;
}
.srv-aside-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 32px; height: 1px;
  background: var(--gold);
}
.srv-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.srv-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.55;
}
.srv-bullet {
  flex-shrink: 0;
  width: 6px; height: 6px;
  margin-top: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}

.srv-aside-callout {
  margin-top: 24px;
  padding: 18px 16px;
  background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(201,168,76,0.02));
  border: 1px solid var(--border);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.srv-aside-callout-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.8rem;
  color: var(--gold);
  line-height: 1;
}
.srv-aside-callout-h {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.srv-aside-callout-p {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.srv-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.srv-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: rgba(201,168,76,0.04);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 0.06em;
}

.srv-steps-mini {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  counter-reset: srv-step;
}
.srv-steps-mini li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.srv-step-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: var(--gold);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
}
.srv-steps-mini strong {
  display: block;
  font-size: 0.92rem;
  color: var(--text);
  margin-bottom: 2px;
}
.srv-step-p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ── Services page responsive ── */
@media (max-width: 980px) {
  .srv-detail { grid-template-columns: 1fr; gap: 40px; }
  .srv-tab { padding: 16px 18px; font-size: 0.7rem; }
  .srv-panel { padding: 56px 0 72px; }
}
@media (max-width: 768px) {
  .srv-tab-label {
    /* Truncate long names on mobile so the rail stays readable */
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .srv-detail-aside { padding: 24px 20px; }
  .srv-detail-side h2 { font-size: 1.7rem; }
  .nav-dropdown-menu { display: none; }   /* dropdown is desktop-only; mobile uses <details> */
}

/* ============================================================
   HOME PAGE — FULL SERVICE CATALOGUE GRID
   ============================================================ */
#services-catalogue {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.svc-cat-header {
  text-align: center;
  margin-bottom: 56px;
}
.svc-cat-header h2 { margin-bottom: 14px; }
.svc-cat-sub {
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 580px;
  margin: 0 auto;
}
.svc-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.svc-cat-card {
  position: relative;
  background: var(--bg-card);
  padding: 28px 26px 26px;
  display: block;
  transition: background 0.25s, transform 0.25s var(--ease-gold);
  overflow: hidden;
}
.svc-cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201,168,76,0.0), rgba(201,168,76,0.06));
  opacity: 0;
  transition: opacity 0.3s var(--ease-gold);
  pointer-events: none;
}
.svc-cat-card:hover { background: rgba(201,168,76,0.03); }
.svc-cat-card:hover::before { opacity: 1; }
.svc-cat-num {
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold-dark);
  transition: color 0.25s;
}
.svc-cat-card:hover .svc-cat-num { color: var(--gold-light); }

.svc-cat-icon {
  width: 30px;
  height: 30px;
  color: var(--gold);
  margin-bottom: 18px;
  display: block;
  transition: transform 0.35s var(--ease-gold);
}
.svc-cat-card:hover .svc-cat-icon { transform: translateY(-2px) scale(1.05); }

.svc-cat-card h3 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
  transition: color 0.25s;
}
.svc-cat-card:hover h3 { color: var(--gold-light); }

.svc-cat-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 16px;
}

.svc-cat-arrow {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  color: var(--gold);
  display: inline-block;
  transition: transform 0.3s var(--ease-gold);
}
.svc-cat-card:hover .svc-cat-arrow { transform: translateX(4px); }

.svc-cat-cta {
  margin-top: 40px;
  text-align: center;
}
.svc-cat-view-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: border-color 0.25s, letter-spacing 0.25s;
}
.svc-cat-view-all:hover {
  border-bottom-color: var(--gold);
  letter-spacing: 0.18em;
}

@media (max-width: 1100px) {
  .svc-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .svc-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-cat-card { padding: 22px 20px 20px; }
  .svc-cat-card h3 { font-size: 1rem; }
  .svc-cat-card p { font-size: 0.75rem; }
}
@media (max-width: 480px) {
  .svc-cat-grid { grid-template-columns: 1fr; }
  .svc-cat-header { margin-bottom: 36px; }
}

/* ============================================================
   GLOBAL CORNER SOFTENING — slight 7px radius on all box-like
   surfaces (cards, panels, buttons, inputs, badges, chips).
   Strictly avoids elements that should remain pin-sharp lines
   (gold-rule, dividers, ticker bar) and elements that should
   stay perfectly circular (avatars, dots, WhatsApp FAB,
   leadership team headshots).
   ============================================================ */
:root {
  --radius:    7px;
  --radius-sm: 4px;
}

/* ── Cards & content surfaces ── */
.svc-card,
.svc-cat-card,
.coll-card,
.coll-img-wrap,
.why-card,
.client-cat,
.client-logo-card,
.testimonial-card,
.retail-card,
.retail-img,
.ws-clean,
.rt-card,
.sp-case,
.sp-step,
.sp-faq-item,
.sp-intro-card,
.sp-stat,
.svc-faq-note,
.srv-detail-aside,
.srv-aside-callout,
.srv-disclaimer-line,
.about-img-wrap,
.about-accent-box,
.about-img-placeholder,
.prod-price-simple,
.prod-disclaimer,
.retail-table,
.cta-band,
.nav-dropdown-menu,
.nav-mobile,
form { border-radius: var(--radius); }

/* Ensure rounded wrappers correctly clip child images / inner borders */
.coll-img-wrap,
.rt-card,
.retail-img,
.retail-table,
.about-img-wrap { overflow: hidden; }

/* ── Buttons & link-pills ── */
.btn-gold,
.btn-outline,
.nav-cta,
.svc-wa-btn,
.retail-card-cta,
.sp-cta,
.hero-cta,
button[type="submit"] { border-radius: var(--radius); }

/* ── Form inputs (contact form uses inline styles, hence !important) ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea { border-radius: var(--radius) !important; }

/* ── Small chips, tags, badges, number boxes ── */
.prod-purity-tag,
.svc-tag,
.coll-tag,
.srv-pill,
.srv-eyebrow-num,
.srv-step-num,
.svc-cat-num,
.sp-case-num,
.sp-step-num { border-radius: var(--radius-sm); }

/* ── Service tab pills (rail) — soften only top corners so the
       active gold underline still reads as a clean horizontal line ── */
.srv-tab { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }

/* ── Image placeholders / avatar boxes that aren't perfectly circular ── */
.about-accent-box { border-radius: var(--radius); }

/* ============================================================
   GRID POLISH — replace the legacy "gap-as-gold-divider" pattern
   with cleanly bordered tiles + breathing-room gaps. Required
   once the cards became rounded, since the gold parent-bg used
   to bleed through the 2px gaps and broke the rounded edges.
   Affects: Why Souk, About Values, Client Categories,
            Client Logos, Testimonials.
   ============================================================ */
.why-grid,
.client-categories,
.client-logos-grid,
.testimonials-grid {
  background: transparent;
  gap: 18px;
}

.why-card,
.client-cat,
.testimonial-card,
.client-logo-card {
  border: 1px solid var(--border);
  transition: background 0.25s, border-color 0.3s var(--ease-gold),
              transform 0.3s var(--ease-gold);
}

/* Subtle hover lift + gold-edge for emphasis cards */
.why-card:hover,
.client-cat:hover,
.testimonial-card:hover {
  border-color: rgba(201,168,76,0.42);
  transform: translateY(-2px);
}
.client-logo-card:hover {
  border-color: rgba(201,168,76,0.32);
}

/* Why-card: small gold accent rule that grows on hover */
.why-card { position: relative; overflow: hidden; }
.why-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 28px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transition: width 0.45s var(--ease-gold);
  pointer-events: none;
}
.why-card:hover::before { width: 64px; }

/* Tight up the logo cards a touch */
.client-logos-grid {
  gap: 12px;
}

/* Make testimonial spacing match new cleaner gaps */
.testimonials-grid {
  margin-top: 40px;
}

/* Mobile — tighter gaps */
@media (max-width: 768px) {
  .why-grid,
  .client-categories,
  .testimonials-grid { gap: 14px; }
  .client-logos-grid { gap: 8px; }
  .why-card::before { left: 22px; }
}

/* ============================================================
   HEADING WEIGHT REFINEMENT — pull the hero and section
   headings back from heavy/bold to medium so the brand reads
   as premium and considered (LBMA / private-banking tone)
   instead of consumer/start-up. We pair the lighter weights
   with a touch more letter-spacing where needed.
   ============================================================ */

/* Base headings — Inter Medium, slightly tighter tracking */
h1, h2, h3 {
  font-weight: 500;
  letter-spacing: -0.015em;
}
h4, h5 { font-weight: 500; }

/* Strong inline emphasis stays moderate (not a bold beacon) */
strong, b { font-weight: 600; }

/* Hero title — large display, refined medium weight */
.hero-title {
  font-weight: 500;
  letter-spacing: 0.02em;
}
.hero-title-sub {
  font-weight: 300;       /* already light, keep */
  letter-spacing: 0.32em; /* a touch wider for elegance */
}

/* Page headers (every page-specific hero) */
.products-hero h1,
.svc-cat-header h2,
.svc-header h2,
.why-header h2,
.coll-header h2,
.about-text h2,
.sp-cases-header h2,
.cta-band h2,
.srv-detail-side h2,
.rt-title { font-weight: 500; }

/* Card / tile titles — sit at medium so they don't shout */
.svc-card .svc-title,
.coll-name,
.testimonial-card .tc-name,
.srv-aside-title,
.sp-case h3,
.sp-step h3,
.svc-cat-num { font-weight: 600; }   /* small caps stay 600 for legibility */

/* Service catalogue cards: now sans-serif at medium weight */
.svc-cat-card h3 { font-weight: 500; }

.why-card h4,
.client-cat .cc-title { font-weight: 500; }

/* Buttons — keep them readable but not chunky */
.btn-gold,
.btn-outline,
.nav-cta,
.svc-cat-view-all,
.coll-view-all { font-weight: 500; letter-spacing: 0.16em; }

/* Footer column titles — medium, not bold */
.footer-col-title { font-weight: 500; }

/* Stat blocks and big display numerals stay slightly stronger
   since they ARE the point of the block */
.stat-num,
.about-accent-num,
.sp-stat-num { font-weight: 500; }

/* ── Rates table — thin but slightly bold, with tabular nums ── */
.rt-th-v2 {
  font-weight: 500;
  letter-spacing: 0.2em;
}
.rt-row-v2 .rt-td-price {
  font-weight: 500;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.rt-detail-name { font-weight: 500; }
.rt-asset       { font-weight: 500; }

/* Mobile: keep the same lightened weight */
@media (max-width: 480px) {
  .rt-row-v2 .rt-td-price { font-weight: 500; }
}

/* ============================================================
   CONTACT PAGE — fully centered office block (form removed)
   ============================================================ */
.contact-center {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px 24px 24px;
  text-align: center;
}
.contact-center .label { margin-bottom: 10px; display: inline-block; }
.contact-center > .gold-rule { margin: 14px auto 28px; }
.contact-center h2 {
  margin-bottom: 40px;
}
.contact-info-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin: 0 auto 40px;
}
.contact-info-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.contact-info-row svg {
  width: 22px;
  height: 22px;
  color: var(--gold);
  flex-shrink: 0;
}
.contact-info-row > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-info-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
  font-weight: 600;
}
.contact-info-val {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.65;
}
.contact-info-val a {
  color: inherit;
  transition: color 0.2s;
}
.contact-info-val a:hover { color: var(--gold); }

.contact-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.contact-cta-row .btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 560px) {
  .contact-center { padding: 8px 16px 16px; }
}

/* ============================================================
   LIGHT-THEME LEGIBILITY OVERRIDES
   The original silver/blue brand tones were tuned for the dark
   theme. On the cream background they wash out. Pull them down
   to slate-blue values that read clearly while still feeling
   distinct from the gold treatment.
   ============================================================ */
.silver-spot       { color: #5A6B85; }
.silver-sell-color { color: #3D4E68; }
.silver-link       { color: #3D4E68; }
.silver-buy-color  { color: var(--text); }
.rt-td-price.silver-val,
.rt-row-v2 .rt-td-price.silver-val { color: #3D4E68; }
.silver-asset {
  color: #3D4E68;
  background: rgba(61, 78, 104, 0.08);
  border-color: rgba(61, 78, 104, 0.3);
}

/* ============================================================
   GLOBAL PARAGRAPH ALIGNMENT — justify body copy
   Default-aligned paragraphs render justified for a clean
   editorial column. Paragraphs that sit inside an explicitly
   centered container fall back to centered so headers and CTA
   bands keep their composition.
   ============================================================ */
p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}

/* Restore centering for paragraphs that should stay centered:
   page hero sub-text, CTA band copy, section header descriptions,
   contact info, etc. */
.products-hero p,
.cta-band p,
.contact-center p,
.contact-info-val,
.hero-subtitle,
.hero-inner p,
.svc-cat-header p,
.svc-header p,
.svc-cat-sub,
.why-header p,
.coll-header p,
.coll-sub,
.prod-section-hdr p,
.prod-section-sub,
.sp-cases-header p,
.clients-header p,
.globe-sub,
.about-text + p,
[style*="text-align:center"] p,
[style*="text-align: center"] p {
  text-align: center;
}

/* ============================================================
   HOME FAQ — 4-column grid of question cards with
   hover-revealed answers. Sits below the home services section,
   replaces the old single-line "common questions" note.
   ============================================================ */
.home-faq {
  margin-top: 64px;
}
.home-faq-header {
  text-align: center;
  margin-bottom: 40px;
}
.home-faq-header h3 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 500;
  margin: 12px 0 14px;
  letter-spacing: -0.01em;
}
.home-faq-sub {
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto;
  font-size: 0.95rem;
  text-align: center !important;   /* override the global p justify */
}
.home-faq-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* Card — collapsed state shows the question only */
.home-faq-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 20px;
  cursor: help;
  transition: background 0.3s var(--ease-gold),
              border-color 0.3s var(--ease-gold),
              transform 0.3s var(--ease-gold),
              box-shadow 0.3s var(--ease-gold);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.home-faq-card:hover,
.home-faq-card:focus-visible {
  background: var(--surface);
  border-color: rgba(31,78,121,0.45);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10,9,5,0.12);
  outline: none;
}

/* Header row: big number sits beside the question */
.home-faq-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.home-faq-num {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.85rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--blue);
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.25s;
}
.home-faq-card:hover .home-faq-num,
.home-faq-card:focus-visible .home-faq-num { color: var(--gold-dark); }

.home-faq-q {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.005em;
}

/* Answer — hidden by default, revealed on hover */
.home-faq-a {
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s var(--ease-gold),
              opacity 0.3s var(--ease-gold),
              margin-top 0.3s var(--ease-gold);
  margin-top: 0;
}
.home-faq-a p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  text-align: left !important;     /* short answer reads better left-aligned */
}
.home-faq-card:hover .home-faq-a,
.home-faq-card:focus-visible .home-faq-a {
  max-height: 220px;
  opacity: 1;
  margin-top: 14px;
}

.home-faq-cta {
  margin-top: 32px;
  text-align: center;
}
.home-faq-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: border-color 0.25s, letter-spacing 0.25s;
}
.home-faq-link:hover {
  border-bottom-color: var(--gold-dark);
  letter-spacing: 0.16em;
}

@media (max-width: 1100px) {
  .home-faq-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .home-faq-grid    { grid-template-columns: 1fr; gap: 14px; }
  .home-faq-card    { min-height: 0; padding: 22px 20px 24px; }
  .home-faq-card    .home-faq-a { max-height: none; opacity: 1; margin-top: 14px; }
}

/* ============================================================
   ABOUT PAGE — per-background heading contrast tune-up
   The page sits on the cream-veiled fire video. Most h1/h2/h3
   use var(--text) (black) and read fine, but a few gold-accent
   bits get lost in the warm tone. Adjust just those, scoped to
   #page-about so the rest of the site is untouched.
   ============================================================ */

/* "Malaysian gold." in the hero — gold-on-warm-cream blends.
   Pull it to a deeper amber-bronze so the emphasis stays but
   the colour reads cleanly on the veiled video. */
#page-about .about-text h2 .gold {
  color: var(--gold-dark);
}

/* "i. Our Vision" / "ii. Our Mission" eyebrow on .vm-block
   (light cream card) — gold blends with the card. Switch to
   the brand blue so it matches the rest of the eyebrows on the
   page (Section One · About, Section Two · Direction, etc.). */
#page-about .vm-eyebrow      { color: var(--blue); }
#page-about .vm-eyebrow-num  { color: var(--blue-dark); }

/* "Section Five · Assurance" sub-paragraph beneath the Quality
   heading is currently var(--text-muted) — bump to text so it's
   crisp against the warm gradient where it sits. */
#page-about .qual-steps + *,
#page-about section:not(#about) > .container > .fade-up + p {
  color: var(--text);
}

/* Quality step titles ("Source", "Refine", etc.) on .qual-step
   cards — already var(--text); make sure they're clearly bolder
   than the body text on cream cards. */
#page-about .qual-title { color: var(--text); }
#page-about .qual-num   { color: var(--gold-dark); }   /* darker for cream-card contrast */

/* Leadership card heading "Issaq Qaleesh" + team-stats numbers
   ts-num (the big "15" and "43") — already brand; bump the team
   stat numerals to gold-dark on cream cards for stronger read. */
#page-about .ts-num { color: var(--gold-dark); }

/* Profile-viewer headline + body on bg-2 — make sure the lead
   paragraph beneath "Read the full company profile." reads dark
   rather than washed-out muted */
#page-about #profile-viewer .container > .fade-up p {
  color: var(--text-muted);
}

/* Hero outline button — sits on the fiery video, needs higher
   contrast than gold-on-warm. Use off-white text with the gold
   accent preserved as the border. */
.hero-actions .btn-outline,
.hero-actions .hero-cta.btn-outline {
  color: #0A0905;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
.hero-actions .btn-outline:hover {
  background: var(--gold);
  color: #0A0905;
  text-shadow: none;
}

/* ============================================================
   BULLION SERVICES — per-panel hero imagery
   Each service detail panel renders its themed photograph as a
   full-bleed background with a strong cream veil so the panel
   text (heading, copy, aside card) stays fully readable. The
   tab rail and page-level surfaces are not affected.
   ============================================================ */
.srv-panel { position: relative; isolation: isolate; }

/* Base ::before holds the image (set per-panel below) */
.srv-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -2;
  pointer-events: none;
  opacity: 0.9;
}

/* Cream veil — denser over the text on the left, lighter on the
   right so the image character is clearly visible while the heading
   + body copy stay readable. */
.srv-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(234,235,220,0.82) 0%,
    rgba(234,235,220,0.72) 45%,
    rgba(234,235,220,0.50) 100%);
  z-index: -1;
  pointer-events: none;
}

/* Per-service backgrounds */
.srv-panel[data-srv-panel="brokerage"]::before     { background-image: url('../img/services/brokerage.jpg'); }
.srv-panel[data-srv-panel="storage"]::before       { background-image: url('../img/services/storage.jpg'); }
.srv-panel[data-srv-panel="consignment"]::before   { background-image: url('../img/services/consignment.jpg'); }
.srv-panel[data-srv-panel="refining"]::before      { background-image: url('../img/services/refining.jpg'); }
.srv-panel[data-srv-panel="logistics"]::before     { background-image: url('../img/services/logistics.jpg'); }
.srv-panel[data-srv-panel="buyback"]::before       { background-image: url('../img/services/buyback.jpg'); }
.srv-panel[data-srv-panel="financing"]::before     { background-image: url('../img/services/financing.jpg'); }
.srv-panel[data-srv-panel="retail-bars"]::before   { background-image: url('../img/services/retail-bars.jpg'); }
.srv-panel[data-srv-panel="certificate"]::before   { background-image: url('../img/services/certificate.jpg'); }
.srv-panel[data-srv-panel="purchase-plan"]::before { background-image: url('../img/services/purchase-plan.jpg'); }
.srv-panel[data-srv-panel="testing"]::before       { background-image: url('../img/services/testing.jpg'); }

/* Strengthen the rates-row meta line + small detail labels
   so they don't get lost on cream */
.rt-detail-unit  { color: var(--text-muted); opacity: 0.85; }
.rt-meta,
.rt-date,
.rt-time         { color: var(--text); }
.rt-status-text  { color: var(--text-muted); }

/* ============================================================
   GLOBAL REACH — interactive client world map
   ============================================================ */
.globe-sub {
  max-width: 640px;
  margin: 16px auto 0;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.6;
}

.globe-card {
  margin: 40px 0 0;
  padding: 28px 28px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

#client-world-map.globe-map {
  width: 100%;
  height: 520px;
  position: relative;
}

/* ── jsvectormap theme overrides ── */
.globe-map .jvm-container {
  background: transparent !important;
}
.globe-map .jvm-tooltip {
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--gold);
  padding: 10px 14px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  pointer-events: none;
}
.globe-map .jvm-tooltip strong {
  display: block;
  color: var(--gold);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.globe-map .jvm-zoom-btn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
}
.globe-map .jvm-zoom-btn:hover { background: var(--bg-2); }

/* ── Legend ── */
.globe-legend {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.globe-legend-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  flex-shrink: 0;
}
.globe-legend-bar {
  flex: 1;
  min-width: 200px;
  max-width: 360px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(31,78,121,0.18) 0%,
    rgba(31,78,121,0.55) 40%,
    rgba(46,107,168,0.85) 70%,
    var(--gold) 100%);
}
.globe-legend-ticks {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  flex: 1;
  min-width: 200px;
  max-width: 360px;
}

/* ── Quick stats row beneath map ── */
.globe-stats {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.globe-stat {
  padding: 22px 20px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.globe-stat:last-child { border-right: 0; }
.globe-stat-num {
  font-family: 'Inter', sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--blue-dark);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 8px;
}
.globe-stat-lbl {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 900px) {
  .globe-card  { padding: 18px 16px 22px; }
  #client-world-map.globe-map { height: 380px; }
  .globe-stats { grid-template-columns: 1fr; }
  .globe-stat  { border-right: 0; border-bottom: 1px solid var(--border); }
  .globe-stat:last-child { border-bottom: 0; }
  .globe-legend { gap: 12px; }
  .globe-legend-ticks { flex-basis: 100%; }
}
@media (max-width: 560px) {
  #client-world-map.globe-map { height: 320px; }
  .globe-stat-num { font-size: 1.6rem; }
}

/* ── "Contact" tag (replaces numeric Buy prices everywhere) ── */
.contact-tag {
  color: var(--gold) !important;
  font-style: italic;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
  font-variant-numeric: normal !important;
  opacity: 0.85;
  font-size: 0.9em;            /* slightly smaller than the sell numerals */
}
.rt-row-v2 .rt-td-price.contact-tag {
  font-size: 1.05rem;          /* keep the rates table cell a touch larger */
}
.ws-price-val.contact-tag {
  font-size: 1.15rem !important;   /* matches the new lighter sell-price size */
  letter-spacing: 0.04em;
}

/* ============================================================
   ABOUT PAGE (re-built from 2026 company profile)
   ============================================================ */

.about-text .about-lead {
  font-size: 1.1rem;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 22px;
}

/* About-stats: 3-column unified strip — single rounded surface with
   thin internal dividers (no gap, so the warm video background can't
   leak between the cards) */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.about-stats .stat-block {
  padding: 20px 18px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  text-align: left;
}
.about-stats .stat-block:last-child { border-right: 0; }
.about-stats .stat-num {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.4rem;
  color: var(--gold);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.about-stats .stat-label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── VISION & MISSION ── */
.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.vm-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px;
}
.vm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.vm-eyebrow-num {
  font-style: italic;
  color: var(--gold-dark);
}
.vm-block h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.2;
  font-weight: 500;
  margin-bottom: 16px;
}
.vm-block > p {
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 0.95rem;
}
.vm-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.vm-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  position: relative;
}
.vm-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 1px;
  background: var(--gold);
}
.vm-list li strong {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}
.vm-list li span {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

/* ── LEADERSHIP ── */
.leader-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.leader-card,
.team-stats {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  height: 100%;          /* fill the row so both columns match height */
}
/* Push the credentials footer to the bottom of the leader card so
   the full height is used naturally instead of leaving a gap */
.leader-card { justify-content: space-between; }
.leader-card .leader-meta {
  display: flex;
  flex-direction: column;
  flex: 1;                       /* fill space between top and footer */
}

/* Credentials strip at the bottom of the leader card */
.leader-foot {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.leader-foot-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 14px;
}
.leader-foot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.leader-foot-chips span {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.leader-meta h3 {
  font-size: 1.85rem;
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  order: 1;              /* name on top */
}
.leader-meta .label {
  margin-bottom: 18px;
  display: inline-block;
  order: 2;              /* title under the name */
  align-self: flex-start;
}
.leader-meta p {
  color: var(--text-muted);
  line-height: 1.9;
  font-size: 1rem;
  margin-bottom: 22px;
  max-width: 64ch;
  order: 3;              /* body paragraphs after name + title */
}
.leader-meta p:last-child { margin-bottom: 0; }

.team-stats { gap: 14px; }
.ts-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-2);
}
.ts-num {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
  min-width: 60px;
}
.ts-title {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 4px;
  font-weight: 600;
}
.ts-row p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.ts-ops .label { margin-bottom: 10px; display: block; }
.ts-ops ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}
.ts-ops li {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding-left: 14px;
  position: relative;
}
.ts-ops li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* ── QUALITY STEPS ── */
.qual-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: qstep;
}
.qual-step {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  position: relative;
}
.qual-num {
  display: inline-block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold-dark);
  margin-bottom: 14px;
}
.qual-title {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.qual-step p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   COMPANY PROFILE VIEWER (slider)
   ============================================================ */
.cp-stage {
  max-width: 880px;
  margin: 0 auto;
}

.cp-frame {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  align-items: stretch;
  gap: 16px;
  min-height: 560px;
}
.cp-canvas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  position: relative;
  /* Hold a 297×420 (A4) ratio so the box never collapses while images load */
  aspect-ratio: 297 / 420;
}
.cp-canvas img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 0.28s var(--ease-gold), transform 0.28s var(--ease-gold);
}
.cp-canvas.is-changing img { opacity: 0; transform: scale(0.985); }

/* Prev / Next arrows */
.cp-nav {
  align-self: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(201,168,76,0.06);
  border: 1px solid var(--border);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s var(--ease-gold);
  flex-shrink: 0;
}
.cp-nav svg { width: 20px; height: 20px; }
.cp-nav:hover {
  background: rgba(201,168,76,0.14);
  border-color: var(--gold);
}
.cp-nav:active { transform: scale(0.94); }
.cp-nav:disabled,
.cp-nav[aria-disabled="true"] {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Toolbar under viewer */
.cp-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin-top: 22px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cp-counter {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 52px;
}
.cp-counter .cp-divider {
  color: var(--text-dim);
  margin: 0 4px;
}
.cp-counter #cp-total { color: var(--text-muted); }

.cp-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.cp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(201,168,76,0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.22s, transform 0.22s var(--ease-gold);
}
.cp-dot:hover { background: rgba(201,168,76,0.45); }
.cp-dot.active {
  background: var(--gold);
  transform: scale(1.3);
}

.cp-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cp-download {
  padding: 10px 20px !important;
  font-size: 0.72rem !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cp-dl-icon { width: 14px; height: 14px; }

/* Mobile / tablet adjustments */
@media (max-width: 900px) {
  .vm-grid,
  .leader-grid { grid-template-columns: 1fr; gap: 18px; }
  .qual-steps { grid-template-columns: repeat(2, 1fr); }
  .about-stats { grid-template-columns: 1fr; }
  /* Stack vertically on small screens with bottom dividers between rows */
  .about-stats .stat-block { border-right: 0; }
  .about-stats .stat-block:not(:last-child) { border-bottom: 1px solid var(--border); }

  .cp-frame { padding: 18px; gap: 8px; min-height: 0; }
  .cp-nav { width: 38px; height: 38px; }

  .cp-toolbar {
    grid-template-columns: auto auto;
    grid-template-areas: 'count action' 'dots dots';
    row-gap: 14px;
  }
  .cp-counter { grid-area: count; }
  .cp-actions { grid-area: action; justify-self: end; }
  .cp-dots    { grid-area: dots; }
}
@media (max-width: 560px) {
  .qual-steps { grid-template-columns: 1fr; }
  .ts-ops ul  { grid-template-columns: 1fr; }
  .leader-card,
  .team-stats,
  .vm-block { padding: 26px 22px; }
  .cp-dots { gap: 6px; }
  .cp-dot  { width: 7px; height: 7px; }
}

/* ============================================================
   WHOLESALE CARDS — equal column heights, no price wrap
   The gold price (RM 588,333.32) used to wrap to two lines,
   making the gold card visibly taller than silver. Force
   single-line prices, stretch the cards to equal height, and
   anchor "Enquire Now" at the bottom of each tile.
   ============================================================ */

/* Both cards stretch to the same row height */
.ws-clean-grid { align-items: stretch; }
.ws-clean { align-items: stretch; }

/* Right-side info column: stretches and pushes Enquire to bottom */
.ws-info {
  flex: 1;
  min-width: 0;            /* lets long text shrink instead of overflow */
  justify-content: space-between;
}

/* Slightly lighter, slightly smaller price — fits on one line and
   matches the new "thin-but-slightly-bold" treatment elsewhere */
.ws-price-val {
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em;
  white-space: nowrap !important;
}
.ws-spot-val { font-weight: 500; }
.ws-title    { font-weight: 500; }

/* Tighten the prices grid a touch so both blocks sit comfortably */
.ws-prices { gap: 18px; }

@media (max-width: 560px) {
  .ws-price-val { font-size: 1.05rem !important; }
}

/* ============================================================
   HOME PAGE · MOBILE OPTIMISATION (iPhone 16 Pro · 393px baseline)
   Appended last so it wins the cascade over earlier breakpoints.
   Smaller phones inherit the same rules and adapt fluidly.
   ============================================================ */

/* ── Phones & tablets (<=768px) ─────────────────────────────── */
@media (max-width: 768px) {
  /* Body copy uses justified alignment on mobile to match the desktop
     editorial style (client preference for a neater look). Centered
     section intros keep their alignment via class-level rules. */
  p {
    text-align: justify;
    text-justify: inter-word;
  }
  /* Home "Common Questions" answer paragraphs are forced left-aligned
     at base; override on mobile to match the justified body style. */
  .home-faq-a p { text-align: justify !important; }

  /* Section headers were stuck at clamp(2.4rem …) with no mobile
     override, so they shouted on small screens. Bring them down to a
     prominent-but-balanced size (tablets keep the upper end). */
  .rt-title,
  .svc-header h2,
  .svc-cat-header h2,
  .coll-header h2,
  .why-header h2 {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    line-height: 1.18;
  }

  /* Live clock + meta row: keep it compact and let it wrap cleanly */
  .rt-time { font-size: 1.2rem; }

  /* Mobile dropdown menu: translucent cream glass matching the
     header (#navbar) instead of the near-opaque white panel. */
  .nav-mobile {
    background: rgba(244, 245, 232, 0.78);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid rgba(10, 9, 5, 0.08);
  }
  /* Keep links legible on the now-translucent glass; smaller item text */
  .nav-mobile a { color: #0A0905; font-size: 0.8rem; }
  /* Align "Bullion Services" row with the other items (same left
     padding + height) instead of sitting 4px left at a shorter height. */
  .nav-mobile-group > summary { font-size: 0.8rem; padding: 18px 4px; min-height: 44px; }
  .nav-mobile-group > a { font-size: 0.7rem; }

  /* Larger company logo on mobile, header + footer (desktop untouched) */
  :root { --nav-h: 66px; }
  #navbar .nav-logo img { height: 56px; }
  .footer-brand .nav-logo img { height: 76px; }

  /* Footer menu: smaller item text and tight, balanced spacing */
  footer .footer-grid { gap: 28px; }
  footer .footer-col ul { gap: 0; }
  footer .footer-col ul li a { font-size: 0.8rem; min-height: 30px; line-height: 1.3; }
  footer .footer-col-title { margin-bottom: 10px; }
}

/* ── Phones only (<=480px, covers 393px iPhone 16 Pro) ──────── */
@media (max-width: 480px) {
  /* Scale headlines down to true phone size (desktop untouched). */
  .hero-title { font-size: clamp(2rem, 11vw, 2.5rem); }
  .rt-title,
  .svc-header h2,
  .svc-cat-header h2,
  .coll-header h2,
  .why-header h2 { font-size: 1.5rem; line-height: 1.22; }
  .home-faq-header h3 { font-size: 1.35rem; }
  .svc-card .svc-title { font-size: 1.15rem; }

  /* Collections: keep the scannable 2-up shop grid instead of the
     full-width single column the old <=420px rule forced. */
  .coll-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .coll-img-wrap { height: 150px; }
  .coll-name { font-size: 0.9rem; }
  .coll-cat  { font-size: 0.66rem; }

  /* Full service catalogue: 12 items as a compact 2-up tile grid
     (title + icon only) instead of 12 tall single-column cards.
     Descriptions are secondary on mobile — the whole tile is a link. */
  .svc-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-cat-card { padding: 18px 14px 16px; }
  .svc-cat-card p,
  .svc-cat-arrow { display: none; }
  .svc-cat-icon { width: 26px; height: 26px; margin-bottom: 12px; }
  .svc-cat-card h3 { font-size: 0.9rem; margin-bottom: 0; }
  .svc-cat-num { top: 12px; right: 12px; }

  /* Tighten vertical rhythm on phones so sections sit neatly together
     instead of separated by large stacked paddings (was up to ~112px
     between sections). Desktop spacing is unaffected. */
  section { padding: 36px 0; }
  #rates-table { padding: 40px 0 32px; }
  #services    { padding: 40px 0; }
  #collections { padding: 40px 0; }

  /* Trim the gap between a section's title block and its content. */
  .svc-header   { margin-bottom: 28px; }
  .why-header   { margin-bottom: 28px; }
  .svc-cat-header,
  .coll-header  { margin-bottom: 24px; }
  .home-faq        { margin-top: 40px; }
  .home-faq-header { margin-bottom: 28px; }

  /* "Why" cards (Home: "The Souk Standard" + About: "What Sets Us Apart"):
     compact header — icon + h4 share the same row, description spans
     full width below. */
  .why-card {
    padding: 18px 20px 20px;
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
  }
  .why-icon {
    width: 36px; height: 36px;
    margin: 0;
    grid-column: 1; grid-row: 1;
    align-self: center;
  }
  .why-card h4 {
    grid-column: 2; grid-row: 1;
    margin: 0;
    align-self: center;
  }
  .why-card p {
    grid-column: 1 / -1;
    margin: 0;
  }

  /* "What We Offer" service cards: compact header — icon + tag + title
     share the top row instead of stacking, then desc / points / actions
     span the full width below. Saves a lot of vertical space. */
  #services .svc-card {
    padding: 18px 18px 22px;
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 14px;
    row-gap: 4px;
    align-items: start;
  }
  #services .svc-icon {
    width: 52px; height: 52px;
    margin: 0;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }
  #services .svc-title {
    grid-column: 2; grid-row: 1;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
    align-self: end;
  }
  #services .svc-tag {
    grid-column: 2; grid-row: 2;
    margin: 0;
    justify-self: start;   /* shrink the pill to fit its text */
    align-self: start;
  }
  #services .svc-desc,
  #services .svc-points,
  #services .svc-actions {
    grid-column: 1 / -1;
  }
  #services .svc-desc { margin-top: 10px; font-size: 0.88rem; line-height: 1.55; }
  #services .svc-points { margin-top: 6px; }
  #services .svc-points li { font-size: 0.85rem; min-height: 24px; }
  #services .svc-actions { margin-top: 14px; }
}

/* ============================================================
   ABOUT PAGE · MOBILE OPTIMISATION (phone-only, desktop untouched)
   ============================================================ */
@media (max-width: 480px) {
  /* Headings were 26–30px; bring them in line with the home page (~24px). */
  #page-about section h2 { font-size: 1.5rem; line-height: 1.2; }
  #page-about .leader-card h3 { font-size: 1.4rem; }      /* was 30px */
  #page-about .ts-num { font-size: 1.7rem; }              /* was 35px */
  #page-about .about-accent-num { font-size: 1.9rem; }    /* "2024" accent, was 35px */

  /* The centred section headers carried inline margin-bottom of 56/48px,
     leaving a big gap before their content on phones. Tighten it. */
  #page-about section .container > div[style*="margin-bottom"] { margin-bottom: 28px !important; }
}

/* ============================================================
   PRODUCTS PAGE · MOBILE OPTIMISATION (phone-only, desktop untouched)
   ============================================================ */
@media (max-width: 480px) {
  #page-products .prod-section { padding: 36px 0; }        /* was 56px */
  #page-products h1 { font-size: 1.7rem; line-height: 1.15; }   /* was 32px */
  #page-products section h2 { font-size: 1.45rem; line-height: 1.2; }  /* was 26px */
  #page-products .prod-section-hdr { margin-bottom: 28px; }      /* was 40px */
}

/* ============================================================
   SERVICES PAGE · MOBILE OPTIMISATION (phone-only, desktop untouched)
   ============================================================ */
@media (max-width: 480px) {
  #page-services .srv-panel { padding: 36px 0 40px; }   /* was 56/72px */
  #page-services h1 { font-size: 1.7rem; line-height: 1.15; }   /* was 32px */
  #page-services h2 { font-size: 1.4rem; line-height: 1.2; }    /* was 27px */
  /* Slimmer body text inside each service panel so justified
     paragraphs don't show big inter-word gaps on narrow columns. */
  #page-services .srv-panel p { font-size: 0.9rem; line-height: 1.65; }
}

/* ============================================================
   SURAT PAJAK PAGE · MOBILE OPTIMISATION (phone-only, desktop untouched)
   ============================================================ */
@media (max-width: 480px) {
  #page-surat-pajak h1 { font-size: 1.7rem; line-height: 1.15; }  /* was 32px */
  #page-surat-pajak h2 { font-size: 1.45rem; line-height: 1.2; }  /* was 27-30px */
  /* Slimmer body text so justified paragraphs don't show big
     inter-word gaps on narrow columns. */
  #page-surat-pajak .sp-intro-text p,
  #page-surat-pajak .products-hero p,
  #page-surat-pajak section > .container > p { font-size: 0.9rem; line-height: 1.65; }

  /* "How It Works" step cards: number badge + heading share the same
     row, and the badge shrinks to match the heading height. */
  #page-surat-pajak .sp-step {
    padding: 18px 16px 20px;
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
  }
  #page-surat-pajak .sp-step-num {
    width: 30px; height: 30px;
    font-size: 0.95rem;
    margin: 0;
    grid-column: 1; grid-row: 1;
    align-self: center;
  }
  #page-surat-pajak .sp-step h3 {
    grid-column: 2; grid-row: 1;
    margin: 0;
    align-self: center;
    text-align: left;
    justify-self: start;
  }
  #page-surat-pajak .sp-step p {
    grid-column: 1 / -1;
    margin: 0;
  }

  /* "Common Situations We Handle" cards: number label sits beside the
     heading, description spans full width below. */
  #page-surat-pajak .sp-case {
    padding: 16px 16px 18px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 6px;
    align-items: baseline;     /* text-baseline alignment so 01 sits with the heading */
  }
  #page-surat-pajak .sp-case-num {
    grid-column: 1; grid-row: 1;
    margin: 0;
    line-height: 1.35;         /* match the heading line-height for clean baselines */
  }
  #page-surat-pajak .sp-case h3 {
    grid-column: 2; grid-row: 1;
    margin: 0;
    text-align: left;
    justify-self: start;
    font-size: 0.9rem;         /* match the description paragraph size */
    line-height: 1.35;
  }
  #page-surat-pajak .sp-case p {
    grid-column: 1 / -1;
    margin: 0;
  }
}

/* ============================================================
   CLIENTS PAGE · MOBILE OPTIMISATION (phone-only, desktop untouched)
   ============================================================ */
@media (max-width: 480px) {
  #page-clients h1 { font-size: 1.7rem; line-height: 1.15; }   /* was 32px */
  #page-clients h2 { font-size: 1.45rem; line-height: 1.2; }   /* was 26px */
  #page-clients .clients-header,
  #page-clients .client-categories { margin-bottom: 28px; }    /* was 60px */
  /* Consistent, tight top gap on every section header so each block
     lines up with the same visual rhythm. */
  #page-clients .clients-header { margin-top: 20px !important; }   /* was 32-80px */
  #page-clients .globe-card,
  #page-clients .testimonials-grid { margin-top: 16px !important; }/* tighten too */
  /* Remove the wrapping section's top padding so the first
     "Client Segments" header sits at the same 20px gap as the others
     instead of an extra 36px from section padding. flow-root contains
     the child margin so it doesn't collapse out and expose the body
     background (which would read as a 1-2px tinted line). */
  #page-clients section { padding-top: 0; display: flow-root; }
  /* Drop the hero's bottom border so the hero blends seamlessly into
     the Client Segments section (same background colour). */
  #page-clients .products-hero { border-bottom: 0; }

  /* "Who We Serve" cards: icon sits beside the title, description spans below. */
  #page-clients .client-cat {
    padding: 18px 18px 20px;
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 14px;
    row-gap: 6px;
    align-items: center;
  }
  #page-clients .client-cat > svg {
    width: 36px; height: 36px;
    margin: 0;
    grid-column: 1; grid-row: 1;
    align-self: center;
  }
  #page-clients .client-cat .cc-title {
    grid-column: 2; grid-row: 1;
    margin: 0;
    align-self: center;
    text-align: left;
    justify-self: start;
  }
  #page-clients .client-cat .cc-desc {
    grid-column: 1 / -1;
    margin: 0;
    text-align: justify;
    text-justify: inter-word;
    font-size: 0.85rem;       /* slimmer text so justified gaps stay tight */
    line-height: 1.6;
  }

  /* "What Our Clients Say" testimonials: more compact and neat */
  #page-clients .testimonial-card { padding: 20px 18px 18px; }
  #page-clients .tc-quote {
    font-size: 0.85rem;
    line-height: 1.6;
    text-align: justify;
    text-justify: inter-word;
    margin: 0 0 14px;
  }
  #page-clients .tc-author { gap: 8px; }
  #page-clients .tc-avatar {
    width: 26px; height: 26px;
    font-size: 0.6rem;
  }
  #page-clients .tc-name { font-size: 0.78rem; line-height: 1.3; }
  #page-clients .tc-role { font-size: 0.62rem; line-height: 1.3; letter-spacing: 0.12em; }
}

/* ============================================================
   CONTACT PAGE · MOBILE OPTIMISATION (phone-only, desktop untouched)
   ============================================================ */
@media (max-width: 480px) {
  #page-contact h1 { font-size: 1.7rem; line-height: 1.15; }   /* was 32px */
  #page-contact h2 { font-size: 1.45rem; line-height: 1.2; }   /* was 26px */
  #page-contact .contact-info-grid { margin-bottom: 28px; }    /* was 40px */
}

/* ── Respect reduced-motion preference (accessibility) ──────── */
@media (prefers-reduced-motion: reduce) {
  .wa-fab-pulse { animation: none; }
  .fade-up { opacity: 1 !important; transform: none !important; }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}