/* ==========================================================================
   IT AND E (Pty) Ltd — Minerals Trading
   Design system, layout and motion.

   No web fonts by design: buyers in mainland Asia sit behind networks that
   block fonts.googleapis.com outright. A system stack keeps first paint
   under a second and removes a third-party dependency from the critical path.
   ========================================================================== */

:root{
  /* --- surface ramp: dark neutrals --- */
  --bg:        #0A0B0D;
  --bg-2:      #0F1114;
  --surface:   #14171B;
  --surface-2: #1A1E23;
  --line:      #23282F;
  --line-soft: #1B1F24;

  /* --- ink --- */
  --ink:       #EDEFF2;
  --ink-2:     #A8AFB8;
  --ink-3:     #6E767F;
  --ink-4:     #4A5158;

  /* --- one accent: IT & E brand yellow, used at low area coverage --- */
  --accent:      #FFC300;
  --accent-hi:   #FFD75E;
  --accent-dim:  #7A5D00;
  --accent-wash: rgba(255,195,0,.09);
  --accent-line: rgba(255,195,0,.26);

  /* --- type --- */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* --- metrics --- */
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 78rem;
  --nav-h: 4.5rem;
  --r: 3px;

  /* --- motion --- */
  --e-out: cubic-bezier(.16,.84,.34,1);
  --e-in-out: cubic-bezier(.62,.05,.24,1);
  --t-fast: .22s;
  --t: .5s;
  --t-slow: .9s;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--bg);
}

body{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(.975rem, .93rem + .18vw, 1.0625rem);
  line-height:1.65;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--accent); color:#0A0B0D; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ---------- type scale ---------- */

h1,h2,h3,h4{
  color:var(--ink);
  font-weight:560;
  letter-spacing:-.02em;
  line-height:1.1;
  margin:0;
  text-wrap:balance;
}

.h-display{ font-size:clamp(2.3rem, 1.2rem + 5.4vw, 5.15rem); letter-spacing:-.036em; line-height:1.08; font-weight:500; }
.h-1{ font-size:clamp(1.95rem, 1.2rem + 3.1vw, 3.4rem); letter-spacing:-.03em; }
.h-2{ font-size:clamp(1.4rem, 1.1rem + 1.3vw, 2.05rem); letter-spacing:-.022em; }
.h-3{ font-size:clamp(1.075rem, 1rem + .4vw, 1.28rem); letter-spacing:-.014em; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.lede{
  font-size:clamp(1.06rem, .98rem + .5vw, 1.3rem);
  line-height:1.55;
  color:var(--ink-2);
  max-width:58ch;
}

.label{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:block;
}
.label--accent{ color:var(--accent); }

.mono{ font-family:var(--mono); font-size:.86em; }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.dim{ color:var(--ink-3); }
.ink{ color:var(--ink); }
.nowrap{ white-space:nowrap; }

/* ---------- layout ---------- */

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap--wide{ max-width:92rem; }
.wrap--narrow{ max-width:54rem; }

.section{ padding-block:clamp(3.5rem, 8vw, 7.5rem); position:relative; }
.section--tight{ padding-block:clamp(2.5rem, 5vw, 4.5rem); }
.section--edge{ border-top:1px solid var(--line-soft); }

.grid{ display:grid; gap:clamp(1.25rem,3vw,2.25rem); }
.g-2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); }
.g-3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); }
.g-4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr)); }

.split{ display:grid; gap:clamp(1.75rem,5vw,4rem); grid-template-columns:1fr; }
@media (min-width:56rem){
  .split{ grid-template-columns:minmax(0,19rem) minmax(0,1fr); align-items:start; }
  .split--even{ grid-template-columns:1fr 1fr; }
  .sticky{ position:sticky; top:calc(var(--nav-h) + 2rem); }
}

.stack > * + *{ margin-top:1rem; }
.stack-s > * + *{ margin-top:.5rem; }
.stack-l > * + *{ margin-top:2rem; }
.row{ display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:center; }

.rule{ height:1px; background:var(--line-soft); border:0; margin:0; }

/* ---------- skip link ---------- */

