/* ============================================================
   NOMADIC OUTWORX — Production site styles
   A SAVAGE COMPANY | MISSION CRITICAL EXTERIOR ENVIRONMENTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

@font-face{font-family:'Archivo SemiCondensed';src:url('fonts/Archivo_SemiCondensed-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Archivo SemiCondensed';src:url('fonts/Archivo_SemiCondensed-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Archivo SemiCondensed';src:url('fonts/Archivo_SemiCondensed-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/Archivo-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/Archivo-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/Archivo-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --black:#000;--white:#fff;--red:#E63928;--red-press:#C42E20;
  --ink-900:#0A0A0A;--ink-850:#121212;--ink-800:#1A1A1A;--ink-700:#2E2E2E;
  --g-600:#4D4D4D;--g-500:#767676;--g-400:#A3A3A3;--g-300:#C9C9C9;--g-200:#E5E5E5;--g-100:#F4F4F5;
  --display:'Archivo SemiCondensed','Arial Narrow',sans-serif;
  --head:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,0,0,1);--dur:160ms;
  --maxw:1280px;--pad:40px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink-900);color:var(--white);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
::selection{background:var(--red);color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* type */
.display{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.015em;line-height:.94;margin:0}
h2.display{font-weight:800;font-size:clamp(2rem,3.6vw,3rem);line-height:1}
h3{font-family:var(--head);font-weight:700;margin:0}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--g-400);display:inline-flex;align-items:center;gap:8px;margin:0}
.eyebrow .tick{color:var(--red)}
.eyebrow.dark{color:var(--g-500)}
.x{color:var(--red)}
p{margin:0 0 1em;text-wrap:pretty}

/* buttons */
.btn{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding:14px 26px;border:2px solid;border-radius:0;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:all var(--dur) var(--ease);background:transparent}
.btn .arr{color:var(--red)}
.btn-solid{border-color:#fff;background:#fff;color:#000}
.btn-solid:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn-solid:hover .arr{color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{background:#fff;color:#000;border-color:#fff}
.btn-red{border-color:var(--red);background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-press);border-color:var(--red-press)}
.btn-red:active{background:var(--red-press)}
/* light-context ghost */
.btn-dark{border-color:#000;color:#000}
.btn-dark:hover{background:#000;color:#fff}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);border-bottom:1px solid transparent}
.hdr.solid{background:rgba(10,10,10,.94);border-bottom-color:var(--ink-700);backdrop-filter:saturate(120%) blur(6px)}
.hdr .row{height:76px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:14px}
.brand .brand-logo{height:40px;width:auto;display:block}
.ftr-logo{height:54px;width:auto;display:block}
@media (max-width:760px){.brand .brand-logo{height:32px}}
.nav{display:flex;align-items:center;gap:6px}
.nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--g-400);padding:10px 14px;border-bottom:2px solid transparent;transition:color var(--dur) var(--ease)}
.nav a:hover,.nav a.active{color:#fff}
.nav a.active{border-bottom-color:var(--red)}
.nav .cta{margin-left:18px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:10px}
.burger span{width:24px;height:2px;background:#fff;display:block}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--ink-900)}
.hero .photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.62}
.hero .topo{position:absolute;inset:0;background-image:url('assets/topo-contours.svg');background-size:cover;background-position:center right;opacity:.16;filter:invert(1);pointer-events:none}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--ink-900) 8%,rgba(10,10,10,.55) 48%,rgba(10,10,10,.12))}
.hero .inner{position:relative;z-index:2;width:100%;padding:140px var(--pad) 90px}
.hero h1{font-size:clamp(3rem,6.4vw,6rem);max-width:15ch}
.hero .lede{margin-top:30px;max-width:46ch;font-size:18px;color:var(--g-300)}
.hero .cta-row{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}
.readout{margin-top:72px;display:flex;border-top:1px solid var(--ink-700);max-width:780px}
.readout .cell{flex:1;padding:22px 24px 0 0}
.readout .cell+.cell{border-left:1px solid var(--ink-700);padding-left:24px}
.readout .k{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.01em}
.readout .v{margin-top:8px}

/* sections */
section{position:relative}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:52px}
.sec-head p{max-width:38ch;color:var(--g-400);font-size:15.5px;margin:0}

