/* ============================================================
   Subterra — underground mining contractor
   Type + scale + layout system
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{
  font-family:'Inter Tight';
  src:url('../assets/fonts/inter-tight-var.woff2') format('woff2-variations'),
      url('../assets/fonts/inter-tight-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Mono';
  src:url('../assets/fonts/dm-mono-300.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Mono';
  src:url('../assets/fonts/dm-mono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

/* ---------- Fluid scaling system --------------------------------
   Every size in this sheet is expressed in `em` against a root font
   size that tracks the viewport, so proportions hold at every width
   instead of only the breakpoints.
------------------------------------------------------------------ */
: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)));

  --primary:#151515;
  --white:#ffffff;
  --accent:#f47920;
  --light-green:#ebf0ed;
  --gray:#e0e0e0;

  --margin:2em;          /* site gutter */
  --gap:1em;             /* grid gutter */
  --block:16em;          /* space between major blocks */
  --radius:.5em;

  --ease:cubic-bezier(.5,0,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
@media screen and (max-width:991px){
  :root{--size-container-ideal:834;--size-container-min:768px;--size-container-max:991px;--block:9em}
}
@media screen and (max-width:767px){
  :root{--size-container-ideal:550;--size-container-min:480px;--size-container-max:767px;--block:6.5em}
}
@media screen and (max-width:479px){
  :root{--size-container-ideal:390;--size-container-min:320px;--size-container-max:479px;--block:5.5em}
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:initial;background:var(--primary);color-scheme:only light;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--primary);
  color:var(--primary);
  font-family:'Inter Tight',Helvetica,Arial,sans-serif;
  font-size:var(--size-font);
  line-height:1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::-webkit-scrollbar{display:none}
body{-ms-overflow-style:none;scrollbar-width:none}
h1,h2,h3,h4,p,figure,blockquote,ul{margin:0;padding:0}
ul{list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
a,button{cursor:pointer}
button{padding:0;background:transparent;border:0;color:inherit;font:inherit;text-align:inherit}
::selection{background:var(--primary);color:var(--white);text-shadow:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ============================================================
   TYPE SCALE
   ============================================================ */
.body-xl{font-size:3em;font-weight:700;line-height:1;letter-spacing:-.0098em;display:block}
.body-l {font-size:2em;font-weight:700;line-height:1.1;letter-spacing:-.025em}
.body-m {font-size:1.25em;font-weight:700;line-height:1.1}
.body-s {font-size:1em;font-weight:600;line-height:1.2;letter-spacing:-.004em}
.body-xs{font-size:.813em;font-weight:600;line-height:1.2}
.eyebrow-m{font-family:'DM Mono',ui-monospace,monospace;font-size:.75em;font-weight:300;line-height:1;text-transform:uppercase;display:block}
.eyebrow-s{font-family:'DM Mono',ui-monospace,monospace;font-size:.7em;font-weight:300;line-height:.9;text-transform:uppercase;white-space:nowrap}
.display{font-size:5em;font-weight:700;line-height:1;letter-spacing:-.022em}
.o-60{opacity:.6}
.is-center{text-align:center}

/* Masked line reveal primitive */
.line-wrap{display:block;overflow:hidden;padding-bottom:.06em}
.line{display:block}

/* ============================================================
   SHELL — page / menu / navbar
   ============================================================ */
.page{
  position:relative;z-index:2;
  background:var(--primary);
  transform-origin:50% 0%;
  will-change:transform;
}
.page__inner{position:relative}

/* --- 12 column dev grid (toggle with G) --- */
.site-grid{
  position:fixed;inset:0;z-index:9998;pointer-events:none;display:none;
  padding:0 var(--margin);
  grid-template-columns:repeat(12,1fr);gap:var(--gap);
}
.site-grid.is-on{display:grid}
.site-grid::before{content:'';display:none}
.site-grid > i{background:rgba(244,121,32,.12)}

/* --- Loader --- */
.loader{
  position:fixed;inset:0;z-index:9999;background:var(--primary);
  display:flex;align-items:center;justify-content:center;
}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:1.5em}
.loader__logo{display:flex;align-items:center;gap:.5em;color:var(--white)}
.loader__mark{position:relative;display:grid;place-items:center;width:2em;height:2em;border-radius:.375em;background:var(--white);color:var(--primary)}
.loader__mark .mark{width:1.25em;height:1.25em}
.loader__square{position:absolute;inset:0;border-radius:.375em;background:var(--white);transform-origin:50% 50%}
.loader__word{font-size:1.5em;font-weight:700;letter-spacing:.02em;overflow:hidden;display:block}
.loader__bar{width:9em;height:1px;background:rgba(255,255,255,.18);overflow:hidden}
.loader__bar i{display:block;height:100%;background:var(--white);transform-origin:0 50%;transform:scaleX(0)}

/* --- Rotate hint (mobile landscape) --- */
.m-overlay{
  position:fixed;inset:0;z-index:9997;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:1.5em;
  background:var(--primary);color:var(--white);text-align:center;
}
.m-overlay .rotate-icon{width:4.5em;height:auto}
@media (max-height:460px) and (orientation:landscape) and (pointer:coarse){.m-overlay{display:flex}}

/* --- Navbar --- */
.navbar{
  position:fixed;top:1.5em;left:var(--margin);right:var(--margin);z-index:998;
  display:flex;align-items:center;justify-content:space-between;height:3em;
  pointer-events:none;color:var(--white);
}
.navbar > *{pointer-events:auto}
.logo{transition:opacity .45s var(--ease),transform .45s var(--ease)}
html[data-logo="hidden"] .logo{opacity:0;transform:translateX(-.5em);pointer-events:none}
html[data-menu-open="true"] .logo{opacity:1;transform:none;pointer-events:auto}
.logo__chip{
  display:inline-flex;align-items:center;gap:.375em;
  height:1.75em;padding:0 .5em 0 .3125em;border-radius:.25em;
  background:var(--white);color:var(--primary);
  transition:background .45s var(--ease),color .45s var(--ease);
}
.logo__mark{width:1.125em;height:1.125em;color:var(--accent);flex:none}
.logo__word{font-size:.875em;font-weight:700;letter-spacing:.005em;line-height:1}
.navbar__right{display:flex;align-items:center;gap:1.125em}
.navbar__label{font-size:1em;font-weight:700;line-height:1}
.menu-icon{
  position:relative;width:3em;height:3em;border-radius:1000px;
  border:1px solid currentColor;background:transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease);
}
.menu-icon__bar{
  position:absolute;left:50%;width:1.313em;height:1px;background:currentColor;
  transform:translateX(-50%);
}
.menu-icon__bar.is-1{top:42%}
.menu-icon__bar.is-2{bottom:42%}

/* nav theme: over light sections the chrome flips to ink */
html[data-nav-theme="dark"] .navbar{color:var(--primary)}
html[data-nav-theme="dark"] .logo__chip{background:var(--primary);color:var(--white)}
html[data-menu-open="true"] .navbar{color:var(--white)}
html[data-menu-open="true"] .logo__chip{background:var(--white);color:var(--primary)}
html[data-menu-open="true"] .menu-icon{background:var(--accent);border-color:var(--accent);color:var(--primary)}

/* --- Menu behind the page --- */
.menu{
  position:fixed;inset:0;z-index:1;background:var(--primary);color:var(--white);
  display:flex;align-items:flex-start;padding:13em var(--margin) var(--margin);
  visibility:hidden;
}
html[data-menu-open="true"] .menu{visibility:visible}
.menu__inner{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);width:100%;
}
.menu__col{display:flex;flex-direction:column;gap:.125em}
.navlink{display:block;overflow:hidden}
.navlink__label{
  display:block;font-size:2em;font-weight:700;line-height:1.15;letter-spacing:-.0075em;
  transform:translateY(110%);
  transition:color .3s var(--ease);
}
.navlink:hover .navlink__label{color:var(--accent)}
.menu__locale{display:flex;gap:.375em;align-items:baseline}
.navlink--locale.is-active .navlink__label{color:var(--accent)}
.menu__social{display:flex;gap:.375em;margin-top:.375em;overflow:hidden}
.social{display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:.25em;background:var(--white);color:var(--primary);transition:background .3s var(--ease),color .3s var(--ease)}
.social svg{width:1em;height:1em}
.social:hover{background:var(--accent)}
.social--solid{background:var(--primary);color:var(--white)}
.social--solid:hover{background:var(--accent);color:var(--primary)}

