/* ==========================================================================
   NEXOMINERALS — cinematic site
   ========================================================================== */

:root {
  --black: #000000;
  --near: #080808;
  --graphite: #151515;
  --white: #ffffff;
  --off: #eaeaea;
  --muted: rgba(234, 234, 234, .58);
  --faint: rgba(234, 234, 234, .32);
  --line: rgba(234, 234, 234, .14);
  --copper: #b87333;
  --copper-lt: #d49a6a;

  --ff-display: 'Sora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ff-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --pad: clamp(20px, 4.2vw, 72px);
  --ease: cubic-bezier(.22, .68, .12, 1);
  --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--off);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, video, canvas, svg { display: block; }
em { font-style: normal; color: var(--faint); }
::selection { background: var(--copper); color: #000; }
:focus-visible { outline: 1px solid var(--copper-lt); outline-offset: 4px; }

/* ---------- Type ---------- */
.display {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: .9;
  font-size: clamp(3rem, 9vw, 9.5rem);
}
.display--hero { font-size: clamp(3.4rem, 12.5vw, 13.5rem); line-height: .86; }
.display--xl { font-size: clamp(2.4rem, 8.6vw, 9.4rem); }
.display--md { font-size: clamp(2.2rem, 5.4vw, 5.8rem); line-height: .95; }

.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .03em .1em; margin: 0 -.03em -.1em; }
.w__i { display: inline-block; will-change: transform; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 30px;
  font: 500 11px/1.2 var(--ff-body);
  text-transform: uppercase;
  color: var(--muted);
}

.lede {
  margin: 28px 0 0;
  max-width: 34ch;
  font-weight: 300;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- Logo ---------- */
.logo { display: block; height: 50px; width: auto; }

/* ---------- Intro ---------- */

.intro {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  background: var(--black);
  animation: introOut .8s ease 5s forwards;
}
html:not(.js) .intro { display: none; }
@keyframes introOut { to { opacity: 0; visibility: hidden; } }
.intro__mark img { display: block; width: clamp(120px, 12vw, 190px); height: auto; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 30px var(--pad);
  transition: background-color .7s var(--ease), padding .7s var(--ease), border-color .7s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(0, 0, 0, .25);
  padding-top: 18px; padding-bottom: 18px;
  border-bottom-color: rgba(234, 234, 234, .06);
}
.nav__brand { display: block; justify-self: start; }
.nav.is-scrolled .logo { height: 38px; }
.logo { transition: height .7s var(--ease); }
.nav__links { display: flex; gap: clamp(24px, 3.2vw, 52px); }
.nav__links a, .nav__cta {
  position: relative;
  font: 500 11px/1 var(--ff-body);
  text-transform: uppercase;
  color: rgba(234, 234, 234, .72);
  padding: 6px 0;
  transition: color .4s;
}
.nav__links a::after, .nav__cta::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--copper);
  transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--ease);
}
@media (hover: hover) { .nav__links a:hover, .nav__cta:hover { color: var(--white); } }
@media (hover: hover) { .nav__links a:hover::after, .nav__cta:hover::after { transform: scaleX(1); transform-origin: left; } }
.nav__right { justify-self: end; display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.nav__cta { color: var(--white); }
.lang { display: flex; align-items: center; gap: 6px; font: 500 11px/1 var(--ff-body); text-transform: uppercase; }
.lang a { color: var(--faint); padding: 6px 2px; transition: color .4s; }
.lang a.is-active { color: var(--white); }
@media (hover: hover) { .lang a:hover { color: var(--white); } }
.nav__toggle {
  display: none;
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font: 500 11px/1 var(--ff-body); text-transform: uppercase; color: var(--white);
}

.menu {
  position: fixed; inset: 0; z-index: 49;
  display: flex; align-items: flex-end;
  padding: 0 var(--pad) 12vh;
  background: var(--black);
  transform: translateY(-100%); visibility: hidden;
  transition: transform .7s var(--ease), visibility 0s linear .7s;
}
.menu nav { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 3.2vh, 30px); }
.menu a {
  position: relative; padding-bottom: 4px;
  font: 600 clamp(2rem, 9vw, 3.4rem)/1.05 var(--ff-display); text-transform: uppercase;
  color: rgba(234, 234, 234, .72);
  transition: color .4s;
}
.menu a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--copper);
  transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--ease);
}
.menu a.is-touched { color: var(--white); }
.menu a.is-touched::after { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) {
  .menu a:hover { color: var(--white); }
  .menu a:hover::after { transform: scaleX(1); transform-origin: left; }
}
.menu-open .menu { transform: none; visibility: visible; transition: transform .7s var(--ease), visibility 0s; }

@media (max-width: 899px) {
  .nav { grid-template-columns: 1fr auto; padding: 22px var(--pad); }
  .nav__links, .nav__cta { display: none; }
  .nav__right { gap: 22px; }
  .nav__toggle { display: block; }
}

