/* =============================================================
   Responsive overrides — supplements global.css
   Breakpoints:  ≤991px (tablet)  |  ≤640px (mobile)
   ============================================================= */

/* ── Logo color — CSS-only, no JS interference ─────────────── */
/* Default: logo dark */
.xp-logo-anim {
  color: #1e1e21 !important;
  -webkit-text-fill-color: #1e1e21 !important;
}
/* Dark hero (not yet scrolled): logo white */
.navbar--dark:not(.is-scrolled) .xp-logo-anim {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* Once scrolled (is-scrolled): always dark regardless of navbar--dark */
.navbar.is-scrolled .xp-logo-anim {
  color: #1e1e21 !important;
  -webkit-text-fill-color: #1e1e21 !important;
}
/* Mobile menu open: logo white */
.navbar.menu-open .xp-logo-anim,
.navbar_menu .xp-logo-anim {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── Dark hero navbar ──────────────────────────────────────── */
.navbar--dark .navbar_link,
.navbar--dark .navbar_link:visited,
.navbar--dark .xp-nav-link {
  color: #ffffff !important;
}
.navbar--dark .navbar_hamburger span {
  background: #ffffff !important;
}
.navbar--dark .navbar_hamburger.is-open span {
  background: #1e1e21 !important;
}

/* ── Hero section ──────────────────────────────────────────── */
.xp-hero-section {
  min-height: 90vh;
}
@media only screen and (max-width: 991px) {
  .xp-hero-section {
    min-height: auto !important;
    padding-top: 6rem;
  }
}

/* ── Hero entrance animations (pure CSS, first-paint safe) ──── */
.xp-hero-tagline {
  opacity: 0;
  transform: translateY(30px);
  animation: xp-hero-fade-up 0.8s cubic-bezier(0.25, 0.4, 0.25, 1) 0.3s forwards;
}
.xp-hero-letter {
  opacity: 0;
  transform: translateY(80px);
  animation: xp-hero-letter-in 1.2s cubic-bezier(0.25, 0.4, 0.25, 1) forwards;
}
@keyframes xp-hero-fade-up {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes xp-hero-letter-in {
  0% { opacity: 0; transform: translateY(80px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Hero background: animated grid + rotating conic glow ───── */
.xp-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(30, 30, 33, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 30, 33, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: xp-grid-breathe 6s ease-in-out infinite;
}
.xp-hero-aurora {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 0;
}
/* Big rotating conic — cool monochrome + soft blue */
.xp-hero-aurora--1 {
  top: 50%;
  left: 50%;
  width: 140vmax;
  height: 140vmax;
  margin-top: -70vmax;
  margin-left: -70vmax;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(120, 140, 180, 0) 0deg,
    rgba(120, 140, 180, 0.32) 40deg,
    rgba(180, 190, 210, 0.28) 90deg,
    rgba(120, 140, 180, 0) 160deg,
    rgba(120, 140, 180, 0) 220deg,
    rgba(100, 120, 180, 0.34) 280deg,
    rgba(140, 160, 200, 0.36) 330deg,
    rgba(120, 140, 180, 0) 360deg
  );
  filter: blur(60px);
  animation: xp-conic-spin 22s linear infinite;
  opacity: 0.85;
}
/* Soft cool spotlight — bottom left */
.xp-hero-aurora--2 {
  bottom: -15%;
  left: -10%;
  width: 55vw;
  max-width: 700px;
  height: 55vw;
  max-height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 110, 170, 0.4), rgba(90, 110, 170, 0) 65%);
  filter: blur(40px);
  animation: xp-glow-drift 14s ease-in-out infinite;
}
/* Neutral gray accent — top right */
.xp-hero-aurora--3 {
  top: 15%;
  right: -15%;
  width: 50vw;
  max-width: 640px;
  height: 50vw;
  max-height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 30, 33, 0.14), rgba(30, 30, 33, 0) 65%);
  filter: blur(50px);
  animation: xp-glow-drift-alt 18s ease-in-out infinite;
}
@keyframes xp-conic-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes xp-glow-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.9; }
  50% { transform: translate3d(6vw, -4vw, 0) scale(1.15); opacity: 1; }
}
@keyframes xp-glow-drift-alt {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.8; }
  50% { transform: translate3d(-5vw, 6vw, 0) scale(1.1); opacity: 1; }
}
@keyframes xp-grid-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-hero-tagline,
  .xp-hero-letter,
  .xp-hero-img,
  .xp-hero-aurora {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── About page: proof/stats grid ──────────────────────────── */
@media (max-width: 991px) {
  #proof-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }
  /* Strip all inline borders then rebuild cleanly */
  #proof-grid > div {
    border-left: none !important;
    border-right: none !important;
    padding: 1.5rem 1rem !important;
    border-bottom: 1px solid #e0e0e0 !important;
  }
  /* Right column: add separator */
  #proof-grid > div:nth-child(2),
  #proof-grid > div:nth-child(4) {
    border-left: 1px solid #e0e0e0 !important;
  }
  /* Bottom row: no bottom border */
  #proof-grid > div:nth-child(3),
  #proof-grid > div:nth-child(4) {
    border-bottom: none !important;
  }
}