/* ============================================================
   SECTIONS — shared scaffolding
   ============================================================ */
.section{position:relative;width:100%}
.section--about,.section--safety,.section--team{background:var(--white)}
.section--services,.section--technology{background:var(--light-green)}
.section--minerals,.section--partners{background:var(--white)}

.section--about,.section--services,.section--technology,.section--team{
  display:flex;flex-direction:column;gap:var(--block);
  padding:var(--margin) var(--margin) var(--block);
}
.section--safety{
  display:flex;flex-direction:column;gap:var(--block);
  padding:0 var(--margin) var(--block);
}
.section--partners{
  display:flex;flex-direction:column;
  padding:0 var(--margin);
  min-height:320svh;
}

/* --- Intro block: eyebrow chips float into the first line --- */
.intro{padding-right:21.85%}          /* ≈ 3 of 12 columns + gutters */
.intro--ruled{border-top:1px solid rgba(21,21,21,.12);padding-top:1.5em}
.intro--bare{padding-right:0}
.eyebrows{
  float:left;display:flex;flex-direction:column;gap:.25em;
  padding-top:.3em;margin-right:1.3125em;
}
.chip{
  display:inline-flex;align-items:center;
  padding:.135em .25em .18em;border-radius:.25em;
  border:1px solid var(--primary);background:transparent;color:var(--primary);
}
.chip--solid{background:var(--primary);color:var(--white);border-color:var(--primary)}
.eyebrows--white .chip{border-color:var(--white);color:var(--white)}
.intro .body-xl{clear:none}
.intro::after{content:'';display:block;clear:both}

