/* ============================================================
   1635 RESOURCES — V2 bright sub-block layer
   Loads AFTER styles.css, overrides only the sub-block colors.
   Base navy is preserved per stakeholder feedback.
   ============================================================ */

:root {
  /* Six wow colors for sub-blocks against the navy field */
  --v2-cyan:    #1B5DD1;  /* Exploration */
  --v2-red:     #E63946;  /* Mining */
  --v2-green:   #22C46A;  /* Re-harvest */
  --v2-orange:  #FF9200;  /* Processing */
  --v2-purple:  #7B4FFF;  /* Custody */
  --v2-yellow:  #FFC83D;  /* Capital */
  --v2-magenta: #FF3DA1;  /* extra for metal cards */
  --v2-lime:    #C6F432;  /* extra for metal cards */
  --v2-ink:     #061E22;  /* text on light tiles */
  --v2-on-dark: #FFFFFF;  /* text on dark tiles */
}

/* ----------------------------------------------------------
   Capability suite — the 6 "wow" tiles
   ---------------------------------------------------------- */
.cap-grid {
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 14px;
  overflow: visible;
}
.cap {
  border-radius: 10px;
  padding: 30px;
  position: relative;
  overflow: hidden;
  color: var(--v2-on-dark);
  box-shadow: 0 18px 36px -18px rgba(6,30,34,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cap:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 48px -16px rgba(6,30,34,.55);
  background: inherit; /* override the V1 hover that went cream */
}
.cap .num,
.cap h3,
.cap p { color: var(--v2-on-dark); }
.cap .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,.85);
}
.cap h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; font-size: 24px; }
.cap p { color: rgba(255,255,255,.9); font-size: 14.5px; }
.cap .tag {
  color: var(--v2-on-dark);
  background: rgba(0,0,0,.22);
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 700;
}

/* Big translucent number watermark */
.cap::before {
  content: attr(data-watermark);
  position: absolute;
  right: -12px;
  bottom: -38px;
  font-family: var(--serif);
  font-size: 180px;
  line-height: 1;
  color: rgba(255,255,255,.10);
  font-weight: 500;
  letter-spacing: -.04em;
  pointer-events: none;
}

/* Six distinct colors (children in order) */
.cap:nth-child(1) { background: var(--v2-cyan);   color: var(--v2-ink); }
.cap:nth-child(2) { background: var(--v2-red); }
.cap:nth-child(3) { background: var(--v2-green);  color: var(--v2-ink); }
.cap:nth-child(4) { background: var(--v2-orange); color: var(--v2-ink); }
.cap:nth-child(5) { background: var(--v2-purple); }
.cap:nth-child(6) { background: var(--v2-yellow); color: var(--v2-ink); }

/* For dark-text tiles, soften the white-on-X children */
.cap:nth-child(1) .num,{ color: rgba(6,30,34,.7); }
.cap:nth-child(3) .num,{ color: rgba(6,30,34,.7); }
.cap:nth-child(4) .num,
.cap:nth-child(6) .num { color: rgba(6,30,34,.7); }
.cap:nth-child(1) h3,{ color: rgba(6,30,34,.7); }
.cap:nth-child(3) h3,{ color: rgba(6,30,34,.7); }
.cap:nth-child(4) h3,
.cap:nth-child(6) h3 { color: var(--v2-ink); }
.cap:nth-child(1) p,{ color: rgba(6,30,34,.7); }
.cap:nth-child(3) p,{ color: rgba(6,30,34,.7); }
.cap:nth-child(4) p,
.cap:nth-child(6) p { color: rgba(6,30,34,.78); }
.cap:nth-child(1) .tag,{ color: rgba(6,30,34,.7); }
.cap:nth-child(3) .tag,{ color: rgba(6,30,34,.7); }
.cap:nth-child(4) .tag,
.cap:nth-child(6) .tag { color: var(--v2-ink); background: rgba(255,255,255,.5); }
.cap:nth-child(1)::before,
.cap:nth-child(3)::before,
.cap:nth-child(4)::before,
.cap:nth-child(6)::before { color: rgba(6,30,34,.12); }

/* ----------------------------------------------------------
   Metal cards — Critical Minerals Division
   ---------------------------------------------------------- */