/* ---------- Section dots ---------- */
.dots {
  position: fixed; right: clamp(14px, 2vw, 32px); top: 50%; z-index: 48;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px;
  mix-blend-mode: difference;
  opacity: 0; transition: opacity .8s var(--ease);
}
.dots.is-ready { opacity: 1; }
.dots button {
  position: relative; width: 16px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer;
}
.dots button::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  border: 1px solid rgba(234,234,234,.45);
  transition: background-color .6s var(--ease), border-color .6s var(--ease), transform .6s var(--ease);
}
@media (hover: hover) { .dots button:hover::after { border-color: var(--off); } }
.dots button.is-active::after { background: var(--off); border-color: var(--off); transform: scale(1.15); }
.menu-open .dots { opacity: 0; pointer-events: none; }
@media (max-width: 899px) {
  .dots { right: 4px; gap: 6px; }
  .dots button { width: 12px; height: 12px; }
  .dots button::after { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
}

/* ---------- Floating contact dock ---------- */
.dock {
  position: fixed; right: var(--pad); bottom: 24px; z-index: 47;
  display: flex; gap: 8px;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.dock.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.dock__btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 16px;
  background: rgba(8, 8, 8, .68);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(234, 234, 234, .2);
  color: var(--off);
  font: 500 12px/1 var(--ff-body); text-transform: uppercase;
  cursor: pointer;
  transition: border-color .5s var(--ease), color .5s var(--ease), background-color .5s var(--ease);
}
@media (hover: hover) { .dock__btn:hover, .dock__btn:focus-visible { border-color: var(--copper); color: var(--white); background: rgba(8, 8, 8, .86); } }
.dock__icon { display: block; width: 18px; height: 18px; flex: none; }
.dock__icon svg { width: 100%; height: 100%; display: block; }
/* contact colours: email white, WhatsApp green */
.dock__btn--email { background: #ffffff; border-color: #ffffff; color: #000000; }
@media (hover: hover) { .dock__btn--email:hover, .dock__btn--email:focus-visible { background: #eaeaea; border-color: #eaeaea; color: #000000; } }
.dock__btn--whatsapp { background: #25d366; border-color: #25d366; color: #ffffff; }
@media (hover: hover) { .dock__btn--whatsapp:hover, .dock__btn--whatsapp:focus-visible { background: #1fb959; border-color: #1fb959; color: #ffffff; } }
.dock--icons .dock__btn--email .dock__label { background: #ffffff; border-color: #ffffff; color: #000000; }
.dock--icons .dock__btn--whatsapp .dock__label { background: #25d366; border-color: #25d366; color: #ffffff; }

/* A · icons: stacked squares, label slides out on hover */
.dock--icons { flex-direction: row; }
.dock--icons .dock__btn { width: 44px; padding: 0; }
.dock--icons .dock__label {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  padding: 9px 12px; white-space: nowrap;
  background: rgba(8, 8, 8, .86); border: 1px solid rgba(234, 234, 234, .14);
  opacity: 0; transform: translate(-50%, 6px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
@media (hover: hover) { .dock--icons .dock__btn:hover .dock__label, .dock--icons .dock__btn:focus-visible .dock__label { opacity: 1; transform: translate(-50%, 0); } }

/* B · labels: two labelled buttons side by side */
.dock--labels .dock__btn { padding: 0 18px 0 14px; }

/* C · expand: one button that opens the options above it */
.dock--expand { flex-direction: column; align-items: flex-end; }
.dock__menu {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 0;
  max-height: 0; overflow: hidden; opacity: 0; transform: translateY(8px);
  transition: max-height .6s var(--ease), opacity .5s var(--ease), transform .6s var(--ease), margin .6s var(--ease);
}
.dock--expand.is-open .dock__menu { max-height: 120px; opacity: 1; transform: none; margin-bottom: 0; }
.dock--expand .dock__menu .dock__btn { justify-content: flex-start; min-width: 150px; }
.dock--expand.is-open .dock__toggle { border-color: var(--copper); }

@media (max-width: 899px) {
  .dock { right: 16px; bottom: 16px; }
  .logo, .nav.is-scrolled .logo { height: 38px; }
  .dock--labels .dock__btn { padding: 0 14px 0 12px; }
  .dock--icons .dock__label { display: none; }
}

/* ---------- Scene base ---------- */
.scene { position: relative; height: var(--vh); overflow: hidden; background: var(--black); }
.scene__media { position: absolute; inset: 0; will-change: transform; }
.media__inner { position: absolute; inset: 0; overflow: hidden; }
.media__inner canvas { width: 100%; height: 100%; }
.media__real {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.8s var(--ease);
}
.media__real.is-loaded { opacity: 1; }
.scene__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,0) 48%),
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%);
}
.scene__index {
  margin: 0;
  font: 500 11px/1 var(--ff-body); text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 01 Origin ---------- */
.origin .scene__media { transform-origin: 55% 56%; }
.origin .veil { position: absolute; inset: 0; background: #140a05; opacity: 0; pointer-events: none; }
.origin__content {
  position: absolute; left: var(--pad); right: var(--pad); bottom: max(15vh, 140px);
}
.origin__content .lede { margin-top: 34px; }
.origin__foot {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 36px;
  display: flex; justify-content: flex-start; align-items: flex-end;
}
.scroll-cue {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  color: var(--muted);
}
.scroll-cue svg { animation: cue 2.6s var(--ease) infinite; }
@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: .45; }
  50% { transform: translateY(8px); opacity: 1; }
}

/* ---------- 02 Material ---------- */
.material__visuals { position: absolute; inset: 0; will-change: transform; }
.material__layer { position: absolute; inset: 0; overflow: hidden; }
.material .scene__shade {
  background:
    linear-gradient(to right, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 40%);
}
.material__title { position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%); }
.mword { position: absolute; left: var(--pad); right: var(--pad); bottom: max(13vh, 140px); }
.js .mword, .js .material__layer:not([data-i="0"]) { visibility: hidden; }
.mword__title { font-size: clamp(2.2rem, 9vw, 9.5rem); line-height: .88; }
.mword__meta { margin: 0; font: 500 11px/1.4 var(--ff-body); text-transform: uppercase; color: var(--muted); }
.mword__idx { margin-bottom: 26px; color: var(--copper-lt); }
.mword__line { margin-top: 30px; text-transform: none; font-size: clamp(.95rem, 1.2vw, 1.15rem); font-weight: 300; }

.how__progress { height: 1px; background: var(--line); }
.how__progress i { display: block; height: 100%; background: var(--copper); transform: scaleX(0); transform-origin: left; }

/* ---------- 03 Markets ---------- */
.markets { background: var(--near); }
.map { position: absolute; inset: 0; }
.map__canvas, .map__routes { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__canvas { opacity: .35; }
.map__label { font: 500 10px var(--ff-body); fill: rgba(234,234,234,.78); }
.map__label--origin { fill: var(--copper-lt); }
.markets__title { position: absolute; left: var(--pad); top: 17vh; }
.markets::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(8,8,8,.85) 0%, rgba(8,8,8,0) 42%);
}
.markets__title { z-index: 2; }

/* ---------- 04 Trading ---------- */
.trading { background: var(--black); }
.trading__bg { position: absolute; inset: -4%; }
.trading__bg canvas { width: 100%; height: 100%; }
.trading__inner { position: absolute; inset: 0; padding: 17vh var(--pad) 12vh; }
.trading__head { transform-origin: 0 0; will-change: transform; }
.trading__triad {
  position: absolute; left: var(--pad); right: var(--pad); bottom: max(30vh, 250px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 48px);
}
.triad__item { position: relative; padding-top: 26px; }
.triad__rule { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--faint); }
.triad__item span { font: 500 11px/1 var(--ff-body); color: var(--copper-lt); }
.triad__item h3 {
  margin: 18px 0 0;
  font: 600 clamp(1.7rem, 4.2vw, 4.6rem)/.95 var(--ff-display);
  text-transform: uppercase;
}
.trading__copy {
  position: absolute; left: var(--pad); bottom: max(15vh, 140px); margin: 0;
  max-width: 44ch; font-weight: 300; font-size: clamp(.95rem, 1.15vw, 1.1rem); line-height: 1.6; color: var(--muted);
}

/* ---------- How we trade ---------- */
.how { position: relative; height: var(--vh); overflow: hidden; background: var(--near); }
.how__track { display: flex; height: 100%; width: max-content; will-change: transform; }
.how__intro { width: 46vw; padding: 20vh var(--pad) 0; flex: none; }
.how__panel {
  position: relative; flex: none;
  width: 58vw; padding: 20vh 5vw 14vh;
  display: flex; flex-direction: column; justify-content: space-between;
  border-left: 1px solid var(--line);
}
.how__num {
  font: 600 clamp(8rem, 21vw, 22rem)/.78 var(--ff-display);
  color: transparent;
  -webkit-text-stroke: 1px rgba(234,234,234,.2);
  transition: -webkit-text-stroke-color 1.2s var(--ease), color 1.2s var(--ease);
}
.how__panel.is-active .how__num { -webkit-text-stroke-color: var(--copper); }
.how__text { max-width: 30ch; opacity: .35; transform: translateY(18px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.how__panel.is-active .how__text { opacity: 1; transform: none; }
.how__text h3 { margin: 0 0 16px; font: 600 clamp(1.8rem, 3.4vw, 3.6rem)/1 var(--ff-display); text-transform: uppercase; }
.how__text p { margin: 0; font-weight: 300; font-size: clamp(1rem, 1.2vw, 1.15rem); color: var(--muted); }
.how__progress { position: absolute; left: var(--pad); right: var(--pad); bottom: 40px; }

@media (max-width: 899px) {
  .how { height: auto; }
  .how__track { flex-direction: column; width: auto; }
  .how__intro { width: auto; padding: 18vh var(--pad) 8vh; }
  .how__panel { width: auto; min-height: 64vh; padding: 8vh var(--pad); border-left: 0; border-top: 1px solid var(--line); }
  .how__num { font-size: 32vw; }
  .how__progress { display: none; }
}

/* ---------- Commodities ---------- */
.commod { position: relative; background: var(--black); }
.commod__head {
  display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 4vw;
  padding: 24vh var(--pad) 12vh;
}
.commod__head .lede { justify-self: end; }
.commod__body { display: grid; grid-template-columns: 54% 46%; }
.commod__stage { position: sticky; top: 0; height: var(--vh); overflow: hidden; background: var(--near); }
.commod__visual { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--ease); }
.commod__visual .media__inner { transform: scale(1.18); transition: transform 2.4s var(--ease); }
.commod__visual.is-shown { clip-path: inset(0 0 0 0); }
.commod__visual.is-shown .media__inner { transform: scale(1); }
.commod__caption {
  position: absolute; left: var(--pad); bottom: 36px; z-index: 3; margin: 0;
  font: 500 11px/1 var(--ff-body); color: var(--off);
}
.commod__list { list-style: none; margin: 0; padding: 0; }
.commod__row {
  min-height: var(--vh);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--pad) 0 6vw;
  opacity: .2; transition: opacity 1.1s var(--ease);
}
.commod__row.is-active { opacity: 1; }
.commod__n { font: 500 11px/1 var(--ff-body); color: var(--copper-lt); }
.commod__name {
  margin: 26px 0 0;
  font: 600 clamp(2.2rem, 3.8vw, 5.6rem)/.95 var(--ff-display);
  text-transform: uppercase;
}
.commod__line { margin: 26px 0 0; max-width: 32ch; font-weight: 300; font-size: clamp(1rem, 1.2vw, 1.15rem); color: var(--muted); }
.commod__meta {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 40px;
  font: 500 10px/1 var(--ff-body); text-transform: uppercase; color: var(--faint);
}
.commod__thumb { display: none; }

@media (max-width: 899px) {
  .commod__head { grid-template-columns: 1fr; padding: 18vh var(--pad) 6vh; }
  .commod__head .lede { justify-self: start; }
  .commod__body { grid-template-columns: minmax(0, 1fr); }
  .commod__name { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .commod__stage { display: none; }
  .commod__row { min-height: 0; padding: 6vh var(--pad) 8vh; opacity: 1; }
  .commod__thumb { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 30px; }
  .commod__thumb canvas { width: 100%; height: 100%; }
}

/* ---------- Global reach ---------- */
.reach { background: var(--black); }
.globe-wrap { position: absolute; inset: 0; will-change: transform; }
.globe { width: 100%; height: 100%; }
.reach__title { position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%); z-index: 2; }

@media (max-width: 899px) {
  .reach__title { top: 16vh; transform: none; }
}

/* ---------- About ---------- */
.about {
  background: var(--off); color: var(--near);
  padding: 24vh var(--pad) 22vh;
  display: grid; grid-template-columns: 1fr 2.2fr; gap: 4vw; align-items: start;
}
.about > .eyebrow { margin-top: 1.4em; }
.about .eyebrow { color: rgba(8,8,8,.55); }
.about .display { color: var(--near); }
.about__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4vw;
  margin-top: 9vh; max-width: 900px;
}
.about__cols p { margin: 0; font-weight: 400; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.65; color: #2b2b2b; }
.about__terms {
  display: flex; gap: clamp(20px, 4vw, 64px);
  margin: 12vh 0 0; padding: 26px 0 0; list-style: none;
  border-top: 1px solid rgba(8,8,8,.16);
  font: 500 11px/1 var(--ff-body); text-transform: uppercase; color: rgba(8,8,8,.62);
}
@media (max-width: 899px) {
  .about { grid-template-columns: 1fr; padding: 16vh var(--pad); }
  .about__cols { grid-template-columns: 1fr; gap: 22px; margin-top: 6vh; }
}

/* ---------- Final ---------- */
.final .scene__shade {
  background:
    linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.35) 100%);
}
.final__content { position: absolute; left: var(--pad); right: var(--pad); bottom: max(14vh, 140px); }
.final__ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 56px; }
.btn {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 20px 30px;
  font: 500 11px/1 var(--ff-body); text-transform: uppercase;
  border: 1px solid rgba(234,234,234,.38);
  transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
.btn--solid { background: var(--off); border-color: var(--off); color: var(--black); }
@media (hover: hover) { .btn--solid:hover { background: var(--copper-lt); border-color: var(--copper-lt); } }
.btn--line { color: var(--off); }
@media (hover: hover) { .btn--line:hover { border-color: var(--copper); } }

/* ---------- Footer ---------- */
.footer { background: var(--black); padding: 14vh var(--pad) 36px; border-top: 1px solid rgba(234,234,234,.06); }
.footer__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer__nav, .footer__contact { display: flex; gap: clamp(18px, 3vw, 44px); flex-wrap: wrap; }
.footer a {
  font: 500 11px/1 var(--ff-body); text-transform: uppercase;
  color: var(--muted); transition: color .4s;
}
@media (hover: hover) { .footer a:hover { color: var(--white); } }
.footer__legal {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 26px; border-top: 1px solid var(--line);
  font: 400 11px/1 var(--ff-body); text-transform: uppercase; color: var(--faint);
}
.footer__legal a { font-size: 11px; color: var(--faint); }

/* ---------- Mobile adjustments ---------- */
@media (max-width: 899px) {
  .origin__content { bottom: max(17vh, 130px); }
  .scene__index { display: none; }
  .trading__inner { padding-top: 15vh; }
  .trading__triad { grid-template-columns: 1fr; gap: 14px; bottom: 30vh; }
  .triad__item { padding-top: 14px; }
  .triad__item h3 { margin-top: 10px; font-size: 1.9rem; }
  .trading__copy { left: var(--pad); bottom: 16vh; font-size: .92rem; }
  .final__ctas { flex-direction: column; align-items: stretch; }
  .btn { justify-content: space-between; }
}

/* ---------- No-GSAP fallback ---------- */
.no-gsap .mword, .no-gsap .material__layer { visibility: visible; }
.no-gsap .mword:not([data-i="0"]) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
}

/* ==========================================================================
   100vh cards (2026-10-03): native scroll with snapping, no scroll-driven motion
   ========================================================================== */
html { scroll-snap-type: y mandatory; }
html.is-locked { overflow: hidden; }
main > section { scroll-snap-align: start; scroll-snap-stop: always; }
.footer { scroll-snap-align: end; }
@media (max-width: 899px) { html { scroll-snap-type: y proximity; } }

/* one soft fade of the text when a card comes into view */
.js .fx { opacity: 0; transform: translateY(18px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js .is-in .fx { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .fx { opacity: 1; transform: none; transition: none; } }

/* 02 Commodities: three materials in one card */
.material__inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 4vh;
  padding: 120px var(--pad) 88px;
}
.material .material__title { position: static; transform: none; }
.material__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mcol { position: relative; overflow: hidden; background: var(--near); }
.mcol__media { position: absolute; inset: 0; }
.mcol::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 62%); }
.mcol__text { position: absolute; left: 26px; right: 26px; bottom: 26px; z-index: 2; }
.mcol .mword__idx { margin-bottom: 14px; }
.mcol .mword__line { margin-top: 14px; }
.mcol__title { margin: 0; font: 600 clamp(1.5rem, 2.5vw, 2.8rem)/.95 var(--ff-display); text-transform: uppercase; color: var(--off); }

