/* ============================================================================
   ISE&S and DMS: the two organisation cards, the line that states
   their tie, the safeguards row and the footer credit. Loaded by the landing,
   about and security pages.

   The partner logos are the only colours outside the plum family on the site,
   so they appear in one place on each page, on white, in their own colours.
   ========================================================================== */

.orgs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.org-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: 26px 26px 24px;
}
/* One logo box height for both, so the names below line up. The ISE&S lockup
   is stacked, with its name in small grey type, and the DMS wordmark is wide
   and dark, so each gets the height at which the two look the same size. */
.org-logo { display: inline-flex; align-items: center; align-self: flex-start; height: 84px; margin-bottom: 18px; border-radius: 4px; }
.org-logo img { display: block; width: auto; }
.org-logo .logo-ises { height: 84px; }
.org-logo .logo-dms { height: 46px; }
.org-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 12px; color: var(--text-primary); }
.org-card p { font-size: 14.5px; line-height: 1.72; color: var(--text-secondary); margin: 0 0 12px; max-width: none; }
.org-card p:last-of-type { margin-bottom: 18px; }
.org-card p a, .org-tie a { color: var(--primary-700); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--primary-300); }
.org-card p a:hover, .org-tie a:hover { color: var(--primary-500); text-decoration-color: currentColor; }
.org-link { margin-top: auto; align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--primary-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--primary-300); }
.org-link:hover { color: var(--primary-500); text-decoration-color: currentColor; }

.org-tie { font-size: 14.5px; line-height: 1.72; color: var(--text-secondary); max-width: 72ch; margin: 22px 0 0; }
.org-tie b { color: var(--text-primary); font-weight: 600; }

/* The safeguards: one sentence each, the brand's square plum bar above each. */
.body .safe-head { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 48px 0 18px; color: var(--text-primary); }
.safeguards {
  list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--border-color);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
}
.safeguards li { font-size: 14px; line-height: 1.65; color: var(--text-secondary); }
.safeguards li::before { content: ""; display: block; width: 20px; height: 4px; margin-bottom: 12px; background: var(--primary-500); }
.safe-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 26px; }
.safe-more { display: inline-block; font-size: 14.5px; font-weight: 600; color: var(--primary-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--primary-300); }
.safe-more:hover { color: var(--primary-500); text-decoration-color: currentColor; }

/* The footer credit line. */
.foot-credit { font-size: 12.5px; color: var(--gray-500); }
.foot-credit a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--gray-300); }
.foot-credit a:hover { color: var(--primary-700); text-decoration-color: currentColor; }

@media (max-width: 1000px) {
  .safeguards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
}
@media (max-width: 760px) {
  .orgs { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .org-card { padding: 22px 20px 20px; }
  .org-logo { height: 72px; }
  .org-logo .logo-ises { height: 72px; }
  .org-logo .logo-dms { height: 40px; }
  .safeguards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}