/* ============================================================
   GTA METALS MINING GROUP — Editorial house style
   Aesthetic: light, warm, editorial. Cream ground, espresso ink,
   copper used sparingly as an accent, never as decoration.
   Structure comes from hairline rules and whitespace; contrast
   comes from espresso bands, not from panels or drop shadows.
   Type: Instrument Serif (display) + Archivo (body, wide-tracked
   for micro-labels)
   ============================================================ */

/* ---------- Design tokens ---------- */
/* ============================================================
   BRAND — the only block you need to edit.
   Every colour on the site derives from these values. Set the six
   brand colours plus the three ground tones and the whole site,
   including the 3D viewer lighting and the globe, re-skins.
   Each colour is declared twice: once as a hex for direct use and
   once as an "-rgb" channel triplet so it can carry an alpha via
   rgb(var(--x-rgb) / 0.4). Keep the two in sync.

   CURRENT: the real GTA palette — "Blush & Molten Copper",
   transcribed from gta-brand.css. gta-brand.css is the source of
   record; this block is where the site consumes it.
   ============================================================ */
:root {
  /* -- brand: primary (structure, secondary text, quiet UI) -- */
  --brand-deep:   #2A1C14;   --brand-deep-rgb:  42 28 20;   /* espresso */
  --brand:        #3E2A1D;   --brand-rgb:       62 42 29;   /* cocoa    */
  --brand-soft:   #5C3D26;   --brand-soft-rgb:  92 61 38;   /* earth    */

  /* -- accent: the single highlight colour (rules, numerals, CTAs) -- */
  --accent-deep:  #A05F2E;   --accent-deep-rgb: 160 95 46;  /* copper deep */
  --accent:       #B0713F;   --accent-rgb:     176 113 63;  /* copper      */
  --accent-hi:    #DCA265;   --accent-hi-rgb:  220 162 101; /* gold        */

  /* -- ground: page background, scrims, panel fills -- */
  --ground:       #F5EBE2;   --ground-rgb:     245 235 226; /* cream */
  --ground-2:     #F0E3D8;   --ground-2-rgb:   240 227 216; /* sand  */
  --ground-deep:  #E8D6C6;   --ground-deep-rgb: 232 214 198;/* blush */

  /* -- ink -- */
  --text:         #2A1C14;   --text-rgb:        42 28 20;
  --muted:        rgb(42 28 20 / 0.70);
  --on-accent:    #2A1C14;   /* text sitting on an accent fill — fills are gold, so ink is espresso */
  --faint:        rgb(42 28 20 / 0.55);

  /* ============================================================
     Derived tokens below. These are consumed across every page and
     are named for their role, not their colour — leave them alone.
     ============================================================ */

  /* legacy palette aliases (the page CSS still calls these names) */
  --bg-0:      var(--ground);
  --bg-1:      var(--ground-2);
  --ink:       var(--ground-deep);
  --teal-deep: var(--brand-deep);
  --teal:      var(--brand);
  --teal-soft: var(--brand-soft);
  --metal:      var(--accent);
  --metal-hi:   var(--accent-deep);  /* on cream the DEEPER copper is the legible one */
  --metal-deep: var(--accent-deep);
  --metal-fill: var(--accent-hi);    /* gold — the only accent that carries espresso text at AA */

  /* rules and washes replace frosted panels.
     NOTE: custom properties resolve where they are DECLARED, so these do not
     follow a redeclared --text-rgb further down the tree. The .on-dark block
     below restates every one of them; keep the two lists in step. */
  --rule:     rgb(42 28 20 / 0.18);
  --rule-hi:  rgb(42 28 20 / 0.34);
  --panel:    rgb(42 28 20 / 0.030);
  --panel-hi: rgb(42 28 20 / 0.060);

  --glass:        var(--panel);
  --glass-2:      var(--panel-hi);
  --glass-brd:    var(--rule);
  --glass-brd-hi: var(--rule-hi);
  --blur: 0px;

  /* shape — bordered surfaces take a 4px radius, buttons and chips are pills */
  --r-xl: 4px; --r-lg: 4px; --r-md: 4px; --r-sm: 4px;
  --r-pill: 999px;

  /* shadow — retired; valid no-ops so multi-value box-shadow still parses */
  --shadow: 0 0 #0000;
  --shadow-sm: 0 0 #0000;
  --inset-hi: 0 0 #0000;

  /* signature fields */
  --field-hero: radial-gradient(120% 100% at 50% 105%, #B0713F 0%, #C79A76 38%, #E5CDBA 70%, #F0E3D8 100%);
  /* the same field carrying alpha, so it can veil photography instead of covering it */
  --field-hero-scrim: radial-gradient(120% 100% at 50% 108%,
      rgb(176 113 63 / 0.90) 0%, rgb(199 154 118 / 0.82) 34%,
      rgb(229 205 186 / 0.72) 64%, rgb(245 235 226 / 0.62) 100%);
  --field-dark: linear-gradient(180deg, #2A1C14 0%, #3E2A1D 60%, #5C3D26 100%);

  /* metal ramps — *-on-light for cream sections, *-on-dark for espresso bands.
     Rule: light ramps on the dark band, dark ramps on cream — never the reverse. */
  --metal-copper:        linear-gradient(100deg,#7A3B18 0%,#C97C42 22%,#F3D2AC 42%,#B0713F 60%,#8A4720 78%,#E0AE7C 100%);
  --metal-iron-on-light: linear-gradient(100deg,#3B3732 0%,#736C63 26%,#A7A199 46%,#5C5650 66%,#37332E 100%);
  --metal-lith-on-light: linear-gradient(100deg,#5E6672 0%,#8F97A3 26%,#B4BBC4 46%,#7B838F 68%,#585F6A 100%);
  --metal-mang-on-light: linear-gradient(100deg,#3A3442 0%,#6E6679 26%,#9C93A8 46%,#544E5F 68%,#332E3A 100%);
  --metal-iron-on-dark:  linear-gradient(100deg,#9AA0A8 0%,#E6E9ED 30%,#B4BAC2 55%,#EDEFF2 78%,#A2A8B0 100%);
  --metal-mang-on-dark:  linear-gradient(100deg,#9E95B2 0%,#DCD5E6 30%,#B0A7C2 55%,#E4DEEC 78%,#A199B4 100%);
  /* Not in gta-brand.css — built to the same recipe as the iron and manganese
     on-dark ramps so lithium has a light counterpart for dark grounds. */
  --metal-lith-on-dark:  linear-gradient(100deg,#9DA6B4 0%,#E3E8EF 30%,#B6BECB 55%,#EDF1F6 78%,#A5AEBC 100%);
  --metal-gold:          linear-gradient(100deg,#8A5C22 0%,#DCA265 24%,#F7E0B8 44%,#C08341 66%,#8A5C22 100%);

  /* layout */
  --maxw: 1280px;
  --maxw-text: 66ch;
  --gutter: clamp(22px, 6vw, 92px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-slow: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: Archivo, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;

  --track: 0.3em;
}

/* ============================================================
   .on-dark — the espresso band.
   Restates the ground, ink and rule tokens so any block inside it
   re-skins without touching its own rules. Accent flips from copper
   to gold, because copper does not clear AA on espresso.
   ============================================================ */
/* The statement block and the footer carry the espresso band on every page.
   Applied through the selector rather than an .on-dark class in markup:
   both are copy-pasted into all nine pages, so this keeps it a one-place edit.

   The unscrolled navbar is here for a different reason. On the homepage it floats over the
   parallax hero, which is a dark photograph, and the site's espresso ink vanishes against it.
   Borrowing this block flips the nav to cream ink and a gold accent for exactly as long as it
   is transparent; .scrolled restores its cream background and the tokens revert with it.
   Gated on body.hero-dark so every other page still opens light. */
.on-dark, .statement, .footer,
body.hero-dark .nav:not(.scrolled) {
  --ground:       #2A1C14;   --ground-rgb:      42 28 20;
  --ground-2:     #3E2A1D;   --ground-2-rgb:    62 42 29;
  --ground-deep:  #5C3D26;   --ground-deep-rgb: 92 61 38;

  --brand-soft:   #E8D6C6;   --brand-soft-rgb: 232 214 198;  /* blush reads as soft ink here */
  --teal-soft:    #E8D6C6;

  --text:         #F0E3D8;   --text-rgb:       240 227 216;
  --muted:        rgb(240 227 216 / 0.65);
  --faint:        rgb(240 227 216 / 0.45);
  --on-accent:    #2A1C14;

  --metal:        #DCA265;
  --metal-hi:     #F2CB9A;
  --metal-deep:   #B0713F;
  --metal-fill:   #DCA265;

  --rule:     rgb(240 227 216 / 0.20);
  --rule-hi:  rgb(240 227 216 / 0.38);
  --panel:    rgb(240 227 216 / 0.045);
  --panel-hi: rgb(240 227 216 / 0.09);

  --glass:        rgb(240 227 216 / 0.045);
  --glass-2:      rgb(240 227 216 / 0.09);
  --glass-brd:    rgb(240 227 216 / 0.20);
  --glass-brd-hi: rgb(240 227 216 / 0.38);

  background: var(--field-dark);
  color: var(--text);
}


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

* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--text);
  line-height: 1.78;
  font-weight: 400;
  letter-spacing: 0.012em;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---------- Atmosphere background ---------- */
/* Still, and almost monochrome. The old build layered three coloured
   radial blooms plus drifting orbs; motion in the background is the
   loudest tell of a template, so this is now a single quiet gradient. */
.atmos {
  position: fixed;
  inset: 0;
  z-index: -2;
  /* The brand's signature field, held at the foot of the viewport so the page
     warms into copper rather than sitting flat cream. Fixed, so it stays put
     while sections scroll over it. */
  background:
    radial-gradient(128% 104% at 50% 112%,
      rgb(var(--accent-rgb) / 0.46) 0%, rgb(199 154 118 / 0.40) 34%,
      rgb(var(--ground-deep-rgb) / 0.42) 66%, transparent 88%),
    linear-gradient(180deg, var(--ground-2) 0%, var(--ground) 46%, var(--ground) 100%);
}

/* Orbs retired. The markup is decorative and aria-hidden on all nine
   pages, so it is neutralised here rather than deleted page by page. */
.orb { display: none; }

/* fine grain overlay — kept; film grain reads as print, not as UI */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Shared layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

section { position: relative; padding-block: clamp(88px, 13vw, 180px); }

/* A hairline between stacked sections does the work the old card
   borders were doing, and keeps the page reading as one sheet. */
section + section { border-top: 1px solid var(--rule); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--font-body);
  font-size: 0.66rem; font-weight: 400; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--teal-soft);
  line-height: 1;
}
.eyebrow::before {
  content: ""; width: 42px; height: 1px; flex: none;
  background: var(--metal); opacity: 0.85;
}

.sec-head { max-width: 780px; margin-bottom: clamp(52px, 8vw, 104px); }
.sec-head .title { margin-top: 30px; }
.sec-head .lead { margin-top: 26px; color: var(--muted); font-size: 1.06rem; max-width: 58ch; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.012em;
}

.title {
  font-size: clamp(2.3rem, 5.2vw, 4.5rem);
  font-weight: 300;
}

/* Copper accent, rendered as the brand's molten-copper ramp clipped to the
   glyphs. Used at display sizes; the flat --metal-hi below is the fallback
   wherever background-clip:text is unavailable or forced-colours is on. */
/* Each mineral carries its own metal: copper warm, iron grey, lithium blue-grey,
   manganese purple-grey. Ramps come straight from gta-brand.css.
   Rule from the sheet: dark ramps on cream, light ramps on the espresso band. */
.metal,
.metal-copper, .metal-iron, .metal-lithium, .metal-manganese, .metal-gold {
  color: var(--metal-hi);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Without this the ramp is sliced across line boxes, so a wrapped phrase can
     land a whole line in the ramp's pale highlight stop and vanish. Cloning
     gives every line the full dark-light-dark sweep. */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.metal {
  background-image: var(--metal-copper);
  font-style: italic;
  font-weight: 400;
}
.metal-copper    { background-image: var(--metal-copper); }
.metal-iron      { background-image: var(--metal-iron-on-light); }
.metal-lithium   { background-image: var(--metal-lith-on-light); }
.metal-manganese { background-image: var(--metal-mang-on-light); }
.metal-gold      { background-image: var(--metal-gold); }
:is(.on-dark, .statement, .footer) .metal           { background-image: var(--metal-gold); }
:is(.on-dark, .statement, .footer) .metal-iron      { background-image: var(--metal-iron-on-dark); }
:is(.on-dark, .statement, .footer) .metal-manganese { background-image: var(--metal-mang-on-dark); }
:is(.on-dark, .statement, .footer) .metal-lithium   { background-image: var(--metal-lith-on-dark); }

/* Filled metal swatch — the comp's device for tagging a mineral. Used on the
   portfolio chips and the showcase cards, where the type is too small to carry
   a gradient as text. */
.ore-cu { --ore: var(--metal-copper); }
.ore-fe { --ore: var(--metal-iron-on-light); }
.ore-li { --ore: var(--metal-lith-on-light); }
.ore-mn { --ore: var(--metal-mang-on-light); }
/* Forced-colours strips background-image, which would leave transparent text. */
@media (forced-colors: active) {
  .metal { -webkit-text-fill-color: currentColor; color: currentColor; }
}

/* `.glass` is still applied across all nine pages. It is now a hairline
   frame over a barely-there wash: no blur, no bevel, no drop shadow. */
.glass {
  background: var(--panel);
  border: 1px solid var(--rule);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* editorial helpers */
.rule { height: 1px; background: var(--rule); border: 0; }
.mono { font-family: var(--font-mono); }

/* ---------- Buttons ---------- */
.btn {
  --pad-y: 1.15em; --pad-x: 2.3em;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.9em;
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: 400; font-size: 0.69rem; letter-spacing: 0.26em;
  text-transform: uppercase; line-height: 1;
  cursor: pointer;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease), color 0.45s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; transition: transform 0.45s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:focus-visible { outline: 1px solid var(--metal-hi); outline-offset: 4px; }

/* Espresso solid on cream — copper as a fill only clears 4.2:1 behind
   11px uppercase, so the CTA takes the brand's solid instead. */
.btn-primary {
  color: var(--ground-2);
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  box-shadow: none;
}
.btn-primary:hover { background: var(--brand); border-color: var(--brand); }
/* on the espresso band an espresso button is invisible — gold takes over */
:is(.on-dark, .statement, .footer) .btn-primary { color: var(--on-accent); background: var(--metal-fill); border-color: var(--metal-fill); }
:is(.on-dark, .statement, .footer) .btn-primary:hover { background: var(--metal-hi); border-color: var(--metal-hi); }

.btn-ghost {
  color: var(--text);
  background: transparent;
  border-color: var(--rule-hi);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.btn-ghost:hover { border-color: var(--text); background: rgb(var(--text-rgb) / 0.04); }

.btn-block { width: 100%; }

/* Pill family — the sheet gives .gta-btn a 999px radius; chips, badges and
   the small round controls follow it so the shape language stays one thing.
   Ruled editorial rows stay square: there is no border box to round. */
.mode-chip, .chip, .chip.glass, .badge, .onc-badge, .oc-rel, .etl-meta span,
.pf-enq, .ms-btn, .stk-arrow, .nav-toggle, .lme, .tk-badge, .stk-pill .badge {
  border-radius: var(--r-pill);
}

/* ---------- Navbar ---------- */
/* Full-width bar, no floating capsule. Near-solid on scroll so the
   links stay legible over photography. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-block: 24px;
  border-bottom: 1px solid transparent;
  transition: padding 0.5s var(--ease), background 0.5s var(--ease), border-color 0.5s var(--ease);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  /* padding-block only — a `padding: 0` shorthand here would kill the
     inline gutter .wrap sets, leaving the brand out of alignment with
     the headline and every section below it. */
  padding-block: 0;
  border-radius: 0;
  border: none;
}
.nav.scrolled {
  padding-block: 13px;
  background: rgb(var(--ground-rgb) / 0.93);
  border-bottom-color: var(--rule);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.nav.scrolled .nav-inner { background: none; border: none; box-shadow: none; }

/* That block ends by painting `background: var(--field-dark)`, which is what makes the
   statement band and the footer espresso. The navbar only borrowed the block for its tokens,
   so the paint has to come back off — left on, it lays an opaque espresso bar across the top
   of the hero photograph. `color` is kept: cream ink is exactly what the nav wants here.
   Only applies while unscrolled; .scrolled stops matching this and takes its own background. */
body.hero-dark .nav:not(.scrolled) { background: none; }

/* Borrowing the .on-dark token block for the unscrolled navbar (see the top of this file)
   re-points --ground-2 and --brand-deep, but the component rules that pair with those tokens
   are keyed off the .on-dark *class*, which the navbar does not carry. So .btn-primary keeps
   its light-mode declarations and resolves them against dark-mode values: espresso on brown,
   about 1.2:1, effectively invisible. Restate the pairing here rather than widening the
   :is(.on-dark, .statement, .footer) list — a descendant selector inside :is() would raise
   that list's specificity to 0,3,1 and change how it cascades for the statement and footer. */
body.hero-dark .nav:not(.scrolled) .btn-primary {
  color: var(--on-accent);
  background: var(--metal-fill);
  border-color: var(--metal-fill);
}
body.hero-dark .nav:not(.scrolled) .btn-primary:hover {
  background: var(--metal-hi);
  border-color: var(--metal-hi);
}

.brand {
  display: inline-flex; align-items: center; gap: 15px;
  font-family: var(--font-display);
  font-size: 1.42rem; font-weight: 300; letter-spacing: 0.03em;
  line-height: 1.1;
}
/* A squared copper monogram reads as a house mark; the old rounded
   gradient tile read as an app icon. */
.brand .mark {
  width: 44px; height: 44px; border-radius: 0; display: grid; place-items: center;
  background: none;
  border: 1px solid var(--metal);
  color: var(--metal-hi);
  font-family: var(--font-display); font-weight: 400; font-size: 0.92rem;
  letter-spacing: 0.1em; text-indent: 0.1em;
  box-shadow: none;
}
.brand small {
  display: block; font-family: var(--font-body); font-size: 0.55rem;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--teal-soft);
  font-weight: 400; margin-top: 5px;
}

.nav-links { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); list-style: none; }
.nav-links a {
  position: relative; padding: 5px 0; border-radius: 0;
  font-size: 0.67rem; font-weight: 400; color: var(--muted);
  letter-spacing: 0.24em; text-transform: uppercase;
  transition: color 0.35s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--metal); transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav-links a:hover { color: var(--text); background: none; }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-cta .btn { --pad-y: 1em; --pad-x: 1.7em; font-size: 0.63rem; }
.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(150px, 22vh, 240px); padding-bottom: clamp(70px, 9vw, 130px); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(36px, 6vw, 88px); align-items: center; }

.hero h1 {
  font-size: clamp(2.6rem, 8vw, 6.4rem);
  font-weight: 300; letter-spacing: -0.02em; line-height: 0.99;
  overflow-wrap: break-word;
}
.hero .lead { margin-top: 34px; max-width: 46ch; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.14rem); }
.hero-actions { margin-top: 46px; display: flex; flex-wrap: wrap; gap: 16px; }

/* The pill becomes a tracked standfirst line with a hairline above it. */
.hero-pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 0 0; border-radius: 0; margin-bottom: clamp(16px, 3.4vh, 38px);
  border-top: 1px solid var(--rule);
  background: none; border-left: none; border-right: none; border-bottom: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
  font-size: 0.64rem; color: var(--muted);
  letter-spacing: var(--track); text-transform: uppercase; line-height: 1;
}
.hero-pill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--metal-hi); box-shadow: none; }
.hero-pill b { color: var(--text); font-weight: 400; }

/* hero side: stat stack, now ruled rather than floating */
.hero-cards { display: grid; gap: 0; }
.hero-card {
  padding: 26px 0; border-radius: 0; display: flex; align-items: center; gap: 22px;
  background: none; border: none; border-top: 1px solid var(--rule);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.hero-card:last-child { border-bottom: 1px solid var(--rule); }
.hero-card .ic {
  width: 34px; height: 34px; flex: none; border-radius: 0; display: grid; place-items: center;
  background: none; color: var(--metal); border: none;
}
.hero-card .ic svg { width: 21px; height: 21px; }
.hero-card .k { font-family: var(--font-display); font-size: 2rem; line-height: 1; font-weight: 300; }
.hero-card .v { font-size: 0.68rem; color: var(--muted); margin-top: 6px; letter-spacing: 0.2em; text-transform: uppercase; }
.hero-card:nth-child(2) { transform: none; }

/* Floating retired — stillness is the point. */
.float { animation: none; }

/* ---------- Trust marquee ---------- */
.trust { padding-block: 30px; border-block: 1px solid var(--rule); overflow: hidden; }
.trust-track { display: flex; gap: 88px; align-items: center; width: max-content; animation: marquee 64s linear infinite; }
.trust:hover .trust-track { animation-play-state: paused; }
.trust-item {
  display: inline-flex; align-items: center; gap: 14px; color: var(--faint);
  font-size: 0.64rem; font-weight: 400; white-space: nowrap;
  letter-spacing: var(--track); text-transform: uppercase;
}
.trust-item svg { width: 16px; height: 16px; color: var(--metal); opacity: 0.8; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: start; }
.about-copy p + p { margin-top: 24px; color: var(--muted); }
.about-copy .first { font-size: 1.3rem; color: var(--text); font-weight: 300; line-height: 1.68; }

/* The overlapping frosted quote card becomes an open pull-quote. */
.about-panel { padding: 0; border-radius: 0; }
.about-panel.glass {
  background: none; border: none; border-top: 1px solid var(--metal);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  padding-top: 34px;
}
.about-panel .quote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.32; font-weight: 300;
}
.about-panel .quote .metal { font-style: italic; }
.leaders { margin-top: 40px; display: grid; gap: 0; }
.leader { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-top: 1px solid var(--rule); }
.leader .av {
  width: 44px; height: 44px; border-radius: 0; flex: none; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 400; font-size: 0.95rem; color: var(--teal-soft);
  background: none; border: 1px solid var(--rule); letter-spacing: 0.06em;
}
.leader b { display: block; font-weight: 400; }
.leader span { font-size: 0.68rem; color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; }

/* ---------- Commodities ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.card {
  padding: 40px 34px 40px 0; border-radius: 0; display: flex; flex-direction: column; min-height: 230px;
  background: none; border: none; border-bottom: 1px solid var(--rule);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  transition: background 0.5s var(--ease);
}
.card + .card { border-left: 1px solid var(--rule); padding-left: 34px; }
.card:hover { transform: none; background: var(--panel); }
.card .ic {
  width: 30px; height: 30px; border-radius: 0; display: grid; place-items: center; margin-bottom: 28px;
  background: none; color: var(--metal); border: none;
}
.card .ic svg { width: 22px; height: 22px; }
.card h3 { font-size: 1.6rem; font-family: var(--font-display); font-weight: 300; }
.card p { margin-top: 14px; color: var(--muted); font-size: 0.9rem; }
.card .tag {
  margin-top: auto; padding-top: 26px; font-size: 0.6rem; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--teal-soft); font-weight: 400;
}
.card.feature { grid-column: span 2; min-height: 230px; }
.card.feature h3 { font-size: 2.1rem; }
.card.feature .ic { background: none; color: var(--metal-hi); }

/* ---------- Logistics journey (centerpiece) ---------- */
.journey { position: relative; }
/* Pills, so the segmented bar the chips used to form is now spaced. */
.modes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 56px; }
.mode-chip {
  display: inline-flex; align-items: center; gap: 11px; padding: 12px 22px;
  font-size: 0.63rem; font-weight: 400; color: var(--muted); letter-spacing: var(--track);
  text-transform: uppercase; border: 1px solid var(--rule); background: none;
}
.mode-chip svg { width: 15px; height: 15px; color: var(--metal); }
.mode-chip .n { color: var(--metal-hi); }

/* Numbered editorial rows on a single hairline spine. */
.timeline { position: relative; display: grid; gap: 0; }
.timeline::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--rule); opacity: 1;
}
.step { position: relative; padding-left: clamp(64px, 8vw, 108px); }
/* Numeral sits clear of the spine, with a short copper tick bridging
   the two — the tick must not run through the digits. */
.step-dot {
  position: absolute; left: 34px; top: 30px; width: auto; height: auto; border-radius: 0;
  display: block; font-family: var(--font-display); font-weight: 300; font-size: 1.5rem;
  color: var(--metal); background: none; border: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  letter-spacing: 0.04em;
}
.step-dot::before {
  content: ""; position: absolute; left: -25px; top: 0.72em; width: 18px; height: 1px;
  background: var(--metal);
}
.step-card {
  padding: 30px 0; border-radius: 0;
  background: none; border: none; border-top: 1px solid var(--rule);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.step:last-child .step-card { border-bottom: 1px solid var(--rule); }
.step-card .mode {
  font-size: 0.6rem; letter-spacing: var(--track); text-transform: uppercase; font-weight: 400;
  color: var(--teal-soft);
}
.step-card h3 { margin-top: 12px; font-size: 1.5rem; font-family: var(--font-display); font-weight: 300; }
.step-card p { margin-top: 10px; color: var(--muted); font-size: 0.9rem; max-width: 54ch; }

/* ---------- Quality features ---------- */
/* Open ruled columns, not cards. */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(28px, 4vw, 56px); }
.feat, .feat.glass {
  padding: 34px 0 44px; border-radius: 0;
  background: none; border: none; border-top: 1px solid var(--rule);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.feat .ic {
  width: 28px; height: 28px; border-radius: 0; display: grid; place-items: center; margin-bottom: 26px;
  background: none; color: var(--metal); border: none;
}
.feat .ic svg { width: 22px; height: 22px; }
.feat h3 { font-size: 1.5rem; font-family: var(--font-display); font-weight: 300; }
.feat p { margin-top: 14px; color: var(--muted); font-size: 0.9rem; }
.feat-link { color: var(--metal-hi); border-bottom: 1px solid rgb(var(--accent-hi-rgb) / 0.4); }
.feat-link:hover { border-bottom-color: var(--metal-hi); }

/* ---------- Stats band ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  padding: 0; border-radius: 0; text-align: left;
  background: none; border: none; border-block: 1px solid var(--rule);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.stat { padding: clamp(40px, 5vw, 64px) clamp(20px, 2.6vw, 38px); }
.stat:first-child { padding-left: 0; }
.stat .num {
  font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 4.6rem); font-weight: 300;
  line-height: 1; letter-spacing: -0.02em;
}
.stat .num .metal { font-style: normal; }
.stat .lbl {
  margin-top: 20px; color: var(--muted); font-size: 0.63rem;
  letter-spacing: var(--track); text-transform: uppercase; line-height: 1.7;
}
.stat + .stat { border-left: 1px solid var(--rule); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 0; }
.contact-info .title { margin-top: 28px; }
.contact-info .lead { color: var(--muted); margin-top: 24px; }
.info-list { display: grid; gap: 0; margin-top: 52px; }
.info-row, .info-row.glass {
  display: flex; align-items: center; gap: 20px; padding: 24px 0; border-radius: 0;
  background: none; border: none; border-top: 1px solid var(--rule);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.info-list .info-row:last-child { border-bottom: 1px solid var(--rule); }
.info-row .ic {
  width: 26px; height: 26px; flex: none; border-radius: 0; display: grid; place-items: center;
  background: none; color: var(--metal); border: none;
}
.info-row .ic svg { width: 20px; height: 20px; }
.info-row small {
  color: var(--teal-soft); display: block; font-size: 0.6rem;
  letter-spacing: var(--track); text-transform: uppercase; margin-bottom: 4px;
}
.info-row b { font-weight: 400; font-size: 1.02rem; }

/* Underlined fields — a form should read like a letterhead, not a widget. */
.form, .form.glass {
  padding: 0; border-radius: 0; display: grid; gap: 30px;
  background: none; border: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.field { display: grid; gap: 10px; }
.field.row2 { grid-template-columns: 1fr 1fr; gap: 30px; display: grid; }
.field label {
  font-size: 0.6rem; font-weight: 400; color: var(--teal-soft);
  letter-spacing: var(--track); text-transform: uppercase;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 0; border-radius: 0; color: var(--text);
  font-size: 1rem; font-family: var(--font-body); font-weight: 400;
  background: transparent; border: none; border-bottom: 1px solid var(--rule);
  transition: border-color 0.4s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgb(var(--text-rgb) / 0.42); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--metal); background: transparent;
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { -webkit-appearance: none; appearance: none; cursor: pointer; }
.field select option { background: var(--ground); color: var(--text); }
.form .btn { margin-top: 8px; }
.form-note {
  font-size: 0.6rem; color: var(--faint); text-align: center;
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.8;
}
.form-ok {
  display: none; padding: 20px; border-radius: 0; text-align: center; font-size: 0.86rem;
  color: var(--teal-soft); background: none; border: 1px solid rgb(var(--brand-soft-rgb) / 0.34);
  letter-spacing: 0.06em;
}
.form-ok.show { display: block; }

/* ---------- Footer ---------- */
.footer { padding-block: clamp(72px, 9vw, 116px) 44px; border-top: 1px solid var(--rule); margin-top: 0; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(36px, 5vw, 72px); }
.footer .brand { font-size: 1.3rem; }
.footer-blurb { margin-top: 28px; color: var(--muted); max-width: 38ch; font-size: 0.9rem; }
.footer-route {
  margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-size: 0.6rem; color: var(--teal-soft); font-weight: 400;
  letter-spacing: var(--track); text-transform: uppercase;
}
.footer-route span { opacity: 0.45; color: var(--metal); }
.footer h4 {
  font-family: var(--font-body); font-size: 0.6rem; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--faint); font-weight: 400; margin-bottom: 26px;
}
.footer ul { list-style: none; display: grid; gap: 14px; }
.footer ul a { color: var(--muted); font-size: 0.9rem; transition: color 0.3s var(--ease); }
.footer ul a:hover { color: var(--metal-hi); }
.footer-bottom {
  margin-top: clamp(56px, 7vw, 88px); padding-top: 28px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  color: var(--faint); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
}

/* ---------- Statement block ---------- */
/* A single held sentence at display size. The whole point is that nothing
   else is in the frame, so it gets its own generous band and no panel. */
.statement { padding-block: clamp(96px, 15vw, 210px); text-align: center; }
.statement-line {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.85rem, 4.4vw, 3.6rem);
  line-height: 1.22; letter-spacing: -0.012em;
  max-width: 26ch; margin: 0 auto; text-wrap: balance;
}
.statement-meta {
  margin-top: clamp(48px, 6vw, 76px);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(20px, 3vw, 44px);
  font-size: 0.6rem; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--faint);
}
/* hairline divider centred in the flex gap, so spacing stays symmetrical */
.statement-meta span { position: relative; }
.statement-meta span + span::before {
  content: ""; position: absolute; left: calc(-1 * clamp(10px, 1.5vw, 22px));
  top: 50%; transform: translateY(-50%);
  width: 1px; height: 11px; background: var(--rule);
}

