.elementor-kit-10{--e-global-color-primary:#F77C22;--e-global-color-secondary:#E96F23;--e-global-color-text:#FA952B;--e-global-color-accent:#D35F21;--e-global-color-2cc501d:#0B0B0B;--e-global-color-9071664:#14181D;--e-global-color-2679933:#2A2F36;--e-global-color-c824c4f:#FFFFFF;--e-global-color-4f110d4:#C7CDD4;--e-global-typography-primary-font-family:"Space Grotesk";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Manrope";--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;font-family:"Manrope", Sans-serif;font-size:18px;font-weight:400;line-height:1.7em;letter-spacing:0em;}.elementor-kit-10 e-page-transition{background-color:#FFBC7D;}.elementor-kit-10 h1{font-family:"Space Grotesk", Sans-serif;font-size:52px;font-weight:700;line-height:1.08em;letter-spacing:-0.02em;}.elementor-kit-10 h2{font-family:"Space Grotesk", Sans-serif;font-size:38px;font-weight:700;letter-spacing:0.02em;}.elementor-kit-10 h3{font-family:"Space Grotesk", Sans-serif;font-size:28px;font-weight:600;letter-spacing:-0.015em;}.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:1366px){.elementor-kit-10{font-size:18px;line-height:1.7em;letter-spacing:0em;}.elementor-kit-10 h1{font-size:48px;line-height:1.08em;letter-spacing:-0.02px;}.elementor-kit-10 h2{font-size:34px;line-height:1.16em;letter-spacing:0.02em;}.elementor-kit-10 h3{font-size:26px;line-height:1.21em;letter-spacing:-0.015em;}}@media(max-width:1024px){.elementor-kit-10{font-size:17px;line-height:1.7em;letter-spacing:0em;}.elementor-kit-10 h1{font-size:42px;line-height:1.1em;letter-spacing:-0.02em;}.elementor-kit-10 h2{font-size:32px;line-height:1.18em;letter-spacing:-0.02em;}.elementor-kit-10 h3{font-size:24px;line-height:1.22em;letter-spacing:-0.015em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-10{font-size:16px;line-height:1.7em;letter-spacing:0em;}.elementor-kit-10 h1{font-size:34px;line-height:1.12em;letter-spacing:-0.02em;}.elementor-kit-10 h2{font-size:28px;line-height:1.2em;letter-spacing:-0.02em;}.elementor-kit-10 h3{font-size:22px;line-height:1.2em;letter-spacing:-0.015em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}@media(min-width:1440px){.elementor-kit-10{font-size:18px;line-height:1.7em;letter-spacing:0em;}.elementor-kit-10 h1{font-size:56px;letter-spacing:-0.02em;}.elementor-kit-10 h2{font-size:42px;line-height:1.14em;letter-spacing:-0.02em;}.elementor-kit-10 h3{font-size:32px;line-height:1.2em;letter-spacing:-0.015em;}}/* Start custom CSS *//* =========================================================
   GTM Pioneers — Elementor CSS Style Guide (Fluid / Responsive)
   Goal: remove “px-per-breakpoint” maintenance by using:
   - rem for font sizing (root scales)
   - clamp() for fluid typography + spacing
   - dvh for viewport height safety on mobile
   - em for line-heights (unchanged)
   - modern CSS vars so you can tune the whole site from :root

   How to use in Elementor (CSS Classes):
     Sections:   gtm-section / gtm-section-tight / gtm-grid-bg
     Cards:      gtm-card / gtm-card--soft
     Buttons:    gtm-btn-primary / gtm-btn-secondary (+ gtm-btn-lg/sm)
     Forms:      gtm-form
     FAQ:        gtm-faq
     Divider:    <div class="gtm-divider"></div>
========================================================= */

/* -----------------------------
   0) Fluid Base Scale
   - Root font size is fluid: 15px → 18px depending on viewport width.
   - All type/spacing tokens are in rem so everything follows.
------------------------------ */
:root{
  /* Fluid root scale (approx. 15px–18px) */
  font-size: clamp(15px, 0.9vw + 12px, 18px);

  /* Colors */
  --gtm-primary: #EC7D2A;
  --gtm-accent:  #E6802F;
  --gtm-bg:      #0B0B0B;
  --gtm-surface: #16181B;
  --gtm-surface2:#23262B;
  --gtm-border:  #2A2F36;
  --gtm-text:    #FBFCFC;
  --gtm-muted:   #BEBDBC;
  --gtm-muted2:  #828383;
  --gtm-soft:    #F3EDE6;

  /* Fonts */
  --gtm-font-heading: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gtm-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* --------------------------------
     Fluid Typography (rem + clamp)
     - Values roughly match your old steps, but fluidly.
  --------------------------------- */
  --gtm-h1: clamp(2.125rem, 1.55rem + 2.2vw, 3.5rem);   /* ~34px → 56px */
  --gtm-h2: clamp(1.75rem,  1.35rem + 1.6vw, 2.625rem); /* ~28px → 42px */
  --gtm-h3: clamp(1.375rem, 1.15rem + 0.9vw, 2rem);     /* ~22px → 32px */
  --gtm-h4: clamp(1.125rem, 1.02rem + 0.55vw, 1.5rem);  /* ~18px → 24px */
  --gtm-h5: clamp(1rem,     0.96rem + 0.25vw, 1.125rem);/* ~16px → 18px */
  --gtm-h6: clamp(0.9375rem,0.92rem + 0.20vw, 1rem);    /* ~15px → 16px */

  /* Line-heights + letter-spacing (em stays ideal) */
  --gtm-h1-lh: 1.12em; --gtm-h1-ls: -0.02em;
  --gtm-h2-lh: 1.20em; --gtm-h2-ls: -0.02em;
  --gtm-h3-lh: 1.24em; --gtm-h3-ls: -0.015em;
  --gtm-h4-lh: 1.30em; --gtm-h4-ls: -0.01em;
  --gtm-h5-lh: 1.40em; --gtm-h5-ls: -0.005em;
  --gtm-h6-lh: 1.45em; --gtm-h6-ls: 0em;

  /* Body / lead / small / UI */
  --gtm-body:  clamp(1rem, 0.96rem + 0.25vw, 1.125rem); /* ~16px → 18px */
  --gtm-body-lh: 1.70em;
  --gtm-body-ls: 0em;

  --gtm-lead:  clamp(1rem, 0.98rem + 0.35vw, 1.25rem);  /* ~16px → 20px */
  --gtm-lead-lh: 1.65em;
  --gtm-lead-ls: 0em;

  --gtm-small: clamp(0.8125rem, 0.79rem + 0.18vw, 0.875rem); /* ~13px → 14px */
  --gtm-small-lh: 1.55em;
  --gtm-small-ls: 0.01em;

  --gtm-ui:    clamp(0.9375rem, 0.91rem + 0.22vw, 1rem); /* ~15px → 16px */
  --gtm-ui-lh: 1.20em;
  --gtm-ui-ls: 0.01em;

  /* --------------------------------
     Radius (rem so it scales with root)
  --------------------------------- */
  --gtm-radius-lg: 1.125rem; /* ~18px */
  --gtm-radius-md: 0.875rem; /* ~14px */
  --gtm-radius-pill: 999px;

  /* --------------------------------
     Fluid Spacing (rem + clamp)
     - Now you can tweak these once.
  --------------------------------- */
  --gtm-section-y:       clamp(3.5rem, 2.4rem + 3.2vw, 6rem);   /* 56px → 96px */
  --gtm-section-y-tight: clamp(2.75rem, 2.0rem + 2.2vw, 4rem);  /* 44px → 64px */

  --gtm-gap:      clamp(0.875rem, 0.6rem + 1.2vw, 1.5rem);      /* 14px → 24px */
  --gtm-card-pad: clamp(1.125rem, 0.85rem + 1.6vw, 1.75rem);    /* 18px → 28px */

  /* Content widths as tokens */
  --gtm-max-1200: 75rem;   /* 1200px */
  --gtm-max-1440: 90rem;   /* 1440px */

  /* Buttons */
  --gtm-btn-py: clamp(0.75rem, 0.65rem + 0.4vw, 0.95rem);  /* ~12px → 15px */
  --gtm-btn-px: clamp(1.05rem, 0.9rem + 0.8vw, 1.5rem);    /* ~17px → 24px */

  /* Form spacing */
  --gtm-field-gap: clamp(0.75rem, 0.6rem + 0.5vw, 0.875rem); /* 12px → 14px */
  --gtm-field-pad: clamp(0.75rem, 0.65rem + 0.4vw, 0.9rem);  /* ~12px → 14px */
}

/* -----------------------------
   1) Global Base Styling
------------------------------ */
body{
  font-family: var(--gtm-font-body);
  font-size: var(--gtm-body);
  line-height: var(--gtm-body-lh);
  letter-spacing: var(--gtm-body-ls);
  color: var(--gtm-text);
  background: var(--gtm-bg);
}

/* Headings */
h1,h2,h3,h4,h5,h6{
  font-family: var(--gtm-font-heading);
  color: var(--gtm-text);
  margin: 0 0 0.45em 0;
}

h1{ font-size: var(--gtm-h1); line-height: var(--gtm-h1-lh); letter-spacing: var(--gtm-h1-ls); font-weight: 700; }
h2{ font-size: var(--gtm-h2); line-height: var(--gtm-h2-lh); letter-spacing: var(--gtm-h2-ls); font-weight: 700; }
h3{ font-size: var(--gtm-h3); line-height: var(--gtm-h3-lh); letter-spacing: var(--gtm-h3-ls); font-weight: 700; }
h4{ font-size: var(--gtm-h4); line-height: var(--gtm-h4-lh); letter-spacing: var(--gtm-h4-ls); font-weight: 600; }
h5{ font-size: var(--gtm-h5); line-height: var(--gtm-h5-lh); letter-spacing: var(--gtm-h5-ls); font-weight: 600; }
h6{ font-size: var(--gtm-h6); line-height: var(--gtm-h6-lh); letter-spacing: var(--gtm-h6-ls); font-weight: 600; }

p{
  margin: 0 0 1em 0;
  color: var(--gtm-muted);
  font-family: var(--gtm-font-body);
}

/* Helper text class */
.gtm-small{
  font-family: var(--gtm-font-body);
  font-size: var(--gtm-small);
  line-height: var(--gtm-small-lh);
  letter-spacing: var(--gtm-small-ls);
  font-weight: 600;
  color: var(--gtm-muted2);
}

/* Lead paragraph class */
.gtm-lead{
  font-family: var(--gtm-font-body);
  font-size: var(--gtm-lead);
  line-height: var(--gtm-lead-lh);
  letter-spacing: var(--gtm-lead-ls);
  font-weight: 500;
  color: var(--gtm-soft);
}

/* Links */
a{ color: var(--gtm-primary); text-decoration: none; }
a:hover{ color: var(--gtm-accent); }

/* Focus accessibility */
:focus-visible{
  outline: 0.125rem solid var(--gtm-primary);
  outline-offset: 0.2rem;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------
   2) Utility Sections / Backgrounds
------------------------------ */
.gtm-section{
  padding-block: var(--gtm-section-y);
}

.gtm-section-tight{
  padding-block: var(--gtm-section-y-tight);
}

/* Grid background: make sizes fluid too */
.gtm-grid-bg{
  position: relative;
  background:
    radial-gradient(75rem 37.5rem at 20% 0%, rgba(236,125,42,0.14), transparent 60%),
    radial-gradient(56.25rem 31.25rem at 80% 20%, rgba(230,128,47,0.10), transparent 55%),
    var(--gtm-bg);
}
.gtm-grid-bg::before{
  content:"";
  position:absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  /* fluid grid size */
  background-size: clamp(2.5rem, 2.0rem + 1.5vw, 4rem) clamp(2.5rem, 2.0rem + 1.5vw, 4rem);
  opacity: 0.22;
  pointer-events:none;
  mask-image: radial-gradient(circle at 35% 10%, black 0%, transparent 60%);
}
.gtm-grid-bg > *{ position: relative; }

.gtm-divider{
  height: 1px;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(236,125,42,0.55),
    rgba(255,255,255,0.12),
    transparent
  );
}

