/* ORB AI–inspired theme layer for SapphireX */

:root {
  --bg: #F5F5F5;
  --bg-white: #FFFFFF;
  --bg-2: #EEEEEE;
  --bg-3: #E5E5E5;
  --bg-dark: #0A0A0A;
  --text-1: #16101e;
  --text-2: #5C5C5C;
  --text-3: #8A8A8A;
  --text-inv: #FFFFFF;
  --token-6396e7f2-0645-4f69-9a36-80e94f8ee015: #16101e;
  --text-body: var(--token-6396e7f2-0645-4f69-9a36-80e94f8ee015, #16101e);
  --rule: rgba(0, 0, 0, 0.08);
  --rule-mid: rgba(0, 0, 0, 0.12);
  --radius-card: 24px;
  /* Canonical card/box surface — OrbAI Framer token (sitewide boxes) */
  --token-4f00a517-d75a-4557-9433-caf4536a911d: rgb(245, 245, 245);
  --orb-box-bg: var(--token-4f00a517-d75a-4557-9433-caf4536a911d, rgb(245, 245, 245));
  --orb-box-radius: 10px;
  /* Canonical card/box content padding — OrbAI micro-match (32px dominant, 24px bento) */
  --orb-box-pad: clamp(24px, 2.5vw, 32px);
  --orb-inner-gap: clamp(16px, 1.8vw, 24px);
  --orb-box-shadow:
    rgba(0, 0, 0, 0.08) 0px 0.706592px 0.706592px -0.666667px,
    rgba(0, 0, 0, 0.08) 0px 1.80656px 1.80656px -1.33333px,
    rgba(0, 0, 0, 0.07) 0px 3.62176px 3.62176px -2px,
    rgba(0, 0, 0, 0.07) 0px 6.8656px 6.8656px -2.66667px,
    rgba(0, 0, 0, 0.05) 0px 13.6468px 13.6468px -3.33333px,
    rgba(0, 0, 0, 0.02) 0px 30px 30px -4px,
    rgb(255, 255, 255) 0px 3px 1px 0px inset;
  --experience-image-shadow:
    rgba(0, 0, 0, 0.08) 0px 0.706592px 0.706592px -0.666667px,
    rgba(0, 0, 0, 0.08) 0px 1.80656px 1.80656px -1.33333px,
    rgba(0, 0, 0, 0.07) 0px 3.62176px 3.62176px -2px,
    rgba(0, 0, 0, 0.07) 0px 6.8656px 6.8656px -2.66667px,
    rgba(0, 0, 0, 0.05) 0px 13.6468px 13.6468px -3.33333px,
    rgba(0, 0, 0, 0.02) 0px 30px 30px -4px;
  --orb-box-shadow-hover:
    rgba(0, 0, 0, 0.10) 0px 0.706592px 0.706592px -0.666667px,
    rgba(0, 0, 0, 0.10) 0px 1.80656px 1.80656px -1.33333px,
    rgba(0, 0, 0, 0.09) 0px 3.62176px 3.62176px -2px,
    rgba(0, 0, 0, 0.09) 0px 6.8656px 6.8656px -2.66667px,
    rgba(0, 0, 0, 0.07) 0px 13.6468px 13.6468px -3.33333px,
    rgba(0, 0, 0, 0.04) 0px 30px 30px -4px,
    rgb(255, 255, 255) 0px 3px 1px 0px inset;
  --insights-toggle-radius: 34px;
  /* OrbAI #hero — layered Framer shadows (extracted from orbai-template.framer.website) */
  --orb-hero-shadow-primary:
    rgba(61, 61, 61, 0.72) 0px 0.602187px 1.08394px -1.25px,
    rgba(61, 61, 61, 0.64) 0px 2.28853px 4.11936px -2.5px,
    rgba(61, 61, 61, 0.25) 0px 10px 18px -3.75px,
    rgba(0, 0, 0, 0.35) 0px 0.706592px 0.706592px -0.583333px,
    rgba(0, 0, 0, 0.34) 0px 1.80656px 1.80656px -1.16667px,
    rgba(0, 0, 0, 0.33) 0px 3.62176px 3.62176px -1.75px,
    rgba(0, 0, 0, 0.3) 0px 6.8656px 6.8656px -2.33333px,
    rgba(0, 0, 0, 0.26) 0px 13.6468px 13.6468px -2.91667px,
    rgba(0, 0, 0, 0.15) 0px 30px 30px -3.5px;
  /* White/ghost CTA — soft diffused elevation (lower contrast than Framer gray stack) */
  --orb-hero-shadow-ghost:
    rgba(0, 0, 0, 0.06) 0px 1px 2px -0.5px,
    rgba(0, 0, 0, 0.05) 0px 3px 8px -1.5px,
    rgba(0, 0, 0, 0.04) 0px 8px 20px -3px,
    rgba(0, 0, 0, 0.025) 0px 18px 40px -5px,
    rgb(255, 255, 255) 0px 3px 1px 0px inset;
  --orb-hero-shadow-ghost-hover:
    rgba(0, 0, 0, 0.07) 0px 1px 3px -0.5px,
    rgba(0, 0, 0, 0.06) 0px 4px 12px -1.5px,
    rgba(0, 0, 0, 0.045) 0px 10px 28px -3px,
    rgba(0, 0, 0, 0.03) 0px 22px 48px -5px,
    rgb(255, 255, 255) 0px 3px 1px 0px inset;
  /* Pre-smooth ghost stack — homepage hero ghost only (see .home .hero .btn-ghost) */
  --btn-shadow-ghost-legacy:
    rgba(158, 158, 158, 0.69) 0px 0.706592px 0.706592px -0.583333px,
    rgba(158, 158, 158, 0.68) 0px 1.80656px 1.80656px -1.16667px,
    rgba(158, 158, 158, 0.65) 0px 3.62176px 3.62176px -1.75px,
    rgba(158, 158, 158, 0.61) 0px 6.8656px 6.8656px -2.33333px,
    rgba(158, 158, 158, 0.52) 0px 13.6468px 13.6468px -2.91667px,
    rgba(158, 158, 158, 0.3) 0px 30px 30px -3.5px,
    rgb(255, 255, 255) 0px 3px 1px 0px inset;
  --orb-hero-shadow-sm:
    rgba(0, 0, 0, 0.1) 0px 0.706592px 0.706592px -0.541667px,
    rgba(0, 0, 0, 0.09) 0px 1.80656px 1.80656px -1.08333px,
    rgba(0, 0, 0, 0.09) 0px 3.62176px 3.62176px -1.625px,
    rgba(0, 0, 0, 0.09) 0px 6.8656px 6.8656px -2.16667px,
    rgba(0, 0, 0, 0.08) 0px 13.6468px 13.6468px -2.70833px,
    rgba(0, 0, 0, 0.05) 0px 30px 30px -3.25px,
    rgb(255, 255, 255) 0px 3px 1px 0px inset;
  --orb-hero-shadow:
    rgba(0, 0, 0, 0.08) 0px 0.706592px 0.706592px -0.666667px,
    rgba(0, 0, 0, 0.08) 0px 1.80656px 1.80656px -1.33333px,
    rgba(0, 0, 0, 0.07) 0px 3.62176px 3.62176px -2px,
    rgba(0, 0, 0, 0.07) 0px 6.8656px 6.8656px -2.66667px,
    rgba(0, 0, 0, 0.05) 0px 13.6468px 13.6468px -3.33333px,
    rgba(0, 0, 0, 0.02) 0px 30px 30px -4px,
    rgb(255, 255, 255) 0px 3px 1px 0px inset;
  --orb-shadow-sm:
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.06);
  --orb-shadow-md:
    0 4px 12px rgba(0, 0, 0, 0.05),
    0 16px 40px rgba(0, 0, 0, 0.08);
  --orb-shadow-card: var(--orb-box-shadow);
  --orb-surface-gray: var(--orb-box-bg);
  --orb-surface-gray-shadow: var(--orb-box-shadow);
  --orb-surface-gray-shadow-hover: var(--orb-box-shadow-hover);
  --orb-surface-gray-radius: var(--orb-box-radius);
  --faq-bg: var(--bg); /* OrbAI token rgb(245, 245, 245) */
  --faq-item-bg: var(--orb-box-bg);
  --faq-item-shadow: var(--orb-box-shadow);
  --faq-item-shadow-hover: var(--orb-box-shadow-hover);
  /* Unified CTA shadow tokens — OrbAI Framer pill buttons */
  --btn-shadow-primary: var(--orb-hero-shadow-primary);
  --btn-shadow-primary-hover:
    rgba(61, 61, 61, 0.75) 0px 0.602187px 1.08394px -1.25px,
    rgba(61, 61, 61, 0.67) 0px 2.28853px 4.11936px -2.5px,
    rgba(61, 61, 61, 0.3) 0px 12px 22px -3.75px,
    rgba(0, 0, 0, 0.38) 0px 0.706592px 0.706592px -0.583333px,
    rgba(0, 0, 0, 0.36) 0px 1.80656px 1.80656px -1.16667px,
    rgba(0, 0, 0, 0.35) 0px 3.62176px 3.62176px -1.75px,
    rgba(0, 0, 0, 0.32) 0px 6.8656px 6.8656px -2.33333px,
    rgba(0, 0, 0, 0.28) 0px 13.6468px 13.6468px -2.91667px,
    rgba(0, 0, 0, 0.18) 0px 32px 32px -3.5px;
  /* White/ghost CTA — soft diffused elevation tokens */
  --btn-shadow-ghost: var(--orb-hero-shadow-ghost);
  --btn-shadow-ghost-hover: var(--orb-hero-shadow-ghost-hover);
  --btn-shadow-ghost-active: var(--orb-hero-shadow-sm);
  --btn-shadow-secondary: var(--btn-shadow-ghost);
  --btn-shadow-secondary-hover: var(--btn-shadow-ghost-hover);
  --btn-shadow-active: var(--orb-hero-shadow-sm);
  --orb-btn-shadow: var(--btn-shadow-primary);
  --orb-btn-shadow-hover: var(--btn-shadow-primary-hover);
  --orb-cta-radius: 10px;
  --orb-cta-ghost-bg: rgb(245, 245, 245);
  --orb-cta-ghost-border: rgba(0, 0, 0, 0.04);
  --orb-cta-ghost-shadow: var(--btn-shadow-ghost);
  /* Hero CTAs on cream bg — OrbAI reference */
  --orb-hero-cta-primary-shadow: var(--btn-shadow-primary);
  --orb-hero-cta-primary-shadow-hover: var(--btn-shadow-primary-hover);
  --orb-hero-cta-secondary-bg: var(--orb-cta-ghost-bg);
  --orb-hero-cta-secondary-border: var(--orb-cta-ghost-border);
  --orb-hero-cta-secondary-shadow: var(--btn-shadow-ghost);
  --orb-hero-cta-secondary-shadow-hover: var(--btn-shadow-ghost-hover);
  /* OrbAI section badge pill (CUSTOMERS — orbai-template.framer.website) */
  --orb-badge-bg: rgb(245, 245, 245);
  --orb-badge-border: rgb(245, 245, 245);
  --orb-badge-radius: 60px;
  --orb-badge-shadow:
    0px 0.706592px 0.706592px -0.541667px rgba(0, 0, 0, 0.1),
    0px 1.806562px 1.806562px -1.083333px rgba(0, 0, 0, 0.09),
    0px 3.621759px 3.621759px -1.625px rgba(0, 0, 0, 0.09),
    0px 6.8656px 6.8656px -2.166667px rgba(0, 0, 0, 0.09),
    0px 13.646761px 13.646761px -2.708333px rgba(0, 0, 0, 0.08),
    0px 30px 30px -3.25px rgba(0, 0, 0, 0.05),
    inset 0px 3px 1px 0px rgb(255, 255, 255);
  --orb-badge-icon-size: 16px;
  --section-badge-shadow: var(--orb-badge-shadow);
  --section-badge-bg: var(--orb-badge-bg);
  /* Frameworks grid icon — OrbAI Framer pill (orbai-template.framer.website) */
  --frameworks-icon-bg: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 170%);
  --frameworks-icon-shadow:
    rgba(171, 171, 171, 0.64) 0px 0.706592px 0.706592px -0.541667px,
    rgba(171, 171, 171, 0.63) 0px 1.80656px 1.80656px -1.08333px,
    rgba(171, 171, 171, 0.61) 0px 3.62176px 3.62176px -1.625px,
    rgba(171, 171, 171, 0.58) 0px 6.8656px 6.8656px -2.16667px,
    rgba(171, 171, 171, 0.51) 0px 13.6468px 13.6468px -2.70833px,
    rgba(171, 171, 171, 0.35) 0px 30px 30px -3.25px;
  --frameworks-icon-radius: 10px;
  --section-badge-radius: var(--orb-badge-radius);
  --section-badge-padding: 6px 12px;
  /* Typography — inherits from sapphirex.css; OrbAI reference fallbacks */
  --font-body: "Inter", sans-serif;
  --font-display: "Inter", sans-serif;
  --font-size-body: 16px;
  --font-line-height-body: 1.5;
  --font-size-cta: 14px;
  --font-size-cta-sm: 12px;
  --font-weight-cta: 500;
  --font-line-height-cta: 1.6;
  --font-letter-spacing-cta: 0em;
  --font-size-nav: 14px;
  --font-weight-nav: 400;
  --font-line-height-nav: 1.6;
  --font-size-h2: clamp(36px, 4.5vw, 56px);
  --font-size-section-intro: 16px;
}