/* 03 Global markets: map fully visible */
.map__canvas { opacity: 1; }

/* 04 How we trade: the five stages side by side */
.how { display: flex; align-items: center; }
.how__track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; height: auto; padding: 0 var(--pad); }
.how__intro { grid-column: 1 / -1; width: auto; padding: 0 0 8vh; }
.how__panel { width: auto; min-height: 36vh; padding: 0 2vw 0 1.6vw; }
.how__num { font-size: clamp(3.4rem, 6.4vw, 7rem); color: var(--copper); -webkit-text-stroke: 0; }
.how__panel { justify-content: flex-start; gap: 5vh; }
.how__text { opacity: 1; transform: none; }
.how__text h3 { font-size: clamp(1.2rem, 1.7vw, 1.9rem); }
.how__text p { font-size: clamp(.9rem, 1vw, 1.05rem); }
.how__progress { display: none; }

/* 05 Global reach: globe in place */
.globe-wrap { transform: none; }

/* 06 NEXOMINERALS: centred in its card */
.about { min-height: var(--vh); padding: 110px var(--pad) 90px; align-content: center; }
.about__cols { grid-template-columns: minmax(0, 52ch); margin-top: 6vh; }

@media (max-width: 899px) {
  .material__inner { padding: 92px 16px 72px; gap: 18px; }
  .material__grid { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mcol__text { left: 16px; right: 16px; bottom: 14px; }
  .mcol .mword__idx { margin-bottom: 6px; }
  .mcol .mword__line { margin-top: 6px; }
  .mcol__title { font-size: 1.35rem; }
  .how { height: var(--vh); padding: 84px 0 72px; }
  .how__track { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .how__intro { padding: 0 0 6px; }
  .how__intro .display { font-size: 1.9rem; }
  .how__intro .lede { margin-top: 12px; font-size: .9rem; line-height: 1.45; }
  .how__panel { min-height: 0; padding: 0 10px 0 12px; border-top: 0; border-left: 1px solid var(--line); justify-content: flex-start; gap: 6px; }
  .how__panel:last-child { grid-column: 1 / -1; }
  .how__num { font-size: 2rem; }
  .how__text h3 { font-size: 1rem; margin-bottom: 4px; }
  .how__text p { font-size: .8rem; line-height: 1.4; }
  .about { padding: 96px var(--pad) 84px; }
}

/* header over the light NEXOMINERALS card: keep the white menu legible */
.nav.is-scrolled.is-on-light { background: rgba(0, 0, 0, .7); }
.nav .logo { image-rendering: -webkit-optimize-contrast; }

/* About keeps its text in the right-hand column now that the label is gone */
.about__body { grid-column: 2; }
@media (max-width: 899px) { .about__body { grid-column: 1; } }

/* touch screens: hover look while a link is tapped, removed on the next tap outside */
.nav__links a.is-touched, .nav__cta.is-touched { color: var(--white); }
.nav__links a.is-touched::after, .nav__cta.is-touched::after { transform: scaleX(1); transform-origin: left; }
.lang a.is-touched { color: var(--white); }
.dots button.is-touched::after { border-color: var(--off); }
.dock__btn.is-touched { border-color: var(--copper); color: var(--white); background: rgba(8, 8, 8, .86); }
.dock__btn--email.is-touched { background: #eaeaea; border-color: #eaeaea; color: #000000; }
.dock__btn--whatsapp.is-touched { background: #1fb959; border-color: #1fb959; color: #ffffff; }
.dock--icons .dock__btn.is-touched .dock__label { opacity: 1; transform: translate(-50%, 0); }
.btn--solid.is-touched { background: var(--copper-lt); border-color: var(--copper-lt); }
.btn--line.is-touched { border-color: var(--copper); }
.footer a.is-touched { color: var(--white); }

/* footer without the large logo */
.footer { padding: 10vh var(--pad) 32px; }
.footer__legal { margin-top: 9vh; }
.footer__contact a { display: inline-flex; align-items: center; gap: 10px; }
.footer__icon { display: block; width: 16px; height: 16px; color: var(--copper); flex: none; }
.footer__icon svg { display: block; width: 100%; height: 100%; }

/* footer location */
.footer__place { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.footer__place .flag { display: inline-block; flex: none; }

/* language selector: globe + dropdown */
.lang { display: flex; align-items: center; gap: 10px; text-transform: none; }
.lang__globe { display: block; width: 18px; height: 18px; color: var(--off); flex: none; }
.lang__globe svg { display: block; width: 100%; height: 100%; }
.lang__box { position: relative; }
.lang__select {
  -webkit-appearance: none; appearance: none;
  margin: 0; padding: 8px 32px 8px 12px;
  background: transparent; color: var(--off);
  border: 1px solid rgba(234, 234, 234, .35); border-radius: 4px;
  font: 500 12px/1.2 var(--ff-body); text-transform: none;
  cursor: pointer; color-scheme: dark;
  transition: border-color .4s var(--ease);
}
.lang__select:focus-visible { outline: none; border-color: var(--copper); }
@media (hover: hover) { .lang__select:hover { border-color: var(--copper); } }
.lang__select option { background: #0b0b0b; color: #eaeaea; }
.lang__chev { position: absolute; right: 11px; top: 50%; width: 11px; height: 8px; transform: translateY(-50%); color: var(--off); pointer-events: none; }
@media (max-width: 899px) {
  .lang { gap: 8px; }
  .lang__select { padding: 7px 28px 7px 10px; font-size: 12px; }
  .lang__chev { right: 9px; }
}

/* Chinese: CJK fallback font and roomier line height */
html:lang(zh-Hans) { --ff-display: 'Sora', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; --ff-body: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
html:lang(zh-Hans) .display { line-height: 1.08; }
html:lang(zh-Hans) .w { padding-bottom: .14em; margin-bottom: -.14em; }

/* real photography framing (set per scene in content.js) */
.media__real { object-position: var(--pos, 50% 50%); }
@media (max-width: 899px) { .media__real { object-position: var(--pos-mobile, var(--pos, 50% 50%)); } }

/* ==========================================================================
   2026-10-04: hamburger left + centred logo, hero, products, featured offer
   ========================================================================== */
.nav__brand { justify-self: center; }
.nav__right { justify-self: end; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: 12px; justify-self: start;
  font: 500 11px/1 var(--ff-body); text-transform: uppercase; color: var(--white);
}
.burger { position: relative; display: block; width: 22px; height: 14px; }
.burger b { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease), opacity .3s; }
.burger b:nth-child(1) { top: 0; }
.burger b:nth-child(2) { top: 6px; }
.burger b:nth-child(3) { top: 12px; }
.menu-open .burger b:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-open .burger b:nth-child(2) { opacity: 0; }
.menu-open .burger b:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.menu__offer, .footer__offer { color: var(--copper-lt) !important; }
.lang--menu { display: none; }

/* featured offer: three styles */
.offer {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font: 600 11px/1 var(--ff-body); text-transform: uppercase; white-space: nowrap;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.offer__dot, .offer__tag { display: none; }
/* 1 · solid copper */
.offer-1 .offer { padding: 11px 16px; background: var(--copper); color: #000; }
@media (hover: hover) { .offer-1 .offer:hover { background: var(--copper-lt); } }
.offer-1 .offer.is-touched { background: var(--copper-lt); }
/* 2 · live dot */
.offer-2 .offer { padding: 10px 14px; border: 1px solid var(--copper); color: var(--off); }
.offer-2 .offer__dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--copper-lt); animation: livePulse 1.8s ease-out infinite; }
@media (hover: hover) { .offer-2 .offer:hover { background: rgba(184,115,51,.18); } }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(212,154,106,.75); } 70% { box-shadow: 0 0 0 9px rgba(212,154,106,0); } 100% { box-shadow: 0 0 0 0 rgba(212,154,106,0); } }
/* 3 · shine + tag */
.offer-3 .offer__text {
  background: linear-gradient(100deg, #d49a6a 0%, #d49a6a 35%, #fff4e4 50%, #d49a6a 65%, #d49a6a 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 3.4s linear infinite;
}
.offer-3 .offer__tag { display: inline-block; padding: 4px 6px; background: var(--copper); color: #000; font-size: 9px; }
@keyframes shine { from { background-position: 130% 0; } to { background-position: -130% 0; } }

/* hero */
.hero__kicker { margin-bottom: 24px; color: var(--copper-lt); }
.hero__title { font-size: clamp(2.5rem, 6vw, 6.8rem); line-height: .95; max-width: 13ch; }
.hero-fx-1 #top .media__inner { animation: heroDrift 26s ease-in-out infinite alternate; }
@keyframes heroDrift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-2%, -1.5%, 0); } }
.hero__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

/* products: one full-screen section each */
.product__content { position: absolute; left: var(--pad); right: var(--pad); bottom: max(14vh, 140px); }
.product__title { font-size: clamp(2.8rem, 7.6vw, 8.6rem); line-height: .92; max-width: 14ch; }
.product__line { margin-top: 24px; }

/* footer company line */
.footer__company { margin: 8vh 0 0; font: 400 12px/1.5 var(--ff-body); color: var(--faint); }
.footer__company + .footer__legal { margin-top: 18px; }

@media (max-width: 899px) {
  .nav { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .offer { white-space: normal; max-width: 104px; line-height: 1.2; }
  .offer-3 .offer__tag { display: none; }
  .nav__toggle span { display: none; }
  .nav .logo, .nav.is-scrolled .logo { height: 34px; }
  .nav__right .lang { display: none; }
  .lang--menu { display: flex; position: absolute; top: 96px; left: var(--pad); }
  .offer { font-size: 9.5px; gap: 6px; }
  .offer-1 .offer { padding: 9px 10px; }
  .offer-2 .offer { padding: 8px 10px; }
  .offer-3 .offer__tag { padding: 3px 4px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fx-1 #top .media__inner, .offer-2 .offer__dot, .offer-3 .offer__text { animation: none; }
}

/* ==========================================================================
   2026-10-04 (b): menu, offer shine once, logistics ship, values
   ========================================================================== */
/* hamburger: longer, thicker lines */
.burger { width: 30px; height: 18px; }
.burger b { height: 2.5px; }
.burger b:nth-child(2) { top: 7.75px; }
.burger b:nth-child(3) { top: 15.5px; }
.menu-open .burger b:nth-child(1), .menu-open .burger b:nth-child(3) { top: 7.75px; }

/* open menu: 50% black, crisp, no blur */
.menu { background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* featured offer: one single shine after the page loads */
.offer-3 .offer__text { animation: shine 1.8s ease-in-out 2.6s 1 both; }

/* 05 logistics network: break bulk vessel */
.logistics { background: linear-gradient(180deg, #000 0%, #050404 45%, #140c07 74%, #060504 100%); }
.logistics__scene { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72%; }
.logistics__title { position: absolute; left: var(--pad); right: var(--pad); top: 120px; z-index: 2; }
.logistics__title .display { max-width: 22ch; font-size: clamp(1.9rem, 3.6vw, 4rem); line-height: 1.02; }
.logistics .ship { transform-box: view-box; transform-origin: 800px 440px; animation: shipBob 7s ease-in-out infinite; }
.logistics .waves { animation: waves 10s linear infinite; }
.logistics .ship__wake { animation: wake 2.4s ease-in-out infinite; }
@keyframes shipBob { 0%, 100% { transform: translateY(0) rotate(-.35deg); } 50% { transform: translateY(5px) rotate(.35deg); } }
@keyframes waves { to { transform: translateX(-800px); } }
@keyframes wake { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* 07 values */
.values { min-height: var(--vh); background: var(--near); display: flex; align-items: center; }
.values__inner { width: 100%; padding: 110px var(--pad) 90px; }
.values__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 48px); margin-top: 9vh; }
.value { position: relative; padding-top: 26px; }
.value__rule { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--copper); }
.value h3 { margin: 0 0 14px; font: 600 clamp(1.25rem, 1.8vw, 2rem)/1.05 var(--ff-display); text-transform: uppercase; }
.value p { margin: 0; font-weight: 300; font-size: clamp(.95rem, 1.1vw, 1.1rem); line-height: 1.55; color: var(--muted); max-width: 30ch; }

@media (max-width: 899px) {
  .burger { width: 26px; height: 16px; }
  .burger b:nth-child(2), .menu-open .burger b:nth-child(1), .menu-open .burger b:nth-child(3) { top: 6.75px; }
  .burger b:nth-child(3) { top: 13.5px; }
  .logistics__title { top: 96px; }
  .logistics__title .display { font-size: 1.7rem; }
  .logistics__scene { height: 52%; bottom: 6%; }
  .values__inner { padding: 96px var(--pad) 84px; }
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; margin-top: 5vh; }
  .value h3 { font-size: 1.05rem; }
  .value p { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .logistics .ship, .logistics .waves, .logistics .ship__wake { animation: none; }
}

/* open menu: hide the page's text behind the 50% curtain so only the menu reads */
main :is(h1, h2, h3, p, .lede, .eyebrow, .how__num, .map__routes) { transition: opacity .45s var(--ease); }
.menu-open main :is(h1, h2, h3, p, .lede, .eyebrow, .how__num, .map__routes) { opacity: 0 !important; }

/* ==========================================================================
   2026-10-04 (c): "Ver más", product curtains, lead form
   ========================================================================== */
/* Ver más: diagonal arrow in an outlined circle, no animation */
.more { display: inline-flex; align-items: center; gap: 16px; margin-top: 40px; padding: 0; background: none; border: 0; color: var(--off); cursor: pointer; font: 500 12px/1 var(--ff-body); text-transform: uppercase; }
.more__circle { display: grid; place-items: center; width: 60px; height: 60px; border: 1.5px solid rgba(234, 234, 234, .75); border-radius: 50%; }
.more__circle svg { width: 24px; height: 24px; display: block; }
.more:focus-visible .more__circle { border-color: var(--copper); }

/* curtains: 50% black, crisp, rising from the bottom (same as the menu) */
.sheet {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0, 0, 0, .5);
  transform: translateY(100%); visibility: hidden;
  transition: transform .7s var(--ease), visibility 0s linear .7s;
}
.sheet.is-open { transform: none; visibility: visible; transition: transform .7s var(--ease), visibility 0s; }
.sheet__panel { position: absolute; left: var(--pad); right: var(--pad); bottom: max(10vh, 96px); max-width: 780px; }
.sheet__title { margin-bottom: 28px; }
.sheet__body p { margin: 0 0 16px; max-width: 60ch; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.6; color: var(--off); }
.sheet__badge { display: inline-block; margin: 18px 0 18px; padding: 7px 10px; border: 1px solid var(--copper); color: var(--copper-lt); font: 600 11px/1 var(--ff-body); text-transform: uppercase; }
.sheet__cta { display: flex; width: max-content; }
.sheet__cta-icon { display: block; width: 18px; height: 18px; }
.sheet__cta-icon svg { display: block; width: 100%; height: 100%; }
.sheet__close {
  position: absolute; top: 28px; right: var(--pad);
  display: inline-flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--white);
  font: 500 11px/1 var(--ff-body); text-transform: uppercase;
}
.sheet__x { position: relative; display: block; width: 22px; height: 22px; }
.sheet__x::before, .sheet__x::after { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: currentColor; }
.sheet__x::before { transform: rotate(45deg); }
.sheet__x::after { transform: rotate(-45deg); }

/* hide the page text behind an open curtain, same as the menu */
.layer-open main :is(h1, h2, h3, p, .lede, .eyebrow, .how__num, .map__routes, .more) { opacity: 0 !important; }

/* lead form */
.lead {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 20px;
  background: rgba(0, 0, 0, .72);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
}
.lead.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
.lead__panel {
  position: relative; width: min(100%, 540px); max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 40px 36px 32px; background: #0b0b0b; border: 1px solid var(--line);
}
.lead__close { position: absolute; top: 18px; right: 18px; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--off); }
.lead__title { margin: 0 32px 10px 0; font: 600 clamp(1.3rem, 2vw, 1.7rem)/1.15 var(--ff-display); text-transform: uppercase; color: var(--white); }
.lead__intro { margin: 0 0 26px; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.lead__field { display: block; margin-bottom: 18px; }
.lead__label { display: block; margin-bottom: 8px; font: 500 11px/1 var(--ff-body); text-transform: uppercase; color: var(--muted); }
.lead__label::after { content: ' *'; color: var(--copper-lt); }
.lead__field input {
  width: 100%; padding: 12px 14px; background: transparent; color: var(--white);
  border: 1px solid rgba(234, 234, 234, .25); border-radius: 0;
  font: 400 15px/1.3 var(--ff-body); color-scheme: dark;
}
.lead__field input::placeholder { color: rgba(234, 234, 234, .3); }
.lead__field input:focus { outline: none; border-color: var(--copper); }
.lead__field.has-error input { border-color: #e07a5f; }
.lead__err { display: block; min-height: 0; margin-top: 6px; font-style: normal; font-size: 12px; color: #e07a5f; }
.lead__err:empty { display: none; }
.lead__consent { margin: 8px 0 22px; font-size: 12px; line-height: 1.5; color: var(--faint); }
.lead__submit { width: 100%; justify-content: center; }

@media (max-width: 899px) {
  .more { margin-top: 26px; }
  .more__circle { width: 54px; height: 54px; }
  .sheet__panel { bottom: 92px; }
  .sheet__close { top: 22px; }
  .sheet__title { margin-bottom: 18px; }
  .sheet__body p { font-size: .95rem; }
  .lead { padding: 12px; }
  .lead__panel { padding: 32px 20px 24px; max-height: calc(100vh - 24px); }
}

/* header steps aside while a product curtain or the lead form is open */
.nav, .dots { transition: opacity .4s var(--ease); }
.layer-open .nav, .layer-open .dots { opacity: 0; pointer-events: none; }

/* lead form: which offer the request comes from */
.lead__context { display: inline-block; margin: 0 0 14px; padding: 7px 10px; border: 1px solid var(--copper); color: var(--copper-lt); font: 600 11px/1.3 var(--ff-body); text-transform: uppercase; }
.lead__context[hidden] { display: none; }

/* ==========================================================================
   2026-10-04 (d): real photos for Gold, Shipping and About
   ========================================================================== */
/* gold: bright texture, darker veil so the white title reads */
#gold .scene__shade { background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.7) 100%); }

/* shipping: the photo replaces the illustrated vessel */
.logistics.has-photo .logistics__scene { display: none; }
.logistics.has-photo .scene__shade { background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,.35) 100%); }

/* about: Santiago photo, dark veil, light text */
.about { position: relative; overflow: hidden; }
.about__media { position: absolute; inset: 0; }
.about__body { position: relative; z-index: 1; }
.about.has-photo { background: #000; color: var(--off); }
.about.has-photo .about__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to left, rgba(0,0,0,.82) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,.35) 100%); }
.about.has-photo .display { color: var(--white); }
.about.has-photo .about__cols p { color: rgba(234, 234, 234, .85); }
@media (max-width: 899px) {
  .about.has-photo .about__media::after { background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.4) 100%); }
}

