/* ==========================================================================
   شركة وادي السوف — Wadi Al-Souf Company
   Design tokens: color drawn from the ores themselves (malachite verdigris,
   iron-oxide rust, quarried limestone/basalt neutrals). Type: Reem Kufi
   (geometric Kufic — stone-inscription character) for display, IBM Plex
   Sans Arabic for body, IBM Plex Mono for assay data / tags.
   Bilingual (ar/en) via [data-i18n] — layout mirrors through logical
   properties + `dir` on <html>; see the "i18n / RTL-LTR mirroring" block
   at the end of this file for the few physical-value exceptions.
   ========================================================================== */

@import url("../fonts/fonts.css");

:root{
  /* ---- neutrals: warm limestone paper, never pure grey ---- */
  --bg: #f5f1e6;
  --bg-elevated: #fffdf8;
  --surface: #eee5d2;
  --surface-2: #e4d8bd;
  --line: #d8c9a8;
  --line-strong: #c3b18a;

  --ink-900: #201a10;
  --ink-700: #423a2a;
  --ink-500: #786c54;
  --ink-400: #948667;

  /* ---- accent: malachite / copper-ore verdigris ---- */
  --accent: #2c7d67;
  --accent-ink: #1c5747;
  --accent-soft: #dcece4;
  --accent-line: #b7d6c8;

  /* ---- rare secondary: iron-oxide rust, used sparingly ---- */
  --rust: #a34e21;
  --rust-soft: #f2ddc9;

  --shadow-1: 0 1px 2px rgba(32,26,16,.06), 0 8px 24px -12px rgba(32,26,16,.18);
  --shadow-2: 0 20px 60px -20px rgba(32,26,16,.35);

  --font-display: "Reem Kufi", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  --measure: 62ch;
  --radius-s: 3px;
  --radius-m: 6px;
  --container: 1240px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #16130c;
    --bg-elevated: #1c1810;
    --surface: #221d14;
    --surface-2: #2b2418;
    --line: #392f1f;
    --line-strong: #4a3d27;

    --ink-900: #f3ecda;
    --ink-700: #d6cab0;
    --ink-500: #a89877;
    --ink-400: #8a7a5c;

    --accent: #62c7a9;
    --accent-ink: #8fdcc0;
    --accent-soft: #213229;
    --accent-line: #35473d;

    --rust: #e08a4f;
    --rust-soft: #3a2717;

    --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    --shadow-2: 0 20px 60px -20px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg: #16130c;
  --bg-elevated: #1c1810;
  --surface: #221d14;
  --surface-2: #2b2418;
  --line: #392f1f;
  --line-strong: #4a3d27;

  --ink-900: #f3ecda;
  --ink-700: #d6cab0;
  --ink-500: #a89877;
  --ink-400: #8a7a5c;

  --accent: #62c7a9;
  --accent-ink: #8fdcc0;
  --accent-soft: #213229;
  --accent-line: #35473d;

  --rust: #e08a4f;
  --rust-soft: #3a2717;

  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-2: 0 20px 60px -20px rgba(0,0,0,.7);
  color-scheme: dark;
}

/* ---------------------------------- reset --------------------------------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{ margin:0; }
img,video{ max-width:100%; display:block; }
button,input,textarea{ font: inherit; color: inherit; }
a{ color: inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  background: var(--bg);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.85;
  /* direction is intentionally NOT set here — it inherits from <html dir="">
     so the language toggle can mirror the whole layout by flipping one attribute */
}

.container{ max-width: var(--container); margin-inline:auto; padding-inline: clamp(20px, 4vw, 48px); }

h1,h2,h3,h4{ font-family: var(--font-display); color: var(--ink-900); font-weight: 500; text-wrap: balance; letter-spacing: .002em; }
h1{ font-size: clamp(2.3rem, 3.6vw + 1rem, 4.2rem); line-height: 1.12; }
h2{ font-size: clamp(1.7rem, 1.6vw + 1.1rem, 2.5rem); line-height: 1.2; }
h3{ font-size: clamp(1.15rem, .5vw + 1rem, 1.4rem); line-height: 1.35; }

p{ max-width: var(--measure); }
.lede{ font-size: 1.15rem; color: var(--ink-700); }