.skip{
  position:absolute; left:.75rem; top:-4rem; z-index:200;
  background:var(--accent); color:#0A0B0D;
  padding:.6rem 1rem; border-radius:var(--r);
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  transition:top var(--t-fast) var(--e-out);
}
.skip:focus{ top:.75rem; }

/* ==========================================================================
   NAV
   ========================================================================== */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:height var(--t) var(--e-out), background var(--t) var(--e-out),
             border-color var(--t) var(--e-out);
}
.nav__inner{
  width:100%; max-width:92rem; margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav.is-stuck{
  height:3.5rem;
  background:rgba(10,11,13,.8);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-soft);
}

/* wordmark */
.brand{ display:flex; align-items:center; gap:.65rem; flex-shrink:0; }
.brand__logo{
  width:auto; height:1.55rem;
  transition:transform var(--t) var(--e-out), filter var(--t) var(--e-out);
}
.brand:hover .brand__logo{ transform:scale(1.06); filter:brightness(1.12); }
.brand__txt{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2); white-space:nowrap;
  border-left:1px solid var(--line); padding-left:.65rem;
  transition:color var(--t-fast) var(--e-out);
}
.brand:hover .brand__txt{ color:var(--ink); }
@media (max-width:26rem){ .brand__txt{ display:none; } }

/* desktop links */
.nav__links{ display:none; }
@media (min-width:62rem){ .nav__links{ display:flex; align-items:center; gap:.15rem; } }
.nav__link{
  position:relative; padding:.5rem .75rem;
  font-size:.8125rem; letter-spacing:.03em; color:var(--ink-3);
  transition:color var(--t-fast) var(--e-out); white-space:nowrap;
}
.nav__link:hover{ color:var(--ink); }
.nav__link::after{
  content:""; position:absolute; left:.75rem; right:.75rem; bottom:.15rem;
  height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t) var(--e-out);
}
.nav__link:hover::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]{ color:var(--ink); }
.nav__link[aria-current="page"]::after{ transform:scaleX(1); }

.nav__cta{
  display:none; margin-left:.75rem; padding:.5rem 1rem;
  border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2);
  transition:border-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);
}
@media (min-width:62rem){ .nav__cta{ display:inline-block; } }
.nav__cta:hover{ border-color:var(--accent-line); color:var(--ink); background:var(--accent-wash); }

/* burger */
.burger{
  display:grid; place-items:center;
  width:2.75rem; height:2.75rem; margin-right:-.6rem;
  position:relative; z-index:120;
}
@media (min-width:62rem){ .burger{ display:none; } }
.burger span{
  display:block; width:1.15rem; height:1.5px; background:var(--ink);
  transition:transform var(--t) var(--e-out), opacity var(--t-fast) var(--e-out);
}
.burger span + span{ margin-top:4px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(.4); }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:110;
  background:var(--bg);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--nav-h) var(--pad) 2rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .62s var(--e-in-out), visibility 0s linear .62s;
  visibility:hidden;
}
.drawer.is-open{ clip-path:inset(0 0 0 0); visibility:visible; transition-delay:0s; }
@media (min-width:62rem){ .drawer{ display:none; } }

.drawer__nav{ display:flex; flex-direction:column; gap:.15rem; }
.drawer__link{
  display:flex; align-items:baseline; gap:.9rem;
  padding:.6rem 0;
  font-size:clamp(1.55rem,8.5vw,2.3rem); font-weight:500; letter-spacing:-.032em;
  color:var(--ink);
  border-bottom:1px solid var(--line-soft);
  opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--e-out), transform .5s var(--e-out), color var(--t-fast) linear;
}
.drawer.is-open .drawer__link{ opacity:1; transform:none; }
.drawer.is-open .drawer__link:nth-child(1){ transition-delay:.16s; }
.drawer.is-open .drawer__link:nth-child(2){ transition-delay:.22s; }
.drawer.is-open .drawer__link:nth-child(3){ transition-delay:.28s; }
.drawer.is-open .drawer__link:nth-child(4){ transition-delay:.34s; }
.drawer.is-open .drawer__link:nth-child(5){ transition-delay:.40s; }
.drawer__link i{
  font-style:normal; font-family:var(--mono); font-size:.65rem;
  letter-spacing:.1em; color:var(--accent);
}
.drawer__link[aria-current="page"]{ color:var(--accent); }
.drawer__foot{
  margin-top:2.5rem; opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--e-out) .48s, transform .5s var(--e-out) .48s;
}
.drawer.is-open .drawer__foot{ opacity:1; transform:none; }

