/* ============================================================
   AMX UI enhancement layer v8 — light theme
   White page, Automatrix purple accents. Additive DOM only.
   ============================================================ */

:root {
  --amx-accent: rgb(119, 118, 246);
  --amx-accent-deep: #5654E0;
  --amx-accent-soft: rgba(119, 118, 246, 0.30);
  --amx-ink: #09090b;
  --amx-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Atmosphere: grain + ambient hero glow (light) ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.02;
}
body::after {
  content: "";
  position: absolute;
  top: -8vh;
  left: 0;
  right: 0;
  height: 115vh;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(60% 46% at 50% 0%, rgba(119, 118, 246, 0.13), transparent 70%);
}
@media (max-width: 809px) { body::before { display: none; } }

/* ---------- Failsafe: content self-heals if the JS never runs ---------- */
@keyframes amx-failsafe { to { opacity: 1; } }
html:not(.amx-ui) [style*="opacity:0.001"],
html:not(.amx-ui) [style*="opacity:0;"],
html:not(.amx-ui) .reveal-el,
html:not(.amx-ui) .reveal,
html:not(.amx-ui) .rv,
html:not(.amx-ui) [data-reveal] {
  opacity: 1 !important;
  animation: none !important;
}

/* ---------- Typography ---------- */
h1.framer-text, h2.framer-text {
  letter-spacing: -0.03em !important;
  text-wrap: balance;
  font-optical-sizing: auto;
}
h3.framer-text {
  letter-spacing: -0.018em !important;
  text-wrap: balance;
}

::selection { background: rgba(119, 118, 246, 0.30); color: var(--amx-ink); }
:focus-visible { outline: 2px solid var(--amx-accent); outline-offset: 3px; border-radius: 6px; }
a[href], button, [role="button"] { cursor: pointer; }
html, body { overflow-x: clip; }

