/* ==========================================================================
   Grey Mineral Resources — Global Stylesheet
   Style system: Swiss Modernism 2.0 (12-col grid, mathematical spacing,
   high contrast, single gold accent). WCAG AA. cPanel-ready static site.
   Tokens mirror design-system/grey-mineral-resources/MASTER.md.
   ========================================================================== */

/* ---- 1. Design Tokens ---------------------------------------------------- */
:root {
  /* Colour (derived from the logo) */
  --color-primary:      #1C1917;   /* charcoal / coal mass */
  --color-secondary:    #44403C;   /* warm graphite */
  --color-accent:       #B0790F;   /* industrial gold — CTA/emphasis (AA) */
  --color-accent-hover: #916210;
  --color-gold-hi:      #E0A93E;   /* decorative gold — non-text only */
  --color-bg:           #FAFAF9;   /* warm off-white */
  --color-surface:      #FFFFFF;
  --color-fg:           #0C0A09;   /* body text */
  --color-fg-soft:      #57534E;   /* secondary text (>=4.5:1 on bg) */
  --color-muted:        #E7E5E4;
  --color-border:       #D6D3D1;
  --color-on-dark:      #F5F5F4;
  --color-on-dark-soft: #A8A29E;

  /* Typography */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --fs-display: clamp(2.4rem, 5.2vw, 4.4rem);
  --fs-h1:      clamp(2rem, 4vw, 3.2rem);
  --fs-h2:      clamp(1.6rem, 2.6vw, 2.3rem);
  --fs-h3:      clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-lead:    clamp(1.05rem, 1.4vw, 1.3rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --lh-body:    1.65;
  --lh-tight:   1.15;

  /* Spacing (8px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px; --s-5: 32px;
  --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px;

  /* Layout */
  --container: 1240px;
  --radius: 4px;
  --radius-lg: 8px;
  --border: 1px solid var(--color-border);
  --shadow-sm: 0 1px 2px rgba(12,10,9,.06);
  --shadow-md: 0 8px 30px rgba(12,10,9,.08);

  /* Motion */
  --dur: 220ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --z-header: 100;
  --z-drawer: 200;
}

/* ---- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
h1,h2,h3,h4 { line-height: var(--lh-tight); font-weight: 600; letter-spacing: -0.01em; }

/* ---- 3. Bilingual visibility -------------------------------------------- */
html[data-lang="en"] [data-lang="fr"] { display: none !important; }
html[data-lang="fr"] [data-lang="en"] { display: none !important; }

/* ---- 4. Accessibility helpers ------------------------------------------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--color-primary); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- 5. Layout primitives ----------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-4); }
.section { padding-block: clamp(48px, 8vw, 112px); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }
.section--dark { background: var(--color-primary); color: var(--color-on-dark); }
.section--muted { background: #F4F2F0; }
.grid { display: grid; gap: var(--s-4); }
.eyebrow {
  font-size: var(--fs-small); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--color-accent);
}
.section--dark .eyebrow { color: var(--color-gold-hi); }
.lead { font-size: var(--fs-lead); color: var(--color-fg-soft); max-width: 68ch; }
.section--dark .lead { color: var(--color-on-dark-soft); }
.measure { max-width: 68ch; }

/* ---- 6. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--radius); font-weight: 600;
  font-size: .95rem; border: 2px solid transparent; min-height: 48px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--outline { border-color: var(--color-primary); color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: #fff; }
.section--dark .btn--outline { border-color: var(--color-on-dark); color: var(--color-on-dark); }
.section--dark .btn--outline:hover { background: var(--color-on-dark); color: var(--color-primary); }
.btn--text { padding: 6px 0; color: var(--color-accent); font-weight: 600; }
.btn--text:hover { color: var(--color-accent-hover); }
.btn--text .arrow { transition: transform var(--dur) var(--ease); }
.btn--text:hover .arrow { transform: translateX(4px); }

/* ---- 7. Header / Navigation --------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(250,250,249,.92); backdrop-filter: blur(10px);
  border-bottom: var(--border);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 76px;
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.brand__mark { width: 46px; height: 46px; flex: none; display: block; }
.site-footer .brand__mark { width: 44px; height: 44px; }

/* Header landscape logo: fixed height, auto width, crisp at all densities */
.brand__logo { height: 60px; width: auto; display: block; flex: none; }
@media (max-width: 1200px) { .brand__logo { height: 54px; } }
@media (max-width: 480px)  { .brand__logo { height: 46px; } }
.brand__name { font-family: var(--font-serif); font-size: 1.05rem; letter-spacing: .01em; line-height: 1.05; }
.brand__name small { display: block; font-family: var(--font-sans); font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--color-fg-soft); font-weight: 500; }