/* ---------- Scroll reveal ---------- */
/* Slower and shallower than before; a prestige reveal should be felt
   rather than watched. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--ease-slow), transform 1.1s var(--ease-slow); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.1s; }
.reveal[data-d="2"] { transition-delay: 0.2s; }
.reveal[data-d="3"] { transition-delay: 0.3s; }
.reveal[data-d="4"] { transition-delay: 0.4s; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-cards { grid-template-columns: 1fr; }
  .hero-card { flex-direction: row; align-items: center; gap: 20px; }
  .hero-card:nth-child(2), .hero-card:nth-child(2).float { transform: none; animation: none; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card.feature { grid-column: span 2; }
  .card:nth-child(odd) { border-left: none; padding-left: 0; }
  .card:nth-child(even) { border-left: 1px solid var(--rule); padding-left: 34px; }
  .features { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding-inline: 0 clamp(20px, 3vw, 38px); }
  .stat:nth-child(odd) { border-left: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .nav-links, .nav-cta .btn-ghost, .nav-cta .btn-primary { display: none; }
  .nav-toggle { display: inline-grid; }
  /* .mobile-menu's display is set with the rest of its block further down.
     Declaring it here did nothing: the unconditional `.mobile-menu { display:
     none }` below has equal specificity and wins on source order. */
  .features { grid-template-columns: 1fr; }
  .field.row2 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .trust-track { gap: 54px; }
}

