body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.navbar-brand{
  letter-spacing: -0.01em;
}
blockquote, .fst-italic{
  line-height: 1.6;
}

/* ================= DARK THEME OVERRIDE ================= */
:root{
  --bg:#0f172a;
  --card:#1e293b;
  --border:#2e3b52;
  --heading:#f8fafc;
  --body:#cbd5e1;
  --dim:#94a3b8;
  --accent:#10b981;
  --accent-bright:#34d399;
}

html, body{
  background: var(--bg) !important;
  color: var(--body) !important;
}

/* Navbar */
.navbar{
  background: var(--card) !important;
  border-bottom: 1px solid var(--border);
}
.navbar-brand{ color: var(--heading) !important; }
.navbar-dark .navbar-nav .nav-link{ color: var(--body) !important; }
.navbar-dark .navbar-nav .nav-link:hover{ color: var(--accent-bright) !important; }

/* Section backgrounds -- keep the page uniformly dark; cards provide the contrast */
.bg-light{ background: var(--bg) !important; }
.bg-dark{ background: var(--card) !important; }
/* NOTE: .bg-white is intentionally left as real white -- it's used only as a
   light plate behind client logo images (many have white/transparent
   backgrounds), same as the dark-mode ledger site. */

/* Text utilities */
.text-primary{ color: var(--accent) !important; }
.text-muted{ color: var(--dim) !important; }
.text-dark{ color: var(--heading) !important; }
.text-reset{ color: var(--body) !important; }
.text-white, .text-white-50{ color: var(--heading) !important; }
h1, h2, h3, h4, h5, h6{ color: var(--heading); }

/* Buttons */
.btn-primary{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--bg) !important;
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus{
  background: var(--accent-bright) !important;
  border-color: var(--accent-bright) !important;
  color: var(--bg) !important;
}
.btn-outline-secondary{
  color: var(--body) !important;
  border-color: var(--border) !important;
}
.btn-outline-secondary:hover{
  background: var(--card) !important;
  border-color: var(--accent) !important;
  color: var(--heading) !important;
}
.btn-outline-light{
  color: var(--heading) !important;
  border-color: var(--border) !important;
}
.btn-outline-light:hover{
  background: var(--card) !important;
  border-color: var(--accent) !important;
}
.link-light{ color: var(--body) !important; }
.link-light:hover{ color: var(--accent-bright) !important; }

/* Cards */
.card{
  background: var(--card) !important;
  color: var(--body);
  border: 1px solid var(--border) !important;
}
.card .text-muted{ color: var(--dim) !important; }
.border-primary{ border-color: var(--accent) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end{
  border-color: var(--border) !important;
}

/* Badges / chips */
.badge.text-bg-light{
  background: var(--bg) !important;
  color: var(--dim) !important;
  border-color: var(--border) !important;
}

/* Forms */
.form-control{
  background: var(--bg) !important;
  color: var(--heading) !important;
  border-color: var(--border) !important;
}
.form-control::placeholder{ color: var(--dim); opacity: 1; }
.form-control:focus{
  background: var(--bg) !important;
  color: var(--heading) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 .2rem rgba(16,185,129,.2) !important;
}
.form-label{ color: var(--body); font-weight: 500; }

footer{
  background: var(--card) !important;
  border-top: 1px solid var(--border);
  color: var(--dim) !important;
}

/* ---------- Scroll-snap pillar page ---------- */
html, body{ height: 100%; }
body{ padding-top: 56px; } /* offset for fixed navbar */
.snap-wrap{
  height: calc(100vh - 56px);
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.snap-section{
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
  padding: 48px 0;
}
.hero-section{ text-align: center; }
.contact-section{ display: flex; align-items: center; justify-content: center; }

/* Horizontal engagement rail -- its own independent scroll container, so it
   never interacts with the page's vertical scroll-snap sequence. */
.rail-wrap{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rail{
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 8px 4px 20px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.rail::-webkit-scrollbar{ height: 8px; }
.rail::-webkit-scrollbar-track{ background: transparent; }
.rail::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 4px; }
.rail-card{
  flex: 0 0 300px;
  scroll-snap-align: start;
}
.rail-card .card{ height: 100%; }
.rail-arrow{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--body);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.rail-arrow:hover{ border-color: var(--accent); color: var(--accent-bright); }

@media (max-width: 575px){
  .rail-card{ flex-basis: 260px; }
  .rail-arrow{ display: none; }
}

.engagement-card{
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.engagement-card:hover{
  transform: translateY(-3px);
  border-color: var(--accent) !important;
  box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.35) !important;
}
.pillar-section .card{ font-size: 0.95rem; }

/* "Also worth a look" chips: fixed, consistent size */
.also-chip{
  transition: border-color .15s ease, box-shadow .15s ease;
  color: inherit;
  width: 168px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 12px;
}
.also-chip:hover{
  border-color: var(--accent) !important;
  box-shadow: 0 .25rem .5rem rgba(0,0,0,.25);
}
.also-chip img{
  max-height: 34px;
  max-width: 140px;
  object-fit: contain;
}

.scroll-hint{
  color: var(--dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.95rem;
}
.scroll-hint:hover{ color: var(--accent-bright); }

@media (max-width: 991px){
  .snap-section{ min-height: auto; padding: 88px 0 48px 0; }
  .snap-wrap{ height: auto; overflow-y: visible; scroll-snap-type: none; }
  body{ padding-top: 0; }
}