/* Shared components — header, nav, buttons, footer, cards, sections.
   Loaded AFTER each page's own inline <style> block so these rules win
   the cascade (same selectors, later source order) without needing
   !important or a rewrite of every page's markup. */

/* ---------- header / contact strip ---------- */
.contact-strip {
  background: var(--color-primary);
}

.main-header {
  background: var(--color-surface);
  box-shadow: none;
  transition: box-shadow var(--duration-base) var(--ease-standard);
}

.main-header.is-scrolled {
  box-shadow: var(--shadow-md);
}

.nav {
  color: var(--color-ink-muted);
}

.nav a {
  position: relative;
  transition: color var(--duration-fast) var(--ease-standard);
}

.nav a:hover {
  color: var(--color-primary);
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--color-primary);
  transition: right var(--duration-base) var(--ease-out-soft);
}

.nav a:hover::after {
  right: 0;
}

.dropdown {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

.dd-item {
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-standard);
}

.dd-item:hover {
  background: var(--color-surface-tint);
}

.dd-logo {
  border-color: var(--color-border);
}

.dd-text strong {
  color: var(--color-primary);
}

/* ---------- buttons ---------- */
.button {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: .3px;
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              filter var(--duration-fast) var(--ease-standard);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.button:active {
  transform: translateY(-1px) scale(.97);
  transition-duration: 80ms;
}

.button.blue {
  background: var(--color-primary);
}

.button.blue:hover {
  background: var(--color-primary-dark);
}

.button.outline {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

.button.outline:hover {
  background: var(--color-surface-tint);
}

.button.outline.on-dark {
  border-color: rgba(255, 255, 255, .8);
  color: #fff;
}

.button.outline.on-dark:hover {
  background: rgba(255, 255, 255, .12);
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ---------- sections / headings ---------- */
.section-title {
  color: var(--color-ink);
  font-weight: 600;
  position: relative;
}

.section-sub {
  color: var(--color-ink-muted);
}

/* ---------- cards (solution cards, testimonials, feature cards) ---------- */
.solution-card,
.testimonial,
.card {
  border-radius: var(--radius-md);
  transition: transform var(--duration-base) var(--ease-out-soft),
              box-shadow var(--duration-base) var(--ease-out-soft),
              border-color var(--duration-base) var(--ease-out-soft);
}

.solution-card {
  padding: var(--space-4);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.solution-card:hover,
.testimonial:hover,
.card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: var(--shadow-lg);
}

.solution-card:hover {
  border-color: var(--color-primary);
}

.testimonial {
  box-shadow: var(--shadow-sm);
}

/* ---------- experience / stat band ---------- */
.experience-band {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

/* ---------- benefits / downloads ---------- */
.downloads {
  background: var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.downloads a {
  transition: transform var(--duration-fast) var(--ease-standard);
}

.downloads a:hover {
  transform: translateX(4px);
}

.benefit-icon {
  color: var(--color-primary);
}

/* ---------- consultation / CTA band ---------- */
.consultation {
  background: linear-gradient(rgba(2, 25, 45, .82), rgba(2, 25, 45, .82)),
              url('/assets/source/hero-background.jpg') center/cover;
}

/* ---------- footer ---------- */
.footer {
  background: var(--color-primary-dark);
}

.footer a {
  transition: opacity var(--duration-fast) var(--ease-standard);
  opacity: .88;
}

.footer a:hover {
  opacity: 1;
  text-decoration: underline;
}

.linkedin-mark {
  color: var(--color-primary);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.linkedin:hover .linkedin-mark {
  transform: translateY(-2px);
}

/* ---------- stat counters ---------- */
.stat-counter { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.experience-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-7);
  flex-wrap: wrap;
  text-align: center;
}

.experience-stats .stat-counter {
  display: block;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
}

.experience-stats .stat p {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  opacity: .9;
  max-width: 220px;
}

@media (max-width: 768px) {
  .experience-stats { gap: var(--space-5); }
}

/* ---------- tablet tier (new — was missing site-wide) ----------
   Scoped to (769px–1024px) so it never fights each page's own
   mobile @media(max-width:760/768px) block, which loads earlier in
   the cascade but must still win at phone widths. */
@media (max-width: 1024px) and (min-width: 769px) {
  .solutions-grid,
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .why-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: var(--space-6);
  }
}