@media (max-width: 480px) {
  .cards { grid-template-columns: 1fr; }
  .card, .card + .card { border-left: none; padding-left: 0; }
  .card.feature { grid-column: span 1; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: none !important; padding-inline: 0; }
  .stat + .stat { border-top: 1px solid var(--rule); }
  .step { padding-left: 54px; }
  .step-dot { font-size: 1.25rem; }
  .step-dot::before { width: 16px; }
  .hero h1 { font-size: 2.5rem; letter-spacing: -0.015em; }
  .hero .lead { font-size: 1rem; }
}

/* ---------- Mobile menu ---------- */
.nav-toggle {
  width: 44px; height: 44px; border-radius: 0; place-items: center; cursor: pointer;
  background: none; border: 1px solid var(--rule); color: var(--text);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: border-color 0.35s var(--ease);
}
.nav-toggle:hover { border-color: var(--rule-hi); }
.nav-toggle svg { width: 20px; height: 20px; }
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 60; padding: 24px var(--gutter);
  background: var(--ground-deep);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  flex-direction: column; gap: 8px; transform: translateX(100%);
  /* Parked off-screen rather than removed, so the slide has something to
     animate. visibility keeps the parked panel out of the tab order and off the
     accessibility tree: it flips on instantly when opening, and only after the
     slide has finished when closing. */
  visibility: hidden;
  transition: transform 0.6s var(--ease-slow), visibility 0s linear 0.6s;
  grid-template-rows: auto 1fr auto;
}
.mobile-menu.open {
  transform: none;
  visibility: visible;
  transition: transform 0.6s var(--ease-slow), visibility 0s;
}

/* THE MENU'S DISPLAY MUST STAY HERE, BELOW THE RULE ABOVE.
   This lived in the @media (max-width: 760px) block about thirty lines earlier,
   where `display: none` above beat it purely on source order — media queries
   carry no specificity of their own. The panel was therefore display:none at
   every width on all nine pages, so tapping the hamburger added .open and
   changed nothing visible. Found 2026-08-03. If you move either rule, keep them
   adjacent and in this order. */
@media (max-width: 760px) {
  .mobile-menu { display: grid; }
}
.mobile-menu .mm-head { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu nav { display: grid; gap: 0; align-content: start; margin-top: 40px; overflow-y: auto; }
.mobile-menu nav a {
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 300; padding: 15px 0;
  border-bottom: 1px solid var(--rule); color: var(--text);
}
.mobile-menu .btn { margin-top: 28px; }

/* ---------- Photography / media ---------- */
/* Photography carries the page, so the coloured wash that used to sit
   over every image is much lighter here. */
.media { position: relative; overflow: hidden; }
.media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.88) contrast(1.05);
  transition: transform 1.6s var(--ease-slow), filter 1.6s var(--ease-slow);
}
.media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgb(var(--ground-rgb) / 0.14), rgb(var(--ground-rgb) / 0.08) 60%, rgb(var(--accent-deep-rgb) / 0.05));
}
.media.tall { aspect-ratio: 4 / 5; }

/* Copy-bearing photography needs a much heavier cream veil than the decorative
   kind: espresso ink on an unveiled photo is the one thing the light theme
   cannot carry. Weighted to the corner the copy actually occupies. */
.showcase-inner .media::after {
  background:
    linear-gradient(90deg, rgb(var(--ground-rgb) / 0.82) 0%, rgb(var(--ground-rgb) / 0.44) 46%, transparent 88%),
    linear-gradient(180deg, rgb(var(--ground-rgb) / 0.08) 0%, rgb(var(--ground-rgb) / 0.32) 62%, rgb(var(--ground-rgb) / 0.78) 100%);
}
.trip .media::after {
  background:
    linear-gradient(180deg, rgb(var(--ground-rgb) / 0.22) 0%, rgb(var(--ground-rgb) / 0.04) 34%, rgb(var(--ground-rgb) / 0.78) 100%);
}
.media.wide { aspect-ratio: 16 / 9; }
a:hover > .media img, .media:hover img, .trip:hover .media img, .card.feature:hover .media img {
  transform: scale(1.03); filter: saturate(1) contrast(1.02) brightness(1.04);
}

/* Hero visual */
.hero-visual { position: relative; }
.hero-frame { border-radius: 0; border: 1px solid var(--rule); box-shadow: none; }
.hero-badge {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 16px; padding: 20px 26px; border-radius: 0;
  background: rgb(var(--ground-rgb) / 0.9);
}
.hero-badge .ic {
  width: 26px; height: 26px; flex: none; border-radius: 0; display: grid; place-items: center;
  background: none; color: var(--metal); border: none;
}
.hero-badge .ic svg { width: 20px; height: 20px; }
.hero-badge b { font-family: var(--font-display); font-size: 1.4rem; font-weight: 300; }
.hero-badge span {
  display: block; font-size: 0.6rem; color: var(--muted);
  letter-spacing: 0.2em; text-transform: uppercase;
}

/* Commodity feature card with photo */
.card.feature { position: relative; overflow: hidden; }
.card.feature .media { position: absolute; inset: 0; z-index: 0; }
.card.feature .media img { filter: saturate(0.94) contrast(1.02) brightness(1.0); }
.card.feature .media::after { background: linear-gradient(120deg, rgb(var(--ground-rgb) / 0.84), rgb(var(--ground-rgb) / 0.52) 62%, rgb(var(--accent-deep-rgb) / 0.10)); }
/* photo fills the tile, so this one gets symmetric padding of its own
   rather than the ruled-column padding the plain cards use */
.card.feature { padding: 40px 34px; }
.card.feature > *:not(.media) { position: relative; z-index: 1; }

/* About visual */
.about-visual { position: relative; }
.about-visual .media {
  border-radius: 0; aspect-ratio: 4 / 5; border: none; box-shadow: none;
}
.about-panel.overlap { position: relative; margin: 40px 0 0; z-index: 2; }