/* -----------------------------
   3) Cards
------------------------------ */
.gtm-card{
  background: var(--gtm-surface);
  border: 1px solid var(--gtm-border);
  border-radius: var(--gtm-radius-lg);
  padding: var(--gtm-card-pad);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.35);
}
.gtm-card:hover{
  transform: translateY(-0.125rem);
  border-color: rgba(236,125,42,0.55);
  box-shadow: 0 1rem 2.8rem rgba(0,0,0,0.45);
}
.gtm-card--soft{ background: var(--gtm-surface2); }

/* -----------------------------
   4) Pills / Badges
------------------------------ */
.gtm-pill{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--gtm-radius-pill);
  border: 1px solid rgba(236,125,42,0.35);
  background: rgba(236,125,42,0.10);
  color: var(--gtm-soft);
  font-size: var(--gtm-small);
  line-height: 1.2em;
  letter-spacing: 0em;
  font-family: var(--gtm-font-body);
  font-weight: 600;
}

/* -----------------------------
   5) Buttons (Elementor Button widget)
------------------------------ */
.gtm-btn-primary .elementor-button,
.elementor-button.gtm-btn-primary{
  font-family: var(--gtm-font-body) !important;
  font-size: var(--gtm-ui) !important;
  line-height: var(--gtm-ui-lh) !important;
  letter-spacing: var(--gtm-ui-ls) !important;

  background: var(--gtm-primary) !important;
  color: var(--gtm-bg) !important;
  border-radius: var(--gtm-radius-pill) !important;
  border: 1px solid rgba(236,125,42,0.55) !important;

  padding: var(--gtm-btn-py) var(--gtm-btn-px) !important;
  font-weight: 600 !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.gtm-btn-primary .elementor-button:hover,
.elementor-button.gtm-btn-primary:hover{
  background: var(--gtm-accent) !important;
  transform: translateY(-0.06rem);
  box-shadow: 0 0.625rem 1.875rem rgba(236,125,42,0.20);
}

.gtm-btn-secondary .elementor-button,
.elementor-button.gtm-btn-secondary{
  font-family: var(--gtm-font-body) !important;
  font-size: var(--gtm-ui) !important;
  line-height: var(--gtm-ui-lh) !important;
  letter-spacing: var(--gtm-ui-ls) !important;

  background: transparent !important;
  color: var(--gtm-primary) !important;
  border-radius: var(--gtm-radius-pill) !important;
  border: 1px solid var(--gtm-primary) !important;

  padding: var(--gtm-btn-py) var(--gtm-btn-px) !important;
  font-weight: 600 !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.gtm-btn-secondary .elementor-button:hover,
.elementor-button.gtm-btn-secondary:hover{
  background: rgba(236,125,42,0.12) !important;
  color: var(--gtm-text) !important;
  transform: translateY(-0.06rem);
  box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.35);
}

/* Optional: button size helpers (still fluid) */
.gtm-btn-lg .elementor-button{
  padding: calc(var(--gtm-btn-py) * 1.15) calc(var(--gtm-btn-px) * 1.15) !important;
}
.gtm-btn-sm .elementor-button{
  padding: calc(var(--gtm-btn-py) * 0.8) calc(var(--gtm-btn-px) * 0.8) !important;
  font-size: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem) !important;
}

