/* =========================================================
   ENVISION MINING INDUSTRY — "Operations" theme (v2)
   Industrial control-room aesthetic. Warm-black canvas,
   orange signal color, technical grid + monospace metadata.
   Completely independent from the v1 editorial site.
   ========================================================= */
:root{
  --bg:#0C0A07;
  --bg-2:#100D09;
  --panel:#16120D;
  --panel-2:#1D1812;
  --line:rgba(255,255,255,0.085);
  --line-2:rgba(255,255,255,0.16);
  --orange:#F47920;
  --orange-2:#FF8A2E;
  --orange-deep:#C75E0F;
  --orange-soft:rgba(244,121,32,0.12);
  --txt:#F4EFE7;
  --txt-2:rgba(244,239,231,0.60);
  --txt-3:rgba(244,239,231,0.36);
  --tile:#F4EFE7;

  --display:"Space Grotesk", system-ui, sans-serif;
  --body:"Inter", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  --pad:28px;
  --maxw:1380px;
}
@media (min-width:760px){ :root{ --pad:48px; } }
@media (min-width:1200px){ :root{ --pad:64px; } }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; background:var(--bg); }
body{
  font-family:var(--body); color:var(--txt); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ display:block; }
::selection{ background:var(--orange); color:#0C0A07; }

.mono{ font-family:var(--mono); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); width:100%; }

/* page-wide faint technical grid */
.grid-field{ position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px; opacity:.4;
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
}
.page{ position:relative; z-index:1; }

/* ---- kicker label ---- */
.kicker{ font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-3); display:inline-flex; align-items:center; gap:10px; }
.kicker b{ color:var(--orange); font-weight:500; }
.kicker .bar{ width:26px; height:1px; background:var(--orange); }
.contact .kicker{ color:var(--txt); }

.tag{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3); }

/* live dot */
.pulse{ width:8px; height:8px; border-radius:50%; background:var(--orange); position:relative; flex-shrink:0; }
.pulse::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--orange); animation:pp 2s ease-out infinite; }
@keyframes pp{ 0%{ transform:scale(.6); opacity:.9 } 100%{ transform:scale(1.8); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .pulse::after{ animation:none; } }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:11px; font-family:var(--mono); font-size:13px; letter-spacing:.04em; padding:14px 22px; border-radius:2px; transition:transform .15s, background .2s, border-color .2s, color .2s; }
.btn-o{ background:var(--orange); color:#0C0A07; font-weight:500; }
.btn-o:hover{ background:var(--orange-2); transform:translateY(-1px); }
.btn-ghost{ border:1px solid var(--line-2); color:var(--txt); }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange); }
.btn .arw{ transition:transform .2s; }
.btn:hover .arw{ transform:translateX(3px); }

/* =====================================================
   TOP BAR
   ===================================================== */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:50; transition:background .25s, border-color .25s, backdrop-filter .25s; border-bottom:1px solid transparent; }