/* Showcase band */
.showcase { padding-block: clamp(48px, 7vw, 88px); }
.showcase-inner {
  position: relative; min-height: clamp(380px, 52vw, 560px); border-radius: 0;
  overflow: hidden; display: flex; align-items: flex-end; border: none; box-shadow: none;
}
.showcase-inner .media { position: absolute; inset: 0; }
.showcase-inner .media img { filter: saturate(0.94) contrast(1.02) brightness(1.0); }
.showcase-copy { position: relative; z-index: 1; padding: clamp(32px, 6vw, 72px); max-width: 660px; }
.showcase-copy h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); }
.showcase-copy p { margin-top: 22px; color: var(--text); opacity: 0.88; max-width: 48ch; }
.showcase-copy .eyebrow { margin-bottom: 24px; }

/* Logistics triptych — taller, editorial crops on a shared hairline */
.triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 20px); margin-bottom: clamp(56px, 8vw, 96px); }
.trip {
  position: relative; border-radius: 0; overflow: hidden; aspect-ratio: 3 / 4;
  border: none; box-shadow: none;
}
.trip .media { position: absolute; inset: 0; }
.trip .trip-lbl {
  position: absolute; left: 22px; bottom: 20px; z-index: 1; display: flex; align-items: center; gap: 11px;
  font-weight: 400; font-size: 0.63rem; letter-spacing: var(--track); text-transform: uppercase;
}
.trip .trip-lbl svg { width: 15px; height: 15px; color: var(--metal-hi); }
.trip .trip-n {
  position: absolute; right: 22px; top: 18px; z-index: 1; font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 300; color: var(--metal-hi); letter-spacing: 0.08em;
}

@media (max-width: 980px) {
  .about-panel.overlap { margin: 32px 0 0; }
}
@media (max-width: 760px) {
  .triptych { grid-template-columns: 1fr; }
  .trip { aspect-ratio: 16 / 10; }
  .hero-frame { aspect-ratio: 16 / 11; }
}


/* ---------- Material pages (grade ladder, KPIs, compare, pricing) ---------- */
.subhero { position: relative; padding-top: clamp(150px, 22vh, 240px); padding-bottom: clamp(48px, 7vw, 88px); overflow: hidden; }
.subhero-bg { position: absolute; inset: 0; z-index: -1; display: flex; }
.subhero-slice { flex: 1 1 0; min-width: 0; position: relative; overflow: hidden; }
.subhero-slice + .subhero-slice { border-left: 1px solid rgb(var(--text-rgb) / 0.08); }
.subhero-slice img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.94) contrast(1.02) brightness(1.0); }
.subhero-slice:nth-child(odd) img { filter: saturate(0.94) contrast(1.02) brightness(1.0); }
.subhero-bg::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(95deg, rgb(var(--ground-rgb) / 0.82) 0%, rgb(var(--ground-rgb) / 0.32) 38%, rgb(var(--ground-rgb) / 0.10) 100%),
    linear-gradient(180deg, rgb(var(--ground-rgb) / 0.08) 0%, transparent 42%, rgb(var(--ground-rgb) / 0.62) 100%),
    linear-gradient(0deg, rgb(var(--ground-rgb) / 0.1), rgb(var(--ground-rgb) / 0.1)); }
/* sliced hero shows all three slices at every width */
.subhero h1 { font-size: clamp(2.6rem, 6.6vw, 5.4rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.0; max-width: 16ch; overflow-wrap: break-word; }
.subhero .lead { margin-top: 22px; max-width: 54ch; color: var(--muted); font-size: clamp(1.02rem, 1.5vw, 1.18rem); }
.subhero .eyebrow { margin-bottom: 22px; }
.breadcrumb { font-size: 0.58rem; color: var(--faint); margin-bottom: 22px; letter-spacing: var(--track); text-transform: uppercase; }
.breadcrumb a { color: var(--teal-soft); }

.kpis { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 46px; }
.kpi, .kpi.glass { padding: 20px 26px; border-radius: var(--r-md); background: none; border: 1px solid var(--rule); }
.kpi b { font-family: var(--font-display); font-size: 1.75rem; font-weight: 300; display: block; line-height: 1; }
.kpi span { font-size: 0.58rem; color: var(--muted); letter-spacing: var(--track); text-transform: uppercase;
  display: block; margin-top: 8px; }

/* grade ladder */
.ladder { display: grid; gap: 14px; }
.grade { display: grid; grid-template-columns: 132px 1fr 230px; gap: 26px; align-items: center;
  padding: 22px 26px; border-radius: var(--r-lg); transition: transform 0.3s var(--ease), border-color 0.3s var(--ease); }
.grade:hover { transform: none; border-color: var(--rule-hi); background: var(--panel-hi); }
.grade .gp { display: flex; flex-direction: column; gap: 7px; }
.grade .pct { font-family: var(--font-display); font-size: 2.4rem; line-height: 0.95; font-weight: 300;
  color: var(--metal-hi); }
.grade .code { font-size: 0.58rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--teal-soft); font-weight: 400; }
.grade .gm h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 300; }
.grade .gm .app { color: var(--metal-hi); font-weight: 400; font-size: 0.9rem; margin-top: 6px; }
.grade .gm .note { color: var(--muted); font-size: 0.86rem; margin-top: 6px; }
.grade .track { height: 8px; border-radius: 0; background: rgb(var(--text-rgb) / 0.08); overflow: hidden; }
.grade .fill { height: 100%; border-radius: 0; background: var(--metal); }
.grade .purline { margin-top: 9px; font-size: 0.78rem; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; }

/* compare Zn vs ZnO */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cmp { padding: 32px; border-radius: var(--r-lg); }
.cmp .sym { font-family: var(--font-display); font-size: 2.6rem; font-weight: 300; line-height: 1; }
.cmp .sym small { font-size: 0.9rem; color: var(--teal-soft); font-family: var(--font-body); letter-spacing: 0.04em; }
.cmp h3 { font-size: 1.15rem; margin-top: 10px; font-family: var(--font-display); font-weight: 300; }
.cmp ul { list-style: none; margin-top: 16px; display: grid; gap: 10px; }
.cmp li { color: var(--muted); font-size: 0.94rem; padding-left: 22px; position: relative; }
.cmp li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--metal); }
.cmp .rule { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); font-weight: 400; color: var(--text); height: auto; background: none; }
.cmp .rule .metal { font-style: normal; }

/* commercial 5 points */
.commercial { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 44px; }
.cbox { padding: 22px; border-radius: var(--r-md); }
.cbox .n { font-family: var(--font-display); color: var(--metal-hi); font-size: 1.3rem; }
.cbox h4 { font-family: var(--font-body); font-size: 0.58rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--faint); margin: 14px 0 8px; font-weight: 400; }
.cbox p { font-size: 0.85rem; color: var(--muted); }

/* value ladder */
.lme { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 0; margin-bottom: 28px; }
.lme b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 300; }
.lme span { font-size: 0.58rem; color: var(--muted); letter-spacing: var(--track); text-transform: uppercase; }
.price { display: grid; gap: 9px; }
.prow { display: grid; grid-template-columns: 92px 1fr 124px; gap: 18px; align-items: center; padding: 13px 20px; border-radius: var(--r-md); }
.prow .pp { font-family: var(--font-display); font-weight: 300; font-size: 1.1rem; }
.prow .ptrack { height: 10px; border-radius: 0; background: rgb(var(--text-rgb) / 0.07); overflow: hidden; }
.prow .pfill { height: 100%; background: var(--metal); border-radius: 0; }
.prow .pval { text-align: right; font-weight: 600; }
.prow .pval small { color: var(--muted); font-weight: 400; font-size: 0.78rem; }
.price-note { margin-top: 18px; font-size: 0.82rem; color: var(--faint); max-width: 70ch; }

@media (max-width: 860px) {
  .grade { grid-template-columns: 96px 1fr; gap: 14px 18px; }
  .grade .gbar { grid-column: 1 / -1; }
  .grade > .gbarwrap { grid-column: 1 / -1; }
  .compare { grid-template-columns: 1fr; }
  .commercial { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .grade { grid-template-columns: 1fr; }
  .commercial { grid-template-columns: 1fr; }
  .prow { grid-template-columns: 66px 1fr; }
  .prow .pval { grid-column: 1 / -1; text-align: left; }
}

/* ---------- Immersive / image-led ---------- */
/* Full-bleed hero */
.hero-full { position: relative; min-height: 94vh; display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 150px; padding-bottom: clamp(34px, 5vw, 56px); overflow: hidden; }
.hero-full-bg { position: absolute; inset: 0; z-index: -1; }
.hero-full-bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) contrast(1.02) brightness(1.0); }
.hero-full-bg::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(var(--ground-rgb) / 0.78) 0%, rgb(var(--ground-rgb) / 0.44) 44%, transparent 84%),
    linear-gradient(180deg, rgb(var(--ground-rgb) / 0.34) 0%, rgb(var(--ground-rgb) / 0.10) 36%, rgb(var(--ground-rgb) / 0.84) 100%); }
.hero-full h1 { font-size: clamp(2.8rem, 7.6vw, 6.4rem); font-weight: 300; letter-spacing: -0.02em; line-height: 0.99; max-width: 17ch; overflow-wrap: break-word; }
.hero-full .lead { margin-top: 24px; max-width: 50ch; color: var(--muted); font-size: clamp(1.04rem, 1.5vw, 1.22rem); }
.hero-stats { margin-top: clamp(20px, 4.4vh, 62px); display: flex; flex-wrap: wrap; border-radius: 0; overflow: hidden; }
.hero-stat { flex: 1 1 0; min-width: 150px; padding: clamp(14px, 2.6vh, 26px) 30px clamp(14px, 2.6vh, 26px) 0; display: flex; flex-direction: column; gap: clamp(5px, 1vh, 10px);
  border-right: 1px solid var(--rule); }
.hero-stat + .hero-stat { padding-left: 30px; }
.hero-stat:last-child { border-right: none; }
.hero-stat b { font-family: var(--font-display); font-size: clamp(1.4rem, min(2.8vw, 3.4vh), 2.5rem); font-weight: 300; line-height: 1; }
.hero-stat span { font-size: 0.6rem; color: var(--muted); letter-spacing: var(--track); text-transform: uppercase; line-height: 1.7; }

/* Full-bleed band (edge-to-edge image, constrained text) */
.band-full { position: relative; min-height: clamp(400px, 52vw, 600px); display: flex; align-items: center; overflow: hidden; }
.band-full > .media { position: absolute; inset: 0; }
.band-full > .media img { filter: saturate(0.92) contrast(1.02) brightness(1.0); }
.band-full > .media::after { background: linear-gradient(90deg, rgb(var(--ground-rgb) / 0.90) 0%, rgb(var(--ground-rgb) / 0.74) 32%, rgb(var(--ground-rgb) / 0.20) 70%, transparent 100%); }
.band-full .wrap { position: relative; z-index: 1; }
.band-full .band-copy { max-width: 600px; }
.band-full .band-copy .title { margin-top: 16px; }
.band-full .band-copy p { margin-top: 16px; color: var(--text); opacity: 0.92; max-width: 46ch; }

/* Big photographic application tiles */
.apptiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.apptile { position: relative; border-radius: 0; overflow: hidden; min-height: clamp(330px, 34vw, 420px);
  display: flex; align-items: flex-end; border: none; box-shadow: none; }
.apptile > .media { position: absolute; inset: 0; }
.apptile > .media img { filter: saturate(0.94) contrast(1.02) brightness(1.0); }
.apptile > .media::after { background: linear-gradient(180deg, rgb(var(--ground-rgb) / 0.04) 0%, rgb(var(--ground-rgb) / 0.44) 55%, rgb(var(--ground-rgb) / 0.88) 100%); }
.apptile .at-body { position: relative; z-index: 1; padding: 26px; width: 100%; }
.apptile .at-grade { font-size: 0.58rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--metal-hi); font-weight: 400; }
.apptile h3 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 300; margin-top: 12px; }
.apptile p { color: var(--muted); font-size: 0.9rem; margin-top: 7px; max-width: 34ch; }
.apptile.wide { grid-column: span 2; }

/* Bigger existing bands */
.showcase-inner { min-height: clamp(420px, 52vw, 600px); }
.subhero { min-height: 86vh; display: flex; flex-direction: column; justify-content: center; }

@media (max-width: 980px) {
  .apptiles { grid-template-columns: repeat(2, 1fr); }
  .apptile.wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .apptiles { grid-template-columns: 1fr; }
  .apptile.wide { grid-column: span 1; }
  .hero-stat { min-width: 50%; flex-basis: 50%; border-bottom: 1px solid rgb(var(--text-rgb) / 0.09); }
  .subhero { min-height: auto; }
  .hero-full h1 { font-size: clamp(2.05rem, 8vw, 2.8rem); letter-spacing: -0.02em; }
  .hero-full .lead { font-size: 1rem; }
}