.nav__menu { display: flex; align-items: center; gap: 4px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px;
  font-weight: 500; font-size: .95rem; border-radius: var(--radius);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover, .nav__item:focus-within .nav__link { color: var(--color-accent); }
.nav__link[aria-current="page"] { color: var(--color-accent); }
.nav__link .chev { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.nav__item--has-menu:hover .chev, .nav__item--has-menu:focus-within .chev { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px;
  background: var(--color-surface); border: var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(6px); transition: all var(--dur) var(--ease);
}
.nav__item--has-menu:hover .nav__dropdown,
.nav__item--has-menu:focus-within .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown a { display: block; padding: 10px 14px; border-radius: var(--radius); font-size: .92rem; }
.nav__dropdown a:hover { background: var(--color-muted); color: var(--color-accent); }

.nav__actions { display: flex; align-items: center; gap: 12px; }
.lang-toggle { display: inline-flex; border: var(--border); border-radius: var(--radius); overflow: hidden; }
.lang-toggle button { padding: 7px 12px; background: transparent; font-size: .8rem; font-weight: 600; color: var(--color-fg-soft); }
.lang-toggle button[aria-pressed="true"] { background: var(--color-primary); color: #fff; }
.nav__cta { display: inline-flex; }

.nav__burger { display: none; background: transparent; border: 0; padding: 8px; }
.nav__burger svg { width: 28px; height: 28px; }

/* Mobile drawer: hidden on desktop, shown only below 1024px */
.site-nav-drawer, .drawer-backdrop { display: none; }

@media (max-width: 1023px) {
  .nav__menu, .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
  .site-nav-drawer {
    display: block;
    position: fixed; inset: 0 0 0 auto; width: min(88%, 380px); z-index: var(--z-drawer);
    background: var(--color-surface); box-shadow: -10px 0 40px rgba(0,0,0,.18);
    transform: translateX(100%); transition: transform var(--dur) var(--ease);
    padding: var(--s-5) var(--s-4); overflow-y: auto;
  }
  .site-nav-drawer.open { transform: translateX(0); }
  .drawer-backdrop {
    display: block;
    position: fixed; inset: 0; background: rgba(12,10,9,.5); z-index: calc(var(--z-drawer) - 1);
    opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease);
  }
  .drawer-backdrop.open { opacity: 1; visibility: visible; }
  .drawer-close { position: absolute; top: 18px; right: 16px; background: transparent; border: 0; }
  .drawer-close svg { width: 26px; height: 26px; }
  .drawer-group { border-bottom: var(--border); }
  .drawer-group > a, .drawer-toggle {
    display: flex; width: 100%; justify-content: space-between; align-items: center;
    padding: 14px 4px; font-weight: 600; font-size: 1.05rem; background: transparent; border: 0; text-align: left;
  }
  .drawer-sub { padding-left: 12px; overflow: hidden; max-height: 0; transition: max-height var(--dur) var(--ease); }
  .drawer-sub.open { max-height: 400px; }
  .drawer-sub a { display: block; padding: 10px 4px; color: var(--color-fg-soft); }
  .drawer-cta { margin-top: var(--s-5); }
  .drawer-cta .btn { width: 100%; justify-content: center; }
}

/* ---- 8. Hero ------------------------------------------------------------- */
.hero { position: relative; background: var(--color-primary); color: var(--color-on-dark); overflow: hidden; }
.hero__inner { position: relative; z-index: 2; padding-block: clamp(64px, 11vw, 150px); max-width: 52rem; }
.hero__bg { position: absolute; inset: 0; z-index: 1; }
.hero__bg::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(28,25,23,.94) 0%, rgba(28,25,23,.72) 55%, rgba(28,25,23,.45) 100%); }
.hero h1 { font-size: var(--fs-display); font-family: var(--font-serif); font-weight: 600; }
.hero .lead { color: var(--color-on-dark-soft); margin-top: var(--s-4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.hero--page .hero__inner { padding-block: clamp(56px, 8vw, 104px); max-width: 60rem; }

/* ---- 9. Breadcrumb ------------------------------------------------------- */
.breadcrumb { font-size: var(--fs-small); color: var(--color-on-dark-soft); margin-bottom: var(--s-3); }
.breadcrumb a:hover { color: var(--color-gold-hi); }
.breadcrumb span { opacity: .6; }

/* ---- 10. Cards ----------------------------------------------------------- */
.card {
  background: var(--color-surface); border: var(--border); border-radius: var(--radius-lg);
  padding: var(--s-5); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-accent); }
.card h3 { font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.card p { color: var(--color-fg-soft); }
.card__icon { width: 44px; height: 44px; color: var(--color-accent); margin-bottom: var(--s-3); }
.card__icon svg { width: 100%; height: 100%; stroke-width: 1.75; }

.cards-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.cards-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Image cards (regions, news) */
.card--img { padding: 0; overflow: hidden; display: flex; flex-direction: column; color: inherit; }
.card--img:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-accent); }
.card__media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-muted); }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.card--img:hover .card__media img { transform: scale(1.04); }
.card__body { padding: var(--s-5); }
.card__meta { display: block; font-size: var(--fs-small); color: var(--color-accent); font-weight: 600; margin-bottom: var(--s-2); letter-spacing: .04em; }