.mono{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* --------------------------------- eyebrow / tag -------------------------- */
.tag{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--font-mono);
  font-size: .86rem;
  letter-spacing: .05em;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: .35em .9em;
}
.tag--rust{ color: var(--rust); background: var(--rust-soft); border-color: color-mix(in srgb, var(--rust) 35%, var(--rust-soft)); }

/* specimen-tag corner motif: nods to the site's own borehole/batch tags (BH-13, TM3, 6x9) */
.specimen{
  position:relative;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing:.03em;
  color: var(--ink-500);
}
.specimen::before{ content: "⌐ "attr(data-tag); }

/* ---------------------------------- buttons -------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--font-body); font-weight: 600; font-size: .98rem;
  padding: .85em 1.7em;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  text-decoration:none;
}
.btn:hover{ transform: translateY(-1px); }
.btn--primary{ background: var(--accent); color: #fdfffe; box-shadow: 0 1px 2px rgba(32,26,16,.08); }
.btn--primary:hover{ background: var(--accent-ink); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent-ink) 55%, transparent); }
.btn--ghost{ background: transparent; border-color: var(--line-strong); color: var(--ink-900); }
.btn--ghost:hover{ border-color: var(--accent); color: var(--accent-ink); }
.btn--on-dark{ border-color: rgba(255,255,255,.55); color:#fff; }
.btn--on-dark:hover{ border-color:#fff; background: rgba(255,255,255,.1); }

/* ---------------------------------- header --------------------------------- */
.site-header{
  position: fixed; inset-inline:0; top:0; z-index: 60;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px clamp(20px,4vw,48px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
.site-header[data-scrolled="true"]{ border-color: var(--line); }

.brand{ display:flex; align-items:center; gap:.7em; text-decoration:none; }
.brand-mark{ width: 44px; height:44px; flex:none; display:block; transition: transform .3s cubic-bezier(.16,.84,.44,1); }
.brand:hover .brand-mark{ transform: rotate(-4deg) scale(1.04); }
.footer-brand .brand-mark{ width:36px; height:36px; }
.brand-name{ font-family: var(--font-display); font-size: 1.28rem; color: var(--ink-900); line-height:1; letter-spacing:.01em; }
.brand-sub{ display:block; font-family: var(--font-mono); font-size: .74rem; letter-spacing:.07em; color: var(--ink-500); margin-top: 4px; }

.nav{ display:flex; align-items:center; gap: clamp(14px, 2vw, 30px); }
.nav a{
  text-decoration:none; color: var(--ink-700); font-size: .93rem; font-weight:500;
  position:relative; padding: 4px 0;
}
.nav a::after{
  content:""; position:absolute; inset-inline:0; bottom:-2px; height:1.5px; background: var(--accent);
  transform: scaleX(0); transform-origin: right; transition: transform .25s ease;
}
[dir="ltr"] .nav a::after{ transform-origin: left; }
.nav a:hover::after{ transform: scaleX(1); }

.header-actions{ display:flex; align-items:center; gap: 10px; }
.lang-toggle{
  min-width: 38px; height:36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--bg-elevated); color: var(--ink-700);
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; cursor:pointer;
  transition: border-color .18s ease, color .18s ease;
}
.lang-toggle:hover{ border-color: var(--accent); color: var(--accent-ink); }
.theme-toggle{
  width: 36px; height:36px; border-radius: 50%; border:1px solid var(--line-strong);
  background: var(--bg-elevated); display:grid; place-items:center; cursor:pointer; color: var(--ink-700);
}
.theme-toggle svg{ width:16px; height:16px; }
.nav-burger{ display:none; width:36px; height:36px; border:1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--bg-elevated); cursor:pointer; }
.nav-burger span{ display:block; width:16px; height:1.5px; background: var(--ink-900); margin: 3px auto; transition: transform .25s ease, opacity .2s ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(4.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-4.5px) rotate(-45deg); }