/* Alternating full-bleed bands (image-led storytelling) */
.band-full.app { min-height: clamp(390px, 46vw, 560px); }
.band-full .band-copy .title { font-size: clamp(1.9rem, 3.9vw, 3.3rem); }
.band-full .band-copy .eyebrow { margin-bottom: 14px; }
.band-full.right { justify-content: flex-end; }
.band-full.right .band-copy { text-align: right; margin-left: auto; }
.band-full.right .band-copy .eyebrow { flex-direction: row-reverse; }
.band-full.right .band-copy .hero-actions { justify-content: flex-end; }
.band-full.right > .media::after {
  background: linear-gradient(270deg, rgb(var(--ground-rgb) / 0.90) 0%, rgb(var(--ground-rgb) / 0.74) 32%, rgb(var(--ground-rgb) / 0.20) 70%, transparent 100%);
}
.app-bands { margin-top: 8px; }

@media (max-width: 760px) {
  .band-full { align-items: flex-end; min-height: clamp(360px, 70vw, 460px); }
  .band-full .band-copy { padding-bottom: 4px; }
  .band-full.right { justify-content: flex-start; }
  .band-full.right .band-copy { text-align: left; margin-left: 0; }
  .band-full.right .band-copy .eyebrow { flex-direction: row; }
  .band-full.right .band-copy .hero-actions { justify-content: flex-start; }
  .band-full > .media::after,
  .band-full.right > .media::after {
    background: linear-gradient(180deg, rgb(var(--ground-rgb) / 0.36) 0%, rgb(var(--ground-rgb) / 0.62) 45%, rgb(var(--ground-rgb) / 0.88) 100%);
  }
  .band-full.app { min-height: clamp(360px, 72vw, 440px); }
}

/* ---------- Materials dropdown (nav) ---------- */
.nav-dd { position: relative; }
.nav-dd-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 5px 0; border-radius: 0;
  font-family: var(--font-body); font-size: 0.67rem; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); background: none; border: none; cursor: pointer;
  transition: color 0.35s var(--ease); }
.nav-dd-toggle:hover, .nav-dd:focus-within .nav-dd-toggle, .nav-dd.open .nav-dd-toggle { color: var(--text); background: none; }
.nav-dd-toggle.is-active { color: var(--metal-hi); }
.dd-caret { width: 13px; height: 13px; transition: transform 0.25s var(--ease); }
.nav-dd:hover .dd-caret, .nav-dd:focus-within .dd-caret, .nav-dd.open .dd-caret { transform: rotate(180deg); }
.nav-dd-menu { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 232px; padding: 10px 0; border-radius: 0; display: grid; gap: 0; z-index: 60;
  /* near-solid surface (overrides .glass) so menu items stay readable over any page content */
  background: var(--ground-2); border: 1px solid var(--rule);
  opacity: 0; visibility: hidden; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.nav-dd-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu, .nav-dd.open .nav-dd-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dd-menu a { padding: 11px 22px; border-radius: 0; font-size: 0.63rem; font-weight: 400; color: var(--muted);
  letter-spacing: 0.2em; text-transform: uppercase;
  white-space: nowrap; transition: color 0.3s var(--ease), background 0.3s var(--ease); }
.nav-dd-menu a:hover { color: var(--metal-hi); background: rgb(var(--text-rgb) / 0.03); }
.nav-dd-menu a[aria-current="page"] { color: var(--metal-hi); }
.mm-label { font-size: 0.58rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--faint); font-weight: 400;
  padding: 24px 0 6px; }

/* ---------- Purity comparison bars ---------- */
.pure-compare, .pure-compare.glass { padding: clamp(30px, 4vw, 48px) 0; border-radius: 0; display: grid; gap: 34px;
  margin-bottom: 30px; background: none; border: none; border-block: 1px solid var(--rule); }
.pc-row { display: grid; gap: 11px; }
.pc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.pc-label { font-size: 0.62rem; font-weight: 400; color: var(--muted); letter-spacing: var(--track); text-transform: uppercase; }
.pc-ours .pc-label { color: var(--text); }
.pc-val { font-family: var(--font-display); font-size: clamp(1.8rem, 4.4vw, 3rem); font-weight: 300; line-height: 1; white-space: nowrap; }
.pc-ours .pc-val { color: var(--metal-hi); }
.pc-track { height: 16px; border-radius: 0; background: rgb(var(--text-rgb) / 0.06); overflow: hidden; }
.pc-ours .pc-track { height: 22px; }
.pc-fill { height: 100%; border-radius: 0; background: var(--metal);
  box-shadow: none; transition: width 1.2s var(--ease-slow); }
.pc-fill.muted { background: var(--brand); box-shadow: none; }
.pc-note { font-size: 0.94rem; color: var(--muted); margin-top: 4px; }

/* ---------- Quality orbital timeline ---------- */
.orbital { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 10px; }
.orbital-stage { position: relative; width: min(96vw, 920px); height: clamp(560px, 94vw, 880px); }

.orbital-ring { position: absolute; top: 50%; left: 50%; width: min(76%, 580px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border: 1px solid rgb(var(--text-rgb) / 0.1); border-radius: 50%; }
.orbital-ring::after { content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid transparent; background: conic-gradient(from 0deg, transparent, rgb(var(--accent-rgb) / 0.25), transparent 30%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

.orbital-center { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; transform: translate(-50%, -50%);
  border-radius: 50%; display: grid; place-items: center; z-index: 20; cursor: pointer;
  background: none; border: 1px solid var(--metal); box-shadow: none; }
.oc-core { width: 10px; height: 10px; border-radius: 50%; background: var(--metal-hi); }
.oc-ping, .oc-ping2 { position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgb(var(--text-rgb) / 0.25);
  animation: orb-ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite; pointer-events: none; }
.oc-ping2 { inset: -16px; border-color: rgb(var(--text-rgb) / 0.12); animation-delay: 0.7s; }
@keyframes orb-ping { 0% { transform: scale(0.85); opacity: 0.8; } 80%, 100% { transform: scale(1.7); opacity: 0; } }

.orbital-node { position: absolute; top: 50%; left: 50%; cursor: pointer;
  transition: transform 0.7s var(--ease), opacity 0.7s var(--ease); }
.on-glow { position: absolute; top: 50%; left: 50%; width: 96px; height: 96px; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, rgb(var(--text-rgb) / 0.18), transparent 70%); pointer-events: none; }
.orbital-node.pulse .on-glow { animation: orb-pulse 1.4s ease-in-out infinite; }
@keyframes orb-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.on-dot { position: relative; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgb(var(--ground-rgb) / 0.94); color: var(--text); border: 1px solid var(--rule-hi);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.on-dot svg { width: 30px; height: 30px; }
.orbital-node.related .on-dot { background: rgb(var(--brand-soft-rgb) / 0.92); color: var(--ground); border-color: var(--teal-soft); }
.orbital-node.expanded .on-dot { background: var(--metal-fill); color: var(--on-accent);
  border-color: var(--metal-fill); transform: scale(1.22); box-shadow: none; }

.on-label { position: absolute; top: 88px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 0.6rem; font-weight: 400; letter-spacing: var(--track); text-transform: uppercase; color: rgb(var(--text-rgb) / 0.78);
  transition: all 0.3s var(--ease); pointer-events: none; }
.orbital-node.expanded .on-label { color: var(--text); transform: translateX(-50%) scale(1.08); }

.on-card { position: absolute; top: 124px; left: 50%; transform: translateX(-50%); width: 300px; padding: 22px;
  border-radius: var(--r-md); z-index: 40; text-align: left; cursor: default; animation: orb-cardin 0.3s var(--ease); }
@keyframes orb-cardin { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.on-card::before { content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 1px; height: 10px; background: rgb(var(--text-rgb) / 0.4); }
.onc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.onc-badge { font-size: 0.54rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; padding: 5px 11px; border-radius: 0; border: 1px solid; white-space: nowrap; }
.onc-badge.st-completed { color: var(--ground); background: var(--teal-soft); border-color: var(--teal-soft); }
.onc-badge.st-in-progress { color: var(--on-accent); background: var(--metal-fill); border-color: var(--metal-fill); }
.onc-code { font-size: 0.66rem; font-family: var(--font-display); color: var(--faint); }
.on-card h4 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 300; margin-top: 14px; }
.on-card p { font-size: 0.87rem; color: var(--muted); margin-top: 8px; line-height: 1.55; }
.onc-metric { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); margin-top: 14px; }
.onc-bar { height: 4px; border-radius: 0; background: rgb(var(--text-rgb) / 0.1); overflow: hidden; margin-top: 6px; }
.onc-fill { height: 100%; background: var(--metal); border-radius: 0; transition: width 0.8s var(--ease); }
.onc-rel-wrap { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgb(var(--text-rgb) / 0.1); }
.onc-rel-title { font-size: 0.54rem; text-transform: uppercase; letter-spacing: var(--track); color: var(--faint); font-weight: 400; }
.onc-rels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.oc-rel { font-size: 0.56rem; padding: 6px 11px; border-radius: 0; border: 1px solid var(--rule);
  letter-spacing: 0.16em; text-transform: uppercase;
  background: none; color: var(--muted); cursor: pointer; transition: all 0.3s var(--ease); }
.oc-rel:hover { background: rgb(var(--text-rgb) / 0.1); color: var(--text); border-color: var(--glass-brd-hi); }
.orbital-hint { font-size: 0.6rem; color: var(--faint); text-align: center; max-width: 44ch;
  letter-spacing: var(--track); text-transform: uppercase; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Mineral showcase — interactive 3D GLB viewer (homepage #commodities)
   All selectors namespaced `ms-` to avoid collisions with the
   existing `.showcase`, `.panel`, `.stat`, `#nav`, etc.
   Reuses the global design tokens defined in :root above.
   ============================================================ */
.ms-showcase { display: grid; grid-template-columns: 1fr 420px; align-items: stretch; min-height: 560px; margin-top: clamp(40px, 6vw, 64px); }
.ms-viewer { position: relative; border-radius: var(--r-lg) 0 0 var(--r-lg); border: 1px solid var(--glass-brd); border-right: none; overflow: hidden; min-height: 500px;
  background: radial-gradient(ellipse 62% 54% at 50% 44%, rgb(var(--ground-deep-rgb) / 0.85) 0%, transparent 72%); }
.ms-viewer canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.ms-viewer canvas:active { cursor: grabbing; }
.ms-viewer-hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 0.66rem; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; pointer-events: none; z-index: 2; padding: 6px 14px; border-radius: 0; border: 1px solid var(--rule); background: rgb(var(--ground-rgb) / 0.85); letter-spacing: var(--track); }
.ms-viewer-load { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--muted); font-size: 0.85rem; z-index: 2; } /* shown (flex) by JS while loading — stays hidden if the module never runs */
.ms-viewer-load .ms-spin { width: 26px; height: 26px; border: 2px solid var(--glass-brd); border-top-color: var(--metal-hi); border-radius: 50%; animation: ms-sp 0.9s linear infinite; margin-right: 12px; }
@keyframes ms-sp { to { transform: rotate(360deg); } }
.ms-panel { background: none; border: 1px solid var(--rule); padding: clamp(34px, 3.4vw, 56px) clamp(30px, 3vw, 46px); display: flex; flex-direction: column; justify-content: center; }
.ms-panel-formula { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 0.82rem; letter-spacing: 0.12em; color: var(--teal-soft); margin-bottom: 10px; }
.ms-panel-name { font-family: var(--font-display); font-size: clamp(1.95rem, 3.2vw, 2.55rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 18px; }
.ms-panel-divider { width: 100%; height: 1px; background: var(--rule); margin-bottom: 26px; }
.ms-panel-desc { color: var(--muted); font-size: 1rem; line-height: 1.72; margin-bottom: 30px; }
.ms-panel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 30px; }
.ms-stat { background: rgb(var(--text-rgb) / 0.04); border: 1px solid var(--glass-brd); border-radius: var(--r-sm); padding: 14px 16px; }
.ms-stat-val { font-family: var(--font-display); font-size: 1.3rem; font-weight: 300; color: var(--metal-hi); display: block; line-height: 1; }
.ms-stat-lbl { font-size: 0.63rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-top: 5px; display: block; }
.ms-panel-link { display: inline-flex; align-items: center; gap: 10px; font-size: 0.63rem; font-weight: 400; letter-spacing: var(--track); text-transform: uppercase; color: var(--teal-soft); text-decoration: none; padding: 12px 20px; border: 1px solid rgb(var(--brand-soft-rgb) / 0.3); border-radius: 0; transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease); width: fit-content; }
.ms-panel-link:hover { color: var(--metal-hi); border-color: rgb(var(--accent-rgb) / 0.4); background: rgb(var(--accent-rgb) / 0.06); }
.ms-panel-link svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.ms-panel-link:hover svg { transform: translateX(3px); }
.ms-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.ms-btn { font-family: var(--font-body); font-size: 0.63rem; font-weight: 400; letter-spacing: var(--track); text-transform: uppercase; padding: 9px 18px; border-radius: 0; cursor: pointer; border: 1px solid var(--glass-brd); background: var(--glass); color: var(--muted); transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease); }
.ms-btn:hover { border-color: var(--glass-brd-hi); color: var(--text); background: var(--glass-2); }
.ms-btn.active { background: var(--metal-fill); border-color: var(--metal-fill); color: var(--on-accent); }
.ms-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: clamp(28px, 4vw, 40px); }
.ms-card { appearance: none; -webkit-appearance: none; font: inherit; color: inherit; text-align: left; width: 100%; display: block; background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--r-md); padding: 14px; cursor: pointer; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.ms-card { position: relative; overflow: hidden; }
.ms-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background-image: var(--ore, var(--metal-copper)); }
.ms-card-label { font-size: 0.68rem; font-weight: 400; color: var(--text); letter-spacing: 0.16em; text-transform: uppercase; }
.ms-card-formula { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 0.65rem; color: var(--teal-soft); margin-top: 3px; }
.ms-card:hover { border-color: var(--rule-hi); background: var(--panel-hi); }
.ms-card.active { border-color: var(--metal); background: rgb(var(--accent-rgb) / 0.06); box-shadow: none; }
.ms-btn:focus-visible, .ms-card:focus-visible, .ms-panel-link:focus-visible { outline: 2px solid var(--metal-hi); outline-offset: 3px; }
.ms-noscript { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(40px, 6vw, 64px); }
.ms-noscript a { color: var(--teal-soft); text-decoration: none; padding: 10px 18px; border: 1px solid var(--glass-brd); border-radius: var(--r-md); background: var(--glass); font-size: 0.9rem; }
.ms-noscript a:hover { color: var(--metal-hi); border-color: var(--glass-brd-hi); }
@media (max-width: 900px) {
  .ms-showcase { grid-template-columns: 1fr; min-height: 0; }
  .ms-viewer { border-radius: var(--r-lg) var(--r-lg) 0 0; border-right: 1px solid var(--glass-brd); border-bottom: none; min-height: 400px; }
  .ms-panel { border-radius: 0 0 var(--r-lg) var(--r-lg); }
}
@media (max-width: 600px) {
  .ms-card-label { font-size: 0.72rem; }
}