body {
  background: var(--bg);
  color: var(--text-body, var(--text-1));
  font-family: var(--font-body, "Inter", var(--sans));
  font-size: var(--font-size-body, 16px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--font-line-height-body, 1.5);
  letter-spacing: var(--font-letter-spacing, 0em);
}

/* ── NAV ─────────────────────────────────────────────────────────── */
.subpage .top-bar {
  background: var(--bg-white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* ── HERO ─────────────────────────────────────────────────────────── */
.home .hero {
  background: var(--bg);
}
/* Hero CTAs — match site-wide OrbAI pills (#contact, dock, service cards) */
.home .hero .btn-primary,
.hero .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 24px !important;
  font-family: var(--font-body, "Inter", var(--sans)) !important;
  font-size: var(--font-size-cta, 14px) !important;
  font-weight: var(--font-weight-cta, 500) !important;
  line-height: var(--font-line-height-cta, 1.6) !important;
  letter-spacing: var(--font-letter-spacing-cta, 0em) !important;
  text-transform: none !important;
  color: #ffffff !important;
  background: rgb(0, 0, 0) !important;
  border: none !important;
  border-radius: var(--orb-cta-radius) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--orb-hero-cta-primary-shadow) !important;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    background 0.25s var(--ease);
}
.home .hero .btn-primary::before,
.home .hero .btn-primary::after,
.hero .btn-primary::before,
.hero .btn-primary::after {
  display: none !important;
}
.home .hero .btn-primary:hover:not(:disabled),
.hero .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  background: rgb(0, 0, 0) !important;
  color: #ffffff !important;
  box-shadow: var(--orb-hero-cta-primary-shadow-hover) !important;
}
.home .hero .btn-primary:active:not(:disabled),
.hero .btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--btn-shadow-active) !important;
}
.home .hero .btn-ghost,
.hero .btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 24px !important;
  font-family: var(--font-body, "Inter", var(--sans)) !important;
  font-size: var(--font-size-cta, 14px) !important;
  font-weight: var(--font-weight-cta, 500) !important;
  line-height: var(--font-line-height-cta, 1.6) !important;
  letter-spacing: var(--font-letter-spacing-cta, 0em) !important;
  text-transform: none !important;
  color: #000000 !important;
  background: var(--orb-hero-cta-secondary-bg) !important;
  border: 1px solid var(--orb-hero-cta-secondary-border) !important;
  border-radius: var(--orb-cta-radius) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--orb-hero-cta-secondary-shadow) !important;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    background 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.home .hero .btn-ghost::before,
.home .hero .btn-ghost::after,
.hero .btn-ghost::before,
.hero .btn-ghost::after {
  display: none !important;
}
.home .hero .btn-ghost:hover,
.hero .btn-ghost:hover {
  transform: translateY(-1px);
  background: var(--orb-cta-ghost-bg) !important;
  color: #000000 !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: var(--orb-hero-cta-secondary-shadow-hover) !important;
}
.home .hero .btn-ghost:active,
.hero .btn-ghost:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--btn-shadow-ghost-active) !important;
}
.home .hero .btn-primary .btn-icon,
.home .hero .btn-ghost .btn-icon,
.hero .btn-primary .btn-icon,
.hero .btn-ghost .btn-icon {
  width: 16px;
  height: 16px;
}

.dock-nav {
  background-color: var(--orb-box-bg);
  border: 1px solid var(--rule);
  border-radius: var(--orb-box-radius);
  box-shadow: var(--orb-box-shadow);
}
.dock-nav-links a {
  font-family: var(--font-body, "Inter", var(--sans));
  font-size: var(--font-size-nav, 14px);
  font-weight: var(--font-weight-nav, 400);
  line-height: var(--font-line-height-nav, 1.6);
  letter-spacing: var(--font-letter-spacing, 0em);
  color: var(--text-2);
}
.dock-nav-links a:hover,
.dock-nav-links a.active {
  color: #000000;
}

