/* ============================================================
   AAXO — shared design system
   Tokens, navigation, footer, base typography.
   Page-specific CSS stays inline in each page.
   ============================================================ */

/* Dark only. The light palette and the prefers-color-scheme / data-theme
   switches were removed - the site no longer follows the OS setting.
   color-scheme tells the browser to render form controls, scrollbars and the
   like dark too, which tokens alone cannot do. */
:root{
  color-scheme:dark;
  --ground:#0C0C0C; --ground2:#0C0C0C; --surface:#25282C; --pad:#111A20;
  --line:#31424D; --linesoft:#233039; --shadow:rgba(0,0,0,.42);
  --ink:#DEE7EB; --dim:#8296A1; --faint:#586B76;
  --accent:#007AD2; --on-accent:#FFFFFF; --steel:#6BA6C6;
  --panel:#25282C; --panelline:#2A3841;
  --nav-bg:#25282C; --nav-ink:#DEE7EB; --nav-dim:#8296A1; --nav-edge:#2C3B45;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

/* ---------- floating nav ---------- */
.nav{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:60;
  display:flex; align-items:center; gap:4px;
  padding:7px 7px 7px 16px; border-radius:16px;
  background:var(--nav-bg); border:0;
  box-shadow:0 6px 26px rgba(8,16,20,.22);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  max-width:calc(100vw - 20px);
}
.nav-brand{
  display:flex; align-items:center; gap:9px; margin-right:14px;
  text-decoration:none; color:var(--nav-ink);
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 112,"wght" 700;
  font-size:14.5px; letter-spacing:.13em; text-transform:uppercase;
}
.nav-brand svg{display:block; flex:0 0 auto}
.nav-links{display:flex; align-items:center; gap:2px}
.nav-links a{
  display:block; padding:8px 13px; border-radius:9px; text-decoration:none;
  color:var(--nav-dim); font-size:13.5px; line-height:1;
  transition:color .18s ease, background-color .18s ease;
}
.nav-links a:hover{color:var(--nav-ink); background:rgba(255,255,255,.07)}
.nav-links a.is-active{color:var(--nav-ink)}
.nav-cta{
  margin-left:12px; padding:9px 15px; border-radius:10px; text-decoration:none;
  background:var(--accent); color:var(--on-accent);
  font-size:13.5px; font-weight:600; line-height:1; white-space:nowrap;
  transition:filter .18s ease;
}
.nav-cta:hover{filter:brightness(1.12)}
@media (max-width:600px){
  .nav{padding-left:12px; gap:0}
  .nav-brand{margin-right:6px; font-size:0; gap:0}
  .nav-links a{padding:8px 9px; font-size:12.5px}
  .nav-cta{margin-left:6px; padding:9px 12px; font-size:12.5px}
}

/* ---------- shared page furniture ---------- */
.wrap{max-width:960px; margin:0 auto; padding:0 22px}
.page-hero{padding:clamp(112px,17vh,168px) 0 clamp(40px,6vh,64px)}
.page-hero h1{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 108,"wght" 750;
  /* the same clamp as the stage's own headings (.act3 h2), so the sub-pages
     open at the weight the home page's acts speak at. The measure goes with it:
     16ch was set against 64px and would wrap this to five or six lines at 40. */
  font-size:clamp(24px,3.6vw,40px); line-height:1.06; letter-spacing:-.015em;
  margin:0 0 18px; text-wrap:balance; max-width:24ch;
}
.page-hero p{margin:0; font-size:16.5px; line-height:1.6; color:var(--dim); max-width:52ch}
.page-hero p + p{margin-top:14px}
.kicker{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 14px;
}
.section{padding:clamp(38px,6vh,62px) 0; border-top:1px solid var(--linesoft)}
.section h2{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 106,"wght" 720;
  font-size:clamp(22px,3.2vw,30px); line-height:1.08; letter-spacing:-.015em; margin:0 0 10px;
}
.section > p{margin:0 0 26px; font-size:15px; line-height:1.65; color:var(--dim); max-width:62ch}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:1px;
  background:var(--linesoft); border:1px solid var(--linesoft)}
.cols > div{background:var(--ground); padding:20px}
.cols h3{font-family:Archivo,sans-serif; font-variation-settings:"wdth" 100,"wght" 650;
  font-size:15.5px; margin:0 0 8px}
.cols p{margin:0; font-size:13.5px; line-height:1.6; color:var(--dim)}
/* a statement block: heading left, prose right, and no rule of its own so it
   reads as part of what sits above it. Used on About (Mission) and Product. */