/* ---------- Wordmark: heavier, tighter, ink-to-purple ---------- */
p.framer-styles-preset-1j1l7o8 {
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  background: linear-gradient(90deg, #09090b 35%, #5654E0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #5654E0 !important;
}

/* ---------- Nav: light translucent material ---------- */
nav[data-framer-name="Desktop [Boxed]"],
nav[data-framer-name="Mobile"] {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(9, 9, 11, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 24px rgba(9, 9, 11, 0.05);
  transition: background 0.45s var(--amx-out), box-shadow 0.45s var(--amx-out);
}
/* nav links: modern pill hover, corporate ink */
nav a.framer-text {
  font-weight: 500 !important;
  padding: 9px 14px;
  margin: -9px -14px;
  border-radius: 9px;
}
/* nav primary CTA: gradient pill */
nav a[style*="3711503b"] {
  background: linear-gradient(135deg, #7776F6, #5654E0) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 18px rgba(119, 118, 246, 0.35) !important;
}
nav a[style*="3711503b"] .framer-text { color: #ffffff !important; }
.amx-scrolled nav[data-framer-name="Desktop [Boxed]"],
.amx-scrolled nav[data-framer-name="Mobile"] {
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 18px 44px rgba(9, 9, 11, 0.12);
}
nav a.framer-text,
footer a.framer-text {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: left calc(100% - 1px);
  background-repeat: no-repeat;
  transition: background-size 0.3s var(--amx-out), color 0.25s var(--amx-out);
}

/* ---------- Old sliding logo marquees: removed per client ---------- */
[data-framer-name="Logos"] { display: none !important; }

/* ---------- Buttons ---------- */
a[data-framer-name^="Button"],
button[data-reset="button"] {
  transition: transform 0.35s var(--amx-out), box-shadow 0.35s var(--amx-out), filter 0.35s var(--amx-out);
}
a[data-framer-name^="Button"]:active,
button[data-reset="button"]:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.09s;
}
a[style*="3711503b"] { background-color: #ffffff !important; }
a[style*="3711503b"] .framer-text { color: var(--amx-ink) !important; }

/* ---------- Primary button system: one corporate gradient ---------- */
a[style*="2b39abb9"]:not([style*="3711503b"]), button[data-reset="button"] {
  background: linear-gradient(135deg, #7776F6, #5654E0) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 20px rgba(119, 118, 246, 0.30) !important;
}
/* ---------- CTA panel ---------- */
.framer-1fm2bp7[data-framer-name="Wrapper"] {
  background: linear-gradient(180deg, #6B6AF0, #5654E0) !important;
}
.amx-cta-note {
  margin-top: 14px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
}

/* ---------- Cards ---------- */
.framer-1o6bn8k {
  position: relative;
  transition: transform 0.45s var(--amx-out), box-shadow 0.45s var(--amx-out);
}
.framer-1o6bn8k::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(119, 118, 246, 0.10), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s var(--amx-out);
}

/* Card avatars: dark disc so every client logo reads (logo avatars only) */
.framer-1ax5mnb:has(> div img[src^="assets/clients/"]),
.framer-1ax5mnb:has(img[src^="assets/clients/"]) { background: #16161c !important; }
.framer-1ax5mnb img[src^="assets/clients/"] {
  object-fit: contain !important;
  background: #16161c !important;
  padding: 11%;
}

/* Domain/role line: third hierarchy tier */
.framer-1o6bn8k .framer-styles-preset-igt7au,
.framer-1o6bn8k .framer-styles-preset-ntfn9g {
  font-size: 13px !important;
  color: rgba(9, 9, 11, 0.45) !important;
}
.amx-domain { cursor: pointer; }

/* ---------- Hero hook video ---------- */
#amx-hook { filter: brightness(1.06); transition: filter 0.4s var(--amx-out); }
.amx-play-chip {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(10, 10, 14, 0.66);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  transition: opacity 0.35s var(--amx-out);
}
.amx-play-chip.amx-hidden { opacity: 0; }
.amx-play-chip svg { flex-shrink: 0; }

/* ---------- Form inputs ---------- */
.framer-form-input { transition: box-shadow 0.25s var(--amx-out); }
.framer-form-input:focus {
  box-shadow: 0 0 0 3px var(--amx-accent-soft) !important;
  outline: none;
}

/* ---------- Hero service words ---------- */
.amx-word { transition: opacity 0.6s var(--amx-out), color 0.6s var(--amx-out); }
.amx-word:not(.amx-on) { opacity: 0.5 !important; }
.amx-word.amx-on { opacity: 1 !important; color: var(--amx-ink) !important; }

/* ---------- Mobile menu: light materialize ---------- */
#amx-mnav {
  display: block !important;
  background: rgba(255, 255, 255, 0.88) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(9, 9, 11, 0.09) !important;
  box-shadow: 0 18px 40px rgba(9, 9, 11, 0.12) !important;
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--amx-out), transform 0.35s var(--amx-out), visibility 0s linear 0.35s;
}
#amx-mnav.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
#amx-mnav a { color: var(--amx-ink) !important; }
#amx-mnav a:hover { background: rgba(9, 9, 11, 0.05) !important; }

/* ---------- Footer contact ---------- */
.amx-foot-contact {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 14px;
  color: rgba(9, 9, 11, 0.55);
}
.amx-foot-contact a { color: inherit; text-decoration: none; transition: color 0.25s var(--amx-out); }

/* ============================================================
   Orbiting tool logos + particle globe (light)
   ============================================================ */
#amx-orbit {
  position: absolute;
  left: calc(100% - 56px); /* globe centre 56px inside the right edge = ~60% of it visible */
  transform: translateX(-50%);
  width: 1200px;
  max-width: 99vw;
  height: 640px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.amx-ring {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  border: 1px solid rgba(9, 9, 11, 0.10);
}
.amx-hold {
  position: absolute;
  top: 0;
  left: 50%;
  height: 50%;
  margin-left: -26px;
  transform-origin: bottom center;
  animation: amx-orbit-cw var(--dur) linear infinite;
}
.amx-hold.ccw { animation-name: amx-orbit-ccw; }
.amx-chip {
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(9, 9, 11, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(9, 9, 11, 0.12);
  animation: amx-counter-cw var(--dur) linear infinite;
}
.amx-hold.ccw .amx-chip { animation-name: amx-counter-ccw; }
.amx-chip img { width: 24px; height: 24px; }
#amx-globe { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); }
@keyframes amx-orbit-cw   { from { transform: rotate(var(--sa)); } to { transform: rotate(calc(var(--sa) + 360deg)); } }
@keyframes amx-orbit-ccw  { from { transform: rotate(var(--sa)); } to { transform: rotate(calc(var(--sa) - 360deg)); } }
@keyframes amx-counter-cw { from { transform: rotate(calc(-1 * var(--sa))); } to { transform: rotate(calc(-1 * var(--sa) - 360deg)); } }
@keyframes amx-counter-ccw{ from { transform: rotate(calc(-1 * var(--sa))); } to { transform: rotate(calc(-1 * var(--sa) + 360deg)); } }

/* Aurora: soft purple washes on white */
.amx-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.amx-aurora-a, .amx-aurora-b {
  position: absolute;
  width: 55vw;
  height: 55vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  filter: blur(90px);
}
.amx-aurora-a {
  top: -18%;
  left: -12%;
  background: radial-gradient(circle, rgba(119, 118, 246, 0.16), transparent 62%);
  animation: amx-drift-a 22s ease-in-out infinite alternate;
}
.amx-aurora-b {
  top: 4%;
  right: -16%;
  background: radial-gradient(circle, rgba(86, 84, 224, 0.13), transparent 62%);
  animation: amx-drift-b 27s ease-in-out infinite alternate;
}
@keyframes amx-drift-a { to { transform: translate(9vw, 7vh) scale(1.15); } }
@keyframes amx-drift-b { to { transform: translate(-8vw, 10vh) scale(0.9); } }

/* Offscreen orbit: pause the ring animations */
.amx-paused .amx-hold, .amx-paused .amx-chip,
.amx-paused.amx-aurora .amx-aurora-a, .amx-paused.amx-aurora .amx-aurora-b { animation-play-state: paused; }

/* ============================================================
   Lamp above "Our Services" — realistic purple downlight
   ============================================================ */
/* The Aceternity lamp, Automatrix purple: glowing bar atop a dark
   field, light flooding down over the illuminated heading. */
.amx-lamp {
  position: relative;
  width: 100%;
  height: 250px;
  margin-bottom: -118px;
  /* pure light on white — no dark field */
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* volumetric light: trapezoid wash spreading from the bar */
.amx-lamp .amx-lamp-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(119, 118, 246, 0.52), rgba(119, 118, 246, 0.17) 46%, rgba(119, 118, 246, 0) 86%);
  clip-path: polygon(28% 0%, 72% 0%, 118% 100%, -18% 100%);
  filter: blur(11px);
  opacity: 0;
  transition: opacity 1.3s var(--amx-out) 0.15s;
}
.amx-lamp.amx-on .amx-lamp-wash { opacity: 1; }
/* bright core bloom hugging the bar */
.amx-lamp .amx-lamp-bloom {
  position: absolute;
  inset: 0;
  background: radial-gradient(48% 40% at 50% 5%, rgba(119, 118, 246, 0.42), rgba(119, 118, 246, 0.10) 55%, transparent 75%);
  filter: blur(14px);
  opacity: 0;
  transition: opacity 1.3s var(--amx-out) 0.15s;
}
.amx-lamp.amx-on .amx-lamp-bloom { opacity: 1; }
/* the tube itself */
.amx-lamp .amx-lamp-bar {
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  width: 16rem;
  height: 6px;
  border-radius: 6px;
  /* unlit tube at rest */
  background: linear-gradient(90deg, #c3c2ec, #dcdbf5 50%, #c3c2ec);
  box-shadow: none;
  transition: width 1.2s var(--amx-out), background 0.55s var(--amx-out), box-shadow 0.55s var(--amx-out);
}
.amx-lamp.amx-on .amx-lamp-bar {
  width: 68%;
  background: linear-gradient(90deg, #7776F6, #C9C8FF 30%, #F1F0FF 50%, #C9C8FF 70%, #7776F6);
  box-shadow:
    0 0 10px rgba(165, 164, 255, 0.95),
    0 0 34px 8px rgba(119, 118, 246, 0.6),
    0 10px 60px 18px rgba(119, 118, 246, 0.35);
}
@keyframes amx-ignite {
  0% { opacity: 0; }
  16% { opacity: 0.85; }
  26% { opacity: 0.08; }
  38% { opacity: 0.95; }
  47% { opacity: 0.3; }
  62%, 100% { opacity: 1; }
}
.amx-lamp.amx-on .amx-lamp-wash { animation: amx-ignite 0.9s ease-out both; }
.amx-lamp.amx-on .amx-lamp-bloom { animation: amx-ignite 0.9s ease-out both; }
/* the heading sits inside the light (ink text on the white page) */
.amx-lamp-title { position: relative; z-index: 1; }

/* hero headline block pushed down for breathing room over the globe */
.amx-hero-drop { margin-top: 110px !important; }
/* ============================================================
   Client cases carousel (dark tiles for logo legibility)
   ============================================================ */
#amx-cases {
  width: 100vw;
  max-width: 100vw;
  margin: 22px calc(50% - 50vw) 0;
  padding: 0;
  box-sizing: border-box;
  background: #08080d;
  overflow: hidden;
}
#amx-cases { padding-top: 38px; }
#amx-cases { padding-bottom: 10px; }
#amx-cases::after {
  content: "";
  display: block;
  height: 34px;
  margin-top: 0;
  background: linear-gradient(180deg, #08080d 0%, #ffffff 100%);
}
html.amx-dark #amx-cases::after { background: linear-gradient(180deg, #08080d 0%, #0a0a0f 100%); }
#amx-cases .amx-cases-title {
  font-family: "Inter Tight", Inter, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #A5A4FF;
  text-align: center;
  margin: 0 0 18px;
}
.amx-cases-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.amx-cases-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: amx-cases-scroll 44s linear infinite;
  will-change: transform;
}
@keyframes amx-cases-scroll { to { transform: translateX(calc(-50% - 9px)); } }
/* keeps drifting under the cursor: a strip that halts on hover reads as broken */
.amx-case-tile {
  flex: 0 0 auto;
  width: 176px;
  height: 108px;
  border-radius: 18px;
  background: linear-gradient(160deg, #17171f, #0d0d13);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px rgba(9, 9, 11, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s var(--amx-out), box-shadow 0.3s var(--amx-out), transform 0.3s var(--amx-out);
}
.amx-case-tile img { width: 68%; height: 52%; object-fit: contain; }
/* ---------- Services: border beams + feature check-chips ---------- */
@property --amx-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes amx-beam-spin { to { --amx-angle: 360deg; } }
.amx-beam {
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  padding: 1.5px;
  background: conic-gradient(from var(--amx-angle), transparent 62%, rgba(119, 118, 246, 0.85) 82%, #C9C8FF 90%, transparent 98%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: amx-beam-spin 6.5s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.amx-feature {
  position: relative;
  padding-left: 27px !important;
  opacity: 0;
  translate: -16px 0;
  transition: opacity 0.65s var(--amx-out), translate 0.65s var(--amx-out);
  transition-delay: var(--amx-d, 0s);
}
.amx-feature.amx-in { opacity: 1; translate: 0 0; }
.amx-feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(119, 118, 246, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235654E0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}
/* ---------- Image protection: no drag, no select, clicks pass through ---------- */
img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
#amx-hook { -webkit-user-drag: none; user-select: none; }
/* ---------- Card UI life: floating decor + cycling feature pills ---------- */
@keyframes amx-floaty { from { translate: 0 -6px; } to { translate: 0 7px; } }
.amx-float { animation: amx-floaty 4.2s ease-in-out infinite alternate; }
.amx-pill-word { transition: opacity 0.5s var(--amx-out), color 0.5s var(--amx-out); }
.amx-pill-word:not(.amx-on) { opacity: 0.5 !important; }
.amx-pill-word.amx-on { opacity: 1 !important; color: var(--amx-accent-deep) !important; }
/* ---------- Orbit: chips fade out behind the hero text zone ---------- */
#amx-orbit {
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, rgba(0, 0, 0, 0.22) 32%, #000 56%);
  mask-image: linear-gradient(180deg, transparent 4%, rgba(0, 0, 0, 0.22) 32%, #000 56%);
}

/* ---------- Founder card polish ---------- */
img[src*="team-lee"], img[src*="founder-pfp"] {
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px rgba(119, 118, 246, 0.55), 0 8px 22px rgba(9, 9, 11, 0.16) !important;
}
h6.framer-styles-preset-28q0d9 { font-weight: 700 !important; letter-spacing: -0.01em !important; }
h5.framer-styles-preset-fi66dc { position: relative; }
h5.framer-styles-preset-fi66dc::before {
  content: "\201C";
  position: absolute;
  left: -12px;
  top: -58px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 132px;
  line-height: 1;
  color: rgba(119, 118, 246, 0.18);
  pointer-events: none;
}

/* ---------- "Get a FREE Audit" glass button under the showreel ---------- */
.amx-audit-wrap { width: 100%; text-align: center; margin-top: 26px; margin-bottom: 10px; }
.amx-audit-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 999px;
  background: linear-gradient(158deg, rgba(178,142,255,0.92) 0%, rgba(139,92,246,0.78) 46%, rgba(109,60,220,0.86) 100%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -14px 22px -16px rgba(0,0,0,0.6), 0 6px 22px rgba(109,60,220,0.36), 0 1px 2px rgba(0,0,0,0.35);
  color: #fff;
  font-family: "Inter Tight", Inter, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.35s var(--amx-out), box-shadow 0.35s var(--amx-out), background 0.35s var(--amx-out);
}
.amx-audit-btn:active { transform: scale(0.97); transition-duration: 0.09s; }
/* ---------- Decorative sparkles: gentle living motion ---------- */
@keyframes amx-twinkle {
  from { transform: scale(0.9) rotate(-6deg); }
  to { transform: scale(1.07) rotate(9deg); }
}
@keyframes amx-pulse { from { opacity: 0.55; } to { opacity: 1; } }
[data-framer-name="star small"] {
  animation: amx-twinkle 3.4s ease-in-out infinite alternate;
  transform-origin: center;
}
[data-framer-name="star big"] {
  animation: amx-twinkle 4.6s ease-in-out infinite alternate;
  animation-delay: 0.8s;
  transform-origin: center;
}
[data-framer-name="circles"] {
  animation: amx-pulse 5s ease-in-out infinite alternate;
}
/* ---------- Hover states: capable pointers only ---------- */
@media (hover: hover) and (pointer: fine) {
  footer a.framer-text:hover { background-size: 100% 1px; color: var(--amx-ink) !important; }
  nav a.framer-text:hover { background-color: rgba(9, 9, 11, 0.055); background-size: 0 0; color: var(--amx-ink) !important; }
  a[data-framer-name^="Button"]:hover,
  button[data-reset="button"]:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 0 0 1px rgba(119, 118, 246, 0.40), 0 10px 30px rgba(119, 118, 246, 0.22) !important;
  }
  .framer-1o6bn8k:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(9, 9, 11, 0.12), 0 0 0 1px var(--amx-accent-soft) !important;
  }
  .framer-1o6bn8k:hover::after { opacity: 1; }
  #amx-hook:hover { filter: brightness(1.12); }
  .amx-domain:hover { color: var(--amx-accent-deep) !important; text-decoration: underline; }
  .amx-case-tile:hover { border-color: rgba(119, 118, 246, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(119, 118, 246, 0.25); transform: translateY(-3px); }
  .amx-audit-btn:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.38); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -14px 22px -16px rgba(0,0,0,0.55), 0 10px 30px rgba(109,60,220,0.5), 0 1px 2px rgba(0,0,0,0.35); }
  .amx-foot-contact a:hover { color: var(--amx-ink); }
}

/* ---------- Reduced motion: keep it gentle, not dead ---------- */
@media (prefers-reduced-motion: reduce) {
  a[data-framer-name^="Button"]:hover,
  button[data-reset="button"]:hover,
  .framer-1o6bn8k:hover { transform: none; }
  #amx-mnav { transition: opacity 0.2s ease, visibility 0s linear 0.2s; transform: none; }
  #amx-mnav.open { transition-delay: 0s; }
  body::before { display: none; }
}

/* ---------- Reduced transparency ---------- */
@media (prefers-reduced-transparency: reduce) {
  nav[data-framer-name="Desktop [Boxed]"],
  nav[data-framer-name="Mobile"],
  .amx-scrolled nav[data-framer-name="Desktop [Boxed]"],
  .amx-scrolled nav[data-framer-name="Mobile"] {
    background: #ffffff !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #amx-mnav, .amx-play-chip { background: #ffffff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .amx-play-chip { color: var(--amx-ink); border-color: rgba(9, 9, 11, 0.2); }
}

/* ---------- More contrast ---------- */
@media (prefers-contrast: more) {
  nav[data-framer-name="Desktop [Boxed]"],
  nav[data-framer-name="Mobile"] {
    background: #ffffff !important;
    border: 1px solid rgba(9, 9, 11, 0.5);
  }
  body::before, body::after, .amx-lamp, .amx-aurora { display: none; }
  .amx-word, .amx-word:not(.amx-on) { opacity: 1 !important; }
  #amx-mnav { background: #ffffff !important; }
}

/* ============ We Empower video band (live-site hero bg) ============ */
.amx-empower {
  position: relative;
  margin-top: 0 !important;
  isolation: isolate;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 84px 0 76px !important;
  overflow: hidden;
}
.amx-empower-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.amx-empower-bg video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  background: #050505;
  pointer-events: none;
  -webkit-user-drag: none;
}
.amx-empower-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #08080d 0%, rgba(8,8,13,0) 22%),
    linear-gradient(100deg,
    rgba(8,5,15,0.86) 0%,
    rgba(10,6,20,0.78) 34%,
    rgba(20,10,35,0.55) 62%,
    rgba(10,6,18,0.66) 100%);
}
.amx-empower-head h2.framer-text,
.amx-empower-head h4.framer-text { color: #ffffff !important; }
.amx-empower-head .framer-text:not(h2):not(h4) { color: rgba(255,255,255,0.82) !important; }

/* ---------- Angie Ioannou logo: larger in its tile ---------- */
.amx-case-tile img[src*="angie"] { width: 84%; height: 76%; }
/* square marks need the height, not the width, or they render tiny */
.amx-case-tile img[src*="shiny-side-up"] { width: 62%; height: 86%; }
.amx-case-tile img[src*="albury-florist"] { width: 62%; height: 88%; }

/* ---------- Founder card: let content breathe, never overflow ---------- */
.framer-11crdp8-container { height: auto !important; }
.framer-4Xu1Z { height: auto !important; padding-bottom: 16px !important; }

/* ---------- TextLoop: rotating subline words ---------- */
.amx-tloop { display: inline-flex; align-items: center; vertical-align: bottom; }
.amx-tloop-clip {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  background: linear-gradient(90deg, rgba(119,118,246,0) 0%, rgba(119,118,246,0.14) 55%, rgba(119,118,246,0.32) 100%);
  border-radius: 4px;
}
.amx-tloop-word {
  display: inline-block;
  white-space: nowrap;
  padding: 0 3px 0 2px;
  background: linear-gradient(90deg, #cfceff 0%, #8b8afd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
.amx-tloop-cursor {
  display: inline-block;
  width: 4px;
  height: 1.05em;
  margin-left: 4px;
  border-radius: 2px;
  background: #8b8afd;
  animation: amx-cursor-blink 1.05s linear infinite;
}
@keyframes amx-cursor-blink { 0%, 46% { opacity: 1; } 50%, 100% { opacity: 0.12; } }
@media (prefers-reduced-motion: reduce) {
  .amx-tloop-cursor { animation: none; }
  .amx-tloop-clip { transition: none; }
}

.amx-audit-arr { font-weight: 800; display: inline-block; transform: translateY(1px); }

/* ---------- Dark header: black until scrolled past the clients band ---------- */
.amx-nav-dark nav[data-framer-name="Desktop [Boxed]"],
.amx-nav-dark nav[data-framer-name="Mobile"] {
  background: rgba(9, 9, 14, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.18);
}
/* flat bar: the inner boxed containers disappear in both themes */
nav .framer-k0mvlx,
nav .framer-13yv6ou,
nav .framer-1kwis9x,
nav .framer-1xj4qxx,
.amx-nav-dark nav .framer-k0mvlx,
.amx-nav-dark nav .framer-13yv6ou,
.amx-nav-dark nav .framer-1kwis9x,
.amx-nav-dark nav .framer-1xj4qxx {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
nav .framer-k0mvlx,
nav .framer-13yv6ou,
nav .framer-1kwis9x,
nav .framer-1xj4qxx {
  transition: background 0.45s var(--amx-out), border-color 0.45s var(--amx-out);
}
.amx-nav-dark.amx-scrolled nav[data-framer-name="Desktop [Boxed]"],
.amx-nav-dark.amx-scrolled nav[data-framer-name="Mobile"] {
  background: rgba(7, 7, 11, 0.97) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 44px rgba(0, 0, 0, 0.5);
}
.amx-nav-dark nav a.framer-text { color: #ffffff !important; }
.amx-nav-dark nav p.framer-styles-preset-1j1l7o8 {
  background: linear-gradient(90deg, #ffffff 35%, #B7B6FF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.amx-nav-dark #amx-mnav { background: rgba(10, 10, 16, 0.92) !important; }
@media (hover: hover) and (pointer: fine) {
  .amx-nav-dark nav a.framer-text:hover { background-color: rgba(255, 255, 255, 0.10); color: #ffffff !important; }
}

/* ---------- Dark-theme nav buttons: reference look ---------- */
.amx-nav-dark nav a[style*="3711503b"] {
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
.amx-nav-dark nav a[style*="3711503b"] .framer-text { color: #0a0a0e !important; }
.amx-nav-dark nav a[data-framer-name="Button [xs Line]"] {
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}
.amx-nav-dark nav a[data-framer-name="Button [xs Line]"] .framer-text { color: #ffffff !important; }

/* ---------- Shifting dropdown ---------- */
/* The shell is invisible and carries no padding of its own except the drop
   below the bar. Its top edge sits on the trigger's bottom edge, so the gap
   the pointer crosses is inside the panel rather than between two elements.
   Everything visible lives on .amx-dd-card. */
#amx-dd {
  position: fixed;
  z-index: 2147483000;
  padding-top: var(--amx-gap, 14px);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.16s var(--amx-out), transform 0.16s var(--amx-out);
}
.amx-dd-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(9, 9, 11, 0.10);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(9, 9, 11, 0.18);
  padding: 20px;
  transition: background 0.3s var(--amx-out), border-color 0.3s var(--amx-out);
}
#amx-dd.on { opacity: 1; transform: none; pointer-events: auto; }
.amx-dd-nub {
  /* purely decorative, and never a hit target */
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #ffffff;
  border-top: 1px solid rgba(9, 9, 11, 0.10);
  border-left: 1px solid rgba(9, 9, 11, 0.10);
  border-radius: 3px 0 0 0;
  transition: left 0.25s ease-in-out, background 0.3s var(--amx-out);
}
.amx-dd-pane { display: none; }
.amx-dd-pane.act { display: block; }
.amx-dd-cols { display: flex; gap: 34px; }
.amx-dd-cols > div { flex: 1; }
/* three-column dropdown (Build / Grow / Industries) stays inside narrow desktop windows */
.amx-dd-cols { flex-wrap: wrap; max-width: min(760px, 88vw); }
.amx-dd-cols > div { flex: 1 1 190px; min-width: 170px; }
.amx-dd-cols h6 {
  margin: 0 0 10px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(9, 9, 11, 0.45);
}
.amx-dd-cols a {
  display: block;
  padding: 5px 0;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(9, 9, 11, 0.66);
  text-decoration: none;
  transition: color 0.18s var(--amx-out), transform 0.18s var(--amx-out);
}
.amx-dd-cols a:hover { color: #09090b; transform: translateX(2px); }
.amx-dd-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #5654E0;
  text-decoration: none;
}
.amx-dd-more span { transition: transform 0.2s var(--amx-out); display: inline-block; }
.amx-dd-more:hover span { transform: translateX(3px); }
.amx-dd-chev { display: inline-block; margin-left: 5px; vertical-align: -1px; transition: transform 0.2s var(--amx-out); will-change: transform; }
a.amx-dd-open .amx-dd-chev { transform: rotate(180deg); }
/* dark theme panel */
.amx-nav-dark #amx-dd .amx-dd-card {
  background: #131318;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.amx-nav-dark .amx-dd-nub { background: #131318; border-color: rgba(255, 255, 255, 0.10); }
.amx-nav-dark .amx-dd-cols h6 { color: rgba(255, 255, 255, 0.40); }
.amx-nav-dark .amx-dd-cols a { color: rgba(255, 255, 255, 0.72); }
.amx-nav-dark .amx-dd-cols a:hover { color: #ffffff; }
.amx-nav-dark .amx-dd-more { color: #B7B6FF; }

/* ============ Site dark mode (moon toggle) ============ */
html.amx-dark body { --token-963ba7ff-1506-4ab8-a9bc-332b05614e66:#09090b;--token-4e3d4b62-b411-4488-b97a-8ff2a61d3177:#a1a1aa;--token-408e9ffb-f435-48c7-a9ff-2c04fe742fc2:#e4e4e7;--token-4e9dcd95-1f27-443e-9665-b27316e88fe2:#f4f4f5;--token-bdd5c3bb-385d-4b4d-b487-5a1f9f5d346c:#fafafa;--token-3711503b-3d3b-4886-a85c-4293b65e43e7:#fff;--token-de5448c6-98bb-4403-96cd-7fe86bf2daa6:#fafafa;--token-cdaba0c3-7192-4155-be78-0e3fe010491c:#f4f4f5;--token-b459e046-718c-4dbb-8c34-b5d5869d1e57:#e4e4e7;--token-e4701bb6-83f6-41e5-b0c8-9b95b4510e3a:#d4d4d8;--token-e6a1425f-5cc8-4e16-87a5-8615ab8b8fe1:#a1a1aa;--token-fd54a91d-2c97-4609-acbc-244da5b6b983:#d4d4d8;--token-60b32788-cdeb-41df-ba14-e212d5e544dd:#52525b;--token-d1b70223-6c17-4c93-9dd4-7a1775f7f7c5:#3f3f46;--token-31213cc7-db87-4df4-8209-e72c8adb68fb:#27272a;--token-b0454cba-c19e-43a6-8075-f4b7a5ae4372:#18181b;--token-bebb5c17-844d-419e-ab0e-ada0b43a4350:#18181b;--token-2b0e18bf-9e9a-4016-bdfc-5769700a5529:#09090b;--token-cd1e8e92-b91e-4022-84c2-a059ee7f7bad:#141414;--token-5cb9a68d-31cb-4baf-8414-1a3d9276de57:#08080acc;--token-d4b915e8-652b-419f-be5a-3361d1e18040:#3f3f46;--token-348cb961-2e35-43f8-a0d2-79b2bd699d9d:#0003;--token-c4227534-b253-47d3-855c-89d3b7f89203:#fafafa33;--token-1cd82670-010b-45ca-88d1-85696e9f9b25:#1a1a1a;--token-72cd7441-fffc-424e-b9ec-3ff7fb212fef:#141414;--token-23a221dd-16bc-46fd-b245-22a5e6964a14:#fff;--token-9f0b2a5a-8193-44ae-aa30-34c7d95cc090:#121212;--token-b6cff7ed-4fb7-49b6-acc2-226676099597:#d4d4d4;--token-2f7d29bb-cd1c-4971-a31a-897d4af6f3cb:#121212;--token-842efebc-5a9c-4e56-9dff-b9eb563097be:#18181b;--token-aa2c9719-de38-406e-94f6-067d13b189fc:#a1a1aa;--token-a1c9f16e-06b0-4e8d-b6f4-e541ca2c39cd:#fff;--token-dc75dc89-f737-40e5-979a-0cefb46ee4c6:#fff;--token-f82c9b5d-20ec-42f2-a208-40dde7c4ac7f:#fff;--token-a00d7beb-c8b2-48b6-9852-32a694ced2bf:#fff;--token-3ba694ac-3b80-41b6-a72e-4fcc93985e25:#fff;--token-0c96d211-bed5-451f-950d-fa736b9360d0:#fff200;--token-f50249ee-cc67-4073-b60e-ec41802bea30:#141414;--token-01035e5e-e621-45c5-a1da-7e694aeffaf8:#ffffff14;--token-87688b0d-073a-432d-a5ea-1f02fa79b4c1:#1a1a1a;--token-34bef069-e68f-4f0d-a8f5-42574717b170:#0f8a5136;--token-7748c122-50f0-4fc2-9503-aad51d8a95cc:#fff;--token-16c78fef-de7f-4a8d-8b09-70c28fc8a511:#afa3ff;--token-56d9e1c9-88bf-470e-a0be-bc0a81c882ef:#ffffff0d;--token-46bc3b6e-4f44-4337-98de-448b1ead0a71:#282828;--token-66050d90-6349-4431-90a6-a2c16dad89b2:#fff9;--token-d98939ae-e856-4391-881b-000764a49e76:#fff;--token-0e0d37d8-51ba-48cf-92b9-6b80f17d581b:#000 }
html.amx-dark { --amx-ink: #fafafa; }
html.amx-dark body,
html.amx-dark .framer-XHEbD,
html.amx-dark .framer-0z2HG { background: #0a0a0f !important; }
html.amx-dark p.framer-styles-preset-1j1l7o8 {
  background: linear-gradient(90deg, #ffffff 35%, #B7B6FF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#amx-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(9, 9, 11, 0.18);
  background: transparent;
  color: #09090b;
  cursor: pointer;
  padding: 0;
  margin-left: 10px;
  transition: color 0.3s var(--amx-out), border-color 0.3s var(--amx-out), background 0.3s var(--amx-out), transform 0.2s var(--amx-out);
}
#amx-theme-btn svg { width: 17px; height: 17px; }
#amx-theme-btn:hover { transform: translateY(-1px); background: rgba(9, 9, 11, 0.05); }
.amx-nav-dark #amx-theme-btn,
html.amx-dark #amx-theme-btn {
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.amx-nav-dark #amx-theme-btn:hover,
html.amx-dark #amx-theme-btn:hover { background: rgba(255, 255, 255, 0.08); }

/* ---------- Dark-mode polish ---------- */
/* grain overlay reads warm on black: neutralise + fade */
html.amx-dark body::before { opacity: 0.012; filter: grayscale(1); }
/* "Learn More" + other white pills: ghost style on dark */
html.amx-dark a[style*="3711503b"] {
  background-color: rgba(255, 255, 255, 0.04) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24) !important;
}
html.amx-dark a[style*="3711503b"] .framer-text { color: #fafafa !important; }
/* nav keeps its own treatments */
html.amx-dark nav a[style*="3711503b"] {
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
html.amx-dark nav a[style*="3711503b"] .framer-text { color: #0a0a0e !important; }
/* injected footer contact block */
html.amx-dark .amx-foot-contact,
html.amx-dark .amx-foot-contact a { color: rgba(255, 255, 255, 0.68) !important; }
html.amx-dark .amx-foot-contact a:hover { color: #ffffff !important; }

/* ---------- Skill-audit quick wins (web-design-guidelines / accessibility) ---------- */
html { color-scheme: light; }
html.amx-dark { color-scheme: dark; }
:focus-visible { outline: 2px solid #7776F6; outline-offset: 2px; }
h1.framer-text, h2.framer-text, h3.framer-text { text-wrap: balance; }
main, section, [id] { scroll-margin-top: 96px; }

/* globe sits right of the headline on wide screens, recenters on small */
@media (max-width: 900px) {
  #amx-orbit { left: 50% !important; }
}

/* ============ OUR RESULTS: founder-card twin with image accordion ============ */
#amx-results {
  display: flex;
  align-items: center;
  gap: 34px;
  width: min(1200px, 92vw);
  margin: 0 auto; /* swallow the Framer flex gap so the founder card sits right beneath */
  padding: 22px;
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(119, 118, 246, 0.26) 0%, rgba(119, 118, 246, 0) 58%),
    linear-gradient(135deg, rgba(26, 25, 54, 0.90) 0%, rgba(16, 15, 34, 0.93) 55%, rgba(11, 10, 22, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 26px 64px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
}
.amx-results-left { flex: 0 0 200px; }
.amx-results-left h3 {
  margin: 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 40px;
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: linear-gradient(120deg, #ffffff 42%, #A5A4FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.amx-results-acc {
  flex: 1;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.amx-acc-item {
  position: relative;
  display: block;
  text-decoration: none;
  height: 400px;
  min-width: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  flex: 1 1 0;
  filter: brightness(0.46);
  transition: flex-grow 0.7s cubic-bezier(0.25, 1, 0.5, 1), filter 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  outline-offset: 3px;
}
.amx-acc-item.act { flex-grow: 4.6; filter: brightness(1); }
@media (hover: hover) and (pointer: fine) {
  .amx-acc-item:not(.act):hover { filter: brightness(0.72); }
}
.amx-acc-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.amx-acc-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 9, 11, 0) 22%, rgba(9, 9, 11, 0.34) 52%, rgba(9, 9, 11, 0.80) 76%, rgba(9, 9, 11, 0.95) 100%);
  transition: opacity 0.5s var(--amx-out);
}
/* active panel: category + client name + CTA */
.amx-acc-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 18px 18px 17px;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.45s var(--amx-out), transform 0.45s var(--amx-out);
}
.amx-acc-item.act .amx-acc-meta { opacity: 1; transform: none; transition-delay: 0.2s; }
.amx-acc-cat {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #ffffff;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.amx-acc-name {
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.015em;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.amx-acc-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
.amx-acc-item.act:hover .amx-acc-cta { color: #ffffff; }
/* collapsed panel: vertical client name */
.amx-acc-vert {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  opacity: 1;
  transition: opacity 0.35s var(--amx-out), transform 0.35s var(--amx-out);
  transition-delay: 0.35s;
}
.amx-acc-item.act .amx-acc-vert {
  opacity: 0;
  transform: translateX(-50%) scale(0.6);
  transition-delay: 0s;
}
@media (max-width: 860px) {
  #amx-results { flex-direction: column; align-items: flex-start; gap: 22px; padding: 28px; }
  .amx-results-left { flex: none; }
  .amx-results-acc { width: 100%; justify-content: center; }
  .amx-acc-item { height: 260px; }
}

/* active accordion panel: visit arrow + zoom affordance */

/* hover an open panel: slow pan from page top to page bottom (full-page screenshots) */
.amx-acc-item img { transition: object-position 1.4s ease-out; }
@media (hover: hover) and (pointer: fine) {
  .amx-acc-item.act:hover img {
    object-position: center bottom;
    transition: object-position 11s linear 3s; /* 3s pause before the page starts panning */
  }
}
@media (prefers-reduced-motion: reduce) {
  .amx-acc-item img { transition: none; }
}

/* ---------- Belt exit: fade the video band into the page below ---------- */
.amx-empower::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  background: linear-gradient(180deg, rgba(8, 8, 13, 0) 0%, #ffffff 100%);
  z-index: 0;
  pointer-events: none;
}
html.amx-dark .amx-empower::after {
  background: linear-gradient(180deg, rgba(8, 8, 13, 0) 0%, #0a0a0f 100%);
}

/* ---------- FAQ section heading ---------- */
#amx-faq-head {
  width: min(1200px, 92vw);
  margin: 18px auto -6px;
  text-align: center;
}
#amx-faq-head h2 {
  margin: 0 0 10px;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--amx-ink);
  text-wrap: balance;
}
#amx-faq-head p {
  margin: 0;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 17px;
  color: rgba(9, 9, 11, 0.58);
}
html.amx-dark #amx-faq-head h2 { color: #fafafa; }
html.amx-dark #amx-faq-head p { color: rgba(255, 255, 255, 0.62); }

/* ---------- SEO card: rank-climb graphic ---------- */
.amx-seo-rank {
  position: absolute;
  top: 34px;
  right: 32px;
  width: 196px;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(119, 118, 246, 0.07), rgba(119, 118, 246, 0.02));
  border: 1px solid rgba(119, 118, 246, 0.20);
  box-shadow: 0 10px 26px rgba(9, 9, 11, 0.10);
  pointer-events: none;
}
html.amx-dark .amx-seo-rank {
  background: linear-gradient(180deg, rgba(119, 118, 246, 0.12), rgba(119, 118, 246, 0.03));
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
/* fake search field */
.amx-seo-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.09;
}
.amx-seo-mag {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  flex: 0 0 auto;
}
.amx-seo-q { height: 4px; width: 58%; border-radius: 3px; background: currentColor; }
.amx-seo-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-right: 2px;
}
.amx-seo-row {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.14;
}
.amx-seo-row:nth-child(1) { width: 88%; }
.amx-seo-row:nth-child(2) { width: 66%; }
.amx-seo-row:nth-child(3) { width: 80%; }
.amx-seo-row:nth-child(4) { width: 58%; }
.amx-seo-you {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  border-radius: 7px;
  background: linear-gradient(135deg, #7776F6, #5654E0);
  box-shadow: 0 5px 16px rgba(119, 118, 246, 0.45);
  transform: translateY(90px);
}
.amx-seo-fav {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.95);
  flex: 0 0 auto;
}
.amx-seo-line {
  height: 5px;
  width: 62%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.75);
}
.amx-seo-badge {
  margin-left: auto;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #ffffff;
  opacity: 0;
  transform: scale(0.6);
}
.amx-seo-you { animation: amx-seo-climb 5.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.amx-seo-badge { animation: amx-seo-pop 5.2s ease-out infinite; }
.amx-seo-rank.amx-paused .amx-seo-you,
.amx-seo-rank.amx-paused .amx-seo-badge { animation-play-state: paused; }
@keyframes amx-seo-climb {
  0%, 10%   { transform: translateY(90px); }
  38%, 82%  { transform: translateY(0); }
  100%      { transform: translateY(90px); }
}
@keyframes amx-seo-pop {
  0%, 36%   { opacity: 0; transform: scale(0.6); }
  46%, 82%  { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .amx-seo-you, .amx-seo-badge { animation: none !important; }
  .amx-seo-you { transform: translateY(0); }
  .amx-seo-badge { opacity: 1; transform: none; }
}
@media (max-width: 1100px) { .amx-seo-rank { display: none; } }

/* ---------- Brand lockup: monogram + Automatrix wordmark ---------- */
.amx-logo-mark {
  filter: brightness(0);
  transition: filter 0.4s var(--amx-out);
}
.amx-nav-dark nav .amx-logo-mark,
html.amx-dark .amx-logo-mark { filter: none; }
/* solid wordmark, no gradient — matches the brand lockup */
nav p.framer-styles-preset-1j1l7o8,
footer p.framer-styles-preset-1j1l7o8 {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--amx-ink) !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}
.amx-nav-dark nav p.framer-styles-preset-1j1l7o8,
html.amx-dark nav p.framer-styles-preset-1j1l7o8,
html.amx-dark footer p.framer-styles-preset-1j1l7o8 { color: #ffffff !important; }

/* ============ Header: two floating black boxes, always dark ============ */
/* the bar itself carries nothing — the boxes are the surface */
nav[data-framer-name="Desktop [Boxed]"],
nav[data-framer-name="Mobile"],
.amx-scrolled nav[data-framer-name="Desktop [Boxed]"],
.amx-scrolled nav[data-framer-name="Mobile"],
.amx-nav-dark nav[data-framer-name="Desktop [Boxed]"],
.amx-nav-dark nav[data-framer-name="Mobile"],
.amx-nav-dark.amx-scrolled nav[data-framer-name="Desktop [Boxed]"],
.amx-nav-dark.amx-scrolled nav[data-framer-name="Mobile"] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* the two boxes: main nav + Contact Us cluster */
nav .framer-k0mvlx,
nav .framer-13yv6ou,
nav .framer-1kwis9x,
nav .framer-1xj4qxx,
.amx-nav-dark nav .framer-k0mvlx,
.amx-nav-dark nav .framer-13yv6ou,
.amx-nav-dark nav .framer-1kwis9x,
.amx-nav-dark nav .framer-1xj4qxx {
  background: rgba(9, 9, 14, 0.90) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 10px 30px rgba(0, 0, 0, 0.34) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
/* header stays dark everywhere, so its contents stay light everywhere */
nav a.framer-text { color: #ffffff !important; }
nav p.framer-styles-preset-1j1l7o8 { color: #ffffff !important; }
nav .amx-logo-mark { filter: none !important; }
#amx-theme-btn { border-color: rgba(255, 255, 255, 0.22); color: #ffffff; }
#amx-theme-btn:hover { background: rgba(255, 255, 255, 0.08); }
nav a[style*="3711503b"] {
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
nav a[style*="3711503b"] .framer-text { color: #0a0a0e !important; }
@media (hover: hover) and (pointer: fine) {
  nav a.framer-text:hover { background-color: rgba(255, 255, 255, 0.10); color: #ffffff !important; }
}

/* video band entry fade (Services sits above it now) */
.amx-empower::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 120px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(8, 8, 13, 0) 100%);
  /* the video layer is a real child at z-index 0, so a z-0 ::before paints
     underneath it — lift the fade above the video but below the copy */
  z-index: 1;
  pointer-events: none;
}
html.amx-dark .amx-empower::before {
  background: linear-gradient(180deg, #0a0a0f 0%, rgba(8, 8, 13, 0) 100%);
}

/* ---------- Service cards: grow to fit, never clip the button ---------- */
.amx-svc-card {
  height: auto !important;
  /* flex-basis is 0 in these columns: without a content floor the card
     shrinks under its own text and the button spills out the bottom */
  min-height: max-content !important;
  padding: 40px !important;
}

/* pull Our Services up so it meets the clients band (root flex gap is 100px
   and the hero adds 15px of padding below the band) */
.amx-svc-section { margin-top: -115px !important; }

/* SEO capability chips: two tidy columns instead of one tall list */
.amx-seo-feats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px !important;
  align-items: start;
}
.amx-seo-feats > * { width: 100% !important; }
@media (max-width: 860px) {
  .amx-seo-feats { grid-template-columns: minmax(0, 1fr); }
}

/* keep the SEO lede clear of the SERP panel */
.amx-seo-lede { max-width: 300px !important; }
@media (max-width: 1100px) { .amx-seo-lede { max-width: none !important; } }

/* ============ OUR RESULTS: full section (work + reviews as one story) ============ */
#amx-results-sec {
  width: 100vw;
  max-width: 100vw;
  margin: 0 calc(50% - 50vw) -100px;
  padding: 96px 0 88px;
  position: relative;
  z-index: 1;
}
/* one continuous surface behind the whole proof story */
#amx-results-sec.amx-unified {
  background: linear-gradient(180deg, #ffffff 0%, #f6f6fb 22%, #f6f6fb 78%, #ffffff 100%);
  border-top: 1px solid rgba(9, 9, 11, 0.07);
  border-bottom: 1px solid rgba(9, 9, 11, 0.07);
}
html.amx-dark #amx-results-sec.amx-unified {
  background: linear-gradient(180deg, #0a0a0f 0%, #101018 22%, #101018 78%, #0a0a0f 100%);
  border-top-color: rgba(255, 255, 255, 0.07);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
/* even rhythm between the sub-blocks now that they share a section */
#amx-results-sec.amx-unified > .amx-reviews-block { margin: 64px 0 0 !important; }
#amx-results-sec.amx-unified > #amx-google-reviews { margin-top: 56px; }
.amx-results-head {
  width: min(1200px, 92vw);
  margin: 0 auto 34px;
  text-align: center;
}
.amx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #5654E0;
  margin-bottom: 14px;
}
.amx-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amx-accent);
  box-shadow: 0 0 10px rgba(119, 118, 246, 0.9);
}
.amx-results-head h2 {
  margin: 0 0 14px;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(38px, 6vw, 74px);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.02;
  color: var(--amx-ink);
  text-wrap: balance;
}
.amx-results-head p {
  margin: 0 auto;
  max-width: 60ch;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(9, 9, 11, 0.60);
}
html.amx-dark .amx-results-head h2 { color: #fafafa; }
html.amx-dark .amx-results-head p { color: rgba(255, 255, 255, 0.62); }
html.amx-dark .amx-eyebrow { color: #A5A4FF; }

/* per-client work description on the open panel */
.amx-acc-work {
  display: block;
  max-width: 300px;
  margin-top: 2px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* the reviews block continues the same section — no seam between them */
.amx-reviews-block { margin-top: 0 !important; }

@media (max-width: 860px) {
  #amx-results-sec { padding: 60px 0 36px; margin-bottom: -80px; }
  .amx-acc-work { display: none; }
}

/* gallery now fills the card (the section header carries the title) */
.amx-results-acc { width: 100%; }
@media (max-width: 860px) {
  .amx-acc-item { height: 300px; }
}

/* client logo avatars are wide marks in square discs — show them whole */
.amx-reviews-block img[src*="/clients/"] {
  object-fit: contain !important;
  padding: 16%;
  box-sizing: border-box;
}

/* ============ Google review wall ============ */
#amx-google-reviews {
  width: min(1200px, 92vw);
  margin: 4px auto 0;
  padding-bottom: 8px;
}
.amx-gr-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 26px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(9, 9, 11, 0.62);
}
html.amx-dark .amx-gr-head { color: rgba(255, 255, 255, 0.66); }
/* editorial hairline frames + staggered cascade (ported from 21st.dev
   "Staggered Testimonials Grid" by @sshahaider) */
.amx-gr-grid {
  --amx-gr-rule: rgba(9, 9, 11, 0.13);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 46px 40px;
  padding-bottom: 44px;
}
html.amx-dark .amx-gr-grid { --amx-gr-rule: rgba(255, 255, 255, 0.14); }
.amx-gr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 26px 28px 22px;
  transition: transform 0.45s var(--amx-out);
}
/* second column rides lower for the staggered rhythm */
@media (min-width: 861px) {
  .amx-gr-card:nth-child(even) { transform: translateY(38px); }
}
.amx-gr-rules i {
  position: absolute;
  background: var(--amx-gr-rule);
  pointer-events: none;
}
.amx-gr-rules i:nth-child(1) { top: -18px; bottom: -18px; left: -1px; width: 1px; }
.amx-gr-rules i:nth-child(2) { top: -18px; bottom: -18px; right: -1px; width: 1px; }
.amx-gr-rules i:nth-child(3) { left: -18px; right: -18px; top: -1px; height: 1px; }
.amx-gr-rules i:nth-child(4) { left: -18px; right: -18px; bottom: -1px; height: 1px; }
.amx-gr-plus {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  color: rgba(9, 9, 11, 0.34);
  pointer-events: none;
}
html.amx-dark .amx-gr-plus { color: rgba(255, 255, 255, 0.36); }
.amx-gr-quote { display: flex; gap: 14px; margin: 0; }
.amx-gr-mark {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--amx-accent);
  opacity: 0.62;
}
/* the card lifts as a whole on hover, rules included */
@media (hover: hover) and (pointer: fine) {
  .amx-gr-card:hover { transform: translateY(-4px); }
  .amx-gr-card:nth-child(even):hover { transform: translateY(34px); }
  .amx-gr-card:hover .amx-gr-avatar { box-shadow: 0 0 0 2px var(--amx-page-bg, #fff), 0 0 0 4px rgba(119, 118, 246, 0.55); }
}
.amx-gr-stars { display: flex; gap: 2px; color: #F5A524; }
.amx-gr-text {
  margin: 0;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15.5px;
  line-height: 1.62;
  color: rgba(9, 9, 11, 0.80);
}
html.amx-dark .amx-gr-text { color: rgba(255, 255, 255, 0.82); }
.amx-gr-author {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  padding-top: 4px;
}
.amx-gr-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(9, 9, 11, 0.10);
  transition: box-shadow 0.35s var(--amx-out);
  background: linear-gradient(135deg, #7776F6, #5654E0);
  color: #ffffff;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15px;
  font-weight: 700;
  flex: 0 0 auto;
}
.amx-gr-name {
  font-style: normal;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--amx-ink);
}
html.amx-dark .amx-gr-name {
  font-style: normal; color: #fafafa; }
@media (max-width: 860px) {
  .amx-gr-grid { grid-template-columns: minmax(0, 1fr); }
}

/* tighten the Framer spacers now that these blocks share one section */
#amx-results-sec.amx-unified .framer-16tki85 { padding: 6px 0 !important; height: auto !important; }
#amx-results-sec.amx-unified .framer-sav9yp { padding-bottom: 10px !important; }
#amx-results-sec.amx-unified .framer-2dY3Q { gap: 20px !important; }

html.amx-dark .amx-gr-avatar { box-shadow: 0 0 0 2px #101018, 0 0 0 4px rgba(255, 255, 255, 0.14); }
html.amx-dark .amx-gr-card:hover .amx-gr-avatar { box-shadow: 0 0 0 2px #101018, 0 0 0 4px rgba(119, 118, 246, 0.6); }

/* ============ Contact page form (replaces the old CRM iframe) ============ */
a[href^="#social-"] { display: none !important; }
.amx-contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  width: 100%;
  margin: 0;
}
.amx-hp { position: absolute; transform: scale(0); pointer-events: none; }
.amx-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.amx-field-wide { grid-column: 1 / -1; }
.amx-field label {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(9, 9, 11, 0.62);
}
.amx-field input,
.amx-field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 11px;
  border: 1px solid rgba(9, 9, 11, 0.14);
  background: #ffffff;
  color: var(--amx-ink);
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  transition: border-color 0.25s var(--amx-out), box-shadow 0.25s var(--amx-out);
}
.amx-field textarea { resize: vertical; min-height: 132px; }
.amx-field input::placeholder,
.amx-field textarea::placeholder { color: rgba(9, 9, 11, 0.38); }
.amx-field input:focus,
.amx-field textarea:focus {
  outline: none;
  border-color: var(--amx-accent);
  box-shadow: 0 0 0 3px rgba(119, 118, 246, 0.18);
}
.amx-form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.amx-contact-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: linear-gradient(158deg, rgba(178,142,255,0.92) 0%, rgba(139,92,246,0.78) 46%, rgba(109,60,220,0.86) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 6px 22px rgba(109,60,220,0.36);
  color: #ffffff;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.3s var(--amx-out), box-shadow 0.3s var(--amx-out);
}
@media (hover: hover) and (pointer: fine) {
  .amx-contact-submit:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 10px 30px rgba(109,60,220,0.5); }
}
.amx-contact-submit:active { transform: scale(0.98); }
.amx-form-note {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 13.5px;
  color: rgba(9, 9, 11, 0.55);
}
html.amx-dark .amx-field label { color: rgba(255, 255, 255, 0.66); }
html.amx-dark .amx-field input,
html.amx-dark .amx-field textarea {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fafafa;
}
html.amx-dark .amx-field input::placeholder,
html.amx-dark .amx-field textarea::placeholder { color: rgba(255, 255, 255, 0.38); }
html.amx-dark .amx-form-note { color: rgba(255, 255, 255, 0.58); }
@media (max-width: 720px) {
  .amx-contact-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Results section: collapse the duplicated blocks ---------- */
.amx-dupe { display: none !important; }

/* featured review (Nicolas) spans the wall and leads it */
.amx-gr-featured { grid-column: 1 / -1; }
@media (min-width: 861px) {
  .amx-gr-featured { transform: none !important; }
  .amx-gr-featured .amx-gr-text { font-size: 19px; line-height: 1.55; letter-spacing: -0.005em; }
  .amx-gr-featured .amx-gr-mark { width: 26px; height: 26px; }
}
.amx-gr-featured .amx-gr-text { color: var(--amx-ink); font-weight: 500; }
html.amx-dark .amx-gr-featured .amx-gr-text { color: #fafafa; }
.amx-gr-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.amx-gr-role {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 12.5px;
  color: rgba(9, 9, 11, 0.55);
}
html.amx-dark .amx-gr-role { color: rgba(255, 255, 255, 0.55); }
.amx-gr-avatar-logo { background: #0e0e14; padding: 0; overflow: hidden; }
.amx-gr-avatar-logo img { width: 100%; height: 100%; object-fit: contain; padding: 18%; box-sizing: border-box; }

/* ============ Portfolio grid + review cards (v77) ============ */
/* shared scroll-in: fade + rise, staggered by --i */
/* Gated on html.js so pre-rendered blocks (about page team, service grids)
   paint before amx-fx.js runs and stay visible when JS is off. */
html.js .amx-rise {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--amx-out), transform 0.7s var(--amx-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.js .amx-rise.amx-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .amx-rise { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Portfolio grid ---------- */
.amx-pf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  width: min(1200px, 92vw);
  margin: 0 auto;
}
.amx-pf-card {
  display: block;
  text-decoration: none;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(9, 9, 11, 0.09);
  box-shadow: 0 14px 40px rgba(9, 9, 11, 0.07);
}
.amx-pf-hero { grid-column: 1 / -1; }
html.amx-dark .amx-pf-card {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}
.amx-pf-shot {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0d0d13;
}
.amx-pf-hero .amx-pf-shot { aspect-ratio: 21 / 9; }
.amx-pf-shot img,
.amx-pf-shot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.9s var(--amx-out);
}
.amx-pf-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 20px;
}
.amx-pf-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.amx-pf-dots { display: flex; gap: 4px; margin-bottom: 6px; }
.amx-pf-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--amx-accent); opacity: 0.85; }
.amx-pf-dots i:nth-child(2) { opacity: 0.6; }
.amx-pf-dots i:nth-child(3) { opacity: 0.4; }
.amx-pf-dots i:nth-child(4) { opacity: 0.22; }
.amx-pf-name {
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--amx-ink);
}
.amx-pf-domain {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 13px;
  color: rgba(9, 9, 11, 0.52);
  overflow: hidden;
  text-overflow: ellipsis;
}
html.amx-dark .amx-pf-name { color: #fafafa; }
html.amx-dark .amx-pf-domain { color: rgba(255, 255, 255, 0.55); }
.amx-pf-tags { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; flex: 0 0 auto; }
.amx-pf-tags b {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(9, 9, 11, 0.12);
  color: rgba(9, 9, 11, 0.66);
  white-space: nowrap;
}
html.amx-dark .amx-pf-tags b { border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.72); }
@media (hover: hover) and (pointer: fine) {
  .amx-pf-card { transition: transform 0.45s var(--amx-out), box-shadow 0.45s var(--amx-out), border-color 0.45s var(--amx-out); }
  .amx-pf-card:hover { transform: translateY(-5px); border-color: rgba(119, 118, 246, 0.45); box-shadow: 0 24px 60px rgba(119, 118, 246, 0.20); }
  .amx-pf-card:hover .amx-pf-shot img,
  .amx-pf-card:hover .amx-pf-shot video { transform: scale(1.045); }
}
@media (max-width: 860px) {
  .amx-pf-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .amx-pf-hero .amx-pf-shot { aspect-ratio: 16 / 10; }
}

/* ---------- Review cards: logo + score, white cards ---------- */
.amx-gr-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  padding-bottom: 10px !important;
}
.amx-gr-card {
  gap: 18px !important;
  padding: 22px 24px 24px !important;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(9, 9, 11, 0.09);
  box-shadow: 0 12px 34px rgba(9, 9, 11, 0.07);
  transform: none !important;
}
html.amx-dark .amx-gr-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
}
/* the reference lifts and tilts the first card */
.amx-gr-tilt { transform: rotate(-2.2deg) !important; box-shadow: 0 22px 50px rgba(9, 9, 11, 0.14); }
html.amx-dark .amx-gr-tilt { box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5); }
.amx-gr-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.amx-gr-brand { max-height: 26px; max-width: 130px; width: auto; object-fit: contain; }
html.amx-dark .amx-gr-brand { filter: brightness(0) invert(1); opacity: 0.92; }
.amx-gr-brand-g { max-height: 20px; }
html.amx-dark .amx-gr-brand-g { filter: none; opacity: 1; }
.amx-gr-score {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--amx-ink);
}
.amx-gr-score svg { width: 15px; height: 15px; fill: #16A75C; }
html.amx-dark .amx-gr-score { color: #fafafa; }
.amx-gr-quote { display: block !important; }
.amx-gr-text { font-size: 15px !important; line-height: 1.6 !important; }
.amx-gr-author { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.amx-gr-name { font-size: 17px !important; font-weight: 700 !important; }
@media (min-width: 861px) {
  .amx-gr-card:nth-child(even) { transform: none !important; }
  .amx-gr-tilt { transform: rotate(-2.2deg) !important; }
}
@media (hover: hover) and (pointer: fine) {
  .amx-gr-card { transition: transform 0.4s var(--amx-out), box-shadow 0.4s var(--amx-out); }
  .amx-gr-card:hover { transform: translateY(-4px) !important; box-shadow: 0 24px 56px rgba(119, 118, 246, 0.18); }
  .amx-gr-tilt:hover { transform: rotate(-2.2deg) translateY(-4px) !important; }
}
@media (max-width: 1000px) { .amx-gr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 700px) { .amx-gr-grid { grid-template-columns: minmax(0, 1fr) !important; } .amx-gr-tilt { transform: none !important; } }

/* hero portfolio card: larger type, full-bleed motion */
.amx-pf-hero .amx-pf-name { font-size: clamp(20px, 2.2vw, 26px); }
.amx-pf-hero .amx-pf-domain { font-size: 14px; }
.amx-pf-hero .amx-pf-meta { padding: 22px 26px 24px; }
.amx-pf-shot video { display: block; }
/* tablet: keep two columns but tighten */
@media (max-width: 1100px) and (min-width: 861px) {
  .amx-pf-grid { gap: 20px; }
  .amx-pf-name { font-size: 16px; }
  .amx-pf-tags b { font-size: 11px; padding: 4px 9px; }
}
/* phone: stack the meta so tags never squeeze the name */
@media (max-width: 560px) {
  .amx-pf-meta { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 16px 18px; }
  .amx-pf-tags { justify-content: flex-start; }
  .amx-pf-domain { font-size: 12.5px; }
  .amx-pf-hero .amx-pf-name { font-size: 19px; }
}

/* ---------- Results header: badge, CTA, platform row ---------- */
.amx-results-head { margin-bottom: 42px; }
.amx-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 11px;
  margin-bottom: 18px;
  border-radius: 999px;
  border: 1px solid rgba(119, 118, 246, 0.28);
  background: rgba(119, 118, 246, 0.10);
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5654E0;
}
.amx-pill svg { width: 13px; height: 13px; }
html.amx-dark .amx-pill { color: #B7B6FF; border-color: rgba(255, 255, 255, 0.14); background: rgba(119, 118, 246, 0.16); }
.amx-results-head p { font-size: 16.5px; max-width: 62ch; }
.amx-pf-cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 26px;
  padding: 7px 22px 7px 7px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(9, 9, 11, 0.10);
  box-shadow: 0 8px 24px rgba(9, 9, 11, 0.08);
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--amx-ink);
  text-decoration: none;
  transition: transform 0.32s var(--amx-out), box-shadow 0.32s var(--amx-out);
}
.amx-pf-cta-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7776F6, #5654E0);
  color: #ffffff;
  flex: 0 0 auto;
  transition: transform 0.32s var(--amx-out);
}
.amx-pf-cta-ico svg { width: 15px; height: 15px; }
html.amx-dark .amx-pf-cta {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fafafa;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
@media (hover: hover) and (pointer: fine) {
  .amx-pf-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(119, 118, 246, 0.26); }
  .amx-pf-cta:hover .amx-pf-cta-ico { transform: rotate(45deg); }
}
.amx-pf-plabel {
  display: block;
  margin: 34px 0 16px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: rgba(9, 9, 11, 0.46);
}
html.amx-dark .amx-pf-plabel { color: rgba(255, 255, 255, 0.46); }
.amx-pf-partners {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 26px 34px;
}
.amx-pf-partners img {
  height: 22px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.45;
  transition: opacity 0.3s var(--amx-out), filter 0.3s var(--amx-out);
}
html.amx-dark .amx-pf-partners img { filter: grayscale(1) brightness(2.4); opacity: 0.5; }
@media (hover: hover) and (pointer: fine) {
  .amx-pf-partners img:hover { filter: none; opacity: 1; }
}
@media (max-width: 560px) {
  .amx-pf-partners { gap: 18px 22px; }
  .amx-pf-partners img { height: 18px; }
  .amx-results-head { margin-bottom: 30px; }
}

/* ============ Sliding review marquee ============ */
.amx-rv-marquee {
  position: relative;
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to left, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.amx-rv-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: amx-rv-slide 66s linear infinite;
}
/* only the offscreen pause remains; hovering no longer stops the row */
.amx-rv-track.amx-paused { animation-play-state: paused; }
@keyframes amx-rv-slide {
  to { transform: translateX(calc(-50% - 10px)); }
}
.amx-rv-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: min(600px, 84vw);
  margin: 0;
  border-radius: 14px;
  border: 1.2px solid rgba(9, 9, 11, 0.14);
  background: #ffffff;
  overflow: hidden;
}
html.amx-dark .amx-rv-card {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
}
.amx-rv-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.amx-rv-stars { display: inline-flex; align-items: center; gap: 3px; color: #F5A524; }
.amx-rv-stars svg { width: 14px; height: 14px; fill: currentColor; }
.amx-rv-stars b {
  margin-left: 6px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgba(9, 9, 11, 0.62);
}
html.amx-dark .amx-rv-stars b { color: rgba(255, 255, 255, 0.66); }
.amx-rv-quote {
  margin: 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(17px, 1.5vw, 23px);
  font-weight: 300;
  line-height: 1.34;
  letter-spacing: -0.028em;
  color: var(--amx-ink);
  text-wrap: pretty;
}
html.amx-dark .amx-rv-quote { color: #fafafa; }
.amx-rv-foot {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-top: 1.2px solid rgba(9, 9, 11, 0.12);
}
html.amx-dark .amx-rv-foot { border-top-color: rgba(255, 255, 255, 0.12); }
.amx-rv-who { display: flex; align-items: center; gap: 11px; padding: 13px 16px; flex: 1 1 auto; min-width: 0; }
.amx-rv-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #7776F6, #5654E0);
  color: #ffffff;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15px;
  font-weight: 700;
}
.amx-rv-avatar-logo { background: #0e0e14; overflow: hidden; }
.amx-rv-avatar-logo img { width: 100%; height: 100%; object-fit: contain; padding: 18%; box-sizing: border-box; }
.amx-rv-id { display: flex; flex-direction: column; min-width: 0; }
.amx-rv-name {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  font-style: normal;
  color: var(--amx-ink);
}
.amx-rv-role {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 13px;
  color: rgba(9, 9, 11, 0.42);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.amx-dark .amx-rv-name { color: #fafafa; }
html.amx-dark .amx-rv-role { color: rgba(255, 255, 255, 0.5); }
.amx-rv-div { width: 1.2px; background: rgba(9, 9, 11, 0.12); flex: 0 0 auto; }
html.amx-dark .amx-rv-div { background: rgba(255, 255, 255, 0.12); }
.amx-rv-logo { display: grid; place-items: center; padding: 10px 18px; flex: 0 0 auto; }
.amx-rv-brand { height: 22px; max-width: 112px; width: auto; object-fit: contain; }
html.amx-dark .amx-rv-brand { filter: brightness(0) invert(1); opacity: 0.9; }
.amx-rv-brand-g { height: 19px; }
html.amx-dark .amx-rv-brand-g { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .amx-rv-track { animation: none; }
  .amx-rv-marquee { overflow-x: auto; }
}
@media (max-width: 560px) {
  .amx-rv-logo { padding: 10px 12px; }
  .amx-rv-brand { max-width: 84px; height: 18px; }
}

/* ============ Taped-card footer ============ */
#amx-footer {
  width: min(1120px, 92vw);
  margin: 64px auto 32px;
  font-family: "Inter Tight", Inter, sans-serif;
}
.amx-ft-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding: 46px 44px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid rgba(9, 9, 11, 0.08);
  box-shadow: 0 24px 60px rgba(9, 9, 11, 0.10);
}
html.amx-dark .amx-ft-card {
  background: #14141c;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
/* torn tape holding the card to the page */
.amx-ft-tape {
  position: absolute;
  top: -17px;
  width: 92px;
  height: 40px;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(9, 9, 11, 0.22));
}
.amx-ft-tape svg { width: 100%; height: 100%; }
.amx-ft-tape svg path { fill: #26262e; }
html.amx-dark .amx-ft-tape svg path { fill: #3a3a46; }
.amx-ft-l { left: -22px; transform: rotate(-6deg); }
.amx-ft-r { right: -22px; transform: rotate(96deg); }
.amx-ft-brand { flex: 1 1 300px; max-width: 420px; }
.amx-ft-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--amx-ink);
}
.amx-ft-logo img { width: 26px; height: 26px; filter: brightness(0); }
html.amx-dark .amx-ft-logo { color: #fafafa; }
html.amx-dark .amx-ft-logo img { filter: none; }
.amx-ft-brand p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(9, 9, 11, 0.52);
}
html.amx-dark .amx-ft-brand p { color: rgba(255, 255, 255, 0.55); }
.amx-ft-cols { display: flex; flex-wrap: wrap; gap: 46px; }
.amx-ft-col { display: flex; flex-direction: column; gap: 11px; }
.amx-ft-col h4 {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(9, 9, 11, 0.42);
}
html.amx-dark .amx-ft-col h4 { color: rgba(255, 255, 255, 0.42); }
.amx-ft-col a {
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(9, 9, 11, 0.72);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.22s var(--amx-out);
}
html.amx-dark .amx-ft-col a { color: rgba(255, 255, 255, 0.72); }
@media (hover: hover) and (pointer: fine) {
  .amx-ft-col a:hover { color: var(--amx-accent); }
}
.amx-ft-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 8px 0;
}
.amx-ft-bar p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  font-size: 13.5px;
  color: rgba(9, 9, 11, 0.5);
}
.amx-ft-bar a { color: rgba(9, 9, 11, 0.5); text-decoration: none; }
html.amx-dark .amx-ft-bar p, html.amx-dark .amx-ft-bar a { color: rgba(255, 255, 255, 0.5); }
@media (hover: hover) and (pointer: fine) {
  .amx-ft-bar a:hover { color: var(--amx-accent); }
}
.amx-ft-social { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(9, 9, 11, 0.14); }
.amx-ft-social svg { width: 17px; height: 17px; }
html.amx-dark .amx-ft-social { border-color: rgba(255, 255, 255, 0.16); }
@media (max-width: 760px) {
  .amx-ft-card { padding: 38px 26px; gap: 30px; }
  .amx-ft-tape { width: 74px; }
  .amx-ft-cols { gap: 28px 34px; }
  .amx-ft-bar { padding-top: 14px; }
  .amx-ft-bar p { gap: 10px; font-size: 12.5px; }
}

/* ============ CTA card (image background + inline email capture) ============ */
.amx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.amx-cta {
  position: relative;
  width: min(1200px, 92vw);
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 26px 64px rgba(9, 9, 11, 0.28);
  isolation: isolate;
}
.amx-cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.amx-cta-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(8, 5, 15, 0.90) 0%, rgba(10, 6, 20, 0.80) 42%, rgba(20, 10, 35, 0.62) 100%),
    linear-gradient(180deg, rgba(119, 118, 246, 0.10), rgba(0, 0, 0, 0.25));
}
.amx-cta-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 38px;
  padding: clamp(32px, 4.4vw, 62px);
}
.amx-cta-copy h2 {
  margin: 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(28px, 3.4vw, 45px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-wrap: balance;
}
.amx-cta-copy p {
  margin: 16px 0 0;
  max-width: 46ch;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.amx-cta-form { display: flex; flex-wrap: wrap; gap: 12px; }
.amx-cta-form button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  color: #0a0a0e;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.3s var(--amx-out), background 0.3s var(--amx-out), box-shadow 0.3s var(--amx-out);
}
.amx-cta-form button svg { width: 16px; height: 16px; transition: transform 0.3s var(--amx-out); }
@media (hover: hover) and (pointer: fine) {
  .amx-cta-form button:hover { background: #ececff; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
  .amx-cta-form button:hover svg { transform: translateX(4px); }
}
.amx-cta-form button:active { transform: scale(0.98); }
.amx-cta-note {
  flex: 1 0 100%;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}
@media (max-width: 900px) {
  .amx-cta-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .amx-cta-copy p { max-width: none; }
}
@media (max-width: 520px) {
  .amx-cta-form button { flex: 1 0 100%; justify-content: center; }
}

/* ============ Tabbed FAQ ============ */
#amx-faq {
  position: relative;
  width: min(1200px, 92vw);
  margin: 0 auto;
  padding: 8px 0 4px;
  font-family: "Inter Tight", Inter, sans-serif;
}
.amx-faq-glow {
  position: absolute;
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  width: 620px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(119, 118, 246, 0.20), rgba(119, 118, 246, 0.04) 60%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.amx-faq-head { position: relative; z-index: 1; text-align: center; margin-bottom: 26px; }
.amx-faq-kicker {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(90deg, #7776F6, #B7B6FF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.amx-faq-head h2 {
  margin: 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(30px, 4.2vw, 50px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--amx-ink);
  text-wrap: balance;
}
html.amx-dark .amx-faq-head h2 { color: #fafafa; }
.amx-faq-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 38px;
}
.amx-faq-tab {
  position: relative;
  overflow: hidden;
  padding: 9px 18px;
  border-radius: 9px;
  border: 1px solid rgba(9, 9, 11, 0.14);
  background: transparent;
  color: rgba(9, 9, 11, 0.6);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.45s var(--amx-out), border-color 0.45s var(--amx-out);
}
.amx-faq-tab span { position: relative; z-index: 1; }
/* the fill slides up from below when a tab is chosen */
.amx-faq-tab i {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, #7776F6, #5654E0);
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.84, 0);
}
.amx-faq-tab.on { color: #ffffff; border-color: transparent; }
.amx-faq-tab.on i { transform: translateY(0); }
html.amx-dark .amx-faq-tab { border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); }
html.amx-dark .amx-faq-tab.on { color: #ffffff; }
@media (hover: hover) and (pointer: fine) {
  .amx-faq-tab:not(.on):hover { color: var(--amx-ink); }
  html.amx-dark .amx-faq-tab:not(.on):hover { color: #fafafa; }
}
.amx-faq-panels { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.amx-faq-panel { display: none; }
.amx-faq-panel.on { display: block; animation: amx-faq-in 0.45s var(--amx-out) both; }
@keyframes amx-faq-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.amx-faq-item {
  border: 1px solid rgba(9, 9, 11, 0.10);
  border-radius: 14px;
  background: #ffffff;
  margin-bottom: 12px;
  transition: background 0.3s var(--amx-out), border-color 0.3s var(--amx-out);
}
.amx-faq-item.open { background: rgba(119, 118, 246, 0.05); border-color: rgba(119, 118, 246, 0.28); }
html.amx-dark .amx-faq-item { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.10); }
html.amx-dark .amx-faq-item.open { background: rgba(119, 118, 246, 0.12); border-color: rgba(119, 118, 246, 0.34); }
.amx-faq-q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 20px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 600;
  color: rgba(9, 9, 11, 0.68);
  transition: color 0.3s var(--amx-out);
}
.amx-faq-item.open .amx-faq-q { color: var(--amx-ink); }
html.amx-dark .amx-faq-q { color: rgba(255, 255, 255, 0.7); }
html.amx-dark .amx-faq-item.open .amx-faq-q { color: #fafafa; }
.amx-faq-ico { width: 19px; height: 19px; flex: 0 0 auto; transition: transform 0.28s var(--amx-out); }
.amx-faq-item.open .amx-faq-ico { transform: rotate(45deg); }
.amx-faq-a { height: 0; overflow: hidden; transition: height 0.34s var(--amx-out); }
.amx-faq-a p {
  margin: 0;
  padding: 0 20px 20px;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(9, 9, 11, 0.6);
}
html.amx-dark .amx-faq-a p { color: rgba(255, 255, 255, 0.62); }
@media (prefers-reduced-motion: reduce) {
  .amx-faq-panel.on { animation: none; }
  .amx-faq-a, .amx-faq-tab i { transition: none; }
}
@media (max-width: 560px) {
  .amx-faq-tabs { gap: 8px; }
  .amx-faq-tab { padding: 8px 13px; font-size: 13px; }
  .amx-faq-q { font-size: 15px; padding: 15px 16px; }
  .amx-faq-a p { padding: 0 16px 17px; font-size: 14.5px; }
}

/* ============ About page ============ */
.amx-ab-wrap { width: min(1120px, 92vw); margin: 0 auto; padding: 20px 0 10px; font-family: "Inter Tight", Inter, sans-serif; }
.amx-ab-lead { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.amx-ab-lead h2, .amx-ab-why h2, .amx-ab-values h2 {
  margin: 14px 0 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--amx-ink);
  text-wrap: balance;
}
html.amx-dark .amx-ab-lead h2, html.amx-dark .amx-ab-why h2, html.amx-dark .amx-ab-values h2 { color: #fafafa; }
.amx-ab-lead p, .amx-ab-why p {
  margin: 16px 0 0;
  font-size: 16.5px;
  line-height: 1.68;
  color: rgba(9, 9, 11, 0.6);
}
html.amx-dark .amx-ab-lead p, html.amx-dark .amx-ab-why p { color: rgba(255, 255, 255, 0.62); }
.amx-ab-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 60px; }
.amx-ab-person {
  padding: 30px 30px 32px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(9, 9, 11, 0.09);
  box-shadow: 0 14px 40px rgba(9, 9, 11, 0.06);
}
html.amx-dark .amx-ab-person { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); }
.amx-ab-avatar {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 16px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #7776F6, #5654E0);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  box-shadow: 0 0 0 3px rgba(119, 118, 246, 0.18);
}
.amx-ab-avatar img { width: 100%; height: 100%; object-fit: cover; }
.amx-ab-person h3 {
  margin: 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--amx-ink);
}
html.amx-dark .amx-ab-person h3 { color: #fafafa; }
.amx-ab-role {
  display: block;
  margin: 3px 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5654E0;
}
html.amx-dark .amx-ab-role { color: #B7B6FF; }
.amx-ab-person p { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(9, 9, 11, 0.6); }
html.amx-dark .amx-ab-person p { color: rgba(255, 255, 255, 0.62); }
.amx-ab-why { max-width: 760px; margin: 0 auto 60px; text-align: center; }
.amx-ab-values { text-align: center; }
.amx-ab-vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 30px; text-align: left; }
.amx-ab-value {
  padding: 26px 24px;
  border-radius: 18px;
  border: 1px solid rgba(9, 9, 11, 0.09);
  background: linear-gradient(180deg, rgba(119, 118, 246, 0.06), rgba(119, 118, 246, 0.02));
}
html.amx-dark .amx-ab-value { border-color: rgba(255, 255, 255, 0.10); background: linear-gradient(180deg, rgba(119, 118, 246, 0.12), rgba(119, 118, 246, 0.03)); }
.amx-ab-value h4 {
  margin: 0 0 8px;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--amx-ink);
}
html.amx-dark .amx-ab-value h4 { color: #fafafa; }
.amx-ab-value p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(9, 9, 11, 0.58); }
html.amx-dark .amx-ab-value p { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 860px) {
  .amx-ab-team, .amx-ab-vgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ============ Blog index ============ */
#amx-blog, #amx-portfolio, #amx-about { display: block; width: 100%; padding: 30px 0 10px; }
.amx-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: min(1200px, 92vw);
  margin: 0 auto;
}
.amx-blog-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 26px 24px;
  border-radius: 18px;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid rgba(9, 9, 11, 0.09);
  box-shadow: 0 12px 34px rgba(9, 9, 11, 0.06);
  transition: transform 0.4s var(--amx-out), border-color 0.4s var(--amx-out), box-shadow 0.4s var(--amx-out);
}
html.amx-dark .amx-blog-card { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35); }
@media (hover: hover) and (pointer: fine) {
  .amx-blog-card:hover { transform: translateY(-4px); border-color: rgba(119, 118, 246, 0.42); box-shadow: 0 22px 50px rgba(119, 118, 246, 0.16); }
  .amx-blog-card:hover .amx-blog-more svg { transform: translate(3px, -3px); }
}
.amx-blog-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: "Inter Tight", Inter, sans-serif; }
.amx-blog-top b {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5654E0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(119, 118, 246, 0.10);
}
html.amx-dark .amx-blog-top b { color: #B7B6FF; background: rgba(119, 118, 246, 0.18); }
.amx-blog-top time { font-size: 12.5px; color: rgba(9, 9, 11, 0.45); }
html.amx-dark .amx-blog-top time { color: rgba(255, 255, 255, 0.45); }
.amx-blog-card h3 {
  margin: 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--amx-ink);
  text-wrap: balance;
}
html.amx-dark .amx-blog-card h3 { color: #fafafa; }
.amx-blog-card p {
  margin: 0;
  flex: 1;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(9, 9, 11, 0.58);
}
html.amx-dark .amx-blog-card p { color: rgba(255, 255, 255, 0.6); }
.amx-blog-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #5654E0;
}
html.amx-dark .amx-blog-more { color: #B7B6FF; }
.amx-blog-more svg { width: 13px; height: 13px; transition: transform 0.3s var(--amx-out); }
@media (max-width: 1000px) { .amx-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .amx-blog-grid { grid-template-columns: minmax(0, 1fr); } }

/* ============ Legal pages ============ */
#amx-legal-page {
  width: min(820px, 92vw);
  margin: 0 auto;
  padding: 120px 0 90px;
  font-family: "Inter Tight", Inter, sans-serif;
}
.amx-legal-home {
  display: inline-block;
  margin-bottom: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #5654E0;
  text-decoration: none;
}
html.amx-dark .amx-legal-home { color: #B7B6FF; }
.amx-legal h1 {
  margin: 0 0 10px;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--amx-ink);
}
.amx-legal h2 {
  margin: 42px 0 12px;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--amx-ink);
}
.amx-legal h3 { margin: 26px 0 8px; font-size: 17px; font-weight: 700; color: var(--amx-ink); }
.amx-legal p, .amx-legal li { font-size: 16px; line-height: 1.75; color: rgba(9, 9, 11, 0.66); }
.amx-legal p { margin: 0 0 14px; }
.amx-legal ul { margin: 0 0 18px; padding-left: 22px; }
.amx-legal li { margin-bottom: 7px; }
.amx-legal a { color: #5654E0; }
html.amx-dark .amx-legal h1, html.amx-dark .amx-legal h2, html.amx-dark .amx-legal h3 { color: #fafafa; }
html.amx-dark .amx-legal p, html.amx-dark .amx-legal li { color: rgba(255, 255, 255, 0.66); }
html.amx-dark .amx-legal a { color: #B7B6FF; }

.amx-legal-date {
  margin: 0 0 22px;
  padding: 10px 14px;
  border-left: 3px solid #5654E0;
  background: rgba(86, 84, 224, 0.06);
  border-radius: 0 8px 8px 0;
  font-size: 14px !important;
  line-height: 1.6;
}
html.amx-dark .amx-legal-date { border-left-color: #B7B6FF; background: rgba(183, 182, 255, 0.07); }
.amx-legal-note {
  margin: 0 0 30px;
  padding: 18px 20px;
  border: 1px solid rgba(86, 84, 224, 0.28);
  border-radius: 12px;
  background: rgba(86, 84, 224, 0.05);
}
.amx-legal-note p:last-child { margin-bottom: 0; }
html.amx-dark .amx-legal-note { border-color: rgba(183, 182, 255, 0.24); background: rgba(183, 182, 255, 0.05); }
.amx-legal-table {
  margin: 0 0 22px;
  overflow-x: auto;
  border: 1px solid rgba(9, 9, 11, 0.12);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}
html.amx-dark .amx-legal-table { border-color: rgba(255, 255, 255, 0.14); }
.amx-legal-table table { width: 100%; min-width: 520px; border-collapse: collapse; }
.amx-legal-table th,
.amx-legal-table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  font-size: 14.5px;
  line-height: 1.6;
  border-bottom: 1px solid rgba(9, 9, 11, 0.08);
  color: rgba(9, 9, 11, 0.66);
}
.amx-legal-table th {
  font-weight: 700;
  color: var(--amx-ink);
  background: rgba(9, 9, 11, 0.035);
  white-space: nowrap;
}
.amx-legal-table tr:last-child td { border-bottom: 0; }
.amx-legal-table code { font-size: 13px; padding: 1px 5px; border-radius: 4px; background: rgba(9, 9, 11, 0.06); }
html.amx-dark .amx-legal-table th,
html.amx-dark .amx-legal-table td { border-bottom-color: rgba(255, 255, 255, 0.09); color: rgba(255, 255, 255, 0.66); }
html.amx-dark .amx-legal-table th { color: #fafafa; background: rgba(255, 255, 255, 0.045); }
html.amx-dark .amx-legal-table code { background: rgba(255, 255, 255, 0.09); }
@media (max-width: 600px) {
  .amx-legal-table th, .amx-legal-table td { padding: 9px 11px; font-size: 13.5px; }
}

/* ---------- case-study link under a portfolio card ---------- */
.amx-pf-card + .amx-pf-study {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: -6px 0 0 4px;
  padding: 8px 2px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #5654E0;
  text-decoration: none;
}
html.amx-dark .amx-pf-study { color: #B7B6FF; }
.amx-pf-study svg { width: 14px; height: 14px; transition: transform 0.28s var(--amx-out); }
@media (hover: hover) and (pointer: fine) { .amx-pf-study:hover svg { transform: translateX(4px); } }

/* ============ Long-form article pages (case studies + guides) ============ */
#amx-article-page {
  width: min(780px, 92vw);
  margin: 0 auto;
  padding: 120px 0 90px;
  font-family: "Inter Tight", Inter, sans-serif;
}
.amx-article h1 {
  margin: 14px 0 12px;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.03;
  color: var(--amx-ink);
  text-wrap: balance;
}
.amx-art-lede {
  margin: 0 0 26px;
  font-size: 18px;
  line-height: 1.62;
  color: rgba(9, 9, 11, 0.6);
}
.amx-art-shot {
  display: block;
  margin: 0 0 34px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 11, 0.10);
  box-shadow: 0 18px 46px rgba(9, 9, 11, 0.12);
}
.amx-art-shot img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; object-position: center top; }
html.amx-dark .amx-art-shot { border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.45); }
.amx-article h2 {
  margin: 44px 0 12px;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--amx-ink);
  text-wrap: balance;
}
.amx-article h3 { margin: 30px 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; color: var(--amx-ink); }
.amx-article h4 { margin: 24px 0 6px; font-size: 16.5px; font-weight: 700; color: var(--amx-ink); }
.amx-article p, .amx-article li { font-size: 16.5px; line-height: 1.75; color: rgba(9, 9, 11, 0.68); }
.amx-article p { margin: 0 0 16px; }
.amx-article ul { margin: 0 0 20px; padding-left: 22px; }
.amx-article li { margin-bottom: 8px; }
.amx-article blockquote {
  margin: 26px 0;
  padding: 18px 22px;
  border-left: 3px solid var(--amx-accent);
  border-radius: 0 12px 12px 0;
  background: rgba(119, 118, 246, 0.07);
  font-size: 17px;
  line-height: 1.6;
}
.amx-article a { color: #5654E0; }
html.amx-dark .amx-article h1, html.amx-dark .amx-article h2,
html.amx-dark .amx-article h3, html.amx-dark .amx-article h4 { color: #fafafa; }
html.amx-dark .amx-art-lede, html.amx-dark .amx-article p, html.amx-dark .amx-article li { color: rgba(255, 255, 255, 0.68); }
html.amx-dark .amx-article a { color: #B7B6FF; }
#amx-article-page .amx-pill { margin-bottom: 4px; }

/* the mirror shipped a French locale switcher; this site is English only */
[data-framer-name="Language Selector"],
[aria-label="Select Language"],
[data-framer-name="Locale"] { display: none !important; }

/* ============ Article reading UI ============ */
.amx-read-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2147483001; pointer-events: none; }
.amx-read-bar i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #7776F6, #B7B6FF);
}
/* two-column reading layout once there's room for the rail */
#amx-article-page { position: relative; }
@media (min-width: 1180px) {
  #amx-article-page.amx-has-toc {
    width: min(1180px, 94vw);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 244px;
    column-gap: 56px;
    align-items: start;
  }
  #amx-article-page.amx-has-toc > .amx-legal-home { grid-column: 1; }
  #amx-article-page.amx-has-toc > .amx-article { grid-column: 1; }
  #amx-article-page.amx-has-toc > .amx-toc { grid-column: 2; grid-row: 2; position: sticky; top: 120px; }
}
.amx-toc { display: none; font-family: "Inter Tight", Inter, sans-serif; }
@media (min-width: 1180px) { .amx-toc { display: block; } }
.amx-toc h4 {
  margin: 0 0 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(9, 9, 11, 0.42);
}
html.amx-dark .amx-toc h4 { color: rgba(255, 255, 255, 0.42); }
.amx-toc ol { margin: 0; padding: 0 0 0 2px; list-style: none; border-left: 1px solid rgba(9, 9, 11, 0.12); }
html.amx-dark .amx-toc ol { border-left-color: rgba(255, 255, 255, 0.14); }
.amx-toc li { margin: 0; }
.amx-toc a {
  display: block;
  padding: 7px 0 7px 14px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 13.5px; line-height: 1.4;
  color: rgba(9, 9, 11, 0.52);
  text-decoration: none;
  transition: color 0.25s var(--amx-out), border-color 0.25s var(--amx-out);
}
html.amx-dark .amx-toc a { color: rgba(255, 255, 255, 0.5); }
.amx-toc a:hover { color: var(--amx-ink); }
html.amx-dark .amx-toc a:hover { color: #fafafa; }
.amx-toc a.on { color: #5654E0; border-left-color: var(--amx-accent); font-weight: 600; }
html.amx-dark .amx-toc a.on { color: #B7B6FF; }
/* meta row */
.amx-art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 6px; }
.amx-art-meta time, .amx-art-meta span:not(.amx-pill) {
  font-family: "Inter Tight", Inter, sans-serif; font-size: 13.5px; color: rgba(9, 9, 11, 0.48);
}
html.amx-dark .amx-art-meta time, html.amx-dark .amx-art-meta span:not(.amx-pill) { color: rgba(255, 255, 255, 0.48); }
.amx-art-meta .amx-pill { margin-bottom: 0; }
/* richer body rhythm */
.amx-article { max-width: 68ch; }
.amx-article h2 { scroll-margin-top: 110px; padding-top: 6px; }
.amx-article h2::before {
  content: "";
  display: block;
  width: 34px; height: 3px;
  margin-bottom: 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7776F6, rgba(119, 118, 246, 0));
}
.amx-article ul { list-style: none; padding-left: 0; }
.amx-article ul li { position: relative; padding-left: 24px; }
.amx-article ul li::before {
  content: "";
  position: absolute; left: 4px; top: 0.72em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amx-accent); opacity: 0.75;
}
.amx-article a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.amx-article strong { color: var(--amx-ink); font-weight: 700; }
html.amx-dark .amx-article strong { color: #fafafa; }
/* sign-off */
.amx-art-end {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 54px; padding-top: 28px;
  border-top: 1px solid rgba(9, 9, 11, 0.12);
}
html.amx-dark .amx-art-end { border-top-color: rgba(255, 255, 255, 0.12); }
.amx-art-author { display: flex; align-items: center; gap: 13px; font-family: "Inter Tight", Inter, sans-serif; }
.amx-art-face { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: #0e0e14; }
.amx-art-face img { width: 100%; height: 100%; object-fit: cover; }
.amx-art-author strong { display: block; font-size: 15.5px; color: var(--amx-ink); }
.amx-art-author span { font-size: 13px; color: rgba(9, 9, 11, 0.5); }
html.amx-dark .amx-art-author strong { color: #fafafa; }
html.amx-dark .amx-art-author span { color: rgba(255, 255, 255, 0.5); }
.amx-art-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px;
  background: linear-gradient(135deg, #7776F6, #5654E0);
  color: #fff; text-decoration: none;
  font-family: "Inter Tight", Inter, sans-serif; font-size: 14.5px; font-weight: 700;
  box-shadow: 0 8px 24px rgba(119, 118, 246, 0.32);
  transition: transform 0.3s var(--amx-out), box-shadow 0.3s var(--amx-out);
}
.amx-art-cta svg { width: 15px; height: 15px; transition: transform 0.3s var(--amx-out); }
@media (hover: hover) and (pointer: fine) {
  .amx-art-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(119, 118, 246, 0.45); }
  .amx-art-cta:hover svg { transform: translateX(4px); }
}

/* ============ Services page art (bento treatment) ============ */
.amx-svc-art {
  position: relative;
  border-radius: 22px !important;
  overflow: hidden !important;
  isolation: isolate;
  box-shadow: 0 20px 50px rgba(9, 9, 11, 0.16);
}
html.amx-dark .amx-svc-art { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
/* violet wash ties the art to the brand, plus a readable floor */
.amx-svc-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(119, 118, 246, 0) 55%, rgba(9, 9, 14, 0.55) 100%),
    radial-gradient(120% 90% at 12% 8%, rgba(119, 118, 246, 0.22), rgba(119, 118, 246, 0) 60%);
}
.amx-svc-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.amx-svc-art img {
  border-radius: inherit;
  transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .amx-svc-row:hover .amx-svc-art img { transform: scale(1.05); }
}

/* ============ Services hero: vertical text marquee ============ */
#amx-shero {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  isolation: isolate;
  padding: 132px 0 96px;
  font-family: "Inter Tight", Inter, sans-serif;
}
.amx-shero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.amx-shero-glow {
  position: absolute;
  top: -22%; left: 52%;
  width: 900px; height: 720px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(119,118,246,0.28), rgba(119,118,246,0.06) 52%, transparent 70%);
  filter: blur(70px);
}
html.amx-dark .amx-shero-glow { background: radial-gradient(circle, rgba(119,118,246,0.34), rgba(119,118,246,0.08) 52%, transparent 70%); }
/* faint engineering grid, masked to a soft pool */
.amx-shero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(9,9,11,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(9,9,11,0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
}
html.amx-dark .amx-shero-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
}
.amx-shero-inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 56px;
}
.amx-shero-copy { max-width: 560px; }
.amx-shero-copy h1 {
  margin: 16px 0 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(38px, 5.2vw, 68px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.038em;
  color: var(--amx-ink);
  text-wrap: balance;
}
html.amx-dark .amx-shero-copy h1 { color: #fafafa; }
.amx-shero-copy p {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.68;
  color: rgba(9, 9, 11, 0.6);
}
html.amx-dark .amx-shero-copy p { color: rgba(255, 255, 255, 0.62); }
.amx-shero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.amx-shero-b1, .amx-shero-b2 {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px;
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: transform 0.3s var(--amx-out), box-shadow 0.3s var(--amx-out), background 0.3s var(--amx-out);
}
.amx-shero-b1 {
  background: linear-gradient(135deg, #7776F6, #5654E0);
  color: #fff;
  box-shadow: 0 10px 28px rgba(119, 118, 246, 0.34);
}
.amx-shero-b1 svg { width: 15px; height: 15px; transition: transform 0.3s var(--amx-out); }
.amx-shero-b2 {
  background: rgba(9, 9, 11, 0.04);
  border: 1px solid rgba(9, 9, 11, 0.14);
  color: var(--amx-ink);
}
html.amx-dark .amx-shero-b2 { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: #fafafa; }
@media (hover: hover) and (pointer: fine) {
  .amx-shero-b1:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(119, 118, 246, 0.48); }
  .amx-shero-b1:hover svg { transform: translateX(4px); }
  .amx-shero-b2:hover { transform: translateY(-2px); }
}
/* the marquee column */
.amx-shero-mq { position: relative; height: 480px; overflow: hidden; }
.amx-mq-track { display: flex; flex-direction: column; animation: amx-mq-up 26s linear infinite; }
.amx-shero-mq:hover .amx-mq-track { animation-play-state: paused; }
@keyframes amx-mq-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.amx-mq-run { display: flex; flex-direction: column; flex-shrink: 0; }
.amx-mq-item {
  padding: 20px 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.08;
  white-space: nowrap;
  color: var(--amx-ink);
  opacity: 0.25;
}
html.amx-dark .amx-mq-item { color: #fafafa; }
.amx-mq-fade { position: absolute; left: 0; right: 0; height: 165px; z-index: 2; pointer-events: none; }
/* --amx-mqbg is set from the real painted page background at runtime, so the
   fade dissolves instead of stamping a rectangle over a mismatched colour */
.amx-mq-top { top: 0; background: linear-gradient(180deg, var(--amx-mqbg, #fff) 8%, var(--amx-mqbg0, rgba(255,255,255,0)) 100%); }
.amx-mq-bot { bottom: 0; background: linear-gradient(0deg, var(--amx-mqbg, #fff) 8%, var(--amx-mqbg0, rgba(255,255,255,0)) 100%); }
@media (prefers-reduced-motion: reduce) { .amx-mq-track { animation: none; } }
@media (max-width: 900px) {
  #amx-shero { padding: 110px 0 70px; }
  .amx-shero-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .amx-shero-mq { height: 300px; }
}

/* ============ Services: the six services, in normal document flow ============
   Replaces a pinned scroll showcase. Everything here scrolls the way the rest
   of the page does, so a phone gets all six services instead of the one the
   old mobile stylesheet left standing. */
#amx-svcgrid {
  position: relative;
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 8px 0 92px;
  font-family: "Inter Tight", Inter, sans-serif;
}
.amx-sv-inner { width: min(1200px, 92vw); margin: 0 auto; }
.amx-sv-band + .amx-sv-band { margin-top: 76px; }
.amx-sv-bandhead { max-width: 720px; margin: 0 0 34px; }
.amx-sv-kicker {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(119, 118, 246, 0.32);
  background: rgba(119, 118, 246, 0.08);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amx-accent-deep);
}
html.amx-dark .amx-sv-kicker { color: #B7B6FF; border-color: rgba(119, 118, 246, 0.42); }
.amx-sv-bandhead h2 {
  margin: 16px 0 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--amx-ink);
}
html.amx-dark .amx-sv-bandhead h2 { color: #fafafa; }
.amx-sv-bandhead p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.66;
  color: rgba(9, 9, 11, 0.6);
}
html.amx-dark .amx-sv-bandhead p { color: rgba(255, 255, 255, 0.62); }

.amx-sv-grid {
  display: grid;
  /* two even columns at every size that can hold them, so neither band ever
     ends on a ragged row. Half one is a pair, half two is a two by two. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.amx-sv-card {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  border-radius: 20px;
  border: 1px solid rgba(9, 9, 11, 0.10);
  background: #fff;
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 14px 34px rgba(9, 9, 11, 0.05);
  transition: transform 0.35s var(--amx-out), box-shadow 0.35s var(--amx-out), border-color 0.35s var(--amx-out);
}
html.amx-dark .amx-sv-card {
  background: linear-gradient(168deg, #131319, #0c0c11);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}
@media (hover: hover) and (pointer: fine) {
  .amx-sv-card:hover {
    transform: translateY(-4px);
    border-color: rgba(119, 118, 246, 0.42);
    box-shadow: 0 22px 50px rgba(119, 118, 246, 0.18);
  }
}
.amx-sv-art {
  display: block;
  margin: -4px -4px 18px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(119, 118, 246, 0.06);
}
html.amx-dark .amx-sv-art { background: rgba(119, 118, 246, 0.10); }
/* The diagrams are 860x660 with generous margins. Crop them to 16:9 so the
   art never out-weighs the words it illustrates. object-fit is no use here:
   an SVG re-renders itself into whatever box it is given rather than being
   scaled like a bitmap, so the box crops an overflowing full-width image
   instead. */
.amx-sv-art { aspect-ratio: 16 / 9; display: flex; align-items: center; }
.amx-sv-art img { display: block; flex: 0 0 auto; width: 100%; height: auto; }
.amx-sv-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amx-accent-deep);
}
html.amx-dark .amx-sv-eyebrow { color: #B7B6FF; }
.amx-sv-card h3 {
  margin: 10px 0 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.028em;
  color: var(--amx-ink);
}
html.amx-dark .amx-sv-card h3 { color: #fafafa; }
.amx-sv-card p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(9, 9, 11, 0.62);
}
html.amx-dark .amx-sv-card p { color: rgba(255, 255, 255, 0.6); }
.amx-sv-card ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.amx-sv-card li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(9, 9, 11, 0.76);
}
html.amx-dark .amx-sv-card li { color: rgba(255, 255, 255, 0.74); }
.amx-sv-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amx-accent);
}
.amx-sv-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--amx-accent-deep);
}
html.amx-dark .amx-sv-more { color: #B7B6FF; }
.amx-sv-more svg { width: 14px; height: 14px; transition: transform 0.3s var(--amx-out); }
@media (hover: hover) and (pointer: fine) {
  .amx-sv-more:hover svg { transform: translateX(4px); }
}
.amx-sv-note {
  margin: 58px auto 0;
  max-width: 760px;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px dashed rgba(9, 9, 11, 0.18);
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  color: rgba(9, 9, 11, 0.72);
}
html.amx-dark .amx-sv-note { border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.72); }

@media (max-width: 809px) {
  #amx-svcgrid { padding: 4px 0 64px; }
  .amx-sv-band + .amx-sv-band { margin-top: 54px; }
  .amx-sv-grid { gap: 16px; }
  .amx-sv-card { padding: 18px 18px 16px; border-radius: 18px; }
  .amx-sv-card h3 { font-size: 20px; }
  .amx-sv-note { margin-top: 40px; padding: 18px; font-size: 15px; text-align: left; }
}
@media (max-width: 639px) {
  .amx-sv-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- services hero copy polish ---- */
.amx-shero-copy h1 em {
  font-style: normal;
  background: linear-gradient(102deg, #8E8DFF 0%, #7776F6 42%, #4F4DD6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html.amx-dark .amx-shero-copy h1 em {
  background: linear-gradient(102deg, #A9A8FF 0%, #8E8DFF 46%, #6A68F0 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.amx-shero-copy p { max-width: 48ch; }
/* the location line reads as a quiet credential, not body copy */
.amx-shero-where {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(9, 9, 11, 0.46);
}
html.amx-dark .amx-shero-where { color: rgba(255, 255, 255, 0.44); }
.amx-shero-where::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: currentColor;
  opacity: 0.55;
}

/* ============ Services: tool & platform grid ============ */
#amx-integ {
  position: relative; isolation: isolate;
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 104px 0;
  overflow: hidden;
  font-family: "Inter Tight", Inter, sans-serif;
}
.amx-int-inner {
  position: relative; z-index: 1;
  width: min(1080px, 92vw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}

/* ---- moving backdrop ----
   Three slow orbs and a drifting grid. Everything animates transform only,
   so the compositor handles it and the blur is rasterised once. */
.amx-int-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.amx-int-orb {
  position: absolute; border-radius: 50%;
  filter: blur(78px); will-change: transform;
}
.amx-int-orb1 {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  left: -8vw; top: -14%;
  background: radial-gradient(circle, rgba(119, 118, 246, 0.30), rgba(119, 118, 246, 0) 70%);
  animation: amx-int-orbA 26s ease-in-out infinite;
}
.amx-int-orb2 {
  width: 38vw; height: 38vw; max-width: 520px; max-height: 520px;
  right: -6vw; bottom: -18%;
  background: radial-gradient(circle, rgba(79, 77, 214, 0.26), rgba(79, 77, 214, 0) 70%);
  animation: amx-int-orbB 33s ease-in-out infinite;
}
.amx-int-orb3 {
  width: 30vw; height: 30vw; max-width: 400px; max-height: 400px;
  left: 42%; top: 24%;
  background: radial-gradient(circle, rgba(146, 145, 255, 0.20), rgba(146, 145, 255, 0) 70%);
  animation: amx-int-orbC 21s ease-in-out infinite;
}
html:not(.amx-dark) .amx-int-orb1 {
  background: radial-gradient(circle, rgba(119, 118, 246, 0.16), rgba(119, 118, 246, 0) 70%);
}
html:not(.amx-dark) .amx-int-orb2 {
  background: radial-gradient(circle, rgba(79, 77, 214, 0.13), rgba(79, 77, 214, 0) 70%);
}
html:not(.amx-dark) .amx-int-orb3 {
  background: radial-gradient(circle, rgba(146, 145, 255, 0.11), rgba(146, 145, 255, 0) 70%);
}
.amx-int-mesh {
  position: absolute; inset: -60px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 74% 66% at 50% 50%, #000 12%, transparent 76%);
  mask-image: radial-gradient(ellipse 74% 66% at 50% 50%, #000 12%, transparent 76%);
  animation: amx-int-drift 26s linear infinite;
  will-change: transform;
}
html:not(.amx-dark) .amx-int-mesh {
  background-image:
    linear-gradient(to right, rgba(9, 9, 11, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(9, 9, 11, 0.055) 1px, transparent 1px);
}
@keyframes amx-int-drift { to { transform: translate3d(52px, 52px, 0); } }
@keyframes amx-int-orbA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6%, 9%, 0) scale(1.14); }
}
@keyframes amx-int-orbB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
  50%      { transform: translate3d(-7%, -8%, 0) scale(0.94); }
}
@keyframes amx-int-orbC {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.96); }
  50%      { transform: translate3d(-9%, 6%, 0) scale(1.2); }
}

/* ---- the tile cluster ----
   Masking the cluster fades the outer cards to nothing regardless of what the
   page is painted — a colour-matched overlay stamped a visible rectangle.
   The stop moved out from 44%/86% once the wires were added, because the old
   mask cut the outer runs off halfway. */
.amx-int-cluster {
  position: relative; width: fit-content; margin: 0 auto;
  -webkit-mask-image: radial-gradient(ellipse 66% 88% at 50% 50%, #000 54%, transparent 94%);
  mask-image: radial-gradient(ellipse 66% 88% at 50% 50%, #000 54%, transparent 94%);
}
.amx-int-vignette { display: none; }

/* wires sit under the tiles and are measured in JS, so the SVG box is set
   to the cluster's own pixel size and never scaled */
.amx-int-wires {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: visible;
}
.amx-int-wire {
  fill: none; stroke: rgba(119, 118, 246, 0.26); stroke-width: 1.1;
  opacity: 0; transition: opacity 0.9s var(--amx-out) 0.35s;
}
html:not(.amx-dark) .amx-int-wire { stroke: rgba(119, 118, 246, 0.32); }
.amx-int-pulse {
  fill: none; stroke: #9C9BFF; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 9 91; stroke-dashoffset: 0;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(119, 118, 246, 0.85));
  animation: amx-int-flow 4s linear infinite;
}
html:not(.amx-dark) .amx-int-pulse { stroke: #7776F6; }
.amx-int-on .amx-int-wire { opacity: 1; }
.amx-int-on .amx-int-pulse { opacity: 1; transition: opacity 0.8s linear 0.6s; }
/* dashoffset walks one full period, carrying the single dash from the tool
   tile (path start) to the hub (path end) */
@keyframes amx-int-flow { to { stroke-dashoffset: -100; } }

/* row gap has to be at least twice the float amplitude, or two tiles drifting
   towards each other can close it and overlap */
.amx-int-row { display: flex; justify-content: center; gap: 8px; margin-bottom: 13px; }
.amx-int-row:last-child { margin-bottom: 0; }

/* slot = entrance, card = idle float. One transform each so they never
   overwrite one another. */
.amx-int-slot {
  position: relative; z-index: 1;
  opacity: 0; transform: translateY(16px) scale(0.86);
  transition: opacity 0.6s var(--amx-out) var(--d, 0ms),
              transform 0.75s var(--amx-out) var(--d, 0ms);
}
.amx-int-on .amx-int-slot { opacity: 1; transform: none; }
.amx-int-card {
  position: relative;
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: #fff;
  animation: amx-int-float var(--fdur, 7s) ease-in-out var(--fdel, 0s) infinite;
  transition: box-shadow 0.35s var(--amx-out), background 0.35s var(--amx-out);
}
@keyframes amx-int-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, calc(var(--fy, 1) * -6px), 0); }
}
html.amx-dark .amx-int-card { background: transparent; }
.amx-int-b {
  position: absolute; inset: 0; border-radius: 14px;
  border: 1px solid rgba(9, 9, 11, 0.14);
  transition: border-color 0.35s var(--amx-out);
}
html.amx-dark .amx-int-b { border-color: rgba(255, 255, 255, 0.16); }
.amx-int-card img {
  position: relative; z-index: 2;
  width: 32px; height: 32px; object-fit: contain;
  transition: transform 0.4s var(--amx-out);
}
/* the Automatrix tile is the one that reads as the hub */
.amx-int-me { background: linear-gradient(150deg, #7776F6, #4F4DD6); z-index: 2; }
html.amx-dark .amx-int-me { background: linear-gradient(150deg, #7776F6, #4F4DD6); }
.amx-int-me .amx-int-b {
  border-color: rgba(119, 118, 246, 0.55);
  box-shadow: 0 12px 30px rgba(119, 118, 246, 0.42);
}
.amx-int-me img { width: 34px; height: 34px; }
/* radar ping so the hub reads as the thing everything is arriving at */
.amx-int-ping {
  position: absolute; inset: 0; border-radius: 14px;
  border: 1px solid rgba(119, 118, 246, 0.6);
  opacity: 0; pointer-events: none;
}
.amx-int-on .amx-int-ping { animation: amx-int-ping 3.2s ease-out 0.9s infinite; }
@keyframes amx-int-ping {
  0%   { opacity: 0.85; transform: scale(1); }
  70%  { opacity: 0; transform: scale(1.85); }
  100% { opacity: 0; transform: scale(1.85); }
}
@media (hover: hover) and (pointer: fine) {
  /* after this rule so it beats `.amx-int-on .amx-int-slot { transform: none }` */
  .amx-int-slot:hover { transform: translateY(-6px); z-index: 3; }
  .amx-int-slot:hover .amx-int-card { animation-play-state: paused; }
  .amx-int-slot:hover .amx-int-b { border-color: rgba(119, 118, 246, 0.7); }
  .amx-int-slot:hover .amx-int-card { box-shadow: 0 14px 34px rgba(119, 118, 246, 0.3); }
  .amx-int-slot:hover img { transform: scale(1.12); }
}
/* nothing loops while the section is off screen */
#amx-integ:not(.amx-int-live) .amx-int-card,
#amx-integ:not(.amx-int-live) .amx-int-pulse,
#amx-integ:not(.amx-int-live) .amx-int-ping,
#amx-integ:not(.amx-int-live) .amx-int-orb,
#amx-integ:not(.amx-int-live) .amx-int-mesh { animation-play-state: paused; }

/* ---- copy ---- */
.amx-int-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #7776F6; margin-bottom: 14px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s var(--amx-out), transform 0.6s var(--amx-out);
}
.amx-int-eyebrow i {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
}
.amx-int-on .amx-int-eyebrow { opacity: 1; transform: none; }
.amx-int-on .amx-int-eyebrow i { animation: amx-int-blip 2.4s ease-in-out infinite; }
@keyframes amx-int-blip {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(119, 118, 246, 0.55); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 6px rgba(119, 118, 246, 0); }
}
.amx-int-copy h2 {
  margin: 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(27px, 3.2vw, 40px);
  font-weight: 800; line-height: 1.07; letter-spacing: -0.034em;
  color: var(--amx-ink); text-wrap: balance;
}
html.amx-dark .amx-int-copy h2 { color: #fafafa; }
/* each word masked by its own box; the padding/margin pair keeps descenders
   from being clipped by the overflow that does the masking */
.amx-int-w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
.amx-int-w i {
  display: inline-block; font-style: normal;
  transform: translateY(115%);
  transition: transform 0.85s var(--amx-out) var(--d, 0ms);
}
.amx-int-on .amx-int-w i { transform: none; }
.amx-int-copy p {
  margin: 18px 0 0;
  font-size: 16px; line-height: 1.68; max-width: 46ch;
  color: rgba(9, 9, 11, 0.6);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.7s var(--amx-out) 0.42s, transform 0.7s var(--amx-out) 0.42s;
}
html.amx-dark .amx-int-copy p { color: rgba(255, 255, 255, 0.6); }
.amx-int-on .amx-int-copy p { opacity: 1; transform: none; }
.amx-int-cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 26px; padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(9, 9, 11, 0.16);
  background: transparent; color: var(--amx-ink);
  font-size: 15px; font-weight: 700; text-decoration: none;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.6s var(--amx-out) 0.58s, transform 0.6s var(--amx-out) 0.58s,
              border-color 0.3s var(--amx-out), background 0.3s var(--amx-out);
}
html.amx-dark .amx-int-cta { border-color: rgba(255,255,255,0.2); color: #fafafa; }
.amx-int-on .amx-int-cta { opacity: 1; transform: none; }
.amx-int-cta svg { width: 15px; height: 15px; transition: transform 0.3s var(--amx-out); }
@media (hover: hover) and (pointer: fine) {
  .amx-int-on .amx-int-cta:hover {
    transform: translateY(-2px); border-color: #7776F6; background: rgba(119,118,246,0.08);
  }
  .amx-int-cta:hover svg { transform: translateX(4px); }
}
@media (max-width: 900px) {
  #amx-integ { padding: 72px 0; }
  .amx-int-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .amx-int-card { width: 66px; height: 66px; }
  .amx-int-card img { width: 27px; height: 27px; }
  /* one fewer blurred layer to composite on phones */
  .amx-int-orb3 { display: none; }
  .amx-int-orb { filter: blur(56px); }
}

/* monochrome brand marks need flipping for the dark canvas */
html.amx-dark .amx-int-mono img { filter: invert(1); }

@media (prefers-reduced-motion: reduce) {
  .amx-int-orb, .amx-int-mesh, .amx-int-card,
  .amx-int-pulse, .amx-int-ping, .amx-int-eyebrow i { animation: none !important; }
  .amx-int-pulse { display: none; }
  .amx-int-slot, .amx-int-eyebrow, .amx-int-copy p, .amx-int-cta,
  .amx-int-w i, .amx-int-wire {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ============ Standalone navbar (ported pages) ============ */
#amx-snav {
  position: sticky; top: 0; z-index: 600;
  display: flex; align-items: stretch; gap: 12px;
  padding: 16px clamp(16px, 3vw, 46px);
  font-family: "Inter Tight", Inter, sans-serif;
  background: transparent;
}
#amx-snav a { text-decoration: none; }
.amx-snav-main, .amx-snav-side {
  display: flex; align-items: center;
  height: 54px;
  background: rgba(9, 9, 14, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background 0.45s var(--amx-out), box-shadow 0.45s var(--amx-out);
}
/* backdrop-filter on this bar makes it a stacking context, so a z-index on
   the links inside could never lift them over the dropdown. It has to sit
   here, on the panel's actual sibling, or the open menu swallows every
   click and hover along the bottom of the link row. */
.amx-snav-main { flex: 1; justify-content: space-between; padding: 0 10px 0 20px; min-width: 0;
  position: relative; z-index: 7; }
.amx-snav-side { gap: 8px; padding: 0 8px 0 10px; flex: none; }
html.amx-snav-scrolled .amx-snav-main,
html.amx-snav-scrolled .amx-snav-side {
  background: rgba(7, 7, 11, 0.97);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 44px rgba(0, 0, 0, 0.45);
}
.amx-snav-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.amx-snav-brand img { width: 26px; height: 26px; object-fit: contain; }
.amx-snav-brand span {
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 17px; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(90deg, #ffffff 35%, #B7B6FF);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* the open panel and its bridge overlap the bar; the links have to stay
   hittable or you cannot click a nav item while a menu is showing */
.amx-snav-links { display: flex; align-items: center; gap: 2px; }
.amx-snav-side { position: relative; z-index: 7; }
.amx-snav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 14px; border-radius: 9px;
  font-size: 14.5px; font-weight: 600; color: #ffffff;
  transition: background 0.22s var(--amx-out);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .amx-snav-link:hover { background: rgba(255, 255, 255, 0.10); }
}
.amx-snav-chev { transition: transform 0.2s var(--amx-out); will-change: transform; }
.amx-snav-link.amx-dd-open .amx-snav-chev { transform: rotate(180deg); }
.amx-snav-cta {
  display: inline-flex; align-items: center;
  padding: 10px 18px; border-radius: 10px;
  background: #ffffff; color: #0a0a0e;
  font-size: 14.5px; font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s var(--amx-out);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .amx-snav-cta:hover { transform: translateY(-1px); } }
#amx-snav-theme {
  width: 38px; height: 38px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07); color: #ffffff;
  transition: background 0.25s var(--amx-out), transform 0.25s var(--amx-out);
}
#amx-snav-theme svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
  #amx-snav-theme:hover { background: rgba(255, 255, 255, 0.16); transform: rotate(-12deg); }
}
/* dropdown panel, same treatment as the main nav */
/* same shell-and-card model as the Framer nav above */
.amx-snav-dd {
  position: absolute; top: 64px;
  padding-top: var(--amx-gap, 10px);
  transform: translateX(-50%) translateY(-6px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.24s var(--amx-out), transform 0.24s var(--amx-out),
              left 0.26s var(--amx-out);
  z-index: 5;
}
.amx-snav-dd .amx-dd-card {
  padding: 18px 22px; border-radius: 16px;
  background: #131318;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
}
.amx-snav-dd.on { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.amx-snav-dd .amx-dd-cols h6 { color: rgba(255, 255, 255, 0.40); }
.amx-snav-dd .amx-dd-cols a { color: rgba(255, 255, 255, 0.72); }
.amx-snav-dd .amx-dd-cols a:hover { color: #ffffff; }
@media (max-width: 860px) {
  .amx-snav-links { display: none; }
  .amx-snav-main { justify-content: flex-start; }
}

/* ---- results card footer: case-study CTA lives inside the box ---- */
.amx-pf-card { display: flex; flex-direction: column; }
.amx-pf-card > .amx-pf-shot { flex: none; }
.amx-pf-meta { flex: 1 1 auto; }
.amx-pf-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 20px 18px;
  margin-top: -4px;
}
.amx-pf-hero .amx-pf-foot { padding: 0 26px 22px; }
.amx-pf-card a { text-decoration: none; }
.amx-pf-foot .amx-pf-study {
  margin: 0; padding: 10px 16px;
  text-decoration: none;
  border-radius: 999px;
  background: rgba(119, 118, 246, 0.10);
  border: 1px solid rgba(119, 118, 246, 0.24);
  transition: background 0.28s var(--amx-out), border-color 0.28s var(--amx-out), transform 0.28s var(--amx-out);
}
html.amx-dark .amx-pf-foot .amx-pf-study {
  background: rgba(119, 118, 246, 0.16);
  border-color: rgba(119, 118, 246, 0.34);
}
.amx-pf-study-off { visibility: hidden; }
.amx-pf-visit {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: rgba(9, 9, 11, 0.52);
  transition: color 0.28s var(--amx-out);
  white-space: nowrap;
}
html.amx-dark .amx-pf-visit { color: rgba(255, 255, 255, 0.52); }
.amx-pf-visit svg { width: 13px; height: 13px; transition: transform 0.28s var(--amx-out); }
@media (hover: hover) and (pointer: fine) {
  .amx-pf-foot .amx-pf-study:hover {
    background: rgba(119, 118, 246, 0.20);
    border-color: rgba(119, 118, 246, 0.46);
    transform: translateY(-1px);
  }
  .amx-pf-visit:hover { color: #7776F6; }
  .amx-pf-visit:hover svg { transform: translate(2px, -2px); }
}
@media (max-width: 620px) {
  .amx-pf-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 0 16px 16px; }
  .amx-pf-foot .amx-pf-study { justify-content: center; }
  .amx-pf-visit { justify-content: center; }
}

/* ============ Case study: more client results ============ */
#amx-more-cases {
  position: relative;
  padding: 92px 0 100px;
  background: var(--amx-page, #ffffff);
  font-family: "Inter Tight", Inter, sans-serif;
}
html.amx-dark #amx-more-cases { background: #0a0a0f; }
.amx-mc-inner { width: min(1160px, 92vw); margin: 0 auto; }
#amx-more-cases h2 {
  margin: 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.06;
  color: #09090b; text-align: center;
}
html.amx-dark #amx-more-cases h2 { color: #fafafa; }
.amx-mc-sub {
  margin: 14px auto 40px;
  max-width: 54ch; text-align: center;
  font-size: 16px; line-height: 1.65;
  color: rgba(9, 9, 11, 0.58);
}
html.amx-dark .amx-mc-sub { color: rgba(255, 255, 255, 0.58); }
.amx-mc-grid {
  display: grid; gap: 18px;
  grid-template-columns: 1.35fr 1fr;
  grid-auto-rows: 210px;
}
.amx-mc-card {
  position: relative;
  display: flex; align-items: flex-end;
  overflow: hidden; border-radius: 20px;
  background-size: cover; background-position: center top;
  text-decoration: none; color: #fff;
  isolation: isolate;
  box-shadow: 0 16px 40px rgba(9, 9, 11, 0.16);
  transition: transform 0.4s var(--amx-out), box-shadow 0.4s var(--amx-out);
}
.amx-mc-lead { grid-row: span 2; }
.amx-mc-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(9, 9, 14, 0.9) 0%, rgba(9, 9, 14, 0.45) 42%, rgba(9, 9, 14, 0.08) 100%);
  transition: background 0.45s var(--amx-out);
}
.amx-mc-body {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; gap: 14px;
  width: 100%; padding: 22px;
}
.amx-mc-txt { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
.amx-mc-name {
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
}
.amx-mc-lead .amx-mc-name { font-size: 26px; }
.amx-mc-cat {
  align-self: flex-start;
  padding: 4px 11px; border-radius: 7px;
  font-size: 12px; font-weight: 600;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.amx-mc-arrow { width: 30px; height: 30px; flex: none; transition: transform 0.35s var(--amx-out); }
@media (hover: hover) and (pointer: fine) {
  .amx-mc-card:hover { transform: scale(0.985) rotate(0.3deg); box-shadow: 0 22px 54px rgba(9, 9, 11, 0.26); }
  .amx-mc-card:hover .amx-mc-scrim {
    background: linear-gradient(to top, rgba(9, 9, 14, 0.94) 0%, rgba(9, 9, 14, 0.6) 60%, rgba(119, 118, 246, 0.24) 100%);
  }
  .amx-mc-card:hover .amx-mc-arrow { transform: translateX(7px); }
}
.amx-mc-all {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 34px auto 0; padding: 13px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7776F6, #5654E0); color: #fff;
  font-size: 15px; font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 26px rgba(119, 118, 246, 0.32);
  transition: transform 0.3s var(--amx-out), box-shadow 0.3s var(--amx-out);
}
.amx-mc-inner { text-align: center; }
.amx-mc-grid { text-align: left; }
.amx-mc-all svg { width: 15px; height: 15px; transition: transform 0.3s var(--amx-out); }
@media (hover: hover) and (pointer: fine) {
  .amx-mc-all:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(119, 118, 246, 0.44); }
  .amx-mc-all:hover svg { transform: translateX(4px); }
}
@media (max-width: 860px) {
  #amx-more-cases { padding: 64px 0 72px; }
  .amx-mc-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 190px; }
  .amx-mc-lead { grid-row: span 1; }
  .amx-mc-lead .amx-mc-name { font-size: 21px; }
}

/* ============ Navbar wordmark: uppercase lockup, all pages ============ */
/* Framer nav */
nav p.amx-wordmark,
.amx-nav-dark nav p.amx-wordmark,
.amx-nav-dark nav p.framer-styles-preset-1j1l7o8.amx-wordmark {
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.075em !important;
}
html:not(.amx-dark) nav p.amx-wordmark {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}
/* standalone nav */
.amx-snav-brand span {
  background: none;
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}
.amx-snav-brand { gap: 12px; }
.amx-snav-brand img { width: 24px; height: 24px; }

/* ============ CTA form: the audit request ============ */
/* The fields used to be translucent dark boxes sitting on a dark photograph,
   labelled only by a 50% white placeholder. On a bright phone screen the
   labels were effectively invisible. Solid white inputs with real labels
   above them, the same pattern the contact page uses, which is also the only
   version that survives the background image changing. */
.amx-cta-form { flex-direction: column; align-items: stretch; }
.amx-cta-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
html.amx-dark .amx-cta-form .amx-field label,
.amx-cta-form .amx-field label {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
html.amx-dark .amx-cta-form .amx-field input,
.amx-cta-form .amx-field input {
  height: 50px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: #ffffff;
  color: var(--amx-ink);
}
html.amx-dark .amx-cta-form .amx-field input::placeholder,
.amx-cta-form .amx-field input::placeholder { color: rgba(9, 9, 11, 0.40); }
html.amx-dark .amx-cta-form .amx-field input:focus,
.amx-cta-form .amx-field input:focus {
  outline: none;
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(119, 118, 246, 0.45);
}
/* :user-invalid only fires after the visitor has actually interacted, so an
   untouched required field is never shown as an error */
.amx-cta-form .amx-field input:user-invalid { border-color: rgba(220, 60, 60, 0.9); }
.amx-cta-form button { align-self: flex-start; margin-top: 2px; }
.amx-cta-form .amx-cta-note { flex: none; margin-top: 2px; }
@media (max-width: 560px) {
  .amx-cta-fields { grid-template-columns: minmax(0, 1fr); }
  .amx-cta-form button { align-self: stretch; justify-content: center; }
}

/* ============ Frontline: live-site video embed + Search Console ============ */
/* the frame shipped as a scroll box around a tall screenshot; the video fills it */
#amx-live .scroller.amx-embed-video {
  height: auto;
  overflow: hidden;
  line-height: 0;
}
#amx-live .scroller.amx-embed-video video {
  display: block;
  width: 100%;
  height: auto;
}
#amx-live .amx-gsc {
  margin-top: 28px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.amx-gsc-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 20px;
}
.amx-gsc-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red, #7776F6);
}
.amx-gsc-range { font-size: 13px; color: var(--muted); }
.amx-gsc-tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.amx-gsc-tile {
  padding: 16px 18px;
  border: 1px solid var(--line-soft, var(--line));
  border-radius: 11px;
  background: var(--bg);
}
.amx-gsc-num {
  display: block;
  font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.02em;
  color: var(--head);
}
.amx-gsc-lab { display: block; margin-top: 9px; font-size: 13px; color: var(--muted); }
.amx-gsc-chart {
  margin: 18px 0 0;
  border: 1px solid var(--line-soft, var(--line));
  border-radius: 11px;
  overflow: hidden;
  background: #ffffff;
}
.amx-gsc-chart img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
  .amx-gsc { padding: 20px; }
  .amx-gsc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amx-gsc-num { font-size: 25px; }
}

/* ---- generated case studies use full-page screenshots; crop them to a
   hero-shaped window so the header does not run off the screen ---- */
#amx-live.amx-case-gen .shot { overflow: hidden; border-radius: 12px; }
#amx-live.amx-case-gen .shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center top;
}

/* ============ Contact: two-column form section ============ */
.amx-contact {
  position: relative;
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 92px 0 96px;
  overflow: hidden;
  isolation: isolate;
  font-family: "Inter Tight", Inter, sans-serif;
}
.amx-contact-bg { position: absolute; inset: 0; z-index: -1; }
.amx-contact-bg img { width: 100%; height: 100%; object-fit: cover; }
.amx-contact-bg span {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(9,9,14,0.94) 0%, rgba(9,9,14,0.82) 46%, rgba(9,9,14,0.62) 100%);
}
.amx-contact-inner {
  position: relative;
  width: min(1180px, 92vw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px;
  /* centred against a form this tall left the heading floating near the
     bottom of the photo with the card already three hundred pixels above
     it; top aligned, the two columns start together and read as one */
  align-items: start;
}
.amx-contact-lead { padding-top: 22px; }
.amx-contact-eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #B7B6FF;
}
.amx-contact-lead h2 {
  margin: 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(30px, 3.9vw, 52px);
  font-weight: 800; line-height: 1.05; letter-spacing: -0.036em;
  color: #ffffff; text-wrap: balance;
}
.amx-contact-lead p {
  margin: 18px 0 0; max-width: 42ch;
  font-size: 16px; line-height: 1.68; color: rgba(255,255,255,0.66);
}
.amx-contact-card {
  padding: 30px;
  border-radius: 20px;
  background: rgba(16, 16, 22, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.amx-contact-card h2, .amx-contact-card h3 {
  margin: 0 0 18px;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #fff;
}
.amx-contact-lbl { display: block; font-size: 13px; color: rgba(255,255,255,0.52); margin-bottom: 5px; }
.amx-contact-direct > a {
  font-size: 17px; font-weight: 700; color: #B7B6FF; text-decoration: none;
}
.amx-contact-direct > a:hover { text-decoration: underline; }
.amx-contact-alt { display: flex; align-items: center; gap: 12px; margin-top: 13px; }
.amx-contact-alt > span { font-size: 13px; color: rgba(255,255,255,0.42); }
.amx-contact-alt > a { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.86); text-decoration: none; }
.amx-contact-alt > a:hover { color: #fff; }
.amx-contact-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.8);
  transition: background 0.25s var(--amx-out), color 0.25s var(--amx-out);
}
.amx-contact-social svg { width: 16px; height: 16px; }
.amx-contact-social:hover { background: rgba(255,255,255,0.12); color: #fff; }
.amx-contact-card hr { margin: 22px 0; border: 0; border-top: 1px solid rgba(255,255,255,0.12); }
/* form */
.amx-contact-card .amx-contact-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.amx-contact-card .amx-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.amx-contact-card .amx-field-wide { grid-column: 1 / -1; }
.amx-contact-card label, .amx-contact-card legend {
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.62);
}
.amx-contact-card input[type="text"],
.amx-contact-card input[type="email"],
.amx-contact-card input[type="tel"],
.amx-contact-card textarea {
  width: 100%; padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  font-family: "Inter Tight", Inter, sans-serif; font-size: 15px; color: #fff;
  transition: border-color 0.22s var(--amx-out), box-shadow 0.22s var(--amx-out);
}
.amx-contact-card textarea { resize: vertical; }
.amx-contact-card input::placeholder, .amx-contact-card textarea::placeholder { color: rgba(255,255,255,0.38); }
.amx-contact-card input:focus, .amx-contact-card textarea:focus {
  outline: none; border-color: rgba(183,182,255,0.7);
  box-shadow: 0 0 0 3px rgba(119,118,246,0.26);
}
.amx-wants { border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
.amx-wants legend { padding: 0; margin-bottom: 10px; }
.amx-want-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.amx-want { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: rgba(255,255,255,0.82); }
.amx-want input { position: absolute; opacity: 0; width: 0; height: 0; }
.amx-want-box {
  width: 17px; height: 17px; flex: none;
  border-radius: 5px; border: 1px solid rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.04);
  transition: background 0.2s var(--amx-out), border-color 0.2s var(--amx-out);
  position: relative;
}
.amx-want input:checked + .amx-want-box { background: #7776F6; border-color: #7776F6; }
.amx-want input:checked + .amx-want-box::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.amx-want input:focus-visible + .amx-want-box { box-shadow: 0 0 0 3px rgba(119,118,246,0.4); }
.amx-contact-card .amx-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
.amx-contact-card .amx-contact-submit {
  padding: 13px 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #7776F6, #5654E0); color: #fff;
  font-family: "Inter Tight", Inter, sans-serif; font-size: 15px; font-weight: 700;
  box-shadow: 0 10px 26px rgba(119,118,246,0.34);
  transition: transform 0.25s var(--amx-out), box-shadow 0.25s var(--amx-out);
}
.amx-contact-card .amx-contact-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(119,118,246,0.46); }
.amx-contact-card .amx-form-note { font-size: 12.5px; color: rgba(255,255,255,0.5); }
.amx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 980px) {
  .amx-contact-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}
@media (max-width: 620px) {
  .amx-contact { padding: 64px 0 68px; }
  .amx-contact-card { padding: 22px; }
  .amx-contact-card .amx-contact-form { grid-template-columns: minmax(0, 1fr); }
  .amx-want-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ Footer: flickering grid wordmark ============ */
#amx-footer { position: relative; padding-bottom: 0; background: transparent; }
#amx-footer .amx-ft-card {
  position: relative;
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  /* the brand block is a logo and one line; the columns hold five groups,
     so they get the room. At the old 1:1.15 the links only ever fit two
     across and the footer ran three rows deep. */
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 2fr);
  gap: 44px;
  padding: 64px 0 40px;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
#amx-footer .amx-ft-brand { max-width: 30ch; }
#amx-footer .amx-ft-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
#amx-footer .amx-ft-logo img { width: 30px; height: 30px; object-fit: contain; }
#amx-footer .amx-ft-logo span {
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 19px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.075em;
  color: var(--amx-ink);
}
html.amx-dark #amx-footer .amx-ft-logo span { color: #fafafa; }
#amx-footer .amx-ft-brand p {
  margin: 18px 0 0;
  font-size: 15px; line-height: 1.65;
  color: rgba(9, 9, 11, 0.56);
}
html.amx-dark #amx-footer .amx-ft-brand p { color: rgba(255, 255, 255, 0.56); }
/* Five columns wrapping into a 3-wide grid, with twelve locations stacked in
   one of them, made the footer taller than most of the pages above it. Let the
   columns fit the width they have, and flow the long lists into two. */