/* scroll progress */
.progress{
  position:fixed; inset:0 auto auto 0; z-index:130;
  height:2px; width:100%;
  background:linear-gradient(90deg,var(--accent-dim),var(--accent));
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  position:relative;
  min-height:min(100svh, 54rem);
  display:flex; align-items:flex-end;
  padding-top:calc(var(--nav-h) + 3rem);
  padding-bottom:clamp(2.5rem,7vw,5rem);
  overflow:hidden; isolation:isolate;
}
.hero--page{
  min-height:auto;
  padding-top:calc(var(--nav-h) + clamp(3rem,9vw,6.5rem));
  padding-bottom:clamp(2rem,5vw,3.5rem);
}

/* photographic ground — real plant/haulage imagery, heavily graded */
.hero__photo{
  position:absolute; inset:0; z-index:-3;
  width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
  filter:grayscale(.72) contrast(1.08) brightness(.5);
  transform:scale(1.06);
  animation:driftIn 2.4s var(--e-out) both, kenburns 26s var(--e-in-out) 2.4s infinite alternate;
}
@keyframes driftIn{ from{ opacity:0; transform:scale(1.14); } to{ opacity:1; transform:scale(1.06); } }
@keyframes kenburns{ from{ transform:scale(1.06) translate(0,0); } to{ transform:scale(1.15) translate(-1.5%,-1.5%); } }

/* animated ore-granule field */
.hero__canvas{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  opacity:0; transition:opacity 1.6s var(--e-out) .3s;
}
.hero__canvas.is-live{ opacity:.55; }

.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(76% 60% at 80% 6%, rgba(255,195,0,.10), transparent 64%),
    radial-gradient(56% 48% at 6% 94%, rgba(255,195,0,.045), transparent 70%),
    linear-gradient(180deg, rgba(10,11,13,.55) 0%, rgba(10,11,13,.76) 52%, var(--bg) 100%);
}

.hero__body{ position:relative; width:100%; }

/* masked line-by-line reveal */
.reveal-mask{ display:block; overflow:hidden; padding-bottom:.3em; margin-bottom:-.3em; }
.reveal-mask > span{
  display:block;
  /* Start clear of the padded mask box, or a sliver of glyph shows. */
  transform:translateY(calc(100% + .32em));
  animation:maskUp 1.05s var(--e-out) forwards;
}
.reveal-mask:nth-of-type(1) > span{ animation-delay:.14s; }
.reveal-mask:nth-of-type(2) > span{ animation-delay:.25s; }
.reveal-mask:nth-of-type(3) > span{ animation-delay:.36s; }
@keyframes maskUp{ to{ transform:translateY(0); } }

.hero__accent{ color:var(--accent); }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  margin-top:2rem; padding-top:1.25rem;
  border-top:1px solid var(--line-soft);
  animation:fadeUp .9s var(--e-out) .74s both;
}
.hero__meta span{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.hero__meta b{ color:var(--ink-2); font-weight:400; }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

.hero__cta{ margin-top:2rem; animation:fadeUp .9s var(--e-out) .86s both; }

/* scroll hint */
.scroll-hint{
  position:absolute; right:var(--pad); bottom:clamp(2.5rem,7vw,5rem);
  display:none; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-4);
  animation:fadeUp .9s var(--e-out) 1.1s both;
}
@media (min-width:62rem){ .scroll-hint{ display:flex; } }
.scroll-hint__bar{ width:1px; height:2.5rem; background:var(--line); position:relative; overflow:hidden; }
.scroll-hint__bar::after{
  content:""; position:absolute; inset:0 0 auto 0; height:40%;
  background:var(--accent);
  animation:trickle 2.1s var(--e-in-out) infinite;
}
@keyframes trickle{ 0%{ transform:translateY(-100%); } 55%,100%{ transform:translateY(250%); } }