/* Override the V1 muted variants with vivid Nestlé-style colors */

.metal-card { color: var(--v2-on-dark); }
.metal-card .name,
.metal-card .desc,
.metal-card .ir,
.metal-card .sym { color: inherit; }

/* default navy stays for unspecified */
.metal-card.terracotta { background: var(--v2-red); color: #fff; }
.metal-card.teal       { background: var(--v2-cyan); color: var(--v2-ink); }
.metal-card.gold       { background: var(--v2-yellow); color: var(--v2-ink); }

/* Row 1 — Sb, Ti, V, Cu */
#critical .metals.row1 .metal-card:nth-child(1) { background: var(--v2-red); }       /* Sb */
#critical .metals.row1 .metal-card:nth-child(2) { background: var(--v2-cyan);  color: var(--v2-ink); } /* Ti */
#critical .metals.row1 .metal-card:nth-child(3) { background: var(--v2-purple); }    /* V */
#critical .metals.row1 .metal-card:nth-child(4) { background: var(--v2-orange); color: var(--v2-ink); }/* Cu */

/* Row 2 — Ga, Mn, Mo, Pd */
#critical .metals.row2 .metal-card:nth-child(1) { background: var(--v2-magenta); }    /* Ga */
#critical .metals.row2 .metal-card:nth-child(2) { background: var(--v2-green); color: var(--v2-ink); } /* Mn */
#critical .metals.row2 .metal-card:nth-child(3) { background: var(--v2-lime);  color: var(--v2-ink); } /* Mo */
#critical .metals.row2 .metal-card:nth-child(4) { background: var(--v2-yellow);color: var(--v2-ink); } /* Pd */

/* When a card has dark ink text, lift small labels appropriately */
.metal-card[style*="ink"], 
.metal-card { transition: transform .2s ease; }
.metal-card:hover { transform: translateY(-2px); }

/* ----------------------------------------------------------
   Pipeline strip — five blocks
   ---------------------------------------------------------- */
.pipe.t-1 { background: var(--v2-cyan);   color: var(--v2-ink); }
.pipe.t-2 { background: var(--v2-green);  color: var(--v2-ink); }
.pipe.t-3 { background: var(--v2-purple); color: #fff; }
.pipe.t-4 { background: var(--v2-red);    color: #fff; }
.pipe.t-5 { background: var(--v2-yellow); color: var(--v2-ink); }
.pipe .step { opacity: .9; }

/* ----------------------------------------------------------
   Federal financing fit — left-border accents become 4-color
   ---------------------------------------------------------- */
.fed:nth-child(1) { border-left-color: var(--v2-cyan); }
.fed:nth-child(2) { border-left-color: var(--v2-red); }
.fed:nth-child(3) { border-left-color: var(--v2-yellow); }
.fed:nth-child(4) { border-left-color: var(--v2-green); }
.fed { border-left-width: 6px; }

/* ----------------------------------------------------------
   Strategic backdrop bars — give variety per metal
   ---------------------------------------------------------- */
.reliance .bar-fill { background: var(--navy); }
.reliance .bar-row:nth-child(1) .bar-fill { background: var(--v2-red); }      /* Ti */
.reliance .bar-row:nth-child(2) .bar-fill { background: var(--v2-orange); color: var(--v2-ink); }   /* Mn */
.reliance .bar-row:nth-child(3) .bar-fill { background: var(--v2-magenta); }  /* Ga */
.reliance .bar-row:nth-child(4) .bar-fill { background: var(--v2-yellow); color: var(--v2-ink); }   /* Sb */
.reliance .bar-row:nth-child(5) .bar-fill { background: var(--v2-cyan); color: var(--v2-ink); }     /* Pt */
.reliance .bar-row:nth-child(6) .bar-fill { background: var(--v2-green); color: var(--v2-ink); }    /* Pd */
.reliance .bar-fill .desc { color: rgba(255,255,255,.85); }
.reliance .bar-row:nth-child(2) .bar-fill .desc,
.reliance .bar-row:nth-child(4) .bar-fill .desc,
.reliance .bar-row:nth-child(5) .bar-fill .desc,
.reliance .bar-row:nth-child(6) .bar-fill .desc { color: rgba(6,30,34,.78); }

/* ----------------------------------------------------------
   KPI strip — keep navy field but add accent slashes
   ---------------------------------------------------------- */
.kpi { position: relative; }
.kpi::before {
  content: '';
  position: absolute;
  top: 24px; left: 0;
  width: 4px; height: 28px;
  border-radius: 0 3px 3px 0;
}
.kpi:nth-child(1)::before { background: var(--v2-yellow); }
.kpi:nth-child(2)::before { background: var(--v2-cyan); }
.kpi:nth-child(3)::before { background: var(--v2-green); }
.kpi:nth-child(4)::before { background: var(--v2-magenta); }
.kpi .num small { color: var(--v2-yellow); }

/* ----------------------------------------------------------
   Precious metals spot strip — gold accent stays right
   ---------------------------------------------------------- */
.spot:nth-child(1) { border-color: rgba(255,200,61,.55); }   /* Au */
.spot:nth-child(2) { border-color: rgba(220,228,235,.45); }  /* Ag */
.spot:nth-child(3) { border-color: rgba(0,194,209,.55); }    /* Pt */
.spot:nth-child(1) .spot-sym { color: var(--v2-yellow); }
.spot:nth-child(2) .spot-sym { color: #DCE4EB; }
.spot:nth-child(3) .spot-sym { color: var(--v2-cyan); }

/* ----------------------------------------------------------
   CTA band — punchier gradient
   ---------------------------------------------------------- */
.cta-band {
  background:
    linear-gradient(135deg, rgba(11,45,52,.92), rgba(123,79,255,.78)),
    url('../images/facility/sag-mill.jpg') center / cover no-repeat;
}
.cta-band .btn { background: var(--v2-yellow); border-color: var(--v2-yellow); color: var(--v2-ink); }
.cta-band .btn:hover { background: #ffd766; border-color: #ffd766; }

/* ----------------------------------------------------------
   Hero — keep the same gorgeous landscape, just brighten the pill
   ---------------------------------------------------------- */
.hero-meta .pill {
  border-color: var(--v2-yellow);
  color: var(--v2-yellow);
  background: rgba(255,200,61,.10);
}
.hero-meta .pill .dot { background: var(--v2-yellow); }
.hero h1 em { color: var(--v2-cyan); }
.hero-cta .btn { background: var(--v2-yellow); border-color: var(--v2-yellow); color: var(--v2-ink); }
.hero-cta .btn:hover { background: #ffd766; border-color: #ffd766; }

/* Pipeline text contrast fix on dark tiles */
.pipe.t-3 .step,
.pipe.t-3 .title,
.pipe.t-3 .desc,
.pipe.t-4 .step,
.pipe.t-4 .title,
.pipe.t-4 .desc { color: #fff; }
.pipe.t-3 .step, .pipe.t-4 .step { color: rgba(255,255,255,.85); }
.pipe.t-3 .desc, .pipe.t-4 .desc { color: rgba(255,255,255,.88); }

/* Pipeline text on light tiles */
.pipe.t-1 .step, .pipe.t-2 .step, .pipe.t-5 .step { color: rgba(6,30,34,.7); }
.pipe.t-1 .title, .pipe.t-2 .title, .pipe.t-5 .title { color: var(--v2-ink); }
.pipe.t-1 .desc, .pipe.t-2 .desc, .pipe.t-5 .desc { color: rgba(6,30,34,.78); }

/* ============================================================
   METALLIC FINISHES — Sb gold, Cu copper, Pd royal blue
   Brushed-metal gradients with sheen highlight & matching
   linear glints, anchored to 1635 Capital Partners brand.
   ============================================================ */

/* Antimony — METALLIC GOLD (1635 Capital Partners brand gold) */
#critical .metals.row1 .metal-card:nth-child(1) {
  background:
    /* sheen highlight */
    linear-gradient(135deg,
      rgba(255,245,200,.55) 0%,
      rgba(255,245,200,0) 22%,
      rgba(255,245,200,0) 55%,
      rgba(255,245,200,.35) 68%,
      rgba(255,245,200,0) 78%),
    /* base metal gradient */
    linear-gradient(160deg,
      #F4D06B 0%,
      #E2B14A 28%,
      #C8902C 55%,
      #B27817 78%,
      #8E5A06 100%);
  color: #2C1F06;
  box-shadow:
    inset 0 1px 0 rgba(255,245,200,.6),
    inset 0 -2px 6px rgba(0,0,0,.15),
    0 18px 36px -18px rgba(180,120,0,.45);
  position: relative;
  overflow: hidden;
}
#critical .metals.row1 .metal-card:nth-child(1)::after {
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.04) 0 1px,
      transparent 1px 4px);
  pointer-events:none;
  mix-blend-mode: overlay;
}
#critical .metals.row1 .metal-card:nth-child(1) .sym,
#critical .metals.row1 .metal-card:nth-child(1) .name { color: #2C1F06; text-shadow: 0 1px 0 rgba(255,245,200,.45); }
#critical .metals.row1 .metal-card:nth-child(1) .ir { color: rgba(44,31,6,.78); }
#critical .metals.row1 .metal-card:nth-child(1) .desc { color: rgba(44,31,6,.82); }

/* Copper — METALLIC COPPER */
#critical .metals.row1 .metal-card:nth-child(4) {
  background:
    /* sheen highlight */
    linear-gradient(135deg,
      rgba(255,210,170,.55) 0%,
      rgba(255,210,170,0) 22%,
      rgba(255,210,170,0) 55%,
      rgba(255,210,170,.40) 68%,
      rgba(255,210,170,0) 78%),
    /* base copper gradient */
    linear-gradient(160deg,
      #E8A47C 0%,
      #D87B4A 22%,
      #B85A2B 48%,
      #8C3F1E 75%,
      #5B2811 100%);
  color: #FFEFE3;
  box-shadow:
    inset 0 1px 0 rgba(255,220,190,.45),
    inset 0 -2px 8px rgba(0,0,0,.22),
    0 18px 36px -18px rgba(160,70,30,.45);
  position: relative;
  overflow: hidden;
}
#critical .metals.row1 .metal-card:nth-child(4)::after {
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.05) 0 1px,
      transparent 1px 4px);
  pointer-events:none;
  mix-blend-mode: overlay;
}
#critical .metals.row1 .metal-card:nth-child(4) .sym,
#critical .metals.row1 .metal-card:nth-child(4) .name { color: #FFF1E5; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
#critical .metals.row1 .metal-card:nth-child(4) .ir { color: rgba(255,231,210,.82); }
#critical .metals.row1 .metal-card:nth-child(4) .desc { color: rgba(255,231,210,.88); }

/* Palladium — METALLIC ROYAL BLUE (1635 Capital Partners 43-101 navy) */
#critical .metals.row2 .metal-card:nth-child(4) {
  background:
    /* sheen highlight */
    linear-gradient(135deg,
      rgba(180,200,235,.45) 0%,
      rgba(180,200,235,0) 22%,
      rgba(180,200,235,0) 55%,
      rgba(180,200,235,.32) 68%,
      rgba(180,200,235,0) 78%),
    /* base royal blue gradient — 43-101 spec #0C2540 anchored */
    linear-gradient(160deg,
      #2D4870 0%,
      #1A3357 26%,
      #0C2540 56%,
      #061A33 80%,
      #02101F 100%);
  color: #F4F6F9;
  box-shadow:
    inset 0 1px 0 rgba(180,200,235,.30),
    inset 0 -2px 8px rgba(0,0,0,.30),
    0 18px 36px -18px rgba(12,37,64,.55);
  position: relative;
  overflow: hidden;
}
#critical .metals.row2 .metal-card:nth-child(4)::after {
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.05) 0 1px,
      transparent 1px 4px);
  pointer-events:none;
  mix-blend-mode: overlay;
}
#critical .metals.row2 .metal-card:nth-child(4) .sym,
#critical .metals.row2 .metal-card:nth-child(4) .name { color: #F4F6F9; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
#critical .metals.row2 .metal-card:nth-child(4) .ir { color: rgba(244,246,249,.78); }
#critical .metals.row2 .metal-card:nth-child(4) .desc { color: rgba(244,246,249,.86); }

/* Ensure the symbol & content sit ABOVE the ::after sheen overlay */
#critical .metal-card .sym,
#critical .metal-card .name,
#critical .metal-card .ir,
#critical .metal-card .desc { position: relative; z-index: 2; }