.topbar.scrolled{ background:rgba(12,10,7,0.82); backdrop-filter:blur(14px) saturate(160%); border-bottom-color:var(--line); }
.topbar-in{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand-lockup{ display:inline-flex; align-items:center; gap:11px; }
.brand-iso{ height:34px; width:auto; }
/* full-logo variants (toggled via Tweaks → body.logo-*) */
.brand-img{ display:none; width:auto; }
.brand-img--h{ height:30px; }
.brand-img--s{ height:36px; }
body.logo-horizontal .brand-lockup,
body.logo-stacked   .brand-lockup{ display:none; }
body.logo-horizontal .brand-img--h{ display:block; }
body.logo-stacked   .brand-img--s{ display:block; }
.brand-word{ display:flex; flex-direction:column; line-height:1; gap:4px; }
.brand-word b{ font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:-.01em; color:var(--txt); }
.brand-word small{ font-family:var(--mono); font-size:8px; letter-spacing:.32em; text-transform:uppercase; color:var(--txt-3); }
.topnav{ display:flex; align-items:center; gap:30px; }
.topnav a{ font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--txt-2); transition:color .2s; }
.topnav a:hover{ color:var(--txt); }
.status{ display:none; align-items:center; gap:9px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-2); }
@media (min-width:1100px){ .status{ display:inline-flex; } }
/* language toggle (replaces the status/clock) */
.lang-toggle{ display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line-2); border-radius:3px; background:rgba(255,255,255,0.03); }
.lang-opt{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--txt-3); background:transparent; border:none; padding:5px 9px; border-radius:2px; cursor:pointer; line-height:1; transition:color .2s, background .2s; }
.lang-opt:hover{ color:var(--txt); }
.lang-opt.active{ background:var(--orange); color:#0C0A07; font-weight:500; }
.lang-sep{ width:1px; height:12px; background:var(--line-2); }
.menu-btn{ display:none; background:none; border:1px solid var(--line-2); border-radius:2px; padding:9px; color:var(--txt); }
@media (max-width:1000px){ .topnav .lnk, .topnav .btn{ display:none; } .menu-btn{ display:inline-flex; } }
.drawer{ position:fixed; inset:72px 0 auto 0; background:rgba(12,10,7,0.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height .3s ease; z-index:49; }
.drawer.open{ max-height:380px; }
.drawer-in{ display:flex; flex-direction:column; padding:14px 0 26px; }
.drawer a{ font-family:var(--mono); font-size:15px; padding:14px 0; border-bottom:1px solid var(--line); color:var(--txt); }
.drawer .btn-o{ margin-top:18px; justify-content:center; }

/* =====================================================
   HERO
   ===================================================== */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.hb-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 45%; opacity:0; transition:opacity 1.3s ease; will-change:opacity; }
.hb-vid.on{ opacity:1; }
.hero-bg::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,10,7,0.72) 0%, rgba(12,10,7,0.30) 35%, rgba(12,10,7,0.55) 62%, var(--bg) 100%),
    linear-gradient(90deg, rgba(12,10,7,0.78) 0%, rgba(12,10,7,0.15) 55%, transparent 100%); }
.hero-grid-lines{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:calc(100%/6) 100%; opacity:.5;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%); mask-image:linear-gradient(180deg, transparent, #000 30%); }
.hero-top{ position:relative; z-index:2; padding-top:120px; flex:1; display:flex; align-items:flex-start; }
.hero-coords{ display:flex; gap:22px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3); }
.hero-coords span{ display:inline-flex; align-items:center; gap:8px; }
.hero-coords .flags{ gap:7px; }
.hero-coords .flag{ width:24px; height:16px; border-radius:2px; display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.28), 0 1px 3px rgba(0,0,0,.35); }
.hero-main{ position:relative; z-index:2; padding-bottom:38px; }
.hero h1{ font-family:var(--display); font-weight:600; letter-spacing:-.03em; line-height:.96; margin:22px 0 0; text-wrap:balance;
  font-size:clamp(35px, 7.2vw, 93px); }
.hero h1 .o{ color:var(--orange); }
.hero-sub{ margin:26px 0 0; max-width:620px; font-size:clamp(16px,2vw,19px); color:var(--txt-2); line-height:1.55; }
.hero-cta{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }

/* telemetry bar */
.telemetry{ position:relative; z-index:2; border-top:1px solid var(--line); }
.telemetry-in{ display:grid; grid-template-columns:repeat(2,1fr); }
@media (min-width:820px){ .telemetry-in{ grid-template-columns:auto repeat(4,1fr); } }
.telemetry .live{ display:none; align-items:center; gap:10px; padding:20px 28px 20px 0; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-2); border-right:1px solid var(--line); }
@media (min-width:820px){ .telemetry .live{ display:flex; } }
.tm{ padding:18px 20px; border-left:1px solid var(--line); }
.telemetry-in > .tm:first-of-type{ border-left:none; }
@media (min-width:820px){ .telemetry-in > .tm:first-of-type{ border-left:1px solid var(--line); } }
.tm__n{ font-family:var(--display); font-size:clamp(26px,3.4vw,38px); font-weight:600; letter-spacing:-.02em; line-height:1; }
.tm__n em{ font-style:normal; color:var(--orange); }
.tm__l{ margin-top:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-3); line-height:1.35; }
.tm--logo{ display:flex; align-items:center; }
.ms-partner-logo{ height:46px; width:auto; max-width:100%; object-fit:contain; display:block; }
@media (max-width:819px){ .ms-partner-logo{ height:39px; } }

/* =====================================================
   MARQUEE (clients)
   ===================================================== */
.clients{ padding:48px 0 52px; border-bottom:1px solid var(--line); }
.clients-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:30px; flex-wrap:wrap; }
.clients-head p{ margin:0; max-width:420px; color:var(--txt-2); font-size:14.5px; }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee + .marquee{ margin-top:14px; }
.marquee-track{ display:flex; gap:14px; width:max-content; animation:scrollx 34s linear infinite; }
.marquee.rev .marquee-track{ animation-direction:reverse; animation-duration:40s; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; } }
.logo-tile{ flex-shrink:0; height:84px; display:flex; align-items:center; justify-content:center; padding:0 30px; }
.logo-tile img{ width:auto; opacity:.74; transition:opacity .25s; }
.marquee:hover .logo-tile img{ opacity:.85; }
.logo-tile img:hover{ opacity:1; }
/* per-logo optical heights so every mark reads at even visual weight, centered on one axis */
.logo-tile img.lg-antofagasta{ height:56px; }
.logo-tile img.lg-sqm{ height:48px; }
.logo-tile img.lg-collahuasi{ height:44px; }
.logo-tile img.lg-novandino{ height:38px; }
.logo-tile img.lg-bhp{ height:33px; }
.logo-tile img.lg-teck{ height:31px; }
.logo-tile img.lg-glencore{ height:27px; }
.logo-tile img.lg-lundin{ height:25px; }
.logo-tile img.lg-codelco{ height:30px; opacity:1; }
.marquee:hover .logo-tile img.lg-codelco{ opacity:1; }
.logo-tile img.lg-pucobre{ height:50px; }

/* =====================================================
   SECTION SCAFFOLD
   ===================================================== */
.section{ position:relative; padding:clamp(36px,5vw,70px) 0; }
.section-line{ border-top:1px solid var(--line); }
.sec-head{ display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:54px; }
@media (min-width:920px){ .sec-head{ grid-template-columns:0.9fr 1.6fr; gap:48px; align-items:end; } }
.sec-head h2{ font-family:var(--display); font-weight:600; letter-spacing:-.03em; line-height:1.02; margin:14px 0 0; font-size:clamp(34px,5.2vw,66px); text-wrap:balance; }
.sec-head h2 .o{ color:var(--orange); }
.sec-head p{ margin:0; color:var(--txt-2); font-size:clamp(15px,1.9vw,18px); max-width:560px; line-height:1.55; }
.sec-no{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--orange); }

/* =====================================================
   SOLUTIONS (interactive module switcher)
   ===================================================== */
