/* --- Custom overrides (Apex Margin) --- */

/* Remove "Work" from the navigation (desktop + mobile) */
a[data-framer-name="Navlink"][href*="work"],
a[data-framer-name="Variant 2"][href*="work"],
[data-framer-name="Changelog Link"] { display: none !important; }

/* Keep the "Apex Margin" logo text on one line and clear of the icon mark */
[data-framer-name="Logo"], a[data-framer-name="Logo"] { white-space: nowrap; }

/* --- Hero H1: restore original template typography + premium density --- */
/* Real Geist SemiBold (600), matching weight referenced by the template */
@font-face{
  font-family:"Geist";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/fonts.gstatic.com/s/geist/v5/gyBhhwUxId8gMGYQMKR3pzfaWI_RQuQ4mJPby1QNtA.woff2") format("woff2");
}

/* Keep original Geist family + responsive font-size (72/64/40); only tighten
   line-height & tracking and bump weight to 600, scoped to the home hero. */
.framer-L5O83 .framer-styles-preset-16nmy6u:not(.rich-text-wrapper),
.framer-L5O83 .framer-styles-preset-16nmy6u.rich-text-wrapper h1{
  --framer-font-weight: 600;
  --framer-line-height: 0.96em;
  --framer-letter-spacing: -0.035em;
}

/* Desktop/tablet: headline column + body width for clean 2-line / 3-line hero */
@media (min-width: 810px){
  .framer-L5O83 .framer-v7ty5m{ max-width: 1000px; margin-left: auto; margin-right: auto; }
  .framer-L5O83 .framer-v7ty5m h1{ text-wrap: normal; white-space: normal; }
  .framer-L5O83 [data-framer-name="Description"]{ max-width: 720px; margin-left: auto; margin-right: auto; }
}

/* --- Section 2 headline: honor the manual newline as a 2-line break --- */
.framer-L5O83 .framer-styles-preset-sgr630{ white-space: pre-line; }

/* --- Tech logo strip: match the two injected icon boxes to the others (24px) --- */
.framer-L5O83 [data-framer-name="Logo (Replace here)"] [data-framer-name="Identify white"]{
  width: 24px !important;
  flex: none !important;
  margin-right: 8px !important;
}

/* --- Process headline: widen slightly for a clean 2-line break on desktop --- */
@media (min-width: 810px){
  #process .framer-1nmyrkb{ max-width: 760px; margin-left: auto; margin-right: auto; }
  #process h2{ text-wrap: balance; }
}

/* --- Process cards: equal height so all 3 boxes bottom-align --- */
@media (min-width: 810px){
  #process .framer-d5xg9z{ align-items: stretch; }
  #process .framer-d5xg9z > *{ height: auto !important; } /* override animation's inline height:100% so flex can stretch */
  #process .framer-d5xg9z > * > *{ height: 100% !important; }
  #process .framer-clv51y{ height: 100% !important; }
}


/* =====================================================================
   FINAL CONVERSION SECTION — CTA polish + contact form (Apex Margin)
   ===================================================================== */

/* --- CTA: center the block, clean widths & spacing --- */
.apx-cta-section .apx-cta-head{
  max-width: 780px; margin-left: auto; margin-right: auto; text-align: center;
}
.apx-cta-section .apx-cta-head h2{ text-align: center !important; }
.apx-cta-section .apx-cta-copy{
  max-width: 600px !important; width: 100% !important;
  margin: 26px auto 0 !important; text-align: center;
  overflow-wrap: normal; word-break: normal; text-wrap: pretty;
}
.apx-cta-section .apx-cta-copy p{ text-align: center !important; }
.apx-cta-secondary{
  margin-top: 16px; text-align: center;
  font-family: "Geist","Geist Placeholder",sans-serif;
  font-size: 14px; line-height: 1.4; color: rgba(255,255,255,0.55);
}

