/* Stadion Ai Systems - shared company chrome.
   Extracted from the approved homepage so the company pages cannot drift
   from it. The homepage keeps its own section styles inline. */

:root{
  --ink:#0E1012;          /* hero, signature, close, footer */
  --ink-2:#131619;        /* placeholder panels            */
  --paper:#F4F2EE;        /* the one light section          */

  --on-dark:#F2F1EE;
  --on-dark-2:#9BA2A9;
  --on-dark-3:#767D85;
  --on-light:#15181B;
  --on-light-2:#5B6167;

  --green:#3DBE8B;        /* on dark  */
  --green-l:#0A6E4E;      /* on paper */

  --face:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
  --calm:cubic-bezier(.33,1,.68,1);
  --ease:cubic-bezier(.4,0,.2,1);
  /* One fluid page rail governs every left and right edge on the page.
     Nothing is centred inside a fixed box; text measure is held locally
     instead, on the elements that actually carry text. */
  --gutter:clamp(28px,4.4vw,160px);
  /* the engine composition's own width, used to size the column beside it */
  --core-w:clamp(600px,42vw,1080px);
}

*,*::before,*::after{box-sizing:border-box}
button{font:inherit;color:inherit}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--on-dark);
  font-family:var(--face);font-size:1rem;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:2px}
.light :focus-visible{outline-color:var(--green-l)}

.pad{width:100%;padding-inline:var(--gutter)}

/* Wide-tracked label — DM Sans, never monospace. */
.eyebrow{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-3)}

.go{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:.9375rem;font-weight:500;color:var(--green);transition:gap 340ms var(--ease)}
.go:hover{gap:15px}
.light .go{color:var(--green-l)}

.light{background:var(--paper);color:var(--on-light)}

/* Photography. Cover-cropped, positioned on the subject. */
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ══ NAV — sits on the hero, no header box ══════════════════════════ */
.nav{position:absolute;top:0;left:0;right:0;z-index:30;height:72px;display:flex;
  align-items:center}
.nav-in{width:100%;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:40px}
.mark{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em;text-decoration:none;
  color:var(--on-dark)}
.mark span{font-weight:400;color:var(--on-dark-2)}
.nav-l{display:none;margin-left:auto;align-items:center;gap:34px}
@media(min-width:940px){.nav-l{display:flex}}
.nav-l a{font-size:.875rem;color:var(--on-dark-2);text-decoration:none;
  transition:color 240ms var(--ease)}
.nav-l a:hover{color:var(--on-dark)}
.nav-l a.talk{color:var(--green)}
.navtog{display:inline-flex;margin-left:auto;background:none;border:0;cursor:pointer;
  padding:8px;color:var(--on-dark)}
@media(min-width:940px){.navtog{display:none}}
.navmenu{display:none;position:absolute;top:72px;left:0;right:0;background:var(--ink);
  padding:4px var(--gutter) 18px}
.navmenu.open{display:block}
.navmenu a{display:block;padding:13px 0;font-size:.9375rem;color:var(--on-dark);
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08)}

/* ══ FOOTER ═══════════════════════════════════════════════════════ */
.foot{padding:0 0 46px}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.foot .name{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em;color:var(--on-dark)}
.foot .name span{font-weight:400;color:var(--on-dark-2)}
.foot a{font-size:.875rem;color:var(--on-dark-2);text-decoration:none;
  transition:color 240ms var(--ease)}
.foot a:hover{color:var(--on-dark)}
.foot .tagline{margin-left:auto;font-size:.6875rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-dark-3)}
@media(max-width:720px){.foot .tagline{margin-left:0;width:100%}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  /* one still frame each: no drift, no crossfade, never a blend */
  .shot{transform:none!important;transition:none!important}
  .hero-visual .shot.a,.geo .shot.g2{opacity:0!important}
  .hero-visual .shot.b,.geo .shot.g1{opacity:1!important}
}

/* ── Company page furniture (contact, about, products) ────────────────
   The homepage sizes its headings per section because each is composed.
   These are the shared sizes for the simpler pages. */
.page{padding:150px 0 130px;min-height:70vh}
@media(max-width:820px){.page{padding:120px 0 96px}}
.page h1{font-size:clamp(2.4rem,4.4vw,3.6rem);font-weight:500;letter-spacing:-.035em;
  line-height:1.06;max-width:16ch}
