/* ============================================================
   TerraForge Underground — core stylesheet
   Fluid scaling system, dark industrial design language.
   ============================================================ */

/* ---------- 1. Fluid scaling system ---------- */
:root {
  --size-unit: 16;
  --size-container-ideal: 1440;
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));

  --site-margin: 2em;
  --gutter: 1.25em;

  /* Brand */
  --primary: #101110;
  --primary-soft: #191b19;
  --primary-line: #2a2d2b;
  --white: #ffffff;
  --bone: #edebe6;
  --accent: #ff6a13;
  --ember: #e8b23a;
  --muted: rgba(255, 255, 255, 0.5);
  --muted-dark: rgba(16, 17, 16, 0.5);
  --hairline: rgba(255, 255, 255, 0.14);
  --hairline-dark: rgba(16, 17, 16, 0.14);

  --font-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --nav-h: 4.5em;
}

@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834;
    --size-container-min: 768px;
    --size-container-max: 991px;
    --site-margin: 1.5em;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550;
    --size-container-min: 480px;
    --size-container-max: 767px;
    --site-margin: 1em;
  }
}
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390;
    --size-container-min: 320px;
    --size-container-max: 479px;
    --site-margin: 1em;
  }
}

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

html {
  scroll-behavior: initial;
  background-color: var(--primary);
  scrollbar-width: none;
  -webkit-text-size-adjust: 100%;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; }
body { -ms-overflow-style: none; }

body {
  margin: 0;
  font-size: var(--size-font);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.4;
  color: var(--white);
  background-color: var(--primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* `clip` (not `hidden`) so position:sticky and ScrollTrigger pinning keep working */
  overflow-x: hidden;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; height: 100vh; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
a, button { cursor: pointer; }
button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
}
input, textarea, select { font: inherit; color: inherit; }
textarea { resize: none; }
::selection { background-color: var(--accent); color: var(--primary); text-shadow: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Typography ---------- */
.eyebrow-s, .eyebrow-m, .eyebrow-l {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.1;
  display: block;
}
.eyebrow-s { font-size: 0.75em; }
.eyebrow-m { font-size: 0.875em; }
.eyebrow-l { font-size: 1.125em; letter-spacing: 0.02em; }

.body-s   { font-size: 0.9375em; line-height: 1.5; }
.body-m   { font-size: 1.125em; line-height: 1.45; }
.body-l   { font-size: 1.5em; line-height: 1.35; letter-spacing: -0.01em; }
.body-xl  { font-size: 2.5em; line-height: 1.1; letter-spacing: -0.03em; font-weight: 500; }
.body-xxl { font-size: 5em; line-height: 0.95; letter-spacing: -0.04em; font-weight: 500; }
.body-4xl { font-size: 8em; line-height: 0.86; letter-spacing: -0.05em; font-weight: 600; }

.h1 {
  font-size: 6.25em;
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 500;
}
.h2 {
  font-size: 4em;
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-weight: 500;
}
.h3 {
  font-size: 2.25em;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
}
.is-accent { color: var(--accent); }
.is-dim { color: var(--muted); }
.text-balance { text-wrap: balance; }

/* ---------- 4. Layout ---------- */
.page-wrap { position: relative; }

.section {
  position: relative;
  padding: 8em var(--site-margin);
}
.section.is-flush { padding-left: 0; padding-right: 0; }
.section.is-tight { padding-top: 4em; padding-bottom: 4em; }

.shell { width: 100%; margin: 0 auto; max-width: 108em; }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }
.start-7 { grid-column-start: 7; }
.start-6 { grid-column-start: 6; }

.hr {
  height: 1px;
  width: 100%;
  background-color: var(--hairline);
  transform-origin: left center;
}
.is-light .hr { background-color: var(--hairline-dark); }

/* Section intro block: S.0x  /  Title  /  paragraph */
.intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
  padding-top: 1.5em;
  padding-bottom: 4em;
}
.intro_index {
  grid-column: span 2;
  color: var(--accent);
}
.intro_title { grid-column: span 4; }
.intro_text  { grid-column: 7 / span 5; }
.intro_text p { color: var(--muted); }

.is-light { background-color: var(--bone); color: var(--primary); }

/* Everything that reads as "secondary text" has to flip with the section. */
.is-light .intro_text p,
.is-light .is-dim,
.is-light .feature p,
.is-light .service-card_text,
.is-light .machine_body p,
.is-light .contact_card .body-s,
.is-light .job .j-meta,
.is-light .safety_pledge p,
.is-light .form_note,
.is-light .field label { color: var(--muted-dark); }

