/*
  Omnixa theme layer.
  /vendor/omnixa-base.css is the vendored template export, kept byte-identical
  (light mode therefore keeps the template's orange accent-1 = #f97316, per
  rebranding.md sec 01). Every rebrand change, both light and dark, lives in
  this omnixa.css layer.

  Structure:
  1. Light theme  = the template palette as shipped (no light-mode changes):
                    Omnixa's brand accent is the template's own orange.
  2. Dark theme   = [data-theme="dark"] overrides of the same Webflow
                    variables. No new component CSS: dark mode is 100%
                    token-driven, so every Webflow component (buttons, cards,
                    borders, marquee, forms) re-themes automatically.
  3. Utilities    = contrast guards + reduced-motion support and the
                    theme-control affordances.

  The inline boot script in layout.tsx sets data-theme + a `dark` class on
  <html> BEFORE first paint, so there is no flash.
*/

html[data-theme="dark"] {
  /* Page surfaces: near-black, slightly warm to match the template's
     off-white light surface (accent-2 = --accent-color--accent-2). */
  --_color---normal-color--black: #f5f5f5;
  --_color---normal-color--white: #0b0b0c;

  /* Headings/paragraph: white-primary, ash-grey-secondary */
  --_color---text-color--heading-color: var(--_color---normal-color--black);
  --_color---accent-color--accent-3: #b3b6bd;              /* paragraph grey */
  --_color---accent-color--accent-4: #4a4d55;              /* muted ash */

  /*.Transparent-ish greys the template uses for borders/tints (10-25% black
    on light) become white alphas on dark. */
  --_color---accent-color--accent-5:  #ffffff26;           /* #0003       */
  --_color---accent-color--accent-7:  #ffffff1f;           /* #fff3 tint  */
  --_color---accent-color--accent-9:  #ffffff40;           /* #00000080   */
  --_color---accent-color--accent-10: #ffffff1a;           /* #0000001a   */
  --_color---accent-color--accent-12: #ffffff0d;           /* #0000000d   */
  --_color---accent-color--accent-18: #ffffff33;           /* #0006       */
  --_color---accent-color--accent-2:  #101114;             /* #f9f9f9     */
  --_color---accent-color--accent-11: #141519;             /* #f0f0f0     */
  --_color---accent-color--accent-14: #26282e;             /* #d9d9d9     */
  --_color---accent-color--accent-15: #9a9ea6;             /* #666        */
  --_color---accent-color--accent-16: #ffffff1f;           /* #fff6       */
  --_color---accent-color--accent-17: #f5f5f5;             /* #101010     */
  --_color---accent-color--accent-13: #0e0f11;             /* #fffc       */

  /* Interaction accent: light mode keeps the template's orange, but a
     straight orange lift reads too hot against near-black. Dark mode keeps
     the template's original navy family instead, lifted for contrast
     (rebranding.md sec 02: "dark-blue where the accent token requires
     adaptation"). Still dark-blue, not neon. */
  --_color---accent-color--accent-1: #4d7fe8;

  /* The template's white-tinted button/icon surfaces (accent-6 purple and
     misc) are handled by their own tokens; only the greys above flip. */
  --_color---text-color--paragraph-color: #b3b6bd;
                                /* FAQ answers etc. still #222 after the token block flips — invisible-on-dark fix */
}

/* wcag: in dark mode, the near-white "white" token is used as page bg by
   Webflow components via white alphas; guard specific fixed #fff usages. */
html[data-theme="dark"] body {
  background-color: var(--_color---normal-color--white);
}

/* The w-nav dropdown + form success/fail blocks hardcode #fff */
html[data-theme="dark"] .w-dropdown,
html[data-theme="dark"] .w-nav-overlay,
html[data-theme="dark"] .w-form-done,
html[data-theme="dark"] .w-form-fail,
html[data-theme="dark"] .nav-menu.w--open {
  background-color: #131418;
  color: #f5f5f5;
}

/* Form inputs: white bg in light, near-black in dark */
html[data-theme="dark"] .w-input {
  background-color: #17181c;
  border-color: #ffffff26;
  color: #f5f5f5;
}
html[data-theme="dark"] .w-input::placeholder {
  color: #8a8e96;
}

/* Focus visibility in both themes */
.w-input:focus {
  outline: 2px solid var(--_color---accent-color--accent-1);
  outline-offset: 1px;
}
/* Keyboard focus rings: the template base CSS strips outline on
   interactive elements, leaving keyboard users without a visible focus
   indicator. :focus-visible only applies to keyboard navigation, so
   mouse clicks stay visually unchanged. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--_color---accent-color--accent-1);
  outline-offset: 2px;
}

/* Reduced motion: the template's GSAP system honors this via its runtime,
   but hard-stop CSS-driven loops (marquee) here as a second line. */
@media (prefers-reduced-motion: reduce) {
  html[Marquee-Left] .what-we-do-marquee-items,
  [Marquee-Left="True"] {
    animation: none !important;
  }
}

