/*
Theme Name: Turnkey Child theme
Theme URI: https://turnkey.bz
Template: astra
Author: Turnkey
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Version: 1.0.1.1787595742
Updated: 2026-08-24 12:30:00
*/

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800&display=swap');

/* ================================================================
   VARIABLES
   ================================================================ */
:root {
  --qi-bg:        #020101;
  --qi-teal:      #2dd4bf;
  --qi-pink:      #ff00aa;
  --qi-green:     #00ff88;
  --qi-white:     #e2e8f0;
  --qi-muted:     #8899aa;
  --qi-border:    rgba(45, 212, 191, 0.18);
  --qi-teal-glow: rgba(45, 212, 191, 0.28);
  --qi-pink-glow: rgba(255, 0, 170, 0.25);
  --qi-font:      'Work Sans', sans-serif;
}

/* ================================================================
   GLOBAL
   ================================================================ */
html { scroll-behavior: smooth; }
body { padding-top: 0 !important; }

/* ================================================================
   HEADER — FIXED + SCROLL EFFECT
   ================================================================ */
.site-header {
  position: fixed !important;
  top: 0;
  width: 100%;
  z-index: 999;
  background: transparent !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.site-header.scrolled {
  background: rgba(10, 25, 47, 0.95) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
}
.ast-desktop .ast-primary-header-bar.main-header-bar,
.ast-header-break-point #masthead .ast-primary-header-bar.main-header-bar {
  padding-top: 0px !important;
}

/* ================================================================
   DESKTOP NAVIGATION
   ================================================================ */
.main-header-bar-navigation .main-header-menu > li > a,
.ast-builder-menu-1 .main-header-menu > li > a {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 0 1em !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.main-header-bar-navigation .main-header-menu > li > a:hover {
  color: #2dd4bf !important;
  background: rgba(45, 212, 191, 0.15) !important;
  text-shadow: 0 0 20px rgba(45, 212, 191, 0.5);
}

/* ================================================================
   MOBILE NAVIGATION
   ================================================================ */
@media (max-width: 921px) {
  .site-header.scrolled {
    background: rgba(10, 25, 47, 0.98) !important;
  }

  /* ── FIX: Astra's white menu background ── */
  .ast-header-break-point .main-header-menu {
    background-color: rgba(5, 12, 25, 0.98) !important;
  }

  /* ── INNER PANEL ── */
  .ast-mobile-popup-inner,
  .ast-mobile-popup-drawer .ast-mobile-popup-inner {
    background: rgba(5, 12, 25, 0.98) !important;
    backdrop-filter: blur(30px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
    padding: 80px 20px 40px 20px !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    position: relative !important;
  }

  /* ── AMBIENT GLOW OVERLAY ── */
  .ast-mobile-popup-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 80% 20%, rgba(0,255,200,0.08), transparent 50%),
      radial-gradient(ellipse at 20% 80%, rgba(255,0,150,0.06), transparent 50%);
    pointer-events: none;
    z-index: 0;
  }

  /* ── CENTER MENU ITEMS ── */
  .ast-mobile-popup-inner .menu-item {
    display: flex !important;
    justify-content: center !important;
  }

  /* ── MENU LINKS ── */
  .menu-link,
  .ast-mobile-popup-drawer .menu-item > a {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 15px !important;
    color: #e2e8f0 !important;
    padding: 11px 16px !important;
    margin-bottom: 9px !important;
    border-radius: 9px !important;
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.03) !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
  }
	.ast-mobile-header-content > .ast-builder-menu {
		padding-top: 10px;
    background-color: rgba(5, 12, 25, 0.98) !important;
	}

  /* ── MENU LINK HOVER ── */
  .menu-link:hover,
  .ast-mobile-popup-drawer .menu-item > a:hover {
    color: #2dd4bf !important;
    background: rgba(45, 212, 191, 0.15) !important;
    border-color: rgba(45, 212, 191, 0.5) !important;
    text-shadow: 0 0 10px rgba(45, 212, 191, 0.5);
  }

  /* ── ACTIVE / CURRENT PAGE ── */
  .current-menu-item > .menu-link,
  .ast-mobile-popup-drawer .menu-item.current-menu-item > a {
    color: #ffffff !important;
    background: rgba(50, 30, 70, 0.9) !important;
    border: 1.5px solid #ff00aa !important;
    box-shadow:
      0 0 15px rgba(255,0,170,0.4),
      0 0 30px rgba(255,0,170,0.2),
      inset 0 0 20px rgba(255,0,170,0.08) !important;
    font-weight: 600 !important;
    text-shadow: 0 0 8px rgba(255,0,170,0.6);
  }

  /* ── HAMBURGER BUTTON ── */
  .ast-mobile-menu-trigger-fill,
  .menu-toggle {
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(0,255,213,0.3) !important;
    color: #00ffd5 !important;
    box-shadow: 0 0 20px rgba(0,255,213,0.3) !important;
  }

  /* ── CLOSE BUTTON ── */
  .ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close {
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(255,0,100,0.4) !important;
    color: #ff4d8d !important;
    box-shadow: 0 0 15px rgba(255,0,100,0.3) !important;
  }
}

/* ================================================================
   UTILITY CLASSES (badges, hover cards, glassmorphism)
   ================================================================ */

/* Badges */
.badge-container { display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
  background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%);
  color: #0f172a;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.3s ease;
  display: inline-block;
}
.badge:hover { transform: scale(1.1); box-shadow: 0 5px 15px rgba(45, 212, 191, 0.4); }

