/* Flexus design system — WebFX typography/scale/spacing, Flexus brand accent */
:root {
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, sans-serif;
  --section-y: 60px;

  /* WebFX gray scale */
  --ink: #0b1720;
  --ink-soft: #0b1720;
  --nav: #222;
  --muted: #6e7b81;
  --gray-01: #ebedef;
  --gray-02: #ced4da;
  --line: #ebedef;
  --surface: #f9fbff;
  --surface-2: #f2f2f2;
  --white: #fff;

  /* Flexus accent mapped onto WebFX primary-blue roles */
  --brand: #10c0e0;
  --brand-deep: #0a9bb8;
  --brand-soft: #d7f5fb;
  --brand-wash: #eef9fc;
  --cta-dark: #1a2538;

  /* Supporting accents (WebFX engine palette, muted) */
  --purple: #7b5cff;
  --green: #41d48c;

  /* Full-width layout — fluid gutters, no boxed max container */
  --gutter: clamp(1rem, 3.2vw, 4rem);
  --prose-max: 760px;
  --max: 100%;
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: auto;
  scroll-padding-top: 92px; /* sticky .header min-height ~84px + border */
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--nav);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--brand-deep); text-decoration: none; }
a:hover { color: var(--ink); }

/* Site-wide fluid shell — edge-to-edge with responsive side padding */
.wrap {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}
.narrow {
  width: 100%;
  max-width: var(--prose-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}
@media (max-width: 480px) {
  :root { --gutter: 1rem; }
}
@media (min-width: 1600px) {
  :root { --gutter: clamp(2rem, 4vw, 5rem); }
}

/* Headlines — WebFX: elegant, bold, tight, highly readable (site-wide) */
h1, .h1,
h2, .h2,
h3, .h3,
.page-hero h1,
.ai-hero h1,
.media-band h2,
.section-head .h2,
.home-about-copy .h2,
.proposal-copy .h2 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1, .h1 {
  margin: 0 0 16px;
  font-size: clamp(44px, 6.2vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.032em;
}
h2, .h2 {
  margin: 0 0 12px;
  font-size: clamp(32px, 4.1vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
h3, .h3 {
  margin: 0 0 8px;
  font-size: clamp(21px, 2.35vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.h2 .accent, h2 .accent { color: var(--brand-deep); }
.lead, .lead-text {
  margin: 0 0 16px;
  max-width: 42rem;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: #334047;
}
@media (min-width: 768px) {
  .lead, .lead-text { font-size: 19px; line-height: 1.62; }
}
.eyebrow {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.muted { color: var(--muted); }

/* Buttons — WebFX sizing */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-dark, .btn-primary-dark {
  background: var(--cta-dark);
  color: #fff !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.33;
  padding: 17px 28px;
}
.btn-dark:hover { background: #0f1524; color: #fff !important; }
.btn-brand {
  background: var(--brand);
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 22px;
}
.btn-brand:hover { background: var(--brand-deep); color: #fff !important; }
.btn-link {
  background: transparent;
  color: var(--brand-deep) !important;
  font-size: 17px;
  font-weight: 600;
  padding: 0;
}
.btn-link:hover { color: var(--ink) !important; transform: none; }

/* Top flag — scrolls away; only .header stays sticky */
.flag {
  position: relative;
  z-index: 4000;
  background: var(--cta-dark);
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  padding: 9px 16px;
}
.flag b { color: var(--brand); font-weight: 700; }

/* Utility bar — WebFX */
.utility {
  border-bottom: 1px solid var(--gray-01);
  background: #fff;
  font-size: 15px;
  color: var(--muted);
}
.utility .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 44px;
  padding-block: 9px;
}
.utility strong { color: var(--ink); font-weight: 700; }
.utility .right { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.utility .right a { color: var(--nav); font-size: 16px; font-weight: 500; }
.utility .phone { color: var(--brand-deep) !important; font-weight: 800 !important; font-size: 17px !important; }
.utility-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  color: #fff !important;
  background: linear-gradient(115deg, #0a9bb8 0%, #10c0e0 48%, #06d6a0 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 2px 8px rgba(10, 155, 184, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.utility-cta:hover {
  color: #fff !important;
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 4px 12px rgba(10, 155, 184, 0.35);
}
.utility-cta:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .utility-cta {
    padding: 5px 12px;
    font-size: 12px !important;
  }
}

/* Header — sticky under viewport top (flag is not sticky) */
.header {
  position: sticky;
  top: 0;
  z-index: 3000;
  background: #fff;
  border-bottom: 1px solid var(--gray-01);
  min-height: 84px; /* reserve space so sticky paint doesn't jump layout */
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 84px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.brand-logo {
  display: block;
  height: auto;
  width: auto;
  max-height: clamp(28px, 7vw, 48px);
  max-width: min(230px, 55vw);
  object-fit: contain;
  object-position: left center;
}
.brand-logo-dark {
  max-height: clamp(28px, 7vw, 48px);
  max-width: min(240px, 55vw);
}
.footer-logo-link { display: inline-block; }
.mark {
  width: 40px; height: 40px; border-radius: 6px;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 17px;
}
.brand-name {
  font-size: 20px; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.1; color: var(--ink);
}
.brand-sub { font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 1px; }
/* ===== WebFX-style mega menu ===== */
.nav { display: none; align-items: center; gap: 6px; flex: 1; justify-content: center; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #1a2228;
  padding: 12px 15px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
}
.nav-link:hover { color: var(--brand-deep); background: rgba(16,192,224,0.08); }
.nav-item.is-open > .nav-link {
  color: var(--brand-deep);
  background: rgba(16,192,224,0.12);
  font-weight: 800;
}
.nav-caret {
  width: 0; height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 5.5px solid currentColor;
  opacity: 0.7;
  transition: transform .15s ease;
}
.nav-item.is-open > .nav-link .nav-caret { transform: rotate(180deg); }
.header-cta {
  display: none;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 15px 24px;
  text-transform: none;
}
@media (min-width: 1280px) {
  .nav { gap: 8px; }
  .nav-link {
    font-size: 18px;
    padding: 13px 16px;
  }
}
@media (max-width: 1099px) {
  .brand-logo {
    max-height: 36px;
    max-width: min(190px, 52vw);
  }
  .header-inner { min-height: 72px; }
}
@media (min-width: 1100px) {
  .header .brand-logo {
    max-height: 48px;
    max-width: 230px;
  }
}
.burger {
  width: 42px; height: 42px; border: 1px solid var(--gray-01); border-radius: var(--radius);
  background: #fff; display: grid; place-items: center; gap: 5px; cursor: pointer;
}
.burger i { width: 16px; height: 2px; background: var(--ink); display: block; }
@media (min-width: 1100px) {
  .nav, .header-cta { display: flex; align-items: center; }
  .burger { display: none; }
}

/* ===== WebFX-style mobile accordion overlay ===== */
.mnav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: #fff;
  flex-direction: column;
  overflow: hidden;
}
.mnav.is-open { display: flex; animation: mnavIn .2s ease; }
@keyframes mnavIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.mnav-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 4990;
  background: rgba(11, 23, 32, 0.35);
}
.mnav-backdrop.is-open { display: block; }
body.mnav-locked { overflow: hidden; }

.mnav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-01);
  background: #fff;
  flex-shrink: 0;
}
.mnav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}
.mnav-phone:hover { color: var(--brand-deep); }
.mnav-cta {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 4px;
  white-space: nowrap;
}

.mnav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-01);
  flex-shrink: 0;
}
.mnav-bar .brand-logo {
  max-height: 32px;
  max-width: min(180px, 48vw);
}
.mnav-close {
  width: 42px; height: 42px;
  border: 1px solid var(--gray-02);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.mnav-close:hover { border-color: var(--brand); color: var(--brand-deep); }

.mnav-body {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 24px;
}
.mnav-acc,
.mnav-link {
  border-bottom: 1px solid var(--gray-01);
}
.mnav-acc-btn,
.mnav-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px;
  background: #fff;
  border: 0;
  text-align: left;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}
.mnav-link { color: var(--ink); font-weight: 700; }
.mnav-acc.is-open > .mnav-acc-btn { color: var(--brand-deep); }
.mnav-chevron {
  width: 0; height: 0; flex-shrink: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  opacity: 0.55;
  transition: transform .18s ease;
}
.mnav-acc.is-open > .mnav-acc-btn .mnav-chevron,
.mnav-sub.is-open > .mnav-sub-btn .mnav-chevron {
  transform: rotate(180deg);
  opacity: 0.9;
}

.mnav-acc-panel {
  background: #f7f9fa;
  padding: 4px 0 10px;
  border-top: 1px solid var(--gray-01);
}
.mnav-acc-panel[hidden],
.mnav-sub-panel[hidden] {
  display: none !important;
}
.mnav-hub {
  display: block;
  padding: 12px 18px 10px 28px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-deep);
}
.mnav-sub-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 14px 28px;
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
}
.mnav-sub.is-open > .mnav-sub-btn { color: var(--brand-deep); }
.mnav-sub-panel {
  padding: 0 18px 10px 40px;
  display: grid;
  gap: 2px;
}
.mnav-sub-panel a {
  display: block;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 500;
  color: #374046;
  text-decoration: none;
}
.mnav-sub-panel a:hover { color: var(--brand-deep); }

.mnav-foot {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gray-01);
  background: #fff;
}
.mnav-foot a {
  display: grid;
  place-items: center;
  padding: 12px 10px;
  border: 1px solid var(--gray-02);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.mnav-foot a:hover { border-color: var(--brand); color: var(--brand-deep); }

@media (min-width: 1100px) {
  .mnav, .mnav-backdrop { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mnav.is-open { animation: none; }
}

.nav-item { position: static; }
.mega {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 80;
}
.nav-item.is-open > .mega,
.mega.open { display: block; animation: megaIn .16s ease; }
@keyframes megaIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.mega-backdrop {
  background: #f3f6f8;
  border-top: 1px solid var(--gray-01);
  border-bottom: 1px solid var(--gray-01);
  box-shadow: 0 24px 40px rgba(11, 23, 32, 0.08);
  padding: 28px 0 32px;
}
.mega-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 28px;
  align-items: start;
}
.mega-cols {
  display: grid;
  grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr));
  gap: 28px 32px;
}
.mega-col { min-width: 0; }
.mega-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8ec;
}
a.mega-col-head--link {
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease;
}
a.mega-col-head--link:hover {
  border-bottom-color: rgba(16, 192, 224, 0.45);
}
a.mega-col-head--link:hover .mega-col-title {
  color: var(--brand-deep);
}
a.mega-col-head--link:hover .mega-col-icon {
  background: rgba(16, 192, 224, 0.28);
}
a.mega-col-head--link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}
.mega-col-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
  transition: color .2s ease;
}
.mega-col-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(16, 192, 224, 0.14);
  color: var(--brand-deep);
  display: grid; place-items: center; flex-shrink: 0;
  transition: background .2s ease;
}
.mega-col-icon svg { width: 18px; height: 18px; }
.mega-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega-link {
  display: block;
  padding: 8px 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #374046;
  text-decoration: none;
}
.mega-link:hover { color: var(--brand-deep); }

.mega-promo {
  background-color: #e7f7fb;
  background-image: radial-gradient(rgba(16,192,224,0.18) 1px, transparent 1px);
  background-size: 14px 14px;
  border: 1px solid #c5eaf2;
  border-radius: 10px;
  padding: 22px 18px 18px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
}
.mega-promo-metric {
  font-size: 48px; font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  color: var(--brand-deep); margin-bottom: 8px;
}
.mega-promo-label {
  font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); margin-bottom: 16px;
}
.mega-promo-art {
  flex: 1; min-height: 72px; margin: 4px 0 16px; border-radius: 50%;
  width: 88px; height: 88px; align-self: center;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 28%, transparent 29%),
    conic-gradient(from 210deg, var(--brand), #7bd7ea, var(--brand-deep), var(--brand));
  box-shadow: 0 10px 24px rgba(16,192,224,0.25);
}
.mega-promo-cta {
  width: 100%; justify-content: center;
  background: var(--brand) !important; color: #083040 !important;
  font-size: 14px; font-weight: 800; padding: 12px 14px; border-radius: 4px;
}
.mega-promo-cta:hover { background: var(--brand-deep) !important; color: #fff !important; }

@media (max-width: 1099px) {
  .mega { position: static; }
  .mega-backdrop { padding: 12px 0; box-shadow: none; }
  .mega-wrap { grid-template-columns: 1fr; gap: 16px; }
  .mega-cols { grid-template-columns: 1fr !important; gap: 16px; }
}

/* ===== HOME: HERO ===== */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--brand-wash) 0%, #fff 55%);
  padding: 36px 0 28px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 58% -8% -15%;
  background-image:
    linear-gradient(to right, rgba(16, 192, 224, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 192, 224, 0.09) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(700px) rotateX(58deg);
  transform-origin: center top;
  pointer-events: none;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 28px; }
}
.hero h1 { max-width: 20ch; }
.hero .lead-text { max-width: 36rem; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 8px; }
.hero-form {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 540px;
  border: 1px solid var(--gray-02);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(11, 23, 32, 0.06);
}
.hero-form input {
  flex: 1 1 180px;
  min-width: 0;
  border: 0;
  padding: 16px 18px;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  background: #fff;
}
.hero-form input::placeholder { color: #9aa4ad; font-weight: 400; }
.hero-form input:focus { outline: none; }
.hero-form .btn {
  flex: 0 0 auto;
  border-radius: 0;
  padding: 16px 22px;
  font-size: 16px;
  font-weight: 700;
  transform: none;
}
.hero-form .btn:hover { transform: none; }
.hero-cta-note {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

/* ===== Cinematic FX hero — deep space ===== */
.fx-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 64px 0 56px;
  background: #02040a;
}
.fx-hero a { color: #7fe6f6; }
.fx-hero a:hover { color: #fff; }
.fx-hero ::placeholder { color: rgba(255,255,255,.5); font-weight: 400; }
.fx-hero-inner { position: relative; z-index: 2; }

/* Space backdrop layers */
.fx-space {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #02040a;
}
.fx-space-photo {
  position: absolute;
  inset: 0;
  background-color: #02040a;
  background-image: var(--fx-space-photo);
  background-position: center 40%;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.02);
  /* Keep image sharpness — only a soft dark edge for UI contrast */
  filter: none;
  z-index: 0;
}
.fx-space-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2,4,10,.28) 0%, transparent 24%, transparent 68%, rgba(2,4,10,.45) 100%),
    radial-gradient(ellipse 85% 75% at 50% 42%, transparent 48%, rgba(2, 4, 12, 0.38) 100%);
  z-index: 4;
}
.fx-space-nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  opacity: 0.22;
  mix-blend-mode: screen;
  animation: fx-nebula-drift 36s ease-in-out infinite alternate;
  z-index: 1;
}
.fx-space-nebula-a {
  width: min(55vw, 640px);
  height: min(40vw, 440px);
  top: -6%;
  right: -6%;
  background: radial-gradient(circle at 40% 45%, rgba(90, 70, 180, 0.35), transparent 65%);
}
.fx-space-nebula-b {
  width: min(48vw, 520px);
  height: min(38vw, 400px);
  bottom: -10%;
  left: -8%;
  background: radial-gradient(circle at 50% 50%, rgba(40, 90, 160, 0.28), transparent 68%);
  animation-duration: 44s;
}
.fx-space-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  opacity: 0.55;
}
.fx-space-shooters {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
}
.fx-shooter {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95) 45%, rgba(127,230,246,0.9) 75%, rgba(123,92,255,0));
  box-shadow: 0 0 10px rgba(127, 230, 246, 0.55), 0 0 22px rgba(123, 92, 255, 0.35);
  opacity: 0;
  transform-origin: left center;
  pointer-events: none;
  will-change: transform, opacity;
}
.fx-shooter.is-on {
  animation: fx-shoot 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.fx-shooter::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  box-shadow: 0 0 12px 3px rgba(180, 230, 255, 0.85);
}

/* legacy tiny stars unused when canvas active */
.fx-hero-star { display: none; }

.fx-hero[data-still="true"] .fx-space-nebula,
.fx-hero[data-still="true"] .fx-space-galaxy,
.fx-hero[data-still="true"] .fx-shooter {
  animation: none !important;
}

@keyframes fx-nebula-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
}
@keyframes fx-galaxy-pulse {
  0%, 100% { opacity: 0.7; transform: rotate(-18deg) scale(1); }
  50% { opacity: 1; transform: rotate(-18deg) scale(1.04); }
}
@keyframes fx-shoot {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--fx-shoot-rot, -32deg)) scaleX(0.35); }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--fx-shoot-x, 340px), var(--fx-shoot-y, 210px), 0) rotate(var(--fx-shoot-rot, -32deg)) scaleX(1); }
}

/* Keep old ::before grid off for space theme */
.fx-hero::before { display: none !important; }

.fx-herogrid {
  display: grid;
  gap: 36px;
  align-items: center;
}
@media (min-width: 980px) {
  .fx-herogrid { grid-template-columns: 1.05fr .95fr; gap: 44px; }
}

.fx-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border: 1px solid rgba(16,192,224,.32);
  border-radius: 999px;
  background: rgba(16,192,224,.09);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fedfb;
}
.fx-hero-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10c0e0;
  animation: fx-dot 2.2s ease-in-out infinite;
}
.fx-hero-copy h1 {
  margin: 22px 0 0;
  font-size: clamp(40px, 5.4vw, 66px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 800;
  color: #fff;
  max-width: 15ch;
}
.fx-hero-shimmer {
  background: linear-gradient(90deg, #10c0e0, #7b5cff, #41d48c, #10c0e0);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fx-shimmer 6s linear infinite;
}
.fx-hero-lead {
  margin: 22px 0 0;
  max-width: 40ch;
  font-size: 19px;
  line-height: 1.62;
  color: #a9b6bf;
}
.fx-hero-form {
  margin: 30px 0 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 520px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 46px rgba(0,0,0,.4);
}
.fx-hero-form input {
  flex: 1 1 200px;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 17px 20px;
  color: #fff;
  font: inherit;
  font-size: 16px;
  outline: none;
}
.fx-hero-form button {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  padding: 17px 26px;
  background: linear-gradient(90deg, #10c0e0, #0a9bb8);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}
.fx-hero-form button:hover { filter: brightness(1.06); }
.fx-hero-links {
  margin: 16px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #7f8c96;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.fx-hero-links a { font-weight: 700; }

.fx-scene {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
  padding: 28px 12px 20px;
  overflow: visible;
  isolation: isolate;
}
.fx-stage {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: rotateX(6deg);
  transition: transform .25s ease;
}
.fx-stage-robot {
  transform: none !important;
  transform-style: flat;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 40% 28%, rgba(16,192,224,.18), transparent 50%),
    radial-gradient(circle at 58% 62%, rgba(59,130,246,.14), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(8,14,24,.55), rgba(4,8,14,.25) 70%),
    rgba(6, 12, 20, 0.4);
  box-shadow:
    0 0 0 1px rgba(16,192,224,.28),
    0 0 50px rgba(16,192,224,.16),
    inset 0 0 70px rgba(16,192,224,.07);
}
.fx-robot-glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,192,224,.28), transparent 70%);
  filter: blur(8px);
  animation: fx-halo 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.fx-stage-services .fx-robot-glow {
  z-index: 4;
  opacity: 0.45;
}
.fx-robot-ring {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1px solid rgba(16,192,224,.28);
  box-shadow: 0 0 24px rgba(16,192,224,.15);
  pointer-events: none;
  z-index: 0;
  animation: fx-ring 28s linear infinite;
}
.fx-stage-services .fx-robot-ring {
  z-index: 5;
  border-color: rgba(16,192,224,.42);
}
.fx-robot-mount {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.fx-robot-mount canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.fx-stage-services {
  background:
    radial-gradient(circle at 42% 30%, rgba(16,192,224,.16), transparent 52%),
    radial-gradient(circle at 55% 70%, rgba(59,130,246,.1), transparent 60%),
    rgba(6, 12, 20, 0.35);
}
.fx-svc-slider {
  border-radius: 50%;
  overflow: hidden;
}
.fx-svc-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
  z-index: 1;
}
.fx-svc-slide.is-active {
  opacity: 1;
  z-index: 2;
}
.fx-svc-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  user-select: none;
}
.fx-svc-slider::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, transparent 48%, rgba(4, 10, 18, 0.28) 100%),
    linear-gradient(180deg, rgba(4, 10, 18, 0.12), transparent 28%, transparent 72%, rgba(4, 10, 18, 0.22));
  pointer-events: none;
  z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
  .fx-svc-slide { transition: none; }
}

.fx-ring {
  position: absolute;
  border-radius: 50%;
  transform: rotateX(66deg);
  pointer-events: none;
}
.fx-ring-a {
  inset: 6%;
  border: 1px solid rgba(16,192,224,.28);
  animation: fx-ring 30s linear infinite;
}
.fx-ring-b {
  inset: 19%;
  border: 1px dashed rgba(123,92,255,.34);
  animation: fx-ring 22s linear infinite reverse;
}
.fx-ring-c {
  inset: 31%;
  border: 1px solid rgba(65,212,140,.30);
  animation: fx-ring 17s linear infinite;
}
.fx-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210px;
  height: 210px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(16,192,224,.28), rgba(16,192,224,0) 70%);
  animation: fx-halo 4s ease-in-out infinite;
  pointer-events: none;
}
.fx-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 36% 28%, rgba(16,192,224,.35), transparent 55%),
    radial-gradient(circle at 50% 55%, #0d1822 0%, #050b11 100%);
  border: 2px solid rgba(16,192,224,.65);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 18px 14px 16px;
  animation: fx-core 4s ease-in-out infinite;
  box-shadow: 0 0 55px rgba(16,192,224,.55), inset 0 0 42px rgba(16,192,224,.18);
  overflow: hidden;
  z-index: 2;
}
.fx-core-mark {
  width: 88%;
  height: auto;
  max-height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(16,192,224,.45));
}
.fx-core-label {
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .16em;
  color: #8fedfb;
}

.fx-orbit {
  position: absolute;
  inset: 0;
  animation: fx-orbit 30s linear infinite;
  pointer-events: none;
}
.fx-orbit-2 { animation-delay: -7.5s; }
.fx-orbit-3 { animation-delay: -15s; }
.fx-orbit-4 { animation-delay: -22.5s; }
.fx-orbit > .fx-orbit-item {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  animation: fx-orbitrev 30s linear infinite;
}
.fx-orbit-2 > .fx-orbit-item { animation-delay: -7.5s; }
.fx-orbit-3 > .fx-orbit-item { animation-delay: -15s; }
.fx-orbit-4 > .fx-orbit-item { animation-delay: -22.5s; }
.fx-orbit-item span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #d7eef4;
  white-space: nowrap;
}
.fx-orbit-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.fx-orbit-icon-cyan {
  border: 1px solid rgba(16,192,224,.45);
  color: #8fedfb;
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 20px rgba(16,192,224,.28);
}
.fx-orbit-icon-violet {
  border: 1px solid rgba(123,92,255,.5);
  color: #c3b6ff;
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 20px rgba(123,92,255,.28);
}
.fx-orbit-icon-mint {
  border: 1px solid rgba(65,212,140,.5);
  color: #8affc9;
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 20px rgba(65,212,140,.26);
}

