.elementor-kit-7{--e-global-color-primary:#FEFFFA;--e-global-color-secondary:#FEFFFA;--e-global-color-text:#FEFFFA;--e-global-color-accent:#C4EE18;--e-global-color-ba3f13a:#41C0F2;--e-global-color-70602ed:#030303;--e-global-color-0cf2a5e:#1B2847;--e-global-color-8bec9cc:#2B2E36;--e-global-color-a70a35f:#000617;--e-global-typography-primary-font-family:"Cinzel";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Cinzel";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Space Grotesk";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Space Grotesk";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --e-gv-7cad141:#000000; --color-1:#030303; --acent:#C4EE18; --acent2:#41C0F2; --primary:#FEFFFA; --e-gv-f797010:#7402C9; --cinzel:Roboto; --inter:Space Grotesk; --h1:48px; --h2:40px; --h3:32px; --h4:24px; --h5:20px; --h6:18px; --back-grey:#101010; }
/* Start custom CSS *//* =======================================================
   MachX Digital — Global Design System v3
   Kit CSS  ·  post_id 7  ·  Replace-safe
   =======================================================
   TOKEN INDEX
     --color-bg          #030303
     --color-primary     #FEFFFA   (headings / primary text)
     --color-accent-lime #C4EE18   (CTA, highlights)
     --color-accent-blue #41C0F2   (eyebrows, outlines, links)
     --font-heading      Cinzel, serif
     --font-body         Space Grotesk, sans-serif
   ======================================================= */

/* ── 1. DESIGN TOKENS ─────────────────────────────────── */
:root {
  --color-bg:          #030303;
  --color-primary:     #FEFFFA;
  --color-accent-lime: #C4EE18;
  --color-accent-blue: #41C0F2;

  /* backward-compat aliases used in older .elementor-kit-7s */
  --color-accent:      #C4EE18;
  --color-secondary:   #41C0F2;

  --font-heading: "Cinzel", serif;
  --font-body:    "Space Grotesk", sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --border-subtle:       rgba(254,255,250,0.15);
  --surface-dark:        rgba(254,255,250,0.04);
  --surface-blue:        rgba(65,192,242,0.08);
  --surface-lime:        rgba(196,238,24,0.08);

  --transition-fast: 0.2s ease;
  --transition-std:  0.3s ease;
}

/* ── 2. BASE RESET ────────────────────────────────────── */
body {
  background-color: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-primary);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-primary);
}
a {
  color: var(--color-accent-blue);
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent-lime); }

/* ── 3. STEP 5 — GLOBAL UTILITY CLASSES ──────────────── */

/* --- Text --- */
.text-primary   { color: var(--color-primary)     !important; }
.text-accent    { color: var(--color-accent-lime)  !important; }
.text-secondary { color: var(--color-accent-blue)  !important; }
.text-muted     { color: rgba(254,255,250,0.65)    !important; }
.text-muted-2   { color: rgba(254,255,250,0.45)    !important; }
.text-dark      { color: var(--color-bg)           !important; }
.link-highlight { color: var(--color-accent-blue)  !important; text-decoration: none; transition: color var(--transition-fast); }
.link-highlight:hover { color: var(--color-accent-lime) !important; }

/* --- Backgrounds --- */
.section-dark        { background: var(--color-bg)      !important; }
.bg-dark             { background: var(--color-bg)      !important; }
.bg-accent           { background: var(--color-accent-lime) !important; }
.bg-secondary        { background: var(--color-accent-blue) !important; }
.bg-surface          { background: var(--surface-dark)  !important; }
.bg-surface-lime     { background: var(--surface-lime)  !important; }
.bg-surface-blue     { background: var(--surface-blue)  !important; }

/* --- Borders --- */
.border-subtle    { border: 1px solid var(--border-subtle)       !important; }
.border-accent    { border: 1px solid var(--color-accent-lime)   !important; }
.border-secondary { border: 1px solid var(--color-accent-blue)   !important; }
.border-primary   { border: 1px solid var(--color-primary)       !important; }