.is-light .feature { background-color: var(--bone); }
.is-light .feature:hover { background-color: rgba(16, 17, 16, 0.05); }
.is-light .feature-grid,
.is-light .machines,
.is-light .contact_cards { background-color: var(--hairline-dark); border-color: var(--hairline-dark); }
.is-light .jobs { border-top-color: var(--hairline-dark); }
.is-light .job { border-bottom-color: var(--hairline-dark); }
.is-light .job:hover { background-color: rgba(16, 17, 16, 0.05); }
.is-light .stat { border-color: var(--hairline-dark); }
.is-light .stats-grid { border-color: var(--hairline-dark); }
.is-light .stat:hover { background-color: rgba(16, 17, 16, 0.05); }
.is-light .safety_pledges,
.is-light .safety_pledge { border-color: var(--hairline-dark); }

/* Inverted buttons so they still carry weight on the bone background. */
.is-light .button {
  background-color: var(--primary);
  color: var(--bone);
}
.is-light .button::before { background-color: var(--accent); }
.is-light .button:hover { color: var(--white); }
.is-light .button .button_arrow { background-color: var(--bone); }
.is-light .button .button_arrow svg { stroke: var(--primary); }
.is-light .button:hover .button_arrow { background-color: var(--primary); }
.is-light .button:hover .button_arrow svg { stroke: var(--white); }
.is-light .text-button { border-color: var(--hairline-dark); }

/* ---------- 5. Buttons ---------- */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.9em 1.1em 0.9em 1.5em;
  border-radius: 999px;
  background-color: var(--white);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 0.8125em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease-out);
  will-change: transform;
}
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--accent);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease-out);
}
.button:hover { color: var(--white); }
.button:hover::before { transform: translateY(0); }
.button.is-outline {
  background-color: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.button.is-outline:hover { color: var(--primary); }
.button.is-outline::before { background-color: var(--white); }
.button.is-accent-fill { background-color: var(--accent); color: var(--white); }
.button.is-accent-fill::before { background-color: var(--white); }
.button.is-accent-fill:hover { color: var(--primary); }

.button_arrow {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.85em;
  height: 1.85em;
  border-radius: 999px;
  background-color: var(--primary);
  overflow: hidden;
  flex: none;
  transition: background-color 0.45s var(--ease-out);
}
.button.is-outline .button_arrow { background-color: var(--white); }
.button:hover .button_arrow { background-color: var(--white); }
.button.is-outline:hover .button_arrow { background-color: var(--primary); }
.button_arrow svg {
  width: 0.72em; height: 0.72em;
  stroke: var(--white);
  transition: stroke 0.45s var(--ease-out), transform 0.5s var(--ease-out);
}
.button.is-outline .button_arrow svg { stroke: var(--primary); }
.button:hover .button_arrow > svg { stroke: var(--primary); transform: translate(140%, -140%); }
.button.is-outline:hover .button_arrow > svg { stroke: var(--white); }
.button_arrow .arrow-ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translate(-140%, 140%);
  transition: transform 0.5s var(--ease-out);
}
.button:hover .button_arrow .arrow-ghost { transform: translate(0, 0); }

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.8125em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--hairline);
  transition: border-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.text-button:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- 6. Reveal primitives ---------- */
.line-mask { display: block; overflow: hidden; }
.split-line { display: block; overflow: hidden; }
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.word > .char { display: inline-block; will-change: transform; }

[data-reveal] { opacity: 0; }
[data-fade] { opacity: 0; }

.img-wrap {
  position: relative;
  overflow: hidden;
  background-color: var(--primary-soft);
}
.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.img-wrap.is-16-9 { aspect-ratio: 16 / 9; }
.img-wrap.is-4-3  { aspect-ratio: 4 / 3; }
.img-wrap.is-3-4  { aspect-ratio: 3 / 4; }
.img-wrap.is-1-1  { aspect-ratio: 1 / 1; }
.img-wrap.is-tall { aspect-ratio: 9 / 14; }

/* ============================================================
   LOADER
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  background-color: var(--primary);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--site-margin);
  clip-path: inset(0% 0% 0% 0%);
}
.loader.is-done { pointer-events: none; }
.loader_center {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.25em;
}
.loader_mark {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  font-size: 2.25em;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.loader_mark .mark-dot {
  width: 0.22em; height: 0.22em;
  border-radius: 999px;
  background-color: var(--accent);
  transform: scale(0);
}
.loader_bar {
  width: min(22em, 60vw);
  height: 2px;
  background-color: var(--primary-line);
  overflow: hidden;
}
.loader_bar span {
  display: block;
  height: 100%;
  width: 100%;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.loader_bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--muted);
}
.loader_count { font-variant-numeric: tabular-nums; }

/* ============================================================
   ROTATE NOTICE
   ============================================================ */
