/*
 * Scrolling model
 * Keep exactly one vertical page scroller: the root document (<html>).
 * Do not make <body> or <main> nested vertical scroll containers, otherwise
 * mouse-wheel/trackpad events can get trapped while the browser scrollbar
 * still remains draggable.
 */
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto !important;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto !important;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto !important;
  min-height: 100%;
  position: static !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  touch-action: auto !important;
}

main {
  width: 100%;
  height: auto !important;
  min-height: 0;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
}

/* Homepage and all supplied page templates stay in normal document flow. */
body.home,
body.page {
  height: auto !important;
  min-height: 100%;
  overflow: visible !important;
}

img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }

.screen-reader-text {
  border: 0;
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/* ---------------------------------------------------------
   Custom desktop cursor
   --------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  html.hs-custom-cursor,
  html.hs-custom-cursor body,
  html.hs-custom-cursor a,
  html.hs-custom-cursor button,
  html.hs-custom-cursor [role="button"],
  html.hs-custom-cursor input[type="button"],
  html.hs-custom-cursor input[type="submit"],
  html.hs-custom-cursor input[type="reset"],
  html.hs-custom-cursor summary,
  html.hs-custom-cursor label[for] {
    cursor: none !important;
  }

  /* Keep familiar text/form cursors where precision matters. */
  html.hs-custom-cursor input:not([type="button"]):not([type="submit"]):not([type="reset"]),
  html.hs-custom-cursor textarea,
  html.hs-custom-cursor select,
  html.hs-custom-cursor [contenteditable="true"] {
    cursor: auto !important;
  }

  .hs-cursor-dot,
  .hs-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483646;
    pointer-events: none;
    opacity: 0;
    will-change: transform, width, height, opacity, border-color, background-color;
  }

  .hs-cursor-dot {
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.65);
    transition: opacity 140ms ease, transform 70ms linear;
  }

  .hs-cursor-ring {
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 1px solid rgba(56, 189, 248, 0.85);
    border-radius: 9999px;
    background: rgba(56, 189, 248, 0.04);
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.12);
    transition:
      width 180ms ease,
      height 180ms ease,
      margin 180ms ease,
      border-color 180ms ease,
      background-color 180ms ease,
      opacity 140ms ease;
  }

  .hs-cursor-dot.is-visible,
  .hs-cursor-ring.is-visible {
    opacity: 1;
  }

  .hs-cursor-ring.is-interactive {
    width: 35px;
    height: 35px;
    margin: -17.5px 0 0 -17.5px;
    border-color: rgba(255, 255, 255, 0.78);
    background: rgba(56, 189, 248, 0.10);
  }

  .hs-cursor-ring.is-pressed {
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    background: rgba(56, 189, 248, 0.18);
  }

  .hs-cursor-dot.is-hidden,
  .hs-cursor-ring.is-hidden {
    opacity: 0 !important;
  }
}



/* =========================================================
   SHARED CLIENT LOGOS
========================================================= */
.hs-client-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  align-items: center;
}
.hs-client-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.75rem;
  padding: 0.625rem 0.75rem;
}
.hs-client-logo-item img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 2.55rem;
  object-fit: contain;
}
.hs-client-logos--plain .hs-client-logo-item {
  padding: 0.35rem 0.5rem;
  min-height: 3.25rem;
  background: transparent;
  border: 0;
}
.hs-client-logos--boxed .hs-client-logo-item {
  border-radius: 0.9rem;
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 30px rgba(2, 6, 23, 0.18);
}
@media (min-width: 640px) {
  .hs-client-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.25rem;
  }
  .hs-client-logo-item img {
    max-height: 2.8rem;
  }
  /* ---- home page stat boxes style --- */

}
@media (min-width: 1024px) {
  .hs-client-logos {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem 1.35rem;
  }
  .hs-client-logo-item {
    min-height: 4.25rem;
  }
  .hs-client-logo-item img {
    max-height: 3rem;
  }
}


/* =========================================================
   HOMEPAGE TRUST LOGOS — CENTERED, RESPONSIVE
========================================================= */
body.home .hs-client-logos--plain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  gap: 1rem 1.25rem;
}
body.home .hs-client-logos--plain .hs-client-logo-item {
  flex: 0 1 calc(50% - 0.625rem);
  width: auto;
  max-width: 190px;
  min-height: 3.5rem;
  padding: 0.4rem 0.6rem;
}
body.home .hs-client-logos--plain .hs-client-logo-item img {
  width: auto;
  max-width: 100%;
  max-height: 2.7rem;
  margin-inline: auto;
  object-fit: contain;
}
@media (min-width: 640px) {
  body.home .hs-client-logos--plain {
    gap: 1.25rem 1.75rem;
  }
  body.home .hs-client-logos--plain .hs-client-logo-item {
    flex-basis: calc(33.333% - 1.17rem);
  }
}
@media (min-width: 1024px) {
  body.home .hs-client-logos--plain {
    flex-wrap: nowrap;
    gap: 1.5rem 2rem;
  }
  body.home .hs-client-logos--plain .hs-client-logo-item {
    flex: 1 1 0;
    max-width: 165px;
    min-width: 0;
    min-height: 4rem;
  }
  body.home .hs-client-logos--plain .hs-client-logo-item img {
    max-height: 3rem;
  }
}