#amx-footer .amx-ft-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 26px 30px;
  align-items: start;
}
#amx-footer .amx-ft-wide { grid-column: span 1; }
#amx-footer .amx-ft-wide > h4 { column-span: all; }
@media (min-width: 900px) {
  #amx-footer .amx-ft-wide {
    columns: 2;
    column-gap: 26px;
  }
  #amx-footer .amx-ft-wide a { break-inside: avoid; }
  /* twelve links is the one that really needs the room */
  #amx-footer .amx-ft-wide:has(> h4 + a + a + a + a + a + a + a + a) { grid-column: span 2; }
}
#amx-footer .amx-ft-col h4 {
  margin: 0 0 14px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--amx-ink);
}
html.amx-dark #amx-footer .amx-ft-col h4 { color: #fafafa; }
#amx-footer .amx-ft-col a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 0;
  font-size: 14.5px; line-height: 1.45; text-decoration: none;
  color: rgba(9, 9, 11, 0.56);
  transition: color 0.22s var(--amx-out);
}
html.amx-dark #amx-footer .amx-ft-col a { color: rgba(255, 255, 255, 0.56); }
/* chevron slides in on hover, as in the reference */
.amx-ft-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: none;
  border-radius: 4px;
  border: 1px solid rgba(9, 9, 11, 0.18);
  opacity: 0; transform: translateX(0);
  transition: opacity 0.3s var(--amx-out), transform 0.3s var(--amx-out);
}
html.amx-dark .amx-ft-chev { border-color: rgba(255, 255, 255, 0.22); }
.amx-ft-chev svg { width: 11px; height: 11px; }
@media (hover: hover) and (pointer: fine) {
  #amx-footer .amx-ft-col a:hover { color: var(--amx-ink); }
  html.amx-dark #amx-footer .amx-ft-col a:hover { color: #ffffff; }
  #amx-footer .amx-ft-col a:hover .amx-ft-chev { opacity: 1; transform: translateX(4px); }
}
#amx-footer .amx-ft-col a:focus-visible .amx-ft-chev { opacity: 1; transform: translateX(4px); }
/* bottom bar */
#amx-footer .amx-ft-bar {
  position: relative;
  width: min(1200px, 92vw); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 22px 0;
  border-top: 1px solid rgba(9, 9, 11, 0.10);
}
html.amx-dark #amx-footer .amx-ft-bar { border-top-color: rgba(255, 255, 255, 0.10); }
/* the flicker band */
.amx-ft-grid {
  position: relative;
  width: 100%;
  height: 190px;
  margin-top: 26px;
  overflow: hidden;
  z-index: 0;
}
.amx-ft-grid canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.amx-ft-fade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, var(--amx-page, #ffffff) 0%, rgba(255,255,255,0) 42%);
}
html.amx-dark .amx-ft-fade {
  background: linear-gradient(to bottom, #0a0a0f 0%, rgba(10,10,15,0) 42%);
}
@media (max-width: 900px) {
  #amx-footer .amx-ft-card { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 48px 0 32px; }
  #amx-footer .amx-ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amx-ft-grid { height: 132px; margin-top: 16px; }
}

/* ============ Thank-you page ============ */
.amx-thanks {
  min-height: 78vh;
  display: flex; align-items: center; justify-content: center;
  padding: 120px 24px 90px;
  font-family: "Inter Tight", Inter, sans-serif;
  text-align: center;
}
.amx-thanks-inner { width: min(660px, 100%); }
.amx-thanks-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; margin-bottom: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7776F6, #5654E0);
  color: #fff;
  box-shadow: 0 14px 34px rgba(119, 118, 246, 0.38);
}
.amx-thanks-tick svg { width: 27px; height: 27px; }
.amx-thanks h1 {
  margin: 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 800; line-height: 1.05; letter-spacing: -0.036em;
  color: var(--amx-ink); text-wrap: balance;
}
html.amx-dark .amx-thanks h1 { color: #fafafa; }
.amx-thanks p {
  margin: 20px auto 0; max-width: 46ch;
  font-size: 17px; line-height: 1.68;
  color: rgba(9, 9, 11, 0.6);
}
html.amx-dark .amx-thanks p { color: rgba(255, 255, 255, 0.62); }
.amx-thanks p a { color: #5654E0; font-weight: 700; text-decoration: none; }
html.amx-dark .amx-thanks p a { color: #B7B6FF; }
.amx-thanks p a:hover { text-decoration: underline; }
.amx-thanks-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.amx-thanks-b1, .amx-thanks-b2 {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px;
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: transform 0.3s var(--amx-out), box-shadow 0.3s var(--amx-out);
}
.amx-thanks-b1 {
  background: linear-gradient(135deg, #7776F6, #5654E0); color: #fff;
  box-shadow: 0 10px 28px rgba(119, 118, 246, 0.34);
}
.amx-thanks-b1 svg { width: 15px; height: 15px; transition: transform 0.3s var(--amx-out); }
.amx-thanks-b2 {
  background: rgba(9, 9, 11, 0.04);
  border: 1px solid rgba(9, 9, 11, 0.14);
  color: var(--amx-ink);
}
html.amx-dark .amx-thanks-b2 { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: #fafafa; }
@media (hover: hover) and (pointer: fine) {
  .amx-thanks-b1:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(119, 118, 246, 0.48); }
  .amx-thanks-b1:hover svg { transform: translateX(4px); }
  .amx-thanks-b2:hover { transform: translateY(-2px); }
}

/* ============ Service subpages: integration tiles ============ */
#amx-tiles { padding: 96px 0; font-family: "Inter Tight", Inter, sans-serif; }
.amx-tiles-inner {
  width: min(1080px, 92vw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.amx-tiles-eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #B7B6FF;
}
.amx-tiles-copy h2 {
  margin: 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800; line-height: 1.06; letter-spacing: -0.035em;
  color: #fff; text-wrap: balance;
}
.amx-tiles-copy p {
  margin: 18px 0 0; max-width: 44ch;
  font-size: 16px; line-height: 1.68; color: rgba(255, 255, 255, 0.6);
}
.amx-tiles-stage { display: flex; justify-content: center; }
/* the mask fades the grid out at the edges, as in the reference */
.amx-tiles-grid {
  position: relative; width: 360px; height: 360px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 38%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 38%, transparent 72%);
}
.amx-tile {
  position: absolute;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  transition: transform 0.35s var(--amx-out), border-color 0.35s var(--amx-out), background 0.35s var(--amx-out);
}
.amx-tile-empty { background: rgba(255, 255, 255, 0.015); border-color: rgba(255, 255, 255, 0.06); }
.amx-tile img { width: 28px; height: 28px; object-fit: contain; }
@media (hover: hover) and (pointer: fine) {
  .amx-tile:not(.amx-tile-empty):hover {
    transform: translateY(-3px);
    border-color: rgba(119, 118, 246, 0.5);
    background: rgba(119, 118, 246, 0.12);
  }
}

/* ============ Service subpages: case studies ============ */
#amx-svc-cases { padding: 40px 0 96px; font-family: "Inter Tight", Inter, sans-serif; }
.amx-sc-inner { width: min(1180px, 92vw); margin: 0 auto; }
.amx-sc-head { margin-bottom: 26px; }
.amx-sc-head h2 {
  margin: 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800; letter-spacing: -0.035em; color: #fff;
}
.amx-sc-frame { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; overflow: hidden; }
.amx-sc-card {
  display: grid; gap: 18px;
  padding: 40px 34px;
  text-decoration: none;
  transition: background 0.5s var(--amx-out);
}
.amx-sc-lead { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
.amx-sc-card:hover { background: rgba(255, 255, 255, 0.035); }
.amx-sc-brand { display: inline-flex; align-items: center; gap: 11px; }
/* client marks range from a 5.7:1 wordmark to a 0.48:1 portrait mark, so
   constrain both axes and let each scale inside the same box */
.amx-sc-brand img {
  width: auto; height: auto;
  max-width: 116px; max-height: 36px;
  object-fit: contain;
}
.amx-sc-brand b {
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 19px; font-weight: 700; color: #fff;
}
.amx-sc-tags {
  display: block; margin-bottom: 12px;
  font-size: 12px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.44);
}
.amx-sc-title {
  display: block;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(20px, 2.3vw, 27px);
  font-weight: 700; line-height: 1.28; letter-spacing: -0.02em; color: #fff;
  text-wrap: balance;
}
.amx-sc-sub { font-weight: 500; color: rgba(255, 255, 255, 0.46); transition: color 0.5s var(--amx-out); }
.amx-sc-card:hover .amx-sc-sub { color: rgba(255, 255, 255, 0.68); }
.amx-sc-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: 15px; font-weight: 600; color: #fff;
}
.amx-sc-more svg { width: 16px; height: 16px; transition: transform 0.5s var(--amx-out); }
.amx-sc-card:hover .amx-sc-more svg { transform: translateX(5px); }
.amx-sc-shot { display: block; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.12); }
.amx-sc-shot > span { display: block; overflow: hidden; }
.amx-sc-shot img {
  display: block; width: 100%; aspect-ratio: 14 / 9; object-fit: cover; object-position: center top;
  transition: transform 0.6s var(--amx-out);
}
.amx-sc-card:hover .amx-sc-shot img { transform: scale(1.05); }
.amx-sc-row { display: flex; }
.amx-sc-pair { flex: 1; display: grid; grid-template-columns: 1fr 1fr; }
.amx-sc-pair .amx-sc-card + .amx-sc-card { border-left: 1px solid rgba(255, 255, 255, 0.12); }
/* the dotted rails either side, as in the reference */
.amx-sc-dots {
  width: 88px; flex: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: 0.15;
}
@media (max-width: 900px) {
  .amx-tiles-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .amx-sc-lead { grid-template-columns: minmax(0, 1fr); }
  .amx-sc-pair { grid-template-columns: minmax(0, 1fr); }
  .amx-sc-pair .amx-sc-card + .amx-sc-card { border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); }
  .amx-sc-dots { display: none; }
}

/* ============ Service detail: capability grid ============ */
/* Eight bullets in a column is unscannable. Bento-style cards give each
   capability its own hit target, icon and hover state. */
#amx-live .amx-cap-grid,
.amx-cap-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 30px !important;
  padding: 0 !important;
  list-style: none !important;
}
.amx-cap-grid .amx-cap {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.028);
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  transition: border-color 0.22s var(--amx-out), background 0.22s var(--amx-out), transform 0.22s var(--amx-out);
}
.amx-cap::before { content: none !important; }
.amx-cap-ic {
  flex: none;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(119, 118, 246, 0.14);
  border: 1px solid rgba(119, 118, 246, 0.26);
  color: #B7B6FF;
  transition: background 0.22s var(--amx-out), color 0.22s var(--amx-out);
}
.amx-cap-ic svg { width: 17px; height: 17px; }
.amx-cap-t { padding-top: 6px; }
@media (hover: hover) and (pointer: fine) {
  .amx-cap:hover {
    transform: translateY(-2px);
    border-color: rgba(119, 118, 246, 0.42);
    background: rgba(119, 118, 246, 0.07);
  }
  .amx-cap:hover .amx-cap-ic { background: rgba(119, 118, 246, 0.24); color: #fff; }
}
/* light theme keeps the 4.5:1 floor */
html:not(.amx-dark):not(.amx-nav-dark) .amx-cap {
  border-color: rgba(9, 9, 11, 0.12);
  background: rgba(9, 9, 11, 0.025);
  color: #3f3f46;
}
html:not(.amx-dark):not(.amx-nav-dark) .amx-cap-ic { color: #5654E0; }
/* staggered arrival, motion-safe */
@media (prefers-reduced-motion: no-preference) {
  .reveal-el.visible .amx-cap,
  .amx-cap-grid.visible .amx-cap {
    animation: amx-cap-in 0.44s var(--amx-out) both;
    animation-delay: calc(var(--i) * 55ms);
  }
}
@keyframes amx-cap-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .amx-cap-grid { grid-template-columns: minmax(0, 1fr); }
  /* one column means the label is body copy now, so hold the 16px floor */
  .amx-cap-grid .amx-cap { font-size: 16px; padding: 14px 15px !important; }
}

/* ---- the numbered section marker ----
   Originally a 5.5rem ghost numeral pulled up behind the eyebrow with a
   negative margin, so the eyebrow ran straight through the digits.
   Keeping it in flow above the eyebrow avoids that collision at every
   breakpoint, and the outline keeps it decorative rather than shouty. */
.svc-detail-text { position: relative; }
.svc-detail-num {
  margin: 0 0 6px !important;
  font-size: 3rem !important;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent !important;
  -webkit-text-stroke: 1.4px rgba(119, 118, 246, 0.5);
  user-select: none;
}
html:not(.amx-dark):not(.amx-nav-dark) .svc-detail-num {
  -webkit-text-stroke-color: rgba(86, 84, 224, 0.55);
}
@media (max-width: 768px) {
  .svc-detail-num { font-size: 2.4rem !important; }
}

/* The page's own `.svc-detail-list li` rule out-specifies the card colour,
   leaving the labels dimmer than the body copy they summarise. */
.amx-cap .amx-cap-t { color: rgba(255, 255, 255, 0.9); }
html:not(.amx-dark):not(.amx-nav-dark) .amx-cap .amx-cap-t { color: #3f3f46; }
/* ---- the section art, matched to the rest of the site ---- */
.svc-detail-visual { position: relative; }
.svc-detail-visual img {
  border-radius: 18px;
  box-shadow: 0 34px 74px rgba(0, 0, 0, 0.5);
}

/* ============ Standalone nav: mobile drawer ============ */
#amx-snav-burger {
  display: none;
  /* 44px is the minimum comfortable touch target */
  width: 44px; height: 44px;
  position: relative; z-index: 2;
  flex: none;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, 0.10);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s var(--amx-out);
}
#amx-snav-burger span {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: #fff;
  transition: transform 0.24s var(--amx-out), opacity 0.18s var(--amx-out);
}
#amx-snav-burger:focus-visible { outline: 2px solid #7776F6; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  #amx-snav-burger:hover { background: rgba(255, 255, 255, 0.17); }
}
.amx-drw-on #amx-snav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.amx-drw-on #amx-snav-burger span:nth-child(2) { opacity: 0; }
.amx-drw-on #amx-snav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