/* copper slag photo: keep title and Ver más legible over the bright stones */
#slag.has-photo .scene__shade { background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.4) 80%, rgba(0,0,0,.65) 100%); }


/* ==========================================================================
   2026-10-05: Cobre Metálico y sus Concentrados, Hierro y Chatarra,
   Representaciones, quote/producer CTAs
   ========================================================================== */

/* long product title (Cobre Metálico y sus Concentrados) */
.product__title--long { font-size: clamp(2.3rem, 6.2vw, 7rem); max-width: 18ch; }
@media (max-width: 899px) { .product__title--long { font-size: clamp(1.9rem, 8.6vw, 3.2rem); } }

/* category label above a product title (Commodities metálicos) */
.product__eyebrow { margin-bottom: 18px; color: var(--copper-lt); }

/* quote CTA inside a product curtain */
.sheet__body + .sheet__cta { margin-top: 26px; }
.sheet__cta { max-width: 100%; }
.sheet__cta-label { text-align: left; line-height: 1.25; }
@media (max-width: 899px) { .sheet__cta { padding: 18px 20px; gap: 14px; } }

/* header: "¿Eres productor? / Trabaja con nosotros", two lines, left of the featured offer */
.producer { display: none; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; text-transform: none; white-space: nowrap; }
.producer__q { font: 400 11.5px/1.15 var(--ff-body); color: var(--muted); }
.producer__cta { position: relative; padding-bottom: 3px; font: 600 12.5px/1.15 var(--ff-body); color: var(--white); }
.producer__cta::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--copper);
  transform: scaleX(.35); transform-origin: right;
  transition: transform .6s var(--ease);
}
@media (hover: hover) { .producer:hover .producer__cta::after { transform: scaleX(1); transform-origin: left; } }
.producer.is-touched .producer__cta::after { transform: scaleX(1); transform-origin: left; }
@media (min-width: 1200px) { .producer { display: flex; } }