.rotate-notice {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  place-items: center;
  text-align: center;
  padding: 2em;
  background-color: var(--primary);
}
.rotate-notice svg { margin: 0 auto 1.25em; width: 2.5em; height: 2.5em; stroke: var(--accent); }
@media screen and (max-height: 450px) and (orientation: landscape) and (pointer: coarse) {
  .rotate-notice { display: grid; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  height: var(--nav-h);
  padding: 0 var(--site-margin);
  mix-blend-mode: normal;
  transition: transform 0.6s var(--ease-out), background-color 0.5s ease, backdrop-filter 0.5s ease;
}
.nav.is-hidden { transform: translateY(-101%); }
.nav.is-solid {
  background-color: rgba(16, 17, 16, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav_logo {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 1.125em;
  font-weight: 600;
  letter-spacing: -0.03em;
  z-index: 2;
}
.nav_logo .logo-mark {
  width: 1.5em; height: 1.5em;
  flex: none;
}
.nav_logo .logo-mark path,
.nav_logo .logo-mark polygon { transition: fill 0.4s ease; }

.nav_links {
  display: flex;
  align-items: center;
  gap: 0.25em;
}
.navlink {
  position: relative;
  display: block;
  padding: 0.5em 0.85em;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* The mask has to live on the label itself — .navlink's padding would otherwise
   leave the duplicate copy visible below the resting text. */
.navlink_label { display: block; position: relative; overflow: hidden; }
.navlink_label span {
  display: block;
  transition: transform 0.5s var(--ease-out);
}
.navlink_label span:last-child {
  position: absolute;
  inset: 0;
  transform: translateY(110%);
  color: var(--accent);
}
.navlink:hover .navlink_label span { transform: translateY(-110%); }
.navlink:hover .navlink_label span:last-child { transform: translateY(0); }
.navlink.is-current .navlink_label span:first-child { color: var(--accent); }

.nav_right {
  display: flex;
  align-items: center;
  gap: 0.75em;
  z-index: 2;
}
.locale {
  display: flex;
  align-items: center;
  gap: 0.1em;
  padding: 0.25em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.6875em;
  text-transform: uppercase;
}
.locale button {
  padding: 0.35em 0.7em;
  border-radius: 999px;
  color: var(--muted);
  transition: color 0.35s ease, background-color 0.35s ease;
}
.locale button.is-active { color: var(--primary); background-color: var(--white); }

.nav_socials { display: flex; gap: 0.35em; }
.nav_socials a {
  display: grid; place-items: center;
  width: 2em; height: 2em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.nav_socials a svg { width: 0.85em; height: 0.85em; fill: currentColor; }
.nav_socials a:hover { background-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.menu-toggle {
  position: relative;
  display: none;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 1em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 2;
}
.menu-toggle_bars { display: grid; gap: 3px; width: 1em; }
.menu-toggle_bars i {
  display: block; height: 1px; width: 100%;
  background-color: currentColor;
  transition: transform 0.4s var(--ease-out), opacity 0.3s ease;
}
body.menu-open .menu-toggle_bars i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.menu-open .menu-toggle_bars i:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle_bars i:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* Fullscreen menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  background-color: var(--primary);
  padding: calc(var(--nav-h) + 2em) var(--site-margin) var(--site-margin);
  display: grid;
  grid-template-rows: 1fr auto;
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  visibility: hidden;
}
.menu_bg {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.15);
}
.menu_bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--primary), transparent 45%, var(--primary));
}
.menu_list { position: relative; display: grid; align-content: center; gap: 0.1em; }
.menu_item { overflow: hidden; }
.menu_item a {
  display: flex;
  align-items: baseline;
  gap: 1em;
  padding: 0.12em 0;
  font-size: 4.5em;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  transition: color 0.4s ease, padding-left 0.5s var(--ease-out);
}
.menu_item a .menu_num {
  font-family: var(--font-mono);
  font-size: 0.16em;
  color: var(--accent);
  letter-spacing: 0.06em;
}
.menu_item a:hover { color: var(--accent); padding-left: 0.6em; }
.menu_foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1em;
  padding-top: 1.5em;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
}