/* --- Two column content --- */
.content{display:flex;gap:var(--gap);width:100%}
.content__col{flex:1;min-width:0}
.content__col--right{display:flex;flex-direction:column}
.content--services{flex-direction:column;gap:2em}

.image-p{position:relative;width:100%;overflow:hidden;border-radius:.125em}
.image-p.is-portrait{aspect-ratio:4/5}
.image-p img{width:100%;height:100%;object-fit:cover}

.content__foot{margin-top:auto;display:flex;flex-direction:column;gap:2.5em;align-items:flex-start}
.content__col--right > .content__foot{align-self:flex-end;width:calc(50% - .5 * var(--gap))}
.content__foot--right{align-items:flex-end;margin-top:2em;align-self:auto;width:100%}
.content__lead{align-self:flex-end;width:calc(50% - .5 * var(--gap));margin-top:12.5em}

/* ============================================================
   BUTTONS
   ============================================================ */
.button{
  --btn-bg:var(--primary);
  --btn-fg:var(--white);
  --btn-sq-bg:var(--white);
  --btn-sq-fg:var(--primary);
  display:inline-flex;align-items:center;
  height:2.5em;border-radius:var(--radius);
  background:var(--btn-bg);color:var(--btn-fg);
  overflow:hidden;text-transform:uppercase;
  transition:background .4s var(--ease),color .4s var(--ease);
  will-change:background-color;
}
.button--white{--btn-bg:var(--white);--btn-fg:var(--primary);--btn-sq-bg:var(--primary);--btn-sq-fg:var(--white)}
.btn__inner{display:flex;align-items:center;height:100%;padding:.25em;overflow:hidden}
.btn__content{
  display:flex;align-items:center;gap:.5em;
  margin-left:-2.5em;
  transition:transform .55s var(--ease);
}
.btn__label{
  font-family:'DM Mono',ui-monospace,monospace;font-size:.75em;font-weight:300;
  line-height:.8;letter-spacing:.01em;white-space:nowrap;padding:0 1.1em;
}
.btn__arrow{
  position:relative;flex:none;display:grid;place-items:center;
  width:2em;height:2em;border-radius:.375em;
  background:var(--btn-sq-bg);color:var(--btn-sq-fg);overflow:hidden;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.btn__arrow svg{position:absolute;width:.75em;height:.75em;transition:transform .5s var(--ease)}
.btn__arrow svg:nth-child(2){transform:translateX(-1.6em)}
.button:hover{--btn-bg:var(--accent);--btn-fg:var(--primary);--btn-sq-bg:var(--primary);--btn-sq-fg:var(--accent)}
.button:hover .btn__content{transform:translateX(2.5em)}
.button:hover .btn__arrow svg:nth-child(1){transform:translateX(1.6em)}
.button:hover .btn__arrow svg:nth-child(2){transform:translateX(0)}

/* Small card button (hero mini cards) */
.button-sm{
  position:absolute;left:.5em;right:.5em;bottom:.5em;
  display:flex;align-items:center;height:1.75em;padding:.25em;
  border-radius:.125em;background:var(--white);color:var(--primary);
  overflow:hidden;text-transform:uppercase;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.button-sm__inner{display:flex;align-items:center;justify-content:space-between;width:100%;padding-left:.35em}
.button-sm__label{font-family:'DM Mono',ui-monospace,monospace;font-size:.675em;font-weight:300;line-height:1}
.button-sm__arrow{width:.55em;height:.55em}
.minicard:hover .button-sm{background:var(--accent)}

/* ============================================================
   HERO
   ============================================================ */
/* The hero is a scroll stage: its height is the scrub runway, and the sticky
   child is the frame you actually look at. Height collapses back to one
   viewport wherever the footage is not used. */
.section--hero{height:100svh;background:#0b0f14}
html[data-scrub="on"] .section--hero{height:320svh}
.hero__sticky{
  position:sticky;top:0;height:100svh;width:100%;
  padding:0 var(--margin);overflow:hidden;
}
.hero__bg{position:absolute;inset:0;overflow:hidden;z-index:0}

/* Two nested transform layers: the plate carries the slow idle drift, the
   media inside it is what the scroll parallax drives. */
.hero__plate{position:absolute;inset:0;animation:breathe 30s ease-in-out infinite}
html[data-scrub="on"] .hero__plate{animation:none}
@keyframes breathe{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-.8%,-.6%,0) scale(1.03)}
}
.hero__media{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  transform:scale(1.02);will-change:transform;
}
.hero__media img{width:100%;height:100%;object-fit:cover}

/* The still is the base layer; the footage sits above it and fades in once
   it can render. Without the explicit order the later sibling wins and the
   poster covers the video. */
.hero__still{z-index:0}
.hero__video{
  z-index:1;object-fit:cover;opacity:0;
  transition:opacity 1.2s var(--ease);
}
.hero__video.is-playing{opacity:1}

/* Legibility scrim: ink into the left third for the headline, up from the
   floor for the cards, and a light wash at the top for the navbar. */
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;z-index:1;will-change:opacity;
  background:
    linear-gradient(100deg,rgba(8,12,18,.88) 0%,rgba(8,12,18,.6) 28%,rgba(8,12,18,.16) 56%,rgba(8,12,18,0) 76%),
    linear-gradient(to top,rgba(8,12,18,.74) 0%,rgba(8,12,18,.22) 26%,rgba(8,12,18,0) 48%),
    linear-gradient(to bottom,rgba(8,12,18,.5) 0%,rgba(8,12,18,0) 20%);
}
.hero__fog{
  position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(60px);mix-blend-mode:screen;opacity:.5;
}
.hero__fog{z-index:1}
.hero__fog--1{left:42%;top:30%;width:46vw;height:34vw;background:radial-gradient(circle,rgba(168,196,228,.16),transparent 70%);animation:drift1 38s ease-in-out infinite}
.hero__fog--2{left:4%;top:52%;width:40vw;height:30vw;background:radial-gradient(circle,rgba(140,170,205,.12),transparent 72%);animation:drift2 50s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-4vw,2.5vh,0) scale(1.16)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.08)}50%{transform:translate3d(5vw,-3vh,0) scale(.94)}}
.hero__grain{
  position:absolute;inset:-50%;pointer-events:none;opacity:.035;z-index:1;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}
}

