/* Convergence Group — static site shared styles
   Loading screen · responsive grid system · hamburger nav · scroll reveal
   Plain CSS, no build step. Safe to edit by hand. */

/* GLOBAL ANCHOR RESET
   Never let an anchor fall back to the browser-default blue/underline.
   `inherit` adapts to context (dark text on paper, light text in the
   footer); every styled button/nav link still sets its own colour inline. */
a, a:link, a:visited { color: inherit; text-decoration: none; }

/* CRITICAL BASE — lives in head (this file loads independently of the
   runtime), so layout + box model are correct even if support.js stalls. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #FAFAF8; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; -webkit-font-smoothing: antialiased; }


/* ---------------------------------------------------------------- *
 * 1. BRANDED LOADING SCREEN
 * ---------------------------------------------------------------- */
#cv-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: #0B0B0C;
  transition: opacity .55s ease;
}
#cv-loader.cv-loader-hide { opacity: 0; pointer-events: none; }
#cv-loader .cv-loader-mark {
  width: 58px;
  height: 58px;
  animation: cvLoaderPulse 1.9s ease-in-out infinite;
}
#cv-loader .cv-loader-mark svg { width: 100%; height: 100%; display: block; }
#cv-loader .cv-loader-text {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #C8C8C5;
}
@keyframes cvLoaderPulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%      { opacity: .38; transform: scale(.965); }
}
@media (prefers-reduced-motion: reduce) {
  #cv-loader .cv-loader-mark { animation: none; }
}

/* ---------------------------------------------------------------- *
 * 2. HAMBURGER NAV
 * ---------------------------------------------------------------- */
.cv-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  margin-left: 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex: 0 0 auto;
}
.cv-burger span {
  display: block;
  width: 22px;
  height: 1.6px;
  margin: 0 auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
nav.cv-nav-open .cv-burger span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
nav.cv-nav-open .cv-burger span:nth-child(2) { opacity: 0; }
nav.cv-nav-open .cv-burger span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* scrim behind the mobile drawer */
.cv-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(11,11,12,0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.cv-nav-scrim.cv-show { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------- *
 * 3. SCROLL REVEAL (progressive enhancement — content is visible
 *    by default; JS adds the hidden start state only when enabled)
 * ---------------------------------------------------------------- */
.cv-js [data-reveal].cv-pre {
  opacity: 0;
  transform: translateY(16px);
}
[data-reveal] {
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}

/* ================================================================ *
 * 4. RESPONSIVE GRID SYSTEM
 *
 *    One coherent, MONOTONIC ladder — a narrower screen never shows
 *    more columns than a wider one. Two families of grid:
 *      • dense small-cell grids (chips, logos, model/agent tiles) keep
 *        a few columns so they don't become an endless single stack;
 *      • rich card grids (division tiers, member cards, audience doors,
 *        2-col content splits) drop to one column for legibility.
 *
 *    Note: the runtime re-serialises inline grid styles WITH a space —
 *    "repeat(3, 1fr)" — so the [style*=…] selectors match that format.
 *
 *      ladder        ≥1024   768–1023   ≤767   ≤440
 *      repeat(6/5)      6        3         3      2
 *      repeat(4)        4        2         2      2
 *      minmax(logos)  auto       2         2      2
 *      doors            n        2         1      1
 *      repeat(3/2)/rich n        n         1      1
 * ---------------------------------------------------------------- */

/* ---- Tablet (768–1023) ---- */
@media (max-width: 1023px) {
  [style*="repeat(6, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-grid="doors"]       { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- Mobile (≤767) ---- */
@media (max-width: 767px) {
  /* drawer nav */
  .cv-burger { display: flex; }

  nav .cv-navlinks {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(82vw, 320px);
    z-index: 60;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 92px 30px 40px !important;
    background: #0B0B0C;
    box-shadow: -24px 0 60px rgba(11,11,12,0.5);
    transform: translateX(105%);
    transition: transform .42s cubic-bezier(.16,1,.3,1);
    overflow-y: auto;
  }
  nav.cv-nav-open .cv-navlinks { transform: translateX(0); }

  nav .cv-navlinks > a,
  nav .cv-navlinks > * {
    color: #FAFAF8 !important;
    font-size: 15px !important;
    letter-spacing: 0.12em !important;
    padding: 12px 0 !important;
    width: 100%;
  }
  nav.cv-nav-open .cv-burger { color: #FAFAF8 !important; position: relative; z-index: 61; }

  /* dense small-cell grids degrade gracefully (never to 1) */
  [style*="repeat(6, 1fr)"],
  [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* auto-fit / minmax logo + partner grids → 2-up */
  [style*="minmax(150px"],
  [style*="minmax(160px"],
  [style*="minmax(180px"],
  [style*="minmax(200px"],
  [style*="minmax(220px"],
  [style*="minmax(240px"],
  [style*="minmax(260px"],
  [style*="minmax(280px"],
  [style*="minmax(300px"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* rich content grids → single column */
  [style*="repeat(3, 1fr)"],
  [style*="repeat(2, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="1.1fr 0.9fr"],
  [data-grid="doors"],
  [data-grid="formfields"],
  [data-grid="team"],
  [data-grid="tiers"] { grid-template-columns: 1fr !important; }

  /* let grid cells shrink so nothing clips past the right edge */
  [style*="display:grid"]  > *,
  [style*="display: grid"] > * { min-width: 0; }

  /* section padding + stacked footer rows */
  section, header, footer { padding-left: 20px !important; padding-right: 20px !important; }
  footer [style*="space-between"] { flex-direction: column !important; align-items: flex-start !important; }

  /* no horizontal overflow */
  html, body { overflow-x: hidden; max-width: 100vw; }
}

/* ---- Very small phones (≤440) ---- */
@media (max-width: 440px) {
  [style*="repeat(6, 1fr)"],
  [style*="repeat(5, 1fr)"],
  [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- Narrow drawer (≤380) ---- */
@media (max-width: 380px) {
  nav .cv-navlinks { width: 86vw; }
}