/* ── BUTTONS (ORB CTA) ───────────────────────────────────────────── */
.btn-primary,
.service-row-link,
.dock-cta,
.contact-submit.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 24px !important;
  font-family: var(--font-body, "Inter", var(--sans)) !important;
  font-size: var(--font-size-cta, 14px) !important;
  font-weight: var(--font-weight-cta, 500) !important;
  line-height: var(--font-line-height-cta, 1.6) !important;
  letter-spacing: var(--font-letter-spacing-cta, 0em) !important;
  color: #ffffff !important;
  background: rgb(0, 0, 0) !important;
  border: none !important;
  border-radius: var(--orb-cta-radius) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--orb-btn-shadow) !important;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    background 0.25s var(--ease);
}
.dock-cta {
  padding: 12px 24px !important;
  font-size: var(--font-size-cta, 14px) !important;
}
/* Service card CTAs — hero secondary (white) style */
.services-bento .service-card-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 18px !important;
  font-family: var(--font-body, "Inter", var(--sans)) !important;
  font-size: var(--font-size-cta, 14px) !important;
  font-weight: var(--font-weight-cta, 500) !important;
  line-height: var(--font-line-height-cta, 1.6) !important;
  letter-spacing: var(--font-letter-spacing-cta, 0em) !important;
  color: #000000 !important;
  background: var(--orb-hero-cta-secondary-bg) !important;
  border: 1px solid var(--orb-hero-cta-secondary-border) !important;
  border-radius: var(--orb-cta-radius) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--orb-hero-cta-secondary-shadow) !important;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    background 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.services-bento .service-card-link::before,
.services-bento .service-card-link::after {
  display: none !important;
}
.services-bento .service-card:hover .service-card-link {
  transform: translateY(-1px);
  background: var(--orb-cta-ghost-bg) !important;
  color: #000000 !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: var(--orb-hero-cta-secondary-shadow-hover) !important;
}
.services-bento .service-card:active .service-card-link {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--btn-shadow-ghost-active) !important;
}
.btn-primary::before,
.btn-primary::after,
.service-row-link::before,
.service-row-link::after,
.dock-cta::before,
.dock-cta::after {
  display: none !important;
}
.btn-primary:hover:not(:disabled),
.service-row:hover .service-row-link,
.dock-cta:hover,
.contact-submit.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  background: rgb(0, 0, 0) !important;
  color: #ffffff !important;
  box-shadow: var(--orb-btn-shadow-hover) !important;
}
.btn-primary:active:not(:disabled),
.service-row:active .service-row-link,
.dock-cta:active,
.contact-submit.btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--btn-shadow-active) !important;
}
.btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 24px !important;
  font-family: var(--font-body, "Inter", var(--sans)) !important;
  font-size: var(--font-size-cta, 14px) !important;
  font-weight: var(--font-weight-cta, 500) !important;
  line-height: var(--font-line-height-cta, 1.6) !important;
  letter-spacing: var(--font-letter-spacing-cta, 0em) !important;
  color: #000000 !important;
  background: var(--orb-cta-ghost-bg) !important;
  border: 1px solid var(--orb-cta-ghost-border) !important;
  border-radius: var(--orb-cta-radius) !important;
  box-shadow: var(--orb-cta-ghost-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    background 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.btn-ghost::before,
.btn-ghost::after {
  display: none !important;
}
.btn-ghost:hover {
  transform: translateY(-1px);
  background: var(--orb-cta-ghost-bg) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  color: #000000 !important;
  box-shadow: var(--btn-shadow-secondary-hover) !important;
}
.btn-ghost:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--btn-shadow-ghost-active) !important;
}

@media (max-width: 640px) {
  .btn-primary,
  .btn-ghost,
  .service-row-link,
  .dock-cta,
  .contact-submit.btn-primary,
  .home .hero .btn-primary,
  .home .hero .btn-ghost,
  .hero .btn-primary,
  .hero .btn-ghost,
  .services-bento .service-card-link,
  .insight-read:not(.insight-read--soon) {
    font-size: var(--font-size-cta-sm, 12px) !important;
  }
}

/* ── CHAT LAUNCHER (ORB) — white ghost CTA (btn-ghost / insight-read) ─ */
.sx-chat-launcher {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  font-family: var(--font-body, "Inter", var(--sans)) !important;
  font-size: var(--font-size-cta, 14px) !important;
  font-weight: var(--font-weight-cta, 500) !important;
  line-height: var(--font-line-height-cta, 1.6) !important;
  letter-spacing: var(--font-letter-spacing-cta, 0em) !important;
  color: var(--text-1) !important;
  background: var(--orb-cta-ghost-bg) !important;
  border: 1px solid var(--orb-cta-ghost-border) !important;
  border-radius: var(--orb-cta-radius) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--orb-cta-ghost-shadow) !important;
  text-transform: none !important;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    background 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.sx-chat-launcher::before {
  display: none !important;
}
.sx-chat-launcher:hover {
  transform: translateY(-1px);
  background: var(--orb-cta-ghost-bg) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  color: var(--text-1) !important;
  box-shadow: var(--btn-shadow-secondary-hover) !important;
}
.sx-chat-launcher:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--btn-shadow-ghost-active) !important;
}
.sx-chat-launcher.is-open {
  background: var(--orb-cta-ghost-bg) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--orb-cta-ghost-border) !important;
  box-shadow: var(--btn-shadow-secondary-hover) !important;
}
.sx-chat-launcher-icon {
  position: relative;
  z-index: 1;
  width: 18px !important;
  height: 18px !important;
  color: var(--text-1) !important;
}
.sx-chat-launcher-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}
.sx-chat-launcher-text {
  position: relative;
  z-index: 1;
  color: var(--text-1);
  white-space: nowrap;
}

/* Homepage hero ghost only — keep legacy Framer gray stack */
.home .hero .btn-ghost {
  box-shadow: var(--btn-shadow-ghost-legacy) !important;
}
.home .hero .btn-ghost:hover {
  box-shadow: var(--btn-shadow-ghost-legacy) !important;
}

/* Legacy orb hero — kept if re-enabled */
.hero-bg--orb {
  background: var(--bg) !important;
  background-image: none !important;
}
.hero-bg--orb .hero-bg-video,
.hero-bg--orb .hero-bg-scrim {
  display: none !important;
}
.hero-orb-ripples {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255, 255, 255, 0.95) 0%, transparent 62%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(230, 230, 230, 0.55) 0%, transparent 72%),
    radial-gradient(circle at 50% 48%, transparent 18%, rgba(0, 0, 0, 0.018) 19%, transparent 20%),
    radial-gradient(circle at 50% 48%, transparent 28%, rgba(0, 0, 0, 0.015) 29%, transparent 30%),
    radial-gradient(circle at 50% 48%, transparent 38%, rgba(0, 0, 0, 0.012) 39%, transparent 40%),
    radial-gradient(circle at 50% 48%, transparent 48%, rgba(0, 0, 0, 0.01) 49%, transparent 50%),
    radial-gradient(circle at 50% 48%, transparent 58%, rgba(0, 0, 0, 0.008) 59%, transparent 60%);
  animation: orbRipple 12s ease-in-out infinite;
}
.hero-orb-glow {
  position: absolute;
  top: 38%;
  left: 50%;
  width: min(680px, 88vw);
  height: min(680px, 88vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, transparent 68%);
  filter: blur(2px);
  pointer-events: none;
}
@keyframes orbRipple {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.92; }
}

.hero-orb-panel {
  margin: 0 auto;
  width: 100%;
  max-width: min(640px, 94vw);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(44px, 7vw, 80px) clamp(28px, 5vw, 48px);
  border-radius: 50%;
  aspect-ratio: 1;
  justify-content: center;
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 24px 64px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.04);
}
.hero-orb-panel .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin-bottom: 28px;
  background: var(--bg-white);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-2);
  box-shadow: var(--orb-shadow-sm);
}
.hero-orb-panel .hero-title {
  max-width: none;
  margin-bottom: 20px;
  text-align: center;
}
.hero-orb-panel .hero-intelligence {
  font-family: var(--font-display);
  font-size: var(--font-size-h2, clamp(36px, 4.5vw, 56px));
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-1);
}
.hero-orb-panel .hero-rotate {
  font-family: var(--font-display, var(--sans));
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.hero-orb-panel .hero-lead,
.hero-orb-panel .hero-sub {
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-2);
  text-align: center;
}
.hero-orb-panel .hero-actions {
  justify-content: center;
  margin-top: 8px;
}
.hero-orb-panel .hero-trust {
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.hero-orb-panel .hero-trust li {
  padding: 8px 14px;
  background: var(--bg-white);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  box-shadow: var(--orb-shadow-sm);
}

/* ── SECTIONS ────────────────────────────────────────────────────── */
.section-pad {
  background: var(--bg);
}
.section-label::before {
  width: 5px;
  height: 5px;
  background: var(--text-1);
}
.section-label--center {
  margin-left: auto;
  margin-right: auto;
}

/* ── SECTION BADGES (OrbAI CUSTOMERS pill — one source of truth) ─── */
.section-badge,
.section-label,
#frameworks .frameworks-badge,
#why-sapphirex .why-badge,
#experience .experience-badge,
#selected-experience .proof-badge,
#services .services-badge,
.related-section.insights-aligned .services-badge,
#methodology .methodology-label,
.related-section.insights-aligned .methodology-label,
#positioning .position-badge,
#operating-model .why-badge,
#contact .contact-badge,
#founder .founder-badge,
#faq .faq-badge,
#insights .field-notes-badge,
.related-section.insights-aligned .field-notes-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--section-badge-padding);
  margin: 0 auto 20px;
  background: var(--orb-badge-bg);
  border: 1px solid var(--orb-badge-border);
  border-radius: var(--orb-badge-radius);
  font-family: var(--font-body, "Inter", var(--sans));
  font-size: var(--font-size-badge, 11px);
  font-weight: var(--font-weight-badge, 600);
  letter-spacing: var(--font-letter-spacing-badge, 0.12em);
  text-transform: uppercase;
  color: var(--text-2);
  box-shadow: var(--orb-badge-shadow);
}
.availability-badge {
  margin: 0;
  padding: 8px 16px;
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  box-shadow: none;
}
.section-label {
  letter-spacing: 0.1em;
  text-transform: none;
}
#frameworks .frameworks-badge-icon,
#why-sapphirex .why-badge-icon,
#experience .experience-badge-icon,
#selected-experience .proof-badge-icon,
#services .services-badge-icon,
.related-section.insights-aligned .services-badge-icon,
#methodology .methodology-label-icon,
.related-section.insights-aligned .methodology-label-icon,
#positioning .position-badge-icon,
#operating-model .why-badge-icon,
#contact .contact-badge-icon,
#founder .founder-badge-icon,
#faq .faq-badge-icon,
#insights .field-notes-badge-icon,
.related-section.insights-aligned .field-notes-badge-icon {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--orb-badge-icon-size);
  height: var(--orb-badge-icon-size);
  color: var(--text-2);
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.section-header,
.section-header--stack {
  align-items: center;
  text-align: center;
}
.section-header--stack .section-intro-stack {
  text-align: center;
  width: 100%;
  max-width: var(--section-header-text-width, clamp(480px, 58ch, 640px));
  margin-left: auto;
  margin-right: auto;
}