/* Hover cards */
.hover-card { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; }
.hover-card:hover { transform: translateY(-15px) scale(1.02) !important; }
.hover-card .elementor-icon { animation: bounce 2s infinite; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* Icon pop */
.icon-pop img { transition: transform 0.3s ease; }
.icon-pop:hover img { transform: scale(1.08); }

/* Glassmorphism — modern-cyber-card */
.modern-cyber-card {
  background: rgba(10, 25, 47, 0.7) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(45, 212, 191, 0.2) !important;
  border-radius: 24px !important;
  padding: 40px !important;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.modern-cyber-card:hover {
  border-color: rgba(45, 212, 191, 0.8) !important;
  box-shadow: 0 0 30px rgba(45, 212, 191, 0.15), inset 0 0 20px rgba(45, 212, 191, 0.05) !important;
  transform: translateY(-8px) scale(1.01) !important;
}

/* Glassmorphism — lift-card */
.lift-card {
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(15px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border: 1px solid rgba(0, 255, 213, 0.1) !important;
  border-radius: 30px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  padding: 2.5rem !important;
  transition: all 0.3s ease cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.lift-card-expertise {
  backdrop-filter: blur(15px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  padding: 2.5rem !important;
  transition: all 0.3s ease cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.lift-card-expertise:hover {
  transform: translateY(-15px) scale(1.02) !important;
  border-color: rgba(0, 255, 213, 0.5) !important;
  box-shadow: 0 20px 50px rgba(0, 255, 213, 0.15) !important;
}
.lift-card:hover {
  transform: translateY(-15px) scale(1.02) !important;
  border-color: rgba(0, 255, 213, 0.5) !important;
  box-shadow: 0 20px 50px rgba(0, 255, 213, 0.15) !important;
}
.lift-card .elementor-button {
  background: linear-gradient(135deg, #00d4ff, #00ff88) !important;
  color: #000 !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 0 15px rgba(0, 255, 213, 0.3);
}

/* Cyber button */
.cyber-btn {
  background: transparent !important;
  border: 1px solid #2dd4bf !important;
  color: #2dd4bf !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
}
.cyber-btn:hover { background: #2dd4bf !important; color: #000 !important; box-shadow: 0 0 20px #2dd4bf; }
.cyber-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: 0.5s;
}
.cyber-btn:hover::before { left: 100%; }

/* Hide footer on contact page */
.page-id-16 footer,
.page-id-16 .ast-builder-button-wrap { display: none !important; }

/* ================================================================
   QUASAR PAGE — SECTION WRAPPER
   ================================================================ */
.qi-section {
  font-family: var(--qi-font) !important;
  background: var(--qi-bg) !important;
  padding: 80px 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}
.elementor-widget-container:has(.qi-section) { padding: 0 !important; background: transparent !important; }
.elementor-column:has(.qi-section) > .elementor-widget-wrap { background: transparent !important; }
.qi-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(45,212,191,0.006) 3px, rgba(45,212,191,0.006) 4px);
  pointer-events: none;
  z-index: 0;
}

/* Ambient glows */
.qi-glow-tl, .qi-glow-br {
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: transparent !important;
}
.qi-glow-tl { top: -200px !important; left: -150px !important; width: 550px !important; height: 550px !important; background: radial-gradient(ellipse, rgba(45,212,191,0.05) 0%, transparent 70%) !important; }
.qi-glow-br { bottom: -150px !important; right: -100px !important; width: 450px !important; height: 450px !important; background: radial-gradient(ellipse, rgba(255,0,170,0.04) 0%, transparent 70%) !important; }

.qi-inner { max-width: 1080px !important; margin: 0 auto !important; position: relative !important; z-index: 1 !important; }

/* ================================================================
   QUASAR PAGE — TYPOGRAPHY
   ================================================================ */
.qi-section *,
.qi-cta-section * { font-family: 'Work Sans', sans-serif !important; }

.qi-header { text-align: center !important; margin-bottom: 60px !important; }

.qi-eyebrow {
  font-family: var(--qi-font) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 5px !important;
  text-transform: uppercase !important;
  color: var(--qi-teal) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
}
.qi-eyebrow::before { content: ''; width: 50px; height: 1px; background: linear-gradient(90deg, transparent, var(--qi-teal)); opacity: 0.45; }
.qi-eyebrow::after  { content: ''; width: 50px; height: 1px; background: linear-gradient(90deg, var(--qi-teal), transparent); opacity: 0.45; }

.qi-h2 {
  font-family: var(--qi-font) !important;
  font-size: clamp(32px, 4.5vw, 52px) !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 18px !important;
  line-height: 1.08 !important;
  letter-spacing: -1px !important;
}
.qi-h2 span { color: var(--qi-teal) !important; text-shadow: 0 0 28px var(--qi-teal-glow) !important; }

.qi-lead,
.qi-split-desc,
.qi-card-desc,
.qi-card-title,
.qi-cta-sub,
.qi-contact-label,
.qi-contact-value,
.qi-cta-contact-label,
.qi-checklist li {
  font-family: 'Work Sans', sans-serif !important;
  font-size: 20px !important;
}
.qi-lead { font-weight: 400 !important; color: var(--qi-muted) !important; max-width: 540px !important; margin: 0 auto !important; line-height: 1.65 !important; }

/* ================================================================
   QUASAR PAGE — SCROLL ANIMATIONS
   ================================================================ */
.qi-anim {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.qi-anim-up    { transform: translateY(36px); }
.qi-anim-left  { transform: translateX(-44px); }
.qi-anim-right { transform: translateX(44px); }
.qi-anim.qi-visible { opacity: 1 !important; transform: none !important; }
.qi-d1 { transition-delay: 0.10s !important; }
.qi-d2 { transition-delay: 0.20s !important; }
.qi-d3 { transition-delay: 0.30s !important; }

/* ================================================================
   QUASAR PAGE — IMAGES
   ================================================================ */
.qi-img {
  display: block !important;
  width: 100% !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--qi-border) !important;
  background: #fff !important;
  position: relative !important;
  opacity: 1 !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6) !important;
  cursor: zoom-in !important;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease, box-shadow 0.4s ease !important;
}
.qi-img::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--qi-teal) 30%, var(--qi-teal) 70%, transparent) !important;
  box-shadow: 0 0 14px var(--qi-teal-glow) !important;
  z-index: 2 !important;
  opacity: 0.6 !important;
  transition: opacity 0.4s ease !important;
}
.qi-img:hover { transform: translateY(-10px) !important; border-color: rgba(45,212,191,0.5) !important; box-shadow: 0 28px 72px rgba(0,0,0,0.7), 0 0 50px var(--qi-teal-glow) !important; }
.qi-img:hover::before { opacity: 1 !important; }

/* Pink image variant */
.qi-img-pink .qi-img::before { background: linear-gradient(90deg, transparent, var(--qi-pink) 30%, var(--qi-pink) 70%, transparent) !important; box-shadow: 0 0 14px var(--qi-pink-glow) !important; }
.qi-img-pink .qi-img:hover { border-color: rgba(255,0,170,0.5) !important; box-shadow: 0 28px 72px rgba(0,0,0,0.7), 0 0 50px var(--qi-pink-glow) !important; }

/* Image sharpness */
.qi-img img, .qi-card-img img, .qi-strip img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  filter: none !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
}

/* ================================================================
   WIDGET A — STRIP
   ================================================================ */
.qi-strip {
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--qi-border) !important;
  background: #fff !important;
  position: relative !important;
  cursor: zoom-in !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7) !important;
  animation: qiPulse 5s ease-in-out infinite !important;
}
.qi-strip::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--qi-teal) 20%, var(--qi-teal) 80%, transparent) !important;
  box-shadow: 0 0 18px var(--qi-teal-glow) !important;
  z-index: 3 !important;
}
@keyframes qiPulse {
  0%, 100% { box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 30px rgba(45,212,191,0.04); }
  50%       { box-shadow: 0 32px 80px rgba(0,0,0,0.75), 0 0 80px rgba(45,212,191,0.10); }
}

/* ================================================================
   WIDGET B — SPLIT PANELS
   ================================================================ */
.qi-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
  margin-bottom: 80px !important;
}
.qi-split:last-child { margin-bottom: 0 !important; }
.qi-split-body { display: flex !important; flex-direction: column !important; gap: 22px !important; }

.qi-feature-tag {
  font-family: var(--qi-font) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--qi-teal) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.qi-feature-tag::before { content: '' !important; width: 28px; height: 1px !important; background: currentColor !important; box-shadow: 0 0 8px currentColor !important; flex-shrink: 0 !important; }
.qi-feature-tag.pink  { color: var(--qi-pink) !important; }
.qi-feature-tag.green { color: var(--qi-green) !important; }

.qi-split-title { font-family: var(--qi-font) !important; font-size: clamp(24px, 2.8vw, 34px) !important; font-weight: 800 !important; color: #fff !important; margin: 0 !important; line-height: 1.18 !important; }
.qi-split-title em { font-style: normal !important; color: var(--qi-teal) !important; }
.qi-split-title em.pink { color: var(--qi-pink) !important; }
.qi-split-desc { color: var(--qi-muted) !important; line-height: 1.7 !important; margin: 0 !important; }

.qi-checklist { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.qi-checklist li { color: rgba(226,234,240,0.82) !important; display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 10px 14px !important; border-radius: 6px !important; border: 1px solid transparent !important; line-height: 1.5 !important; transition: background 0.3s ease, border-color 0.3s ease !important; }
.qi-checklist li:hover { background: rgba(45,212,191,0.05) !important; border-color: rgba(45,212,191,0.18) !important; }
.qi-checklist.pink li:hover { background: rgba(255,0,170,0.05) !important; border-color: rgba(255,0,170,0.18) !important; }

.qi-check-icon { width: 22px !important; height: 22px !important; border: 1px solid var(--qi-teal) !important; border-radius: 4px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 11px !important; color: var(--qi-teal) !important; flex-shrink: 0 !important; margin-top: 2px !important; transition: box-shadow 0.3s ease !important; }
.qi-checklist li:hover .qi-check-icon { box-shadow: 0 0 10px rgba(45,212,191,0.45) !important; }
.qi-check-icon.pink { border-color: var(--qi-pink) !important; color: var(--qi-pink) !important; }

.qi-split-divider { height: 1px !important; border: none !important; background: linear-gradient(90deg, transparent, rgba(45,212,191,0.15), transparent) !important; margin: 0 0 80px !important; }

/* ================================================================
   WIDGET C — 3-CARD GALLERY GRID
   ================================================================ */
.qi-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 28px !important; }

.qi-card {
  background: #080404 !important;
  border: 1px solid rgba(45,212,191,0.14) !important;
  border-radius: 14px !important;
  overflow: visible !important;
  position: relative !important;
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease, box-shadow 0.4s ease !important;
}
.qi-card:hover { transform: translateY(-10px) scale(1.05) !important; z-index: 10 !important; }
.qi-card-teal:hover  { border-color: rgba(45,212,191,0.55) !important; box-shadow: 0 24px 56px rgba(0,0,0,0.6), 0 0 36px rgba(45,212,191,0.08) !important; }
.qi-card-green:hover { border-color: rgba(0,255,136,0.50) !important; box-shadow: 0 24px 56px rgba(0,0,0,0.6), 0 0 36px rgba(0,255,136,0.07) !important; }
.qi-card-pink:hover  { border-color: rgba(255,0,170,0.50) !important; box-shadow: 0 24px 56px rgba(0,0,0,0.6), 0 0 36px rgba(255,0,170,0.07) !important; }

.qi-card::before { content: '' !important; position: absolute !important; top: 0; left: 0; right: 0 !important; height: 2px !important; z-index: 3 !important; transform: scaleX(0) !important; transform-origin: center !important; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1) !important; }
.qi-card:hover::before { transform: scaleX(1) !important; }
.qi-card-teal::before  { background: var(--qi-teal) !important; box-shadow: 0 0 12px var(--qi-teal) !important; }
.qi-card-green::before { background: var(--qi-green) !important; box-shadow: 0 0 12px var(--qi-green) !important; }
.qi-card-pink::before  { background: var(--qi-pink) !important; box-shadow: 0 0 12px var(--qi-pink) !important; }