/* ============================================================
   Hero — parallax title card (homepage #hero)
   Replaced the Spline hero on 2026-08-03.

   Three depth planes, which is what makes this read as parallax rather
   than as type sitting on a photograph:

       .phero-bg    the distant plate, lags downward as you scroll
       .phero-ui    wordmark + calls to action, travel with the page, fade
       .phero-fg    the near ground, drawn OVER the copy and rising as you
                    scroll, so the type sinks behind the scrub line

   Both plates are the same photograph. The near one is masked to its lower
   portion, so at rest the two are pixel-identical and perfectly aligned —
   the mask boundary is invisible until scrolling pulls them apart. Depth
   comes from the divergence, not from the seam, which is why no cut-out
   asset is needed.

   The section carries .on-dark in the markup: it is a dark photograph, so
   the espresso ink and copper accent both fail on it. That class flips the
   band to cream ink and a gold fill, which is why the buttons come out gold
   here and espresso everywhere else.
   ============================================================ */
.phero {
  /* ---- tuning surface ---- */
  /* Rest scale on both plates. Not a cosmetic crop — it is the entire budget for movement,
     because travel is clamped to the overflow it creates (see --phero-headroom). 1.15 allowed
     ~7% of viewport height, a correct parallax nobody can see; 1.70 is where the clamp stops
     binding and --phero-bg-factor is honoured as authored. Higher buys nothing without also
     raising that factor. Cost: the plates are magnified 1.7x, so the source needs ~1.7x the
     viewport width in real pixels or it upscales — hence the 3840-wide WebP. */
  --phero-scale:     1.70;
  --phero-bg-factor: 0.35;   /* distant plate travel, as a fraction of the scrolled distance */

  /* Near plate travel. It moves the opposite way, so the two sum into the depth you see.
     Both plates are the same photograph, so wherever the mask cross-fades them you are
     blending one image with an offset copy of itself, which reads as a doubled edge once
     they are far enough apart. This is the dial that controls that artifact. This photograph
     tolerates more than most: the mask sits in the near scrub, which is near-black and
     high-frequency, and doubling one dark texture over another is invisible. */
  --phero-fg-factor: 0.08;
  --phero-fade-end:  0.6;    /* copy reaches opacity 0 at this much of the range */
  --phero-range:     100svh; /* the scroll distance the whole effect plays across */

  /* Where the near plate takes over. Set to land on the scrub line in this photograph,
     which runs from roughly 58% on the right to 73% on the left. Putting the blend on that
     band is what keeps it invisible — move these and it cuts across the lit benches. */
  --phero-fg-start:  58%;
  --phero-fg-end:    74%;

  /* Scaling by S centres the overflow, so only HALF sits above the frame — that top half is
     all the headroom a translate has before an edge lifts off and exposes the ground. Travel
     is clamped to it. Spending it to the last pixel puts an edge exactly on the frame's,
     where rounding can flash a hairline; 0.98 holds a little back. */
  --phero-headroom:  calc((var(--phero-scale) - 1) / 2 * var(--phero-range) * 0.98);
  --phero-bg-travel: min(calc(var(--phero-bg-factor) * var(--phero-range)), var(--phero-headroom));
  --phero-fg-travel: min(calc(var(--phero-fg-factor) * var(--phero-range)), var(--phero-headroom));

  position: relative;
  padding-block: 0;       /* a cinematic hero has to reach all four edges */
  height: 100vh;          /* fallback first */
  height: 100svh;         /* reserved from first paint — no CLS */
  overflow: hidden;
  background: var(--ground);   /* .on-dark has already flipped this to espresso */
  isolation: isolate;
}

.phero-plate {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: translate3d(0, 0, 0) scale(var(--phero-scale));
  will-change: transform;
}
.phero-bg { z-index: 0; }

/* The near plate. Masked to the lower part of the frame so it occludes the foot of the
   wordmark and nothing else. The mask travels with the element, which is correct — a real
   foreground has a silhouette that moves with it.
   This is an approximation: a gradient cuts a straight soft line across a photograph whose
   depth boundary is neither straight nor soft, which is what caps --phero-fg-factor. For the
   real thing, point this at a PNG cut-out with an alpha channel and delete the three mask
   declarations; the cap goes with them and nothing else changes. */
.phero-fg {
  z-index: 3;
  -webkit-mask-image: linear-gradient(180deg, transparent var(--phero-fg-start), #000 var(--phero-fg-end));
          mask-image: linear-gradient(180deg, transparent var(--phero-fg-start), #000 var(--phero-fg-end));
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
}

/* The veil that carries the navbar at the top and the scroll cue at the foot.
   This is the one colour on the page that is deliberately not a brand token. .on-dark has
   already turned --ground into espresso, and warm brown laid over a cold blue-grey
   photograph goes muddy — it tints the sky visibly. A neutral near-black darkens without
   shifting the hue, so the photograph keeps its own colour. Declared once, here. */
.phero-veil {
  --phero-veil-rgb: 10 13 16;
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgb(var(--phero-veil-rgb) / 0.42) 0%,
    rgb(var(--phero-veil-rgb) / 0)    35%,
    rgb(var(--phero-veil-rgb) / 0)    60%,
    rgb(var(--phero-veil-rgb) / 0.78) 100%);
}

.phero-ui {
  position: absolute; z-index: 2; top: 50%; left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: max-content; max-width: min(92vw, 1200px);
  text-align: center;
  will-change: opacity;
}

.phero-wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;   /* Instrument Serif ships 400 only — do not ask for another weight */
  /* Instrument Serif carries far less ink than a heavy grotesk at the same measure,
     so the clamp is opened up to hold the same presence on the page. */
  font-size: clamp(2.8rem, 14vw, 15rem);
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: var(--text);
  text-shadow: 0 2px 40px rgb(0 0 0 / 0.35);
  white-space: nowrap;
}

/* A fixed-width inline-block rather than word-spacing, which is additive and would only ever
   widen the gap. The real space character stays inside it so the heading still reads as two
   words — "GTA METALS" — to a screen reader and to indexing. */
.phero-gap { display: inline-block; width: 0.25em; }

/* The two-line break is a CSS decision, never a JS one: the <br> is always in the markup
   and simply stops generating a break above the breakpoint. */
.phero-break { display: none; }

.phero-actions {
  margin-top: clamp(22px, 4vh, 40px);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}

.phero-cue {
  position: absolute; z-index: 4; left: 50%;
  bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  transform: translate3d(-50%, 0, 0);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--faint);
  pointer-events: none;
}
.phero-cue-rule { width: 1px; height: 40px; background: currentColor; animation: phero-pulse 2.8s ease-in-out infinite; }
.phero-cue-label {
  font-family: var(--font-body);
  font-size: 0.6rem; letter-spacing: var(--track); text-transform: uppercase;
  /* letter-spacing adds a trailing space; pull it back so the label stays optically centred */
  margin-right: calc(var(--track) * -1);
}

@keyframes phero-pulse { 0%, 100% { opacity: 0.28; } 50% { opacity: 1; } }

/* visibility flips only at the very end, so the buttons cannot be clicked or tabbed to
   once they have faded out — an invisible interactive control is worse than none. */
@keyframes phero-fade {
  0%   { opacity: 1; visibility: visible; }
  99%  { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

/* Transform-only. The scale is restated in both frames so it is never dropped mid-animation.
   The plates travel in opposite directions, which is what opens the gap between them. */
@keyframes phero-bg-move {
  from { transform: translate3d(0, 0, 0)                          scale(var(--phero-scale)); }
  to   { transform: translate3d(0, var(--phero-bg-travel), 0)     scale(var(--phero-scale)); }
}
@keyframes phero-fg-move {
  from { transform: translate3d(0, 0, 0)                                 scale(var(--phero-scale)); }
  to   { transform: translate3d(0, calc(-1 * var(--phero-fg-travel)), 0) scale(var(--phero-scale)); }
}

/* .phero-ui already travels at 100% of scroll simply by sitting in a section that scrolls.
   It needs the fade and nothing else — a transform here would move it against itself. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .phero-bg, .phero-fg, .phero-ui {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
    }
    .phero-bg { animation-name: phero-bg-move; animation-range: 0 var(--phero-range); }
    .phero-fg { animation-name: phero-fg-move; animation-range: 0 var(--phero-range); }
    .phero-ui { animation-name: phero-fade;    animation-range: 0 calc(var(--phero-range) * var(--phero-fade-end)); }
  }
}

@media (max-width: 639.98px) {
  .phero-break { display: block; }
  .phero-gap   { display: none; }
  /* Two lines reach lower, so the near plate has to start below them or it eats the second
     word rather than grazing the first line's feet. Cover crops the sides harder at portrait
     ratios, which lifts the scrub line, so this tracks it up too. */
  .phero { --phero-fg-start: 66%; --phero-fg-end: 80%; }
}

@media (prefers-reduced-motion: reduce) {
  .phero-cue  { display: none; }
  .phero-plate { animation: none; transform: translate3d(0, 0, 0) scale(var(--phero-scale)); }
  .phero-ui   { animation: none; opacity: 1; visibility: visible; }
}

/* ============================================================
   Hero — live Spline 3D scene behind pinned copy (homepage #hero)
   SUPERSEDED 2026-08-03 by .phero above. No markup references these
   any more (they were only ever used by index.html); kept for now so
   the Spline hero can be restored from _index-backup-20260803.html
   without also having to recover its stylesheet.
   ============================================================ */
/* A cinematic hero has to reach all four edges — the shared `section`
   padding-block was insetting the pinned frame and letting the page
   background show above and below the footage. */
.hero-scroll { position: relative; padding-block: 0; }
/* The signature copper-to-cream field is the hero's actual ground. The Spline scene multiplies
   onto it (see .hero-spline), so this is what gives the scene its colour — without a real
   backdrop here the blend has nothing to pick up and the scene stays grey. */
.hero-sticky { position: relative; min-height: 94vh; display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: clamp(104px, 15vh, 150px); padding-bottom: clamp(24px, 4vh, 56px); overflow: hidden;
  background: var(--field-hero); }
.hero-fallback { position: absolute; inset: 0; z-index: 0; transition: opacity 0.5s var(--ease);
  background: var(--ground) url('assets/hero/poster.jpg') center/cover no-repeat;
  filter: saturate(0.94) contrast(1.02) brightness(1.0); }
/* The Spline scene.
   It is cross-origin, so we cannot restyle it — it ships as cool teal/white glass on a
   charcoal-to-black ground, which is the opposite temperature to this site. The whole
   recolour therefore happens on our side, in two moves:

   1. `filter` neutralises it. grayscale() kills the teal fringing; invert() flips the dark
      ground to near-white and the pale discs to dark, so the scene reads light like the rest
      of the page; brightness/contrast then push that inverted ground the last of the way to
      white so it has nothing left to contribute.
   2. `mix-blend-mode: multiply` drops that white ground out completely against .hero-sticky's
      --field-hero, leaving only the discs — which, being neutral grey, take their colour from
      the copper field they are multiplying onto. That is why the scene ends up copper without
      a single colour being declared here.

   Worth knowing before you touch the numbers: at these values the scene's whole ground clips
   to pure white, so multiply returns the field untouched — the charcoal is not being covered
   up, it is gone. That leaves --spline-bright doing one job only, setting how dark the glass
   itself sits (1.30 lands the brightest discs near espresso). Raise it for lighter, more
   delicate glass; drop it for heavier. Drop it far enough and the ground stops clipping and
   the scene's own charcoal starts bleeding back in — that is the floor, somewhere near 1.15.

   `pointer-events: none` is load-bearing for a different reason: a full-bleed iframe otherwise
   swallows the wheel events the pinned hero scrolls on, and the page stops moving whenever the
   cursor is over the background. It costs the scene its cursor tracking. */
.hero-spline { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
  --spline-bright: 1.30; --spline-contrast: 1.04;
  opacity: 0; transition: opacity 1.2s var(--ease);
  filter: grayscale(1) invert(1) brightness(var(--spline-bright)) contrast(var(--spline-contrast));
  mix-blend-mode: multiply; }
.hero-spline iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.hero-scroll.is-ready .hero-spline { opacity: 1; }
.hero-scroll.is-ready .hero-fallback { opacity: 0; }
/* Espresso ink needs the photo veiled where the copy sits, but veiling the whole
   frame kills the shot. So: a heavy cream wash weighted to the text column, plus
   a lighter vertical pass. The right half of the frame stays vivid. */
.hero-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(var(--ground-rgb) / 0.86) 0%, rgb(var(--ground-rgb) / 0.66) 30%, rgb(var(--ground-rgb) / 0.16) 62%, transparent 100%),
    radial-gradient(126% 104% at 50% 112%, rgb(var(--accent-rgb) / 0.46) 0%, rgb(199 154 118 / 0.26) 40%, transparent 78%),
    linear-gradient(180deg, rgb(var(--ground-rgb) / 0.30) 0%, transparent 30%); }
