/* ==========================================================================
   Astrantia Mining Group — site.css
   Chrome + steel over a carbon touch-grid. Sticky "steel bridge" menu, a
   floating logo bubble that rides the scroll, 3D-tilted section shells,
   high-tech blue glows that sweep through, glaze on CTAs, rain on the dark
   equipment sections.
   ========================================================================== */

/* --- Ethnocentric is a commercial font (Typodermic). It is used from the
   viewer's own machine via local() and is NOT redistributed here. Anyone
   without it falls back to Orbitron, which carries the same wide techno
   feel. To serve Ethnocentric publicly you need a webfont licence; drop the
   .woff2 into assets/fonts/ and add a src: url(...) line below. ----------- */
@font-face {
  font-family: "Ethnocentric";
  src: local("Ethnocentric"), local("Ethnocentric Rg"), local("EthnocentricRg-Regular");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Chrome / steel — every tone has a deep and a bright partner */
  --steel-0: #05070a;
  --steel-1: #0b0f15;
  --steel-2: #151b23;
  --steel-3: #232c38;
  --chrome-1: #7d8896;
  --chrome-2: #c3ccd6;
  --chrome-3: #f2f6fa;
  /* Power blue — the high-tech accent */
  --blue-0: #031a2e;
  --blue-1: #0a6fc2;
  --blue-2: #29b6ff;
  --blue-3: #9fe4ff;
  /* Hazard amber, taken from the machinery */
  --amber-1: #b8750a;
  --amber-2: #f5a623;
  --amber-3: #ffd587;

  --ink: #eaf1f8;
  --muted: #9aa8b8;
  --line: rgba(160,190,220,.16);

  --g-chrome: linear-gradient(180deg, #f2f6fa 0%, #c3ccd6 38%, #7d8896 55%, #aab6c3 70%, #e8eef4 100%);
  --g-bridge: linear-gradient(180deg, #2b3542 0%, #11171f 18%, #1c242e 50%, #0a0e14 82%, #222b36 100%);
  --g-blue: linear-gradient(135deg, var(--blue-2) 0%, var(--blue-1) 100%);
  --g-amber: linear-gradient(135deg, var(--amber-2) 0%, var(--amber-1) 100%);

  --glow-blue: 0 0 0 1px rgba(41,182,255,.55), 0 0 22px rgba(41,182,255,.45), 0 0 60px -12px rgba(41,182,255,.7);
  --glow-blue-soft: 0 0 18px rgba(41,182,255,.35);
  --glow-chrome: 0 0 0 1px rgba(226,236,245,.5), 0 0 26px rgba(195,204,214,.3);
  --glow-amber: 0 0 0 1px rgba(245,166,35,.5), 0 0 26px rgba(245,166,35,.45);

  /* the carbon touch-grid that runs under everything */
  --grid: linear-gradient(rgba(140,175,210,.055) 1px, transparent 1px) 0 0 / 100% 34px,
          linear-gradient(90deg, rgba(140,175,210,.055) 1px, transparent 1px) 0 0 / 34px 100%;
  --grid-fine: linear-gradient(rgba(150,185,220,.05) 1px, transparent 1px) 0 0 / 100% 9px,
               linear-gradient(90deg, rgba(150,185,220,.05) 1px, transparent 1px) 0 0 / 9px 100%;

  --radius: 6px;
  --wrap: 1220px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --display: "Ethnocentric", "Orbitron", "Rajdhani", system-ui, sans-serif;
  --body: "Rajdhani", "Barlow Semi Condensed", system-ui, -apple-system, sans-serif;
  --bridge-h: 92px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 120px; }
body {
  margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.7; font-weight: 400;
  color: var(--ink); background: var(--steel-0);
  /* never overflow-x on body — it breaks position:sticky when html is clipped */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.06; letter-spacing: .01em; text-transform: uppercase; }
h1 { font-size: clamp(2.1rem, 4.6vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
h3 { font-size: 1.12rem; letter-spacing: .04em; }
p { margin: 0 0 1rem; }
strong, b { font-weight: 600; color: var(--chrome-3); }
.wrap { width: min(var(--wrap), calc(100% - 44px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--blue-2); color: #00121f; padding: 10px 16px; font-weight: 700; }
.skip:focus { left: 8px; }
.section, .hero, .page-hero, .footer { overflow-x: clip; }

.t-chrome { background: var(--g-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-blue { background: linear-gradient(180deg, var(--blue-3), var(--blue-1)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; font-family: var(--display);
  font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--blue-2);
}
.eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--blue-2); box-shadow: var(--glow-blue-soft); }
.eyebrow.amber { color: var(--amber-2); }
.eyebrow.amber::before { background: var(--amber-2); box-shadow: 0 0 18px rgba(245,166,35,.5); }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 64ch; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.center .eyebrow { justify-content: center; }
.center .eyebrow::before { display: none; }
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* ---------- Buttons: cut-corner steel, blue glow, glaze sweep ---------- */
.btn {
  --cut: 13px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  padding: 15px 30px; font-family: var(--display); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  border: 0; cursor: pointer; overflow: hidden; isolation: isolate; white-space: nowrap;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn::after {                                  /* the glaze */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(104deg, transparent 30%, rgba(255,255,255,.75) 47%, rgba(255,255,255,.25) 53%, transparent 70%);
  transform: translateX(-140%); animation: glaze 7.5s var(--ease) infinite;
}
.btn:hover::after { animation: glaze 1s var(--ease) 1; }
.btn:hover { transform: translateY(-3px); }
.btn-blue { background: var(--g-blue); color: #00131f; font-weight: 700; box-shadow: 0 10px 26px -12px rgba(10,111,194,.9); }
.btn-blue:hover { box-shadow: var(--glow-blue); }
.btn-steel { background: linear-gradient(180deg, #48566a, #1a222c); color: var(--chrome-3); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 26px -14px #000; }
.btn-steel:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--glow-chrome); }
.btn-amber { background: var(--g-amber); color: #1c1200; font-weight: 700; box-shadow: 0 10px 26px -12px rgba(184,117,10,.9); }
.btn-amber:hover { box-shadow: var(--glow-amber); }
.btn-ghost { background: rgba(160,200,235,.05); color: var(--chrome-2); box-shadow: inset 0 0 0 1px rgba(160,200,235,.3); }
.btn-ghost::after { display: none; }
.btn-ghost:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--blue-2), var(--glow-blue-soft); }
.btn-sm { padding: 11px 20px; font-size: .64rem; }
@keyframes glaze { 0% { transform: translateX(-140%); } 15% { transform: translateX(140%); } 100% { transform: translateX(140%); } }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-2); transition: gap .3s var(--ease), color .3s, text-shadow .3s; }
.text-link:hover { gap: 16px; color: var(--blue-3); text-shadow: var(--glow-blue-soft); }
.text-link svg { width: 16px; height: 16px; }

/* ==========================================================================
   THE STEEL BRIDGE — sticky top menu
   ========================================================================== */
.bridge { position: sticky; top: 0; z-index: 900; height: var(--bridge-h); overflow-x: clip; transition: height .35s var(--ease); }
.bridge-deck {
  position: absolute; inset: 0; background: var(--g-bridge);
  border-bottom: 1px solid rgba(0,0,0,.9);
  box-shadow: inset 0 1px 0 rgba(200,220,240,.28), inset 0 -1px 0 rgba(0,0,0,.8), 0 14px 34px -18px #000;
}
.bridge-deck::before {                          /* rivet rails top and bottom */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 10px 11px, rgba(226,236,245,.5) 0 1.6px, transparent 2.2px) 0 0 / 46px 100%,
    radial-gradient(circle at 10px calc(100% - 11px), rgba(226,236,245,.35) 0 1.6px, transparent 2.2px) 0 0 / 46px 100%;
  opacity: .75;
}
.bridge-deck::after {                           /* girder cross-bracing */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(62deg, transparent 0 26px, rgba(180,205,230,.07) 26px 27px, transparent 27px 54px),
    repeating-linear-gradient(-62deg, transparent 0 26px, rgba(180,205,230,.07) 26px 27px, transparent 27px 54px);
}
.bridge-scan {                                  /* the blue pulse that runs the span */
  position: absolute; left: 0; bottom: 0; height: 2px; width: 22%;
  background: linear-gradient(90deg, transparent, var(--blue-2), var(--blue-3), var(--blue-2), transparent);
  box-shadow: 0 0 16px var(--blue-2); animation: span-run 9s linear infinite; pointer-events: none;
}
@keyframes span-run { 0% { transform: translateX(-120%); } 100% { transform: translateX(560%); } }
.bridge .wrap { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.bridge-mark { display: flex; align-items: center; gap: 13px; }
.bridge-mark img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(41,182,255,.4)); transition: filter .35s; }
.bridge-mark:hover img { filter: drop-shadow(0 0 18px rgba(41,182,255,.85)); }
.bridge-mark span { font-family: var(--display); font-size: .74rem; letter-spacing: .2em; color: var(--chrome-2); line-height: 1.5; }
.bridge-mark small { display: block; font-size: .54rem; letter-spacing: .3em; color: var(--blue-2); }

/* Nav item: a steel plate whose blue shutter slides open on hover to reveal
   the glowing label underneath. */
.bnav { display: flex; align-items: center; gap: 4px; }
.bnav > a {
  position: relative; display: block; padding: 13px 17px; overflow: hidden; isolation: isolate;
  font-family: var(--display); font-size: .66rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--chrome-2); transition: color .35s var(--ease);
}
.bnav > a::before {                             /* the shutter */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, rgba(41,182,255,.26), rgba(10,111,194,.1));
  box-shadow: inset 0 0 0 1px rgba(41,182,255,.55), inset 0 0 20px rgba(41,182,255,.22);
  transform: scaleX(0); transform-origin: left; transition: transform .38s var(--ease);
}
.bnav > a::after {                              /* underline that lights up */
  content: ""; position: absolute; left: 17px; right: 17px; bottom: 8px; height: 1px;
  background: var(--blue-2); box-shadow: 0 0 10px var(--blue-2);
  transform: scaleX(0); transform-origin: left; transition: transform .38s var(--ease) .06s;
}
.bnav > a:hover, .bnav > a:focus-visible, .bnav > a[aria-current="page"] { color: #fff; text-shadow: 0 0 14px rgba(41,182,255,.9); }
.bnav > a:hover::before, .bnav > a:focus-visible::before, .bnav > a[aria-current="page"]::before { transform: scaleX(1); }
.bnav > a:hover::after, .bnav > a:focus-visible::after, .bnav > a[aria-current="page"]::after { transform: scaleX(1); }
.bridge-cta { display: flex; align-items: center; gap: 10px; }
.bridge.shrunk { --bridge-h: 70px; }
.bridge.shrunk .bridge-mark img { width: 38px; height: 38px; }

.burger { display: none; width: 46px; height: 42px; background: linear-gradient(180deg,#3a4655,#151b23); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); border: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.burger i { width: 20px; height: 2px; background: var(--chrome-2); box-shadow: 0 0 8px rgba(41,182,255,.6); transition: transform .3s, opacity .3s; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mnav { display: none; position: absolute; top: var(--bridge-h); left: 0; right: 0; z-index: 899; background: rgba(8,11,16,.97); backdrop-filter: blur(10px); border-bottom: 1px solid var(--blue-1); padding: 10px 22px 20px; }
.mnav[data-open="true"] { display: block; }
.mnav a { display: block; padding: 14px 6px; font-family: var(--display); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.mnav a:last-of-type { border: 0; }
.mnav .btn { margin-top: 14px; width: 100%; }

/* ==========================================================================
   FLOATING LOGO BUBBLE — rides the scroll, glowing rim
   ========================================================================== */
.bubble {
  position: fixed; right: 30px; top: 50%; z-index: 880; width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-items: center; background: radial-gradient(circle at 34% 28%, #2a3542, #070a0e 70%);
  box-shadow:
    inset 0 0 0 1px rgba(226,236,245,.35),
    inset 0 8px 22px rgba(255,255,255,.10),
    inset 0 -10px 24px rgba(0,0,0,.9),
    0 0 0 2px rgba(41,182,255,.32),
    0 0 26px rgba(41,182,255,.4),
    0 22px 46px -18px #000;
  transition: box-shadow .4s var(--ease), transform .35s var(--ease);
  will-change: transform;
}
.bubble::before {                               /* the rim light that orbits */
  content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(41,182,255,.9) 76%, rgba(159,228,255,1) 84%, transparent 92%);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 3px));
  mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 3px));
  animation: rim 5.5s linear infinite;
}
.bubble::after {                                /* glass highlight */
  content: ""; position: absolute; inset: 8px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(200deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.05) 30%, transparent 55%);
}
.bubble img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0,0,0,.9)); }
.bubble:hover { transform: scale(1.07); box-shadow: inset 0 0 0 1px rgba(226,236,245,.5), 0 0 0 2px rgba(41,182,255,.7), 0 0 46px rgba(41,182,255,.75), 0 26px 52px -18px #000; }
@keyframes rim { to { transform: rotate(360deg); } }

/* Site-wide hoist: the logo rides in a black construction-lift carriage.
   The long cables sit behind the load and leave the viewport above it, so the
   existing scroll-linked movement reads as a lift rather than a loose badge. */
.bubble.lift {
  width: 154px; height: 164px; right: 28px; border-radius: 0; isolation: isolate;
  background: none; box-shadow: none;
}
.bubble.lift::before,
.bubble.lift::after { content: none; }
.lift-cables {
  position: absolute; left: 0; right: 0; bottom: calc(100% - 26px); height: 110vh;
  z-index: 0; pointer-events: none;
}
.lift-cables i {
  position: absolute; bottom: 0; width: 5px; height: 100%;
  border-left: 1px solid rgba(214,225,235,.35);
  border-right: 1px solid rgba(0,0,0,.9);
  background: repeating-linear-gradient(180deg, #11161b 0 5px, #687681 5px 7px, #171d22 7px 12px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.72), 0 0 10px rgba(41,182,255,.12);
}
.lift-cables i:first-child { left: 32px; }
.lift-cables i:last-child { right: 32px; }
.lift-cables i::after {
  content: ""; position: absolute; left: 50%; bottom: -12px; width: 17px; height: 18px;
  transform: translateX(-50%); border: 2px solid #020304; border-top-color: #697783;
  background: linear-gradient(90deg, #06080a, #1c242b 48%, #050708);
  clip-path: polygon(18% 0,82% 0,100% 28%,100% 100%,0 100%,0 28%);
}
.lift-carriage {
  position: absolute; inset: 16px 3px 17px; z-index: 1;
  background:
    linear-gradient(135deg, rgba(41,182,255,.14), transparent 24%),
    linear-gradient(145deg, #13191f 0%, #020304 46%, #090c0f 100%);
  clip-path: polygon(14% 0,86% 0,100% 15%,100% 84%,88% 96%,12% 96%,0 84%,0 15%);
  box-shadow: inset 0 0 0 2px #000, inset 0 0 28px #000, 0 18px 34px -14px #000;
}
.lift-carriage::before {
  content: ""; position: absolute; inset: 5px;
  border: 1px solid rgba(122,141,155,.48);
  background:
    linear-gradient(45deg, transparent 48.5%, rgba(96,112,124,.18) 49% 51%, transparent 51.5%),
    linear-gradient(-45deg, transparent 48.5%, rgba(96,112,124,.16) 49% 51%, transparent 51.5%),
    #030506;
  clip-path: polygon(12% 0,88% 0,100% 13%,100% 86%,89% 100%,11% 100%,0 86%,0 13%);
}
.lift-carriage::after {
  content: ""; position: absolute; left: 16px; right: 16px; top: 9px; height: 7px;
  background:
    radial-gradient(circle at 4px 50%, #a9b4bd 0 1px, #020304 2px 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 4px) 50%, #a9b4bd 0 1px, #020304 2px 3px, transparent 4px),
    linear-gradient(#303a42, #080b0e);
  border: 1px solid #020304;
}
.bubble.lift img {
  position: relative; z-index: 3; width: 96%; height: 96%; object-fit: contain;
  transform: translateY(-5px); filter: drop-shadow(0 5px 10px #000);
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
.lift-deck {
  position: absolute; z-index: 4; left: -3px; right: -3px; bottom: 8px; height: 20px;
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(41,182,255,.25) 10px 13px, transparent 13px 23px),
    linear-gradient(180deg, #303a43 0 18%, #080b0e 22% 68%, #000 72%);
  border-top: 1px solid #7d8c97; border-bottom: 3px solid #000;
  clip-path: polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%,0 7px);
  box-shadow: 0 4px 0 #020304, 0 8px 18px rgba(0,0,0,.8), 0 0 12px rgba(41,182,255,.18);
}
.lift-deck::before,
.lift-deck::after {
  content: ""; position: absolute; top: 6px; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c7d0d7, #303941 45%, #020304 75%);
  box-shadow: 0 1px 2px #000;
}
.lift-deck::before { left: 13px; }
.lift-deck::after { right: 13px; }
.bubble.lift:hover { box-shadow: none; }
.bubble.lift:hover img { transform: translateY(-5px) scale(1.045); filter: drop-shadow(0 5px 12px #000) drop-shadow(0 0 10px rgba(41,182,255,.38)); }

/* ==========================================================================
   SECTIONS — 3D shells with a glow that sweeps through
   ========================================================================== */
.section { position: relative; padding: 108px 0; background: var(--steel-0); }
.section.grid-bg::before { content: ""; position: absolute; inset: 0; background: var(--grid); pointer-events: none; }
.section.tight { padding: 72px 0; }
.section > .wrap { position: relative; z-index: 2; }
.section-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: end; margin-bottom: 54px; }
.section-head h2 { margin-top: 15px; }
.section-head .lead { margin: 0; }

/* A shell is the 3D plate the content sits on */
.shell {
  position: relative; padding: 42px; background: linear-gradient(160deg, rgba(30,40,52,.92), rgba(8,11,16,.96));
  box-shadow: inset 0 1px 0 rgba(200,225,250,.16), inset 0 0 0 1px rgba(120,160,200,.12), 0 34px 70px -34px #000;
  clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);
  overflow: hidden; isolation: isolate;
  transform-style: preserve-3d;
}
.shell::before { content: ""; position: absolute; inset: 0; background: var(--grid-fine); pointer-events: none; opacity: .9; }
.shell::after {                                 /* the high-tech glow that slides through */
  content: ""; position: absolute; top: -60%; left: -35%; width: 45%; height: 220%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(41,182,255,.16) 40%, rgba(159,228,255,.3) 50%, rgba(41,182,255,.16) 60%, transparent);
  transform: rotate(18deg); filter: blur(6px);
  animation: sweep 11s var(--ease) infinite; animation-delay: var(--sweep-delay, 0s);
}
@keyframes sweep { 0% { left: -45%; opacity: 0; } 8% { opacity: 1; } 34% { left: 115%; opacity: 0; } 100% { left: 115%; opacity: 0; } }
.shell > * { position: relative; z-index: 1; }
.shell .corner { position: absolute; width: 16px; height: 16px; border: 1px solid var(--blue-2); box-shadow: var(--glow-blue-soft); z-index: 2; }
.shell .corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.shell .corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* tilt group — JS adds the rotation from pointer position */
.tilt { transition: transform .5s var(--ease); transform-style: preserve-3d; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(94vh, 940px); display: grid; align-items: center; isolation: isolate; overflow: hidden; }
.hero-media { position: absolute; inset: -4% 0; z-index: -3; will-change: transform; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.16) brightness(.62); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(94deg, rgba(3,6,10,.95) 0%, rgba(3,6,10,.82) 42%, rgba(3,10,20,.5) 100%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grid); pointer-events: none; }
.hero .wrap { padding: 120px 0; position: relative; z-index: 1; }
.hero h1 { color: #fff; text-shadow: 0 6px 34px rgba(0,0,0,.85); max-width: 17ch; }
.hero h1 em { font-style: normal; background: linear-gradient(180deg, var(--blue-3), var(--blue-1)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { margin-top: 22px; font-size: 1.16rem; color: #c6d4e2; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-strip { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.hero-strip div b { display: block; font-family: var(--display); font-size: 1.35rem; color: var(--chrome-3); }
.hero-strip div span { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--blue-2); }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 9px; font-family: var(--display); font-size: .54rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.scroll-cue i { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--blue-2), transparent); animation: cue 1.9s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: scaleY(.35); transform-origin: top; opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }

/* Page hero for inner pages */
.page-hero { position: relative; isolation: isolate; overflow: hidden; }
.page-hero .hero-media { inset: 0; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(3,6,10,.9), rgba(3,6,10,.95)); }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grid); }
.page-hero .wrap { padding: 92px 0 78px; position: relative; z-index: 1; }
.crumbs { display: flex; gap: 10px; font-family: var(--display); font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.crumbs a:hover { color: var(--blue-2); }

/* ---------- RAIN section: equipment in the wet ---------- */
.rainfall { position: relative; isolation: isolate; overflow: hidden; }
.rainfall .bg { position: absolute; inset: 0; z-index: -3; }
.rainfall .bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.55) contrast(1.22) brightness(.44); }
.rainfall::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(3,7,12,.86), rgba(3,10,18,.92)); }
.rain, .rain-far {                              /* two layers, different speed = depth */
  position: absolute; inset: -40% -10%; z-index: -1; pointer-events: none;
  background-repeat: repeat;
}
.rain-far {
  background-image: repeating-linear-gradient(101deg, transparent 0 7px, rgba(175,215,245,.16) 7px 8px, transparent 8px 15px);
  background-size: 15px 110px; animation: pour 1.25s linear infinite; opacity: .5;
}
.rain {
  background-image: repeating-linear-gradient(99deg, transparent 0 11px, rgba(205,235,255,.30) 11px 12.4px, transparent 12.4px 24px);
  background-size: 24px 170px; animation: pour .62s linear infinite; opacity: .72;
}
@keyframes pour { to { background-position: -46px 340px; } }
.rainfall .wrap { position: relative; z-index: 2; padding: 104px 0; }
.wet-sheen {                                    /* light catching the wet metal */
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 70% 30%, rgba(41,182,255,.14), transparent 70%);
  mix-blend-mode: screen;
}
.drops { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.drops i {
  position: absolute; top: -10px; width: 1.5px; height: 16px; border-radius: 1px;
  background: linear-gradient(to bottom, transparent, rgba(200,232,255,.85));
  animation: drop linear infinite;
}
@keyframes drop { to { transform: translateY(115vh); } }

/* ---------- GRIT section: wheels grinding, blue power glow ---------- */
.grit { position: relative; isolation: isolate; overflow: hidden; }
.grit .bg { position: absolute; inset: 0; z-index: -3; }
.grit .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; filter: saturate(1.1) contrast(1.3) brightness(.55); transform: scale(1.06); }
.grit::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(3,6,10,.95) 8%, rgba(3,6,10,.55) 55%, rgba(2,14,26,.72) 100%); }
.grit-power {                                   /* the blue power bloom off the tyre */
  position: absolute; z-index: -1; left: 52%; bottom: -12%; width: 46vw; height: 46vw; max-width: 720px; max-height: 720px;
  background: radial-gradient(circle, rgba(41,182,255,.55) 0%, rgba(10,111,194,.28) 32%, transparent 68%);
  filter: blur(28px); animation: throb 3.4s ease-in-out infinite; pointer-events: none;
}
@keyframes throb { 0%,100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
.grit-spray { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.grit-spray i {                                 /* flung grit */
  position: absolute; border-radius: 50%; background: rgba(220,235,250,.75);
  box-shadow: 0 0 6px rgba(41,182,255,.9); animation: fling linear infinite;
}
@keyframes fling { 0% { transform: translate(0,0) scale(1); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--fx), var(--fy)) scale(.3); opacity: 0; } }
.grit .wrap { position: relative; z-index: 2; padding: 112px 0; }