/* OrbAI-style constrained header text column — headline + intro share width */
#operating-model,
#selected-experience,
#services,
#methodology,
#frameworks,
#why-sapphirex {
  --section-header-text-width: clamp(480px, 58ch, 640px);
  --exp-media-radius: 16px;
}

#positioning {
  --section-header-text-width: clamp(400px, 48ch, 540px);
}

.section-header--stack .section-heading:not(.founder-heading),
.section-header--stack .methodology-headline {
  max-width: var(--section-header-text-width, clamp(480px, 58ch, 640px));
  margin-left: auto;
  margin-right: auto;
}

.section-header--stack > .section-intro {
  width: 100%;
  max-width: var(--section-header-text-width, clamp(480px, 58ch, 640px));
  margin-left: auto;
  margin-right: auto;
}

.section-heading:not(.founder-heading),
.methodology-headline,
.founder-heading,
.position-headline {
  font-family: var(--font-display, "Inter", var(--sans));
  font-size: var(--font-size-h2, clamp(36px, 4.5vw, 56px));
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-1);
  max-width: var(--section-header-text-width, clamp(480px, 58ch, 640px));
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-heading em,
.methodology-headline em,
.founder-heading em {
  font-style: normal;
  color: var(--text-1);
}
.section-intro {
  font-family: var(--font-body, "Inter", var(--sans));
  font-size: var(--font-size-section-intro, 16px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--font-line-height-body, 1.5);
  letter-spacing: var(--font-letter-spacing, 0em);
  color: var(--text-2);
}
/* Positioning — editorial centered header + compact hero card */
#positioning .section-header--stack {
  align-items: center;
  text-align: center;
  gap: 0;
  margin-bottom: clamp(28px, 3.5vw, 40px);
  padding-top: 0;
}
#positioning .section-header--stack > div {
  width: 100%;
  text-align: center;
}
#positioning .position-badge {
  width: fit-content;
  margin: 0 auto clamp(16px, 2vw, 22px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#positioning .section-heading.position-headline,
#positioning .position-headline {
  font-family: "Inter", var(--sans);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 500;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: var(--section-header-text-width, clamp(400px, 48ch, 540px));
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: var(--text-1);
}
#positioning .position-statement-group {
  gap: clamp(18px, 2.2vw, 24px);
}
#positioning .position-statement {
  font-family: var(--font-body, "Inter", var(--sans));
  font-size: var(--font-size-section-intro, 16px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--font-line-height-body, 1.5);
  letter-spacing: var(--font-letter-spacing, 0em);
  color: var(--text-2);
}
#positioning .position-hero-card {
  border-radius: var(--orb-box-radius);
  box-shadow: var(--orb-box-shadow);
}
#positioning .position-hero-media {
  background: #f7f7f6;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
#positioning .position-visual-img {
  object-fit: cover;
  filter: grayscale(1) contrast(1.02) brightness(1.02);
}

/* ── DESIGN BOXES (cards) — grey surface matching page bg ──────── */
.trust-item,
.why-card,
.methodology-card,
.insight-card,
.founder-panel,
.contact-next,
.case,
.related-card,
.capability,
.experience-bento .experience-card,
.frameworks-process-card,
.frameworks-grid-item,
.services-bento .service-card,
#operating-model .operating-timeline-card,
.position-hero-card,
.subpage .content-section,
.subpage .related-card,
.subpage .capability,
.subpage .service-investment,
.subpage .field-list li {
  width: 100%;
  background-color: var(--orb-box-bg);
  border: 1px solid var(--rule);
  border-radius: var(--orb-box-radius);
  box-shadow: var(--orb-box-shadow);
  opacity: 1;
}
.faq-list--portal .faq-item {
  box-shadow: var(--faq-item-shadow);
}
#contact a.contact-card,
#contact .contact-form {
  width: 100%;
  background-color: var(--orb-box-bg);
  border: 1px solid var(--rule);
  border-radius: var(--orb-box-radius);
  box-shadow: var(--orb-box-shadow);
}
#positioning.section-pad {
  padding-top: clamp(40px, 5.5vw, 64px);
  padding-bottom: clamp(96px, 12vw, 148px);
}
.insight-card--live,
.related-card {
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.insight-card--live:hover,
.related-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--orb-box-shadow-hover);
  border-color: var(--rule-mid);
}
.industry-card::before {
  display: none !important;
}

/* ── SERVICES BENTO (ORB style) ──────────────────────────────────── */
:root {
  --neu-raised:
    -10px -10px 20px rgba(255, 255, 255, 1),
    10px 10px 20px rgba(0, 0, 0, 0.08);
  --neu-soft:
    -6px -6px 14px rgba(255, 255, 255, 1),
    6px 6px 14px rgba(0, 0, 0, 0.1);
  --neu-inset:
    inset 4px 4px 10px rgba(0, 0, 0, 0.1),
    inset -4px -4px 10px rgba(255, 255, 255, 0.95);
  --service-media-h: clamp(220px, 22vw, 260px);
  --service-media-outer-pad: 0;
  --service-media-radius: var(--orb-box-radius);
  --service-media-surface: var(--orb-box-bg);
  --service-illust-fill: 100%;
  --service-img-shadow: none;
  --service-img-shadow-priority: none;
  --service-img-highlight: none;
}

#services .section-header--stack {
  align-items: center;
  text-align: center;
  gap: 0;
  margin-bottom: clamp(52px, 6.5vw, 80px);
}
#services .section-header--stack > div {
  width: 100%;
  text-align: center;
}
#services .services-badge {
  width: fit-content;
  margin: 0 auto 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#services .section-header--stack .section-intro-stack {
  display: block;
  text-align: center;
  margin-top: clamp(24px, 3vw, 32px);
}
#services .section-header--stack .section-intro-stack p:not(:first-child) {
  display: none;
}
#services .section-header--stack .section-intro-stack .section-intro {
  font-size: var(--font-size-section-intro, 16px);
  line-height: var(--font-line-height-body, 1.5);
  color: var(--text-2);
}

.services-bento {
  --svc-grid-gap: 24px;
  --svc-card-pad: var(--orb-box-pad);
  --svc-inner-gap: var(--orb-inner-gap);
  --svc-card-radius: var(--orb-box-radius);
  --exp-media-radius: var(--orb-box-radius);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-items: stretch;
  gap: var(--svc-grid-gap);
  margin-top: clamp(32px, 5vw, 56px);
}

/* Explicit 12-col placement: 6+6 / 6+6 / 12 — aligned gutters */
.services-bento .service-card:nth-child(1) {
  grid-column: 1 / span 6;
  grid-row: 1;
}
.services-bento .service-card:nth-child(2) {
  grid-column: 7 / span 6;
  grid-row: 1;
}
.services-bento .service-card:nth-child(3) {
  grid-column: 1 / span 6;
  grid-row: 2;
}
.services-bento .service-card:nth-child(4) {
  grid-column: 7 / span 6;
  grid-row: 2;
}
.services-bento .service-card:nth-child(5) {
  grid-column: 1 / span 12;
  grid-row: 3;
}