/* same entry inside the hamburger menu while the header has no room for it */
.menu a.menu__producer {
  display: none; margin-top: 10px; padding-bottom: 0;
  font: 400 1rem/1.35 var(--ff-body); text-transform: none; color: var(--muted);
}
.menu a.menu__producer::after { display: none; }
.menu a.menu__producer b { display: block; font: 600 1.15rem/1.3 var(--ff-body); color: var(--off); }
@media (max-width: 1199px) { .menu a.menu__producer { display: block; } }

/* 06b Representaciones */
.reps { height: auto; min-height: var(--vh); display: flex; align-items: flex-end; }
.reps .scene__shade { background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.45) 100%); }
.reps__content { position: relative; z-index: 2; width: 100%; padding: 132px var(--pad) max(8vh, 64px); }
.reps__eyebrow { margin-bottom: 20px; color: var(--copper-lt); }
.reps__title { max-width: 20ch; font-size: clamp(2rem, 4.4vw, 4.8rem); line-height: .98; }
.reps__lede { max-width: 56ch; margin-top: 22px; }
.reps__pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 48px); max-width: 1100px; margin-top: clamp(26px, 5vh, 52px); }
.pillar { position: relative; padding-top: 22px; }
.pillar__rule { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--copper); }
.pillar h3 { margin: 0 0 10px; font: 600 clamp(1.05rem, 1.4vw, 1.5rem)/1.05 var(--ff-display); text-transform: uppercase; }
.pillar p { margin: 0; max-width: 34ch; font-weight: 300; font-size: clamp(.9rem, 1vw, 1.05rem); line-height: 1.5; color: var(--muted); }
.reps__cta { width: max-content; max-width: 100%; margin-top: clamp(26px, 4.4vh, 44px); }
.reps__cta-label { text-align: left; line-height: 1.25; }
@media (max-width: 899px) {
  .reps__content { padding: 104px var(--pad) 72px; }
  .reps__title { font-size: clamp(1.8rem, 8vw, 2.8rem); }
  .reps__pillars { grid-template-columns: 1fr; gap: 16px; }
  .pillar { padding-top: 16px; }
  .pillar p { max-width: none; font-size: .9rem; }
  .reps__cta { padding: 18px 20px; gap: 14px; }
}

