/* ============================================================
 * EntityX — Warm Lab
 * Base resets + responsive utility classes
 * Breakpoints: phone <=640, tablet 641-960, desktop >=961
 * ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Space Grotesk', sans-serif; -webkit-font-smoothing: antialiased; background: #f5f3ee; color: #0a0a0a; }
a { color: inherit; }
::selection { background: #f0e500; color: #0a0a0a; }
/* Anchored sections clear the 80px sticky nav when jumped to. */
section[id] { scroll-margin-top: 80px; }

/* ----------------------------------------------------------
 * Section padding — desktop default 128px/40px, scaled down
 * Override inline padding-top / padding-bottom where rhythm needs it.
 * ---------------------------------------------------------- */
.ex-section { padding: 128px 40px; }
@media (max-width: 960px) { .ex-section { padding: 96px 32px; } }
@media (max-width: 640px) { .ex-section { padding: 64px 20px; } }

/* Tighter variant for nav-adjacent / footer sections */
.ex-section-tight { padding: 88px 40px; }
@media (max-width: 960px) { .ex-section-tight { padding: 72px 32px; } }
@media (max-width: 640px) { .ex-section-tight { padding: 56px 20px; } }

/* Horizontal padding helper — preserves inline vertical padding via inline style */
.ex-x-pad { padding-left: 40px; padding-right: 40px; }
@media (max-width: 960px) { .ex-x-pad { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 640px) { .ex-x-pad { padding-left: 20px; padding-right: 20px; } }

/* Inner-band wrappers (within a section that has its own background, no .ex-section) */
.ex-band { padding: 96px 40px; }
@media (max-width: 960px) { .ex-band { padding: 80px 32px; } }
@media (max-width: 640px) { .ex-band { padding: 56px 20px; } }

.ex-band-tight { padding: 88px 40px; }
@media (max-width: 960px) { .ex-band-tight { padding: 72px 32px; } }
@media (max-width: 640px) { .ex-band-tight { padding: 48px 20px; } }

/* ----------------------------------------------------------
 * Layout grids — stack on phone, partial on tablet
 * Each class sets gridTemplateColumns; everything else (gap,
 * alignItems, etc.) stays inline to preserve design intent.
 * ---------------------------------------------------------- */
.ex-grid { display: grid; }

/* Hero: asymmetric copy/viz pair */
.ex-grid-hero { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.1fr); }
@media (max-width: 960px) { .ex-grid-hero { grid-template-columns: 1fr; } }

/* 2-col equal */
.ex-grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .ex-grid-2 { grid-template-columns: 1fr; } }

/* 2-col asymmetric (1.4fr/1fr - products feature card) */
.ex-grid-2-asym { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 640px) { .ex-grid-2-asym { grid-template-columns: 1fr; } }

/* 2-col evidence (1.7fr/1fr - pull quote + logos) */
.ex-grid-2-quote { grid-template-columns: 1.7fr 1fr; }
@media (max-width: 960px) { .ex-grid-2-quote { grid-template-columns: 1fr; } }

/* 3-col equal — stays 3 at tablet (2x2 strands an odd item) then stacks at phone */
.ex-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .ex-grid-3 { grid-template-columns: 1fr; } }

/* 4-col equal */
.ex-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .ex-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ex-grid-4 { grid-template-columns: 1fr; } }

/* Stat tile inside a multi-col stat row — kills vertical separator and adds
   a horizontal rule between stacked tiles on phone. */
@media (max-width: 640px) {
  .ex-stat-tile { border-right: none !important; padding: 18px 0 !important; }
  .ex-stat-tile + .ex-stat-tile { border-top: 1px solid rgba(10, 10, 10, 0.08); }
}

/* Quote + kicker (1fr auto → stacked); right column left-aligns on phone */
.ex-grid-quote-kicker { grid-template-columns: 1fr auto; }
@media (max-width: 640px) {
  .ex-grid-quote-kicker { grid-template-columns: 1fr; gap: 20px !important; }
  .ex-grid-quote-kicker > :last-child { text-align: left !important; }
}

/* Footer: 2fr 1fr 1fr 1fr → 1fr 1fr → 1fr */
.ex-grid-footer { grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 960px) { .ex-grid-footer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ex-grid-footer { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------
 * Navigation — hamburger on phone
 * ---------------------------------------------------------- */
.ex-nav-toggle { display: none; }
.ex-nav-links { display: flex; align-items: center; gap: 32px; }

@media (max-width: 640px) {
  .ex-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: none; background: transparent;
    color: #0a0a0a; cursor: pointer; padding: 0;
  }
  .ex-nav-links {
    position: absolute; top: 80px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    /* Closed state: zero visual footprint — no background/border/padding so
       the bar below isn't covered by a 29px-tall ghost rectangle. */
    background: transparent;
    border-bottom: none;
    padding: 0 20px;
    max-height: 0; overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  }
  .ex-nav-links.ex-nav-open {
    max-height: 480px;
    padding: 8px 20px 20px;
    background: rgba(245,243,238,0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(10,10,10,0.08);
  }
  .ex-nav-links a {
    padding: 14px 4px;
    border-bottom: 1px solid rgba(10,10,10,0.06);
    font-size: 15px;
  }
  .ex-nav-links a:last-child { border-bottom: none; margin-top: 12px; justify-content: center; }
}

/* ----------------------------------------------------------
 * Diagram animations (mobile variants of NetworkGraphViz etc.)
 * ---------------------------------------------------------- */
@keyframes ex-pop {
  0% { transform: scale(0.96); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes ex-fall {
  0% { transform: translateY(-6px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(34px); opacity: 0; }
}

/* ----------------------------------------------------------
 * Utility: hide on phone / show only on phone
 * ---------------------------------------------------------- */
.ex-hide-phone { }
@media (max-width: 640px) { .ex-hide-phone { display: none !important; } }

.ex-only-phone { display: none; }
@media (max-width: 640px) { .ex-only-phone { display: block; } }