@media (max-width: 980px) {
  /* copy runs full-width below this, so the horizontal weighting has to go flat */
  .hero-scrim { background:
    linear-gradient(180deg, rgb(var(--ground-rgb) / 0.58) 0%, rgb(var(--ground-rgb) / 0.52) 34%, rgb(var(--ground-rgb) / 0.86) 100%); }
}
.hero-ui { position: relative; z-index: 3; width: 100%; }
.hero-beats { position: relative; margin-top: 22px; }
.hero-beat-0 { position: relative; }
.hero-beat h1, .hero-bigtext { font-family: var(--font-display); font-size: clamp(2.2rem, min(7.6vw, 9.4vh), 6.6rem); font-weight: 300;
  letter-spacing: -0.02em; line-height: 0.99; max-width: 17ch; overflow-wrap: break-word; margin: 0; }
.hero-bigtext { color: var(--text); }
.hero-beat .lead { margin-top: clamp(14px, 2.6vh, 24px); max-width: 50ch; color: var(--muted);
  font-size: clamp(0.96rem, min(1.5vw, 1.9vh), 1.22rem); }
.hero-beat .hero-actions { margin-top: clamp(20px, 4.2vh, 38px); }
.hero-beat-1 { display: none; }
.hero-cue { margin-top: clamp(14px, 2.8vh, 46px); display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.6rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--faint); }
.hero-cue-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--metal-hi); animation: none; }
@keyframes hero-cue-pulse { 0% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.45); } 70% { box-shadow: 0 0 0 9px rgb(var(--accent-rgb) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0); } }

/* The full-strength scrim above exists to carry espresso ink over a photograph. Once the
   Spline scene is in, there is no photograph — the ground is already cream and the scene has
   been multiplied into it — so that much cream on top only greys the whole hero out. Pull it
   back to a wash over the copy column and let the right-hand side of the scene run clean. */
.hero-scroll.is-scrub .hero-scrim { background:
  linear-gradient(90deg, rgb(var(--ground-rgb) / 0.60) 0%, rgb(var(--ground-rgb) / 0.30) 36%, transparent 68%),
  radial-gradient(120% 100% at 50% 112%, rgb(var(--accent-rgb) / 0.26) 0%, transparent 74%); }

/* Scrub mode — JS-enabled (desktop, motion-OK): pin + crossfade.
   340vh was the runway the 121-frame sequence needed; the beat crossfade alone
   only wants enough distance to read as deliberate. */
.hero-scroll.is-scrub { height: 220vh; }
.hero-scroll.is-scrub .hero-sticky { position: sticky; top: 0; height: 100vh; min-height: 100vh; }
.hero-scroll.is-scrub .hero-beat-0 { will-change: opacity, transform; }
.hero-scroll.is-scrub .hero-beat-1 { display: block; position: absolute; top: 0; left: 0; right: 0; opacity: 0;
  will-change: opacity, transform; }
.hero-scroll.is-scrub .hero-pill,
.hero-scroll.is-scrub .hero-cue { opacity: var(--hero-chrome, 1); transition: opacity 0.12s linear; }

@media (max-width: 760px) { .hero-sticky { padding-top: 120px; } }

/* ============================================================
   Rebrand 2026-07 — global house components
   (chips, full portfolio grid, team cards)
   ============================================================ */

/* Footprint chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.chip, .chip.glass { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 0;
  font-size: 0.6rem; font-weight: 400; color: var(--teal-soft); letter-spacing: var(--track);
  text-transform: uppercase; background: none; border: 1px solid var(--rule); }

/* Full portfolio — globe stage with floating commodity chips */
/* The globe's diameter is a shared measure, not just its own width: the chips size themselves
   off it (see .pf-chip-wrap) so the two stay in proportion at every viewport instead of the
   chips shrinking into specks beside a globe that keeps its size. */
/* 46vw, not 58vw. The chips are placed as percentages of the stage, but the stage stops
   growing at its max-width while a vw-sized globe does not — so between roughly 980 and
   1390px the globe was eating the space the chips sit in and running into them. Above
   ~1390px the 640px cap is what applies and this changes nothing. */
.pf-stage { position: relative; height: clamp(560px, 62vw, 780px); --pf-globe-d: min(640px, 46vw); }
.pf-globe-wrap { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%);
  width: var(--pf-globe-d); aspect-ratio: 1 / 1; }
.pf-globe-wrap::before { content: ""; position: absolute; inset: -8%; border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--text-rgb) / 0.07), transparent 62%); }
.pf-globe-wrap canvas { width: 100%; height: 100%; opacity: 0; cursor: grab;
  transition: opacity 0.9s var(--ease); contain: layout paint size; }
.pf-globe-word { position: absolute; left: 50%; top: 3%; transform: translateX(-50%); z-index: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(3rem, 8.5vw, 6.5rem); line-height: 1; letter-spacing: -0.03em;
  background: linear-gradient(180deg, rgb(var(--text-rgb) / 0.8), rgb(var(--text-rgb) / 0.04));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none; white-space: nowrap; }
/* One font-size drives the whole chip — everything inside is in em, so changing this number
   scales the chip and its enquire button together. It is a fraction of the globe's diameter
   rather than a fixed px, which is what keeps the two proportionate; 0.034 puts a chip at
   roughly a third of the globe's width. The clamp is a floor for narrow viewports, where 58vw
   would otherwise drive the text below readable size. Sits on the wrapper, not the chip, so
   .pf-enq inherits it too. */
.pf-chip-wrap { position: absolute; left: var(--cx); top: var(--cy); translate: -50% -50%; z-index: 2;
  font-size: clamp(0.95rem, calc(var(--pf-globe-d, 640px) * 0.034), 1.4rem);
  animation: pf-float var(--fdur, 6.5s) ease-in-out var(--fdel, 0s) infinite; }
.pf-chip-wrap:hover, .pf-chip-wrap:focus-within { z-index: 6; animation-play-state: paused; }
.pf-chip { display: inline-flex; align-items: center; gap: 0.78em; padding: 0.7em 1.15em 0.7em 0.7em;
  border-radius: 0; box-shadow: none;
  /* solid dark backing (overrides .glass) — chips must stay readable over the bright globe */
  background: rgb(var(--ground-rgb) / 0.93);
  transition: border-color 0.4s var(--ease); }
.pf-chip:hover { border-color: var(--glass-brd-hi); }
/* button rests overlapping the chip bottom even after its slide-down (base -12px + 8px
   travel = 4px overlap) so the pointer never crosses a dead zone that breaks :hover */
.pf-enq { position: absolute; left: 50%; top: calc(100% - 12px); translate: -50% 0; z-index: 3;
  opacity: 0; pointer-events: none;
  border: none; padding: 0.7em 1.4em; cursor: pointer;
  background: var(--metal-fill); color: var(--on-accent);
  /* em, so the button grows with the chip; the 12px overlap above stays px because the
     hover-corridor geometry in that comment is reasoned in absolute pixels */
  font-family: var(--font-body); font-weight: 400; font-size: 0.55em;
  letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap;
  box-shadow: none;
  transition: opacity 0.22s var(--ease) 0.18s, translate 0.22s var(--ease) 0.18s; }
.pf-chip-wrap:hover .pf-enq, .pf-chip-wrap:focus-within .pf-enq {
  opacity: 1; pointer-events: auto; translate: -50% 8px; transition-delay: 0s, 0s; }
.pf-enq:hover { filter: brightness(1.0); }
/* invisible hover corridor below the chip while hovered — keeps :hover alive on the way to the button */
.pf-chip-wrap::after { content: ""; position: absolute; left: 50%; top: 100%; translate: -50% 0;
  width: 0; height: 0; }
.pf-chip-wrap:hover::after, .pf-chip-wrap:focus-within::after { width: 7em; height: 2.2em; }
/* non-linked chips are click targets themselves (JS forwards to the enquire button) */
div.pf-chip { cursor: pointer; }

/* contact form highlight after an enquire click */
.form-flash { animation: form-flash 1.6s var(--ease) 1; }
@keyframes form-flash {
  0% { box-shadow: -24px 0 0 0 rgb(var(--accent-rgb) / 0.9); }
  100% { box-shadow: -24px 0 0 0 rgb(var(--accent-rgb) / 0); }
}
/* em throughout, so these track .pf-chip-wrap's font-size and stay in proportion to the globe */
.pf-sym { display: inline-grid; place-items: center; flex: none; width: 2.4em; height: 2.4em;
  border-radius: var(--r-sm); border: 1px solid rgb(var(--text-rgb) / 0.14);
  background-image: var(--ore, var(--metal-copper)); background-size: 180% 100%; background-position: 30% 0;
  font-family: var(--font-display); font-weight: 400; font-size: 0.95em;
  color: var(--brand-deep); text-shadow: 0 1px 0 rgb(240 227 216 / 0.35); }
.pf-chip-txt { display: flex; flex-direction: column; line-height: 1.3; }
.pf-chip-txt b { font-weight: 400; font-size: 0.87em; white-space: nowrap; }
.pf-chip-txt small { font-size: 0.73em; color: var(--muted); white-space: nowrap; }
.pf-chip-hi { border-color: rgb(var(--accent-rgb) / 0.45); }
.pf-chip-hi .pf-sym { border-color: rgb(var(--text-rgb) / 0.22); }
@keyframes pf-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}
@media (prefers-reduced-motion: reduce) { .pf-chip-wrap { animation: none; } }

.pf-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; border-top: 1px solid var(--rule); }
.pf-fact, .pf-fact.glass { padding: 26px 24px 26px 0; border: none; background: none; }
.pf-fact + .pf-fact { border-left: 1px solid var(--rule); padding-left: 24px; }
.pf-fact small { display: block; font-size: 0.58rem; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--teal-soft); font-weight: 400; margin-bottom: 10px; }
.pf-fact b { font-weight: 400; font-size: 0.88rem; }

/* Feature card inline link */
.feat-link { color: var(--metal-hi); font-weight: 400; white-space: nowrap; }

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(28px, 3.4vw, 52px); }
.tm-card, .tm-card.glass { padding: 34px 0 44px; border-radius: 0; display: flex; flex-direction: column;
  background: none; border: none; border-top: 1px solid var(--rule); transition: none; }
.tm-card:hover { transform: none; }
.tm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.tm-av { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 0;
  font-family: var(--font-display); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.08em;
  color: var(--teal-soft); background: none; border: 1px solid var(--rule); }
.tm-role { font-size: 0.58rem; letter-spacing: var(--track); text-transform: uppercase; font-weight: 400;
  color: var(--metal-hi); text-align: right; }