/* --- Buttons --- */
/* [LOCAL OVERRIDE NOTE: add btn-primary / btn-secondary / btn-outline
   as a CSS ID on the button widget's Advanced → CSS Classes field] */
.btn-primary,
.elementor-button.btn-primary {
  background:     var(--color-accent-lime) !important;
  color:          var(--color-bg)          !important;
  font-family:    var(--font-body)         !important;
  font-weight:    600                      !important;
  border:         none                     !important;
  border-radius:  var(--radius-md)         !important;
  padding:        14px 36px               !important;
  letter-spacing: 0.04em                   !important;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.btn-primary:hover,
.elementor-button.btn-primary:hover {
  opacity:   0.88             !important;
  transform: translateY(-2px) !important;
  color:     var(--color-bg)  !important;
}

.btn-secondary,
.elementor-button.btn-secondary {
  background:     transparent                              !important;
  color:          var(--color-accent-blue)                 !important;
  font-family:    var(--font-body)                         !important;
  font-weight:    600                                      !important;
  border:         1px solid var(--color-accent-blue)       !important;
  border-radius:  var(--radius-md)                         !important;
  padding:        13px 35px                               !important;
  letter-spacing: 0.04em                                   !important;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.btn-secondary:hover,
.elementor-button.btn-secondary:hover {
  background: var(--color-accent-blue) !important;
  color:      var(--color-bg)          !important;
  transform:  translateY(-2px)         !important;
}

.btn-outline,
.elementor-button.btn-outline {
  background:     transparent                              !important;
  color:          var(--color-accent-blue)                 !important;
  font-family:    var(--font-body)                         !important;
  font-weight:    600                                      !important;
  border:         1.5px solid var(--color-accent-blue)     !important;
  border-radius:  var(--radius-md)                         !important;
  padding:        13px 35px                               !important;
  letter-spacing: 0.04em                                   !important;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.btn-outline:hover,
.elementor-button.btn-outline:hover {
  background: var(--color-accent-blue) !important;
  color:      var(--color-bg)          !important;
  transform:  translateY(-2px)         !important;
}

/* --- Headings (utility scale) --- */
.heading-xl {
  font-family:    var(--font-heading) !important;
  font-size:      clamp(40px, 6vw, 72px) !important;
  font-weight:    700                  !important;
  color:          var(--color-primary) !important;
  line-height:    1.1                  !important;
  letter-spacing: 0.02em               !important;
}
.heading-lg {
  font-family:    var(--font-heading) !important;
  font-size:      clamp(28px, 4vw, 48px) !important;
  font-weight:    700                  !important;
  color:          var(--color-primary) !important;
  line-height:    1.15                 !important;
  letter-spacing: 0.015em              !important;
}
.heading-sm {
  font-family:    var(--font-heading) !important;
  font-size:      clamp(18px, 2.5vw, 28px) !important;
  font-weight:    600                  !important;
  color:          var(--color-primary) !important;
  line-height:    1.3                  !important;
}
.heading-primary  { font-family: var(--font-heading) !important; color: var(--color-primary)     !important; font-weight: 700 !important; }
.heading-accent   { font-family: var(--font-heading) !important; color: var(--color-accent-lime) !important; font-weight: 700 !important; }
.heading-secondary{ font-family: var(--font-heading) !important; color: var(--color-accent-blue) !important; font-weight: 700 !important; }

/* --- Body text --- */
.text-body, .body-text {
  font-family: var(--font-body)          !important;
  color:       rgba(254,255,250,0.85)    !important;
  font-weight: 400                       !important;
  line-height: 1.65                      !important;
}

/* --- Eyebrow labels --- */
.eyebrow {
  display:        block                      !important;
  color:          var(--color-accent-blue)   !important;
  font-family:    var(--font-body)           !important;
  font-size:      13px                       !important;
  font-weight:    600                        !important;
  letter-spacing: 0.14em                     !important;
  text-transform: uppercase                  !important;
  line-height:    1.5                        !important;
}

/* --- Cards --- */
.machx-card {
  background:    var(--surface-dark)    !important;
  border:        1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg)       !important;
}

/* ── 4. GLOBAL CLASS OVERRIDES ────────────────────────── */
/* sec-btn → lime CTA button */
/* [Section: global reusable CTA button] */
.g-4cb3873 {
  background:    var(--color-accent-lime) !important;
  color:         var(--color-bg)          !important;
  font-family:   var(--font-body)         !important;
  font-weight:   600                      !important;
  border-radius: var(--radius-md)         !important;
}
/* serv-head → Cinzel heading, lime color [Section: Services] */
.g-f37bb9a {
  font-family: var(--font-heading)     !important;
  color:       var(--color-accent-lime) !important;
}
/* dark-head-sec → was Sora+#A964FF → Cinzel+primary [Section: About/Dark hero] */
.g-086823a {
  font-family: var(--font-heading)  !important;
  color:       var(--color-primary) !important;
}
/* tag-head → eyebrow role: Space Grotesk+blue [Section: eyebrows site-wide] */
.g-efc2ab6 {
  font-family:    var(--font-body)           !important;
  color:          var(--color-accent-blue)   !important;
  letter-spacing: 0.12em                     !important;
  text-transform: uppercase                  !important;
}
/* head4 → was Sora → Cinzel+primary [Section: feature headings] */
.g-52d5b02 {
  font-family: var(--font-heading)  !important;
  color:       var(--color-primary) !important;
}
/* sub-head3 → was Sora → Cinzel+primary [Section: sub-headings] */
.g-e7f5b5d {
  font-family: var(--font-heading)  !important;
  color:       var(--color-primary) !important;
}
/* head-sec → Cinzel, corrected to exact #FEFFFA [Section: section headings] */
.g-0e53cd1 {
  font-family: var(--font-heading)  !important;
  color:       var(--color-primary) !important;
}
/* text-para → was Helvetica/50% width → Space Grotesk full-width [Section: body text] */
/* LOCAL OVERRIDE NOTE: width:50% was causing text-overlap in "What We Deliver" */
.g-4d52c07 {
  font-family: var(--font-body)            !important;
  color:       rgba(254,255,250,0.75)      !important;
  width:       100%                        !important;
  max-width:   600px                       !important;
}

/* ── 5. ELEMENTOR WIDGET FONT ENFORCEMENT ─────────────── */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-heading);
}
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  font-family: var(--font-body);
}