#amx-snav-drawer {
  position: fixed; inset: 0;
  /* under the nav (z 600) so the burger stays visible as the close control */
  z-index: 590;
  background: rgba(6, 6, 10, 0.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.24s var(--amx-out);
}
#amx-snav-drawer.on { opacity: 1; }
#amx-snav-drawer > nav {
  position: absolute; top: 78px; right: 12px; left: 12px;
  max-height: calc(100vh - 92px);
  overflow-y: auto;
  padding: 16px 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #101016;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  transform: translateY(-10px);
  transition: transform 0.26s var(--amx-out);
}
#amx-snav-drawer.on > nav { transform: none; }
/* Its own font: pages that set theirs on a content wrapper (the case studies) left the links in Times. */
#amx-snav-drawer > nav { font-family: Inter, "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; }
#amx-snav-drawer ul { list-style: none; margin: 0; padding: 0; }
#amx-snav-drawer li { margin: 0; }
#amx-snav-drawer li::before { content: none !important; }
#amx-snav-drawer a {
  display: block;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.74);
  text-decoration: none;
  transition: background 0.18s var(--amx-out), color 0.18s var(--amx-out);
}
#amx-snav-drawer a:focus-visible { outline: 2px solid #7776F6; outline-offset: -2px; }
#amx-snav-drawer a.amx-drw-top {
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 17px; font-weight: 700; color: #fff;
  margin-top: 4px;
}
#amx-snav-drawer ul ul { margin: 0 0 6px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.09); }
#amx-snav-drawer ul ul a { font-size: 15px; padding: 8px 12px; }
@media (hover: hover) and (pointer: fine) {
  #amx-snav-drawer a:hover { background: rgba(119, 118, 246, 0.16); color: #fff; }
}
.amx-drw-cta {
  margin-top: 12px;
  text-align: center;
  background: #7776F6;
  color: #fff !important;
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) { .amx-drw-cta:hover { background: #6b6ae8 !important; } }
.amx-drw-on, .amx-drw-on body { overflow: hidden; }

@media (max-width: 880px) {
  #amx-snav-burger { display: flex; }
  /* the wordmark was being clipped by the CTA pill at phone widths */
  .amx-snav-side .amx-snav-cta { display: none; }
  .amx-snav-brand span { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  #amx-snav-drawer, #amx-snav-drawer > nav, #amx-snav-burger span { transition: none; }
}

/* ============ About: what we do + where we work ============ */
.amx-ab-do {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(30px, 5vw, 68px);
  align-items: center;
  margin: clamp(56px, 8vw, 104px) 0;
}
.amx-ab-do-text h2 { margin: 0 0 14px; }
.amx-ab-do-text > p {
  margin: 0 0 26px;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.65;
  color: #52525b;
}
.amx-ab-do-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.amx-ab-do-list li { margin: 0; }
.amx-ab-do-list li::before { content: none !important; }
.amx-ab-do-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "t i" "d i";
  align-items: center;
  gap: 2px 14px;
  padding: 14px 16px;
  border: 1px solid rgba(9, 9, 11, 0.12);
  border-radius: 13px;
  background: rgba(9, 9, 11, 0.022);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.22s var(--amx-out), background 0.22s var(--amx-out),
              transform 0.22s var(--amx-out);
}
.amx-ab-do-list strong {
  grid-area: t;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 16px; font-weight: 700;
  color: #09090b;
}
.amx-ab-do-list span {
  grid-area: d;
  font-size: 14px; line-height: 1.5;
  color: #52525b;
}
.amx-ab-do-list svg {
  grid-area: i;
  width: 18px; height: 18px;
  color: #7776F6;
  opacity: 0.55;
  transition: transform 0.22s var(--amx-out), opacity 0.22s var(--amx-out);
}
.amx-ab-do-list a:focus-visible { outline: 2px solid #7776F6; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .amx-ab-do-list a:hover {
    transform: translateX(3px);
    border-color: rgba(119, 118, 246, 0.45);
    background: rgba(119, 118, 246, 0.07);
  }
  .amx-ab-do-list a:hover svg { transform: translateX(3px); opacity: 1; }
}
.amx-ab-do-art { margin: 0; position: relative; }
.amx-ab-do-art img {
  width: 100%; height: auto;
  display: block;
  border-radius: 20px;
  object-fit: cover;
  aspect-ratio: 830 / 844;
}
/* soft brand wash so the stock photo sits in the palette */
.amx-ab-do-art::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(119, 118, 246, 0.20), transparent 58%);
  pointer-events: none;
}
.amx-ab-where {
  margin-top: clamp(48px, 7vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.amx-ab-where-text { max-width: 60ch; }
.amx-ab-where h2 { margin: 0 0 14px; }
.amx-ab-where p {
  margin: 0 0 14px;
  font-size: 16.5px; line-height: 1.7;
  color: #52525b;
}
/* real portraits replaced the initial-letter discs, so give them room */
.amx-ab-person .amx-ab-avatar img { object-position: center 22%; }

@media (max-width: 900px) {
  .amx-ab-do { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .amx-ab-do-art { order: -1; max-width: 460px; }
}
@media (max-width: 640px) {
  .amx-ab-do-list a { padding: 13px 14px; }
  .amx-ab-do-list span { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .amx-ab-do-list a, .amx-ab-do-list svg { transition: none; }
}

/* dark mode for the About additions (light is the page default) */
.amx-dark .amx-ab-do-text > p,
.amx-dark .amx-ab-where p,
.amx-dark .amx-ab-do-list span { color: rgba(255, 255, 255, 0.70); }
.amx-dark .amx-ab-do-list strong { color: #fff; }
.amx-dark .amx-ab-do-list a {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
}

/* ---- About: Albury map beside "Where we work" ---- */
.amx-ab-map {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 11, 0.12);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16);
  aspect-ratio: 4 / 3;
  background: #e8e8ec;
}
.amx-ab-map iframe {
  display: block;
  width: 100%; height: 100%;
  border: 0;
  /* the embed ships a bright basemap; settle it into the palette */
  filter: saturate(0.82) contrast(1.02);
}
.amx-dark .amx-ab-map {
  border-color: rgba(255, 255, 255, 0.12);
  background: #16161c;
}
.amx-dark .amx-ab-map iframe { filter: invert(0.9) hue-rotate(180deg) saturate(0.7) contrast(0.95); }
@media (max-width: 900px) {
  .amx-ab-where { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .amx-ab-map { aspect-ratio: 16 / 10; }
}

/* ============ Mobile audit fixes ============ */

/* The injected CTA sits inside a Framer flex host that is `flex: 1 0 0px`, so
   below 1440px it collapses to ~1px. The card then cannot centre and lands
   half off-screen, taking the Business name and Phone fields with it. */
div[class*="framer-"]:has(> section.amx-cta) {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}
section.amx-cta { max-width: 100%; }

/* `flex: 1 0 100%` was written when the form was a row. It later became a
   column, so the 100% flex-basis started driving the BLOCK axis and squashed
   the primary button to 19px tall on phones. */
.amx-cta-form .btn-primary,
.amx-cta-form button[type="submit"] {
  flex: 0 0 auto !important;
  width: 100%;
  min-height: 52px;
}

/* Touch targets: footer columns, social icons and the legal links were all
   under 44px, on every page that carries the footer. */
@media (pointer: coarse) {
  #amx-footer .amx-ft-col a,
  #amx-footer .amx-ft-bar a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
#amx-footer .amx-ft-social {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
#amx-snav-drawer a { min-height: 44px; display: flex; align-items: center; }
#amx-snav-drawer ul ul a { padding-top: 10px; padding-bottom: 10px; }

/* Anchor jumps landed 8px under the sticky nav because the posts declared
   scroll-margin-top: 80px against an 88px bar. Setting scroll-padding on the
   scroll container fixes every in-page link at once. */
html { scroll-padding-top: 104px; }
@media (max-width: 880px) { html { scroll-padding-top: 88px; } }

/* ============ Blog index: featured post + topic filters ============ */
.amx-blog-lead {
  display: block;
  margin: 0 0 18px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(9, 9, 11, 0.12);
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(119, 118, 246, 0.13), transparent 62%),
    rgba(9, 9, 11, 0.022);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.24s var(--amx-out), transform 0.24s var(--amx-out),
              box-shadow 0.24s var(--amx-out);
}
.amx-blog-lead h2 {
  margin: 12px 0 10px;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(24px, 3.1vw, 36px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: #09090b;
}
.amx-blog-lead p {
  margin: 0 0 16px;
  max-width: 68ch;
  font-size: 16.5px; line-height: 1.6;
  color: #52525b;
}
.amx-blog-new {
  font-style: normal;
  padding: 3px 9px;
  border-radius: 999px;
  background: #7776F6;
  color: #fff;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) {
  .amx-blog-lead:hover {
    transform: translateY(-2px);
    border-color: rgba(119, 118, 246, 0.45);
    box-shadow: 0 22px 50px rgba(9, 9, 11, 0.10);
  }
}
.amx-blog-lead:focus-visible { outline: 2px solid #7776F6; outline-offset: 3px; }

.amx-blog-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 20px;
}
.amx-blog-f {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid rgba(9, 9, 11, 0.14);
  border-radius: 999px;
  background: transparent;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 14.5px; font-weight: 600;
  color: #3f3f46;
  cursor: pointer;
  transition: background 0.18s var(--amx-out), color 0.18s var(--amx-out),
              border-color 0.18s var(--amx-out);
}
.amx-blog-f span {
  font-size: 12px; font-weight: 700;
  opacity: 0.6;
}
.amx-blog-f:focus-visible { outline: 2px solid #7776F6; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .amx-blog-f:hover { border-color: rgba(119, 118, 246, 0.5); color: #09090b; }
}
.amx-blog-f.on {
  background: #09090b; border-color: #09090b; color: #fff;
}
.amx-blog-f.on span { opacity: 0.7; }

.amx-blog-card.amx-blog-off { display: none !important; }
.amx-blog-empty {
  grid-column: 1 / -1;
  margin: 8px 0;
  color: #52525b;
  font-size: 15px;
}

/* dark theme */
.amx-dark .amx-blog-lead {
  border-color: rgba(255, 255, 255, 0.10);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(119, 118, 246, 0.18), transparent 62%),
    rgba(255, 255, 255, 0.03);
}
.amx-dark .amx-blog-lead h2 { color: #fff; }
.amx-dark .amx-blog-lead p,
.amx-dark .amx-blog-empty { color: rgba(255, 255, 255, 0.70); }
.amx-dark .amx-blog-f { border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.78); }
.amx-dark .amx-blog-f.on { background: #fff; border-color: #fff; color: #09090b; }

@media (max-width: 640px) {
  .amx-blog-filters { gap: 7px; }
  .amx-blog-f { font-size: 14px; padding: 8px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .amx-blog-lead { transition: none; }
}

/* The SEO card's chips were sized for one-word labels ("Design"), so the real
   "Local SEO & Google Business Profile" blew its pill into a full-width box. */
.amx-svc-card [data-border="true"][style*="border-radius:999"],
.amx-svc-card [style*="border-radius: 999px"] {
  width: auto !important;
  max-width: 100% !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
.amx-svc-card [data-border="true"][style*="border-radius:999"] p,
.amx-svc-card [style*="border-radius: 999px"] p {
  white-space: normal !important;
  text-align: center;
}

/* ============ Mobile nav + footer polish ============ */
@media (max-width: 880px) {
  /* the bar was full-bleed and flush to the top; float it like the desktop one */
  #amx-snav { padding: 10px 12px; }
  .amx-snav-main {
    padding: 0 8px 0 14px;
    border-radius: 14px;
  }
  .amx-snav-side { padding: 0 6px; gap: 6px; }
  .amx-snav-brand img { width: 22px; height: 22px; }
  .amx-snav-brand span { font-size: 14.5px; letter-spacing: 0.10em; }
  #amx-snav-theme { width: 40px; height: 40px; }
  #amx-snav-theme svg { width: 16px; height: 16px; }
}
@media (max-width: 380px) {
  /* at 360px the wordmark and two 44px controls no longer fit together */
  .amx-snav-brand span { font-size: 13px; }
  #amx-snav-theme { display: none; }
}

/* drawer: full-height sheet rather than a floating card, so long menus scroll */
@media (max-width: 880px) {
  #amx-snav-drawer > nav {
    top: 70px; right: 10px; left: 10px;
    max-height: calc(100dvh - 84px);
    padding: 14px 12px calc(16px + env(safe-area-inset-bottom));
    border-radius: 20px;
  }
  #amx-snav-drawer a.amx-drw-top { font-size: 16.5px; }
  #amx-snav-drawer ul ul { padding-left: 8px; }
  .amx-drw-cta { margin-top: 14px; padding: 14px 12px; }
}

/* ---- footer ---- */
@media (max-width: 880px) {
  /* three columns at 375px gave 100px-wide cells and wrapped every label */
  #amx-footer .amx-ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 16px; }
  #amx-footer .amx-ft-card { padding: 26px 20px; }
  #amx-footer .amx-ft-brand { margin-bottom: 22px; }
  #amx-footer .amx-ft-col h4 { margin-bottom: 6px; }
  #amx-footer .amx-ft-col a { font-size: 15px; }
  /* the bar crammed copyright, two legal links and the social icon onto one row */
  #amx-footer .amx-ft-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
  }
  #amx-footer .amx-ft-social { align-self: flex-start; }
}
@media (max-width: 480px) {
  #amx-footer .amx-ft-cols { grid-template-columns: minmax(0, 1fr) !important; gap: 4px; }
  /* one column: collapse each group so the footer is not a wall of links */
  #amx-footer .amx-ft-col {
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    padding-top: 12px;
  }
  html:not(.amx-dark) #amx-footer .amx-ft-col { border-top-color: rgba(9, 9, 11, 0.10); }
}

/* ============================================================
   Service bento cards: SEO card polish + GEO / AI Visibility card
   Framer classes: .framer-wltpn3 (SEO), .framer-qatx5y (was empty)
   ============================================================ */
.amx-svc { position: relative; overflow: hidden; }
.amx-svc::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(90deg, var(--amx-accent) 0%, var(--amx-accent-soft) 55%, transparent 100%);
}
.amx-svc::after {
  content: "";
  position: absolute;
  top: -150px;
  right: -150px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(119, 118, 246, 0.10) 0%, rgba(119, 118, 246, 0) 70%);
}
.amx-svc > .amx-eyebrow,
.amx-svc > .amx-svc-cta,
.amx-svc > .framer-1i200r0,
.amx-svc > .framer-1objmt2 { position: relative; z-index: 4; }

.amx-svc > .amx-eyebrow { margin-bottom: 0; }

/* lift the existing Framer pills in the SEO card the same way */
.amx-svc .framer-1objmt2 .framer-1rcn55x {
  transition: transform 0.18s var(--amx-out), border-color 0.18s ease, box-shadow 0.18s ease;
}
.amx-svc .framer-1objmt2 .framer-1rcn55x:hover {
  transform: translateY(-2px);
  border-color: var(--amx-accent-soft) !important;
  box-shadow: 0 8px 18px -10px rgba(9, 9, 11, 0.4);
}

.amx-svc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; }
.amx-svc-cta > .framer-1di3hel-container { flex: none; }

.amx-gsrc {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 11px;
  border-radius: 50px;
  border: 1px solid rgba(9, 9, 11, 0.12);
  background: #fff;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.06);
  transition: transform 0.18s var(--amx-out), border-color 0.18s ease, box-shadow 0.18s ease;
}
.amx-gsrc:hover {
  transform: translateY(-2px);
  border-color: var(--amx-accent-soft);
  box-shadow: 0 12px 24px -14px rgba(9, 9, 11, 0.5);
}
.amx-gsrc svg { width: 18px; height: 18px; flex: none; }
.amx-gsrc b {
  display: block;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.25;
  color: var(--amx-ink);
}
.amx-gsrc small {
  display: block;
  margin-top: 1px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  color: rgba(9, 9, 11, 0.55);
}
html.amx-dark .amx-gsrc {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}
html.amx-dark .amx-gsrc small { color: rgba(255, 255, 255, 0.58); }

/* the GEO card was an empty 1px-tall shell in the Framer export */
.framer-XHEbD .framer-qatx5y.amx-svc {
  height: auto;
  min-height: 250px;
  place-content: flex-start;
}

@media (max-width: 809px) {
  .amx-gsrc { width: 100%; }
  .framer-XHEbD .framer-qatx5y.amx-svc { padding: 30px; }
}

/* ---------- Service cards: staggered reveal + live accent bar ---------- */
/* .amx-anim is added by amx-fx.js, so the cards stay visible without JS */
.amx-svc.amx-anim > .amx-eyebrow,
.amx-svc.amx-anim > .framer-1i200r0,
.amx-svc.amx-anim .framer-1objmt2 > div,
.amx-svc.amx-anim > .amx-svc-cta > * {
  opacity: 0;
  transform: translateY(14px);
}
.amx-svc.amx-anim.amx-in > .amx-eyebrow,
.amx-svc.amx-anim.amx-in > .framer-1i200r0,
.amx-svc.amx-anim.amx-in .framer-1objmt2 > div,
.amx-svc.amx-anim.amx-in > .amx-svc-cta > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--amx-out), transform 0.55s var(--amx-out);
}
.amx-svc.amx-anim.amx-in > .amx-eyebrow { transition-delay: 0.02s; }
.amx-svc.amx-anim.amx-in > .framer-1i200r0 { transition-delay: 0.1s; }
.amx-svc.amx-anim.amx-in .framer-1objmt2 > div:nth-child(1) { transition-delay: 0.20s; }
.amx-svc.amx-anim.amx-in .framer-1objmt2 > div:nth-child(2) { transition-delay: 0.27s; }
.amx-svc.amx-anim.amx-in .framer-1objmt2 > div:nth-child(3) { transition-delay: 0.34s; }
.amx-svc.amx-anim.amx-in .framer-1objmt2 > div:nth-child(4) { transition-delay: 0.41s; }
.amx-svc.amx-anim.amx-in .framer-1objmt2 > div:nth-child(5) { transition-delay: 0.48s; }
.amx-svc.amx-anim.amx-in > .amx-svc-cta > *:nth-child(1) { transition-delay: 0.58s; }
.amx-svc.amx-anim.amx-in > .amx-svc-cta > *:nth-child(2) { transition-delay: 0.66s; }

