/* About page: the company story, the two business lines, and the values grid.
   Achromatic per the design system's Colorless Chrome rule; structure comes
   from hairlines, not fills. */

/* ---------- the company story ---------- */
/* Ran beside the office photograph until that moved to the page hero. Prose
   alone now, so the only job left is holding it to a readable measure under a
   full-width heading row. */
.company__story {
  max-width: 44rem;
}

.company__story p + p {
  margin-top: 1.5rem;
}

/* ---------- the two business lines ---------- */
.lines {
  --company-accent: #1e4fb8; /* Stratos Blue, shifted to clear AA as text */
  display: grid;
  gap: 1.5rem;
}
.dark .lines {
  --company-accent: #7aa5f5; /* 5.6:1 on Carbon Black */
}
@media (min-width: 768px) {
  .lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.line {
  display: block;
  padding: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background: var(--color-card);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.line:hover {
  border-color: color-mix(in oklab, var(--company-accent) 40%, var(--color-border));
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
}
.line:focus-visible {
  outline: 2px solid var(--company-accent);
  outline-offset: 3px;
}

/* The stage label is the point of these panels: one is sellable now, one is not. */
.line__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-muted-foreground);
}
.line__status::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
}
.line--live .line__status { color: var(--company-accent); }
/* Only the live line's dot blinks — a recording indicator, on the one panel
   that describes something running right now. It fades rather than snaps: a
   hard on/off at this size reads as a rendering fault, not a signal. */
.line--live .line__status::before {
  animation: line-pulse 2s ease-in-out infinite;
}
@keyframes line-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.line__title {
  margin-top: 0.875rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-foreground);
}

.line__body {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-muted-foreground);
}

.line__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-foreground);
}
.line__link::after {
  content: "\2192";
  transition: transform 0.25s ease;
}
.line:hover .line__link::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .line,
  .line__link::after { transition-duration: 0.01ms; }
  .line:hover .line__link::after { transform: none; }
  /* The dot holds at full strength rather than blinking; the accent colour
     already carries the distinction on its own. */
  .line--live .line__status::before { animation: none; }
}

/* ---------- values ---------- */
.values {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.value {
  padding: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background: var(--color-card);
}

.value__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-foreground);
}

.value__body {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-muted-foreground);
}