.services-bento .service-card {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
  position: relative;
  padding: var(--svc-card-pad);
  gap: var(--svc-inner-gap);
  border: 1px solid var(--rule);
  border-radius: var(--svc-card-radius);
  box-shadow: var(--orb-box-shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.services-bento .service-card::before {
  display: none !important;
  content: none !important;
}
.services-bento .service-card:nth-child(n),
.services-bento .service-card:nth-child(3n),
.services-bento .service-card:nth-child(3n + 1),
.services-bento .service-card:nth-child(3n + 2) {
  border-radius: var(--svc-card-radius);
}
.services-bento .service-card:hover,
.services-bento .service-card:nth-child(n):hover,
.services-bento .service-card:nth-child(3n):hover,
.services-bento .service-card:nth-child(3n + 1):hover,
.services-bento .service-card:nth-child(3n + 2):hover {
  transform: translateY(-4px);
  border-color: var(--rule);
  box-shadow: var(--orb-box-shadow-hover);
}

.service-card-visual,
.service-card-media {
  position: relative;
  flex-shrink: 0;
  height: var(--service-media-h);
  min-height: var(--service-media-h);
  max-height: var(--service-media-h);
  padding: var(--service-media-outer-pad);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: var(--orb-box-bg);
  border-bottom: none;
  overflow: hidden;
  box-sizing: border-box;
  container-type: size;
}

.services-bento .service-card-media {
  border-radius: var(--exp-media-radius);
  box-shadow: var(--experience-image-shadow);
  opacity: 1;
  overflow: hidden;
  border: none;
  outline: none;
  padding: 0;
  background: transparent;
}

.services-bento .service-card-media::after {
  content: none;
}

.services-bento .service-card-media img,
.services-bento .service-card-media svg {
  box-shadow: none;
  border: none;
  outline: none;
  background: transparent;
  border-radius: var(--exp-media-radius);
}

.service-card-media::before {
  content: none;
}

.service-card-media::after {
  content: "";
  position: absolute;
  inset: var(--service-media-outer-pad);
  border-radius: var(--service-media-radius);
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0) 38%
  );
  pointer-events: none;
  z-index: 2;
  opacity: 0.35;
}

.service-card-media img,
.service-card-media svg {
  position: relative;
  z-index: 1;
  display: block;
  flex: 1 1 auto;
  width: var(--service-illust-fill);
  height: var(--service-illust-fill);
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--service-media-radius);
  box-shadow: var(--service-img-shadow), var(--service-img-highlight);
  background: var(--service-media-surface);
}

/* Priority services — stronger imagery treatment */
.services-bento .service-card:nth-child(1) .service-card-media,
.services-bento .service-card:nth-child(2) .service-card-media {
  --service-media-h: clamp(240px, 24vw, 280px);
}

/* Secondary services — calmer, minimal treatment */
.services-bento .service-card:nth-child(n+3) .service-card-media img {
  object-position: center center;
}

.service-card-content {
  padding: var(--orb-box-pad);
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-height: 0;
}
.services-bento .service-card-content {
  padding: 0;
}
.service-card-content--horizontal {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.service-card-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.service-card-title {
  font-family: "Inter", var(--sans);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #000000;
}
.service-card-body {
  font-size: 15px;
  line-height: 1.75;
  color: #4a4a4a;
  max-width: none;
}
.service-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 12px;
}
.service-card-price {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-3);
}

.services-bento .service-card-link > * {
  position: relative;
  z-index: 1;
}

/* ── EXPERIENCE BENTO (ORB style) ────────────────────────────────── */
#experience .section-header--stack,
#selected-experience .section-header--stack {
  gap: 0;
  margin-bottom: clamp(52px, 6.5vw, 80px);
}
#experience .section-heading,
#selected-experience .section-heading {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--text-1);
  line-height: 1.12;
}
#experience .section-header--stack .section-intro,
#selected-experience .section-header--stack .section-intro {
  text-align: center;
  margin-top: clamp(36px, 4.8vw, 52px);
  font-family: var(--font-body, "Inter", var(--sans));
  font-size: var(--font-size-section-intro, 16px);
  line-height: var(--font-line-height-body, 1.5);
  color: var(--text-3);
  font-weight: var(--font-weight-regular, 400);
}

.experience-bento {
  --exp-grid-gap: 24px;
  --exp-card-pad: var(--orb-box-pad);
  --exp-inner-gap: var(--orb-inner-gap);
  --exp-media-col: 45%;
  --exp-media-radius: 16px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: var(--exp-grid-gap);
  margin-top: clamp(32px, 5vw, 56px);
}

/* Explicit 12-col placement: 8+4 top, 4+8 bottom */
.experience-bento .experience-card:nth-child(1) {
  grid-column: 1 / span 8;
  grid-row: 1;
}
.experience-bento .experience-card:nth-child(2) {
  grid-column: 9 / span 4;
  grid-row: 1;
}
.experience-bento .experience-card:nth-child(3) {
  grid-column: 1 / span 4;
  grid-row: 2;
}
.experience-bento .experience-card:nth-child(4) {
  grid-column: 5 / span 8;
  grid-row: 2;
}

.experience-bento .experience-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  min-height: 0;
  padding: var(--exp-card-pad);
  overflow: visible;
}

/* Wide cards — mirrored internal grid: content|image vs image|content */
.experience-bento .experience-card--wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--exp-media-col);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--exp-inner-gap);
  align-items: stretch;
}

.experience-bento .experience-card--wide.experience-card--media-start {
  grid-template-columns: var(--exp-media-col) minmax(0, 1fr);
}

.experience-bento .experience-card-media {
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  border-radius: var(--exp-media-radius);
  box-shadow: var(--experience-image-shadow);
  opacity: 1;
  overflow: hidden;
  border: none;
  outline: none;
}

.experience-bento .experience-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--exp-media-radius);
  border: none;
  outline: none;
  box-shadow: none;
}

.experience-bento .experience-card--wide .experience-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
  min-height: 0;
}

/* Narrow text-only cards — identical padding & top-aligned structure */
.experience-bento .experience-card:not(.experience-card--wide) {
  justify-content: flex-start;
}

.experience-bento .experience-card:not(.experience-card--wide) .experience-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.experience-bento .experience-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  max-width: 100%;
}

#experience .industry-tag,
#selected-experience .industry-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 8px;
}

#experience .industry-title,
#selected-experience .industry-title {
  font-family: "Inter", var(--sans);
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 6px;
  line-height: 1.28;
}

#experience .industry-copy,
#selected-experience .industry-copy {
  max-width: 42ch;
  width: 100%;
}

.experience-bento .experience-card:not(.experience-card--wide) .industry-copy {
  max-width: none;
}

#experience .industry-desc,
#selected-experience .industry-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.68;
  margin: 0;
}

#experience .industry-copy .industry-desc + .industry-desc,
#selected-experience .industry-copy .industry-desc + .industry-desc {
  margin-top: 0.55em;
}

.experience-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 0 12px;
  align-self: flex-start;
  border-radius: 11px;
  background: #141414;
  color: #fff;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 1px 0 0 rgba(255, 255, 255, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.12);
}

.experience-feature-icon svg {
  display: block;
  width: 17px;
  height: 17px;
}

.methodology-card-num {
  display: block;
  color: var(--text-3) !important;
}
.methodology-card-title {
  font-family: "Inter", var(--sans);
  font-weight: 600;
}

/* ── TIMELINE SECTIONS — grey cards, connector rail ────────────── */
#methodology .methodology-card,
#operating-model .operating-timeline-card {
  background-color: var(--orb-box-bg);
  transition: none;
}
#methodology .methodology-card:hover,
#operating-model .operating-timeline-card:hover {
  transform: none;
  box-shadow: var(--orb-box-shadow);
  border-color: var(--rule);
}

/* ── METHODOLOGY (homepage) ────────────────────────────────────── */
#methodology .section-header--stack {
  align-items: center;
  text-align: center;
  gap: 0;
  margin-bottom: clamp(52px, 6.5vw, 80px);
}
#methodology .section-header--stack > div {
  width: 100%;
  text-align: center;
}
#methodology .methodology-label {
  width: fit-content;
  margin: 0 auto 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#methodology .section-header--stack .section-intro-stack {
  margin-top: clamp(24px, 3vw, 32px);
  text-align: center;
}
#methodology .section-header--stack .section-intro-stack .section-intro {
  font-size: var(--font-size-section-intro, 16px);
  line-height: var(--font-line-height-body, 1.5);
  color: var(--text-2);
}
#methodology .methodology-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 5vw, 56px);
}
#methodology .methodology-cta {
  margin-top: 0;
}
#methodology .methodology-cards {
  --methodology-rail-offset: clamp(28px, 3vw, 36px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: none;
  gap: 18px;
  position: relative;
  padding-top: var(--methodology-rail-offset);
}
/* Horizontal connector rail (desktop, 4 columns) */
#methodology .methodology-cards::before {
  content: "";
  position: absolute;
  top: 11px;
  left: calc(12.5% + 4px);
  right: calc(12.5% + 4px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rule-mid) 6%,
    var(--rule-mid) 94%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}