.hero__content{
  position:absolute;left:var(--margin);right:var(--margin);top:50%;transform:translateY(-50%);
  z-index:1;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end;
}
.hero__title{grid-column:1/9;color:var(--white);font-size:1em}
.hero__title .line-wrap{padding-bottom:.125em;overflow:hidden}
.hero__title .line-wrap:first-child{margin-bottom:-.5em}
.hero__title .line{
  font-size:3.5em;font-weight:700;line-height:1.1;letter-spacing:-.019em;color:var(--white);
  transform:translateY(105%);text-shadow:0 2px 34px rgba(8,12,18,.5);
}
.hero__meta{
  grid-column:9/13;display:flex;flex-direction:column;gap:.25em;color:var(--white);
  padding-bottom:.5em;text-shadow:0 1px 14px rgba(8,12,18,.9),0 0 3px rgba(8,12,18,.5);
}
.hero__meta .eyebrow-m{opacity:0}

.hero__cue{
  position:absolute;left:var(--margin);bottom:1.5em;z-index:2;
  display:none;flex-direction:column;gap:.75em;align-items:flex-start;
  color:var(--white);opacity:.75;
}
html[data-scrub="on"] .hero__cue{display:flex}
.hero__cue-rule{display:block;width:5em;height:1px;background:rgba(255,255,255,.28);overflow:hidden}
.hero__cue-rule b{display:block;width:100%;height:100%;background:var(--white);transform-origin:0 50%;transform:scaleX(0)}

