/* =====================================================================
   Northaven — css/about.css
   Page-specific styles for about.html and about/*.html only.
   Shared tokens, reset, typography, nav, footer, cards, buttons, hero,
   about-stats, quote, cta, and reveal utilities all come from
   ../styles.css — this file adds ONLY what those pages need on top.
   Order: components -> sections -> media queries -> reduced-motion
   ===================================================================== */

/* ------------------------------------------------------- Page header */
/* Shared banner used at the top of about.html and every about/ subpage,
   in place of the full-height marketing hero on index.html. */
.page-header {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-9);
  padding-bottom: var(--space-7);
}
.page-header__glow {
  position: absolute;
  top: -200px; right: -140px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139,124,246,0.18), transparent);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.page-header__inner { position: relative; z-index: 1; }
.page-header__lead {
  margin-top: var(--space-5);
  font-size: 1.25rem; line-height: 1.55;
  color: var(--text-muted);
  max-width: 46ch;
}
.page-header h1 { margin-top: var(--space-3); }

/* -------------------------------------------------- Mini card (grid) */
/* Reused for the Values grid (about.html) and Benefits grid (careers.html) */
.mini-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mini-card { display: flex; flex-direction: column; }
.mini-card:hover {
  border-color: rgba(198,242,78,0.4);
  background: var(--surface-2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.mini-card__mark {
  position: relative;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  margin-bottom: var(--space-5); overflow: hidden;
}
.mini-card:hover .mini-card__mark { border-color: rgba(198,242,78,0.4); }
/* distinct CSS-drawn marks, palette only */
.mini-card__mark--1::before { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 4px; border: 3px solid var(--accent); }
.mini-card__mark--2::before { content: ""; position: absolute; left: 10px; top: 10px; width: 14px; height: 14px; border-radius: 3px; background: var(--accent-2); }
.mini-card__mark--2::after { content: ""; position: absolute; right: 9px; bottom: 9px; width: 14px; height: 14px; border-radius: 3px; border: 2px solid var(--accent); }
.mini-card__mark--3::before { content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 3px; background: var(--accent); }
.mini-card__mark--3::after { content: ""; position: absolute; inset: 0; margin: auto; width: 3px; height: 22px; background: var(--accent-2); }
.mini-card__mark--4::before { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius: 50%; }
.mini-card__title { margin-bottom: var(--space-2); }
.mini-card__body { color: var(--text-muted); flex: 1; }

/* --------------------------------------------------------- Explore */
/* Links out to the about/ subpages from about.html */
.explore__grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.explore-card { display: flex; flex-direction: column; }
.explore-card:hover {
  border-color: rgba(198,242,78,0.4);
  background: var(--surface-2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.explore-card__num { margin-bottom: var(--space-5); }
.explore-card__title { margin-bottom: var(--space-2); }
.explore-card__body { color: var(--text-muted); margin-bottom: var(--space-5); flex: 1; }
.explore-card .link-arrow { align-self: flex-start; }

/* -------------------------------------------------------- Pull quote */
.pull-quote { padding-top: 0; }
.pull-quote__grid { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }

/* -------------------------------------------------------- Team grid */
.team__grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.team-card { display: flex; flex-direction: column; align-items: flex-start; }
.team-card:hover {
  border-color: rgba(198,242,78,0.4);
  background: var(--surface-2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.team-card__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--bg); font-weight: 700; font-size: 1rem;
  margin-bottom: var(--space-5); flex-shrink: 0;
}
.team-card__avatar--1 { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.team-card__avatar--2 { background: linear-gradient(135deg, var(--accent-2), var(--accent-2-soft)); }
.team-card__avatar--3 { background: linear-gradient(135deg, var(--accent), var(--accent-press)); }
.team-card__avatar--4 { background: linear-gradient(135deg, var(--accent-press), var(--accent-2)); }
.team-card__avatar--5 { background: linear-gradient(135deg, var(--accent-2), var(--accent)); }
.team-card__name { color: var(--text); }
.team-card__role { margin-top: var(--space-1); color: var(--text-muted); font-size: 0.875rem; }
.team-card__bio { margin-top: var(--space-4); color: var(--text-muted); flex: 1; }

/* ----------------------------------------------------- Process list */
.process__list { display: flex; flex-direction: column; gap: var(--space-5); }
.process-step {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-6);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.process-step:hover {
  border-color: rgba(198,242,78,0.4);
  background: var(--surface-2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.process-step__num {
  font-family: var(--font-mono);
  font-size: 1.75rem; font-weight: 700; line-height: 1;
  color: var(--accent);
  min-width: 2ch;
}
.process-step__title { margin-bottom: var(--space-2); }
.process-step__body { color: var(--text-muted); max-width: 62ch; }

/* --------------------------------------------------------- Careers */
.culture__body { color: var(--text-muted); max-width: 62ch; margin-top: var(--space-4); }

.roles__list { display: flex; flex-direction: column; gap: var(--space-4); }
.role-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.role-card:hover {
  border-color: rgba(198,242,78,0.4);
  background: var(--surface-2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.role-card__title { color: var(--text); }
.role-card__meta { margin-top: var(--space-2); color: var(--text-muted); font-size: 0.875rem; }
.role-card__body { margin-top: var(--space-3); color: var(--text-muted); max-width: 52ch; }
.role-card__apply { flex-shrink: 0; }

/* ---------------------------------------------------------- Simple CTA */
/* A lighter-weight variant of .cta for pages that link out to the index
   contact form rather than embedding one. */
.cta--simple .cta__content { text-align: center; }
.cta__actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }

/* ====================================================================
   Responsive
   ==================================================================== */
@media (max-width: 559px) {
  .process-step { grid-template-columns: 1fr; gap: var(--space-3); }
  .process-step__num { font-size: 1.375rem; }
  .role-card { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mini-card:hover,
  .explore-card:hover,
  .team-card:hover,
  .process-step:hover,
  .role-card:hover {
    transform: none;
  }
}