/* ---------------------------------- hero ----------------------------------- */
.hero{
  position: relative; min-height: 100svh; display:flex; align-items:flex-end;
  overflow:hidden; color:#fbf7ee;
}
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform: scale(1.06); transition: opacity 2.2s ease;
}
.hero-slide[data-active="true"]{ opacity:1; animation: hero-pan 14s ease-in-out forwards; }
@keyframes hero-pan{ from{ transform: scale(1.06); } to{ transform: scale(1); } }
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(12,10,6,.22) 0%, rgba(13,11,7,.42) 50%, rgba(10,8,5,.96) 100%),
              radial-gradient(120% 90% at 50% 100%, transparent 40%, rgba(8,7,4,.35) 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; mix-blend-mode:multiply;
  background: linear-gradient(100deg, rgba(20,45,38,.4), transparent 55%);
}
.hero-inner{ position:relative; z-index:2; width:100%; padding: 140px clamp(20px,4vw,48px) 72px; }
.hero-eyebrow{ display:flex; align-items:center; gap:.7em; margin-bottom: 22px; flex-wrap:wrap; }
.hero h1{ color:#fdfaf2; max-width: 16ch; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero .lede{ color: #e7e0cf; margin-top: 18px; max-width: 52ch; }
.hero-cta{ display:flex; gap:14px; margin-top: 34px; flex-wrap:wrap; }

.hero-stats{
  margin-top: 56px; display:grid; grid-template-columns: repeat(4,1fr); gap: 0;
  border-top: 1px solid rgba(251,247,238,.22);
}
.hero-stats div{ padding: 16px clamp(0px,1vw,16px) 0; border-inline-start: 1px solid rgba(251,247,238,.22); min-width:0; }
.hero-stats div:first-child{ border-inline-start:none; padding-inline-start:0; }
.hero-stat-num{ font-family: var(--font-mono); font-size: clamp(1.2rem,1.8vw,1.8rem); color:#fff; display:block; letter-spacing:.01em; }
.hero-stat-label{ font-size:.8rem; color:#cfc6ac; margin-top:6px; letter-spacing:.03em; }

/* hero content stagger-in on load */
.hero-intro{
  opacity:0; transform: translateY(18px);
  animation: hero-in .85s cubic-bezier(.16,.84,.44,1) both;
  animation-delay: calc(var(--i,0) * 110ms + .15s);
}
@keyframes hero-in{ to{ opacity:1; transform:none; } }

.hero-slide-dots{ position:absolute; z-index:3; bottom: 26px; inset-inline-end: clamp(20px,4vw,48px); display:flex; gap:8px; }
.hero-slide-dots button{ width:22px; height:3px; background: rgba(255,255,255,.35); border:none; cursor:pointer; padding:0; }
.hero-slide-dots button[data-active="true"]{ background:#fff; }
.scroll-cue{ position:absolute; z-index:3; bottom: 26px; inset-inline-start: clamp(20px,4vw,48px); display:flex; align-items:center; gap:10px; color: rgba(255,255,255,.75); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; }
.scroll-cue-line{ width:1px; height:28px; background: rgba(255,255,255,.4); position:relative; overflow:hidden; }
.scroll-cue-line::after{ content:""; position:absolute; inset-inline:0; top:-100%; height:100%; background:#fff; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue{ to{ top:100%; } }

@media (max-width: 720px){
  .hero-stats{ grid-template-columns: repeat(2,1fr); row-gap:18px; }
  .hero-stats div:nth-child(3){ border-inline-start:none; }
}

/* --------------------------------- sections --------------------------------- */
section{ padding: 110px 0; position:relative; }
.section-head{ max-width: 62ch; margin-bottom: 56px; }
.section-head .tag{ margin-bottom: 18px; }
.section-head h2{ margin-top: 14px; }
.section-head p{ margin-top: 16px; color: var(--ink-500); }

.section--alt{ background: var(--surface); }
.section--dark{ background: #17140d; color:#e6ddc9; }
.section--dark h2, .section--dark h3{ color:#f5efe0; }
.section--dark .ink-500-eq{ color:#b3a685; }

.reveal{
  opacity:0; transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: calc(var(--i,0) * 70ms);
}
.reveal[data-shown="true"]{ opacity:1; transform:none; }

/* ---------------------------------- about ----------------------------------- */
.about-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items:center; }
.about-grid > *{ min-width:0; }
.about-figure{ position:relative; border-radius: var(--radius-m); overflow:hidden; box-shadow: var(--shadow-2); aspect-ratio: 4/5; }
.about-figure img{ width:100%; height:100%; object-fit:cover; }
.about-figure figcaption{
  position:absolute; inset-inline:0; bottom:0; padding: 16px 18px;
  background: linear-gradient(0deg, rgba(10,9,6,.75), transparent);
  color:#efe9d8; font-family: var(--font-mono); font-size:.82rem; letter-spacing:.02em;
}
.about-stats{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); margin-top: 34px; border-radius: var(--radius-m); overflow:hidden; }
.about-stats div{ background: var(--bg-elevated); padding: 20px; min-width:0; }
.about-stat-num{ font-family: var(--font-mono); font-size: 1.7rem; color: var(--accent-ink); display:block; }
.about-stat-label{ font-size: .88rem; color: var(--ink-500); margin-top: 4px; }

blockquote.signoff{
  margin: 36px 0 0; padding-inline-start: 20px; border-inline-start: 3px solid var(--accent);
  font-family: var(--font-display); font-size: 1.2rem; color: var(--ink-900); font-weight:400;
}
blockquote.signoff cite{ display:block; font-family: var(--font-mono); font-style:normal; font-size:.84rem; color: var(--ink-500); margin-top: 12px; }

@media (max-width: 880px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-figure{ order:-1; aspect-ratio: 16/10; }
}

/* --------------------------------- ore cards --------------------------------- */
.ore-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius-m); overflow:hidden; }
.ore-card{ background: var(--bg-elevated); position:relative; display:flex; flex-direction:column; }
.ore-card--photo .ore-media{ aspect-ratio: 1/1; overflow:hidden; position:relative; }
.ore-card--photo .ore-media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.ore-card:hover .ore-media img{ transform: scale(1.06); }
.ore-card--photo{ transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
.ore-card--photo:hover{ box-shadow: var(--shadow-1); z-index:2; }
.ore-card--swatch .ore-media{ aspect-ratio:1/1; background:
  repeating-linear-gradient(135deg, var(--surface-2) 0 2px, var(--surface) 2px 5px);
  position:relative; display:grid; place-items:center;
}
.ore-card--swatch .ore-media .purity{ font-family: var(--font-mono); font-size: 2.1rem; color: var(--accent-ink); }
.ore-card--swatch .ore-media .purity sup{ font-size: 1rem; }
.ore-tag-corner{ position:absolute; top:10px; inset-inline-start:10px; font-family: var(--font-mono); font-size:.74rem; letter-spacing:.02em; color:#fff; background: rgba(20,16,10,.55); padding: 3px 9px; border-radius: 3px; backdrop-filter: blur(3px); }
.ore-body{ padding: 20px 20px 22px; display:flex; flex-direction:column; gap:6px; flex:1; }
.ore-name{ font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-900); }
.ore-formula{ font-family: var(--font-mono); font-size:.84rem; color: var(--accent-ink); }
.ore-desc{ font-size:.95rem; color: var(--ink-500); line-height:1.7; margin-top:4px; }

@media (max-width: 980px){ .ore-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .ore-grid{ grid-template-columns: 1fr; } }

/* --------------------------------- process ------------------------------------ */
.process-list{ display:flex; flex-direction:column; }
.process-item{
  display:grid; grid-template-columns: 120px 1fr 1fr; gap: 32px; align-items:center;
  padding: 34px 0; border-top: 1px solid var(--line);
}
.process-item > *{ min-width:0; }
.process-item:last-child{ border-bottom: 1px solid var(--line); }
.process-tag{ font-family: var(--font-mono); font-size: .88rem; color: var(--ink-400); }
.process-tag b{ display:block; font-size: 1.5rem; color: var(--accent-ink); font-weight:500; }
.process-text h3{ margin-bottom:8px; }
.process-text p{ color: var(--ink-500); font-size:.94rem; }
.process-figure{ border-radius: var(--radius-m); overflow:hidden; aspect-ratio: 16/10; box-shadow: var(--shadow-1); }
.process-figure img{ width:100%; height:100%; object-fit:cover; }

@media (max-width: 880px){
  .process-item{ grid-template-columns: 1fr; gap:16px; }
  .process-figure{ order:-1; }
}

/* --------------------------------- quality / assay ----------------------------- */
.assay-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:start; }
.assay-wrap > *{ min-width:0; }
.assay-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.assay-card{
  background: var(--bg-elevated); border:1px solid var(--line); border-radius: var(--radius-m);
  padding: 30px clamp(20px,3vw,36px); box-shadow: var(--shadow-1);
}
.assay-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-bottom: 1px dashed var(--line-strong); padding-bottom: 16px; margin-bottom: 18px; }
.assay-head .big{ font-family: var(--font-mono); font-size: 2.6rem; color: var(--accent-ink); line-height:1; }
.assay-head .big sup{ font-size:1.1rem; }
.assay-table{ width:100%; border-collapse:collapse; font-family: var(--font-mono); font-size:.92rem; }
.assay-table th{ text-align: start; font-weight:500; color: var(--ink-500); padding: 8px 0; border-bottom:1px solid var(--line); font-size:.8rem; letter-spacing:.03em; }
.assay-table td{ padding: 8px 0; border-bottom:1px solid var(--line); }
.assay-table td:last-child, .assay-table th:last-child{ text-align:end; color: var(--ink-900); }
.assay-note{ font-family: var(--font-body); font-size:.92rem; color: var(--ink-500); margin-top:18px; }

.assay-side{ display:flex; flex-direction:column; gap: 22px; }
.marker-figure{ border-radius: var(--radius-m); overflow:hidden; box-shadow: var(--shadow-1); aspect-ratio: 4/3.4; position:relative; }
.marker-figure img{ width:100%; height:100%; object-fit:cover; }
.marker-figure figcaption{ position:absolute; inset-inline:0; bottom:0; padding:14px 16px; background: linear-gradient(0deg, rgba(8,7,4,.8), transparent); color:#f1ead8; font-family:var(--font-mono); font-size:.8rem; }
.partner-strip{ display:flex; flex-wrap:wrap; gap:10px; }
.partner-chip{ border:1px solid var(--line-strong); border-radius: 999px; padding: 7px 16px; font-size:.88rem; color: var(--ink-700); background: var(--bg-elevated); }

@media (max-width: 880px){ .assay-wrap{ grid-template-columns:1fr; } }

/* --------------------------------- cooperation / map ----------------------------- */
.coop-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.coop-grid > *{ min-width:0; }
.coop-list{ display:flex; flex-direction:column; gap:0; }
.coop-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding: 16px 0; border-top:1px solid rgba(230,221,201,.16); min-width:0; }
.coop-row .name{ min-width:0; }
.coop-row:last-child{ border-bottom: 1px solid rgba(230,221,201,.16); }
.coop-row .name{ font-family: var(--font-display); font-size:1.05rem; }
.coop-row .status{ font-family: var(--font-mono); font-size:.8rem; letter-spacing:.04em; padding:4px 10px; border-radius:999px; }
.status--active{ color:#8fdcc0; background: rgba(98,199,169,.14); }
.status--prospect{ color:#e0c28a; background: rgba(224,194,138,.12); }
.route-diagram{ width:100%; height:auto; }
.route-lines line{ transition: stroke-dashoffset 1.15s cubic-bezier(.16,.84,.44,1); }
#routeWrap.in-view .route-lines line{ stroke-dashoffset: 0; }
#routeWrap:not(.in-view) circle, #routeWrap:not(.in-view) text{ opacity:0; transition: opacity .6s ease; }
#routeWrap.in-view circle, #routeWrap.in-view text{ opacity:1; transition: opacity .6s ease .9s; }

@media (max-width: 880px){
  .coop-grid{ grid-template-columns: 1fr; gap:36px; }
}

/* --------------------------------- gallery -------------------------------------- */
.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 8px; }
.g-item{ overflow:hidden; border-radius: var(--radius-s); position:relative; cursor: zoom-in; }
.g-item img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.g-item:hover img{ transform: scale(1.08); }
.g-span-2r{ grid-row: span 2; }
.g-span-2c{ grid-column: span 2; }

.video-strip{ margin-top: 44px; }
.video-strip-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 18px; gap:12px; flex-wrap:wrap; }
.video-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.video-card{ border-radius: var(--radius-m); overflow:hidden; background:#000; box-shadow: var(--shadow-1); position:relative; }
.video-card video{ width:100%; aspect-ratio: 9/16; object-fit:cover; display:block; background:#000; }
.video-card .video-label{ position:absolute; top:10px; inset-inline-start:10px; z-index:2; font-family:var(--font-mono); font-size:.74rem; color:#fff; background:rgba(0,0,0,.5); padding:3px 9px; border-radius:3px; pointer-events:none; }
.video-card{ transition: transform .3s ease, box-shadow .3s ease; }
.video-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); }

@media (max-width: 980px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .video-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){ .gallery-grid{ grid-template-columns: 1fr 1fr; grid-auto-rows:120px; } }

/* --------------------------------- lightbox -------------------------------------- */
.lightbox{ position:fixed; inset:0; z-index:100; background: rgba(10,8,5,.92); display:none; align-items:center; justify-content:center; padding: 40px; }
.lightbox[data-open="true"]{ display:flex; }
.lightbox img{ max-width:100%; max-height: 86vh; border-radius: 4px; box-shadow: var(--shadow-2); }
.lightbox-close{ position:absolute; top:20px; inset-inline-end:24px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; cursor:pointer; font-size:1.1rem; }
.lightbox-caption{
  /* deliberately physical (not logical) left/translateX: centering is
     symmetric and direction-agnostic, so this needs no RTL/LTR variant */
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  color:#f1ead8; font-size:.86rem; letter-spacing:.02em; background:rgba(10,8,5,.55);
  padding:9px 18px; border-radius:999px; max-width:80vw; text-align:center;
  font-family: var(--font-mono);
}

/* --------------------------------- contact -------------------------------------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.contact-grid > *{ min-width:0; }
.contact-list{ display:flex; flex-direction:column; gap: 22px; }
.contact-row{ display:flex; gap:16px; align-items:flex-start; padding-bottom:22px; border-bottom:1px solid var(--line); min-width:0; }
.contact-row > div{ min-width:0; }
.contact-row:last-child{ border-bottom:none; }
.contact-icon{ width:38px; height:38px; flex:none; border-radius:50%; background: var(--accent-soft); color: var(--accent-ink); display:grid; place-items:center; }
.contact-icon svg{ width:17px; height:17px; }
.contact-row .label{ font-size:.86rem; color: var(--ink-500); letter-spacing:.02em; display:block; margin-bottom:4px; }
.contact-row .value{ font-family: var(--font-mono); font-size:1.02rem; color: var(--ink-900); margin-top:2px; }
.contact-row a.value{ text-decoration:none; }
.contact-row a.value:hover{ color: var(--accent-ink); }
.phone-stack{ display:flex; flex-direction:column; gap:6px; }

.contact-card{ background: var(--bg-elevated); border:1px solid var(--line); border-radius: var(--radius-m); padding: 32px; box-shadow: var(--shadow-1); }
.form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.form-row label{ font-size:.88rem; color: var(--ink-500); }
.form-row input, .form-row textarea{
  width:100%; background: var(--bg); border:1px solid var(--line-strong); border-radius: var(--radius-s);
  padding: .8em 1em; font-family: var(--font-body); color: var(--ink-900); resize: vertical;
}
.form-row input:focus, .form-row textarea:focus{ border-color: var(--accent); }

@media (max-width: 880px){ .contact-grid{ grid-template-columns: 1fr; } }

/* --------------------------------- footer -------------------------------------- */
footer{ background:#120f0a; color:#a99c7c; padding: 56px 0 30px; }
.footer-top{ display:flex; justify-content:space-between; gap: 40px; flex-wrap:wrap; padding-bottom: 34px; border-bottom: 1px solid rgba(169,156,124,.18); }
.footer-brand{ display:flex; align-items:center; gap:.6em; }
.footer-brand .brand-mark{ color: var(--accent-ink); width:28px; height:28px; }
.footer-brand span{ font-family: var(--font-display); color:#f2ead6; font-size:1.1rem; }
.footer-links{ display:flex; gap: 48px; flex-wrap:wrap; }
.footer-links > div{ min-width:0; }
.footer-links h4{ color:#f2ead6; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.05em; margin-bottom:12px; font-weight:500; }
.footer-links a{ text-decoration:none; color:#a99c7c; font-size:.93rem; display:block; padding: 5px 0; transition: color .15s ease; }
.footer-links a:hover{ color: var(--accent-ink); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top: 22px; font-size:.85rem; flex-wrap:wrap; gap:10px; }

@media (max-width: 720px){
  .footer-top{ flex-direction:column; }
}

/* --------------------------------- responsive nav -------------------------------- */
@media (max-width: 900px){
  .nav{ position:fixed; inset-inline:0; top:0; height:100svh; background: var(--bg-elevated); flex-direction:column; justify-content:center; gap: 26px; transform: translateY(-100%); transition: transform .35s ease; z-index:55; }
  .nav[data-open="true"]{ transform: translateY(0); }
  .nav a{ font-size:1.3rem; }
  .nav-burger{ display:block; }

  /* touch targets: 44px is the standard comfortable minimum, the 36px
     desktop chrome is too tight for a thumb */
  .theme-toggle, .lang-toggle, .nav-burger{ width:44px; min-width:44px; height:44px; }
}

/* the bilingual name+subtitle lockup doesn't fit next to the three 44px
   header buttons under ~480px — drop the (purely decorative) subtitle
   line first, tighten the header's own padding and button spacing to
   free up real room (a classic desktop scrollbar alone eats ~15px of
   the viewport a phone wouldn't lose, so this needs real margin, not a
   pixel-exact fit), and let the company name itself shrink to fit —
   it stays visible on every real phone width. Only on genuinely
   legacy widths (< 340px) does the name give way to the mark alone,
   which already carries the wordmark */
@media (max-width: 480px){
  .site-header{ padding-inline: 14px; }
  .header-actions{ gap: 6px; }
  .brand{ min-width:0; flex:1 1 auto; gap:.5em; }
  .brand > span{ min-width:0; overflow:hidden; }
  .brand-sub{ display:none; }
  .brand-mark{ width:34px; height:34px; }
  .brand-name{ font-size: clamp(.86rem, 4.8vw, 1.1rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
}
@media (max-width: 340px){
  .brand span{ display:none; }
  .brand-mark{ width:32px; height:32px; }
}

/* --------------------------------- mobile rhythm -------------------------------- */
@media (max-width: 640px){
  /* the desktop's generous 110px breathing room reads as dead space once
     stacked on a phone — tighten the whole page's vertical rhythm */
  section{ padding: 68px 0; }
  .hero-inner{ padding-top: 108px; padding-bottom: 56px; }
  .hero-stats{ margin-top: 40px; }
  .section-head{ margin-bottom: 40px; }
  .footer-links a{ font-size: .96rem; }

  /* a handful of labels/tags/mono bits read comfortably at desktop's
     tighter sizes but drop below ~13px on a real phone once the browser's
     own text scaling kicks in — raise the floor so nothing on mobile
     needs a squint */
  .hero-stat-label{ font-size: .84rem; }
  .hero-stat-num{ font-size: clamp(1.3rem, 5vw, 1.7rem); }
  .tag{ font-size: .88rem; padding: .4em 1em; }
  .specimen{ font-size: .86rem; }
  .process-tag{ font-size: .9rem; }
  .ore-formula{ font-size: .88rem; }
  .assay-table{ font-size: .96rem; }
  .partner-chip{ font-size: .9rem; }
  .divider-note{ font-size: .84rem; }
}

/* --------------------------------- misc ----------------------------------------- */
.divider-note{ display:flex; align-items:center; gap:12px; color: var(--ink-400); font-family: var(--font-mono); font-size:.8rem; letter-spacing:.04em; margin: 8px 0 0; }
.divider-note::before, .divider-note::after{ content:""; height:1px; background: var(--line-strong); flex:1; }

.skip-link{ position:absolute; inset-inline-start:-999px; top:auto; background: var(--accent); color:#fff; padding:12px 20px; z-index:200; }
.skip-link:focus{ inset-inline-start:12px; top:12px; }