.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 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);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@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;}}/* Start custom CSS *//* ============================================================
   GROWTH FACTOR AI — custom styles
   WPCode → Add Snippet → Add Your Custom Code → CSS Snippet
   Location: Site Wide Header   |   Auto Insert: Active
   ============================================================ */

:root{
  --gf-ink:#101013;
  --gf-ink-2:#17171C;
  --gf-ink-3:#22222A;
  --gf-bone:#EFEDE6;
  --gf-card:#F7F6F2;
  --gf-red:#E8402C;
  --gf-orange:#F5A63C;
  --gf-steel:#8C8C97;
  --gf-sub:#C9C6BE;
  --gf-line:#2A2A31;
  --gf-brand:linear-gradient(100deg,#E8402C 0%,#F5A63C 100%);
  --gf-ease:cubic-bezier(.22,.61,.36,1);
}


/* ------------------------------------------------------------
   1. GRADIENT HEADLINE — fixes the solid orange block
   WordPress strips background-clip out of inline style
   attributes, so it has to live here instead.
   ------------------------------------------------------------ */
#gf-hero .elementor-heading-title span,
.gf-grad{
  background-image:var(--gf-brand) !important;
  -webkit-background-clip:text !important;
          background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  display:inline !important;
  padding-bottom:.04em;
}


/* ------------------------------------------------------------
   2. HERO ATMOSPHERE — vertical rules + the big brand slash
   ------------------------------------------------------------ */
#gf-hero{
  position:relative;
  overflow:hidden;
}
#gf-hero > *{
  position:relative;
  z-index:2;
}
#gf-hero::before{           /* six vertical hairlines */
  content:"";
  position:absolute; inset:0;
  background-image:linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:16.666% 100%;
  pointer-events:none;
  z-index:0;
}
#gf-hero::after{            /* skewed gradient slash, top right */
  content:"";
  position:absolute;
  top:-20%; right:-14%;
  width:min(46vw,640px);
  height:150%;
  background-image:var(--gf-brand);
  transform:skewX(-14deg);
  opacity:.13;
  filter:blur(2px);
  pointer-events:none;
  z-index:0;
}


/* ------------------------------------------------------------
   3. BUTTONS
   Add the CSS class gf-primary or gf-ghost to a button widget
   under Advanced → CSS Classes.
   ------------------------------------------------------------ */
.gf-primary .elementor-button,
.elementor-widget-form .elementor-button[type="submit"]{
  background-image:var(--gf-brand);
  background-size:200% 100%;
  background-position:0% 50%;
  color:#12100E;
  border:0;
  border-radius:4px;
  box-shadow:0 6px 18px -8px rgba(232,64,44,.55);
  transition:background-position .5s var(--gf-ease),
             transform .28s var(--gf-ease),
             box-shadow .28s var(--gf-ease);
}
.gf-primary .elementor-button:hover,
.gf-primary .elementor-button:focus,
.elementor-widget-form .elementor-button[type="submit"]:hover,
.elementor-widget-form .elementor-button[type="submit"]:focus{
  background-position:100% 50%;
  transform:translateY(-4px);
  box-shadow:0 18px 34px -12px rgba(232,64,44,.75);
}
.gf-primary .elementor-button:active{transform:translateY(-1px);}

.gf-ghost .elementor-button{
  background-color:transparent;
  color:var(--gf-bone);
  border:2px solid rgba(239,237,230,.28);
  border-radius:4px;
  transition:all .28s var(--gf-ease);
}
.gf-ghost .elementor-button:hover,
.gf-ghost .elementor-button:focus{
  border-color:var(--gf-bone);
  background-color:rgba(239,237,230,.07);
  transform:translateY(-2px);
}


/* ------------------------------------------------------------
   4. THE SLASH — section marker (divider widgets)
   Add CSS class gf-slash to each divider widget.
   ------------------------------------------------------------ */
.gf-slash .elementor-divider-separator{
  border:0 !important;
  height:8px;
  width:64px;
  background-image:var(--gf-brand);
  transform:skewX(-22deg);
}
.gf-slash .elementor-divider{padding-block:0;}