/* ==========================================================================
   TILES — the three routes off the home page
   ========================================================================== */

.tiles{ display:grid; gap:1px; background:var(--line-soft); border-block:1px solid var(--line-soft); }
@media (min-width:52rem){ .tiles{ grid-template-columns:repeat(3,1fr); } }

.tile{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(2rem,6vw,4rem);
  padding:clamp(1.5rem,4vw,2.5rem);
  min-height:clamp(15rem,30vw,20rem);
  background:var(--bg);
}
.tile::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at var(--mx,50%) var(--my,50%), var(--accent-wash), transparent 60%);
  opacity:0; transition:opacity var(--t) var(--e-out);
}
.tile:hover::before,.tile:focus-visible::before{ opacity:1; }
.tile::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--e-out);
}
.tile:hover::after,.tile:focus-visible::after{ transform:scaleX(1); }

.tile__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.tile__idx{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color:var(--ink-4); }
.tile__glyph{ width:2.5rem; height:2.5rem; opacity:.9; overflow:visible; }
.tile__glyph [stroke]{ stroke:var(--accent); }
.tile__glyph .spin{ transform-origin:center; animation:spin 24s linear infinite; }
.tile:hover .tile__glyph .spin{ animation-duration:5s; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.tile__glyph .pulse{ transform-origin:center; animation:pulse 3.2s var(--e-in-out) infinite; }
@keyframes pulse{ 0%,100%{ opacity:.35; transform:scale(.9); } 50%{ opacity:1; transform:scale(1.05); } }
.tile__glyph .rise{ animation:rise 2.8s var(--e-in-out) infinite; }
@keyframes rise{ 0%,100%{ transform:translateY(2px); opacity:.5; } 50%{ transform:translateY(-2px); opacity:1; } }

.tile__title{ display:flex; align-items:center; gap:.6rem; }
.tile__title .arrow{
  width:1rem; height:1rem; flex-shrink:0; color:var(--accent);
  opacity:0; transform:translateX(-6px);
  transition:opacity var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.tile:hover .tile__title .arrow{ opacity:1; transform:none; }
.tile p{ margin-top:.6rem; font-size:.9375rem; max-width:34ch; }

/* ==========================================================================
   CARDS / PANELS
   ========================================================================== */

.card{
  position:relative;
  padding:clamp(1.25rem,3vw,1.85rem);
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  transition:border-color var(--t) var(--e-out), transform var(--t) var(--e-out), background var(--t) var(--e-out);
}
.card:hover{ border-color:var(--line); transform:translateY(-2px); background:var(--surface-2); }
.card__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.85rem; }
.card p{ font-size:.9375rem; }

.panel{
  padding:clamp(1.5rem,4vw,2.5rem);
  background:var(--bg-2);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
}
.panel--accent{
  border-color:var(--accent-line);
  background:linear-gradient(180deg,var(--accent-wash),transparent 60%),var(--bg-2);
}

/* photo frame with parallax */
.figure{
  position:relative; overflow:hidden;
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:#0C0E10;
}
.figure img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.55) contrast(1.06) brightness(.72);
  transform:scale(1.04);
  transition:filter .7s var(--e-out), transform .7s var(--e-out);
}
.figure:hover img{ filter:grayscale(.15) contrast(1.1) brightness(.85); transform:scale(1.09); }
.figure--tall img{ aspect-ratio:4/5; }
.figure--wide img{ aspect-ratio:16/9; }
.figure figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:1.5rem 1rem .85rem;
  background:linear-gradient(180deg,transparent,rgba(10,11,13,.9));
  font-family:var(--mono); font-size:.63rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ==========================================================================
   COMMODITIES — anchor block, spec table, grade bars
   ========================================================================== */

.anchor-block{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(158deg, var(--surface) 0%, var(--bg-2) 62%);
}
.anchor-block__art{
  position:relative; min-height:14rem;
  border-bottom:1px solid var(--line-soft);
  overflow:hidden; background:#0C0E10;
}
.anchor-block__art > svg{ position:absolute; inset:0; width:100%; height:100%; }
.anchor-block__art .tag{
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); background:rgba(10,11,13,.72);
  padding:.35rem .6rem; border-radius:2px;
  backdrop-filter:blur(4px);
}
.anchor-block__body{ padding:clamp(1.35rem,3.5vw,2.25rem); }