/* capabilities */
.caps{background:#fff;color:#000;padding:110px 0}
.caps .eyebrow{color:var(--g-500)}
.caps .sec-head p{color:var(--g-600)}
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.cap{position:relative;overflow:hidden;border:1px solid var(--g-200);border-top:2px solid #000;padding:30px 24px 34px;min-height:300px;background:#fff;color:#000;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.cap .ph{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity var(--dur) var(--ease)}
.cap .ph::after{content:"";position:absolute;inset:0;background:rgba(10,10,10,.62)}
.cap .c-in{position:relative;z-index:2}
.cap .num{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--g-500)}
.cap .num b{color:var(--red);font-weight:500}
.cap h3{font-family:var(--head);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.08;margin:18px 0 0}
.cap p{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:var(--g-600)}
.cap:hover{background:var(--ink-900);color:#fff;border-top-color:var(--red)}
.cap:hover .ph{opacity:1}
.cap:hover .num{color:var(--g-400)}
.cap:hover p{color:var(--g-300)}

/* positioning split */
.pos{background:var(--g-100);color:#000}
.pos .grid{display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.pos .left{padding:104px 64px 104px var(--pad);display:flex;flex-direction:column;justify-content:center}
.pos h2{font-size:clamp(1.7rem,2.7vw,2.4rem);line-height:1.06}
.pos .left p{margin-top:36px;max-width:44ch;font-size:16px;color:var(--g-600)}
.pos .eyebrow{color:var(--g-500)}
.pos .stats{margin-top:34px;display:flex;gap:40px;border-top:2px solid #000;padding-top:24px;max-width:440px}
.pos .stats .k{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-.01em}
.pos .stats .eyebrow{margin-top:6px;color:var(--g-500)}
.pos .right{position:relative;background:var(--ink-900);overflow:hidden}
.pos .right .photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.85}

/* austere band */
.austere{position:relative;overflow:hidden;color:#fff;padding:120px 0;background:var(--ink-900)}
.austere .photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.4}
.austere .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.92),rgba(10,10,10,.55))}
.austere .inner{position:relative;z-index:2;max-width:620px}
.austere h2{font-size:clamp(1.8rem,3vw,2.6rem);margin-top:20px}
.austere p{margin-top:22px;font-size:17px;color:var(--g-300)}

/* deploy / contact */
.deploy{position:relative;overflow:hidden;background:var(--ink-900);padding:104px 0}
.deploy .topo{position:absolute;left:-200px;bottom:-160px;width:760px;background:url('assets/topo-contours.svg') no-repeat;background-size:contain;opacity:.13;filter:invert(1);height:760px;pointer-events:none}
.deploy .grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.deploy h2{color:#fff;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1}
.deploy .lede{margin-top:24px;max-width:40ch;color:var(--g-300);font-size:16px}
.deploy .contact{margin-top:34px;font-family:var(--mono);font-size:12.5px;color:var(--g-400);line-height:2}
.deploy .contact b{color:#fff}
.card{background:var(--ink-800);border:1px solid var(--ink-700);padding:34px}
.field{margin-bottom:18px}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--g-400);margin-bottom:8px;display:block}
.field input,.field select{width:100%;padding:13px 14px;background:var(--ink-850);border:1px solid var(--ink-700);border-radius:2px;color:#fff;font-family:var(--body);font-size:14.5px;outline:none;transition:border-color var(--dur) var(--ease)}
.field input:focus,.field select:focus{border-color:#fff}
.field select{appearance:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sent{text-align:center;padding:30px 0}
.sent .ok{color:var(--red);font-family:var(--mono);letter-spacing:.16em;font-size:12px}
.sent .big{font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;margin-top:14px}
.sent p{color:var(--g-400);font-size:14;margin-top:10px}

/* footer */
.ftr{background:#000;color:#fff;padding:72px 0 40px}
.ftr .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;border-bottom:1px solid var(--ink-700);padding-bottom:48px}
.ftr .wm{font-family:var(--display);font-weight:800;font-size:20px;text-transform:uppercase;margin-top:18px;letter-spacing:-.01em}
.ftr h4{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--g-400);margin:0 0 18px}
.ftr .col a{display:block;color:var(--g-400);font-size:13.5px;margin-bottom:11px;transition:color var(--dur) var(--ease)}
.ftr .col a:hover{color:#fff}
.ftr .base{display:flex;justify-content:space-between;align-items:center;margin-top:28px;flex-wrap:wrap;gap:12px}
.ftr .base .eyebrow{color:var(--g-600)}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ===== Custom red-dot cursor (fine-pointer devices only) ===== */
@media (hover:hover) and (pointer:fine){
  .uses-dot,.uses-dot a,.uses-dot button,.uses-dot select,.uses-dot input,.uses-dot .btn,.uses-dot [role=button]{cursor:none}
  .cursor-dot{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--red);
    transform:translate3d(-50%,-50%,0);pointer-events:none;z-index:9999;opacity:0;
    transition:opacity .25s var(--ease),width .18s var(--ease),height .18s var(--ease)}
  .cursor-ring{position:fixed;top:0;left:0;width:38px;height:38px;border-radius:50%;
    border:1.5px solid rgba(230,57,40,.55);transform:translate3d(-50%,-50%,0);pointer-events:none;z-index:9998;opacity:0;
    transition:opacity .25s var(--ease),width .2s var(--ease),height .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
  .cursor-dot.on,.cursor-ring.on{opacity:1}
  /* hover over interactive targets: dot shrinks, ring fills */
  .cursor-ring.hot{width:54px;height:54px;border-color:var(--red);background:rgba(230,57,40,.10)}
  .cursor-dot.hot{width:6px;height:6px}
  /* on dark sections the ring needs to stay visible — red works on both */
}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* responsive */
@media (max-width:980px){
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .pos .grid,.deploy .grid{grid-template-columns:1fr}
  .pos .right{min-height:340px}
  .pos .left{padding:72px var(--pad)}
}
@media (max-width:760px){
  :root{--pad:22px}
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:flex-start;background:rgba(10,10,10,.98);border-bottom:1px solid var(--ink-700);padding:12px 22px 22px;gap:0}
  .nav.open a{width:100%;padding:14px 0}
  .nav.open .cta{margin:12px 0 0}
  .burger{display:flex}
  .hero .scrim{background:linear-gradient(180deg,rgba(10,10,10,.6),rgba(10,10,10,.85))}
  .readout{flex-wrap:wrap}
  .readout .cell{flex:1 0 50%;border-left:none!important;padding:18px 0 0!important}
  .cap-grid{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .ftr .cols{grid-template-columns:1fr 1fr;gap:28px}
}