/* ============================================================
   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;"] {
  animation: amx-failsafe 0s 3s forwards;
}

/* ---------- 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: 40px calc(50% - 50vw) 0;
  padding: 0;
  box-sizing: border-box;
  background: #08080d;
  overflow: hidden;
}
#amx-cases { padding-top: 66px; }
#amx-cases { padding-bottom: 0; }
#amx-cases::after {
  content: "";
  display: block;
  height: 78px;
  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 30px;
}
.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 34s linear infinite;
  will-change: transform;
}
@keyframes amx-cases-scroll { to { transform: translateX(calc(-50% - 9px)); } }
.amx-cases-wrap:hover .amx-cases-track { animation-play-state: paused; }
.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%; }

/* ---------- 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 ---------- */
#amx-dd {
  position: fixed;
  z-index: 2147483000;
  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;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.16s var(--amx-out), transform 0.16s var(--amx-out), background 0.3s var(--amx-out);
}
#amx-dd.on { opacity: 1; transform: none; pointer-events: auto; }
#amx-dd::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.amx-dd-nub {
  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; }
.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 {
  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 */
.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);
}
.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;
}
.amx-rv-track.amx-paused,
.amx-rv-marquee:hover .amx-rv-track { 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 input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(12, 12, 20, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #ffffff;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15px;
  transition: border-color 0.25s var(--amx-out), box-shadow 0.25s var(--amx-out);
}
.amx-cta-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.5); }
.amx-cta-form input[type="email"]:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(119, 118, 246, 0.30);
}
.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 input[type="email"], .amx-cta-form button { flex: 1 0 100%; }
}

/* ============ 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; }

/* ---------- 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: sticky scroll showcase ============ */
#amx-svcscroll {
  position: relative;
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);
  font-family: "Inter Tight", Inter, sans-serif;
}
.amx-ss-stick {
  position: sticky; top: 0;
  height: 100vh;
  box-sizing: border-box;
  padding-top: 66px; /* clear the fixed header so the dots stay visible */
  display: flex; align-items: center;
  overflow: hidden;
  background: #fff;
}
html.amx-dark .amx-ss-stick { background: #0a0a0f; }
.amx-ss-grid {
  width: min(1200px, 92vw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
}
.amx-ss-dots { display: flex; gap: 8px; margin-bottom: 34px; }
.amx-ss-dot {
  height: 4px; width: 26px; border: 0; padding: 0;
  border-radius: 999px; cursor: pointer;
  background: rgba(9, 9, 11, 0.16);
  transition: width 0.5s var(--amx-out), background 0.5s var(--amx-out);
}
.amx-ss-dot.on { width: 52px; background: #7776F6; }
html.amx-dark .amx-ss-dot { background: rgba(255, 255, 255, 0.18); }
html.amx-dark .amx-ss-dot.on { background: #7776F6; }
.amx-ss-dot:focus-visible { outline: 2px solid #7776F6; outline-offset: 4px; }
/* panes stack; only the active one is visible */
.amx-ss-panes { position: relative; min-height: 462px; }
.amx-ss-pane {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.6s var(--amx-out), transform 0.6s var(--amx-out);
  pointer-events: none;
}
.amx-ss-pane.on { opacity: 1; transform: none; pointer-events: auto; }
.amx-ss-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #7776F6; margin-bottom: 14px;
}
.amx-ss-pane h3 {
  margin: 0;
  font-family: Satoshi, "Inter Tight", Inter, sans-serif;
  font-size: clamp(26px, 3.1vw, 40px);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.034em;
  color: var(--amx-ink); text-wrap: balance;
}
html.amx-dark .amx-ss-pane h3 { color: #fafafa; }
.amx-ss-pane p {
  margin: 16px 0 22px;
  font-size: 16px; line-height: 1.68; max-width: 46ch;
  color: rgba(9, 9, 11, 0.6);
}
html.amx-dark .amx-ss-pane p { color: rgba(255, 255, 255, 0.6); }
.amx-ss-pane ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.amx-ss-pane li {
  position: relative; padding-left: 26px;
  font-size: 15px; line-height: 1.5;
  color: rgba(9, 9, 11, 0.78);
}
html.amx-dark .amx-ss-pane li { color: rgba(255, 255, 255, 0.74); }
.amx-ss-pane li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #7776F6; box-shadow: 0 0 0 4px rgba(119, 118, 246, 0.14);
}
.amx-ss-cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 32px; 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-ss-cta svg { width: 15px; height: 15px; transition: transform 0.3s var(--amx-out); }
@media (hover: hover) and (pointer: fine) {
  .amx-ss-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(119, 118, 246, 0.44); }
  .amx-ss-cta:hover svg { transform: translateX(4px); }
}
/* right: a single frame the art reel slides through */
.amx-ss-right { display: flex; justify-content: center; }
.amx-ss-frame {
  position: relative; width: min(430px, 100%); height: 66vh; max-height: 560px;
  border-radius: 26px; overflow: hidden;
  box-shadow: 0 34px 80px rgba(9, 9, 11, 0.22);
}
html.amx-dark .amx-ss-frame { box-shadow: 0 34px 80px rgba(0, 0, 0, 0.6); }
.amx-ss-frame::after {
  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.12);
  background: radial-gradient(120% 90% at 12% 6%, rgba(119, 118, 246, 0.20), transparent 62%);
}
.amx-ss-reel {
  height: 100%;
  transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.amx-ss-shot { height: 100%; }
.amx-ss-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
  .amx-ss-reel, .amx-ss-pane { transition: none; }
}
@media (max-width: 900px) {
  #amx-svcscroll { height: auto !important; }
  .amx-ss-stick { position: static; height: auto; padding: 64px 0; }
  .amx-ss-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .amx-ss-panes { min-height: 0; }
  .amx-ss-pane { position: static; opacity: 1; transform: none; display: none; }
  .amx-ss-pane.on { display: block; }
  .amx-ss-frame { height: 44vh; }
}

/* ---- 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;
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 104px 0;
  font-family: "Inter Tight", Inter, sans-serif;
}
.amx-int-inner {
  width: min(1080px, 92vw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
/* Masking the cluster fades the outer cards to nothing regardless of what the
   page is painted — a colour-matched overlay stamped a visible rectangle. */
.amx-int-cluster {
  position: relative; width: fit-content; margin: 0 auto;
  -webkit-mask-image: radial-gradient(ellipse 64% 84% at 50% 50%, #000 44%, transparent 86%);
  mask-image: radial-gradient(ellipse 64% 84% at 50% 50%, #000 44%, transparent 86%);
}
.amx-int-vignette { display: none; }
.amx-int-row { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.amx-int-row:last-child { margin-bottom: 0; }
.amx-int-card {
  position: relative;
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: #fff;
  transition: transform 0.35s var(--amx-out);
}
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);
}
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;
}
/* the Automatrix tile is the one that reads as the hub */
.amx-int-me { background: linear-gradient(150deg, #7776F6, #4F4DD6); }
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; }
@media (hover: hover) and (pointer: fine) {
  .amx-int-card:hover { transform: translateY(-3px); }
}
.amx-int-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #7776F6; margin-bottom: 14px;
}
.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; }
.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);
}
html.amx-dark .amx-int-copy p { color: rgba(255, 255, 255, 0.6); }
.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;
  transition: transform 0.3s var(--amx-out), 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-cta svg { width: 15px; height: 15px; transition: transform 0.3s var(--amx-out); }
