/* ═══════════════════════════════════════════════════════════════════
 * ep-index.css — EnginuityPoint landing page
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Header: EP logo cluster inside the standard <nav> .logo slot ─── */
/* EP logo cluster inside the standard <nav> .logo slot */
#nav-brand.logo {
  display: flex !important;
  align-items: center;
  text-decoration: none;
  min-width: 220px;                      /* room for cluster + wordmark */
  height: auto;
  padding: 4px 0;
}
#nav-brand.logo .epi-nav__logo {
  display: flex;
  align-items: center;
  gap: 4px;
}
#nav-brand.logo .ep-cluster {
  transform: scale(0.42);
  transform-origin: left center;
  margin-right: -28px;                   /* pull cluster + wordmark tight */
  flex-shrink: 0;
}
#nav-brand.logo .ep-logo-wordmark {
  font-size: 22px;               /* larger than tab items for hierarchy */
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: currentColor;
}

/* Tab items in nav-links — slightly smaller than logo wordmark */
#nav-links > li.nav-item > a.nav-link {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}

/* ── Main ──────────────────────────────────────────────────────────── */
.epi-main { margin: 0; padding: 0; }

/* ── Standard split section (used by s01, s02, s03, s04) ───────────── */
.epi-section {
  padding: 96px 32px;
  position: relative;
}
.epi-section[data-variant="light"] { background: #ffffff; color: #0d1520; }
.epi-section[data-variant="dark"]  { background: #0d1520; color: #f0f2f5; }

.epi-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
}
.epi-section--reverse .epi-section__inner  { direction: rtl; }
.epi-section--reverse .epi-section__inner > * { direction: ltr; }

/* ── Text bits (left-aligned in all sections) ──────────────────────── */
.epi-section__text { text-align: left; }
.epi-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: #0066cc;
  margin: 0 0 20px 0; min-height: 1em;
}
.epi-section[data-variant="dark"] .epi-eyebrow { color: #6fb3ff; }
.epi-title {
  font-size: 42px; font-weight: 600; line-height: 1.15;
  letter-spacing: -0.02em; margin: 0 0 24px 0;
  color: inherit;
}
.epi-title--xl { font-size: 56px; }
.epi-body {
  font-size: 18px; line-height: 1.6; margin: 0 0 16px 0;
}
.epi-section[data-variant="light"] .epi-body { color: #3a4453; }
.epi-section[data-variant="dark"]  .epi-body { color: #dde3ec; }
.epi-section[data-variant="dark"]  .epi-title { color: #ffffff; }

.epi-cta {
  display: inline-block; margin-top: 20px;
  padding: 14px 28px;
  background: #0066cc; color: #fff !important;
  text-decoration: none; border-radius: 6px;
  font-size: 15px; font-weight: 600;
  transition: background 0.15s, transform 0.15s;
}
.epi-cta:hover { background: #0052a3; transform: translateX(2px); }
.epi-cta--emphasis { padding: 16px 32px; font-size: 16px; }

/* ── Images (split sections) ───────────────────────────────────────── */
.epi-section__image {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.epi-section__image img {
  max-width: 100%; height: auto; display: block; border-radius: 8px;
}
.epi-img--circular {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%; max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* ── BG-image sections (s01 hero, s05 manifesto) ───────────────────── */
.epi-section--bg {
  padding: 128px 32px;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
}
.epi-section--bg .epi-section__inner {
  position: relative;
  z-index: 2;                 /* text above BG + overlay */
  width: 100%;
}
.epi-section__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.epi-section__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(13, 21, 32, 0.85) 0%,
    rgba(13, 21, 32, 0.55) 55%,
    rgba(13, 21, 32, 0.15) 100%);
  z-index: 1;
}
.epi-section--manifesto .epi-section__overlay {
  background: linear-gradient(180deg,
    rgba(13, 21, 32, 0.55) 0%,
    rgba(13, 21, 32, 0.85) 100%);
}
.epi-section__spacer { min-height: 1px; }
.epi-section--bg .epi-title,
.epi-section--bg .epi-body,
.epi-section--bg .epi-eyebrow { color: #ffffff; }
.epi-section--bg .epi-eyebrow { color: #6fb3ff; }
.epi-section--bg .epi-body { color: #e5eaf2; }

/* ── Manifesto (s05) centered layout ───────────────────────────────── */
.epi-section--manifesto { padding: 160px 32px; min-height: 480px; }
.epi-section__inner--manifesto {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.epi-manifesto__quote {
  font-size: 42px; font-weight: 300; line-height: 1.3;
  letter-spacing: -0.01em; margin: 0 0 40px 0;
  font-style: italic; color: #ffffff;
}

/* ── Progress indicator ────────────────────────────────────────────── */
/*  Continuous line threaded through 5 nodes; text below each node.
    Node states via [data-state]: visited | active | neutral                */
:root {
  --epi-prog-amber:      #c8964a;
  --epi-prog-amber-soft: #d4a76b;
  --epi-prog-neutral:    #b8bcc4;
  --epi-prog-line-a:     #d4a76b;
  --epi-prog-line-b:     #b8bcc4;
  --epi-prog-label:      #5a6472;
}
.epi-progress {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 32px 56px;
  background: #f5f3ee;   /* warm parchment matching mockup */
}
/*  Grid: 5 equal columns, 2 rows (nodes / labels).
    Track uses same grid geometry — line spans first-node-center to
    last-node-center via left/right = 10% (half-column = 100%/(5*2)).       */
.epi-progress__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 20px auto;
  row-gap: 14px;
}
.epi-progress__track {
  position: absolute;
  left: 10%;                    /* center of first column */
  right: 10%;                   /* center of last column */
  top: 10px;                    /* v-center of 20px node row */
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--epi-prog-line-a) 0%, var(--epi-prog-line-b) 100%);
  z-index: 1;
}
.epi-progress__track-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--epi-prog-amber);
  transition: width 0.6s ease-out;
}
.epi-progress__cell {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.epi-progress__node {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f5f3ee;
  border: 1.5px solid var(--epi-prog-neutral);   /* NEUTRAL: thin gray */
  box-sizing: border-box;
  transition: all 0.2s ease;
}
.epi-progress__cell[data-state="visited"] .epi-progress__node {
  border-width: 4px;
  border-color: #8a8f97;                         /* VISITED: thick gray */
}
.epi-progress__cell[data-state="active"] .epi-progress__node {
  background: var(--epi-prog-amber);             /* ACTIVE: gold fill */
  border-color: var(--epi-prog-amber);
  border-width: 2px;
  box-shadow: 0 0 0 4px rgba(200, 150, 74, 0.18);
}
.epi-progress__label {
  grid-row: 2;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--epi-prog-label);
  white-space: nowrap;
}
.epi-progress__label[data-state="active"] {
  color: var(--epi-prog-amber);
}
.epi-progress__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--epi-prog-label);
  text-align: center;
  white-space: nowrap;
}
.epi-progress__step[data-state="active"] .epi-progress__label {
  color: var(--epi-prog-amber);
}

@media (max-width: 768px) {
  .epi-progress { padding: 32px 24px 40px; }
  .epi-progress__track { left: 48px; right: 48px; top: 44px; }
  .epi-progress__label { font-size: 9px; letter-spacing: 0.1em; }
}

/* ── Footer: 3 columns (left / center / right) ─────────────────────── */
.epi-footer {
  background: #0d1520;
  color: #a0a8b4;
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: center;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.epi-footer__left   { text-align: left;   }
.epi-footer__center { text-align: center; }
.epi-footer__right  { text-align: right;  }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .epi-section { padding: 64px 20px; }
  .epi-section--bg { padding: 96px 20px; min-height: 480px; }
  .epi-section__inner { grid-template-columns: 1fr; gap: 40px; }
  .epi-section--reverse .epi-section__inner { direction: ltr; }
  .epi-title { font-size: 32px; }
  .epi-title--xl { font-size: 40px; }
  .epi-manifesto__quote { font-size: 28px; }
  .epi-progress { padding: 20px 16px; }
  .epi-progress__step { font-size: 10px; }
  .epi-progress__connector { display: none; }
  .epi-section__overlay {
    background: linear-gradient(180deg, rgba(13,21,32,0.6) 0%, rgba(13,21,32,0.9) 100%);
  }
  .epi-footer {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 8px;
  }
  .epi-footer__left,
  .epi-footer__center,
  .epi-footer__right { text-align: center; }
}