#methodology .methodology-card {
  position: relative;
  padding: var(--orb-box-pad);
  z-index: 1;
}
/* Step node on connector rail */
#methodology .methodology-card::after {
  content: "";
  position: absolute;
  top: calc(var(--methodology-rail-offset, 32px) * -1 + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-white);
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 0 0 4px var(--bg);
  pointer-events: none;
  z-index: 2;
}
#methodology .methodology-card-icon {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 0 16px;
  color: rgba(0, 0, 0, 0.32);
}
#methodology .methodology-card-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}
#methodology .methodology-card-num {
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(38px, 4.2vw, 50px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(0, 0, 0, 0.40);
}
#methodology .methodology-card-title {
  font-family: "Inter", var(--sans);
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 10px;
}
#methodology .methodology-card-text {
  font-size: 13px;
  line-height: 1.62;
  color: var(--text-2);
}
/* ── OPERATING MODEL PRINCIPLES (homepage) ───────────────────────── */
#operating-model .section-header--stack {
  align-items: center;
  text-align: center;
  gap: 0;
  margin-bottom: clamp(48px, 6vw, 72px);
}
#operating-model .section-header--stack > div {
  width: 100%;
  text-align: center;
}
#operating-model .why-badge,
#why-sapphirex .why-badge,
#operating-model .methodology-label,
#operating-model .methodology-label {
  width: fit-content;
  margin: 0 auto 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#operating-model .section-header--stack .section-intro-stack {
  margin-top: clamp(24px, 3vw, 32px);
  text-align: center;
}
#operating-model .section-header--stack .section-intro-stack .section-intro {
  font-size: var(--font-size-section-intro, 16px);
  line-height: var(--font-line-height-body, 1.5);
  color: var(--text-2);
}
#operating-model .operating-timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: min(720px, 100%);
  position: relative;
}
#operating-model .operating-timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--rule-mid) 6%,
    var(--rule-mid) 94%,
    transparent
  );
  pointer-events: none;
}
#operating-model .operating-timeline-step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
  position: relative;
  padding-bottom: clamp(28px, 4vw, 44px);
}
#operating-model .operating-timeline-step:last-child {
  padding-bottom: 0;
}
#operating-model .operating-timeline-marker {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-top: clamp(32px, 3.5vw, 40px);
}
#operating-model .operating-timeline-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-white);
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 0 0 4px var(--bg);
}
#operating-model .operating-timeline-card {
  padding: var(--orb-box-pad);
}
#operating-model .operating-timeline-icon {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 0 16px;
  color: rgba(0, 0, 0, 0.32);
}
#operating-model .operating-timeline-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}
#operating-model .operating-timeline-num {
  display: block;
  margin: 0 0 clamp(10px, 1.4vw, 14px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(32px, 3.4vw, 42px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(0, 0, 0, 0.54);
}
#operating-model .operating-timeline-title {
  font-family: "Inter", var(--sans);
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--text-1);
}
#operating-model .operating-timeline-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.72);
  max-width: 52ch;
}

/* ── SELECTED EXPERIENCE ───────────────────────────────────────────── */
#selected-experience .section-header--stack {
  align-items: center;
  text-align: center;
}
#selected-experience .proof-badge {
  width: fit-content;
  margin: 0 auto 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#selected-experience .section-heading {
  max-width: var(--section-header-text-width, clamp(480px, 58ch, 640px));
  margin-left: auto;
  margin-right: auto;
}
#selected-experience .experience-bento {
  --exp-grid-gap: clamp(18px, 2.2vw, 24px);
  --exp-card-pad: var(--orb-box-pad);
  --exp-inner-gap: var(--orb-inner-gap);
  margin-top: 0;
}
#selected-experience .experience-bento .experience-card {
  min-height: clamp(240px, 26vw, 300px);
}
#selected-experience .experience-bento .experience-card--wide {
  min-height: clamp(240px, 26vw, 300px);
}
#selected-experience .experience-bento .experience-card-content {
  flex: 1;
  width: 100%;
  text-align: left;
}
#selected-experience .experience-bento .experience-card--wide .experience-card-content {
  justify-content: flex-start;
  padding-right: 0;
}
#selected-experience .experience-bento .experience-card:not(.experience-card--wide) .experience-card-content {
  min-height: 100%;
}
#selected-experience .industry-tag {
  margin-bottom: 6px;
}
#selected-experience .industry-title {
  font-size: clamp(20px, 2.2vw, 24px);
  margin-bottom: 8px;
}
#selected-experience .industry-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 44ch;
}
#selected-experience .experience-bento .experience-card:not(.experience-card--wide) .industry-copy {
  max-width: none;
}
#selected-experience .industry-desc {
  font-size: 14px;
  line-height: 1.65;
}
#selected-experience .industry-copy .industry-desc + .industry-desc {
  margin-top: 0.5em;
}

.trust-grid {
  gap: 16px;
}
.trust-item h3,
.industry-title {
  font-family: "Inter", var(--sans);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── WHY SAPPHIREX (homepage) ──────────────────────────────────── */
#why-sapphirex .section-header--stack {
  align-items: center;
  text-align: center;
  gap: 0;
  margin-bottom: clamp(48px, 6vw, 72px);
}
#why-sapphirex .section-header--stack > div {
  width: 100%;
  text-align: center;
}
#why-sapphirex .section-intro {
  margin-top: clamp(20px, 2.5vw, 28px);
  font-size: clamp(16px, 1.65vw, 18px);
  line-height: 1.65;
}
#why-sapphirex .why-sapphirex-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.5vw, 32px);
  margin: 0;
}
#why-sapphirex .why-sapphirex-card {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
  padding: var(--orb-box-pad);
  gap: var(--orb-inner-gap);
  overflow: visible;
  background-color: var(--orb-box-bg);
  border: 1px solid var(--rule);
  border-radius: var(--orb-box-radius);
  box-shadow: var(--orb-box-shadow);
}
#why-sapphirex .why-sapphirex-card-visual {
  position: relative;
  flex-shrink: 0;
  height: var(--service-media-h);
  min-height: var(--service-media-h);
  max-height: var(--service-media-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--exp-media-radius);
  box-shadow: var(--experience-image-shadow);
  opacity: 1;
  overflow: hidden;
  border: none;
  outline: none;
  padding: 0;
  background: #f2f2f2;
  box-sizing: border-box;
  container-type: size;
}
#why-sapphirex .why-sapphirex-card-visual::after {
  content: none;
}
#why-sapphirex .why-sapphirex-card-visual img {
  position: relative;
  z-index: 1;
  display: block;
  flex: 1 1 auto;
  width: var(--service-illust-fill);
  height: var(--service-illust-fill);
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center center;
  border-radius: var(--exp-media-radius);
  box-shadow: none;
  border: none;
  outline: none;
  background: #f2f2f2;
}
#why-sapphirex .why-sapphirex-card-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 14px);
  flex: 1;
  min-height: 0;
}
#why-sapphirex .why-sapphirex-card h3 {
  font-family: "Inter", var(--sans);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--text-1);
  margin: 0 0 clamp(10px, 1.2vw, 14px);
  text-align: center;
}
#why-sapphirex .why-sapphirex-card p {
  font-family: "Inter", var(--sans);
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--text-2);
  margin: 0;
  text-align: center;
}
@media (max-width: 900px) {
  #why-sapphirex .why-sapphirex-grid {
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 24px);
  }
}

/* ── FOUNDER ─────────────────────────────────────────────────────── */
.founder-section {
  background: var(--bg);
}
.founder-panel {
  overflow: hidden;
}
.founder-lead {
  font-family: "Inter", var(--sans);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.founder-credentials--prominent {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.founder-credentials--prominent li {
  font-size: 13px;
  padding: 11px 18px;
  color: var(--text-1);
  background: var(--bg-white);
  border-color: var(--rule-mid);
}
.founder-name {
  font-family: "Inter", var(--sans);
  font-weight: 600;
}

/* ── FRAMEWORKS / CASE ───────────────────────────────────────────── */
.case {
  padding: var(--orb-box-pad);
}
.case-title a {
  font-family: "Inter", var(--sans);
  font-weight: 600;
}

/* ── CONTACT ─────────────────────────────────────────────────────── */
.contact-section {
  background: var(--bg);
}
#contact .contact-header {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 52px);
}
#contact .contact-heading {
  font-family: "Inter", var(--sans);
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-1);
  margin: 0 0 16px;
  text-align: center;
}
#contact .contact-subtitle {
  font-family: "Inter", var(--sans);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.65;
  color: var(--text-2);
  max-width: 42ch;
  margin: 0 auto;
  text-align: center;
}
#contact .contact-next-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.03em;
  color: rgba(0, 0, 0, 0.54);
}