/* ── 6. NAVIGATION ────────────────────────────────────── */
.elementor-nav-menu a,
.elementor-nav-menu--main .elementor-item {
  color:       var(--color-primary) !important;
  font-family: var(--font-body)     !important;
  transition:  color var(--transition-fast);
}
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item-active,
.elementor-nav-menu--main .elementor-item.highlighted {
  color: var(--color-accent-lime) !important;
}
/* ekit nav */
.ekit-nav-menu .nav-link,
.ekit-nav-menu .nav-item > a {
  color:       var(--color-primary) !important;
  font-family: var(--font-body)     !important;
  transition:  color var(--transition-fast);
}
.ekit-nav-menu .nav-link:hover,
.ekit-nav-menu .nav-item.active > a {
  color: var(--color-accent-lime) !important;
}

/* ── 7. SECTION BACKGROUNDS — .section-dark enforcement ── */
/* Apply to every top-level container to normalise bg colour */
.elementor-section,
.e-con.section-dark,
.e-flexbox.section-dark {
  background-color: var(--color-bg) !important;
}

/* ── 8. RESPONSIVE ────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --radius-lg: 20px; }
  .eyebrow { font-size: 12px !important; }
}
@media (max-width: 767px) {
  :root { --radius-lg: 16px; }
  .eyebrow { font-size: 11px !important; }
  .btn-primary,
  .elementor-button.btn-primary,
  .btn-secondary,
  .elementor-button.btn-secondary,
  .btn-outline,
  .elementor-button.btn-outline {
    padding: 12px 24px !important;
    width: 100%;
  }
  .g-4d52c07 { max-width: 100% !important; }
  .g-ea25264 { width: 100% !important; max-width: 100% !important; }
}/* End custom CSS */