/* /company: the page-only parts. Everything shared (hero, section heads, team grid,
   press card, contact) comes from site.css. */

/* Network: the founding story beside the network map. */
.company-network {
  position: relative;
  z-index: 2;
}
.company-network__grid {
  display: grid;
  gap: 40px;
  align-items: center;
}
.company-network__text { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 1024px) {
  .company-network__grid { grid-template-columns: 430px minmax(0, 1fr); gap: 40px 56px; }
}

.company-map {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 12px + 2.6vw, 44px) clamp(18px, 8px + 2.2vw, 36px) clamp(20px, 14px + 1vw, 30px);
}
.company-map > .fx-glow {
  left: 50%;
  top: 40%;
  width: 700px;
  height: 460px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--glow), transparent);
  opacity: 0.7;
}
.company-map img { position: relative; width: 100%; height: auto; }
.company-map__legend {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  font-size: 13px;
  color: var(--text-3);
}
.company-map__key { display: inline-flex; align-items: center; gap: 8px; }
.company-map__count { font-size: 12px; letter-spacing: 0.06em; color: var(--text-soft); }

/* Members: the page's one change of key (.panel-ink), the proof. The panel stands
   --section-top below the network and carries its own inner padding (the same as the
   closing band's) in place of .section's top padding, so the quotes don't touch its edges. */
.company-members {
  margin-top: var(--section-top);
  padding-block: clamp(72px, 48px + 5vw, 120px);
}

/* Members: one large quote, two smaller ones, then the press card. */
.company-quotes { display: grid; gap: 16px; }
.company-quotes__side { display: grid; gap: 16px; }
@media (min-width: 1024px) {
  .company-quotes { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .company-quotes__side { grid-template-rows: 1fr 1fr; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .company-quotes__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.company-quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(24px, 18px + 1.2vw, 36px);
}
.company-quote blockquote {
  font-family: var(--font-serif);
  font-size: clamp(21px, 18.6px + 0.5vw, 24px);
  line-height: 1.3;
  color: var(--text-quote);
  text-wrap: pretty;
}
.company-quote__by { display: flex; flex-direction: column; gap: 3px; }
.company-quote__by .person__name { font-size: 15px; font-weight: 500; }
.company-quote--lead {
  overflow: hidden;
  gap: 36px;
  padding: clamp(28px, 16px + 2.6vw, 52px);
}
.company-quote--lead blockquote {
  font-size: clamp(28px, 20.7px + 1.34vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.company-quote--lead blockquote em { font-style: italic; color: var(--accent-2); }
.company-quote__mark {
  height: 50px;
  font-family: var(--font-serif);
  font-size: 120px;
  line-height: 0.6;
  color: var(--accent);
}
.company-quote--lead .company-quote__by {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.company-quote--lead .person__name { font-size: 15.5px; }
.company-quote--lead .person__org { font-size: 14px; }

.company-press { margin-top: 16px; }