.solutions{ background:var(--bg-2); }
.modules{ display:grid; grid-template-columns:1fr; gap:0; border:1px solid var(--line); }
@media (min-width:980px){ .modules{ grid-template-columns:0.86fr 1.14fr; } }
.mod-list{ display:flex; flex-direction:column; }
.mod-item{ position:relative; text-align:left; background:transparent; border:none; border-bottom:1px solid var(--line); padding:24px 26px; color:var(--txt-2); display:flex; align-items:center; gap:18px; transition:background .2s, color .2s; }
.mod-list .mod-item:last-child{ border-bottom:none; }
@media (min-width:980px){ .mod-list .mod-item:last-child{ border-bottom:1px solid var(--line); } }
.mod-item:hover{ background:rgba(255,255,255,0.02); color:var(--txt); }
.mod-item.active{ background:var(--panel); color:var(--txt); }
.mod-item.active::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--orange); }
.mod-item .no{ font-family:var(--mono); font-size:12px; color:var(--txt-3); flex-shrink:0; width:24px; }
.mod-item.active .no{ color:var(--orange); }
.mod-item .nm{ font-family:var(--display); font-size:clamp(18px,2.2vw,23px); font-weight:500; letter-spacing:-.01em; line-height:1.1; flex:1; }
.mod-item .ic{ width:20px; height:20px; color:var(--txt-3); flex-shrink:0; transition:color .2s, transform .2s; }
.mod-item.active .ic{ color:var(--orange); transform:translateX(2px); }

.mod-detail{ position:relative; padding:38px 34px; background:var(--panel); border-top:1px solid var(--line); min-height:340px; }
@media (min-width:980px){ .mod-detail{ border-top:none; border-left:1px solid var(--line); padding:46px 44px; } }
.mod-detail .corner{ position:absolute; top:14px; right:16px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--txt-3); }
.mod-panel{ display:none; animation:fadeup .4s cubic-bezier(.22,.61,.36,1); }
.mod-panel.show{ display:block; }
@keyframes fadeup{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.mod-panel .pn-k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); }
.mod-panel h3{ font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.05; margin:16px 0 0; font-size:clamp(26px,3.4vw,40px); }
.mod-panel .pn-d{ margin:20px 0 0; color:var(--txt-2); font-size:16px; line-height:1.6; max-width:520px; }
.mod-panel .pn-stack{ margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.mod-panel .pn-stack .lab{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3); margin-bottom:12px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-family:var(--mono); font-size:11.5px; padding:7px 12px; border:1px solid var(--line-2); border-radius:2px; color:var(--txt); background:rgba(255,255,255,0.02); }

/* =====================================================
   MISSION band
   ===================================================== */
.mission{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(35px,4.5vw,60px) 0; background:linear-gradient(180deg,var(--bg),var(--bg-2)); }
.mission h2{ font-family:var(--display); font-weight:600; letter-spacing:-.03em; line-height:1.04; margin:24px 0 0; font-size:clamp(30px,5vw,62px); max-width:1000px; text-wrap:balance; }
.mission h2 .o{ color:var(--orange); }
.mission p{ margin:30px 0 0; max-width:720px; color:var(--txt-2); font-size:clamp(15px,1.9vw,18px); line-height:1.6; }
.mission p b{ color:var(--txt); font-weight:600; }