.fx-stat {
  position: absolute;
  z-index: 3;
  padding: 18px 22px;
  border-radius: 18px;
  background:
    linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 42%, rgba(8,16,24,.28)),
    rgba(11, 23, 32, 0.42);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 18px 40px rgba(0,0,0,.28),
    0 0 0 1px rgba(16,192,224,.06);
  overflow: visible;
  -webkit-font-smoothing: antialiased;
  will-change: transform;
}
.fx-stat-top {
  top: 6%;
  right: 2%;
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 18px 40px rgba(0,0,0,.28),
    0 0 28px rgba(16,192,224,.12);
  border-color: rgba(16,192,224,.28);
  animation: fx-float 7s ease-in-out infinite;
}
.fx-stat-bottom {
  bottom: 8%;
  right: 4%;
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 18px 40px rgba(0,0,0,.28),
    0 0 28px rgba(65,212,140,.12);
  border-color: rgba(65,212,140,.28);
  animation: fx-float2 8s ease-in-out infinite;
}
.fx-stat-left {
  top: 16%;
  left: 2%;
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 18px 40px rgba(0,0,0,.28),
    0 0 28px rgba(123,92,255,.12);
  border-color: rgba(123,92,255,.26);
  animation: fx-float2 7.4s ease-in-out infinite;
}
.fx-stat-mid {
  bottom: 24%;
  left: 6%;
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 18px 40px rgba(0,0,0,.28),
    0 0 28px rgba(16,192,224,.10);
  border-color: rgba(16,192,224,.24);
  animation: fx-float 8.2s ease-in-out infinite;
}
.fx-stat-n {
  display: block;
  font-size: clamp(34px, 3.2vw, 42px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: #8fedfb;
}
.fx-stat-bottom .fx-stat-n { color: #8affc9; }
.fx-stat-left .fx-stat-n { color: #c3b6ff; }
.fx-stat-mid .fx-stat-n { color: #8fedfb; }
.fx-stat-t {
  display: block;
  margin-top: 8px;
  font-size: clamp(12px, 1.15vw, 14px);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(199, 211, 219, 0.88);
  line-height: 1.25;
}

.fx-assistant {
  position: absolute;
  left: auto;
  right: 0;
  top: 50%;
  bottom: auto;
  z-index: 3;
  width: 248px;
  padding: 16px 18px;
  border-radius: 18px;
  background:
    linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 42%, rgba(8,16,24,.28)),
    rgba(11, 23, 32, 0.42);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 18px 40px rgba(0,0,0,.28),
    0 0 28px rgba(16,192,224,.10);
  transform: translateY(-50%);
  animation: fx-float-mid 6.5s ease-in-out infinite;
  overflow: visible;
}
.fx-assistant-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.fx-assistant-badge {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, #10c0e0, #7b5cff);
  display: grid;
  place-items: center;
}
.fx-assistant-name {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}
.fx-assistant-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8affc9;
}
.fx-assistant-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #41d48c;
  animation: fx-dot 2s ease-in-out infinite;
}
.fx-assistant-body {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #c7d3db;
  min-height: 40px;
}
.fx-caret {
  display: inline-block;
  width: 7px;
  height: 15px;
  margin-left: 2px;
  background: #10c0e0;
  vertical-align: -2px;
  animation: fx-blink 1s step-end infinite;
}

.fx-values {
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid rgba(16,192,224,.2);
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
.fx-values h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: #fff;
}
.fx-values p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #93a2ac;
}
@media (min-width: 640px) {
  .fx-values { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .fx-values { grid-template-columns: repeat(4, 1fr); }
}

/* Tablet: keep all four hero stats visible with smaller type */
@media (max-width: 900px) {
  .fx-stat {
    padding: 12px 14px;
    border-radius: 14px;
    max-width: min(46%, 168px);
  }
  .fx-stat-n {
    font-size: clamp(22px, 4.2vw, 30px);
  }
  .fx-stat-t {
    margin-top: 5px;
    font-size: clamp(9px, 1.7vw, 11px);
    letter-spacing: .06em;
  }
  .fx-stat-top { top: 2%; right: 0; }
  .fx-stat-bottom { bottom: 5%; right: 0; }
  .fx-stat-left { top: 10%; left: 0; }
  .fx-stat-mid { bottom: 16%; left: 0; }
}

/* Phone: show left/mid stats (were hidden); tighten into corners */
@media (max-width: 620px) {
  .fx-scene {
    min-height: 460px;
    padding: 36px 8px 28px;
  }
  .fx-stat {
    padding: 9px 11px;
    border-radius: 12px;
    max-width: min(44%, 148px);
  }
  .fx-stat-n {
    font-size: clamp(18px, 5.2vw, 24px);
  }
  .fx-stat-t {
    margin-top: 3px;
    font-size: clamp(8px, 2.4vw, 10px);
    letter-spacing: .05em;
    line-height: 1.2;
  }
  .fx-stat-top { top: 0; right: 0; }
  .fx-stat-bottom { bottom: 2%; right: 0; }
  .fx-stat-left { top: 6%; left: 0; }
  .fx-stat-mid { bottom: 10%; left: 0; }
  .fx-assistant { width: min(248px, 86%); right: 2%; left: auto; top: 52%; }
}

@keyframes fx-grid { to { background-position: 0 46px; } }
@keyframes fx-orbit { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes fx-orbitrev { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@keyframes fx-ring {
  from { transform: rotateX(66deg) rotateZ(0); }
  to { transform: rotateX(66deg) rotateZ(360deg); }
}
@keyframes fx-core {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 55px rgba(16,192,224,.55), inset 0 0 42px rgba(255,255,255,.35);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 0 95px rgba(16,192,224,.85), inset 0 0 48px rgba(255,255,255,.5);
  }
}
@keyframes fx-halo {
  0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .95; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes fx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes fx-float2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes fx-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes fx-dot {
  0% { box-shadow: 0 0 0 0 rgba(16,192,224,.6); }
  70% { box-shadow: 0 0 0 9px rgba(16,192,224,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,192,224,0); }
}
@keyframes fx-blink { 50% { opacity: 0; } }
@keyframes fx-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  .fx-hero::before,
  .fx-hero-star,
  .fx-ring,
  .fx-halo,
  .fx-core,
  .fx-orbit,
  .fx-orbit > .fx-orbit-item,
  .fx-stat,
  .fx-assistant,
  .fx-hero-shimmer,
  .fx-caret,
  .fx-hero-live-dot,
  .fx-assistant-live i {
    animation: none !important;
  }
}

/* Legacy impact-dial retained but unused on home */
/* Legacy class hooks removed — keep selectors inert if old markup appears */
.engine, .engine-core, .seg { display: none !important; }

/* Value props under hero */
.value-row {
  display: grid;
  gap: 16px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(16, 192, 224, 0.15);
}
@media (min-width: 900px) {
  .value-row { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}
.value-item h3 {
  font-size: 18px; font-weight: 800; line-height: 1.3; margin: 0 0 8px; letter-spacing: -0.02em;
}
.value-item p {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); font-weight: 400;
}

/* Trust strip */
.trust {
  background: #fff;
  border-top: 1px solid var(--gray-01);
  border-bottom: 1px solid var(--gray-01);
  padding: 28px 0;
}
.trust-grid {
  display: grid;
  gap: 20px;
}
@media (min-width: 900px) {
  .trust-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}
.trust-item { display: flex; gap: 12px; align-items: flex-start; }
.trust-ico {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 8px;
  background: var(--brand-wash);
  color: var(--brand-deep);
  display: grid; place-items: center;
  font-weight: 800; font-size: 14px;
}
.trust-item .t {
  font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 2px;
}
.trust-item .s { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* Sections */
.section { padding: var(--section-y) 0; }
.section-soft { background: var(--surface); }
.section-head { margin-bottom: 22px; max-width: 46rem; }
.section-head .lead,
.section-head .lead-text { margin-bottom: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 20px; }

/* Funnel / comparison */
.funnel-grid {
  display: grid; gap: 40px; align-items: center;
}
@media (min-width: 960px) {
  .funnel-grid { grid-template-columns: 1fr 1.05fr; gap: 56px; }
}
.pillar-list { display: grid; gap: 16px; margin-top: 24px; }
.pillar-item { display: flex; gap: 12px; align-items: flex-start; }
.pillar-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.pillar-item strong { display: block; font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.pillar-item span { font-size: 14px; line-height: 1.5; color: var(--muted); }
.funnel { position: relative; min-height: 360px; }
.funnel-shape {
  position: relative; height: 320px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.funnel-band {
  color: #fff; font-weight: 800; font-size: 15px; letter-spacing: 0.04em;
  text-transform: uppercase; text-align: center;
  padding: 16px 12px; border-radius: 8px;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}
.funnel-band.b1 { background: var(--brand); width: 92%; }
.funnel-band.b2 { background: var(--purple); width: 72%; }
.funnel-band.b3 { background: var(--green); width: 52%; color: #0b1720; }
.callout {
  position: absolute;
  background: #fff;
  border: 1px solid var(--gray-01);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 10px 28px rgba(11,23,32,0.08);
  max-width: 180px;
}
.callout .num { font-size: 22px; font-weight: 800; color: var(--brand-deep); letter-spacing: -0.03em; }
.callout .txt { font-size: 12px; line-height: 1.35; color: var(--muted); margin-top: 2px; }
.callout.c1 { top: 8%; right: 0; }
.callout.c2 { top: 42%; left: 0; }
.callout.c3 { bottom: 6%; right: 8%; }

/* Split cards */
.split {
  display: grid; gap: 20px;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.soft-card, .partner-card {
  background: #fff;
  border: 1px solid var(--gray-01);
  border-radius: 8px;
  padding: 28px 26px;
}
.soft-card h3, .partner-card h3 { font-size: 22px; font-weight: 800; margin: 0 0 10px; }
.soft-card p, .partner-card p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.soft-card ul { margin: 0 0 18px; padding-left: 1.15rem; font-size: 15px; line-height: 1.7; color: var(--nav); }
.logos { display: flex; flex-wrap: wrap; gap: 8px; }
.logo-chip {
  border: 1px solid var(--gray-01);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.logo-chip:hover {
  color: var(--ink);
  border-color: var(--gray-02);
  transform: translateY(-1px);
}
.logo-chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.stack-panels {
  margin-top: 18px;
  min-height: 168px;
  border-top: 1px solid var(--gray-01);
  padding-top: 16px;
}
.stack-panel {
  display: none;
  animation: stackIn .28s ease;
}
.stack-panel.is-active { display: block; }
.stack-panel h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.35;
}
.stack-panel p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.stack-panel ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 14px;
  line-height: 1.65;
  color: var(--nav);
}
@keyframes stackIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Engine pillars / service matrix */
.engine-matrix {
  display: grid; gap: 16px;
}
@media (min-width: 900px) {
  .engine-matrix { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}
.engine-col {
  background: #fff;
  border: 1px solid var(--gray-01);
  border-radius: 8px;
  padding: 22px 18px;
  min-height: 240px;
}
.engine-col h3 {
  font-size: 18px; font-weight: 800; margin: 0 0 14px; letter-spacing: -0.02em;
}
.engine-col a {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--nav);
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-01);
}
.engine-col a:last-child { border-bottom: 0; }
.engine-col a:hover { color: var(--brand-deep); }

/* Results grid */
.grid3 { display: grid; gap: 20px; }
@media (min-width: 860px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .grid3 { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
@media (min-width: 1800px) { .grid3 { grid-template-columns: repeat(4, 1fr); gap: 28px; } }
/* Work page: always 3 columns so 6 cards = two neat rows */
.case-grid.grid3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .case-grid.grid3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .case-grid.grid3 { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.case-grid-status {
  text-align: center;
  margin-top: 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.case-card {
  display: block;
  background: #fff;
  border: 1px solid var(--gray-01);
  border-radius: 8px;
  overflow: hidden;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.case-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(11,23,32,0.1);
  color: inherit;
}
.case-card img { width: 100%; height: 168px; object-fit: cover; }
.case-card .pad { padding: 20px 18px 22px; }
.case-card .metric {
  font-size: 40px; font-weight: 800; letter-spacing: -0.04em;
  line-height: 1; color: var(--brand-deep); margin-bottom: 4px;
}
.case-card .metric-label { font-size: 13px; color: var(--muted); margin-bottom: 10px; font-weight: 500; }
.case-card strong { display: block; font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.case-card .meta { font-size: 13px; color: var(--muted); }

/* Testimonials */
.quote-grid {
  display: grid; gap: 16px;
}
@media (min-width: 900px) { .quote-grid { grid-template-columns: 1fr 1fr; } }
.quote {
  background: #fff;
  border: 1px solid var(--gray-01);
  border-radius: 8px;
  padding: 24px;
}
.quote p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
}
.quote cite {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

/* Team */
.team-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.team-card {
  border-radius: 8px; overflow: hidden; position: relative;
  aspect-ratio: 3/4; background: var(--gray-01);
}
.team-card img { width: 100%; height: 100%; object-fit: cover; }
.team-card .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px;
  background: linear-gradient(transparent, rgba(11,23,32,0.78));
  color: #fff; font-size: 13px; font-weight: 700;
}

/* Insights — WebFX colorful tiles */
.insight-grid {
  display: grid; gap: 16px;
}
@media (min-width: 860px) { .insight-grid { grid-template-columns: repeat(4, 1fr); } }
.insight {
  border-radius: 10px;
  padding: 26px 22px;
  min-height: 280px;
  display: flex; flex-direction: column;
  color: #fff;
  transition: transform .22s ease, box-shadow .22s ease;
}
.insight:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(11,23,32,0.14); color: #fff; }
.insight .ico {
  width: 40px; height: 40px; border-radius: 8px;
  background: rgba(255,255,255,0.2);
  display: grid; place-items: center;
  font-size: 18px; font-weight: 800; margin-bottom: 16px;
}
.insight h3 {
  margin: 0 0 10px; font-size: 20px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.25; color: inherit;
}
.insight p { margin: 0; font-size: 14px; line-height: 1.5; opacity: 0.92; font-weight: 400; }
.insight .more { margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 800; color: inherit; }
.insight.i1 { background: linear-gradient(160deg, #0a9bb8, #10c0e0); }
.insight.i2 { background: linear-gradient(160deg, #0b1720, #1a3a55); }
.insight.i3 { background: linear-gradient(160deg, #5b45d6, #7b5cff); }
.insight.i4 {
  background: #fff; color: var(--ink); border: 1px solid var(--gray-01); padding: 0; overflow: hidden;
}
.insight.i4:hover { color: var(--ink); }
.insight.i4 img { width: 100%; height: 132px; object-fit: cover; }
.insight.i4 .pad { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.insight.i4 h3 { color: var(--ink); font-size: 18px; }
.insight.i4 p { color: var(--muted); opacity: 1; }
.insight.i4 .more { color: var(--brand-deep); }

/* Blog hub / article — current Flexus card system */
.blog-hub-hero .blog-cat-filter,
.blog-cat-filter {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0 0;
  min-width: 0;
}
.blog-cat-filter-label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.blog-cat-filter-list {
  display: flex;
  align-items: center;
  gap: 4px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.blog-cat-filter-list::-webkit-scrollbar { display: none; }
.blog-cat-filter-list li { flex: 0 0 auto; }
.blog-cat-filter-link {
  display: inline-block;
  padding: 10px 0 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.blog-cat-filter-link:hover { color: var(--ink); }
.blog-cat-filter-link.is-active {
  color: var(--ink);
  font-weight: 800;
  border-bottom-color: var(--brand);
}
.blog-empty {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}
.blog-grid {
  display: grid;
  gap: 22px;
}
@media (min-width: 720px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
}
.blog-grid--related {
  margin-top: 20px;
}
@media (min-width: 1040px) {
  .blog-grid--related { grid-template-columns: repeat(3, 1fr); }
}
.blog-card {
  background: #fff;
  border: 1px solid var(--gray-01);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(11, 23, 32, 0.1);
}
.blog-card-anim {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.blog-card-anim.is-in {
  opacity: 1;
  transform: none;
}
.blog-card-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--brand-wash, #eef8fb);
}
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.blog-card:hover .blog-card-media img { transform: scale(1.04); }
.blog-card-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.blog-chip {
  display: inline-flex;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-deep);
  text-decoration: none;
}
.blog-card-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.blog-card-title a {
  color: var(--ink);
  text-decoration: none;
}
.blog-card-title a:hover { color: var(--brand-deep); }
.blog-card-excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: auto;
  padding-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.blog-article-meta { margin: 0 0 18px; }
.blog-article-cover {
  aspect-ratio: 16 / 8;
  max-height: 420px;
  border-radius: 12px;
  overflow: hidden;
}
.blog-prose {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}
.blog-prose h2,
.blog-prose h3 {
  margin-top: 1.6em;
  letter-spacing: -0.02em;
}
.blog-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 1.2em 0;
}
.blog-prose a { color: var(--brand-deep); }
.blog-related .section-head { margin-bottom: 8px; }
.blog-cta-panel {
  background: linear-gradient(145deg, #0b1720 0%, #163246 100%);
  color: #fff;
  border-radius: 14px;
  padding: clamp(28px, 4vw, 40px);
}
.blog-cta-panel .h3 { color: #fff; margin: 0 0 10px; }
.blog-cta-panel p {
  margin: 0 0 18px;
  color: rgba(255,255,255,0.82);
  max-width: 48ch;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .blog-cat-filter {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .blog-card-anim {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Process steps */
.steps { display: grid; gap: 12px; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  background: #fff; border: 1px solid var(--gray-01); border-radius: 8px; padding: 22px;
}
.step .n { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: var(--brand-deep); }
.step h3 { margin: 10px 0 8px; font-size: 18px; font-weight: 800; }
.step p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

/* Media band */
.media-band {
  position: relative;
  min-height: 360px;
  display: grid;
  place-items: end start;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.media-band::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,23,32,0.88), rgba(11,23,32,0.35));
}
.media-band .wrap { position: relative; z-index: 1; padding-block: 40px; }
.media-band h2 { color: #fff; margin: 0 0 12px; }
.media-band p { color: rgba(255,255,255,0.88); max-width: 34rem; font-size: 18px; line-height: 1.55; margin: 0; }

/* Proposal — professional split layout */
.proposal-pro {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(16,192,224,0.14), transparent 45%),
    linear-gradient(180deg, #f4fbfd 0%, #fff 55%);
  border-top: 1px solid var(--gray-01);
  padding: 56px 0 40px;
}
/* Get a Proposal: case studies grid below reviews carousel */
.proposal-cases {
  border-top: 0;
  padding-top: 48px;
}
.proposal-cases .section-head { margin-bottom: 28px; }
.proposal-cases .section-head .actions { margin-top: 14px; }
.proposal-shell {
  display: grid;
  gap: 28px;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--gray-01);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(11, 23, 32, 0.08);
}
@media (min-width: 960px) {
  .proposal-shell { grid-template-columns: 1.05fr 0.95fr; gap: 0; }
}
.proposal-copy {
  padding: 40px 32px;
  background:
    linear-gradient(165deg, rgba(16,192,224,0.1) 0%, transparent 42%),
    linear-gradient(180deg, #0b1720 0%, #123047 100%);
  color: #fff;
}
.proposal-copy .eyebrow { color: var(--brand); }
.proposal-copy .h2 { color: #fff; margin-bottom: 14px; }
.proposal-copy .lead-text {
  color: rgba(255,255,255,0.82);
  max-width: none;
  margin-bottom: 28px;
}
.proposal-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.proposal-trust li {
  padding-left: 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 14px;
}
.proposal-trust li:first-child { border-top: 0; padding-top: 0; }
.proposal-trust strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}
.proposal-trust span {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,0.7);
}
.proposal-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.proposal-contact a {
  color: #fff;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-decoration: none;
}
.proposal-contact a:hover { color: var(--brand); }

.proposal-form-card {
  padding: 36px 28px 32px;
  background: #fff;
}
@media (min-width: 960px) {
  .proposal-form-card { padding: 40px 36px 36px; }
}
.proposal-form-head { margin-bottom: 14px; }
.proposal-form-head h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.proposal-form-head p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}

/* 3-step compact appointment wizard */
.proposal-form--wizard { position: relative; }
.appt-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
}
.appt-steps li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 8px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(11, 23, 32, 0.04);
  border: 1px solid transparent;
}
.appt-steps li span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--gray-01);
}
.appt-steps li.is-active {
  color: var(--ink);
  border-color: rgba(16, 192, 224, 0.45);
  background: var(--brand-wash);
}
.appt-steps li.is-active span {
  background: var(--brand);
  border-color: var(--brand);
  color: #083040;
}
.appt-steps li.is-done { color: var(--brand-deep); }
.appt-wizard-body { min-height: 320px; }
.appt-step[hidden] { display: none !important; }
.appt-step-label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.proposal-services--compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  max-height: none;
  overflow: visible;
  padding: 0;
}
.proposal-services--compact .proposal-check {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 1 1 calc(50% - 4px);
  min-width: calc(50% - 4px);
  margin: 0;
  padding: 11px 12px;
  border: 1px solid rgba(11, 23, 32, 0.12);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(11, 23, 32, 0.03);
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.proposal-services--compact .proposal-check span {
  pointer-events: none;
}
.proposal-services--compact .proposal-check input {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  pointer-events: none;
}
.proposal-services--compact .proposal-check:hover {
  border-color: rgba(16, 192, 224, 0.55);
  background: rgba(16, 192, 224, 0.06);
  color: var(--brand-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(16, 192, 224, 0.12);
}
.proposal-services--compact .proposal-check:has(input:checked) {
  border-color: rgba(9, 137, 164, 0.55);
  background: linear-gradient(180deg, rgba(16, 192, 224, 0.18) 0%, rgba(16, 192, 224, 0.1) 100%);
  color: var(--brand-deep);
  box-shadow: 0 0 0 1px rgba(16, 192, 224, 0.25), 0 8px 18px rgba(16, 192, 224, 0.16);
}
.proposal-services--compact .proposal-check:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
@media (max-width: 520px) {
  .proposal-services--compact .proposal-check {
    flex: 1 1 100%;
    min-width: 100%;
  }
}
.proposal-form--wizard label .opt {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  font-size: 11px;
}
.appt-wizard-nav {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  align-items: stretch;
}
.appt-wizard-nav .appt-btn[hidden] {
  display: none !important;
}
.appt-btn {
  flex: 1 1 0;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(11, 23, 32, 0.04);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.appt-btn .appt-btn-ico {
  font-size: 14px;
  opacity: 0.85;
  line-height: 1;
}
.appt-btn-back {
  flex: 0 0 auto;
  min-width: 108px;
  background: #fff;
  color: var(--ink) !important;
  border: 1px solid rgba(11, 23, 32, 0.12);
  box-shadow: 0 6px 16px rgba(11, 23, 32, 0.04);
}
.appt-btn-back:hover {
  background: var(--surface);
  border-color: rgba(16, 192, 224, 0.45);
  color: var(--brand-deep) !important;
  box-shadow: 0 8px 20px rgba(16, 192, 224, 0.12);
  transform: translateY(-1px);
}
.appt-btn-next {
  background: linear-gradient(180deg, #14c8e8 0%, var(--brand) 55%, var(--brand-deep) 100%);
  color: #083040 !important;
  border: 1px solid rgba(8, 48, 64, 0.08);
  box-shadow: 0 10px 24px rgba(16, 192, 224, 0.28);
}
.appt-btn-next:hover {
  background: linear-gradient(180deg, #2fd0ec 0%, #12b8d6 55%, #0989a4 100%);
  color: #062430 !important;
  box-shadow: 0 12px 28px rgba(16, 192, 224, 0.36);
  transform: translateY(-1px);
}
.appt-btn-submit {
  background: linear-gradient(180deg, #243247 0%, var(--cta-dark) 60%, #101624 100%);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 24px rgba(11, 23, 32, 0.22);
}
.appt-btn-submit:hover {
  background: linear-gradient(180deg, #2c3b52 0%, #152033 60%, #0b101a 100%);
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(11, 23, 32, 0.28);
  transform: translateY(-1px);
}
.appt-btn-submit.is-loading,
.appt-btn-next.is-loading {
  opacity: 0.72;
  pointer-events: none;
  transform: none;
}
.appt-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.g-recaptcha--compact {
  transform: scale(0.92);
  transform-origin: left top;
  margin-top: 8px !important;
}
@media (max-width: 520px) {
  .appt-steps li { font-size: 11px; padding: 7px 4px; }
  .appt-steps li span { display: none; }
  .appt-wizard-body { min-height: 360px; }
  .appt-btn { font-size: 14px; min-height: 48px; padding: 0 14px; }
  .appt-btn-back { min-width: 92px; }
}

.proposal-form .form-row {
  display: grid;
  gap: 0 14px;
}
.proposal-form .form-row--stacked {
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 640px) {
  .proposal-form .form-row { grid-template-columns: 1fr 1fr; }
  .proposal-form .form-row--stacked { grid-template-columns: 1fr; }
}
.phone-field-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 6px;
}
.phone-field .phone-country {
  flex: 0 0 108px;
  width: 108px;
  min-width: 108px;
  margin-top: 0 !important;
  padding-left: 10px !important;
  padding-right: 28px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
}
.phone-field [data-phone-number] {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0 !important;
}
.phone-field.is-invalid-field .phone-country,
.phone-field.is-invalid-field [data-phone-number] {
  border-color: #d64545 !important;
}
.proposal-form label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.proposal-form input,
.proposal-form textarea,
.proposal-form .form-select {
  margin-top: 6px;
  width: 100%;
  padding: 13px 40px 13px 14px;
  border: 1px solid var(--gray-02);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23566A78' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  box-shadow: 0 1px 0 rgba(11, 23, 32, 0.03);
}
.proposal-form input,
.proposal-form textarea {
  padding-right: 14px;
  background-image: none;
}
.proposal-form input:focus,
.proposal-form textarea:focus,
.proposal-form .form-select:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(16, 192, 224, 0.18);
}
.proposal-form .form-select option {
  font-weight: 600;
  color: var(--ink);
}
.proposal-form .form-select option:disabled,
.proposal-form .form-select option[value=""] {
  color: var(--muted);
  font-weight: 500;
}
.proposal-submit {
  width: 100%;
  margin-top: 18px;
  min-height: 54px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: var(--brand) !important;
  color: #083040 !important;
}
.proposal-submit:hover {
  background: var(--brand-deep) !important;
  color: #fff !important;
}
.form-fineprint {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}

.proposal-fieldset {
  margin: 0 0 14px;
  padding: 14px 14px 10px;
  border: 1px solid rgba(11, 23, 32, 0.08);
  border-radius: 6px;
  background: rgba(255,255,255,0.55);
}
.proposal-fieldset legend {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.proposal-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  margin: 4px 0 6px;
}
@media (max-width: 520px) {
  .proposal-services { grid-template-columns: 1fr; }
}
.proposal-check {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ink);
  cursor: pointer;
}
.proposal-check input {
  width: auto !important;
  margin-top: 2px;
  accent-color: var(--brand-deep);
}
.form-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.form-charcount {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}
.proposal-form-error {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 4px;
  background: #fff1f1;
  border: 1px solid #f0c2c2;
  color: #8a1f1f;
  font-size: 13px;
}
.proposal-form input.is-invalid,
.proposal-form textarea.is-invalid,
.proposal-form .form-select.is-invalid {
  border-color: #d64545 !important;
  background-color: #fff7f7 !important;
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.16) !important;
}
.proposal-form label.is-invalid-field {
  color: #8a1f1f;
}
.proposal-services.is-invalid,
.proposal-services--compact.is-invalid {
  border-radius: 12px;
  padding: 8px;
  margin-left: -8px;
  margin-right: -8px;
  background: #fff7f7;
  box-shadow: inset 0 0 0 1.5px #d64545;
}
.fx-hp {
  position: absolute !important;
  left: -9999px !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.proposal-form .g-recaptcha {
  margin: 12px 0 4px;
  transform-origin: left top;
}
.fxcontact-form .g-recaptcha {
  margin: 14px 0 6px;
}
.math-captcha {
  margin: 12px 0 4px;
  padding: 0;
  border: 0;
  background: transparent;
}
.math-captcha-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}
.math-captcha-question {
  display: inline;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand-deep);
  white-space: nowrap;
}
.math-captcha-input {
  margin-top: 0 !important;
  width: 120px !important;
  max-width: 100%;
  flex: 0 0 auto;
}
.proposal-submit.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.appt-modal[hidden] { display: none !important; }
.appt-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 20px;
}
.appt-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 23, 32, 0.55);
  backdrop-filter: blur(4px);
}
.appt-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  background: #fff;
  border-radius: 12px;
  padding: 32px 28px 26px;
  box-shadow: 0 28px 80px rgba(11, 23, 32, 0.28);
  text-align: center;
  animation: apptModalIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes apptModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.appt-modal-x {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.appt-modal-icon { color: var(--brand-deep); margin: 0 auto 12px; }
.appt-modal-dialog h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.appt-modal-lead {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.appt-modal-meta {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  text-align: left;
  border: 1px solid var(--gray-01);
  border-radius: 8px;
  overflow: hidden;
}
.appt-modal-meta:empty { display: none; }
.appt-modal-meta li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  font-size: 13px;
  border-top: 1px solid var(--gray-01);
}
.appt-modal-meta li:first-child { border-top: 0; }
.appt-modal-meta strong { color: var(--muted); font-weight: 600; }
.appt-modal-meta span { color: var(--ink); font-weight: 700; text-align: right; }
.appt-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}
body.appt-modal-open { overflow: hidden; }

.proposal { background: linear-gradient(180deg, var(--brand-wash) 0%, #fff 100%); border-top: 1px solid var(--gray-01); }
.proposal-box {
  background: #fff;
  border: 1px solid var(--gray-01);
  border-radius: 10px;
  padding: 40px 28px;
  box-shadow: 0 16px 40px rgba(11,23,32,0.06);
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.proposal-box .lead { margin-left: auto; margin-right: auto; }
.culture {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 40px;
}
.culture img { width: 100%; height: 132px; object-fit: cover; border-radius: 6px; }
@media (max-width: 700px) {
  .culture { grid-template-columns: repeat(3, 1fr); }
  .culture img:nth-child(n+4) { display: none; }
}

/* Forms */
.lead-form { text-align: left; }
.lead-form label {
  display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin: 12px 0 6px;
}
.lead-form input, .lead-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--gray-02);
  border-radius: var(--radius);
  font: inherit;
  font-size: 16px;
  background: #fff;
  color: var(--nav);
}
.lead-form input:focus, .lead-form textarea:focus {
  outline: 2px solid rgba(16,192,224,0.35);
  border-color: var(--brand);
}
.form-panel {
  background: #fff;
  border: 1px solid var(--gray-01);
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 12px 32px rgba(11,23,32,0.06);
}
.contact-shell { display: grid; gap: 28px; }
@media (min-width: 900px) { .contact-shell { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Inner pages */
.page-hero {
  background: linear-gradient(180deg, var(--brand-wash) 0%, #fff 70%);
  padding: 40px 0 28px;
}
.page-hero h1 { max-width: 20ch; }
.page-hero-media {
  margin-top: 18px;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 21/9;
  background: var(--gray-01);
}
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.page-hero-media:hover img { transform: scale(1.04) !important; }
.svc-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.svc-card {
  display: block;
  padding: 20px;
  border: 1px solid var(--gray-01);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  transition: transform .2s ease, border-color .2s, box-shadow .2s;
}
.svc-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 12px 28px rgba(11,23,32,0.08);
  color: inherit;
}
.svc-card strong { display: block; font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.svc-card span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.prose { font-size: 17px; line-height: 1.7; color: var(--ink); }
.prose a { font-weight: 600; }
.prose p { margin: 0 0 1.1em; color: #374046; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 700; }
.ma-page .ai-goal-grid .ai-goal { cursor: default; }
.ma-page .ai-goal-grid .ai-goal:hover { transform: none; box-shadow: none; }
.faq-item { border-bottom: 1px solid var(--gray-01); padding: 14px 0; }
.faq-item summary { cursor: pointer; font-weight: 700; font-size: 17px; color: var(--ink); }
.faq-item p { color: var(--muted); margin: 8px 0 0; font-size: 15px; line-height: 1.55; }
.metric-hero { display: flex; gap: 16px; align-items: baseline; margin: 12px 0 24px; }
.metric-hero .metric {
  font-size: clamp(42px, 6vw, 64px); font-weight: 800; color: var(--brand-deep); letter-spacing: -0.04em;
}
.metric-hero .metric-label { font-size: 16px; color: var(--muted); font-weight: 600; }

.case-detail-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 800;
  color: var(--brand-deep);
  margin: 0 0 10px;
}
.case-detail-client {
  margin: -4px 0 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.case-detail .wrap.case-detail-body {
  max-width: min(920px, 100%);
}
.case-prose .case-locale {
  font-size: 14px;
  color: var(--muted);
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--brand-wash);
  border: 1px solid rgba(16, 192, 224, 0.2);
}
.case-snap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 28px;
}
@media (min-width: 720px) {
  .case-snap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.case-snap-item {
  border-radius: 14px;
  padding: 14px 14px 12px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(11, 23, 32, 0.04);
}
.case-snap-item strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--brand-deep);
  line-height: 1.1;
  margin-bottom: 4px;
}
.case-snap-item span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}
.case-prose h2 {
  margin: 1.75em 0 0.55em;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.03em;
}
.case-prose h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.case-points {
  margin: 0 0 1.2em;
  padding-left: 1.2em;
  color: #374046;
}
.case-points li { margin: 0.4em 0; }
.case-points-results li::marker { color: var(--brand-deep); }
.case-phases {
  display: grid;
  gap: 14px;
  margin: 18px 0 8px;
}
.case-phase {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, #fff 0%, #f7fbfc 100%);
}
.case-phase-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.case-phase-n {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--brand-deep);
}
.case-phase-meta {
  margin: 4px 0 0 !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  font-weight: 600;
}
.case-phase > p:last-child { margin-bottom: 0; }

.case-team-table {
  overflow-x: auto;
  margin: 14px 0 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.case-team-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.case-team-table th,
.case-team-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.case-team-table th {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: #f7fbfc;
}
.case-team-table tr:last-child td { border-bottom: 0; }
.case-team-table td:last-child {
  font-weight: 800;
  color: var(--brand-deep);
  white-space: nowrap;
}
.case-team-total {
  font-size: 15px;
  color: var(--ink);
}
.case-prose ul {
  margin: 0 0 1.2em;
  padding-left: 1.2em;
  color: #374046;
}
.case-prose li { margin: 0.35em 0; }
.case-prose blockquote {
  margin: 1.6em 0 0;
  padding: 18px 20px;
  border-left: 3px solid var(--brand);
  background: #f7fbfc;
  border-radius: 0 12px 12px 0;
}
.case-prose blockquote p { margin: 0 0 8px; font-weight: 600; color: var(--ink); }
.case-prose blockquote cite {
  display: block;
  font-size: 13px;
  font-style: normal;
  color: var(--muted);
  font-weight: 600;
}

/* Footer — dense mega layout, Flexus treatment (not a WebFX clone) */
.footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(16, 192, 224, 0.16), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 20%, rgba(16, 192, 224, 0.08), transparent 50%),
    linear-gradient(180deg, #071018 0%, #0b1720 48%, #08131b 100%);
  color: rgba(255, 255, 255, 0.78);
  padding: 52px 0 22px;
}
.footer-glow {
  position: absolute;
  inset: auto -10% 40% auto;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 192, 224, 0.12), transparent 68%);
  pointer-events: none;
}
.footer .wrap { position: relative; z-index: 1; }
.footer a { color: rgba(255, 255, 255, 0.78); font-size: 14px; font-weight: 500; }
.footer a:hover { color: var(--brand); }

.footer-proof {
  display: grid;
  gap: 22px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 980px) {
  .footer-proof {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr);
    align-items: stretch;
    gap: 28px;
  }
}
.footer-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
@media (min-width: 720px) {
  .footer-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}
.footer-stat {
  padding: 14px 12px 12px 0;
  border-top: 2px solid rgba(16, 192, 224, 0.55);
}
.footer-stat strong {
  display: block;
  color: #fff;
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 6px;
}
.footer-stat span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.35;
  max-width: 16ch;
}

.footer-cta-card {
  border-radius: 18px;
  padding: 22px 22px 20px;
  background:
    linear-gradient(145deg, rgba(16, 192, 224, 0.22) 0%, rgba(10, 155, 184, 0.12) 42%, rgba(255, 255, 255, 0.04) 100%),
    rgba(8, 24, 34, 0.85);
  border: 1px solid rgba(16, 192, 224, 0.35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.footer-cta-card h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.footer-cta-card p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}
.footer-cta-form {
  display: grid;
  gap: 10px;
}
@media (min-width: 520px) {
  .footer-cta-form {
    grid-template-columns: 1fr auto;
    align-items: stretch;
  }
}
.footer-cta-form input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
}
.footer-cta-form input::placeholder { color: rgba(11, 23, 32, 0.45); }
.footer-cta-form input:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.footer-cta-form .btn {
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  padding-inline: 16px;
}

.footer-main {
  display: grid;
  gap: 32px;
}
@media (min-width: 980px) {
  .footer-main {
    grid-template-columns: minmax(220px, 0.95fr) minmax(0, 2.2fr);
    gap: 40px;
    align-items: start;
  }
}
.footer-logo-link { display: inline-block; margin-bottom: 12px; }
.footer-logo-link .brand-logo {
  max-height: clamp(32px, 5vw, 48px);
  max-width: min(220px, 70vw);
  height: auto;
  width: auto;
}
.footer-tagline {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  max-width: 34ch;
}
.footer-speak {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.footer-phone-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff;
  color: var(--ink) !important;
  text-decoration: none !important;
  margin-bottom: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.footer-phone-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(16, 192, 224, 0.22);
  color: var(--ink) !important;
}
.footer-phone-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.footer-phone-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.1;
}
.footer-contact-mini {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}
.footer-contact-mini a { font-size: 13px; }

/* Mobile: multi-column flow packs sections tightly (avoids empty row gaps
   when a short column sits beside a taller neighbor in CSS Grid). */
.footer-links {
  display: block;
  columns: 2;
  column-gap: 18px;
}
.footer-links > div {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 22px;
}
@media (min-width: 720px) {
  .footer-links {
    display: grid;
    columns: auto;
    column-gap: normal;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 18px;
    align-items: start;
  }
  .footer-links > div { margin: 0; }
}
@media (min-width: 1100px) {
  .footer-links { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 14px; }
}
.footer h4 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.footer ul a {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}
.footer ul a:hover { color: var(--brand); }

.footer-bottom {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.footer-bottom-left {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}
.footer-since {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(16, 192, 224, 0.35);
  color: var(--brand);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-bottom-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-legal a { font-size: 12px; color: rgba(255, 255, 255, 0.62); }
.footer-social {
  display: flex;
  gap: 8px;
}
.footer-social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-transform: lowercase;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.footer-social a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ===== Scroll FX — distinctive per-section entrances ===== */
.reveal,
[data-fx-item],
[data-fx] > .wrap > *:not(.home-stats-grid):not(script),
.fx-ready [data-fx-child] {
  will-change: transform, opacity, filter, clip-path;
}

.reveal:not(.show):not(.is-in),
[data-fx-item]:not(.is-in) {
  opacity: 0;
}

/* Default rise (back-compat .reveal) — readable, smooth */
.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.99);
  filter: blur(4px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--fx-i, 0) * 60ms);
}
.reveal.show,
.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Section stage */
[data-fx] {
  --fx-dur: 1.05s;
  --fx-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
[data-fx] .section-head,
[data-fx] > .wrap > .reveal,
[data-fx-child] {
  transition:
    opacity var(--fx-dur) var(--fx-ease),
    transform var(--fx-dur) var(--fx-ease),
    filter var(--fx-dur) var(--fx-ease),
    clip-path var(--fx-dur) var(--fx-ease);
  transition-delay: calc(var(--fx-i, 0) * 80ms);
}

/* --- wipe: diagonal clip --- */
[data-fx="wipe"] .section-head,
[data-fx="wipe"] [data-fx-child],
[data-fx-item][data-fx-kind="wipe"] {
  opacity: 0;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transform: translate3d(-18px, 0, 0);
}
[data-fx="wipe"].is-in .section-head,
[data-fx="wipe"].is-in [data-fx-child],
[data-fx-item][data-fx-kind="wipe"].is-in {
  opacity: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform: none;
}

/* --- blur: soft focus snap --- */
[data-fx="blur"] .section-head,
[data-fx="blur"] [data-fx-child],
[data-fx-item][data-fx-kind="blur"] {
  opacity: 0;
  filter: blur(8px) saturate(0.75);
  transform: translate3d(0, 28px, 0) scale(1.02);
}
[data-fx="blur"].is-in .section-head,
[data-fx="blur"].is-in [data-fx-child],
[data-fx-item][data-fx-kind="blur"].is-in {
  opacity: 1;
  filter: none;
  transform: none;
}

/* --- flip: 3D card pitch --- */
[data-fx="flip"] {
  perspective: 1200px;
}
[data-fx="flip"] .section-head,
[data-fx="flip"] [data-fx-child],
[data-fx-item][data-fx-kind="flip"] {
  opacity: 0;
  transform: rotateX(18deg) translate3d(0, 40px, -40px);
  transform-origin: 50% 100%;
}
[data-fx="flip"].is-in .section-head,
[data-fx="flip"].is-in [data-fx-child],
[data-fx-item][data-fx-kind="flip"].is-in {
  opacity: 1;
  transform: none;
}

/* --- skew: editorial slide --- */
[data-fx="skew"] .section-head,
[data-fx="skew"] [data-fx-child],
[data-fx-item][data-fx-kind="skew"] {
  opacity: 0;
  transform: translate3d(0, 48px, 0) skewY(3deg);
  filter: blur(4px);
}
[data-fx="skew"].is-in .section-head,
[data-fx="skew"].is-in [data-fx-child],
[data-fx-item][data-fx-kind="skew"].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --- zoom: punch in --- */
[data-fx="zoom"] .section-head,
[data-fx="zoom"] [data-fx-child],
[data-fx-item][data-fx-kind="zoom"] {
  opacity: 0;
  transform: scale(0.88);
  filter: blur(8px);
}
[data-fx="zoom"].is-in .section-head,
[data-fx="zoom"].is-in [data-fx-child],
[data-fx-item][data-fx-kind="zoom"].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --- split: left/right meet --- */
/* Clip pre-in transforms/scales so off-screen FX items don't expand page scrollWidth */
[data-fx="split"],
[data-fx="blur"],
[data-fx="zoom"],
[data-fx="pop"],
[data-fx="wipe"],
[data-fx="cascade"],
[data-fx="mask"],
[data-fx="glow"],
[data-fx="skew"],
[data-fx="flip"] {
  overflow-x: clip;
}
[data-fx="split"] [data-fx-child]:nth-child(odd),
[data-fx-item][data-fx-kind="split-l"] {
  opacity: 0;
  transform: translate3d(-56px, 24px, 0) rotate(-1.5deg);
}
[data-fx="split"] [data-fx-child]:nth-child(even),
[data-fx-item][data-fx-kind="split-r"] {
  opacity: 0;
  transform: translate3d(56px, 24px, 0) rotate(1.5deg);
}
[data-fx="split"] .section-head {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  filter: blur(6px);
}
[data-fx="split"].is-in [data-fx-child],
[data-fx="split"].is-in .section-head,
[data-fx-item][data-fx-kind="split-l"].is-in,
[data-fx-item][data-fx-kind="split-r"].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --- pop: springy bounce for stats/cards --- */
[data-fx="pop"] [data-fx-child],
[data-fx-item][data-fx-kind="pop"] {
  opacity: 0;
  transform: translate3d(0, 40px, 0) scale(0.82);
}
[data-fx="pop"].is-in [data-fx-child],
[data-fx-item][data-fx-kind="pop"].is-in {
  opacity: 1;
  transform: none;
  transition-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1);
}

/* --- cascade: stacked deck fan --- */
[data-fx="cascade"] [data-fx-child],
[data-fx-item][data-fx-kind="cascade"] {
  opacity: 0;
  transform: translate3d(0, 60px, 0) rotate(calc((var(--fx-i, 0) - 2) * 1.2deg)) scale(0.94);
  transform-origin: 50% 120%;
}
[data-fx="cascade"].is-in [data-fx-child],
[data-fx-item][data-fx-kind="cascade"].is-in {
  opacity: 1;
  transform: none;
}

/* --- mask: vertical iris --- */
[data-fx="mask"] .section-head,
[data-fx="mask"] [data-fx-child],
[data-fx-item][data-fx-kind="mask"] {
  opacity: 0;
  clip-path: inset(40% 0 40% 0 round 12px);
  transform: scale(1.06);
  filter: blur(4px);
}
[data-fx="mask"].is-in .section-head,
[data-fx="mask"].is-in [data-fx-child],
[data-fx-item][data-fx-kind="mask"].is-in {
  opacity: 1;
  clip-path: inset(0 0 0 0 round 0);
  transform: none;
  filter: none;
}

/* --- glow: brand wash settle --- */
[data-fx="glow"] .section-head,
[data-fx="glow"] [data-fx-child],
[data-fx-item][data-fx-kind="glow"] {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  filter: drop-shadow(0 0 0 transparent);
}
[data-fx="glow"].is-in .section-head,
[data-fx="glow"].is-in [data-fx-child],
[data-fx-item][data-fx-kind="glow"].is-in {
  opacity: 1;
  transform: none;
  animation: fxGlowPulse 1.1s var(--fx-ease) both;
}
@keyframes fxGlowPulse {
  0% { filter: drop-shadow(0 0 0 rgba(16,192,224,0)); }
  40% { filter: drop-shadow(0 12px 28px rgba(16,192,224,0.28)); }
  100% { filter: drop-shadow(0 0 0 rgba(16,192,224,0)); }
}

/* Hero: cinematic load (no blank first paint) */
.hero .reveal,
.home-hero .reveal,
.hero [data-fx-item],
.home-hero [data-fx-item] {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: none;
}
.home-hero.is-in .hero-grid > div:first-child {
  animation: fxHeroCopy 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.home-hero.is-in .engine-wrap {
  animation: fxHeroEngine 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}
.home-hero.is-in .value-item {
  animation: fxPopIn 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: calc(0.35s + var(--fx-i, 0) * 0.08s);
}
@keyframes fxHeroCopy {
  from { opacity: 0; transform: translate3d(-28px, 18px, 0); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes fxHeroEngine {
  from { opacity: 0; transform: translate3d(36px, 0, 0) scale(0.9) rotate(-4deg); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes fxPopIn {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.92); }
  to { opacity: 1; transform: none; }
}

/* Soft parallax hooks (JS sets --fx-py) — only after section is in */
[data-fx].is-in [data-fx-parallax],
.is-in[data-fx-parallax] {
  transform: translate3d(0, calc(var(--fx-py, 0) * 1px), 0);
  transition: transform 0.12s linear;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  [data-fx] .section-head,
  [data-fx] [data-fx-child],
  [data-fx-item],
  .home-hero.is-in .hero-grid > div:first-child,
  .home-hero.is-in .engine-wrap,
  .home-hero.is-in .value-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
  [data-fx-parallax] { transform: none !important; }
  .page-hero-media img,
  .fxabout-mosaic-item img,
  .section-media-row > .section-media-image img,
  .section-media-full .section-media-image img {
    transition: none !important;
    transform: none !important;
  }
  .page-hero-media:hover img,
  .fxabout-mosaic-item:hover img,
  .section-media-row > .section-media-image:hover img,
  .section-media-full .section-media-image:hover img {
    transform: none !important;
  }
}

.flash { padding: 12px 14px; border-radius: 6px; margin-bottom: 12px; background: #e9f7f0; color: #0e9251; font-size: 14px; }
.flash-error { background: #fdecea; color: #9b1c1c; }

/* Shared buttons (used on public pages AND in the admin panel — see admin.css
   for admin-only layout/shell/component styling) */
.btn-primary { background: var(--brand); color: #083040; font-weight: 700; padding: 0.55rem 1rem; border-radius: 6px; border: 0; }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); padding: 0.55rem 1rem; border-radius: 6px; }
.btn-danger { background: #c0392b; color: #fff; padding: 0.55rem 1rem; border-radius: 6px; border: 0; }
.btn-outline { background: transparent; border: 2px solid var(--ink); color: var(--ink); padding: 0.55rem 1rem; border-radius: 6px; font-weight: 700; }
.btn-outline:hover { background: var(--ink); color: #fff !important; }

/* CMS section color accents (page_sections.section_color) — background wash +
   left accent bar only; heading color/weight is never overridden (locked). */
.section-tint-teal { background: #eafaf7; border-left: 4px solid #14b8a6; }
.section-tint-purple { background: #f5f0fd; border-left: 4px solid #a855f7; }
.section-tint-cyan { background: #eafcff; border-left: 4px solid #06b6d4; }
.section-tint-orange { background: #fff4ea; border-left: 4px solid #f97316; }
.section-tint-blue { background: #eef4ff; border-left: 4px solid #3b82f6; }
.section-tint-green { background: #eefaf0; border-left: 4px solid #22c55e; }
.section-tint-teal, .section-tint-purple, .section-tint-cyan,
.section-tint-orange, .section-tint-blue, .section-tint-green { padding-left: 1rem; }

/* CMS rich-text section image layouts (page_sections.layout_type) */
.section-media-row { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.section-media-row.layout-image-right-text-left { flex-direction: row-reverse; }
.section-media-row > .section-media-text { flex: 1 1 320px; }
.section-media-row > .section-media-image { flex: 1 1 320px; }
.section-media-row > .section-media-image { border-radius: 12px; overflow: hidden; }
.section-media-row > .section-media-image img { width: 100%; height: auto; border-radius: 12px; display: block; transition: transform 0.5s ease; }
.section-media-row > .section-media-image:hover img { transform: scale(1.04) !important; }
.section-media-full .section-media-image { border-radius: 12px; overflow: hidden; margin-bottom: 1.5rem; }
.section-media-full .section-media-image img { width: 100%; height: auto; border-radius: 12px; display: block; margin-bottom: 0; transition: transform 0.5s ease; }
.section-media-full .section-media-image:hover img { transform: scale(1.04) !important; }
.section-media-split > .section-media-text, .section-media-split > .section-media-image { flex: 1 1 50%; }

/* ===== Dedicated service hub polish (website-design / AI) ===== */
.ai-tile-photo {
  padding: 0 !important;
  overflow: hidden;
  position: relative;
}
.ai-tile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 140px;
}
.hub-photo-mosaic {
  padding: 0 0 28px;
  background: linear-gradient(180deg, #fff 0%, rgba(16, 192, 224, 0.04) 100%);
}
.hub-photo-mosaic-track {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .hub-photo-mosaic-track { grid-template-columns: repeat(3, 1fr); }
}
.hub-photo-mosaic-item {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  box-shadow: 0 10px 28px rgba(11, 23, 32, 0.08);
}
.hub-photo-mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ai-page .hub-split .ma-split { margin-top: 8px; }
.ai-page .ai-hero-note a {
  color: var(--brand-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ai-page .fxsvc-related { padding-top: 48px; }
.ai-page .fxsvc-related .section-head { margin-bottom: 22px; }

/* ===== AI SOLUTIONS PAGE ===== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* overflow must stay visible so hub .fxabout-subnav can position:sticky */
.ai-page { overflow: visible; }
.ai-hero {
  position: relative;
  padding: 36px 0 40px;
  background:
    radial-gradient(ellipse 80% 60% at 85% 10%, rgba(16,192,224,0.18), transparent 55%),
    linear-gradient(180deg, var(--brand-wash) 0%, #fff 70%);
}
.ai-hero::after {
  content: "";
  position: absolute; inset: auto 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gray-01), transparent);
}
.ai-hero-grid {
  display: grid; gap: 36px; align-items: center;
}
@media (min-width: 980px) {
  .ai-hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 48px; }
}
.ai-hero h1 {
  font-size: clamp(40px, 5.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 20ch;
}
.ai-hero .lead-text { max-width: 52ch; margin-bottom: 16px; }
.ai-hero .lead-text a { text-decoration: underline; text-underline-offset: 3px; }
.ai-hero-form {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 540px;
  border: 1px solid var(--gray-02);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(11, 23, 32, 0.06);
}
.ai-hero-form input {
  flex: 1 1 180px;
  min-width: 0;
  width: auto;
  border: 0;
  border-radius: 0;
  padding: 16px 18px;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}
.ai-hero-form input::placeholder { color: #9aa4ad; }
.ai-hero-form input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}
.ai-hero-form .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 0;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 700;
  transform: none;
}
.ai-hero-form .btn:hover { transform: none; }
.ai-hero-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.ai-hero-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  animation: aiMosaicIn .7s ease both;
}
@keyframes aiMosaicIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.ai-tile {
  border-radius: 10px;
  padding: 18px 16px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.ai-tile strong {
  font-size: clamp(36px, 4vw, 48px);
  letter-spacing: -0.04em;
  line-height: 1;
  font-weight: 800;
}
.ai-tile > span:last-child { font-size: 13px; line-height: 1.4; font-weight: 500; }
.ai-tile-kicker {
  position: absolute; top: 14px; left: 16px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.75;
}
.ai-tile-dark { background: var(--cta-dark); color: #fff; }
.ai-tile-brand { background: var(--brand); color: #083040; }
.ai-tile-visual {
  background: linear-gradient(145deg, #0b1720, #13485a);
  color: #fff;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ai-orb {
  width: 72px; height: 72px; border-radius: 50%;
  margin-bottom: 10px;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 18%, transparent 19%),
    conic-gradient(from 200deg, var(--brand), #7bd7ea, var(--purple), var(--brand));
  box-shadow: 0 0 0 8px rgba(16,192,224,0.15);
  animation: aiOrbSpin 12s linear infinite;
}
@keyframes aiOrbSpin { to { transform: rotate(360deg); } }
.ai-tile-stack {
  background: #e7f7fb;
  border: 1px solid #c5eaf2;
  color: var(--ink);
}
.ai-tile-stack ul {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.ai-tile-stack li {
  font-size: 13px; font-weight: 700;
  background: #fff; border-radius: 6px; padding: 8px 10px;
  border: 1px solid #d7eef4;
}

.ai-goal-grid {
  display: grid; gap: 16px; margin-top: 28px;
}
@media (min-width: 860px) {
  .ai-goal-grid { grid-template-columns: repeat(4, 1fr); }
}
.ai-goal {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 18px 18px;
  border-top: 3px solid var(--brand);
  background: #fff;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ai-goal:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(11,23,32,0.08);
  color: inherit;
}
.ai-goal h3 {
  margin: 0; font-size: 18px; letter-spacing: -0.02em; color: var(--ink);
}
.ai-goal p { margin: 0; flex: 1; font-size: 14px; color: var(--muted); line-height: 1.5; }
.ai-goal-link {
  font-size: 13px; font-weight: 800; color: var(--brand-deep);
}

.ai-tabs { margin-top: 28px; }
.ai-tablist {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 18px;
}
.ai-tab {
  border: 1px solid var(--gray-01);
  background: #fff;
  color: var(--nav);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ai-tab:hover { border-color: var(--brand); color: var(--brand-deep); }
.ai-tab.is-active {
  background: var(--cta-dark);
  border-color: var(--cta-dark);
  color: #fff;
}
.ai-panel {
  background: #fff;
  border: 1px solid var(--gray-01);
  border-radius: 10px;
  padding: 28px 24px;
  animation: aiPanelIn .35s ease;
}
@keyframes aiPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.ai-panel-inner h3 {
  margin: 0 0 10px;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.025em;
  color: var(--ink);
}
.ai-panel-inner p { margin: 0 0 16px; color: var(--muted); max-width: 68ch; }
.ai-panel-inner ul {
  margin: 0 0 22px; padding: 0 0 0 1.1rem;
  display: grid; gap: 10px;
}
@media (min-width: 860px) {
  .ai-panel-inner ul { grid-template-columns: 1fr 1fr; gap: 12px 28px; }
}
.ai-panel-inner li { color: var(--nav); font-size: 15px; line-height: 1.45; }

.ai-benefit-grid {
  display: grid; gap: 18px; margin-top: 28px;
}
@media (min-width: 860px) {
  .ai-benefit-grid { grid-template-columns: repeat(4, 1fr); }
}
.ai-benefit {
  padding: 8px 4px 0;
  border: 0;
  background: transparent;
}
.ai-benefit-num {
  display: block;
  font-size: 13px; font-weight: 800; letter-spacing: 0.12em;
  color: var(--brand-deep); margin-bottom: 12px;
}
.ai-benefit h3 {
  margin: 0 0 10px; font-size: 20px; letter-spacing: -0.02em; color: var(--ink);
}
.ai-benefit p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

.ai-video-grid {
  display: grid; gap: 20px; margin-top: 28px;
}
@media (min-width: 860px) {
  .ai-video-grid { grid-template-columns: repeat(3, 1fr); }
}
.ai-video { margin: 0; }
.ai-video-thumb {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  border-radius: 10px; overflow: hidden; cursor: pointer; background: #0b1720;
  aspect-ratio: 16 / 9;
}
.ai-video-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s ease, opacity .3s ease;
  opacity: 0.92;
}
.ai-video-thumb:hover img { transform: scale(1.04); opacity: 1; }
.ai-video.is-playing .ai-video-thumb { pointer-events: none; }
.ai-video iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.ai-play {
  position: absolute; inset: 50% auto auto 50%;
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 10px 28px rgba(11,23,32,0.28);
  transition: transform .2s ease;
}
.ai-video-thumb:hover .ai-play { transform: scale(1.06); }
.ai-play::before {
  content: "";
  position: absolute; left: 23px; top: 18px;
  border-style: solid;
  border-width: 11px 0 11px 16px;
  border-color: transparent transparent transparent #083040;
}
.ai-video.is-playing .ai-play { display: none; }
.ai-video figcaption { padding: 14px 2px 0; }
.ai-video h3 {
  margin: 0 0 6px; font-size: 17px; letter-spacing: -0.02em; color: var(--ink);
}
.ai-video p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

.ai-steps {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; gap: 18px;
}
@media (min-width: 860px) {
  .ai-steps { grid-template-columns: repeat(4, 1fr); gap: 22px; }
}
.ai-step {
  position: relative;
  padding: 20px 0 0;
  border-top: 2px solid var(--brand);
}
.ai-step-n {
  display: block;
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--brand-deep); margin-bottom: 10px;
}
.ai-step h3 { margin: 0 0 8px; font-size: 20px; color: var(--ink); }
.ai-step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.ai-cta {
  padding: 56px 0;
  background:
    linear-gradient(120deg, rgba(16,192,224,0.16), transparent 45%),
    var(--cta-dark);
  color: #fff;
}
.ai-cta-inner {
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: center; justify-content: space-between;
}
.ai-cta h2 {
  margin: 0 0 10px;
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: -0.03em;
  color: #fff;
}
.ai-cta p { margin: 0; max-width: 48ch; color: rgba(255,255,255,0.78); }
.ai-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ai-cta .btn-link { color: #fff; }
.ai-cta .btn-link:hover { color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .ai-orb, .ai-hero-mosaic, .ai-panel { animation: none !important; }
}

/* ===== Mobile apps: visual sections ===== */
.ma-split {
  display: grid;
  gap: 28px;
  align-items: start;
}
@media (min-width: 900px) {
  .ma-split { grid-template-columns: 0.95fr 1.05fr; gap: 48px; align-items: stretch; }
}
.ma-split-media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 0;
  box-shadow: 0 20px 40px rgba(11,23,32,0.1);
}
.ma-split-media img {
  width: 100%; height: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s ease;
}
@media (min-width: 900px) {
  /* Image fills the text column height — no forced tall min-height */
  .ma-split-media {
    align-self: stretch;
    min-height: 0;
  }
  .ma-split-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    min-height: 0;
    transform: none !important;
  }
}
@media (max-width: 899px) {
  .ma-split-media img {
    position: static;
    min-height: 220px;
  }
}
.ma-split:hover .ma-split-media img { transform: scale(1.04); }
.ma-split-caption {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  padding: 14px 16px;
  background: rgba(11,23,32,0.82);
  color: #fff;
  border-radius: 8px;
  backdrop-filter: blur(6px);
  z-index: 1;
}
.ma-split-caption strong { display: block; font-size: 16px; margin-bottom: 2px; }
.ma-split-caption span { font-size: 13px; opacity: 0.8; }
.ma-pillar-grid {
  display: grid; gap: 14px; margin-top: 22px;
}
@media (min-width: 640px) {
  .ma-pillar-grid { grid-template-columns: 1fr 1fr; }
}
.ma-pillar {
  padding: 16px 14px;
  border-top: 2px solid var(--brand);
  background: #fff;
}
.ma-pillar-n {
  display: block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--brand-deep); margin-bottom: 8px;
}
.ma-pillar h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); }
.ma-pillar p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.45; }

.ma-compare-head { margin-bottom: 18px; }
.ma-compare-head h3 {
  margin: 0 0 6px; font-size: 22px; letter-spacing: -0.02em; color: var(--ink);
}
.ma-compare-head p { margin: 0; color: var(--muted); font-size: 15px; }
.ma-compare-grid {
  display: grid; gap: 14px;
}
@media (min-width: 760px) {
  .ma-compare-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .ma-compare-grid { grid-template-columns: repeat(3, 1fr); }
}
.ma-compare-card {
  display: flex; flex-direction: column;
  text-align: left;
  border: 1px solid var(--gray-01);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ma-compare-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(11,23,32,0.08);
  border-color: #c5eaf2;
}
.ma-compare-card.is-open {
  border-color: var(--brand);
  box-shadow: 0 16px 36px rgba(16,192,224,0.15);
}
.ma-compare-img {
  display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0b1720;
}
.ma-compare-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s ease;
  opacity: 0.92;
}
.ma-compare-card:hover .ma-compare-img img,
.ma-compare-card.is-open .ma-compare-img img { transform: scale(1.05); opacity: 1; }
.ma-compare-body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 16px 18px;
}
.ma-compare-body strong {
  font-size: 17px; letter-spacing: -0.02em; color: var(--ink);
}
.ma-compare-body em {
  font-style: normal; font-size: 14px; font-weight: 600; color: var(--brand-deep);
}
.ma-compare-more {
  display: none;
  margin-top: 6px;
  font-size: 14px; line-height: 1.5; color: var(--muted);
}
.ma-compare-card.is-open .ma-compare-more { display: block; animation: maReveal .25s ease; }
@keyframes maReveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.ma-filter {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 22px;
}
.ma-filter button {
  border: 1px solid var(--gray-01);
  background: #fff;
  color: var(--nav);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ma-filter button:hover { border-color: var(--brand); color: var(--brand-deep); }
.ma-filter button.is-active {
  background: var(--cta-dark);
  border-color: var(--cta-dark);
  color: #fff;
}
.ma-industry-grid {
  display: grid; gap: 16px;
}
@media (min-width: 700px) {
  .ma-industry-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .ma-industry-grid { grid-template-columns: repeat(3, 1fr); }
}
.ma-industry {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gray-01);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ma-industry:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(11,23,32,0.1);
}
.ma-industry.is-hidden { display: none; }
.ma-industry-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0b1720;
}
.ma-industry-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.ma-industry:hover .ma-industry-media img { transform: scale(1.06); }
.ma-industry-copy { padding: 16px 16px 18px; }
.ma-industry-copy h3 {
  margin: 0 0 8px; font-size: 18px; letter-spacing: -0.02em; color: var(--ink);
}
.ma-industry-copy p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

.ma-path-row {
  display: grid; gap: 14px; margin-top: 22px;
}
@media (min-width: 800px) {
  .ma-path-row { grid-template-columns: 1fr 1fr; }
}
.ma-path-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--gray-01);
  border-radius: 12px;
}
.ma-path-card img {
  width: 88px; height: 88px; object-fit: cover; border-radius: 10px;
}
.ma-path-card h3 { margin: 0 0 6px; font-size: 17px; color: var(--ink); }
.ma-path-card p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.45; }

.ma-engage-grid {
  display: grid; gap: 16px;
}
@media (min-width: 760px) {
  .ma-engage-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .ma-engage-grid { grid-template-columns: repeat(4, 1fr); }
}
.ma-engage-card {
  background: #fff;
  border: 1px solid var(--gray-01);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ma-engage-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(11,23,32,0.08);
}
.ma-engage-media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #0b1720;
}
.ma-engage-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s ease;
}
.ma-engage-card:hover .ma-engage-media img { transform: scale(1.05); }
.ma-engage-n {
  position: absolute; left: 12px; bottom: 12px;
  background: var(--brand);
  color: #083040;
  font-size: 12px; font-weight: 800;
  padding: 6px 10px;
  border-radius: 4px;
}
.ma-engage-card h3 {
  margin: 14px 14px 8px;
  font-size: 17px; letter-spacing: -0.02em; color: var(--ink);
}
.ma-engage-card p {
  margin: 0 14px 16px;
  font-size: 14px; color: var(--muted); line-height: 1.5;
}
.ma-engage-note {
  margin: 22px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--muted);
  max-width: 52ch;
  margin-inline: auto;
}
@media (prefers-reduced-motion: reduce) {
  .ma-split-media img,
  .ma-compare-img img,
  .ma-industry-media img,
  .ma-engage-media img { transition: none; }
}

/* ===== Home: colorful WebFX-density sections ===== */
.home-stats {
  padding: 0 0 48px;
  margin-top: 36px;
  position: relative;
  z-index: 2;
}
.home-stats-grid {
  display: grid;
  gap: 14px;
}
@media (min-width: 760px) {
  .home-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .home-stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.home-stat {
  border-radius: 14px;
  padding: 22px 20px;
  color: #fff;
  min-height: 170px;
  box-shadow: 0 16px 36px rgba(11,23,32,0.12);
}
.home-compare {
  background: #fff;
  padding-top: calc(var(--section-y) + 12px);
}
.home-stat-n {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 10px;
}
.home-stat h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: #fff;
}
.home-stat p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.92;
}
.home-stat-cyan { background: linear-gradient(145deg, #0a9bb8, #10c0e0 55%, #5ad7ec); }
.home-stat-purple { background: linear-gradient(145deg, #5a3fd6, #7b5cff 55%, #a48bff); }
.home-stat-green { background: linear-gradient(145deg, #1fa86a, #41d48c 55%, #7be3b0); }
.home-stat-coral { background: linear-gradient(145deg, #d4552f, #f0784a 55%, #ff9b72); }

.home-compare-grid {
  display: grid;
  gap: 18px;
}
@media (min-width: 900px) {
  .home-compare-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.home-compare-card {
  border-radius: 16px;
  padding: 28px 26px;
  border: 1px solid var(--gray-01);
}
.home-compare-old {
  background: #f4f6f8;
  color: #3a454c;
}
.home-compare-new {
  background: linear-gradient(160deg, #083040 0%, #0b1720 55%, #123246 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 20px 40px rgba(11,23,32,0.18);
}
.home-compare-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}
.home-compare-new .home-compare-label { color: var(--brand); opacity: 1; }
.home-compare-card h3 {
  margin: 0 0 16px;
  font-size: 24px;
  color: inherit;
}
.home-compare-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.home-compare-card li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.45;
}
.home-compare-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #9aa4ad;
}
.home-compare-new li::before { background: var(--brand); }

/* Revenue engine dial + CTA (WebFX-inspired, Flexus content) */
.home-rev-engine {
  background:
    radial-gradient(ellipse 50% 60% at 15% 50%, rgba(16, 192, 224, 0.08), transparent 55%),
    linear-gradient(180deg, #fff 0%, #f7fbfc 100%);
  overflow: hidden;
}
.home-rev-engine-grid {
  display: grid;
  gap: 36px;
  align-items: center;
}
@media (min-width: 960px) {
  .home-rev-engine-grid {
    grid-template-columns: minmax(320px, 1fr) minmax(0, 1.1fr);
    gap: 52px;
  }
}

.rev-dial {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
}
.rev-dial-orbit {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  animation: rev-spin 28s linear infinite;
}
.rev-spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 46%;
  background: linear-gradient(to top, transparent, rgba(16, 192, 224, 0.35));
  transform-origin: bottom center;
}
.rev-spoke.s1 { transform: translate(-50%, -100%) rotate(0deg); }
.rev-spoke.s2 { transform: translate(-50%, -100%) rotate(90deg); }
.rev-spoke.s3 { transform: translate(-50%, -100%) rotate(180deg); }
.rev-spoke.s4 { transform: translate(-50%, -100%) rotate(270deg); }
.rev-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(16, 192, 224, 0.15);
  animation: rev-pulse 2.4s ease-in-out infinite;
}
.rev-dot.d1 { top: 4%; left: 50%; transform: translateX(-50%); }
.rev-dot.d2 { top: 50%; right: 4%; transform: translateY(-50%); animation-delay: 0.4s; background: #7b5cff; box-shadow: 0 0 0 4px rgba(123, 92, 255, 0.15); }
.rev-dot.d3 { bottom: 4%; left: 50%; transform: translateX(-50%); animation-delay: 0.8s; background: #41d48c; box-shadow: 0 0 0 4px rgba(65, 212, 140, 0.15); }
.rev-dot.d4 { top: 50%; left: 4%; transform: translateY(-50%); animation-delay: 1.2s; background: #f0784a; box-shadow: 0 0 0 4px rgba(240, 120, 74, 0.15); }

.rev-ring {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  transform: rotate(-90deg);
}
.rev-ring-track {
  fill: none;
  stroke: rgba(11, 23, 32, 0.06);
  stroke-width: 14;
}
.rev-arc {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 90 400;
  animation: rev-arc-glow 4.5s ease-in-out infinite;
}
.rev-arc.a1 { stroke: #8fd9ea; stroke-dashoffset: 0; }
.rev-arc.a2 { stroke: #b7a6ff; stroke-dasharray: 70 420; stroke-dashoffset: -110; animation-delay: 0.6s; }
.rev-arc.a3 { stroke: #8be0b8; stroke-dasharray: 80 410; stroke-dashoffset: -210; animation-delay: 1.2s; }
.rev-arc.a4 { stroke: #9ec5e8; stroke-dasharray: 60 430; stroke-dashoffset: -320; animation-delay: 1.8s; }

.rev-dial-core {
  position: relative;
  z-index: 2;
  width: 66%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(160deg, #0d2a3a 0%, #12384c 45%, #0a9bb8 140%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px 20px;
  box-shadow:
    0 20px 50px rgba(11, 23, 32, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.rev-dial-core--purple {
  background: linear-gradient(160deg, #24165a 0%, #3d2a8a 48%, #7b5cff 140%);
}
.rev-dial-core--green {
  background: linear-gradient(160deg, #0d3a2a 0%, #156b48 48%, #41d48c 140%);
}
.home-rev-engine--flip .home-rev-engine-grid {
  direction: rtl;
}
.home-rev-engine--flip .home-rev-engine-grid > * {
  direction: ltr;
}
.home-rev-engine--purple {
  background:
    radial-gradient(ellipse 50% 60% at 85% 50%, rgba(123, 92, 255, 0.1), transparent 55%),
    linear-gradient(180deg, #faf9ff 0%, #f7f8fc 100%);
}
.home-rev-engine--green {
  background:
    radial-gradient(ellipse 50% 60% at 15% 50%, rgba(65, 212, 140, 0.1), transparent 55%),
    linear-gradient(180deg, #f6fcf9 0%, #f7fafb 100%);
}
.rev-metric-static {
  font-size: clamp(58px, 10vw, 92px);
}
@media (max-width: 959px) {
  .home-rev-engine--flip .home-rev-engine-grid { direction: ltr; }
}
.rev-metric {
  font-size: clamp(56px, 9vw, 88px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.95;
  margin-bottom: 10px;
}
.rev-metric-label {
  margin: 0;
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 700;
  line-height: 1.35;
  max-width: 16ch;
}
.rev-metric-sub {
  margin: 10px 0 0;
  font-size: clamp(12px, 1.35vw, 14px);
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.82;
  max-width: 20ch;
  line-height: 1.4;
}

.rev-cta-card {
  border-radius: 28px;
  padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(165deg, #f4fbfc 0%, #eef9fc 40%, #f8fafb 100%);
  border: 1.5px solid rgba(16, 192, 224, 0.35);
  box-shadow: 0 18px 44px rgba(11, 23, 32, 0.06);
}
.rev-cta-card .h2 { margin-bottom: 12px; }
.rev-cta-card .lead-text {
  max-width: none;
  margin-bottom: 18px;
}
.rev-cta-points {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.rev-cta-points li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.rev-cta-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
}
.rev-cta-form {
  display: grid;
  gap: 10px;
}
@media (min-width: 640px) {
  .rev-cta-form {
    grid-template-columns: 1fr auto;
    align-items: stretch;
  }
}
.rev-cta-form input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(11, 23, 32, 0.14);
  background: #fff;
  padding: 14px 16px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}
.rev-cta-form input:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.rev-cta-form .btn {
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  padding-inline: 20px;
}

@keyframes rev-spin {
  to { transform: rotate(360deg); }
}
@keyframes rev-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.75; }
}
@keyframes rev-arc-glow {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
.rev-dot.d2 { animation-name: rev-pulse-x; }
.rev-dot.d4 { animation-name: rev-pulse-x; }
@keyframes rev-pulse-x {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 1; }
  50% { transform: translateY(-50%) scale(1.25); opacity: 0.75; }
}
.rev-dot.d1,
.rev-dot.d3 { animation-name: rev-pulse-y; }
@keyframes rev-pulse-y {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(1.25); opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  .rev-dial-orbit,
  .rev-arc,
  .rev-dot { animation: none; }
}

.home-pillar-grid {
  display: grid;
  gap: 18px;
}
@media (min-width: 960px) {
  .home-pillar-grid { grid-template-columns: repeat(3, 1fr); }
}
.home-pillar {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gray-01);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.home-pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(11,23,32,0.1);
}
.home-pillar img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.home-pillar-body { padding: 20px 18px 22px; }
.home-pillar-body span {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.home-pillar-a .home-pillar-body span { color: var(--brand-deep); }
.home-pillar-b .home-pillar-body span { color: #6b4de0; }
.home-pillar-c .home-pillar-body span { color: #1fa86a; }
.home-pillar-body h3 { margin: 0 0 8px; font-size: 20px; }
.home-pillar-body p { margin: 0 0 14px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.home-pillar-body a { font-weight: 700; font-size: 14px; }

.home-svc-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 760px) {
  .home-svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .home-svc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1400px) {
  .home-svc-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .home-pillar-grid { gap: 22px; }
  .home-engine-grid { gap: 20px; }
  .home-stats-grid { gap: 18px; }
  .footer-links { gap: 22px 28px; }
  .mega-cols { gap: 28px 36px; }
  .hero-grid { gap: 48px; }
  .process-panel { padding: 28px 32px 26px; }
}
.home-svc {
  display: grid;
  grid-template-rows: 210px 1fr;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--gray-01);
  transition: transform .25s ease, box-shadow .25s ease;
}
.home-svc:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(11,23,32,0.1);
  color: inherit;
}
.home-svc-media { position: relative; overflow: hidden; }
.home-svc-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11,23,32,0.35));
}
.home-svc-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s ease;
}
.home-svc:hover .home-svc-media img { transform: scale(1.05); }
.home-svc-copy { padding: 18px 16px 20px; border-top: 4px solid var(--brand); }
.home-svc.svc-blue .home-svc-copy { border-top-color: #3b82f6; }
.home-svc.svc-purple .home-svc-copy { border-top-color: #7b5cff; }
.home-svc.svc-green .home-svc-copy { border-top-color: #41d48c; }
.home-svc.svc-coral .home-svc-copy { border-top-color: #f0784a; }
.home-svc.svc-teal .home-svc-copy { border-top-color: #14b8a6; }
.home-svc-copy h3 { margin: 0 0 8px; font-size: 19px; }
.home-svc-copy p { margin: 0 0 12px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.home-svc-copy span { font-size: 14px; font-weight: 700; color: var(--brand-deep); }

.home-spotlight {
  padding: var(--section-y) 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(16,192,224,0.18), transparent 40%),
    radial-gradient(circle at 88% 10%, rgba(123,92,255,0.16), transparent 36%),
    linear-gradient(180deg, #f3fbfc 0%, #fff 55%, #f7f4ff 100%);
}
.home-spotlight-grid {
  display: grid;
  gap: 36px;
  align-items: center;
}
@media (min-width: 960px) {
  .home-spotlight-grid { grid-template-columns: 1.05fr 0.95fr; gap: 48px; }
}
.home-spotlight-list {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.home-spotlight-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.home-spotlight-list li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand);
}
.home-spotlight-metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
.home-metric-card {
  border-radius: 14px;
  padding: 18px 16px;
  color: #fff;
  min-height: 120px;
}
.home-metric-card strong {
  display: block;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: 6px;
}
.home-metric-card span { font-size: 13px; line-height: 1.4; opacity: 0.95; }
.home-metric-cyan { background: linear-gradient(145deg, #0a9bb8, #10c0e0); }
.home-metric-purple { background: linear-gradient(145deg, #5a3fd6, #7b5cff); }
.home-metric-green { background: linear-gradient(145deg, #1fa86a, #41d48c); grid-column: 1 / -1; }
.home-spotlight-img {
  grid-column: 1 / -1;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 14px;
}

.home-engine {
  background:
    linear-gradient(180deg, #0b1720 0%, #123246 100%);
  color: #fff;
}
.home-engine .h2,
.home-engine .lead-text { color: #fff; }
.home-engine .accent { color: var(--brand); }
.home-engine .lead-text { opacity: 0.88; }
.home-engine-grid {
  display: grid;
  gap: 14px;
}
@media (min-width: 800px) {
  .home-engine-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .home-engine-grid { grid-template-columns: repeat(4, 1fr); }
}
.home-engine-col {
  border-radius: 14px;
  padding: 22px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  display: grid;
  gap: 10px;
  align-content: start;
}
.home-engine-col h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: #fff;
}
.home-engine-col a {
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  font-weight: 500;
}
.home-engine-col a:hover { color: var(--brand); }
.eng-a { box-shadow: inset 0 3px 0 #10c0e0; }
.eng-b { box-shadow: inset 0 3px 0 #7b5cff; }
.eng-c { box-shadow: inset 0 3px 0 #41d48c; }
.eng-d { box-shadow: inset 0 3px 0 #f0784a; }
.home-engine-cta { margin-top: 28px; text-align: center; }

.home-about {
  padding: var(--section-y) 0;
  background: #fff;
}
.home-about-grid {
  display: grid;
  gap: 36px;
  align-items: center;
}
@media (min-width: 960px) {
  .home-about-grid { grid-template-columns: 0.95fr 1.05fr; gap: 48px; }
}
.home-about-media {
  display: grid;
  gap: 12px;
  grid-template-columns: 1.1fr 0.9fr;
}
.home-about-media img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
}
.home-about-media img:first-child { height: 280px; }
.home-about-facts {
  display: grid;
  gap: 14px;
  margin: 18px 0 22px;
}
@media (min-width: 700px) {
  .home-about-facts { grid-template-columns: repeat(3, 1fr); }
}
.home-about-facts strong {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 4px;
}
.home-about-facts span {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}
.home-about-more {
  margin: 4px 0 22px;
  display: grid;
  gap: 12px;
}
.home-about-more p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #374046;
}
.home-about-copy .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

.home-process {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 10% 20%, rgba(16, 192, 224, 0.12), transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(16, 192, 224, 0.08), transparent 50%),
    linear-gradient(180deg, #f4fbfc 0%, #eef6f8 45%, #f7fafb 100%);
}
.home-process .section-head { margin-bottom: 28px; }

.process-journey {
  position: relative;
  padding: 8px 0 0;
}
.process-track {
  display: none;
  position: absolute;
  left: 4%;
  right: 4%;
  top: 38px;
  height: 3px;
  pointer-events: none;
}
@media (min-width: 900px) {
  .process-track { display: block; }
}
.process-track-line {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(11, 23, 32, 0.1);
}
.process-track-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand));
  box-shadow: 0 0 16px rgba(16, 192, 224, 0.45);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  position: relative;
  z-index: 1;
}
@media (min-width: 700px) {
  .process-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .process-steps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }
}
.process-step-btn {
  width: 100%;
  appearance: none;
  border: 1px solid rgba(11, 23, 32, 0.1);
  background: rgba(255, 255, 255, 0.88);
  border-radius: 18px;
  padding: 16px 12px 14px;
  cursor: pointer;
  text-align: center;
  color: var(--ink);
  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease,
    color 0.28s ease;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 132px;
}
.process-step-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(16, 192, 224, 0.45);
  box-shadow: 0 12px 28px rgba(16, 192, 224, 0.12);
}
.process-step-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.process-step.is-active .process-step-btn {
  background: linear-gradient(160deg, #0a9bb8 0%, #10c0e0 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 16px 34px rgba(16, 192, 224, 0.28);
  transform: translateY(-4px);
}
.process-step.is-done .process-step-btn {
  border-color: rgba(16, 192, 224, 0.35);
  background: #fff;
}
.process-step-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(16, 192, 224, 0.12);
  color: var(--brand-deep);
  transition: background 0.25s ease, color 0.25s ease, transform 0.35s ease;
}
.process-step-icon svg { width: 22px; height: 22px; }
.process-step.is-active .process-step-icon {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  transform: scale(1.06);
}
.process-step-n {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--brand-deep);
}
.process-step.is-active .process-step-n { color: rgba(255, 255, 255, 0.85); }
.process-step-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.process-step-short {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.3;
}
.process-step.is-active .process-step-short { color: rgba(255, 255, 255, 0.88); }

.process-panel {
  margin-top: 18px;
  border-radius: 22px;
  padding: 22px 22px 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(238, 249, 252, 0.92));
  border: 1px solid rgba(16, 192, 224, 0.18);
  box-shadow: 0 18px 40px rgba(11, 23, 32, 0.06);
  min-height: 210px;
  position: relative;
  overflow: hidden;
}
.process-panel::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand-deep), var(--brand));
}
.process-panel-slide {
  animation: process-panel-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.process-panel-slide[hidden] { display: none; }
@keyframes process-panel-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.process-panel-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.process-panel-kicker span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.process-panel-kicker strong {
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.process-panel-desc {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.55;
  color: #374046;
  max-width: 62ch;
}
.process-panel-split {
  display: grid;
  gap: 12px;
}
@media (min-width: 720px) {
  .process-panel-split { grid-template-columns: 1fr 1fr; }
}
.process-panel-card {
  border-radius: 14px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(11, 23, 32, 0.08);
  background: #fff;
}
.process-panel-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 600;
}
.process-panel-label {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.process-we {
  border-color: rgba(16, 192, 224, 0.28);
  background: linear-gradient(160deg, #eef9fc, #fff);
}
.process-we .process-panel-label { color: var(--brand-deep); }

.process-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}
.process-nav-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(11, 23, 32, 0.12);
  background: #fff;
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.process-nav-btn:hover {
  transform: translateY(-1px);
  border-color: var(--brand);
  color: var(--brand-deep);
}
.process-dots {
  display: flex;
  gap: 7px;
}
.process-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(11, 23, 32, 0.18);
  transition: width 0.25s ease, background 0.25s ease;
}
.process-dot.is-active {
  width: 22px;
  background: var(--brand);
}

@media (prefers-reduced-motion: reduce) {
  .process-step-btn,
  .process-track-fill,
  .process-step-icon,
  .process-dot { transition: none; }
  .process-panel-slide { animation: none; }
}

.home-quotes {
  padding: var(--section-y) 0 calc(var(--section-y) + 8px);
  background:
    linear-gradient(180deg, #fff 0%, #eef9fc 45%, #f6f2ff 100%);
  overflow: hidden;
}
.home-quotes .section-head { margin-bottom: 28px; }

/* Perf: one scroller fade-in (not 72 card staggers). Faster + no blur layer. */
.home-quotes .review-scroller.reveal {
  transition-duration: 0.55s;
  filter: none;
  transition-delay: calc(var(--fx-i, 0) * 40ms);
}
.home-quotes .section-head.reveal,
.home-quotes .section-head[data-fx-child] {
  transition-delay: calc(var(--fx-i, 0) * 40ms);
}
/* Safety if any card still gets data-fx-child — never wait seconds */
.home-quotes .review-card[data-fx-child] {
  transition-delay: calc(min(var(--fx-i, 0), 3) * 35ms);
  will-change: auto;
}

.review-scroller { position: relative; }
.review-scroller-viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.review-scroller-track {
  display: flex;
  gap: 18px;
  width: max-content;
  padding: 6px 4vw 10px;
  animation: review-marquee 48s linear infinite;
}
.review-scroller:hover .review-scroller-track,
.review-scroller.is-paused .review-scroller-track {
  animation-play-state: paused;
}
@keyframes review-marquee {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.review-card {
  flex: 0 0 min(340px, 78vw);
  width: min(340px, 78vw);
  margin: 0;
  content-visibility: auto;
  contain-intrinsic-size: 340px 280px;
  border-radius: 18px;
  padding: 22px 20px 20px;
  color: #fff;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 34px rgba(16, 40, 60, 0.12);
  /* Contain paint so marquee updates don’t dirty the whole page */
  contain: layout paint style;
}
.review-card-top {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px 12px;
  align-items: center;
  margin-bottom: 12px;
}
.review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.2);
}
.review-meta { min-width: 0; }
.review-name {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-role {
  margin: 2px 0 0;
  font-size: 12px;
  opacity: 0.88;
  line-height: 1.25;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.review-role-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Source badge on review cards (Google / Trustpilot / Client story) */
.review-source {
  flex: 0 0 auto;
  display: inline-block;
  margin-left: 0;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: 1px;
  background: rgba(255, 255, 255, 0.22);
  opacity: 1;
  white-space: nowrap;
}
.review-source--google { background: rgba(66, 133, 244, 0.35); }
.review-source--trustpilot { background: rgba(0, 180, 106, 0.35); }
.review-source--clutch { background: rgba(255, 255, 255, 0.28); }
.review-source--client,
.review-source--partner,
.review-source--client-story { background: rgba(255, 255, 255, 0.26); color: rgba(255, 255, 255, 0.95); }
.review-avatar--empty {
  display: inline-block;
  background: rgba(255, 255, 255, 0.25);
}
.review-service {
  justify-self: end;
  align-self: start;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-stars {
  color: #ffe566;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 10px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
.review-subject {
  margin: 0 0 10px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #fff;
}
.review-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
  opacity: 0.95;
  flex: 1;
}

.review-tone-a { background: linear-gradient(150deg, #0a9bb8, #10c0e0); }
.review-tone-b { background: linear-gradient(150deg, #5a3fd6, #7b5cff); }
.review-tone-c { background: linear-gradient(150deg, #1fa86a, #41d48c); }
.review-tone-d { background: linear-gradient(150deg, #0f3d55, #1a6a8a); }
.review-tone-e { background: linear-gradient(150deg, #c45a1a, #e8893a); }

.review-scroller-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.review-scroller-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(16, 40, 60, 0.14);
  background: #fff;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(16, 40, 60, 0.08);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.review-scroller-btn:hover {
  transform: translateY(-1px);
  border-color: var(--brand);
  color: var(--brand);
}
.review-scroller-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .review-scroller-track {
    animation: none;
    overflow-x: auto;
    max-width: 100%;
    width: 100%;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;
  }
  .review-card { scroll-snap-align: start; }
  .home-pillar:hover,
  .home-svc:hover { transform: none; }
}

.home-team-band .btn-link:hover { color: var(--brand) !important; }

/* Sticky back-to-top — vertical pill, Flexus accent */
.to-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(22px, env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 44px;
  min-height: 132px;
  padding: 16px 8px 18px;
  margin: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(11, 23, 32, 0.55);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(11, 23, 32, 0.08);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Y-only motion — X translate could expand document scrollWidth */
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    visibility 0.28s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}
.to-top-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--brand-deep);
  transition: color 0.2s ease, transform 0.2s ease;
}
.to-top-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  color: inherit;
}
.to-top:hover {
  border-color: var(--brand-deep);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 12px 30px rgba(16, 192, 224, 0.28);
}
.to-top:hover .to-top-arrow {
  color: #fff;
  transform: translateY(-2px);
}
.to-top:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
body.mnav-locked .to-top { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 720px) {
  .to-top {
    width: 40px;
    min-height: 118px;
    right: 12px;
    bottom: 16px;
    padding: 14px 6px 16px;
  }
  .to-top-label {
    font-size: 10px;
    letter-spacing: 0.14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: opacity 0.15s ease, visibility 0.15s ease;
    transform: none;
  }
  .to-top.is-visible { transform: none; }
  .to-top:hover .to-top-arrow { transform: none; }
}

/* —— About Us pages — editorial layout —— */
.about-page { overflow: clip; }

.about-subnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-01);
}
.about-subnav-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  min-height: 52px;
}
.about-subnav-label {
  margin: 0;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.about-subnav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.about-subnav-list::-webkit-scrollbar { display: none; }
.about-subnav-list a {
  display: inline-block;
  padding: 16px 14px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.about-subnav-list a:hover { color: var(--ink); }
.about-subnav-list a.is-active {
  color: var(--ink);
  border-bottom-color: var(--brand);
  font-weight: 800;
}

/* Split hero */
.about-hero-split {
  padding: 40px 0 0;
  background:
    linear-gradient(180deg, var(--brand-wash) 0%, #fff 42%);
}
.about-hero-split-grid {
  display: grid;
  gap: 36px;
  align-items: end;
  padding-bottom: 0;
}
@media (min-width: 980px) {
  .about-hero-split-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: stretch;
    min-height: min(78vh, 720px);
  }
}
.about-hero-copy {
  padding: 12px 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-hero-copy .eyebrow { margin-bottom: 14px; }
.about-hero-copy h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 4.8vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--ink);
  max-width: 14ch;
}
.about-hero-copy h1 .accent { color: var(--brand-deep); }
.about-hero-lead {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 42ch;
}
.about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.about-hero-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.about-hero-media {
  display: grid;
  gap: 10px;
  align-content: end;
}
.about-hero-main {
  margin: 0;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background: var(--ink);
  min-height: 320px;
  box-shadow: 0 24px 60px rgba(11, 23, 32, 0.14);
}
@media (min-width: 980px) {
  .about-hero-main {
    border-radius: 22px 22px 0 0;
    min-height: 520px;
    height: 100%;
  }
}
.about-hero-main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 320px;
}
@media (min-width: 980px) {
  .about-hero-main img { min-height: 520px; }
}
.about-hero-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.about-hero-thumbs img {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
}
@media (min-width: 980px) {
  .about-hero-thumbs img { height: 88px; border-radius: 10px; }
}

/* Stats */
.about-stats {
  margin: 0;
  padding: 28px 0;
  background: var(--ink);
  color: #fff;
}
.about-stats-grid {
  display: grid;
  gap: 22px 28px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) {
  .about-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}
.about-stat strong {
  display: block;
  font-size: clamp(36px, 4.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}
.about-stat strong::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-top: 12px;
  background: var(--brand);
  border-radius: 2px;
}
.about-stat span {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  max-width: 22ch;
}

.about-section-intro {
  margin-bottom: 28px;
  max-width: 52ch;
}
.about-section-intro .h2 { margin-bottom: 10px; }
.about-section-intro .lead-text { margin: 0; }

/* Pillars — no cards */
.about-pillars { padding-top: 64px; padding-bottom: 24px; }
.about-pillars-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--gray-01);
}
@media (min-width: 900px) {
  .about-pillars-list { grid-template-columns: repeat(3, 1fr); }
}
.about-pillars-list > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 28px 0;
  border-bottom: 1px solid var(--gray-01);
}
@media (min-width: 900px) {
  .about-pillars-list > li {
    padding: 28px 28px 28px 0;
    border-bottom: 0;
    border-right: 1px solid var(--gray-01);
  }
  .about-pillars-list > li:last-child {
    border-right: 0;
    padding-right: 0;
  }
}
.about-pillar-n {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand-deep);
  padding-top: 4px;
}
.about-pillars-list h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}
.about-pillars-list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* Full-width CTA strips (not card grids) */
.about-strip {
  margin: 36px 0;
  padding: 0;
}
.about-strip-inner {
  display: grid;
  gap: 20px;
  align-items: center;
  padding: 32px 28px;
  border-radius: 16px;
}
@media (min-width: 800px) {
  .about-strip-inner {
    grid-template-columns: 1fr auto;
    gap: 40px;
    padding: 40px 44px;
  }
}
.about-strip .h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3vw, 34px);
}
.about-strip p { margin: 0; max-width: 52ch; line-height: 1.55; }
.about-strip-brand .about-strip-inner {
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, rgba(16, 192, 224, 0.35), transparent 55%),
    linear-gradient(120deg, #0e8fa8 0%, var(--brand) 55%, #7ad7ea 100%);
  color: #0b1720;
}
.about-strip-brand .eyebrow { color: rgba(11, 23, 32, 0.7); }
.about-strip-brand .h2,
.about-strip-brand p { color: #0b1720; }
.about-strip-ink .about-strip-inner {
  background:
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(16, 192, 224, 0.2), transparent 50%),
    linear-gradient(135deg, #0b1720 0%, #163447 100%);
  color: #fff;
}
.about-strip-ink .eyebrow { color: var(--brand); }
.about-strip-ink .h2,
.about-strip-ink p { color: #fff; }
.about-strip-ink p { color: rgba(255, 255, 255, 0.8); }
.about-strip-soft .about-strip-inner {
  background: var(--brand-wash);
  border: 1px solid rgba(16, 192, 224, 0.22);
}
.about-strip-soft .h2 { color: var(--ink); }
.about-strip-soft p { color: var(--muted); }

/* Services as rows */
.about-services { padding-top: 40px; }
.about-services-layout { max-width: 920px; }
.about-services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--gray-01);
}
.about-services-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--gray-01);
  text-decoration: none;
  color: inherit;
  align-items: start;
  transition: color 0.2s ease;
}
.about-services-list a strong {
  grid-column: 1;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.about-services-list a span {
  grid-column: 1;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.about-services-list a em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-style: normal;
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-deep);
  transition: transform 0.2s ease;
}
.about-services-list a:hover strong { color: var(--brand-deep); }
.about-services-list a:hover em { transform: translateX(4px); }

/* Long-form magazine articles */
.about-articles { padding-top: 48px; padding-bottom: 20px; }
.about-article-group {
  display: grid;
  gap: 56px;
  margin-bottom: 8px;
}
.about-article {
  display: grid;
  gap: 28px;
  padding-bottom: 8px;
  border-top: 1px solid var(--gray-01);
  padding-top: 36px;
}
.about-article-media {
  align-items: start;
}
@media (min-width: 960px) {
  .about-article-media {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
  }
  .about-article-media.is-flip .about-article-copy { order: 2; }
  .about-article-media.is-flip .about-article-figure { order: 1; }
}
.about-article-kicker {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--brand-deep);
}
.about-article-copy .h2 {
  margin: 0 0 18px;
  font-size: clamp(26px, 3.2vw, 36px);
  max-width: 22ch;
}
.about-article-copy p {
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--muted);
}
.about-article-lead {
  font-size: 18px !important;
  line-height: 1.65 !important;
  color: var(--ink) !important;
}
.about-article-figure {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--ink);
  box-shadow: 0 18px 44px rgba(11, 23, 32, 0.12);
  position: sticky;
  top: 84px;
}
.about-article-figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  max-height: 520px;
  object-fit: cover;
}
.about-inline-cta {
  margin-top: 28px;
  padding: 22px 0 0;
  border-top: 1px solid var(--gray-01);
  display: grid;
  gap: 16px;
  align-items: end;
}
@media (min-width: 720px) {
  .about-inline-cta { grid-template-columns: 1fr auto; gap: 24px; }
}
.about-inline-cta h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}
.about-inline-cta p {
  margin: 0 !important;
  font-size: 15px !important;
  color: var(--muted) !important;
}

/* Explore links */
.about-explore { padding-top: 24px; }
.about-explore-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--gray-01);
}
@media (min-width: 800px) {
  .about-explore-list { grid-template-columns: repeat(2, 1fr); }
}
.about-explore-list a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid var(--gray-01);
  text-decoration: none;
  color: inherit;
}
@media (min-width: 800px) {
  .about-explore-list a:nth-child(odd) { padding-right: 24px; }
  .about-explore-list a:nth-child(even) { padding-left: 24px; }
}
.about-explore-list a strong {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}
.about-explore-list a span {
  font-size: 14px;
  color: var(--muted);
}
.about-explore-list a:hover strong { color: var(--brand-deep); }

.about-lead.proposal-pro { padding-top: 12px; }

@media (max-width: 720px) {
  .about-hero-copy { padding-bottom: 24px; }
  .about-hero-copy h1 { max-width: none; }
  .about-hero-thumbs img { height: 56px; }
  .about-strip-inner { padding: 26px 20px; }
  .about-article-figure { position: static; }
}

/* About pages: never hide content behind scroll FX (was causing empty-looking pages) */
.about-page .reveal,
.about-page .reveal:not(.show):not(.is-in) {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  will-change: auto;
}
.about-hero-media {
  padding-bottom: 28px;
}
.about-hero-main {
  border-radius: 18px !important;
}
.about-hero-thumbs {
  margin-top: 2px;
}

/* ===== About hub (/about/) — WebFX-inspired modular ===== */
.fxabout {
  /* overflow visible so growth sticky scrub can pin while scrolling */
  overflow: visible;
  background: #fff;
}
.fxabout-accent { color: var(--brand-deep); }
.fxabout-kicker {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.fxabout-h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--ink);
}
.fxabout-h2-center {
  text-align: center;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}
.fxabout-section { padding: 88px 0; }
.fxabout-section-head { max-width: 36ch; margin-bottom: 36px; }
.fxabout-section-head-wide { max-width: 52ch; }
.fxabout-section-head p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.fxabout-inline-actions {
  display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-top: 22px;
}
.fxabout-photo {
  margin: 0; overflow: hidden; border-radius: 12px;
  box-shadow: 0 24px 56px rgba(11,23,32,.12);
}
.fxabout-photo img { display: block; width: 100%; min-height: 340px; object-fit: cover; }

/* Hub subnav (Services / Industries / About) — pins below sticky header */
.fxabout-subnav {
  --fx-hub-subnav-h: 54px;
  position: sticky;
  top: var(--fx-hub-subnav-top, 84px);
  z-index: 45; /* above page content; below header (3000) / mega / section-sticky-nav (2900) */
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(11,23,32,.06);
  border-bottom: 1px solid rgba(11,23,32,.06);
}
.fxabout-subnav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--fx-hub-subnav-h);
  min-width: 0;
  max-width: 100%;
}
.fxabout-subnav-label {
  font-size: 11px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand-deep); flex: 0 0 auto;
}
.fxabout-subnav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1;
  min-width: 0;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.fxabout-subnav ul::-webkit-scrollbar { display: none; }
.fxabout-subnav a {
  display: inline-block; padding: 17px 14px; white-space: nowrap;
  font-size: 13px; font-weight: 650; color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.fxabout-subnav a:hover { color: var(--ink); }
.fxabout-subnav a.is-active { color: var(--ink); font-weight: 800; border-bottom-color: var(--brand); }
/* Anchor for subnav links (#page-hero) — sits at start of hero content */
#page-hero.fx-hub-page-hero {
  scroll-margin-top: calc(var(--fx-hub-subnav-top, 84px) + var(--fx-hub-subnav-h, 54px));
}

/* Hero — true full-bleed band (edge-to-edge); content uses .wrap gutters */
.fxabout-hero {
  position: relative;
  padding: 0;
  text-align: left;
  background: #fff;
  overflow: clip;
}
.fxabout-hero-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.fxabout-hero-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0 0 40px;
  margin-inline: 0;
  padding: clamp(44px, 6vw, 88px) 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse 55% 70% at 12% 10%, rgba(16,192,224,.2), transparent 58%),
    radial-gradient(ellipse 40% 50% at 88% 30%, rgba(16,192,224,.08), transparent 55%),
    linear-gradient(180deg, var(--brand-wash) 0%, #fff 100%);
  border-block: 1px solid rgba(16, 192, 224, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}
.fxabout-hero-inner {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
}
@media (min-width: 960px) {
  .fxabout-hero-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr);
    gap: clamp(24px, 3vw, 40px);
  }
}
.fxabout-hero-copy { min-width: 0; }
.fxabout-hero h1 {
  margin: 0 0 18px;
  max-width: 16ch;
  font-size: clamp(40px, 5.8vw, 64px);
  line-height: 1.05; letter-spacing: -.03em; font-weight: 800; color: var(--ink);
}
.fxabout-hero-lead {
  margin: 0 0 26px; max-width: 58ch;
  font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; color: var(--muted);
}
.fxabout-hero-email {
  margin: 0;
  max-width: min(100%, 760px);
}
.fxabout-hero-email label {
  display: block;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
.fxabout-hero-email-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  width: 100%;
}
.fxabout-hero-email input[type="email"] {
  flex: 1 1 220px;
  width: auto;
  min-width: min(100%, 220px);
  border: 1px solid rgba(11, 23, 32, .14);
  border-radius: 10px;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 23, 32, .04);
}
.fxabout-hero-email input[type="email"]::placeholder { color: #9aa4ad; }
.fxabout-hero-email input[type="email"]:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(16, 192, 224, .22);
}
.fxabout-hero-email .btn {
  flex: 0 1 auto;
  white-space: nowrap;
  text-align: center;
}
/* Tablet: email full width on its own row; CTAs share the next row */
@media (min-width: 560px) and (max-width: 899px) {
  .fxabout-hero-email input[type="email"] {
    flex: 1 1 100%;
    min-width: 0;
  }
  .fxabout-hero-email .btn {
    flex: 1 1 calc(50% - 5px);
  }
}
/* Narrow phones: stretch CTAs full width under the email */
@media (max-width: 559px) {
  .fxabout-hero-email input[type="email"] {
    flex: 1 1 100%;
    min-width: 0;
  }
  .fxabout-hero-email .btn {
    flex: 1 1 100%;
  }
}
.fxabout-hero-media {
  margin: 0;
  min-width: 0;
  width: 100%;
}
.fxabout-hero-media-frame {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 4 / 3;
  width: 100%;
  background: #d9e7ec;
  box-shadow:
    0 22px 48px rgba(11, 23, 32, .14),
    0 0 0 1px rgba(16, 192, 224, .12);
}
@media (min-width: 960px) {
  .fxabout-hero-media-frame {
    aspect-ratio: 5 / 4;
    min-height: clamp(380px, 42vw, 560px);
    border-radius: 20px;
  }
}
.fxabout-hero-media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transform-origin: center center;
}
@media (prefers-reduced-motion: no-preference) {
  .fxabout.is-ready .fxabout-hero-media.is-in .fxabout-hero-media-frame img,
  .fxabout-hero-media.is-in .fxabout-hero-media-frame img {
    animation: fxaboutHeroKen 18s ease-in-out infinite alternate;
  }
}
@keyframes fxaboutHeroKen {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); }
}

/* Mosaic — WebFX-style 5-up (slightly wider than default gutters) */
.fxabout-mosaic { position: relative; padding: 12px 0 48px; }
.fxabout-mosaic-band {
  position: absolute; left: 0; right: 0; top: 42%; height: 64px;
  background: linear-gradient(90deg, rgba(16,192,224,.2), rgba(16,192,224,.08));
  pointer-events: none;
}
.fxabout-mosaic > .wrap.fxabout-mosaic-track {
  padding-inline: max(10px, calc(var(--gutter) - 12px));
}
.fxabout-mosaic-track {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px; align-items: end;
}
.fxabout-mosaic-item {
  margin: 0; border-radius: 14px; overflow: hidden;
  background: #d9e7ec;
  box-shadow: 0 18px 40px rgba(11,23,32,.12);
}
.fxabout-mosaic-item:nth-child(1),
.fxabout-mosaic-item:nth-child(5) { height: 240px; }
.fxabout-mosaic-item:nth-child(2),
.fxabout-mosaic-item:nth-child(4) { height: 300px; }
.fxabout-mosaic-item:nth-child(3) { height: 380px; }
.fxabout-mosaic-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.fxabout-mosaic-item:hover img { transform: scale(1.06) !important; }
/* Re-assert reduced-motion last (equal-specificity !important ties resolve by
   source order) so these newer hover-zoom rules can't win over reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .page-hero-media:hover img,
  .fxabout-mosaic-item:hover img,
  .section-media-row > .section-media-image:hover img,
  .section-media-full .section-media-image:hover img {
    transform: none !important;
    transition: none !important;
  }
}
@media (max-width: 900px) {
  .fxabout-mosaic-track { grid-template-columns: repeat(3, 1fr); }
  .fxabout-mosaic-item:nth-child(4),
  .fxabout-mosaic-item:nth-child(5) { display: none; }
  .fxabout-mosaic-item:nth-child(1),
  .fxabout-mosaic-item:nth-child(3) { height: 200px; }
  .fxabout-mosaic-item:nth-child(2) { height: 260px; }
  .fxabout-mosaic-band { display: none; }
}
@media (max-width: 560px) {
  .fxabout-hero-box {
    margin-bottom: 28px;
    padding: 32px 0 36px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
  }
  .fxabout-hero h1 { max-width: none; }
  .fxabout-hero-media-frame { border-radius: 14px; aspect-ratio: 16 / 11; min-height: 0; }
  .fxabout-mosaic-track { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fxabout-mosaic-item:nth-child(3) { display: none; }
  .fxabout-mosaic-item { height: 180px !important; }
}

/* Highlights */
.fxabout-highlights {
  border-block: 1px solid rgba(11,23,32,.06);
  background: #f9fbff;
  padding: 36px 0;
}
.fxabout-highlights-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
@media (min-width: 700px) {
  .fxabout-highlights-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .fxabout-highlights-grid { grid-template-columns: repeat(6, 1fr); }
}
.fxabout-highlights strong {
  display: block;
  font-family: var(--font-display, var(--font));
  font-size: clamp(30px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}
.fxabout-highlights span {
  display: block;
  margin-top: 6px;
  font-family: var(--font);
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: rgba(11, 23, 32, .78);
}

/* Leader + stat cards */
.fxabout-leader { padding-top: 72px; }
.fxabout-leader-grid {
  display: grid; gap: 40px; align-items: start;
}
@media (min-width: 1000px) {
  .fxabout-leader-grid { grid-template-columns: 1.15fr .85fr; gap: 48px; }
}
.fxabout-pillars { display: grid; gap: 28px; }
.fxabout-pillars h3 {
  margin: 0 0 10px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ink);
}
.fxabout-pillars p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.fxabout-stat-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.fxabout-stat-cards article {
  padding: 22px 18px; border-radius: 12px; min-height: 148px;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.fxabout-stat-cards strong {
  display: block; font-size: clamp(22px, 3.2vw, 30px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.12; margin-bottom: 10px;
  text-wrap: balance;
}
.fxabout-stat-cards span {
  display: block; font-size: 13px; line-height: 1.45; font-weight: 700;
  max-width: 28ch; text-wrap: balance;
}
/* Saturated brand tiles — readable contrast on each tone */
.fxabout-stat-cards .tone-cyan {
  background: linear-gradient(145deg, #10c0e0 0%, #0a9bb8 100%);
  color: #083040;
}
.fxabout-stat-cards .tone-cyan span { color: rgba(8, 48, 64, .88); }
.fxabout-stat-cards .tone-navy {
  background: linear-gradient(145deg, #12324f 0%, #0b1720 100%);
  color: #fff;
}
.fxabout-stat-cards .tone-navy span { color: rgba(167, 232, 245, .92); }
.fxabout-stat-cards .tone-soft {
  background: linear-gradient(145deg, #ff7a59 0%, #e85a3a 100%);
  color: #fff;
}
.fxabout-stat-cards .tone-soft span { color: rgba(255, 255, 255, .92); }
.fxabout-stat-cards .tone-mint {
  background: linear-gradient(145deg, #41d48c 0%, #1fad6a 100%);
  color: #0b1720;
}
.fxabout-stat-cards .tone-mint span { color: rgba(11, 23, 32, .82); }

/* Dark proof banner — stacked by default; 3-zone only on wide desktops */
.fxabout-banner {
  background:
    radial-gradient(ellipse 50% 80% at 100% 50%, rgba(16,192,224,.22), transparent 55%),
    #0b1720;
  color: #fff;
  padding: 40px 0;
  overflow-x: clip;
}
.fxabout-banner-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  min-width: 0;
}
.fxabout-banner-proof {
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: 42ch;
}
.fxabout-banner-proof > strong {
  display: block;
  font-size: clamp(44px, 12vw, 64px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
}
.fxabout-banner-proof.is-word > strong {
  font-size: clamp(28px, 7vw, 40px);
  letter-spacing: -.03em;
  line-height: 1.08;
  max-width: 14ch;
}
.fxabout-banner-proof p {
  margin: 10px 0 0;
  max-width: 42ch;
  color: rgba(255,255,255,.75);
  line-height: 1.5;
  font-size: 15px;
}
.fxabout-banner-proof.is-word p {
  max-width: 48ch;
}
.fxabout-banner + .fxabout-quick { padding-top: 28px; }
.fxabout-banner-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  background: #41d48c;
  color: #0b1720;
  flex: none;
}

/* Mid bridge stats */
.fxabout-banner-mid {
  flex: none;
  width: 100%;
  min-width: 0;
  margin: 0;
}
.fxabout-banner-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
}
.fxabout-banner-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 0 0 0 16px;
  border-left: 2px solid rgba(16, 192, 224, .55);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--i, 0) * .1s);
}
.fxabout-banner.is-in .fxabout-banner-stat {
  opacity: 1;
  transform: none;
}
.fxabout-banner-stat-value {
  font-family: var(--font-display, var(--font, Inter, system-ui, sans-serif));
  /* Shared clamp for short + longer values (QA / Docs / Metrics) — no weaker is-word variant */
  font-size: clamp(28px, 7.5vw, 36px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: #10C0E0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.fxabout-banner-stat-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  line-height: 1.25;
}

/* Tablet+: stats in a readable 3-up row; zones still stacked */
@media (min-width: 560px) {
  .fxabout-banner { padding: 44px 0; }
  .fxabout-banner-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
  }
  .fxabout-banner-stat {
    padding: 0 0 0 14px;
  }
  .fxabout-banner-stat-value {
    font-size: clamp(24px, 3.6vw, 36px);
  }
  .fxabout-banner-badge {
    font-size: 13px;
    padding: 14px 18px;
  }
}

/* Wide desktop: balanced proof | stats | badge — only when there is real room */
@media (min-width: 1100px) {
  .fxabout-banner { padding: 48px 0; }
  .fxabout-banner-inner {
    display: grid;
    grid-template-columns: minmax(220px, 0.95fr) minmax(340px, 1.45fr) minmax(200px, auto);
    align-items: center;
    gap: 32px 48px;
  }
  .fxabout-banner-proof {
    width: auto;
    max-width: none;
  }
  .fxabout-banner-proof > strong {
    font-size: clamp(48px, 5vw, 72px);
  }
  .fxabout-banner-proof.is-word > strong {
    font-size: clamp(32px, 3.2vw, 44px);
    max-width: none;
  }
  .fxabout-banner-proof p {
    font-size: 16px;
    max-width: 36ch;
  }
  .fxabout-banner-proof.is-word p {
    max-width: 42ch;
  }
  .fxabout-banner-mid { width: auto; }
  .fxabout-banner-stats {
    gap: 0 8px;
  }
  .fxabout-banner-stat {
    align-items: center;
    text-align: center;
    padding: 0 18px;
    border-left: 1px solid rgba(255, 255, 255, .14);
  }
  .fxabout-banner-stat:first-child {
    border-left: 0;
    padding-left: 0;
  }
  .fxabout-banner-stat:last-child {
    padding-right: 0;
  }
  .fxabout-banner-stat-value {
    font-size: clamp(28px, 2.5vw, 40px);
  }
  .fxabout-banner-stat-label {
    font-size: 12px;
  }
  .fxabout-banner-badge {
    justify-self: end;
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fxabout-banner-stat {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Who */
.fxabout-who-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) {
  .fxabout-who-grid { grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
}
.fxabout-who p { margin: 0 0 16px; font-size: 17px; line-height: 1.7; color: var(--muted); max-width: 54ch; }
.fxabout-who-list {
  list-style: none;
  margin: 4px 0 8px;
  padding: 0;
  max-width: 54ch;
}
.fxabout-who-list li {
  position: relative;
  margin: 0 0 10px;
  padding: 0 0 0 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}
.fxabout-who-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}
.fxabout-who-photo img {
  min-height: 280px;
  max-height: 520px;
  aspect-ratio: 4 / 5;
  height: auto;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 960px) {
  .fxabout-who-photo img {
    max-height: min(520px, 62vh);
  }
}
@media (max-width: 959px) {
  .fxabout-who-photo img {
    max-height: 420px;
    aspect-ratio: 5 / 4;
    min-height: 240px;
  }
}

/* Mission / Vision */
.fxabout-mv { background: #f7fbfd; border-block: 1px solid rgba(11,23,32,.05); }
.fxabout-mv-grid { display: grid; gap: 20px; }
@media (min-width: 800px) {
  .fxabout-mv-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.fxabout-mv article {
  padding: 36px 32px; border-radius: 14px; background: #fff;
  border: 1px solid rgba(11,23,32,.06);
  box-shadow: 0 10px 30px rgba(11,23,32,.04);
}
.fxabout-mv p:last-child { margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted); }

/* Values cards — image-top + hover lift + click spotlight */
.fxabout-values-cards {
  background:
    radial-gradient(ellipse 55% 35% at 12% 0%, rgba(16,192,224,.08), transparent 60%),
    linear-gradient(180deg, #f7fafc 0%, #fff 48%, #f7fafc 100%);
}
@media (min-width: 900px) {
  .fxabout-values-cards .fxabout-section-head {
    max-width: 44ch; /* was inherited 36ch — give kicker/H2 a bit more room on desktop */
  }
}
.fxabout-values-lead {
  margin: 12px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}
.fxabout-value-grid {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
  margin-top: 8px;
}
@media (min-width: 700px) { .fxabout-value-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .fxabout-value-grid { grid-template-columns: repeat(4, 1fr); } }
.fxabout-value-card {
  display: flex; flex-direction: column;
  padding: 0; border-radius: 14px; overflow: hidden;
  background: #fff;
  border: 1px solid rgba(11,23,32,.08);
  cursor: pointer;
  outline: none;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.fxabout-value-card:hover,
.fxabout-value-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(11,23,32,.1);
  border-color: rgba(16,192,224,.35);
}
.fxabout-value-card.is-spotlight {
  border-color: rgba(16,192,224,.55);
  box-shadow:
    0 0 0 2px rgba(16,192,224,.22),
    0 20px 44px rgba(11,23,32,.12);
  transform: translateY(-4px);
}
.fxabout-value-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0b1720;
}
.fxabout-value-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11,23,32,.32));
  pointer-events: none;
  opacity: .85;
  transition: opacity .35s ease;
}
.fxabout-value-card.is-spotlight .fxabout-value-media::after,
.fxabout-value-card:hover .fxabout-value-media::after {
  opacity: .55;
}
.fxabout-value-media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.fxabout-value-card:hover .fxabout-value-media img,
.fxabout-value-card:focus-visible .fxabout-value-media img,
.fxabout-value-card.is-spotlight .fxabout-value-media img {
  transform: scale(1.06);
}
.fxabout-value-copy {
  padding: 18px 18px 20px;
  border-top: 3px solid var(--brand);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.fxabout-value-card.is-spotlight .fxabout-value-copy {
  background: linear-gradient(180deg, rgba(16,192,224,.06), #fff 42%);
}
.fxabout-value-n {
  display: block; margin-bottom: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--brand-deep);
}
.fxabout-value-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-display, var(--font));
  font-size: clamp(18px, 1.6vw, 20px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--ink);
}
.fxabout-value-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  flex: 1;
}
@media (prefers-reduced-motion: reduce) {
  .fxabout-value-card,
  .fxabout-value-media img,
  .fxabout-value-media::after {
    transition: none;
  }
  .fxabout-value-card:hover,
  .fxabout-value-card:focus-visible,
  .fxabout-value-card.is-spotlight {
    transform: none;
  }
  .fxabout-value-card:hover .fxabout-value-media img,
  .fxabout-value-card:focus-visible .fxabout-value-media img,
  .fxabout-value-card.is-spotlight .fxabout-value-media img {
    transform: none;
  }
}

/* Why — soft tinted cards with accent bar + number chip */
.fxabout-why { background: linear-gradient(180deg, #fff, #f9fbff); }
.fxabout-why-grid {
  display: grid; gap: 16px;
}
@media (min-width: 700px) { .fxabout-why-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .fxabout-why-grid { grid-template-columns: repeat(3, 1fr); } }
.fxabout-why-grid article {
  --why-accent: #10c0e0;
  --why-tint: #eef9fc;
  --why-chip-ink: #083040;
  position: relative;
  padding: 22px 20px 22px;
  border-radius: 12px;
  background: var(--why-tint);
  border: 1px solid rgba(11, 23, 32, .06);
  border-top: 3px solid var(--why-accent);
  box-shadow: 0 1px 0 rgba(11, 23, 32, .03);
  transition: transform .22s ease, box-shadow .22s ease;
}
.fxabout-why-grid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(11, 23, 32, .08);
}
.fxabout-why-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.65rem;
  padding: 0 .55rem;
  margin-bottom: 12px;
  border-radius: 6px;
  background: var(--why-accent);
  color: var(--why-chip-ink);
  font-family: var(--font-display, var(--font), Inter, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
}
.fxabout-why-grid h3 {
  margin: 0 0 8px;
  font-family: var(--font-display, var(--font), Inter, system-ui, sans-serif);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--ink);
}
.fxabout-why-grid p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* Tone map (content `tone` / data-tone) */
.fxabout-why-grid article[data-tone="cyan"] {
  --why-accent: #10c0e0;
  --why-tint: #e7f8fc;
  --why-chip-ink: #083040;
}
.fxabout-why-grid article[data-tone="navy"] {
  --why-accent: #12324f;
  --why-tint: #eef2f6;
  --why-chip-ink: #fff;
}
.fxabout-why-grid article[data-tone="coral"] {
  --why-accent: #e85a3a;
  --why-tint: #fff1ec;
  --why-chip-ink: #fff;
}
.fxabout-why-grid article[data-tone="mint"] {
  --why-accent: #1fad6a;
  --why-tint: #eaf8f1;
  --why-chip-ink: #0b1720;
}
.fxabout-why-grid article[data-tone="sky"] {
  --why-accent: #2a8fb8;
  --why-tint: #eef6fb;
  --why-chip-ink: #fff;
}
.fxabout-why-grid article[data-tone="amber"] {
  --why-accent: #c4781a;
  --why-tint: #fff7eb;
  --why-chip-ink: #fff;
}

/* Fallback when tone is omitted — cycle 6 polished accents */
.fxabout-why-grid article:not([data-tone]):nth-child(6n + 1) {
  --why-accent: #10c0e0; --why-tint: #e7f8fc; --why-chip-ink: #083040;
}
.fxabout-why-grid article:not([data-tone]):nth-child(6n + 2) {
  --why-accent: #12324f; --why-tint: #eef2f6; --why-chip-ink: #fff;
}
.fxabout-why-grid article:not([data-tone]):nth-child(6n + 3) {
  --why-accent: #e85a3a; --why-tint: #fff1ec; --why-chip-ink: #fff;
}
.fxabout-why-grid article:not([data-tone]):nth-child(6n + 4) {
  --why-accent: #1fad6a; --why-tint: #eaf8f1; --why-chip-ink: #0b1720;
}
.fxabout-why-grid article:not([data-tone]):nth-child(6n + 5) {
  --why-accent: #2a8fb8; --why-tint: #eef6fb; --why-chip-ink: #fff;
}
.fxabout-why-grid article:not([data-tone]):nth-child(6n + 6) {
  --why-accent: #c4781a; --why-tint: #fff7eb; --why-chip-ink: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .fxabout-why-grid article { transition: none; }
  .fxabout-why-grid article:hover { transform: none; }
}

/* Growth timeline — horizontal year path */
.fxabout-timeline {
  --growth-pin-h: min(100dvh, 920px);
  --growth-scrub-unit: 68vh;
  --growth-sticky-top: 84px;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(16,192,224,.12), transparent 55%),
    linear-gradient(180deg, #fff 0%, #f4fbfd 55%, #fff 100%);
  border-block: 1px solid rgba(11,23,32,.05);
  /* no overflow clip — sticky scrub needs a visible scroll ancestor */
  padding-bottom: 0;
}
.fxabout-timeline.is-scrub {
  padding-bottom: 0;
}
.fxabout-timeline > .wrap {
  padding-bottom: 8px;
}
@media (min-width: 900px) {
  .fxabout-timeline.is-scrub {
    padding-top: 64px;
  }
}
.fxabout-growth-scrub { position: relative; }
.fxabout-growth-pin {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 0 40px;
}
.fxabout-growth-pin-inner {
  width: 100%;
  display: grid;
  gap: 28px;
}

/* Year path */
.fxabout-growth-path {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  padding: 8px 2px 0;
}
.fxabout-growth-path-line {
  position: absolute;
  left: 18px; right: 18px; top: 22px;
  height: 3px; border-radius: 99px;
  background: rgba(11,23,32,.1);
  pointer-events: none; z-index: 0;
}
.fxabout-growth-path-fill {
  display: block; height: 100%; width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand), #7de3f5);
  transform-origin: left center;
  transition: width .45s cubic-bezier(.16,1,.3,1);
}
.fxabout-timeline.is-scrub .fxabout-growth-path-fill {
  transition: width .08s linear;
}
.fxabout-growth-node {
  position: relative; z-index: 1;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  color: var(--muted); font: inherit; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.fxabout-growth-node-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(11,23,32,.18);
  box-shadow: 0 0 0 4px rgba(255,255,255,.85);
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.fxabout-growth-node-year {
  font-size: clamp(11px, 1.6vw, 14px);
  font-weight: 800; letter-spacing: .04em;
  color: inherit; line-height: 1;
  transition: color .3s ease;
}
.fxabout-growth-node.is-passed .fxabout-growth-node-dot,
.fxabout-growth-node.is-active .fxabout-growth-node-dot {
  border-color: var(--brand);
  background: var(--brand);
}
.fxabout-growth-node.is-active {
  color: var(--ink);
}
.fxabout-growth-node.is-active .fxabout-growth-node-dot {
  transform: scale(1.28);
  box-shadow: 0 0 0 5px rgba(16,192,224,.22), 0 0 0 4px rgba(255,255,255,.9);
}
.fxabout-growth-node:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Stage + panel */
.fxabout-growth-stage {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}
.fxabout-growth-nav {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(11,23,32,.12);
  background: #fff; color: var(--ink);
  display: inline-grid; place-items: center;
  font-size: 26px; line-height: 1; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.fxabout-growth-nav:hover:not(:disabled) {
  border-color: rgba(16,192,224,.45);
  color: var(--brand-deep);
  background: rgba(16,192,224,.08);
}
.fxabout-growth-nav:disabled { opacity: .35; cursor: default; }
.fxabout-growth-nav:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.fxabout-growth-viewport {
  position: relative;
  min-width: 0;
  border-radius: 16px;
}
.fxabout-growth-track {
  list-style: none; margin: 0; padding: 0;
  position: relative;
}

/* Desktop / scrub: stacked crossfade panels */
.fxabout-timeline.is-scrub .fxabout-growth-scrub {
  height: calc(
    (var(--growth-pin-h) - var(--growth-sticky-top))
    + (var(--growth-steps, 7) - 1) * var(--growth-scrub-unit)
  );
}
.fxabout-timeline.is-scrub .fxabout-growth-pin {
  position: sticky;
  top: var(--growth-sticky-top);
  height: calc(var(--growth-pin-h) - var(--growth-sticky-top));
  min-height: 520px;
  padding: 16px 0 24px;
  box-sizing: border-box;
}
.fxabout-timeline.is-scrub .fxabout-growth-track {
  display: grid;
  min-height: min(52vh, 520px);
}
.fxabout-timeline.is-scrub .fxabout-growth-item {
  grid-area: 1 / 1;
  display: grid;
  gap: 28px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(28px);
  transition:
    opacity .5s cubic-bezier(.16,1,.3,1),
    transform .55s cubic-bezier(.16,1,.3,1),
    visibility 0s linear .5s;
}
.fxabout-timeline.is-scrub .fxabout-growth-item.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
@media (min-width: 900px) {
  .fxabout-timeline.is-scrub .fxabout-growth-item {
    grid-template-columns: 1.05fr .95fr;
    gap: 40px;
  }
}

/* Mobile / carousel: horizontal swipe */
.fxabout-timeline.is-carousel .fxabout-growth-scrub { height: auto; }
.fxabout-timeline.is-carousel .fxabout-growth-pin {
  position: relative;
  height: auto;
  padding: 8px 0 36px;
}
.fxabout-timeline.is-carousel .fxabout-growth-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fxabout-timeline.is-carousel .fxabout-growth-viewport::-webkit-scrollbar { display: none; }
.fxabout-timeline.is-carousel .fxabout-growth-track {
  display: flex;
  gap: 0;
}
.fxabout-timeline.is-carousel .fxabout-growth-item {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
  gap: 22px;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.fxabout-growth-media { position: relative; margin: 0; }
.fxabout-growth-media figure {
  margin: 0; overflow: hidden; border-radius: 12px; background: #d9e7ec;
  box-shadow: 0 24px 56px rgba(11,23,32,.12); aspect-ratio: 4 / 3;
}
.fxabout-growth-media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1);
  transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .45s ease;
}
/* Subtle Ken Burns on the active slide (disabled under prefers-reduced-motion) */
.fxabout-growth-item.is-in .fxabout-growth-media img,
.fxabout-growth-item.is-active .fxabout-growth-media img {
  transform: scale(1.07);
  transition: transform 7.5s ease-out, opacity .45s ease;
}
.fxabout-growth-team {
  position: absolute; right: 16px; bottom: 16px; min-width: 96px;
  padding: 14px 16px 12px; border-radius: 8px;
  background: rgba(11,23,32,.88); color: #fff;
  opacity: 0; transform: translateY(12px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1); transition-delay: .12s;
}
.fxabout-growth-item.is-in .fxabout-growth-team,
.fxabout-growth-item.is-active .fxabout-growth-team { opacity: 1; transform: none; }
.fxabout-growth-team strong {
  display: block; font-size: clamp(28px, 4vw, 40px); line-height: 1;
  letter-spacing: -.04em; font-weight: 800;
}
.fxabout-growth-team strong::after {
  content: ""; display: block; width: 22px; height: 3px; margin: 8px 0 6px;
  background: var(--brand); border-radius: 2px;
}
.fxabout-growth-team span {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.fxabout-growth-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.fxabout-timeline-year {
  font-size: 13px; font-weight: 800; letter-spacing: .14em; color: var(--brand-deep);
}
.fxabout-growth-focus {
  display: inline-flex; padding: 5px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: rgba(16,192,224,.14); border: 1px solid rgba(16,192,224,.28);
}
.fxabout-growth-copy h3 {
  margin: 0 0 10px; font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800; letter-spacing: -.025em; color: var(--ink); line-height: 1.15;
}
.fxabout-growth-copy p { margin: 0 0 18px; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 44ch; }
.fxabout-growth-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.fxabout-growth-dots i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
  opacity: 0; transform: scale(.4);
  transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(.2s + var(--d, 0) * 35ms);
}
.fxabout-growth-item.is-in .fxabout-growth-dots i,
.fxabout-growth-item.is-active .fxabout-growth-dots i { opacity: .85; transform: scale(1); }
.fxabout-growth-item.is-finale .fxabout-growth-focus { color: var(--brand-deep); }
.fxabout-growth-item.is-finale .fxabout-growth-team {
  background: linear-gradient(135deg, #0b1720, #0e3a48);
}

.fxabout-growth-hint {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; margin: 0;
  font-size: 13px; font-weight: 700; color: var(--muted);
}
.fxabout-growth-hint-count { color: var(--ink); letter-spacing: .02em; }
.fxabout-growth-hint-desktop { display: none; }
.fxabout-growth-hint-mobile { display: inline; }
.fxabout-timeline.is-scrub .fxabout-growth-hint-desktop { display: inline; }
.fxabout-timeline.is-scrub .fxabout-growth-hint-mobile { display: none; }

@media (max-width: 699px) {
  .fxabout-growth-path-line { left: 12px; right: 12px; top: 18px; }
  .fxabout-growth-node-dot { width: 12px; height: 12px; }
  .fxabout-growth-node-year { font-size: 10px; letter-spacing: .02em; }
  .fxabout-growth-stage { grid-template-columns: 1fr; gap: 14px; }
  .fxabout-growth-nav {
    position: absolute; z-index: 3; top: 38%;
    width: 38px; height: 38px; font-size: 22px;
    box-shadow: 0 8px 20px rgba(11,23,32,.12);
  }
  .fxabout-growth-stage { position: relative; }
  .fxabout-growth-nav-prev { left: 6px; }
  .fxabout-growth-nav-next { right: 6px; }
}

/* Services — interactive capability cards */
.fxabout-services {
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(16, 192, 224, .08), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(16, 192, 224, .06), transparent 50%),
    #fff;
}
.fxabout-services-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 16px; margin-bottom: 28px;
}
.fxabout-svc-grid {
  display: grid; gap: 18px;
}
@media (min-width: 700px) { .fxabout-svc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .fxabout-svc-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.fxabout-svc-card {
  --svc-lift: 0px;
  --svc-accent: rgba(16, 192, 224, 0);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
  padding: 26px 24px 22px;
  border-radius: 14px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(160deg, rgba(16, 192, 224, .35), rgba(11, 23, 32, .06) 55%, rgba(11, 23, 32, .06)) border-box;
  border: 1px solid transparent;
  border-top: 3px solid var(--brand);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(11, 23, 32, .04);
  overflow: hidden;
  transform: translateY(var(--svc-lift));
  transition:
    transform .28s cubic-bezier(.22, 1, .36, 1),
    box-shadow .28s ease,
    border-color .28s ease,
    background .28s ease;
}
.fxabout-svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(16, 192, 224, .07) 0%, transparent 42%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.fxabout-svc-card:hover,
.fxabout-svc-card:focus-visible {
  --svc-lift: -5px;
  color: inherit;
  border-color: rgba(16, 192, 224, .45);
  border-top-color: var(--brand-deep);
  box-shadow:
    0 18px 40px rgba(11, 23, 32, .1),
    0 0 0 1px rgba(16, 192, 224, .12);
  outline: none;
}
.fxabout-svc-card:hover::before,
.fxabout-svc-card:focus-visible::before {
  opacity: 1;
}
.fxabout-svc-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.fxabout-svc-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.fxabout-svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-wash);
  color: var(--brand-deep);
  box-shadow: inset 0 0 0 1px rgba(16, 192, 224, .22);
  transition: background .25s ease, color .25s ease, transform .28s ease, box-shadow .25s ease;
}
.fxabout-svc-icon svg {
  width: 22px;
  height: 22px;
}
.fxabout-svc-card:hover .fxabout-svc-icon,
.fxabout-svc-card:focus-visible .fxabout-svc-icon {
  background: var(--brand);
  color: #083040;
  transform: scale(1.06);
  box-shadow: 0 8px 18px rgba(16, 192, 224, .35);
}
.fxabout-svc-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  color: rgba(11, 23, 32, .28);
  font-variant-numeric: tabular-nums;
  transition: color .25s ease;
}
.fxabout-svc-card:hover .fxabout-svc-num,
.fxabout-svc-card:focus-visible .fxabout-svc-num {
  color: var(--brand-deep);
}

.fxabout-svc-title {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--ink);
  transition: color .2s ease;
}
.fxabout-svc-title a {
  color: inherit;
  text-decoration: none;
}
.fxabout-svc-title a:hover,
.fxabout-svc-title a:focus-visible {
  color: var(--brand-deep);
}
.fxservices-group-copy .fxabout-svc-title a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}
.fxabout-svc-card:hover .fxabout-svc-title,
.fxabout-svc-card:focus-visible .fxabout-svc-title {
  color: var(--brand-deep);
}
.fxabout-svc-blurb {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 34ch;
}

.fxabout-svc-items {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 7px;
  flex: 1;
}
.fxabout-svc-items li {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(11, 23, 32, .72);
  padding-left: 14px;
  position: relative;
}
.fxabout-svc-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}

