/* Cognifys — light, elegant, Apple-inspired design layer. Lean on purpose:
   no background animations, no glow shadows, system fonts first. */

:root {
  --cog-bg: #ffffff;
  --cog-bg-alt: #f5f5f7;
  --cog-text: #1d1d1f;
  --cog-text-dim: #6e6e73;
  --cog-border: rgba(0,0,0,0.08);
  --cog-border-strong: rgba(0,0,0,0.14);
  --cog-accent: #0071e3;
  --cog-accent-hover: #0058b0;
}

body, p, li, span, div {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
body { color: var(--cog-text); }
h1, h2, h3, h4, h5, h6, .elementor-heading-title {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  color: var(--cog-text);
}
html { scroll-behavior: smooth; }

.cog-gradient-text, .cog-gradient-text .elementor-heading-title {
  background: linear-gradient(100deg, #1d1d1f 0%, #0071e3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cog-eyebrow { display:inline-flex; align-items:center; }
.cog-eyebrow .elementor-heading-title {
  font-size: 12px !important; font-weight:600 !important; letter-spacing:.06em; text-transform:uppercase;
  color: var(--cog-accent) !important;
  display:inline-block;
}

.cog-btn-primary .elementor-button {
  background: var(--cog-accent) !important;
  color: #ffffff !important;
  border-radius: 980px !important;
  border: none !important;
  font-weight: 500 !important;
  transition: background .2s ease, transform .2s ease !important;
  box-shadow: none !important;
}
.cog-btn-primary .elementor-button:hover { background: var(--cog-accent-hover) !important; transform: translateY(-1px); }

.cog-btn-secondary .elementor-button {
  background: transparent !important;
  border: 1px solid var(--cog-border-strong) !important;
  color: var(--cog-text) !important;
  border-radius: 980px !important;
  font-weight: 500 !important;
  transition: background .2s ease, border-color .2s ease !important;
}
.cog-btn-secondary .elementor-button:hover { background: var(--cog-bg-alt) !important; border-color: rgba(0,0,0,0.2) !important; }

.cog-card {
  background: var(--cog-bg-alt) !important;
  border: none !important;
  border-radius: 22px !important;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1) !important;
}
.cog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,.08) !important;
}

.cog-hero { background: var(--cog-bg); }

.cog-header {
  background: rgba(255,255,255,0.8);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--cog-border);
}
.cog-logo .elementor-heading-title { color: var(--cog-text) !important; font-weight: 600 !important; }
.cog-nav-menu .xpro-elementor-horizontal-navbar { background: transparent !important; padding: 0 !important; }
.cog-nav-menu .xpro-elementor-horizontal-navbar-nav a,
.cog-nav-menu ul.xpro-elementor-horizontal-navbar-nav li a {
  color: var(--cog-text-dim) !important;
  font-size: 14px;
  font-weight: 400;
  transition: color .2s ease;
}
.cog-nav-menu .xpro-elementor-horizontal-navbar-nav a:hover { color: var(--cog-text) !important; }
@media (max-width: 1024px) {
  .xpro-elementor-horizontal-navbar-wrapper.xpro-elementor-horizontal-menu-responsive-tablet,
  .xpro-elementor-horizontal-navbar-wrapper.xpro-elementor-horizontal-menu-responsive-mobile {
    background: #ffffff !important;
  }
  .xpro-elementor-horizontal-navbar-wrapper a { color: var(--cog-text) !important; }
  .xpro-elementor-horizontal-menu-close, .xpro-elementor-horizontal-menu-toggler {
    color: var(--cog-text) !important;
    background: var(--cog-bg-alt) !important;
  }
}

.cog-icon-box .xpro-box-icon-item {
  background: #ffffff !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  padding: 12px !important;
  margin-bottom: 4px;
}
.cog-icon-box .xpro-box-icon-item svg, .cog-icon-box .xpro-box-icon-item i { color: var(--cog-accent) !important; }
.cog-icon-box .xpro-box-icon-title { color: var(--cog-text) !important; font-weight: 600 !important; }
.cog-icon-box .xpro-box-icon-description { color: var(--cog-text-dim) !important; }
.cog-icon-box .xpro-elementor-button-info-box { color: var(--cog-accent) !important; font-weight: 500; }