/* lead form: select fields and optional labels */
.lead__field select {
  width: 100%; padding: 12px 40px 12px 14px; background-color: transparent; color: var(--white);
  border: 1px solid rgba(234, 234, 234, .25); border-radius: 0;
  font: 400 15px/1.3 var(--ff-body); color-scheme: dark; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><polyline points='1,1.5 6,6.5 11,1.5' fill='none' stroke='%23eaeaea' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 11px 8px;
}
.lead__field select:focus { outline: none; border-color: var(--copper); }
.lead__field select option { background: #0b0b0b; color: #eaeaea; }
.lead__field.has-error select { border-color: #e07a5f; }
.lead__label--opt::after { content: none; }
.lead__extra:empty { display: none; }

/* iron: bright steel texture, darker veil so the white title reads (same treatment as gold) */
#iron .scene__shade { background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.62) 45%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.7) 100%); }

/* gold title: on phones "CONCENTRADOS" was wider than the screen and got clipped */
@media (max-width: 899px) { #gold .product__title { font-size: clamp(1.9rem, 8.6vw, 3.2rem); } }

/* ==========================================================================
   2026-10-05: header CTAs symmetric. "¿Eres productor?" and "Oferta destacada"
   share one structure: small top line, bold uppercase bottom line with a copper
   underline, same width, same height, same vertical centre.
   ========================================================================== */
@media (min-width: 1320px) {
  .nav__right { gap: clamp(18px, 2vw, 30px); }
  .producer, .offer {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; width: 168px; height: 42px; padding: 0; border: 0; background: none;
    text-align: center; white-space: nowrap; text-transform: none;
  }
  /* top line: same height for the question and the "Nuevo" tag */
  .producer__q, .offer__tag {
    order: -1; display: flex; align-items: center; justify-content: center;
    height: 17px; font: 400 11.5px/1 var(--ff-body);
  }
  .producer__q { color: var(--muted); }
  .offer__tag { padding: 0 7px; background: var(--copper); color: #000; font: 700 9px/1 var(--ff-body); letter-spacing: .04em; text-transform: uppercase; }
  /* bottom line: identical type for both */
  .producer__cta, .offer__text {
    position: relative; padding-bottom: 4px;
    font: 600 11.5px/1.1 var(--ff-body); letter-spacing: .02em; text-transform: uppercase;
  }
  .producer__cta { color: var(--white); }
  .offer__text::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--copper); transform: scaleX(.35); transform-origin: right;
    transition: transform .6s var(--ease);
  }
  .offer.is-touched .offer__text::after { transform: scaleX(1); transform-origin: left; }
}
@media (hover: hover) and (min-width: 1320px) { .offer:hover .offer__text::after { transform: scaleX(1); transform-origin: left; } }
/* 1200-1319: no room for both, the producer entry lives in the menu */
@media (min-width: 1200px) and (max-width: 1319px) {
  .producer { display: none; }
  .menu a.menu__producer { display: block; }
}

/* ==========================================================================
   2026-10-05: hamburger menu always fits. Eight entries at a fixed size were
   taller than most laptop screens: the first one was cut off and the second
   ran under the logo. Type now scales with the screen HEIGHT as well as the
   width, the list never starts above the header, and it scrolls as a fallback.
   ========================================================================== */
.menu { flex-direction: column; align-items: stretch; padding: 104px var(--pad) clamp(24px, 6vh, 64px); overflow-y: auto; overscroll-behavior: contain; }
.menu nav { margin-top: auto; gap: clamp(8px, 2vh, 22px); }
.menu a { font-size: clamp(1.45rem, min(9vw, 5.4vh), 3.4rem); line-height: 1.05; }
.menu a.menu__producer { margin-top: clamp(4px, 1.4vh, 12px); font-size: clamp(.9rem, 2vh, 1rem); }
.menu a.menu__producer b { font-size: clamp(1rem, 2.4vh, 1.15rem); }
@media (max-width: 899px) { .menu { padding-top: 150px; } }

/* representations: bright blue glass photo, deeper veil so the white title and copy read */
.reps.has-photo .scene__shade { background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.74) 50%, rgba(0,0,0,.6) 100%); }