/* OrbAI-style layered edge into footer — soft elevated depth above footer */
#contact.contact-section,
.subpage .related-section.insights-aligned {
  position: relative;
  z-index: 2;
  border-bottom-left-radius: clamp(24px, 4vw, 32px);
  border-bottom-right-radius: clamp(24px, 4vw, 32px);
  box-shadow: rgba(0, 0, 0, 0.2) 1px 20px 30px -12px;
  margin-bottom: -1px;
}
.contact-form .form-field input,
.contact-form .form-field select,
.contact-form .form-field textarea {
  background-color: var(--bg-white);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: none;
}
.contact-form .form-field input:focus,
.contact-form .form-field textarea:focus {
  border-color: var(--text-1);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}
.contact-form .form-field select:focus,
.contact-form .custom-select__trigger:focus {
  border-color: var(--text-1);
  box-shadow: none;
}
.contact-form .custom-select__trigger {
  background-color: var(--bg-white);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: none;
}
.contact-form .custom-select__menu {
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: none;
}
.contact-form .form-field input:hover,
.contact-form .form-field select:hover,
.contact-form .form-field textarea:hover,
.contact-form .custom-select__trigger:hover {
  border-color: var(--rule);
}

/* Contact info cards + form — OrbAI gray surface cards */
#contact a.contact-card:hover {
  transform: translateY(-1px);
  background-color: var(--orb-box-bg) !important;
  border-color: var(--rule);
  box-shadow: var(--orb-box-shadow-hover);
}
#contact a.contact-card:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--orb-box-shadow);
}

/* ── FAQ (OrbAI neumorphic accordion) ────────────────────────────── */
#faq.faq-section {
  background-color: var(--faq-bg);
}
#faq .faq-header {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 52px);
}
#faq .faq-heading {
  font-family: "Inter", var(--sans);
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-1);
  margin: 0 0 16px;
  text-align: center;
}
#faq .faq-subtitle {
  font-family: "Inter", var(--sans);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.65;
  color: var(--text-2);
  max-width: 42ch;
  margin: 0 auto;
  text-align: center;
}
#faq .faq-list--portal {
  max-width: min(720px, 100%);
  margin: clamp(32px, 5vw, 48px) auto 0;
  gap: 14px;
}
#faq .faq-list--portal .faq-item {
  border: 1px solid var(--rule);
  background-color: var(--orb-box-bg);
  border-radius: var(--orb-box-radius);
  box-shadow: var(--orb-box-shadow);
  padding: 0 var(--orb-box-pad);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
#faq .faq-list--portal .faq-item.open {
  border-color: var(--rule);
  background-color: var(--orb-box-bg);
  box-shadow: var(--orb-box-shadow);
}
#faq .faq-list--portal .faq-item:not(.open):hover {
  border-color: var(--rule);
  background-color: var(--orb-box-bg);
  transform: translateY(-2px);
  box-shadow: var(--orb-box-shadow-hover);
}
#faq .faq-list--portal .faq-q {
  padding: clamp(12px, 1.5vw, 16px) 0;
  font-family: "Inter", var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-1);
}
#faq .faq-list--portal .faq-icon {
  width: auto;
  height: auto;
  border: none;
  background: none;
  border-radius: 0;
  color: var(--text-2);
  transition: transform 0.3s var(--ease);
}
#faq .faq-list--portal .faq-icon::before,
#faq .faq-list--portal .faq-icon::after {
  display: none;
}
#faq .faq-list--portal .faq-item.open .faq-icon {
  transform: rotate(180deg);
}
#faq .faq-list--portal .faq-a-inner {
  padding-bottom: clamp(20px, 2.5vw, 26px);
  font-family: "Inter", var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
}
@media (max-width: 640px) {
  #faq .faq-list--portal .faq-q {
    align-items: flex-start;
    gap: 12px;
  }
  #faq .faq-list--portal .faq-icon {
    margin-top: 2px;
  }
}

/* ── FOOTER ──────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--bg-white);
  border-top: none;
}
.footer-bottom {
  border-top: 1px solid var(--rule);
  color: var(--text-3);
}

/* ── INSIGHTS / FIELD NOTES ──────────────────────────────────────── */
.related-section.insights-aligned {
  background: var(--bg);
  padding: clamp(72px, 10vw, 100px) 0 clamp(48px, 7vw, 72px);
  border-top: 1px solid var(--rule);
}
#insights .insights-header,
#insights .field-notes-header,
.related-section.insights-aligned .insights-header,
.related-section.insights-aligned .field-notes-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  margin-bottom: clamp(36px, 5vw, 52px);
}
#insights .insights-heading,
.related-section.insights-aligned .insights-heading {
  margin: 0;
  font-family: "Inter", var(--sans);
  font-size: clamp(40px, 5.5vw, 60px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text-1);
  line-height: 1.06;
}
#insights .insights-heading em,
.related-section.insights-aligned .insights-heading em {
  font-style: normal;
  color: var(--text-1);
}
#insights .insight-cat,
.related-section.insights-aligned .insight-cat {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}
#insights .insight-title,
.related-section.insights-aligned .insight-title {
  font-family: "Inter", var(--sans);
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-1);
  margin: 0 0 10px;
  line-height: 1.3;
}
#insights .insight-card--live::before,
.related-section.insights-aligned .insight-card--live::before {
  display: none !important;
}
#insights .insight-card--live:nth-child(odd):hover,
#insights .insight-card--live:nth-child(even):hover,
.related-section.insights-aligned .insight-card--live:nth-child(odd):hover,
.related-section.insights-aligned .insight-card--live:nth-child(even):hover {
  border-color: var(--rule-mid);
  transform: translateY(-3px);
  box-shadow: var(--orb-box-shadow-hover);
}
#insights .insight-card-footer,
.related-section.insights-aligned .insight-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 12px;
}
#insights .insight-card-footer .insight-status,
.related-section.insights-aligned .insight-card-footer .insight-status {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-3);
}
#insights .insight-card-footer .insight-read:only-child,
.related-section.insights-aligned .insight-card-footer .insight-read:only-child {
  margin-left: auto;
}
.insight-read:not(.insight-read--soon) {
  font-family: var(--font-body, "Inter", var(--sans)) !important;
  font-size: var(--font-size-cta, 14px) !important;
  font-weight: var(--font-weight-cta, 500) !important;
  line-height: var(--font-line-height-cta, 1.6) !important;
  letter-spacing: var(--font-letter-spacing-cta, 0em) !important;
  color: #000000 !important;
  background: var(--orb-cta-ghost-bg) !important;
  border: 1px solid var(--orb-cta-ghost-border) !important;
  border-radius: var(--orb-cta-radius) !important;
  box-shadow: var(--btn-shadow-secondary) !important;
}
#insights .insight-card--live:hover .insight-read:not(.insight-read--soon),
.related-section.insights-aligned .insight-card--live:hover .insight-read:not(.insight-read--soon) {
  transform: translateY(-1px);
  background: var(--orb-cta-ghost-bg) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  color: #000000 !important;
  box-shadow: var(--btn-shadow-secondary-hover) !important;
}
#insights .insights-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  margin-top: clamp(24px, 3vw, 32px);
  background-color: var(--orb-box-bg);
  opacity: 1;
  border-radius: var(--insights-toggle-radius, 34px);
  box-shadow: var(--orb-box-shadow);
}
#insights .insights-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: calc(var(--insights-toggle-radius, 34px) - 5px);
  background: transparent;
  font-family: "Inter", var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.2s var(--ease);
}
#insights .insights-filter-btn:hover:not(.is-active) {
  color: var(--text-1);
}
#insights .insights-filter-btn.is-active {
  background: var(--text-1);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.12);
}
#insights .insights-filter-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#insights .insights-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
#insights .insights-filter-btn.is-active .insights-filter-count {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
#insights .insights-filter-btn:not(.is-active) .insights-filter-count {
  background: var(--bg-white);
  color: var(--text-3);
  box-shadow: var(--neu-inset);
}
#insights .insights-grid,
.related-section.insights-aligned .insights-grid {
  margin-top: clamp(8px, 2vw, 16px);
}
.subpage .related-section.insights-aligned .insight-card {
  margin-bottom: 0;
  padding: var(--orb-box-pad);
}
#insights .insight-card[data-status][hidden] {
  display: none !important;
}
#insights[data-insights-active="forthcoming"] .insight-card--soon {
  opacity: 1;
}

/* ── SUBPAGES ────────────────────────────────────────────────────── */
.subpage .article-header {
  background: var(--bg);
}

