/* Company page (/company/) — page-specific styles only. Uses shared tokens from /style.css. */

.co-h1 { max-width: 15ch; }

/* Hero operating-model figure */
.roles { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-lg); }
.roles__list { display: grid; gap: var(--space-3); padding-block: var(--space-5); }
.roles__list li { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-4); align-items: start; background: var(--color-surface-2); border-radius: var(--radius-lg); padding: var(--space-4); position: relative; }
.roles__list li:nth-child(2) { box-shadow: inset 3px 0 0 var(--brand-purple); }
.roles__k { color: var(--color-primary); text-transform: uppercase; letter-spacing: .1em; padding-top: 2px; }
.roles__list p { display: grid; gap: 2px; }
.roles__list b { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.roles__list p span { font-size: var(--text-xs); color: var(--color-text-muted); }
.roles figcaption { color: var(--color-text-faint); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }

/* Inline links inside the principles list */
.checks .link { display: inline-block; margin-top: var(--space-2); }

/* Contact */
.contact { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--space-5); margin-top: var(--space-12); }
.contact .panel { display: grid; gap: var(--space-3); align-content: start; }
.contact__label { color: var(--color-text-faint); text-transform: uppercase; letter-spacing: .1em; }
.contact__email { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.02em; color: var(--color-primary); overflow-wrap: anywhere; }
.contact__email:hover { color: var(--color-primary-hover); }
.contact__main .link { justify-self: start; margin-top: var(--space-2); }
.contact__route { transition: border-color var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive); }
.contact__route h3 { margin-bottom: 0; color: var(--color-text); }
.contact__route:hover { border-color: var(--color-primary-line); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.contact__go { font-weight: 600; font-size: var(--text-sm); color: var(--color-primary); margin-top: var(--space-2); }
.co-legal { margin-top: var(--space-10); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }

@media (max-width: 960px) {
  .contact { grid-template-columns: 1fr 1fr; }
  .contact__main { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .contact { grid-template-columns: 1fr; }
  .roles__list li { grid-template-columns: 1fr; gap: var(--space-2); }
}