.fxabout-svc-explore {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(11, 23, 32, .06);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--brand-deep);
  transition: gap .25s ease, color .2s ease;
}
.fxabout-svc-card:hover .fxabout-svc-explore,
.fxabout-svc-card:focus-visible .fxabout-svc-explore {
  gap: 10px;
  color: var(--ink);
}

@media (max-width: 699px) {
  .fxabout-svc-card { padding: 22px 20px 20px; }
  .fxabout-svc-blurb { max-width: none; }
}

/* Industries + case studies */
.fxabout-industries {
  background: #f7fbfd;
  border-block: 1px solid rgba(11,23,32,.05);
}
.fxabout-ind-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 36px;
}
.fxabout-ind-filters button {
  appearance: none;
  border: 1px solid rgba(11,23,32,.1);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.fxabout-ind-filters button:hover {
  border-color: rgba(16,192,224,.45);
  color: var(--brand-deep);
}
.fxabout-ind-filters button.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.fxabout-ind-stack { display: grid; gap: 28px; }
.fxabout-ind-panel {
  background: #fff;
  border: 1px solid rgba(11,23,32,.07);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(11,23,32,.05);
  transition: opacity .35s ease, transform .35s ease;
}
.fxabout-ind-panel.is-hidden {
  display: none;
}
.fxabout-ind-main {
  display: grid;
  gap: 0;
}
@media (min-width: 900px) {
  .fxabout-ind-main { grid-template-columns: .9fr 1.1fr; }
}
.fxabout-ind-media {
  margin: 0;
  min-height: 240px;
  background: #d9e7ec;
}
.fxabout-ind-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}
.fxabout-ind-copy {
  padding: 28px 28px 22px;
}
.fxabout-ind-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 12px;
}
.fxabout-ind-copy h3 {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--ink);
}
.fxabout-ind-copy > p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 54ch;
}
.fxabout-ind-focus {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fxabout-ind-focus li {
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
  color: var(--brand-deep);
  background: rgba(16,192,224,.12);
  border: 1px solid rgba(16,192,224,.22);
}
.fxabout-ind-cases {
  padding: 0 22px 24px;
  border-top: 1px solid rgba(11,23,32,.06);
}
.fxabout-ind-cases-label {
  margin: 18px 6px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.fxabout-ind-case-grid {
  display: grid;
  gap: 12px;
}
@media (min-width: 800px) {
  .fxabout-ind-case-grid { grid-template-columns: repeat(2, 1fr); }
}
.fxabout-ind-case {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: #f7fbfd;
  border: 1px solid rgba(16,192,224,.16);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@media (min-width: 640px) {
  .fxabout-ind-case { grid-template-columns: 120px 1fr; align-items: start; }
}
.fxabout-ind-case:hover {
  transform: translateY(-2px);
  border-color: rgba(16,192,224,.4);
  box-shadow: 0 14px 32px rgba(11,23,32,.08);
}
.fxabout-ind-case-metric {
  padding: 14px 12px;
  border-radius: 10px;
  background: #0b1720;
  color: #fff;
  text-align: center;
}
.fxabout-ind-case-metric strong {
  display: block;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: #fff;
}
.fxabout-ind-case-metric span {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,.7);
}
.fxabout-ind-case-client {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.fxabout-ind-case-body h4 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.3;
}
.fxabout-ind-case-body p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.fxabout-ind-case-cta {
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-deep);
}
.fxabout-industry-cta {
  margin: 32px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
}

/* Process rail */
.fxabout-process-intro {
  display: grid; gap: 28px; align-items: center; margin-bottom: 36px;
}
@media (min-width: 960px) {
  .fxabout-process-intro { grid-template-columns: 1.05fr .95fr; gap: 48px; }
}
.fxabout-process-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 16px;
}
.fxabout-process-head > div { max-width: 52ch; }
.fxabout-process--rich .fxabout-process-head > div { max-width: 62ch; }
.fxabout-process-head .fxabout-h2 { margin-bottom: 10px; }
.fxabout-process-head p { margin: 0; color: var(--muted); line-height: 1.6; }
.fxabout-process-photo { margin: 0; }
.fxabout-process-photo img { min-height: 280px; max-height: 420px; }
.fxabout-process-rail {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .fxabout-process-rail { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .fxabout-process-rail { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) {
  .fxabout-process-rail { grid-template-columns: repeat(7, 1fr); gap: 12px; }
}
.fxabout-process-rail article {
  display: flex; flex-direction: column;
  padding: 0; border-radius: 12px; overflow: hidden;
  background: #fff; border: 1px solid rgba(11,23,32,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.fxabout-process-rail article:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(11,23,32,0.08);
}
.fxabout-process-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0b1720;
}
.fxabout-process-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(11,23,32,0.28));
  pointer-events: none;
}
.fxabout-process-media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.fxabout-process-rail article:hover .fxabout-process-media img {
  transform: scale(1.05);
}
.fxabout-process-copy {
  padding: 16px 14px 18px;
  border-top: 3px solid var(--brand);
  flex: 1;
}
.fxabout-process-n {
  display: block; margin-bottom: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--brand-deep);
}
.fxabout-process-rail h3 {
  margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--ink);
  letter-spacing: -.02em; line-height: 1.2;
}
.fxabout-process-rail p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
/* Richer stage copy (About Process): keep cards readable — avoid 7-col squeeze */
@media (min-width: 700px) {
  .fxabout-process-rail--rich { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .fxabout-process-rail--rich { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1280px) {
  .fxabout-process-rail--rich { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
.fxabout-process-rail--rich .fxabout-process-copy { padding: 18px 16px 20px; }
.fxabout-process-rail--rich p { font-size: 14px; line-height: 1.55; }
.fxabout-process-gets {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; gap: 6px;
}
.fxabout-process-gets li {
  position: relative;
  padding-left: 14px;
  font-size: 12.5px; line-height: 1.4; font-weight: 600;
  color: var(--ink);
}
.fxabout-process-gets li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
}
.fxabout-faq-layout { display: grid; gap: 28px; }
@media (min-width: 960px) {
  .fxabout-faq-layout {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 48px; align-items: start;
  }
}
.fxabout-faq-list { max-width: 720px; }
.fxabout-faq .faq-item:first-child { padding-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .fxabout-process-rail article,
  .fxabout-process-media img { transition: none; }
  .fxabout-process-rail article:hover { transform: none; }
  .fxabout-process-rail article:hover .fxabout-process-media img { transform: none; }
}

/* Culture */
.fxabout-culture-top {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 16px; margin-bottom: 32px;
}
.fxabout-culture-layout { display: grid; gap: 28px; align-items: stretch; }
@media (min-width: 960px) {
  .fxabout-culture-layout { grid-template-columns: 1fr 1fr; gap: 40px; }
}
.fxabout-culture-cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .fxabout-culture-cards { grid-template-columns: 1fr 1fr; }
}
.fxabout-culture-lead {
  margin: 12px 0 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.fxabout-culture-cards article {
  padding: 22px 20px; border-radius: 12px;
  background: var(--culture-tint, #f7fbfd);
  border: 1px solid var(--culture-border, rgba(16,192,224,.18));
}
.fxabout-culture-cards article[data-tone="cyan"] {
  --culture-tint: #e7f8fc;
  --culture-border: rgba(16,192,224,.28);
}
.fxabout-culture-cards article[data-tone="mint"] {
  --culture-tint: #eaf8f1;
  --culture-border: rgba(31,173,106,.24);
}
.fxabout-culture-cards article[data-tone="sky"] {
  --culture-tint: #eef6fb;
  --culture-border: rgba(42,143,184,.24);
}
.fxabout-culture-cards article[data-tone="navy"] {
  --culture-tint: #eef2f6;
  --culture-border: rgba(18,50,79,.2);
}
.fxabout-culture-cards h3 { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: var(--ink); }
.fxabout-culture-cards p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* Dark presence */
.fxabout-dark {
  margin: 8px 0 0; padding: 64px 0;
  background:
    radial-gradient(ellipse 60% 80% at 0% 50%, rgba(16,192,224,.18), transparent 50%),
    linear-gradient(135deg, #0b1720, #143246);
  color: #fff;
}
.fxabout-dark .fxabout-h2 { color: #fff; }
.fxabout-dark .fxabout-kicker { color: var(--brand); }
.fxabout-dark-grid { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .fxabout-dark-grid { grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
}
.fxabout-presence { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.fxabout-presence strong { display: block; font-size: 18px; font-weight: 800; color: #fff; }
.fxabout-presence span { color: rgba(255,255,255,.7); font-size: 14.5px; }
.fxabout-presence-photo {
  margin: 0; border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 56px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
}
.fxabout-presence-photo img { min-height: 300px; max-height: 440px; }
.fxabout-dark-cta { margin-top: 32px; }
.fxabout-dark--cta-only { padding: 48px 0; }
.fxabout-dark--cta-only .fxabout-dark-cta { margin-top: 0; max-width: none; width: 100%; }
.fxabout-dark--cta-only .fxabout-dark-cta .fxabout-h2 {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.2;
  max-width: 48rem;
}
.fxabout-dark--cta-only .fxabout-dark-cta .fxabout-dark-lead {
  margin: 0 0 22px;
  max-width: 52rem;
  color: rgba(255, 255, 255, .78);
}
.fxabout-dark-cta h3 {
  margin: 0 0 18px; font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.2;
}
.fxabout .btn-ghost-light {
  background: transparent; color: #fff !important;
  border: 1px solid rgba(255,255,255,.3);
}
.fxabout .btn-ghost-light:hover {
  border-color: var(--brand); color: var(--brand) !important;
}

/* Quick form */
.fxabout-quick { margin: 0; padding: 28px 0 36px; background: #f7fbfd; }
.fxabout-dark + .fxabout-quick { padding-top: 36px; }
.fxabout-quick + .section.proposal,
.fxabout-quick + .about-lead { margin-top: 0; }
.fxabout-quick-inner {
  display: grid;
  gap: 28px;
  align-items: center;
  padding: 44px clamp(24px, 4vw, 48px);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, rgba(16,192,224,.22), transparent 50%),
    linear-gradient(135deg, #0b1720, #143246);
  color: #fff;
}
@media (min-width: 900px) {
  .fxabout-quick-inner {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1.05fr);
    gap: 40px 56px;
    padding: 48px clamp(28px, 4vw, 52px);
  }
}
.fxabout-quick-copy { min-width: 0; }
.fxabout-quick .fxabout-h2 { color: #fff; margin-bottom: 10px; }
.fxabout-quick-copy > p {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 16px;
  line-height: 1.6;
  max-width: 42ch;
}
.fxabout-quick-form {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 22px 20px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
@media (min-width: 900px) {
  .fxabout-quick-form { padding: 26px 24px; }
}
.fxabout-quick-label {
  display: block;
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
}
.fxabout-quick-form-row {
  display: grid;
  gap: 10px;
}
@media (min-width: 640px) {
  .fxabout-quick-form-row { grid-template-columns: 1fr auto; align-items: stretch; }
}
.fxabout-quick-form input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  padding: 16px 18px;
  font: inherit;
  font-size: 16px;
  background: rgba(255,255,255,.08);
  color: #fff;
}
.fxabout-quick-form input::placeholder { color: rgba(255,255,255,.45); }
.fxabout-quick-form input:focus {
  outline: none;
  border-color: rgba(16,192,224,.65);
  box-shadow: 0 0 0 3px rgba(16,192,224,.18);
  background: rgba(255,255,255,.1);
}
.fxabout-quick-form .btn {
  white-space: nowrap;
  padding-inline: 22px;
  justify-self: stretch;
}
@media (min-width: 640px) {
  .fxabout-quick-form .btn { justify-self: auto; }
}
.fxabout-quick-note {
  margin: 18px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,.62) !important;
  max-width: none !important;
}
.fxabout-quick-note a { color: var(--brand); font-weight: 700; }

/* Careers quick-apply form — stacked fields inside dark CTA */
.fxabout-careers-form { gap: 14px; }
.fxabout-quick-form-fields {
  display: grid;
  gap: 8px 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 520px) {
  .fxabout-quick-form-fields {
    grid-template-columns: 1fr 1fr;
  }
  .fxabout-quick-label-full,
  .fxabout-quick-field-full {
    grid-column: 1 / -1;
  }
}
.fxabout-careers-form .btn { width: 100%; }
@media (min-width: 520px) {
  .fxabout-careers-form .btn { width: auto; justify-self: start; }
}


/* About sibling pages — modular extensions */
.fxabout-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.fxabout-dark-lead {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  max-width: 48ch;
}
.fxabout-growth-hub-panel {
  display: grid;
  gap: 28px;
  padding: 36px 32px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(14, 165, 185, .08), transparent 42%),
    linear-gradient(180deg, #f7fbfc 0%, #eef5f8 100%);
  border: 1px solid rgba(11, 23, 32, .07);
}
.fxabout-growth-hub-panel .fxabout-section-head {
  margin-bottom: 0;
}
.fxabout-growth-hub-panel .fxabout-section-head p:last-child {
  max-width: 52ch;
}
.fxabout-growth-hub-panel .fxabout-inline-actions {
  margin-top: 0;
}

.fxabout-sub-pods-grid {
  display: grid;
  gap: 22px;
}
@media (min-width: 900px) {
  .fxabout-sub-pods-grid { grid-template-columns: 1fr 1fr; }
}
.fxabout-sub-pod {
  display: grid;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(11,23,32,.07);
  box-shadow: 0 14px 40px rgba(11,23,32,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.fxabout-sub-pod:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(11,23,32,.1);
}
.fxabout-sub-pod figure { margin: 0; min-height: 200px; background: #d9e7ec; }
.fxabout-sub-pod figure img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.fxabout-sub-pod > div { padding: 22px 22px 24px; }
.fxabout-sub-pod h3 {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--ink);
}
.fxabout-sub-pod p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.fxabout-sub-pod ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fxabout-sub-pod li {
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  color: var(--brand-deep);
  background: rgba(16,192,224,.12);
  border: 1px solid rgba(16,192,224,.22);
}

.fxabout-sub-explore { background: #f7fbfd; border-top: 1px solid rgba(11,23,32,.05); }
.fxabout-sub-explore-grid {
  display: grid;
  gap: 12px;
}
@media (min-width: 700px) {
  .fxabout-sub-explore-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .fxabout-sub-explore-grid { grid-template-columns: repeat(3, 1fr); }
}
.fxabout-sub-explore-grid a {
  display: grid;
  gap: 4px;
  padding: 20px 22px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(11,23,32,.07);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.fxabout-sub-explore-grid a:hover {
  border-color: rgba(16,192,224,.45);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(11,23,32,.07);
}
.fxabout-sub-explore-grid strong {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
.fxabout-sub-explore-grid span {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}

/* Motion */
@media (prefers-reduced-motion: no-preference) {
  .fxabout [data-fxabout-anim] {
    opacity: 0; transform: translateY(22px);
    transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
    transition-delay: calc(var(--i, 0) * 55ms);
  }
  .fxabout.is-ready .fxabout-hero [data-fxabout-anim],
  .fxabout.is-ready .fxabout-mosaic [data-fxabout-anim],
  .fxabout [data-fxabout-anim].is-in {
    opacity: 1; transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fxabout [data-fxabout-anim],
  .fxabout-growth-media img,
  .fxabout-growth-team,
  .fxabout-growth-dots i,
  .fxabout-growth-path-fill,
  .fxabout-growth-item,
  .fxabout-growth-node-dot,
  .fxabout-hero-media-frame img {
    opacity: 1 !important; transform: none !important; transition: none !important; filter: none !important;
    animation: none !important;
  }
  .fxabout-timeline.is-scrub .fxabout-growth-item:not(.is-active) {
    opacity: 0 !important; visibility: hidden !important;
  }
  .fxabout-timeline.is-carousel .fxabout-growth-viewport {
    scroll-behavior: auto;
  }
}

/* ===== Services hub (/services/) ===== */
.fxservices-groups {
  display: grid;
  gap: 28px;
}
.fxservices-group {
  border: 1px solid rgba(11, 23, 32, .08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(11, 23, 32, .06);
  overflow: hidden;
}
.fxservices-group-main {
  display: grid;
  gap: 0;
}
@media (max-width: 899px) {
  .fxservices-group-photo {
    order: -1;
  }
}
@media (min-width: 900px) {
  .fxservices-group-main {
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
    align-items: stretch;
  }
  .fxservices-group:nth-child(even) .fxservices-group-main,
  .fxservices-group--alt .fxservices-group-main {
    direction: rtl;
  }
  .fxservices-group:nth-child(even) .fxservices-group-main > *,
  .fxservices-group--alt .fxservices-group-main > * {
    direction: ltr;
  }
}
.fxservices-group-copy {
  padding: 28px 26px 30px;
  min-width: 0;
}
.fxservices-group-photo {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.fxservices-group-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  min-height: 0;
  /* Never let soft-parallax move/crop service card art */
  transform: none !important;
}
@media (min-width: 900px) {
  /*
   * Copy column sets card height. Photo column stretches to match.
   * Explicit width/height on the img (replaced element) — inset alone
   * does not shrink <img> to the figure; that left 1200px natural images
   * overflowing and looking cropped/blurry.
   */
  .fxservices-group-photo {
    position: relative;
    align-self: stretch;
    min-height: 0;
    padding: 0;
  }
  .fxservices-group-photo img {
    position: absolute;
    top: 22px;
    right: 22px;
    bottom: 22px;
    left: 0;
    width: calc(100% - 22px);
    height: calc(100% - 44px);
    aspect-ratio: auto;
    border-radius: 12px;
    object-fit: cover;
    object-position: center 30%;
    transform: none !important;
  }
  .fxservices-group--alt .fxservices-group-photo img,
  .fxservices-group:nth-child(even) .fxservices-group-photo img {
    left: 22px;
    right: 0;
    width: calc(100% - 22px);
  }
}
@media (max-width: 899px) {
  .fxservices-group-photo img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 0;
  }
}
.fxservices-links {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 8px;
}
@media (min-width: 560px) {
  .fxservices-links { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
}
.fxservices-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
}
.fxservices-links a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex: 0 0 auto;
}
.fxservices-links a:hover { color: var(--brand-deep); }
.fxservices-explore { margin-top: 4px; }
.fxservices-indy { background: rgba(16, 192, 224, .04); }
/* Intro / Indy side photos on /services/ — match text height, no 340px floor */
@media (min-width: 960px) {
  .fxservices .fxabout-who-grid {
    align-items: stretch;
  }
  .fxservices .fxabout-who-photo {
    position: relative;
    align-self: stretch;
    min-height: 0;
    box-shadow: 0 24px 56px rgba(11,23,32,.12);
  }
  .fxservices .fxabout-who-photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
    transform: none !important;
  }
}
.fxservices .fxabout-process-grid {
  display: grid;
  gap: 18px;
}
@media (min-width: 760px) {
  .fxservices .fxabout-process-grid { grid-template-columns: repeat(4, 1fr); }
}
.fxservices .fxabout-process-step {
  border: 1px solid rgba(11, 23, 32, .08);
  border-radius: 14px;
  padding: 22px 20px;
  background: #fff;
}

/* Service landing pages (/services/{parent}/{slug}/) — breadcrumb inside .ai-hero */
.fxsvc-craft .ai-hero {
  padding-top: 14px;
}
.fxsvc-craft > .fxsvc-breadcrumb,
.ai-page > .fxsvc-breadcrumb,
.fxservices > .fxsvc-breadcrumb,
.fxsvc-hub-legacy > .fxsvc-breadcrumb {
  padding-block: 10px 6px;
}
.fxsvc-breadcrumb {
  padding-block: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(11, 23, 32, .5);
}
.fxsvc-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fxsvc-breadcrumb-list li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
.fxsvc-breadcrumb-list li:not(:first-child)::before {
  content: "/";
  margin-inline: 10px;
  color: rgba(11, 23, 32, .28);
  font-weight: 500;
  pointer-events: none;
}
.fxsvc-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-block: 8px;
  padding-inline: 0;
  border-radius: 8px;
  color: var(--brand-deep);
  text-decoration: none;
  font-weight: 700;
  transition: color .15s ease, background .15s ease;
}
.fxsvc-breadcrumb a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fxsvc-breadcrumb a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.fxsvc-breadcrumb [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-block: 8px;
  color: rgba(11, 23, 32, .55);
  font-weight: 600;
}
@media (max-width: 759px) {
  .fxsvc-breadcrumb a,
  .fxsvc-breadcrumb [aria-current="page"] {
    min-height: 44px;
  }
}
.fxsvc-deliverables-grid {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .fxsvc-deliverables-grid { grid-template-columns: 1fr 1fr; gap: 14px 20px; }
}
.fxsvc-deliverables-grid li {
  position: relative;
  padding: 16px 18px 16px 44px;
  border: 1px solid rgba(11, 23, 32, .08);
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(11, 23, 32, .82);
}
.fxsvc-deliverables-grid li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}
.fxsvc-related-grid {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}
@media (min-width: 640px) {
  .fxsvc-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .fxsvc-related-grid { grid-template-columns: repeat(3, 1fr); }
}
.fxsvc-related-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px;
  border: 1px solid rgba(11, 23, 32, .08);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.fxsvc-related-card:hover {
  border-color: rgba(16, 192, 224, .35);
  box-shadow: 0 8px 28px rgba(11, 23, 32, .06);
}
.fxsvc-related-card strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.fxsvc-related-card span {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-deep);
}

.fxsvc-page--rich .fxabout-hero-lead {
  max-width: 58ch;
}
.fxsvc-section-lead {
  margin: 12px 0 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(11, 23, 32, .72);
}
.fxsvc-section-lead-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 68ch;
}
.fxsvc-deliverables-grid--rich li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 20px 20px 48px;
}
.fxsvc-deliverables-grid--rich li strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
.fxsvc-deliverables-grid--rich li span {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(11, 23, 32, .72);
}
.fxsvc-why-grid {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}
@media (min-width: 720px) {
  .fxsvc-why-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .fxsvc-why-grid { grid-template-columns: repeat(4, 1fr); }
}
.fxsvc-why-card {
  position: relative;
  padding: 22px 20px 20px;
  border-radius: 14px;
  border: 1px solid rgba(11, 23, 32, .06);
  background: #f4fbfc;
}
.fxsvc-why-card.tone-cyan { background: #e7f8fc; border-top: 3px solid #10C0E0; }
.fxsvc-why-card.tone-navy { background: #eef2f6; border-top: 3px solid #12324f; }
.fxsvc-why-card.tone-coral { background: #fff1ec; border-top: 3px solid #e85a3a; }
.fxsvc-why-card.tone-mint { background: #eaf8f1; border-top: 3px solid #1fad6a; }
.fxsvc-why-num {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--brand-deep);
}
.fxsvc-why-card h3 {
  margin: 0 0 8px;
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
.fxsvc-why-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(11, 23, 32, .72);
}
.fxsvc-step-gets {
  margin: 12px 0 0;
  padding: 0 0 0 16px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(11, 23, 32, .68);
}
.fxsvc-page .fxabout-faq { background: #f7fafb; }


/* Leaf service craft — case studies grid */
.fxsvc-cases { padding-top: 8px; }
.fxsvc-cases-grid {
  display: grid;
  gap: 18px;
  margin-top: 8px;
}
@media (min-width: 720px) {
  .fxsvc-cases-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .fxsvc-cases-grid { grid-template-columns: repeat(3, 1fr); }
}
.fxsvc-case {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(11, 23, 32, 0.08);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.fxsvc-case:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(11, 23, 32, 0.1);
}
.fxsvc-case-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--gray-01);
}
.fxsvc-case-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.fxsvc-case:hover .fxsvc-case-media img { transform: scale(1.04); }
.fxsvc-case-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 20px;
}
.fxsvc-case-metric {
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--brand-deep);
  text-transform: uppercase;
}
.fxsvc-case-copy strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.2;
}
.fxsvc-case-copy span {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

/* Contact page redesign */
.fxcontact { background: #fff; }
.fxcontact-hero {
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(16, 192, 224, 0.14), transparent 55%),
    linear-gradient(180deg, var(--brand-wash) 0%, #fff 78%);
  padding: 48px 0 28px;
  border-bottom: 1px solid rgba(11, 23, 32, 0.06);
}
.fxcontact-hero-inner { max-width: 760px; }
.fxcontact-hero h1 {
  max-width: 16ch;
  margin: 0 0 12px;
}
.fxcontact-hero .lead-text { max-width: 52ch; margin-bottom: 22px; }
.fxcontact-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.fxcontact-quick { padding: 28px 0 8px; }
.fxcontact-quick-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .fxcontact-quick-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .fxcontact-quick-grid { grid-template-columns: repeat(4, 1fr); }
}
.fxcontact-quick-card {
  display: grid;
  gap: 6px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(11, 23, 32, 0.08);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(11, 23, 32, 0.04);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.fxcontact-quick-card:hover {
  border-color: rgba(16, 192, 224, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(16, 192, 224, 0.12);
}
.fxcontact-quick-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.fxcontact-quick-card strong {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  word-break: break-word;
}
.fxcontact-quick-card span:last-child {
  font-size: 13px;
  color: var(--muted);
}

.fxcontact-main { padding-top: 36px; }
.fxcontact-main-grid {
  display: grid;
  gap: 24px;
  align-items: start;
}
@media (min-width: 960px) {
  .fxcontact-main-grid { grid-template-columns: 1.15fr 0.85fr; gap: 28px; }
}
.fxcontact-form-panel,
.fxcontact-aside-card {
  background: #fff;
  border: 1px solid rgba(11, 23, 32, 0.08);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(11, 23, 32, 0.06);
}
.fxcontact-form-panel { padding: 28px 26px 24px; }
.fxcontact-form-head { margin-bottom: 8px; }
.fxcontact-form-head .h2 {
  font-size: clamp(26px, 3.4vw, 34px);
  margin: 4px 0 8px;
}
.fxcontact-form-head .lead-text { margin: 0 0 6px; font-size: 15px; }
.fxcontact-form .proposal-submit { margin-top: 14px; }
.fxcontact-aside { display: grid; gap: 16px; }
.fxcontact-aside-card { padding: 22px 22px 20px; }
.fxcontact-aside-card--dark {
  background: linear-gradient(160deg, #0b1720 0%, #123040 100%);
  border-color: transparent;
  color: #e8f4f8;
}
.fxcontact-aside-card--dark .eyebrow { color: var(--brand); }
.fxcontact-aside-card--dark h3 {
  margin: 6px 0 10px;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: #fff;
}
.fxcontact-aside-card--dark p {
  margin: 0 0 16px;
  color: rgba(232, 244, 248, 0.78);
  font-size: 14px;
  line-height: 1.5;
}
.fxcontact-aside-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.fxcontact-aside-card--dark .btn-link { color: var(--brand); }
.fxcontact-expect {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.fxcontact-expect li {
  display: grid;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(11, 23, 32, 0.08);
}
.fxcontact-expect li:first-child { border-top: 0; padding-top: 0; }
.fxcontact-expect strong {
  font-size: 15px;
  color: var(--ink);
}
.fxcontact-expect span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.fxcontact-locations {
  background: linear-gradient(180deg, #f7fafb 0%, #fff 100%);
  border-top: 1px solid rgba(11, 23, 32, 0.06);
}
.fxcontact-location-grid {
  display: grid;
  gap: 16px;
  margin-top: 8px;
}
@media (min-width: 800px) {
  .fxcontact-location-grid { grid-template-columns: 1fr 1fr; }
}
.fxcontact-location {
  position: relative;
  padding: 24px 22px 20px;
  border-radius: 18px;
  border: 1px solid rgba(11, 23, 32, 0.08);
  background: #fff;
  box-shadow: 0 12px 30px rgba(11, 23, 32, 0.05);
}
.fxcontact-location-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 192, 224, 0.14);
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.fxcontact-location h3 {
  margin: 0 0 4px;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.fxcontact-location-role {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-deep);
}
.fxcontact-location-address {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.fxcontact-location-meta {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.fxcontact-location-meta li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
.fxcontact-location-meta li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.fxcontact-location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.fxcontact-map {
  margin-top: 22px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(11, 23, 32, 0.08);
  background: #fff;
  box-shadow: 0 16px 40px rgba(11, 23, 32, 0.06);
}
.fxcontact-map-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(11, 23, 32, 0.06);
}
.fxcontact-map-head h3 {
  margin: 0 0 4px;
  font-size: 18px;
  letter-spacing: -0.015em;
}
.fxcontact-map-head p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.fxcontact-map-frame {
  position: relative;
  aspect-ratio: 21 / 9;
  min-height: 280px;
  background: #e8eef1;
}
.fxcontact-map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.fxcontact-cta {
  padding: 48px 0 64px;
  background:
    radial-gradient(ellipse 70% 80% at 90% 20%, rgba(16, 192, 224, 0.16), transparent 55%),
    linear-gradient(180deg, #0b1720 0%, #102836 100%);
  color: #e8f4f8;
}
.fxcontact-cta-inner {
  display: grid;
  gap: 22px;
  align-items: center;
}
@media (min-width: 860px) {
  .fxcontact-cta-inner {
    grid-template-columns: 1.3fr auto;
    gap: 32px;
  }
}
.fxcontact-cta .eyebrow { color: var(--brand); }
.fxcontact-cta .h2 {
  color: #fff;
  margin: 6px 0 10px;
  font-size: clamp(26px, 3.6vw, 36px);
}
.fxcontact-cta .lead-text {
  color: rgba(232, 244, 248, 0.78);
  margin: 0;
  max-width: 46ch;
}
.fxcontact-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Sticky section pill nav (5-at-a-time pages) ---------- */
.section-sticky-nav {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 2900;
  display: flex;
  justify-content: center;
  padding: 0.4rem max(0.75rem, env(safe-area-inset-right)) 0 max(0.75rem, env(safe-area-inset-left));
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.section-sticky-nav[hidden] {
  display: none !important;
}
.section-sticky-nav.is-visible {
  display: flex;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.section-sticky-nav-track {
  position: relative;
  width: auto;
  max-width: min(100%, 860px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.section-sticky-nav-pill {
  display: block;
  padding: 0.3rem 0.4rem;
  background: rgba(240, 244, 247, 0.96);
  border: 1px solid var(--line, #d9e2e8);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(11, 23, 32, 0.12);
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  touch-action: pan-y;
}
.section-sticky-nav-viewport {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  min-height: 40px;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
}
.section-sticky-nav-page {
  grid-area: 1 / 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  width: max-content;
  max-width: 100%;
  justify-self: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px);
  transition: none;
}
.section-sticky-nav-page.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  z-index: 1;
}
.section-sticky-nav-page.is-enter-down {
  animation: stickyNavEnterDown 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.section-sticky-nav-page.is-enter-up {
  animation: stickyNavEnterUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.section-sticky-nav-page.is-leave-up,
.section-sticky-nav-page.is-leave-down {
  visibility: visible;
  pointer-events: none;
}
.section-sticky-nav-page.is-leave-up {
  animation: stickyNavLeaveUp 0.34s cubic-bezier(0.4, 0, 0.2, 1) both;
  z-index: 0;
}
.section-sticky-nav-page.is-leave-down {
  animation: stickyNavLeaveDown 0.34s cubic-bezier(0.4, 0, 0.2, 1) both;
  z-index: 0;
}
@keyframes stickyNavEnterDown {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes stickyNavEnterUp {
  from { opacity: 0; transform: translateY(-22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes stickyNavLeaveUp {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-18px); }
}
@keyframes stickyNavLeaveDown {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(18px); }
}
.section-sticky-nav-pill a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--muted, #5b6b76);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 1 auto;
  letter-spacing: -0.01em;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.section-sticky-nav-pill a:hover {
  color: var(--brand-deep);
  background: rgba(255, 255, 255, 0.75);
}
.section-sticky-nav-pill a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.section-sticky-nav-pill a.is-active {
  background: #fff;
  color: var(--brand-deep);
  font-weight: 800;
  box-shadow: 0 1px 4px rgba(11, 23, 32, 0.1);
}
.section-sticky-nav-label { pointer-events: none; }
.section-sticky-nav-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  pointer-events: auto;
}
.section-sticky-nav-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(91, 107, 118, 0.35);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, width 0.18s ease;
}
.section-sticky-nav-dot.is-active {
  width: 16px;
  background: var(--brand-deep, #0b6e6e);
  transform: none;
}
.section-sticky-nav-dot:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .section-sticky-nav {
    padding-top: 0.35rem;
    padding-left: max(0.55rem, env(safe-area-inset-left));
    padding-right: max(0.55rem, env(safe-area-inset-right));
  }
  .section-sticky-nav-track {
    max-width: 100%;
  }
  .section-sticky-nav-pill {
    padding: 0.28rem 0.35rem;
    box-shadow: 0 6px 20px rgba(11, 23, 32, 0.14);
  }
  .section-sticky-nav-pill a {
    min-height: 44px;
    padding: 0.45rem 0.8rem;
    font-size: 0.9rem;
    font-weight: 700;
  }
}

@media (max-width: 560px) {
  .section-sticky-nav {
    padding-top: 0.3rem;
  }
  .section-sticky-nav-pill a {
    min-height: 44px;
    padding: 0.4rem 0.65rem;
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-sticky-nav {
    transition: none;
  }
  .section-sticky-nav-page.is-enter-down,
  .section-sticky-nav-page.is-enter-up,
  .section-sticky-nav-page.is-leave-up,
  .section-sticky-nav-page.is-leave-down {
    animation: none;
  }
}

/* —— Admin per-page analytics bar (logged-in only) —— */
.fx-admin-analytics-bar {
  position: sticky;
  top: 0;
  z-index: 4500;
  background: #fff;
  border-bottom: 1px solid #e5e9ee;
  box-shadow: 0 1px 0 rgba(11, 23, 32, 0.04);
  font-family: Inter, system-ui, sans-serif;
}
.fx-admin-analytics-bar[hidden] {
  display: none !important;
}
.fx-admin-analytics-bar__inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 12px;
}
.fx-admin-analytics-bar__score,
.fx-admin-analytics-bar__metric {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 16px;
  border-right: 1px solid #eef1f4;
  min-width: 110px;
}
.fx-admin-analytics-bar__label {
  font-size: 11px;
  font-weight: 500;
  color: #6b7785;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.fx-admin-analytics-bar__value {
  font-size: 18px;
  font-weight: 700;
  color: #0b1720;
  line-height: 1.15;
  white-space: nowrap;
}
.fx-admin-analytics-bar__value.fx-admin-analytics-bar__value--good { color: #1a7f37; }
.fx-admin-analytics-bar__value.fx-admin-analytics-bar__value--ok { color: #b54708; }
.fx-admin-analytics-bar__value.fx-admin-analytics-bar__value--bad { color: #c62828; }
.fx-admin-analytics-bar__delta {
  font-size: 11px;
  font-weight: 600;
  min-height: 14px;
}
.fx-admin-analytics-bar__delta.is-up { color: #1a7f37; }
.fx-admin-analytics-bar__delta.is-down { color: #c62828; }
.fx-admin-analytics-bar__sub {
  font-size: 11px;
  color: #6b7785;
  font-weight: 500;
}
.fx-admin-analytics-bar__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  width: fit-content;
}
.fx-admin-analytics-bar__pill--good {
  background: #e6f6eb;
  color: #1a7f37;
}
.fx-admin-analytics-bar__pill--ok {
  background: #fff4e5;
  color: #b54708;
}
.fx-admin-analytics-bar__pill--bad {
  background: #fdecea;
  color: #c62828;
}
.fx-admin-analytics-bar__pill--muted,
.fx-admin-analytics-bar__pill--skel {
  background: #f1f3f5;
  color: #6b7785;
}
.fx-admin-analytics-bar__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  width: fit-content;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fx-admin-analytics-bar__badge--pass {
  background: #e6f6eb;
  color: #1a7f37;
}
.fx-admin-analytics-bar__badge--fail {
  background: #fdecea;
  color: #c62828;
}
.fx-admin-analytics-bar__badge--muted,
.fx-admin-analytics-bar__badge--skel {
  background: #f1f3f5;
  color: #6b7785;
}
.fx-admin-analytics-bar__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 10px 16px;
  flex: 0 0 auto;
}
.fx-admin-analytics-bar__date {
  font-size: 12px;
  font-weight: 500;
  color: #6b7785;
  white-space: nowrap;
}
.fx-admin-analytics-bar__refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  background: #fff;
  color: #0b1720;
  cursor: pointer;
  padding: 0;
}
.fx-admin-analytics-bar__refresh:hover {
  background: #f6f8fa;
}
.fx-admin-analytics-bar__refresh:disabled {
  opacity: 0.5;
  cursor: wait;
}
.fx-admin-analytics-bar.is-loading .fx-admin-analytics-bar__refresh svg {
  animation: fx-admin-bar-spin 0.8s linear infinite;
}
@keyframes fx-admin-bar-spin {
  to { transform: rotate(360deg); }
}
.fx-admin-analytics-bar__hint {
  padding: 4px 16px 8px;
  font-size: 12px;
  color: #6b7785;
  max-width: 1400px;
  margin: 0 auto;
}
.fx-admin-analytics-bar__hint a {
  color: #0b6bcb;
  font-weight: 600;
  text-decoration: none;
}
.fx-admin-analytics-bar__hint a:hover {
  text-decoration: underline;
}
body.has-fx-admin-analytics-bar .header {
  top: 0;
}
@media (max-width: 900px) {
  .fx-admin-analytics-bar__score,
  .fx-admin-analytics-bar__metric {
    min-width: 100px;
    padding: 8px 12px;
  }
  .fx-admin-analytics-bar__value {
    font-size: 16px;
  }
}


/* Legal / policy pages + HTML sitemap */
.fxlegal-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--brand-wash) 0%, #fff 72%);
  padding: 48px 0 36px;
}
.fxlegal-hero-glow {
  position: absolute;
  inset: -20% 40% auto -10%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(0, 186, 199, 0.14), transparent 68%);
  pointer-events: none;
}
.fxlegal-hero-inner {
  position: relative;
  display: grid;
  gap: 28px;
  align-items: center;
}
@media (min-width: 960px) {
  .fxlegal-hero-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 40px;
  }
}
.fxlegal-hero-copy .eyebrow {
  margin-bottom: 12px;
}
.fxlegal-hero-copy h1 {
  max-width: 14ch;
  margin: 0 0 14px;
}
.fxlegal-hero-copy .lead-text {
  max-width: 42rem;
  margin: 0 0 14px;
}
.fxlegal-updated {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.fxlegal-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fxlegal-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--gray-01);
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.fxlegal-pill:hover {
  border-color: var(--brand);
  color: var(--brand-deep);
}
.fxlegal-pill.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.fxlegal-hero-media {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 21 / 12;
  background: var(--gray-01);
  box-shadow: 0 18px 40px rgba(11, 23, 32, 0.1);
}
.fxlegal-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fxlegal-body {
  padding-top: 12px;
}
.fxlegal-layout {
  display: grid;
  gap: 28px;
  align-items: start;
}
@media (min-width: 980px) {
  .fxlegal-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px;
  }
}
.fxlegal-toc {
  position: sticky;
  top: 108px;
  padding: 18px 16px;
  border: 1px solid var(--gray-01);
  border-radius: 12px;
  background: #fff;
}
.fxlegal-toc-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.fxlegal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.fxlegal-toc a {
  color: #374046;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}
.fxlegal-toc a:hover {
  color: var(--brand-deep);
}
@media (max-width: 979px) {
  .fxlegal-toc { display: none; }
}
.fxlegal-section {
  padding: 8px 0 28px;
  border-bottom: 1px solid var(--gray-01);
}
.fxlegal-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.fxlegal-section .h2 {
  margin: 0 0 14px;
  max-width: 22ch;
}
.fxlegal-prose {
  max-width: var(--prose-max);
}
.fxlegal-prose h3 {
  margin: 1.4em 0 0.5em;
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}
.fxlegal-prose ul {
  margin: 0 0 1.1em;
  padding-left: 1.2em;
  color: #374046;
}
.fxlegal-prose li {
  margin: 0.35em 0;
  line-height: 1.6;
}
.fxlegal-cta {
  padding-top: 8px;
}
.fxlegal-cta-box {
  display: grid;
  gap: 22px;
  padding: 28px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0b1720 0%, #163041 100%);
  color: #fff;
}
@media (min-width: 800px) {
  .fxlegal-cta-box {
    grid-template-columns: 1.4fr auto;
    align-items: center;
    padding: 36px 40px;
  }
}
.fxlegal-cta-box .h2 {
  color: #fff;
  margin: 0 0 10px;
  max-width: 18ch;
}
.fxlegal-cta-box .lead-text {
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 12px;
  max-width: 42rem;
}
.fxlegal-cta-meta {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}
.fxlegal-cta-meta a {
  color: #7ee7ef;
  font-weight: 700;
  text-decoration: none;
}
.fxlegal-cta-meta a:hover {
  text-decoration: underline;
}
.fxlegal-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fxlegal-cta-box .btn-dark {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.88);
  color: #fff;
}
.fxlegal-cta-box .btn-dark:hover {
  background: #fff;
  color: var(--ink) !important;
  border-color: #fff;
}

.fxsitemap-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.fxsitemap-card {
  padding: 22px 20px;
  border: 1px solid var(--gray-01);
  border-radius: 12px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fxsitemap-card:hover {
  border-color: rgba(0, 186, 199, 0.45);
  box-shadow: 0 14px 32px rgba(11, 23, 32, 0.07);
  transform: translateY(-2px);
}
.fxsitemap-card .h3 {
  margin: 0 0 8px;
}
.fxsitemap-blurb {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.fxsitemap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.fxsitemap-list a {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.fxsitemap-list a:hover {
  color: var(--brand-deep);
  border-bottom-color: rgba(0, 186, 199, 0.45);
}

.fxlegal-highlights {
  padding: 0 0 8px;
  margin-top: -8px;
}
.fxlegal-highlight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .fxlegal-highlight-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}
.fxlegal-highlight-list li {
  position: relative;
  padding: 16px 16px 16px 42px;
  border: 1px solid var(--gray-01);
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(11, 23, 32, 0.04);
}
.fxlegal-highlight-list li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #0b8f99);
  box-shadow: 0 0 0 4px rgba(0, 186, 199, 0.15);
}
.fxlegal-article {
  min-width: 0;
  max-width: 100%;
}
.fxlegal-mobile-toc {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 18px;
  margin: 0 0 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fxlegal-mobile-toc::-webkit-scrollbar { display: none; }
.fxlegal-mobile-toc a {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--gray-01);
  background: #f7fafb;
  color: #374046;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.fxlegal-mobile-toc a:hover {
  border-color: var(--brand);
  color: var(--brand-deep);
}
@media (min-width: 980px) {
  .fxlegal-mobile-toc { display: none; }
}
.fxlegal-section {
  position: relative;
}
.fxlegal-section-num {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.fxlegal-callout {
  margin: 1.1em 0;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(0, 186, 199, 0.28);
  background: linear-gradient(180deg, rgba(0, 186, 199, 0.08), rgba(0, 186, 199, 0.03));
}
.fxlegal-callout p,
.fxlegal-callout ul {
  margin: 0;
}
.fxlegal-callout ul {
  margin-top: 0.6em;
}
.fxlegal-mid-cta {
  display: grid;
  gap: 16px;
  margin: 8px 0 28px;
  padding: 22px 20px;
  border-radius: 14px;
  border: 1px solid var(--gray-01);
  background: linear-gradient(135deg, #f4fbfc 0%, #fff 55%, #f7fafb 100%);
}
@media (min-width: 720px) {
  .fxlegal-mid-cta {
    grid-template-columns: 1.4fr auto;
    align-items: center;
    padding: 24px 26px;
  }
}
.fxlegal-mid-cta .h3 {
  margin: 0 0 6px;
}
.fxlegal-mid-cta p {
  margin: 0;
  color: #475157;
  font-size: 15px;
  line-height: 1.5;
}
.fxlegal-mid-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fxsitemap-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fxsitemap-jump a {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--gray-01);
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.fxsitemap-jump a:hover {
  border-color: var(--brand);
  color: var(--brand-deep);
  transform: translateY(-1px);
}
.fxsitemap-card {
  position: relative;
  overflow: hidden;
}
.fxsitemap-card-num {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--brand);
}
.fxsitemap-card--company { border-top: 3px solid #00bac7; }
.fxsitemap-card--services { border-top: 3px solid #0b1720; }
.fxsitemap-card--industries { border-top: 3px solid #1f6f8b; }
.fxsitemap-card--work { border-top: 3px solid #2d6a4f; }
.fxsitemap-card--legal { border-top: 3px solid #6c757d; }
.fxsitemap-grid-section {
  padding-top: 8px;
}


/* —— Pricing / package pages —— */
.pkg-page { background: #fff; }
.pkg-hero {
  position: relative;
  padding: 48px 0 28px;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(0, 186, 199, 0.12), transparent 60%),
    linear-gradient(180deg, #f5fafb 0%, #fff 72%);
  border-bottom: 1px solid var(--gray-01);
  overflow: hidden;
}
.pkg-hero-grid {
  display: grid;
  gap: 28px;
  align-items: center;
}
@media (min-width: 900px) {
  .pkg-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 48px; }
}
.pkg-hero h1 { max-width: 16ch; }
.pkg-billing-note {
  margin: 0 0 18px;
  font-size: 14px;
  color: #5a6a75;
}
.pkg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.pkg-hero-phone {
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.pkg-hero-phone:hover { color: var(--brand-deep); }
.pkg-hero-media {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(11, 23, 32, 0.08);
  box-shadow: 0 18px 40px rgba(11, 23, 32, 0.08);
  aspect-ratio: 3 / 2;
}
.pkg-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pkg-section-head { margin-bottom: 28px; max-width: 64ch; }
.pkg-section-head h2 { margin-bottom: 10px; }
.pkg-plan-grid {
  display: grid;
  gap: 18px;
}
@media (min-width: 900px) {
  .pkg-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
.pkg-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 20px 20px;
  border: 1px solid var(--gray-01);
  border-radius: 16px;
  background: #fff;
}
.pkg-plan.is-popular {
  border-color: rgba(0, 186, 199, 0.55);
  box-shadow: 0 16px 36px rgba(0, 186, 199, 0.12);
  background: linear-gradient(180deg, #f4fcfd 0%, #fff 42%);
}
.pkg-popular {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pkg-plan-head h3 {
  margin: 0 0 6px;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.15;
}
.pkg-best-for {
  margin: 0 0 12px;
  font-size: 14px;
  color: #5a6a75;
}
.pkg-price-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
}
.pkg-price-was {
  text-decoration: line-through;
  color: #8a97a1;
  font-size: 15px;
}
.pkg-price {
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.pkg-price-note {
  font-size: 13px;
  font-weight: 600;
  color: #5a6a75;
}
.pkg-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  flex: 1;
}
.pkg-features li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.45;
  color: #2a3842;
}
.pkg-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}
.pkg-plan-cta { width: 100%; justify-content: center; text-align: center; }
.pkg-cta-band {
  padding: 36px 0;
  background: linear-gradient(135deg, #0b1720 0%, #123040 55%, #0b1720 100%);
  color: #fff;
}
.pkg-cta-band .eyebrow { color: rgba(255,255,255,0.72); }
.pkg-cta-band h2,
.pkg-cta-band .lead-text { color: #fff; }
.pkg-cta-band .lead-text { opacity: 0.88; }
.pkg-cta-inner {
  display: grid;
  gap: 20px;
}
@media (min-width: 800px) {
  .pkg-cta-inner {
    grid-template-columns: 1.4fr auto;
    align-items: center;
  }
}
.pkg-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pkg-cta-band .btn-ghost {
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.pkg-cta-band .btn-ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.08);
}
.pkg-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--gray-01);
  border-radius: 14px;
  background: #fff;
}
.pkg-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.pkg-table th,
.pkg-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--gray-01);
  font-size: 14px;
}
.pkg-table thead th {
  background: #f7fafb;
  font-weight: 800;
  color: var(--ink);
}
.pkg-table tbody th {
  font-weight: 700;
  color: var(--ink);
}
.pkg-guide-grid {
  display: grid;
  gap: 28px;
}
@media (min-width: 960px) {
  .pkg-guide-grid { grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: start; }
}
.pkg-mosaic {
  margin: 18px 0 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--gray-01);
  aspect-ratio: 3 / 2;
}
.pkg-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pkg-guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.pkg-guide-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--gray-01);
  border-radius: 12px;
  background: #fff;
}
.pkg-guide-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 186, 199, 0.12);
  color: var(--brand-deep);
  font-size: 13px;
  font-weight: 800;
}
.pkg-guide-list h3 {
  margin: 0 0 6px;
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.2;
}
.pkg-guide-list p { margin: 0; color: #42515c; font-size: 15px; line-height: 1.55; }
.pkg-capability-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.pkg-capability-grid li {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--gray-01);
  background: linear-gradient(180deg, #f8fcfd, #fff);
  font-weight: 700;
  color: var(--ink);
}
.pkg-why-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 22px;
}
.pkg-why-card {
  padding: 18px;
  border: 1px solid var(--gray-01);
  border-radius: 12px;
  background: #fff;
}
.pkg-why-card h3 {
  margin: 0 0 8px;
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.pkg-why-card p { margin: 0; color: #42515c; font-size: 14px; line-height: 1.5; }
.pkg-why-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pkg-faq-list { display: grid; gap: 10px; }
.pkg-faq-item {
  border: 1px solid var(--gray-01);
  border-radius: 12px;
  background: #fff;
  padding: 4px 16px;
}
.pkg-faq-item summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
}
.pkg-faq-item summary::-webkit-details-marker { display: none; }
.pkg-faq-item p {
  margin: 0 0 14px;
  color: #42515c;
  font-size: 15px;
  line-height: 1.55;
}
.pkg-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pkg-related-list a {
  display: inline-flex;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--gray-01);
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
}
.pkg-related-list a:hover {
  border-color: var(--brand);
  color: var(--brand-deep);
}
@media (max-width: 720px) {
  .pkg-hero { padding-top: 32px; }
  .pkg-plan.is-popular { order: -1; }
}

/* Pricing plan enquiry modal */
.pkg-enq-modal[hidden] { display: none !important; }
.pkg-enq-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  overscroll-behavior: none;
}
@media (min-width: 640px) {
  .pkg-enq-modal {
    align-items: center;
    padding: 24px 20px;
  }
}
.pkg-enq-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 23, 32, 0.62);
  touch-action: none;
}
.pkg-enq-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 24px 64px rgba(11, 23, 32, 0.32);
  color: #0b1720;
}
@media (min-width: 640px) {
  .pkg-enq-dialog {
    max-height: min(90vh, 820px);
    border-radius: 16px;
  }
}
.pkg-enq-x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border: 1px solid #d5dee4;
  border-radius: 10px;
  background: #fff;
  font-size: 26px;
  line-height: 1;
  color: #0b1720;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pkg-enq-x:hover {
  background: #f3f6f8;
  border-color: #b8c5ce;
}
.pkg-enq-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
/* Author display:flex beats UA [hidden]; keep panels/error fully gated */
.pkg-enq-panel[hidden],
.pkg-enq-success[hidden],
.pkg-enq-error[hidden] {
  display: none !important;
}
.pkg-enq-header {
  flex-shrink: 0;
  padding: 24px 22px 14px;
  padding-right: 56px;
  border-bottom: 1px solid #e6edf1;
  background: #fff;
}
@media (min-width: 640px) {
  .pkg-enq-header {
    padding: 28px 28px 16px;
    padding-right: 60px;
  }
}
.pkg-enq-dialog .eyebrow {
  margin: 0 0 8px;
  color: var(--brand-deep);
  font-weight: 700;
}
.pkg-enq-dialog h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3.2vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #0b1720;
  font-weight: 800;
}
.pkg-enq-lead {
  margin: 0 0 14px;
  color: #334854;
  font-size: 16px;
  line-height: 1.55;
}
.pkg-enq-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f0f7fa;
  border: 1px solid #c5d8e0;
}
.pkg-enq-plan-label {
  width: 100%;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a5d68;
}
.pkg-enq-plan strong {
  color: #0b1720;
  font-size: 16px;
  font-weight: 800;
}
.pkg-enq-plan [data-pkg-enq-plan-price] {
  color: var(--brand-deep);
  font-weight: 800;
  font-size: 15px;
}
.pkg-enq-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0;
}
.pkg-enq-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 22px 8px;
}
@media (min-width: 640px) {
  .pkg-enq-body {
    padding: 10px 28px 12px;
  }
}
.pkg-enq-form .form-row {
  display: grid;
  gap: 0 14px;
}
@media (min-width: 520px) {
  .pkg-enq-form .form-row {
    grid-template-columns: 1fr 1fr;
  }
}
.pkg-enq-form label {
  color: #0b1720;
  font-size: 13px;
  font-weight: 700;
}
.pkg-enq-form input,
.pkg-enq-form textarea,
.pkg-enq-form select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #c5d0d8;
  border-radius: var(--radius, 8px);
  font: inherit;
  font-size: 16px;
  color: #0b1720;
  background: #fff;
  min-height: 48px;
  box-sizing: border-box;
}
.pkg-enq-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6b75' d='M1.4.6L6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 40px;
  cursor: pointer;
}
.pkg-enq-form input:focus,
.pkg-enq-form textarea:focus,
.pkg-enq-form select:focus {
  outline: 2px solid rgba(16,192,224,0.35);
  border-color: var(--brand, #10c0e0);
}
.pkg-enq-form textarea {
  min-height: 0;
  resize: vertical;
}
.pkg-enq-form .pkg-enq-site-url[hidden] {
  display: none !important;
}
.pkg-enq-form input::placeholder,
.pkg-enq-form textarea::placeholder {
  color: #5a6b75;
  opacity: 1;
}
.pkg-enq-form .optional {
  font-weight: 500;
  color: #5a6b75;
  font-size: 12px;
}
/* Beat .lead-form label { display:block } + .lead-form input { width:100% } */
.lead-form label.pkg-enq-consent,
.pkg-enq-form label.pkg-enq-consent,
label.pkg-enq-consent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #334854;
  margin: 14px 0 0;
  font-weight: 500;
}
.lead-form label.pkg-enq-consent input[type="checkbox"],
.pkg-enq-form label.pkg-enq-consent input[type="checkbox"],
label.pkg-enq-consent input[type="checkbox"] {
  display: inline-block;
  box-sizing: border-box;
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  margin: 3px 0 0;
  padding: 0;
  flex: 0 0 18px;
  flex-shrink: 0;
  accent-color: var(--brand-deep);
  cursor: pointer;
  vertical-align: top;
}
label.pkg-enq-consent > span {
  flex: 1 1 auto;
  min-width: 0;
}
.pkg-enq-consent a {
  color: var(--brand-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pkg-enq-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff5f5;
  border: 1px solid #f5c2c2;
  color: #9b1c1c;
  font-size: 14px;
}
.pkg-enq-actions {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 14px 22px 18px;
  border-top: 1px solid #e6edf1;
  background: #fff;
}
@media (min-width: 640px) {
  .pkg-enq-actions {
    padding: 16px 28px 22px;
  }
}
.pkg-enq-success {
  text-align: center;
  padding: 36px 28px 28px;
  justify-content: center;
  overflow: auto;
}
.pkg-enq-success-icon {
  color: var(--brand-deep);
  margin: 0 auto 12px;
}
.pkg-enq-success .pkg-enq-actions {
  justify-content: center;
  border-top: 0;
  padding: 8px 0 0;
  background: transparent;
}
html.pkg-enq-open,
body.pkg-enq-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}
body.pkg-enq-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}
.pkg-plan-cta { cursor: pointer; }

/* Location city/country typeahead (pricing enquiry) */
.pkg-enq-loc-label {
  display: block;
}
.pkg-enq-loc {
  position: relative;
}
.pkg-enq-loc-suggest {
  position: fixed;
  z-index: 1300;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #c5d0d8;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(11, 23, 32, 0.14);
  box-sizing: border-box;
}
.pkg-enq-loc-suggest[hidden] {
  display: none !important;
}
.pkg-enq-loc-suggest [role="option"] {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: #0b1720;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  line-height: 1.35;
}
.pkg-enq-loc-suggest [role="option"]:hover,
.pkg-enq-loc-suggest [role="option"].is-active {
  background: #f0f7fa;
  color: #0b1720;
}


/* ——— Page not found (404) ——— */
.fx404 {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(4rem, 9vw, 7rem);
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(16, 192, 224, 0.16), transparent 55%),
    radial-gradient(900px 500px at 92% 10%, rgba(16, 192, 224, 0.1), transparent 50%),
    linear-gradient(180deg, #f4fbfc 0%, #fff 42%, #f7fafb 100%);
  border-bottom: 1px solid rgba(11, 23, 32, 0.06);
}
.fx404-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.fx404-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.55;
  animation: fx404-float 9s ease-in-out infinite;
}
.fx404-orb--a {
  width: 220px; height: 220px;
  left: -40px; top: 12%;
  background: radial-gradient(circle at 30% 30%, rgba(16,192,224,0.45), rgba(16,192,224,0));
  animation-delay: 0s;
}
.fx404-orb--b {
  width: 160px; height: 160px;
  right: 8%; top: 18%;
  background: radial-gradient(circle at 40% 40%, rgba(10,155,184,0.28), rgba(10,155,184,0));
  animation-delay: -2.5s;
  animation-duration: 11s;
}
.fx404-orb--c {
  width: 280px; height: 280px;
  left: 40%; bottom: -80px;
  background: radial-gradient(circle at 50% 40%, rgba(16,192,224,0.18), transparent 70%);
  animation-delay: -4s;
  animation-duration: 13s;
}
.fx404-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11,23,32,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,23,32,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
  opacity: 0.7;
}
.fx404-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  text-align: center;
}
.fx404-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  min-height: 140px;
}
.fx404-digits {
  display: flex;
  gap: 0.12em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(72px, 14vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.fx404-digit {
  display: inline-block;
  opacity: 1;
  color: var(--ink);
  text-shadow: 0 8px 28px rgba(11, 23, 32, 0.08);
  animation: fx404-pop 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--d, 0) * 0.1s);
}
.fx404-digit--accent {
  color: var(--brand-deep);
  position: relative;
}
.fx404-digit--accent::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: 0.08em;
  height: 0.08em;
  border-radius: 999px;
  background: var(--brand);
  transform-origin: left center;
  animation: fx404-underline 0.7s ease 0.55s both;
}
.fx404-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.95;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.fx404-ring svg { display: block; }
.fx404-ring-track { stroke: rgba(11,23,32,0.08); }
.fx404-ring-progress {
  stroke: var(--brand);
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transform-origin: 60px 60px;
  transform: rotate(-90deg);
  animation: fx404-draw 1.4s ease 0.35s forwards;
}
.fx404-search, .fx404-search-lens { stroke: var(--ink); opacity: 0.75; }
.fx404-eyebrow {
  animation: fx404-rise 0.7s ease 0.25s both;
}
.fx404 h1 {
  margin: 0.35rem 0 0.85rem;
  animation: fx404-rise 0.75s ease 0.32s both;
}
.fx404-lead {
  margin: 0 auto 1.75rem;
  max-width: 38rem;
  color: #374046;
  animation: fx404-rise 0.75s ease 0.4s both;
}
.fx404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.75rem;
  animation: fx404-rise 0.75s ease 0.48s both;
}
.fx404-links-title {
  margin: 0 0 1rem;
  text-align: center;
}
.fx404-card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  text-align: left;
}
.fx404-card {
  display: block;
  height: 100%;
  padding: 1.15rem 1.2rem;
  border-radius: 14px;
  border: 1px solid rgba(11, 23, 32, 0.08);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 30px rgba(11, 23, 32, 0.04);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.fx404-card:hover {
  transform: translateY(-3px);
  border-color: rgba(16, 192, 224, 0.45);
  box-shadow: 0 16px 36px rgba(16, 192, 224, 0.12);
  color: inherit;
}
.fx404-card-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.fx404-card-copy {
  display: block;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #516066;
}
.fx404-contact {
  margin: 2rem 0 0;
  font-size: 0.98rem;
  color: #516066;
  animation: fx404-rise 0.7s ease 0.6s both;
}
.fx404-contact a {
  font-weight: 700;
  color: var(--brand-deep);
}

@keyframes fx404-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(12px, -18px, 0) scale(1.05); }
}
@keyframes fx404-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fx404-pop {
  from { transform: translateY(22px) scale(0.92); filter: blur(2px); }
  to { transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes fx404-underline {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes fx404-draw {
  to { stroke-dashoffset: 80; }
}

@media (max-width: 640px) {
  .fx404-card-grid { grid-template-columns: 1fr; }
  .fx404-ring { width: 88px; height: 88px; }
  .fx404-ring svg { width: 88px; height: 88px; }
  .fx404-actions { flex-direction: column; }
  .fx404-actions .btn { width: 100%; max-width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .fx404-orb,
  .fx404-digit,
  .fx404-eyebrow,
  .fx404 h1,
  .fx404-lead,
  .fx404-actions,
  .fx404-contact,
  .fx404-digit--accent::after,
  .fx404-ring-progress {
    animation: none !important;
  }
  .fx404-ring-progress { stroke-dashoffset: 80; }
  .fx404-digit--accent::after { transform: scaleX(1); opacity: 1; }
}