/* Square image mosaic band */
.mosaic { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4); }
.mosaic__tile { margin: 0; position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.mosaic__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.mosaic__tile:hover img { transform: scale(1.05); }
.mosaic__tile figcaption {
  position: absolute; inset: auto 0 0 0; padding: 28px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(12,10,9,.72));
  color: #fff; font-weight: 600; font-size: .95rem; letter-spacing: .02em;
}

/* ---- 11. Statistic band -------------------------------------------------- */
.stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-5); }
.stat__num { font-family: var(--font-serif); font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--color-gold-hi); line-height: 1; }
.stat__label { margin-top: var(--s-2); color: var(--color-on-dark-soft); font-size: .95rem; }

/* ---- 12. Split feature --------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-text { grid-template-columns: 1.1fr .9fr; } }

/* ---- 13. Timeline / process --------------------------------------------- */
.timeline { display: grid; gap: var(--s-4); counter-reset: step; }
.timeline__item { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-4); align-items: start; padding-bottom: var(--s-4); border-bottom: var(--border); }
.timeline__node { counter-increment: step; width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary); color: var(--color-gold-hi); display: grid; place-items: center; font-family: var(--font-serif); font-size: 1.2rem; }
.timeline__node::before { content: counter(step, decimal-leading-zero); }
.timeline__item h3 { font-size: 1.15rem; }

/* ---- 14. Commodity chips ------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: var(--border); border-radius: 999px; padding: 8px 16px; font-size: .9rem; font-weight: 500; background: var(--color-surface); }
.chip--primary { background: var(--color-primary); color: var(--color-on-dark); border-color: var(--color-primary); }

/* ---- 15. Image placeholder ---------------------------------------------- */
.imgph {
  position: relative; border: 1px dashed var(--color-border); border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(45deg, #f0eeec 0 12px, #f6f4f2 12px 24px);
  display: grid; place-content: center; text-align: center; padding: var(--s-5);
  color: var(--color-fg-soft); min-height: 220px;
}
.imgph[data-ratio="16-9"] { aspect-ratio: 16/9; }
.imgph[data-ratio="4-3"]  { aspect-ratio: 4/3; }
.imgph[data-ratio="1-1"]  { aspect-ratio: 1/1; }
.imgph[data-ratio="3-4"]  { aspect-ratio: 3/4; }
.imgph__tag { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent); }
.imgph__desc { font-size: .85rem; margin-top: 6px; max-width: 34ch; }
.hero .imgph { min-height: 100%; border-color: rgba(255,255,255,.25); background: repeating-linear-gradient(45deg, #26221f 0 12px, #2c2724 12px 24px); color: var(--color-on-dark-soft); }

/* ---- 16. Accordion ------------------------------------------------------- */
.accordion__item { border-bottom: var(--border); }
.accordion__btn { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-4) 0; background: transparent; border: 0; text-align: left; font-weight: 600; font-size: 1.05rem; }
.accordion__btn .plus { width: 22px; height: 22px; flex: none; transition: transform var(--dur) var(--ease); color: var(--color-accent); }
.accordion__btn[aria-expanded="true"] .plus { transform: rotate(45deg); }
.accordion__panel { overflow: hidden; max-height: 0; transition: max-height var(--dur) var(--ease); }
.accordion__panel > div { padding-bottom: var(--s-4); color: var(--color-fg-soft); }

/* ---- 17. CTA band -------------------------------------------------------- */
.cta-band { background: var(--color-primary); color: var(--color-on-dark); border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 64px); text-align: center; }
.cta-band h2 { font-family: var(--font-serif); font-size: var(--fs-h2); }
.cta-band p { color: var(--color-on-dark-soft); margin: var(--s-3) auto var(--s-5); max-width: 56ch; }