/* spec table */
.spec{ width:100%; border-collapse:collapse; font-size:.9rem; }
.spec caption{ text-align:left; margin-bottom:.9rem; }
.spec th,.spec td{ text-align:left; padding:.7rem .75rem; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.spec th{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400; width:38%;
}
.spec td{ color:var(--ink); }
.spec tr:last-child th,.spec tr:last-child td{ border-bottom:0; }
.spec tbody tr{ transition:background var(--t-fast) var(--e-out); }
.spec tbody tr:hover{ background:rgba(255,255,255,.018); }
@media (max-width:34rem){
  .spec th,.spec td{ display:block; width:100%; border-bottom:0; padding:.25rem .75rem; }
  .spec th{ padding-top:.85rem; }
  .spec td{ padding-bottom:.85rem; border-bottom:1px solid var(--line-soft); }
}

/* animated grade range bars */
.grade{ margin-top:1.85rem; }
.grade__row + .grade__row{ margin-top:1.2rem; }
.grade__hd{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.45rem; }
.grade__hd b{ font-weight:500; color:var(--ink); font-size:.9rem; }
.grade__hd span{ font-family:var(--mono); font-size:.75rem; color:var(--accent); font-variant-numeric:tabular-nums; }
.grade__track{ position:relative; height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.grade__band{
  position:absolute; inset-block:0;
  left:var(--from); width:var(--span);
  background:linear-gradient(90deg,var(--accent-dim),var(--accent));
  border-radius:99px;
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--e-out) var(--d,0s);
}
.is-in .grade__band{ transform:scaleX(1); }
.grade__scale{
  display:flex; justify-content:space-between; margin-top:.4rem;
  font-family:var(--mono); font-size:.6rem; color:var(--ink-4);
}

/* secondary commodity rows */
.crow{
  display:grid; gap:.35rem 1.5rem; align-items:baseline;
  padding:1.35rem 0; border-top:1px solid var(--line-soft);
  transition:padding-left var(--t) var(--e-out), background var(--t) var(--e-out);
}
@media (min-width:48rem){ .crow{ grid-template-columns:11rem minmax(0,1fr) 10rem; padding-block:1.6rem; } }
.crow:hover{ padding-left:.5rem; }
.crow:last-child{ border-bottom:1px solid var(--line-soft); }
.crow__name{ display:flex; align-items:center; gap:.7rem; color:var(--ink); font-weight:500; letter-spacing:-.01em; }
.crow__dot{
  width:5px; height:5px; border-radius:99px; background:var(--accent); flex-shrink:0;
  animation:ring 3s var(--e-out) infinite;
}
@keyframes ring{ 0%{ box-shadow:0 0 0 0 var(--accent-line); } 70%,100%{ box-shadow:0 0 0 8px rgba(255,195,0,0); } }
.crow__desc{ font-size:.9375rem; }
.crow__hs{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--ink-3); }

/* notice strip */
.notice{
  display:flex; gap:.9rem; align-items:flex-start;
  padding:1.1rem 1.25rem;
  border-left:2px solid var(--accent);
  background:var(--accent-wash);
  border-radius:0 var(--r) var(--r) 0;
  font-size:.9rem;
}
.notice svg{ width:1.05rem; height:1.05rem; flex-shrink:0; margin-top:.25rem; color:var(--accent); }

/* ==========================================================================
   CHAIN — mine gate to end buyer
   ========================================================================== */