/* Page transition curtain */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 250;
  background-color: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom center;
  pointer-events: none;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  /* Creates a stacking context so the negative-z media layer paints above the
     body background instead of disappearing behind it. */
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + 2em) var(--site-margin) 2em;
  overflow: hidden;
}
.hero_media {
  position: absolute;
  inset: 0;
  z-index: -2;
  will-change: transform;
  /* Stands in whenever the video is still buffering or cannot autoplay. */
  background-image: url("../img/hero-poster.jpg");
  background-size: cover;
  background-position: center;
}
.hero_media video,
.hero_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero_media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(16,17,16,0.55) 0%, rgba(16,17,16,0.12) 38%, rgba(16,17,16,0.88) 100%),
    radial-gradient(130% 85% at 50% 38%, transparent 28%, rgba(16,17,16,0.45) 100%);
}
.hero_grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero_top {
  position: absolute;
  top: calc(var(--nav-h) + 1.5em);
  left: var(--site-margin);
  right: var(--site-margin);
  display: flex;
  justify-content: space-between;
  color: var(--muted);
}
.hero_title { max-width: 14em; }
.hero_bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2em;
  flex-wrap: wrap;
  margin-top: 2em;
  padding-top: 1.5em;
  border-top: 1px solid var(--hairline);
}
.hero_stat { display: grid; gap: 0.4em; }
.hero_stat .stat_number {
  font-size: 3em;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero_actions { display: flex; gap: 0.75em; flex-wrap: wrap; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.25em;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.5em;
  color: var(--muted);
}
.scroll-cue_line {
  width: 1px; height: 2.5em;
  background: linear-gradient(to bottom, var(--accent), transparent);
}

/* ============================================================
   S.01 ABOUT / STATS
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.stat {
  padding: 2em 1.25em 2.5em;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: grid;
  align-content: space-between;
  gap: 2.5em;
  min-height: 11em;
  transition: background-color 0.5s var(--ease-out);
}
.stat:hover { background-color: var(--primary-soft); }
.stat_number {
  font-size: 3.5em;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.stat_number .unit { color: var(--accent); }
.stat_label { color: var(--muted); }

.about_body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: end;
  padding-top: 4em;
}
.about_body .about_text { grid-column: 1 / span 5; }
.about_body .about_imgs { grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.about_imgs .img-wrap:nth-child(2) { margin-top: 3em; }

/* ============================================================
   S.02 SERVICES
   ============================================================ */
.services {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}
.services_viewer {
  grid-column: span 5;
  position: sticky;
  top: calc(var(--nav-h) + 2em);
}
.services_stage {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--primary-soft);
}
.services_stage img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.7s var(--ease-out), transform 1.1s var(--ease-out);
}
.services_stage img.is-active { opacity: 1; transform: scale(1); }
.services_stage::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,17,16,0.55), transparent 55%);
  pointer-events: none;
}
.services_stage-index {
  position: absolute;
  left: 1.25em; bottom: 1.25em;
  z-index: 2;
  color: var(--white);
}
.services_list { grid-column: 7 / span 6; }

.service-card {
  position: relative;
  display: grid;
  gap: 0.9em;
  padding: 2em 0;
  border-top: 1px solid var(--hairline);
  cursor: pointer;
  transition: padding-left 0.6s var(--ease-out);
}
.service-card:last-child { border-bottom: 1px solid var(--hairline); }
.service-card_head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
}
.service-card_num { color: var(--accent); font-family: var(--font-mono); font-size: 0.75em; }
.service-card_title {
  font-size: 2em;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  transition: color 0.4s ease;
}
.service-card_text { color: var(--muted); max-width: 34em; }
.service-card_thumb { display: none; }
.service-card.is-active { padding-left: 1.25em; }
.service-card.is-active .service-card_title { color: var(--accent); }
.service-card_bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background-color: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.6s var(--ease-out);
}
.service-card.is-active .service-card_bar { transform: scaleY(1); }

/* ============================================================
   S.03 MINERALS
   ============================================================ */
.section_minerals {
  position: relative;
  background-color: var(--primary);
  padding: 0;
}
.minerals_pin {
  position: relative;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(var(--nav-h) + 1.5em) var(--site-margin) 2em;
}
.minerals_glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 65vmin; height: 65vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  background: var(--accent);
  transition: background-color 0.9s var(--ease-out);
  pointer-events: none;
}
.minerals_head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  position: relative;
  z-index: 2;
}
.minerals_stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1em;
  z-index: 2;
}
.minerals_canvas-wrap {
  position: relative;
  width: min(46vmin, 34em);
  aspect-ratio: 1;
  justify-self: center;
}
#minerals-canvas { width: 100%; height: 100%; display: block; }

