/* About-only layouts. Shared files own the production typography, navigation,
   buttons, footer, spacing tokens, and scroll reveals. */
body[data-page="about"] { --about-card-pad: clamp(24px, 2.8vw, 40px); }
body[data-page="about"]::before {
  background:
    linear-gradient(116deg, transparent 0 24%, rgba(143,179,204,.10) 24.06%, transparent 24.16%),
    linear-gradient(24deg, transparent 0 57%, rgba(143,179,204,.08) 57.06%, transparent 57.16%),
    linear-gradient(151deg, transparent 0 63%, rgba(143,179,204,.11) 63.06%, transparent 63.16%);
  opacity: .28;
}
body[data-page="about"] .about-hero {
  min-height: 100svh;
  padding-block: clamp(144px, 17vh, 192px) clamp(64px, 9vh, 104px);
}
body[data-page="about"] .hero-inner { max-width: 1120px; }
body[data-page="about"] .hero-copy { max-width: 790px; }
body[data-page="about"] .hero h1 { margin-block: var(--heading-space); line-height: .98; }
.about-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 820px;
  margin: calc(var(--content-space) + 16px) auto 0;
  border-block: 1px solid var(--surface-border);
}
.about-signal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(18px, 2vw, 28px) 12px;
  min-width: 0;
}
.about-signal + .about-signal { border-left: 1px solid var(--surface-border); }
.about-signal strong {
  color: var(--text);
  font: 700 var(--type-ui-title)/var(--leading-ui) var(--display);
  text-transform: uppercase;
}
.about-signal span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3em;
  max-width: 22ch;
  color: var(--para);
  font: 600 var(--type-caption)/var(--leading-caption) var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
}
body[data-page="about"] :is(.section, .consultation) { margin-block: 0; }
body[data-page="about"] :is(#specialist, #system) {
  background: #050607;
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
}
body[data-page="about"] :is(#model, .consultation) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.about-split {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: var(--content-space);
  align-items: start;
}
.about-copy { grid-area: 1 / 1; min-width: 0; }
.about-split-action { grid-area: 2 / 1; }
.market-board {
  grid-area: 1 / 2 / 3 / 3;
  min-width: 0;
  border: 1px solid var(--surface-border);
  background: var(--surface-glass);
}
.market-board-head, .market-row {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(16px, 2vw, 28px);
  padding: var(--about-card-pad);
}
.market-board-head {
  padding-block: 18px;
  color: var(--acc-2);
  font: 700 var(--type-meta)/1.5 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.market-row { border-top: 1px solid var(--surface-border); align-items: start; }
.market-row h3 {
  color: var(--text);
  font: 600 var(--type-ui-title)/var(--leading-ui) var(--display);
}
.market-row p, .principle-card p, .system-card p {
  color: var(--para);
  font-size: var(--small);
  line-height: var(--leading-body);
}
.about-heading { max-width: 980px; }
.principle-grid, .system-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--surface-border);
}
.principle-card, .system-card {
  min-width: 0;
  padding: var(--about-card-pad);
  background: #090c0f;
}
.principle-card { display: flex; flex-direction: column; }
.principle-index, .system-card-kicker {
  color: var(--acc-2);
  font: 700 var(--type-meta)/1.5 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.principle-card h3, .system-card h3 {
  margin-top: 16px;
  font: 600 var(--type-h3)/var(--leading-h3) var(--display);
  text-transform: uppercase;
  color: var(--text);
  text-wrap: balance;
}
.principle-card p, .system-card p { margin-top: 16px; max-width: 58ch; }
.system-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: background var(--surface-duration) var(--surface-ease);
}
.system-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.system-card-arrow {
  color: var(--acc-2);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform var(--surface-duration) var(--surface-ease);
}
.system-card:focus-visible { outline: 2px solid var(--acc-2); outline-offset: -3px; }
.system-card:focus-visible p { color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .system-card:hover { background: #10161b; }
  .system-card:hover p { color: var(--text); }
  .system-card:hover .system-card-arrow { transform: translate(3px, -3px); }
}
body[data-page="about"] .consultation-cta .section-title { margin-top: var(--heading-space); }
body[data-page="about"] .consultation-cta .section-copy { max-width: 62ch; }
body[data-page="about"] .consultation-cta .btn-primary { margin-top: var(--content-space); }
body[data-page="about"] .form-head { padding-right: 42px; }
body[data-page="about"] .field :is(input, select, textarea) { font-size: 1rem; }
body[data-page="about"] .field select option { color: var(--text); background: #090c0f; }
.about-contact-fallback { margin-top: var(--content-space); color: var(--para); }
.about-contact-fallback a { color: var(--acc-2); text-decoration: underline; }
html:not(.js) body[data-page="about"] .js-open-consultation { display: none; }
@media (max-width: 960px) {
  .about-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .about-copy, .market-board, .about-split-action { grid-area: auto; }
  .about-copy { max-width: 780px; }
}
@media (max-width: 720px) {
  body[data-page="about"] .about-hero {
    min-height: auto;
    padding-block: 128px var(--section-space);
  }
  body[data-page="about"] .hero h1 {
    font-size: var(--type-h1);
    line-height: var(--leading-h1);
  }
  .about-signal { padding: 18px 8px; }
  .about-signal strong { font-size: var(--type-ui-title); white-space: nowrap; }
  .about-signal span { min-height: 4.5em; font-size: var(--type-caption); letter-spacing: .025em; }
  .principle-grid, .system-grid { grid-template-columns: minmax(0, 1fr); }
  .market-board-head { display: none; }
  .market-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .market-row:first-of-type { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .system-card, .system-card-arrow { transition: none; }
  .system-card:hover .system-card-arrow { transform: none; }
}