/* =====================================================
   CASES (filterable)
   ===================================================== */
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.filter{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; padding:10px 16px; border:1px solid var(--line-2); border-radius:2px; color:var(--txt-2); background:transparent; transition:all .18s; display:inline-flex; align-items:center; gap:8px; }
.filter:hover{ color:var(--txt); border-color:var(--txt-3); }
.filter.active{ background:var(--orange); border-color:var(--orange); color:#0C0A07; font-weight:500; }
.filter .ct{ opacity:.6; }
.case-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:680px){ .case-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1120px){ .case-grid{ grid-template-columns:repeat(3,1fr); } }
.case{ position:relative; border:1px solid var(--line); background:var(--panel); padding:26px 24px 22px; display:flex; flex-direction:column; transition:border-color .25s, transform .25s, background .25s; overflow:hidden; }
.case::before{ content:""; position:absolute; top:0; left:0; width:0; height:2px; background:var(--orange); transition:width .35s cubic-bezier(.22,.61,.36,1); }
.case:hover{ border-color:var(--line-2); transform:translateY(-3px); background:var(--panel-2); }
.case:hover::before{ width:100%; }
.case-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.case-cl{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); display:inline-flex; align-items:center; gap:7px; }
.case-cl .d{ width:5px; height:5px; background:var(--orange); border-radius:50%; }
.case-id{ font-family:var(--mono); font-size:10.5px; color:var(--txt-3); letter-spacing:.06em; }
.case h3{ font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-.01em; line-height:1.22; margin:0 0 10px; color:var(--txt); }
.case-d{ margin:0 0 18px; font-size:13.5px; line-height:1.55; color:var(--txt-2); }
.case-stack{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.case-stack span{ font-family:var(--mono); font-size:10px; color:var(--txt-2); border:1px solid var(--line); padding:4px 8px; border-radius:2px; }
.case-res{ list-style:none; margin:auto 0 0; padding:16px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px; }
.case-res li{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.4; color:var(--txt); }
.case-res svg{ width:14px; height:14px; color:var(--orange); flex-shrink:0; margin-top:1px; }
.case.hide{ display:none; }

/* =====================================================
   CAPABILITIES / WHY (split with photo)
   ===================================================== */
.why{ background:var(--bg-2); border-top:1px solid var(--line); }
.why-split{ display:grid; grid-template-columns:1fr; gap:0; border:1px solid var(--line); }
@media (min-width:960px){ .why-split{ grid-template-columns:1.1fr 0.9fr; } }
.why-photo{ position:relative; min-height:300px; overflow:hidden; }
.why-photo img{ width:100%; height:100%; object-fit:cover; }
.why-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(12,10,7,0.5)); }
.why-photo .stamp{ position:absolute; left:18px; bottom:16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt); display:flex; align-items:center; gap:8px; }
.why-body{ padding:40px 34px; }
@media (min-width:960px){ .why-body{ padding:52px 48px; border-left:1px solid var(--line); } }
.why-item{ padding:26px 0; border-bottom:1px solid var(--line); }
.why-item:first-child{ padding-top:0; }
.why-item:last-child{ border-bottom:none; padding-bottom:0; }
.why-item .no{ font-family:var(--mono); font-size:11px; color:var(--orange); letter-spacing:.08em; }
.why-item h3{ font-family:var(--display); font-weight:500; font-size:22px; letter-spacing:-.01em; margin:12px 0 10px; }
.why-item p{ margin:0; color:var(--txt-2); font-size:14.5px; line-height:1.6; }

/* =====================================================
   TECHNOLOGIES / MICROSOFT PARTNER
   ===================================================== */
.tech{ background:var(--bg-2); }
.tech-grid{ display:grid; grid-template-columns:1fr; gap:40px; }
@media (min-width:1000px){ .tech-grid{ grid-template-columns:1fr 1.05fr; gap:clamp(40px,5vw,80px); align-items:start; } }

.ms-badge{ display:inline-flex; align-items:center; gap:14px; padding:13px 20px; border:1px solid var(--line-2); border-radius:5px; background:rgba(255,255,255,0.025); margin-bottom:26px; }
.ms-logo{ width:27px; height:27px; flex-shrink:0; }
.ms-txt{ display:flex; flex-direction:column; line-height:1.15; }
.ms-txt b{ font-family:var(--display); font-size:14px; font-weight:600; color:var(--txt); }
.ms-txt small{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--orange); }

.tech-intro h2{ font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.04; font-size:clamp(30px,4vw,46px); margin:0 0 20px; }
.tech-intro > p{ color:var(--txt-2); font-size:15.5px; line-height:1.65; max-width:520px; margin:0 0 34px; }

.tech-stats{ display:flex; flex-wrap:wrap; gap:34px; }
.tstat .tn{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,34px); line-height:1; letter-spacing:-.01em; }
.tstat .tn.tn--sm{ font-size:clamp(18px,2.1vw,22px); line-height:1.12; }
.tstat .tn.o{ color:var(--orange); }
.tstat .tl{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-3); margin-top:8px; max-width:160px; line-height:1.5; }