/* -----------------------------
   6) Forms (Elementor Forms)
   Add CSS class "gtm-form" on the Form widget
------------------------------ */
.gtm-form .elementor-field-group{
  margin-bottom: var(--gtm-field-gap);
}

.gtm-form .elementor-field-label{
  font-family: var(--gtm-font-body);
  font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  line-height: 1.2em;
  letter-spacing: var(--gtm-ui-ls);
  color: var(--gtm-soft);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.gtm-form input.elementor-field,
.gtm-form textarea.elementor-field,
.gtm-form select.elementor-field{
  font-family: var(--gtm-font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.40em;
  letter-spacing: 0em;

  background: rgba(255,255,255,0.03);
  border: 1px solid var(--gtm-border);
  border-radius: var(--gtm-radius-md);
  color: var(--gtm-text);

  padding: var(--gtm-field-pad);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.gtm-form input.elementor-field::placeholder,
.gtm-form textarea.elementor-field::placeholder{
  color: rgba(190,189,188,0.72);
}

.gtm-form input.elementor-field:focus,
.gtm-form textarea.elementor-field:focus,
.gtm-form select.elementor-field:focus{
  border-color: rgba(236,125,42,0.65);
  box-shadow: 0 0 0 0.2rem rgba(236,125,42,0.18);
  background: rgba(255,255,255,0.04);
  outline: none;
}

.gtm-form .elementor-message{
  border-radius: var(--gtm-radius-md);
}

/* Submit button styling (if you don't add gtm-btn-primary to the button) */
.gtm-form .elementor-button{
  font-family: var(--gtm-font-body);
  font-size: var(--gtm-ui);
  line-height: var(--gtm-ui-lh);
  letter-spacing: var(--gtm-ui-ls);

  background: var(--gtm-primary);
  color: var(--gtm-bg);
  border-radius: var(--gtm-radius-pill);
  padding: var(--gtm-btn-py) var(--gtm-btn-px);
  font-weight: 700;
  border: 1px solid rgba(236,125,42,0.55);
}
.gtm-form .elementor-button:hover{ background: var(--gtm-accent); }

/* -----------------------------
   7) Icon emphasis (optional)
------------------------------ */
.gtm-icon i,
.gtm-icon svg{
  color: var(--gtm-primary) !important;
  fill: var(--gtm-primary) !important;
}

/* -----------------------------
   8) FAQ Accordion polish
   Add class to widget: gtm-faq
------------------------------ */
.gtm-faq .elementor-tab-title{
  background: var(--gtm-surface);
  border: 1px solid var(--gtm-border);
  border-radius: var(--gtm-radius-md);
  padding: clamp(0.9rem, 0.75rem + 0.6vw, 1rem);
  margin-bottom: clamp(0.5rem, 0.4rem + 0.3vw, 0.625rem);

  font-family: var(--gtm-font-body);
  font-size: var(--gtm-ui);
  line-height: var(--gtm-ui-lh);
  letter-spacing: var(--gtm-ui-ls);
  font-weight: 600;
}
.gtm-faq .elementor-tab-title.elementor-active{
  border-color: rgba(236,125,42,0.55);
}

.gtm-faq .elementor-tab-content{
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--gtm-border);
  border-radius: var(--gtm-radius-md);

  padding: clamp(0.9rem, 0.75rem + 0.6vw, 1rem);
  margin-top: -0.35rem;
  margin-bottom: clamp(0.6rem, 0.45rem + 0.5vw, 0.75rem);

  color: var(--gtm-muted);
  font-family: var(--gtm-font-body);
  font-size: var(--gtm-body);
  line-height: var(--gtm-body-lh);
}

/* -----------------------------
   9) Optional: Sticky header glass
   Add class to header container: gtm-header
------------------------------ */
.gtm-header{
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
  background: rgba(11,11,11,0.55);
  border-bottom: 1px solid rgba(42,47,54,0.65);
}

/* -----------------------------
   10) Utility: max-width helpers
------------------------------ */
.gtm-max-1200{ max-width: var(--gtm-max-1200); margin-inline: auto; }
.gtm-max-1440{ max-width: var(--gtm-max-1440); margin-inline: auto; }

/* -----------------------------
   11) Optional helpers for “hero height”
   Use on a container/section if needed:
   class="gtm-hero"
------------------------------ */
.gtm-hero{
  /* safer than 100vh on mobile due to browser UI */
  min-height: min(100dvh, 52rem);
  display: flex;
  align-items: center;
}/* End custom CSS */