/* --- Shared premium button motion (CTA + form submit) --- */
.apx-btn-motion{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 12px;
  background: #ffffff; color: #0a0a0a;
  font-family: "Geist","Geist Placeholder",sans-serif;
  font-size: 15px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
  will-change: transform;
}
.apx-btn-motion .apx-arrow{ display: inline-block; transition: transform 200ms ease-out; }
.apx-btn-motion:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0,153,255,0.28), 0 6px 16px rgba(0,0,0,0.30);
}
.apx-btn-motion:hover .apx-arrow{ transform: translateX(5px); }
.apx-btn-motion:active{ transform: translateY(0) scale(0.98); }
.apx-cta-btn-wrap{ width: 100%; text-align: center; margin-top: 30px; }
.apx-cta-btn-wrap .apx-cta-btn{ margin: 0 auto; }
.apx-cta-btn-wrap .apx-cta-secondary{ margin-top: 16px; }

/* --- Contact form section --- */
.apx-contact{
  box-sizing: border-box; width: 100%;
  background: #08080b; color: #ffffff;
  padding: 104px 24px; position: relative; z-index: 2;
}
.apx-contact *{ box-sizing: border-box; }
.apx-contact-inner{
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 3fr; gap: 64px; align-items: start;
}
.apx-contact-left .apx-eyebrow{
  display: inline-block; font-size: 12px; letter-spacing: 0.14em; font-weight: 600;
  color: rgb(0,153,255); background: rgba(0,153,255,0.10);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 18px;
  font-family: "Geist","Geist Placeholder",sans-serif;
}
.apx-contact-head{
  margin: 0; font-family: "Geist","Geist Placeholder",sans-serif;
  font-size: 40px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; color: #fff;
}
.apx-contact-body{
  margin: 16px 0 0; max-width: 420px;
  font-family: "Geist","Geist Placeholder",sans-serif;
  font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.60);
}
.apx-details{ margin-top: 36px; display: flex; flex-direction: column; gap: 22px; }
.apx-detail-label{ font-size: 12px; letter-spacing: 0.12em; font-weight: 600; color: rgba(255,255,255,0.45); font-family:"Geist","Geist Placeholder",sans-serif; }
.apx-detail-value{ margin-top: 5px; font-size: 16px; color: #fff; text-decoration: none; font-family:"Geist","Geist Placeholder",sans-serif; display:inline-block; }
a.apx-detail-value:hover{ color: rgb(0,153,255); }

/* form */
.apx-contact-right{ display: flex; flex-direction: column; gap: 18px; }
.apx-field{ display: flex; flex-direction: column; gap: 8px; }
.apx-field label{
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.72);
  font-family: "Geist","Geist Placeholder",sans-serif;
}
.apx-field .apx-opt{ color: rgba(255,255,255,0.40); font-weight: 400; }
.apx-contact input, .apx-contact select, .apx-contact textarea{
  width: 100%; font-family: "Geist","Geist Placeholder",sans-serif; font-size: 15px;
  color: #fff; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  padding: 13px 14px; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease;
  -webkit-appearance: none; appearance: none;
}
.apx-contact textarea{ resize: vertical; min-height: 110px; line-height: 1.5; }
.apx-contact input::placeholder, .apx-contact textarea::placeholder{ color: rgba(255,255,255,0.34); }
.apx-contact input:focus, .apx-contact select:focus, .apx-contact textarea:focus{
  border-color: rgb(0,153,255); box-shadow: 0 0 0 3px rgba(0,153,255,0.18);
}
.apx-select-wrap{ position: relative; }
.apx-select-wrap .apx-caret{ position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.5); pointer-events: none; font-size: 12px; }
.apx-contact select{ cursor: pointer; padding-right: 34px; }
.apx-contact select option{ color: #111; }
.apx-form-btn{ margin-top: 6px; align-self: flex-start; }
.apx-form-note{ font-size: 13px; font-family:"Geist","Geist Placeholder",sans-serif; min-height: 1px; }
.apx-form-note.apx-ok{ color: rgb(120,200,140); }
.apx-form-note.apx-err{ color: rgb(240,120,120); }

/* responsive */
@media (max-width: 809px){
  .apx-contact{ padding: 72px 20px; }
  .apx-contact-inner{ grid-template-columns: 1fr; gap: 40px; }
  .apx-contact-head{ font-size: 30px; }
  .apx-contact-body{ max-width: none; }
  .apx-form-btn{ align-self: stretch; justify-content: center; }
}

/* =====================================================================
   HERO — single source of truth; responsive typography + safety
   ===================================================================== */
.apx-desk-br{ display: inline; }   /* body's intentional desktop line breaks */

/* HEADLINE: exactly two lines (runtime <br> after "Grow."); each sentence stays
   on ONE line via nowrap + a fluid font that always fits (capped at 72px). */
.framer-L5O83 .framer-v7ty5m h1{
  white-space: nowrap !important;
  font-size: clamp(20px, calc((100vw - 48px) / 12.3), 72px) !important;
  overflow-wrap: normal !important; word-break: normal !important;
}
.framer-L5O83 .framer-v7ty5m{ max-width: 100%; box-sizing: border-box; }

@media (max-width: 809px){
  /* keep the headline block padded inside the viewport */
  .framer-L5O83 .framer-v7ty5m{ width: 100% !important; max-width: 100% !important; padding-left: 20px; padding-right: 20px; }

  /* BODY: same copy, natural wrapping (drop the desktop line breaks) */
  .apx-desk-br{ display: none; }
  .framer-L5O83 [data-framer-name="Description"]{
    max-width: 340px !important; width: calc(100% - 40px) !important;
    margin-left: auto !important; margin-right: auto !important; box-sizing: border-box;
  }
  .framer-L5O83 [data-framer-name="Description"] p{
    font-size: 17px !important; line-height: 1.45 !important;
    overflow-wrap: normal !important; word-break: normal !important;
  }

  /* STAR ROW: same copy as desktop, one tight horizontal row; the whole phrase
     drops under the stars only if it can't fit — never word-by-word. */
  .framer-L5O83 [data-framer-name="Rating Row"]{
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 8px !important; flex-wrap: wrap !important; box-sizing: border-box; padding: 0 16px;
    /* break out of the narrow hero column so the phrase can sit beside the stars */
    width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important;
  }
  .framer-L5O83 [data-framer-name="Rating Row"] [data-framer-name="Stars"]{ flex-shrink: 0 !important; }
  .framer-L5O83 [data-framer-name="Rating Row"] [data-framer-name="Line"]{ flex-shrink: 0 !important; }
  .framer-L5O83 .framer-1906vzn{ flex: 0 1 auto !important; min-width: 0 !important; max-width: none !important; white-space: nowrap !important; }
  .framer-L5O83 .framer-1906vzn .framer-styles-preset-1qxgr84{
    display: inline !important; white-space: nowrap !important; font-size: clamp(10px, 2.9vw, 14px) !important;
  }

  /* CTA button: contained, centered */
  a.apx-hero-cta{ width: 100% !important; max-width: 340px !important; margin: 30px auto 0 !important;
    padding-top: 12px !important; padding-bottom: 12px !important; justify-content: center !important; }

  /* very small screens: hide the star divider so a wrapped phrase reads cleanly */
  @media (max-width: 380px){ .framer-L5O83 [data-framer-name="Line"]{ display: none !important; } }
}

/* ─────────────────────────────────────────────────────────────────────────
   RESULTS hidden per request (2026-08-26).
   Hides the homepage "Results / The outcomes you can expect" section AND its
   nav link(s) across all pages. To restore: delete this whole block.
   ───────────────────────────────────────────────────────────────────────── */
#results,
a[href$="#results"] { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
   START A PROJECT — replaces the native Pricing section (2026-08-30).
   The original Pricing section is hidden and a premium light contact section
   is injected in its slot by _custom.js (#apx-startproject).
   To restore Pricing: remove the "#pricing{display:none}" line below AND the
   startProject() call in _custom.js.
   ───────────────────────────────────────────────────────────────────────── */
#pricing { display: none !important; }

/* remove Framer free-export watermark badges ("Made in Framer" + "Use for Free") */
#__framer-badge-container, .framer-77jfuj-container { display: none !important; }

/* nav in-page links land below the fixed navbar (used by scrollIntoView) */
#solutions, #problem, #process, #testimonials, #faqs, #apx-startproject { scroll-margin-top: 90px; }

.apx-sp{
  box-sizing: border-box; width: 100%;
  background: #f2f2f2; color: #141416;
  padding: 128px 24px; position: relative; z-index: 2;
}
.apx-sp *{ box-sizing: border-box; }
.apx-sp-inner{
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 5fr 6fr; gap: 72px; align-items: start;
}

/* left column */
.apx-sp-eyebrow{
  display: inline-block; font-family: "Geist","Geist Placeholder",sans-serif;
  font-size: 12px; letter-spacing: 0.14em; font-weight: 600;
  color: #0040cc; background: rgba(0,64,204,0.08);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 20px;
}
.apx-sp-head{
  margin: 0; font-family: "Geist","Geist Placeholder",sans-serif;
  font-size: 44px; line-height: 1.04; letter-spacing: -0.03em; font-weight: 600; color: #141416;
}
.apx-sp-body{
  margin: 18px 0 0; max-width: 440px; font-family: "Geist","Geist Placeholder",sans-serif;
  font-size: 16px; line-height: 1.6; color: #55555c;
}
.apx-sp-cards{ margin-top: 40px; display: flex; flex-direction: column; gap: 14px; }
.apx-sp-card{
  background: #ffffff; border: 1px solid rgba(17,17,20,0.09); border-radius: 14px;
  padding: 16px 18px; transition: border-color 160ms ease, box-shadow 160ms ease;
}
.apx-sp-card:hover{ border-color: rgba(0,64,204,0.35); box-shadow: 0 6px 20px rgba(17,17,20,0.05); }
.apx-sp-card-label{
  font-family: "Geist","Geist Placeholder",sans-serif;
  font-size: 11.5px; letter-spacing: 0.12em; font-weight: 600; color: #8a8a92;
}
.apx-sp-card-value{
  display: inline-block; margin-top: 5px; font-family: "Geist","Geist Placeholder",sans-serif;
  font-size: 16px; font-weight: 500; color: #141416; text-decoration: none;
}
a.apx-sp-card-value:hover{ color: #0040cc; }

/* right column — form card */
.apx-sp-right{
  background: #ffffff; border: 1px solid rgba(17,17,20,0.09); border-radius: 20px;
  padding: 32px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 10px 40px rgba(17,17,20,0.04);
}
.apx-sp-field{ display: flex; flex-direction: column; gap: 8px; }
.apx-sp-field label{
  font-family: "Geist","Geist Placeholder",sans-serif;
  font-size: 13px; font-weight: 500; color: #3a3a40;
}
.apx-sp-opt{ color: #9a9aa2; font-weight: 400; }
.apx-sp input, .apx-sp textarea{
  width: 100%; font-family: "Geist","Geist Placeholder",sans-serif; font-size: 15px;
  color: #141416; background: #ffffff;
  border: 1px solid rgba(17,17,20,0.14); border-radius: 12px;
  padding: 14px 15px; outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  -webkit-appearance: none; appearance: none;
}
.apx-sp textarea{ resize: vertical; min-height: 150px; line-height: 1.55; }
.apx-sp input::placeholder, .apx-sp textarea::placeholder{ color: #a2a2aa; }
.apx-sp input:focus, .apx-sp textarea:focus{
  border-color: #0040cc; box-shadow: 0 0 0 3px rgba(0,64,204,0.15);
}
.apx-sp .apx-sp-field.apx-invalid input,
.apx-sp .apx-sp-field.apx-invalid textarea{ border-color: #d64545; }
.apx-sp .apx-sp-field.apx-invalid input:focus,
.apx-sp .apx-sp-field.apx-invalid textarea:focus{ box-shadow: 0 0 0 3px rgba(214,69,69,0.15); }
.apx-sp-err{
  font-family: "Geist","Geist Placeholder",sans-serif;
  font-size: 12.5px; color: #d64545; display: none;
}
.apx-sp .apx-sp-field.apx-invalid .apx-sp-err{ display: block; }

/* full-width primary button (reuses .apx-btn-motion lift + arrow shift) */
.apx-sp-btn{
  width: 100%; justify-content: center; margin-top: 6px;
  background: #141416 !important; color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(17,17,20,0.14);
}
.apx-sp-btn:hover{ box-shadow: 0 12px 30px rgba(0,64,204,0.22), 0 6px 16px rgba(17,17,20,0.18); }
.apx-sp-btn:disabled{ opacity: 0.7; cursor: default; transform: none; box-shadow: 0 2px 10px rgba(17,17,20,0.14); }

.apx-sp-note{ font-family: "Geist","Geist Placeholder",sans-serif; font-size: 13.5px; min-height: 1px; }
.apx-sp-note.apx-ok{ color: #1c8a4a; }
.apx-sp-note.apx-err{ color: #d64545; }
.apx-sp-subtext{ font-family: "Geist","Geist Placeholder",sans-serif; font-size: 13px; color: #8a8a92; }

/* responsive: single column — heading/copy, then contact info, then form */
@media (max-width: 809px){
  .apx-sp{ padding: 80px 20px; }
  .apx-sp-inner{ grid-template-columns: 1fr; gap: 36px; }
  .apx-sp-head{ font-size: 32px; }
  .apx-sp-body{ max-width: none; }
  .apx-sp-right{ padding: 24px; border-radius: 16px; }
  .apx-sp-cards{ display: none !important; }   /* hide contact info cards on mobile (kept on desktop) */
}

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER redesign (2026-08-30). The native template footer (Scalar / "Built by
   Chayan" / "Framer template" / 404 / placeholder socials) is hidden and a clean
   structured footer is injected site-wide by _custom.js (#apx-footer).
   To restore the native footer: remove the "footer:not(#apx-footer)" rule below
   and the buildFooter() call in _custom.js.
   ───────────────────────────────────────────────────────────────────────── */
footer:not(#apx-footer){ display: none !important; }

.apx-ft{
  box-sizing: border-box; width: 100%;
  background: #000000; color: #ffffff;
  padding: 88px 24px 34px; position: relative; z-index: 2;
  font-family: "Geist","Geist Placeholder",sans-serif;
}
.apx-ft *{ box-sizing: border-box; }
.apx-ft-inner{ max-width: 1180px; margin: 0 auto; }
.apx-ft-cols{
  display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 56px; align-items: start;
}

/* brand column */
.apx-ft-logo{ display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.apx-ft-mark{ display: block; flex: 0 0 auto; }
.apx-ft-desc{
  margin: 20px 0 0; max-width: 360px; font-size: 14.5px; line-height: 1.6;
  color: rgba(255,255,255,0.55);
}
.apx-ft-contact{ margin-top: 24px; display: flex; flex-direction: column; gap: 9px; }
.apx-ft-muted{ font-size: 14px; color: rgba(255,255,255,0.42); }

/* link columns */
.apx-ft-h{
  font-size: 12px; letter-spacing: 0.14em; font-weight: 600; text-transform: uppercase;
  color: rgba(255,255,255,0.42); margin-bottom: 18px;
}
.apx-ft-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

/* links: muted gray → white, blue on hover, subtle transition */
.apx-ft-link{
  font-size: 14.5px; color: rgba(255,255,255,0.55); text-decoration: none;
  transition: color 200ms ease;
}
.apx-ft-link:hover{ color: #ffffff; }
.apx-ft-contact .apx-ft-link:hover{ color: #0099ff; }

/* service link + monochrome icon (icon inherits link color via currentColor) */
.apx-ft-svc,
.apx-ft-cline{ display: inline-flex; align-items: center; gap: 10px; }
.apx-ft-ico{ width: 16px; height: 16px; flex: 0 0 auto; opacity: 0.9; transition: opacity 200ms ease; }
.apx-ft-svc:hover .apx-ft-ico{ opacity: 1; }

/* bottom bar with subtle divider */
.apx-ft-bottom{
  margin-top: 64px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.apx-ft-copy{ font-size: 13.5px; color: rgba(255,255,255,0.42); }
.apx-ft-bottom-links{ display: flex; gap: 24px; }
.apx-ft-bottom-links .apx-ft-link{ font-size: 13.5px; }

/* mobile: stack brand → services → legal → bottom */
@media (max-width: 809px){
  .apx-ft{ padding: 64px 22px 30px; }
  .apx-ft-cols{ grid-template-columns: 1fr; gap: 40px; }
  .apx-ft-desc{ max-width: none; }
  .apx-ft-bottom{ margin-top: 44px; flex-direction: column; align-items: flex-start; gap: 14px; }
}