.minerals_symbol {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.minerals_symbol .sym {
  font-size: 16em;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.10);
  text-transform: uppercase;
}

.minerals_left, .minerals_right { display: grid; gap: 1.25em; }
.minerals_right { justify-items: end; text-align: right; }
.minerals_name {
  font-size: 4em;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  overflow: hidden;
}
.minerals_name .m-inner { display: block; }
.minerals_meta { display: grid; gap: 0.35em; color: var(--muted); }
.minerals_meta .m-val {
  display: block;
  overflow: hidden;
  color: var(--white);
  font-size: 1.5em;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.minerals_ticker {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1em;
}
.minerals_list {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  flex-wrap: wrap;
}
.minerals_list button {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.8125em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: color 0.4s ease;
}
.minerals_list button .m-el { color: var(--accent); opacity: 0; transition: opacity 0.4s ease; }
.minerals_list button.is-active { color: var(--white); }
.minerals_list button.is-active .m-el { opacity: 1; }
.minerals_progress {
  height: 2px;
  width: 100%;
  background-color: var(--primary-line);
  overflow: hidden;
}
.minerals_progress i {
  display: block;
  height: 100%;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ============================================================
   S.04 SAFETY
   ============================================================ */
.safety {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}
.safety_media { grid-column: span 6; }
.safety_media .img-wrap { aspect-ratio: 4 / 5; }
.safety_text {
  grid-column: 8 / span 5;
  position: sticky;
  top: calc(var(--nav-h) + 3em);
  display: grid;
  gap: 2em;
}
.safety_pledges { display: grid; gap: 0; border-top: 1px solid var(--hairline-dark); }
.safety_pledge {
  display: grid;
  grid-template-columns: 3em 1fr;
  gap: 1em;
  padding: 1.25em 0;
  border-bottom: 1px solid var(--hairline-dark);
}
.safety_pledge .p-num { color: var(--accent); font-family: var(--font-mono); font-size: 0.75em; }

/* ============================================================
   S.05 TECHNOLOGY
   ============================================================ */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  width: 100%;
  gap: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee_row {
  display: flex;
  flex: none;
  will-change: transform;
}
.marquee_track {
  display: flex;
  align-items: center;
  gap: 1.25em;
  flex: none;
  padding-right: 1.25em;
}
.marquee_track > span {
  display: flex;
  align-items: center;
  gap: 1.25em;
  font-size: 5em;
  font-weight: 500;
  letter-spacing: -0.04em;
  white-space: nowrap;
  line-height: 1;
}
.marquee_track .dot {
  width: 0.16em; height: 0.16em;
  border-radius: 999px;
  background-color: var(--accent);
  flex: none;
}
.marquee_track .outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--hairline);
}

.machines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--hairline);
  border: 1px solid var(--hairline);
}
.machine {
  position: relative;
  background-color: var(--primary);
  overflow: hidden;
  min-height: 22em;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5em;
  cursor: pointer;
}
.machine_img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.machine_img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.55) contrast(1.1);
  transform: scale(1.06);
  transition: filter 0.7s var(--ease-out), transform 1.2s var(--ease-out);
}
.machine::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(16,17,16,0.92) 8%, rgba(16,17,16,0.15) 65%);
  transition: opacity 0.6s ease;
}
.machine:hover .machine_img img,
.machine.is-open .machine_img img { filter: grayscale(0) brightness(0.7) contrast(1.05); transform: scale(1); }
.machine_content { position: relative; z-index: 2; display: grid; gap: 0.75em; }
.machine_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}
.machine_title { font-size: 1.375em; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.machine_toggle {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.6875em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.5em 0.85em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hairline);
  flex: none;
  transition: background-color 0.4s ease, color 0.4s ease;
}
.machine.is-open .machine_toggle { background-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.machine_toggle .plus { transition: transform 0.5s var(--ease-out); }
.machine.is-open .machine_toggle .plus { transform: rotate(135deg); }
.machine_toggle .lbl-close { display: none; }
.machine.is-open .machine_toggle .lbl-open { display: none; }
.machine.is-open .machine_toggle .lbl-close { display: block; }
.machine_body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease-out);
}
.machine.is-open .machine_body { grid-template-rows: 1fr; }
.machine_body > div { overflow: hidden; }
.machine_body p { color: var(--muted); padding-top: 0.5em; }

.tech_foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2em;
  flex-wrap: wrap;
  padding-top: 3em;
}
.tech_foot p { max-width: 34em; color: var(--muted); }

/* ============================================================
   S.06 TEAM
   ============================================================ */