/* =========================================================
   TYPOGRAPHY — MATCH ORIGINAL HTML SOURCES
   Inter: body / copy / form content
   Plus Jakarta Sans: headings / labels / CTAs / navigation
========================================================= */
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Shared site chrome follows the supplied designs' label/headline family. */
header a,
header button,
header nav,
#mobile-drawer a,
#mobile-drawer button,
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer a,
footer button {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Preserve explicit body-family utilities from the supplied Tailwind files. */
.font-body-sm,
.font-body-md,
.font-body-lg,
.font-body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Preserve explicit headline/label/stat families from the supplied Tailwind files. */
.font-display-hero,
.font-display-hero-mobile,
.font-headline-lg,
.font-headline-lg-mobile,
.font-headline-md,
.font-headline-sm,
.font-label-lg,
.font-label-sm,
.font-metric-callout,
.font-metric-callout-mobile,
.font-headline {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* =========================================================
   CROSS-BROWSER CUSTOM SELECTS
   Native <select> remains in the form for submission, while the
   visible dropdown is rendered by theme.js for identical styling
   across Safari, Chrome, Firefox and Edge.
========================================================= */
.hs-select-shell {
  position: relative;
  width: 100%;
  min-width: 0;
}

.hs-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hs-select-trigger {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  height: var(--hs-select-height, 52px);
  padding: var(--hs-select-padding-y, 0px) max(var(--hs-select-padding-right, 16px), 44px) var(--hs-select-padding-y, 0px) var(--hs-select-padding-left, 16px);
  border: var(--hs-select-border-width, 1px) solid var(--hs-select-border, rgba(255,255,255,0.12));
  border-radius: var(--hs-select-radius, 0.5rem);
  background: var(--hs-select-bg, #0a1020);
  color: var(--hs-select-color, #f8fafc);
  box-shadow: var(--hs-select-shadow, none);
  font-family: var(--hs-select-font-family, "Inter", sans-serif);
  font-size: var(--hs-select-font-size, 1rem);
  font-weight: var(--hs-select-font-weight, 400);
  line-height: var(--hs-select-line-height, 1.4);
  letter-spacing: var(--hs-select-letter-spacing, normal);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.hs-select-trigger:hover {
  border-color: rgba(56, 189, 248, 0.42);
}

.hs-select-trigger:focus-visible,
.hs-select-shell.is-open .hs-select-trigger {
  border-color: #38bdf8;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.55), var(--hs-select-shadow, none);
}

.hs-select-trigger__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-select-trigger__chevron {
  position: absolute;
  right: 15px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #94a3b8;
  transition: transform 160ms ease, color 160ms ease;
}

.hs-select-trigger__chevron::before,
.hs-select-trigger__chevron::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 9px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.hs-select-trigger__chevron::before {
  left: 1px;
  transform: rotate(45deg);
}

.hs-select-trigger__chevron::after {
  right: 1px;
  transform: rotate(-45deg);
}

.hs-select-shell.is-open .hs-select-trigger__chevron {
  transform: translateY(-50%) rotate(180deg);
  color: #38bdf8;
}

/* Menu is portaled to <body>, so parent overflow cannot clip it. */
.hs-select-menu {
  position: absolute;
  z-index: 2147483000;
  display: none;
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--hs-menu-border, rgba(56, 189, 248, 0.30));
  border-radius: var(--hs-menu-radius, 0.75rem);
  background: var(--hs-menu-bg, #0a1020);
  color: var(--hs-menu-color, #f8fafc);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(255,255,255,0.025) inset;
  font-family: var(--hs-menu-font-family, "Inter", sans-serif);
  font-size: var(--hs-menu-font-size, 1rem);
  line-height: 1.35;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,.55) transparent;
}

.hs-select-menu.is-open {
  display: block;
  animation: hs-select-menu-in 130ms ease-out both;
}

@keyframes hs-select-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.hs-select-option {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.hs-select-option:hover,
.hs-select-option:focus-visible {
  background: rgba(56, 189, 248, 0.12);
  color: #ffffff;
}

.hs-select-option[aria-selected="true"] {
  background: #2563eb;
  color: #ffffff;
}

.hs-select-option:disabled,
.hs-select-option[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.hs-select-group-label {
  padding: 8px 12px 5px;
  color: #94a3b8;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 639px) {
  .hs-select-menu {
    max-height: min(280px, 45vh);
  }
}


/* =========================================================
   COUNTER STABILITY + HOMEPAGE LOGO CARDS
========================================================= */
[data-hs-counter="1"] {
  display: inline-block;
  flex: 0 0 auto;
  min-width: var(--hs-counter-min-width, auto);
  min-height: var(--hs-counter-min-height, 1em);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  line-height: 1.05;
  vertical-align: middle;
  contain: layout style;
}

[data-hs-counter="1"].is-counting {
  will-change: contents;
}

/* Keep KPI copy stable even while the number is animating. */
body.home [data-hs-counter="1"] + div,
body.home [data-hs-counter="1"] ~ div {
  align-self: center;
}

/* Homepage trust strip: equal dark cards like the supplied reference. */
body.home .hs-client-logos--boxed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  align-items: stretch;
}

body.home .hs-client-logos--boxed .hs-client-logo-item {
  min-width: 0;
  min-height: 4.6rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.9rem;
  background: rgba(12, 19, 35, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

body.home .hs-client-logos--boxed .hs-client-logo-item:hover {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(56, 189, 248, 0.34);
  transform: translateY(-1px);
}

body.home .hs-client-logos--boxed .hs-client-logo-item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 2.75rem;
  object-fit: contain;
  margin-inline: auto;
}

@media (min-width: 640px) {
  body.home .hs-client-logos--boxed {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
  }

  body.home .hs-client-logos--boxed .hs-client-logo-item {
    min-height: 4.8rem;
  }
}

@media (min-width: 1024px) {
  body.home .hs-client-logos--boxed {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
  }

  body.home .hs-client-logos--boxed .hs-client-logo-item {
    min-height: 4.75rem;
    padding: 0.7rem 0.8rem;
  }

  body.home .hs-client-logos--boxed .hs-client-logo-item img {
    max-height: 2.65rem;
  }
}


/* =========================================================
   SITE-WIDE MOBILE TYPOGRAPHY, KPI CARDS & LOGO CONSISTENCY
   ========================================================= */
.hs-client-logos,
.hs-client-logos--plain,
.hs-client-logos--boxed {
  width: 100%; max-width: 1180px; margin-inline: auto; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-items: stretch;
}
.hs-client-logos .hs-client-logo-item,
.hs-client-logos--plain .hs-client-logo-item,
.hs-client-logos--boxed .hs-client-logo-item,
body.home .hs-client-logos--plain .hs-client-logo-item,
body.home .hs-client-logos--boxed .hs-client-logo-item {
  display:flex; align-items:center; justify-content:center; width:100%; max-width:none; min-width:0;
  min-height:4rem; padding:.65rem .8rem; border-radius:.8rem;
  background:rgba(12,19,35,.94); border:1px solid rgba(148,163,184,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.hs-client-logos .hs-client-logo-item img,
.hs-client-logos--plain .hs-client-logo-item img,
.hs-client-logos--boxed .hs-client-logo-item img,
body.home .hs-client-logos--plain .hs-client-logo-item img,
body.home .hs-client-logos--boxed .hs-client-logo-item img {
  display:block; width:auto; height:auto; max-width:100%; max-height:3rem; object-fit:contain; margin-inline:auto;
}
@media (min-width:640px){
  .hs-client-logos,.hs-client-logos--plain,.hs-client-logos--boxed{grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;}
}
@media (min-width:1024px){
  .hs-client-logos,.hs-client-logos--plain,.hs-client-logos--boxed{grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;}
  .hs-client-logos .hs-client-logo-item,.hs-client-logos--plain .hs-client-logo-item,.hs-client-logos--boxed .hs-client-logo-item,
  body.home .hs-client-logos--plain .hs-client-logo-item,body.home .hs-client-logos--boxed .hs-client-logo-item{min-height:4.4rem;}
  .hs-client-logos .hs-client-logo-item img,.hs-client-logos--plain .hs-client-logo-item img,.hs-client-logos--boxed .hs-client-logo-item img,
  body.home .hs-client-logos--plain .hs-client-logo-item img,body.home .hs-client-logos--boxed .hs-client-logo-item img{max-width:100%;max-height:3rem;}
}
@media (max-width:767px){
  /* --- home page stats boxes style ---- */
  .backdrop-blur-md.hover\:border-cyan-400\/40.transition-all.flex.flex-row.items-center.justify-center.gap-3.text-center.sm\:text-left {
    display: flex;
    flex-direction: column;
}
 .mvp-page .absolute.-top-32.left-1\/2 {
        display: none !important;
    }
.latency-benchmark,
    .latency-benchmark * {
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .latency-benchmark {
        overflow-x: auto;
    }

    .latency-benchmark .metric-value {
        white-space: nowrap;
        font-size: 28px !important;
    }
  main h1{font-size:32px!important;line-height:1.15!important;letter-spacing:-.025em!important;overflow-wrap:anywhere;}
  main h2{font-size:24px!important; line-height:1.15em !important;}
  .py-20,.py-24,.pb-20, .pb-24  {padding-top : 2.5rem !important; padding-bottom:2.5rem !important;}
  .px-6 {padding-left:12px !important; padding-right:12px !important;}
   .p-8{padding:1.5rem 1rem!important; }
  main h3{font-size:20px!important;line-height:1.28!important;}
  main p{font-size:15px;line-height:1.55;overflow-wrap:break-word;word-break:normal;}
  main .flex>*,main .grid>*{min-width:0;}
  main .font-mono,main [class*="font-body"],main [class*="font-label"]{overflow-wrap:break-word;word-break:normal;}
  .grid.grid-cols-3.gap-3.pt-2.mb-flex {
    display: flex;
    flex-direction: column;
}

  [data-hs-counter="1"].hs-counter-large{
    font-size:30px!important;line-height:1.05!important;letter-spacing:-.025em!important;
    min-width:0!important;width:auto!important;max-width:100%;white-space:normal;
  }
  .hs-counter-stack-mobile{
    flex-direction:column!important;align-items:center!important;justify-content:center!important;
    gap:.35rem!important;text-align:center!important;
  }
  .hs-counter-stack-mobile>[data-hs-counter="1"]{margin:0!important;}
  .hs-counter-stack-mobile>:not([data-hs-counter="1"]){width:100%;text-align:center!important;align-items:center!important;}
  .hs-counter-stack-mobile>:not([data-hs-counter="1"]) span:first-child{font-size:12px!important;line-height:1.25!important;}
  .hs-counter-stack-mobile>:not([data-hs-counter="1"]) span:last-child{font-size:10px!important;line-height:1.35!important;}

  .hs-client-logos,.hs-client-logos--plain,.hs-client-logos--boxed,
  body.home .hs-client-logos--plain,body.home .hs-client-logos--boxed{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.65rem!important;
  }
  .hs-client-logos .hs-client-logo-item,.hs-client-logos--plain .hs-client-logo-item,.hs-client-logos--boxed .hs-client-logo-item,
  body.home .hs-client-logos--plain .hs-client-logo-item,body.home .hs-client-logos--boxed .hs-client-logo-item{
    min-height:3.55rem!important;padding:.55rem .65rem!important;border-radius:.7rem!important;
  }
  .hs-client-logos .hs-client-logo-item img,.hs-client-logos--plain .hs-client-logo-item img,.hs-client-logos--boxed .hs-client-logo-item img,
  body.home .hs-client-logos--plain .hs-client-logo-item img,body.home .hs-client-logos--boxed .hs-client-logo-item img{
    max-width:100%!important;max-height:2.65rem!important;
  }

  main [class*="absolute"][class*="-top-3"][class*="left-1/2"][class*="rounded-full"]{
    position:absolute!important;inset:auto!important;transform:none!important;display:inline-flex!important;
    width:auto!important;max-width:100%!important;margin:0 0 .75rem 0!important;padding:0!important;
    border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
    white-space:normal!important;line-height:1.35!important;text-align:left!important;
  }
  
  main .rounded-full>[class*="text-label"],main .rounded-full>.font-mono{
    white-space:normal!important;line-height:1.35!important;text-align:left;
  }
}


/* =========================================================
   CONTACT FORM 7 - ARCHITECTURE INQUIRY FORM
   Matches the original homepage form design.
   ========================================================= */
.architecture-inquiry-wrapper{width:100%;max-width:100%;margin:0;padding:0;box-sizing:border-box}.architecture-form-terminal{width:100%;margin:0;padding:0}.architecture-form-box{width:100%;box-sizing:border-box;background:#0e1529;border:1px solid rgba(59,130,246,.25);border-radius:1rem;padding:2rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
@media (min-width:640px){.architecture-form-box{padding:2.5rem}}
.architecture-form-fields{display:flex;flex-direction:column;gap:1.5rem;width:100%}.architecture-two-column{display:grid;grid-template-columns:1fr;gap:1.25rem;width:100%}@media (min-width:640px){.architecture-two-column{grid-template-columns:repeat(2,minmax(0,1fr))}}
.architecture-field{width:100%;min-width:0;margin:0;padding:0}.architecture-label{display:block;width:100%;margin:0 0 .5rem;padding:0;color:#cbd5e1;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.architecture-input{display:block!important;width:100%!important;height:3rem!important;min-height:3rem!important;max-width:100%!important;box-sizing:border-box!important;margin:0!important;padding:0 1rem!important;border:1px solid rgba(59,130,246,.30)!important;border-radius:.75rem!important;background:#080c16!important;color:#fff!important;font-family:inherit!important;font-size:.875rem!important;line-height:1.25rem!important;font-weight:400!important;outline:none!important;box-shadow:none!important;transition:border-color .2s ease,box-shadow .2s ease}.architecture-input::placeholder,.architecture-textarea::placeholder{color:#64748b!important;opacity:1!important}.architecture-input:focus,.architecture-textarea:focus{outline:none!important;border-color:#22d3ee!important;box-shadow:none!important}
.architecture-textarea{display:block!important;width:100%!important;max-width:100%!important;min-height:6.75rem!important;box-sizing:border-box!important;margin:0!important;padding:1rem!important;border:1px solid rgba(59,130,246,.30)!important;border-radius:.75rem!important;background:#080c16!important;color:#fff!important;font-family:inherit!important;font-size:.875rem!important;line-height:1.25rem!important;font-weight:400!important;outline:none!important;box-shadow:none!important;resize:none!important;overflow-y:auto!important;overflow-x:hidden!important;transition:border-color .2s ease}
.architecture-project-types{width:100%;margin:0;padding:0}.architecture-project-types .wpcf7-form-control.wpcf7-radio{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem;width:100%;margin:0!important;padding:0!important}@media (min-width:640px){.architecture-project-types .wpcf7-form-control.wpcf7-radio{grid-template-columns:repeat(4,minmax(0,1fr))}}
.architecture-project-types .wpcf7-list-item{display:block!important;width:100%!important;margin:0!important;padding:0!important}.architecture-project-types .wpcf7-list-item label{position:relative;display:flex!important;align-items:center;justify-content:center;width:100%!important;min-height:3rem!important;height:3rem;box-sizing:border-box;margin:0!important;padding:.75rem!important;border:1px solid rgba(59,130,246,.20);border-radius:.75rem;background:#080c16;color:#cbd5e1;text-align:center;cursor:pointer;font-family:inherit;font-size:.75rem;line-height:1rem;font-weight:600;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.architecture-project-types .wpcf7-list-item input[type=radio]{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}.architecture-project-types .wpcf7-list-item-label{display:block;color:inherit;font-family:inherit;font-size:.75rem;line-height:1rem;font-weight:600}.architecture-project-types .wpcf7-list-item label:hover{border-color:rgba(34,211,238,.40)}.architecture-project-types .wpcf7-list-item label:has(input[type=radio]:checked){background:#2563eb;border-color:#3b82f6;color:#fff}
.architecture-nda{width:100%;margin:0;padding:0}.architecture-nda .wpcf7-form-control{display:block!important;width:100%;margin:0!important;padding:0!important}.architecture-nda .wpcf7-list-item{display:block!important;width:100%;margin:0!important;padding:0!important}.architecture-nda .wpcf7-list-item label{display:flex!important;align-items:center;width:100%;margin:0!important;padding:0!important;color:#cbd5e1;font-family:inherit;font-size:.75rem;line-height:1rem;font-weight:400;cursor:pointer}.architecture-nda input[type=checkbox]{appearance:auto!important;-webkit-appearance:auto!important;width:1rem!important;height:1rem!important;min-width:1rem!important;max-width:1rem!important;margin:0 .75rem 0 0!important;padding:0!important;border-radius:.25rem!important;background:#080c16!important;border:1px solid rgba(59,130,246,.40)!important;accent-color:#2563eb;cursor:pointer;flex-shrink:0}.architecture-nda .wpcf7-list-item-label{color:#cbd5e1!important;font-family:inherit!important;font-size:.75rem!important;line-height:1rem!important;font-weight:400!important}
.architecture-submit-wrapper{position:relative;width:100%;margin:0;padding:0}.architecture-submit{display:flex!important;align-items:center;justify-content:center;width:100%!important;height:auto!important;min-height:3.5rem!important;box-sizing:border-box!important;margin:0!important;padding:1rem!important;border:0!important;border-radius:.75rem!important;background:#2563eb!important;color:#fff!important;font-family:inherit!important;font-size:.875rem!important;line-height:1.25rem!important;font-weight:700!important;text-align:center;cursor:pointer;outline:none!important;box-shadow:0 0 24px rgba(37,99,235,.40);transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease}.architecture-submit:hover{background:#3b82f6!important;color:#fff!important;box-shadow:0 0 24px rgba(37,99,235,.40)}.architecture-submit:focus{outline:none!important;box-shadow:0 0 24px rgba(37,99,235,.40)}.architecture-submit:active{transform:translateY(1px)}
.architecture-inquiry-wrapper .wpcf7-not-valid-tip{display:block;margin-top:.375rem;color:#f87171;font-family:inherit;font-size:.75rem;line-height:1rem}.architecture-inquiry-wrapper .wpcf7-not-valid{border-color:#ef4444!important}.architecture-inquiry-wrapper .wpcf7-response-output{width:100%;box-sizing:border-box;margin:1rem 0 0!important;padding:1rem!important;border-radius:.75rem!important;background:rgba(30,64,175,.60);border:1px solid rgba(34,211,238,.40);color:#67e8f9;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.75rem;line-height:1.625rem;text-align:center}.architecture-inquiry-wrapper .wpcf7-spinner{display:block;margin:.5rem auto}
@media (max-width:639px){.architecture-form-box{padding:2rem}}@media (max-width:480px){.architecture-form-box{padding:1.25rem}.architecture-project-types .wpcf7-form-control.wpcf7-radio{grid-template-columns:repeat(2,minmax(0,1fr))}.architecture-project-types .wpcf7-list-item label{min-height:3rem;height:auto;padding:.75rem .5rem!important}.architecture-nda .wpcf7-list-item label{align-items:flex-start}.architecture-nda input[type=checkbox]{margin-top:.05rem!important}}

/* =========================================================
   VERTICAL TEXT ROLLOVER — HEADER CTAS + PRIMARY NAV
   Two copies of the same label sit in a masked line. On hover
   the first moves out upward while the duplicate rolls in below.
========================================================= */
.hs-roll-text {
  position: relative;
  display: inline-block;
  height: 1.28em;
  line-height: 1.28em;
  overflow: hidden;
  vertical-align: middle;
}

.hs-roll-text__track {
  display: flex;
  flex-direction: column;
  transform: translate3d(0, 0, 0);
  transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.hs-roll-text__line {
  display: block;
  flex: 0 0 1.28em;
  height: 1.28em;
  line-height: 1.28em;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .hs-roll-hover:hover .hs-roll-text__track,
  .hs-roll-hover:focus-visible .hs-roll-text__track {
    transform: translate3d(0, -50%, 0);
  }
}

/* Footer Practice Units is now a WordPress-managed menu. */
.hs-footer-practice-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-footer-practice-menu li {
  margin: 0;
  padding: 0;
}

.hs-footer-practice-menu a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}

.hs-footer-practice-menu a:hover,
.hs-footer-practice-menu a:focus-visible {
  color: #67e8f9;
}

@media (prefers-reduced-motion: reduce) {
  .hs-roll-text__track {
    transition: none !important;
    transform: none !important;
  }
}



/* =========================================================
   SHARED CTA SIZING
   Keeps prominent action buttons visually consistent across templates
   without affecting accordions, tabs, cards, or utility controls.
========================================================= */
.hs-site-cta {
  min-height: 52px !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  padding-left: 1.75rem !important;
  padding-right: 1.75rem !important;
  box-sizing: border-box !important;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hs-header-cta {
  min-height: 44px !important;
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
  box-sizing: border-box !important;
  align-items: center;
  justify-content: center;
}

#mobile-drawer .hs-header-cta {
  min-height: 48px !important;
}

@media (max-width: 480px) {
  .hs-site-cta {
    min-height: 48px !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* =========================================================
   MOBILE FAQ LAYOUT
   Keeps FAQ rows compact across the site and prevents numbered
   labels such as [03] from collapsing into one character per line.
========================================================= */
@media (max-width: 767px) {
  /* Shared accordion trigger sizing. */
  #faq-accordion [data-faq-toggle],
  #faq-container > div > button,
  #faqAccordion > div > button,
  #desktop-faq-container .faq-toggle,
  button[onclick*="toggleFaq"],
  button[onclick*="faq-icon"] {
    padding: 0.9rem 1rem !important;
    gap: 0.7rem !important;
    align-items: flex-start !important;
    min-height: 0 !important;
  }

  /* Question copy: smaller and allowed to use the available width. */
  #faq-accordion [data-faq-toggle] > h3,
  #faq-accordion [data-faq-toggle] > :first-child:not(.material-symbols-outlined),
  #faq-container > div > button > :first-child:not(.material-symbols-outlined),
  #faqAccordion > div > button > :first-child:not(.material-symbols-outlined),
  #desktop-faq-container .faq-toggle > :first-child:not(.material-symbols-outlined),
  button[onclick*="toggleFaq"] > :first-child:not(.material-symbols-outlined),
  button[onclick*="faq-icon"] > :first-child:not(.material-symbols-outlined) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* Number labels must stay together instead of stacking vertically. */
  #faq-accordion [data-faq-toggle] .font-mono,
  #desktop-faq-container .faq-toggle .font-mono {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  /* Keep number + question aligned cleanly on multi-line questions. */
  #faq-accordion [data-faq-toggle] > h3,
  #desktop-faq-container .faq-toggle > span:first-child {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.55rem !important;
  }

  /* Chevron/add icons remain a fixed compact column. */
  #faq-accordion .faq-icon,
  #faq-container .material-symbols-outlined,
  #faqAccordion .faq-icon,
  #desktop-faq-container .faq-icon,
  button[onclick*="toggleFaq"] .material-symbols-outlined,
  button[onclick*="faq-icon"] .faq-icon {
    flex: 0 0 auto !important;
    width: 20px !important;
    min-width: 20px !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
  }

  /* Compact answer copy and inner spacing. */
  #faq-accordion .faq-answer-inner,
  #faq-container > div > button + div,
  #faqAccordion > div > button + div,
  #desktop-faq-container .faq-content,
  button[onclick*="toggleFaq"] + div,
  button[onclick*="faq-icon"] + div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 1rem !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  #faq-accordion .faq-answer-inner,
  #desktop-faq-container .faq-content {
    padding-top: 0.75rem !important;
  }

  /* Reduce vertical distance between FAQ cards. */
  #faq-accordion > * + *,
  #faq-container > * + *,
  #faqAccordion > * + * {
    margin-top: 0.65rem !important;
  }

  #desktop-faq-container {
    gap: 0.65rem !important;
  }

  /* FAQ implementations that use clickable cards instead of buttons. */
  [onclick*="faq-body"] {
    padding: 1rem !important;
  }

  [onclick*="faq-body"] > .flex {
    align-items: flex-start !important;
    gap: 0.7rem !important;
  }

  [onclick*="faq-body"] > .flex > :first-child:not(.material-symbols-outlined) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  [onclick*="faq-body"] .faq-icon {
    flex: 0 0 auto !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  [onclick*="faq-body"] .faq-body {
    margin-top: 0.7rem !important;
    padding-top: 0.7rem !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* Native <details> FAQ implementations. */
  details.group {
    padding: 1rem !important;
  }

  details.group > summary {
    align-items: flex-start !important;
    gap: 0.7rem !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  details.group > summary > :first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  details.group > summary .material-symbols-outlined {
    flex: 0 0 auto !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  details.group > p {
    margin-top: 0.7rem !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}


/* =========================================================
   MOBILE STACKING + TYPOGRAPHY SAFETY
========================================================= */
@media (max-width: 767px) {
  /* Keep page sections below fixed third-party controls such as reCAPTCHA. */
  main section,
  footer {
    position: relative !important;
    z-index: 1 !important;
  }

  body .grecaptcha-badge,
  body .grecaptcha-badge iframe {
    z-index: 2147483647 !important;
  }

  /* Mobile type ceiling: prominent text and metrics never exceed 32px. */
  main [class*="font-metric"],
  main [class*="text-metric"],
  main [class*="font-display"],
  main [class*="text-display"],
  main .text-4xl,
  main .text-5xl,
  main .text-6xl,
  main .text-7xl,
  main .text-8xl,
  main .text-9xl,
  main [data-hs-counter="1"] {
    font-size: 24px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    max-width: 100% !important;
  }

  main .material-symbols-outlined {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}


/* =========================================================
   SITE-WIDE MOBILE HARDENING — 2026-09-23
   Keeps cards, metrics, tables, labels and third-party badges
   readable on narrow phones without changing desktop layouts.
========================================================= */
@media (max-width: 767px) {
  html, body { overflow-x: hidden !important; }
  main, main section, main section > div { min-width: 0; }

  /* Every content section stays below reCAPTCHA on mobile. */
  main section,
  footer,
  .site-footer {
    position: relative !important;
    z-index: 1 !important;
  }
  body .grecaptcha-badge,
  body .grecaptcha-badge iframe,
  body iframe[src*="recaptcha"] {
    z-index: 2147483647 !important;
  }

  /* Hard mobile type ceiling requested across the site. */
  main h1 { font-size: 32px !important; line-height: 1.14 !important; }
  main h2 { font-size: 26px !important; line-height: 1.18 !important; }
  main h3 { font-size: 21px !important; line-height: 1.25 !important; }
  main h4 { font-size: 18px !important; line-height: 1.3 !important; }
  main [class*="font-metric"],
  main [class*="text-metric"],
  main [class*="font-display"],
  main [class*="text-display"],
  main .text-4xl,
  main .text-5xl,
  main .text-6xl,
  main .text-7xl,
  main .text-8xl,
  main .text-9xl {
    font-size: 32px !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
  }
  
  main [data-hs-counter="1"]{
    font-size: 24px !important;
    line-height: 1.08em !important;
    letter-spacing: -.025em !important;
  }
  /* Avoid the letter-by-letter wrapping visible in narrow KPI cards. */
  main p,
  main li,
  main td,
  main th,
  main a,
  main span:not(.material-symbols-outlined) {
    word-break: normal;
    overflow-wrap: break-word;
  }
  main a[href^="mailto:"] { overflow-wrap: anywhere; }

  /* Metric rows that force three narrow cards become one clean column. */
  main .grid.grid-cols-3:has([class*="metric-callout"]),
  main .grid.grid-cols-3:has([data-hs-counter="1"]),
  main .grid.grid-cols-3:has(.font-headline-lg) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .75rem !important;
  }

  /* Metric pairs with large values also stack on very narrow phones. */
  main .grid.grid-cols-2:has([class*="metric-callout"]) > *,
  main .grid.grid-cols-2:has([data-hs-counter="1"]) > * {
    min-width: 0 !important;
  }

  /* Long comparison tables stay readable by swiping instead of crushing words. */
  main .overflow-x-auto { -webkit-overflow-scrolling: touch; }
  main .overflow-x-auto > table,
  main .overflow-x-auto table {
    min-width: 700px !important;
  }
  main table th,
  main table td {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Pills / compliance labels wrap inside the viewport instead of clipping. */
  main [class*="rounded-full"] {
    max-width: 100%;
  }

  /* Flex rows may shrink, but their copy must retain usable width. */
  main .flex > *, main .grid > * { min-width: 0; }
}

@media (max-width: 479px) {
  main .grid.grid-cols-2:has([class*="metric-callout"]),
  main .grid.grid-cols-2:has([data-hs-counter="1"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .w-full.mt-space-md.grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5.gap-space-sm.counter-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.counter-flex .p-space-md.rounded-xl.bg-surface-card\/60.backdrop-blur-md.border.border-white\/5.flex.flex-col.justify-between.shadow-lg.hover\:border-glow-cyan\/30.transition-colors {
    width: 40%;
    flex: 1 1 auto;
}
p.font-headline-sm.text-headline-sm.text-text-primary {
    font-size: 26px !important;
}

/* Fix cards merging/overlapping */
    .elementor-widget-container .elementor-icon-box-wrapper,
    .elementor-icon-box-wrapper {
        display: flex;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }


    /* Move icon above text */
    .elementor-icon-box-icon {
        margin: 0 0 12px 0 !important;
        width: auto !important;
        display: flex !important;
        justify-content: flex-start !important;
    }


    /* Force row layout where icons/cards are currently collapsing */
    .elementor-icon-list-items,
    .elementor-icon-box-wrapper {
        flex-direction: row !important;
        align-items: flex-start !important;
    }


    /* AI Integration page - icon above content */
    body.page-id-ai-integration .elementor-icon-box-wrapper,
    body.page-id-ai-development .elementor-icon-box-wrapper {
        flex-direction: column !important;
        align-items: flex-start !important;
    }


    /* Prevent text and icon collision */
    .elementor-icon-box-content {
        width: 100% !important;
        margin-top: 0 !important;
    }


    /* Fix spacing between service cards */
    .elementor-widget-icon-box {
        margin-bottom: 25px !important;
    }


    /* Remove negative margins causing merging */
    .elementor-icon-box-icon,
    .elementor-icon-box-content {
        transform: none !important;
        position: relative !important;
        z-index: 1;
    }
     /* ======================================
       AI INTEGRATION / AI DEVELOPMENT CARDS
       Mobile Fix
    ====================================== */

    .elementor-widget-container .card,
    .ai-card,
    .feature-card,
    .service-card {
        overflow: hidden;
    }


    /* Icon + Heading wrapper */
    .feature-card .icon-wrapper,
    .service-card .icon-wrapper,
    .ai-card .icon-wrapper {
        flex-shrink: 0;
    }


    /* Force icon beside content */
    .feature-card > div:first-child,
    .service-card > div:first-child,
    .ai-card > div:first-child {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
    }


    /* Icon always top aligned */
    .feature-card svg,
    .feature-card img,
    .service-card svg,
    .service-card img,
    .ai-card svg,
    .ai-card img {
        margin-top: 4px;
        flex-shrink: 0;
    }


    /* Text block */
    .feature-card h3,
    .service-card h3,
    .ai-card h3 {
        margin-top: 0 !important;
        line-height: 1.25;
    }


    /* Prevent vertical letters issue */
    .feature-card *,
    .service-card *,
    .ai-card * {
        word-break: normal !important;
        writing-mode: horizontal-tb !important;
    }


    /* Fix latency benchmark card */
    .latency,
    .benchmark-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center;
    }


    .latency span,
    .benchmark-card span {
        writing-mode: horizontal-tb !important;
        display: inline-block !important;
        white-space: nowrap;
    }


    /* Tags / pills */
    .feature-card .tags,
    .service-card .tags,
    .ai-card .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }


    .feature-card .tags span,
    .service-card .tags span,
    .ai-card .tags span {
        width: auto;
        white-space: nowrap;
    }

}

@media (max-width: 479px) {
  /* Any intentionally hard-coded three-column row is too narrow on phones. */
  main .grid.grid-cols-3 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .75rem !important;
  }
  main .grid.grid-cols-3 > * {
    min-width: 0 !important;
  }
}


/* =========================================================
   DESKTOP MEGA MENU — PAGE BLUR + SCROLL LOCK
   Keeps the header and open Services menu crisp while the page
   underneath is visually de-emphasized and cannot scroll.
========================================================= */
.hs-mega-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(3, 7, 18, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.hs-mega-menu-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Keep the browser scrollbar visible while the page itself is locked.
   The scrollbar is intentionally NOT removed when the mega menu opens. */
html.hs-mega-menu-open {
  overflow-y: scroll !important;
  overscroll-behavior: none !important;
}

body.hs-mega-menu-open {
  overflow: visible !important;
  overscroll-behavior: none !important;
}

/* Theme scrollbar — dark track + cyan/blue accent to match the site. */
html {
  scrollbar-width: thin;
  scrollbar-color: #2563eb #0a1020;
}

html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  background: #0a1020;
}

html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #38bdf8 0%, #2563eb 100%);
  border: 2px solid #0a1020;
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #67e8f9 0%, #3b82f6 100%);
}

/* Theme-colored text selection. */
::selection {
  background: #2563eb;
  color: #ffffff;
}

::-moz-selection {
  background: #2563eb;
  color: #ffffff;
}

/* The menu itself must remain above the backdrop. */
header {
  position: fixed;
}

@media (max-width: 1279px) {
  .hs-mega-menu-backdrop {
    display: none;
  }

}


/* =========================================================
   BUTTON-ONLY VERTICAL ROLLOVER
   Applies the existing menu word-up/word-down effect to
   buttons/CTA controls only. FAQ/accordion controls are
   explicitly excluded.
   ========================================================= */
/* Keep the masked label to exactly one text-line high. This prevents the
   duplicate copy from ever being visible during the rollover. */
.hs-button-roll {
  overflow: hidden !important;
  vertical-align: middle;
}

.hs-button-roll .hs-roll-text {
  position: relative;
  display: inline-block !important;
  width: max-content;
  max-width: 100%;
  height: 1.28em !important;
  max-height: 1.28em !important;
  overflow: hidden !important;
  vertical-align: middle;
  line-height: 1.28em;
}

.hs-button-roll .hs-roll-text__track {
  display: flex !important;
  flex-direction: column;
  flex: 0 0 auto;
  width: max-content;
  transform: translate3d(0, 0, 0);
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.hs-button-roll .hs-roll-text__line {
  display: block !important;
  flex: 0 0 1.28em;
  height: 1.28em;
  min-height: 1.28em;
  line-height: 1.28em;
  white-space: nowrap;
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .hs-button-roll:hover .hs-roll-text__track,
  .hs-button-roll:focus-visible .hs-roll-text__track {
    transform: translate3d(0, -1.28em, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-button-roll .hs-roll-text__track {
    transition: none !important;
    transform: none !important;
  }
}


/* =========================================================
   TABLET-ONLY RESPONSIVE REFINEMENTS
   Scope: 768px–1023px only. Desktop and mobile layouts are
   intentionally left untouched.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  /* AI Development: five deployment cards become a clean 2-column grid. */
  .hs-stitch-ai-development .hs-ai-deploy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  .hs-stitch-ai-development .hs-ai-deploy-grid > * {
    min-width: 0 !important;
  }

  .hs-stitch-ai-development .hs-ai-deploy-grid > *:last-child {
    grid-column: 1 / -1;
  }

  .hs-stitch-ai-development .hs-ai-deploy-grid h4,
  .hs-stitch-ai-development .hs-ai-deploy-grid p {
    overflow-wrap: anywhere;
  }

  /* SaaS Development: prevent the image/text split from becoming too narrow. */
  .hs-stitch-saas-development .hs-saas-vertical-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
  }

  .hs-stitch-saas-development .hs-saas-vertical-card {
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .hs-stitch-saas-development .hs-saas-vertical-image {
    width: 100% !important;
    height: 190px !important;
    flex: 0 0 190px !important;
  }

  .hs-stitch-saas-development .hs-saas-vertical-card > div:last-child {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Custom Software: reduce the oversized hero heading only on tablet. */
  .hs-custom-hero-title {
    font-size: clamp(2.75rem, 5.1vw, 3.25rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
  }

  /* Fintech: keep metric icons compact; they must never stretch into a bar. */
  .hs-stitch-fintech-sovereign-banking .hs-fintech-metrics > div {
    min-width: 0 !important;
  }

  .hs-stitch-fintech-sovereign-banking .hs-fintech-metrics > div > div:first-child {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    flex: 0 0 48px !important;
    align-self: flex-start !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hs-stitch-fintech-sovereign-banking .hs-fintech-metrics > div > div:nth-child(2) {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .hs-stitch-fintech-sovereign-banking .hs-fintech-metrics .font-metric-callout,
  .hs-stitch-fintech-sovereign-banking .hs-fintech-metrics .font-label-lg,
  .hs-stitch-fintech-sovereign-banking .hs-fintech-metrics p {
    overflow-wrap: anywhere;
  }
}


/* =========================================================
   Shared homepage-style FAQ accordion (.hs-faq-accordion)
   Mirrors the homepage #faq-accordion styles so every page's
   FAQ looks and opens/closes exactly the same way.
========================================================= */
.hs-faq-accordion { overflow-anchor: none; }
.hs-faq-accordion .faq-item { overflow: hidden; overflow-anchor: none; }
.hs-faq-accordion .faq-answer {
  display: block !important;
  height: 0;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  transition: height 420ms cubic-bezier(.22,1,.36,1), opacity 260ms ease;
  will-change: height, opacity;
}
.hs-faq-accordion .faq-answer-inner { min-height: 0; }
.hs-faq-accordion .faq-item.is-open .faq-answer { opacity: 1; }
.hs-faq-accordion .faq-icon {
  display: inline-block;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 420ms cubic-bezier(.22,1,.36,1);
}
.hs-faq-accordion .faq-item.is-open .faq-icon { transform: rotate(180deg); }
.hs-faq-accordion [data-faq-toggle] { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .hs-faq-accordion .faq-answer,
  .hs-faq-accordion .faq-icon { transition: none !important; }
}
@media (max-width: 767px) {
  .hs-faq-accordion [data-faq-toggle] {
    padding: 0.9rem 1rem !important;
    gap: 0.7rem !important;
    align-items: flex-start !important;
    min-height: 0 !important;
  }
  .hs-faq-accordion [data-faq-toggle] > h3 {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.55rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    overflow-wrap: break-word !important;
  }
  .hs-faq-accordion [data-faq-toggle] .font-mono {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  .hs-faq-accordion .faq-icon {
    flex: 0 0 auto !important;
    width: 20px !important;
    min-width: 20px !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
  }
  .hs-faq-accordion .faq-answer-inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 1rem !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
   /* Remove mobile hero card boxes */
    .hero-card,
    .hero-badge,
    .hero-content-box,
    .glass-card,
    .glass-panel,
    .feature-card,
    .trust-card,
    .stats-card,
    [class*="card"],
    [class*="glass"] {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-color: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }


    /* Keep text/content spacing clean */
    .hero-section .container,
    .hero-section .content,
    .hero-section .inner {
        background: transparent !important;
        box-shadow: none !important;
    }


    /* Remove boxes behind trust points */
    .trust-item,
    .hero-trust-item,
    .benefit-item {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding-left: 0 !important;
    }
}