.hero__bottom{position:absolute;left:var(--margin);right:var(--margin);bottom:1.5em;z-index:1}
.hero__cards{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.minicard{
  position:relative;grid-column:span 2;aspect-ratio:216/144;border-radius:.25em;overflow:hidden;
  display:block;
}
/* single card, pinned to the far-right columns so it sits in the corner */
.minicard:nth-child(1){grid-column:11/13}
.minicard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.minicard:hover img{transform:scale(1.06)}

/* ============================================================
   ABOUT — stats
   ============================================================ */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:4em var(--gap)}
.stat{display:flex;gap:var(--gap);align-items:flex-start;padding-top:1em;position:relative}
.stat::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;background:rgba(21,21,21,.16);
  transform:scaleX(var(--sx,0));transform-origin:0 50%;
}
.stat__icon{width:1.75em;height:1.75em;flex:none;color:var(--primary);fill:none;stroke:currentColor}
.stat > div{display:flex;flex-direction:column;gap:.75em}
.stat__number{font-size:2.5em;font-weight:700;line-height:1;letter-spacing:-.0098em;display:block}

/* ============================================================
   SERVICES
   ============================================================ */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.service-card{
  position:relative;aspect-ratio:1;padding:var(--margin);border-radius:var(--radius);
  background:var(--white);
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  overflow:hidden;cursor:default;
  transition:background .5s var(--ease);
}
.service-card__icon{width:3.5em;height:3.5em;color:var(--primary);fill:none;stroke:currentColor}
.card-inner{display:flex;flex-direction:column;gap:1.15em;width:100%}
.service-card .body-l{transition:transform .55s var(--ease)}
.service-card .desc{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s var(--ease),opacity .35s var(--ease);
}
.service-card .desc .line{transform:translateY(110%);transition:transform .55s var(--ease) .06s}
.service-card .desc .body-s{max-width:24em}
@media (hover:hover) and (min-width:992px){
  .service-card:hover{background:var(--accent)}
  .service-card:hover .desc{max-height:11em;opacity:1}
  .service-card:hover .desc .line{transform:translateY(0)}
}
.service-image{position:relative;aspect-ratio:1;border-radius:var(--radius);overflow:hidden}
.service-image img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   MINERALS — pinned dial
   ============================================================ */
.section--minerals{height:310svh}
.minerals__sticky{
  position:sticky;top:0;height:100svh;width:100%;
  padding:var(--margin);
  display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr auto;
  gap:var(--gap);align-items:center;
}
.minerals__head{grid-column:1/5;grid-row:1;align-self:start}
.minerals__stage{
  grid-column:1/13;grid-row:1/4;position:relative;
  display:grid;place-items:center;pointer-events:none;
}
.dial{position:relative;width:min(66svh,44em);aspect-ratio:1}
.dial i{
  position:absolute;left:50%;top:50%;width:.9em;height:1px;
  background:var(--primary);opacity:.13;
  transform-origin:0 50%;
  transition:opacity .3s linear;
}
.dial i.is-on{opacity:.8}
.minerals__media{position:absolute;width:min(44svh,29em);aspect-ratio:1;display:grid;place-items:center}
/* The stack rotates as one, so each specimen only handles its own
   cross-fade — any per-image rotation here would fight that shared angle. */
.mineral{
  grid-area:1/1;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:scale(.88);
  transition:opacity .55s var(--ease),transform .8s var(--ease);
}
.mineral.is-active{opacity:1;transform:scale(1)}
.minerals__media{will-change:transform}

.minerals__left{grid-column:1/5;grid-row:2;display:flex;flex-direction:column;gap:1.6em;z-index:2}
.minerals__list{display:flex;flex-direction:column;gap:.083em}
.minerals__list li{color:var(--primary);opacity:.15;transition:opacity .35s var(--ease)}
.minerals__list li.is-active{opacity:1}
.minerals__right{grid-column:10/13;grid-row:2;text-align:right;z-index:2}
.minerals__foot{display:none}

/* ============================================================
   TECHNOLOGY
   ============================================================ */