.team_head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: end;
  padding-bottom: 3em;
}
.testimonials { grid-column: 7 / span 6; display: grid; gap: 1.5em; }
.testimonial_stage { position: relative; min-height: 9em; }
.testimonial {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 1em;
  align-content: start;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out);
}
.testimonial.is-active { opacity: 1; pointer-events: auto; }
.testimonial blockquote { font-size: 1.5em; line-height: 1.25; letter-spacing: -0.02em; }
.testimonial_by { display: flex; align-items: center; gap: 0.75em; color: var(--muted); }
.testimonial_by img { width: 2.5em; height: 2.5em; border-radius: 999px; object-fit: cover; }
.testimonial_nav { display: flex; gap: 0.5em; }
.testimonial_nav button {
  font-family: var(--font-mono);
  font-size: 0.75em;
  padding: 0.4em 0.8em;
  border-radius: 999px;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: color 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}
.testimonial_nav button.is-active {
  color: var(--primary);
  background-color: var(--white);
  box-shadow: inset 0 0 0 1px var(--white);
}

.departments {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--hairline);
  border: 1px solid var(--hairline);
}
.department {
  position: relative;
  background-color: var(--primary);
  min-height: 24em;
  display: flex;
  align-items: flex-end;
  padding: 1.25em;
  overflow: hidden;
}
.department img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.45);
  transform: scale(1.05);
  transition: transform 1.1s var(--ease-out), filter 0.7s var(--ease-out);
}
.department::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,17,16,0.9), transparent 60%);
}
.department:hover img { transform: scale(1); filter: grayscale(0) brightness(0.65); }
.department_label { position: relative; z-index: 2; display: grid; gap: 0.4em; }
.department_label .d-name { font-size: 1.125em; font-weight: 500; letter-spacing: -0.01em; }

/* ============================================================
   S.07 PARTNERS
   ============================================================ */
.partners_rows { display: grid; gap: 1px; background-color: var(--hairline-dark); border-block: 1px solid var(--hairline-dark); }
.partner-row {
  background-color: var(--bone);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1.4em 0.5em;
  transition: background-color 0.5s var(--ease-out), padding-left 0.5s var(--ease-out);
}
.partner-row:hover { background-color: var(--primary); color: var(--bone); padding-left: 1.25em; }
.partner-row .p-name { font-size: 1.75em; font-weight: 500; letter-spacing: -0.03em; }
.partner-row .p-meta { font-family: var(--font-mono); font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55; }

.scroll-marquee {
  overflow: hidden;
  padding: 2.5em 0;
  border-bottom: 1px solid var(--hairline-dark);
}
.scroll-marquee .marquee_track > span { font-size: 3em; }
.is-light .marquee_track .outline { -webkit-text-stroke: 1px var(--hairline-dark); }
.is-light .marquee { -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); }

/* ============================================================
   S.08 NEXT / CTA
   ============================================================ */
.next {
  position: relative;
  min-height: 88svh;
  display: grid;
  align-content: space-between;
  padding: 5em var(--site-margin);
  overflow: hidden;
}
.next_bg { position: absolute; inset: -10%; z-index: 0; }
.next_bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4) contrast(1.1); }
.next_bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(16,17,16,0.85), rgba(16,17,16,0.35) 50%, rgba(16,17,16,0.95));
}
.next_head, .next_body { position: relative; z-index: 2; }
.next_body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2em;
  flex-wrap: wrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  padding: 4em var(--site-margin) 2em;
  border-top: 1px solid var(--hairline);
}
.footer_top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  padding-bottom: 4em;
}
.footer_brand { grid-column: span 4; display: grid; gap: 1.25em; align-content: start; }
.footer_cols { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.footer_col { display: grid; gap: 0.75em; align-content: start; }
.footer_col .col-title { color: var(--accent); }
.footer_col a { color: var(--muted); transition: color 0.35s ease; font-size: 0.9375em; }
.footer_col a:hover { color: var(--white); }
.footer_bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
  padding-top: 1.5em;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
}
.footer_wordmark {
  font-size: 12.5vw;
  line-height: 0.82;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--hairline);
  padding-bottom: 0.06em;
  user-select: none;
}

/* ============================================================
   INNER PAGES
   ============================================================ */
