/* =========================================================
   DAB Inventive — Gold + Royal Blue theme (logo palette)
   Gold #C9A24A · Royal Blue #0A1F4D · White #FFFFFF
   ========================================================= */

:root {
  --gold: #c9a24a !important;
  --gold-light: #daa755 !important;
  --gold-dark: #a8841a !important;
  --gold-soft: rgba(201, 162, 74, 0.12) !important;
  --gold-glow: rgba(201, 162, 74, 0.3) !important;
  --navy: #0a1f4d !important;
  --navy-light: #0f2a5c !important;
  --navy-muted: #5b6b8c !important;
  --orange: #c9a24a !important;
  --orange-dark: #a8841a !important;
  --orange-soft: rgba(201, 162, 74, 0.12) !important;
  --orange-glow: rgba(201, 162, 74, 0.3) !important;
  --primary: #0a1f4d !important;
  --accent: #c9a24a !important;
  --text: #0a1f4d !important;
  --text-muted: #5b6b8c !important;
  --border: #d9e0ef !important;
  --bg: #ffffff !important;
  --bg-soft: #f4f7fc !important;
  --gradient: linear-gradient(135deg, #c9a24a 0%, #daa755 100%) !important;
  --gradient-navy: linear-gradient(135deg, #0a1f4d 0%, #0f2a5c 100%) !important;
  --top-bar-h: 42px !important;
  --header-h: 72px !important;
  --font: "Inter", system-ui, sans-serif !important;
  --font-display: "Outfit", "Inter", sans-serif !important;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: #ffffff;
}

/* ── Top bar (white + gold + royal blue accents) ── */
.top-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1001 !important;
  height: var(--top-bar-h) !important;
  background: #ffffff !important;
  color: #3a4a66 !important;
  font-size: 0.76rem !important;
  border-bottom: 1px solid #d9e0ef !important;
  box-shadow: 0 1px 0 rgba(201, 162, 74, 0.15) !important;
}

.top-bar::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent 0%, #c9a24a 35%, rgba(201, 162, 74, 0.45) 65%, transparent 100%) !important;
}

.top-bar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
  gap: 16px !important;
}

.top-bar-left,
.top-bar-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.top-bar-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #4a5a78 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.top-bar-chip:hover { color: #0a1f4d !important; }

.top-bar-chip-icon {
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(201, 162, 74, 0.12) !important;
  border-radius: 6px !important;
  font-size: 0.65rem !important;
  color: #c9a24a !important;
}

.top-bar-trust {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: rgba(201, 162, 74, 0.08) !important;
  border: 1px solid rgba(201, 162, 74, 0.28) !important;
  color: #4a5a78 !important;
  font-size: 0.72rem !important;
}

.top-bar-trust i { color: #c9a24a !important; }

/* ── Fixed header ── */
.site-header {
  position: fixed !important;
  top: var(--top-bar-h) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1003 !important;
  height: var(--header-h) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid #d9e0ef !important;
  box-shadow: 0 2px 12px rgba(10, 31, 77, 0.05) !important;
  /* No visible effect (background is already 98% opaque) but backdrop-filter
     makes this element a new containing block for position:fixed descendants
     — that silently throws off the mega-menu's viewport-relative `top` calc
     by the top-bar's height, producing a gap the hover-bridge can't cover
     and causing the dropdown to flicker closed while the mouse crosses it. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.site-header .header {
  position: static !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
  gap: 12px !important;
}

.logo-link {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  height: 100% !important;
}

.logo,
.logo-img {
  height: 60px !important;
  width: auto !important;
  max-width: 280px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Hide any leftover brand text next to logo */
.logo-text,
.logo-name,
.logo-tagline { display: none !important; }

.nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 1 !important;
  gap: 2px !important;
  min-width: 0 !important;
  height: 100% !important;
}

.nav > a.nav-link {
  display: inline-flex !important;
  align-items: center !important;
}

.nav-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  color: #4a5a78 !important;
  text-decoration: none !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  font-family: inherit !important;
  line-height: 1 !important;
  transition: color 0.2s ease, background 0.2s ease !important;
}

.nav-link:hover {
  color: #a8841a !important;
  background: rgba(201, 162, 74, 0.1) !important;
}

.nav-link.active,
.nav-dropdown-toggle.active,
.nav-link.active:hover,
.nav-dropdown-toggle.active:hover {
  color: #a8841a !important;
  background: rgba(201, 162, 74, 0.14) !important;
  font-weight: 700 !important;
}

.nav-link.active::after,
.nav-dropdown-toggle.active::after {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 5px !important;
  height: 2px !important;
  background: #c9a24a !important;
  border-radius: 2px !important;
}

.nav-dropdown {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.nav-dropdown-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 40px !important;
  border-radius: 8px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.nav-dropdown-toggle i {
  font-size: 0.65rem !important;
  transition: transform 0.25s !important;
}

.nav-dropdown.open .nav-dropdown-toggle,
.nav-dropdown.open .nav-dropdown-toggle:hover {
  color: #a8841a !important;
  background: rgba(201, 162, 74, 0.14) !important;
}

.nav-dropdown.open .nav-dropdown-toggle i {
  transform: rotate(180deg) !important;
}

/* Get Free Quote CTA */
.nav-cta,
a.nav-cta.btn,
a.btn.btn-primary.nav-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  height: 40px !important;
  margin-left: 10px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  border: none !important;
  background: linear-gradient(135deg, #c9a24a 0%, #daa755 100%) !important;
  color: #0a1f4d !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(201, 162, 74, 0.28) !important;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.nav-cta:hover,
a.nav-cta.btn:hover,
a.btn.btn-primary.nav-cta:hover {
  filter: brightness(1.04) !important;
  color: #0a1f4d !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(201, 162, 74, 0.34) !important;
}

.menu-toggle {
  display: none !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 42px !important;
  height: 42px !important;
  padding: 10px !important;
  background: #f4f7fc !important;
  border: 1px solid #d9e0ef !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.menu-toggle span {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  background: #0a1f4d !important;
  border-radius: 2px !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.menu-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
}
.menu-toggle.open span:nth-child(2) {
  opacity: 0 !important;
}
.menu-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
}

/* Bridge: keep hover alive while moving from trigger into fixed panel */
.nav-dropdown.open::after {
  content: "" !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--top-bar-h) + var(--header-h) - 12px) !important;
  height: 24px !important;
  z-index: 1095 !important;
  pointer-events: auto !important;
}

/* ── Jumbo mega menu ── */
.features-jumbo-backdrop {
  position: fixed !important;
  inset: 0 !important;
  top: calc(var(--top-bar-h) + var(--header-h)) !important;
  z-index: 1090 !important;
  background: rgba(10, 31, 77, 0.38) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.28s ease, visibility 0.28s !important;
}

.nav-dropdown.open > .features-jumbo-backdrop {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.nav-dropdown-menu.features-jumbo {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--top-bar-h) + var(--header-h)) !important;
  z-index: 1100 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: min(88vh, 800px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  border-top: 1px solid #d9e0ef !important;
  border-bottom: 1px solid #d9e0ef !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%) !important;
  box-shadow: 0 28px 64px rgba(10, 31, 77, 0.14) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s !important;
  display: block !important;
}