.tech-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.tcard{ position:relative; border:1px solid var(--line); border-radius:14px; padding:20px 22px 21px; overflow:hidden;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(244,121,32,0.10), transparent 42%),
    radial-gradient(120% 140% at 0% 100%, rgba(255,255,255,0.018), transparent 40%),
    #110D09;
  transition:border-color .25s, transform .25s, box-shadow .25s; }
.tcard:hover{ border-color:var(--line-2); transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(0,0,0,.8); }
.tc-ic{ width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:#0C0A07; border:1px solid var(--line); margin-bottom:14px; }
.tc-ic svg{ width:24px; height:24px; display:block; }
.tcard h3{ font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-.01em; margin:0 0 7px; color:var(--txt); }
.tcard p{ color:var(--txt-2); font-size:13px; line-height:1.5; margin:0; }
.tcard--wide{ grid-column:1 / -1; display:flex; align-items:center; gap:22px; padding:22px 24px; }
.tcard--wide .tc-ic{ margin-bottom:0; flex-shrink:0; }
.tcard--wide .tc-wide-tx h3{ margin-bottom:6px; }
@media (max-width:520px){ .tcard--wide{ flex-direction:column; align-items:flex-start; } }

/* =====================================================
   SERVICES (four lines)
   ===================================================== */
.svc-grid{ display:grid; grid-template-columns:1fr; gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
@media (min-width:680px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1080px){ .svc-grid{ grid-template-columns:repeat(4,1fr); } }
.svc{ padding:32px 28px 34px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); background:var(--panel); transition:background .25s; }
.svc:hover{ background:var(--panel-2); }
@media (min-width:1080px){ .svc{ border-bottom:none; } }
.svc-no{ font-size:12px; letter-spacing:.12em; color:var(--orange); margin-bottom:20px; }
.svc h3{ font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-.01em; margin:0 0 12px; line-height:1.15; }
.svc > p{ color:var(--txt-2); font-size:13.8px; line-height:1.6; margin:0 0 22px; }
.svc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.svc-list li{ position:relative; padding-left:18px; font-size:13.5px; color:var(--txt); }
.svc-list li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:1px; background:var(--orange); }

/* =====================================================
   CONTACT
   ===================================================== */