/* copper photo: mid-bright warm image, deeper veil so the long white title reads over the cathodes */
#concentrates.has-photo .scene__shade { background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.58) 50%, rgba(0,0,0,.42) 80%, rgba(0,0,0,.62) 100%); }

/* iron photo: bright blue sky above the scrap; the title sits on the dark piles, deeper veil keeps copy and header legible */
#iron.has-photo .scene__shade { background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.3) 75%, rgba(0,0,0,.55) 100%); }

/* ==========================================================================
   2026-10-05: email + WhatsApp dock glued to the bottom-right corner (row of two
   squares, no gaps, no margins). Chosen alternative "1" of the corner preview.
   ========================================================================== */
.dock { right: 0; bottom: 0; gap: 0; }
.dock--icons .dock__btn { width: 52px; height: 52px; border: 0; }
.dock--icons .dock__label { display: none; }
@media (max-width: 899px) {
  .dock { right: 0; bottom: 0; }
  .dock--icons .dock__btn { width: 48px; height: 48px; }
}

/* ==========================================================================
   2026-10-07: offers. "Ver ofertas" card (A1, split panel) and one section per offer
   (B1, split sheet: text left, four images right, document download).
   ========================================================================== */

/* ---------- the card ---------- */
.deals {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(6, 6, 6, .96);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(100%); visibility: hidden;
  transition: transform .7s var(--ease), visibility 0s linear .7s;
}
.deals.is-open { transform: none; visibility: visible; transition: transform .7s var(--ease), visibility 0s; }
.deals__inner {
  min-height: 100%; display: grid; align-items: center;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 96px);
  padding: 112px var(--pad) max(6vh, 48px);
}
.deals__eyebrow { margin-bottom: 18px; color: var(--copper-lt); }
.deals__title { font-size: clamp(2rem, 4.2vw, 4.4rem); line-height: .96; }
.deals__lede { max-width: 30ch; margin-top: 16px; }
.deals__groups { border-top: 1px solid var(--line); }
.deals__group { border-bottom: 1px solid var(--line); }
.deals__gbtn {
  display: flex; align-items: baseline; gap: 18px; width: 100%;
  padding: clamp(12px, 2vh, 20px) 0; background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--white); font: 600 clamp(1.3rem, 2.2vw, 2.1rem)/1 var(--ff-display); text-transform: uppercase;
  transition: color .4s var(--ease);
}
@media (hover: hover) { .deals__gbtn:hover { color: var(--copper-lt); } }
.deals__gname { flex: 1; }
.deals__gcount { font: 500 11px/1 var(--ff-body); color: var(--muted); }
.deals__chev { flex: none; align-self: center; width: 11px; height: 11px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .5s var(--ease); }
.deals__group.is-open .deals__chev { transform: rotate(225deg); }
.deals__items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.deals__group.is-open .deals__items { grid-template-rows: 1fr; }
.deals__items-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .55s; }
.deals__group.is-open .deals__items-in { visibility: visible; transition-delay: 0s; }
.deals__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; width: 100%;
  padding: 14px 4px; background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer; text-align: left; color: var(--off);
  transition: color .4s var(--ease), background-color .4s var(--ease), padding .5s var(--ease);
}
.deals__thumb { display: block; width: clamp(92px, 9vw, 132px); aspect-ratio: 4 / 3; overflow: hidden; background: var(--graphite); border: 1px solid var(--line); }
.deals__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.deals__thumb--tile { display: grid; place-items: center; }
.deals__thumb--tile b { font: 600 1.1rem/1 var(--ff-display); color: var(--white); }
.deals__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.deals__itag { font: 600 11px/1 var(--ff-body); text-transform: uppercase; color: var(--copper-lt); }
.deals__ititle { font: 500 clamp(1.05rem, 1.4vw, 1.35rem)/1.2 var(--ff-body); color: var(--white); }
.deals__idesc { font: 300 clamp(.88rem, 1vw, 1rem)/1.4 var(--ff-body); color: var(--muted); }
.deals__go { width: 22px; height: 22px; color: var(--copper-lt); }
.deals__go svg { display: block; width: 100%; height: 100%; }
@media (hover: hover) {
  .deals__item:hover, .deals__item:focus-visible { background: rgba(234, 234, 234, .05); padding-left: 12px; }
  .deals__item:hover .deals__thumb img { transform: scale(1.06); }
}