/* ── Services dropdown ─────────────────────────────────────── */
.nav-dropdown {
  position: relative;
}
/* Transparent bridge: keeps hover active when cursor moves from nav link to menu */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 24px;
  background: transparent;
}
.nav-dropdown > .navbar_link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.nav-dropdown-arrow {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-dropdown:hover .nav-dropdown-arrow {
  transform: rotate(180deg);
}

/* Panel container */
.nav-dropdown-menu {
  position: fixed;
  top: 66px;
  left: 0;
  right: 0;
  width: 100vw;
  transform-origin: top center;
  transform: perspective(2000px) rotateX(-3deg) translateY(-6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
  background: rgba(8, 8, 8, 0.96);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: perspective(2000px) rotateX(0) translateY(0);
}

/* Inner grid */
.nav-dropdown-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.3fr;
  gap: 1.5rem;
  padding: 2.25rem clamp(1.5rem, 5vw, 4rem);
  max-width: 1980px;
  margin-left: auto;
  margin-right: auto;
}
/* Subtle top glow line */
.nav-dropdown-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,68,0,0.2), transparent);
}

/* Columns */
.nav-dropdown-col {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.nav-dropdown-label {
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3) !important;
  margin: 0 0 0.6rem;
  padding: 0 0.65rem;
}

/* Items with icons */
.nav-dropdown-item {
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  /* Staggered reveal */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.15s ease, color 0.15s ease;
  transition-delay: calc(var(--i, 0) * 30ms);
}
.nav-dropdown:hover .nav-dropdown-item {
  opacity: 1;
  transform: translateY(0);
}
.nav-dropdown-item svg {
  flex-shrink: 0;
  opacity: 0.4;
  transition: opacity 0.15s ease, stroke 0.15s ease;
}
.nav-dropdown-item:hover {
  background: rgba(255, 68, 0, 0.06);
  color: #FF4400 !important;
}
.nav-dropdown-item:hover svg {
  opacity: 1;
  stroke: #FF4400;
}

/* Dark navbar overrides (dropdown always dark) */
.navbar--dark .nav-dropdown-item {
  color: rgba(255,255,255,0.75) !important;
}
.navbar--dark .nav-dropdown-label {
  color: rgba(255,255,255,0.3) !important;
}

/* Featured CTA column */
.nav-dropdown-featured {
  display: flex;
  align-items: stretch;
  padding-left: 1.5rem;
  border-left: 1px solid rgba(255,255,255,0.06);
}
.nav-dropdown-featured-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  width: 100%;
  /* Staggered entry */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.12s, transform 0.4s ease 0.12s;
}
.nav-dropdown:hover .nav-dropdown-featured-card {
  opacity: 1;
  transform: translateY(0);
}
.nav-dropdown-featured-label {
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #FF4400;
}
.nav-dropdown-featured-heading {
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
  margin: 0;
}
.nav-dropdown-featured-sub {
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
  margin: 0;
}
.nav-dropdown-featured-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #FF4400 !important;
  -webkit-text-fill-color: #FF4400 !important;
  margin-top: 0.4rem;
  text-decoration: none !important;
  transition: gap 0.2s ease;
}
.nav-dropdown-featured-btn:hover {
  gap: 0.6rem;
}