.tech__statement{display:flex;flex-direction:column;align-items:center;gap:2em;text-align:center;padding:6em 0}
.tech__statement .display .line{transform:translateY(105%)}
.tech__statement .display .line-wrap{padding-bottom:.09em}
.machines-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4em var(--gap)}
.machine-card{display:flex;flex-direction:column;gap:var(--gap)}
.machine-card__bg{
  position:relative;width:100%;aspect-ratio:448/550;border-radius:var(--radius);
  background:var(--primary);overflow:hidden;
  transition:opacity .4s var(--ease);
}
.machine-card__bg img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
/* The photo fills the card now, so this is a soft frame rather than a mask
   hiding letterbox bands: a gentle vignette plus a floor scrim for the label. */
.machine-card__bg::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(21,21,21,.42) 0%,rgba(21,21,21,0) 26%,rgba(21,21,21,0) 62%,rgba(21,21,21,.5) 100%),
    radial-gradient(ellipse 78% 70% at 50% 45%,rgba(21,21,21,0) 42%,rgba(21,21,21,.34) 82%,rgba(21,21,21,.62) 100%);
}
.machine-card:hover .machine-card__bg img{transform:scale(1.04)}
/* ---- Dust ------------------------------------------------------------
   Every machine sits under settled dust. Hovering opens a clear circle at
   the cursor and pushes it out to the edges, so the card reads as being
   wiped off rather than simply un-dimmed. --mx/--my track the pointer and
   --clear is tweened by GSAP.
---------------------------------------------------------------------- */
.machine-card__dust{
  --mx:50%; --my:50%; --clear:0%; --dx:0px; --dy:0px;
  --bx:50%; --by:50%; --bx2:50%; --by2:50%;
  --h2x:-15%; --h2y:12%; --h2w:115%; --h2h:80%;
  --h3x:17%; --h3y:-13%; --h3w:80%; --h3h:125%;
  position:absolute;inset:0;z-index:2;pointer-events:none;display:none;
  background-color:rgba(168,158,142,.14);
  /* Two turbulence layers at different scales: big soft billows plus finer
     wisps, so it reads as a settled cloud rather than an even film. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0085' numOctaves='4' seed='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.80 0 0 0 0 0.76 0 0 0 0 0.68 0.66 0.38 0.15 0 -0.34'/%3E%3C/filter%3E%3Crect width='760' height='760' filter='url(%23c)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022 0.014' numOctaves='3' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.84 0 0 0 0 0.80 0 0 0 0 0.72 0.42 0.28 0.11 0 -0.44'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23w)'/%3E%3C/svg%3E");
  background-size:270% 270%,190% 190%;
  background-repeat:no-repeat;
  /* Positions stay inside 0-100%: for a background larger than its box any
     value in that range still covers it fully, so no tile edge shows. */
  background-position:
    calc(var(--bx) + var(--dx)) calc(var(--by) + var(--dy)),
    calc(var(--bx2) + var(--dx) * -.55) calc(var(--by2) + var(--dy) * .7);
  backdrop-filter:blur(2.6px) saturate(.6) brightness(1.07) contrast(.9);
  -webkit-backdrop-filter:blur(2.6px) saturate(.6) brightness(1.07) contrast(.9);
  /* Three offset gradients intersected: the union of their holes opens a
     lumpy, non-circular gap instead of a clean disc. */
  -webkit-mask-image:
    radial-gradient(circle at var(--mx) var(--my),transparent calc(var(--clear) * .46),#000 calc(var(--clear) * 1.05)),
    radial-gradient(var(--h2w) var(--h2h) at calc(var(--mx) + var(--h2x)) calc(var(--my) + var(--h2y)),transparent calc(var(--clear) * .34),#000 calc(var(--clear) * .95)),
    radial-gradient(var(--h3w) var(--h3h) at calc(var(--mx) + var(--h3x)) calc(var(--my) + var(--h3y)),transparent calc(var(--clear) * .32),#000 calc(var(--clear) * .9));
  -webkit-mask-composite:source-in;
  mask-image:
    radial-gradient(circle at var(--mx) var(--my),transparent calc(var(--clear) * .46),#000 calc(var(--clear) * 1.05)),
    radial-gradient(var(--h2w) var(--h2h) at calc(var(--mx) + var(--h2x)) calc(var(--my) + var(--h2y)),transparent calc(var(--clear) * .34),#000 calc(var(--clear) * .95)),
    radial-gradient(var(--h3w) var(--h3h) at calc(var(--mx) + var(--h3x)) calc(var(--my) + var(--h3y)),transparent calc(var(--clear) * .32),#000 calc(var(--clear) * .9));
  mask-composite:intersect;
}
@media (hover:hover) and (min-width:992px){
  .machine-card__dust{display:block}
}
.machine-card__foot{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--gap)}
.machine-card__labels{position:relative;height:1.5em;overflow:hidden;flex:1;min-width:0}
.machine-card__title,.machine-card__desc{display:block}
.machine-card__desc{position:absolute;left:0;top:0;width:100%;opacity:.55;font-weight:500}
.machine-card__desc .line{transform:translateY(110%);transition:transform .55s var(--ease)}
.machine-card__title{transition:transform .55s var(--ease)}
@media (hover:hover) and (min-width:992px){
  .machine-card:hover .machine-card__title,
  .machine-card:focus-visible .machine-card__title{transform:translateY(-110%)}
  .machine-card:hover .machine-card__desc .line,
  .machine-card:focus-visible .machine-card__desc .line{transform:translateY(0)}
}
.machine-card__toggle{display:none}

.tech__closing{display:flex;flex-direction:column;align-items:center;gap:3em;text-align:center;padding-top:4em}
.tech__closing .body-xl{max-width:19em}

/* ============================================================
   TEAM
   ============================================================ */
.team__quotes{display:flex;flex-direction:column;align-items:center;gap:2em;text-align:center;padding:8em 0 2em}
.toggle{display:inline-flex;border:1px solid var(--primary);border-radius:.375em;overflow:hidden}
.toggle__opt{padding:.6em .9em;transition:background .3s var(--ease),color .3s var(--ease)}
.toggle__opt.is-active{background:var(--primary);color:var(--white)}
.quotes{position:relative;width:100%;max-width:56em;margin:0 auto}
.quote{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.quote.is-active{position:relative;opacity:1;pointer-events:auto}
/* The attribution fills to ink with the rest of the quote */
.quote__by{margin-top:.1em}
.team-block{display:flex;flex-direction:column;gap:2em;width:100%}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.team-image{aspect-ratio:2/1.5;border-radius:var(--radius);overflow:hidden}
.team-image img{width:100%;height:100%;object-fit:cover}
.team-card{
  aspect-ratio:2/1.5;padding:var(--margin);border-radius:var(--radius);
  background:var(--light-green);
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  transition:background .5s var(--ease);
}
.team-card__icon{width:2.5em;height:2.5em;color:var(--primary);fill:none;stroke:currentColor}


/* ============================================================
   PARTNERS — 3D cylinder
   ============================================================ */
.section--partners{padding-bottom:0}
.cylinder{
  position:sticky;top:0;height:100svh;width:100%;
  display:flex;align-items:center;justify-content:space-between;
  perspective:70vw;overflow:hidden;
}
.cylinder__stage{
  position:absolute;inset:0;overflow:hidden;
  transform-style:preserve-3d;transform-origin:50% 50%;
  display:grid;place-items:center;
}
.cylinder__items{
  position:absolute;top:50%;left:0;width:100%;
  transform-style:preserve-3d;text-align:center;
}
.cylinder__items li{
  position:absolute;left:0;top:0;width:100%;
  backface-visibility:hidden;
  color:var(--primary);
  will-change:transform,opacity;
}
.cylinder__rail{
  position:relative;z-index:2;width:2em;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  transform-style:preserve-3d;
}
.cylinder__rail.is-right{align-items:flex-end}
.cylinder__rail i{
  position:absolute;left:0;top:50%;height:1px;width:.75em;background:var(--primary);opacity:.2;
  backface-visibility:hidden;transform-origin:50% 50%;
}
.cylinder__rail.is-right i{left:auto;right:0}

/* ============================================================
   NEXT
   ============================================================ */
.section--next{
  position:relative;height:100svh;overflow:hidden;background:var(--primary);
  padding:var(--margin) var(--margin) 0;
  display:flex;flex-direction:column;gap:2em;
}
.next__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.next__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.2);will-change:transform}
.section--next .intro{position:relative;z-index:2}
.next__cta{
  position:absolute;left:0;right:0;top:0;z-index:3;
  display:flex;justify-content:center;
  margin-top:-1.25em;will-change:transform;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  position:relative;z-index:2;background:var(--white);
  padding:var(--margin) var(--margin) 0;
  display:flex;flex-direction:column;gap:12em;
}
.footer__top{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.footer__brand{grid-column:1/5;display:flex;flex-direction:column;gap:1.5em;align-items:flex-start}
.logo--footer .logo__chip{background:var(--primary);color:var(--white)}
.footer__social{display:flex;gap:.5em}
.footer__links{grid-column:5/13;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.footer__col{display:flex;flex-direction:column;gap:.75em;align-items:flex-start}
.footer-link{font-size:1em;font-weight:500;line-height:1;transition:color .3s var(--ease)}
.footer-link:hover{color:var(--accent)}
.footer__bottom{
  border-top:1px solid rgba(21,21,21,.14);
  padding:1.5em 0;text-align:center;
}
.footer__bottom .body-s{font-weight:500}

/* ============================================================
   SCRUB TEXT — word-level fill
   ============================================================ */
[data-scrub-text] .w{color:rgba(21,21,21,.18);transition:color .12s linear;display:inline-block}
[data-scrub-text] .w.is-on{color:rgba(21,21,21,1)}
.section--next [data-scrub-text] .w{color:rgba(255,255,255,.2)}
.section--next [data-scrub-text] .w.is-on{color:#fff}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:991px){
  .body-xl{font-size:2.25em}
  .body-l{font-size:1.5em}
  .display{font-size:3.4em}
  .stat__number{font-size:2em}
  .intro{padding-right:0}
  .content{flex-direction:column;gap:2.5em}
  .content__lead{margin-top:0}
  .content__foot{margin-top:1.5em}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .machines-grid{grid-template-columns:repeat(2,1fr);gap:2.5em var(--gap)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .menu__inner{grid-template-columns:1fr}
  .menu{padding:11em var(--margin) var(--margin)}
  .navlink__label{font-size:2.25em}
  .menu__col{gap:0}
  .footer__brand{grid-column:1/13}
  .footer__links{grid-column:1/13;grid-template-columns:repeat(2,1fr);gap:2.5em var(--gap);margin-top:2.5em}
  .footer{gap:6em}
  .hero__title{grid-column:1/13}
  .hero__meta{grid-column:1/13;padding-top:1.5em}
  .hero__content{align-items:start}
  .minicard:nth-child(1){grid-column:7/13}
  .tech__statement{padding:3em 0}
  .team__quotes{padding:4em 0 2em}
  /* machine cards become tap-to-open */
  .machine-card__toggle{
    display:inline-flex;align-items:center;gap:.5em;flex:none;
    height:1.75em;padding:0 .5em;border-radius:.25em;background:var(--white);color:var(--primary);
  }
  .machine-card__toggle svg{width:.55em;height:.55em;transition:transform .4s var(--ease)}
  .machine-card.is-open .machine-card__toggle svg{transform:rotate(90deg)}
  .machine-card.is-open .machine-card__title{transform:translateY(-110%)}
  .machine-card.is-open .machine-card__desc .line{transform:translateY(0)}
  .machine-card__labels{height:2.6em}
  .machine-card__desc{opacity:.6}
  .section--minerals{height:275svh}
  .cylinder__items li{font-size:1.85em}
  .dial{width:min(52svh,32em)}
  .minerals__media{width:min(34svh,21em)}
  .minerals__left{grid-column:1/8}
  .minerals__right{grid-column:8/13}
}

@media (max-width:767px){
  .body-xl{font-size:2em}
  .display{font-size:2.6em}
  .hero__title .line{font-size:2.5em}
  .cards-grid{grid-template-columns:1fr}
  .service-card{aspect-ratio:auto;min-height:19em}
  .service-card .body-l{transform:none}
  .service-card .desc{max-height:11em;opacity:1}
  .service-card .desc .line{transform:none}
  .machines-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .team-card{aspect-ratio:2/1.1}
  .footer__links{grid-template-columns:1fr}
  .stats{gap:2.5em var(--gap)}
  .quotes{max-width:none}
  .minerals__left{grid-column:1/13;grid-row:2;align-self:end;padding-bottom:1em}
  .minerals__right{grid-column:1/13;grid-row:3;text-align:left}
  .minerals__foot{display:none}
  .dial{width:min(40svh,19em)}
  .minerals__media{width:min(26svh,13em)}
  .cylinder__items li{font-size:1.35em}
  .hero__title .line-wrap:first-child{margin-bottom:-.25em}
  .navlink__label{font-size:2em}
}

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