.company-page { --site-bg: #ecece6; --site-accent: #0868ff; background: var(--site-bg); }

.company-hero {
  position: relative;
  min-height: 100svh;
  padding: 130px var(--site-pad) 70px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid #0a0a0a;
}
.company-hero-meta {
  position: absolute;
  top: 100px;
  right: var(--site-pad);
  left: var(--site-pad);
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
}
.company-hero-copy { position: relative; z-index: 3; width: min(970px, 78%); }
.company-hero h1 {
  margin: 24px 0 0;
  font-family: var(--font-display);
  font-size: 108px;
  font-weight: 760;
  line-height: .87;
}
.company-hero-copy > p:last-child { max-width: 660px; margin: 35px 0 0; color: var(--site-muted); font-size: 18px; line-height: 1.8; }
.company-signal {
  position: absolute;
  right: var(--site-pad);
  bottom: 50px;
  display: grid;
  color: rgba(10,10,10,.09);
  font-family: var(--font-display);
  font-size: 190px;
  font-weight: 760;
  line-height: .56;
  transform: rotate(-4deg);
}

.company-ledger,
.company-products,
.company-principles {
  padding: 110px var(--site-pad);
  display: grid;
  grid-template-columns: minmax(280px, .65fr) minmax(0, 1.35fr);
  gap: 8%;
  border-bottom: 1px solid #0a0a0a;
}
.company-ledger header,
.company-products header { position: sticky; top: 120px; align-self: start; }
.company-ledger h2,
.company-products h2,
.company-principles h2 {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: 55px;
  font-weight: 740;
  line-height: .94;
}
.company-table { margin: 0; border-top: 1px solid #0a0a0a; }
.company-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; padding: 21px 0; border-bottom: 1px solid var(--site-line); }
.company-row dt { color: var(--site-muted); font-size: 13px; font-weight: 650; }
.company-row dd { margin: 0; font-size: 15px; font-weight: 590; overflow-wrap: anywhere; }
.company-row a { text-decoration: underline; text-underline-offset: 4px; }

.company-products { color: #f3f3ef; background: #0a0a0a; }
.company-product-list { border-top: 1px solid rgba(255,255,255,.72); }
.company-product {
  display: grid;
  grid-template-columns: 45px 190px 1fr auto;
  gap: 22px;
  align-items: center;
  min-height: 124px;
  border-bottom: 1px solid rgba(255,255,255,.24);
  transition: color .25s ease, background .25s ease, padding .3s var(--site-ease);
}
.company-product:hover { padding-inline: 16px; color: #0a0a0a; background: #f3f3ef; }
.company-product > span { font-family: ui-monospace, monospace; font-size: 10px; }
.company-product strong { font-family: var(--font-display); font-size: 22px; }
.company-product p { margin: 0; color: currentColor; font-size: 13px; line-height: 1.65; opacity: .68; }
.company-product em { font-size: 12px; font-style: normal; white-space: nowrap; }

.company-principles { background: #dce8e2; }
.company-principle-list { border-top: 1px solid #0a0a0a; }
.company-principle-list article { display: grid; grid-template-columns: 48px 200px 1fr; gap: 22px; padding: 24px 0; border-bottom: 1px solid rgba(10,10,10,.24); }
.company-principle-list span { font-family: ui-monospace, monospace; font-size: 10px; }
.company-principle-list h3 { margin: 0; font-size: 16px; }
.company-principle-list p { margin: 0; color: #42554e; font-size: 14px; line-height: 1.75; }

.company-contact {
  min-height: 86svh;
  padding: 112px var(--site-pad) 76px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #f4f4ef;
  background: #0868ff;
}
.company-contact h2 { margin: 24px 0 0; font-family: var(--font-display); font-size: 104px; font-weight: 760; line-height: .86; }
.company-contact-actions { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 30px; }
.company-contact-actions a,
.company-contact-actions button {
  min-height: 36px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 720;
  cursor: pointer;
}
.company-contact-actions a:hover,
.company-contact-actions button:hover { opacity: .52; }

@media (max-width: 980px) {
  .company-hero h1 { font-size: 80px; }
  .company-signal { font-size: 150px; }
  .company-ledger,
  .company-products,
  .company-principles { grid-template-columns: 1fr; gap: 58px; }
  .company-ledger header,
  .company-products header { position: static; }
  .company-product { grid-template-columns: 36px 170px 1fr auto; }
  .company-contact h2 { font-size: 80px; }
}

@media (max-width: 650px) {
  .company-hero { min-height: 820px; padding: 110px 18px 58px; }
  .company-hero-meta { top: 82px; right: 18px; left: 18px; }
  .company-hero-copy { width: 100%; }
  .company-hero h1 { font-size: 49px; }
  .company-hero-copy > p:last-child { font-size: 15px; }
  .company-signal { right: 12px; bottom: 310px; font-size: 106px; }
  .company-ledger,
  .company-products,
  .company-principles { padding: 82px 18px; }
  .company-ledger h2,
  .company-products h2,
  .company-principles h2 { font-size: 43px; }
  .company-row { grid-template-columns: 1fr; gap: 5px; }
  .company-product { grid-template-columns: 30px 1fr; gap: 8px 14px; padding: 18px 0; }
  .company-product p,
  .company-product em { grid-column: 2; }
  .company-product:hover { padding-inline: 10px; }
  .company-principle-list article { grid-template-columns: 30px 1fr; gap: 8px 14px; }
  .company-principle-list p { grid-column: 2; }
  .company-contact { min-height: 680px; padding: 92px 18px 62px; }
  .company-contact h2 { font-size: 58px; }
  .company-contact-actions { display: grid; }
}