/* ---------- one section per offer ---------- */
.deal {
  height: auto; min-height: var(--vh); display: flex; align-items: center;
  background: radial-gradient(70% 55% at 88% 10%, rgba(184, 115, 51, .14), transparent 70%), var(--near);
}
.deal__inner {
  width: 100%; display: grid; align-content: center;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  grid-template-areas: "text gallery" "foot gallery";
  column-gap: clamp(28px, 5vw, 96px); row-gap: clamp(18px, 3vh, 32px);
  padding: 112px var(--pad) max(8vh, 80px);
}
.deal__text { grid-area: text; }
.deal__gallery { grid-area: gallery; align-self: center; }
.deal__foot { grid-area: foot; }
.deal__eyebrow { margin-bottom: 18px; color: var(--copper-lt); }
.deal__title { max-width: 22ch; font-size: clamp(1.8rem, 3vw, 3.3rem); line-height: .98; }
.deal__lede { max-width: 52ch; margin-top: 18px; }
.deal__kpis {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px);
  margin-top: clamp(20px, 3.4vh, 34px); padding-top: 18px; border-top: 1px solid var(--copper);
}
.deal__kpi b { display: block; font: 600 clamp(1.15rem, 1.75vw, 1.85rem)/1.05 var(--ff-display); color: var(--white); }
.deal__kpi span { display: block; margin-top: 8px; font: 400 12.5px/1.35 var(--ff-body); color: var(--muted); }
.deal__scope { display: grid; gap: 12px; margin: clamp(18px, 3vh, 28px) 0 0; padding: 0; list-style: none; }
.deal__scope li { position: relative; padding-left: 20px; font-weight: 300; font-size: clamp(.92rem, 1.05vw, 1.05rem); line-height: 1.45; color: var(--off); }
.deal__scope li::before { content: ''; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--copper); }
.deal__cta { width: max-content; max-width: 100%; }
.deal__cta-label { text-align: left; line-height: 1.25; }
.deal__note { margin: 16px 0 0; max-width: 62ch; font-size: 12px; line-height: 1.55; color: var(--faint); }

.deal__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.deal__fig { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--graphite); border: 1px solid var(--line); }
.deal__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.deal__fig--contain img { object-fit: contain; background: #fff; }
@media (hover: hover) {
  .deal__fig img { transition: transform 1.4s var(--ease); }
  .deal__fig:hover img { transform: scale(1.05); }
}
.deal__tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; width: 100%; height: 100%; padding: clamp(14px, 2vw, 26px); }
.deal__tile-rule { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--copper); }
.deal__tile b { font: 600 clamp(1.5rem, 2.8vw, 3rem)/1 var(--ff-display); color: var(--white); }
.deal__tile span { font: 400 12.5px/1.35 var(--ff-body); color: var(--muted); }

@media (max-width: 899px) {
  .deals__inner { grid-template-columns: minmax(0, 1fr); align-items: start; padding: 104px var(--pad) 56px; }
  .deals__thumb { width: 84px; }
  .deals__item { gap: 14px; }
  .deals__gbtn { font-size: clamp(1.3rem, 6vw, 1.7rem); }
  .deals__idesc { font-size: .85rem; }
  .deal__inner {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "gallery" "foot";
    padding: 104px var(--pad) 84px; row-gap: 26px;
  }
  .deal__title { font-size: clamp(1.7rem, 7.4vw, 2.6rem); }
  .deal__kpis { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .deal__kpi { display: flex; align-items: baseline; gap: 14px; }
  .deal__kpi b { flex: none; width: 44%; }
  .deal__kpi span { margin-top: 0; }
  .deal__cta { width: 100%; justify-content: space-between; padding: 18px 20px; gap: 14px; }
}

/* laptops (about 768 px tall): tighter rhythm so each offer fits in one screen */
@media (min-width: 900px) and (max-height: 820px) {
  .deal__inner { padding-top: 92px; padding-bottom: 68px; row-gap: 12px; }
  .deal__eyebrow { margin-bottom: 12px; }
  .deal__title { font-size: clamp(1.7rem, 2.6vw, 2.8rem); }
  .deal__lede { margin-top: 12px; }
  .deal__kpis { margin-top: 16px; padding-top: 14px; }
  .deal__scope { margin-top: 14px; gap: 8px; }
  .deal__note { margin-top: 10px; }
  .deals__inner { padding-top: 96px; }
  .deals__title { font-size: clamp(1.8rem, 3.4vw, 3.4rem); }
  .deals__gbtn { padding: 12px 0; }
}