.mission{border-top:0}
.mgrid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,80px); align-items:start;
}
.mgrid h2{margin:0}
.mgrid > p{margin:0; font-size:16.5px; line-height:1.6; color:var(--dim)}
@media (max-width:700px){
  .mgrid{grid-template-columns:1fr; gap:14px}
}
.rows{border-top:1px solid var(--linesoft)}
.row{display:grid; grid-template-columns:auto 1fr; gap:0 20px; align-items:start;
  padding:18px 0; border-bottom:1px solid var(--linesoft)}
.row .n{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--faint); padding-top:3px}
.row h3{font-family:Archivo,sans-serif; font-variation-settings:"wdth" 100,"wght" 650;
  font-size:15px; margin:0 0 5px}
.row p{margin:0; font-size:13.5px; line-height:1.6; color:var(--dim); max-width:64ch}

.draft{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:22px;
  padding:5px 11px; border:1px dashed var(--line); border-radius:999px;
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim);
}
.draft::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent)}

.site-footer{
  border-top:1px solid var(--linesoft); margin-top:clamp(48px,8vh,84px);
  padding:clamp(40px,6vh,72px) 0 clamp(28px,4vh,44px); color:var(--dim);
}
.site-footer a{color:inherit; text-decoration:none}
.foot-top{
  display:grid; grid-template-columns:1.4fr auto auto auto;
  gap:clamp(24px,4vw,64px); align-items:start;
}
.foot-brand{display:block; color:var(--ink)}
.foot-nav,.foot-legal{display:flex; flex-direction:column}
.foot-nav a{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 100,"wght" 500;
  font-size:17px; line-height:1.9; color:var(--ink);
  transition:color .18s ease;
}
.foot-legal a{font-size:13.5px; line-height:2.05; color:var(--dim); transition:color .18s ease}
.foot-nav a:hover,.foot-legal a:hover,.foot-meta a:hover{color:var(--accent)}
.foot-cta{
  justify-self:end; padding:9px 16px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink); white-space:nowrap;
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; transition:border-color .18s ease, color .18s ease;
}
.foot-cta:hover{border-color:var(--accent); color:var(--accent)}

.foot-bottom{
  display:grid; grid-template-columns:1fr auto; align-items:end;
  gap:clamp(20px,4vw,48px); margin-top:clamp(40px,7vh,84px);
}
.foot-sub .lbl{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin:0 0 12px;
}
.foot-sub-row{display:flex; gap:10px; flex-wrap:wrap}
.foot-sub input{
  font:inherit; font-size:14px; color:var(--ink); background:transparent;
  border:1px solid var(--linesoft); border-radius:999px; padding:11px 18px; min-width:210px;
}
.foot-sub input::placeholder{color:var(--faint)}
.foot-sub input:focus{outline:none; border-color:var(--accent)}
.foot-sub button{
  font:inherit; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  background:var(--ink); color:var(--ground); border:0; border-radius:999px;
  padding:11px 24px; cursor:pointer; transition:filter .18s ease;
}
.foot-sub button:hover{filter:brightness(1.15)}
.foot-social{
  justify-self:center; display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%; color:var(--dim);
  transition:color .18s ease, background-color .18s ease;
}
.foot-social:hover{color:var(--ink)}
.foot-meta{
  justify-self:end; margin:0; display:flex; gap:clamp(14px,2vw,30px); flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
}
@media (max-width:860px){
  .foot-top{grid-template-columns:1fr 1fr; gap:32px}
  .foot-brand{grid-column:1 / -1}
  .foot-cta{justify-self:start}
  .foot-bottom{grid-template-columns:1fr; align-items:start; gap:28px}
  .foot-social{justify-self:start}
  .foot-meta{justify-self:start}
}