.qi-card-img { overflow: hidden !important; background: #fff !important; display: block !important; border-radius: 0 !important; cursor: zoom-in !important; }
.qi-card-img img { border-radius: 0 !important; transition: none !important; }

.qi-card-body { padding: 20px 22px 24px !important; }
.qi-num { display: none !important; }
.qi-card-num-row { display: block !important; margin-bottom: 10px !important; }
.qi-card-tag { font-family: var(--qi-font) !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 3px !important; text-transform: uppercase !important; display: block !important; }
.qi-card-teal .qi-card-tag  { color: var(--qi-teal) !important; }
.qi-card-green .qi-card-tag { color: var(--qi-green) !important; }
.qi-card-pink .qi-card-tag  { color: var(--qi-pink) !important; }
.qi-card-title { font-weight: 700 !important; color: #fff !important; margin: 0 0 10px !important; line-height: 1.3 !important; }
.qi-card-desc  { color: var(--qi-muted) !important; line-height: 1.6 !important; margin: 0 !important; }

/* ================================================================
   LIGHTBOX
   ================================================================ */
.qi-lightbox {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(2, 1, 1, 0.96) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  cursor: zoom-out !important;
  opacity: 0;
  transition: opacity 0.3s ease !important;
}
.qi-lightbox.qi-lb-open    { display: flex !important; }
.qi-lightbox.qi-lb-visible { opacity: 1 !important; }

.qi-lightbox-img {
  max-width: 92vw !important;
  max-height: 88vh !important;
  width: auto !important;
  height: auto !important;
  border-radius: 10px !important;
  border: 1px solid rgba(45, 212, 191, 0.3) !important;
  box-shadow: 0 0 0 1px rgba(45,212,191,0.12), 0 40px 100px rgba(0,0,0,0.9), 0 0 80px rgba(45,212,191,0.12) !important;
  display: block !important;
  position: relative !important;
  transform: scale(0.94);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1) !important;
  cursor: default !important;
}
.qi-lightbox.qi-lb-visible .qi-lightbox-img { transform: scale(1) !important; }

.qi-lightbox-close {
  position: fixed !important;
  top: 20px !important; right: 24px !important;
  width: 44px !important; height: 44px !important;
  border: 1px solid rgba(45,212,191,0.3) !important;
  border-radius: 8px !important;
  background: rgba(2,1,1,0.8) !important;
  color: #2dd4bf !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
  z-index: 100000 !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.qi-lightbox-close:hover { border-color: rgba(45,212,191,0.8) !important; box-shadow: 0 0 16px rgba(45,212,191,0.35) !important; color: #fff !important; }

.qi-lightbox-caption {
  position: fixed !important;
  bottom: 24px !important; left: 50% !important;
  transform: translateX(-50%) !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(45,212,191,0.6) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  z-index: 100000 !important;
}

/* ================================================================
   FOOTER CTA (HTML widget on Quasar page)
   ================================================================ */
.qi-cta-section {
  font-family: var(--qi-font) !important;
  background: var(--qi-bg) !important;
  padding: 100px 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(45,212,191,0.12) !important;
}
.qi-cta-inner { max-width: 1000px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 80px !important; align-items: center !important; position: relative !important; z-index: 1 !important; }

.qi-cta-kicker { font-family: var(--qi-font) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 4px !important; text-transform: uppercase !important; color: var(--qi-teal) !important; display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 18px !important; }
.qi-cta-kicker::before { content: '' !important; width: 28px; height: 1px !important; background: var(--qi-teal) !important; box-shadow: 0 0 8px var(--qi-teal-glow) !important; }

.qi-cta-heading { font-family: var(--qi-font) !important; font-size: clamp(30px, 4vw, 50px) !important; font-weight: 800 !important; color: #fff !important; line-height: 1.1 !important; letter-spacing: -1px !important; margin: 0 0 22px !important; }
.qi-cta-heading span { color: var(--qi-teal) !important; text-shadow: 0 0 28px var(--qi-teal-glow) !important; }
.qi-cta-sub { color: var(--qi-muted) !important; line-height: 1.7 !important; margin: 0 0 36px !important; }

.qi-cta-btn { display: inline-flex !important; align-items: center !important; gap: 12px !important; font-family: var(--qi-font) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; text-decoration: none !important; color: var(--qi-teal) !important; border: 1.5px solid var(--qi-teal) !important; padding: 18px 36px !important; border-radius: 4px !important; position: relative !important; overflow: hidden !important; transition: color 0.35s ease, box-shadow 0.35s ease !important; }
.qi-cta-btn::before { content: '' !important; position: absolute !important; inset: 0 !important; background: var(--qi-teal) !important; transform: scaleX(0) !important; transform-origin: left !important; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1) !important; z-index: 0 !important; }
.qi-cta-btn:hover::before { transform: scaleX(1) !important; }
.qi-cta-btn:hover { color: #020101 !important; box-shadow: 0 0 28px var(--qi-teal-glow) !important; }
.qi-cta-btn-text, .qi-cta-btn-arrow { position: relative !important; z-index: 1 !important; }
.qi-cta-btn-arrow { transition: transform 0.3s ease !important; }
.qi-cta-btn:hover .qi-cta-btn-arrow { transform: translateX(5px) !important; }

.qi-cta-right { border-left: 1px solid rgba(45,212,191,0.12) !important; padding-left: 60px !important; }
.qi-cta-contact-label { font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--qi-muted) !important; margin-bottom: 20px !important; }
.qi-contact-item { display: flex !important; align-items: center !important; gap: 16px !important; padding: 16px 0 !important; border-bottom: 1px solid rgba(45,212,191,0.07) !important; text-decoration: none !important; transition: border-color 0.3s ease !important; }
.qi-contact-item:hover { border-color: rgba(45,212,191,0.28) !important; }
.qi-contact-item:last-child { border-bottom: none !important; }
.qi-contact-icon { width: 42px !important; height: 42px !important; border: 1px solid rgba(45,212,191,0.2) !important; border-radius: 8px !important; background: rgba(45,212,191,0.04) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; flex-shrink: 0 !important; transition: border-color 0.3s ease, box-shadow 0.3s ease !important; }
.qi-contact-item:hover .qi-contact-icon { border-color: var(--qi-teal) !important; box-shadow: 0 0 12px var(--qi-teal-glow) !important; }
.qi-contact-label { color: var(--qi-muted) !important; display: block !important; margin-bottom: 2px !important; }
.qi-contact-value { font-weight: 600 !important; color: var(--qi-white) !important; }

/* ================================================================
   FOOTER (Astra theme footer builder)
   ================================================================ */
#colophon,
.site-footer,
.ast-footer-overlay,
.footer-widget-area,
[data-section="section-footer-builder"] {
  background: #020101 !important;
}

#colophon,
.site-footer{
	border-top: 1px solid #4DD0E1 !important;}
#colophon *, .site-footer *, .ast-footer-overlay * { font-family: 'Work Sans', sans-serif !important; }

#colophon h1, #colophon h2, #colophon h3,
.site-footer h1, .site-footer h2, .site-footer h3 { font-size: clamp(28px, 4vw, 48px) !important; font-weight: 800 !important; color: #ffffff !important; letter-spacing: -1px !important; line-height: 1.1 !important; }

#colophon p, .site-footer p, .ast-footer-overlay p { font-size: 20px !important; color: #8899aa !important; line-height: 1.7 !important; }

#colophon a, .site-footer a { font-size: 20px !important; color: #ffffff !important; text-decoration: none !important; transition: color 0.3s ease, text-shadow 0.3s ease !important; }
#colophon a:hover, .site-footer a:hover { color: #fff !important; text-shadow: 0 0 14px rgba(45, 212, 191, 0.5) !important; }

#colophon .elementor-button,
#colophon .ast-builder-button-wrap a,
#colophon .wp-block-button__link,
.site-footer .elementor-button,
.site-footer .ast-builder-button-wrap a,
.site-footer .wp-block-button__link {
  font-family: 'Work Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1.5px solid #2dd4bf !important;
  color: #2dd4bf !important;
  padding: 18px 36px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease !important;
}
#colophon .elementor-button:hover,
#colophon .ast-builder-button-wrap a:hover,
#colophon .wp-block-button__link:hover,
.site-footer .elementor-button:hover,
.site-footer .ast-builder-button-wrap a:hover,
.site-footer .wp-block-button__link:hover { background: #2dd4bf !important; color: #020101 !important; box-shadow: 0 0 28px rgba(45, 212, 191, 0.4) !important; }

.ast-footer-copyright,
#colophon .ast-footer-copyright *,
.site-footer .ast-footer-copyright * { font-family: 'Work Sans', sans-serif !important; font-size: 20px !important; background: #020101 !important;}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 960px) {
  .qi-section        { padding: 64px 28px !important; }
  .qi-split          { grid-template-columns: 1fr !important; gap: 32px !important; margin-bottom: 64px !important; }
  .qi-split .qi-img-order { order: -1 !important; }
  .qi-split-divider  { margin: 0 0 64px !important; }
  .qi-grid           { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .qi-cta-inner      { grid-template-columns: 1fr !important; gap: 48px !important; }
  .qi-cta-right      { border-left: none !important; padding-left: 0 !important; border-top: 1px solid rgba(45,212,191,0.12) !important; padding-top: 40px !important; }
}
@media (max-width: 600px) {
  .qi-section        { padding: 56px 20px !important; }
  .qi-grid           { grid-template-columns: 1fr !important; }
  .qi-h2             { font-size: 28px !important; }
  .qi-cta-heading    { font-size: 28px !important; }
  .qi-cta-section    { padding: 64px 20px !important; }
}

/* Set the background of the glow elements to transparent */
.qi-section .qi-glow-tl, 
.qi-section .qi-glow-br {
  background: transparent !important;
}

/* ================================================================
   BASE LAYER — SINGLE SOURCE OF TRUTH FOR THE PAGE BACKGROUND
   ----------------------------------------------------------------
   Every page on the site inherits its background from here, via the
   --qi-bg token defined in :root at the top of this file.

   DO NOT redeclare `body { background: ... }` anywhere else — not in
   Elementor HTML widgets, not in page-level custom CSS, not in pasted
   snippets. A `body` rule injected by page content loads AFTER this
   stylesheet and silently repaints the whole site on that page only.
   That is exactly what broke Expertise and About Us (they were forced
   to #0a0e27 by a pasted <style> block) before 2026-08-24.

   To change the site background, change --qi-bg. Nothing else.
   ================================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--qi-bg);
  font-family: 'Work Sans', sans-serif;
}

/* ── SECTION 3─────────────────────────────────────────── */
/* ── GRID ────────────────────────────────────────────── */
.ts-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 1;
}
 
/* ── LEFT COPY ───────────────────────────────────────── */
.ts-eyebrow {
  font-family: 'Work Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #4DD0E1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.ts-eyebrow::before {
  content: '';
  width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, #4DD0E1);
  opacity: 0.5;
}
.ts-eyebrow::after {
  content: '';
  width: 40px; height: 1px;
  background: linear-gradient(90deg, #4DD0E1, transparent);
  opacity: 0.5;
}
 
.ts-heading {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(48px, 6vw, 75px);
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: 24px;
}
.ts-heading span {
  color: #4DD0E1;
  text-shadow: 0 0 32px rgba(45,212,191,0.35);
}
 
.ts-sub {
  font-family: 'Work Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #8899aa;
  line-height: 1.75;
  margin-bottom: 40px;
}
.ts-sub strong {
  color: rgba(226,234,240,0.9);
  font-weight: 600;
}
 
/* stat pills */
.ts-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.ts-stat {
  background: rgba(45,212,191,0.06);
  border: 1px solid rgba(45,212,191,0.18);
  border-radius: 8px;
  padding: 16px 22px;
  text-align: center;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.ts-stat:hover {
  border-color: rgba(45,212,191,0.45);
  box-shadow: 0 0 18px rgba(45,212,191,0.1);
}
.ts-stat-num {
  font-family: 'Work Sans', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #4dd0e1;
  display: block;
  line-height: 1;
  margin-bottom: 5px;
}
.ts-stat-label {
  font-family: 'Work Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #4dd0e1;
}
 
/* feature rows */
.ts-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 48px;
}
.ts-feature {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}
.ts-feature:hover {
  background: rgba(45,212,191,0.05);
  border-color: rgba(45,212,191,0.15);
}
.ts-feature-icon {
  width: 38px; height: 38px;
  border: 1px solid rgba(45,212,191,0.25);
  border-radius: 8px;
  background: rgba(45,212,191,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: box-shadow 0.3s;
}
.ts-feature:hover .ts-feature-icon {
  box-shadow: 0 0 14px rgba(45,212,191,0.25);
}
.ts-feature-title {
  font-family: 'Work Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #e2e8f0;
  display: block;
  margin-bottom: 2px;
}
.ts-feature-desc {
  font-family: 'Work Sans', sans-serif;
  font-size: 20px;
  color: #8899aa;
  line-height: 1.5;
}
 
/* single CTA button */
.ts-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: #4DD0E1;
  border: 1.5px solid #4dd0e1;
  padding: 18px 40px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: color 0.35s ease, box-shadow 0.35s ease;
}
.ts-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: #2dd4bf;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
  z-index: 0;
}
.ts-btn:hover::before { transform: scaleX(1); }
.ts-btn:hover { color: #020101; box-shadow: 0 0 32px rgba(45,212,191,0.4); }
.ts-btn-label, .ts-btn-arrow { position: relative; z-index: 1; }
.ts-btn-arrow { transition: transform 0.3s ease; }
.ts-btn:hover .ts-btn-arrow { transform: translateX(5px); }
 
/* ── RIGHT: SCREENSHOT ───────────────────────────────── */
.ts-img-wrap { position: relative; }
 
.ts-screenshot {
  display: block;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(45,212,191,0.22);
  box-shadow: 0 24px 72px rgba(0,0,0,0.75);
  position: relative;
  background: #fff;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}
.ts-screenshot:hover {
  transform: translateY(-8px);
  border-color: rgba(45,212,191,0.5);
  box-shadow: 0 36px 90px rgba(0,0,0,0.85), 0 0 50px rgba(45,212,191,0.15);
}
/* neon top line */
.ts-screenshot img {
  display: block;
  width: 100%;
  height: auto;
}
 
.ts-caption {
  margin-top: 14px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ts-caption-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2dd4bf;
  opacity: 0.5;
}
.ts-caption-text {
  font-family: 'Work Sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(45,212,191,0.5);
}
 
/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 900px) {
  .ts-inner { grid-template-columns: 1fr; gap: 52px; }
  .ts-img-wrap { order: -1; }
  .ts-section { padding: 72px 24px; }
  .ts-heading { letter-spacing: -1px; }
}
@media (max-width: 480px) {
  .ts-section { padding: 56px 20px; }
  .ts-btn { width: 100%; justify-content: center; }
}
.ts-anim {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1),
              transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.ts-anim-up    { transform: translateY(36px); }
.ts-anim-left  { transform: translateX(-44px); }
.ts-anim-right { transform: translateX(44px); }
.ts-anim.ts-visible { opacity: 1 !important; transform: none !important; }
.ts-d1 { transition-delay: 0.05s; }
.ts-d2 { transition-delay: 0.15s; }
.ts-d3 { transition-delay: 0.25s; }
.ts-d4 { transition-delay: 0.35s; }
.ts-d5 { transition-delay: 0.45s; }
.ts-d6 { transition-delay: 0.55s; }
.ts-btn:visited { color: #4DD0E1; }
.ts-btn:visited:hover { color: #020101; }
.ts-btn:active { color: #020101; }

.benefit-box:hover {
  background: #2d3e50 !important;
  transform: translateX(10px);
  box-shadow: 0 5px 20px rgba(77,208,225,0.2);
}
.benefit-box-gold:hover {
  background: #2d3e50 !important;
  transform: translateX(10px);
  box-shadow: 0 5px 20px rgba(212,166,85,0.2);
}
/* ================================================================
   HOMEPAGE RESTRUCTURE (2026-04 review)
   Reorder, fix missing icon, swap emoji→SVG, grid benefits, CTAs.
   ================================================================ */

/* --- 1. Reorder home containers via flex order (no Elementor edit) --- */
.elementor.elementor-2001 {
  display: flex !important;
  flex-direction: column !important;
}
.elementor.elementor-2001 > .elementor-element-df03a1e { order: 1; }  /* Hero                     */
.elementor.elementor-2001 > .elementor-element-81d49c4 { order: 2; }  /* The Challenge heading    */
.elementor.elementor-2001 > .elementor-element-6831312 { order: 3; }  /* QB pain paragraph        */
.elementor.elementor-2001 > .elementor-element-2c6f6db { order: 4; }  /* Solution cards           */
.elementor.elementor-2001 > .elementor-element-01f1910 { order: 5; }  /* Bridge heading           */
.elementor.elementor-2001 > .elementor-element-3d46222 { order: 6; }  /* Introducing Quasar       */
.elementor.elementor-2001 > .elementor-element-a5c09a8 { order: 7; }  /* Quick Benefits heading   */
.elementor.elementor-2001 > .elementor-element-a51ec80 { order: 8; }  /* Quick Benefits grid      */

/* Tighten the duplicated "Seamlessly transition..." heading now that
   The Challenge precedes it — demote it visually so it reads as a
   bridge rather than a competing hero line. */
.elementor-element-01f1910 h2 {
  font-size: clamp(18px, 2vw, 24px) !important;
  font-weight: 500 !important;
  opacity: 0.85;
  max-width: 900px;
  margin: 0 auto !important;
  line-height: 1.5 !important;
}

/* --- 2. Emoji → inline SVG on Introducing Quasar feature list --- */
.ts-features .ts-feature-icon {
  font-size: 0 !important;          /* hide emoji text */
  line-height: 0 !important;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(45, 212, 191, 0.10);
  border: 1px solid var(--qi-border);
  box-shadow: 0 0 24px var(--qi-teal-glow);
  position: relative;
}
.ts-features .ts-feature-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
  filter: drop-shadow(0 0 6px var(--qi-teal-glow));
}
/* POS / Monitor */
.ts-features .ts-feature:nth-child(1) .ts-feature-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='14' rx='2'/><line x1='8' y1='21' x2='16' y2='21'/><line x1='12' y1='17' x2='12' y2='21'/></svg>");
}
/* Inventory / Box */
.ts-features .ts-feature:nth-child(2) .ts-feature-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 8l-9-5-9 5v8l9 5 9-5V8z'/><path d='M3.3 7.7L12 13l8.7-5.3'/><line x1='12' y1='13' x2='12' y2='22'/></svg>");
}
/* Accounting / Bar chart */
.ts-features .ts-feature:nth-child(3) .ts-feature-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='20' x2='12' y2='10'/><line x1='18' y1='20' x2='18' y2='4'/><line x1='6' y1='20' x2='6' y2='14'/><line x1='3' y1='20' x2='21' y2='20'/></svg>");
}

/* --- 3. Custom Solutions card: add missing icon --- */
/* The first child of the card is a divider widget acting as placeholder.
   Rather than hide it and use ::before (which fights flex layout), we
   transform the divider itself into a styled icon tile that mirrors the
   Quasar card's image slot. */
.elementor-element-3bcbd2c > .elementor-element-9c12da4 {
  flex: 0 0 150px !important;
  width: 150px !important;
  height: 150px !important;
  align-self: center !important;
  margin: 0 auto !important;
  border-radius: 24px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff00aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>"),
    radial-gradient(circle at center, rgba(255,0,170,0.18), rgba(255,0,170,0.02) 70%);
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: 70px 70px, cover;
  border: 1px solid rgba(255,0,170,0.25);
  box-shadow: 0 0 30px rgba(255,0,170,0.18);
}
/* Hide the actual <hr> inside the divider widget */
.elementor-element-3bcbd2c > .elementor-element-9c12da4 .elementor-widget-container,
.elementor-element-3bcbd2c > .elementor-element-9c12da4 .elementor-divider,
.elementor-element-3bcbd2c > .elementor-element-9c12da4 .elementor-divider-separator {
  display: none !important;
}

/* --- 4. Quick Benefits: 3-column grid with icons --- */
.elementor-element-a51ec80 > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.elementor-element-a51ec80 .elementor-widget-html {
  width: 100% !important;
  margin: 0 !important;
}
.elementor-element-a51ec80 .benefit-box,
.elementor-element-a51ec80 .benefit-box-gold {
  margin-bottom: 0 !important;
  height: 100%;
  padding: 40px 32px 32px !important;
  border-left: none !important;
  border-top: 4px solid #4dd0e1 !important;
  position: relative;
}
.elementor-element-a51ec80 .benefit-box-gold {
  border-top-color: #d4a655 !important;
}
.elementor-element-a51ec80 .benefit-box:hover,
.elementor-element-a51ec80 .benefit-box-gold:hover { transform: translateY(-6px) !important; }
.elementor-element-a51ec80 .benefit-box::before,
.elementor-element-a51ec80 .benefit-box-gold::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 8px rgba(77,208,225,0.45));
}
.elementor-element-a51ec80 .benefit-box-gold::before {
  filter: drop-shadow(0 0 8px rgba(212,166,85,0.5));
}
/* FOR RETAIL */
.elementor-element-2c1f836 .benefit-box::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234dd0e1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/><line x1='3' y1='6' x2='21' y2='6'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>");
}
/* FOR RESTAURANTS */
.elementor-element-976a76e .benefit-box::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234dd0e1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 2v20M3 8h4a3 3 0 0 0 0-6H3M17 2v20M21 8c0 2-2 3-4 3v11'/></svg>");
}
/* FOR ALL SMEs (gold variant) */
.elementor-element-cd15a11 .benefit-box-gold::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4a655' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2L3 7v6c0 5 4 9 9 9s9-4 9-9V7l-9-5z'/><path d='M9 12l2 2 4-4'/></svg>");
}
@media (max-width: 960px) {
  .elementor-element-a51ec80 > .e-con-inner { grid-template-columns: 1fr; }
}

/* --- 5. Announcement bar --- */
.tk-announce {
  position: relative;
  z-index: 1000;
  background: linear-gradient(90deg, #ff00aa 0%, #2dd4bf 100%);
  color: #fff;
  font-family: var(--qi-font);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  padding: 8px 16px;
  letter-spacing: 0.3px;
}
.tk-announce a {
  color: #fff;
  text-decoration: underline;
  margin-left: 6px;
  font-weight: 700;
}
.tk-announce a:hover { color: #0a192f; }
body.admin-bar .tk-announce { margin-top: 0; }
/* Push fixed header below the bar only when at the top of the page. */
body.has-tk-announce .site-header { top: 36px; }
body.has-tk-announce.admin-bar .site-header { top: calc(32px + 36px); }
/* Once the user scrolls, Astra adds .scrolled — the bar is no longer visible,
   so collapse the header back flush to the top. */
body.has-tk-announce .site-header.scrolled { top: 0 !important; }
body.has-tk-announce.admin-bar .site-header.scrolled { top: 32px !important; }
@media (max-width: 768px) {
  .tk-announce { font-size: 12px; padding: 6px 10px; }
  body.has-tk-announce .site-header { top: 32px; }
}

/* --- 6. Promote footer CTA into a real pre-footer band --- */
/* The "Ready to Modernize" block lives in site-footer-primary-section-1.
   Style just the widget area that contains the Book-a-Demo CTA, leaving
   the copyright line underneath untouched. */
.site-footer-primary-section-1 .footer-widget-area-inner,
.site-footer-primary-section-1 [class*="footer-widget-"] {
  background: linear-gradient(135deg, rgba(45,212,191,0.10), rgba(255,0,170,0.10));
  border-radius: 18px;
  padding: 40px 32px !important;
  border: 1px solid var(--qi-border);
  box-shadow: 0 0 40px rgba(45,212,191,0.10);
  text-align: center;
  margin-bottom: 20px;
}
.site-footer-primary-section-1 .footer-widget-area-inner h2,
.site-footer-primary-section-1 [class*="footer-widget-"] h2 {
  font-size: clamp(24px, 3vw, 38px) !important;
  font-weight: 800 !important;
  margin-bottom: 18px !important;
  background: linear-gradient(90deg, #2dd4bf, #ff00aa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.site-footer-primary-section-1 .wp-block-button__link,
.site-footer-primary-section-1 .wp-block-button a,
.site-footer-primary-section-1 .guten-button,
.site-footer-primary-section-1 a.guten-button {
  display: inline-block;
  padding: 14px 36px !important;
  border-radius: 999px !important;
  background: rgba(45,212,191,0.14) !important;
  color: #7ff1e1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  border: 1px solid rgba(45,212,191,0.45) !important;
  box-shadow: 0 4px 18px rgba(45,212,191,0.12) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
  text-decoration: none !important;
}
.site-footer-primary-section-1 .wp-block-button__link:hover,
.site-footer-primary-section-1 .guten-button:hover {
  transform: translateY(-2px);
  background: rgba(45,212,191,0.22) !important;
  box-shadow: 0 8px 24px rgba(45,212,191,0.25) !important;
}
/* Keep the copyright line outside the CTA card, small and centered. */
.site-footer-primary-section-1 .ast-footer-copyright {
  text-align: center;
  opacity: 0.7;
  font-size: 13px;
  margin-top: 10px;
}

/* ================================================================
   7. MOBILE HORIZONTAL SCROLL LOCK + BUTTON POLISH (2026-04-20)
   ================================================================ */
/* Prevent any stray overflow from allowing horizontal pan on mobile.
   Hero has absolutely-positioned animated bg slides that extend past
   the viewport; clip them at the document and hero boundaries. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}
.elementor-2001,
.elementor-2001 .e-con,
.elementor-2001 .elementor-section,
.elementor-2001 .elementor-container {
  max-width: 100%;
}
.hero-container,
.elementor-element-df03a1e {
  overflow-x: clip;
}
/* Translated/scaled hero bg slides must not push the doc wider. */
.hero-bg-slide { max-width: 100%; }

/* --- Button polish: remove bottom inline-block gap and focus outline --- */
.elementor-button-wrapper {
  line-height: 0;        /* kill the 11px inline baseline gap */
  font-size: 0;
}
.elementor-button-wrapper .elementor-button {
  line-height: 1.3;      /* restore text rhythm inside the button */
  font-size: 14px;
  vertical-align: top;
}
/* Remove the dotted focus outline that lingers after a mouse click,
   but keep it for true keyboard navigation (focus-visible). */
.elementor-button:focus:not(:focus-visible),
.ast-button:focus:not(:focus-visible),
a.elementor-button:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
/* Blur the button on mouseleave so no focus ring lingers on desktop. */
.elementor-button::-moz-focus-inner { border: 0; }

/* Remove the 10px padding-bottom Elementor saved onto the button widget
   containers inside the Solutions cards — it was creating a visible gap
   under LEARN MORE / GET CUSTOM. */
.elementor-element-5114b20 .elementor-widget-button > .elementor-widget-container,
.elementor-element-3bcbd2c .elementor-widget-button > .elementor-widget-container,
.lift-card .elementor-widget-button > .elementor-widget-container {
  padding-bottom: 0 !important;
}


/* ================================================================
   8. HEADER MENU COLOR + PRIVACY POLICY PAGE TYPOGRAPHY (2026-07-03)
   ================================================================ */
/* Menu links were near-white on the solid white header bar, making
   them almost invisible. Scope to non-transparent headers so pages
   with a dark transparent header keep their light links. */
body:not(.ast-theme-transparent-header) .main-header-menu .menu-item > .menu-link {
  color: #1c2245;
  font-weight: 600;
  transition: color 0.2s ease;
}
body:not(.ast-theme-transparent-header) .main-header-menu .menu-item > .menu-link:hover,
body:not(.ast-theme-transparent-header) .main-header-menu .menu-item:hover > .menu-link {
  color: #d4a655;
}
body:not(.ast-theme-transparent-header) .main-header-menu .current-menu-item > .menu-link,
body:not(.ast-theme-transparent-header) .main-header-menu .current_page_item > .menu-link {
  color: #d4a655;
}

/* Privacy Policy page (ID 4360): the global H2 size is hero-scale;
   bring it down to document scale and tighten the reading column. */
.page-id-4360 .elementor-widget-text-editor {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.page-id-4360 .elementor-widget-text-editor h2 {
  font-size: 1.6rem;
  line-height: 1.3;
  margin-top: 2.2em;
  margin-bottom: 0.6em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
  /* Neon cyan→blue gradient to match the site's other headings */
  color: #00d4ff;
  background: linear-gradient(90deg, #00d4ff, #7acdee 45%, #557dbc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}
.page-id-4360 .elementor-widget-text-editor p,
.page-id-4360 .elementor-widget-text-editor li {
  font-size: 17px;
  line-height: 1.75;
}
.page-id-4360 .elementor-widget-text-editor ul {
  margin-bottom: 1.5em;
}
.page-id-4360 .elementor-widget-text-editor li {
  margin-bottom: 0.5em;
}
.page-id-4360 .elementor-widget-text-editor a {
  color: #d4a655;
}

/* ================================================================
   9. HERO COMPONENT — native Elementor        rev. 2026-08-24
   ----------------------------------------------------------------
   Shared by Expertise (2003) and About Us (2585).

   History: this began as a complete standalone HTML document pasted
   into an Elementor HTML widget on each page — <!DOCTYPE>, a global
   `*` reset, `body { background }` and all — which leaked out of the
   widget and repainted the whole site. The CSS moved here first; the
   markup is now native Elementor widgets, so the headline and copy
   are editable in the panel instead of buried in raw HTML.

   Because Elementor puts custom classes on the widget WRAPPER, text
   styling has to target the inner element:
     <div class="… tk-hero-title"><h1 class="elementor-heading-title">
   Anything that merely inherits (colour, font-family) can sit on the
   wrapper; font-size and background-clip cannot.

   Structure expected:
     container .tk-hero
       heading      .tk-hero-title      (h1)
       heading      .tk-hero-subtitle   (h2)
       text-editor  .tk-hero-desc
   The "scroll" cue is drawn by .tk-hero's pseudo-elements — it is
   decoration, so it stays out of the document for screen readers.
   ================================================================ */
.tk-hero {
  position: relative;
  text-align: center;
  color: #e8eaf6;
}

/* ── Animated gradient headline ── */
.tk-hero-title .elementor-heading-title {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(40px, 8vw, 100px);
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(
    90deg,
    #00d4ff 0%,
    #ffffff 25%,
    #00d4ff 50%,
    #0099cc 75%,
    #00d4ff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: heroGradientShift 4s ease-in-out infinite;
  will-change: background-position;
}

/* The entrance fade sits on the wrapper so it cannot fight the
   gradient animation on the inner element. */
.tk-hero-title    { opacity: 0; animation: heroFadeInUp 1s ease-out 0.4s forwards; }
.tk-hero-subtitle { opacity: 0; animation: heroFadeInUp 1s ease-out 1s   forwards; }
.tk-hero-desc     { opacity: 0; animation: heroFadeInUp 1s ease-out 1.4s forwards; }

@keyframes heroGradientShift {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}

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

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

.tk-hero-subtitle .elementor-heading-title {
  font-size: clamp(1.5rem, 4vw, 50px);
  color: #e8eaf6;
  font-weight: 500;
}

.tk-hero-desc {
  font-size: clamp(1rem, 2vw, 25px);
  line-height: 1.8;
  color: #a0a8c9;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.tk-hero-desc p:last-child { margin-bottom: 0; }

/* ── Scroll cue ──────────────────────────────────────────────────
   Two pseudo-elements: ::before is the word, ::after is the pulsing
   line. Both are position:fixed — the cue is pinned to the viewport,
   not to the hero — so their offsets are absolute rather than a flex
   gap. Line 60px + 12px gap + 40px from the bottom puts the word at
   112px. Keep the three numbers in sync if you change any of them.

   THEY HANG OFF .e-con-inner, NOT OFF .tk-hero ITSELF.
   Elementor paints a container's background overlay with that
   container's OWN ::before — see the generated post CSS:
     .elementor-element-xxxxxxx::before { --background-overlay:''; }
   Styling .tk-hero::before here overwrote its `content` and
   `position`, which turned the overlay into a stray half-width block
   sitting on top of the hero text. Never claim ::before or ::after on
   an Elementor container that has a background overlay; put them on a
   child. .e-con-inner exists on every boxed container.
   ---------------------------------------------------------------- */
.tk-hero > .e-con-inner::before,
.tk-hero > .e-con-inner::after {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  opacity: 0;
  animation: heroFadeIn 0.8s ease-out 1.8s forwards;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  pointer-events: none;
}

.tk-hero::before {
  content: 'Scroll';
  bottom: 112px;
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #00d4ff;
  font-weight: 600;
}

.tk-hero::after {
  content: '';
  bottom: 40px;
  width: 2px;
  height: 60px;
  background: linear-gradient(to bottom, #00d4ff, transparent);
  animation: heroFadeIn 0.8s ease-out 1.8s forwards,
             heroScrollPulse 2s ease-in-out 2.6s infinite;
}

@keyframes heroScrollPulse {
  0%, 100% { opacity: 0.3; transform: translate(-50%, 0); }
  50%      { opacity: 1;   transform: translate(-50%, 15px); }
}

/*
 * `!important` is unavoidable here and is not a patch: the cue is held
 * visible by an animation with `forwards`, and per the CSS cascade an
 * animation's filled value beats every normal declaration. Only an
 * important declaration can override it. The alternative — cancelling
 * the animation — would make the cue reappear at opacity 0 and fade in
 * again on every scroll back to the top.
 */
body.tk-scrolled .tk-hero::before,
body.tk-scrolled .tk-hero::after {
  opacity: 0 !important;
  visibility: hidden;
}

@media (max-width: 768px) {
  /* Line shortens to 45px, so the word moves to 30 + 45 + 12 = 87px. */
  .tk-hero::before { bottom: 87px; }
  .tk-hero::after  { bottom: 30px; height: 45px; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .tk-hero-title,
  .tk-hero-subtitle,
  .tk-hero-desc,
  .tk-hero-title .elementor-heading-title,
  .tk-hero::before,
  .tk-hero::after {
    animation: none;
    opacity: 1;
  }
}

/* The editor must never leave the hero mid-fade. */
body.tk-elementor-editor .tk-hero-title,
body.tk-elementor-editor .tk-hero-subtitle,
body.tk-elementor-editor .tk-hero-desc {
  opacity: 1 !important;
  animation: none !important;
}
body.tk-elementor-editor .tk-hero::before,
body.tk-elementor-editor .tk-hero::after { display: none; }


/* ================================================================
   10. CONTACT PAGE (post 16) — rebuilt as native Elementor  2026-08-24
   ----------------------------------------------------------------
   The whole page used to be one 15KB raw-HTML widget with its own
   <style> and <script>. It is now real Elementor sections and widgets;
   only the styling that Elementor cannot express natively lives here:

     - fluid clamp() typography
     - the gradient-clipped hero title
     - the scroll-reveal animation classes toggled by JS
     - Contact Form 7's internal markup (.form-group, .name-row, .line)
       which is generated by CF7 and can never be a widget

   Custom classes set in Elementor land on the WIDGET WRAPPER, so text
   styling must target the inner .elementor-heading-title element.

   Keyframes are namespaced tkc* — the site already has three different
   `fadeInUp` definitions (Elementor's own, plus one on the home page),
   and an unprefixed name here would collide with them.
   ================================================================ */

/*
 * The scroll-reveal engine (.anim-fade-up / .anim-fade-scale / .stagger-*)
 * is NOT defined here — it is site-wide, in section 12 below. This page was
 * simply the first to use it. Only the contact-specific gradient remains.
 */
@keyframes tkcGradientFlow {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* ── Hero typography (fluid; Elementor cannot express clamp()) ── */
.elementor-page-16 .main-title .elementor-heading-title {
  font-size: clamp(3em, 9vw, 6em);
  font-weight: 900;
  line-height: 1.2;
  background: linear-gradient(90deg, #00d4ff 0%, #ffffff 25%, #0099ff 50%, #00ccff 75%, #00d4ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  will-change: background-position;
}
.elementor-page-16 .main-title.is-visible .elementor-heading-title {
  animation: tkcGradientFlow 6s ease-in-out infinite;
}

.elementor-page-16 .hero-subtitle .elementor-heading-title {
  font-size: clamp(1.8em, 5vw, 3em);
  font-weight: 700;
}
.elementor-page-16 .tagline .elementor-heading-title {
  font-size: clamp(1.6em, 4.5vw, 2.6em);
  font-weight: 600;
  line-height: 1.5;
}
.elementor-page-16 .subtagline {
  font-size: clamp(1.2em, 3vw, 1.6em);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  color: #e0e8f0;
}
.elementor-page-16 .form-title .elementor-heading-title {
  font-size: clamp(2.8em, 8vw, 5em);
}
.elementor-page-16 .contact-details .elementor-heading-title { font-size: 2.4em; }

/* Contact detail links: the description is a real <a>, so the pointer cursor
   and keyboard focus come for free. These rules only add the hover affordance. */
.elementor-page-16 .contact-details .elementor-icon-box-description a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.elementor-page-16 .contact-details .elementor-icon-box-description a:hover,
.elementor-page-16 .contact-details .elementor-icon-box-description a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #ffffff;
}
/* The icon and title are wrapped in the widget's own link — match the cursor
   and give the whole item a subtle hover response. */
.elementor-page-16 .contact-details .elementor-widget-icon-box .elementor-icon,
.elementor-page-16 .contact-details .elementor-icon-box-title a { cursor: pointer; }

.elementor-page-16 .contact-details .elementor-widget-icon-box .elementor-icon {
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.elementor-page-16 .contact-details .elementor-widget-icon-box:hover .elementor-icon {
  background-color: rgba(0, 212, 255, 0.3) !important;
  transform: translateY(-2px);
}

/* ── Form card: background/padding/radius/shadow are native Elementor
      settings now. Only the glass blur has no native control.       ── */
.elementor-page-16 .contact-form-wrapper { backdrop-filter: blur(12px); }

/* ── Contact Form 7 internals — generated by CF7, must stay CSS ── */
.elementor-page-16 .contact-form-wrapper .wpcf7,
.elementor-page-16 .contact-form-wrapper .wpcf7-form { margin: 0; padding: 0; }
.elementor-page-16 .contact-form-wrapper .wpcf7-form p { margin: 0 !important; padding: 0 !important; }
.elementor-page-16 .contact-form-wrapper br { display: none; }

.elementor-page-16 .contact-form-wrapper .wpcf7-form .name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 25px;
}
@media (max-width: 600px) {
  .elementor-page-16 .contact-form-wrapper .wpcf7-form .name-row { grid-template-columns: 1fr; }
}

.elementor-page-16 .contact-form-wrapper .form-group { position: relative; margin-bottom: 25px; }

.elementor-page-16 .contact-form-wrapper .form-group input,
.elementor-page-16 .contact-form-wrapper .form-group textarea {
  width: 100%;
  padding: 20px 0 10px;
  background: transparent;
  border: none;
  border-bottom: 2px solid #666;
  color: #fff;
  font-size: 1.1em;
  transition: border-color 0.3s ease;
}
.elementor-page-16 .contact-form-wrapper .form-group input:focus,
.elementor-page-16 .contact-form-wrapper .form-group textarea:focus { outline: none; }

.elementor-page-16 .contact-form-wrapper .form-group label {
  position: absolute;
  left: 0;
  top: 20px;
  color: #aaa;
  transition: 0.3s ease all;
  pointer-events: none;
  font-size: 1.1em;
}
.elementor-page-16 .contact-form-wrapper .form-group.active label,
.elementor-page-16 .contact-form-wrapper .form-group.has-value label {
  top: -5px;
  font-size: 0.9em;
  color: #00d4ff;
}

.elementor-page-16 .contact-form-wrapper .form-group .line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: #00d4ff;
  transition: width 0.4s ease;
}
.elementor-page-16 .contact-form-wrapper .form-group.active .line { width: 100%; }

.elementor-page-16 .contact-form-wrapper .form-group textarea,
.elementor-page-16 .contact-form-wrapper .wpcf7-form textarea {
  min-height: 100px !important;
  max-height: 120px;
  resize: vertical;
}

.elementor-page-16 .contact-form-wrapper .wpcf7-submit {
  background: #ffd700;
  color: #000;
  padding: 16px 50px;
  border: none;
  border-radius: 50px;
  font-size: 1.2em;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
  margin: 20px auto 0 !important;
}
.elementor-page-16 .contact-form-wrapper .wpcf7-submit:hover {
  background: #ffed4a;
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(255, 215, 0, 0.3);
}

.elementor-page-16 .contact-form-wrapper .recaptcha-disclosure {
  font-size: 0.85em;
  color: #888;
  text-align: center;
  margin-top: 20px;
  line-height: 1.5;
}
.elementor-page-16 .contact-form-wrapper .recaptcha-disclosure a { color: #00d4ff; text-decoration: none; }
.elementor-page-16 .contact-form-wrapper .recaptcha-disclosure a:hover { text-decoration: underline; }

/* Reduced motion is handled site-wide in section 12. */

/* ================================================================
   11. QUOTE BLOCK (Expertise, page 2003)          2026-08-24
   ----------------------------------------------------------------
   Was a 3.2KB Elementor HTML widget carrying its own <style> and
   <script> — the last pasted-CSS widget on the site. The quote is
   now a native text-editor widget, so the copy is editable in the
   Elementor panel instead of buried in markup.

   The two glowing rules and the opening quote mark were <div> and
   <span> elements purely for decoration; they are pseudo-elements
   now, which is why the widget contains nothing but the sentence.

   Markup produced by Elementor:
     <div class="... tk-quote-text"><div class="elementor-widget-container">
       <p>…</p>
     </div></div>
   ================================================================ */
.tk-quote-text {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  z-index: 2;
}

/* Glowing rules above and below the quote. */
.tk-quote-text::before,
.tk-quote-text::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #00d4ff, transparent);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.8);
  animation: tkQuoteLineSlide 3s ease-in-out infinite;
}
.tk-quote-text::before { top: -50px; }
.tk-quote-text::after  { bottom: -50px; animation-direction: reverse; }

@keyframes tkQuoteLineSlide {
  0%, 100% { width: 80px;  opacity: 0.6; }
  50%      { width: 140px; opacity: 1; }
}

/* Opening quote mark. */
.tk-quote-text p::before {
  content: '\201C';
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 6rem;
  line-height: 0.5;
  color: #00d4ff;
  margin: 40px 0 20px 0;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
  animation: tkQuoteGlow 3s ease-in-out infinite;
}

@keyframes tkQuoteGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(0, 212, 255, 0.6); opacity: 0.4; }
  50%      { text-shadow: 0 0 40px rgba(0, 212, 255, 0.9); opacity: 0.8; }
}

.tk-quote-text p {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.4;
  color: #ffffff;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
  margin: 0;
}

@media (max-width: 768px) {
  .tk-quote-text p::before { font-size: 4rem; }
  .tk-quote-text::before   { top: -30px; }
  .tk-quote-text::after    { bottom: -30px; }
}

/* ================================================================
   12. SCROLL REVEAL ENGINE — SITE-WIDE          2026-08-24
   ----------------------------------------------------------------
   Add `anim-fade-up` or `anim-fade-scale` to any Elementor element
   (plus an optional `stagger-1`…`stagger-6`) and it fades in when it
   scrolls into view. The JS lives in functions.php as one site-wide
   script; there is no per-page copy.

   This started life scoped to `.elementor-page-16`. It is unscoped
   now because Expertise and About Us needed the same behaviour, and
   three near-identical inline <script> blocks — one per page, each
   inside an HTML widget — is exactly the duplication that caused the
   original background bug.

   ---- WHY THE HIDING IS GATED ON html.tk-anim ----
   `opacity: 0` is applied ONLY when <html> carries .tk-anim, and only
   the reveal script adds that class. If the script never runs, nothing
   is ever hidden, so the failure mode is "no animation" rather than a
   blank page.

   That is not hypothetical: an ungated version blanked the Elementor
   editor, because Elementor renders widgets after DOMContentLoaded and
   the IntersectionObserver never observed them. The editor is now
   excluded twice — the script skips .tk-anim when the body has
   .tk-elementor-editor, and the rules below bail out on it too.

   DO NOT change these to a plain `.anim-fade-up { opacity: 0 }`.
   ================================================================ */
@keyframes tkRevealUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tkRevealScale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

html.tk-anim body:not(.tk-elementor-editor) .anim-fade-up,
html.tk-anim body:not(.tk-elementor-editor) .anim-fade-scale { opacity: 0; }

.anim-fade-up.is-visible    { animation: tkRevealUp    0.9s ease-out forwards; }
.anim-fade-scale.is-visible { animation: tkRevealScale 1s   ease-out forwards; }

.anim-fade-up.stagger-1.is-visible,
.anim-fade-scale.stagger-1.is-visible { animation-delay: 0.1s; }
.anim-fade-up.stagger-2.is-visible,
.anim-fade-scale.stagger-2.is-visible { animation-delay: 0.2s; }
.anim-fade-up.stagger-3.is-visible,
.anim-fade-scale.stagger-3.is-visible { animation-delay: 0.3s; }
.anim-fade-up.stagger-4.is-visible,
.anim-fade-scale.stagger-4.is-visible { animation-delay: 0.4s; }
.anim-fade-up.stagger-5.is-visible,
.anim-fade-scale.stagger-5.is-visible { animation-delay: 0.5s; }
.anim-fade-up.stagger-6.is-visible,
.anim-fade-scale.stagger-6.is-visible { animation-delay: 0.6s; }

/* Editor: never hide, never animate. */
body.tk-elementor-editor .anim-fade-up,
body.tk-elementor-editor .anim-fade-scale,
body.tk-elementor-editor .main-title {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .anim-fade-up,
  .anim-fade-scale,
  .main-title {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .tk-quote-text::before,
  .tk-quote-text::after,
  .tk-quote-text p::before { animation: none !important; }
}

/* ================================================================
   13. LAYOUT UTILITIES                            2026-08-24
   ----------------------------------------------------------------
   Small, reusable classes to add in Elementor's "CSS Classes" field.

   Remember which key Elementor uses:
     container  ->  css_classes   (no leading underscore)
     widget     ->  _css_classes
   Getting it the wrong way round fails silently — the JSON saves,
   the page renders, the class never reaches the DOM.
   ================================================================ */

/*
 * Caps line length for body copy. The site content width is 1140px, which is
 * right for layout but far too wide to read a paragraph across, so a single
 * sentence centred in a section needs a shorter measure. Use on a text-editor
 * or heading widget; it centres itself.
 */
.tk-measure {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}