/* Company card (layout "company", /tag/iqusion/): illustration · role · facts.
   Built on the DESIGN SYSTEM 2026 tokens from site.css (specs/design-system-2026.md):
   one card surface, radius 20, sunken facts panel, slanted teal bar from the logo. */
.company-card {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr) minmax(0, .9fr);
    align-items: stretch;
    margin: 0 0 var(--ds-head-gap, 56px);
    border: 1px solid var(--ds-line, rgba(255, 255, 255, .08));
    border-radius: var(--ds-r-lg, 20px);
    background: var(--ds-surface);
    box-shadow: var(--ds-highlight);
    overflow: hidden;
    transition: border-color var(--ds-dur, .35s) ease;
}
.company-card:hover { border-color: var(--ds-line-accent, rgba(0, 201, 167, .34)); }

.company-card__media { margin: 0; padding: 18px 0 18px 18px; align-self: center; }
.company-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--ds-r-md, 12px);
}

.company-card__about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 28px 30px;
}
.company-card__about p {
    margin: 0;
    max-width: 640px;
    font-size: var(--ds-copy, 14.5px);
    line-height: 1.7;
    color: var(--text-dim, rgba(232, 240, 248, .7));
}
.company-card__about .company-card__lead {
    font-size: var(--ds-h3, 18px);
    line-height: 1.4;
    font-weight: 700;
    color: #fff;
    text-wrap: pretty;
}

.company-card__facts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 28px 26px;
    border-left: 1px solid var(--ds-line, rgba(255, 255, 255, .08));
    background: var(--ds-surface-sunken, rgba(5, 19, 27, .5));
}
.company-card__since {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--teal, #00c9a7);
}
.company-card__since span {
    display: block;
    margin-top: 6px;
    font-size: 44px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: #fff;
}
/* the slanted bar of the Intecracy logo, as under section headings */
.company-card__since span::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 14px;
    background: var(--teal, #00c9a7);
    clip-path: var(--ds-slant);
}
.company-card__facts dl { margin: 0; display: grid; gap: 8px; }
.company-card__facts dl div {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--ds-line, rgba(255, 255, 255, .08));
}
.company-card__facts dt {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-faint, rgba(232, 240, 248, .5));
}
.company-card__facts dd { margin: 0; font-size: 13px; line-height: 1.35; color: var(--text, #e8f0f8); white-space: nowrap; }
.company-card__facts a { color: var(--teal, #00c9a7); text-decoration: none; transition: color var(--ds-dur-fast, .15s) ease; }
.company-card__facts a:hover { color: #fff; }

@media (max-width: 1080px) {
    .company-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .company-card__facts {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        gap: 32px;
        border-left: 0;
        border-top: 1px solid var(--ds-line, rgba(255, 255, 255, .08));
    }
    .company-card__facts dl { flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
}
@media (max-width: 640px) {
    .company-card { grid-template-columns: 1fr; }
    .company-card__media { padding: 14px 14px 0; }
    .company-card__about { padding: 22px 20px; }
    .company-card__facts { flex-direction: column; align-items: stretch; gap: 18px; padding: 24px 20px; }
    .company-card__facts dl { grid-template-columns: 1fr; }
}