/* accent bar sweeps once the card arrives */
.amx-svc.amx-in::before { animation: amx-svc-sweep 2.6s var(--amx-out) 0.3s both; }
@keyframes amx-svc-sweep {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

/* the tick inside each chip draws itself in */
.amx-svc .framer-1objmt2 .framer-1rcn55x svg path { transition: stroke-dashoffset 0.5s ease; }

/* chip hover: nudge the label, not just the box */
.amx-svc .framer-1objmt2 .framer-1rcn55x p { transition: color 0.18s ease; }
.amx-svc .framer-1objmt2 .framer-1rcn55x:hover p { color: var(--amx-accent) !important; }

/* card lifts very slightly on hover so it reads as one clickable unit */
.amx-svc { transition: transform 0.35s var(--amx-out), box-shadow 0.35s var(--amx-out); }
.amx-svc:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(9, 9, 11, 0.55); }

/* keep the SEO card copy clear of the injected SERP panel */
.framer-wltpn3.amx-svc .framer-ersy14 { max-width: 300px; margin-right: auto; }
@media (max-width: 1100px) {
  .framer-wltpn3.amx-svc .framer-ersy14 { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .amx-svc.amx-anim > *,
  .amx-svc.amx-anim .framer-1objmt2 > div { opacity: 1 !important; transform: none !important; }
  .amx-svc.amx-in::before { animation: none; }
  .amx-svc:hover { transform: none; }
}

/* the SERP panel sits beside the SEO heading, so keep it above the paragraph */
.framer-wltpn3.amx-svc .amx-seo-rank {
  top: 18px;
  right: 26px;
  width: 168px;
  padding: 10px;
  transform: scale(0.92);
  transform-origin: top right;
}

/* ============ Case studies on mobile ============ */
/* The footer card sets an explicit width AND takes padding. As content-box the
   padding lands outside that width, so the card measured 385px in a 375px
   viewport and `margin: 0 auto` resolved to a negative right margin trying to
   compensate. */
#amx-footer .amx-ft-card { box-sizing: border-box; }

@media (max-width: 640px) {
  /* Secondary text in the case studies bottomed out at 12.5px, which is below
     comfortable reading size on a phone. Lift the floor without touching the
     type scale of the body copy. */
  #amx-live .url,
  #amx-live .scrollhint,
  #amx-live .amx-gsc-range,
  #amx-live .note,
  #amx-live .ip-soon,
  #amx-live .lab { font-size: 14px; line-height: 1.55; }
  #amx-live .k { font-size: 12.5px; }          /* an uppercase label, not prose */

  /* The embedded site frame is the one thing that genuinely cannot reflow, so
     let it scroll inside its own box rather than stretch the page. */
  #amx-live .frame,
  #amx-live .embed,
  #amx-live .siteframe { max-width: 100%; overflow-x: auto; }
  #amx-live iframe { max-width: 100%; }

  /* long URLs and slugs were the other source of horizontal spill */
  #amx-live .url,
  #amx-live a[href^="http"] { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============ Service page depth sections ============ */
/* These carry the detail the thin pages were missing. They must NOT reuse
   .faq-item: the page's accordion collapses those to zero height, so the
   content would be invisible to anyone scrolling. */
.amx-step-lead {
  max-width: 62ch;
  margin: 0 auto 34px;
  text-align: center;
  font-size: 17px;
  line-height: 1.7;
  color: var(--amx-fg-body, rgba(255, 255, 255, 0.72));
}
.amx-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
}
.amx-step {
  padding: 24px 24px 26px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.028);
  transition: border-color 0.22s var(--amx-out), background 0.22s var(--amx-out);
}
.amx-step h3 {
  margin: 0 0 10px;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
.amx-step p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.70);
}
.amx-step a { color: #B7B6FF; text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .amx-step:hover { border-color: rgba(119, 118, 246, 0.38); background: rgba(119, 118, 246, 0.06); }
}
.amx-step-note {
  max-width: 68ch;
  margin: 28px auto 0;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}