.page-hero {
  position: relative;
  min-height: 62svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + 4em) var(--site-margin) 3em;
  overflow: hidden;
}
.page-hero_bg { position: absolute; inset: -8%; z-index: 0; }
.page-hero_bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.42) grayscale(0.35); }
.page-hero_bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(16,17,16,0.7), rgba(16,17,16,0.25) 45%, var(--primary));
}
.page-hero_inner { position: relative; z-index: 2; display: grid; gap: 1.25em; width: 100%; }
.crumbs { display: flex; gap: 0.5em; color: var(--muted); }
.crumbs .sep { color: var(--accent); }

.prose { display: grid; gap: 1.25em; max-width: 40em; }
.prose p { color: var(--muted); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--hairline);
  border: 1px solid var(--hairline);
}
.feature {
  background-color: var(--primary);
  padding: 2em 1.5em 2.5em;
  display: grid;
  gap: 0.75em;
  align-content: start;
  min-height: 15em;
  transition: background-color 0.5s var(--ease-out);
}
.feature:hover { background-color: var(--primary-soft); }
.feature .f-num { color: var(--accent); }
.feature .f-title { font-size: 1.375em; font-weight: 500; letter-spacing: -0.02em; }
.feature p { color: var(--muted); }

.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: center;
}
.split_media { grid-column: span 6; }
.split_text { grid-column: 8 / span 5; display: grid; gap: 1.25em; align-content: start; }
.split.is-reverse .split_media { grid-column: 7 / span 6; order: 2; }
.split.is-reverse .split_text { grid-column: 1 / span 5; order: 1; }

/* Contact form */
.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25em;
}
.field { display: grid; gap: 0.5em; }
.field.is-full { grid-column: span 2; }
.field label { color: var(--muted); }
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.9em 1em;
  background-color: var(--primary-soft);
  border: 1px solid var(--hairline);
  border-radius: 0.25em;
  color: var(--white);
  font-size: 1em;
  transition: border-color 0.35s ease, background-color 0.35s ease;
}
.field textarea { min-height: 9em; }
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-color: var(--accent); background-color: var(--primary); }
.form_note { grid-column: span 2; color: var(--muted); }
.form_success {
  grid-column: span 2;
  display: none;
  padding: 1em 1.25em;
  border: 1px solid var(--accent);
  border-radius: 0.25em;
  color: var(--accent);
}
.form.is-sent .form_success { display: block; }

.contact_cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--hairline);
  border: 1px solid var(--hairline);
}
.contact_card {
  background-color: var(--primary);
  padding: 2em 1.5em;
  display: grid;
  gap: 0.5em;
  align-content: start;
}
.contact_card .c-title { color: var(--accent); }
.contact_card .c-val { font-size: 1.25em; letter-spacing: -0.01em; }

/* Job listings */
.jobs { display: grid; border-top: 1px solid var(--hairline); }
.job {
  display: grid;
  grid-template-columns: 4em 1fr auto auto;
  gap: 1.25em;
  align-items: center;
  padding: 1.75em 0.5em;
  border-bottom: 1px solid var(--hairline);
  transition: background-color 0.5s var(--ease-out), padding-left 0.5s var(--ease-out);
}
.job:hover { background-color: var(--primary-soft); padding-left: 1.25em; }
.job .j-num { color: var(--accent); }
.job .j-title { font-size: 1.5em; font-weight: 500; letter-spacing: -0.02em; }
.job .j-meta { color: var(--muted); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 1100px) {
  .h1 { font-size: 5em; }
  .body-4xl { font-size: 6em; }
}

@media screen and (max-width: 991px) {
  .section { padding-top: 6em; padding-bottom: 6em; }
  .nav_links { display: none; }
  .menu-toggle { display: flex; }
  .nav_socials { display: none; }

  .h1 { font-size: 4.25em; }
  .h2 { font-size: 3em; }
  .body-xxl { font-size: 3.5em; }
  .body-4xl { font-size: 4.5em; }
  .body-xl { font-size: 2em; }

  .intro_index { grid-column: span 12; padding-bottom: 0.5em; }
  .intro_title { grid-column: span 12; }
  .intro_text { grid-column: span 12; padding-top: 1em; }

  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat_number { font-size: 2.75em; }

  .about_body { padding-top: 3em; }
  .about_body .about_text { grid-column: span 12; }
  .about_body .about_imgs { grid-column: span 12; padding-top: 2em; }

  .services_viewer { grid-column: span 12; position: relative; top: 0; display: none; }
  .services_list { grid-column: span 12; }
  .service-card_thumb { display: block; }
  .service-card_thumb .img-wrap { aspect-ratio: 16 / 10; }

  .minerals_stage { grid-template-columns: 1fr; justify-items: center; gap: 1.5em; }
  .minerals_left, .minerals_right { justify-items: center; text-align: center; }
  .minerals_right { justify-items: center; text-align: center; }
  .minerals_name { font-size: 3em; }
  .minerals_canvas-wrap { width: min(52vmin, 22em); }
  .minerals_symbol .sym { font-size: 9em; }

  .safety_media { grid-column: span 12; }
  .safety_text { grid-column: span 12; position: relative; top: 0; padding-top: 2.5em; }

  .machines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marquee_track > span { font-size: 3.25em; }

  .team_head { padding-bottom: 2em; }
  .testimonials { grid-column: span 12; padding-top: 2em; }
  .departments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .department { min-height: 18em; }

  .footer_brand { grid-column: span 12; }
  .footer_cols { grid-column: span 12; padding-top: 2.5em; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2em var(--gutter); }

  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split_media, .split_text,
  .split.is-reverse .split_media, .split.is-reverse .split_text { grid-column: span 12; }
  .split.is-reverse .split_media { order: 1; }
  .split.is-reverse .split_text { order: 2; }
  .contact_cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .menu_item a { font-size: 3.25em; }
}