.cog-card .xpro-step-flow-icon-wrap, .cog-card [class*="step-flow"] i { color: var(--cog-accent) !important; }

.cog-faq .elementor-accordion-item { border-bottom: 1px solid var(--cog-border) !important; border-top:none !important; }
.cog-faq .elementor-accordion-title { color: var(--cog-text) !important; font-weight:600 !important; background:transparent !important; padding: 22px 4px !important; }
.cog-faq .elementor-tab-content { color: var(--cog-text-dim) !important; background:transparent !important; border-top:none !important; padding: 0 4px 22px !important; }
.cog-faq .elementor-accordion-icon { color: var(--cog-accent) !important; }

.cog-cta-band {
  background: var(--cog-bg-alt) !important;
  border: none !important;
  border-radius: 28px !important;
}

.cog-listing-card {
  background: var(--cog-bg-alt) !important;
  border: none !important;
  border-radius: 22px !important;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.16,1,.3,1) !important;
}
.cog-listing-card:hover { transform: translateY(-4px); }

.cog-filter-pill .elementor-button {
  background: transparent !important;
  border: 1px solid var(--cog-border-strong) !important;
  color: var(--cog-text-dim) !important;
  border-radius: 980px !important;
}
.cog-filter-pill .elementor-button:hover { background: var(--cog-bg-alt) !important; }

.cog-footer { background: var(--cog-bg-alt) !important; border-top: 1px solid var(--cog-border) !important; }
.cog-footer a { color: var(--cog-text-dim) !important; transition: color .2s ease; }
.cog-footer a:hover { color: var(--cog-text) !important; }
.cog-footer h4, .cog-footer .elementor-heading-title {
  color: var(--cog-text-dim) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.cog-form .wpforms-container input[type=text],
.cog-form .wpforms-container input[type=email],
.cog-form .wpforms-container input[type=tel],
.cog-form .wpforms-container textarea,
.cog-form .wpforms-container select {
  background: #ffffff !important;
  border: 1px solid var(--cog-border-strong) !important;
  color: var(--cog-text) !important;
  border-radius: 10px !important;
}
.cog-form .wpforms-container label { color: var(--cog-text-dim) !important; font-weight: 500 !important; }
.cog-form .wpforms-submit-container button {
  background: var(--cog-accent) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 980px !important;
  font-weight: 500 !important;
}

.cog-map iframe { border-radius: 22px; filter: grayscale(0.3); }

.cog-col-18 { width: 18%; }
.cog-col-22 { width: 22%; }
.cog-col-32 { width: 32%; }
.cog-col-40 { width: 40%; }
.cog-col-42 { width: 42%; }
.cog-col-48 { width: 48%; }
.cog-col-50 { width: 50%; }
.cog-col-52 { width: 52%; }
.cog-col-55 { width: 55%; }
.cog-col-60 { width: 60%; }
@media (max-width: 1024px) {
  .cog-col-18, .cog-col-22, .cog-col-32, .cog-col-40, .cog-col-42,
  .cog-col-48, .cog-col-50, .cog-col-52, .cog-col-55, .cog-col-60 {
    width: 100% !important;
  }
}

.cog-row-equal { align-items: stretch !important; }
.cog-row-equal > .e-con-inner > *,
.cog-row-equal > * {
  flex: 1 1 280px !important;
  min-width: 0 !important;
}

@media (max-width: 767px) {
  .cog-card { padding: 24px !important; }
  .cog-cta-band { padding: 40px 20px !important; }
}

.cog-bg-alt-section { background: var(--cog-bg-alt) !important; }


/* Hero product visual */
.cog-hero-visual img {
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);
}