/* w-webflow-badge: the runtime injects a "Made in Webflow" badge; the
   rebrand requires no Webflow branding anywhere. display:none also frees
   the corner it occupies (it intercepted the theme toggle). */
.w-webflow-badge {
  display: none !important;
}

/* ---- Theme toggle: collapsible corner ghost (critique item 12, user pick) ----
   Closed: one small pill showing the resolved theme. Click: three choices.
   Choosing collapses the pill again. Fixed bottom-right, under the nav. */
.theme-toggle {
  position: fixed;
  top: auto;
  bottom: 16px;
  right: 16px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid #ffffff2b;
  border-radius: 200px;
  background: #101010c9;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 32px #00000059;
}
@media (max-width: 767px) {
  .theme-toggle { bottom: 12px; right: 12px; }
}
.theme-toggle-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 200px;
  cursor: pointer;
  white-space: nowrap;
}
.theme-toggle-button:hover {
  background: #ffffff1f;
}
.theme-toggle-button.theme-toggle-active {
  background: var(--_color---accent-color--accent-1);
  color: #0b0b0c;
}
html[data-theme="dark"] .theme-toggle-button.theme-toggle-active {
  color: #0b0b0c;
}
.theme-toggle-button:focus-visible {
  outline: 2px solid var(--_color---accent-color--accent-1);
  outline-offset: 2px;
}
.theme-toggle-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.theme-toggle-ghost::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 200px;
  background: var(--_color---accent-color--accent-1);
}

/* ---- Omnixa logo rendering (rebranding.md sec 09) ----
   The header/footer logo slots use the real ox-glyph mark. Slot height is
   locked so the square glyph renders at logo scale instead of its 512px
   intrinsic size, and the dark-theme variant is swapped via CSS so the same
   mark stays legible on both themes. */
.header-logo,
.footer-logo-box img {
  height: 34px;
  width: auto;
  border-radius: 8px;
}

html[data-theme="dark"] .header-logo,
html[data-theme="dark"] .footer-logo-box img {
  content: url("/assets/omnixa-logo-dark.svg");
}