.chain{ position:relative; }
.chain__svg{ width:100%; height:auto; overflow:visible; }
.chain__svg .track{ stroke:var(--line); stroke-width:1.5; fill:none; }
.chain__svg .draw{
  stroke:var(--accent); stroke-width:1.5; fill:none;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 2.6s var(--e-in-out) .2s;
}
.chain.is-in .chain__svg .draw{ stroke-dashoffset:0; }
.chain__svg .node{ fill:var(--bg); stroke:var(--line); stroke-width:1.5; }
.chain__svg .node-fill{ fill:var(--accent); opacity:0; transition:opacity .5s var(--e-out); }
.chain.is-in .node-fill{ opacity:1; }
.chain.is-in .n1{ transition-delay:.45s; }
.chain.is-in .n2{ transition-delay:.9s; }
.chain.is-in .n3{ transition-delay:1.35s; }
.chain.is-in .n4{ transition-delay:1.8s; }
.chain.is-in .n5{ transition-delay:2.25s; }
.chain__svg text{
  fill:var(--ink-3); font-family:var(--mono); font-size:8.5px;
  letter-spacing:.1em; text-transform:uppercase;
}
.chain__svg .spark{ fill:var(--accent-hi); opacity:0; }
.chain.is-in .spark{ animation:sparkFade 4.6s linear 2.9s infinite; }
@keyframes sparkFade{ 0%{ opacity:0; } 8%{ opacity:1; } 90%{ opacity:1; } 100%{ opacity:0; } }

/* numbered capability steps */
.steps{ counter-reset:s; }
.step{
  position:relative; display:grid; gap:.6rem 1.75rem;
  padding:clamp(1.5rem,4vw,2.25rem) 0;
  border-top:1px solid var(--line-soft);
}
@media (min-width:56rem){ .step{ grid-template-columns:3.5rem minmax(0,1fr) minmax(0,1.15fr); } }
.step:last-child{ border-bottom:1px solid var(--line-soft); }
.step__n{
  counter-increment:s; padding-top:.3rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color:var(--accent);
}
.step__n::before{ content:"0" counter(s); }
.step__t h3{ margin-bottom:.4rem; }
.step__t .tagline{
  font-family:var(--mono); font-size:.65rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-4);
}
.step__d{ font-size:.9375rem; }
.step__d ul{ margin:.85rem 0 0; padding:0; list-style:none; }
.step__d li{ position:relative; padding-left:1.1rem; margin-top:.4rem; font-size:.875rem; }
.step__d li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:1px; background:var(--accent);
}

/* ==========================================================================
   STATS / COUNTERS
   ========================================================================== */

.stat{ padding:1.25rem 0; border-top:1px solid var(--line-soft); }
.stat__v{
  display:block; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:clamp(1.55rem,1.1rem + 1.8vw, 2.4rem);
  letter-spacing:-.03em; color:var(--ink); line-height:1;
}
.stat__v small{ font-size:.5em; color:var(--accent); margin-left:.15em; letter-spacing:0; }
.stat__k{ display:block; margin-top:.6rem; font-size:.8125rem; color:var(--ink-3); }

/* ==========================================================================
   MARQUEE — commodity names only. No prices, by design.
   ========================================================================== */

.marquee{
  position:relative; overflow:hidden;
  border-block:1px solid var(--line-soft);
  padding-block:1rem;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee__item{
  display:flex; align-items:center; gap:1.5rem; padding-inline:1.5rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
.marquee__item::after{ content:""; width:4px; height:4px; border-radius:99px; background:var(--accent-dim); }

/* ==========================================================================
   CONTACT
   ========================================================================== */

.route{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:1rem;
  padding:clamp(1.5rem,3.5vw,2rem);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r);
  transition:border-color var(--t) var(--e-out), background var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.route:hover{ border-color:var(--accent-line); background:var(--surface-2); transform:translateY(-2px); }
.route__k{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.route h3{ font-size:1.1rem; }
.route > p{ font-size:.9rem; flex:1; }
.route__who{ padding-top:1rem; border-top:1px solid var(--line-soft); }
.route__who b{ display:block; color:var(--ink); font-weight:500; font-size:.9375rem; }
.route__who span{ font-size:.8125rem; color:var(--ink-3); }

/* email / phone action rows */
.act{
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:.65rem;
  font-family:var(--mono); font-size:.8125rem;
  color:var(--accent); border-bottom:1px solid transparent;
  transition:border-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
  overflow-wrap:anywhere;
}
.act:hover{ border-bottom-color:var(--accent-line); color:var(--accent-hi); }
.act svg{ width:.9rem; height:.9rem; flex-shrink:0; }

.copy{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-left:.5rem; padding:.2rem .5rem;
  border:1px solid var(--line); border-radius:2px;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
  transition:color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);
}
.copy:hover{ color:var(--ink); border-color:var(--accent-line); }
.copy.is-done{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-wash); }

/* toast */
.toast{
  position:fixed; z-index:150;
  left:50%; bottom:1.5rem; transform:translate(-50%,180%);
  padding:.7rem 1.15rem;
  background:var(--ink); color:var(--bg); border-radius:99px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  transition:transform .45s var(--e-out);
  pointer-events:none;
}
.toast.is-up{ transform:translate(-50%,0); }

/* ==========================================================================
   COMPLIANCE REGISTRY
   ========================================================================== */

.reg{ border-top:1px solid var(--line-soft); }
.reg__row{
  display:grid; gap:.2rem .75rem;
  padding:.95rem 0; border-bottom:1px solid var(--line-soft);
}
@media (min-width:40rem){ .reg__row{ grid-template-columns:minmax(0,16rem) minmax(0,1fr); align-items:baseline; } }
.reg__k{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);
}
.reg__v{ color:var(--ink); font-variant-numeric:tabular-nums; }
.reg__v .pending{
  display:inline-block; margin-left:.5rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--accent-line);
  border-radius:2px; padding:.1rem .4rem;
}