.nav-dropdown.open > .nav-dropdown-menu.features-jumbo {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.features-jumbo-container {
  position: relative !important;
  padding-top: 18px !important;
  padding-bottom: 16px !important;
}

.features-jumbo-main-head {
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
}

.features-jumbo-accent {
  background: linear-gradient(90deg, transparent 0%, #c9a24a 20%, #daa755 50%, #c9a24a 80%, transparent 100%) !important;
}

.features-jumbo-inner {
  display: grid !important;
  grid-template-columns: minmax(220px, 260px) 1fr !important;
  gap: 28px !important;
  align-items: start !important;
}

.features-jumbo-aside {
  background: linear-gradient(145deg, #0a1f4d 0%, #0f2a5c 100%) !important;
  border: 1px solid rgba(201, 162, 74, 0.35) !important;
  box-shadow: 0 16px 40px rgba(10, 31, 77, 0.18) !important;
}

.features-jumbo-badge {
  color: #daa755 !important;
  background: rgba(201, 162, 74, 0.14) !important;
  border-color: rgba(201, 162, 74, 0.35) !important;
}

.features-jumbo-highlights i,
.features-jumbo-stat strong,
.features-jumbo-count {
  color: #c9a24a !important;
}

.features-jumbo-count {
  background: rgba(201, 162, 74, 0.1) !important;
  border-color: rgba(201, 162, 74, 0.28) !important;
}

.jumbo-columns {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 16px !important;
}

.jumbo-col-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #d9e0ef !important;
}

.jumbo-col-icon {
  font-size: 1.1rem !important;
  line-height: 1 !important;
}

.jumbo-col-head h5 {
  margin: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #0a1f4d !important;
}

.jumbo-col-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.features-jumbo-card {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 9px 14px !important;
  background: #fff !important;
  border: 1px solid #d9e0ef !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: none !important;
}

.features-jumbo-card::before {
  background: linear-gradient(180deg, #c9a24a, #daa755) !important;
}

.features-jumbo-card.is-featured {
  border-color: rgba(201, 162, 74, 0.4) !important;
  background: linear-gradient(135deg, #fff 0%, #f0f5ff 100%) !important;
}

.features-jumbo-card.is-featured::after {
  color: #a8841a !important;
  background: rgba(201, 162, 74, 0.14) !important;
}

.features-jumbo-card:hover,
.features-jumbo-card.active {
  border-color: rgba(201, 162, 74, 0.5) !important;
  box-shadow: 0 10px 28px rgba(10, 31, 77, 0.08) !important;
  transform: translateY(-3px) !important;
}

.features-jumbo-card-icon {
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: rgba(201, 162, 74, 0.12) !important;
  color: #c9a24a !important;
  font-size: 0.7rem !important;
  margin-top: 2px !important;
}

.features-jumbo-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.features-jumbo-text strong {
  font-size: 0.88rem !important;
  color: #0a1f4d !important;
  font-weight: 650 !important;
}

.features-jumbo-text small {
  font-size: 0.72rem !important;
  color: #5b6b8c !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.features-jumbo-foot-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid #d9e0ef !important;
  color: #a8841a !important;
  font-weight: 650 !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
}

.features-jumbo-foot-link:hover {
  color: #c9a24a !important;
}

/* Buttons — pill shape is the site-wide standard (matches the home hero) */
.btn {
  border-radius: 999px !important;
}

/* Buttons — gold */
.btn-primary,
.btn-magenta,
.nav-cta,
a.btn-primary {
  background: linear-gradient(135deg, #c9a24a 0%, #daa755 100%) !important;
  color: #0a1f4d !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(201, 162, 74, 0.3) !important;
}

.btn-primary:hover,
.btn-magenta:hover,
.nav-cta:hover,
a.btn-primary:hover {
  filter: brightness(1.03) !important;
  color: #0a1f4d !important;
}

.btn-outline {
  background: transparent !important;
  color: #0a1f4d !important;
  border: 1.5px solid #c9a24a !important;
}

.btn-outline:hover {
  background: rgba(201, 162, 74, 0.12) !important;
  border-color: #a8841a !important;
  color: #a8841a !important;
}

/* Navy-background contexts need light outline buttons, not the default
   navy-on-transparent — otherwise the text is unreadable against the bg. */
.features-jumbo-aside-actions .btn-outline,
.footer-cta-home .btn-outline-light {
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
}
.features-jumbo-aside-actions .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #fff !important;
  color: #fff !important;
}
.features-jumbo-aside-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.features-jumbo-aside-actions .btn {
  width: 100% !important;
  justify-content: center !important;
}

.section-tag,
.section-label {
  color: #c9a24a !important;
}

.gradient-text {
  background: linear-gradient(135deg, #daa755 0%, #c9a24a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Main content offset under fixed chrome */
.app {
  position: relative !important;
  z-index: 1 !important;
  padding-top: calc(var(--top-bar-h) + var(--header-h)) !important;
  min-height: 60vh !important;
}

.container {
  width: min(1200px, 92vw) !important;
  margin: 0 auto !important;
}

/* Progress / misc */
.pjax-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 10050;
  background: linear-gradient(90deg, #c9a24a, #daa755, #c9a24a);
  pointer-events: none;
}

/* Breadcrumbs */
.breadcrumbs {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 0;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-size: 0.88rem;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
}

.breadcrumb-item:not(:last-child)::after {
  content: "›";
  opacity: 0.5;
}

.breadcrumb-item a {
  color: #0a1f4d;
  text-decoration: none;
  font-weight: 500;
}

.breadcrumb-item a:hover { color: #a8841a; }
.breadcrumb-item.active span { color: #0a1f4d; font-weight: 600; }

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stats-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}
.stats-grid-6 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) {
  .stats-grid-5,
  .stats-grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(10, 31, 77, 0.06);
}

.stat-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #ffffff 0%, #f7f9fd 100%) !important;
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c9a24a, #daa755, #0a1f4d);
}

.stat-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(201, 162, 74, 0.18), rgba(201, 162, 74, 0.06));
  color: #a8841a;
  font-size: 1.15rem;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-number {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  background: linear-gradient(135deg, #c9a24a 0%, #a8841a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-label {
  font-size: 0.88rem;
  color: #64748b;
  margin-top: 6px;
}

/* Process */
.process-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.process-step {
  text-align: center;
  padding: 24px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

.step-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: #c9a24a;
  margin-bottom: 10px;
}

.process-step h4 { font-size: 0.95rem; color: #0a1f4d; margin-bottom: 6px; }
.process-step p { font-size: 0.82rem; color: #64748b; }

.section-alt { background: #f5f7fa; }
.section-cta { margin-top: 28px; }

.case-tag {
  display: inline-block;
  background: rgba(201, 162, 74, 0.12);
  color: #a8841a;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.case-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: rgba(201, 162, 74, 0.12);
  padding: 8px 14px;
  border-radius: 10px;
  margin-top: 8px;
}

.case-stat strong { font-size: 1.2rem; color: #a8841a; }
.case-stat span { font-size: 0.82rem; color: #64748b; }

/* Floating widgets */
.floating-social {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9980;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.floating-social-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(10, 31, 77, 0.25);
}

.floating-social-btn:hover { transform: scale(1.08); color: #fff; }
.floating-linkedin { background: linear-gradient(145deg, #0077b5, #005885); }
.floating-facebook { background: linear-gradient(145deg, #1877f2, #0d5dbf); }
.floating-instagram { background: linear-gradient(145deg, #f09433, #dc2743, #bc1888); }

.floating-whatsapp {
  position: relative;
  bottom: auto;
  right: auto;
  z-index: 1;
  width: 44px;
  height: 44px;
  margin-top: 4px;
  border-radius: 12px;
  background: linear-gradient(145deg, #25d366, #128c7e);
  color: #fff !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
  animation: whatsappFloat 3s ease-in-out infinite;
}

.floating-whatsapp:hover {
  transform: scale(1.08);
  color: #fff !important;
}

.floating-whatsapp-icon {
  position: relative;
  z-index: 3;
  font-size: 1.25rem;
  animation: whatsappIconBounce 2s ease-in-out infinite;
}

.floating-whatsapp-pulse {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 2px solid rgba(37, 211, 102, 0.55);
  animation: whatsappPulse 2s ease-out infinite;
}

.floating-whatsapp-pulse-2 { animation-delay: 1s; }

@keyframes whatsappFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes whatsappIconBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes whatsappPulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.45); opacity: 0; }
}

.footer-logo {
  height: auto !important;
  max-height: 56px !important;
  width: auto !important;
  max-width: 280px !important;
  object-fit: contain !important;
}

/* Scroll-to-top sits on the LEFT (Tawk.to's chat launcher owns the
   bottom-right corner, and its size/position is controlled from the Tawk
   dashboard, not our CSS, since it renders in a cross-origin iframe) —
   putting scroll-top on the opposite corner avoids fighting over the
   same pixels regardless of exactly how big Tawk's bubble is. */
.scroll-top {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  bottom: 24px !important;
  left: 24px !important;
  right: auto !important;
  z-index: 9970 !important;
  background: linear-gradient(135deg, #c9a24a, #daa755) !important;
  color: #fff !important;
}

@media (max-width: 600px) {
  .scroll-top { bottom: 84px !important; }
}

/* Placeholders / media — branded slots awaiting real photography */
.img-placeholder {
  width: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    linear-gradient(135deg, rgba(10, 31, 77, 0.05) 0%, rgba(201, 162, 74, 0.1) 100%),
    repeating-linear-gradient(135deg, rgba(10, 31, 77, 0.035) 0 2px, transparent 2px 14px);
  border: 1px dashed rgba(201, 162, 74, 0.4);
  border-radius: 14px;
  color: #4a5a78;
  text-align: center;
  padding: 24px 16px;
  position: relative;
  overflow: hidden;
}

.img-placeholder-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #c9a24a, #daa755);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(201, 162, 74, 0.35);
}

.img-placeholder-mark::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f03e";
  font-size: 1.05rem;
  color: #fff;
}

.img-placeholder-label {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: #3a4a66;
  max-width: 28ch;
  line-height: 1.35;
}

.img-placeholder-hint {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a8841a;
  background: rgba(201, 162, 74, 0.14);
  padding: 3px 10px;
  border-radius: 20px;
}

.img-placeholder.section-img-card,
.section-img-card.img-placeholder {
  min-height: 160px;
  border-radius: 0;
}

.slider-bg-image .img-placeholder,
.slider-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  border-radius: 0;
  min-height: 100%;
}

/* Prefer atmospheric fallback when JPG assets are missing */
.slider-bg-image .img-placeholder {
  background: transparent !important;
  border: none !important;
  color: transparent !important;
  position: relative;
  z-index: 1;
}
.slider-bg-image .img-placeholder-icon,
.slider-bg-image .img-placeholder-label,
.slider-bg-image .img-placeholder-hint,
.slider-bg-image .img-placeholder-mark {
  display: none !important;
}

.page-hero {
  background: linear-gradient(135deg, #0a1f4d 0%, #0f2a5c 100%) !important;
  color: #fff !important;
  padding: 40px 0 36px !important;
}

.page-hero h1 {
  color: #fff !important;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem) !important;
  line-height: 1.15 !important;
  margin: 0 0 12px !important;
}
.page-hero p {
  color: rgba(255, 255, 255, 0.78) !important;
  margin: 0 !important;
  max-width: 42ch;
  line-height: 1.6;
}

/* In a two-column split hero (copy + image), the 42ch cap leaves the
   paragraph as a narrow box hugging the left edge instead of filling the
   column — let it use the full column width here. */
.page-hero-split .page-hero-copy p {
  max-width: none;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.contact-info-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px;
  text-align: center;
}

.contact-info-card .icon { font-size: 1.4rem; color: #c9a24a; margin-bottom: 10px; }
.contact-info-card h4 { color: #0a1f4d; margin-bottom: 8px; }

.form-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 36px;
  max-width: 640px;
  margin: 0 auto;
}

.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: #0a1f4d;
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-family: inherit;
  background: #f8fafc;
}

.form-control:focus {
  outline: none;
  border-color: #c9a24a;
  box-shadow: 0 0 0 4px rgba(201, 162, 74, 0.12);
  background: #fff;
}

.section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}

/* Grid items default to min-width:auto, which floors a track at its
   content's own intrinsic size. A wide hero SVG (image column) was
   forcing the whole grid — including the single-column mobile
   collapse — to grow past the viewport instead of shrinking to fit,
   pushing the page into horizontal scroll on some product/industry
   pages. */
.section-split > * {
  min-width: 0;
}

.section-split.reverse {
  direction: rtl;
}
.section-split.reverse > * {
  direction: ltr;
}

.section-media {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #d9e0ef;
  background: linear-gradient(135deg, rgba(10, 31, 77, 0.05) 0%, rgba(201, 162, 74, 0.1) 100%);
}

.section-img {
  width: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

body.nav-open { overflow: hidden; }

/* Mobile nav + accordion dropdowns */
@media (max-width: 991px) {
  .menu-toggle { display: flex !important; }

  .nav-dropdown.open::after {
    display: none !important;
  }

  .nav {
    position: fixed !important;
    top: calc(var(--top-bar-h) + var(--header-h)) !important;
    right: 0 !important;
    width: min(340px, 90vw) !important;
    height: calc(100vh - var(--top-bar-h) - var(--header-h)) !important;
    background: #fff !important;
    flex-direction: column !important;
    align-items: stretch !important;
    /* .nav's unconditional (desktop) rule sets justify-content:flex-end
       for its normal horizontal row layout. Switching to flex-direction:
       column here for the mobile panel flips that axis to vertical —
       without resetting it, flex-end pushes every link to the bottom of
       the panel, leaving a large blank gap above them (looked like the
       menu "starting from the middle of the screen"). */
    justify-content: flex-start !important;
    padding: 16px !important;
    transform: translateX(100%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow-y: auto !important;
    box-shadow: -12px 0 40px rgba(10, 31, 77, 0.18) !important;
    z-index: 1002 !important;
    gap: 4px !important;
  }

  .nav.open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .nav > a.nav-link,
  .nav-dropdown-toggle {
    width: 100% !important;
    height: 44px !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
  }

  .nav-link.active::after,
  .nav-dropdown-toggle.active::after {
    left: 14px !important;
    right: 14px !important;
  }

  .nav-cta,
  a.nav-cta.btn,
  a.btn.btn-primary.nav-cta {
    width: 100% !important;
    height: 46px !important;
    margin: 10px 0 0 !important;
    border-radius: 10px !important;
  }

  .nav-dropdown {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .features-jumbo-backdrop {
    display: none !important;
  }

  .nav-dropdown-menu.features-jumbo {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: #f4f7fc !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0.25s !important;
  }

  .nav-dropdown.open > .nav-dropdown-menu.features-jumbo {
    max-height: 60vh !important;
    overflow: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    padding: 12px !important;
    margin-top: 6px !important;
    border-radius: 14px !important;
    border: 1px solid #d9e0ef !important;
  }

  .features-jumbo-inner {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .features-jumbo-aside {
    padding: 18px !important;
  }

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

  .features-jumbo-aside-stats,
  .features-jumbo-main-head p {
    display: none !important;
  }

  /* Services/Industries/Products cards stagger in with animation-fill-mode:
     backwards (style.css) — each card sits at opacity:0 until its delayed
     turn to animate. That's a nice touch on desktop hover, but on a touch
     accordion it risked showing as "blank cards, no text" if the animation
     didn't settle before the panel was screenshotted/interacted with.
     Skip it on mobile so cards are always immediately visible. */
  .nav-dropdown.open .features-jumbo.is-revealed .features-jumbo-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Belt-and-suspenders for the same "card renders, text doesn't" bug:
     force every failure mode that could zero out .features-jumbo-text's
     box (flex collapse, the -webkit-box/line-clamp trick misbehaving as a
     flex child, stray opacity/visibility) back to a known-good state,
     since disabling the entrance animation alone didn't fully resolve it. */
  .features-jumbo-card {
    min-height: 0 !important;
  }

  .features-jumbo-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .features-jumbo-text strong {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .features-jumbo-text small {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav-cta { width: 100% !important; margin: 10px 0 0 !important; justify-content: center !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .section-split { grid-template-columns: 1fr; }
  .contact-info-grid { grid-template-columns: 1fr; }
  .page-hero .section-media { height: 280px; }
}

@media (max-width: 768px) {
  .floating-social { left: 10px; }
  .floating-social-btn { width: 40px; height: 40px; }
  .floating-whatsapp { width: 40px; height: 40px; }
  .scroll-top { bottom: 24px !important; left: 18px !important; right: auto !important; }
}

@media (max-width: 480px) {
  .stats-grid,
  .process-grid { grid-template-columns: 1fr; }
}

/* ── Modal overlay (fixed) ── */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10040 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.28s ease, visibility 0.28s ease !important;
}

.modal-overlay.active,
.modal-overlay.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(10, 31, 77, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.modal-dialog,
.modal-overlay .modal {
  position: relative !important;
  z-index: 2 !important;
  width: min(480px, 100%) !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 30px 80px rgba(10, 31, 77, 0.35) !important;
  padding: 36px 32px 32px !important;
  transform: translateY(18px) scale(0.96) !important;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.modal-overlay.active .modal-dialog,
.modal-overlay.active .modal,
.modal-overlay.is-open .modal-dialog {
  transform: translateY(0) scale(1) !important;
}

.modal-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  border: none !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  color: #5b6b7c !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  transition: background 0.2s, color 0.2s !important;
}

.modal-close:hover {
  background: rgba(201, 162, 74, 0.14) !important;
  color: #a8841a !important;
}

.modal-body {
  text-align: left !important;
}

.modal-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(201, 162, 74, 0.14) !important;
  border: 1px solid rgba(201, 162, 74, 0.35) !important;
  color: #a8841a !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}

.modal-dialog h3,
.modal-overlay .modal h3 {
  font-family: var(--font-display) !important;
  font-size: 1.45rem !important;
  color: #0a1f4d !important;
  margin-bottom: 10px !important;
  font-weight: 700 !important;
}

.modal-dialog p,
.modal-overlay .modal p {
  color: #5b6b7c !important;
  font-size: 0.98rem !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
}

.modal-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.modal-actions .btn {
  flex: 1 1 auto !important;
  min-width: 140px !important;
}

body.modal-open {
  overflow: hidden !important;
}

@media (max-width: 768px) {
  .logo,
  .logo-img {
    height: 48px !important;
    max-width: 220px !important;
  }
  :root {
    --header-h: 64px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   Home slider — cinematic
   ══════════════════════════════════════════════════════════════ */

.home-slider {
  isolation: isolate;
}

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

.slider-slide {
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.9s !important;
}

.slider-bg-image {
  overflow: hidden;
}

.slider-bg-image img,
.slider-bg-image .img-placeholder,
.slider-bg-image .hero-slide-img {
  object-position: right center;
  transform: scale(1.08) translate3d(1.5%, 0, 0);
  transition:
    transform 8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.9s ease;
  will-change: transform;
}

.slider-slide[data-index="1"] .slider-bg-image img,
.slider-slide[data-index="1"] .slider-bg-image .hero-slide-img {
  object-position: center center;
}

.slider-slide.is-active .slider-bg-image img,
.slider-slide.is-active .slider-bg-image .img-placeholder,
.slider-slide.is-active .slider-bg-image .hero-slide-img {
  transform: scale(1) translate3d(0, 0, 0);
}

.slider-bg-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 60% at 78% 42%, rgba(201, 162, 74, 0.22), transparent 55%),
    radial-gradient(ellipse 50% 50% at 18% 78%, rgba(10, 31, 77, 0.35), transparent 50%),
    linear-gradient(135deg, #040d24 0%, #0a1f4d 48%, #071536 100%);
  pointer-events: none;
}

.slider-bg-fallback-2 {
  background:
    radial-gradient(ellipse 65% 55% at 82% 38%, rgba(201, 162, 74, 0.18), transparent 55%),
    radial-gradient(ellipse 45% 45% at 22% 72%, rgba(91, 107, 140, 0.2), transparent 50%),
    linear-gradient(145deg, #030a1c 0%, #0a1f4d 50%, #06122e 100%);
}

.slider-bg-fallback-3 {
  background:
    radial-gradient(ellipse 60% 55% at 76% 44%, rgba(218, 167, 85, 0.16), transparent 55%),
    radial-gradient(ellipse 50% 40% at 28% 76%, rgba(201, 162, 74, 0.14), transparent 50%),
    linear-gradient(160deg, #040d24 0%, #0a1f4d 48%, #071536 100%);
}

.slider-bg-image:has(img) .slider-bg-fallback {
  opacity: 0;
}

.slider-overlay {
  background:
    linear-gradient(
      105deg,
      rgba(10, 31, 77, 0.88) 0%,
      rgba(10, 31, 77, 0.62) 28%,
      rgba(10, 31, 77, 0.28) 52%,
      rgba(10, 31, 77, 0.08) 72%,
      transparent 88%
    ),
    linear-gradient(
      180deg,
      rgba(10, 31, 77, 0.25) 0%,
      transparent 28%,
      transparent 58%,
      rgba(10, 31, 77, 0.55) 100%
    ) !important;
}

.slider-inner {
  padding: 48px 0 110px !important;
  align-items: center !important;
}

.slider-caption {
  width: 40% !important;
  max-width: 640px !important;
  min-width: 480px;
  /* The 3 slides carry different amounts of lead copy; without a fixed
     height the card resizes on every transition and can grow tall enough
     to collide with the controls/tabs bar pinned to the bottom of the
     slider. A consistent min-height plus centered content keeps the card
     the same size and position across all slides, shorter copy included. */
  min-height: 460px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  color: #fff !important;
  background: rgba(6, 15, 40, 0.38) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 26px !important;
  padding: 40px 44px !important;
  box-shadow: 0 40px 80px -30px rgba(2, 8, 24, 0.5) !important;
}

@media (max-width: 860px) {
  .slider-caption {
    width: 100% !important;
    min-width: 0;
    min-height: 0;
  }
}

.home-slider .btn.btn-primary.btn-lg {
  border-radius: 999px !important;
  background: linear-gradient(135deg, #f0cf82, #c9a24a) !important;
}

.home-slider .btn.btn-outline-light {
  border-radius: 999px !important;
}

.slider-caption-panel {
  all: unset;
  display: block;
}

.slider-brand {
  margin: 0 0 18px !important;
  font-family: var(--font-display) !important;
  font-size: clamp(2.4rem, 5.4vw, 4.1rem) !important;
  font-weight: 800 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.04em !important;
  color: #fff !important;
  text-shadow: 0 12px 40px rgba(10, 31, 77, 0.35);
}

.slider-brand::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 16px;
  background: linear-gradient(90deg, #c9a24a, rgba(218, 167, 85, 0.35));
}

/* Slide 0 uses <h1> (the one real page heading); slides 1-2 use <h2> for
   correct heading hierarchy since a page should have one h1. Both need
   identical visual treatment or the caption card changes size and style
   on every slide transition. */
.slider-caption h1,
.slider-caption h2 {
  letter-spacing: -0.03em !important;
  color: #fff !important;
  font-size: clamp(1.45rem, 2.8vw, 2.15rem) !important;
  line-height: 1.18 !important;
  margin-bottom: 16px !important;
  font-weight: 600 !important;
  max-width: 18ch;
}

.slider-caption .gradient-text {
  background: linear-gradient(135deg, #e0bc6a 0%, #c9a24a 45%, #a8841a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.slider-lead {
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  margin-bottom: 28px !important;
  max-width: 40ch;
  /* Hard cap so the card's height stays predictable even when a narrower
     caption column (mid-width viewports) would otherwise wrap this into
     more lines than the slider has vertical room for. */
  display: -webkit-box !important;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Between the mobile stack (≤860px) and the roomy desktop width (~1300px+,
   where the container is wide enough for the caption's own 40% share to
   exceed its min-width floor), the card is stuck at that narrower floor
   width, wrapping the lead copy into more lines than usual. Trim padding,
   spacing, and the line clamp so it still clears the controls bar on
   shorter laptop/tablet viewports in this range. */
@media (max-width: 1360px) and (min-width: 861px) {
  .slider-caption {
    padding: 26px 38px !important;
    min-height: 360px !important;
  }
  .slider-brand {
    font-size: 2.1rem !important;
    margin-bottom: 8px !important;
  }
  .slider-caption h1,
  .slider-caption h2 {
    margin-bottom: 10px !important;
  }
  .slider-lead {
    margin-bottom: 18px !important;
    -webkit-line-clamp: 2 !important;
  }
  /* At this card width the two hero buttons' full-size padding/text
     don't fit on one line and wrap to a tall two-row stack. Shrinking
     them keeps the row single-line so it doesn't blow the caption's
     height budget. */
  .home-slider .slider-actions .btn {
    padding: 11px 20px !important;
    font-size: 0.86rem !important;
  }
}

/* Safety net for short browser windows regardless of width (e.g. a wide
   but vertically-squashed window) — the width-based rule above only
   catches narrow-card cases, so this covers the "plenty of width, not
   enough height" case on the actual vertical constraint instead of
   trying to infer it from viewport width. */
@media (max-height: 780px) {
  .slider-caption {
    padding: 24px 36px !important;
    min-height: 0 !important;
  }
  .slider-brand {
    font-size: 2.1rem !important;
    margin-bottom: 8px !important;
  }
  .slider-caption h1,
  .slider-caption h2 {
    margin-bottom: 10px !important;
  }
  .slider-lead {
    margin-bottom: 14px !important;
    -webkit-line-clamp: 2 !important;
  }
  .home-slider .slider-actions .btn {
    padding: 11px 20px !important;
    font-size: 0.86rem !important;
  }
  .slider-inner {
    padding-top: 24px !important;
    padding-bottom: 96px !important;
  }
  .slider-controls-inner {
    padding: 10px 0 8px !important;
  }
  .slider-dot {
    padding: 10px 16px 8px !important;
  }
  .slider-tab-index {
    font-size: 1.1rem !important;
  }
}

.slider-actions {
  gap: 14px !important;
}

.home-slider .btn-outline-light {
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: none !important;
}

.home-slider .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #c9a24a !important;
  color: #fff !important;
}

.slider-arrow {
  width: 46px !important;
  height: 46px !important;
  border-radius: 10px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(201, 162, 74, 0.35) !important;
  color: #0a1f4d !important;
  box-shadow: 0 10px 28px rgba(10, 31, 77, 0.2) !important;
  opacity: 0;
  transform: translateY(-50%) translateX(0);
  transition:
    opacity 0.35s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease !important;
}

.home-slider:hover .slider-arrow,
.home-slider:focus-within .slider-arrow {
  opacity: 1;
}

.slider-prev {
  left: 24px !important;
}

.slider-next {
  right: 24px !important;
}

.slider-arrow:hover {
  background: #c9a24a !important;
  border-color: #c9a24a !important;
  color: #0a1f4d !important;
  transform: translateY(-50%) scale(1.04) !important;
}

.slider-arrow:focus-visible,
.slider-dot:focus-visible,
.slider-pause:focus-visible {
  outline: 2px solid #c9a24a;
  outline-offset: 3px;
}

.slider-controls {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(10, 31, 77, 0.35) 40%,
    rgba(10, 31, 77, 0.88) 100%
  ) !important;
}

.slider-controls-inner {
  align-items: center !important;
  padding: 18px 0 14px !important;
}

.slider-tabs-label {
  display: none !important;
}

/* Numbered rail — deliberately not the rounded segmented-pill control every
   other hero slider uses. A single hairline runs the width of the tab row;
   each tab is a plain number + label separated by a vertical divider, and
   the active tab lights its number gold and draws a gradient bar over the
   hairline above it instead of getting its own filled pill background. */
.slider-dots {
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.slider-dot {
  min-height: 0 !important;
  padding: 16px 24px 12px !important;
  gap: 14px !important;
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

.slider-dot:last-child {
  border-right: none !important;
}

.slider-tab-index {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  color: rgba(201, 162, 74, 0.4);
  transition: color 0.3s ease;
}

.slider-dot::after {
  top: -1px !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  transform: scaleX(0) !important;
  transform-origin: left center;
  background: linear-gradient(90deg, #a8841a, #c9a24a, #e0bc6a) !important;
  border-radius: 0 !important;
}

.slider-dot.is-active {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.slider-dot.is-active::after {
  transform: scaleX(1) !important;
}

.slider-dot.is-active .slider-tab-index {
  color: #e0bc6a;
}

.slider-dot:hover:not(.is-active) .slider-tab-index {
  color: rgba(201, 162, 74, 0.7);
}

.slider-tab-icon {
  display: none !important;
}

.slider-hud {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.slider-pause {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.slider-pause:hover,
.slider-pause[aria-pressed="true"] {
  background: rgba(201, 162, 74, 0.2);
  border-color: rgba(201, 162, 74, 0.45);
  color: #e0bc6a;
}

.slider-counter {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

.slider-counter span {
  color: #e0bc6a !important;
}

.slider-progress {
  height: 2px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  overflow: hidden;
}

.slider-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #a8841a, #c9a24a, #e0bc6a) !important;
  transition: none;
}

.slider-slide .slider-anim {
  opacity: 0;
  transform: translateY(28px);
}

.slider-slide.is-animating.from-prev .slider-anim {
  transform: translateX(-28px);
}

.slider-slide.is-animating.from-next .slider-anim,
.slider-slide.is-animating:not(.from-prev) .slider-anim {
  transform: translateY(28px);
}

.slider-slide.is-animating .slider-anim-1 {
  animation: dabSliderReveal 0.7s 0.05s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}
.slider-slide.is-animating .slider-anim-2 {
  animation: dabSliderReveal 0.75s 0.16s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}
.slider-slide.is-animating .slider-anim-3 {
  animation: dabSliderReveal 0.75s 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}
.slider-slide.is-animating .slider-anim-4 {
  animation: dabSliderReveal 0.7s 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes dabSliderReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.slider-slide.is-animating.from-prev .slider-anim-1,
.slider-slide.is-animating.from-prev .slider-anim-2,
.slider-slide.is-animating.from-prev .slider-anim-3,
.slider-slide.is-animating.from-prev .slider-anim-4 {
  animation-name: dabSliderRevealPrev !important;
}

@keyframes dabSliderRevealPrev {
  from {
    opacity: 0;
    transform: translate3d(-24px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 768px) {
  .slider-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(10, 31, 77, 0.35) 0%,
        rgba(10, 31, 77, 0.55) 35%,
        rgba(10, 31, 77, 0.88) 100%
      ) !important;
  }

  .slider-inner {
    /* Bottom padding must clear the controls bar's actual rendered height
       (tabs row + padding + progress bar ≈ 144px at this breakpoint) or
       a bottom-aligned caption card sits partly behind it. */
    padding: 28px 0 156px !important;
    align-items: flex-end !important;
  }

  .slider-brand {
    font-size: clamp(2rem, 11vw, 2.7rem) !important;
    margin-bottom: 12px !important;
  }

  .slider-brand::after {
    width: 40px;
    margin-top: 12px;
  }

  .slider-caption h1,
  .slider-caption h2 {
    font-size: clamp(1.25rem, 5.5vw, 1.55rem) !important;
    max-width: none;
  }

  .slider-lead {
    font-size: 0.95rem !important;
    margin-bottom: 20px !important;
    max-width: none;
  }

  .slider-arrow {
    opacity: 0.85;
    width: 40px !important;
    height: 40px !important;
  }

  .slider-prev { left: 12px !important; }
  .slider-next { right: 12px !important; }

  .slider-dot {
    flex: 1;
    min-width: 0;
    padding: 10px 8px !important;
    gap: 8px !important;
    justify-content: center;
  }

  .slider-tab-index {
    font-size: 1rem !important;
  }

  .slider-tab-body {
    align-items: center !important;
  }

  .slider-tab-body small {
    display: none !important;
  }

  .slider-tab-body strong {
    font-size: 0.72rem !important;
  }

  .slider-counter {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slider-bg-image img,
  .slider-bg-image .img-placeholder,
  .slider-bg-image .hero-slide-img,
  .slider-progress-bar,
  .slider-slide .slider-anim {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .slider-arrow {
    opacity: 1;
  }
}


/* ══════════════════════════════════════════════════════════════
   Home sections — polish
   ══════════════════════════════════════════════════════════════ */

.capabilities-grid-6 {
  grid-template-columns: repeat(3, 1fr) !important;
}

.capabilities-section {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201, 162, 74, 0.1), transparent 60%),
    linear-gradient(180deg, #f4f7fc 0%, #fff 55%, #fff 100%) !important;
}

.capabilities-spotlight {
  background: linear-gradient(145deg, #0a1f4d 0%, #0f2a5c 55%, #243a66 100%) !important;
  box-shadow: 0 20px 48px rgba(10, 31, 77, 0.18) !important;
}

.capabilities-spotlight::before {
  background: radial-gradient(circle, rgba(201, 162, 74, 0.32), transparent 70%) !important;
}

.capabilities-spotlight-badge {
  background: rgba(201, 162, 74, 0.16) !important;
  border-color: rgba(201, 162, 74, 0.35) !important;
  color: #e0bc6a !important;
  border-radius: 8px !important;
}

.capabilities-spotlight h2 span {
  background: linear-gradient(135deg, #e0bc6a 0%, #c9a24a 45%, #a8841a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.capability-card {
  text-align: left !important;
  padding: 24px 20px !important;
  border-color: #d9e0ef !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(10, 31, 77, 0.04) !important;
}

.capability-card:hover {
  border-color: rgba(201, 162, 74, 0.45) !important;
  box-shadow: 0 16px 36px rgba(10, 31, 77, 0.08) !important;
}

.capability-icon {
  margin: 0 0 14px !important;
  background: rgba(201, 162, 74, 0.12) !important;
  color: #a8841a !important;
  border-radius: 12px !important;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.flc-icon {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.process-section-home .section-header p {
  max-width: 540px;
  margin: 0 auto;
  color: #5b6b8c;
}

.process-rail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-top: 8px;
}

.process-step-enhanced {
  position: relative;
  text-align: left;
  padding: 22px 16px 20px !important;
  background: #fff !important;
  border: 1px solid #d9e0ef !important;
  border-radius: 14px !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.process-step-enhanced:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 74, 0.45) !important;
  box-shadow: 0 14px 32px rgba(10, 31, 77, 0.08);
}

.process-step-enhanced .step-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(201, 162, 74, 0.12);
  color: #a8841a;
  font-size: 1rem;
  margin-bottom: 12px;
}

.process-step-enhanced .step-num {
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  color: #c9a24a !important;
  margin-bottom: 8px !important;
}

.process-step-enhanced h4 {
  font-family: var(--font-display);
  font-size: 0.98rem !important;
  margin-bottom: 8px !important;
}

.process-step-enhanced p {
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  color: #5b6b8c !important;
  margin: 0 !important;
}

.process-connector {
  display: none;
}

.process-section-home .section-cta {
  margin-top: 32px;
}

.case-section-home .section-header p {
  max-width: 540px;
  margin: 0 auto;
}

.case-grid-home {
  gap: 22px !important;
}

.case-card-home {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
}

.case-card-home .card-3d-inner {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 28px 24px !important;
  border: 1px solid #d9e0ef !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, #fff 0%, #f4f7fc 100%) !important;
  box-shadow: 0 10px 28px rgba(10, 31, 77, 0.04) !important;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.case-card-home:hover .card-3d-inner {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 74, 0.45) !important;
  box-shadow: 0 20px 44px rgba(10, 31, 77, 0.1) !important;
}

.case-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.case-index {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(10, 31, 77, 0.28);
}

.case-card-home h3 {
  font-size: 1.15rem !important;
  margin-bottom: 10px !important;
  color: #0a1f4d !important;
}

.case-card-home p {
  flex: 1;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: #5b6b8c !important;
  margin-bottom: 20px !important;
}

.case-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #d9e0ef;
}

.case-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #a8841a;
  opacity: 0.7;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.case-card-home:hover .case-link {
  opacity: 1;
  transform: translateX(3px);
}

.case-section-home .case-tag {
  border-radius: 8px !important;
  margin-bottom: 0 !important;
}

.case-section-home .case-stat {
  margin-top: 0 !important;
  border-radius: 8px !important;
}

.case-section-home .section-cta {
  margin-top: 32px;
}

.footer-cta-home {
  background: transparent !important;
  border: none !important;
  padding: 28px 0 48px !important;
}

.footer-cta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding: 42px 44px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(201, 162, 74, 0.22), transparent 55%),
    linear-gradient(135deg, #0a1f4d 0%, #0f2a5c 55%, #243a66 100%);
  color: #fff;
  box-shadow: 0 24px 56px rgba(10, 31, 77, 0.2);
}

.footer-cta-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e0bc6a;
}

.footer-cta-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.25;
  color: #fff !important;
  margin: 0 0 10px !important;
  max-width: 22ch;
}

.footer-cta-copy p {
  color: rgba(255, 255, 255, 0.72) !important;
  margin: 0 0 18px !important;
  max-width: 42ch;
}

.footer-cta-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-cta-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
}

.footer-cta-trust i {
  color: #c9a24a;
  font-size: 0.72rem;
}

.footer-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
  max-width: 320px;
}

.footer-cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-cta-links .btn {
  flex: 1 1 auto;
  white-space: nowrap;
}

.footer-cta-home .btn-outline-light {
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  text-align: center;
}

.footer-cta-links .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 0.8rem !important;
}

.footer-cta-links .btn-outline-light:hover {
  border-color: #c9a24a !important;
  color: #fff !important;
}

.footer-cta-home .btn-outline-light:hover {
  border-color: #c9a24a !important;
  background: rgba(201, 162, 74, 0.12) !important;
  color: #fff !important;
}

@media (max-width: 1100px) {
  .process-rail {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .capabilities-grid-6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .footer-cta-panel {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 28px;
  }

  .footer-cta-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .process-rail {
    grid-template-columns: 1fr 1fr;
  }

  .case-card-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-cta-actions {
    width: 100%;
  }

  .footer-cta-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .capabilities-grid-6,
  .process-rail {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   Inner pages — spacing, sections, cards, CTA
   ══════════════════════════════════════════════════════════════ */

.section.section-inner {
  padding: 48px 0 !important;
}

.section.section-inner.section-alt {
  background: #f4f7fc !important;
}

.page-hero-split {
  gap: 32px !important;
}

.page-hero-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e0bc6a;
}

.page-hero-simple {
  padding: 36px 0 !important;
}

.page-hero-simple .page-hero-copy {
  max-width: 640px;
}

/* Hero split image — fixed height regardless of the source photo's own
   aspect ratio. Without this, a portrait-oriented image (tall relative to
   its width) rendered at 100% column width with no height cap, stretching
   far past the copy column and dominating the hero; a landscape image
   happened to look fine only by chance. object-fit:cover on a height-
   constrained box crops any source photo to the same balanced frame. */
.page-hero .section-media {
  border-color: rgba(255, 255, 255, 0.12);
  height: 420px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-hero .section-media .section-img {
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.page-hero .img-placeholder {
  min-height: 220px;
  background: #52525b;
  color: #dce3f0;
}

.page-hero .img-placeholder-label { color: #f1f4fa; }
.page-hero .img-placeholder-hint { color: #8a96ad; }
.page-hero .img-placeholder-mark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  color: #0a1f4d;
  margin: 0 0 12px;
  line-height: 1.25;
}

.section-desc {
  color: #5b6b8c;
  line-height: 1.65;
  margin: 0 0 18px;
  max-width: none;
}

.section-content .section-tag {
  margin-bottom: 12px;
}

.check-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.check-list li {
  position: relative;
  padding-left: 26px;
  text-align: left;
  color: #4a5a78;
  font-size: 0.95rem;
  line-height: 1.45;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgba(201, 162, 74, 0.18);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.45);
}

/* Check lists sit on the dark hero on some pages, where the default
   slate text has almost no contrast. */
.page-hero .check-list li {
  color: rgba(255, 255, 255, 0.82) !important;
}

.page-hero .check-list li::before {
  background: rgba(201, 162, 74, 0.3);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.65);
}

.check-list-compact {
  margin-bottom: 16px;
  gap: 8px;
}

.check-list-compact li {
  font-size: 0.88rem;
}

.inner-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.inner-card-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.inner-card-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.inner-card-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Sectors We Serve on industries.html — same inner-card component as the
   3-column "What's Included" grids elsewhere, but sized down to fit 4 per
   row (8 sectors -> 2 clean rows instead of 3+3+2 leaving a gap). */
.sector-grid .icon-tile-lg {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  font-size: 1.25rem;
}
.sector-grid .inner-card-body {
  padding: 16px 16px 18px;
}
.sector-grid h3 {
  font-size: 0.95rem;
}
.sector-grid p {
  font-size: 0.82rem;
  margin-bottom: 8px;
}
.sector-grid .plan-features {
  gap: 7px;
  margin-bottom: 16px;
}
.sector-grid .plan-features li {
  font-size: 0.78rem;
  line-height: 1.4;
}
.sector-grid .btn-block {
  padding: 10px 14px;
  font-size: 0.85rem;
}

/* Our Products hub grid — same compact-4-column treatment as .sector-grid,
   plus a gradient sheen that sweeps across the icon tile on hover so the
   grid doesn't sit flat next to everything else on the page that already
   animates on hover. */
.product-hub-grid .icon-tile-lg {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  font-size: 1.25rem;
  position: relative;
  overflow: hidden;
}
.product-hub-grid .icon-tile-lg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201, 162, 74, 0.55), rgba(10, 31, 77, 0.55));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.product-hub-grid .inner-card:hover .icon-tile-lg::after {
  opacity: 1;
}
.product-hub-grid .inner-card:hover .icon-tile-lg i {
  position: relative;
  z-index: 1;
  color: #fff;
}
.product-hub-grid .inner-card {
  position: relative;
}
.product-hub-grid .inner-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  padding: 1px;
  background: linear-gradient(135deg, #c9a24a, #0a1f4d);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.product-hub-grid .inner-card:hover::before {
  opacity: 1;
}
.product-hub-grid .inner-card-body {
  padding: 16px 16px 18px;
}
.product-hub-grid h3 {
  font-size: 0.95rem;
}
.product-hub-grid .plan-badge {
  font-size: 0.68rem;
  padding: 4px 10px;
}
.product-hub-grid p {
  font-size: 0.82rem;
  margin-bottom: 8px;
}
.product-hub-grid .plan-features {
  gap: 7px;
  margin-bottom: 14px;
}
.product-hub-grid .plan-features li {
  font-size: 0.78rem;
  line-height: 1.4;
}
.product-hub-grid .btn-block {
  padding: 9px 12px;
  font-size: 0.8rem;
}

.inner-card-grid-6 {
  grid-template-columns: repeat(3, 1fr);
}

a.inner-card {
  text-decoration: none;
  color: inherit;
}

.inner-card {
  background: #fff;
  border: 1px solid #d9e0ef;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(10, 31, 77, 0.04);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.inner-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 74, 0.4);
  box-shadow: 0 16px 36px rgba(10, 31, 77, 0.08);
}

.inner-card-media {
  background: linear-gradient(135deg, rgba(10, 31, 77, 0.05) 0%, rgba(201, 162, 74, 0.1) 100%);
  border-bottom: 1px solid #d9e0ef;
}

.inner-card-media .section-img,
.inner-card-media .img-placeholder {
  min-height: 150px;
  border-radius: 0;
}

.inner-card-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.inner-card-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(201, 162, 74, 0.12);
  color: #a8841a;
  margin-bottom: 12px;
}

.inner-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: #0a1f4d;
  margin: 0 0 8px;
  line-height: 1.3;
}

.inner-card p {
  color: #5b6b8c;
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 10px;
}

.inner-card-note {
  font-size: 0.82rem !important;
  color: #8a96ad !important;
  margin-bottom: 14px !important;
}

.inner-card .card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #a8841a;
  text-decoration: none;
}

.inner-card .card-link:hover {
  color: #c9a24a;
}

.inner-card .case-tag {
  align-self: flex-start;
  margin-bottom: 10px;
}

.inner-card .case-stat {
  margin-top: 4px;
  margin-bottom: 12px;
}

.case-study-card .case-card-top {
  margin-bottom: 10px;
}

/* ══════════════════════════════════════════════════════════════
   Case studies hub — filter tabs, service icon-panel cards,
   category groups
   ══════════════════════════════════════════════════════════════ */

.cs-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: -8px 0 8px;
}

.cs-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid #d9e0ef;
  background: #fff;
  color: #3a4a66;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.cs-filter-tab:hover {
  border-color: rgba(201, 162, 74, 0.5);
  color: #a8841a;
  transform: translateY(-1px);
}

.cs-filter-tab.is-active {
  background: linear-gradient(135deg, #c9a24a 0%, #daa755 100%);
  border-color: transparent;
  color: #0a1f4d;
  box-shadow: 0 8px 20px rgba(201, 162, 74, 0.3);
}

.cs-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(10, 31, 77, 0.08);
  font-size: 0.76rem;
  font-weight: 700;
}

.cs-filter-tab.is-active .cs-filter-count {
  background: rgba(10, 31, 77, 0.16);
  color: #0a1f4d;
}

/* Category group sections toggled by the filter tabs. Content stays in
   the DOM either way (nothing removed, just hidden) so search engines
   and no-JS visitors still see every case study. */
.cs-group {
  transition: opacity 0.25s ease;
}

.cs-group.is-filtered-out {
  display: none;
}

/* Service case cards have no dedicated illustration (services use an
   icon motif sitewide, not photography), so the card media is a
   gradient panel carrying that service's own icon at large scale —
   consistent with the icon watermarks already used on service pages,
   rather than a generic stock-photo stand-in. */
.cs-icon-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  background:
    radial-gradient(ellipse 90% 90% at 30% 20%, rgba(201, 162, 74, 0.35), transparent 60%),
    linear-gradient(135deg, #0a1f4d 0%, #16306b 55%, #1c3d80 100%);
  color: rgba(255, 255, 255, 0.92);
  font-size: 2.6rem;
}

.cs-related-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #a8841a;
  text-decoration: none;
}

.cs-related-link i {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

.cs-related-link:hover { color: #c9a24a; }
.cs-related-link:hover i { transform: translateX(3px); }

.cs-card .inner-card-body {
  display: flex;
  flex-direction: column;
}

@media (max-width: 640px) {
  .cs-filter-tabs { gap: 8px; }
  .cs-filter-tab { padding: 8px 14px; font-size: 0.82rem; }
}

/* Case-study topic tags — a finer, second-tier filter under the category
   tabs, since the 3 category tabs alone still leave a 48-card wall inside
   "Services". Deliberately smaller and quieter than .cs-filter-tab (flat
   chips, thin border, no gradient) so it reads as a refinement of the
   category choice above it, not a second control of equal weight. */
.cs-topic-tags {
  max-width: 720px;
  margin: 18px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.cs-topic-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #e3e8f3;
  background: #f7f9fc;
  color: #5b6b8c;
  font-weight: 600;
  font-size: 0.72rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.cs-topic-tag:hover {
  border-color: rgba(201, 162, 74, 0.5);
  color: #a8841a;
}
.cs-topic-tag.is-active {
  background: #0a1f4d;
  border-color: #0a1f4d;
  color: #fff;
}
.cs-search-empty {
  text-align: center;
  color: #5b6b8c;
  margin: 18px 0 0;
  font-size: 0.92rem;
}
.cs-search-empty a {
  color: #a8841a;
  font-weight: 600;
}

/* Show-more collapse — grids default to 6 visible cards (nth-child) so
   a 48-card category doesn't dump its full wall on first paint. */
.cs-grid.is-collapsed .cs-card:nth-child(n+7) {
  display: none;
}
.cs-show-more {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}
.cs-show-more-btn i {
  margin-left: 6px;
  transition: transform 0.25s ease;
}
.cs-show-more-btn.is-expanded i {
  transform: rotate(180deg);
}

/* Search hides/shows individual cards regardless of collapse state. */
.cs-card.cs-search-hidden {
  display: none !important;
}
.cs-group.is-search-empty .cs-grid,
.cs-group.is-search-empty .cs-show-more {
  display: none;
}

/* Portfolio grid — logo-first cards (real client logos where supplied,
   a generated navy/gold monogram badge where not) in a uniform rounded-
   square frame so a mismatched set of source files/marks reads as one
   grid. auto-fit (not auto-fill) collapses unused column tracks so a
   short filtered result stretches to fill the row instead of leaving a
   ragged gap on the right. Filtering reuses .cs-filter-tab / .cs-topic-tag
   from the case-studies hub, so the two filter UIs on the site stay
   visually consistent. */
.portfolio-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}
.portfolio-card {
  flex: 0 1 200px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.portfolio-card:hover {
  box-shadow: 0 14px 30px rgba(10, 31, 77, 0.1);
  border-color: rgba(201, 162, 74, 0.4);
  transform: translateY(-3px);
}
.portfolio-card.is-filtered-out {
  display: none;
}
/* Outer rectangle stays a full-width band at the top of the card, now a
   shorter, wider strip (not the tall 8:5 block this used to be) so the
   card overall reads less top-heavy — width/columns are untouched, only
   the height shrinks. The logo sits inside it as a bordered white tile
   (the "inner rectangle"), given more horizontal room than vertical so
   it reads as a wide badge rather than a square — real logos and
   generated marks get the same treatment so a mismatched set of source
   files reads as one grid. */
.portfolio-card-logo {
  width: 100%;
  height: 148px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f9fc;
  border-bottom: 1px solid #e2e8f0;
  overflow: hidden;
  padding: 12px 16px;
  box-sizing: border-box;
}
.portfolio-card-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  padding: 8px 20px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}
.portfolio-card-body {
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
}
.portfolio-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.94rem;
  line-height: 1.25;
  color: #0a1f4d;
  margin: 0;
  /* Reserve space for 2 lines always (not just when a name is long enough
     to need it) so a short one-line name and a long two-line name produce
     the same card height instead of the card shrinking to fit its text. */
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.portfolio-card-industry {
  display: block;
  width: 100%;
  font-size: 0.76rem;
  font-weight: 600;
  color: #5b6b8c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portfolio-card-type {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(201, 162, 74, 0.14);
  color: #a8841a;
  margin-top: 2px;
}

/* FAQ category filter — identical treatment to .cs-filter-tabs so the two
   filter UIs on the site read as one system, not two different widgets. */
.faq-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.faq-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 24px;
  border: 1px solid #d9e0ef;
  background: #fff;
  color: #4a5a78;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.faq-filter-tab:hover {
  border-color: rgba(201, 162, 74, 0.5);
  color: #a8841a;
  transform: translateY(-1px);
}
.faq-filter-tab.is-active {
  background: linear-gradient(135deg, #c9a24a 0%, #daa755 100%);
  border-color: transparent;
  color: #0a1f4d;
}
.faq-filter-tab .cs-filter-count {
  background: #f0f2f7;
  color: #5b6b8c;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 10px;
}
.faq-filter-tab.is-active .cs-filter-count {
  background: rgba(10, 31, 77, 0.16);
  color: #0a1f4d;
}
.faq-filter-item.faq-filtered-out,
.faq-filter-item.cs-search-hidden,
.blog-card.faq-filtered-out {
  display: none;
}
@media (max-width: 640px) {
  .faq-filter-tabs { gap: 8px; }
  .faq-filter-tab { padding: 8px 14px; font-size: 0.82rem; }
}

/* ============================================================
   BLOG — featured post, card grid, and long-form article body.
   ============================================================ */

.blog-card-cat {
  display: inline-flex;
  align-items: center;
  background: rgba(201, 162, 74, 0.14);
  color: #a8841a;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 11px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #8a96ad;
  margin-top: 10px;
}
.blog-card-meta i { color: #c9a24a; }

.blog-featured {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #d9e0ef;
  background: #fff;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 28px rgba(10, 31, 77, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.blog-featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(10, 31, 77, 0.14);
  border-color: rgba(201, 162, 74, 0.4);
}
.blog-featured-media {
  min-height: 280px;
  overflow: hidden;
}
.blog-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-featured:hover .blog-featured-media img {
  transform: scale(1.06);
}
.blog-featured-body {
  padding: 36px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog-featured-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  color: #0a1f4d;
  margin: 0 0 12px;
  line-height: 1.3;
}
.blog-featured-body p {
  color: #5b6b8c;
  line-height: 1.6;
  margin: 0 0 14px;
}
.blog-featured-body .card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #a8841a;
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 8px;
}
.blog-featured-body .card-link i {
  transition: transform 0.25s ease;
}
.blog-featured:hover .card-link i {
  transform: translateX(4px);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #d9e0ef;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(10, 31, 77, 0.12);
  border-color: rgba(201, 162, 74, 0.4);
}
.blog-card-media {
  height: 168px;
  overflow: hidden;
}
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-card:hover .blog-card-media img {
  transform: scale(1.08);
}
.blog-card-body {
  padding: 20px 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-card-body h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: #0a1f4d;
  line-height: 1.35;
  margin: 0 0 8px;
  transition: color 0.2s ease;
}
.blog-card:hover .blog-card-body h3 {
  color: #a8841a;
}
.blog-card-body p {
  color: #5b6b8c;
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.blog-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
}
.blog-meta-row i { color: #e0bc6a; margin-right: 5px; }

/* Long-form article typography — deliberately generous line-height and
   measure, since this is the one place on the site meant to be read
   start to finish rather than scanned. */
.blog-article {
  max-width: 760px;
  margin: 0 auto;
  color: #33415c;
  font-size: 1.05rem;
  line-height: 1.75;
}
.blog-article p {
  margin: 0 0 22px;
}
.blog-article h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #0a1f4d;
  margin: 44px 0 18px;
  line-height: 1.3;
}
.blog-article h2:first-child { margin-top: 0; }
.blog-article ul {
  margin: 0 0 24px;
  padding-left: 22px;
}
.blog-article li {
  margin-bottom: 10px;
  line-height: 1.65;
}
.blog-article strong { color: #0a1f4d; }

.blog-share-row {
  max-width: 760px;
  margin: 40px auto 0;
  padding-top: 28px;
  border-top: 1px solid #e7ecf5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.blog-share-row span {
  font-family: var(--font-display);
  font-weight: 700;
  color: #0a1f4d;
}

@media (max-width: 991px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-media { min-height: 220px; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-featured-body { padding: 26px 22px; }
  .blog-article { font-size: 1rem; }
  .blog-share-row { flex-direction: column; align-items: flex-start; }
}

.pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.pills-wrap-center {
  justify-content: center;
  margin: 0 0 28px;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #d9e0ef;
  color: #0a1f4d;
  font-size: 0.82rem;
  font-weight: 600;
}

.section-alt .pill {
  background: #fff;
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.why-grid-light .why-card {
  background: #fff;
  border: 1px solid #d9e0ef;
  border-radius: 12px;
  padding: 16px 14px;
  box-shadow: 0 6px 18px rgba(10, 31, 77, 0.03);
}

.why-grid-light .why-card h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: #0a1f4d;
  margin: 0 0 6px;
}

.why-grid-light .why-card p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #5b6b8c;
}

.process-rail-page {
  margin-top: 8px;
}

.step-duration {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a8841a;
}

.page-cta-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 28px;
  align-items: center;
  padding: 28px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 55% 80% at 100% 0%, rgba(201, 162, 74, 0.2), transparent 55%),
    linear-gradient(135deg, #0a1f4d 0%, #0f2a5c 55%, #243a66 100%);
  color: #fff;
  box-shadow: 0 20px 48px rgba(10, 31, 77, 0.16);
}

/* Decorative watermark — faint, purely visual, sits in the empty navy
   space to the right of the copy column. Doesn't affect layout/content. */
.page-cta-panel::after {
  content: "\f4ad";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  font-size: clamp(140px, 16vw, 260px);
  line-height: 1;
  color: #fff;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

.page-cta-quickform,
.page-cta-copy {
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .page-cta-panel::after { display: none; }
}

.page-cta-panel:not(:has(.page-cta-media)):not(:has(.page-cta-quickform)) {
  grid-template-columns: 1fr;
  padding: 36px 40px;
}

/* The 22ch/42ch caps on .page-cta-copy h2/p exist to keep copy readable
   next to a form or image column. In the media-less, form-less variant
   there's no second column to make room for, so the same cap forced a
   full-width heading to wrap into three ragged lines instead of one or
   two clean ones. */
.page-cta-panel:not(:has(.page-cta-media)):not(:has(.page-cta-quickform)) .page-cta-copy {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.page-cta-panel:not(:has(.page-cta-media)):not(:has(.page-cta-quickform)) .page-cta-copy h2 {
  max-width: none;
}
.page-cta-panel:not(:has(.page-cta-media)):not(:has(.page-cta-quickform)) .page-cta-copy p {
  max-width: none;
}
.page-cta-panel:not(:has(.page-cta-media)):not(:has(.page-cta-quickform)) .page-cta-copy .btn {
  margin: 0 auto;
}

.page-cta-media {
  border-radius: 14px;
  overflow: hidden;
  background: #52525b;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.page-cta-quickform {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 24px 48px rgba(2, 8, 24, 0.28);
}

.page-cta-quickform .form-group { margin-bottom: 14px; }

.page-cta-quickform .form-group:last-of-type { margin-bottom: 16px; }

/* Compact variant — tighter padding/type scale so the form sits at the
   same visual height as the copy column beside it, not towering over it. */
.page-cta-quickform-compact {
  padding: 20px;
}
.page-cta-quickform-compact .form-row { gap: 10px; }
.page-cta-quickform-compact .form-group { margin-bottom: 10px; }
.page-cta-quickform-compact .form-group label {
  font-size: 0.78rem;
  margin-bottom: 4px;
}
.page-cta-quickform-compact .form-control {
  padding: 9px 12px;
  font-size: 0.88rem;
}
.page-cta-quickform-compact .captcha-field { margin-top: 0; }
.page-cta-quickform-compact .captcha-question {
  height: 38px;
  padding: 0 12px;
  font-size: 0.92rem;
}
.page-cta-quickform-compact .captcha-refresh { width: 36px; height: 36px; }
.page-cta-quickform-compact .captcha-input { max-width: 140px; min-width: 115px; }
.page-cta-quickform-compact .btn-block { padding: 10px 20px; font-size: 0.88rem; }

.page-cta-quickform-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #0a1f4d;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-cta-quickform-title i { color: #c9a24a; }

.page-cta-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.page-cta-media .img-placeholder,
.page-cta-media .section-img {
  min-height: 200px;
  border-radius: 0;
  background: #52525b;
}

.page-cta-media .img-placeholder-label { color: #f1f4fa; }
.page-cta-media .img-placeholder-hint { color: #8a96ad; }

.page-cta-copy .footer-cta-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e0bc6a;
}

.page-cta-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.25;
  max-width: 22ch;
}

.page-cta-copy p {
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 20px;
  max-width: 42ch;
  line-height: 1.6;
}

.contact-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 24px;
  align-items: stretch;
}

.contact-aside-media {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #d9e0ef;
  background: linear-gradient(135deg, rgba(10, 31, 77, 0.05) 0%, rgba(201, 162, 74, 0.1) 100%);
  min-height: 100%;
}

.contact-aside-media .img-placeholder,
.contact-aside-media .section-img {
  min-height: 100%;
  height: 100%;
  border-radius: 0;
}

.contact-map-frame {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  display: block;
}

.form-card {
  max-width: none !important;
  margin: 0 !important;
  border-color: #d9e0ef !important;
  border-radius: 16px !important;
  padding: 28px !important;
}

.form-card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #0a1f4d;
  margin: 0 0 6px;
}

.form-card-lead {
  color: #5b6b8c;
  font-size: 0.92rem;
  margin: 0 0 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-card-alt {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid #eef2f8;
  font-size: 0.88rem;
  color: #5b6b8c;
  text-align: center;
}

.form-card-alt a {
  color: #a8841a;
  font-weight: 700;
  text-decoration: none;
}

.form-card-alt a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   Dynamic forms (schema-driven) + CAPTCHA
   ══════════════════════════════════════════════════════════════ */

.dyn-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.dyn-field { min-width: 0; }
.dyn-field-full { grid-column: 1 / -1; }

.dyn-form .form-group label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #0a1f4d;
  margin-bottom: 7px;
}

.dyn-form .form-group label i {
  font-size: 0.72rem;
  color: #c9a24a;
}

.dyn-req { color: #c9a24a; }
.dyn-field-optional { font-size: 0.76rem; font-weight: 400; color: #8a96ad; }

.dyn-form .form-control {
  border-radius: 10px;
  font-size: 0.92rem;
  color: #0a1f4d;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.dyn-form .form-control::placeholder { color: #9aa6bd; }

.dyn-form select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235b6b8c'%3E%3Cpath d='M8 11.5 2.5 6h11z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 38px;
  cursor: pointer;
}

.dyn-field.has-error .form-control {
  border-color: #dc2626;
  background: #fff6f6;
}

.dyn-error {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #dc2626;
}

.dyn-field-check { margin-top: -2px; }

.dyn-check {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  background: #f4f7fc;
  border: 1.5px solid #d9e0ef;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500 !important;
  font-size: 0.87rem !important;
  color: #4a5a78 !important;
  margin-bottom: 0 !important;
}

.dyn-check:hover { border-color: #c9a24a; }

.dyn-check input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: #c9a24a;
  flex-shrink: 0;
  cursor: pointer;
}

/* Honeypot — kept in the layout but out of sight and out of the tab order. */
.dyn-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.captcha-field { margin-top: 4px; }

.captcha-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.captcha-image {
  display: block;
  width: 210px;
  height: 68px;
  border: 1.5px solid #d9e0ef;
  border-radius: 10px;
  background: #f7f9fd;
  user-select: none;
  flex-shrink: 0;
}

.captcha-refresh {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #d9e0ef;
  border-radius: 10px;
  background: #fff;
  color: #0a1f4d;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.4s;
}

.captcha-refresh:hover {
  background: #0a1f4d;
  border-color: #0a1f4d;
  color: #fff;
}

.captcha-refresh.is-spinning i { animation: captchaSpin 0.6s ease; }

@keyframes captchaSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.captcha-input {
  flex: 1 1 150px;
  min-width: 130px;
  max-width: 220px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1rem !important;
}

.captcha-input::placeholder {
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 500;
}

.captcha-hint {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  color: #8a96ad;
}

/* Arithmetic captcha — replaces the image-code widget on a static site
   where there's no backend to generate/verify a real image captcha, but a
   client-side sum check still deters naive form-spam bots. */
.captcha-question {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border: 1.5px solid #d9e0ef;
  border-radius: 10px;
  background: linear-gradient(135deg, #f7f9fd 0%, #eef2f8 100%);
  color: #0a1f4d;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  user-select: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.captcha-input-numeric {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
}

.captcha-error {
  display: block;
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #c0392b;
}

.dyn-submit {
  width: 100%;
  margin-top: 22px;
  justify-content: center;
}

.dyn-submit.is-sending {
  opacity: 0.72;
  pointer-events: none;
}

.dyn-form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #8a96ad;
  text-align: center;
}

.dyn-form-note i { color: #c9a24a; }

/* Alerts */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  line-height: 1.6;
}

.alert i { margin-top: 2px; font-size: 1rem; }

.alert-success {
  background: #f0fdf5;
  border: 1px solid #bbf7d0;
  color: #15803d;
}

.alert-error {
  background: #fff5f5;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.alert-error div + div { margin-top: 4px; }

@media (max-width: 600px) {
  .dyn-form-grid { grid-template-columns: 1fr; }
  .captcha-input { max-width: none; flex-basis: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   Get a Quote page
   ══════════════════════════════════════════════════════════════ */

.quote-badges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 34px;
}

.quote-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #d9e0ef;
  border-radius: 14px;
}

.quote-badge-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(201, 162, 74, 0.14);
  color: #a8841a;
  font-size: 0.95rem;
}

.quote-badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.96rem;
  color: #0a1f4d;
  line-height: 1.3;
}

.quote-badge span span,
.quote-badge div span {
  display: block;
  font-size: 0.78rem;
  color: #5b6b8c;
}

.quote-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 26px;
  align-items: start;
}

.quote-form-card { padding: 32px !important; }

.quote-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: calc(var(--header-h) + var(--top-bar-h) + 20px);
}

.quote-aside-card {
  padding: 22px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #d9e0ef;
}

.quote-aside-card h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: #0a1f4d;
  margin: 0 0 6px;
}

.quote-aside-card > p {
  font-size: 0.86rem;
  color: #5b6b8c;
  margin: 0 0 16px;
}

.quote-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #eef2f8;
  text-decoration: none;
}

.quote-contact-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(10, 31, 77, 0.07);
  color: #0a1f4d;
  font-size: 0.88rem;
}

.quote-contact-icon-wa {
  background: rgba(37, 211, 102, 0.14);
  color: #128c7e;
}

.quote-contact-row small {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a96ad;
}

.quote-contact-row strong {
  display: block;
  font-size: 0.9rem;
  color: #0a1f4d;
}

.quote-contact-row:hover strong { color: #a8841a; }

.quote-steps {
  margin: 0;
  padding: 0 0 0 4px;
  list-style: none;
  counter-reset: quotestep;
}

.quote-steps li {
  position: relative;
  counter-increment: quotestep;
  padding: 0 0 14px 34px;
}

.quote-steps li::before {
  content: counter(quotestep);
  position: absolute;
  left: 0;
  top: 0;
  width: 23px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--gradient);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.quote-steps strong {
  display: block;
  font-size: 0.9rem;
  color: #0a1f4d;
}

.quote-steps span {
  display: block;
  font-size: 0.81rem;
  line-height: 1.55;
  color: #5b6b8c;
}

.quote-aside-trust {
  background: linear-gradient(150deg, #0a1f4d 0%, #0f2a5c 100%);
  border-color: transparent;
}

.quote-aside-trust p {
  font-size: 0.86rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.74);
  margin: 12px 0 14px;
}

.quote-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(201, 162, 74, 0.16);
  border: 1px solid rgba(201, 162, 74, 0.4);
  color: #e0bc6a;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.quote-aside-trust .card-link { color: #e0bc6a; }

@media (max-width: 1024px) {
  .quote-layout { grid-template-columns: 1fr; }
  .quote-aside { position: static; }
  .quote-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .quote-badges { grid-template-columns: 1fr; }
  .quote-form-card { padding: 22px !important; }
}

.contact-info-card {
  border-color: #d9e0ef !important;
  border-radius: 16px !important;
}

.contact-info-card a,
.contact-info-card p {
  color: #4a5a78;
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.5;
}

.contact-info-card a:hover {
  color: #a8841a;
}

.legal-content {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #d9e0ef;
  border-radius: 16px;
  padding: 32px 36px;
  box-shadow: 0 8px 24px rgba(10, 31, 77, 0.04);
}

.legal-content h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #0a1f4d;
  margin: 28px 0 10px;
}

.legal-content p {
  color: #4a5a78;
  line-height: 1.7;
  margin: 0 0 12px;
}

.breadcrumbs {
  padding: 10px 0 !important;
}

.stats-grid {
  gap: 16px !important;
}

.stat-card {
  border-color: #d9e0ef !important;
  border-radius: 16px !important;
  padding: 22px 16px !important;
}

@media (max-width: 1024px) {
  .inner-card-grid,
  .inner-card-grid-3,
  .inner-card-grid-4,
  .inner-card-grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-cta-panel {
    grid-template-columns: 1fr;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-aside-media .img-placeholder,
  .contact-aside-media .section-img {
    min-height: 180px;
  }
}

@media (max-width: 768px) {
  .section.section-inner {
    padding: 36px 0 !important;
  }

  .page-hero {
    padding: 28px 0 24px !important;
  }

  .inner-card-grid,
  .inner-card-grid-2,
  .inner-card-grid-3,
  .inner-card-grid-4,
  .inner-card-grid-6 {
    grid-template-columns: 1fr;
  }

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

  .form-row {
    grid-template-columns: 1fr;
  }

  .legal-content {
    padding: 24px 18px;
  }

  .page-cta-panel:not(:has(.page-cta-media)),
  .page-cta-panel {
    padding: 24px 20px;
  }
}

/* ══════════════════════════════════════════════════════════════
   Responsive optimization — tablet + desktop + mobile
   ══════════════════════════════════════════════════════════════ */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Opening a mega-menu adds overflow:hidden to <body> (scroll lock), which
     removes the scrollbar and widens the usable viewport by its width —
     shifting every centered, fixed-position element (the whole header)
     sideways on every open/close. Reserving the gutter permanently means
     removing the scrollbar never changes the available width. */
  scrollbar-gutter: stable;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

.container {
  width: min(1120px, calc(100% - 40px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Large desktop — Wide Canvas: fluid width with a small fixed gutter
   instead of the old 1180px hard cap, so content uses far more of the
   screen on modern monitors instead of leaving large dead margins. */
@media (min-width: 1200px) {
  .container {
    width: min(1680px, calc(100% - 72px)) !important;
  }

  .nav-link {
    font-size: 0.86rem !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Tablet landscape / small laptop */
@media (max-width: 1199px) and (min-width: 992px) {
  .nav-link,
  .nav-dropdown-toggle {
    font-size: 0.78rem !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .logo,
  .logo-img {
    height: 42px !important;
    max-width: 215px !important;
  }

  :root {
    --header-h: 68px !important;
  }

  .nav-cta,
  a.nav-cta.btn,
  a.btn.btn-primary.nav-cta {
    padding: 0 14px !important;
    font-size: 0.76rem !important;
    margin-left: 8px !important;
  }

  .features-jumbo-inner {
    grid-template-columns: minmax(200px, 230px) 1fr !important;
    gap: 20px !important;
  }

  .jumbo-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .home-slider .slider-caption {
    max-width: 520px !important;
  }

  .process-rail {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .inner-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Tablet portrait */
@media (max-width: 991px) and (min-width: 769px) {
  :root {
    --header-h: 68px !important;
  }

  .logo,
  .logo-img {
    height: 42px !important;
    max-width: 225px !important;
  }

  .container {
    width: min(100%, calc(100% - 36px)) !important;
  }

  .section.section-inner,
  .section.section-compact {
    padding: 40px 0 !important;
  }

  .page-hero {
    padding: 32px 0 28px !important;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .process-rail,
  .process-rail-page {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .capabilities-grid-6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .feature-link-grid-enhanced,
  .feature-link-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .cards-3d-grid,
  .case-grid-home {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .footer-cta-panel {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .slider-controls-inner {
    gap: 12px !important;
  }

  .slider-dot {
    padding: 14px 18px 10px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .container {
    width: calc(100% - 28px) !important;
  }

  /* Top bar (phone/email/address) hidden entirely on mobile — it ate too
     much vertical space once all three chips were shown, and pushed the
     header + mobile nav panel's top offset around unpredictably.
     --top-bar-h goes to 0 so every fixed-position element anchored to
     "top bar + header" (header itself, mobile nav panel, dropdowns, page
     padding-top) collapses cleanly to just the header height. */
  :root {
    --top-bar-h: 0px !important;
  }

  .top-bar {
    display: none !important;
  }

  /* Scroll-triggered reveal (opacity:0 until an IntersectionObserver adds
     .visible) has shown up unreliably on mobile — e.g. the portfolio grid
     staying blank until some unrelated interaction (like clicking a
     filter tab) forced a layout recalc. Skip the animation entirely on
     mobile so content is never gated behind it; desktop keeps the
     scroll-reveal effect untouched. */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Footer: 4 link columns were stacking single-file, leaving half the
     width empty. Brand block (logo/description/social) stays full width;
     the 4 link columns pair up 2-per-row underneath instead. */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 20px !important;
  }

  .footer-brand {
    grid-column: 1 / -1 !important;
  }

  /* Portfolio grid: 2 cards per row instead of 1, sized with calc() so it
     holds exactly 2 per row at any mobile width down to the smallest
     phones rather than a fixed px card width. */
  .portfolio-grid {
    gap: 14px !important;
  }

  .portfolio-card {
    flex: 0 1 calc(50% - 7px) !important;
  }

  .section.section-inner,
  .section.section-compact {
    padding: 32px 0 !important;
  }

  .section-header h2,
  .capabilities-spotlight h2 {
    font-size: clamp(1.25rem, 6vw, 1.55rem) !important;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .stat-card {
    padding: 18px 12px !important;
  }

  .stat-number {
    font-size: 1.7rem !important;
  }

  .process-rail,
  .process-rail-page {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .feature-link-grid-enhanced,
  .feature-link-grid,
  .cards-3d-grid,
  .case-grid-home {
    grid-template-columns: 1fr !important;
  }

  .home-slider .slider-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .home-slider .slider-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .slider-arrow {
    display: none !important;
  }

  .slider-dots {
    width: 100% !important;
  }

  .footer-cta-actions {
    width: 100% !important;
  }

  .footer-cta-actions .btn,
  .page-cta-copy .btn {
    width: 100%;
    justify-content: center;
  }

  .floating-social {
    display: flex !important;
    top: auto !important;
    left: auto !important;
    right: 18px !important;
    bottom: 18px !important;
    transform: none !important;
    gap: 0 !important;
  }

  .floating-social-btn {
    display: none !important;
  }

  .floating-social .floating-whatsapp {
    display: flex !important;
    position: relative !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    margin: 0 !important;
    z-index: 9990 !important;
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45), 0 5px 0 #0a6b44 !important;
  }

  .floating-social .floating-whatsapp-icon {
    font-size: 1.55rem !important;
  }

  .floating-social .floating-whatsapp-pulse {
    border-radius: 50% !important;
  }

  .scroll-top {
    bottom: 18px !important;
    left: 18px !important;
    right: auto !important;
  }

  .form-card {
    padding: 20px !important;
  }

  .check-list li {
    font-size: 0.9rem;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .container {
    width: calc(100% - 24px) !important;
  }

  :root {
    --header-h: 60px !important;
  }

  .logo,
  .logo-img {
    height: 32px !important;
    max-width: 170px !important;
  }

  .stats-grid,
  .process-rail,
  .process-rail-page,
  .capabilities-grid-6 {
    grid-template-columns: 1fr !important;
  }

  .page-hero h1 {
    font-size: 1.45rem !important;
  }

  .slider-brand {
    font-size: 1.85rem !important;
  }

  .slider-hud {
    gap: 6px;
  }

  .contact-info-grid {
    gap: 12px !important;
  }
}

/* Reduce motion globally */
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-menu.features-jumbo,
  .features-jumbo-backdrop,
  .inner-card,
  .reveal {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   Rebuild additions — icon tiles, testimonials, logo strip,
   FAQ accordion, buy/rent plan cards
   ========================================================= */

/* ── Icon tiles (used instead of stock photography on card grids) ── */
.icon-tile {
  width: 56px;
  height: 56px;
  margin: 0 0 18px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a1f4d 0%, #0f2a5c 100%);
  color: #c9a24a;
  font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(10, 31, 77, 0.18);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

/* Icons signal hover with a soft expanding glow ring + gentle lift —
   no rotation, reads as more refined than a spinning icon. */
.inner-card:hover .icon-tile,
.capability-card:hover .capability-icon,
.feature-link-card:hover .flc-icon,
.stat-card:hover .stat-icon {
  transform: scale(1.08) translateY(-2px);
  box-shadow:
    0 0 0 7px rgba(201, 162, 74, 0.14),
    0 12px 24px rgba(10, 31, 77, 0.22);
}

.icon-tile-gold {
  background: linear-gradient(135deg, #c9a24a 0%, #daa755 100%);
  color: #0a1f4d;
  box-shadow: 0 8px 20px rgba(201, 162, 74, 0.28);
}

.icon-tile-lg {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  font-size: 1.6rem;
}

.icon-tile-sm {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 1rem;
}

/* ── Testimonials ── */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.testimonial-card {
  background: #fff;
  border: 1px solid #d9e0ef;
  border-radius: 16px;
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(10, 31, 77, 0.04);
}

.testimonial-quote-icon {
  color: rgba(201, 162, 74, 0.5);
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.testimonial-text {
  color: #3a4a66;
  font-size: 0.96rem;
  line-height: 1.65;
  margin: 0 0 18px;
  flex: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Testimonial avatars — a colored gradient (from the site's own navy/gold
   palette, not a generic pink/blue split) rather than a flat gray circle,
   picked by data-gender so the wall of quotes doesn't read as one repeated
   placeholder icon. A diagonal light sweep loops across each one; kept
   slow and soft since it's decorative, not a loading indicator. */
.testimonial-avatar {
  position: relative;
  overflow: hidden;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 31, 77, 0.06);
  border: 1px solid rgba(10, 31, 77, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b6b8c;
  flex-shrink: 0;
}
.testimonial-avatar[data-gender="m"] {
  background: linear-gradient(135deg, #0a1f4d 0%, #2f5fa8 100%);
  border-color: transparent;
  color: #dce6f7;
}
.testimonial-avatar[data-gender="f"] {
  background: linear-gradient(135deg, #a8841a 0%, #e6c375 100%);
  border-color: transparent;
  color: #3a2c05;
}
.testimonial-avatar[data-gender]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%);
  background-size: 220% 220%;
  background-position: 120% 120%;
  animation: testimonialAvatarShimmer 3.2s ease-in-out infinite;
}
@keyframes testimonialAvatarShimmer {
  0% { background-position: 120% 120%; }
  50% { background-position: -20% -20%; }
  100% { background-position: -20% -20%; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-avatar[data-gender]::after { animation: none; }
}

.testimonial-author strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: #0a1f4d;
}

.testimonial-author span {
  display: block;
  font-size: 0.8rem;
  color: #8a96ad;
}

/* Testimonial rotator — 9 quotes, 3 groups of 3, one group visible at a
   time. Cross-fades between groups on a timer (see main.js initTestimonials);
   falls back to showing every group stacked, statically, under
   prefers-reduced-motion so nothing is lost for users who opt out of motion. */
.testimonial-rotator {
  position: relative;
}

.testimonial-rotator .testimonial-grid {
  display: none;
}

.testimonial-rotator .testimonial-grid.is-active {
  display: grid;
  animation: testimonialFadeIn 0.5s ease both;
}

@keyframes testimonialFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.testimonial-rotator .testimonial-grid.is-leaving {
  animation: testimonialFadeOut 0.35s ease both;
}

@keyframes testimonialFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.testimonial-rotator-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.testimonial-rotator-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(10, 31, 77, 0.16);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.testimonial-rotator-dot:hover { background: rgba(201, 162, 74, 0.5); }

.testimonial-rotator-dot.is-active {
  background: #c9a24a;
  transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-rotator .testimonial-grid,
  .testimonial-rotator .testimonial-grid.is-active {
    display: grid;
    animation: none;
    margin-bottom: 20px;
  }
  .testimonial-rotator-dots {
    display: none;
  }
}

/* ── Client logo strip ── */
.logo-strip {
  text-align: center;
}

.logo-strip-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a96ad;
  margin-bottom: 22px;
}

/* Marquee: the track holds the logo list twice back to back (see
   Home.ps1) and scrolls exactly 50% of its own width, so the moment the
   first copy has fully scrolled off, the second copy is sitting exactly
   where the first one started — a seamless, gapless loop. The viewport's
   mask fades logos in/out at the edges instead of a hard clip, and
   hovering anywhere over the strip pauses the animation so a user can
   actually read a name. */
.logo-strip-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.logo-strip-track {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 16px;
  width: max-content;
  animation: logo-marquee 34s linear infinite;
}

.logo-strip-set {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 16px;
}

.logo-strip-viewport:hover .logo-strip-track {
  animation-play-state: paused;
}

@keyframes logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-strip-track {
    animation: none;
  }
}

/* Every logo sits in the same bordered white tile regardless of its own
   source aspect ratio/colors — object-fit:contain plus a shared frame is
   what makes a mismatched set of client-supplied logos read as one
   consistent trust bar instead of a row of random image sizes. */
.logo-strip-item {
  width: 160px;
  height: 76px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(10, 31, 77, 0.04);
  padding: 14px 22px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.logo-strip-item:hover {
  box-shadow: 0 10px 24px rgba(10, 31, 77, 0.1);
  border-color: rgba(201, 162, 74, 0.4);
  transform: translateY(-2px);
}

.logo-strip-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) opacity(0.72);
  transition: filter 0.25s ease;
}

.logo-strip-item:hover img {
  filter: grayscale(0) opacity(1);
}

/* Neutral placeholder mark for a slot without a real client logo yet —
   deliberately abstract (not styled to resemble any real brand) so the
   strip still reads as a finished design while specific logos are
   pending. Swap in a real <img> inside the same .logo-strip-item frame
   the moment a logo file exists; no other markup changes. */
.logo-strip-placeholder {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a1f4d 0%, #c9a24a 100%);
  opacity: 0.45;
}

/* ── FAQ accordion (native <details>/<summary> — no JS required) ── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: linear-gradient(135deg, #ffffff 0%, #f6f8fc 100%);
  border: 1px solid #e1e7f2;
  border-radius: 16px;
  padding: 4px 24px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, transform 0.25s ease;
}

.faq-item:hover {
  border-color: rgba(201, 162, 74, 0.3);
  box-shadow: 0 10px 24px rgba(10, 31, 77, 0.06);
  transform: translateY(-1px);
}

.faq-item[open] {
  background: linear-gradient(135deg, #ffffff 0%, #fbf6e8 100%);
  border-color: rgba(201, 162, 74, 0.5);
  box-shadow: 0 16px 32px rgba(10, 31, 77, 0.09);
  transform: none;
}

.faq-question {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: #0a1f4d;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-caret {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(201, 162, 74, 0.12);
  color: #a8841a;
  font-size: 0.8rem;
  transition: transform 0.3s ease, background 0.3s ease;
  flex-shrink: 0;
}

.faq-item[open] .faq-caret {
  transform: rotate(180deg);
  background: rgba(201, 162, 74, 0.22);
}

/* Product "Feature Modules" wizard — a single-open accordion (native
   <details name="">, so opening one group closes the others with no JS).
   Each group's list expands directly under its own header, instead of a
   separate tab strip driving one shared panel lower on the page. Closed
   items keep a mild gradient fill so the block still reads as one unit;
   the open item goes solid white so it's unambiguous which one you're
   looking at. */
.module-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(10, 31, 77, 0.06);
  color: #5b6b8c;
  font-size: 0.72rem;
  font-weight: 700;
  transition: background 0.25s ease, color 0.25s ease;
}
.module-wizard {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.module-wizard-item {
  border: 1px solid #d9e0ef;
  border-radius: 14px;
  background: linear-gradient(120deg, #f7f9fc 0%, #eef2fb 100%);
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.module-wizard-item:hover {
  border-color: rgba(201, 162, 74, 0.35);
}
.module-wizard-item[open] {
  background: #fff;
  border-color: rgba(201, 162, 74, 0.5);
  box-shadow: 0 14px 30px rgba(10, 31, 77, 0.08);
}
.module-wizard-header {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: #0a1f4d;
}
.module-wizard-header::-webkit-details-marker {
  display: none;
}
.module-wizard-tab-title {
  flex: 1 1 auto;
}
.module-wizard-item[open] .module-count {
  background: rgba(201, 162, 74, 0.18);
  color: #a8841a;
}
.module-wizard-caret {
  color: #a8841a;
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.module-wizard-item[open] .module-wizard-caret {
  transform: rotate(180deg);
}
.module-wizard-panel {
  padding: 2px 22px 22px;
  animation: moduleWizardFade 0.3s ease;
}
.module-wizard-panel .check-list {
  margin: 0;
  columns: 2;
  column-gap: 30px;
}
.module-wizard-panel .check-list li {
  break-inside: avoid;
}
@keyframes moduleWizardFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .module-wizard-panel { animation: none; }
  .module-wizard-item { transition: none; }
}
@media (max-width: 767px) {
  .module-wizard-header { padding: 14px 16px; font-size: 0.84rem; }
  .module-wizard-panel { padding: 2px 16px 18px; }
  .module-wizard-panel .check-list { columns: 1; }
}

.faq-answer {
  padding: 2px 0 22px;
  margin-top: 2px;
  border-top: 1px solid rgba(10, 31, 77, 0.07);
  color: #5b6b8c;
  font-size: 0.92rem;
  line-height: 1.65;
}

.faq-answer p {
  margin: 14px 0 0;
}

/* ── Buy vs. rent plan cards (no public pricing) ── */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.plan-card {
  background: #fff;
  border: 1px solid #d9e0ef;
  border-radius: 18px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}

.plan-card.is-featured {
  border-color: rgba(201, 162, 74, 0.5);
  box-shadow: 0 16px 36px rgba(10, 31, 77, 0.08);
  position: relative;
}

.plan-badge {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.plan-badge-buy {
  color: #0a1f4d;
  background: rgba(10, 31, 77, 0.08);
}

.plan-badge-rent {
  color: #a8841a;
  background: rgba(201, 162, 74, 0.16);
}

.plan-card h3 {
  font-family: var(--font-display);
  color: #0a1f4d;
  font-size: 1.3rem;
  margin: 0 0 8px;
}

.plan-card > p {
  color: #5b6b8c;
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 18px;
}

.plan-features {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: #3a4a66;
  line-height: 1.5;
}

.plan-features li i {
  color: #a8841a;
  margin-top: 3px;
  flex-shrink: 0;
}

/* style.css's base .plan-features li::before auto-draws a plain "✓"
   before every item; every list we render already includes its own
   <i class="fas fa-check"> icon, so the base rule was stacking a second,
   differently-styled tick in front of ours. Suppress it here since
   dab-overrides.css loads after style.css. */
.plan-features li::before {
  content: none;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

@media (max-width: 900px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
  .plan-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   GLOBAL — mild 3D depth, layered shading, background props.
   Site-wide via shared component classes, no per-page markup
   changes required. Deliberately restrained, not flashy. ===== */

/* ---- Mild background props on accent sections/banners only,
   not on every plain section — keeps it a rhythm, not noise. ---- */
.section-alt,
.page-hero {
  position: relative;
  overflow: hidden;
}
.section-alt::before,
.page-hero::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  top: -140px;
  right: -100px;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(201, 162, 74, 0.12), transparent 70%);
}
.section-alt::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  bottom: -150px;
  left: -110px;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(10, 31, 77, 0.06), transparent 70%);
}
.page-hero::before {
  background: radial-gradient(circle, rgba(201, 162, 74, 0.18), transparent 70%);
}
.section-alt > .container,
.page-hero > .container {
  position: relative;
  z-index: 1;
}

/* ---- Scroll reveal: subtle pop instead of a flat fade ---- */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- Cascading stagger for grids marked [data-stagger] ---- */
[data-stagger] > *:nth-child(1) { transition-delay: 0s; }
[data-stagger] > *:nth-child(2) { transition-delay: 0.06s; }
[data-stagger] > *:nth-child(3) { transition-delay: 0.12s; }
[data-stagger] > *:nth-child(4) { transition-delay: 0.18s; }
[data-stagger] > *:nth-child(5) { transition-delay: 0.24s; }
[data-stagger] > *:nth-child(6) { transition-delay: 0.3s; }
[data-stagger] > *:nth-child(7) { transition-delay: 0.36s; }
[data-stagger] > *:nth-child(8) { transition-delay: 0.42s; }

/* ---- Mild 3D tilt + layered shading on cards site-wide.
   --tilt-x/--tilt-y are updated by main.js on mousemove; the
   card itself owns the transform declaration so there's never
   a specificity fight with the existing hover-lift rules. ---- */
.inner-card,
.capability-card,
.feature-link-card,
.case-card-home,
.stat-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 0.2s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow:
    0 1px 2px rgba(10, 31, 77, 0.04),
    0 10px 24px -12px rgba(10, 31, 77, 0.1) !important;
}
.inner-card:hover,
.feature-link-card:hover,
.case-card-home:hover {
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-5px);
  box-shadow:
    0 2px 4px rgba(10, 31, 77, 0.06),
    0 22px 44px -16px rgba(10, 31, 77, 0.16) !important;
}
.capability-card:hover {
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-3px);
}
.stat-card:hover {
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-3px);
  box-shadow:
    0 2px 4px rgba(10, 31, 77, 0.05),
    0 16px 32px -14px rgba(10, 31, 77, 0.14);
}
@media (hover: none) {
  /* Touch devices: skip tilt tracking, keep the lift */
  .inner-card, .capability-card, .feature-link-card, .case-card-home, .stat-card {
    transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: opacity 0.3s ease; transform: none !important; }
  .inner-card, .capability-card, .feature-link-card, .case-card-home, .stat-card {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }
}

/* ============================================================
   FOOTER — richer visual treatment + newsletter capture.
   ============================================================ */

.footer-newsletter-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #061536 0%, #0a1f4d 100%);
  padding: 30px 0;
}

.footer-newsletter-band::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  top: -180px;
  right: 8%;
  border-radius: 50%;
  filter: blur(80px);
  background: radial-gradient(circle, rgba(201, 162, 74, 0.22), transparent 70%);
  pointer-events: none;
}

.footer-newsletter-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.footer-newsletter-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #daa755;
  margin-bottom: 8px;
}

.footer-newsletter-copy h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #fff;
  margin: 0;
  max-width: 34ch;
  line-height: 1.4;
}

.footer-newsletter-form { flex-shrink: 0; }

.footer-newsletter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-newsletter-row .form-control {
  width: 220px;
  margin: 0;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.footer-newsletter-row .form-control::placeholder { color: rgba(255, 255, 255, 0.45); }

.footer-newsletter-captcha {
  display: flex;
  align-items: center;
  gap: 8px;
}

.captcha-question-compact {
  height: 44px;
  padding: 0 12px;
  font-size: 0.92rem;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.captcha-input-compact {
  width: 72px;
  min-width: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Trust list under the footer brand blurb */
.footer-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  list-style: none;
  margin: 14px 0 18px;
  padding: 0;
}

.footer-trust-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.68);
}

.footer-trust-list i { color: #c9a24a; font-size: 0.72rem; }

/* Footer contact block now uses links, not static <p> — restyle to match */
.footer-contact a,
.footer-contact-static {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 10px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-contact a:hover { color: #daa755; transform: translateX(3px); }
.footer-contact a i,
.footer-contact-static i { color: #c9a24a; width: 16px; text-align: center; }

/* Footer column links: underline draws in on hover instead of a flat swap */
.footer-main .footer-col a {
  position: relative;
  display: block;
  width: fit-content;
}
.footer-main .footer-col a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: #c9a24a;
  transition: right 0.25s ease;
}
.footer-main .footer-col a:hover::after { right: 0; }

/* Footer logo: soft pulsing glow halo + a gentle lift on hover */
.footer-logo-wrap {
  position: relative;
  overflow: visible !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.footer-logo-glow {
  position: absolute;
  inset: -14px;
  border-radius: 20px;
  background: radial-gradient(ellipse, rgba(201, 162, 74, 0.45), transparent 70%);
  filter: blur(16px);
  z-index: -1;
  animation: footerLogoGlow 3.6s ease-in-out infinite;
}
@keyframes footerLogoGlow {
  0%, 100% { opacity: 0.5; transform: scale(0.96); }
  50% { opacity: 0.9; transform: scale(1.06); }
}
.footer-logo-wrap:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 30px rgba(201, 162, 74, 0.3);
}
@media (prefers-reduced-motion: reduce) {
  .footer-logo-glow { animation: none; opacity: 0.6; }
}

/* Footer column header icons */
.footer-main .footer-col h4,
.footer-main .footer-contact h4 {
  display: flex;
  align-items: center;
  gap: 9px;
}
.footer-main .footer-col h4 i,
.footer-main .footer-contact h4 i {
  color: #c9a24a;
  font-size: 0.85rem;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(201, 162, 74, 0.14);
}

/* Footer social icons: gradient glass circles instead of flat white */
.footer-social a {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.footer-social a:hover {
  background: linear-gradient(135deg, #c9a24a, #daa755) !important;
  color: #0a1f4d !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(201, 162, 74, 0.35);
}

@media (max-width: 768px) {
  .footer-newsletter-inner { flex-direction: column; align-items: flex-start; }
  .footer-newsletter-row .form-control { width: 100%; }
  .footer-newsletter-row { width: 100%; }
}

/* ============================================================
   SERVICES HUB — compact 4-col tiles (was sized for an 8-item
   teaser, too tall for a 24-item reference listing) + a large
   faint background icon per category to fill empty space. ===== */

.services-hub-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
}
.services-hub-grid .feature-link-card {
  padding: 16px 16px !important;
}
.services-hub-grid .flc-icon {
  width: 38px !important;
  height: 38px !important;
  font-size: 1rem !important;
  margin-bottom: 10px !important;
  border-radius: 10px !important;
}
.services-hub-grid .feature-link-card h3 {
  font-size: 0.95rem !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
}
.services-hub-grid .feature-link-card p {
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}
.services-hub-grid .flc-link {
  margin-top: 8px !important;
  font-size: 0.76rem !important;
}

.svc-cat-block {
  position: relative;
  z-index: 1;
}
.svc-cat-block::after {
  position: absolute;
  top: -10px;
  right: 2%;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 180px;
  line-height: 1;
  color: #0a1f4d;
  opacity: 0.035;
  pointer-events: none;
  z-index: -1;
}
.svc-cat-development::after { content: "\f121"; }
.svc-cat-marketing::after { content: "\f0a1"; }
.svc-cat-cloud::after { content: "\f0c2"; }
.svc-cat-infra::after { content: "\f6ff"; }

@media (max-width: 1100px) {
  .services-hub-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .svc-cat-block::after { display: none; }
}
@media (max-width: 560px) {
  .services-hub-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   INDIVIDUAL SERVICE PAGE TEMPLATE — hero media panel + a
   watermark icon behind the overview, so neither reads as
   empty space around a single small icon. =====================*/

.svc-hero-panel {
  position: relative;
  padding: 36px 30px;
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.svc-hero-icon {
  width: 84px !important;
  height: 84px !important;
  font-size: 2rem !important;
  border-radius: 22px !important;
}
.svc-hero-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svc-hero-chips li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.82);
}
.svc-hero-chips i { color: #daa755; font-size: 0.78rem; }

.svc-overview-block {
  position: relative;
  overflow: hidden;
}
.svc-overview-watermark {
  position: absolute;
  top: 50%;
  left: 4%;
  transform: translateY(-50%);
  font-size: clamp(160px, 20vw, 320px);
  color: #0a1f4d;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.svc-overview-block .section-content { position: relative; z-index: 1; max-width: none; }

@media (max-width: 900px) {
  .svc-overview-watermark { display: none; }
}

/* Centered hero variant for service detail pages — no right-side media
   panel, so the copy column centers in the full container instead of
   sitting in a two-column split. */
.svc-hero-centered .page-hero-copy {
  max-width: 80%;
  margin: 0 auto;
  text-align: center;
}
.svc-hero-centered .slider-actions {
  justify-content: center;
}
/* .page-hero p carries a 42ch cap + margin:0 for the split-hero layout,
   where it hugs the left edge of the copy column on purpose. In the
   centered variant that same cap left it off-center under the (wider,
   unconstrained) heading above it — give it the full column width and
   let it flow like the rest of the centered copy. */
.svc-hero-centered .page-hero-copy p {
  max-width: none;
  margin: 0 auto !important;
}
/* .page-hero h1 carries margin: 0 0 12px !important (left-aligned) for
   the split hero, where the heading hugs the left edge of the copy
   column on purpose — that killed the auto-centering the base h1 rule
   relies on once the heading needs to actually center. */
.svc-hero-centered .page-hero-copy h1 {
  margin: 0 auto 12px !important;
}

/* Tech pill icons — logo mark ahead of the label. */
.pill i {
  font-size: 0.95rem;
  color: #0a1f4d;
}
.pill img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* "Our approach" — a full-width card instead of a narrow floating
   paragraph, so it carries the same visual weight as the sections
   above and below it. */
.svc-approach-panel {
  position: relative;
  max-width: none;
  overflow: hidden;
  background: linear-gradient(165deg, #ffffff 0%, #f7f9fd 100%);
  border: 1px solid #d9e0ef;
  border-radius: 16px;
  padding: 32px 40px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(10, 31, 77, 0.04);
}
.svc-approach-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c9a24a, #daa755, #0a1f4d);
}
.svc-approach-panel::after {
  content: "\f085";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(90px, 12vw, 170px);
  color: #0a1f4d;
  opacity: 0.05;
  pointer-events: none;
}
@media (max-width: 900px) {
  .svc-approach-panel::after { display: none; }
}
.svc-approach-panel p {
  max-width: none;
  color: #5b6b8c;
  line-height: 1.7;
  margin: 0;
}
.svc-approach-panel .section-cta {
  margin: 20px 0 0;
}

/* Tools & technologies — cards size to their own content and wrap in a
   centered flex flow rather than fixed 3-up grid columns. A fixed grid
   left a bare gap wherever a page had 1, 2, or 4 groups (any count that
   isn't a multiple of 3) because the trailing row's empty column tracks
   stayed reserved and empty. Flex + justify-content:center removes that
   dead space regardless of how many groups a given service page has.
   .tech-group has no fixed max-width (just a 100% ceiling) so a card
   with only a handful of tiles shrink-wraps to exactly one line instead
   of being forced into a fixed-width box that wraps into a half-empty
   second row; only a card with enough tiles to fill the whole section
   width wraps internally, which is fine because it reads as full, not
   sparse. */
.tech-groups {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 8px;
}
.tech-group {
  flex: 0 1 auto;
  min-width: 240px;
  max-width: 100%;
  background: #fff;
  border: 1px solid #d9e0ef;
  border-radius: 16px;
  padding: 22px 24px;
}
.tech-group-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: #0a1f4d;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d9e0ef;
  text-align: center;
}
.tech-tile-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tech-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #f7f9fc;
  border: 1px solid #e3e8f3;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #0a1f4d;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.tech-tile:hover {
  transform: translateY(-2px);
  background: #fff;
  border-color: rgba(201, 162, 74, 0.45);
  box-shadow: 0 10px 24px rgba(10, 31, 77, 0.07);
}
.tech-tile img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.tech-tile i {
  width: 22px;
  font-size: 1.15rem;
  color: #0a1f4d;
  text-align: center;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .svc-approach-panel { padding: 26px 22px; }
  .tech-group { min-width: 100%; }
}

/* Industry page hero — small stat chips under the lead paragraph
   (projects delivered, years in the sector, etc.) sitting on the same
   dark .page-hero gradient the split hero already uses. */
.hero-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
}
.hero-stat-chip {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hero-stat-chip strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: #fff;
}
.hero-stat-chip span {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.72);
}

/* Case study spotlight — a single flagship story in a section-split,
   with case-stat chips inline instead of stacked in a card, so it reads
   as one bigger feature rather than a third grid tile. */
.spotlight-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 22px;
}

/* Industry page split-section images (sector snapshot, case spotlight) —
   same fixed-height treatment as .page-hero .section-media: the SVG art
   sizes itself to the box via object-fit:cover instead of the box
   stretching to match however long the copy column happens to run.
   The copy in these sections regularly runs 500-700px tall (two
   paragraphs + a bullet list) against a 380px image, which left the
   image stranded in the middle of a tall, mostly-empty column. Sticky
   positioning keeps it in view as the reader scrolls the copy instead. */
.section-split:has(.industry-media),
.section-split:has(.product-media) {
  align-items: start !important;
}

.industry-media-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.industry-media {
  height: 380px;
  min-height: 0;
  position: sticky;
  top: calc(var(--top-bar-h) + var(--header-h) + 24px);
}
.industry-media .section-img {
  height: 100%;
  min-height: 0;
}
@media (max-width: 991px) {
  .industry-media { height: 260px; position: static; }
}

/* Tag row under a split-section image (sector snapshot, product overview,
   etc.) — sits outside the image frame as its own caption strip, spread
   across the full column width on one line; same pill treatment site-wide,
   with a lift + color-invert on hover so it doesn't read as static/
   orthodox next to everything else on the page that already has a hover
   state. Only wraps to a second line once the column is too narrow for
   one row to fit without horizontal scrolling (small mobile widths). */
.media-tag-row,
.audience-tags {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}
@media (max-width: 560px) {
  .media-tag-row,
  .audience-tags {
    flex-wrap: wrap;
  }
}
.media-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #0a1f4d;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(10, 31, 77, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.media-tag i {
  color: #c9a24a;
  font-size: 0.72rem;
  transition: color 0.25s ease;
}
.media-tag:hover {
  transform: translateY(-3px) scale(1.05);
  background: #0a1f4d;
  color: #fff;
  box-shadow: 0 12px 26px rgba(10, 31, 77, 0.28);
}
.media-tag:hover i {
  color: #e0bc6a;
}

/* Case-grid mini cards on industry pages — fixed image height so all
   cards in a row line up evenly regardless of copy length. */
.case-study-card .inner-card-media {
  height: 170px;
}
.case-study-card .inner-card-media .section-img {
  height: 100%;
  min-height: 0;
}

/* Product page split-section image (the "built for" overview shot) —
   same fixed-height + sticky pattern as .industry-media. */
.product-media {
  height: 380px;
  min-height: 0;
  position: sticky;
  top: calc(var(--top-bar-h) + var(--header-h) + 24px);
}
.product-media .section-img {
  height: 100%;
  min-height: 0;
}
@media (max-width: 991px) {
  .product-media { height: 260px; position: static; }
}

/* Product overview image column — the audience pills sit as a caption
   strip under the image instead of stacking in the (narrower) copy
   column, where a handful of multi-word pills wrapped onto several
   ragged lines. */
.product-media-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Product "See it in action" screen cards — image height fixed, caption
   sits directly under it instead of the usual title+body block. */
.product-screen .inner-card-media {
  height: 190px;
}
.product-screen .inner-card-media .section-img {
  height: 100%;
  min-height: 0;
}
.product-screen-caption {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: #0a1f4d;
  text-align: center;
}

/* Product comparison table — manual process vs the product, in a plain
   table rather than another card grid. A component neither the services
   nor the industries template uses. */
.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid #d9e0ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(10, 31, 77, 0.06);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 960px;
}
.compare-table th,
.compare-table td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid #e7ecf5;
  font-size: 0.88rem;
  white-space: nowrap;
}
.compare-table thead th {
  font-family: var(--font-display);
  font-size: 0.86rem;
  color: #0a1f4d;
  background: #f4f7fc;
}
.compare-table thead th.col-featured {
  background: rgba(201, 162, 74, 0.14);
  color: #a8841a;
}
.compare-table tbody tr:last-child td {
  border-bottom: none;
}
.compare-table td.compare-feature {
  font-weight: 600;
  color: #0a1f4d;
}
.compare-table td.compare-manual {
  color: #94a3b8;
}
.compare-table td.compare-product {
  background: rgba(201, 162, 74, 0.06);
  color: #0a1f4d;
  font-weight: 600;
}
.compare-table td.compare-product i {
  color: #a8841a;
  margin-right: 6px;
}

/* FAQ — the base template's plain .faq-item summary already draws a
   "+" / "x" via ::after; our service-page FAQs use a real chevron icon
   instead, so suppress the legacy glyph to avoid showing both. */
.faq-item .faq-question::after {
  content: none;
}

/* CTA watermark — swap the fixed home-page glyph for the service's own
   icon so each service page doesn't show the identical background mark. */
.svc-cta-panel::after {
  display: none;
}
.svc-cta-watermark {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  font-size: clamp(140px, 16vw, 260px);
  line-height: 1;
  color: #fff;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 1024px) {
  .svc-cta-watermark { display: none; }
}