.amx-step-note a { color: #B7B6FF; }

html:not(.amx-dark):not(.amx-nav-dark) .amx-step {
  border-color: rgba(9, 9, 11, 0.12);
  background: rgba(9, 9, 11, 0.022);
}
html:not(.amx-dark):not(.amx-nav-dark) .amx-step h3 { color: #09090b; }
html:not(.amx-dark):not(.amx-nav-dark) .amx-step p,
html:not(.amx-dark):not(.amx-nav-dark) .amx-step-lead,
html:not(.amx-dark):not(.amx-nav-dark) .amx-step-note { color: #52525b; }
html:not(.amx-dark):not(.amx-nav-dark) .amx-step a { color: #5654E0; }

@media (max-width: 640px) {
  .amx-steps { grid-template-columns: minmax(0, 1fr); }
  .amx-step { padding: 20px 18px 22px; }
  .amx-step p { font-size: 16px; }
  .amx-step-lead { text-align: left; font-size: 16.5px; }
  .amx-step-note { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .amx-step { transition: none; } }

/* About hero badge: flag icon sizing (2:1 flag inside Framer's square slot) */
.framer-1hsecaq {
  width: 26px !important;
  height: 13px !important;
  aspect-ratio: 2 / 1 !important;
  image-rendering: auto !important;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(9, 9, 11, 0.08);
}
html.amx-dark .framer-1hsecaq { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }

/* ============================================================
   Phone: hero copy gutters, and marquees you can swipe
   ============================================================ */
/* The hero headline is set at a flat 45px, which on a 360px screen leaves the
   long line sitting 15px off each edge and reading as clipped. Scale it with
   the viewport up to the original size. */
@media (max-width: 809px) {
  .amx-hero-drop h1.framer-text,
  .amx-hero-drop h2.framer-text {
    font-size: clamp(32px, 11.5vw, 45px) !important;
    line-height: 1.06 !important;
  }
}

/* The client row and the review row are the same shape: a masked wrap holding
   a flex track with the set repeated twice, moved by a transform. A transform
   cannot be interrupted by a finger, so on a phone amx-fx.js adds .amx-swipe
   and scrolls the wrap instead. Without JS the transform still runs. */
@media (max-width: 809px) {
  .amx-cases-wrap.amx-swipe,
  .amx-rv-marquee.amx-swipe {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .amx-cases-wrap.amx-swipe::-webkit-scrollbar,
  .amx-rv-marquee.amx-swipe::-webkit-scrollbar { width: 0; height: 0; }
  .amx-cases-wrap.amx-swipe .amx-cases-track,
  .amx-rv-marquee.amx-swipe .amx-rv-track { animation: none; }
}

/* ============================================================
   Mobile fixes: reCAPTCHA badge, contact checkboxes, footer
   ============================================================ */

/* ---- reCAPTCHA v3 badge ----
   Google parks the badge at right:-186px so only a 70px logo tab pokes in from
   the edge. On a phone that tab floats over the form and the footer and reads
   as something half-broken. Google allows hiding it as long as the disclosure
   is shown in the form instead, which .amx-recaptcha-note does (injected by
   amx-fx.js next to every submit button). */
.grecaptcha-badge { visibility: hidden; }

.amx-recaptcha-note {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.42);
}
html:not(.amx-dark) .amx-recaptcha-note { color: rgba(9, 9, 11, 0.45); }
.amx-recaptcha-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.amx-recaptcha-note a:hover { color: var(--amx-accent, #7776F6); }

/* ---- contact form: "I'm looking for..." checkboxes ----
   Two columns at 390px left 151px cells, so "Custom Business Solutions" and
   "Application Development" wrapped to two lines and the grid went ragged.
   One column keeps every service on a single line and gives a real tap target. */
@media (max-width: 480px) {
  .amx-want-grid { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .amx-want { padding: 7px 0; font-size: 14px; }
  .amx-want-box { width: 19px; height: 19px; }
  .amx-want input:checked + .amx-want-box::after { left: 6px; top: 2px; }
}

/* ---- footer: collapse each link group ----
   The single-column rule below already intended this ("collapse each group so
   the footer is not a wall of links") but only ever drew the divider, leaving
   a 1500px footer of 20 stacked links to scroll past on a phone. The heading
   is now a real toggle; amx-fx.js adds the button semantics and the open/close
   state, and the no-JS fallback leaves every group open. */
@media (max-width: 480px) {
  #amx-footer .amx-ft-col h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 13px 0;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
  }
  #amx-footer .amx-ft-col h4::after {
    content: "";
    width: 9px; height: 9px;
    flex: none;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.45;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.22s var(--amx-out, ease);
  }
  #amx-footer .amx-ft-col[data-open="true"] h4::after { transform: translateY(1px) rotate(-135deg); }

  /* Collapsed by default once the toggle is wired. Without JS the attribute is
     never set, so the links stay visible and the footer still works. */
  #amx-footer .amx-ft-col[data-open="false"] a { display: none; }
  #amx-footer .amx-ft-col[data-open] a { padding: 9px 0; font-size: 15px; }
  #amx-footer .amx-ft-col[data-open="true"] { padding-bottom: 8px; }
  #amx-footer .amx-ft-cols { gap: 0; }
}


/* ============================================================
   Homepage hero: room for the longer headline
   ============================================================
   The hero was set for "Your Full Stack / Digital Services
   Provider" -- two short lines at a 1.0 line-height, with the
   service words tucked 14px underneath. The headline it carries
   now runs the full width on both lines, so descenders in
   "booked jobs" landed almost on top of that row and the two
   read as one run-on sentence. Loosen the leading and part the
   two blocks; nothing here changes the layout itself. */
#hero h1.framer-text {
  line-height: 1.08;
  text-wrap: balance;
}
#hero [data-framer-name="Highlighted Text"] {
  margin-top: 18px;
}
@media (max-width: 809px) {
  #hero [data-framer-name="Highlighted Text"] { margin-top: 12px; }
}


/* ============================================================
   "Sound familiar?" problem strip (homepage)
   ============================================================
   Three cards that name the reader's week back to them before
   the services list starts selling. Each drawing is inline SVG
   so it takes the theme colour, and nothing moves until the
   section is actually on screen (.amx-sf-in). */

#amx-sf {
  width: min(1200px, 92vw);
  margin: -58px auto 0;
  padding: 34px 0 24px;
}
.amx-sf-head { text-align: center; margin-bottom: 34px; }
.amx-sf-eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amx-accent-deep);
}
html.amx-dark .amx-sf-eyebrow { color: #A9A8FF; }
.amx-sf-head h2 {
  margin: 0 0 16px;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(34px, 5.4vw, 62px);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.03;
  color: var(--amx-ink);
  text-wrap: balance;
}
.amx-sf-head p {
  max-width: 62ch;
  margin: 0 auto;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: clamp(15px, 1.5vw, 17.5px);
  line-height: 1.62;
  color: rgba(9, 9, 11, 0.62);
  text-wrap: pretty;
}
html.amx-dark .amx-sf-head p { color: rgba(250, 250, 250, 0.60); }

.amx-sf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 900px) { .amx-sf-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

.amx-sf-card {
  padding: 18px 18px 26px;
  border-radius: 20px;
  border: 1px solid rgba(9, 9, 11, 0.10);
  background: rgba(255, 255, 255, 0.55);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--amx-out), transform 0.6s var(--amx-out),
              border-color 0.35s var(--amx-out), box-shadow 0.35s var(--amx-out);
  transition-delay: calc(var(--i) * 110ms);
}
html.amx-dark .amx-sf-card {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
}
.amx-sf-in .amx-sf-card { opacity: 1; transform: none; }
.amx-sf-card:hover {
  border-color: rgba(119, 118, 246, 0.42);
  box-shadow: 0 18px 44px rgba(9, 9, 11, 0.10);
}
html.amx-dark .amx-sf-card:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); }