.subpage.field-note-page .article-header {
  background: transparent;
}
.subpage .article-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
}
.subpage .article-title em {
  font-style: italic;
  color: var(--text-1);
}
.subpage .page-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.018em;
}
.subpage .page-deck {
  font-family: var(--serif);
  font-style: italic;
}
.subpage .section-title {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-1);
}
.subpage .section-title em {
  font-style: normal;
  color: var(--text-1);
}
.subpage .content-section,
.subpage .related-card,
.subpage .capability,
.subpage .service-investment,
.subpage .field-list li {
  padding: var(--orb-box-pad);
  margin-bottom: 16px;
}
.subpage .article-meta .category,
.subpage .section-eyebrow {
  display: inline-flex;
  padding: 8px 16px;
  background: var(--bg-white);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  box-shadow: var(--orb-shadow-sm);
}
.subpage .top-bar {
  background: var(--bg-white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

@media (max-width: 1024px) {
  :root {
    --orb-box-pad: clamp(20px, 2.2vw, 28px);
    --orb-inner-gap: 20px;
    --service-media-h: clamp(200px, 26vw, 230px);
    --service-media-outer-pad: 0;
  }

  .services-bento {
    grid-template-columns: 1fr;
  }
  .services-bento .service-card,
  .services-bento .service-card:nth-child(n) {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .experience-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .experience-bento .experience-card,
  .experience-bento .experience-card:nth-child(n) {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .experience-bento .experience-card--wide,
  .experience-bento .experience-card--wide.experience-card--media-start {
    display: flex;
    flex-direction: column;
    gap: var(--exp-inner-gap);
  }
  .experience-bento .experience-card--wide .experience-card-media {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
    order: -1;
  }
  .experience-bento .experience-card--wide .experience-card-content {
    justify-content: flex-start;
  }
  #experience .industry-copy,
  #selected-experience .industry-copy {
    max-width: none;
  }
}

@media (max-width: 640px) {
  :root {
    --orb-box-pad: clamp(18px, 4vw, 24px);
    --orb-inner-gap: 16px;
    --service-media-h: clamp(180px, 40vw, 210px);
    --service-media-outer-pad: 0;
  }
}

@media (max-width: 768px) {
  .hero-orb-panel {
    border-radius: 32px;
    aspect-ratio: auto;
    min-height: auto;
  }
  .trust-grid {
    grid-template-columns: 1fr;
  }
  #operating-model .operating-timeline::before {
    left: 11px;
  }
  #operating-model .operating-timeline-step {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 16px;
    padding-bottom: 24px;
  }
  #operating-model .operating-timeline-marker {
    padding-top: 28px;
  }
  #operating-model .operating-timeline-dot {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 3px var(--bg);
  }
  #operating-model .operating-timeline-card {
    padding: var(--orb-box-pad);
  }
  #operating-model .operating-timeline-num {
    font-size: clamp(28px, 8vw, 36px);
    margin-bottom: 10px;
  }
  /* Methodology: vertical timeline on mobile */
  #methodology .methodology-cards {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0;
    padding-left: 32px;
  }
  #methodology .methodology-cards::before {
    display: block;
    top: 8px;
    bottom: 8px;
    left: 11px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(
      180deg,
      transparent 0%,
      var(--rule-mid) 4%,
      var(--rule-mid) 96%,
      transparent 100%
    );
  }
  #methodology .methodology-card {
    margin-bottom: clamp(20px, 4vw, 28px);
  }
  #methodology .methodology-card:last-child {
    margin-bottom: 0;
  }
  #methodology .methodology-card::after {
    display: block;
    top: clamp(32px, 3.5vw, 40px);
    left: -32px;
    transform: none;
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 3px var(--bg);
  }
  #methodology .methodology-card-num {
    font-size: clamp(36px, 10vw, 44px);
    margin-bottom: 14px;
  }

  #insights .insights-filter-btn {
    padding: 9px 14px;
    font-size: 12px;
  }
}

/* ── FRAMEWORKS GRID (7 thinking tools) ──────────────────────────── */

#frameworks .section-header--stack .section-intro {
  text-align: center;
  margin: 16px auto 0;
  font-size: var(--font-size-section-intro, 16px);
  line-height: var(--font-line-height-body, 1.5);
  color: var(--text-2);
}

.frameworks-grid {
  list-style: none;
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: clamp(18px, 2vw, 24px);
  row-gap: clamp(28px, 3.5vw, 40px);
}

.frameworks-grid-item {
  display: flex;
  flex-direction: column;
  min-height: clamp(152px, 16vw, 176px);
  padding: var(--orb-box-pad);
}

.frameworks-grid-item:nth-child(1),
.frameworks-grid-item:nth-child(2),
.frameworks-grid-item:nth-child(3) {
  grid-column: span 2;
}

.frameworks-grid-item:nth-child(4),
.frameworks-grid-item:nth-child(5) {
  grid-column: span 3;
}

.frameworks-grid-item:nth-child(6) {
  grid-column: 1 / span 2;
}

.frameworks-grid-item:nth-child(7),
.frameworks-grid-item--center {
  grid-column: 3 / span 4;
}

.frameworks-grid-icon {
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 0;
  width: min-content;
  height: min-content;
  padding: 10px 12px;
  display: flex;
  position: relative;
  overflow: visible;
  background: var(--frameworks-icon-bg);
  border-radius: var(--frameworks-icon-radius);
  box-shadow: var(--frameworks-icon-shadow);
  opacity: 1;
  color: #fff;
  margin-bottom: clamp(16px, 2vw, 22px);
}

.frameworks-grid-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.frameworks-grid-title {
  font-family: "Inter", var(--sans);
  font-size: clamp(17px, 1.65vw, 20px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.22;
  color: var(--text-1);
  margin: 0 0 clamp(10px, 1.2vw, 14px);
}

.frameworks-grid-desc {
  font-family: "Inter", var(--sans);
  font-size: clamp(12.5px, 1.1vw, 13.5px);
  font-weight: 400;
  line-height: 1.72;
  color: var(--text-3);
  margin: 0;
  max-width: 44ch;
}

@media (max-width: 1024px) {
  #methodology .methodology-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 0;
    gap: 18px;
  }
  /* Hide horizontal rail when cards wrap to 2 columns */
  #methodology .methodology-cards::before,
  #methodology .methodology-card::after {
    display: none;
  }

  .frameworks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(22px, 3vw, 32px);
  }

  .frameworks-grid-item:nth-child(n) {
    grid-column: auto;
    min-height: clamp(148px, 22vw, 168px);
  }

  .frameworks-grid-item:nth-child(7),
  .frameworks-grid-item--center {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .frameworks-grid {
    grid-template-columns: 1fr;
    row-gap: clamp(18px, 4vw, 24px);
  }

  .frameworks-grid-item:nth-child(n) {
    min-height: 0;
  }
}

/* Legacy frameworks process (subpages) */
.frameworks-process {
  list-style: none;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  position: relative;
}

/* Horizontal connector rail (desktop) */
.frameworks-process::before {
  content: "";
  position: absolute;
  top: 11px;
  left: calc(10% + 6px);
  right: calc(10% + 6px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rule-mid) 6%,
    var(--rule-mid) 94%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.frameworks-process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(16px, 2vw, 22px);
  z-index: 1;
  min-width: 0;
}

.frameworks-process-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.frameworks-process-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-white);
  border: 2px solid rgba(0, 0, 0, 0.14);
  box-shadow: var(--orb-hero-shadow-sm);
  position: relative;
  z-index: 2;
}

.frameworks-process-num {
  font-family: "Inter", var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-3);
  line-height: 1;
}

.frameworks-process-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--orb-box-pad);
}

.frameworks-process-tag {
  align-self: flex-start;
  margin: 0;
  padding: 0;
  font-family: "Inter", var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.frameworks-process-title {
  font-family: "Inter", var(--sans);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--text-1);
  margin: 0;
}

.frameworks-process-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.frameworks-process-title a:hover,
.frameworks-process-title a:focus-visible {
  color: var(--accent);
}

.frameworks-process-desc {
  font-family: "Inter", var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
}

/* Tablet: horizontal scroll with snap */
@media (max-width: 1199px) and (min-width: 768px) {
  .frameworks-process {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    gap: 16px;
    padding: 0 4px 8px;
    margin-inline: -4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-mid) transparent;
  }

  .frameworks-process::before {
    display: none;
  }

  .frameworks-process-step {
    flex: 0 0 clamp(240px, 32vw, 280px);
    scroll-snap-align: start;
  }

  .frameworks-process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 11px;
    left: calc(100% + 4px);
    width: 8px;
    height: 1px;
    background: var(--rule-mid);
    z-index: 0;
  }
}

/* Mobile: vertical stack with left timeline */
@media (max-width: 767px) {
  .frameworks-process {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 32px;
    margin-top: clamp(32px, 6vw, 48px);
  }

  .frameworks-process::before {
    top: 8px;
    bottom: 8px;
    left: 11px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(
      180deg,
      transparent 0%,
      var(--rule-mid) 4%,
      var(--rule-mid) 96%,
      transparent 100%
    );
  }

  .frameworks-process-step {
    position: relative;
    padding-bottom: clamp(20px, 4vw, 28px);
  }

  .frameworks-process-step:last-child {
    padding-bottom: 0;
  }

  .frameworks-process-marker {
    position: absolute;
    left: -32px;
    top: 4px;
    align-items: center;
    width: 24px;
  }

  .frameworks-process-dot {
    width: 9px;
    height: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orb-ripples {
    animation: none;
  }

}


/* Service single pages — white editorial overrides (field-notes parity) */
.subpage.field-note-page.service-page .article-header {
  background: transparent;
}