@media screen and (max-width: 767px) {
  .section { padding-top: 4.5em; padding-bottom: 4.5em; }
  .h1 { font-size: 3.25em; }
  .h2 { font-size: 2.5em; }
  .h3 { font-size: 1.75em; }
  .body-xxl { font-size: 2.75em; }
  .body-4xl { font-size: 3.25em; }
  .body-xl { font-size: 1.75em; }
  .body-l { font-size: 1.25em; }

  .hero { padding-bottom: 3.5em; }
  .hero_top { display: none; }
  .hero_bottom { flex-direction: column; align-items: flex-start; gap: 1.5em; }
  .hero_stat .stat_number { font-size: 2.25em; }
  .hero_actions { width: 100%; }
  .hero_actions .button { flex: 1 1 auto; justify-content: space-between; }
  .scroll-cue { display: none; }

  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { min-height: 9em; padding: 1.5em 1em 1.75em; gap: 1.5em; }
  .stat_number { font-size: 2.25em; }

  .about_body .about_imgs { grid-template-columns: 1fr; }
  .about_imgs .img-wrap:nth-child(2) { margin-top: 0; }

  .service-card { padding: 1.5em 0; }
  .service-card_title { font-size: 1.5em; }

  .minerals_pin { padding-top: calc(var(--nav-h) + 0.75em); padding-bottom: 1.25em; }
  .minerals_name { font-size: 2.25em; }
  .minerals_meta .m-val { font-size: 1.125em; }
  .minerals_canvas-wrap { width: min(62vmin, 18em); }
  .minerals_symbol .sym { font-size: 6.5em; }
  .minerals_list { justify-content: center; gap: 0.5em 1em; }
  .minerals_list button { font-size: 0.6875em; }

  .machines { grid-template-columns: 1fr; }
  .machine { min-height: 18em; }
  .marquee_track > span { font-size: 2.25em; }
  .scroll-marquee .marquee_track > span { font-size: 1.75em; }

  .departments { grid-template-columns: 1fr; }
  .department { min-height: 15em; }
  .testimonial blockquote { font-size: 1.25em; }
  .testimonial_stage { min-height: 12em; }

  .partner-row { padding: 1em 0.25em; }
  .partner-row .p-name { font-size: 1.25em; }
  .partner-row .p-meta { display: none; }

  .next { min-height: 70svh; padding: 3.5em var(--site-margin); }
  .next_body { flex-direction: column; align-items: flex-start; }

  .footer_cols { grid-template-columns: 1fr 1fr; }
  .footer_wordmark { font-size: 15vw; }
  .footer_bottom { flex-direction: column; align-items: flex-start; gap: 0.5em; }

  .feature-grid { grid-template-columns: 1fr; }
  .contact_cards { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .field.is-full { grid-column: span 1; }
  .form_note, .form_success { grid-column: span 1; }

  .job { grid-template-columns: 1fr auto; gap: 0.5em 1em; padding: 1.25em 0.25em; }
  .job .j-num { display: none; }
  .job .j-title { font-size: 1.125em; grid-column: 1 / -1; }

  .menu_item a { font-size: 2.25em; gap: 0.6em; }
  .menu_item a .menu_num { font-size: 0.22em; }
  .menu_foot { font-size: 0.85em; }
}

@media screen and (max-width: 479px) {
  .h1 { font-size: 2.75em; }
  .minerals_canvas-wrap { width: min(66vmin, 15em); }
  .minerals_name { font-size: 2em; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal], [data-fade] { opacity: 1 !important; }
}