.amx-sf-card h3 {
  margin: 22px 0 10px;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.22;
  color: var(--amx-ink);
  text-wrap: balance;
}
.amx-sf-card > p {
  margin: 0;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(9, 9, 11, 0.60);
  text-wrap: pretty;
}
html.amx-dark .amx-sf-card > p { color: rgba(250, 250, 250, 0.58); }

/* ---- the drawing panel ---- */
.amx-sf-art {
  border-radius: 14px;
  border: 1px dashed rgba(9, 9, 11, 0.16);
  background: rgba(9, 9, 11, 0.025);
  padding: 10px;
}
html.amx-dark .amx-sf-art {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.02);
}
.amx-sf-art svg { display: block; width: 100%; height: auto; }
.amx-sf-art text {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  fill: rgba(9, 9, 11, 0.45);
}
html.amx-dark .amx-sf-art text { fill: rgba(250, 250, 250, 0.45); }

/* ---- card 1: where you actually rank ---- */
.amx-sf-art-rank rect { fill: rgba(9, 9, 11, 0.06); }
html.amx-dark .amx-sf-art-rank rect { fill: rgba(255, 255, 255, 0.06); }
.amx-sf-art-rank .amx-sf-bar { fill: rgba(9, 9, 11, 0.20); }
html.amx-dark .amx-sf-art-rank .amx-sf-bar { fill: rgba(255, 255, 255, 0.22); }
.amx-sf-row { opacity: 0; transform: translateX(-10px); }
.amx-sf-in .amx-sf-row {
  animation: amx-sf-slide 0.5s var(--amx-out) forwards;
  animation-delay: calc(var(--i, 0) * 0ms + var(--n) * 130ms + 200ms);
}
.amx-sf-dots { opacity: 0; letter-spacing: 2px; }
.amx-sf-in .amx-sf-dots { animation: amx-sf-fade 0.4s ease forwards 0.65s; }
.amx-sf-you { opacity: 0; }
.amx-sf-in .amx-sf-you { animation: amx-sf-fade 0.5s var(--amx-out) forwards 0.9s; }
.amx-sf-you rect:first-child { fill: rgba(119, 118, 246, 0.16) !important; stroke: rgba(119, 118, 246, 0.55); stroke-width: 1.5; }
.amx-sf-you .amx-sf-bar { fill: var(--amx-accent) !important; }
.amx-sf-you text { fill: var(--amx-accent-deep); }
html.amx-dark .amx-sf-you text { fill: #A9A8FF; }
.amx-sf-in .amx-sf-you rect:first-child { animation: amx-sf-pulse 2.6s ease-in-out infinite 1.5s; }

/* ---- card 2: the enquiry that cools off ---- */
.amx-sf-msg rect { fill: rgba(9, 9, 11, 0.07); }
html.amx-dark .amx-sf-msg rect { fill: rgba(255, 255, 255, 0.07); }
.amx-sf-msg .amx-sf-bar { fill: rgba(9, 9, 11, 0.22); }
html.amx-dark .amx-sf-msg .amx-sf-bar { fill: rgba(255, 255, 255, 0.24); }
.amx-sf-msg-a { opacity: 0; transform: translateX(-14px); }
.amx-sf-in .amx-sf-msg-a { animation: amx-sf-slide 0.5s var(--amx-out) forwards 0.2s; }
.amx-sf-msg-a rect:first-child { fill: rgba(119, 118, 246, 0.20); }
.amx-sf-msg-a .amx-sf-bar { fill: var(--amx-accent); }
/* it arrives warm, then drains while it waits */
.amx-sf-in .amx-sf-msg-a rect { animation: amx-sf-cool 3.4s ease-in-out forwards 1.4s; }
.amx-sf-msg-b { opacity: 0; transform: translateX(14px); }
.amx-sf-in .amx-sf-msg-b { animation: amx-sf-slide 0.5s var(--amx-out) forwards 2.6s; }
.amx-sf-clock circle { stroke: rgba(9, 9, 11, 0.20); }
html.amx-dark .amx-sf-clock circle { stroke: rgba(255, 255, 255, 0.22); }
.amx-sf-hand { stroke: var(--amx-accent); transform-origin: 100px 84px; }
.amx-sf-in .amx-sf-hand { animation: amx-sf-spin 2.4s linear infinite 0.8s; }

/* ---- card 3: the week that fills up ---- */
.amx-sf-blk { fill: rgba(9, 9, 11, 0.07); }
html.amx-dark .amx-sf-blk { fill: rgba(255, 255, 255, 0.06); }
.amx-sf-blk.on { opacity: 0; transform-origin: center bottom; }
.amx-sf-in .amx-sf-blk.on {
  fill: var(--amx-accent);
  animation: amx-sf-rise 0.42s var(--amx-out) forwards;
  animation-delay: calc(var(--n) * 55ms + 300ms);
}
.amx-sf-hrs { font-size: 13px !important; fill: var(--amx-accent-deep) !important; }
html.amx-dark .amx-sf-hrs { fill: #A9A8FF !important; }
.amx-sf-day { font-size: 10px !important; }

@keyframes amx-sf-slide { to { opacity: 1; transform: none; } }
@keyframes amx-sf-fade  { to { opacity: 1; } }
@keyframes amx-sf-rise  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes amx-sf-spin  { to { transform: rotate(360deg); } }
@keyframes amx-sf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* warm accent to a flat grey: the enquiry going cold, drawn literally */
@keyframes amx-sf-cool {
  to { fill: rgba(130, 130, 145, 0.22); }
}

@media (prefers-reduced-motion: reduce) {
  #amx-sf * { animation: none !important; transition: none !important; }
  .amx-sf-card, .amx-sf-row, .amx-sf-you, .amx-sf-dots,
  .amx-sf-msg, .amx-sf-blk.on { opacity: 1 !important; transform: none !important; }
  .amx-sf-blk.on { fill: var(--amx-accent); }
}


/* ============================================================
   SEO page funnel blocks
   ============================================================
   Reuses the service-page shell (.svc-detail, .section-h2,
   .reveal-el) and only adds what those did not already cover:
   the two-search-engines pair, the audit deliverable list and
   the guarantee panel. */

.seo-hero-note {
  /* the page hero is left aligned, so this must not centre itself */
  max-width: 62ch;
  margin: 18px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  opacity: 0.66;
}

/* ---- the two places people search now ---- */
.seo-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 26px 0;
}
@media (max-width: 720px) { .seo-two { grid-template-columns: 1fr; } }
.seo-two-card {
  padding: 20px 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.35s var(--amx-out), transform 0.35s var(--amx-out);
}
.seo-two-card:hover {
  border-color: rgba(119, 118, 246, 0.42);
  transform: translateY(-2px);
}
.seo-two-num {
  display: block;
  margin-bottom: 10px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #A9A8FF;
}
.seo-two-card h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.seo-two-card p { margin: 0; font-size: 15px; line-height: 1.6; opacity: 0.72; }

/* ---- what the audit hands over ---- */
.seo-offer-lead {
  max-width: 68ch;
  margin: 0 auto 30px;
  text-align: center;
  opacity: 0.75;
}
.seo-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 820px) { .seo-stack { grid-template-columns: 1fr; } }
.seo-stack-item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 17px 19px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.025);
  font-size: 15px;
  line-height: 1.58;
}
.seo-stack-item strong { display: block; margin-bottom: 3px; }
.seo-stack-item > div { opacity: 0.74; }
.seo-stack-item strong { opacity: 1; }
/* a drawn tick rather than an emoji, so it takes the accent colour */
.seo-tick {
  flex: none;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(119, 118, 246, 0.16);
  border: 1px solid rgba(119, 118, 246, 0.45);
  position: relative;
}
.seo-tick::after {
  content: "";
  position: absolute;
  left: 6.5px; top: 4.5px;
  width: 5px; height: 9px;
  border: solid #A9A8FF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---- the guarantee ---- */
.seo-guarantee {
  max-width: 980px;
  margin: 34px auto 0;
  padding: 26px 28px 28px;
  border-radius: 18px;
  border: 1px solid rgba(119, 118, 246, 0.30);
  background: linear-gradient(160deg, rgba(119, 118, 246, 0.10), rgba(119, 118, 246, 0.03));
}
.seo-guarantee h3 {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.022em;
}
.seo-guarantee p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.62; opacity: 0.82; }
.seo-guarantee ul { margin: 0; padding-left: 20px; }
.seo-guarantee li {
  margin-bottom: 9px;
  font-size: 15px;
  line-height: 1.58;
  opacity: 0.76;
}
.seo-guarantee li::marker { color: #A9A8FF; }

/* the page is dark by default; keep these readable if the toggle flips */
html:not(.amx-dark) .seo-two-card,
html:not(.amx-dark) .seo-stack-item {
  border-color: rgba(9, 9, 11, 0.12);
  background: rgba(9, 9, 11, 0.02);
}
html:not(.amx-dark) .seo-two-num,
html:not(.amx-dark) .seo-guarantee li::marker { color: var(--amx-accent-deep); }
html:not(.amx-dark) .seo-tick::after { border-color: var(--amx-accent-deep); }


/* ============================================================
   Read next (blog articles)
   ============================================================
   The blog uses its own light article shell, not the dark site
   chrome, so these take their colours from that page rather
   than the --amx tokens. */
#amx-readnext {
  max-width: 720px;
  margin: 56px auto 0;
  padding: 0 22px 72px;
}
.amx-rn-title {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0d0d12;
}
.amx-rn-sub {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(13, 13, 18, 0.56);
}
.amx-rn-grid { display: grid; gap: 12px; }
.amx-rn-card {
  display: block;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(13, 13, 18, 0.12);
  background: #fff;
  text-decoration: none;
  transition: border-color 0.25s var(--amx-out), transform 0.25s var(--amx-out),
              box-shadow 0.25s var(--amx-out);
}
.amx-rn-card:hover {
  border-color: rgba(119, 118, 246, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(13, 13, 18, 0.08);
}
.amx-rn-topic {
  display: block;
  margin-bottom: 7px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5654E0;
}
.amx-rn-h {
  display: block;
  margin-bottom: 6px;
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #0d0d12;
}
.amx-rn-meta { font-size: 13.5px; color: rgba(13, 13, 18, 0.5); }
.amx-rn-all {
  display: inline-block;
  margin-top: 18px;
  font-size: 15px;
  font-weight: 600;
  color: #5654E0;
  text-decoration: none;
}
.amx-rn-all:hover { text-decoration: underline; }

/* the cheap rung in the article CTA: a self-serve check, no call booked */
.amx-cta-alt {
  display: block;
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.55;
  opacity: 0.75;
}
.amx-cta-alt a { color: inherit; font-weight: 600; }

@media (prefers-color-scheme: dark) {
  /* the article shell stays light on purpose; nothing to invert here */
}


/* ============================================================
   Reviews page
   ============================================================ */
.rv-lead { max-width: 68ch; margin: 0 auto 30px; text-align: center; opacity: 0.75; }
.rv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}
.rv-card {
  margin: 0;
  padding: 24px 24px 22px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.3s var(--amx-out), transform 0.3s var(--amx-out);
}
.rv-card:hover { border-color: rgba(119, 118, 246, 0.42); transform: translateY(-2px); }
.rv-stars { color: #F5B942; font-size: 14px; letter-spacing: 2px; margin-bottom: 13px; }
.rv-card blockquote { margin: 0 0 18px; }
.rv-card blockquote p { margin: 0; font-size: 15.5px; line-height: 1.62; opacity: 0.86; }
.rv-card figcaption { display: flex; align-items: center; gap: 11px; }
.rv-avatar {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(119, 118, 246, 0.18);
  border: 1px solid rgba(119, 118, 246, 0.38);
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  color: #A9A8FF;
}
.rv-who { display: flex; flex-direction: column; line-height: 1.35; }
.rv-who strong { font-size: 15px; font-weight: 650; }
.rv-who span { font-size: 13px; opacity: 0.6; }

.rv-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}
.rv-result {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 22px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.025);
  text-decoration: none;
  transition: border-color 0.3s var(--amx-out), transform 0.3s var(--amx-out);
}
.rv-result:hover { border-color: rgba(119, 118, 246, 0.45); transform: translateY(-2px); }
.rv-result-cat {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #A9A8FF;
}
.rv-result-h { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.rv-result-name { font-size: 13.5px; opacity: 0.6; }
.rv-result-p { margin-top: 4px; font-size: 14.5px; line-height: 1.55; opacity: 0.72; }

html:not(.amx-dark) .rv-card,
html:not(.amx-dark) .rv-result {
  border-color: rgba(9, 9, 11, 0.12);
  background: rgba(9, 9, 11, 0.02);
}
html:not(.amx-dark) .rv-result-cat,
html:not(.amx-dark) .rv-avatar { color: var(--amx-accent-deep); }


/* ============================================================
   Areas we serve index
   ============================================================ */
.loc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}
.loc-card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 22px 22px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.025);
  text-decoration: none;
  transition: border-color 0.3s var(--amx-out), transform 0.3s var(--amx-out);
}
.loc-card:hover { border-color: rgba(119, 118, 246, 0.45); transform: translateY(-2px); }
.loc-state {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; color: #A9A8FF;
}
.loc-name { font-size: 21px; font-weight: 700; letter-spacing: -0.022em; }
.loc-blurb { font-size: 14.5px; line-height: 1.55; opacity: 0.68; }
html:not(.amx-dark) .loc-card {
  border-color: rgba(9, 9, 11, 0.12);
  background: rgba(9, 9, 11, 0.02);
}
html:not(.amx-dark) .loc-state { color: var(--amx-accent-deep); }