/* ---------- Cards ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 26px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  background: linear-gradient(165deg, rgba(28,37,48,.9), rgba(7,10,14,.96));
  box-shadow: inset 0 1px 0 rgba(200,225,250,.14), inset 0 0 0 1px rgba(120,160,200,.1), 0 26px 52px -30px #000;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card::before { content: ""; position: absolute; inset: 0; background: var(--grid-fine); pointer-events: none; }
.card:hover { transform: translateY(-8px); box-shadow: inset 0 1px 0 rgba(200,225,250,.3), inset 0 0 0 1px rgba(41,182,255,.5), 0 0 34px -6px rgba(41,182,255,.4), 0 30px 60px -30px #000; }
.card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.1) brightness(.8); transition: transform .9s var(--ease), filter .5s; }
.card:hover .card-media img { transform: scale(1.07); filter: saturate(1) contrast(1.15) brightness(.95); }
.card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,7,10,.94), transparent 62%); }
.card-body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 10px; flex: 1; position: relative; z-index: 1; }
.card-body p { color: var(--muted); font-size: .97rem; margin: 0; flex: 1; }
.idx { font-family: var(--display); font-size: .58rem; letter-spacing: .26em; color: var(--blue-2); }
.icon { width: 50px; height: 50px; display: grid; place-items: center; color: var(--blue-2); background: linear-gradient(165deg, rgba(41,182,255,.16), rgba(10,111,194,.05)); box-shadow: inset 0 0 0 1px rgba(41,182,255,.4); clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); transition: transform .4s var(--ease), box-shadow .4s; }
.icon svg { width: 23px; height: 23px; }
.icon.amber { color: var(--amber-2); background: linear-gradient(165deg, rgba(245,166,35,.16), rgba(184,117,10,.05)); box-shadow: inset 0 0 0 1px rgba(245,166,35,.4); }
.card:hover .icon, .feature:hover .icon { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(41,182,255,.85), var(--glow-blue-soft); }
.feature { display: flex; gap: 20px; align-items: flex-start; padding: 28px; background: linear-gradient(165deg, rgba(26,34,45,.85), rgba(7,10,14,.94)); box-shadow: inset 0 1px 0 rgba(200,225,250,.12), inset 0 0 0 1px rgba(120,160,200,.1); clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); transition: transform .4s var(--ease), box-shadow .4s; }
.feature:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(41,182,255,.45), 0 0 30px -8px rgba(41,182,255,.4); }
.feature p { margin: 6px 0 0; color: var(--muted); font-size: .95rem; }

/* Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 58px; align-items: center; }
.split.reverse > :first-child { order: 2; }
.split-media { position: relative; }
.split-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; clip-path: polygon(30px 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%,0 30px); filter: saturate(.85) contrast(1.12) brightness(.85); }
.split-media.tall img { aspect-ratio: 3/4; }
.split-media::after { content: ""; position: absolute; inset: 0; background: var(--grid-fine); pointer-events: none; clip-path: inherit; }
.split-media .frame { position: absolute; inset: 14px -14px -14px 14px; box-shadow: inset 0 0 0 1px rgba(41,182,255,.4); clip-path: polygon(30px 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%,0 30px); z-index: -1; }
.list-check { display: grid; gap: 13px; margin-top: 24px; }
.list-check li { display: flex; gap: 13px; align-items: flex-start; color: #c5d3e2; }
.list-check.cols { grid-template-columns: 1fr 1fr; }
.chk { width: 21px; height: 21px; flex: none; margin-top: 4px; display: grid; place-items: center; color: var(--blue-2); box-shadow: inset 0 0 0 1px rgba(41,182,255,.5); clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }
.chk svg { width: 11px; height: 11px; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.stat { position: relative; padding: 28px 26px; background: linear-gradient(165deg, rgba(26,34,45,.88), rgba(7,10,14,.95)); box-shadow: inset 0 1px 0 rgba(200,225,250,.14), inset 0 0 0 1px rgba(120,160,200,.1); clip-path: polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); transition: transform .4s var(--ease), box-shadow .4s; overflow: hidden; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--g-blue); box-shadow: 0 0 14px var(--blue-2); }
.stat:nth-child(even)::before { background: var(--g-amber); box-shadow: 0 0 14px var(--amber-2); }
.stat:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(41,182,255,.45), 0 0 30px -8px rgba(41,182,255,.45); }
.stat b { display: block; font-family: var(--display); font-size: 1.5rem; color: var(--chrome-3); line-height: 1.1; }
.stat span { display: block; margin-top: 7px; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; counter-reset: st; }
.step { position: relative; padding: 32px 26px; background: linear-gradient(165deg, rgba(24,32,42,.88), rgba(6,9,13,.95)); box-shadow: inset 0 1px 0 rgba(200,225,250,.12), inset 0 0 0 1px rgba(120,160,200,.1); clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); transition: transform .4s var(--ease), box-shadow .4s; }
.step::before { counter-increment: st; content: counter(st,decimal-leading-zero); position: absolute; top: 14px; right: 18px; font-family: var(--display); font-size: 2.2rem; color: rgba(120,160,200,.14); }
.step:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(41,182,255,.45), 0 0 30px -10px rgba(41,182,255,.4); }
.step h3 { margin: 16px 0 8px; }
.step p { margin: 0; color: var(--muted); font-size: .94rem; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 34px; align-items: start; }
.cbox { display: flex; gap: 17px; align-items: flex-start; padding: 24px; background: linear-gradient(165deg, rgba(26,34,45,.88), rgba(7,10,14,.95)); box-shadow: inset 0 1px 0 rgba(200,225,250,.12), inset 0 0 0 1px rgba(120,160,200,.1); clip-path: polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); transition: transform .4s var(--ease), box-shadow .4s; }
.cbox:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px rgba(41,182,255,.45), 0 0 28px -10px rgba(41,182,255,.4); }
.cbox a { color: var(--blue-2); overflow-wrap: anywhere; }
.cbox a:hover { color: var(--blue-3); text-shadow: var(--glow-blue-soft); }
.cbox p { margin: 4px 0 0; font-size: .9rem; color: var(--muted); }
.contact-value { display: inline-block; margin-top: 5px; font-family: var(--display); font-size: .72rem; letter-spacing: .06em; }
.contact-address { margin-top: 6px; color: var(--chrome-2); font-style: normal; line-height: 1.55; }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { font-family: var(--display); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--chrome-2); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .97rem; padding: 13px 15px; color: var(--ink);
  background: rgba(4,7,11,.85); border: 0; box-shadow: inset 0 0 0 1px rgba(120,160,200,.22);
  transition: box-shadow .3s; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--blue-2), 0 0 0 3px rgba(41,182,255,.18), var(--glow-blue-soft); }
.field textarea { min-height: 136px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.form-note { font-size: .84rem; color: var(--muted); margin-top: 14px; }

/* Footer */
.footer { position: relative; padding: 84px 0 28px; background: linear-gradient(180deg, #070a0f, #03060a); border-top: 1px solid var(--line); }
.footer::before { content: ""; position: absolute; inset: 0; background: var(--grid); pointer-events: none; }
.footer .wrap { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-mark { display: flex; align-items: center; gap: 14px; }
.footer-mark img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(41,182,255,.35)); }
.footer h4 { font-family: var(--display); font-size: .6rem; letter-spacing: .26em; color: var(--blue-2); margin-bottom: 17px; }
.footer p { color: var(--muted); font-size: .93rem; }
.footer ul li { margin-bottom: 10px; }
.footer ul a { color: #b3c1d1; font-size: .94rem; transition: color .3s, padding-left .3s var(--ease); }
.footer ul a:hover { color: var(--blue-2); padding-left: 6px; }
.footer-bottom { margin-top: 54px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .82rem; color: var(--muted); }

/* Progress bar */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 1000; background: linear-gradient(90deg, var(--blue-1), var(--blue-3)); box-shadow: 0 0 12px var(--blue-2); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d,0s); }
.reveal.left { transform: translateX(-46px); }
.reveal.right { transform: translateX(46px); }
.reveal.in { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1){transition-delay:.05s}.stagger.in > *:nth-child(2){transition-delay:.15s}
.stagger.in > *:nth-child(3){transition-delay:.25s}.stagger.in > *:nth-child(4){transition-delay:.35s}
.stagger.in > *:nth-child(5){transition-delay:.45s}.stagger.in > *:nth-child(6){transition-delay:.55s}
.stagger.in > *:nth-child(7){transition-delay:.65s}.stagger.in > *:nth-child(8){transition-delay:.75s}

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn::after, .bridge-scan, .shell::after, .bubble::before, .rain, .rain-far, .drops i,
  .grit-power, .grit-spray i, .scroll-cue i { animation: none !important; }
  .rain, .rain-far, .drops, .grit-spray { display: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1150px) {
  .bnav > a { padding: 12px 11px; font-size: .6rem; letter-spacing: .12em; }
  .bridge-mark span { display: none; }
  .grid-4, .steps, .stats { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .bubble { width: 92px; height: 92px; right: 20px; }
  .bubble.lift { width: 128px; height: 138px; right: 18px; }
  .lift-cables i:first-child { left: 27px; }
  .lift-cables i:last-child { right: 27px; }
}
@media (max-width: 960px) {
  :root { --bridge-h: 76px; }
  .bnav, .bridge-cta .btn { display: none; }
  .burger { display: inline-flex; }
  .split, .section-head, .contact-grid, .hero .wrap { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .section { padding: 78px 0; }
  .shell { padding: 30px; }
  /* Narrow screens: the bubble stops riding the scroll and parks bottom-right,
     out of the single text column. JS skips its transform below this width. */
  .bubble { width: 68px; height: 68px; right: 14px; top: auto; bottom: 18px; transform: none !important; }
  .bubble.lift { width: 88px; height: 94px; right: 12px; bottom: 16px; }
  .bubble.lift .lift-cables { display: none; }
  .bubble.lift .lift-carriage { inset: 9px 1px 10px; }
  .bubble.lift .lift-deck { bottom: 3px; height: 13px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .grid-2, .grid-3, .grid-4, .steps, .stats, .form-row, .footer-grid, .list-check.cols { grid-template-columns: 1fr; }
  .wrap { width: calc(100% - 32px); }
  .hero .wrap { padding: 92px 0 104px; }
  .hero-actions .btn { width: 100%; }
  .shell { padding: 24px; clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }
  .bubble { width: 58px; height: 58px; right: 10px; bottom: 14px; }
  .bubble.lift { width: 74px; height: 80px; right: 8px; bottom: 12px; }
  .section { padding: 62px 0; }
}