/* ---------- talk to our team ---------- */
.talk{padding:clamp(112px,17vh,168px) 22px clamp(56px,9vh,110px)}
.talk-grid{display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:clamp(32px,6vw,88px); align-items:start}
.talk h1{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 104,"wght" 720;
  /* matched to the stage's own headings - .act3 h2 - so the contact block does
     not out-shout the act that hands into it */
  font-size:clamp(24px,3.6vw,40px); line-height:1.02; letter-spacing:-.025em; margin:0 0 16px;
}
.talk-lede{margin:0 0 clamp(32px,5vh,56px); font-size:16px; line-height:1.6; color:var(--dim); max-width:40ch}
.lbl{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin:0 0 18px;
}
.steps{margin:0 0 clamp(36px,6vh,64px); padding:0; list-style:none; display:flex; flex-direction:column; gap:22px}
.steps li{display:grid; grid-template-columns:22px 1fr; gap:0 14px}
.steps svg{grid-row:1 / span 2; width:18px; height:18px; margin-top:2px; color:var(--accent)}
.steps h3{font-family:"IBM Plex Sans",sans-serif; font-weight:600; font-size:15px; margin:0 0 4px; color:var(--ink)}
.steps p{margin:0; font-size:13.5px; line-height:1.55; color:var(--dim); max-width:42ch}
.logos{display:flex; flex-wrap:wrap; gap:12px}
.logos span{
  height:34px; padding:0 16px; border:1px solid var(--linesoft); border-radius:6px;
  display:grid; place-items:center; background:var(--surface);
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); white-space:nowrap;
}

.tform{
  background:var(--surface); border:1px solid var(--linesoft);
  border-radius:clamp(18px,2.2vw,28px); padding:clamp(24px,3vw,40px);
  display:flex; flex-direction:column; gap:18px;
}
.tpair{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.tfield{display:flex; flex-direction:column; gap:8px}
.tfield > span{font-size:13px; font-weight:500; color:var(--ink)}
.tfield > span i{font-style:normal; color:var(--accent)}
.tfield > span em{
  font-style:normal; font-weight:400; color:var(--faint);
  font-size:11.5px; letter-spacing:.02em; margin-left:6px;
}
.tfield input,.tfield select,.tfield textarea{
  font:inherit; font-size:15px; color:var(--ink); background:var(--ground);
  border:1px solid var(--linesoft); border-radius:10px; padding:12px 14px; width:100%;
}
.tfield textarea{resize:vertical; min-height:118px}
.tfield input:focus,.tfield select:focus,.tfield textarea:focus{outline:none; border-color:var(--accent)}
.tfield input::placeholder,.tfield textarea::placeholder{color:var(--faint)}
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chips label{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  border:1px solid var(--linesoft); border-radius:999px; padding:9px 16px;
  font-size:13.5px; color:var(--dim); transition:border-color .18s ease, color .18s ease;
}
.chips input{
  appearance:none; -webkit-appearance:none; margin:0; width:15px; height:15px;
  border:1px solid var(--line); border-radius:5px; flex:0 0 15px;
  background-position:center; background-repeat:no-repeat; background-size:11px 11px;
}
.chips input:checked{
  border-color:var(--accent); background-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}
.chips label:has(input:checked){border-color:var(--accent); color:var(--ink)}
.chips label:hover{color:var(--ink)}
.hint{display:flex; align-items:flex-start; gap:9px; margin:0; font-size:12.5px; color:var(--faint)}
.hint svg{flex:0 0 14px; width:14px; height:14px; margin-top:2px}
.tform button{
  align-self:flex-start; font:inherit; font-size:13px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  background:var(--accent); color:var(--on-accent); border:0; border-radius:999px;
  padding:15px 32px; cursor:pointer;
}
.tform button:hover{filter:brightness(1.1)}
@media (max-width:880px){
  .talk-grid{grid-template-columns:1fr; gap:40px}
  .tpair{grid-template-columns:1fr}
}
/* the same block used inline on the home page sits closer to what precedes it */
.talk.is-inline{padding-top:clamp(14px,2.5vh,36px)}

@media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms !important} }


/* ---------- launch additions: forms, legal ---------- */
.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0}
.fstatus{margin:12px 0 0; font-size:13.5px; line-height:1.55; color:var(--dim)}
.fstatus.ok{color:var(--ink)}
.fstatus.err{color:var(--ink)}
.fstatus a{color:var(--accent)}
.foot-sub .fstatus{font-size:12.5px; margin-top:8px}

.legal .section h2{font-size:clamp(19px,2.4vw,23px)}
.legal .section h3{font-family:Archivo,sans-serif; font-variation-settings:"wdth" 100,"wght" 650; font-size:15px; margin:22px 0 6px}
.legal .section p,.legal .section li{font-size:14.5px; line-height:1.7; color:var(--dim); max-width:68ch}
.legal .section ul{margin:0 0 18px; padding-left:20px}
.legal .section li{margin:0 0 6px}
.legal a{color:var(--accent)}
.legal a:hover{text-decoration:underline}