/* Hero trust checklist */
.cog-hero .elementor-icon-list-items .elementor-icon-list-item { margin-bottom: 10px; }
.cog-hero .elementor-icon-list-icon i { color: #1cb45c !important; }
.cog-hero .elementor-icon-list-text { color: var(--cog-text-dim); font-size: 0.92rem; }

/* Tech chips */
.cog-tech-chip {
  background: var(--cog-bg-alt) !important;
  border-radius: 980px !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cog-tech-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.cog-tech-chip .elementor-icon-list-item { justify-content: center; }
.cog-tech-chip .elementor-icon-list-icon i { color: var(--cog-accent) !important; font-size: 1.1rem; }
.cog-tech-chip .elementor-icon-list-text { color: var(--cog-text) !important; font-weight: 500; font-size: 0.9rem; }
.cog-tech-chip { flex: 0 0 auto !important; width: auto !important; }


/* FIX: inline style="" attributes inside text-editor widget content get
   corrupted (quotes mangled, likely by wptexturize touching the raw HTML
   string). Robust fix: default text-editor color via CSS + a reusable
   center-alignment utility class, no inline styles needed. */
.elementor-widget-text-editor p { color: var(--cog-text-dim); margin: 0; }
.cog-text-center { text-align: center !important; }
.cog-text-center p { text-align: center !important; max-width: 560px; margin: 0 auto !important; }

/* Tighter section rhythm — was 100px+100px (200px) between sections */
.cog-section-pad { padding-top: 72px !important; padding-bottom: 72px !important; }

/* Bigger, more colorful icon treatment */
.cog-icon-box .xpro-box-icon-item {
  background: rgba(0,113,227,0.1) !important;
  border-radius: 18px !important;
  width: 60px; height: 60px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin-bottom: 8px;
}
.cog-icon-box .xpro-box-icon-item svg, .cog-icon-box .xpro-box-icon-item i { font-size: 1.5rem !important; color: var(--cog-accent) !important; }

.cog-step .xpro-box-icon-item,
.cog-mini-step .xpro-box-icon-item {
  background: rgba(0,113,227,0.1) !important;
  width: 60px; height: 60px;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Logo mark */
.cog-logo-row { display: flex; align-items: center; gap: 10px; }
.cog-logo-mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, #0071e3, #34aadc);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-family: -apple-system, sans-serif;
  flex-shrink: 0;
}
/* Logo lockup */
.cog-logo-mark .elementor-widget-container { display:flex !important; align-items:center; justify-content:center; }
.cog-logo-mark .elementor-heading-title, .cog-logo-mark .elementor-heading-title a { color:#fff !important; font-size:16px !important; font-weight:700 !important; margin:0 !important; line-height:1 !important; }
.cog-logo-text .elementor-heading-title, .cog-logo-text .elementor-heading-title a { font-size:19px !important; font-weight:700 !important; color: var(--cog-text) !important; margin:0 !important; text-decoration:none !important; }

/* Lead paragraph */
.cog-lead p, .cog-lead .elementor-widget-container { font-size: 1.1rem !important; color: var(--cog-text-dim) !important; max-width: 640px; }

/* Links inherit color inside body copy */
.elementor-widget-text-editor p a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Multi-paragraph spacing */
.elementor-widget-text-editor p + p { margin-top: 16px; }

/* FIX: nested 'grouping' containers default to Elementor's boxed-shell
   sizing (flex-grow:1 on the auto e-con-inner), so they balloon to fill
   available space instead of hugging their content. Force shrink-to-fit. */
.cog-logo-row, .cog-logo-row > .e-con-inner {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  flex-grow: 0 !important;
}
.cog-header .elementor-widget-xpro-horizontal-menu {
  flex: 1 1 auto !important;
}
.cog-header .xpro-elementor-horizontal-navbar-nav {
  flex-wrap: nowrap !important;
}
.cog-header .cog-btn-secondary {
  flex: 0 0 auto !important;
}

/* FIX: .cog-card had padding on mobile only, not desktop -> cramped cards */
.cog-card { padding: 32px !important; }

/* FIX: SVG icons default to fill:black; the earlier color:var(--cog-accent)
   rule only set the CSS 'color' prop, which SVG fill does not inherit
   automatically without fill:currentColor. */
.cog-icon-box .xpro-box-icon-item svg,
.cog-step .xpro-box-icon-item svg,
.cog-mini-step .xpro-box-icon-item svg {
  fill: currentColor !important;
}

/* FIX: footer Quick Links icons rendered at native SVG size (100+px) since
   no width/height was ever constrained for icon-list icons in the footer. */
.cog-footer .elementor-icon-list-icon svg {
  width: 12px !important;
  height: 12px !important;
  fill: var(--cog-text-dim) !important;
}
.cog-footer .elementor-icon-list-icon { margin-right: 8px; }
.cog-footer .elementor-icon-list-items { display: flex; flex-direction: column; gap: 10px; }
.cog-footer .elementor-icon-list-item { color: var(--cog-text-dim); }

/* FIX: FAQ answer text started ~40px left of the question's text (question
   text is indented past the accordion icon, answer content wasn't). */
.cog-faq .elementor-tab-content { padding: 0 4px 22px 44px !important; }

/* FIX: icon-box "Learn More"/"Click Here" button used XPRO's default green
   pill button instead of the site's blue theme; also pin button to the
   bottom of the card so multi-line descriptions don't misalign buttons
   across a row. */
.cog-icon-box .xpro-info-box-button-wrapper button {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.cog-icon-box .xpro-elementor-button-info-box {
  color: var(--cog-accent) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}
.cog-icon-box.elementor-widget { display: flex !important; }
.cog-icon-box .elementor-widget-container,
.cog-icon-box .xpro-box-icon-wrapper,
.cog-icon-box .xpro-box-icon-wrapper-inner {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  height: 100%;
}
.cog-icon-box .xpro-box-icon-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1;
}
.cog-icon-box .xpro-info-box-button-wrapper { margin-top: auto !important; padding-top: 12px; }
/* FIX: "Learn More" text was invisible - the inner span has XPRO's own
   hardcoded white color (meant for use on the old green button bg), which
   our anchor-level color override didn't reach. */
.cog-icon-box .info-box-button-text {
  color: var(--cog-accent) !important;
}

/* FIX: icon glyphs were sized exactly equal to their box (50x50 in a 50x50
   box) with overflow:hidden, so rounded corners clipped the icon itself.
   Requested: fully transparent icon background, no box at all. */
.cog-icon-box .xpro-box-icon-item,
.cog-step .xpro-box-icon-item,
.cog-mini-step .xpro-box-icon-item {
  background: transparent !important;
  overflow: visible !important;
}
.cog-icon-box .xpro-box-icon-item svg,
.cog-step .xpro-box-icon-item svg,
.cog-mini-step .xpro-box-icon-item svg,
.cog-icon-box .xpro-box-icon-item i,
.cog-step .xpro-box-icon-item i,
.cog-mini-step .xpro-box-icon-item i {
  width: 32px !important;
  height: 32px !important;
  font-size: 32px !important;
  fill: currentColor !important;
}

/* FIX: header logo text sat at the top of its box instead of vertically
   centered against the logo mark (text wrapper stretched to match mark
   height, but the text itself wasn't flexed to center within it). */
.cog-logo-text .elementor-widget-container {
  display: flex !important;
  align-items: center !important;
  height: 100%;
}
/* FIX v2: previous selector targeted .elementor-widget-container which
   doesn't exist for this heading widget in this Elementor version - the
   widget root div itself is the 34px-tall box that needs to flex-center
   its text child. */
.cog-logo-text {
  display: flex !important;
  align-items: center !important;
}
/* FIX: footer social icon glyphs sat top-left of their circle instead of
   centered - the container is display:inline-block, so its own
   align-items/justify-content:center rules were silently no-ops (those
   only apply to flex/grid containers). */
.cog-footer .elementor-social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* FIX: mobile nav drawer never actually slid into view - the toggler
   correctly added/removed the "active" class, and a CSS transition on
   transform was defined, but no rule ever changed the transform's target
   value on .active, so the panel stayed stuck off-screen at all times
   (open or closed looked identical - explains "close does nothing", it
   was already effectively broken open too). Same class of bug as the
   earlier XPRO portfolio masonry JS getting stuck - bypass with a direct,
   reliable CSS-only slide. */
@media (max-width: 1024px) {
  .xpro-elementor-horizontal-navbar-wrapper {
    display: none !important;
  }
  .xpro-elementor-horizontal-navbar-wrapper.active {
    display: block !important;
  }
}
/* FIX: mobile menu link text sat flush against the drawer's left edge -
   the anchors had padding:20px 0 (vertical only, zero horizontal). */
@media (max-width: 1024px) {
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav a {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
/* FIX: hero top padding (150-160px) left a very large empty gap between
   the sticky header and the hero content on both desktop and mobile. */
.cog-hero > .e-con-boxed > .e-con-inner {
  padding-top: 90px !important;
}
@media (max-width: 767px) {
  .cog-hero > .e-con-boxed > .e-con-inner {
    padding-top: 56px !important;
  }
}