/* ------------------------------------------------------------
   5. SERVICE CARDS — hover lift
   Add CSS class gf-card to each of the three card containers.
   ------------------------------------------------------------ */
.gf-card{
  transition:transform .3s var(--gf-ease),
             box-shadow .3s var(--gf-ease),
             border-top-color .3s ease;
}
.gf-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px -26px rgba(16,16,19,.5);
  border-top-color:var(--gf-red) !important;
}


/* ------------------------------------------------------------
   6. MARQUEE BAND
   Add CSS class gf-marquee to the gradient strip container.
   ------------------------------------------------------------ */
.gf-marquee{overflow:hidden;}
.gf-marquee .elementor-heading-title{
  display:inline-block;
  white-space:nowrap;
  animation:gfMarquee 38s linear infinite;
}
@keyframes gfMarquee{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}


/* ------------------------------------------------------------
   7. HEADER
   Add CSS class gf-header to the header container.
   ------------------------------------------------------------ */
.gf-header{
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
  background-color:rgba(16,16,19,.82) !important;
}
.gf-header .elementor-icon-list-item a,
.gf-header .elementor-icon-list-text{
  color:var(--gf-steel);
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-decoration:none;
  transition:color .2s var(--gf-ease);
}
.gf-header .elementor-icon-list-item a:hover .elementor-icon-list-text{
  color:var(--gf-bone);
}
.gf-header .elementor-icon-list-icon{display:none;}


/* ------------------------------------------------------------
   8. TESTIMONIAL
   ------------------------------------------------------------ */
#gf-proof img{
  border-radius:50%;
  border:2px solid var(--gf-orange);
}


/* ------------------------------------------------------------
   9. LEAD FORM
   ------------------------------------------------------------ */
#gf-contact .elementor-field-textual{
  padding:14px 16px;
  background-color:var(--gf-ink);
  border:1px solid var(--gf-line);
  border-radius:4px;
  color:var(--gf-bone);
  transition:border-color .22s var(--gf-ease),background-color .22s var(--gf-ease);
}
#gf-contact .elementor-field-textual::placeholder{color:#5C5C66;}
#gf-contact .elementor-field-textual:focus{
  border-color:var(--gf-orange);
  background-color:var(--gf-ink-3);
  outline:none;
}
#gf-contact textarea.elementor-field-textual{min-height:132px;}
#gf-contact .elementor-field-label{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gf-steel);
}


/* ------------------------------------------------------------
   10. FOCUS VISIBILITY
   ------------------------------------------------------------ */
#gf-hero a:focus-visible,
#gf-services a:focus-visible,
#gf-proof a:focus-visible,
#gf-contact a:focus-visible,
#gf-contact input:focus-visible,
#gf-contact textarea:focus-visible,
.gf-header a:focus-visible{
  outline:3px solid var(--gf-orange);
  outline-offset:3px;
}


/* ------------------------------------------------------------
   11. SCROLL REVEAL (paired with the JS snippet)
   ------------------------------------------------------------ */
.gf-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--gf-ease),transform .7s var(--gf-ease);
}
.gf-reveal.gf-in{
  opacity:1;
  transform:none;
}


/* ------------------------------------------------------------
   12. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width:1024px){
  #gf-hero::after{width:60vw;opacity:.1;}
}
@media (max-width:767px){
  #gf-hero::before{background-size:33.333% 100%;}
  #gf-hero .elementor-widget-button .elementor-button{width:100%;}
}


/* ------------------------------------------------------------
   13. REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .gf-marquee .elementor-heading-title{animation:none;}
  .gf-reveal{opacity:1;transform:none;transition:none;}
  .gf-primary .elementor-button,
  .gf-ghost .elementor-button,
  .gf-card{transition:none;}
  .gf-primary .elementor-button:hover,
  .gf-ghost .elementor-button:hover,
  .gf-card:hover{transform:none;}
}/* End custom CSS */