/* ============================================================
   Service page structure: stat band, capability cards, tabs
   ============================================================
   Layout rhythm borrowed from the Aeline and Modulabs templates
   (a stat band under the hero, three capability cards, tabbed
   feature panels, a quote block). Rendered in this site's own
   dark palette rather than their light one, so the service pages
   still look like the rest of the site. */

/* ---- stat band, straight under the hero ---- */
.svcx-stats {
  width: min(1180px, 92vw);
  margin: 0 auto;
  padding: 8px 0 4px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  overflow: hidden;
}
.svcx-stat {
  background: #0c0c11;
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.svcx-stat b {
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
}
.svcx-stat b span { color: #A9A8FF; }
.svcx-stat i {
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.45;
  opacity: 0.62;
}
html:not(.amx-dark) .svcx-stat { background: #fff; }
html:not(.amx-dark) .svcx-stat b { color: var(--amx-ink); }
html:not(.amx-dark) .svcx-stat b span { color: var(--amx-accent-deep); }

/* ---- three capability cards ---- */
.svcx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}
.svcx-card {
  padding: 26px 26px 30px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.028);
  transition: border-color 0.32s var(--amx-out), transform 0.32s var(--amx-out);
}
.svcx-card:hover { border-color: rgba(119, 118, 246, 0.45); transform: translateY(-3px); }
.svcx-ico {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 13px;
  margin-bottom: 18px;
  background: rgba(119, 118, 246, 0.15);
  border: 1px solid rgba(119, 118, 246, 0.34);
}
.svcx-ico svg { width: 21px; height: 21px; stroke: #A9A8FF; fill: none; stroke-width: 2; }
.svcx-card h3 {
  margin: 0 0 9px;
  font-size: 20px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.25;
}
.svcx-card p { margin: 0; font-size: 15px; line-height: 1.6; opacity: 0.68; }
html:not(.amx-dark) .svcx-card { border-color: rgba(9,9,11,0.12); background: rgba(9,9,11,0.02); }
html:not(.amx-dark) .svcx-ico svg { stroke: var(--amx-accent-deep); }

/* ---- tabbed capabilities (the Modulabs motif) ---- */
.svcx-tabs { max-width: 1180px; margin: 0 auto; }
.svcx-tablist {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin-bottom: 26px;
}
.svcx-tab {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 14.5px; font-weight: 600;
  padding: 11px 17px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.25s var(--amx-out), background 0.25s var(--amx-out),
              color 0.25s var(--amx-out);
}
.svcx-tab:hover { border-color: rgba(119, 118, 246, 0.4); }
.svcx-tab[aria-selected="true"] {
  background: rgba(119, 118, 246, 0.16);
  border-color: rgba(119, 118, 246, 0.55);
  color: #A9A8FF;
}
.svcx-panel { display: none; }
.svcx-panel.on { display: grid; }
.svcx-panel {
  grid-template-columns: 1.05fr 1fr;
  gap: 34px;
  align-items: center;
  padding: 30px 30px 32px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.028);
}
@media (max-width: 860px) { .svcx-panel { grid-template-columns: 1fr; } }
.svcx-panel h3 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.6vw, 29px); font-weight: 750;
  letter-spacing: -0.028em; line-height: 1.2;
}
.svcx-panel p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.62; opacity: 0.74; }
.svcx-panel ul { margin: 0; padding-left: 19px; }
.svcx-panel li { margin-bottom: 8px; font-size: 15px; line-height: 1.55; opacity: 0.7; }
.svcx-panel li::marker { color: #A9A8FF; }
.svcx-panel img { width: 100%; height: auto; border-radius: 14px; display: block; }
html:not(.amx-dark) .svcx-tab { border-color: rgba(9,9,11,0.12); background: rgba(9,9,11,0.02); }
html:not(.amx-dark) .svcx-panel { border-color: rgba(9,9,11,0.12); background: rgba(9,9,11,0.02); }
html:not(.amx-dark) .svcx-tab[aria-selected="true"],
html:not(.amx-dark) .svcx-panel li::marker { color: var(--amx-accent-deep); }

/* ---- pull quote ---- */
.svcx-quote {
  max-width: 900px; margin: 0 auto;
  padding: 34px 36px 32px;
  border-radius: 20px;
  border: 1px solid rgba(119, 118, 246, 0.3);
  background: linear-gradient(160deg, rgba(119,118,246,0.10), rgba(119,118,246,0.028));
}
.svcx-quote p {
  margin: 0 0 20px;
  font-size: clamp(18px, 2.2vw, 23px); line-height: 1.5;
  letter-spacing: -0.015em; font-weight: 500;
}
.svcx-quote footer { display: flex; align-items: center; gap: 12px; border: 0; padding: 0; }
.svcx-avatar {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(119, 118, 246, 0.2);
  border: 1px solid rgba(119, 118, 246, 0.4);
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 13.5px; font-weight: 700; color: #A9A8FF;
}
.svcx-who { display: flex; flex-direction: column; line-height: 1.35; }
.svcx-who strong { font-size: 15px; font-weight: 650; }
.svcx-who span { font-size: 13px; opacity: 0.62; }


/* ============================================================
   Aeline-style layer for the service pages
   ============================================================
   Taken from the reference itself rather than a description of
   it. The motifs that actually carry that design are: display
   type set LIGHT and very large rather than heavy, mixed weights
   inside one headline, a small dot before an uppercase eyebrow,
   inline dot markers in headings, flat colour-filled bento cards
   at large radii with no borders, hairline-divided card rows
   inside one bordered container, bottom-aligned card text, and
   pill buttons carrying a circular arrow badge.

   Colours stay this site's own. The reference is white with a
   lime accent; going light here would make two service pages
   look like a different website. */

/* ---- eyebrow: dot, uppercase, wide tracking, centred ---- */
.ael-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 0 0 22px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.5;
}
.ael-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amx-accent); flex: none;
}

/* ---- the display headline: large, light, mixed weight ---- */
.ael-display {
  margin: 0 auto 26px;
  max-width: 20ch;
  text-align: center;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(38px, 6.4vw, 82px);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.ael-display b { font-weight: 700; }          /* the word that carries the point */
.ael-display em { font-style: normal; opacity: 0.45; }
/* the small inline dot the reference sets between words */
.ael-dot {
  display: inline-block; width: 0.34em; height: 0.34em; border-radius: 50%;
  background: var(--amx-accent); vertical-align: 0.42em; margin: 0 0.14em;
}
.ael-dot.b { background: #6FC3F7; }
.ael-sub {
  max-width: 60ch; margin: 0 auto; text-align: center;
  font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.62; opacity: 0.6;
}

/* ---- pill button with the circular arrow badge ---- */
.ael-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 7px 7px 7px 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: inherit; text-decoration: none;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  transition: background 0.28s var(--amx-out), border-color 0.28s var(--amx-out);
}
.ael-btn:hover { background: rgba(119, 118, 246, 0.16); border-color: rgba(119, 118, 246, 0.5); }
.ael-btn i {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--amx-accent); font-style: normal;
}
.ael-btn i svg { width: 14px; height: 14px; stroke: #0b0b10; stroke-width: 2.4; fill: none; }
.ael-btn.solid { background: var(--amx-accent); border-color: transparent; color: #0b0b10; }
.ael-btn.solid i { background: rgba(11, 11, 16, 0.16); }
.ael-btn.solid i svg { stroke: #0b0b10; }
.ael-btnrow { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ---- bento: flat colour-filled cards, no borders, big radii ---- */
.ael-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}
.ael-cell {
  border-radius: 24px;
  padding: 30px 30px 32px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 210px;
}
.ael-cell.wide { grid-column: span 5; }
.ael-cell.mid  { grid-column: span 4; }
.ael-cell.slim { grid-column: span 3; }
.ael-cell.half { grid-column: span 6; }
@media (max-width: 900px) {
  .ael-cell.wide, .ael-cell.mid, .ael-cell.slim, .ael-cell.half { grid-column: span 12; }
}
/* the four fills the reference alternates between */
.ael-cell.f-accent { background: var(--amx-accent); color: #0b0b10; }
.ael-cell.f-tint   { background: rgba(119, 118, 246, 0.15); }
.ael-cell.f-mute   { background: rgba(255, 255, 255, 0.055); }
.ael-cell.f-deep   { background: #15151d; }
.ael-num {
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(38px, 5vw, 58px); font-weight: 300;
  letter-spacing: -0.04em; line-height: 1;
}
.ael-cell.f-accent .ael-num { font-weight: 500; }
.ael-k {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0.55;
}
.ael-cell.f-accent .ael-k { opacity: 0.7; }
.ael-cell p { margin: 0; font-size: 14.8px; line-height: 1.55; opacity: 0.66; }
.ael-cell.f-accent p { opacity: 0.78; }
.ael-cell .ael-push { margin-top: auto; }

/* ---- hairline-divided row of cards in one bordered container ---- */
.ael-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 24px;
  overflow: hidden;
  max-width: 1180px; margin: 0 auto;
  background: rgba(255, 255, 255, 0.02);
}
.ael-item {
  padding: 28px 28px 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  display: flex; flex-direction: column;
  min-height: 260px;
}
.ael-item:last-child { border-right: 0; }
@media (max-width: 900px) {
  .ael-item { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
  .ael-item:last-child { border-bottom: 0; }
}
.ael-tile {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center; border-radius: 12px;
  background: var(--amx-accent);
}
.ael-tile svg { width: 19px; height: 19px; stroke: #0b0b10; stroke-width: 2; fill: none; }
/* the reference bottom-aligns the words under a tall empty top */
.ael-item h3 {
  margin: 0 0 8px;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: 21px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.25;
}
.ael-item p { margin: 0; font-size: 14.6px; line-height: 1.58; opacity: 0.6; }
.ael-item .ael-push { margin-top: auto; }

html:not(.amx-dark) .ael-btn { border-color: rgba(9,9,11,0.14); background: rgba(9,9,11,0.03); }
html:not(.amx-dark) .ael-cell.f-mute { background: rgba(9,9,11,0.045); }
html:not(.amx-dark) .ael-cell.f-deep { background: #15151d; color: #fff; }
html:not(.amx-dark) .ael-row { border-color: rgba(9,9,11,0.12); background: rgba(9,9,11,0.015); }
html:not(.amx-dark) .ael-item { border-right-color: rgba(9,9,11,0.10); }

/* Refinements use the public site's existing palette, typography and radii. */
:root { --amx-state: cubic-bezier(.65, 0, .35, 1); }
[data-amx-title-copy].framer-text { letter-spacing: -.03em !important; text-wrap: balance; font-optical-sizing: auto; }
.amx-word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.amx-word-ink { display: inline-block; }
.amx-browser {
  position: relative; isolation: isolate; width: 100%; min-width: 0; overflow: hidden;
  border: 1px solid rgba(9,9,11,.14); border-top-color: rgba(255,255,255,.45);
  border-radius: 16px; background: #fff; color: var(--amx-ink);
  box-shadow: 0 2px 5px rgba(9,9,11,.10), 0 18px 40px rgba(9,9,11,.12), inset 0 1px rgba(255,255,255,.25);
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
}
html.amx-dark .amx-browser { background: #111118; color: #f4f4f5; border-color: rgba(255,255,255,.12); border-top-color: rgba(255,255,255,.24); }
.amx-browser-chrome { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 8px 14px; background: rgba(119,118,246,.08); border-bottom: 1px solid rgba(119,118,246,.16); }
.amx-browser-dots { flex: none; color: var(--amx-accent); font-size: 9px; letter-spacing: 1px; }
.amx-browser-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: inherit; opacity: .85; }
.amx-browser-screen { aspect-ratio: 16 / 10; overflow: hidden; }
.amx-browser-screen picture { display: block; width: 100%; height: 100%; }
.amx-browser-screen img, .svc-detail-visual .amx-browser-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 0; transform: none; }
.amx-browser-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 14px 16px; font-size: 13px; font-weight: 600; }
.amx-browser-caption span { color: inherit; opacity: .72; font-size: 11px; font-weight: 400; }
.amx-browser-content { padding: 24px; min-height: 280px; text-align: left; }
.amx-browser-label { display: block; margin-bottom: 16px; font: 11px "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--amx-accent-deep); }
html.amx-dark .amx-browser-label { color: #b7b6ff; }
.amx-browser-content > strong { display: block; font-size: clamp(18px, 2vw, 24px); line-height: 1.2; letter-spacing: -.025em; }
.amx-browser-content p { margin: 12px 0 20px; font-size: 14px; line-height: 1.55; color: inherit; opacity: .85; }
.amx-browser-content small { display: block; font-size: 11px; line-height: 1.5; color: inherit; opacity: .75; }
.amx-browser-checks { display: grid; gap: 8px; margin: 20px 0; }
.amx-browser-checks span { padding: 9px 12px; background: rgba(119,118,246,.10); border-left: 2px solid var(--amx-accent); font-size: 13px; }
.amx-browser-flow { display: grid; gap: 8px; padding: 0; margin: 20px 0; list-style: none; }
.amx-browser-flow li { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid rgba(119,118,246,.20); border-radius: 9px; font-size: 13px; background: rgba(119,118,246,.05); }
.amx-browser-flow li b { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 6px; background: rgba(119,118,246,.16); }
.amx-browser-flow li i { margin-left: auto; font-style: normal; color: var(--amx-accent-deep); animation: amx-workflow-step 6s var(--amx-state) infinite; animation-delay: calc(var(--step) * 600ms); }
html.amx-dark .amx-browser-flow li i { color: #b7b6ff; }
@keyframes amx-workflow-step { 0%, 12% { opacity: .25; transform: translateY(5px); } 26%, 88% { opacity: 1; transform: translateY(0); } 100% { opacity: .25; transform: translateY(5px); } }
.amx-motion-control { display: block; margin: 0 24px 16px auto; padding: 6px 10px; min-height: 32px; color: inherit; background: transparent; border: 1px solid rgba(119,118,246,.35); border-radius: 6px; font: inherit; font-size: 11px; }
.amx-motion-offscreen, .amx-motion-offscreen *, .amx-motion-offscreen *::before, .amx-motion-offscreen *::after,
.amx-motion-held *, .amx-motion-held *::before, .amx-motion-held *::after,
.amx-browser:hover *, .amx-browser:focus-within * { animation-play-state: paused !important; }
.svc-detail-visual > .amx-browser { z-index: 2; align-self: center; height: 100%; display: flex; flex-direction: column; }
.svc-detail-visual .amx-browser-screen { flex: 1; min-height: 0; aspect-ratio: auto; }
.svc-detail-visual .amx-browser-content { flex: 1; min-height: 0; }
.svc-detail-visual .amx-motion-control { position: absolute; top: 5px; right: 6px; margin: 0; min-height: 28px; background: #fff; }
html.amx-dark .svc-detail-visual .amx-motion-control { background: #111118; }
.svc-detail-visual .amx-browser[data-motion-loop="true"] .amx-browser-url { padding-right: 75px; }
.svc-detail-visual:has(> .amx-browser) { padding: 16px; }
.svc-detail-visual:has(> .amx-browser) > .svc-img-overlay { display: none; }
.amx-sv-art { overflow: visible; }
.amx-sv-art > .amx-browser { align-self: stretch; }
.amx-sv-art:has(> .amx-browser) { aspect-ratio: auto; }
.amx-sv-art .amx-browser-content { padding: 18px; min-height: 290px; }
.amx-sv-art .amx-browser-content > strong { font-size: 19px; }
.amx-sv-art .amx-browser-screen { aspect-ratio: 16 / 10; }
.amx-rise { transition: opacity 650ms var(--amx-out), transform 650ms var(--amx-out); transition-delay: calc(min(var(--i, 0), 3) * 60ms); }
.page-hero .reveal-el, .page-hero [data-reveal], .amx-shero-copy h1, .amx-shero-copy > p, .amx-shero-btns { opacity: 1 !important; transform: none !important; transition: none !important; }
.amx-field label { transition: transform 220ms var(--amx-state), opacity 220ms var(--amx-state); transform-origin: left; }
.amx-field:focus-within label { transform: translateY(-2px); }
.amx-field input, .amx-field textarea { transition: none; }
.btn-primary svg, .amx-shero-b1 svg, .amx-cta-form button svg { transition: transform 240ms var(--amx-out); }
.amx-pf-shot { overflow: hidden; }
.amx-pf-shot::after { content: ''; position: absolute; inset: 0; background: var(--amx-accent); transform: scaleX(0); transform-origin: right; pointer-events: none; }
.amx-pf-card.amx-in .amx-pf-shot::after { animation: amx-shot-wipe 700ms var(--amx-out) both; }
@keyframes amx-shot-wipe { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: amx-page-out 180ms var(--amx-state) both; }
::view-transition-new(root) { animation: amx-page-in 220ms var(--amx-state) both; }
@keyframes amx-page-out { to { opacity: 0; } }
@keyframes amx-page-in { from { opacity: 0; } }
@media (max-width: 600px) {
  .amx-browser-content { padding: 18px; }
  .amx-browser-chrome { padding: 8px 10px; gap: 8px; }
  .amx-browser-url { font-size: 11px; }
  .svc-detail-visual:has(> .amx-browser) { padding: 8px; }
  .svc-detail-visual .amx-browser-content { padding: 10px 12px; }
  .svc-detail-visual .amx-browser-label { margin-bottom: 8px; font-size: 10px; }
  .svc-detail-visual .amx-browser-content > strong { font-size: 17px; }
  .svc-detail-visual .amx-browser-content > small { font-size: 10px; line-height: 1.3; }
  .svc-detail-visual .amx-browser-flow { margin: 10px 0; gap: 6px; }
  .svc-detail-visual .amx-browser-flow li { padding: 5px 8px; gap: 8px; }
  .svc-detail-visual .amx-browser-flow li b { width: 20px; height: 20px; font-size: 11px; }
  .svc-detail-visual .amx-browser-flow li small { display: none; }
  .svc-detail-visual .amx-browser-checks { margin: 8px 0; gap: 4px; }
  .svc-detail-visual .amx-browser-checks span { padding: 5px 8px; font-size: 12px; }
  .svc-detail-visual .amx-browser-content p { margin: 6px 0; font-size: 12px; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .reveal-el, [data-reveal], .reveal, .rv, .amx-rise { opacity: 1 !important; transform: none !important; }
  .amx-browser-flow li i { opacity: 1; transform: none; }
  .amx-motion-control { display: none; }
  .amx-pf-shot::after { transform: scaleX(0); }
}