/* ---- 18. Forms ----------------------------------------------------------- */
.form-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.field .req { color: var(--color-accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; border: var(--border); border-radius: var(--radius);
  font: inherit; background: var(--color-surface); min-height: 48px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px rgba(176,121,15,.18); }
.field .help { font-size: .8rem; color: var(--color-fg-soft); margin-top: 5px; }
.field .error { font-size: .8rem; color: #B91C1C; margin-top: 5px; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #B91C1C; }
.field.invalid .error { display: block; }
.form-status[role="status"] { margin-top: var(--s-3); font-weight: 600; }

/* ---- 19. Footer ---------------------------------------------------------- */
.site-footer { background: var(--color-primary); color: var(--color-on-dark-soft); padding-block: var(--s-8) var(--s-5); }
.footer-grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h4 { color: var(--color-on-dark); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--s-3); }
.site-footer a { display: block; padding: 5px 0; color: var(--color-on-dark-soft); }
.site-footer a:hover { color: var(--color-gold-hi); }
.footer-brand p { max-width: 34ch; margin-top: var(--s-3); }
.footer-address { font-style: normal; margin-top: var(--s-3); line-height: 1.7; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; }
.footer-bottom nav { display: flex; gap: var(--s-4); }
.footer-bottom nav a { display: inline; }

/* ---- 20. Utilities & motion --------------------------------------------- */
.stack > * + * { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); } .mt-5 { margin-top: var(--s-5); } .mt-4 { margin-top: var(--s-4); }
.text-center { text-align: center; } .mx-auto { margin-inline: auto; }
.section-head { max-width: 60ch; margin-bottom: var(--s-6); }
.section-head.center { margin-inline: auto; text-align: center; }
.divider { height: 1px; background: var(--color-border); border: 0; margin-block: var(--s-6); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- 21. Real images (media) -------------------------------------------- */
.media { margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-muted); box-shadow: var(--shadow-sm); }
.media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.media[data-ratio="16-9"] { aspect-ratio: 16 / 9; }
.media[data-ratio="4-3"]  { aspect-ratio: 4 / 3; }
.media[data-ratio="1-1"]  { aspect-ratio: 1 / 1; }
.media[data-ratio="3-4"]  { aspect-ratio: 3 / 4; }
.media.framed { border: 1px solid var(--color-border); }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero--page .hero__inner { position: relative; z-index: 2; }

/* ---- 22. Responsive refinements (mobile-first up to 1440) --------------- */
@media (max-width: 1023px) {
  .split, .split--wide-text { grid-template-columns: 1fr; gap: var(--s-5); }
  .timeline__item { grid-template-columns: 44px 1fr; }
}
@media (max-width: 767px) {
  :root { --s-8: 64px; --s-9: 84px; }
  .nav { min-height: 64px; }
  .hero__cta .btn, .cta-band .btn { width: 100%; justify-content: center; }
  .hero__cta { gap: var(--s-2); }
  .cta-band { padding: 28px 20px; }
  .chip { font-size: .82rem; padding: 7px 13px; }
  .stat__num { font-size: clamp(2rem, 9vw, 2.6rem); }
  .footer-bottom { flex-direction: column; gap: var(--s-2); }
}
@media (max-width: 400px) {
  .container { padding-inline: var(--s-3); }
  .brand__name { font-size: .92rem; }
  .brand__name small { font-size: .55rem; letter-spacing: .2em; }
}
@media (min-width: 1441px) { :root { --container: 1320px; } }
img { height: auto; }