/* leadership */
.person{ display:flex; gap:1.15rem; align-items:flex-start; padding:1.35rem 0; border-top:1px solid var(--line-soft); }
.person:last-child{ border-bottom:1px solid var(--line-soft); }
.person__ini{
  display:grid; place-items:center; flex-shrink:0;
  width:3rem; height:3rem; border-radius:var(--r);
  background:var(--surface-2); border:1px solid var(--line);
  font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; color:var(--accent);
  transition:border-color var(--t) var(--e-out), background var(--t) var(--e-out);
}
.person:hover .person__ini{ border-color:var(--accent-line); background:var(--accent-wash); }
.person__b b{ display:block; color:var(--ink); font-weight:500; }
.person__b span{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3);
}
.person__b p{ margin-top:.5rem; font-size:.9rem; }

/* ==========================================================================
   CTA STRIP + BUTTONS
   ========================================================================== */

.cta{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:clamp(3rem,7vw,5.5rem);
  border-top:1px solid var(--line-soft);
}
.cta::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 120% at 50% 118%, var(--accent-wash), transparent 66%);
}

.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.85rem 1.4rem;
  border:1px solid var(--accent-line); border-radius:var(--r);
  background:var(--accent-wash);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink);
  position:relative; overflow:hidden; isolation:isolate;
  transition:color var(--t) var(--e-out), border-color var(--t) var(--e-out);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--accent);
  transform:translateY(101%);
  transition:transform .45s var(--e-out);
}
.btn:hover{ color:#0A0B0D; border-color:var(--accent); }
.btn:hover::before{ transform:translateY(0); }
.btn svg{ width:.95rem; height:.95rem; transition:transform var(--t) var(--e-out); }
.btn:hover svg{ transform:translateX(3px); }

.btn--ghost{ background:none; border-color:var(--line); color:var(--ink-2); }
.btn--ghost::before{ background:var(--ink); }
.btn--ghost:hover{ color:var(--bg); border-color:var(--ink); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot{ border-top:1px solid var(--line-soft); background:var(--bg-2); }
.foot__main{ display:grid; gap:clamp(2rem,5vw,3rem); padding-block:clamp(2.5rem,6vw,4rem); }
@media (min-width:52rem){ .foot__main{ grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)); } }
.foot h4{
  font-family:var(--mono); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400; margin-bottom:1rem;
}
.foot__nav{ display:flex; flex-direction:column; gap:.55rem; }
.foot__nav a{
  font-size:.9rem; color:var(--ink-2);
  transition:color var(--t-fast) var(--e-out), padding-left var(--t-fast) var(--e-out);
}
.foot__nav a:hover{ color:var(--accent); padding-left:.25rem; }
.foot address{ font-style:normal; font-size:.9rem; line-height:1.7; }