/* Hide on mobile */
@media (max-width: 991px) {
  .nav-dropdown-menu {
    display: none !important;
  }
  .nav-dropdown-arrow {
    display: none;
  }
}

/* ── Logo animation ────────────────────────────────────────── */
.xp-logo-anim {
  opacity: 0;
  transform: translateY(-12px);
  animation: xp-logo-in 0.8s cubic-bezier(0.25, 0.4, 0.25, 1) 0.2s forwards;
}
@keyframes xp-logo-in {
  0%   { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.xp-logo-x {
  display: inline-block;
  animation: xp-x-spin 3s cubic-bezier(0.25, 0.4, 0.25, 1) 0.5s both;
}
@keyframes xp-x-spin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(720deg); }
}

/* ── Nav link stagger animation ────────────────────────────── */
.xp-nav-link {
  opacity: 0;
  transform: translateY(-10px);
  animation: xp-nav-in 0.5s ease forwards;
  animation-delay: calc(0.3s + var(--i) * 0.08s);
}
@keyframes xp-nav-in {
  0%   { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.xp-nav-link span {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.25, 0.4, 0.25, 1);
}
.xp-nav-link:hover span {
  animation: nav-text-roll 0.4s cubic-bezier(0.25, 0.4, 0.25, 1) forwards;
}
@keyframes nav-text-roll {
  0%   { transform: translateY(0); opacity: 1; }
  49%  { transform: translateY(-50%); opacity: 0; }
  50%  { transform: translateY(50%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ── Nav hover: frosted overlay ───────────────────────────── */
.navbar {
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
.navbar.nav-hovered {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.navbar--dark.nav-hovered .navbar_link,
.navbar--dark.nav-hovered .xp-nav-link {
  color: #ffffff !important;
}
.navbar--dark.nav-hovered .navbar_hamburger span {
  background: #ffffff !important;
}
.navbar--dark.nav-hovered .navbar_cta .button,
.navbar--dark.nav-hovered .navbar_cta .button .button_content,
.navbar--dark.nav-hovered .navbar_cta .button .button_icon {
  color: #ffffff !important;
}
/* Blur overlay — disabled */
.nav-blur-overlay { display: none; }

/* ── Navbar scroll effect ─────────────────────────────────── */
.navbar.is-scrolled {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
}
.navbar--dark.is-scrolled {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.navbar--dark.is-scrolled .navbar_link,
.navbar--dark.is-scrolled .navbar a,
.navbar--dark.is-scrolled .xp-nav-link {
  color: #1e1e21 !important;
}


/* ── Hero image zoom-out on load ───────────────────────────── */
.xp-hero-img {
  transform: scale(1.3);
  animation: xp-hero-zoom 2.5s cubic-bezier(0.25, 0.4, 0.25, 1) 0.3s forwards;
}
@keyframes xp-hero-zoom {
  0%   { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ── Framer design system base ──────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-color: #1e1e21 transparent;
}
html.lenis, html.lenis body {
  height: auto;
}
html.lenis {
  scroll-behavior: auto;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #1e1e21;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #000000;
}
body, .page-wrapper {
  background-color: #ffffff !important;
  color: #1e1e21 !important;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif !important;
  overflow-x: hidden !important;
}
.navbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, opacity 0.3s ease;
}
.navbar_link, .navbar a:not(.nav-dropdown-item):not(.nav-dropdown-featured-btn) { color: #1e1e21 !important; }
.navbar--dark .navbar_link, .navbar--dark .navbar a:not(.nav-dropdown-item):not(.nav-dropdown-featured-btn), .navbar--dark .xp-nav-link { color: #ffffff !important; }




.navbar_logo svg, .navbar_logo-image svg {
  color: #1e1e21 !important;
  fill: #1e1e21 !important;
}
:root {
  --base-color-brand--yellow: #000000;
  --link-color--link-primary: #000000;
}
.navbar_cta .button {
  background: transparent !important;
  background-color: transparent !important;
  color: #1e1e21 !important;
  border-color: transparent !important;
  font-size: 0.85rem !important;
}
.navbar_cta .button .button_content,
.navbar_cta .button:hover .button_content {
  background-color: transparent !important;
  color: #1e1e21 !important;
}
.navbar_cta .button .button_icon {
  color: #1e1e21 !important;
}
.navbar_cta .text-size-medium {
  font-size: 0.85rem !important;
}
.navbar_cta .button_icon {
  transition: transform 0.4s cubic-bezier(0.25, 0.4, 0.25, 1);
}
.navbar_cta .button:hover .button_icon {
  animation: cta-arrow-loop 0.6s ease infinite;
}
@keyframes cta-arrow-loop {
  0%   { transform: translate(0, 0); opacity: 1; }
  50%  { transform: translate(4px, -4px); opacity: 0; }
  51%  { transform: translate(-4px, 4px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}
.navbar--dark .navbar_cta .button {
  color: #ffffff !important;
}
.navbar--dark .navbar_cta .button .button_content,
.navbar--dark .navbar_cta .button:hover .button_content {
  background-color: transparent !important;
  color: #ffffff !important;
}
.navbar--dark .navbar_cta .button .button_icon {
  color: #ffffff !important;
}
.navbar--dark.is-scrolled .navbar_cta .button {
  color: #1e1e21 !important;
}
.navbar--dark.is-scrolled .navbar_cta .button .button_content {
  color: #1e1e21 !important;
}
.navbar--dark.is-scrolled .navbar_cta .button .button_icon {
  color: #1e1e21 !important;
}
.button {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}
.button .button_content,
.button:hover .button_content {
  background-color: #000000 !important;
  color: #ffffff !important;
}
.navbar_hamburger span {
  background: #1e1e21 !important;
}
.text-color-secondary, .text-color-tertiary { color: #8f8f8f !important; }
.global_card, .services_card { background: #262626 !important; }

/* ── Global heading font ────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.heading-style-h1, .heading-style-h2, .heading-style-h3,
.heading-style-h4, .heading-style-h5, .heading-style-h6,
[class*="heading"], [class*="m-custom"] {
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.05em !important;
}
.ss-content_punchline, .ss-content_punchline * {
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif !important;
}
blockquote {
  border-left: none !important;
  padding-left: 0 !important;
}

/* ── Hero wrapper: no gradient, plain white ─────────────────── */
.main-wrapper { overflow: visible !important; position: relative; z-index: 1; background: #ffffff; }
h1 { font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif !important; }
.main-wrapper > div:first-child {
  background: #ffffff !important;
  background-image: none !important;
}

/* ── Footer ─────────────────────────────────────────────────── */
.xp-footer {
  background: #000000;
  color: #ffffff;
  padding: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 5vw, 5rem) 0;
  overflow: hidden;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
/* Reserve scroll space for the fixed footer reveal — pure CSS, no JS reflow. */
.main-wrapper {
  margin-bottom: 100vh;
}
.xp-footer > .xp-footer-heading,
.xp-footer > .xp-footer-cols {
  max-width: 1980px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ── Global 1980px cap for page content containers ──────────── */
div[style*="padding: 0 clamp(1.5rem, 5vw, 4rem)"] {
  max-width: 1980px;
  margin-left: auto;
  margin-right: auto;
}
.ag-cap__inner,
.ag-process__inner,
.eat-container,
.eat-trends__inner,
.eat-closing__inner {
  max-width: 1980px !important;
}
.xp-footer-heading {
  margin-bottom: 0;
}
.xp-footer-sub {
  font-size: clamp(1.5rem, 3.5vw, 2.8rem);
  font-weight: 300;
  color: rgba(255,255,255,0.45);
  margin: 0 0 0.2em;
  letter-spacing: -0.03em;
  margin-top: -3.5rem;
}
.xp-footer-title {
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.xp-footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  padding-bottom: 0;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: auto;
  z-index: 111111111;
}
.xp-footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.xp-footer-col-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.5rem;
}
.xp-footer-col a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  font-weight: 400;
  transition: color 0.2s;
}
.xp-footer-col a:hover { color: #ffffff; }
.xp-footer-socials {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}
.xp-footer-socials .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
  transition: color 0.2s, background 0.2s;
}
.xp-footer-socials .social-icon:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.14);
}
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}
.social-icon:hover {
  color: #FF4400;
  background: rgba(255, 68, 0, 0.08);
}
/* Footer pill buttons keep their own sizing — override the generic padding */
.xp-footer-socials .social-icon {
  padding: 0;
}
.xp-footer-socials .social-icon:hover {
  background: rgba(255,255,255,0.14);
  color: #ffffff;
}
.xp-footer-brand-video {
  display: block;
  width: 100%;
  height: auto;
  margin-top: auto;
  user-select: none;
  pointer-events: none;
  object-fit: cover;
  transform: translateY(-15vh);
}
@media (max-width: 640px) {
  .xp-footer-cols { grid-template-columns: 1fr 1fr; }
  /* On mobile the footer is in normal flow (height: auto), so the desktop
     translateY lift would push the video up into the socials. Reset it. */
  .xp-footer-brand-video {
    transform: none;
    margin-top: 2rem;
  }
  /* Desktop pulls "AI-first company," up by -3.5rem because the 100vh footer
     has lots of vertical space. On mobile that lift pushes it above the
     visible padding and clips. Reset to natural flow. */
  .xp-footer-sub {
    margin-top: 0;
  }
}

/* ── Hide all blob elements ─────────────────────────────────── */
.global_blob, .global_blob-wrapper, .global_section-blob,
.services_blob, .services_blob-wrapper {
  display: none !important;
}

/* ── Global: prevent horizontal scroll ─────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Ensure all images are fluid */
img {
  max-width: 100%;
  height: auto;
}

/* ── Social links in mobile menu (hidden on desktop) ─────────── */
.navbar_menu-socials {
  display: none;
}

/* ── Hamburger button (hidden on desktop) ───────────────────── */
.navbar_hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0.4rem;
  background: none;
  border: none;
  color: var(--text-color--text-primary, #fff);
  flex-shrink: 0;
}
.navbar_hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.navbar_hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar_hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.navbar_hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ═══════════════════════════════════════════════════════════════
   TABLET  ≤ 991px
   ═══════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 991px) {

  /* ── Navbar ───────────────────────────────────────────────── */
  .navbar {
    z-index: 100;
    position: fixed;
  }
  .navbar_hamburger {
    display: flex;
    z-index: 101;
    position: relative;
  }
  .navbar_cta {
    display: none;
  }

  /* Hide nav menu by default on tablet */
  .navbar_menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #ffffff;
    padding: clamp(6rem, 12vw, 8rem) clamp(1.5rem, 5vw, 3rem) 2rem;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.25, 0.4, 0.25, 1), visibility 0.4s;
    z-index: 99;
    overflow-y: auto;
  }

  /* Mobile nav – full-screen slide from left */
  .navbar_menu.is-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .navbar_menu .navbar_link {
    display: block;
    padding: 1.2rem 0;
    border-bottom: none;
    font-size: clamp(2rem, 8vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    width: 100%;
    text-align: left;
    color: #1e1e21;
    text-decoration: none;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .navbar_menu.is-open .navbar_link,
  .navbar--dark .navbar_menu.is-open .navbar_link,
  .navbar--dark .navbar_menu.is-open .xp-nav-link {
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: none !important;
    color: #1e1e21 !important;
  }
  .navbar_menu.is-open .navbar_link:nth-child(1) { transition-delay: 0.05s; }
  .navbar_menu.is-open .navbar_link:nth-child(2) { transition-delay: 0.1s; }
  .navbar_menu.is-open .navbar_link:nth-child(3) { transition-delay: 0.15s; }
  .navbar_menu.is-open .navbar_link:nth-child(4) { transition-delay: 0.2s; }
  .navbar_menu.is-open .navbar_link:nth-child(5) { transition-delay: 0.25s; }

  /* Logo inside mobile menu */
  .navbar_menu::before {
    content: 'ai.x';
    display: block;
    font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
    font-weight: 500;
    font-size: 1.75rem;
    letter-spacing: -0.06em;
    color: #fff;
    margin-bottom: 2rem;
  }

  /* Social links at bottom of mobile menu */
  .navbar_menu-socials {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-top: auto;
    padding-top: 2rem;
    border-top: 1px solid #ddd;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
  }
  .navbar_menu.is-open .navbar_menu-socials,
  .navbar--dark .navbar_menu.is-open .navbar_menu-socials {
    opacity: 1;
    transform: translateY(0);
  }
  .navbar_menu.is-open .navbar_menu-socials a,
  .navbar--dark .navbar_menu.is-open .navbar_menu-socials a {
    color: #1e1e21 !important;
  }
  .navbar_menu-socials a {
    color: #1e1e21;
    text-decoration: none;
    line-height: 0;
  }

  /* ── Grids ────────────────────────────────────────────────── */
  .global_grid-4col {
    grid-template-columns: 1fr 1fr !important;
  }

  .global_grid-2col {
    grid-template-columns: 1fr !important;
  }

  /* ── Logo marquee: show it on tablet/mobile ───────────────── */
  .clients-logos_marquee.show-ml {
    display: flex !important;
  }
  .client-logos_cms.hide-mobile-landscape {
    display: none !important;
  }

  /* ── Services section ─────────────────────────────────────── */
  .services_list {
    grid-template-columns: 1fr;
  }

  /* ── Benefits stagger offset: remove on mobile ────────────── */
  .benefits_card-wrapper.is-01,
  .benefits_card-wrapper.is-02,
  .benefits_card-wrapper.is-03 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ── Testimonials ─────────────────────────────────────────── */
  .testimonials_controls {
    gap: 0.75rem;
    justify-content: center;
  }

  /* ── Section headings: scale down ────────────────────────── */
  .heading-style-h1 {
    font-size: clamp(2rem, 6vw, 3.5rem) !important;
  }
  .heading-style-h2 {
    font-size: clamp(1.6rem, 4.5vw, 2.8rem) !important;
  }

  /* ── Case Studies: hide sidebar, full-width grid ──────────── */
  #case-index {
    display: none !important;
  }
  #case-studies-section > div:first-child {
    margin-left: 0 !important;
  }
  #case-grid-wrap > div:last-child,
  #case-grid-wrap > .flex {
    margin-left: 0 !important;
  }
  #case-grid-wrap div[style*="grid-template-columns: 1fr 1fr"],
  #case-grid-wrap .grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* ── Services Accordion: stack on tablet ──────────────────── */
  #case-studies-section div[style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Testimonials heading: reduce left offset ────────────── */
  .testimonials-heading {
    padding-left: clamp(1rem, 3vw, 2rem) !important;
  }

  /* ── Service Hero: reduce spacing on tablet ──────────────── */
  .service-hero {
    min-height: auto !important;
    padding-top: clamp(6rem, 14vh, 10rem) !important;
  }

  /* ── Wave Section: Our Approach ─────────────────────────── */
  .wave-approach-text {
    width: 100% !important;
    font-size: clamp(1.6rem, 4vw, 2.8rem) !important;
  }

  /* ── Case Studies heading spacing ───────────────────────── */
  #case-studies-section > div:first-child {
    margin-bottom: 3rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE  ≤ 640px
   ═════════════════════════════════════════════════════��═════════ */
@media only screen and (max-width: 640px) {

  /* ── Grids ────────────────────────────────────────────────── */
  .global_grid-4col {
    grid-template-columns: 1fr !important;
  }

  /* ── CTA button group: stack vertically ──────────────────── */
  .button-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .button-group .button,
  .button-group .button.is-secondary {
    width: 100%;
    justify-content: center;
  }

  /* ── Navbar: hide CTA text, keep icon ─────────���──────────── */
  .navbar_cta .text-size-medium {
    display: none;
  }

  /* ── Padding adjustments ──────────────────────────────────── */
  .padding-global {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* ── Section headers ──────────────────────────────────────── */
  .global_section-header {
    text-align: center;
  }
  .global_section-header-paragraph {
    max-width: 100%;
  }

  /* ── Principles: icon size ────────────────────────────────── */
  .principles_item {
    width: 4rem !important;
    height: 4rem !important;
  }

  /* ── Case studies: single col already at 767px ───────────── */

  /* ── FAQ: better touch targets ───────────────────────────── */
  .faq_top {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  /* ── Footer ───────────────────────────────────────────────── */
  .footer_links-list {
    flex-direction: column;
    gap: 0.75rem;
  }

  /* ── Heading sizes ────────────────────────────────────────── */
  .heading-style-h2 {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
  }
  .heading-style-h3 {
    font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
  }
  .heading-style-h4 {
    font-size: clamp(1rem, 4vw, 1.3rem) !important;
  }

  /* ── Testimonial card: limit width ───────────────────────── */
  .testimonials_card {
    min-width: calc(100vw - 2.5rem);
  }

  /* ── Case Studies: single col cards ──────────────────────── */
  #case-grid-wrap div[style*="1fr 1fr"],
  #case-grid-wrap .grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* ── Footer: single column ───────────────────────────────── */
  .xp-footer-cols {
    grid-template-columns: 1fr !important;
  }

  /* ── Footer: drop into normal flow on mobile so it's actually visible.
        Desktop keeps position:fixed for the reveal-on-scroll effect, which
        only works because .main-wrapper reserves margin-bottom: 100vh of
        scroll space. On mobile we don't have that space, so the fixed
        footer ends up hidden behind the white main-wrapper. ──────── */
  .xp-footer {
    height: auto !important;
    position: relative !important;
    bottom: auto !important;
  }
  .main-wrapper {
    margin-bottom: 0 !important;
  }

  /* ── Testimonials heading: remove left offset ────────────── */
  .testimonials-heading {
    padding-left: 0 !important;
  }

  /* ── Service Hero: reduce spacing on mobile ──────────────── */
  .service-hero {
    min-height: auto !important;
    padding-top: clamp(5rem, 12vh, 7rem) !important;
    padding-bottom: 2rem !important;
  }

  /* ── Homepage hero video — shorter on mobile ─────────────── */
  .hero-video-wrap {
    height: 50vh !important;
  }

  /* ── Fixed hero — shorter on mobile ──────────────────────── */
  .hero-spacer {
    height: auto !important;
    min-height: 0 !important;
  }
  .hero-spacer + .service-hero {
    min-height: auto !important;
    position: relative !important;
  }

  /* ── Wave Section: Our Approach ─────────────────────────── */
  .wave-approach {
    flex-direction: column !important;
    gap: 0.75rem;
  }
  .wave-approach-text {
    width: 100% !important;
    margin-left: 0 !important;
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
  }

  /* ── Case Studies heading ───────────────────────────────── */
  #case-studies-section > div:first-child {
    margin-left: 0 !important;
    margin-bottom: 2rem !important;
  }
  #case-studies-section {
    padding-top: 1rem !important;
  }

  /* ── Services Accordion: stack number + title ────────────── */
  section[style*="ServicesAccordion"] button[style*="grid"] {
    grid-template-columns: 3rem 1fr 2rem !important;
  }
}
.navbar--dark.is-scrolled .navbar_hamburger span {
  background: #1e1e21 !important;
}

/* ── FeatureGrid responsive rows ───────────────────────────── */
@media (max-width: 991px) {
  .fg-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── Dark navbar: force white links ─────────────────────────── */
.navbar--dark:not(.is-scrolled) .navbar_link,
.navbar--dark:not(.is-scrolled) .navbar_link span,
.navbar--dark:not(.is-scrolled) .xp-nav-link,
.navbar--dark:not(.is-scrolled) .xp-nav-link span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.navbar--dark:not(.is-scrolled) .nav-dropdown-arrow {
  stroke: #ffffff !important;
  color: #ffffff !important;
}