/* ---- Founder detail sections (rebranding.md sec 43) ---- */
.founder-detail-section {
  padding: 64px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
html[data-theme="dark"] .founder-detail-section {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.founder-detail-wrap {
  max-width: 760px;
  margin: 0 auto;
}
.founder-detail-title {
  font-size: 28px;
  margin-bottom: 18px;
}
.founder-detail-rich {
  line-height: 1.75;
}
.founder-detail-rich p,
.founder-detail-rich ul {
  margin-bottom: 14px;
}
.founder-detail-rich ul {
  padding-left: 22px;
  list-style: disc;
}
.founder-detail-rich li {
  margin-bottom: 8px;
}
.founder-detail-rich a {
  text-decoration: underline;
}
.founder-cta-link {
  font-weight: 600;
}

/* ---- Pricing: three-bundle layout (Start / Growth / Scale) ----
   The Webflow grid was built for two card pairs plus two banners. With the
   third card added, the closing banner spans the last two columns on
   desktop so no grid cell is left empty; the two-column and single-column
   breakpoints below 992px flow naturally without this rule. */
.price-content-banner-box.two {
  width: var(--_base---global-size--global-full);
  height: var(--_base---global-size--global-full);
}
@media screen and (min-width: 992px) {
  .price-content-wrap .price-content-banner-box.two {
    grid-column: 2 / 4;
  }
}
.price-content-banner-box.two .price-content-banner {
  object-fit: cover;
}

/* ---- Dark theme: components that the token flip cannot reach ----
   The [data-theme=dark] block above flips the surface/heading tokens. The
   rules below cover what still breaks after that: components with literal
   colors paired to a token that flips to the same shade (ratio ~1.0),
   fixed-color SVG arrows, and the WCAG-tuned accent on flipped surfaces.
   Every selector is scoped so light theme is untouched. */
/* The Webflow runtime inlines color on these (style attr beats stylesheet
   rules), so dark overrides here need !important to take effect. */
html[data-theme="dark"] .our-story-year,
html[data-theme="dark"] .achievements-title,
html[data-theme="dark"] .achievements-year {
  color: var(--_color---normal-color--white) !important;
}

html[data-theme="dark"] .workflow-card-content-short-des {
  color: var(--_color---accent-color--accent-3) !important;
}

html[data-theme="dark"] .what-we-do-marquee-text {
  color: rgba(255, 255, 255, 0.08) !important;
}

/* Section titles without a variant class follow the --white token, which
   flips to near-black on the still-dark page surface in dark mode. Titles
   inside sections that flip light (black token surface) need the opposite,
   so the flip direction is resolved here per section instead of by variant. */
html[data-theme="dark"] .section-title:not([class*="w-variant-"]),
html[data-theme="dark"] .section-sub-title:not([class*="w-variant-"]) {
  color: var(--_color---accent-color--accent-17);
}

html[data-theme="dark"] .who-we-are-section .section-title,
html[data-theme="dark"] .our-story-section .section-title,
html[data-theme="dark"] .achievements-section .section-title,
html[data-theme="dark"] .price-compare-section .section-title,
html[data-theme="dark"] .price-compare-section .section-sub-title {
  color: var(--_color---normal-color--white);
}

/* Blog cards keep a dark surface (accent-2 stays dark in both themes),
   so their text must stay light instead of following the flipped token */
html[data-theme="dark"] .home-blogs-post-title,
html[data-theme="dark"] .home-blogs-date,
html[data-theme="dark"] .home-blogs-post-author-name {
  color: var(--_color---accent-color--accent-17);
}

/* Footer flips to a light surface in dark theme; the lifted accent-1
   (#4d7fe8) was tuned for dark surfaces and lands at 3.49:1 there */
html[data-theme="dark"] .footer-pages.w--current {
  color: #274d9e;
}

/* Utility pages hardcode light-theme text colors; lift them for dark */
html[data-theme="dark"] .instraction-li-bold-text {
  color: var(--_color---accent-color--accent-17);
}
html[data-theme="dark"] .primary-text-two {
  color: var(--_color---accent-color--accent-15);
}

/* Fixed-color SVG arrows: every surface inverts, so black arrows become
   black-on-black and white arrows white-on-white. Swap the assets instead of
   introducing per-surface rules; one/two hover pairs still alternate. */
html[data-theme="dark"] img[src*="_Black-Arrow-2"] {
  content: url("/assets/69dcb5467199b638883f4588-69df33fdf672c244fbe9b2cd_White-Arrow.svg");
}
html[data-theme="dark"] img[src*="_White-Arrow"] {
  content: url("/assets/69dcb5467199b638883f4588-69df341881ce942a94966bbf_Black-Arrow-2.svg");
}
html[data-theme="dark"] img[src*="_Black-50-Arrow"] {
  content: url("/assets/69dcb5467199b638883f4588-69df33fdf672c244fbe9b2cd_White-Arrow.svg");
}
html[data-theme="dark"] img[src*="_Blog_Arrow_Black"],
html[data-theme="dark"] img[src*="_Insights_Arrow_Black"] {
  content: url("/assets/69dcb5467199b638883f4588-69ef01c472f7bffb08be3092_Blog_Arrow_White.svg");
}
html[data-theme="dark"] img[src*="_Blog_Arrow_White"],
html[data-theme="dark"] img[src*="_Insights_Arrow_White"] {
  content: url("/assets/69dcb5467199b638883f4588-69ef01c49efb028b56f6f5d5_Blog_Arrow_Black.svg");
}

/* =====================================================================
   Rebrand additions: service-page pricing tier cards, the pricing-page
   service matrix, the founder page composition and the about founder
   teaser. Light values first; dark overrides sit inside each block.
   Generated markup: scripts/migrate/service_content.py + omnixa_brand.py
   ===================================================================== */

/* ---- Service-page pricing tier cards (svc-price-*) ---- */
.svc-price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
  margin-bottom: 40px;
}
.svc-price-card {
  --svc-fg: #1a1a1a;
  --svc-dim: rgba(26, 26, 26, 0.62);
  --svc-border: rgba(26, 26, 26, 0.1);
  --svc-accent: #f97316;
  --svc-cta-bg: #111111;
  --svc-cta-fg: #ffffff;
  background-color: #ffffff;
  color: var(--svc-fg);
  border: 1px solid var(--svc-border);
  border-radius: 16px;
  padding: 26px 24px;
  display: flex;
  flex-flow: column;
  gap: 14px;
  box-shadow: 4px 4px 10px 0 rgba(11, 11, 12, 0.06);
  text-align: left;
}
html[data-theme="dark"] .svc-price-card {
  --svc-fg: #f5f5f5;
  --svc-dim: rgba(245, 245, 245, 0.58);
  --svc-border: rgba(255, 255, 255, 0.1);
  --svc-accent: #4d7fe8;
  --svc-cta-bg: #f5f5f5;
  --svc-cta-fg: #111214;
  background-color: #17181a;
  box-shadow: none;
}
.svc-price-card.svc-price-featured {
  --svc-fg: #ffffff;
  --svc-dim: rgba(255, 255, 255, 0.6);
  --svc-border: rgba(255, 255, 255, 0.16);
  --svc-cta-bg: #f97316;
  --svc-cta-fg: #111111;
  background-color: #0e0f11;
  box-shadow: 8px 8px 18px 0 rgba(0, 0, 0, 0.18);
}
html[data-theme="dark"] .svc-price-card.svc-price-featured {
  --svc-cta-bg: #4d7fe8;
  --svc-cta-fg: #ffffff;
  background-color: #26272c;
  box-shadow: 8px 8px 18px 0 rgba(0, 0, 0, 0.35);
}
.svc-price-tier {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--svc-accent);
  font-weight: 600;
}
.svc-price-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.svc-price-big {
  font-size: 38px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.svc-price-unit {
  font-size: 14px;
  color: var(--svc-dim);
  font-weight: 500;
}
.svc-price-billing {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--svc-dim);
  border-top: 1px dashed var(--svc-border);
  padding-top: 12px;
}
/* The base template styles every list inside a rich-text block as a two-column
   grid (.all-details-rich-text ul, specificity 0,1,1). That rule hijacks the
   tier-card feature lists: two ~1fr columns cannot fit a 293px card's content
   width, so features overflow and clip into gibberish ("Con form Mod Mapo
   Integ…"). Matching on the element too yields the same 0,1,1 and lets this
   later sheet win the tie; the grid template is cleared for non-grid display. */