.tm-card h3 { font-size: 1.75rem; font-family: var(--font-display); font-weight: 300; margin-top: 4px; }
.tm-title { margin-top: 8px; font-size: 0.84rem; font-weight: 400; color: var(--teal-soft); }
.tm-loc { margin-top: 6px; font-size: 0.58rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--faint); }
.tm-card > p:last-child { margin-top: 12px; color: var(--muted); font-size: 0.92rem; }
.tm-card-wide .tm-av { border-color: var(--metal); color: var(--metal-hi); }
/* Language flags on a team card. Small, ruled, and square-cornered to sit with
   the editorial style rather than reading as sticker art. */
.langs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.lang { display: inline-grid; place-items: center; line-height: 0; overflow: hidden;
  border: 1px solid rgb(var(--text-rgb) / 0.18); border-radius: 2px; }
.lang svg { width: 24px; height: 16px; display: block; }

.tm-card-wide { grid-column: 1 / -1; }
.tm-card-wide > p:last-child { max-width: 72ch; }

@media (max-width: 980px) {
  /* stage collapses: globe on top, chips flow as a 2-col grid */
  .pf-stage { height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pf-globe-wrap { position: relative; left: auto; top: auto; transform: none; grid-column: 1 / -1;
    width: min(440px, 86vw); margin: 0 auto 10px; }
  .pf-globe-word { display: none; }
  /* wrapper becomes a grid row: chip + always-visible enquire button (no hover on touch) */
  /* back to a fixed size: the chips are cards in a grid here, no longer orbiting the globe,
     so sizing them off its diameter has nothing left to stay proportionate to */
  .pf-chip-wrap { position: static; translate: none; animation: none; display: flex; gap: 8px; align-items: stretch;
    font-size: 1rem; }
  .pf-chip { flex: 1; display: flex; }
  .pf-enq { position: static; translate: none; opacity: 1; pointer-events: auto; align-self: center; flex: none; }
  .pf-chip-txt b, .pf-chip-txt small { white-space: normal; }
  .pf-meta { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .pf-stage { grid-template-columns: 1fr; }
  .pf-meta { grid-template-columns: 1fr; }
}

/* ============================================================
   Acquisitions & investment page
   ============================================================ */
/* Badges are shared with the openings deck (.stk-card), so they stay. */
.badge { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 0;
  font-size: 0.56rem; font-weight: 400; letter-spacing: var(--track); text-transform: uppercase;
  border: 1px solid var(--rule); }
.b-confirmed { color: var(--brand-soft); background: rgb(var(--brand-rgb) / 0.35); border-color: rgb(var(--brand-soft-rgb) / 0.4); }
.b-active { color: var(--metal-hi); background: rgb(var(--accent-rgb) / 0.14); border-color: rgb(var(--accent-rgb) / 0.4); }
.b-offer { color: var(--on-accent); background: var(--metal-fill); border: 1px solid var(--metal-fill); }
.b-expanding { color: var(--teal-soft); background: rgb(var(--brand-soft-rgb) / 0.12); }
.b-open { color: var(--muted); background: var(--glass); }
.b-deal { color: var(--faint); background: transparent; }

.acq-assure { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; }

.acq-disclaimer { max-width: 860px; margin-top: clamp(40px, 6vw, 64px); padding-top: 26px;
  border-top: 1px solid var(--glass-brd); font-size: 0.8rem; line-height: 1.7; color: var(--faint); }

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

/* ============================================================
   Acquisitions scroll-expansion hero
   Static by default (full-bleed media + centred title).
   .is-scrub pins the viewport and drives everything off
   CSS vars set per frame: --p, --cx/--ct/--cr (clip inset),
   --xh-bg, --xh-chrome, --xh-panel.
   ============================================================ */
.xhero { padding-block: 0; }
.xhero.is-scrub { height: 330vh; }
.xh-sticky { position: relative; min-height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.xhero.is-scrub .xh-sticky { position: sticky; top: 0; height: 100vh; min-height: 100vh; }

/* Zoom-parallax collage: seven full-viewport layers, each holding one offset tile.
   Scaling the layer scales the tile AND its offset from centre, so outer tiles
   fly past the camera while the centre tile grows to fill the screen. */
.zp-el { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center;
  justify-content: center; will-change: transform; }
.zp-img { position: relative; width: 25vw; height: 25vh; border-radius: 12px;
  overflow: hidden; box-shadow: var(--shadow-sm); }
.zp-img img { width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) contrast(1.02) brightness(1.0); }
.zp-el-1 .zp-img { width: 26vw; height: 26vh; border-radius: calc((1 - var(--p, 0)) * 12px); }
.zp-el-2 .zp-img { top: -30vh; left: 5vw; width: 35vw; height: 30vh; }
.zp-el-3 .zp-img { top: -10vh; left: -25vw; width: 20vw; height: 45vh; }
.zp-el-4 .zp-img { left: 27.5vw; width: 25vw; height: 25vh; }
.zp-el-5 .zp-img { top: 27.5vh; left: 5vw; width: 20vw; height: 25vh; }
.zp-el-6 .zp-img { top: 27.5vh; left: -22.5vw; width: 30vw; height: 25vh; }
.zp-el-7 .zp-img { top: 22.5vh; left: 25vw; width: 15vw; height: 15vh; }

.zp-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--ground-rgb) / 0.46), rgb(var(--ground-rgb) / 0.36) 40%, rgb(var(--ground-rgb) / 0.78)); }
.zphero.is-scrub .zp-scrim { opacity: calc(0.3 + 0.7 * var(--xh-panel, 0)); }

/* static fallback (mobile / reduced motion / no JS): centre image full-bleed */
.zphero:not(.is-scrub) .zp-el { display: none; }
.zphero:not(.is-scrub) .zp-el-1 { display: flex; }
.zphero:not(.is-scrub) .zp-el-1 .zp-img { width: 100%; height: 100%; border-radius: 0; }

.xh-crumb { position: absolute; top: clamp(88px, 11vh, 130px); left: 0; right: 0; z-index: 4;
  text-align: center; opacity: var(--xh-chrome, 1); }
.xh-ui { position: relative; z-index: 3; text-align: center; }
.xh-title { font-size: clamp(2.6rem, 7.4vw, 6rem); font-weight: 300; line-height: 1.04;
  letter-spacing: -0.03em; text-shadow: 0 2px 34px rgb(var(--ground-rgb) / 0.85);
  transform: scale(calc(1 + var(--p, 0) * 0.07)); }
.xh-title span { display: block; }
.xh-l1 { transform: translateX(calc(var(--p, 0) * -5vw)); }
.xh-l2 { transform: translateX(calc(var(--p, 0) * 5vw)); }
.xh-cue { justify-content: center; opacity: var(--xh-chrome, 1); display: none; }
.xhero.is-scrub .xh-cue { display: inline-flex; }

.xh-panel-wrap { position: relative; z-index: 3; width: 100%;
  margin-top: clamp(26px, 5vh, 52px); }
.xhero.is-scrub .xh-panel-wrap { position: absolute; left: 0; right: 0;
  bottom: clamp(28px, 6vh, 64px); margin: 0 auto; }
.xh-panel { max-width: 880px; margin: 0 auto; text-align: center; }
.xh-panel .lead { color: var(--text); font-size: clamp(1rem, 1.5vw, 1.18rem);
  text-shadow: 0 1px 22px rgb(var(--ground-rgb) / 0.9); }
.xh-panel .kpis { margin-top: 26px; justify-content: center; }
.xhero.is-scrub .xh-panel { opacity: var(--xh-panel, 0);
  transform: translateY(calc((1 - var(--xh-panel, 0)) * 36px)); }

/* ============================================================
   Engagement timeline (acquisitions "How we engage")
   Sticky step heads left, content right; a gradient beam draws
   down the base line with scroll and lights each passed step.
   ============================================================ */
.etl { position: relative; margin-top: 14px; }
.etl-line { position: absolute; left: 26px; top: 8px; bottom: 8px; width: 1px;
  background: var(--rule); border-radius: 0; }
.etl-beam { position: absolute; left: 0; top: 0; width: 100%; height: 0; max-height: 100%;
  background: var(--metal); border-radius: 0; box-shadow: none; }

.etl-item { position: relative; display: grid; grid-template-columns: minmax(240px, 34%) 1fr;
  gap: clamp(20px, 4vw, 56px); padding-bottom: clamp(72px, 14vh, 150px); }
.etl-item:last-child { padding-bottom: clamp(16px, 3vh, 32px); }

.etl-left { position: sticky; top: clamp(96px, 16vh, 150px); align-self: start;
  padding-left: 70px; }
.etl-dot { position: absolute; left: 17px; top: 8px; width: 19px; height: 19px;
  border-radius: 50%; background: var(--bg-0); border: 1px solid var(--rule);
  display: grid; place-items: center; }
.etl-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: rgb(var(--text-rgb) / 0.25);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.etl-item.lit .etl-dot::after { background: var(--metal-hi); box-shadow: none; }

.etl-num { display: block; font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 300; line-height: 1;
  letter-spacing: -0.02em; color: rgb(var(--text-rgb) / 0.14);
  transition: color 0.4s var(--ease); }
.etl-item.lit .etl-num { color: var(--metal); }
.etl-left h3 { margin-top: 10px; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 300; }

.etl-body { padding-top: 12px; max-width: 560px; }
.etl-body p { color: var(--muted); line-height: 1.7; }
.etl-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.etl-meta span { padding: 8px 15px; border-radius: 0; font-size: 0.56rem; font-weight: 400;
  letter-spacing: var(--track); text-transform: uppercase;
  color: var(--teal-soft); border: 1px solid var(--rule); background: none; }

@media (max-width: 860px) {
  .etl-item { grid-template-columns: 1fr; gap: 14px; padding-bottom: clamp(48px, 9vh, 84px); }
  .etl-left { position: static; padding-left: 56px; }
  .etl-body { padding-left: 56px; padding-top: 0; }
  .etl-line { left: 18px; }
  .etl-dot { left: 9px; }
}

/* ============================================================
   Stacked openings carousel (acquisitions "All current openings")
   Fanned deck: active card front-centre, neighbours rotate away
   with depth scaling and desaturation. Drag, arrows, click-to-front.
   ============================================================ */
.stk { position: relative; }
.stk-stage { position: relative; height: clamp(470px, 60vh, 570px); touch-action: pan-y; }
.stk-card { position: absolute; left: 50%; top: 50%;
  width: min(340px, 82vw); height: clamp(430px, 55vh, 510px);
  margin-top: calc(clamp(430px, 55vh, 510px) / -2);
  margin-left: calc(min(340px, 82vw) / -2);
  border-radius: 0; overflow: hidden; border: 1px solid var(--rule);
  background: var(--ground-2);
  box-shadow: none; cursor: grab; user-select: none;
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease), opacity 0.5s var(--ease),
    border-color 0.5s var(--ease); }
.stk-card.front { border-color: rgb(var(--accent-rgb) / 0.45); }
.stk.dragging .stk-card { transition: none; cursor: grabbing; }
.stk-idx { position: absolute; right: 14px; bottom: 2px; pointer-events: none;
  font-family: var(--font-display); font-weight: 300; font-size: 7.5rem; line-height: 1;
  letter-spacing: -0.04em; color: rgb(var(--text-rgb) / 0.05); }
.stk-pill { position: absolute; top: 20px; right: 18px; z-index: 1; }
.stk-body { position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 24px 22px 22px; }
.stk-deal { display: block; font-size: 0.56rem; font-weight: 400; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--teal-soft); padding-right: 104px; }
.stk-body h3 { font-family: var(--font-display); font-weight: 300; font-size: 1.5rem;
  line-height: 1.12; margin-top: 9px; padding-right: 40px; }
.stk-body ul { list-style: none; margin: 18px 0 0; padding: 20px 0 12px; display: grid;
  flex: 1; align-content: start; gap: clamp(16px, 3.4vh, 26px);
  border-top: 1px solid var(--glass-brd); }
.stk-body li { position: relative; padding-left: 21px; font-size: 0.96rem; font-weight: 400;
  color: rgb(var(--text-rgb) / 0.78); line-height: 1.55; }
.stk-body li::before { content: ""; position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(150deg, var(--metal-hi), var(--metal-deep)); }
.stk-enq { margin-top: auto; display: inline-flex; align-items: center; gap: 11px;
  letter-spacing: var(--track); text-transform: uppercase; font-size: 0.6rem; font-weight: 400;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; color: var(--metal-hi); }
.stk-enq svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.stk-enq:hover svg { transform: translateX(4px); }

.stk-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
.stk-arrow { width: 46px; height: 46px; border-radius: 0; display: grid; place-items: center;
  cursor: pointer; background: var(--glass); border: 1px solid var(--glass-brd);
  color: var(--text); transition: border-color 0.3s var(--ease); }
.stk-arrow:hover { border-color: var(--rule-hi); }
.stk-arrow[disabled] { opacity: 0.35; cursor: default; }
.stk-arrow svg { width: 18px; height: 18px; }
.stk-count { min-width: 46px; text-align: center; font-size: 0.62rem; font-weight: 400; letter-spacing: 0.16em;
  letter-spacing: 0.12em; color: var(--faint); }