/*!
 * NCS — Shared Site Styles  v1.0
 * ─────────────────────────────────────────────────────────────────────────
 * Contains: design tokens, base/reset, Bootstrap 5 overrides (union of all
 * pages), and shared layout utilities.
 *
 * Load order in every HTML page:
 *   1. bootstrap.min.css
 *   2. style.css          ← this file
 *   3. navbar.css
 *   4. footer.css
 *   5. <style> page-specific rules
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════════════
   1. Design Tokens
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Brand palette */
  --navy: #0b2545;
  --navy-700: #11315e;
  --teal: #1b7a8c;
  --teal-100: #e4f0f2;
  --gold: #d99e36;
  --gold-600: #9c701f;

  /* Surface / neutral */
  --surface: #eaf1f4;
  --ink: #1c2530;
  --muted: #5b6b79;
  --line: #c9d6dc;
  --line-soft: #dce6ea;

  /* Typography */
  --sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica,
    Arial, sans-serif;
  --mono:
    ui-monospace, "SF Mono", "IBM Plex Mono", "JetBrains Mono", Menlo, Consolas,
    monospace;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. Base / Reset
   ══════════════════════════════════════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  background-color: #fff;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   3. Bootstrap 5 Overrides
   (union of all page variants — safe to include globally)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--navy-700) !important;
  border-color: var(--navy-700) !important;
  color: #fff !important;
}

/* Used on light backgrounds (index, hosting, product pages) */
.btn-outline-secondary {
  border-color: var(--line);
  color: var(--navy);
  font-weight: 600;
}
.btn-outline-secondary:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: transparent;
}

/* Used on dark/navy panel backgrounds (about, case-study pages) */
.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* ── Form controls (contact page) ────────────────────────────────────────── */
.form-control,
.form-select {
  border-color: var(--line);
  font-size: 14.5px;
  color: var(--ink);
  padding: 11px 13px;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(27, 122, 140, 0.12);
}

/* ── Dropdown items (global base — navbar.css adds #site-header scoping) ─── */
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--teal-100);
  color: var(--navy);
}
.dropdown-item.active,
.dropdown-item:active {
  background: var(--teal-100);
  color: var(--navy);
}

/* ══════════════════════════════════════════════════════════════════════════
   4. Shared Layout Utilities
   ══════════════════════════════════════════════════════════════════════════ */

/* Max-width wrapper used instead of Bootstrap's .container */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Section eyebrow label */
.kicker {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kicker::before {
  content: "";
  width: 14px;
  height: 1px;
  background: #c3bbbb;
  display: inline-block;
}

/* Section heading */
.h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.18;
  color: var(--navy);
  font-weight: 600;
}

/* Lead paragraph below a heading */
.lede {
  font-size: 18px;
  color: var(--muted);
}
/* ================================================================
   LOGO CAROUSEL SECTION
================================================================ */
.logos-section-head {
  text-align: center;
  padding: 56px 0 40px;
}
.logos-section-head .kicker {
  justify-content: center;
  margin-bottom: 0.75rem;
}
.logos-section-head h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  color: var(--deep);
  margin: 0 auto 0.75rem;
  line-height: 1.2;
}
.logos-section-head .logos-subhead {
  font-size: 0.9rem;
  color: var(--ink3);
  max-width: 520px;
  margin: 0 auto 0;
  line-height: 1.7;
}
/* Thin gold rule under the heading */
.logos-divider {
  display: block;
  width: 52px;
  height: 3px;
  background: var(--grad-gold);
  border-radius: 3px;
  margin: 16px auto 0;
}

.logos-outer {
  overflow: hidden;
  position: relative;
  padding: 8px 0 48px;
}

.logos-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: logoScroll 34s linear infinite;
  padding: 6px 0;
}
.logos-outer:hover .logos-track {
  animation-play-state: paused;
}
@keyframes logoScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Logo images — grayscale at rest, full color on hover */
.logos-track img {
  height: 38px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  transition:
    filter 0.35s ease,
    transform 0.25s ease;
}
.logos-outer:hover .logos-track img:hover {
  transform: scale(1.06);
}