/* statutory line — registration + VAT */
.foot__legal{
  display:flex; flex-wrap:wrap; gap:.5rem 1.75rem; align-items:center;
  padding-block:1.35rem; border-top:1px solid var(--line-soft);
}
.foot__legal span,.foot__legal a{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-4);
}
.foot__legal b{ color:var(--ink-3); font-weight:400; }
.foot__legal a:hover{ color:var(--accent); }

/* ==========================================================================
   SCROLL REVEAL (JS-driven)
   ========================================================================== */

[data-anim]{
  opacity:0;
  transition:opacity .8s var(--e-out), transform .8s var(--e-out), clip-path .9s var(--e-in-out);
  transition-delay:var(--d,0s);
}
[data-anim="up"]{ transform:translateY(26px); }
[data-anim="fade"]{ transform:none; }
[data-anim="left"]{ transform:translateX(-24px); }
[data-anim="right"]{ transform:translateX(24px); }
[data-anim="scale"]{ transform:scale(.965); }
[data-anim="wipe"]{ opacity:1; clip-path:inset(0 100% 0 0); }
[data-anim="line"]{ opacity:1; transform:scaleX(0); transform-origin:left; }

.is-in[data-anim]{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }
.is-in[data-anim="line"]{ transform:scaleX(1); }

/* page enter / leave */
.page-enter{ animation:pageIn .55s var(--e-out) both; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
body.is-leaving{ opacity:0; transition:opacity .26s linear; }

/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  [data-anim]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .reveal-mask > span{ transform:none; }
  .grade__band{ transform:scaleX(1) !important; }
  .chain__svg .draw{ stroke-dashoffset:0 !important; }
  .chain__svg .node-fill{ opacity:1 !important; }
  .hero__canvas{ display:none; }
  .hero__photo{ transform:scale(1.02); }
  .marquee__track{ animation:none; }
}

/* print — buyers do print these pages for internal approval */
@media print{
  .nav,.drawer,.progress,.hero__canvas,.hero__photo,.scroll-hint,.marquee,.toast,.cta{ display:none !important; }
  :root{ --bg:#fff; --bg-2:#fff; --surface:#fff; --ink:#000; --ink-2:#222; --ink-3:#555; --line:#bbb; --line-soft:#ddd; }
  body{ background:#fff; color:#000; }
  .hero{ min-height:auto; padding-top:1rem; }
  .hero__veil{ display:none; }
  a{ text-decoration:underline; }
}

/* chain diagram: scrolls sideways on a narrow phone rather than shrinking to 4px type */
.chain__scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
.chain__scroll > svg{ min-width:34rem; }

/* ==========================================================================
   READING MEASURE
   A lede sized in ch and a body paragraph sized in ch resolve to different
   pixel widths, because ch tracks each element's own font size. Stacked, they
   left-align but end on a ragged right edge. Pin both to the same rem measure
   so a column of prose shares one edge.
   ========================================================================== */

.split > :last-child > p,
.split > :last-child > .lede,
.measure > p,
.measure > .lede{ max-width:40rem; }

/* .lede sets 58ch on itself; the rules above must win */
.split > :last-child > .lede,
.measure > .lede{ max-width:40rem; }

/* ==========================================================================
   LATE FIXES
   ========================================================================== */

/* Full-width photographic band. A tall image in one half of a two-column
   split leaves a hole beside it; across the full width it reads as intended. */
.figure--band img{ aspect-ratio:21/9; }
@media (max-width:48rem){ .figure--band img{ aspect-ratio:16/10; } }

/* The chrome specification table and the grade bars only sit comfortably side
   by side once there is real room. Below that they stack, rather than leaving
   200px of dead space inside the bordered card. */
@media (max-width:81.999rem){
  .anchor-block__body .split--even{ grid-template-columns:1fr; }
}

/* The wagon-rake photograph is portrait (960x1280). In a 21:9 band the default
   centre crop cuts the wagons in half, so this one gets a shallower crop
   biased down the frame to keep the rake and the horizon. */
.figure--band.figure--portrait img{ aspect-ratio:16/9; object-position:50% 62%; }
@media (max-width:48rem){ .figure--band.figure--portrait img{ aspect-ratio:4/3; } }