/* 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}
/* A section whose points need their own headings takes the page's own rhythm
   one level down: heading in the narrow column, prose in the wide one, the
   same grid. That keeps it reading as a continuation of the page rather than
   a component sitting on top of it, and needs no card, rule or icon to do it.
   Spacing carries the grouping instead: 60px and a hairline between sections,
   40px bare between the rows inside one. */
.page h3{font-size:1.125rem;font-weight:500;letter-spacing:-.015em;
  line-height:1.32;color:var(--on-dark)}
.sub-rows{margin-top:48px}
.sub-rows > .cols + .cols{margin-top:40px}
/* Stacked, the row's own 44px gap would leave each heading floating almost
   equidistant between the paragraph above it and the one it belongs to. Bind
   it to its own prose and let the row spacing do the separating. The major
   sections keep the wider gap, which is correct for a heading that size. */
@media(max-width:899px){.sub-rows > .cols{gap:14px}}

/* About is a reading composition, not a full bleed layout.
   The generic .cols is 5fr/7fr, sized for a heading that fills its column. The
   subsection labels only occupy 158 to 303px of it, and .pad has no max width,
   so the rail grew with the viewport and opened a void between each label and
   the sentence it labels: 295 to 440px at 1440, up to 639px at 1920, with a
   second 400px dead zone right of the 34rem copy measure.
   Fix the label column to the longest label, hold the copy at its measure, and
   centre the pair so the section reads as one object at any width.
   Scoped to .page-editorial: /contact puts a heading AND copy in its left
   column and would be wrong with a label sized one. */
@media(min-width:900px){
  .page-editorial > .pad{max-width:calc(58rem + var(--gutter)*2);margin-inline:auto}
  .page-editorial .cols{grid-template-columns:minmax(0,19rem) minmax(0,34rem);
    gap:clamp(40px,3vw,56px)}
}
/* "Why Stadion Ai." opens the page as the company thesis rather than sitting
   below the first rule as one more section. Single column on purpose: a two
   column opening would recreate the desktop void the rules above remove. */
.thesis{margin-top:clamp(46px,5vw,74px)}

/* The thesis outranks body copy by scale, ink and measure, not by a box.
   About 1.4x body size, primary ink instead of secondary, and a wider measure
   so the larger type still sets roughly 56 characters to the line. */
.page-editorial .thesis p{margin-top:20px;max-width:38rem;
  font-size:clamp(1.25rem,1.85vw,1.5rem);line-height:1.48;
  letter-spacing:-.012em;color:var(--on-dark)}

/* The rule now follows the thesis, so the five reasons read as its supporting
   proof and no longer need their own top margin. */
.page-editorial .sub-rows{margin-top:0}

/* Arriving from the homepage CTA, the section landed flush against the top edge. */
#why-stadion-ai{scroll-margin-top:64px}

/* ── 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)}