@media (hover: hover) and (pointer: fine) {
  .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; }
}

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

/* ============ 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);
}
.amx-snav-main { flex: 1; justify-content: space-between; padding: 0 10px 0 20px; min-width: 0; }
.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;
}
.amx-snav-links { display: flex; align-items: center; gap: 2px; }
.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 */
.amx-snav-dd {
  position: absolute; top: 76px;
  transform: translateX(-50%) translateY(-6px);
  opacity: 0; pointer-events: none;
  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);
  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.on { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.amx-snav-dd::before { content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }
.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: name / business / email / phone ============ */
.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%;
}
.amx-cta-field { min-width: 0; }
.amx-cta-form .amx-cta-fields input {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(12, 12, 20, 0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15px;
  color: #ffffff;
  transition: border-color 0.25s var(--amx-out), box-shadow 0.25s var(--amx-out);
}
.amx-cta-form .amx-cta-fields input::placeholder { color: rgba(255, 255, 255, 0.5); }
.amx-cta-form .amx-cta-fields input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(119, 118, 246, 0.30);
}
/* only flag a bad entry once the visitor has actually typed something */
.amx-cta-form .amx-cta-fields input:not(:placeholder-shown):invalid {
  border-color: rgba(255, 120, 120, 0.75);
}
.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; align-items: center;
}
.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 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;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  padding: 64px 0 40px;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
#amx-footer .amx-ft-brand { max-width: 34ch; }
#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); }
#amx-footer .amx-ft-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;
}
#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); }
}

/* ---- services showcase: richer frame + entrance for the art ---- */
.amx-ss-frame {
  box-shadow: 0 40px 90px rgba(9, 9, 11, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
html.amx-dark .amx-ss-frame {
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.66), 0 0 0 1px rgba(255, 255, 255, 0.07);
}
/* a violet key light behind the frame, so the art sits in the brand */
.amx-ss-right { position: relative; }
.amx-ss-right::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 118%; height: 78%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(119, 118, 246, 0.30), rgba(119, 118, 246, 0) 68%);
  filter: blur(58px);
  pointer-events: none;
  z-index: -1;
}
/* the active pane's art drifts in rather than hard-cutting */
.amx-ss-shot img {
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.amx-ss-reel { will-change: transform; }
#amx-svcscroll:hover .amx-ss-shot img,
.amx-ss-frame:hover img { transform: scale(1.0); }
/* soften the top of the art so the headline side stays dominant */
.amx-ss-frame::before {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 9, 14, 0.28) 0%, rgba(9, 9, 14, 0) 38%);
}
/* list items arrive one after another with the pane */
.amx-ss-pane.on li {
  animation: amx-ss-li 0.5s var(--amx-out) both;
}
.amx-ss-pane.on li:nth-child(1) { animation-delay: 0.06s; }
.amx-ss-pane.on li:nth-child(2) { animation-delay: 0.12s; }
.amx-ss-pane.on li:nth-child(3) { animation-delay: 0.18s; }
.amx-ss-pane.on li:nth-child(4) { animation-delay: 0.24s; }
.amx-ss-pane.on li:nth-child(5) { animation-delay: 0.30s; }
.amx-ss-pane.on li:nth-child(6) { animation-delay: 0.36s; }
.amx-ss-pane.on li:nth-child(7) { animation-delay: 0.42s; }
@keyframes amx-ss-li {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .amx-ss-pane.on li { animation: none; }
  .amx-ss-shot img { transform: none; transition: none; }
}

/* ============ 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; }
#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); }
}