.contact{ border-top:1px solid var(--line); }
.contact-split{ display:grid; grid-template-columns:1fr; gap:48px; }
@media (min-width:980px){ .contact-split{ grid-template-columns:1fr 1fr; gap:64px; } }
.contact h2{ font-family:var(--display); font-weight:600; letter-spacing:-.03em; line-height:1.0; margin:18px 0 0; font-size:clamp(38px,6vw,76px); }
.contact h2 .o{ color:var(--orange); }
.contact-lede{ margin:24px 0 0; color:var(--txt-2); font-size:17px; line-height:1.55; max-width:420px; }
.people{ margin-top:36px; display:grid; gap:12px; }
.person{ border:1px solid var(--line); background:var(--panel); padding:20px 22px; transition:border-color .2s, background .2s; }
.person:hover{ border-color:var(--orange); background:var(--panel-2); }
.person .pn{ font-family:var(--display); font-size:17px; font-weight:600; }
.person .pr{ font-family:var(--mono); font-size:11.5px; color:var(--orange); letter-spacing:.04em; margin-top:3px; }
.person .ln{ margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.person .ln a{ font-size:13.5px; color:var(--txt-2); display:inline-flex; align-items:center; gap:9px; transition:color .2s; }
.person .ln a:hover{ color:var(--orange); }
.person .ln svg{ width:15px; height:15px; color:var(--txt-3); flex-shrink:0; }

.form{ border:1px solid var(--line); background:var(--panel); padding:30px 28px; }
@media (min-width:760px){ .form{ padding:38px 36px; } }
.form-hd{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3); display:flex; align-items:center; gap:9px; margin-bottom:26px; }
.frow{ display:grid; grid-template-columns:1fr; gap:0 22px; }
@media (min-width:560px){ .frow{ grid-template-columns:1fr 1fr; } }
.fld{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.fld label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3); }
.fld label .opt{ text-transform:none; letter-spacing:0; color:var(--txt-3); opacity:.7; }
.fld input, .fld textarea{ appearance:none; background:transparent; border:none; border-bottom:1px solid var(--line-2); color:var(--txt); font-family:var(--body); font-size:15px; padding:9px 0; outline:none; transition:border-color .2s; width:100%; }
.fld textarea{ resize:vertical; min-height:46px; line-height:1.45; }
.fld input::placeholder, .fld textarea::placeholder{ color:var(--txt-3); }
.fld input:focus, .fld textarea:focus{ border-bottom-color:var(--orange); }
.fld.bad input, .fld.bad textarea{ border-bottom-color:var(--orange); }
.fhint{ min-height:13px; font-size:11px; color:var(--txt-3); }
.fld.bad .fhint{ color:var(--orange); }
.form-foot{ margin-top:8px; display:flex; flex-direction:column; gap:14px; align-items:stretch; }
@media (min-width:480px){ .form-foot{ flex-direction:row; align-items:center; justify-content:space-between; } }
.fstat{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-3); display:inline-flex; align-items:center; gap:8px; }
.fstat .ind{ width:7px; height:7px; border-radius:50%; background:var(--txt-3); transition:background .2s; }
.fstat.ok .ind{ background:var(--orange); }
.fstat.err{ color:#ff6b5e; }
.fstat.err .ind{ background:#ff6b5e; }
.submit{ background:rgba(255,255,255,0.06); color:var(--txt-3); border:none; padding:14px 24px; border-radius:2px; font-family:var(--mono); font-size:13px; display:inline-flex; align-items:center; gap:11px; cursor:not-allowed; transition:all .2s; justify-content:center; }
.submit.on{ background:var(--orange); color:#0C0A07; cursor:pointer; }
.submit.on:hover{ background:var(--orange-2); }
.form-done{ text-align:center; padding:30px 10px; }
.form-done .ico{ width:48px; height:48px; border-radius:50%; background:var(--orange); display:grid; place-items:center; margin:0 auto 18px; }
.form-done h3{ font-family:var(--display); font-size:26px; font-weight:600; margin:0 0 10px; }
.form-done p{ color:var(--txt-2); font-size:14.5px; margin:0; line-height:1.55; }

/* =====================================================
   FOOTER
   ===================================================== */
.foot{ border-top:1px solid var(--line); padding:40px 0; }
.foot-in{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; }
.foot-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-3); }
.foot-links{ display:flex; gap:22px; }
.foot-links a{ font-family:var(--mono); font-size:12px; color:var(--txt-2); }
.foot-links a:hover{ color:var(--orange); }

/* reveal */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; } }
[hidden]{ display:none !important; }

/* =====================================================
   TWEAKS — expressive theme controls
   (signal color is driven by --orange* on :root; atmosphere
   and voice are driven by body classes below)
   ===================================================== */
:root{ --tw-trans: background .4s ease, border-color .4s ease, color .4s ease, opacity .4s ease; }
body{ transition:background .4s ease; }
.btn-o, .submit.on, .form-done .ico, .filter.active, .case-cl .d, .pulse{ transition:var(--tw-trans); }

/* ---- ATMOSPHERE: Minimal --------------------------------------------------
   Strips the technical chrome for a calm, editorial-dark read. */
body.atmo-minimal .grid-field{ opacity:0; }
body.atmo-minimal .hero-grid-lines{ opacity:0; }
body.atmo-minimal .pulse::after{ animation:none; opacity:0; }
body.atmo-minimal .hero-coords{ opacity:0; }
body.atmo-minimal .case-id, body.atmo-minimal .mod-detail .corner{ opacity:0; }
body.atmo-minimal .telemetry .live{ opacity:.5; }