.page h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:500;letter-spacing:-.028em;
  line-height:1.14}
.page .lead{margin-top:26px;font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.55;
  color:var(--on-dark-2);max-width:34rem}
.page p{font-size:1.0625rem;line-height:1.65;color:var(--on-dark-2);max-width:34rem}
.page .go{margin-top:30px}
.rule-soft{height:1px;background:rgba(255,255,255,.1);margin:60px 0}
.cols{display:grid;gap:44px}
@media(min-width:900px){.cols{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,6vw,120px)}}
.stack-tight > * + *{margin-top:18px}

/* ── Form ────────────────────────────────────────────────────────────── */
.form{max-width:520px}
.field{display:block;margin-bottom:22px}
.field span{display:block;font-size:.8125rem;font-weight:500;letter-spacing:.04em;
  color:var(--on-dark-2);margin-bottom:9px}
.field input,.field textarea{width:100%;background:#15181B;color:var(--on-dark);
  border:1px solid rgba(255,255,255,.14);border-radius:3px;padding:13px 14px;
  font-family:var(--face);font-size:1rem;line-height:1.5;
  transition:border-color 220ms var(--ease)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--green)}
.field textarea{min-height:118px;resize:vertical}
.send{appearance:none;border:0;cursor:pointer;background:var(--on-dark);color:var(--ink);
  font-family:var(--face);font-weight:500;font-size:1rem;padding:14px 30px;border-radius:3px;
  transition:background 240ms var(--ease)}
.send:hover{background:#fff}
.direct{margin-top:30px;font-size:.9375rem;color:var(--on-dark-2)}
.direct a{color:var(--green)}

/* ── Product entry (products page) ───────────────────────────────────── */
.entry{padding:46px 0;border-top:1px solid rgba(255,255,255,.1)}
.entry h2{font-size:clamp(2rem,3.4vw,2.75rem);font-weight:500;letter-spacing:-.035em;
  line-height:1}
.entry .disc{margin-top:14px;font-size:clamp(1.0625rem,1.5vw,1.25rem);color:var(--on-dark)}
.entry p{margin-top:14px;max-width:31rem}
.note{margin-top:64px;padding-top:36px;border-top:1px solid rgba(255,255,255,.1);
  font-size:1.0625rem;line-height:1.6;color:var(--on-dark-2);max-width:34rem}

/* ── Long form reading (legal, support) ──────────────────────────────
   Comfortable measure, clear heading hierarchy, nothing decorative. */
.doc{padding:140px 0 120px}
@media(max-width:820px){.doc{padding:112px 0 88px}}
.doc-head{max-width:36rem}
.doc h1{font-size:clamp(2.1rem,3.4vw,3rem);font-weight:500;letter-spacing:-.032em;
  line-height:1.08}
.doc .meta{margin-top:14px;font-size:.9375rem;color:var(--on-dark-3)}
.doc-body{max-width:33rem;margin-top:56px}
.doc-body section{padding-top:40px}
.doc-body section:first-child{padding-top:0}
.doc-body h2{font-size:1.1875rem;font-weight:500;letter-spacing:-.012em;
  color:var(--on-dark);line-height:1.35}
.doc-body h3{font-size:1.0625rem;font-weight:500;color:var(--on-dark);margin-top:26px}
.doc-body p{margin-top:14px;font-size:1rem;line-height:1.72;color:var(--on-dark-2)}
.doc-body ul,.doc-body ol{margin-top:14px;padding-left:22px;color:var(--on-dark-2)}
.doc-body li{margin-top:9px;font-size:1rem;line-height:1.68}
.doc-body a{color:var(--green)}
.doc-body strong{color:var(--on-dark);font-weight:500}
.doc-body table{width:100%;border-collapse:collapse;margin-top:18px;font-size:.9375rem}
.doc-body th,.doc-body td{text-align:left;padding:10px 14px 10px 0;
  border-bottom:1px solid rgba(255,255,255,.1);color:var(--on-dark-2);vertical-align:top}
.doc-body th{color:var(--on-dark);font-weight:500}
.doc-foot{margin-top:72px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:14px 26px;font-size:.9375rem}
.doc-foot a{color:var(--on-dark-2);text-decoration:none}
.doc-foot a:hover{color:var(--on-dark)}