ul.svc-price-feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column;
  grid-template-columns: none;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.45;
}
.svc-price-feats li {
  position: relative;
  padding-left: 22px;
}
.svc-price-feats li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--svc-accent);
  border-bottom: 2px solid var(--svc-accent);
  transform: rotate(40deg);
}
.svc-price-grid a.svc-price-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 999px;
  background-color: var(--svc-cta-bg);
  color: var(--svc-cta-fg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.svc-price-grid a.svc-price-cta:hover {
  transform: translateY(-2px);
}
.svc-price-grid a.svc-price-cta svg {
  width: 14px;
  height: 14px;
}

/* Dark-mode glyph fix: service card icons are single black SVGs; the
   surface behind them flips to dark, so invert the glyph instead of
   shipping a second icon set. */
html[data-theme="dark"] .service-content-icon {
  filter: invert(1);
}

/* Compare table check/cross glyphs are white-painted SVGs (they sit on
   the black band in light). The section surface flips to light in dark,
   so invert the glyphs with the same approach. */
html[data-theme="dark"] .price-compare-icon {
  filter: invert(1);
}

/* Service rich lists: the FAQ/process <li> lead with a <strong> question;
   breaking it to its own line stops text wrapping around the marker. */
.services-details-rich-text li > strong:first-of-type {
  display: block;
  margin-bottom: 2px;
}

/* ---- Pricing-page service matrix additions ---- */
.price-compare-items.center .price-compare-text {
  text-align: center;
}
.svc-matrix-note {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.72;
  max-width: 780px;
}

/* ---- Founder page (redesigned composition) ---- */
.founder-hero-section {
  padding: 40px 0 24px;
}
.founder-hero-wrap {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 48px;
  align-items: start;
}
.founder-hero-name {
  font-size: clamp(42px, 6vw, 72px);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 18px 0;
}
.founder-hero-name-two {
  display: block;
  /* currentColor would resolve against the transparent fill below, so
     stroke with the themed ink token directly (flips to light in dark). */
  -webkit-text-stroke: 1px var(--_color---normal-color--black);
  color: transparent;
}
.founder-hero-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.founder-hero-bio {
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 24px;
  opacity: 0.85;
}
.founder-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.founder-hero-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid rgba(26, 26, 26, 0.18);
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.founder-hero-actions a:hover {
  border-color: currentColor;
  transform: translateY(-1px);
}
html[data-theme="dark"] .founder-hero-actions a {
  border-color: rgba(255, 255, 255, 0.22);
}
.founder-hero-side {
  display: flex;
  flex-flow: column;
  gap: 16px;
}
.founder-hero-mark-box {
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 24px;
  display: grid;
  place-items: center;
  aspect-ratio: 1.15;
  padding: 36px;
  background: rgba(11, 11, 12, 0.03);
}
html[data-theme="dark"] .founder-hero-mark-box {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}
.founder-hero-mark-box img {
  width: 68%;
  height: auto;
}
html[data-theme="dark"] .founder-hero-mark-box img {
  filter: invert(1);
}
.founder-hero-facts {
  display: flex;
  flex-flow: column;
}
.founder-hero-fact {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 2px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}
.founder-hero-fact:last-child {
  border-bottom: 0;
}
html[data-theme="dark"] .founder-hero-fact {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.founder-hero-fact-num {
  font-size: 24px;
  font-weight: 600;
  min-width: 64px;
}
.founder-hero-fact-text {
  font-size: 14px;
  opacity: 0.7;
}
.founder-pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 30px 0 8px;
}
.founder-pillar-item {
  border-top: 2px solid currentColor;
  padding-top: 14px;
}
.founder-pillar-num {
  font-size: 13px;
  letter-spacing: 0.1em;
  opacity: 0.55;
}
.founder-pillar-word {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  font-weight: 600;
  text-transform: uppercase;
  margin: 6px 0 10px;
}
.founder-pillar-desc {
  font-size: 14.5px;
  line-height: 1.55;
  opacity: 0.75;
}
.founder-quote {
  margin-top: 34px;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.35;
  font-weight: 500;
  max-width: 800px;
}
.founder-quote small {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.6;
  font-weight: 400;
}
.founder-chips-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.founder-work-list {
  margin-top: 26px;
}
.founder-work-row {
  display: grid;
  grid-template-columns: 44px 1.2fr 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}
.founder-work-row:first-child {
  border-top: 1px solid rgba(26, 26, 26, 0.1);
}
html[data-theme="dark"] .founder-work-row {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .founder-work-row:first-child {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.founder-work-num {
  font-size: 13px;
  opacity: 0.5;
}
.founder-work-name {
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.founder-work-kind {
  font-size: 14px;
  opacity: 0.65;
}
.founder-work-live,
.founder-work-case {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  text-decoration: none;
  color: inherit;
  opacity: 0.85;
  border-bottom: 1px solid rgba(26, 26, 26, 0.25);
  padding-bottom: 2px;
  white-space: nowrap;
}
.founder-work-live:hover .founder-work-arrow,
.founder-work-case:hover .founder-work-arrow {
  transform: translateX(4px);
}
.founder-work-arrow {
  transition: transform 0.2s ease;
}
html[data-theme="dark"] .founder-work-live,
html[data-theme="dark"] .founder-work-case {
  border-bottom-color: rgba(255, 255, 255, 0.25);
}
.founder-detail-wrap.founder-detail-split {
  max-width: 980px;
  display: grid;
  grid-template-columns: 0.8fr 1.5fr;
  gap: 40px;
  align-items: start;
}
.founder-detail-split .founder-detail-title {
  font-size: clamp(26px, 3vw, 34px);
  margin-bottom: 0;
  position: sticky;
  top: 24px;
}
.founder-detail-split.founder-detail-chips .founder-work-list,
.founder-detail-section.founder-detail-chips .founder-chips-flex {
  margin-top: 26px;
}

/* ---- About page: founder teaser card (replaces the fake team grid) ---- */
.about-founder-card {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 26px;
  align-items: center;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 20px;
  padding: 26px;
  margin-top: 40px;
  background: rgba(11, 11, 12, 0.02);
}
html[data-theme="dark"] .about-founder-card {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}
.about-founder-mark-box {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 16px;
  padding: 22px;
  background: rgba(11, 11, 12, 0.04);
}
html[data-theme="dark"] .about-founder-mark-box {
  background: rgba(255, 255, 255, 0.04);
}
.about-founder-mark-box img {
  width: 72%;
  height: auto;
}
html[data-theme="dark"] .about-founder-mark-box img {
  filter: invert(1);
}
.about-founder-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.about-founder-role {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 6px 0 12px;
}
.about-founder-text {
  font-size: 15px;
  line-height: 1.6;
  max-width: 640px;
  opacity: 0.85;
  margin-bottom: 16px;
}
.about-founder-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(26, 26, 26, 0.3);
  padding-bottom: 2px;
}
html[data-theme="dark"] .about-founder-cta {
  border-bottom-color: rgba(255, 255, 255, 0.3);
}
.about founder-cta svg,
.about-founder-cta svg {
  width: 14px;
  height: 14px;
}

@media screen and (max-width: 991px) {
  .svc-price-grid {
    grid-template-columns: 1fr;
  }
  .founder-hero-wrap {
    grid-template-columns: 1fr;
  }
  .founder-detail-wrap.founder-detail-split {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .founder-detail-split .founder-detail-title {
    position: static;
  }
  .founder-pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-founder-card {
    grid-template-columns: 1fr;
  }
  .founder-work-row {
    grid-template-columns: 36px 1fr auto;
  }
  .founder-work-kind {
    display: none;
  }
}

/* Founder work rows: portfolio footnote under the work list */
.founder-work-note {
  margin-top: 18px;
  font-size: 14px;
  opacity: 0.7;
}
.founder-work-note a {
  color: inherit;
}

/* The per-service matrix exists only as the desktop compare table; on
   small screens make it a horizontally scrollable block instead of
   dropping it entirely. */
@media screen and (max-width: 991px) {
  .svc-matrix-section .price-compare-wrapper.desktop {
    display: block;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  .svc-matrix-section .price-compare-wrapper.desktop .price-compare-flex {
    min-width: 560px;
  }
}

/* ---- Honest lead-capture notice (injected by LeadFormBridge) ----
   Forms stop routing to the template's demo account and open a pre-filled
   mailto to the company address. Because a mailto only completes inside the
   visitor's own mail app, the notice states exactly that and offers a
   WhatsApp handoff + copy button as the real fallback paths. Tokens keep the
   block theme-proof (light + dark); the orange accent matches accent-1. */
.lead-next {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid var(--_color---accent-color--accent-5, rgba(0, 0, 0, 0.1));
  border-radius: 12px;
  background: var(--_color---accent-color--accent-7, rgba(0, 0, 0, 0.03));
  color: var(--_color---text-color--heading-color, inherit);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  max-width: 560px;
}
.lead-next.lead-next-on {
  opacity: 1;
  transform: translateY(0);
}
.lead-next-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}
.lead-next-copy {
  font-size: 14px;
  line-height: 1.55;
  color: var(--_color---accent-color--accent-3, #555);
  margin: 0 0 12px;
}
.lead-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.lead-next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--_color---accent-color--accent-1, #f97316);
  color: #101010;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.lead-next-btn:hover {
  filter: brightness(1.08);
  text-decoration: none;
}
.lead-next-btn:focus-visible {
  outline: 2px solid var(--_color---accent-color--accent-1, #f97316);
  outline-offset: 2px;
}
.lead-next-btn.lead-next-ghost {
  background: transparent;
  color: var(--_color---text-color--heading-color, inherit);
  border-color: var(--_color---accent-color--accent-9, rgba(0, 0, 0, 0.5));
}
.lead-next-btn.lead-next-ghost:hover {
  filter: none;
  background: var(--_color---accent-color--accent-7, rgba(0, 0, 0, 0.04));
}
.lead-next-mail-line {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--_color---accent-color--accent-3, #555);
}
.lead-next-mail {
  color: var(--_color---accent-color--accent-1, #f97316);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lead-next-mail:hover {
  filter: brightness(1.08);
}

/* The Webflow runtime injects its "Made in Webflow" badge anchor into the
   page on load (cloudfront-hosted icon + text). Site chrome is ours, so
   their badge is removed. */
.w-webflow-badge {
  display: none !important;
}

/* --- Batch 2 (trust pass) ------------------------------------------ */

/* Work tiles: the template nulls its own caption slot (display-none junk),
   leaving image-only tiles. This is the readable caption chip — same
   dark-slab language as the rest of the site, orange hover discipline. */
.project-collection-banner-box {
  position: relative;
}
.project-tile-caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px 13px;
  border-radius: var(--_base---bordar-radius--r-m, 12px);
  background: rgba(13, 12, 11, 0.8);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none; /* the whole tile is the link */
}
.project-tile-caption-name {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.25;
}
.project-tile-caption-line {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.4;
  transition: color 0.18s ease;
}
.project-collection-banner-box:hover .project-tile-caption-line {
  color: rgba(255, 255, 255, 0.94);
}
@media (max-width: 767px) {
  .project-tile-caption {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 9px 12px 10px;
  }
  .project-tile-caption-name {
    font-size: 12.5px;
  }
  .project-tile-caption-line {
    font-size: 11px;
  }
}

/* About band: rows become the shipped-work list — name left, live status
   right, the whole row links to its case page. Trophy icons are removed
   by the pipeline (markup), so no icon styles are needed. */
.achievements-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  gap: 24px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.achievements-link .achievements-title,
.achievements-link .achievements-year {
  transition: color 0.18s ease;
}
.achievements-link:hover .achievements-title,
.achievements-link:hover .achievements-year {
  color: var(--_color---accent-color--accent-1, #f97316);
}
.achievements-link:focus-visible {
  outline: 2px solid var(--_color---accent-color--accent-1, #f97316);
  outline-offset: 8px;
}
@media (max-width: 479px) {
  .achievements-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* Home counters: the two card titles are real links to /work (the list
   backing both numbers). */
a.who-we-are-counter-title {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease;
}
a.who-we-are-counter-title::after {
  content: "\2197";
  font-size: 0.75em;
  line-height: 1;
  color: var(--_color---accent-color--accent-1, #f97316);
  transition: transform 0.18s ease;
}
a.who-we-are-counter-title:hover {
  color: var(--_color---accent-color--accent-1, #f97316);
}
a.who-we-are-counter-title:hover::after {
  transform: translate(2px, -2px);
}
a.who-we-are-counter-title:focus-visible {
  outline: 2px solid var(--_color---accent-color--accent-1, #f97316);
  outline-offset: 4px;
}

/* ---- Batch 3 (conversion): boundary chips, outcome line, ghost toggle ---- */

/* Ghost toggle color correction: the dark-theme dim makes inactive labels
   unreadable on the new dark ghost pill. */
html[data-theme="dark"] .theme-toggle-button {
  color: #fff;
}

/* Hero outcome line: sits between the verb chips and the giant headline. */
.hero-banner-outcome {
  font-size: 15px;
  line-height: 1.55;
  color: var(--_color---normal-color--light-gray, #b6b7ba);
  margin: 0 0 14px;
}
@media (max-width: 767px) {
  .hero-banner-outcome { font-size: 13.5px; margin: 0 0 10px; }
}

/* Section-boundary chips (home): centered onward-path link after a section. */
.bridge-chip-row {
  display: flex;
  justify-content: center;
  padding: 6px 24px 46px;
}
.bridge-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--_color---accent-color--accent-1, #f97316);
  color: #101010;
  border-radius: 200px;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bridge-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px #f9731640;
  color: #101010;
}
.bridge-chip:focus-visible {
  outline: 2px solid var(--_color---accent-color--accent-1, #f97316);
  outline-offset: 3px;
}
.bridge-chip-text {
  color: #101010;
}
.bridge-chip-arrow-box {
  display: inline-flex;
}
.bridge-chip-arrow {
  width: 14px;
  height: 14px;
}
@media (max-width: 767px) {
  .bridge-chip-row { padding: 2px 16px 36px; }
  .bridge-chip { font-size: 13px; padding: 11px 20px; }
}

/* Pricing matrix labels must never break mid-word ("AI Voice Reception
   ist"): wrap whole words only, and let titles share the guarantee. */
.price-compare-text,
.price-compare-title {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/* Mobile overflow: the decorative axis dividers are fixed-width (716px)
   empty boxes that poke past a 390px viewport. They carry no content, so
   hide them on phones instead of restyling every grid they cross. */
@media (max-width: 767px) {
  .hero-banner-middle-border-one,
  .hero-banner-middle-border-two,
  .what-we-do-border-box,
  .footer-middle-border-box,
  .home-project-middle-border-box,
  .home-pricing-border-box,
  .home-blogs-border-box {
    display: none;
  }
}

/* Detector pass fixes: keep the who-we-are paragraph within a readable
   measure, and lift the pale counter titles to a legible gray. */
p.who-we-are-content-description {
  max-width: min(92%, 760px);
}
a.who-we-are-counter-title,
div.who-we-are-counter-title {
  color: #6b6e76;
}

/* =====================================================================
   Service detail pages — redesigned content bands (svc-band-*).

   Generated markup: scripts/migrate/service_content.py + omnixa_brand.py.
   The two plain rich-text blobs are replaced by four designed bands
   (overview / pricing / dark workflow / FAQ) plus a closing contact band
   that promotes the sticky widget's own pieces verbatim. All copy is
   verbatim from service_content.py; tokens follow the svc-price-* system
   so light and dark both hold. Motion = the shared svc-motion script
   (transform/opacity only, reduced-motion => opacity fades); hovers are
   CSS transitions gated to fine pointers.
   ===================================================================== */

/* ---- Band rhythm (inside .service-details-wrapper) ---- */
.svc-bands {
  display: flex;
  flex-flow: column;
  margin-top: 48px;
}
.svc-band {
  padding: 48px 0 52px;
}
.svc-band + .svc-band {
  border-top: 1px dashed rgba(26, 26, 26, 0.16);
}
html[data-theme="dark"] .svc-band + .svc-band {
  border-top-color: rgba(255, 255, 255, 0.14);
}

/* ---- Band head: orange tick + uppercase display title ---- */
.svc-band-head {
  margin-bottom: 28px;
}
.svc-band-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--_color---text-color--heading-color, #111111);
}
.svc-band-title::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background-color: #f97316;
  flex: none;
}

/* ---- 1) Overview ---- */
.svc-overview-box {
  max-width: 820px;
}
.svc-overview-lead {
  margin: 0;
  font-size: 19px;
  line-height: 1.75;
  color: var(--_color---text-color--paragraph-color, #444444);
}

/* ---- 2) Pricing (reuses the svc-price-* tier cards) ---- */
.svc-pricing-more-box {
  margin-top: 6px;
}
.svc-band a.svc-pricing-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f97316;
}
html[data-theme="dark"] .svc-band a.svc-pricing-more {
  color: #4d7fe8;
}
.svc-pricing-more svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .svc-pricing-more:hover svg {
    transform: translateX(4px);
  }
  .svc-price-grid .svc-price-card {
    transition:
      transform 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }
  .svc-price-grid .svc-price-card:hover {
    transform: translateY(-4px);
    border-color: rgba(249, 115, 22, 0.45);
    box-shadow: 6px 8px 18px 0 rgba(11, 11, 12, 0.1);
  }
  html[data-theme="dark"] .svc-price-grid .svc-price-card:hover {
    border-color: rgba(77, 127, 232, 0.45);
  }
  .svc-price-grid .svc-price-card.svc-price-featured:hover {
    box-shadow: 8px 10px 22px 0 rgba(0, 0, 0, 0.22);
  }
}

/* ---- 3) How It Works (dark slab, five numbered rows) ---- */
.svc-band-process {
  --pf-fg: #ffffff;
  --pf-dim: rgba(255, 255, 255, 0.64);
  --pf-border: rgba(255, 255, 255, 0.15);
  --pf-accent: #f97316;
  background-color: #101113;
  border-radius: 22px;
  padding: 44px 48px 24px;
}
html[data-theme="dark"] .svc-band-process {
  background-color: #17181a;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.svc-band-process .svc-band-title {
  color: #ffffff;
  margin-bottom: 22px;
}
.svc-process-note {
  margin: 0 0 24px;
  max-width: 660px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--pf-dim);
}
.svc-process-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.svc-process-row {
  display: grid;
  grid-template-columns: 64px 220px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 20px 14px;
  border-top: 1px dashed var(--pf-border);
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}
.svc-process-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--pf-accent);
  font-variant-numeric: tabular-nums;
}
.svc-process-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pf-fg);
}
.svc-process-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--pf-dim);
}
@media (hover: hover) and (pointer: fine) {
  .svc-process-row:hover {
    transform: translateX(6px);
    background-color: rgba(255, 255, 255, 0.03);
  }
}

/* ---- 4) FAQ (stacked two-column rows) ---- */
.svc-faq-list {
  display: flex;
  flex-flow: column;
}
.svc-faq-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 6px 48px;
  padding: 18px 4px;
  border-top: 1px dashed rgba(26, 26, 26, 0.16);
}
html[data-theme="dark"] .svc-faq-row {
  border-top-color: rgba(255, 255, 255, 0.14);
}
.svc-faq-q {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--_color---text-color--heading-color, #111111);
  transition: color 0.2s ease;
}
.svc-faq-a {
  font-size: 15px;
  line-height: 1.7;
  color: var(--_color---text-color--paragraph-color, #444444);
}
@media (hover: hover) and (pointer: fine) {
  .svc-faq-row:hover .svc-faq-q {
    color: #f97316;
  }
  html[data-theme="dark"] .svc-faq-row:hover .svc-faq-q {
    color: #4d7fe8;
  }
}

/* ---- 5) Closing contact band (widget content promoted) ---- */
.svc-cta-band {
  padding: 56px 0 64px;
}
.svc-cta-flex {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: center;
  padding: 44px 48px;
  border: 1px dashed rgba(26, 26, 26, 0.2);
  border-radius: 22px;
}
html[data-theme="dark"] .svc-cta-flex {
  border-color: rgba(255, 255, 255, 0.16);
}
.svc-cta-title {
  margin: 0 0 24px;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--_color---text-color--heading-color, #111111);
}
.svc-cta-actions {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.svc-cta-actions .service-widget-content-items {
  display: flex;
  flex-flow: column;
  gap: 2px;
  padding: 10px 18px;
  border: 1px dashed rgba(26, 26, 26, 0.24);
  border-radius: 999px;
  transition: border-color 0.2s ease;
}
html[data-theme="dark"] .svc-cta-actions .service-widget-content-items {
  border-color: rgba(255, 255, 255, 0.24);
}
.svc-cta-actions .service-widget-content-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--_color---text-color--paragraph-color, #444444);
}
.svc-cta-actions .service-widget-content-link {
  color: var(--_color---text-color--heading-color, #111111);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
@media (hover: hover) and (pointer: fine) {
  .svc-cta-actions .service-widget-content-items:hover {
    border-color: #f97316;
  }
  html[data-theme="dark"] .svc-cta-actions .service-widget-content-items:hover {
    border-color: #4d7fe8;
  }
  .svc-cta-actions .service-widget-content-link:hover {
    color: #f97316;
  }
  html[data-theme="dark"] .svc-cta-actions .service-widget-content-link:hover {
    color: #4d7fe8;
  }
}
.svc-cta-photo {
  border-radius: 18px;
  overflow: hidden;
  min-height: 280px;
  height: 100%;
}
.svc-cta-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
html[data-theme="dark"] .svc-cta-photo {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- Hero: clipped box for the scripted title/banner entrances ---- */
.service-details-title {
  overflow: hidden;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .svc-faq-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .svc-process-row {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .svc-process-desc {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
  .svc-process-name {
    align-self: center;
  }
  .svc-cta-flex {
    grid-template-columns: 1fr;
    padding: 32px 28px;
  }
  .svc-cta-photo {
    min-height: 220px;
  }
}
@media (max-width: 479px) {
  .svc-bands {
    margin-top: 32px;
  }
  .svc-band {
    padding: 36px 0 40px;
  }
  .svc-band-process {
    padding: 30px 20px 16px;
    border-radius: 18px;
  }
  .svc-process-row {
    padding: 16px 6px;
    gap: 12px;
  }
  .svc-cta-band {
    padding: 40px 0 48px;
  }
  .svc-cta-flex {
    padding: 28px 20px;
    gap: 24px;
  }
  .svc-cta-photo {
    min-height: 180px;
  }
}

/* ---- Reduced motion: keep color feedback only ---- */
@media (prefers-reduced-motion: reduce) {
  .svc-process-row,
  .svc-pricing-more svg,
  .svc-price-grid .svc-price-card,
  .svc-faq-q {
    transition: none;
  }
  .svc-process-row:hover {
    transform: none;
  }
  .svc-price-grid .svc-price-card:hover {
    transform: none;
  }
}

/* ---- Scroll reveals ([fade_anim], staged by the shared motion script) ----
   Pre-script elements stay fully visible; the staged class is added by the
   script, so a stalled runtime can never blank a page. The reveal is a
   class toggle animated by the browser's transition engine, which settles
   on wall clock instead of a JS ticker. Two-phase rules keep specificity
   at a single attribute selector, matching the template's own patterns. */
[fade_anim].omnixa-fade-staged {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
[fade_anim].omnixa-fade-staged:not(.omnixa-fade-in) {
  opacity: 0;
  transform: translateY(26px);
}

/* ---- Reduced motion: reveals become opacity-only color feedback ---- */
@media (prefers-reduced-motion: reduce) {
  [fade_anim].omnixa-fade-staged {
    transition: opacity 0.4s ease;
  }
  [fade_anim].omnixa-fade-staged:not(.omnixa-fade-in) {
    transform: none;
  }
}