/* About (mission-led), 29 Oct 2026. A company page that stands on its writing: the mission large on navy, how Altira
   contributes, the wider investigative uses, then a compact company line. Built on site.css tokens and type;
   page pieces use the am- prefix. */

/* the mission: the largest type on the site, on the navy band */
.am-hero{padding:clamp(76px,8.4vw,128px) 0 clamp(88px,9.6vw,144px)}
.am-hero .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.am-mission{grid-column:1/-1;margin:0;font-weight:500;font-size:clamp(44px,7.3vw,112px);line-height:.98;letter-spacing:-.034em;color:var(--navy-ink)}
.am-mission span{display:block}
.am-open{grid-column:7/-1;max-width:620px;margin:clamp(40px,4vw,60px) 0 0;font-size:21px;line-height:33px;letter-spacing:-.006em;color:var(--navy-ink-2)}

/* a heading on the left, the argument on the right */
.am-sec{padding-top:var(--sec)}
.am-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.am-split > h2{grid-column:1/6;max-width:12ch}
.am-body{grid-column:7/-1;padding-top:6px}
.am-state{margin:0;font-size:30px;line-height:39px;letter-spacing:-.016em;color:var(--ink)}
.am-two{margin-top:36px;padding-top:28px;border-top:1px solid var(--rule)}
.am-two p,.am-p{margin:0;max-width:62ch;font-size:18px;line-height:29px;color:var(--ink-2)}
.am-two p + p{margin-top:18px}
.am-two h3{margin:0 0 12px;font-size:21px;line-height:29px;font-weight:500;color:var(--ink)}
.am-lead{margin:0;font-size:22px;line-height:33px;letter-spacing:-.006em;color:var(--ink)}
.am-p{margin-top:28px;padding-top:28px;border-top:1px solid var(--rule)}

/* the longer-term ambition closes the section on navy */
.am-ambition{margin-top:var(--sec);padding:clamp(80px,8vw,120px) 0}
.am-ambition p{max-width:1000px;margin:0;font-size:clamp(25px,2.65vw,38px);line-height:1.3;letter-spacing:-.018em;color:var(--navy-ink)}

/* the company, in one line near the bottom */
.am-co{padding-top:clamp(72px,7vw,104px)}
.am-co-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:32px;align-items:baseline;padding-top:24px;border-top:1px solid var(--ink)}
.am-co-name{margin:0;font-weight:500;font-size:19px;line-height:26px;letter-spacing:-.008em}
.am-co-founder,.am-co-links{margin:0;font-size:15.5px;line-height:24px;color:var(--ink-2)}
.am-co-links{justify-self:end;white-space:nowrap}
.am-co a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--edge);text-underline-offset:3px}
.am-co a:hover{text-decoration-color:var(--ink)}
.am-close{padding-top:clamp(56px,6vw,88px)}
.am-close .cta h2{margin:0}

/* restrained motion: the mission rises in once; later sections ease in as they arrive. Still and reduced motion show everything. */
@media (prefers-reduced-motion:no-preference){
  .am-mission span,.am-open{animation:am-up .9s cubic-bezier(.2,.7,.2,1) both}
  .am-mission span + span{animation-delay:.1s}
  .am-open{animation-delay:.28s}
  .rv-on .am-rv{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .rv-on .am-rv:not(.in){opacity:0;transform:translateY(18px)}
}
@keyframes am-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.still .am-mission span,.still .am-open{animation:none}

@media (max-width:1180px){
  .am-split > h2{grid-column:1/7}
}
@media (max-width:1024px){
  .am-open{grid-column:1/-1}
  .am-split{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .am-split > h2,.am-body{grid-column:1/-1}
  .am-split > h2{max-width:18ch}
  .am-body{max-width:760px;padding-top:0}
  .am-co-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:10px}
  .am-co-name{grid-column:1/-1}
  .am-co-links{justify-self:start}
}
@media (max-width:600px){
  /* on phones the two lines would break unevenly; let the mission flow and balance instead */
  .am-mission{letter-spacing:-.03em;text-wrap:balance}
  .am-mission span{display:inline}
  .am-open{font-size:18px;line-height:28px}
  .am-state{font-size:24px;line-height:32px}
  .am-lead{font-size:19px;line-height:29px}
  .am-two{margin-top:28px;padding-top:22px}
  .am-two p,.am-p{font-size:17px;line-height:27px}
  .am-p{margin-top:22px;padding-top:22px}
  .am-co-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .am-co-links{white-space:normal}
}
@media (max-width:360px){
  .am-mission{font-size:37px}
}

/* v2 (29 Oct, Ryan's assertive direction): problem evidence, broader applications on navy */
.am-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:72px}
.am-stat{padding-top:22px;border-top:1px solid var(--ink)}
.am-stat b{display:block;font-weight:500;font-size:clamp(44px,4.6vw,68px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.am-stat p{margin:16px 0 0;max-width:34ch;font-size:16px;line-height:24px;color:var(--ink)}
.am-stat small{display:block;margin-top:10px;font-size:13px;line-height:19px;color:var(--ink-2)}
.am-stat small a{color:var(--ink-2);text-underline-offset:2px}
.am-body > p + p{margin-top:20px}
.am-body .am-p2{margin:0;font-size:18px;line-height:29px;color:var(--ink-2)}
.am-wide{margin-top:var(--sec);padding:clamp(88px,8.4vw,128px) 0}
.am-wide h2{max-width:18ch}
.am-wide-lead{max-width:640px;margin:22px 0 0;font-size:20px;line-height:31px;color:var(--navy-ink-2)}
.am-uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px;margin-top:64px}
.am-use{padding-top:20px;border-top:1px solid var(--navy-line)}
.am-use h3{margin:0;font-size:15px;line-height:20px;font-weight:600;letter-spacing:.01em;color:var(--navy-ink)}
.am-use p{margin:12px 0 0;max-width:32ch;font-size:21px;line-height:29px;letter-spacing:-.01em;color:var(--navy-ink)}
@media (max-width:1024px){
  .am-stats{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:48px}
  .am-uses{grid-template-columns:minmax(0,1fr)}
  .am-use p{max-width:62ch}
}
@media (max-width:600px){
  .am-uses{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:40px}
  .am-use p{font-size:19px;line-height:27px}
  .am-wide-lead{font-size:18px;line-height:28px}
}
/* Founder background and product origin occupy the widest column. */
.am-co-row.wide{grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr)}
.am-co-row.wide .am-co-founder{font-size:16px;line-height:25px;color:var(--ink);max-width:60ch}
.am-co-founder p{margin:0}
.am-co-founder p+p{margin-top:16px}
@media (max-width:1024px){.am-co-row.wide{grid-template-columns:minmax(0,1fr)}.am-co-row.wide .am-co-links{justify-self:start}}