/* ---- ATMOSPHERE: HUD ------------------------------------------------------
   Amplifies into a full control-room heads-up display: denser grid,
   CRT scanlines, crosshair corner brackets, hotter accents. */
body.atmo-hud .grid-field{ opacity:.72; background-size:48px 48px; }
body.atmo-hud .hero-grid-lines{ opacity:.7; }
/* CRT scanlines */
body.atmo-hud .page::before{
  content:""; position:fixed; inset:0; z-index:45; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.13) 2px 3px);
}
/* vignette */
body.atmo-hud .page::after{
  content:""; position:fixed; inset:0; z-index:44; pointer-events:none;
  box-shadow:inset 0 0 220px 40px rgba(0,0,0,0.55);
}
/* crosshair corner brackets on case cards */
body.atmo-hud .case::after{
  content:""; position:absolute; inset:7px; pointer-events:none; opacity:.62;
  background:
    linear-gradient(var(--orange),var(--orange)) 0 0/11px 1.5px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 0 0/1.5px 11px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 100% 0/11px 1.5px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 100% 0/1.5px 11px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 0 100%/11px 1.5px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 0 100%/1.5px 11px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 100% 100%/11px 1.5px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 100% 100%/1.5px 11px no-repeat;
}
/* crosshair brackets framing the hero headline block */
body.atmo-hud .hero-main .wrap{ position:relative; }
body.atmo-hud .hero-main .wrap::before{
  content:""; position:absolute; left:calc(var(--pad) - 16px); right:calc(var(--pad) - 16px);
  top:-14px; bottom:-14px; pointer-events:none; opacity:.5;
  background:
    linear-gradient(var(--orange),var(--orange)) 0 0/16px 1.5px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 0 0/1.5px 16px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 100% 0/16px 1.5px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 100% 0/1.5px 16px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 0 100%/16px 1.5px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 0 100%/1.5px 16px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 100% 100%/16px 1.5px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 100% 100%/1.5px 16px no-repeat;
}
body.atmo-hud .chip{ border-color:var(--orange); color:var(--orange); }
body.atmo-hud .btn-o{ box-shadow:0 0 24px -4px var(--orange); }
body.atmo-hud .case:hover{ box-shadow:0 0 30px -10px var(--orange); }

/* ---- VOICE: headline typography personality ------------------------------- */
body.voice-industrial{ --display:"Oswald", system-ui, sans-serif; }
body.voice-industrial .hero h1,
body.voice-industrial .sec-head h2,
body.voice-industrial .mission h2,
body.voice-industrial .contact h2,
body.voice-industrial .brand-word b{
  text-transform:uppercase; letter-spacing:.005em; font-weight:600;
}
body.voice-industrial .hero h1{ font-size:clamp(50px,10vw,128px); line-height:.92; }

body.voice-terminal{ --display:"JetBrains Mono", ui-monospace, monospace; }
body.voice-terminal .hero h1,
body.voice-terminal .sec-head h2,
body.voice-terminal .mission h2,
body.voice-terminal .contact h2{
  text-transform:uppercase; letter-spacing:-.02em; font-weight:500;
}
body.voice-terminal .hero h1{ font-size:clamp(32px,6.4vw,82px); line-height:1.02; }
body.voice-terminal .sec-head h2{ font-size:clamp(28px,4.4vw,54px); }
body.voice-terminal .mission h2{ font-size:clamp(26px,4.2vw,52px); }
body.voice-terminal .contact h2{ font-size:clamp(32px,5vw,64px); }
/* terminal caret blink on the hero headline */
body.voice-terminal .hero h1::after{
  content:"_"; color:var(--orange); margin-left:.06em; animation:tcaret 1.1s steps(1) infinite;
}
@keyframes tcaret{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ body.voice-terminal .hero h1::after{ animation:none; } }