/* PAGE ui-ux-design */
/* shared-chrome.css */
@scope (:where(html[data-page="ui-ux-design"]) .shared-kx-header,:where(html[data-page="ui-ux-design"])  .shared-kx-mobile-drawer,:where(html[data-page="ui-ux-design"])  .shared-site-footer) {
:scope { --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif; --container-max: 1240px; --color-yellow: #F8C72E; --color-primary-navy: #14243D; --transition: all .2s ease; font-family: var(--font-body, 'Plus Jakarta Sans', 'Inter', sans-serif); line-height: 1.5; }
:where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(a) { text-decoration: none; }



:scope {
  --kx-navy: #13243D;
  --kx-deep-navy: #0D1B31;
  --kx-secondary-navy: #1B3152;
  --kx-gold: #F9BE22;
  --kx-gold-hover: #FFCA3A;
  --kx-green: #00D084;
  --kx-cyan: #52BCEB;
  --kx-soft-cyan: #EAF8FF;
  --kx-soft-gold: #FFF8DD;
  --kx-soft-green: #E8F8F0;
  --kx-white: #FFFFFF;
  --kx-gray: #F4F6FA;
  --kx-pill-bg: #EDF3FA;
  --kx-border: #E8EDF4;
  --kx-border-subtle: #F1F4F9;
  --kx-text-dark: #13243D;
  --kx-text-muted: #65748B;
  --kx-radius-pill: 9999px;
  --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
}


:scope.shared-kx-header,
.shared-kx-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: 1px solid rgba(232, 237, 244, 0.8);
  transition: all 0.25s ease;
}

:scope.shared-kx-header.scrolled,
.shared-kx-header.scrolled {
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

:scope.shared-kx-header.menu-open,
.shared-kx-header.menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

.shared-kx-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .shared-kx-container {
    padding: 0 16px;
  }
}

.shared-kx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
}


.shared-kx-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0F1D32;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

.shared-kx-logo-tech {
  color: #00D084;
  font-weight: 800;
}


.shared-kx-nav-menu {
  display: flex;
  align-items: center;
  background: #EDF3FA;
  padding: 4px 6px;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(220, 230, 242, 0.85);
  box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
  flex-shrink: 1;
}

.shared-kx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shared-kx-nav-item {
  position: relative;
}

.shared-kx-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--kx-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-nav-link:hover {
  color: #0F1D32;
  background: rgba(255, 255, 255, 0.7);
}

.shared-kx-nav-link.active {
  color: #0F1D32 !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
}

.shared-kx-nav-link::after,
.shared-kx-nav-link.active::after {
  display: none !important;
}

.shared-kx-chevron-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  stroke: currentColor;
}


.shared-kx-dropdown-wrapper {
  position: relative;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper.open .shared-kx-chevron-icon {
  transform: rotate(180deg);
}

.shared-kx-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 250px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
  border: 1px solid var(--kx-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  pointer-events: none;
  z-index: 100;
}

/* Invisible hover bridge to eliminate the 8px cursor gap */
.shared-kx-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
  background: transparent;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper.open .shared-kx-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.shared-kx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #13243D;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.shared-kx-dropdown-item:hover {
  background: #F0F7FF;
  color: #0F1D32;
}


.shared-kx-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.shared-kx-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0F1D32;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-btn-pill-navy:hover {
  background: #1B2E4B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
}

.shared-kx-btn-pill-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F9BE22;
  color: #0F1D32;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
}

.shared-kx-btn-pill-gold:hover {
  background: #FFCA3A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
}

.shared-kx-btn-pill-navy:active,
.shared-kx-btn-pill-gold:active,
.kx-modal-submit:active {
  transform: translateY(0) scale(0.98);
}


.shared-kx-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0F1D32;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.shared-kx-mobile-toggle:hover {
  background: #EDF3FA;
}

@media (max-width: 1240px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-navy {
    display: none;
  }
}

@media (max-width: 1100px) {
  .shared-kx-nav-menu {
    display: none;
  }

  .shared-kx-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .shared-kx-nav-inner {
    height: 70px;
    gap: 8px;
  }
  .shared-kx-logo {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .shared-kx-logo {
    font-size: 18px;
  }
  .shared-kx-nav-actions {
    gap: 6px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 7px 11px;
    font-size: 11.5px;
    gap: 4px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold svg {
    display: none;
  }
  .shared-kx-mobile-toggle {
    padding: 6px;
  }
}

@media (max-width: 360px) {
  .shared-kx-container {
    padding: 0 6px;
  }
  .shared-kx-nav-inner {
    gap: 2px;
  }
  .shared-kx-logo {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  .shared-kx-nav-actions {
    gap: 2px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 5px 6px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  .shared-kx-mobile-toggle {
    padding: 2px;
  }
}


:scope.shared-kx-mobile-drawer,
.shared-kx-mobile-drawer {
  position: fixed;
  top: var(--header-height, 78px);
  left: 0;
  width: 100%;
  height: calc(100dvh - var(--header-height, 78px));
  background: #FFFFFF !important;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 40px rgba(19, 36, 61, 0.12);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :scope.shared-kx-mobile-drawer,
  .shared-kx-mobile-drawer {
    top: var(--header-height, 70px);
    height: calc(100dvh - var(--header-height, 70px));
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

:scope.shared-kx-mobile-drawer.open,
:scope.shared-kx-mobile-drawer.active,
.shared-kx-mobile-drawer.open,
.shared-kx-mobile-drawer.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  pointer-events: auto;
}

.shared-kx-mobile-nav-link {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 650;
  color: #14243D;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 12px;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.shared-kx-mobile-nav-link:hover {
  background: #F8FAFC;
  color: #0E1B2F;
}

.shared-kx-mobile-nav-link.active {
  background: #F4F7FB !important;
  color: #0E1B2F !important;
  font-weight: 750 !important;
  border-left: 3px solid #F8C72E;
  padding-left: 13px;
}

.shared-kx-mobile-nav-link.shared-sub {
  margin-left: 12px;
  margin-right: 4px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 550;
  color: #556987;
  background: #F8FAFC;
  border-radius: 10px;
  border-left: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.shared-kx-mobile-nav-link.shared-sub::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94A3B8;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.shared-kx-mobile-nav-link.shared-sub:hover,
.shared-kx-mobile-nav-link.shared-sub.active {
  background: #EDF4FB;
  color: #0E1B2F;
  border-left-color: #F8C72E;
}

.shared-kx-mobile-nav-link.shared-sub.active::before {
  background: #F8C72E;
  transform: scale(1.4);
}

.shared-kx-mobile-drawer-footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #EEF2F6;
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-gold {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(248, 199, 46, 0.3);
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-navy {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
  border-radius: 9999px;
}


.kx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 49, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  padding: 20px;
}

.kx-modal-overlay.active,
.kx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.kx-modal-dialog {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
  border: 1px solid var(--kx-border);
  overflow: hidden;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.kx-modal-overlay.active .kx-modal-dialog,
.kx-modal-overlay.is-open .kx-modal-dialog {
  transform: scale(1) translateY(0);
}

.kx-modal-header {
  padding: 28px 32px 16px;
  position: relative;
}

.kx-modal-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--kx-navy);
  margin: 0 0 6px;
}

.kx-modal-subtitle {
  font-size: 14px;
  color: var(--kx-text-muted);
  margin: 0;
}

.kx-modal-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--kx-gray);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-navy);
  transition: background 0.2s ease, transform 0.2s ease;
}

.kx-modal-close:hover {
  background: #E2E8F0;
  transform: rotate(90deg);
}

.kx-modal-body {
  padding: 0 32px 32px;
}

.kx-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx-form-label {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kx-navy);
}

.kx-form-input,
.kx-form-textarea,
.kx-form-select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--kx-border);
  background: var(--kx-gray);
  color: var(--kx-navy);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.kx-form-input:focus,
.kx-form-textarea:focus,
.kx-form-select:focus {
  outline: none;
  border-color: var(--kx-navy);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
}

.kx-modal-submit {
  background: var(--kx-navy);
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.kx-modal-submit:hover {
  background: var(--kx-deep-navy);
  transform: translateY(-1px);
}


:scope.shared-site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
  position: relative;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

:scope.shared-site-footer .shared-container,
:scope.shared-site-footer .shared-kx-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

.shared-footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand {
  min-width: 0;
}

.shared-footer-brand .shared-brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand .shared-brand-logo .shared-dot {
  color: #2FB7A7;
}

.shared-footer-brand p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  max-width: 290px;
}

.shared-footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.shared-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.shared-footer-links a {
  font-size: 0.835rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.shared-footer-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

.shared-footer-follow-wrapper {
  margin-top: 24px;
}

.shared-footer-follow-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.shared-footer-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.shared-social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  text-decoration: none;
  transition: var(--transition);
}

.shared-social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

.shared-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  flex-wrap: wrap;
  gap: 12px;
}


@media (max-width: 1180px) {
  .nav-link {
    padding: 6px 9px;
    font-size: 0.82rem;
  }
  .btn-nav-phone {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}


@media (max-width: 1024px) {
  :scope {
    --header-height: 66px;
  }
  .nav-menu-wrapper,
  .btn-phone-desktop {
    display: none !important;
  }
  .hamburger-btn {
    display: flex !important;
  }
  .btn-cta-desktop {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .shared-footer-brand p {
    max-width: 100%;
  }
}


@media (max-width: 768px) {
  :scope {
    --header-height: 62px;
  }
  .btn-cta-desktop {
    display: none !important;
  }
  .shared-site-footer {
    padding: 46px 0 24px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding-bottom: 28px;
  }
}


@media (max-width: 540px) {
  :scope {
    --header-height: 58px;
  }
  .nav-container {
    padding: 0 14px;
  }
  .hamburger-btn {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  .hamburger-btn span {
    width: 20px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
  }
  .shared-footer-col-company {
    grid-column: 1;
  }
  .shared-footer-col-solutions {
    grid-column: 2;
  }
  .shared-footer-col-resources {
    grid-column: 1 / -1;
  }
  .shared-footer-col h5 {
    margin-bottom: 12px;
  }
  .shared-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


@media (max-width: 360px) {
  .shared-brand-logo {
    font-size: 1.15rem;
  }
  .mobile-nav-drawer {
    width: 90vw;
    padding: 18px 14px 22px;
  }
  .mobile-nav-link {
    font-size: 0.95rem;
  }
}
  
}
:where(html[data-page="ui-ux-design"]) .shared-kx-mobile-drawer { visibility: hidden; }
:where(html[data-page="ui-ux-design"]) .shared-kx-mobile-drawer.open { visibility: visible; }
:where(html[data-page="ui-ux-design"]) .shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="ui-ux-design"]) .shared-kx-btn-pill-navy:active,:where(html[data-page="ui-ux-design"]) 
  .shared-kx-btn-pill-gold:active,:where(html[data-page="ui-ux-design"]) 
  .kx-modal-submit:active { transform: none; }
}

/* ui-ux-design.css */
:root:where([data-page="ui-ux-design"]){--ux-navy:#082744;--ux-deep:#061f37;--ux-gold:#f5b91b;--ux-cream:#fbf7ee;--ux-paper:#fffdf8;--ux-blue:#557597;--ux-line:#dbe5ec;--ux-green:#06af91}
:where(html[data-page="ui-ux-design"]) *{box-sizing:border-box}html:where([data-page="ui-ux-design"]){scroll-behavior:smooth}:where(html[data-page="ui-ux-design"]) body{margin:0;background:var(--ux-paper);color:var(--ux-navy);font-family:"Plus Jakarta Sans",sans-serif}:where(html[data-page="ui-ux-design"]) .ux-page{overflow:hidden}:where(html[data-page="ui-ux-design"]) .ux-page .shared-kx-container{width:100%;max-width:1360px;margin-inline:auto;padding-inline:32px}:where(html[data-page="ui-ux-design"]) .ux-page mark{padding:0 .04em;color:inherit;background:linear-gradient(transparent 68%,rgba(245,185,27,.52) 0)}:where(html[data-page="ui-ux-design"]) .ux-section{padding:96px 0}:where(html[data-page="ui-ux-design"]) .ux-kicker{display:flex;align-items:center;gap:10px;margin:0 0 18px;color:#214866;font:800 12px/1.2 Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase}:where(html[data-page="ui-ux-design"]) .ux-kicker span{width:7px;height:7px;border-radius:50%;background:var(--ux-green);box-shadow:0 0 0 5px rgba(6,175,145,.12)}:where(html[data-page="ui-ux-design"]) .ux-kicker-dark{color:#d7e9f6}:where(html[data-page="ui-ux-design"]) .ux-section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.7fr);gap:76px;align-items:end;margin-bottom:52px}:where(html[data-page="ui-ux-design"]) .ux-section-head h2,:where(html[data-page="ui-ux-design"]) .ux-principles h2,:where(html[data-page="ui-ux-design"]) .ux-final h2{margin:0;font:800 clamp(38px,4vw,64px)/1.02 Manrope,sans-serif;letter-spacing:-.055em}:where(html[data-page="ui-ux-design"]) .ux-section-head>p{max-width:560px;margin:0;color:var(--ux-blue);font-size:16px;line-height:1.75}:where(html[data-page="ui-ux-design"]) .ux-btn{display:inline-flex;min-height:54px;align-items:center;justify-content:center;gap:10px;padding:0 25px;border:1px solid transparent;border-radius:999px;font:800 14px/1 Manrope,sans-serif;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}:where(html[data-page="ui-ux-design"]) .ux-btn:hover{transform:translateY(-2px)}:where(html[data-page="ui-ux-design"]) .ux-btn:active{transform:translateY(0) scale(.98)}
@media(prefers-reduced-motion:reduce){:where(html[data-page="ui-ux-design"]) .ux-btn:active{transform:none}}:where(html[data-page="ui-ux-design"]) .ux-btn:focus-visible,:where(html[data-page="ui-ux-design"]) .ux-text-link:focus-visible,:where(html[data-page="ui-ux-design"]) .ux-project a:focus-visible{outline:3px solid #2a7ad5;outline-offset:4px}:where(html[data-page="ui-ux-design"]) .ux-btn-gold{background:var(--ux-gold);color:#071d34;box-shadow:0 12px 28px rgba(230,164,0,.25)}:where(html[data-page="ui-ux-design"]) .ux-btn-light{border-color:#d6e0e8;background:#fff;color:var(--ux-navy);box-shadow:0 9px 25px rgba(8,39,68,.08)}:where(html[data-page="ui-ux-design"]) .ux-btn-outline{border-color:rgba(255,255,255,.34);color:#fff}:where(html[data-page="ui-ux-design"]) .ux-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}

:where(html[data-page="ui-ux-design"]) .ux-hero{position:relative;padding:74px 0 58px;background:radial-gradient(circle at 18% 25%,rgba(245,185,27,.12),transparent 28%),linear-gradient(102deg,#fffbf2,#fff 55%,#f7fbfd)}:where(html[data-page="ui-ux-design"]) .ux-hero:after{content:"";position:absolute;inset:0;background-image:radial-gradient(#dfbd75 .8px,transparent .8px);background-size:20px 20px;mask-image:linear-gradient(90deg,#000,transparent 44%);opacity:.23;pointer-events:none}:where(html[data-page="ui-ux-design"]) .ux-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(430px,.88fr) minmax(570px,1.12fr);gap:56px;align-items:center}:where(html[data-page="ui-ux-design"]) .ux-hero-copy h1{margin:0;font:850 clamp(48px,4.8vw,76px)/.98 Manrope,sans-serif;letter-spacing:-.062em}:where(html[data-page="ui-ux-design"]) .ux-hero-copy>p:not(.ux-kicker){max-width:650px;margin:28px 0 0;color:#55718f;font-size:17px;line-height:1.7}:where(html[data-page="ui-ux-design"]) .ux-hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);margin:42px 0 0;padding-top:23px;border-top:1px solid #dfe6e9}:where(html[data-page="ui-ux-design"]) .ux-hero-metrics div{padding:0 20px;border-left:1px solid #dfe6e9}:where(html[data-page="ui-ux-design"]) .ux-hero-metrics div:first-child{padding-left:0;border:0}:where(html[data-page="ui-ux-design"]) .ux-hero-metrics dt{font:800 23px/1 Manrope}:where(html[data-page="ui-ux-design"]) .ux-hero-metrics dd{margin:7px 0 0;color:#71879f;font-size:11px;line-height:1.4}
:where(html[data-page="ui-ux-design"]) .ux-canvas{position:relative;min-height:610px;overflow:hidden;border:1px solid #e4e8ea;border-radius:28px;background:#f5f7f9;box-shadow:0 26px 60px rgba(8,39,68,.15);rotate:1deg}:where(html[data-page="ui-ux-design"]) .ux-canvas-toolbar{display:flex;height:54px;align-items:center;gap:7px;padding:0 18px;border-bottom:1px solid #dde5eb;background:rgba(255,255,255,.92)}:where(html[data-page="ui-ux-design"]) .ux-canvas-toolbar>span{width:8px;height:8px;border-radius:50%;background:#ffbd53}:where(html[data-page="ui-ux-design"]) .ux-canvas-toolbar>span:nth-child(2){background:#ff7d75}:where(html[data-page="ui-ux-design"]) .ux-canvas-toolbar>span:nth-child(3){background:#4dceb3}:where(html[data-page="ui-ux-design"]) .ux-canvas-toolbar small{margin:auto;color:#7890a8;font-size:9px;font-weight:800;letter-spacing:.1em}:where(html[data-page="ui-ux-design"]) .ux-canvas-toolbar b{padding:7px 12px;border-radius:8px;background:var(--ux-navy);color:#fff;font-size:9px}:where(html[data-page="ui-ux-design"]) .ux-board{display:grid;grid-template-columns:128px 1fr 128px;min-height:556px}:where(html[data-page="ui-ux-design"]) .ux-layers,:where(html[data-page="ui-ux-design"]) .ux-properties{display:flex;flex-direction:column;gap:11px;padding:20px 13px;background:#fff;color:#70869c;font-size:9px}:where(html[data-page="ui-ux-design"]) .ux-layers{border-right:1px solid #e2e9ee}:where(html[data-page="ui-ux-design"]) .ux-properties{border-left:1px solid #e2e9ee}:where(html[data-page="ui-ux-design"]) .ux-layers strong,:where(html[data-page="ui-ux-design"]) .ux-properties strong{margin-bottom:6px;color:var(--ux-navy);font-size:11px}:where(html[data-page="ui-ux-design"]) .ux-layers span{display:flex;align-items:center;gap:7px;padding:8px;border-radius:7px}:where(html[data-page="ui-ux-design"]) .ux-layers .active{background:#eef5fc;color:#225f91}:where(html[data-page="ui-ux-design"]) .ux-properties small{margin-top:8px}:where(html[data-page="ui-ux-design"]) .ux-properties div{display:flex;gap:5px}:where(html[data-page="ui-ux-design"]) .ux-properties b{padding:7px 9px;border:1px solid #dbe4eb;border-radius:6px;color:#52708d;font-size:9px}:where(html[data-page="ui-ux-design"]) .ux-swatch{width:100%;height:25px;border-radius:6px;background:var(--ux-gold)}:where(html[data-page="ui-ux-design"]) .ux-artboard{display:grid;place-items:center;padding:24px;background-image:linear-gradient(#e3ebf0 1px,transparent 1px),linear-gradient(90deg,#e3ebf0 1px,transparent 1px);background-size:18px 18px}:where(html[data-page="ui-ux-design"]) .ux-mobile-frame{width:245px;padding:18px;border:7px solid #0a2946;border-radius:31px;background:#fff;box-shadow:0 22px 40px rgba(6,31,55,.2)}:where(html[data-page="ui-ux-design"]) .ux-phone-head{display:flex;justify-content:space-between;align-items:center;font-size:11px}:where(html[data-page="ui-ux-design"]) .ux-product{display:grid;grid-template-columns:43px 1fr auto;gap:9px;align-items:center;margin:20px 0;padding:11px;border-radius:11px;background:#f7f3e9}:where(html[data-page="ui-ux-design"]) .ux-product>div{width:43px;height:43px;border-radius:8px;background:linear-gradient(135deg,#b67633,#f3d49b)}:where(html[data-page="ui-ux-design"]) .ux-product span b,:where(html[data-page="ui-ux-design"]) .ux-product span small{display:block}:where(html[data-page="ui-ux-design"]) .ux-product span b{font-size:9px}:where(html[data-page="ui-ux-design"]) .ux-product span small{margin-top:4px;color:#7d8fa1;font-size:7px}:where(html[data-page="ui-ux-design"]) .ux-product>strong{font-size:8px}:where(html[data-page="ui-ux-design"]) .ux-mobile-frame label{display:block;margin:13px 0 6px;color:#647d95;font-size:7px;font-weight:700}:where(html[data-page="ui-ux-design"]) .ux-input,:where(html[data-page="ui-ux-design"]) .ux-payment{display:flex;align-items:center;justify-content:space-between;padding:11px;border:1px solid #dfe7ed;border-radius:10px;font-size:8px}:where(html[data-page="ui-ux-design"]) .ux-payment{justify-content:flex-start;gap:9px}:where(html[data-page="ui-ux-design"]) .ux-payment>i:first-child{font-size:19px;color:#1668ad}:where(html[data-page="ui-ux-design"]) .ux-payment span{flex:1}:where(html[data-page="ui-ux-design"]) .ux-payment b,:where(html[data-page="ui-ux-design"]) .ux-payment small{display:block}:where(html[data-page="ui-ux-design"]) .ux-payment small{margin-top:3px;color:#7f91a1;font-size:7px}:where(html[data-page="ui-ux-design"]) .ux-payment>i:last-child{color:var(--ux-green);font-size:17px}:where(html[data-page="ui-ux-design"]) .ux-mobile-frame button{display:flex;width:100%;height:37px;align-items:center;justify-content:center;gap:8px;margin-top:18px;border:0;border-radius:10px;background:var(--ux-gold);color:var(--ux-navy);font-size:9px;font-weight:800}:where(html[data-page="ui-ux-design"]) .ux-note{position:absolute;z-index:5;color:#9b7000;font:700 20px/1.1 Caveat,cursive;rotate:-4deg}:where(html[data-page="ui-ux-design"]) .ux-note-top{right:24px;top:66px}:where(html[data-page="ui-ux-design"]) .ux-cursor{position:absolute;z-index:5;display:flex;align-items:center;gap:4px;color:#fff;font-size:8px;font-weight:700}:where(html[data-page="ui-ux-design"]) .ux-cursor i{font-size:20px}:where(html[data-page="ui-ux-design"]) .ux-cursor span{padding:5px 7px;border-radius:5px;background:#7657df}:where(html[data-page="ui-ux-design"]) .ux-cursor-one{left:145px;top:205px}:where(html[data-page="ui-ux-design"]) .ux-cursor-two{right:145px;bottom:118px}:where(html[data-page="ui-ux-design"]) .ux-cursor-two span{background:#09a98b}

:where(html[data-page="ui-ux-design"]) .ux-proof{border-top:1px solid #e5eaed;border-bottom:1px solid #e5eaed;background:#fff}:where(html[data-page="ui-ux-design"]) .ux-proof>.shared-kx-container{display:flex;align-items:center;gap:34px;padding-top:25px;padding-bottom:25px}:where(html[data-page="ui-ux-design"]) .ux-proof p{flex:0 0 auto;margin:0;color:#8293a3;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}:where(html[data-page="ui-ux-design"]) .ux-proof ul{display:grid;grid-template-columns:repeat(4,1fr);width:100%;margin:0;padding:0;list-style:none}:where(html[data-page="ui-ux-design"]) .ux-proof li{display:flex;align-items:center;gap:12px;padding:0 25px;border-left:1px solid #e4e9ed}:where(html[data-page="ui-ux-design"]) .ux-proof li i{display:grid;width:40px;height:40px;flex:0 0 auto;place-items:center;border-radius:12px;background:#fff3d4;color:#bb8300;font-size:20px}:where(html[data-page="ui-ux-design"]) .ux-proof b,:where(html[data-page="ui-ux-design"]) .ux-proof span{display:block}:where(html[data-page="ui-ux-design"]) .ux-proof b{font-size:12px}:where(html[data-page="ui-ux-design"]) .ux-proof span{color:#72879b;font-size:9px;line-height:1.5}

:where(html[data-page="ui-ux-design"]) .ux-services{background:#fff}:where(html[data-page="ui-ux-design"]) .ux-capability-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}:where(html[data-page="ui-ux-design"]) .ux-capability{position:relative;min-height:340px;padding:34px;border:1px solid var(--ux-line);border-radius:22px;background:#fff;box-shadow:0 14px 34px rgba(8,39,68,.06)}:where(html[data-page="ui-ux-design"]) .ux-capability-wide{background:linear-gradient(135deg,#fffaf0,#fff)}:where(html[data-page="ui-ux-design"]) .ux-capability-index{position:absolute;right:28px;top:25px;color:#ced8e0;font:800 45px/1 Manrope}:where(html[data-page="ui-ux-design"]) .ux-capability>i{display:grid;width:52px;height:52px;place-items:center;border-radius:14px;background:#fff0c8;color:#b77d00;font-size:25px}:where(html[data-page="ui-ux-design"]) .ux-capability h3{max-width:430px;margin:28px 0 12px;font:800 25px/1.15 Manrope}:where(html[data-page="ui-ux-design"]) .ux-capability p{max-width:560px;margin:0;color:#5f7892;font-size:14px;line-height:1.65}:where(html[data-page="ui-ux-design"]) .ux-capability ul{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}:where(html[data-page="ui-ux-design"]) .ux-capability li{padding:8px 11px;border:1px solid #e2e8ed;border-radius:999px;color:#4b6681;font-size:9px;font-weight:700}

:where(html[data-page="ui-ux-design"]) .ux-process{position:relative;background:linear-gradient(135deg,#061f37,#07365b);color:#fff}:where(html[data-page="ui-ux-design"]) .ux-process:before,:where(html[data-page="ui-ux-design"]) .ux-final:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px}:where(html[data-page="ui-ux-design"]) .ux-process>.shared-kx-container,:where(html[data-page="ui-ux-design"]) .ux-final>.shared-kx-container{position:relative}:where(html[data-page="ui-ux-design"]) .ux-process .ux-section-head h2{color:#fff}:where(html[data-page="ui-ux-design"]) .ux-process .ux-section-head>p{color:#c5d5e2}:where(html[data-page="ui-ux-design"]) .ux-process-list{display:grid;grid-template-columns:repeat(5,1fr);margin:55px 0 0;padding:0;list-style:none}:where(html[data-page="ui-ux-design"]) .ux-process-list li{position:relative;padding:0 28px}:where(html[data-page="ui-ux-design"]) .ux-process-list li:first-child{padding-left:0}:where(html[data-page="ui-ux-design"]) .ux-process-list li:not(:last-child):after{content:"→";position:absolute;right:-5px;top:51px;color:#7e9bb3;font-size:22px}:where(html[data-page="ui-ux-design"]) .ux-process-list span{color:#1bc8ad;font-size:10px;font-weight:800}:where(html[data-page="ui-ux-design"]) .ux-process-list i{display:grid;width:58px;height:58px;place-items:center;margin:12px 0 19px;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:rgba(255,255,255,.1);color:#f4c64d;font-size:25px}:where(html[data-page="ui-ux-design"]) .ux-process-list h3{margin:0 0 7px;font:800 20px/1.2 Manrope}:where(html[data-page="ui-ux-design"]) .ux-process-list p{margin:0;color:#b7cada;font-size:11px;line-height:1.55}

:where(html[data-page="ui-ux-design"]) .ux-work{background:#fff}:where(html[data-page="ui-ux-design"]) .ux-work-grid{display:grid;grid-template-columns:1.18fr .82fr;grid-template-rows:1fr 1fr;gap:20px}:where(html[data-page="ui-ux-design"]) .ux-project{display:grid;grid-template-columns:.9fr 1.1fr;overflow:hidden;min-height:330px;border:1px solid var(--ux-line);border-radius:22px;background:#fff;box-shadow:0 14px 34px rgba(8,39,68,.07)}:where(html[data-page="ui-ux-design"]) .ux-project-main{grid-row:1/3;grid-template-columns:1fr;grid-template-rows:1.15fr .85fr}:where(html[data-page="ui-ux-design"]) .ux-project-image{overflow:hidden;min-height:0}:where(html[data-page="ui-ux-design"]) .ux-project-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}:where(html[data-page="ui-ux-design"]) .ux-project:hover img{transform:scale(1.035)}:where(html[data-page="ui-ux-design"]) .ux-project-copy{display:flex;flex-direction:column;justify-content:center;padding:28px}:where(html[data-page="ui-ux-design"]) .ux-project-copy>span{color:#078f7a;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}:where(html[data-page="ui-ux-design"]) .ux-project h3{margin:12px 0 10px;font:800 23px/1.2 Manrope}:where(html[data-page="ui-ux-design"]) .ux-project p{margin:0;color:#687f96;font-size:12px;line-height:1.55}:where(html[data-page="ui-ux-design"]) .ux-project a{display:inline-flex;align-items:center;gap:7px;margin-top:20px;color:var(--ux-navy);font-size:11px;font-weight:800;text-decoration:none}

:where(html[data-page="ui-ux-design"]) .ux-principles{background:var(--ux-cream)}:where(html[data-page="ui-ux-design"]) .ux-principles-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px;align-items:start}:where(html[data-page="ui-ux-design"]) .ux-principles-grid>div:first-child>p:not(.ux-kicker){margin:25px 0;color:#5f7892;font-size:15px;line-height:1.7}:where(html[data-page="ui-ux-design"]) .ux-text-link{display:inline-flex;align-items:center;gap:8px;color:var(--ux-navy);font-size:13px;font-weight:800;text-decoration:none}:where(html[data-page="ui-ux-design"]) .ux-principle-list{border-top:1px solid #d9e1e5}:where(html[data-page="ui-ux-design"]) .ux-principle-list article{display:grid;grid-template-columns:50px 1fr;gap:22px;padding:25px 0;border-bottom:1px solid #d9e1e5}:where(html[data-page="ui-ux-design"]) .ux-principle-list article>b{color:#c08c08;font-size:11px}:where(html[data-page="ui-ux-design"]) .ux-principle-list h3{margin:0 0 6px;font:800 18px/1.25 Manrope}:where(html[data-page="ui-ux-design"]) .ux-principle-list p{margin:0;color:#627b93;font-size:13px;line-height:1.55}

:where(html[data-page="ui-ux-design"]) .ux-testimonial{background:#fff}:where(html[data-page="ui-ux-design"]) .ux-testimonial figure{position:relative;margin:0;padding:70px 90px;border:1px solid #efd98d;border-radius:26px;background:linear-gradient(135deg,#fffaf0,#fff);box-shadow:0 18px 40px rgba(8,39,68,.06)}:where(html[data-page="ui-ux-design"]) .ux-quote{display:block;color:var(--ux-gold);font:800 76px/.5 Georgia,serif}:where(html[data-page="ui-ux-design"]) .ux-testimonial blockquote{max-width:990px;margin:35px 0;font:750 clamp(26px,3vw,45px)/1.25 Manrope,sans-serif;letter-spacing:-.035em}:where(html[data-page="ui-ux-design"]) .ux-testimonial figcaption span,:where(html[data-page="ui-ux-design"]) .ux-testimonial figcaption small{display:block}:where(html[data-page="ui-ux-design"]) .ux-testimonial figcaption span{font-weight:800}:where(html[data-page="ui-ux-design"]) .ux-testimonial figcaption small{margin-top:5px;color:#71879b}:where(html[data-page="ui-ux-design"]) .ux-testimonial em{position:absolute;right:65px;bottom:48px;color:#c28b00;font:700 24px/1.1 Caveat,cursive;rotate:-5deg}

:where(html[data-page="ui-ux-design"]) .ux-final{position:relative;background:linear-gradient(135deg,#061f37,#07385e);color:#fff}:where(html[data-page="ui-ux-design"]) .ux-final-panel{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}:where(html[data-page="ui-ux-design"]) .ux-final h2{color:#fff}:where(html[data-page="ui-ux-design"]) .ux-final-panel>div>p:not(.ux-kicker){max-width:560px;margin:0;color:#c8d8e5;font-size:15px;line-height:1.7}

@media(max-width:1120px){:where(html[data-page="ui-ux-design"]) .ux-hero-grid{grid-template-columns:1fr}:where(html[data-page="ui-ux-design"]) .ux-hero-copy{text-align:center}:where(html[data-page="ui-ux-design"]) .ux-hero-copy .ux-kicker,:where(html[data-page="ui-ux-design"]) .ux-hero-copy .ux-actions{justify-content:center}:where(html[data-page="ui-ux-design"]) .ux-hero-copy>p:not(.ux-kicker){margin-left:auto;margin-right:auto}:where(html[data-page="ui-ux-design"]) .ux-canvas{max-width:760px;width:100%;margin:auto}:where(html[data-page="ui-ux-design"]) .ux-proof>.shared-kx-container{display:block}:where(html[data-page="ui-ux-design"]) .ux-proof p{margin-bottom:20px}:where(html[data-page="ui-ux-design"]) .ux-proof li{padding:0 16px}:where(html[data-page="ui-ux-design"]) .ux-work-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}:where(html[data-page="ui-ux-design"]) .ux-project-main{grid-row:auto;grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-rows:auto}:where(html[data-page="ui-ux-design"]) .ux-project:not(.ux-project-main){grid-template-columns:1fr}:where(html[data-page="ui-ux-design"]) .ux-principles-grid{gap:60px}}
@media(max-width:800px){:where(html[data-page="ui-ux-design"]) .ux-section{padding:72px 0}:where(html[data-page="ui-ux-design"]) .ux-section-head{grid-template-columns:1fr;gap:20px}:where(html[data-page="ui-ux-design"]) .ux-proof ul{grid-template-columns:1fr 1fr;gap:18px}:where(html[data-page="ui-ux-design"]) .ux-proof li:nth-child(odd){border-left:0}:where(html[data-page="ui-ux-design"]) .ux-capability-grid{grid-template-columns:1fr}:where(html[data-page="ui-ux-design"]) .ux-process-list{grid-template-columns:repeat(5,minmax(150px,1fr));overflow-x:auto;padding-bottom:20px}:where(html[data-page="ui-ux-design"]) .ux-work-grid{grid-template-columns:1fr}:where(html[data-page="ui-ux-design"]) .ux-project-main{grid-column:auto;grid-template-columns:1fr;grid-template-rows:auto}:where(html[data-page="ui-ux-design"]) .ux-project:not(.ux-project-main){grid-template-columns:.85fr 1.15fr}:where(html[data-page="ui-ux-design"]) .ux-principles-grid,:where(html[data-page="ui-ux-design"]) .ux-final-panel{grid-template-columns:1fr;gap:45px}:where(html[data-page="ui-ux-design"]) .ux-testimonial figure{padding:55px}:where(html[data-page="ui-ux-design"]) .ux-testimonial em{position:static;display:block;margin-top:30px}}
@media(max-width:768px){:where(html[data-page="ui-ux-design"]) .ux-page .shared-kx-container{padding-inline:16px}}
@media(max-width:560px){:where(html[data-page="ui-ux-design"]) .ux-section{padding:58px 0}:where(html[data-page="ui-ux-design"]) .ux-section-head h2,:where(html[data-page="ui-ux-design"]) .ux-principles h2,:where(html[data-page="ui-ux-design"]) .ux-final h2{font-size:37px}:where(html[data-page="ui-ux-design"]) .ux-hero{padding:54px 0 45px}:where(html[data-page="ui-ux-design"]) .ux-hero-copy h1{font-size:43px}:where(html[data-page="ui-ux-design"]) .ux-hero-copy>p:not(.ux-kicker){font-size:15px}:where(html[data-page="ui-ux-design"]) .ux-actions{flex-direction:column}:where(html[data-page="ui-ux-design"]) .ux-btn{width:100%}:where(html[data-page="ui-ux-design"]) .ux-hero-metrics{grid-template-columns:1fr 1fr;gap:18px}:where(html[data-page="ui-ux-design"]) .ux-hero-metrics div:nth-child(3){padding-left:0;border-left:0}:where(html[data-page="ui-ux-design"]) .ux-canvas{min-height:520px;border-radius:21px;rotate:0}:where(html[data-page="ui-ux-design"]) .ux-board{grid-template-columns:1fr;min-height:466px}:where(html[data-page="ui-ux-design"]) .ux-layers,:where(html[data-page="ui-ux-design"]) .ux-properties{display:none}:where(html[data-page="ui-ux-design"]) .ux-artboard{padding:22px}:where(html[data-page="ui-ux-design"]) .ux-mobile-frame{width:236px}:where(html[data-page="ui-ux-design"]) .ux-note-top{right:10px;top:60px;font-size:17px}:where(html[data-page="ui-ux-design"]) .ux-cursor-one{left:16px;top:170px}:where(html[data-page="ui-ux-design"]) .ux-cursor-two{right:14px;bottom:60px}:where(html[data-page="ui-ux-design"]) .ux-proof ul{grid-template-columns:1fr}:where(html[data-page="ui-ux-design"]) .ux-proof li,:where(html[data-page="ui-ux-design"]) .ux-proof li:nth-child(odd){padding:11px 0;border-left:0;border-top:1px solid #e6ebee}:where(html[data-page="ui-ux-design"]) .ux-capability{min-height:0;padding:27px}:where(html[data-page="ui-ux-design"]) .ux-capability h3{font-size:22px}:where(html[data-page="ui-ux-design"]) .ux-work-grid{gap:15px}:where(html[data-page="ui-ux-design"]) .ux-project,:where(html[data-page="ui-ux-design"]) .ux-project:not(.ux-project-main){grid-template-columns:1fr}:where(html[data-page="ui-ux-design"]) .ux-project-image{height:235px}:where(html[data-page="ui-ux-design"]) .ux-project-copy{padding:24px}:where(html[data-page="ui-ux-design"]) .ux-testimonial figure{padding:38px 25px}:where(html[data-page="ui-ux-design"]) .ux-testimonial blockquote{font-size:24px}:where(html[data-page="ui-ux-design"]) .ux-kicker{font-size:10px}}
@media(prefers-reduced-motion:reduce){html:where([data-page="ui-ux-design"]){scroll-behavior:auto}:where(html[data-page="ui-ux-design"]) .ux-page *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* page-container-rhythm.css */
/* Shared page rhythm: mirrors the Industries page container at every breakpoint. */
:root:where([data-page="ui-ux-design"]) {
  --kx-page-container: 1240px;
  --kx-page-gutter: 24px;
}

:where(html[data-page="ui-ux-design"]) .shared-kx-header > .shared-kx-container,:where(html[data-page="ui-ux-design"]) 
.ux-page .shared-kx-container,:where(html[data-page="ui-ux-design"]) 
main > section > :is(
  .container,
  .su-container,
  .impact-container,
  .origin-desktop-view,
  .phil-container,
  .journey-tl-container,
  .careersHero-container,
  .chFeels-container,
  .contact-hero-v2-container,
  .contact-container,
  .taste-inner,
  .ai-container,
  .rv-container,
  .wd-container,
  .wd-tech-container,
  .wd-testi-faq-container,
  .kx-ah-container,
  .ma-container,
  .kats-container,
  .cloud-hero-container,
  .kx-container
),:where(html[data-page="ui-ux-design"]) 
body > section > :is(
  .container,
  .contact-container,
  .cloud-hero-container,
  .kx-container
) {
  width: 100% !important;
  max-width: var(--kx-page-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--kx-page-gutter) !important;
  padding-right: var(--kx-page-gutter) !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  :root:where([data-page="ui-ux-design"]) { --kx-page-gutter: 16px; }
}

/* This section previously put its gutter on the full-width background itself. */
@media (max-width: 1023px) {
  :where(html[data-page="ui-ux-design"]) .wd-tech-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}



/* PAGE index */
/* index.html embedded 1 */

/* ==========================================================================
   KAXON TECHNOLOGIES - GLOBAL DESIGN SYSTEM & STYLESHEET
   Accurate recreation of approved high-converting reference design
   ========================================================================== */

:root:where([data-page="index"]) {
  /* Core Brand Colors */
  --color-primary-navy: #14243D;
  --color-dark-navy: #0E1B2F;
  --color-card-dark: #121E33;
  --color-yellow: #F8C72E;
  --color-yellow-hover: #E8B61E;
  --color-yellow-light: #FFF9E5;
  --color-teal: #1FB6A6;
  --color-teal-light: #E6F8F6;
  --color-green: #38B764;
  --color-green-light: #EBF8F0;
  --color-purple: #7C5CFC;
  --color-purple-light: #F2EEFE;
  --color-pink: #ED509E;
  --color-pink-light: #FDEEF6;
  --color-blue: #2E82FE;
  --color-blue-light: #EAF2FF;

  /* Neutrals & Backgrounds */
  --bg-white: #FFFFFF;
  --bg-cream: #FFF7EA;
  --bg-light-gray: #F8FAFC;
  --bg-subtle: #F1F4F9;
  --border-color: #E2E8F0;
  --border-light: rgba(20, 36, 61, 0.08);

  /* Typography */
  --text-primary: #14243D;
  --text-secondary: #57657B;
  --text-muted: #8E9AAB;
  --text-inverse: #FFFFFF;

  /* Font Families */
  --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-handwriting: 'Caveat', cursive, sans-serif;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(20, 36, 61, 0.04);
  --shadow-md: 0 10px 28px rgba(20, 36, 61, 0.07);
  --shadow-lg: 0 18px 45px rgba(20, 36, 61, 0.10);
  --shadow-card: 0 12px 36px rgba(20, 36, 61, 0.06);
  --shadow-yellow: 0 8px 24px rgba(248, 199, 46, 0.35);
  --shadow-green: 0 8px 24px rgba(37, 211, 102, 0.30);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* Layout */
  --container-max: 1240px;
  --header-height: 72px;
  --transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Resets */
:where(html[data-page="index"]) *,:where(html[data-page="index"])  *::before,:where(html[data-page="index"])  *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html:where([data-page="index"]) {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100vw;
}

:where(html[data-page="index"]) body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--bg-white);
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

:where(html[data-page="index"]) img {
  max-width: 100%;
  height: auto;
  display: block;
}

:where(html[data-page="index"]) a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

:where(html[data-page="index"]) button,:where(html[data-page="index"])  input,:where(html[data-page="index"])  select,:where(html[data-page="index"])  textarea {
  font-family: inherit;
  font-size: inherit;
  outline: none;
  border: none;
}

:where(html[data-page="index"]) button {
  cursor: pointer;
  background: none;
}

:where(html[data-page="index"]) .container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Section Header Shared */
:where(html[data-page="index"]) .section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

:where(html[data-page="index"]) .section-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-primary-navy);
  letter-spacing: -0.02em;
}

:where(html[data-page="index"]) .section-subtitle {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 14px;
}

/* ==========================================================================
   BUTTONS & BADGES
   ========================================================================== */
:where(html[data-page="index"]) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  transition: var(--transition);
  white-space: nowrap;
}

:where(html[data-page="index"]) .btn-yellow {
  background-color: var(--color-yellow);
  color: var(--color-primary-navy);
  box-shadow: var(--shadow-yellow);
}

:where(html[data-page="index"]) .btn-yellow:hover {
  background-color: var(--color-yellow-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(248, 199, 46, 0.45);
}

:where(html[data-page="index"]) .btn-navy {
  background-color: var(--color-primary-navy);
  color: var(--bg-white);
}

:where(html[data-page="index"]) .btn-navy:hover {
  background-color: var(--color-dark-navy);
  transform: translateY(-2px);
}

:where(html[data-page="index"]) .btn-outline {
  border: 1.5px solid var(--border-color);
  background: var(--bg-white);
  color: var(--color-primary-navy);
}

:where(html[data-page="index"]) .btn-outline:hover {
  border-color: var(--color-primary-navy);
  transform: translateY(-2px);
}

:where(html[data-page="index"]) .btn-phone {
  background-color: var(--color-primary-navy);
  color: var(--bg-white);
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 600;
}

:where(html[data-page="index"]) .btn-phone:hover {
  background-color: var(--color-dark-navy);
}

:where(html[data-page="index"]) .btn-link {
  font-weight: 600;
  color: var(--color-primary-navy);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

:where(html[data-page="index"]) .btn-link:hover {
  color: var(--color-teal);
  gap: 10px;
}

/* ==========================================================================
   HEADER & NAVBAR
   ========================================================================== */
:where(html[data-page="index"]) .site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  z-index: 1000;
  border-bottom: 1px solid rgba(20, 36, 61, 0.06);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

:where(html[data-page="index"]) .site-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 30px -5px rgba(20, 36, 61, 0.08), 0 0 0 1px rgba(20, 36, 61, 0.04);
}

:where(html[data-page="index"]) .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* 1. Brand Logo Lockup */
:where(html[data-page="index"]) .brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 1.48rem;
  font-weight: 800;
  color: #0E1B2F;
  letter-spacing: -0.035em;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

:where(html[data-page="index"]) .brand-logo:hover {
  opacity: 0.88;
  transform: scale(1.02);
}

:where(html[data-page="index"]) .brand-logo .dot {
  background: linear-gradient(135deg, #10B981 0%, #2FB7A7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(16, 185, 129, 0.35));
}

/* 2. Glass Capsule Center Navigation */
:where(html[data-page="index"]) .nav-menu-wrapper {
  display: flex;
  align-items: center;
}

:where(html[data-page="index"]) .nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 4px;
  background: rgba(241, 245, 249, 0.7);
  padding: 4px 6px;
  border-radius: 9999px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

:where(html[data-page="index"]) .nav-link {
  font-family: var(--font-body);
  font-size: 0.885rem;
  font-weight: 600;
  color: #475569;
  padding: 7px 14px;
  border-radius: 9999px;
  text-decoration: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  line-height: 1.2;
}

:where(html[data-page="index"]) .nav-link:hover {
  color: #0E1B2F;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(20, 36, 61, 0.05);
}

:where(html[data-page="index"]) .nav-link.active {
  color: #0E1B2F;
  background: #FFFFFF;
  font-weight: 750;
  box-shadow: 0 2px 10px rgba(20, 36, 61, 0.08);
}

:where(html[data-page="index"]) .nav-caret {
  font-size: 0.72rem;
  color: #64748B;
  transition: transform 0.25s ease;
}

:where(html[data-page="index"]) .nav-item-dropdown {
  position: relative;
}

:where(html[data-page="index"]) .nav-item-dropdown:hover .nav-caret,:where(html[data-page="index"]) 
.nav-item-dropdown:focus-within .nav-caret {
  transform: rotate(180deg);
}

/* 3. Services Dropdown Menu Popover */
:where(html[data-page="index"]) .nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 480px;
  background: #FFFFFF;
  border: 1px solid rgba(20, 36, 61, 0.08);
  border-radius: 20px;
  box-shadow: 0 20px 45px -10px rgba(20, 36, 61, 0.16), 0 0 0 1px rgba(20, 36, 61, 0.04);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1050;
}

:where(html[data-page="index"]) .nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 14px;
}

:where(html[data-page="index"]) .nav-item-dropdown:hover .nav-dropdown-menu,:where(html[data-page="index"]) 
.nav-item-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

:where(html[data-page="index"]) .dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

:where(html[data-page="index"]) .dropdown-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}

:where(html[data-page="index"]) .dropdown-item:hover {
  background: #F8FAFC;
  transform: translateX(2px);
}

:where(html[data-page="index"]) .dropdown-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .dropdown-item-info {
  display: flex;
  flex-direction: column;
}

:where(html[data-page="index"]) .dropdown-title {
  font-family: var(--font-heading);
  font-size: 0.835rem;
  font-weight: 750;
  color: #0E1B2F;
  line-height: 1.2;
}

:where(html[data-page="index"]) .dropdown-desc {
  font-size: 0.715rem;
  color: #64748B;
  line-height: 1.25;
  margin-top: 1px;
}

/* 4. Action Buttons (Right) */
:where(html[data-page="index"]) .nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

:where(html[data-page="index"]) .btn-nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0E1B2F;
  color: #FFFFFF;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 9999px;
  font-size: 0.855rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 14px rgba(14, 27, 47, 0.14);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

:where(html[data-page="index"]) .btn-nav-phone:hover {
  background: #182C48;
  transform: translateY(-1.5px);
  box-shadow: 0 8px 22px rgba(14, 27, 47, 0.22);
  color: #FFFFFF;
}

:where(html[data-page="index"]) .btn-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #F8C72E;
  color: #0E1B2F;
  text-decoration: none;
  padding: 9px 20px;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 16px rgba(248, 199, 46, 0.35);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

:where(html[data-page="index"]) .btn-nav-cta:hover {
  background: #F4BE1F;
  transform: translateY(-1.5px);
  box-shadow: 0 8px 24px rgba(248, 199, 46, 0.48);
  color: #0E1B2F;
}

:where(html[data-page="index"]) .hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(20, 36, 61, 0.08);
  background: #FFFFFF;
  cursor: pointer;
  z-index: 1001;
  transition: background 0.2s ease;
}

:where(html[data-page="index"]) .hamburger-btn:hover {
  background: #F8FAFC;
}

:where(html[data-page="index"]) .hamburger-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-primary-navy);
  border-radius: 2px;
  transition: var(--transition);
}

/* Mobile Nav Drawer */
:where(html[data-page="index"]) .mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 360px;
  height: 100vh;
  background: var(--bg-white);
  z-index: 999;
  padding: 90px 30px 40px;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: right 0.35s ease;
}

:where(html[data-page="index"]) .mobile-nav-drawer.open {
  right: 0;
}

:where(html[data-page="index"]) .mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

:where(html[data-page="index"]) .mobile-nav-links a {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-primary-navy);
}

:where(html[data-page="index"]) .mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 27, 47, 0.4);
  backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

:where(html[data-page="index"]) .mobile-drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   HERO SECTION — ACCURATE REFERENCE MATCH
   ========================================================================== */
:where(html[data-page="index"]) .hero-section {
  padding: 56px 0 68px;
  background-color: #FBF7EF;
  background-image: 
    radial-gradient(circle at 88% 28%, rgba(255, 196, 61, 0.12) 0%, rgba(251, 247, 239, 0) 60%),
    radial-gradient(circle at 10% 80%, rgba(36, 181, 168, 0.05) 0%, rgba(251, 247, 239, 0) 50%),
    radial-gradient(#CBD5E1 1px, transparent 1px);
  background-size: auto, auto, 24px 24px;
  background-position: 0 0, 0 0, 0 0;
  position: relative;
  overflow: hidden;
}

/* Ambient Handwritten Annotations */
:where(html[data-page="index"]) .hero-annotation {
  position: absolute;
  pointer-events: none;
  z-index: 4;
}

:where(html[data-page="index"]) .hero-anno-left {
  top: 10px;
  left: -130px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-handwriting, 'Caveat', cursive, sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: #E89725;
  line-height: 1.05;
  transform: rotate(-10deg);
}

@media (max-width: 1480px) {
  :where(html[data-page="index"]) .hero-anno-left {
    display: none !important;
  }
}

:where(html[data-page="index"]) .anno-arrow-svg {
  margin-top: 4px;
  margin-left: 12px;
}

:where(html[data-page="index"]) .hero-anno-middle {
  position: absolute;
  top: 48%;
  left: -48px;
  transform: translateY(-50%) rotate(-6deg);
  font-family: var(--font-handwriting, 'Caveat', cursive, sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: #E89725;
  line-height: 1.1;
  pointer-events: none;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
}

:where(html[data-page="index"]) .hero-anno-middle svg {
  margin-top: 4px;
}

:where(html[data-page="index"]) .hero-container {
  max-width: 1360px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

:where(html[data-page="index"]) .hero-grid {
  display: grid;
  grid-template-columns: 53% 47%;
  gap: 36px;
  align-items: center;
}

/* Left Column */
:where(html[data-page="index"]) .hero-left {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

:where(html[data-page="index"]) .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #102039;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(16, 26, 43, 0.08);
  box-shadow: 0 4px 16px rgba(16, 26, 43, 0.04);
  padding: 7px 16px;
  border-radius: var(--radius-pill, 999px);
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
}

:where(html[data-page="index"]) .hero-badge-dot {
  width: 8px;
  height: 8px;
  background-color: #24B5A8;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(36, 181, 168, 0.6);
  display: inline-block;
}

:where(html[data-page="index"]) .hero-title {
  font-family: var(--font-heading, 'Plus Jakarta Sans', 'Manrope', sans-serif);
  font-size: clamp(2.4rem, 4.2vw, 4.4rem);
  font-weight: 800;
  line-height: 1.02;
  color: #102039;
  letter-spacing: -0.045em;
  margin-bottom: 24px;
}

:where(html[data-page="index"]) .title-second-line {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

:where(html[data-page="index"]) .highlight-gold-text {
  color: #F5AA1C;
  font-weight: 850;
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

:where(html[data-page="index"]) .gold-sparkle-burst {
  position: absolute;
  top: -10px;
  right: -26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  transform: rotate(8deg);
}

:where(html[data-page="index"]) .brush-stroke-svg {
  position: absolute;
  left: -2%;
  bottom: -10px;
  width: 104%;
  height: 10px;
  z-index: 1;
  pointer-events: none;
}

:where(html[data-page="index"]) .hero-subtitle {
  font-size: 1.08rem;
  line-height: 1.62;
  color: #59708F;
  margin-bottom: 30px;
  max-width: 620px;
  font-weight: 450;
}

/* CTAs Wrap */
:where(html[data-page="index"]) .hero-ctas-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 36px;
}

:where(html[data-page="index"]) .hero-ctas {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

:where(html[data-page="index"]) .btn-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: linear-gradient(180deg, #FFC93A 0%, #F5AA1C 100%);
  color: #0E1A2E;
  font-family: var(--font-heading, sans-serif);
  font-weight: 750;
  font-size: 0.92rem;
  letter-spacing: -0.015em;
  padding: 10px 24px;
  min-height: 44px;
  box-shadow: 0 3px 12px rgba(245, 170, 28, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-pill, 999px);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(220, 145, 10, 0.4);
  position: relative;
  overflow: hidden;
}

:where(html[data-page="index"]) .btn-hero-cta:hover {
  background: linear-gradient(180deg, #FFD255 0%, #F5B028 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245, 170, 28, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  color: #080F1B;
}

:where(html[data-page="index"]) .btn-hero-cta:active {
  transform: translateY(0px) scale(0.98);
  box-shadow: 0 2px 6px rgba(245, 170, 28, 0.22);
}

:where(html[data-page="index"]) .btn-hero-cta svg {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

:where(html[data-page="index"]) .btn-hero-cta:hover svg {
  transform: translateX(4px);
}

:where(html[data-page="index"]) .btn-watch-video {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #FFFFFF;
  color: #102039;
  border: 1.5px solid #E2E8F0;
  padding: 4px 20px 4px 5px;
  min-height: 44px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 0.91rem;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 8px rgba(16, 32, 57, 0.04), 0 1px 2px rgba(16, 32, 57, 0.02);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  white-space: nowrap;
}

:where(html[data-page="index"]) .btn-watch-video:hover {
  border-color: #102039;
  background: #FAFCFE;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 32, 57, 0.07);
  color: #091220;
}

:where(html[data-page="index"]) .btn-watch-video:active {
  transform: translateY(0px) scale(0.98);
  box-shadow: 0 2px 6px rgba(16, 32, 57, 0.04);
}

:where(html[data-page="index"]) .video-play-icon {
  width: 32px;
  height: 32px;
  background: #102039;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(16, 32, 57, 0.2);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.28s ease, box-shadow 0.28s ease;
}

:where(html[data-page="index"]) .btn-watch-video:hover .video-play-icon {
  transform: scale(1.06);
  background: #F5AA1C;
  color: #102039;
  box-shadow: 0 4px 12px rgba(245, 170, 28, 0.4);
}

/* Social Proof & Metrics Area (1:1 Reference Match) */
:where(html[data-page="index"]) .hero-metrics-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 6px;
  width: 100%;
  max-width: 520px;
}

/* Floating White Rounded Stats Card */
:where(html[data-page="index"]) .hero-stats-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 12px 24px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 10px 30px rgba(16, 32, 57, 0.05), 0 1px 3px rgba(16, 32, 57, 0.02);
  width: 100%;
  box-sizing: border-box;
}

:where(html[data-page="index"]) .stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .stat-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .icon-mint-soft { 
  background: #EBFBF3; 
}
:where(html[data-page="index"]) .icon-gold-soft { 
  background: #FEF7E8; 
}
:where(html[data-page="index"]) .icon-blue-soft { 
  background: #EDF5FF; 
}

:where(html[data-page="index"]) .stat-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:where(html[data-page="index"]) .stat-num {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 1.22rem;
  font-weight: 800;
  color: #102039;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

:where(html[data-page="index"]) .stat-label {
  font-size: 0.68rem;
  color: #59708F;
  font-weight: 600;
  line-height: 1.25;
  margin-top: 2px;
}

:where(html[data-page="index"]) .stat-divider {
  width: 1px;
  height: 32px;
  background: #E8EEF5;
  flex-shrink: 0;
}

/* Bottom Trust Bar Row */
:where(html[data-page="index"]) .hero-trust-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 2px;
}

:where(html[data-page="index"]) .avatar-stack {
  display: flex;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .avatar-stack img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  margin-left: -10px;
  object-fit: cover;
  box-shadow: 0 2px 4px rgba(16, 32, 57, 0.08);
}

:where(html[data-page="index"]) .avatar-stack img:first-child {
  margin-left: 0;
}

:where(html[data-page="index"]) .avatar-count-badge {
  width: 28px;
  height: 28px;
  background: #F8FAFC;
  border: 2px solid #FFFFFF;
  color: #102039;
  font-size: 11px;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -9px;
  z-index: 5;
  box-shadow: 0 2px 5px rgba(16, 32, 57, 0.08);
}

:where(html[data-page="index"]) .trust-bar-text {
  font-size: 0.82rem;
  color: #59708F;
  line-height: 1.35;
  font-weight: 500;
}

/* ==========================================================================
   HERO RIGHT VISUAL COLLAGE — 1:1 REFERENCE MATCH
   ========================================================================== */
:where(html[data-page="index"]) .hero-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 540px;
}

/* Golden Organic Frame Behind Image */
:where(html[data-page="index"]) .hero-visual-backdrop {
  position: absolute;
  width: 86%;
  height: 94%;
  background: #F0AA1B;
  border-radius: 36px;
  z-index: 0;
  top: 14px;
  right: 18px;
  box-shadow: 0 20px 48px rgba(240, 170, 27, 0.25);
}

/* Main Image Wrapper */
:where(html[data-page="index"]) .hero-image-wrapper {
  position: relative;
  z-index: 2;
  width: 86%;
  max-width: 440px;
  height: 480px;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(16, 26, 43, 0.16);
  border: 3px solid #FFFFFF;
  background: #EAEFF7;
}

:where(html[data-page="index"]) .hero-image-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

:where(html[data-page="index"]) .hero-main-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 14s cubic-bezier(0.25, 1, 0.5, 1);
}

:where(html[data-page="index"]) .hero-image-wrapper:hover .hero-main-photo {
  transform: scale(1.03);
}

/* Floating Cards Common */
:where(html[data-page="index"]) .floating-badge {
  position: absolute;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 18px 45px rgba(16, 26, 43, 0.12);
  border: 1px solid rgba(16, 26, 43, 0.06);
  z-index: 6;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

:where(html[data-page="index"]) .floating-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 55px rgba(16, 26, 43, 0.16);
}

/* Card 1: Strategy Card (Top Left) */
:where(html[data-page="index"]) .floating-badge-top {
  top: -12px;
  left: -20px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

:where(html[data-page="index"]) .floating-badge .icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .icon-yellow { background: #FFF4D5; }
:where(html[data-page="index"]) .icon-whatsapp-brand { background: #E7F8F0; }

:where(html[data-page="index"]) .floating-badge .badge-text {
  display: flex;
  flex-direction: column;
}

:where(html[data-page="index"]) .floating-badge .badge-text strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: #102039;
  line-height: 1.15;
}

:where(html[data-page="index"]) .floating-badge .badge-text span {
  font-size: 0.72rem;
  color: #59708F;
  font-weight: 500;
  line-height: 1.25;
}

:where(html[data-page="index"]) .badge-arrow-pill {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #59708F;
  background: #F8FAFC;
  margin-left: 2px;
}

/* Card 2: Growth Spark Card (Top Right) */
:where(html[data-page="index"]) .floating-badge-growth {
  top: 60px;
  right: -18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 140px;
}

:where(html[data-page="index"]) .growth-chart-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:where(html[data-page="index"]) .growth-dot-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #24B5A8;
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(html[data-page="index"]) .growth-keywords {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

:where(html[data-page="index"]) .growth-keywords span {
  font-size: 0.78rem;
  font-weight: 750;
  color: #1B8A7E;
  line-height: 1.25;
}

/* Card 3: Lead Gen Card (Bottom Right) */
:where(html[data-page="index"]) .floating-badge-lead {
  bottom: 110px;
  right: -24px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Card 4: Dark Testimonial Box (Bottom Left Overlap) */
:where(html[data-page="index"]) .floating-testimonial-dark {
  position: absolute;
  bottom: 8px;
  left: -32px;
  z-index: 7;
  background: #101A2B;
  color: #FFFFFF;
  border-radius: 20px;
  padding: 16px 20px;
  max-width: 320px;
  box-shadow: 0 24px 60px rgba(16, 26, 43, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

:where(html[data-page="index"]) .testimonial-dark-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

:where(html[data-page="index"]) .testimonial-dark-avatars {
  display: flex;
  align-items: center;
}

:where(html[data-page="index"]) .testimonial-dark-avatars img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #101A2B;
  margin-left: -7px;
  object-fit: cover;
}

:where(html[data-page="index"]) .testimonial-dark-avatars img:first-child {
  margin-left: 0;
}

:where(html[data-page="index"]) .gold-stars {
  color: #F5AA1C;
  font-size: 11px;
  letter-spacing: 2px;
}

:where(html[data-page="index"]) .testimonial-dark-quote {
  font-size: 0.78rem;
  line-height: 1.45;
  color: #D8E2EE;
  margin-bottom: 6px;
  font-style: normal;
}

:where(html[data-page="index"]) .testimonial-dark-author {
  font-size: 0.68rem;
  color: #8B9AB0;
  font-weight: 600;
}

/* ==========================================================================
   BOTTOM CAPABILITY STRIP — EXACT REFERENCE SPEC
   ========================================================================== */
:where(html[data-page="index"]) .hero-capability-bar-wrapper {
  margin-top: 52px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:where(html[data-page="index"]) .hero-capability-bar {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-pill, 999px);
  padding: 14px 32px;
  box-shadow: 0 10px 36px rgba(16, 26, 43, 0.07);
  gap: 24px;
  flex: 1;
  max-width: 1080px;
}

:where(html[data-page="index"]) .cap-strip-label {
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  color: #8B9AB0;
  white-space: nowrap;
  padding-right: 12px;
}

:where(html[data-page="index"]) .cap-strip-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}

:where(html[data-page="index"]) .cap-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

:where(html[data-page="index"]) .cap-item:hover {
  transform: translateY(-2px);
}

:where(html[data-page="index"]) .cap-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .icon-meta { background: #EAF2FF; color: #3D85FF; }
:where(html[data-page="index"]) .icon-wa { background: #E7F8F0; color: #25D366; }
:where(html[data-page="index"]) .icon-funnel { background: #EEF2F6; color: #59708F; }
:where(html[data-page="index"]) .icon-response { background: #F3E8FF; color: #8A5CF6; }
:where(html[data-page="index"]) .icon-scoring { background: #EAF2FF; color: #3D85FF; }
:where(html[data-page="index"]) .icon-crm { background: #E7F8F0; color: #32BA78; }
:where(html[data-page="index"]) .icon-scale { background: #FFF4D5; color: #F0A51A; }

:where(html[data-page="index"]) .cap-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

:where(html[data-page="index"]) .cap-text strong {
  font-size: 0.88rem;
  font-weight: 750;
  color: #102039;
}

:where(html[data-page="index"]) .cap-text span {
  font-size: 0.72rem;
  color: #59708F;
}

:where(html[data-page="index"]) .cap-sep {
  width: 1px;
  height: 32px;
  background: #E2E8F0;
}

:where(html[data-page="index"]) .hero-anno-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-handwriting, 'Caveat', cursive, sans-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: #E89725;
  line-height: 1.08;
  pointer-events: none;
  margin-left: 24px;
  white-space: nowrap;
}

:where(html[data-page="index"]) .hero-anno-bottom svg {
  flex-shrink: 0;
  transform: translateY(2px);
}

/* ==========================================================================
   RELATIONSHIPS & RESULTS SECTION — PIXEL ACCURATE REBUILD
   ========================================================================== */
:where(html[data-page="index"]) .relations-results-section {
  padding: 88px 0 96px;
  background-color: #FFF8EC;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Ambient Corner Glows & Doodles */
:where(html[data-page="index"]) .rel-ambient-glow-top-right {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 580px;
  height: 580px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 199, 46, 0.09) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

:where(html[data-page="index"]) .rel-ambient-glow-bottom-left {
  position: absolute;
  bottom: -100px;
  left: -80px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 128, 237, 0.06) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

:where(html[data-page="index"]) .rel-ambient-mint-shape {
  position: absolute;
  top: 38%;
  left: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(47, 183, 167, 0.05);
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}

:where(html[data-page="index"]) .rel-bottom-left-squiggle {
  position: absolute;
  bottom: 24px;
  left: 28px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
}

/* Container & Grid Layout */
:where(html[data-page="index"]) .relations-results-container {
  position: relative;
  z-index: 2;
  max-width: 1380px;
}

:where(html[data-page="index"]) .relations-results-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  gap: 56px;
  align-items: center;
}

/* ── Left Column: Philosophy & Proof ─────────────────────────────────────── */
:where(html[data-page="index"]) .rel-left-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 660px;
}

/* Eyebrow Badge */
:where(html[data-page="index"]) .rel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8125rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5B6A80;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #E6EAEF;
  padding: 6px 15px;
  border-radius: 999px;
  margin-bottom: 22px;
  box-shadow: 0 2px 8px rgba(20, 36, 61, 0.03);
}

:where(html[data-page="index"]) .rel-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2FB7A7;
  box-shadow: 0 0 0 5px rgba(47, 183, 167, 0.16);
  flex-shrink: 0;
}

/* Headline with High-Impact Typography */
:where(html[data-page="index"]) .rel-headline {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(2.35rem, 3.75vw, 3.65rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.038em;
  color: #14243D;
  margin: 0;
  position: relative;
}

:where(html[data-page="index"]) .rel-sunburst-wrap {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  transform: translateY(-4px);
}

:where(html[data-page="index"]) .rel-sunburst-svg {
  display: block;
}

:where(html[data-page="index"]) .rel-highlight-blue {
  color: #2F80ED;
  font-weight: 800;
}

:where(html[data-page="index"]) .rel-highlight-results {
  color: #14243D;
  font-weight: 800;
  position: relative;
  display: inline-block;
  z-index: 1;
}

:where(html[data-page="index"]) .rel-highlight-results::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 6px;
  height: 16px;
  background: #F8C72E;
  border-radius: 4px;
  z-index: -1;
  opacity: 0.85;
}

/* Supporting Copy */
:where(html[data-page="index"]) .rel-supporting-copy {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.62;
  color: #65738A;
  margin-top: 22px;
  margin-bottom: 0;
  max-width: 580px;
  font-weight: 450;
}

/* Statistics Panel (Unified 3-Item White Card) */
:where(html[data-page="index"]) .rel-stats-panel {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #E8EDF1;
  border-radius: 20px;
  box-shadow: 0 10px 32px rgba(20, 36, 61, 0.055);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  margin-top: 28px;
  gap: 12px;
}

:where(html[data-page="index"]) .rel-stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

:where(html[data-page="index"]) .rel-stat-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .rel-stat-icon-wrap.icon-mint { background: #E7F8EF; }
:where(html[data-page="index"]) .rel-stat-icon-wrap.icon-gold { background: #FFF5CC; }
:where(html[data-page="index"]) .rel-stat-icon-wrap.icon-blue { background: #EAF2FF; }

:where(html[data-page="index"]) .rel-stat-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

:where(html[data-page="index"]) .rel-stat-number {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(1.35rem, 1.75vw, 1.7rem);
  font-weight: 800;
  color: #14243D;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

:where(html[data-page="index"]) .rel-stat-label {
  font-size: 0.725rem;
  font-weight: 700;
  color: #78879B;
  text-transform: capitalize;
  letter-spacing: -0.01em;
  margin-top: 2px;
  white-space: nowrap;
}

:where(html[data-page="index"]) .rel-stat-sep {
  width: 1px;
  height: 38px;
  background: #E6EAEF;
  flex-shrink: 0;
}

/* Four Value/Relationship Cards (2x2 Grid) */
:where(html[data-page="index"]) .rel-values-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 20px;
}

:where(html[data-page="index"]) .rel-value-card {
  background: #FFFFFF;
  border: 1px solid #E8EDF1;
  border-radius: 16px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 42px 1fr 18px;
  align-items: center;
  gap: 12px;
  box-shadow: 0 6px 20px rgba(20, 36, 61, 0.04);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
  cursor: default;
}

:where(html[data-page="index"]) .rel-value-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(20, 36, 61, 0.08);
  border-color: #D6DFE7;
}

:where(html[data-page="index"]) .rel-value-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .rel-value-icon.icon-blue   { background: #EAF2FF; }
:where(html[data-page="index"]) .rel-value-icon.icon-yellow { background: #FFF5CC; }
:where(html[data-page="index"]) .rel-value-icon.icon-mint   { background: #E7F8EF; }
:where(html[data-page="index"]) .rel-value-icon.icon-purple { background: #F0EAFE; }

:where(html[data-page="index"]) .rel-value-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

:where(html[data-page="index"]) .rel-value-text strong {
  font-size: 0.925rem;
  font-weight: 750;
  color: #14243D;
  line-height: 1.22;
  margin-bottom: 2px;
}

:where(html[data-page="index"]) .rel-value-text span {
  font-size: 0.775rem;
  color: #708097;
  line-height: 1.35;
}

:where(html[data-page="index"]) .rel-value-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14243D;
  opacity: 0.65;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

:where(html[data-page="index"]) .rel-value-card:hover .rel-value-arrow {
  transform: translateX(3px);
  opacity: 1;
}

/* CTA Row */
:where(html[data-page="index"]) .rel-cta-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 26px;
  flex-wrap: wrap;
}

:where(html[data-page="index"]) .btn-navy-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: #14243D;
  color: #FFFFFF !important;
  font-size: 0.9375rem;
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(20, 36, 61, 0.18);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
}

:where(html[data-page="index"]) .btn-navy-cta:hover {
  background: #213654;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(20, 36, 61, 0.24);
  color: #FFFFFF !important;
}

:where(html[data-page="index"]) .btn-impact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #14243D;
  font-size: 0.9375rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

:where(html[data-page="index"]) .btn-impact-link span:last-child {
  position: relative;
  text-decoration: underline;
  text-decoration-color: #F8C72E;
  text-underline-offset: 5px;
}

:where(html[data-page="index"]) .btn-impact-link:hover {
  color: #2F80ED;
}

:where(html[data-page="index"]) .impact-play-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #14243D;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  box-shadow: 0 3px 10px rgba(20, 36, 61, 0.08);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .btn-impact-link:hover .impact-play-circle {
  transform: scale(1.08);
  border-color: #2F80ED;
  background: #EAF2FF;
}

/* ── Right Column: Interactive Service Ecosystem Network ─────────────────── */
:where(html[data-page="index"]) .rel-right-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Handwritten Annotation & Curved Arrow */
:where(html[data-page="index"]) .orbit-annotation {
  position: absolute;
  top: -12px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 10;
  pointer-events: none;
}

:where(html[data-page="index"]) .orbit-annotation span {
  font-family: 'Caveat', 'Playpen Sans', 'Kalam', 'Segoe Script', cursive, sans-serif;
  font-size: 1.38rem;
  font-weight: 700;
  color: #182C46;
  line-height: 1.15;
  transform: rotate(-3deg);
  text-align: right;
}

:where(html[data-page="index"]) .orbit-curved-arrow {
  margin-top: 3px;
  margin-right: 14px;
}

/* Orbit Network Wrapper (1:1 Ratio) */
:where(html[data-page="index"]) .orbit-network-wrapper {
  position: relative;
  width: 100%;
  max-width: 530px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* Concentric SVG Canvas & Dynamic Connectors */
:where(html[data-page="index"]) .orbit-svg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

:where(html[data-page="index"]) .connector-line {
  transition: stroke-opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), stroke-width 0.3s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s ease, filter 0.3s ease;
  animation: page-index-beamFlow 3.5s linear infinite;
}

:where(html[data-page="index"]) .connector-line.active {
  stroke-opacity: 1 !important;
  stroke-width: 3.6px !important;
  stroke-dasharray: none !important;
  filter: drop-shadow(0 0 8px currentColor);
}

:where(html[data-page="index"]) .orbit-network-wrapper.has-active .connector-line:not(.active) {
  stroke-opacity: 0.12;
}

/* Orbit Rotator Animations */
:where(html[data-page="index"]) .orbit-rotator-outer {
  transform-origin: 300px 300px;
  animation: page-index-orbitRotateCW 75s linear infinite;
}

:where(html[data-page="index"]) .orbit-rotator-inner {
  transform-origin: 300px 300px;
  animation: page-index-orbitRotateCCW 50s linear infinite;
}

/* Ambient Center Aura Glow Pulse */
:where(html[data-page="index"]) .orbit-ambient-pulse {
  transform-origin: 300px 300px;
  animation: page-index-orbitAuraBreath 6s ease-in-out infinite alternate;
}

/* Radar Wave Ripples */
:where(html[data-page="index"]) .orbit-radar-wave {
  transform-origin: 300px 300px;
  opacity: 0;
}

:where(html[data-page="index"]) .orbit-radar-wave.wave-1 {
  animation: page-index-orbitRadarPulse 5s cubic-bezier(0.2, 0.8, 0.3, 1) infinite;
}

:where(html[data-page="index"]) .orbit-radar-wave.wave-2 {
  animation: page-index-orbitRadarPulse 5s cubic-bezier(0.2, 0.8, 0.3, 1) infinite 2.5s;
}

/* Traveling Photons */
:where(html[data-page="index"]) .photon {
  transform-box: view-box;
  transform-origin: 0px 0px;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

:where(html[data-page="index"]) .photon-strategy    { animation: page-index-photonMoveStrategy 3.2s infinite; }
:where(html[data-page="index"]) .photon-marketing   { animation: page-index-photonMoveMarketing 3.6s infinite 0.4s; }
:where(html[data-page="index"]) .photon-development { animation: page-index-photonMoveDevelopment 3.4s infinite 0.8s; }
:where(html[data-page="index"]) .photon-design      { animation: page-index-photonMoveDesign 3.8s infinite 1.2s; }
:where(html[data-page="index"]) .photon-seo         { animation: page-index-photonMoveSeo 3.5s infinite 1.6s; }
:where(html[data-page="index"]) .photon-automation  { animation: page-index-photonMoveAutomation 3.3s infinite 2.0s; }
:where(html[data-page="index"]) .photon-branding    { animation: page-index-photonMoveBranding 3.7s infinite 2.4s; }

/* SVG Keyframe Animations */
@keyframes page-index-orbitRotateCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes page-index-orbitRotateCCW {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

@keyframes page-index-orbitAuraBreath {
  0%   { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(1.08); opacity: 1; }
}

@keyframes page-index-beamFlow {
  to {
    stroke-dashoffset: -28;
  }
}

@keyframes page-index-orbitRadarPulse {
  0% {
    r: 95px;
    opacity: 0.6;
    stroke-width: 2.2px;
  }
  70% {
    opacity: 0.18;
    stroke-width: 1px;
  }
  100% {
    r: 250px;
    opacity: 0;
    stroke-width: 0.5px;
  }
}

/* Coordinate translations for photons from Center (300, 300) to Node positions */
@keyframes page-index-photonMoveStrategy {
  0%   { transform: translate(300px, 300px); opacity: 0; }
  25%  { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translate(300px, 105px); opacity: 0; }
}

@keyframes page-index-photonMoveMarketing {
  0%   { transform: translate(300px, 300px); opacity: 0; }
  25%  { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translate(445px, 190px); opacity: 0; }
}

@keyframes page-index-photonMoveDevelopment {
  0%   { transform: translate(300px, 300px); opacity: 0; }
  25%  { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translate(475px, 335px); opacity: 0; }
}

@keyframes page-index-photonMoveDesign {
  0%   { transform: translate(300px, 300px); opacity: 0; }
  25%  { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translate(415px, 465px); opacity: 0; }
}

@keyframes page-index-photonMoveSeo {
  0%   { transform: translate(300px, 300px); opacity: 0; }
  25%  { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translate(185px, 465px); opacity: 0; }
}

@keyframes page-index-photonMoveAutomation {
  0%   { transform: translate(300px, 300px); opacity: 0; }
  25%  { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translate(125px, 335px); opacity: 0; }
}

@keyframes page-index-photonMoveBranding {
  0%   { transform: translate(300px, 300px); opacity: 0; }
  25%  { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translate(155px, 190px); opacity: 0; }
}

/* Center Hub Node: Modern Glassmorphic Growth Engine Core */
:where(html[data-page="index"]) .orbit-center-node {
  position: absolute;
  z-index: 8;
  width: 174px;
  height: 110px;
  border-radius: 26px;
  background: radial-gradient(135% 120% at 50% 0%, #1c3358 0%, #0c1728 100%);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 22px 50px -8px rgba(12, 23, 40, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.28),
    inset 0 -12px 24px rgba(0, 0, 0, 0.25);
  border: 1.5px solid rgba(47, 183, 167, 0.22);
  text-align: center;
  padding: 8px 10px;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}

:where(html[data-page="index"]) .orbit-center-node:hover {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 
    0 28px 65px -10px rgba(47, 128, 237, 0.35),
    0 0 24px rgba(47, 183, 167, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.4);
  border-color: rgba(47, 183, 167, 0.55);
}

/* Subtle Specular Sheen across top glass */
:where(html[data-page="index"]) .hub-glow-reflection {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  border-radius: 26px 26px 0 0;
}

/* Micro Live Status Indicator Pill */
:where(html[data-page="index"]) .hub-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(47, 183, 167, 0.14);
  border: 1px solid rgba(47, 183, 167, 0.35);
  padding: 1px 6px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 3px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

:where(html[data-page="index"]) .hub-live-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #2FB7A7;
  box-shadow: 0 0 6px #2FB7A7;
  display: inline-block;
  animation: page-index-hubDotPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

:where(html[data-page="index"]) .hub-live-text {
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #7EF2E4;
  text-transform: uppercase;
  line-height: 1;
}

@keyframes page-index-hubDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.5; }
}

:where(html[data-page="index"]) .center-brand {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  line-height: 1.05;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

:where(html[data-page="index"]) .center-brand .brand-text {
  background: linear-gradient(180deg, #FFFFFF 40%, #D8E7FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

:where(html[data-page="index"]) .center-brand .dot {
  background: linear-gradient(135deg, #2FB7A7 0%, #7EF2E4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(47, 183, 167, 0.45));
}

:where(html[data-page="index"]) .center-subtitle-wrap {
  margin-top: 3px;
  position: relative;
  z-index: 2;
  width: 100%;
}

:where(html[data-page="index"]) .center-subtitle {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  display: inline-block;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.5px 6px;
  border-radius: var(--radius-pill, 9999px);
  white-space: nowrap;
}

/* 7 Radial Service Nodes */
:where(html[data-page="index"]) .orbit-service-node {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transform: translate(-50%, -26px);
  transform-origin: center 26px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), z-index 0.1s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

:where(html[data-page="index"]) .orbit-service-node:focus-visible {
  outline: 2px solid #2F80ED;
  outline-offset: 4px;
  border-radius: 16px;
}

:where(html[data-page="index"]) .orbit-service-node:hover,:where(html[data-page="index"]) 
.orbit-service-node.active {
  z-index: 12;
  transform: translate(-50%, -26px) scale(1.08);
}

/* Radial Coordinates (Centered on SVG coordinates) */
:where(html[data-page="index"]) .node-strategy    { top: 17.5%; left: 50.0%; }
:where(html[data-page="index"]) .node-marketing   { top: 31.7%; left: 74.2%; }
:where(html[data-page="index"]) .node-development { top: 55.8%; left: 79.2%; }
:where(html[data-page="index"]) .node-design      { top: 77.5%; left: 69.2%; }
:where(html[data-page="index"]) .node-seo         { top: 77.5%; left: 30.8%; }
:where(html[data-page="index"]) .node-automation  { top: 55.8%; left: 20.8%; }
:where(html[data-page="index"]) .node-branding    { top: 31.7%; left: 25.8%; }

:where(html[data-page="index"]) .service-icon-bubble {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(20, 36, 61, 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .orbit-service-node:hover .service-icon-bubble,:where(html[data-page="index"]) 
.orbit-service-node.active .service-icon-bubble {
  box-shadow: 0 12px 28px rgba(20, 36, 61, 0.18);
}

/* Pastel Bubble Backgrounds */
:where(html[data-page="index"]) .bg-soft-yellow   { background: #FFF5CC; }
:where(html[data-page="index"]) .bg-soft-pink     { background: #FCEAF4; }
:where(html[data-page="index"]) .bg-soft-blue     { background: #EAF2FF; }
:where(html[data-page="index"]) .bg-soft-mint     { background: #EAF8EF; }
:where(html[data-page="index"]) .bg-soft-lavender { background: #F0EAFE; }
:where(html[data-page="index"]) .bg-soft-teal     { background: #E7F8F5; }
:where(html[data-page="index"]) .bg-soft-orange   { background: #FFF0E5; }

:where(html[data-page="index"]) .service-badge-label {
  margin-top: 4px;
  padding: 3px 10px;
  background: #FFFFFF;
  border-radius: var(--radius-pill);
  font-size: 0.775rem;
  font-weight: 750;
  color: #0E1B2F;
  box-shadow: 0 4px 14px rgba(20, 36, 61, 0.08);
  white-space: nowrap;
  line-height: 1.3;
  border: 1px solid rgba(20, 36, 61, 0.06);
  transition: all 0.2s ease;
  letter-spacing: -0.01em;
}

:where(html[data-page="index"]) .orbit-service-node:hover .service-badge-label,:where(html[data-page="index"]) 
.orbit-service-node.active .service-badge-label {
  color: #2F80ED;
  border-color: rgba(47, 128, 237, 0.35);
  box-shadow: 0 6px 18px rgba(47, 128, 237, 0.18);
  transform: translateY(-1px);
}

:where(html[data-page="index"]) .service-subtext {
  font-size: 0.675rem;
  color: #64748B;
  margin-top: 2px;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

:where(html[data-page="index"]) .orbit-service-node:hover .service-subtext,:where(html[data-page="index"]) 
.orbit-service-node.active .service-subtext {
  color: #0E1B2F;
}

/* Bottom Support Bar */
:where(html[data-page="index"]) .orbit-support-bar {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(47, 183, 167, 0.30);
  border-radius: var(--radius-pill);
  padding: 8px 20px;
  box-shadow: 0 6px 20px rgba(20, 36, 61, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  z-index: 5;
  max-width: 100%;
}

:where(html[data-page="index"]) .support-bar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .support-bar-text {
  font-size: 0.785rem;
  font-weight: 700;
  color: #14243D;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  text-align: center;
}

:where(html[data-page="index"]) .support-bar-text span {
  color: #10B981;
  font-weight: 800;
}

:where(html[data-page="index"]) .support-bar-arrow {
  position: absolute;
  right: -24px;
  top: -12px;
  pointer-events: none;
}

/* ── Responsive Media Queries ────────────────────────────────────────────── */

/* Tablet Landscape / Small Desktop (1024px–1279px) */
@media (max-width: 1279px) {
  :where(html[data-page="index"]) .relations-results-grid {
    gap: 40px;
  }
  :where(html[data-page="index"]) .orbit-network-wrapper {
    max-width: 480px;
  }
  :where(html[data-page="index"]) .orbit-service-node {
    transform: translate(-50%, -24px);
    transform-origin: center 24px;
  }
  :where(html[data-page="index"]) .orbit-service-node:hover,:where(html[data-page="index"]) 
  .orbit-service-node.active {
    transform: translate(-50%, -24px) scale(1.08);
  }
  :where(html[data-page="index"]) .service-icon-bubble {
    width: 48px;
    height: 48px;
  }
  :where(html[data-page="index"]) .service-badge-label {
    font-size: 0.725rem;
    padding: 2.5px 8px;
  }
  :where(html[data-page="index"]) .service-subtext {
    font-size: 0.625rem;
  }
  :where(html[data-page="index"]) .orbit-center-node {
    width: 150px;
    height: 94px;
  }
  :where(html[data-page="index"]) .center-brand {
    font-size: 1.4rem;
  }
}

/* Tablet Portrait (768px–1023px): Stack Columns */
@media (max-width: 1023px) {
  :where(html[data-page="index"]) .relations-results-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    width: 100%;
    min-width: 0;
  }
  :where(html[data-page="index"]) .rel-left-col {
    max-width: 100%;
    width: 100%;
    min-width: 0;
  }
  :where(html[data-page="index"]) .rel-right-col {
    width: 100%;
    min-width: 0;
  }
  :where(html[data-page="index"]) .rel-supporting-copy {
    max-width: 100%;
  }
  :where(html[data-page="index"]) .orbit-network-wrapper {
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
  }
  :where(html[data-page="index"]) .orbit-annotation {
    display: none;
  }
  :where(html[data-page="index"]) .service-badge-label {
    font-size: 0.725rem;
    padding: 2.5px 8px;
  }
}

/* Mobile Large (480px–767px) */
@media (max-width: 767px) {
  :where(html[data-page="index"]) .relations-results-section {
    padding: 56px 0 64px;
    overflow: hidden;
  }
  :where(html[data-page="index"]) .relations-results-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  :where(html[data-page="index"]) .rel-headline {
    font-size: clamp(2rem, 7.5vw, 2.65rem);
    max-width: 100%;
  }
  :where(html[data-page="index"]) .rel-stats-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 8px;
    padding: 14px 12px;
    border-radius: 16px;
    align-items: center;
  }
  :where(html[data-page="index"]) .rel-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 0;
    border-bottom: none;
    min-width: 0;
  }
  :where(html[data-page="index"]) .rel-stat-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  :where(html[data-page="index"]) .rel-stat-icon-wrap svg {
    width: 17px;
    height: 17px;
  }
  :where(html[data-page="index"]) .rel-stat-content {
    align-items: center;
    min-width: 0;
    max-width: 100%;
  }
  :where(html[data-page="index"]) .rel-stat-number {
    font-size: 1.15rem;
    line-height: 1.1;
  }
  :where(html[data-page="index"]) .rel-stat-label {
    font-size: 0.62rem;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
  :where(html[data-page="index"]) .rel-stat-sep {
    display: block;
    width: 1px;
    height: 36px;
    background: #E8EDF1;
  }
  :where(html[data-page="index"]) .rel-values-grid {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  :where(html[data-page="index"]) .rel-value-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  :where(html[data-page="index"]) .orbit-network-wrapper {
    max-width: 380px;
    width: 100%;
    margin: 0 auto;
  }
  :where(html[data-page="index"]) .orbit-service-node {
    transform: translate(-50%, -23px);
    transform-origin: center 23px;
  }
  :where(html[data-page="index"]) .orbit-service-node:hover,:where(html[data-page="index"]) 
  .orbit-service-node.active {
    transform: translate(-50%, -23px) scale(1.08);
  }
  :where(html[data-page="index"]) .service-icon-bubble {
    width: 46px;
    height: 46px;
  }
  :where(html[data-page="index"]) .service-icon-bubble svg {
    width: 22px;
    height: 22px;
  }
  :where(html[data-page="index"]) .service-badge-label {
    font-size: 0.72rem;
    padding: 2.5px 8px;
    margin-top: 3px;
  }
  :where(html[data-page="index"]) .service-subtext {
    font-size: 0.60rem;
    margin-top: 1.5px;
  }
  :where(html[data-page="index"]) .orbit-center-node {
    width: 105px;
    height: 72px;
    border-radius: 16px;
    padding: 6px 8px;
  }
  :where(html[data-page="index"]) .hub-live-badge {
    padding: 1.5px 5px;
    gap: 4px;
    margin-bottom: 3px;
  }
  :where(html[data-page="index"]) .hub-live-text {
    font-size: 0.42rem;
  }
  :where(html[data-page="index"]) .hub-live-dot {
    width: 5px;
    height: 5px;
  }
  :where(html[data-page="index"]) .center-brand {
    font-size: 0.85rem;
  }
  :where(html[data-page="index"]) .center-subtitle {
    font-size: 0.38rem;
    padding: 1px 4px;
  }
  :where(html[data-page="index"]) .center-subtitle-wrap {
    margin-top: 3px;
  }
  :where(html[data-page="index"]) .orbit-support-bar {
    padding: 7px 16px;
    margin-top: 20px;
  }
  :where(html[data-page="index"]) .support-bar-text {
    font-size: 0.72rem;
  }
  :where(html[data-page="index"]) .support-bar-arrow {
    display: none;
  }
}

/* Mobile Small (≤ 479px) */
@media (max-width: 479px) {
  :where(html[data-page="index"]) .relations-results-section {
    padding: 44px 0 52px;
  }
  :where(html[data-page="index"]) .rel-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
  }
  :where(html[data-page="index"]) .btn-navy-cta {
    width: 100%;
    min-height: 48px;
  }
  :where(html[data-page="index"]) .btn-impact-link {
    justify-content: center;
    min-height: 44px;
  }
  :where(html[data-page="index"]) .orbit-network-wrapper {
    max-width: 330px;
    width: 100%;
    margin: 0 auto;
  }
  :where(html[data-page="index"]) .orbit-service-node {
    transform: translate(-50%, -21px);
    transform-origin: center 21px;
  }
  :where(html[data-page="index"]) .orbit-service-node:hover,:where(html[data-page="index"]) 
  .orbit-service-node.active {
    transform: translate(-50%, -21px) scale(1.08);
  }
  :where(html[data-page="index"]) .service-icon-bubble {
    width: 42px;
    height: 42px;
    border-width: 2.5px;
  }
  :where(html[data-page="index"]) .service-icon-bubble svg {
    width: 20px;
    height: 20px;
  }
  :where(html[data-page="index"]) .service-badge-label {
    font-size: 0.66rem;
    padding: 2px 7px;
    margin-top: 2.5px;
  }
  :where(html[data-page="index"]) .service-subtext {
    display: none;
  }
  :where(html[data-page="index"]) .orbit-center-node {
    width: 88px;
    height: 60px;
    border-radius: 12px;
    padding: 4px 6px;
  }
  :where(html[data-page="index"]) .hub-live-badge {
    padding: 1px 4px;
    gap: 3px;
    margin-bottom: 2px;
  }
  :where(html[data-page="index"]) .hub-live-text {
    font-size: 0.35rem;
    letter-spacing: 0.1em;
  }
  :where(html[data-page="index"]) .hub-live-dot {
    width: 3.5px;
    height: 3.5px;
  }
  :where(html[data-page="index"]) .center-brand {
    font-size: 0.72rem;
  }
  :where(html[data-page="index"]) .center-subtitle {
    font-size: 0.32rem;
    letter-spacing: 0.04em;
    padding: 1px 4px;
  }
  :where(html[data-page="index"]) .center-subtitle-wrap {
    margin-top: 2px;
  }
  :where(html[data-page="index"]) .orbit-support-bar {
    padding: 6px 12px;
  }
  :where(html[data-page="index"]) .support-bar-text {
    font-size: 0.66rem;
    gap: 4px;
  }
}

/* Ultra Small (≤ 340px) */
@media (max-width: 340px) {
  :where(html[data-page="index"]) .orbit-network-wrapper {
    max-width: 280px;
    width: 100%;
  }
  :where(html[data-page="index"]) .orbit-service-node {
    transform: translate(-50%, -17.5px);
    transform-origin: center 17.5px;
  }
  :where(html[data-page="index"]) .orbit-service-node:hover,:where(html[data-page="index"]) 
  .orbit-service-node.active {
    transform: translate(-50%, -17.5px) scale(1.08);
  }
  :where(html[data-page="index"]) .service-icon-bubble {
    width: 35px;
    height: 35px;
  }
  :where(html[data-page="index"]) .service-icon-bubble svg {
    width: 16px;
    height: 16px;
  }
  :where(html[data-page="index"]) .service-badge-label {
    font-size: 0.60rem;
    padding: 1.5px 5px;
  }
  :where(html[data-page="index"]) .orbit-center-node {
    width: 76px;
    height: 52px;
    border-radius: 10px;
    padding: 3px 4px;
  }
  :where(html[data-page="index"]) .center-brand {
    font-size: 0.65rem;
  }
  :where(html[data-page="index"]) .hub-live-text {
    font-size: 0.32rem;
  }
  :where(html[data-page="index"]) .center-subtitle {
    font-size: 0.30rem;
    letter-spacing: 0.03em;
    padding: 1px 3px;
  }
}

/* Honour reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="index"]) .connector-line,:where(html[data-page="index"]) 
  .orbit-service-node,:where(html[data-page="index"]) 
  .rel-value-card,:where(html[data-page="index"]) 
  .btn-navy-cta,:where(html[data-page="index"]) 
  .impact-play-circle {
    transition: none !important;
    animation: none !important;
  }
}




/* ==========================================================================
   OUR PROCESS / GROWTH CARDS SECTION ("We help you grow your business")
   ========================================================================== */
:where(html[data-page="index"]) .growth-section {
  padding: 96px 0 108px;
  background-color: #FFFFFF;
  position: relative;
  overflow: hidden;
}

:where(html[data-page="index"]) .growth-container {
  max-width: 1380px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ── Top Header Row ──────────────────────────────────────────────────────── */
:where(html[data-page="index"]) .growth-header {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 36px;
  margin-bottom: 52px;
}

:where(html[data-page="index"]) .growth-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Eyebrow with Warm Yellow Bar */
:where(html[data-page="index"]) .growth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #78879B;
  margin-bottom: 12px;
}

:where(html[data-page="index"]) .growth-eyebrow-bar {
  width: 28px;
  height: 3.5px;
  background: #F8C72E;
  border-radius: 2px;
  display: inline-block;
}

/* Headline */
:where(html[data-page="index"]) .growth-title {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(2.35rem, 3.8vw, 3.55rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #14243D;
  margin: 0;
}

:where(html[data-page="index"]) .growth-highlight-grow {
  color: #14243D;
  font-weight: 800;
  position: relative;
  display: inline-block;
  padding: 0 4px;
  border-radius: 6px;
  background: #F8C72E;
  opacity: 0.92;
}

/* Handwritten Script Annotation (Ideas -> Impact) */
:where(html[data-page="index"]) .growth-annotation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  margin-top: 10px;
}

:where(html[data-page="index"]) .annotation-text {
  font-family: 'Caveat', 'Playpen Sans', 'Kalam', cursive, sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #4F637B;
  line-height: 1.1;
  transform: rotate(-6deg);
}

:where(html[data-page="index"]) .annotation-curved-arrow {
  margin-top: 2px;
  margin-left: 8px;
  transform: rotate(8deg);
}

/* Supporting Subtitle */
:where(html[data-page="index"]) .growth-header-middle {
  max-width: 440px;
}

:where(html[data-page="index"]) .growth-subtitle {
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  line-height: 1.62;
  color: #65738A;
  margin: 0;
}

/* Far-Right Organic Sticker Badge ("Your Growth Partner") */
:where(html[data-page="index"]) .growth-partner-sticker {
  background: #FFF8EC;
  border: 1.5px solid rgba(248, 199, 46, 0.35);
  border-radius: 28px 24px 34px 22px;
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 8px 24px rgba(20, 36, 61, 0.04);
  flex-shrink: 0;
  transform: rotate(2deg);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

:where(html[data-page="index"]) .growth-partner-sticker:hover {
  transform: rotate(0deg) scale(1.04);
  box-shadow: 0 12px 30px rgba(20, 36, 61, 0.08);
}

:where(html[data-page="index"]) .sticker-icon-wrap {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(html[data-page="index"]) .sticker-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

:where(html[data-page="index"]) .sticker-sub {
  font-size: 0.75rem;
  font-weight: 700;
  color: #78879B;
  text-transform: capitalize;
}

:where(html[data-page="index"]) .sticker-main {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.95rem;
  font-weight: 800;
  color: #14243D;
  line-height: 1.15;
}

/* ── 4 Cards Grid ────────────────────────────────────────────────────────── */
:where(html[data-page="index"]) .growth-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

:where(html[data-page="index"]) .growth-card {
  background: #FFFFFF;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid #EAEFF4;
  box-shadow: 0 10px 32px rgba(20, 36, 61, 0.05);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

:where(html[data-page="index"]) .growth-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(20, 36, 61, 0.10);
  border-color: #D3DEE8;
}

/* Top Image Wrap */
:where(html[data-page="index"]) .growth-card-img-wrap {
  position: relative;
  width: 100%;
  height: 215px;
  overflow: hidden;
  background: #F1F4F9;
}

:where(html[data-page="index"]) .growth-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

:where(html[data-page="index"]) .growth-card:hover .growth-card-img-wrap img {
  transform: scale(1.06);
}

/* Step Badge (Top Left of Image) */
:where(html[data-page="index"]) .card-step-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 4px 13px;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-weight: 800;
  font-size: 0.8125rem;
  color: #14243D;
  box-shadow: 0 4px 14px rgba(20, 36, 61, 0.12);
}

/* Floating Overlay Pill (Bottom Right of Image) */
:where(html[data-page="index"]) .card-floating-pill {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(20, 36, 61, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

:where(html[data-page="index"]) .pill-icon-bubble {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .pill-text {
  font-size: 0.675rem;
  font-weight: 750;
  color: #14243D;
  line-height: 1.22;
  white-space: nowrap;
  text-align: left;
}

/* Card Body Content */
:where(html[data-page="index"]) .growth-card-body {
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  z-index: 1;
}

:where(html[data-page="index"]) .growth-card-icon-bubble {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .growth-card-title {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: #14243D;
  line-height: 1.25;
  margin-bottom: 8px;
}

:where(html[data-page="index"]) .growth-card-desc {
  font-size: 0.885rem;
  color: #708097;
  line-height: 1.52;
  margin-bottom: 22px;
  flex: 1;
}

/* Card Footer & Link */
:where(html[data-page="index"]) .growth-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #F0F4F8;
  position: relative;
  z-index: 2;
}

:where(html[data-page="index"]) .growth-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-decoration: none;
  color: #14243D;
  font-size: 0.9rem;
  font-weight: 750;
  transition: color 0.2s ease;
}

:where(html[data-page="index"]) .growth-card-link:hover {
  color: #2F80ED;
}

:where(html[data-page="index"]) .growth-card-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid #DCE3E9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14243D;
  background: #FFFFFF;
  transition: all 0.22s ease;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .growth-card:hover .growth-card-arrow {
  background: #14243D;
  color: #FFFFFF;
  border-color: #14243D;
  transform: translateX(3px);
}

/* Bottom Right Corner Organic Blobs */
:where(html[data-page="index"]) .card-corner-blob {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 96px;
  height: 96px;
  border-radius: 100% 0 0 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

:where(html[data-page="index"]) .growth-card:hover .card-corner-blob {
  opacity: 1;
}

:where(html[data-page="index"]) .blob-blue   { background: #EAF2FF; }
:where(html[data-page="index"]) .blob-yellow { background: #FFF5CC; }
:where(html[data-page="index"]) .blob-mint   { background: #EAF8EF; }
:where(html[data-page="index"]) .blob-purple { background: #F0EAFE; }

/* ── Responsive Breakpoints for Growth Section ───────────────────────────── */

/* Tablet Landscape / Small Desktop (1024px–1279px) */
@media (max-width: 1279px) {
  :where(html[data-page="index"]) .growth-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  :where(html[data-page="index"]) .growth-header {
    grid-template-columns: 1fr auto;
    gap: 24px;
  }
  :where(html[data-page="index"]) .growth-annotation {
    display: none;
  }
  :where(html[data-page="index"]) .growth-header-middle {
    max-width: 100%;
    grid-column: 1 / -1;
  }
}

/* Tablet Portrait (768px–1023px) */
@media (max-width: 1023px) {
  :where(html[data-page="index"]) .growth-section {
    padding: 72px 0 80px;
  }
  :where(html[data-page="index"]) .growth-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px;
  }
  :where(html[data-page="index"]) .growth-partner-sticker {
    align-self: flex-start;
    transform: none;
  }
}

/* Mobile Large (480px–767px) */
@media (max-width: 767px) {
  :where(html[data-page="index"]) .growth-section {
    padding: 60px 0 68px;
  }
  :where(html[data-page="index"]) .growth-title {
    font-size: clamp(2rem, 7.5vw, 2.65rem);
  }
  :where(html[data-page="index"]) .growth-cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  :where(html[data-page="index"]) .growth-card-img-wrap {
    height: 200px;
  }
}

/* Mobile Small (≤ 479px) */
@media (max-width: 479px) {
  :where(html[data-page="index"]) .growth-section {
    padding: 48px 0 56px;
  }
  :where(html[data-page="index"]) .growth-card-img-wrap {
    height: 185px;
  }
  :where(html[data-page="index"]) .card-floating-pill {
    padding: 4px 10px;
    gap: 6px;
    bottom: 8px;
    right: 8px;
  }
  :where(html[data-page="index"]) .pill-text {
    font-size: 0.62rem;
  }
  :where(html[data-page="index"]) .growth-card-body {
    padding: 20px 18px 18px;
  }
  :where(html[data-page="index"]) .growth-card-title {
    font-size: 1.15rem;
  }
}


/* ==========================================================================
   INDUSTRY SHOWCASE SECTION ("Solutions for every industry")
   ========================================================================== */
:where(html[data-page="index"]) .industry-section {
  padding: 100px 0 90px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F9FBFC 100%);
  position: relative;
  overflow: hidden;
}

:where(html[data-page="index"]) .industry-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header Row */
:where(html[data-page="index"]) .industry-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 34px;
  position: relative;
}

:where(html[data-page="index"]) .industry-header-left {
  max-width: 680px;
}

:where(html[data-page="index"]) .ind-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #64748B;
  text-transform: uppercase;
  margin-bottom: 12px;
}

:where(html[data-page="index"]) .ind-eyebrow-bar {
  display: inline-block;
  width: 32px;
  height: 2.5px;
  background: #F8C72E;
  border-radius: 2px;
}

:where(html[data-page="index"]) .ind-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.8vw, 2.75rem);
  font-weight: 800;
  color: #14243D;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

:where(html[data-page="index"]) .ind-highlight-every {
  position: relative;
  display: inline-block;
  color: #14243D;
}

:where(html[data-page="index"]) .ind-highlight-every::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0px;
  height: 10px;
  background: #FDE047;
  opacity: 0.75;
  border-radius: 12px;
  z-index: -1;
  transform: rotate(-0.5deg);
}

:where(html[data-page="index"]) .ind-sunburst-wrap {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 2px;
  margin-top: -16px;
}

:where(html[data-page="index"]) .ind-sunburst-wrap svg {
  display: block;
}

/* Header Right - Annotation & Button */
:where(html[data-page="index"]) .industry-header-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

:where(html[data-page="index"]) .ind-top-annotation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  margin-right: -2px;
  margin-top: -8px;
}

:where(html[data-page="index"]) .ind-top-annotation span {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #64748B;
  line-height: 0.96;
  text-align: right;
  letter-spacing: -0.01em;
  display: inline-block;
}

:where(html[data-page="index"]) .ind-loop-arrow {
  flex-shrink: 0;
  margin-bottom: -6px;
}

:where(html[data-page="index"]) .btn-industry-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 9999px;
  color: #14243D;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

:where(html[data-page="index"]) .btn-industry-outline:hover {
  border-color: #14243D;
  background: #14243D;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(20, 36, 61, 0.15);
  transform: translateY(-2px);
}

:where(html[data-page="index"]) .btn-industry-outline svg {
  transition: transform 0.25s ease;
}

:where(html[data-page="index"]) .btn-industry-outline:hover svg {
  transform: translateX(3px);
}

/* Filter Navigation Bar */
:where(html[data-page="index"]) .industry-tabs-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #FFFFFF;
  padding: 6px;
  border-radius: 9999px;
  border: 1px solid #EAEFF4;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  margin-bottom: 28px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

:where(html[data-page="index"]) .industry-tabs-bar::-webkit-scrollbar {
  display: none;
}

:where(html[data-page="index"]) .industry-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  color: #5A6B82;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s ease;
  user-select: none;
}

:where(html[data-page="index"]) .industry-tab-btn svg {
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

:where(html[data-page="index"]) .industry-tab-btn:hover {
  color: #14243D;
  background: #F4F7FA;
}

:where(html[data-page="index"]) .industry-tab-btn.active {
  background: #14243D;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(20, 36, 61, 0.2);
}

:where(html[data-page="index"]) .industry-tab-btn.active svg {
  color: #FFFFFF;
}

/* Main Featured Showcase Card */
:where(html[data-page="index"]) .industry-showcase-card {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  background: #FFFFFF;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.09);
  border: 1px solid #EAEFF4;
  min-height: 480px;
  position: relative;
}

/* Left Photo Pane */
:where(html[data-page="index"]) .industry-image-pane {
  position: relative;
  background: #1E293B;
  overflow: hidden;
  display: flex;
  min-height: 420px;
}

:where(html[data-page="index"]) .industry-image-pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

:where(html[data-page="index"]) .industry-showcase-card:hover .industry-image-pane img {
  transform: scale(1.02);
}

/* Top-Left Image Tag */
:where(html[data-page="index"]) .image-overlay-tag {
  position: absolute;
  top: 24px;
  left: 28px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 2;
}

/* Top-Right Watermark Typography */
:where(html[data-page="index"]) .image-watermark-words {
  position: absolute;
  top: 22px;
  right: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 2;
  line-height: 1.25;
}

/* Floating Glass Testimonial Badge at Bottom */
:where(html[data-page="index"]) .industry-quote-badge {
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 18px 24px;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 3;
}

:where(html[data-page="index"]) .quote-icon-bubble {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFF7D6;
  color: #D97706;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: serif;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .quote-body {
  flex: 1;
  min-width: 0;
}

:where(html[data-page="index"]) .industry-quote-text {
  font-size: 0.86rem;
  font-weight: 600;
  color: #14243D;
  line-height: 1.42;
  margin: 0 0 4px 0;
  font-style: normal;
}

:where(html[data-page="index"]) .industry-quote-author {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748B;
}

:where(html[data-page="index"]) .quote-script-note {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-left: 8px;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
}

:where(html[data-page="index"]) .quote-script-note span {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: #5A6B82;
  line-height: 1.1;
  text-align: left;
}

/* Right Navy Stats Pane */
:where(html[data-page="index"]) .industry-stats-pane {
  background: linear-gradient(145deg, #0d192c 0%, #152642 60%, #1c3254 100%);
  color: #FFFFFF;
  padding: 44px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

:where(html[data-page="index"]) .industry-stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

:where(html[data-page="index"]) .stats-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #38BDF8;
  text-transform: uppercase;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  padding: 4px 12px;
  border-radius: 9999px;
}

:where(html[data-page="index"]) .stats-eyebrow-bar {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #38BDF8;
  border-radius: 50%;
  box-shadow: 0 0 8px #38BDF8;
}

:where(html[data-page="index"]) .industry-chart-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(248, 199, 46, 0.1);
  border: 1px solid rgba(248, 199, 46, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .industry-stats-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0 0 14px 0;
}

:where(html[data-page="index"]) .industry-stats-title .text-gold {
  color: #F8C72E;
  background: linear-gradient(135deg, #F8C72E 0%, #FBBF24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

:where(html[data-page="index"]) .industry-stats-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #94A3B8;
  margin: 0 0 28px 0;
  max-width: 440px;
}

/* 3 Metrics Row */
:where(html[data-page="index"]) .industry-metrics-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0 0 28px 0;
}

:where(html[data-page="index"]) .industry-metric-col {
  text-align: left;
}

:where(html[data-page="index"]) .industry-metric-val {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 1.8vw, 1.75rem);
  font-weight: 800;
  color: #F8FAFC;
  line-height: 1.1;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
}

:where(html[data-page="index"]) .industry-metric-lbl {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748B;
  margin-top: 5px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

:where(html[data-page="index"]) .metric-sep {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 10px;
}

/* CTA & Microcopy */
:where(html[data-page="index"]) .industry-cta-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

:where(html[data-page="index"]) .btn-case-studies {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #F8C72E 0%, #F59E0B 100%);
  color: #0F172A;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.28);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

:where(html[data-page="index"]) .btn-case-studies:hover {
  background: linear-gradient(135deg, #FBBF24 0%, #D97706 100%);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(245, 158, 11, 0.4);
  color: #0F172A;
}

:where(html[data-page="index"]) .btn-case-studies svg {
  transition: transform 0.25s ease;
}

:where(html[data-page="index"]) .btn-case-studies:hover svg {
  transform: translateX(4px);
}

:where(html[data-page="index"]) .industry-cta-microcopy {
  font-size: 0.78rem;
  color: #64748B;
  font-weight: 500;
  margin-left: 4px;
}

/* Watermark Note in Bottom Right */
:where(html[data-page="index"]) .stats-watermark-note {
  position: absolute;
  bottom: 24px;
  right: 28px;
  pointer-events: none;
  text-align: right;
  z-index: 1;
  opacity: 0.25;
}

:where(html[data-page="index"]) .stats-watermark-note span {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #94A3B8;
  line-height: 1.1;
  display: block;
}

/* ==========================================================================
   INDUSTRY SHOWCASE RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1023px) {
  :where(html[data-page="index"]) .industry-showcase-card {
    grid-template-columns: 1fr;
  }

  :where(html[data-page="index"]) .industry-image-pane {
    min-height: 400px;
  }

  :where(html[data-page="index"]) .industry-stats-pane {
    padding: 36px 32px 32px;
  }

  :where(html[data-page="index"]) .ind-top-annotation {
    display: none;
  }
}

@media (max-width: 767px) {
  :where(html[data-page="index"]) .industry-section {
    padding: 70px 0 60px;
  }

  :where(html[data-page="index"]) .industry-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
  }

  :where(html[data-page="index"]) .btn-industry-outline {
    width: 100%;
    justify-content: center;
  }

  :where(html[data-page="index"]) .industry-image-pane {
    min-height: 340px;
  }

  :where(html[data-page="index"]) .industry-quote-badge {
    bottom: 14px;
    left: 14px;
    right: 14px;
    padding: 14px 16px;
    gap: 12px;
  }

  :where(html[data-page="index"]) .quote-script-note {
    display: none;
  }

  :where(html[data-page="index"]) .industry-stats-pane {
    padding: 28px 20px 24px;
  }

  :where(html[data-page="index"]) .stats-watermark-note {
    display: none;
  }

  :where(html[data-page="index"]) .industry-metrics-row {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
    padding: 16px 0;
  }

  :where(html[data-page="index"]) .metric-sep {
    display: block;
    height: 30px;
    margin: 0 8px;
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
  }

  :where(html[data-page="index"]) .btn-case-studies {
    width: 100%;
  }

  :where(html[data-page="index"]) .industry-cta-microcopy {
    text-align: center;
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 479px) {
  :where(html[data-page="index"]) .industry-container {
    padding: 0 16px;
  }

  :where(html[data-page="index"]) .ind-title {
    font-size: 1.75rem;
  }

  :where(html[data-page="index"]) .image-watermark-words {
    font-size: 0.95rem;
    right: 16px;
    top: 16px;
  }

  :where(html[data-page="index"]) .image-overlay-tag {
    left: 16px;
    top: 16px;
  }

  :where(html[data-page="index"]) .industry-quote-badge {
    border-radius: 14px;
    padding: 12px 14px;
  }

  :where(html[data-page="index"]) .quote-icon-bubble {
    width: 30px;
    height: 30px;
    font-size: 1.3rem;
  }

  :where(html[data-page="index"]) .industry-quote-text {
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   STRATEGY CALL BOOKING SECTION
   ========================================================================== */
:where(html[data-page="index"]) .booking-section {
  padding: 110px 0 110px;
  background: 
    radial-gradient(ellipse at 88% 12%, rgba(220, 252, 231, 0.45) 0%, transparent 42%),
    radial-gradient(ellipse at 12% 80%, rgba(254, 243, 199, 0.5) 0%, transparent 45%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
  position: relative;
  overflow: hidden;
}

:where(html[data-page="index"]) .booking-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2;
}

/* Ambient Doodles & Floating Badges */
:where(html[data-page="index"]) .booking-doodle-topleft {
  position: absolute;
  top: 40px;
  left: max(20px, calc((100vw - 1240px) / 2 + 10px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
  z-index: 3;
}

:where(html[data-page="index"]) .booking-doodle-topleft span {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #5A6B82;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

:where(html[data-page="index"]) .doodle-curve-arrow {
  margin-left: 22px;
  margin-top: 1px;
}

:where(html[data-page="index"]) .booking-floating-badge {
  position: absolute;
  top: 36px;
  right: max(20px, calc((100vw - 1240px) / 2 + 10px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
  z-index: 3;
}

:where(html[data-page="index"]) .floating-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #DCFCE7;
  padding: 8px 16px;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.18);
}

:where(html[data-page="index"]) .badge-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .badge-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

:where(html[data-page="index"]) .badge-text-wrap span:first-child {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: #15803D;
}

:where(html[data-page="index"]) .badge-text-wrap span:last-child {
  font-size: 0.72rem;
  font-weight: 600;
  color: #16A34A;
}

:where(html[data-page="index"]) .badge-yellow-arrow {
  margin-right: 32px;
  transform: rotate(-6deg);
}

/* 3-Column Layout Grid */
:where(html[data-page="index"]) .booking-main-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr 1.14fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 40px;
}

/* ==========================================================================
   Column 1: Interactive Calendar Card
   ========================================================================== */
:where(html[data-page="index"]) .calendar-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 28px 24px 22px;
  border: 1px solid #EAEFF4;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
}

:where(html[data-page="index"]) .calendar-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

:where(html[data-page="index"]) .cal-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FEF3C7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .cal-header-titles {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

:where(html[data-page="index"]) .calendar-month-title {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  color: #14243D;
}

:where(html[data-page="index"]) .calendar-subtitle {
  font-size: 0.74rem;
  color: #64748B;
  margin-top: 2px;
}

:where(html[data-page="index"]) .calendar-nav-btns {
  display: flex;
  gap: 6px;
}

:where(html[data-page="index"]) .cal-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5A6B82;
  cursor: pointer;
  transition: all 0.2s ease;
}

:where(html[data-page="index"]) .cal-nav-btn:hover {
  background: #14243D;
  color: #FFFFFF;
  border-color: #14243D;
}

:where(html[data-page="index"]) .calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 600;
  color: #8E9EBA;
  margin-bottom: 8px;
}

:where(html[data-page="index"]) .calendar-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 0.82rem;
  margin-bottom: 18px;
}

:where(html[data-page="index"]) .cal-day {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #14243D;
  cursor: pointer;
  font-weight: 600;
  position: relative;
  transition: all 0.18s ease;
  user-select: none;
}

:where(html[data-page="index"]) .cal-day:hover:not(.disabled) {
  background: #F1F5F9;
  color: #0E1B2F;
}

:where(html[data-page="index"]) .cal-day.selected {
  background: #14243D;
  color: #FFFFFF !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(20, 36, 61, 0.25);
}

:where(html[data-page="index"]) .cal-day.selected::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #F8C72E;
}

:where(html[data-page="index"]) .cal-day.disabled {
  color: #CBD5E1;
  cursor: default;
  font-weight: 400;
}

/* Time Slots */
:where(html[data-page="index"]) .time-slots-container {
  padding-top: 16px;
  border-top: 1px dashed #E2E8F0;
  margin-top: 20px;
}

:where(html[data-page="index"]) .time-slots-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

:where(html[data-page="index"]) .time-slots-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: #14243D;
}

:where(html[data-page="index"]) .time-selected-date-str {
  font-size: 0.74rem;
  font-weight: 600;
  color: #64748B;
}

:where(html[data-page="index"]) .time-slots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

:where(html[data-page="index"]) .time-slot-btn {
  padding: 9px 12px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1.2px solid #E2E8F0;
  color: #14243D;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

:where(html[data-page="index"]) .time-slot-btn:hover {
  border-color: #14243D;
  background: #F8FAFC;
}

:where(html[data-page="index"]) .time-slot-btn.active {
  background: #14243D;
  color: #FFFFFF;
  border-color: #14243D;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(20, 36, 61, 0.2);
}

:where(html[data-page="index"]) .time-zone-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.71rem;
  color: #64748B;
  text-align: center;
}

/* ==========================================================================
   Column 2: Value Proposition & Social Proof
   ========================================================================== */
:where(html[data-page="index"]) .booking-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0;
  position: relative;
}

:where(html[data-page="index"]) .booking-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #E6F8F6;
  color: #0D9488;
  padding: 5px 12px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
  align-self: flex-start;
}

:where(html[data-page="index"]) .booking-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  font-weight: 800;
  color: #14243D;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px 0;
}

:where(html[data-page="index"]) .booking-title-highlight {
  position: relative;
  display: inline-block;
  color: #14243D;
}

:where(html[data-page="index"]) .booking-title-highlight::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0px;
  height: 9px;
  background: #FDE047;
  opacity: 0.75;
  border-radius: 12px;
  z-index: -1;
  transform: rotate(-0.5deg);
}

:where(html[data-page="index"]) .booking-desc {
  font-size: 0.92rem;
  color: #5A6B82;
  margin: 0 0 24px 0;
  line-height: 1.55;
}

:where(html[data-page="index"]) .booking-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

:where(html[data-page="index"]) .booking-benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

:where(html[data-page="index"]) .benefit-icon-bubble {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .benefit-icon-bubble.green {
  background: #DCFCE7;
}

:where(html[data-page="index"]) .benefit-icon-bubble.blue {
  background: #E0F2FE;
}

:where(html[data-page="index"]) .benefit-icon-bubble.purple {
  background: #F3E8FF;
}

:where(html[data-page="index"]) .benefit-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

:where(html[data-page="index"]) .benefit-text strong {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: #14243D;
}

:where(html[data-page="index"]) .benefit-text span {
  font-size: 0.76rem;
  color: #64748B;
}

/* Center Doodle */
:where(html[data-page="index"]) .booking-doodle-grow {
  position: absolute;
  right: -10px;
  bottom: 60px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
  z-index: 3;
}

:where(html[data-page="index"]) .booking-doodle-grow span {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #5A6B82;
  line-height: 1.05;
}

/* Social Proof */
:where(html[data-page="index"]) .booking-social-proof {
  padding-top: 16px;
  border-top: 1px solid #EAEFF4;
}

:where(html[data-page="index"]) .social-proof-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: #64748B;
  margin-bottom: 8px;
}

:where(html[data-page="index"]) .social-proof-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

:where(html[data-page="index"]) .avatar-stack {
  display: flex;
  align-items: center;
}

:where(html[data-page="index"]) .avatar-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFFFFF;
  margin-left: -8px;
}

:where(html[data-page="index"]) .avatar-thumb:first-child {
  margin-left: 0;
}

:where(html[data-page="index"]) .avatar-more-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #EAEFF4;
  color: #14243D;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFFFFF;
  margin-left: -8px;
}

:where(html[data-page="index"]) .rating-stars-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

:where(html[data-page="index"]) .star-icons-row {
  display: flex;
  gap: 2px;
}

:where(html[data-page="index"]) .rating-score-text {
  font-size: 0.78rem;
  color: #64748B;
}

:where(html[data-page="index"]) .rating-score-text strong {
  color: #14243D;
}

/* ==========================================================================
   Column 3: Lead Capture Form Card
   ========================================================================== */
:where(html[data-page="index"]) .booking-form-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 28px 26px 24px;
  border: 1px solid #EAEFF4;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

:where(html[data-page="index"]) .booking-form-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

:where(html[data-page="index"]) .form-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FEF3C7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .form-header-titles {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

:where(html[data-page="index"]) .form-card-title {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  color: #14243D;
}

:where(html[data-page="index"]) .form-card-subtitle {
  font-size: 0.74rem;
  color: #64748B;
  margin-top: 2px;
}

:where(html[data-page="index"]) .form-group {
  margin-bottom: 12px;
}

:where(html[data-page="index"]) .form-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  color: #14243D;
  margin-bottom: 5px;
}

:where(html[data-page="index"]) .input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

:where(html[data-page="index"]) .form-input,:where(html[data-page="index"])  .form-select,:where(html[data-page="index"])  .form-textarea {
  width: 100%;
  background: #FFFFFF;
  border: 1.2px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.86rem;
  color: #14243D;
  font-family: var(--font-body);
  transition: all 0.2s ease;
}

:where(html[data-page="index"]) .form-input::placeholder,:where(html[data-page="index"])  .form-textarea::placeholder {
  color: #94A3B8;
  font-size: 0.84rem;
}

:where(html[data-page="index"]) .form-input:focus,:where(html[data-page="index"])  .form-select:focus,:where(html[data-page="index"])  .form-textarea:focus {
  border-color: #14243D;
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 36, 61, 0.08);
}

:where(html[data-page="index"]) .input-right-icon {
  position: absolute;
  right: 14px;
  pointer-events: none;
}

:where(html[data-page="index"]) .phone-input-wrap .phone-flag-icon {
  position: absolute;
  left: 12px;
  font-size: 1rem;
  pointer-events: none;
}

:where(html[data-page="index"]) .phone-input {
  padding-left: 36px;
}

:where(html[data-page="index"]) .select-wrap .input-left-icon {
  position: absolute;
  left: 12px;
  pointer-events: none;
}

:where(html[data-page="index"]) .custom-select {
  padding-left: 36px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

:where(html[data-page="index"]) .textarea-wrap .textarea-icon {
  position: absolute;
  left: 12px;
  top: 12px;
  pointer-events: none;
}

:where(html[data-page="index"]) .form-textarea {
  padding-left: 36px;
  resize: vertical;
  min-height: 64px;
}

:where(html[data-page="index"]) .form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

:where(html[data-page="index"]) .btn-book-strategy-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  background: #F8C72E;
  color: #14243D;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(248, 199, 46, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 6px;
}

:where(html[data-page="index"]) .btn-book-strategy-submit:hover {
  background: #FBBF24;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(248, 199, 46, 0.45);
}

:where(html[data-page="index"]) .form-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #64748B;
  margin-top: 10px;
  text-align: center;
}

:where(html[data-page="index"]) .form-status-msg {
  display: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.8rem;
  margin-top: 10px;
  text-align: center;
  line-height: 1.4;
}

:where(html[data-page="index"]) .form-status-msg.success {
  display: block;
  background: #DCFCE7;
  color: #15803D;
  border: 1px solid rgba(22, 163, 74, 0.2);
}

:where(html[data-page="index"]) .form-status-msg.error {
  display: block;
  background: #FEE2E2;
  color: #DC2626;
  border: 1px solid rgba(220, 38, 38, 0.2);
}

/* ==========================================================================
   Bottom Trust Value Strip
   ========================================================================== */
:where(html[data-page="index"]) .booking-trust-strip {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #FFFFFF;
  border-radius: 9999px;
  padding: 14px 28px;
  border: 1px solid #EAEFF4;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

:where(html[data-page="index"]) .trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: #14243D;
}

:where(html[data-page="index"]) .trust-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .trust-icon.green {
  background: #DCFCE7;
}

:where(html[data-page="index"]) .trust-icon.blue {
  background: #E0F2FE;
}

:where(html[data-page="index"]) .trust-icon.purple {
  background: #F3E8FF;
}

:where(html[data-page="index"]) .trust-icon.coral {
  background: #FFE4E6;
}

:where(html[data-page="index"]) .trust-sep {
  width: 1px;
  height: 24px;
  background: #E2E8F0;
}

/* Bottom Left Doodle */
:where(html[data-page="index"]) .booking-doodle-bottomleft {
  position: absolute;
  bottom: 40px;
  left: max(20px, calc((100vw - 1240px) / 2 + 10px));
  display: flex;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
  z-index: 3;
}

:where(html[data-page="index"]) .booking-doodle-bottomleft span {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #5A6B82;
  line-height: 1.05;
}

:where(html[data-page="index"]) .doodle-starts-arrow {
  margin-bottom: 4px;
}

/* Bottom Right Botanical Sprout */
:where(html[data-page="index"]) .booking-botanical-bg {
  position: absolute;
  bottom: -15px;
  right: -15px;
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   BOOKING SECTION RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1199px) {
  :where(html[data-page="index"]) .booking-main-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  :where(html[data-page="index"]) .booking-center {
    grid-column: span 2;
    order: -1;
    margin-bottom: 8px;
    padding: 8px 4px;
  }

  :where(html[data-page="index"]) .booking-doodle-topleft,:where(html[data-page="index"]) 
  .booking-floating-badge,:where(html[data-page="index"]) 
  .booking-doodle-grow,:where(html[data-page="index"]) 
  .booking-doodle-bottomleft {
    display: none;
  }
}

@media (max-width: 767px) {
  :where(html[data-page="index"]) .booking-section {
    padding: 70px 0 70px;
  }

  :where(html[data-page="index"]) .booking-main-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  :where(html[data-page="index"]) .booking-center {
    grid-column: span 1;
    padding: 4px 0;
  }

  :where(html[data-page="index"]) .booking-hero-title {
    font-size: 1.85rem;
  }

  :where(html[data-page="index"]) .form-grid-2 {
    grid-template-columns: 1fr;
  }

  :where(html[data-page="index"]) .booking-trust-strip {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 20px;
    gap: 12px;
    padding: 18px 20px;
  }

  :where(html[data-page="index"]) .trust-sep {
    display: none;
  }
}

@media (max-width: 479px) {
  :where(html[data-page="index"]) .calendar-card,:where(html[data-page="index"])  .booking-form-card {
    padding: 18px 16px;
    border-radius: 18px;
  }

  :where(html[data-page="index"]) .time-slots-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   SERVICES SECTION ("Your One-Stop Hub for All Services")
   ========================================================================== */
:where(html[data-page="index"]) .services-section {
  padding: 100px 0 90px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
  position: relative;
  overflow: hidden;
}

:where(html[data-page="index"]) .services-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

/* Services Header Row */
:where(html[data-page="index"]) .services-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 38px;
}

:where(html[data-page="index"]) .services-header-left {
  max-width: 680px;
}

:where(html[data-page="index"]) .services-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  padding: 5px 14px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  color: #14243D;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

:where(html[data-page="index"]) .services-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

:where(html[data-page="index"]) .services-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.6vw, 2.65rem);
  font-weight: 800;
  color: #14243D;
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin: 0 0 14px 0;
  display: block;
}

:where(html[data-page="index"]) .services-title-highlight {
  position: relative;
  display: inline-block;
  color: #14243D;
  margin-left: 3px;
}

:where(html[data-page="index"]) .services-title-highlight::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: 2px;
  height: 9px;
  background: #FDE047;
  opacity: 0.85;
  border-radius: 12px;
  z-index: -1;
  transform: rotate(-0.5deg);
}

:where(html[data-page="index"]) .services-sunburst-wrap {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 4px;
  position: relative;
  top: -8px;
}

:where(html[data-page="index"]) .services-desc {
  font-size: 0.94rem;
  color: #5A6B82;
  line-height: 1.55;
  max-width: 540px;
  margin: 0;
}

/* Header Right - Doodle & CTA */
:where(html[data-page="index"]) .services-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  padding-bottom: 4px;
}

:where(html[data-page="index"]) .services-top-doodle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  margin-right: -4px;
  margin-top: -8px;
}

:where(html[data-page="index"]) .services-top-doodle span {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #64748B;
  line-height: 0.98;
  text-align: right;
  letter-spacing: -0.01em;
  display: inline-block;
}

:where(html[data-page="index"]) .services-doodle-arrow {
  flex-shrink: 0;
  margin-bottom: -6px;
}

:where(html[data-page="index"]) .services-cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

:where(html[data-page="index"]) .btn-services-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  background: #14243D;
  color: #FFFFFF;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(20, 36, 61, 0.2);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

:where(html[data-page="index"]) .btn-services-primary:hover {
  background: #0E1B2F;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 36, 61, 0.3);
  color: #FFFFFF;
}

:where(html[data-page="index"]) .btn-services-primary svg {
  transition: transform 0.25s ease;
}

:where(html[data-page="index"]) .btn-services-primary:hover svg {
  transform: translateX(3px);
}

:where(html[data-page="index"]) .services-cta-microcopy {
  font-size: 0.74rem;
  color: #64748B;
  font-weight: 500;
  margin-left: 4px;
}

/* ==========================================================================
   5 Bento Service Cards Grid
   ========================================================================== */
:where(html[data-page="index"]) .services-bento-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-bottom: 38px;
}

:where(html[data-page="index"]) .service-bento-card {
  border-radius: 24px;
  padding: 24px 18px 20px;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid transparent;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

:where(html[data-page="index"]) .service-bento-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.09);
}

/* Card Themes */
:where(html[data-page="index"]) .bento-yellow {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF5 100%);
  border-color: #FEF3C7;
}
:where(html[data-page="index"]) .bento-yellow .bento-icon-box {
  background: #FEF3C7;
}
:where(html[data-page="index"]) .bento-yellow .bento-index-num {
  color: #D97706;
}

:where(html[data-page="index"]) .bento-blue {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFF 100%);
  border-color: #DBEAFE;
}
:where(html[data-page="index"]) .bento-blue .bento-icon-box {
  background: #DBEAFE;
}
:where(html[data-page="index"]) .bento-blue .bento-index-num {
  color: #2563EB;
}

:where(html[data-page="index"]) .bento-pink {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF9FC 100%);
  border-color: #FCE7F3;
}
:where(html[data-page="index"]) .bento-pink .bento-icon-box {
  background: #FCE7F3;
}
:where(html[data-page="index"]) .bento-pink .bento-index-num {
  color: #DB2777;
}

:where(html[data-page="index"]) .bento-green {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FEFA 100%);
  border-color: #DCFCE7;
}
:where(html[data-page="index"]) .bento-green .bento-icon-box {
  background: #DCFCE7;
}
:where(html[data-page="index"]) .bento-green .bento-index-num {
  color: #16A34A;
}

:where(html[data-page="index"]) .bento-purple {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF8FF 100%);
  border-color: #F3E8FF;
}
:where(html[data-page="index"]) .bento-purple .bento-icon-box {
  background: #F3E8FF;
}
:where(html[data-page="index"]) .bento-purple .bento-index-num {
  color: #7C3AED;
}

/* Top Icon & Index Row */
:where(html[data-page="index"]) .bento-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

:where(html[data-page="index"]) .bento-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .bento-index-num {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  opacity: 0.85;
}

:where(html[data-page="index"]) .bento-card-title {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 700;
  color: #14243D;
  margin: 0 0 8px 0;
  line-height: 1.25;
}

:where(html[data-page="index"]) .bento-card-desc {
  font-size: 0.8rem;
  color: #5A6B82;
  line-height: 1.45;
  margin: 0 0 16px 0;
}

/* Feature Checkmarks */
:where(html[data-page="index"]) .bento-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

:where(html[data-page="index"]) .bento-features-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #14243D;
}

:where(html[data-page="index"]) .bento-check-icon {
  flex-shrink: 0;
}

/* Card Footer */
:where(html[data-page="index"]) .bento-card-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

:where(html[data-page="index"]) .bento-learn-more {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: #14243D;
  transition: color 0.2s ease;
}

:where(html[data-page="index"]) .bento-arrow-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14243D;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

:where(html[data-page="index"]) .service-bento-card:hover .bento-arrow-circle {
  background: #14243D;
  color: #FFFFFF;
  border-color: #14243D;
  transform: translateX(3px);
}

/* ==========================================================================
   Bottom Trust Strip & Right Doodle
   ========================================================================== */
:where(html[data-page="index"]) .services-bottom-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 10px 0;
}

:where(html[data-page="index"]) .services-bottom-trust {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  background: #FFFFFF;
  border-radius: 9999px;
  padding: 12px 32px;
  border: 1px solid #EAEFF4;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

:where(html[data-page="index"]) .services-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 700;
  color: #14243D;
}

:where(html[data-page="index"]) .services-trust-sep {
  width: 1px;
  height: 20px;
  background: #E2E8F0;
}

:where(html[data-page="index"]) .services-bottom-doodle {
  position: absolute;
  right: 0;
  top: -24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  pointer-events: none;
}

:where(html[data-page="index"]) .services-bottom-doodle span {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #64748B;
  line-height: 0.98;
  text-align: right;
  letter-spacing: -0.01em;
  display: inline-block;
}

:where(html[data-page="index"]) .doodle-sunburst-small {
  margin-right: 28px;
  margin-bottom: -2px;
}

:where(html[data-page="index"]) .doodle-growth-arrow {
  margin-right: 14px;
  margin-top: -2px;
}

/* ==========================================================================
   SERVICES SECTION RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1240px) {
  :where(html[data-page="index"]) .services-bento-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  :where(html[data-page="index"]) .services-bottom-doodle {
    display: none;
  }
}

@media (max-width: 991px) {
  :where(html[data-page="index"]) .services-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  :where(html[data-page="index"]) .services-top-doodle {
    display: none;
  }

  :where(html[data-page="index"]) .btn-services-primary {
    width: 100%;
    justify-content: center;
  }

  :where(html[data-page="index"]) .services-bento-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 640px) {
  :where(html[data-page="index"]) .services-section {
    padding: 60px 0 50px;
  }

  :where(html[data-page="index"]) .services-bento-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  :where(html[data-page="index"]) .service-bento-card {
    padding: 22px 18px 18px;
    border-radius: 20px;
  }

  :where(html[data-page="index"]) .services-bottom-trust {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 20px;
    gap: 12px;
    padding: 16px 18px;
    width: 100%;
  }

  :where(html[data-page="index"]) .services-trust-sep {
    display: none;
  }
}

/* ==========================================================================
   PROOF & CLIENTS & CTA SECTION
   ========================================================================== */
:where(html[data-page="index"]) .proof-cta-section {
  padding: 64px 0 90px;
  background: var(--bg-white);
}

:where(html[data-page="index"]) .proof-cta-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.15fr;
  gap: 24px;
  align-items: stretch;
}

/* Testimonial Card */
:where(html[data-page="index"]) .proof-card-testimonials {
  background: #FAFCFE;
  border-radius: 24px;
  padding: 28px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

:where(html[data-page="index"]) .proof-card-testimonials:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

:where(html[data-page="index"]) .proof-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

:where(html[data-page="index"]) .proof-card-header h4 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary-navy);
}

:where(html[data-page="index"]) .proof-nav-btns {
  display: flex;
  gap: 6px;
}

:where(html[data-page="index"]) .testimonial-slide-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

:where(html[data-page="index"]) .testimonial-stars {
  color: var(--color-yellow);
  font-size: 16px;
  display: flex;
  gap: 2px;
}

:where(html[data-page="index"]) .testimonial-quote-text {
  font-size: 0.9rem;
  color: var(--color-primary-navy);
  line-height: 1.55;
  font-style: italic;
}

:where(html[data-page="index"]) .testimonial-author-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(20, 36, 61, 0.06);
}

:where(html[data-page="index"]) .testimonial-author-block img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

:where(html[data-page="index"]) .testimonial-author-info strong {
  font-size: 0.875rem;
  color: var(--color-primary-navy);
  display: block;
}

:where(html[data-page="index"]) .testimonial-author-info span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Client Logos & Tech Stack Card */
:where(html[data-page="index"]) .proof-card-clients {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 28px 24px;
  border: 1px solid #EAEFF4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

:where(html[data-page="index"]) .proof-card-clients:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
}

:where(html[data-page="index"]) .proof-clients-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

:where(html[data-page="index"]) .proof-clients-header h4 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #102039;
  letter-spacing: -0.02em;
}

:where(html[data-page="index"]) .proof-badge-pill {
  font-size: 0.7rem;
  font-weight: 750;
  color: #24B5A8;
  background: #E7F8F0;
  padding: 4px 10px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

:where(html[data-page="index"]) .clients-logos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 10px;
  align-items: stretch;
}

:where(html[data-page="index"]) .client-logo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #F8FAFC;
  border-radius: 14px;
  border: 1px solid #EEF2F6;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
  transition: all 0.22s ease;
}

:where(html[data-page="index"]) .client-logo-item:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  box-shadow: 0 6px 18px rgba(16, 26, 43, 0.06);
  transform: translateY(-1px);
}

:where(html[data-page="index"]) .stack-icon-chip {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

:where(html[data-page="index"]) .icon-chip-meta { background: #EAF2FF; color: #3D85FF; }
:where(html[data-page="index"]) .icon-chip-wa { background: #E7F8F0; color: #25D366; }
:where(html[data-page="index"]) .icon-chip-funnel { background: #EEF2F6; color: #59708F; }
:where(html[data-page="index"]) .icon-chip-analytics { background: #EAF2FF; color: #3D85FF; }
:where(html[data-page="index"]) .icon-chip-scoring { background: #FFF4D5; color: #D97706; }
:where(html[data-page="index"]) .icon-chip-speed { background: #F3E8FF; color: #8A5CF6; }

:where(html[data-page="index"]) .stack-item-text {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
  min-width: 0;
}

:where(html[data-page="index"]) .stack-item-text strong {
  font-size: 0.82rem;
  font-weight: 750;
  color: #102039;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(html[data-page="index"]) .stack-item-text span {
  font-size: 0.68rem;
  color: #64748B;
  font-weight: 500;
}

:where(html[data-page="index"]) .proof-clients-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #526884;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #EEF2F6;
  font-weight: 500;
}

/* Ready CTA Card */
:where(html[data-page="index"]) .proof-card-cta {
  background: radial-gradient(135% 120% at 50% 0%, #1c3358 0%, #0c1728 100%);
  color: var(--bg-white);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(12, 23, 40, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

:where(html[data-page="index"]) .proof-card-cta h4 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
}

:where(html[data-page="index"]) .proof-card-cta h4 span {
  color: var(--color-yellow);
}

:where(html[data-page="index"]) .proof-card-cta p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 10px 0 24px;
  line-height: 1.5;
}

/* Responsive Proof CTA Section */
@media (max-width: 1024px) {
  :where(html[data-page="index"]) .proof-cta-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  :where(html[data-page="index"]) .proof-cta-section {
    padding: 48px 0 64px;
  }

  :where(html[data-page="index"]) .proof-card-testimonials,:where(html[data-page="index"]) 
  .proof-card-clients,:where(html[data-page="index"]) 
  .proof-card-cta {
    padding: 22px 18px;
    border-radius: 20px;
  }

  :where(html[data-page="index"]) .clients-logos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 10px;
  }

  :where(html[data-page="index"]) .client-logo-item {
    font-size: 0.84rem;
    padding: 8px 6px;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :where(html[data-page="index"]) .client-logo-item i {
    font-size: 18px !important;
    margin-right: 2px !important;
    flex-shrink: 0;
  }

  :where(html[data-page="index"]) .proof-card-cta h4 {
    font-size: 1.45rem;
  }

  :where(html[data-page="index"]) .proof-card-cta p {
    margin: 8px 0 18px;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
:where(html[data-page="index"]) .site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: 64px 0 32px;
  position: relative;
}

:where(html[data-page="index"]) .footer-top-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

:where(html[data-page="index"]) .footer-brand .brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: var(--bg-white);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.2rem;
}

:where(html[data-page="index"]) .footer-brand .brand-logo .dot {
  color: #2FB7A7;
}

:where(html[data-page="index"]) .footer-brand p {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  max-width: 280px;
}

:where(html[data-page="index"]) .footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--bg-white);
  margin-bottom: 16px;
}

:where(html[data-page="index"]) .footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

:where(html[data-page="index"]) .footer-links a {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.65);
  transition: all 0.2s ease;
}

:where(html[data-page="index"]) .footer-links a:hover {
  color: var(--color-yellow);
  padding-left: 4px;
}

:where(html[data-page="index"]) .footer-social-links {
  display: flex;
  gap: 10px;
}

:where(html[data-page="index"]) .social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-white);
  font-size: 17px;
  transition: var(--transition);
}

:where(html[data-page="index"]) .social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

:where(html[data-page="index"]) .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.775rem;
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 1024px) {
  :where(html[data-page="index"]) .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  :where(html[data-page="index"]) .footer-brand {
    grid-column: 1 / -1;
    max-width: 480px;
  }

  :where(html[data-page="index"]) .footer-brand p {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  :where(html[data-page="index"]) .site-footer {
    padding: 44px 0 24px;
  }

  :where(html[data-page="index"]) .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 20px;
    padding-bottom: 28px;
  }

  :where(html[data-page="index"]) .footer-brand {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }

  :where(html[data-page="index"]) .footer-col-company {
    grid-column: 1 / 2;
  }

  :where(html[data-page="index"]) .footer-col-solutions {
    grid-column: 2 / 3;
  }

  :where(html[data-page="index"]) .footer-col-resources {
    grid-column: 1 / -1;
    margin-top: 4px;
  }

  :where(html[data-page="index"]) .footer-col-follow {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  :where(html[data-page="index"]) .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    justify-content: center;
    font-size: 0.725rem;
  }
}

/* Floating WhatsApp Button */
:where(html[data-page="index"]) .floating-whatsapp-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: #25D366;
  color: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: var(--shadow-green);
  z-index: 990;
  transition: var(--transition);
}

:where(html[data-page="index"]) .floating-whatsapp-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
}

/* ==========================================================================
   RESPONSIVE DESIGN (LAPTOP, TABLET & MOBILE)
   ========================================================================== */
@media (max-width: 1380px) {
  :where(html[data-page="index"]) .hero-grid {
    grid-template-columns: 52% 48%;
    gap: 24px;
  }

  :where(html[data-page="index"]) .hero-stats-strip {
    gap: 14px;
  }

  :where(html[data-page="index"]) .stat-item {
    gap: 8px;
  }

  :where(html[data-page="index"]) .stat-icon-wrap {
    width: 36px;
    height: 36px;
  }

  :where(html[data-page="index"]) .stat-num {
    font-size: 1.2rem;
  }

  :where(html[data-page="index"]) .stat-label {
    font-size: 0.68rem;
  }

  :where(html[data-page="index"]) .avatar-stack img {
    width: 30px;
    height: 30px;
    margin-left: -8px;
  }

  :where(html[data-page="index"]) .avatar-count-badge {
    width: 26px;
    height: 26px;
    font-size: 10px;
  }

  :where(html[data-page="index"]) .proof-caption {
    font-size: 0.72rem;
    max-width: 140px;
  }

  :where(html[data-page="index"]) .floating-testimonial-dark {
    left: -16px;
    max-width: 290px;
    padding: 14px 16px;
  }
}

@media (max-width: 1200px) {
  :where(html[data-page="index"]) .hero-stats-strip {
    flex-wrap: wrap;
    gap: 16px 20px;
  }

  :where(html[data-page="index"]) .hero-proof-cluster {
    width: 100%;
    margin-left: 0;
    padding-top: 8px;
    border-top: 1px solid #E2E8F0;
  }

  :where(html[data-page="index"]) .proof-caption {
    max-width: none;
  }

  :where(html[data-page="index"]) .floating-testimonial-dark {
    left: 0;
  }
}

@media (max-width: 1024px) {
  :where(html[data-page="index"]) .hero-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  :where(html[data-page="index"]) .hero-left {
    max-width: 650px;
    margin: 0 auto;
    text-align: left;
  }

  :where(html[data-page="index"]) .hero-right {
    max-width: 480px;
    margin: 0 auto;
    min-height: 520px;
  }

  :where(html[data-page="index"]) .growth-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  :where(html[data-page="index"]) .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  :where(html[data-page="index"]) .booking-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  :where(html[data-page="index"]) .proof-cta-grid {
    grid-template-columns: 1fr;
  }

  :where(html[data-page="index"]) .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root:where([data-page="index"]) {
    --header-height: 64px;
  }

  /* Navigation: Hide all desktop items on mobile */
  :where(html[data-page="index"]) .nav-menu-wrapper,:where(html[data-page="index"]) 
  .nav-menu,:where(html[data-page="index"])  
  .btn-desktop-only,:where(html[data-page="index"]) 
  .nav-actions .btn-phone,:where(html[data-page="index"]) 
  .nav-actions .btn-phone-pill,:where(html[data-page="index"]) 
  .nav-actions .btn-yellow {
    display: none !important;
  }

  :where(html[data-page="index"]) .site-header {
    height: 64px;
    padding: 0;
  }

  :where(html[data-page="index"]) .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
  }

  :where(html[data-page="index"]) .nav-actions {
    display: flex;
    align-items: center;
    gap: 0;
  }

  :where(html[data-page="index"]) .hamburger-btn {
    display: flex !important;
  }

  /* Hero Section */
  :where(html[data-page="index"]) .hero-section {
    padding: 28px 0 48px;
  }

  :where(html[data-page="index"]) .hero-annotation,:where(html[data-page="index"]) 
  .hero-anno-middle {
    display: none !important;
  }

  :where(html[data-page="index"]) .hero-badge {
    font-size: 0.7rem;
    padding: 5px 12px;
    margin-bottom: 16px;
  }

  :where(html[data-page="index"]) .hero-title {
    font-size: 2.45rem;
    line-height: 1.1;
    margin-bottom: 16px;
    letter-spacing: -0.03em;
  }

  :where(html[data-page="index"]) .gold-sparkle-burst {
    top: -8px;
    right: -16px;
    transform: scale(0.85) rotate(6deg);
  }

  :where(html[data-page="index"]) .brush-stroke-svg {
    height: 7px;
    left: -1%;
    width: 102%;
    bottom: -6px;
  }

  :where(html[data-page="index"]) .hero-subtitle {
    font-size: 0.95rem;
    line-height: 1.58;
    margin-bottom: 24px;
  }

  :where(html[data-page="index"]) .hero-ctas-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 24px;
    width: 100%;
  }

  :where(html[data-page="index"]) .hero-ctas {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  :where(html[data-page="index"]) .btn-hero-cta,:where(html[data-page="index"]) 
  .btn-watch-video {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    padding: 10px 18px;
    font-size: 0.91rem;
    box-sizing: border-box;
  }

  /* Social Proof & Metrics Area */
  :where(html[data-page="index"]) .hero-metrics-container {
    width: 100%;
    max-width: 100%;
    gap: 14px;
    margin-bottom: 20px;
  }

  :where(html[data-page="index"]) .hero-stats-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 12px 14px;
    background: #FFFFFF;
    border-radius: 18px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 4px 16px rgba(16, 32, 57, 0.04);
  }

  :where(html[data-page="index"]) .stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  :where(html[data-page="index"]) .stat-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  :where(html[data-page="index"]) .stat-icon-wrap svg {
    width: 16px;
    height: 16px;
  }

  :where(html[data-page="index"]) .stat-info {
    display: flex;
    flex-direction: column;
  }

  :where(html[data-page="index"]) .stat-divider {
    display: block;
    width: 1px;
    height: 24px;
    background: #E8EEF5;
  }

  :where(html[data-page="index"]) .stat-num {
    font-size: 1.05rem;
  }

  :where(html[data-page="index"]) .stat-label {
    font-size: 0.6rem;
    line-height: 1.2;
    white-space: normal;
  }

  :where(html[data-page="index"]) .hero-trust-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 2px;
  }

  :where(html[data-page="index"]) .avatar-stack {
    flex-shrink: 0;
  }

  :where(html[data-page="index"]) .avatar-stack img {
    width: 28px;
    height: 28px;
  }

  :where(html[data-page="index"]) .avatar-count-badge {
    width: 24px;
    height: 24px;
    font-size: 9.5px;
  }

  :where(html[data-page="index"]) .trust-bar-text {
    font-size: 0.75rem;
    line-height: 1.35;
  }

  /* Featured Bar */
  :where(html[data-page="index"]) .featured-on-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
  }

  :where(html[data-page="index"]) .featured-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
  }

  /* Hero Right Visual Collage — Seamless Mobile Composition */
  :where(html[data-page="index"]) .hero-right {
    width: 100%;
    max-width: 380px;
    margin: 24px auto 0;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 10px 4px 0;
    box-sizing: border-box;
  }

  :where(html[data-page="index"]) .hero-visual-backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 520px;
    background: #F0AA1B;
    border-radius: 32px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    box-shadow: 0 16px 36px rgba(240, 170, 27, 0.2);
  }

  :where(html[data-page="index"]) .hero-image-wrapper {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 330px;
    height: 380px;
    border-radius: 28px;
    margin: 16px auto 0;
    border: 3px solid #FFFFFF;
    box-shadow: 0 18px 40px rgba(16, 26, 43, 0.12);
  }

  :where(html[data-page="index"]) .floating-badge-top {
    top: 4px;
    left: 4px;
    padding: 8px 12px;
    gap: 8px;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(16, 26, 43, 0.12);
    z-index: 6;
  }

  :where(html[data-page="index"]) .floating-badge-growth {
    top: 40px;
    right: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    min-width: 105px;
    box-shadow: 0 10px 24px rgba(16, 26, 43, 0.12);
    z-index: 6;
  }

  :where(html[data-page="index"]) .floating-badge-lead {
    display: none;
  }

  :where(html[data-page="index"]) .floating-badge .icon-box {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  :where(html[data-page="index"]) .floating-badge .badge-text strong {
    font-size: 0.82rem;
  }

  :where(html[data-page="index"]) .floating-badge .badge-text span {
    font-size: 0.65rem;
  }

  :where(html[data-page="index"]) .badge-arrow-pill {
    width: 22px;
    height: 22px;
  }

  :where(html[data-page="index"]) .growth-keywords span {
    font-size: 0.72rem;
  }

  :where(html[data-page="index"]) .floating-testimonial-dark {
    position: relative;
    bottom: auto;
    left: auto;
    margin: 14px auto 0;
    width: 100%;
    max-width: 380px;
    border-radius: 20px;
    padding: 16px 18px;
    box-sizing: border-box;
    z-index: 4;
    box-shadow: 0 16px 36px rgba(16, 26, 43, 0.22);
  }

  /* Capability Bar Responsive — Fully Visible Multi-Column Card Grid */
  :where(html[data-page="index"]) .hero-capability-bar-wrapper {
    margin-top: 28px;
    width: 100%;
  }

  :where(html[data-page="index"]) .hero-capability-bar {
    width: 100%;
    max-width: 100%;
    padding: 16px 14px;
    background: #FFFFFF;
    border: 1px solid #E5E8ED;
    border-radius: 20px;
    box-shadow: 0 6px 24px rgba(16, 26, 43, 0.05);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    overflow: visible;
  }

  :where(html[data-page="index"]) .cap-strip-label {
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    color: #8B9AB0;
    text-align: center;
    padding: 0 0 8px 0;
    border-right: none;
    border-bottom: 1px solid #EEF2F6;
    margin: 0;
  }

  :where(html[data-page="index"]) .cap-strip-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 12px;
    padding: 0;
  }

  :where(html[data-page="index"]) .cap-strip-items .cap-item:last-child {
    grid-column: 1 / -1;
    justify-content: center;
  }

  :where(html[data-page="index"]) .cap-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #F8FAFC;
    border-radius: 12px;
    border: 1px solid #EEF2F6;
  }

  :where(html[data-page="index"]) .cap-icon-box {
    width: 28px;
    height: 28px;
    font-size: 14px;
    flex-shrink: 0;
  }

  :where(html[data-page="index"]) .cap-text strong {
    font-size: 0.76rem;
    color: #102039;
    line-height: 1.15;
  }

  :where(html[data-page="index"]) .cap-text span {
    font-size: 0.62rem;
    color: #59708F;
  }

  :where(html[data-page="index"]) .cap-sep {
    display: none;
  }

  :where(html[data-page="index"]) .hero-anno-bottom {
    display: none !important;
  }

  /* Other Sections */
  :where(html[data-page="index"]) .services-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
  }

  :where(html[data-page="index"]) .growth-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  :where(html[data-page="index"]) .growth-cards-grid {
    grid-template-columns: 1fr;
  }

  /* Industry Showcase Tabs Responsive — All Visible Pill Grid */
  :where(html[data-page="index"]) .industry-tabs-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: 20px;
    background: #FFFFFF;
    overflow: visible;
  }

  :where(html[data-page="index"]) .industry-tab-btn {
    padding: 7px 12px;
    font-size: 0.78rem;
    gap: 5px;
    border-radius: 9999px;
    background: #F4F7FA;
  }

  :where(html[data-page="index"]) .industry-tab-btn svg {
    width: 13px;
    height: 13px;
  }

  :where(html[data-page="index"]) .industry-tab-btn.active {
    background: #14243D;
    color: #FFFFFF;
  }

  :where(html[data-page="index"]) .industry-showcase-card {
    grid-template-columns: 1fr;
  }

  :where(html[data-page="index"]) .industry-image-pane {
    min-height: 340px;
  }

  :where(html[data-page="index"]) .industry-quote-badge {
    bottom: 14px;
    left: 14px;
    right: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    gap: 10px;
  }

  :where(html[data-page="index"]) .quote-icon-bubble {
    width: 28px;
    height: 28px;
    font-size: 1.2rem;
  }

  :where(html[data-page="index"]) .industry-quote-text {
    font-size: 0.76rem;
    line-height: 1.35;
  }

  :where(html[data-page="index"]) .industry-quote-author {
    font-size: 0.68rem;
  }

  :where(html[data-page="index"]) .quote-script-note {
    display: none;
  }

  :where(html[data-page="index"]) .services-grid {
    grid-template-columns: 1fr;
  }

  :where(html[data-page="index"]) .support-points-grid {
    grid-template-columns: 1fr;
  }

  :where(html[data-page="index"]) .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 24px;
  }
}

@media (max-width: 480px) {
  :where(html[data-page="index"]) .industry-image-pane {
    min-height: 300px;
  }

  :where(html[data-page="index"]) .industry-quote-badge {
    bottom: 10px;
    left: 10px;
    right: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    gap: 8px;
  }

  :where(html[data-page="index"]) .quote-icon-bubble {
    width: 24px;
    height: 24px;
    font-size: 1.05rem;
  }

  :where(html[data-page="index"]) .industry-quote-text {
    font-size: 0.7rem;
    line-height: 1.3;
  }

  :where(html[data-page="index"]) .industry-quote-author {
    font-size: 0.62rem;
  }
  :where(html[data-page="index"]) .industry-tabs-bar {
    gap: 5px;
    padding: 8px 6px;
    border-radius: 16px;
  }

  :where(html[data-page="index"]) .industry-tab-btn {
    padding: 6px 10px;
    font-size: 0.72rem;
    gap: 4px;
  }

  :where(html[data-page="index"]) .industry-tab-btn svg {
    width: 12px;
    height: 12px;
  }
  :where(html[data-page="index"]) .hero-title {
    font-size: 2.05rem;
    line-height: 1.14;
  }

  :where(html[data-page="index"]) .hero-image-wrapper {
    max-width: 300px;
    height: 330px;
    border-radius: 26px;
  }

  :where(html[data-page="index"]) .floating-badge {
    padding: 6px 10px;
    gap: 7px;
    border-radius: 12px;
  }

  :where(html[data-page="index"]) .floating-badge .icon-box {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  :where(html[data-page="index"]) .floating-badge .badge-text strong {
    font-size: 0.72rem;
  }

  :where(html[data-page="index"]) .floating-badge .badge-text span {
    font-size: 0.6rem;
  }

  :where(html[data-page="index"]) .floating-badge-top {
    left: -2px;
    top: 6px;
  }

  :where(html[data-page="index"]) .floating-badge-growth {
    top: 35px;
    right: -2px;
    padding: 8px 10px;
    min-width: 105px;
  }

  :where(html[data-page="index"]) .growth-keywords span {
    font-size: 0.68rem;
  }

  :where(html[data-page="index"]) .floating-badge-lead {
    right: -2px;
    bottom: 25px;
  }

  :where(html[data-page="index"]) .hero-capability-bar {
    padding: 14px 10px;
    gap: 10px;
    border-radius: 18px;
  }

  :where(html[data-page="index"]) .cap-strip-items {
    gap: 8px 8px;
  }

  :where(html[data-page="index"]) .cap-item {
    padding: 5px 6px;
    gap: 6px;
  }

  :where(html[data-page="index"]) .cap-icon-box {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  :where(html[data-page="index"]) .cap-text strong {
    font-size: 0.72rem;
  }

  :where(html[data-page="index"]) .cap-text span {
    font-size: 0.58rem;
  }
}

@media (max-width: 360px) {
  :where(html[data-page="index"]) .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  :root:where([data-page="index"]) {
    --header-height: 58px;
  }

  :where(html[data-page="index"]) .hero-section {
    padding: 20px 0 36px;
  }

  :where(html[data-page="index"]) .hero-badge {
    font-size: 0.65rem;
    padding: 4px 10px;
    margin-bottom: 12px;
  }

  :where(html[data-page="index"]) .hero-title {
    font-size: 1.75rem;
    line-height: 1.15;
    margin-bottom: 12px;
  }

  :where(html[data-page="index"]) .brush-stroke-svg {
    height: 16px;
  }

  :where(html[data-page="index"]) .hero-subtitle {
    font-size: 0.875rem;
    line-height: 1.48;
    margin-bottom: 18px;
  }

  :where(html[data-page="index"]) .hero-ctas-wrap {
    gap: 12px;
    margin-bottom: 22px;
  }

  :where(html[data-page="index"]) .hero-ctas {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  :where(html[data-page="index"]) .btn-hero-cta,:where(html[data-page="index"]) 
  .btn-watch-video {
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    font-size: 0.9375rem;
  }

  :where(html[data-page="index"]) .video-play-icon {
    width: 32px;
    height: 32px;
  }

  :where(html[data-page="index"]) .hero-stats-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 12px 8px;
  }

  :where(html[data-page="index"]) .stat-num {
    font-size: 1.05rem;
  }

  :where(html[data-page="index"]) .stat-label {
    font-size: 0.58rem;
    line-height: 1.2;
  }

  :where(html[data-page="index"]) .hero-image-wrapper {
    max-width: 255px;
    height: 280px;
    border-radius: 22px;
  }

  :where(html[data-page="index"]) .hero-visual-backdrop {
    border-radius: 28px;
  }

  :where(html[data-page="index"]) .floating-badge {
    padding: 6px 10px;
    gap: 6px;
    border-radius: 12px;
  }

  :where(html[data-page="index"]) .floating-badge .icon-box {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  :where(html[data-page="index"]) .floating-badge .icon-box svg {
    width: 15px;
    height: 15px;
  }

  :where(html[data-page="index"]) .floating-badge .badge-text strong {
    font-size: 0.74rem;
  }

  :where(html[data-page="index"]) .floating-badge .badge-text span {
    font-size: 0.6rem;
  }

  :where(html[data-page="index"]) .badge-arrow-pill {
    width: 19px;
    height: 19px;
  }

  :where(html[data-page="index"]) .floating-badge-top {
    left: 2px;
    top: 4px;
  }

  :where(html[data-page="index"]) .floating-badge-growth {
    right: 2px;
    top: 36px;
    padding: 8px 10px;
    min-width: 95px;
  }

  :where(html[data-page="index"]) .growth-keywords span {
    font-size: 0.65rem;
  }

  :where(html[data-page="index"]) .floating-badge-lead {
    display: none;
  }

  :where(html[data-page="index"]) .floating-testimonial-dark {
    padding: 12px 14px;
    border-radius: 16px;
    margin-top: 14px;
  }

  :where(html[data-page="index"]) .testimonial-dark-avatars img {
    width: 24px;
    height: 24px;
  }

  :where(html[data-page="index"]) .gold-stars {
    font-size: 9px;
  }

  :where(html[data-page="index"]) .testimonial-dark-quote {
    font-size: 0.72rem;
    line-height: 1.4;
  }

  :where(html[data-page="index"]) .testimonial-dark-author {
    font-size: 0.65rem;
  }
}

/* Ultra-Narrow Mobile Breakpoint (310px - 320px) */
@media (max-width: 320px) {
  :where(html[data-page="index"]) .container {
    padding-left: 8px;
    padding-right: 8px;
  }

  :where(html[data-page="index"]) .hero-title {
    font-size: 1.5rem;
    line-height: 1.15;
  }

  :where(html[data-page="index"]) .hero-image-wrapper {
    max-width: 230px;
    height: 250px;
    border-radius: 18px;
    border-width: 2px;
  }

  :where(html[data-page="index"]) .hero-visual-backdrop {
    border-radius: 20px 50px 18px 50px;
  }

  :where(html[data-page="index"]) .floating-badge {
    padding: 3px 6px;
    gap: 4px;
  }

  :where(html[data-page="index"]) .floating-badge .icon-box {
    width: 22px;
    height: 22px;
  }

  :where(html[data-page="index"]) .floating-badge .badge-text strong {
    font-size: 0.62rem;
  }

  :where(html[data-page="index"]) .floating-badge .badge-text span {
    font-size: 0.5rem;
  }

  :where(html[data-page="index"]) .floating-badge-top {
    top: 2px;
    left: 0;
  }

  :where(html[data-page="index"]) .floating-badge-growth {
    top: 18px;
    right: 0;
    padding: 4px 6px;
    min-width: 80px;
  }

  :where(html[data-page="index"]) .growth-keywords span {
    font-size: 0.52rem;
  }

  :where(html[data-page="index"]) .floating-badge-lead {
    bottom: 10px;
    right: 0;
  }

  :where(html[data-page="index"]) .hero-shoulder-doodle {
    display: none;
  }

  :where(html[data-page="index"]) .btn-hero-cta,:where(html[data-page="index"]) 
  .btn-watch-video {
    padding: 9px 12px;
    font-size: 0.8125rem;
  }

  :where(html[data-page="index"]) .hero-stats-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 10px 6px;
    border-radius: 14px;
  }

  :where(html[data-page="index"]) .stat-num {
    font-size: 0.92rem;
  }

  :where(html[data-page="index"]) .stat-label {
    font-size: 0.52rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  :where(html[data-page="index"]) .hero-proof-cluster {
    gap: 6px;
    padding-top: 8px;
    margin-top: 4px;
  }

  :where(html[data-page="index"]) .avatar-stack img {
    width: 24px;
    height: 24px;
    margin-left: -6px;
  }

  :where(html[data-page="index"]) .proof-caption {
    font-size: 0.62rem;
    line-height: 1.2;
  }

  :where(html[data-page="index"]) .featured-logos {
    gap: 6px 10px;
  }

  :where(html[data-page="index"]) .logo-item {
    font-size: 0.72rem;
  }

  :where(html[data-page="index"]) .rel-stats-panel {
    gap: 4px;
    padding: 12px 8px;
  }

  :where(html[data-page="index"]) .rel-stat-icon-wrap {
    width: 30px;
    height: 30px;
  }

  :where(html[data-page="index"]) .rel-stat-icon-wrap svg {
    width: 14px;
    height: 14px;
  }

  :where(html[data-page="index"]) .rel-stat-number {
    font-size: 0.95rem;
  }

  :where(html[data-page="index"]) .rel-stat-label {
    font-size: 0.52rem;
  }

  :where(html[data-page="index"]) .rel-stat-sep {
    height: 28px;
  }

  :where(html[data-page="index"]) .floating-whatsapp-btn {
    width: 42px;
    height: 42px;
    font-size: 22px;
    bottom: 12px;
    right: 12px;
  }
}

  
/* shared-chrome.css */
@scope (:where(html[data-page="index"]) .shared-kx-header,:where(html[data-page="index"])  .shared-kx-mobile-drawer,:where(html[data-page="index"])  .shared-site-footer) {
:scope { --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif; --container-max: 1240px; --color-yellow: #F8C72E; --color-primary-navy: #14243D; --transition: all .2s ease; font-family: var(--font-body, 'Plus Jakarta Sans', 'Inter', sans-serif); line-height: 1.5; }
:where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(a) { text-decoration: none; }



:scope {
  --kx-navy: #13243D;
  --kx-deep-navy: #0D1B31;
  --kx-secondary-navy: #1B3152;
  --kx-gold: #F9BE22;
  --kx-gold-hover: #FFCA3A;
  --kx-green: #00D084;
  --kx-cyan: #52BCEB;
  --kx-soft-cyan: #EAF8FF;
  --kx-soft-gold: #FFF8DD;
  --kx-soft-green: #E8F8F0;
  --kx-white: #FFFFFF;
  --kx-gray: #F4F6FA;
  --kx-pill-bg: #EDF3FA;
  --kx-border: #E8EDF4;
  --kx-border-subtle: #F1F4F9;
  --kx-text-dark: #13243D;
  --kx-text-muted: #65748B;
  --kx-radius-pill: 9999px;
  --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
}


:scope.shared-kx-header,
.shared-kx-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: 1px solid rgba(232, 237, 244, 0.8);
  transition: all 0.25s ease;
}

:scope.shared-kx-header.scrolled,
.shared-kx-header.scrolled {
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

:scope.shared-kx-header.menu-open,
.shared-kx-header.menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

.shared-kx-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .shared-kx-container {
    padding: 0 16px;
  }
}

.shared-kx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
}


.shared-kx-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0F1D32;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

.shared-kx-logo-tech {
  color: #00D084;
  font-weight: 800;
}


.shared-kx-nav-menu {
  display: flex;
  align-items: center;
  background: #EDF3FA;
  padding: 4px 6px;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(220, 230, 242, 0.85);
  box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
  flex-shrink: 1;
}

.shared-kx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shared-kx-nav-item {
  position: relative;
}

.shared-kx-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--kx-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-nav-link:hover {
  color: #0F1D32;
  background: rgba(255, 255, 255, 0.7);
}

.shared-kx-nav-link.active {
  color: #0F1D32 !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
}

.shared-kx-nav-link::after,
.shared-kx-nav-link.active::after {
  display: none !important;
}

.shared-kx-chevron-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  stroke: currentColor;
}


.shared-kx-dropdown-wrapper {
  position: relative;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper.open .shared-kx-chevron-icon {
  transform: rotate(180deg);
}

.shared-kx-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 250px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
  border: 1px solid var(--kx-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  pointer-events: none;
  z-index: 100;
}

/* Invisible hover bridge to eliminate the 8px cursor gap */
.shared-kx-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
  background: transparent;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper.open .shared-kx-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.shared-kx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #13243D;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.shared-kx-dropdown-item:hover {
  background: #F0F7FF;
  color: #0F1D32;
}


.shared-kx-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.shared-kx-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0F1D32;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-btn-pill-navy:hover {
  background: #1B2E4B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
}

.shared-kx-btn-pill-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F9BE22;
  color: #0F1D32;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
}

.shared-kx-btn-pill-gold:hover {
  background: #FFCA3A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
}

.shared-kx-btn-pill-navy:active,
.shared-kx-btn-pill-gold:active,
.kx-modal-submit:active {
  transform: translateY(0) scale(0.98);
}


.shared-kx-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0F1D32;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.shared-kx-mobile-toggle:hover {
  background: #EDF3FA;
}

@media (max-width: 1240px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-navy {
    display: none;
  }
}

@media (max-width: 1100px) {
  .shared-kx-nav-menu {
    display: none;
  }

  .shared-kx-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .shared-kx-nav-inner {
    height: 70px;
    gap: 8px;
  }
  .shared-kx-logo {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .shared-kx-logo {
    font-size: 18px;
  }
  .shared-kx-nav-actions {
    gap: 6px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 7px 11px;
    font-size: 11.5px;
    gap: 4px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold svg {
    display: none;
  }
  .shared-kx-mobile-toggle {
    padding: 6px;
  }
}

@media (max-width: 360px) {
  .shared-kx-container {
    padding: 0 6px;
  }
  .shared-kx-nav-inner {
    gap: 2px;
  }
  .shared-kx-logo {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  .shared-kx-nav-actions {
    gap: 2px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 5px 6px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  .shared-kx-mobile-toggle {
    padding: 2px;
  }
}


:scope.shared-kx-mobile-drawer,
.shared-kx-mobile-drawer {
  position: fixed;
  top: var(--header-height, 78px);
  left: 0;
  width: 100%;
  height: calc(100dvh - var(--header-height, 78px));
  background: #FFFFFF !important;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 40px rgba(19, 36, 61, 0.12);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :scope.shared-kx-mobile-drawer,
  .shared-kx-mobile-drawer {
    top: var(--header-height, 70px);
    height: calc(100dvh - var(--header-height, 70px));
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

:scope.shared-kx-mobile-drawer.open,
:scope.shared-kx-mobile-drawer.active,
.shared-kx-mobile-drawer.open,
.shared-kx-mobile-drawer.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  pointer-events: auto;
}

.shared-kx-mobile-nav-link {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 650;
  color: #14243D;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 12px;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.shared-kx-mobile-nav-link:hover {
  background: #F8FAFC;
  color: #0E1B2F;
}

.shared-kx-mobile-nav-link.active {
  background: #F4F7FB !important;
  color: #0E1B2F !important;
  font-weight: 750 !important;
  border-left: 3px solid #F8C72E;
  padding-left: 13px;
}

.shared-kx-mobile-nav-link.shared-sub {
  margin-left: 12px;
  margin-right: 4px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 550;
  color: #556987;
  background: #F8FAFC;
  border-radius: 10px;
  border-left: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.shared-kx-mobile-nav-link.shared-sub::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94A3B8;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.shared-kx-mobile-nav-link.shared-sub:hover,
.shared-kx-mobile-nav-link.shared-sub.active {
  background: #EDF4FB;
  color: #0E1B2F;
  border-left-color: #F8C72E;
}

.shared-kx-mobile-nav-link.shared-sub.active::before {
  background: #F8C72E;
  transform: scale(1.4);
}

.shared-kx-mobile-drawer-footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #EEF2F6;
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-gold {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(248, 199, 46, 0.3);
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-navy {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
  border-radius: 9999px;
}


.kx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 49, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  padding: 20px;
}

.kx-modal-overlay.active,
.kx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.kx-modal-dialog {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
  border: 1px solid var(--kx-border);
  overflow: hidden;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.kx-modal-overlay.active .kx-modal-dialog,
.kx-modal-overlay.is-open .kx-modal-dialog {
  transform: scale(1) translateY(0);
}

.kx-modal-header {
  padding: 28px 32px 16px;
  position: relative;
}

.kx-modal-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--kx-navy);
  margin: 0 0 6px;
}

.kx-modal-subtitle {
  font-size: 14px;
  color: var(--kx-text-muted);
  margin: 0;
}

.kx-modal-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--kx-gray);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-navy);
  transition: background 0.2s ease, transform 0.2s ease;
}

.kx-modal-close:hover {
  background: #E2E8F0;
  transform: rotate(90deg);
}

.kx-modal-body {
  padding: 0 32px 32px;
}

.kx-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx-form-label {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kx-navy);
}

.kx-form-input,
.kx-form-textarea,
.kx-form-select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--kx-border);
  background: var(--kx-gray);
  color: var(--kx-navy);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.kx-form-input:focus,
.kx-form-textarea:focus,
.kx-form-select:focus {
  outline: none;
  border-color: var(--kx-navy);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
}

.kx-modal-submit {
  background: var(--kx-navy);
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.kx-modal-submit:hover {
  background: var(--kx-deep-navy);
  transform: translateY(-1px);
}


:scope.shared-site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
  position: relative;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

:scope.shared-site-footer .shared-container,
:scope.shared-site-footer .shared-kx-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

.shared-footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand {
  min-width: 0;
}

.shared-footer-brand .shared-brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand .shared-brand-logo .shared-dot {
  color: #2FB7A7;
}

.shared-footer-brand p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  max-width: 290px;
}

.shared-footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.shared-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.shared-footer-links a {
  font-size: 0.835rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.shared-footer-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

.shared-footer-follow-wrapper {
  margin-top: 24px;
}

.shared-footer-follow-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.shared-footer-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.shared-social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  text-decoration: none;
  transition: var(--transition);
}

.shared-social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

.shared-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  flex-wrap: wrap;
  gap: 12px;
}


@media (max-width: 1180px) {
  .nav-link {
    padding: 6px 9px;
    font-size: 0.82rem;
  }
  .btn-nav-phone {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}


@media (max-width: 1024px) {
  :scope {
    --header-height: 66px;
  }
  .nav-menu-wrapper,
  .btn-phone-desktop {
    display: none !important;
  }
  .hamburger-btn {
    display: flex !important;
  }
  .btn-cta-desktop {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .shared-footer-brand p {
    max-width: 100%;
  }
}


@media (max-width: 768px) {
  :scope {
    --header-height: 62px;
  }
  .btn-cta-desktop {
    display: none !important;
  }
  .shared-site-footer {
    padding: 46px 0 24px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding-bottom: 28px;
  }
}


@media (max-width: 540px) {
  :scope {
    --header-height: 58px;
  }
  .nav-container {
    padding: 0 14px;
  }
  .hamburger-btn {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  .hamburger-btn span {
    width: 20px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
  }
  .shared-footer-col-company {
    grid-column: 1;
  }
  .shared-footer-col-solutions {
    grid-column: 2;
  }
  .shared-footer-col-resources {
    grid-column: 1 / -1;
  }
  .shared-footer-col h5 {
    margin-bottom: 12px;
  }
  .shared-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


@media (max-width: 360px) {
  .shared-brand-logo {
    font-size: 1.15rem;
  }
  .mobile-nav-drawer {
    width: 90vw;
    padding: 18px 14px 22px;
  }
  .mobile-nav-link {
    font-size: 0.95rem;
  }
}
  
}
:where(html[data-page="index"]) .shared-kx-mobile-drawer { visibility: hidden; }
:where(html[data-page="index"]) .shared-kx-mobile-drawer.open { visibility: visible; }
:where(html[data-page="index"]) .shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="index"]) .shared-kx-btn-pill-navy:active,:where(html[data-page="index"]) 
  .shared-kx-btn-pill-gold:active,:where(html[data-page="index"]) 
  .kx-modal-submit:active { transform: none; }
}

/* micro-interactions.css */
/* Shared feedback layer. Motion acknowledges actions; informational content stays still. */
:root:where([data-page="index"]){--kx-feedback-ease:cubic-bezier(.2,.75,.25,1);--kx-feedback-duration:180ms}
:where(html[data-page="index"]) :where(a,button,summary,input,textarea,select):focus-visible{outline:3px solid #187d6b!important;outline-offset:4px}
:where(html[data-page="index"]) :where(.shared-kx-footer,.ma-dark,.ma-closing) :where(a,button):focus-visible{outline-color:#ffc526!important}
:where(html[data-page="index"]) :where(button,summary,.kx-mi-action){-webkit-tap-highlight-color:rgba(245,169,22,.18);touch-action:manipulation}
:where(html[data-page="index"]) .kx-mi-action{transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease),scale 120ms var(--kx-feedback-ease),box-shadow var(--kx-feedback-duration) var(--kx-feedback-ease),background-color var(--kx-feedback-duration) ease,border-color var(--kx-feedback-duration) ease!important}
:where(html[data-page="index"]) .kx-mi-arrow{display:inline-block;transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease)!important}
:where(html[data-page="index"]) .kx-mi-card{transition:translate 220ms var(--kx-feedback-ease),box-shadow 220ms var(--kx-feedback-ease),border-color 180ms ease!important}
:where(html[data-page="index"]) .shared-footer-links a,:where(html[data-page="index"]) .shared-kx-dropdown-item,:where(html[data-page="index"]) .shared-kx-mobile-nav-link{ text-decoration-color:transparent;text-underline-offset:5px;transition:color 160ms ease,background-color 160ms ease,text-decoration-color 160ms ease!important}
:where(html[data-page="index"]) .shared-footer-links a:focus-visible{ text-decoration:underline;text-decoration-color:currentColor }
:where(html[data-page="index"]) :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea,select){transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease!important}
:where(html[data-page="index"]) :where(input:not([type=checkbox]):not([type=radio]),textarea,select):focus{border-color:#187d6b!important;box-shadow:0 0 0 3px rgb(24 125 107 / .12)}
:where(html[data-page="index"]) :where(button[aria-expanded],summary){transition:background-color 160ms ease,color 160ms ease!important}
:where(html[data-page="index"]) :where(button[aria-expanded],summary):focus-visible{border-radius:8px}
@media(hover:hover) and (pointer:fine){
  :where(html[data-page="index"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):hover{translate:0 -2px}
  :where(html[data-page="index"]) .kx-mi-action:hover .kx-mi-arrow,:where(html[data-page="index"]) .kx-mi-action:focus-visible .kx-mi-arrow{translate:3px 0}
  :where(html[data-page="index"]) .kx-mi-card:hover,:where(html[data-page="index"]) .kx-mi-card:focus-within{translate:0 -3px;border-color:#d8ba78;box-shadow:0 10px 24px rgb(16 32 57 / .08)}
  :where(html[data-page="index"]) .shared-footer-links a:hover{text-decoration:underline;text-decoration-color:currentColor}
}
:where(html[data-page="index"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):active{translate:0 0;scale:.98;transition-duration:80ms!important}
:where(html[data-page="index"]) .kx-mi-card:active{translate:0 -1px}
/* Honor this preference for both this layer and pre-existing decorative loops. */
@media(prefers-reduced-motion:reduce){
  html:where([data-page="index"]){scroll-behavior:auto!important}
  :where(html[data-page="index"]) *,:where(html[data-page="index"]) *::before,:where(html[data-page="index"]) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  :where(html[data-page="index"]) .kx-mi-action,:where(html[data-page="index"]) .kx-mi-card,:where(html[data-page="index"]) .kx-mi-arrow{translate:none!important;scale:none!important;transition:none!important}
  :where(html[data-page="index"]) .shared-footer-links a,:where(html[data-page="index"]) .shared-kx-dropdown-item,:where(html[data-page="index"]) .shared-kx-mobile-nav-link{transition:none!important}
}

/* page-container-rhythm.css */
/* Shared page rhythm: mirrors the Industries page container at every breakpoint. */
:root:where([data-page="index"]) {
  --kx-page-container: 1240px;
  --kx-page-gutter: 24px;
}

:where(html[data-page="index"]) .shared-kx-header > .shared-kx-container,:where(html[data-page="index"]) 
.ux-page .shared-kx-container,:where(html[data-page="index"]) 
main > section > :is(
  .container,
  .su-container,
  .impact-container,
  .origin-desktop-view,
  .phil-container,
  .journey-tl-container,
  .careersHero-container,
  .chFeels-container,
  .contact-hero-v2-container,
  .contact-container,
  .taste-inner,
  .ai-container,
  .rv-container,
  .wd-container,
  .wd-tech-container,
  .wd-testi-faq-container,
  .kx-ah-container,
  .ma-container,
  .kats-container,
  .cloud-hero-container,
  .kx-container
),:where(html[data-page="index"]) 
body > section > :is(
  .container,
  .contact-container,
  .cloud-hero-container,
  .kx-container
) {
  width: 100% !important;
  max-width: var(--kx-page-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--kx-page-gutter) !important;
  padding-right: var(--kx-page-gutter) !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  :root:where([data-page="index"]) { --kx-page-gutter: 16px; }
}

/* This section previously put its gutter on the full-width background itself. */
@media (max-width: 1023px) {
  :where(html[data-page="index"]) .wd-tech-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}



/* PAGE about */
/* about.html embedded 1 */

    /* =========================================================================
   1. GLOBAL NAVIGATION & MODAL STYLES (INLINED)
   ========================================================================= */
    /* ==========================================================================
   Kaxon Technologies - Global Header Navigation & Modal Stylesheet (nav.css)
   Shared across all pages: Home, About, Services, Industries, Case Studies, Resources, Contact, Team
   ========================================================================== */

    :root:where([data-page="about"]) {
      --kx-navy: #13243D;
      --kx-deep-navy: #0D1B31;
      --kx-secondary-navy: #1B3152;
      --kx-gold: #F9BE22;
      --kx-gold-hover: #FFCA3A;
      --kx-green: #20B86B;
      --kx-cyan: #52BCEB;
      --kx-soft-cyan: #EAF8FF;
      --kx-soft-gold: #FFF8DD;
      --kx-soft-green: #E8F8F0;
      --kx-white: #FFFFFF;
      --kx-gray: #F4F6FA;
      --kx-border: #E8EDF4;
      --kx-border-subtle: #F1F4F9;
      --kx-text-dark: #13243D;
      --kx-text-muted: #65748B;
      --kx-radius-pill: 9999px;
      --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
    }

    /* ==========================================================================
   GLOBAL HEADER BAR
   ========================================================================== */
    :where(html[data-page="about"]) .kx-header {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 1000;
      border-bottom: 1px solid var(--kx-border-subtle);
      transition: all 0.3s ease;
    }

    :where(html[data-page="about"]) .kx-header.scrolled {
      box-shadow: 0 8px 24px rgba(19, 36, 61, 0.05);
      background: rgba(255, 255, 255, 0.98);
    }

    :where(html[data-page="about"]) .kx-container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
    }

    @media (max-width: 768px) {
      :where(html[data-page="about"]) .kx-container {
        padding: 0 20px;
      }
    }

    :where(html[data-page="about"]) .kx-nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 78px;
    }

    /* Brand Logo */
    :where(html[data-page="about"]) .kx-logo {
      display: flex;
      align-items: center;
      gap: 2px;
      font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.04em;
      color: var(--kx-navy);
      text-decoration: none;
      user-select: none;
    }

    :where(html[data-page="about"]) .kx-logo-tech {
      color: var(--kx-green);
      font-weight: 800;
    }

    /* Menu Links */
    :where(html[data-page="about"]) .kx-nav-menu {
      display: flex;
      align-items: center;
    }

    :where(html[data-page="about"]) .kx-nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    :where(html[data-page="about"]) .kx-nav-item {
      position: relative;
    }

    :where(html[data-page="about"]) .kx-nav-link {
      font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 15px;
      font-weight: 600;
      color: var(--kx-navy);
      text-decoration: none;
      padding: 8px 2px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      position: relative;
      transition: color 0.2s ease;
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .kx-nav-link:hover {
      color: var(--kx-secondary-navy);
    }

    :where(html[data-page="about"]) .kx-nav-link.active {
      color: var(--kx-navy);
      font-weight: 700;
    }

    :where(html[data-page="about"]) .kx-nav-link.active::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 2.5px;
      background-color: var(--kx-gold);
      border-radius: 2px;
    }

    :where(html[data-page="about"]) .kx-chevron-icon {
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }

    /* Dropdown */
    :where(html[data-page="about"]) .kx-dropdown-wrapper {
      position: relative;
    }

    :where(html[data-page="about"]) .kx-dropdown-wrapper:hover .kx-chevron-icon,:where(html[data-page="about"]) 
    .kx-dropdown-wrapper:focus-within .kx-chevron-icon {
      transform: rotate(180deg);
    }

    :where(html[data-page="about"]) .kx-dropdown-menu {
      position: absolute;
      top: 100%;
      left: -20px;
      width: 260px;
      background: var(--kx-white);
      border-radius: 16px;
      padding: 12px;
      box-shadow: 0 16px 36px rgba(19, 36, 61, 0.1);
      border: 1px solid var(--kx-border);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
      z-index: 100;
    }

    :where(html[data-page="about"]) .kx-dropdown-wrapper:hover .kx-dropdown-menu,:where(html[data-page="about"]) 
    .kx-dropdown-wrapper:focus-within .kx-dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

    :where(html[data-page="about"]) .kx-dropdown-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 10px;
      font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: var(--kx-navy);
      text-decoration: none;
      transition: background 0.2s ease, color 0.2s ease;
    }

    :where(html[data-page="about"]) .kx-dropdown-item:hover {
      background: var(--kx-soft-cyan);
      color: var(--kx-secondary-navy);
    }

    /* Action Buttons */
    :where(html[data-page="about"]) .kx-nav-actions {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    :where(html[data-page="about"]) .kx-btn-pill-navy {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--kx-navy);
      color: var(--kx-white);
      font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 14px;
      font-weight: 700;
      padding: 11px 22px;
      border-radius: var(--kx-radius-pill);
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .kx-btn-pill-navy:hover {
      background: var(--kx-deep-navy);
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(19, 36, 61, 0.2);
    }

    :where(html[data-page="about"]) .kx-btn-pill-gold {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--kx-gold);
      color: var(--kx-navy);
      font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 14px;
      font-weight: 800;
      padding: 11px 22px;
      border-radius: var(--kx-radius-pill);
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.2s ease;
      white-space: nowrap;
      box-shadow: var(--kx-shadow-gold);
    }

    :where(html[data-page="about"]) .kx-btn-pill-gold:hover {
      background: var(--kx-gold-hover);
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(249, 190, 34, 0.4);
    }

    /* Mobile Toggle */
    :where(html[data-page="about"]) .kx-mobile-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      color: var(--kx-navy);
      border-radius: 8px;
    }

    @media (max-width: 992px) {
      :where(html[data-page="about"]) .kx-nav-links {
        display: none;
      }

      :where(html[data-page="about"]) .kx-nav-actions .kx-btn-pill-navy {
        display: none;
      }

      :where(html[data-page="about"]) .kx-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    @media (max-width: 640px) {
      :where(html[data-page="about"]) .kx-nav-actions .kx-btn-pill-gold {
        display: none;
      }

      :where(html[data-page="about"]) .kx-header {
        height: 64px;
      }

      :where(html[data-page="about"]) .kx-container {
        padding: 0 16px;
        width: 100%;
        max-width: 100%;
      }

      :where(html[data-page="about"]) .kx-logo {
        font-size: 20px;
      }

      :where(html[data-page="about"]) .kx-logo-tech {
        font-size: 20px;
      }
    }

    /* Mobile Navigation Drawer */
    :where(html[data-page="about"]) .kx-mobile-drawer {
      position: fixed;
      top: 78px;
      left: 0;
      width: 100%;
      height: calc(100vh - 78px);
      background: var(--kx-white);
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      z-index: 999;
      overflow-y: auto;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    :where(html[data-page="about"]) .kx-mobile-drawer.open {
      transform: translateX(0);
    }

    :where(html[data-page="about"]) .kx-mobile-nav-link {
      font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 17px;
      font-weight: 700;
      color: var(--kx-navy);
      text-decoration: none;
      padding: 12px 0;
      border-bottom: 1px solid var(--kx-border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    :where(html[data-page="about"]) .kx-mobile-nav-link.active {
      color: #D97706;
      font-weight: 800;
    }

    /* ==========================================================================
   GLOBAL CONSULTATION / INQUIRY MODAL SYSTEM
   ========================================================================== */
    :where(html[data-page="about"]) .kx-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(13, 27, 49, 0.75);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    :where(html[data-page="about"]) .kx-modal-backdrop.active {
      opacity: 1;
      visibility: visible;
    }

    :where(html[data-page="about"]) .kx-modal-window {
      background: var(--kx-white);
      border-radius: 24px;
      width: 100%;
      max-width: 580px;
      padding: 36px 40px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
      position: relative;
      transform: translateY(20px) scale(0.96);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      max-height: 90vh;
      overflow-y: auto;
    }

    :where(html[data-page="about"]) .kx-modal-backdrop.active .kx-modal-window {
      transform: translateY(0) scale(1);
    }

    :where(html[data-page="about"]) .kx-modal-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--kx-gray);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--kx-text-muted);
      transition: all 0.2s ease;
    }

    :where(html[data-page="about"]) .kx-modal-close:hover {
      background: var(--kx-border);
      color: var(--kx-navy);
    }

    :where(html[data-page="about"]) .kx-modal-header {
      margin-bottom: 24px;
    }

    :where(html[data-page="about"]) .kx-modal-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      font-weight: 800;
      color: var(--kx-green);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 8px;
    }

    :where(html[data-page="about"]) .kx-modal-title {
      font-size: 26px;
      font-weight: 800;
      color: var(--kx-navy);
      margin-bottom: 6px;
      line-height: 1.2;
    }

    :where(html[data-page="about"]) .kx-modal-sub {
      font-size: 14.5px;
      color: var(--kx-text-muted);
    }

    :where(html[data-page="about"]) .kx-form-group {
      margin-bottom: 18px;
    }

    :where(html[data-page="about"]) .kx-form-label {
      display: block;
      font-size: 13.5px;
      font-weight: 700;
      color: var(--kx-navy);
      margin-bottom: 6px;
    }

    :where(html[data-page="about"]) .kx-form-input,:where(html[data-page="about"]) 
    .kx-form-select,:where(html[data-page="about"]) 
    .kx-form-textarea {
      width: 100%;
      padding: 12px 16px;
      border-radius: 12px;
      border: 1.5px solid var(--kx-border);
      font-family: inherit;
      font-size: 14.5px;
      color: var(--kx-navy);
      background: var(--kx-white);
      transition: all 0.2s ease;
      box-sizing: border-box;
    }

    :where(html[data-page="about"]) .kx-form-input:focus,:where(html[data-page="about"]) 
    .kx-form-select:focus,:where(html[data-page="about"]) 
    .kx-form-textarea:focus {
      outline: none;
      border-color: var(--kx-gold);
      box-shadow: 0 0 0 3px rgba(249, 190, 34, 0.2);
    }

    :where(html[data-page="about"]) .kx-form-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    @media (max-width: 600px) {
      :where(html[data-page="about"]) .kx-form-grid-2 {
        grid-template-columns: 1fr;
      }

      :where(html[data-page="about"]) .kx-modal-window {
        padding: 28px 20px;
      }
    }

    :where(html[data-page="about"]) .kx-hipaa-badge-box {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--kx-soft-green);
      border: 1px solid rgba(32, 184, 107, 0.3);
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 12.5px;
      color: #065F46;
      font-weight: 600;
      margin-bottom: 20px;
    }

    :where(html[data-page="about"]) .kx-form-submit-btn {
      width: 100%;
      padding: 14px;
      border-radius: var(--kx-radius-pill);
      background: var(--kx-gold);
      color: var(--kx-navy);
      font-size: 15.5px;
      font-weight: 800;
      border: none;
      cursor: pointer;
      box-shadow: var(--kx-shadow-gold);
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    :where(html[data-page="about"]) .kx-form-submit-btn:hover {
      background: var(--kx-gold-hover);
      transform: translateY(-2px);
    }

    @keyframes page-about-kxSpin {
      to {
        transform: rotate(360deg);
      }
    }

    :where(html[data-page="about"]) .kx-spin {
      animation: page-about-kxSpin 0.8s linear infinite;
    }

    /* =========================================================================
   2. ABOUT & GROWTH SYSTEMS STYLES (INLINED)
   ========================================================================= */

    :root:where([data-page="about"]) {
      /* Colors */
      --cream: #FBF7EF;
      --white: #FFFFFF;
      --navy: #102039;
      --navy-dark: #0B1627;
      --gold: #F5A916;
      --gold-light: #FFC94A;
      --blue: #438BFF;
      --teal: #24B7A8;
      --green: #37BE7B;
      --purple: #8B60F6;
      --pink: #E66BA8;
      --orange: #F47B20;
      --muted: #5E748F;
      --border: #E2E7EE;

      /* Typography */
      --font-display: 'Manrope', sans-serif;
      --font-body: 'Inter', sans-serif;
      --font-hand: 'Caveat', cursive;

      /* Shadows */
      --shadow-sm: 0 8px 24px rgba(16, 32, 57, 0.05);
      --shadow-md: 0 14px 36px rgba(16, 32, 57, 0.07);
      --shadow-lg: 0 25px 65px rgba(16, 32, 57, 0.15);

      /* Radii */
      --radius-sm: 12px;
      --radius-md: 18px;
      --radius-lg: 24px;
      --radius-pill: 999px;
    }

    /* Reset & Base */
    :where(html[data-page="about"]) * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html:where([data-page="about"]),:where(html[data-page="about"]) 
    body {
      max-width: 100%;
      overflow-x: hidden;
    }

    :where(html[data-page="about"]) body {
      font-family: var(--font-body);
      background-color: var(--cream);
      color: var(--navy);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    :where(html[data-page="about"]) h1,:where(html[data-page="about"]) 
    h2,:where(html[data-page="about"]) 
    h3,:where(html[data-page="about"]) 
    h4,:where(html[data-page="about"]) 
    h5,:where(html[data-page="about"]) 
    h6 {
      font-family: var(--font-display);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.03em;
      line-height: 1.1;
    }

    :where(html[data-page="about"]) a {
      text-decoration: none;
      color: inherit;
      transition: all 0.2s ease;
    }

    :where(html[data-page="about"]) ul {
      list-style: none;
    }

    :where(html[data-page="about"]) img,:where(html[data-page="about"]) 
    svg {
      max-width: 100%;
      display: block;
    }

    /* Utilities */
    :where(html[data-page="about"]) .container {
      width: 100%;
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 48px;
      box-sizing: border-box;
    }

    :where(html[data-page="about"]) .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 28px;
      height: 52px;
      border-radius: var(--radius-pill, 9999px);
      font-family: var(--font-display, 'Manrope', sans-serif);
      font-weight: 700;
      font-size: 15px;
      gap: 10px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      border: none;
      white-space: nowrap;
      flex-shrink: 0;
      text-decoration: none;
      line-height: 1;
    }

    :where(html[data-page="about"]) .btn:hover {
      transform: translateY(-2px);
    }

    :where(html[data-page="about"]) .btn-primary {
      background: var(--gold);
      color: var(--navy);
    }

    :where(html[data-page="about"]) .btn-primary:hover {
      background: var(--gold-light);
      box-shadow: 0 8px 20px rgba(245, 169, 22, 0.3);
    }

    :where(html[data-page="about"]) .btn-secondary {
      background: var(--white);
      color: var(--navy);
      box-shadow: var(--shadow-sm);
    }

    :where(html[data-page="about"]) .btn-secondary:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    :where(html[data-page="about"]) .btn-outline {
      background: transparent;
      color: var(--white);
      border: 2px solid rgba(255, 255, 255, 0.2);
    }

    :where(html[data-page="about"]) .btn-outline:hover {
      background: var(--white);
      color: var(--navy);
    }

    :where(html[data-page="about"]) .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--gold);
      margin-bottom: 24px;
    }

    /* Animations - Bulletproof visibility with smooth hardware acceleration */
    :where(html[data-page="about"]) .reveal-up {
      opacity: 1;
      transform: none;
      transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    :where(html[data-page="about"]) .reveal-scale {
      opacity: 1;
      transform: none;
      transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    :where(html[data-page="about"]) .js-anim-ready .reveal-up:not(.revealed) {
      opacity: 0;
      transform: translateY(24px);
    }

    :where(html[data-page="about"]) .js-anim-ready .reveal-scale:not(.revealed) {
      opacity: 0;
      transform: scale(0.96);
    }

    :where(html[data-page="about"]) .reveal-up.revealed,:where(html[data-page="about"]) 
    .js-anim-ready .reveal-up.revealed {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }

    :where(html[data-page="about"]) .reveal-scale.revealed,:where(html[data-page="about"]) 
    .js-anim-ready .reveal-scale.revealed {
      opacity: 1 !important;
      transform: scale(1) !important;
    }

    /* Background Decoration */
    :where(html[data-page="about"]) .bg-texture {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: radial-gradient(var(--navy) 1px, transparent 1px);
      background-size: 24px 24px;
      opacity: 0.04;
      pointer-events: none;
      z-index: -1;
    }

    /* ==========================================================================
   Floating Pill Navigation Header (Exact Reference Match)
   ========================================================================== */
    :where(html[data-page="about"]) .header-floating-wrapper {
      position: sticky;
      top: 18px;
      left: 0;
      width: 100%;
      z-index: 1000;
      padding: 0 24px;
      pointer-events: none;
    }

    :where(html[data-page="about"]) .nav-pill-container {
      max-width: 1320px;
      margin: 0 auto;
      background: #FFFFFF;
      border-radius: 9999px;
      border: 1px solid rgba(226, 232, 240, 0.95);
      box-shadow:
        0 16px 40px rgba(16, 32, 57, 0.08),
        0 2px 8px rgba(16, 32, 57, 0.03);
      padding: 8px 10px 8px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      pointer-events: auto;
      position: relative;
      transition: all 0.3s ease;
    }

    /* Brand Logo Group */
    :where(html[data-page="about"]) .nav-brand-group {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .nav-logo-icon {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :where(html[data-page="about"]) .nav-brand-text {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .brand-title {
      font-family: var(--font-display);
      font-size: 19px;
      font-weight: 800;
      color: #102039;
      letter-spacing: -0.03em;
      line-height: 1.1;
    }

    :where(html[data-page="about"]) .brand-subtitle {
      font-family: var(--font-display);
      font-size: 7.5px;
      font-weight: 800;
      letter-spacing: 0.14em;
      color: #64748B;
      text-transform: uppercase;
      margin-top: 2px;
      white-space: nowrap;
    }

    /* Center Navigation Links */
    :where(html[data-page="about"]) .nav-menu {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    :where(html[data-page="about"]) .nav-link {
      font-size: 14.5px;
      font-weight: 600;
      color: #102039;
      text-decoration: none;
      position: relative;
      padding: 6px 4px;
      transition: color 0.2s ease;
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .nav-link:hover {
      color: #F5A916;
    }

    :where(html[data-page="about"]) .nav-link.active {
      color: #F5A916;
      font-weight: 700;
    }

    :where(html[data-page="about"]) .active-indicator {
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 22px;
      height: 3px;
      background-color: #F5A916;
      border-radius: 2px;
    }

    /* Solutions Dropdown Trigger & Wrapper */
    :where(html[data-page="about"]) .nav-dropdown-wrapper {
      position: relative;
      display: inline-block;
    }

    :where(html[data-page="about"]) .nav-dropdown-btn {
      background: #FFFBEB;
      border: 1px solid rgba(245, 169, 22, 0.25);
      padding: 6px 14px 6px 16px;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: inherit;
      font-size: 14px;
      font-weight: 700;
      color: #102039;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    :where(html[data-page="about"]) .nav-dropdown-btn:hover,:where(html[data-page="about"]) 
    .nav-dropdown-wrapper:hover .nav-dropdown-btn,:where(html[data-page="about"]) 
    .nav-dropdown-wrapper.is-open .nav-dropdown-btn {
      background: #FEF3C7;
      border-color: rgba(245, 169, 22, 0.45);
    }

    :where(html[data-page="about"]) .dropdown-chevron {
      color: #D97706;
      transition: transform 0.25s ease;
    }

    :where(html[data-page="about"]) .nav-dropdown-wrapper:hover .dropdown-chevron,:where(html[data-page="about"]) 
    .nav-dropdown-wrapper.is-open .dropdown-chevron {
      transform: rotate(180deg);
    }

    /* Dropdown Menu Card */
    :where(html[data-page="about"]) .nav-dropdown-menu {
      position: absolute;
      top: calc(100% + 14px);
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      width: 320px;
      background: #FFFFFF;
      border-radius: 24px;
      border: 1px solid rgba(226, 232, 240, 0.95);
      box-shadow:
        0 24px 60px rgba(16, 32, 57, 0.14),
        0 4px 16px rgba(16, 32, 57, 0.04);
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
      z-index: 1100;
    }

    /* Show on Hover or Active */
    :where(html[data-page="about"]) .nav-dropdown-wrapper:hover .nav-dropdown-menu,:where(html[data-page="about"]) 
    .nav-dropdown-wrapper.is-open .nav-dropdown-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    /* Invisible hover bridge to prevent flickers */
    :where(html[data-page="about"]) .nav-dropdown-wrapper::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      height: 18px;
    }

    /* Dropdown Item */
    :where(html[data-page="about"]) .dropdown-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 16px;
      text-decoration: none;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    :where(html[data-page="about"]) .dropdown-item:hover {
      background: #F8FAFC;
      transform: translateX(3px);
    }

    :where(html[data-page="about"]) .dropdown-icon-box {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .box-gold {
      background: #FEF3C7;
      color: #D97706;
    }

    :where(html[data-page="about"]) .box-pink {
      background: #FFE4E6;
      color: #E11D48;
    }

    :where(html[data-page="about"]) .box-cyan {
      background: #E0F2FE;
      color: #0284C7;
    }

    :where(html[data-page="about"]) .box-green {
      background: #DCFCE7;
      color: #16A34A;
    }

    :where(html[data-page="about"]) .box-purple {
      background: #F3E8FF;
      color: #9333EA;
    }

    :where(html[data-page="about"]) .box-amber {
      background: #FFEDD5;
      color: #EA580C;
    }

    :where(html[data-page="about"]) .dropdown-item-text {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
    }

    :where(html[data-page="about"]) .dropdown-item-title {
      font-size: 13.5px;
      font-weight: 700;
      color: #102039;
      line-height: 1.25;
    }

    :where(html[data-page="about"]) .dropdown-item-desc {
      font-size: 11px;
      font-weight: 500;
      color: #64748B;
      line-height: 1.2;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    :where(html[data-page="about"]) .dropdown-item-arrow {
      color: #CBD5E1;
      flex-shrink: 0;
      transition: transform 0.2s ease, color 0.2s ease;
    }

    :where(html[data-page="about"]) .dropdown-item:hover .dropdown-item-arrow {
      color: #102039;
      transform: translateX(2px);
    }

    /* Right Actions Group */
    :where(html[data-page="about"]) .nav-actions {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    :where(html[data-page="about"]) .nav-divider {
      width: 1px;
      height: 28px;
      background: #E2E8F0;
      margin: 0 4px;
    }

    /* Phone Contact Pill Widget */
    :where(html[data-page="about"]) .nav-phone-pill {
      display: flex;
      align-items: center;
      gap: 9px;
      text-decoration: none;
      padding: 4px 10px;
      border-radius: 9999px;
      transition: opacity 0.2s ease;
    }

    :where(html[data-page="about"]) .nav-phone-pill:hover {
      opacity: 0.85;
    }

    :where(html[data-page="about"]) .phone-icon-circle {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :where(html[data-page="about"]) .phone-text-block {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .phone-number {
      font-size: 13px;
      font-weight: 800;
      color: #102039;
      line-height: 1.15;
      letter-spacing: -0.01em;
    }

    :where(html[data-page="about"]) .phone-tagline {
      font-size: 10.5px;
      font-weight: 500;
      color: #64748B;
      line-height: 1.1;
      margin-top: 1px;
    }

    /* Primary CTA Button with Dark Circle Arrow */
    :where(html[data-page="about"]) .nav-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: #F5A916;
      color: #102039;
      padding: 6px 6px 6px 20px;
      border-radius: 9999px;
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 800;
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(245, 169, 22, 0.35);
      transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .nav-cta-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(245, 169, 22, 0.45);
      background: #FBBF24;
    }

    :where(html[data-page="about"]) .cta-arrow-circle {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #0A1628;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform 0.25s ease;
    }

    :where(html[data-page="about"]) .nav-cta-btn:hover .cta-arrow-circle {
      transform: translateX(2px);
    }

    /* Mobile Toggle Button */
    :where(html[data-page="about"]) .mobile-nav-toggle {
      display: none;
      background: none;
      border: none;
      color: #102039;
      padding: 8px;
      cursor: pointer;
      border-radius: 8px;
    }

    /* ==========================================================================
   Responsive Navigation Adaptations
   ========================================================================== */
    @media (max-width: 1200px) {
      :where(html[data-page="about"]) .nav-menu {
        gap: 16px;
      }

      :where(html[data-page="about"]) .nav-link {
        font-size: 13.5px;
      }

      :where(html[data-page="about"]) .phone-tagline {
        display: none;
      }
    }

    @media (max-width: 1024px) {
      :where(html[data-page="about"]) .header-floating-wrapper {
        top: 12px;
        padding: 0 16px;
      }

      :where(html[data-page="about"]) .nav-pill-container {
        padding: 8px 16px;
      }

      :where(html[data-page="about"]) .nav-menu {
        display: none;
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        right: 0;
        background: #FFFFFF;
        border-radius: 24px;
        border: 1px solid rgba(226, 232, 240, 0.95);
        box-shadow: 0 20px 50px rgba(16, 32, 57, 0.15);
        padding: 24px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }

      :where(html[data-page="about"]) .nav-menu.is-active {
        display: flex;
      }

      :where(html[data-page="about"]) .nav-dropdown-menu {
        position: static;
        transform: none;
        width: 100%;
        box-shadow: none;
        border: 1px solid #F1F5F9;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        margin-top: 8px;
      }

      :where(html[data-page="about"]) .mobile-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      :where(html[data-page="about"]) .nav-phone-pill {
        display: none;
      }
    }

    @media (max-width: 640px) {
      :where(html[data-page="about"]) .brand-subtitle {
        display: none;
      }

      :where(html[data-page="about"]) .nav-cta-btn span {
        display: none;
      }

      :where(html[data-page="about"]) .nav-cta-btn {
        padding: 4px;
      }

      :where(html[data-page="about"]) .nav-divider {
        display: none;
      }
    }

    /* Hero Section */
    :where(html[data-page="about"]) .hero {
      padding: 16px 0 20px;
      min-height: auto;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="about"]) .hero .container {
      display: grid;
      grid-template-columns: 46% 54%;
      gap: 16px;
      gap: 32px;
      align-items: center;
    }

    :where(html[data-page="about"]) .hero-content {
      position: relative;
      z-index: 5;
      padding-right: 20px;
    }

    :where(html[data-page="about"]) .breadcrumb {
      display: inline-flex;
      background: var(--white);
      border: 1px solid var(--border);
      padding: 8px 16px;
      border-radius: var(--radius-pill);
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      margin-bottom: 24px;
      gap: 8px;
      align-items: center;
    }

    :where(html[data-page="about"]) .breadcrumb span.active {
      color: var(--navy);
    }

    /* Hero Eyebrow Pill */
    :where(html[data-page="about"]) .hero-eyebrow-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 16px;
      background: #FFF8EA;
      border: 1px solid rgba(245, 169, 22, 0.3);
      border-radius: 9999px;
      margin-bottom: 20px;
      box-shadow: 0 2px 8px rgba(245, 169, 22, 0.08);
    }

    :where(html[data-page="about"]) .hero-eyebrow-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #F5A916;
      box-shadow: 0 0 8px #F5A916;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .hero-eyebrow-text {
      font-family: var(--font-display, 'Manrope', sans-serif);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #B45309;
      line-height: 1.2;
    }

    :where(html[data-page="about"]) .hero h1 {
      font-size: clamp(34px, 4.8vw, 64px);
      line-height: 1.15;
      letter-spacing: -0.035em;
      margin-bottom: 24px;
      max-width: 720px;
    }

    :where(html[data-page="about"]) .hero h1 .highlight {
      color: var(--gold);
      position: relative;
      display: inline-block;
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .hero h1 .highlight svg {
      position: absolute;
      bottom: -6px;
      left: 0;
      width: 100%;
      height: 12px;
      pointer-events: none;
      z-index: 1;
    }

    :where(html[data-page="about"]) .hero p {
      font-size: 18px;
      color: var(--muted);
      max-width: 680px;
      margin-bottom: 32px;
      line-height: 1.62;
    }

    :where(html[data-page="about"]) .hero-buttons {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      position: relative;
      z-index: 10;
    }

    /* Handwritten Annotations */
    :where(html[data-page="about"]) .hw-annotation {
      position: absolute;
      font-family: var(--font-hand);
      color: #B45309;
      font-size: 22px;
      line-height: 1.1;
      z-index: 2;
      pointer-events: none;
    }

    :where(html[data-page="about"]) .hw-annotation svg {
      position: absolute;
      color: var(--gold);
      overflow: visible;
    }

    :where(html[data-page="about"]) .hw-left {
      top: -40px;
      left: 0;
      width: 150px;
      transform: rotate(-6deg);
      font-size: 18px;
      text-align: left;
    }

    :where(html[data-page="about"]) .hw-left svg {
      right: -20px;
      top: 30px;
      width: 35px;
      transform: rotate(45deg);
    }

    :where(html[data-page="about"]) .hw-bottom {
      bottom: -30px;
      left: -20px;
      width: 150px;
      transform: rotate(-5deg);
    }

    :where(html[data-page="about"]) .hw-bottom svg {
      right: -40px;
      top: -10px;
      width: 50px;
    }

    :where(html[data-page="about"]) .hw-right {
      top: -20px;
      right: -20px;
      width: 180px;
      transform: rotate(4deg);
      text-align: center;
    }

    :where(html[data-page="about"]) .hw-right svg {
      left: 40px;
      bottom: -40px;
      width: 50px;
    }

    /* Growth Orbit Visual (High Precision Geometric Engine - Scaled for Perfect Fit) */
    :where(html[data-page="about"]) .hero-visual {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      padding: 0;
    }

    :where(html[data-page="about"]) .orbit-wrapper {
      position: relative;
      width: min(540px, 38vw);
      aspect-ratio: 1;
      margin: 0 auto;
      z-index: 10;
    }

    :where(html[data-page="about"]) .orbit-svg-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    :where(html[data-page="about"]) .orbit-svg-container svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Center Hub */
    :where(html[data-page="about"]) .orbit-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 190px;
      height: 190px;
      background: radial-gradient(circle at 35% 25%, #162c4e 0%, #0d1a2d 60%, #08101d 100%);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      box-shadow: 0 18px 40px rgba(10, 22, 39, 0.35), inset 0 0 0 1.5px rgba(245, 169, 22, 0.45), 0 0 25px rgba(245, 169, 22, 0.12);
      z-index: 5;
      animation: page-about-hub-breathe 6s ease-in-out infinite;
      overflow: hidden;
    }

    @keyframes page-about-hub-breathe {

      0%,
      100% {
        box-shadow: 0 18px 40px rgba(10, 22, 39, 0.35), inset 0 0 0 1.5px rgba(245, 169, 22, 0.45), 0 0 25px rgba(245, 169, 22, 0.1);
      }

      50% {
        box-shadow: 0 22px 48px rgba(10, 22, 39, 0.45), inset 0 0 0 2px rgba(245, 169, 22, 0.7), 0 0 35px rgba(245, 169, 22, 0.22);
      }
    }

    :where(html[data-page="about"]) .hub-gloss {
      position: absolute;
      top: -8px;
      right: 8px;
      width: 120px;
      height: 60px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, rgba(56, 189, 248, 0.2) 40%, transparent 75%);
      transform: rotate(-25deg);
      pointer-events: none;
    }

    :where(html[data-page="about"]) .orbit-center h3 {
      color: #FFFFFF;
      font-size: 15px;
      line-height: 1.15;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin: 0;
      max-width: 115px;
    }

    :where(html[data-page="about"]) .hub-divider {
      width: 18px;
      height: 2px;
      background: #F5A916;
      border-radius: 2px;
      margin: 4px 0 3px 0;
      box-shadow: 0 0 6px rgba(245, 169, 22, 0.6);
    }

    :where(html[data-page="about"]) .hub-label {
      font-size: 7.5px;
      font-weight: 800;
      letter-spacing: 0.15em;
      color: rgba(255, 255, 255, 0.95);
      margin-bottom: 2px;
      display: block;
    }

    :where(html[data-page="about"]) .hub-support {
      font-size: 6.5px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: rgba(255, 255, 255, 0.7);
      display: block;
      white-space: nowrap;
    }

    /* Orbit Nodes */
    :where(html[data-page="about"]) .orbit-node {
      position: absolute;
      transform: translate(-50%, -50%);
      z-index: 10;
      width: 110px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    :where(html[data-page="about"]) .node-aura {
      position: absolute;
      top: 26px;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 76px;
      height: 76px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--node-color) 0%, transparent 70%);
      opacity: 0.18;
      border: 1px solid var(--node-color);
      pointer-events: none;
      transition: all 0.3s ease;
      z-index: 1;
    }

    :where(html[data-page="about"]) .node-inner {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    :where(html[data-page="about"]) .node-icon {
      width: 52px;
      height: 52px;
      background: #FFFFFF;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--node-color);
      box-shadow: 0 8px 20px rgba(16, 32, 57, 0.08), 0 0 0 1px rgba(226, 231, 238, 0.8);
      margin-bottom: 6px;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    :where(html[data-page="about"]) .node-icon svg {
      width: 22px;
      height: 22px;
    }

    :where(html[data-page="about"]) .orbit-node h4 {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 2px;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .orbit-node p {
      font-size: 8.5px;
      color: var(--muted);
      line-height: 1.2;
      max-width: 82px;
      margin: 0;
      transition: color 0.2s ease;
    }

    /* Hover & Active States */
    :where(html[data-page="about"]) .orbit-node:hover,:where(html[data-page="about"]) 
    .orbit-node.is-active {
      transform: translate(-50%, -50%) scale(1.08);
    }

    :where(html[data-page="about"]) .orbit-node:hover .node-aura,:where(html[data-page="about"]) 
    .orbit-node.is-active .node-aura {
      opacity: 0.38;
      transform: translate(-50%, -50%) scale(1.2);
    }

    :where(html[data-page="about"]) .orbit-node:hover .node-icon,:where(html[data-page="about"]) 
    .orbit-node.is-active .node-icon {
      box-shadow: 0 12px 24px rgba(16, 32, 57, 0.14), 0 0 0 2px var(--node-color), 0 0 20px rgba(245, 169, 22, 0.25);
    }

    :where(html[data-page="about"]) .orbit-node:hover p,:where(html[data-page="about"]) 
    .orbit-node.is-active p {
      color: var(--navy);
      font-weight: 500;
    }

    /* Specific Node Coordinates & Color Themes */
    :where(html[data-page="about"]) .orbit-node.node-audience {
      top: 13.5%;
      left: 50%;
      --node-color: #F5A916;
      --node-bg-light: #FEF3C7;
      --node-text-dark: #92400E;
      --node-border-light: #FDE68A;
    }

    :where(html[data-page="about"]) .orbit-node.node-message {
      top: 24.2%;
      left: 75.8%;
      --node-color: #3B82F6;
      --node-bg-light: #EFF6FF;
      --node-text-dark: #1E40AF;
      --node-border-light: #BFDBFE;
    }

    :where(html[data-page="about"]) .orbit-node.node-offer {
      top: 50%;
      left: 86.5%;
      --node-color: #10B981;
      --node-bg-light: #D1FAE5;
      --node-text-dark: #065F46;
      --node-border-light: #A7F3D0;
    }

    :where(html[data-page="about"]) .orbit-node.node-lead {
      top: 75.8%;
      left: 75.8%;
      --node-color: #8B5CF6;
      --node-bg-light: #EDE9FE;
      --node-text-dark: #5B21B6;
      --node-border-light: #DDD6FE;
    }

    :where(html[data-page="about"]) .orbit-node.node-followup {
      top: 86.5%;
      left: 50%;
      --node-color: #14B8A6;
      --node-bg-light: #CCFBF1;
      --node-text-dark: #115E59;
      --node-border-light: #99F6E4;
    }

    :where(html[data-page="about"]) .orbit-node.node-conversion {
      top: 75.8%;
      left: 24.2%;
      --node-color: #22C55E;
      --node-bg-light: #DCFCE7;
      --node-text-dark: #166534;
      --node-border-light: #BBF7D0;
    }

    :where(html[data-page="about"]) .orbit-node.node-measurement {
      top: 50%;
      left: 13.5%;
      --node-color: #EC4899;
      --node-bg-light: #FCE7F3;
      --node-text-dark: #9D174D;
      --node-border-light: #FBCFE8;
    }

    :where(html[data-page="about"]) .orbit-node.node-scale {
      top: 24.2%;
      left: 24.2%;
      --node-color: #F97316;
      --node-bg-light: #FFEDD5;
      --node-text-dark: #9A3412;
      --node-border-light: #FED7AA;
    }

    /* Callout Badges - Compact and inside bounds */
    :where(html[data-page="about"]) .node-callout {
      position: absolute;
      background: var(--node-bg-light);
      color: var(--node-text-dark);
      border: 1px solid var(--node-border-light);
      border-radius: 6px;
      padding: 3.5px 8px;
      font-size: 10px;
      font-weight: 600;
      line-height: 1.15;
      box-shadow: 0 3px 8px rgba(16, 32, 57, 0.05);
      display: inline-flex;
      align-items: center;
      gap: 3px;
      white-space: nowrap;
      pointer-events: none;
      z-index: 12;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    :where(html[data-page="about"]) .node-callout svg {
      width: 14px;
      height: 14px;
    }

    :where(html[data-page="about"]) .callout-audience {
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
    }

    :where(html[data-page="about"]) .callout-offer {
      left: calc(100% + 4px);
      top: 15%;
    }

    :where(html[data-page="about"]) .callout-lead {
      left: calc(100% + 4px);
      top: 35%;
    }

    :where(html[data-page="about"]) .callout-followup {
      top: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
    }

    :where(html[data-page="about"]) .callout-conversion {
      right: calc(100% + 4px);
      top: 35%;
    }

    :where(html[data-page="about"]) .callout-measurement {
      right: calc(100% + 4px);
      top: 15%;
    }

    :where(html[data-page="about"]) .callout-scale {
      right: calc(100% + 4px);
      bottom: 35%;
    }

    /* Active Flow Ring & Particle */
    :where(html[data-page="about"]) .active-flow-ring {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      animation: page-about-orbit-flow 12s linear infinite;
      z-index: 6;
      pointer-events: none;
    }

    :where(html[data-page="about"]) .active-flow-dot {
      position: absolute;
      top: 13.5%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 8px;
      background: #FFFFFF;
      border-radius: 50%;
      box-shadow: 0 0 10px 3px rgba(245, 169, 22, 0.9), 0 0 20px 6px rgba(245, 169, 22, 0.5);
    }

    @keyframes page-about-orbit-flow {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    :where(html[data-page="about"]) .orbit-wrapper.is-paused .active-flow-ring {
      animation-play-state: paused;
    }

    /* SVG Arrows */
    :where(html[data-page="about"]) .orbit-arrow {
      opacity: 0.85;
      transition: opacity 0.3s ease, stroke-width 0.3s ease;
    }

    :where(html[data-page="about"]) .orbit-arrow:hover {
      opacity: 1;
      stroke-width: 3.5px;
    }

    /* Top Right Annotation */
    :where(html[data-page="about"]) .hw-right {
      top: -10px;
      right: 0;
      width: 160px;
      font-size: 19px;
      transform: rotate(3deg);
      text-align: center;
    }

    :where(html[data-page="about"]) .hw-right svg {
      left: 30px;
      bottom: -35px;
      width: 40px;
    }

    /* Responsive adjustments */
    @media (max-width: 1200px) {
      :where(html[data-page="about"]) .hero .container {
        grid-template-columns: 48% 52%;
      }

      :where(html[data-page="about"]) .orbit-wrapper {
        width: min(480px, 46vw);
      }

      :where(html[data-page="about"]) .orbit-center {
        width: 170px;
        height: 170px;
      }

      :where(html[data-page="about"]) .orbit-center h3 {
        font-size: 13.5px;
      }

      :where(html[data-page="about"]) .node-icon {
        width: 46px;
        height: 46px;
      }

      :where(html[data-page="about"]) .node-icon svg {
        width: 19px;
        height: 19px;
      }

      :where(html[data-page="about"]) .node-aura {
        width: 68px;
        height: 68px;
        top: 23px;
      }

      :where(html[data-page="about"]) .orbit-node {
        width: 95px;
      }

      :where(html[data-page="about"]) .orbit-node h4 {
        font-size: 12px;
      }

      :where(html[data-page="about"]) .orbit-node p {
        font-size: 9.5px;
      }

      :where(html[data-page="about"]) .node-callout {
        font-size: 9px;
        padding: 3px 6px;
      }
    }

    @media (max-width: 992px) {
      :where(html[data-page="about"]) .hero .container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
      }

      :where(html[data-page="about"]) .hero-content {
        padding-right: 0;
        max-width: 680px;
        margin: 0 auto;
      }

      :where(html[data-page="about"]) .hero-buttons {
        justify-content: center;
      }

      :where(html[data-page="about"]) .hw-left {
        display: none;
      }

      :where(html[data-page="about"]) .orbit-wrapper {
        width: min(500px, 88vw);
      }
    }

    @media (max-width: 640px) {
      :where(html[data-page="about"]) .orbit-wrapper {
        width: 92vw;
        max-width: 380px;
      }

      :where(html[data-page="about"]) .orbit-center {
        width: 135px;
        height: 135px;
      }

      :where(html[data-page="about"]) .orbit-center h3 {
        font-size: 13px;
      }

      :where(html[data-page="about"]) .hub-divider {
        width: 18px;
        margin: 5px 0;
      }

      :where(html[data-page="about"]) .hub-label {
        font-size: 8.5px;
      }

      :where(html[data-page="about"]) .hub-support {
        font-size: 7.5px;
      }

      :where(html[data-page="about"]) .node-icon {
        width: 40px;
        height: 40px;
      }

      :where(html[data-page="about"]) .node-icon svg {
        width: 16px;
        height: 16px;
      }

      :where(html[data-page="about"]) .node-aura {
        width: 58px;
        height: 58px;
        top: 20px;
      }

      :where(html[data-page="about"]) .orbit-node {
        width: 80px;
      }

      :where(html[data-page="about"]) .orbit-node h4 {
        font-size: 11px;
        margin-bottom: 1px;
      }

      :where(html[data-page="about"]) .orbit-node p {
        font-size: 8.5px;
        max-width: 75px;
      }

      :where(html[data-page="about"]) .node-callout {
        display: none;
        /* Hide dense callouts on small mobile screens */
      }
    }

    @media (prefers-reduced-motion: reduce) {
      :where(html[data-page="about"]) .active-flow-ring {
        display: none;
      }

      :where(html[data-page="about"]) .orbit-center {
        animation: none;
      }
    }

    /* ==========================================================================
   Our Impact Section (High-End Editorial Growth Architecture)
   ========================================================================== */
    :where(html[data-page="about"]) .our-impact-section {
      background: var(--cream, #FAF8F5);
      padding: 88px 0 60px;
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="about"]) .impact-container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
      position: relative;
      z-index: 5;
    }

    /* Top Editorial Split Area */
    :where(html[data-page="about"]) .impact-top-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 48px;
      align-items: center;
      margin-bottom: 48px;
    }

    :where(html[data-page="about"]) .impact-left-content {
      max-width: 640px;
    }

    :where(html[data-page="about"]) .impact-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Manrope', 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.18em;
      color: #5E748F;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    :where(html[data-page="about"]) .impact-eyebrow-dash {
      display: block;
      width: 20px;
      height: 3px;
      background-color: var(--kx-gold, #F5A916);
      border-radius: 2px;
    }

    :where(html[data-page="about"]) .impact-main-heading {
      font-family: 'Manrope', 'Inter', sans-serif;
      font-size: clamp(34px, 4.2vw, 54px);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.035em;
      color: var(--kx-navy, #13243D);
      margin-bottom: 18px;
    }

    :where(html[data-page="about"]) .heading-line-1,:where(html[data-page="about"]) 
    .heading-line-2 {
      display: inline-block;
    }

    :where(html[data-page="about"]) .impact-intro-desc {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      line-height: 1.65;
      color: #5E748F;
      max-width: 560px;
      margin: 0;
    }

    /* Right Growth Visual */
    :where(html[data-page="about"]) .impact-growth-visual {
      position: relative;
      width: 100%;
      min-height: 240px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    :where(html[data-page="about"]) .growth-handwritten-note {
      position: absolute;
      top: -16px;
      left: 10px;
      font-family: 'Caveat', cursive;
      color: #B45309;
      font-size: 20px;
      line-height: 1.15;
      transform: rotate(-3deg);
      z-index: 10;
      pointer-events: none;
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .handwritten-lines span {
      display: block;
      font-weight: 700;
    }

    :where(html[data-page="about"]) .handwritten-arrow-svg {
      width: 50px;
      height: 42px;
      margin-top: -6px;
      margin-left: 24px;
    }

    :where(html[data-page="about"]) .growth-chart-wrapper {
      width: 100%;
      max-width: 440px;
      height: 200px;
      position: relative;
    }

    :where(html[data-page="about"]) .growth-chart-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Floating Badges */
    :where(html[data-page="about"]) .growth-floating-badge {
      position: absolute;
      top: 10px;
      right: -10px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(226, 232, 240, 0.9);
      border-radius: 14px;
      padding: 10px 16px;
      box-shadow: 0 10px 28px rgba(19, 36, 61, 0.08);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      z-index: 8;
      animation: page-about-float-badge 4s ease-in-out infinite;
    }

    @keyframes page-about-float-badge {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-6px);
      }
    }

    :where(html[data-page="about"]) .growth-rays {
      position: absolute;
      top: -10px;
      right: -8px;
    }

    :where(html[data-page="about"]) .badge-label {
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #64748B;
    }

    :where(html[data-page="about"]) .badge-value {
      font-size: 20px;
      font-weight: 900;
      color: #10B981;
      letter-spacing: -0.02em;
    }

    :where(html[data-page="about"]) .growth-opportunity-card {
      position: absolute;
      bottom: -15px;
      right: 15px;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(226, 232, 240, 0.9);
      border-radius: 14px;
      padding: 10px 16px;
      box-shadow: 0 12px 30px rgba(19, 36, 61, 0.09);
      display: flex;
      align-items: center;
      gap: 12px;
      z-index: 8;
    }

    :where(html[data-page="about"]) .opportunity-icon-box {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: #EFF6FF;
      color: #2563EB;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .opportunity-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--kx-navy, #13243D);
      line-height: 1.2;
    }

    :where(html[data-page="about"]) .opportunity-subtitle {
      font-size: 11px;
      font-weight: 600;
      color: #64748B;
      margin-top: 1px;
    }

    /* Middle 4 KPI Metric Cards Grid */
    :where(html[data-page="about"]) .impact-kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 32px;
    }

    :where(html[data-page="about"]) .impact-kpi-card {
      background: #FFFFFF;
      border: 1px solid rgba(226, 232, 240, 0.9);
      border-radius: 20px;
      padding: 24px 22px 20px 22px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(19, 36, 61, 0.04);
      display: flex;
      flex-direction: column;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    }

    :where(html[data-page="about"]) .impact-kpi-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 40px rgba(19, 36, 61, 0.08);
      border-color: rgba(203, 213, 225, 1);
    }

    :where(html[data-page="about"]) .kpi-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    :where(html[data-page="about"]) .kpi-icon-value-group {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    :where(html[data-page="about"]) .kpi-icon-box {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .box-mint {
      background: #DCFCE7;
      color: #10B981;
    }

    :where(html[data-page="about"]) .box-amber {
      background: #FEF3C7;
      color: #F5A916;
    }

    :where(html[data-page="about"]) .box-blue {
      background: #EFF6FF;
      color: #3B82F6;
    }

    :where(html[data-page="about"]) .box-purple {
      background: #F3E8FF;
      color: #8B5CF6;
    }

    :where(html[data-page="about"]) .kpi-numbers {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .kpi-metric-val {
      font-family: 'Manrope', 'Inter', sans-serif;
      font-size: 28px;
      font-weight: 800;
      color: var(--kx-navy, #13243D);
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    :where(html[data-page="about"]) .kpi-val-compact {
      font-size: 19px;
      line-height: 1.1;
    }

    :where(html[data-page="about"]) .kpi-metric-lbl {
      font-size: 12px;
      font-weight: 600;
      color: #64748B;
      margin-top: 2px;
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .kpi-arrow-btn {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: #F1F5F9;
      color: #475569;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
      cursor: pointer;
    }

    :where(html[data-page="about"]) .impact-kpi-card:hover .kpi-arrow-btn {
      background: var(--kx-navy, #13243D);
      color: #FFFFFF;
      transform: translate(2px, -2px);
    }

    :where(html[data-page="about"]) .kpi-card-description {
      font-size: 13px;
      line-height: 1.5;
      color: #5E748F;
      margin: 0 0 16px 0;
      max-width: 240px;
      flex-grow: 1;
    }

    /* Ascending Mini Bars */
    :where(html[data-page="about"]) .kpi-mini-bars {
      position: absolute;
      bottom: 16px;
      right: 18px;
      display: flex;
      align-items: flex-end;
      gap: 4px;
      height: 48px;
      pointer-events: none;
    }

    :where(html[data-page="about"]) .kpi-mini-bars .mbar {
      width: 5px;
      border-radius: 3px;
      background: currentColor;
      display: inline-block;
      transition: height 0.3s ease, opacity 0.3s ease;
    }

    :where(html[data-page="about"]) .bars-mint {
      color: #10B981;
    }

    :where(html[data-page="about"]) .bars-amber {
      color: #F5A916;
    }

    :where(html[data-page="about"]) .bars-blue {
      color: #3B82F6;
    }

    :where(html[data-page="about"]) .bars-purple {
      color: #8B5CF6;
    }

    :where(html[data-page="about"]) .impact-kpi-card:hover .kpi-mini-bars .mbar:last-child {
      height: 52px !important;
    }

    /* Bottom Core Capabilities Strip */
    :where(html[data-page="about"]) .impact-capabilities-bar {
      background: #FFFFFF;
      border: 1px solid rgba(226, 232, 240, 0.9);
      border-radius: 9999px;
      padding: 12px 16px 12px 28px;
      box-shadow: 0 8px 30px rgba(19, 36, 61, 0.04);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      position: relative;
    }

    :where(html[data-page="about"]) .cap-bar-intro {
      flex-shrink: 0;
      padding-right: 22px;
      border-right: 1px solid rgba(226, 232, 240, 0.9);
    }

    :where(html[data-page="about"]) .cap-bar-heading {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.12em;
      color: var(--kx-navy, #13243D);
      text-transform: uppercase;
    }

    :where(html[data-page="about"]) .cap-status-pulse {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #10B981;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
      animation: page-about-cap-pulse 2s infinite;
    }

    @keyframes page-about-cap-pulse {

      0%,
      100% {
        transform: scale(0.9);
        opacity: 0.8;
      }

      50% {
        transform: scale(1.2);
        opacity: 1;
      }
    }

    :where(html[data-page="about"]) .cap-bar-sub {
      font-size: 11.5px;
      color: #64748B;
      font-weight: 500;
      margin-top: 2px;
    }

    :where(html[data-page="about"]) .cap-bar-items {
      display: flex;
      align-items: center;
      gap: 16px;
      flex: 1;
      justify-content: space-around;
    }

    :where(html[data-page="about"]) .cap-bar-item {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      padding: 6px 10px;
      border-radius: 12px;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    :where(html[data-page="about"]) .cap-bar-item:hover {
      background: #F8FAFC;
      transform: translateY(-2px);
    }

    :where(html[data-page="about"]) .cap-bar-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .icon-blue {
      background: #EFF6FF;
      color: #2563EB;
    }

    :where(html[data-page="about"]) .icon-mint {
      background: #DCFCE7;
      color: #10B981;
    }

    :where(html[data-page="about"]) .icon-green {
      background: #E8F8F0;
      color: #20B86B;
    }

    :where(html[data-page="about"]) .icon-purple {
      background: #F3E8FF;
      color: #7C3AED;
    }

    :where(html[data-page="about"]) .cap-bar-text {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .cap-item-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--kx-navy, #13243D);
      line-height: 1.2;
    }

    :where(html[data-page="about"]) .cap-item-sub {
      font-size: 11px;
      color: #64748B;
      line-height: 1.2;
    }

    :where(html[data-page="about"]) .cap-bar-cta {
      background: var(--kx-gold, #F5A916);
      color: var(--kx-navy, #13243D);
      font-size: 13.5px;
      font-weight: 800;
      padding: 12px 24px;
      border-radius: 9999px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 6px 20px rgba(245, 169, 22, 0.3);
      transition: all 0.2s ease;
      white-space: nowrap;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .cap-bar-cta:hover {
      background: var(--kx-gold-hover, #FFCA3A);
      transform: translateY(-2px);
      box-shadow: 0 10px 26px rgba(245, 169, 22, 0.45);
    }

    /* ==========================================================================
   Our Origin Section (Editorial Brand Story & 3D Hardcover Book Stage)
   ========================================================================== */
    :where(html[data-page="about"]) .our-origin-section {
      background: var(--cream, #FAF8F5);
      padding: 88px 0 80px;
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="about"]) .origin-bg-halo {
      position: absolute;
      top: 10%;
      right: 5%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(245, 169, 22, 0.12) 0%, rgba(245, 169, 22, 0.02) 50%, transparent 70%);
      filter: blur(50px);
      pointer-events: none;
      z-index: 1;
    }

    :where(html[data-page="about"]) .origin-container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
      position: relative;
      z-index: 5;
    }

    :where(html[data-page="about"]) .origin-top-grid {
      display: grid;
      grid-template-columns: 1.05fr 1.25fr;
      gap: 56px;
      align-items: center;
    }

    :where(html[data-page="about"]) .origin-left-content {
      position: relative;
      z-index: 5;
    }

    :where(html[data-page="about"]) .origin-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Manrope', 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.18em;
      color: #5E748F;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    :where(html[data-page="about"]) .origin-eyebrow-dash {
      display: block;
      width: 20px;
      height: 3px;
      background-color: var(--kx-gold, #F5A916);
      border-radius: 2px;
    }

    :where(html[data-page="about"]) .origin-main-heading {
      font-family: 'Manrope', 'Inter', sans-serif;
      font-size: clamp(34px, 4.4vw, 56px);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.035em;
      color: var(--kx-navy, #13243D);
      margin-bottom: 22px;
    }

    :where(html[data-page="about"]) .origin-heading-line-1 {
      display: inline-block;
    }

    :where(html[data-page="about"]) .origin-heading-line-2 {
      position: relative;
      display: inline-block;
    }

    :where(html[data-page="about"]) .origin-underline-svg {
      position: absolute;
      left: 0;
      bottom: -6px;
      width: 100%;
      height: 14px;
      pointer-events: none;
    }

    :where(html[data-page="about"]) .origin-story-paragraphs {
      margin-bottom: 30px;
    }

    :where(html[data-page="about"]) .origin-story-paragraphs p {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      line-height: 1.65;
      color: #5E748F;
      margin-bottom: 14px;
      max-width: 540px;
    }

    :where(html[data-page="about"]) .origin-story-paragraphs p:last-child {
      margin-bottom: 0;
    }

    :where(html[data-page="about"]) .origin-cta-group {
      display: flex;
      align-items: center;
      gap: 28px;
      margin-bottom: 38px;
    }

    :where(html[data-page="about"]) .origin-cta-btn {
      background: var(--kx-gold, #F5A916);
      color: var(--kx-navy, #13243D);
      font-size: 14.5px;
      font-weight: 800;
      border-radius: 9999px;
      padding: 13px 28px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      box-shadow: 0 10px 24px rgba(245, 169, 22, 0.32);
      transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    :where(html[data-page="about"]) .origin-cta-btn:hover {
      background: var(--kx-gold-hover, #FFCA3A);
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(245, 169, 22, 0.45);
    }

    :where(html[data-page="about"]) .origin-cta-note {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'Caveat', cursive;
      color: #173D6B;
      font-size: 18px;
      line-height: 1.15;
      font-weight: 700;
    }

    :where(html[data-page="about"]) .cta-note-arrow {
      width: 36px;
      height: 24px;
    }

    :where(html[data-page="about"]) .cta-note-text span {
      display: block;
    }

    /* Values Dock */
    :where(html[data-page="about"]) .origin-values-dock {
      display: flex;
      align-items: center;
      gap: 20px;
      padding-top: 20px;
      border-top: 1px solid rgba(226, 232, 240, 0.9);
    }

    :where(html[data-page="about"]) .dock-value-item {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
    }

    :where(html[data-page="about"]) .dock-icon-circle {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .circle-amber {
      background: #FEF3C7;
      color: #F5A916;
    }

    :where(html[data-page="about"]) .circle-blue {
      background: #EFF6FF;
      color: #3B82F6;
    }

    :where(html[data-page="about"]) .circle-mint {
      background: #DCFCE7;
      color: #10B981;
    }

    :where(html[data-page="about"]) .dock-text {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .dock-title {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--kx-navy, #13243D);
      line-height: 1.2;
    }

    :where(html[data-page="about"]) .dock-sub {
      font-size: 11.5px;
      color: #5E748F;
      line-height: 1.2;
      margin-top: 2px;
    }

    :where(html[data-page="about"]) .dock-divider {
      width: 1px;
      height: 38px;
      background: rgba(226, 232, 240, 0.9);
      flex-shrink: 0;
    }

    /* Right Editorial Book Visual Stage */
    :where(html[data-page="about"]) .origin-book-stage {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 5;
      padding-top: 20px;
    }

    :where(html[data-page="about"]) .book-top-annotation {
      position: absolute;
      top: -20px;
      right: 20px;
      font-family: 'Caveat', cursive;
      color: #C65B18;
      font-size: 20px;
      line-height: 1.15;
      font-weight: 700;
      transform: rotate(3deg);
      z-index: 10;
      pointer-events: none;
      display: flex;
      align-items: flex-end;
      gap: 6px;
    }

    :where(html[data-page="about"]) .top-annotation-text span {
      display: block;
    }

    :where(html[data-page="about"]) .top-annotation-arrow {
      width: 36px;
      height: 32px;
      margin-bottom: -10px;
    }

    :where(html[data-page="about"]) .book-rays-left {
      position: absolute;
      top: 10px;
      left: -15px;
      pointer-events: none;
      z-index: 2;
    }

    :where(html[data-page="about"]) .book-rays-right {
      position: absolute;
      top: 15px;
      right: -15px;
      pointer-events: none;
      z-index: 2;
    }

    /* 3D Open Hardcover Book */
    :where(html[data-page="about"]) .editorial-book-3d {
      position: relative;
      width: 100%;
      max-width: 580px;
      min-height: 400px;
      background: #FFFDFC;
      border-radius: 18px;
      box-shadow:
        0 28px 65px rgba(19, 36, 61, 0.12),
        0 10px 20px rgba(19, 36, 61, 0.05),
        0 0 0 1px rgba(226, 232, 240, 0.7);
      display: grid;
      grid-template-columns: 1fr 1fr;
      z-index: 5;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    }

    :where(html[data-page="about"]) .editorial-book-3d:hover {
      transform: translateY(-4px);
      box-shadow:
        0 36px 80px rgba(19, 36, 61, 0.16),
        0 14px 28px rgba(19, 36, 61, 0.06),
        0 0 0 1px rgba(245, 169, 22, 0.4);
    }

    :where(html[data-page="about"]) .book-page-left {
      padding: 32px 26px 26px 30px;
      position: relative;
      background: linear-gradient(90deg, #FAF8F5 0%, #FFFDFC 88%, #F3EFE9 100%);
      border-radius: 18px 0 0 18px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    :where(html[data-page="about"]) .book-kicker {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.18em;
      color: #8D9AAC;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    :where(html[data-page="about"]) .book-belief-title {
      font-family: 'DM Serif Display', Georgia, serif;
      font-size: clamp(22px, 2.3vw, 28px);
      line-height: 1.15;
      color: var(--kx-navy, #13243D);
      font-weight: 400;
      margin-bottom: 12px;
      letter-spacing: -0.01em;
    }

    :where(html[data-page="about"]) .futures-highlight {
      color: #D97706;
      font-style: italic;
    }

    :where(html[data-page="about"]) .book-accent-bar {
      width: 36px;
      height: 3px;
      background: var(--kx-gold, #F5A916);
      border-radius: 2px;
      margin-bottom: 14px;
    }

    :where(html[data-page="about"]) .book-narrative-text {
      font-size: 12px;
      line-height: 1.6;
      color: #5E748F;
      margin: 0;
    }

    :where(html[data-page="about"]) .book-spine-crease {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      background: linear-gradient(90deg,
          rgba(19, 36, 61, 0.06) 0%,
          rgba(19, 36, 61, 0.16) 45%,
          rgba(19, 36, 61, 0.22) 50%,
          rgba(19, 36, 61, 0.16) 55%,
          rgba(19, 36, 61, 0.06) 100%);
      pointer-events: none;
      z-index: 6;
    }

    :where(html[data-page="about"]) .book-page-right {
      padding: 24px 20px 24px 26px;
      position: relative;
      background: linear-gradient(90deg, #F3EFE9 0%, #FFFDFC 12%, #FAF8F5 100%);
      border-radius: 0 18px 18px 0;
      min-height: 320px;
    }

    :where(html[data-page="about"]) .journey-path-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
      overflow: visible;
    }

    :where(html[data-page="about"]) .journey-nodes-container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 5;
      pointer-events: none;
    }

    :where(html[data-page="about"]) .journey-node {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 8px;
      z-index: 5;
    }

    :where(html[data-page="about"]) .node-icon-circle {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #FEF3C7;
      border: 1.5px solid #F5A916;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #B45309;
      box-shadow: 0 4px 12px rgba(245, 169, 22, 0.25);
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }

    :where(html[data-page="about"]) .editorial-book-3d:hover .node-icon-circle {
      transform: scale(1.08);
    }

    :where(html[data-page="about"]) .circle-star {
      width: 38px;
      height: 38px;
      background: #FFFBEB;
      border: 2px solid #F5A916;
      box-shadow: 0 0 16px rgba(245, 169, 22, 0.4);
      animation: page-about-star-pulse 2.8s infinite ease-in-out;
    }

    @keyframes page-about-star-pulse {

      0%,
      100% {
        transform: scale(0.96);
        box-shadow: 0 0 10px rgba(245, 169, 22, 0.3);
      }

      50% {
        transform: scale(1.06);
        box-shadow: 0 0 22px rgba(245, 169, 22, 0.55);
      }
    }

    :where(html[data-page="about"]) .node-text-wrap {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .node-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--kx-navy, #13243D);
      line-height: 1.1;
    }

    :where(html[data-page="about"]) .node-subtitle {
      font-size: 9.5px;
      color: #5E748F;
      line-height: 1.25;
      margin-top: 1px;
    }

    :where(html[data-page="about"]) .node-subtitle-stack {
      display: flex;
      flex-wrap: wrap;
      gap: 2px 4px;
      font-size: 8px;
      color: #B45309;
      font-weight: 700;
      margin-top: 2px;
      max-width: 130px;
    }

    :where(html[data-page="about"]) .node-subtitle-stack span:not(:last-child)::after {
      content: "•";
      margin-left: 3px;
      opacity: 0.6;
    }

    :where(html[data-page="about"]) .journey-node.node-start { left: 24px; top: 264px; }
    :where(html[data-page="about"]) .journey-node.node-grow { left: 48px; top: 180px; }
    :where(html[data-page="about"]) .journey-node.node-scale { left: 76px; top: 104px; }
    :where(html[data-page="about"]) .journey-node.node-impact { left: 104px; top: 22px; }

    /* Mint Sticky Note */
    :where(html[data-page="about"]) .book-sticky-note {
      position: absolute;
      top: 14px;
      right: -32px;
      background: #E8F8F0;
      border: 1px solid #A7F3D0;
      border-radius: 10px;
      padding: 8px 12px;
      box-shadow: 0 8px 24px rgba(16, 185, 129, 0.14);
      transform: rotate(5deg);
      z-index: 8;
      pointer-events: none;
    }

    :where(html[data-page="about"]) .sticky-note-lines span {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: #065F46;
      line-height: 1.3;
    }

    /* Dark Navy Belief Card */
    :where(html[data-page="about"]) .book-navy-card {
      position: absolute;
      bottom: -22px;
      right: -18px;
      background: var(--kx-deep-navy, #0D1B31);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      padding: 12px 16px;
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      gap: 12px;
      z-index: 8;
    }

    :where(html[data-page="about"]) .navy-card-text {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .navy-card-sub {
      font-size: 10.5px;
      color: #94A3B8;
      font-weight: 500;
    }

    :where(html[data-page="about"]) .navy-card-bold {
      font-size: 12.5px;
      color: #FFFFFF;
      font-weight: 800;
      margin-top: 1px;
    }

    :where(html[data-page="about"]) .navy-card-bar {
      width: 18px;
      height: 2.5px;
      background: var(--kx-gold, #F5A916);
      border-radius: 2px;
      margin-top: 4px;
    }

    :where(html[data-page="about"]) .navy-card-plant {
      width: 18px;
      height: 30px;
    }

    /* Desk Accessories */
    :where(html[data-page="about"]) .desk-accessories {
      position: relative;
      width: 100%;
      max-width: 580px;
      margin-top: 16px;
      z-index: 6;
    }

    :where(html[data-page="about"]) .desk-pen-row {
      display: flex;
      justify-content: center;
      margin-bottom: 12px;
    }

    :where(html[data-page="about"]) .desk-pen-wrap {
      position: relative;
      width: 200px;
      height: 14px;
      background: linear-gradient(180deg, #2D3748 0%, #1A202C 45%, #0F172A 100%);
      border-radius: 8px 12px 12px 8px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotate(-1deg);
    }

    :where(html[data-page="about"]) .pen-nib {
      position: absolute;
      left: -8px;
      top: 3px;
      width: 0;
      height: 0;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      border-right: 8px solid #F5A916;
    }

    :where(html[data-page="about"]) .pen-gold-collar {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: linear-gradient(180deg, #FDE68A 0%, #F5A916 50%, #B45309 100%);
    }

    :where(html[data-page="about"]) .pen-clip {
      position: absolute;
      top: 1px;
      left: 14px;
      width: 32px;
      height: 3px;
      background: #F5A916;
      border-radius: 2px;
    }

    :where(html[data-page="about"]) .pen-engraving {
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #FDE68A;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    }

    :where(html[data-page="about"]) .pen-gold-ring {
      position: absolute;
      right: 28px;
      top: 0;
      bottom: 0;
      width: 3px;
      background: #F5A916;
    }

    :where(html[data-page="about"]) .pen-end-cap {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      border-radius: 0 12px 12px 0;
      background: #F5A916;
    }

    :where(html[data-page="about"]) .desk-notes-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
    }

    :where(html[data-page="about"]) .desk-note-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    :where(html[data-page="about"]) .note-arc-dashed {
      width: 36px;
      height: 36px;
    }

    :where(html[data-page="about"]) .note-ideas-wrap {
      position: relative;
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .note-ideas-text {
      font-family: 'Caveat', cursive;
      color: #1D4ED8;
      font-size: 18px;
      font-weight: 700;
      transform: rotate(-1.5deg);
    }

    :where(html[data-page="about"]) .note-ideas-underline {
      width: 100%;
      height: 6px;
      margin-top: -2px;
    }

    :where(html[data-page="about"]) .note-connector-arrow {
      width: 42px;
      height: 26px;
    }

    :where(html[data-page="about"]) .desk-note-right {
      font-family: 'Caveat', cursive;
      color: #64748B;
      font-size: 17px;
      font-weight: 700;
      line-height: 1.15;
      transform: rotate(1.5deg);
    }

    /* ==========================================================================
   Responsive Breakpoints for Impact & Origin Sections
   ========================================================================== */
    @media (max-width: 1100px) {
      :where(html[data-page="about"]) .impact-top-grid {
        grid-template-columns: 1fr;
        gap: 36px;
      }

      :where(html[data-page="about"]) .impact-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      :where(html[data-page="about"]) .origin-top-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      :where(html[data-page="about"]) .impact-capabilities-bar {
        border-radius: 20px;
        flex-direction: column;
        padding: 20px;
        align-items: stretch;
      }

      :where(html[data-page="about"]) .cap-bar-intro {
        border-right: none;
        border-bottom: 1px solid rgba(226, 232, 240, 0.9);
        padding-right: 0;
        padding-bottom: 14px;
      }

      :where(html[data-page="about"]) .cap-bar-items {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 12px;
      }

      :where(html[data-page="about"]) .cap-bar-cta {
        justify-content: center;
      }
    }

    @media (max-width: 768px) {

      :where(html[data-page="about"]) .our-impact-section,:where(html[data-page="about"]) 
      .our-origin-section {
        padding: 56px 0;
      }

      :where(html[data-page="about"]) .impact-container,:where(html[data-page="about"]) 
      .origin-container {
        padding: 0 20px;
      }

      :where(html[data-page="about"]) .impact-main-heading,:where(html[data-page="about"]) 
      .origin-main-heading {
        font-size: 32px;
      }

      :where(html[data-page="about"]) .growth-chart-wrapper {
        max-width: 100%;
      }

      :where(html[data-page="about"]) .growth-floating-badge {
        right: 0;
        top: -10px;
      }

      :where(html[data-page="about"]) .growth-opportunity-card {
        right: 0;
        bottom: -20px;
      }

      :where(html[data-page="about"]) .impact-kpi-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      :where(html[data-page="about"]) .editorial-book-3d {
        grid-template-columns: 1fr;
        min-height: auto;
      }

      :where(html[data-page="about"]) .book-page-left {
        border-radius: 18px 18px 0 0;
        padding: 26px 20px;
      }

      :where(html[data-page="about"]) .book-spine-crease {
        display: none;
      }

      :where(html[data-page="about"]) .book-page-right {
        border-radius: 0 0 18px 18px;
        padding: 24px 20px 40px;
        min-height: 280px;
      }

      :where(html[data-page="about"]) .book-sticky-note,:where(html[data-page="about"]) 
      .book-top-annotation,:where(html[data-page="about"]) 
      .book-rays-left,:where(html[data-page="about"]) 
      .book-rays-right {
        display: none;
      }

      :where(html[data-page="about"]) .origin-values-dock {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
      }

      :where(html[data-page="about"]) .dock-divider {
        display: none;
      }

      :where(html[data-page="about"]) .desk-accessories {
        margin-top: 24px;
      }

      :where(html[data-page="about"]) .desk-notes-row {
        flex-direction: column;
        gap: 12px;
        align-items: center;
      }

      :where(html[data-page="about"]) .note-connector-arrow {
        display: none;
      }
    }

    /* ==========================================================================
   Mission & Vision Manifesto Section (Dual-Panel Composition)
   ========================================================================== */
    :where(html[data-page="about"]) .mission-vision {
      padding: 40px 0 90px;
      background: var(--cream);
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="about"]) .mv-manifesto-card {
      background: #FFFFFF;
      border-radius: 28px;
      border: 1px solid #E1E7EE;
      box-shadow:
        0 24px 60px rgba(16, 32, 57, 0.08),
        0 4px 16px rgba(16, 32, 57, 0.03);
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow: hidden;
      min-height: 560px;
      transition: box-shadow 0.3s ease;
    }

    :where(html[data-page="about"]) .mv-manifesto-card:hover {
      box-shadow:
        0 32px 80px rgba(16, 32, 57, 0.12),
        0 8px 24px rgba(16, 32, 57, 0.04);
    }

    /* ==========================================================================
   Left Panel: Mission (Deep Navy #0F1D32)
   ========================================================================== */
    :where(html[data-page="about"]) .mv-panel {
      position: relative;
      padding: 56px 52px 44px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 2;
    }

    :where(html[data-page="about"]) .mv-panel-mission {
      background: #0F1D32;
      color: #FFFFFF;
      position: relative;
      overflow: hidden;
      border-radius: 24px;
    }

    /* Background Arc Linework in Navy Panel */
    :where(html[data-page="about"]) .mv-mission-bg-arcs {
      position: absolute;
      bottom: -30px;
      left: -30px;
      width: 380px;
      height: 380px;
      pointer-events: none;
      z-index: 1;
    }

    :where(html[data-page="about"]) .mv-arcs-svg {
      width: 100%;
      height: 100%;
    }

    :where(html[data-page="about"]) .mv-panel-inner {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    /* Eyebrow Badges */
    :where(html[data-page="about"]) .mv-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 9999px;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.18em;
      margin-bottom: 22px;
      width: fit-content;
      text-transform: uppercase;
    }

    :where(html[data-page="about"]) .mv-eyebrow-mission {
      background: rgba(245, 169, 22, 0.12);
      border: 1px solid rgba(245, 169, 22, 0.32);
      color: #F5A916;
    }

    /* Headlines */
    :where(html[data-page="about"]) .mv-headline {
      font-size: clamp(34px, 3.4vw, 48px);
      line-height: 1.05;
      letter-spacing: -0.035em;
      font-weight: 800;
      margin-bottom: 18px;
    }

    :where(html[data-page="about"]) .mv-headline-mission {
      color: #FFFFFF;
    }

    :where(html[data-page="about"]) .highlight-gold {
      color: #F5A916;
      position: relative;
      display: inline-block;
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .highlight-blue {
      color: #2563EB;
      position: relative;
      display: inline-block;
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .mv-underline-svg {
      position: absolute;
      left: 0;
      bottom: -8px;
      width: 100%;
      height: 12px;
      pointer-events: none;
    }

    /* Descriptions */
    :where(html[data-page="about"]) .mv-description {
      font-size: 16.5px;
      line-height: 1.6;
      margin-bottom: 32px;
      max-width: 480px;
    }

    :where(html[data-page="about"]) .mv-description-mission {
      color: rgba(255, 255, 255, 0.78);
    }

    :where(html[data-page="about"]) .mv-description-vision {
      color: #5E748F;
    }

    /* Outcome & Future Badges */
    :where(html[data-page="about"]) .mv-badges-row {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: auto;
      padding-bottom: 6px;
    }

    :where(html[data-page="about"]) .mv-badge-item {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    :where(html[data-page="about"]) .mv-badge-disc {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    :where(html[data-page="about"]) .mv-manifesto-card:hover .mv-badge-disc {
      transform: scale(1.06);
    }

    /* Disc Color Themes */
    :where(html[data-page="about"]) .disc-gold {
      background: rgba(245, 169, 22, 0.16);
      border: 1px solid rgba(245, 169, 22, 0.38);
      color: #F5A916;
    }

    :where(html[data-page="about"]) .disc-blue {
      background: rgba(67, 139, 255, 0.16);
      border: 1px solid rgba(67, 139, 255, 0.38);
      color: #60A5FA;
    }

    :where(html[data-page="about"]) .disc-teal {
      background: rgba(36, 183, 168, 0.16);
      border: 1px solid rgba(36, 183, 168, 0.38);
      color: #2DD4BF;
    }

    :where(html[data-page="about"]) .disc-light-blue {
      background: #EFF6FF;
      border: 1px solid #DBEAFE;
      color: #2563EB;
    }

    :where(html[data-page="about"]) .disc-light-mint {
      background: #ECFDF5;
      border: 1px solid #D1FAE5;
      color: #059669;
    }

    :where(html[data-page="about"]) .disc-light-purple {
      background: #F5F3FF;
      border: 1px solid #EDE9FE;
      color: #7C3AED;
    }

    :where(html[data-page="about"]) .mv-badge-label {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .mv-panel-mission .mv-badge-title {
      font-size: 13.5px;
      font-weight: 700;
      color: #FFFFFF;
      line-height: 1.25;
    }

    :where(html[data-page="about"]) .mv-panel-vision .mv-badge-title {
      font-size: 13.5px;
      font-weight: 700;
      color: #102039;
      line-height: 1.25;
    }

    /* Vertical Dividers */
    :where(html[data-page="about"]) .mv-badge-divider {
      width: 1px;
      height: 28px;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .dark-divider {
      background: rgba(255, 255, 255, 0.14);
    }

    :where(html[data-page="about"]) .light-divider {
      background: #E2E8F0;
    }

    /* Annotation under Mission */
    :where(html[data-page="about"]) .mv-annotation-mission {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 24px;
    }

    :where(html[data-page="about"]) .mv-handwritten-text {
      font-family: var(--font-hand);
      font-size: 18px;
      color: rgba(255, 255, 255, 0.65);
      letter-spacing: 0.02em;
    }

    :where(html[data-page="about"]) .mv-annotation-rule {
      height: 1px;
      width: 100px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), transparent);
    }

    /* Organic Curved Seam on Desktop */
    :where(html[data-page="about"]) .mv-curve-seam {
      position: absolute;
      top: 0;
      bottom: 0;
      right: -52px;
      width: 65px;
      z-index: 4;
      pointer-events: none;
    }

    :where(html[data-page="about"]) .mv-curve-seam .seam-svg {
      width: 100%;
      height: 100%;
    }

    /* ==========================================================================
   Center Floating Connector Medallion
   ========================================================================== */
    :where(html[data-page="about"]) .mv-center-connector {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 140px;
      height: 140px;
      pointer-events: none;
    }

    :where(html[data-page="about"]) .connector-glow-halo {
      position: absolute;
      width: 136px;
      height: 136px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(245, 169, 22, 0.16) 0%, transparent 70%);
    }

    :where(html[data-page="about"]) .connector-outer-ring {
      position: absolute;
      width: 118px;
      height: 118px;
      border-radius: 50%;
      border: 1px dashed rgba(245, 169, 22, 0.4);
      animation: page-about-spin-slow 35s linear infinite;
    }

    :where(html[data-page="about"]) .connector-middle-ring {
      position: absolute;
      width: 96px;
      height: 96px;
      border-radius: 50%;
      border: 1px solid rgba(245, 169, 22, 0.35);
    }

    :where(html[data-page="about"]) .connector-orb {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #FDE047 0%, #F5A916 65%, #D97706 100%);
      border: 7px solid #FFFDFC;
      box-shadow:
        0 12px 36px rgba(245, 169, 22, 0.42),
        0 0 24px rgba(245, 169, 22, 0.28);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    :where(html[data-page="about"]) .mv-manifesto-card:hover .connector-orb {
      transform: scale(1.06);
    }

    :where(html[data-page="about"]) .connector-ampersand {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 34px;
      font-weight: 800;
      color: #102039;
      line-height: 1;
    }

    @keyframes page-about-spin-slow {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    /* ==========================================================================
   Right Panel: Vision (Crisp White)
   ========================================================================== */
    :where(html[data-page="about"]) .mv-panel-vision {
      background: #FFFFFF;
      color: #102039;
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="about"]) .mv-eyebrow-vision {
      background: rgba(37, 99, 235, 0.08);
      border: 1px solid rgba(37, 99, 235, 0.22);
      color: #2563EB;
    }

    :where(html[data-page="about"]) .mv-headline-vision {
      color: #102039;
    }

    /* Vision Background Graphics (Summit & Arcs) */
    :where(html[data-page="about"]) .mv-vision-bg-graphics {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
      z-index: 1;
    }

    :where(html[data-page="about"]) .vision-arcs-svg {
      position: absolute;
      top: 0;
      right: 0;
      width: 280px;
      height: 280px;
    }

    :where(html[data-page="about"]) .vision-mountain-svg {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 360px;
      height: 220px;
    }

    :where(html[data-page="about"]) .vision-hw-annotation {
      position: absolute;
      top: 36px;
      right: 34px;
      font-family: var(--font-hand);
      color: #2563EB;
      font-size: 19.5px;
      line-height: 1.15;
      display: flex;
      flex-direction: column;
      transform: rotate(3.5deg);
      text-align: left;
    }

    :where(html[data-page="about"]) .vision-arrow-svg {
      width: 36px;
      height: 36px;
      margin-top: 2px;
      margin-left: 12px;
    }

    /* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
    @media (max-width: 1024px) {
      :where(html[data-page="about"]) .mv-manifesto-card {
        grid-template-columns: 1fr;
        min-height: auto;
      }

      :where(html[data-page="about"]) .mv-curve-seam {
        display: none;
      }

      :where(html[data-page="about"]) .mv-center-connector {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: -36px auto -36px;
        z-index: 10;
      }

      :where(html[data-page="about"]) .mv-panel {
        padding: 48px 36px;
      }

      :where(html[data-page="about"]) .vision-mountain-svg {
        width: 280px;
        height: 170px;
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="about"]) .mission-vision {
        padding: 20px 0 60px;
      }

      :where(html[data-page="about"]) .mv-manifesto-card {
        border-radius: 22px;
      }

      :where(html[data-page="about"]) .mv-panel {
        padding: 34px 22px;
      }

      :where(html[data-page="about"]) .mv-headline {
        font-size: 29px;
      }

      :where(html[data-page="about"]) .mv-badges-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }

      :where(html[data-page="about"]) .mv-badge-divider {
        display: none;
      }

      :where(html[data-page="about"]) .mv-annotation-mission {
        display: none;
      }

      :where(html[data-page="about"]) .vision-hw-annotation {
        display: none;
      }

      :where(html[data-page="about"]) .vision-mountain-svg {
        width: 200px;
        height: 130px;
        opacity: 0.55;
      }
    }

    /* ==========================================================================
   Philosophy Section (High-End Editorial 3-Card Architecture)
   ========================================================================== */
    :where(html[data-page="about"]) .philosophy {
      padding: 100px 0 90px;
      background: var(--white, #FFFFFF);
      border-top: 1px solid var(--border, #E2E7EE);
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="about"]) .phil-halo-left {
      position: absolute;
      top: 20%;
      left: -120px;
      width: 480px;
      height: 480px;
      background: radial-gradient(circle, rgba(55, 190, 123, 0.08) 0%, rgba(55, 190, 123, 0) 70%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      filter: blur(40px);
    }

    :where(html[data-page="about"]) .phil-halo-right {
      position: absolute;
      bottom: 10%;
      right: -120px;
      width: 480px;
      height: 480px;
      background: radial-gradient(circle, rgba(67, 139, 255, 0.08) 0%, rgba(67, 139, 255, 0) 70%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      filter: blur(40px);
    }

    :where(html[data-page="about"]) .phil-container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
      position: relative;
      z-index: 5;
    }

    /* Header Block */
    :where(html[data-page="about"]) .phil-header-block {
      text-align: center;
      max-width: 820px;
      margin: 0 auto 56px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    :where(html[data-page="about"]) .phil-eyebrow-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 16px;
    }

    :where(html[data-page="about"]) .phil-eyebrow-line {
      width: 28px;
      height: 2px;
      background: #F5A500;
      border-radius: 2px;
    }

    :where(html[data-page="about"]) .phil-eyebrow-text {
      font-family: var(--font-display, 'Manrope', sans-serif);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: #F5A500;
    }

    :where(html[data-page="about"]) .phil-main-title {
      font-family: var(--font-display, 'Manrope', sans-serif);
      font-size: clamp(34px, 4.2vw, 52px);
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.03em;
      color: var(--navy, #13243D);
      margin-bottom: 18px;
    }

    :where(html[data-page="about"]) .phil-title-dark {
      color: var(--navy, #13243D);
    }

    :where(html[data-page="about"]) .phil-title-gold {
      color: var(--navy, #13243D);
      position: relative;
      display: inline-block;
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .phil-title-brush {
      position: absolute;
      bottom: -6px;
      left: 0;
      width: 100%;
      height: 14px;
      pointer-events: none;
    }

    :where(html[data-page="about"]) .phil-main-subtitle {
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 17px;
      line-height: 1.65;
      color: var(--muted, #5E748F);
      max-width: 660px;
      margin: 0 auto;
    }

    /* 3-Card Grid */
    :where(html[data-page="about"]) .phil-grid-upgraded {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      align-items: stretch;
      position: relative;
    }

    :where(html[data-page="about"]) .phil-card-col {
      display: flex;
      flex-direction: column;
      position: relative;
      height: 100%;
    }

    :where(html[data-page="about"]) .phil-card-rays {
      position: absolute;
      width: 38px;
      height: 38px;
      pointer-events: none;
      z-index: 4;
    }

    :where(html[data-page="about"]) .rays-left {
      top: -12px;
      left: -12px;
    }

    :where(html[data-page="about"]) .rays-right {
      top: -12px;
      right: -12px;
    }

    :where(html[data-page="about"]) .phil-card {
      flex: 1;
      display: flex;
      flex-direction: column;
      border-radius: 24px;
      padding: 34px 28px 28px;
      position: relative;
      border: 1px solid var(--border, #E2E7EE);
      background: #FFFFFF;
      box-shadow: 0 4px 20px rgba(19, 36, 61, 0.03);
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      overflow: hidden;
    }

    :where(html[data-page="about"]) .phil-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 40px rgba(19, 36, 61, 0.08);
    }

    /* Card Themes */
    :where(html[data-page="about"]) .card-mint {
      background: linear-gradient(180deg, #FFFFFF 0%, #F5FBF7 100%);
      border-color: rgba(22, 163, 74, 0.2);
    }

    :where(html[data-page="about"]) .card-mint:hover {
      border-color: rgba(22, 163, 74, 0.45);
      box-shadow: 0 20px 40px rgba(22, 163, 74, 0.1);
    }

    :where(html[data-page="about"]) .card-amber {
      background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF2 100%);
      border-color: rgba(245, 165, 0, 0.25);
    }

    :where(html[data-page="about"]) .card-amber:hover {
      border-color: rgba(245, 165, 0, 0.5);
      box-shadow: 0 20px 40px rgba(245, 165, 0, 0.12);
    }

    :where(html[data-page="about"]) .card-blue {
      background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FF 100%);
      border-color: rgba(37, 99, 235, 0.2);
    }

    :where(html[data-page="about"]) .card-blue:hover {
      border-color: rgba(37, 99, 235, 0.45);
      box-shadow: 0 20px 40px rgba(37, 99, 235, 0.1);
    }

    /* Card Header Components */
    :where(html[data-page="about"]) .phil-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
    }

    :where(html[data-page="about"]) .phil-icon-squircle {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
    }

    :where(html[data-page="about"]) .phil-card:hover .phil-icon-squircle {
      transform: scale(1.08) rotate(3deg);
    }

    :where(html[data-page="about"]) .icon-mint {
      background: #DCFCE7;
      color: #16A34A;
      box-shadow: 0 4px 14px rgba(22, 163, 74, 0.15);
    }

    :where(html[data-page="about"]) .icon-amber {
      background: #FEF3C7;
      color: #D97706;
      box-shadow: 0 4px 14px rgba(217, 119, 6, 0.15);
    }

    :where(html[data-page="about"]) .icon-blue {
      background: #DBEAFE;
      color: #2563EB;
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.15);
    }

    :where(html[data-page="about"]) .phil-top-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    :where(html[data-page="about"]) .phil-watermark {
      font-family: var(--font-display, 'Manrope', sans-serif);
      font-size: 26px;
      font-weight: 900;
      letter-spacing: -0.04em;
      opacity: 0.35;
      line-height: 1;
    }

    :where(html[data-page="about"]) .num-mint {
      color: #16A34A;
    }

    :where(html[data-page="about"]) .num-amber {
      color: #D97706;
    }

    :where(html[data-page="about"]) .num-blue {
      color: #2563EB;
    }

    :where(html[data-page="about"]) .phil-arrow-badge {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(15, 35, 67, 0.06);
      transition: all 0.25s ease;
    }

    :where(html[data-page="about"]) .phil-card:hover .phil-arrow-badge {
      background: var(--navy, #13243D);
      border-color: var(--navy, #13243D);
      transform: translate(2px, -2px);
    }

    :where(html[data-page="about"]) .phil-card:hover .phil-arrow-badge svg {
      stroke: #FFFFFF;
    }

    /* Card Typography */
    :where(html[data-page="about"]) .phil-card-heading {
      font-family: var(--font-display, 'Manrope', sans-serif);
      font-size: 22px;
      font-weight: 800;
      color: var(--navy, #13243D);
      margin-bottom: 10px;
      letter-spacing: -0.02em;
    }

    :where(html[data-page="about"]) .phil-card-desc {
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 15px;
      line-height: 1.6;
      color: var(--muted, #5E748F);
      margin-bottom: 22px;
      flex-grow: 1;
    }

    /* Micro Tags */
    :where(html[data-page="about"]) .phil-tags-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: auto;
      padding-top: 16px;
      border-top: 1px dashed rgba(226, 231, 238, 0.8);
    }

    :where(html[data-page="about"]) .phil-tag {
      font-family: var(--font-display, 'Manrope', sans-serif);
      font-size: 10.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 4px 10px;
      border-radius: 6px;
      line-height: 1.4;
    }

    :where(html[data-page="about"]) .tag-mint {
      background: #E8F8F0;
      color: #15803D;
      border: 1px solid rgba(22, 163, 74, 0.2);
    }

    :where(html[data-page="about"]) .tag-amber {
      background: #FFF8E6;
      color: #B45309;
      border: 1px solid rgba(217, 119, 6, 0.2);
    }

    :where(html[data-page="about"]) .tag-blue {
      background: #EFF6FF;
      color: #1D4ED8;
      border: 1px solid rgba(37, 99, 235, 0.2);
    }

    /* Handwritten Bottom Note */
    :where(html[data-page="about"]) .phil-bottom-note {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 16px;
      padding-left: 8px;
    }

    :where(html[data-page="about"]) .phil-note-arrow {
      width: 26px;
      height: 26px;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .phil-note-text {
      font-family: var(--font-hand, 'Caveat', cursive);
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
    }

    :where(html[data-page="about"]) .text-mint {
      color: #16A34A;
    }

    :where(html[data-page="about"]) .text-amber {
      color: #D97706;
    }

    :where(html[data-page="about"]) .text-blue {
      color: #2563EB;
    }

    /* ==========================================================================
   Journey Timeline Section (High-End Brand Evolution Architecture)
   ========================================================================== */
    :where(html[data-page="about"]) .journey-timeline-section {
      padding: 100px 0 110px;
      background: var(--cream, #FAF8F5);
      position: relative;
      overflow: hidden;
      border-top: 1px solid var(--border, #E2E7EE);
    }

    :where(html[data-page="about"]) .journey-tl-container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
      position: relative;
      z-index: 5;
    }

    /* Header */
    :where(html[data-page="about"]) .journey-tl-header {
      text-align: center;
      max-width: 780px;
      margin: 0 auto 64px;
    }

    :where(html[data-page="about"]) .journey-tl-eyebrow {
      display: inline-block;
      font-family: var(--font-display, 'Manrope', sans-serif);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: #F5A500;
      margin-bottom: 14px;
    }

    :where(html[data-page="about"]) .journey-tl-title {
      font-family: var(--font-display, 'Manrope', sans-serif);
      font-size: clamp(34px, 4.2vw, 52px);
      font-weight: 800;
      color: var(--navy, #13243D);
      letter-spacing: -0.03em;
      line-height: 1.15;
    }

    :where(html[data-page="about"]) .journey-tl-underline-wrap {
      position: relative;
      display: inline-block;
      color: var(--navy, #13243D);
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .journey-tl-brush-underline {
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 14px;
      pointer-events: none;
    }

    /* Timeline Track & Area */
    :where(html[data-page="about"]) .journey-tl-area {
      position: relative;
      width: 100%;
      margin-top: 10px;
    }

    :where(html[data-page="about"]) .journey-tl-track-svg {
      position: absolute;
      top: 36px;
      left: 0;
      width: 100%;
      height: 80px;
      pointer-events: none;
      z-index: 1;
    }

    :where(html[data-page="about"]) .journey-tl-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      position: relative;
      z-index: 2;
      align-items: stretch;
    }

    :where(html[data-page="about"]) .journey-tl-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    /* Icon Disc */
    :where(html[data-page="about"]) .journey-tl-icon-circle {
      width: 74px;
      height: 74px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 26px;
      position: relative;
      z-index: 3;
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 8px 24px rgba(19, 36, 61, 0.08);
    }

    :where(html[data-page="about"]) .journey-tl-col:hover .journey-tl-icon-circle {
      transform: translateY(-4px) scale(1.06);
    }

    :where(html[data-page="about"]) .node-foundation {
      background: #FFFFFF;
      border: 3px solid #CBD5E1;
      color: #64748B;
    }

    :where(html[data-page="about"]) .node-evolution {
      background: #FFFFFF;
      border: 3px solid #93C5FD;
      color: #2563EB;
      box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15);
    }

    :where(html[data-page="about"]) .node-today {
      background: #FFFFFF;
      border: 3.5px solid #F5A500;
      color: #D97706;
      box-shadow: 0 10px 28px rgba(245, 165, 0, 0.25);
    }

    :where(html[data-page="about"]) .node-today::after {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 1.5px dashed rgba(245, 165, 0, 0.5);
      animation: page-about-spinSlow 16s linear infinite;
    }

    :where(html[data-page="about"]) .node-next {
      background: #FFFFFF;
      border: 3px solid #86EFAC;
      color: #16A34A;
      box-shadow: 0 8px 24px rgba(22, 163, 74, 0.15);
    }

    /* Milestone Card */
    :where(html[data-page="about"]) .journey-tl-card {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #FFFFFF;
      border: 1px solid var(--border, #E2E7EE);
      border-radius: 20px;
      padding: 26px 22px;
      box-shadow: 0 4px 18px rgba(19, 36, 61, 0.04);
      transition: all 0.3s ease;
      position: relative;
    }

    :where(html[data-page="about"]) .journey-tl-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px rgba(19, 36, 61, 0.08);
      border-color: #CBD5E1;
    }

    :where(html[data-page="about"]) .card-today {
      border: 1.5px solid rgba(245, 165, 0, 0.55);
      background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF7 100%);
      box-shadow: 0 8px 26px rgba(245, 165, 0, 0.09);
    }

    :where(html[data-page="about"]) .card-today:hover {
      border-color: #F5A500;
      box-shadow: 0 18px 36px rgba(245, 165, 0, 0.16);
    }

    /* Card Content */
    :where(html[data-page="about"]) .journey-tl-kicker {
      font-family: var(--font-display, 'Manrope', sans-serif);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: #64748B;
      margin-bottom: 8px;
      display: block;
    }

    :where(html[data-page="about"]) .journey-tl-card-title {
      font-family: var(--font-display, 'Manrope', sans-serif);
      font-size: 18px;
      font-weight: 800;
      color: var(--navy, #13243D);
      line-height: 1.3;
      margin-bottom: 10px;
      letter-spacing: -0.01em;
    }

    :where(html[data-page="about"]) .journey-tl-card-body {
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 14px;
      line-height: 1.6;
      color: var(--muted, #5E748F);
      margin-bottom: 18px;
      flex-grow: 1;
    }

    /* Card Footer */
    :where(html[data-page="about"]) .journey-tl-card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid #F1F4F9;
    }

    :where(html[data-page="about"]) .journey-tl-accent-line {
      width: 30px;
      height: 3px;
      background: #E2E8F0;
      border-radius: 2px;
    }

    :where(html[data-page="about"]) .line-today {
      background: #F5A500;
    }

    :where(html[data-page="about"]) .journey-tl-num {
      font-family: var(--font-display, 'Manrope', sans-serif);
      font-size: 20px;
      font-weight: 900;
      color: #94A3B8;
      letter-spacing: -0.02em;
    }

    :where(html[data-page="about"]) .num-today {
      color: #D97706;
    }

    /* Keyframes */
    @keyframes page-about-spinSlow {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    /* Responsive Media Queries for Philosophy & Journey */
    @media (max-width: 1024px) {
      :where(html[data-page="about"]) .phil-grid-upgraded {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }

      :where(html[data-page="about"]) .phil-card-col:last-child {
        grid-column: 1 / -1;
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
      }

      :where(html[data-page="about"]) .journey-tl-track-svg {
        display: none;
      }

      :where(html[data-page="about"]) .journey-tl-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="about"]) .philosophy {
        padding: 70px 0 60px;
      }

      :where(html[data-page="about"]) .phil-container {
        padding: 0 20px;
      }

      :where(html[data-page="about"]) .phil-header-block {
        margin-bottom: 40px;
      }

      :where(html[data-page="about"]) .phil-grid-upgraded {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      :where(html[data-page="about"]) .phil-card-col:last-child {
        grid-column: auto;
        max-width: 100%;
      }

      :where(html[data-page="about"]) .phil-card {
        padding: 28px 22px 22px;
      }

      :where(html[data-page="about"]) .phil-bottom-note {
        justify-content: center;
      }

      :where(html[data-page="about"]) .journey-timeline-section {
        padding: 70px 0 75px;
      }

      :where(html[data-page="about"]) .journey-tl-container {
        padding: 0 20px;
      }

      :where(html[data-page="about"]) .journey-tl-header {
        margin-bottom: 40px;
      }

      :where(html[data-page="about"]) .journey-tl-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      :where(html[data-page="about"]) .journey-tl-icon-circle {
        width: 64px;
        height: 64px;
        margin-bottom: 18px;
      }

      :where(html[data-page="about"]) .journey-tl-card {
        padding: 22px 18px;
      }
    }

    /* =========================================================================
   FINAL CTA: LET'S GROW TOGETHER (PREMIUM REDESIGN)
   ========================================================================= */
    :where(html[data-page="about"]) .final-cta {
      padding: 100px 0 140px;
      background: radial-gradient(100% 120% at 50% 0%, #152E50 0%, #0B1728 100%);
      color: #FFFFFF;
      border-radius: 40px 40px 0 0;
      position: relative;
      overflow: hidden;
      box-shadow: 0 -20px 50px rgba(11, 23, 40, 0.3);
    }

    :where(html[data-page="about"]) .final-cta .cta-circles {
      position: absolute;
      right: -5%;
      top: -25%;
      width: 580px;
      height: 580px;
      border-radius: 50%;
      border: 1px dashed rgba(245, 169, 22, 0.2);
      pointer-events: none;
      animation: page-about-ctaSlowSpin 60s linear infinite;
    }

    :where(html[data-page="about"]) .final-cta .cta-circles::before {
      content: '';
      position: absolute;
      top: 40px;
      left: 40px;
      right: 40px;
      bottom: 40px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    @keyframes page-about-ctaSlowSpin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    :where(html[data-page="about"]) .final-cta .container {
      position: relative;
      z-index: 10;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      align-items: center;
      gap: 56px;
    }

    :where(html[data-page="about"]) .final-cta-left {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .final-cta-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-display, 'Manrope', sans-serif);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #F5A916;
      background: rgba(245, 169, 22, 0.12);
      border: 1px solid rgba(245, 169, 22, 0.25);
      padding: 6px 14px;
      border-radius: 999px;
      margin-bottom: 20px;
      width: fit-content;
    }

    :where(html[data-page="about"]) .final-cta-eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #F5A916;
      box-shadow: 0 0 8px #F5A916;
    }

    :where(html[data-page="about"]) .final-cta h2 {
      color: #FFFFFF;
      font-family: var(--font-display, 'Manrope', sans-serif);
      font-size: clamp(34px, 4vw, 56px);
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: -0.03em;
      margin-bottom: 18px;
    }

    :where(html[data-page="about"]) .final-cta h2 .cta-gold-text {
      color: #F5A916;
      font-style: italic;
      font-family: 'DM Serif Display', Georgia, serif;
      font-weight: 400;
    }

    :where(html[data-page="about"]) .final-cta-right {
      display: flex;
      flex-direction: column;
      background: rgba(255, 255, 255, 0.04);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 28px;
      padding: 32px 28px;
      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
    }

    :where(html[data-page="about"]) .final-cta-right p {
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 16.5px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.82);
      margin-bottom: 24px;
    }

    :where(html[data-page="about"]) .final-cta-btn-group {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    :where(html[data-page="about"]) .final-cta-btn-group .btn-primary {
      background: #F5A916;
      color: #0E2A48;
      font-weight: 700;
      padding: 0 24px;
      height: 50px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: none;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(245, 169, 22, 0.28);
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
    }

    :where(html[data-page="about"]) .final-cta-btn-group .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(245, 169, 22, 0.4);
      background: #FFB834;
    }

    :where(html[data-page="about"]) .final-cta-btn-group .btn-outline {
      background: rgba(255, 255, 255, 0.06);
      color: #FFFFFF;
      font-weight: 600;
      padding: 0 22px;
      height: 50px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      transition: all 0.25s ease;
    }

    :where(html[data-page="about"]) .final-cta-btn-group .btn-outline:hover {
      background: rgba(255, 255, 255, 0.14);
      border-color: rgba(255, 255, 255, 0.4);
      transform: translateY(-2px);
    }

    :where(html[data-page="about"]) .final-cta-trust-strip {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-top: 20px;
      padding-top: 18px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    :where(html[data-page="about"]) .cta-trust-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.7);
      font-weight: 500;
    }

    :where(html[data-page="about"]) .cta-trust-badge svg {
      color: #38C172;
    }

    @media (max-width: 1024px) {
      :where(html[data-page="about"]) .final-cta {
        padding: 70px 0 100px;
      }

      :where(html[data-page="about"]) .final-cta .container {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: left;
      }
    }

    @media (max-width: 767px) {
  /* Footer Mobile: Company and Solutions side-by-side */
  :where(html[data-page="about"]) .site-footer .footer-top-grid,:where(html[data-page="about"]) 
  .footer-top-grid,:where(html[data-page="about"]) 
  .kx-footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 16px !important;
  }
  :where(html[data-page="about"]) .footer-brand,:where(html[data-page="about"]) 
  .kx-footer-brand-col {
    grid-column: 1 / -1 !important;
  }
  :where(html[data-page="about"]) .footer-col-company {
    grid-column: 1 !important;
  }
  :where(html[data-page="about"]) .footer-col-solutions {
    grid-column: 2 !important;
  }
  :where(html[data-page="about"]) .footer-col-resources {
    grid-column: 1 !important;
  }
  :where(html[data-page="about"]) .footer-col-follow {
    grid-column: 2 !important;
  }

      :where(html[data-page="about"]) .final-cta {
        padding: 56px 0 80px;
        border-radius: 28px 28px 0 0;
      }

      :where(html[data-page="about"]) .final-cta .container {
        padding: 0 20px;
        gap: 28px;
      }

      :where(html[data-page="about"]) .final-cta-eyebrow {
        font-size: 11px;
        margin-bottom: 14px;
      }

      :where(html[data-page="about"]) .final-cta h2 {
        font-size: 30px;
        line-height: 1.15;
        margin-bottom: 14px;
      }

      :where(html[data-page="about"]) .final-cta-right {
        padding: 24px 20px;
        border-radius: 22px;
      }

      :where(html[data-page="about"]) .final-cta-right p {
        font-size: 15px;
        margin-bottom: 20px;
      }

      :where(html[data-page="about"]) .final-cta-btn-group {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        width: 100%;
      }

      :where(html[data-page="about"]) .final-cta-btn-group .btn-primary,:where(html[data-page="about"]) 
      .final-cta-btn-group .btn-outline {
        flex: 1 1 0%;
        width: auto;
        height: 46px;
        font-size: 13.5px;
        padding: 0 10px;
        justify-content: center;
        white-space: nowrap;
      }

      :where(html[data-page="about"]) .final-cta-trust-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-top: 16px;
        padding-top: 14px;
      }
    }

    :where(html[data-page="about"]) .cta-circles {
      position: absolute;
      right: -10%;
      top: -20%;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    :where(html[data-page="about"]) .cta-circles::before {
      content: '';
      position: absolute;
      top: 20px;
      left: 20px;
      right: 20px;
      bottom: 20px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Footer */
    :where(html[data-page="about"]) .footer {
      background: var(--navy-dark);
      color: var(--white);
      padding: 80px 0 40px;
      position: relative;
    }

    :where(html[data-page="about"]) .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.4fr;
      gap: 60px;
      margin-bottom: 80px;
    }

    :where(html[data-page="about"]) .footer-brand p {
      color: rgba(255, 255, 255, 0.6);
      margin-top: 16px;
      max-width: 280px;
    }

    :where(html[data-page="about"]) .footer h4 {
      color: var(--white);
      font-size: 16px;
      margin-bottom: 24px;
    }

    :where(html[data-page="about"]) .footer ul li {
      margin-bottom: 12px;
    }

    :where(html[data-page="about"]) .footer ul a {
      color: rgba(255, 255, 255, 0.6);
      font-size: 15px;
    }

    :where(html[data-page="about"]) .footer ul a:hover {
      color: var(--gold);
    }

    :where(html[data-page="about"]) .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 32px;
      display: flex;
      justify-content: space-between;
      color: rgba(255, 255, 255, 0.4);
      font-size: 14px;
    }

    :where(html[data-page="about"]) .footer-legal {
      display: flex;
      gap: 24px;
    }

    :where(html[data-page="about"]) .footer-wordmark {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      text-align: center;
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 140px;
      color: rgba(255, 255, 255, 0.03);
      pointer-events: none;
      line-height: 0.8;
      overflow: hidden;
      white-space: nowrap;
    }

    /* -------------------------------------------------------------------------- */
    /* Responsive Breakpoints */
    /* -------------------------------------------------------------------------- */

    @media (max-width: 1280px) {
      :where(html[data-page="about"]) .container {
        padding: 0 40px;
      }

      :where(html[data-page="about"]) .hero h1 {
        font-size: 56px;
      }

      :where(html[data-page="about"]) .orbit-wrapper {
        width: min(620px, 82vw);
      }

      :where(html[data-page="about"]) .orbit-center {
        width: 200px;
        height: 200px;
      }

      :where(html[data-page="about"]) .orbit-center h3 {
        font-size: 15px;
      }

      :where(html[data-page="about"]) .stats .container {
        grid-template-columns: repeat(2, 1fr);
      }

      :where(html[data-page="about"]) .hw-left {
        display: none;
      }

      :where(html[data-page="about"]) .orbit-callout {
        display: none;
      }

      /* Hide complex callouts on tablet */
      :where(html[data-page="about"]) .orbit-node {
        width: 120px;
      }
    }

    @media (max-width: 1024px) {
      :where(html[data-page="about"]) .hero {
        min-height: auto;
        padding: 60px 0;
      }

      :where(html[data-page="about"]) .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 60px;
      }

      :where(html[data-page="about"]) .hero-content {
        padding-right: 0;
        max-width: 800px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      :where(html[data-page="about"]) .hero h1 .highlight {
        white-space: nowrap;
      }

      :where(html[data-page="about"]) .hero-buttons {
        justify-content: center;
      }

      :where(html[data-page="about"]) .hw-annotation {
        display: none;
      }

      /* Hide all handwritten on tablet/mobile */
      :where(html[data-page="about"]) .origin .container {
        grid-template-columns: 1fr;
        gap: 60px;
      }

      :where(html[data-page="about"]) .mv-wrapper {
        flex-direction: column;
      }

      :where(html[data-page="about"]) .phil-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      :where(html[data-page="about"]) .timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
      }

      :where(html[data-page="about"]) .timeline::before {
        display: none;
      }

      :where(html[data-page="about"]) .final-cta .container {
        flex-direction: column;
        text-align: center;
      }

      :where(html[data-page="about"]) .final-cta-buttons {
        flex-direction: row;
        justify-content: center;
        width: 100%;
      }

      :where(html[data-page="about"]) .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 767px) {
  /* Footer Mobile: Company and Solutions side-by-side */
  :where(html[data-page="about"]) .site-footer .footer-top-grid,:where(html[data-page="about"]) 
  .footer-top-grid,:where(html[data-page="about"]) 
  .kx-footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 16px !important;
  }
  :where(html[data-page="about"]) .footer-brand,:where(html[data-page="about"]) 
  .kx-footer-brand-col {
    grid-column: 1 / -1 !important;
  }
  :where(html[data-page="about"]) .footer-col-company {
    grid-column: 1 !important;
  }
  :where(html[data-page="about"]) .footer-col-solutions {
    grid-column: 2 !important;
  }
  :where(html[data-page="about"]) .footer-col-resources {
    grid-column: 1 !important;
  }
  :where(html[data-page="about"]) .footer-col-follow {
    grid-column: 2 !important;
  }

      :where(html[data-page="about"]) .container {
        padding: 0 20px;
      }

      :where(html[data-page="about"]) .header .nav-links,:where(html[data-page="about"]) 
      .header .btn-primary {
        display: none;
      }

      :where(html[data-page="about"]) .mobile-menu-btn {
        display: block;
      }

      :where(html[data-page="about"]) .nav-links.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 76px;
        left: 0;
        width: 100%;
        background: var(--white);
        padding: 24px;
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-md);
      }

      :where(html[data-page="about"]) .hero {
        padding: 24px 0 32px;
      }

      :where(html[data-page="about"]) .hero .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 36px;
      }

      :where(html[data-page="about"]) .hero-content {
        padding-right: 0;
        max-width: 520px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      :where(html[data-page="about"]) .hero-eyebrow-pill {
        padding: 5px 12px;
        gap: 6px;
        margin-bottom: 14px;
        max-width: 95%;
      }

      :where(html[data-page="about"]) .hero-eyebrow-text {
        font-size: 10.5px;
        letter-spacing: 0.06em;
        text-align: center;
      }

      :where(html[data-page="about"]) .hero h1 {
        font-size: clamp(28px, 6.8vw, 36px);
        line-height: 1.15;
        letter-spacing: -0.025em;
        margin-bottom: 14px;
        text-align: center;
        width: 100%;
      }

      :where(html[data-page="about"]) .hero h1 .highlight {
        color: #F5A916;
        display: inline-block;
        position: relative;
        white-space: normal;
      }

      :where(html[data-page="about"]) .hero h1 .highlight svg {
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 100%;
        height: 8px;
      }

      :where(html[data-page="about"]) .hero p {
        font-size: 14.5px;
        line-height: 1.6;
        color: #5E748F;
        max-width: 440px;
        margin: 0 auto 22px;
        text-align: center;
      }

      :where(html[data-page="about"]) .hero-buttons {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 440px !important;
        margin: 0 auto !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
      }

      :where(html[data-page="about"]) .hero-buttons .btn {
        flex: 1 1 0% !important;
        width: auto !important;
        height: 46px !important;
        font-size: 13.5px !important;
        padding: 0 12px !important;
        white-space: nowrap !important;
        justify-content: center !important;
        gap: 6px !important;
        border-radius: 999px !important;
      }

      :where(html[data-page="about"]) .hero-buttons .btn svg {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
      }

      :where(html[data-page="about"]) .orbit-wrapper {
        width: 90vw;
        max-width: 400px;
      }

      :where(html[data-page="about"]) .orbit-center {
        width: 150px;
        height: 150px;
      }

      :where(html[data-page="about"]) .hub-label {
        font-size: 7px;
      }

      :where(html[data-page="about"]) .hub-support {
        font-size: 6px;
      }

      :where(html[data-page="about"]) .orbit-center h3 {
        font-size: 13.5px;
      }

      :where(html[data-page="about"]) .node-icon {
        width: 50px;
        height: 50px;
      }

      :where(html[data-page="about"]) .node-icon svg {
        width: 22px;
        height: 22px;
      }

      :where(html[data-page="about"]) .orbit-node {
        width: 100px;
      }

      :where(html[data-page="about"]) .orbit-node h4 {
        font-size: 12px;
      }

      :where(html[data-page="about"]) .orbit-node p {
        font-size: 10px;
      }

      :where(html[data-page="about"]) .orbit-node p {
        display: none;
      }

      /* Hide descriptions on mobile to save space */

      :where(html[data-page="about"]) .stats .container {
        grid-template-columns: 1fr;
      }

      :where(html[data-page="about"]) .core-capabilities .cap-inner {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
      }

      :where(html[data-page="about"]) .cap-list {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
      }

      :where(html[data-page="about"]) .floating-card {
        position: static;
        margin-top: 24px;
        width: 100%;
        max-width: 100%;
      }

      :where(html[data-page="about"]) .mv-card {
        padding: 40px 24px;
      }

      :where(html[data-page="about"]) .mv-mission h2,:where(html[data-page="about"]) 
      .mv-vision h2 {
        font-size: 32px;
      }

      :where(html[data-page="about"]) .phil-grid {
        grid-template-columns: 1fr;
      }

      :where(html[data-page="about"]) .timeline {
        grid-template-columns: 1fr;
      }

      :where(html[data-page="about"]) .timeline-item {
        padding-left: 24px;
        border-left: 2px dashed var(--border);
      }

      :where(html[data-page="about"]) .tl-icon {
        position: absolute;
        left: -24px;
        top: 0;
        width: 48px;
        height: 48px;
      }

      :where(html[data-page="about"]) .final-cta h2 {
        font-size: 36px;
      }

      :where(html[data-page="about"]) .final-cta-buttons {
        flex-direction: column;
      }

      :where(html[data-page="about"]) .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      :where(html[data-page="about"]) .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
      }

      :where(html[data-page="about"]) .footer-wordmark {
        font-size: 48px;
        bottom: 20px;
      }
    }

    /* =========================================================================
   3. INDUSTRIES PAGE STYLES (INLINED)
   ========================================================================= */
    /* ==========================================================================
   KAXON TECHNOLOGIES - INDUSTRIES PAGE STYLESHEET
   Design Tokens, Typography, Layout, 3D Ecosystem, Playbook, Framework & Responsive
   ========================================================================== */

    :root:where([data-page="about"]) {
      /* Brand Palette */
      --sd-canvas-warm: #FFFDF7;
      --sd-canvas-white: #FFFFFF;
      --sd-canvas-soft-blue: #F4FAFE;
      --sd-canvas-soft-green: #F3FBF7;
      --sd-navy: #122843;
      --sd-navy-dark: #0D223A;
      --sd-navy-light: #1E3A5F;
      --sd-body-text: #5A738E;
      --sd-muted-text: #8094AA;

      --sd-yellow: #FFB91F;
      --sd-yellow-hover: #FFAE00;
      --sd-yellow-soft: #FFF5D7;
      --sd-blue: #168BE5;
      --sd-blue-soft: #EAF6FF;
      --sd-green: #20B875;
      --sd-green-soft: #E9FAF2;
      --sd-purple: #8B5CF6;
      --sd-purple-soft: #F1ECFF;
      --sd-orange: #F28B30;
      --sd-orange-soft: #FFF0E2;
      --sd-border: #DFEAF1;
      --sd-border-subtle: #EDF3F8;

      /* Typography */
      --font-main: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-script: 'Caveat', cursive, sans-serif;

      /* Radii */
      --radius-sm: 14px;
      --radius-md: 18px;
      --radius-lg: 24px;
      --radius-xl: 32px;
      --radius-pill: 9999px;

      /* Shadows */
      --shadow-card: 0 12px 30px rgba(21, 61, 90, 0.06);
      --shadow-floating: 0 22px 50px rgba(21, 61, 90, 0.12);
      --shadow-image: 0 24px 60px rgba(19, 59, 88, 0.14);
      --shadow-yellow: 0 8px 24px rgba(255, 185, 31, 0.32);
      --shadow-dark-cta: 0 25px 60px rgba(8, 27, 46, 0.20);
    }

    /* Reset & Base Setup */
    :where(html[data-page="about"]) *,:where(html[data-page="about"]) 
    *::before,:where(html[data-page="about"]) 
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html:where([data-page="about"]) {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    :where(html[data-page="about"]) body {
      font-family: var(--font-main);
      background-color: var(--sd-canvas-warm);
      color: var(--sd-navy);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    /* Container */
    :where(html[data-page="about"]) .sd-container {
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 48px;
    }

    @media (max-width: 1024px) {
      :where(html[data-page="about"]) .sd-container {
        padding: 0 32px;
      }
    }

    @media (max-width: 640px) {
      :where(html[data-page="about"]) .sd-container {
        padding: 0 20px;
      }
    }

    /* Typography Defaults */
    :where(html[data-page="about"]) h1,:where(html[data-page="about"]) 
    h2,:where(html[data-page="about"]) 
    h3,:where(html[data-page="about"]) 
    h4,:where(html[data-page="about"]) 
    h5,:where(html[data-page="about"]) 
    h6 {
      color: var(--sd-navy);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.035em;
    }

    :where(html[data-page="about"]) p {
      color: var(--sd-body-text);
      font-size: 16.5px;
      line-height: 1.65;
    }

    :where(html[data-page="about"]) a {
      text-decoration: none;
      color: inherit;
      transition: all 0.2s ease;
    }

    :where(html[data-page="about"]) button {
      font-family: inherit;
      border: none;
      background: none;
      cursor: pointer;
      outline: none;
    }

    /* ==========================================================================
   GLOBAL NAVIGATION BAR
   ========================================================================== */
    :where(html[data-page="about"]) .sd-header {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      background: rgba(255, 253, 247, 0.94);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(223, 234, 241, 0.7);
      z-index: 1000;
      transition: all 0.3s ease;
    }

    :where(html[data-page="about"]) .sd-header.is-scrolled {
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 4px 20px rgba(18, 40, 67, 0.05);
    }

    :where(html[data-page="about"]) .sd-nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 76px;
    }

    /* Brand Logo */
    :where(html[data-page="about"]) .sd-logo {
      display: flex;
      flex-direction: column;
      line-height: 1;
      text-decoration: none;
    }

    :where(html[data-page="about"]) .sd-logo-brand {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.03em;
      color: var(--sd-navy);
    }

    :where(html[data-page="about"]) .sd-logo-dimex {
      color: var(--sd-blue);
      margin-left: 4px;
    }

    :where(html[data-page="about"]) .sd-logo-sub {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--sd-body-text);
      margin-top: 2px;
    }

    /* Nav Menu Links */
    :where(html[data-page="about"]) .sd-nav-links {
      display: flex;
      align-items: center;
      list-style: none;
      gap: 32px;
    }

    :where(html[data-page="about"]) .sd-nav-link {
      font-size: 14.5px;
      font-weight: 600;
      color: var(--sd-body-text);
      position: relative;
      padding: 8px 0;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: color 0.2s ease;
    }

    :where(html[data-page="about"]) .sd-nav-link:hover {
      color: var(--sd-navy);
    }

    :where(html[data-page="about"]) .sd-nav-link.active {
      color: var(--sd-navy);
      font-weight: 800;
    }

    :where(html[data-page="about"]) .sd-nav-link.active::after {
      content: '';
      position: absolute;
      bottom: 0px;
      left: 0;
      width: 100%;
      height: 2.5px;
      background-color: var(--sd-navy);
      border-radius: 4px;
    }

    :where(html[data-page="about"]) .sd-nav-link.active::before {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 4px;
      background-color: var(--sd-navy);
      border-radius: 50%;
    }

    /* Nav Actions */
    :where(html[data-page="about"]) .sd-nav-actions {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    :where(html[data-page="about"]) .sd-btn-pill-navy {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 22px;
      font-size: 14px;
      font-weight: 700;
      color: var(--sd-navy);
      background: #FFFFFF;
      border: 1.5px solid var(--sd-navy);
      border-radius: var(--radius-pill);
      transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .sd-btn-pill-navy:hover {
      background: var(--sd-navy);
      color: #FFFFFF;
      transform: translateY(-1.5px);
      box-shadow: 0 6px 18px rgba(18, 40, 67, 0.15);
    }

    :where(html[data-page="about"]) .sd-btn-pill-yellow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 24px;
      font-size: 14px;
      font-weight: 800;
      color: var(--sd-navy);
      background: var(--sd-yellow);
      border-radius: var(--radius-pill);
      box-shadow: 0 4px 14px rgba(255, 185, 31, 0.35);
      transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .sd-btn-pill-yellow:hover {
      background: var(--sd-yellow-hover);
      transform: translateY(-2px);
      box-shadow: var(--shadow-yellow);
    }

    :where(html[data-page="about"]) .sd-mobile-toggle {
      display: none;
      width: 42px;
      height: 42px;
      align-items: center;
      justify-content: center;
      color: var(--sd-navy);
    }

    /* Mobile Drawer */
    :where(html[data-page="about"]) .sd-mobile-drawer {
      display: none;
      position: absolute;
      top: 76px;
      left: 0;
      width: 100%;
      background: #FFFFFF;
      border-bottom: 1px solid var(--sd-border);
      box-shadow: 0 16px 36px rgba(18, 40, 67, 0.1);
      padding: 24px;
      flex-direction: column;
      gap: 16px;
      z-index: 999;
    }

    :where(html[data-page="about"]) .sd-mobile-drawer.is-open {
      display: flex;
    }

    :where(html[data-page="about"]) .sd-mobile-nav-link {
      font-size: 16px;
      font-weight: 700;
      color: var(--sd-navy);
      padding: 8px 0;
      border-bottom: 1px solid var(--sd-border-subtle);
    }

    @media (max-width: 1024px) {
      :where(html[data-page="about"]) .sd-nav-links {
        display: none;
      }

      :where(html[data-page="about"]) .sd-mobile-toggle {
        display: flex;
      }
    }

    /* ==========================================================================
   HERO SECTION: 2-COLUMN ASYMMETRICAL EDITORIAL LAYOUT
   ========================================================================== */
    :where(html[data-page="about"]) .sd-hero-section {
      position: relative;
      padding: 50px 0 60px;
      overflow: hidden;
      background: radial-gradient(circle at 75% 30%, #EDF7FD 0%, #FFFDF7 65%);
    }

    :where(html[data-page="about"]) .sd-hero-bg-canvas {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
    }

    :where(html[data-page="about"]) .sd-hero-grid {
      position: relative;
      display: grid;
      grid-template-columns: minmax(440px, 0.88fr) minmax(560px, 1.12fr);
      gap: 40px;
      align-items: center;
      z-index: 5;
    }

    /* Left Hero Column */
    :where(html[data-page="about"]) .sd-hero-left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      z-index: 10;
    }

    :where(html[data-page="about"]) .sd-eyebrow-capsule {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      background: #FFFFFF;
      border: 1px solid var(--sd-border);
      border-radius: var(--radius-pill);
      font-size: 11.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--sd-navy);
      box-shadow: 0 2px 8px rgba(18, 40, 67, 0.04);
      margin-bottom: 20px;
    }

    :where(html[data-page="about"]) .sd-eyebrow-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--sd-green);
      box-shadow: 0 0 0 3px rgba(32, 184, 117, 0.2);
    }

    :where(html[data-page="about"]) .sd-hero-headline {
      font-size: 58px;
      font-weight: 900;
      line-height: 1.05;
      letter-spacing: -0.04em;
      color: #102A43;
      margin-bottom: 22px;
    }

    :where(html[data-page="about"]) .sd-highlight-yellow {
      color: #FFB91F;
      display: inline-block;
    }

    :where(html[data-page="about"]) .sd-hero-desc {
      font-size: 17px;
      color: #526E86;
      line-height: 1.6;
      max-width: 490px;
      margin-bottom: 30px;
    }

    :where(html[data-page="about"]) .sd-hero-desc strong {
      color: var(--sd-navy);
      font-weight: 700;
    }

    :where(html[data-page="about"]) .sd-hero-btn-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 28px;
      position: relative;
    }

    :where(html[data-page="about"]) .sd-btn-hero-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 28px;
      font-size: 15.5px;
      font-weight: 800;
      color: #102A43;
      background: #FFB91F;
      border-radius: var(--radius-pill);
      box-shadow: 0 6px 20px rgba(255, 185, 31, 0.38);
      transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
      text-decoration: none;
    }

    :where(html[data-page="about"]) .sd-btn-hero-primary:hover {
      background: var(--sd-yellow-hover);
      transform: translateY(-2px);
      box-shadow: var(--shadow-yellow);
    }

    :where(html[data-page="about"]) .sd-btn-hero-secondary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 26px;
      font-size: 15px;
      font-weight: 800;
      color: #102A43;
      background: #FFFFFF;
      border: 1.5px solid #102A43;
      border-radius: var(--radius-pill);
      box-shadow: 0 2px 10px rgba(18, 40, 67, 0.05);
      transition: all 0.25s ease;
      cursor: pointer;
    }

    :where(html[data-page="about"]) .sd-btn-hero-secondary:hover {
      background: #102A43;
      color: #FFFFFF;
      transform: translateY(-2px);
    }

    :where(html[data-page="about"]) .sd-btn-play-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #102A43;
      color: #FFFFFF;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    :where(html[data-page="about"]) .sd-btn-hero-secondary:hover .sd-btn-play-icon {
      background: #FFB91F;
      color: #102A43;
    }

    /* Compact Proof Bar (Hero) */
    :where(html[data-page="about"]) .sd-hero-proof-bar {
      display: flex;
      align-items: center;
      gap: 20px;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(12px);
      border: 1px solid var(--sd-border);
      border-radius: 18px;
      padding: 13px 20px;
      box-shadow: 0 8px 24px rgba(21, 61, 90, 0.05);
      width: 100%;
      max-width: 500px;
    }

    :where(html[data-page="about"]) .sd-proof-item {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
    }

    :where(html[data-page="about"]) .sd-proof-icon-box {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: var(--sd-blue-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .sd-proof-icon-box.green {
      background: var(--sd-green-soft);
    }

    :where(html[data-page="about"]) .sd-proof-text {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .sd-proof-val {
      font-size: 18px;
      font-weight: 900;
      color: var(--sd-navy);
      line-height: 1.1;
    }

    :where(html[data-page="about"]) .sd-proof-lbl {
      font-size: 10.5px;
      font-weight: 700;
      color: var(--sd-muted-text);
      line-height: 1.2;
    }

    :where(html[data-page="about"]) .sd-proof-divider {
      width: 1px;
      height: 30px;
      background: var(--sd-border);
    }

    /* ==========================================================================
   RIGHT HERO COLUMN: MULTI-INDUSTRY GROWTH ECOSYSTEM CONSTELLATION
   ========================================================================== */
    :where(html[data-page="about"]) .sd-hero-right {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-height: 640px;
    }

    /* Handwritten Common Helper */
    :where(html[data-page="about"]) .sd-hw-line {
      display: block;
    }

    /* Handwritten Annotation (Top-Right): Different Businesses Bigger Possibilities. */
    :where(html[data-page="about"]) .sd-handwritten-top-right {
      position: absolute;
      top: -32px;
      right: 28px;
      font-family: var(--font-script);
      font-size: 26px;
      font-weight: 700;
      color: #102A43;
      line-height: 1.08;
      text-align: right;
      transform: rotate(-7deg);
      z-index: 45;
      pointer-events: none;
      user-select: none;
    }

    :where(html[data-page="about"]) .sd-handwritten-top-right .sd-hw-yellow-underline {
      display: block;
      margin-top: 1px;
      margin-left: auto;
      transform: rotate(-1deg);
    }

    /* Handwritten Annotation (Left-Center): Industry Specific Strategies */
    :where(html[data-page="about"]) .sd-handwritten-left {
      position: absolute;
      left: -32px;
      top: 36%;
      font-family: var(--font-script);
      font-size: 25px;
      font-weight: 700;
      color: #102A43;
      line-height: 1.05;
      text-align: left;
      transform: rotate(-12deg);
      z-index: 45;
      pointer-events: none;
      user-select: none;
    }

    :where(html[data-page="about"]) .sd-handwritten-left .sd-hw-strategies {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    :where(html[data-page="about"]) .sd-handwritten-left .sd-hw-blue-pointer {
      display: inline-block;
      vertical-align: middle;
      transform: translateY(-1px);
    }

    /* Handwritten Annotation (Bottom-Right): Same Growth Principles. Different Journey. */
    :where(html[data-page="about"]) .sd-handwritten-bottom-right {
      position: absolute;
      bottom: -32px;
      right: 20px;
      font-family: var(--font-script);
      font-size: 26px;
      font-weight: 700;
      color: #102A43;
      line-height: 1.08;
      text-align: right;
      transform: rotate(-5deg);
      z-index: 45;
      pointer-events: none;
      user-select: none;
    }

    :where(html[data-page="about"]) .sd-handwritten-bottom-right .sd-hw-yellow-underline {
      display: block;
      margin-top: 1px;
      margin-left: auto;
      transform: rotate(-1deg);
    }

    /* Ecosystem Orbit Constellation Container */
    :where(html[data-page="about"]) .sd-ecosystem-stage {
      position: relative;
      width: 100%;
      max-width: 780px;
      height: 660px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border-radius: 28px;
      overflow: visible;
      box-sizing: border-box;
    }

    /* Ambient Center Glow & Subtle Organic Haze */
    :where(html[data-page="about"]) .sd-eco-ambient-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 480px;
      height: 480px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(214, 238, 250, 0.45) 55%, transparent 80%);
      filter: blur(40px);
      pointer-events: none;
      z-index: 1;
    }

    :where(html[data-page="about"]) .sd-eco-haze-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      pointer-events: none;
      z-index: 1;
    }

    :where(html[data-page="about"]) .sd-haze-1 {
      width: 240px;
      height: 240px;
      top: -20px;
      left: -20px;
      background: rgba(103, 174, 239, 0.18);
    }

    :where(html[data-page="about"]) .sd-haze-2 {
      width: 260px;
      height: 260px;
      bottom: -30px;
      right: -30px;
      background: rgba(57, 197, 138, 0.15);
    }

    /* Orbital Vector System (Dotted Rings & Radial Connectors) */
    :where(html[data-page="about"]) .sd-orbit-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
    }

    :where(html[data-page="about"]) .sd-orbit-ring {
      fill: none;
      stroke: #CDE3F3;
      transition: stroke 0.3s ease;
    }

    :where(html[data-page="about"]) .sd-orbit-inner {
      stroke-width: 1.5px;
      stroke-dasharray: 4 6;
      opacity: 0.85;
    }

    :where(html[data-page="about"]) .sd-orbit-outer {
      stroke-width: 1.5px;
      stroke-dasharray: 4 7;
      opacity: 0.65;
    }

    :where(html[data-page="about"]) .sd-connector-line {
      stroke: #B5D4E8;
      stroke-width: 1.5px;
      stroke-dasharray: 3 6;
      opacity: 0.75;
      transition: stroke 0.3s ease, stroke-width 0.3s ease, opacity 0.3s ease;
    }

    :where(html[data-page="about"]) .sd-orbit-dot {
      fill: #1489E3;
      opacity: 0.85;
      transition: all 0.3s ease;
    }

    :where(html[data-page="about"]) .sd-connector-line.is-active,:where(html[data-page="about"]) 
    .sd-connector-line:hover {
      stroke-width: 2px;
      stroke-dasharray: none;
      opacity: 1;
    }

    :where(html[data-page="about"]) .sd-connector-line[data-industry="healthcare"].is-active {
      stroke: #F59E0B;
    }

    :where(html[data-page="about"]) .sd-connector-line[data-industry="education"].is-active {
      stroke: #20B874;
    }

    :where(html[data-page="about"]) .sd-connector-line[data-industry="realestate"].is-active {
      stroke: #1489E3;
    }

    :where(html[data-page="about"]) .sd-connector-line[data-industry="ecommerce"].is-active {
      stroke: #F59E0B;
    }

    :where(html[data-page="about"]) .sd-connector-line[data-industry="beauty"].is-active {
      stroke: #F43F5E;
    }

    :where(html[data-page="about"]) .sd-connector-line[data-industry="manufacturing"].is-active {
      stroke: #9333EA;
    }

    :where(html[data-page="about"]) .sd-connector-line[data-industry="finance"].is-active {
      stroke: #20B874;
    }

    :where(html[data-page="about"]) .sd-connector-line[data-industry="profservices"].is-active {
      stroke: #7B61D9;
    }

    /* Hand-Drawn Green Accent Arrow Pointing into Central Growth Engine */
    :where(html[data-page="about"]) .sd-green-engine-arrow {
      position: absolute;
      top: 54%;
      left: 44%;
      transform: translate(-100%, -50%);
      pointer-events: none;
      z-index: 25;
    }

    /* Central Strategic Growth Engine Anchor */
    :where(html[data-page="about"]) .sd-center-engine {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 176px;
      height: 176px;
      border-radius: 50%;
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :where(html[data-page="about"]) .sd-engine-outer-ring {
      position: absolute;
      inset: -10px;
      border-radius: 50%;
      border: 1.5px dashed rgba(148, 201, 230, 0.6);
      pointer-events: none;
      transition: all 0.35s ease;
    }

    :where(html[data-page="about"]) .sd-center-engine.has-active-child .sd-engine-outer-ring {
      border-color: rgba(20, 137, 227, 0.8);
      box-shadow: 0 0 24px rgba(20, 137, 227, 0.25);
    }

    :where(html[data-page="about"]) .sd-engine-inner {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #FFFFFF;
      border: 1px solid #DCEAF2;
      box-shadow: 0 14px 34px rgba(22, 74, 105, 0.12), 0 30px 70px rgba(22, 74, 105, 0.08);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 16px;
      position: relative;
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
    }

    :where(html[data-page="about"]) .sd-center-engine:hover .sd-engine-inner {
      transform: scale(1.04);
      box-shadow: 0 18px 44px rgba(22, 74, 105, 0.16), 0 35px 80px rgba(22, 74, 105, 0.10);
    }

    /* 3 Clean Ascending Growth Bars Glyphs */
    :where(html[data-page="about"]) .sd-engine-bars-glyph {
      display: flex;
      align-items: flex-end;
      gap: 4px;
      height: 22px;
      margin-bottom: 6px;
    }

    :where(html[data-page="about"]) .sd-eb-bar {
      width: 5px;
      border-radius: 3px;
      background: #1489E3;
    }

    :where(html[data-page="about"]) .sd-eb-bar.eb1 {
      height: 10px;
      background: #1489E3;
      opacity: 0.85;
    }

    :where(html[data-page="about"]) .sd-eb-bar.eb2 {
      height: 16px;
      background: #1489E3;
    }

    :where(html[data-page="about"]) .sd-eb-bar.eb3 {
      height: 22px;
      background: #1489E3;
    }

    :where(html[data-page="about"]) .sd-engine-brand {
      font-size: 11.5px;
      font-weight: 700;
      color: #526E86;
      line-height: 1.1;
      margin-bottom: 2px;
    }

    :where(html[data-page="about"]) .sd-engine-title {
      font-size: 20px;
      font-weight: 800;
      color: #102A43;
      line-height: 1.08;
    }

    /* ==========================================================================
   INDUSTRY CONSTELLATION CARDS (PHYSICAL FLOATING NODES)
   ========================================================================== */
    :where(html[data-page="about"]) .sd-eco-card {
      position: absolute;
      width: 176px;
      height: 140px;
      border-radius: 20px;
      background: #FFFFFF;
      border: 3.5px solid #FFFFFF;
      box-shadow: 0 14px 34px rgba(21, 67, 96, 0.12);
      overflow: visible;
      cursor: pointer;
      outline: none;
      transform-style: preserve-3d;
      transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        z-index 0.01s ease,
        border-color 0.25s ease;
      will-change: transform, box-shadow;
    }

    /* Desktop Constellation Hover State */
    :where(html[data-page="about"]) .sd-ecosystem-stage:not(.sd-circle-gallery-active) .sd-eco-card:hover,:where(html[data-page="about"]) 
    .sd-ecosystem-stage:not(.sd-circle-gallery-active) .sd-eco-card:focus-visible {
      z-index: 50 !important;
      transform: perspective(1000px) translateY(-6px) scale(1.03) !important;
      box-shadow: 0 24px 48px rgba(20, 66, 94, 0.18) !important;
    }

    /* 3D Circle Gallery (Mobile/Touch) Non-Destructive Hover State */
    :where(html[data-page="about"]) .sd-circle-gallery-active .sd-eco-card:hover,:where(html[data-page="about"]) 
    .sd-circle-gallery-active .sd-eco-card:focus-visible {
      border-color: #1489E3 !important;
      box-shadow: 0 16px 36px rgba(20, 137, 227, 0.32) !important;
    }

    :where(html[data-page="about"]) .sd-circle-gallery-active .sd-eco-card:hover .sd-eco-img {
      transform: scale(1.06);
    }

    :where(html[data-page="about"]) .sd-eco-card:focus-visible {
      outline: 2px solid #1489E3;
      outline-offset: 3px;
    }

    /* Card Image Box & Shimmer Skeleton Loader */
    :where(html[data-page="about"]) .sd-card-img-box {
      position: absolute;
      inset: 0;
      border-radius: 17px;
      overflow: hidden;
      background: #E9F3F8;
    }

    :where(html[data-page="about"]) .sd-img-skeleton {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #E9F3F8 0%, #F5FAFD 50%, #E9F3F8 100%);
      background-size: 200% 100%;
      animation: page-about-sdShimmer 1.8s infinite;
      z-index: 1;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    @keyframes page-about-sdShimmer {
      0% {
        background-position: 200% 0;
      }

      100% {
        background-position: -200% 0;
      }
    }

    :where(html[data-page="about"]) .sd-eco-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: saturate(0.98);
      display: block;
      position: relative;
      z-index: 2;
      transition: transform 0.4s ease;
    }

    :where(html[data-page="about"]) .sd-eco-card:hover .sd-eco-img {
      transform: scale(1.05);
    }

    :where(html[data-page="about"]) .sd-img-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 35%, rgba(10, 35, 56, 0.22) 100%);
      z-index: 3;
      pointer-events: none;
    }

    /* Attached Translucent Label Component */
    :where(html[data-page="about"]) .sd-eco-tag {
      position: absolute;
      bottom: -14px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 14px);
      min-height: 46px;
      padding: 5px 8px;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 14px;
      box-shadow: 0 8px 22px rgba(18, 63, 91, 0.10);
      border: 1px solid rgba(224, 234, 241, 0.95);
      display: flex;
      align-items: center;
      gap: 7px;
      z-index: 10;
      pointer-events: none;
      box-sizing: border-box;
    }

    :where(html[data-page="about"]) .sd-eco-tag-icon {
      width: 26px;
      height: 26px;
      border-radius: 7px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .sd-eco-tag-info {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    :where(html[data-page="about"]) .sd-eco-tag-name {
      font-size: 12.5px;
      font-weight: 800;
      color: #102A43;
      line-height: 1.15;
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .sd-eco-tag-sub {
      font-size: 9.5px;
      font-weight: 600;
      color: #72879C;
      line-height: 1.15;
      white-space: nowrap;
    }

    /* ==========================================================================
   INDUSTRY QUICK-VIEW INFO POPUP MODAL
   Appears when user clicks any industry card in Constellation / 3D Circle
   ========================================================================== */
    :where(html[data-page="about"]) .sd-ind-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(10, 31, 53, 0.65);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      box-sizing: border-box;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s;
    }

    :where(html[data-page="about"]) .sd-ind-modal-backdrop.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    :where(html[data-page="about"]) .sd-ind-modal-card {
      position: relative;
      width: 100%;
      max-width: 540px;
      max-height: 90vh;
      overflow-y: auto;
      overflow-x: hidden;
      background: #FFFFFF;
      border: 1px solid #DCEAF2;
      border-radius: 24px;
      box-shadow: 0 24px 60px rgba(16, 42, 67, 0.26), 0 4px 16px rgba(16, 42, 67, 0.08);
      padding: 24px;
      box-sizing: border-box;
      transform: translateY(18px) scale(0.95);
      transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
      outline: none;
    }

    :where(html[data-page="about"]) .sd-ind-modal-backdrop.is-open .sd-ind-modal-card {
      transform: translateY(0) scale(1);
    }

    :where(html[data-page="about"]) .sd-ind-modal-close {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #F0F5F9;
      border: 1px solid #DCEAF2;
      color: #102A43;
      display: grid;
      place-items: center;
      cursor: pointer;
      outline: none;
      z-index: 10;
      transition: all 0.2s ease;
    }

    :where(html[data-page="about"]) .sd-ind-modal-close:hover {
      background: #1489E3;
      color: #FFFFFF;
      border-color: #1489E3;
      transform: rotate(90deg) scale(1.06);
    }

    :where(html[data-page="about"]) .sd-ind-modal-header {
      margin-bottom: 16px;
      padding-right: 36px;
    }

    :where(html[data-page="about"]) .sd-ind-modal-badge-row {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 8px;
    }

    :where(html[data-page="about"]) .sd-ind-modal-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #1489E3;
      box-shadow: 0 0 8px currentColor;
    }

    :where(html[data-page="about"]) .sd-ind-modal-eyebrow {
      font-size: 11px;
      font-weight: 800;
      color: #1489E3;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    :where(html[data-page="about"]) .sd-ind-modal-tag {
      font-size: 10px;
      font-weight: 700;
      background: #E8F4FC;
      color: #1489E3;
      padding: 2px 8px;
      border-radius: 9999px;
      border: 1px solid #D1E9FA;
    }

    :where(html[data-page="about"]) .sd-ind-modal-title {
      font-size: 22px;
      font-weight: 900;
      color: #102A43;
      margin: 0 0 4px 0;
      line-height: 1.25;
      letter-spacing: -0.02em;
    }

    :where(html[data-page="about"]) .sd-ind-modal-sub {
      font-size: 13.5px;
      font-weight: 600;
      color: #5B7083;
      margin: 0;
      line-height: 1.4;
    }

    :where(html[data-page="about"]) .sd-ind-modal-hero-img-box {
      position: relative;
      width: 100%;
      height: 160px;
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 16px;
      background: #E9F3F8;
    }

    :where(html[data-page="about"]) .sd-ind-modal-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    :where(html[data-page="about"]) .sd-ind-modal-img-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(16, 42, 67, 0.75) 0%, transparent 60%);
    }

    :where(html[data-page="about"]) .sd-ind-modal-stat-pill {
      position: absolute;
      bottom: 12px;
      left: 12px;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 12px;
      padding: 6px 14px;
      display: flex;
      align-items: baseline;
      gap: 6px;
      box-shadow: 0 6px 18px rgba(16, 42, 67, 0.18);
    }

    :where(html[data-page="about"]) .sd-ind-modal-stat-val {
      font-size: 17px;
      font-weight: 900;
      color: #20B874;
    }

    :where(html[data-page="about"]) .sd-ind-modal-stat-lbl {
      font-size: 11px;
      font-weight: 700;
      color: #102A43;
    }

    :where(html[data-page="about"]) .sd-ind-modal-desc {
      font-size: 14px;
      line-height: 1.6;
      color: #334E68;
      margin: 0 0 16px 0;
    }

    :where(html[data-page="about"]) .sd-ind-modal-metrics-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 18px;
    }

    :where(html[data-page="about"]) .sd-ind-metric-card {
      background: #F7FAFC;
      border: 1px solid #E2ECF3;
      border-radius: 14px;
      padding: 10px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    :where(html[data-page="about"]) .sd-ind-metric-val {
      font-size: 18px;
      font-weight: 900;
      color: #102A43;
      line-height: 1.2;
    }

    :where(html[data-page="about"]) .sd-ind-metric-lbl {
      font-size: 10px;
      font-weight: 700;
      color: #72879C;
      line-height: 1.3;
      margin-top: 2px;
    }

    :where(html[data-page="about"]) .sd-ind-modal-pillars {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-bottom: 22px;
    }

    :where(html[data-page="about"]) .sd-ind-pillar-pill {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #FFFFFF;
      border: 1px solid #E0EBF2;
      border-radius: 10px;
      padding: 7px 10px;
    }

    :where(html[data-page="about"]) .sd-ind-pillar-num {
      font-size: 10px;
      font-weight: 900;
      color: #1489E3;
      background: #E8F4FC;
      width: 20px;
      height: 20px;
      border-radius: 6px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .sd-ind-pillar-info {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    :where(html[data-page="about"]) .sd-ind-pillar-title {
      font-size: 11.5px;
      font-weight: 800;
      color: #102A43;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    :where(html[data-page="about"]) .sd-ind-pillar-desc {
      font-size: 9.5px;
      color: #72879C;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    :where(html[data-page="about"]) .sd-ind-modal-footer {
      display: flex;
      gap: 10px;
    }

    :where(html[data-page="about"]) .sd-ind-modal-btn-primary {
      flex: 1.3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #1489E3;
      color: #FFFFFF;
      font-size: 13.5px;
      font-weight: 800;
      padding: 12px 18px;
      border-radius: 9999px;
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(20, 137, 227, 0.28);
      outline: none;
      transition: all 0.2s ease;
    }

    :where(html[data-page="about"]) .sd-ind-modal-btn-primary:hover {
      background: #0E72C2;
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(20, 137, 227, 0.38);
    }

    :where(html[data-page="about"]) .sd-ind-modal-btn-secondary {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #F0F5F9;
      color: #102A43;
      font-size: 13px;
      font-weight: 800;
      padding: 12px 14px;
      border-radius: 9999px;
      border: 1px solid #DCEAF2;
      cursor: pointer;
      outline: none;
      transition: all 0.2s ease;
    }

    :where(html[data-page="about"]) .sd-ind-modal-btn-secondary:hover {
      background: #E1ECF4;
      color: #0B1D2E;
      border-color: #CADFEA;
    }

    @media (max-width: 480px) {
      :where(html[data-page="about"]) .sd-ind-modal-card {
        padding: 18px 16px;
        border-radius: 20px;
      }

      :where(html[data-page="about"]) .sd-ind-modal-title {
        font-size: 19px;
      }

      :where(html[data-page="about"]) .sd-ind-modal-sub {
        font-size: 12px;
      }

      :where(html[data-page="about"]) .sd-ind-modal-hero-img-box {
        height: 130px;
      }

      :where(html[data-page="about"]) .sd-ind-modal-pillars {
        grid-template-columns: 1fr;
      }

      :where(html[data-page="about"]) .sd-ind-modal-footer {
        flex-direction: column;
        gap: 8px;
      }

      :where(html[data-page="about"]) .sd-ind-modal-btn-primary,:where(html[data-page="about"]) 
      .sd-ind-modal-btn-secondary {
        width: 100%;
        padding: 11px 16px;
      }
    }

    /* ==========================================================================
   EXACT 8-NODE CONSTELLATION ANCHORS & EDITORIAL ROTATIONS (DESKTOP)
   ========================================================================== */

    /* ==========================================================================
   REACT BITS PRO: ZERO-STUTTER CIRCLE ORBITAL RING GALLERY (MOBILE/TOUCH)
   Cards positioned in an open circular ring with center engine 100% visible
   ========================================================================== */
    :where(html[data-page="about"]) .sd-ecosystem-stage.sd-circle-gallery-active {
      perspective: 1000px;
      perspective-origin: 50% 50%;
      transform-style: preserve-3d;
      touch-action: pan-y pinch-zoom;
      user-select: none;
      -webkit-user-select: none;
      cursor: grab;
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="about"]) .sd-ecosystem-stage.sd-circle-gallery-active:active,:where(html[data-page="about"]) 
    .sd-ecosystem-stage.sd-circle-gallery-active.is-dragging {
      cursor: grabbing;
    }

    :where(html[data-page="about"]) .sd-circle-gallery-active .sd-center-engine {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      z-index: 20 !important;
      pointer-events: auto !important;
    }

    :where(html[data-page="about"]) .sd-circle-gallery-active .sd-eco-card {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      right: auto !important;
      bottom: auto !important;
      margin: 0 !important;
      display: block !important;
      width: 98px !important;
      height: 126px !important;
      border-radius: 14px !important;
      transform-origin: center center !important;
      transform-style: preserve-3d !important;
      pointer-events: auto !important;
      will-change: transform, box-shadow !important;
      transition: none !important;
      /* CRITICAL: Prevents CSS transition stuttering during requestAnimationFrame */
    }

    :where(html[data-page="about"]) .sd-circle-gallery-active .sd-eco-card .sd-card-img-box {
      border-radius: 12px;
    }

    :where(html[data-page="about"]) .sd-circle-gallery-active .sd-eco-card .sd-eco-tag {
      min-height: 32px;
      padding: 3px 6px;
      bottom: -8px;
      border-radius: 10px;
      gap: 5px;
      width: calc(100% - 8px);
    }

    :where(html[data-page="about"]) .sd-circle-gallery-active .sd-eco-card .sd-eco-tag-icon {
      width: 18px;
      height: 18px;
      border-radius: 5px;
    }

    :where(html[data-page="about"]) .sd-circle-gallery-active .sd-eco-card .sd-eco-tag-name {
      font-size: 10.5px;
      font-weight: 800;
    }

    :where(html[data-page="about"]) .sd-circle-gallery-active .sd-eco-card .sd-eco-tag-sub {
      font-size: 8px;
    }

    /* Dynamic SVG Ray Connector */
    :where(html[data-page="about"]) .sd-dynamic-beam {
      stroke: #1489E3;
      stroke-width: 2.5px;
      stroke-dasharray: 4 4;
      opacity: 0.9;
      filter: drop-shadow(0 0 6px rgba(20, 137, 227, 0.45));
      transition: stroke 0.3s ease;
      pointer-events: none;
    }

    /* Circle Gallery Mobile HUD Overlay */
    :where(html[data-page="about"]) .sd-cg-hud {
      position: absolute;
      bottom: 8px;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      z-index: 45;
      pointer-events: none;
    }

    :where(html[data-page="about"]) .sd-cg-hint {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      background: rgba(16, 42, 67, 0.88);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: #FFFFFF;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
      border-radius: 9999px;
      box-shadow: 0 4px 14px rgba(16, 42, 67, 0.20);
      pointer-events: auto;
      transition: opacity 0.3s ease;
      animation: page-about-sdCgHintGlow 3s infinite ease-in-out;
    }

    :where(html[data-page="about"]) .sd-cg-hint-hand {
      display: inline-flex;
      align-items: center;
      color: #FBAE17;
    }

    @keyframes page-about-sdCgHintGlow {

      0%,
      100% {
        box-shadow: 0 4px 14px rgba(16, 42, 67, 0.20);
        transform: translateY(0);
      }

      50% {
        box-shadow: 0 6px 18px rgba(20, 137, 227, 0.40);
        transform: translateY(-2px);
      }
    }

    :where(html[data-page="about"]) .sd-cg-controls-row {
      display: flex;
      align-items: center;
      gap: 8px;
      pointer-events: auto;
    }

    :where(html[data-page="about"]) .sd-cg-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #FFFFFF;
      border: 1.5px solid #DCEAF2;
      color: #102A43;
      display: grid;
      place-items: center;
      box-shadow: 0 4px 12px rgba(21, 67, 96, 0.12);
      cursor: pointer;
      outline: none;
      transition: transform 0.18s ease, background 0.18s ease;
    }

    :where(html[data-page="about"]) .sd-cg-btn:hover {
      background: #1489E3;
      color: #FFFFFF;
      border-color: #1489E3;
      transform: scale(1.08);
      box-shadow: 0 6px 16px rgba(20, 137, 227, 0.30);
    }

    :where(html[data-page="about"]) .sd-cg-btn:active {
      transform: scale(0.92);
    }

    :where(html[data-page="about"]) .sd-cg-active-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1.5px solid #DCEAF2;
      border-radius: 9999px;
      box-shadow: 0 4px 14px rgba(21, 67, 96, 0.10);
      font-size: 11.5px;
      font-weight: 800;
      color: #102A43;
      min-width: 135px;
      justify-content: center;
    }

    :where(html[data-page="about"]) .sd-cg-pill-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #20B874;
      transition: background 0.3s ease;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .sd-cg-pill-name {
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .sd-cg-pill-count {
      font-size: 10px;
      font-weight: 700;
      color: #72879C;
      margin-left: 2px;
    }

    :where(html[data-page="about"]) .sd-cg-dots-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      pointer-events: auto;
    }

    :where(html[data-page="about"]) .sd-cg-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #CDE3F3;
      border: none;
      padding: 0;
      cursor: pointer;
      outline: none;
      transition: width 0.25s ease, background 0.25s ease;
    }

    :where(html[data-page="about"]) .sd-cg-dot:hover {
      background: #94C9E6;
      transform: scale(1.2);
    }

    :where(html[data-page="about"]) .sd-cg-dot.active {
      width: 18px;
      border-radius: 4px;
      background: #1489E3;
    }

    /* 1. Healthcare (Top-Left) */
    :where(html[data-page="about"]) .sd-eco-pos-healthcare {
      left: 3%;
      top: 7%;
      transform: perspective(1000px) rotate(-5deg);
      z-index: 8;
    }

    /* 2. Education (Top-Center) */
    :where(html[data-page="about"]) .sd-eco-pos-education {
      left: 36%;
      top: 1.5%;
      transform: perspective(1000px) rotate(1deg);
      z-index: 8;
    }

    /* 3. Real Estate (Top-Right) */
    :where(html[data-page="about"]) .sd-eco-pos-realestate {
      right: 3%;
      top: 7%;
      transform: perspective(1000px) rotate(5deg);
      z-index: 8;
    }

    /* 4. E-Commerce (Middle-Left) */
    :where(html[data-page="about"]) .sd-eco-pos-ecommerce {
      left: 1%;
      top: 43%;
      transform: perspective(1000px) rotate(-3deg);
      z-index: 12;
    }

    /* 5. Beauty & Wellness (Middle-Right) */
    :where(html[data-page="about"]) .sd-eco-pos-beauty {
      right: 1%;
      top: 43%;
      transform: perspective(1000px) rotate(3deg);
      z-index: 12;
    }

    /* 6. Manufacturing (Bottom-Left) */
    :where(html[data-page="about"]) .sd-eco-pos-manufacturing {
      left: 6%;
      bottom: 3.5%;
      transform: perspective(1000px) rotate(-2deg);
      z-index: 15;
    }

    /* 7. Finance & BFSI (Bottom-Center) */
    :where(html[data-page="about"]) .sd-eco-pos-finance {
      left: 36%;
      bottom: 2%;
      transform: perspective(1000px) rotate(1deg);
      z-index: 15;
    }

    /* 8. Professional Services (Bottom-Right) */
    :where(html[data-page="about"]) .sd-eco-pos-profservices {
      right: 6%;
      bottom: 3.5%;
      transform: perspective(1000px) rotate(3deg);
      z-index: 15;
    }

    /* Editorial Handwritten Annotation System */
    :where(html[data-page="about"]) .sd-annotation-orbit {
      position: absolute;
      right: 1.5%;
      bottom: 1.5%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
      pointer-events: none;
      z-index: 6;
    }

    :where(html[data-page="about"]) .sd-annotation-text {
      font-family: var(--font-script);
      font-size: 19px;
      font-weight: 700;
      color: #18334E;
      line-height: 1.1;
      text-align: right;
      transform: rotate(-3deg);
    }

    :where(html[data-page="about"]) .sd-annotation-text span {
      border-bottom: 2px solid #FFB91F;
    }

    :where(html[data-page="about"]) .sd-annotation-arrow {
      flex-shrink: 0;
      margin-right: 12px;
    }

    /* Mobile Secondary Industry Rail (Hidden on desktop, active on mobile) */
    :where(html[data-page="about"]) .sd-mobile-secondary-rail {
      display: none;
      width: 100%;
      margin-top: 16px;
      flex-direction: column;
      gap: 8px;
    }

    :where(html[data-page="about"]) .sd-mobile-rail-label {
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--sd-muted-text);
      padding-left: 4px;
    }

    :where(html[data-page="about"]) .sd-mobile-rail-scroll {
      display: flex;
      align-items: center;
      gap: 10px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      padding: 4px 2px;
    }

    :where(html[data-page="about"]) .sd-mobile-rail-scroll::-webkit-scrollbar {
      display: none;
    }

    :where(html[data-page="about"]) .sd-mobile-rail-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: #FFFFFF;
      border: 1px solid #E1EAF0;
      border-radius: 16px;
      box-shadow: 0 4px 14px rgba(18, 40, 67, 0.05);
      font-size: 13px;
      font-weight: 800;
      color: var(--sd-navy);
      white-space: nowrap;
      flex-shrink: 0;
      scroll-snap-align: start;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    :where(html[data-page="about"]) .sd-mobile-rail-chip:hover,:where(html[data-page="about"]) 
    .sd-mobile-rail-chip:active {
      background: #F4FAFD;
      border-color: var(--sd-blue);
      transform: translateY(-1px);
    }

    :where(html[data-page="about"]) .sd-rail-chip-icon {
      font-size: 15px;
    }

    /* ==========================================================================
   INDUSTRY SELECTOR / FILTER RAIL (PIXEL PERFECT TO REFERENCE)
   ========================================================================== */
    :where(html[data-page="about"]) .sd-filter-section {
      position: sticky;
      top: 76px;
      z-index: 900;
      padding: 18px 0 10px;
      background: transparent;
      pointer-events: none;
    }

    :where(html[data-page="about"]) .sd-filter-wrapper {
      pointer-events: auto;
      position: relative;
      max-width: 1280px;
      margin: 0 auto;
      display: flex;
      align-items: center;
    }

    :where(html[data-page="about"]) .sd-filter-container {
      width: 100%;
      background: #FFFFFF;
      border: 1px solid #E1EAF0;
      border-radius: 9999px;
      box-shadow: 0 10px 30px rgba(18, 43, 73, 0.06);
      padding: 6px 8px;
      display: flex;
      align-items: center;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: none;
      scroll-behavior: smooth;
    }

    :where(html[data-page="about"]) .sd-filter-container::-webkit-scrollbar {
      display: none;
    }

    :where(html[data-page="about"]) .sd-filter-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 16px;
      border-radius: 9999px;
      font-size: 13.5px;
      font-weight: 700;
      color: #4A637C;
      background: transparent;
      border: 1px solid transparent;
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
      flex-shrink: 0;
      cursor: pointer;
    }

    :where(html[data-page="about"]) .sd-filter-btn:hover {
      color: #102A43;
      background: #F4FAFD;
    }

    :where(html[data-page="about"]) .sd-filter-btn.active {
      background: #0E2338;
      color: #FFFFFF;
      box-shadow: 0 4px 14px rgba(14, 35, 56, 0.22);
    }

    :where(html[data-page="about"]) .sd-filter-btn.active .sd-filter-icon {
      color: #FFFFFF;
    }

    :where(html[data-page="about"]) .sd-filter-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .sd-icon-healthcare {
      color: #1489E3;
    }

    :where(html[data-page="about"]) .sd-icon-education {
      color: #1489E3;
    }

    :where(html[data-page="about"]) .sd-icon-realestate {
      color: #1489E3;
    }

    :where(html[data-page="about"]) .sd-icon-ecommerce {
      color: #F59E0B;
    }

    :where(html[data-page="about"]) .sd-icon-beauty {
      color: #F43F5E;
    }

    :where(html[data-page="about"]) .sd-icon-manufacturing {
      color: #1489E3;
    }

    :where(html[data-page="about"]) .sd-icon-finance {
      color: #1489E3;
    }

    :where(html[data-page="about"]) .sd-icon-profservices {
      color: #9333EA;
    }

    :where(html[data-page="about"]) .sd-filter-scroll-btn {
      position: absolute;
      right: 6px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #FFFFFF;
      border: 1px solid #E1EAF0;
      box-shadow: 0 4px 12px rgba(18, 43, 73, 0.10);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #4A637C;
      cursor: pointer;
      transition: all 0.2s ease;
      z-index: 10;
    }

    :where(html[data-page="about"]) .sd-filter-scroll-btn:hover {
      color: #102A43;
      background: #F4FAFD;
      transform: scale(1.06);
    }

    /* ==========================================================================
   INDUSTRY SPOTLIGHT & PLAYBOOK SECTION (PIXEL-PERFECT)
   ========================================================================== */
    :where(html[data-page="about"]) .sd-spotlight-section {
      padding: 40px 0 80px;
      background: #F8FCFE;
      position: relative;
    }

    :where(html[data-page="about"]) .sd-spotlight-stage {
      display: grid;
      grid-template-columns: minmax(320px, 0.95fr) minmax(380px, 1.15fr) minmax(280px, 0.85fr);
      gap: 32px;
      align-items: stretch;
    }

    /* Left: Spotlight Content Column */
    :where(html[data-page="about"]) .sd-spotlight-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: 10px 0;
    }

    :where(html[data-page="about"]) .sd-spotlight-left .sd-eyebrow-capsule {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.12em;
      color: #4A637C;
      margin-bottom: 14px;
    }

    :where(html[data-page="about"]) .sd-spotlight-left .sd-eyebrow-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #20B874;
    }

    :where(html[data-page="about"]) .sd-spotlight-title {
      font-size: 54px;
      font-weight: 900;
      color: #102A43;
      line-height: 1.04;
      letter-spacing: -0.04em;
      margin-bottom: 12px;
    }

    :where(html[data-page="about"]) .sd-spotlight-sub {
      font-size: 19px;
      font-weight: 800;
      color: #102A43;
      line-height: 1.28;
      margin-bottom: 16px;
    }

    :where(html[data-page="about"]) .sd-spotlight-desc {
      font-size: 15.5px;
      color: #526E86;
      line-height: 1.65;
      margin-bottom: 26px;
      max-width: 440px;
    }

    :where(html[data-page="about"]) .sd-btn-pill-yellow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 26px;
      border-radius: 9999px;
      background: #F59E0B;
      color: #102A43;
      font-size: 15px;
      font-weight: 800;
      border: none;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(245, 158, 11, 0.28);
      transition: all 0.25s ease;
    }

    :where(html[data-page="about"]) .sd-btn-pill-yellow:hover {
      background: #FFB91F;
      transform: translateY(-2px);
      box-shadow: 0 12px 26px rgba(245, 158, 11, 0.36);
    }

    :where(html[data-page="about"]) .sd-btn-pill-yellow .sd-btn-arrow {
      font-size: 18px;
      transition: transform 0.2s ease;
    }

    :where(html[data-page="about"]) .sd-btn-pill-yellow:hover .sd-btn-arrow {
      transform: translateX(4px);
    }

    /* Metric Strip: 3 Badges side by side */
    :where(html[data-page="about"]) .sd-spotlight-metrics-row {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 36px;
      width: 100%;
    }

    :where(html[data-page="about"]) .sd-metric-chip {
      display: flex;
      align-items: center;
      gap: 9px;
      background: #FFFFFF;
      border: 1px solid #E1EAF0;
      border-radius: 14px;
      padding: 9px 12px;
      box-shadow: 0 4px 14px rgba(18, 43, 73, 0.04);
    }

    :where(html[data-page="about"]) .sd-metric-chip-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .sd-metric-chip-icon.green {
      background: #E8FAF1;
      color: #20B874;
    }

    :where(html[data-page="about"]) .sd-metric-chip-icon.blue {
      background: #EBF5FD;
      color: #1489E3;
    }

    :where(html[data-page="about"]) .sd-metric-chip-icon.yellow {
      background: #FFF7EB;
      color: #F59E0B;
    }

    :where(html[data-page="about"]) .sd-metric-chip-text {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .sd-metric-chip-val {
      font-size: 16px;
      font-weight: 900;
      color: #102A43;
      line-height: 1.1;
    }

    :where(html[data-page="about"]) .sd-metric-chip-lbl {
      font-size: 10.5px;
      font-weight: 600;
      color: #72879C;
      line-height: 1.15;
      white-space: nowrap;
    }

    /* Center: Arched Feature Visual Container */
    :where(html[data-page="about"]) .sd-spotlight-center {
      position: relative;
      min-height: 490px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :where(html[data-page="about"]) .sd-spotlight-card {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 480px;
      border-radius: 36px 120px 36px 36px;
      overflow: hidden;
      border: 4px solid #FFFFFF;
      box-shadow: 0 24px 60px rgba(16, 42, 67, 0.12);
      background: #EAF3F8;
    }

    :where(html[data-page="about"]) .sd-spotlight-img {
      width: 100%;
      height: 100%;
      min-height: 480px;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    /* Floating Top-Right Solid Blue Project Badge */
    :where(html[data-page="about"]) .sd-floating-actual-project {
      position: absolute;
      top: 20px;
      right: 20px;
      background: #0084FF;
      color: #FFFFFF;
      border-radius: 18px;
      padding: 12px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 14px 32px rgba(0, 132, 255, 0.38);
      border: 1px solid rgba(255, 255, 255, 0.25);
      z-index: 10;
    }

    :where(html[data-page="about"]) .sd-actual-proj-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .sd-actual-proj-info {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .sd-actual-proj-lbl {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      opacity: 0.9;
    }

    :where(html[data-page="about"]) .sd-actual-proj-val {
      font-size: 22px;
      font-weight: 900;
      line-height: 1.05;
    }

    :where(html[data-page="about"]) .sd-actual-proj-sub {
      font-size: 10.5px;
      font-weight: 600;
      opacity: 0.92;
      white-space: nowrap;
    }

    /* Floating Bottom-Right Testimonial Card with 5 Client Avatars */
    :where(html[data-page="about"]) .sd-floating-testimonial-card {
      position: absolute;
      bottom: 16px;
      right: 16px;
      left: auto;
      max-width: 330px;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      padding: 14px 18px;
      box-shadow: 0 16px 40px rgba(16, 42, 67, 0.14);
      z-index: 10;
    }

    :where(html[data-page="about"]) .sd-testi-avatars {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }

    :where(html[data-page="about"]) .sd-testi-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid #FFFFFF;
      margin-left: -6px;
      object-fit: cover;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    :where(html[data-page="about"]) .sd-testi-avatar:first-child {
      margin-left: 0;
    }

    :where(html[data-page="about"]) .sd-testi-quote {
      font-size: 12.5px;
      font-weight: 700;
      color: #102A43;
      line-height: 1.35;
      margin-bottom: 4px;
    }

    :where(html[data-page="about"]) .sd-testi-author {
      font-size: 11px;
      font-weight: 600;
      color: #72879C;
    }

    /* Right: Process Roadmap Panel "How We Help in [Industry]" */
    :where(html[data-page="about"]) .sd-spotlight-right {
      background: #FFFFFF;
      border: 1px solid #E1EAF0;
      border-radius: 24px;
      padding: 26px 24px;
      box-shadow: 0 10px 30px rgba(18, 43, 73, 0.05);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    :where(html[data-page="about"]) .sd-strategy-heading {
      font-size: 18px;
      font-weight: 900;
      color: #102A43;
      margin-bottom: 22px;
      line-height: 1.25;
    }

    :where(html[data-page="about"]) .sd-strategy-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: relative;
      margin-bottom: 22px;
    }

    :where(html[data-page="about"]) .sd-strategy-list::before {
      content: '';
      position: absolute;
      top: 14px;
      bottom: 18px;
      left: 36px;
      width: 1.5px;
      background: #E1EAF0;
      z-index: 1;
    }

    :where(html[data-page="about"]) .sd-strategy-step {
      position: relative;
      display: flex;
      align-items: center;
      gap: 14px;
      z-index: 2;
    }

    :where(html[data-page="about"]) .sd-step-num-col {
      display: flex;
      align-items: center;
      gap: 10px;
      position: relative;
    }

    :where(html[data-page="about"]) .sd-step-num {
      font-size: 13px;
      font-weight: 800;
      color: #4A637C;
      width: 20px;
    }

    :where(html[data-page="about"]) .sd-step-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      border: 2px solid #FFFFFF;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
      flex-shrink: 0;
      z-index: 3;
    }

    :where(html[data-page="about"]) .sd-step-dot.dot-blue {
      background: #1489E3;
    }

    :where(html[data-page="about"]) .sd-step-dot.dot-green {
      background: #20B874;
    }

    :where(html[data-page="about"]) .sd-step-dot.dot-yellow {
      background: #F59E0B;
    }

    :where(html[data-page="about"]) .sd-step-dot.dot-purple {
      background: #7B61D9;
    }

    :where(html[data-page="about"]) .sd-step-icon-box {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .sd-step-icon-box.icon-blue {
      background: #EBF5FD;
    }

    :where(html[data-page="about"]) .sd-step-icon-box.icon-green {
      background: #E8FAF1;
    }

    :where(html[data-page="about"]) .sd-step-icon-box.icon-yellow {
      background: #FFF7EB;
    }

    :where(html[data-page="about"]) .sd-step-icon-box.icon-purple {
      background: #F1EFFD;
    }

    :where(html[data-page="about"]) .sd-step-info {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .sd-step-title {
      font-size: 15px;
      font-weight: 800;
      color: #102A43;
      line-height: 1.2;
    }

    :where(html[data-page="about"]) .sd-step-desc {
      font-size: 12px;
      color: #72879C;
      font-weight: 500;
      margin-top: 2px;
      line-height: 1.3;
    }

    :where(html[data-page="about"]) .sd-strategy-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 800;
      color: #102A43;
      padding-top: 14px;
      border-top: 1px solid #EAEFF4;
      transition: all 0.2s ease;
      cursor: pointer;
      text-decoration: none;
    }

    :where(html[data-page="about"]) .sd-strategy-action:hover {
      color: #1489E3;
    }

    :where(html[data-page="about"]) .sd-strategy-action:hover svg {
      transform: translateX(4px);
    }

    :where(html[data-page="about"]) .sd-strategy-action svg {
      transition: transform 0.2s ease;
    }

    /* ==========================================================================
   GROWTH DIFFERENCE SECTION: CUSTOMER JOURNEYS (CONSTELLATION)
   ========================================================================== */
    :where(html[data-page="about"]) .sd-journeys-section {
      padding: 80px 0 90px;
      background: #FAFCFE;
      border-top: 1px solid #EAEFF4;
      position: relative;
      overflow: hidden;
    }

    /* Header Grid with Left Intro and Right Badge + Note */
    :where(html[data-page="about"]) .sd-journeys-header-grid {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 32px;
      margin-bottom: 24px;
    }

    :where(html[data-page="about"]) .sd-journeys-intro {
      max-width: 620px;
    }

    :where(html[data-page="about"]) .sd-journeys-heading {
      font-size: 46px;
      font-weight: 900;
      color: #102A43;
      line-height: 1.08;
      letter-spacing: -0.035em;
      margin: 12px 0 14px;
    }

    :where(html[data-page="about"]) .sd-journeys-desc {
      font-size: 15px;
      color: #526E86;
      line-height: 1.55;
      margin: 0;
    }

    :where(html[data-page="about"]) .sd-journeys-header-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 16px;
      padding-top: 8px;
    }

    :where(html[data-page="about"]) .sd-journeys-top-badge {
      background: #FFFFFF;
      border: 1.5px solid #E1EAF0;
      border-radius: 16px;
      padding: 9px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 6px 20px rgba(16, 42, 67, 0.05);
    }

    :where(html[data-page="about"]) .sd-top-badge-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: #EFE8FD;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .sd-top-badge-info {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .sd-top-badge-val {
      font-size: 17px;
      font-weight: 900;
      color: #102A43;
      line-height: 1.1;
    }

    :where(html[data-page="about"]) .sd-top-badge-lbl {
      font-size: 11px;
      font-weight: 600;
      color: #72879C;
      line-height: 1.2;
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .sd-journeys-handwritten-top {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      font-family: var(--font-script);
      color: #102A43;
      user-select: none;
      margin-right: 18px;
    }

    :where(html[data-page="about"]) .sd-jhw-text {
      font-size: 26px;
      font-weight: 700;
      line-height: 1.1;
      text-align: right;
      transform: rotate(-3deg);
    }

    :where(html[data-page="about"]) .sd-jhw-text span {
      display: block;
    }

    :where(html[data-page="about"]) .sd-jhw-arrow {
      transform: translateY(10px) rotate(4deg);
      flex-shrink: 0;
    }

    /* Orbit Stage Canvas */
    :where(html[data-page="about"]) .sd-journeys-stage {
      position: relative;
      width: 100%;
      min-height: 740px;
      margin-top: 10px;
    }

    :where(html[data-page="about"]) .sd-journeys-svg-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    /* Central Hub */
    :where(html[data-page="about"]) .sd-journeys-center-hub {
      position: absolute;
      left: 50%;
      top: 220px;
      transform: translate(-50%, -50%);
      z-index: 4;
    }

    :where(html[data-page="about"]) .sd-jhub-outer-glow {
      width: 230px;
      height: 230px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(20, 137, 227, 0.12) 0%, rgba(32, 184, 116, 0.05) 50%, transparent 72%);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    :where(html[data-page="about"]) .sd-jhub-ring {
      width: 180px;
      height: 180px;
      border-radius: 50%;
      border: 1.5px dashed rgba(20, 137, 227, 0.35);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    :where(html[data-page="about"]) .sd-jhub-card {
      width: 154px;
      height: 154px;
      border-radius: 50%;
      background: #FFFFFF;
      border: 1.5px solid #DCEAF2;
      box-shadow: 0 16px 44px rgba(16, 42, 67, 0.12);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 10px;
      position: relative;
      z-index: 2;
    }

    :where(html[data-page="about"]) .sd-jhub-bars {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 18px;
      margin-bottom: 6px;
    }

    :where(html[data-page="about"]) .sd-jhub-bars .jbar-1 {
      width: 3.5px;
      height: 10px;
      background: #20B874;
      border-radius: 2px;
    }

    :where(html[data-page="about"]) .sd-jhub-bars .jbar-2 {
      width: 3.5px;
      height: 14px;
      background: #1489E3;
      border-radius: 2px;
    }

    :where(html[data-page="about"]) .sd-jhub-bars .jbar-3 {
      width: 3.5px;
      height: 18px;
      background: #1489E3;
      border-radius: 2px;
    }

    :where(html[data-page="about"]) .sd-jhub-brand {
      font-size: 8.5px;
      font-weight: 800;
      color: #72879C;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 2px;
    }

    :where(html[data-page="about"]) .sd-jhub-title {
      font-size: 17px;
      font-weight: 900;
      color: #102A43;
      line-height: 1.08;
      margin: 0 0 4px;
    }

    :where(html[data-page="about"]) .sd-jhub-sub {
      font-size: 7.5px;
      font-weight: 700;
      color: #94A3B8;
      letter-spacing: 0.05em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    /* Trajectory Indicator Pills */
    :where(html[data-page="about"]) .sd-trajectory-pill {
      position: absolute;
      background: #FFFFFF;
      border: 1px solid #E1EAF0;
      border-radius: 999px;
      padding: 5px 12px;
      font-size: 11px;
      font-weight: 700;
      color: #102A43;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 4px 12px rgba(16, 42, 67, 0.06);
      z-index: 5;
      user-select: none;
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .sd-trajectory-pill .traj-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .sd-trajectory-pill .traj-dot.dot-blue {
      background: #1489E3;
    }

    :where(html[data-page="about"]) .sd-trajectory-pill .traj-dot.dot-green {
      background: #20B874;
    }

    :where(html[data-page="about"]) .sd-trajectory-pill .traj-dot.dot-orange {
      background: #F59E0B;
    }

    :where(html[data-page="about"]) .sd-trajectory-pill.traj-left {
      left: 31%;
      top: 140px;
      transform: translate(-50%, -50%);
    }

    :where(html[data-page="about"]) .sd-trajectory-pill.traj-right {
      left: 69%;
      top: 140px;
      transform: translate(-50%, -50%);
    }

    :where(html[data-page="about"]) .sd-trajectory-pill.traj-bottom {
      left: 50%;
      top: 360px;
      transform: translate(-50%, -50%);
    }

    /* The 3 Orbit Journey Cards */
    :where(html[data-page="about"]) .sd-jcard {
      position: absolute;
      background: #FFFFFF;
      border-radius: 24px;
      padding: 16px;
      box-shadow: 0 16px 40px rgba(16, 42, 67, 0.08);
      transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
      z-index: 3;
      box-sizing: border-box;
    }

    :where(html[data-page="about"]) .sd-jcard:hover {
      transform: translateY(-5px);
      box-shadow: 0 22px 50px rgba(16, 42, 67, 0.12);
    }

    :where(html[data-page="about"]) .sd-jcard-healthcare {
      left: 0;
      top: 100px;
      width: 390px;
      border: 1.5px solid #DDF0FB;
    }

    :where(html[data-page="about"]) .sd-jcard-education {
      right: 0;
      top: 100px;
      width: 390px;
      border: 1.5px solid #DCF4E7;
    }

    :where(html[data-page="about"]) .sd-jcard-realestate {
      left: 50%;
      top: 420px;
      transform: translateX(-50%);
      width: 430px;
      border: 1.5px solid #FDE8D0;
    }

    :where(html[data-page="about"]) .sd-jcard-realestate:hover {
      transform: translate(-50%, -5px);
    }

    /* Header Media with Sticker Tag */
    :where(html[data-page="about"]) .sd-jcard-header-media {
      position: relative;
      width: 100%;
      height: 124px;
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 14px;
    }

    :where(html[data-page="about"]) .sd-jcard-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }

    :where(html[data-page="about"]) .sd-jcard:hover .sd-jcard-img {
      transform: scale(1.04);
    }

    :where(html[data-page="about"]) .sd-jcard-oval-badge {
      position: absolute;
      right: 10px;
      bottom: 8px;
      border-radius: 999px;
      padding: 3px 12px;
      font-family: var(--font-script);
      font-size: 17px;
      font-weight: 700;
      line-height: 1.05;
      background: #FFFFFF;
      transform: rotate(-3deg);
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
      user-select: none;
    }

    :where(html[data-page="about"]) .sd-jcard-oval-badge.badge-blue {
      color: #1489E3;
      border: 1.5px solid #1489E3;
    }

    :where(html[data-page="about"]) .sd-jcard-oval-badge.badge-green {
      color: #20B874;
      border: 1.5px solid #20B874;
    }

    :where(html[data-page="about"]) .sd-jcard-oval-badge.badge-orange {
      color: #EA580C;
      border: 1.5px solid #EA580C;
    }

    /* Title Row */
    :where(html[data-page="about"]) .sd-jcard-title-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }

    :where(html[data-page="about"]) .sd-jcard-icon {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .sd-jcard-icon.icon-blue {
      background: #E1F1FD;
      color: #1489E3;
    }

    :where(html[data-page="about"]) .sd-jcard-icon.icon-green {
      background: #DCF6E8;
      color: #20B874;
    }

    :where(html[data-page="about"]) .sd-jcard-icon.icon-orange {
      background: #FEF0E1;
      color: #F59E0B;
    }

    :where(html[data-page="about"]) .sd-jcard-title-info {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .sd-jcard-name {
      font-size: 17px;
      font-weight: 900;
      color: #102A43;
      margin: 0 0 2px;
      line-height: 1.15;
    }

    :where(html[data-page="about"]) .sd-jcard-sub {
      font-size: 12px;
      font-weight: 600;
      color: #72879C;
      line-height: 1.2;
    }

    /* 5-Step Process Track */
    :where(html[data-page="about"]) .sd-jcard-track {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      position: relative;
      margin-bottom: 14px;
      padding: 0 2px;
    }

    :where(html[data-page="about"]) .sd-jcard-track-line {
      position: absolute;
      top: 13px;
      left: 14px;
      right: 14px;
      height: 1.5px;
      background: repeating-linear-gradient(90deg, #CBD5E1 0, #CBD5E1 4px, transparent 4px, transparent 8px);
      z-index: 1;
    }

    :where(html[data-page="about"]) .sd-jtrack-step {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 5px;
      width: 46px;
    }

    :where(html[data-page="about"]) .sd-jstep-dot {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #F8FAFC;
      border: 1.5px solid #CBD5E1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #64748B;
      transition: all 0.2s ease;
    }

    :where(html[data-page="about"]) .sd-jstep-lbl {
      font-size: 10px;
      font-weight: 700;
      color: #102A43;
      line-height: 1.15;
    }

    :where(html[data-page="about"]) .sd-jtrack-step.step-active.active-blue .sd-jstep-dot {
      background: #1489E3;
      border-color: #1489E3;
      color: #FFFFFF;
      box-shadow: 0 0 0 3px rgba(20, 137, 227, 0.25);
    }

    :where(html[data-page="about"]) .sd-jtrack-step.step-active.active-green .sd-jstep-dot {
      background: #20B874;
      border-color: #20B874;
      color: #FFFFFF;
      box-shadow: 0 0 0 3px rgba(32, 184, 116, 0.25);
    }

    :where(html[data-page="about"]) .sd-jtrack-step.step-active.active-orange .sd-jstep-dot {
      background: #F59E0B;
      border-color: #F59E0B;
      color: #FFFFFF;
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
    }

    /* Bottom Metric Bar in Card */
    :where(html[data-page="about"]) .sd-jcard-metric-bar {
      border-radius: 12px;
      padding: 9px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    :where(html[data-page="about"]) .sd-jcard-metric-bar.metric-blue {
      background: #F0F8FE;
      border: 1px solid #D2E9F9;
    }

    :where(html[data-page="about"]) .sd-jcard-metric-bar.metric-green {
      background: #F1FDF6;
      border: 1px solid #C9F3DB;
    }

    :where(html[data-page="about"]) .sd-jcard-metric-bar.metric-orange {
      background: #FFF8F0;
      border: 1px solid #FCDDC2;
    }

    :where(html[data-page="about"]) .sd-jmetric-val {
      font-size: 18px;
      font-weight: 900;
      color: #102A43;
      line-height: 1;
    }

    :where(html[data-page="about"]) .sd-jmetric-lbl {
      font-size: 11.5px;
      font-weight: 600;
      color: #526E86;
      line-height: 1.2;
    }

    /* Bottom Annotations & Action Pill */
    :where(html[data-page="about"]) .sd-journeys-handwritten-bottom {
      position: absolute;
      left: 10px;
      bottom: 24px;
      font-family: var(--font-script);
      color: #102A43;
      user-select: none;
      z-index: 5;
    }

    :where(html[data-page="about"]) .sd-jhw-bottom-text {
      font-size: 24px;
      font-weight: 700;
      line-height: 1.15;
      transform: rotate(-3deg);
    }

    :where(html[data-page="about"]) .sd-jhw-bottom-text span {
      display: block;
    }

    :where(html[data-page="about"]) .sd-jhw-bottom-arc {
      margin-top: 2px;
      transform: rotate(-2deg);
    }

    :where(html[data-page="about"]) .sd-journeys-bottom-pill {
      position: absolute;
      right: 10px;
      bottom: 24px;
      background: #FFFFFF;
      border: 1.5px solid #E1EAF0;
      border-radius: 999px;
      padding: 7px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 6px 20px rgba(16, 42, 67, 0.06);
      cursor: pointer;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      z-index: 5;
    }

    :where(html[data-page="about"]) .sd-journeys-bottom-pill:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(16, 42, 67, 0.1);
    }

    :where(html[data-page="about"]) .sd-jbp-icon {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #FEF3D9;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .sd-jbp-text {
      font-size: 12px;
      font-weight: 700;
      color: #102A43;
    }

    :where(html[data-page="about"]) .sd-jbp-arrow {
      color: #72879C;
      transition: transform 0.2s ease;
    }

    :where(html[data-page="about"]) .sd-journeys-bottom-pill:hover .sd-jbp-arrow {
      transform: translateX(3px);
      color: #1489E3;
    }

    /* Responsive Rules for Journeys Constellation */
    @media (max-width: 1180px) {
      :where(html[data-page="about"]) .sd-journeys-stage {
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 28px;
        padding: 30px 0 80px;
      }

      :where(html[data-page="about"]) .sd-journeys-svg-canvas,:where(html[data-page="about"]) 
      .sd-trajectory-pill {
        display: none;
      }

      :where(html[data-page="about"]) .sd-journeys-center-hub {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin-bottom: 12px;
      }

      :where(html[data-page="about"]) .sd-jcard {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 500px;
      }

      :where(html[data-page="about"]) .sd-journeys-handwritten-bottom {
        position: static;
        margin-top: 10px;
        text-align: center;
      }

      :where(html[data-page="about"]) .sd-journeys-bottom-pill {
        position: static;
        margin-top: 10px;
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="about"]) .sd-journeys-header-grid {
        flex-direction: column;
        align-items: flex-start;
      }

      :where(html[data-page="about"]) .sd-journeys-header-right {
        align-items: flex-start;
      }

      :where(html[data-page="about"]) .sd-journeys-heading {
        font-size: 32px;
      }

      :where(html[data-page="about"]) .sd-jcard-track {
        overflow-x: auto;
        padding-bottom: 6px;
      }
    }

    /* ==========================================================================
   GROWTH FRAMEWORK SECTION (HOW WE DRIVE GROWTH ACROSS INDUSTRIES)
   ========================================================================== */
    :where(html[data-page="about"]) .sd-framework-section {
      padding: 68px 0 76px;
      background: #FFFFFF;
      border-top: 1px solid #EAEFF4;
    }

    /* Header Wrap with Left Eyebrow/Title and Right Handwritten Annotation */
    :where(html[data-page="about"]) .sd-framework-header-wrap {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 28px;
      position: relative;
    }

    :where(html[data-page="about"]) .sd-framework-header-left {
      max-width: 780px;
    }

    :where(html[data-page="about"]) .sd-framework-eyebrow {
      display: inline-block;
      font-size: 13.5px;
      font-weight: 800;
      color: #1489E3;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    :where(html[data-page="about"]) .sd-framework-heading {
      font-size: 42px;
      font-weight: 900;
      color: #102A43;
      line-height: 1.12;
      letter-spacing: -0.035em;
      margin: 0;
    }

    :where(html[data-page="about"]) .sd-framework-header-note {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      font-family: var(--font-script);
      color: #102A43;
      user-select: none;
      margin-bottom: 4px;
    }

    :where(html[data-page="about"]) .sd-fw-note-text {
      font-size: 26px;
      font-weight: 700;
      line-height: 1.1;
      text-align: right;
      transform: rotate(-4deg);
    }

    :where(html[data-page="about"]) .sd-fw-note-text span {
      display: block;
    }

    :where(html[data-page="about"]) .sd-fw-note-arrow {
      transform: translateY(14px) rotate(4deg);
      flex-shrink: 0;
    }

    /* 4 Pastel Framework Cards in a Single Row */
    :where(html[data-page="about"]) .sd-framework-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 22px;
    }

    :where(html[data-page="about"]) .sd-framework-card {
      border-radius: 20px;
      padding: 20px 18px;
      display: flex;
      align-items: center;
      gap: 14px;
      transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
      border: 1.5px solid transparent;
      box-sizing: border-box;
    }

    :where(html[data-page="about"]) .sd-framework-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px rgba(16, 42, 67, 0.07);
    }

    :where(html[data-page="about"]) .sd-framework-card.card-blue {
      background: #F0F8FE;
      border-color: rgba(185, 222, 248, 0.8);
    }

    :where(html[data-page="about"]) .sd-framework-card.card-green {
      background: #F1FDF6;
      border-color: rgba(185, 240, 208, 0.8);
    }

    :where(html[data-page="about"]) .sd-framework-card.card-yellow {
      background: #FEFAF1;
      border-color: rgba(250, 232, 185, 0.8);
    }

    :where(html[data-page="about"]) .sd-framework-card.card-purple {
      background: #F8F5FE;
      border-color: rgba(225, 210, 252, 0.8);
    }

    :where(html[data-page="about"]) .sd-fw-icon-box {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .sd-fw-icon-box.icon-blue {
      background: #DDF1FC;
      border-radius: 50%;
      color: #1489E3;
    }

    :where(html[data-page="about"]) .sd-fw-icon-box.icon-green {
      background: #DCF6E8;
      border-radius: 14px;
      color: #20B874;
    }

    :where(html[data-page="about"]) .sd-fw-icon-box.icon-yellow {
      background: #FEF3D9;
      border-radius: 50%;
      color: #F59E0B;
    }

    :where(html[data-page="about"]) .sd-fw-icon-box.icon-purple {
      background: #EFE8FD;
      border-radius: 14px;
      color: #7B61D9;
    }

    :where(html[data-page="about"]) .sd-fw-card-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    :where(html[data-page="about"]) .sd-fw-title {
      font-size: 15.5px;
      font-weight: 800;
      color: #102A43;
      margin-bottom: 4px;
      line-height: 1.2;
    }

    :where(html[data-page="about"]) .sd-fw-desc {
      font-size: 13px;
      color: #526E86;
      line-height: 1.45;
      margin: 0;
    }

    /* Bottom Integrated Metrics & Slogan Bar */
    :where(html[data-page="about"]) .sd-framework-proof-bar {
      background: #FFFFFF;
      border: 1.5px solid #E1EAF0;
      border-radius: 22px;
      padding: 16px 28px;
      box-shadow: 0 8px 24px rgba(18, 42, 67, 0.04);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    :where(html[data-page="about"]) .sd-fw-stat-item {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    :where(html[data-page="about"]) .sd-fw-stat-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .sd-fw-stat-icon.icon-blue {
      background: #EBF5FD;
      color: #1489E3;
    }

    :where(html[data-page="about"]) .sd-fw-stat-icon.icon-green {
      background: #E8FAF1;
      color: #20B874;
    }

    :where(html[data-page="about"]) .sd-fw-stat-icon.icon-red {
      background: #FDF2F4;
      color: #F43F5E;
    }

    :where(html[data-page="about"]) .sd-fw-stat-text {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .sd-fw-stat-val {
      font-size: 22px;
      font-weight: 900;
      color: #102A43;
      line-height: 1.1;
    }

    :where(html[data-page="about"]) .sd-fw-stat-lbl {
      font-size: 12px;
      font-weight: 600;
      color: #72879C;
      line-height: 1.2;
      margin-top: 2px;
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .sd-fw-proof-divider {
      width: 1px;
      height: 38px;
      background: #E1EAF0;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .sd-fw-slogan-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-family: var(--font-script);
      color: #102A43;
      flex-shrink: 0;
      padding: 0 8px;
      user-select: none;
    }

    :where(html[data-page="about"]) .sd-fw-slogan-text {
      font-size: 24px;
      font-weight: 700;
      line-height: 1.1;
      text-align: center;
      transform: rotate(-3deg);
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .sd-fw-slogan-text span {
      display: block;
    }

    :where(html[data-page="about"]) .sd-fw-slogan-arc {
      margin-top: -2px;
      transform: rotate(-2deg);
    }

    /* Responsive Rules for Framework Section */
    @media (max-width: 1120px) {
      :where(html[data-page="about"]) .sd-framework-heading {
        font-size: 34px;
      }

      :where(html[data-page="about"]) .sd-framework-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      :where(html[data-page="about"]) .sd-framework-proof-bar {
        flex-wrap: wrap;
        gap: 16px 24px;
        padding: 20px;
      }

      :where(html[data-page="about"]) .sd-fw-proof-divider {
        display: none;
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="about"]) .sd-framework-header-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }

      :where(html[data-page="about"]) .sd-framework-header-note {
        align-self: flex-start;
      }

      :where(html[data-page="about"]) .sd-framework-heading {
        font-size: 28px;
      }

      :where(html[data-page="about"]) .sd-framework-grid {
        grid-template-columns: 1fr;
      }

      :where(html[data-page="about"]) .sd-framework-proof-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding: 18px;
      }

      :where(html[data-page="about"]) .sd-fw-slogan-col {
        grid-column: span 2;
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid #E1EAF0;
      }
    }

    /* ==========================================================================
   INDUSTRY MOSAIC BENTO GRID
   ========================================================================== */
    :where(html[data-page="about"]) .sd-mosaic-section {
      padding: 80px 0 90px;
      background: var(--sd-canvas-warm);
      border-top: 1px solid var(--sd-border);
    }

    :where(html[data-page="about"]) .sd-mosaic-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 20px;
    }

    :where(html[data-page="about"]) .sd-mosaic-card {
      position: relative;
      border-radius: var(--radius-xl);
      overflow: hidden;
      border: 1px solid var(--sd-border);
      box-shadow: var(--shadow-card);
      min-height: 280px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 24px;
      background: var(--sd-navy-dark);
      color: #FFFFFF;
      cursor: pointer;
      transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    :where(html[data-page="about"]) .sd-mosaic-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-image);
    }

    :where(html[data-page="about"]) .sd-mosaic-col-6 {
      grid-column: span 6;
    }

    :where(html[data-page="about"]) .sd-mosaic-col-4 {
      grid-column: span 4;
    }

    :where(html[data-page="about"]) .sd-mosaic-col-3 {
      grid-column: span 3;
    }

    :where(html[data-page="about"]) .sd-mosaic-bg-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.65;
      transition: transform 0.5s ease, opacity 0.3s ease;
    }

    :where(html[data-page="about"]) .sd-mosaic-card:hover .sd-mosaic-bg-img {
      transform: scale(1.06);
      opacity: 0.8;
    }

    :where(html[data-page="about"]) .sd-mosaic-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(13, 34, 58, 0.1) 0%, rgba(13, 34, 58, 0.85) 100%);
      z-index: 1;
    }

    :where(html[data-page="about"]) .sd-mosaic-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .sd-mosaic-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(8px);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 8px;
      width: fit-content;
    }

    :where(html[data-page="about"]) .sd-mosaic-title {
      font-size: 24px;
      font-weight: 900;
      color: #FFFFFF;
      line-height: 1.15;
    }

    :where(html[data-page="about"]) .sd-mosaic-tagline {
      font-size: 13.5px;
      color: rgba(255, 255, 255, 0.85);
      margin-top: 4px;
    }

    /* ==========================================================================
   INDUSTRY × SERVICE MATRIX
   ========================================================================== */
    :where(html[data-page="about"]) .sd-matrix-section {
      padding: 80px 0;
      background: #FFFFFF;
      border-top: 1px solid var(--sd-border);
    }

    :where(html[data-page="about"]) .sd-matrix-table-wrap {
      width: 100%;
      overflow-x: auto;
      border-radius: var(--radius-xl);
      border: 1px solid var(--sd-border);
      box-shadow: var(--shadow-card);
    }

    :where(html[data-page="about"]) .sd-matrix-table {
      width: 100%;
      min-width: 860px;
      border-collapse: collapse;
      text-align: center;
      background: #FFFFFF;
    }

    :where(html[data-page="about"]) .sd-matrix-table th {
      background: var(--sd-canvas-warm);
      padding: 18px 16px;
      font-size: 13.5px;
      font-weight: 800;
      color: var(--sd-navy);
      border-bottom: 1px solid var(--sd-border);
      border-right: 1px solid var(--sd-border);
    }

    :where(html[data-page="about"]) .sd-matrix-table th:first-child {
      text-align: left;
      padding-left: 24px;
    }

    :where(html[data-page="about"]) .sd-matrix-table td {
      padding: 16px;
      font-size: 14px;
      border-bottom: 1px solid var(--sd-border-subtle);
      border-right: 1px solid var(--sd-border-subtle);
      color: var(--sd-body-text);
      transition: background 0.15s ease;
    }

    :where(html[data-page="about"]) .sd-matrix-table tr:hover td {
      background: var(--sd-blue-soft);
    }

    :where(html[data-page="about"]) .sd-matrix-table td:first-child {
      text-align: left;
      font-weight: 800;
      color: var(--sd-navy);
      padding-left: 24px;
    }

    :where(html[data-page="about"]) .sd-matrix-check {
      color: var(--sd-green);
      font-size: 18px;
      font-weight: 900;
    }

    :where(html[data-page="about"]) .sd-matrix-core {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 6px;
      background: var(--sd-yellow-soft);
      color: #B45309;
      font-size: 11px;
      font-weight: 800;
    }

    /* ==========================================================================
   PROOF BAR SECTION
   ========================================================================== */
    :where(html[data-page="about"]) .sd-proof-bar-section {
      padding: 40px 0;
      background: #FFFFFF;
      border-top: 1px solid var(--sd-border);
      border-bottom: 1px solid var(--sd-border);
    }

    :where(html[data-page="about"]) .sd-proof-bar-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      flex-wrap: wrap;
    }

    :where(html[data-page="about"]) .sd-proof-metrics-strip {
      display: flex;
      align-items: center;
      gap: 48px;
      flex-wrap: wrap;
    }

    :where(html[data-page="about"]) .sd-proof-stat-col {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    :where(html[data-page="about"]) .sd-proof-stat-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--sd-canvas-warm);
      border: 1px solid var(--sd-border);
    }

    :where(html[data-page="about"]) .sd-proof-stat-info {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .sd-proof-stat-num {
      font-size: 26px;
      font-weight: 900;
      color: var(--sd-navy);
      line-height: 1.05;
    }

    :where(html[data-page="about"]) .sd-proof-stat-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--sd-muted-text);
    }

    :where(html[data-page="about"]) .sd-handwritten-proof {
      font-family: var(--font-script);
      font-size: 28px;
      font-weight: 700;
      color: var(--sd-navy);
      line-height: 1.1;
      position: relative;
    }

    :where(html[data-page="about"]) .sd-brush-line {
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
    }

    /* ==========================================================================
   CLOSING CTA HERO CONTAINER (DARK NAVY)
   ========================================================================== */
    :where(html[data-page="about"]) .sd-cta-section {
      padding: 60px 0 80px;
      background: var(--sd-canvas-warm);
    }

    :where(html[data-page="about"]) .sd-cta-banner {
      background: linear-gradient(135deg, #0D223A 0%, #122843 100%);
      border-radius: var(--radius-xl);
      padding: 50px 48px;
      box-shadow: var(--shadow-dark-cta);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="about"]) .sd-cta-left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      max-width: 650px;
      z-index: 2;
    }

    :where(html[data-page="about"]) .sd-cta-eyebrow {
      font-size: 11.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--sd-yellow);
      margin-bottom: 12px;
    }

    :where(html[data-page="about"]) .sd-cta-headline {
      font-size: 38px;
      font-weight: 900;
      color: #FFFFFF;
      line-height: 1.12;
      letter-spacing: -0.035em;
    }

    :where(html[data-page="about"]) .sd-cta-headline .yellow {
      color: var(--sd-yellow);
    }

    :where(html[data-page="about"]) .sd-cta-right {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-shrink: 0;
      z-index: 2;
    }

    :where(html[data-page="about"]) .sd-cta-trust {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    :where(html[data-page="about"]) .sd-cta-trust-avatars {
      display: flex;
      align-items: center;
    }

    :where(html[data-page="about"]) .sd-cta-trust-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 2px solid #0D223A;
      margin-left: -8px;
      object-fit: cover;
    }

    :where(html[data-page="about"]) .sd-cta-trust-avatar:first-child {
      margin-left: 0;
    }

    :where(html[data-page="about"]) .sd-cta-trust-text {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.85);
      font-weight: 600;
      max-width: 140px;
      line-height: 1.25;
    }

    /* ==========================================================================
   FOOTER
   ========================================================================== */
    :where(html[data-page="about"]) .sd-footer {
      background: #091726;
      color: #FFFFFF;
      padding: 70px 0 30px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    :where(html[data-page="about"]) .sd-footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
      gap: 40px;
      margin-bottom: 50px;
    }

    :where(html[data-page="about"]) .sd-footer-brand-col {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="about"]) .sd-footer-desc {
      font-size: 14px;
      color: #8A9CAE;
      margin-top: 14px;
      max-width: 320px;
      line-height: 1.6;
    }

    :where(html[data-page="about"]) .sd-footer-title {
      font-size: 15px;
      font-weight: 800;
      color: #FFFFFF;
      margin-bottom: 18px;
      letter-spacing: 0.02em;
    }

    :where(html[data-page="about"]) .sd-footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    :where(html[data-page="about"]) .sd-footer-link {
      font-size: 14px;
      color: #8A9CAE;
      transition: color 0.2s ease;
    }

    :where(html[data-page="about"]) .sd-footer-link:hover {
      color: #FFFFFF;
    }

    :where(html[data-page="about"]) .sd-footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 13px;
      color: #627588;
    }

    /* ==========================================================================
   INQUIRY MODAL (ACCESSIBLE POPUP)
   ========================================================================== */
    :where(html[data-page="about"]) .sd-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(13, 34, 58, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    :where(html[data-page="about"]) .sd-modal-backdrop.is-open {
      opacity: 1;
      visibility: visible;
    }

    :where(html[data-page="about"]) .sd-modal-card {
      background: #FFFFFF;
      border-radius: var(--radius-xl);
      max-width: 520px;
      width: 100%;
      padding: 36px;
      box-shadow: 0 25px 65px rgba(0, 0, 0, 0.25);
      position: relative;
      transform: translateY(20px) scale(0.96);
      transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    :where(html[data-page="about"]) .sd-modal-backdrop.is-open .sd-modal-card {
      transform: translateY(0) scale(1);
    }

    :where(html[data-page="about"]) .sd-modal-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--sd-canvas-warm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--sd-navy);
      font-size: 18px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    :where(html[data-page="about"]) .sd-modal-close:hover {
      background: var(--sd-border);
    }

    :where(html[data-page="about"]) .sd-modal-title {
      font-size: 24px;
      font-weight: 900;
      color: var(--sd-navy);
      margin-bottom: 6px;
    }

    :where(html[data-page="about"]) .sd-modal-subtitle {
      font-size: 14.5px;
      color: var(--sd-body-text);
      margin-bottom: 24px;
    }

    :where(html[data-page="about"]) .sd-form-group {
      margin-bottom: 16px;
    }

    :where(html[data-page="about"]) .sd-form-label {
      display: block;
      font-size: 12.5px;
      font-weight: 800;
      color: var(--sd-navy);
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    :where(html[data-page="about"]) .sd-form-input,:where(html[data-page="about"]) 
    .sd-form-select,:where(html[data-page="about"]) 
    .sd-form-textarea {
      width: 100%;
      padding: 12px 16px;
      border-radius: 12px;
      border: 1.5px solid var(--sd-border);
      font-family: var(--font-main);
      font-size: 14.5px;
      color: var(--sd-navy);
      outline: none;
      background: #FFFFFF;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    :where(html[data-page="about"]) .sd-form-input:focus,:where(html[data-page="about"]) 
    .sd-form-select:focus,:where(html[data-page="about"]) 
    .sd-form-textarea:focus {
      border-color: var(--sd-blue);
      box-shadow: 0 0 0 3px rgba(22, 139, 229, 0.15);
    }

    :where(html[data-page="about"]) .sd-form-textarea {
      resize: vertical;
      min-height: 80px;
    }

    :where(html[data-page="about"]) .sd-btn-submit {
      width: 100%;
      padding: 14px;
      background: var(--sd-yellow);
      color: var(--sd-navy);
      font-size: 15px;
      font-weight: 900;
      border-radius: var(--radius-pill);
      box-shadow: var(--shadow-yellow);
      cursor: pointer;
      transition: all 0.2s ease;
      margin-top: 8px;
    }

    :where(html[data-page="about"]) .sd-btn-submit:hover {
      background: var(--sd-yellow-hover);
      transform: translateY(-1px);
    }

    /* ==========================================================================
   RESPONSIVE BREAKPOINTS (Mobile-First Precision & Multi-Tier Optimization)
   ========================================================================== */
    @media (min-width: 1440px) {
      :where(html[data-page="about"]) .sd-ecosystem-stage {
        max-width: 760px;
        height: 640px;
      }
    }

    @media (max-width: 1366px) and (min-width: 1025px) {
      :where(html[data-page="about"]) .sd-ecosystem-stage {
        max-width: 680px;
        height: 610px;
      }

      :where(html[data-page="about"]) .sd-eco-card {
        width: 165px;
        height: 134px;
      }

      :where(html[data-page="about"]) .sd-center-engine {
        width: 160px;
        height: 160px;
      }

      :where(html[data-page="about"]) .sd-annotation-orbit {
        right: 1%;
        bottom: 1%;
      }
    }

    /* ==========================================================================
   COMPREHENSIVE RESPONSIVE STYLES & MOBILE ADAPTATIONS
   ========================================================================== */

    /* Universal Mobile Safeguards */
    html:where([data-page="about"]),:where(html[data-page="about"]) 
    body {
      width: 100%;
      max-width: 100vw;
      overflow-x: hidden;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :where(html[data-page="about"]) *,:where(html[data-page="about"]) 
    *::before,:where(html[data-page="about"]) 
    *::after {
      box-sizing: border-box;
    }

    :where(html[data-page="about"]) .sd-container {
      width: 100%;
      max-width: 1320px;
      margin: 0 auto;
      padding: 0 32px;
      box-sizing: border-box;
    }

    @media (max-width: 1200px) {
      :where(html[data-page="about"]) .sd-spotlight-stage {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
      }

      :where(html[data-page="about"]) .sd-spotlight-right {
        grid-column: span 2;
      }

      :where(html[data-page="about"]) .sd-footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
      }
    }

    @media (max-width: 1024px) {

      /* Navigation */
      :where(html[data-page="about"]) .sd-nav-menu {
        display: none;
      }

      :where(html[data-page="about"]) .sd-nav-actions .sd-btn-pill-navy {
        display: none;
      }

      :where(html[data-page="about"]) .sd-mobile-toggle {
        display: inline-flex;
      }

      /* Hero */
      :where(html[data-page="about"]) .sd-hero-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 36px !important;
      }

      :where(html[data-page="about"]) .sd-hero-left {
        width: 100% !important;
        max-width: 100% !important;
        align-items: flex-start !important;
        text-align: left !important;
      }

      :where(html[data-page="about"]) .sd-hero-headline br {
        display: none;
      }

      :where(html[data-page="about"]) .sd-hero-headline {
        font-size: clamp(32px, 6vw, 46px);
        line-height: 1.15;
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: manual;
      }

      :where(html[data-page="about"]) .sd-hero-desc {
        max-width: 100%;
        font-size: 16.5px;
      }

      :where(html[data-page="about"]) .sd-hero-btn-row {
        justify-content: flex-start;
      }

      :where(html[data-page="about"]) .sd-annotation-strategies {
        justify-content: flex-start;
      }

      :where(html[data-page="about"]) .sd-hero-proof-bar {
        margin: 0;
        max-width: 100%;
      }

      :where(html[data-page="about"]) .sd-hero-right {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        overflow: hidden !important;
      }

      :where(html[data-page="about"]) .sd-ecosystem-stage {
        max-width: 660px;
        height: 560px;
        margin: 0 auto;
        overflow: hidden;
      }

      :where(html[data-page="about"]) .sd-eco-card {
        width: 152px;
        height: 124px;
      }

      :where(html[data-page="about"]) .sd-center-engine {
        width: 150px;
        height: 150px;
      }

      :where(html[data-page="about"]) .sd-annotation-orbit {
        display: none;
      }

      /* Journeys Constellation Stack on Tablet */
      :where(html[data-page="about"]) .sd-journeys-stage {
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        margin-top: 20px;
      }

      :where(html[data-page="about"]) .sd-journeys-svg-canvas,:where(html[data-page="about"]) 
      .sd-trajectory-pill,:where(html[data-page="about"]) 
      .sd-jhub-outer-glow,:where(html[data-page="about"]) 
      .sd-jhub-ring {
        display: none;
      }

      :where(html[data-page="about"]) .sd-journeys-center-hub {
        position: static;
        transform: none;
        margin: 0 auto 12px;
      }

      :where(html[data-page="about"]) .sd-jcard {
        position: static;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 640px;
      }

      :where(html[data-page="about"]) .sd-journeys-handwritten-bottom {
        position: static;
        margin-top: 10px;
        text-align: center;
      }

      :where(html[data-page="about"]) .sd-journeys-bottom-pill {
        position: static;
        margin-top: 10px;
      }

      /* Framework Grid */
      :where(html[data-page="about"]) .sd-framework-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      :where(html[data-page="about"]) .sd-mosaic-col-6,:where(html[data-page="about"]) 
      .sd-mosaic-col-4,:where(html[data-page="about"]) 
      .sd-mosaic-col-3 {
        grid-column: span 6;
      }

      :where(html[data-page="about"]) .sd-cta-banner {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 36px 24px;
      }

      :where(html[data-page="about"]) .sd-cta-left {
        align-items: center;
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="about"]) .sd-container {
        padding: 0 16px;
        width: 100%;
        max-width: 100%;
      }

      /* Header */
      :where(html[data-page="about"]) .sd-header {
        height: 64px;
      }

      :where(html[data-page="about"]) .sd-mobile-drawer {
        top: 64px;
        padding: 20px 16px;
      }

      :where(html[data-page="about"]) .sd-mobile-nav-link {
        padding: 12px 8px;
        font-size: 16px;
        border-bottom: 1px solid #F0F4F8;
      }

      /* Hero */
      :where(html[data-page="about"]) .sd-hero-section {
        padding: 28px 0 40px;
        overflow: hidden;
      }

      :where(html[data-page="about"]) .sd-hero-headline br {
        display: none;
      }

      :where(html[data-page="about"]) .sd-hero-headline {
        font-size: clamp(26px, 7vw, 36px);
        line-height: 1.15;
      }

      :where(html[data-page="about"]) .sd-hero-desc {
        font-size: 15px;
        line-height: 1.55;
        margin-bottom: 24px;
      }

      :where(html[data-page="about"]) .sd-hero-btn-row {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 12px;
        align-items: stretch;
        margin-bottom: 24px;
      }

      :where(html[data-page="about"]) .sd-btn-hero-primary,:where(html[data-page="about"]) 
      .sd-btn-hero-secondary {
        width: 100%;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
        padding: 13px 20px;
        font-size: 15px;
      }

      :where(html[data-page="about"]) .sd-hero-proof-bar {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
      }

      :where(html[data-page="about"]) .sd-proof-divider {
        display: none;
      }

      /* Ecosystem Mobile Constellation */
      :where(html[data-page="about"]) .sd-ecosystem-stage {
        width: 100%;
        max-width: 100%;
        height: 510px;
        border-radius: 22px;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
      }

      :where(html[data-page="about"]) .sd-eco-ambient-glow {
        max-width: 100%;
        width: 280px;
        height: 280px;
      }

      :where(html[data-page="about"]) .sd-center-engine {
        width: 120px;
        height: 120px;
        top: 45%;
      }

      :where(html[data-page="about"]) .sd-engine-brand {
        font-size: 9px;
      }

      :where(html[data-page="about"]) .sd-engine-title {
        font-size: 14.5px;
      }

      :where(html[data-page="about"]) .sd-eco-card {
        width: 114px;
        height: 92px;
        border-radius: 14px;
        border-width: 2px;
        box-shadow: 0 8px 20px rgba(21, 67, 96, 0.12);
      }

      :where(html[data-page="about"]) .sd-eco-tag {
        min-height: 36px;
        padding: 3px 6px;
        bottom: -10px;
        border-radius: 10px;
        gap: 5px;
      }

      :where(html[data-page="about"]) .sd-eco-tag-icon {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        font-size: 11px;
      }

      :where(html[data-page="about"]) .sd-eco-tag-name {
        font-size: 10px;
      }

      :where(html[data-page="about"]) .sd-eco-tag-sub {
        font-size: 8px;
      }

      :where(html[data-page="about"]) .sd-handwritten-top-right,:where(html[data-page="about"]) 
      .sd-handwritten-left,:where(html[data-page="about"]) 
      .sd-handwritten-bottom-right {
        display: none;
      }

      :where(html[data-page="about"]) .sd-eco-pos-education {
        left: calc(50% - 57px);
        top: 2%;
        transform: none;
        z-index: 10;
      }

      :where(html[data-page="about"]) .sd-eco-pos-healthcare {
        left: 4px;
        top: 39%;
        transform: none;
        z-index: 10;
      }

      :where(html[data-page="about"]) .sd-eco-pos-realestate {
        right: 4px;
        top: 39%;
        transform: none;
        z-index: 10;
      }

      :where(html[data-page="about"]) .sd-eco-pos-ecommerce {
        left: calc(50% - 57px);
        top: 74%;
        transform: none;
        z-index: 10;
      }

      :where(html[data-page="about"]) .sd-eco-pos-beauty,:where(html[data-page="about"]) 
      .sd-eco-pos-manufacturing,:where(html[data-page="about"]) 
      .sd-eco-pos-profservices {
        display: none;
      }

      :where(html[data-page="about"]) .sd-mobile-secondary-rail {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
      }

      /* Filter Section */
      :where(html[data-page="about"]) .sd-filter-section {
        top: 64px;
        padding: 8px 0;
        width: 100%;
        overflow: hidden;
      }

      :where(html[data-page="about"]) .sd-filter-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 8px;
        gap: 8px;
        width: 100%;
      }

      :where(html[data-page="about"]) .sd-filter-btn {
        padding: 9px 15px;
        font-size: 13.5px;
        flex-shrink: 0;
        min-height: 44px;
        white-space: nowrap;
      }

      :where(html[data-page="about"]) .sd-filter-scroll-btn {
        display: none;
      }

      /* Spotlight / Playbook Section */
      :where(html[data-page="about"]) .sd-spotlight-section {
        padding: 40px 0 48px;
        overflow: hidden;
      }

      :where(html[data-page="about"]) .sd-spotlight-stage {
        grid-template-columns: 1fr;
        gap: 24px;
        width: 100%;
      }

      :where(html[data-page="about"]) .sd-spotlight-right {
        grid-column: span 1;
        width: 100%;
      }

      :where(html[data-page="about"]) .sd-spotlight-left {
        width: 100%;
      }

      :where(html[data-page="about"]) .sd-spotlight-metrics-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 10px;
        width: 100%;
      }

      :where(html[data-page="about"]) .sd-metric-chip {
        padding: 10px 12px;
        gap: 10px;
      }

      :where(html[data-page="about"]) .sd-spotlight-card {
        height: 280px;
        border-radius: 20px;
        width: 100%;
        overflow: hidden;
      }

      /* Growth Journeys Section */
      :where(html[data-page="about"]) .sd-journeys-section {
        padding: 40px 0 48px;
        overflow: hidden;
      }

      :where(html[data-page="about"]) .sd-journeys-header-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        width: 100%;
      }

      :where(html[data-page="about"]) .sd-journeys-heading {
        font-size: clamp(26px, 6.5vw, 34px);
      }

      :where(html[data-page="about"]) .sd-journeys-header-right {
        align-items: flex-start;
        width: 100%;
      }

      :where(html[data-page="about"]) .sd-journeys-top-badge {
        width: 100%;
        box-sizing: border-box;
      }

      :where(html[data-page="about"]) .sd-journeys-handwritten-top {
        display: none;
      }

      :where(html[data-page="about"]) .sd-journeys-stage {
        width: 100%;
        gap: 18px;
      }

      :where(html[data-page="about"]) .sd-jcard {
        width: 100%;
        max-width: 100%;
        padding: 16px;
        border-radius: 20px;
        box-sizing: border-box;
      }

      :where(html[data-page="about"]) .sd-jcard-track {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 6px;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
      }

      :where(html[data-page="about"]) .sd-jcard-track-line {
        display: none;
      }

      :where(html[data-page="about"]) .sd-jtrack-step {
        flex-shrink: 0;
        min-width: 58px;
        text-align: center;
      }

      :where(html[data-page="about"]) .sd-jcard-metric-bar {
        font-size: 12px;
        padding: 9px 12px;
      }

      /* Framework Section */
      :where(html[data-page="about"]) .sd-framework-section {
        padding: 40px 0 48px;
        overflow: hidden;
      }

      :where(html[data-page="about"]) .sd-framework-header-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
      }

      :where(html[data-page="about"]) .sd-framework-heading {
        font-size: clamp(24px, 6vw, 32px);
      }

      :where(html[data-page="about"]) .sd-framework-header-note {
        display: none;
      }

      :where(html[data-page="about"]) .sd-framework-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
      }

      /* Matrix Table */
      :where(html[data-page="about"]) .sd-matrix-section {
        padding: 40px 0 48px;
        overflow: hidden;
      }

      :where(html[data-page="about"]) .sd-matrix-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px;
        width: 100%;
        box-sizing: border-box;
      }

      :where(html[data-page="about"]) .sd-matrix-table {
        min-width: 560px;
        width: 100%;
      }

      /* Mosaic / Case Studies */
      :where(html[data-page="about"]) .sd-mosaic-grid {
        grid-template-columns: 1fr;
        width: 100%;
        gap: 16px;
      }

      :where(html[data-page="about"]) .sd-mosaic-col-6,:where(html[data-page="about"]) 
      .sd-mosaic-col-4,:where(html[data-page="about"]) 
      .sd-mosaic-col-3 {
        grid-column: span 12;
        width: 100%;
      }

      :where(html[data-page="about"]) .sd-proof-metrics-strip {
        gap: 16px;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
      }

      :where(html[data-page="about"]) .sd-cta-banner {
        width: 100%;
        padding: 28px 16px;
        box-sizing: border-box;
      }

      :where(html[data-page="about"]) .sd-cta-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      :where(html[data-page="about"]) .sd-cta-btn-primary,:where(html[data-page="about"]) 
      .sd-cta-btn-outline {
        width: 100%;
        justify-content: center;
        text-align: center;
      }

      :where(html[data-page="about"]) .sd-footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        width: 100%;
      }
    }

    @media (max-width: 480px) {
      :where(html[data-page="about"]) .sd-header {
        height: 60px;
      }

      :where(html[data-page="about"]) .sd-logo-brand {
        font-size: 18px;
      }

      :where(html[data-page="about"]) .sd-logo-sub {
        font-size: 9px;
      }

      :where(html[data-page="about"]) .sd-nav-actions .sd-btn-pill-yellow span {
        display: none;
      }

      :where(html[data-page="about"]) .sd-nav-actions .sd-btn-pill-yellow {
        padding: 8px 12px;
      }

      /* Hero */
      :where(html[data-page="about"]) .sd-hero-section {
        padding: 24px 0 36px;
      }

      :where(html[data-page="about"]) .sd-hero-headline br {
        display: none;
      }

      :where(html[data-page="about"]) .sd-hero-headline {
        font-size: clamp(24px, 7.5vw, 28px);
        line-height: 1.18;
        letter-spacing: -0.02em;
      }

      :where(html[data-page="about"]) .sd-btn-hero-primary,:where(html[data-page="about"]) 
      .sd-btn-hero-secondary {
        width: 100%;
        justify-content: center;
        padding: 13px 18px;
        font-size: 14.5px;
      }

      :where(html[data-page="about"]) .sd-hero-btn-row {
        flex-direction: column;
        width: 100%;
        gap: 10px;
      }

      :where(html[data-page="about"]) .sd-hero-proof-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px;
        width: 100%;
      }

      /* Ecosystem Stage on Small Screens */
      :where(html[data-page="about"]) .sd-ecosystem-stage {
        height: 470px;
        border-radius: 16px;
      }

      :where(html[data-page="about"]) .sd-center-engine {
        width: 108px;
        height: 108px;
        top: 45%;
      }

      :where(html[data-page="about"]) .sd-engine-brand {
        font-size: 8.5px;
      }

      :where(html[data-page="about"]) .sd-engine-title {
        font-size: 13.5px;
      }

      :where(html[data-page="about"]) .sd-eco-card {
        width: 104px;
        height: 84px;
        border-radius: 12px;
        border-width: 2px;
      }

      :where(html[data-page="about"]) .sd-eco-tag {
        min-height: 34px;
        padding: 3px 6px;
        bottom: -10px;
        border-radius: 8px;
        gap: 4px;
      }

      :where(html[data-page="about"]) .sd-eco-tag-name {
        font-size: 9.5px;
      }

      :where(html[data-page="about"]) .sd-eco-tag-sub {
        display: none;
      }

      :where(html[data-page="about"]) .sd-eco-pos-education {
        left: calc(50% - 52px);
        top: 2%;
      }

      :where(html[data-page="about"]) .sd-eco-pos-healthcare {
        left: 2px;
        top: 39%;
      }

      :where(html[data-page="about"]) .sd-eco-pos-realestate {
        right: 2px;
        top: 39%;
      }

      :where(html[data-page="about"]) .sd-eco-pos-ecommerce {
        left: calc(50% - 52px);
        top: 75%;
      }

      /* Spotlight Center Floating Badges */
      :where(html[data-page="about"]) .sd-spotlight-card {
        height: 250px;
      }

      :where(html[data-page="about"]) .sd-floating-actual-project {
        top: 8px;
        right: 8px;
        padding: 5px 8px;
        font-size: 10px;
        border-radius: 8px;
      }

      :where(html[data-page="about"]) .sd-floating-testimonial-card {
        bottom: 8px;
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
        padding: 8px 10px;
        border-radius: 10px;
      }

      :where(html[data-page="about"]) .sd-floating-testimonial-quote {
        font-size: 11px;
        line-height: 1.3;
      }

      /* Modal Dialog */
      :where(html[data-page="about"]) .sd-modal-content {
        width: calc(100% - 24px);
        max-height: 92vh;
        padding: 20px 16px;
        border-radius: 20px;
      }

      :where(html[data-page="about"]) .sd-modal-title {
        font-size: 20px;
      }
    }

    @media (max-width: 360px) {
      :where(html[data-page="about"]) .sd-hero-headline {
        font-size: 22px;
      }

      :where(html[data-page="about"]) .sd-ecosystem-stage {
        height: 400px;
      }

      :where(html[data-page="about"]) .sd-center-engine {
        width: 96px;
        height: 96px;
        top: 45%;
      }

      :where(html[data-page="about"]) .sd-engine-title {
        font-size: 12px;
      }

      :where(html[data-page="about"]) .sd-eco-card {
        width: 90px;
        height: 74px;
      }

      :where(html[data-page="about"]) .sd-eco-tag-name {
        font-size: 8.5px;
      }

      :where(html[data-page="about"]) .sd-eco-pos-education {
        left: calc(50% - 45px);
        top: 2%;
      }

      :where(html[data-page="about"]) .sd-eco-pos-healthcare {
        left: 1px;
        top: 39%;
      }

      :where(html[data-page="about"]) .sd-eco-pos-realestate {
        right: 1px;
        top: 39%;
      }

      :where(html[data-page="about"]) .sd-eco-pos-ecommerce {
        left: calc(50% - 45px);
        top: 75%;
      }
    }

    /* =========================================================================
   4. UNIFIED SINGLE PAGE APPLICATION (SPA) CONTROLS
   ========================================================================= */
    :where(html[data-page="about"]) .spa-view {
      display: block;
      opacity: 1;
      transition: opacity 0.25s ease;
    }

    :where(html[data-page="about"]) .spa-view.hidden {
      display: none !important;
    }

    :where(html[data-page="about"]) .spa-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #E8EEF5;
      color: #1A3860;
      font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 9999px;
      border: 1px solid rgba(18, 40, 67, 0.12);
      box-shadow: 0 2px 6px rgba(18, 40, 67, 0.04);
      transition: all 0.25s ease;
      user-select: none;
    }

    :where(html[data-page="about"]) .spa-badge:hover {
      background: #DFE8F2;
      border-color: rgba(18, 40, 67, 0.2);
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(18, 40, 67, 0.08);
    }

    :where(html[data-page="about"]) .spa-badge svg {
      color: #F5A916;
      flex-shrink: 0;
    }

    :where(html[data-page="about"]) .spa-view-toggle {
      display: inline-flex;
      align-items: center;
      background: #EEF2F6;
      padding: 3px;
      border-radius: 9999px;
      border: 1px solid #DFE5ED;
    }

    :where(html[data-page="about"]) .spa-tab-btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      border-radius: 9999px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      color: #5A738E;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    :where(html[data-page="about"]) .spa-tab-btn:hover {
      color: #122843;
    }

    :where(html[data-page="about"]) .spa-tab-btn.active {
      background: #122843;
      color: #FFFFFF;
      box-shadow: 0 2px 8px rgba(18, 40, 67, 0.25);
    }

    :where(html[data-page="about"]) .spa-toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      background: #102039;
      color: #FFFFFF;
      padding: 14px 20px;
      border-radius: 12px;
      box-shadow: 0 16px 36px rgba(16, 32, 57, 0.25);
      border-left: 4px solid #F5A916;
      font-size: 14px;
      font-weight: 600;
      z-index: 9999;
      display: flex;
      align-items: center;
      gap: 12px;
      transform: translateY(100px);
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
    }

    :where(html[data-page="about"]) .spa-toast.show {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    :where(html[data-page="about"]) .orbit-node {
      cursor: pointer;
    }

    @media (max-width: 992px) {
      :where(html[data-page="about"]) .spa-view-toggle {
        display: none;
      }

      :where(html[data-page="about"]) .footer-pro-grid {
        grid-template-columns: 1fr 1fr !important;
      }
    }

    @media (max-width: 600px) {
      :where(html[data-page="about"]) .footer-pro-grid {
        grid-template-columns: 1fr !important;
      }
    }


    /* ==========================================================================
   MOBILE-ONLY INTERACTIVE REDESIGN FOR BELIEF & GROWTH SECTION (< 768px)
   Preserves desktop/tablet rendering 100% untouched.
   ========================================================================== */
    :where(html[data-page="about"]) .origin-desktop-view {
      display: block;
    }

    :where(html[data-page="about"]) .origin-mobile-view {
      display: none;
    }

    @media (min-width: 768px) {
      :where(html[data-page="about"]) .origin-desktop-view {
        display: block !important;
      }

      :where(html[data-page="about"]) .origin-mobile-view {
        display: none !important;
      }
    }

    @media (max-width: 767px) {
  /* Footer Mobile: Company and Solutions side-by-side */
  :where(html[data-page="about"]) .site-footer .footer-top-grid,:where(html[data-page="about"]) 
  .footer-top-grid,:where(html[data-page="about"]) 
  .kx-footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 16px !important;
  }
  :where(html[data-page="about"]) .footer-brand,:where(html[data-page="about"]) 
  .kx-footer-brand-col {
    grid-column: 1 / -1 !important;
  }
  :where(html[data-page="about"]) .footer-col-company {
    grid-column: 1 !important;
  }
  :where(html[data-page="about"]) .footer-col-solutions {
    grid-column: 2 !important;
  }
  :where(html[data-page="about"]) .footer-col-resources {
    grid-column: 1 !important;
  }
  :where(html[data-page="about"]) .footer-col-follow {
    grid-column: 2 !important;
  }

      :where(html[data-page="about"]) .origin-desktop-view {
        display: none !important;
      }

      :where(html[data-page="about"]) .our-origin-section {
        padding: 32px 0 36px !important;
        background: #FBF8F2 !important;
      }

      :where(html[data-page="about"]) .origin-mobile-view {
        display: block !important;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
      }

      :where(html[data-page="about"]) .mob-belief-wrapper {
        width: 100%;
        max-width: 430px;
        margin: 0 auto;
        position: relative;
        box-sizing: border-box;
      }

      /* Main Card Container */
      :where(html[data-page="about"]) .mob-belief-card-container {
        background: #FCFBF8;
        border: 1px solid rgba(18, 46, 78, 0.08);
        border-radius: 24px;
        box-shadow: 0 10px 34px rgba(18, 46, 78, 0.08);
        padding: 24px 18px 26px;
        position: relative;
        overflow: hidden;
      }

      :where(html[data-page="about"]) .mob-card-glow {
        position: absolute;
        top: -40px;
        right: -40px;
        width: 180px;
        height: 180px;
        background: radial-gradient(circle, rgba(242, 160, 7, 0.12) 0%, rgba(242, 160, 7, 0) 70%);
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
      }

      /* Intro Block */
      :where(html[data-page="about"]) .mob-intro-block {
        position: relative;
        z-index: 1;
        text-align: left;
      }

      :where(html[data-page="about"]) .mob-eyebrow-pill {
        display: inline-flex;
        align-items: center;
        font-family: 'Manrope', 'Inter', system-ui, sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #7385A0;
        background: rgba(114, 133, 160, 0.10);
        border-radius: 999px;
        padding: 8px 14px;
        margin-bottom: 18px;
        line-height: 1;
      }

      :where(html[data-page="about"]) .mob-headline {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: clamp(34px, 9.5vw, 44px);
        line-height: 1.02;
        font-weight: 700;
        letter-spacing: -0.025em;
        color: #0E2A48;
        max-width: 330px;
        margin-bottom: 14px;
      }

      :where(html[data-page="about"]) .mob-futures-highlight {
        color: #F2A007;
        font-style: italic;
        display: inline-block;
      }

      :where(html[data-page="about"]) .mob-accent-bar {
        width: 94px;
        height: 5px;
        background: #F2A007;
        border-radius: 999px;
        margin-bottom: 18px;
      }

      :where(html[data-page="about"]) .mob-supporting-copy {
        font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
        font-size: 15.5px;
        line-height: 1.55;
        color: #5F7898;
        max-width: 340px;
        margin-bottom: 28px;
      }

      /* Journey Progression Container */
      :where(html[data-page="about"]) .mob-journey-container {
        position: relative;
        margin-top: 10px;
        margin-bottom: 24px;
      }

      /* Continuous connecting dashed trajectory line through icon node dots */
      :where(html[data-page="about"]) .mob-step-row:not(:last-child) .mob-step-icon-col::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 5px;
        width: 0;
        height: calc(100% + 14px);
        border-right: 2.5px dashed #F2A007;
        z-index: 1;
        pointer-events: none;
      }

      /* SVG Trajectory Path */
      :where(html[data-page="about"]) .mob-trajectory-svg {
        display: none;
      }

      /* Steps Stack with Separated Node Dots & Wavy Trajectory */
      :where(html[data-page="about"]) .mob-steps-stack {
        display: flex;
        flex-direction: column;
        gap: 14px;
        position: relative;
        z-index: 2;
      }

      :where(html[data-page="about"]) .mob-step-row {
        display: grid;
        grid-template-columns: 74px minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
        position: relative;
      }

      :where(html[data-page="about"]) .mob-step-icon-col {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        width: 74px;
        height: 58px;
      }

      :where(html[data-page="about"]) .mob-icon-circle {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: #FFF8E9;
        border: 1.5px solid #F2A007;
        box-shadow: 0 6px 18px rgba(242, 160, 7, 0.16);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
        flex-shrink: 0;
      }

      :where(html[data-page="about"]) .mob-step-row.is-open .mob-icon-circle {
        transform: scale(1.06);
        box-shadow: 0 8px 24px rgba(242, 160, 7, 0.28);
        background: #FFF5DD;
      }

      /* Node dot floating to the right with intentional distance from icon circle */
      :where(html[data-page="about"]) .mob-node-dot {
        position: absolute;
        left: 60px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #F2A007;
        border: 2.5px solid #FCFBF8;
        z-index: 4;
        box-shadow: 0 0 0 2px rgba(242, 160, 7, 0.25);
        transition: transform 0.25s ease, background 0.25s ease;
      }

      :where(html[data-page="about"]) .mob-step-row.is-open .mob-node-dot {
        transform: translateY(-50%) scale(1.15);
        background: #E59200;
      }

      /* Content Card */
      :where(html[data-page="about"]) .mob-step-card {
        background: #FFFFFF;
        border: 1px solid rgba(18, 46, 78, 0.08);
        border-radius: 18px;
        padding: 16px 14px;
        box-shadow: 0 6px 20px rgba(18, 46, 78, 0.06);
        cursor: pointer;
        transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
        outline: none;
        -webkit-tap-highlight-color: transparent;
      }

      :where(html[data-page="about"]) .mob-step-card:focus-visible {
        box-shadow: 0 0 0 2px rgba(242, 160, 7, 0.5), 0 8px 24px rgba(18, 46, 78, 0.08);
      }

      :where(html[data-page="about"]) .mob-step-row.is-open .mob-step-card {
        border-color: rgba(242, 160, 7, 0.38);
        box-shadow: 0 10px 28px rgba(242, 160, 7, 0.12), 0 4px 12px rgba(18, 46, 78, 0.05);
      }

      :where(html[data-page="about"]) .mob-card-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 34px;
        align-items: center;
        column-gap: 8px;
      }

      :where(html[data-page="about"]) .mob-card-info {
        min-width: 0;
      }

      :where(html[data-page="about"]) .mob-card-title {
        font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
        font-size: 19px;
        font-weight: 800;
        line-height: 1.15;
        color: #0E2A48;
        margin-bottom: 4px;
        letter-spacing: -0.02em;
      }

      :where(html[data-page="about"]) .mob-card-subtitle {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 13.5px;
        line-height: 1.35;
        color: #607795;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      :where(html[data-page="about"]) .mob-chevron-btn {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #FFF7E8;
        color: #D98700;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
        flex-shrink: 0;
      }

      :where(html[data-page="about"]) .mob-step-row.is-open .mob-chevron-btn {
        transform: rotate(90deg);
        background: #F2A007;
        color: #FFFFFF;
      }

      :where(html[data-page="about"]) .mob-card-expanded {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease, margin-top 0.24s ease;
      }

      :where(html[data-page="about"]) .mob-step-row.is-open .mob-card-expanded {
        max-height: 120px;
        opacity: 1;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed rgba(18, 46, 78, 0.10);
      }

      :where(html[data-page="about"]) .mob-card-expanded p {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 13.5px;
        line-height: 1.48;
        color: #4A6382;
        margin: 0;
      }

      /* Dark Navy Belief Card */
      :where(html[data-page="about"]) .mob-belief-navy-card {
        background: linear-gradient(135deg, #0E2A48 0%, #153D64 100%);
        border-radius: 20px;
        padding: 18px 16px;
        box-shadow: 0 10px 28px rgba(14, 42, 72, 0.20);
        display: grid;
        grid-template-columns: 1.25fr 0.75fr;
        gap: 12px;
        align-items: center;
        position: relative;
        z-index: 2;
        margin-top: 22px;
      }

      :where(html[data-page="about"]) .mob-navy-left {
        display: flex;
        flex-direction: column;
      }

      :where(html[data-page="about"]) .mob-navy-sub {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.72);
        margin-bottom: 3px;
      }

      :where(html[data-page="about"]) .mob-navy-title {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 24px;
        line-height: 1.08;
        font-weight: 700;
        color: #FFFFFF;
        letter-spacing: -0.02em;
        margin: 0;
      }

      :where(html[data-page="about"]) .mob-futures-gold {
        color: #F2A007;
        font-style: italic;
      }

      :where(html[data-page="about"]) .mob-navy-bar {
        width: 44px;
        height: 4px;
        background: #F2A007;
        border-radius: 999px;
        margin-top: 8px;
      }

      :where(html[data-page="about"]) .mob-navy-right {
        display: flex;
        align-items: center;
        gap: 8px;
        justify-content: flex-end;
      }

      :where(html[data-page="about"]) .mob-sprout-icon {
        width: 22px;
        height: 32px;
        flex-shrink: 0;
      }

      :where(html[data-page="about"]) .mob-navy-divider {
        width: 1px;
        height: 58px;
        background: rgba(255, 255, 255, 0.24);
        flex-shrink: 0;
      }

      :where(html[data-page="about"]) .mob-navy-words {
        display: flex;
        flex-direction: column;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 12.5px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.78);
        font-weight: 600;
      }

      /* Closing Quote & Caption */
      :where(html[data-page="about"]) .mob-closing-block {
        margin-top: 26px;
        text-align: center;
        position: relative;
        z-index: 2;
      }

      :where(html[data-page="about"]) .mob-closing-quote-wrap {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
      }

      :where(html[data-page="about"]) .mob-closing-quote {
        font-family: 'Caveat', cursive, sans-serif;
        font-size: 25px;
        font-weight: 700;
        line-height: 1.15;
        color: #173E76;
      }

      :where(html[data-page="about"]) .mob-closing-underline-svg {
        width: 190px;
        max-width: 90%;
        height: 8px;
        margin-top: 4px;
      }

      :where(html[data-page="about"]) .mob-closing-caption {
        font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
        font-size: 11px;
        letter-spacing: 0.18em;
        font-weight: 800;
        text-transform: uppercase;
        color: #6B829D;
        margin-top: 16px;
      }
    }

    /* Small screen adjustments (< 375px) */
    @media (max-width: 374px) {
      :where(html[data-page="about"]) .mob-headline {
        font-size: 32px;
      }

      :where(html[data-page="about"]) .mob-step-row {
        grid-template-columns: 54px minmax(0, 1fr);
        column-gap: 8px;
      }

      :where(html[data-page="about"]) .mob-step-icon-col {
        width: 54px;
        height: 54px;
      }

      :where(html[data-page="about"]) .mob-icon-circle {
        width: 52px;
        height: 52px;
      }

      :where(html[data-page="about"]) .mob-handwritten-annotation {
        display: none;
      }

      :where(html[data-page="about"]) .mob-belief-navy-card {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      :where(html[data-page="about"]) .mob-navy-right {
        justify-content: flex-start;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
      }
    }
  
/* about.html embedded 2 */

    /* ==========================================================================
       Inlined nav.css
       ========================================================================== */

/* ==========================================================================
   Kaxon Technologies - Global Navigation Bar & Modal Stylesheet (nav.css)
   Pixel-perfect unified header according to design specification
   ========================================================================== */

:root:where([data-page="about"]) {
  --kx-navy: #13243D;
  --kx-deep-navy: #0D1B31;
  --kx-secondary-navy: #1B3152;
  --kx-gold: #F9BE22;
  --kx-gold-hover: #FFCA3A;
  --kx-green: #00D084;
  --kx-cyan: #52BCEB;
  --kx-soft-cyan: #EAF8FF;
  --kx-soft-gold: #FFF8DD;
  --kx-soft-green: #E8F8F0;
  --kx-white: #FFFFFF;
  --kx-gray: #F4F6FA;
  --kx-pill-bg: #EDF3FA;
  --kx-border: #E8EDF4;
  --kx-border-subtle: #F1F4F9;
  --kx-text-dark: #13243D;
  --kx-text-muted: #65748B;
  --kx-radius-pill: 9999px;
  --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
}

/* ==========================================================================
   GLOBAL HEADER BAR
   ========================================================================== */
:where(html[data-page="about"]) .kx-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: 1px solid rgba(232, 237, 244, 0.8);
  transition: all 0.3s ease;
}

:where(html[data-page="about"]) .kx-header.scrolled {
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.06);
  background: rgba(255, 255, 255, 0.98);
}

:where(html[data-page="about"]) .kx-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :where(html[data-page="about"]) .kx-container {
    padding: 0 16px;
  }
}

:where(html[data-page="about"]) .kx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Brand Logo */
:where(html[data-page="about"]) .kx-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0F1D32;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

:where(html[data-page="about"]) .kx-logo-tech {
  color: #00D084;
  font-weight: 800;
}

/* ==========================================================================
   CENTER NAVIGATION PILL CAPSULE
   ========================================================================== */
:where(html[data-page="about"]) .kx-nav-menu {
  display: flex;
  align-items: center;
  background: #EDF3FA;
  padding: 4px 6px;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(220, 230, 242, 0.85);
  box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
  flex-shrink: 1;
}

:where(html[data-page="about"]) .kx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

:where(html[data-page="about"]) .kx-nav-item {
  position: relative;
}

:where(html[data-page="about"]) .kx-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--kx-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

:where(html[data-page="about"]) .kx-nav-link:hover {
  color: #0F1D32;
  background: rgba(255, 255, 255, 0.7);
}

:where(html[data-page="about"]) .kx-nav-link.active {
  color: #0F1D32 !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
}

:where(html[data-page="about"]) .kx-nav-link::after,:where(html[data-page="about"]) 
.kx-nav-link.active::after {
  display: none !important;
}

:where(html[data-page="about"]) .kx-chevron-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  stroke: currentColor;
}

/* Dropdown */
:where(html[data-page="about"]) .kx-dropdown-wrapper {
  position: relative;
}

:where(html[data-page="about"]) .kx-dropdown-wrapper:hover .kx-chevron-icon,:where(html[data-page="about"]) 
.kx-dropdown-wrapper:focus-within .kx-chevron-icon {
  transform: rotate(180deg);
}

:where(html[data-page="about"]) .kx-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 250px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
  border: 1px solid var(--kx-border);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 100;
}

:where(html[data-page="about"]) .kx-dropdown-wrapper:hover .kx-dropdown-menu,:where(html[data-page="about"]) 
.kx-dropdown-wrapper:focus-within .kx-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

:where(html[data-page="about"]) .kx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #13243D;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

:where(html[data-page="about"]) .kx-dropdown-item:hover {
  background: #F0F7FF;
  color: #0F1D32;
}

/* ==========================================================================
   RIGHT ACTION BUTTONS
   ========================================================================== */
:where(html[data-page="about"]) .kx-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

:where(html[data-page="about"]) .kx-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0F1D32;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

:where(html[data-page="about"]) .kx-btn-pill-navy:hover {
  background: #1B2E4B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
}

:where(html[data-page="about"]) .kx-btn-pill-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F9BE22;
  color: #0F1D32;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
}

:where(html[data-page="about"]) .kx-btn-pill-gold:hover {
  background: #FFCA3A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
}

/* Mobile Hamburger Toggle */
:where(html[data-page="about"]) .kx-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0F1D32;
  border-radius: 8px;
  transition: background 0.2s ease;
}

:where(html[data-page="about"]) .kx-mobile-toggle:hover {
  background: #EDF3FA;
}

@media (max-width: 1240px) {
  :where(html[data-page="about"]) .kx-nav-actions .kx-btn-pill-navy {
    display: none;
  }
}

@media (max-width: 1100px) {
  :where(html[data-page="about"]) .kx-nav-menu {
    display: none;
  }

  :where(html[data-page="about"]) .kx-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  :where(html[data-page="about"]) .kx-nav-inner {
    height: 70px;
    gap: 8px;
  }
  :where(html[data-page="about"]) .kx-logo {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  :where(html[data-page="about"]) .kx-nav-actions .kx-btn-pill-gold {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  :where(html[data-page="about"]) .kx-logo {
    font-size: 18px;
  }
  :where(html[data-page="about"]) .kx-nav-actions {
    gap: 6px;
  }
  :where(html[data-page="about"]) .kx-nav-actions .kx-btn-pill-gold {
    padding: 7px 11px;
    font-size: 11.5px;
    gap: 4px;
  }
  :where(html[data-page="about"]) .kx-nav-actions .kx-btn-pill-gold svg {
    display: none;
  }
  :where(html[data-page="about"]) .kx-mobile-toggle {
    padding: 6px;
  }
}

@media (max-width: 360px) {
  :where(html[data-page="about"]) .kx-container {
    padding: 0 6px;
  }
  :where(html[data-page="about"]) .kx-nav-inner {
    gap: 2px;
  }
  :where(html[data-page="about"]) .kx-logo {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  :where(html[data-page="about"]) .kx-nav-actions {
    gap: 2px;
  }
  :where(html[data-page="about"]) .kx-nav-actions .kx-btn-pill-gold {
    padding: 5px 6px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  :where(html[data-page="about"]) .kx-mobile-toggle {
    padding: 2px;
  }
}

/* ==========================================================================
   MOBILE NAVIGATION DRAWER
   ========================================================================== */
:where(html[data-page="about"]) .kx-mobile-drawer {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  height: calc(100vh - 80px);
  background: #FFFFFF;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 999;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(19, 36, 61, 0.15);
}

@media (max-width: 768px) {
  :where(html[data-page="about"]) .kx-mobile-drawer {
    top: 70px;
    height: calc(100vh - 70px);
  }
}

:where(html[data-page="about"]) .kx-mobile-drawer.open,:where(html[data-page="about"]) 
.kx-mobile-drawer.active {
  transform: translateX(0);
}

:where(html[data-page="about"]) .kx-mobile-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #13243D;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 12px;
  transition: all 0.2s ease;
}

:where(html[data-page="about"]) .kx-mobile-nav-link:hover,:where(html[data-page="about"]) 
.kx-mobile-nav-link.active {
  background: #EDF3FA;
  color: #0F1D32;
}

:where(html[data-page="about"]) .kx-mobile-nav-link.sub {
  padding-left: 32px;
  font-size: 14px;
  font-weight: 600;
  color: #556987;
}

/* ==========================================================================
   GLOBAL LEAD / CONSULTATION MODAL
   ========================================================================== */
:where(html[data-page="about"]) .kx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 49, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  padding: 20px;
}

:where(html[data-page="about"]) .kx-modal-overlay.active,:where(html[data-page="about"]) 
.kx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

:where(html[data-page="about"]) .kx-modal-dialog {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
  border: 1px solid var(--kx-border);
  overflow: hidden;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

:where(html[data-page="about"]) .kx-modal-overlay.active .kx-modal-dialog,:where(html[data-page="about"]) 
.kx-modal-overlay.is-open .kx-modal-dialog {
  transform: scale(1) translateY(0);
}

:where(html[data-page="about"]) .kx-modal-header {
  padding: 28px 32px 16px;
  position: relative;
}

:where(html[data-page="about"]) .kx-modal-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--kx-navy);
  margin: 0 0 6px;
}

:where(html[data-page="about"]) .kx-modal-subtitle {
  font-size: 14px;
  color: var(--kx-text-muted);
  margin: 0;
}

:where(html[data-page="about"]) .kx-modal-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--kx-gray);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-navy);
  transition: background 0.2s ease, transform 0.2s ease;
}

:where(html[data-page="about"]) .kx-modal-close:hover {
  background: #E2E8F0;
  transform: rotate(90deg);
}

:where(html[data-page="about"]) .kx-modal-body {
  padding: 0 32px 32px;
}

:where(html[data-page="about"]) .kx-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:where(html[data-page="about"]) .kx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

:where(html[data-page="about"]) .kx-form-label {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kx-navy);
}

:where(html[data-page="about"]) .kx-form-input,:where(html[data-page="about"]) 
.kx-form-textarea,:where(html[data-page="about"]) 
.kx-form-select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--kx-border);
  background: var(--kx-gray);
  color: var(--kx-navy);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

:where(html[data-page="about"]) .kx-form-input:focus,:where(html[data-page="about"]) 
.kx-form-textarea:focus,:where(html[data-page="about"]) 
.kx-form-select:focus {
  outline: none;
  border-color: var(--kx-navy);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
}

:where(html[data-page="about"]) .kx-modal-submit {
  background: var(--kx-navy);
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

:where(html[data-page="about"]) .kx-modal-submit:hover {
  background: var(--kx-deep-navy);
  transform: translateY(-1px);
}

/* ==========================================================================
   FOOTER (Fluid Responsive Grid & Mobile Optimization)
   ========================================================================== */
:where(html[data-page="about"]) .site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
  position: relative;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

:where(html[data-page="about"]) .site-footer .container,:where(html[data-page="about"]) 
.site-footer .kx-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

:where(html[data-page="about"]) .footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

:where(html[data-page="about"]) .footer-brand {
  min-width: 0;
}

:where(html[data-page="about"]) .footer-brand .brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

:where(html[data-page="about"]) .footer-brand .brand-logo .dot {
  color: #2FB7A7;
}

:where(html[data-page="about"]) .footer-brand p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  max-width: 290px;
}

:where(html[data-page="about"]) .footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

:where(html[data-page="about"]) .footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

:where(html[data-page="about"]) .footer-links a {
  font-size: 0.835rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

:where(html[data-page="about"]) .footer-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

:where(html[data-page="about"]) .footer-follow-wrapper {
  margin-top: 24px;
}

:where(html[data-page="about"]) .footer-follow-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

:where(html[data-page="about"]) .footer-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

:where(html[data-page="about"]) .social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  text-decoration: none;
  transition: var(--transition);
}

:where(html[data-page="about"]) .social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

:where(html[data-page="about"]) .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  flex-wrap: wrap;
  gap: 12px;
}

/* Floating WhatsApp Button */
:where(html[data-page="about"]) .floating-whatsapp-btn {
  position: fixed;
  bottom: clamp(16px, 3vw, 24px);
  right: clamp(16px, 3vw, 24px);
  width: clamp(48px, 6vw, 56px);
  height: clamp(48px, 6vw, 56px);
  background-color: #25D366;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.38);
  z-index: 990;
  transition: var(--transition);
  text-decoration: none;
}

:where(html[data-page="about"]) .floating-whatsapp-btn:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.50);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (Granular, Progressive Adaptation)
   ========================================================================== */

/* 1. Large Tablet / Medium Laptops (1180px - 1025px) */
@media (max-width: 1180px) {
  :where(html[data-page="about"]) .nav-link {
    padding: 6px 9px;
    font-size: 0.82rem;
  }
  :where(html[data-page="about"]) .btn-nav-phone {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  :where(html[data-page="about"]) .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  :where(html[data-page="about"]) .footer-top-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}

/* 2. Tablets & Mobile Breakpoint (<= 1024px) */
@media (max-width: 1024px) {
  :root:where([data-page="about"]) {
    --header-height: 66px;
  }
  :where(html[data-page="about"]) .nav-menu-wrapper,:where(html[data-page="about"]) 
  .btn-phone-desktop {
    display: none !important;
  }
  :where(html[data-page="about"]) .hamburger-btn {
    display: flex !important;
  }
  :where(html[data-page="about"]) .btn-cta-desktop {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  :where(html[data-page="about"]) .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  :where(html[data-page="about"]) .footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  :where(html[data-page="about"]) .footer-brand p {
    max-width: 100%;
  }
}

/* 3. Small Tablets & Phablets (<= 768px) */
@media (max-width: 768px) {
  :root:where([data-page="about"]) {
    --header-height: 62px;
  }
  :where(html[data-page="about"]) .btn-cta-desktop {
    display: none !important;
  }
  :where(html[data-page="about"]) .site-footer {
    padding: 46px 0 24px;
  }
  :where(html[data-page="about"]) .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding-bottom: 28px;
  }
}

/* 4. Standard Mobile Screens (<= 540px) */
@media (max-width: 540px) {
  :root:where([data-page="about"]) {
    --header-height: 58px;
  }
  :where(html[data-page="about"]) .nav-container {
    padding: 0 14px;
  }
  :where(html[data-page="about"]) .hamburger-btn {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  :where(html[data-page="about"]) .hamburger-btn span {
    width: 20px;
  }
  :where(html[data-page="about"]) .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  :where(html[data-page="about"]) .footer-brand {
    grid-column: 1 / -1;
  }
  :where(html[data-page="about"]) .footer-col-company {
    grid-column: 1;
  }
  :where(html[data-page="about"]) .footer-col-solutions {
    grid-column: 2;
  }
  :where(html[data-page="about"]) .footer-col-resources {
    grid-column: 1 / -1;
  }
  :where(html[data-page="about"]) .footer-col h5 {
    margin-bottom: 12px;
  }
  :where(html[data-page="about"]) .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* 5. Ultra-Small Devices (<= 360px) */
@media (max-width: 360px) {
  :where(html[data-page="about"]) .brand-logo {
    font-size: 1.15rem;
  }
  :where(html[data-page="about"]) .mobile-nav-drawer {
    width: 90vw;
    padding: 18px 14px 22px;
  }
  :where(html[data-page="about"]) .mobile-nav-link {
    font-size: 0.95rem;
  }
}
  
/* shared-chrome.css */
@scope (:where(html[data-page="about"]) .shared-kx-header,:where(html[data-page="about"])  .shared-kx-mobile-drawer,:where(html[data-page="about"])  .shared-site-footer) {
:scope { --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif; --container-max: 1240px; --color-yellow: #F8C72E; --color-primary-navy: #14243D; --transition: all .2s ease; font-family: var(--font-body, 'Plus Jakarta Sans', 'Inter', sans-serif); line-height: 1.5; }
:where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(a) { text-decoration: none; }



:scope {
  --kx-navy: #13243D;
  --kx-deep-navy: #0D1B31;
  --kx-secondary-navy: #1B3152;
  --kx-gold: #F9BE22;
  --kx-gold-hover: #FFCA3A;
  --kx-green: #00D084;
  --kx-cyan: #52BCEB;
  --kx-soft-cyan: #EAF8FF;
  --kx-soft-gold: #FFF8DD;
  --kx-soft-green: #E8F8F0;
  --kx-white: #FFFFFF;
  --kx-gray: #F4F6FA;
  --kx-pill-bg: #EDF3FA;
  --kx-border: #E8EDF4;
  --kx-border-subtle: #F1F4F9;
  --kx-text-dark: #13243D;
  --kx-text-muted: #65748B;
  --kx-radius-pill: 9999px;
  --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
}


:scope.shared-kx-header,
.shared-kx-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: 1px solid rgba(232, 237, 244, 0.8);
  transition: all 0.25s ease;
}

:scope.shared-kx-header.scrolled,
.shared-kx-header.scrolled {
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

:scope.shared-kx-header.menu-open,
.shared-kx-header.menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

.shared-kx-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .shared-kx-container {
    padding: 0 16px;
  }
}

.shared-kx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
}


.shared-kx-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0F1D32;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

.shared-kx-logo-tech {
  color: #00D084;
  font-weight: 800;
}


.shared-kx-nav-menu {
  display: flex;
  align-items: center;
  background: #EDF3FA;
  padding: 4px 6px;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(220, 230, 242, 0.85);
  box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
  flex-shrink: 1;
}

.shared-kx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shared-kx-nav-item {
  position: relative;
}

.shared-kx-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--kx-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-nav-link:hover {
  color: #0F1D32;
  background: rgba(255, 255, 255, 0.7);
}

.shared-kx-nav-link.active {
  color: #0F1D32 !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
}

.shared-kx-nav-link::after,
.shared-kx-nav-link.active::after {
  display: none !important;
}

.shared-kx-chevron-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  stroke: currentColor;
}


.shared-kx-dropdown-wrapper {
  position: relative;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper.open .shared-kx-chevron-icon {
  transform: rotate(180deg);
}

.shared-kx-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 250px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
  border: 1px solid var(--kx-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  pointer-events: none;
  z-index: 100;
}

/* Invisible hover bridge to eliminate the 8px cursor gap */
.shared-kx-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
  background: transparent;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper.open .shared-kx-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.shared-kx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #13243D;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.shared-kx-dropdown-item:hover {
  background: #F0F7FF;
  color: #0F1D32;
}


.shared-kx-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.shared-kx-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0F1D32;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-btn-pill-navy:hover {
  background: #1B2E4B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
}

.shared-kx-btn-pill-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F9BE22;
  color: #0F1D32;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
}

.shared-kx-btn-pill-gold:hover {
  background: #FFCA3A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
}

.shared-kx-btn-pill-navy:active,
.shared-kx-btn-pill-gold:active,
.kx-modal-submit:active {
  transform: translateY(0) scale(0.98);
}


.shared-kx-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0F1D32;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.shared-kx-mobile-toggle:hover {
  background: #EDF3FA;
}

@media (max-width: 1240px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-navy {
    display: none;
  }
}

@media (max-width: 1100px) {
  .shared-kx-nav-menu {
    display: none;
  }

  .shared-kx-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .shared-kx-nav-inner {
    height: 70px;
    gap: 8px;
  }
  .shared-kx-logo {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .shared-kx-logo {
    font-size: 18px;
  }
  .shared-kx-nav-actions {
    gap: 6px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 7px 11px;
    font-size: 11.5px;
    gap: 4px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold svg {
    display: none;
  }
  .shared-kx-mobile-toggle {
    padding: 6px;
  }
}

@media (max-width: 360px) {
  .shared-kx-container {
    padding: 0 6px;
  }
  .shared-kx-nav-inner {
    gap: 2px;
  }
  .shared-kx-logo {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  .shared-kx-nav-actions {
    gap: 2px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 5px 6px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  .shared-kx-mobile-toggle {
    padding: 2px;
  }
}


:scope.shared-kx-mobile-drawer,
.shared-kx-mobile-drawer {
  position: fixed;
  top: var(--header-height, 78px);
  left: 0;
  width: 100%;
  height: calc(100dvh - var(--header-height, 78px));
  background: #FFFFFF !important;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 40px rgba(19, 36, 61, 0.12);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :scope.shared-kx-mobile-drawer,
  .shared-kx-mobile-drawer {
    top: var(--header-height, 70px);
    height: calc(100dvh - var(--header-height, 70px));
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

:scope.shared-kx-mobile-drawer.open,
:scope.shared-kx-mobile-drawer.active,
.shared-kx-mobile-drawer.open,
.shared-kx-mobile-drawer.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  pointer-events: auto;
}

.shared-kx-mobile-nav-link {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 650;
  color: #14243D;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 12px;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.shared-kx-mobile-nav-link:hover {
  background: #F8FAFC;
  color: #0E1B2F;
}

.shared-kx-mobile-nav-link.active {
  background: #F4F7FB !important;
  color: #0E1B2F !important;
  font-weight: 750 !important;
  border-left: 3px solid #F8C72E;
  padding-left: 13px;
}

.shared-kx-mobile-nav-link.shared-sub {
  margin-left: 12px;
  margin-right: 4px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 550;
  color: #556987;
  background: #F8FAFC;
  border-radius: 10px;
  border-left: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.shared-kx-mobile-nav-link.shared-sub::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94A3B8;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.shared-kx-mobile-nav-link.shared-sub:hover,
.shared-kx-mobile-nav-link.shared-sub.active {
  background: #EDF4FB;
  color: #0E1B2F;
  border-left-color: #F8C72E;
}

.shared-kx-mobile-nav-link.shared-sub.active::before {
  background: #F8C72E;
  transform: scale(1.4);
}

.shared-kx-mobile-drawer-footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #EEF2F6;
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-gold {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(248, 199, 46, 0.3);
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-navy {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
  border-radius: 9999px;
}


.kx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 49, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  padding: 20px;
}

.kx-modal-overlay.active,
.kx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.kx-modal-dialog {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
  border: 1px solid var(--kx-border);
  overflow: hidden;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.kx-modal-overlay.active .kx-modal-dialog,
.kx-modal-overlay.is-open .kx-modal-dialog {
  transform: scale(1) translateY(0);
}

.kx-modal-header {
  padding: 28px 32px 16px;
  position: relative;
}

.kx-modal-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--kx-navy);
  margin: 0 0 6px;
}

.kx-modal-subtitle {
  font-size: 14px;
  color: var(--kx-text-muted);
  margin: 0;
}

.kx-modal-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--kx-gray);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-navy);
  transition: background 0.2s ease, transform 0.2s ease;
}

.kx-modal-close:hover {
  background: #E2E8F0;
  transform: rotate(90deg);
}

.kx-modal-body {
  padding: 0 32px 32px;
}

.kx-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx-form-label {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kx-navy);
}

.kx-form-input,
.kx-form-textarea,
.kx-form-select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--kx-border);
  background: var(--kx-gray);
  color: var(--kx-navy);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.kx-form-input:focus,
.kx-form-textarea:focus,
.kx-form-select:focus {
  outline: none;
  border-color: var(--kx-navy);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
}

.kx-modal-submit {
  background: var(--kx-navy);
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.kx-modal-submit:hover {
  background: var(--kx-deep-navy);
  transform: translateY(-1px);
}


:scope.shared-site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
  position: relative;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

:scope.shared-site-footer .shared-container,
:scope.shared-site-footer .shared-kx-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

.shared-footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand {
  min-width: 0;
}

.shared-footer-brand .shared-brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand .shared-brand-logo .shared-dot {
  color: #2FB7A7;
}

.shared-footer-brand p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  max-width: 290px;
}

.shared-footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.shared-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.shared-footer-links a {
  font-size: 0.835rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.shared-footer-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

.shared-footer-follow-wrapper {
  margin-top: 24px;
}

.shared-footer-follow-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.shared-footer-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.shared-social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  text-decoration: none;
  transition: var(--transition);
}

.shared-social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

.shared-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  flex-wrap: wrap;
  gap: 12px;
}


@media (max-width: 1180px) {
  .nav-link {
    padding: 6px 9px;
    font-size: 0.82rem;
  }
  .btn-nav-phone {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}


@media (max-width: 1024px) {
  :scope {
    --header-height: 66px;
  }
  .nav-menu-wrapper,
  .btn-phone-desktop {
    display: none !important;
  }
  .hamburger-btn {
    display: flex !important;
  }
  .btn-cta-desktop {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .shared-footer-brand p {
    max-width: 100%;
  }
}


@media (max-width: 768px) {
  :scope {
    --header-height: 62px;
  }
  .btn-cta-desktop {
    display: none !important;
  }
  .shared-site-footer {
    padding: 46px 0 24px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding-bottom: 28px;
  }
}


@media (max-width: 540px) {
  :scope {
    --header-height: 58px;
  }
  .nav-container {
    padding: 0 14px;
  }
  .hamburger-btn {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  .hamburger-btn span {
    width: 20px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
  }
  .shared-footer-col-company {
    grid-column: 1;
  }
  .shared-footer-col-solutions {
    grid-column: 2;
  }
  .shared-footer-col-resources {
    grid-column: 1 / -1;
  }
  .shared-footer-col h5 {
    margin-bottom: 12px;
  }
  .shared-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


@media (max-width: 360px) {
  .shared-brand-logo {
    font-size: 1.15rem;
  }
  .mobile-nav-drawer {
    width: 90vw;
    padding: 18px 14px 22px;
  }
  .mobile-nav-link {
    font-size: 0.95rem;
  }
}
  
}
:where(html[data-page="about"]) .shared-kx-mobile-drawer { visibility: hidden; }
:where(html[data-page="about"]) .shared-kx-mobile-drawer.open { visibility: visible; }
:where(html[data-page="about"]) .shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="about"]) .shared-kx-btn-pill-navy:active,:where(html[data-page="about"]) 
  .shared-kx-btn-pill-gold:active,:where(html[data-page="about"]) 
  .kx-modal-submit:active { transform: none; }
}

/* micro-interactions.css */
/* Shared feedback layer. Motion acknowledges actions; informational content stays still. */
:root:where([data-page="about"]){--kx-feedback-ease:cubic-bezier(.2,.75,.25,1);--kx-feedback-duration:180ms}
:where(html[data-page="about"]) :where(a,button,summary,input,textarea,select):focus-visible{outline:3px solid #187d6b!important;outline-offset:4px}
:where(html[data-page="about"]) :where(.shared-kx-footer,.ma-dark,.ma-closing) :where(a,button):focus-visible{outline-color:#ffc526!important}
:where(html[data-page="about"]) :where(button,summary,.kx-mi-action){-webkit-tap-highlight-color:rgba(245,169,22,.18);touch-action:manipulation}
:where(html[data-page="about"]) .kx-mi-action{transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease),scale 120ms var(--kx-feedback-ease),box-shadow var(--kx-feedback-duration) var(--kx-feedback-ease),background-color var(--kx-feedback-duration) ease,border-color var(--kx-feedback-duration) ease!important}
:where(html[data-page="about"]) .kx-mi-arrow{display:inline-block;transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease)!important}
:where(html[data-page="about"]) .kx-mi-card{transition:translate 220ms var(--kx-feedback-ease),box-shadow 220ms var(--kx-feedback-ease),border-color 180ms ease!important}
:where(html[data-page="about"]) .shared-footer-links a,:where(html[data-page="about"]) .shared-kx-dropdown-item,:where(html[data-page="about"]) .shared-kx-mobile-nav-link{ text-decoration-color:transparent;text-underline-offset:5px;transition:color 160ms ease,background-color 160ms ease,text-decoration-color 160ms ease!important}
:where(html[data-page="about"]) .shared-footer-links a:focus-visible{ text-decoration:underline;text-decoration-color:currentColor }
:where(html[data-page="about"]) :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea,select){transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease!important}
:where(html[data-page="about"]) :where(input:not([type=checkbox]):not([type=radio]),textarea,select):focus{border-color:#187d6b!important;box-shadow:0 0 0 3px rgb(24 125 107 / .12)}
:where(html[data-page="about"]) :where(button[aria-expanded],summary){transition:background-color 160ms ease,color 160ms ease!important}
:where(html[data-page="about"]) :where(button[aria-expanded],summary):focus-visible{border-radius:8px}
@media(hover:hover) and (pointer:fine){
  :where(html[data-page="about"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):hover{translate:0 -2px}
  :where(html[data-page="about"]) .kx-mi-action:hover .kx-mi-arrow,:where(html[data-page="about"]) .kx-mi-action:focus-visible .kx-mi-arrow{translate:3px 0}
  :where(html[data-page="about"]) .kx-mi-card:hover,:where(html[data-page="about"]) .kx-mi-card:focus-within{translate:0 -3px;border-color:#d8ba78;box-shadow:0 10px 24px rgb(16 32 57 / .08)}
  :where(html[data-page="about"]) .shared-footer-links a:hover{text-decoration:underline;text-decoration-color:currentColor}
}
:where(html[data-page="about"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):active{translate:0 0;scale:.98;transition-duration:80ms!important}
:where(html[data-page="about"]) .kx-mi-card:active{translate:0 -1px}
/* Honor this preference for both this layer and pre-existing decorative loops. */
@media(prefers-reduced-motion:reduce){
  html:where([data-page="about"]){scroll-behavior:auto!important}
  :where(html[data-page="about"]) *,:where(html[data-page="about"]) *::before,:where(html[data-page="about"]) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  :where(html[data-page="about"]) .kx-mi-action,:where(html[data-page="about"]) .kx-mi-card,:where(html[data-page="about"]) .kx-mi-arrow{translate:none!important;scale:none!important;transition:none!important}
  :where(html[data-page="about"]) .shared-footer-links a,:where(html[data-page="about"]) .shared-kx-dropdown-item,:where(html[data-page="about"]) .shared-kx-mobile-nav-link{transition:none!important}
}

/* page-container-rhythm.css */
/* Shared page rhythm: mirrors the Industries page container at every breakpoint. */
:root:where([data-page="about"]) {
  --kx-page-container: 1240px;
  --kx-page-gutter: 24px;
}

:where(html[data-page="about"]) .shared-kx-header > .shared-kx-container,:where(html[data-page="about"]) 
.ux-page .shared-kx-container,:where(html[data-page="about"]) 
main > section > :is(
  .container,
  .su-container,
  .impact-container,
  .origin-desktop-view,
  .phil-container,
  .journey-tl-container,
  .careersHero-container,
  .chFeels-container,
  .contact-hero-v2-container,
  .contact-container,
  .taste-inner,
  .ai-container,
  .rv-container,
  .wd-container,
  .wd-tech-container,
  .wd-testi-faq-container,
  .kx-ah-container,
  .ma-container,
  .kats-container,
  .cloud-hero-container,
  .kx-container
),:where(html[data-page="about"]) 
body > section > :is(
  .container,
  .contact-container,
  .cloud-hero-container,
  .kx-container
) {
  width: 100% !important;
  max-width: var(--kx-page-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--kx-page-gutter) !important;
  padding-right: var(--kx-page-gutter) !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  :root:where([data-page="about"]) { --kx-page-gutter: 16px; }
}

/* This section previously put its gutter on the full-width background itself. */
@media (max-width: 1023px) {
  :where(html[data-page="about"]) .wd-tech-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}



/* PAGE services */
/* services.html embedded 1 */

    /* ==========================================================================
   KAXON TECHNOLOGIES - SERVICES PAGE STYLESHEET
   Pixel-perfect implementation of the Services design benchmark
   ========================================================================== */

    :root:where([data-page="services"]) {
      --bg-primary: #FFFDF8;
      --bg-secondary: #FAF8F1;
      --bg-warm: #FFF7E7;
      --bg-cool: #F4F8FC;
      --bg-white: #FFFFFF;

      --navy: #10233F;
      --navy-dark: #0B1A30;
      --navy-light: #1E375B;

      --gold: #FFC928;
      --gold-dark: #F5A623;
      --gold-light: #FFF4D2;
      --gold-hover: #FFD452;

      --blue: #4D8DFF;
      --blue-light: #EBF3FF;
      --green: #20B874;
      --green-light: #E8F8F0;
      --purple: #8B60F6;
      --purple-light: #F3EFFE;
      --coral: #F43F5E;
      --coral-light: #FFE8EC;

      --text-main: #10233F;
      --text-muted: #5B6F89;
      --text-subtle: #8A9BAE;

      --border-light: rgba(16, 35, 63, 0.08);
      --border-card: #EAEFF5;
      --border-subtle: #F0F4F8;

      --font-display: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
      --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
      --font-hand: 'Caveat', cursive;

      --radius-pill: 9999px;
      --radius-card: 20px;
      --radius-card-lg: 28px;

      --shadow-sm: 0 4px 12px rgba(16, 35, 63, 0.04);
      --shadow-card: 0 10px 30px rgba(16, 35, 63, 0.05);
      --shadow-hover: 0 18px 45px rgba(16, 35, 63, 0.10);
      --shadow-floating: 0 14px 35px rgba(16, 35, 63, 0.12);
      --shadow-gold: 0 8px 24px rgba(255, 201, 40, 0.35);
    }

    :where(html[data-page="services"]) * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html:where([data-page="services"]) {
      scroll-behavior: smooth;
    }

    :where(html[data-page="services"]) body {
      font-family: var(--font-body);
      background-color: var(--bg-primary);
      color: var(--text-main);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    /* Background Texture & Ambient Mesh */
    :where(html[data-page="services"]) .kx-bg-canvas {
      position: fixed;
      inset: 0;
      background-image:
        radial-gradient(rgba(16, 35, 63, 0.09) 0.8px, transparent 0.8px),
        radial-gradient(circle at 10% 20%, rgba(255, 201, 40, 0.02) 0%, transparent 40%),
        radial-gradient(circle at 90% 60%, rgba(77, 141, 255, 0.02) 0%, transparent 40%);
      background-size: 28px 28px, 100% 100%, 100% 100%;
      opacity: 0.6;
      pointer-events: none;
      z-index: -1;
    }

    :where(html[data-page="services"]) h1,:where(html[data-page="services"]) 
    h2,:where(html[data-page="services"]) 
    h3,:where(html[data-page="services"]) 
    h4,:where(html[data-page="services"]) 
    h5,:where(html[data-page="services"]) 
    h6 {
      font-family: var(--font-display);
      color: var(--navy);
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.025em;
    }

    :where(html[data-page="services"]) a {
      text-decoration: none;
      color: inherit;
      transition: all 0.2s ease;
    }

    :where(html[data-page="services"]) ul {
      list-style: none;
    }

    :where(html[data-page="services"]) .kx-container {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 32px;
    }

    /* Utilities */
    :where(html[data-page="services"]) .kx-text-gold {
      color: var(--gold-dark);
    }

    :where(html[data-page="services"]) .kx-text-gradient {
      background: linear-gradient(135deg, #F5A623 0%, #FFC928 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline;
    }

    :where(html[data-page="services"]) .kx-underline-gold {
      color: var(--gold-dark);
      position: relative;
      display: inline-block;
    }

    :where(html[data-page="services"]) .kx-underline-gold::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 2px;
      width: 100%;
      height: 4px;
      background: var(--gold);
      border-radius: 2px;
      z-index: -1;
    }

    :where(html[data-page="services"]) .kx-pill-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #FFFFFF;
      border: 1px solid var(--border-light);
      padding: 5px 14px;
      border-radius: var(--radius-pill);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--navy);
      box-shadow: 0 2px 8px rgba(16, 35, 63, 0.04);
    }

    :where(html[data-page="services"]) .kx-pill-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--gold-dark);
    }

    :where(html[data-page="services"]) .kx-handwriting {
      font-family: var(--font-hand);
      color: var(--navy);
      font-size: 22px;
      line-height: 1.1;
      user-select: none;
    }

    :where(html[data-page="services"]) .kx-handwriting.green {
      color: #20B874;
    }

    :where(html[data-page="services"]) .kx-handwriting.white {
      color: #FFFFFF;
    }

    /* ==========================================================================
   HERO SECTION
   ========================================================================== */
    :where(html[data-page="services"]) .kx-services-hero {
      padding: 56px 0 50px;
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="services"]) .kx-hero-grid {
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      gap: 56px;
      align-items: center;
    }

    :where(html[data-page="services"]) .kx-hero-left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    :where(html[data-page="services"]) .kx-hero-left .kx-pill-eyebrow {
      margin-bottom: 22px;
    }

    :where(html[data-page="services"]) .kx-hero-headline {
      font-size: clamp(40px, 4.4vw, 58px);
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: -0.035em;
      margin-bottom: 20px;
      color: var(--navy);
    }

    :where(html[data-page="services"]) .kx-hero-sub {
      font-size: 16.5px;
      line-height: 1.6;
      color: var(--text-muted);
      max-width: 530px;
      margin-bottom: 30px;
    }

    :where(html[data-page="services"]) .kx-hero-cta-group {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 36px;
      flex-wrap: wrap;
    }

    :where(html[data-page="services"]) .kx-btn-hero-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: var(--gold);
      color: var(--navy);
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 15px;
      padding: 0 28px;
      height: 52px;
      border-radius: var(--radius-pill);
      border: none;
      cursor: pointer;
      box-shadow: var(--shadow-gold);
      transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    }

    :where(html[data-page="services"]) .kx-btn-hero-primary:hover {
      background: var(--gold-hover);
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(255, 201, 40, 0.45);
    }

    :where(html[data-page="services"]) .kx-btn-hero-primary .arrow {
      transition: transform 0.2s ease;
    }

    :where(html[data-page="services"]) .kx-btn-hero-primary:hover .arrow {
      transform: translateX(3px);
    }

    :where(html[data-page="services"]) .kx-btn-hero-secondary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: transparent;
      color: var(--navy);
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 15px;
      padding: 0 16px;
      height: 52px;
      border-radius: var(--radius-pill);
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    :where(html[data-page="services"]) .kx-btn-hero-secondary:hover {
      color: var(--navy-dark);
      transform: translateX(2px);
    }

    :where(html[data-page="services"]) .kx-play-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--navy);
      color: #FFFFFF;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }
/* services.html embedded 2 */

    /* ==========================================================================
       Inlined nav.css
       ========================================================================== */

    /* ==========================================================================
   Kaxon Technologies - Global Navigation Bar & Modal Stylesheet (nav.css)
   Pixel-perfect unified header according to design specification
   ========================================================================== */

    :root:where([data-page="services"]) {
      --kx-navy: #13243D;
      --kx-deep-navy: #0D1B31;
      --kx-secondary-navy: #1B3152;
      --kx-gold: #F9BE22;
      --kx-gold-hover: #FFCA3A;
      --kx-green: #00D084;
      --kx-cyan: #52BCEB;
      --kx-soft-cyan: #EAF8FF;
      --kx-soft-gold: #FFF8DD;
      --kx-soft-green: #E8F8F0;
      --kx-white: #FFFFFF;
      --kx-gray: #F4F6FA;
      --kx-pill-bg: #EDF3FA;
      --kx-border: #E8EDF4;
      --kx-border-subtle: #F1F4F9;
      --kx-text-dark: #13243D;
      --kx-text-muted: #65748B;
      --kx-radius-pill: 9999px;
      --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
    }

    /* ==========================================================================
   GLOBAL HEADER BAR
   ========================================================================== */
    :where(html[data-page="services"]) .kx-header {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      z-index: 1000;
      border-bottom: 1px solid rgba(232, 237, 244, 0.8);
      transition: all 0.3s ease;
    }

    :where(html[data-page="services"]) .kx-header.scrolled {
      box-shadow: 0 10px 30px rgba(19, 36, 61, 0.06);
      background: rgba(255, 255, 255, 0.98);
    }

    :where(html[data-page="services"]) .kx-container {
      width: 100%;
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 32px;
      box-sizing: border-box;
    }

    @media (max-width: 768px) {
      :where(html[data-page="services"]) .kx-container {
        padding: 0 16px;
      }
    }

    :where(html[data-page="services"]) .kx-nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 78px;
      gap: 12px;
      max-width: 100%;
      box-sizing: border-box;
    }

    /* Brand Logo */
    :where(html[data-page="services"]) .kx-logo {
      display: flex;
      align-items: center;
      gap: 2px;
      font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.035em;
      color: #0F1D32;
      text-decoration: none;
      user-select: none;
      flex-shrink: 0;
    }

    :where(html[data-page="services"]) .kx-logo-tech {
      color: #00D084;
      font-weight: 800;
    }

    /* ==========================================================================
   CENTER NAVIGATION PILL CAPSULE
   ========================================================================== */
    :where(html[data-page="services"]) .kx-nav-menu {
      display: flex;
      align-items: center;
      background: #EDF3FA;
      padding: 4px 6px;
      border-radius: var(--kx-radius-pill);
      border: 1px solid rgba(220, 230, 242, 0.85);
      box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
      flex-shrink: 1;
    }

    :where(html[data-page="services"]) .kx-nav-links {
      display: flex;
      align-items: center;
      gap: 2px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    :where(html[data-page="services"]) .kx-nav-item {
      position: relative;
    }

    :where(html[data-page="services"]) .kx-nav-link {
      font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 13.5px;
      font-weight: 600;
      color: #334155;
      text-decoration: none;
      padding: 6px 11px;
      border-radius: var(--kx-radius-pill);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      position: relative;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
    }

    :where(html[data-page="services"]) .kx-nav-link:hover {
      color: #0F1D32;
      background: rgba(255, 255, 255, 0.7);
    }

    :where(html[data-page="services"]) .kx-nav-link.active {
      color: #0F1D32 !important;
      font-weight: 700 !important;
      background: #FFFFFF !important;
      box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
    }

    :where(html[data-page="services"]) .kx-nav-link::after,:where(html[data-page="services"]) 
    .kx-nav-link.active::after {
      display: none !important;
    }

    :where(html[data-page="services"]) .kx-chevron-icon {
      transition: transform 0.2s ease;
      flex-shrink: 0;
      stroke: currentColor;
    }

    /* Dropdown */
    :where(html[data-page="services"]) .kx-dropdown-wrapper {
      position: relative;
    }

    :where(html[data-page="services"]) .kx-dropdown-wrapper:hover .kx-chevron-icon,:where(html[data-page="services"]) 
    .kx-dropdown-wrapper:focus-within .kx-chevron-icon {
      transform: rotate(180deg);
    }

    :where(html[data-page="services"]) .kx-dropdown-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      width: 250px;
      background: #FFFFFF;
      border-radius: 16px;
      padding: 10px;
      box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
      border: 1px solid var(--kx-border);
      opacity: 0;
      visibility: hidden;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
      z-index: 100;
    }

    :where(html[data-page="services"]) .kx-dropdown-wrapper:hover .kx-dropdown-menu,:where(html[data-page="services"]) 
    .kx-dropdown-wrapper:focus-within .kx-dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }

    :where(html[data-page="services"]) .kx-dropdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      border-radius: 10px;
      font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: #13243D;
      text-decoration: none;
      transition: background 0.18s ease, color 0.18s ease;
    }

    :where(html[data-page="services"]) .kx-dropdown-item:hover {
      background: #F0F7FF;
      color: #0F1D32;
    }

    /* ==========================================================================
   RIGHT ACTION BUTTONS
   ========================================================================== */
    :where(html[data-page="services"]) .kx-nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    :where(html[data-page="services"]) .kx-btn-pill-navy {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #0F1D32;
      color: #FFFFFF;
      font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 13.5px;
      font-weight: 700;
      padding: 9px 18px;
      border-radius: var(--kx-radius-pill);
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
    }

    :where(html[data-page="services"]) .kx-btn-pill-navy:hover {
      background: #1B2E4B;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
    }

    :where(html[data-page="services"]) .kx-btn-pill-gold {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #F9BE22;
      color: #0F1D32;
      font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 13.5px;
      font-weight: 800;
      padding: 9px 20px;
      border-radius: var(--kx-radius-pill);
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
      box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
    }

    :where(html[data-page="services"]) .kx-btn-pill-gold:hover {
      background: #FFCA3A;
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
    }

    /* Mobile Hamburger Toggle */
    :where(html[data-page="services"]) .kx-mobile-toggle {
      display: none;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 8px;
      color: #0F1D32;
      border-radius: 8px;
      transition: background 0.2s ease;
    }

    :where(html[data-page="services"]) .kx-mobile-toggle:hover {
      background: #EDF3FA;
    }

    @media (max-width: 1240px) {
      :where(html[data-page="services"]) .kx-nav-actions .kx-btn-pill-navy {
        display: none;
      }
    }

    @media (max-width: 1100px) {
      :where(html[data-page="services"]) .kx-nav-menu {
        display: none;
      }

      :where(html[data-page="services"]) .kx-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="services"]) .kx-nav-inner {
        height: 70px;
        gap: 8px;
      }

      :where(html[data-page="services"]) .kx-logo {
        font-size: 20px;
      }
    }

    @media (max-width: 600px) {
      :where(html[data-page="services"]) .kx-nav-actions .kx-btn-pill-gold {
        padding: 8px 14px;
        font-size: 12.5px;
      }
    }

    @media (max-width: 480px) {
      :where(html[data-page="services"]) .kx-logo {
        font-size: 18px;
      }

      :where(html[data-page="services"]) .kx-nav-actions {
        gap: 6px;
      }

      :where(html[data-page="services"]) .kx-nav-actions .kx-btn-pill-gold {
        padding: 7px 11px;
        font-size: 11.5px;
        gap: 4px;
      }

      :where(html[data-page="services"]) .kx-nav-actions .kx-btn-pill-gold svg {
        display: none;
      }

      :where(html[data-page="services"]) .kx-mobile-toggle {
        padding: 6px;
      }
    }

    @media (max-width: 360px) {
      :where(html[data-page="services"]) .kx-container {
        padding: 0 6px;
      }

      :where(html[data-page="services"]) .kx-nav-inner {
        gap: 2px;
      }

      :where(html[data-page="services"]) .kx-logo {
        font-size: 14px;
        letter-spacing: -0.04em;
      }

      :where(html[data-page="services"]) .kx-nav-actions {
        gap: 2px;
      }

      :where(html[data-page="services"]) .kx-nav-actions .kx-btn-pill-gold {
        padding: 5px 6px;
        font-size: 10px;
        letter-spacing: -0.01em;
      }

      :where(html[data-page="services"]) .kx-mobile-toggle {
        padding: 2px;
      }
    }

    /* ==========================================================================
   MOBILE NAVIGATION DRAWER
   ========================================================================== */
    :where(html[data-page="services"]) .kx-mobile-drawer {
      position: fixed;
      top: 80px;
      left: 0;
      width: 100%;
      height: calc(100vh - 80px);
      background: #FFFFFF;
      padding: 24px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transform: translateX(-100%);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 999;
      overflow-y: auto;
      box-shadow: 0 20px 40px rgba(19, 36, 61, 0.15);
    }

    @media (max-width: 768px) {
      :where(html[data-page="services"]) .kx-mobile-drawer {
        top: 70px;
        height: calc(100vh - 70px);
      }
    }

    :where(html[data-page="services"]) .kx-mobile-drawer.open,:where(html[data-page="services"]) 
    .kx-mobile-drawer.active {
      transform: translateX(0);
    }

    :where(html[data-page="services"]) .kx-mobile-nav-link {
      font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 16px;
      font-weight: 700;
      color: #13243D;
      text-decoration: none;
      padding: 12px 16px;
      border-radius: 12px;
      transition: all 0.2s ease;
    }

    :where(html[data-page="services"]) .kx-mobile-nav-link:hover,:where(html[data-page="services"]) 
    .kx-mobile-nav-link.active {
      background: #EDF3FA;
      color: #0F1D32;
    }

    :where(html[data-page="services"]) .kx-mobile-nav-link.sub {
      padding-left: 32px;
      font-size: 14px;
      font-weight: 600;
      color: #556987;
    }

    /* ==========================================================================
   GLOBAL LEAD / CONSULTATION MODAL
   ========================================================================== */
    :where(html[data-page="services"]) .kx-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(13, 27, 49, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
      padding: 20px;
    }

    :where(html[data-page="services"]) .kx-modal-overlay.active,:where(html[data-page="services"]) 
    .kx-modal-overlay.is-open {
      opacity: 1;
      visibility: visible;
    }

    :where(html[data-page="services"]) .kx-modal-dialog {
      background: #FFFFFF;
      border-radius: 24px;
      max-width: 540px;
      width: 100%;
      box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
      border: 1px solid var(--kx-border);
      overflow: hidden;
      transform: scale(0.94) translateY(20px);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
    }

    :where(html[data-page="services"]) .kx-modal-overlay.active .kx-modal-dialog,:where(html[data-page="services"]) 
    .kx-modal-overlay.is-open .kx-modal-dialog {
      transform: scale(1) translateY(0);
    }

    :where(html[data-page="services"]) .kx-modal-header {
      padding: 28px 32px 16px;
      position: relative;
    }

    :where(html[data-page="services"]) .kx-modal-title {
      font-family: 'Manrope', 'Inter', sans-serif;
      font-size: 22px;
      font-weight: 800;
      color: var(--kx-navy);
      margin: 0 0 6px;
    }

    :where(html[data-page="services"]) .kx-modal-subtitle {
      font-size: 14px;
      color: var(--kx-text-muted);
      margin: 0;
    }

    :where(html[data-page="services"]) .kx-modal-close {
      position: absolute;
      top: 24px;
      right: 28px;
      background: var(--kx-gray);
      border: none;
      cursor: pointer;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--kx-navy);
      transition: background 0.2s ease, transform 0.2s ease;
    }

    :where(html[data-page="services"]) .kx-modal-close:hover {
      background: #E2E8F0;
      transform: rotate(90deg);
    }

    :where(html[data-page="services"]) .kx-modal-body {
      padding: 0 32px 32px;
    }

    :where(html[data-page="services"]) .kx-modal-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    :where(html[data-page="services"]) .kx-form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    :where(html[data-page="services"]) .kx-form-label {
      font-family: 'Manrope', 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 700;
      color: var(--kx-navy);
    }

    :where(html[data-page="services"]) .kx-form-input,:where(html[data-page="services"]) 
    .kx-form-textarea,:where(html[data-page="services"]) 
    .kx-form-select {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      padding: 12px 16px;
      border-radius: 12px;
      border: 1px solid var(--kx-border);
      background: var(--kx-gray);
      color: var(--kx-navy);
      transition: all 0.2s ease;
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="services"]) .kx-form-input:focus,:where(html[data-page="services"]) 
    .kx-form-textarea:focus,:where(html[data-page="services"]) 
    .kx-form-select:focus {
      outline: none;
      border-color: var(--kx-navy);
      background: #FFFFFF;
      box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
    }

    :where(html[data-page="services"]) .kx-modal-submit {
      background: var(--kx-navy);
      color: #FFFFFF;
      font-family: 'Manrope', 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 700;
      padding: 14px;
      border-radius: var(--kx-radius-pill);
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
      margin-top: 8px;
    }

    :where(html[data-page="services"]) .kx-modal-submit:hover {
      background: var(--kx-deep-navy);
      transform: translateY(-1px);
    }

    /* ==========================================================================
   FOOTER (Fluid Responsive Grid & Mobile Optimization)
   ========================================================================== */
    :where(html[data-page="services"]) .site-footer {
      background: #14243D;
      color: rgba(255, 255, 255, 0.75);
      padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
      position: relative;
      font-family: var(--font-body);
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="services"]) .site-footer .container,:where(html[data-page="services"]) 
    .site-footer .kx-container {
      width: 100%;
      max-width: var(--container-max, 1240px);
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: clamp(16px, 4vw, 24px) !important;
      padding-right: clamp(16px, 4vw, 24px) !important;
      box-sizing: border-box !important;
    }

    :where(html[data-page="services"]) .footer-top-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
      gap: clamp(20px, 3vw, 40px);
      padding-bottom: clamp(28px, 4vw, 40px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="services"]) .footer-brand {
      min-width: 0;
    }

    :where(html[data-page="services"]) .footer-brand .brand-logo {
      background: rgba(255, 255, 255, 0.08);
      color: #FFFFFF;
      border: 1px solid rgba(255, 255, 255, 0.12);
      display: inline-flex;
      padding: 6px 14px;
      border-radius: var(--radius-pill, 9999px);
      margin-bottom: 16px;
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 1.25rem;
      max-width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="services"]) .footer-brand .brand-logo .dot {
      color: #2FB7A7;
    }

    :where(html[data-page="services"]) .footer-brand p {
      font-size: 0.84rem;
      color: rgba(255, 255, 255, 0.60);
      line-height: 1.6;
      max-width: 290px;
    }

    :where(html[data-page="services"]) .footer-col h5 {
      font-family: var(--font-heading);
      font-size: 0.95rem;
      font-weight: 700;
      color: #FFFFFF;
      margin-bottom: 16px;
      letter-spacing: -0.01em;
    }

    :where(html[data-page="services"]) .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 0;
      padding: 0;
    }

    :where(html[data-page="services"]) .footer-links a {
      font-size: 0.835rem;
      color: rgba(255, 255, 255, 0.65);
      text-decoration: none;
      transition: all 0.2s ease;
      display: inline-block;
    }

    :where(html[data-page="services"]) .footer-links a:hover {
      color: var(--color-yellow);
      transform: translateX(3px);
    }

    :where(html[data-page="services"]) .footer-follow-wrapper {
      margin-top: 24px;
    }

    :where(html[data-page="services"]) .footer-follow-title {
      font-family: var(--font-heading);
      font-size: 0.95rem;
      font-weight: 700;
      color: #FFFFFF;
      margin-bottom: 14px;
      letter-spacing: -0.01em;
    }

    :where(html[data-page="services"]) .footer-social-links {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    :where(html[data-page="services"]) .social-icon-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      font-size: 17px;
      text-decoration: none;
      transition: var(--transition);
    }

    :where(html[data-page="services"]) .social-icon-btn:hover {
      background: var(--color-yellow);
      color: var(--color-primary-navy);
      border-color: var(--color-yellow);
      transform: translateY(-2px);
    }

    :where(html[data-page="services"]) .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 24px;
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.48);
      flex-wrap: wrap;
      gap: 12px;
    }

    /* Floating WhatsApp Button */
    :where(html[data-page="services"]) .floating-whatsapp-btn {
      position: fixed;
      bottom: clamp(16px, 3vw, 24px);
      right: clamp(16px, 3vw, 24px);
      width: clamp(48px, 6vw, 56px);
      height: clamp(48px, 6vw, 56px);
      background-color: #25D366;
      color: #FFFFFF;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(1.4rem, 2.5vw, 1.8rem);
      box-shadow: 0 8px 24px rgba(37, 211, 102, 0.38);
      z-index: 990;
      transition: var(--transition);
      text-decoration: none;
    }

    :where(html[data-page="services"]) .floating-whatsapp-btn:hover {
      transform: scale(1.08) translateY(-2px);
      box-shadow: 0 12px 30px rgba(37, 211, 102, 0.50);
    }

    /* ==========================================================================
   RESPONSIVE BREAKPOINTS (Granular, Progressive Adaptation)
   ========================================================================== */

    /* 1. Large Tablet / Medium Laptops (1180px - 1025px) */
    @media (max-width: 1180px) {
      :where(html[data-page="services"]) .nav-link {
        padding: 6px 9px;
        font-size: 0.82rem;
      }

      :where(html[data-page="services"]) .btn-nav-phone {
        padding: 8px 12px;
        font-size: 0.8rem;
      }

      :where(html[data-page="services"]) .btn-nav-cta {
        padding: 8px 14px;
        font-size: 0.82rem;
      }

      :where(html[data-page="services"]) .footer-top-grid {
        grid-template-columns: 1.2fr repeat(3, 1fr);
        gap: 24px;
      }
    }

    /* 2. Tablets & Mobile Breakpoint (<= 1024px) */
    @media (max-width: 1024px) {
      :root:where([data-page="services"]) {
        --header-height: 66px;
      }

      :where(html[data-page="services"]) .nav-menu-wrapper,:where(html[data-page="services"]) 
      .btn-phone-desktop {
        display: none !important;
      }

      :where(html[data-page="services"]) .hamburger-btn {
        display: flex !important;
      }

      :where(html[data-page="services"]) .btn-cta-desktop {
        padding: 7px 14px;
        font-size: 0.82rem;
      }

      :where(html[data-page="services"]) .footer-top-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 24px;
      }

      :where(html[data-page="services"]) .footer-brand {
        grid-column: 1 / -1;
        max-width: 520px;
      }

      :where(html[data-page="services"]) .footer-brand p {
        max-width: 100%;
      }
    }

    /* 3. Small Tablets & Phablets (<= 768px) */
    @media (max-width: 768px) {
      :root:where([data-page="services"]) {
        --header-height: 62px;
      }

      :where(html[data-page="services"]) .btn-cta-desktop {
        display: none !important;
      }

      :where(html[data-page="services"]) .site-footer {
        padding: 46px 0 24px;
      }

      :where(html[data-page="services"]) .footer-top-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
        padding-bottom: 28px;
      }
    }

    /* 4. Standard Mobile Screens (<= 540px) */
    @media (max-width: 540px) {
      :root:where([data-page="services"]) {
        --header-height: 58px;
      }

      :where(html[data-page="services"]) .nav-container {
        padding: 0 14px;
      }

      :where(html[data-page="services"]) .hamburger-btn {
        width: 38px;
        height: 38px;
        padding: 6px;
      }

      :where(html[data-page="services"]) .hamburger-btn span {
        width: 20px;
      }

      :where(html[data-page="services"]) .footer-top-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
      }

      :where(html[data-page="services"]) .footer-brand {
        grid-column: 1 / -1;
      }

      :where(html[data-page="services"]) .footer-col-company {
        grid-column: 1;
      }

      :where(html[data-page="services"]) .footer-col-solutions {
        grid-column: 2;
      }

      :where(html[data-page="services"]) .footer-col-resources {
        grid-column: 1 / -1;
      }

      :where(html[data-page="services"]) .footer-col h5 {
        margin-bottom: 12px;
      }

      :where(html[data-page="services"]) .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
    }

    /* 5. Ultra-Small Devices (<= 360px) */
    @media (max-width: 360px) {
      :where(html[data-page="services"]) .brand-logo {
        font-size: 1.15rem;
      }

      :where(html[data-page="services"]) .mobile-nav-drawer {
        width: 90vw;
        padding: 18px 14px 22px;
      }

      :where(html[data-page="services"]) .mobile-nav-link {
        font-size: 0.95rem;
      }
    }
  
/* shared-chrome.css */
@scope (:where(html[data-page="services"]) .shared-kx-header,:where(html[data-page="services"])  .shared-kx-mobile-drawer,:where(html[data-page="services"])  .shared-site-footer) {
:scope { --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif; --container-max: 1240px; --color-yellow: #F8C72E; --color-primary-navy: #14243D; --transition: all .2s ease; font-family: var(--font-body, 'Plus Jakarta Sans', 'Inter', sans-serif); line-height: 1.5; }
:where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(a) { text-decoration: none; }



:scope {
  --kx-navy: #13243D;
  --kx-deep-navy: #0D1B31;
  --kx-secondary-navy: #1B3152;
  --kx-gold: #F9BE22;
  --kx-gold-hover: #FFCA3A;
  --kx-green: #00D084;
  --kx-cyan: #52BCEB;
  --kx-soft-cyan: #EAF8FF;
  --kx-soft-gold: #FFF8DD;
  --kx-soft-green: #E8F8F0;
  --kx-white: #FFFFFF;
  --kx-gray: #F4F6FA;
  --kx-pill-bg: #EDF3FA;
  --kx-border: #E8EDF4;
  --kx-border-subtle: #F1F4F9;
  --kx-text-dark: #13243D;
  --kx-text-muted: #65748B;
  --kx-radius-pill: 9999px;
  --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
}


:scope.shared-kx-header,
.shared-kx-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: 1px solid rgba(232, 237, 244, 0.8);
  transition: all 0.25s ease;
}

:scope.shared-kx-header.scrolled,
.shared-kx-header.scrolled {
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

:scope.shared-kx-header.menu-open,
.shared-kx-header.menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

.shared-kx-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .shared-kx-container {
    padding: 0 16px;
  }
}

.shared-kx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
}


.shared-kx-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0F1D32;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

.shared-kx-logo-tech {
  color: #00D084;
  font-weight: 800;
}


.shared-kx-nav-menu {
  display: flex;
  align-items: center;
  background: #EDF3FA;
  padding: 4px 6px;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(220, 230, 242, 0.85);
  box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
  flex-shrink: 1;
}

.shared-kx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shared-kx-nav-item {
  position: relative;
}

.shared-kx-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--kx-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-nav-link:hover {
  color: #0F1D32;
  background: rgba(255, 255, 255, 0.7);
}

.shared-kx-nav-link.active {
  color: #0F1D32 !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
}

.shared-kx-nav-link::after,
.shared-kx-nav-link.active::after {
  display: none !important;
}

.shared-kx-chevron-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  stroke: currentColor;
}


.shared-kx-dropdown-wrapper {
  position: relative;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper.open .shared-kx-chevron-icon {
  transform: rotate(180deg);
}

.shared-kx-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 250px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
  border: 1px solid var(--kx-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  pointer-events: none;
  z-index: 100;
}

/* Invisible hover bridge to eliminate the 8px cursor gap */
.shared-kx-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
  background: transparent;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper.open .shared-kx-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.shared-kx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #13243D;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.shared-kx-dropdown-item:hover {
  background: #F0F7FF;
  color: #0F1D32;
}


.shared-kx-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.shared-kx-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0F1D32;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-btn-pill-navy:hover {
  background: #1B2E4B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
}

.shared-kx-btn-pill-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F9BE22;
  color: #0F1D32;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
}

.shared-kx-btn-pill-gold:hover {
  background: #FFCA3A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
}

.shared-kx-btn-pill-navy:active,
.shared-kx-btn-pill-gold:active,
.kx-modal-submit:active {
  transform: translateY(0) scale(0.98);
}


.shared-kx-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0F1D32;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.shared-kx-mobile-toggle:hover {
  background: #EDF3FA;
}

@media (max-width: 1240px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-navy {
    display: none;
  }
}

@media (max-width: 1100px) {
  .shared-kx-nav-menu {
    display: none;
  }

  .shared-kx-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .shared-kx-nav-inner {
    height: 70px;
    gap: 8px;
  }
  .shared-kx-logo {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .shared-kx-logo {
    font-size: 18px;
  }
  .shared-kx-nav-actions {
    gap: 6px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 7px 11px;
    font-size: 11.5px;
    gap: 4px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold svg {
    display: none;
  }
  .shared-kx-mobile-toggle {
    padding: 6px;
  }
}

@media (max-width: 360px) {
  .shared-kx-container {
    padding: 0 6px;
  }
  .shared-kx-nav-inner {
    gap: 2px;
  }
  .shared-kx-logo {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  .shared-kx-nav-actions {
    gap: 2px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 5px 6px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  .shared-kx-mobile-toggle {
    padding: 2px;
  }
}


:scope.shared-kx-mobile-drawer,
.shared-kx-mobile-drawer {
  position: fixed;
  top: var(--header-height, 78px);
  left: 0;
  width: 100%;
  height: calc(100dvh - var(--header-height, 78px));
  background: #FFFFFF !important;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 40px rgba(19, 36, 61, 0.12);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :scope.shared-kx-mobile-drawer,
  .shared-kx-mobile-drawer {
    top: var(--header-height, 70px);
    height: calc(100dvh - var(--header-height, 70px));
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

:scope.shared-kx-mobile-drawer.open,
:scope.shared-kx-mobile-drawer.active,
.shared-kx-mobile-drawer.open,
.shared-kx-mobile-drawer.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  pointer-events: auto;
}

.shared-kx-mobile-nav-link {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 650;
  color: #14243D;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 12px;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.shared-kx-mobile-nav-link:hover {
  background: #F8FAFC;
  color: #0E1B2F;
}

.shared-kx-mobile-nav-link.active {
  background: #F4F7FB !important;
  color: #0E1B2F !important;
  font-weight: 750 !important;
  border-left: 3px solid #F8C72E;
  padding-left: 13px;
}

.shared-kx-mobile-nav-link.shared-sub {
  margin-left: 12px;
  margin-right: 4px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 550;
  color: #556987;
  background: #F8FAFC;
  border-radius: 10px;
  border-left: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.shared-kx-mobile-nav-link.shared-sub::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94A3B8;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.shared-kx-mobile-nav-link.shared-sub:hover,
.shared-kx-mobile-nav-link.shared-sub.active {
  background: #EDF4FB;
  color: #0E1B2F;
  border-left-color: #F8C72E;
}

.shared-kx-mobile-nav-link.shared-sub.active::before {
  background: #F8C72E;
  transform: scale(1.4);
}

.shared-kx-mobile-drawer-footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #EEF2F6;
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-gold {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(248, 199, 46, 0.3);
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-navy {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
  border-radius: 9999px;
}


.kx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 49, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  padding: 20px;
}

.kx-modal-overlay.active,
.kx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.kx-modal-dialog {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
  border: 1px solid var(--kx-border);
  overflow: hidden;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.kx-modal-overlay.active .kx-modal-dialog,
.kx-modal-overlay.is-open .kx-modal-dialog {
  transform: scale(1) translateY(0);
}

.kx-modal-header {
  padding: 28px 32px 16px;
  position: relative;
}

.kx-modal-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--kx-navy);
  margin: 0 0 6px;
}

.kx-modal-subtitle {
  font-size: 14px;
  color: var(--kx-text-muted);
  margin: 0;
}

.kx-modal-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--kx-gray);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-navy);
  transition: background 0.2s ease, transform 0.2s ease;
}

.kx-modal-close:hover {
  background: #E2E8F0;
  transform: rotate(90deg);
}

.kx-modal-body {
  padding: 0 32px 32px;
}

.kx-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx-form-label {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kx-navy);
}

.kx-form-input,
.kx-form-textarea,
.kx-form-select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--kx-border);
  background: var(--kx-gray);
  color: var(--kx-navy);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.kx-form-input:focus,
.kx-form-textarea:focus,
.kx-form-select:focus {
  outline: none;
  border-color: var(--kx-navy);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
}

.kx-modal-submit {
  background: var(--kx-navy);
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.kx-modal-submit:hover {
  background: var(--kx-deep-navy);
  transform: translateY(-1px);
}


:scope.shared-site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
  position: relative;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

:scope.shared-site-footer .shared-container,
:scope.shared-site-footer .shared-kx-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

.shared-footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand {
  min-width: 0;
}

.shared-footer-brand .shared-brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand .shared-brand-logo .shared-dot {
  color: #2FB7A7;
}

.shared-footer-brand p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  max-width: 290px;
}

.shared-footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.shared-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.shared-footer-links a {
  font-size: 0.835rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.shared-footer-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

.shared-footer-follow-wrapper {
  margin-top: 24px;
}

.shared-footer-follow-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.shared-footer-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.shared-social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  text-decoration: none;
  transition: var(--transition);
}

.shared-social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

.shared-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  flex-wrap: wrap;
  gap: 12px;
}


@media (max-width: 1180px) {
  .nav-link {
    padding: 6px 9px;
    font-size: 0.82rem;
  }
  .btn-nav-phone {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}


@media (max-width: 1024px) {
  :scope {
    --header-height: 66px;
  }
  .nav-menu-wrapper,
  .btn-phone-desktop {
    display: none !important;
  }
  .hamburger-btn {
    display: flex !important;
  }
  .btn-cta-desktop {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .shared-footer-brand p {
    max-width: 100%;
  }
}


@media (max-width: 768px) {
  :scope {
    --header-height: 62px;
  }
  .btn-cta-desktop {
    display: none !important;
  }
  .shared-site-footer {
    padding: 46px 0 24px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding-bottom: 28px;
  }
}


@media (max-width: 540px) {
  :scope {
    --header-height: 58px;
  }
  .nav-container {
    padding: 0 14px;
  }
  .hamburger-btn {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  .hamburger-btn span {
    width: 20px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
  }
  .shared-footer-col-company {
    grid-column: 1;
  }
  .shared-footer-col-solutions {
    grid-column: 2;
  }
  .shared-footer-col-resources {
    grid-column: 1 / -1;
  }
  .shared-footer-col h5 {
    margin-bottom: 12px;
  }
  .shared-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


@media (max-width: 360px) {
  .shared-brand-logo {
    font-size: 1.15rem;
  }
  .mobile-nav-drawer {
    width: 90vw;
    padding: 18px 14px 22px;
  }
  .mobile-nav-link {
    font-size: 0.95rem;
  }
}
  
}
:where(html[data-page="services"]) .shared-kx-mobile-drawer { visibility: hidden; }
:where(html[data-page="services"]) .shared-kx-mobile-drawer.open { visibility: visible; }
:where(html[data-page="services"]) .shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="services"]) .shared-kx-btn-pill-navy:active,:where(html[data-page="services"]) 
  .shared-kx-btn-pill-gold:active,:where(html[data-page="services"]) 
  .kx-modal-submit:active { transform: none; }
}

/* page-upgrades.css */
:where(html[data-page="services"]) body.rv-upgraded { --rv-navy:#102039; --rv-muted:#5e748f; --rv-gold:#f5a916; --rv-cream:#fbf7ef; font-family:'Plus Jakarta Sans','Inter',sans-serif; background:var(--rv-cream); }
:where(html[data-page="services"]) .rv-upgraded .rv-container { width:calc(100% - 80px); max-width:1240px; margin-inline:auto; }
:where(html[data-page="services"]) .rv-upgraded .rv-section { scroll-margin-top:96px; }
:where(html[data-page="services"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities) { padding-top:80px; padding-bottom:80px; }
:where(html[data-page="services"]) .rv-upgraded .rv-section h2 { font-family:'Outfit','Plus Jakarta Sans',sans-serif!important; font-weight:800!important; font-size:clamp(30px,3.1vw,42px)!important; line-height:1.16!important; letter-spacing:-.04em!important; }
:where(html[data-page="services"]) .rv-upgraded .rv-section h3 { font-family:'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.025em; }
:where(html[data-page="services"]) .rv-upgraded .rv-section p { line-height:1.7; }
:where(html[data-page="services"]) .rv-upgraded .rv-section[data-rv-surface="light"] { background:#fffdf8!important; }
:where(html[data-page="services"]) .rv-upgraded .rv-section[data-rv-surface="light"]:nth-of-type(even) { background:#fff!important; }
:where(html[data-page="services"]) .rv-upgraded .rv-section[data-rv-surface="light"] h2 { color:#102039; }
:where(html[data-page="services"]) .rv-upgraded .rv-section :is(input,select,textarea) { border-radius:12px; font-family:'Plus Jakarta Sans','Inter',sans-serif; }
:where(html[data-page="services"]) .rv-upgraded :is(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #21877b; outline-offset:4px; }
:where(html[data-page="services"]) .rv-upgraded .rv-hero { background-color:#fbf7ef; background-image:radial-gradient(#d9d7cc .7px,transparent .7px); background-size:24px 24px; padding:44px 0 54px; border-bottom:1px solid #e9e6de; position:relative; overflow:hidden; }
:where(html[data-page="services"]) .rv-upgraded .rv-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
:where(html[data-page="services"]) .rv-upgraded .rv-hero-copy { min-width:0; }
:where(html[data-page="services"]) .rv-upgraded .rv-eyebrow { display:flex; align-items:center; gap:9px; font:700 11px/1.4 'Plus Jakarta Sans','Inter',sans-serif; text-transform:uppercase; letter-spacing:.14em; color:#315373; margin:0 0 16px; }
:where(html[data-page="services"]) .rv-eyebrow > span { width:7px; height:7px; border-radius:50%; background:#f5a916; }
:where(html[data-page="services"]) .rv-upgraded .rv-hero h1 { font-family:'Outfit','Plus Jakarta Sans',sans-serif!important; font-size:clamp(40px,4.1vw,58px)!important; line-height:1.09!important; font-weight:800!important; letter-spacing:-.05em!important; color:#102039!important; margin:0 0 20px!important; max-width:100%; }
:where(html[data-page="services"]) .rv-upgraded .rv-hero h1 em { font-style:normal; color:#c88409; text-decoration:underline; text-decoration-color:#f5a916; text-decoration-thickness:3px; text-underline-offset:8px; }
:where(html[data-page="services"]) .rv-upgraded .rv-description { color:#5e748f; font:400 17px/1.75 'Plus Jakarta Sans','Inter',sans-serif; max-width:560px; margin:0 0 26px; }
:where(html[data-page="services"]) .rv-upgraded .rv-actions { display:flex; gap:12px; flex-wrap:wrap; }
:where(html[data-page="services"]) .rv-upgraded .rv-button { display:inline-flex; justify-content:center; align-items:center; gap:14px; padding:15px 21px; min-height:52px; border-radius:999px; font:700 13px/1.4 'Plus Jakarta Sans','Inter',sans-serif; text-decoration:none; color:#102039; border:1px solid #e2e7ee; transition:background .2s,transform .2s; }
:where(html[data-page="services"]) .rv-upgraded .rv-button-primary { background:#ffc526; border-color:#ffc526; box-shadow:0 8px 20px #f5a91620; }
:where(html[data-page="services"]) .rv-upgraded .rv-button-secondary { background:#fff; }
:where(html[data-page="services"]) .rv-upgraded .rv-button:hover { transform:translateY(-2px); background:#fff0bd; }
:where(html[data-page="services"]) .rv-upgraded .rv-button i { font-size:18px; }
:where(html[data-page="services"]) .rv-upgraded .rv-hero-art { min-width:0; position:relative; padding:0; }
:where(html[data-page="services"]) .rv-upgraded .rv-note { font:600 24px/1.15 Caveat,cursive; color:#315373; text-align:right; margin:14px 12px 0 0; transform:rotate(-3deg); }
:where(html[data-page="services"]) .rv-note svg { display:inline-block; width:50px; height:28px; vertical-align:middle; }
:where(html[data-page="services"]) .rv-upgraded .rv-pastel-0 { background:#fff2cb; color:#a97007; }
:where(html[data-page="services"]) .rv-upgraded .rv-pastel-1 { background:#def7ee; color:#187d6b; }
:where(html[data-page="services"]) .rv-upgraded .rv-pastel-2 { background:#e5efff; color:#2867c7; }
:where(html[data-page="services"]) .rv-upgraded .rv-pastel-3 { background:#fbe4ef; color:#b83c73; }
:where(html[data-page="services"]) .rv-upgraded .rv-pastel-4 { background:#ede5fc; color:#7250b2; }
:where(html[data-page="services"]) .rv-upgraded .rv-icon { width:56px; height:56px; flex-shrink:0; display:grid; place-items:center; border-radius:18px; font-size:27px; }
:where(html[data-page="services"]) .rv-upgraded .rv-capabilities { padding:46px 0 54px; background:#fff; border-bottom:1px solid #e9edf0; }
:where(html[data-page="services"]) .rv-capabilities .rv-eyebrow { margin-bottom:14px; }
:where(html[data-page="services"]) .rv-capabilities h2 { max-width:1000px; color:#102039; margin:0 0 32px; }
:where(html[data-page="services"]) .rv-capability-grid { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); gap:26px; }
:where(html[data-page="services"]) .rv-capability { display:flex; align-items:flex-start; gap:15px; }
:where(html[data-page="services"]) .rv-upgraded .rv-capability h3 { font-size:16px; line-height:1.3; color:#102039; margin:0 0 8px; }
:where(html[data-page="services"]) .rv-upgraded .rv-capability p { font:400 13px/1.6 'Plus Jakarta Sans','Inter',sans-serif; color:#5e748f; margin:0; }
:where(html[data-page="services"]) .rv-orbit { position:relative; width:100%; max-width:510px; aspect-ratio:1.12; margin:auto; }
:where(html[data-page="services"]) .rv-orbit-ring { position:absolute; width:70%; height:76%; top:12%; left:15%; border:1.5px solid #e9b448; border-radius:50%; }
:where(html[data-page="services"]) .rv-orbit-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:37%; aspect-ratio:1; border-radius:50%; background:#102039; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font:800 24px/1.15 'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.04em; box-shadow:0 12px 30px #10203915; text-align:center; }
:where(html[data-page="services"]) .rv-orbit-core span { color:#26b794; font-size:22px; }
:where(html[data-page="services"]) .rv-orbit-node { position:absolute; left:calc(50% + cos(calc(var(--i)*360deg/var(--count) - 90deg))*37%); top:calc(50% + sin(calc(var(--i)*360deg/var(--count) - 90deg))*37%); transform:translate(-50%,-50%); width:25%; aspect-ratio:1; border:3px solid #fff; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; box-shadow:0 6px 22px #10203906; }
:where(html[data-page="services"]) .rv-orbit-node i { font-size:32px; }:where(html[data-page="services"]) .rv-orbit-node strong { font:700 12px/1.3 'Plus Jakarta Sans','Inter',sans-serif; color:#102039; text-align:center; }
:where(html[data-page="services"]) .rv-orbit-4 .rv-orbit-node { left:calc(50% + cos(calc(var(--i)*90deg - 135deg))*43%); top:calc(50% + sin(calc(var(--i)*90deg - 135deg))*43%); }
:where(html[data-page="services"]) .rv-career-panels { display:flex; align-items:center; gap:14px; padding:24px 8px; min-height:385px; }
:where(html[data-page="services"]) .rv-career-panel { flex:1; min-width:0; height:320px; border-radius:18px; padding:30px 18px; display:flex; flex-direction:column; justify-content:center; gap:25px; transform:rotate(-4deg); }
:where(html[data-page="services"]) .rv-career-panel:nth-child(2){transform:translateY(-22px) rotate(3deg)}:where(html[data-page="services"]) .rv-career-panel:nth-child(3){transform:rotate(-3deg)}
:where(html[data-page="services"]) .rv-career-panel i { font-size:48px; }:where(html[data-page="services"]) .rv-career-panel strong { font:800 clamp(25px,2.5vw,36px)/1 'Outfit','Plus Jakarta Sans',sans-serif; color:#102039; letter-spacing:-.04em; }:where(html[data-page="services"]) .rv-career-panel span { font:500 11px/1.6 'Plus Jakarta Sans','Inter',sans-serif; text-transform:uppercase; letter-spacing:.08em; color:#5e748f; }
:where(html[data-page="services"]) .rv-roadmap { background:#fff; border:1px solid #e8e9e6; padding:30px; border-radius:24px; box-shadow:0 16px 40px #10203908; }
:where(html[data-page="services"]) .rv-small-label { font:700 10px/1.4 'Plus Jakarta Sans','Inter',sans-serif!important; text-transform:uppercase; letter-spacing:.13em; color:#315373; margin:0 0 26px!important; }
:where(html[data-page="services"]) .rv-roadmap-step { display:flex; gap:20px; padding:16px 0; }:where(html[data-page="services"]) .rv-roadmap-step .rv-icon { width:70px;height:70px;border-radius:50%;font-size:34px; }
:where(html[data-page="services"]) .rv-roadmap-step small { font:700 12px 'Plus Jakarta Sans','Inter',sans-serif; color:#178575; }:where(html[data-page="services"]) .rv-upgraded .rv-roadmap-step h3 { font:800 21px/1.2 'Outfit','Plus Jakarta Sans',sans-serif; color:#102039; margin:6px 0; }:where(html[data-page="services"]) .rv-roadmap-step p { color:#5e748f; font-size:13px; margin:0; }
:where(html[data-page="services"]) .rv-art-conversation-roadmap > .rv-note,:where(html[data-page="services"]) .rv-art-cloud-architecture > .rv-note,:where(html[data-page="services"]) .rv-art-search-visibility > .rv-note { margin:0 12px 18px; }
:where(html[data-page="services"]) .rv-devices { min-height:410px; padding:20px 50px 20px 0; position:relative; }
:where(html[data-page="services"]) .rv-browser { border:5px solid #16334d; border-radius:17px; overflow:hidden; background:#fffdf8; box-shadow:0 18px 25px #10203920; }
:where(html[data-page="services"]) .rv-browser-bar { height:24px; display:flex; gap:6px; align-items:center; padding:0 12px; background:#16334d; }:where(html[data-page="services"]) .rv-browser-bar b { width:7px;height:7px;border-radius:50%;background:#ffcd38; }:where(html[data-page="services"]) .rv-browser-bar b:first-child{background:#ed7880}:where(html[data-page="services"]) .rv-browser-bar b:last-child{background:#24b7a8}
:where(html[data-page="services"]) .rv-browser-content { min-height:310px; padding:23px; position:relative; overflow:hidden; }:where(html[data-page="services"]) .rv-mock-brand { display:block;font:800 17px 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039; margin-bottom:26px; }:where(html[data-page="services"]) .rv-browser-content small { display:block;font:700 8px 'Plus Jakarta Sans','Inter',sans-serif;text-transform:uppercase;letter-spacing:.15em;color:#476780;margin-bottom:14px; }:where(html[data-page="services"]) .rv-browser-content strong { display:block;font:800 29px/1.13 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;letter-spacing:-.04em;position:relative;z-index:1; }:where(html[data-page="services"]) .rv-browser-content p { font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;max-width:210px;color:#5e748f;margin:15px 0; }:where(html[data-page="services"]) .rv-mock-button { display:inline-block;padding:10px 17px;background:#ffca32;color:#102039;border-radius:999px;font:700 10px 'Plus Jakarta Sans','Inter',sans-serif;position:relative;z-index:1; }
:where(html[data-page="services"]) .rv-shapes { width:180px;height:160px;position:absolute;bottom:-15px;right:-20px;pointer-events:none; }:where(html[data-page="services"]) .rv-shapes b { position:absolute; }:where(html[data-page="services"]) .rv-shapes b:nth-child(1){width:110px;height:110px;border-radius:100% 0 0 0;background:#25b09e;right:0;bottom:0}:where(html[data-page="services"]) .rv-shapes b:nth-child(2){width:140px;height:140px;border-radius:100% 0 0 0;background:#f6e8c6;right:0;bottom:0;z-index:-1}:where(html[data-page="services"]) .rv-shapes b:nth-child(3){width:65px;height:65px;border-radius:50%;background:#ffce3a;left:0;top:0}
:where(html[data-page="services"]) .rv-mini-phone { position:absolute;bottom:0;right:0;width:145px;height:278px;padding:30px 13px 15px;border:7px solid #132b44;border-radius:26px;background:#fffdf8;box-shadow:0 14px 24px #10203920;overflow:hidden; }:where(html[data-page="services"]) .rv-mini-phone>b { position:absolute;top:4px;left:35%;width:30%;height:8px;border-radius:10px;background:#132b44; }:where(html[data-page="services"]) .rv-mini-phone>span:not(.rv-mock-button) { font:800 12px 'Outfit','Plus Jakarta Sans',sans-serif; }:where(html[data-page="services"]) .rv-mini-phone>strong { display:block;font:800 20px/1.12 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;margin:30px 0 20px; }:where(html[data-page="services"]) .rv-mini-phone .rv-shapes { transform:scale(.6);transform-origin:bottom right; }:where(html[data-page="services"]) .rv-mini-phone .rv-mock-button {font-size:8px;padding:8px 10px}
:where(html[data-page="services"]) .rv-flow { display:grid;grid-template-columns:1fr 1fr 1.2fr;align-items:center;gap:16px;min-height:340px;position:relative; }:where(html[data-page="services"]) .rv-flow::before {content:'';position:absolute;left:15%;right:15%;top:50%;height:2px;background:#f5a916;z-index:0}:where(html[data-page="services"]) .rv-flow-input { position:relative;background:#fff;border:1px solid #e2e7ee;border-radius:18px;padding:18px 10px;text-align:center; }:where(html[data-page="services"]) .rv-flow-input i {font-size:28px;color:#1da891;display:block;margin-bottom:10px}:where(html[data-page="services"]) .rv-flow-input strong {display:block;font-size:12px;color:#102039}:where(html[data-page="services"]) .rv-flow-input span {font-size:9px;color:#5e748f;display:block;margin-top:6px}:where(html[data-page="services"]) .rv-flow-core { position:relative;aspect-ratio:1;border-radius:50%;background:#102039;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;box-shadow:0 0 0 10px #e7eff7; }:where(html[data-page="services"]) .rv-flow-core i {font-size:34px}:where(html[data-page="services"]) .rv-flow-core strong {font-size:11px;line-height:1.4}:where(html[data-page="services"]) .rv-flow-outputs {display:flex;flex-direction:column;gap:24px;position:relative}:where(html[data-page="services"]) .rv-flow-outputs>div {padding:16px 12px;background:#fff;border:1px solid #e2e7ee;border-radius:999px;font-size:11px;display:flex;align-items:center;gap:10px;color:#102039}:where(html[data-page="services"]) .rv-flow-outputs i {font-size:23px;color:#248978}
:where(html[data-page="services"]) .rv-cloud {background:#102c46;color:#fff;padding:34px;border-radius:26px;box-shadow:0 18px 30px #10203915}:where(html[data-page="services"]) .rv-cloud-icon {text-align:center;font-size:100px;line-height:1}:where(html[data-page="services"]) .rv-cloud-branches{height:42px;border:2px solid #ffcc31;border-bottom:0;border-radius:18px 18px 0 0;margin:12px 14% 0;position:relative}:where(html[data-page="services"]) .rv-cloud-branches::after{content:'';position:absolute;left:50%;height:54px;top:-14px;border-left:2px solid #ffcc31}:where(html[data-page="services"]) .rv-server-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}:where(html[data-page="services"]) .rv-server{border:1px solid #88adc7;border-radius:8px;height:34px;display:flex;gap:5px;align-items:center;padding:10px;margin-bottom:4px}:where(html[data-page="services"]) .rv-server b{width:6px;height:6px;border-radius:50%;background:#21d2b1}:where(html[data-page="services"]) .rv-server span{width:24px;height:3px;background:#41637e;margin-left:4px}:where(html[data-page="services"]) .rv-server-grid strong{display:block;text-align:center;font-size:14px;margin-top:16px;color:white}
:where(html[data-page="services"]) .rv-app-phones {position:relative;min-height:430px;display:flex;justify-content:center;align-items:center;padding:10px 20px}:where(html[data-page="services"]) .rv-app-phone{position:relative;width:47%;height:390px;border:7px solid #132b44;border-radius:31px;background:#fffdf8;padding:36px 18px 20px;overflow:hidden;box-shadow:0 18px 25px #10203920;transform:rotate(-7deg)}:where(html[data-page="services"]) .rv-app-phone+.rv-app-phone{transform:rotate(7deg) translateY(16px);margin-left:-10px}:where(html[data-page="services"]) .rv-phone-notch{position:absolute;top:-1px;left:28%;width:44%;height:15px;border-radius:0 0 12px 12px;background:#132b44}:where(html[data-page="services"]) .rv-app-phone small{font:800 10px 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;white-space:nowrap}:where(html[data-page="services"]) .rv-app-phone small span{color:#1aac90}:where(html[data-page="services"]) .rv-app-phone>strong{font:800 29px/1.1 'Outfit','Plus Jakarta Sans',sans-serif;display:block;color:#102039;margin:36px 0 20px;letter-spacing:-.04em}:where(html[data-page="services"]) .rv-app-phone p{font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;color:#5e748f;margin-bottom:18px}:where(html[data-page="services"]) .rv-upgraded .rv-app-phone h3{font:800 17px/1.2 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;margin:12px 0}:where(html[data-page="services"]) .rv-phone-row{display:flex;align-items:center;gap:10px;padding:14px 5px;border-bottom:1px solid #e2e7ee;font:600 11px 'Plus Jakarta Sans','Inter',sans-serif;color:#102039}:where(html[data-page="services"]) .rv-phone-row i{font-size:23px;color:#24a694}:where(html[data-page="services"]) .rv-app-phone .rv-shapes{transform:scale(.8);transform-origin:bottom right}:where(html[data-page="services"]) .rv-platforms{text-align:center;color:#315373;font-size:12px!important;margin-top:22px}:where(html[data-page="services"]) .rv-platforms i{font-size:18px;margin-left:12px}:where(html[data-page="services"]) .rv-platforms span{margin-left:14px;color:#afbac6}
:where(html[data-page="services"]) .rv-search {padding:28px;background:#fff;border:1px solid #e2e7ee;border-radius:24px;box-shadow:0 18px 35px #1020390c}:where(html[data-page="services"]) .rv-search-field{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid #e2e7ee;border-radius:999px;color:#102039;font-size:13px}:where(html[data-page="services"]) .rv-search-field i{font-size:21px}:where(html[data-page="services"]) .rv-search-result{padding:28px 8px}:where(html[data-page="services"]) .rv-search-result small{display:block;color:#71859b;font-size:10px;margin-bottom:14px}:where(html[data-page="services"]) .rv-search-result strong{display:block;color:#2761b7;font:700 22px 'Outfit','Plus Jakarta Sans',sans-serif;margin-bottom:18px}:where(html[data-page="services"]) .rv-search-result>span{display:block;height:9px;border-radius:5px;background:#e0e8f1;margin-top:8px}:where(html[data-page="services"]) .rv-search-result>span:last-child{width:80%}:where(html[data-page="services"]) .rv-trend{display:block;width:100%;height:auto;overflow:visible}:where(html[data-page="services"]) .rv-illustration-label{font:400 10px/1.5 'Plus Jakarta Sans','Inter',sans-serif!important;color:#71859b;margin-top:14px;text-align:center}
:where(html[data-page="services"]) .rv-funnel {display:flex;align-items:center;flex-direction:column;gap:12px;padding:0 24px}:where(html[data-page="services"]) .rv-funnel-brand{width:92px;height:92px;border-radius:50%;background:#102039;color:#fff;display:grid;place-content:center;font:800 18px/1.15 'Outfit','Plus Jakarta Sans',sans-serif;text-align:center;margin-bottom:4px}:where(html[data-page="services"]) .rv-funnel-step{display:flex;align-items:center;gap:20px;padding:24px 28px;border-radius:22px;width:100%;}:where(html[data-page="services"]) .rv-funnel-step:nth-child(3){width:90%}:where(html[data-page="services"]) .rv-funnel-step:nth-child(4){width:80%}:where(html[data-page="services"]) .rv-funnel-step>i{font-size:38px;color:#102039}:where(html[data-page="services"]) .rv-funnel-step strong{font:700 14px/1.3 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039}:where(html[data-page="services"]) .rv-funnel-step p{font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;color:#5e748f;margin:8px 0 0}
:where(html[data-page="services"]) .rv-media-fallback {display:flex!important;align-items:center;justify-content:center;flex-direction:column;gap:16px;min-height:140px;padding:30px;background:#eef4f2;color:#315373;border-radius:inherit;text-align:center;font:600 13px/1.5 'Plus Jakarta Sans','Inter',sans-serif}:where(html[data-page="services"]) .rv-media-fallback i{font-size:38px;color:#28a595}:where(html[data-page="services"]) .rv-media-fallback.rv-avatar{width:48px;height:48px;min-height:0;padding:0;border-radius:50%;font-size:14px}:where(html[data-page="services"]) .rv-media-fallback small{font-size:10px;color:#5e748f;text-transform:uppercase;letter-spacing:.1em}
@media(min-width:1400px){:where(html[data-page="services"]) .rv-upgraded .rv-hero{padding-top:48px;padding-bottom:58px}}
@media(max-width:1100px){:where(html[data-page="services"]) .rv-upgraded .rv-hero-grid{gap:32px}:where(html[data-page="services"]) .rv-upgraded .rv-container{width:calc(100% - 48px)}:where(html[data-page="services"]) .rv-upgraded .rv-hero h1{font-size:46px!important}:where(html[data-page="services"]) .rv-career-panel{padding:24px 12px}:where(html[data-page="services"]) .rv-flow{gap:10px}:where(html[data-page="services"]) .rv-app-phone{padding-inline:12px}:where(html[data-page="services"]) .rv-app-phone>strong{font-size:26px}:where(html[data-page="services"]) .rv-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){:where(html[data-page="services"]) .rv-upgraded .rv-hero-grid{grid-template-columns:1fr;gap:30px}:where(html[data-page="services"]) .rv-upgraded .rv-hero{padding:36px 0 44px}:where(html[data-page="services"]) .rv-upgraded .rv-hero-copy{max-width:660px}:where(html[data-page="services"]) .rv-upgraded .rv-hero-art{width:100%;max-width:580px;margin:auto}:where(html[data-page="services"]) .rv-upgraded .rv-hero h1{font-size:clamp(38px,6vw,54px)!important}:where(html[data-page="services"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities){padding-block:56px}:where(html[data-page="services"]) .rv-upgraded .rv-description{max-width:640px}:where(html[data-page="services"]) .rv-upgraded .rv-capabilities{padding-block:40px}:where(html[data-page="services"]) .rv-upgraded .rv-section h2{font-size:34px!important}}
@media(max-width:540px){:where(html[data-page="services"]) .rv-upgraded .rv-container{width:calc(100% - 40px)}:where(html[data-page="services"]) .rv-upgraded .rv-hero h1{font-size:38px!important;line-height:1.12!important}:where(html[data-page="services"]) .rv-upgraded .rv-description{font-size:15px}:where(html[data-page="services"]) .rv-upgraded .rv-eyebrow{font-size:10px;margin-bottom:20px}:where(html[data-page="services"]) .rv-upgraded .rv-button{font-size:12px;min-height:48px;padding:13px 17px}:where(html[data-page="services"]) .rv-upgraded .rv-actions{gap:10px}:where(html[data-page="services"]) .rv-upgraded .rv-hero-art{padding-top:0}:where(html[data-page="services"]) .rv-capability-grid{grid-template-columns:1fr;gap:24px}:where(html[data-page="services"]) .rv-upgraded .rv-section h2{font-size:29px!important}:where(html[data-page="services"]) .rv-upgraded .rv-note{font-size:22px}:where(html[data-page="services"]) .rv-orbit-core{font-size:19px}:where(html[data-page="services"]) .rv-orbit-core span{font-size:16px}:where(html[data-page="services"]) .rv-orbit-node i{font-size:24px}:where(html[data-page="services"]) .rv-orbit-node strong{font-size:9px}:where(html[data-page="services"]) .rv-orbit-node{gap:5px}:where(html[data-page="services"]) .rv-career-panels{min-height:290px;padding:20px 2px;gap:9px}:where(html[data-page="services"]) .rv-career-panel{height:240px;padding:20px 12px;gap:20px}:where(html[data-page="services"]) .rv-career-panel strong{font-size:25px}:where(html[data-page="services"]) .rv-career-panel span{font-size:9px}:where(html[data-page="services"]) .rv-career-panel i{font-size:36px}:where(html[data-page="services"]) .rv-roadmap{padding:20px}:where(html[data-page="services"]) .rv-roadmap-step{gap:14px}:where(html[data-page="services"]) .rv-roadmap-step .rv-icon{width:48px;height:48px;font-size:26px}:where(html[data-page="services"]) .rv-upgraded .rv-roadmap-step h3{font-size:19px}:where(html[data-page="services"]) .rv-devices{min-height:350px;padding-right:30px}:where(html[data-page="services"]) .rv-browser-content{padding:16px;min-height:280px}:where(html[data-page="services"]) .rv-browser-content strong{font-size:25px}:where(html[data-page="services"]) .rv-browser-content p{max-width:160px}:where(html[data-page="services"]) .rv-mini-phone{width:110px;height:225px;border-width:5px;padding:24px 10px 10px}:where(html[data-page="services"]) .rv-mini-phone>strong{font-size:17px;margin:22px 0 14px}:where(html[data-page="services"]) .rv-browser-content .rv-shapes{transform:scale(.7);transform-origin:bottom right}:where(html[data-page="services"]) .rv-flow{grid-template-columns:1fr 1fr;gap:24px;min-height:300px}:where(html[data-page="services"]) .rv-flow-input{grid-column:1;grid-row:1}:where(html[data-page="services"]) .rv-flow-core{grid-column:2;grid-row:1;width:120px;justify-self:center}:where(html[data-page="services"]) .rv-flow-outputs{grid-column:1/-1;flex-direction:row;gap:8px}:where(html[data-page="services"]) .rv-flow-outputs>div{flex:1;flex-direction:column;text-align:center;padding:15px 8px;border-radius:16px;font-size:10px}:where(html[data-page="services"]) .rv-flow::before{top:25%}:where(html[data-page="services"]) .rv-cloud{padding:24px 20px}:where(html[data-page="services"]) .rv-cloud-icon{font-size:80px}:where(html[data-page="services"]) .rv-server-grid{gap:12px}:where(html[data-page="services"]) .rv-server{padding:6px;height:28px}:where(html[data-page="services"]) .rv-server-grid strong{font-size:11px}:where(html[data-page="services"]) .rv-server span{width:13px}:where(html[data-page="services"]) .rv-app-phones{padding:10px 4px;min-height:350px}:where(html[data-page="services"]) .rv-app-phone{height:320px;border-width:5px;border-radius:25px;padding:25px 12px 15px;width:49%}:where(html[data-page="services"]) .rv-app-phone>strong{font-size:23px;margin:26px 0 16px}:where(html[data-page="services"]) .rv-app-phone small{font-size:8px}:where(html[data-page="services"]) .rv-app-phone p{font-size:9px}:where(html[data-page="services"]) .rv-upgraded .rv-app-phone h3{font-size:14px}:where(html[data-page="services"]) .rv-phone-row{font-size:10px;padding:11px 2px;gap:7px}:where(html[data-page="services"]) .rv-app-phone .rv-shapes{transform:scale(.6)}:where(html[data-page="services"]) .rv-app-phone .rv-mock-button{font-size:9px;padding:9px 12px}:where(html[data-page="services"]) .rv-search{padding:22px}:where(html[data-page="services"]) .rv-search-field{font-size:11px;padding:12px}:where(html[data-page="services"]) .rv-search-result strong{font-size:19px}:where(html[data-page="services"]) .rv-funnel{padding:0 6px}:where(html[data-page="services"]) .rv-funnel-step{padding:19px 20px;gap:14px}:where(html[data-page="services"]) .rv-funnel-step>i{font-size:29px}:where(html[data-page="services"]) .rv-funnel-step strong{font-size:12px}:where(html[data-page="services"]) .rv-funnel-step p{font-size:10px}:where(html[data-page="services"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities){padding-block:44px}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="services"]) .rv-upgraded .rv-button{transition:none}:where(html[data-page="services"]) .rv-upgraded .rv-button:hover{transform:none}}
@media(max-width:600px){
  :where(html[data-page="services"]) .rv-upgraded .featured-header-row { flex-wrap:wrap; gap:14px; }
  :where(html[data-page="services"]) .rv-upgraded #client-stories .container > div:first-child { flex-wrap:wrap; gap:20px; }
  :where(html[data-page="services"]) .rv-upgraded #client-stories .container > div:first-child > div { min-width:0; max-width:100%; flex-wrap:wrap; }
  :where(html[data-page="services"]) .rv-upgraded .rv-orbit-6 .rv-orbit-node strong { font-size:8px; }
}
:where(html[data-page="services"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(h2, h3, .final-cta-headline, .kx-cta-headline, .display-h2) {
  color: #FFFFFF !important;
}
:where(html[data-page="services"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(h2, h3, .final-cta-headline, .kx-cta-headline) :is(.highlight-gold, .cta-gold-text, em, span.gold, .kx-text-gold) {
  color: #FFC526 !important;
  background: transparent !important;
}
:where(html[data-page="services"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(p, .kx-cta-sub) {
  color: rgba(255, 255, 255, 0.9) !important;
}


/* micro-interactions.css */
/* Shared feedback layer. Motion acknowledges actions; informational content stays still. */
:root:where([data-page="services"]){--kx-feedback-ease:cubic-bezier(.2,.75,.25,1);--kx-feedback-duration:180ms}
:where(html[data-page="services"]) :where(a,button,summary,input,textarea,select):focus-visible{outline:3px solid #187d6b!important;outline-offset:4px}
:where(html[data-page="services"]) :where(.shared-kx-footer,.ma-dark,.ma-closing) :where(a,button):focus-visible{outline-color:#ffc526!important}
:where(html[data-page="services"]) :where(button,summary,.kx-mi-action){-webkit-tap-highlight-color:rgba(245,169,22,.18);touch-action:manipulation}
:where(html[data-page="services"]) .kx-mi-action{transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease),scale 120ms var(--kx-feedback-ease),box-shadow var(--kx-feedback-duration) var(--kx-feedback-ease),background-color var(--kx-feedback-duration) ease,border-color var(--kx-feedback-duration) ease!important}
:where(html[data-page="services"]) .kx-mi-arrow{display:inline-block;transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease)!important}
:where(html[data-page="services"]) .kx-mi-card{transition:translate 220ms var(--kx-feedback-ease),box-shadow 220ms var(--kx-feedback-ease),border-color 180ms ease!important}
:where(html[data-page="services"]) .shared-footer-links a,:where(html[data-page="services"]) .shared-kx-dropdown-item,:where(html[data-page="services"]) .shared-kx-mobile-nav-link{ text-decoration-color:transparent;text-underline-offset:5px;transition:color 160ms ease,background-color 160ms ease,text-decoration-color 160ms ease!important}
:where(html[data-page="services"]) .shared-footer-links a:focus-visible{ text-decoration:underline;text-decoration-color:currentColor }
:where(html[data-page="services"]) :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea,select){transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease!important}
:where(html[data-page="services"]) :where(input:not([type=checkbox]):not([type=radio]),textarea,select):focus{border-color:#187d6b!important;box-shadow:0 0 0 3px rgb(24 125 107 / .12)}
:where(html[data-page="services"]) :where(button[aria-expanded],summary){transition:background-color 160ms ease,color 160ms ease!important}
:where(html[data-page="services"]) :where(button[aria-expanded],summary):focus-visible{border-radius:8px}
@media(hover:hover) and (pointer:fine){
  :where(html[data-page="services"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):hover{translate:0 -2px}
  :where(html[data-page="services"]) .kx-mi-action:hover .kx-mi-arrow,:where(html[data-page="services"]) .kx-mi-action:focus-visible .kx-mi-arrow{translate:3px 0}
  :where(html[data-page="services"]) .kx-mi-card:hover,:where(html[data-page="services"]) .kx-mi-card:focus-within{translate:0 -3px;border-color:#d8ba78;box-shadow:0 10px 24px rgb(16 32 57 / .08)}
  :where(html[data-page="services"]) .shared-footer-links a:hover{text-decoration:underline;text-decoration-color:currentColor}
}
:where(html[data-page="services"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):active{translate:0 0;scale:.98;transition-duration:80ms!important}
:where(html[data-page="services"]) .kx-mi-card:active{translate:0 -1px}
/* Honor this preference for both this layer and pre-existing decorative loops. */
@media(prefers-reduced-motion:reduce){
  html:where([data-page="services"]){scroll-behavior:auto!important}
  :where(html[data-page="services"]) *,:where(html[data-page="services"]) *::before,:where(html[data-page="services"]) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  :where(html[data-page="services"]) .kx-mi-action,:where(html[data-page="services"]) .kx-mi-card,:where(html[data-page="services"]) .kx-mi-arrow{translate:none!important;scale:none!important;transition:none!important}
  :where(html[data-page="services"]) .shared-footer-links a,:where(html[data-page="services"]) .shared-kx-dropdown-item,:where(html[data-page="services"]) .shared-kx-mobile-nav-link{transition:none!important}
}

/* services-upgrade.css */
/* Services reference implementation. Scoped to protect shared navigation and footer. */
:where(html[data-page="services"]) .services-upgraded{--su-navy:#071c42;--su-muted:#577195;--su-gold:#ffc400;--su-border:#e3eaf2;--su-shadow:0 16px 40px #071c4210;color:var(--su-navy);background:#fffcf5;font-family:'Plus Jakarta Sans',sans-serif;isolation:isolate}
:where(html[data-page="services"]) .services-upgraded *{box-sizing:border-box}
:where(html[data-page="services"]) .services-upgraded :is(h1,h2,h3,p,blockquote,ul,ol){margin:0}
:where(html[data-page="services"]) .services-upgraded :is(h1,h2,h3){font-family:Outfit,sans-serif;color:var(--su-navy)}
:where(html[data-page="services"]) .services-upgraded h1{font-size:clamp(34px,4.2vw,62px);font-weight:800;line-height:1.04;letter-spacing:-.04em}
:where(html[data-page="services"]) .services-upgraded h2{font-size:clamp(30px,3.2vw,46px);font-weight:800;line-height:1.1;letter-spacing:-.035em;position:relative}
:where(html[data-page="services"]) .services-upgraded h3{font-size:23px;font-weight:700;line-height:1.2;letter-spacing:-.025em}
:where(html[data-page="services"]) .services-upgraded p{color:var(--su-muted);font-size:16px;line-height:1.7}
:where(html[data-page="services"]) .services-upgraded button{font-family:inherit;cursor:pointer}
:where(html[data-page="services"]) .su-section{padding:56px 0;scroll-margin-top:100px;position:relative}
:where(html[data-page="services"]) .su-container{width:100%;max-width:1360px;padding:0 24px;margin:auto;position:relative}
:where(html[data-page="services"]) .su-section :is(a,button):focus-visible{outline:3px solid #2166e8;outline-offset:4px}
:where(html[data-page="services"]) .services-upgraded .su-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;color:#657f9f;line-height:1.4;margin-bottom:20px}
:where(html[data-page="services"]) .su-dot-eyebrow{display:inline-flex;align-items:center;gap:12px}
:where(html[data-page="services"]) .su-dot-eyebrow:before{content:'';width:7px;height:7px;border-radius:50%;background:#ffbf16;flex-shrink:0}
:where(html[data-page="services"]) .services-upgraded .su-pill,:where(html[data-page="services"]) .services-upgraded .su-blue-pill{display:inline-flex;border-radius:999px;padding:9px 15px;font-size:11px;letter-spacing:.12em}
:where(html[data-page="services"]) .services-upgraded .su-pill{background:white;border:1px solid var(--su-border);color:var(--su-navy);box-shadow:0 5px 14px #071c4208}
:where(html[data-page="services"]) .services-upgraded .su-blue-pill{background:#eaf3ff;color:#2c75df}
:where(html[data-page="services"]) .su-gold-text{color:#d6970d}
:where(html[data-page="services"]) .su-underlined{position:relative;display:inline-block}
:where(html[data-page="services"]) .su-underlined:after{content:'';position:absolute;left:8%;right:8%;bottom:-7px;height:8px;border-top:2px solid #d49a12;border-radius:50%;rotate:-1deg}
:where(html[data-page="services"]) .su-rays{display:inline-block;position:absolute;width:34px;height:32px;right:-32px;top:-12px;pointer-events:none}
:where(html[data-page="services"]) .su-rays b{position:absolute;height:3px;width:17px;border-radius:3px;background:#ffc400;left:8px;top:15px;rotate:-20deg}
:where(html[data-page="services"]) .su-rays b:first-child{width:22px;rotate:-62deg;left:0;top:0}:where(html[data-page="services"]) .su-rays b:last-child{width:12px;rotate:15deg;left:13px;top:28px}
:where(html[data-page="services"]) .su-centered{text-align:center;max-width:920px;margin:0 auto}
:where(html[data-page="services"]) .su-centered h2{display:inline-block}:where(html[data-page="services"]) .su-centered>p:last-child{margin-top:20px;max-width:720px;margin-inline:auto}
:where(html[data-page="services"]) .su-actions{display:flex;gap:14px;flex-wrap:wrap}
:where(html[data-page="services"]) .su-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:14px 23px;border:1px solid transparent;border-radius:999px;font-size:14px;font-weight:700;line-height:1.4;text-decoration:none;transition:transform .18s,background .18s,box-shadow .18s;white-space:nowrap;text-align:center}
:where(html[data-page="services"]) .su-button i{font-size:20px;flex-shrink:0}:where(html[data-page="services"]) .su-button-gold{background:#ffc923;color:#071c42;box-shadow:0 8px 24px #eeb71424}
:where(html[data-page="services"]) .su-button-white{background:#fff;color:#071c42;border-color:#dce5f0;box-shadow:0 3px 5px #071c4206}:where(html[data-page="services"]) .su-button-navy{background:#0c2448;color:white;box-shadow:0 8px 18px #071c4214}
:where(html[data-page="services"]) .su-icon{width:52px;height:52px;display:inline-grid;place-items:center;border-radius:14px;flex-shrink:0;font-size:28px}
:where(html[data-page="services"]) .su-gold{background:#fff4cf;color:#c39106}:where(html[data-page="services"]) .su-blue{background:#e9f2ff;color:#287cf6}:where(html[data-page="services"]) .su-green{background:#e5f8ef;color:#00b58d}:where(html[data-page="services"]) .su-pink{background:#fdeaf4;color:#f33886}:where(html[data-page="services"]) .su-purple{background:#f0eaff;color:#8750f7}:where(html[data-page="services"]) .su-cyan{background:#e4f9fc;color:#009fce}
:where(html[data-page="services"]) .su-note{display:inline-block;position:relative;font:600 25px/1.1 Caveat,cursive;color:#a87507;max-width:240px;transition:transform .25s cubic-bezier(.2,.75,.25,1)}
:where(html[data-page="services"]) .su-annotation-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3}
:where(html[data-page="services"]) .su-hero{padding:28px 0 58px}:where(html[data-page="services"]) .su-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
:where(html[data-page="services"]) .su-hero-copy{padding:40px 0 14px}:where(html[data-page="services"]) .services-upgraded .su-hero-copy .su-eyebrow{margin-bottom:26px}
:where(html[data-page="services"]) .services-upgraded mark{position:relative;color:inherit;background:linear-gradient(transparent 28%,#ffedb9 28%,#ffedb9 92%,transparent 92%);box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:18px;padding:0 3px;margin-left:-3px}
:where(html[data-page="services"]) .services-upgraded .su-lead{font-size:18px;line-height:1.7;margin:28px 0;max-width:550px}
:where(html[data-page="services"]) .su-diagram{height:610px;position:relative;min-width:0;background-image:radial-gradient(#93bce543 .9px,transparent .9px);background-size:18px 18px}
:where(html[data-page="services"]) .su-rings{position:absolute;inset:0;pointer-events:none}:where(html[data-page="services"]) .su-rings b{position:absolute;left:50%;top:48%;translate:-50% -50%;width:90%;aspect-ratio:1;border:1px dashed #96c4f1a6;border-radius:50%}:where(html[data-page="services"]) .su-rings b:nth-child(2){width:70%}:where(html[data-page="services"]) .su-rings b:nth-child(3){width:50%}
:where(html[data-page="services"]) .su-connections{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none}
@keyframes page-services-suPulseDot{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.28);opacity:1;filter:drop-shadow(0 0 3px #ffc400)}}
:where(html[data-page="services"]) .su-connections circle[data-path]{transform-box:fill-box;transform-origin:center;animation:page-services-suPulseDot 2.8s ease-in-out infinite}
:where(html[data-page="services"]) .su-connections circle[data-path]:nth-of-type(even){animation-delay:1.4s}
:where(html[data-page="services"]) .su-hub{position:absolute;z-index:2;left:50%;top:48%;translate:-50% -50%;width:32%;min-height:180px;border-radius:30px;border:1px solid #dca500;background:linear-gradient(145deg,#214c79,#102e55 52%,#071c36);box-shadow:inset 0 0 0 8px #0a1b3440,0 12px 30px #ffc40035;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 8px;color:white}
:where(html[data-page="services"]) .su-hub:before{content:'';position:absolute;inset:9px;border:1px solid #54789977;border-radius:22px;pointer-events:none}
:where(html[data-page="services"]) .su-hub strong{font:700 clamp(26px,2.5vw,38px)/1.1 Outfit,sans-serif;letter-spacing:-.04em}:where(html[data-page="services"]) .su-hub>span:not(.su-status){color:#ffc400;letter-spacing:.12em;font-weight:700;font-size:12px;margin-top:6px}:where(html[data-page="services"]) .su-hub hr{width:24px;border:0;border-top:1px solid #a4bbd955;margin:14px 0}:where(html[data-page="services"]) .su-hub small{font-size:8px;letter-spacing:.16em;font-weight:700;color:#dce9fa}:where(html[data-page="services"]) .su-status{position:absolute;left:20px;top:20px;width:7px;height:7px;background:#ffc400;border-radius:50%}
:where(html[data-page="services"]) .su-node{position:absolute;width:34%;min-height:160px;background:#fff;border:1px solid #dce5f0;border-radius:20px;box-shadow:var(--su-shadow);padding:18px;z-index:2;transition:transform .22s cubic-bezier(.2,.75,.25,1),box-shadow .22s ease,border-color .22s ease}
:where(html[data-page="services"]) .su-node-strategy{left:0;top:5%}:where(html[data-page="services"]) .su-node-design{right:0;top:5%}:where(html[data-page="services"]) .su-node-growth{left:0;top:66%}:where(html[data-page="services"]) .su-node-technology{right:0;top:66%}
:where(html[data-page="services"]) .su-node .su-icon{width:48px;height:48px;border-radius:12px;font-size:28px;margin-bottom:10px;transition:transform .22s cubic-bezier(.2,.75,.25,1)}:where(html[data-page="services"]) .su-node h3{font-size:21px;margin-bottom:6px}:where(html[data-page="services"]) .services-upgraded .su-node p{font-size:13px;line-height:1.4}
:where(html[data-page="services"]) .su-hero-note{position:absolute;right:0;bottom:2px;font-size:25px}
:where(html[data-page="services"]) .su-capabilities{padding-top:30px}:where(html[data-page="services"]) .su-rule-eyebrow{display:flex;align-items:center;justify-content:center;gap:18px}:where(html[data-page="services"]) .su-rule-eyebrow:before,:where(html[data-page="services"]) .su-rule-eyebrow:after{content:'';width:42px;height:1px;background:#cbd5df}
:where(html[data-page="services"]) .su-capability-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:44px}
:where(html[data-page="services"]) .su-capability-strip article{display:flex;align-items:flex-start;gap:16px;text-align:left;padding:28px 24px;border:1px solid var(--su-border);border-radius:24px;box-shadow:0 10px 26px #071c4205;transition:transform .25s cubic-bezier(.2,.75,.25,1),box-shadow .25s ease,border-color .25s ease;min-width:0}
:where(html[data-page="services"]) .su-capability-strip article:nth-child(1){background:#fffbef;border-color:#f2e3b1}
:where(html[data-page="services"]) .su-capability-strip article:nth-child(2){background:#f4fcf7;border-color:#cdeadd}
:where(html[data-page="services"]) .su-capability-strip article:nth-child(3){background:#f6faff;border-color:#d3e4f8}
:where(html[data-page="services"]) .su-capability-strip article:nth-child(4){background:#fef6fb;border-color:#f4d5e6}
:where(html[data-page="services"]) .su-capability-strip article .su-icon{width:48px;height:48px;border-radius:14px;background:#fff;box-shadow:0 4px 12px #071c4210}
:where(html[data-page="services"]) .su-capability-strip h3{margin:0 0 6px;font-size:19px}
:where(html[data-page="services"]) .services-upgraded .su-capability-strip p{font-size:14px;line-height:1.55;margin:0}
:where(html[data-page="services"]) .su-phone-break{display:none}
:where(html[data-page="services"]) .su-offer-heading{display:grid;grid-template-columns:1.25fr 1fr .75fr;gap:24px;align-items:end;margin-bottom:36px}:where(html[data-page="services"]) .su-offer-heading h2{font-size:clamp(30px,3vw,42px)}:where(html[data-page="services"]) .su-plan-wrap{position:relative;padding-top:50px}:where(html[data-page="services"]) .su-plan-wrap .su-note{position:absolute;right:45px;top:-8px;width:125px;color:#071c42;font-size:24px}:where(html[data-page="services"]) .su-plan-wrap .su-button{width:100%;padding-inline:18px}
:where(html[data-page="services"]) .su-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}:where(html[data-page="services"]) .su-service-card{padding:26px;background:#fff;border:1px solid var(--su-border);border-radius:24px;box-shadow:0 10px 26px #071c4205;display:flex;flex-direction:column;min-width:0;transition:transform .25s cubic-bezier(.2,.75,.25,1),box-shadow .25s ease,border-color .25s ease}:where(html[data-page="services"]) .su-service-card h3{font-size:22px;margin:14px 0 8px}:where(html[data-page="services"]) .services-upgraded .su-service-card>p{font-size:14px;line-height:1.65;min-height:70px}:where(html[data-page="services"]) .su-card-detail{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:4px;align-items:center;margin:16px 0;flex:1}:where(html[data-page="services"]) .su-card-detail ul{list-style:none;padding:0}:where(html[data-page="services"]) .su-card-detail li{font-size:12px;line-height:1.5;display:flex;align-items:flex-start;gap:8px;margin:8px 0}:where(html[data-page="services"]) .su-check{width:17px;height:17px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;font-size:11px;margin-top:1px}:where(html[data-page="services"]) .su-mini{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 6px 8px #071c420d);transition:transform .3s cubic-bezier(.2,.75,.25,1)}:where(html[data-page="services"]) .su-service-card .su-icon{transition:transform .25s cubic-bezier(.2,.75,.25,1)}
:where(html[data-page="services"]) .su-text-button{border:0;background:none;padding:7px 0;display:inline-flex;align-items:center;align-self:flex-start;gap:10px;font:700 14px/1.4 'Plus Jakarta Sans',sans-serif;color:#071c42;text-decoration:none;min-height:44px;transition:color .18s,transform 160ms cubic-bezier(.2,.75,.25,1)}:where(html[data-page="services"]) .su-text-button i{font-size:20px;transition:transform 160ms cubic-bezier(.2,.75,.25,1);display:inline-block}:where(html[data-page="services"]) .su-gold-link{color:#a06c00}
:where(html[data-page="services"]) .su-process-note-row{height:70px;padding-top:20px;padding-left:50px}:where(html[data-page="services"]) .su-process-note-row .su-note{color:#577195}
:where(html[data-page="services"]) .su-process-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;position:relative}
:where(html[data-page="services"]) .su-process-grid:before{content:'';position:absolute;left:-10px;right:-10px;top:65%;height:60%;border-top:24px solid #fff0c449;border-radius:50%;z-index:-1}
:where(html[data-page="services"]) .su-stage{position:relative;padding:26px 22px;background:white;border:1px solid var(--su-border);border-radius:24px;text-align:center;box-shadow:var(--su-shadow);transition:transform .25s cubic-bezier(.2,.75,.25,1),box-shadow .25s ease,border-color .25s ease}:where(html[data-page="services"]) .su-stage .su-icon{width:66px;height:66px;border-radius:50%;font-size:32px;transition:transform .25s cubic-bezier(.2,.75,.25,1)}:where(html[data-page="services"]) .su-step-number{display:block;font-weight:700;letter-spacing:.12em;color:#7a8da5;font-size:11px;margin:14px 0 10px}:where(html[data-page="services"]) .su-stage h3{font-size:22px;margin-bottom:12px}:where(html[data-page="services"]) .services-upgraded .su-stage p{font-size:14px;line-height:1.6}
:where(html[data-page="services"]) .su-stage-connector{position:absolute;left:calc(100% - 1px);top:50%;translate:0 -50%;width:32px;height:32px;border:1px solid #ddb53e;border-radius:50%;background:#fffcf5;display:grid;place-items:center;z-index:2;color:#b18b18}:where(html[data-page="services"]) .su-stage-connector:before{content:'';position:absolute;left:-15px;right:-15px;top:50%;height:1px;background:#dfb847;z-index:-1}:where(html[data-page="services"]) .su-stage-connector i{background:#fffcf5;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;transition:transform 180ms cubic-bezier(.2,.75,.25,1)}
:where(html[data-page="services"]) .su-case-layout{display:grid;grid-template-columns:.8fr 1.7fr;gap:32px;align-items:center}:where(html[data-page="services"]) .su-case-editorial h2{max-width:360px}:where(html[data-page="services"]) .services-upgraded .su-case-editorial>p:not(.su-eyebrow){margin:24px 0;font-size:16px}:where(html[data-page="services"]) .su-case-panel{display:grid;grid-template-columns:.8fr 1.2fr;background:white;border:1px solid var(--su-border);border-radius:24px;box-shadow:var(--su-shadow);overflow:hidden;min-width:0;transition:box-shadow .3s ease,border-color .3s ease}:where(html[data-page="services"]) .su-case-photo{position:relative;min-height:420px}:where(html[data-page="services"]) .su-case-photo>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .45s cubic-bezier(.2,.75,.25,1)}:where(html[data-page="services"]) .su-photo-badge{position:absolute;right:12px;top:16px;padding:13px;background:white;border:1px solid #e6ebee;border-radius:14px;display:grid;grid-template-columns:24px 1fr;gap:0 5px;box-shadow:var(--su-shadow);transition:transform .25s cubic-bezier(.2,.75,.25,1),box-shadow .25s ease}:where(html[data-page="services"]) .su-photo-badge i{grid-row:span 2;color:#d49a12;font-size:25px;align-self:center}:where(html[data-page="services"]) .su-photo-badge strong{font:800 25px/1 Outfit,sans-serif}:where(html[data-page="services"]) .su-photo-badge small{font-size:10px}:where(html[data-page="services"]) .su-case-content{padding:24px;min-width:0}:where(html[data-page="services"]) .services-upgraded .su-case-content .su-eyebrow{color:#b68105;font-size:10px;letter-spacing:.09em;margin-bottom:14px}:where(html[data-page="services"]) .su-case-content h3{font-size:27px;margin-bottom:16px}:where(html[data-page="services"]) .services-upgraded .su-case-content>p:not(.su-eyebrow){font-size:14px;margin-bottom:10px}:where(html[data-page="services"]) .su-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px solid var(--su-border);padding-top:20px;margin-top:18px}:where(html[data-page="services"]) .su-metrics>div{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;transition:transform .2s cubic-bezier(.2,.75,.25,1)}:where(html[data-page="services"]) .su-metrics .su-icon{width:30px;height:30px;border-radius:50%;font-size:17px;transition:transform .2s cubic-bezier(.2,.75,.25,1)}:where(html[data-page="services"]) .su-metrics strong{font:800 25px/1.1 Outfit,sans-serif}:where(html[data-page="services"]) .su-metrics span:last-child{font-size:10px;color:#577195}:where(html[data-page="services"]) .su-case-note-row{text-align:right;min-height:72px;padding-top:30px}:where(html[data-page="services"]) .su-case-note-row .su-note{font-size:23px;max-width:175px}
:where(html[data-page="services"]) .services-upgraded .su-client-love{font:600 27px/1.2 Caveat,cursive;margin-bottom:18px;display:inline-block;position:relative}:where(html[data-page="services"]) .su-client-love:after{content:'';height:5px;position:absolute;left:4px;right:4px;bottom:-7px;border-top:2px solid #e2b331;border-radius:50%}
:where(html[data-page="services"]) .su-carousel-controls{display:flex;justify-content:flex-end;gap:10px;margin:22px 0 18px}:where(html[data-page="services"]) .su-round-button{width:44px;height:44px;border-radius:50%;border:1px solid #dce5f0;background:#fff;color:#071c42;font-size:21px;display:grid;place-items:center;transition:transform 120ms cubic-bezier(.2,.75,.25,1),background .18s,border-color .18s}:where(html[data-page="services"]) .su-round-button:disabled{opacity:.4;cursor:default}
:where(html[data-page="services"]) .su-slider{overflow:hidden;padding:4px;margin:-4px;touch-action:pan-y}:where(html[data-page="services"]) .su-testimonial-track{display:flex;gap:24px;transition:transform .3s ease}:where(html[data-page="services"]) .su-testimonial-card{flex:0 0 calc((100% - 48px)/3);min-width:0;padding:28px;border:1px solid var(--su-border);border-radius:24px;background:white;display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.2,.75,.25,1),box-shadow .25s ease,border-color .25s ease}:where(html[data-page="services"]) .su-featured-quote{background:#fff9e8;border-color:#eed38a}:where(html[data-page="services"]) .su-quote-badge{width:52px;height:52px;border-radius:14px;background:#fff0c7;color:#e9b00c;display:grid;place-items:center;font:700 64px/1 Georgia,serif;padding-top:10px;margin-bottom:22px;transition:transform .25s cubic-bezier(.2,.75,.25,1)}:where(html[data-page="services"]) .su-testimonial-card:not(.su-featured-quote) .su-quote-badge{background:#ecf3fe}:where(html[data-page="services"]) .su-testimonial-card blockquote{font-size:16px;line-height:1.75;margin-bottom:25px;flex:1}:where(html[data-page="services"]) .su-author{display:flex;align-items:center;gap:12px;border-top:1px solid var(--su-border);padding-top:20px}:where(html[data-page="services"]) .su-author img{width:48px;height:48px;object-fit:cover;border-radius:50%;border:2px solid #efbd2c;flex-shrink:0;transition:transform .25s cubic-bezier(.2,.75,.25,1)}:where(html[data-page="services"]) .su-author strong{font:700 17px/1.3 Outfit,sans-serif;display:block}:where(html[data-page="services"]) .su-author div>span{display:block;color:#577195;font-size:12px;margin-top:4px}:where(html[data-page="services"]) .su-stars{color:#e9b00c;font-size:17px;letter-spacing:3px;margin-top:16px}:where(html[data-page="services"]) .su-carousel-dots{display:flex;justify-content:center;gap:0;margin-top:16px}:where(html[data-page="services"]) .su-carousel-dots button{width:44px;height:44px;border:0;background:none;display:grid;place-items:center;padding:0}:where(html[data-page="services"]) .su-carousel-dots button:before{content:'';width:7px;height:7px;background:#d5deea;border-radius:50%;transition:width .2s}:where(html[data-page="services"]) .su-carousel-dots button[aria-current=true]:before{background:#eeb519;width:21px;border-radius:6px}:where(html[data-page="services"]) .su-sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
:where(html[data-page="services"]) .su-cta{padding-bottom:88px}:where(html[data-page="services"]) .su-cta-panel{position:relative;isolation:isolate;border-radius:30px;padding:48px;background:linear-gradient(120deg,#082747,#0b315c 60%,#061e39);display:grid;grid-template-columns:1.8fr 1fr;gap:40px;align-items:center;color:white;box-shadow:0 20px 40px #071c4225;overflow:hidden}:where(html[data-page="services"]) .services-upgraded .su-cta-panel .su-eyebrow{color:#ffc400;margin-bottom:24px}:where(html[data-page="services"]) .su-cta-panel h2{color:white;font-size:clamp(30px,3.1vw,44px);line-height:1.12}:where(html[data-page="services"]) .su-cta-panel h2 span{color:#ffc400}:where(html[data-page="services"]) .services-upgraded .su-cta-panel>div>p:not(.su-eyebrow){color:#c5d5e7;margin:24px 0 28px;max-width:570px}:where(html[data-page="services"]) .su-cta-panel>.su-cta-orbits{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}:where(html[data-page="services"]) .su-trust{list-style:none;padding-left:32px;border-left:1px solid #adc3df33;display:flex;flex-direction:column;gap:24px}:where(html[data-page="services"]) .su-trust li{display:flex;align-items:center;gap:14px;font-size:14px;line-height:1.5;transition:transform .2s cubic-bezier(.2,.75,.25,1)}:where(html[data-page="services"]) .su-trust li>span{width:44px;height:44px;flex-shrink:0;border:1px solid #d5a821;border-radius:50%;display:grid;place-items:center;font-size:22px;color:#ffc400;transition:transform .2s cubic-bezier(.2,.75,.25,1),background-color .2s ease,border-color .2s ease}:where(html[data-page="services"]) .su-cta-panel :is(a,button):focus-visible{outline-color:#ffd23c}
@media(hover:hover){:where(html[data-page="services"]) .su-button:hover:not(:disabled){transform:translateY(-2px)}:where(html[data-page="services"]) .su-button-gold:hover{background:#ffd23c}:where(html[data-page="services"]) .su-button-navy:hover{background:#173c67}:where(html[data-page="services"]) .su-button-white:hover{background:#fff8df}:where(html[data-page="services"]) .su-text-button:hover{color:#bd890d}:where(html[data-page="services"]) .su-text-button:hover i{transform:translateX(4px)}:where(html[data-page="services"]) .su-round-button:hover:not(:disabled){background:#fff2cb}:where(html[data-page="services"]) .su-stage:hover .su-stage-connector i{transform:translateX(3px)}:where(html[data-page="services"]) .su-node:hover{transform:translateY(-4px);box-shadow:0 22px 48px #071c4214;border-color:#cbdbee}:where(html[data-page="services"]) .su-node:hover .su-icon{transform:scale(1.08)}:where(html[data-page="services"]) .su-capability-strip article:hover{transform:translateY(-4px);box-shadow:0 22px 48px #071c4212}:where(html[data-page="services"]) .su-capability-strip article:hover .su-icon{transform:translateY(-3px) scale(1.06)}:where(html[data-page="services"]) .su-service-card:hover{transform:translateY(-5px);box-shadow:0 22px 48px #071c4212;border-color:#d4e2f2}:where(html[data-page="services"]) .su-service-card:hover .su-icon{transform:scale(1.08) rotate(-2deg)}:where(html[data-page="services"]) .su-service-card:hover .su-mini{transform:translateY(-3px) scale(1.02)}:where(html[data-page="services"]) .su-stage:hover{transform:translateY(-4px);box-shadow:0 22px 44px #071c4210;border-color:#d2e1f2}:where(html[data-page="services"]) .su-stage:hover .su-icon{transform:scale(1.07)}:where(html[data-page="services"]) .su-case-panel:hover{box-shadow:0 24px 54px #071c4216;border-color:#cfe0f4}:where(html[data-page="services"]) .su-case-panel:hover .su-case-photo>img{transform:scale(1.03)}:where(html[data-page="services"]) .su-case-panel:hover .su-photo-badge{transform:translateY(-2px);box-shadow:0 16px 36px #071c4218}:where(html[data-page="services"]) .su-metrics>div:hover{transform:translateY(-2px)}:where(html[data-page="services"]) .su-metrics>div:hover .su-icon{transform:scale(1.12)}:where(html[data-page="services"]) .su-testimonial-card:hover{transform:translateY(-4px);box-shadow:0 20px 42px #071c4210;border-color:#cfdfef}:where(html[data-page="services"]) .su-testimonial-card.su-featured-quote:hover{border-color:#e2c36a}:where(html[data-page="services"]) .su-testimonial-card:hover .su-quote-badge{transform:scale(1.06) rotate(-2deg)}:where(html[data-page="services"]) .su-testimonial-card:hover .su-author img{transform:scale(1.06)}:where(html[data-page="services"]) .su-trust li:hover{transform:translateX(4px)}:where(html[data-page="services"]) .su-trust li:hover>span{transform:scale(1.08);background:#ffc40020;border-color:#ffc400}:where(html[data-page="services"]) .su-note:hover{transform:scale(1.04) rotate(-1deg)}}
:where(html[data-page="services"]) .su-button:active{transform:translateY(0) scale(.98)}:where(html[data-page="services"]) .su-text-button:active{transform:scale(.97)}:where(html[data-page="services"]) .su-round-button:not(:disabled):active{transform:scale(.92)}:where(html[data-page="services"]) .su-service-card:active{transform:translateY(-2px)}:where(html[data-page="services"]) .su-stage:active{transform:translateY(-1px)}:where(html[data-page="services"]) .su-testimonial-card:active{transform:translateY(-1px)}
@media(max-width:1199px){:where(html[data-page="services"]) .su-hero-grid{gap:32px}:where(html[data-page="services"]) .su-node{padding:14px}:where(html[data-page="services"]) .su-hub{min-height:160px}:where(html[data-page="services"]) .su-hub>span:not(.su-status){font-size:10px}:where(html[data-page="services"]) .su-hub small{font-size:7px}:where(html[data-page="services"]) .su-offer-heading{grid-template-columns:1.3fr 1fr}:where(html[data-page="services"]) .su-plan-wrap{grid-column:2;padding-top:36px}:where(html[data-page="services"]) .su-plan-wrap .su-note{top:-15px}:where(html[data-page="services"]) .su-offer-heading>p{align-self:center}:where(html[data-page="services"]) .su-service-card{padding:22px}:where(html[data-page="services"]) .su-card-detail{grid-template-columns:1fr}:where(html[data-page="services"]) .su-mini{width:120px;justify-self:end}:where(html[data-page="services"]) .su-case-panel{grid-template-columns:1fr}:where(html[data-page="services"]) .su-case-photo{min-height:250px}:where(html[data-page="services"]) .su-case-content{padding:28px}:where(html[data-page="services"]) .su-case-editorial h2{max-width:none}}
@media(max-width:1099px){:where(html[data-page="services"]) .su-section{padding:56px 0}:where(html[data-page="services"]) .su-diagram{height:580px}:where(html[data-page="services"]) .su-hero-copy h1{font-size:44px}:where(html[data-page="services"]) .services-upgraded .su-lead{font-size:16px}:where(html[data-page="services"]) .su-hero-copy .su-button{font-size:12px;padding-inline:18px}:where(html[data-page="services"]) .su-capability-strip{grid-template-columns:repeat(2,minmax(0,1fr))}:where(html[data-page="services"]) .su-capability-strip article{padding:24px 20px}:where(html[data-page="services"]) .su-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}:where(html[data-page="services"]) .su-card-detail{grid-template-columns:minmax(0,1fr) 110px}:where(html[data-page="services"]) .su-service-card>p{min-height:0}:where(html[data-page="services"]) .su-mini{width:100%}:where(html[data-page="services"]) .su-process-grid{grid-template-columns:1fr;gap:44px;max-width:600px;margin:auto!important}:where(html[data-page="services"]) .su-stage{padding:26px 32px}:where(html[data-page="services"]) .su-stage-connector{left:50%;top:auto;bottom:-38px;translate:-50% 0;rotate:90deg}:where(html[data-page="services"]) .su-process-note-row{max-width:600px;margin:auto;padding-left:0}:where(html[data-page="services"]) .su-testimonial-card{flex-basis:calc((100% - 24px)/2)}:where(html[data-page="services"]) .su-cta-panel{padding:32px;gap:28px}:where(html[data-page="services"]) .su-trust{padding-left:24px}}
@media(max-width:899px){:where(html[data-page="services"]) .su-hero-grid{grid-template-columns:1fr}:where(html[data-page="services"]) .su-hero-copy{max-width:680px;padding-top:0}:where(html[data-page="services"]) .su-hero-copy h1{font-size:clamp(40px,6.5vw,58px)}:where(html[data-page="services"]) .su-diagram{width:100%;max-width:600px;margin:auto}:where(html[data-page="services"]) .su-hub{min-height:180px}:where(html[data-page="services"]) .su-hub>span:not(.su-status){font-size:12px}:where(html[data-page="services"]) .su-hub small{font-size:8px}:where(html[data-page="services"]) .su-node{padding:18px}:where(html[data-page="services"]) .su-case-layout{grid-template-columns:1fr}:where(html[data-page="services"]) .su-case-editorial{max-width:670px}:where(html[data-page="services"]) .su-case-panel{grid-template-columns:.8fr 1.2fr}:where(html[data-page="services"]) .su-case-photo{min-height:420px}:where(html[data-page="services"]) .su-cta-panel{grid-template-columns:1fr}:where(html[data-page="services"]) .su-trust{border-left:0;border-top:1px solid #adc3df33;padding:24px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}:where(html[data-page="services"]) .su-trust li{flex-direction:column;text-align:center}}
@media(max-width:768px){:where(html[data-page="services"]) .su-container{padding-inline:16px}:where(html[data-page="services"]) .su-section{padding:44px 0}:where(html[data-page="services"]) .su-hero{padding-top:24px}:where(html[data-page="services"]) .services-upgraded h2{font-size:34px}:where(html[data-page="services"]) .su-rays{right:-20px;scale:.7;transform-origin:left bottom}:where(html[data-page="services"]) .su-centered{padding-inline:14px}:where(html[data-page="services"]) .su-hero-copy h1{font-size:clamp(34px,7.5vw,52px)}:where(html[data-page="services"]) .services-upgraded .su-lead{font-size:16px;margin:24px 0}:where(html[data-page="services"]) .su-button{min-height:48px;font-size:13px;padding:13px 20px}:where(html[data-page="services"]) .su-hero-copy .su-button{font-size:13px}:where(html[data-page="services"]) .su-offer-heading{grid-template-columns:1fr}:where(html[data-page="services"]) .su-plan-wrap{grid-column:auto;width:260px;margin-top:16px;padding-top:38px}:where(html[data-page="services"]) .su-offer-heading h2{font-size:36px}:where(html[data-page="services"]) .su-offer-heading>p{font-size:15px}:where(html[data-page="services"]) .su-service-grid,:where(html[data-page="services"]) .su-capability-strip{grid-template-columns:1fr}:where(html[data-page="services"]) .su-service-card{padding:24px}:where(html[data-page="services"]) .su-service-card h3{font-size:24px}:where(html[data-page="services"]) .services-upgraded .su-service-card>p{min-height:0;font-size:15px}:where(html[data-page="services"]) .su-card-detail{grid-template-columns:minmax(0,1fr) 120px}:where(html[data-page="services"]) .su-card-detail li{font-size:13px}:where(html[data-page="services"]) .su-case-panel{grid-template-columns:1fr}:where(html[data-page="services"]) .su-case-photo{min-height:0;aspect-ratio:16/10}:where(html[data-page="services"]) .su-case-content{padding:24px}:where(html[data-page="services"]) .su-case-content h3{font-size:28px}:where(html[data-page="services"]) .su-metrics span:last-child{font-size:12px}:where(html[data-page="services"]) .su-testimonial-card{flex-basis:100%;padding:24px}:where(html[data-page="services"]) .su-author strong{font-size:18px}:where(html[data-page="services"]) .su-author div>span{font-size:13px}:where(html[data-page="services"]) .su-testimonial-card blockquote{font-size:16px}:where(html[data-page="services"]) .su-trust{display:flex;gap:18px}:where(html[data-page="services"]) .su-trust li{flex-direction:row;text-align:left;font-size:14px}:where(html[data-page="services"]) .su-cta-panel{padding:28px 24px;border-radius:24px}:where(html[data-page="services"]) .su-cta-panel h2{font-size:34px}:where(html[data-page="services"]) .su-cta-panel .su-actions{flex-direction:column}:where(html[data-page="services"]) .su-cta-panel .su-button{width:100%}:where(html[data-page="services"]) .su-note{font-size:22px}:where(html[data-page="services"]) .su-case-note-row .su-note{max-width:190px}:where(html[data-page="services"]) .su-cta{padding-bottom:56px}:where(html[data-page="services"]) .su-annotation-svg{overflow:hidden}}
@media(max-width:540px){:where(html[data-page="services"]) .su-diagram{height:490px;background-size:16px 16px}:where(html[data-page="services"]) .su-node{width:46%;min-height:126px;padding:12px;border-radius:16px}:where(html[data-page="services"]) .su-node-strategy,:where(html[data-page="services"]) .su-node-design{top:0}:where(html[data-page="services"]) .su-node-growth,:where(html[data-page="services"]) .su-node-technology{top:316px}:where(html[data-page="services"]) .su-node .su-icon{width:32px;height:32px;font-size:20px;border-radius:9px;margin-bottom:8px}:where(html[data-page="services"]) .su-node h3{font-size:16px;margin-bottom:4px}:where(html[data-page="services"]) .services-upgraded .su-node p{font-size:12px;line-height:1.4}:where(html[data-page="services"]) .su-hub{width:126px;min-height:120px;top:225px;border-radius:22px;padding:14px 5px}:where(html[data-page="services"]) .su-hub:before{border-radius:16px;inset:7px}:where(html[data-page="services"]) .su-hub strong{font-size:27px}:where(html[data-page="services"]) .su-hub>span:not(.su-status){font-size:8px;margin-top:4px}:where(html[data-page="services"]) .su-hub hr{margin:10px 0}:where(html[data-page="services"]) .su-hub small{font-size:6px;letter-spacing:.08em}:where(html[data-page="services"]) .su-status{left:15px;top:14px;width:5px;height:5px}:where(html[data-page="services"]) .su-rings b{top:225px}:where(html[data-page="services"]) .su-hero-note{bottom:0;right:0;font-size:22px;max-width:200px}:where(html[data-page="services"]) .su-capability-strip article{padding:22px 18px}:where(html[data-page="services"]) .su-capability-strip h3{font-size:18px}:where(html[data-page="services"]) .services-upgraded .su-capability-strip p{font-size:13px}:where(html[data-page="services"]) .su-card-detail{grid-template-columns:minmax(0,1fr) 105px}:where(html[data-page="services"]) .su-case-note-row{min-height:85px;padding-top:36px}:where(html[data-page="services"]) .su-phone-break{display:block}:where(html[data-page="services"]) .su-case-editorial .su-button{font-size:13px}:where(html[data-page="services"]) .su-hero-copy .su-actions{flex-direction:column;align-items:stretch}}
@media(max-width:389px){:where(html[data-page="services"]) .su-capability-strip{gap:14px}:where(html[data-page="services"]) .su-capability-strip article{padding:20px 16px}:where(html[data-page="services"]) .su-card-detail{grid-template-columns:1fr}:where(html[data-page="services"]) .su-mini{width:100px;justify-self:end}:where(html[data-page="services"]) .su-service-card{padding:20px}:where(html[data-page="services"]) .su-centered{padding-inline:8px}:where(html[data-page="services"]) .services-upgraded h2{font-size:30px}:where(html[data-page="services"]) .su-offer-heading h2{font-size:32px}:where(html[data-page="services"]) .su-stage{padding:24px}:where(html[data-page="services"]) .su-case-content{padding:20px}:where(html[data-page="services"]) .su-cta-panel{padding:24px 20px}:where(html[data-page="services"]) .su-cta-panel h2{font-size:30px}:where(html[data-page="services"]) .su-case-content h3{font-size:25px}}
@media(max-width:360px){:where(html[data-page="services"]) .su-container{padding-inline:6px}:where(html[data-page="services"]) .su-hero-copy{padding-inline:6px}:where(html[data-page="services"]) .su-section{padding-block:40px}:where(html[data-page="services"]) .su-diagram{margin-top:8px}:where(html[data-page="services"]) .su-hub{width:116px}:where(html[data-page="services"]) .su-rings b:first-child{width:94%}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="services"]) .services-upgraded *{scroll-behavior:auto!important;transition:none!important;animation:none!important}:where(html[data-page="services"]) .su-button:hover{transform:none!important}}
/* Keep eyebrows above centered titles; inline pills must not share their line. */
:where(html[data-page="services"]) .su-centered{display:flex;flex-direction:column;align-items:center}
:where(html[data-page="services"]) .su-centered h2{max-width:100%}
:where(html[data-page="services"]) .su-centered .su-eyebrow{flex-shrink:0}
:where(html[data-page="services"]) .su-service-card .su-card-detail{margin-top:10px}
:where(html[data-page="services"]) .su-service-card .su-mini{min-width:0}
@media(min-width:1200px){:where(html[data-page="services"]) .su-card-detail{grid-template-columns:minmax(0,1fr) 124px}:where(html[data-page="services"]) .su-card-detail li{font-size:13px}}
@media(max-width:360px){:where(html[data-page="services"]) .su-rays{right:-8px;top:-22px}}
/* Keep the process background ornament within the narrow shared container. */
@media(max-width:360px){:where(html[data-page="services"]) .su-process-grid:before{left:0;right:0}}

/* services-hero-orbital.css */
/* Services hero orbital system. The shared page grid owns its outer alignment. */
:where(html[data-page="services"]) .services-upgraded .su-orbital {
  container-type: inline-size;
  width: 100%;
  max-width: 680px;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin-inline: auto;
  padding: 0;
  background: none;
}

:where(html[data-page="services"]) .su-orbit-field {
  position: relative;
  width: 100%;
  aspect-ratio: 1.14 / 1;
  min-height: 560px;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 222, 126, .22), transparent 31%),
    radial-gradient(circle, rgba(219, 181, 89, .24) .7px, transparent .9px);
  background-size: auto, 17px 17px;
  -webkit-mask-image: radial-gradient(ellipse 91% 91% at 50% 49%, #000 66%, transparent 98%);
  mask-image: radial-gradient(ellipse 91% 91% at 50% 49%, #000 66%, transparent 98%);
}

:where(html[data-page="services"]) .su-orbit-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

:where(html[data-page="services"]) .su-orbit-art :is(path, circle) { vector-effect: non-scaling-stroke; }

:where(html[data-page="services"]) .su-orbit-hub {
  position: absolute;
  left: 50%;
  top: 48.4%;
  z-index: 3;
  translate: -50% -50%;
  width: 31.5%;
  aspect-ratio: 1;
  border: 1.5px solid #e4af1b;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 32% 20%, #104c81 0%, #082d53 50%, #051e39 100%);
  box-shadow: 0 16px 36px rgba(7, 28, 66, .17), 0 0 28px rgba(255, 211, 85, .15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  transition: box-shadow .26s cubic-bezier(.2, .75, .25, 1), border-color .26s ease;
}

:where(html[data-page="services"]) .su-orbit-hub::before,:where(html[data-page="services"]) 
.su-orbit-hub::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(104, 173, 252, .25);
  border-radius: inherit;
  pointer-events: none;
}
:where(html[data-page="services"]) .su-orbit-hub::before { inset: 11px; }
:where(html[data-page="services"]) .su-orbit-hub::after { inset: 18px; }
:where(html[data-page="services"]) .su-orbit-hub-eyebrow { color: #a8c9ec; font-size: 9px; font-weight: 600; letter-spacing: .12em; }
:where(html[data-page="services"]) .su-orbit-hub > strong { margin-top: 8px; font: 800 clamp(25px, 2.65vw, 35px)/1 Outfit, sans-serif; letter-spacing: -.035em; }
:where(html[data-page="services"]) .su-orbit-hub-title { margin-top: 5px; font: 700 clamp(13px, 1.35vw, 17px)/1.2 Outfit, sans-serif; }
:where(html[data-page="services"]) .su-orbit-divider { width: 24px; height: 1px; margin: 12px 0 10px; background: #e4af1b; }
:where(html[data-page="services"]) .su-orbit-hub-support { color: #bdd4eb; font-size: 8px; font-weight: 600; letter-spacing: .085em; line-height: 1.35; }

:where(html[data-page="services"]) .su-orbit-tabs { display: contents; }
:where(html[data-page="services"]) .su-orbit-node {
  position: absolute;
  z-index: 4;
  width: 27%;
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid #e0eaf4;
  border-radius: 20px;
  color: #071c42;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 12px 24px rgba(7, 28, 66, .09);
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
:where(html[data-page="services"]) .su-orbit-node > span:last-child { min-width: 0; }
:where(html[data-page="services"]) .su-orbit-node strong { display: block; color: #071c42; font: 700 15px/1.2 Outfit, sans-serif; letter-spacing: -.015em; }
:where(html[data-page="services"]) .su-orbit-node small { display: block; margin-top: 3px; color: #6689b2; font-size: 11px; font-weight: 500; line-height: 1.35; }
:where(html[data-page="services"]) .su-orbit-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 12px; color: var(--node-accent); background: var(--node-tile); font-size: 25px; transition: scale .2s ease; }
:where(html[data-page="services"]) .su-orbit-node[aria-selected="true"] { border-color: var(--node-accent); box-shadow: 0 14px 30px color-mix(in srgb, var(--node-accent) 18%, transparent); }
:where(html[data-page="services"]) .su-orbit-node[aria-selected="true"] .su-orbit-icon { scale: 1.06; }
:where(html[data-page="services"]) .su-orbit-node:focus-visible { outline: 3px solid #2166e8; outline-offset: 3px; }

:where(html[data-page="services"]) .su-orbit-node-web { left: 50%; top: 2.5%; translate: -50% 0; }
:where(html[data-page="services"]) .su-orbit-node-mobile { right: 0; top: 22%; }
:where(html[data-page="services"]) .su-orbit-node-marketing { right: 0; top: 64%; }
:where(html[data-page="services"]) .su-orbit-node-design { left: 50%; top: 80%; translate: -50% 0; }
:where(html[data-page="services"]) .su-orbit-node-cloud { left: 0; top: 64%; }
:where(html[data-page="services"]) .su-orbit-node-automation { left: 0; top: 22%; }

:where(html[data-page="services"]) .su-orbit-note {
  position: absolute;
  left: 2%;
  bottom: 1%;
  z-index: 5;
  color: #a3780a;
  font: 600 23px/1.03 Caveat, cursive;
  rotate: -2deg;
  pointer-events: none;
}

:where(html[data-page="services"]) .su-orbit-detail {
  width: min(100%, 520px);
  min-height: 100px;
  margin: 18px auto 0;
  padding: 14px 16px;
  border: 1px solid #dde8f2;
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 28px rgba(7, 28, 66, .07);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  transition: opacity .26s cubic-bezier(.2, .75, .25, 1), translate .26s cubic-bezier(.2, .75, .25, 1);
}
:where(html[data-page="services"]) .services-upgraded .su-orbit-detail h3 { margin: 0 0 5px; font-size: 17px; font-weight: 700; }
:where(html[data-page="services"]) .services-upgraded .su-orbit-detail p { margin: 0; font-size: 11px; line-height: 1.5; }
:where(html[data-page="services"]) .su-orbit-action { min-height: 44px; max-width: 150px; padding: 8px 12px; border: 0; border-radius: 999px; background: #071c42; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; font-weight: 700; line-height: 1.3; text-align: center; }
:where(html[data-page="services"]) .su-orbit-action:focus-visible { outline: 3px solid #2166e8; outline-offset: 3px; }
:where(html[data-page="services"]) .su-orbital.is-changing .su-orbit-detail { opacity: .45; translate: 0 4px; }

@media (hover: hover) {
  :where(html[data-page="services"]) .su-orbit-node:hover { border-color: var(--node-accent); background: #fff; }
  :where(html[data-page="services"]) .su-orbit-node:hover .su-orbit-icon { scale: 1.06; }
  :where(html[data-page="services"]) .su-orbit-action:hover { background: #12365f; }
  /* Micro-interactions set the individual translate property. Keep centered
     top/bottom nodes anchored on the same X coordinate during hover. */
  :where(html[data-page="services"]) .su-orbit-node-web.kx-mi-action:hover,:where(html[data-page="services"]) 
  .su-orbit-node-design.kx-mi-action:hover { translate: -50% -2px !important; }
}

:where(html[data-page="services"]) .su-orbit-node-web.kx-mi-action:active,:where(html[data-page="services"]) 
.su-orbit-node-design.kx-mi-action:active { translate: -50% 0 !important; }

@container (max-width: 519px) {
  :where(html[data-page="services"]) .su-orbit-field { height: 640px; min-height: 640px; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
  :where(html[data-page="services"]) .su-orbit-hub { top: 308px; width: 152px; padding: 13px; }
  :where(html[data-page="services"]) .su-orbit-hub > strong { font-size: 25px; }
  :where(html[data-page="services"]) .su-orbit-hub-title { font-size: 12px; }
  :where(html[data-page="services"]) .su-orbit-hub-support { font-size: 7px; letter-spacing: .06em; }
  :where(html[data-page="services"]) .su-orbit-hub-eyebrow { font-size: 7px; }
  :where(html[data-page="services"]) .su-orbit-node { width: 47%; min-height: 76px; padding: 9px; gap: 7px; border-radius: 14px; }
  :where(html[data-page="services"]) .su-orbit-node strong { font-size: 13px; }
  :where(html[data-page="services"]) .su-orbit-node small { font-size: 11px; }
  :where(html[data-page="services"]) .su-orbit-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; font-size: 20px; }
  :where(html[data-page="services"]) .su-orbit-node-web { width: 66%; left: 50%; right: auto; top: 14px; translate: -50% 0; }
  :where(html[data-page="services"]) .su-orbit-node-automation { left: 0; top: 142px; }
  :where(html[data-page="services"]) .su-orbit-node-mobile { right: 0; top: 142px; }
  :where(html[data-page="services"]) .su-orbit-node-cloud { left: 0; top: 402px; }
  :where(html[data-page="services"]) .su-orbit-node-marketing { right: 0; top: 402px; }
  :where(html[data-page="services"]) .su-orbit-node-design { width: 66%; left: 50%; top: 514px; translate: -50% 0; }
  :where(html[data-page="services"]) .su-orbit-note { left: 4%; bottom: 1px; font-size: 20px; line-height: 1; }
  :where(html[data-page="services"]) .su-orbit-detail { width: 100%; min-height: 124px; margin-top: 14px; padding: 16px; grid-template-columns: 1fr; gap: 13px; }
  :where(html[data-page="services"]) .services-upgraded .su-orbit-detail h3 { font-size: 18px; }
  :where(html[data-page="services"]) .services-upgraded .su-orbit-detail p { font-size: 13px; }
  :where(html[data-page="services"]) .su-orbit-action { width: 100%; max-width: none; font-size: 12px; }
}

@media (max-width: 360px) {
  :where(html[data-page="services"]) .su-orbit-node { width: 48%; }
  :where(html[data-page="services"]) .su-orbit-node-web,:where(html[data-page="services"])  .su-orbit-node-design { width: 68%; }
}

@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="services"]) .su-orbit-node,:where(html[data-page="services"])  .su-orbit-icon,:where(html[data-page="services"])  .su-orbit-detail { transition: none; }
}

/* page-container-rhythm.css */
/* Shared page rhythm: mirrors the Industries page container at every breakpoint. */
:root:where([data-page="services"]) {
  --kx-page-container: 1240px;
  --kx-page-gutter: 24px;
}

:where(html[data-page="services"]) .shared-kx-header > .shared-kx-container,:where(html[data-page="services"]) 
.ux-page .shared-kx-container,:where(html[data-page="services"]) 
main > section > :is(
  .container,
  .su-container,
  .impact-container,
  .origin-desktop-view,
  .phil-container,
  .journey-tl-container,
  .careersHero-container,
  .chFeels-container,
  .contact-hero-v2-container,
  .contact-container,
  .taste-inner,
  .ai-container,
  .rv-container,
  .wd-container,
  .wd-tech-container,
  .wd-testi-faq-container,
  .kx-ah-container,
  .ma-container,
  .kats-container,
  .cloud-hero-container,
  .kx-container
),:where(html[data-page="services"]) 
body > section > :is(
  .container,
  .contact-container,
  .cloud-hero-container,
  .kx-container
) {
  width: 100% !important;
  max-width: var(--kx-page-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--kx-page-gutter) !important;
  padding-right: var(--kx-page-gutter) !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  :root:where([data-page="services"]) { --kx-page-gutter: 16px; }
}

/* This section previously put its gutter on the full-width background itself. */
@media (max-width: 1023px) {
  :where(html[data-page="services"]) .wd-tech-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}



/* PAGE web-development */
/* web-development.html embedded 1 */

    /* ==========================================================================
       Inlined nav.css
       ========================================================================== */

/* ==========================================================================
   Kaxon Technologies - Global Navigation Bar & Modal Stylesheet (nav.css)
   Pixel-perfect unified header according to design specification
   ========================================================================== */

:root:where([data-page="web-development"]) {
  --kx-navy: #13243D;
  --kx-deep-navy: #0D1B31;
  --kx-secondary-navy: #1B3152;
  --kx-gold: #F9BE22;
  --kx-gold-hover: #FFCA3A;
  --kx-green: #00D084;
  --kx-cyan: #52BCEB;
  --kx-soft-cyan: #EAF8FF;
  --kx-soft-gold: #FFF8DD;
  --kx-soft-green: #E8F8F0;
  --kx-white: #FFFFFF;
  --kx-gray: #F4F6FA;
  --kx-pill-bg: #EDF3FA;
  --kx-border: #E8EDF4;
  --kx-border-subtle: #F1F4F9;
  --kx-text-dark: #13243D;
  --kx-text-muted: #65748B;
  --kx-radius-pill: 9999px;
  --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
}

/* ==========================================================================
   GLOBAL HEADER BAR
   ========================================================================== */
:where(html[data-page="web-development"]) .kx-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: 1px solid rgba(232, 237, 244, 0.8);
  transition: all 0.3s ease;
}

:where(html[data-page="web-development"]) .kx-header.scrolled {
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.06);
  background: rgba(255, 255, 255, 0.98);
}

:where(html[data-page="web-development"]) .kx-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :where(html[data-page="web-development"]) .kx-container {
    padding: 0 16px;
  }
}

:where(html[data-page="web-development"]) .kx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Brand Logo */
:where(html[data-page="web-development"]) .kx-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0F1D32;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

:where(html[data-page="web-development"]) .kx-logo-tech {
  color: #00D084;
  font-weight: 800;
}

/* ==========================================================================
   CENTER NAVIGATION PILL CAPSULE
   ========================================================================== */
:where(html[data-page="web-development"]) .kx-nav-menu {
  display: flex;
  align-items: center;
  background: #EDF3FA;
  padding: 4px 6px;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(220, 230, 242, 0.85);
  box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
  flex-shrink: 1;
}

:where(html[data-page="web-development"]) .kx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

:where(html[data-page="web-development"]) .kx-nav-item {
  position: relative;
}

:where(html[data-page="web-development"]) .kx-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--kx-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

:where(html[data-page="web-development"]) .kx-nav-link:hover {
  color: #0F1D32;
  background: rgba(255, 255, 255, 0.7);
}

:where(html[data-page="web-development"]) .kx-nav-link.active {
  color: #0F1D32 !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
}

:where(html[data-page="web-development"]) .kx-nav-link::after,:where(html[data-page="web-development"]) 
.kx-nav-link.active::after {
  display: none !important;
}

:where(html[data-page="web-development"]) .kx-chevron-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  stroke: currentColor;
}

/* Dropdown */
:where(html[data-page="web-development"]) .kx-dropdown-wrapper {
  position: relative;
}

:where(html[data-page="web-development"]) .kx-dropdown-wrapper:hover .kx-chevron-icon,:where(html[data-page="web-development"]) 
.kx-dropdown-wrapper:focus-within .kx-chevron-icon {
  transform: rotate(180deg);
}

:where(html[data-page="web-development"]) .kx-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 250px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
  border: 1px solid var(--kx-border);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 100;
}

:where(html[data-page="web-development"]) .kx-dropdown-wrapper:hover .kx-dropdown-menu,:where(html[data-page="web-development"]) 
.kx-dropdown-wrapper:focus-within .kx-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

:where(html[data-page="web-development"]) .kx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #13243D;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

:where(html[data-page="web-development"]) .kx-dropdown-item:hover {
  background: #F0F7FF;
  color: #0F1D32;
}

/* ==========================================================================
   RIGHT ACTION BUTTONS
   ========================================================================== */
:where(html[data-page="web-development"]) .kx-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

:where(html[data-page="web-development"]) .kx-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0F1D32;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

:where(html[data-page="web-development"]) .kx-btn-pill-navy:hover {
  background: #1B2E4B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
}

:where(html[data-page="web-development"]) .kx-btn-pill-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F9BE22;
  color: #0F1D32;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
}

:where(html[data-page="web-development"]) .kx-btn-pill-gold:hover {
  background: #FFCA3A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
}

/* Mobile Hamburger Toggle */
:where(html[data-page="web-development"]) .kx-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0F1D32;
  border-radius: 8px;
  transition: background 0.2s ease;
}

:where(html[data-page="web-development"]) .kx-mobile-toggle:hover {
  background: #EDF3FA;
}

@media (max-width: 1240px) {
  :where(html[data-page="web-development"]) .kx-nav-actions .kx-btn-pill-navy {
    display: none;
  }
}

@media (max-width: 1100px) {
  :where(html[data-page="web-development"]) .kx-nav-menu {
    display: none;
  }

  :where(html[data-page="web-development"]) .kx-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  :where(html[data-page="web-development"]) .kx-nav-inner {
    height: 70px;
    gap: 8px;
  }
  :where(html[data-page="web-development"]) .kx-logo {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  :where(html[data-page="web-development"]) .kx-nav-actions .kx-btn-pill-gold {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  :where(html[data-page="web-development"]) .kx-logo {
    font-size: 18px;
  }
  :where(html[data-page="web-development"]) .kx-nav-actions {
    gap: 6px;
  }
  :where(html[data-page="web-development"]) .kx-nav-actions .kx-btn-pill-gold {
    padding: 7px 11px;
    font-size: 11.5px;
    gap: 4px;
  }
  :where(html[data-page="web-development"]) .kx-nav-actions .kx-btn-pill-gold svg {
    display: none;
  }
  :where(html[data-page="web-development"]) .kx-mobile-toggle {
    padding: 6px;
  }
}

@media (max-width: 360px) {
  :where(html[data-page="web-development"]) .kx-container {
    padding: 0 6px;
  }
  :where(html[data-page="web-development"]) .kx-nav-inner {
    gap: 2px;
  }
  :where(html[data-page="web-development"]) .kx-logo {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  :where(html[data-page="web-development"]) .kx-nav-actions {
    gap: 2px;
  }
  :where(html[data-page="web-development"]) .kx-nav-actions .kx-btn-pill-gold {
    padding: 5px 6px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  :where(html[data-page="web-development"]) .kx-mobile-toggle {
    padding: 2px;
  }
}

/* ==========================================================================
   MOBILE NAVIGATION DRAWER
   ========================================================================== */
:where(html[data-page="web-development"]) .kx-mobile-drawer {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  height: calc(100vh - 80px);
  background: #FFFFFF;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 999;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(19, 36, 61, 0.15);
}

@media (max-width: 768px) {
  :where(html[data-page="web-development"]) .kx-mobile-drawer {
    top: 70px;
    height: calc(100vh - 70px);
  }
}

:where(html[data-page="web-development"]) .kx-mobile-drawer.open,:where(html[data-page="web-development"]) 
.kx-mobile-drawer.active {
  transform: translateX(0);
}

:where(html[data-page="web-development"]) .kx-mobile-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #13243D;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 12px;
  transition: all 0.2s ease;
}

:where(html[data-page="web-development"]) .kx-mobile-nav-link:hover,:where(html[data-page="web-development"]) 
.kx-mobile-nav-link.active {
  background: #EDF3FA;
  color: #0F1D32;
}

:where(html[data-page="web-development"]) .kx-mobile-nav-link.sub {
  padding-left: 32px;
  font-size: 14px;
  font-weight: 600;
  color: #556987;
}

/* ==========================================================================
   GLOBAL LEAD / CONSULTATION MODAL
   ========================================================================== */
:where(html[data-page="web-development"]) .kx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 49, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  padding: 20px;
}

:where(html[data-page="web-development"]) .kx-modal-overlay.active,:where(html[data-page="web-development"]) 
.kx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

:where(html[data-page="web-development"]) .kx-modal-dialog {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
  border: 1px solid var(--kx-border);
  overflow: hidden;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

:where(html[data-page="web-development"]) .kx-modal-overlay.active .kx-modal-dialog,:where(html[data-page="web-development"]) 
.kx-modal-overlay.is-open .kx-modal-dialog {
  transform: scale(1) translateY(0);
}

:where(html[data-page="web-development"]) .kx-modal-header {
  padding: 28px 32px 16px;
  position: relative;
}

:where(html[data-page="web-development"]) .kx-modal-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--kx-navy);
  margin: 0 0 6px;
}

:where(html[data-page="web-development"]) .kx-modal-subtitle {
  font-size: 14px;
  color: var(--kx-text-muted);
  margin: 0;
}

:where(html[data-page="web-development"]) .kx-modal-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--kx-gray);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-navy);
  transition: background 0.2s ease, transform 0.2s ease;
}

:where(html[data-page="web-development"]) .kx-modal-close:hover {
  background: #E2E8F0;
  transform: rotate(90deg);
}

:where(html[data-page="web-development"]) .kx-modal-body {
  padding: 0 32px 32px;
}

:where(html[data-page="web-development"]) .kx-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:where(html[data-page="web-development"]) .kx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

:where(html[data-page="web-development"]) .kx-form-label {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kx-navy);
}

:where(html[data-page="web-development"]) .kx-form-input,:where(html[data-page="web-development"]) 
.kx-form-textarea,:where(html[data-page="web-development"]) 
.kx-form-select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--kx-border);
  background: var(--kx-gray);
  color: var(--kx-navy);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

:where(html[data-page="web-development"]) .kx-form-input:focus,:where(html[data-page="web-development"]) 
.kx-form-textarea:focus,:where(html[data-page="web-development"]) 
.kx-form-select:focus {
  outline: none;
  border-color: var(--kx-navy);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
}

:where(html[data-page="web-development"]) .kx-modal-submit {
  background: var(--kx-navy);
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

:where(html[data-page="web-development"]) .kx-modal-submit:hover {
  background: var(--kx-deep-navy);
  transform: translateY(-1px);
}

/* ==========================================================================
   FOOTER (Fluid Responsive Grid & Mobile Optimization)
   ========================================================================== */
:where(html[data-page="web-development"]) .site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
  position: relative;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

:where(html[data-page="web-development"]) .site-footer .container,:where(html[data-page="web-development"]) 
.site-footer .kx-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

:where(html[data-page="web-development"]) .footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

:where(html[data-page="web-development"]) .footer-brand {
  min-width: 0;
}

:where(html[data-page="web-development"]) .footer-brand .brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

:where(html[data-page="web-development"]) .footer-brand .brand-logo .dot {
  color: #2FB7A7;
}

:where(html[data-page="web-development"]) .footer-brand p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  max-width: 290px;
}

:where(html[data-page="web-development"]) .footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

:where(html[data-page="web-development"]) .footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

:where(html[data-page="web-development"]) .footer-links a {
  font-size: 0.835rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

:where(html[data-page="web-development"]) .footer-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

:where(html[data-page="web-development"]) .footer-follow-wrapper {
  margin-top: 24px;
}

:where(html[data-page="web-development"]) .footer-follow-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

:where(html[data-page="web-development"]) .footer-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

:where(html[data-page="web-development"]) .social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  text-decoration: none;
  transition: var(--transition);
}

:where(html[data-page="web-development"]) .social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

:where(html[data-page="web-development"]) .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  flex-wrap: wrap;
  gap: 12px;
}

/* Floating WhatsApp Button */
:where(html[data-page="web-development"]) .floating-whatsapp-btn {
  position: fixed;
  bottom: clamp(16px, 3vw, 24px);
  right: clamp(16px, 3vw, 24px);
  width: clamp(48px, 6vw, 56px);
  height: clamp(48px, 6vw, 56px);
  background-color: #25D366;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.38);
  z-index: 990;
  transition: var(--transition);
  text-decoration: none;
}

:where(html[data-page="web-development"]) .floating-whatsapp-btn:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.50);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (Granular, Progressive Adaptation)
   ========================================================================== */

/* 1. Large Tablet / Medium Laptops (1180px - 1025px) */
@media (max-width: 1180px) {
  :where(html[data-page="web-development"]) .nav-link {
    padding: 6px 9px;
    font-size: 0.82rem;
  }
  :where(html[data-page="web-development"]) .btn-nav-phone {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  :where(html[data-page="web-development"]) .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  :where(html[data-page="web-development"]) .footer-top-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}

/* 2. Tablets & Mobile Breakpoint (<= 1024px) */
@media (max-width: 1024px) {
  :root:where([data-page="web-development"]) {
    --header-height: 66px;
  }
  :where(html[data-page="web-development"]) .nav-menu-wrapper,:where(html[data-page="web-development"]) 
  .btn-phone-desktop {
    display: none !important;
  }
  :where(html[data-page="web-development"]) .hamburger-btn {
    display: flex !important;
  }
  :where(html[data-page="web-development"]) .btn-cta-desktop {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  :where(html[data-page="web-development"]) .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  :where(html[data-page="web-development"]) .footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  :where(html[data-page="web-development"]) .footer-brand p {
    max-width: 100%;
  }
}

/* 3. Small Tablets & Phablets (<= 768px) */
@media (max-width: 768px) {
  :root:where([data-page="web-development"]) {
    --header-height: 62px;
  }
  :where(html[data-page="web-development"]) .btn-cta-desktop {
    display: none !important;
  }
  :where(html[data-page="web-development"]) .site-footer {
    padding: 46px 0 24px;
  }
  :where(html[data-page="web-development"]) .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding-bottom: 28px;
  }
}

/* 4. Standard Mobile Screens (<= 540px) */
@media (max-width: 540px) {
  :root:where([data-page="web-development"]) {
    --header-height: 58px;
  }
  :where(html[data-page="web-development"]) .nav-container {
    padding: 0 14px;
  }
  :where(html[data-page="web-development"]) .hamburger-btn {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  :where(html[data-page="web-development"]) .hamburger-btn span {
    width: 20px;
  }
  :where(html[data-page="web-development"]) .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  :where(html[data-page="web-development"]) .footer-brand {
    grid-column: 1 / -1;
  }
  :where(html[data-page="web-development"]) .footer-col-company {
    grid-column: 1;
  }
  :where(html[data-page="web-development"]) .footer-col-solutions {
    grid-column: 2;
  }
  :where(html[data-page="web-development"]) .footer-col-resources {
    grid-column: 1 / -1;
  }
  :where(html[data-page="web-development"]) .footer-col h5 {
    margin-bottom: 12px;
  }
  :where(html[data-page="web-development"]) .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* 5. Ultra-Small Devices (<= 360px) */
@media (max-width: 360px) {
  :where(html[data-page="web-development"]) .brand-logo {
    font-size: 1.15rem;
  }
  :where(html[data-page="web-development"]) .mobile-nav-drawer {
    width: 90vw;
    padding: 18px 14px 22px;
  }
  :where(html[data-page="web-development"]) .mobile-nav-link {
    font-size: 0.95rem;
  }
}
  
/* web-development.html embedded 2 */

    /* ==========================================================================
   Kaxon Technologies - Web Development Sub-Service Page (web-development.css)
   Exact match to official visual specifications & design system
   ========================================================================== */

    :root:where([data-page="web-development"]) {
      --page-bg: #FBF8F1;
      --hero-bg: #FBF6E9;
      --section-bg: #FFFDF8;
      --surface-white: #FFFFFF;
      --surface-soft: #FCFAF5;

      --navy-primary: #102747;
      --navy-dark: #0B203C;
      --navy-footer: #08213F;
      --text-primary: #102747;
      --text-secondary: #657287;
      --text-muted: #8490A0;

      --yellow-primary: #FFC72C;
      --yellow-hover: #F4B900;
      --yellow-soft: #FFF4CA;

      --blue-primary: #2F75FF;
      --blue-soft: #E9F1FF;

      --mint-primary: #21B795;
      --mint-soft: #E5F8F3;

      --pink-primary: #ED4D81;
      --pink-soft: #FCEAF0;

      --purple-primary: #845DF3;
      --purple-soft: #F0EAFF;

      --orange-primary: #FFA51F;
      --orange-soft: #FFF1D8;

      --border-subtle: rgba(16, 39, 71, 0.08);
      --border-strong: rgba(16, 39, 71, 0.12);
      --shadow-card: 0 10px 28px rgba(16, 39, 71, 0.055);
      --shadow-hover: 0 16px 38px rgba(16, 39, 71, 0.10);
      --shadow-float: 0 14px 36px rgba(16, 39, 71, 0.12);
      --shadow-yellow: 0 8px 20px rgba(255, 199, 44, 0.28);

      --font-main: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-hand: 'Caveat', cursive, sans-serif;
    }

    /* Reset & Base */
    :where(html[data-page="web-development"]) *,:where(html[data-page="web-development"]) 
    *::before,:where(html[data-page="web-development"]) 
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :where(html[data-page="web-development"]) body {
      font-family: var(--font-main);
      background-color: var(--page-bg);
      color: var(--text-primary);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    :where(html[data-page="web-development"]) img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    :where(html[data-page="web-development"]) a {
      text-decoration: none;
      color: inherit;
    }

    :where(html[data-page="web-development"]) button {
      font-family: inherit;
      cursor: pointer;
      border: none;
      background: none;
    }

    /* Container */
    :where(html[data-page="web-development"]) .wd-container {
      width: 100%;
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 24px;
    }

    @media (max-width: 768px) {
      :where(html[data-page="web-development"]) .wd-container {
        padding: 0 16px;
      }
    }

    /* Active Nav Pill in Header */
    :where(html[data-page="web-development"]) .kx-nav-link.service-active-pill {
      background: #E9F5FF;
      color: #1554B6 !important;
      font-weight: 700;
      padding: 6px 16px;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
    }

    /* Eyebrow Component */
    :where(html[data-page="web-development"]) .wd-eyebrow-wrap {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
    }

    :where(html[data-page="web-development"]) .wd-eyebrow {
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      background: var(--blue-soft);
      color: #2A4F7B;
      padding: 6px 14px;
      border-radius: 9999px;
      display: inline-block;
    }

    :where(html[data-page="web-development"]) .wd-eyebrow-line {
      width: 28px;
      height: 2.5px;
      background: var(--mint-primary);
      border-radius: 2px;
      display: inline-block;
    }

    /* Button System */
    :where(html[data-page="web-development"]) .wd-btn-yellow {
      background: var(--yellow-primary);
      color: var(--navy-primary);
      font-size: 15px;
      font-weight: 800;
      padding: 13px 26px;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: var(--shadow-yellow);
      transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      white-space: nowrap;
    }

    :where(html[data-page="web-development"]) .wd-btn-yellow:hover {
      background: var(--yellow-hover);
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(255, 199, 44, 0.38);
    }

    :where(html[data-page="web-development"]) .wd-btn-white {
      background: var(--surface-white);
      color: var(--navy-primary);
      font-size: 15px;
      font-weight: 700;
      padding: 13px 24px;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1px solid var(--border-subtle);
      box-shadow: 0 4px 14px rgba(16, 39, 71, 0.04);
      transition: all 0.25s ease;
      white-space: nowrap;
    }

    :where(html[data-page="web-development"]) .wd-btn-white:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(16, 39, 71, 0.08);
      border-color: rgba(16, 39, 71, 0.15);
    }

    :where(html[data-page="web-development"]) .wd-btn-navy {
      background: var(--navy-primary);
      color: #FFFFFF;
      font-size: 14.5px;
      font-weight: 700;
      padding: 11px 22px;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.25s ease;
    }

    :where(html[data-page="web-development"]) .wd-btn-navy:hover {
      background: var(--navy-dark);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(16, 39, 71, 0.2);
    }

    /* ==========================================================================
   1. HERO SECTION
   ========================================================================== */
    :where(html[data-page="web-development"]) .wd-hero {
      background: var(--hero-bg);
      padding: 64px 0 60px;
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="web-development"]) .wd-hero-grid {
      display: grid;
      grid-template-columns: 48% 52%;
      gap: 36px;
      align-items: center;
      position: relative;
    }

    :where(html[data-page="web-development"]) .wd-hero-left {
      position: relative;
      z-index: 5;
    }

    :where(html[data-page="web-development"]) .wd-hero-title {
      font-size: clamp(38px, 4.4vw, 62px);
      line-height: 1.02;
      font-weight: 800;
      letter-spacing: -0.04em;
      color: var(--navy-primary);
      margin-bottom: 20px;
      position: relative;
    }

    :where(html[data-page="web-development"]) .wd-highlight-yellow {
      background: var(--yellow-primary);
      color: var(--navy-primary);
      padding: 2px 14px 4px;
      border-radius: 8px;
      display: inline-block;
      transform: rotate(-0.5deg);
      box-shadow: 0 4px 12px rgba(255, 199, 44, 0.25);
    }

    /* Hero Handwritten Annotations */
    :where(html[data-page="web-development"]) .wd-annot-leads {
      position: absolute;
      top: -10px;
      right: 15px;
      font-family: var(--font-hand);
      color: #E99D00;
      font-size: 22px;
      font-weight: 700;
      line-height: 1.15;
      text-align: left;
      transform: rotate(3deg);
      pointer-events: none;
    }

    :where(html[data-page="web-development"]) .wd-annot-leads svg {
      display: block;
      margin-top: 4px;
      margin-left: 28px;
      width: 42px;
      height: 28px;
    }

    :where(html[data-page="web-development"]) .wd-hero-desc {
      font-size: 16.5px;
      line-height: 1.6;
      color: var(--text-secondary);
      max-width: 490px;
      margin-bottom: 28px;
    }

    :where(html[data-page="web-development"]) .wd-hero-buttons {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 40px;
      flex-wrap: wrap;
    }

    /* Stats Row */
    :where(html[data-page="web-development"]) .wd-stats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      padding-top: 24px;
      border-top: 1px solid rgba(16, 39, 71, 0.1);
    }

    :where(html[data-page="web-development"]) .wd-stat-item {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    :where(html[data-page="web-development"]) .wd-stat-icon-wrap {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="web-development"]) .wd-stat-icon-mint {
      background: var(--mint-soft);
      color: var(--mint-primary);
    }

    :where(html[data-page="web-development"]) .wd-stat-icon-yellow {
      background: var(--yellow-soft);
      color: #D97706;
    }

    :where(html[data-page="web-development"]) .wd-stat-icon-blue {
      background: var(--blue-soft);
      color: var(--blue-primary);
    }

    :where(html[data-page="web-development"]) .wd-stat-icon-pink {
      background: var(--pink-soft);
      color: var(--pink-primary);
    }

    :where(html[data-page="web-development"]) .wd-stat-content {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="web-development"]) .wd-stat-val {
      font-size: 16px;
      font-weight: 800;
      color: var(--navy-primary);
      line-height: 1.1;
    }

    :where(html[data-page="web-development"]) .wd-stat-lbl {
      font-size: 11.5px;
      color: var(--text-secondary);
      line-height: 1.25;
      margin-top: 2px;
      white-space: normal;
      text-wrap: pretty;
    }

    /* Hero Right Visual Showcase */
    :where(html[data-page="web-development"]) .wd-hero-right {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 0;
    }

    :where(html[data-page="web-development"]) .wd-device-stage {
      position: relative;
      width: 100%;
      max-width: 580px;
    }

    /* Backdrop Soft Glow */
    :where(html[data-page="web-development"]) .wd-device-stage::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      height: 80%;
      background: radial-gradient(ellipse at center, rgba(255, 199, 44, 0.22) 0%, rgba(251, 246, 233, 0) 70%);
      border-radius: 50%;
      z-index: 1;
      pointer-events: none;
    }

    /* Realistic Laptop Frame */
    :where(html[data-page="web-development"]) .wd-laptop-mockup {
      position: relative;
      width: 86%;
      z-index: 2;
      filter: drop-shadow(0 24px 44px rgba(16, 39, 71, 0.22));
    }

    :where(html[data-page="web-development"]) .wd-laptop-screen {
      background: #0B132B;
      border-radius: 14px 14px 2px 2px;
      padding: 10px 10px 14px;
      position: relative;
      box-shadow: inset 0 0 0 1.5px #2B3448;
    }

    :where(html[data-page="web-development"]) .wd-laptop-notch {
      width: 8px;
      height: 8px;
      background: #1C2436;
      border-radius: 50%;
      margin: 0 auto 6px;
    }

    :where(html[data-page="web-development"]) .wd-laptop-display {
      background: #0D1629;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      aspect-ratio: 16/10;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    }

    :where(html[data-page="web-development"]) .wd-laptop-display img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Inner Overlay Graphic simulating live web interface */
    :where(html[data-page="web-development"]) .wd-laptop-ui-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(180deg, rgba(13, 22, 41, 0.3) 0%, rgba(13, 22, 41, 0.75) 100%);
      padding: 18px 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #FFFFFF;
    }

    :where(html[data-page="web-development"]) .wd-laptop-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 10px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.8);
    }

    :where(html[data-page="web-development"]) .wd-laptop-nav-links {
      display: flex;
      gap: 12px;
    }

    :where(html[data-page="web-development"]) .wd-laptop-hero-text h3 {
      font-size: 22px;
      font-weight: 800;
      line-height: 1.1;
      color: #FFFFFF;
      margin-bottom: 12px;
      max-width: 220px;
    }

    :where(html[data-page="web-development"]) .wd-laptop-hero-btn {
      background: var(--yellow-primary);
      color: #102747;
      font-size: 9.5px;
      font-weight: 800;
      padding: 5px 12px;
      border-radius: 9999px;
      display: inline-block;
      width: fit-content;
    }

    :where(html[data-page="web-development"]) .wd-laptop-base {
      width: 114%;
      margin-left: -7%;
      height: 14px;
      background: linear-gradient(180deg, #9BA3AF 0%, #D1D5DB 40%, #6B7280 100%);
      border-radius: 2px 2px 10px 10px;
      position: relative;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    :where(html[data-page="web-development"]) .wd-laptop-notch-lip {
      width: 60px;
      height: 4px;
      background: #4B5563;
      border-radius: 0 0 4px 4px;
      margin: 0 auto;
    }

    /* Smartphone Mockup Overlap */
    :where(html[data-page="web-development"]) .wd-phone-mockup {
      position: absolute;
      right: 0;
      bottom: -15px;
      width: 28%;
      max-width: 165px;
      background: #0F172A;
      border-radius: 28px;
      padding: 8px;
      box-shadow:
        0 24px 48px rgba(16, 39, 71, 0.35),
        0 0 0 2px #334155,
        inset 0 0 0 1px rgba(255, 255, 255, 0.15);
      z-index: 5;
      transition: transform 0.3s ease;
    }

    :where(html[data-page="web-development"]) .wd-phone-mockup:hover {
      transform: translateY(-4px) scale(1.02);
    }

    :where(html[data-page="web-development"]) .wd-phone-screen {
      border-radius: 22px;
      overflow: hidden;
      background: #0A0F1D;
      position: relative;
      aspect-ratio: 9/19;
    }

    :where(html[data-page="web-development"]) .wd-phone-screen img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    :where(html[data-page="web-development"]) .wd-phone-content-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(180deg, rgba(10, 15, 29, 0.4) 0%, rgba(10, 15, 29, 0.85) 100%);
      padding: 24px 12px 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #FFFFFF;
    }

    :where(html[data-page="web-development"]) .wd-phone-headline {
      font-size: 15px;
      font-weight: 800;
      line-height: 1.15;
      color: #FFFFFF;
      margin-top: 10px;
    }

    :where(html[data-page="web-development"]) .wd-phone-btn {
      background: var(--yellow-primary);
      color: #102747;
      font-size: 8px;
      font-weight: 800;
      padding: 4px 8px;
      border-radius: 9999px;
      text-align: center;
      margin-top: 8px;
      display: inline-block;
    }

    /* Floating Badges */
    :where(html[data-page="web-development"]) .wd-floating-badge {
      position: absolute;
      background: var(--surface-white);
      border-radius: 14px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: var(--shadow-float);
      border: 1px solid var(--border-subtle);
      z-index: 10;
      transition: transform 0.3s ease;
    }

    :where(html[data-page="web-development"]) .wd-floating-badge:hover {
      transform: translateY(-3px);
    }

    :where(html[data-page="web-development"]) .wd-float-top-left {
      top: -15px;
      left: 20px;
    }

    :where(html[data-page="web-development"]) .wd-float-top-right {
      top: 10px;
      right: -20px;
    }

    :where(html[data-page="web-development"]) .wd-badge-icon-box {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="web-development"]) .wd-badge-icon-yellow {
      background: var(--yellow-soft);
      color: #D97706;
    }

    :where(html[data-page="web-development"]) .wd-badge-icon-blue {
      background: var(--blue-soft);
      color: var(--blue-primary);
    }

    :where(html[data-page="web-development"]) .wd-badge-text-3line {
      font-size: 11.5px;
      font-weight: 800;
      color: var(--navy-primary);
      line-height: 1.25;
    }

    :where(html[data-page="web-development"]) .wd-badge-text-2line strong {
      font-size: 12.5px;
      font-weight: 800;
      color: var(--navy-primary);
      display: block;
      line-height: 1.2;
    }

    :where(html[data-page="web-development"]) .wd-badge-text-2line span {
      font-size: 11px;
      color: var(--text-secondary);
      display: block;
    }

    /* Right Handwritten Annotation */
    :where(html[data-page="web-development"]) .wd-annot-grow {
      position: absolute;
      top: 90px;
      right: -55px;
      font-family: var(--font-hand);
      color: #E99D00;
      font-size: 21px;
      font-weight: 700;
      line-height: 1.15;
      text-align: center;
      transform: rotate(4deg);
      pointer-events: none;
      z-index: 10;
    }

    :where(html[data-page="web-development"]) .wd-annot-grow svg {
      margin-top: 4px;
      margin-left: -10px;
      width: 36px;
      height: 32px;
    }

    /* ==========================================================================
   2. TRUSTED BY LOGO STRIP
   ========================================================================== */
    :where(html[data-page="web-development"]) .wd-trusted-section {
      padding: 30px 0 60px;
    }

    :where(html[data-page="web-development"]) .wd-trusted-card {
      background: var(--surface-white);
      border: 1px solid var(--border-subtle);
      border-radius: 18px;
      padding: 20px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      box-shadow: var(--shadow-card);
    }

    :where(html[data-page="web-development"]) .wd-trusted-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--navy-primary);
      max-width: 140px;
      line-height: 1.35;
      flex-shrink: 0;
    }

    :where(html[data-page="web-development"]) .wd-trusted-logos {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      gap: 24px;
      flex-wrap: wrap;
    }

    :where(html[data-page="web-development"]) .wd-logo-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16.5px;
      font-weight: 800;
      color: var(--navy-primary);
      opacity: 0.88;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    :where(html[data-page="web-development"]) .wd-logo-item:hover {
      opacity: 1;
      transform: translateY(-1px);
    }

    :where(html[data-page="web-development"]) .wd-logo-icon {
      width: 22px;
      height: 22px;
      color: var(--navy-primary);
    }

    /* ==========================================================================
   3. WHY CHOOSE KAXON SECTION
   ========================================================================== */
    :where(html[data-page="web-development"]) .wd-why-section {
      padding: 60px 0 80px;
    }

    :where(html[data-page="web-development"]) .wd-why-grid {
      display: grid;
      grid-template-columns: 37% 63%;
      gap: 48px;
      align-items: flex-start;
    }

    :where(html[data-page="web-development"]) .wd-why-left {
      position: sticky;
      top: 100px;
    }

    :where(html[data-page="web-development"]) .wd-section-title {
      font-size: clamp(32px, 3.4vw, 46px);
      line-height: 1.05;
      font-weight: 800;
      letter-spacing: -0.035em;
      color: var(--navy-primary);
      margin-bottom: 20px;
    }

    :where(html[data-page="web-development"]) .wd-highlight-growth {
      color: var(--blue-primary);
      position: relative;
      display: inline-block;
    }

    /* Yellow sparkle icon */
    :where(html[data-page="web-development"]) .wd-sparkle-yellow {
      position: absolute;
      right: -24px;
      top: 4px;
      width: 20px;
      height: 20px;
      color: var(--yellow-primary);
    }

    :where(html[data-page="web-development"]) .wd-section-desc {
      font-size: 16px;
      line-height: 1.6;
      color: var(--text-secondary);
      margin-bottom: 30px;
    }

    /* 3x2 Card Grid */
    :where(html[data-page="web-development"]) .wd-why-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    :where(html[data-page="web-development"]) .wd-feature-card {
      background: var(--surface-white);
      border: 1px solid var(--border-subtle);
      border-radius: 18px;
      padding: 24px 20px;
      box-shadow: var(--shadow-card);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    :where(html[data-page="web-development"]) .wd-feature-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(16, 39, 71, 0.15);
    }

    :where(html[data-page="web-development"]) .wd-feature-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      flex-shrink: 0;
    }

    :where(html[data-page="web-development"]) .icon-box-blue {
      background: var(--blue-soft);
      color: var(--blue-primary);
    }

    :where(html[data-page="web-development"]) .icon-box-mint {
      background: var(--mint-soft);
      color: var(--mint-primary);
    }

    :where(html[data-page="web-development"]) .icon-box-pink {
      background: var(--pink-soft);
      color: var(--pink-primary);
    }

    :where(html[data-page="web-development"]) .icon-box-purple {
      background: var(--purple-soft);
      color: var(--purple-primary);
    }

    :where(html[data-page="web-development"]) .icon-box-orange {
      background: var(--orange-soft);
      color: var(--orange-primary);
    }

    :where(html[data-page="web-development"]) .wd-feature-card h3 {
      font-size: 16px;
      font-weight: 800;
      color: var(--navy-primary);
      margin-bottom: 8px;
      letter-spacing: -0.01em;
    }

    :where(html[data-page="web-development"]) .wd-feature-card p {
      font-size: 13.5px;
      color: var(--text-secondary);
      line-height: 1.5;
      margin: 0;
    }

        /* ==========================================================================
       4. DEVELOPMENT PROCESS SECTION (Pixel-Perfect Recreation)
       ========================================================================== */
    
    /* Pill Eyebrow with Dot */
    :where(html[data-page="web-development"]) .wd-eyebrow-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: #F1F4F9;
      color: #102747;
      padding: 5px 12px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    :where(html[data-page="web-development"]) .wd-eyebrow-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #FFB718;
      display: inline-block;
    }

    :where(html[data-page="web-development"]) .wd-process-section {
      background-color: var(--page-bg, #FCF8EF);
      background-image: radial-gradient(rgba(54, 87, 126, 0.13) 1px, transparent 1px);
      background-size: 28px 28px;
      padding: 76px 0 94px;
      position: relative;
    }

    :where(html[data-page="web-development"]) .wd-process-header {
      display: grid;
      grid-template-columns: 1.15fr 0.9fr 0.65fr;
      align-items: center;
      gap: 28px;
      margin-bottom: 44px;
      position: relative;
    }

    :where(html[data-page="web-development"]) .wd-process-title {
      font-size: 50px;
      line-height: 1.05;
      font-weight: 800;
      letter-spacing: -0.04em;
      color: #102747;
      margin: 0;
    }

    :where(html[data-page="web-development"]) .wd-process-sparkle {
      display: inline-block;
      vertical-align: middle;
      margin-left: 4px;
      transform: translateY(-2px);
    }

    :where(html[data-page="web-development"]) .wd-process-desc {
      font-size: 15.5px;
      line-height: 1.55;
      color: #60799D;
      margin: 0;
      max-width: 440px;
      font-weight: 500;
    }

    :where(html[data-page="web-development"]) .wd-process-header-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 16px;
      position: relative;
    }

    :where(html[data-page="web-development"]) .wd-annot-idea-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'Caveat', cursive;
      color: #173D6B;
      font-size: 22px;
      line-height: 1.05;
      font-weight: 700;
      transform: rotate(-3deg);
      pointer-events: none;
      white-space: nowrap;
    }

    :where(html[data-page="web-development"]) .wd-btn-discuss {
      background: #FFB718;
      color: #102747;
      font-size: 15.5px;
      font-weight: 800;
      height: 56px;
      padding: 0 28px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(16, 39, 71, 0.08);
      box-shadow: 0 10px 25px rgba(255, 183, 24, 0.32);
      transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      white-space: nowrap;
      text-decoration: none;
    }

    :where(html[data-page="web-development"]) .wd-btn-discuss:hover {
      background: #FFAF00;
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(255, 183, 24, 0.45);
    }

    :where(html[data-page="web-development"]) .wd-btn-discuss svg {
      transition: transform 0.2s ease;
    }

    :where(html[data-page="web-development"]) .wd-btn-discuss:hover svg {
      transform: translateX(4px);
    }

    /* 5 Process Cards Row */
    :where(html[data-page="web-development"]) .wd-process-steps-row {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 18px;
      position: relative;
      margin-top: 10px;
    }

    :where(html[data-page="web-development"]) .wd-step-card {
      background: #FFFFFF;
      border: 1px solid rgba(16, 39, 71, 0.08);
      border-radius: 20px;
      padding: 24px 20px 20px;
      box-shadow: 0 12px 30px rgba(16, 39, 71, 0.055);
      position: relative;
      display: flex;
      flex-direction: column;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      min-width: 0;
    }

    :where(html[data-page="web-development"]) .wd-step-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 42px rgba(16, 39, 71, 0.09);
    }

    :where(html[data-page="web-development"]) .wd-step-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
    }

    :where(html[data-page="web-development"]) .wd-step-icon-box {
      width: 62px;
      height: 62px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    :where(html[data-page="web-development"]) .wd-step-num-badge {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      font-size: 13.5px;
      font-weight: 800;
      flex-shrink: 0;
    }

    :where(html[data-page="web-development"]) .wd-step-card h3 {
      font-size: 20px;
      font-weight: 800;
      color: #102747;
      margin-bottom: 6px;
      letter-spacing: -0.02em;
    }

    :where(html[data-page="web-development"]) .wd-step-card p {
      font-size: 14px;
      color: #60799D;
      line-height: 1.48;
      margin: 0 0 18px 0;
      min-height: 42px;
    }

    /* Checklist Panel */
    :where(html[data-page="web-development"]) .wd-step-checklist {
      margin-top: auto;
      background: #F9FBFE;
      border-radius: 12px;
      padding: 13px 13px;
      display: grid;
      gap: 9px;
    }

    :where(html[data-page="web-development"]) .wd-check-item {
      display: grid;
      grid-template-columns: 15px 1fr;
      gap: 8px;
      align-items: center;
      font-size: 12.5px;
      font-weight: 600;
      color: #60799D;
      line-height: 1.3;
    }

    :where(html[data-page="web-development"]) .wd-check-item svg {
      flex-shrink: 0;
    }

    /* Inter-card Arrow Connectors (Desktop) */
    :where(html[data-page="web-development"]) .wd-step-connector-pill {
      position: absolute;
      right: -17px;
      top: 50%;
      transform: translateY(-50%);
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #FFF2CB;
      border: 2px solid #FFFFFF;
      box-shadow: 0 4px 10px rgba(16, 39, 71, 0.08);
      display: grid;
      place-items: center;
      z-index: 5;
      color: #F1A500;
    }

    /* Sticky Note attached to final card */
    :where(html[data-page="web-development"]) .wd-sticky-note {
      position: absolute;
      top: 48%;
      right: -58px;
      transform: translateY(-50%) rotate(-4deg);
      background: #FFF1C7;
      padding: 14px 16px;
      border-radius: 10px;
      box-shadow: 0 10px 24px rgba(16, 39, 71, 0.08);
      z-index: 10;
      pointer-events: none;
      font-family: 'Caveat', cursive;
      color: #173D6B;
      font-size: 17.5px;
      line-height: 1.15;
      font-weight: 700;
      white-space: pre-line;
    }

    :where(html[data-page="web-development"]) .wd-sticky-note-arrow {
      position: absolute;
      bottom: -22px;
      left: 18px;
      width: 44px;
      height: 28px;
      stroke: #173D6B;
    }

    /* ==========================================================================
       5. PORTFOLIO / OUR WORK SECTION (Pixel-Perfect Recreation)
       ========================================================================== */
    :where(html[data-page="web-development"]) .wd-portfolio-section {
      background-color: var(--page-bg, #FCF8EF);
      background-image: radial-gradient(rgba(54, 87, 126, 0.13) 1px, transparent 1px);
      background-size: 28px 28px;
      padding: 88px 0 96px;
      position: relative;
    }

    :where(html[data-page="web-development"]) .wd-portfolio-grid {
      display: grid;
      grid-template-columns: 0.78fr 2.22fr;
      gap: 42px;
      align-items: start;
    }

    :where(html[data-page="web-development"]) .wd-portfolio-intro {
      position: sticky;
      top: 100px;
    }

    :where(html[data-page="web-development"]) .wd-portfolio-title {
      font-size: 50px;
      line-height: 1.06;
      font-weight: 800;
      letter-spacing: -0.04em;
      color: #102747;
      margin: 12px 0 18px;
    }

    :where(html[data-page="web-development"]) .wd-portfolio-highlight {
      color: #FFB718;
      display: inline;
      font-weight: 800;
    }

    :where(html[data-page="web-development"]) .wd-portfolio-desc {
      font-size: 15.5px;
      color: #60799D;
      line-height: 1.55;
      margin-bottom: 28px;
      font-weight: 500;
    }

    /* 3 Column Metrics in Intro */
    :where(html[data-page="web-development"]) .wd-portfolio-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      padding-bottom: 30px;
      margin-bottom: 28px;
      border-bottom: 1px solid rgba(16, 39, 71, 0.12);
    }

    :where(html[data-page="web-development"]) .wd-metric-col strong {
      font-size: 28px;
      font-weight: 900;
      color: #102747;
      display: block;
      line-height: 1;
      letter-spacing: -0.02em;
    }

    :where(html[data-page="web-development"]) .wd-metric-col span {
      font-size: 12px;
      color: #60799D;
      font-weight: 600;
      margin-top: 5px;
      display: block;
      line-height: 1.25;
    }

    :where(html[data-page="web-development"]) .wd-portfolio-cta-row {
      display: flex;
      align-items: center;
      gap: 18px;
      position: relative;
    }

    :where(html[data-page="web-development"]) .wd-btn-portfolio {
      background: #102747;
      color: #FFFFFF;
      font-size: 15px;
      font-weight: 700;
      height: 54px;
      padding: 0 26px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 10px 24px rgba(16, 39, 71, 0.14);
      transition: all 0.25s ease;
      text-decoration: none;
      white-space: nowrap;
    }

    :where(html[data-page="web-development"]) .wd-btn-portfolio:hover {
      background: #091E39;
      transform: translateY(-2px);
      box-shadow: 0 14px 28px rgba(16, 39, 71, 0.22);
    }

    :where(html[data-page="web-development"]) .wd-portfolio-annot {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: 'Caveat', cursive;
      color: #173D6B;
      font-size: 21px;
      line-height: 1.05;
      font-weight: 700;
      pointer-events: none;
    }

    /* 3 Project Cards Grid */
    :where(html[data-page="web-development"]) .wd-portfolio-cards-wrap {
      display: flex;
      flex-direction: column;
      gap: 20px;
      min-width: 0;
    }

    :where(html[data-page="web-development"]) .wd-portfolio-cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
      min-width: 0;
    }

    :where(html[data-page="web-development"]) .wd-project-card {
      background: #FFFFFF;
      border: 1px solid rgba(16, 39, 71, 0.08);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 16px 38px rgba(16, 39, 71, 0.07);
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    :where(html[data-page="web-development"]) .wd-project-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 22px 50px rgba(16, 39, 71, 0.11);
    }

    :where(html[data-page="web-development"]) .wd-project-img-box {
      width: 100%;
      height: 230px;
      overflow: hidden;
      position: relative;
      background: #102747;
    }

    :where(html[data-page="web-development"]) .wd-project-img-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }

    :where(html[data-page="web-development"]) .wd-project-card:hover .wd-project-img-box img {
      transform: scale(1.035);
    }

    :where(html[data-page="web-development"]) .wd-project-badge-pill {
      position: absolute;
      top: 14px;
      left: 14px;
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #102747;
      padding: 6px 13px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      z-index: 2;
    }

    :where(html[data-page="web-development"]) .wd-project-img-annot {
      position: absolute;
      top: 14px;
      right: 14px;
      font-family: 'Caveat', cursive;
      font-size: 18px;
      color: #FFFFFF;
      font-weight: 700;
      text-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
      line-height: 1.1;
      text-align: right;
      z-index: 2;
      pointer-events: none;
    }

    :where(html[data-page="web-development"]) .wd-project-body {
      padding: 22px 20px 0;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    :where(html[data-page="web-development"]) .wd-project-title-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 6px;
    }

    :where(html[data-page="web-development"]) .wd-project-title-row h3 {
      font-size: 19px;
      font-weight: 800;
      color: #102747;
      letter-spacing: -0.02em;
      margin: 0;
    }

    :where(html[data-page="web-development"]) .wd-project-arrow-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid #2E7DFF;
      background: #FFFFFF;
      color: #2E7DFF;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      transition: all 0.25s ease;
      text-decoration: none;
    }

    :where(html[data-page="web-development"]) .wd-project-card:hover .wd-project-arrow-btn {
      background: #2E7DFF;
      color: #FFFFFF;
      transform: translateX(2px);
    }

    :where(html[data-page="web-development"]) .wd-project-desc {
      font-size: 14px;
      color: #60799D;
      line-height: 1.48;
      margin: 0 0 20px 0;
      min-height: 40px;
    }

    /* Metrics Footer in Project Card */
    :where(html[data-page="web-development"]) .wd-project-metrics-bar {
      margin-top: auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: #F8FAFD;
      border-top: 1px solid rgba(16, 39, 71, 0.06);
      min-height: 80px;
      border-radius: 0 0 20px 20px;
    }

    :where(html[data-page="web-development"]) .wd-proj-metric-item {
      padding: 14px 16px;
      display: grid;
      grid-template-columns: 32px 1fr;
      gap: 10px;
      align-items: center;
    }

    :where(html[data-page="web-development"]) .wd-proj-metric-item:first-child {
      border-right: 1px solid rgba(16, 39, 71, 0.06);
    }

    :where(html[data-page="web-development"]) .wd-proj-metric-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      font-size: 15px;
    }

    :where(html[data-page="web-development"]) .wd-proj-metric-text strong {
      font-size: 16px;
      font-weight: 800;
      color: #102747;
      display: block;
      line-height: 1.1;
    }

    :where(html[data-page="web-development"]) .wd-proj-metric-text span {
      font-size: 11px;
      color: #60799D;
      font-weight: 600;
      display: block;
      line-height: 1.2;
    }

    /* Bottom Slider Controls (Desktop) */
    :where(html[data-page="web-development"]) .wd-portfolio-nav-controls {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 8px;
    }

    :where(html[data-page="web-development"]) .wd-portfolio-nav-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: #FFFFFF;
      border: 1px solid rgba(16, 39, 71, 0.1);
      color: #102747;
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(16, 39, 71, 0.04);
      transition: all 0.2s ease;
    }

    :where(html[data-page="web-development"]) .wd-portfolio-nav-btn:hover {
      background: #102747;
      color: #FFFFFF;
      border-color: #102747;
    }

    /* ==========================================================================
       6. TECH STACK SECTION (High-Fidelity Re-creation)
       ========================================================================== */
    :where(html[data-page="web-development"]) .wd-tech-section {
      background-color: #FCF8EF;
      background-image: radial-gradient(circle, rgba(50, 83, 122, 0.13) 1px, transparent 1px);
      background-size: 30px 30px;
      position: relative;
      overflow: hidden;
      min-height: 650px;
      padding: 84px 0 78px;
    }

    :where(html[data-page="web-development"]) .wd-tech-container {
      width: 100%;
      max-width: 1240px;
      margin-inline: auto;
      padding: 0 24px;
      position: relative;
      min-width: 0;
      box-sizing: border-box;
    }

    /* Ambient bottom yellow blobs */
    :where(html[data-page="web-development"]) .wd-tech-blob-left {
      position: absolute;
      bottom: -90px;
      left: 6%;
      width: 270px;
      height: 270px;
      border-radius: 50%;
      background: rgba(255, 205, 66, 0.10);
      pointer-events: none;
      filter: blur(20px);
    }

    :where(html[data-page="web-development"]) .wd-tech-blob-right {
      position: absolute;
      bottom: -70px;
      right: 6%;
      width: 230px;
      height: 230px;
      border-radius: 50%;
      background: rgba(255, 205, 66, 0.09);
      pointer-events: none;
      filter: blur(20px);
    }

    /* Main 2-column Grid */
    :where(html[data-page="web-development"]) .wd-tech-main-grid {
      display: grid;
      grid-template-columns: 0.39fr 0.61fr;
      gap: clamp(32px, 3.5vw, 54px);
      align-items: center;
    }

    /* Left Content */
    :where(html[data-page="web-development"]) .wd-tech-eyebrow-pill {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      background: #FFFFFF;
      border: 1px solid rgba(16, 39, 71, 0.08);
      border-radius: 999px;
      padding: 10px 17px;
      margin-bottom: 24px;
    }

    :where(html[data-page="web-development"]) .wd-tech-eyebrow-dot {
      width: 10px;
      height: 10px;
      background: #FFB718;
      border-radius: 50%;
      flex-shrink: 0;
    }

    :where(html[data-page="web-development"]) .wd-tech-eyebrow-text {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.13em;
      color: #234973;
    }

    :where(html[data-page="web-development"]) .wd-tech-headline {
      margin: 0 0 22px 0;
      max-width: 560px;
      font-size: clamp(34px, 3.6vw, 54px);
      line-height: 1.04;
      font-weight: 800;
      letter-spacing: -0.043em;
      color: #102747;
    }

    :where(html[data-page="web-development"]) .wd-tech-headline-highlight {
      color: #FFB718;
    }

    :where(html[data-page="web-development"]) .wd-tech-desc {
      margin: 0 0 34px 0;
      max-width: 500px;
      font-size: 16.5px;
      line-height: 1.55;
      color: #667C9C;
    }

    /* Benefits Row */
    :where(html[data-page="web-development"]) .wd-tech-benefits {
      display: grid;
      grid-template-columns: auto auto auto auto auto;
      align-items: center;
      gap: 0;
      justify-content: start;
    }

    :where(html[data-page="web-development"]) .wd-tech-benefit-item {
      display: grid;
      grid-template-columns: 44px auto;
      gap: 10px;
      align-items: center;
      padding-right: 16px;
    }

    :where(html[data-page="web-development"]) .wd-tech-benefit-icon {
      width: 44px;
      height: 44px;
      border-radius: 11px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    :where(html[data-page="web-development"]) .wd-tech-benefit-text strong {
      display: block;
      font-size: 14.5px;
      font-weight: 800;
      color: #102747;
      line-height: 1.15;
    }

    :where(html[data-page="web-development"]) .wd-tech-benefit-text span {
      display: block;
      font-size: 11.5px;
      font-weight: 600;
      color: #667C9C;
      line-height: 1.2;
    }

    :where(html[data-page="web-development"]) .wd-tech-benefit-divider {
      width: 1px;
      height: 38px;
      background: rgba(16, 39, 71, 0.11);
      margin-right: 16px;
    }

    /* Technology Panel Wrapper */
    :where(html[data-page="web-development"]) .wd-tech-panel-wrapper {
      position: relative;
      width: 100%;
      padding-top: 58px;
      padding-bottom: 78px;
      min-width: 0;
      box-sizing: border-box;
    }

    /* Top Quote & Arrow */
    :where(html[data-page="web-development"]) .wd-tech-top-quote-box {
      position: absolute;
      top: -30px;
      right: 20px;
      width: 245px;
      z-index: 6;
      pointer-events: none;
    }

    :where(html[data-page="web-development"]) .wd-tech-top-quote-text {
      font-family: 'Caveat', cursive;
      font-size: 26px;
      font-weight: 600;
      line-height: 1.08;
      color: #102747;
      text-align: center;
      transform: rotate(-3.5deg);
      white-space: nowrap;
    }

    :where(html[data-page="web-development"]) .wd-tech-top-arrow-svg {
      position: absolute;
      left: -56px;
      top: 44px;
      width: 82px;
      height: 72px;
      pointer-events: none;
    }

    :where(html[data-page="web-development"]) .wd-tech-yellow-rays-svg {
      position: absolute;
      top: 6px;
      right: -30px;
      z-index: 5;
      width: 58px;
      height: 64px;
      pointer-events: none;
    }

    /* White Technology Panel */
    :where(html[data-page="web-development"]) .wd-tech-panel {
      position: relative;
      z-index: 2;
      width: 100%;
      background: #FFFFFF;
      border: 1px solid rgba(16, 39, 71, 0.07);
      border-radius: 24px;
      padding: 16px 14px;
      box-shadow: 0 18px 45px rgba(16, 39, 71, 0.07);
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      box-sizing: border-box;
      min-width: 0;
    }

    /* Category Column */
    :where(html[data-page="web-development"]) .wd-tech-cat-col {
      min-width: 0;
    }

    :where(html[data-page="web-development"]) .wd-tech-cat-header {
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 10px;
      box-sizing: border-box;
    }

    :where(html[data-page="web-development"]) .wd-tech-cat-icon {
      width: 28px;
      height: 28px;
      background: rgba(255, 255, 255, 0.65);
      border-radius: 8px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    :where(html[data-page="web-development"]) .wd-tech-cat-title {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }

    :where(html[data-page="web-development"]) .wd-tech-tools-grid {
      margin-top: 14px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    :where(html[data-page="web-development"]) .wd-tech-tool-card {
      min-width: 0;
      height: 84px;
      background: #FCFDFE;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 4px 14px rgba(16, 39, 71, 0.035);
      border: 1px solid rgba(16, 39, 71, 0.05);
      transition: transform 180ms ease, box-shadow 180ms ease;
      cursor: default;
      padding: 6px;
      box-sizing: border-box;
    }

    :where(html[data-page="web-development"]) .wd-tech-tool-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 24px rgba(16, 39, 71, 0.07);
    }

    :where(html[data-page="web-development"]) .wd-tech-tool-logo {
      max-width: 38px;
      max-height: 38px;
      display: grid;
      place-items: center;
    }

    :where(html[data-page="web-development"]) .wd-tech-tool-logo svg {
      max-width: 100%;
      max-height: 100%;
      display: block;
    }

    :where(html[data-page="web-development"]) .wd-tech-tool-label {
      font-size: 11px;
      font-weight: 600;
      color: #102747;
      text-align: center;
      line-height: 1.1;
      white-space: nowrap;
    }

    /* Bottom Quote & Arrow */
    :where(html[data-page="web-development"]) .wd-tech-bottom-quote-box {
      position: absolute;
      right: 30px;
      bottom: -24px;
      width: 230px;
      z-index: 7;
      pointer-events: none;
    }

    :where(html[data-page="web-development"]) .wd-tech-bottom-quote-text {
      font-family: 'Caveat', cursive;
      font-size: 24.5px;
      font-weight: 600;
      line-height: 1.08;
      color: #102747;
      text-align: left;
      transform: rotate(-3.5deg);
      position: relative;
      white-space: nowrap;
    }

    :where(html[data-page="web-development"]) .wd-tech-underline-svg {
      position: absolute;
      left: 82px;
      top: 54px;
      width: 112px;
      height: 20px;
      pointer-events: none;
    }

    :where(html[data-page="web-development"]) .wd-tech-bottom-arrow-svg {
      position: absolute;
      left: -86px;
      top: -38px;
      width: 96px;
      height: 86px;
      pointer-events: none;
    }

    /* Bottom CTA Bar */
    :where(html[data-page="web-development"]) .wd-tech-cta-bar {
      position: relative;
      z-index: 3;
      width: 78%;
      max-width: 920px;
      margin: 72px auto 0;
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(16, 39, 71, 0.08);
      border-radius: 999px;
      min-height: 84px;
      padding: 14px 18px 14px 26px;
      box-shadow: 0 12px 30px rgba(16, 39, 71, 0.055);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 24px;
      box-sizing: border-box;
    }

    :where(html[data-page="web-development"]) .wd-tech-cta-msg {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    :where(html[data-page="web-development"]) .wd-tech-cta-icon-box {
      width: 44px;
      height: 44px;
      background: #FFF3CF;
      border-radius: 14px;
      display: grid;
      place-items: center;
      color: #ECA500;
      flex-shrink: 0;
    }

    :where(html[data-page="web-development"]) .wd-tech-cta-text {
      font-size: 14px;
      font-weight: 600;
      color: #102747;
      line-height: 1.4;
    }

    :where(html[data-page="web-development"]) .wd-tech-cta-btn {
      height: 56px;
      padding: 0 28px;
      background: #FFB718;
      color: #102747;
      border-radius: 999px;
      font-weight: 700;
      font-size: 15px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      transition: all 0.25s ease;
      box-shadow: 0 8px 20px rgba(255, 183, 24, 0.25);
      white-space: nowrap;
      flex-shrink: 0;
    }

    :where(html[data-page="web-development"]) .wd-tech-cta-btn:hover {
      background: #EFA000;
      transform: translateY(-2px);
      box-shadow: 0 12px 26px rgba(255, 183, 24, 0.35);
    }

    :where(html[data-page="web-development"]) .wd-tech-cta-btn svg {
      transition: transform 0.2s ease;
    }

    :where(html[data-page="web-development"]) .wd-tech-cta-btn:hover svg {
      transform: translateX(4px);
    }

    /* Responsive Rules for Tech Stack */
    @media (max-width: 1279px) and (min-width: 1024px) {
      :where(html[data-page="web-development"]) .wd-tech-top-quote-box {
        top: -3px;
        right: 12px;
        transform: scale(0.9);
        transform-origin: top right;
      }
      :where(html[data-page="web-development"]) .wd-tech-bottom-quote-box {
        right: 14px;
        bottom: -16px;
        transform: scale(0.9);
        transform-origin: bottom right;
      }
      :where(html[data-page="web-development"]) .wd-tech-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 1023px) {
      :where(html[data-page="web-development"]) .wd-tech-section {
        padding: 68px 28px 64px;
      }
      :where(html[data-page="web-development"]) .wd-tech-main-grid {
        grid-template-columns: 1fr;
        gap: 46px;
      }
      :where(html[data-page="web-development"]) .wd-tech-headline {
        max-width: 650px;
      }
      :where(html[data-page="web-development"]) .wd-tech-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      :where(html[data-page="web-development"]) .wd-tech-top-quote-box {
        top: -5px;
        right: 10px;
        transform: scale(0.85);
      }
      :where(html[data-page="web-development"]) .wd-tech-bottom-quote-box,:where(html[data-page="web-development"]) 
      .wd-tech-yellow-rays-svg {
        display: none !important;
      }
      :where(html[data-page="web-development"]) .wd-tech-cta-bar {
        width: 100%;
        margin-top: 48px;
      }
    }

    @media (max-width: 767px) {
      :where(html[data-page="web-development"]) .wd-tech-section {
        padding: 52px 18px 52px;
      }
      :where(html[data-page="web-development"]) .wd-tech-main-grid {
        display: block;
      }
      :where(html[data-page="web-development"]) .wd-tech-headline {
        font-size: 36px;
      }
      :where(html[data-page="web-development"]) .wd-tech-panel-wrapper {
        padding-top: 24px;
        padding-bottom: 24px;
      }
      :where(html[data-page="web-development"]) .wd-tech-panel {
        grid-template-columns: 1fr;
        padding: 14px;
      }
      :where(html[data-page="web-development"]) .wd-tech-top-quote-box,:where(html[data-page="web-development"]) 
      .wd-tech-bottom-quote-box,:where(html[data-page="web-development"]) 
      .wd-tech-yellow-rays-svg {
        display: none !important;
      }
      :where(html[data-page="web-development"]) .wd-tech-benefits {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      :where(html[data-page="web-development"]) .wd-tech-benefit-divider {
        display: none;
      }
      :where(html[data-page="web-development"]) .wd-tech-benefit-item {
        padding-right: 0;
        width: 100%;
      }
      :where(html[data-page="web-development"]) .wd-tech-cta-bar {
        border-radius: 22px;
        grid-template-columns: 1fr;
        padding: 20px;
        margin-top: 36px;
      }
      :where(html[data-page="web-development"]) .wd-tech-cta-btn {
        width: 100%;
        justify-content: center;
      }
    }

    @media (max-width: 479px) {
      :where(html[data-page="web-development"]) .wd-tech-headline {
        font-size: 32px;
      }
      :where(html[data-page="web-development"]) .wd-tech-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      :where(html[data-page="web-development"]) .wd-tech-tool-card {
        height: 88px;
      }
    }

    /* ==========================================================================
       8. TESTIMONIALS + FAQ SECTION (Strict Reference Upgrade)
       ========================================================================== */
    :where(html[data-page="web-development"]) .wd-testi-faq-section {
      background-color: #FCF8EF;
      background-image: radial-gradient(rgba(53, 85, 124, 0.10) 1px, transparent 1px);
      background-size: 30px 30px;
      padding: 84px 0 90px;
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="web-development"]) .wd-testi-faq-container {
      width: 100%;
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 24px;
      min-width: 0;
    }

    :where(html[data-page="web-development"]) .wd-testi-faq-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
      gap: 48px;
      align-items: start;
    }

    /* Left & Right Column Shells */
    :where(html[data-page="web-development"]) .wd-tf-col {
      display: flex;
      flex-direction: column;
      min-width: 0;
      position: relative;
    }

    /* Eyebrow System */
    :where(html[data-page="web-development"]) .wd-tf-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #FFFFFF;
      border: 1px solid rgba(16, 39, 71, 0.08);
      border-radius: 999px;
      padding: 8px 16px;
      width: fit-content;
      box-shadow: 0 2px 8px rgba(16, 39, 71, 0.03);
    }

    :where(html[data-page="web-development"]) .wd-tf-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      display: inline-block;
      flex-shrink: 0;
    }

    :where(html[data-page="web-development"]) .wd-tf-dot.gold {
      background: #FFB718;
    }

    :where(html[data-page="web-development"]) .wd-tf-dot.blue {
      background: #2F7DFF;
    }

    :where(html[data-page="web-development"]) .wd-tf-eyebrow-text {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      color: #214873;
    }

    /* Section Headings */
    :where(html[data-page="web-development"]) .wd-tf-heading {
      margin-top: 24px;
      font-size: clamp(34px, 3.2vw, 50px);
      line-height: 1.05;
      letter-spacing: -0.04em;
      font-weight: 800;
      color: #102747;
      text-wrap: balance;
    }

    :where(html[data-page="web-development"]) .wd-tf-heading span.gold-highlight {
      color: #FFB718;
    }

    :where(html[data-page="web-development"]) .wd-tf-heading span.blue-highlight {
      color: #2F7DFF;
    }

    :where(html[data-page="web-development"]) .wd-tf-desc {
      margin-top: 18px;
      font-size: 16.5px;
      line-height: 1.55;
      color: #657B9C;
      max-width: 380px;
      text-wrap: pretty;
    }

    /* Header Wrappers for Anchored Decorative Elements */
    :where(html[data-page="web-development"]) .wd-tf-header-rel {
      position: relative;
    }

    /* Testimonial Quote Annotation & Arrow (Anchored strictly to Testimonials Header) */
    :where(html[data-page="web-development"]) .wd-tf-annot-testi {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 160px;
      pointer-events: none;
      z-index: 10;
    }

    :where(html[data-page="web-development"]) .wd-tf-annot-testi-text {
      font-family: 'Caveat', cursive, sans-serif;
      font-size: 23px;
      font-weight: 700;
      line-height: 1.05;
      color: #173D69;
      transform: rotate(-4deg);
      text-align: left;
      position: relative;
      display: inline-block;
    }

    /* Yellow sparkle rays next to quote */
    :where(html[data-page="web-development"]) .wd-tf-sunburst-svg {
      position: absolute;
      top: -10px;
      right: -24px;
      width: 28px;
      height: 28px;
    }

    /* Arrow downward curving to first card */
    :where(html[data-page="web-development"]) .wd-tf-testi-arrow-svg {
      display: block;
      width: 80px;
      height: 120px;
      margin-top: 8px;
      margin-left: 48px;
    }

    /* Testimonial Cards Column */
    :where(html[data-page="web-development"]) .wd-tf-cards-list {
      margin-top: 36px;
      display: grid;
      gap: 20px;
    }

    :where(html[data-page="web-development"]) .wd-tf-card {
      background: #FFFFFF;
      border: 1px solid rgba(16, 39, 71, 0.07);
      border-radius: 20px;
      padding: 30px 32px 26px;
      box-shadow: 0 12px 30px rgba(16, 39, 71, 0.055);
      position: relative;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      min-height: 210px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    :where(html[data-page="web-development"]) .wd-tf-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 42px rgba(16, 39, 71, 0.09);
    }

    :where(html[data-page="web-development"]) .wd-tf-card-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 14px;
    }

    :where(html[data-page="web-development"]) .wd-tf-quote-icon {
      width: 44px;
      height: 34px;
      color: #2F7DFF;
      opacity: 0.85;
      flex-shrink: 0;
    }

    :where(html[data-page="web-development"]) .wd-tf-card.card-2 .wd-tf-quote-icon {
      color: #FFB718;
    }

    :where(html[data-page="web-development"]) .wd-tf-stars {
      display: flex;
      gap: 3px;
      color: #FFB000;
      font-size: 19px;
      line-height: 1;
    }

    :where(html[data-page="web-development"]) .wd-tf-quote-body {
      font-size: 16px;
      line-height: 1.58;
      color: #294A72;
      font-weight: 500;
      margin-bottom: 22px;
      text-wrap: pretty;
    }

    :where(html[data-page="web-development"]) .wd-tf-card-divider {
      height: 1px;
      background: rgba(16, 39, 71, 0.07);
      margin-bottom: 18px;
    }

    :where(html[data-page="web-development"]) .wd-tf-card-footer {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      align-items: center;
    }

    :where(html[data-page="web-development"]) .wd-tf-author-wrap {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    :where(html[data-page="web-development"]) .wd-tf-avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(16, 39, 71, 0.08);
    }

    :where(html[data-page="web-development"]) .wd-tf-author-details {
      min-width: 0;
    }

    :where(html[data-page="web-development"]) .wd-tf-author-name {
      font-size: 15.5px;
      font-weight: 800;
      color: #102747;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    :where(html[data-page="web-development"]) .wd-tf-author-role {
      font-size: 13px;
      color: #657B9C;
      margin-top: 3px;
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    :where(html[data-page="web-development"]) .wd-tf-industry-pill {
      display: inline-flex;
      align-items: center;
      font-size: 12px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 999px;
      flex-shrink: 0;
      white-space: nowrap;
    }

    :where(html[data-page="web-development"]) .wd-tf-industry-pill.pill-blue {
      background: #EAF2FF;
      color: #2F7DFF;
    }

    :where(html[data-page="web-development"]) .wd-tf-industry-pill.pill-mint {
      background: #E2F8F0;
      color: #18BE95;
    }

    /* FAQ Column Quotes & Arrow (Anchored to FAQ Header) */
    :where(html[data-page="web-development"]) .wd-tf-annot-faq {
      position: absolute;
      top: 15px;
      right: 8px;
      width: 170px;
      pointer-events: none;
      z-index: 10;
    }

    :where(html[data-page="web-development"]) .wd-tf-annot-faq-text {
      font-family: 'Caveat', cursive, sans-serif;
      font-size: 23px;
      font-weight: 700;
      line-height: 1.05;
      color: #173D69;
      transform: rotate(-4deg);
      text-align: right;
      display: inline-block;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-arrow-svg {
      display: block;
      width: 78px;
      height: 72px;
      margin-top: 4px;
      margin-left: auto;
      margin-right: 18px;
    }

    /* FAQ Accordion List */
    :where(html[data-page="web-development"]) .wd-tf-faq-accordion {
      margin-top: 36px;
      display: grid;
      gap: 13px;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-item {
      background: #FFFFFF;
      border: 1px solid rgba(16, 39, 71, 0.07);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 8px 22px rgba(16, 39, 71, 0.04);
      transition: all 0.22s ease;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-item:hover:not(.is-open) {
      border-color: rgba(47, 125, 255, 0.22);
      transform: translateY(-1px);
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-item.is-open {
      border-color: rgba(255, 183, 24, 0.55);
      border-radius: 20px;
      box-shadow: 0 14px 34px rgba(255, 183, 24, 0.09);
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-btn {
      width: 100%;
      min-height: 72px;
      padding: 14px 20px;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) 42px;
      gap: 16px;
      align-items: center;
      text-align: left;
      background: transparent;
      border: none;
      cursor: pointer;
      font-family: inherit;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-num {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 15px;
      font-weight: 800;
      flex-shrink: 0;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-item.item-1 .wd-tf-faq-num {
      background: #FFF2CC;
      color: #D97706;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-item.item-2 .wd-tf-faq-num {
      background: #EAF2FF;
      color: #2F7DFF;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-item.item-3 .wd-tf-faq-num {
      background: #E2F8F0;
      color: #18BE95;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-item.item-4 .wd-tf-faq-num {
      background: #FCE9EF;
      color: #F25B82;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-question {
      font-size: 15.5px;
      font-weight: 800;
      color: #102747;
      line-height: 1.35;
      text-wrap: pretty;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-toggle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(16, 39, 71, 0.08);
      background: #FFFFFF;
      display: grid;
      place-items: center;
      font-size: 18px;
      font-weight: 700;
      color: #102747;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-item.is-open .wd-tf-faq-toggle {
      background: #FFF8E6;
      border-color: #FFB718;
      color: #D97706;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-answer-wrap {
      display: none;
      padding: 0 20px 20px;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-item.is-open .wd-tf-faq-answer-wrap {
      display: block;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-answer-inner {
      margin-left: 60px;
      background: #F8FAFD;
      border-radius: 14px;
      padding: 16px 20px;
      font-size: 14px;
      line-height: 1.6;
      color: #60799A;
      text-wrap: pretty;
    }

    /* FAQ Bottom Help / CTA Bar */
    :where(html[data-page="web-development"]) .wd-tf-faq-cta-bar {
      margin-top: 20px;
      background: #FFF8E6;
      border: 1px solid rgba(255, 183, 24, 0.35);
      border-radius: 18px;
      padding: 16px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      box-shadow: 0 6px 18px rgba(255, 183, 24, 0.06);
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-cta-left {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-cta-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #FFEAA0;
      color: #D97706;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-cta-text {
      min-width: 0;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-cta-text strong {
      font-size: 15px;
      font-weight: 800;
      color: #102747;
      display: block;
      line-height: 1.25;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-cta-text span {
      font-size: 12.5px;
      color: #657B9C;
      display: block;
      margin-top: 2px;
      text-wrap: pretty;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-cta-btn {
      background: #FFB718;
      color: #102747;
      font-size: 14px;
      font-weight: 800;
      padding: 11px 22px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      flex-shrink: 0;
      box-shadow: 0 4px 14px rgba(255, 183, 24, 0.35);
      transition: all 0.2s ease;
    }

    :where(html[data-page="web-development"]) .wd-tf-faq-cta-btn:hover {
      background: #EFA000;
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(255, 183, 24, 0.45);
    }

    /* Responsive Breakpoints for Testimonials + FAQ */
    @media (max-width: 1279px) {
      :where(html[data-page="web-development"]) .wd-testi-faq-grid {
        gap: 46px;
      }
      :where(html[data-page="web-development"]) .wd-tf-annot-testi,:where(html[data-page="web-development"]) 
      .wd-tf-annot-faq {
        display: none !important;
      }
    }

    @media (max-width: 1023px) {
      :where(html[data-page="web-development"]) .wd-testi-faq-section {
        padding: 68px 0 72px;
      }
      :where(html[data-page="web-development"]) .wd-testi-faq-container {
        padding: 0 24px;
      }
      :where(html[data-page="web-development"]) .wd-testi-faq-grid {
        grid-template-columns: 1fr;
        gap: 60px;
      }
      :where(html[data-page="web-development"]) .wd-tf-col {
        max-width: 760px;
        margin: 0 auto;
        width: 100%;
      }
    }

    @media (max-width: 767px) {
      :where(html[data-page="web-development"]) .wd-tf-annot-testi {
        display: none;
      }
      :where(html[data-page="web-development"]) .wd-tf-desc {
        max-width: 100%;
      }
      :where(html[data-page="web-development"]) .wd-testi-faq-section {
        padding: 54px 0 58px;
      }
      :where(html[data-page="web-development"]) .wd-testi-faq-container {
        padding: 0 16px;
      }
      :where(html[data-page="web-development"]) .wd-tf-heading {
        font-size: 34px;
      }
      :where(html[data-page="web-development"]) .wd-tf-card {
        padding: 22px 20px 20px;
      }
      :where(html[data-page="web-development"]) .wd-tf-faq-answer-inner {
        margin-left: 0;
        padding: 14px 16px;
      }
      :where(html[data-page="web-development"]) .wd-tf-faq-cta-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px;
      }
      :where(html[data-page="web-development"]) .wd-tf-faq-cta-btn {
        width: 100%;
        justify-content: center;
      }
    }

    @media (max-width: 479px) {
      :where(html[data-page="web-development"]) .wd-tf-heading {
        font-size: 30px;
      }
      :where(html[data-page="web-development"]) .wd-tf-card-footer {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      :where(html[data-page="web-development"]) .wd-tf-industry-pill {
        width: fit-content;
      }
      :where(html[data-page="web-development"]) .wd-tf-faq-btn {
        grid-template-columns: 38px minmax(0, 1fr) 34px;
        gap: 12px;
        padding: 12px 14px;
      }
      :where(html[data-page="web-development"]) .wd-tf-faq-num {
        width: 36px;
        height: 36px;
        font-size: 13.5px;
      }
      :where(html[data-page="web-development"]) .wd-tf-faq-toggle {
        width: 34px;
        height: 34px;
        font-size: 16px;
      }
      :where(html[data-page="web-development"]) .wd-tf-faq-question {
        font-size: 14px;
      }
    }

:where(html[data-page="web-development"]) .wd-review-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

:where(html[data-page="web-development"]) .wd-review-card-item {
  background: var(--surface-white);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.25s ease;
}

:where(html[data-page="web-development"]) .wd-review-card-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

/* Full-Width Luxury CTA Banner */
:where(html[data-page="web-development"]) .wd-full-cta-section {
  padding: 40px 0 80px;
}

:where(html[data-page="web-development"]) .wd-full-cta-box {
  background: radial-gradient(circle at 90% 18%, rgba(255, 183, 24, 0.20) 0%, transparent 48%),
              radial-gradient(circle at 10% 85%, rgba(47, 125, 255, 0.20) 0%, transparent 52%),
              linear-gradient(135deg, #091C36 0%, #0E274A 60%, #081930 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  padding: 52px 56px 44px;
  box-shadow: 0 28px 70px rgba(9, 28, 54, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

:where(html[data-page="web-development"]) .wd-full-cta-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.35;
  pointer-events: none;
}

:where(html[data-page="web-development"]) .wd-full-cta-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

:where(html[data-page="web-development"]) .wd-full-cta-eyebrow-wrap {
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
}

:where(html[data-page="web-development"]) .wd-full-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 183, 24, 0.14);
  border: 1px solid rgba(255, 183, 24, 0.32);
  color: #FFC019;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 9999px;
  backdrop-filter: blur(8px);
}

:where(html[data-page="web-development"]) .wd-full-cta-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFC019;
  box-shadow: 0 0 10px rgba(255, 192, 25, 0.8);
  display: inline-block;
}

:where(html[data-page="web-development"]) .wd-full-cta-heading,:where(html[data-page="web-development"]) 
.wd-full-cta-text h2,:where(html[data-page="web-development"]) 
.wd-full-cta-box h2 {
  font-family: var(--font-main, 'Manrope', sans-serif) !important;
  font-size: clamp(30px, 3.4vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #FFFFFF !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.03em !important;
}

:where(html[data-page="web-development"]) .wd-full-cta-highlight,:where(html[data-page="web-development"]) 
.wd-full-cta-text h2 span,:where(html[data-page="web-development"]) 
.wd-full-cta-box h2 span {
  color: #FFC019 !important;
  background: linear-gradient(135deg, #FFD44D 0%, #FFA700 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
}

:where(html[data-page="web-development"]) .wd-full-cta-desc,:where(html[data-page="web-development"]) 
.wd-full-cta-text p,:where(html[data-page="web-development"]) 
.wd-full-cta-box p {
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.86) !important;
  max-width: 520px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

:where(html[data-page="web-development"]) .wd-full-cta-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

:where(html[data-page="web-development"]) .wd-full-cta-btn-white,:where(html[data-page="web-development"]) 
.wd-full-cta-actions .wd-btn-white {
  background: #FFFFFF !important;
  color: #0D2240 !important;
  font-family: inherit;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 26px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

:where(html[data-page="web-development"]) .wd-full-cta-btn-white:hover,:where(html[data-page="web-development"]) 
.wd-full-cta-actions .wd-btn-white:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
  background: #F8FAFC !important;
}

:where(html[data-page="web-development"]) .wd-full-cta-btn-yellow,:where(html[data-page="web-development"]) 
.wd-full-cta-actions .wd-btn-yellow {
  background: linear-gradient(135deg, #FFC72C 0%, #FF9E00 100%) !important;
  color: #0B203C !important;
  font-family: inherit;
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 14px 28px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: none !important;
  box-shadow: 0 10px 28px rgba(255, 183, 24, 0.38) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

:where(html[data-page="web-development"]) .wd-full-cta-btn-yellow:hover,:where(html[data-page="web-development"]) 
.wd-full-cta-actions .wd-btn-yellow:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px rgba(255, 183, 24, 0.52) !important;
  background: linear-gradient(135deg, #FFD043 0%, #FFA80A 100%) !important;
}

:where(html[data-page="web-development"]) .wd-full-cta-btn-yellow svg,:where(html[data-page="web-development"]) 
.wd-full-cta-actions .wd-btn-yellow svg {
  transition: transform 0.2s ease;
}

:where(html[data-page="web-development"]) .wd-full-cta-btn-yellow:hover svg,:where(html[data-page="web-development"]) 
.wd-full-cta-actions .wd-btn-yellow:hover svg {
  transform: translateX(3px);
}

:where(html[data-page="web-development"]) .wd-full-cta-trust-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 36px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  flex-wrap: wrap;
}

:where(html[data-page="web-development"]) .wd-full-cta-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

:where(html[data-page="web-development"]) .wd-full-cta-trust-item svg {
  color: #FFC019;
  flex-shrink: 0;
}

@media (max-width: 1200px) {
  /* Process Sticky Note & Inter-card Pills safety */
  :where(html[data-page="web-development"]) .wd-sticky-note {
    display: none !important;
  }
  :where(html[data-page="web-development"]) .wd-step-connector-pill {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  :where(html[data-page="web-development"]) .wd-reviews-faq-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* 1. HERO SECTION at Tablet */
  :where(html[data-page="web-development"]) .wd-hero {
    padding: 48px 0 52px;
    overflow: hidden;
  }
  :where(html[data-page="web-development"]) .wd-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  :where(html[data-page="web-development"]) .wd-hero-left {
    max-width: 680px;
    margin: 0 auto;
    text-align: left;
  }
  :where(html[data-page="web-development"]) .wd-hero-right {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
    overflow: visible;
  }
  :where(html[data-page="web-development"]) .wd-device-stage {
    max-width: 100%;
  }
  :where(html[data-page="web-development"]) .wd-laptop-mockup {
    width: 90%;
    margin: 0 auto;
  }
  :where(html[data-page="web-development"]) .wd-phone-mockup {
    width: 30%;
    max-width: 145px;
    right: 0;
    bottom: -10px;
  }
  :where(html[data-page="web-development"]) .wd-floating-badge.wd-float-top-left {
    top: -10px;
    left: 0;
    transform: scale(0.92);
    transform-origin: top left;
  }
  :where(html[data-page="web-development"]) .wd-floating-badge.wd-float-top-right {
    top: 5px;
    right: 0;
    transform: scale(0.92);
    transform-origin: top right;
  }
  :where(html[data-page="web-development"]) .wd-annot-leads,:where(html[data-page="web-development"]) 
  .wd-annot-grow {
    display: none !important;
  }

  /* 2. WHY CHOOSE KAXON at Tablet */
  :where(html[data-page="web-development"]) .wd-why-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  :where(html[data-page="web-development"]) .wd-why-left {
    position: static;
    max-width: 650px;
  }
  :where(html[data-page="web-development"]) .wd-why-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  /* 4. PROCESS SECTION at Tablet */
  :where(html[data-page="web-development"]) .wd-process-header {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  :where(html[data-page="web-development"]) .wd-process-header-right {
    justify-content: flex-start;
  }
  :where(html[data-page="web-development"]) .wd-annot-idea-wrap {
    display: none !important;
  }
  :where(html[data-page="web-development"]) .wd-process-steps-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  :where(html[data-page="web-development"]) .wd-step-card p {
    min-height: auto;
  }

  /* 5. PORTFOLIO SECTION at Tablet */
  :where(html[data-page="web-development"]) .wd-portfolio-section {
    padding: 64px 0 72px;
  }
  :where(html[data-page="web-development"]) .wd-portfolio-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  :where(html[data-page="web-development"]) .wd-portfolio-intro {
    position: static;
    max-width: 650px;
  }
  :where(html[data-page="web-development"]) .wd-portfolio-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width: 768px) {
  :where(html[data-page="web-development"]) .wd-full-cta-box {
    padding: 32px 22px !important;
  }
  :where(html[data-page="web-development"]) .wd-full-cta-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  :where(html[data-page="web-development"]) .wd-full-cta-actions .wd-btn-yellow,:where(html[data-page="web-development"]) 
  .wd-full-cta-actions .wd-btn-white {
    width: 100% !important;
    justify-content: center !important;
  }

  /* 1. HERO Mobile Styling */
  :where(html[data-page="web-development"]) .wd-hero {
    padding: 36px 0 44px;
  }
  :where(html[data-page="web-development"]) .wd-hero-title {
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.1;
    margin-bottom: 16px;
  }
  :where(html[data-page="web-development"]) .wd-hero-desc {
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 24px;
  }
  :where(html[data-page="web-development"]) .wd-hero-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 32px;
  }
  :where(html[data-page="web-development"]) .wd-hero-buttons .wd-btn-yellow,:where(html[data-page="web-development"]) 
  .wd-hero-buttons .wd-btn-white {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
  :where(html[data-page="web-development"]) .wd-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    padding-top: 20px;
  }
  :where(html[data-page="web-development"]) .wd-stat-item {
    gap: 8px;
    min-width: 0;
  }
  :where(html[data-page="web-development"]) .wd-stat-val {
    font-size: 15px;
  }
  :where(html[data-page="web-development"]) .wd-stat-lbl {
    font-size: 11px;
    white-space: normal;
  }

  /* Hero Stage Mobile */
  :where(html[data-page="web-development"]) .wd-floating-badge {
    display: none !important;
  }
  :where(html[data-page="web-development"]) .wd-laptop-mockup {
    width: 96%;
  }
  :where(html[data-page="web-development"]) .wd-laptop-screen {
    padding: 6px 6px 10px;
    border-radius: 10px 10px 2px 2px;
  }
  :where(html[data-page="web-development"]) .wd-laptop-hero-text h3 {
    font-size: 16px;
    max-width: 180px;
  }
  :where(html[data-page="web-development"]) .wd-phone-mockup {
    width: 32%;
    max-width: 125px;
    padding: 5px;
    border-radius: 18px;
    bottom: -6px;
  }
  :where(html[data-page="web-development"]) .wd-phone-screen {
    border-radius: 14px;
  }
  :where(html[data-page="web-development"]) .wd-phone-headline {
    font-size: 12px;
  }

  /* 2. TRUSTED LOGOS Mobile */
  :where(html[data-page="web-development"]) .wd-trusted-section {
    padding: 20px 0 40px;
  }
  :where(html[data-page="web-development"]) .wd-trusted-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 18px;
  }
  :where(html[data-page="web-development"]) .wd-trusted-label {
    max-width: 100%;
    font-size: 10.5px;
  }
  :where(html[data-page="web-development"]) .wd-trusted-logos {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 12px;
  }
  :where(html[data-page="web-development"]) .wd-logo-item {
    font-size: 14px;
    justify-content: flex-start;
  }

  /* 3. WHY CHOOSE KAXON Mobile */
  :where(html[data-page="web-development"]) .wd-why-section {
    padding: 44px 0 60px;
  }
  :where(html[data-page="web-development"]) .wd-section-title {
    font-size: clamp(28px, 7vw, 36px);
  }
  :where(html[data-page="web-development"]) .wd-section-desc {
    font-size: 14.5px;
    margin-bottom: 24px;
  }
  :where(html[data-page="web-development"]) .wd-why-left .wd-btn-yellow {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
  :where(html[data-page="web-development"]) .wd-why-cards-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  :where(html[data-page="web-development"]) .wd-feature-card {
    padding: 20px 18px;
    border-radius: 16px;
  }

  /* 4. PROCESS SECTION Mobile */
  :where(html[data-page="web-development"]) .wd-process-section {
    padding: 52px 0 64px;
  }
  :where(html[data-page="web-development"]) .wd-process-title {
    font-size: clamp(28px, 7vw, 38px);
  }
  :where(html[data-page="web-development"]) .wd-process-desc {
    font-size: 14.5px;
  }
  :where(html[data-page="web-development"]) .wd-process-header-right {
    width: 100%;
  }
  :where(html[data-page="web-development"]) .wd-btn-discuss {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
  :where(html[data-page="web-development"]) .wd-process-steps-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  :where(html[data-page="web-development"]) .wd-step-card {
    padding: 20px 18px 18px;
    border-radius: 18px;
  }

  /* 5. PORTFOLIO SECTION Mobile */
  :where(html[data-page="web-development"]) .wd-portfolio-section {
    padding: 48px 0 56px;
  }
  :where(html[data-page="web-development"]) .wd-portfolio-title {
    font-size: clamp(28px, 7vw, 38px);
  }
  :where(html[data-page="web-development"]) .wd-portfolio-desc {
    font-size: 14.5px;
    margin-bottom: 20px;
  }
  :where(html[data-page="web-development"]) .wd-portfolio-metrics {
    gap: 12px;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  :where(html[data-page="web-development"]) .wd-metric-col strong {
    font-size: 22px;
  }
  :where(html[data-page="web-development"]) .wd-metric-col span {
    font-size: 11px;
  }
  :where(html[data-page="web-development"]) .wd-portfolio-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  :where(html[data-page="web-development"]) .wd-btn-portfolio {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
  :where(html[data-page="web-development"]) .wd-portfolio-annot {
    display: none !important;
  }
  :where(html[data-page="web-development"]) .wd-portfolio-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  :where(html[data-page="web-development"]) .wd-project-img-box {
    height: 200px;
  }
}

@media (max-width: 480px) {
  :where(html[data-page="web-development"]) .wd-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 8px;
  }
  :where(html[data-page="web-development"]) .wd-stat-icon-wrap {
    width: 32px;
    height: 32px;
  }
  :where(html[data-page="web-development"]) .wd-stat-val {
    font-size: 14px;
  }
  :where(html[data-page="web-development"]) .wd-stat-lbl {
    font-size: 10px;
  }
  :where(html[data-page="web-development"]) .wd-trusted-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }
  :where(html[data-page="web-development"]) .wd-logo-item {
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  :where(html[data-page="web-development"]) .wd-stats-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}


/* shared-chrome.css */
@scope (:where(html[data-page="web-development"]) .shared-kx-header,:where(html[data-page="web-development"])  .shared-kx-mobile-drawer,:where(html[data-page="web-development"])  .shared-site-footer) {
:scope { --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif; --container-max: 1240px; --color-yellow: #F8C72E; --color-primary-navy: #14243D; --transition: all .2s ease; font-family: var(--font-body, 'Plus Jakarta Sans', 'Inter', sans-serif); line-height: 1.5; }
:where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(a) { text-decoration: none; }



:scope {
  --kx-navy: #13243D;
  --kx-deep-navy: #0D1B31;
  --kx-secondary-navy: #1B3152;
  --kx-gold: #F9BE22;
  --kx-gold-hover: #FFCA3A;
  --kx-green: #00D084;
  --kx-cyan: #52BCEB;
  --kx-soft-cyan: #EAF8FF;
  --kx-soft-gold: #FFF8DD;
  --kx-soft-green: #E8F8F0;
  --kx-white: #FFFFFF;
  --kx-gray: #F4F6FA;
  --kx-pill-bg: #EDF3FA;
  --kx-border: #E8EDF4;
  --kx-border-subtle: #F1F4F9;
  --kx-text-dark: #13243D;
  --kx-text-muted: #65748B;
  --kx-radius-pill: 9999px;
  --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
}


:scope.shared-kx-header,
.shared-kx-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: 1px solid rgba(232, 237, 244, 0.8);
  transition: all 0.25s ease;
}

:scope.shared-kx-header.scrolled,
.shared-kx-header.scrolled {
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

:scope.shared-kx-header.menu-open,
.shared-kx-header.menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

.shared-kx-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .shared-kx-container {
    padding: 0 16px;
  }
}

.shared-kx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
}


.shared-kx-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0F1D32;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

.shared-kx-logo-tech {
  color: #00D084;
  font-weight: 800;
}


.shared-kx-nav-menu {
  display: flex;
  align-items: center;
  background: #EDF3FA;
  padding: 4px 6px;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(220, 230, 242, 0.85);
  box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
  flex-shrink: 1;
}

.shared-kx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shared-kx-nav-item {
  position: relative;
}

.shared-kx-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--kx-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-nav-link:hover {
  color: #0F1D32;
  background: rgba(255, 255, 255, 0.7);
}

.shared-kx-nav-link.active {
  color: #0F1D32 !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
}

.shared-kx-nav-link::after,
.shared-kx-nav-link.active::after {
  display: none !important;
}

.shared-kx-chevron-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  stroke: currentColor;
}


.shared-kx-dropdown-wrapper {
  position: relative;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper.open .shared-kx-chevron-icon {
  transform: rotate(180deg);
}

.shared-kx-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 250px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
  border: 1px solid var(--kx-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  pointer-events: none;
  z-index: 100;
}

/* Invisible hover bridge to eliminate the 8px cursor gap */
.shared-kx-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
  background: transparent;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper.open .shared-kx-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.shared-kx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #13243D;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.shared-kx-dropdown-item:hover {
  background: #F0F7FF;
  color: #0F1D32;
}


.shared-kx-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.shared-kx-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0F1D32;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-btn-pill-navy:hover {
  background: #1B2E4B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
}

.shared-kx-btn-pill-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F9BE22;
  color: #0F1D32;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
}

.shared-kx-btn-pill-gold:hover {
  background: #FFCA3A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
}

.shared-kx-btn-pill-navy:active,
.shared-kx-btn-pill-gold:active,
.kx-modal-submit:active {
  transform: translateY(0) scale(0.98);
}


.shared-kx-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0F1D32;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.shared-kx-mobile-toggle:hover {
  background: #EDF3FA;
}

@media (max-width: 1240px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-navy {
    display: none;
  }
}

@media (max-width: 1100px) {
  .shared-kx-nav-menu {
    display: none;
  }

  .shared-kx-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .shared-kx-nav-inner {
    height: 70px;
    gap: 8px;
  }
  .shared-kx-logo {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .shared-kx-logo {
    font-size: 18px;
  }
  .shared-kx-nav-actions {
    gap: 6px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 7px 11px;
    font-size: 11.5px;
    gap: 4px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold svg {
    display: none;
  }
  .shared-kx-mobile-toggle {
    padding: 6px;
  }
}

@media (max-width: 360px) {
  .shared-kx-container {
    padding: 0 6px;
  }
  .shared-kx-nav-inner {
    gap: 2px;
  }
  .shared-kx-logo {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  .shared-kx-nav-actions {
    gap: 2px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 5px 6px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  .shared-kx-mobile-toggle {
    padding: 2px;
  }
}


:scope.shared-kx-mobile-drawer,
.shared-kx-mobile-drawer {
  position: fixed;
  top: var(--header-height, 78px);
  left: 0;
  width: 100%;
  height: calc(100dvh - var(--header-height, 78px));
  background: #FFFFFF !important;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 40px rgba(19, 36, 61, 0.12);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :scope.shared-kx-mobile-drawer,
  .shared-kx-mobile-drawer {
    top: var(--header-height, 70px);
    height: calc(100dvh - var(--header-height, 70px));
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

:scope.shared-kx-mobile-drawer.open,
:scope.shared-kx-mobile-drawer.active,
.shared-kx-mobile-drawer.open,
.shared-kx-mobile-drawer.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  pointer-events: auto;
}

.shared-kx-mobile-nav-link {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 650;
  color: #14243D;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 12px;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.shared-kx-mobile-nav-link:hover {
  background: #F8FAFC;
  color: #0E1B2F;
}

.shared-kx-mobile-nav-link.active {
  background: #F4F7FB !important;
  color: #0E1B2F !important;
  font-weight: 750 !important;
  border-left: 3px solid #F8C72E;
  padding-left: 13px;
}

.shared-kx-mobile-nav-link.shared-sub {
  margin-left: 12px;
  margin-right: 4px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 550;
  color: #556987;
  background: #F8FAFC;
  border-radius: 10px;
  border-left: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.shared-kx-mobile-nav-link.shared-sub::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94A3B8;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.shared-kx-mobile-nav-link.shared-sub:hover,
.shared-kx-mobile-nav-link.shared-sub.active {
  background: #EDF4FB;
  color: #0E1B2F;
  border-left-color: #F8C72E;
}

.shared-kx-mobile-nav-link.shared-sub.active::before {
  background: #F8C72E;
  transform: scale(1.4);
}

.shared-kx-mobile-drawer-footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #EEF2F6;
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-gold {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(248, 199, 46, 0.3);
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-navy {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
  border-radius: 9999px;
}


.kx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 49, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  padding: 20px;
}

.kx-modal-overlay.active,
.kx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.kx-modal-dialog {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
  border: 1px solid var(--kx-border);
  overflow: hidden;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.kx-modal-overlay.active .kx-modal-dialog,
.kx-modal-overlay.is-open .kx-modal-dialog {
  transform: scale(1) translateY(0);
}

.kx-modal-header {
  padding: 28px 32px 16px;
  position: relative;
}

.kx-modal-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--kx-navy);
  margin: 0 0 6px;
}

.kx-modal-subtitle {
  font-size: 14px;
  color: var(--kx-text-muted);
  margin: 0;
}

.kx-modal-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--kx-gray);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-navy);
  transition: background 0.2s ease, transform 0.2s ease;
}

.kx-modal-close:hover {
  background: #E2E8F0;
  transform: rotate(90deg);
}

.kx-modal-body {
  padding: 0 32px 32px;
}

.kx-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx-form-label {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kx-navy);
}

.kx-form-input,
.kx-form-textarea,
.kx-form-select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--kx-border);
  background: var(--kx-gray);
  color: var(--kx-navy);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.kx-form-input:focus,
.kx-form-textarea:focus,
.kx-form-select:focus {
  outline: none;
  border-color: var(--kx-navy);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
}

.kx-modal-submit {
  background: var(--kx-navy);
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.kx-modal-submit:hover {
  background: var(--kx-deep-navy);
  transform: translateY(-1px);
}


:scope.shared-site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
  position: relative;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

:scope.shared-site-footer .shared-container,
:scope.shared-site-footer .shared-kx-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

.shared-footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand {
  min-width: 0;
}

.shared-footer-brand .shared-brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand .shared-brand-logo .shared-dot {
  color: #2FB7A7;
}

.shared-footer-brand p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  max-width: 290px;
}

.shared-footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.shared-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.shared-footer-links a {
  font-size: 0.835rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.shared-footer-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

.shared-footer-follow-wrapper {
  margin-top: 24px;
}

.shared-footer-follow-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.shared-footer-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.shared-social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  text-decoration: none;
  transition: var(--transition);
}

.shared-social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

.shared-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  flex-wrap: wrap;
  gap: 12px;
}


@media (max-width: 1180px) {
  .nav-link {
    padding: 6px 9px;
    font-size: 0.82rem;
  }
  .btn-nav-phone {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}


@media (max-width: 1024px) {
  :scope {
    --header-height: 66px;
  }
  .nav-menu-wrapper,
  .btn-phone-desktop {
    display: none !important;
  }
  .hamburger-btn {
    display: flex !important;
  }
  .btn-cta-desktop {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .shared-footer-brand p {
    max-width: 100%;
  }
}


@media (max-width: 768px) {
  :scope {
    --header-height: 62px;
  }
  .btn-cta-desktop {
    display: none !important;
  }
  .shared-site-footer {
    padding: 46px 0 24px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding-bottom: 28px;
  }
}


@media (max-width: 540px) {
  :scope {
    --header-height: 58px;
  }
  .nav-container {
    padding: 0 14px;
  }
  .hamburger-btn {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  .hamburger-btn span {
    width: 20px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
  }
  .shared-footer-col-company {
    grid-column: 1;
  }
  .shared-footer-col-solutions {
    grid-column: 2;
  }
  .shared-footer-col-resources {
    grid-column: 1 / -1;
  }
  .shared-footer-col h5 {
    margin-bottom: 12px;
  }
  .shared-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


@media (max-width: 360px) {
  .shared-brand-logo {
    font-size: 1.15rem;
  }
  .mobile-nav-drawer {
    width: 90vw;
    padding: 18px 14px 22px;
  }
  .mobile-nav-link {
    font-size: 0.95rem;
  }
}
  
}
:where(html[data-page="web-development"]) .shared-kx-mobile-drawer { visibility: hidden; }
:where(html[data-page="web-development"]) .shared-kx-mobile-drawer.open { visibility: visible; }
:where(html[data-page="web-development"]) .shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="web-development"]) .shared-kx-btn-pill-navy:active,:where(html[data-page="web-development"]) 
  .shared-kx-btn-pill-gold:active,:where(html[data-page="web-development"]) 
  .kx-modal-submit:active { transform: none; }
}

/* page-upgrades.css */
:where(html[data-page="web-development"]) body.rv-upgraded { --rv-navy:#102039; --rv-muted:#5e748f; --rv-gold:#f5a916; --rv-cream:#fbf7ef; font-family:'Plus Jakarta Sans','Inter',sans-serif; background:var(--rv-cream); }
:where(html[data-page="web-development"]) .rv-upgraded .rv-container { width:calc(100% - 80px); max-width:1240px; margin-inline:auto; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-section { scroll-margin-top:96px; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities) { padding-top:80px; padding-bottom:80px; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-section h2 { font-family:'Outfit','Plus Jakarta Sans',sans-serif!important; font-weight:800!important; font-size:clamp(30px,3.1vw,42px)!important; line-height:1.16!important; letter-spacing:-.04em!important; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-section h3 { font-family:'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.025em; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-section p { line-height:1.7; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-section[data-rv-surface="light"] { background:#fffdf8!important; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-section[data-rv-surface="light"]:nth-of-type(even) { background:#fff!important; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-section[data-rv-surface="light"] h2 { color:#102039; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-section :is(input,select,textarea) { border-radius:12px; font-family:'Plus Jakarta Sans','Inter',sans-serif; }
:where(html[data-page="web-development"]) .rv-upgraded :is(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #21877b; outline-offset:4px; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-hero { background-color:#fbf7ef; background-image:radial-gradient(#d9d7cc .7px,transparent .7px); background-size:24px 24px; padding:44px 0 54px; border-bottom:1px solid #e9e6de; position:relative; overflow:hidden; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-hero-copy { min-width:0; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-eyebrow { display:flex; align-items:center; gap:9px; font:700 11px/1.4 'Plus Jakarta Sans','Inter',sans-serif; text-transform:uppercase; letter-spacing:.14em; color:#315373; margin:0 0 16px; }
:where(html[data-page="web-development"]) .rv-eyebrow > span { width:7px; height:7px; border-radius:50%; background:#f5a916; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-hero h1 { font-family:'Outfit','Plus Jakarta Sans',sans-serif!important; font-size:clamp(40px,4.1vw,58px)!important; line-height:1.09!important; font-weight:800!important; letter-spacing:-.05em!important; color:#102039!important; margin:0 0 20px!important; max-width:100%; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-hero h1 em { font-style:normal; color:#c88409; text-decoration:underline; text-decoration-color:#f5a916; text-decoration-thickness:3px; text-underline-offset:8px; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-description { color:#5e748f; font:400 17px/1.75 'Plus Jakarta Sans','Inter',sans-serif; max-width:560px; margin:0 0 26px; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-actions { display:flex; gap:12px; flex-wrap:wrap; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-button { display:inline-flex; justify-content:center; align-items:center; gap:14px; padding:15px 21px; min-height:52px; border-radius:999px; font:700 13px/1.4 'Plus Jakarta Sans','Inter',sans-serif; text-decoration:none; color:#102039; border:1px solid #e2e7ee; transition:background .2s,transform .2s; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-button-primary { background:#ffc526; border-color:#ffc526; box-shadow:0 8px 20px #f5a91620; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-button-secondary { background:#fff; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-button:hover { transform:translateY(-2px); background:#fff0bd; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-button i { font-size:18px; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-hero-art { min-width:0; position:relative; padding:0; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-note { font:600 24px/1.15 Caveat,cursive; color:#315373; text-align:right; margin:14px 12px 0 0; transform:rotate(-3deg); }
:where(html[data-page="web-development"]) .rv-note svg { display:inline-block; width:50px; height:28px; vertical-align:middle; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-pastel-0 { background:#fff2cb; color:#a97007; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-pastel-1 { background:#def7ee; color:#187d6b; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-pastel-2 { background:#e5efff; color:#2867c7; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-pastel-3 { background:#fbe4ef; color:#b83c73; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-pastel-4 { background:#ede5fc; color:#7250b2; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-icon { width:56px; height:56px; flex-shrink:0; display:grid; place-items:center; border-radius:18px; font-size:27px; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-capabilities { padding:46px 0 54px; background:#fff; border-bottom:1px solid #e9edf0; }
:where(html[data-page="web-development"]) .rv-capabilities .rv-eyebrow { margin-bottom:14px; }
:where(html[data-page="web-development"]) .rv-capabilities h2 { max-width:1000px; color:#102039; margin:0 0 32px; }
:where(html[data-page="web-development"]) .rv-capability-grid { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); gap:26px; }
:where(html[data-page="web-development"]) .rv-capability { display:flex; align-items:flex-start; gap:15px; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-capability h3 { font-size:16px; line-height:1.3; color:#102039; margin:0 0 8px; }
:where(html[data-page="web-development"]) .rv-upgraded .rv-capability p { font:400 13px/1.6 'Plus Jakarta Sans','Inter',sans-serif; color:#5e748f; margin:0; }
:where(html[data-page="web-development"]) .rv-orbit { position:relative; width:100%; max-width:510px; aspect-ratio:1.12; margin:auto; }
:where(html[data-page="web-development"]) .rv-orbit-ring { position:absolute; width:70%; height:76%; top:12%; left:15%; border:1.5px solid #e9b448; border-radius:50%; }
:where(html[data-page="web-development"]) .rv-orbit-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:37%; aspect-ratio:1; border-radius:50%; background:#102039; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font:800 24px/1.15 'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.04em; box-shadow:0 12px 30px #10203915; text-align:center; }
:where(html[data-page="web-development"]) .rv-orbit-core span { color:#26b794; font-size:22px; }
:where(html[data-page="web-development"]) .rv-orbit-node { position:absolute; left:calc(50% + cos(calc(var(--i)*360deg/var(--count) - 90deg))*37%); top:calc(50% + sin(calc(var(--i)*360deg/var(--count) - 90deg))*37%); transform:translate(-50%,-50%); width:25%; aspect-ratio:1; border:3px solid #fff; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; box-shadow:0 6px 22px #10203906; }
:where(html[data-page="web-development"]) .rv-orbit-node i { font-size:32px; }:where(html[data-page="web-development"]) .rv-orbit-node strong { font:700 12px/1.3 'Plus Jakarta Sans','Inter',sans-serif; color:#102039; text-align:center; }
:where(html[data-page="web-development"]) .rv-orbit-4 .rv-orbit-node { left:calc(50% + cos(calc(var(--i)*90deg - 135deg))*43%); top:calc(50% + sin(calc(var(--i)*90deg - 135deg))*43%); }
:where(html[data-page="web-development"]) .rv-career-panels { display:flex; align-items:center; gap:14px; padding:24px 8px; min-height:385px; }
:where(html[data-page="web-development"]) .rv-career-panel { flex:1; min-width:0; height:320px; border-radius:18px; padding:30px 18px; display:flex; flex-direction:column; justify-content:center; gap:25px; transform:rotate(-4deg); }
:where(html[data-page="web-development"]) .rv-career-panel:nth-child(2){transform:translateY(-22px) rotate(3deg)}:where(html[data-page="web-development"]) .rv-career-panel:nth-child(3){transform:rotate(-3deg)}
:where(html[data-page="web-development"]) .rv-career-panel i { font-size:48px; }:where(html[data-page="web-development"]) .rv-career-panel strong { font:800 clamp(25px,2.5vw,36px)/1 'Outfit','Plus Jakarta Sans',sans-serif; color:#102039; letter-spacing:-.04em; }:where(html[data-page="web-development"]) .rv-career-panel span { font:500 11px/1.6 'Plus Jakarta Sans','Inter',sans-serif; text-transform:uppercase; letter-spacing:.08em; color:#5e748f; }
:where(html[data-page="web-development"]) .rv-roadmap { background:#fff; border:1px solid #e8e9e6; padding:30px; border-radius:24px; box-shadow:0 16px 40px #10203908; }
:where(html[data-page="web-development"]) .rv-small-label { font:700 10px/1.4 'Plus Jakarta Sans','Inter',sans-serif!important; text-transform:uppercase; letter-spacing:.13em; color:#315373; margin:0 0 26px!important; }
:where(html[data-page="web-development"]) .rv-roadmap-step { display:flex; gap:20px; padding:16px 0; }:where(html[data-page="web-development"]) .rv-roadmap-step .rv-icon { width:70px;height:70px;border-radius:50%;font-size:34px; }
:where(html[data-page="web-development"]) .rv-roadmap-step small { font:700 12px 'Plus Jakarta Sans','Inter',sans-serif; color:#178575; }:where(html[data-page="web-development"]) .rv-upgraded .rv-roadmap-step h3 { font:800 21px/1.2 'Outfit','Plus Jakarta Sans',sans-serif; color:#102039; margin:6px 0; }:where(html[data-page="web-development"]) .rv-roadmap-step p { color:#5e748f; font-size:13px; margin:0; }
:where(html[data-page="web-development"]) .rv-art-conversation-roadmap > .rv-note,:where(html[data-page="web-development"]) .rv-art-cloud-architecture > .rv-note,:where(html[data-page="web-development"]) .rv-art-search-visibility > .rv-note { margin:0 12px 18px; }
:where(html[data-page="web-development"]) .rv-devices { min-height:410px; padding:20px 50px 20px 0; position:relative; }
:where(html[data-page="web-development"]) .rv-browser { border:5px solid #16334d; border-radius:17px; overflow:hidden; background:#fffdf8; box-shadow:0 18px 25px #10203920; }
:where(html[data-page="web-development"]) .rv-browser-bar { height:24px; display:flex; gap:6px; align-items:center; padding:0 12px; background:#16334d; }:where(html[data-page="web-development"]) .rv-browser-bar b { width:7px;height:7px;border-radius:50%;background:#ffcd38; }:where(html[data-page="web-development"]) .rv-browser-bar b:first-child{background:#ed7880}:where(html[data-page="web-development"]) .rv-browser-bar b:last-child{background:#24b7a8}
:where(html[data-page="web-development"]) .rv-browser-content { min-height:310px; padding:23px; position:relative; overflow:hidden; }:where(html[data-page="web-development"]) .rv-mock-brand { display:block;font:800 17px 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039; margin-bottom:26px; }:where(html[data-page="web-development"]) .rv-browser-content small { display:block;font:700 8px 'Plus Jakarta Sans','Inter',sans-serif;text-transform:uppercase;letter-spacing:.15em;color:#476780;margin-bottom:14px; }:where(html[data-page="web-development"]) .rv-browser-content strong { display:block;font:800 29px/1.13 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;letter-spacing:-.04em;position:relative;z-index:1; }:where(html[data-page="web-development"]) .rv-browser-content p { font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;max-width:210px;color:#5e748f;margin:15px 0; }:where(html[data-page="web-development"]) .rv-mock-button { display:inline-block;padding:10px 17px;background:#ffca32;color:#102039;border-radius:999px;font:700 10px 'Plus Jakarta Sans','Inter',sans-serif;position:relative;z-index:1; }
:where(html[data-page="web-development"]) .rv-shapes { width:180px;height:160px;position:absolute;bottom:-15px;right:-20px;pointer-events:none; }:where(html[data-page="web-development"]) .rv-shapes b { position:absolute; }:where(html[data-page="web-development"]) .rv-shapes b:nth-child(1){width:110px;height:110px;border-radius:100% 0 0 0;background:#25b09e;right:0;bottom:0}:where(html[data-page="web-development"]) .rv-shapes b:nth-child(2){width:140px;height:140px;border-radius:100% 0 0 0;background:#f6e8c6;right:0;bottom:0;z-index:-1}:where(html[data-page="web-development"]) .rv-shapes b:nth-child(3){width:65px;height:65px;border-radius:50%;background:#ffce3a;left:0;top:0}
:where(html[data-page="web-development"]) .rv-mini-phone { position:absolute;bottom:0;right:0;width:145px;height:278px;padding:30px 13px 15px;border:7px solid #132b44;border-radius:26px;background:#fffdf8;box-shadow:0 14px 24px #10203920;overflow:hidden; }:where(html[data-page="web-development"]) .rv-mini-phone>b { position:absolute;top:4px;left:35%;width:30%;height:8px;border-radius:10px;background:#132b44; }:where(html[data-page="web-development"]) .rv-mini-phone>span:not(.rv-mock-button) { font:800 12px 'Outfit','Plus Jakarta Sans',sans-serif; }:where(html[data-page="web-development"]) .rv-mini-phone>strong { display:block;font:800 20px/1.12 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;margin:30px 0 20px; }:where(html[data-page="web-development"]) .rv-mini-phone .rv-shapes { transform:scale(.6);transform-origin:bottom right; }:where(html[data-page="web-development"]) .rv-mini-phone .rv-mock-button {font-size:8px;padding:8px 10px}
:where(html[data-page="web-development"]) .rv-flow { display:grid;grid-template-columns:1fr 1fr 1.2fr;align-items:center;gap:16px;min-height:340px;position:relative; }:where(html[data-page="web-development"]) .rv-flow::before {content:'';position:absolute;left:15%;right:15%;top:50%;height:2px;background:#f5a916;z-index:0}:where(html[data-page="web-development"]) .rv-flow-input { position:relative;background:#fff;border:1px solid #e2e7ee;border-radius:18px;padding:18px 10px;text-align:center; }:where(html[data-page="web-development"]) .rv-flow-input i {font-size:28px;color:#1da891;display:block;margin-bottom:10px}:where(html[data-page="web-development"]) .rv-flow-input strong {display:block;font-size:12px;color:#102039}:where(html[data-page="web-development"]) .rv-flow-input span {font-size:9px;color:#5e748f;display:block;margin-top:6px}:where(html[data-page="web-development"]) .rv-flow-core { position:relative;aspect-ratio:1;border-radius:50%;background:#102039;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;box-shadow:0 0 0 10px #e7eff7; }:where(html[data-page="web-development"]) .rv-flow-core i {font-size:34px}:where(html[data-page="web-development"]) .rv-flow-core strong {font-size:11px;line-height:1.4}:where(html[data-page="web-development"]) .rv-flow-outputs {display:flex;flex-direction:column;gap:24px;position:relative}:where(html[data-page="web-development"]) .rv-flow-outputs>div {padding:16px 12px;background:#fff;border:1px solid #e2e7ee;border-radius:999px;font-size:11px;display:flex;align-items:center;gap:10px;color:#102039}:where(html[data-page="web-development"]) .rv-flow-outputs i {font-size:23px;color:#248978}
:where(html[data-page="web-development"]) .rv-cloud {background:#102c46;color:#fff;padding:34px;border-radius:26px;box-shadow:0 18px 30px #10203915}:where(html[data-page="web-development"]) .rv-cloud-icon {text-align:center;font-size:100px;line-height:1}:where(html[data-page="web-development"]) .rv-cloud-branches{height:42px;border:2px solid #ffcc31;border-bottom:0;border-radius:18px 18px 0 0;margin:12px 14% 0;position:relative}:where(html[data-page="web-development"]) .rv-cloud-branches::after{content:'';position:absolute;left:50%;height:54px;top:-14px;border-left:2px solid #ffcc31}:where(html[data-page="web-development"]) .rv-server-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}:where(html[data-page="web-development"]) .rv-server{border:1px solid #88adc7;border-radius:8px;height:34px;display:flex;gap:5px;align-items:center;padding:10px;margin-bottom:4px}:where(html[data-page="web-development"]) .rv-server b{width:6px;height:6px;border-radius:50%;background:#21d2b1}:where(html[data-page="web-development"]) .rv-server span{width:24px;height:3px;background:#41637e;margin-left:4px}:where(html[data-page="web-development"]) .rv-server-grid strong{display:block;text-align:center;font-size:14px;margin-top:16px;color:white}
:where(html[data-page="web-development"]) .rv-app-phones {position:relative;min-height:430px;display:flex;justify-content:center;align-items:center;padding:10px 20px}:where(html[data-page="web-development"]) .rv-app-phone{position:relative;width:47%;height:390px;border:7px solid #132b44;border-radius:31px;background:#fffdf8;padding:36px 18px 20px;overflow:hidden;box-shadow:0 18px 25px #10203920;transform:rotate(-7deg)}:where(html[data-page="web-development"]) .rv-app-phone+.rv-app-phone{transform:rotate(7deg) translateY(16px);margin-left:-10px}:where(html[data-page="web-development"]) .rv-phone-notch{position:absolute;top:-1px;left:28%;width:44%;height:15px;border-radius:0 0 12px 12px;background:#132b44}:where(html[data-page="web-development"]) .rv-app-phone small{font:800 10px 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;white-space:nowrap}:where(html[data-page="web-development"]) .rv-app-phone small span{color:#1aac90}:where(html[data-page="web-development"]) .rv-app-phone>strong{font:800 29px/1.1 'Outfit','Plus Jakarta Sans',sans-serif;display:block;color:#102039;margin:36px 0 20px;letter-spacing:-.04em}:where(html[data-page="web-development"]) .rv-app-phone p{font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;color:#5e748f;margin-bottom:18px}:where(html[data-page="web-development"]) .rv-upgraded .rv-app-phone h3{font:800 17px/1.2 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;margin:12px 0}:where(html[data-page="web-development"]) .rv-phone-row{display:flex;align-items:center;gap:10px;padding:14px 5px;border-bottom:1px solid #e2e7ee;font:600 11px 'Plus Jakarta Sans','Inter',sans-serif;color:#102039}:where(html[data-page="web-development"]) .rv-phone-row i{font-size:23px;color:#24a694}:where(html[data-page="web-development"]) .rv-app-phone .rv-shapes{transform:scale(.8);transform-origin:bottom right}:where(html[data-page="web-development"]) .rv-platforms{text-align:center;color:#315373;font-size:12px!important;margin-top:22px}:where(html[data-page="web-development"]) .rv-platforms i{font-size:18px;margin-left:12px}:where(html[data-page="web-development"]) .rv-platforms span{margin-left:14px;color:#afbac6}
:where(html[data-page="web-development"]) .rv-search {padding:28px;background:#fff;border:1px solid #e2e7ee;border-radius:24px;box-shadow:0 18px 35px #1020390c}:where(html[data-page="web-development"]) .rv-search-field{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid #e2e7ee;border-radius:999px;color:#102039;font-size:13px}:where(html[data-page="web-development"]) .rv-search-field i{font-size:21px}:where(html[data-page="web-development"]) .rv-search-result{padding:28px 8px}:where(html[data-page="web-development"]) .rv-search-result small{display:block;color:#71859b;font-size:10px;margin-bottom:14px}:where(html[data-page="web-development"]) .rv-search-result strong{display:block;color:#2761b7;font:700 22px 'Outfit','Plus Jakarta Sans',sans-serif;margin-bottom:18px}:where(html[data-page="web-development"]) .rv-search-result>span{display:block;height:9px;border-radius:5px;background:#e0e8f1;margin-top:8px}:where(html[data-page="web-development"]) .rv-search-result>span:last-child{width:80%}:where(html[data-page="web-development"]) .rv-trend{display:block;width:100%;height:auto;overflow:visible}:where(html[data-page="web-development"]) .rv-illustration-label{font:400 10px/1.5 'Plus Jakarta Sans','Inter',sans-serif!important;color:#71859b;margin-top:14px;text-align:center}
:where(html[data-page="web-development"]) .rv-funnel {display:flex;align-items:center;flex-direction:column;gap:12px;padding:0 24px}:where(html[data-page="web-development"]) .rv-funnel-brand{width:92px;height:92px;border-radius:50%;background:#102039;color:#fff;display:grid;place-content:center;font:800 18px/1.15 'Outfit','Plus Jakarta Sans',sans-serif;text-align:center;margin-bottom:4px}:where(html[data-page="web-development"]) .rv-funnel-step{display:flex;align-items:center;gap:20px;padding:24px 28px;border-radius:22px;width:100%;}:where(html[data-page="web-development"]) .rv-funnel-step:nth-child(3){width:90%}:where(html[data-page="web-development"]) .rv-funnel-step:nth-child(4){width:80%}:where(html[data-page="web-development"]) .rv-funnel-step>i{font-size:38px;color:#102039}:where(html[data-page="web-development"]) .rv-funnel-step strong{font:700 14px/1.3 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039}:where(html[data-page="web-development"]) .rv-funnel-step p{font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;color:#5e748f;margin:8px 0 0}
:where(html[data-page="web-development"]) .rv-media-fallback {display:flex!important;align-items:center;justify-content:center;flex-direction:column;gap:16px;min-height:140px;padding:30px;background:#eef4f2;color:#315373;border-radius:inherit;text-align:center;font:600 13px/1.5 'Plus Jakarta Sans','Inter',sans-serif}:where(html[data-page="web-development"]) .rv-media-fallback i{font-size:38px;color:#28a595}:where(html[data-page="web-development"]) .rv-media-fallback.rv-avatar{width:48px;height:48px;min-height:0;padding:0;border-radius:50%;font-size:14px}:where(html[data-page="web-development"]) .rv-media-fallback small{font-size:10px;color:#5e748f;text-transform:uppercase;letter-spacing:.1em}
@media(min-width:1400px){:where(html[data-page="web-development"]) .rv-upgraded .rv-hero{padding-top:48px;padding-bottom:58px}}
@media(max-width:1100px){:where(html[data-page="web-development"]) .rv-upgraded .rv-hero-grid{gap:32px}:where(html[data-page="web-development"]) .rv-upgraded .rv-container{width:calc(100% - 48px)}:where(html[data-page="web-development"]) .rv-upgraded .rv-hero h1{font-size:46px!important}:where(html[data-page="web-development"]) .rv-career-panel{padding:24px 12px}:where(html[data-page="web-development"]) .rv-flow{gap:10px}:where(html[data-page="web-development"]) .rv-app-phone{padding-inline:12px}:where(html[data-page="web-development"]) .rv-app-phone>strong{font-size:26px}:where(html[data-page="web-development"]) .rv-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){:where(html[data-page="web-development"]) .rv-upgraded .rv-hero-grid{grid-template-columns:1fr;gap:30px}:where(html[data-page="web-development"]) .rv-upgraded .rv-hero{padding:36px 0 44px}:where(html[data-page="web-development"]) .rv-upgraded .rv-hero-copy{max-width:660px}:where(html[data-page="web-development"]) .rv-upgraded .rv-hero-art{width:100%;max-width:580px;margin:auto}:where(html[data-page="web-development"]) .rv-upgraded .rv-hero h1{font-size:clamp(38px,6vw,54px)!important}:where(html[data-page="web-development"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities){padding-block:56px}:where(html[data-page="web-development"]) .rv-upgraded .rv-description{max-width:640px}:where(html[data-page="web-development"]) .rv-upgraded .rv-capabilities{padding-block:40px}:where(html[data-page="web-development"]) .rv-upgraded .rv-section h2{font-size:34px!important}}
@media(max-width:540px){:where(html[data-page="web-development"]) .rv-upgraded .rv-container{width:calc(100% - 40px)}:where(html[data-page="web-development"]) .rv-upgraded .rv-hero h1{font-size:38px!important;line-height:1.12!important}:where(html[data-page="web-development"]) .rv-upgraded .rv-description{font-size:15px}:where(html[data-page="web-development"]) .rv-upgraded .rv-eyebrow{font-size:10px;margin-bottom:20px}:where(html[data-page="web-development"]) .rv-upgraded .rv-button{font-size:12px;min-height:48px;padding:13px 17px}:where(html[data-page="web-development"]) .rv-upgraded .rv-actions{gap:10px}:where(html[data-page="web-development"]) .rv-upgraded .rv-hero-art{padding-top:0}:where(html[data-page="web-development"]) .rv-capability-grid{grid-template-columns:1fr;gap:24px}:where(html[data-page="web-development"]) .rv-upgraded .rv-section h2{font-size:29px!important}:where(html[data-page="web-development"]) .rv-upgraded .rv-note{font-size:22px}:where(html[data-page="web-development"]) .rv-orbit-core{font-size:19px}:where(html[data-page="web-development"]) .rv-orbit-core span{font-size:16px}:where(html[data-page="web-development"]) .rv-orbit-node i{font-size:24px}:where(html[data-page="web-development"]) .rv-orbit-node strong{font-size:9px}:where(html[data-page="web-development"]) .rv-orbit-node{gap:5px}:where(html[data-page="web-development"]) .rv-career-panels{min-height:290px;padding:20px 2px;gap:9px}:where(html[data-page="web-development"]) .rv-career-panel{height:240px;padding:20px 12px;gap:20px}:where(html[data-page="web-development"]) .rv-career-panel strong{font-size:25px}:where(html[data-page="web-development"]) .rv-career-panel span{font-size:9px}:where(html[data-page="web-development"]) .rv-career-panel i{font-size:36px}:where(html[data-page="web-development"]) .rv-roadmap{padding:20px}:where(html[data-page="web-development"]) .rv-roadmap-step{gap:14px}:where(html[data-page="web-development"]) .rv-roadmap-step .rv-icon{width:48px;height:48px;font-size:26px}:where(html[data-page="web-development"]) .rv-upgraded .rv-roadmap-step h3{font-size:19px}:where(html[data-page="web-development"]) .rv-devices{min-height:350px;padding-right:30px}:where(html[data-page="web-development"]) .rv-browser-content{padding:16px;min-height:280px}:where(html[data-page="web-development"]) .rv-browser-content strong{font-size:25px}:where(html[data-page="web-development"]) .rv-browser-content p{max-width:160px}:where(html[data-page="web-development"]) .rv-mini-phone{width:110px;height:225px;border-width:5px;padding:24px 10px 10px}:where(html[data-page="web-development"]) .rv-mini-phone>strong{font-size:17px;margin:22px 0 14px}:where(html[data-page="web-development"]) .rv-browser-content .rv-shapes{transform:scale(.7);transform-origin:bottom right}:where(html[data-page="web-development"]) .rv-flow{grid-template-columns:1fr 1fr;gap:24px;min-height:300px}:where(html[data-page="web-development"]) .rv-flow-input{grid-column:1;grid-row:1}:where(html[data-page="web-development"]) .rv-flow-core{grid-column:2;grid-row:1;width:120px;justify-self:center}:where(html[data-page="web-development"]) .rv-flow-outputs{grid-column:1/-1;flex-direction:row;gap:8px}:where(html[data-page="web-development"]) .rv-flow-outputs>div{flex:1;flex-direction:column;text-align:center;padding:15px 8px;border-radius:16px;font-size:10px}:where(html[data-page="web-development"]) .rv-flow::before{top:25%}:where(html[data-page="web-development"]) .rv-cloud{padding:24px 20px}:where(html[data-page="web-development"]) .rv-cloud-icon{font-size:80px}:where(html[data-page="web-development"]) .rv-server-grid{gap:12px}:where(html[data-page="web-development"]) .rv-server{padding:6px;height:28px}:where(html[data-page="web-development"]) .rv-server-grid strong{font-size:11px}:where(html[data-page="web-development"]) .rv-server span{width:13px}:where(html[data-page="web-development"]) .rv-app-phones{padding:10px 4px;min-height:350px}:where(html[data-page="web-development"]) .rv-app-phone{height:320px;border-width:5px;border-radius:25px;padding:25px 12px 15px;width:49%}:where(html[data-page="web-development"]) .rv-app-phone>strong{font-size:23px;margin:26px 0 16px}:where(html[data-page="web-development"]) .rv-app-phone small{font-size:8px}:where(html[data-page="web-development"]) .rv-app-phone p{font-size:9px}:where(html[data-page="web-development"]) .rv-upgraded .rv-app-phone h3{font-size:14px}:where(html[data-page="web-development"]) .rv-phone-row{font-size:10px;padding:11px 2px;gap:7px}:where(html[data-page="web-development"]) .rv-app-phone .rv-shapes{transform:scale(.6)}:where(html[data-page="web-development"]) .rv-app-phone .rv-mock-button{font-size:9px;padding:9px 12px}:where(html[data-page="web-development"]) .rv-search{padding:22px}:where(html[data-page="web-development"]) .rv-search-field{font-size:11px;padding:12px}:where(html[data-page="web-development"]) .rv-search-result strong{font-size:19px}:where(html[data-page="web-development"]) .rv-funnel{padding:0 6px}:where(html[data-page="web-development"]) .rv-funnel-step{padding:19px 20px;gap:14px}:where(html[data-page="web-development"]) .rv-funnel-step>i{font-size:29px}:where(html[data-page="web-development"]) .rv-funnel-step strong{font-size:12px}:where(html[data-page="web-development"]) .rv-funnel-step p{font-size:10px}:where(html[data-page="web-development"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities){padding-block:44px}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="web-development"]) .rv-upgraded .rv-button{transition:none}:where(html[data-page="web-development"]) .rv-upgraded .rv-button:hover{transform:none}}
@media(max-width:600px){
  :where(html[data-page="web-development"]) .rv-upgraded .featured-header-row { flex-wrap:wrap; gap:14px; }
  :where(html[data-page="web-development"]) .rv-upgraded #client-stories .container > div:first-child { flex-wrap:wrap; gap:20px; }
  :where(html[data-page="web-development"]) .rv-upgraded #client-stories .container > div:first-child > div { min-width:0; max-width:100%; flex-wrap:wrap; }
  :where(html[data-page="web-development"]) .rv-upgraded .rv-orbit-6 .rv-orbit-node strong { font-size:8px; }
}
:where(html[data-page="web-development"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(h2, h3, .final-cta-headline, .kx-cta-headline, .display-h2) {
  color: #FFFFFF !important;
}
:where(html[data-page="web-development"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(h2, h3, .final-cta-headline, .kx-cta-headline) :is(.highlight-gold, .cta-gold-text, em, span.gold, .kx-text-gold) {
  color: #FFC526 !important;
  background: transparent !important;
}
:where(html[data-page="web-development"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(p, .kx-cta-sub) {
  color: rgba(255, 255, 255, 0.9) !important;
}


/* micro-interactions.css */
/* Shared feedback layer. Motion acknowledges actions; informational content stays still. */
:root:where([data-page="web-development"]){--kx-feedback-ease:cubic-bezier(.2,.75,.25,1);--kx-feedback-duration:180ms}
:where(html[data-page="web-development"]) :where(a,button,summary,input,textarea,select):focus-visible{outline:3px solid #187d6b!important;outline-offset:4px}
:where(html[data-page="web-development"]) :where(.shared-kx-footer,.ma-dark,.ma-closing) :where(a,button):focus-visible{outline-color:#ffc526!important}
:where(html[data-page="web-development"]) :where(button,summary,.kx-mi-action){-webkit-tap-highlight-color:rgba(245,169,22,.18);touch-action:manipulation}
:where(html[data-page="web-development"]) .kx-mi-action{transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease),scale 120ms var(--kx-feedback-ease),box-shadow var(--kx-feedback-duration) var(--kx-feedback-ease),background-color var(--kx-feedback-duration) ease,border-color var(--kx-feedback-duration) ease!important}
:where(html[data-page="web-development"]) .kx-mi-arrow{display:inline-block;transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease)!important}
:where(html[data-page="web-development"]) .kx-mi-card{transition:translate 220ms var(--kx-feedback-ease),box-shadow 220ms var(--kx-feedback-ease),border-color 180ms ease!important}
:where(html[data-page="web-development"]) .shared-footer-links a,:where(html[data-page="web-development"]) .shared-kx-dropdown-item,:where(html[data-page="web-development"]) .shared-kx-mobile-nav-link{ text-decoration-color:transparent;text-underline-offset:5px;transition:color 160ms ease,background-color 160ms ease,text-decoration-color 160ms ease!important}
:where(html[data-page="web-development"]) .shared-footer-links a:focus-visible{ text-decoration:underline;text-decoration-color:currentColor }
:where(html[data-page="web-development"]) :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea,select){transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease!important}
:where(html[data-page="web-development"]) :where(input:not([type=checkbox]):not([type=radio]),textarea,select):focus{border-color:#187d6b!important;box-shadow:0 0 0 3px rgb(24 125 107 / .12)}
:where(html[data-page="web-development"]) :where(button[aria-expanded],summary){transition:background-color 160ms ease,color 160ms ease!important}
:where(html[data-page="web-development"]) :where(button[aria-expanded],summary):focus-visible{border-radius:8px}
@media(hover:hover) and (pointer:fine){
  :where(html[data-page="web-development"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):hover{translate:0 -2px}
  :where(html[data-page="web-development"]) .kx-mi-action:hover .kx-mi-arrow,:where(html[data-page="web-development"]) .kx-mi-action:focus-visible .kx-mi-arrow{translate:3px 0}
  :where(html[data-page="web-development"]) .kx-mi-card:hover,:where(html[data-page="web-development"]) .kx-mi-card:focus-within{translate:0 -3px;border-color:#d8ba78;box-shadow:0 10px 24px rgb(16 32 57 / .08)}
  :where(html[data-page="web-development"]) .shared-footer-links a:hover{text-decoration:underline;text-decoration-color:currentColor}
}
:where(html[data-page="web-development"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):active{translate:0 0;scale:.98;transition-duration:80ms!important}
:where(html[data-page="web-development"]) .kx-mi-card:active{translate:0 -1px}
/* Honor this preference for both this layer and pre-existing decorative loops. */
@media(prefers-reduced-motion:reduce){
  html:where([data-page="web-development"]){scroll-behavior:auto!important}
  :where(html[data-page="web-development"]) *,:where(html[data-page="web-development"]) *::before,:where(html[data-page="web-development"]) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  :where(html[data-page="web-development"]) .kx-mi-action,:where(html[data-page="web-development"]) .kx-mi-card,:where(html[data-page="web-development"]) .kx-mi-arrow{translate:none!important;scale:none!important;transition:none!important}
  :where(html[data-page="web-development"]) .shared-footer-links a,:where(html[data-page="web-development"]) .shared-kx-dropdown-item,:where(html[data-page="web-development"]) .shared-kx-mobile-nav-link{transition:none!important}
}

/* page-container-rhythm.css */
/* Shared page rhythm: mirrors the Industries page container at every breakpoint. */
:root:where([data-page="web-development"]) {
  --kx-page-container: 1240px;
  --kx-page-gutter: 24px;
}

:where(html[data-page="web-development"]) .shared-kx-header > .shared-kx-container,:where(html[data-page="web-development"]) 
.ux-page .shared-kx-container,:where(html[data-page="web-development"]) 
main > section > :is(
  .container,
  .su-container,
  .impact-container,
  .origin-desktop-view,
  .phil-container,
  .journey-tl-container,
  .careersHero-container,
  .chFeels-container,
  .contact-hero-v2-container,
  .contact-container,
  .taste-inner,
  .ai-container,
  .rv-container,
  .wd-container,
  .wd-tech-container,
  .wd-testi-faq-container,
  .kx-ah-container,
  .ma-container,
  .kats-container,
  .cloud-hero-container,
  .kx-container
),:where(html[data-page="web-development"]) 
body > section > :is(
  .container,
  .contact-container,
  .cloud-hero-container,
  .kx-container
) {
  width: 100% !important;
  max-width: var(--kx-page-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--kx-page-gutter) !important;
  padding-right: var(--kx-page-gutter) !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  :root:where([data-page="web-development"]) { --kx-page-gutter: 16px; }
}

/* This section previously put its gutter on the full-width background itself. */
@media (max-width: 1023px) {
  :where(html[data-page="web-development"]) .wd-tech-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* web-development-hero.css */
:where(html[data-page="web-development"]) .wd-hero-upgrade{position:relative;isolation:isolate;background:#fffcf5;color:#071c42;padding:48px 0 38px;overflow:clip;font-family:'Plus Jakarta Sans',sans-serif}
:where(html[data-page="web-development"]) .wd-hero-upgrade *{box-sizing:border-box}
:where(html[data-page="web-development"]) .wd-hero-upgrade:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(#c6d5e1 .7px,transparent .8px);background-size:24px 24px;opacity:.55}
:where(html[data-page="web-development"]) .wd-hero-upgrade:after{content:'';position:absolute;inset:35% -20% 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 0% 65%,transparent 40%,#fff2cb80 40% 48%,transparent 48%),radial-gradient(ellipse at 100% 65%,transparent 40%,#ede5fc90 40% 49%,transparent 49%)}
:where(html[data-page="web-development"]) .wh-container{width:100%;max-width:var(--kx-page-container,1240px);padding-inline:var(--kx-page-gutter,24px);margin:auto}
:where(html[data-page="web-development"]) .wh-intro{text-align:center;max-width:1180px;margin:auto}
:where(html[data-page="web-development"]) .wh-eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 20px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#31516f}
:where(html[data-page="web-development"]) .wh-eyebrow:before{content:'';width:8px;height:8px;background:#ffc526;border-radius:50%}
:where(html[data-page="web-development"]) .wd-hero-upgrade #rv-hero-heading{font-family:'Outfit',sans-serif;font-size:clamp(38px,3.8vw,54px);line-height:1.08;font-weight:800;letter-spacing:-.04em;margin:0 0 20px;text-wrap:balance;color:#071c42}
:where(html[data-page="web-development"]) .wh-intro h1>span{display:block}:where(html[data-page="web-development"]) .wh-intro h1>strong{font-weight:inherit;padding-inline:.08em;background:linear-gradient(transparent 35%,#ffcf4bc9 35% 95%,transparent 95%);box-decoration-break:clone;-webkit-box-decoration-break:clone}
:where(html[data-page="web-development"]) .wh-description{max-width:800px;margin:0 auto 22px;font-size:17px;line-height:1.65;color:#577195;text-wrap:pretty}
:where(html[data-page="web-development"]) .wh-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}:where(html[data-page="web-development"]) .wh-button{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:50px;border:1px solid #c7d8ec;border-radius:999px;padding:14px 25px;text-decoration:none;font-size:14px;font-weight:800;color:#071c42;transition:background-color .2s,box-shadow .2s;touch-action:manipulation}:where(html[data-page="web-development"]) .wh-primary{background:#ffc526;border-color:#ffc526;box-shadow:0 10px 24px #ffc52630}:where(html[data-page="web-development"]) .wh-secondary{background:white}:where(html[data-page="web-development"]) .wh-button:focus-visible{outline:3px solid #237aff;outline-offset:4px}:where(html[data-page="web-development"]) .wh-primary:hover{background:#ffd453;box-shadow:0 12px 28px #ffc52650}:where(html[data-page="web-development"]) .wh-secondary:hover{border-color:#237aff;background:#f4f8ff}:where(html[data-page="web-development"]) .wh-button:active{transform:translateY(0) scale(.98)}
@media(prefers-reduced-motion:reduce){:where(html[data-page="web-development"]) .wh-button:active{transform:none}}
:where(html[data-page="web-development"]) .wh-scene{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.45fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:24px;align-items:center;margin-top:30px;padding-block:0 24px;min-height:350px}
:where(html[data-page="web-development"]) .wh-connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
:where(html[data-page="web-development"]) .wh-card{position:relative;z-index:2;min-width:0}:where(html[data-page="web-development"]) .wh-card-0{grid-area:1/1}:where(html[data-page="web-development"]) .wh-card-1{grid-area:2/1}:where(html[data-page="web-development"]) .wh-card-2{grid-area:1/3}:where(html[data-page="web-development"]) .wh-card-3{grid-area:2/3}:where(html[data-page="web-development"]) .wh-card-inner{display:flex;gap:12px;align-items:center;padding:17px 14px;border:1px solid #bcd2ec;border-radius:17px;background:#fff;box-shadow:0 12px 25px #10203909}:where(html[data-page="web-development"]) .wd-hero-upgrade .wh-card h2{font:800 16px/1.2 'Outfit',sans-serif;letter-spacing:-.015em;margin:0 0 5px;color:#071c42}:where(html[data-page="web-development"]) .wh-card p{font-size:12px;line-height:1.5;color:#577195;margin:0}:where(html[data-page="web-development"]) .wh-icon{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:50%;font-size:24px;color:#071c42}:where(html[data-page="web-development"]) .wh-mint{background:#def7ee}:where(html[data-page="web-development"]) .wh-lavender{background:#ede5fc}:where(html[data-page="web-development"]) .wh-blue{background:#e5efff}:where(html[data-page="web-development"]) .wh-gold{background:#fff2cb}
:where(html[data-page="web-development"]) .wh-preview{grid-area:1/2/3/3;position:relative;z-index:1;margin:0;padding-bottom:14px;min-width:0}:where(html[data-page="web-development"]) .wh-browser{border:5px solid #193b52;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 15px 28px #10203918}:where(html[data-page="web-development"]) .wh-chrome{height:23px;background:#193b52;display:flex;gap:6px;align-items:center;padding:0 9px}:where(html[data-page="web-development"]) .wh-chrome b{width:8px;height:8px;border-radius:50%;background:#fa7775}:where(html[data-page="web-development"]) .wh-chrome b:nth-child(2){background:#ffd048}:where(html[data-page="web-development"]) .wh-chrome b:nth-child(3){background:#27b89d}:where(html[data-page="web-development"]) .wh-browser-body{padding:15px 18px}:where(html[data-page="web-development"]) .wh-mock-nav{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#071c42;margin-bottom:28px}:where(html[data-page="web-development"]) .wh-mock-nav>b{font-size:16px}:where(html[data-page="web-development"]) .wh-mock-nav>span{font-size:8px}:where(html[data-page="web-development"]) .wh-mock-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}:where(html[data-page="web-development"]) .wh-mock-copy small{display:block;font-size:8px;letter-spacing:.1em;font-weight:800;margin-bottom:10px}:where(html[data-page="web-development"]) .wh-mock-copy>strong{display:block;font:800 clamp(21px,2.1vw,29px)/1.05 'Outfit',sans-serif;letter-spacing:-.035em}:where(html[data-page="web-development"]) .wh-mock-copy p{color:#577195;font-size:10px;line-height:1.5;margin:8px 0}:where(html[data-page="web-development"]) .wh-mock-cta{display:inline-block;background:#ffc526;border-radius:999px;padding:9px 12px;font-size:8px;font-weight:800;color:#071c42}:where(html[data-page="web-development"]) .wh-landscape{height:105px;background:#edf3f8;border-radius:10px;position:relative;overflow:hidden}:where(html[data-page="web-development"]) .wh-landscape span{position:absolute;width:25px;height:25px;background:#ffe079;border-radius:50%;right:18%;top:18%}:where(html[data-page="web-development"]) .wh-landscape b,:where(html[data-page="web-development"]) .wh-landscape em{position:absolute;width:75%;height:100%;background:#8acdc5;transform:rotate(45deg);top:65%;left:0;border-radius:7px}:where(html[data-page="web-development"]) .wh-landscape em{left:50%;background:#b9d4df;top:75%}:where(html[data-page="web-development"]) .wh-skeleton{display:grid;gap:4px;margin-top:9px}:where(html[data-page="web-development"]) .wh-skeleton b{height:4px;background:#dfe5ea;border-radius:3px;width:90%}:where(html[data-page="web-development"]) .wh-skeleton b:nth-child(2){width:78%}:where(html[data-page="web-development"]) .wh-skeleton b:nth-child(3){width:62%}:where(html[data-page="web-development"]) .wh-tiles{display:flex;gap:10px;margin-top:18px}:where(html[data-page="web-development"]) .wh-tiles>div{flex:1;display:flex;gap:8px;align-items:center;padding:10px 8px;background:#fafbfc;border-radius:9px}:where(html[data-page="web-development"]) .wh-tiles .wh-skeleton{flex:1;margin:0}:where(html[data-page="web-development"]) .wh-phone{position:absolute;right:-8px;bottom:0;width:128px;border:5px solid #193b52;border-radius:23px;background:#fff;padding:24px 10px 12px;box-shadow:0 10px 20px #10203916}:where(html[data-page="web-development"]) .wh-earpiece{position:absolute;top:5px;left:50%;translate:-50% 0;width:36px;height:7px;border-radius:8px;background:#193b52}:where(html[data-page="web-development"]) .wh-phone>b{font-size:10px}:where(html[data-page="web-development"]) .wh-phone>strong{display:block;font:800 15px/1.1 'Outfit',sans-serif;margin-top:17px;letter-spacing:-.03em}:where(html[data-page="web-development"]) .wh-phone p{font-size:8px;line-height:1.4;color:#577195;margin:6px 0}:where(html[data-page="web-development"]) .wh-phone .wh-mock-cta{padding:6px;font-size:6px;white-space:nowrap}:where(html[data-page="web-development"]) .wh-phone .wh-landscape{height:60px;margin-top:10px}:where(html[data-page="web-development"]) .wh-phone .wh-landscape span{height:15px;width:15px}
:where(html[data-page="web-development"]) .wh-capabilities{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:24px 0 0;border-top:1px solid #dce5f0;gap:0}:where(html[data-page="web-development"]) .wh-capabilities li{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 12px;font:700 14px/1.35 'Outfit',sans-serif}:where(html[data-page="web-development"]) .wh-capabilities li+li{border-left:1px solid #dce5f0}:where(html[data-page="web-development"]) .wh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:1099px){:where(html[data-page="web-development"]) .wh-scene{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;gap:32px 16px;max-width:680px;margin-inline:auto}:where(html[data-page="web-development"]) .wh-card-0{grid-area:1/1}:where(html[data-page="web-development"]) .wh-card-1{grid-area:1/2}:where(html[data-page="web-development"]) .wh-preview{grid-area:2/1/3/3;width:88%;justify-self:center}:where(html[data-page="web-development"]) .wh-card-2{grid-area:3/1}:where(html[data-page="web-development"]) .wh-card-3{grid-area:3/2}:where(html[data-page="web-development"]) .wh-card-inner{min-height:88px}:where(html[data-page="web-development"]) .wh-capabilities{grid-template-columns:1fr 1fr;gap:20px 0}:where(html[data-page="web-development"]) .wh-capabilities li:nth-child(3){border-left:0}:where(html[data-page="web-development"]) .wh-mock-copy>strong{font-size:28px}}
@media(max-width:600px){:where(html[data-page="web-development"]) .wd-hero-upgrade{padding-top:36px}:where(html[data-page="web-development"]) .wd-hero-upgrade #rv-hero-heading{font-size:clamp(28px,6.6vw,36px);line-height:1.1}:where(html[data-page="web-development"]) .wh-intro h1>span{display:inline}:where(html[data-page="web-development"]) .wh-description{font-size:15px}:where(html[data-page="web-development"]) .wh-eyebrow{font-size:10px}:where(html[data-page="web-development"]) .wh-actions{display:grid}:where(html[data-page="web-development"]) .wh-button{font-size:13px}:where(html[data-page="web-development"]) .wh-scene{gap:32px 12px}:where(html[data-page="web-development"]) .wh-card-inner{flex-direction:column;align-items:flex-start;padding:13px;gap:9px;min-height:140px}:where(html[data-page="web-development"]) .wd-hero-upgrade .wh-card h2{font-size:15px}:where(html[data-page="web-development"]) .wh-preview{width:100%}:where(html[data-page="web-development"]) .wh-mock-nav>span{display:none}:where(html[data-page="web-development"]) .wh-browser-body{padding:14px}:where(html[data-page="web-development"]) .wh-mock-nav{margin-bottom:17px}:where(html[data-page="web-development"]) .wh-mock-grid{grid-template-columns:1.25fr 1fr}:where(html[data-page="web-development"]) .wh-mock-copy>strong{font-size:21px}:where(html[data-page="web-development"]) .wh-phone{position:relative;right:auto;bottom:auto;width:156px;margin:20px auto 0;padding-top:25px}:where(html[data-page="web-development"]) .wh-phone>strong{font-size:19px}:where(html[data-page="web-development"]) .wh-phone p{font-size:10px}:where(html[data-page="web-development"]) .wh-phone .wh-mock-cta{font-size:8px}:where(html[data-page="web-development"]) .wh-phone .wh-landscape{height:74px}:where(html[data-page="web-development"]) .wh-capabilities li{font-size:13px;padding:0 8px;gap:8px;justify-content:flex-start}:where(html[data-page="web-development"]) .wh-capabilities .wh-icon{width:34px;height:34px;font-size:20px}}
@media(max-width:359px){:where(html[data-page="web-development"]) .wh-scene{grid-template-columns:1fr;padding-inline:16px;gap:26px}:where(html[data-page="web-development"]) .wh-card-0{grid-area:1/1}:where(html[data-page="web-development"]) .wh-card-1{grid-area:2/1}:where(html[data-page="web-development"]) .wh-preview{grid-area:3/1}:where(html[data-page="web-development"]) .wh-card-2{grid-area:4/1}:where(html[data-page="web-development"]) .wh-card-3{grid-area:5/1}:where(html[data-page="web-development"]) .wh-card-inner{min-height:0;flex-direction:row;align-items:center}:where(html[data-page="web-development"]) .wh-mock-grid{grid-template-columns:1fr}:where(html[data-page="web-development"]) .wh-art{display:none}:where(html[data-page="web-development"]) .wh-capabilities{grid-template-columns:1fr}:where(html[data-page="web-development"]) .wh-capabilities li+li{border-left:0}:where(html[data-page="web-development"]) .wh-capabilities li{padding-block:5px}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="web-development"]) .wh-button{transition:none}}


/* PAGE mobile-apps */
/* mobile-apps.html embedded 1 */

    /* ==========================================================================
       KAXON TECHNOLOGIES — APP DEVELOPMENT SERVICE DESIGN SYSTEM
       Accurate implementation of approved reference design
       ========================================================================== */
    :root:where([data-page="mobile-apps"]) {
      /* Brand Color Palette */
      --color-primary-navy: #14243D;
      --color-dark-navy: #0E1B2F;
      --color-yellow: #F8C72E;
      --color-yellow-hover: #E8B61E;
      --color-yellow-light: #FFF9E5;
      --color-teal: #1FB6A6;
      --border-color: #E2E8F0;

      --page-bg: #F8F4EC;
      --cream: #FFFDF8;
      --white: #FFFFFF;
      --navy-primary: #0B2B57;
      --navy-dark: #062441;
      --navy-panel: #0A2F5A;
      --navy-panel-gradient: linear-gradient(135deg, #0A2F5A 0%, #061F3D 100%);
      
      --gold: #F7B61B;
      --gold-hover: #FFC52B;
      --gold-soft: #FFF8E6;
      
      --blue: #397FFF;
      --blue-soft: #EAF2FF;
      
      --mint: #1DC79A;
      --mint-soft: #E4F8F1;
      
      --pink: #FF5B8D;
      --pink-soft: #FFE8F0;
      
      --purple: #8B63FF;
      --purple-soft: #F0EAFF;
      
      --orange: #F5922C;
      --orange-soft: #FFF0DB;

      --text-main: #0B2B57;
      --text-secondary: #57687D;
      --text-muted: #7E92A8;
      --border: rgba(11, 43, 87, 0.08);
      --border-dark: rgba(255, 255, 255, 0.12);

      /* Typography */
      --font-heading: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-hand: 'Caveat', cursive;

      /* Radii */
      --r-sm: 8px;
      --r-md: 16px;
      --r-lg: 22px;
      --r-xl: 28px;
      --r-pill: 9999px;

      /* Shadows */
      --shadow-sm: 0 4px 12px rgba(11, 43, 87, 0.04);
      --shadow-card: 0 10px 28px rgba(11, 43, 87, 0.05);
      --shadow-hover: 0 18px 40px rgba(11, 43, 87, 0.09);
      --shadow-floating: 0 14px 32px rgba(11, 43, 87, 0.12);
      --shadow-gold: 0 10px 24px rgba(247, 182, 27, 0.32);
      --shadow-panel: 0 24px 60px rgba(7, 37, 72, 0.20);
      --shadow-lg: 0 18px 45px rgba(20, 36, 61, 0.10);

      /* Layout */
      --container-max: 1240px;
      --transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }

    :where(html[data-page="mobile-apps"]) *,:where(html[data-page="mobile-apps"])  *::before,:where(html[data-page="mobile-apps"])  *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html:where([data-page="mobile-apps"]) {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    :where(html[data-page="mobile-apps"]) body {
      font-family: var(--font-body);
      background-color: var(--page-bg);
      color: var(--text-main);
      line-height: 1.6;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    :where(html[data-page="mobile-apps"]) img,:where(html[data-page="mobile-apps"])  svg {
      max-width: 100%;
      height: auto;
      display: block;
    }

    :where(html[data-page="mobile-apps"]) a {
      text-decoration: none;
      color: inherit;
      transition: var(--transition);
    }

    :where(html[data-page="mobile-apps"]) button {
      font-family: inherit;
      border: none;
      background: none;
      cursor: pointer;
    }

    :where(html[data-page="mobile-apps"]) .container {
      width: 100%;
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ==========================================================================
       COMMON SITE NAVBAR & ACCESSIBILITY (from about.html)
       ========================================================================== */
    :where(html[data-page="mobile-apps"]) .ka-skip {
      position: fixed;
      top: 8px;
      left: 16px;
      z-index: 2000;
      padding: 12px 20px;
      background: var(--navy-primary);
      color: #FFFFFF;
      border-radius: 14px;
      transform: translateY(-160%);
      text-decoration: none;
      font-weight: 600;
      font-size: 0.875rem;
      transition: transform 0.2s ease;
    }

    :where(html[data-page="mobile-apps"]) .ka-skip:focus {
      transform: translateY(0);
      outline: 3px solid #2E82FE;
      outline-offset: 2px;
    }

    :where(html[data-page="mobile-apps"]) .ka-header {
      background: #fffdf9;
      position: sticky;
      top: 0;
      z-index: 900;
      border-bottom: 1px solid rgba(20, 36, 61, 0.06);
      transition: all 0.22s ease;
    }

    :where(html[data-page="mobile-apps"]) .ka-header.scrolled {
      background: rgba(255, 253, 249, 0.98);
      box-shadow: 0 4px 20px rgba(20, 36, 61, 0.05);
    }

    :where(html[data-page="mobile-apps"]) .ka-header-inner {
      min-height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    :where(html[data-page="mobile-apps"]) .ka-brand {
      display: inline-flex;
      flex-shrink: 0;
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: clamp(1.25rem, 2vw, 1.6rem);
      letter-spacing: -0.045em;
      line-height: 1.2;
      min-height: 44px;
      align-items: center;
      color: var(--color-primary-navy);
      text-decoration: none;
    }

    :where(html[data-page="mobile-apps"]) .ka-brand-accent {
      color: var(--color-teal);
      margin-left: 4px;
    }

    :where(html[data-page="mobile-apps"]) .ka-navigation ul {
      list-style: none;
      display: flex;
      gap: 23px;
      align-items: center;
    }

    :where(html[data-page="mobile-apps"]) .ka-navigation a {
      display: flex;
      align-items: center;
      min-height: 48px;
      font-size: 0.8125rem;
      color: var(--text-secondary);
      position: relative;
      white-space: nowrap;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s ease;
    }

    :where(html[data-page="mobile-apps"]) .ka-navigation a[aria-current] {
      font-weight: 600;
      color: var(--color-primary-navy);
    }

    :where(html[data-page="mobile-apps"]) .ka-navigation a[aria-current]::after {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--color-yellow);
      border-radius: 3px;
    }

    :where(html[data-page="mobile-apps"]) .ka-navigation a:hover {
      color: var(--color-primary-navy);
    }

    :where(html[data-page="mobile-apps"]) .ks-service-nav-label {
      display: flex;
      align-items: center;
      gap: 3px;
    }

    :where(html[data-page="mobile-apps"]) .ks-nav-service {
      position: relative;
    }

    :where(html[data-page="mobile-apps"]) .ks-dropdown summary {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      min-height: 44px;
      cursor: pointer;
      list-style: none;
    }

    :where(html[data-page="mobile-apps"]) .ks-dropdown summary::-webkit-details-marker {
      display: none;
    }

    :where(html[data-page="mobile-apps"]) .ks-dropdown > ul {
      position: absolute;
      top: 100%;
      left: -15px;
      width: 240px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: white;
      border: 1px solid var(--border-color);
      border-radius: 16px;
      box-shadow: var(--shadow-lg);
      padding: 10px;
      z-index: 30;
    }

    :where(html[data-page="mobile-apps"]) .ks-dropdown:not([open]) > ul {
      display: none;
    }

    :where(html[data-page="mobile-apps"]) .ks-dropdown > ul a {
      padding: 8px 12px;
      min-height: 44px;
      border-radius: 9px;
      font-size: 0.8125rem;
    }

    :where(html[data-page="mobile-apps"]) .ks-dropdown > ul a:hover {
      background: #F1F4F9;
    }

    :where(html[data-page="mobile-apps"]) .ks-dropdown > ul a[aria-current] {
      background: #FFF9E5;
      color: #14243D;
      font-weight: 600;
    }

    :where(html[data-page="mobile-apps"]) .ks-dropdown > ul a[aria-current]::after {
      display: none;
    }

    :where(html[data-page="mobile-apps"]) .ka-header-action .ka-button {
      min-height: 44px;
      padding: 11px 20px;
      font-size: 0.8125rem;
      white-space: nowrap;
      box-shadow: none;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      background-color: var(--color-yellow);
      color: var(--color-primary-navy);
      text-decoration: none;
      transition: var(--transition);
    }

    :where(html[data-page="mobile-apps"]) .ka-header-action .ka-button:hover {
      background-color: var(--color-yellow-hover);
      transform: translateY(-1px);
    }

    :where(html[data-page="mobile-apps"]) .ka-header-action .ka-icon {
      width: 18px;
      height: 18px;
    }

    :where(html[data-page="mobile-apps"]) .ka-menu-toggle {
      display: none;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 8px 12px;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      color: var(--color-primary-navy);
      background: white;
      cursor: pointer;
    }

    :where(html[data-page="mobile-apps"]) .ka-menu-toggle[hidden] {
      display: none;
    }

    :where(html[data-page="mobile-apps"]) .ka-menu-label {
      font-size: 0.75rem;
      font-weight: 600;
    }

    /* Responsive navigation */
    @media (max-width: 1023px) {
      :where(html[data-page="mobile-apps"]) .ka-header-inner {
        flex-wrap: wrap;
        min-height: 72px;
        padding-block: 14px;
        gap: 0 20px;
      }
      :where(html[data-page="mobile-apps"]) .ka-header-action {
        display: none;
      }
      :where(html[data-page="mobile-apps"]) .ka-menu-toggle:not([hidden]) {
        display: flex;
        margin-left: auto;
      }
      :where(html[data-page="mobile-apps"]) .ka-navigation {
        flex-basis: 100%;
        margin-top: 16px;
        border-top: 1px solid var(--border-color);
        padding-top: 12px;
      }
      :where(html[data-page="mobile-apps"]) .ka-navigation ul {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px 20px;
      }
      :where(html[data-page="mobile-apps"]) .ka-navigation a {
        white-space: normal;
      }
      :where(html[data-page="mobile-apps"]) .ka-js .ka-navigation:not(.is-open) {
        display: none;
      }
      :where(html[data-page="mobile-apps"]) .ks-service-nav-label {
        flex-wrap: wrap;
        align-items: start;
      }
      :where(html[data-page="mobile-apps"]) .ks-dropdown {
        position: static;
      }
      :where(html[data-page="mobile-apps"]) .ks-dropdown[open] {
        width: 100%;
      }
      :where(html[data-page="mobile-apps"]) .ks-dropdown > ul {
        position: static;
        width: 100%;
        padding: 6px;
        border-radius: 12px;
        box-shadow: none;
        margin-top: 4px;
      }
      :where(html[data-page="mobile-apps"]) .ks-dropdown summary {
        justify-content: flex-start;
      }
      :where(html[data-page="mobile-apps"]) .ks-dropdown > ul a {
        font-size: 0.75rem;
      }
    }

    @media (max-width: 600px) {
      :where(html[data-page="mobile-apps"]) .ka-header-inner {
        gap: 0 12px;
      }
      :where(html[data-page="mobile-apps"]) .ka-brand {
        font-size: 1.25rem;
      }
      :where(html[data-page="mobile-apps"]) .ka-menu-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }
      :where(html[data-page="mobile-apps"]) .ka-menu-toggle {
        width: 44px;
        justify-content: center;
        padding: 8px;
      }
      :where(html[data-page="mobile-apps"]) .ka-navigation ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    /* ==========================================================================
       TYPOGRAPHY & HIGHLIGHTS
       ========================================================================== */
    :where(html[data-page="mobile-apps"]) .eyebrow-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--blue);
      background: var(--blue-soft);
      padding: 6px 14px;
      border-radius: var(--r-pill);
      margin-bottom: 16px;
      border: 1px solid rgba(57, 127, 255, 0.15);
      line-height: 1.2;
    }

    :where(html[data-page="mobile-apps"]) .highlight-gold-box {
      background-color: var(--gold);
      color: var(--navy-primary);
      padding: 2px 10px;
      border-radius: var(--r-sm);
      display: inline-block;
      line-height: 1.15;
      white-space: normal;
    }

    :where(html[data-page="mobile-apps"]) .handwritten-annotation {
      font-family: var(--font-hand);
      font-size: 1.45rem;
      color: #0B4D8A;
      font-weight: 700;
      line-height: 1.15;
      pointer-events: none;
      user-select: none;
      position: absolute;
      z-index: 10;
    }

    :where(html[data-page="mobile-apps"]) .section-title {
      font-size: clamp(2.1rem, 3.8vw, 2.95rem);
      font-weight: 800;
      line-height: 1.14;
      letter-spacing: -0.025em;
      color: var(--navy-primary);
      margin-bottom: 16px;
      font-family: var(--font-heading);
    }

    :where(html[data-page="mobile-apps"]) .section-desc {
      font-size: 1.0625rem;
      color: var(--text-secondary);
      line-height: 1.65;
    }

    /* ==========================================================================
       BUTTONS
       ========================================================================== */
    :where(html[data-page="mobile-apps"]) .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-weight: 700;
      font-size: 0.9375rem;
      padding: 14px 28px;
      border-radius: var(--r-pill);
      transition: var(--transition);
      white-space: nowrap;
      line-height: 1;
      cursor: pointer;
    }

    :where(html[data-page="mobile-apps"]) .btn:hover {
      transform: translateY(-2px);
    }
    :where(html[data-page="mobile-apps"]) .btn:active {
      transform: translateY(0) scale(0.99);
    }

    :where(html[data-page="mobile-apps"]) .btn-gold {
      background-color: var(--gold);
      color: var(--navy-primary);
      box-shadow: var(--shadow-gold);
      font-weight: 800;
    }
    :where(html[data-page="mobile-apps"]) .btn-gold:hover {
      background-color: var(--gold-hover);
      box-shadow: 0 14px 30px rgba(247, 182, 27, 0.42);
    }

    :where(html[data-page="mobile-apps"]) .btn-navy {
      background-color: var(--navy-primary);
      color: var(--white);
    }
    :where(html[data-page="mobile-apps"]) .btn-navy:hover {
      background-color: var(--navy-dark);
      box-shadow: 0 8px 22px rgba(11, 43, 87, 0.25);
    }

    :where(html[data-page="mobile-apps"]) .btn-outline {
      border: 1.5px solid rgba(11, 43, 87, 0.2);
      background-color: var(--white);
      color: var(--navy-primary);
    }
    :where(html[data-page="mobile-apps"]) .btn-outline:hover {
      border-color: var(--navy-primary);
      box-shadow: var(--shadow-card);
    }

    :where(html[data-page="mobile-apps"]) .btn-ghost-dark {
      background-color: transparent;
      color: var(--navy-primary);
      border: 1.5px solid rgba(11, 43, 87, 0.25);
      font-weight: 700;
      padding: 12px 24px;
    }
    :where(html[data-page="mobile-apps"]) .btn-ghost-dark:hover {
      background-color: rgba(11, 43, 87, 0.05);
      border-color: var(--navy-primary);
    }

    :where(html[data-page="mobile-apps"]) .btn-circle-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      background-color: var(--navy-primary);
      color: var(--white);
      border-radius: 50%;
      font-size: 0.85rem;
      margin-left: 2px;
      transition: var(--transition);
    }

    :where(html[data-page="mobile-apps"]) .btn-gold:hover .btn-circle-icon {
      transform: translateX(2px);
    }

    /* ==========================================================================
       HERO SECTION
       ========================================================================== */
    :where(html[data-page="mobile-apps"]) .hero-section {
      padding-top: 56px;
      padding-bottom: 64px;
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="mobile-apps"]) .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 56px;
      align-items: center;
    }

    :where(html[data-page="mobile-apps"]) .hero-left {
      position: relative;
      z-index: 2;
    }

    :where(html[data-page="mobile-apps"]) .hero-title {
      font-family: var(--font-heading);
      font-size: clamp(2.4rem, 4.4vw, 3.65rem);
      font-weight: 900;
      line-height: 1.12;
      letter-spacing: -0.03em;
      color: var(--navy-primary);
      margin-bottom: 20px;
    }

    :where(html[data-page="mobile-apps"]) .hero-desc {
      font-size: 1.125rem;
      color: var(--text-secondary);
      line-height: 1.65;
      margin-bottom: 32px;
      max-width: 540px;
    }

    :where(html[data-page="mobile-apps"]) .hero-cta-group {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 44px;
    }

    :where(html[data-page="mobile-apps"]) .hero-benefits-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      padding-top: 16px;
      border-top: 1px solid rgba(11, 43, 87, 0.08);
    }

    :where(html[data-page="mobile-apps"]) .hero-benefit-item {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    :where(html[data-page="mobile-apps"]) .benefit-icon-badge {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
    }

    :where(html[data-page="mobile-apps"]) .benefit-icon-badge.mint { background: var(--mint-soft); color: var(--mint); }
    :where(html[data-page="mobile-apps"]) .benefit-icon-badge.blue { background: var(--blue-soft); color: var(--blue); }
    :where(html[data-page="mobile-apps"]) .benefit-icon-badge.orange { background: var(--orange-soft); color: var(--orange); }
    :where(html[data-page="mobile-apps"]) .benefit-icon-badge.purple { background: var(--purple-soft); color: var(--purple); }

    :where(html[data-page="mobile-apps"]) .benefit-meta h4 {
      font-size: 0.825rem;
      font-weight: 800;
      color: var(--navy-primary);
      line-height: 1.15;
    }

    :where(html[data-page="mobile-apps"]) .benefit-meta p {
      font-size: 0.725rem;
      color: var(--text-muted);
      line-height: 1.2;
    }

    /* Hero Right Visual Composition */
    :where(html[data-page="mobile-apps"]) .hero-visual-wrapper {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    :where(html[data-page="mobile-apps"]) .hero-sun-backing {
      position: absolute;
      top: 6%;
      right: 4%;
      width: 82%;
      height: 88%;
      background: #FCE8A2;
      border-radius: 36px 36px 70px 36px;
      z-index: 1;
      transform: rotate(1.5deg);
    }

    :where(html[data-page="mobile-apps"]) .hero-developer-frame {
      position: relative;
      z-index: 2;
      width: 78%;
      max-width: 440px;
      border-radius: 28px;
      overflow: hidden;
      box-shadow: var(--shadow-panel);
      aspect-ratio: 4 / 4.4;
      background: #fff;
    }

    :where(html[data-page="mobile-apps"]) .hero-developer-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }

    /* Floating UI Badges */
    :where(html[data-page="mobile-apps"]) .hero-badge {
      position: absolute;
      z-index: 5;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 10px 16px;
      border-radius: var(--r-md);
      box-shadow: var(--shadow-floating);
      border: 1px solid rgba(255, 255, 255, 0.8);
      display: flex;
      align-items: center;
      gap: 12px;
      transition: var(--transition);
      animation: page-mobile-apps-floatSlow 4s ease-in-out infinite alternate;
    }

    :where(html[data-page="mobile-apps"]) .hero-badge:hover {
      transform: translateY(-4px) scale(1.02);
    }

    :where(html[data-page="mobile-apps"]) .hero-badge-ios {
      top: 2%;
      left: 6%;
      animation-delay: 0s;
    }

    :where(html[data-page="mobile-apps"]) .hero-badge-android {
      top: 22%;
      right: -2%;
      animation-delay: 1.2s;
    }

    :where(html[data-page="mobile-apps"]) .hero-badge-phone {
      bottom: 6%;
      left: -6%;
      width: 220px;
      padding: 10px;
      border-radius: 20px;
      background: #0E1B2F;
      border: 2px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 20px 45px rgba(0,0,0,0.35);
      animation-delay: 0.6s;
    }

    :where(html[data-page="mobile-apps"]) .hero-badge-webapp {
      bottom: 2%;
      right: 4%;
      animation-delay: 1.8s;
    }

    :where(html[data-page="mobile-apps"]) .badge-icon-wrap {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      flex-shrink: 0;
    }

    :where(html[data-page="mobile-apps"]) .badge-icon-wrap.ios { background: #000; color: #fff; }
    :where(html[data-page="mobile-apps"]) .badge-icon-wrap.android { background: #E8F8EE; color: #3DDC84; }
    :where(html[data-page="mobile-apps"]) .badge-icon-wrap.web { background: var(--blue-soft); color: var(--blue); }

    :where(html[data-page="mobile-apps"]) .badge-info h4 {
      font-size: 0.85rem;
      font-weight: 800;
      color: var(--navy-primary);
      line-height: 1.2;
    }

    :where(html[data-page="mobile-apps"]) .badge-info p {
      font-size: 0.725rem;
      color: var(--text-muted);
      font-weight: 500;
    }

    /* Floating Phone Inside Hero Mockup */
    :where(html[data-page="mobile-apps"]) .mini-phone-screen {
      background: #14243D;
      border-radius: 14px;
      padding: 12px;
      color: #fff;
    }

    :where(html[data-page="mobile-apps"]) .mini-phone-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 0.7rem;
      color: #9FB3C8;
    }

    :where(html[data-page="mobile-apps"]) .mini-phone-metric {
      font-size: 1.15rem;
      font-weight: 800;
      color: #fff;
      line-height: 1.1;
      margin-bottom: 6px;
    }

    :where(html[data-page="mobile-apps"]) .mini-phone-bar {
      height: 6px;
      background: rgba(255,255,255,0.12);
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 6px;
    }

    :where(html[data-page="mobile-apps"]) .mini-phone-bar-fill {
      height: 100%;
      width: 78%;
      background: linear-gradient(90deg, var(--mint), var(--gold));
      border-radius: 4px;
    }

    :where(html[data-page="mobile-apps"]) .mini-phone-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.65rem;
      color: var(--mint);
      font-weight: 700;
    }

    /* Handwritten hero annotation */
    :where(html[data-page="mobile-apps"]) .hero-hand-annotation {
      top: -12px;
      right: 18px;
      text-align: right;
      color: #0B4D8A;
      transform: rotate(3deg);
    }

    :where(html[data-page="mobile-apps"]) .hero-hand-annotation svg {
      width: 44px;
      height: 38px;
      margin-left: auto;
      margin-top: 4px;
      transform: rotate(-10deg);
    }

    @keyframes page-mobile-apps-floatSlow {
      0% { transform: translateY(0); }
      100% { transform: translateY(-8px); }
    }

    /* ==========================================================================
       TRUSTED BY BUSINESSES (SOCIAL PROOF STRIP)
       ========================================================================== */
    :where(html[data-page="mobile-apps"]) .trust-strip-section {
      padding: 36px 0;
      border-top: 1px solid rgba(11, 43, 87, 0.06);
      border-bottom: 1px solid rgba(11, 43, 87, 0.06);
      background: rgba(255, 255, 255, 0.4);
    }

    :where(html[data-page="mobile-apps"]) .trust-strip-label {
      text-align: center;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--blue);
      margin-bottom: 24px;
    }

    :where(html[data-page="mobile-apps"]) .trust-logos-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 48px;
    }

    :where(html[data-page="mobile-apps"]) .trust-logo-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 1.15rem;
      font-weight: 800;
      color: #37475A;
      opacity: 0.85;
      transition: var(--transition);
    }

    :where(html[data-page="mobile-apps"]) .trust-logo-item:hover {
      opacity: 1;
      transform: translateY(-2px);
    }

    :where(html[data-page="mobile-apps"]) .trust-logo-tata { font-family: var(--font-heading); font-weight: 900; letter-spacing: 0.15em; font-size: 1.25rem; color: #004F9E; }
    :where(html[data-page="mobile-apps"]) .trust-logo-bms { font-family: var(--font-heading); font-weight: 800; color: #EC1C24; }
    :where(html[data-page="mobile-apps"]) .trust-logo-ola { font-family: var(--font-heading); font-weight: 900; letter-spacing: -0.05em; color: #000; display: flex; align-items: center; gap: 4px; }
    :where(html[data-page="mobile-apps"]) .trust-logo-cred { font-family: var(--font-heading); font-weight: 900; letter-spacing: 0.08em; color: #1B1B1B; }
    :where(html[data-page="mobile-apps"]) .trust-logo-zomato { font-family: var(--font-heading); font-weight: 900; font-style: italic; color: #E23744; font-size: 1.3rem; }
    :where(html[data-page="mobile-apps"]) .trust-logo-flipkart { font-family: var(--font-heading); font-weight: 800; color: #2874F0; }
    :where(html[data-page="mobile-apps"]) .trust-logo-byjus { font-family: var(--font-heading); font-weight: 800; color: #813588; }
    :where(html[data-page="mobile-apps"]) .trust-logo-npci { font-family: var(--font-heading); font-weight: 900; letter-spacing: 0.05em; color: #0076CE; }

    /* ==========================================================================
       SECTION 3: WHAT WE BUILD (SOLUTIONS)
       ========================================================================== */
    :where(html[data-page="mobile-apps"]) .solutions-section {
      padding: 96px 0;
      position: relative;
    }

    :where(html[data-page="mobile-apps"]) .section-header-center {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 56px;
      position: relative;
    }

    :where(html[data-page="mobile-apps"]) .solutions-grid-6 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    :where(html[data-page="mobile-apps"]) .solution-card {
      background: var(--white);
      border-radius: var(--r-xl);
      padding: 36px 32px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
      display: flex;
      flex-direction: column;
      position: relative;
    }

    :where(html[data-page="mobile-apps"]) .solution-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(57, 127, 255, 0.25);
    }

    :where(html[data-page="mobile-apps"]) .solution-icon-box {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      margin-bottom: 22px;
    }

    :where(html[data-page="mobile-apps"]) .solution-icon-box.pink { background: var(--pink-soft); color: var(--pink); }
    :where(html[data-page="mobile-apps"]) .solution-icon-box.blue { background: var(--blue-soft); color: var(--blue); }
    :where(html[data-page="mobile-apps"]) .solution-icon-box.mint { background: var(--mint-soft); color: var(--mint); }
    :where(html[data-page="mobile-apps"]) .solution-icon-box.purple { background: var(--purple-soft); color: var(--purple); }
    :where(html[data-page="mobile-apps"]) .solution-icon-box.orange { background: var(--orange-soft); color: var(--orange); }

    :where(html[data-page="mobile-apps"]) .solution-title {
      font-size: 1.3rem;
      font-weight: 800;
      color: var(--navy-primary);
      margin-bottom: 6px;
      line-height: 1.25;
      font-family: var(--font-heading);
    }

    :where(html[data-page="mobile-apps"]) .solution-subtitle {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 12px;
    }

    :where(html[data-page="mobile-apps"]) .solution-desc {
      font-size: 0.95rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    /* ==========================================================================
       SECTION 4: FEATURED CASE STUDY (DARK PANEL)
       ========================================================================== */
    :where(html[data-page="mobile-apps"]) .case-study-section {
      padding: 40px 0 96px;
    }

    :where(html[data-page="mobile-apps"]) .case-study-panel {
      background: var(--navy-panel);
      background-image: var(--navy-panel-gradient);
      border-radius: 36px;
      padding: 64px 60px;
      color: var(--white);
      box-shadow: var(--shadow-panel);
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="mobile-apps"]) .case-study-panel::after {
      content: '';
      position: absolute;
      top: -100px;
      right: -100px;
      width: 450px;
      height: 450px;
      background: radial-gradient(circle, rgba(29, 199, 154, 0.15) 0%, transparent 70%);
      pointer-events: none;
    }

    :where(html[data-page="mobile-apps"]) .case-study-grid {
      display: grid;
      grid-template-columns: 1.15fr 1.1fr 0.95fr;
      gap: 40px;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    :where(html[data-page="mobile-apps"]) .case-eyebrow {
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--mint);
      margin-bottom: 16px;
      display: inline-block;
    }

    :where(html[data-page="mobile-apps"]) .case-title {
      font-family: var(--font-heading);
      font-size: clamp(2rem, 3.4vw, 2.75rem);
      font-weight: 900;
      line-height: 1.15;
      letter-spacing: -0.025em;
      color: var(--white);
      margin-bottom: 18px;
    }

    :where(html[data-page="mobile-apps"]) .case-desc {
      font-size: 1.05rem;
      color: #B8D0E8;
      line-height: 1.65;
      margin-bottom: 32px;
    }

    :where(html[data-page="mobile-apps"]) .case-visual-wrap {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    :where(html[data-page="mobile-apps"]) .case-visual-img {
      width: 100%;
      max-width: 360px;
      border-radius: 24px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
      transition: var(--transition);
    }

    :where(html[data-page="mobile-apps"]) .case-visual-img:hover {
      transform: translateY(-4px) scale(1.02);
    }

    :where(html[data-page="mobile-apps"]) .case-metrics-list {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    :where(html[data-page="mobile-apps"]) .case-metric-card {
      background: rgba(255, 255, 255, 0.07);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--r-lg);
      padding: 18px 22px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: var(--transition);
    }

    :where(html[data-page="mobile-apps"]) .case-metric-card:hover {
      background: rgba(255, 255, 255, 0.12);
      transform: translateX(4px);
    }

    :where(html[data-page="mobile-apps"]) .metric-icon-box {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35rem;
      flex-shrink: 0;
    }

    :where(html[data-page="mobile-apps"]) .metric-icon-box.gold { background: rgba(247, 182, 27, 0.2); color: var(--gold); }
    :where(html[data-page="mobile-apps"]) .metric-icon-box.yellow { background: rgba(255, 197, 43, 0.2); color: #FFC52B; }
    :where(html[data-page="mobile-apps"]) .metric-icon-box.mint { background: rgba(29, 199, 154, 0.2); color: var(--mint); }
    :where(html[data-page="mobile-apps"]) .metric-icon-box.blue { background: rgba(57, 127, 255, 0.2); color: var(--blue); }

    :where(html[data-page="mobile-apps"]) .metric-val {
      font-size: 1.5rem;
      font-weight: 900;
      color: var(--white);
      line-height: 1.1;
      font-family: var(--font-heading);
    }

    :where(html[data-page="mobile-apps"]) .metric-label {
      font-size: 0.8125rem;
      color: #9FB8D4;
      font-weight: 500;
    }

    /* ==========================================================================
       SECTION 5: APP DEVELOPMENT PROCESS (6 STEPS)
       ========================================================================== */
    :where(html[data-page="mobile-apps"]) .process-section {
      padding: 96px 0;
      position: relative;
    }

    :where(html[data-page="mobile-apps"]) .process-grid-6 {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
      position: relative;
    }

    :where(html[data-page="mobile-apps"]) .process-card {
      background: var(--white);
      border-radius: var(--r-xl);
      padding: 28px 20px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      text-align: left;
      position: relative;
      transition: var(--transition);
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="mobile-apps"]) .process-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(57, 127, 255, 0.3);
    }

    :where(html[data-page="mobile-apps"]) .process-badge-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
    }

    :where(html[data-page="mobile-apps"]) .process-num-badge {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      flex-shrink: 0;
    }

    :where(html[data-page="mobile-apps"]) .process-num-badge.blue { background: var(--blue-soft); color: var(--blue); }
    :where(html[data-page="mobile-apps"]) .process-num-badge.yellow { background: var(--gold-soft); color: #C98800; }
    :where(html[data-page="mobile-apps"]) .process-num-badge.pink { background: var(--pink-soft); color: var(--pink); }
    :where(html[data-page="mobile-apps"]) .process-num-badge.mint { background: var(--mint-soft); color: var(--mint); }
    :where(html[data-page="mobile-apps"]) .process-num-badge.cyan { background: #E6F7FF; color: #0099FF; }
    :where(html[data-page="mobile-apps"]) .process-num-badge.purple { background: var(--purple-soft); color: var(--purple); }

    :where(html[data-page="mobile-apps"]) .process-step-num {
      font-size: 0.8rem;
      font-weight: 800;
      color: var(--text-muted);
      letter-spacing: 0.05em;
    }

    :where(html[data-page="mobile-apps"]) .process-step-title {
      font-size: 1.15rem;
      font-weight: 800;
      color: var(--navy-primary);
      margin-bottom: 8px;
      line-height: 1.2;
      font-family: var(--font-heading);
    }

    :where(html[data-page="mobile-apps"]) .process-step-desc {
      font-size: 0.875rem;
      color: var(--text-secondary);
      line-height: 1.55;
    }

    /* ==========================================================================
       SECTION 6: WHY CHOOSE KAXON (LONG-TERM PARTNER)
       ========================================================================== */
    :where(html[data-page="mobile-apps"]) .why-section {
      padding: 96px 0;
      background: rgba(255, 255, 255, 0.5);
      border-top: 1px solid rgba(11, 43, 87, 0.06);
      border-bottom: 1px solid rgba(11, 43, 87, 0.06);
    }

    :where(html[data-page="mobile-apps"]) .why-grid {
      display: grid;
      grid-template-columns: 1fr 1.35fr;
      gap: 64px;
      align-items: center;
    }

    :where(html[data-page="mobile-apps"]) .why-cards-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    :where(html[data-page="mobile-apps"]) .why-card {
      background: var(--white);
      border-radius: var(--r-xl);
      padding: 24px 22px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      display: flex;
      gap: 16px;
      transition: var(--transition);
    }

    :where(html[data-page="mobile-apps"]) .why-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(57, 127, 255, 0.25);
    }

    :where(html[data-page="mobile-apps"]) .why-icon-box {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35rem;
      flex-shrink: 0;
    }

    :where(html[data-page="mobile-apps"]) .why-icon-box.mint { background: var(--mint-soft); color: var(--mint); }
    :where(html[data-page="mobile-apps"]) .why-icon-box.yellow { background: var(--gold-soft); color: #C98800; }
    :where(html[data-page="mobile-apps"]) .why-icon-box.blue { background: var(--blue-soft); color: var(--blue); }
    :where(html[data-page="mobile-apps"]) .why-icon-box.pink { background: var(--pink-soft); color: var(--pink); }
    :where(html[data-page="mobile-apps"]) .why-icon-box.purple { background: var(--purple-soft); color: var(--purple); }
    :where(html[data-page="mobile-apps"]) .why-icon-box.cyan { background: var(--blue-soft); color: var(--blue); }

    :where(html[data-page="mobile-apps"]) .why-content h3 {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--navy-primary);
      margin-bottom: 4px;
      line-height: 1.25;
      font-family: var(--font-heading);
    }

    :where(html[data-page="mobile-apps"]) .why-content p {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    /* ==========================================================================
       SECTION 7: TECHNOLOGIES WE WORK WITH
       ========================================================================== */
    :where(html[data-page="mobile-apps"]) .tech-section {
      padding: 96px 0;
      text-align: center;
      position: relative;
    }

    :where(html[data-page="mobile-apps"]) .tech-grid-7 {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 16px;
      margin-top: 48px;
    }

    :where(html[data-page="mobile-apps"]) .tech-card {
      background: var(--white);
      border-radius: var(--r-xl);
      padding: 24px 16px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      transition: var(--transition);
    }

    :where(html[data-page="mobile-apps"]) .tech-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(57, 127, 255, 0.3);
    }

    :where(html[data-page="mobile-apps"]) .tech-icon-wrap {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.85rem;
    }

    :where(html[data-page="mobile-apps"]) .tech-name {
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--navy-primary);
      line-height: 1.2;
      font-family: var(--font-heading);
    }

    :where(html[data-page="mobile-apps"]) .tech-sublabel {
      font-size: 0.75rem;
      color: var(--text-muted);
      font-weight: 600;
    }

    /* ==========================================================================
       SECTION 8: INDUSTRIES WE BUILD APPS FOR
       ========================================================================== */
    :where(html[data-page="mobile-apps"]) .industries-section {
      padding: 96px 0;
      background: rgba(255, 255, 255, 0.4);
      border-top: 1px solid rgba(11, 43, 87, 0.06);
    }

    :where(html[data-page="mobile-apps"]) .industries-grid-7 {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 14px;
      margin-top: 48px;
    }

    :where(html[data-page="mobile-apps"]) .industry-card {
      background: var(--white);
      border-radius: var(--r-xl);
      padding: 22px 14px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      transition: var(--transition);
    }

    :where(html[data-page="mobile-apps"]) .industry-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(57, 127, 255, 0.25);
    }

    :where(html[data-page="mobile-apps"]) .industry-icon-wrap {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.45rem;
    }

    :where(html[data-page="mobile-apps"]) .industry-name {
      font-size: 0.925rem;
      font-weight: 800;
      color: var(--navy-primary);
      line-height: 1.2;
      font-family: var(--font-heading);
    }

    :where(html[data-page="mobile-apps"]) .industry-sublabel {
      font-size: 0.725rem;
      color: var(--text-muted);
      line-height: 1.3;
    }

    /* ==========================================================================
       SECTION 9: FREQUENTLY ASKED QUESTIONS (FAQ)
       ========================================================================== */
    :where(html[data-page="mobile-apps"]) .faq-section {
      padding: 96px 0;
      position: relative;
    }

    :where(html[data-page="mobile-apps"]) .faq-header-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 56px;
      flex-wrap: wrap;
      gap: 24px;
    }

    :where(html[data-page="mobile-apps"]) .faq-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    :where(html[data-page="mobile-apps"]) .faq-col {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    :where(html[data-page="mobile-apps"]) .faq-item {
      background: var(--white);
      border-radius: var(--r-lg);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      transition: var(--transition);
    }

    :where(html[data-page="mobile-apps"]) .faq-item:hover {
      border-color: rgba(57, 127, 255, 0.25);
      box-shadow: var(--shadow-card);
    }

    :where(html[data-page="mobile-apps"]) .faq-item.active {
      border-color: var(--blue);
      box-shadow: var(--shadow-hover);
    }

    :where(html[data-page="mobile-apps"]) .faq-trigger {
      width: 100%;
      text-align: left;
      padding: 20px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      cursor: pointer;
      background: transparent;
      border: none;
      font-family: inherit;
    }

    :where(html[data-page="mobile-apps"]) .faq-trigger-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    :where(html[data-page="mobile-apps"]) .faq-icon-box {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
      flex-shrink: 0;
    }

    :where(html[data-page="mobile-apps"]) .faq-icon-box.blue { background: var(--blue-soft); color: var(--blue); }
    :where(html[data-page="mobile-apps"]) .faq-icon-box.pink { background: var(--pink-soft); color: var(--pink); }
    :where(html[data-page="mobile-apps"]) .faq-icon-box.red { background: #FFE8E8; color: #FF4D4F; }
    :where(html[data-page="mobile-apps"]) .faq-icon-box.purple { background: var(--purple-soft); color: var(--purple); }
    :where(html[data-page="mobile-apps"]) .faq-icon-box.teal { background: var(--mint-soft); color: var(--mint); }

    :where(html[data-page="mobile-apps"]) .faq-question-title {
      font-size: 0.985rem;
      font-weight: 700;
      color: var(--navy-primary);
      line-height: 1.35;
    }

    :where(html[data-page="mobile-apps"]) .faq-expand-icon {
      font-size: 1.25rem;
      color: var(--navy-primary);
      transition: transform 0.25s ease;
      flex-shrink: 0;
    }

    :where(html[data-page="mobile-apps"]) .faq-item.active .faq-expand-icon {
      transform: rotate(45deg);
      color: var(--blue);
    }

    :where(html[data-page="mobile-apps"]) .faq-answer-panel {
      padding: 0 22px 20px 70px;
      display: none;
      font-size: 0.925rem;
      color: var(--text-secondary);
      line-height: 1.65;
    }

    :where(html[data-page="mobile-apps"]) .faq-item.active .faq-answer-panel {
      display: block;
    }

    /* ==========================================================================
       SECTION 10: BOTTOM CALL TO ACTION BANNER
       ========================================================================== */
    :where(html[data-page="mobile-apps"]) .cta-banner-section {
      padding: 20px 0 96px;
    }

    :where(html[data-page="mobile-apps"]) .cta-dark-banner {
      background: var(--navy-panel);
      background-image: var(--navy-panel-gradient);
      border-radius: 36px;
      padding: 64px 64px;
      color: var(--white);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: var(--shadow-panel);
    }

    :where(html[data-page="mobile-apps"]) .cta-dark-banner::before {
      content: '';
      position: absolute;
      bottom: -80px;
      left: 30%;
      width: 350px;
      height: 350px;
      background: radial-gradient(circle, rgba(247, 182, 27, 0.18) 0%, transparent 70%);
      pointer-events: none;
    }

    :where(html[data-page="mobile-apps"]) .cta-banner-left {
      max-width: 620px;
      position: relative;
      z-index: 2;
    }

    :where(html[data-page="mobile-apps"]) .cta-banner-eyebrow {
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 12px;
      display: inline-block;
    }

    :where(html[data-page="mobile-apps"]) .cta-banner-title {
      font-family: var(--font-heading);
      font-size: clamp(2.1rem, 3.8vw, 3rem);
      font-weight: 900;
      line-height: 1.15;
      margin-bottom: 16px;
      letter-spacing: -0.025em;
    }

    :where(html[data-page="mobile-apps"]) .cta-banner-desc {
      font-size: 1.0625rem;
      color: #B8D3F2;
      line-height: 1.6;
    }

    :where(html[data-page="mobile-apps"]) .cta-banner-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      position: relative;
      z-index: 2;
      flex-shrink: 0;
      padding-top: 16px;
    }

    :where(html[data-page="mobile-apps"]) .cta-microcopy {
      font-size: 0.8125rem;
      color: #94BBE8;
    }

    :where(html[data-page="mobile-apps"]) .cta-hand-annotation {
      position: absolute;
      top: 20px;
      right: 48px;
      color: var(--gold);
      transform: rotate(-3deg);
      text-align: right;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      z-index: 5;
    }

    :where(html[data-page="mobile-apps"]) .cta-hand-text {
      font-family: var(--font-hand);
      font-size: 1.45rem;
      font-weight: 700;
      line-height: 1.05;
      color: var(--gold);
    }

    :where(html[data-page="mobile-apps"]) .cta-hand-annotation svg {
      width: 44px;
      height: 36px;
      margin-top: 2px;
      margin-right: 14px;
      color: var(--gold);
    }

    /* ==========================================================================
       FOOTER
       ========================================================================== */
    :where(html[data-page="mobile-apps"]) .site-footer {
      background-color: var(--navy-primary);
      color: var(--white);
      padding: 72px 0 32px;
      margin-top: auto;
    }

    :where(html[data-page="mobile-apps"]) .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 48px;
    }

    :where(html[data-page="mobile-apps"]) .footer-brand-title {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 14px;
      font-family: var(--font-heading);
    }

    :where(html[data-page="mobile-apps"]) .footer-brand-title .accent-word {
      color: var(--mint);
    }

    :where(html[data-page="mobile-apps"]) .footer-brand-desc {
      font-size: 0.875rem;
      color: #9FB3C8;
      line-height: 1.6;
      margin-bottom: 20px;
      max-width: 300px;
    }

    :where(html[data-page="mobile-apps"]) .footer-contact-link {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.875rem;
      color: #C2D6EC;
      margin-bottom: 8px;
    }

    :where(html[data-page="mobile-apps"]) .footer-col-title {
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--white);
      letter-spacing: 0.04em;
      margin-bottom: 20px;
      font-family: var(--font-heading);
    }

    :where(html[data-page="mobile-apps"]) .footer-nav-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    :where(html[data-page="mobile-apps"]) .footer-nav-list a {
      font-size: 0.875rem;
      color: #9FB3C8;
    }

    :where(html[data-page="mobile-apps"]) .footer-nav-list a:hover {
      color: var(--gold);
    }

    :where(html[data-page="mobile-apps"]) .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.8125rem;
      color: #7E96B0;
      flex-wrap: wrap;
      gap: 12px;
    }

    /* ==========================================================================
       RESPONSIVE BREAKPOINTS (TABLET & MOBILE)
       ========================================================================== */
    @media (max-width: 1200px) {
      :where(html[data-page="mobile-apps"]) .process-grid-6 {
        grid-template-columns: repeat(3, 1fr);
      }
      :where(html[data-page="mobile-apps"]) .tech-grid-7,:where(html[data-page="mobile-apps"]) 
      .industries-grid-7 {
        grid-template-columns: repeat(4, 1fr);
      }
      :where(html[data-page="mobile-apps"]) .case-study-grid {
        grid-template-columns: 1fr 1fr;
      }
      :where(html[data-page="mobile-apps"]) .case-study-grid > .case-metrics-list {
        grid-column: span 2;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 1024px) {
      :where(html[data-page="mobile-apps"]) .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }
      :where(html[data-page="mobile-apps"]) .hero-left {
        max-width: 100%;
      }
      :where(html[data-page="mobile-apps"]) .solutions-grid-6 {
        grid-template-columns: repeat(2, 1fr);
      }
      :where(html[data-page="mobile-apps"]) .why-grid {
        grid-template-columns: 1fr;
        gap: 36px;
      }
      :where(html[data-page="mobile-apps"]) .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
      }
      :where(html[data-page="mobile-apps"]) .handwritten-annotation,:where(html[data-page="mobile-apps"]) 
      .cta-hand-annotation {
        display: none;
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="mobile-apps"]) .hero-section {
        padding-top: 36px;
        padding-bottom: 44px;
      }
      :where(html[data-page="mobile-apps"]) .hero-title {
        font-size: 2.25rem;
      }
      :where(html[data-page="mobile-apps"]) .hero-benefits-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
      }
      :where(html[data-page="mobile-apps"]) .hero-badge-ios { top: 0%; left: 0%; }
      :where(html[data-page="mobile-apps"]) .hero-badge-android { top: 28%; right: -4%; }
      :where(html[data-page="mobile-apps"]) .hero-badge-phone { bottom: 0%; left: 0%; width: 190px; }
      :where(html[data-page="mobile-apps"]) .hero-badge-webapp { bottom: 0%; right: 0%; }

      :where(html[data-page="mobile-apps"]) .solutions-grid-6 {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="mobile-apps"]) .case-study-panel {
        padding: 40px 24px;
        border-radius: 24px;
      }
      :where(html[data-page="mobile-apps"]) .case-study-grid {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="mobile-apps"]) .case-study-grid > .case-metrics-list {
        grid-column: span 1;
        grid-template-columns: 1fr;
      }
      :where(html[data-page="mobile-apps"]) .process-grid-6 {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="mobile-apps"]) .why-cards-grid {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="mobile-apps"]) .tech-grid-7,:where(html[data-page="mobile-apps"]) 
      .industries-grid-7 {
        grid-template-columns: repeat(2, 1fr);
      }
      :where(html[data-page="mobile-apps"]) .faq-grid-2 {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="mobile-apps"]) .cta-dark-banner {
        flex-direction: column;
        text-align: center;
        padding: 44px 24px;
        gap: 32px;
      }
      :where(html[data-page="mobile-apps"]) .cta-banner-right {
        width: 100%;
      }
      :where(html[data-page="mobile-apps"]) .cta-banner-right .btn {
        width: 100%;
      }
      :where(html[data-page="mobile-apps"]) .footer-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      :where(html[data-page="mobile-apps"]) *,:where(html[data-page="mobile-apps"])  *::before,:where(html[data-page="mobile-apps"])  *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ============================================================
       KAXON APP TECH STACK — Scoped Premium Section
       ============================================================ */
    :where(html[data-page="mobile-apps"]) .kaxon-app-tech-stack {
      background: #FFFDF8;
      padding: 96px 0 104px;
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="mobile-apps"]) .kaxon-app-tech-stack::before {
      content: '';
      position: absolute;
      top: -120px;
      right: -180px;
      width: 520px;
      height: 520px;
      background: radial-gradient(circle, rgba(247, 182, 27, 0.07) 0%, transparent 68%);
      pointer-events: none;
    }

    :where(html[data-page="mobile-apps"]) .kaxon-app-tech-stack .kats-container {
      width: calc(100% - 80px);
      max-width: 1240px;
      margin: 0 auto;
    }

    /* Two-column layout */
    :where(html[data-page="mobile-apps"]) .kats-layout {
      display: grid;
      grid-template-columns: 1fr 1.45fr;
      gap: 72px;
      align-items: start;
    }

    /* ── LEFT: Editorial Narrative ── */
    :where(html[data-page="mobile-apps"]) .kats-left {
      position: sticky;
      top: 100px;
    }

    :where(html[data-page="mobile-apps"]) .kats-eyebrow {
      font: 700 11px/1.4 Inter, sans-serif;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #426078;
      margin-bottom: 18px;
      display: block;
    }

    :where(html[data-page="mobile-apps"]) .kats-headline {
      font-family: Manrope, sans-serif;
      font-size: clamp(2rem, 3.2vw, 2.75rem);
      font-weight: 800;
      line-height: 1.14;
      letter-spacing: -0.04em;
      color: #0B2B57;
      margin: 0 0 22px;
    }

    :where(html[data-page="mobile-apps"]) .kats-headline em {
      font-style: normal;
      color: #1DC79A;
    }

    :where(html[data-page="mobile-apps"]) .kats-body {
      font: 400 1.0625rem/1.72 'Plus Jakarta Sans', Inter, sans-serif;
      color: #57687D;
      max-width: 42ch;
      margin: 0 0 32px;
    }

    :where(html[data-page="mobile-apps"]) .kats-promise {
      display: flex;
      align-items: flex-start;
      gap: 13px;
      padding: 20px 22px;
      background: rgba(29, 199, 154, 0.07);
      border: 1px solid rgba(29, 199, 154, 0.2);
      border-radius: 18px;
      margin-bottom: 36px;
    }

    :where(html[data-page="mobile-apps"]) .kats-promise-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(29, 199, 154, 0.15);
      color: #1DC79A;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    :where(html[data-page="mobile-apps"]) .kats-promise-text {
      font: 600 0.9rem/1.55 Inter, sans-serif;
      color: #0B2B57;
    }

    :where(html[data-page="mobile-apps"]) .kats-promise-text span {
      display: block;
      font-weight: 400;
      font-size: 0.825rem;
      color: #57687D;
      margin-top: 3px;
    }

    :where(html[data-page="mobile-apps"]) .kats-hand-note {
      font: 600 22px/1.3 Caveat, cursive;
      color: #9a650d;
      transform: rotate(-2.5deg);
      display: inline-block;
      margin-top: 8px;
    }

    /* ── RIGHT: Stack Panels ── */
    :where(html[data-page="mobile-apps"]) .kats-panels {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    :where(html[data-page="mobile-apps"]) .kats-panel {
      border-radius: 24px;
      padding: 30px 32px;
      border: 1px solid rgba(11, 43, 87, 0.07);
      box-shadow: 0 8px 24px rgba(11, 43, 87, 0.045);
      transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="mobile-apps"]) .kats-panel:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 44px rgba(11, 43, 87, 0.09);
    }

    /* Panel tint themes */
    :where(html[data-page="mobile-apps"]) .kats-panel--cross   { background: rgba(57, 127, 255, 0.045); }
    :where(html[data-page="mobile-apps"]) .kats-panel--native  { background: rgba(247, 182, 27, 0.065); }
    :where(html[data-page="mobile-apps"]) .kats-panel--backend { background: rgba(29, 199, 154, 0.055); }

    :where(html[data-page="mobile-apps"]) .kats-panel-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 22px;
    }

    :where(html[data-page="mobile-apps"]) .kats-panel-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
    }

    :where(html[data-page="mobile-apps"]) .kats-panel--cross   .kats-panel-icon { background: rgba(57,127,255,0.12);  color: #397FFF; }
    :where(html[data-page="mobile-apps"]) .kats-panel--native  .kats-panel-icon { background: rgba(247,182,27,0.18);  color: #C98800; }
    :where(html[data-page="mobile-apps"]) .kats-panel--backend .kats-panel-icon { background: rgba(29,199,154,0.16);  color: #1DC79A; }

    :where(html[data-page="mobile-apps"]) .kats-panel-label {
      font: 700 11px/1.4 Inter, sans-serif;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    :where(html[data-page="mobile-apps"]) .kats-panel--cross   .kats-panel-label { color: #2867c7; }
    :where(html[data-page="mobile-apps"]) .kats-panel--native  .kats-panel-label { color: #9a650d; }
    :where(html[data-page="mobile-apps"]) .kats-panel--backend .kats-panel-label { color: #187d6b; }

    :where(html[data-page="mobile-apps"]) .kats-panel-title {
      font: 700 1.2rem/1.3 Manrope, sans-serif;
      letter-spacing: -0.025em;
      color: #0B2B57;
      margin: 0;
    }

    :where(html[data-page="mobile-apps"]) .kats-tech-list {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    :where(html[data-page="mobile-apps"]) .kats-tech-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 0;
      border-bottom: 1px solid rgba(11, 43, 87, 0.065);
    }

    :where(html[data-page="mobile-apps"]) .kats-tech-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    :where(html[data-page="mobile-apps"]) .kats-tech-item:first-child {
      padding-top: 0;
    }

    :where(html[data-page="mobile-apps"]) .kats-tech-icon {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }

    :where(html[data-page="mobile-apps"]) .kats-panel--cross   .kats-tech-icon { background: rgba(57,127,255,0.1);  color: #397FFF; }
    :where(html[data-page="mobile-apps"]) .kats-panel--native  .kats-tech-icon { background: rgba(247,182,27,0.14); color: #C98800; }
    :where(html[data-page="mobile-apps"]) .kats-panel--backend .kats-tech-icon { background: rgba(29,199,154,0.12); color: #1DC79A; }

    :where(html[data-page="mobile-apps"]) .kats-tech-info strong {
      font: 700 1rem/1.25 Manrope, sans-serif;
      color: #0B2B57;
      display: block;
    }

    :where(html[data-page="mobile-apps"]) .kats-tech-info p {
      font: 400 0.8rem/1.4 Inter, sans-serif;
      color: #57687D;
      margin: 3px 0 0;
    }

    :where(html[data-page="mobile-apps"]) .kats-tech-badge {
      margin-left: auto;
      font: 600 0.7rem/1 Inter, sans-serif;
      letter-spacing: 0.05em;
      padding: 4px 10px;
      border-radius: 999px;
      flex-shrink: 0;
    }

    :where(html[data-page="mobile-apps"]) .kats-panel--cross   .kats-tech-badge { background: rgba(57,127,255,0.12);  color: #2867c7; }
    :where(html[data-page="mobile-apps"]) .kats-panel--native  .kats-tech-badge { background: rgba(247,182,27,0.18);  color: #9a650d; }
    :where(html[data-page="mobile-apps"]) .kats-panel--backend .kats-tech-badge { background: rgba(29,199,154,0.14);  color: #187d6b; }

    /* Scroll-reveal initial state */
    :where(html[data-page="mobile-apps"]) .kats-panel[data-kats-reveal] {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    }

    :where(html[data-page="mobile-apps"]) .kats-panel[data-kats-reveal].is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    :where(html[data-page="mobile-apps"]) .kats-panel[data-kats-reveal].is-visible:hover {
      transform: translateY(-4px);
    }

    /* ── Responsive ── */
    @media (max-width: 1099px) {
      :where(html[data-page="mobile-apps"]) .kaxon-app-tech-stack { padding: 72px 0 80px; }
      :where(html[data-page="mobile-apps"]) .kaxon-app-tech-stack .kats-container { width: calc(100% - 48px); }
      :where(html[data-page="mobile-apps"]) .kats-layout { gap: 48px; }
      :where(html[data-page="mobile-apps"]) .kats-left { position: static; }
    }

    @media (max-width: 899px) {
      :where(html[data-page="mobile-apps"]) .kats-layout {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      :where(html[data-page="mobile-apps"]) .kats-body { max-width: 100%; }
    }

    @media (max-width: 699px) {
      :where(html[data-page="mobile-apps"]) .kaxon-app-tech-stack { padding: 56px 0 64px; }
      :where(html[data-page="mobile-apps"]) .kaxon-app-tech-stack .kats-container { width: calc(100% - 40px); }
      :where(html[data-page="mobile-apps"]) .kats-headline { font-size: 1.85rem; }
      :where(html[data-page="mobile-apps"]) .kats-panel { padding: 24px 22px; border-radius: 20px; }
      :where(html[data-page="mobile-apps"]) .kats-panel-title { font-size: 1.05rem; }
      :where(html[data-page="mobile-apps"]) .kats-hand-note { display: none; }
    }
  
/* shared-chrome.css */
@scope (:where(html[data-page="mobile-apps"]) .shared-kx-header,:where(html[data-page="mobile-apps"])  .shared-kx-mobile-drawer,:where(html[data-page="mobile-apps"])  .shared-site-footer) {
:scope { --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif; --container-max: 1240px; --color-yellow: #F8C72E; --color-primary-navy: #14243D; --transition: all .2s ease; font-family: var(--font-body, 'Plus Jakarta Sans', 'Inter', sans-serif); line-height: 1.5; }
:where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(a) { text-decoration: none; }



:scope {
  --kx-navy: #13243D;
  --kx-deep-navy: #0D1B31;
  --kx-secondary-navy: #1B3152;
  --kx-gold: #F9BE22;
  --kx-gold-hover: #FFCA3A;
  --kx-green: #00D084;
  --kx-cyan: #52BCEB;
  --kx-soft-cyan: #EAF8FF;
  --kx-soft-gold: #FFF8DD;
  --kx-soft-green: #E8F8F0;
  --kx-white: #FFFFFF;
  --kx-gray: #F4F6FA;
  --kx-pill-bg: #EDF3FA;
  --kx-border: #E8EDF4;
  --kx-border-subtle: #F1F4F9;
  --kx-text-dark: #13243D;
  --kx-text-muted: #65748B;
  --kx-radius-pill: 9999px;
  --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
}


:scope.shared-kx-header,
.shared-kx-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: 1px solid rgba(232, 237, 244, 0.8);
  transition: all 0.25s ease;
}

:scope.shared-kx-header.scrolled,
.shared-kx-header.scrolled {
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

:scope.shared-kx-header.menu-open,
.shared-kx-header.menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

.shared-kx-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .shared-kx-container {
    padding: 0 16px;
  }
}

.shared-kx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
}


.shared-kx-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0F1D32;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

.shared-kx-logo-tech {
  color: #00D084;
  font-weight: 800;
}


.shared-kx-nav-menu {
  display: flex;
  align-items: center;
  background: #EDF3FA;
  padding: 4px 6px;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(220, 230, 242, 0.85);
  box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
  flex-shrink: 1;
}

.shared-kx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shared-kx-nav-item {
  position: relative;
}

.shared-kx-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--kx-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-nav-link:hover {
  color: #0F1D32;
  background: rgba(255, 255, 255, 0.7);
}

.shared-kx-nav-link.active {
  color: #0F1D32 !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
}

.shared-kx-nav-link::after,
.shared-kx-nav-link.active::after {
  display: none !important;
}

.shared-kx-chevron-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  stroke: currentColor;
}


.shared-kx-dropdown-wrapper {
  position: relative;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper.open .shared-kx-chevron-icon {
  transform: rotate(180deg);
}

.shared-kx-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 250px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
  border: 1px solid var(--kx-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  pointer-events: none;
  z-index: 100;
}

/* Invisible hover bridge to eliminate the 8px cursor gap */
.shared-kx-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
  background: transparent;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper.open .shared-kx-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.shared-kx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #13243D;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.shared-kx-dropdown-item:hover {
  background: #F0F7FF;
  color: #0F1D32;
}


.shared-kx-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.shared-kx-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0F1D32;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-btn-pill-navy:hover {
  background: #1B2E4B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
}

.shared-kx-btn-pill-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F9BE22;
  color: #0F1D32;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
}

.shared-kx-btn-pill-gold:hover {
  background: #FFCA3A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
}

.shared-kx-btn-pill-navy:active,
.shared-kx-btn-pill-gold:active,
.kx-modal-submit:active {
  transform: translateY(0) scale(0.98);
}


.shared-kx-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0F1D32;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.shared-kx-mobile-toggle:hover {
  background: #EDF3FA;
}

@media (max-width: 1240px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-navy {
    display: none;
  }
}

@media (max-width: 1100px) {
  .shared-kx-nav-menu {
    display: none;
  }

  .shared-kx-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .shared-kx-nav-inner {
    height: 70px;
    gap: 8px;
  }
  .shared-kx-logo {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .shared-kx-logo {
    font-size: 18px;
  }
  .shared-kx-nav-actions {
    gap: 6px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 7px 11px;
    font-size: 11.5px;
    gap: 4px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold svg {
    display: none;
  }
  .shared-kx-mobile-toggle {
    padding: 6px;
  }
}

@media (max-width: 360px) {
  .shared-kx-container {
    padding: 0 6px;
  }
  .shared-kx-nav-inner {
    gap: 2px;
  }
  .shared-kx-logo {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  .shared-kx-nav-actions {
    gap: 2px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 5px 6px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  .shared-kx-mobile-toggle {
    padding: 2px;
  }
}


:scope.shared-kx-mobile-drawer,
.shared-kx-mobile-drawer {
  position: fixed;
  top: var(--header-height, 78px);
  left: 0;
  width: 100%;
  height: calc(100dvh - var(--header-height, 78px));
  background: #FFFFFF !important;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 40px rgba(19, 36, 61, 0.12);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :scope.shared-kx-mobile-drawer,
  .shared-kx-mobile-drawer {
    top: var(--header-height, 70px);
    height: calc(100dvh - var(--header-height, 70px));
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

:scope.shared-kx-mobile-drawer.open,
:scope.shared-kx-mobile-drawer.active,
.shared-kx-mobile-drawer.open,
.shared-kx-mobile-drawer.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  pointer-events: auto;
}

.shared-kx-mobile-nav-link {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 650;
  color: #14243D;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 12px;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.shared-kx-mobile-nav-link:hover {
  background: #F8FAFC;
  color: #0E1B2F;
}

.shared-kx-mobile-nav-link.active {
  background: #F4F7FB !important;
  color: #0E1B2F !important;
  font-weight: 750 !important;
  border-left: 3px solid #F8C72E;
  padding-left: 13px;
}

.shared-kx-mobile-nav-link.shared-sub {
  margin-left: 12px;
  margin-right: 4px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 550;
  color: #556987;
  background: #F8FAFC;
  border-radius: 10px;
  border-left: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.shared-kx-mobile-nav-link.shared-sub::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94A3B8;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.shared-kx-mobile-nav-link.shared-sub:hover,
.shared-kx-mobile-nav-link.shared-sub.active {
  background: #EDF4FB;
  color: #0E1B2F;
  border-left-color: #F8C72E;
}

.shared-kx-mobile-nav-link.shared-sub.active::before {
  background: #F8C72E;
  transform: scale(1.4);
}

.shared-kx-mobile-drawer-footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #EEF2F6;
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-gold {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(248, 199, 46, 0.3);
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-navy {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
  border-radius: 9999px;
}


.kx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 49, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  padding: 20px;
}

.kx-modal-overlay.active,
.kx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.kx-modal-dialog {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
  border: 1px solid var(--kx-border);
  overflow: hidden;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.kx-modal-overlay.active .kx-modal-dialog,
.kx-modal-overlay.is-open .kx-modal-dialog {
  transform: scale(1) translateY(0);
}

.kx-modal-header {
  padding: 28px 32px 16px;
  position: relative;
}

.kx-modal-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--kx-navy);
  margin: 0 0 6px;
}

.kx-modal-subtitle {
  font-size: 14px;
  color: var(--kx-text-muted);
  margin: 0;
}

.kx-modal-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--kx-gray);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-navy);
  transition: background 0.2s ease, transform 0.2s ease;
}

.kx-modal-close:hover {
  background: #E2E8F0;
  transform: rotate(90deg);
}

.kx-modal-body {
  padding: 0 32px 32px;
}

.kx-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx-form-label {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kx-navy);
}

.kx-form-input,
.kx-form-textarea,
.kx-form-select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--kx-border);
  background: var(--kx-gray);
  color: var(--kx-navy);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.kx-form-input:focus,
.kx-form-textarea:focus,
.kx-form-select:focus {
  outline: none;
  border-color: var(--kx-navy);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
}

.kx-modal-submit {
  background: var(--kx-navy);
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.kx-modal-submit:hover {
  background: var(--kx-deep-navy);
  transform: translateY(-1px);
}


:scope.shared-site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
  position: relative;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

:scope.shared-site-footer .shared-container,
:scope.shared-site-footer .shared-kx-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

.shared-footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand {
  min-width: 0;
}

.shared-footer-brand .shared-brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand .shared-brand-logo .shared-dot {
  color: #2FB7A7;
}

.shared-footer-brand p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  max-width: 290px;
}

.shared-footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.shared-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.shared-footer-links a {
  font-size: 0.835rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.shared-footer-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

.shared-footer-follow-wrapper {
  margin-top: 24px;
}

.shared-footer-follow-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.shared-footer-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.shared-social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  text-decoration: none;
  transition: var(--transition);
}

.shared-social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

.shared-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  flex-wrap: wrap;
  gap: 12px;
}


@media (max-width: 1180px) {
  .nav-link {
    padding: 6px 9px;
    font-size: 0.82rem;
  }
  .btn-nav-phone {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}


@media (max-width: 1024px) {
  :scope {
    --header-height: 66px;
  }
  .nav-menu-wrapper,
  .btn-phone-desktop {
    display: none !important;
  }
  .hamburger-btn {
    display: flex !important;
  }
  .btn-cta-desktop {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .shared-footer-brand p {
    max-width: 100%;
  }
}


@media (max-width: 768px) {
  :scope {
    --header-height: 62px;
  }
  .btn-cta-desktop {
    display: none !important;
  }
  .shared-site-footer {
    padding: 46px 0 24px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding-bottom: 28px;
  }
}


@media (max-width: 540px) {
  :scope {
    --header-height: 58px;
  }
  .nav-container {
    padding: 0 14px;
  }
  .hamburger-btn {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  .hamburger-btn span {
    width: 20px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
  }
  .shared-footer-col-company {
    grid-column: 1;
  }
  .shared-footer-col-solutions {
    grid-column: 2;
  }
  .shared-footer-col-resources {
    grid-column: 1 / -1;
  }
  .shared-footer-col h5 {
    margin-bottom: 12px;
  }
  .shared-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


@media (max-width: 360px) {
  .shared-brand-logo {
    font-size: 1.15rem;
  }
  .mobile-nav-drawer {
    width: 90vw;
    padding: 18px 14px 22px;
  }
  .mobile-nav-link {
    font-size: 0.95rem;
  }
}
  
}
:where(html[data-page="mobile-apps"]) .shared-kx-mobile-drawer { visibility: hidden; }
:where(html[data-page="mobile-apps"]) .shared-kx-mobile-drawer.open { visibility: visible; }
:where(html[data-page="mobile-apps"]) .shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="mobile-apps"]) .shared-kx-btn-pill-navy:active,:where(html[data-page="mobile-apps"]) 
  .shared-kx-btn-pill-gold:active,:where(html[data-page="mobile-apps"]) 
  .kx-modal-submit:active { transform: none; }
}

/* page-upgrades.css */
:where(html[data-page="mobile-apps"]) body.rv-upgraded { --rv-navy:#102039; --rv-muted:#5e748f; --rv-gold:#f5a916; --rv-cream:#fbf7ef; font-family:'Plus Jakarta Sans','Inter',sans-serif; background:var(--rv-cream); }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-container { width:calc(100% - 80px); max-width:1240px; margin-inline:auto; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-section { scroll-margin-top:96px; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities) { padding-top:80px; padding-bottom:80px; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-section h2 { font-family:'Outfit','Plus Jakarta Sans',sans-serif!important; font-weight:800!important; font-size:clamp(30px,3.1vw,42px)!important; line-height:1.16!important; letter-spacing:-.04em!important; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-section h3 { font-family:'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.025em; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-section p { line-height:1.7; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-section[data-rv-surface="light"] { background:#fffdf8!important; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-section[data-rv-surface="light"]:nth-of-type(even) { background:#fff!important; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-section[data-rv-surface="light"] h2 { color:#102039; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-section :is(input,select,textarea) { border-radius:12px; font-family:'Plus Jakarta Sans','Inter',sans-serif; }
:where(html[data-page="mobile-apps"]) .rv-upgraded :is(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #21877b; outline-offset:4px; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-hero { background-color:#fbf7ef; background-image:radial-gradient(#d9d7cc .7px,transparent .7px); background-size:24px 24px; padding:44px 0 54px; border-bottom:1px solid #e9e6de; position:relative; overflow:hidden; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-hero-copy { min-width:0; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-eyebrow { display:flex; align-items:center; gap:9px; font:700 11px/1.4 'Plus Jakarta Sans','Inter',sans-serif; text-transform:uppercase; letter-spacing:.14em; color:#315373; margin:0 0 16px; }
:where(html[data-page="mobile-apps"]) .rv-eyebrow > span { width:7px; height:7px; border-radius:50%; background:#f5a916; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-hero h1 { font-family:'Outfit','Plus Jakarta Sans',sans-serif!important; font-size:clamp(40px,4.1vw,58px)!important; line-height:1.09!important; font-weight:800!important; letter-spacing:-.05em!important; color:#102039!important; margin:0 0 20px!important; max-width:100%; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-hero h1 em { font-style:normal; color:#c88409; text-decoration:underline; text-decoration-color:#f5a916; text-decoration-thickness:3px; text-underline-offset:8px; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-description { color:#5e748f; font:400 17px/1.75 'Plus Jakarta Sans','Inter',sans-serif; max-width:560px; margin:0 0 26px; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-actions { display:flex; gap:12px; flex-wrap:wrap; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-button { display:inline-flex; justify-content:center; align-items:center; gap:14px; padding:15px 21px; min-height:52px; border-radius:999px; font:700 13px/1.4 'Plus Jakarta Sans','Inter',sans-serif; text-decoration:none; color:#102039; border:1px solid #e2e7ee; transition:background .2s,transform .2s; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-button-primary { background:#ffc526; border-color:#ffc526; box-shadow:0 8px 20px #f5a91620; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-button-secondary { background:#fff; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-button:hover { transform:translateY(-2px); background:#fff0bd; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-button i { font-size:18px; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-hero-art { min-width:0; position:relative; padding:0; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-note { font:600 24px/1.15 Caveat,cursive; color:#315373; text-align:right; margin:14px 12px 0 0; transform:rotate(-3deg); }
:where(html[data-page="mobile-apps"]) .rv-note svg { display:inline-block; width:50px; height:28px; vertical-align:middle; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-pastel-0 { background:#fff2cb; color:#a97007; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-pastel-1 { background:#def7ee; color:#187d6b; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-pastel-2 { background:#e5efff; color:#2867c7; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-pastel-3 { background:#fbe4ef; color:#b83c73; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-pastel-4 { background:#ede5fc; color:#7250b2; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-icon { width:56px; height:56px; flex-shrink:0; display:grid; place-items:center; border-radius:18px; font-size:27px; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-capabilities { padding:46px 0 54px; background:#fff; border-bottom:1px solid #e9edf0; }
:where(html[data-page="mobile-apps"]) .rv-capabilities .rv-eyebrow { margin-bottom:14px; }
:where(html[data-page="mobile-apps"]) .rv-capabilities h2 { max-width:1000px; color:#102039; margin:0 0 32px; }
:where(html[data-page="mobile-apps"]) .rv-capability-grid { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); gap:26px; }
:where(html[data-page="mobile-apps"]) .rv-capability { display:flex; align-items:flex-start; gap:15px; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-capability h3 { font-size:16px; line-height:1.3; color:#102039; margin:0 0 8px; }
:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-capability p { font:400 13px/1.6 'Plus Jakarta Sans','Inter',sans-serif; color:#5e748f; margin:0; }
:where(html[data-page="mobile-apps"]) .rv-orbit { position:relative; width:100%; max-width:510px; aspect-ratio:1.12; margin:auto; }
:where(html[data-page="mobile-apps"]) .rv-orbit-ring { position:absolute; width:70%; height:76%; top:12%; left:15%; border:1.5px solid #e9b448; border-radius:50%; }
:where(html[data-page="mobile-apps"]) .rv-orbit-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:37%; aspect-ratio:1; border-radius:50%; background:#102039; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font:800 24px/1.15 'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.04em; box-shadow:0 12px 30px #10203915; text-align:center; }
:where(html[data-page="mobile-apps"]) .rv-orbit-core span { color:#26b794; font-size:22px; }
:where(html[data-page="mobile-apps"]) .rv-orbit-node { position:absolute; left:calc(50% + cos(calc(var(--i)*360deg/var(--count) - 90deg))*37%); top:calc(50% + sin(calc(var(--i)*360deg/var(--count) - 90deg))*37%); transform:translate(-50%,-50%); width:25%; aspect-ratio:1; border:3px solid #fff; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; box-shadow:0 6px 22px #10203906; }
:where(html[data-page="mobile-apps"]) .rv-orbit-node i { font-size:32px; }:where(html[data-page="mobile-apps"]) .rv-orbit-node strong { font:700 12px/1.3 'Plus Jakarta Sans','Inter',sans-serif; color:#102039; text-align:center; }
:where(html[data-page="mobile-apps"]) .rv-orbit-4 .rv-orbit-node { left:calc(50% + cos(calc(var(--i)*90deg - 135deg))*43%); top:calc(50% + sin(calc(var(--i)*90deg - 135deg))*43%); }
:where(html[data-page="mobile-apps"]) .rv-career-panels { display:flex; align-items:center; gap:14px; padding:24px 8px; min-height:385px; }
:where(html[data-page="mobile-apps"]) .rv-career-panel { flex:1; min-width:0; height:320px; border-radius:18px; padding:30px 18px; display:flex; flex-direction:column; justify-content:center; gap:25px; transform:rotate(-4deg); }
:where(html[data-page="mobile-apps"]) .rv-career-panel:nth-child(2){transform:translateY(-22px) rotate(3deg)}:where(html[data-page="mobile-apps"]) .rv-career-panel:nth-child(3){transform:rotate(-3deg)}
:where(html[data-page="mobile-apps"]) .rv-career-panel i { font-size:48px; }:where(html[data-page="mobile-apps"]) .rv-career-panel strong { font:800 clamp(25px,2.5vw,36px)/1 'Outfit','Plus Jakarta Sans',sans-serif; color:#102039; letter-spacing:-.04em; }:where(html[data-page="mobile-apps"]) .rv-career-panel span { font:500 11px/1.6 'Plus Jakarta Sans','Inter',sans-serif; text-transform:uppercase; letter-spacing:.08em; color:#5e748f; }
:where(html[data-page="mobile-apps"]) .rv-roadmap { background:#fff; border:1px solid #e8e9e6; padding:30px; border-radius:24px; box-shadow:0 16px 40px #10203908; }
:where(html[data-page="mobile-apps"]) .rv-small-label { font:700 10px/1.4 'Plus Jakarta Sans','Inter',sans-serif!important; text-transform:uppercase; letter-spacing:.13em; color:#315373; margin:0 0 26px!important; }
:where(html[data-page="mobile-apps"]) .rv-roadmap-step { display:flex; gap:20px; padding:16px 0; }:where(html[data-page="mobile-apps"]) .rv-roadmap-step .rv-icon { width:70px;height:70px;border-radius:50%;font-size:34px; }
:where(html[data-page="mobile-apps"]) .rv-roadmap-step small { font:700 12px 'Plus Jakarta Sans','Inter',sans-serif; color:#178575; }:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-roadmap-step h3 { font:800 21px/1.2 'Outfit','Plus Jakarta Sans',sans-serif; color:#102039; margin:6px 0; }:where(html[data-page="mobile-apps"]) .rv-roadmap-step p { color:#5e748f; font-size:13px; margin:0; }
:where(html[data-page="mobile-apps"]) .rv-art-conversation-roadmap > .rv-note,:where(html[data-page="mobile-apps"]) .rv-art-cloud-architecture > .rv-note,:where(html[data-page="mobile-apps"]) .rv-art-search-visibility > .rv-note { margin:0 12px 18px; }
:where(html[data-page="mobile-apps"]) .rv-devices { min-height:410px; padding:20px 50px 20px 0; position:relative; }
:where(html[data-page="mobile-apps"]) .rv-browser { border:5px solid #16334d; border-radius:17px; overflow:hidden; background:#fffdf8; box-shadow:0 18px 25px #10203920; }
:where(html[data-page="mobile-apps"]) .rv-browser-bar { height:24px; display:flex; gap:6px; align-items:center; padding:0 12px; background:#16334d; }:where(html[data-page="mobile-apps"]) .rv-browser-bar b { width:7px;height:7px;border-radius:50%;background:#ffcd38; }:where(html[data-page="mobile-apps"]) .rv-browser-bar b:first-child{background:#ed7880}:where(html[data-page="mobile-apps"]) .rv-browser-bar b:last-child{background:#24b7a8}
:where(html[data-page="mobile-apps"]) .rv-browser-content { min-height:310px; padding:23px; position:relative; overflow:hidden; }:where(html[data-page="mobile-apps"]) .rv-mock-brand { display:block;font:800 17px 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039; margin-bottom:26px; }:where(html[data-page="mobile-apps"]) .rv-browser-content small { display:block;font:700 8px 'Plus Jakarta Sans','Inter',sans-serif;text-transform:uppercase;letter-spacing:.15em;color:#476780;margin-bottom:14px; }:where(html[data-page="mobile-apps"]) .rv-browser-content strong { display:block;font:800 29px/1.13 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;letter-spacing:-.04em;position:relative;z-index:1; }:where(html[data-page="mobile-apps"]) .rv-browser-content p { font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;max-width:210px;color:#5e748f;margin:15px 0; }:where(html[data-page="mobile-apps"]) .rv-mock-button { display:inline-block;padding:10px 17px;background:#ffca32;color:#102039;border-radius:999px;font:700 10px 'Plus Jakarta Sans','Inter',sans-serif;position:relative;z-index:1; }
:where(html[data-page="mobile-apps"]) .rv-shapes { width:180px;height:160px;position:absolute;bottom:-15px;right:-20px;pointer-events:none; }:where(html[data-page="mobile-apps"]) .rv-shapes b { position:absolute; }:where(html[data-page="mobile-apps"]) .rv-shapes b:nth-child(1){width:110px;height:110px;border-radius:100% 0 0 0;background:#25b09e;right:0;bottom:0}:where(html[data-page="mobile-apps"]) .rv-shapes b:nth-child(2){width:140px;height:140px;border-radius:100% 0 0 0;background:#f6e8c6;right:0;bottom:0;z-index:-1}:where(html[data-page="mobile-apps"]) .rv-shapes b:nth-child(3){width:65px;height:65px;border-radius:50%;background:#ffce3a;left:0;top:0}
:where(html[data-page="mobile-apps"]) .rv-mini-phone { position:absolute;bottom:0;right:0;width:145px;height:278px;padding:30px 13px 15px;border:7px solid #132b44;border-radius:26px;background:#fffdf8;box-shadow:0 14px 24px #10203920;overflow:hidden; }:where(html[data-page="mobile-apps"]) .rv-mini-phone>b { position:absolute;top:4px;left:35%;width:30%;height:8px;border-radius:10px;background:#132b44; }:where(html[data-page="mobile-apps"]) .rv-mini-phone>span:not(.rv-mock-button) { font:800 12px 'Outfit','Plus Jakarta Sans',sans-serif; }:where(html[data-page="mobile-apps"]) .rv-mini-phone>strong { display:block;font:800 20px/1.12 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;margin:30px 0 20px; }:where(html[data-page="mobile-apps"]) .rv-mini-phone .rv-shapes { transform:scale(.6);transform-origin:bottom right; }:where(html[data-page="mobile-apps"]) .rv-mini-phone .rv-mock-button {font-size:8px;padding:8px 10px}
:where(html[data-page="mobile-apps"]) .rv-flow { display:grid;grid-template-columns:1fr 1fr 1.2fr;align-items:center;gap:16px;min-height:340px;position:relative; }:where(html[data-page="mobile-apps"]) .rv-flow::before {content:'';position:absolute;left:15%;right:15%;top:50%;height:2px;background:#f5a916;z-index:0}:where(html[data-page="mobile-apps"]) .rv-flow-input { position:relative;background:#fff;border:1px solid #e2e7ee;border-radius:18px;padding:18px 10px;text-align:center; }:where(html[data-page="mobile-apps"]) .rv-flow-input i {font-size:28px;color:#1da891;display:block;margin-bottom:10px}:where(html[data-page="mobile-apps"]) .rv-flow-input strong {display:block;font-size:12px;color:#102039}:where(html[data-page="mobile-apps"]) .rv-flow-input span {font-size:9px;color:#5e748f;display:block;margin-top:6px}:where(html[data-page="mobile-apps"]) .rv-flow-core { position:relative;aspect-ratio:1;border-radius:50%;background:#102039;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;box-shadow:0 0 0 10px #e7eff7; }:where(html[data-page="mobile-apps"]) .rv-flow-core i {font-size:34px}:where(html[data-page="mobile-apps"]) .rv-flow-core strong {font-size:11px;line-height:1.4}:where(html[data-page="mobile-apps"]) .rv-flow-outputs {display:flex;flex-direction:column;gap:24px;position:relative}:where(html[data-page="mobile-apps"]) .rv-flow-outputs>div {padding:16px 12px;background:#fff;border:1px solid #e2e7ee;border-radius:999px;font-size:11px;display:flex;align-items:center;gap:10px;color:#102039}:where(html[data-page="mobile-apps"]) .rv-flow-outputs i {font-size:23px;color:#248978}
:where(html[data-page="mobile-apps"]) .rv-cloud {background:#102c46;color:#fff;padding:34px;border-radius:26px;box-shadow:0 18px 30px #10203915}:where(html[data-page="mobile-apps"]) .rv-cloud-icon {text-align:center;font-size:100px;line-height:1}:where(html[data-page="mobile-apps"]) .rv-cloud-branches{height:42px;border:2px solid #ffcc31;border-bottom:0;border-radius:18px 18px 0 0;margin:12px 14% 0;position:relative}:where(html[data-page="mobile-apps"]) .rv-cloud-branches::after{content:'';position:absolute;left:50%;height:54px;top:-14px;border-left:2px solid #ffcc31}:where(html[data-page="mobile-apps"]) .rv-server-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}:where(html[data-page="mobile-apps"]) .rv-server{border:1px solid #88adc7;border-radius:8px;height:34px;display:flex;gap:5px;align-items:center;padding:10px;margin-bottom:4px}:where(html[data-page="mobile-apps"]) .rv-server b{width:6px;height:6px;border-radius:50%;background:#21d2b1}:where(html[data-page="mobile-apps"]) .rv-server span{width:24px;height:3px;background:#41637e;margin-left:4px}:where(html[data-page="mobile-apps"]) .rv-server-grid strong{display:block;text-align:center;font-size:14px;margin-top:16px;color:white}
:where(html[data-page="mobile-apps"]) .rv-app-phones {position:relative;min-height:430px;display:flex;justify-content:center;align-items:center;padding:10px 20px}:where(html[data-page="mobile-apps"]) .rv-app-phone{position:relative;width:47%;height:390px;border:7px solid #132b44;border-radius:31px;background:#fffdf8;padding:36px 18px 20px;overflow:hidden;box-shadow:0 18px 25px #10203920;transform:rotate(-7deg)}:where(html[data-page="mobile-apps"]) .rv-app-phone+.rv-app-phone{transform:rotate(7deg) translateY(16px);margin-left:-10px}:where(html[data-page="mobile-apps"]) .rv-phone-notch{position:absolute;top:-1px;left:28%;width:44%;height:15px;border-radius:0 0 12px 12px;background:#132b44}:where(html[data-page="mobile-apps"]) .rv-app-phone small{font:800 10px 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;white-space:nowrap}:where(html[data-page="mobile-apps"]) .rv-app-phone small span{color:#1aac90}:where(html[data-page="mobile-apps"]) .rv-app-phone>strong{font:800 29px/1.1 'Outfit','Plus Jakarta Sans',sans-serif;display:block;color:#102039;margin:36px 0 20px;letter-spacing:-.04em}:where(html[data-page="mobile-apps"]) .rv-app-phone p{font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;color:#5e748f;margin-bottom:18px}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-app-phone h3{font:800 17px/1.2 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;margin:12px 0}:where(html[data-page="mobile-apps"]) .rv-phone-row{display:flex;align-items:center;gap:10px;padding:14px 5px;border-bottom:1px solid #e2e7ee;font:600 11px 'Plus Jakarta Sans','Inter',sans-serif;color:#102039}:where(html[data-page="mobile-apps"]) .rv-phone-row i{font-size:23px;color:#24a694}:where(html[data-page="mobile-apps"]) .rv-app-phone .rv-shapes{transform:scale(.8);transform-origin:bottom right}:where(html[data-page="mobile-apps"]) .rv-platforms{text-align:center;color:#315373;font-size:12px!important;margin-top:22px}:where(html[data-page="mobile-apps"]) .rv-platforms i{font-size:18px;margin-left:12px}:where(html[data-page="mobile-apps"]) .rv-platforms span{margin-left:14px;color:#afbac6}
:where(html[data-page="mobile-apps"]) .rv-search {padding:28px;background:#fff;border:1px solid #e2e7ee;border-radius:24px;box-shadow:0 18px 35px #1020390c}:where(html[data-page="mobile-apps"]) .rv-search-field{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid #e2e7ee;border-radius:999px;color:#102039;font-size:13px}:where(html[data-page="mobile-apps"]) .rv-search-field i{font-size:21px}:where(html[data-page="mobile-apps"]) .rv-search-result{padding:28px 8px}:where(html[data-page="mobile-apps"]) .rv-search-result small{display:block;color:#71859b;font-size:10px;margin-bottom:14px}:where(html[data-page="mobile-apps"]) .rv-search-result strong{display:block;color:#2761b7;font:700 22px 'Outfit','Plus Jakarta Sans',sans-serif;margin-bottom:18px}:where(html[data-page="mobile-apps"]) .rv-search-result>span{display:block;height:9px;border-radius:5px;background:#e0e8f1;margin-top:8px}:where(html[data-page="mobile-apps"]) .rv-search-result>span:last-child{width:80%}:where(html[data-page="mobile-apps"]) .rv-trend{display:block;width:100%;height:auto;overflow:visible}:where(html[data-page="mobile-apps"]) .rv-illustration-label{font:400 10px/1.5 'Plus Jakarta Sans','Inter',sans-serif!important;color:#71859b;margin-top:14px;text-align:center}
:where(html[data-page="mobile-apps"]) .rv-funnel {display:flex;align-items:center;flex-direction:column;gap:12px;padding:0 24px}:where(html[data-page="mobile-apps"]) .rv-funnel-brand{width:92px;height:92px;border-radius:50%;background:#102039;color:#fff;display:grid;place-content:center;font:800 18px/1.15 'Outfit','Plus Jakarta Sans',sans-serif;text-align:center;margin-bottom:4px}:where(html[data-page="mobile-apps"]) .rv-funnel-step{display:flex;align-items:center;gap:20px;padding:24px 28px;border-radius:22px;width:100%;}:where(html[data-page="mobile-apps"]) .rv-funnel-step:nth-child(3){width:90%}:where(html[data-page="mobile-apps"]) .rv-funnel-step:nth-child(4){width:80%}:where(html[data-page="mobile-apps"]) .rv-funnel-step>i{font-size:38px;color:#102039}:where(html[data-page="mobile-apps"]) .rv-funnel-step strong{font:700 14px/1.3 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039}:where(html[data-page="mobile-apps"]) .rv-funnel-step p{font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;color:#5e748f;margin:8px 0 0}
:where(html[data-page="mobile-apps"]) .rv-media-fallback {display:flex!important;align-items:center;justify-content:center;flex-direction:column;gap:16px;min-height:140px;padding:30px;background:#eef4f2;color:#315373;border-radius:inherit;text-align:center;font:600 13px/1.5 'Plus Jakarta Sans','Inter',sans-serif}:where(html[data-page="mobile-apps"]) .rv-media-fallback i{font-size:38px;color:#28a595}:where(html[data-page="mobile-apps"]) .rv-media-fallback.rv-avatar{width:48px;height:48px;min-height:0;padding:0;border-radius:50%;font-size:14px}:where(html[data-page="mobile-apps"]) .rv-media-fallback small{font-size:10px;color:#5e748f;text-transform:uppercase;letter-spacing:.1em}
@media(min-width:1400px){:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-hero{padding-top:48px;padding-bottom:58px}}
@media(max-width:1100px){:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-hero-grid{gap:32px}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-container{width:calc(100% - 48px)}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-hero h1{font-size:46px!important}:where(html[data-page="mobile-apps"]) .rv-career-panel{padding:24px 12px}:where(html[data-page="mobile-apps"]) .rv-flow{gap:10px}:where(html[data-page="mobile-apps"]) .rv-app-phone{padding-inline:12px}:where(html[data-page="mobile-apps"]) .rv-app-phone>strong{font-size:26px}:where(html[data-page="mobile-apps"]) .rv-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-hero-grid{grid-template-columns:1fr;gap:30px}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-hero{padding:36px 0 44px}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-hero-copy{max-width:660px}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-hero-art{width:100%;max-width:580px;margin:auto}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-hero h1{font-size:clamp(38px,6vw,54px)!important}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities){padding-block:56px}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-description{max-width:640px}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-capabilities{padding-block:40px}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-section h2{font-size:34px!important}}
@media(max-width:540px){:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-container{width:calc(100% - 40px)}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-hero h1{font-size:38px!important;line-height:1.12!important}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-description{font-size:15px}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-eyebrow{font-size:10px;margin-bottom:20px}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-button{font-size:12px;min-height:48px;padding:13px 17px}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-actions{gap:10px}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-hero-art{padding-top:0}:where(html[data-page="mobile-apps"]) .rv-capability-grid{grid-template-columns:1fr;gap:24px}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-section h2{font-size:29px!important}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-note{font-size:22px}:where(html[data-page="mobile-apps"]) .rv-orbit-core{font-size:19px}:where(html[data-page="mobile-apps"]) .rv-orbit-core span{font-size:16px}:where(html[data-page="mobile-apps"]) .rv-orbit-node i{font-size:24px}:where(html[data-page="mobile-apps"]) .rv-orbit-node strong{font-size:9px}:where(html[data-page="mobile-apps"]) .rv-orbit-node{gap:5px}:where(html[data-page="mobile-apps"]) .rv-career-panels{min-height:290px;padding:20px 2px;gap:9px}:where(html[data-page="mobile-apps"]) .rv-career-panel{height:240px;padding:20px 12px;gap:20px}:where(html[data-page="mobile-apps"]) .rv-career-panel strong{font-size:25px}:where(html[data-page="mobile-apps"]) .rv-career-panel span{font-size:9px}:where(html[data-page="mobile-apps"]) .rv-career-panel i{font-size:36px}:where(html[data-page="mobile-apps"]) .rv-roadmap{padding:20px}:where(html[data-page="mobile-apps"]) .rv-roadmap-step{gap:14px}:where(html[data-page="mobile-apps"]) .rv-roadmap-step .rv-icon{width:48px;height:48px;font-size:26px}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-roadmap-step h3{font-size:19px}:where(html[data-page="mobile-apps"]) .rv-devices{min-height:350px;padding-right:30px}:where(html[data-page="mobile-apps"]) .rv-browser-content{padding:16px;min-height:280px}:where(html[data-page="mobile-apps"]) .rv-browser-content strong{font-size:25px}:where(html[data-page="mobile-apps"]) .rv-browser-content p{max-width:160px}:where(html[data-page="mobile-apps"]) .rv-mini-phone{width:110px;height:225px;border-width:5px;padding:24px 10px 10px}:where(html[data-page="mobile-apps"]) .rv-mini-phone>strong{font-size:17px;margin:22px 0 14px}:where(html[data-page="mobile-apps"]) .rv-browser-content .rv-shapes{transform:scale(.7);transform-origin:bottom right}:where(html[data-page="mobile-apps"]) .rv-flow{grid-template-columns:1fr 1fr;gap:24px;min-height:300px}:where(html[data-page="mobile-apps"]) .rv-flow-input{grid-column:1;grid-row:1}:where(html[data-page="mobile-apps"]) .rv-flow-core{grid-column:2;grid-row:1;width:120px;justify-self:center}:where(html[data-page="mobile-apps"]) .rv-flow-outputs{grid-column:1/-1;flex-direction:row;gap:8px}:where(html[data-page="mobile-apps"]) .rv-flow-outputs>div{flex:1;flex-direction:column;text-align:center;padding:15px 8px;border-radius:16px;font-size:10px}:where(html[data-page="mobile-apps"]) .rv-flow::before{top:25%}:where(html[data-page="mobile-apps"]) .rv-cloud{padding:24px 20px}:where(html[data-page="mobile-apps"]) .rv-cloud-icon{font-size:80px}:where(html[data-page="mobile-apps"]) .rv-server-grid{gap:12px}:where(html[data-page="mobile-apps"]) .rv-server{padding:6px;height:28px}:where(html[data-page="mobile-apps"]) .rv-server-grid strong{font-size:11px}:where(html[data-page="mobile-apps"]) .rv-server span{width:13px}:where(html[data-page="mobile-apps"]) .rv-app-phones{padding:10px 4px;min-height:350px}:where(html[data-page="mobile-apps"]) .rv-app-phone{height:320px;border-width:5px;border-radius:25px;padding:25px 12px 15px;width:49%}:where(html[data-page="mobile-apps"]) .rv-app-phone>strong{font-size:23px;margin:26px 0 16px}:where(html[data-page="mobile-apps"]) .rv-app-phone small{font-size:8px}:where(html[data-page="mobile-apps"]) .rv-app-phone p{font-size:9px}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-app-phone h3{font-size:14px}:where(html[data-page="mobile-apps"]) .rv-phone-row{font-size:10px;padding:11px 2px;gap:7px}:where(html[data-page="mobile-apps"]) .rv-app-phone .rv-shapes{transform:scale(.6)}:where(html[data-page="mobile-apps"]) .rv-app-phone .rv-mock-button{font-size:9px;padding:9px 12px}:where(html[data-page="mobile-apps"]) .rv-search{padding:22px}:where(html[data-page="mobile-apps"]) .rv-search-field{font-size:11px;padding:12px}:where(html[data-page="mobile-apps"]) .rv-search-result strong{font-size:19px}:where(html[data-page="mobile-apps"]) .rv-funnel{padding:0 6px}:where(html[data-page="mobile-apps"]) .rv-funnel-step{padding:19px 20px;gap:14px}:where(html[data-page="mobile-apps"]) .rv-funnel-step>i{font-size:29px}:where(html[data-page="mobile-apps"]) .rv-funnel-step strong{font-size:12px}:where(html[data-page="mobile-apps"]) .rv-funnel-step p{font-size:10px}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities){padding-block:44px}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-button{transition:none}:where(html[data-page="mobile-apps"]) .rv-upgraded .rv-button:hover{transform:none}}
@media(max-width:600px){
  :where(html[data-page="mobile-apps"]) .rv-upgraded .featured-header-row { flex-wrap:wrap; gap:14px; }
  :where(html[data-page="mobile-apps"]) .rv-upgraded #client-stories .container > div:first-child { flex-wrap:wrap; gap:20px; }
  :where(html[data-page="mobile-apps"]) .rv-upgraded #client-stories .container > div:first-child > div { min-width:0; max-width:100%; flex-wrap:wrap; }
  :where(html[data-page="mobile-apps"]) .rv-upgraded .rv-orbit-6 .rv-orbit-node strong { font-size:8px; }
}
:where(html[data-page="mobile-apps"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(h2, h3, .final-cta-headline, .kx-cta-headline, .display-h2) {
  color: #FFFFFF !important;
}
:where(html[data-page="mobile-apps"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(h2, h3, .final-cta-headline, .kx-cta-headline) :is(.highlight-gold, .cta-gold-text, em, span.gold, .kx-text-gold) {
  color: #FFC526 !important;
  background: transparent !important;
}
:where(html[data-page="mobile-apps"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(p, .kx-cta-sub) {
  color: rgba(255, 255, 255, 0.9) !important;
}


/* mobile-apps-sections.css */
:where(html[data-page="mobile-apps"]) .ma-section{--ma-navy:#102039;--ma-muted:#5e748f;--ma-gold:#f5a916;--ma-border:#e2e7ee;background:#fff;color:var(--ma-navy);padding:80px 0;scroll-margin-top:100px;font:400 16px/1.7 Inter,sans-serif;overflow-x:hidden}
:where(html[data-page="mobile-apps"]) .ma-section *{box-sizing:border-box}:where(html[data-page="mobile-apps"]) .ma-section .ma-container{width:calc(100% - 80px);max-width:1240px;margin:auto}:where(html[data-page="mobile-apps"]) .ma-section p,:where(html[data-page="mobile-apps"]) .ma-section h2,:where(html[data-page="mobile-apps"]) .ma-section h3,:where(html[data-page="mobile-apps"]) .ma-section figure{margin:0}:where(html[data-page="mobile-apps"]) .ma-section h2{font:800 42px/1.16 Manrope,sans-serif!important;letter-spacing:-.04em;color:#102039!important;max-width:820px;text-wrap:balance}:where(html[data-page="mobile-apps"]) .ma-section h3{font:700 20px/1.3 Manrope,sans-serif;letter-spacing:-.025em;color:inherit}:where(html[data-page="mobile-apps"]) .ma-section p{color:#5e748f}:where(html[data-page="mobile-apps"]) .ma-section .ma-eyebrow{font:700 11px/1.4 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#426078;margin-bottom:16px}:where(html[data-page="mobile-apps"]) .ma-section .ma-intro{max-width:62ch;margin-top:20px;line-height:1.7}:where(html[data-page="mobile-apps"]) .ma-heading{margin-bottom:40px}:where(html[data-page="mobile-apps"]) .ma-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:32px}:where(html[data-page="mobile-apps"]) .ma-header-row .ma-heading{flex:1}:where(html[data-page="mobile-apps"]) .ma-section .ma-note{font:600 24px/1.15 Caveat,cursive;color:#9a650d;transform:rotate(-3deg);flex:0 0 190px;padding-top:8px}:where(html[data-page="mobile-apps"]) .ma-note span{display:block;font-size:34px;text-align:right;padding-right:30px}
:where(html[data-page="mobile-apps"]) .ma-section .ma-icon{width:52px;height:52px;border-radius:16px;display:inline-grid;place-items:center;flex-shrink:0;font-size:28px;background:#fff2cb;color:#a97007}:where(html[data-page="mobile-apps"]) .ma-section .ma-tone-1{background:#def7ee;color:#187d6b}:where(html[data-page="mobile-apps"]) .ma-section .ma-tone-2{background:#e5efff;color:#2867c7}:where(html[data-page="mobile-apps"]) .ma-section .ma-tone-3{background:#fbe4ef;color:#b83c73}:where(html[data-page="mobile-apps"]) .ma-section .ma-tone-4{background:#ede5fc;color:#7250b2}:where(html[data-page="mobile-apps"]) .ma-section a{color:inherit;text-decoration:none}:where(html[data-page="mobile-apps"]) .ma-section h3 a,:where(html[data-page="mobile-apps"]) .ma-tech-row a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}:where(html[data-page="mobile-apps"]) .ma-section .ma-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:14px 24px;border-radius:999px;background:#ffc526;color:#102039;font:700 14px/1.4 Inter,sans-serif;text-align:center;white-space:nowrap;transition:background .18s ease-out,transform .18s ease-out}:where(html[data-page="mobile-apps"]) .ma-button i{font-size:18px}:where(html[data-page="mobile-apps"]) .ma-section .ma-button:hover{background:#ffd458;transform:translateY(-2px)}:where(html[data-page="mobile-apps"]) .ma-section .ma-button:active{transform:translateY(0) scale(.98)}:where(html[data-page="mobile-apps"]) .ma-section :is(a,button):focus-visible{outline:3px solid #187d6b;outline-offset:4px}:where(html[data-page="mobile-apps"]) .ma-section .ma-dark :is(a,button):focus-visible{outline-color:#ffc526}
:where(html[data-page="mobile-apps"]) .ma-section-capabilities{padding:48px 0}:where(html[data-page="mobile-apps"]) .ma-capabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}:where(html[data-page="mobile-apps"]) .ma-capability{padding-right:32px;border-right:1px solid #e2e7ee}:where(html[data-page="mobile-apps"]) .ma-capability:last-child{border:0;padding-right:0}:where(html[data-page="mobile-apps"]) .ma-capability .ma-icon{margin-bottom:20px;width:48px;height:48px}:where(html[data-page="mobile-apps"]) .ma-capability p{font-size:15px;margin-top:8px}:where(html[data-page="mobile-apps"]) .ma-section-trust-strip{padding:32px 0;background:#fbf7ef;border-block:1px solid #e2e7ee}:where(html[data-page="mobile-apps"]) .ma-section-trust-strip .ma-eyebrow{text-align:center;margin-bottom:24px}:where(html[data-page="mobile-apps"]) .ma-section-trust-strip .ma-outcomes-title{font:600 15px/1.5 Manrope,sans-serif!important;letter-spacing:-.01em;text-transform:none;color:#426078!important;max-width:none;margin-bottom:20px}:where(html[data-page="mobile-apps"]) .ma-outcomes{display:flex;justify-content:center;align-items:stretch}:where(html[data-page="mobile-apps"]) .ma-outcome{display:flex;align-items:center;gap:12px;padding:2px 28px;border-left:1px solid #e2e7ee}:where(html[data-page="mobile-apps"]) .ma-outcome:first-child{border-left:0;padding-left:0}:where(html[data-page="mobile-apps"]) .ma-outcome:last-child{padding-right:0}:where(html[data-page="mobile-apps"]) .ma-outcome .ma-icon{width:36px;height:36px;border-radius:12px;font-size:24px;transition:transform .25s cubic-bezier(.16,1,.3,1)}:where(html[data-page="mobile-apps"]) .ma-outcome:hover .ma-icon{transform:translateY(-3px)}:where(html[data-page="mobile-apps"]) .ma-outcome h3{font-size:15px}:where(html[data-page="mobile-apps"]) .ma-outcome p{font-size:12px;margin-top:4px}:where(html[data-page="mobile-apps"]) .ma-capability .ma-icon{transition:transform .25s cubic-bezier(.16,1,.3,1)}:where(html[data-page="mobile-apps"]) .ma-capability:hover .ma-icon{transform:translateY(-4px)}
:where(html[data-page="mobile-apps"]) .ma-solutions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}:where(html[data-page="mobile-apps"]) .ma-solution{padding:28px;border:1px solid #e2e7ee;border-radius:24px;min-height:250px;background:white}:where(html[data-page="mobile-apps"]) .ma-solution .ma-icon{margin-bottom:24px}:where(html[data-page="mobile-apps"]) .ma-solution p{font-size:15px;margin-top:12px}:where(html[data-page="mobile-apps"]) .ma-solution .ma-descriptor{font-size:12px;font-weight:500;margin-top:6px;color:#486884}
:where(html[data-page="mobile-apps"]) .ma-section-case-study{background:#fbf7ef}:where(html[data-page="mobile-apps"]) .ma-dark{background:#102039;color:#fff;padding:48px;border-radius:28px}:where(html[data-page="mobile-apps"]) .ma-section .ma-dark h2{color:#fff!important}:where(html[data-page="mobile-apps"]) .ma-section .ma-dark .ma-eyebrow{color:#ffd36a}:where(html[data-page="mobile-apps"]) .ma-section .ma-dark p{color:#c6d3e1}:where(html[data-page="mobile-apps"]) .ma-showcase-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center}:where(html[data-page="mobile-apps"]) .ma-showcase-grid .ma-heading{margin-bottom:28px}:where(html[data-page="mobile-apps"]) .ma-app-concept{position:relative;display:flex;justify-content:center;align-items:center;gap:0;min-height:420px;padding:20px 20px 44px}:where(html[data-page="mobile-apps"]) .ma-phone{width:48%;height:330px;background:#fffdf8;border:6px solid #416078;border-radius:28px;padding:28px 16px 18px;color:#102039;position:relative;overflow:hidden;box-shadow:0 18px 30px #0003}:where(html[data-page="mobile-apps"]) .ma-phone::before{content:'';position:absolute;top:0;left:32%;width:36%;height:10px;background:#416078;border-radius:0 0 10px 10px}:where(html[data-page="mobile-apps"]) .ma-phone-discover{transform:rotate(-7deg)}:where(html[data-page="mobile-apps"]) .ma-phone-saved{transform:rotate(6deg) translateY(16px);margin-left:-8px}:where(html[data-page="mobile-apps"]) .ma-phone-brand{display:block;font:800 11px/1.3 Manrope,sans-serif;margin-bottom:30px}:where(html[data-page="mobile-apps"]) .ma-phone-brand>span{color:#187d6b}:where(html[data-page="mobile-apps"]) .ma-phone>strong{font:800 24px/1.08 Manrope,sans-serif;letter-spacing:-.04em;display:block;margin-bottom:14px}:where(html[data-page="mobile-apps"]) .ma-section .ma-phone>p{font-size:10px;color:#5e748f;line-height:1.5}:where(html[data-page="mobile-apps"]) .ma-phone-art{height:95px;display:flex;align-items:flex-end;gap:8px;margin-top:24px}:where(html[data-page="mobile-apps"]) .ma-phone-art span{flex:1;height:64px;background:#e6b539;border-radius:40px 40px 10px 10px}:where(html[data-page="mobile-apps"]) .ma-phone-art span:nth-child(2){height:94px;background:#24b7a8}:where(html[data-page="mobile-apps"]) .ma-phone-art span:nth-child(3){height:78px;background:#f4b9cf}:where(html[data-page="mobile-apps"]) .ma-category-row{display:flex;justify-content:space-between;gap:6px;font-size:9px;margin-top:10px}:where(html[data-page="mobile-apps"]) .ma-saved-row{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid #e2e7ee;font:600 10px/1.4 Inter,sans-serif}:where(html[data-page="mobile-apps"]) .ma-saved-row .ma-icon{width:27px;height:27px;font-size:16px;border-radius:8px}:where(html[data-page="mobile-apps"]) .ma-saved-row>i{margin-left:auto;color:#9b6c88}:where(html[data-page="mobile-apps"]) .ma-phone-footer{font-size:9px;line-height:1.5;color:#5e748f;margin-top:24px}:where(html[data-page="mobile-apps"]) .ma-app-concept figcaption{position:absolute;bottom:0;left:0;width:100%;text-align:center;font-size:10px;color:#c6d3e1}:where(html[data-page="mobile-apps"]) .ma-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid #ffffff26;padding-top:28px;margin-top:36px}:where(html[data-page="mobile-apps"]) .ma-principle{display:flex;align-items:flex-start;gap:14px}:where(html[data-page="mobile-apps"]) .ma-principle .ma-icon{width:36px;height:36px;font-size:22px;border-radius:12px}:where(html[data-page="mobile-apps"]) .ma-principle h3{font-size:16px}:where(html[data-page="mobile-apps"]) .ma-principle p{font-size:12px;margin-top:6px}
:where(html[data-page="mobile-apps"]) .ma-process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}:where(html[data-page="mobile-apps"]) .ma-process li{position:relative;min-width:0}:where(html[data-page="mobile-apps"]) .ma-stage-top{display:flex;align-items:center;gap:16px;margin-bottom:24px;position:relative}:where(html[data-page="mobile-apps"]) .ma-stage-top::after{content:'';height:1px;background:#edd18c;flex:1;margin-left:8px}:where(html[data-page="mobile-apps"]) .ma-stage-number{font:700 14px/1 Inter,sans-serif;color:#897247}:where(html[data-page="mobile-apps"]) .ma-process p{font-size:15px;margin-top:12px}
:where(html[data-page="mobile-apps"]) .ma-section-why-kaxon{background:#fbf7ef}:where(html[data-page="mobile-apps"]) .ma-editorial{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:64px}:where(html[data-page="mobile-apps"]) .ma-editorial .ma-heading{margin-bottom:28px}:where(html[data-page="mobile-apps"]) .ma-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}:where(html[data-page="mobile-apps"]) .ma-benefit{display:flex;gap:16px;border-top:1px solid #e2e7ee;padding-top:20px}:where(html[data-page="mobile-apps"]) .ma-benefit .ma-icon{width:40px;height:40px;font-size:23px;border-radius:12px}:where(html[data-page="mobile-apps"]) .ma-benefit h3{font-size:17px}:where(html[data-page="mobile-apps"]) .ma-benefit p{font-size:14px;margin-top:8px}
:where(html[data-page="mobile-apps"]) .ma-section-tech-stack{padding:72px 0}:where(html[data-page="mobile-apps"]) .ma-tech-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}:where(html[data-page="mobile-apps"]) .ma-tech-group{border-top:1px solid #e2e7ee;padding:24px 0 0}:where(html[data-page="mobile-apps"]) .ma-tech-group>h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#486884;margin-bottom:16px}:where(html[data-page="mobile-apps"]) .ma-tech-row{display:flex;align-items:center;gap:16px;min-height:76px;border-bottom:1px solid #e2e7ee80;padding:12px 0}:where(html[data-page="mobile-apps"]) .ma-tech-row .ma-icon{width:36px;height:36px;font-size:25px;background:transparent}:where(html[data-page="mobile-apps"]) .ma-tech-row strong{font-size:16px;font-weight:700}:where(html[data-page="mobile-apps"]) .ma-tech-row p{font-size:12px;margin-top:4px}:where(html[data-page="mobile-apps"]) .ma-section-industries{background:#fbf7ef;padding:72px 0}:where(html[data-page="mobile-apps"]) .ma-industries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}:where(html[data-page="mobile-apps"]) .ma-industry{display:flex;align-items:center;gap:18px;border-bottom:1px solid #e2e7ee;padding:20px 0;min-height:88px}:where(html[data-page="mobile-apps"]) .ma-industry .ma-icon{width:44px;height:44px;font-size:25px}:where(html[data-page="mobile-apps"]) .ma-industry h3{font-size:18px}:where(html[data-page="mobile-apps"]) .ma-industry p{font-size:13px;margin-top:4px}
:where(html[data-page="mobile-apps"]) .ma-faq-layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px}:where(html[data-page="mobile-apps"]) .ma-faq-layout .ma-heading{margin-bottom:28px}:where(html[data-page="mobile-apps"]) .ma-faq-item{border-bottom:1px solid #e2e7ee}:where(html[data-page="mobile-apps"]) .ma-faq-item:first-child{border-top:1px solid #e2e7ee}:where(html[data-page="mobile-apps"]) .ma-section .ma-faq-item h3{font:inherit;letter-spacing:normal}:where(html[data-page="mobile-apps"]) .ma-faq-trigger{width:100%;min-height:64px;padding:24px 12px;border:0;background:transparent;color:#102039;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;font:700 18px/1.45 Manrope,sans-serif;cursor:pointer}:where(html[data-page="mobile-apps"]) .ma-faq-trigger[aria-expanded=true]{background:#fbf7ef}:where(html[data-page="mobile-apps"]) .ma-faq-symbol{width:20px;flex-shrink:0;text-align:center;font:400 25px/1 Inter,sans-serif;color:#936417}:where(html[data-page="mobile-apps"]) .ma-faq-answer{padding:12px 20px 24px;background:#fbf7ef}:where(html[data-page="mobile-apps"]) .ma-faq-answer[hidden]{display:none!important}:where(html[data-page="mobile-apps"]) .ma-faq-answer p{font-size:15px;line-height:1.7}
:where(html[data-page="mobile-apps"]) .ma-section-final-cta{background:#fbf7ef;padding:64px 0}:where(html[data-page="mobile-apps"]) .ma-closing{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}:where(html[data-page="mobile-apps"]) .ma-closing .ma-heading{margin:0}:where(html[data-page="mobile-apps"]) .ma-closing-action{text-align:right}:where(html[data-page="mobile-apps"]) .ma-section .ma-microcopy{font-size:12px;margin-top:14px}:where(html[data-page="mobile-apps"]) .ma-section .ma-closing .ma-note{color:#ffd36a;margin-top:24px;font-size:24px}:where(html[data-page="mobile-apps"]) .ma-closing .ma-note span{display:inline;padding:0;font-size:26px}
@media(max-width:1099px){:where(html[data-page="mobile-apps"]) .ma-section{padding-block:64px}:where(html[data-page="mobile-apps"]) .ma-section .ma-container{width:calc(100% - 48px)}:where(html[data-page="mobile-apps"]) .ma-section h2{font-size:36px!important}:where(html[data-page="mobile-apps"]) .ma-section-capabilities{padding-block:40px}:where(html[data-page="mobile-apps"]) .ma-section-trust-strip{padding-block:28px}:where(html[data-page="mobile-apps"]) .ma-solutions{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}:where(html[data-page="mobile-apps"]) .ma-solution{padding:24px}:where(html[data-page="mobile-apps"]) .ma-showcase-grid{grid-template-columns:1fr;gap:32px}:where(html[data-page="mobile-apps"]) .ma-dark{padding:36px}:where(html[data-page="mobile-apps"]) .ma-app-concept{max-width:520px;width:100%;margin:auto!important}:where(html[data-page="mobile-apps"]) .ma-showcase-grid .ma-heading{max-width:640px}:where(html[data-page="mobile-apps"]) .ma-process{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}:where(html[data-page="mobile-apps"]) .ma-editorial,:where(html[data-page="mobile-apps"]) .ma-faq-layout{grid-template-columns:1fr;gap:36px}:where(html[data-page="mobile-apps"]) .ma-editorial>.ma-heading{max-width:640px}:where(html[data-page="mobile-apps"]) .ma-benefits{gap:24px}:where(html[data-page="mobile-apps"]) .ma-tech-groups{gap:24px}:where(html[data-page="mobile-apps"]) .ma-section-tech-stack,:where(html[data-page="mobile-apps"]) .ma-section-industries{padding-block:56px}:where(html[data-page="mobile-apps"]) .ma-closing{grid-template-columns:1fr;gap:28px}:where(html[data-page="mobile-apps"]) .ma-closing-action{text-align:left}:where(html[data-page="mobile-apps"]) .ma-closing .ma-note{display:none}:where(html[data-page="mobile-apps"]) .ma-section-final-cta{padding-block:56px}}
@media(max-width:699px){:where(html[data-page="mobile-apps"]) .ma-section{padding-block:48px;font-size:15px}:where(html[data-page="mobile-apps"]) .ma-section .ma-container{width:calc(100% - 40px)}:where(html[data-page="mobile-apps"]) .ma-section h2{font-size:30px!important}:where(html[data-page="mobile-apps"]) .ma-heading{margin-bottom:32px}:where(html[data-page="mobile-apps"]) .ma-header-row{display:block}:where(html[data-page="mobile-apps"]) .ma-section .ma-note{display:none}:where(html[data-page="mobile-apps"]) .ma-section .ma-button{min-height:48px;padding:14px 20px}:where(html[data-page="mobile-apps"]) .ma-section-capabilities{padding-block:36px}:where(html[data-page="mobile-apps"]) .ma-capabilities{grid-template-columns:1fr;gap:24px}:where(html[data-page="mobile-apps"]) .ma-capability{display:flex;align-items:flex-start;gap:18px;padding:24px 0 0;border:0;border-top:1px solid #e2e7ee}:where(html[data-page="mobile-apps"]) .ma-capability:first-child{padding:0;border:0}:where(html[data-page="mobile-apps"]) .ma-capability:last-child{border-top:1px solid #e2e7ee;padding-top:24px}:where(html[data-page="mobile-apps"]) .ma-capability .ma-icon{margin:0}:where(html[data-page="mobile-apps"]) .ma-capability h3{font-size:18px}:where(html[data-page="mobile-apps"]) .ma-section-trust-strip{padding-block:28px}:where(html[data-page="mobile-apps"]) .ma-outcomes{grid-template-columns:1fr;gap:20px}:where(html[data-page="mobile-apps"]) .ma-outcome{justify-content:flex-start}:where(html[data-page="mobile-apps"]) .ma-section-trust-strip .ma-eyebrow{text-align:left}:where(html[data-page="mobile-apps"]) .ma-solutions{grid-template-columns:1fr;gap:16px}:where(html[data-page="mobile-apps"]) .ma-solution{min-height:0;padding:24px}:where(html[data-page="mobile-apps"]) .ma-dark{padding:24px;border-radius:24px}:where(html[data-page="mobile-apps"]) .ma-showcase-grid{gap:24px}:where(html[data-page="mobile-apps"]) .ma-app-concept{min-height:350px;padding:12px 0 40px}:where(html[data-page="mobile-apps"]) .ma-phone{height:270px;padding:24px 10px 12px;border-width:4px;border-radius:22px;width:50%}:where(html[data-page="mobile-apps"]) .ma-phone-brand{font-size:8px;margin-bottom:22px}:where(html[data-page="mobile-apps"]) .ma-phone>strong{font-size:20px}:where(html[data-page="mobile-apps"]) .ma-phone-art{height:70px;margin-top:16px;gap:5px}:where(html[data-page="mobile-apps"]) .ma-phone-art span{height:45px}:where(html[data-page="mobile-apps"]) .ma-phone-art span:nth-child(2){height:68px}:where(html[data-page="mobile-apps"]) .ma-phone-art span:nth-child(3){height:55px}:where(html[data-page="mobile-apps"]) .ma-category-row{font-size:7px}:where(html[data-page="mobile-apps"]) .ma-saved-row{gap:5px;font-size:8px;padding:9px 0}:where(html[data-page="mobile-apps"]) .ma-saved-row .ma-icon{width:21px;height:21px;font-size:13px;border-radius:6px}:where(html[data-page="mobile-apps"]) .ma-saved-row>i{display:none}:where(html[data-page="mobile-apps"]) .ma-phone-footer{font-size:8px;margin-top:16px}:where(html[data-page="mobile-apps"]) .ma-app-concept figcaption{font-size:9px}:where(html[data-page="mobile-apps"]) .ma-principles{grid-template-columns:1fr;gap:20px;margin-top:24px;padding-top:24px}:where(html[data-page="mobile-apps"]) .ma-process{grid-template-columns:1fr;gap:28px}:where(html[data-page="mobile-apps"]) .ma-process li{padding-left:76px;min-height:110px}:where(html[data-page="mobile-apps"]) .ma-stage-top{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:8px;margin:0}:where(html[data-page="mobile-apps"]) .ma-stage-top::after{display:none}:where(html[data-page="mobile-apps"]) .ma-process li:not(:last-child)::after{content:'';position:absolute;top:87px;bottom:-20px;left:25px;width:1px;background:#edd18c}:where(html[data-page="mobile-apps"]) .ma-process h3{padding-top:4px}:where(html[data-page="mobile-apps"]) .ma-benefits{grid-template-columns:1fr}:where(html[data-page="mobile-apps"]) .ma-editorial,:where(html[data-page="mobile-apps"]) .ma-faq-layout{gap:28px}:where(html[data-page="mobile-apps"]) .ma-tech-groups{grid-template-columns:1fr;gap:24px}:where(html[data-page="mobile-apps"]) .ma-tech-group{padding-top:20px}:where(html[data-page="mobile-apps"]) .ma-section-tech-stack,:where(html[data-page="mobile-apps"]) .ma-section-industries{padding-block:44px}:where(html[data-page="mobile-apps"]) .ma-industries{grid-template-columns:1fr}:where(html[data-page="mobile-apps"]) .ma-industry{padding:20px 0}:where(html[data-page="mobile-apps"]) .ma-faq-trigger{padding:20px 10px;gap:14px;font-size:17px}:where(html[data-page="mobile-apps"]) .ma-faq-answer{padding:12px 12px 20px}:where(html[data-page="mobile-apps"]) .ma-section-final-cta{padding-block:40px}:where(html[data-page="mobile-apps"]) .ma-closing{padding:28px;gap:24px}:where(html[data-page="mobile-apps"]) .ma-closing .ma-button{width:100%}}
@media(max-width:359px){:where(html[data-page="mobile-apps"]) .ma-dark{padding:20px}:where(html[data-page="mobile-apps"]) .ma-phone>strong{font-size:17px}:where(html[data-page="mobile-apps"]) .ma-phone-brand{font-size:7px}:where(html[data-page="mobile-apps"]) .ma-phone{padding-inline:8px}:where(html[data-page="mobile-apps"]) .ma-saved-row .ma-icon{display:none}:where(html[data-page="mobile-apps"]) .ma-section h2{overflow-wrap:anywhere}:where(html[data-page="mobile-apps"]) .ma-closing{padding:24px}:where(html[data-page="mobile-apps"]) .ma-app-concept{min-height:330px}:where(html[data-page="mobile-apps"]) .ma-phone{height:250px}}
@media(max-width:699px){:where(html[data-page="mobile-apps"]) .ma-outcomes{flex-direction:column;align-items:stretch}:where(html[data-page="mobile-apps"]) .ma-outcome{border-left:0;border-top:1px solid #e2e7ee;padding:16px 0 0}:where(html[data-page="mobile-apps"]) .ma-outcome:first-child{border-top:0;padding-top:0}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="mobile-apps"]) .ma-section .ma-button{transition:none}:where(html[data-page="mobile-apps"]) .ma-section .ma-button:hover{transform:none}:where(html[data-page="mobile-apps"]) .ma-section .ma-button:active{transform:none}:where(html[data-page="mobile-apps"]) .ma-capability .ma-icon,:where(html[data-page="mobile-apps"]) .ma-outcome .ma-icon{transition:none}:where(html[data-page="mobile-apps"]) .ma-capability:hover .ma-icon,:where(html[data-page="mobile-apps"]) .ma-outcome:hover .ma-icon{transform:none}}

/* ==========================================================================
   CONNECTED APPROACH — connected journey + business capabilities (v2)
   ========================================================================== */
:where(html[data-page="mobile-apps"]) .ca-section{--ca-navy:#082E5D;--ca-body:#506F95;--ca-strong:#315B87;--ca-border:rgba(8,46,93,.05);background:#FCF9F2;padding:96px 0 88px}
:where(html[data-page="mobile-apps"]) .ca-section .ca-heading{position:relative;max-width:100%}
:where(html[data-page="mobile-apps"]) .ca-section .ca-eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0;font:700 14px/1.4 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#315B87}
:where(html[data-page="mobile-apps"]) .ca-eyebrow-dot{width:8px;height:8px;border-radius:50%;background:#F3B51C;box-shadow:0 0 0 7px rgba(243,181,28,.14);flex-shrink:0}
:where(html[data-page="mobile-apps"]) .ca-section .ca-title{max-width:850px!important;margin:30px 0 0;font-family:Manrope,Inter,sans-serif;font-size:clamp(64px,5.4vw,92px)!important;font-weight:800;line-height:.98;letter-spacing:-.055em;color:#082E5D!important}
:where(html[data-page="mobile-apps"]) .ca-note{position:absolute;right:3%;top:150px;margin:0;max-width:180px;font:500 30px/1.1 Caveat,cursive;color:#315B87;transform:rotate(-1deg)}
:where(html[data-page="mobile-apps"]) .ca-note-arrow{display:block;width:80px;height:64px;margin:2px 0 0 48px}
/* Connected journey */
:where(html[data-page="mobile-apps"]) .ca-journey{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:64px;padding-top:54px}
:where(html[data-page="mobile-apps"]) .ca-flow{position:absolute;top:-2px;left:0;right:0;width:100%;height:100px;z-index:1;pointer-events:none}
:where(html[data-page="mobile-apps"]) .ca-step{position:relative;z-index:2;min-width:0;background:rgba(255,253,249,.9);border:1px solid rgba(8,46,93,.045);border-radius:30px;min-height:255px;padding:76px 34px 32px;text-align:center;box-shadow:0 16px 44px rgba(12,46,88,.045);transition:transform .22s ease-out,box-shadow .22s ease-out}
:where(html[data-page="mobile-apps"]) .ca-step:hover{transform:translateY(-5px);box-shadow:0 22px 58px rgba(12,46,88,.07)}
:where(html[data-page="mobile-apps"]) .ca-step-icon{position:absolute;top:-62px;left:50%;transform:translateX(-50%);display:grid;place-items:center}
:where(html[data-page="mobile-apps"]) .ca-halo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
:where(html[data-page="mobile-apps"]) .ca-halo-outer{width:178px;height:178px;opacity:.35}
:where(html[data-page="mobile-apps"]) .ca-halo-inner{width:150px;height:150px;opacity:1}
:where(html[data-page="mobile-apps"]) .ca-tile{position:relative;width:116px;height:116px;border-radius:28px;display:grid;place-items:center;font-size:42px;border:1px solid rgba(255,255,255,.85);box-shadow:0 18px 36px rgba(12,46,88,.06);transition:transform .22s ease}
:where(html[data-page="mobile-apps"]) .ca-step:hover .ca-tile{transform:scale(1.035)}
:where(html[data-page="mobile-apps"]) .ca-step-gold .ca-tile{background:#FFF0BE;color:#D69100}
:where(html[data-page="mobile-apps"]) .ca-step-gold .ca-halo{background:rgba(243,181,28,.12)}
:where(html[data-page="mobile-apps"]) .ca-step-mint .ca-tile{background:#D9F5EF;color:#119C80}
:where(html[data-page="mobile-apps"]) .ca-step-mint .ca-halo{background:rgba(88,209,186,.12)}
:where(html[data-page="mobile-apps"]) .ca-step-blue .ca-tile{background:#E2ECFF;color:#246BEA}
:where(html[data-page="mobile-apps"]) .ca-step-blue .ca-halo{background:rgba(126,170,252,.14)}
:where(html[data-page="mobile-apps"]) .ca-step-title{margin:0;font:750 23px/1.2 Manrope,sans-serif;color:#082E5D}
:where(html[data-page="mobile-apps"]) .ca-step-desc{margin:12px auto 0;max-width:400px;font:400 18px/1.55 Inter,sans-serif;color:#506F95}
:where(html[data-page="mobile-apps"]) .ca-accent{display:block;width:42px;height:2px;margin:24px auto 0;border-radius:999px}
:where(html[data-page="mobile-apps"]) .ca-step-gold .ca-accent{background:#F3B51C}
:where(html[data-page="mobile-apps"]) .ca-step-mint .ca-accent{background:#58D1BA}
:where(html[data-page="mobile-apps"]) .ca-step-blue .ca-accent{background:#7EAAFC}
/* Transition divider */
:where(html[data-page="mobile-apps"]) .ca-divider{display:flex;align-items:center;margin:52px 0 32px}
:where(html[data-page="mobile-apps"]) .ca-divider-line{flex:1;height:1px;background:#DFE5EA}
:where(html[data-page="mobile-apps"]) .ca-divider-node{width:24px;height:24px;border-radius:50%;background:#F1F3F5;position:relative;flex-shrink:0}
:where(html[data-page="mobile-apps"]) .ca-divider-node::after{content:'';position:absolute;inset:8px;border-radius:50%;background:#CDD5DF}
/* Capabilities panel */
:where(html[data-page="mobile-apps"]) .ca-panel{position:relative;z-index:2;background:rgba(255,253,249,.93);border:1px solid rgba(8,46,93,.04);border-radius:34px;padding:46px 54px 38px;box-shadow:0 22px 60px rgba(12,46,88,.04)}
:where(html[data-page="mobile-apps"]) .ca-section .ca-panel-title{max-width:950px!important;margin:0 0 32px;font:800 clamp(38px,3.1vw,54px)/1.05 Manrope,sans-serif;letter-spacing:-.04em;color:#082E5D!important}
:where(html[data-page="mobile-apps"]) .ca-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
:where(html[data-page="mobile-apps"]) .ca-item{display:grid;grid-template-columns:86px minmax(0,1fr);column-gap:26px;align-items:start;min-height:118px;padding:8px 36px;position:relative}
:where(html[data-page="mobile-apps"]) .ca-item:not(:first-child)::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:1px;background:#DFE5EA}
:where(html[data-page="mobile-apps"]) .ca-item-icon{width:76px;height:76px;border-radius:20px;display:grid;place-items:center;font-size:34px}
:where(html[data-page="mobile-apps"]) .ca-item-gold{background:#FFF0BE;color:#D69100}
:where(html[data-page="mobile-apps"]) .ca-item-mint{background:#D9F5EF;color:#119C80}
:where(html[data-page="mobile-apps"]) .ca-item-blue{background:#E2ECFF;color:#246BEA}
:where(html[data-page="mobile-apps"]) .ca-item-text h3{margin:0;font:750 20px/1.25 Manrope,sans-serif;color:#082E5D}
:where(html[data-page="mobile-apps"]) .ca-item-text p{margin:8px 0 0;font:400 16px/1.45 Inter,sans-serif;color:#506F95}
:where(html[data-page="mobile-apps"]) .ca-arrow{display:inline-grid;place-items:center;width:42px;height:42px;margin-top:15px;border-radius:50%;background:#F5F7FA;color:#246BEA;font-size:16px;transition:transform .18s ease,background .18s ease}
:where(html[data-page="mobile-apps"]) .ca-item:hover .ca-arrow{transform:translateX(3px);background:#EEF3FC}
/* Reveal animation (JS-gated) */
:where(html[data-page="mobile-apps"]) .ca-prep .ca-reveal{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}
:where(html[data-page="mobile-apps"]) .ca-prep .ca-flow{transform:none}
:where(html[data-page="mobile-apps"]) .ca-prep.ca-is-visible .ca-reveal{opacity:1;transform:none}
/* Tablet */
@media(max-width:1199px){
  :where(html[data-page="mobile-apps"]) .ca-section{padding:72px 0 64px}
  :where(html[data-page="mobile-apps"]) .ca-section .ca-title{font-size:58px!important}
  :where(html[data-page="mobile-apps"]) .ca-note{top:124px;font-size:26px}
  :where(html[data-page="mobile-apps"]) .ca-note-arrow{width:60px;height:50px;margin-left:30px}
  :where(html[data-page="mobile-apps"]) .ca-journey{gap:22px;margin-top:52px}
  :where(html[data-page="mobile-apps"]) .ca-step{padding:44px 22px 26px;min-height:0}
  :where(html[data-page="mobile-apps"]) .ca-step-icon{top:-42px}
  :where(html[data-page="mobile-apps"]) .ca-halo-inner{width:120px;height:120px}
  :where(html[data-page="mobile-apps"]) .ca-halo-outer{width:148px;height:148px}
  :where(html[data-page="mobile-apps"]) .ca-tile{width:96px;height:96px;border-radius:24px;font-size:34px}
  :where(html[data-page="mobile-apps"]) .ca-step-title{font-size:20px}
  :where(html[data-page="mobile-apps"]) .ca-step-desc{font-size:16px}
  :where(html[data-page="mobile-apps"]) .ca-flow{top:-22px}
  :where(html[data-page="mobile-apps"]) .ca-panel{padding:38px 34px 32px}
  :where(html[data-page="mobile-apps"]) .ca-item{grid-template-columns:64px minmax(0,1fr);column-gap:18px;padding:8px 22px}
  :where(html[data-page="mobile-apps"]) .ca-item-icon{width:58px;height:58px;border-radius:16px;font-size:28px}
}
@media(max-width:849px){
  :where(html[data-page="mobile-apps"]) .ca-items{grid-template-columns:1fr}
  :where(html[data-page="mobile-apps"]) .ca-item{padding:14px 0}
  :where(html[data-page="mobile-apps"]) .ca-item:not(:first-child)::before{left:0;top:0;bottom:auto;width:auto;height:1px}
}
/* Mobile: vertical journey */
@media(max-width:767px){
  :where(html[data-page="mobile-apps"]) .ca-section{padding:56px 0 48px}
  :where(html[data-page="mobile-apps"]) .ca-section .ca-title{font-size:42px!important;line-height:1.02}
  :where(html[data-page="mobile-apps"]) .ca-note{position:static;margin:18px 0 0;max-width:none;font-size:23px}
  :where(html[data-page="mobile-apps"]) .ca-note-arrow{width:56px;height:42px;margin:2px 0 0 12px}
  :where(html[data-page="mobile-apps"]) .ca-journey{display:block;margin-top:40px;padding-top:14px}
  :where(html[data-page="mobile-apps"]) .ca-flow{display:none}
  :where(html[data-page="mobile-apps"]) .ca-step{display:block;text-align:left;min-height:auto;padding:26px 24px 26px 84px;border-radius:24px;margin-bottom:24px}
  :where(html[data-page="mobile-apps"]) .ca-step:last-child{margin-bottom:0}
  :where(html[data-page="mobile-apps"]) .ca-step:hover{transform:none;box-shadow:0 16px 44px rgba(12,46,88,.045)}
  :where(html[data-page="mobile-apps"]) .ca-step-icon{top:24px;left:18px;transform:none}
  :where(html[data-page="mobile-apps"]) .ca-halo{display:none}
  :where(html[data-page="mobile-apps"]) .ca-tile{width:54px;height:54px;border-radius:14px;font-size:24px}
  :where(html[data-page="mobile-apps"]) .ca-step-title{text-align:left}
  :where(html[data-page="mobile-apps"]) .ca-step-desc{margin:10px 0 0;max-width:none}
  :where(html[data-page="mobile-apps"]) .ca-accent{margin:18px 0 0}
  :where(html[data-page="mobile-apps"]) .ca-divider{margin:36px 0 28px}
  :where(html[data-page="mobile-apps"]) .ca-panel{padding:30px 20px;border-radius:26px}
  :where(html[data-page="mobile-apps"]) .ca-section .ca-panel-title{font-size:34px!important;margin-bottom:22px}
  :where(html[data-page="mobile-apps"]) .ca-arrow{width:40px;height:40px}
}
@media(max-width:600px){:where(html[data-page="mobile-apps"]) .ca-note-arrow{display:none}}
@media(prefers-reduced-motion:reduce){
  :where(html[data-page="mobile-apps"]) .ca-prep .ca-reveal{opacity:1;transform:none;transition:none}
  :where(html[data-page="mobile-apps"]) .ca-step,:where(html[data-page="mobile-apps"]) .ca-tile,:where(html[data-page="mobile-apps"]) .ca-arrow{transition:none}
  :where(html[data-page="mobile-apps"]) .ca-step:hover,:where(html[data-page="mobile-apps"]) .ca-step:hover .ca-tile,:where(html[data-page="mobile-apps"]) .ca-item:hover .ca-arrow{transform:none}
}
/* ==========================================================================
   APP DEVELOPMENT PROCESS — interactive product journey
   ========================================================================== */
:where(html[data-page="mobile-apps"]) .ap-section{--ap-navy:#0D2346;--ap-navy2:#16325D;--ap-body:#4F6C96;padding:84px 0 72px;overflow-x:hidden}
:where(html[data-page="mobile-apps"]) .ma-section .ap-heading{max-width:780px!important;margin:0 0 0;font:800 clamp(48px,4.8vw,72px)/0.95 Manrope,Inter,sans-serif!important;letter-spacing:-.045em;color:#0D2346!important}
:where(html[data-page="mobile-apps"]) .ap-header{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);column-gap:56px;align-items:start}
:where(html[data-page="mobile-apps"]) .ap-eyebrow{font:700 13px/1.4 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#355B8B;margin-bottom:18px}
:where(html[data-page="mobile-apps"]) .ap-mark{position:relative;display:inline-block}
:where(html[data-page="mobile-apps"]) .ap-mark svg{position:absolute;left:-2%;bottom:-8px;width:104%;height:12px;pointer-events:none}
:where(html[data-page="mobile-apps"]) .ap-intro{font:400 18px/1.55 Inter,sans-serif;color:#4F6C96;max-width:720px;margin:20px 0 0}
:where(html[data-page="mobile-apps"]) .ap-annotation{position:relative;margin:0;text-align:center;font:500 30px/1.15 Caveat,cursive;color:#B57300;transform:rotate(-3deg);justify-self:end;padding-top:14px}
:where(html[data-page="mobile-apps"]) .ap-annotation-arrow{display:block;width:86px;height:74px;margin:6px auto 0}
:where(html[data-page="mobile-apps"]) .ap-annotation-spark{position:absolute;right:-6px;top:0;width:18px;height:18px}
/* Process rail */
:where(html[data-page="mobile-apps"]) .ap-rail{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:20px;margin-top:34px}
:where(html[data-page="mobile-apps"]) .ap-rail-line{position:absolute;left:32px;right:calc((100% - 100px)/6 - 32px);bottom:0;height:0;border-top:2px dashed #C3D2E4;z-index:0}
:where(html[data-page="mobile-apps"]) .ap-rail-progress{position:absolute;left:32px;bottom:0;height:2px;background:#F0AD13;border-radius:2px;z-index:1;width:0;transition:width 380ms cubic-bezier(.22,1,.36,1)}
:where(html[data-page="mobile-apps"]) .ap-step{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:center;text-align:left;background:transparent;border:0;padding:0 0 18px;cursor:pointer;font:inherit;z-index:2}
:where(html[data-page="mobile-apps"]) .ap-step-icon{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-size:30px;transition:transform 160ms ease;flex-shrink:0}
:where(html[data-page="mobile-apps"]) .ap-step-num{display:block;font:700 15px/1 Inter,sans-serif;color:#516B94}
:where(html[data-page="mobile-apps"]) .ap-step-name{display:block;font:700 16px/1.15 Manrope,Inter,sans-serif;color:#17365F;margin-top:4px;transition:color 160ms ease}
:where(html[data-page="mobile-apps"]) .ap-step-marker{position:absolute;bottom:-9px;left:calc(32px - 8px);width:14px;height:14px;border-radius:999px;background:#FCFBF8;border:2px solid #6380A8;z-index:2;transition:all 260ms cubic-bezier(.22,1,.36,1)}
:where(html[data-page="mobile-apps"]) .ap-step.is-active .ap-step-marker{width:18px;height:18px;left:calc(32px - 9px);bottom:-9px;background:#F0AD13;border:4px solid #FFF2CE;box-shadow:0 0 0 4px rgba(240,173,19,.08)}
:where(html[data-page="mobile-apps"]) .ap-step:hover .ap-step-icon{transform:translateY(-2px)}
:where(html[data-page="mobile-apps"]) .ap-step:hover .ap-step-name{color:#0D2346}
:where(html[data-page="mobile-apps"]) .ap-step:focus-visible{outline:3px solid rgba(47,102,217,.28);outline-offset:3px;border-radius:8px}
:where(html[data-page="mobile-apps"]) .ap-step[data-step="strategy"] .ap-step-icon{background:#FFF0C5;color:#C98500}
:where(html[data-page="mobile-apps"]) .ap-step[data-step="planning"] .ap-step-icon{background:#E7F4F1;color:#328A85}
:where(html[data-page="mobile-apps"]) .ap-step[data-step="ux-ui"] .ap-step-icon{background:#E4EEFD;color:#2E68D9}
:where(html[data-page="mobile-apps"]) .ap-step[data-step="development"] .ap-step-icon{background:#F2F3F6;color:#637491}
:where(html[data-page="mobile-apps"]) .ap-step[data-step="launch"] .ap-step-icon{background:#EEE8FC;color:#7058D1}
:where(html[data-page="mobile-apps"]) .ap-step[data-step="grow"] .ap-step-icon{background:#EDF3FB;color:#506D9B}
/* Feature panel */
:where(html[data-page="mobile-apps"]) .ap-panel{position:relative;margin-top:34px;border:1px solid #F0E6CD;border-radius:24px;background:linear-gradient(90deg,#FFFDF9 0%,#FFF9EE 54%,#FFFDF9 100%);overflow:hidden;box-shadow:0 12px 40px rgba(13,35,70,.035)}
:where(html[data-page="mobile-apps"]) .ap-stage{display:grid;grid-template-columns:.92fr 1.42fr;min-height:520px}
:where(html[data-page="mobile-apps"]) .ap-stage-copy{position:relative;padding:64px 32px 30px 42px;z-index:2;min-width:0}
:where(html[data-page="mobile-apps"]) .ap-giant-num{position:absolute;top:8px;left:26px;font:800 118px/1 Manrope,Inter,sans-serif;letter-spacing:-.06em;color:rgba(232,188,88,.14);pointer-events:none}
:where(html[data-page="mobile-apps"]) .ma-section .ap-stage-label{font:700 12px/1.4 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#5A7192;margin:0 0 20px}
:where(html[data-page="mobile-apps"]) .ma-section .ap-stage-title{max-width:500px;margin:0;font:800 clamp(34px,3.4vw,52px)/0.98 Manrope,Inter,sans-serif;letter-spacing:-.04em;color:#0D2346}
:where(html[data-page="mobile-apps"]) .ap-stage-desc{font:400 17px/1.55 Inter,sans-serif;color:#536C90;max-width:560px;margin:20px 0 0}
:where(html[data-page="mobile-apps"]) .ap-checklist{list-style:none;display:grid;gap:11px;margin:22px 0 0;padding:0}
:where(html[data-page="mobile-apps"]) .ap-checklist li{display:flex;gap:11px;align-items:center;font:400 15px/1.35 Inter,sans-serif;color:#415C84}
:where(html[data-page="mobile-apps"]) .ap-check{width:24px;height:24px;border-radius:8px;background:#FFF0C8;color:#E0A009;display:grid;place-items:center;font-size:13px;flex-shrink:0}
:where(html[data-page="mobile-apps"]) .ap-outcome{display:flex;align-items:center;gap:14px;max-width:460px;margin-top:24px;padding:14px 18px;border-radius:14px;background:linear-gradient(90deg,#FFF4D6,#FFF0C8)}
:where(html[data-page="mobile-apps"]) .ap-outcome-icon{font-size:26px;color:#C98500;flex-shrink:0}
:where(html[data-page="mobile-apps"]) .ap-outcome-label{display:block;font:700 13px/1.2 Inter,sans-serif;color:#DD9400}
:where(html[data-page="mobile-apps"]) .ap-outcome strong{display:block;font:700 17px/1.25 Manrope,Inter,sans-serif;color:#0D2346;margin-top:2px}
/* Stage visual */
:where(html[data-page="mobile-apps"]) .ap-stage-visual{position:relative;min-height:500px;padding:28px 30px 24px 0;display:flex;align-items:center;justify-content:center}
:where(html[data-page="mobile-apps"]) .ap-orb{position:absolute;border-radius:50%;pointer-events:none}
:where(html[data-page="mobile-apps"]) .ap-orb-1{width:220px;height:220px;left:4%;top:34%;background:rgba(255,222,162,.26)}
:where(html[data-page="mobile-apps"]) .ap-orb-2{width:200px;height:200px;left:38%;top:26%;background:rgba(211,235,255,.38)}
:where(html[data-page="mobile-apps"]) .ap-orb-3{width:230px;height:230px;right:6%;top:6%;background:rgba(250,224,213,.32)}
:where(html[data-page="mobile-apps"]) .ap-mockup{position:relative;z-index:2;width:min(82%,780px)}
:where(html[data-page="mobile-apps"]) .ap-mockup-screen{aspect-ratio:16/10;background:#fff;border:10px solid #101B2E;border-radius:14px 14px 0 0;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 26px 48px rgba(13,35,70,.18)}
:where(html[data-page="mobile-apps"]) .ap-mockup-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid #EDF0F2;flex-shrink:0}
:where(html[data-page="mobile-apps"]) .ap-mockup-address{font:500 10px/1 Inter,sans-serif;color:#8DA0B6}
:where(html[data-page="mobile-apps"]) .ap-mockup-dots{display:flex;gap:5px}
:where(html[data-page="mobile-apps"]) .ap-mockup-dots b{width:8px;height:8px;border-radius:50%}
:where(html[data-page="mobile-apps"]) .ap-mockup-dots b:nth-child(1){background:#F26D5F}
:where(html[data-page="mobile-apps"]) .ap-mockup-dots b:nth-child(2){background:#F2B52A}
:where(html[data-page="mobile-apps"]) .ap-mockup-dots b:nth-child(3){background:#3DBB61}
:where(html[data-page="mobile-apps"]) .ap-mockup-body{flex:1;display:grid;grid-template-columns:44px minmax(0,1fr);min-height:0}
:where(html[data-page="mobile-apps"]) .ap-mockup-side{border-right:1px solid #F1F4F8;padding:12px 11px;display:grid;gap:10px;align-content:start;justify-items:center}
:where(html[data-page="mobile-apps"]) .ap-mockup-side span{width:20px;height:20px;border-radius:6px;background:#F1F4F8}
:where(html[data-page="mobile-apps"]) .ap-mockup-canvas{padding:16px 20px;min-width:0}
:where(html[data-page="mobile-apps"]) .ap-viz-title{font:700 15px/1.2 Manrope,Inter,sans-serif;color:#0D2346;margin:0 0 14px}
:where(html[data-page="mobile-apps"]) .ap-mindmap{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto 1fr;
  column-gap:24px;
  row-gap:16px;
  align-items:start
}
:where(html[data-page="mobile-apps"]) .ap-mindmap-center{
  grid-column:1;
  grid-row:1 / span 2;
  justify-self:center;
  align-self:start;
  background:#0D2346;
  color:#fff;
  font:700 14px/1.2 Manrope,Inter,sans-serif;
  padding:14px 16px;
  border-radius:10px;
  white-space:nowrap
}
:where(html[data-page="mobile-apps"]) .ap-mindmap-trunk{
  grid-column:1;
  grid-row:1 / span 2;
  justify-self:center;
  align-self:center;
  width:2px;
  height:100%;
  min-height:120px;
  background:#C9D6E8;
  margin-top:8px
}
:where(html[data-page="mobile-apps"]) .ap-mindmap-branches{
  grid-column:2;
  grid-row:1 / span 2;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;
  min-width:0
}
:where(html[data-page="mobile-apps"]) .ap-branch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:8px;
  font:700 12.5px/1.2 Inter,sans-serif;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%
}
:where(html[data-page="mobile-apps"]) .ap-branch-blue{background:#DDEBFF;color:#2467D6}
:where(html[data-page="mobile-apps"]) .ap-branch-mint{background:#DDF4EC;color:#198F7E}
:where(html[data-page="mobile-apps"]) .ap-branch-gold{background:#FFF2CC;color:#B47900}
:where(html[data-page="mobile-apps"]) .ap-branch-pink{background:#F9E1EC;color:#CC3E7E}
:where(html[data-page="mobile-apps"]) .ap-mockup-base{height:13px;width:112%;margin-left:-6%;background:linear-gradient(#EEF1F5,#D9DFE8);border-radius:0 0 14px 14px;position:relative}
:where(html[data-page="mobile-apps"]) .ap-mockup-base::after{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);width:72px;height:5px;background:#C6CFDB;border-radius:0 0 8px 8px}
/* Floating cards */
:where(html[data-page="mobile-apps"]) .ap-float{position:absolute;z-index:3;background:#fff;border-radius:16px;box-shadow:0 15px 28px rgba(13,35,70,.11);padding:16px 18px}
:where(html[data-page="mobile-apps"]) .ap-float-left{left:3%;top:17%;width:212px;transform:rotate(-7deg)}
:where(html[data-page="mobile-apps"]) .ap-float-right{right:2%;top:27%;width:200px;transform:rotate(7deg)}
:where(html[data-page="mobile-apps"]) .ap-float-title{display:flex;align-items:center;gap:9px;font:800 13.5px/1.2 Manrope,Inter,sans-serif;color:#0D2346;margin:0 0 10px}
:where(html[data-page="mobile-apps"]) .ap-float-ico{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;font-size:15px;flex-shrink:0}
:where(html[data-page="mobile-apps"]) .ap-float-ico-blue{background:#E5F0FF;color:#2966D9}
:where(html[data-page="mobile-apps"]) .ap-float-ico-mint{background:#E7F6DF;color:#2F9F74}
:where(html[data-page="mobile-apps"]) .ap-float ul{list-style:none;display:grid;gap:8px;margin:0;padding:0}
:where(html[data-page="mobile-apps"]) .ap-float li{display:flex;gap:9px;align-items:center;font:400 12.5px/1.3 Inter,sans-serif;color:#41536F}
:where(html[data-page="mobile-apps"]) .ap-tick{width:18px;height:18px;border-radius:5px;border:1.5px solid #D4DAE2;display:grid;place-items:center;font-size:11px;color:transparent;flex-shrink:0}
:where(html[data-page="mobile-apps"]) .ap-tick-on{background:#DFF3E7;color:#2F9F74;border-color:transparent}
/* Sticky note + hand note */
:where(html[data-page="mobile-apps"]) .ap-sticky{position:absolute;right:7%;top:5%;width:126px;padding:12px 14px;background:#fff;border-radius:12px;box-shadow:0 10px 22px rgba(13,35,70,.08);transform:rotate(-5deg);font:500 20px/1.15 Caveat,cursive;color:#0D2346;z-index:3}
:where(html[data-page="mobile-apps"]) .ap-sticky-mark{border-bottom:2px solid #F0AD13;padding-bottom:1px}
:where(html[data-page="mobile-apps"]) .ap-sticky-spark{position:absolute;top:-11px;left:-9px;font-size:15px;color:#EFAF16}
:where(html[data-page="mobile-apps"]) .ap-hand{position:absolute;left:12%;bottom:10%;margin:0;font:600 22px/1.15 Caveat,cursive;color:#7790B0;transform:rotate(-4deg)}
:where(html[data-page="mobile-apps"]) .ap-hand svg{display:block;width:52px;height:36px;margin:2px 0 0 26px}
/* Collaboration bar — base (mobile & tablet: stacked) */
:where(html[data-page="mobile-apps"]) .ap-collab{
  grid-column:1 / -1;
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  align-items:center;
  border-top:1px solid #E9E3D7;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:18px
}
:where(html[data-page="mobile-apps"]) .ap-collab-divider{display:none}
:where(html[data-page="mobile-apps"]) .ma-section .ap-cta{
  width:100%;
  justify-self:stretch
}
/* Desktop only: 3 items in row 1, CTA centered in row 2 */
@media(min-width:1100px){
  :where(html[data-page="mobile-apps"]) .ap-collab{
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:auto auto;
    gap:18px;
    padding:20px 28px
  }
  :where(html[data-page="mobile-apps"]) .ap-collab-item:nth-child(1){grid-column:1;grid-row:1}
  :where(html[data-page="mobile-apps"]) .ap-collab-item:nth-child(2){grid-column:2;grid-row:1}
  :where(html[data-page="mobile-apps"]) .ap-collab-item:nth-child(3){grid-column:3;grid-row:1}
  :where(html[data-page="mobile-apps"]) .ma-section .ap-cta{
    grid-column:1 / -1;
    grid-row:2;
    justify-self:center;
    width:auto;
    max-width:360px
  }
}
:where(html[data-page="mobile-apps"]) .ap-collab-item{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;align-items:center;min-width:0}
:where(html[data-page="mobile-apps"]) .ap-collab-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:23px;flex-shrink:0}
:where(html[data-page="mobile-apps"]) .ap-collab-blue{background:#E5F0FF;color:#2966D9}
:where(html[data-page="mobile-apps"]) .ap-collab-green{background:#E7F6DF;color:#2F9F74}
:where(html[data-page="mobile-apps"]) .ap-collab-sky{background:#E4F1FF;color:#2189D8}
:where(html[data-page="mobile-apps"]) .ap-collab-item strong{display:block;font:700 14.5px/1.25 Manrope,Inter,sans-serif;color:#0D2346}
:where(html[data-page="mobile-apps"]) .ap-collab-item span{display:block;font:400 13px/1.3 Inter,sans-serif;color:#5C6D86;margin-top:2px}
:where(html[data-page="mobile-apps"]) .ap-collab-divider{width:1px;height:42px;background:#E2E7EE}
:where(html[data-page="mobile-apps"]) .ma-section .ap-cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:58px;padding:0 28px;border-radius:999px;background:#0D2346;color:#fff;font:700 15.5px/1 Inter,sans-serif;text-decoration:none;white-space:nowrap;transition:transform 180ms ease,background 180ms ease,box-shadow 180ms ease}
:where(html[data-page="mobile-apps"]) .ap-cta .ph-arrow-right{color:#F2B21B;font-size:18px}
:where(html[data-page="mobile-apps"]) .ma-section .ap-cta:hover{transform:translateY(-2px);background:#16325D;box-shadow:0 12px 24px rgba(13,35,70,.16)}
:where(html[data-page="mobile-apps"]) .ap-cta:focus-visible{outline:3px solid rgba(47,102,217,.28);outline-offset:3px}
/* Stage change transition */
:where(html[data-page="mobile-apps"]) .ap-swap{animation:page-mobile-apps-apSwap 260ms cubic-bezier(.22,1,.36,1)}
@keyframes page-mobile-apps-apSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Idle float (large desktop only) */
@media(min-width:1100px){
  :where(html[data-page="mobile-apps"]) .ap-float-left{animation:page-mobile-apps-apFloat 5.2s ease-in-out infinite alternate}
  :where(html[data-page="mobile-apps"]) .ap-float-right{animation:page-mobile-apps-apFloat 6s ease-in-out 1s infinite alternate}
}
@keyframes page-mobile-apps-apFloat{from{margin-top:0}to{margin-top:-5px}}
/* Tablet */
@media(max-width:1099px){
  :where(html[data-page="mobile-apps"]) .ap-header{grid-template-columns:1fr;column-gap:0}
  :where(html[data-page="mobile-apps"]) .ap-annotation{justify-self:start;text-align:left;margin-top:18px}
  :where(html[data-page="mobile-apps"]) .ap-annotation-arrow{margin:4px 0 0 30px}
  :where(html[data-page="mobile-apps"]) .ap-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:18px;scrollbar-width:none}
  :where(html[data-page="mobile-apps"]) .ap-rail::-webkit-scrollbar{display:none}
  :where(html[data-page="mobile-apps"]) .ap-rail-line,:where(html[data-page="mobile-apps"]) .ap-rail-progress{display:none}
  :where(html[data-page="mobile-apps"]) .ap-step{min-width:150px;scroll-snap-align:start;background:#fff;border:1px solid #E6EBF1;border-radius:16px;padding:14px}
  :where(html[data-page="mobile-apps"]) .ap-step-marker{display:none}
  :where(html[data-page="mobile-apps"]) .ap-panel{margin-top:24px}
  :where(html[data-page="mobile-apps"]) .ap-stage{grid-template-columns:1fr;min-height:0}
  :where(html[data-page="mobile-apps"]) .ap-stage-visual{min-height:420px;padding:10px 20px 30px}
  :where(html[data-page="mobile-apps"]) .ap-mockup{width:78%}
  :where(html[data-page="mobile-apps"]) .ap-float-left{width:172px;left:1%;top:12%}
  :where(html[data-page="mobile-apps"]) .ap-float-right{width:158px;right:0;top:40%}
  /* Tablet mind-map: center top, branches 2-col below */
  :where(html[data-page="mobile-apps"]) .ap-mindmap{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    row-gap:16px;
    text-align:center
  }
  :where(html[data-page="mobile-apps"]) .ap-mindmap-center{grid-column:1;grid-row:1;justify-self:center;margin-bottom:4px}
  :where(html[data-page="mobile-apps"]) .ap-mindmap-trunk{grid-column:1;grid-row:2;justify-self:center;align-self:start;width:2px;height:24px;min-height:24px;margin:0}
  :where(html[data-page="mobile-apps"]) .ap-mindmap-branches{grid-column:1;grid-row:3;grid-template-columns:repeat(2,1fr);gap:9px}
  :where(html[data-page="mobile-apps"]) .ap-branch{white-space:normal;padding:8px 10px;font-size:12px;justify-content:center}
}
/* Mobile */
@media(max-width:767px){
  :where(html[data-page="mobile-apps"]) .ap-section{padding:56px 0 48px}
  :where(html[data-page="mobile-apps"]) .ma-section .ap-heading{font-size:38px!important}
  :where(html[data-page="mobile-apps"]) .ap-intro{font-size:16px}
  :where(html[data-page="mobile-apps"]) .ap-annotation{font-size:22px}
  :where(html[data-page="mobile-apps"]) .ap-annotation-arrow{width:56px;height:44px}
  :where(html[data-page="mobile-apps"]) .ap-annotation-spark{display:none}
  :where(html[data-page="mobile-apps"]) .ap-giant-num{font-size:82px;top:0;left:14px}
  :where(html[data-page="mobile-apps"]) .ap-stage-copy{padding:34px 20px 24px}
  :where(html[data-page="mobile-apps"]) .ap-stage-visual{
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:auto;
    padding:10px 14px 30px
  }
  :where(html[data-page="mobile-apps"]) .ap-mockup{width:100%;max-width:660px}
  :where(html[data-page="mobile-apps"]) .ap-mockup-canvas{padding:12px 12px}
  :where(html[data-page="mobile-apps"]) .ap-mockup-body{grid-template-columns:36px minmax(0,1fr)}
  :where(html[data-page="mobile-apps"]) .ap-mindmap{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    row-gap:16px;
    column-gap:0;
    text-align:center
  }
  :where(html[data-page="mobile-apps"]) .ap-mindmap-center{grid-column:1;grid-row:1;justify-self:center;margin-bottom:4px}
  :where(html[data-page="mobile-apps"]) .ap-mindmap-trunk{grid-column:1;grid-row:2;justify-self:center;align-self:start;width:2px;height:24px;min-height:24px;margin:0}
  :where(html[data-page="mobile-apps"]) .ap-mindmap-branches{grid-column:1;grid-row:3;grid-template-columns:1fr;gap:8px}
  :where(html[data-page="mobile-apps"]) .ap-branch{white-space:normal;padding:10px 12px;font-size:12px}
  :where(html[data-page="mobile-apps"]) .ap-float{
    position:static;
    transform:none;
    width:100%;
    max-width:660px;
    margin-top:16px;
    box-shadow:0 8px 20px rgba(13,35,70,.08)
  }
  :where(html[data-page="mobile-apps"]) .ap-float-left,:where(html[data-page="mobile-apps"]) 
  .ap-float-right{left:auto;right:auto;top:auto}
  :where(html[data-page="mobile-apps"]) .ap-float li{font-size:11.5px}
  :where(html[data-page="mobile-apps"]) .ap-sticky,:where(html[data-page="mobile-apps"]) .ap-hand{display:none}
}
@media(prefers-reduced-motion:reduce){
  :where(html[data-page="mobile-apps"]) .ap-swap{animation:none}
  :where(html[data-page="mobile-apps"]) .ap-float-left,:where(html[data-page="mobile-apps"]) .ap-float-right{animation:none}
  :where(html[data-page="mobile-apps"]) .ap-rail-progress{transition:none}
  :where(html[data-page="mobile-apps"]) .ap-step,:where(html[data-page="mobile-apps"]) .ap-step-icon,:where(html[data-page="mobile-apps"]) .ap-step-name,:where(html[data-page="mobile-apps"]) .ap-cta{transition:none}
  :where(html[data-page="mobile-apps"]) .ap-step:hover .ap-step-icon{transform:none}
  :where(html[data-page="mobile-apps"]) .ma-section .ap-cta:hover{transform:none}
}

/* mobile-apps-hero-v3.css */
:where(html[data-page="mobile-apps"]) .ma-hero-v3 {
  --mah-navy: #071c42;
  --mah-deep: #032746;
  --mah-body: #577195;
  --mah-gold: #ffc526;
  --mah-blue: #237aff;
  --mah-mint: #00b98d;
  position: relative;
  overflow: clip;
  min-height: 790px;
  padding: 54px 0 62px;
  border-bottom: 1px solid rgba(7, 28, 66, .08);
  background:
    radial-gradient(#d9d7cc .75px, transparent .75px),
    #fffcf5;
  background-size: 24px 24px, auto;
}

:where(html[data-page="mobile-apps"]) .ma-hero-v3::before,:where(html[data-page="mobile-apps"]) 
.ma-hero-v3::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 58vw;
  height: 300px;
  bottom: -170px;
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}

:where(html[data-page="mobile-apps"]) .ma-hero-v3::before { left: -15vw; background: rgba(218, 235, 255, .78); rotate: 8deg; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3::after { right: -18vw; background: rgba(255, 233, 170, .46); rotate: -8deg; }

:where(html[data-page="mobile-apps"]) .ma-hero-v3__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--kx-page-container, 1240px);
  margin-inline: auto;
  padding-inline: var(--kx-page-gutter, 24px);
  box-sizing: border-box;
}

:where(html[data-page="mobile-apps"]) .ma-hero-v3__intro { max-width: 1180px; margin-inline: auto; text-align: center; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; color: #31516f; font: 800 12px/1.2 var(--font-body, 'Plus Jakarta Sans', sans-serif); letter-spacing: .16em; text-transform: uppercase; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__eyebrow span { width: 9px; height: 9px; border-radius: 50%; background: var(--mah-gold); box-shadow: 0 0 0 5px rgba(255, 197, 38, .15); }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__title { max-width: 1180px; margin: 0 auto 16px; color: var(--mah-navy); font: 800 clamp(54px, 5vw, 72px)/1.01 var(--font-heading, 'Outfit', sans-serif); letter-spacing: -.048em; text-wrap: balance; overflow-wrap: break-word; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__title > span,:where(html[data-page="mobile-apps"]) 
.ma-hero-v3__title > strong { display: block; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__title > strong { color: var(--mah-navy); font-weight: inherit; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__title > strong::after { content: ''; display: block; width: min(780px, 86%); height: 9px; margin: -7px auto 0; border-radius: 999px; background: rgba(255, 197, 38, .7); transform: rotate(-.4deg); }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__lead { max-width: 790px; margin: 0 auto 22px; color: var(--mah-body); font: 500 clamp(16px, 1.35vw, 19px)/1.55 var(--font-body, 'Plus Jakarta Sans', sans-serif); text-wrap: pretty; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__button { min-height: 52px; padding: 0 28px; border: 1px solid transparent; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; color: var(--mah-navy); font: 800 15px/1 var(--font-body, sans-serif); text-decoration: none; touch-action: manipulation; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__button--primary { background: var(--mah-gold); box-shadow: 0 12px 26px rgba(245, 169, 22, .25); }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__button--secondary { border-color: #cbd8e7; background: rgba(255,255,255,.88); }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__button:focus-visible { outline: 3px solid #237aff; outline-offset: 3px; }

:where(html[data-page="mobile-apps"]) .ma-hero-v3__journey { position: relative; height: 440px; margin: 18px auto -2px; isolation: isolate; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__connectors { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__connectors--mobile { display: none; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__device { position: absolute; z-index: 2; top: 42px; width: 232px; min-height: 300px; padding: 27px 17px 17px; border: 6px solid #0d2b4c; border-radius: 34px; background: rgba(255,255,255,.98); box-shadow: 0 18px 36px rgba(16,32,57,.14); box-sizing: border-box; transition: translate .24s ease, box-shadow .24s ease; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__device--discover { left: 4%; rotate: -1deg; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__device--engine { left: 50%; top: 18px; width: 260px; min-height: 345px; translate: -50% 0; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__device--launch { right: 4%; rotate: 1deg; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__speaker { position: absolute; top: -2px; left: 50%; translate: -50% 0; width: 82px; height: 18px; border-radius: 0 0 14px 14px; background: #0d2b4c; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__device-head { display: flex; justify-content: space-between; margin-bottom: 18px; color: #7990aa; font: 700 8px/1 var(--font-body, sans-serif); }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__device h2 { margin: 0 0 13px; color: var(--mah-navy); font: 800 23px/1.05 var(--font-heading, sans-serif); letter-spacing: -.035em; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__device ul,:where(html[data-page="mobile-apps"]) 
.ma-hero-v3__device ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__device ul li { min-height: 58px; padding: 8px 10px; border: 1px solid #dde6f0; border-radius: 13px; display: flex; align-items: center; gap: 9px; background: #fff; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__device li span:last-child { min-width: 0; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__device li strong { display: block; color: var(--mah-navy); font: 800 12px/1.2 var(--font-body, sans-serif); }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__device li small { display: block; margin-top: 2px; color: var(--mah-body); font: 500 9px/1.25 var(--font-body, sans-serif); }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__icon { flex: 0 0 auto; width: 39px; height: 39px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__icon--blue { color: #176ae5; background: #e5efff; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__icon--mint { color: #069675; background: #def7ee; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__icon--gold { color: #b98000; background: #fff2cb; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__icon--lavender { color: #7650dc; background: #ede5fc; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__brand { margin: 8px 0 2px; color: var(--mah-navy); text-align: center; font: 800 20px/1 var(--font-heading, sans-serif); letter-spacing: -.03em; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__brand em { color: #00a982; font-style: normal; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__engine-label { margin: 7px 0 12px; color: #7088a4; text-align: center; font: 800 8px/1 var(--font-body, sans-serif); letter-spacing: .2em; text-transform: uppercase; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__stack { position: relative; width: 126px; height: 102px; margin: 0 auto 10px; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__stack span { position: absolute; left: 50%; width: 78px; height: 48px; translate: -50% 0; transform: skewY(-18deg); border: 1px solid rgba(35,122,255,.18); display: grid; place-items: center; color: var(--mah-navy); box-shadow: 0 8px 18px rgba(35,122,255,.08); }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__stack span i { transform: skewY(18deg); }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__stack span:nth-child(1) { top: 0; z-index: 3; color: #008e73; background: #b8f4df; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__stack span:nth-child(2) { top: 24px; z-index: 2; color: #176ae5; background: #cfe4ff; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__stack span:nth-child(3) { top: 48px; z-index: 1; color: #7650dc; background: #e4d8ff; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__device--engine ol { gap: 5px; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__device--engine ol li { min-height: 28px; padding: 4px 10px; border: 1px solid #dde6f0; border-radius: 999px; display: flex; align-items: center; gap: 8px; color: var(--mah-navy); font: 700 10px/1 var(--font-body, sans-serif); background: #fff; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__device--engine ol i { color: var(--mah-blue); font-size: 14px; }

:where(html[data-page="mobile-apps"]) .ma-hero-v3__proof { position: relative; z-index: 4; min-height: 88px; padding: 13px 18px; border: 1px solid #dce5f0; border-radius: 22px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; background: rgba(255,255,255,.96); box-shadow: 0 16px 38px rgba(16,32,57,.08); }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__proof > div { min-width: 0; padding: 3px 20px; display: flex; align-items: center; justify-content: center; gap: 12px; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__proof > div + div { border-left: 1px solid #dce5f0; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__proof p { margin: 0; }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__proof strong { display: block; color: var(--mah-navy); font: 800 15px/1.2 var(--font-body, sans-serif); }
:where(html[data-page="mobile-apps"]) .ma-hero-v3__proof small { display: block; margin-top: 3px; color: var(--mah-body); font: 500 11px/1.3 var(--font-body, sans-serif); }

@media (hover: hover) {
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__button:hover { transform: translateY(-2px); }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__button--primary:hover { box-shadow: 0 16px 32px rgba(245,169,22,.34); }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__button--secondary:hover { border-color: #8fa5bd; background: #fff; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__device:hover { translate: 0 -3px; box-shadow: 0 22px 42px rgba(16,32,57,.17); }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__device--engine:hover { translate: -50% -3px; }
}

@media (max-width: 1099px) {
  :where(html[data-page="mobile-apps"]) .ma-hero-v3 { min-height: 0; padding-top: 46px; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__container { padding-inline: 24px; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__title { font-size: clamp(44px, 6.3vw, 60px); }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__journey { transform: scale(.9); transform-origin: center top; margin-bottom: -38px; }
}

@media (max-width: 900px) {
  :where(html[data-page="mobile-apps"]) .ma-hero-v3 { padding: 38px 0 46px; overflow: clip; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__container { padding-inline: var(--kx-page-gutter, 16px); }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__eyebrow { margin-bottom: 14px; font-size: 10px; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__title { max-width: 720px; font-size: clamp(31px, 6.4vw, 46px); line-height: 1.04; letter-spacing: -.044em; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__title > span,:where(html[data-page="mobile-apps"]) 
  .ma-hero-v3__title > strong { display: inline; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__title > strong {
    padding-inline: .025em;
    background: linear-gradient(transparent 73%, rgba(255, 197, 38, .66) 73% 92%, transparent 92%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__title > strong::after { display: none; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__lead { font-size: 15px; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__actions { display: grid; grid-template-columns: 1fr; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__button { width: 100%; min-height: 52px; padding-inline: 18px; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__journey { height: auto; min-height: 780px; margin: 24px auto 8px; display: flex; flex-direction: column; align-items: center; gap: 30px; transform: none; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__connectors--desktop { display: none; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__connectors--mobile { display: block; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__device,:where(html[data-page="mobile-apps"]) 
  .ma-hero-v3__device--engine { position: relative; inset: auto; width: min(100%, 330px); min-height: 220px; padding: 27px 18px 18px; translate: none; rotate: none; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__device--engine { min-height: 280px; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__device ul { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__device ul li { min-width: 0; min-height: 105px; padding: 9px 6px; flex-direction: column; justify-content: center; text-align: center; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__device li strong { font-size: 11px; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__device li small { font-size: 8px; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__stack { height: 90px; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__proof { grid-template-columns: 1fr 1fr; gap: 0; padding: 8px; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__proof > div { min-height: 76px; padding: 10px; justify-content: flex-start; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__proof > div:nth-child(3) { border-left: 0; border-top: 1px solid #dce5f0; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__proof > div:nth-child(4) { border-top: 1px solid #dce5f0; }
}

@media (max-width: 359px) {
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__title { font-size: 28px; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__proof { grid-template-columns: 1fr; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__proof > div { border-left: 0 !important; border-top: 1px solid #dce5f0; }
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__proof > div:first-child { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="mobile-apps"]) .ma-hero-v3__button,:where(html[data-page="mobile-apps"]) 
  .ma-hero-v3__device { transition: none; }
}

/* micro-interactions.css */
/* Shared feedback layer. Motion acknowledges actions; informational content stays still. */
:root:where([data-page="mobile-apps"]){--kx-feedback-ease:cubic-bezier(.2,.75,.25,1);--kx-feedback-duration:180ms}
:where(html[data-page="mobile-apps"]) :where(a,button,summary,input,textarea,select):focus-visible{outline:3px solid #187d6b!important;outline-offset:4px}
:where(html[data-page="mobile-apps"]) :where(.shared-kx-footer,.ma-dark,.ma-closing) :where(a,button):focus-visible{outline-color:#ffc526!important}
:where(html[data-page="mobile-apps"]) :where(button,summary,.kx-mi-action){-webkit-tap-highlight-color:rgba(245,169,22,.18);touch-action:manipulation}
:where(html[data-page="mobile-apps"]) .kx-mi-action{transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease),scale 120ms var(--kx-feedback-ease),box-shadow var(--kx-feedback-duration) var(--kx-feedback-ease),background-color var(--kx-feedback-duration) ease,border-color var(--kx-feedback-duration) ease!important}
:where(html[data-page="mobile-apps"]) .kx-mi-arrow{display:inline-block;transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease)!important}
:where(html[data-page="mobile-apps"]) .kx-mi-card{transition:translate 220ms var(--kx-feedback-ease),box-shadow 220ms var(--kx-feedback-ease),border-color 180ms ease!important}
:where(html[data-page="mobile-apps"]) .shared-footer-links a,:where(html[data-page="mobile-apps"]) .shared-kx-dropdown-item,:where(html[data-page="mobile-apps"]) .shared-kx-mobile-nav-link{ text-decoration-color:transparent;text-underline-offset:5px;transition:color 160ms ease,background-color 160ms ease,text-decoration-color 160ms ease!important}
:where(html[data-page="mobile-apps"]) .shared-footer-links a:focus-visible{ text-decoration:underline;text-decoration-color:currentColor }
:where(html[data-page="mobile-apps"]) :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea,select){transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease!important}
:where(html[data-page="mobile-apps"]) :where(input:not([type=checkbox]):not([type=radio]),textarea,select):focus{border-color:#187d6b!important;box-shadow:0 0 0 3px rgb(24 125 107 / .12)}
:where(html[data-page="mobile-apps"]) :where(button[aria-expanded],summary){transition:background-color 160ms ease,color 160ms ease!important}
:where(html[data-page="mobile-apps"]) :where(button[aria-expanded],summary):focus-visible{border-radius:8px}
@media(hover:hover) and (pointer:fine){
  :where(html[data-page="mobile-apps"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):hover{translate:0 -2px}
  :where(html[data-page="mobile-apps"]) .kx-mi-action:hover .kx-mi-arrow,:where(html[data-page="mobile-apps"]) .kx-mi-action:focus-visible .kx-mi-arrow{translate:3px 0}
  :where(html[data-page="mobile-apps"]) .kx-mi-card:hover,:where(html[data-page="mobile-apps"]) .kx-mi-card:focus-within{translate:0 -3px;border-color:#d8ba78;box-shadow:0 10px 24px rgb(16 32 57 / .08)}
  :where(html[data-page="mobile-apps"]) .shared-footer-links a:hover{text-decoration:underline;text-decoration-color:currentColor}
}
:where(html[data-page="mobile-apps"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):active{translate:0 0;scale:.98;transition-duration:80ms!important}
:where(html[data-page="mobile-apps"]) .kx-mi-card:active{translate:0 -1px}
/* Honor this preference for both this layer and pre-existing decorative loops. */
@media(prefers-reduced-motion:reduce){
  html:where([data-page="mobile-apps"]){scroll-behavior:auto!important}
  :where(html[data-page="mobile-apps"]) *,:where(html[data-page="mobile-apps"]) *::before,:where(html[data-page="mobile-apps"]) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  :where(html[data-page="mobile-apps"]) .kx-mi-action,:where(html[data-page="mobile-apps"]) .kx-mi-card,:where(html[data-page="mobile-apps"]) .kx-mi-arrow{translate:none!important;scale:none!important;transition:none!important}
  :where(html[data-page="mobile-apps"]) .shared-footer-links a,:where(html[data-page="mobile-apps"]) .shared-kx-dropdown-item,:where(html[data-page="mobile-apps"]) .shared-kx-mobile-nav-link{transition:none!important}
}

/* page-container-rhythm.css */
/* Shared page rhythm: mirrors the Industries page container at every breakpoint. */
:root:where([data-page="mobile-apps"]) {
  --kx-page-container: 1240px;
  --kx-page-gutter: 24px;
}

:where(html[data-page="mobile-apps"]) .shared-kx-header > .shared-kx-container,:where(html[data-page="mobile-apps"]) 
.ux-page .shared-kx-container,:where(html[data-page="mobile-apps"]) 
main > section > :is(
  .container,
  .su-container,
  .impact-container,
  .origin-desktop-view,
  .phil-container,
  .journey-tl-container,
  .careersHero-container,
  .chFeels-container,
  .contact-hero-v2-container,
  .contact-container,
  .taste-inner,
  .ai-container,
  .rv-container,
  .wd-container,
  .wd-tech-container,
  .wd-testi-faq-container,
  .kx-ah-container,
  .ma-container,
  .kats-container,
  .cloud-hero-container,
  .kx-container
),:where(html[data-page="mobile-apps"]) 
body > section > :is(
  .container,
  .contact-container,
  .cloud-hero-container,
  .kx-container
) {
  width: 100% !important;
  max-width: var(--kx-page-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--kx-page-gutter) !important;
  padding-right: var(--kx-page-gutter) !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  :root:where([data-page="mobile-apps"]) { --kx-page-gutter: 16px; }
}

/* This section previously put its gutter on the full-width background itself. */
@media (max-width: 1023px) {
  :where(html[data-page="mobile-apps"]) .wd-tech-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* mobile-apps.html embedded 8 */

      /* ============================================================
         KX APP HERO — Premium Hero Section
         Scoped under .kx-apphero to avoid all conflicts
         ============================================================ */
      :where(html[data-page="mobile-apps"]) .kx-apphero {
        background: #F8F4EC;
        background-image: radial-gradient(#d9d7cc 0.7px, transparent 0.7px);
        background-size: 24px 24px;
        padding: 52px 0 64px;
        border-bottom: 1px solid #e9e6de;
        position: relative;
        overflow: hidden;
      }

      :where(html[data-page="mobile-apps"]) .kx-apphero::before {
        content: '';
        position: absolute;
        top: -160px;
        left: -80px;
        width: 480px;
        height: 480px;
        background: radial-gradient(circle, rgba(29, 199, 154, 0.08) 0%, transparent 65%);
        pointer-events: none;
      }

      :where(html[data-page="mobile-apps"]) .kx-apphero::after {
        content: '';
        position: absolute;
        bottom: -100px;
        right: -60px;
        width: 360px;
        height: 360px;
        background: radial-gradient(circle, rgba(247, 182, 27, 0.09) 0%, transparent 65%);
        pointer-events: none;
      }

      :where(html[data-page="mobile-apps"]) .kx-apphero .kx-ah-container {
        width: calc(100% - 80px);
        max-width: 1240px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
      }

      /* ── Two-column grid ── */
      :where(html[data-page="mobile-apps"]) .kx-ah-grid {
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        gap: 60px;
        align-items: center;
      }

      /* ── LEFT copy ── */
      :where(html[data-page="mobile-apps"]) .kx-ah-copy { min-width: 0; }

      :where(html[data-page="mobile-apps"]) .kx-ah-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font: 700 11px/1.4 'Plus Jakarta Sans', Inter, sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: #315373;
        margin-bottom: 20px;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-eyebrow-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #f5a916;
        display: inline-block;
        flex-shrink: 0;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-heading {
        font: 800 clamp(42px, 4.4vw, 62px)/1.07 'Outfit', 'Plus Jakarta Sans', sans-serif;
        letter-spacing: -0.05em;
        color: #102039;
        margin: 0 0 20px;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-heading em {
        font-style: normal;
        color: #c88409;
        text-decoration: underline;
        text-decoration-color: #f5a916;
        text-decoration-thickness: 3px;
        text-underline-offset: 8px;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-desc {
        font: 400 17px/1.75 'Plus Jakarta Sans', Inter, sans-serif;
        color: #5e748f;
        max-width: 520px;
        margin: 0 0 28px;
      }

      /* CTA row */
      :where(html[data-page="mobile-apps"]) .kx-ah-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 40px;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 15px 24px;
        min-height: 52px;
        border-radius: 999px;
        font: 700 13px/1.4 'Plus Jakarta Sans', Inter, sans-serif;
        text-decoration: none;
        transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
        border: 1px solid transparent;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-btn i { font-size: 18px; }

      :where(html[data-page="mobile-apps"]) .kx-ah-btn--primary {
        background: #ffc526;
        color: #102039;
        border-color: #ffc526;
        box-shadow: 0 8px 22px rgba(245, 169, 22, 0.28);
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-btn--primary:hover {
        background: #ffd458;
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(245, 169, 22, 0.38);
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-btn--ghost {
        background: #fff;
        color: #102039;
        border-color: #e2e7ee;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-btn--ghost:hover {
        background: #f5f7fa;
        transform: translateY(-2px);
      }

      /* Trust strip */
      :where(html[data-page="mobile-apps"]) .kx-ah-trust {
        display: flex;
        align-items: center;
        gap: 28px;
        padding-top: 28px;
        border-top: 1px solid rgba(16, 32, 57, 0.09);
        flex-wrap: wrap;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-trust-item {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-trust-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-trust-icon.mint { background: rgba(29, 199, 154, 0.12); color: #1DC79A; }
      :where(html[data-page="mobile-apps"]) .kx-ah-trust-icon.gold { background: rgba(247, 182, 27, 0.14); color: #C98800; }
      :where(html[data-page="mobile-apps"]) .kx-ah-trust-icon.blue { background: rgba(57, 127, 255, 0.10); color: #397FFF; }

      :where(html[data-page="mobile-apps"]) .kx-ah-trust-label {
        font: 700 13px/1.25 'Plus Jakarta Sans', Inter, sans-serif;
        color: #102039;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-trust-label span {
        display: block;
        font-weight: 400;
        font-size: 11px;
        color: #7E92A8;
        margin-top: 1px;
      }

      /* ── RIGHT visual ── */
      :where(html[data-page="mobile-apps"]) .kx-ah-visual {
        position: relative;
        min-height: 460px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* Main phone mockup */
      :where(html[data-page="mobile-apps"]) .kx-ah-phone-main {
        position: relative;
        z-index: 3;
        width: 220px;
        height: 420px;
        border: 7px solid #132b44;
        border-radius: 36px;
        background: #fffdf8;
        overflow: hidden;
        box-shadow: 0 22px 48px rgba(16, 32, 57, 0.18);
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-phone-notch {
        position: absolute;
        top: 0;
        left: 28%;
        width: 44%;
        height: 15px;
        border-radius: 0 0 12px 12px;
        background: #132b44;
        z-index: 5;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-phone-screen {
        width: 100%;
        height: 100%;
        background: linear-gradient(160deg, #0B2B57 0%, #0D3568 60%, #0E3E78 100%);
        padding: 30px 16px 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        position: relative;
        overflow: hidden;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-phone-screen::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -40px;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: rgba(247, 182, 27, 0.12);
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-phone-brand {
        font: 800 10px/1.3 'Outfit', sans-serif;
        color: rgba(255,255,255,0.9);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-phone-brand span { color: #F7B61B; }

      :where(html[data-page="mobile-apps"]) .kx-ah-phone-title {
        font: 800 22px/1.1 'Outfit', sans-serif;
        color: #fff;
        letter-spacing: -0.03em;
        margin-top: 8px;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-phone-sub {
        font: 400 10px/1.5 'Plus Jakarta Sans', sans-serif;
        color: rgba(255,255,255,0.6);
      }

      /* App screen cards */
      :where(html[data-page="mobile-apps"]) .kx-ah-screen-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 6px;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-screen-card {
        background: rgba(255, 255, 255, 0.09);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 12px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-sc-dot {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        flex-shrink: 0;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-sc-dot.a { background: rgba(29, 199, 154, 0.25); color: #1DC79A; }
      :where(html[data-page="mobile-apps"]) .kx-ah-sc-dot.b { background: rgba(247, 182, 27, 0.22); color: #F7B61B; }
      :where(html[data-page="mobile-apps"]) .kx-ah-sc-dot.c { background: rgba(255, 91, 141, 0.22); color: #FF5B8D; }

      :where(html[data-page="mobile-apps"]) .kx-ah-sc-info strong {
        font: 700 9px/1.3 'Plus Jakarta Sans', sans-serif;
        color: #fff;
        display: block;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-sc-info span {
        font: 400 8px/1.3 'Plus Jakarta Sans', sans-serif;
        color: rgba(255,255,255,0.5);
      }

      /* Bottom mock CTA on phone */
      :where(html[data-page="mobile-apps"]) .kx-ah-phone-cta {
        margin-top: auto;
        background: #F7B61B;
        border-radius: 999px;
        padding: 10px 14px;
        font: 700 9px/1 'Plus Jakarta Sans', sans-serif;
        color: #102039;
        text-align: center;
      }

      /* Floating cards around phone */
      :where(html[data-page="mobile-apps"]) .kx-ah-float {
        position: absolute;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 16px;
        box-shadow: 0 12px 30px rgba(16, 32, 57, 0.10);
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        z-index: 5;
        animation: page-mobile-apps-kx-float-bob 4s ease-in-out infinite;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-float:nth-child(2) { animation-delay: -1.5s; }
      :where(html[data-page="mobile-apps"]) .kx-ah-float:nth-child(3) { animation-delay: -3s; }

      @keyframes page-mobile-apps-kx-float-bob {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-6px); }
      }

      /* Position each floating card */
      :where(html[data-page="mobile-apps"]) .kx-ah-float--ios {
        top: 8%;
        left: -20%;
        width: 148px;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-float--android {
        bottom: 18%;
        left: -22%;
        width: 152px;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-float--web {
        top: 22%;
        right: -18%;
        width: 160px;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-float-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-float-icon.mint   { background: rgba(29, 199, 154, 0.12); color: #1DC79A; }
      :where(html[data-page="mobile-apps"]) .kx-ah-float-icon.gold   { background: rgba(247, 182, 27, 0.14); color: #C98800; }
      :where(html[data-page="mobile-apps"]) .kx-ah-float-icon.blue   { background: rgba(57, 127, 255, 0.10); color: #397FFF; }

      :where(html[data-page="mobile-apps"]) .kx-ah-float-text strong {
        font: 700 11px/1.25 'Plus Jakarta Sans', sans-serif;
        color: #102039;
        display: block;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-float-text span {
        font: 400 10px/1.3 'Plus Jakarta Sans', sans-serif;
        color: #7E92A8;
      }

      /* Second phone (background, tilted) */
      :where(html[data-page="mobile-apps"]) .kx-ah-phone-bg {
        position: absolute;
        z-index: 1;
        width: 190px;
        height: 360px;
        border: 6px solid #1a3652;
        border-radius: 32px;
        background: #f0e8d6;
        right: -10%;
        top: 4%;
        transform: rotate(8deg);
        box-shadow: 0 16px 36px rgba(16, 32, 57, 0.10);
        overflow: hidden;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-phone-bg-inner {
        width: 100%;
        height: 100%;
        background: linear-gradient(160deg, #F8F4EC 0%, #EEE6D4 100%);
        padding: 24px 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-phone-bg-bar {
        height: 7px;
        border-radius: 4px;
        background: rgba(16, 32, 57, 0.10);
      }

      :where(html[data-page="mobile-apps"]) .kx-ah-phone-bg-bar.short { width: 55%; }
      :where(html[data-page="mobile-apps"]) .kx-ah-phone-bg-bar.medium { width: 80%; }
      :where(html[data-page="mobile-apps"]) .kx-ah-phone-bg-bar.gold { background: rgba(247, 182, 27, 0.45); width: 65%; }

      :where(html[data-page="mobile-apps"]) .kx-ah-phone-bg-block {
        height: 80px;
        border-radius: 14px;
        background: rgba(16, 32, 57, 0.06);
        margin-top: 6px;
      }

      /* Sun backing shape */
      :where(html[data-page="mobile-apps"]) .kx-ah-sun {
        position: absolute;
        z-index: 0;
        top: 5%;
        left: -8%;
        width: 320px;
        height: 320px;
        background: #FCE8A2;
        border-radius: 50% 50% 70% 50%;
        opacity: 0.45;
        filter: blur(2px);
      }

      /* ── Responsive ── */
      @media (max-width: 1100px) {
        :where(html[data-page="mobile-apps"]) .kx-apphero .kx-ah-container { width: calc(100% - 48px); }
        :where(html[data-page="mobile-apps"]) .kx-ah-grid { gap: 40px; }
        :where(html[data-page="mobile-apps"]) .kx-ah-float--ios { left: -12%; }
        :where(html[data-page="mobile-apps"]) .kx-ah-float--android { left: -14%; }
        :where(html[data-page="mobile-apps"]) .kx-ah-float--web { right: -10%; }
      }

      @media (max-width: 900px) {
        :where(html[data-page="mobile-apps"]) .kx-apphero { padding: 36px 0 48px; }
        :where(html[data-page="mobile-apps"]) .kx-ah-grid { grid-template-columns: 1fr; gap: 44px; }
        :where(html[data-page="mobile-apps"]) .kx-ah-desc { max-width: 100%; }
        :where(html[data-page="mobile-apps"]) .kx-ah-visual { min-height: 380px; }
        :where(html[data-page="mobile-apps"]) .kx-ah-phone-main { width: 190px; height: 370px; }
        :where(html[data-page="mobile-apps"]) .kx-ah-phone-bg { width: 165px; height: 315px; right: -4%; }
        :where(html[data-page="mobile-apps"]) .kx-ah-float--ios { top: 2%; left: 0; }
        :where(html[data-page="mobile-apps"]) .kx-ah-float--android { bottom: 4%; left: 0; }
        :where(html[data-page="mobile-apps"]) .kx-ah-float--web { top: 16%; right: 0; }
      }

      @media (max-width: 540px) {
        :where(html[data-page="mobile-apps"]) .kx-apphero .kx-ah-container { width: calc(100% - 40px); }
        :where(html[data-page="mobile-apps"]) .kx-ah-heading { font-size: 38px !important; line-height: 1.1 !important; }
        :where(html[data-page="mobile-apps"]) .kx-ah-desc { font-size: 15px; }
        :where(html[data-page="mobile-apps"]) .kx-ah-visual { min-height: 320px; }
        :where(html[data-page="mobile-apps"]) .kx-ah-phone-main { width: 165px; height: 320px; border-width: 5px; border-radius: 28px; }
        :where(html[data-page="mobile-apps"]) .kx-ah-phone-bg { display: none; }
        :where(html[data-page="mobile-apps"]) .kx-ah-float { display: none; }
        :where(html[data-page="mobile-apps"]) .kx-ah-trust { gap: 18px; }
      }

      @media (prefers-reduced-motion: reduce) {
        :where(html[data-page="mobile-apps"]) .kx-ah-float { animation: none !important; }
        :where(html[data-page="mobile-apps"]) .kx-ah-btn { transition: none; }
        :where(html[data-page="mobile-apps"]) .kx-ah-btn:hover { transform: none; }
      }
    

/* PAGE digital-marketing */
/* digital-marketing.html embedded 0 */

/* ==========================================================================
   KAXON TECHNOLOGIES - GLOBAL DESIGN SYSTEM & STYLESHEET
   Accurate recreation of approved high-converting reference design
   ========================================================================== */

:root:where([data-page="digital-marketing"]) {
  /* Core Brand Colors */
  --color-primary-navy: #14243D;
  --color-dark-navy: #0E1B2F;
  --color-card-dark: #121E33;
  --color-yellow: #F8C72E;
  --color-yellow-hover: #E8B61E;
  --color-yellow-light: #FFF9E5;
  --color-teal: #1FB6A6;
  --color-teal-light: #E6F8F6;
  --color-green: #38B764;
  --color-green-light: #EBF8F0;
  --color-purple: #7C5CFC;
  --color-purple-light: #F2EEFE;
  --color-pink: #ED509E;
  --color-pink-light: #FDEEF6;
  --color-blue: #2E82FE;
  --color-blue-light: #EAF2FF;

  /* Neutrals & Backgrounds */
  --bg-white: #FFFFFF;
  --bg-cream: #FFF7EA;
  --bg-light-gray: #F8FAFC;
  --bg-subtle: #F1F4F9;
  --border-color: #E2E8F0;
  --border-light: rgba(20, 36, 61, 0.08);

  /* Typography */
  --text-primary: #14243D;
  --text-secondary: #57657B;
  --text-muted: #8E9AAB;
  --text-inverse: #FFFFFF;

  /* Font Families */
  --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-handwriting: 'Caveat', cursive, sans-serif;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(20, 36, 61, 0.04);
  --shadow-md: 0 10px 28px rgba(20, 36, 61, 0.07);
  --shadow-lg: 0 18px 45px rgba(20, 36, 61, 0.10);
  --shadow-card: 0 12px 36px rgba(20, 36, 61, 0.06);
  --shadow-yellow: 0 8px 24px rgba(248, 199, 46, 0.35);
  --shadow-green: 0 8px 24px rgba(37, 211, 102, 0.30);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* Layout */
  --container-max: 1240px;
  --header-height: 72px;
  --transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Resets */
:where(html[data-page="digital-marketing"]) *,:where(html[data-page="digital-marketing"])  *::before,:where(html[data-page="digital-marketing"])  *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html:where([data-page="digital-marketing"]) {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100vw;
}

:where(html[data-page="digital-marketing"]) body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--bg-white);
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

:where(html[data-page="digital-marketing"]) img {
  max-width: 100%;
  height: auto;
  display: block;
}

:where(html[data-page="digital-marketing"]) a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

:where(html[data-page="digital-marketing"]) button,:where(html[data-page="digital-marketing"])  input,:where(html[data-page="digital-marketing"])  select,:where(html[data-page="digital-marketing"])  textarea {
  font-family: inherit;
  font-size: inherit;
  outline: none;
  border: none;
}

:where(html[data-page="digital-marketing"]) button {
  cursor: pointer;
  background: none;
}

:where(html[data-page="digital-marketing"]) .container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Section Header Shared */
:where(html[data-page="digital-marketing"]) .section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

:where(html[data-page="digital-marketing"]) .section-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-primary-navy);
  letter-spacing: -0.02em;
}

:where(html[data-page="digital-marketing"]) .section-subtitle {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 14px;
}

/* ==========================================================================
   BUTTONS & BADGES
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  transition: var(--transition);
  white-space: nowrap;
}

:where(html[data-page="digital-marketing"]) .btn-yellow {
  background-color: var(--color-yellow);
  color: var(--color-primary-navy);
  box-shadow: var(--shadow-yellow);
}

:where(html[data-page="digital-marketing"]) .btn-yellow:hover {
  background-color: var(--color-yellow-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(248, 199, 46, 0.45);
}

:where(html[data-page="digital-marketing"]) .btn-navy {
  background-color: var(--color-primary-navy);
  color: var(--bg-white);
}

:where(html[data-page="digital-marketing"]) .btn-navy:hover {
  background-color: var(--color-dark-navy);
  transform: translateY(-2px);
}

:where(html[data-page="digital-marketing"]) .btn-outline {
  border: 1.5px solid var(--border-color);
  background: var(--bg-white);
  color: var(--color-primary-navy);
}

:where(html[data-page="digital-marketing"]) .btn-outline:hover {
  border-color: var(--color-primary-navy);
  transform: translateY(-2px);
}

:where(html[data-page="digital-marketing"]) .btn-phone {
  background-color: var(--color-primary-navy);
  color: var(--bg-white);
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 600;
}

:where(html[data-page="digital-marketing"]) .btn-phone:hover {
  background-color: var(--color-dark-navy);
}

:where(html[data-page="digital-marketing"]) .btn-link {
  font-weight: 600;
  color: var(--color-primary-navy);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

:where(html[data-page="digital-marketing"]) .btn-link:hover {
  color: var(--color-teal);
  gap: 10px;
}

/* ==========================================================================
   HEADER & NAVBAR
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  z-index: 1000;
  border-bottom: 1px solid rgba(20, 36, 61, 0.06);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

:where(html[data-page="digital-marketing"]) .site-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 30px -5px rgba(20, 36, 61, 0.08), 0 0 0 1px rgba(20, 36, 61, 0.04);
}

:where(html[data-page="digital-marketing"]) .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* 1. Brand Logo Lockup */
:where(html[data-page="digital-marketing"]) .brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 1.48rem;
  font-weight: 800;
  color: #0E1B2F;
  letter-spacing: -0.035em;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

:where(html[data-page="digital-marketing"]) .brand-logo:hover {
  opacity: 0.88;
  transform: scale(1.02);
}

:where(html[data-page="digital-marketing"]) .brand-logo .dot {
  background: linear-gradient(135deg, #10B981 0%, #2FB7A7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(16, 185, 129, 0.35));
}

/* 2. Glass Capsule Center Navigation */
:where(html[data-page="digital-marketing"]) .nav-menu-wrapper {
  display: flex;
  align-items: center;
}

:where(html[data-page="digital-marketing"]) .nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 4px;
  background: rgba(241, 245, 249, 0.7);
  padding: 4px 6px;
  border-radius: 9999px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

:where(html[data-page="digital-marketing"]) .nav-link {
  font-family: var(--font-body);
  font-size: 0.885rem;
  font-weight: 600;
  color: #475569;
  padding: 7px 14px;
  border-radius: 9999px;
  text-decoration: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  line-height: 1.2;
}

:where(html[data-page="digital-marketing"]) .nav-link:hover {
  color: #0E1B2F;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(20, 36, 61, 0.05);
}

:where(html[data-page="digital-marketing"]) .nav-link.active {
  color: #0E1B2F;
  background: #FFFFFF;
  font-weight: 750;
  box-shadow: 0 2px 10px rgba(20, 36, 61, 0.08);
}

:where(html[data-page="digital-marketing"]) .nav-caret {
  font-size: 0.72rem;
  color: #64748B;
  transition: transform 0.25s ease;
}

:where(html[data-page="digital-marketing"]) .nav-item-dropdown {
  position: relative;
}

:where(html[data-page="digital-marketing"]) .nav-item-dropdown:hover .nav-caret,:where(html[data-page="digital-marketing"]) 
.nav-item-dropdown:focus-within .nav-caret {
  transform: rotate(180deg);
}

/* 3. Services Dropdown Menu Popover */
:where(html[data-page="digital-marketing"]) .nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 480px;
  background: #FFFFFF;
  border: 1px solid rgba(20, 36, 61, 0.08);
  border-radius: 20px;
  box-shadow: 0 20px 45px -10px rgba(20, 36, 61, 0.16), 0 0 0 1px rgba(20, 36, 61, 0.04);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1050;
}

:where(html[data-page="digital-marketing"]) .nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 14px;
}

:where(html[data-page="digital-marketing"]) .nav-item-dropdown:hover .nav-dropdown-menu,:where(html[data-page="digital-marketing"]) 
.nav-item-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

:where(html[data-page="digital-marketing"]) .dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

:where(html[data-page="digital-marketing"]) .dropdown-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}

:where(html[data-page="digital-marketing"]) .dropdown-item:hover {
  background: #F8FAFC;
  transform: translateX(2px);
}

:where(html[data-page="digital-marketing"]) .dropdown-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .dropdown-item-info {
  display: flex;
  flex-direction: column;
}

:where(html[data-page="digital-marketing"]) .dropdown-title {
  font-family: var(--font-heading);
  font-size: 0.835rem;
  font-weight: 750;
  color: #0E1B2F;
  line-height: 1.2;
}

:where(html[data-page="digital-marketing"]) .dropdown-desc {
  font-size: 0.715rem;
  color: #64748B;
  line-height: 1.25;
  margin-top: 1px;
}

/* 4. Action Buttons (Right) */
:where(html[data-page="digital-marketing"]) .nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

:where(html[data-page="digital-marketing"]) .btn-nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0E1B2F;
  color: #FFFFFF;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 9999px;
  font-size: 0.855rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 14px rgba(14, 27, 47, 0.14);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

:where(html[data-page="digital-marketing"]) .btn-nav-phone:hover {
  background: #182C48;
  transform: translateY(-1.5px);
  box-shadow: 0 8px 22px rgba(14, 27, 47, 0.22);
  color: #FFFFFF;
}

:where(html[data-page="digital-marketing"]) .btn-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #F8C72E;
  color: #0E1B2F;
  text-decoration: none;
  padding: 9px 20px;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 16px rgba(248, 199, 46, 0.35);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

:where(html[data-page="digital-marketing"]) .btn-nav-cta:hover {
  background: #F4BE1F;
  transform: translateY(-1.5px);
  box-shadow: 0 8px 24px rgba(248, 199, 46, 0.48);
  color: #0E1B2F;
}

:where(html[data-page="digital-marketing"]) .hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(20, 36, 61, 0.08);
  background: #FFFFFF;
  cursor: pointer;
  z-index: 1001;
  transition: background 0.2s ease;
}

:where(html[data-page="digital-marketing"]) .hamburger-btn:hover {
  background: #F8FAFC;
}

:where(html[data-page="digital-marketing"]) .hamburger-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-primary-navy);
  border-radius: 2px;
  transition: var(--transition);
}

/* Mobile Nav Drawer */
:where(html[data-page="digital-marketing"]) .mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 360px;
  height: 100vh;
  background: var(--bg-white);
  z-index: 999;
  padding: 90px 30px 40px;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: right 0.35s ease;
}

:where(html[data-page="digital-marketing"]) .mobile-nav-drawer.open {
  right: 0;
}

:where(html[data-page="digital-marketing"]) .mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

:where(html[data-page="digital-marketing"]) .mobile-nav-links a {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-primary-navy);
}

:where(html[data-page="digital-marketing"]) .mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 27, 47, 0.4);
  backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

:where(html[data-page="digital-marketing"]) .mobile-drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   HERO SECTION — ACCURATE REFERENCE MATCH
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .hero-section {
  padding: 56px 0 68px;
  background-color: #FBF7EF;
  background-image: 
    radial-gradient(circle at 88% 28%, rgba(255, 196, 61, 0.12) 0%, rgba(251, 247, 239, 0) 60%),
    radial-gradient(circle at 10% 80%, rgba(36, 181, 168, 0.05) 0%, rgba(251, 247, 239, 0) 50%),
    radial-gradient(#CBD5E1 1px, transparent 1px);
  background-size: auto, auto, 24px 24px;
  background-position: 0 0, 0 0, 0 0;
  position: relative;
  overflow: hidden;
}

/* Ambient Handwritten Annotations */
:where(html[data-page="digital-marketing"]) .hero-annotation {
  position: absolute;
  pointer-events: none;
  z-index: 4;
}

:where(html[data-page="digital-marketing"]) .hero-anno-left {
  top: 10px;
  left: -130px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-handwriting, 'Caveat', cursive, sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: #E89725;
  line-height: 1.05;
  transform: rotate(-10deg);
}

@media (max-width: 1480px) {
  :where(html[data-page="digital-marketing"]) .hero-anno-left {
    display: none !important;
  }
}

:where(html[data-page="digital-marketing"]) .anno-arrow-svg {
  margin-top: 4px;
  margin-left: 12px;
}

:where(html[data-page="digital-marketing"]) .hero-anno-middle {
  position: absolute;
  top: 48%;
  left: -48px;
  transform: translateY(-50%) rotate(-6deg);
  font-family: var(--font-handwriting, 'Caveat', cursive, sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: #E89725;
  line-height: 1.1;
  pointer-events: none;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
}

:where(html[data-page="digital-marketing"]) .hero-anno-middle svg {
  margin-top: 4px;
}

:where(html[data-page="digital-marketing"]) .hero-container {
  max-width: 1360px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

:where(html[data-page="digital-marketing"]) .hero-grid {
  display: grid;
  grid-template-columns: 53% 47%;
  gap: 36px;
  align-items: center;
}

/* Left Column */
:where(html[data-page="digital-marketing"]) .hero-left {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

:where(html[data-page="digital-marketing"]) .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #102039;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(16, 26, 43, 0.08);
  box-shadow: 0 4px 16px rgba(16, 26, 43, 0.04);
  padding: 7px 16px;
  border-radius: var(--radius-pill, 999px);
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
}

:where(html[data-page="digital-marketing"]) .hero-badge-dot {
  width: 8px;
  height: 8px;
  background-color: #24B5A8;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(36, 181, 168, 0.6);
  display: inline-block;
}

:where(html[data-page="digital-marketing"]) .hero-title {
  font-family: var(--font-heading, 'Plus Jakarta Sans', 'Manrope', sans-serif);
  font-size: clamp(2.4rem, 4.2vw, 4.4rem);
  font-weight: 800;
  line-height: 1.02;
  color: #102039;
  letter-spacing: -0.045em;
  margin-bottom: 24px;
}

:where(html[data-page="digital-marketing"]) .title-second-line {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

:where(html[data-page="digital-marketing"]) .highlight-gold-text {
  color: #F5AA1C;
  font-weight: 850;
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

:where(html[data-page="digital-marketing"]) .gold-sparkle-burst {
  position: absolute;
  top: -10px;
  right: -26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  transform: rotate(8deg);
}

:where(html[data-page="digital-marketing"]) .brush-stroke-svg {
  position: absolute;
  left: -2%;
  bottom: -10px;
  width: 104%;
  height: 10px;
  z-index: 1;
  pointer-events: none;
}

:where(html[data-page="digital-marketing"]) .hero-subtitle {
  font-size: 1.08rem;
  line-height: 1.62;
  color: #59708F;
  margin-bottom: 30px;
  max-width: 620px;
  font-weight: 450;
}

/* CTAs Wrap */
:where(html[data-page="digital-marketing"]) .hero-ctas-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 36px;
}

:where(html[data-page="digital-marketing"]) .hero-ctas {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

:where(html[data-page="digital-marketing"]) .btn-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: linear-gradient(180deg, #FFC93A 0%, #F5AA1C 100%);
  color: #0E1A2E;
  font-family: var(--font-heading, sans-serif);
  font-weight: 750;
  font-size: 0.92rem;
  letter-spacing: -0.015em;
  padding: 10px 24px;
  min-height: 44px;
  box-shadow: 0 3px 12px rgba(245, 170, 28, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-pill, 999px);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(220, 145, 10, 0.4);
  position: relative;
  overflow: hidden;
}

:where(html[data-page="digital-marketing"]) .btn-hero-cta:hover {
  background: linear-gradient(180deg, #FFD255 0%, #F5B028 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245, 170, 28, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  color: #080F1B;
}

:where(html[data-page="digital-marketing"]) .btn-hero-cta:active {
  transform: translateY(0px) scale(0.98);
  box-shadow: 0 2px 6px rgba(245, 170, 28, 0.22);
}

:where(html[data-page="digital-marketing"]) .btn-hero-cta svg {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

:where(html[data-page="digital-marketing"]) .btn-hero-cta:hover svg {
  transform: translateX(4px);
}

:where(html[data-page="digital-marketing"]) .btn-watch-video {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #FFFFFF;
  color: #102039;
  border: 1.5px solid #E2E8F0;
  padding: 4px 20px 4px 5px;
  min-height: 44px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 0.91rem;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 8px rgba(16, 32, 57, 0.04), 0 1px 2px rgba(16, 32, 57, 0.02);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  white-space: nowrap;
}

:where(html[data-page="digital-marketing"]) .btn-watch-video:hover {
  border-color: #102039;
  background: #FAFCFE;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 32, 57, 0.07);
  color: #091220;
}

:where(html[data-page="digital-marketing"]) .btn-watch-video:active {
  transform: translateY(0px) scale(0.98);
  box-shadow: 0 2px 6px rgba(16, 32, 57, 0.04);
}

:where(html[data-page="digital-marketing"]) .video-play-icon {
  width: 32px;
  height: 32px;
  background: #102039;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(16, 32, 57, 0.2);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.28s ease, box-shadow 0.28s ease;
}

:where(html[data-page="digital-marketing"]) .btn-watch-video:hover .video-play-icon {
  transform: scale(1.06);
  background: #F5AA1C;
  color: #102039;
  box-shadow: 0 4px 12px rgba(245, 170, 28, 0.4);
}

/* Social Proof & Metrics Area (1:1 Reference Match) */
:where(html[data-page="digital-marketing"]) .hero-metrics-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 6px;
  width: 100%;
  max-width: 520px;
}

/* Floating White Rounded Stats Card */
:where(html[data-page="digital-marketing"]) .hero-stats-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 12px 24px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 10px 30px rgba(16, 32, 57, 0.05), 0 1px 3px rgba(16, 32, 57, 0.02);
  width: 100%;
  box-sizing: border-box;
}

:where(html[data-page="digital-marketing"]) .stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .stat-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .icon-mint-soft { 
  background: #EBFBF3; 
}
:where(html[data-page="digital-marketing"]) .icon-gold-soft { 
  background: #FEF7E8; 
}
:where(html[data-page="digital-marketing"]) .icon-blue-soft { 
  background: #EDF5FF; 
}

:where(html[data-page="digital-marketing"]) .stat-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:where(html[data-page="digital-marketing"]) .stat-num {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 1.22rem;
  font-weight: 800;
  color: #102039;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

:where(html[data-page="digital-marketing"]) .stat-label {
  font-size: 0.68rem;
  color: #59708F;
  font-weight: 600;
  line-height: 1.25;
  margin-top: 2px;
}

:where(html[data-page="digital-marketing"]) .stat-divider {
  width: 1px;
  height: 32px;
  background: #E8EEF5;
  flex-shrink: 0;
}

/* Bottom Trust Bar Row */
:where(html[data-page="digital-marketing"]) .hero-trust-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 2px;
}

:where(html[data-page="digital-marketing"]) .avatar-stack {
  display: flex;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .avatar-stack img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  margin-left: -10px;
  object-fit: cover;
  box-shadow: 0 2px 4px rgba(16, 32, 57, 0.08);
}

:where(html[data-page="digital-marketing"]) .avatar-stack img:first-child {
  margin-left: 0;
}

:where(html[data-page="digital-marketing"]) .avatar-count-badge {
  width: 28px;
  height: 28px;
  background: #F8FAFC;
  border: 2px solid #FFFFFF;
  color: #102039;
  font-size: 11px;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -9px;
  z-index: 5;
  box-shadow: 0 2px 5px rgba(16, 32, 57, 0.08);
}

:where(html[data-page="digital-marketing"]) .trust-bar-text {
  font-size: 0.82rem;
  color: #59708F;
  line-height: 1.35;
  font-weight: 500;
}

/* ==========================================================================
   HERO RIGHT VISUAL COLLAGE — 1:1 REFERENCE MATCH
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .hero-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 540px;
}

/* Golden Organic Frame Behind Image */
:where(html[data-page="digital-marketing"]) .hero-visual-backdrop {
  position: absolute;
  width: 86%;
  height: 94%;
  background: #F0AA1B;
  border-radius: 36px;
  z-index: 0;
  top: 14px;
  right: 18px;
  box-shadow: 0 20px 48px rgba(240, 170, 27, 0.25);
}

/* Main Image Wrapper */
:where(html[data-page="digital-marketing"]) .hero-image-wrapper {
  position: relative;
  z-index: 2;
  width: 86%;
  max-width: 440px;
  height: 480px;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(16, 26, 43, 0.16);
  border: 3px solid #FFFFFF;
  background: #EAEFF7;
}

:where(html[data-page="digital-marketing"]) .hero-image-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

:where(html[data-page="digital-marketing"]) .hero-main-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 14s cubic-bezier(0.25, 1, 0.5, 1);
}

:where(html[data-page="digital-marketing"]) .hero-image-wrapper:hover .hero-main-photo {
  transform: scale(1.03);
}

/* Floating Cards Common */
:where(html[data-page="digital-marketing"]) .floating-badge {
  position: absolute;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 18px 45px rgba(16, 26, 43, 0.12);
  border: 1px solid rgba(16, 26, 43, 0.06);
  z-index: 6;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

:where(html[data-page="digital-marketing"]) .floating-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 55px rgba(16, 26, 43, 0.16);
}

/* Card 1: Strategy Card (Top Left) */
:where(html[data-page="digital-marketing"]) .floating-badge-top {
  top: -12px;
  left: -20px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

:where(html[data-page="digital-marketing"]) .floating-badge .icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .icon-yellow { background: #FFF4D5; }
:where(html[data-page="digital-marketing"]) .icon-whatsapp-brand { background: #E7F8F0; }

:where(html[data-page="digital-marketing"]) .floating-badge .badge-text {
  display: flex;
  flex-direction: column;
}

:where(html[data-page="digital-marketing"]) .floating-badge .badge-text strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: #102039;
  line-height: 1.15;
}

:where(html[data-page="digital-marketing"]) .floating-badge .badge-text span {
  font-size: 0.72rem;
  color: #59708F;
  font-weight: 500;
  line-height: 1.25;
}

:where(html[data-page="digital-marketing"]) .badge-arrow-pill {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #59708F;
  background: #F8FAFC;
  margin-left: 2px;
}

/* Card 2: Growth Spark Card (Top Right) */
:where(html[data-page="digital-marketing"]) .floating-badge-growth {
  top: 60px;
  right: -18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 140px;
}

:where(html[data-page="digital-marketing"]) .growth-chart-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:where(html[data-page="digital-marketing"]) .growth-dot-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #24B5A8;
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(html[data-page="digital-marketing"]) .growth-keywords {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

:where(html[data-page="digital-marketing"]) .growth-keywords span {
  font-size: 0.78rem;
  font-weight: 750;
  color: #1B8A7E;
  line-height: 1.25;
}

/* Card 3: Lead Gen Card (Bottom Right) */
:where(html[data-page="digital-marketing"]) .floating-badge-lead {
  bottom: 110px;
  right: -24px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Card 4: Dark Testimonial Box (Bottom Left Overlap) */
:where(html[data-page="digital-marketing"]) .floating-testimonial-dark {
  position: absolute;
  bottom: 8px;
  left: -32px;
  z-index: 7;
  background: #101A2B;
  color: #FFFFFF;
  border-radius: 20px;
  padding: 16px 20px;
  max-width: 320px;
  box-shadow: 0 24px 60px rgba(16, 26, 43, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

:where(html[data-page="digital-marketing"]) .testimonial-dark-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

:where(html[data-page="digital-marketing"]) .testimonial-dark-avatars {
  display: flex;
  align-items: center;
}

:where(html[data-page="digital-marketing"]) .testimonial-dark-avatars img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #101A2B;
  margin-left: -7px;
  object-fit: cover;
}

:where(html[data-page="digital-marketing"]) .testimonial-dark-avatars img:first-child {
  margin-left: 0;
}

:where(html[data-page="digital-marketing"]) .gold-stars {
  color: #F5AA1C;
  font-size: 11px;
  letter-spacing: 2px;
}

:where(html[data-page="digital-marketing"]) .testimonial-dark-quote {
  font-size: 0.78rem;
  line-height: 1.45;
  color: #D8E2EE;
  margin-bottom: 6px;
  font-style: normal;
}

:where(html[data-page="digital-marketing"]) .testimonial-dark-author {
  font-size: 0.68rem;
  color: #8B9AB0;
  font-weight: 600;
}

/* ==========================================================================
   BOTTOM CAPABILITY STRIP — EXACT REFERENCE SPEC
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .hero-capability-bar-wrapper {
  margin-top: 52px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:where(html[data-page="digital-marketing"]) .hero-capability-bar {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-pill, 999px);
  padding: 14px 32px;
  box-shadow: 0 10px 36px rgba(16, 26, 43, 0.07);
  gap: 24px;
  flex: 1;
  max-width: 1080px;
}

:where(html[data-page="digital-marketing"]) .cap-strip-label {
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  color: #8B9AB0;
  white-space: nowrap;
  padding-right: 12px;
}

:where(html[data-page="digital-marketing"]) .cap-strip-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}

:where(html[data-page="digital-marketing"]) .cap-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

:where(html[data-page="digital-marketing"]) .cap-item:hover {
  transform: translateY(-2px);
}

:where(html[data-page="digital-marketing"]) .cap-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .icon-meta { background: #EAF2FF; color: #3D85FF; }
:where(html[data-page="digital-marketing"]) .icon-wa { background: #E7F8F0; color: #25D366; }
:where(html[data-page="digital-marketing"]) .icon-funnel { background: #EEF2F6; color: #59708F; }
:where(html[data-page="digital-marketing"]) .icon-response { background: #F3E8FF; color: #8A5CF6; }
:where(html[data-page="digital-marketing"]) .icon-scoring { background: #EAF2FF; color: #3D85FF; }
:where(html[data-page="digital-marketing"]) .icon-crm { background: #E7F8F0; color: #32BA78; }
:where(html[data-page="digital-marketing"]) .icon-scale { background: #FFF4D5; color: #F0A51A; }

:where(html[data-page="digital-marketing"]) .cap-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

:where(html[data-page="digital-marketing"]) .cap-text strong {
  font-size: 0.88rem;
  font-weight: 750;
  color: #102039;
}

:where(html[data-page="digital-marketing"]) .cap-text span {
  font-size: 0.72rem;
  color: #59708F;
}

:where(html[data-page="digital-marketing"]) .cap-sep {
  width: 1px;
  height: 32px;
  background: #E2E8F0;
}

:where(html[data-page="digital-marketing"]) .hero-anno-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-handwriting, 'Caveat', cursive, sans-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: #E89725;
  line-height: 1.08;
  pointer-events: none;
  margin-left: 24px;
  white-space: nowrap;
}

:where(html[data-page="digital-marketing"]) .hero-anno-bottom svg {
  flex-shrink: 0;
  transform: translateY(2px);
}

/* ==========================================================================
   RELATIONSHIPS & RESULTS SECTION — PIXEL ACCURATE REBUILD
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .relations-results-section {
  padding: 88px 0 96px;
  background-color: #FFF8EC;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Ambient Corner Glows & Doodles */
:where(html[data-page="digital-marketing"]) .rel-ambient-glow-top-right {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 580px;
  height: 580px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 199, 46, 0.09) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

:where(html[data-page="digital-marketing"]) .rel-ambient-glow-bottom-left {
  position: absolute;
  bottom: -100px;
  left: -80px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 128, 237, 0.06) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

:where(html[data-page="digital-marketing"]) .rel-ambient-mint-shape {
  position: absolute;
  top: 38%;
  left: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(47, 183, 167, 0.05);
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}

:where(html[data-page="digital-marketing"]) .rel-bottom-left-squiggle {
  position: absolute;
  bottom: 24px;
  left: 28px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
}

/* Container & Grid Layout */
:where(html[data-page="digital-marketing"]) .relations-results-container {
  position: relative;
  z-index: 2;
  max-width: 1380px;
}

:where(html[data-page="digital-marketing"]) .relations-results-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  gap: 56px;
  align-items: center;
}

/* ── Left Column: Philosophy & Proof ─────────────────────────────────────── */
:where(html[data-page="digital-marketing"]) .rel-left-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 660px;
}

/* Eyebrow Badge */
:where(html[data-page="digital-marketing"]) .rel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8125rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5B6A80;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #E6EAEF;
  padding: 6px 15px;
  border-radius: 999px;
  margin-bottom: 22px;
  box-shadow: 0 2px 8px rgba(20, 36, 61, 0.03);
}

:where(html[data-page="digital-marketing"]) .rel-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2FB7A7;
  box-shadow: 0 0 0 5px rgba(47, 183, 167, 0.16);
  flex-shrink: 0;
}

/* Headline with High-Impact Typography */
:where(html[data-page="digital-marketing"]) .rel-headline {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(2.35rem, 3.75vw, 3.65rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.038em;
  color: #14243D;
  margin: 0;
  position: relative;
}

:where(html[data-page="digital-marketing"]) .rel-sunburst-wrap {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  transform: translateY(-4px);
}

:where(html[data-page="digital-marketing"]) .rel-sunburst-svg {
  display: block;
}

:where(html[data-page="digital-marketing"]) .rel-highlight-blue {
  color: #2F80ED;
  font-weight: 800;
}

:where(html[data-page="digital-marketing"]) .rel-highlight-results {
  color: #14243D;
  font-weight: 800;
  position: relative;
  display: inline-block;
  z-index: 1;
}

:where(html[data-page="digital-marketing"]) .rel-highlight-results::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 6px;
  height: 16px;
  background: #F8C72E;
  border-radius: 4px;
  z-index: -1;
  opacity: 0.85;
}

/* Supporting Copy */
:where(html[data-page="digital-marketing"]) .rel-supporting-copy {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.62;
  color: #65738A;
  margin-top: 22px;
  margin-bottom: 0;
  max-width: 580px;
  font-weight: 450;
}

/* Statistics Panel (Unified 3-Item White Card) */
:where(html[data-page="digital-marketing"]) .rel-stats-panel {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #E8EDF1;
  border-radius: 20px;
  box-shadow: 0 10px 32px rgba(20, 36, 61, 0.055);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  margin-top: 28px;
  gap: 12px;
}

:where(html[data-page="digital-marketing"]) .rel-stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

:where(html[data-page="digital-marketing"]) .rel-stat-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .rel-stat-icon-wrap.icon-mint { background: #E7F8EF; }
:where(html[data-page="digital-marketing"]) .rel-stat-icon-wrap.icon-gold { background: #FFF5CC; }
:where(html[data-page="digital-marketing"]) .rel-stat-icon-wrap.icon-blue { background: #EAF2FF; }

:where(html[data-page="digital-marketing"]) .rel-stat-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

:where(html[data-page="digital-marketing"]) .rel-stat-number {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(1.35rem, 1.75vw, 1.7rem);
  font-weight: 800;
  color: #14243D;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

:where(html[data-page="digital-marketing"]) .rel-stat-label {
  font-size: 0.725rem;
  font-weight: 700;
  color: #78879B;
  text-transform: capitalize;
  letter-spacing: -0.01em;
  margin-top: 2px;
  white-space: nowrap;
}

:where(html[data-page="digital-marketing"]) .rel-stat-sep {
  width: 1px;
  height: 38px;
  background: #E6EAEF;
  flex-shrink: 0;
}

/* Four Value/Relationship Cards (2x2 Grid) */
:where(html[data-page="digital-marketing"]) .rel-values-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 20px;
}

:where(html[data-page="digital-marketing"]) .rel-value-card {
  background: #FFFFFF;
  border: 1px solid #E8EDF1;
  border-radius: 16px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 42px 1fr 18px;
  align-items: center;
  gap: 12px;
  box-shadow: 0 6px 20px rgba(20, 36, 61, 0.04);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
  cursor: default;
}

:where(html[data-page="digital-marketing"]) .rel-value-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(20, 36, 61, 0.08);
  border-color: #D6DFE7;
}

:where(html[data-page="digital-marketing"]) .rel-value-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .rel-value-icon.icon-blue   { background: #EAF2FF; }
:where(html[data-page="digital-marketing"]) .rel-value-icon.icon-yellow { background: #FFF5CC; }
:where(html[data-page="digital-marketing"]) .rel-value-icon.icon-mint   { background: #E7F8EF; }
:where(html[data-page="digital-marketing"]) .rel-value-icon.icon-purple { background: #F0EAFE; }

:where(html[data-page="digital-marketing"]) .rel-value-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

:where(html[data-page="digital-marketing"]) .rel-value-text strong {
  font-size: 0.925rem;
  font-weight: 750;
  color: #14243D;
  line-height: 1.22;
  margin-bottom: 2px;
}

:where(html[data-page="digital-marketing"]) .rel-value-text span {
  font-size: 0.775rem;
  color: #708097;
  line-height: 1.35;
}

:where(html[data-page="digital-marketing"]) .rel-value-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14243D;
  opacity: 0.65;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

:where(html[data-page="digital-marketing"]) .rel-value-card:hover .rel-value-arrow {
  transform: translateX(3px);
  opacity: 1;
}

/* CTA Row */
:where(html[data-page="digital-marketing"]) .rel-cta-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 26px;
  flex-wrap: wrap;
}

:where(html[data-page="digital-marketing"]) .btn-navy-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: #14243D;
  color: #FFFFFF !important;
  font-size: 0.9375rem;
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(20, 36, 61, 0.18);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
}

:where(html[data-page="digital-marketing"]) .btn-navy-cta:hover {
  background: #213654;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(20, 36, 61, 0.24);
  color: #FFFFFF !important;
}

:where(html[data-page="digital-marketing"]) .btn-impact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #14243D;
  font-size: 0.9375rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

:where(html[data-page="digital-marketing"]) .btn-impact-link span:last-child {
  position: relative;
  text-decoration: underline;
  text-decoration-color: #F8C72E;
  text-underline-offset: 5px;
}

:where(html[data-page="digital-marketing"]) .btn-impact-link:hover {
  color: #2F80ED;
}

:where(html[data-page="digital-marketing"]) .impact-play-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #14243D;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  box-shadow: 0 3px 10px rgba(20, 36, 61, 0.08);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .btn-impact-link:hover .impact-play-circle {
  transform: scale(1.08);
  border-color: #2F80ED;
  background: #EAF2FF;
}

/* ── Right Column: Interactive Service Ecosystem Network ─────────────────── */
:where(html[data-page="digital-marketing"]) .rel-right-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Handwritten Annotation & Curved Arrow */
:where(html[data-page="digital-marketing"]) .orbit-annotation {
  position: absolute;
  top: -12px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 10;
  pointer-events: none;
}

:where(html[data-page="digital-marketing"]) .orbit-annotation span {
  font-family: 'Caveat', 'Playpen Sans', 'Kalam', 'Segoe Script', cursive, sans-serif;
  font-size: 1.38rem;
  font-weight: 700;
  color: #182C46;
  line-height: 1.15;
  transform: rotate(-3deg);
  text-align: right;
}

:where(html[data-page="digital-marketing"]) .orbit-curved-arrow {
  margin-top: 3px;
  margin-right: 14px;
}

/* Orbit Network Wrapper (1:1 Ratio) */
:where(html[data-page="digital-marketing"]) .orbit-network-wrapper {
  position: relative;
  width: 100%;
  max-width: 530px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* Concentric SVG Canvas & Dynamic Connectors */
:where(html[data-page="digital-marketing"]) .orbit-svg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

:where(html[data-page="digital-marketing"]) .connector-line {
  transition: stroke-opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), stroke-width 0.3s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s ease, filter 0.3s ease;
  animation: page-digital-marketing-beamFlow 3.5s linear infinite;
}

:where(html[data-page="digital-marketing"]) .connector-line.active {
  stroke-opacity: 1 !important;
  stroke-width: 3.6px !important;
  stroke-dasharray: none !important;
  filter: drop-shadow(0 0 8px currentColor);
}

:where(html[data-page="digital-marketing"]) .orbit-network-wrapper.has-active .connector-line:not(.active) {
  stroke-opacity: 0.12;
}

/* Orbit Rotator Animations */
:where(html[data-page="digital-marketing"]) .orbit-rotator-outer {
  transform-origin: 300px 300px;
  animation: page-digital-marketing-orbitRotateCW 75s linear infinite;
}

:where(html[data-page="digital-marketing"]) .orbit-rotator-inner {
  transform-origin: 300px 300px;
  animation: page-digital-marketing-orbitRotateCCW 50s linear infinite;
}

/* Ambient Center Aura Glow Pulse */
:where(html[data-page="digital-marketing"]) .orbit-ambient-pulse {
  transform-origin: 300px 300px;
  animation: page-digital-marketing-orbitAuraBreath 6s ease-in-out infinite alternate;
}

/* Radar Wave Ripples */
:where(html[data-page="digital-marketing"]) .orbit-radar-wave {
  transform-origin: 300px 300px;
  opacity: 0;
}

:where(html[data-page="digital-marketing"]) .orbit-radar-wave.wave-1 {
  animation: page-digital-marketing-orbitRadarPulse 5s cubic-bezier(0.2, 0.8, 0.3, 1) infinite;
}

:where(html[data-page="digital-marketing"]) .orbit-radar-wave.wave-2 {
  animation: page-digital-marketing-orbitRadarPulse 5s cubic-bezier(0.2, 0.8, 0.3, 1) infinite 2.5s;
}

/* Traveling Photons */
:where(html[data-page="digital-marketing"]) .photon {
  transform-box: view-box;
  transform-origin: 0px 0px;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

:where(html[data-page="digital-marketing"]) .photon-strategy    { animation: page-digital-marketing-photonMoveStrategy 3.2s infinite; }
:where(html[data-page="digital-marketing"]) .photon-marketing   { animation: page-digital-marketing-photonMoveMarketing 3.6s infinite 0.4s; }
:where(html[data-page="digital-marketing"]) .photon-development { animation: page-digital-marketing-photonMoveDevelopment 3.4s infinite 0.8s; }
:where(html[data-page="digital-marketing"]) .photon-design      { animation: page-digital-marketing-photonMoveDesign 3.8s infinite 1.2s; }
:where(html[data-page="digital-marketing"]) .photon-seo         { animation: page-digital-marketing-photonMoveSeo 3.5s infinite 1.6s; }
:where(html[data-page="digital-marketing"]) .photon-automation  { animation: page-digital-marketing-photonMoveAutomation 3.3s infinite 2.0s; }
:where(html[data-page="digital-marketing"]) .photon-branding    { animation: page-digital-marketing-photonMoveBranding 3.7s infinite 2.4s; }

/* SVG Keyframe Animations */
@keyframes page-digital-marketing-orbitRotateCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes page-digital-marketing-orbitRotateCCW {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

@keyframes page-digital-marketing-orbitAuraBreath {
  0%   { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(1.08); opacity: 1; }
}

@keyframes page-digital-marketing-beamFlow {
  to {
    stroke-dashoffset: -28;
  }
}

@keyframes page-digital-marketing-orbitRadarPulse {
  0% {
    r: 95px;
    opacity: 0.6;
    stroke-width: 2.2px;
  }
  70% {
    opacity: 0.18;
    stroke-width: 1px;
  }
  100% {
    r: 250px;
    opacity: 0;
    stroke-width: 0.5px;
  }
}

/* Coordinate translations for photons from Center (300, 300) to Node positions */
@keyframes page-digital-marketing-photonMoveStrategy {
  0%   { transform: translate(300px, 300px); opacity: 0; }
  25%  { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translate(300px, 105px); opacity: 0; }
}

@keyframes page-digital-marketing-photonMoveMarketing {
  0%   { transform: translate(300px, 300px); opacity: 0; }
  25%  { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translate(445px, 190px); opacity: 0; }
}

@keyframes page-digital-marketing-photonMoveDevelopment {
  0%   { transform: translate(300px, 300px); opacity: 0; }
  25%  { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translate(475px, 335px); opacity: 0; }
}

@keyframes page-digital-marketing-photonMoveDesign {
  0%   { transform: translate(300px, 300px); opacity: 0; }
  25%  { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translate(415px, 465px); opacity: 0; }
}

@keyframes page-digital-marketing-photonMoveSeo {
  0%   { transform: translate(300px, 300px); opacity: 0; }
  25%  { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translate(185px, 465px); opacity: 0; }
}

@keyframes page-digital-marketing-photonMoveAutomation {
  0%   { transform: translate(300px, 300px); opacity: 0; }
  25%  { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translate(125px, 335px); opacity: 0; }
}

@keyframes page-digital-marketing-photonMoveBranding {
  0%   { transform: translate(300px, 300px); opacity: 0; }
  25%  { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translate(155px, 190px); opacity: 0; }
}

/* Center Hub Node: Modern Glassmorphic Growth Engine Core */
:where(html[data-page="digital-marketing"]) .orbit-center-node {
  position: absolute;
  z-index: 8;
  width: 174px;
  height: 110px;
  border-radius: 26px;
  background: radial-gradient(135% 120% at 50% 0%, #1c3358 0%, #0c1728 100%);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 22px 50px -8px rgba(12, 23, 40, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.28),
    inset 0 -12px 24px rgba(0, 0, 0, 0.25);
  border: 1.5px solid rgba(47, 183, 167, 0.22);
  text-align: center;
  padding: 8px 10px;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}

:where(html[data-page="digital-marketing"]) .orbit-center-node:hover {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 
    0 28px 65px -10px rgba(47, 128, 237, 0.35),
    0 0 24px rgba(47, 183, 167, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.4);
  border-color: rgba(47, 183, 167, 0.55);
}

/* Subtle Specular Sheen across top glass */
:where(html[data-page="digital-marketing"]) .hub-glow-reflection {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  border-radius: 26px 26px 0 0;
}

/* Micro Live Status Indicator Pill */
:where(html[data-page="digital-marketing"]) .hub-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(47, 183, 167, 0.14);
  border: 1px solid rgba(47, 183, 167, 0.35);
  padding: 1px 6px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 3px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

:where(html[data-page="digital-marketing"]) .hub-live-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #2FB7A7;
  box-shadow: 0 0 6px #2FB7A7;
  display: inline-block;
  animation: page-digital-marketing-hubDotPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

:where(html[data-page="digital-marketing"]) .hub-live-text {
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #7EF2E4;
  text-transform: uppercase;
  line-height: 1;
}

@keyframes page-digital-marketing-hubDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.5; }
}

:where(html[data-page="digital-marketing"]) .center-brand {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  line-height: 1.05;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

:where(html[data-page="digital-marketing"]) .center-brand .brand-text {
  background: linear-gradient(180deg, #FFFFFF 40%, #D8E7FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

:where(html[data-page="digital-marketing"]) .center-brand .dot {
  background: linear-gradient(135deg, #2FB7A7 0%, #7EF2E4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(47, 183, 167, 0.45));
}

:where(html[data-page="digital-marketing"]) .center-subtitle-wrap {
  margin-top: 3px;
  position: relative;
  z-index: 2;
  width: 100%;
}

:where(html[data-page="digital-marketing"]) .center-subtitle {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  display: inline-block;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.5px 6px;
  border-radius: var(--radius-pill, 9999px);
  white-space: nowrap;
}

/* 7 Radial Service Nodes */
:where(html[data-page="digital-marketing"]) .orbit-service-node {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transform: translate(-50%, -26px);
  transform-origin: center 26px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), z-index 0.1s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

:where(html[data-page="digital-marketing"]) .orbit-service-node:focus-visible {
  outline: 2px solid #2F80ED;
  outline-offset: 4px;
  border-radius: 16px;
}

:where(html[data-page="digital-marketing"]) .orbit-service-node:hover,:where(html[data-page="digital-marketing"]) 
.orbit-service-node.active {
  z-index: 12;
  transform: translate(-50%, -26px) scale(1.08);
}

/* Radial Coordinates (Centered on SVG coordinates) */
:where(html[data-page="digital-marketing"]) .node-strategy    { top: 17.5%; left: 50.0%; }
:where(html[data-page="digital-marketing"]) .node-marketing   { top: 31.7%; left: 74.2%; }
:where(html[data-page="digital-marketing"]) .node-development { top: 55.8%; left: 79.2%; }
:where(html[data-page="digital-marketing"]) .node-design      { top: 77.5%; left: 69.2%; }
:where(html[data-page="digital-marketing"]) .node-seo         { top: 77.5%; left: 30.8%; }
:where(html[data-page="digital-marketing"]) .node-automation  { top: 55.8%; left: 20.8%; }
:where(html[data-page="digital-marketing"]) .node-branding    { top: 31.7%; left: 25.8%; }

:where(html[data-page="digital-marketing"]) .service-icon-bubble {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(20, 36, 61, 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .orbit-service-node:hover .service-icon-bubble,:where(html[data-page="digital-marketing"]) 
.orbit-service-node.active .service-icon-bubble {
  box-shadow: 0 12px 28px rgba(20, 36, 61, 0.18);
}

/* Pastel Bubble Backgrounds */
:where(html[data-page="digital-marketing"]) .bg-soft-yellow   { background: #FFF5CC; }
:where(html[data-page="digital-marketing"]) .bg-soft-pink     { background: #FCEAF4; }
:where(html[data-page="digital-marketing"]) .bg-soft-blue     { background: #EAF2FF; }
:where(html[data-page="digital-marketing"]) .bg-soft-mint     { background: #EAF8EF; }
:where(html[data-page="digital-marketing"]) .bg-soft-lavender { background: #F0EAFE; }
:where(html[data-page="digital-marketing"]) .bg-soft-teal     { background: #E7F8F5; }
:where(html[data-page="digital-marketing"]) .bg-soft-orange   { background: #FFF0E5; }

:where(html[data-page="digital-marketing"]) .service-badge-label {
  margin-top: 4px;
  padding: 3px 10px;
  background: #FFFFFF;
  border-radius: var(--radius-pill);
  font-size: 0.775rem;
  font-weight: 750;
  color: #0E1B2F;
  box-shadow: 0 4px 14px rgba(20, 36, 61, 0.08);
  white-space: nowrap;
  line-height: 1.3;
  border: 1px solid rgba(20, 36, 61, 0.06);
  transition: all 0.2s ease;
  letter-spacing: -0.01em;
}

:where(html[data-page="digital-marketing"]) .orbit-service-node:hover .service-badge-label,:where(html[data-page="digital-marketing"]) 
.orbit-service-node.active .service-badge-label {
  color: #2F80ED;
  border-color: rgba(47, 128, 237, 0.35);
  box-shadow: 0 6px 18px rgba(47, 128, 237, 0.18);
  transform: translateY(-1px);
}

:where(html[data-page="digital-marketing"]) .service-subtext {
  font-size: 0.675rem;
  color: #64748B;
  margin-top: 2px;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

:where(html[data-page="digital-marketing"]) .orbit-service-node:hover .service-subtext,:where(html[data-page="digital-marketing"]) 
.orbit-service-node.active .service-subtext {
  color: #0E1B2F;
}

/* Bottom Support Bar */
:where(html[data-page="digital-marketing"]) .orbit-support-bar {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(47, 183, 167, 0.30);
  border-radius: var(--radius-pill);
  padding: 8px 20px;
  box-shadow: 0 6px 20px rgba(20, 36, 61, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  z-index: 5;
  max-width: 100%;
}

:where(html[data-page="digital-marketing"]) .support-bar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .support-bar-text {
  font-size: 0.785rem;
  font-weight: 700;
  color: #14243D;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  text-align: center;
}

:where(html[data-page="digital-marketing"]) .support-bar-text span {
  color: #10B981;
  font-weight: 800;
}

:where(html[data-page="digital-marketing"]) .support-bar-arrow {
  position: absolute;
  right: -24px;
  top: -12px;
  pointer-events: none;
}

/* ── Responsive Media Queries ────────────────────────────────────────────── */

/* Tablet Landscape / Small Desktop (1024px–1279px) */
@media (max-width: 1279px) {
  :where(html[data-page="digital-marketing"]) .relations-results-grid {
    gap: 40px;
  }
  :where(html[data-page="digital-marketing"]) .orbit-network-wrapper {
    max-width: 480px;
  }
  :where(html[data-page="digital-marketing"]) .orbit-service-node {
    transform: translate(-50%, -24px);
    transform-origin: center 24px;
  }
  :where(html[data-page="digital-marketing"]) .orbit-service-node:hover,:where(html[data-page="digital-marketing"]) 
  .orbit-service-node.active {
    transform: translate(-50%, -24px) scale(1.08);
  }
  :where(html[data-page="digital-marketing"]) .service-icon-bubble {
    width: 48px;
    height: 48px;
  }
  :where(html[data-page="digital-marketing"]) .service-badge-label {
    font-size: 0.725rem;
    padding: 2.5px 8px;
  }
  :where(html[data-page="digital-marketing"]) .service-subtext {
    font-size: 0.625rem;
  }
  :where(html[data-page="digital-marketing"]) .orbit-center-node {
    width: 150px;
    height: 94px;
  }
  :where(html[data-page="digital-marketing"]) .center-brand {
    font-size: 1.4rem;
  }
}

/* Tablet Portrait (768px–1023px): Stack Columns */
@media (max-width: 1023px) {
  :where(html[data-page="digital-marketing"]) .relations-results-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  :where(html[data-page="digital-marketing"]) .rel-left-col {
    max-width: 100%;
  }
  :where(html[data-page="digital-marketing"]) .rel-supporting-copy {
    max-width: 100%;
  }
  :where(html[data-page="digital-marketing"]) .orbit-network-wrapper {
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
  }
  :where(html[data-page="digital-marketing"]) .orbit-annotation {
    display: none;
  }
  :where(html[data-page="digital-marketing"]) .service-badge-label {
    font-size: 0.725rem;
    padding: 2.5px 8px;
  }
}

/* Mobile Large (480px–767px) */
@media (max-width: 767px) {
  :where(html[data-page="digital-marketing"]) .relations-results-section {
    padding: 56px 0 64px;
  }
  :where(html[data-page="digital-marketing"]) .rel-headline {
    font-size: clamp(2rem, 7.5vw, 2.65rem);
  }
  :where(html[data-page="digital-marketing"]) .rel-stats-panel {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 8px;
    padding: 14px 12px;
    border-radius: 16px;
    align-items: center;
  }
  :where(html[data-page="digital-marketing"]) .rel-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 0;
    border-bottom: none;
  }
  :where(html[data-page="digital-marketing"]) .rel-stat-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  :where(html[data-page="digital-marketing"]) .rel-stat-icon-wrap svg {
    width: 17px;
    height: 17px;
  }
  :where(html[data-page="digital-marketing"]) .rel-stat-content {
    align-items: center;
  }
  :where(html[data-page="digital-marketing"]) .rel-stat-number {
    font-size: 1.15rem;
    line-height: 1.1;
  }
  :where(html[data-page="digital-marketing"]) .rel-stat-label {
    font-size: 0.62rem;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
  :where(html[data-page="digital-marketing"]) .rel-stat-sep {
    display: block;
    width: 1px;
    height: 36px;
    background: #E8EDF1;
  }
  :where(html[data-page="digital-marketing"]) .rel-values-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  :where(html[data-page="digital-marketing"]) .orbit-network-wrapper {
    max-width: 430px;
    width: 100%; max-width: 380px;
    margin: 0 auto;
  }
  :where(html[data-page="digital-marketing"]) .orbit-service-node {
    transform: translate(-50%, -23px);
    transform-origin: center 23px;
  }
  :where(html[data-page="digital-marketing"]) .orbit-service-node:hover,:where(html[data-page="digital-marketing"]) 
  .orbit-service-node.active {
    transform: translate(-50%, -23px) scale(1.08);
  }
  :where(html[data-page="digital-marketing"]) .service-icon-bubble {
    width: 46px;
    height: 46px;
  }
  :where(html[data-page="digital-marketing"]) .service-icon-bubble svg {
    width: 22px;
    height: 22px;
  }
  :where(html[data-page="digital-marketing"]) .service-badge-label {
    font-size: 0.72rem;
    padding: 2.5px 8px;
    margin-top: 3px;
  }
  :where(html[data-page="digital-marketing"]) .service-subtext {
    font-size: 0.60rem;
    margin-top: 1.5px;
  }
  :where(html[data-page="digital-marketing"]) .orbit-center-node {
    width: 148px;
    height: 96px;
    border-radius: 22px;
    padding: 8px 12px;
  }
  :where(html[data-page="digital-marketing"]) .hub-live-badge {
    padding: 2px 7px;
    gap: 4px;
    margin-bottom: 4px;
  }
  :where(html[data-page="digital-marketing"]) .hub-live-text {
    font-size: 0.52rem;
  }
  :where(html[data-page="digital-marketing"]) .hub-live-dot {
    width: 5px;
    height: 5px;
  }
  :where(html[data-page="digital-marketing"]) .center-brand {
    font-size: 1.15rem;
  }
  :where(html[data-page="digital-marketing"]) .center-subtitle {
    font-size: 0.48rem;
    padding: 1.5px 6px;
  }
  :where(html[data-page="digital-marketing"]) .center-subtitle-wrap {
    margin-top: 3px;
  }
  :where(html[data-page="digital-marketing"]) .orbit-support-bar {
    padding: 7px 16px;
    margin-top: 20px;
  }
  :where(html[data-page="digital-marketing"]) .support-bar-text {
    font-size: 0.72rem;
  }
  :where(html[data-page="digital-marketing"]) .support-bar-arrow {
    display: none;
  }
}

/* Mobile Small (≤ 479px) */
@media (max-width: 479px) {
  :where(html[data-page="digital-marketing"]) .relations-results-section {
    padding: 44px 0 52px;
  }
  :where(html[data-page="digital-marketing"]) .rel-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  :where(html[data-page="digital-marketing"]) .btn-navy-cta {
    width: 100%;
    min-height: 48px;
  }
  :where(html[data-page="digital-marketing"]) .btn-impact-link {
    justify-content: center;
    min-height: 44px;
  }
  :where(html[data-page="digital-marketing"]) .orbit-network-wrapper {
    max-width: 375px;
    width: 100%; max-width: 330px;
    margin: 0 auto;
  }
  :where(html[data-page="digital-marketing"]) .orbit-service-node {
    transform: translate(-50%, -21px);
    transform-origin: center 21px;
  }
  :where(html[data-page="digital-marketing"]) .orbit-service-node:hover,:where(html[data-page="digital-marketing"]) 
  .orbit-service-node.active {
    transform: translate(-50%, -21px) scale(1.08);
  }
  :where(html[data-page="digital-marketing"]) .service-icon-bubble {
    width: 42px;
    height: 42px;
    border-width: 2.5px;
  }
  :where(html[data-page="digital-marketing"]) .service-icon-bubble svg {
    width: 20px;
    height: 20px;
  }
  :where(html[data-page="digital-marketing"]) .service-badge-label {
    font-size: 0.66rem;
    padding: 2px 7px;
    margin-top: 2.5px;
  }
  :where(html[data-page="digital-marketing"]) .service-subtext {
    display: none;
  }
  :where(html[data-page="digital-marketing"]) .orbit-center-node {
    width: 136px;
    height: 88px;
    border-radius: 20px;
    padding: 6px 8px;
  }
  :where(html[data-page="digital-marketing"]) .hub-live-badge {
    padding: 1px 5px;
    gap: 3px;
    margin-bottom: 2px;
  }
  :where(html[data-page="digital-marketing"]) .hub-live-text {
    font-size: 0.44rem;
    letter-spacing: 0.1em;
  }
  :where(html[data-page="digital-marketing"]) .hub-live-dot {
    width: 3.5px;
    height: 3.5px;
  }
  :where(html[data-page="digital-marketing"]) .center-brand {
    font-size: 0.98rem;
  }
  :where(html[data-page="digital-marketing"]) .center-subtitle {
    font-size: 0.41rem;
    letter-spacing: 0.04em;
    padding: 1px 4px;
  }
  :where(html[data-page="digital-marketing"]) .center-subtitle-wrap {
    margin-top: 2px;
  }
  :where(html[data-page="digital-marketing"]) .orbit-support-bar {
    padding: 6px 12px;
  }
  :where(html[data-page="digital-marketing"]) .support-bar-text {
    font-size: 0.66rem;
    gap: 4px;
  }
}

/* Ultra Small (≤ 340px) */
@media (max-width: 340px) {
  :where(html[data-page="digital-marketing"]) .orbit-network-wrapper {
    max-width: 310px;
    width: 100%; max-width: 280px;
  }
  :where(html[data-page="digital-marketing"]) .orbit-service-node {
    transform: translate(-50%, -17.5px);
    transform-origin: center 17.5px;
  }
  :where(html[data-page="digital-marketing"]) .orbit-service-node:hover,:where(html[data-page="digital-marketing"]) 
  .orbit-service-node.active {
    transform: translate(-50%, -17.5px) scale(1.08);
  }
  :where(html[data-page="digital-marketing"]) .service-icon-bubble {
    width: 35px;
    height: 35px;
  }
  :where(html[data-page="digital-marketing"]) .service-icon-bubble svg {
    width: 16px;
    height: 16px;
  }
  :where(html[data-page="digital-marketing"]) .service-badge-label {
    font-size: 0.60rem;
    padding: 1.5px 5px;
  }
  :where(html[data-page="digital-marketing"]) .orbit-center-node {
    width: 112px;
    height: 74px;
    border-radius: 16px;
    padding: 4px 5px;
  }
  :where(html[data-page="digital-marketing"]) .center-brand {
    font-size: 0.82rem;
  }
  :where(html[data-page="digital-marketing"]) .hub-live-text {
    font-size: 0.38rem;
  }
  :where(html[data-page="digital-marketing"]) .center-subtitle {
    font-size: 0.36rem;
    letter-spacing: 0.03em;
    padding: 1px 3px;
  }
}

/* Honour reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="digital-marketing"]) .connector-line,:where(html[data-page="digital-marketing"]) 
  .orbit-service-node,:where(html[data-page="digital-marketing"]) 
  .rel-value-card,:where(html[data-page="digital-marketing"]) 
  .btn-navy-cta,:where(html[data-page="digital-marketing"]) 
  .impact-play-circle {
    transition: none !important;
    animation: none !important;
  }
}




/* ==========================================================================
   OUR PROCESS / GROWTH CARDS SECTION ("We help you grow your business")
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .growth-section {
  padding: 96px 0 108px;
  background-color: #FFFFFF;
  position: relative;
  overflow: hidden;
}

:where(html[data-page="digital-marketing"]) .growth-container {
  max-width: 1380px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ── Top Header Row ──────────────────────────────────────────────────────── */
:where(html[data-page="digital-marketing"]) .growth-header {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 36px;
  margin-bottom: 52px;
}

:where(html[data-page="digital-marketing"]) .growth-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Eyebrow with Warm Yellow Bar */
:where(html[data-page="digital-marketing"]) .growth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #78879B;
  margin-bottom: 12px;
}

:where(html[data-page="digital-marketing"]) .growth-eyebrow-bar {
  width: 28px;
  height: 3.5px;
  background: #F8C72E;
  border-radius: 2px;
  display: inline-block;
}

/* Headline */
:where(html[data-page="digital-marketing"]) .growth-title {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(2.35rem, 3.8vw, 3.55rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #14243D;
  margin: 0;
}

:where(html[data-page="digital-marketing"]) .growth-highlight-grow {
  color: #14243D;
  font-weight: 800;
  position: relative;
  display: inline-block;
  padding: 0 4px;
  border-radius: 6px;
  background: #F8C72E;
  opacity: 0.92;
}

/* Handwritten Script Annotation (Ideas -> Impact) */
:where(html[data-page="digital-marketing"]) .growth-annotation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  margin-top: 10px;
}

:where(html[data-page="digital-marketing"]) .annotation-text {
  font-family: 'Caveat', 'Playpen Sans', 'Kalam', cursive, sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #4F637B;
  line-height: 1.1;
  transform: rotate(-6deg);
}

:where(html[data-page="digital-marketing"]) .annotation-curved-arrow {
  margin-top: 2px;
  margin-left: 8px;
  transform: rotate(8deg);
}

/* Supporting Subtitle */
:where(html[data-page="digital-marketing"]) .growth-header-middle {
  max-width: 440px;
}

:where(html[data-page="digital-marketing"]) .growth-subtitle {
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  line-height: 1.62;
  color: #65738A;
  margin: 0;
}

/* Far-Right Organic Sticker Badge ("Your Growth Partner") */
:where(html[data-page="digital-marketing"]) .growth-partner-sticker {
  background: #FFF8EC;
  border: 1.5px solid rgba(248, 199, 46, 0.35);
  border-radius: 28px 24px 34px 22px;
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 8px 24px rgba(20, 36, 61, 0.04);
  flex-shrink: 0;
  transform: rotate(2deg);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

:where(html[data-page="digital-marketing"]) .growth-partner-sticker:hover {
  transform: rotate(0deg) scale(1.04);
  box-shadow: 0 12px 30px rgba(20, 36, 61, 0.08);
}

:where(html[data-page="digital-marketing"]) .sticker-icon-wrap {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(html[data-page="digital-marketing"]) .sticker-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

:where(html[data-page="digital-marketing"]) .sticker-sub {
  font-size: 0.75rem;
  font-weight: 700;
  color: #78879B;
  text-transform: capitalize;
}

:where(html[data-page="digital-marketing"]) .sticker-main {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.95rem;
  font-weight: 800;
  color: #14243D;
  line-height: 1.15;
}

/* ── 4 Cards Grid ────────────────────────────────────────────────────────── */
:where(html[data-page="digital-marketing"]) .growth-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

:where(html[data-page="digital-marketing"]) .growth-card {
  background: #FFFFFF;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid #EAEFF4;
  box-shadow: 0 10px 32px rgba(20, 36, 61, 0.05);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

:where(html[data-page="digital-marketing"]) .growth-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(20, 36, 61, 0.10);
  border-color: #D3DEE8;
}

/* Top Image Wrap */
:where(html[data-page="digital-marketing"]) .growth-card-img-wrap {
  position: relative;
  width: 100%;
  height: 215px;
  overflow: hidden;
  background: #F1F4F9;
}

:where(html[data-page="digital-marketing"]) .growth-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

:where(html[data-page="digital-marketing"]) .growth-card:hover .growth-card-img-wrap img {
  transform: scale(1.06);
}

/* Step Badge (Top Left of Image) */
:where(html[data-page="digital-marketing"]) .card-step-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 4px 13px;
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-weight: 800;
  font-size: 0.8125rem;
  color: #14243D;
  box-shadow: 0 4px 14px rgba(20, 36, 61, 0.12);
}

/* Floating Overlay Pill (Bottom Right of Image) */
:where(html[data-page="digital-marketing"]) .card-floating-pill {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(20, 36, 61, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

:where(html[data-page="digital-marketing"]) .pill-icon-bubble {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .pill-text {
  font-size: 0.675rem;
  font-weight: 750;
  color: #14243D;
  line-height: 1.22;
  white-space: nowrap;
  text-align: left;
}

/* Card Body Content */
:where(html[data-page="digital-marketing"]) .growth-card-body {
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  z-index: 1;
}

:where(html[data-page="digital-marketing"]) .growth-card-icon-bubble {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .growth-card-title {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: #14243D;
  line-height: 1.25;
  margin-bottom: 8px;
}

:where(html[data-page="digital-marketing"]) .growth-card-desc {
  font-size: 0.885rem;
  color: #708097;
  line-height: 1.52;
  margin-bottom: 22px;
  flex: 1;
}

/* Card Footer & Link */
:where(html[data-page="digital-marketing"]) .growth-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #F0F4F8;
  position: relative;
  z-index: 2;
}

:where(html[data-page="digital-marketing"]) .growth-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-decoration: none;
  color: #14243D;
  font-size: 0.9rem;
  font-weight: 750;
  transition: color 0.2s ease;
}

:where(html[data-page="digital-marketing"]) .growth-card-link:hover {
  color: #2F80ED;
}

:where(html[data-page="digital-marketing"]) .growth-card-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid #DCE3E9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14243D;
  background: #FFFFFF;
  transition: all 0.22s ease;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .growth-card:hover .growth-card-arrow {
  background: #14243D;
  color: #FFFFFF;
  border-color: #14243D;
  transform: translateX(3px);
}

/* Bottom Right Corner Organic Blobs */
:where(html[data-page="digital-marketing"]) .card-corner-blob {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 96px;
  height: 96px;
  border-radius: 100% 0 0 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

:where(html[data-page="digital-marketing"]) .growth-card:hover .card-corner-blob {
  opacity: 1;
}

:where(html[data-page="digital-marketing"]) .blob-blue   { background: #EAF2FF; }
:where(html[data-page="digital-marketing"]) .blob-yellow { background: #FFF5CC; }
:where(html[data-page="digital-marketing"]) .blob-mint   { background: #EAF8EF; }
:where(html[data-page="digital-marketing"]) .blob-purple { background: #F0EAFE; }

/* ── Responsive Breakpoints for Growth Section ───────────────────────────── */

/* Tablet Landscape / Small Desktop (1024px–1279px) */
@media (max-width: 1279px) {
  :where(html[data-page="digital-marketing"]) .growth-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  :where(html[data-page="digital-marketing"]) .growth-header {
    grid-template-columns: 1fr auto;
    gap: 24px;
  }
  :where(html[data-page="digital-marketing"]) .growth-annotation {
    display: none;
  }
  :where(html[data-page="digital-marketing"]) .growth-header-middle {
    max-width: 100%;
    grid-column: 1 / -1;
  }
}

/* Tablet Portrait (768px–1023px) */
@media (max-width: 1023px) {
  :where(html[data-page="digital-marketing"]) .growth-section {
    padding: 72px 0 80px;
  }
  :where(html[data-page="digital-marketing"]) .growth-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px;
  }
  :where(html[data-page="digital-marketing"]) .growth-partner-sticker {
    align-self: flex-start;
    transform: none;
  }
}

/* Mobile Large (480px–767px) */
@media (max-width: 767px) {
  :where(html[data-page="digital-marketing"]) .growth-section {
    padding: 60px 0 68px;
  }
  :where(html[data-page="digital-marketing"]) .growth-title {
    font-size: clamp(2rem, 7.5vw, 2.65rem);
  }
  :where(html[data-page="digital-marketing"]) .growth-cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  :where(html[data-page="digital-marketing"]) .growth-card-img-wrap {
    height: 200px;
  }
}

/* Mobile Small (≤ 479px) */
@media (max-width: 479px) {
  :where(html[data-page="digital-marketing"]) .growth-section {
    padding: 48px 0 56px;
  }
  :where(html[data-page="digital-marketing"]) .growth-card-img-wrap {
    height: 185px;
  }
  :where(html[data-page="digital-marketing"]) .card-floating-pill {
    padding: 4px 10px;
    gap: 6px;
    bottom: 8px;
    right: 8px;
  }
  :where(html[data-page="digital-marketing"]) .pill-text {
    font-size: 0.62rem;
  }
  :where(html[data-page="digital-marketing"]) .growth-card-body {
    padding: 20px 18px 18px;
  }
  :where(html[data-page="digital-marketing"]) .growth-card-title {
    font-size: 1.15rem;
  }
}


/* ==========================================================================
   INDUSTRY SHOWCASE SECTION ("Solutions for every industry")
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .industry-section {
  padding: 100px 0 90px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F9FBFC 100%);
  position: relative;
  overflow: hidden;
}

:where(html[data-page="digital-marketing"]) .industry-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header Row */
:where(html[data-page="digital-marketing"]) .industry-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 34px;
  position: relative;
}

:where(html[data-page="digital-marketing"]) .industry-header-left {
  max-width: 680px;
}

:where(html[data-page="digital-marketing"]) .ind-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #64748B;
  text-transform: uppercase;
  margin-bottom: 12px;
}

:where(html[data-page="digital-marketing"]) .ind-eyebrow-bar {
  display: inline-block;
  width: 32px;
  height: 2.5px;
  background: #F8C72E;
  border-radius: 2px;
}

:where(html[data-page="digital-marketing"]) .ind-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.8vw, 2.75rem);
  font-weight: 800;
  color: #14243D;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

:where(html[data-page="digital-marketing"]) .ind-highlight-every {
  position: relative;
  display: inline-block;
  color: #14243D;
}

:where(html[data-page="digital-marketing"]) .ind-highlight-every::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0px;
  height: 10px;
  background: #FDE047;
  opacity: 0.75;
  border-radius: 12px;
  z-index: -1;
  transform: rotate(-0.5deg);
}

:where(html[data-page="digital-marketing"]) .ind-sunburst-wrap {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 2px;
  margin-top: -16px;
}

:where(html[data-page="digital-marketing"]) .ind-sunburst-wrap svg {
  display: block;
}

/* Header Right - Annotation & Button */
:where(html[data-page="digital-marketing"]) .industry-header-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

:where(html[data-page="digital-marketing"]) .ind-top-annotation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  margin-right: -2px;
  margin-top: -8px;
}

:where(html[data-page="digital-marketing"]) .ind-top-annotation span {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #64748B;
  line-height: 0.96;
  text-align: right;
  letter-spacing: -0.01em;
  display: inline-block;
}

:where(html[data-page="digital-marketing"]) .ind-loop-arrow {
  flex-shrink: 0;
  margin-bottom: -6px;
}

:where(html[data-page="digital-marketing"]) .btn-industry-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 9999px;
  color: #14243D;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

:where(html[data-page="digital-marketing"]) .btn-industry-outline:hover {
  border-color: #14243D;
  background: #14243D;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(20, 36, 61, 0.15);
  transform: translateY(-2px);
}

:where(html[data-page="digital-marketing"]) .btn-industry-outline svg {
  transition: transform 0.25s ease;
}

:where(html[data-page="digital-marketing"]) .btn-industry-outline:hover svg {
  transform: translateX(3px);
}

/* Filter Navigation Bar */
:where(html[data-page="digital-marketing"]) .industry-tabs-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #FFFFFF;
  padding: 6px;
  border-radius: 9999px;
  border: 1px solid #EAEFF4;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  margin-bottom: 28px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

:where(html[data-page="digital-marketing"]) .industry-tabs-bar::-webkit-scrollbar {
  display: none;
}

:where(html[data-page="digital-marketing"]) .industry-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  color: #5A6B82;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s ease;
  user-select: none;
}

:where(html[data-page="digital-marketing"]) .industry-tab-btn svg {
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

:where(html[data-page="digital-marketing"]) .industry-tab-btn:hover {
  color: #14243D;
  background: #F4F7FA;
}

:where(html[data-page="digital-marketing"]) .industry-tab-btn.active {
  background: #14243D;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(20, 36, 61, 0.2);
}

:where(html[data-page="digital-marketing"]) .industry-tab-btn.active svg {
  color: #FFFFFF;
}

/* Main Featured Showcase Card */
:where(html[data-page="digital-marketing"]) .industry-showcase-card {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  background: #FFFFFF;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.09);
  border: 1px solid #EAEFF4;
  min-height: 480px;
  position: relative;
}

/* Left Photo Pane */
:where(html[data-page="digital-marketing"]) .industry-image-pane {
  position: relative;
  background: #1E293B;
  overflow: hidden;
  display: flex;
  min-height: 420px;
}

:where(html[data-page="digital-marketing"]) .industry-image-pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

:where(html[data-page="digital-marketing"]) .industry-showcase-card:hover .industry-image-pane img {
  transform: scale(1.02);
}

/* Top-Left Image Tag */
:where(html[data-page="digital-marketing"]) .image-overlay-tag {
  position: absolute;
  top: 24px;
  left: 28px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 2;
}

/* Top-Right Watermark Typography */
:where(html[data-page="digital-marketing"]) .image-watermark-words {
  position: absolute;
  top: 22px;
  right: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 2;
  line-height: 1.25;
}

/* Floating Glass Testimonial Badge at Bottom */
:where(html[data-page="digital-marketing"]) .industry-quote-badge {
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 18px 24px;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 3;
}

:where(html[data-page="digital-marketing"]) .quote-icon-bubble {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFF7D6;
  color: #D97706;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: serif;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .quote-body {
  flex: 1;
  min-width: 0;
}

:where(html[data-page="digital-marketing"]) .industry-quote-text {
  font-size: 0.86rem;
  font-weight: 600;
  color: #14243D;
  line-height: 1.42;
  margin: 0 0 4px 0;
  font-style: normal;
}

:where(html[data-page="digital-marketing"]) .industry-quote-author {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748B;
}

:where(html[data-page="digital-marketing"]) .quote-script-note {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-left: 8px;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
}

:where(html[data-page="digital-marketing"]) .quote-script-note span {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: #5A6B82;
  line-height: 1.1;
  text-align: left;
}

/* Right Navy Stats Pane */
:where(html[data-page="digital-marketing"]) .industry-stats-pane {
  background: linear-gradient(145deg, #0d192c 0%, #152642 60%, #1c3254 100%);
  color: #FFFFFF;
  padding: 44px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

:where(html[data-page="digital-marketing"]) .industry-stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

:where(html[data-page="digital-marketing"]) .stats-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #38BDF8;
  text-transform: uppercase;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  padding: 4px 12px;
  border-radius: 9999px;
}

:where(html[data-page="digital-marketing"]) .stats-eyebrow-bar {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #38BDF8;
  border-radius: 50%;
  box-shadow: 0 0 8px #38BDF8;
}

:where(html[data-page="digital-marketing"]) .industry-chart-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(248, 199, 46, 0.1);
  border: 1px solid rgba(248, 199, 46, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .industry-stats-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0 0 14px 0;
}

:where(html[data-page="digital-marketing"]) .industry-stats-title .text-gold {
  color: #F8C72E;
  background: linear-gradient(135deg, #F8C72E 0%, #FBBF24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

:where(html[data-page="digital-marketing"]) .industry-stats-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #94A3B8;
  margin: 0 0 28px 0;
  max-width: 440px;
}

/* 3 Metrics Row */
:where(html[data-page="digital-marketing"]) .industry-metrics-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0 0 28px 0;
}

:where(html[data-page="digital-marketing"]) .industry-metric-col {
  text-align: left;
}

:where(html[data-page="digital-marketing"]) .industry-metric-val {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 1.8vw, 1.75rem);
  font-weight: 800;
  color: #F8FAFC;
  line-height: 1.1;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
}

:where(html[data-page="digital-marketing"]) .industry-metric-lbl {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748B;
  margin-top: 5px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

:where(html[data-page="digital-marketing"]) .metric-sep {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 10px;
}

/* CTA & Microcopy */
:where(html[data-page="digital-marketing"]) .industry-cta-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

:where(html[data-page="digital-marketing"]) .btn-case-studies {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #F8C72E 0%, #F59E0B 100%);
  color: #0F172A;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.28);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

:where(html[data-page="digital-marketing"]) .btn-case-studies:hover {
  background: linear-gradient(135deg, #FBBF24 0%, #D97706 100%);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(245, 158, 11, 0.4);
  color: #0F172A;
}

:where(html[data-page="digital-marketing"]) .btn-case-studies svg {
  transition: transform 0.25s ease;
}

:where(html[data-page="digital-marketing"]) .btn-case-studies:hover svg {
  transform: translateX(4px);
}

:where(html[data-page="digital-marketing"]) .industry-cta-microcopy {
  font-size: 0.78rem;
  color: #64748B;
  font-weight: 500;
  margin-left: 4px;
}

/* Watermark Note in Bottom Right */
:where(html[data-page="digital-marketing"]) .stats-watermark-note {
  position: absolute;
  bottom: 24px;
  right: 28px;
  pointer-events: none;
  text-align: right;
  z-index: 1;
  opacity: 0.25;
}

:where(html[data-page="digital-marketing"]) .stats-watermark-note span {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #94A3B8;
  line-height: 1.1;
  display: block;
}

/* ==========================================================================
   INDUSTRY SHOWCASE RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1023px) {
  :where(html[data-page="digital-marketing"]) .industry-showcase-card {
    grid-template-columns: 1fr;
  }

  :where(html[data-page="digital-marketing"]) .industry-image-pane {
    min-height: 400px;
  }

  :where(html[data-page="digital-marketing"]) .industry-stats-pane {
    padding: 36px 32px 32px;
  }

  :where(html[data-page="digital-marketing"]) .ind-top-annotation {
    display: none;
  }
}

@media (max-width: 767px) {
  :where(html[data-page="digital-marketing"]) .industry-section {
    padding: 70px 0 60px;
  }

  :where(html[data-page="digital-marketing"]) .industry-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
  }

  :where(html[data-page="digital-marketing"]) .btn-industry-outline {
    width: 100%;
    justify-content: center;
  }

  :where(html[data-page="digital-marketing"]) .industry-image-pane {
    min-height: 340px;
  }

  :where(html[data-page="digital-marketing"]) .industry-quote-badge {
    bottom: 14px;
    left: 14px;
    right: 14px;
    padding: 14px 16px;
    gap: 12px;
  }

  :where(html[data-page="digital-marketing"]) .quote-script-note {
    display: none;
  }

  :where(html[data-page="digital-marketing"]) .industry-stats-pane {
    padding: 28px 20px 24px;
  }

  :where(html[data-page="digital-marketing"]) .stats-watermark-note {
    display: none;
  }

  :where(html[data-page="digital-marketing"]) .industry-metrics-row {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
    padding: 16px 0;
  }

  :where(html[data-page="digital-marketing"]) .metric-sep {
    display: block;
    height: 30px;
    margin: 0 8px;
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
  }

  :where(html[data-page="digital-marketing"]) .btn-case-studies {
    width: 100%;
  }

  :where(html[data-page="digital-marketing"]) .industry-cta-microcopy {
    text-align: center;
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 479px) {
  :where(html[data-page="digital-marketing"]) .industry-container {
    padding: 0 16px;
  }

  :where(html[data-page="digital-marketing"]) .ind-title {
    font-size: 1.75rem;
  }

  :where(html[data-page="digital-marketing"]) .image-watermark-words {
    font-size: 0.95rem;
    right: 16px;
    top: 16px;
  }

  :where(html[data-page="digital-marketing"]) .image-overlay-tag {
    left: 16px;
    top: 16px;
  }

  :where(html[data-page="digital-marketing"]) .industry-quote-badge {
    border-radius: 14px;
    padding: 12px 14px;
  }

  :where(html[data-page="digital-marketing"]) .quote-icon-bubble {
    width: 30px;
    height: 30px;
    font-size: 1.3rem;
  }

  :where(html[data-page="digital-marketing"]) .industry-quote-text {
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   STRATEGY CALL BOOKING SECTION
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .booking-section {
  padding: 110px 0 110px;
  background: 
    radial-gradient(ellipse at 88% 12%, rgba(220, 252, 231, 0.45) 0%, transparent 42%),
    radial-gradient(ellipse at 12% 80%, rgba(254, 243, 199, 0.5) 0%, transparent 45%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
  position: relative;
  overflow: hidden;
}

:where(html[data-page="digital-marketing"]) .booking-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2;
}

/* Ambient Doodles & Floating Badges */
:where(html[data-page="digital-marketing"]) .booking-doodle-topleft {
  position: absolute;
  top: 40px;
  left: max(20px, calc((100vw - 1240px) / 2 + 10px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
  z-index: 3;
}

:where(html[data-page="digital-marketing"]) .booking-doodle-topleft span {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #5A6B82;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

:where(html[data-page="digital-marketing"]) .doodle-curve-arrow {
  margin-left: 22px;
  margin-top: 1px;
}

:where(html[data-page="digital-marketing"]) .booking-floating-badge {
  position: absolute;
  top: 36px;
  right: max(20px, calc((100vw - 1240px) / 2 + 10px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
  z-index: 3;
}

:where(html[data-page="digital-marketing"]) .floating-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #DCFCE7;
  padding: 8px 16px;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.18);
}

:where(html[data-page="digital-marketing"]) .badge-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .badge-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

:where(html[data-page="digital-marketing"]) .badge-text-wrap span:first-child {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: #15803D;
}

:where(html[data-page="digital-marketing"]) .badge-text-wrap span:last-child {
  font-size: 0.72rem;
  font-weight: 600;
  color: #16A34A;
}

:where(html[data-page="digital-marketing"]) .badge-yellow-arrow {
  margin-right: 32px;
  transform: rotate(-6deg);
}

/* 3-Column Layout Grid */
:where(html[data-page="digital-marketing"]) .booking-main-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr 1.14fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 40px;
}

/* ==========================================================================
   Column 1: Interactive Calendar Card
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .calendar-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 28px 24px 22px;
  border: 1px solid #EAEFF4;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
}

:where(html[data-page="digital-marketing"]) .calendar-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

:where(html[data-page="digital-marketing"]) .cal-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FEF3C7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .cal-header-titles {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

:where(html[data-page="digital-marketing"]) .calendar-month-title {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  color: #14243D;
}

:where(html[data-page="digital-marketing"]) .calendar-subtitle {
  font-size: 0.74rem;
  color: #64748B;
  margin-top: 2px;
}

:where(html[data-page="digital-marketing"]) .calendar-nav-btns {
  display: flex;
  gap: 6px;
}

:where(html[data-page="digital-marketing"]) .cal-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5A6B82;
  cursor: pointer;
  transition: all 0.2s ease;
}

:where(html[data-page="digital-marketing"]) .cal-nav-btn:hover {
  background: #14243D;
  color: #FFFFFF;
  border-color: #14243D;
}

:where(html[data-page="digital-marketing"]) .calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 600;
  color: #8E9EBA;
  margin-bottom: 8px;
}

:where(html[data-page="digital-marketing"]) .calendar-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 0.82rem;
  margin-bottom: 18px;
}

:where(html[data-page="digital-marketing"]) .cal-day {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #14243D;
  cursor: pointer;
  font-weight: 600;
  position: relative;
  transition: all 0.18s ease;
  user-select: none;
}

:where(html[data-page="digital-marketing"]) .cal-day:hover:not(.disabled) {
  background: #F1F5F9;
  color: #0E1B2F;
}

:where(html[data-page="digital-marketing"]) .cal-day.selected {
  background: #14243D;
  color: #FFFFFF !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(20, 36, 61, 0.25);
}

:where(html[data-page="digital-marketing"]) .cal-day.selected::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #F8C72E;
}

:where(html[data-page="digital-marketing"]) .cal-day.disabled {
  color: #CBD5E1;
  cursor: default;
  font-weight: 400;
}

/* Time Slots */
:where(html[data-page="digital-marketing"]) .time-slots-container {
  padding-top: 16px;
  border-top: 1px dashed #E2E8F0;
  margin-top: 20px;
}

:where(html[data-page="digital-marketing"]) .time-slots-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

:where(html[data-page="digital-marketing"]) .time-slots-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: #14243D;
}

:where(html[data-page="digital-marketing"]) .time-selected-date-str {
  font-size: 0.74rem;
  font-weight: 600;
  color: #64748B;
}

:where(html[data-page="digital-marketing"]) .time-slots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

:where(html[data-page="digital-marketing"]) .time-slot-btn {
  padding: 9px 12px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1.2px solid #E2E8F0;
  color: #14243D;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

:where(html[data-page="digital-marketing"]) .time-slot-btn:hover {
  border-color: #14243D;
  background: #F8FAFC;
}

:where(html[data-page="digital-marketing"]) .time-slot-btn.active {
  background: #14243D;
  color: #FFFFFF;
  border-color: #14243D;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(20, 36, 61, 0.2);
}

:where(html[data-page="digital-marketing"]) .time-zone-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.71rem;
  color: #64748B;
  text-align: center;
}

/* ==========================================================================
   Column 2: Value Proposition & Social Proof
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .booking-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0;
  position: relative;
}

:where(html[data-page="digital-marketing"]) .booking-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #E6F8F6;
  color: #0D9488;
  padding: 5px 12px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
  align-self: flex-start;
}

:where(html[data-page="digital-marketing"]) .booking-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  font-weight: 800;
  color: #14243D;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px 0;
}

:where(html[data-page="digital-marketing"]) .booking-title-highlight {
  position: relative;
  display: inline-block;
  color: #14243D;
}

:where(html[data-page="digital-marketing"]) .booking-title-highlight::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0px;
  height: 9px;
  background: #FDE047;
  opacity: 0.75;
  border-radius: 12px;
  z-index: -1;
  transform: rotate(-0.5deg);
}

:where(html[data-page="digital-marketing"]) .booking-desc {
  font-size: 0.92rem;
  color: #5A6B82;
  margin: 0 0 24px 0;
  line-height: 1.55;
}

:where(html[data-page="digital-marketing"]) .booking-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

:where(html[data-page="digital-marketing"]) .booking-benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

:where(html[data-page="digital-marketing"]) .benefit-icon-bubble {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .benefit-icon-bubble.green {
  background: #DCFCE7;
}

:where(html[data-page="digital-marketing"]) .benefit-icon-bubble.blue {
  background: #E0F2FE;
}

:where(html[data-page="digital-marketing"]) .benefit-icon-bubble.purple {
  background: #F3E8FF;
}

:where(html[data-page="digital-marketing"]) .benefit-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

:where(html[data-page="digital-marketing"]) .benefit-text strong {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: #14243D;
}

:where(html[data-page="digital-marketing"]) .benefit-text span {
  font-size: 0.76rem;
  color: #64748B;
}

/* Center Doodle */
:where(html[data-page="digital-marketing"]) .booking-doodle-grow {
  position: absolute;
  right: -10px;
  bottom: 60px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
  z-index: 3;
}

:where(html[data-page="digital-marketing"]) .booking-doodle-grow span {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #5A6B82;
  line-height: 1.05;
}

/* Social Proof */
:where(html[data-page="digital-marketing"]) .booking-social-proof {
  padding-top: 16px;
  border-top: 1px solid #EAEFF4;
}

:where(html[data-page="digital-marketing"]) .social-proof-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: #64748B;
  margin-bottom: 8px;
}

:where(html[data-page="digital-marketing"]) .social-proof-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

:where(html[data-page="digital-marketing"]) .avatar-stack {
  display: flex;
  align-items: center;
}

:where(html[data-page="digital-marketing"]) .avatar-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFFFFF;
  margin-left: -8px;
}

:where(html[data-page="digital-marketing"]) .avatar-thumb:first-child {
  margin-left: 0;
}

:where(html[data-page="digital-marketing"]) .avatar-more-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #EAEFF4;
  color: #14243D;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFFFFF;
  margin-left: -8px;
}

:where(html[data-page="digital-marketing"]) .rating-stars-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

:where(html[data-page="digital-marketing"]) .star-icons-row {
  display: flex;
  gap: 2px;
}

:where(html[data-page="digital-marketing"]) .rating-score-text {
  font-size: 0.78rem;
  color: #64748B;
}

:where(html[data-page="digital-marketing"]) .rating-score-text strong {
  color: #14243D;
}

/* ==========================================================================
   Column 3: Lead Capture Form Card
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .booking-form-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 28px 26px 24px;
  border: 1px solid #EAEFF4;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

:where(html[data-page="digital-marketing"]) .booking-form-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

:where(html[data-page="digital-marketing"]) .form-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FEF3C7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .form-header-titles {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

:where(html[data-page="digital-marketing"]) .form-card-title {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  color: #14243D;
}

:where(html[data-page="digital-marketing"]) .form-card-subtitle {
  font-size: 0.74rem;
  color: #64748B;
  margin-top: 2px;
}

:where(html[data-page="digital-marketing"]) .form-group {
  margin-bottom: 12px;
}

:where(html[data-page="digital-marketing"]) .form-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  color: #14243D;
  margin-bottom: 5px;
}

:where(html[data-page="digital-marketing"]) .input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

:where(html[data-page="digital-marketing"]) .form-input,:where(html[data-page="digital-marketing"])  .form-select,:where(html[data-page="digital-marketing"])  .form-textarea {
  width: 100%;
  background: #FFFFFF;
  border: 1.2px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.86rem;
  color: #14243D;
  font-family: var(--font-body);
  transition: all 0.2s ease;
}

:where(html[data-page="digital-marketing"]) .form-input::placeholder,:where(html[data-page="digital-marketing"])  .form-textarea::placeholder {
  color: #94A3B8;
  font-size: 0.84rem;
}

:where(html[data-page="digital-marketing"]) .form-input:focus,:where(html[data-page="digital-marketing"])  .form-select:focus,:where(html[data-page="digital-marketing"])  .form-textarea:focus {
  border-color: #14243D;
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 36, 61, 0.08);
}

:where(html[data-page="digital-marketing"]) .input-right-icon {
  position: absolute;
  right: 14px;
  pointer-events: none;
}

:where(html[data-page="digital-marketing"]) .phone-input-wrap .phone-flag-icon {
  position: absolute;
  left: 12px;
  font-size: 1rem;
  pointer-events: none;
}

:where(html[data-page="digital-marketing"]) .phone-input {
  padding-left: 36px;
}

:where(html[data-page="digital-marketing"]) .select-wrap .input-left-icon {
  position: absolute;
  left: 12px;
  pointer-events: none;
}

:where(html[data-page="digital-marketing"]) .custom-select {
  padding-left: 36px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

:where(html[data-page="digital-marketing"]) .textarea-wrap .textarea-icon {
  position: absolute;
  left: 12px;
  top: 12px;
  pointer-events: none;
}

:where(html[data-page="digital-marketing"]) .form-textarea {
  padding-left: 36px;
  resize: vertical;
  min-height: 64px;
}

:where(html[data-page="digital-marketing"]) .form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

:where(html[data-page="digital-marketing"]) .btn-book-strategy-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  background: #F8C72E;
  color: #14243D;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(248, 199, 46, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 6px;
}

:where(html[data-page="digital-marketing"]) .btn-book-strategy-submit:hover {
  background: #FBBF24;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(248, 199, 46, 0.45);
}

:where(html[data-page="digital-marketing"]) .form-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #64748B;
  margin-top: 10px;
  text-align: center;
}

:where(html[data-page="digital-marketing"]) .form-status-msg {
  display: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.8rem;
  margin-top: 10px;
  text-align: center;
  line-height: 1.4;
}

:where(html[data-page="digital-marketing"]) .form-status-msg.success {
  display: block;
  background: #DCFCE7;
  color: #15803D;
  border: 1px solid rgba(22, 163, 74, 0.2);
}

:where(html[data-page="digital-marketing"]) .form-status-msg.error {
  display: block;
  background: #FEE2E2;
  color: #DC2626;
  border: 1px solid rgba(220, 38, 38, 0.2);
}

/* ==========================================================================
   Bottom Trust Value Strip
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .booking-trust-strip {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #FFFFFF;
  border-radius: 9999px;
  padding: 14px 28px;
  border: 1px solid #EAEFF4;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

:where(html[data-page="digital-marketing"]) .trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: #14243D;
}

:where(html[data-page="digital-marketing"]) .trust-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .trust-icon.green {
  background: #DCFCE7;
}

:where(html[data-page="digital-marketing"]) .trust-icon.blue {
  background: #E0F2FE;
}

:where(html[data-page="digital-marketing"]) .trust-icon.purple {
  background: #F3E8FF;
}

:where(html[data-page="digital-marketing"]) .trust-icon.coral {
  background: #FFE4E6;
}

:where(html[data-page="digital-marketing"]) .trust-sep {
  width: 1px;
  height: 24px;
  background: #E2E8F0;
}

/* Bottom Left Doodle */
:where(html[data-page="digital-marketing"]) .booking-doodle-bottomleft {
  position: absolute;
  bottom: 40px;
  left: max(20px, calc((100vw - 1240px) / 2 + 10px));
  display: flex;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
  z-index: 3;
}

:where(html[data-page="digital-marketing"]) .booking-doodle-bottomleft span {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #5A6B82;
  line-height: 1.05;
}

:where(html[data-page="digital-marketing"]) .doodle-starts-arrow {
  margin-bottom: 4px;
}

/* Bottom Right Botanical Sprout */
:where(html[data-page="digital-marketing"]) .booking-botanical-bg {
  position: absolute;
  bottom: -15px;
  right: -15px;
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   BOOKING SECTION RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1199px) {
  :where(html[data-page="digital-marketing"]) .booking-main-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  :where(html[data-page="digital-marketing"]) .booking-center {
    grid-column: span 2;
    order: -1;
    margin-bottom: 8px;
    padding: 8px 4px;
  }

  :where(html[data-page="digital-marketing"]) .booking-doodle-topleft,:where(html[data-page="digital-marketing"]) 
  .booking-floating-badge,:where(html[data-page="digital-marketing"]) 
  .booking-doodle-grow,:where(html[data-page="digital-marketing"]) 
  .booking-doodle-bottomleft {
    display: none;
  }
}

@media (max-width: 767px) {
  :where(html[data-page="digital-marketing"]) .booking-section {
    padding: 70px 0 70px;
  }

  :where(html[data-page="digital-marketing"]) .booking-main-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  :where(html[data-page="digital-marketing"]) .booking-center {
    grid-column: span 1;
    padding: 4px 0;
  }

  :where(html[data-page="digital-marketing"]) .booking-hero-title {
    font-size: 1.85rem;
  }

  :where(html[data-page="digital-marketing"]) .form-grid-2 {
    grid-template-columns: 1fr;
  }

  :where(html[data-page="digital-marketing"]) .booking-trust-strip {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 20px;
    gap: 12px;
    padding: 18px 20px;
  }

  :where(html[data-page="digital-marketing"]) .trust-sep {
    display: none;
  }
}

@media (max-width: 479px) {
  :where(html[data-page="digital-marketing"]) .calendar-card,:where(html[data-page="digital-marketing"])  .booking-form-card {
    padding: 18px 16px;
    border-radius: 18px;
  }

  :where(html[data-page="digital-marketing"]) .time-slots-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   SERVICES SECTION ("Your One-Stop Hub for All Services")
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .services-section {
  padding: 100px 0 90px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
  position: relative;
  overflow: hidden;
}

:where(html[data-page="digital-marketing"]) .services-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

/* Services Header Row */
:where(html[data-page="digital-marketing"]) .services-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 38px;
}

:where(html[data-page="digital-marketing"]) .services-header-left {
  max-width: 680px;
}

:where(html[data-page="digital-marketing"]) .services-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  padding: 5px 14px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  color: #14243D;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

:where(html[data-page="digital-marketing"]) .services-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

:where(html[data-page="digital-marketing"]) .services-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.6vw, 2.65rem);
  font-weight: 800;
  color: #14243D;
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin: 0 0 14px 0;
  display: block;
}

:where(html[data-page="digital-marketing"]) .services-title-highlight {
  position: relative;
  display: inline-block;
  color: #14243D;
  margin-left: 3px;
}

:where(html[data-page="digital-marketing"]) .services-title-highlight::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: 2px;
  height: 9px;
  background: #FDE047;
  opacity: 0.85;
  border-radius: 12px;
  z-index: -1;
  transform: rotate(-0.5deg);
}

:where(html[data-page="digital-marketing"]) .services-sunburst-wrap {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 4px;
  position: relative;
  top: -8px;
}

:where(html[data-page="digital-marketing"]) .services-desc {
  font-size: 0.94rem;
  color: #5A6B82;
  line-height: 1.55;
  max-width: 540px;
  margin: 0;
}

/* Header Right - Doodle & CTA */
:where(html[data-page="digital-marketing"]) .services-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  padding-bottom: 4px;
}

:where(html[data-page="digital-marketing"]) .services-top-doodle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  margin-right: -4px;
  margin-top: -8px;
}

:where(html[data-page="digital-marketing"]) .services-top-doodle span {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #64748B;
  line-height: 0.98;
  text-align: right;
  letter-spacing: -0.01em;
  display: inline-block;
}

:where(html[data-page="digital-marketing"]) .services-doodle-arrow {
  flex-shrink: 0;
  margin-bottom: -6px;
}

:where(html[data-page="digital-marketing"]) .services-cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

:where(html[data-page="digital-marketing"]) .btn-services-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  background: #14243D;
  color: #FFFFFF;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(20, 36, 61, 0.2);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

:where(html[data-page="digital-marketing"]) .btn-services-primary:hover {
  background: #0E1B2F;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 36, 61, 0.3);
  color: #FFFFFF;
}

:where(html[data-page="digital-marketing"]) .btn-services-primary svg {
  transition: transform 0.25s ease;
}

:where(html[data-page="digital-marketing"]) .btn-services-primary:hover svg {
  transform: translateX(3px);
}

:where(html[data-page="digital-marketing"]) .services-cta-microcopy {
  font-size: 0.74rem;
  color: #64748B;
  font-weight: 500;
  margin-left: 4px;
}

/* ==========================================================================
   5 Bento Service Cards Grid
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .services-bento-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-bottom: 38px;
}

:where(html[data-page="digital-marketing"]) .service-bento-card {
  border-radius: 24px;
  padding: 24px 18px 20px;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid transparent;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

:where(html[data-page="digital-marketing"]) .service-bento-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.09);
}

/* Card Themes */
:where(html[data-page="digital-marketing"]) .bento-yellow {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF5 100%);
  border-color: #FEF3C7;
}
:where(html[data-page="digital-marketing"]) .bento-yellow .bento-icon-box {
  background: #FEF3C7;
}
:where(html[data-page="digital-marketing"]) .bento-yellow .bento-index-num {
  color: #D97706;
}

:where(html[data-page="digital-marketing"]) .bento-blue {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFF 100%);
  border-color: #DBEAFE;
}
:where(html[data-page="digital-marketing"]) .bento-blue .bento-icon-box {
  background: #DBEAFE;
}
:where(html[data-page="digital-marketing"]) .bento-blue .bento-index-num {
  color: #2563EB;
}

:where(html[data-page="digital-marketing"]) .bento-pink {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF9FC 100%);
  border-color: #FCE7F3;
}
:where(html[data-page="digital-marketing"]) .bento-pink .bento-icon-box {
  background: #FCE7F3;
}
:where(html[data-page="digital-marketing"]) .bento-pink .bento-index-num {
  color: #DB2777;
}

:where(html[data-page="digital-marketing"]) .bento-green {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FEFA 100%);
  border-color: #DCFCE7;
}
:where(html[data-page="digital-marketing"]) .bento-green .bento-icon-box {
  background: #DCFCE7;
}
:where(html[data-page="digital-marketing"]) .bento-green .bento-index-num {
  color: #16A34A;
}

:where(html[data-page="digital-marketing"]) .bento-purple {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF8FF 100%);
  border-color: #F3E8FF;
}
:where(html[data-page="digital-marketing"]) .bento-purple .bento-icon-box {
  background: #F3E8FF;
}
:where(html[data-page="digital-marketing"]) .bento-purple .bento-index-num {
  color: #7C3AED;
}

/* Top Icon & Index Row */
:where(html[data-page="digital-marketing"]) .bento-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

:where(html[data-page="digital-marketing"]) .bento-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .bento-index-num {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  opacity: 0.85;
}

:where(html[data-page="digital-marketing"]) .bento-card-title {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 700;
  color: #14243D;
  margin: 0 0 8px 0;
  line-height: 1.25;
}

:where(html[data-page="digital-marketing"]) .bento-card-desc {
  font-size: 0.8rem;
  color: #5A6B82;
  line-height: 1.45;
  margin: 0 0 16px 0;
}

/* Feature Checkmarks */
:where(html[data-page="digital-marketing"]) .bento-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

:where(html[data-page="digital-marketing"]) .bento-features-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #14243D;
}

:where(html[data-page="digital-marketing"]) .bento-check-icon {
  flex-shrink: 0;
}

/* Card Footer */
:where(html[data-page="digital-marketing"]) .bento-card-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

:where(html[data-page="digital-marketing"]) .bento-learn-more {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: #14243D;
  transition: color 0.2s ease;
}

:where(html[data-page="digital-marketing"]) .bento-arrow-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14243D;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

:where(html[data-page="digital-marketing"]) .service-bento-card:hover .bento-arrow-circle {
  background: #14243D;
  color: #FFFFFF;
  border-color: #14243D;
  transform: translateX(3px);
}

/* ==========================================================================
   Bottom Trust Strip & Right Doodle
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .services-bottom-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 10px 0;
}

:where(html[data-page="digital-marketing"]) .services-bottom-trust {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  background: #FFFFFF;
  border-radius: 9999px;
  padding: 12px 32px;
  border: 1px solid #EAEFF4;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

:where(html[data-page="digital-marketing"]) .services-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 700;
  color: #14243D;
}

:where(html[data-page="digital-marketing"]) .services-trust-sep {
  width: 1px;
  height: 20px;
  background: #E2E8F0;
}

:where(html[data-page="digital-marketing"]) .services-bottom-doodle {
  position: absolute;
  right: 0;
  top: -24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  pointer-events: none;
}

:where(html[data-page="digital-marketing"]) .services-bottom-doodle span {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #64748B;
  line-height: 0.98;
  text-align: right;
  letter-spacing: -0.01em;
  display: inline-block;
}

:where(html[data-page="digital-marketing"]) .doodle-sunburst-small {
  margin-right: 28px;
  margin-bottom: -2px;
}

:where(html[data-page="digital-marketing"]) .doodle-growth-arrow {
  margin-right: 14px;
  margin-top: -2px;
}

/* ==========================================================================
   SERVICES SECTION RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1240px) {
  :where(html[data-page="digital-marketing"]) .services-bento-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  :where(html[data-page="digital-marketing"]) .services-bottom-doodle {
    display: none;
  }
}

@media (max-width: 991px) {
  :where(html[data-page="digital-marketing"]) .services-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  :where(html[data-page="digital-marketing"]) .services-top-doodle {
    display: none;
  }

  :where(html[data-page="digital-marketing"]) .btn-services-primary {
    width: 100%;
    justify-content: center;
  }

  :where(html[data-page="digital-marketing"]) .services-bento-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 640px) {
  :where(html[data-page="digital-marketing"]) .services-section {
    padding: 60px 0 50px;
  }

  :where(html[data-page="digital-marketing"]) .services-bento-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  :where(html[data-page="digital-marketing"]) .service-bento-card {
    padding: 22px 18px 18px;
    border-radius: 20px;
  }

  :where(html[data-page="digital-marketing"]) .services-bottom-trust {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 20px;
    gap: 12px;
    padding: 16px 18px;
    width: 100%;
  }

  :where(html[data-page="digital-marketing"]) .services-trust-sep {
    display: none;
  }
}

/* ==========================================================================
   PROOF & CLIENTS & CTA SECTION
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .proof-cta-section {
  padding: 64px 0 90px;
  background: var(--bg-white);
}

:where(html[data-page="digital-marketing"]) .proof-cta-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.15fr;
  gap: 24px;
  align-items: stretch;
}

/* Testimonial Card */
:where(html[data-page="digital-marketing"]) .proof-card-testimonials {
  background: #FAFCFE;
  border-radius: 24px;
  padding: 28px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

:where(html[data-page="digital-marketing"]) .proof-card-testimonials:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

:where(html[data-page="digital-marketing"]) .proof-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

:where(html[data-page="digital-marketing"]) .proof-card-header h4 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary-navy);
}

:where(html[data-page="digital-marketing"]) .proof-nav-btns {
  display: flex;
  gap: 6px;
}

:where(html[data-page="digital-marketing"]) .testimonial-slide-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

:where(html[data-page="digital-marketing"]) .testimonial-stars {
  color: var(--color-yellow);
  font-size: 16px;
  display: flex;
  gap: 2px;
}

:where(html[data-page="digital-marketing"]) .testimonial-quote-text {
  font-size: 0.9rem;
  color: var(--color-primary-navy);
  line-height: 1.55;
  font-style: italic;
}

:where(html[data-page="digital-marketing"]) .testimonial-author-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(20, 36, 61, 0.06);
}

:where(html[data-page="digital-marketing"]) .testimonial-author-block img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

:where(html[data-page="digital-marketing"]) .testimonial-author-info strong {
  font-size: 0.875rem;
  color: var(--color-primary-navy);
  display: block;
}

:where(html[data-page="digital-marketing"]) .testimonial-author-info span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Client Logos & Tech Stack Card */
:where(html[data-page="digital-marketing"]) .proof-card-clients {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 28px 24px;
  border: 1px solid #EAEFF4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

:where(html[data-page="digital-marketing"]) .proof-card-clients:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
}

:where(html[data-page="digital-marketing"]) .proof-clients-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

:where(html[data-page="digital-marketing"]) .proof-clients-header h4 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #102039;
  letter-spacing: -0.02em;
}

:where(html[data-page="digital-marketing"]) .proof-badge-pill {
  font-size: 0.7rem;
  font-weight: 750;
  color: #24B5A8;
  background: #E7F8F0;
  padding: 4px 10px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

:where(html[data-page="digital-marketing"]) .clients-logos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 10px;
  align-items: stretch;
}

:where(html[data-page="digital-marketing"]) .client-logo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #F8FAFC;
  border-radius: 14px;
  border: 1px solid #EEF2F6;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
  transition: all 0.22s ease;
}

:where(html[data-page="digital-marketing"]) .client-logo-item:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  box-shadow: 0 6px 18px rgba(16, 26, 43, 0.06);
  transform: translateY(-1px);
}

:where(html[data-page="digital-marketing"]) .stack-icon-chip {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

:where(html[data-page="digital-marketing"]) .icon-chip-meta { background: #EAF2FF; color: #3D85FF; }
:where(html[data-page="digital-marketing"]) .icon-chip-wa { background: #E7F8F0; color: #25D366; }
:where(html[data-page="digital-marketing"]) .icon-chip-funnel { background: #EEF2F6; color: #59708F; }
:where(html[data-page="digital-marketing"]) .icon-chip-analytics { background: #EAF2FF; color: #3D85FF; }
:where(html[data-page="digital-marketing"]) .icon-chip-scoring { background: #FFF4D5; color: #D97706; }
:where(html[data-page="digital-marketing"]) .icon-chip-speed { background: #F3E8FF; color: #8A5CF6; }

:where(html[data-page="digital-marketing"]) .stack-item-text {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
  min-width: 0;
}

:where(html[data-page="digital-marketing"]) .stack-item-text strong {
  font-size: 0.82rem;
  font-weight: 750;
  color: #102039;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(html[data-page="digital-marketing"]) .stack-item-text span {
  font-size: 0.68rem;
  color: #64748B;
  font-weight: 500;
}

:where(html[data-page="digital-marketing"]) .proof-clients-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #526884;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #EEF2F6;
  font-weight: 500;
}

/* Ready CTA Card */
:where(html[data-page="digital-marketing"]) .proof-card-cta {
  background: radial-gradient(135% 120% at 50% 0%, #1c3358 0%, #0c1728 100%);
  color: var(--bg-white);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(12, 23, 40, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

:where(html[data-page="digital-marketing"]) .proof-card-cta h4 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
}

:where(html[data-page="digital-marketing"]) .proof-card-cta h4 span {
  color: var(--color-yellow);
}

:where(html[data-page="digital-marketing"]) .proof-card-cta p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 10px 0 24px;
  line-height: 1.5;
}

/* Responsive Proof CTA Section */
@media (max-width: 1024px) {
  :where(html[data-page="digital-marketing"]) .proof-cta-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  :where(html[data-page="digital-marketing"]) .proof-cta-section {
    padding: 48px 0 64px;
  }

  :where(html[data-page="digital-marketing"]) .proof-card-testimonials,:where(html[data-page="digital-marketing"]) 
  .proof-card-clients,:where(html[data-page="digital-marketing"]) 
  .proof-card-cta {
    padding: 22px 18px;
    border-radius: 20px;
  }

  :where(html[data-page="digital-marketing"]) .clients-logos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 10px;
  }

  :where(html[data-page="digital-marketing"]) .client-logo-item {
    font-size: 0.84rem;
    padding: 8px 6px;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :where(html[data-page="digital-marketing"]) .client-logo-item i {
    font-size: 18px !important;
    margin-right: 2px !important;
    flex-shrink: 0;
  }

  :where(html[data-page="digital-marketing"]) .proof-card-cta h4 {
    font-size: 1.45rem;
  }

  :where(html[data-page="digital-marketing"]) .proof-card-cta p {
    margin: 8px 0 18px;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
:where(html[data-page="digital-marketing"]) .site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: 64px 0 32px;
  position: relative;
}

:where(html[data-page="digital-marketing"]) .footer-top-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

:where(html[data-page="digital-marketing"]) .footer-brand .brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: var(--bg-white);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.2rem;
}

:where(html[data-page="digital-marketing"]) .footer-brand .brand-logo .dot {
  color: #2FB7A7;
}

:where(html[data-page="digital-marketing"]) .footer-brand p {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  max-width: 280px;
}

:where(html[data-page="digital-marketing"]) .footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--bg-white);
  margin-bottom: 16px;
}

:where(html[data-page="digital-marketing"]) .footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

:where(html[data-page="digital-marketing"]) .footer-links a {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.65);
  transition: all 0.2s ease;
}

:where(html[data-page="digital-marketing"]) .footer-links a:hover {
  color: var(--color-yellow);
  padding-left: 4px;
}

:where(html[data-page="digital-marketing"]) .footer-social-links {
  display: flex;
  gap: 10px;
}

:where(html[data-page="digital-marketing"]) .social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-white);
  font-size: 17px;
  transition: var(--transition);
}

:where(html[data-page="digital-marketing"]) .social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

:where(html[data-page="digital-marketing"]) .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.775rem;
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 1024px) {
  :where(html[data-page="digital-marketing"]) .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  :where(html[data-page="digital-marketing"]) .footer-brand {
    grid-column: 1 / -1;
    max-width: 480px;
  }

  :where(html[data-page="digital-marketing"]) .footer-brand p {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  :where(html[data-page="digital-marketing"]) .site-footer {
    padding: 44px 0 24px;
  }

  :where(html[data-page="digital-marketing"]) .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 20px;
    padding-bottom: 28px;
  }

  :where(html[data-page="digital-marketing"]) .footer-brand {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }

  :where(html[data-page="digital-marketing"]) .footer-col-company {
    grid-column: 1 / 2;
  }

  :where(html[data-page="digital-marketing"]) .footer-col-solutions {
    grid-column: 2 / 3;
  }

  :where(html[data-page="digital-marketing"]) .footer-col-resources {
    grid-column: 1 / -1;
    margin-top: 4px;
  }

  :where(html[data-page="digital-marketing"]) .footer-col-follow {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  :where(html[data-page="digital-marketing"]) .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    justify-content: center;
    font-size: 0.725rem;
  }
}

/* Floating WhatsApp Button */
:where(html[data-page="digital-marketing"]) .floating-whatsapp-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: #25D366;
  color: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: var(--shadow-green);
  z-index: 990;
  transition: var(--transition);
}

:where(html[data-page="digital-marketing"]) .floating-whatsapp-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
}

/* ==========================================================================
   RESPONSIVE DESIGN (LAPTOP, TABLET & MOBILE)
   ========================================================================== */
@media (max-width: 1380px) {
  :where(html[data-page="digital-marketing"]) .hero-grid {
    grid-template-columns: 52% 48%;
    gap: 24px;
  }

  :where(html[data-page="digital-marketing"]) .hero-stats-strip {
    gap: 14px;
  }

  :where(html[data-page="digital-marketing"]) .stat-item {
    gap: 8px;
  }

  :where(html[data-page="digital-marketing"]) .stat-icon-wrap {
    width: 36px;
    height: 36px;
  }

  :where(html[data-page="digital-marketing"]) .stat-num {
    font-size: 1.2rem;
  }

  :where(html[data-page="digital-marketing"]) .stat-label {
    font-size: 0.68rem;
  }

  :where(html[data-page="digital-marketing"]) .avatar-stack img {
    width: 30px;
    height: 30px;
    margin-left: -8px;
  }

  :where(html[data-page="digital-marketing"]) .avatar-count-badge {
    width: 26px;
    height: 26px;
    font-size: 10px;
  }

  :where(html[data-page="digital-marketing"]) .proof-caption {
    font-size: 0.72rem;
    max-width: 140px;
  }

  :where(html[data-page="digital-marketing"]) .floating-testimonial-dark {
    left: -16px;
    max-width: 290px;
    padding: 14px 16px;
  }
}

@media (max-width: 1200px) {
  :where(html[data-page="digital-marketing"]) .hero-stats-strip {
    flex-wrap: wrap;
    gap: 16px 20px;
  }

  :where(html[data-page="digital-marketing"]) .hero-proof-cluster {
    width: 100%;
    margin-left: 0;
    padding-top: 8px;
    border-top: 1px solid #E2E8F0;
  }

  :where(html[data-page="digital-marketing"]) .proof-caption {
    max-width: none;
  }

  :where(html[data-page="digital-marketing"]) .floating-testimonial-dark {
    left: 0;
  }
}

@media (max-width: 1024px) {
  :where(html[data-page="digital-marketing"]) .hero-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  :where(html[data-page="digital-marketing"]) .hero-left {
    max-width: 650px;
    margin: 0 auto;
    text-align: left;
  }

  :where(html[data-page="digital-marketing"]) .hero-right {
    max-width: 480px;
    margin: 0 auto;
    min-height: 520px;
  }

  :where(html[data-page="digital-marketing"]) .growth-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  :where(html[data-page="digital-marketing"]) .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  :where(html[data-page="digital-marketing"]) .booking-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  :where(html[data-page="digital-marketing"]) .proof-cta-grid {
    grid-template-columns: 1fr;
  }

  :where(html[data-page="digital-marketing"]) .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root:where([data-page="digital-marketing"]) {
    --header-height: 64px;
  }

  /* Navigation: Hide all desktop items on mobile */
  :where(html[data-page="digital-marketing"]) .nav-menu-wrapper,:where(html[data-page="digital-marketing"]) 
  .nav-menu,:where(html[data-page="digital-marketing"])  
  .btn-desktop-only,:where(html[data-page="digital-marketing"]) 
  .nav-actions .btn-phone,:where(html[data-page="digital-marketing"]) 
  .nav-actions .btn-phone-pill,:where(html[data-page="digital-marketing"]) 
  .nav-actions .btn-yellow {
    display: none !important;
  }

  :where(html[data-page="digital-marketing"]) .site-header {
    height: 64px;
    padding: 0;
  }

  :where(html[data-page="digital-marketing"]) .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
  }

  :where(html[data-page="digital-marketing"]) .nav-actions {
    display: flex;
    align-items: center;
    gap: 0;
  }

  :where(html[data-page="digital-marketing"]) .hamburger-btn {
    display: flex !important;
  }

  /* Hero Section */
  :where(html[data-page="digital-marketing"]) .hero-section {
    padding: 28px 0 48px;
  }

  :where(html[data-page="digital-marketing"]) .hero-annotation,:where(html[data-page="digital-marketing"]) 
  .hero-anno-middle {
    display: none !important;
  }

  :where(html[data-page="digital-marketing"]) .hero-badge {
    font-size: 0.7rem;
    padding: 5px 12px;
    margin-bottom: 16px;
  }

  :where(html[data-page="digital-marketing"]) .hero-title {
    font-size: 2.45rem;
    line-height: 1.1;
    margin-bottom: 16px;
    letter-spacing: -0.03em;
  }

  :where(html[data-page="digital-marketing"]) .gold-sparkle-burst {
    top: -8px;
    right: -16px;
    transform: scale(0.85) rotate(6deg);
  }

  :where(html[data-page="digital-marketing"]) .brush-stroke-svg {
    height: 7px;
    left: -1%;
    width: 102%;
    bottom: -6px;
  }

  :where(html[data-page="digital-marketing"]) .hero-subtitle {
    font-size: 0.95rem;
    line-height: 1.58;
    margin-bottom: 24px;
  }

  :where(html[data-page="digital-marketing"]) .hero-ctas-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 24px;
    width: 100%;
  }

  :where(html[data-page="digital-marketing"]) .hero-ctas {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  :where(html[data-page="digital-marketing"]) .btn-hero-cta,:where(html[data-page="digital-marketing"]) 
  .btn-watch-video {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    padding: 10px 18px;
    font-size: 0.91rem;
    box-sizing: border-box;
  }

  /* Social Proof & Metrics Area */
  :where(html[data-page="digital-marketing"]) .hero-metrics-container {
    width: 100%;
    max-width: 100%;
    gap: 14px;
    margin-bottom: 20px;
  }

  :where(html[data-page="digital-marketing"]) .hero-stats-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 12px 14px;
    background: #FFFFFF;
    border-radius: 18px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 4px 16px rgba(16, 32, 57, 0.04);
  }

  :where(html[data-page="digital-marketing"]) .stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  :where(html[data-page="digital-marketing"]) .stat-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  :where(html[data-page="digital-marketing"]) .stat-icon-wrap svg {
    width: 16px;
    height: 16px;
  }

  :where(html[data-page="digital-marketing"]) .stat-info {
    display: flex;
    flex-direction: column;
  }

  :where(html[data-page="digital-marketing"]) .stat-divider {
    display: block;
    width: 1px;
    height: 24px;
    background: #E8EEF5;
  }

  :where(html[data-page="digital-marketing"]) .stat-num {
    font-size: 1.05rem;
  }

  :where(html[data-page="digital-marketing"]) .stat-label {
    font-size: 0.6rem;
    line-height: 1.2;
    white-space: normal;
  }

  :where(html[data-page="digital-marketing"]) .hero-trust-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 2px;
  }

  :where(html[data-page="digital-marketing"]) .avatar-stack {
    flex-shrink: 0;
  }

  :where(html[data-page="digital-marketing"]) .avatar-stack img {
    width: 28px;
    height: 28px;
  }

  :where(html[data-page="digital-marketing"]) .avatar-count-badge {
    width: 24px;
    height: 24px;
    font-size: 9.5px;
  }

  :where(html[data-page="digital-marketing"]) .trust-bar-text {
    font-size: 0.75rem;
    line-height: 1.35;
  }

  /* Featured Bar */
  :where(html[data-page="digital-marketing"]) .featured-on-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
  }

  :where(html[data-page="digital-marketing"]) .featured-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
  }

  /* Hero Right Visual Collage — Seamless Mobile Composition */
  :where(html[data-page="digital-marketing"]) .hero-right {
    width: 100%;
    max-width: 380px;
    margin: 24px auto 0;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 10px 4px 0;
    box-sizing: border-box;
  }

  :where(html[data-page="digital-marketing"]) .hero-visual-backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 520px;
    background: #F0AA1B;
    border-radius: 32px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    box-shadow: 0 16px 36px rgba(240, 170, 27, 0.2);
  }

  :where(html[data-page="digital-marketing"]) .hero-image-wrapper {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 330px;
    height: 380px;
    border-radius: 28px;
    margin: 16px auto 0;
    border: 3px solid #FFFFFF;
    box-shadow: 0 18px 40px rgba(16, 26, 43, 0.12);
  }

  :where(html[data-page="digital-marketing"]) .floating-badge-top {
    top: 4px;
    left: 4px;
    padding: 8px 12px;
    gap: 8px;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(16, 26, 43, 0.12);
    z-index: 6;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge-growth {
    top: 40px;
    right: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    min-width: 105px;
    box-shadow: 0 10px 24px rgba(16, 26, 43, 0.12);
    z-index: 6;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge-lead {
    display: none;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge .icon-box {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge .badge-text strong {
    font-size: 0.82rem;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge .badge-text span {
    font-size: 0.65rem;
  }

  :where(html[data-page="digital-marketing"]) .badge-arrow-pill {
    width: 22px;
    height: 22px;
  }

  :where(html[data-page="digital-marketing"]) .growth-keywords span {
    font-size: 0.72rem;
  }

  :where(html[data-page="digital-marketing"]) .floating-testimonial-dark {
    position: relative;
    bottom: auto;
    left: auto;
    margin: 14px auto 0;
    width: 100%;
    max-width: 380px;
    border-radius: 20px;
    padding: 16px 18px;
    box-sizing: border-box;
    z-index: 4;
    box-shadow: 0 16px 36px rgba(16, 26, 43, 0.22);
  }

  /* Capability Bar Responsive — Fully Visible Multi-Column Card Grid */
  :where(html[data-page="digital-marketing"]) .hero-capability-bar-wrapper {
    margin-top: 28px;
    width: 100%;
  }

  :where(html[data-page="digital-marketing"]) .hero-capability-bar {
    width: 100%;
    max-width: 100%;
    padding: 16px 14px;
    background: #FFFFFF;
    border: 1px solid #E5E8ED;
    border-radius: 20px;
    box-shadow: 0 6px 24px rgba(16, 26, 43, 0.05);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    overflow: visible;
  }

  :where(html[data-page="digital-marketing"]) .cap-strip-label {
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    color: #8B9AB0;
    text-align: center;
    padding: 0 0 8px 0;
    border-right: none;
    border-bottom: 1px solid #EEF2F6;
    margin: 0;
  }

  :where(html[data-page="digital-marketing"]) .cap-strip-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 12px;
    padding: 0;
  }

  :where(html[data-page="digital-marketing"]) .cap-strip-items .cap-item:last-child {
    grid-column: 1 / -1;
    justify-content: center;
  }

  :where(html[data-page="digital-marketing"]) .cap-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #F8FAFC;
    border-radius: 12px;
    border: 1px solid #EEF2F6;
  }

  :where(html[data-page="digital-marketing"]) .cap-icon-box {
    width: 28px;
    height: 28px;
    font-size: 14px;
    flex-shrink: 0;
  }

  :where(html[data-page="digital-marketing"]) .cap-text strong {
    font-size: 0.76rem;
    color: #102039;
    line-height: 1.15;
  }

  :where(html[data-page="digital-marketing"]) .cap-text span {
    font-size: 0.62rem;
    color: #59708F;
  }

  :where(html[data-page="digital-marketing"]) .cap-sep {
    display: none;
  }

  :where(html[data-page="digital-marketing"]) .hero-anno-bottom {
    display: none !important;
  }

  /* Other Sections */
  :where(html[data-page="digital-marketing"]) .services-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
  }

  :where(html[data-page="digital-marketing"]) .growth-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  :where(html[data-page="digital-marketing"]) .growth-cards-grid {
    grid-template-columns: 1fr;
  }

  /* Industry Showcase Tabs Responsive — All Visible Pill Grid */
  :where(html[data-page="digital-marketing"]) .industry-tabs-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: 20px;
    background: #FFFFFF;
    overflow: visible;
  }

  :where(html[data-page="digital-marketing"]) .industry-tab-btn {
    padding: 7px 12px;
    font-size: 0.78rem;
    gap: 5px;
    border-radius: 9999px;
    background: #F4F7FA;
  }

  :where(html[data-page="digital-marketing"]) .industry-tab-btn svg {
    width: 13px;
    height: 13px;
  }

  :where(html[data-page="digital-marketing"]) .industry-tab-btn.active {
    background: #14243D;
    color: #FFFFFF;
  }

  :where(html[data-page="digital-marketing"]) .industry-showcase-card {
    grid-template-columns: 1fr;
  }

  :where(html[data-page="digital-marketing"]) .industry-image-pane {
    min-height: 340px;
  }

  :where(html[data-page="digital-marketing"]) .industry-quote-badge {
    bottom: 14px;
    left: 14px;
    right: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    gap: 10px;
  }

  :where(html[data-page="digital-marketing"]) .quote-icon-bubble {
    width: 28px;
    height: 28px;
    font-size: 1.2rem;
  }

  :where(html[data-page="digital-marketing"]) .industry-quote-text {
    font-size: 0.76rem;
    line-height: 1.35;
  }

  :where(html[data-page="digital-marketing"]) .industry-quote-author {
    font-size: 0.68rem;
  }

  :where(html[data-page="digital-marketing"]) .quote-script-note {
    display: none;
  }

  :where(html[data-page="digital-marketing"]) .services-grid {
    grid-template-columns: 1fr;
  }

  :where(html[data-page="digital-marketing"]) .support-points-grid {
    grid-template-columns: 1fr;
  }

  :where(html[data-page="digital-marketing"]) .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 24px;
  }
}

@media (max-width: 480px) {
  :where(html[data-page="digital-marketing"]) .industry-image-pane {
    min-height: 300px;
  }

  :where(html[data-page="digital-marketing"]) .industry-quote-badge {
    bottom: 10px;
    left: 10px;
    right: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    gap: 8px;
  }

  :where(html[data-page="digital-marketing"]) .quote-icon-bubble {
    width: 24px;
    height: 24px;
    font-size: 1.05rem;
  }

  :where(html[data-page="digital-marketing"]) .industry-quote-text {
    font-size: 0.7rem;
    line-height: 1.3;
  }

  :where(html[data-page="digital-marketing"]) .industry-quote-author {
    font-size: 0.62rem;
  }
  :where(html[data-page="digital-marketing"]) .industry-tabs-bar {
    gap: 5px;
    padding: 8px 6px;
    border-radius: 16px;
  }

  :where(html[data-page="digital-marketing"]) .industry-tab-btn {
    padding: 6px 10px;
    font-size: 0.72rem;
    gap: 4px;
  }

  :where(html[data-page="digital-marketing"]) .industry-tab-btn svg {
    width: 12px;
    height: 12px;
  }
  :where(html[data-page="digital-marketing"]) .hero-title {
    font-size: 2.05rem;
    line-height: 1.14;
  }

  :where(html[data-page="digital-marketing"]) .hero-image-wrapper {
    max-width: 300px;
    height: 330px;
    border-radius: 26px;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge {
    padding: 6px 10px;
    gap: 7px;
    border-radius: 12px;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge .icon-box {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge .badge-text strong {
    font-size: 0.72rem;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge .badge-text span {
    font-size: 0.6rem;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge-top {
    left: -2px;
    top: 6px;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge-growth {
    top: 35px;
    right: -2px;
    padding: 8px 10px;
    min-width: 105px;
  }

  :where(html[data-page="digital-marketing"]) .growth-keywords span {
    font-size: 0.68rem;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge-lead {
    right: -2px;
    bottom: 25px;
  }

  :where(html[data-page="digital-marketing"]) .hero-capability-bar {
    padding: 14px 10px;
    gap: 10px;
    border-radius: 18px;
  }

  :where(html[data-page="digital-marketing"]) .cap-strip-items {
    gap: 8px 8px;
  }

  :where(html[data-page="digital-marketing"]) .cap-item {
    padding: 5px 6px;
    gap: 6px;
  }

  :where(html[data-page="digital-marketing"]) .cap-icon-box {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  :where(html[data-page="digital-marketing"]) .cap-text strong {
    font-size: 0.72rem;
  }

  :where(html[data-page="digital-marketing"]) .cap-text span {
    font-size: 0.58rem;
  }
}

@media (max-width: 360px) {
  :where(html[data-page="digital-marketing"]) .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  :root:where([data-page="digital-marketing"]) {
    --header-height: 58px;
  }

  :where(html[data-page="digital-marketing"]) .hero-section {
    padding: 20px 0 36px;
  }

  :where(html[data-page="digital-marketing"]) .hero-badge {
    font-size: 0.65rem;
    padding: 4px 10px;
    margin-bottom: 12px;
  }

  :where(html[data-page="digital-marketing"]) .hero-title {
    font-size: 1.75rem;
    line-height: 1.15;
    margin-bottom: 12px;
  }

  :where(html[data-page="digital-marketing"]) .brush-stroke-svg {
    height: 16px;
  }

  :where(html[data-page="digital-marketing"]) .hero-subtitle {
    font-size: 0.875rem;
    line-height: 1.48;
    margin-bottom: 18px;
  }

  :where(html[data-page="digital-marketing"]) .hero-ctas-wrap {
    gap: 12px;
    margin-bottom: 22px;
  }

  :where(html[data-page="digital-marketing"]) .hero-ctas {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  :where(html[data-page="digital-marketing"]) .btn-hero-cta,:where(html[data-page="digital-marketing"]) 
  .btn-watch-video {
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    font-size: 0.9375rem;
  }

  :where(html[data-page="digital-marketing"]) .video-play-icon {
    width: 32px;
    height: 32px;
  }

  :where(html[data-page="digital-marketing"]) .hero-stats-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 12px 8px;
  }

  :where(html[data-page="digital-marketing"]) .stat-num {
    font-size: 1.05rem;
  }

  :where(html[data-page="digital-marketing"]) .stat-label {
    font-size: 0.58rem;
    line-height: 1.2;
  }

  :where(html[data-page="digital-marketing"]) .hero-image-wrapper {
    max-width: 255px;
    height: 280px;
    border-radius: 22px;
  }

  :where(html[data-page="digital-marketing"]) .hero-visual-backdrop {
    border-radius: 28px;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge {
    padding: 6px 10px;
    gap: 6px;
    border-radius: 12px;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge .icon-box {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge .icon-box svg {
    width: 15px;
    height: 15px;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge .badge-text strong {
    font-size: 0.74rem;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge .badge-text span {
    font-size: 0.6rem;
  }

  :where(html[data-page="digital-marketing"]) .badge-arrow-pill {
    width: 19px;
    height: 19px;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge-top {
    left: 2px;
    top: 4px;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge-growth {
    right: 2px;
    top: 36px;
    padding: 8px 10px;
    min-width: 95px;
  }

  :where(html[data-page="digital-marketing"]) .growth-keywords span {
    font-size: 0.65rem;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge-lead {
    display: none;
  }

  :where(html[data-page="digital-marketing"]) .floating-testimonial-dark {
    padding: 12px 14px;
    border-radius: 16px;
    margin-top: 14px;
  }

  :where(html[data-page="digital-marketing"]) .testimonial-dark-avatars img {
    width: 24px;
    height: 24px;
  }

  :where(html[data-page="digital-marketing"]) .gold-stars {
    font-size: 9px;
  }

  :where(html[data-page="digital-marketing"]) .testimonial-dark-quote {
    font-size: 0.72rem;
    line-height: 1.4;
  }

  :where(html[data-page="digital-marketing"]) .testimonial-dark-author {
    font-size: 0.65rem;
  }
}

/* Ultra-Narrow Mobile Breakpoint (310px - 320px) */
@media (max-width: 320px) {
  :where(html[data-page="digital-marketing"]) .container {
    padding-left: 8px;
    padding-right: 8px;
  }

  :where(html[data-page="digital-marketing"]) .hero-title {
    font-size: 1.5rem;
    line-height: 1.15;
  }

  :where(html[data-page="digital-marketing"]) .hero-image-wrapper {
    max-width: 230px;
    height: 250px;
    border-radius: 18px;
    border-width: 2px;
  }

  :where(html[data-page="digital-marketing"]) .hero-visual-backdrop {
    border-radius: 20px 50px 18px 50px;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge {
    padding: 3px 6px;
    gap: 4px;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge .icon-box {
    width: 22px;
    height: 22px;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge .badge-text strong {
    font-size: 0.62rem;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge .badge-text span {
    font-size: 0.5rem;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge-top {
    top: 2px;
    left: 0;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge-growth {
    top: 18px;
    right: 0;
    padding: 4px 6px;
    min-width: 80px;
  }

  :where(html[data-page="digital-marketing"]) .growth-keywords span {
    font-size: 0.52rem;
  }

  :where(html[data-page="digital-marketing"]) .floating-badge-lead {
    bottom: 10px;
    right: 0;
  }

  :where(html[data-page="digital-marketing"]) .hero-shoulder-doodle {
    display: none;
  }

  :where(html[data-page="digital-marketing"]) .btn-hero-cta,:where(html[data-page="digital-marketing"]) 
  .btn-watch-video {
    padding: 9px 12px;
    font-size: 0.8125rem;
  }

  :where(html[data-page="digital-marketing"]) .hero-stats-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 10px 6px;
    border-radius: 14px;
  }

  :where(html[data-page="digital-marketing"]) .stat-num {
    font-size: 0.92rem;
  }

  :where(html[data-page="digital-marketing"]) .stat-label {
    font-size: 0.52rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  :where(html[data-page="digital-marketing"]) .hero-proof-cluster {
    gap: 6px;
    padding-top: 8px;
    margin-top: 4px;
  }

  :where(html[data-page="digital-marketing"]) .avatar-stack img {
    width: 24px;
    height: 24px;
    margin-left: -6px;
  }

  :where(html[data-page="digital-marketing"]) .proof-caption {
    font-size: 0.62rem;
    line-height: 1.2;
  }

  :where(html[data-page="digital-marketing"]) .featured-logos {
    gap: 6px 10px;
  }

  :where(html[data-page="digital-marketing"]) .logo-item {
    font-size: 0.72rem;
  }

  :where(html[data-page="digital-marketing"]) .rel-stats-panel {
    gap: 4px;
    padding: 12px 8px;
  }

  :where(html[data-page="digital-marketing"]) .rel-stat-icon-wrap {
    width: 30px;
    height: 30px;
  }

  :where(html[data-page="digital-marketing"]) .rel-stat-icon-wrap svg {
    width: 14px;
    height: 14px;
  }

  :where(html[data-page="digital-marketing"]) .rel-stat-number {
    font-size: 0.95rem;
  }

  :where(html[data-page="digital-marketing"]) .rel-stat-label {
    font-size: 0.52rem;
  }

  :where(html[data-page="digital-marketing"]) .rel-stat-sep {
    height: 28px;
  }

  :where(html[data-page="digital-marketing"]) .floating-whatsapp-btn {
    width: 42px;
    height: 42px;
    font-size: 22px;
    bottom: 12px;
    right: 12px;
  }
}


/* digital-marketing.html embedded 1 */

/* About Us: approved Kaxon concept. All layout rules are page-scoped. */
@font-face{font-family:Kaxon Outfit;src:url("assets/fonts/kaxon-outfit-700.ttf") format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Kaxon Jakarta;src:url("assets/fonts/kaxon-jakarta-400.ttf") format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Kaxon Jakarta;src:url("assets/fonts/kaxon-jakarta-600.ttf") format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Kaxon Caveat;src:url("assets/fonts/kaxon-caveat-700.ttf") format('truetype');font-weight:700;font-style:normal;font-display:swap}
:where(html[data-page="digital-marketing"]) .kaxon-about{--font-heading:'Kaxon Outfit',Outfit,sans-serif;--font-body:'Kaxon Jakarta','Plus Jakarta Sans',sans-serif;--font-handwriting:'Kaxon Caveat',Caveat,cursive;--ka-cream:#FBF7EF;font-family:var(--font-body);font-size:16px;line-height:1.65;color:var(--color-primary-navy)}
:where(html[data-page="digital-marketing"]) .kaxon-about .container{max-width:1240px;padding-inline:24px}
:where(html[data-page="digital-marketing"]) .kaxon-about h1,:where(html[data-page="digital-marketing"]) .kaxon-about h2,:where(html[data-page="digital-marketing"]) .kaxon-about h3{font-family:var(--font-heading);font-weight:700;color:var(--color-primary-navy)}
:where(html[data-page="digital-marketing"]) .kaxon-about h2{font-size:clamp(2rem,3.1vw,3rem);line-height:1.12;letter-spacing:-.035em;text-wrap:balance}
:where(html[data-page="digital-marketing"]) .kaxon-about h3{font-size:clamp(1.125rem,1.6vw,1.35rem);line-height:1.25;letter-spacing:-.02em}
:where(html[data-page="digital-marketing"]) .kaxon-about :where(a,button):focus-visible{outline:3px solid #2E82FE;outline-offset:5px}
:where(html[data-page="digital-marketing"]) .kaxon-about #main-content:focus{outline:none}
:where(html[data-page="digital-marketing"]) .kaxon-about :where(section,main)[id]{scroll-margin-top:32px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-skip{position:fixed;top:8px;left:16px;z-index:2000;padding:12px 20px;background:var(--color-primary-navy);color:white;border-radius:14px;transform:translateY(-160%)}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-skip:focus{transform:translateY(0)}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-header{background:#fffdf9;position:relative;z-index:20}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-header-inner{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-brand{display:inline-flex;flex-shrink:0;font-family:var(--font-heading);font-weight:700;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.045em;line-height:1.2;min-height:44px;align-items:center}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-brand-accent{color:var(--color-teal);margin-left:4px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-navigation ul{list-style:none;display:flex;gap:23px;align-items:center}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-navigation a{display:flex;align-items:center;min-height:48px;font-size:.8125rem;color:var(--text-secondary);position:relative;white-space:nowrap}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-navigation a[aria-current]{font-weight:600;color:var(--color-primary-navy)}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-navigation a[aria-current]::after{content:'';position:absolute;bottom:2px;left:0;right:0;height:3px;background:var(--color-yellow);border-radius:3px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-navigation a:hover{color:var(--color-primary-navy)}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-button{min-height:48px;padding:13px 25px;gap:12px;font-size:.875rem;font-weight:600;line-height:1.4;white-space:normal;text-align:center}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-button .ka-icon{width:18px;height:18px;flex:none}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-button.btn-outline{border-color:var(--color-primary-navy);background:transparent;box-shadow:none}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-header-action .ka-button{min-height:44px;padding:11px 20px;font-size:.75rem;white-space:nowrap;box-shadow:none}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-menu-toggle{display:none;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid var(--border-color);border-radius:12px;color:var(--color-primary-navy)}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-menu-toggle[hidden]{display:none}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-menu-label{font-size:.75rem;font-weight:600}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-hero{padding:70px 0 76px;background-color:var(--ka-cream);background-image:radial-gradient(#CBD5E177 .8px,transparent .8px);background-size:24px 24px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-hero-grid{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,1fr);align-items:center;gap:64px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-eyebrow{font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--color-primary-navy);margin-bottom:20px}
:where(html[data-page="digital-marketing"]) .kaxon-about h1{font-size:clamp(2.5rem,4.4vw,4.25rem);line-height:1.06;letter-spacing:-.045em;text-wrap:balance;margin:0 0 28px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-highlight{position:relative;isolation:isolate;display:inline-block}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-highlight::before{content:'';position:absolute;z-index:-1;inset:14% -2% 1%;border-radius:8px 13px 8px 5px;background:var(--color-yellow);transform:rotate(-1.3deg)}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-highlight::after{content:'';position:absolute;bottom:-7px;left:4%;width:96%;height:5px;background:var(--color-yellow);border-radius:60%;transform:rotate(-1deg)}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-lead{font-size:clamp(1rem,1.4vw,1.1875rem);color:var(--text-secondary);line-height:1.6;max-width:540px;margin-bottom:34px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-actions{display:flex;flex-wrap:wrap;gap:14px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-hero-figure{position:relative;margin:12px 16px 12px 0;min-width:0;isolation:isolate}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-hero-figure::before{content:'';position:absolute;inset:-12px -17px -12px 24px;background:var(--color-yellow);border-radius:28px;transform:rotate(3deg);z-index:-1}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-photo-frame{border:6px solid white;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);transform:rotate(2deg);background:white}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-photo-frame img{display:block;width:100%;aspect-ratio:1.13;object-fit:cover;object-position:50% 50%}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-photo-caption{position:absolute;right:16px;bottom:22px;max-width:calc(100% - 32px);font-size:.6875rem;font-weight:600;line-height:1.5;padding:12px 16px;border-radius:12px;background:white;box-shadow:var(--shadow-sm);text-align:center}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-photo-note{position:absolute;right:-12px;top:-49px;font-family:var(--font-handwriting);font-size:1.5rem;font-weight:700;line-height:.95;text-align:center;transform:rotate(-7deg);pointer-events:none}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-photo-note svg{display:block;width:39px;height:58px;margin-left:auto;margin-top:4px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-section{padding-block:clamp(48px,6vw,82px)}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-purpose-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center;gap:80px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-section-copy{margin-top:24px;color:var(--text-secondary);font-size:1rem;max-width:660px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-purpose-list{list-style:none;display:grid;gap:28px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-purpose-list li{display:grid;grid-template-columns:60px minmax(0,1fr);gap:22px;align-items:start}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-purpose-list h3{font-size:1.1875rem;margin-bottom:5px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-purpose-list p{font-size:.875rem;line-height:1.5;color:var(--text-secondary)}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-icon-chip{display:inline-flex;width:60px;height:60px;border-radius:50%;align-items:center;justify-content:center;flex:none;color:var(--color-primary-navy)}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-icon-chip .ka-icon{width:29px;height:29px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-blue{background:#DBEEFF}:where(html[data-page="digital-marketing"]) .kaxon-about .ka-yellow{background:#FFF0C0}:where(html[data-page="digital-marketing"]) .kaxon-about .ka-mint{background:#D5F7E5}:where(html[data-page="digital-marketing"]) .kaxon-about .ka-lavender{background:#E9DEFF}:where(html[data-page="digital-marketing"]) .kaxon-about .ka-pink{background:#FFE0E3}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-principles{background:var(--ka-cream)}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-principle-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:30px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-card{padding:24px 22px 26px;border-radius:var(--radius-lg);background:white;box-shadow:var(--shadow-card);border:1px solid rgba(20,36,61,.025);transition:transform .25s ease,box-shadow .25s ease;min-width:0}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-card h3{margin-top:19px;margin-bottom:10px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-card p,:where(html[data-page="digital-marketing"]) .kaxon-about .ka-step p{font-size:.875rem;line-height:1.55;color:var(--text-secondary)}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-process{background:#FFFDFA;padding-bottom:32px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-process-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:36px;position:relative}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-underline{position:relative;display:inline-block}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-underline::after{content:'';position:absolute;bottom:-7px;left:0;width:100%;height:5px;background:var(--color-yellow);border-radius:50%;transform:rotate(1deg)}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-process-note{font:700 1.5rem/.95 var(--font-handwriting);transform:rotate(-8deg);text-align:center;pointer-events:none;margin-right:30px;margin-top:0;position:relative}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-process-note svg{position:absolute;width:34px;height:52px;right:-27px;top:27px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;gap:28px;counter-reset:ka-step}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-step{background:white;border-radius:22px;padding:24px 19px;box-shadow:var(--shadow-card);position:relative;min-width:0}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-step-title{display:flex;gap:12px;align-items:center;margin-bottom:14px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-step-title h3{font-size:1.0625rem}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-step-number{font:700 1.375rem/1 var(--font-heading);display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-step-arrow{position:absolute;width:30px;height:24px;left:calc(100% - 1px);top:45%;z-index:1;color:var(--color-primary-navy);overflow:visible}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-cta-section{padding:0 0 20px;background:#FFFDFA}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-cta{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:38px 40px;border-radius:24px;background:linear-gradient(115deg,#14243D,#1C3350);box-shadow:var(--shadow-md);color:white}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-cta h2{font-size:clamp(1.75rem,2.6vw,2.375rem);color:white;letter-spacing:-.035em}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-cta p{margin-top:10px;color:#DAE1EB;font-size:.9375rem}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-cta .ka-button{flex:none;box-shadow:none}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-footer{background:var(--color-primary-navy);color:#D7DEEA;padding:40px 0 24px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;padding-bottom:28px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-footer .ka-brand{color:white;font-size:1.65rem}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-footer-brand p{margin-top:8px;font-size:.875rem}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-footer h2{font-family:var(--font-body);font-size:.6875rem;line-height:1.5;font-weight:600;color:white;text-transform:uppercase;letter-spacing:.16em;margin-bottom:12px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-footer ul{list-style:none}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-footer li{font-size:.8125rem;line-height:1.65;margin-top:4px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-footer li a{display:inline-flex;align-items:center;min-height:32px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-footer a:hover{color:white;text-decoration:underline;text-underline-offset:4px}
:where(html[data-page="digital-marketing"]) .kaxon-about .ka-footer-bottom{border-top:1px solid #FFFFFF26;padding-top:18px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.6875rem;color:#B9C5D6}
@media(hover:hover) and (prefers-reduced-motion:no-preference){:where(html[data-page="digital-marketing"]) .kaxon-about .ka-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}}
@media(max-width:1150px){:where(html[data-page="digital-marketing"]) .kaxon-about .ka-header-inner{gap:18px}:where(html[data-page="digital-marketing"]) .kaxon-about .ka-navigation ul{gap:16px}:where(html[data-page="digital-marketing"]) .kaxon-about .ka-hero-grid{gap:42px}:where(html[data-page="digital-marketing"]) .kaxon-about .ka-purpose-grid{gap:48px}:where(html[data-page="digital-marketing"]) .kaxon-about .ka-card{padding:22px 18px}:where(html[data-page="digital-marketing"]) .kaxon-about .ka-step-title{gap:9px}}
@media(max-width:1100px){:where(html[data-page="digital-marketing"]) .kaxon-about .ka-photo-note,:where(html[data-page="digital-marketing"]) .kaxon-about .ka-process-note{display:none}}
@media(max-width:1023px){
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-header-inner{flex-wrap:wrap;min-height:72px;padding-block:14px;gap:0 20px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-header-action{display:none}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-menu-toggle:not([hidden]){display:flex;margin-left:auto}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-navigation{flex-basis:100%;margin-top:16px;border-top:1px solid var(--border-color);padding-top:12px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-navigation ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 20px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-navigation a{white-space:normal}
 :where(html[data-page="digital-marketing"]) .kaxon-about.ka-js .ka-navigation:not(.is-open){display:none}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-hero{padding-block:48px 56px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-hero-grid{grid-template-columns:1fr;gap:52px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-hero-copy{max-width:710px}
 :where(html[data-page="digital-marketing"]) .kaxon-about h1{font-size:clamp(2.75rem,6.7vw,4.1rem)}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-hero-figure{width:calc(100% - 20px);max-width:620px;margin:0 auto}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-photo-frame img{aspect-ratio:1.5}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-principle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-footer-grid{grid-template-columns:1.5fr 1fr 1fr;gap:30px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-footer-brand{grid-column:1 / -1}
}
@media(max-width:900px){
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-purpose-grid{grid-template-columns:1fr;gap:36px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-purpose-list{max-width:600px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-process-grid{grid-template-columns:1fr;gap:28px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-step{padding:22px 24px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-step-arrow{width:30px;height:24px;top:calc(100% + 2px);left:32px;transform:rotate(90deg)}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-cta{align-items:flex-start;flex-direction:column;gap:24px}
}
@media(max-width:600px){
 :where(html[data-page="digital-marketing"]) .kaxon-about .container{padding-inline:20px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-header-inner{gap:0 12px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-brand{font-size:1.25rem}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-menu-toggle{width:44px;justify-content:center;padding:8px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-navigation ul{grid-template-columns:repeat(2,minmax(0,1fr))}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-hero{padding-block:34px 48px}
 :where(html[data-page="digital-marketing"]) .kaxon-about h1{font-size:clamp(2.35rem,9vw,3.3rem);margin-bottom:26px;letter-spacing:-.04em}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-eyebrow{font-size:.625rem;letter-spacing:.17em;margin-bottom:16px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-lead{font-size:1rem;margin-bottom:27px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-hero-grid{gap:36px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-hero-figure{max-width:480px;width:calc(100% - 14px);margin-inline:0 14px;padding-bottom:0}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-hero-figure::before{inset:0 -12px -8px 14px;border-radius:22px;transform:rotate(2deg)}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-photo-frame{border-width:4px;border-radius:22px;transform:rotate(1deg)}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-photo-frame img{aspect-ratio:1.2}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-photo-caption{position:relative;right:auto;bottom:auto;max-width:none;margin:0;padding:13px 12px;border-radius:0 0 16px 16px;font-size:.625rem;box-shadow:none;background:white}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-purpose-list li{grid-template-columns:48px minmax(0,1fr);gap:16px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-purpose-list .ka-icon-chip{width:48px;height:48px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-purpose-list .ka-icon{width:25px;height:25px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-section-copy{font-size:.9375rem}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-principle-grid{grid-template-columns:1fr;gap:16px;margin-top:26px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-card{padding:24px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-card h3{font-size:1.25rem}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-card p,:where(html[data-page="digital-marketing"]) .kaxon-about .ka-step p{font-size:.9375rem}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-step-title h3{font-size:1.125rem}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-cta{padding:28px 24px;border-radius:22px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-footer li a{min-height:44px}
 :where(html[data-page="digital-marketing"]) .kaxon-about .ka-footer .ka-brand{font-size:1.5rem}
}
@media(max-width:480px){:where(html[data-page="digital-marketing"]) .kaxon-about .ka-actions{flex-direction:column;gap:12px}:where(html[data-page="digital-marketing"]) .kaxon-about .ka-actions .ka-button,:where(html[data-page="digital-marketing"]) .kaxon-about .ka-cta .ka-button{width:100%}:where(html[data-page="digital-marketing"]) .kaxon-about .ka-cta-section .container{padding-inline:16px}}
@media(max-width:375px){:where(html[data-page="digital-marketing"]) .kaxon-about .container{padding-inline:16px}:where(html[data-page="digital-marketing"]) .kaxon-about .ka-footer-grid{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .kaxon-about .ka-footer-brand{grid-column:auto}:where(html[data-page="digital-marketing"]) .kaxon-about h2{font-size:1.875rem}}
@media(prefers-reduced-motion:reduce){html:where([data-page="digital-marketing"]):has(.kaxon-about){scroll-behavior:auto}:where(html[data-page="digital-marketing"]) .kaxon-about *,:where(html[data-page="digital-marketing"]) .kaxon-about *::before,:where(html[data-page="digital-marketing"]) .kaxon-about *::after{animation:none;transition:none}:where(html[data-page="digital-marketing"]) .kaxon-about .ka-card:hover,:where(html[data-page="digital-marketing"]) .kaxon-about .ka-button:hover{transform:none}}


/* digital-marketing.html embedded 2 */

/* Shared secondary-page patterns, all scoped to the Kaxon site. */
:where(html[data-page="digital-marketing"]) .ks-site .ks-section-heading{max-width:860px;margin-bottom:32px}:where(html[data-page="digital-marketing"]) .ks-site .ks-section-heading .ka-section-copy{max-width:780px}:where(html[data-page="digital-marketing"]) .ks-site .ks-cream{background:var(--ka-cream)}
:where(html[data-page="digital-marketing"]) .ks-site .ks-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}:where(html[data-page="digital-marketing"]) .ks-site .ks-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}:where(html[data-page="digital-marketing"]) .ks-site .ks-card-grid .ka-card{display:flex;flex-direction:column;align-items:flex-start}:where(html[data-page="digital-marketing"]) .ks-site .ks-card-grid .ka-card p{margin-bottom:20px}:where(html[data-page="digital-marketing"]) .ks-site .ks-card-link{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:600;min-height:44px;margin-top:auto;color:var(--color-primary-navy)}:where(html[data-page="digital-marketing"]) .ks-site .ks-card-link .ka-icon{width:17px;height:17px;flex:none}:where(html[data-page="digital-marketing"]) .ks-site .ks-card-link:hover{text-decoration:underline;text-underline-offset:5px}:where(html[data-page="digital-marketing"]) .ks-site .ks-card-grid .ka-card h3{font-size:1.25rem}
:where(html[data-page="digital-marketing"]) .ks-site .ks-editorial{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}:where(html[data-page="digital-marketing"]) .ks-site .ks-focus-list{list-style:none;display:grid;gap:0}:where(html[data-page="digital-marketing"]) .ks-site .ks-focus-list li{display:grid;grid-template-columns:42px 1fr;gap:18px;padding:23px 0;border-bottom:1px solid var(--border-color)}:where(html[data-page="digital-marketing"]) .ks-site .ks-focus-list li:first-child{padding-top:0}:where(html[data-page="digital-marketing"]) .ks-site .ks-focus-list span{font-family:var(--font-heading);font-size:1.35rem;color:#9C6500}:where(html[data-page="digital-marketing"]) .ks-site .ks-focus-list h3{font-size:1.35rem}:where(html[data-page="digital-marketing"]) .ks-site .ks-check-list{list-style:none;display:grid;gap:18px}:where(html[data-page="digital-marketing"]) .ks-site .ks-check-list li{display:flex;align-items:flex-start;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--border-color);font-size:.9375rem}:where(html[data-page="digital-marketing"]) .ks-site .ks-check-list .ka-icon{flex:none;color:#16835B;width:21px;height:21px}
:where(html[data-page="digital-marketing"]) .ks-site .ks-timeline{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}:where(html[data-page="digital-marketing"]) .ks-site .ks-timeline li{background:white;border-radius:22px;box-shadow:var(--shadow-card);padding:24px}:where(html[data-page="digital-marketing"]) .ks-site .ks-timeline h3{margin:18px 0 10px;font-size:1.1875rem}:where(html[data-page="digital-marketing"]) .ks-site .ks-timeline p{font-size:.875rem;color:var(--text-secondary)}
:where(html[data-page="digital-marketing"]) .ks-site .ks-hero-photo{position:relative;margin:12px 12px 12px 0;isolation:isolate}:where(html[data-page="digital-marketing"]) .ks-site .ks-hero-photo::before{content:'';position:absolute;inset:-8px -13px -12px 20px;z-index:-1;background:var(--color-yellow);border-radius:28px;transform:rotate(2deg)}:where(html[data-page="digital-marketing"]) .ks-site .ks-hero-photo img{width:100%;aspect-ratio:1.2;object-fit:cover;border:6px solid white;border-radius:28px;box-shadow:var(--shadow-lg)}:where(html[data-page="digital-marketing"]) .ks-site .ks-hero-photo figcaption{position:absolute;bottom:20px;left:22px;right:22px;background:white;border-radius:14px;padding:13px 16px;font-weight:600;font-size:.75rem;text-align:center;box-shadow:var(--shadow-md)}
:where(html[data-page="digital-marketing"]) .ks-site .ks-hub{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px;padding:20px 0}:where(html[data-page="digital-marketing"]) .ks-site .ks-hub-core{border-radius:50%;width:160px;height:160px;background:var(--color-primary-navy);color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:1.55rem;line-height:1.15;box-shadow:var(--shadow-lg)}:where(html[data-page="digital-marketing"]) .ks-site .ks-hub-core span{color:#49CABB;font-size:1.2rem}:where(html[data-page="digital-marketing"]) .ks-site .ks-hub-core small{font:400 .625rem/1.5 var(--font-body);color:#D7DEEA;margin-top:10px}:where(html[data-page="digital-marketing"]) .ks-site .ks-hub ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;gap:12px;width:100%}:where(html[data-page="digital-marketing"]) .ks-site .ks-hub li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:92px;padding:14px 10px;border-radius:18px;font-weight:600;font-size:.7rem;text-align:center;box-shadow:var(--shadow-sm)}:where(html[data-page="digital-marketing"]) .ks-site .ks-hub li:last-child{grid-column:2}
:where(html[data-page="digital-marketing"]) .ks-site .ks-blueprint{background:white;border:1px solid var(--border-color);border-radius:26px;box-shadow:var(--shadow-lg);position:relative;transform:rotate(1deg);min-width:0}:where(html[data-page="digital-marketing"]) .ks-site .ks-blueprint-top{padding:17px 20px;border-bottom:1px solid var(--border-color);display:flex;gap:16px;align-items:center;font-size:.65rem;color:var(--text-secondary)}:where(html[data-page="digital-marketing"]) .ks-site .ks-window-dots{display:flex;gap:5px;flex:none}:where(html[data-page="digital-marketing"]) .ks-site .ks-window-dots i{width:7px;height:7px;background:#CDD6E2;border-radius:50%}:where(html[data-page="digital-marketing"]) .ks-site .ks-blueprint-body{padding:30px}:where(html[data-page="digital-marketing"]) .ks-site .ks-blueprint h2{font-size:1.65rem;margin:20px 0}:where(html[data-page="digital-marketing"]) .ks-site .ks-blueprint ol{list-style:none;display:grid;gap:12px}:where(html[data-page="digital-marketing"]) .ks-site .ks-blueprint li{display:flex;align-items:center;gap:14px;background:#F8FAFC;padding:10px 12px;border-radius:14px;font-size:.875rem;font-weight:600}:where(html[data-page="digital-marketing"]) .ks-site .ks-blueprint li .ka-step-number{width:34px;height:34px;font-size:1rem}:where(html[data-page="digital-marketing"]) .ks-site .ks-blueprint-foot{margin-top:22px;display:flex;align-items:center;gap:8px;font-size:.7rem;color:#16835B}:where(html[data-page="digital-marketing"]) .ks-site .ks-blueprint-foot svg{width:17px;height:17px;flex:none}:where(html[data-page="digital-marketing"]) .ks-site .ks-cloud .ks-blueprint-body{background:#F3FAF6;border-radius:0 0 26px 26px}:where(html[data-page="digital-marketing"]) .ks-site .ks-design{transform:rotate(-1deg);border-top:5px solid #F4B4D5}:where(html[data-page="digital-marketing"]) .ks-site .ks-mobile{max-width:320px;width:100%;margin:auto;border:7px solid var(--color-primary-navy);border-radius:38px;transform:none}:where(html[data-page="digital-marketing"]) .ks-site .ks-mobile .ks-blueprint-top{border-radius:30px 30px 0 0}:where(html[data-page="digital-marketing"]) .ks-site .ks-mobile .ks-blueprint-body{padding:24px 20px}:where(html[data-page="digital-marketing"]) .ks-site .ks-flow li{position:relative}:where(html[data-page="digital-marketing"]) .ks-site .ks-flow li:not(:last-child)::after{content:'↓';position:absolute;left:27px;bottom:-16px;color:var(--text-secondary);z-index:1}
:where(html[data-page="digital-marketing"]) .ks-site .ks-faq{max-width:900px}:where(html[data-page="digital-marketing"]) .ks-site .ks-faq details,:where(html[data-page="digital-marketing"]) .ks-site .ks-role-list details{border:1px solid var(--border-color);border-radius:18px;background:white;margin-bottom:14px;overflow:hidden}:where(html[data-page="digital-marketing"]) .ks-site .ks-faq summary,:where(html[data-page="digital-marketing"]) .ks-site .ks-role-list summary{cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:23px 24px;font-weight:600;list-style:none;min-height:64px}:where(html[data-page="digital-marketing"]) .ks-site summary::-webkit-details-marker{display:none}:where(html[data-page="digital-marketing"]) .ks-site .ks-faq summary>span,:where(html[data-page="digital-marketing"]) .ks-site .ks-role-list summary>span:last-child{font-size:1.3rem;flex:none}:where(html[data-page="digital-marketing"]) .ks-site .ks-faq details[open] summary>span,:where(html[data-page="digital-marketing"]) .ks-site .ks-role-list details[open] summary>span:last-child{transform:rotate(45deg)}:where(html[data-page="digital-marketing"]) .ks-site .ks-faq p,:where(html[data-page="digital-marketing"]) .ks-site .ks-role-list details>div{padding:0 24px 24px;font-size:.9375rem;color:var(--text-secondary)}:where(html[data-page="digital-marketing"]) .ks-site .ks-role-list summary small{display:block;font-size:.8125rem;color:var(--text-secondary);font-weight:400;margin-top:7px}:where(html[data-page="digital-marketing"]) .ks-site .ks-role-list .ka-button{margin-top:20px}:where(html[data-page="digital-marketing"]) .ks-site summary:focus-visible{outline:3px solid #2E82FE;outline-offset:-4px}
:where(html[data-page="digital-marketing"]) .ks-site .ks-industry-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}:where(html[data-page="digital-marketing"]) .ks-site .ks-industry-filters[hidden]{display:none}:where(html[data-page="digital-marketing"]) .ks-site .ks-industry-filters button{padding:10px 16px;min-height:44px;border-radius:999px;border:1px solid var(--border-color);color:var(--color-primary-navy);background:white;font-size:.8125rem}:where(html[data-page="digital-marketing"]) .ks-site .ks-industry-filters button[aria-pressed=true]{background:var(--color-primary-navy);color:white;border-color:var(--color-primary-navy)}:where(html[data-page="digital-marketing"]) .ks-site .ks-filter-status{font-size:.8125rem;color:var(--text-secondary);margin-bottom:24px}:where(html[data-page="digital-marketing"]) .ks-site .ks-filter-status:empty{display:none}:where(html[data-page="digital-marketing"]) .ks-site .ks-industry-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}:where(html[data-page="digital-marketing"]) .ks-site .ks-industry-card{border:1px solid var(--border-color);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-card);background:white}:where(html[data-page="digital-marketing"]) .ks-site .ks-industry-card[hidden]{display:none}:where(html[data-page="digital-marketing"]) .ks-site .ks-industry-card>img{width:100%;height:240px;object-fit:cover}:where(html[data-page="digital-marketing"]) .ks-site .ks-industry-card>div{padding:28px}:where(html[data-page="digital-marketing"]) .ks-site .ks-industry-card h3{font-size:1.625rem;line-height:1.2;margin-bottom:14px}:where(html[data-page="digital-marketing"]) .ks-site .ks-industry-card p:not(.ka-eyebrow){font-size:.9375rem;color:var(--text-secondary)}:where(html[data-page="digital-marketing"]) .ks-site .ks-tags{display:flex;gap:7px;flex-wrap:wrap;list-style:none;margin:20px 0 10px}:where(html[data-page="digital-marketing"]) .ks-site .ks-tags li{border-radius:999px;background:#F1F4F9;font-size:.6875rem;padding:5px 10px}
:where(html[data-page="digital-marketing"]) .ks-site .ks-contact-intro{background:var(--ka-cream);padding-bottom:46px}:where(html[data-page="digital-marketing"]) .ks-site .ks-contact-intro h1{margin-bottom:20px}:where(html[data-page="digital-marketing"]) .ks-site .ks-contact-intro .ks-section-heading{margin-bottom:0}:where(html[data-page="digital-marketing"]) .ks-site .ks-contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px}:where(html[data-page="digital-marketing"]) .ks-site .ks-contact-methods{display:grid;gap:20px;margin-top:36px}:where(html[data-page="digital-marketing"]) .ks-site .ks-contact-methods>a,:where(html[data-page="digital-marketing"]) .ks-site .ks-contact-methods>div{display:flex;gap:18px;align-items:center;font-size:1.125rem;font-weight:600}:where(html[data-page="digital-marketing"]) .ks-site .ks-contact-methods .ka-icon{flex:none;color:var(--color-teal)}:where(html[data-page="digital-marketing"]) .ks-site .ks-contact-methods small{display:block;font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--text-secondary);margin-bottom:4px}:where(html[data-page="digital-marketing"]) .ks-site .ks-contact-address{margin-top:22px;color:var(--text-secondary);font-size:.8125rem;max-width:360px}:where(html[data-page="digital-marketing"]) .ks-site .ks-contact-grid .ks-card-link{margin-top:20px}:where(html[data-page="digital-marketing"]) .ks-site .ks-brief-card{padding:32px}:where(html[data-page="digital-marketing"]) .ks-site .ks-brief-card h2{font-size:1.75rem;margin-bottom:12px}:where(html[data-page="digital-marketing"]) .ks-site .ks-brief-card>p{margin-bottom:24px}:where(html[data-page="digital-marketing"]) .ks-site .ks-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}:where(html[data-page="digital-marketing"]) .ks-site form label{display:block;font-size:.8125rem;font-weight:600;margin:17px 0 7px}:where(html[data-page="digital-marketing"]) .ks-site form label span{font-weight:400}:where(html[data-page="digital-marketing"]) .ks-site form input,:where(html[data-page="digital-marketing"]) .ks-site form select,:where(html[data-page="digital-marketing"]) .ks-site form textarea{display:block;border:1px solid var(--border-color);border-radius:12px;width:100%;min-width:0;background:white;padding:12px 14px;color:var(--color-primary-navy);font-size:.9375rem;min-height:48px;line-height:1.5}:where(html[data-page="digital-marketing"]) .ks-site form textarea{resize:vertical;min-height:130px}:where(html[data-page="digital-marketing"]) .ks-site form :is(input,select,textarea):focus{outline:3px solid #2E82FE33;border-color:#2E82FE}:where(html[data-page="digital-marketing"]) .ks-site .ks-form-help{font-size:.75rem;margin:18px 0;color:var(--text-secondary)}:where(html[data-page="digital-marketing"]) .ks-site form>button{width:100%}:where(html[data-page="digital-marketing"]) .ks-site .ks-brief-tools{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}:where(html[data-page="digital-marketing"]) .ks-site .ks-brief-tools[hidden],:where(html[data-page="digital-marketing"]) .ks-site #ks-brief-preview[hidden]{display:none}:where(html[data-page="digital-marketing"]) .ks-site #ks-brief-status{margin-top:18px;font-size:.8125rem;line-height:1.6}:where(html[data-page="digital-marketing"]) .ks-site .ks-brief-tools .ka-button{font-size:.75rem;padding:10px 16px}:where(html[data-page="digital-marketing"]) .ks-site .ks-footer-email{display:inline-block;margin-top:14px;font-size:.8125rem}:where(html[data-page="digital-marketing"]) .ks-site .ks-footer-phone{margin-top:18px;font-size:.8125rem}
:where(html[data-page="digital-marketing"]) .ks-site .ks-service-nav-label{display:flex;align-items:center;gap:3px}:where(html[data-page="digital-marketing"]) .ks-site .ks-nav-service{position:relative}:where(html[data-page="digital-marketing"]) .ks-site .ks-dropdown summary{display:flex;align-items:center;justify-content:center;min-width:28px;min-height:44px;cursor:pointer;list-style:none}:where(html[data-page="digital-marketing"]) .ks-site .ks-dropdown>ul{position:absolute;top:100%;left:-15px;width:240px;display:flex;flex-direction:column;align-items:stretch;gap:0;background:white;border:1px solid var(--border-color);border-radius:16px;box-shadow:var(--shadow-lg);padding:10px;z-index:30}:where(html[data-page="digital-marketing"]) .ks-site .ks-dropdown>ul a{padding:8px 12px;min-height:44px;border-radius:9px}:where(html[data-page="digital-marketing"]) .ks-site .ks-dropdown>ul a:hover{background:#F1F4F9}:where(html[data-page="digital-marketing"]) .ks-site .ks-dropdown>ul a[aria-current]::after{display:none}:where(html[data-page="digital-marketing"]) .ks-site .ks-dropdown>ul a[aria-current]{background:#FFF9E5}:where(html[data-page="digital-marketing"]) .ks-site .ka-navigation>ul{gap:18px}
@media(max-width:1150px){:where(html[data-page="digital-marketing"]) .ks-site .ka-navigation>ul{gap:11px}:where(html[data-page="digital-marketing"]) .ks-site .ks-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1023px){:where(html[data-page="digital-marketing"]) .ks-site .ks-hero-photo,:where(html[data-page="digital-marketing"]) .ks-site .ks-hub,:where(html[data-page="digital-marketing"]) .ks-site .ks-blueprint{max-width:620px;width:calc(100% - 20px);margin-inline:auto}:where(html[data-page="digital-marketing"]) .ks-site .ks-mobile{max-width:330px}:where(html[data-page="digital-marketing"]) .ks-site .ks-hero-photo img{aspect-ratio:1.6}:where(html[data-page="digital-marketing"]) .ks-site .ks-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}:where(html[data-page="digital-marketing"]) .ks-site .ks-editorial{gap:40px}:where(html[data-page="digital-marketing"]) .ks-site .ks-contact-grid{gap:36px}:where(html[data-page="digital-marketing"]) .ks-site .ks-service-nav-label{flex-wrap:wrap;align-items:start}:where(html[data-page="digital-marketing"]) .ks-site .ks-dropdown{position:static}:where(html[data-page="digital-marketing"]) .ks-site .ks-dropdown[open]{width:100%}:where(html[data-page="digital-marketing"]) .ks-site .ks-dropdown>ul{position:static;width:100%;padding:6px;border-radius:12px;box-shadow:none;margin-top:4px}:where(html[data-page="digital-marketing"]) .ks-site .ks-dropdown summary{justify-content:flex-start}:where(html[data-page="digital-marketing"]) .ks-site .ks-dropdown>ul a{font-size:.75rem}:where(html[data-page="digital-marketing"]) .ks-site .ka-navigation>ul{align-items:start}:where(html[data-page="digital-marketing"]) .ks-site .ks-timeline{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){:where(html[data-page="digital-marketing"]) .ks-site .ks-editorial,:where(html[data-page="digital-marketing"]) .ks-site .ks-contact-grid{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .ks-site .ks-timeline{grid-template-columns:1fr;gap:18px}:where(html[data-page="digital-marketing"]) .ks-site .ks-timeline li{display:flex;gap:20px}:where(html[data-page="digital-marketing"]) .ks-site .ks-timeline h3{margin-top:0}:where(html[data-page="digital-marketing"]) .ks-site .ks-contact-grid{gap:40px}}
@media(max-width:600px){:where(html[data-page="digital-marketing"]) .ks-site .ks-card-grid,:where(html[data-page="digital-marketing"]) .ks-site .ks-cols-4,:where(html[data-page="digital-marketing"]) .ks-site .ks-industry-grid,:where(html[data-page="digital-marketing"]) .ks-site .ks-form-grid{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .ks-site .ks-blueprint-body{padding:22px}:where(html[data-page="digital-marketing"]) .ks-site .ks-blueprint h2{font-size:1.45rem}:where(html[data-page="digital-marketing"]) .ks-site .ks-blueprint li{font-size:.8125rem}:where(html[data-page="digital-marketing"]) .ks-site .ks-blueprint-top{font-size:.625rem;gap:10px;padding:15px}:where(html[data-page="digital-marketing"]) .ks-site .ks-hub ul{grid-template-columns:repeat(2,minmax(0,1fr))}:where(html[data-page="digital-marketing"]) .ks-site .ks-hub li:last-child{grid-column:1 / -1}:where(html[data-page="digital-marketing"]) .ks-site .ks-hub-core{width:135px;height:135px}:where(html[data-page="digital-marketing"]) .ks-site .ks-hero-photo img{aspect-ratio:1.25}:where(html[data-page="digital-marketing"]) .ks-site .ks-hero-photo figcaption{position:relative;bottom:auto;left:auto;right:auto;margin:0;background:white;border-radius:0 0 18px 18px;box-shadow:none}:where(html[data-page="digital-marketing"]) .ks-site .ks-industry-card>div{padding:24px}:where(html[data-page="digital-marketing"]) .ks-site .ks-industry-card>img{height:210px}:where(html[data-page="digital-marketing"]) .ks-site .ks-brief-card{padding:24px 20px}:where(html[data-page="digital-marketing"]) .ks-site .ks-form-grid{gap:0}:where(html[data-page="digital-marketing"]) .ks-site .ks-faq summary,:where(html[data-page="digital-marketing"]) .ks-site .ks-role-list summary{padding:20px}:where(html[data-page="digital-marketing"]) .ks-site .ks-faq p,:where(html[data-page="digital-marketing"]) .ks-site .ks-role-list details>div{padding:0 20px 20px}:where(html[data-page="digital-marketing"]) .ks-site .ks-role-list summary>span:first-child{font-size:1.125rem}:where(html[data-page="digital-marketing"]) .ks-site .ks-card-grid .ka-card p{font-size:.9375rem}:where(html[data-page="digital-marketing"]) .ks-site .ks-contact-methods>a,:where(html[data-page="digital-marketing"]) .ks-site .ks-contact-methods>div{font-size:1rem}:where(html[data-page="digital-marketing"]) .ks-site .ks-industry-filters{gap:7px}:where(html[data-page="digital-marketing"]) .ks-site .ks-industry-filters button{font-size:.75rem;padding:10px 12px}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="digital-marketing"]) .ks-site .ks-blueprint{transform:none}}
:where(html[data-page="digital-marketing"]) .ks-site .kh-capabilities,:where(html[data-page="digital-marketing"]) .ks-site .kh-industry-links{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}:where(html[data-page="digital-marketing"]) .ks-site .kh-capabilities li{font-size:.75rem;color:var(--text-secondary);padding-right:12px;border-right:1px solid var(--border-color)}:where(html[data-page="digital-marketing"]) .ks-site .kh-capabilities li:last-child{border:0}:where(html[data-page="digital-marketing"]) .ks-site .kh-process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none}:where(html[data-page="digital-marketing"]) .ks-site .kh-process li{border-radius:24px;overflow:hidden;background:white;box-shadow:var(--shadow-card)}:where(html[data-page="digital-marketing"]) .ks-site .kh-process img{width:100%;aspect-ratio:1.25;object-fit:cover}:where(html[data-page="digital-marketing"]) .ks-site .kh-process li>div{padding:22px}:where(html[data-page="digital-marketing"]) .ks-site .kh-process h3{font-size:1.2rem;margin:16px 0 12px}:where(html[data-page="digital-marketing"]) .ks-site .kh-process p{font-size:.875rem;color:var(--text-secondary)}:where(html[data-page="digital-marketing"]) .ks-site .kh-industry-links{margin:0 0 28px}:where(html[data-page="digital-marketing"]) .ks-site .kh-industry-links a{display:flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid var(--border-color);border-radius:100px;background:white;font-size:.8125rem;min-height:48px}:where(html[data-page="digital-marketing"]) .ks-site .kh-industry-links svg{width:16px;height:16px}:where(html[data-page="digital-marketing"]) .ks-site .kh-industry-feature{display:grid;grid-template-columns:1fr 1fr;border-radius:26px;overflow:hidden;background:var(--color-primary-navy);color:white}:where(html[data-page="digital-marketing"]) .ks-site .kh-industry-feature>img{height:100%;width:100%;min-height:360px;object-fit:cover}:where(html[data-page="digital-marketing"]) .ks-site .kh-industry-feature>div{padding:44px}:where(html[data-page="digital-marketing"]) .ks-site .kh-industry-feature h3{color:white;font-size:2rem}:where(html[data-page="digital-marketing"]) .ks-site .kh-industry-feature .ka-eyebrow{color:#F8C72E}:where(html[data-page="digital-marketing"]) .ks-site .kh-industry-feature p:not(.ka-eyebrow){color:#DAE1EB;margin:20px 0 28px}:where(html[data-page="digital-marketing"]) .ks-site .kh-conversation{padding:32px;display:flex;flex-direction:column;align-items:flex-start}:where(html[data-page="digital-marketing"]) .ks-site .kh-conversation p{margin-bottom:24px}:where(html[data-page="digital-marketing"]) .ks-site .kh-conversation .ks-card-link{margin-top:16px}
@media(max-width:1023px){:where(html[data-page="digital-marketing"]) .ks-site .kh-process{grid-template-columns:1fr 1fr}}
@media(max-width:768px){:where(html[data-page="digital-marketing"]) .ks-site .kh-industry-feature{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .ks-site .kh-industry-feature>img{min-height:0;max-height:300px}:where(html[data-page="digital-marketing"]) .ks-site .kh-industry-feature>div{padding:28px}}
@media(max-width:600px){:where(html[data-page="digital-marketing"]) .ks-site .kh-process{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .ks-site .kh-process img{aspect-ratio:1.7}:where(html[data-page="digital-marketing"]) .ks-site .kh-industry-feature h3{font-size:1.7rem}}
/* Services: geometry from the supplied visual reference. */
:where(html[data-page="digital-marketing"]) .ks-page-services .ka-hero-grid{gap:40px;grid-template-columns:1.08fr 1fr}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub{height:450px;width:100%;max-width:510px;margin:auto;padding:0;display:block}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub-core{position:absolute;width:140px;height:140px;left:50%;top:51%;transform:translate(-50%,-50%);z-index:2}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub ul{display:block;position:absolute;inset:0}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub li{position:absolute;width:142px;min-height:78px;padding:14px;flex-direction:row;gap:10px;font-size:.75rem;line-height:1.35;border-radius:20px}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub li .ka-icon{width:32px;height:32px;flex:none}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub .ks-orbit-web-development{top:2%;left:50%;transform:translateX(-50%);flex-direction:column;width:136px;min-height:110px}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-orbit-ui-ux-design{top:27%;left:0}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-orbit-mobile-apps{top:27%;right:0}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-orbit-seo-optimization{top:53%;left:-2%}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-orbit-ai-automation{top:53%;right:-2%}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-orbit-digital-marketing{bottom:0;left:9%}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-orbit-cloud-solutions{bottom:0;right:9%}
:where(html[data-page="digital-marketing"]) .ks-site .ks-orbit-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#D7DBDF;stroke-width:2;stroke-dasharray:7 8}
:where(html[data-page="digital-marketing"]) .ks-site .ks-hand-note{position:absolute;right:0;top:0;font:700 1.4rem/1.05 var(--font-handwriting);transform:rotate(-9deg);text-align:center;pointer-events:none;color:var(--color-primary-navy)}
:where(html[data-page="digital-marketing"]) .ks-site .ks-hand-note svg{display:block;width:45px;height:60px;fill:none;stroke:currentColor;stroke-width:1.5;margin-left:auto}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub .ks-hand-note{right:-24px;top:-22px;font-size:1.25rem}
:where(html[data-page="digital-marketing"]) .ks-page-services .ka-section>.container{position:relative}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-section-heading{max-width:calc(100% - 120px)}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-service-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-service-grid>.ka-card{grid-column:span 3;display:flex;flex-direction:column;align-items:flex-start}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-service-grid>.ka-card:nth-child(n+5){grid-column:span 4}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-service-grid h3{font-size:1.25rem}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-service-grid p{margin-bottom:10px}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-card-link{color:#0060CF}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-goals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-goals .ka-card{display:flex;align-items:flex-start;gap:18px;padding:24px 20px}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-goals h3{margin-top:8px;font-size:1.125rem}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-goals .ka-icon-chip{width:52px;height:52px}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-connected li{position:relative;padding:22px 20px}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-step-heading{display:flex;align-items:center;gap:12px;margin-bottom:14px}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-step-heading h3{font-size:1.05rem;margin:0}
:where(html[data-page="digital-marketing"]) .ks-page-services .ks-process-arrow{position:absolute;left:calc(100% - 6px);top:48%;width:35px;height:25px;fill:none;stroke:var(--color-primary-navy);stroke-width:1.7;z-index:2}
:where(html[data-page="digital-marketing"]) .ks-site .ks-dropdown:not([open])>ul{display:none}
@media(min-width:1024px) and (max-width:1190px){:where(html[data-page="digital-marketing"]) .ks-site .ka-header-inner{gap:14px}:where(html[data-page="digital-marketing"]) .ks-site .ka-brand{font-size:1.3rem}:where(html[data-page="digital-marketing"]) .ks-site .ka-header-action .ka-button{padding:11px 14px}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub li{width:122px;font-size:.6875rem}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub-core{width:120px;height:120px}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub .ks-hand-note{right:0}}
@media(max-width:1023px){:where(html[data-page="digital-marketing"]) .ks-page-services .ka-hero-grid{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub{max-width:510px;width:calc(100% - 28px);margin-top:20px}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-service-grid>.ka-card,:where(html[data-page="digital-marketing"]) .ks-page-services .ks-service-grid>.ka-card:nth-child(n+5){grid-column:span 6}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-goals{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-process-arrow{display:none}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-connected li{display:block}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub .ks-hand-note{right:-12px}}
@media(max-width:600px){:where(html[data-page="digital-marketing"]) .ks-page-services .ks-service-grid{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-service-grid>.ka-card,:where(html[data-page="digital-marketing"]) .ks-page-services .ks-service-grid>.ka-card:nth-child(n+5){grid-column:auto}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-section-heading{max-width:100%}:where(html[data-page="digital-marketing"]) .ks-site .ks-hand-note{display:none}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub{height:auto;display:flex;flex-direction:column;gap:22px;max-width:440px;width:100%;margin-top:10px}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-orbit-lines{display:none}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub-core{position:static;transform:none;width:130px;height:130px}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub ul{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub li,:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub .ks-orbit-web-development{position:static;transform:none;width:auto;min-height:90px;flex-direction:column;font-size:.75rem}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-hub li:last-child{grid-column:1/-1}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-goals .ka-card{gap:14px}:where(html[data-page="digital-marketing"]) .ks-page-services .ks-connected{grid-template-columns:1fr}}


/* digital-marketing.html embedded 3 */
:where(html[data-page="digital-marketing"]) .up-page{background:#FFFBF3}:where(html[data-page="digital-marketing"]) .up-page .ka-header{background:#FFFBF3}:where(html[data-page="digital-marketing"]) .up-page .up-section{padding:40px 0}:where(html[data-page="digital-marketing"]) .up-page .up-section>.container{position:relative}:where(html[data-page="digital-marketing"]) .up-page .up-heading{max-width:750px;margin-bottom:26px}:where(html[data-page="digital-marketing"]) .up-page .up-eyebrow{display:inline-block;padding:4px 10px;border-radius:20px;background:#E0ECFF;color:#0058D6;font-size:.65rem;letter-spacing:.11em;font-weight:600;text-transform:uppercase;margin-bottom:16px}:where(html[data-page="digital-marketing"]) .up-page h1{font-size:clamp(2.35rem,4.15vw,3.75rem);line-height:1.07}:where(html[data-page="digital-marketing"]) .up-page .up-heading h2,:where(html[data-page="digital-marketing"]) .up-page .up-editorial h2{font-size:clamp(1.9rem,3vw,2.65rem);line-height:1.12;letter-spacing:-.035em}:where(html[data-page="digital-marketing"]) .up-page .up-heading>p:last-child:not(.up-eyebrow),:where(html[data-page="digital-marketing"]) .up-page .up-copy{color:#57657B;font-size:1rem;line-height:1.6;margin-top:18px}:where(html[data-page="digital-marketing"]) .up-page .up-mark{background:#F8C72E;border-radius:5px;padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}:where(html[data-page="digital-marketing"]) .up-page .up-hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding-top:22px}:where(html[data-page="digital-marketing"]) .up-page .up-hero .ka-actions{margin:28px 0}:where(html[data-page="digital-marketing"]) .up-page .up-note{position:absolute;right:5px;top:-8px;font:700 1.35rem/1.05 var(--font-handwriting);transform:rotate(-7deg);max-width:150px;pointer-events:none}:where(html[data-page="digital-marketing"]) .up-page .up-note svg{display:block;margin-left:auto;width:44px;height:58px;fill:none;stroke:#14243D;stroke-width:1.5}:where(html[data-page="digital-marketing"]) .up-page .up-chip{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.75rem;line-height:1.4;min-width:0}:where(html[data-page="digital-marketing"]) .up-page .up-chip .ka-icon-chip{width:44px;height:44px}:where(html[data-page="digital-marketing"]) .up-page .up-chip .ka-icon{width:22px;height:22px}:where(html[data-page="digital-marketing"]) .up-page .up-benefit-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:30px}:where(html[data-page="digital-marketing"]) .up-page .up-benefit-strip strong{display:block;font-family:var(--font-heading);font-size:1.25rem}:where(html[data-page="digital-marketing"]) .up-page .up-benefit-strip small{font-size:.65rem;color:#57657B;font-weight:400}:where(html[data-page="digital-marketing"]) .up-page .up-white{background:white;border:1px solid #E8EDF3;box-shadow:0 8px 28px #14243D06;border-radius:22px}:where(html[data-page="digital-marketing"]) .up-page .up-collage{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:12px;padding:20px 12px 0;min-width:0}:where(html[data-page="digital-marketing"]) .up-page .up-collage figure{position:relative;min-width:0}:where(html[data-page="digital-marketing"]) .up-page .up-collage img{width:100%;height:180px;object-fit:cover;border-radius:20px}:where(html[data-page="digital-marketing"]) .up-page .up-collage figure:first-child{grid-row:span 2;margin-top:35px}:where(html[data-page="digital-marketing"]) .up-page .up-collage figure:first-child img{height:340px}:where(html[data-page="digital-marketing"]) .up-page .up-collage figcaption{position:absolute;bottom:10px;left:10px;right:10px;padding:12px;background:white;border-radius:14px;font-size:.7rem;font-weight:600;box-shadow:0 6px 15px #14243D0C}:where(html[data-page="digital-marketing"]) .up-page .up-collage figure:last-child{grid-column:1/-1;width:65%;margin-top:-35px;justify-self:center;z-index:1}:where(html[data-page="digital-marketing"]) .up-page .up-collage figure:last-child img{height:170px}:where(html[data-page="digital-marketing"]) .up-page .up-tabs{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:12px;scrollbar-width:thin;border-radius:20px;background:white;box-shadow:0 6px 25px #14243D08;margin-bottom:24px}:where(html[data-page="digital-marketing"]) .up-page .up-tabs button{flex:none;display:flex;align-items:center;gap:8px;border-radius:30px;padding:10px 15px;min-height:44px;color:#14243D;background:transparent;font-size:.7rem;font-weight:600}:where(html[data-page="digital-marketing"]) .up-page .up-tabs button[aria-pressed=true]{background:#14243D;color:white}:where(html[data-page="digital-marketing"]) .up-page .up-tabs .ka-icon{width:19px;height:19px}:where(html[data-page="digital-marketing"]) .up-page .up-feature{display:grid;grid-template-columns:1fr 1fr;overflow:hidden}:where(html[data-page="digital-marketing"]) .up-page .up-feature[hidden],:where(html[data-page="digital-marketing"]) .up-page [data-sector-card][hidden],:where(html[data-page="digital-marketing"]) .up-page [data-department][hidden]{display:none}:where(html[data-page="digital-marketing"]) .up-page .up-feature>img{height:100%;min-height:420px;width:100%;object-fit:cover}:where(html[data-page="digital-marketing"]) .up-page .up-feature-content{padding:34px;position:relative}:where(html[data-page="digital-marketing"]) .up-page .up-feature-content h3{font-size:2rem;margin:10px 0}:where(html[data-page="digital-marketing"]) .up-page .up-feature-content>p{color:#57657B;font-size:.9375rem;line-height:1.6}:where(html[data-page="digital-marketing"]) .up-page .up-feature-list{display:grid;grid-template-columns:1fr 1fr;gap:20px;list-style:none;margin:24px 0}:where(html[data-page="digital-marketing"]) .up-page .up-feature-list li{display:flex;gap:10px;align-items:center;font-size:.8rem;color:#57657B}:where(html[data-page="digital-marketing"]) .up-page .up-feature-list svg{width:24px;height:24px;flex:none;color:#1FB6A6}:where(html[data-page="digital-marketing"]) .up-page .up-feature-controls{display:flex;gap:8px;justify-content:flex-end;margin-bottom:14px}:where(html[data-page="digital-marketing"]) .up-page .up-circle{display:grid;place-items:center;border:1px solid #DCE5EF;background:white;width:44px;height:44px;border-radius:50%;font-size:1.2rem}:where(html[data-page="digital-marketing"]) .up-page .up-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}:where(html[data-page="digital-marketing"]) .up-page .up-stat{padding:22px;display:flex;align-items:center;gap:14px}:where(html[data-page="digital-marketing"]) .up-page .up-stat strong{display:block;font-size:1rem}:where(html[data-page="digital-marketing"]) .up-page .up-stat p{font-size:.72rem;color:#57657B}:where(html[data-page="digital-marketing"]) .up-page .up-sector-card{overflow:hidden;padding:10px;display:flex;flex-direction:column}:where(html[data-page="digital-marketing"]) .up-page .up-sector-card img{height:160px;width:100%;object-fit:cover;border-radius:15px}:where(html[data-page="digital-marketing"]) .up-page .up-sector-card>div{padding:15px 10px}:where(html[data-page="digital-marketing"]) .up-page .up-sector-card h3{font-size:1.1rem}:where(html[data-page="digital-marketing"]) .up-page .up-sector-card p{font-size:.8125rem;color:#57657B;margin:12px 0}:where(html[data-page="digital-marketing"]) .up-page .up-sector-card a{font-size:.8rem;min-height:44px;display:flex;align-items:center;gap:10px;color:#0060CF}:where(html[data-page="digital-marketing"]) .up-page .up-editorial{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}:where(html[data-page="digital-marketing"]) .up-page .up-engine-panel{padding:38px;background:#EFF7FB;border-radius:26px}:where(html[data-page="digital-marketing"]) .up-page .up-engine{height:390px;position:relative}:where(html[data-page="digital-marketing"]) .up-page .up-engine::before{content:'';position:absolute;border:1px dashed #8FAFCB;border-radius:50%;width:300px;height:300px;top:45px;left:50%;transform:translateX(-50%)}:where(html[data-page="digital-marketing"]) .up-page .up-engine-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;background:#14243D;color:#42D7DE;font:700 1.25rem/1.2 var(--font-heading);box-shadow:0 9px 24px #14243D24}:where(html[data-page="digital-marketing"]) .up-page .up-engine ol{list-style:none}:where(html[data-page="digital-marketing"]) .up-page .up-engine li{position:absolute;width:190px;display:flex;align-items:center;gap:12px;background:white;border-radius:25px;padding:14px;box-shadow:0 8px 24px #14243D08;font-size:.75rem}:where(html[data-page="digital-marketing"]) .up-page .up-engine li span{display:block;font-size:.65rem;color:#57657B}:where(html[data-page="digital-marketing"]) .up-page .up-engine li svg{color:#0060CF;width:24px;flex:none}:where(html[data-page="digital-marketing"]) .up-page .up-engine li:nth-child(1){top:0;left:50%;transform:translateX(-50%)}:where(html[data-page="digital-marketing"]) .up-page .up-engine li:nth-child(2){top:90px;right:0}:where(html[data-page="digital-marketing"]) .up-page .up-engine li:nth-child(3){bottom:85px;right:0}:where(html[data-page="digital-marketing"]) .up-page .up-engine li:nth-child(4){bottom:0;left:50%;transform:translateX(-50%)}:where(html[data-page="digital-marketing"]) .up-page .up-engine li:nth-child(5){bottom:85px;left:0}:where(html[data-page="digital-marketing"]) .up-page .up-engine li:nth-child(6){top:90px;left:0}:where(html[data-page="digital-marketing"]) .up-page .up-case{display:grid;grid-template-columns:1.2fr 1.6fr;gap:35px;background:#102944;color:white;padding:36px;border-radius:24px}:where(html[data-page="digital-marketing"]) .up-page .up-case h2{font-size:1.8rem;color:white}:where(html[data-page="digital-marketing"]) .up-page .up-case p{font-size:.85rem;color:#D6E2F0;margin:16px 0}:where(html[data-page="digital-marketing"]) .up-page .up-case .up-eyebrow{color:white;background:#FFFFFF15;font-size:.6rem}:where(html[data-page="digital-marketing"]) .up-page .up-case-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:center}:where(html[data-page="digital-marketing"]) .up-page .up-case-steps>div{border-left:1px solid #FFFFFF24;padding-left:20px}:where(html[data-page="digital-marketing"]) .up-page .up-case-steps h3{color:#F8C72E;font-size:1rem;margin-top:20px}:where(html[data-page="digital-marketing"]) .up-page .up-case-steps p{font-size:.75rem}:where(html[data-page="digital-marketing"]) .up-page .up-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}:where(html[data-page="digital-marketing"]) .up-page .up-perspective{padding:26px}:where(html[data-page="digital-marketing"]) .up-page .up-perspective p{font-size:.9rem;color:#57657B;margin:15px 0}:where(html[data-page="digital-marketing"]) .up-page .up-perspective h3{font-size:1.1rem}:where(html[data-page="digital-marketing"]) .up-page .up-perspective small{font-size:.7rem;color:#57657B}:where(html[data-page="digital-marketing"]) .up-page .up-cta{position:relative;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:45px;padding:42px 45px;background:linear-gradient(115deg,#14243D,#073258);border-radius:25px;color:white;overflow:hidden}:where(html[data-page="digital-marketing"]) .up-page .up-cta h2{color:white;font-size:clamp(1.8rem,3vw,2.55rem)}:where(html[data-page="digital-marketing"]) .up-page .up-cta h2 .up-mark{background:none;color:#F8C72E;padding:0}:where(html[data-page="digital-marketing"]) .up-page .up-cta p:not(.up-eyebrow){font-size:.9rem;color:#D6E2F0;margin-top:20px}:where(html[data-page="digital-marketing"]) .up-page .up-cta .up-eyebrow{background:#FFFFFF10;color:#CFDDEA}:where(html[data-page="digital-marketing"]) .up-page .up-cta>div:last-child{position:relative;padding-top:30px}:where(html[data-page="digital-marketing"]) .up-page .up-cta .up-note{color:#F8C72E;top:-45px;font-size:1.2rem}:where(html[data-page="digital-marketing"]) .up-page .up-cta .up-note svg{stroke:#F8C72E;height:35px}:where(html[data-page="digital-marketing"]) .up-page .up-faq{display:grid;grid-template-columns:1fr 1fr;gap:15px}:where(html[data-page="digital-marketing"]) .up-page .up-faq details{background:white;border:1px solid #E8EDF3;border-radius:16px;padding:0 20px;align-self:start}:where(html[data-page="digital-marketing"]) .up-page .up-faq summary{display:flex;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;min-height:60px;align-items:center;font-size:.85rem;font-weight:600;padding:15px 0}:where(html[data-page="digital-marketing"]) .up-page .up-faq summary span{font-size:1.3rem}:where(html[data-page="digital-marketing"]) .up-page .up-faq details[open] summary span{transform:rotate(45deg)}:where(html[data-page="digital-marketing"]) .up-page .up-faq details>p{font-size:.85rem;color:#57657B;padding-bottom:20px}:where(html[data-page="digital-marketing"]) .up-page .up-section{transition:opacity .55s ease,transform .55s ease}:where(html[data-page="digital-marketing"]) .up-page .up-wait{opacity:0;transform:translateY(16px)}:where(html[data-page="digital-marketing"]) .up-page .up-status{font-size:.8rem;color:#57657B;margin:12px 0}:where(html[data-page="digital-marketing"]) .up-page .up-status:empty{display:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){:where(html[data-page="digital-marketing"]) .up-page :is(.up-sector-card,.up-perspective){transition:transform .25s ease}:where(html[data-page="digital-marketing"]) .up-page :is(.up-sector-card,.up-perspective):hover{transform:translateY(-3px)}:where(html[data-page="digital-marketing"]) .up-page .ka-button:hover{transform:translateY(-2px)}}
@media(max-width:1190px){:where(html[data-page="digital-marketing"]) .up-page .up-hero{gap:30px}:where(html[data-page="digital-marketing"]) .up-page .up-engine li{width:150px}:where(html[data-page="digital-marketing"]) .up-page .up-engine-core{width:115px;height:115px;font-size:1.05rem}:where(html[data-page="digital-marketing"]) .up-page .up-note{font-size:1.2rem}}
@media(max-width:1023px){:where(html[data-page="digital-marketing"]) .up-page .up-hero{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-page .up-collage{max-width:640px;margin:auto;width:100%}:where(html[data-page="digital-marketing"]) .up-page .up-note{display:none}:where(html[data-page="digital-marketing"]) .up-page .up-grid4{grid-template-columns:1fr 1fr}:where(html[data-page="digital-marketing"]) .up-page .up-editorial{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-page .up-engine{max-width:650px;width:100%;margin:auto}:where(html[data-page="digital-marketing"]) .up-page .up-engine li{width:210px}:where(html[data-page="digital-marketing"]) .up-page .up-feature{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-page .up-feature>img{height:320px;min-height:0}:where(html[data-page="digital-marketing"]) .up-page .up-case{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-page .up-cta{padding:32px;gap:24px}}
@media(max-width:768px){:where(html[data-page="digital-marketing"]) .up-page .up-benefit-strip{grid-template-columns:1fr 1fr}:where(html[data-page="digital-marketing"]) .up-page .up-grid3{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-page .up-cta{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-page .up-cta>div:last-child{padding:0}:where(html[data-page="digital-marketing"]) .up-page .up-faq{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-page .up-engine li{width:170px}}
@media(max-width:600px){:where(html[data-page="digital-marketing"]) .up-page .up-section{padding:28px 0}:where(html[data-page="digital-marketing"]) .up-page .up-grid4{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-page .up-collage{gap:12px;padding:0}:where(html[data-page="digital-marketing"]) .up-page .up-collage figure:first-child{grid-row:auto;margin:0}:where(html[data-page="digital-marketing"]) .up-page .up-collage figure:last-child{grid-column:auto;width:100%;margin:0}:where(html[data-page="digital-marketing"]) .up-page .up-collage img,:where(html[data-page="digital-marketing"]) .up-page .up-collage figure:first-child img,:where(html[data-page="digital-marketing"]) .up-page .up-collage figure:last-child img{height:190px}:where(html[data-page="digital-marketing"]) .up-page .up-collage figcaption{font-size:.65rem;padding:8px;left:5px;right:5px;bottom:5px}:where(html[data-page="digital-marketing"]) .up-page .up-feature-content{padding:24px 20px}:where(html[data-page="digital-marketing"]) .up-page .up-feature-list{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-page .up-feature>img{height:240px}:where(html[data-page="digital-marketing"]) .up-page .up-engine-panel{padding:24px 20px}:where(html[data-page="digital-marketing"]) .up-page .up-engine{height:auto;display:flex;flex-direction:column;gap:18px}:where(html[data-page="digital-marketing"]) .up-page .up-engine::before{display:none}:where(html[data-page="digital-marketing"]) .up-page .up-engine-core{position:static;transform:none;margin:auto;width:130px;height:130px}:where(html[data-page="digital-marketing"]) .up-page .up-engine ol{display:grid;gap:12px}:where(html[data-page="digital-marketing"]) .up-page .up-engine li:nth-child(n){position:static;width:100%;transform:none;padding:16px}:where(html[data-page="digital-marketing"]) .up-page .up-case{padding:26px 22px}:where(html[data-page="digital-marketing"]) .up-page .up-case-steps{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-page .up-case-steps>div{padding:14px 0;border-left:0;border-top:1px solid #FFFFFF24}:where(html[data-page="digital-marketing"]) .up-page .up-cta{padding:28px 22px}:where(html[data-page="digital-marketing"]) .up-page .up-cta .ka-button{width:100%}:where(html[data-page="digital-marketing"]) .up-page .up-stat{padding:20px}:where(html[data-page="digital-marketing"]) .up-page .up-feature-controls{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="digital-marketing"]) .up-page .up-section,:where(html[data-page="digital-marketing"]) .up-page .up-white,:where(html[data-page="digital-marketing"]) .up-page .ka-button{transition:none!important;transform:none!important;opacity:1!important}}
:where(html[data-page="digital-marketing"]) .up-page .up-portrait{position:relative;padding:15px 25px}:where(html[data-page="digital-marketing"]) .up-page .up-portrait>img{width:100%;height:420px;object-fit:cover;border-radius:24px}:where(html[data-page="digital-marketing"]) .up-page .up-float{position:absolute;background:white;padding:16px;border-radius:16px;box-shadow:0 10px 24px #14243D0A;max-width:220px}:where(html[data-page="digital-marketing"]) .up-page .up-float:nth-of-type(1){top:0;left:0}:where(html[data-page="digital-marketing"]) .up-page .up-float:nth-of-type(2){right:0;top:46%}:where(html[data-page="digital-marketing"]) .up-page .up-float:nth-of-type(3){bottom:0;left:8%}:where(html[data-page="digital-marketing"]) .up-page .up-portrait .up-note{right:0;top:-30px}:where(html[data-page="digital-marketing"]) .up-contact .up-benefit-strip{grid-template-columns:repeat(3,minmax(0,1fr))}:where(html[data-page="digital-marketing"]) .up-page .up-booking{display:grid;grid-template-columns:.85fr 1.15fr;padding:36px;gap:40px}:where(html[data-page="digital-marketing"]) .up-page .up-calendar-col{padding-right:32px;border-right:1px solid #E8EDF3}:where(html[data-page="digital-marketing"]) .up-page .up-booking h2{font-size:1.9rem}:where(html[data-page="digital-marketing"]) .up-page .up-booking p{font-size:.875rem;color:#57657B;margin:14px 0}:where(html[data-page="digital-marketing"]) .up-page .up-calendar{border:1px solid #E3EAF2;border-radius:18px;padding:18px;margin:26px 0 20px}:where(html[data-page="digital-marketing"]) .up-page .up-calendar-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px}:where(html[data-page="digital-marketing"]) .up-page .up-calendar-heading strong{font-size:1rem}:where(html[data-page="digital-marketing"]) .up-page .up-calendar-heading>div{display:flex}:where(html[data-page="digital-marketing"]) .up-page .up-calendar-heading button{width:36px;height:44px;background:transparent;color:#14243D;border-radius:10px}:where(html[data-page="digital-marketing"]) .up-page .up-calendar-heading button:disabled{opacity:.3;cursor:default}:where(html[data-page="digital-marketing"]) .up-page .up-calendar-week,:where(html[data-page="digital-marketing"]) .up-page .up-calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center}:where(html[data-page="digital-marketing"]) .up-page .up-calendar-week{font-size:.65rem;color:#57657B;margin-bottom:7px}:where(html[data-page="digital-marketing"]) .up-page .up-calendar-days button{min-height:44px;min-width:0;width:100%;background:white;color:#14243D;border-radius:50%;font-size:.8rem}:where(html[data-page="digital-marketing"]) .up-page .up-calendar-days button:disabled{color:#A8AFBB;cursor:default}:where(html[data-page="digital-marketing"]) .up-page .up-calendar-days button[aria-pressed=true]{background:#14243D;color:white}:where(html[data-page="digital-marketing"]) .up-page .up-time-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}:where(html[data-page="digital-marketing"]) .up-page .up-time-options button{border:1px solid #DDE5EF;border-radius:12px;min-height:44px;font-size:.8rem;background:white;color:#14243D}:where(html[data-page="digital-marketing"]) .up-page .up-time-options button[aria-pressed=true]{background:#14243D;color:white}:where(html[data-page="digital-marketing"]) .up-page .up-time-options button:disabled{opacity:.4;cursor:default}:where(html[data-page="digital-marketing"]) .up-page .up-calendar-label{font-size:.8rem;font-weight:600}:where(html[data-page="digital-marketing"]) .up-page .up-booking .up-calendar-help{font-size:.72rem}:where(html[data-page="digital-marketing"]) .up-page .up-form{min-width:0}:where(html[data-page="digital-marketing"]) .up-page .up-contact-card{padding:26px;display:flex;align-items:flex-start;flex-direction:column}:where(html[data-page="digital-marketing"]) .up-page .up-contact-card h3{margin:20px 0 10px;font-size:1.2rem}:where(html[data-page="digital-marketing"]) .up-page .up-contact-card p{font-size:.82rem;color:#57657B;margin-bottom:20px}:where(html[data-page="digital-marketing"]) .up-page .up-contact-card>a{font-size:.8rem;color:#0060CF;min-height:44px;display:flex;align-items:center;gap:8px;margin-top:auto;overflow-wrap:anywhere}:where(html[data-page="digital-marketing"]) .up-page .up-office{display:grid;grid-template-columns:.8fr 1.2fr;gap:38px;align-items:center}:where(html[data-page="digital-marketing"]) .up-page .up-address{padding:24px;max-width:430px}:where(html[data-page="digital-marketing"]) .up-page .up-address address{font-style:normal;font-size:.875rem;color:#57657B;margin:16px 0}:where(html[data-page="digital-marketing"]) .up-page .up-map iframe{border:0;border-radius:24px;width:100%;height:360px;background:#EAF1F5}:where(html[data-page="digital-marketing"]) .up-page .up-map>a{display:inline-flex;align-items:center;min-height:44px;font-size:.8rem;color:#0060CF}:where(html[data-page="digital-marketing"]) .up-page .up-clear{padding:10px 0;color:#0060CF;font-size:.75rem;background:transparent;min-height:44px}:where(html[data-page="digital-marketing"]) .up-page .up-calendar[hidden],:where(html[data-page="digital-marketing"]) .up-page .up-preferences[hidden]{display:none}
@media(max-width:1023px){:where(html[data-page="digital-marketing"]) .up-page .up-portrait{max-width:620px;width:100%;margin:auto}:where(html[data-page="digital-marketing"]) .up-page .up-booking{padding:28px;gap:26px}:where(html[data-page="digital-marketing"]) .up-page .up-calendar-col{padding-right:22px}:where(html[data-page="digital-marketing"]) .up-page .up-booking h2{font-size:1.6rem}}
@media(max-width:900px){:where(html[data-page="digital-marketing"]) .up-page .up-booking{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-page .up-calendar-col{padding:0 0 28px;border-right:0;border-bottom:1px solid #E8EDF3}:where(html[data-page="digital-marketing"]) .up-page .up-calendar,:where(html[data-page="digital-marketing"]) .up-page .up-preferences{max-width:460px}:where(html[data-page="digital-marketing"]) .up-page .up-office{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-page .up-address{max-width:none}}
@media(max-width:600px){:where(html[data-page="digital-marketing"]) .up-page .up-portrait{padding:0;display:grid;grid-template-columns:1fr;gap:10px}:where(html[data-page="digital-marketing"]) .up-page .up-portrait>img{height:310px}:where(html[data-page="digital-marketing"]) .up-page .up-float:nth-of-type(n){position:static;max-width:none;padding:12px}:where(html[data-page="digital-marketing"]) .up-contact .up-benefit-strip{grid-template-columns:1fr;gap:12px}:where(html[data-page="digital-marketing"]) .up-page .up-booking{padding:24px 16px}:where(html[data-page="digital-marketing"]) .up-page .up-calendar{padding:12px}:where(html[data-page="digital-marketing"]) .up-page .up-calendar-week,:where(html[data-page="digital-marketing"]) .up-page .up-calendar-days{gap:0}:where(html[data-page="digital-marketing"]) .up-page .up-map iframe{height:280px}:where(html[data-page="digital-marketing"]) .up-page .up-contact-card{padding:24px}}
:where(html[data-page="digital-marketing"]) .up-page form input[type=hidden]{display:none!important}
:where(html[data-page="digital-marketing"]) .up-page .up-career-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}:where(html[data-page="digital-marketing"]) .up-page .up-career-benefits article{padding:22px 18px}:where(html[data-page="digital-marketing"]) .up-page .up-career-benefits h3{font-size:.95rem;margin:15px 0 10px}:where(html[data-page="digital-marketing"]) .up-page .up-career-benefits p{font-size:.78rem;color:#57657B}:where(html[data-page="digital-marketing"]) .up-page .up-culture{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}:where(html[data-page="digital-marketing"]) .up-page .up-life-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}:where(html[data-page="digital-marketing"]) .up-page .up-life-photos img{border-radius:20px;height:180px;width:100%;object-fit:cover}:where(html[data-page="digital-marketing"]) .up-page .up-life-photos img:first-child{grid-column:1/-1;height:290px}:where(html[data-page="digital-marketing"]) .up-page .up-culture-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:30px}:where(html[data-page="digital-marketing"]) .up-page .up-culture-values .up-chip{font-size:.85rem}:where(html[data-page="digital-marketing"]) .up-page .up-role-heading{display:flex;justify-content:space-between;align-items:center;gap:24px}:where(html[data-page="digital-marketing"]) .up-page .up-role-filter label{display:block;font-size:.7rem;margin-bottom:6px;color:#57657B}:where(html[data-page="digital-marketing"]) .up-page .up-role-filter select{border:1px solid #DDE5EF;border-radius:30px;padding:12px 34px 12px 16px;min-height:44px;background:white;max-width:100%;font-size:.8rem}:where(html[data-page="digital-marketing"]) .up-page .up-roles{border-radius:22px;background:white;border:1px solid #E8EDF3;overflow:hidden}:where(html[data-page="digital-marketing"]) .up-page .up-roles details+details{border-top:1px solid #E8EDF3}:where(html[data-page="digital-marketing"]) .up-page .up-roles summary{display:grid;grid-template-columns:1.5fr 1fr auto;gap:20px;align-items:center;min-height:95px;list-style:none;cursor:pointer;padding:20px 24px}:where(html[data-page="digital-marketing"]) .up-page .up-roles summary small{display:block;font-weight:400;color:#57657B;margin-top:4px;font-size:.75rem}:where(html[data-page="digital-marketing"]) .up-page .up-role-kind{font-size:.75rem;color:#57657B}:where(html[data-page="digital-marketing"]) .up-page .up-role-details-label{padding:11px 20px;border-radius:30px;background:#F8C72E;font-size:.75rem;font-weight:600;white-space:nowrap}:where(html[data-page="digital-marketing"]) .up-page .up-roles details>div{padding:0 24px 26px}:where(html[data-page="digital-marketing"]) .up-page .up-roles details p{color:#57657B;font-size:.9rem;max-width:820px;margin:10px 0 20px}:where(html[data-page="digital-marketing"]) .up-page .up-hiring{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:17px;list-style:none}:where(html[data-page="digital-marketing"]) .up-page .up-hiring li{padding:20px 16px;position:relative}:where(html[data-page="digital-marketing"]) .up-page .up-hiring h3{font-size:1rem;margin:15px 0 10px}:where(html[data-page="digital-marketing"]) .up-page .up-hiring p{font-size:.75rem;color:#57657B}:where(html[data-page="digital-marketing"]) .up-page .up-hiring li:not(:last-child)::after{content:'→';position:absolute;right:-14px;top:45%;z-index:1}:where(html[data-page="digital-marketing"]) .up-page .up-hiring .ka-step-number{width:36px;height:36px;font-size:.9rem}
@media(max-width:1190px){:where(html[data-page="digital-marketing"]) .up-page .up-career-benefits{grid-template-columns:1fr 1fr}:where(html[data-page="digital-marketing"]) .up-page .up-hiring{grid-template-columns:repeat(3,minmax(0,1fr))}:where(html[data-page="digital-marketing"]) .up-page .up-hiring li::after{display:none}}
@media(max-width:1023px){:where(html[data-page="digital-marketing"]) .up-page .up-culture{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-page .up-career-benefits{grid-template-columns:repeat(3,minmax(0,1fr))}:where(html[data-page="digital-marketing"]) .up-page .up-life-photos{max-width:680px;width:100%;margin:auto}:where(html[data-page="digital-marketing"]) .up-page .up-role-heading{align-items:start}}
@media(max-width:768px){:where(html[data-page="digital-marketing"]) .up-page .up-career-benefits{grid-template-columns:1fr 1fr}:where(html[data-page="digital-marketing"]) .up-page .up-roles summary{grid-template-columns:1fr auto}:where(html[data-page="digital-marketing"]) .up-page .up-role-kind{grid-column:1}:where(html[data-page="digital-marketing"]) .up-page .up-role-details-label{grid-column:2;grid-row:1/3}:where(html[data-page="digital-marketing"]) .up-page .up-role-heading{display:block}:where(html[data-page="digital-marketing"]) .up-page .up-role-filter{margin-bottom:20px}}
@media(max-width:600px){:where(html[data-page="digital-marketing"]) .up-page .up-career-benefits{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-page .up-life-photos img:first-child{height:230px}:where(html[data-page="digital-marketing"]) .up-page .up-life-photos img{height:140px}:where(html[data-page="digital-marketing"]) .up-page .up-culture-values{gap:20px 10px}:where(html[data-page="digital-marketing"]) .up-page .up-culture-values .up-chip{font-size:.75rem;gap:7px}:where(html[data-page="digital-marketing"]) .up-page .up-culture-values .ka-icon-chip{width:32px;height:32px}:where(html[data-page="digital-marketing"]) .up-page .up-roles summary{grid-template-columns:1fr;padding:20px}:where(html[data-page="digital-marketing"]) .up-page .up-role-details-label{grid-column:1;grid-row:auto;text-align:center}:where(html[data-page="digital-marketing"]) .up-page .up-role-kind{grid-column:1}:where(html[data-page="digital-marketing"]) .up-page .up-hiring{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-page .up-hiring li{display:grid;grid-template-columns:40px 1fr;gap:10px 14px;padding:20px}:where(html[data-page="digital-marketing"]) .up-page .up-hiring h3{margin:4px 0 0}:where(html[data-page="digital-marketing"]) .up-page .up-hiring p{grid-column:2}:where(html[data-page="digital-marketing"]) .up-page .up-roles details>div{padding:0 20px 22px}}
:where(html[data-page="digital-marketing"]) .up-page [hidden]{display:none!important}:where(html[data-page="digital-marketing"]) .up-page .up-reveal{transition:opacity .55s ease,transform .55s ease}:where(html[data-page="digital-marketing"]) .up-page .up-reveal.up-wait{opacity:0;transform:translateY(16px)}
@media(prefers-reduced-motion:reduce){:where(html[data-page="digital-marketing"]) .up-page .up-reveal{opacity:1!important;transform:none!important;transition:none!important}}

:where(html[data-page="digital-marketing"]) .up-digital-marketing{background:#FCFDFD;color:#14243D}:where(html[data-page="digital-marketing"]) .up-digital-marketing .ka-header{background:#FCFDFD}:where(html[data-page="digital-marketing"]) .up-digital-marketing .up-section{padding:27px 0}:where(html[data-page="digital-marketing"]) .up-digital-marketing .up-eyebrow{font-size:.69rem;letter-spacing:.095em;padding:2px 7px;border-radius:5px;margin-bottom:14px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .up-heading{margin-bottom:20px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .up-heading h2{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.12}:where(html[data-page="digital-marketing"]) .up-digital-marketing .up-heading>p:last-child:not(.up-eyebrow){font-size:1rem;line-height:1.6;margin-top:16px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .ka-button{font-size:.8rem;padding:13px 24px;min-height:48px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .up-mark{padding:0 .07em}:where(html[data-page="digital-marketing"]) .up-digital-marketing .up-note{font-size:1.35rem;right:0;top:0}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-hero{display:grid;grid-template-columns:1.13fr 1fr;gap:40px;align-items:center;padding:18px 32px 8px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-hero h1{font-size:clamp(2.1rem,3.65vw,3.4rem);line-height:1.11;letter-spacing:-.035em;margin-bottom:22px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-intro{font-size:1.025rem;line-height:1.65;color:#526887;max-width:49ch;margin-bottom:26px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-hero .ka-actions{gap:16px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:35px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-values .up-chip{gap:8px;font-size:.7rem;line-height:1.4}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-values .ka-icon-chip{width:34px;height:38px;border-radius:10px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-values svg{width:20px;height:20px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-visual{position:relative;min-width:0;padding:12px 48px 72px 32px;isolation:isolate}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-hero-photo{width:100%;height:405px;object-fit:cover;object-position:58% 40%;border-radius:18px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-float{position:absolute;display:flex;align-items:center;gap:14px;background:white;border-radius:16px;padding:18px;box-shadow:0 15px 40px #14243D0D;z-index:1}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-float>svg:not([viewBox="0 0 200 80"]){width:34px;height:34px;color:#16A489;flex:none;padding:5px;background:#E0FAF1;border-radius:9px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-float span{display:block;font-size:.72rem;font-weight:600}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-float strong{display:block;font:700 1.45rem/1.2 var(--font-heading);margin:4px 0}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-float small{display:block;font-size:.62rem;color:#687D97}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-traffic{left:0;top:12px;min-width:175px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-leads{right:-8px;top:190px;min-width:178px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-leads>svg{background:#EEE5FF!important;color:#8950DF!important}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-roi{right:14px;bottom:26px;min-width:165px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-performance{bottom:26px;left:48px;width:195px;display:block;padding:16px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-performance>svg{display:block;width:100%;height:78px;margin-top:13px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-performance small{font-size:.59rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-visual .up-note{right:-6px;top:-4px;font-size:1.15rem;max-width:100px;transform:translateX(20%) rotate(-7deg)}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #channels{padding-top:3px;padding-bottom:24px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-channel-strip{border:1px solid #EFF2F6;border-radius:14px;padding:14px 30px 24px;background:white;box-shadow:0 8px 30px #14243D04}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-channel-strip .up-eyebrow{font-size:.59rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-channel-strip ul{display:flex;justify-content:space-between;align-items:center;list-style:none;gap:20px;flex-wrap:wrap}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-channel-strip li{font:700 1.15rem/1.2 var(--font-heading);color:#294F7C}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-channel-strip .dm-channel-1{color:#477ABE}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-channel-strip .dm-channel-2{color:#A44375}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-channel-strip .dm-channel-3{color:#BD313B}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-services{display:grid;grid-template-columns:.95fr 1.4fr;gap:38px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-card{background:white;border:1px solid #F0F3F6;border-radius:13px;padding:22px;box-shadow:0 9px 28px #14243D05;min-width:0}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-card h3{font-size:1.05rem;line-height:1.2;margin:14px 0 8px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-card p{font-size:.85rem;line-height:1.55;color:#526887}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-card .ka-icon-chip{width:42px;height:42px;border-radius:10px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-card .ka-icon-chip svg{width:24px;height:24px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-subtitle{display:block;font-size:.75rem;margin:-3px 0 8px;line-height:1.35}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-navy{background:#082849;border-radius:18px;color:white;padding:36px 40px;overflow:hidden;position:relative}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-navy h2{font-size:clamp(1.8rem,2.65vw,2.45rem);line-height:1.16;color:white;letter-spacing:-.025em}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-navy h2 span{color:#F8C72E}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-navy p:not(.up-eyebrow){font-size:.97rem;color:#E2EAF3;line-height:1.55;margin:16px 0 22px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-navy .up-eyebrow{color:#C6DEF0;background:#FFFFFF09}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-why{display:grid;grid-template-columns:1.3fr .75fr .62fr;gap:24px;align-items:center;padding-block:30px;min-height:350px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-phone{position:relative;height:315px;display:grid;place-items:center}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-phone-shell{width:192px;border:7px solid #101E30;outline:2px solid #687A8B;border-radius:30px;overflow:hidden;background:white;transform:rotate(-9deg) translateY(20px);height:337px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-phone-shell>img{width:100%;height:255px;object-fit:cover;object-position:50% 50%}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-phone-caption{padding:11px;background:white;color:#14243D}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-phone-caption strong{display:block;font-size:.7rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-phone-caption span{font-size:.55rem;color:#687D97;display:block;margin-top:4px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-platforms{position:absolute;left:-9px;top:75px;display:grid;gap:10px;transform:rotate(-9deg)}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-platforms span{display:grid;place-items:center;width:37px;height:37px;background:#1380F9;color:white;border-radius:12px;font-weight:700;font-size:1.5rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-platforms span:nth-child(2){background:#D4457D}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-platforms span:nth-child(3){background:white;color:#4285F4}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-platforms span:nth-child(4){background:#DD3028;font-size:1rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-outcomes{display:grid;gap:24px;list-style:none}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-outcomes .up-chip{gap:12px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-outcomes strong{font:700 1.4rem/1.2 var(--font-heading);display:block}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-outcomes small{font-size:.67rem;font-weight:400;line-height:1.5;display:block;color:#DFE8F5;margin-top:4px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-outcomes .ka-icon-chip{width:38px;height:38px}
:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-process-heading{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:80px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-process-heading>p{font-size:.93rem;line-height:1.65;color:#526887;max-width:440px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-process{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;list-style:none}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-process li{position:relative;padding:21px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-process .up-chip{font-size:.7rem;gap:10px;color:#0060CF}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-process .ka-icon-chip{width:35px;height:35px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-step-arrow{position:absolute;right:-17px;top:45%;z-index:1;font-size:1.65rem;color:#102B4E}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-section-top{display:flex;justify-content:space-between;align-items:center;gap:24px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-controls{display:flex;gap:8px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-controls[hidden]{display:none}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-controls button{border:0;box-shadow:0 4px 15px #14243D07;flex:none}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-controls button:disabled{opacity:.35;cursor:default}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px)/3);gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0;padding-bottom:14px;scrollbar-width:thin;min-width:0}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-carousel:focus-visible{outline:3px solid #2E82FE;outline-offset:4px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-carousel>article{scroll-snap-align:start;align-self:start}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-case{padding:0;overflow:hidden}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-case>img{width:100%;height:165px;object-fit:cover}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-case>div{padding:0 22px 20px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-case .up-eyebrow{font-size:.6rem;margin:0 0 10px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-case h3{font-size:1.15rem;margin:0 0 10px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-case details{margin-top:12px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-case summary{color:#0060CF;font-size:.85rem;font-weight:600;cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;gap:10px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-case details>p{padding-top:8px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-case details a{display:flex;align-items:center;gap:8px;min-height:44px;font-size:.8rem;color:#0060CF;margin-top:8px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-case details a svg{width:18px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-industries{display:grid;grid-template-columns:.85fr 1.65fr;gap:28px;align-items:center}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-industries .up-heading{margin:0}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-industries h2{font-size:2rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-industries ul{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-industries a{background:white;border-radius:13px;box-shadow:0 8px 22px #14243D06;padding:16px 8px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-size:.66rem;font-weight:600}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-industries .ka-icon-chip{width:38px;height:38px;border-radius:10px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-quote{padding:22px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-quote>p{font-size:.875rem;line-height:1.65;min-height:84px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-quote-person{display:flex;gap:12px;align-items:center;margin-top:22px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-quote-person img{width:38px;height:38px;object-fit:cover;border-radius:50%}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-quote-person strong{font-size:.78rem;display:block}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-quote-person small{font-size:.7rem;display:block;color:#687D97;margin-top:3px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-faq-layout{display:grid;grid-template-columns:.7fr 1.5fr;gap:32px;align-items:start}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-faq-layout .up-heading h2{font-size:2rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .up-faq{gap:10px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .up-faq details{padding:0 14px;border-radius:10px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .up-faq summary{font-size:.78rem;min-height:48px;padding:10px 0;gap:14px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .up-faq details>p{font-size:.82rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-faq-layout .ka-button{font-size:.75rem;padding:10px 16px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-final{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-final>div:last-child{position:relative;padding-right:80px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-final .up-note{right:-10px;top:-30px;color:#F8C72E;font-size:1.15rem;max-width:100px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-final .up-note svg{stroke:#F8C72E}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-final .ka-button{white-space:nowrap}:where(html[data-page="digital-marketing"]) .up-digital-marketing #next-step{padding-top:0;padding-bottom:30px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-service-grid>.dm-card,:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-industries a{transition:transform .22s ease}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-service-grid>.dm-card:hover,:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-industries a:hover{transform:translateY(-3px)}}
@media(max-width:1190px){:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-hero{padding-inline:0;gap:25px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-visual{padding-right:35px;padding-left:28px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-hero .ka-button{font-size:.72rem;padding-inline:16px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-values{gap:8px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-values .up-chip{font-size:.63rem;gap:6px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-visual .up-note{display:none}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-service-grid{gap:10px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-service-grid .dm-card{padding:17px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-services{gap:24px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-why{padding:28px;grid-template-columns:1.25fr .8fr .65fr;gap:20px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-phone-shell{width:165px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-platforms{left:-5px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-process li{padding:16px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-final>div:last-child{padding:0}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-final .up-note{display:none}}
@media(max-width:1023px){:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-hero{grid-template-columns:1fr;gap:28px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-hero h1{font-size:clamp(2.5rem,5.5vw,3.4rem)}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-intro{max-width:60ch}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-values{max-width:580px;gap:20px;margin-top:26px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-values .up-chip{font-size:.75rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-visual{width:100%;max-width:540px;margin:auto}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-services{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-services .up-heading{max-width:640px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-service-grid .dm-card{padding:22px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-why{grid-template-columns:1.3fr .8fr}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-outcomes{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-top:12px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-phone{height:290px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-phone-shell{height:300px;transform:rotate(-8deg);width:180px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-phone-shell>img{height:220px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-outcomes strong{font-size:1.15rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-outcomes .up-chip{gap:8px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-process{grid-template-columns:repeat(3,minmax(0,1fr))}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-step-arrow{display:none}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-industries{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-faq-layout{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-faq-layout>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:24px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-quote-person strong{font-size:.72rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-quote-person{gap:8px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-channel-strip ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center;gap:20px}}
@media(max-width:900px){:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-carousel{grid-auto-columns:calc((100% - 16px)/2)}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-process-heading{gap:30px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-final{grid-template-columns:1fr;gap:10px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-quote>p{min-height:0}}
@media(max-width:768px){:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-why{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-phone{height:310px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-platforms{left:calc(50% - 130px)}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-phone-shell{transform:none}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-outcomes{grid-template-columns:1fr 1fr}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-service-grid{grid-template-columns:1fr 1fr}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-process-heading{grid-template-columns:1fr;gap:0}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-process-heading>p{margin-bottom:22px;max-width:600px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-industries ul{grid-template-columns:repeat(3,minmax(0,1fr))}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-industries a{font-size:.8rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-faq-layout>div:first-child{display:block}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-faq-layout>div:first-child .ka-button{margin-bottom:10px}}
@media(max-width:600px){:where(html[data-page="digital-marketing"]) .up-digital-marketing .up-section{padding:24px 0}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-hero{padding:0}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-hero h1{font-size:clamp(1.9rem,7.8vw,2.8rem)}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-intro{font-size:.97rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-values{grid-template-columns:1fr 1fr;gap:18px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-values .up-chip{font-size:.75rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-visual{padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:450px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-hero-photo{grid-column:1/-1;height:330px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-float{position:static;min-width:0;width:auto;padding:14px;gap:10px;box-shadow:0 7px 20px #14243D08;border:1px solid #EDF1F6;flex-wrap:wrap}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-float strong{font-size:1.3rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-float span{font-size:.7rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-performance{width:auto;display:block}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-roi{align-content:center}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-channel-strip{padding:18px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-channel-strip ul{grid-template-columns:1fr 1fr;gap:20px 12px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-channel-strip li{font-size:1rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-service-grid{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-service-grid .dm-card{padding:23px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-card p{font-size:.9375rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-navy{padding:28px 22px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-navy h2{font-size:1.8rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-why .ka-button{width:100%}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-outcomes{gap:22px 12px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-outcomes .up-chip{align-items:flex-start}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-outcomes .ka-icon-chip{width:30px;height:30px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-outcomes strong{font-size:1rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-outcomes small{font-size:.7rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-process{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-process li{padding:22px;display:grid;grid-template-columns:65px 1fr;gap:8px 18px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-process li>div{grid-row:1/3}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-process h3{margin:0}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-process .up-chip{flex-direction:column;align-items:center;gap:7px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-carousel{grid-auto-columns:100%}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-section-top{align-items:flex-start;gap:10px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-section-top h2{font-size:1.8rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-controls{gap:5px;padding-top:22px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-controls button{width:40px;min-width:40px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-case>img{height:195px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-case h3{font-size:1.25rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-case>div{padding:0 22px 22px}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-industries ul{grid-template-columns:repeat(2,minmax(0,1fr))}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-quote-person strong{font-size:.85rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-quote-person small{font-size:.75rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-faq-layout .up-faq{grid-template-columns:1fr}:where(html[data-page="digital-marketing"]) .up-digital-marketing .up-faq summary{font-size:.85rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-final .ka-button{white-space:normal;width:100%}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-final>div:last-child{width:100%}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-card,:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-industries a{transition:none!important;transform:none!important}}
:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-carousel>article{align-self:stretch}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-case{display:flex;flex-direction:column}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-case>div{flex:1}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-quote{display:flex;flex-direction:column}:where(html[data-page="digital-marketing"]) .up-digital-marketing .dm-quote-person{margin-top:auto;padding-top:22px}
/* Testimonial section: natural-height text and a separate, non-shrinking attribution row. */
:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials{padding-top:18px;padding-bottom:32px}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .dm-section-top{align-items:center;margin-bottom:18px}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .up-heading{margin-bottom:0;min-width:0}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .up-heading h2{font-size:clamp(1.65rem,2.45vw,2.2rem);line-height:1.16;max-width:27ch}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .up-eyebrow{margin-bottom:12px}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .dm-controls{flex-shrink:0;padding-top:0}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .dm-carousel{grid-auto-rows:auto;align-items:stretch;gap:18px;grid-auto-columns:calc((100% - 36px)/3);padding-bottom:18px}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .dm-quote{display:grid;grid-template-rows:1fr auto;align-content:start;row-gap:20px;padding:24px;min-width:0;height:auto;max-height:none;position:relative;border-radius:14px;border:1px solid #E8EDF2;box-shadow:0 6px 20px #14243D05;overflow:visible}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .dm-quote>p{display:block;position:static;float:none;min-height:0;height:auto;max-height:none;margin:0;padding:0;font-size:.9rem;line-height:1.7;overflow-wrap:anywhere;white-space:normal;color:#526887;transform:none}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .dm-quote-person{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px;position:static;float:none;margin:0;padding:0;min-width:0;transform:none}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .dm-quote-person img{display:block;width:40px;height:40px;min-width:40px;object-fit:cover;aspect-ratio:1;border-radius:50%;margin:0}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .dm-quote-person>div{min-width:0}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .dm-quote-person strong{display:block;font-size:.8rem;line-height:1.5;white-space:normal;overflow-wrap:anywhere;margin:0}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .dm-quote-person small{display:block;font-size:.72rem;line-height:1.5;margin-top:3px;white-space:normal;overflow-wrap:anywhere;color:#64768C}
@media(max-width:900px){:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .dm-carousel{grid-auto-columns:calc((100% - 18px)/2)}}
@media(max-width:600px){:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .dm-section-top{align-items:flex-start;gap:12px}:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .up-heading h2{font-size:1.7rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .dm-controls{padding-top:28px;gap:4px}:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .dm-carousel{grid-auto-columns:100%}:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .dm-quote{padding:22px;row-gap:18px}:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .dm-quote>p{font-size:.9375rem}:where(html[data-page="digital-marketing"]) .up-digital-marketing #testimonials .dm-quote-person strong{font-size:.85rem}}

/* Digital Marketing: section 1 refinement only. */
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero{padding-top:38px;padding-bottom:32px}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-hero{gap:46px;align-items:center;padding-top:8px}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero h1{line-height:1.13;letter-spacing:-.04em;margin-bottom:24px}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-intro{max-width:45ch;line-height:1.7;color:#4F627E;margin-bottom:30px}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .up-eyebrow{margin-bottom:17px}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-values{margin-top:32px;gap:12px}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-values .up-chip{align-items:center;font-weight:600}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-visual{padding-bottom:86px}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-hero-photo{border:1px solid #E2E8EC;box-shadow:0 16px 36px #14243D0A;object-position:58% 38%}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-float{border:1px solid #E8EDF2;box-shadow:0 12px 32px #14243D0B;border-radius:15px;padding:17px}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-float small{color:#536981;line-height:1.45}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-traffic{top:23px;left:0}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-leads{right:0;top:178px}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-performance{left:18px;bottom:27px;width:184px}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-roi{right:0;bottom:10px;min-width:150px}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-roi strong{font-size:1.55rem}
@keyframes page-digital-marketing-dm-hero-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-hero>div:first-child>:is(.up-eyebrow,h1,.dm-intro,.ka-actions,.dm-values),:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-hero-photo,:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-float{animation:page-digital-marketing-dm-hero-arrive .6s cubic-bezier(.16,1,.3,1) both}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero h1{animation-delay:60ms}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-intro{animation-delay:120ms}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .ka-actions{animation-delay:180ms}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-values{animation-delay:240ms}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-hero-photo{animation-delay:100ms}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-traffic{animation-delay:220ms}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-leads{animation-delay:300ms}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-performance{animation-delay:380ms}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-roi{animation-delay:440ms}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .ka-button{transition:transform .2s ease,box-shadow .2s ease}
:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .ka-button:active{transform:translateY(1px)}
}
@media(max-width:1190px) and (min-width:1024px){:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-hero{gap:28px}:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-performance{width:165px;left:0}:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-roi{min-width:136px;padding:14px;gap:9px}}
@media(max-width:1023px){:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero{padding-top:24px}:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-hero{gap:30px}:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-intro{max-width:60ch}:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-visual{max-width:540px}}
@media(max-width:600px){:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero{padding-top:22px;padding-bottom:24px}:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-hero{gap:25px}:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero h1{margin-bottom:20px}:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-intro{margin-bottom:24px}:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-visual{padding:0;gap:12px}:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-float{padding:15px;width:auto;min-width:0}:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-performance{width:auto}:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-values{gap:18px;margin-top:25px}:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-hero-photo{height:320px}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero *{animation:none!important;transition:none!important}:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-float,:where(html[data-page="digital-marketing"]) .up-digital-marketing #hero .dm-hero-photo{transform:none!important;opacity:1!important}}

/* shared-chrome.css */
@scope (:where(html[data-page="digital-marketing"]) .shared-kx-header,:where(html[data-page="digital-marketing"])  .shared-kx-mobile-drawer,:where(html[data-page="digital-marketing"])  .shared-site-footer) {
:scope { --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif; --container-max: 1240px; --color-yellow: #F8C72E; --color-primary-navy: #14243D; --transition: all .2s ease; font-family: var(--font-body, 'Plus Jakarta Sans', 'Inter', sans-serif); line-height: 1.5; }
:where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(a) { text-decoration: none; }



:scope {
  --kx-navy: #13243D;
  --kx-deep-navy: #0D1B31;
  --kx-secondary-navy: #1B3152;
  --kx-gold: #F9BE22;
  --kx-gold-hover: #FFCA3A;
  --kx-green: #00D084;
  --kx-cyan: #52BCEB;
  --kx-soft-cyan: #EAF8FF;
  --kx-soft-gold: #FFF8DD;
  --kx-soft-green: #E8F8F0;
  --kx-white: #FFFFFF;
  --kx-gray: #F4F6FA;
  --kx-pill-bg: #EDF3FA;
  --kx-border: #E8EDF4;
  --kx-border-subtle: #F1F4F9;
  --kx-text-dark: #13243D;
  --kx-text-muted: #65748B;
  --kx-radius-pill: 9999px;
  --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
}


:scope.shared-kx-header,
.shared-kx-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: 1px solid rgba(232, 237, 244, 0.8);
  transition: all 0.25s ease;
}

:scope.shared-kx-header.scrolled,
.shared-kx-header.scrolled {
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

:scope.shared-kx-header.menu-open,
.shared-kx-header.menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

.shared-kx-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .shared-kx-container {
    padding: 0 16px;
  }
}

.shared-kx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
}


.shared-kx-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0F1D32;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

.shared-kx-logo-tech {
  color: #00D084;
  font-weight: 800;
}


.shared-kx-nav-menu {
  display: flex;
  align-items: center;
  background: #EDF3FA;
  padding: 4px 6px;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(220, 230, 242, 0.85);
  box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
  flex-shrink: 1;
}

.shared-kx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shared-kx-nav-item {
  position: relative;
}

.shared-kx-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--kx-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-nav-link:hover {
  color: #0F1D32;
  background: rgba(255, 255, 255, 0.7);
}

.shared-kx-nav-link.active {
  color: #0F1D32 !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
}

.shared-kx-nav-link::after,
.shared-kx-nav-link.active::after {
  display: none !important;
}

.shared-kx-chevron-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  stroke: currentColor;
}


.shared-kx-dropdown-wrapper {
  position: relative;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper.open .shared-kx-chevron-icon {
  transform: rotate(180deg);
}

.shared-kx-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 250px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
  border: 1px solid var(--kx-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  pointer-events: none;
  z-index: 100;
}

/* Invisible hover bridge to eliminate the 8px cursor gap */
.shared-kx-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
  background: transparent;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper.open .shared-kx-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.shared-kx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #13243D;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.shared-kx-dropdown-item:hover {
  background: #F0F7FF;
  color: #0F1D32;
}


.shared-kx-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.shared-kx-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0F1D32;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-btn-pill-navy:hover {
  background: #1B2E4B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
}

.shared-kx-btn-pill-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F9BE22;
  color: #0F1D32;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
}

.shared-kx-btn-pill-gold:hover {
  background: #FFCA3A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
}

.shared-kx-btn-pill-navy:active,
.shared-kx-btn-pill-gold:active,
.kx-modal-submit:active {
  transform: translateY(0) scale(0.98);
}


.shared-kx-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0F1D32;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.shared-kx-mobile-toggle:hover {
  background: #EDF3FA;
}

@media (max-width: 1240px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-navy {
    display: none;
  }
}

@media (max-width: 1100px) {
  .shared-kx-nav-menu {
    display: none;
  }

  .shared-kx-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .shared-kx-nav-inner {
    height: 70px;
    gap: 8px;
  }
  .shared-kx-logo {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .shared-kx-logo {
    font-size: 18px;
  }
  .shared-kx-nav-actions {
    gap: 6px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 7px 11px;
    font-size: 11.5px;
    gap: 4px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold svg {
    display: none;
  }
  .shared-kx-mobile-toggle {
    padding: 6px;
  }
}

@media (max-width: 360px) {
  .shared-kx-container {
    padding: 0 6px;
  }
  .shared-kx-nav-inner {
    gap: 2px;
  }
  .shared-kx-logo {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  .shared-kx-nav-actions {
    gap: 2px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 5px 6px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  .shared-kx-mobile-toggle {
    padding: 2px;
  }
}


:scope.shared-kx-mobile-drawer,
.shared-kx-mobile-drawer {
  position: fixed;
  top: var(--header-height, 78px);
  left: 0;
  width: 100%;
  height: calc(100dvh - var(--header-height, 78px));
  background: #FFFFFF !important;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 40px rgba(19, 36, 61, 0.12);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :scope.shared-kx-mobile-drawer,
  .shared-kx-mobile-drawer {
    top: var(--header-height, 70px);
    height: calc(100dvh - var(--header-height, 70px));
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

:scope.shared-kx-mobile-drawer.open,
:scope.shared-kx-mobile-drawer.active,
.shared-kx-mobile-drawer.open,
.shared-kx-mobile-drawer.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  pointer-events: auto;
}

.shared-kx-mobile-nav-link {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 650;
  color: #14243D;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 12px;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.shared-kx-mobile-nav-link:hover {
  background: #F8FAFC;
  color: #0E1B2F;
}

.shared-kx-mobile-nav-link.active {
  background: #F4F7FB !important;
  color: #0E1B2F !important;
  font-weight: 750 !important;
  border-left: 3px solid #F8C72E;
  padding-left: 13px;
}

.shared-kx-mobile-nav-link.shared-sub {
  margin-left: 12px;
  margin-right: 4px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 550;
  color: #556987;
  background: #F8FAFC;
  border-radius: 10px;
  border-left: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.shared-kx-mobile-nav-link.shared-sub::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94A3B8;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.shared-kx-mobile-nav-link.shared-sub:hover,
.shared-kx-mobile-nav-link.shared-sub.active {
  background: #EDF4FB;
  color: #0E1B2F;
  border-left-color: #F8C72E;
}

.shared-kx-mobile-nav-link.shared-sub.active::before {
  background: #F8C72E;
  transform: scale(1.4);
}

.shared-kx-mobile-drawer-footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #EEF2F6;
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-gold {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(248, 199, 46, 0.3);
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-navy {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
  border-radius: 9999px;
}


.kx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 49, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  padding: 20px;
}

.kx-modal-overlay.active,
.kx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.kx-modal-dialog {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
  border: 1px solid var(--kx-border);
  overflow: hidden;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.kx-modal-overlay.active .kx-modal-dialog,
.kx-modal-overlay.is-open .kx-modal-dialog {
  transform: scale(1) translateY(0);
}

.kx-modal-header {
  padding: 28px 32px 16px;
  position: relative;
}

.kx-modal-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--kx-navy);
  margin: 0 0 6px;
}

.kx-modal-subtitle {
  font-size: 14px;
  color: var(--kx-text-muted);
  margin: 0;
}

.kx-modal-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--kx-gray);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-navy);
  transition: background 0.2s ease, transform 0.2s ease;
}

.kx-modal-close:hover {
  background: #E2E8F0;
  transform: rotate(90deg);
}

.kx-modal-body {
  padding: 0 32px 32px;
}

.kx-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx-form-label {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kx-navy);
}

.kx-form-input,
.kx-form-textarea,
.kx-form-select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--kx-border);
  background: var(--kx-gray);
  color: var(--kx-navy);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.kx-form-input:focus,
.kx-form-textarea:focus,
.kx-form-select:focus {
  outline: none;
  border-color: var(--kx-navy);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
}

.kx-modal-submit {
  background: var(--kx-navy);
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.kx-modal-submit:hover {
  background: var(--kx-deep-navy);
  transform: translateY(-1px);
}


:scope.shared-site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
  position: relative;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

:scope.shared-site-footer .shared-container,
:scope.shared-site-footer .shared-kx-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

.shared-footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand {
  min-width: 0;
}

.shared-footer-brand .shared-brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand .shared-brand-logo .shared-dot {
  color: #2FB7A7;
}

.shared-footer-brand p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  max-width: 290px;
}

.shared-footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.shared-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.shared-footer-links a {
  font-size: 0.835rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.shared-footer-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

.shared-footer-follow-wrapper {
  margin-top: 24px;
}

.shared-footer-follow-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.shared-footer-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.shared-social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  text-decoration: none;
  transition: var(--transition);
}

.shared-social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

.shared-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  flex-wrap: wrap;
  gap: 12px;
}


@media (max-width: 1180px) {
  .nav-link {
    padding: 6px 9px;
    font-size: 0.82rem;
  }
  .btn-nav-phone {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}


@media (max-width: 1024px) {
  :scope {
    --header-height: 66px;
  }
  .nav-menu-wrapper,
  .btn-phone-desktop {
    display: none !important;
  }
  .hamburger-btn {
    display: flex !important;
  }
  .btn-cta-desktop {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .shared-footer-brand p {
    max-width: 100%;
  }
}


@media (max-width: 768px) {
  :scope {
    --header-height: 62px;
  }
  .btn-cta-desktop {
    display: none !important;
  }
  .shared-site-footer {
    padding: 46px 0 24px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding-bottom: 28px;
  }
}


@media (max-width: 540px) {
  :scope {
    --header-height: 58px;
  }
  .nav-container {
    padding: 0 14px;
  }
  .hamburger-btn {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  .hamburger-btn span {
    width: 20px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
  }
  .shared-footer-col-company {
    grid-column: 1;
  }
  .shared-footer-col-solutions {
    grid-column: 2;
  }
  .shared-footer-col-resources {
    grid-column: 1 / -1;
  }
  .shared-footer-col h5 {
    margin-bottom: 12px;
  }
  .shared-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


@media (max-width: 360px) {
  .shared-brand-logo {
    font-size: 1.15rem;
  }
  .mobile-nav-drawer {
    width: 90vw;
    padding: 18px 14px 22px;
  }
  .mobile-nav-link {
    font-size: 0.95rem;
  }
}
  
}
:where(html[data-page="digital-marketing"]) .shared-kx-mobile-drawer { visibility: hidden; }
:where(html[data-page="digital-marketing"]) .shared-kx-mobile-drawer.open { visibility: visible; }
:where(html[data-page="digital-marketing"]) .shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="digital-marketing"]) .shared-kx-btn-pill-navy:active,:where(html[data-page="digital-marketing"]) 
  .shared-kx-btn-pill-gold:active,:where(html[data-page="digital-marketing"]) 
  .kx-modal-submit:active { transform: none; }
}

/* page-upgrades.css */
:where(html[data-page="digital-marketing"]) body.rv-upgraded { --rv-navy:#102039; --rv-muted:#5e748f; --rv-gold:#f5a916; --rv-cream:#fbf7ef; font-family:'Plus Jakarta Sans','Inter',sans-serif; background:var(--rv-cream); }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-container { width:calc(100% - 80px); max-width:1240px; margin-inline:auto; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-section { scroll-margin-top:96px; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities) { padding-top:80px; padding-bottom:80px; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-section h2 { font-family:'Outfit','Plus Jakarta Sans',sans-serif!important; font-weight:800!important; font-size:clamp(30px,3.1vw,42px)!important; line-height:1.16!important; letter-spacing:-.04em!important; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-section h3 { font-family:'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.025em; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-section p { line-height:1.7; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-section[data-rv-surface="light"] { background:#fffdf8!important; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-section[data-rv-surface="light"]:nth-of-type(even) { background:#fff!important; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-section[data-rv-surface="light"] h2 { color:#102039; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-section :is(input,select,textarea) { border-radius:12px; font-family:'Plus Jakarta Sans','Inter',sans-serif; }
:where(html[data-page="digital-marketing"]) .rv-upgraded :is(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #21877b; outline-offset:4px; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-hero { background-color:#fbf7ef; background-image:radial-gradient(#d9d7cc .7px,transparent .7px); background-size:24px 24px; padding:44px 0 54px; border-bottom:1px solid #e9e6de; position:relative; overflow:hidden; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-hero-copy { min-width:0; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-eyebrow { display:flex; align-items:center; gap:9px; font:700 11px/1.4 'Plus Jakarta Sans','Inter',sans-serif; text-transform:uppercase; letter-spacing:.14em; color:#315373; margin:0 0 16px; }
:where(html[data-page="digital-marketing"]) .rv-eyebrow > span { width:7px; height:7px; border-radius:50%; background:#f5a916; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-hero h1 { font-family:'Outfit','Plus Jakarta Sans',sans-serif!important; font-size:clamp(40px,4.1vw,58px)!important; line-height:1.09!important; font-weight:800!important; letter-spacing:-.05em!important; color:#102039!important; margin:0 0 20px!important; max-width:100%; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-hero h1 em { font-style:normal; color:#c88409; text-decoration:underline; text-decoration-color:#f5a916; text-decoration-thickness:3px; text-underline-offset:8px; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-description { color:#5e748f; font:400 17px/1.75 'Plus Jakarta Sans','Inter',sans-serif; max-width:560px; margin:0 0 26px; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-actions { display:flex; gap:12px; flex-wrap:wrap; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-button { display:inline-flex; justify-content:center; align-items:center; gap:14px; padding:15px 21px; min-height:52px; border-radius:999px; font:700 13px/1.4 'Plus Jakarta Sans','Inter',sans-serif; text-decoration:none; color:#102039; border:1px solid #e2e7ee; transition:background .2s,transform .2s; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-button-primary { background:#ffc526; border-color:#ffc526; box-shadow:0 8px 20px #f5a91620; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-button-secondary { background:#fff; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-button:hover { transform:translateY(-2px); background:#fff0bd; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-button i { font-size:18px; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-hero-art { min-width:0; position:relative; padding:0; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-note { font:600 24px/1.15 Caveat,cursive; color:#315373; text-align:right; margin:14px 12px 0 0; transform:rotate(-3deg); }
:where(html[data-page="digital-marketing"]) .rv-note svg { display:inline-block; width:50px; height:28px; vertical-align:middle; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-pastel-0 { background:#fff2cb; color:#a97007; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-pastel-1 { background:#def7ee; color:#187d6b; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-pastel-2 { background:#e5efff; color:#2867c7; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-pastel-3 { background:#fbe4ef; color:#b83c73; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-pastel-4 { background:#ede5fc; color:#7250b2; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-icon { width:56px; height:56px; flex-shrink:0; display:grid; place-items:center; border-radius:18px; font-size:27px; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-capabilities { padding:46px 0 54px; background:#fff; border-bottom:1px solid #e9edf0; }
:where(html[data-page="digital-marketing"]) .rv-capabilities .rv-eyebrow { margin-bottom:14px; }
:where(html[data-page="digital-marketing"]) .rv-capabilities h2 { max-width:1000px; color:#102039; margin:0 0 32px; }
:where(html[data-page="digital-marketing"]) .rv-capability-grid { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); gap:26px; }
:where(html[data-page="digital-marketing"]) .rv-capability { display:flex; align-items:flex-start; gap:15px; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-capability h3 { font-size:16px; line-height:1.3; color:#102039; margin:0 0 8px; }
:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-capability p { font:400 13px/1.6 'Plus Jakarta Sans','Inter',sans-serif; color:#5e748f; margin:0; }
:where(html[data-page="digital-marketing"]) .rv-orbit { position:relative; width:100%; max-width:510px; aspect-ratio:1.12; margin:auto; }
:where(html[data-page="digital-marketing"]) .rv-orbit-ring { position:absolute; width:70%; height:76%; top:12%; left:15%; border:1.5px solid #e9b448; border-radius:50%; }
:where(html[data-page="digital-marketing"]) .rv-orbit-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:37%; aspect-ratio:1; border-radius:50%; background:#102039; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font:800 24px/1.15 'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.04em; box-shadow:0 12px 30px #10203915; text-align:center; }
:where(html[data-page="digital-marketing"]) .rv-orbit-core span { color:#26b794; font-size:22px; }
:where(html[data-page="digital-marketing"]) .rv-orbit-node { position:absolute; left:calc(50% + cos(calc(var(--i)*360deg/var(--count) - 90deg))*37%); top:calc(50% + sin(calc(var(--i)*360deg/var(--count) - 90deg))*37%); transform:translate(-50%,-50%); width:25%; aspect-ratio:1; border:3px solid #fff; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; box-shadow:0 6px 22px #10203906; }
:where(html[data-page="digital-marketing"]) .rv-orbit-node i { font-size:32px; }:where(html[data-page="digital-marketing"]) .rv-orbit-node strong { font:700 12px/1.3 'Plus Jakarta Sans','Inter',sans-serif; color:#102039; text-align:center; }
:where(html[data-page="digital-marketing"]) .rv-orbit-4 .rv-orbit-node { left:calc(50% + cos(calc(var(--i)*90deg - 135deg))*43%); top:calc(50% + sin(calc(var(--i)*90deg - 135deg))*43%); }
:where(html[data-page="digital-marketing"]) .rv-career-panels { display:flex; align-items:center; gap:14px; padding:24px 8px; min-height:385px; }
:where(html[data-page="digital-marketing"]) .rv-career-panel { flex:1; min-width:0; height:320px; border-radius:18px; padding:30px 18px; display:flex; flex-direction:column; justify-content:center; gap:25px; transform:rotate(-4deg); }
:where(html[data-page="digital-marketing"]) .rv-career-panel:nth-child(2){transform:translateY(-22px) rotate(3deg)}:where(html[data-page="digital-marketing"]) .rv-career-panel:nth-child(3){transform:rotate(-3deg)}
:where(html[data-page="digital-marketing"]) .rv-career-panel i { font-size:48px; }:where(html[data-page="digital-marketing"]) .rv-career-panel strong { font:800 clamp(25px,2.5vw,36px)/1 'Outfit','Plus Jakarta Sans',sans-serif; color:#102039; letter-spacing:-.04em; }:where(html[data-page="digital-marketing"]) .rv-career-panel span { font:500 11px/1.6 'Plus Jakarta Sans','Inter',sans-serif; text-transform:uppercase; letter-spacing:.08em; color:#5e748f; }
:where(html[data-page="digital-marketing"]) .rv-roadmap { background:#fff; border:1px solid #e8e9e6; padding:30px; border-radius:24px; box-shadow:0 16px 40px #10203908; }
:where(html[data-page="digital-marketing"]) .rv-small-label { font:700 10px/1.4 'Plus Jakarta Sans','Inter',sans-serif!important; text-transform:uppercase; letter-spacing:.13em; color:#315373; margin:0 0 26px!important; }
:where(html[data-page="digital-marketing"]) .rv-roadmap-step { display:flex; gap:20px; padding:16px 0; }:where(html[data-page="digital-marketing"]) .rv-roadmap-step .rv-icon { width:70px;height:70px;border-radius:50%;font-size:34px; }
:where(html[data-page="digital-marketing"]) .rv-roadmap-step small { font:700 12px 'Plus Jakarta Sans','Inter',sans-serif; color:#178575; }:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-roadmap-step h3 { font:800 21px/1.2 'Outfit','Plus Jakarta Sans',sans-serif; color:#102039; margin:6px 0; }:where(html[data-page="digital-marketing"]) .rv-roadmap-step p { color:#5e748f; font-size:13px; margin:0; }
:where(html[data-page="digital-marketing"]) .rv-art-conversation-roadmap > .rv-note,:where(html[data-page="digital-marketing"]) .rv-art-cloud-architecture > .rv-note,:where(html[data-page="digital-marketing"]) .rv-art-search-visibility > .rv-note { margin:0 12px 18px; }
:where(html[data-page="digital-marketing"]) .rv-devices { min-height:410px; padding:20px 50px 20px 0; position:relative; }
:where(html[data-page="digital-marketing"]) .rv-browser { border:5px solid #16334d; border-radius:17px; overflow:hidden; background:#fffdf8; box-shadow:0 18px 25px #10203920; }
:where(html[data-page="digital-marketing"]) .rv-browser-bar { height:24px; display:flex; gap:6px; align-items:center; padding:0 12px; background:#16334d; }:where(html[data-page="digital-marketing"]) .rv-browser-bar b { width:7px;height:7px;border-radius:50%;background:#ffcd38; }:where(html[data-page="digital-marketing"]) .rv-browser-bar b:first-child{background:#ed7880}:where(html[data-page="digital-marketing"]) .rv-browser-bar b:last-child{background:#24b7a8}
:where(html[data-page="digital-marketing"]) .rv-browser-content { min-height:310px; padding:23px; position:relative; overflow:hidden; }:where(html[data-page="digital-marketing"]) .rv-mock-brand { display:block;font:800 17px 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039; margin-bottom:26px; }:where(html[data-page="digital-marketing"]) .rv-browser-content small { display:block;font:700 8px 'Plus Jakarta Sans','Inter',sans-serif;text-transform:uppercase;letter-spacing:.15em;color:#476780;margin-bottom:14px; }:where(html[data-page="digital-marketing"]) .rv-browser-content strong { display:block;font:800 29px/1.13 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;letter-spacing:-.04em;position:relative;z-index:1; }:where(html[data-page="digital-marketing"]) .rv-browser-content p { font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;max-width:210px;color:#5e748f;margin:15px 0; }:where(html[data-page="digital-marketing"]) .rv-mock-button { display:inline-block;padding:10px 17px;background:#ffca32;color:#102039;border-radius:999px;font:700 10px 'Plus Jakarta Sans','Inter',sans-serif;position:relative;z-index:1; }
:where(html[data-page="digital-marketing"]) .rv-shapes { width:180px;height:160px;position:absolute;bottom:-15px;right:-20px;pointer-events:none; }:where(html[data-page="digital-marketing"]) .rv-shapes b { position:absolute; }:where(html[data-page="digital-marketing"]) .rv-shapes b:nth-child(1){width:110px;height:110px;border-radius:100% 0 0 0;background:#25b09e;right:0;bottom:0}:where(html[data-page="digital-marketing"]) .rv-shapes b:nth-child(2){width:140px;height:140px;border-radius:100% 0 0 0;background:#f6e8c6;right:0;bottom:0;z-index:-1}:where(html[data-page="digital-marketing"]) .rv-shapes b:nth-child(3){width:65px;height:65px;border-radius:50%;background:#ffce3a;left:0;top:0}
:where(html[data-page="digital-marketing"]) .rv-mini-phone { position:absolute;bottom:0;right:0;width:145px;height:278px;padding:30px 13px 15px;border:7px solid #132b44;border-radius:26px;background:#fffdf8;box-shadow:0 14px 24px #10203920;overflow:hidden; }:where(html[data-page="digital-marketing"]) .rv-mini-phone>b { position:absolute;top:4px;left:35%;width:30%;height:8px;border-radius:10px;background:#132b44; }:where(html[data-page="digital-marketing"]) .rv-mini-phone>span:not(.rv-mock-button) { font:800 12px 'Outfit','Plus Jakarta Sans',sans-serif; }:where(html[data-page="digital-marketing"]) .rv-mini-phone>strong { display:block;font:800 20px/1.12 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;margin:30px 0 20px; }:where(html[data-page="digital-marketing"]) .rv-mini-phone .rv-shapes { transform:scale(.6);transform-origin:bottom right; }:where(html[data-page="digital-marketing"]) .rv-mini-phone .rv-mock-button {font-size:8px;padding:8px 10px}
:where(html[data-page="digital-marketing"]) .rv-flow { display:grid;grid-template-columns:1fr 1fr 1.2fr;align-items:center;gap:16px;min-height:340px;position:relative; }:where(html[data-page="digital-marketing"]) .rv-flow::before {content:'';position:absolute;left:15%;right:15%;top:50%;height:2px;background:#f5a916;z-index:0}:where(html[data-page="digital-marketing"]) .rv-flow-input { position:relative;background:#fff;border:1px solid #e2e7ee;border-radius:18px;padding:18px 10px;text-align:center; }:where(html[data-page="digital-marketing"]) .rv-flow-input i {font-size:28px;color:#1da891;display:block;margin-bottom:10px}:where(html[data-page="digital-marketing"]) .rv-flow-input strong {display:block;font-size:12px;color:#102039}:where(html[data-page="digital-marketing"]) .rv-flow-input span {font-size:9px;color:#5e748f;display:block;margin-top:6px}:where(html[data-page="digital-marketing"]) .rv-flow-core { position:relative;aspect-ratio:1;border-radius:50%;background:#102039;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;box-shadow:0 0 0 10px #e7eff7; }:where(html[data-page="digital-marketing"]) .rv-flow-core i {font-size:34px}:where(html[data-page="digital-marketing"]) .rv-flow-core strong {font-size:11px;line-height:1.4}:where(html[data-page="digital-marketing"]) .rv-flow-outputs {display:flex;flex-direction:column;gap:24px;position:relative}:where(html[data-page="digital-marketing"]) .rv-flow-outputs>div {padding:16px 12px;background:#fff;border:1px solid #e2e7ee;border-radius:999px;font-size:11px;display:flex;align-items:center;gap:10px;color:#102039}:where(html[data-page="digital-marketing"]) .rv-flow-outputs i {font-size:23px;color:#248978}
:where(html[data-page="digital-marketing"]) .rv-cloud {background:#102c46;color:#fff;padding:34px;border-radius:26px;box-shadow:0 18px 30px #10203915}:where(html[data-page="digital-marketing"]) .rv-cloud-icon {text-align:center;font-size:100px;line-height:1}:where(html[data-page="digital-marketing"]) .rv-cloud-branches{height:42px;border:2px solid #ffcc31;border-bottom:0;border-radius:18px 18px 0 0;margin:12px 14% 0;position:relative}:where(html[data-page="digital-marketing"]) .rv-cloud-branches::after{content:'';position:absolute;left:50%;height:54px;top:-14px;border-left:2px solid #ffcc31}:where(html[data-page="digital-marketing"]) .rv-server-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}:where(html[data-page="digital-marketing"]) .rv-server{border:1px solid #88adc7;border-radius:8px;height:34px;display:flex;gap:5px;align-items:center;padding:10px;margin-bottom:4px}:where(html[data-page="digital-marketing"]) .rv-server b{width:6px;height:6px;border-radius:50%;background:#21d2b1}:where(html[data-page="digital-marketing"]) .rv-server span{width:24px;height:3px;background:#41637e;margin-left:4px}:where(html[data-page="digital-marketing"]) .rv-server-grid strong{display:block;text-align:center;font-size:14px;margin-top:16px;color:white}
:where(html[data-page="digital-marketing"]) .rv-app-phones {position:relative;min-height:430px;display:flex;justify-content:center;align-items:center;padding:10px 20px}:where(html[data-page="digital-marketing"]) .rv-app-phone{position:relative;width:47%;height:390px;border:7px solid #132b44;border-radius:31px;background:#fffdf8;padding:36px 18px 20px;overflow:hidden;box-shadow:0 18px 25px #10203920;transform:rotate(-7deg)}:where(html[data-page="digital-marketing"]) .rv-app-phone+.rv-app-phone{transform:rotate(7deg) translateY(16px);margin-left:-10px}:where(html[data-page="digital-marketing"]) .rv-phone-notch{position:absolute;top:-1px;left:28%;width:44%;height:15px;border-radius:0 0 12px 12px;background:#132b44}:where(html[data-page="digital-marketing"]) .rv-app-phone small{font:800 10px 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;white-space:nowrap}:where(html[data-page="digital-marketing"]) .rv-app-phone small span{color:#1aac90}:where(html[data-page="digital-marketing"]) .rv-app-phone>strong{font:800 29px/1.1 'Outfit','Plus Jakarta Sans',sans-serif;display:block;color:#102039;margin:36px 0 20px;letter-spacing:-.04em}:where(html[data-page="digital-marketing"]) .rv-app-phone p{font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;color:#5e748f;margin-bottom:18px}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-app-phone h3{font:800 17px/1.2 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;margin:12px 0}:where(html[data-page="digital-marketing"]) .rv-phone-row{display:flex;align-items:center;gap:10px;padding:14px 5px;border-bottom:1px solid #e2e7ee;font:600 11px 'Plus Jakarta Sans','Inter',sans-serif;color:#102039}:where(html[data-page="digital-marketing"]) .rv-phone-row i{font-size:23px;color:#24a694}:where(html[data-page="digital-marketing"]) .rv-app-phone .rv-shapes{transform:scale(.8);transform-origin:bottom right}:where(html[data-page="digital-marketing"]) .rv-platforms{text-align:center;color:#315373;font-size:12px!important;margin-top:22px}:where(html[data-page="digital-marketing"]) .rv-platforms i{font-size:18px;margin-left:12px}:where(html[data-page="digital-marketing"]) .rv-platforms span{margin-left:14px;color:#afbac6}
:where(html[data-page="digital-marketing"]) .rv-search {padding:28px;background:#fff;border:1px solid #e2e7ee;border-radius:24px;box-shadow:0 18px 35px #1020390c}:where(html[data-page="digital-marketing"]) .rv-search-field{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid #e2e7ee;border-radius:999px;color:#102039;font-size:13px}:where(html[data-page="digital-marketing"]) .rv-search-field i{font-size:21px}:where(html[data-page="digital-marketing"]) .rv-search-result{padding:28px 8px}:where(html[data-page="digital-marketing"]) .rv-search-result small{display:block;color:#71859b;font-size:10px;margin-bottom:14px}:where(html[data-page="digital-marketing"]) .rv-search-result strong{display:block;color:#2761b7;font:700 22px 'Outfit','Plus Jakarta Sans',sans-serif;margin-bottom:18px}:where(html[data-page="digital-marketing"]) .rv-search-result>span{display:block;height:9px;border-radius:5px;background:#e0e8f1;margin-top:8px}:where(html[data-page="digital-marketing"]) .rv-search-result>span:last-child{width:80%}:where(html[data-page="digital-marketing"]) .rv-trend{display:block;width:100%;height:auto;overflow:visible}:where(html[data-page="digital-marketing"]) .rv-illustration-label{font:400 10px/1.5 'Plus Jakarta Sans','Inter',sans-serif!important;color:#71859b;margin-top:14px;text-align:center}
:where(html[data-page="digital-marketing"]) .rv-funnel {display:flex;align-items:center;flex-direction:column;gap:12px;padding:0 24px}:where(html[data-page="digital-marketing"]) .rv-funnel-brand{width:92px;height:92px;border-radius:50%;background:#102039;color:#fff;display:grid;place-content:center;font:800 18px/1.15 'Outfit','Plus Jakarta Sans',sans-serif;text-align:center;margin-bottom:4px}:where(html[data-page="digital-marketing"]) .rv-funnel-step{display:flex;align-items:center;gap:20px;padding:24px 28px;border-radius:22px;width:100%;}:where(html[data-page="digital-marketing"]) .rv-funnel-step:nth-child(3){width:90%}:where(html[data-page="digital-marketing"]) .rv-funnel-step:nth-child(4){width:80%}:where(html[data-page="digital-marketing"]) .rv-funnel-step>i{font-size:38px;color:#102039}:where(html[data-page="digital-marketing"]) .rv-funnel-step strong{font:700 14px/1.3 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039}:where(html[data-page="digital-marketing"]) .rv-funnel-step p{font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;color:#5e748f;margin:8px 0 0}
:where(html[data-page="digital-marketing"]) .rv-media-fallback {display:flex!important;align-items:center;justify-content:center;flex-direction:column;gap:16px;min-height:140px;padding:30px;background:#eef4f2;color:#315373;border-radius:inherit;text-align:center;font:600 13px/1.5 'Plus Jakarta Sans','Inter',sans-serif}:where(html[data-page="digital-marketing"]) .rv-media-fallback i{font-size:38px;color:#28a595}:where(html[data-page="digital-marketing"]) .rv-media-fallback.rv-avatar{width:48px;height:48px;min-height:0;padding:0;border-radius:50%;font-size:14px}:where(html[data-page="digital-marketing"]) .rv-media-fallback small{font-size:10px;color:#5e748f;text-transform:uppercase;letter-spacing:.1em}
@media(min-width:1400px){:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-hero{padding-top:48px;padding-bottom:58px}}
@media(max-width:1100px){:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-hero-grid{gap:32px}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-container{width:calc(100% - 48px)}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-hero h1{font-size:46px!important}:where(html[data-page="digital-marketing"]) .rv-career-panel{padding:24px 12px}:where(html[data-page="digital-marketing"]) .rv-flow{gap:10px}:where(html[data-page="digital-marketing"]) .rv-app-phone{padding-inline:12px}:where(html[data-page="digital-marketing"]) .rv-app-phone>strong{font-size:26px}:where(html[data-page="digital-marketing"]) .rv-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-hero-grid{grid-template-columns:1fr;gap:30px}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-hero{padding:36px 0 44px}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-hero-copy{max-width:660px}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-hero-art{width:100%;max-width:580px;margin:auto}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-hero h1{font-size:clamp(38px,6vw,54px)!important}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities){padding-block:56px}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-description{max-width:640px}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-capabilities{padding-block:40px}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-section h2{font-size:34px!important}}
@media(max-width:540px){:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-container{width:calc(100% - 40px)}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-hero h1{font-size:38px!important;line-height:1.12!important}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-description{font-size:15px}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-eyebrow{font-size:10px;margin-bottom:20px}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-button{font-size:12px;min-height:48px;padding:13px 17px}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-actions{gap:10px}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-hero-art{padding-top:0}:where(html[data-page="digital-marketing"]) .rv-capability-grid{grid-template-columns:1fr;gap:24px}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-section h2{font-size:29px!important}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-note{font-size:22px}:where(html[data-page="digital-marketing"]) .rv-orbit-core{font-size:19px}:where(html[data-page="digital-marketing"]) .rv-orbit-core span{font-size:16px}:where(html[data-page="digital-marketing"]) .rv-orbit-node i{font-size:24px}:where(html[data-page="digital-marketing"]) .rv-orbit-node strong{font-size:9px}:where(html[data-page="digital-marketing"]) .rv-orbit-node{gap:5px}:where(html[data-page="digital-marketing"]) .rv-career-panels{min-height:290px;padding:20px 2px;gap:9px}:where(html[data-page="digital-marketing"]) .rv-career-panel{height:240px;padding:20px 12px;gap:20px}:where(html[data-page="digital-marketing"]) .rv-career-panel strong{font-size:25px}:where(html[data-page="digital-marketing"]) .rv-career-panel span{font-size:9px}:where(html[data-page="digital-marketing"]) .rv-career-panel i{font-size:36px}:where(html[data-page="digital-marketing"]) .rv-roadmap{padding:20px}:where(html[data-page="digital-marketing"]) .rv-roadmap-step{gap:14px}:where(html[data-page="digital-marketing"]) .rv-roadmap-step .rv-icon{width:48px;height:48px;font-size:26px}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-roadmap-step h3{font-size:19px}:where(html[data-page="digital-marketing"]) .rv-devices{min-height:350px;padding-right:30px}:where(html[data-page="digital-marketing"]) .rv-browser-content{padding:16px;min-height:280px}:where(html[data-page="digital-marketing"]) .rv-browser-content strong{font-size:25px}:where(html[data-page="digital-marketing"]) .rv-browser-content p{max-width:160px}:where(html[data-page="digital-marketing"]) .rv-mini-phone{width:110px;height:225px;border-width:5px;padding:24px 10px 10px}:where(html[data-page="digital-marketing"]) .rv-mini-phone>strong{font-size:17px;margin:22px 0 14px}:where(html[data-page="digital-marketing"]) .rv-browser-content .rv-shapes{transform:scale(.7);transform-origin:bottom right}:where(html[data-page="digital-marketing"]) .rv-flow{grid-template-columns:1fr 1fr;gap:24px;min-height:300px}:where(html[data-page="digital-marketing"]) .rv-flow-input{grid-column:1;grid-row:1}:where(html[data-page="digital-marketing"]) .rv-flow-core{grid-column:2;grid-row:1;width:120px;justify-self:center}:where(html[data-page="digital-marketing"]) .rv-flow-outputs{grid-column:1/-1;flex-direction:row;gap:8px}:where(html[data-page="digital-marketing"]) .rv-flow-outputs>div{flex:1;flex-direction:column;text-align:center;padding:15px 8px;border-radius:16px;font-size:10px}:where(html[data-page="digital-marketing"]) .rv-flow::before{top:25%}:where(html[data-page="digital-marketing"]) .rv-cloud{padding:24px 20px}:where(html[data-page="digital-marketing"]) .rv-cloud-icon{font-size:80px}:where(html[data-page="digital-marketing"]) .rv-server-grid{gap:12px}:where(html[data-page="digital-marketing"]) .rv-server{padding:6px;height:28px}:where(html[data-page="digital-marketing"]) .rv-server-grid strong{font-size:11px}:where(html[data-page="digital-marketing"]) .rv-server span{width:13px}:where(html[data-page="digital-marketing"]) .rv-app-phones{padding:10px 4px;min-height:350px}:where(html[data-page="digital-marketing"]) .rv-app-phone{height:320px;border-width:5px;border-radius:25px;padding:25px 12px 15px;width:49%}:where(html[data-page="digital-marketing"]) .rv-app-phone>strong{font-size:23px;margin:26px 0 16px}:where(html[data-page="digital-marketing"]) .rv-app-phone small{font-size:8px}:where(html[data-page="digital-marketing"]) .rv-app-phone p{font-size:9px}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-app-phone h3{font-size:14px}:where(html[data-page="digital-marketing"]) .rv-phone-row{font-size:10px;padding:11px 2px;gap:7px}:where(html[data-page="digital-marketing"]) .rv-app-phone .rv-shapes{transform:scale(.6)}:where(html[data-page="digital-marketing"]) .rv-app-phone .rv-mock-button{font-size:9px;padding:9px 12px}:where(html[data-page="digital-marketing"]) .rv-search{padding:22px}:where(html[data-page="digital-marketing"]) .rv-search-field{font-size:11px;padding:12px}:where(html[data-page="digital-marketing"]) .rv-search-result strong{font-size:19px}:where(html[data-page="digital-marketing"]) .rv-funnel{padding:0 6px}:where(html[data-page="digital-marketing"]) .rv-funnel-step{padding:19px 20px;gap:14px}:where(html[data-page="digital-marketing"]) .rv-funnel-step>i{font-size:29px}:where(html[data-page="digital-marketing"]) .rv-funnel-step strong{font-size:12px}:where(html[data-page="digital-marketing"]) .rv-funnel-step p{font-size:10px}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities){padding-block:44px}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-button{transition:none}:where(html[data-page="digital-marketing"]) .rv-upgraded .rv-button:hover{transform:none}}
@media(max-width:600px){
  :where(html[data-page="digital-marketing"]) .rv-upgraded .featured-header-row { flex-wrap:wrap; gap:14px; }
  :where(html[data-page="digital-marketing"]) .rv-upgraded #client-stories .container > div:first-child { flex-wrap:wrap; gap:20px; }
  :where(html[data-page="digital-marketing"]) .rv-upgraded #client-stories .container > div:first-child > div { min-width:0; max-width:100%; flex-wrap:wrap; }
  :where(html[data-page="digital-marketing"]) .rv-upgraded .rv-orbit-6 .rv-orbit-node strong { font-size:8px; }
}
:where(html[data-page="digital-marketing"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(h2, h3, .final-cta-headline, .kx-cta-headline, .display-h2) {
  color: #FFFFFF !important;
}
:where(html[data-page="digital-marketing"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(h2, h3, .final-cta-headline, .kx-cta-headline) :is(.highlight-gold, .cta-gold-text, em, span.gold, .kx-text-gold) {
  color: #FFC526 !important;
  background: transparent !important;
}
:where(html[data-page="digital-marketing"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(p, .kx-cta-sub) {
  color: rgba(255, 255, 255, 0.9) !important;
}


/* micro-interactions.css */
/* Shared feedback layer. Motion acknowledges actions; informational content stays still. */
:root:where([data-page="digital-marketing"]){--kx-feedback-ease:cubic-bezier(.2,.75,.25,1);--kx-feedback-duration:180ms}
:where(html[data-page="digital-marketing"]) :where(a,button,summary,input,textarea,select):focus-visible{outline:3px solid #187d6b!important;outline-offset:4px}
:where(html[data-page="digital-marketing"]) :where(.shared-kx-footer,.ma-dark,.ma-closing) :where(a,button):focus-visible{outline-color:#ffc526!important}
:where(html[data-page="digital-marketing"]) :where(button,summary,.kx-mi-action){-webkit-tap-highlight-color:rgba(245,169,22,.18);touch-action:manipulation}
:where(html[data-page="digital-marketing"]) .kx-mi-action{transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease),scale 120ms var(--kx-feedback-ease),box-shadow var(--kx-feedback-duration) var(--kx-feedback-ease),background-color var(--kx-feedback-duration) ease,border-color var(--kx-feedback-duration) ease!important}
:where(html[data-page="digital-marketing"]) .kx-mi-arrow{display:inline-block;transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease)!important}
:where(html[data-page="digital-marketing"]) .kx-mi-card{transition:translate 220ms var(--kx-feedback-ease),box-shadow 220ms var(--kx-feedback-ease),border-color 180ms ease!important}
:where(html[data-page="digital-marketing"]) .shared-footer-links a,:where(html[data-page="digital-marketing"]) .shared-kx-dropdown-item,:where(html[data-page="digital-marketing"]) .shared-kx-mobile-nav-link{ text-decoration-color:transparent;text-underline-offset:5px;transition:color 160ms ease,background-color 160ms ease,text-decoration-color 160ms ease!important}
:where(html[data-page="digital-marketing"]) .shared-footer-links a:focus-visible{ text-decoration:underline;text-decoration-color:currentColor }
:where(html[data-page="digital-marketing"]) :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea,select){transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease!important}
:where(html[data-page="digital-marketing"]) :where(input:not([type=checkbox]):not([type=radio]),textarea,select):focus{border-color:#187d6b!important;box-shadow:0 0 0 3px rgb(24 125 107 / .12)}
:where(html[data-page="digital-marketing"]) :where(button[aria-expanded],summary){transition:background-color 160ms ease,color 160ms ease!important}
:where(html[data-page="digital-marketing"]) :where(button[aria-expanded],summary):focus-visible{border-radius:8px}
@media(hover:hover) and (pointer:fine){
  :where(html[data-page="digital-marketing"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):hover{translate:0 -2px}
  :where(html[data-page="digital-marketing"]) .kx-mi-action:hover .kx-mi-arrow,:where(html[data-page="digital-marketing"]) .kx-mi-action:focus-visible .kx-mi-arrow{translate:3px 0}
  :where(html[data-page="digital-marketing"]) .kx-mi-card:hover,:where(html[data-page="digital-marketing"]) .kx-mi-card:focus-within{translate:0 -3px;border-color:#d8ba78;box-shadow:0 10px 24px rgb(16 32 57 / .08)}
  :where(html[data-page="digital-marketing"]) .shared-footer-links a:hover{text-decoration:underline;text-decoration-color:currentColor}
}
:where(html[data-page="digital-marketing"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):active{translate:0 0;scale:.98;transition-duration:80ms!important}
:where(html[data-page="digital-marketing"]) .kx-mi-card:active{translate:0 -1px}
/* Honor this preference for both this layer and pre-existing decorative loops. */
@media(prefers-reduced-motion:reduce){
  html:where([data-page="digital-marketing"]){scroll-behavior:auto!important}
  :where(html[data-page="digital-marketing"]) *,:where(html[data-page="digital-marketing"]) *::before,:where(html[data-page="digital-marketing"]) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  :where(html[data-page="digital-marketing"]) .kx-mi-action,:where(html[data-page="digital-marketing"]) .kx-mi-card,:where(html[data-page="digital-marketing"]) .kx-mi-arrow{translate:none!important;scale:none!important;transition:none!important}
  :where(html[data-page="digital-marketing"]) .shared-footer-links a,:where(html[data-page="digital-marketing"]) .shared-kx-dropdown-item,:where(html[data-page="digital-marketing"]) .shared-kx-mobile-nav-link{transition:none!important}
}

/* page-container-rhythm.css */
/* Shared page rhythm: mirrors the Industries page container at every breakpoint. */
:root:where([data-page="digital-marketing"]) {
  --kx-page-container: 1240px;
  --kx-page-gutter: 24px;
}

:where(html[data-page="digital-marketing"]) .shared-kx-header > .shared-kx-container,:where(html[data-page="digital-marketing"]) 
.ux-page .shared-kx-container,:where(html[data-page="digital-marketing"]) 
main > section > :is(
  .container,
  .su-container,
  .impact-container,
  .origin-desktop-view,
  .phil-container,
  .journey-tl-container,
  .careersHero-container,
  .chFeels-container,
  .contact-hero-v2-container,
  .contact-container,
  .taste-inner,
  .ai-container,
  .rv-container,
  .wd-container,
  .wd-tech-container,
  .wd-testi-faq-container,
  .kx-ah-container,
  .ma-container,
  .kats-container,
  .cloud-hero-container,
  .kx-container
),:where(html[data-page="digital-marketing"]) 
body > section > :is(
  .container,
  .contact-container,
  .cloud-hero-container,
  .kx-container
) {
  width: 100% !important;
  max-width: var(--kx-page-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--kx-page-gutter) !important;
  padding-right: var(--kx-page-gutter) !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  :root:where([data-page="digital-marketing"]) { --kx-page-gutter: 16px; }
}

/* This section previously put its gutter on the full-width background itself. */
@media (max-width: 1023px) {
  :where(html[data-page="digital-marketing"]) .wd-tech-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}



/* PAGE seo-optimization */
/* shared-chrome.css */
@scope (:where(html[data-page="seo-optimization"]) .shared-kx-header,:where(html[data-page="seo-optimization"])  .shared-kx-mobile-drawer,:where(html[data-page="seo-optimization"])  .shared-site-footer) {
:scope { --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif; --container-max: 1240px; --color-yellow: #F8C72E; --color-primary-navy: #14243D; --transition: all .2s ease; font-family: var(--font-body, 'Plus Jakarta Sans', 'Inter', sans-serif); line-height: 1.5; }
:where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(a) { text-decoration: none; }



:scope {
  --kx-navy: #13243D;
  --kx-deep-navy: #0D1B31;
  --kx-secondary-navy: #1B3152;
  --kx-gold: #F9BE22;
  --kx-gold-hover: #FFCA3A;
  --kx-green: #00D084;
  --kx-cyan: #52BCEB;
  --kx-soft-cyan: #EAF8FF;
  --kx-soft-gold: #FFF8DD;
  --kx-soft-green: #E8F8F0;
  --kx-white: #FFFFFF;
  --kx-gray: #F4F6FA;
  --kx-pill-bg: #EDF3FA;
  --kx-border: #E8EDF4;
  --kx-border-subtle: #F1F4F9;
  --kx-text-dark: #13243D;
  --kx-text-muted: #65748B;
  --kx-radius-pill: 9999px;
  --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
}


:scope.shared-kx-header,
.shared-kx-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: 1px solid rgba(232, 237, 244, 0.8);
  transition: all 0.25s ease;
}

:scope.shared-kx-header.scrolled,
.shared-kx-header.scrolled {
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

:scope.shared-kx-header.menu-open,
.shared-kx-header.menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

.shared-kx-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .shared-kx-container {
    padding: 0 16px;
  }
}

.shared-kx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
}


.shared-kx-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0F1D32;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

.shared-kx-logo-tech {
  color: #00D084;
  font-weight: 800;
}


.shared-kx-nav-menu {
  display: flex;
  align-items: center;
  background: #EDF3FA;
  padding: 4px 6px;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(220, 230, 242, 0.85);
  box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
  flex-shrink: 1;
}

.shared-kx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shared-kx-nav-item {
  position: relative;
}

.shared-kx-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--kx-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-nav-link:hover {
  color: #0F1D32;
  background: rgba(255, 255, 255, 0.7);
}

.shared-kx-nav-link.active {
  color: #0F1D32 !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
}

.shared-kx-nav-link::after,
.shared-kx-nav-link.active::after {
  display: none !important;
}

.shared-kx-chevron-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  stroke: currentColor;
}


.shared-kx-dropdown-wrapper {
  position: relative;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper.open .shared-kx-chevron-icon {
  transform: rotate(180deg);
}

.shared-kx-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 250px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
  border: 1px solid var(--kx-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  pointer-events: none;
  z-index: 100;
}

/* Invisible hover bridge to eliminate the 8px cursor gap */
.shared-kx-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
  background: transparent;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper.open .shared-kx-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.shared-kx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #13243D;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.shared-kx-dropdown-item:hover {
  background: #F0F7FF;
  color: #0F1D32;
}


.shared-kx-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.shared-kx-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0F1D32;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-btn-pill-navy:hover {
  background: #1B2E4B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
}

.shared-kx-btn-pill-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F9BE22;
  color: #0F1D32;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
}

.shared-kx-btn-pill-gold:hover {
  background: #FFCA3A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
}

.shared-kx-btn-pill-navy:active,
.shared-kx-btn-pill-gold:active,
.kx-modal-submit:active {
  transform: translateY(0) scale(0.98);
}


.shared-kx-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0F1D32;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.shared-kx-mobile-toggle:hover {
  background: #EDF3FA;
}

@media (max-width: 1240px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-navy {
    display: none;
  }
}

@media (max-width: 1100px) {
  .shared-kx-nav-menu {
    display: none;
  }

  .shared-kx-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .shared-kx-nav-inner {
    height: 70px;
    gap: 8px;
  }
  .shared-kx-logo {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .shared-kx-logo {
    font-size: 18px;
  }
  .shared-kx-nav-actions {
    gap: 6px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 7px 11px;
    font-size: 11.5px;
    gap: 4px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold svg {
    display: none;
  }
  .shared-kx-mobile-toggle {
    padding: 6px;
  }
}

@media (max-width: 360px) {
  .shared-kx-container {
    padding: 0 6px;
  }
  .shared-kx-nav-inner {
    gap: 2px;
  }
  .shared-kx-logo {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  .shared-kx-nav-actions {
    gap: 2px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 5px 6px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  .shared-kx-mobile-toggle {
    padding: 2px;
  }
}


:scope.shared-kx-mobile-drawer,
.shared-kx-mobile-drawer {
  position: fixed;
  top: var(--header-height, 78px);
  left: 0;
  width: 100%;
  height: calc(100dvh - var(--header-height, 78px));
  background: #FFFFFF !important;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 40px rgba(19, 36, 61, 0.12);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :scope.shared-kx-mobile-drawer,
  .shared-kx-mobile-drawer {
    top: var(--header-height, 70px);
    height: calc(100dvh - var(--header-height, 70px));
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

:scope.shared-kx-mobile-drawer.open,
:scope.shared-kx-mobile-drawer.active,
.shared-kx-mobile-drawer.open,
.shared-kx-mobile-drawer.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  pointer-events: auto;
}

.shared-kx-mobile-nav-link {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 650;
  color: #14243D;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 12px;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.shared-kx-mobile-nav-link:hover {
  background: #F8FAFC;
  color: #0E1B2F;
}

.shared-kx-mobile-nav-link.active {
  background: #F4F7FB !important;
  color: #0E1B2F !important;
  font-weight: 750 !important;
  border-left: 3px solid #F8C72E;
  padding-left: 13px;
}

.shared-kx-mobile-nav-link.shared-sub {
  margin-left: 12px;
  margin-right: 4px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 550;
  color: #556987;
  background: #F8FAFC;
  border-radius: 10px;
  border-left: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.shared-kx-mobile-nav-link.shared-sub::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94A3B8;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.shared-kx-mobile-nav-link.shared-sub:hover,
.shared-kx-mobile-nav-link.shared-sub.active {
  background: #EDF4FB;
  color: #0E1B2F;
  border-left-color: #F8C72E;
}

.shared-kx-mobile-nav-link.shared-sub.active::before {
  background: #F8C72E;
  transform: scale(1.4);
}

.shared-kx-mobile-drawer-footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #EEF2F6;
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-gold {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(248, 199, 46, 0.3);
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-navy {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
  border-radius: 9999px;
}


.kx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 49, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  padding: 20px;
}

.kx-modal-overlay.active,
.kx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.kx-modal-dialog {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
  border: 1px solid var(--kx-border);
  overflow: hidden;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.kx-modal-overlay.active .kx-modal-dialog,
.kx-modal-overlay.is-open .kx-modal-dialog {
  transform: scale(1) translateY(0);
}

.kx-modal-header {
  padding: 28px 32px 16px;
  position: relative;
}

.kx-modal-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--kx-navy);
  margin: 0 0 6px;
}

.kx-modal-subtitle {
  font-size: 14px;
  color: var(--kx-text-muted);
  margin: 0;
}

.kx-modal-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--kx-gray);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-navy);
  transition: background 0.2s ease, transform 0.2s ease;
}

.kx-modal-close:hover {
  background: #E2E8F0;
  transform: rotate(90deg);
}

.kx-modal-body {
  padding: 0 32px 32px;
}

.kx-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx-form-label {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kx-navy);
}

.kx-form-input,
.kx-form-textarea,
.kx-form-select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--kx-border);
  background: var(--kx-gray);
  color: var(--kx-navy);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.kx-form-input:focus,
.kx-form-textarea:focus,
.kx-form-select:focus {
  outline: none;
  border-color: var(--kx-navy);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
}

.kx-modal-submit {
  background: var(--kx-navy);
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.kx-modal-submit:hover {
  background: var(--kx-deep-navy);
  transform: translateY(-1px);
}


:scope.shared-site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
  position: relative;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

:scope.shared-site-footer .shared-container,
:scope.shared-site-footer .shared-kx-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

.shared-footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand {
  min-width: 0;
}

.shared-footer-brand .shared-brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand .shared-brand-logo .shared-dot {
  color: #2FB7A7;
}

.shared-footer-brand p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  max-width: 290px;
}

.shared-footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.shared-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.shared-footer-links a {
  font-size: 0.835rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.shared-footer-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

.shared-footer-follow-wrapper {
  margin-top: 24px;
}

.shared-footer-follow-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.shared-footer-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.shared-social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  text-decoration: none;
  transition: var(--transition);
}

.shared-social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

.shared-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  flex-wrap: wrap;
  gap: 12px;
}


@media (max-width: 1180px) {
  .nav-link {
    padding: 6px 9px;
    font-size: 0.82rem;
  }
  .btn-nav-phone {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}


@media (max-width: 1024px) {
  :scope {
    --header-height: 66px;
  }
  .nav-menu-wrapper,
  .btn-phone-desktop {
    display: none !important;
  }
  .hamburger-btn {
    display: flex !important;
  }
  .btn-cta-desktop {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .shared-footer-brand p {
    max-width: 100%;
  }
}


@media (max-width: 768px) {
  :scope {
    --header-height: 62px;
  }
  .btn-cta-desktop {
    display: none !important;
  }
  .shared-site-footer {
    padding: 46px 0 24px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding-bottom: 28px;
  }
}


@media (max-width: 540px) {
  :scope {
    --header-height: 58px;
  }
  .nav-container {
    padding: 0 14px;
  }
  .hamburger-btn {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  .hamburger-btn span {
    width: 20px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
  }
  .shared-footer-col-company {
    grid-column: 1;
  }
  .shared-footer-col-solutions {
    grid-column: 2;
  }
  .shared-footer-col-resources {
    grid-column: 1 / -1;
  }
  .shared-footer-col h5 {
    margin-bottom: 12px;
  }
  .shared-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


@media (max-width: 360px) {
  .shared-brand-logo {
    font-size: 1.15rem;
  }
  .mobile-nav-drawer {
    width: 90vw;
    padding: 18px 14px 22px;
  }
  .mobile-nav-link {
    font-size: 0.95rem;
  }
}
  
}
:where(html[data-page="seo-optimization"]) .shared-kx-mobile-drawer { visibility: hidden; }
:where(html[data-page="seo-optimization"]) .shared-kx-mobile-drawer.open { visibility: visible; }
:where(html[data-page="seo-optimization"]) .shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="seo-optimization"]) .shared-kx-btn-pill-navy:active,:where(html[data-page="seo-optimization"]) 
  .shared-kx-btn-pill-gold:active,:where(html[data-page="seo-optimization"]) 
  .kx-modal-submit:active { transform: none; }
}

/* seo-optimization.html embedded 2 */

    :root:where([data-page="seo-optimization"]){
      color-scheme:light;
      --bg:#fffdf8;--bg-alt:#fbf7ee;--surface:#fff;--surface-2:#f8f1e4;
      --ink:#0d2342;--ink-2:#294866;--muted:#607a9b;--line:rgba(13,35,66,.12);
      --navy:#0d2342;--deep:#071a33;--blue:#2f80ed;--gold:#f5a900;--yellow:#ffc52f;
      --green:#149968;--soft-blue:#eaf3ff;--soft-green:#e5f8f0;--soft-purple:#f1eaff;--soft-gold:#fff3d1;
      --shadow:0 20px 60px rgba(13,35,66,.09);--container:1240px;--gutter:24px;
      --section:clamp(88px,9vw,136px);--radius:24px;--ease:cubic-bezier(.22,1,.36,1);
    }
    :where(html[data-page="seo-optimization"]) *{box-sizing:border-box}
    html:where([data-page="seo-optimization"]){scroll-behavior:smooth;background:var(--bg)}
    :where(html[data-page="seo-optimization"]) body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:"Source Sans 3",sans-serif;font-size:18px;line-height:1.6}
    :where(html[data-page="seo-optimization"]) a{color:inherit;text-decoration:none}:where(html[data-page="seo-optimization"]) button,:where(html[data-page="seo-optimization"]) input,:where(html[data-page="seo-optimization"]) select,:where(html[data-page="seo-optimization"]) textarea{font:inherit;color:inherit}
    :where(html[data-page="seo-optimization"]) img,:where(html[data-page="seo-optimization"]) svg{display:block;max-width:100%}
    :where(html[data-page="seo-optimization"]) .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
    :where(html[data-page="seo-optimization"]) .section{padding-block:var(--section)}
    :where(html[data-page="seo-optimization"]) .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--ink-2);font:800 12px/1 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase}
    :where(html[data-page="seo-optimization"]) .eyebrow::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--gold)}
    :where(html[data-page="seo-optimization"]) h1,:where(html[data-page="seo-optimization"]) h2,:where(html[data-page="seo-optimization"]) h3{margin:0;color:var(--ink);font-family:Manrope,sans-serif;letter-spacing:-.045em}
    :where(html[data-page="seo-optimization"]) h1{font-size:clamp(52px,6.2vw,88px);line-height:.98;max-width:920px;margin:22px auto 24px}
    :where(html[data-page="seo-optimization"]) h2{font-size:clamp(40px,4.4vw,62px);line-height:1.02;max-width:720px;margin:18px 0 22px}
    :where(html[data-page="seo-optimization"]) h3{font-size:22px;line-height:1.18}
    :where(html[data-page="seo-optimization"]) p{margin:0;color:var(--muted)}
    :where(html[data-page="seo-optimization"]) .accent{color:var(--gold)}
    :where(html[data-page="seo-optimization"]) .btn{min-height:54px;border:1px solid transparent;border-radius:999px;padding:0 26px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:800 14px/1 Manrope,sans-serif;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s ease}
    :where(html[data-page="seo-optimization"]) .btn:hover{transform:translateY(-2px)}:where(html[data-page="seo-optimization"]) .btn:active{transform:translateY(0)}
    :where(html[data-page="seo-optimization"]) .btn-primary{background:var(--yellow);color:#0d2342;box-shadow:0 12px 28px rgba(245,169,0,.22)}
    :where(html[data-page="seo-optimization"]) .btn-primary:hover{background:#ffd153;box-shadow:0 15px 34px rgba(245,169,0,.3)}
    :where(html[data-page="seo-optimization"]) .btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
    :where(html[data-page="seo-optimization"]) :focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
    :where(html[data-page="seo-optimization"]) .arrow{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

    /* Header — global shared chrome (shared-kx-header via shared-chrome.css) */

    /* Hero */
    :where(html[data-page="seo-optimization"]) .hero{padding:74px 0 24px;background:var(--bg);position:relative;overflow:hidden}
    :where(html[data-page="seo-optimization"]) .hero::before{content:"";position:absolute;left:50%;top:320px;width:980px;height:420px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(47,128,237,.12),transparent 66%);pointer-events:none}
    :where(html[data-page="seo-optimization"]) .hero .container{max-width:1680px}
    :where(html[data-page="seo-optimization"]) .hero-copy{text-align:center;max-width:920px;margin-inline:auto;position:relative;z-index:2}
    :where(html[data-page="seo-optimization"]) .hero-copy .eyebrow{justify-content:center}
    :where(html[data-page="seo-optimization"]) .hero-copy p{font-size:clamp(18px,1.6vw,21px);max-width:690px;margin-inline:auto}
    :where(html[data-page="seo-optimization"]) .hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
    :where(html[data-page="seo-optimization"]) .hero-art{aspect-ratio:1632/731;margin:42px auto 0;max-width:1632px;position:relative;z-index:1}
    :where(html[data-page="seo-optimization"]) .hero-art svg{width:100%;height:100%;overflow:visible}
    :where(html[data-page="seo-optimization"]) .hero-journey{font-family:Manrope,sans-serif}
    :where(html[data-page="seo-optimization"]) .hero-journey-mobile{display:none}
    :where(html[data-page="seo-optimization"]) .journey-path{stroke-dasharray:12 10;opacity:1}
    :where(html[data-page="seo-optimization"]) .journey-mask-path{stroke-dasharray:1;stroke-dashoffset:0}
    :where(html[data-page="seo-optimization"]) .journey-connector{stroke-dasharray:90;stroke-dashoffset:0;opacity:.7}
    :where(html[data-page="seo-optimization"]) .journey-stage,:where(html[data-page="seo-optimization"]) .journey-destination{opacity:1;transform-box:fill-box;transform-origin:center}
    :where(html[data-page="seo-optimization"]) .hero-art.is-animating .journey-mask-path{stroke-dashoffset:1}
    :where(html[data-page="seo-optimization"]) .hero-art.is-animating .journey-connector{stroke-dashoffset:90;opacity:0}
    :where(html[data-page="seo-optimization"]) .hero-art.is-animating .journey-stage,:where(html[data-page="seo-optimization"]) .hero-art.is-animating .journey-destination{opacity:0}
    :where(html[data-page="seo-optimization"]) .hero-art.is-animating.visible .journey-mask-path{animation:page-seo-optimization-journey-reveal 1.05s var(--ease) .08s both}
    :where(html[data-page="seo-optimization"]) .hero-art.is-animating.visible .journey-stage{animation:page-seo-optimization-stage-in .38s ease-out var(--journey-stage-delay,.22s) both}
    :where(html[data-page="seo-optimization"]) .hero-art.is-animating.visible .journey-stage .journey-connector{animation:page-seo-optimization-connector-draw .36s var(--ease) var(--journey-connector-delay,.16s) both}
    :where(html[data-page="seo-optimization"]) .hero-art.is-animating.visible .journey-destination{animation:page-seo-optimization-destination-in .42s ease-out 1.16s both}
    :where(html[data-page="seo-optimization"]) .journey-stage{cursor:pointer;outline:none}
    :where(html[data-page="seo-optimization"]) .journey-stage .journey-card,:where(html[data-page="seo-optimization"]) .journey-stage .journey-node{transform-box:fill-box;transform-origin:center;transition:transform .22s var(--ease),scale .22s var(--ease),filter .22s ease}
    :where(html[data-page="seo-optimization"]) .journey-stage:focus .journey-card{transform:none;scale:none;filter:url(#journeyCardShadowStrong)}
    :where(html[data-page="seo-optimization"]) .journey-stage:focus .journey-node{scale:none;filter:url(#journeyNodeShadow) drop-shadow(0 0 12px rgba(47,128,237,.45))}
    :where(html[data-page="seo-optimization"]) .journey-stage:focus .journey-focus,:where(html[data-page="seo-optimization"]) .journey-stage:hover .journey-focus{opacity:0!important}
    @media(hover:hover) and (pointer:fine){
      :where(html[data-page="seo-optimization"]) .journey-stage:hover .journey-card{transform:none;scale:none;filter:url(#journeyCardShadowStrong)}
      :where(html[data-page="seo-optimization"]) .journey-stage:hover .journey-node{scale:none;filter:url(#journeyNodeShadow) drop-shadow(0 0 12px rgba(47,128,237,.45))}
    }
    @keyframes page-seo-optimization-journey-reveal{to{stroke-dashoffset:0}}
    @keyframes page-seo-optimization-connector-draw{to{stroke-dashoffset:0;opacity:.7}}
    @keyframes page-seo-optimization-stage-in{from{opacity:0}to{opacity:1}}
    @keyframes page-seo-optimization-destination-in{from{opacity:0}to{opacity:1}}

    /* Split section */
    :where(html[data-page="seo-optimization"]) .approach{background:var(--bg-alt)}
    :where(html[data-page="seo-optimization"]) .split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(56px,7vw,96px);align-items:center}
    :where(html[data-page="seo-optimization"]) .section-copy p{max-width:570px;font-size:18px}:where(html[data-page="seo-optimization"]) .section-copy .btn{margin-top:28px}
    :where(html[data-page="seo-optimization"]) .ecosystem{min-height:520px;position:relative}
    :where(html[data-page="seo-optimization"]) .ecosystem svg{width:100%;height:100%}

    /* Capabilities */
    :where(html[data-page="seo-optimization"]) .capabilities{background:var(--bg)}
    :where(html[data-page="seo-optimization"]) .cap-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:56px}:where(html[data-page="seo-optimization"]) .cap-head p{max-width:500px;padding-bottom:8px}
    :where(html[data-page="seo-optimization"]) .cap-index{border-top:1px solid var(--line);position:relative}
    :where(html[data-page="seo-optimization"]) .cap-index::after{content:"SYSTEM BLUEPRINT  /  DISCOVER  →  UNDERSTAND  →  CONVERT";position:absolute;right:0;bottom:-38px;color:var(--muted);font:700 10px Manrope,sans-serif;letter-spacing:.12em}
    :where(html[data-page="seo-optimization"]) .cap-row{display:grid;grid-template-columns:64px 64px 1fr minmax(220px,390px);gap:20px;align-items:center;min-height:118px;border-bottom:1px solid var(--line);transition:background .25s ease,padding .25s var(--ease)}
    :where(html[data-page="seo-optimization"]) .cap-row:hover{background:color-mix(in srgb,var(--surface) 72%,transparent);padding-inline:14px}
    :where(html[data-page="seo-optimization"]) .cap-num{font:800 12px Manrope,sans-serif;color:var(--muted)}
    :where(html[data-page="seo-optimization"]) .cap-icon{width:44px;height:44px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--blue)}
    :where(html[data-page="seo-optimization"]) .cap-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8}
    :where(html[data-page="seo-optimization"]) .cap-row p{font-size:15px}
    :where(html[data-page="seo-optimization"]) .cap-rule{height:1px;background:linear-gradient(90deg,var(--gold),var(--blue),transparent);position:relative}:where(html[data-page="seo-optimization"]) .cap-rule::before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold);top:-3px;left:0}

    /* Impact */
    :where(html[data-page="seo-optimization"]) .impact{background:var(--navy);color:#fff;position:relative;overflow:hidden}
    :where(html[data-page="seo-optimization"]) .impact .eyebrow,:where(html[data-page="seo-optimization"]) .impact h2{color:#fff}:where(html[data-page="seo-optimization"]) .impact p{color:#b8c9dc}
    :where(html[data-page="seo-optimization"]) .impact-grid{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:center}
    :where(html[data-page="seo-optimization"]) .impact-note{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:#91aac4}
    :where(html[data-page="seo-optimization"]) .transform-panel{display:grid;grid-template-columns:1fr 1fr;background:#0a1e39;border:1px solid rgba(255,255,255,.14);border-radius:28px;overflow:hidden;box-shadow:0 28px 70px rgba(0,0,0,.22)}
    :where(html[data-page="seo-optimization"]) .transform-side{min-height:400px;padding:34px;position:relative}:where(html[data-page="seo-optimization"]) .transform-side+ .transform-side{background:linear-gradient(145deg,rgba(47,128,237,.15),rgba(255,197,47,.08));border-left:1px solid rgba(255,255,255,.12)}
    :where(html[data-page="seo-optimization"]) .transform-label{font:800 11px Manrope,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#91aac4}:where(html[data-page="seo-optimization"]) .transform-side.after .transform-label{color:var(--yellow)}
    :where(html[data-page="seo-optimization"]) .signal{margin-top:34px}:where(html[data-page="seo-optimization"]) .signal span{display:block;font-size:12px;color:#94aac0;margin-bottom:8px}:where(html[data-page="seo-optimization"]) .bar{height:7px;background:rgba(255,255,255,.1);border-radius:10px;overflow:hidden}:where(html[data-page="seo-optimization"]) .bar i{display:block;height:100%;background:#607a9b;border-radius:inherit}:where(html[data-page="seo-optimization"]) .after .bar i{background:linear-gradient(90deg,var(--gold),var(--yellow))}
    :where(html[data-page="seo-optimization"]) .transform-foot{position:absolute;left:34px;right:34px;bottom:30px;font:700 13px Manrope,sans-serif;color:#d7e3ef}

    /* Process */
    :where(html[data-page="seo-optimization"]) .process{background:var(--bg-alt)}
    :where(html[data-page="seo-optimization"]) .process-head{display:flex;align-items:end;justify-content:space-between;gap:36px;margin-bottom:44px}:where(html[data-page="seo-optimization"]) .process-head p{max-width:500px;padding-bottom:8px}
    :where(html[data-page="seo-optimization"]) .terrain{position:relative;min-height:470px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
    :where(html[data-page="seo-optimization"]) .terrain-map{position:absolute;inset:0;width:100%;height:100%;opacity:.9;z-index:1}
    :where(html[data-page="seo-optimization"]) .route-cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;height:468px;padding:0}
    :where(html[data-page="seo-optimization"]) .route-card{--rise:0px;position:relative;align-self:start;height:188px;margin-top:var(--rise);padding:28px 18px 20px;background:color-mix(in srgb,var(--surface) 96%,transparent);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 32px rgba(13,35,66,.06)}
    :where(html[data-page="seo-optimization"]) .route-card:nth-child(1){--rise:232px}:where(html[data-page="seo-optimization"]) .route-card:nth-child(2){--rise:194px}:where(html[data-page="seo-optimization"]) .route-card:nth-child(3){--rise:156px}:where(html[data-page="seo-optimization"]) .route-card:nth-child(4){--rise:118px}:where(html[data-page="seo-optimization"]) .route-card:nth-child(5){--rise:80px}
    :where(html[data-page="seo-optimization"]) .route-card::before{content:"";position:absolute;left:50%;top:0;width:16px;height:16px;border:4px solid #fff;border-radius:50%;background:var(--gold);box-shadow:0 0 0 1px rgba(13,35,66,.12),0 5px 12px rgba(245,169,0,.22);transform:translate(-50%,-50%);z-index:3}
    :where(html[data-page="seo-optimization"]) .route-card:last-child::after{content:"";position:absolute;left:50%;top:-44px;width:24px;height:30px;border-left:3px solid var(--navy);border-top:3px solid transparent;transform:translateX(-1px);background:linear-gradient(145deg,var(--yellow) 0 49%,transparent 50%);clip-path:polygon(0 0,100% 18%,0 52%)}
    :where(html[data-page="seo-optimization"]) .route-card .step{font:800 10px Manrope,sans-serif;color:var(--gold);letter-spacing:.13em}:where(html[data-page="seo-optimization"]) .route-card h3{font-size:18px;margin:18px 0 9px}:where(html[data-page="seo-optimization"]) .route-card p{font-size:14px;line-height:1.5}

    /* SEO Principles Framework */
    :where(html[data-page="seo-optimization"]) .belief{background:#f8fbff;overflow:hidden;border-top:1px solid rgba(13,35,66,.06);border-bottom:1px solid rgba(13,35,66,.06)}
    :where(html[data-page="seo-optimization"]) .belief .container{max-width:1440px;padding-inline:clamp(24px,3vw,44px)}
    :where(html[data-page="seo-optimization"]) .principles-layout{display:grid;grid-template-columns:minmax(280px,3fr) minmax(0,9fr);gap:clamp(36px,4vw,58px);align-items:center;width:100%;margin-inline:auto}
    :where(html[data-page="seo-optimization"]) .principles-head{display:block;max-width:430px;margin:0}
    :where(html[data-page="seo-optimization"]) .principles-head h2{max-width:430px}
    :where(html[data-page="seo-optimization"]) .principles-head p{max-width:410px;padding-bottom:0;font-size:18px;line-height:1.68}
    :where(html[data-page="seo-optimization"]) .principles-shell{position:relative;width:100%;overflow:hidden;border:1px solid rgba(13,35,66,.09);border-radius:32px;background:#f8fbff;box-shadow:0 26px 72px rgba(13,35,66,.07);isolation:isolate}
    :where(html[data-page="seo-optimization"]) .principles-framework{display:block;width:100%;height:auto;font-family:Inter,Arial,sans-serif;overflow:hidden}
    :where(html[data-page="seo-optimization"]) .principles-mobile{display:none}
    @media(min-width:768px){
      :where(html[data-page="seo-optimization"]) .principles-shell{aspect-ratio:1440/620}
      :where(html[data-page="seo-optimization"]) .principles-framework{width:100%;height:100%}
    }
    :where(html[data-page="seo-optimization"]) .principle-panel,:where(html[data-page="seo-optimization"]) .principle-panel-bg,:where(html[data-page="seo-optimization"]) .principle-visual,:where(html[data-page="seo-optimization"]) .principle-content,:where(html[data-page="seo-optimization"]) .principles-connector,:where(html[data-page="seo-optimization"]) .principles-node{transform-box:fill-box;transform-origin:center}
    :where(html[data-page="seo-optimization"]) .principle-panel{transition:transform .24s var(--ease),filter .24s ease}
    :where(html[data-page="seo-optimization"]) .principle-visual{transition:transform .24s var(--ease)}
    :where(html[data-page="seo-optimization"]) .principles-connector{transition:opacity .2s ease}
    :where(html[data-page="seo-optimization"]) .principles-node{transition:transform .2s var(--ease)}
    @media(hover:hover) and (pointer:fine){
      :where(html[data-page="seo-optimization"]) .principle-panel:hover{transform:translateY(-5px);filter:url(#principlesPanelShadowStrong)}
      :where(html[data-page="seo-optimization"]) .principle-panel:hover .principle-visual{transform:scale(1.03)}
      :where(html[data-page="seo-optimization"]) .principles-framework:hover .principles-connector{opacity:.65}
      :where(html[data-page="seo-optimization"]) .principles-node:hover{transform:scale(1.18)}
    }
    :where(html[data-page="seo-optimization"]) .principles-shell.is-animating .principle-panel-bg{opacity:1;transform:none}
    :where(html[data-page="seo-optimization"]) .principles-shell.is-animating .principle-visual{opacity:1}
    :where(html[data-page="seo-optimization"]) .principles-shell.is-animating .principles-visual-line{stroke-dasharray:1;stroke-dashoffset:0}
    :where(html[data-page="seo-optimization"]) .principles-shell.is-animating .principles-connector{stroke-dasharray:1;stroke-dashoffset:0;opacity:.35}
    :where(html[data-page="seo-optimization"]) .principles-shell.is-animating .principles-node{opacity:1;transform:none}
    :where(html[data-page="seo-optimization"]) .principles-shell.is-animating .principle-content{opacity:1;transform:none}
    :where(html[data-page="seo-optimization"]) .principles-shell.is-animating.visible #principle-01 .principle-panel-bg{animation:page-seo-optimization-principle-panel-in .65s var(--ease) .12s both}
    :where(html[data-page="seo-optimization"]) .principles-shell.is-animating.visible #principle-02 .principle-panel-bg{animation:page-seo-optimization-principle-panel-in .65s var(--ease) .24s both}
    :where(html[data-page="seo-optimization"]) .principles-shell.is-animating.visible #principle-03 .principle-panel-bg{animation:page-seo-optimization-principle-panel-in .65s var(--ease) .36s both}
    :where(html[data-page="seo-optimization"]) .principles-shell.is-animating.visible .principle-visual{animation:page-seo-optimization-principle-visual-in .9s var(--ease) .46s both}
    :where(html[data-page="seo-optimization"]) .principles-shell.is-animating.visible .principles-visual-line{animation:page-seo-optimization-principle-line-in .9s var(--ease) .5s both}
    :where(html[data-page="seo-optimization"]) .principles-shell.is-animating.visible .principles-connector{animation:page-seo-optimization-principle-line-in 1.2s var(--ease) .66s both}
    :where(html[data-page="seo-optimization"]) .principles-shell.is-animating.visible .principles-node{animation:page-seo-optimization-principle-node-in .25s var(--ease) var(--node-delay,.92s) both}
    :where(html[data-page="seo-optimization"]) .principles-shell.is-animating.visible .principle-content{animation:page-seo-optimization-principle-copy-in .5s var(--ease) var(--copy-delay,.74s) both}
    @keyframes page-seo-optimization-principle-panel-in{from{opacity:.72;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
    @keyframes page-seo-optimization-principle-visual-in{from{opacity:.35}to{opacity:1}}
    @keyframes page-seo-optimization-principle-line-in{from{stroke-dashoffset:1;opacity:.18}to{stroke-dashoffset:0;opacity:1}}
    @keyframes page-seo-optimization-principle-node-in{from{opacity:.55;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
    @keyframes page-seo-optimization-principle-copy-in{from{opacity:.65;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

    /* FAQ */
    :where(html[data-page="seo-optimization"]) .faq{background:var(--bg-alt)}
    :where(html[data-page="seo-optimization"]) .faq-grid{display:grid;grid-template-columns:4fr 8fr;gap:clamp(52px,7vw,92px);align-items:start}
    :where(html[data-page="seo-optimization"]) .faq-sticky{position:sticky;top:124px}:where(html[data-page="seo-optimization"]) .faq-list{border-top:1px solid var(--line)}
    :where(html[data-page="seo-optimization"]) .faq-item{border-bottom:1px solid var(--line)}:where(html[data-page="seo-optimization"]) .faq-button{width:100%;min-height:76px;padding:19px 0;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;font:700 17px Manrope,sans-serif;cursor:pointer}
    :where(html[data-page="seo-optimization"]) .faq-button .plus{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;flex:0 0 auto;transition:transform .25s var(--ease),background .25s ease}
    :where(html[data-page="seo-optimization"]) .faq-answer{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .25s var(--ease),opacity .25s ease}:where(html[data-page="seo-optimization"]) .faq-answer>div{overflow:hidden}:where(html[data-page="seo-optimization"]) .faq-answer p{padding:0 56px 22px 0;font-size:16px;max-width:720px}
    :where(html[data-page="seo-optimization"]) .faq-item.open .faq-answer{grid-template-rows:1fr;opacity:1}:where(html[data-page="seo-optimization"]) .faq-item.open .plus{background:var(--navy);color:#fff;transform:rotate(45deg)}

    /* Enquiry */
    :where(html[data-page="seo-optimization"]) .enquiry{background:var(--deep);color:#fff;position:relative;overflow:hidden}:where(html[data-page="seo-optimization"]) .enquiry .eyebrow,:where(html[data-page="seo-optimization"]) .enquiry h2{color:#fff}:where(html[data-page="seo-optimization"]) .enquiry p{color:#b7c9db}
    :where(html[data-page="seo-optimization"]) .enquiry-grid{display:grid;grid-template-columns:5fr 7fr;gap:72px;position:relative;z-index:2}
    :where(html[data-page="seo-optimization"]) .night-scene{margin-top:40px;height:260px}:where(html[data-page="seo-optimization"]) .night-scene svg{width:100%;height:100%;overflow:visible}
    :where(html[data-page="seo-optimization"]) .brief-form{background:#fff;color:#0d2342;padding:34px;border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.22)}
    :where(html[data-page="seo-optimization"]) .brief-form h3{color:#0d2342;font-size:26px;margin-bottom:24px}:where(html[data-page="seo-optimization"]) .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}:where(html[data-page="seo-optimization"]) .field{display:grid;gap:7px}:where(html[data-page="seo-optimization"]) .field.full{grid-column:1/-1}:where(html[data-page="seo-optimization"]) .field label{font:700 12px Manrope,sans-serif;color:#294866}:where(html[data-page="seo-optimization"]) .field input,:where(html[data-page="seo-optimization"]) .field select,:where(html[data-page="seo-optimization"]) .field textarea{width:100%;border:1px solid rgba(13,35,66,.18);border-radius:12px;background:#fff;color:#0d2342;padding:12px 13px;min-height:48px}:where(html[data-page="seo-optimization"]) .field textarea{min-height:116px;resize:vertical}:where(html[data-page="seo-optimization"]) .field small{min-height:16px;color:#b72f2f;font-size:12px}:where(html[data-page="seo-optimization"]) .form-actions{display:flex;align-items:center;gap:15px;margin-top:8px}:where(html[data-page="seo-optimization"]) .form-status{font-size:13px;color:#466581}:where(html[data-page="seo-optimization"]) .form-note{font-size:12px;color:#71869d;margin-top:14px}:where(html[data-page="seo-optimization"]) .honeypot{position:absolute!important;left:-9999px!important}

    :where(html[data-page="seo-optimization"]) [data-reveal],:where(html[data-page="seo-optimization"]) .motion-ready [data-reveal]{opacity:1;transform:none}
    @media(max-width:1050px){
      :where(html[data-page="seo-optimization"]) .split,:where(html[data-page="seo-optimization"]) .impact-grid,:where(html[data-page="seo-optimization"]) .enquiry-grid{grid-template-columns:1fr;gap:48px}:where(html[data-page="seo-optimization"]) .principles-head{grid-template-columns:1fr;gap:18px}:where(html[data-page="seo-optimization"]) .ecosystem{min-height:460px}:where(html[data-page="seo-optimization"]) .cap-head,:where(html[data-page="seo-optimization"]) .process-head{align-items:start;flex-direction:column}:where(html[data-page="seo-optimization"]) .route-cards{grid-template-columns:repeat(3,1fr);padding-top:100px}:where(html[data-page="seo-optimization"]) .route-card:nth-child(even){margin-top:0}:where(html[data-page="seo-optimization"]) .faq-grid{grid-template-columns:1fr;gap:38px}:where(html[data-page="seo-optimization"]) .faq-sticky{position:static}}
    @media(max-width:1050px){
      :where(html[data-page="seo-optimization"]) .principles-layout{grid-template-columns:1fr;gap:30px}
      :where(html[data-page="seo-optimization"]) .principles-head{max-width:720px}
      :where(html[data-page="seo-optimization"]) .principles-head h2{max-width:650px}
      :where(html[data-page="seo-optimization"]) .principles-head p{max-width:620px}
    }
    @media(max-width:767px){
      :root:where([data-page="seo-optimization"]){--gutter:20px;--section:72px}:where(html[data-page="seo-optimization"]) .hero{padding-top:50px}:where(html[data-page="seo-optimization"]) .hero-copy{text-align:center}:where(html[data-page="seo-optimization"]) .hero-copy .eyebrow{justify-content:center}:where(html[data-page="seo-optimization"]) h1{font-size:clamp(42px,12vw,56px);margin-inline:auto}:where(html[data-page="seo-optimization"]) .hero-copy p{font-size:17px}:where(html[data-page="seo-optimization"]) .hero-actions{display:grid;justify-content:stretch}:where(html[data-page="seo-optimization"]) .hero-actions .btn{width:100%}:where(html[data-page="seo-optimization"]) .hero-art{height:auto;aspect-ratio:390/930;margin-top:30px}:where(html[data-page="seo-optimization"]) .hero-label{display:none}:where(html[data-page="seo-optimization"]) .ecosystem{min-height:390px}:where(html[data-page="seo-optimization"]) .cap-index::after{display:none}:where(html[data-page="seo-optimization"]) .cap-row{grid-template-columns:42px 48px 1fr;gap:12px;padding:18px 0}:where(html[data-page="seo-optimization"]) .cap-rule{display:none}:where(html[data-page="seo-optimization"]) .cap-row p{grid-column:2/-1}:where(html[data-page="seo-optimization"]) .transform-panel{grid-template-columns:1fr}:where(html[data-page="seo-optimization"]) .transform-side{min-height:300px}:where(html[data-page="seo-optimization"]) .transform-side+ .transform-side{border-left:0;border-top:1px solid rgba(255,255,255,.12)}:where(html[data-page="seo-optimization"]) .route-cards{grid-template-columns:1fr;padding:40px 0}:where(html[data-page="seo-optimization"]) .route-card,:where(html[data-page="seo-optimization"]) .route-card:nth-child(even){min-height:0;margin:0;padding:22px}:where(html[data-page="seo-optimization"]) .terrain-map{display:none}:where(html[data-page="seo-optimization"]) .principles-head{margin-bottom:28px}:where(html[data-page="seo-optimization"]) .principles-head p{font-size:17px;padding-bottom:0}:where(html[data-page="seo-optimization"]) .principles-shell{border-radius:24px}:where(html[data-page="seo-optimization"]) .principles-desktop,:where(html[data-page="seo-optimization"]) #FrameworkBackground{display:none}:where(html[data-page="seo-optimization"]) .principles-mobile{display:block}:where(html[data-page="seo-optimization"]) .faq-button{font-size:16px}:where(html[data-page="seo-optimization"]) .brief-form{padding:24px}:where(html[data-page="seo-optimization"]) .form-grid{grid-template-columns:1fr}:where(html[data-page="seo-optimization"]) .field.full{grid-column:auto}:where(html[data-page="seo-optimization"]) .form-actions{align-items:stretch;flex-direction:column}:where(html[data-page="seo-optimization"]) .form-actions .btn{width:100%}:where(html[data-page="seo-optimization"]) .night-scene{height:200px}:where(html[data-page="seo-optimization"]) .section-copy p{font-size:17px}
    }
    @media(max-width:420px){:root:where([data-page="seo-optimization"]){--gutter:20px}:where(html[data-page="seo-optimization"]) .hero-art{height:auto;aspect-ratio:390/930}}
@media(prefers-reduced-motion:reduce){html:where([data-page="seo-optimization"]){scroll-behavior:auto}:where(html[data-page="seo-optimization"]) *,:where(html[data-page="seo-optimization"]) *::before,:where(html[data-page="seo-optimization"]) *::after{animation:none!important;transition:none!important}:where(html[data-page="seo-optimization"]) [data-reveal]{opacity:1;transform:none}}

    /* 2026 refinement pass — quieter surfaces, sharper hierarchy, more tactile detail */
    :where(html[data-page="seo-optimization"]) body{letter-spacing:-.006em}
    :where(html[data-page="seo-optimization"]) .section{position:relative}
    :where(html[data-page="seo-optimization"]) .hero{padding-top:82px}
    :where(html[data-page="seo-optimization"]) .hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(13,35,66,.13) .7px,transparent .7px);background-size:28px 28px;mask-image:linear-gradient(to bottom,transparent 0,#000 38%,transparent 78%);opacity:.28;pointer-events:none}
    :where(html[data-page="seo-optimization"]) .hero-copy{z-index:3}
    :where(html[data-page="seo-optimization"]) .hero-copy p{line-height:1.62;color:#526d89}
    :where(html[data-page="seo-optimization"]) .hero-actions{margin-top:34px}
    :where(html[data-page="seo-optimization"]) .hero-art{overflow:hidden;border:1px solid transparent;border-radius:34px;background:linear-gradient(180deg,#f8fbff 0%,#fff 74%);box-shadow:none}
    :where(html[data-page="seo-optimization"]) .hero-art::before{content:"";position:absolute;inset:16px;border:1px solid transparent;border-radius:23px;pointer-events:none;z-index:2}
    :where(html[data-page="seo-optimization"]) .hero-art svg{position:relative;z-index:1}

    :where(html[data-page="seo-optimization"]) .approach{border-top:1px solid rgba(13,35,66,.06);border-bottom:1px solid rgba(13,35,66,.06);background:#fbfdff}
    :where(html[data-page="seo-optimization"]) .section-copy p{line-height:1.68}
    :where(html[data-page="seo-optimization"]) .ecosystem{border:1px solid rgba(13,35,66,.09);border-radius:32px;background-color:#fff;background-image:radial-gradient(rgba(47,128,237,.14) .7px,transparent .7px);background-size:24px 24px;box-shadow:0 24px 70px rgba(13,35,66,.06);overflow:hidden}
    :where(html[data-page="seo-optimization"]) .ecosystem::before{content:"CONNECTED INPUTS";position:absolute;top:22px;left:24px;color:#6b8199;font:800 10px/1 Manrope,sans-serif;letter-spacing:.14em;z-index:2}
    :where(html[data-page="seo-optimization"]) .ecosystem svg{padding:20px}

    :where(html[data-page="seo-optimization"]) .cap-head{padding-bottom:32px;margin-bottom:0;border-bottom:1px solid var(--line)}
    :where(html[data-page="seo-optimization"]) .cap-index{border-top:0}
    :where(html[data-page="seo-optimization"]) .cap-row{position:relative;grid-template-columns:48px 56px minmax(150px,.75fr) minmax(250px,1fr) 170px;overflow:hidden}
    :where(html[data-page="seo-optimization"]) .cap-row::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:2px;background:var(--blue);transform:scaleY(0);transform-origin:center;transition:transform .25s var(--ease)}
    :where(html[data-page="seo-optimization"]) .cap-row:nth-child(2)::before,:where(html[data-page="seo-optimization"]) .cap-row:nth-child(6)::before{background:var(--gold)}
    :where(html[data-page="seo-optimization"]) .cap-row:nth-child(4)::before{background:#8754f6}
    :where(html[data-page="seo-optimization"]) .cap-row:nth-child(5)::before{background:var(--green)}
    :where(html[data-page="seo-optimization"]) .cap-row:hover::before{transform:scaleY(1)}
    :where(html[data-page="seo-optimization"]) .cap-row:hover{background:#fbfdff;padding-inline:16px}
    :where(html[data-page="seo-optimization"]) .cap-icon{border-radius:12px;box-shadow:0 7px 18px rgba(13,35,66,.05)}
    :where(html[data-page="seo-optimization"]) .cap-row h3{font-size:20px}
    :where(html[data-page="seo-optimization"]) .cap-row p{color:#526d89}
    :where(html[data-page="seo-optimization"]) .cap-rule{justify-self:end;width:100%;max-width:170px}

    :where(html[data-page="seo-optimization"]) .impact::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 42%,rgba(47,128,237,.16),transparent 27%);pointer-events:none}
    :where(html[data-page="seo-optimization"]) .impact-grid{position:relative;z-index:1}
    :where(html[data-page="seo-optimization"]) .impact-note{line-height:1.55}
    :where(html[data-page="seo-optimization"]) .transform-panel{border-radius:24px;box-shadow:0 34px 80px rgba(0,0,0,.26)}
    :where(html[data-page="seo-optimization"]) .transform-side{padding:38px}
    :where(html[data-page="seo-optimization"]) .signal{margin-top:38px}
    :where(html[data-page="seo-optimization"]) .bar{height:6px}
    :where(html[data-page="seo-optimization"]) .after .bar i{box-shadow:0 0 15px rgba(255,197,47,.28)}

    :where(html[data-page="seo-optimization"]) .process{background:#fff}
    :where(html[data-page="seo-optimization"]) .process-head{padding-bottom:30px;margin-bottom:0}
    :where(html[data-page="seo-optimization"]) .terrain{border:1px solid rgba(13,35,66,.09);border-radius:28px;background:#fbfdff;box-shadow:0 22px 64px rgba(13,35,66,.05);padding-inline:24px}
    :where(html[data-page="seo-optimization"]) .route-card{border-radius:16px;box-shadow:0 12px 26px rgba(13,35,66,.055);transition:transform .25s var(--ease),box-shadow .25s ease,border-color .25s ease}
    :where(html[data-page="seo-optimization"]) .route-card:hover{transform:translateY(-4px);border-color:rgba(47,128,237,.22);box-shadow:0 18px 34px rgba(13,35,66,.09)}
    :where(html[data-page="seo-optimization"]) .route-card:nth-child(even):hover{transform:translateY(-4px)}

    :where(html[data-page="seo-optimization"]) .principles-shell::after{content:"";position:absolute;inset:16px;border:1px solid rgba(47,128,237,.07);border-radius:22px;pointer-events:none;z-index:2}

    :where(html[data-page="seo-optimization"]) .faq{background:#fff}
    :where(html[data-page="seo-optimization"]) .faq-list{border-top-color:rgba(13,35,66,.16)}
    :where(html[data-page="seo-optimization"]) .faq-item{transition:background .2s ease}
    :where(html[data-page="seo-optimization"]) .faq-item.open{background:#fbfdff}
    :where(html[data-page="seo-optimization"]) .faq-button{padding-inline:18px}
    :where(html[data-page="seo-optimization"]) .faq-answer p{padding-left:18px}
    :where(html[data-page="seo-optimization"]) .faq-button .plus{background:#fff}

    :where(html[data-page="seo-optimization"]) .enquiry::before{content:"";position:absolute;width:620px;height:620px;border:1px solid rgba(255,255,255,.05);border-radius:50%;left:-230px;bottom:-410px;box-shadow:0 0 0 80px rgba(255,255,255,.018),0 0 0 160px rgba(255,255,255,.012)}
    :where(html[data-page="seo-optimization"]) .brief-form{border-radius:24px;border:1px solid rgba(255,255,255,.55);box-shadow:0 34px 90px rgba(0,0,0,.25)}
    :where(html[data-page="seo-optimization"]) .field input,:where(html[data-page="seo-optimization"]) .field select,:where(html[data-page="seo-optimization"]) .field textarea{transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
    :where(html[data-page="seo-optimization"]) .field input:hover,:where(html[data-page="seo-optimization"]) .field select:hover,:where(html[data-page="seo-optimization"]) .field textarea:hover{border-color:rgba(13,35,66,.32)}
    :where(html[data-page="seo-optimization"]) .field input:focus,:where(html[data-page="seo-optimization"]) .field select:focus,:where(html[data-page="seo-optimization"]) .field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(47,128,237,.12)}
    :where(html[data-page="seo-optimization"]) .field input[aria-invalid="true"],:where(html[data-page="seo-optimization"]) .field select[aria-invalid="true"],:where(html[data-page="seo-optimization"]) .field textarea[aria-invalid="true"]{border-color:#b72f2f;box-shadow:0 0 0 3px rgba(183,47,47,.08)}

    @media(max-width:1050px){
      :where(html[data-page="seo-optimization"]) .cap-row{grid-template-columns:48px 56px minmax(150px,.75fr) minmax(220px,1fr)}
      :where(html[data-page="seo-optimization"]) .cap-rule{display:none}
    }
    @media(max-width:767px){
      :where(html[data-page="seo-optimization"]) .hero{padding-top:54px}
      :where(html[data-page="seo-optimization"]) .hero::after{opacity:.18}
      :where(html[data-page="seo-optimization"]) .hero-art{height:auto;aspect-ratio:390/930;border-radius:22px;box-shadow:none}
      :where(html[data-page="seo-optimization"]) .hero-art::before{inset:10px;border-radius:15px}
      :where(html[data-page="seo-optimization"]) .ecosystem{border-radius:22px;min-height:380px}
      :where(html[data-page="seo-optimization"]) .ecosystem svg{padding:8px}
      :where(html[data-page="seo-optimization"]) .cap-head{padding-bottom:24px}
      :where(html[data-page="seo-optimization"]) .cap-row{grid-template-columns:38px 48px 1fr;padding:20px 0}
      :where(html[data-page="seo-optimization"]) .cap-row:hover{padding-inline:8px}
      :where(html[data-page="seo-optimization"]) .cap-row::before{top:18px;bottom:18px}
      :where(html[data-page="seo-optimization"]) .terrain{border-radius:20px;padding-inline:16px}
      :where(html[data-page="seo-optimization"]) .route-card:hover,:where(html[data-page="seo-optimization"]) .route-card:nth-child(even):hover{transform:none}
      :where(html[data-page="seo-optimization"]) .lenses::before{display:none}
      :where(html[data-page="seo-optimization"]) .faq-button{padding-inline:4px}
      :where(html[data-page="seo-optimization"]) .faq-answer p{padding-left:4px}
      :where(html[data-page="seo-optimization"]) .brief-form{border-radius:20px}
    }

    /* Process route: one continuous climb, with each checkpoint anchored to the path. */
    @media(min-width:1101px){
      :where(html[data-page="seo-optimization"]) .terrain-map{left:24px;right:24px;width:calc(100% - 48px)}
      :where(html[data-page="seo-optimization"]) .route-cards{grid-template-columns:repeat(5,minmax(0,1fr));height:468px;padding:0;gap:14px}
      :where(html[data-page="seo-optimization"]) .route-card:nth-child(n){height:auto;min-height:188px;margin-top:var(--rise)}
    }
    @media(max-width:1100px){
      :where(html[data-page="seo-optimization"]) .terrain{min-height:0;padding:30px 20px}
      :where(html[data-page="seo-optimization"]) .terrain-map{display:none}
      :where(html[data-page="seo-optimization"]) .route-cards{height:auto;display:grid;grid-template-columns:1fr;gap:14px;padding:0 0 0 34px}
      :where(html[data-page="seo-optimization"]) .route-cards::before{content:"";position:absolute;left:8px;top:25px;bottom:25px;width:3px;border-radius:999px;background:linear-gradient(var(--gold),var(--yellow))}
      :where(html[data-page="seo-optimization"]) .route-card:nth-child(n){height:auto;min-height:152px;margin:0;padding:25px 22px 20px}
      :where(html[data-page="seo-optimization"]) .route-card::before{left:-26px;top:32px;transform:translate(-50%,-50%)}
      :where(html[data-page="seo-optimization"]) .route-card:last-child::after{left:-26px;top:0;transform:translateX(-1px)}
      :where(html[data-page="seo-optimization"]) .route-card h3{margin-top:14px}
    }
    @media(max-width:480px){
      :where(html[data-page="seo-optimization"]) .terrain{padding:26px 14px}
      :where(html[data-page="seo-optimization"]) .route-cards{padding-left:30px}
      :where(html[data-page="seo-optimization"]) .route-cards::before{left:7px}
      :where(html[data-page="seo-optimization"]) .route-card::before,:where(html[data-page="seo-optimization"]) .route-card:last-child::after{left:-23px}
    }

    /* Responsive type guardrails: preserve whole words and comfortable measures. */
    :where(html[data-page="seo-optimization"]) .container > *,:where(html[data-page="seo-optimization"]) 
    .split > *,:where(html[data-page="seo-optimization"]) 
    .impact-grid > *,:where(html[data-page="seo-optimization"]) 
    .principles-head > *,:where(html[data-page="seo-optimization"]) 
    .enquiry-grid > *,:where(html[data-page="seo-optimization"]) 
    .cap-head > *,:where(html[data-page="seo-optimization"]) 
    .process-head > *,:where(html[data-page="seo-optimization"]) 
    .shared-footer-top-grid > *{min-width:0}
    :where(html[data-page="seo-optimization"]) h1,:where(html[data-page="seo-optimization"]) h2,:where(html[data-page="seo-optimization"]) h3,:where(html[data-page="seo-optimization"]) .eyebrow,:where(html[data-page="seo-optimization"]) .faq-button span:first-child{
      overflow-wrap:normal;
      word-break:normal;
      hyphens:none;
      text-wrap:balance;
    }
    :where(html[data-page="seo-optimization"]) p,:where(html[data-page="seo-optimization"]) .form-note,:where(html[data-page="seo-optimization"]) .form-status{
      max-width:100%;
      overflow-wrap:break-word;
      word-break:normal;
      text-wrap:pretty;
    }
    :where(html[data-page="seo-optimization"]) .btn{
      max-width:100%;
      height:auto;
      padding-block:14px;
      line-height:1.25;
      text-align:center;
      white-space:normal;
    }
    :where(html[data-page="seo-optimization"]) .faq-button span:first-child{min-width:0;padding-right:4px}
    :where(html[data-page="seo-optimization"]) .field,:where(html[data-page="seo-optimization"]) .field input,:where(html[data-page="seo-optimization"]) .field select,:where(html[data-page="seo-optimization"]) .field textarea{min-width:0;max-width:100%}

    @media(max-width:767px){
      :where(html[data-page="seo-optimization"]) h1{font-size:clamp(40px,11.5vw,52px);line-height:1.02}
      :where(html[data-page="seo-optimization"]) h2{font-size:clamp(34px,9.5vw,42px);line-height:1.06}
      :where(html[data-page="seo-optimization"]) h3{letter-spacing:-.035em}
      :where(html[data-page="seo-optimization"]) .eyebrow{line-height:1.35}
      :where(html[data-page="seo-optimization"]) .section-copy,:where(html[data-page="seo-optimization"]) .cap-head>*,:where(html[data-page="seo-optimization"]) .process-head>*,:where(html[data-page="seo-optimization"]) .faq-sticky{max-width:100%}
      :where(html[data-page="seo-optimization"]) .faq-button{align-items:flex-start;line-height:1.35}
      :where(html[data-page="seo-optimization"]) .faq-button .plus{margin-top:1px}
    }
    @media(max-width:360px){
      :root:where([data-page="seo-optimization"]){--gutter:18px}
      :where(html[data-page="seo-optimization"]) h1{font-size:38px}
      :where(html[data-page="seo-optimization"]) h2{font-size:32px}
      :where(html[data-page="seo-optimization"]) .cap-row{grid-template-columns:30px 42px minmax(0,1fr);gap:10px}
      :where(html[data-page="seo-optimization"]) .cap-icon{width:40px;height:40px}
      :where(html[data-page="seo-optimization"]) .faq-button{gap:10px;font-size:15px}
      :where(html[data-page="seo-optimization"]) .faq-button .plus{width:34px;height:34px}
      :where(html[data-page="seo-optimization"]) .brief-form{padding:20px}
    }

    /* Connected SEO growth system — canonical 839 × 657 desktop composition. */
    @media(min-width:1051px){:where(html[data-page="seo-optimization"]) .approach .split{grid-template-columns:minmax(270px,3.5fr) minmax(0,8.5fr);gap:clamp(40px,4vw,58px)}}
    :where(html[data-page="seo-optimization"]) .ecosystem{
      min-height:0;
      aspect-ratio:839/657;
      isolation:isolate;
      background:#fff;
      border-color:#dce5ef;
      border-radius:24px;
      box-shadow:0 24px 70px rgba(15,39,71,.07);
    }
    :where(html[data-page="seo-optimization"]) .ecosystem::before{display:none}
    :where(html[data-page="seo-optimization"]) .ecosystem svg{width:100%;height:auto;padding:0;overflow:hidden}
    :where(html[data-page="seo-optimization"]) .mobile-growth-diagram{display:none}
    :where(html[data-page="seo-optimization"]) .growth-diagram{font-family:Manrope,sans-serif}
    :where(html[data-page="seo-optimization"]) .growth-diagram .orbit-ring{transform-box:fill-box;transform-origin:center;animation:page-seo-optimization-eco-orbit 34s linear infinite;animation-play-state:paused}
    :where(html[data-page="seo-optimization"]) .growth-diagram .orbit-ring:nth-child(2){animation-direction:reverse;animation-duration:44s}
    :where(html[data-page="seo-optimization"]) .growth-diagram .flow-line{stroke-dasharray:5 8;animation:page-seo-optimization-eco-flow 5.2s linear infinite;animation-play-state:paused}
    :where(html[data-page="seo-optimization"]) .ecosystem.in-view .growth-diagram .orbit-ring,:where(html[data-page="seo-optimization"]) .ecosystem.in-view .growth-diagram .flow-line{animation-play-state:running}
    :where(html[data-page="seo-optimization"]) .growth-diagram .node-shell,:where(html[data-page="seo-optimization"]) .growth-diagram .node-body,:where(html[data-page="seo-optimization"]) .growth-diagram .central-body,:where(html[data-page="seo-optimization"]) .growth-diagram .connector{transition:opacity .22s ease,filter .22s ease,transform .24s var(--ease),stroke-width .22s ease}
    :where(html[data-page="seo-optimization"]) .growth-diagram .seo-node{cursor:pointer;outline:none}
    :where(html[data-page="seo-optimization"]) .growth-diagram .seo-node:hover .node-body,:where(html[data-page="seo-optimization"]) .growth-diagram .seo-node:focus .node-body{transform:translateY(-4px);filter:url(#ecoNodeShadowStrong)}
    :where(html[data-page="seo-optimization"]) .growth-diagram .seo-node:focus .focus-ring{opacity:1}
    :where(html[data-page="seo-optimization"]) .growth-diagram.is-active .seo-node:not(.is-active){opacity:.55}
    :where(html[data-page="seo-optimization"]) .growth-diagram.is-active .connector:not(.is-active){opacity:.18}
    :where(html[data-page="seo-optimization"]) .growth-diagram.is-active .connector.is-active{opacity:1;stroke-width:3}
    :where(html[data-page="seo-optimization"]) .growth-diagram.is-active .central-body{filter:url(#ecoCentralShadowStrong)}
    :where(html[data-page="seo-optimization"]) .growth-diagram .central-node{cursor:pointer;outline:none}
    :where(html[data-page="seo-optimization"]) .growth-diagram .central-node:hover .central-body,:where(html[data-page="seo-optimization"]) .growth-diagram .central-node:focus .central-body{transform:scale(1.025);transform-box:fill-box;transform-origin:center;filter:url(#ecoCentralShadowStrong)}
    :where(html[data-page="seo-optimization"]) .growth-diagram.central-active .connector{opacity:1;stroke-width:2.5}
    :where(html[data-page="seo-optimization"]) .growth-diagram.central-active .orbitals{opacity:1}
    :where(html[data-page="seo-optimization"]) .growth-diagram .annotation-path{stroke-dasharray:120;stroke-dashoffset:120}
    :where(html[data-page="seo-optimization"]) .ecosystem.visible .growth-diagram .annotation-path{animation:page-seo-optimization-eco-draw 1.15s var(--ease) .55s both}
    :where(html[data-page="seo-optimization"]) .growth-diagram .annotation-copy{font-family:Caveat,cursive}
    :where(html[data-page="seo-optimization"]) .desktop-growth-diagram .seo-node text[font-size="12.5"]{font-size:13.5px}
    :where(html[data-page="seo-optimization"]) .desktop-growth-diagram .annotation-copy{font-size:18px}
    @keyframes page-seo-optimization-eco-orbit{to{transform:rotate(360deg)}}
    @keyframes page-seo-optimization-eco-flow{to{stroke-dashoffset:-52}}
    @keyframes page-seo-optimization-eco-draw{to{stroke-dashoffset:0}}
    @media(max-width:767px){
      :where(html[data-page="seo-optimization"]) .ecosystem{aspect-ratio:auto;min-height:0;border-radius:22px}
      :where(html[data-page="seo-optimization"]) .desktop-growth-diagram{display:none}
      :where(html[data-page="seo-optimization"]) .mobile-growth-diagram{display:block}
      :where(html[data-page="seo-optimization"]) .mobile-growth-diagram .seo-node:hover .node-body,:where(html[data-page="seo-optimization"]) .mobile-growth-diagram .seo-node:focus .node-body{transform:none;filter:url(#ecoMobileCardShadow)}
      :where(html[data-page="seo-optimization"]) .mobile-growth-diagram .central-node:hover .central-body,:where(html[data-page="seo-optimization"]) .mobile-growth-diagram .central-node:focus .central-body{transform:none;filter:url(#ecoMobileCoreShadow)}
      :where(html[data-page="seo-optimization"]) .mobile-growth-diagram.is-active .seo-node:not(.is-active){opacity:1}
      :where(html[data-page="seo-optimization"]) .mobile-growth-diagram .seo-node:focus .focus-ring{opacity:1}
    }
    @media(prefers-reduced-motion:reduce){
      :where(html[data-page="seo-optimization"]) .growth-diagram .orbit-ring,:where(html[data-page="seo-optimization"]) .growth-diagram .flow-line,:where(html[data-page="seo-optimization"]) .growth-diagram .annotation-path{animation:none!important;stroke-dashoffset:0}
      :where(html[data-page="seo-optimization"]) .growth-diagram .node-shell,:where(html[data-page="seo-optimization"]) .growth-diagram .node-body,:where(html[data-page="seo-optimization"]) .growth-diagram .central-body,:where(html[data-page="seo-optimization"]) .growth-diagram .connector{transition:none!important}
    }
    /* SEO growth journey hero — desktop landscape and intentional mobile reflow. */
    @media(max-width:767px){
      :where(html[data-page="seo-optimization"]) .hero-journey-desktop{display:none}
      :where(html[data-page="seo-optimization"]) .hero-journey-mobile{display:block}
      :where(html[data-page="seo-optimization"]) .hero-art{max-width:430px;margin-inline:auto;background:#f8fbff;contain:layout paint}
      :where(html[data-page="seo-optimization"]) .hero-art.is-animating.visible .journey-mask-path{animation-duration:.82s;animation-delay:.06s}
      :where(html[data-page="seo-optimization"]) .hero-art.is-animating .journey-stage,:where(html[data-page="seo-optimization"]) .hero-art.is-animating .journey-destination{opacity:1}
      :where(html[data-page="seo-optimization"]) .hero-art.is-animating .journey-connector{stroke-dashoffset:0;opacity:.7}
      :where(html[data-page="seo-optimization"]) .hero-art.is-animating.visible .journey-stage,:where(html[data-page="seo-optimization"]) .hero-art.is-animating.visible .journey-stage .journey-connector,:where(html[data-page="seo-optimization"]) .hero-art.is-animating.visible .journey-destination{animation:none}
      :where(html[data-page="seo-optimization"]) .journey-stage,:where(html[data-page="seo-optimization"]) .journey-destination{transform:none;scale:none}
      :where(html[data-page="seo-optimization"]) .journey-stage:hover .journey-card,:where(html[data-page="seo-optimization"]) .journey-stage:focus .journey-card{transform:none;scale:none;filter:url(#mobileCardShadow) drop-shadow(0 0 8px rgba(47,128,237,.35))}
      :where(html[data-page="seo-optimization"]) .journey-stage:hover .journey-node,:where(html[data-page="seo-optimization"]) .journey-stage:focus .journey-node{transform:none;scale:none;filter:drop-shadow(0 0 6px rgba(47,128,237,.45))}
    }
    @keyframes page-seo-optimization-mobile-stage-in{from{opacity:0}to{opacity:1}}
    @keyframes page-seo-optimization-mobile-destination-in{from{opacity:0}to{opacity:1}}
    @media(min-width:768px) and (max-width:1199px){
      :where(html[data-page="seo-optimization"]) .hero-art{aspect-ratio:1632/731}
    }
    @media(max-width:767px){
      :where(html[data-page="seo-optimization"]) .principles-shell::after{inset:10px;border-radius:16px}
      :where(html[data-page="seo-optimization"]) .principles-shell.is-animating .principle-panel-bg,:where(html[data-page="seo-optimization"]) 
      .principles-shell.is-animating .principle-visual,:where(html[data-page="seo-optimization"]) 
      .principles-shell.is-animating .principle-content,:where(html[data-page="seo-optimization"]) 
      .principles-shell.is-animating .principles-node{opacity:1;transform:none}
      :where(html[data-page="seo-optimization"]) .principles-shell.is-animating .principles-visual-line,:where(html[data-page="seo-optimization"]) 
      .principles-shell.is-animating .principles-connector{stroke-dashoffset:0;opacity:1}
      :where(html[data-page="seo-optimization"]) .principles-shell.is-animating.visible .principle-panel-bg,:where(html[data-page="seo-optimization"]) 
      .principles-shell.is-animating.visible .principle-visual,:where(html[data-page="seo-optimization"]) 
      .principles-shell.is-animating.visible .principle-content,:where(html[data-page="seo-optimization"]) 
      .principles-shell.is-animating.visible .principles-node,:where(html[data-page="seo-optimization"]) 
      .principles-shell.is-animating.visible .principles-visual-line,:where(html[data-page="seo-optimization"]) 
      .principles-shell.is-animating.visible .principles-connector{animation:none}
    }
    @media(prefers-reduced-motion:reduce){
      :where(html[data-page="seo-optimization"]) .motion-ready [data-reveal]{opacity:1!important;transform:none!important}
      :where(html[data-page="seo-optimization"]) .journey-path{opacity:1!important}
      :where(html[data-page="seo-optimization"]) .journey-mask-path{stroke-dashoffset:0!important}
      :where(html[data-page="seo-optimization"]) .journey-connector{stroke-dashoffset:0!important;opacity:.7!important}
      :where(html[data-page="seo-optimization"]) .journey-stage,:where(html[data-page="seo-optimization"]) .journey-destination{opacity:1!important;transform:none!important;scale:none!important}
    }

    /* Warm canvas shared with the Team page. */
    html:where([data-page="seo-optimization"]),:where(html[data-page="seo-optimization"]) body,:where(html[data-page="seo-optimization"]) .hero,:where(html[data-page="seo-optimization"]) .capabilities,:where(html[data-page="seo-optimization"]) .process,:where(html[data-page="seo-optimization"]) .faq{background:var(--bg)}
    :where(html[data-page="seo-optimization"]) .approach,:where(html[data-page="seo-optimization"]) .belief{background:var(--bg-alt)}
  

/* PAGE ai-automation */
/* ai-automation.html embedded 1 */

    /* ==========================================================================
   Kaxon Technologies - AI Automation Services Stylesheet (ai-automation.css)
   Pure Vanilla CSS - Pixel-faithful to Reference Design Specification
   ========================================================================== */

    :root:where([data-page="ai-automation"]) {
      /* Surface & Background */
      --bg-primary: #FBF7EE;
      --bg-secondary: #FFFDF8;
      --bg-soft: #F8F4EB;
      --surface-white: #FFFFFF;

      /* Brand Palettes */
      --navy-primary: #102747;
      --navy-dark: #0A213F;
      --navy-footer: #07233F;
      --navy-card-cta: #0D2A4D;

      /* Typography Colors */
      --text-primary: #102747;
      --text-secondary: #667286;
      --text-muted: #8A94A4;

      /* Accent Colors */
      --yellow-primary: #FFC72C;
      --yellow-hover: #F2B900;
      --yellow-soft: #FFF3C6;
      --yellow-note: #FFF1B9;
      --yellow-note-text: #DBA000;

      --mint-primary: #19B891;
      --mint-soft: #E5F8F1;
      --mint-text: #0E9A75;

      --blue-primary: #2F74FF;
      --blue-soft: #EAF1FF;
      --blue-line: #4F96EA;

      --pink-primary: #ED5488;
      --pink-soft: #FCEAF1;

      --purple-primary: #7759E8;
      --purple-soft: #EFEAFF;

      --orange-primary: #F5A623;
      --orange-soft: #FFF2DD;

      /* Borders & Shadows */
      --border-light: rgba(16, 39, 71, 0.07);
      --border-medium: rgba(16, 39, 71, 0.11);
      --shadow-subtle: 0 4px 16px rgba(16, 39, 71, 0.04);
      --shadow-card: 0 10px 28px rgba(16, 39, 71, 0.055);
      --shadow-card-hover: 0 18px 40px rgba(16, 39, 71, 0.10);
      --shadow-hero-float: 0 18px 45px rgba(16, 39, 71, 0.09);
      --shadow-yellow-btn: 0 8px 24px rgba(255, 199, 44, 0.28);
    }

    /* ==========================================================================
   BASE RESETS & GLOBAL CONTAINER
   ========================================================================== */
    :where(html[data-page="ai-automation"]) * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html:where([data-page="ai-automation"]),:where(html[data-page="ai-automation"]) 
    body {
      font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: var(--bg-primary);
      color: var(--text-primary);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
      width: 100%;
    }

    :where(html[data-page="ai-automation"]) .ai-container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 24px;
    }

    @media (max-width: 1024px) {
      :where(html[data-page="ai-automation"]) .ai-container {
        padding: 0 24px;
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="ai-automation"]) .ai-container {
        padding: 0 16px;
      }
    }

    /* Handwritten Font Helper */
    :where(html[data-page="ai-automation"]) .ai-handwritten {
      font-family: 'Caveat', cursive, sans-serif;
      font-weight: 700;
      line-height: 1.05;
    }

    /* Eyebrow Component */
    :where(html[data-page="ai-automation"]) .ai-eyebrow-wrap {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
    }

    :where(html[data-page="ai-automation"]) .ai-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--blue-soft);
      color: #254B79;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 999px;
      border: 1px solid rgba(47, 116, 255, 0.12);
    }

    :where(html[data-page="ai-automation"]) .ai-eyebrow-line {
      display: inline-block;
      width: 26px;
      height: 2.5px;
      background-color: var(--mint-primary);
      border-radius: 2px;
    }

    /* Yellow Highlighter Marker for Headings */
    :where(html[data-page="ai-automation"]) .ai-highlight {
      position: relative;
      display: inline-block;
      background: var(--yellow-primary);
      padding: 0 8px;
      border-radius: 8px;
      color: var(--navy-primary);
      white-space: nowrap;
    }

    /* Buttons */
    :where(html[data-page="ai-automation"]) .ai-btn-yellow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: var(--yellow-primary);
      color: var(--navy-primary);
      font-weight: 700;
      font-size: 15px;
      padding: 14px 26px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      box-shadow: var(--shadow-yellow-btn);
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    :where(html[data-page="ai-automation"]) .ai-btn-yellow:hover {
      background: var(--yellow-hover);
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(255, 199, 44, 0.36);
    }

    :where(html[data-page="ai-automation"]) .ai-btn-white {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: var(--surface-white);
      color: var(--navy-primary);
      font-weight: 700;
      font-size: 15px;
      padding: 14px 24px;
      border-radius: 999px;
      border: 1px solid var(--border-light);
      cursor: pointer;
      text-decoration: none;
      box-shadow: var(--shadow-subtle);
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    :where(html[data-page="ai-automation"]) .ai-btn-white:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-card);
      border-color: var(--border-medium);
    }

    :where(html[data-page="ai-automation"]) .ai-btn-navy {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--navy-primary);
      color: #FFFFFF;
      font-weight: 700;
      font-size: 14px;
      padding: 11px 20px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    :where(html[data-page="ai-automation"]) .ai-btn-navy:hover {
      background: #173764;
      transform: translateY(-1px);
    }

    /* ==========================================================================
   1. HERO SECTION & AI WORKFLOW DIAGRAM
   ========================================================================== */
    :where(html[data-page="ai-automation"]) .ai-hero {
      position: relative;
      padding: 56px 0 52px;
      background-color: var(--bg-primary);
      background-image: 
        radial-gradient(circle at 92% 16%, rgba(255, 230, 150, 0.42) 0%, rgba(251, 247, 238, 0) 52%),
        radial-gradient(circle at 72% 46%, rgba(215, 235, 255, 0.5) 0%, rgba(251, 247, 238, 0) 48%);
      overflow: visible;
    }

    :where(html[data-page="ai-automation"]) .ai-hero .ai-container {
      max-width: 1320px;
    }

    :where(html[data-page="ai-automation"]) .ai-hero-grid {
      display: grid;
      grid-template-columns: 43% 57%;
      gap: 36px;
      align-items: center;
    }

    /* Hero Left Copy */
    :where(html[data-page="ai-automation"]) .ai-hero-left {
      position: relative;
      max-width: 550px;
    }

    :where(html[data-page="ai-automation"]) .ai-hero-title {
      font-size: clamp(42px, 4.1vw, 66px);
      font-weight: 850;
      line-height: 1.04;
      letter-spacing: -0.04em;
      color: var(--navy-primary);
      margin-bottom: 22px;
    }

    :where(html[data-page="ai-automation"]) .ai-highlight-wrap {
      display: inline-flex;
      align-items: center;
      position: relative;
    }

    :where(html[data-page="ai-automation"]) .ai-highlight {
      position: relative;
      display: inline-block;
      background: var(--yellow-primary);
      padding: 2px 10px 4px 8px;
      border-radius: 8px;
      color: var(--navy-primary);
      white-space: nowrap;
    }

    :where(html[data-page="ai-automation"]) .ai-burst-rays {
      position: absolute;
      top: 4px;
      right: -28px;
      color: var(--yellow-primary);
      pointer-events: none;
    }

    :where(html[data-page="ai-automation"]) .ai-qualify-burst {
      position: absolute;
      top: -14px;
      right: -8px;
      color: var(--yellow-primary);
      pointer-events: none;
    }

    :where(html[data-page="ai-automation"]) .ai-hero-desc {
      font-size: 17.5px;
      line-height: 1.62;
      color: var(--text-secondary);
      margin-bottom: 30px;
      max-width: 520px;
    }

    :where(html[data-page="ai-automation"]) .ai-hero-buttons {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: nowrap;
    }

    :where(html[data-page="ai-automation"]) .ai-btn-yellow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: var(--yellow-primary);
      color: var(--navy-primary);
      font-weight: 700;
      font-size: 15px;
      padding: 14px 24px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      box-shadow: var(--shadow-yellow-btn);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
      flex-shrink: 0;
    }

    :where(html[data-page="ai-automation"]) .ai-btn-yellow:hover {
      background: var(--yellow-hover);
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(255, 199, 44, 0.38);
    }

    :where(html[data-page="ai-automation"]) .ai-btn-white {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: var(--surface-white);
      color: var(--navy-primary);
      font-weight: 700;
      font-size: 15px;
      padding: 14px 22px;
      border-radius: 999px;
      border: 1px solid rgba(16, 39, 71, 0.09);
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 4px 16px rgba(16, 39, 71, 0.05);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
      flex-shrink: 0;
    }

    :where(html[data-page="ai-automation"]) .ai-btn-white:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(16, 39, 71, 0.08);
      border-color: rgba(16, 39, 71, 0.16);
    }

    :where(html[data-page="ai-automation"]) .ai-play-icon-badge {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--navy-primary);
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* Annotation 1: Work Smarter Not Harder */
    :where(html[data-page="ai-automation"]) .ai-annot-smarter {
      position: absolute;
      top: -46px;
      left: 6px;
      color: #D97706;
      font-size: 21px;
      font-weight: 700;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      pointer-events: none;
      transform: rotate(-3deg);
      z-index: 4;
      line-height: 1.05;
    }

    :where(html[data-page="ai-automation"]) .ai-annot-smarter svg {
      margin-top: 2px;
      margin-left: 20px;
    }

    /* Hero Right: Connected AI Workflow Diagram */
    :where(html[data-page="ai-automation"]) .ai-workflow-canvas {
      position: relative;
      width: 100%;
      max-width: 640px;
      height: 460px;
      margin: 0 auto;
    }

    /* SVG Line Connector Overlay */
    :where(html[data-page="ai-automation"]) .ai-workflow-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    :where(html[data-page="ai-automation"]) .ai-workflow-svg path {
      fill: none;
      stroke: #2F74FF;
      stroke-width: 1.8;
      stroke-dasharray: 4 4;
    }

    :where(html[data-page="ai-automation"]) .ai-workflow-svg circle.ai-wf-dot {
      fill: #2F74FF;
      stroke: #FFFFFF;
      stroke-width: 1.5;
    }

    /* Ambient Halo Aura behind Central Agent */
    :where(html[data-page="ai-automation"]) .ai-wf-agent-aura {
      position: absolute;
      top: 212px;
      left: 320px;
      width: 280px;
      height: 280px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(147, 197, 253, 0.45) 0%, rgba(191, 219, 254, 0.18) 50%, transparent 75%);
      filter: blur(14px);
      pointer-events: none;
      z-index: 0;
      animation: page-ai-automation-pulseAura 4s ease-in-out infinite alternate;
    }

    @keyframes page-ai-automation-pulseAura {
      0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.7; }
      100% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
    }

    /* Central AI Agent Card */
    :where(html[data-page="ai-automation"]) .ai-wf-central-agent {
      position: absolute;
      top: 135px;
      left: 240px;
      width: 160px;
      height: 155px;
      background: var(--surface-white);
      border-radius: 26px;
      border: 1.5px solid rgba(47, 116, 255, 0.22);
      box-shadow: 0 0 0 10px rgba(235, 244, 255, 0.8), 0 16px 36px rgba(47, 116, 255, 0.12);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 16px 14px;
      z-index: 3;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      cursor: default;
    }

    :where(html[data-page="ai-automation"]) .ai-wf-central-agent:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 0 12px rgba(235, 244, 255, 0.95), 0 20px 42px rgba(47, 116, 255, 0.16);
    }

    :where(html[data-page="ai-automation"]) .ai-wf-agent-orb {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: var(--navy-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      margin-bottom: 10px;
      box-shadow: 0 6px 16px rgba(16, 39, 71, 0.2);
    }

    :where(html[data-page="ai-automation"]) .ai-wf-central-agent h4 {
      font-size: 16.5px;
      font-weight: 800;
      color: var(--navy-primary);
      line-height: 1.15;
    }

    :where(html[data-page="ai-automation"]) .ai-wf-central-agent p {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      margin-top: 3px;
      line-height: 1.2;
    }

    /* Workflow Floating Cards */
    :where(html[data-page="ai-automation"]) .ai-wf-node {
      position: absolute;
      background: var(--surface-white);
      border-radius: 18px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 8px 24px rgba(16, 39, 71, 0.05), 0 2px 6px rgba(16, 39, 71, 0.02);
      border: 1px solid rgba(16, 39, 71, 0.07);
      z-index: 2;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: default;
    }

    :where(html[data-page="ai-automation"]) .ai-wf-node:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(16, 39, 71, 0.09);
      border-color: rgba(47, 116, 255, 0.25);
    }

    :where(html[data-page="ai-automation"]) .ai-wf-icon-wrap {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="ai-automation"]) .ai-wf-icon-wrap.mint {
      background: #E6FBF5;
      color: #10B981;
    }

    :where(html[data-page="ai-automation"]) .ai-wf-icon-wrap.purple {
      background: #F1EDFF;
      color: #7C3AED;
    }

    :where(html[data-page="ai-automation"]) .ai-wf-icon-wrap.green {
      background: #E8FAF2;
      color: #25D366;
    }

    :where(html[data-page="ai-automation"]) .ai-wf-icon-wrap.blue {
      background: #EBF3FE;
      color: #2F74FF;
    }

    :where(html[data-page="ai-automation"]) .ai-wf-node-text h4 {
      font-size: 13.5px;
      font-weight: 750;
      color: var(--navy-primary);
      line-height: 1.2;
      white-space: nowrap;
    }

    :where(html[data-page="ai-automation"]) .ai-wf-node-text p {
      font-size: 11.5px;
      font-weight: 500;
      color: var(--text-secondary);
      line-height: 1.2;
      margin-top: 2px;
      white-space: nowrap;
    }

    /* Specific Positions for Workflow Nodes (Desktop) */
    :where(html[data-page="ai-automation"]) .ai-wf-lead {
      top: 18px;
      left: 16px;
      width: 215px;
    }

    :where(html[data-page="ai-automation"]) .ai-wf-qualify {
      top: 18px;
      left: 410px;
      width: 214px;
    }

    :where(html[data-page="ai-automation"]) .ai-wf-whatsapp {
      top: 185px;
      left: 10px;
      width: 195px;
    }

    :where(html[data-page="ai-automation"]) .ai-wf-crm {
      top: 185px;
      left: 435px;
      width: 195px;
    }

    :where(html[data-page="ai-automation"]) .ai-wf-meeting {
      top: 295px;
      left: 430px;
      width: 205px;
    }

    :where(html[data-page="ai-automation"]) .ai-wf-report {
      top: 388px;
      left: 200px;
      width: 220px;
    }

    /* Annotation 2: End-to-end automation for real results */
    :where(html[data-page="ai-automation"]) .ai-annot-results {
      position: absolute;
      bottom: -10px;
      right: 0px;
      color: var(--navy-primary);
      font-size: 19px;
      font-weight: 700;
      line-height: 1.05;
      text-align: right;
      z-index: 4;
      pointer-events: none;
    }

    :where(html[data-page="ai-automation"]) .ai-annot-results svg {
      display: block;
      margin-left: auto;
      margin-top: 3px;
    }

    /* ==========================================================================
   2. HERO METRICS BAR (4-COLUMN ROW)
   ========================================================================== */
    :where(html[data-page="ai-automation"]) .ai-hero-metrics {
      margin-top: 48px;
      padding: 22px 36px;
      background: var(--surface-white);
      border-radius: 28px;
      border: 1px solid rgba(16, 39, 71, 0.07);
      box-shadow: 0 10px 32px rgba(16, 39, 71, 0.04);
    }

    :where(html[data-page="ai-automation"]) .ai-metrics-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: center;
    }

    :where(html[data-page="ai-automation"]) .ai-metric-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 4px 16px;
      position: relative;
    }

    :where(html[data-page="ai-automation"]) .ai-metric-item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 15%;
      height: 70%;
      width: 1px;
      background: rgba(16, 39, 71, 0.08);
    }

    :where(html[data-page="ai-automation"]) .ai-metric-icon {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="ai-automation"]) .ai-metric-icon.mint {
      background: #E6FBF5;
      color: #10B981;
    }

    :where(html[data-page="ai-automation"]) .ai-metric-icon.yellow {
      background: #FEF3C7;
      color: #D97706;
    }

    :where(html[data-page="ai-automation"]) .ai-metric-icon.blue {
      background: #EBF3FE;
      color: #2F74FF;
    }

    :where(html[data-page="ai-automation"]) .ai-metric-icon.pink {
      background: #FCE7F0;
      color: #EC4899;
    }

    :where(html[data-page="ai-automation"]) .ai-metric-content h3 {
      font-size: 26px;
      font-weight: 850;
      color: var(--navy-primary);
      line-height: 1.1;
    }

    :where(html[data-page="ai-automation"]) .ai-metric-content p {
      font-size: 13.5px;
      font-weight: 500;
      color: var(--text-secondary);
      margin-top: 2px;
      white-space: nowrap;
    }

    /* ==========================================================================
   3. TRUSTED INTEGRATIONS STRIP
   ========================================================================== */
    :where(html[data-page="ai-automation"]) .ai-trust-strip-section {
      padding: 36px 0 46px;
    }

    :where(html[data-page="ai-automation"]) .ai-trust-strip {
      background: var(--surface-white);
      border-radius: 24px;
      border: 1px solid rgba(15, 42, 75, 0.06);
      padding: 24px 38px;
      box-shadow: 0 8px 30px rgba(15, 42, 75, 0.04);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
    }

    :where(html[data-page="ai-automation"]) .ai-trust-label {
      font-size: 13.5px;
      font-weight: 850;
      letter-spacing: 0.08em;
      color: var(--navy-primary);
      text-transform: uppercase;
      line-height: 1.35;
      white-space: nowrap;
      flex-shrink: 0;
    }

    :where(html[data-page="ai-automation"]) .ai-trust-divider {
      width: 1px;
      height: 42px;
      background: rgba(15, 42, 75, 0.12);
      flex-shrink: 0;
    }

    :where(html[data-page="ai-automation"]) .ai-trust-logos {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      flex: 1;
    }

    :where(html[data-page="ai-automation"]) .ai-trust-logo-item {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      flex-shrink: 0;
    }

    :where(html[data-page="ai-automation"]) .ai-trust-logo-item:hover {
      opacity: 0.8;
      transform: translateY(-1px);
    }

    /* ==========================================================================
   4. THE PROBLEM SECTION
   ========================================================================== */
    :where(html[data-page="ai-automation"]) .ai-problem-section {
      padding: 54px 0 96px;
      position: relative;
    }

    :where(html[data-page="ai-automation"]) .ai-problem-grid {
      display: grid;
      grid-template-columns: 440px 1fr;
      gap: 56px;
      align-items: center;
    }

    /* Left: Image with comparison badges */
    :where(html[data-page="ai-automation"]) .ai-problem-image-wrap {
      position: relative;
      border-radius: 26px;
      overflow: visible;
    }

    :where(html[data-page="ai-automation"]) .ai-problem-burst-rays {
      position: absolute;
      left: -26px;
      top: 36%;
      color: #FFC72C;
      pointer-events: none;
      z-index: 1;
    }

    :where(html[data-page="ai-automation"]) .ai-problem-img {
      width: 100%;
      height: 380px;
      object-fit: cover;
      object-position: center 25%;
      border-radius: 26px;
      box-shadow: 0 16px 42px rgba(16, 39, 71, 0.08);
      display: block;
    }

    /* Overlay badge top-right: Manual Process */
    :where(html[data-page="ai-automation"]) .ai-problem-badge-manual {
      position: absolute;
      top: 26px;
      right: -12px;
      background: var(--surface-white);
      border-radius: 18px;
      padding: 12px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 12px 32px rgba(15, 42, 75, 0.09);
      border: 1px solid rgba(15, 42, 75, 0.06);
      z-index: 2;
    }

    :where(html[data-page="ai-automation"]) .ai-problem-badge-manual .badge-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: #FFE7ED;
      color: #FF4E6A;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 850;
      font-size: 19px;
      flex-shrink: 0;
    }

    :where(html[data-page="ai-automation"]) .ai-badge-arrow-manual {
      position: absolute;
      bottom: -22px;
      left: 18px;
      pointer-events: none;
    }

    /* Overlay badge bottom-right: AI Automation */
    :where(html[data-page="ai-automation"]) .ai-problem-badge-auto {
      position: absolute;
      bottom: 32px;
      right: 28px;
      background: var(--surface-white);
      border-radius: 18px;
      padding: 12px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 12px 32px rgba(15, 42, 75, 0.09);
      border: 1px solid rgba(15, 42, 75, 0.06);
      z-index: 2;
    }

    :where(html[data-page="ai-automation"]) .ai-problem-badge-auto .badge-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: #DDF8EF;
      color: #12AF7E;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 850;
      font-size: 21px;
      flex-shrink: 0;
    }

    :where(html[data-page="ai-automation"]) .ai-badge-arrow-auto {
      position: absolute;
      bottom: -18px;
      left: -22px;
      pointer-events: none;
    }

    :where(html[data-page="ai-automation"]) .ai-problem-badge-title {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text-secondary);
      line-height: 1.2;
    }

    :where(html[data-page="ai-automation"]) .ai-problem-badge-val {
      font-size: 19px;
      font-weight: 850;
      line-height: 1.2;
      margin-top: 3px;
    }

    :where(html[data-page="ai-automation"]) .ai-problem-badge-val.red {
      color: #FF3F45;
    }

    :where(html[data-page="ai-automation"]) .ai-problem-badge-val.green {
      color: #10A96E;
    }

    /* Right: Problem Content & Lightbulb Note */
    :where(html[data-page="ai-automation"]) .ai-problem-right-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      position: relative;
    }

    :where(html[data-page="ai-automation"]) .ai-problem-content {
      flex: 1;
    }

    :where(html[data-page="ai-automation"]) .ai-problem-title {
      font-size: clamp(36px, 3.2vw, 48px);
      font-weight: 850;
      line-height: 1.12;
      color: var(--navy-primary);
      letter-spacing: -0.03em;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    :where(html[data-page="ai-automation"]) .ai-problem-highlight {
      color: #F2A600;
    }

    :where(html[data-page="ai-automation"]) .ai-problem-desc {
      font-size: 18px;
      line-height: 1.68;
      color: var(--text-secondary);
      max-width: 540px;
    }

    /* Side Note with Lightbulb */
    :where(html[data-page="ai-automation"]) .ai-problem-note-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      flex-shrink: 0;
      width: 155px;
      margin-left: 6px;
    }

    :where(html[data-page="ai-automation"]) .ai-problem-bulb {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #FFF1C3;
      color: #E6A100;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
      box-shadow: 0 4px 14px rgba(230, 161, 0, 0.15);
    }

    :where(html[data-page="ai-automation"]) .ai-problem-note-text {
      color: var(--navy-primary);
      font-size: 20px;
      font-weight: 700;
      line-height: 1.15;
    }

    /* ==========================================================================
   5. WHY CHOOSE KAXON SECTION
   ========================================================================== */
    :where(html[data-page="ai-automation"]) .ai-why-section {
      padding: 82px 0 92px;
      position: relative;
    }

    :where(html[data-page="ai-automation"]) .ai-why-grid {
      display: grid;
      grid-template-columns: 34% 66%;
      gap: 56px;
      align-items: start;
    }

    :where(html[data-page="ai-automation"]) .ai-why-left-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      max-width: 480px;
    }

    :where(html[data-page="ai-automation"]) .ai-why-headline {
      font-size: clamp(38px, 4.2vw, 56px);
      font-weight: 900;
      line-height: 1.05;
      color: var(--navy-primary);
      letter-spacing: -0.035em;
      margin-bottom: 20px;
    }

    :where(html[data-page="ai-automation"]) .ai-why-headline .ai-highlight {
      background: var(--yellow-primary);
      color: var(--navy-primary);
      padding: 2px 10px;
      border-radius: 9px;
      display: inline-block;
      margin-top: 4px;
    }

    :where(html[data-page="ai-automation"]) .ai-why-desc {
      font-size: clamp(15.5px, 1.2vw, 17.5px);
      line-height: 1.65;
      color: var(--text-secondary);
      margin-bottom: 30px;
    }

    :where(html[data-page="ai-automation"]) .ai-why-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 15px 28px;
      font-size: 15.5px;
      font-weight: 800;
      box-shadow: 0 8px 24px rgba(255, 199, 44, 0.32);
    }

    /* 6 Feature Cards Grid (3x2 Desktop) */
    :where(html[data-page="ai-automation"]) .ai-feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    :where(html[data-page="ai-automation"]) .ai-feature-card {
      background: var(--surface-white);
      border-radius: 22px;
      padding: 26px 24px;
      border: 1px solid rgba(16, 39, 71, 0.06);
      box-shadow: 0 8px 26px rgba(15, 42, 75, 0.04);
      transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s ease, border-color 0.24s ease;
      display: flex;
      flex-direction: column;
      min-height: 170px;
    }

    :where(html[data-page="ai-automation"]) .ai-feature-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 36px rgba(15, 42, 75, 0.09);
      border-color: rgba(16, 39, 71, 0.14);
    }

    :where(html[data-page="ai-automation"]) .ai-feature-icon-box {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      flex-shrink: 0;
    }

    :where(html[data-page="ai-automation"]) .ai-feature-card-title {
      font-size: 16.5px;
      font-weight: 800;
      color: var(--navy-primary);
      margin-bottom: 6px;
      letter-spacing: -0.02em;
    }

    :where(html[data-page="ai-automation"]) .ai-feature-card-desc {
      font-size: 13.5px;
      line-height: 1.5;
      color: var(--text-secondary);
    }

    /* ==========================================================================
   6. REAL RESULTS SECTION
   ========================================================================== */
    :where(html[data-page="ai-automation"]) .ai-results-section {
      padding: 86px 0 90px;
      position: relative;
    }

    :where(html[data-page="ai-automation"]) .ai-results-wrapper {
      display: grid;
      grid-template-columns: 28% 72%;
      gap: 48px;
      align-items: center;
    }

    :where(html[data-page="ai-automation"]) .ai-results-intro {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    :where(html[data-page="ai-automation"]) .ai-results-title {
      font-size: clamp(38px, 4vw, 54px);
      font-weight: 900;
      line-height: 1.05;
      color: var(--navy-primary);
      letter-spacing: -0.035em;
      margin-bottom: 12px;
    }

    :where(html[data-page="ai-automation"]) .ai-annot-real-impact {
      position: relative;
      margin-top: 18px;
      color: #0B4D8A;
      font-size: 22px;
      line-height: 1.1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    :where(html[data-page="ai-automation"]) .ai-annot-arrow-svg {
      margin-top: 6px;
      margin-left: 2px;
      pointer-events: none;
    }

    :where(html[data-page="ai-automation"]) .ai-results-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    :where(html[data-page="ai-automation"]) .ai-result-card {
      background: var(--surface-white);
      border-radius: 22px;
      padding: 28px 24px;
      border: 1px solid rgba(16, 39, 71, 0.06);
      box-shadow: 0 8px 26px rgba(15, 42, 75, 0.04);
      transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s ease;
      display: flex;
      flex-direction: column;
      min-height: 245px;
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="ai-automation"]) .ai-result-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 36px rgba(15, 42, 75, 0.09);
    }

    :where(html[data-page="ai-automation"]) .ai-result-card-wave {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 48px;
      pointer-events: none;
      border-bottom-left-radius: 22px;
      border-bottom-right-radius: 22px;
    }

    :where(html[data-page="ai-automation"]) .ai-result-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }

    :where(html[data-page="ai-automation"]) .ai-result-icon-box {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="ai-automation"]) .ai-result-industry {
      font-size: 14px;
      font-weight: 700;
      color: var(--navy-primary);
    }

    :where(html[data-page="ai-automation"]) .ai-result-metric {
      font-size: clamp(38px, 3.4vw, 48px);
      font-weight: 900;
      color: var(--navy-primary);
      line-height: 1.05;
      letter-spacing: -0.03em;
      margin-bottom: 6px;
    }

    :where(html[data-page="ai-automation"]) .ai-result-outcome {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.45;
      margin-bottom: 22px;
    }

    :where(html[data-page="ai-automation"]) .ai-result-link {
      margin-top: auto;
      font-size: 14px;
      font-weight: 800;
      color: #2F6FFF;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: gap 0.2s ease, color 0.2s ease;
      position: relative;
      z-index: 2;
    }

    :where(html[data-page="ai-automation"]) .ai-result-link:hover {
      gap: 10px;
      color: #1754C9;
    }

    /* ==========================================================================
   7. OUR PROCESS SECTION (5 STEP CONNECTED FLOW)
   ========================================================================== */
    :where(html[data-page="ai-automation"]) .ai-process-section {
      padding: 80px 0 88px;
      position: relative;
    }

    :where(html[data-page="ai-automation"]) .ai-process-header {
      margin-bottom: 38px;
      text-align: left;
    }

    :where(html[data-page="ai-automation"]) .ai-process-title {
      font-size: clamp(34px, 3.8vw, 48px);
      font-weight: 900;
      line-height: 1.08;
      color: var(--navy-primary);
      letter-spacing: -0.03em;
    }

    :where(html[data-page="ai-automation"]) .ai-process-title .ai-highlight {
      background: var(--yellow-primary);
      color: var(--navy-primary);
      padding: 2px 10px;
      border-radius: 9px;
      display: inline-block;
    }

    :where(html[data-page="ai-automation"]) .ai-process-desktop-flow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      position: relative;
    }

    :where(html[data-page="ai-automation"]) .ai-process-step-card {
      flex: 1;
      background: var(--surface-white);
      border-radius: 20px;
      padding: 24px 20px;
      border: 1px solid rgba(16, 39, 71, 0.06);
      box-shadow: 0 8px 24px rgba(15, 42, 75, 0.04);
      transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s ease;
      display: flex;
      flex-direction: column;
      min-height: 190px;
    }

    :where(html[data-page="ai-automation"]) .ai-process-step-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 36px rgba(15, 42, 75, 0.09);
    }

    :where(html[data-page="ai-automation"]) .ai-step-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    :where(html[data-page="ai-automation"]) .ai-step-icon-box {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="ai-automation"]) .ai-step-badge {
      font-size: 13.5px;
      font-weight: 800;
      color: #2F6FFF;
      background: #EAF1FF;
      padding: 3px 9px;
      border-radius: 8px;
    }

    :where(html[data-page="ai-automation"]) .ai-step-title {
      font-size: 16.5px;
      font-weight: 800;
      color: var(--navy-primary);
      margin-bottom: 6px;
      letter-spacing: -0.015em;
    }

    :where(html[data-page="ai-automation"]) .ai-step-desc {
      font-size: 13px;
      line-height: 1.45;
      color: var(--text-secondary);
    }

    :where(html[data-page="ai-automation"]) .ai-process-flow-connector {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 26px;
      color: #3D82FF;
      pointer-events: none;
    }

    /* ==========================================================================
   8. INTEGRATIONS ECOSYSTEM SECTION
   ========================================================================== */
    :where(html[data-page="ai-automation"]) .ai-integ-section {
      padding: 76px 0 96px;
      position: relative;
    }

    :where(html[data-page="ai-automation"]) .ai-integ-top-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 30px;
      gap: 24px;
      flex-wrap: wrap;
    }

    :where(html[data-page="ai-automation"]) .ai-integ-header-text {
      max-width: 600px;
    }

    :where(html[data-page="ai-automation"]) .ai-integ-title {
      font-size: clamp(34px, 3.8vw, 48px);
      font-weight: 900;
      color: var(--navy-primary);
      letter-spacing: -0.03em;
      line-height: 1.08;
    }

    :where(html[data-page="ai-automation"]) .ai-annot-integ-power {
      color: #0B4D8A;
      font-size: 22px;
      line-height: 1.08;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 4px;
    }

    :where(html[data-page="ai-automation"]) .ai-annot-integ-arrow-svg {
      margin-top: 4px;
      pointer-events: none;
    }

    :where(html[data-page="ai-automation"]) .ai-integ-strip-container {
      width: 100%;
    }

    :where(html[data-page="ai-automation"]) .ai-integ-strip {
      background: var(--surface-white);
      border-radius: 24px;
      padding: 26px 28px;
      border: 1px solid rgba(16, 39, 71, 0.06);
      box-shadow: 0 10px 30px rgba(15, 42, 75, 0.045);
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      align-items: center;
      gap: 12px;
    }

    :where(html[data-page="ai-automation"]) .ai-integ-tool-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 90px;
      padding: 8px 4px;
      text-decoration: none;
      transition: transform 0.22s ease;
      position: relative;
    }

    :where(html[data-page="ai-automation"]) .ai-integ-tool-col:not(:last-child)::after {
      content: '';
      position: absolute;
      right: -6px;
      top: 20%;
      height: 60%;
      width: 1px;
      background: rgba(16, 39, 71, 0.06);
    }

    :where(html[data-page="ai-automation"]) .ai-integ-tool-col:hover {
      transform: translateY(-3px);
    }

    :where(html[data-page="ai-automation"]) .ai-integ-tool-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(16, 39, 71, 0.04);
    }

    :where(html[data-page="ai-automation"]) .ai-integ-tool-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy-primary);
      text-align: center;
      white-space: nowrap;
    }

    :where(html[data-page="ai-automation"]) .ai-feature-card,:where(html[data-page="ai-automation"]) 
    .ai-result-card,:where(html[data-page="ai-automation"]) 
    .ai-process-step-card,:where(html[data-page="ai-automation"]) 
    .ai-integ-tool-col {
      transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s ease, border-color 0.24s ease;
    }

    /* ==========================================================================
   9. BOTTOM THREE-COLUMN GRID (TESTIMONIAL, FAQ, CTA)
   ========================================================================== */
    :where(html[data-page="ai-automation"]) .ai-bottom-section {
      padding: 40px 0 75px;
    }

    :where(html[data-page="ai-automation"]) .ai-bottom-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr 0.95fr;
      gap: 24px;
      align-items: stretch;
    }

    :where(html[data-page="ai-automation"]) .ai-bottom-col {
      display: flex;
      flex-direction: column;
    }

    /* Col 1: Testimonial */
    :where(html[data-page="ai-automation"]) .ai-testi-box {
      background: var(--surface-white);
      border-radius: 20px;
      padding: 24px 24px 20px;
      box-shadow: var(--shadow-card);
      border: 1px solid var(--border-light);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      gap: 16px;
    }

    :where(html[data-page="ai-automation"]) .ai-testi-quote-icon {
      font-family: Georgia, serif;
      font-size: 48px;
      line-height: 1;
      color: var(--yellow-primary);
    }

    :where(html[data-page="ai-automation"]) .ai-testi-quote {
      font-size: 15px;
      line-height: 1.6;
      color: var(--navy-primary);
      margin-bottom: 0;
      font-weight: 500;
    }

    :where(html[data-page="ai-automation"]) .ai-testi-bottom-wrap {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: auto;
    }

    :where(html[data-page="ai-automation"]) .ai-testi-author-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 12px;
      border-top: 1px solid rgba(16, 39, 71, 0.06);
    }

    :where(html[data-page="ai-automation"]) .ai-testi-author-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    :where(html[data-page="ai-automation"]) .ai-testi-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--surface-white);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    :where(html[data-page="ai-automation"]) .ai-testi-name {
      font-size: 14.5px;
      font-weight: 700;
      color: var(--navy-primary);
      line-height: 1.2;
    }

    :where(html[data-page="ai-automation"]) .ai-testi-role {
      font-size: 12.5px;
      color: var(--text-secondary);
      line-height: 1.2;
      margin-top: 2px;
    }

    :where(html[data-page="ai-automation"]) .ai-testi-rating-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    :where(html[data-page="ai-automation"]) .ai-testi-stars {
      display: flex;
      gap: 3px;
      color: var(--yellow-primary);
    }

    :where(html[data-page="ai-automation"]) .ai-testi-nav {
      display: flex;
      gap: 6px;
    }

    :where(html[data-page="ai-automation"]) .ai-testi-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid var(--border-medium);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--navy-primary);
      background: var(--surface-white);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    :where(html[data-page="ai-automation"]) .ai-testi-btn:hover {
      background: var(--navy-primary);
      color: #FFFFFF;
    }

    /* Col 2: FAQ Accordion */
    :where(html[data-page="ai-automation"]) .ai-faq-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    :where(html[data-page="ai-automation"]) .ai-faq-item {
      background: var(--surface-white);
      border-radius: 14px;
      border: 1px solid var(--border-light);
      overflow: hidden;
      transition: all 0.2s ease;
    }

    :where(html[data-page="ai-automation"]) .ai-faq-item.is-open {
      border-color: rgba(47, 116, 255, 0.3);
      box-shadow: var(--shadow-subtle);
    }

    :where(html[data-page="ai-automation"]) .ai-faq-btn {
      width: 100%;
      padding: 15px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: left;
      font-size: 14px;
      font-weight: 700;
      color: var(--navy-primary);
      background: transparent;
      gap: 12px;
      border: none;
      cursor: pointer;
    }

    :where(html[data-page="ai-automation"]) .ai-faq-icon {
      font-size: 18px;
      font-weight: 400;
      color: var(--text-secondary);
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }

    :where(html[data-page="ai-automation"]) .ai-faq-item.is-open .ai-faq-icon {
      transform: rotate(45deg);
      color: var(--blue-primary);
    }

    :where(html[data-page="ai-automation"]) .ai-faq-body {
      padding: 0 18px 15px;
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--text-secondary);
      display: none;
    }

    :where(html[data-page="ai-automation"]) .ai-faq-item.is-open .ai-faq-body {
      display: block;
    }

    /* Col 3: Navy CTA Card */
    :where(html[data-page="ai-automation"]) .ai-cta-col {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="ai-automation"]) .ai-cta-card {
      background: var(--navy-card-cta);
      border-radius: 20px;
      padding: 28px 24px;
      color: #FFFFFF;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      box-shadow: 0 20px 48px rgba(16, 39, 71, 0.35);
      flex: 1;
      gap: 20px;
    }

    :where(html[data-page="ai-automation"]) .ai-cta-card-bg-pattern {
      position: absolute;
      top: -40px;
      right: -40px;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 199, 44, 0.12) 0%, transparent 70%);
      pointer-events: none;
    }

    :where(html[data-page="ai-automation"]) .ai-cta-tag {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      color: rgba(255, 255, 255, 0.7);
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    :where(html[data-page="ai-automation"]) .ai-cta-headline {
      font-size: 26px;
      font-weight: 800;
      line-height: 1.15;
      color: #FFFFFF;
      margin-bottom: 10px;
    }

    :where(html[data-page="ai-automation"]) .ai-cta-headline span {
      color: var(--yellow-primary);
    }

    :where(html[data-page="ai-automation"]) .ai-cta-desc {
      font-size: 13.5px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 0;
    }

    :where(html[data-page="ai-automation"]) .ai-annot-cta-possibilities {
      position: absolute;
      top: 16px;
      right: 18px;
      color: var(--yellow-primary);
      font-size: 20px;
      line-height: 1.05;
      text-align: right;
      pointer-events: none;
    }

    /* ==========================================================================
   10. FOOTER
   ========================================================================== */
    :where(html[data-page="ai-automation"]) .ai-footer {
      background: var(--navy-footer);
      color: #FFFFFF;
      padding: 64px 0 28px;
      position: relative;
    }

    :where(html[data-page="ai-automation"]) .ai-footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
      gap: 40px;
      margin-bottom: 48px;
    }

    :where(html[data-page="ai-automation"]) .ai-footer-brand p {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.6;
      margin: 16px 0 20px;
      max-width: 320px;
    }

    :where(html[data-page="ai-automation"]) .ai-footer-socials {
      display: flex;
      gap: 10px;
    }

    :where(html[data-page="ai-automation"]) .ai-footer-social-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    :where(html[data-page="ai-automation"]) .ai-footer-social-btn:hover {
      background: var(--yellow-primary);
      color: var(--navy-primary);
      transform: translateY(-2px);
    }

    :where(html[data-page="ai-automation"]) .ai-footer-col h4 {
      font-size: 16px;
      font-weight: 700;
      color: #FFFFFF;
      margin-bottom: 18px;
    }

    :where(html[data-page="ai-automation"]) .ai-footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    :where(html[data-page="ai-automation"]) .ai-footer-links a {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    :where(html[data-page="ai-automation"]) .ai-footer-links a:hover {
      color: var(--yellow-primary);
    }

    :where(html[data-page="ai-automation"]) .ai-footer-contact-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 12px;
    }

    :where(html[data-page="ai-automation"]) .ai-footer-contact-item svg {
      flex-shrink: 0;
      color: var(--yellow-primary);
    }

    :where(html[data-page="ai-automation"]) .ai-annot-build-together {
      position: absolute;
      top: 48px;
      right: 60px;
      color: var(--yellow-primary);
      font-size: 24px;
      line-height: 1.05;
      text-align: right;
      pointer-events: none;
    }

    :where(html[data-page="ai-automation"]) .ai-footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.6);
      flex-wrap: wrap;
      gap: 12px;
    }

    /* ==========================================================================
   11. RESPONSIVE BREAKPOINTS (TABLET & MOBILE)
   ========================================================================== */
    @media (max-width: 1180px) {
      :where(html[data-page="ai-automation"]) .ai-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      :where(html[data-page="ai-automation"]) .ai-hero-left {
        max-width: 680px;
        margin: 0 auto;
        text-align: center;
      }

      :where(html[data-page="ai-automation"]) .ai-hero-buttons {
        justify-content: center;
      }

      :where(html[data-page="ai-automation"]) .ai-hero-title {
        font-size: 46px;
      }

      :where(html[data-page="ai-automation"]) .ai-workflow-canvas {
        max-width: 640px;
        margin: 0 auto;
      }

      :where(html[data-page="ai-automation"]) .ai-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }

      :where(html[data-page="ai-automation"]) .ai-metric-item::after {
        display: none;
      }

      :where(html[data-page="ai-automation"]) .ai-problem-note-wrap {
        display: none;
      }

      :where(html[data-page="ai-automation"]) .ai-problem-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
      }

      :where(html[data-page="ai-automation"]) .ai-why-grid {
        grid-template-columns: 1fr;
        gap: 36px;
      }

      :where(html[data-page="ai-automation"]) .ai-why-left-content {
        max-width: 100%;
      }

      :where(html[data-page="ai-automation"]) .ai-feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }

      :where(html[data-page="ai-automation"]) .ai-results-wrapper {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      :where(html[data-page="ai-automation"]) .ai-results-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }

      :where(html[data-page="ai-automation"]) .ai-process-desktop-flow {
        flex-wrap: wrap;
        gap: 16px;
      }

      :where(html[data-page="ai-automation"]) .ai-process-flow-connector {
        display: none;
      }

      :where(html[data-page="ai-automation"]) .ai-process-step-card {
        flex: 1 1 calc(33.333% - 16px);
        min-width: 200px;
      }

      :where(html[data-page="ai-automation"]) .ai-integ-strip {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }

      :where(html[data-page="ai-automation"]) .ai-integ-tool-col:not(:last-child)::after {
        display: none;
      }

      :where(html[data-page="ai-automation"]) .ai-annot-integ-power {
        display: none;
      }

      :where(html[data-page="ai-automation"]) .ai-bottom-grid {
        grid-template-columns: 1fr;
        gap: 22px;
      }

      :where(html[data-page="ai-automation"]) .ai-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
      }

      :where(html[data-page="ai-automation"]) .ai-annot-build-together {
        display: none;
      }
    }

    @media (max-width: 992px) {
      :where(html[data-page="ai-automation"]) .ai-trust-strip {
        gap: 24px;
        padding: 20px 24px;
      }

      :where(html[data-page="ai-automation"]) .ai-trust-logos {
        gap: 24px;
      }

      :where(html[data-page="ai-automation"]) .ai-problem-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      :where(html[data-page="ai-automation"]) .ai-problem-image-wrap {
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
      }

      :where(html[data-page="ai-automation"]) .ai-results-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }

      :where(html[data-page="ai-automation"]) .ai-annot-real-impact {
        display: none;
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="ai-automation"]) .ai-hero {
        padding: 36px 0 40px;
      }

      :where(html[data-page="ai-automation"]) .ai-hero-title {
        font-size: clamp(34px, 8.5vw, 44px);
        line-height: 1.08;
      }

      :where(html[data-page="ai-automation"]) .ai-hero-desc {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 24px;
      }

      :where(html[data-page="ai-automation"]) .ai-hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
      }

      :where(html[data-page="ai-automation"]) .ai-btn-yellow,:where(html[data-page="ai-automation"]) 
      .ai-btn-white {
        width: 100%;
        justify-content: center;
        height: 52px;
        padding: 0 20px;
      }

      :where(html[data-page="ai-automation"]) .ai-annot-smarter,:where(html[data-page="ai-automation"]) 
      .ai-annot-results {
        display: none;
      }

      /* Workflow diagram restructured to clean vertical list on mobile */
      :where(html[data-page="ai-automation"]) .ai-workflow-canvas {
        height: auto;
        min-height: auto;
        max-width: 440px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: static;
        margin: 0 auto;
      }

      :where(html[data-page="ai-automation"]) .ai-workflow-svg,:where(html[data-page="ai-automation"]) 
      .ai-wf-agent-aura {
        display: none;
      }

      :where(html[data-page="ai-automation"]) .ai-wf-node {
        position: static;
        width: 100%;
        transform: none !important;
      }

      :where(html[data-page="ai-automation"]) .ai-wf-central-agent {
        position: static;
        width: 100%;
        height: auto;
        transform: none !important;
        padding: 16px 20px;
        box-shadow: 0 8px 24px rgba(47, 116, 255, 0.12);
        margin: 4px 0;
      }

      :where(html[data-page="ai-automation"]) .ai-hero-metrics {
        margin-top: 32px;
        padding: 20px 18px;
        border-radius: 20px;
      }

      :where(html[data-page="ai-automation"]) .ai-metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }

      :where(html[data-page="ai-automation"]) .ai-metric-item {
        padding: 4px 6px;
        gap: 12px;
      }

      :where(html[data-page="ai-automation"]) .ai-metric-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
      }

      :where(html[data-page="ai-automation"]) .ai-metric-content h3 {
        font-size: 20px;
      }

      :where(html[data-page="ai-automation"]) .ai-metric-content p {
        font-size: 11.5px;
        white-space: normal;
      }

      /* Trust Strip Mobile Rail */
      :where(html[data-page="ai-automation"]) .ai-trust-strip-section {
        padding: 24px 0 44px;
      }

      :where(html[data-page="ai-automation"]) .ai-trust-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 18px 20px;
        border-radius: 20px;
      }

      :where(html[data-page="ai-automation"]) .ai-trust-label {
        width: 100%;
        font-size: 12px;
        line-height: 1.3;
      }

      :where(html[data-page="ai-automation"]) .ai-trust-divider {
        display: none;
      }

      :where(html[data-page="ai-automation"]) .ai-trust-logos {
        width: 100%;
        display: flex;
        overflow-x: auto;
        gap: 28px;
        justify-content: flex-start;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }

      :where(html[data-page="ai-automation"]) .ai-trust-logos::-webkit-scrollbar {
        display: none;
      }

      /* Problem Section Mobile */
      :where(html[data-page="ai-automation"]) .ai-problem-section {
        padding: 30px 0 60px;
      }

      :where(html[data-page="ai-automation"]) .ai-problem-grid {
        display: flex;
        flex-direction: column;
        gap: 32px;
      }

      :where(html[data-page="ai-automation"]) .ai-problem-right-wrap {
        order: 1;
      }

      :where(html[data-page="ai-automation"]) .ai-problem-image-wrap {
        order: 2;
        max-width: 100%;
      }

      :where(html[data-page="ai-automation"]) .ai-problem-burst-rays {
        display: none;
      }

      :where(html[data-page="ai-automation"]) .ai-badge-arrow-manual,:where(html[data-page="ai-automation"]) 
      .ai-badge-arrow-auto {
        display: none;
      }

      :where(html[data-page="ai-automation"]) .ai-problem-img {
        height: 300px;
        border-radius: 20px;
      }

      :where(html[data-page="ai-automation"]) .ai-problem-badge-manual {
        top: 14px;
        right: 14px;
        padding: 10px 14px;
        border-radius: 14px;
        gap: 10px;
      }

      :where(html[data-page="ai-automation"]) .ai-problem-badge-auto {
        bottom: 14px;
        right: 14px;
        padding: 10px 14px;
        border-radius: 14px;
        gap: 10px;
      }

      :where(html[data-page="ai-automation"]) .ai-problem-badge-manual .badge-icon,:where(html[data-page="ai-automation"]) 
      .ai-problem-badge-auto .badge-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
        border-radius: 10px;
      }

      :where(html[data-page="ai-automation"]) .ai-problem-badge-title {
        font-size: 12px;
      }

      :where(html[data-page="ai-automation"]) .ai-problem-badge-val {
        font-size: 16px;
      }

      :where(html[data-page="ai-automation"]) .ai-problem-title {
        font-size: clamp(32px, 8vw, 40px);
        margin-top: 16px;
        margin-bottom: 16px;
      }

      :where(html[data-page="ai-automation"]) .ai-problem-desc {
        font-size: 16px;
        line-height: 1.65;
      }

      /* 5. Why Choose Mobile */
      :where(html[data-page="ai-automation"]) .ai-why-section {
        padding: 56px 0 64px;
      }

      :where(html[data-page="ai-automation"]) .ai-why-cta-btn {
        width: 100%;
        justify-content: center;
      }

      :where(html[data-page="ai-automation"]) .ai-feature-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      /* 6. Real Results Mobile */
      :where(html[data-page="ai-automation"]) .ai-results-section {
        padding: 56px 0 64px;
      }

      :where(html[data-page="ai-automation"]) .ai-results-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      /* 7. Process Mobile (Vertical Timeline) */
      :where(html[data-page="ai-automation"]) .ai-process-section {
        padding: 56px 0 64px;
      }

      :where(html[data-page="ai-automation"]) .ai-process-desktop-flow {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
      }

      :where(html[data-page="ai-automation"]) .ai-process-step-card {
        flex: 1 1 100%;
        min-height: auto;
        padding: 20px 18px;
      }

      /* 8. Integrations Mobile (2 Columns or Scroll Rail) */
      :where(html[data-page="ai-automation"]) .ai-integ-section {
        padding: 56px 0 68px;
      }

      :where(html[data-page="ai-automation"]) .ai-integ-strip {
        grid-template-columns: repeat(2, 1fr);
        padding: 20px 16px;
        gap: 16px;
      }

      :where(html[data-page="ai-automation"]) .ai-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }
    }

    @media (max-width: 420px) {
      :where(html[data-page="ai-automation"]) .ai-metrics-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }
  
    /* ==========================================================================
       KAXON TECHNOLOGIES - AI AUTOMATION HERO (V4: AI CONTROL ROOM)
       Warm Editorial AI Operations Architecture
       ========================================================================== */
    :where(html[data-page="ai-automation"]) .ai-hero-section {
      position: relative;
      padding: clamp(48px, 6vw, 76px) 0 clamp(54px, 7vw, 84px);
      background-color: var(--bg-primary, #FBF7EE);
      background-image: 
        radial-gradient(circle at 74% 34%, rgba(47, 116, 255, 0.10) 0%, transparent 480px),
        radial-gradient(circle at 88% 64%, rgba(25, 184, 145, 0.07) 0%, transparent 320px),
        radial-gradient(circle at 18% 18%, rgba(255, 199, 44, 0.08) 0%, transparent 340px);
      overflow: hidden;
    }

    :where(html[data-page="ai-automation"]) .ai-hero-grid-2col {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: 48px;
      align-items: center;
      min-height: 640px;
    }

    /* Left Column: Editorial Control Narrative */
    :where(html[data-page="ai-automation"]) .ai-hero-copy-col {
      position: relative;
      max-width: 580px;
      z-index: 1;
    }

    :where(html[data-page="ai-automation"]) .ai-hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      background: #EAF1FF;
      border: 1px solid rgba(47, 116, 255, 0.16);
      border-radius: var(--radius-pill, 9999px);
      color: #1A5EE8;
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    :where(html[data-page="ai-automation"]) .ai-indicator-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #2F74FF;
      box-shadow: 0 0 0 4px rgba(47, 116, 255, 0.16);
      display: inline-block;
      animation: page-ai-automation-indicatorPulse 2.4s ease-in-out infinite alternate;
    }

    @keyframes page-ai-automation-indicatorPulse {
      0% { transform: scale(0.9); opacity: 0.8; }
      100% { transform: scale(1.2); opacity: 1; }
    }

    :where(html[data-page="ai-automation"]) .ai-hero-main-title {
      font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: clamp(2.1rem, 3.2vw, 3.5rem);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -0.04em;
      color: var(--navy-primary, #102747);
      margin-bottom: 20px;
      word-break: break-word;
    }

    :where(html[data-page="ai-automation"]) .ai-title-highlight {
      display: inline;
      background: linear-gradient(120deg, rgba(255, 199, 44, 0.42) 0%, rgba(255, 199, 44, 0.42) 100%);
      background-repeat: no-repeat;
      background-size: 100% 38%;
      background-position: 0 90%;
      color: inherit;
      padding: 0 4px;
      border-radius: 4px;
    }

    :where(html[data-page="ai-automation"]) .ai-hero-main-desc {
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: clamp(1rem, 1.25vw, 1.125rem);
      line-height: 1.68;
      color: #59708A;
      max-width: 560px;
      margin-bottom: 24px;
    }

    /* Sequence Pill: Listen -> Understand -> Decide -> Act */
    :where(html[data-page="ai-automation"]) .ai-story-sequence-pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 255, 255, 0.78);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(16, 39, 71, 0.08);
      border-radius: var(--radius-pill, 9999px);
      padding: 8px 16px;
      margin-bottom: 30px;
      box-shadow: 0 4px 14px rgba(16, 39, 71, 0.03);
    }

    :where(html[data-page="ai-automation"]) .ai-story-step {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 0.8rem;
      font-weight: 750;
      color: #102747;
    }

    :where(html[data-page="ai-automation"]) .ai-story-step i {
      font-size: 0.95rem;
      color: #2F74FF;
    }

    :where(html[data-page="ai-automation"]) .ai-story-arrow {
      color: rgba(16, 39, 71, 0.3);
      font-size: 0.85rem;
    }

    /* Actions Row */
    :where(html[data-page="ai-automation"]) .ai-hero-actions-row {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 34px;
      position: relative;
    }

    :where(html[data-page="ai-automation"]) .ai-btn-cta-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #FFC72C;
      color: #102747;
      font-family: 'Manrope', sans-serif;
      font-weight: 800;
      font-size: 0.95rem;
      height: 54px;
      padding: 0 28px;
      border-radius: var(--radius-pill, 9999px);
      border: none;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 10px 26px rgba(255, 199, 44, 0.32);
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
    }

    :where(html[data-page="ai-automation"]) .ai-btn-cta-primary:hover {
      background: #F2B900;
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(255, 199, 44, 0.42);
    }

    :where(html[data-page="ai-automation"]) .ai-btn-cta-primary:hover i {
      transform: translateX(3px);
    }

    :where(html[data-page="ai-automation"]) .ai-btn-cta-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #FFFFFF;
      color: #102747;
      font-family: 'Manrope', sans-serif;
      font-weight: 750;
      font-size: 0.95rem;
      height: 54px;
      padding: 0 24px;
      border-radius: var(--radius-pill, 9999px);
      border: 1px solid rgba(16, 39, 71, 0.16);
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(16, 39, 71, 0.04);
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
    }

    :where(html[data-page="ai-automation"]) .ai-btn-cta-secondary:hover {
      transform: translateY(-2px);
      border-color: #102747;
      box-shadow: 0 8px 20px rgba(16, 39, 71, 0.08);
    }

    :where(html[data-page="ai-automation"]) .ai-hero-hand-annotation {
      position: absolute;
      top: -38px;
      left: 12px;
      font-family: 'Caveat', cursive;
      font-size: 1.25rem;
      font-weight: 700;
      color: #0B4D8A;
      pointer-events: none;
    }

    /* Micro-Proof Stat Strip */
    :where(html[data-page="ai-automation"]) .ai-hero-stats-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      width: 100%;
    }

    :where(html[data-page="ai-automation"]) .ai-hero-stat-card {
      background: rgba(255, 255, 255, 0.82);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(16, 39, 71, 0.07);
      border-radius: 16px;
      padding: 12px 14px;
      box-shadow: 0 4px 16px rgba(16, 39, 71, 0.03);
      display: flex;
      align-items: center;
      gap: 10px;
      transition: transform 0.2s ease;
    }

    :where(html[data-page="ai-automation"]) .ai-hero-stat-card:hover {
      transform: translateY(-2px);
    }

    :where(html[data-page="ai-automation"]) .ai-stat-icon-wrap {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
    }

    :where(html[data-page="ai-automation"]) .ai-stat-text strong {
      display: block;
      font-family: 'Manrope', sans-serif;
      font-size: 1.25rem;
      font-weight: 900;
      color: #102747;
      line-height: 1.1;
    }

    :where(html[data-page="ai-automation"]) .ai-stat-text span {
      display: block;
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 0.725rem;
      font-weight: 600;
      color: #59708A;
      margin-top: 1px;
    }

    /* ==========================================================================
       RIGHT COLUMN: AI AUTOMATION CONTROL ROOM STAGE
       ========================================================================== */
    :where(html[data-page="ai-automation"]) .ai-control-stage-wrapper {
      position: relative;
      width: 100%;
      max-width: 580px;
      aspect-ratio: 1 / 0.94;
      min-height: 520px;
      margin: 0 auto;
      background: radial-gradient(circle at 50% 44%, rgba(47, 116, 255, 0.12), transparent 52%), linear-gradient(145deg, #FFFFFF 0%, #F6F9FD 100%);
      border: 1px solid rgba(16, 39, 71, 0.08);
      border-radius: 28px;
      box-shadow: 0 20px 52px rgba(16, 39, 71, 0.07);
      padding: 16px;
      z-index: 2;
    }

    /* Live Event Ticker at Top-Center */
    :where(html[data-page="ai-automation"]) .ai-control-event-ticker {
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255, 255, 255, 0.94);
      border: 1px solid rgba(47, 116, 255, 0.20);
      border-radius: var(--radius-pill, 9999px);
      padding: 5px 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 0.75rem;
      font-weight: 700;
      color: #102747;
      box-shadow: 0 4px 14px rgba(16, 39, 71, 0.05);
      z-index: 5;
      white-space: nowrap;
    }

    :where(html[data-page="ai-automation"]) .ticker-pulse-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #19B891;
      box-shadow: 0 0 0 3px rgba(25, 184, 145, 0.25);
      flex-shrink: 0;
    }

    /* SVG Connecting Bus Paths */
    :where(html[data-page="ai-automation"]) .ai-control-conduits-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    :where(html[data-page="ai-automation"]) .ai-conduit-line {
      fill: none;
      stroke: rgba(47, 116, 255, 0.38);
      stroke-width: 2;
      stroke-dasharray: 6 6;
      stroke-linecap: round;
      animation: page-ai-automation-conduitFlow 16s linear infinite;
    }

    @keyframes page-ai-automation-conduitFlow {
      from { stroke-dashoffset: 120; }
      to { stroke-dashoffset: 0; }
    }

    /* Center AI Decision Core */
    :where(html[data-page="ai-automation"]) .ai-decision-core-hub {
      position: absolute;
      top: 44%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: linear-gradient(145deg, #102747 0%, #143E72 100%);
      color: #FFFFFF;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 16px;
      box-shadow: 0 16px 42px rgba(16, 39, 71, 0.25);
      border: 2px solid rgba(255, 255, 255, 0.15);
      z-index: 4;
      transition: transform 0.25s ease;
    }

    :where(html[data-page="ai-automation"]) .ai-decision-core-hub:hover {
      transform: translate(-50%, -50%) scale(1.02);
    }

    :where(html[data-page="ai-automation"]) .ai-core-brain-orb {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: #FFC72C;
      margin-bottom: 6px;
    }

    :where(html[data-page="ai-automation"]) .ai-decision-core-hub h4 {
      font-family: 'Manrope', sans-serif;
      font-size: 0.95rem;
      font-weight: 850;
      color: #FFFFFF;
      line-height: 1.15;
      margin-bottom: 2px;
    }

    :where(html[data-page="ai-automation"]) .ai-decision-core-hub span {
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 0.675rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.75);
      line-height: 1.2;
    }

    :where(html[data-page="ai-automation"]) .ai-core-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 6px;
      background: rgba(25, 184, 145, 0.22);
      border: 1px solid rgba(25, 184, 145, 0.4);
      border-radius: 999px;
      padding: 2px 8px;
      font-size: 0.625rem;
      font-weight: 800;
      color: #3CCB91;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Workflow Stage Nodes */
    :where(html[data-page="ai-automation"]) .ai-flow-node-card {
      position: absolute;
      background: #FFFFFF;
      border: 1px solid rgba(16, 39, 71, 0.08);
      border-radius: 14px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 8px 24px rgba(16, 39, 71, 0.06);
      z-index: 3;
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      max-width: 175px;
      width: 100%;
    }

    :where(html[data-page="ai-automation"]) .ai-flow-node-card:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 12px 30px rgba(16, 39, 71, 0.10);
      border-color: #2F74FF;
    }

    :where(html[data-page="ai-automation"]) .ai-flow-node-icon {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.05rem;
      flex-shrink: 0;
    }

    :where(html[data-page="ai-automation"]) .ai-flow-node-text h5 {
      font-family: 'Manrope', sans-serif;
      font-size: 0.8rem;
      font-weight: 800;
      color: #102747;
      line-height: 1.15;
      margin: 0;
    }

    :where(html[data-page="ai-automation"]) .ai-flow-node-text p {
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 0.675rem;
      font-weight: 500;
      color: #59708A;
      line-height: 1.2;
      margin: 2px 0 0;
    }

    /* Desktop Positioning Coordinates */
    /* Left: Incoming Events */
    :where(html[data-page="ai-automation"]) .node-pos-in-1 { top: 60px; left: 18px; }
    :where(html[data-page="ai-automation"]) .node-pos-in-2 { top: 215px; left: 14px; }
    :where(html[data-page="ai-automation"]) .node-pos-in-3 { top: 370px; left: 18px; }

    /* Right: Automated Actions */
    :where(html[data-page="ai-automation"]) .node-pos-act-1 { top: 60px; right: 18px; }
    :where(html[data-page="ai-automation"]) .node-pos-act-2 { top: 215px; right: 14px; }
    :where(html[data-page="ai-automation"]) .node-pos-act-3 { top: 370px; right: 18px; }

    /* Bottom: Live Business Outcome Panel */
    :where(html[data-page="ai-automation"]) .ai-outcome-panel-bottom {
      position: absolute;
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(16, 39, 71, 0.08);
      border-radius: 16px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      box-shadow: 0 10px 24px rgba(16, 39, 71, 0.06);
      z-index: 4;
    }

    :where(html[data-page="ai-automation"]) .ai-outcome-metric-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    :where(html[data-page="ai-automation"]) .ai-outcome-metric-col strong {
      font-family: 'Manrope', sans-serif;
      font-size: 1.05rem;
      font-weight: 900;
      color: #102747;
      line-height: 1.1;
    }

    :where(html[data-page="ai-automation"]) .ai-outcome-metric-col span {
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 0.675rem;
      font-weight: 600;
      color: #59708A;
      margin-top: 1px;
    }

    :where(html[data-page="ai-automation"]) .ai-outcome-divider {
      width: 1px;
      height: 24px;
      background: rgba(16, 39, 71, 0.10);
    }

    /* Mobile Stage Transformation Component */
    :where(html[data-page="ai-automation"]) .ai-control-mobile-stage {
      display: none;
      flex-direction: column;
      gap: 14px;
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.75);
      border: 1px solid rgba(16, 39, 71, 0.08);
      border-radius: 24px;
      padding: 18px 14px;
      box-shadow: 0 10px 28px rgba(16, 39, 71, 0.05);
    }

    :where(html[data-page="ai-automation"]) .ai-mobile-core-card {
      background: linear-gradient(135deg, #102747 0%, #143E72 100%);
      border-radius: 16px;
      padding: 14px 18px;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      box-shadow: 0 8px 20px rgba(16, 39, 71, 0.16);
    }

    :where(html[data-page="ai-automation"]) .ai-mobile-grid-2col {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      width: 100%;
    }

    /* ==========================================================================
       RESPONSIVE BREAKPOINTS (AI HERO)
       ========================================================================== */
    @media (max-width: 1024px) {
      :where(html[data-page="ai-automation"]) .ai-hero-grid-2col {
        grid-template-columns: 1fr;
        gap: 44px;
      }
      :where(html[data-page="ai-automation"]) .ai-hero-copy-col {
        max-width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      :where(html[data-page="ai-automation"]) .ai-hero-actions-row {
        justify-content: center;
      }
      :where(html[data-page="ai-automation"]) .ai-hero-stats-strip {
        max-width: 600px;
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="ai-automation"]) .ai-hero-section {
        padding: 40px 0 52px;
      }
      :where(html[data-page="ai-automation"]) .ai-story-sequence-pill {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        border-radius: 16px;
        padding: 10px 14px;
      }
      :where(html[data-page="ai-automation"]) .ai-story-arrow {
        display: none;
      }
      :where(html[data-page="ai-automation"]) .ai-hero-actions-row {
        flex-direction: column;
        width: 100%;
      }
      :where(html[data-page="ai-automation"]) .ai-hero-actions-row .ai-btn-cta-primary,:where(html[data-page="ai-automation"]) 
      .ai-hero-actions-row .ai-btn-cta-secondary {
        width: 100%;
        justify-content: center;
        min-height: 48px;
      }
      :where(html[data-page="ai-automation"]) .ai-hero-hand-annotation {
        display: none !important;
      }

      /* Micro-Proof Strict 2x2 Grid on Mobile */
      :where(html[data-page="ai-automation"]) .ai-hero-stats-strip {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
      }
      :where(html[data-page="ai-automation"]) .ai-hero-stat-card {
        padding: 12px 10px;
        border-radius: 14px;
      }
      :where(html[data-page="ai-automation"]) .ai-stat-text strong {
        font-size: 1.2rem;
      }

      /* Desktop Control Room replaced by Mobile 2-Column Workflow Selector */
      :where(html[data-page="ai-automation"]) .ai-control-stage-wrapper {
        display: none !important;
      }
      :where(html[data-page="ai-automation"]) .ai-control-mobile-stage {
        display: flex !important;
      }
      :where(html[data-page="ai-automation"]) .ai-flow-node-card {
        position: static;
        max-width: 100%;
      }
    }

    @media (max-width: 430px) {
      :where(html[data-page="ai-automation"]) .ai-hero-stats-strip {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
      }
      :where(html[data-page="ai-automation"]) .ai-hero-stat-card {
        padding: 10px 8px;
        gap: 8px;
      }
      :where(html[data-page="ai-automation"]) .ai-stat-icon-wrap {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
      }
      :where(html[data-page="ai-automation"]) .ai-stat-text strong {
        font-size: 1.15rem;
      }
      :where(html[data-page="ai-automation"]) .ai-stat-text span {
        font-size: 0.675rem;
      }
      :where(html[data-page="ai-automation"]) .ai-mobile-grid-2col {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
      }
      :where(html[data-page="ai-automation"]) .ai-flow-node-card {
        padding: 8px 8px;
        gap: 7px;
      }
      :where(html[data-page="ai-automation"]) .ai-flow-node-icon {
        width: 28px;
        height: 28px;
        font-size: 0.95rem;
      }
      :where(html[data-page="ai-automation"]) .ai-flow-node-text h5 {
        font-size: 0.75rem;
      }
      :where(html[data-page="ai-automation"]) .ai-flow-node-text p {
        font-size: 0.625rem;
      }
      :where(html[data-page="ai-automation"]) .ai-outcome-panel-bottom {
        width: 100%;
        padding: 8px 10px;
      }
      :where(html[data-page="ai-automation"]) .ai-outcome-metric-col strong {
        font-size: 0.95rem;
      }
      :where(html[data-page="ai-automation"]) .ai-outcome-metric-col span {
        font-size: 0.625rem;
      }
    }

  
/* ai-automation.html embedded 2 */

    /* ==========================================================================
       Inlined nav.css
       ========================================================================== */

/* ==========================================================================
   Kaxon Technologies - Global Navigation Bar & Modal Stylesheet (nav.css)
   Pixel-perfect unified header according to design specification
   ========================================================================== */

:root:where([data-page="ai-automation"]) {
  --kx-navy: #13243D;
  --kx-deep-navy: #0D1B31;
  --kx-secondary-navy: #1B3152;
  --kx-gold: #F9BE22;
  --kx-gold-hover: #FFCA3A;
  --kx-green: #00D084;
  --kx-cyan: #52BCEB;
  --kx-soft-cyan: #EAF8FF;
  --kx-soft-gold: #FFF8DD;
  --kx-soft-green: #E8F8F0;
  --kx-white: #FFFFFF;
  --kx-gray: #F4F6FA;
  --kx-pill-bg: #EDF3FA;
  --kx-border: #E8EDF4;
  --kx-border-subtle: #F1F4F9;
  --kx-text-dark: #13243D;
  --kx-text-muted: #65748B;
  --kx-radius-pill: 9999px;
  --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
}

/* ==========================================================================
   GLOBAL HEADER BAR
   ========================================================================== */
:where(html[data-page="ai-automation"]) .kx-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: 1px solid rgba(232, 237, 244, 0.8);
  transition: all 0.3s ease;
}

:where(html[data-page="ai-automation"]) .kx-header.scrolled {
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.06);
  background: rgba(255, 255, 255, 0.98);
}

:where(html[data-page="ai-automation"]) .kx-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :where(html[data-page="ai-automation"]) .kx-container {
    padding: 0 16px;
  }
}

:where(html[data-page="ai-automation"]) .kx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Brand Logo */
:where(html[data-page="ai-automation"]) .kx-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0F1D32;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

:where(html[data-page="ai-automation"]) .kx-logo-tech {
  color: #00D084;
  font-weight: 800;
}

/* ==========================================================================
   CENTER NAVIGATION PILL CAPSULE
   ========================================================================== */
:where(html[data-page="ai-automation"]) .kx-nav-menu {
  display: flex;
  align-items: center;
  background: #EDF3FA;
  padding: 4px 6px;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(220, 230, 242, 0.85);
  box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
  flex-shrink: 1;
}

:where(html[data-page="ai-automation"]) .kx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

:where(html[data-page="ai-automation"]) .kx-nav-item {
  position: relative;
}

:where(html[data-page="ai-automation"]) .kx-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--kx-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

:where(html[data-page="ai-automation"]) .kx-nav-link:hover {
  color: #0F1D32;
  background: rgba(255, 255, 255, 0.7);
}

:where(html[data-page="ai-automation"]) .kx-nav-link.active {
  color: #0F1D32 !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
}

:where(html[data-page="ai-automation"]) .kx-nav-link::after,:where(html[data-page="ai-automation"]) 
.kx-nav-link.active::after {
  display: none !important;
}

:where(html[data-page="ai-automation"]) .kx-chevron-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  stroke: currentColor;
}

/* Dropdown */
:where(html[data-page="ai-automation"]) .kx-dropdown-wrapper {
  position: relative;
}

:where(html[data-page="ai-automation"]) .kx-dropdown-wrapper:hover .kx-chevron-icon,:where(html[data-page="ai-automation"]) 
.kx-dropdown-wrapper:focus-within .kx-chevron-icon {
  transform: rotate(180deg);
}

:where(html[data-page="ai-automation"]) .kx-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 250px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
  border: 1px solid var(--kx-border);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 100;
}

:where(html[data-page="ai-automation"]) .kx-dropdown-wrapper:hover .kx-dropdown-menu,:where(html[data-page="ai-automation"]) 
.kx-dropdown-wrapper:focus-within .kx-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

:where(html[data-page="ai-automation"]) .kx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #13243D;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

:where(html[data-page="ai-automation"]) .kx-dropdown-item:hover {
  background: #F0F7FF;
  color: #0F1D32;
}

/* ==========================================================================
   RIGHT ACTION BUTTONS
   ========================================================================== */
:where(html[data-page="ai-automation"]) .kx-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

:where(html[data-page="ai-automation"]) .kx-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0F1D32;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

:where(html[data-page="ai-automation"]) .kx-btn-pill-navy:hover {
  background: #1B2E4B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
}

:where(html[data-page="ai-automation"]) .kx-btn-pill-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F9BE22;
  color: #0F1D32;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
}

:where(html[data-page="ai-automation"]) .kx-btn-pill-gold:hover {
  background: #FFCA3A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
}

/* Mobile Hamburger Toggle */
:where(html[data-page="ai-automation"]) .kx-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0F1D32;
  border-radius: 8px;
  transition: background 0.2s ease;
}

:where(html[data-page="ai-automation"]) .kx-mobile-toggle:hover {
  background: #EDF3FA;
}

@media (max-width: 1240px) {
  :where(html[data-page="ai-automation"]) .kx-nav-actions .kx-btn-pill-navy {
    display: none;
  }
}

@media (max-width: 1100px) {
  :where(html[data-page="ai-automation"]) .kx-nav-menu {
    display: none;
  }

  :where(html[data-page="ai-automation"]) .kx-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  :where(html[data-page="ai-automation"]) .kx-nav-inner {
    height: 70px;
    gap: 8px;
  }
  :where(html[data-page="ai-automation"]) .kx-logo {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  :where(html[data-page="ai-automation"]) .kx-nav-actions .kx-btn-pill-gold {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  :where(html[data-page="ai-automation"]) .kx-logo {
    font-size: 18px;
  }
  :where(html[data-page="ai-automation"]) .kx-nav-actions {
    gap: 6px;
  }
  :where(html[data-page="ai-automation"]) .kx-nav-actions .kx-btn-pill-gold {
    padding: 7px 11px;
    font-size: 11.5px;
    gap: 4px;
  }
  :where(html[data-page="ai-automation"]) .kx-nav-actions .kx-btn-pill-gold svg {
    display: none;
  }
  :where(html[data-page="ai-automation"]) .kx-mobile-toggle {
    padding: 6px;
  }
}

@media (max-width: 360px) {
  :where(html[data-page="ai-automation"]) .kx-container {
    padding: 0 6px;
  }
  :where(html[data-page="ai-automation"]) .kx-nav-inner {
    gap: 2px;
  }
  :where(html[data-page="ai-automation"]) .kx-logo {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  :where(html[data-page="ai-automation"]) .kx-nav-actions {
    gap: 2px;
  }
  :where(html[data-page="ai-automation"]) .kx-nav-actions .kx-btn-pill-gold {
    padding: 5px 6px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  :where(html[data-page="ai-automation"]) .kx-mobile-toggle {
    padding: 2px;
  }
}

/* ==========================================================================
   MOBILE NAVIGATION DRAWER
   ========================================================================== */
:where(html[data-page="ai-automation"]) .kx-mobile-drawer {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  height: calc(100vh - 80px);
  background: #FFFFFF;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 999;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(19, 36, 61, 0.15);
}

@media (max-width: 768px) {
  :where(html[data-page="ai-automation"]) .kx-mobile-drawer {
    top: 70px;
    height: calc(100vh - 70px);
  }
}

:where(html[data-page="ai-automation"]) .kx-mobile-drawer.open,:where(html[data-page="ai-automation"]) 
.kx-mobile-drawer.active {
  transform: translateX(0);
}

:where(html[data-page="ai-automation"]) .kx-mobile-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #13243D;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 12px;
  transition: all 0.2s ease;
}

:where(html[data-page="ai-automation"]) .kx-mobile-nav-link:hover,:where(html[data-page="ai-automation"]) 
.kx-mobile-nav-link.active {
  background: #EDF3FA;
  color: #0F1D32;
}

:where(html[data-page="ai-automation"]) .kx-mobile-nav-link.sub {
  padding-left: 32px;
  font-size: 14px;
  font-weight: 600;
  color: #556987;
}

/* ==========================================================================
   GLOBAL LEAD / CONSULTATION MODAL
   ========================================================================== */
:where(html[data-page="ai-automation"]) .kx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 49, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  padding: 20px;
}

:where(html[data-page="ai-automation"]) .kx-modal-overlay.active,:where(html[data-page="ai-automation"]) 
.kx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

:where(html[data-page="ai-automation"]) .kx-modal-dialog {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
  border: 1px solid var(--kx-border);
  overflow: hidden;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

:where(html[data-page="ai-automation"]) .kx-modal-overlay.active .kx-modal-dialog,:where(html[data-page="ai-automation"]) 
.kx-modal-overlay.is-open .kx-modal-dialog {
  transform: scale(1) translateY(0);
}

:where(html[data-page="ai-automation"]) .kx-modal-header {
  padding: 28px 32px 16px;
  position: relative;
}

:where(html[data-page="ai-automation"]) .kx-modal-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--kx-navy);
  margin: 0 0 6px;
}

:where(html[data-page="ai-automation"]) .kx-modal-subtitle {
  font-size: 14px;
  color: var(--kx-text-muted);
  margin: 0;
}

:where(html[data-page="ai-automation"]) .kx-modal-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--kx-gray);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-navy);
  transition: background 0.2s ease, transform 0.2s ease;
}

:where(html[data-page="ai-automation"]) .kx-modal-close:hover {
  background: #E2E8F0;
  transform: rotate(90deg);
}

:where(html[data-page="ai-automation"]) .kx-modal-body {
  padding: 0 32px 32px;
}

:where(html[data-page="ai-automation"]) .kx-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:where(html[data-page="ai-automation"]) .kx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

:where(html[data-page="ai-automation"]) .kx-form-label {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kx-navy);
}

:where(html[data-page="ai-automation"]) .kx-form-input,:where(html[data-page="ai-automation"]) 
.kx-form-textarea,:where(html[data-page="ai-automation"]) 
.kx-form-select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--kx-border);
  background: var(--kx-gray);
  color: var(--kx-navy);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

:where(html[data-page="ai-automation"]) .kx-form-input:focus,:where(html[data-page="ai-automation"]) 
.kx-form-textarea:focus,:where(html[data-page="ai-automation"]) 
.kx-form-select:focus {
  outline: none;
  border-color: var(--kx-navy);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
}

:where(html[data-page="ai-automation"]) .kx-modal-submit {
  background: var(--kx-navy);
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

:where(html[data-page="ai-automation"]) .kx-modal-submit:hover {
  background: var(--kx-deep-navy);
  transform: translateY(-1px);
}

/* ==========================================================================
   FOOTER (Fluid Responsive Grid & Mobile Optimization)
   ========================================================================== */
:where(html[data-page="ai-automation"]) .site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
  position: relative;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

:where(html[data-page="ai-automation"]) .site-footer .container,:where(html[data-page="ai-automation"]) 
.site-footer .kx-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

:where(html[data-page="ai-automation"]) .footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

:where(html[data-page="ai-automation"]) .footer-brand {
  min-width: 0;
}

:where(html[data-page="ai-automation"]) .footer-brand .brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

:where(html[data-page="ai-automation"]) .footer-brand .brand-logo .dot {
  color: #2FB7A7;
}

:where(html[data-page="ai-automation"]) .footer-brand p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  max-width: 290px;
}

:where(html[data-page="ai-automation"]) .footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

:where(html[data-page="ai-automation"]) .footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

:where(html[data-page="ai-automation"]) .footer-links a {
  font-size: 0.835rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

:where(html[data-page="ai-automation"]) .footer-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

:where(html[data-page="ai-automation"]) .footer-follow-wrapper {
  margin-top: 24px;
}

:where(html[data-page="ai-automation"]) .footer-follow-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

:where(html[data-page="ai-automation"]) .footer-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

:where(html[data-page="ai-automation"]) .social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  text-decoration: none;
  transition: var(--transition);
}

:where(html[data-page="ai-automation"]) .social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

:where(html[data-page="ai-automation"]) .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  flex-wrap: wrap;
  gap: 12px;
}

/* Floating WhatsApp Button */
:where(html[data-page="ai-automation"]) .floating-whatsapp-btn {
  position: fixed;
  bottom: clamp(16px, 3vw, 24px);
  right: clamp(16px, 3vw, 24px);
  width: clamp(48px, 6vw, 56px);
  height: clamp(48px, 6vw, 56px);
  background-color: #25D366;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.38);
  z-index: 990;
  transition: var(--transition);
  text-decoration: none;
}

:where(html[data-page="ai-automation"]) .floating-whatsapp-btn:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.50);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (Granular, Progressive Adaptation)
   ========================================================================== */

/* 1. Large Tablet / Medium Laptops (1180px - 1025px) */
@media (max-width: 1180px) {
  :where(html[data-page="ai-automation"]) .nav-link {
    padding: 6px 9px;
    font-size: 0.82rem;
  }
  :where(html[data-page="ai-automation"]) .btn-nav-phone {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  :where(html[data-page="ai-automation"]) .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  :where(html[data-page="ai-automation"]) .footer-top-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}

/* 2. Tablets & Mobile Breakpoint (<= 1024px) */
@media (max-width: 1024px) {
  :root:where([data-page="ai-automation"]) {
    --header-height: 66px;
  }
  :where(html[data-page="ai-automation"]) .nav-menu-wrapper,:where(html[data-page="ai-automation"]) 
  .btn-phone-desktop {
    display: none !important;
  }
  :where(html[data-page="ai-automation"]) .hamburger-btn {
    display: flex !important;
  }
  :where(html[data-page="ai-automation"]) .btn-cta-desktop {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  :where(html[data-page="ai-automation"]) .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  :where(html[data-page="ai-automation"]) .footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  :where(html[data-page="ai-automation"]) .footer-brand p {
    max-width: 100%;
  }
}

/* 3. Small Tablets & Phablets (<= 768px) */
@media (max-width: 768px) {
  :root:where([data-page="ai-automation"]) {
    --header-height: 62px;
  }
  :where(html[data-page="ai-automation"]) .btn-cta-desktop {
    display: none !important;
  }
  :where(html[data-page="ai-automation"]) .site-footer {
    padding: 46px 0 24px;
  }
  :where(html[data-page="ai-automation"]) .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding-bottom: 28px;
  }
}

/* 4. Standard Mobile Screens (<= 540px) */
@media (max-width: 540px) {
  :root:where([data-page="ai-automation"]) {
    --header-height: 58px;
  }
  :where(html[data-page="ai-automation"]) .nav-container {
    padding: 0 14px;
  }
  :where(html[data-page="ai-automation"]) .hamburger-btn {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  :where(html[data-page="ai-automation"]) .hamburger-btn span {
    width: 20px;
  }
  :where(html[data-page="ai-automation"]) .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  :where(html[data-page="ai-automation"]) .footer-brand {
    grid-column: 1 / -1;
  }
  :where(html[data-page="ai-automation"]) .footer-col-company {
    grid-column: 1;
  }
  :where(html[data-page="ai-automation"]) .footer-col-solutions {
    grid-column: 2;
  }
  :where(html[data-page="ai-automation"]) .footer-col-resources {
    grid-column: 1 / -1;
  }
  :where(html[data-page="ai-automation"]) .footer-col h5 {
    margin-bottom: 12px;
  }
  :where(html[data-page="ai-automation"]) .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* 5. Ultra-Small Devices (<= 360px) */
@media (max-width: 360px) {
  :where(html[data-page="ai-automation"]) .brand-logo {
    font-size: 1.15rem;
  }
  :where(html[data-page="ai-automation"]) .mobile-nav-drawer {
    width: 90vw;
    padding: 18px 14px 22px;
  }
  :where(html[data-page="ai-automation"]) .mobile-nav-link {
    font-size: 0.95rem;
  }
}
  
/* shared-chrome.css */
@scope (:where(html[data-page="ai-automation"]) .shared-kx-header,:where(html[data-page="ai-automation"])  .shared-kx-mobile-drawer,:where(html[data-page="ai-automation"])  .shared-site-footer) {
:scope { --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif; --container-max: 1240px; --color-yellow: #F8C72E; --color-primary-navy: #14243D; --transition: all .2s ease; font-family: var(--font-body, 'Plus Jakarta Sans', 'Inter', sans-serif); line-height: 1.5; }
:where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(a) { text-decoration: none; }



:scope {
  --kx-navy: #13243D;
  --kx-deep-navy: #0D1B31;
  --kx-secondary-navy: #1B3152;
  --kx-gold: #F9BE22;
  --kx-gold-hover: #FFCA3A;
  --kx-green: #00D084;
  --kx-cyan: #52BCEB;
  --kx-soft-cyan: #EAF8FF;
  --kx-soft-gold: #FFF8DD;
  --kx-soft-green: #E8F8F0;
  --kx-white: #FFFFFF;
  --kx-gray: #F4F6FA;
  --kx-pill-bg: #EDF3FA;
  --kx-border: #E8EDF4;
  --kx-border-subtle: #F1F4F9;
  --kx-text-dark: #13243D;
  --kx-text-muted: #65748B;
  --kx-radius-pill: 9999px;
  --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
}


:scope.shared-kx-header,
.shared-kx-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: 1px solid rgba(232, 237, 244, 0.8);
  transition: all 0.25s ease;
}

:scope.shared-kx-header.scrolled,
.shared-kx-header.scrolled {
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

:scope.shared-kx-header.menu-open,
.shared-kx-header.menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

.shared-kx-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .shared-kx-container {
    padding: 0 16px;
  }
}

.shared-kx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
}


.shared-kx-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0F1D32;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

.shared-kx-logo-tech {
  color: #00D084;
  font-weight: 800;
}


.shared-kx-nav-menu {
  display: flex;
  align-items: center;
  background: #EDF3FA;
  padding: 4px 6px;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(220, 230, 242, 0.85);
  box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
  flex-shrink: 1;
}

.shared-kx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shared-kx-nav-item {
  position: relative;
}

.shared-kx-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--kx-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-nav-link:hover {
  color: #0F1D32;
  background: rgba(255, 255, 255, 0.7);
}

.shared-kx-nav-link.active {
  color: #0F1D32 !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
}

.shared-kx-nav-link::after,
.shared-kx-nav-link.active::after {
  display: none !important;
}

.shared-kx-chevron-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  stroke: currentColor;
}


.shared-kx-dropdown-wrapper {
  position: relative;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper.open .shared-kx-chevron-icon {
  transform: rotate(180deg);
}

.shared-kx-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 250px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
  border: 1px solid var(--kx-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  pointer-events: none;
  z-index: 100;
}

/* Invisible hover bridge to eliminate the 8px cursor gap */
.shared-kx-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
  background: transparent;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper.open .shared-kx-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.shared-kx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #13243D;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.shared-kx-dropdown-item:hover {
  background: #F0F7FF;
  color: #0F1D32;
}


.shared-kx-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.shared-kx-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0F1D32;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-btn-pill-navy:hover {
  background: #1B2E4B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
}

.shared-kx-btn-pill-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F9BE22;
  color: #0F1D32;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
}

.shared-kx-btn-pill-gold:hover {
  background: #FFCA3A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
}

.shared-kx-btn-pill-navy:active,
.shared-kx-btn-pill-gold:active,
.kx-modal-submit:active {
  transform: translateY(0) scale(0.98);
}


.shared-kx-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0F1D32;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.shared-kx-mobile-toggle:hover {
  background: #EDF3FA;
}

@media (max-width: 1240px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-navy {
    display: none;
  }
}

@media (max-width: 1100px) {
  .shared-kx-nav-menu {
    display: none;
  }

  .shared-kx-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .shared-kx-nav-inner {
    height: 70px;
    gap: 8px;
  }
  .shared-kx-logo {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .shared-kx-logo {
    font-size: 18px;
  }
  .shared-kx-nav-actions {
    gap: 6px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 7px 11px;
    font-size: 11.5px;
    gap: 4px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold svg {
    display: none;
  }
  .shared-kx-mobile-toggle {
    padding: 6px;
  }
}

@media (max-width: 360px) {
  .shared-kx-container {
    padding: 0 6px;
  }
  .shared-kx-nav-inner {
    gap: 2px;
  }
  .shared-kx-logo {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  .shared-kx-nav-actions {
    gap: 2px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 5px 6px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  .shared-kx-mobile-toggle {
    padding: 2px;
  }
}


:scope.shared-kx-mobile-drawer,
.shared-kx-mobile-drawer {
  position: fixed;
  top: var(--header-height, 78px);
  left: 0;
  width: 100%;
  height: calc(100dvh - var(--header-height, 78px));
  background: #FFFFFF !important;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 40px rgba(19, 36, 61, 0.12);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :scope.shared-kx-mobile-drawer,
  .shared-kx-mobile-drawer {
    top: var(--header-height, 70px);
    height: calc(100dvh - var(--header-height, 70px));
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

:scope.shared-kx-mobile-drawer.open,
:scope.shared-kx-mobile-drawer.active,
.shared-kx-mobile-drawer.open,
.shared-kx-mobile-drawer.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  pointer-events: auto;
}

.shared-kx-mobile-nav-link {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 650;
  color: #14243D;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 12px;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.shared-kx-mobile-nav-link:hover {
  background: #F8FAFC;
  color: #0E1B2F;
}

.shared-kx-mobile-nav-link.active {
  background: #F4F7FB !important;
  color: #0E1B2F !important;
  font-weight: 750 !important;
  border-left: 3px solid #F8C72E;
  padding-left: 13px;
}

.shared-kx-mobile-nav-link.shared-sub {
  margin-left: 12px;
  margin-right: 4px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 550;
  color: #556987;
  background: #F8FAFC;
  border-radius: 10px;
  border-left: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.shared-kx-mobile-nav-link.shared-sub::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94A3B8;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.shared-kx-mobile-nav-link.shared-sub:hover,
.shared-kx-mobile-nav-link.shared-sub.active {
  background: #EDF4FB;
  color: #0E1B2F;
  border-left-color: #F8C72E;
}

.shared-kx-mobile-nav-link.shared-sub.active::before {
  background: #F8C72E;
  transform: scale(1.4);
}

.shared-kx-mobile-drawer-footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #EEF2F6;
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-gold {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(248, 199, 46, 0.3);
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-navy {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
  border-radius: 9999px;
}


.kx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 49, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  padding: 20px;
}

.kx-modal-overlay.active,
.kx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.kx-modal-dialog {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
  border: 1px solid var(--kx-border);
  overflow: hidden;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.kx-modal-overlay.active .kx-modal-dialog,
.kx-modal-overlay.is-open .kx-modal-dialog {
  transform: scale(1) translateY(0);
}

.kx-modal-header {
  padding: 28px 32px 16px;
  position: relative;
}

.kx-modal-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--kx-navy);
  margin: 0 0 6px;
}

.kx-modal-subtitle {
  font-size: 14px;
  color: var(--kx-text-muted);
  margin: 0;
}

.kx-modal-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--kx-gray);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-navy);
  transition: background 0.2s ease, transform 0.2s ease;
}

.kx-modal-close:hover {
  background: #E2E8F0;
  transform: rotate(90deg);
}

.kx-modal-body {
  padding: 0 32px 32px;
}

.kx-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx-form-label {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kx-navy);
}

.kx-form-input,
.kx-form-textarea,
.kx-form-select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--kx-border);
  background: var(--kx-gray);
  color: var(--kx-navy);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.kx-form-input:focus,
.kx-form-textarea:focus,
.kx-form-select:focus {
  outline: none;
  border-color: var(--kx-navy);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
}

.kx-modal-submit {
  background: var(--kx-navy);
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.kx-modal-submit:hover {
  background: var(--kx-deep-navy);
  transform: translateY(-1px);
}


:scope.shared-site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
  position: relative;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

:scope.shared-site-footer .shared-container,
:scope.shared-site-footer .shared-kx-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

.shared-footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand {
  min-width: 0;
}

.shared-footer-brand .shared-brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand .shared-brand-logo .shared-dot {
  color: #2FB7A7;
}

.shared-footer-brand p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  max-width: 290px;
}

.shared-footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.shared-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.shared-footer-links a {
  font-size: 0.835rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.shared-footer-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

.shared-footer-follow-wrapper {
  margin-top: 24px;
}

.shared-footer-follow-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.shared-footer-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.shared-social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  text-decoration: none;
  transition: var(--transition);
}

.shared-social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

.shared-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  flex-wrap: wrap;
  gap: 12px;
}


@media (max-width: 1180px) {
  .nav-link {
    padding: 6px 9px;
    font-size: 0.82rem;
  }
  .btn-nav-phone {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}


@media (max-width: 1024px) {
  :scope {
    --header-height: 66px;
  }
  .nav-menu-wrapper,
  .btn-phone-desktop {
    display: none !important;
  }
  .hamburger-btn {
    display: flex !important;
  }
  .btn-cta-desktop {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .shared-footer-brand p {
    max-width: 100%;
  }
}


@media (max-width: 768px) {
  :scope {
    --header-height: 62px;
  }
  .btn-cta-desktop {
    display: none !important;
  }
  .shared-site-footer {
    padding: 46px 0 24px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding-bottom: 28px;
  }
}


@media (max-width: 540px) {
  :scope {
    --header-height: 58px;
  }
  .nav-container {
    padding: 0 14px;
  }
  .hamburger-btn {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  .hamburger-btn span {
    width: 20px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
  }
  .shared-footer-col-company {
    grid-column: 1;
  }
  .shared-footer-col-solutions {
    grid-column: 2;
  }
  .shared-footer-col-resources {
    grid-column: 1 / -1;
  }
  .shared-footer-col h5 {
    margin-bottom: 12px;
  }
  .shared-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


@media (max-width: 360px) {
  .shared-brand-logo {
    font-size: 1.15rem;
  }
  .mobile-nav-drawer {
    width: 90vw;
    padding: 18px 14px 22px;
  }
  .mobile-nav-link {
    font-size: 0.95rem;
  }
}
  
}
:where(html[data-page="ai-automation"]) .shared-kx-mobile-drawer { visibility: hidden; }
:where(html[data-page="ai-automation"]) .shared-kx-mobile-drawer.open { visibility: visible; }
:where(html[data-page="ai-automation"]) .shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="ai-automation"]) .shared-kx-btn-pill-navy:active,:where(html[data-page="ai-automation"]) 
  .shared-kx-btn-pill-gold:active,:where(html[data-page="ai-automation"]) 
  .kx-modal-submit:active { transform: none; }
}

/* page-upgrades.css */
:where(html[data-page="ai-automation"]) body.rv-upgraded { --rv-navy:#102039; --rv-muted:#5e748f; --rv-gold:#f5a916; --rv-cream:#fbf7ef; font-family:'Plus Jakarta Sans','Inter',sans-serif; background:var(--rv-cream); }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-container { width:calc(100% - 80px); max-width:1240px; margin-inline:auto; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-section { scroll-margin-top:96px; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities) { padding-top:80px; padding-bottom:80px; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-section h2 { font-family:'Outfit','Plus Jakarta Sans',sans-serif!important; font-weight:800!important; font-size:clamp(30px,3.1vw,42px)!important; line-height:1.16!important; letter-spacing:-.04em!important; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-section h3 { font-family:'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.025em; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-section p { line-height:1.7; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-section[data-rv-surface="light"] { background:#fffdf8!important; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-section[data-rv-surface="light"]:nth-of-type(even) { background:#fff!important; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-section[data-rv-surface="light"] h2 { color:#102039; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-section :is(input,select,textarea) { border-radius:12px; font-family:'Plus Jakarta Sans','Inter',sans-serif; }
:where(html[data-page="ai-automation"]) .rv-upgraded :is(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #21877b; outline-offset:4px; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-hero { background-color:#fbf7ef; background-image:radial-gradient(#d9d7cc .7px,transparent .7px); background-size:24px 24px; padding:44px 0 54px; border-bottom:1px solid #e9e6de; position:relative; overflow:hidden; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-hero-copy { min-width:0; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-eyebrow { display:flex; align-items:center; gap:9px; font:700 11px/1.4 'Plus Jakarta Sans','Inter',sans-serif; text-transform:uppercase; letter-spacing:.14em; color:#315373; margin:0 0 16px; }
:where(html[data-page="ai-automation"]) .rv-eyebrow > span { width:7px; height:7px; border-radius:50%; background:#f5a916; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-hero h1 { font-family:'Outfit','Plus Jakarta Sans',sans-serif!important; font-size:clamp(40px,4.1vw,58px)!important; line-height:1.09!important; font-weight:800!important; letter-spacing:-.05em!important; color:#102039!important; margin:0 0 20px!important; max-width:100%; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-hero h1 em { font-style:normal; color:#c88409; text-decoration:underline; text-decoration-color:#f5a916; text-decoration-thickness:3px; text-underline-offset:8px; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-description { color:#5e748f; font:400 17px/1.75 'Plus Jakarta Sans','Inter',sans-serif; max-width:560px; margin:0 0 26px; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-actions { display:flex; gap:12px; flex-wrap:wrap; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-button { display:inline-flex; justify-content:center; align-items:center; gap:14px; padding:15px 21px; min-height:52px; border-radius:999px; font:700 13px/1.4 'Plus Jakarta Sans','Inter',sans-serif; text-decoration:none; color:#102039; border:1px solid #e2e7ee; transition:background .2s,transform .2s; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-button-primary { background:#ffc526; border-color:#ffc526; box-shadow:0 8px 20px #f5a91620; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-button-secondary { background:#fff; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-button:hover { transform:translateY(-2px); background:#fff0bd; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-button i { font-size:18px; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-hero-art { min-width:0; position:relative; padding:0; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-note { font:600 24px/1.15 Caveat,cursive; color:#315373; text-align:right; margin:14px 12px 0 0; transform:rotate(-3deg); }
:where(html[data-page="ai-automation"]) .rv-note svg { display:inline-block; width:50px; height:28px; vertical-align:middle; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-pastel-0 { background:#fff2cb; color:#a97007; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-pastel-1 { background:#def7ee; color:#187d6b; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-pastel-2 { background:#e5efff; color:#2867c7; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-pastel-3 { background:#fbe4ef; color:#b83c73; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-pastel-4 { background:#ede5fc; color:#7250b2; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-icon { width:56px; height:56px; flex-shrink:0; display:grid; place-items:center; border-radius:18px; font-size:27px; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-capabilities { padding:46px 0 54px; background:#fff; border-bottom:1px solid #e9edf0; }
:where(html[data-page="ai-automation"]) .rv-capabilities .rv-eyebrow { margin-bottom:14px; }
:where(html[data-page="ai-automation"]) .rv-capabilities h2 { max-width:1000px; color:#102039; margin:0 0 32px; }
:where(html[data-page="ai-automation"]) .rv-capability-grid { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); gap:26px; }
:where(html[data-page="ai-automation"]) .rv-capability { display:flex; align-items:flex-start; gap:15px; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-capability h3 { font-size:16px; line-height:1.3; color:#102039; margin:0 0 8px; }
:where(html[data-page="ai-automation"]) .rv-upgraded .rv-capability p { font:400 13px/1.6 'Plus Jakarta Sans','Inter',sans-serif; color:#5e748f; margin:0; }
:where(html[data-page="ai-automation"]) .rv-orbit { position:relative; width:100%; max-width:510px; aspect-ratio:1.12; margin:auto; }
:where(html[data-page="ai-automation"]) .rv-orbit-ring { position:absolute; width:70%; height:76%; top:12%; left:15%; border:1.5px solid #e9b448; border-radius:50%; }
:where(html[data-page="ai-automation"]) .rv-orbit-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:37%; aspect-ratio:1; border-radius:50%; background:#102039; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font:800 24px/1.15 'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.04em; box-shadow:0 12px 30px #10203915; text-align:center; }
:where(html[data-page="ai-automation"]) .rv-orbit-core span { color:#26b794; font-size:22px; }
:where(html[data-page="ai-automation"]) .rv-orbit-node { position:absolute; left:calc(50% + cos(calc(var(--i)*360deg/var(--count) - 90deg))*37%); top:calc(50% + sin(calc(var(--i)*360deg/var(--count) - 90deg))*37%); transform:translate(-50%,-50%); width:25%; aspect-ratio:1; border:3px solid #fff; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; box-shadow:0 6px 22px #10203906; }
:where(html[data-page="ai-automation"]) .rv-orbit-node i { font-size:32px; }:where(html[data-page="ai-automation"]) .rv-orbit-node strong { font:700 12px/1.3 'Plus Jakarta Sans','Inter',sans-serif; color:#102039; text-align:center; }
:where(html[data-page="ai-automation"]) .rv-orbit-4 .rv-orbit-node { left:calc(50% + cos(calc(var(--i)*90deg - 135deg))*43%); top:calc(50% + sin(calc(var(--i)*90deg - 135deg))*43%); }
:where(html[data-page="ai-automation"]) .rv-career-panels { display:flex; align-items:center; gap:14px; padding:24px 8px; min-height:385px; }
:where(html[data-page="ai-automation"]) .rv-career-panel { flex:1; min-width:0; height:320px; border-radius:18px; padding:30px 18px; display:flex; flex-direction:column; justify-content:center; gap:25px; transform:rotate(-4deg); }
:where(html[data-page="ai-automation"]) .rv-career-panel:nth-child(2){transform:translateY(-22px) rotate(3deg)}:where(html[data-page="ai-automation"]) .rv-career-panel:nth-child(3){transform:rotate(-3deg)}
:where(html[data-page="ai-automation"]) .rv-career-panel i { font-size:48px; }:where(html[data-page="ai-automation"]) .rv-career-panel strong { font:800 clamp(25px,2.5vw,36px)/1 'Outfit','Plus Jakarta Sans',sans-serif; color:#102039; letter-spacing:-.04em; }:where(html[data-page="ai-automation"]) .rv-career-panel span { font:500 11px/1.6 'Plus Jakarta Sans','Inter',sans-serif; text-transform:uppercase; letter-spacing:.08em; color:#5e748f; }
:where(html[data-page="ai-automation"]) .rv-roadmap { background:#fff; border:1px solid #e8e9e6; padding:30px; border-radius:24px; box-shadow:0 16px 40px #10203908; }
:where(html[data-page="ai-automation"]) .rv-small-label { font:700 10px/1.4 'Plus Jakarta Sans','Inter',sans-serif!important; text-transform:uppercase; letter-spacing:.13em; color:#315373; margin:0 0 26px!important; }
:where(html[data-page="ai-automation"]) .rv-roadmap-step { display:flex; gap:20px; padding:16px 0; }:where(html[data-page="ai-automation"]) .rv-roadmap-step .rv-icon { width:70px;height:70px;border-radius:50%;font-size:34px; }
:where(html[data-page="ai-automation"]) .rv-roadmap-step small { font:700 12px 'Plus Jakarta Sans','Inter',sans-serif; color:#178575; }:where(html[data-page="ai-automation"]) .rv-upgraded .rv-roadmap-step h3 { font:800 21px/1.2 'Outfit','Plus Jakarta Sans',sans-serif; color:#102039; margin:6px 0; }:where(html[data-page="ai-automation"]) .rv-roadmap-step p { color:#5e748f; font-size:13px; margin:0; }
:where(html[data-page="ai-automation"]) .rv-art-conversation-roadmap > .rv-note,:where(html[data-page="ai-automation"]) .rv-art-cloud-architecture > .rv-note,:where(html[data-page="ai-automation"]) .rv-art-search-visibility > .rv-note { margin:0 12px 18px; }
:where(html[data-page="ai-automation"]) .rv-devices { min-height:410px; padding:20px 50px 20px 0; position:relative; }
:where(html[data-page="ai-automation"]) .rv-browser { border:5px solid #16334d; border-radius:17px; overflow:hidden; background:#fffdf8; box-shadow:0 18px 25px #10203920; }
:where(html[data-page="ai-automation"]) .rv-browser-bar { height:24px; display:flex; gap:6px; align-items:center; padding:0 12px; background:#16334d; }:where(html[data-page="ai-automation"]) .rv-browser-bar b { width:7px;height:7px;border-radius:50%;background:#ffcd38; }:where(html[data-page="ai-automation"]) .rv-browser-bar b:first-child{background:#ed7880}:where(html[data-page="ai-automation"]) .rv-browser-bar b:last-child{background:#24b7a8}
:where(html[data-page="ai-automation"]) .rv-browser-content { min-height:310px; padding:23px; position:relative; overflow:hidden; }:where(html[data-page="ai-automation"]) .rv-mock-brand { display:block;font:800 17px 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039; margin-bottom:26px; }:where(html[data-page="ai-automation"]) .rv-browser-content small { display:block;font:700 8px 'Plus Jakarta Sans','Inter',sans-serif;text-transform:uppercase;letter-spacing:.15em;color:#476780;margin-bottom:14px; }:where(html[data-page="ai-automation"]) .rv-browser-content strong { display:block;font:800 29px/1.13 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;letter-spacing:-.04em;position:relative;z-index:1; }:where(html[data-page="ai-automation"]) .rv-browser-content p { font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;max-width:210px;color:#5e748f;margin:15px 0; }:where(html[data-page="ai-automation"]) .rv-mock-button { display:inline-block;padding:10px 17px;background:#ffca32;color:#102039;border-radius:999px;font:700 10px 'Plus Jakarta Sans','Inter',sans-serif;position:relative;z-index:1; }
:where(html[data-page="ai-automation"]) .rv-shapes { width:180px;height:160px;position:absolute;bottom:-15px;right:-20px;pointer-events:none; }:where(html[data-page="ai-automation"]) .rv-shapes b { position:absolute; }:where(html[data-page="ai-automation"]) .rv-shapes b:nth-child(1){width:110px;height:110px;border-radius:100% 0 0 0;background:#25b09e;right:0;bottom:0}:where(html[data-page="ai-automation"]) .rv-shapes b:nth-child(2){width:140px;height:140px;border-radius:100% 0 0 0;background:#f6e8c6;right:0;bottom:0;z-index:-1}:where(html[data-page="ai-automation"]) .rv-shapes b:nth-child(3){width:65px;height:65px;border-radius:50%;background:#ffce3a;left:0;top:0}
:where(html[data-page="ai-automation"]) .rv-mini-phone { position:absolute;bottom:0;right:0;width:145px;height:278px;padding:30px 13px 15px;border:7px solid #132b44;border-radius:26px;background:#fffdf8;box-shadow:0 14px 24px #10203920;overflow:hidden; }:where(html[data-page="ai-automation"]) .rv-mini-phone>b { position:absolute;top:4px;left:35%;width:30%;height:8px;border-radius:10px;background:#132b44; }:where(html[data-page="ai-automation"]) .rv-mini-phone>span:not(.rv-mock-button) { font:800 12px 'Outfit','Plus Jakarta Sans',sans-serif; }:where(html[data-page="ai-automation"]) .rv-mini-phone>strong { display:block;font:800 20px/1.12 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;margin:30px 0 20px; }:where(html[data-page="ai-automation"]) .rv-mini-phone .rv-shapes { transform:scale(.6);transform-origin:bottom right; }:where(html[data-page="ai-automation"]) .rv-mini-phone .rv-mock-button {font-size:8px;padding:8px 10px}
:where(html[data-page="ai-automation"]) .rv-flow { display:grid;grid-template-columns:1fr 1fr 1.2fr;align-items:center;gap:16px;min-height:340px;position:relative; }:where(html[data-page="ai-automation"]) .rv-flow::before {content:'';position:absolute;left:15%;right:15%;top:50%;height:2px;background:#f5a916;z-index:0}:where(html[data-page="ai-automation"]) .rv-flow-input { position:relative;background:#fff;border:1px solid #e2e7ee;border-radius:18px;padding:18px 10px;text-align:center; }:where(html[data-page="ai-automation"]) .rv-flow-input i {font-size:28px;color:#1da891;display:block;margin-bottom:10px}:where(html[data-page="ai-automation"]) .rv-flow-input strong {display:block;font-size:12px;color:#102039}:where(html[data-page="ai-automation"]) .rv-flow-input span {font-size:9px;color:#5e748f;display:block;margin-top:6px}:where(html[data-page="ai-automation"]) .rv-flow-core { position:relative;aspect-ratio:1;border-radius:50%;background:#102039;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;box-shadow:0 0 0 10px #e7eff7; }:where(html[data-page="ai-automation"]) .rv-flow-core i {font-size:34px}:where(html[data-page="ai-automation"]) .rv-flow-core strong {font-size:11px;line-height:1.4}:where(html[data-page="ai-automation"]) .rv-flow-outputs {display:flex;flex-direction:column;gap:24px;position:relative}:where(html[data-page="ai-automation"]) .rv-flow-outputs>div {padding:16px 12px;background:#fff;border:1px solid #e2e7ee;border-radius:999px;font-size:11px;display:flex;align-items:center;gap:10px;color:#102039}:where(html[data-page="ai-automation"]) .rv-flow-outputs i {font-size:23px;color:#248978}
:where(html[data-page="ai-automation"]) .rv-cloud {background:#102c46;color:#fff;padding:34px;border-radius:26px;box-shadow:0 18px 30px #10203915}:where(html[data-page="ai-automation"]) .rv-cloud-icon {text-align:center;font-size:100px;line-height:1}:where(html[data-page="ai-automation"]) .rv-cloud-branches{height:42px;border:2px solid #ffcc31;border-bottom:0;border-radius:18px 18px 0 0;margin:12px 14% 0;position:relative}:where(html[data-page="ai-automation"]) .rv-cloud-branches::after{content:'';position:absolute;left:50%;height:54px;top:-14px;border-left:2px solid #ffcc31}:where(html[data-page="ai-automation"]) .rv-server-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}:where(html[data-page="ai-automation"]) .rv-server{border:1px solid #88adc7;border-radius:8px;height:34px;display:flex;gap:5px;align-items:center;padding:10px;margin-bottom:4px}:where(html[data-page="ai-automation"]) .rv-server b{width:6px;height:6px;border-radius:50%;background:#21d2b1}:where(html[data-page="ai-automation"]) .rv-server span{width:24px;height:3px;background:#41637e;margin-left:4px}:where(html[data-page="ai-automation"]) .rv-server-grid strong{display:block;text-align:center;font-size:14px;margin-top:16px;color:white}
:where(html[data-page="ai-automation"]) .rv-app-phones {position:relative;min-height:430px;display:flex;justify-content:center;align-items:center;padding:10px 20px}:where(html[data-page="ai-automation"]) .rv-app-phone{position:relative;width:47%;height:390px;border:7px solid #132b44;border-radius:31px;background:#fffdf8;padding:36px 18px 20px;overflow:hidden;box-shadow:0 18px 25px #10203920;transform:rotate(-7deg)}:where(html[data-page="ai-automation"]) .rv-app-phone+.rv-app-phone{transform:rotate(7deg) translateY(16px);margin-left:-10px}:where(html[data-page="ai-automation"]) .rv-phone-notch{position:absolute;top:-1px;left:28%;width:44%;height:15px;border-radius:0 0 12px 12px;background:#132b44}:where(html[data-page="ai-automation"]) .rv-app-phone small{font:800 10px 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;white-space:nowrap}:where(html[data-page="ai-automation"]) .rv-app-phone small span{color:#1aac90}:where(html[data-page="ai-automation"]) .rv-app-phone>strong{font:800 29px/1.1 'Outfit','Plus Jakarta Sans',sans-serif;display:block;color:#102039;margin:36px 0 20px;letter-spacing:-.04em}:where(html[data-page="ai-automation"]) .rv-app-phone p{font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;color:#5e748f;margin-bottom:18px}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-app-phone h3{font:800 17px/1.2 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;margin:12px 0}:where(html[data-page="ai-automation"]) .rv-phone-row{display:flex;align-items:center;gap:10px;padding:14px 5px;border-bottom:1px solid #e2e7ee;font:600 11px 'Plus Jakarta Sans','Inter',sans-serif;color:#102039}:where(html[data-page="ai-automation"]) .rv-phone-row i{font-size:23px;color:#24a694}:where(html[data-page="ai-automation"]) .rv-app-phone .rv-shapes{transform:scale(.8);transform-origin:bottom right}:where(html[data-page="ai-automation"]) .rv-platforms{text-align:center;color:#315373;font-size:12px!important;margin-top:22px}:where(html[data-page="ai-automation"]) .rv-platforms i{font-size:18px;margin-left:12px}:where(html[data-page="ai-automation"]) .rv-platforms span{margin-left:14px;color:#afbac6}
:where(html[data-page="ai-automation"]) .rv-search {padding:28px;background:#fff;border:1px solid #e2e7ee;border-radius:24px;box-shadow:0 18px 35px #1020390c}:where(html[data-page="ai-automation"]) .rv-search-field{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid #e2e7ee;border-radius:999px;color:#102039;font-size:13px}:where(html[data-page="ai-automation"]) .rv-search-field i{font-size:21px}:where(html[data-page="ai-automation"]) .rv-search-result{padding:28px 8px}:where(html[data-page="ai-automation"]) .rv-search-result small{display:block;color:#71859b;font-size:10px;margin-bottom:14px}:where(html[data-page="ai-automation"]) .rv-search-result strong{display:block;color:#2761b7;font:700 22px 'Outfit','Plus Jakarta Sans',sans-serif;margin-bottom:18px}:where(html[data-page="ai-automation"]) .rv-search-result>span{display:block;height:9px;border-radius:5px;background:#e0e8f1;margin-top:8px}:where(html[data-page="ai-automation"]) .rv-search-result>span:last-child{width:80%}:where(html[data-page="ai-automation"]) .rv-trend{display:block;width:100%;height:auto;overflow:visible}:where(html[data-page="ai-automation"]) .rv-illustration-label{font:400 10px/1.5 'Plus Jakarta Sans','Inter',sans-serif!important;color:#71859b;margin-top:14px;text-align:center}
:where(html[data-page="ai-automation"]) .rv-funnel {display:flex;align-items:center;flex-direction:column;gap:12px;padding:0 24px}:where(html[data-page="ai-automation"]) .rv-funnel-brand{width:92px;height:92px;border-radius:50%;background:#102039;color:#fff;display:grid;place-content:center;font:800 18px/1.15 'Outfit','Plus Jakarta Sans',sans-serif;text-align:center;margin-bottom:4px}:where(html[data-page="ai-automation"]) .rv-funnel-step{display:flex;align-items:center;gap:20px;padding:24px 28px;border-radius:22px;width:100%;}:where(html[data-page="ai-automation"]) .rv-funnel-step:nth-child(3){width:90%}:where(html[data-page="ai-automation"]) .rv-funnel-step:nth-child(4){width:80%}:where(html[data-page="ai-automation"]) .rv-funnel-step>i{font-size:38px;color:#102039}:where(html[data-page="ai-automation"]) .rv-funnel-step strong{font:700 14px/1.3 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039}:where(html[data-page="ai-automation"]) .rv-funnel-step p{font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;color:#5e748f;margin:8px 0 0}
:where(html[data-page="ai-automation"]) .rv-media-fallback {display:flex!important;align-items:center;justify-content:center;flex-direction:column;gap:16px;min-height:140px;padding:30px;background:#eef4f2;color:#315373;border-radius:inherit;text-align:center;font:600 13px/1.5 'Plus Jakarta Sans','Inter',sans-serif}:where(html[data-page="ai-automation"]) .rv-media-fallback i{font-size:38px;color:#28a595}:where(html[data-page="ai-automation"]) .rv-media-fallback.rv-avatar{width:48px;height:48px;min-height:0;padding:0;border-radius:50%;font-size:14px}:where(html[data-page="ai-automation"]) .rv-media-fallback small{font-size:10px;color:#5e748f;text-transform:uppercase;letter-spacing:.1em}
@media(min-width:1400px){:where(html[data-page="ai-automation"]) .rv-upgraded .rv-hero{padding-top:48px;padding-bottom:58px}}
@media(max-width:1100px){:where(html[data-page="ai-automation"]) .rv-upgraded .rv-hero-grid{gap:32px}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-container{width:calc(100% - 48px)}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-hero h1{font-size:46px!important}:where(html[data-page="ai-automation"]) .rv-career-panel{padding:24px 12px}:where(html[data-page="ai-automation"]) .rv-flow{gap:10px}:where(html[data-page="ai-automation"]) .rv-app-phone{padding-inline:12px}:where(html[data-page="ai-automation"]) .rv-app-phone>strong{font-size:26px}:where(html[data-page="ai-automation"]) .rv-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){:where(html[data-page="ai-automation"]) .rv-upgraded .rv-hero-grid{grid-template-columns:1fr;gap:30px}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-hero{padding:36px 0 44px}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-hero-copy{max-width:660px}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-hero-art{width:100%;max-width:580px;margin:auto}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-hero h1{font-size:clamp(38px,6vw,54px)!important}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities){padding-block:56px}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-description{max-width:640px}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-capabilities{padding-block:40px}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-section h2{font-size:34px!important}}
@media(max-width:540px){:where(html[data-page="ai-automation"]) .rv-upgraded .rv-container{width:calc(100% - 40px)}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-hero h1{font-size:38px!important;line-height:1.12!important}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-description{font-size:15px}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-eyebrow{font-size:10px;margin-bottom:20px}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-button{font-size:12px;min-height:48px;padding:13px 17px}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-actions{gap:10px}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-hero-art{padding-top:0}:where(html[data-page="ai-automation"]) .rv-capability-grid{grid-template-columns:1fr;gap:24px}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-section h2{font-size:29px!important}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-note{font-size:22px}:where(html[data-page="ai-automation"]) .rv-orbit-core{font-size:19px}:where(html[data-page="ai-automation"]) .rv-orbit-core span{font-size:16px}:where(html[data-page="ai-automation"]) .rv-orbit-node i{font-size:24px}:where(html[data-page="ai-automation"]) .rv-orbit-node strong{font-size:9px}:where(html[data-page="ai-automation"]) .rv-orbit-node{gap:5px}:where(html[data-page="ai-automation"]) .rv-career-panels{min-height:290px;padding:20px 2px;gap:9px}:where(html[data-page="ai-automation"]) .rv-career-panel{height:240px;padding:20px 12px;gap:20px}:where(html[data-page="ai-automation"]) .rv-career-panel strong{font-size:25px}:where(html[data-page="ai-automation"]) .rv-career-panel span{font-size:9px}:where(html[data-page="ai-automation"]) .rv-career-panel i{font-size:36px}:where(html[data-page="ai-automation"]) .rv-roadmap{padding:20px}:where(html[data-page="ai-automation"]) .rv-roadmap-step{gap:14px}:where(html[data-page="ai-automation"]) .rv-roadmap-step .rv-icon{width:48px;height:48px;font-size:26px}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-roadmap-step h3{font-size:19px}:where(html[data-page="ai-automation"]) .rv-devices{min-height:350px;padding-right:30px}:where(html[data-page="ai-automation"]) .rv-browser-content{padding:16px;min-height:280px}:where(html[data-page="ai-automation"]) .rv-browser-content strong{font-size:25px}:where(html[data-page="ai-automation"]) .rv-browser-content p{max-width:160px}:where(html[data-page="ai-automation"]) .rv-mini-phone{width:110px;height:225px;border-width:5px;padding:24px 10px 10px}:where(html[data-page="ai-automation"]) .rv-mini-phone>strong{font-size:17px;margin:22px 0 14px}:where(html[data-page="ai-automation"]) .rv-browser-content .rv-shapes{transform:scale(.7);transform-origin:bottom right}:where(html[data-page="ai-automation"]) .rv-flow{grid-template-columns:1fr 1fr;gap:24px;min-height:300px}:where(html[data-page="ai-automation"]) .rv-flow-input{grid-column:1;grid-row:1}:where(html[data-page="ai-automation"]) .rv-flow-core{grid-column:2;grid-row:1;width:120px;justify-self:center}:where(html[data-page="ai-automation"]) .rv-flow-outputs{grid-column:1/-1;flex-direction:row;gap:8px}:where(html[data-page="ai-automation"]) .rv-flow-outputs>div{flex:1;flex-direction:column;text-align:center;padding:15px 8px;border-radius:16px;font-size:10px}:where(html[data-page="ai-automation"]) .rv-flow::before{top:25%}:where(html[data-page="ai-automation"]) .rv-cloud{padding:24px 20px}:where(html[data-page="ai-automation"]) .rv-cloud-icon{font-size:80px}:where(html[data-page="ai-automation"]) .rv-server-grid{gap:12px}:where(html[data-page="ai-automation"]) .rv-server{padding:6px;height:28px}:where(html[data-page="ai-automation"]) .rv-server-grid strong{font-size:11px}:where(html[data-page="ai-automation"]) .rv-server span{width:13px}:where(html[data-page="ai-automation"]) .rv-app-phones{padding:10px 4px;min-height:350px}:where(html[data-page="ai-automation"]) .rv-app-phone{height:320px;border-width:5px;border-radius:25px;padding:25px 12px 15px;width:49%}:where(html[data-page="ai-automation"]) .rv-app-phone>strong{font-size:23px;margin:26px 0 16px}:where(html[data-page="ai-automation"]) .rv-app-phone small{font-size:8px}:where(html[data-page="ai-automation"]) .rv-app-phone p{font-size:9px}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-app-phone h3{font-size:14px}:where(html[data-page="ai-automation"]) .rv-phone-row{font-size:10px;padding:11px 2px;gap:7px}:where(html[data-page="ai-automation"]) .rv-app-phone .rv-shapes{transform:scale(.6)}:where(html[data-page="ai-automation"]) .rv-app-phone .rv-mock-button{font-size:9px;padding:9px 12px}:where(html[data-page="ai-automation"]) .rv-search{padding:22px}:where(html[data-page="ai-automation"]) .rv-search-field{font-size:11px;padding:12px}:where(html[data-page="ai-automation"]) .rv-search-result strong{font-size:19px}:where(html[data-page="ai-automation"]) .rv-funnel{padding:0 6px}:where(html[data-page="ai-automation"]) .rv-funnel-step{padding:19px 20px;gap:14px}:where(html[data-page="ai-automation"]) .rv-funnel-step>i{font-size:29px}:where(html[data-page="ai-automation"]) .rv-funnel-step strong{font-size:12px}:where(html[data-page="ai-automation"]) .rv-funnel-step p{font-size:10px}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities){padding-block:44px}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="ai-automation"]) .rv-upgraded .rv-button{transition:none}:where(html[data-page="ai-automation"]) .rv-upgraded .rv-button:hover{transform:none}}
@media(max-width:600px){
  :where(html[data-page="ai-automation"]) .rv-upgraded .featured-header-row { flex-wrap:wrap; gap:14px; }
  :where(html[data-page="ai-automation"]) .rv-upgraded #client-stories .container > div:first-child { flex-wrap:wrap; gap:20px; }
  :where(html[data-page="ai-automation"]) .rv-upgraded #client-stories .container > div:first-child > div { min-width:0; max-width:100%; flex-wrap:wrap; }
  :where(html[data-page="ai-automation"]) .rv-upgraded .rv-orbit-6 .rv-orbit-node strong { font-size:8px; }
}
:where(html[data-page="ai-automation"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(h2, h3, .final-cta-headline, .kx-cta-headline, .display-h2) {
  color: #FFFFFF !important;
}
:where(html[data-page="ai-automation"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(h2, h3, .final-cta-headline, .kx-cta-headline) :is(.highlight-gold, .cta-gold-text, em, span.gold, .kx-text-gold) {
  color: #FFC526 !important;
  background: transparent !important;
}
:where(html[data-page="ai-automation"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(p, .kx-cta-sub) {
  color: rgba(255, 255, 255, 0.9) !important;
}


/* micro-interactions.css */
/* Shared feedback layer. Motion acknowledges actions; informational content stays still. */
:root:where([data-page="ai-automation"]){--kx-feedback-ease:cubic-bezier(.2,.75,.25,1);--kx-feedback-duration:180ms}
:where(html[data-page="ai-automation"]) :where(a,button,summary,input,textarea,select):focus-visible{outline:3px solid #187d6b!important;outline-offset:4px}
:where(html[data-page="ai-automation"]) :where(.shared-kx-footer,.ma-dark,.ma-closing) :where(a,button):focus-visible{outline-color:#ffc526!important}
:where(html[data-page="ai-automation"]) :where(button,summary,.kx-mi-action){-webkit-tap-highlight-color:rgba(245,169,22,.18);touch-action:manipulation}
:where(html[data-page="ai-automation"]) .kx-mi-action{transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease),scale 120ms var(--kx-feedback-ease),box-shadow var(--kx-feedback-duration) var(--kx-feedback-ease),background-color var(--kx-feedback-duration) ease,border-color var(--kx-feedback-duration) ease!important}
:where(html[data-page="ai-automation"]) .kx-mi-arrow{display:inline-block;transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease)!important}
:where(html[data-page="ai-automation"]) .kx-mi-card{transition:translate 220ms var(--kx-feedback-ease),box-shadow 220ms var(--kx-feedback-ease),border-color 180ms ease!important}
:where(html[data-page="ai-automation"]) .shared-footer-links a,:where(html[data-page="ai-automation"]) .shared-kx-dropdown-item,:where(html[data-page="ai-automation"]) .shared-kx-mobile-nav-link{ text-decoration-color:transparent;text-underline-offset:5px;transition:color 160ms ease,background-color 160ms ease,text-decoration-color 160ms ease!important}
:where(html[data-page="ai-automation"]) .shared-footer-links a:focus-visible{ text-decoration:underline;text-decoration-color:currentColor }
:where(html[data-page="ai-automation"]) :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea,select){transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease!important}
:where(html[data-page="ai-automation"]) :where(input:not([type=checkbox]):not([type=radio]),textarea,select):focus{border-color:#187d6b!important;box-shadow:0 0 0 3px rgb(24 125 107 / .12)}
:where(html[data-page="ai-automation"]) :where(button[aria-expanded],summary){transition:background-color 160ms ease,color 160ms ease!important}
:where(html[data-page="ai-automation"]) :where(button[aria-expanded],summary):focus-visible{border-radius:8px}
@media(hover:hover) and (pointer:fine){
  :where(html[data-page="ai-automation"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):hover{translate:0 -2px}
  :where(html[data-page="ai-automation"]) .kx-mi-action:hover .kx-mi-arrow,:where(html[data-page="ai-automation"]) .kx-mi-action:focus-visible .kx-mi-arrow{translate:3px 0}
  :where(html[data-page="ai-automation"]) .kx-mi-card:hover,:where(html[data-page="ai-automation"]) .kx-mi-card:focus-within{translate:0 -3px;border-color:#d8ba78;box-shadow:0 10px 24px rgb(16 32 57 / .08)}
  :where(html[data-page="ai-automation"]) .shared-footer-links a:hover{text-decoration:underline;text-decoration-color:currentColor}
}
:where(html[data-page="ai-automation"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):active{translate:0 0;scale:.98;transition-duration:80ms!important}
:where(html[data-page="ai-automation"]) .kx-mi-card:active{translate:0 -1px}
/* Honor this preference for both this layer and pre-existing decorative loops. */
@media(prefers-reduced-motion:reduce){
  html:where([data-page="ai-automation"]){scroll-behavior:auto!important}
  :where(html[data-page="ai-automation"]) *,:where(html[data-page="ai-automation"]) *::before,:where(html[data-page="ai-automation"]) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  :where(html[data-page="ai-automation"]) .kx-mi-action,:where(html[data-page="ai-automation"]) .kx-mi-card,:where(html[data-page="ai-automation"]) .kx-mi-arrow{translate:none!important;scale:none!important;transition:none!important}
  :where(html[data-page="ai-automation"]) .shared-footer-links a,:where(html[data-page="ai-automation"]) .shared-kx-dropdown-item,:where(html[data-page="ai-automation"]) .shared-kx-mobile-nav-link{transition:none!important}
}

/* ai-hero.css */
:where(html[data-page="ai-automation"]) #ai-hero.taste-hero{position:relative;isolation:isolate;overflow:hidden;background:#fafaf6;color:#031333;padding:52px 0 20px;font-family:Outfit,Arial,sans-serif}
:where(html[data-page="ai-automation"]) #ai-hero *{box-sizing:border-box}
:where(html[data-page="ai-automation"]) .taste-landscape{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
:where(html[data-page="ai-automation"]) .taste-inner{width:92%;max-width:1550px;margin:auto}
:where(html[data-page="ai-automation"]) #ai-hero h1{font:800 clamp(32px,3.85vw,65px)/1.04 Outfit,Arial,sans-serif;letter-spacing:-.045em;text-align:center;margin:0 auto 23px;max-width:1400px;color:#031333}
:where(html[data-page="ai-automation"]) #ai-hero h1 span{background:linear-gradient(transparent 68%,#ffe273 68%,#ffe273 94%,transparent 94%);padding:0 .08em}
:where(html[data-page="ai-automation"]) #ai-hero .taste-description{max-width:960px;margin:0 auto 24px;text-align:center;font:400 clamp(17px,1.28vw,21px)/1.45 Outfit,Arial,sans-serif;color:#526f95}
:where(html[data-page="ai-automation"]) .taste-actions{display:flex;justify-content:center;gap:18px}
:where(html[data-page="ai-automation"]) #ai-hero .taste-button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:58px;padding:14px 30px;border-radius:40px;font-size:20px;font-weight:600;text-decoration:none;color:#031333;transition:transform .18s,background .18s,box-shadow .18s}
:where(html[data-page="ai-automation"]) .taste-primary{background:linear-gradient(120deg,#ffda54,#ffce32);box-shadow:0 8px 20px #ffd13b20;border:1px solid #ffd13b}
:where(html[data-page="ai-automation"]) .taste-secondary{background:#ffffffed;border:1px solid #d8e2ef;box-shadow:0 4px 12px #1d375608}
:where(html[data-page="ai-automation"]) #ai-hero .taste-button:hover{transform:translateY(-2px);box-shadow:0 8px 22px #1d375617}
:where(html[data-page="ai-automation"]) .taste-button i{transition:transform .18s}:where(html[data-page="ai-automation"]) .taste-button:hover i{transform:translateX(3px)}
:where(html[data-page="ai-automation"]) #ai-hero a:focus-visible,:where(html[data-page="ai-automation"]) #ai-hero button:focus-visible{outline:3px solid #176cff;outline-offset:5px}
:where(html[data-page="ai-automation"]) .taste-activity{position:relative;z-index:2;display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;min-height:40px;margin:20px auto 0;padding:7px 17px;border:1px solid #d8e2ef;border-radius:28px;background:#ffffffd9;color:#395783;font-size:17px;box-shadow:0 4px 12px #1d375608}
:where(html[data-page="ai-automation"]) .taste-activity b{color:#008f60;font-weight:500}:where(html[data-page="ai-automation"]) .taste-live-dot{width:12px;height:12px;flex:none;border-radius:50%;background:#00c985}:where(html[data-page="ai-automation"]) .taste-activity [data-activity]{display:inline-block;min-width:355px}
:where(html[data-page="ai-automation"]) .taste-workflow{position:relative;display:grid;grid-template-columns:18% 15% 16% 6% 45%;align-items:center;min-height:280px;margin-top:-25px}
:where(html[data-page="ai-automation"]) .taste-inputs{grid-column:1;display:grid;gap:16px}:where(html[data-page="ai-automation"]) .taste-engine{grid-column:3}:where(html[data-page="ai-automation"]) .taste-outputs{grid-column:5;display:flex;justify-content:space-between;align-items:center}
:where(html[data-page="ai-automation"]) .taste-node{position:relative;z-index:1;background:#fff;border:1px solid #d8e2ef;border-radius:20px;box-shadow:0 3px 8px #1d37560a,0 16px 30px #1d37561f;padding:12px;display:flex;gap:12px;align-items:center;min-width:0;transition:transform .28s cubic-bezier(0.16,1,0.3,1),box-shadow .28s ease,border-color .28s ease}
:where(html[data-page="ai-automation"]) .taste-node.is-pulse{transform:scale(1.05) translateY(-2px);box-shadow:0 0 0 3px var(--tone,#176cff),0 12px 28px rgba(29,55,86,.2);border-color:var(--tone,#176cff)!important}
:where(html[data-page="ai-automation"]) .taste-node.input{min-height:84px}:where(html[data-page="ai-automation"]) .taste-node.output{width:26%;min-height:150px;text-align:center;flex-direction:column;gap:8px;padding:16px 7px}
:where(html[data-page="ai-automation"]) #ai-hero .taste-node h3{font:600 clamp(13px,1.04vw,18px)/1.2 Outfit,Arial,sans-serif;margin:0 0 4px;color:#031333}
:where(html[data-page="ai-automation"]) #ai-hero .taste-node p{font:400 clamp(11px,.93vw,15px)/1.3 Outfit,Arial,sans-serif;margin:0;color:#526f95}
:where(html[data-page="ai-automation"]) .taste-icon{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:16px;background:var(--tint);color:var(--tone);font-size:34px;transition:transform .24s cubic-bezier(0.16,1,0.3,1)}
:where(html[data-page="ai-automation"]) .taste-node:hover .taste-icon{transform:scale(1.08)}
:where(html[data-page="ai-automation"]) .blue{--tone:#176cff;--tint:#eaf2ff}:where(html[data-page="ai-automation"]) .pink{--tone:#ff247a;--tint:#fff0f6}:where(html[data-page="ai-automation"]) .green{--tone:#00b980;--tint:#e8fbf4}:where(html[data-page="ai-automation"]) .purple{--tone:#783eff;--tint:#f3edff}:where(html[data-page="ai-automation"]) .gold{--tone:#e7a900;--tint:#fff8df}
:where(html[data-page="ai-automation"]) .taste-engine{position:relative;z-index:1;aspect-ratio:1;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:50%;background:radial-gradient(ellipse at 27% 15%,#496484 0%,#152e50 25%,#071932 65%,#102b49 100%);box-shadow:inset 2px 3px 8px #a4c7ec70,inset -6px -10px 22px #010b2455,0 20px 30px #16395d21;color:#fff;transition:transform .3s cubic-bezier(0.16,1,0.3,1),box-shadow .3s ease}
:where(html[data-page="ai-automation"]) .taste-engine.is-pulse{transform:scale(1.06);box-shadow:inset 2px 3px 8px #a4c7ec70,inset -6px -10px 22px #010b2455,0 0 32px rgba(255,209,59,.45),0 20px 35px #16395d30}
:where(html[data-page="ai-automation"]) .taste-engine:before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.35;background-image:radial-gradient(#c9e0ff 0.6px,transparent .8px);background-size:23px 29px;mask-image:linear-gradient(#000,transparent 80%);pointer-events:none}
:where(html[data-page="ai-automation"]) .taste-brain{position:relative;width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,#294665,#0e2340);display:grid;place-items:center;color:#ffd13b;font-size:43px;margin-bottom:9px;transition:transform .3s ease,color .3s ease}
:where(html[data-page="ai-automation"]) .taste-engine.is-pulse .taste-brain{transform:scale(1.12);color:#ffe677}
:where(html[data-page="ai-automation"]) #ai-hero .taste-engine h2{position:relative;font:600 clamp(17px,1.5vw,25px)/1.2 Outfit,Arial,sans-serif;color:#fff;margin:0 0 9px;white-space:nowrap}
:where(html[data-page="ai-automation"]) .taste-engine-state{position:relative;font-size:clamp(9px,.78vw,13px);letter-spacing:.26em;color:#dce8f9;min-height:18px;transition:color .25s ease}
:where(html[data-page="ai-automation"]) .taste-connectors{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}:where(html[data-page="ai-automation"]) .taste-cable{fill:none;stroke:#acc9ed;stroke-width:6;filter:drop-shadow(0 2px 0 #fff)}:where(html[data-page="ai-automation"]) .taste-port{fill:white;stroke:#ffd13b;stroke-width:3}:where(html[data-page="ai-automation"]) .taste-signal{fill:#ffd13b;stroke:white;stroke-width:2;opacity:0;filter:drop-shadow(0 0 4px #ffd13b)}
:where(html[data-page="ai-automation"]) .taste-metrics,:where(html[data-page="ai-automation"]) .taste-benefits{position:relative;display:grid;background:#fffffff2;border:1px solid #d8e2ef;border-radius:24px;box-shadow:0 12px 26px #1d375617;margin:18px 14px 0;grid-auto-flow:dense}
:where(html[data-page="ai-automation"]) .taste-metrics{grid-template-columns:repeat(4,1fr);padding:20px 10px}:where(html[data-page="ai-automation"]) .taste-metric{display:flex;align-items:center;justify-content:center;gap:18px;transition:transform .22s cubic-bezier(0.16,1,0.3,1)}:where(html[data-page="ai-automation"]) .taste-metric:hover{transform:translateY(-3px)}
:where(html[data-page="ai-automation"]) .taste-metric+.taste-metric{border-left:1px solid #d8e2ef}:where(html[data-page="ai-automation"]) .taste-metric .taste-icon{border-radius:50%;width:70px;height:70px;font-size:38px}:where(html[data-page="ai-automation"]) .taste-metric:hover .taste-icon{transform:scale(1.08) rotate(3deg)}:where(html[data-page="ai-automation"]) .taste-metric strong{display:block;font-size:31px;line-height:1.1;font-weight:700}:where(html[data-page="ai-automation"]) .taste-metric span:not(.taste-icon){font-size:20px;color:#526f95}
:where(html[data-page="ai-automation"]) .taste-benefits{grid-template-columns:repeat(3,1fr);padding:14px 10px;margin-top:12px}:where(html[data-page="ai-automation"]) .taste-benefits>div{display:flex;align-items:center;justify-content:center;gap:25px}:where(html[data-page="ai-automation"]) .taste-benefits>div+div{border-left:1px solid #d8e2ef}:where(html[data-page="ai-automation"]) .taste-benefits i{font-size:32px}:where(html[data-page="ai-automation"]) .taste-benefits strong{display:block;font-size:21px;line-height:1.1}:where(html[data-page="ai-automation"]) .taste-benefits span{font-size:17px;color:#526f95}
:where(html[data-page="ai-automation"]) .taste-motion{display:block;margin:12px 14px 0 auto;border:0;background:transparent;color:#526f95;font:400 12px Outfit,Arial,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:30px;padding:4px 8px}
@media(min-width:1600px){:where(html[data-page="ai-automation"]) .taste-workflow{min-height:290px}:where(html[data-page="ai-automation"]) .taste-description{margin-bottom:26px!important}}
@media(max-width:1100px){:where(html[data-page="ai-automation"]) .taste-inner{width:94%}:where(html[data-page="ai-automation"]) .taste-icon{width:42px;height:42px;font-size:28px}:where(html[data-page="ai-automation"]) .taste-node{gap:7px;padding:9px}:where(html[data-page="ai-automation"]) .taste-brain{width:52px;height:52px;font-size:33px}:where(html[data-page="ai-automation"]) .taste-metric{gap:10px}:where(html[data-page="ai-automation"]) .taste-metric .taste-icon{width:48px;height:48px;font-size:30px}:where(html[data-page="ai-automation"]) .taste-metric strong{font-size:25px}:where(html[data-page="ai-automation"]) .taste-metric span:not(.taste-icon){font-size:15px}:where(html[data-page="ai-automation"]) .taste-workflow{min-height:270px}:where(html[data-page="ai-automation"]) .taste-node.output{width:28%}}
@media(max-width:900px){:where(html[data-page="ai-automation"]) #ai-hero.taste-hero{padding-top:36px}:where(html[data-page="ai-automation"]) .taste-inner{width:calc(100% - 32px)}:where(html[data-page="ai-automation"]) #ai-hero h1{font-size:clamp(25px,5.7vw,43px);letter-spacing:-.04em}:where(html[data-page="ai-automation"]) #ai-hero .taste-description{font-size:16px;max-width:580px}:where(html[data-page="ai-automation"]) .taste-actions{gap:10px}:where(html[data-page="ai-automation"]) #ai-hero .taste-button{font-size:16px;padding:12px 18px;min-height:48px}:where(html[data-page="ai-automation"]) .taste-activity{font-size:13px;border-radius:16px;margin-top:20px}:where(html[data-page="ai-automation"]) .taste-activity [data-activity]{min-width:0}:where(html[data-page="ai-automation"]) .taste-workflow{display:flex;flex-direction:column;gap:48px;margin-top:24px;padding:0 0 5px}:where(html[data-page="ai-automation"]) .taste-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}:where(html[data-page="ai-automation"]) .taste-node.input{flex-direction:column;text-align:center;padding:12px 5px;gap:8px}:where(html[data-page="ai-automation"]) .taste-engine{width:200px;flex:none}:where(html[data-page="ai-automation"]) .taste-outputs{width:min(100%,360px);flex-direction:column;gap:25px}:where(html[data-page="ai-automation"]) .taste-node.output{width:100%;min-height:76px;flex-direction:row;text-align:left;padding:14px 22px;gap:18px}:where(html[data-page="ai-automation"]) #ai-hero .taste-node h3{font-size:14px}:where(html[data-page="ai-automation"]) #ai-hero .taste-node p{font-size:12px}:where(html[data-page="ai-automation"]) #ai-hero .taste-engine h2{font-size:22px}:where(html[data-page="ai-automation"]) .taste-engine-state{font-size:11px}:where(html[data-page="ai-automation"]) .taste-brain{width:60px;height:60px;font-size:38px}:where(html[data-page="ai-automation"]) .taste-metrics{grid-template-columns:repeat(2,1fr);gap:20px 0;margin:22px 0 0;padding:20px 4px}:where(html[data-page="ai-automation"]) .taste-metric{justify-content:flex-start;padding:0 12px}:where(html[data-page="ai-automation"]) .taste-metric:nth-child(3){border-left:0}:where(html[data-page="ai-automation"]) .taste-metric strong{font-size:24px}:where(html[data-page="ai-automation"]) .taste-metric span:not(.taste-icon){font-size:13px}:where(html[data-page="ai-automation"]) .taste-metric .taste-icon{width:40px;height:40px;font-size:27px}:where(html[data-page="ai-automation"]) .taste-benefits{margin:12px 0 0;grid-template-columns:1fr;padding:4px 20px}:where(html[data-page="ai-automation"]) .taste-benefits>div{justify-content:flex-start;padding:13px 20px;gap:25px}:where(html[data-page="ai-automation"]) .taste-benefits>div+div{border-left:0;border-top:1px solid #d8e2ef}:where(html[data-page="ai-automation"]) .taste-benefits strong{font-size:19px}:where(html[data-page="ai-automation"]) .taste-benefits span{font-size:15px}:where(html[data-page="ai-automation"]) .taste-landscape{opacity:.65}}
@media(max-width:420px){:where(html[data-page="ai-automation"]) .taste-actions{flex-direction:column;align-items:stretch}:where(html[data-page="ai-automation"]) .taste-metric{padding:0 7px;gap:7px}:where(html[data-page="ai-automation"]) .taste-inputs{gap:7px}:where(html[data-page="ai-automation"]) #ai-hero .taste-node.input h3{font-size:12px}:where(html[data-page="ai-automation"]) #ai-hero .taste-node.input p{font-size:11px}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="ai-automation"]) #ai-hero *,:where(html[data-page="ai-automation"]) #ai-hero *:before{animation:none!important;transition:none!important}:where(html[data-page="ai-automation"]) .taste-motion{display:none}}


/* ai-sections.css */
:where(html[data-page="ai-automation"]) .taste-section{font-family:Outfit,Arial,sans-serif;color:#031333;background:#fafaf6;padding:100px 0;overflow:hidden;position:relative}
:where(html[data-page="ai-automation"]) .taste-section .ai-container{width:92%;max-width:1440px;margin:auto;padding:0}
:where(html[data-page="ai-automation"]) .taste-section h2{font-family:Outfit,Arial,sans-serif;font-size:clamp(34px,4.1vw,64px);font-weight:750;line-height:1.05;letter-spacing:-.045em;color:#031333;margin:0}
:where(html[data-page="ai-automation"]) .taste-section p{font-family:Outfit,Arial,sans-serif;color:#61748e}
:where(html[data-page="ai-automation"]) .taste-section .ai-eyebrow-wrap,:where(html[data-page="ai-automation"]) .taste-section [class*="ai-annot"],:where(html[data-page="ai-automation"]) .taste-section .ai-step-badge,:where(html[data-page="ai-automation"]) .taste-section .ai-cta-tag{display:none}
:where(html[data-page="ai-automation"]) .taste-section .ai-highlight{background:linear-gradient(transparent 65%,#ffdb58 65%);border-radius:0;color:inherit;padding:0 3px}
:where(html[data-page="ai-automation"]) .taste-section .ai-highlight:after{display:none}
:where(html[data-page="ai-automation"]) .taste-section .ai-why-left-content,:where(html[data-page="ai-automation"]) .taste-section .ai-integ-header-text{max-width:none;width:100%}
:where(html[data-page="ai-automation"]) .taste-section .ai-why-headline,:where(html[data-page="ai-automation"]) .taste-section .ai-integ-title{max-width:none}
:where(html[data-page="ai-automation"]) .taste-section .ai-process-step-card{min-width:0}
:where(html[data-page="ai-automation"]) .taste-section .ai-integ-tool-col:after{display:none}
:where(html[data-page="ai-automation"]) .taste-section .ai-btn-yellow{font-family:Outfit,Arial,sans-serif;background:#ffd13b;color:#031333;border-radius:32px;padding:16px 24px;font-size:17px;min-height:52px;box-shadow:none;white-space:nowrap;transition:transform .2s cubic-bezier(0.16,1,0.3,1),background-color .2s ease,box-shadow .2s ease}
:where(html[data-page="ai-automation"]) .taste-section .ai-btn-yellow:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,209,59,.35)}
:where(html[data-page="ai-automation"]) .taste-section a:focus-visible,:where(html[data-page="ai-automation"]) .taste-section button:focus-visible{outline:3px solid #176cff;outline-offset:5px}
:where(html[data-page="ai-automation"]) .ai-trust-strip-section.taste-section{padding:42px 0;background:#fff;border-bottom:1px solid #e4e9ee}
:where(html[data-page="ai-automation"]) .taste-section .ai-trust-strip{padding:0;border:0;background:none;box-shadow:none;border-radius:0;gap:35px}
:where(html[data-page="ai-automation"]) .taste-section .ai-trust-label{font:500 13px/1.5 Outfit,Arial,sans-serif;letter-spacing:.08em;color:#61748e}
:where(html[data-page="ai-automation"]) .taste-section .ai-trust-logos{justify-content:space-between;flex:1;gap:30px;flex-wrap:wrap}
:where(html[data-page="ai-automation"]) .taste-section .ai-trust-logo-item{opacity:1;filter:none;transition:transform .22s cubic-bezier(0.16,1,0.3,1),filter .22s ease}
:where(html[data-page="ai-automation"]) .taste-section .ai-trust-logo-item:hover{transform:translateY(-4px);filter:drop-shadow(0 4px 12px rgba(16,39,71,.12))}
:where(html[data-page="ai-automation"]) .taste-problem-layout{display:grid;grid-template-columns:35% 1fr;gap:6%;align-items:center}
:where(html[data-page="ai-automation"]) .taste-problem-photo{height:550px;border-radius:22px;overflow:hidden;background:#e4e9ee}
:where(html[data-page="ai-automation"]) .taste-problem-photo img{width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:grayscale(1);display:block;transition:transform .6s cubic-bezier(0.16,1,0.3,1),filter .6s ease}
:where(html[data-page="ai-automation"]) .taste-problem-photo:hover img{transform:scale(1.04);filter:grayscale(0.3)}
:where(html[data-page="ai-automation"]) .taste-problem-copy h2{font-size:clamp(32px,3.6vw,55px)}:where(html[data-page="ai-automation"]) .taste-problem-copy h2 span{color:#c68b00}
:where(html[data-page="ai-automation"]) .taste-problem-copy>p{font-size:21px;line-height:1.55;margin:26px 0 38px;max-width:760px}
:where(html[data-page="ai-automation"]) .taste-comparison{display:grid;grid-template-columns:1fr 40px 1fr;gap:20px;align-items:center;transition:all .3s ease}
:where(html[data-page="ai-automation"]) .taste-comparison h3{font:500 18px Outfit,Arial,sans-serif;color:#526f95;margin:0 0 12px}
:where(html[data-page="ai-automation"]) .taste-comparison strong{font:700 clamp(26px,2.7vw,43px)/1.15 Outfit,Arial,sans-serif;white-space:nowrap;letter-spacing:-.04em;transition:color .3s ease,text-shadow .3s ease}
:where(html[data-page="ai-automation"]) .taste-comparison>div:last-child strong{color:#b88000}
:where(html[data-page="ai-automation"]) .taste-comparison.is-active>div:last-child strong{color:#008f60;text-shadow:0 0 16px rgba(0,201,133,.22)}
:where(html[data-page="ai-automation"]) .taste-comparison p{font-size:17px;line-height:1.5;margin:14px 0 0}
:where(html[data-page="ai-automation"]) .taste-comparison>i{font-size:35px;color:#8b98aa;display:inline-block;transition:transform .3s cubic-bezier(0.16,1,0.3,1),color .3s ease}
:where(html[data-page="ai-automation"]) .taste-comparison.is-active>i{transform:translateX(5px);color:#00c985}
:where(html[data-page="ai-automation"]) .ai-why-section.taste-section{background:#fff;padding-top:80px}
:where(html[data-page="ai-automation"]) .taste-section .ai-why-grid{display:block}:where(html[data-page="ai-automation"]) .taste-section .ai-why-left-content{display:grid;grid-template-columns:1.25fr 1fr auto;gap:35px;align-items:center;margin-bottom:42px}
:where(html[data-page="ai-automation"]) .taste-section .ai-why-headline{font-size:clamp(32px,3.4vw,52px);margin:0}:where(html[data-page="ai-automation"]) .taste-section .ai-why-desc{font-size:19px;line-height:1.55;margin:0}:where(html[data-page="ai-automation"]) .taste-section .ai-why-cta-btn{margin:0}
:where(html[data-page="ai-automation"]) .taste-section .ai-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;gap:0;border:1px solid #e1e7ee;border-radius:24px;overflow:hidden;background:#fafcfe}
:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card{display:grid;grid-template-columns:66px 1fr;column-gap:24px;align-content:center;padding:36px;border:0;border-radius:0;box-shadow:none;background:transparent;min-height:150px;transform:none;transition:transform .28s cubic-bezier(0.16,1,0.3,1),box-shadow .28s ease,background .28s ease}
:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(19,36,61,.08);z-index:2;background:#fff}
:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card:nth-child(odd){border-right:1px solid #e1e7ee}:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card:nth-child(n+3){border-top:1px solid #e1e7ee}
:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card:nth-child(-n+2){background:radial-gradient(ellipse at 90% 140%,#284869,transparent 65%),#0b1e36;min-height:190px}
:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card:nth-child(-n+2):hover{background:radial-gradient(ellipse at 90% 140%,#34587f,transparent 65%),#0f2746}
:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card:nth-child(-n+2) h3{color:#fff}:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card:nth-child(-n+2) p{color:#c2cfdf}
:where(html[data-page="ai-automation"]) .taste-section .ai-feature-icon-box{grid-row:span 2;width:66px;height:66px;border-radius:20px;margin:0;align-self:center;transition:transform .25s cubic-bezier(0.16,1,0.3,1)}
:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card:hover .ai-feature-icon-box{transform:scale(1.1) rotate(4deg)}
:where(html[data-page="ai-automation"]) .taste-section .ai-feature-icon-box svg{width:30px;height:30px}
:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card-title{font:650 25px/1.2 Outfit,Arial,sans-serif;margin:0 0 9px}:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card-desc{font-size:18px;line-height:1.4;margin:0}
:where(html[data-page="ai-automation"]) .taste-section .ai-results-wrapper{display:block}:where(html[data-page="ai-automation"]) .taste-section .ai-results-title{margin:0 0 42px;max-width:none}:where(html[data-page="ai-automation"]) .taste-section .ai-results-cards-grid{display:grid;grid-template-columns:1.65fr 1fr;grid-template-rows:repeat(2,240px);gap:22px;grid-auto-flow:dense}
:where(html[data-page="ai-automation"]) .taste-section .ai-result-card{padding:30px;border:1px solid #e1e7ee;border-radius:22px;box-shadow:none;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;background-size:cover;background-position:center;transform:none;position:relative;isolation:isolate;transition:transform .32s cubic-bezier(0.16,1,0.3,1),box-shadow .32s ease}
:where(html[data-page="ai-automation"]) .taste-section .ai-result-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(19,36,61,.12)}
:where(html[data-page="ai-automation"]) .taste-section .ai-result-card:first-child{grid-row:span 2;justify-content:center;background-image:linear-gradient(90deg,#faf9f5 8%,#faf9f5ee 36%,#faf9f500 100%),url('assets/images/industry-ecommerce.jpg')}
:where(html[data-page="ai-automation"]) .taste-section .ai-result-card:nth-child(2){background-image:linear-gradient(90deg,#faf9f5 8%,#faf9f5ec 55%,#faf9f560),url('assets/images/industry-meeting.jpg')}:where(html[data-page="ai-automation"]) .taste-section .ai-result-card:nth-child(3){background-image:linear-gradient(90deg,#edf5fc 8%,#edf5fcee 50%,#edf5fc40),url('assets/images/industry-healthcare.jpg')}
:where(html[data-page="ai-automation"]) .taste-section .ai-result-icon-box,:where(html[data-page="ai-automation"]) .taste-section .ai-result-card-wave{display:none}:where(html[data-page="ai-automation"]) .taste-section .ai-result-header{margin:0 0 10px}:where(html[data-page="ai-automation"]) .taste-section .ai-result-industry{font:600 22px Outfit,Arial,sans-serif;color:#102747}:where(html[data-page="ai-automation"]) .taste-section .ai-result-metric{font:750 55px/1 Outfit,Arial,sans-serif;letter-spacing:-.045em;color:#102747;margin:0 0 8px}:where(html[data-page="ai-automation"]) .taste-section .ai-result-card:first-child .ai-result-metric{font-size:clamp(85px,10vw,155px)}:where(html[data-page="ai-automation"]) .taste-section .ai-result-outcome{font-size:20px;margin:0 0 20px}:where(html[data-page="ai-automation"]) .taste-section .ai-result-link{display:inline-flex;align-items:center;gap:12px;background:#ffd13b;color:#031333;border-radius:30px;padding:11px 17px;font:600 14px Outfit,Arial,sans-serif;margin-top:auto;transition:background-color .2s ease,transform .2s cubic-bezier(0.16,1,0.3,1)}:where(html[data-page="ai-automation"]) .taste-section .ai-result-card:first-child .ai-result-link{margin-top:20px}:where(html[data-page="ai-automation"]) .taste-section .ai-result-link:hover{background:#ffe373;transform:translateY(-2px)}
:where(html[data-page="ai-automation"]) .taste-section .ai-result-link svg{transition:transform .2s cubic-bezier(0.16,1,0.3,1)}
:where(html[data-page="ai-automation"]) .taste-section .ai-result-link:hover svg{transform:translateX(4px)}
:where(html[data-page="ai-automation"]) .ai-process-section.taste-section{background:#fff}:where(html[data-page="ai-automation"]) .taste-section .ai-process-header{text-align:left;margin-bottom:70px}:where(html[data-page="ai-automation"]) .taste-section .ai-process-title{margin:0}:where(html[data-page="ai-automation"]) .taste-section .ai-process-desktop-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative;align-items:start}:where(html[data-page="ai-automation"]) .taste-section .ai-process-desktop-flow:before{content:"";position:absolute;left:10%;right:10%;height:2px;top:42px;background:#ffd13b;transition:width .8s cubic-bezier(0.16,1,0.3,1)}:where(html[data-page="ai-automation"]) .taste-section .ai-process-flow-connector{display:none}
:where(html[data-page="ai-automation"]) .taste-section .ai-process-step-card{padding:0 18px;background:none;border:0;border-radius:0;box-shadow:none;text-align:center;transform:none;position:relative;transition:transform .25s cubic-bezier(0.16,1,0.3,1)}
:where(html[data-page="ai-automation"]) .taste-section .ai-process-step-card:hover{transform:translateY(-4px)}
:where(html[data-page="ai-automation"]) .taste-section .ai-step-card-top{display:flex;justify-content:center;margin:0 0 22px}
:where(html[data-page="ai-automation"]) .taste-section .ai-step-icon-box{width:84px;height:84px;border-radius:50%;background:#fffdf7!important;color:#102747!important;border:1px solid #f5e9c9;box-shadow:0 5px 16px #a77d0010;transition:transform .3s cubic-bezier(0.16,1,0.3,1),box-shadow .3s ease,border-color .3s ease}
:where(html[data-page="ai-automation"]) .taste-section .ai-process-step-card:hover .ai-step-icon-box,:where(html[data-page="ai-automation"]) 
.taste-section .ai-process-step-card.is-active .ai-step-icon-box{transform:scale(1.08);box-shadow:0 8px 24px rgba(255,209,59,.35);border-color:#ffd13b}
:where(html[data-page="ai-automation"]) .taste-section .ai-step-icon-box svg{width:32px;height:32px}:where(html[data-page="ai-automation"]) .taste-section .ai-step-title{font:650 23px/1.2 Outfit,Arial,sans-serif;margin:0 0 14px}:where(html[data-page="ai-automation"]) .taste-section .ai-step-desc{font-size:18px;line-height:1.5;margin:0}
:where(html[data-page="ai-automation"]) .ai-integ-section.taste-section{background:radial-gradient(ellipse at 0 80%,#ffdf6435,transparent 40%),#fafaf6}:where(html[data-page="ai-automation"]) .taste-section .ai-integ-top-row{display:block;text-align:center;margin:0 0 48px}:where(html[data-page="ai-automation"]) .taste-section .ai-integ-title{margin:0}:where(html[data-page="ai-automation"]) .taste-integ-subtitle{font-size:23px;margin:20px 0 0}:where(html[data-page="ai-automation"]) .taste-section .ai-integ-strip-container{max-width:1050px;margin:auto;background:transparent;border:0;box-shadow:none;padding:0;overflow:visible}:where(html[data-page="ai-automation"]) .taste-section .ai-integ-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:0}:where(html[data-page="ai-automation"]) .taste-section .ai-integ-tool-col{min-width:0;padding:28px 12px;border-right:1px solid #dfe5ec;gap:15px;border-radius:0;background:transparent;transform:none;transition:transform .24s cubic-bezier(0.16,1,0.3,1),background-color .24s ease}
:where(html[data-page="ai-automation"]) .taste-section .ai-integ-tool-col:hover{transform:translateY(-4px);background:#ffffffa0}
:where(html[data-page="ai-automation"]) .taste-section .ai-integ-tool-col:nth-child(4n){border-right:0}:where(html[data-page="ai-automation"]) .taste-section .ai-integ-tool-col:nth-child(n+5){border-top:1px solid #dfe5ec}:where(html[data-page="ai-automation"]) .taste-section .ai-integ-tool-icon{width:66px;height:66px;border-radius:20px;transition:transform .25s cubic-bezier(0.16,1,0.3,1)}
:where(html[data-page="ai-automation"]) .taste-section .ai-integ-tool-col:hover .ai-integ-tool-icon{transform:scale(1.12)}
:where(html[data-page="ai-automation"]) .taste-section .ai-integ-tool-icon svg{width:36px;height:36px}:where(html[data-page="ai-automation"]) .taste-section .ai-integ-tool-name{font:500 18px Outfit,Arial,sans-serif;white-space:normal;text-align:center}
:where(html[data-page="ai-automation"]) .ai-bottom-section.taste-section{background:#fff}:where(html[data-page="ai-automation"]) .taste-section .ai-bottom-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px 80px;align-items:start}:where(html[data-page="ai-automation"]) .taste-section .ai-testi-box{padding:0;background:none;border:0;box-shadow:none;border-radius:0;min-height:0}:where(html[data-page="ai-automation"]) .taste-section .ai-testi-quote-icon{font:100px/.7 Georgia,serif;color:#c28b00;margin-bottom:22px}
:where(html[data-page="ai-automation"]) .taste-section .ai-testi-quote{font:400 clamp(25px,2.2vw,34px)/1.45 Outfit,Arial,sans-serif;color:#102747;margin:0 0 35px;min-height:200px;transition:opacity .25s ease,transform .25s ease}
:where(html[data-page="ai-automation"]) .taste-section .ai-testi-bottom-wrap{margin:0}:where(html[data-page="ai-automation"]) .taste-section .ai-testi-avatar{width:56px;height:56px}:where(html[data-page="ai-automation"]) .taste-section .ai-testi-name{font:600 19px Outfit,Arial,sans-serif}:where(html[data-page="ai-automation"]) .taste-section .ai-testi-role{font:400 16px Outfit,Arial,sans-serif}:where(html[data-page="ai-automation"]) .taste-section .ai-testi-rating-bar{margin-top:30px}:where(html[data-page="ai-automation"]) .taste-section .ai-testi-btn{width:46px;height:46px;border-radius:50%;border:1px solid #d8e2ef;background:white;color:#102747;transition:transform .18s cubic-bezier(0.16,1,0.3,1),background-color .18s ease}
:where(html[data-page="ai-automation"]) .taste-section .ai-testi-btn:hover{background:#ffd13b;transform:scale(1.08)}
:where(html[data-page="ai-automation"]) .taste-section .taste-faq-title{font-size:43px;margin:0 0 24px}:where(html[data-page="ai-automation"]) .taste-section .ai-faq-item{border:0;border-bottom:1px solid #d8e2ef;border-radius:0;background:none;margin:0}
:where(html[data-page="ai-automation"]) .taste-section .ai-faq-btn{font:500 19px/1.4 Outfit,Arial,sans-serif;color:#102747;padding:22px 0;gap:20px;cursor:pointer}
:where(html[data-page="ai-automation"]) .taste-section .ai-faq-btn .ai-faq-icon{display:inline-block;transition:transform .28s cubic-bezier(0.16,1,0.3,1);font-size:24px;line-height:1}
:where(html[data-page="ai-automation"]) .taste-section .ai-faq-item.is-open .ai-faq-icon{transform:rotate(45deg);color:#e7a900}
:where(html[data-page="ai-automation"]) .taste-section .ai-faq-body{font:400 16px/1.65 Outfit,Arial,sans-serif;color:#61748e;transition:max-height .35s cubic-bezier(0.16,1,0.3,1),opacity .3s ease,padding .35s ease}
:where(html[data-page="ai-automation"]) .taste-section .ai-faq-item.is-open .ai-faq-body{padding:0 30px 24px 0;max-height:450px}
:where(html[data-page="ai-automation"]) .taste-section .ai-faq-icon{flex:none}
:where(html[data-page="ai-automation"]) .taste-section .ai-cta-col{grid-column:1/-1}
:where(html[data-page="ai-automation"]) .taste-section .ai-cta-card{position:relative;overflow:hidden;min-height:0;padding:55px 60px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:50px;background:#ffd13b;color:#031333;border-radius:24px;box-shadow:none}
:where(html[data-page="ai-automation"]) .taste-section .ai-cta-card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(60deg,transparent 40%,rgba(255,255,255,.24) 50%,transparent 60%);transform:rotate(25deg) translateY(-120%);animation:page-ai-automation-ctaShimmer 7s infinite ease-in-out;pointer-events:none}
@keyframes page-ai-automation-ctaShimmer{0%,80%{transform:rotate(25deg) translateY(-120%)}100%{transform:rotate(25deg) translateY(120%)}}
:where(html[data-page="ai-automation"]) .taste-section .ai-cta-card-bg-pattern{display:none}
:where(html[data-page="ai-automation"]) .taste-section .ai-cta-headline{font:750 clamp(32px,3.6vw,52px)/1.05 Outfit,Arial,sans-serif;letter-spacing:-.04em;margin:0 0 18px;color:#031333}:where(html[data-page="ai-automation"]) .taste-section .ai-cta-headline span{color:inherit}:where(html[data-page="ai-automation"]) .taste-section .ai-cta-desc{font-size:19px;line-height:1.5;color:#3a4b57;max-width:590px;margin:0}
:where(html[data-page="ai-automation"]) .taste-section .ai-cta-card .ai-btn-yellow{width:auto!important;flex:none;background:#031333;color:white;transition:transform .22s cubic-bezier(0.16,1,0.3,1),box-shadow .22s ease}
:where(html[data-page="ai-automation"]) .taste-section .ai-cta-card .ai-btn-yellow:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 10px 25px rgba(3,19,51,.35)}
@media(max-width:1100px){:where(html[data-page="ai-automation"]) .taste-section{padding:75px 0}:where(html[data-page="ai-automation"]) .taste-section .ai-why-left-content{grid-template-columns:1.2fr 1fr}:where(html[data-page="ai-automation"]) .taste-section .ai-why-cta-btn{justify-self:start}:where(html[data-page="ai-automation"]) .taste-problem-layout{grid-template-columns:32% 1fr;gap:5%}:where(html[data-page="ai-automation"]) .taste-comparison{gap:10px;grid-template-columns:1fr 25px 1fr}:where(html[data-page="ai-automation"]) .taste-comparison strong{font-size:29px}:where(html[data-page="ai-automation"]) .taste-section .ai-bottom-grid{gap:45px}:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card{padding:25px;column-gap:18px}:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card-title{font-size:22px}:where(html[data-page="ai-automation"]) .taste-section .ai-cta-card{padding:38px}:where(html[data-page="ai-automation"]) .taste-section .ai-step-title{font-size:20px}:where(html[data-page="ai-automation"]) .taste-section .ai-step-desc{font-size:16px}}
@media(max-width:760px){:where(html[data-page="ai-automation"]) .taste-section{padding:55px 0}:where(html[data-page="ai-automation"]) .taste-section .ai-container{width:calc(100% - 36px)}:where(html[data-page="ai-automation"]) .taste-section h2{font-size:36px}:where(html[data-page="ai-automation"]) .taste-section .ai-trust-strip{display:block}:where(html[data-page="ai-automation"]) .taste-section .ai-trust-label{text-align:center;margin-bottom:26px}:where(html[data-page="ai-automation"]) .taste-section .ai-trust-divider{display:none}:where(html[data-page="ai-automation"]) .taste-section .ai-trust-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}:where(html[data-page="ai-automation"]) .taste-section .ai-trust-logo-item{justify-content:center}:where(html[data-page="ai-automation"]) .taste-problem-layout{grid-template-columns:1fr;gap:30px}:where(html[data-page="ai-automation"]) .taste-problem-photo{height:360px}:where(html[data-page="ai-automation"]) .taste-problem-photo img{object-position:center 30%}:where(html[data-page="ai-automation"]) .taste-problem-copy h2{font-size:34px}:where(html[data-page="ai-automation"]) .taste-problem-copy>p{font-size:18px;margin:22px 0 30px}:where(html[data-page="ai-automation"]) .taste-comparison{grid-template-columns:1fr 20px 1fr;gap:8px}:where(html[data-page="ai-automation"]) .taste-comparison strong{font-size:25px}:where(html[data-page="ai-automation"]) .taste-comparison h3{font-size:14px}:where(html[data-page="ai-automation"]) .taste-comparison p{font-size:14px}:where(html[data-page="ai-automation"]) .taste-comparison>i{font-size:23px}:where(html[data-page="ai-automation"]) .taste-section .ai-why-left-content{display:block}:where(html[data-page="ai-automation"]) .taste-section .ai-why-desc{margin:22px 0;font-size:18px}:where(html[data-page="ai-automation"]) .taste-section .ai-feature-grid{grid-template-columns:1fr}:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card:nth-child(odd){border-right:0}:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card{min-height:135px;padding:26px 20px;grid-template-columns:50px 1fr}:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card:nth-child(-n+2){min-height:140px}:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card:nth-child(2){border-top:1px solid #34465c}:where(html[data-page="ai-automation"]) .taste-section .ai-feature-icon-box{width:50px;height:50px;border-radius:15px}:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card-title{font-size:22px}:where(html[data-page="ai-automation"]) .taste-section .ai-feature-card-desc{font-size:16px}:where(html[data-page="ai-automation"]) .taste-section .ai-results-cards-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:18px}:where(html[data-page="ai-automation"]) .taste-section .ai-result-card:first-child{grid-row:auto;min-height:400px}:where(html[data-page="ai-automation"]) .taste-section .ai-result-card{min-height:240px;padding:26px}:where(html[data-page="ai-automation"]) .taste-section .ai-result-card:first-child .ai-result-metric{font-size:110px}:where(html[data-page="ai-automation"]) .taste-section .ai-process-header{margin-bottom:38px}:where(html[data-page="ai-automation"]) .taste-section .ai-process-desktop-flow{grid-template-columns:1fr;gap:28px}:where(html[data-page="ai-automation"]) .taste-section .ai-process-desktop-flow:before{left:34px;top:20px;bottom:40px;height:auto;width:2px;right:auto}:where(html[data-page="ai-automation"]) .taste-section .ai-process-step-card{display:grid;grid-template-columns:70px 1fr;column-gap:22px;text-align:left;padding:0;min-height:90px}:where(html[data-page="ai-automation"]) .taste-section .ai-step-card-top{grid-row:span 2;margin:0;align-self:start}:where(html[data-page="ai-automation"]) .taste-section .ai-step-icon-box{width:70px;height:70px}:where(html[data-page="ai-automation"]) .taste-section .ai-step-title{align-self:end;margin:0 0 7px;font-size:22px}:where(html[data-page="ai-automation"]) .taste-section .ai-step-desc{font-size:17px}:where(html[data-page="ai-automation"]) .taste-section .ai-integ-strip{grid-template-columns:repeat(2,minmax(0,1fr))}:where(html[data-page="ai-automation"]) .taste-section .ai-integ-tool-col:nth-child(2n){border-right:0}:where(html[data-page="ai-automation"]) .taste-section .ai-integ-tool-col:nth-child(n+3){border-top:1px solid #dfe5ec}:where(html[data-page="ai-automation"]) .taste-section .ai-integ-tool-name{font-size:16px}:where(html[data-page="ai-automation"]) .taste-integ-subtitle{font-size:19px}:where(html[data-page="ai-automation"]) .taste-section .ai-bottom-grid{grid-template-columns:1fr;gap:55px}:where(html[data-page="ai-automation"]) .taste-section .ai-testi-quote{font-size:27px;min-height:0}:where(html[data-page="ai-automation"]) .taste-section .taste-faq-title{font-size:36px}:where(html[data-page="ai-automation"]) .taste-section .ai-cta-card{flex-direction:column;align-items:flex-start;gap:28px;padding:32px 24px}:where(html[data-page="ai-automation"]) .taste-section .ai-cta-card .ai-btn-yellow{white-space:normal}:where(html[data-page="ai-automation"]) .taste-section .ai-cta-desc{font-size:17px}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="ai-automation"]) .taste-section *{transition:none!important;animation:none!important}}

/* Match the footer's 1240px outer container and shared page gutters. */
@scope (:where(html[data-page="ai-automation"]) .shared-kx-header) {
  .shared-kx-container{max-width:1240px;padding-inline:clamp(16px,4vw,24px)}
}
:where(html[data-page="ai-automation"]) #ai-hero .taste-inner,:where(html[data-page="ai-automation"]) .taste-section .ai-container{
  width:calc(100% - clamp(32px,8vw,48px));
  max-width:1192px;
  margin-inline:auto;
  padding-inline:0;
}
:where(html[data-page="ai-automation"]) #ai-hero .taste-metrics,:where(html[data-page="ai-automation"]) #ai-hero .taste-benefits{margin-left:0;margin-right:0}
@media(min-width:901px){
  :where(html[data-page="ai-automation"]) #ai-hero h1{font-size:clamp(32px,3.5vw,54px)}
  :where(html[data-page="ai-automation"]) #ai-hero .taste-node.input .taste-icon{width:42px;height:42px;font-size:28px}
  :where(html[data-page="ai-automation"]) #ai-hero .taste-node{gap:9px}
  :where(html[data-page="ai-automation"]) #ai-hero .taste-node h3{font-size:15px}
  :where(html[data-page="ai-automation"]) #ai-hero .taste-node p{font-size:13px}
  :where(html[data-page="ai-automation"]) #ai-hero .taste-engine h2{font-size:20px}
  :where(html[data-page="ai-automation"]) #ai-hero .taste-engine-state{font-size:10px}
  :where(html[data-page="ai-automation"]) #ai-hero .taste-metric{gap:12px}
  :where(html[data-page="ai-automation"]) #ai-hero .taste-metric .taste-icon{width:55px;height:55px;font-size:32px}
  :where(html[data-page="ai-automation"]) #ai-hero .taste-metric span:not(.taste-icon){font-size:17px}
}

/* page-container-rhythm.css */
/* Shared page rhythm: mirrors the Industries page container at every breakpoint. */
:root:where([data-page="ai-automation"]) {
  --kx-page-container: 1240px;
  --kx-page-gutter: 24px;
}

:where(html[data-page="ai-automation"]) .shared-kx-header > .shared-kx-container,:where(html[data-page="ai-automation"]) 
.ux-page .shared-kx-container,:where(html[data-page="ai-automation"]) 
main > section > :is(
  .container,
  .su-container,
  .impact-container,
  .origin-desktop-view,
  .phil-container,
  .journey-tl-container,
  .careersHero-container,
  .chFeels-container,
  .contact-hero-v2-container,
  .contact-container,
  .taste-inner,
  .ai-container,
  .rv-container,
  .wd-container,
  .wd-tech-container,
  .wd-testi-faq-container,
  .kx-ah-container,
  .ma-container,
  .kats-container,
  .cloud-hero-container,
  .kx-container
),:where(html[data-page="ai-automation"]) 
body > section > :is(
  .container,
  .contact-container,
  .cloud-hero-container,
  .kx-container
) {
  width: 100% !important;
  max-width: var(--kx-page-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--kx-page-gutter) !important;
  padding-right: var(--kx-page-gutter) !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  :root:where([data-page="ai-automation"]) { --kx-page-gutter: 16px; }
}

/* This section previously put its gutter on the full-width background itself. */
@media (max-width: 1023px) {
  :where(html[data-page="ai-automation"]) .wd-tech-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}



/* PAGE cloud-solutions */
/* cloud-solutions.html embedded 1 */

    /* ==========================================================================
       KAXON TECHNOLOGIES - CLOUD & DEVOPS DESIGN SYSTEM
       High-Conversion Cloud Infrastructure Service Page
       ========================================================================== */
    :root:where([data-page="cloud-solutions"]) {
      /* Brand Color Palette */
      --page-bg: #F8F4EC;
      --cream: #FFFDF8;
      --white: #FFFFFF;
      --navy-primary: #0B2B57;
      --navy-dark: #072548;
      --deep-panel-blue: #082B56;
      --deep-panel-gradient: linear-gradient(135deg, #082B56 0%, #053D78 100%);
      
      --blue: #2F8BFF;
      --blue-soft: #EAF3FF;
      --electric-blue: #55A9FF;
      
      --gold: #F7B61B;
      --gold-hover: #FFC735;
      --gold-soft: #FFF8E6;
      
      --mint: #1FC89B;
      --mint-soft: #E6F8F2;
      
      --pink: #FF5D91;
      --pink-soft: #FFE9F0;
      
      --purple: #8B63FF;
      --purple-soft: #F0EBFF;
      
      --orange: #F49B23;
      --orange-soft: #FFF2E2;

      --text-main: #0B2B57;
      --text-secondary: #52677F;
      --text-muted: #7E92A8;
      --border: rgba(11, 43, 87, 0.08);
      --border-dark: rgba(255, 255, 255, 0.12);

      /* Typography */
      --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-hand: 'Caveat', cursive;

      /* Radii */
      --r-sm: 8px;
      --r-md: 16px;
      --r-lg: 24px;
      --r-xl: 28px;
      --r-pill: 9999px;

      /* Shadows */
      --shadow-sm: 0 4px 12px rgba(11, 43, 87, 0.04);
      --shadow-card: 0 10px 30px rgba(11, 43, 87, 0.05);
      --shadow-hover: 0 18px 38px rgba(11, 43, 87, 0.09);
      --shadow-floating: 0 14px 34px rgba(11, 43, 87, 0.12);
      --shadow-gold: 0 10px 24px rgba(247, 182, 27, 0.32);
      --shadow-panel: 0 20px 46px rgba(7, 37, 72, 0.22);

      /* Layout */
      --container-max: 1280px;
      --header-height: 76px;
      --transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    }

    :where(html[data-page="cloud-solutions"]) *,:where(html[data-page="cloud-solutions"])  *::before,:where(html[data-page="cloud-solutions"])  *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html:where([data-page="cloud-solutions"]) {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    :where(html[data-page="cloud-solutions"]) body {
      font-family: var(--font-main);
      background-color: var(--page-bg);
      color: var(--text-main);
      line-height: 1.6;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    :where(html[data-page="cloud-solutions"]) img,:where(html[data-page="cloud-solutions"])  svg {
      max-width: 100%;
      height: auto;
      display: block;
    }

    :where(html[data-page="cloud-solutions"]) a {
      text-decoration: none;
      color: inherit;
      transition: var(--transition);
    }

    :where(html[data-page="cloud-solutions"]) button {
      font-family: inherit;
      border: none;
      background: none;
      cursor: pointer;
    }

    :where(html[data-page="cloud-solutions"]) .container {
      width: 100%;
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ==========================================================================
       TYPOGRAPHY & ACCENTS
       ========================================================================== */
    :where(html[data-page="cloud-solutions"]) .eyebrow-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--blue);
      background: var(--blue-soft);
      padding: 6px 14px;
      border-radius: var(--r-pill);
      margin-bottom: 16px;
    }

    :where(html[data-page="cloud-solutions"]) .highlight-blue {
      color: var(--blue);
      position: relative;
      display: inline-block;
    }

    :where(html[data-page="cloud-solutions"]) .highlight-gold {
      color: var(--gold);
      position: relative;
      display: inline-block;
    }

    :where(html[data-page="cloud-solutions"]) .handwritten-annotation {
      font-family: var(--font-hand);
      font-size: 1.45rem;
      color: #0B4D8A;
      font-weight: 700;
      line-height: 1.15;
      pointer-events: none;
      user-select: none;
    }

    :where(html[data-page="cloud-solutions"]) .section-title {
      font-size: clamp(2.2rem, 3.8vw, 3rem);
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.025em;
      color: var(--navy-primary);
      margin-bottom: 16px;
    }

    :where(html[data-page="cloud-solutions"]) .section-desc {
      font-size: 1.0625rem;
      color: var(--text-secondary);
      line-height: 1.65;
    }

    /* ==========================================================================
       BUTTONS
       ========================================================================== */
    :where(html[data-page="cloud-solutions"]) .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-weight: 700;
      font-size: 0.9375rem;
      padding: 13px 26px;
      border-radius: var(--r-pill);
      transition: var(--transition);
      white-space: nowrap;
      line-height: 1;
    }

    :where(html[data-page="cloud-solutions"]) .btn:hover {
      transform: translateY(-2px);
    }
    :where(html[data-page="cloud-solutions"]) .btn:active {
      transform: scale(0.98);
    }

    :where(html[data-page="cloud-solutions"]) .btn-gold {
      background-color: var(--gold);
      color: var(--navy-primary);
      box-shadow: var(--shadow-gold);
    }
    :where(html[data-page="cloud-solutions"]) .btn-gold:hover {
      background-color: var(--gold-hover);
      box-shadow: 0 14px 30px rgba(247, 182, 27, 0.45);
    }

    :where(html[data-page="cloud-solutions"]) .btn-navy {
      background-color: var(--navy-primary);
      color: var(--white);
    }
    :where(html[data-page="cloud-solutions"]) .btn-navy:hover {
      background-color: var(--navy-dark);
      box-shadow: 0 8px 22px rgba(11, 43, 87, 0.25);
    }

    :where(html[data-page="cloud-solutions"]) .btn-outline {
      border: 1.5px solid rgba(11, 43, 87, 0.18);
      background-color: var(--white);
      color: var(--navy-primary);
    }
    :where(html[data-page="cloud-solutions"]) .btn-outline:hover {
      border-color: var(--navy-primary);
      box-shadow: var(--shadow-card);
    }

    :where(html[data-page="cloud-solutions"]) .btn-sm {
      padding: 9px 18px;
      font-size: 0.85rem;
    }

    /* ==========================================================================
       HEADER & NAVIGATION
       ========================================================================== */
    :where(html[data-page="cloud-solutions"]) .site-header {
      position: sticky;
      top: 0;
      width: 100%;
      height: var(--header-height);
      background: rgba(248, 244, 236, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 900;
      border-bottom: 1px solid rgba(11, 43, 87, 0.06);
      transition: var(--transition);
    }

    :where(html[data-page="cloud-solutions"]) .site-header.scrolled {
      background: rgba(248, 244, 236, 0.98);
      box-shadow: 0 10px 28px rgba(11, 43, 87, 0.05);
    }

    :where(html[data-page="cloud-solutions"]) .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
    }

    :where(html[data-page="cloud-solutions"]) .brand-logo {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 1.45rem;
      font-weight: 800;
      color: var(--navy-primary);
      letter-spacing: -0.03em;
    }

    :where(html[data-page="cloud-solutions"]) .brand-logo .accent-word {
      color: #18C59C;
      font-weight: 800;
    }

    :where(html[data-page="cloud-solutions"]) .desktop-nav {
      display: flex;
      align-items: center;
      gap: 32px;
      list-style: none;
    }

    :where(html[data-page="cloud-solutions"]) .nav-link {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--text-secondary);
      position: relative;
      padding: 6px 2px;
    }

    :where(html[data-page="cloud-solutions"]) .nav-link:hover {
      color: var(--navy-primary);
    }

    :where(html[data-page="cloud-solutions"]) .nav-link.active {
      color: var(--blue);
      font-weight: 700;
    }

    :where(html[data-page="cloud-solutions"]) .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2.5px;
      background: var(--blue);
      border-radius: 2px;
    }

    :where(html[data-page="cloud-solutions"]) .header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    :where(html[data-page="cloud-solutions"]) .mobile-menu-btn {
      display: none;
      padding: 8px;
      font-size: 1.6rem;
      color: var(--navy-primary);
    }

    /* Mobile Drawer (Sibling to header) */
    :where(html[data-page="cloud-solutions"]) .mobile-drawer {
      position: fixed;
      top: var(--header-height);
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: calc(100dvh - var(--header-height));
      background: var(--page-bg);
      padding: 28px 24px 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 20px;
      transform: translateY(-110%);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease;
      z-index: 899;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      border-bottom: 1px solid var(--border);
      box-shadow: 0 24px 48px rgba(11, 43, 87, 0.18);
    }

    :where(html[data-page="cloud-solutions"]) .mobile-drawer.open {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    :where(html[data-page="cloud-solutions"]) .mobile-nav-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    :where(html[data-page="cloud-solutions"]) .mobile-nav-link {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--navy-primary);
      display: block;
      padding: 8px 0;
    }

    /* ==========================================================================
       SECTION 01: CLOUD & DEVOPS HERO (PREMIUM UPGRADE)
       ========================================================================== */
    :where(html[data-page="cloud-solutions"]) .rv-cloud-hero {
      background: radial-gradient(circle at 68% 34%, rgba(47, 139, 255, 0.13) 0%, rgba(47, 139, 255, 0.04) 28%, transparent 52%),
                  linear-gradient(180deg, #F8F4EC 0%, #FFFDF8 100%);
      padding: 56px 0 82px;
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="cloud-solutions"]) .rv-cloud-hero::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 50%;
      height: 100%;
      background-image: radial-gradient(rgba(11, 43, 87, 0.06) 1.2px, transparent 1.2px);
      background-size: 24px 24px;
      opacity: 0.28;
      pointer-events: none;
      z-index: 1;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-hero-container {
      width: 100%;
      max-width: var(--container-max, 1280px);
      margin: 0 auto;
      padding: 0 24px;
      position: relative;
      z-index: 2;
      box-sizing: border-box;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-hero-grid {
      display: grid;
      grid-template-columns: 47% 53%;
      gap: 56px;
      align-items: center;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-hero-copy {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      min-width: 0;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-hero-eyebrow-wrap {
      margin-bottom: 20px;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #EAF3FF;
      border: 1px solid rgba(47, 139, 255, 0.18);
      border-radius: 999px;
      padding: 8px 16px;
      color: #176ED8;
      font-family: 'Inter', sans-serif;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      box-shadow: 0 2px 8px rgba(47, 139, 255, 0.06);
    }

    :where(html[data-page="cloud-solutions"]) .cloud-hero-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #2F8BFF;
      box-shadow: 0 0 0 4px rgba(47, 139, 255, 0.18);
      display: inline-block;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-hero-headline {
      font-family: 'Manrope', -apple-system, sans-serif !important;
      font-size: clamp(2.6rem, 4.2vw, 4.2rem) !important;
      font-weight: 900 !important;
      line-height: 1.08 !important;
      letter-spacing: -0.04em !important;
      color: #0B2B57 !important;
      margin: 0 0 22px 0 !important;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-hero-emphasis {
      position: relative;
      color: #176ED8;
      display: inline-block;
      max-width: 100%;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-hero-swoosh {
      position: absolute;
      left: 0;
      bottom: -8px;
      width: 100%;
      height: 14px;
      pointer-events: none;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-hero-desc {
      font-family: 'Inter', sans-serif;
      font-size: 17px;
      line-height: 1.68;
      color: #52677F;
      max-width: 540px;
      margin: 0 0 32px 0;
      text-wrap: pretty;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-hero-actions {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-btn-primary {
      background: #F7B61B;
      color: #0B2B57;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 800;
      padding: 14px 28px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(0, 0, 0, 0.05);
      box-shadow: 0 10px 24px rgba(247, 182, 27, 0.32);
      transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
      text-decoration: none;
      white-space: nowrap;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-btn-primary:hover {
      background: #FFC735;
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(247, 182, 27, 0.45);
    }

    :where(html[data-page="cloud-solutions"]) .cloud-btn-primary i {
      font-size: 17px;
      transition: transform 0.2s ease;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-btn-primary:hover i {
      transform: translateX(3px);
    }

    :where(html[data-page="cloud-solutions"]) .cloud-btn-secondary {
      background: #FFFFFF;
      color: #0B2B57;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 700;
      padding: 14px 24px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1.5px solid rgba(11, 43, 87, 0.14);
      box-shadow: 0 4px 14px rgba(11, 43, 87, 0.04);
      transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
      text-decoration: none;
      white-space: nowrap;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-btn-secondary:hover {
      border-color: #0B2B57;
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(11, 43, 87, 0.08);
      background: #FFFFFF;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-btn-secondary i {
      font-size: 16px;
      transition: transform 0.2s ease;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-btn-secondary:hover i {
      transform: translate(2px, 2px);
    }

    /* Trust Signals Row */
    :where(html[data-page="cloud-solutions"]) .cloud-hero-trust-signals {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 36px;
      padding-top: 24px;
      border-top: 1px solid rgba(11, 43, 87, 0.09);
      width: 100%;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-trust-item {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-trust-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      font-size: 17px;
      flex-shrink: 0;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-trust-item.theme-blue .cloud-trust-icon { background: #EAF3FF; color: #2F8BFF; }
    :where(html[data-page="cloud-solutions"]) .cloud-trust-item.theme-mint .cloud-trust-icon { background: #E6F8F2; color: #1FC89B; }
    :where(html[data-page="cloud-solutions"]) .cloud-trust-item.theme-purple .cloud-trust-icon { background: #F0EBFF; color: #8B63FF; }
    :where(html[data-page="cloud-solutions"]) .cloud-trust-item.theme-gold .cloud-trust-icon { background: #FFF4D1; color: #D48E00; }

    :where(html[data-page="cloud-solutions"]) .cloud-trust-text {
      display: flex;
      flex-direction: column;
      line-height: 1.15;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-trust-text strong {
      font-family: 'Inter', sans-serif;
      font-size: 12.5px;
      font-weight: 800;
      color: #0B2B57;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-trust-text span {
      font-size: 10.5px;
      font-weight: 600;
      color: #52677F;
    }

    /* Right Architecture Visual */
    :where(html[data-page="cloud-solutions"]) .cloud-hero-art-wrapper {
      position: relative;
      width: 100%;
      min-height: 520px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-hero-annotation {
      position: absolute;
      top: -12px;
      right: 18px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      z-index: 20;
      pointer-events: none;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-hero-annot-text {
      font-family: 'Caveat', cursive;
      font-size: 23px;
      font-weight: 600;
      color: #0B4D8A;
      line-height: 1.05;
      transform: rotate(-3deg);
    }

    :where(html[data-page="cloud-solutions"]) .cloud-hero-annot-arrow {
      width: 58px;
      height: 38px;
      margin-top: 2px;
      margin-right: 14px;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-art-canvas {
      position: relative;
      width: 100%;
      min-height: 480px;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(238, 246, 255, 0.88));
      border: 1px solid rgba(47, 139, 255, 0.16);
      border-radius: 28px;
      padding: 36px 28px 28px;
      box-shadow: 0 24px 64px rgba(11, 43, 87, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.8);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }

    /* Ambient glow meshes */
    :where(html[data-page="cloud-solutions"]) .cloud-art-glow-1 {
      position: absolute;
      top: 15%;
      left: 50%;
      transform: translateX(-50%);
      width: 320px;
      height: 220px;
      background: radial-gradient(ellipse, rgba(47, 139, 255, 0.20) 0%, rgba(88, 200, 255, 0) 70%);
      filter: blur(40px);
      pointer-events: none;
      z-index: 0;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-art-glow-2 {
      position: absolute;
      bottom: 10%;
      right: 10%;
      width: 240px;
      height: 160px;
      background: radial-gradient(ellipse, rgba(31, 200, 155, 0.15) 0%, rgba(31, 200, 155, 0) 70%);
      filter: blur(36px);
      pointer-events: none;
      z-index: 0;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-art-grid-overlay {
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(47, 139, 255, 0.12) 1px, transparent 1px);
      background-size: 20px 20px;
      opacity: 0.6;
      pointer-events: none;
      z-index: 0;
    }

    /* Central Cloud Node */
    :where(html[data-page="cloud-solutions"]) .cloud-central-node {
      position: relative;
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-top: 10px;
      transition: transform 0.22s ease;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-central-node:hover {
      transform: scale(1.02);
    }

    :where(html[data-page="cloud-solutions"]) .cloud-node-circle {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: linear-gradient(145deg, #FFFFFF 0%, #E3F2FF 100%);
      border: 2px solid rgba(47, 139, 255, 0.28);
      box-shadow: 0 0 0 10px rgba(47, 139, 255, 0.08), 0 14px 30px rgba(47, 139, 255, 0.18);
      display: grid;
      place-items: center;
      color: #2F8BFF;
      font-size: 42px;
      margin-bottom: 10px;
      position: relative;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-node-circle::after {
      content: "";
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 1px dashed rgba(47, 139, 255, 0.35);
      animation: page-cloud-solutions-rotateSlow 24s linear infinite;
    }

    @keyframes page-cloud-solutions-rotateSlow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    :where(html[data-page="cloud-solutions"]) .cloud-node-label {
      font-family: 'Manrope', sans-serif;
      font-size: 15px;
      font-weight: 800;
      color: #0B2B57;
      letter-spacing: -0.02em;
      margin-bottom: 2px;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-node-sub {
      font-size: 11px;
      font-weight: 600;
      color: #52677F;
      letter-spacing: 0.02em;
    }

    /* Vector Connector Bus */
    :where(html[data-page="cloud-solutions"]) .cloud-bus-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      pointer-events: none;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-bus-line {
      stroke: rgba(47, 139, 255, 0.48);
      stroke-width: 1.8;
      stroke-dasharray: 6 6;
      animation: page-cloud-solutions-dashMove 14s linear infinite;
    }

    @keyframes page-cloud-solutions-dashMove {
      to { stroke-dashoffset: -120; }
    }

    /* 3 Service Tiers */
    :where(html[data-page="cloud-solutions"]) .cloud-tiers-row {
      position: relative;
      z-index: 5;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      width: 100%;
      margin-top: 36px;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-tier-card {
      background: #FFFFFF;
      border: 1px solid rgba(11, 43, 87, 0.08);
      border-radius: 18px;
      padding: 16px 14px 14px;
      box-shadow: 0 10px 24px rgba(11, 43, 87, 0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-tier-card::before {
      content: "";
      position: absolute;
      top: -5px;
      left: 50%;
      transform: translateX(-50%);
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #FFFFFF;
      border: 2px solid #2F8BFF;
      box-shadow: 0 0 8px rgba(47, 139, 255, 0.4);
      z-index: 6;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-tier-card.tier-deploy::before {
      border-color: #8B63FF;
      box-shadow: 0 0 8px rgba(139, 99, 255, 0.45);
    }

    :where(html[data-page="cloud-solutions"]) .cloud-tier-card.tier-monitor::before {
      border-color: #1FC89B;
      box-shadow: 0 0 8px rgba(31, 200, 155, 0.45);
    }

    :where(html[data-page="cloud-solutions"]) .cloud-tier-card.tier-scale::before {
      border-color: #2F8BFF;
      box-shadow: 0 0 8px rgba(47, 139, 255, 0.45);
    }

    :where(html[data-page="cloud-solutions"]) .cloud-tier-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 36px rgba(11, 43, 87, 0.10);
      border-color: rgba(47, 139, 255, 0.3);
    }

    :where(html[data-page="cloud-solutions"]) .cloud-tier-header {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 8px;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-tier-icon {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      display: grid;
      place-items: center;
      font-size: 15px;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-tier-card.tier-deploy .cloud-tier-icon { background: #F0EBFF; color: #8B63FF; }
    :where(html[data-page="cloud-solutions"]) .cloud-tier-card.tier-monitor .cloud-tier-icon { background: #E6F8F2; color: #1FC89B; }
    :where(html[data-page="cloud-solutions"]) .cloud-tier-card.tier-scale .cloud-tier-icon { background: #EAF3FF; color: #2F8BFF; }

    :where(html[data-page="cloud-solutions"]) .cloud-tier-title {
      font-family: 'Manrope', sans-serif;
      font-size: 14px;
      font-weight: 800;
      color: #0B2B57;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-tier-badge {
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 999px;
      margin-bottom: 12px;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-tier-card.tier-deploy .cloud-tier-badge { background: #F0EBFF; color: #7342F5; }
    :where(html[data-page="cloud-solutions"]) .cloud-tier-card.tier-monitor .cloud-tier-badge { background: #E6F8F2; color: #0C9E78; }
    :where(html[data-page="cloud-solutions"]) .cloud-tier-card.tier-scale .cloud-tier-badge { background: #EAF3FF; color: #176ED8; }

    /* Rack Simulation Visual */
    :where(html[data-page="cloud-solutions"]) .cloud-rack-visual {
      width: 100%;
      background: #F4F8FC;
      border: 1px solid rgba(11, 43, 87, 0.06);
      border-radius: 10px;
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-rack-row {
      height: 13px;
      background: #FFFFFF;
      border-radius: 4px;
      border: 1px solid rgba(11, 43, 87, 0.05);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 6px;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-led-group {
      display: flex;
      gap: 3px;
      align-items: center;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-led {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #1FC89B;
      box-shadow: 0 0 5px rgba(31, 200, 155, 0.8);
      animation: page-cloud-solutions-ledPulse 2.4s ease-in-out infinite;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-led.amber { background: #F7B61B; box-shadow: 0 0 5px rgba(247, 182, 27, 0.8); }
    :where(html[data-page="cloud-solutions"]) .cloud-led.blue { background: #2F8BFF; box-shadow: 0 0 5px rgba(47, 139, 255, 0.8); }

    @keyframes page-cloud-solutions-ledPulse {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; transform: scale(1.15); }
    }

    :where(html[data-page="cloud-solutions"]) .cloud-rack-bar {
      height: 3px;
      border-radius: 2px;
      background: #D5E4F3;
      width: 32px;
    }

    /* Floating Metric Cards */
    :where(html[data-page="cloud-solutions"]) .cloud-metric-badge {
      position: absolute;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.9);
      border-radius: 14px;
      padding: 8px 14px;
      box-shadow: 0 10px 24px rgba(11, 43, 87, 0.08);
      display: flex;
      align-items: center;
      gap: 9px;
      z-index: 10;
      transition: transform 0.2s ease;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-metric-badge:hover {
      transform: translateY(-2px);
    }

    :where(html[data-page="cloud-solutions"]) .metric-badge-1 {
      top: 24px;
      left: 20px;
    }

    :where(html[data-page="cloud-solutions"]) .metric-badge-2 {
      top: 48%;
      right: 18px;
    }

    :where(html[data-page="cloud-solutions"]) .metric-badge-3 {
      bottom: 22px;
      left: 20px;
    }

    :where(html[data-page="cloud-solutions"]) .metric-badge-val {
      font-family: 'Manrope', sans-serif;
      font-size: 15px;
      font-weight: 900;
      line-height: 1;
    }

    :where(html[data-page="cloud-solutions"]) .cloud-metric-badge.theme-mint .metric-badge-val { color: #109F79; }
    :where(html[data-page="cloud-solutions"]) .cloud-metric-badge.theme-purple .metric-badge-val { color: #8B63FF; }
    :where(html[data-page="cloud-solutions"]) .cloud-metric-badge.theme-gold .metric-badge-val { color: #D48E00; }

    :where(html[data-page="cloud-solutions"]) .metric-badge-lbl {
      font-size: 10.5px;
      font-weight: 700;
      color: #52677F;
      line-height: 1.15;
    }

    /* ==========================================================================
       SECTION: CONNECTED CAPABILITIES STRIP
       ========================================================================== */
    :where(html[data-page="cloud-solutions"]) .rv-capabilities {
      padding: 92px 0 96px;
      background: #FFFFFF;
      border-bottom: 1px solid rgba(11, 43, 87, 0.07);
      position: relative;
    }

    :where(html[data-page="cloud-solutions"]) .capabilities-header-wrap {
      margin-bottom: 48px;
    }

    :where(html[data-page="cloud-solutions"]) .capabilities-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #176ED8;
      background: #EAF3FF;
      padding: 6px 14px;
      border-radius: 999px;
      margin-bottom: 14px;
    }

    :where(html[data-page="cloud-solutions"]) .capabilities-title {
      font-family: 'Manrope', sans-serif !important;
      font-size: clamp(2.1rem, 3.2vw, 2.75rem) !important;
      font-weight: 850 !important;
      line-height: 1.1 !important;
      letter-spacing: -0.035em !important;
      color: #0B2B57 !important;
      margin: 0 0 14px 0 !important;
    }

    :where(html[data-page="cloud-solutions"]) .capabilities-desc {
      font-size: 16.5px;
      line-height: 1.65;
      color: #52677F;
      max-width: 620px;
      margin: 0;
    }

    :where(html[data-page="cloud-solutions"]) .capabilities-grid-3col {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    :where(html[data-page="cloud-solutions"]) .capability-card-item {
      background: #FFFDF8;
      border: 1px solid rgba(11, 43, 87, 0.08);
      border-radius: 20px;
      padding: 32px 28px 28px;
      box-shadow: 0 10px 28px rgba(11, 43, 87, 0.04);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 230px;
      transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
    }

    :where(html[data-page="cloud-solutions"]) .capability-card-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 42px rgba(11, 43, 87, 0.09);
      border-color: rgba(47, 139, 255, 0.28);
      background: #FFFFFF;
    }

    :where(html[data-page="cloud-solutions"]) .capability-top-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    :where(html[data-page="cloud-solutions"]) .capability-icon-tile {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      font-size: 26px;
      transition: transform 0.2s ease;
    }

    :where(html[data-page="cloud-solutions"]) .capability-card-item:hover .capability-icon-tile {
      transform: translateY(-2px);
    }

    :where(html[data-page="cloud-solutions"]) .capability-num-tag {
      font-family: 'Manrope', sans-serif;
      font-size: 13px;
      font-weight: 800;
      color: #A0B3C6;
      letter-spacing: 0.05em;
    }

    :where(html[data-page="cloud-solutions"]) .capability-card-title {
      font-family: 'Manrope', sans-serif;
      font-size: 1.35rem;
      font-weight: 800;
      color: #0B2B57;
      margin: 0 0 10px 0;
      letter-spacing: -0.025em;
    }

    :where(html[data-page="cloud-solutions"]) .capability-card-desc {
      font-size: 14.5px;
      line-height: 1.6;
      color: #52677F;
      margin: 0;
    }

    /* Responsive Design System */
    @media (max-width: 1200px) {
      :where(html[data-page="cloud-solutions"]) .cloud-hero-headline {
        font-size: clamp(2.35rem, 3.8vw, 3.4rem) !important;
      }
    }

    @media (max-width: 1024px) {
      :where(html[data-page="cloud-solutions"]) .cloud-hero-headline {
        font-size: clamp(2.15rem, 3.5vw, 2.9rem) !important;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-hero-grid {
        gap: 36px;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-hero-trust-signals {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
      }
      :where(html[data-page="cloud-solutions"]) .capabilities-grid-3col {
        gap: 20px;
      }
    }

    @media (max-width: 980px) {
      :where(html[data-page="cloud-solutions"]) .cloud-hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-hero-headline {
        font-size: clamp(2.3rem, 5.5vw, 3.2rem) !important;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-hero-copy {
        max-width: 680px;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-hero-desc {
        max-width: 600px;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-hero-art-wrapper {
        max-width: 600px;
        margin: 0 auto;
      }
      :where(html[data-page="cloud-solutions"]) .capabilities-grid-3col {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="cloud-solutions"]) .rv-cloud-hero {
        padding: 48px 0 56px;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-hero-headline {
        font-size: clamp(1.95rem, 6.8vw, 2.6rem) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.035em !important;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-hero-desc {
        font-size: 15.5px;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-hero-actions {
        width: 100%;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-btn-primary,:where(html[data-page="cloud-solutions"])  .cloud-btn-secondary {
        width: 100%;
        justify-content: center;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-hero-trust-signals {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-art-canvas {
        min-height: 420px;
        padding: 24px 18px 20px;
      }
      :where(html[data-page="cloud-solutions"]) .metric-badge-2 {
        display: none;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-hero-annotation {
        display: none;
      }
      :where(html[data-page="cloud-solutions"]) .rv-capabilities {
        padding: 64px 0 68px;
      }
    }

    @media (max-width: 430px) {
      :where(html[data-page="cloud-solutions"]) .cloud-hero-headline {
        font-size: clamp(1.75rem, 8.2vw, 2.15rem) !important;
        line-height: 1.15 !important;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-tiers-row {
        gap: 8px;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-tier-card {
        padding: 12px 6px;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-tier-title {
        font-size: 12px;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-tier-badge {
        font-size: 8px;
        padding: 2px 4px;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-node-circle {
        width: 72px;
        height: 72px;
        font-size: 32px;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-hero-trust-signals {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
    }

    @media (max-width: 360px) {
      :where(html[data-page="cloud-solutions"]) .cloud-hero-headline {
        font-size: 1.6rem !important;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-hero-trust-signals {
        grid-template-columns: 1fr;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      :where(html[data-page="cloud-solutions"]) .cloud-node-circle::after,:where(html[data-page="cloud-solutions"]) 
      .cloud-bus-line,:where(html[data-page="cloud-solutions"]) 
      .cloud-led {
        animation: none !important;
      }
      :where(html[data-page="cloud-solutions"]) .cloud-btn-primary,:where(html[data-page="cloud-solutions"]) 
      .cloud-btn-secondary,:where(html[data-page="cloud-solutions"]) 
      .cloud-tier-card,:where(html[data-page="cloud-solutions"]) 
      .capability-card-item {
        transition: none !important;
      }
    }

    /* ==========================================================================
       SECTION 02: TRUSTED BRANDS STRIP
       ========================================================================== */
    /* ==========================================================================
       SECTION 02: TRUSTED BRANDS STRIP (EDITORIAL GLASS)
       ========================================================================== */
    :where(html[data-page="cloud-solutions"]) .brands-section {
      padding: 24px 0 64px;
    }

    :where(html[data-page="cloud-solutions"]) .brands-box {
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 22px;
      padding: 28px 36px;
      border: 1px solid rgba(11, 43, 87, 0.08);
      box-shadow: 0 10px 28px rgba(11, 43, 87, 0.04);
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    :where(html[data-page="cloud-solutions"]) .brands-header-text {
      font-family: 'Inter', sans-serif;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #7E92A8;
      text-align: center;
    }

    :where(html[data-page="cloud-solutions"]) .brands-logo-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }

    :where(html[data-page="cloud-solutions"]) .brand-logo-item {
      font-family: 'Manrope', sans-serif;
      font-size: 1.25rem;
      font-weight: 900;
      color: #0B2B57;
      opacity: 0.78;
      letter-spacing: -0.02em;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      text-decoration: none;
    }

    :where(html[data-page="cloud-solutions"]) .brand-logo-item:hover {
      opacity: 1;
      transform: translateY(-2px);
      color: #176ED8;
    }

    /* ==========================================================================
       SECTION 03: CLOUD & DEVOPS SERVICES (ASYMMETRIC BENTO SYSTEM)
       ========================================================================== */
    :where(html[data-page="cloud-solutions"]) .services-section {
      padding: 96px 0;
    }

    :where(html[data-page="cloud-solutions"]) .services-grid-wrapper {
      display: grid;
      grid-template-columns: 36% 64%;
      gap: 56px;
      align-items: flex-start;
    }

    :where(html[data-page="cloud-solutions"]) .services-copy {
      position: sticky;
      top: 120px;
    }

    :where(html[data-page="cloud-solutions"]) .services-taxonomy {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 24px 0 28px;
    }

    :where(html[data-page="cloud-solutions"]) .taxonomy-pill {
      font-family: 'Inter', sans-serif;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: #176ED8;
      background: #EAF3FF;
      border: 1px solid rgba(47, 139, 255, 0.16);
      padding: 5px 12px;
      border-radius: 999px;
    }

    :where(html[data-page="cloud-solutions"]) .service-bento-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 20px;
    }

    :where(html[data-page="cloud-solutions"]) .bento-card {
      background: #FFFFFF;
      border-radius: 22px;
      padding: 26px;
      border: 1px solid rgba(11, 43, 87, 0.07);
      box-shadow: 0 10px 28px rgba(11, 43, 87, 0.04);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 190px;
      transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="cloud-solutions"]) .bento-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 42px rgba(11, 43, 87, 0.08);
      border-color: rgba(47, 139, 255, 0.28);
    }

    :where(html[data-page="cloud-solutions"]) .bento-card.card-span-7 { grid-column: span 7; }
    :where(html[data-page="cloud-solutions"]) .bento-card.card-span-5 { grid-column: span 5; }
    :where(html[data-page="cloud-solutions"]) .bento-card.card-span-6 { grid-column: span 6; }

    :where(html[data-page="cloud-solutions"]) .bento-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    :where(html[data-page="cloud-solutions"]) .bento-card-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35rem;
      flex-shrink: 0;
    }

    :where(html[data-page="cloud-solutions"]) .bento-badge-tag {
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 999px;
    }

    :where(html[data-page="cloud-solutions"]) .bento-card h4 {
      font-family: 'Manrope', sans-serif;
      font-size: 1.15rem;
      font-weight: 800;
      color: #0B2B57;
      line-height: 1.25;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

    :where(html[data-page="cloud-solutions"]) .bento-card p {
      font-family: 'Inter', sans-serif;
      font-size: 14.5px;
      color: #52677F;
      line-height: 1.55;
      margin: 0;
    }

    /* Mini Visual Addons */
    :where(html[data-page="cloud-solutions"]) .mini-topology-addon {
      margin-top: 16px;
      background: #F8FBFF;
      border: 1px solid rgba(47, 139, 255, 0.12);
      border-radius: 12px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    :where(html[data-page="cloud-solutions"]) .mini-topo-node {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      color: #0B2B57;
    }

    :where(html[data-page="cloud-solutions"]) .mini-topo-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #2F8BFF;
    }

    :where(html[data-page="cloud-solutions"]) .mini-topo-line {
      flex: 1;
      height: 1px;
      background: rgba(47, 139, 255, 0.3);
      margin: 0 10px;
      border-top: 1px dashed rgba(47, 139, 255, 0.4);
    }

    :where(html[data-page="cloud-solutions"]) .mini-pipeline-addon {
      margin-top: 16px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    :where(html[data-page="cloud-solutions"]) .mini-pipe-step {
      background: #F8F5FF;
      border: 1px solid rgba(139, 99, 255, 0.16);
      border-radius: 8px;
      padding: 5px 8px;
      text-align: center;
      font-size: 10.5px;
      font-weight: 700;
      color: #7342F5;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    /* ==========================================================================
       SECTION 04: DARK PANEL — WHY CLOUD & DEVOPS? (CONTRAST PROOF)
       ========================================================================== */
    :where(html[data-page="cloud-solutions"]) .dark-panel-section {
      padding: 40px 0 96px;
    }

    :where(html[data-page="cloud-solutions"]) .dark-panel-container {
      background: radial-gradient(circle at 60% 45%, rgba(47, 139, 255, 0.22), transparent 38%),
                  linear-gradient(145deg, #082B56 0%, #052345 100%);
      border-radius: 30px;
      padding: 64px 56px;
      color: #FFFFFF;
      box-shadow: 0 24px 64px rgba(7, 37, 72, 0.26);
      display: grid;
      grid-template-columns: 34% 38% 28%;
      gap: 42px;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="cloud-solutions"]) .dark-panel-left .eyebrow-pill {
      background: rgba(88, 200, 255, 0.14);
      color: #58C8FF;
      border: 1px solid rgba(88, 200, 255, 0.25);
    }

    :where(html[data-page="cloud-solutions"]) .dark-panel-left h3 {
      font-family: 'Manrope', sans-serif;
      font-size: clamp(2.1rem, 3.2vw, 2.75rem);
      font-weight: 900;
      line-height: 1.12;
      color: #FFFFFF;
      margin-bottom: 16px;
      letter-spacing: -0.035em;
    }

    :where(html[data-page="cloud-solutions"]) .dark-panel-left p {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.82);
      line-height: 1.62;
      margin-bottom: 28px;
    }

    :where(html[data-page="cloud-solutions"]) .dark-panel-center {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    :where(html[data-page="cloud-solutions"]) .dark-panel-center-svg {
      width: 100%;
      max-width: 320px;
      filter: drop-shadow(0 14px 32px rgba(47, 139, 255, 0.35));
    }

    /* Vertical Editorial Metrics Stack */
    :where(html[data-page="cloud-solutions"]) .dark-panel-right {
      display: flex;
      flex-direction: column;
      gap: 0;
      border-left: 1px solid rgba(255, 255, 255, 0.12);
      padding-left: 32px;
      text-align: left;
    }

    :where(html[data-page="cloud-solutions"]) .dark-metric-item {
      padding: 16px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.10);
      display: flex;
      align-items: center;
      gap: 16px;
      transition: all 0.2s ease;
      text-align: left;
    }

    :where(html[data-page="cloud-solutions"]) .dark-metric-item:first-child { padding-top: 0; }
    :where(html[data-page="cloud-solutions"]) .dark-metric-item:last-child { border-bottom: none; padding-bottom: 0; }

    :where(html[data-page="cloud-solutions"]) .dark-metric-item:hover {
      transform: translateX(4px);
    }

    :where(html[data-page="cloud-solutions"]) .dark-metric-icon {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      flex-shrink: 0;
    }

    :where(html[data-page="cloud-solutions"]) .dark-metric-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }

    :where(html[data-page="cloud-solutions"]) .dark-metric-info h4 {
      font-family: 'Manrope', sans-serif;
      font-size: 1.65rem;
      font-weight: 900;
      color: #FFFFFF;
      line-height: 1.1;
      margin: 0 0 3px;
      letter-spacing: -0.03em;
      text-align: left;
    }

    :where(html[data-page="cloud-solutions"]) .dark-metric-info span {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.82);
      font-weight: 600;
      text-align: left;
      line-height: 1.25;
    }

    /* ==========================================================================
       SECTION 05: PROCESS (5-STAGE CONNECTED JOURNEY)
       ========================================================================== */
    :where(html[data-page="cloud-solutions"]) .process-section {
      padding: 96px 0;
      background: #FFFDF8;
      border-top: 1px solid rgba(11, 43, 87, 0.06);
      border-bottom: 1px solid rgba(11, 43, 87, 0.06);
    }

    :where(html[data-page="cloud-solutions"]) .process-header-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 32px;
      margin-bottom: 48px;
      flex-wrap: wrap;
    }

    :where(html[data-page="cloud-solutions"]) .process-steps-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
      position: relative;
    }

    :where(html[data-page="cloud-solutions"]) .process-card {
      background: #FFFFFF;
      border: 1px solid rgba(11, 43, 87, 0.07);
      border-radius: 20px;
      padding: 24px 20px;
      box-shadow: 0 10px 28px rgba(11, 43, 87, 0.04);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 210px;
      position: relative;
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 2;
    }

    :where(html[data-page="cloud-solutions"]) .process-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 40px rgba(11, 43, 87, 0.09);
      border-color: rgba(47, 139, 255, 0.3);
    }

    :where(html[data-page="cloud-solutions"]) .process-step-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    :where(html[data-page="cloud-solutions"]) .process-icon-box {
      width: 40px;
      height: 40px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
    }

    :where(html[data-page="cloud-solutions"]) .process-num-badge {
      font-family: 'Manrope', sans-serif;
      font-size: 13px;
      font-weight: 900;
      color: #A0B3C6;
      letter-spacing: 0.05em;
    }

    :where(html[data-page="cloud-solutions"]) .process-card h4 {
      font-family: 'Manrope', sans-serif;
      font-size: 1.15rem;
      font-weight: 800;
      color: #0B2B57;
      margin-bottom: 6px;
      letter-spacing: -0.02em;
    }

    :where(html[data-page="cloud-solutions"]) .process-card p {
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      color: #52677F;
      line-height: 1.5;
      margin: 0;
    }

    :where(html[data-page="cloud-solutions"]) .step-arrow-connector {
      position: absolute;
      right: -12px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      color: #2F8BFF;
      font-size: 1.1rem;
      pointer-events: none;
      opacity: 0.4;
    }

    /* ==========================================================================
       SECTION 06: FEATURED CASE STUDIES (OUTCOME-FIRST)
       ========================================================================== */
    :where(html[data-page="cloud-solutions"]) .case-studies-section {
      padding: 96px 0;
    }

    :where(html[data-page="cloud-solutions"]) .section-header-split {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 44px;
      gap: 20px;
      flex-wrap: wrap;
    }

    :where(html[data-page="cloud-solutions"]) .carousel-nav-arrows {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    :where(html[data-page="cloud-solutions"]) .carousel-arrow-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1.5px solid rgba(11, 43, 87, 0.12);
      background: #FFFFFF;
      color: #0B2B57;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      transition: all 0.2s ease;
      cursor: pointer;
    }

    :where(html[data-page="cloud-solutions"]) .carousel-arrow-btn:hover {
      background: #0B2B57;
      color: #FFFFFF;
      border-color: #0B2B57;
      transform: translateY(-1px);
    }

    :where(html[data-page="cloud-solutions"]) .case-studies-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    :where(html[data-page="cloud-solutions"]) .case-card {
      background: #FFFFFF;
      border-radius: 22px;
      border: 1px solid rgba(11, 43, 87, 0.08);
      overflow: hidden;
      box-shadow: 0 10px 28px rgba(11, 43, 87, 0.04);
      display: flex;
      flex-direction: column;
      transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    }

    :where(html[data-page="cloud-solutions"]) .case-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 42px rgba(11, 43, 87, 0.09);
      border-color: rgba(47, 139, 255, 0.3);
    }

    :where(html[data-page="cloud-solutions"]) .case-img-wrap {
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: #0B2B57;
      position: relative;
    }

    :where(html[data-page="cloud-solutions"]) .case-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }

    :where(html[data-page="cloud-solutions"]) .case-card:hover .case-img-wrap img {
      transform: scale(1.035);
    }

    :where(html[data-page="cloud-solutions"]) .case-card-body {
      padding: 24px 22px;
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: space-between;
    }

    :where(html[data-page="cloud-solutions"]) .case-meta-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    :where(html[data-page="cloud-solutions"]) .case-tag {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #176ED8;
    }

    :where(html[data-page="cloud-solutions"]) .case-metric-lead {
      font-family: 'Manrope', sans-serif;
      font-size: 13px;
      font-weight: 850;
      color: #109F79;
      background: #E6F8F2;
      padding: 2px 8px;
      border-radius: 999px;
    }

    :where(html[data-page="cloud-solutions"]) .case-card-body h4 {
      font-family: 'Manrope', sans-serif;
      font-size: 1.18rem;
      font-weight: 800;
      color: #0B2B57;
      line-height: 1.3;
      margin-bottom: 10px;
      letter-spacing: -0.02em;
    }

    :where(html[data-page="cloud-solutions"]) .case-card-body p {
      font-family: 'Inter', sans-serif;
      font-size: 14.5px;
      color: #52677F;
      line-height: 1.55;
      margin-bottom: 20px;
    }

    :where(html[data-page="cloud-solutions"]) .case-link {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: #0B2B57;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    :where(html[data-page="cloud-solutions"]) .case-card:hover .case-link {
      color: #176ED8;
      transform: translateX(3px);
    }

    /* ==========================================================================
       SECTION 07: TECH STACK (COMPACT ECOSYSTEM)
       ========================================================================== */
    :where(html[data-page="cloud-solutions"]) .tech-stack-section {
      padding: 72px 0;
      background: #FFFDF8;
      border-top: 1px solid rgba(11, 43, 87, 0.06);
      border-bottom: 1px solid rgba(11, 43, 87, 0.06);
    }

    :where(html[data-page="cloud-solutions"]) .tech-stack-grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 16px;
      margin-top: 36px;
    }

    :where(html[data-page="cloud-solutions"]) .tech-tile {
      background: #FFFFFF;
      border-radius: 16px;
      padding: 18px 12px;
      border: 1px solid rgba(11, 43, 87, 0.07);
      box-shadow: 0 4px 14px rgba(11, 43, 87, 0.03);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-align: center;
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      min-height: 96px;
    }

    :where(html[data-page="cloud-solutions"]) .tech-tile:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 28px rgba(11, 43, 87, 0.08);
      border-color: rgba(47, 139, 255, 0.3);
    }

    :where(html[data-page="cloud-solutions"]) .tech-tile-icon {
      font-size: 1.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
    }

    :where(html[data-page="cloud-solutions"]) .tech-tile span {
      font-family: 'Manrope', sans-serif;
      font-size: 12.5px;
      font-weight: 800;
      color: #0B2B57;
    }

    /* ==========================================================================
       SECTION 08: WHY CHOOSE KAXON + TESTIMONIAL
       ========================================================================== */
    :where(html[data-page="cloud-solutions"]) .why-choose-section {
      padding: 96px 0;
    }

    :where(html[data-page="cloud-solutions"]) .why-choose-grid {
      display: grid;
      grid-template-columns: 58% 42%;
      gap: 36px;
      align-items: stretch;
    }

    :where(html[data-page="cloud-solutions"]) .why-choose-card {
      background: #FFFFFF;
      border-radius: 26px;
      padding: 44px 40px;
      border: 1px solid rgba(11, 43, 87, 0.08);
      box-shadow: 0 10px 30px rgba(11, 43, 87, 0.04);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    :where(html[data-page="cloud-solutions"]) .benefits-checklist-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px 22px;
      margin-top: 32px;
    }

    :where(html[data-page="cloud-solutions"]) .benefit-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 700;
      color: #0B2B57;
    }

    :where(html[data-page="cloud-solutions"]) .benefit-check-icon {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #E6F8F2;
      color: #1FC89B;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.95rem;
      flex-shrink: 0;
    }

    /* Client Testimonial Box */
    :where(html[data-page="cloud-solutions"]) .testimonial-box {
      background: #FFFFFF;
      border-radius: 26px;
      padding: 40px 36px;
      border: 1px solid rgba(11, 43, 87, 0.08);
      box-shadow: 0 10px 30px rgba(11, 43, 87, 0.04);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    :where(html[data-page="cloud-solutions"]) .testimonial-top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    :where(html[data-page="cloud-solutions"]) .quote-icon-mark {
      font-size: 2.8rem;
      color: #78AFFF;
      line-height: 1;
      font-family: Georgia, serif;
    }

    :where(html[data-page="cloud-solutions"]) .testimonial-quote-text {
      font-family: 'Inter', sans-serif;
      font-size: 16.5px;
      line-height: 1.65;
      color: #0B2B57;
      font-weight: 500;
      margin-bottom: 28px;
    }

    :where(html[data-page="cloud-solutions"]) .testimonial-author-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: auto;
    }

    :where(html[data-page="cloud-solutions"]) .author-thumb {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #F7B61B;
    }

    :where(html[data-page="cloud-solutions"]) .author-meta h4 {
      font-family: 'Manrope', sans-serif;
      font-size: 1rem;
      font-weight: 800;
      color: #0B2B57;
      margin-bottom: 2px;
    }

    :where(html[data-page="cloud-solutions"]) .author-meta span {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: #52677F;
    }

    /* ==========================================================================
       SECTION 09: FAQ (ACCORDION SYSTEM)
       ========================================================================== */
    :where(html[data-page="cloud-solutions"]) .faq-section {
      padding: 96px 0;
      background: #FFFDF8;
      border-top: 1px solid rgba(11, 43, 87, 0.06);
    }

    :where(html[data-page="cloud-solutions"]) .faq-top-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 44px;
      flex-wrap: wrap;
      gap: 20px;
    }

    :where(html[data-page="cloud-solutions"]) .faq-grid-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px 24px;
      align-items: start;
    }

    :where(html[data-page="cloud-solutions"]) .faq-col {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    :where(html[data-page="cloud-solutions"]) .faq-card {
      background: #FFFFFF;
      border: 1px solid rgba(11, 43, 87, 0.08);
      border-radius: 18px;
      box-shadow: 0 4px 14px rgba(11, 43, 87, 0.03);
      overflow: hidden;
      transition: all 0.24s ease;
      align-self: start;
      width: 100%;
    }

    :where(html[data-page="cloud-solutions"]) .faq-card.open {
      border-color: rgba(47, 139, 255, 0.35);
      background: #FBFDFF;
      box-shadow: 0 12px 28px rgba(11, 43, 87, 0.06);
    }

    :where(html[data-page="cloud-solutions"]) .faq-trigger {
      width: 100%;
      padding: 20px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      text-align: left;
      font-family: 'Manrope', sans-serif;
      font-size: 1rem;
      font-weight: 800;
      color: #0B2B57;
      cursor: pointer;
    }

    :where(html[data-page="cloud-solutions"]) .faq-trigger-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    :where(html[data-page="cloud-solutions"]) .faq-icon-box {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
    }

    :where(html[data-page="cloud-solutions"]) .faq-trigger i.ph-plus {
      font-size: 1.15rem;
      color: #2F8BFF;
      transition: transform 0.28s ease;
      flex-shrink: 0;
    }

    :where(html[data-page="cloud-solutions"]) .faq-card.open .faq-trigger i.ph-plus {
      transform: rotate(45deg);
    }

    :where(html[data-page="cloud-solutions"]) .faq-content {
      max-height: 0;
      overflow: hidden;
      padding: 0 22px;
      font-family: 'Inter', sans-serif;
      font-size: 14.5px;
      color: #52677F;
      line-height: 1.65;
      transition: all 0.28s ease;
      opacity: 0;
    }

    :where(html[data-page="cloud-solutions"]) .faq-card.open .faq-content {
      max-height: 300px;
      padding-bottom: 20px;
      opacity: 1;
    }

    /* ==========================================================================
    /* ==========================================================================
       SECTION 10: FINAL CTA (HIGH-CONVICTION BANNER)
       ========================================================================== */
    :where(html[data-page="cloud-solutions"]) .final-cta-section {
      padding: 64px 0 96px;
    }

    :where(html[data-page="cloud-solutions"]) .final-cta-box {
      background: radial-gradient(circle at 82% 40%, rgba(255, 197, 38, 0.16) 0%, transparent 45%),
                  radial-gradient(circle at 18% 70%, rgba(47, 139, 255, 0.18) 0%, transparent 48%),
                  linear-gradient(135deg, #0A2548 0%, #061830 100%);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 28px;
      padding: 60px 56px;
      position: relative;
      overflow: hidden;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      box-shadow: 0 24px 64px rgba(7, 37, 72, 0.32);
    }

    :where(html[data-page="cloud-solutions"]) .final-cta-copy {
      max-width: 620px;
      position: relative;
      z-index: 2;
    }

    :where(html[data-page="cloud-solutions"]) .final-cta-eyebrow {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #FFC526;
      margin-bottom: 14px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    :where(html[data-page="cloud-solutions"]) .final-cta-eyebrow-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #FFC526;
      box-shadow: 0 0 8px #FFC526;
    }

    :where(html[data-page="cloud-solutions"]) .final-cta-headline {
      font-family: 'Manrope', sans-serif !important;
      font-size: clamp(2.2rem, 3.4vw, 3rem) !important;
      font-weight: 800 !important;
      line-height: 1.12 !important;
      color: #FFFFFF !important;
      margin-bottom: 16px;
      letter-spacing: -0.035em !important;
    }

    :where(html[data-page="cloud-solutions"]) .final-cta-headline .cta-gold-text {
      color: #FFC526 !important;
      display: inline-block;
    }

    :where(html[data-page="cloud-solutions"]) .final-cta-desc {
      font-family: 'Inter', sans-serif;
      font-size: 17px;
      color: rgba(255, 255, 255, 0.86);
      line-height: 1.65;
      margin: 0;
      max-width: 540px;
    }

    :where(html[data-page="cloud-solutions"]) .final-cta-action-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      position: relative;
      z-index: 2;
      flex-shrink: 0;
    }

    :where(html[data-page="cloud-solutions"]) .final-cta-action-area .btn-gold {
      background: #FFC526;
      color: #102039;
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      font-weight: 800;
      padding: 16px 36px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      box-shadow: 0 12px 30px rgba(245, 169, 22, 0.35);
      transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    :where(html[data-page="cloud-solutions"]) .final-cta-action-area .btn-gold:hover {
      transform: translateY(-2px);
      background: #FFCF4D;
      box-shadow: 0 16px 38px rgba(245, 169, 22, 0.45);
    }

    :where(html[data-page="cloud-solutions"]) .final-cta-action-area .btn-gold:active {
      transform: translateY(0);
    }

    :where(html[data-page="cloud-solutions"]) .cta-subcopy {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.72);
      font-weight: 500;
    }

    :where(html[data-page="cloud-solutions"]) .final-cta-annotation {
      position: absolute;
      right: 36px;
      bottom: 14px;
      font-family: 'Caveat', cursive;
      font-size: 22px;
      font-weight: 700;
      color: #FFC526;
      pointer-events: none;
      user-select: none;
      transform: rotate(-2deg);
      z-index: 3;
    }

    @media (max-width: 768px) {
      :where(html[data-page="cloud-solutions"]) .final-cta-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 24px;
        gap: 28px;
      }
      :where(html[data-page="cloud-solutions"]) .final-cta-action-area {
        width: 100%;
        align-items: flex-start;
      }
      :where(html[data-page="cloud-solutions"]) .final-cta-action-area .btn-gold {
        width: 100%;
        justify-content: center;
      }
      :where(html[data-page="cloud-solutions"]) .final-cta-annotation {
        position: static;
        transform: none;
        margin-top: 4px;
      }
    }

    /* ==========================================================================
       RESPONSIVE BREAKPOINTS (DOWNSTREAM SYSTEM)
       ========================================================================== */
    @media (max-width: 1024px) {
      :where(html[data-page="cloud-solutions"]) .services-grid-wrapper {
        grid-template-columns: 1fr;
        gap: 36px;
      }
      :where(html[data-page="cloud-solutions"]) .services-copy {
        position: static;
      }
      :where(html[data-page="cloud-solutions"]) .service-bento-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      :where(html[data-page="cloud-solutions"]) .bento-card.card-span-7,:where(html[data-page="cloud-solutions"]) 
      .bento-card.card-span-5,:where(html[data-page="cloud-solutions"]) 
      .bento-card.card-span-6 {
        grid-column: span 1;
      }
      :where(html[data-page="cloud-solutions"]) .dark-panel-container {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 44px 32px;
      }
      :where(html[data-page="cloud-solutions"]) .dark-panel-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      :where(html[data-page="cloud-solutions"]) .dark-panel-left p {
        text-align: center;
        max-width: 520px;
      }
      :where(html[data-page="cloud-solutions"]) .dark-panel-right {
        border-left: none;
        padding-left: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding-top: 28px;
        width: 100%;
      }
      :where(html[data-page="cloud-solutions"]) .dark-metric-item {
        border-bottom: none;
        padding: 14px 18px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        justify-content: flex-start;
        text-align: left;
      }
      :where(html[data-page="cloud-solutions"]) .dark-metric-info {
        text-align: left;
      }
      :where(html[data-page="cloud-solutions"]) .process-steps-row {
        grid-template-columns: repeat(3, 1fr);
      }
      :where(html[data-page="cloud-solutions"]) .step-arrow-connector {
        display: none;
      }
      :where(html[data-page="cloud-solutions"]) .case-studies-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      :where(html[data-page="cloud-solutions"]) .tech-stack-grid {
        grid-template-columns: repeat(4, 1fr);
      }
      :where(html[data-page="cloud-solutions"]) .why-choose-grid {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="cloud-solutions"]) .faq-grid-2col {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="cloud-solutions"]) .final-cta-annotation {
        display: none;
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="cloud-solutions"]) .brands-logo-row {
        justify-content: center;
        gap: 18px 24px;
      }
      :where(html[data-page="cloud-solutions"]) .service-bento-grid {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="cloud-solutions"]) .dark-panel-container {
        padding: 32px 18px;
      }
      :where(html[data-page="cloud-solutions"]) .dark-panel-right {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      :where(html[data-page="cloud-solutions"]) .dark-metric-item {
        padding: 12px 16px;
        justify-content: flex-start;
      }
      :where(html[data-page="cloud-solutions"]) .process-steps-row {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="cloud-solutions"]) .case-studies-grid {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="cloud-solutions"]) .tech-stack-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      :where(html[data-page="cloud-solutions"]) .benefits-checklist-grid {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="cloud-solutions"]) .final-cta-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        padding: 40px 24px;
      }
      :where(html[data-page="cloud-solutions"]) .final-cta-action-area {
        width: 100%;
        align-items: flex-start;
      }
      :where(html[data-page="cloud-solutions"]) .final-cta-action-area .btn {
        width: 100%;
        justify-content: center;
      }
    }

    @media (max-width: 430px) {
      :where(html[data-page="cloud-solutions"]) .brands-box {
        padding: 20px 18px;
      }
      :where(html[data-page="cloud-solutions"]) .brand-logo-item {
        font-size: 1.1rem;
      }
      :where(html[data-page="cloud-solutions"]) .bento-card {
        padding: 20px 16px;
      }
      :where(html[data-page="cloud-solutions"]) .why-choose-card,:where(html[data-page="cloud-solutions"])  .testimonial-box {
        padding: 28px 20px;
      }
      :where(html[data-page="cloud-solutions"]) .benefits-checklist-grid {
        gap: 14px;
      }
      :where(html[data-page="cloud-solutions"]) .benefit-item {
        font-size: 14px;
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="cloud-solutions"]) .desktop-nav,:where(html[data-page="cloud-solutions"])  .header-actions .btn-navy {
        display: none;
      }
      :where(html[data-page="cloud-solutions"]) .mobile-menu-btn {
        display: block;
      }
      :where(html[data-page="cloud-solutions"]) .hero-cta-group {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 440px;
        gap: 10px;
        justify-content: center;
        margin-bottom: 32px;
      }
      :where(html[data-page="cloud-solutions"]) .hero-cta-group .btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 12px 10px;
        font-size: clamp(0.75rem, 3.2vw, 0.875rem);
        gap: 6px;
        white-space: nowrap;
        letter-spacing: -0.01em;
        justify-content: center;
      }
      :where(html[data-page="cloud-solutions"]) .service-cards-grid {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="cloud-solutions"]) .process-steps-row {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="cloud-solutions"]) .case-studies-grid {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="cloud-solutions"]) .tech-stack-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      :where(html[data-page="cloud-solutions"]) .benefits-checklist-grid {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="cloud-solutions"]) .final-cta-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        padding: 40px 24px;
      }
      :where(html[data-page="cloud-solutions"]) .final-cta-action-area {
        width: 100%;
        align-items: flex-start;
      }
      :where(html[data-page="cloud-solutions"]) .final-cta-action-area .btn {
        width: 100%;
      }
      :where(html[data-page="cloud-solutions"]) .footer-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 380px) {
      :where(html[data-page="cloud-solutions"]) .hero-cta-group {
        gap: 6px;
      }
      :where(html[data-page="cloud-solutions"]) .hero-cta-group .btn {
        padding: 11px 6px;
        font-size: 0.72rem;
        gap: 4px;
      }
    }
  
/* shared-chrome.css */
@scope (:where(html[data-page="cloud-solutions"]) .shared-kx-header,:where(html[data-page="cloud-solutions"])  .shared-kx-mobile-drawer,:where(html[data-page="cloud-solutions"])  .shared-site-footer) {
:scope { --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif; --container-max: 1240px; --color-yellow: #F8C72E; --color-primary-navy: #14243D; --transition: all .2s ease; font-family: var(--font-body, 'Plus Jakarta Sans', 'Inter', sans-serif); line-height: 1.5; }
:where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(a) { text-decoration: none; }



:scope {
  --kx-navy: #13243D;
  --kx-deep-navy: #0D1B31;
  --kx-secondary-navy: #1B3152;
  --kx-gold: #F9BE22;
  --kx-gold-hover: #FFCA3A;
  --kx-green: #00D084;
  --kx-cyan: #52BCEB;
  --kx-soft-cyan: #EAF8FF;
  --kx-soft-gold: #FFF8DD;
  --kx-soft-green: #E8F8F0;
  --kx-white: #FFFFFF;
  --kx-gray: #F4F6FA;
  --kx-pill-bg: #EDF3FA;
  --kx-border: #E8EDF4;
  --kx-border-subtle: #F1F4F9;
  --kx-text-dark: #13243D;
  --kx-text-muted: #65748B;
  --kx-radius-pill: 9999px;
  --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
}


:scope.shared-kx-header,
.shared-kx-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: 1px solid rgba(232, 237, 244, 0.8);
  transition: all 0.25s ease;
}

:scope.shared-kx-header.scrolled,
.shared-kx-header.scrolled {
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

:scope.shared-kx-header.menu-open,
.shared-kx-header.menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

.shared-kx-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .shared-kx-container {
    padding: 0 16px;
  }
}

.shared-kx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
}


.shared-kx-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0F1D32;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

.shared-kx-logo-tech {
  color: #00D084;
  font-weight: 800;
}


.shared-kx-nav-menu {
  display: flex;
  align-items: center;
  background: #EDF3FA;
  padding: 4px 6px;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(220, 230, 242, 0.85);
  box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
  flex-shrink: 1;
}

.shared-kx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shared-kx-nav-item {
  position: relative;
}

.shared-kx-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--kx-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-nav-link:hover {
  color: #0F1D32;
  background: rgba(255, 255, 255, 0.7);
}

.shared-kx-nav-link.active {
  color: #0F1D32 !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
}

.shared-kx-nav-link::after,
.shared-kx-nav-link.active::after {
  display: none !important;
}

.shared-kx-chevron-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  stroke: currentColor;
}


.shared-kx-dropdown-wrapper {
  position: relative;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper.open .shared-kx-chevron-icon {
  transform: rotate(180deg);
}

.shared-kx-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 250px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
  border: 1px solid var(--kx-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  pointer-events: none;
  z-index: 100;
}

/* Invisible hover bridge to eliminate the 8px cursor gap */
.shared-kx-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
  background: transparent;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper.open .shared-kx-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.shared-kx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #13243D;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.shared-kx-dropdown-item:hover {
  background: #F0F7FF;
  color: #0F1D32;
}


.shared-kx-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.shared-kx-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0F1D32;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-btn-pill-navy:hover {
  background: #1B2E4B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
}

.shared-kx-btn-pill-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F9BE22;
  color: #0F1D32;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
}

.shared-kx-btn-pill-gold:hover {
  background: #FFCA3A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
}

.shared-kx-btn-pill-navy:active,
.shared-kx-btn-pill-gold:active,
.kx-modal-submit:active {
  transform: translateY(0) scale(0.98);
}


.shared-kx-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0F1D32;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.shared-kx-mobile-toggle:hover {
  background: #EDF3FA;
}

@media (max-width: 1240px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-navy {
    display: none;
  }
}

@media (max-width: 1100px) {
  .shared-kx-nav-menu {
    display: none;
  }

  .shared-kx-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .shared-kx-nav-inner {
    height: 70px;
    gap: 8px;
  }
  .shared-kx-logo {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .shared-kx-logo {
    font-size: 18px;
  }
  .shared-kx-nav-actions {
    gap: 6px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 7px 11px;
    font-size: 11.5px;
    gap: 4px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold svg {
    display: none;
  }
  .shared-kx-mobile-toggle {
    padding: 6px;
  }
}

@media (max-width: 360px) {
  .shared-kx-container {
    padding: 0 6px;
  }
  .shared-kx-nav-inner {
    gap: 2px;
  }
  .shared-kx-logo {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  .shared-kx-nav-actions {
    gap: 2px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 5px 6px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  .shared-kx-mobile-toggle {
    padding: 2px;
  }
}


:scope.shared-kx-mobile-drawer,
.shared-kx-mobile-drawer {
  position: fixed;
  top: var(--header-height, 78px);
  left: 0;
  width: 100%;
  height: calc(100dvh - var(--header-height, 78px));
  background: #FFFFFF !important;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 40px rgba(19, 36, 61, 0.12);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :scope.shared-kx-mobile-drawer,
  .shared-kx-mobile-drawer {
    top: var(--header-height, 70px);
    height: calc(100dvh - var(--header-height, 70px));
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

:scope.shared-kx-mobile-drawer.open,
:scope.shared-kx-mobile-drawer.active,
.shared-kx-mobile-drawer.open,
.shared-kx-mobile-drawer.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  pointer-events: auto;
}

.shared-kx-mobile-nav-link {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 650;
  color: #14243D;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 12px;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.shared-kx-mobile-nav-link:hover {
  background: #F8FAFC;
  color: #0E1B2F;
}

.shared-kx-mobile-nav-link.active {
  background: #F4F7FB !important;
  color: #0E1B2F !important;
  font-weight: 750 !important;
  border-left: 3px solid #F8C72E;
  padding-left: 13px;
}

.shared-kx-mobile-nav-link.shared-sub {
  margin-left: 12px;
  margin-right: 4px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 550;
  color: #556987;
  background: #F8FAFC;
  border-radius: 10px;
  border-left: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.shared-kx-mobile-nav-link.shared-sub::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94A3B8;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.shared-kx-mobile-nav-link.shared-sub:hover,
.shared-kx-mobile-nav-link.shared-sub.active {
  background: #EDF4FB;
  color: #0E1B2F;
  border-left-color: #F8C72E;
}

.shared-kx-mobile-nav-link.shared-sub.active::before {
  background: #F8C72E;
  transform: scale(1.4);
}

.shared-kx-mobile-drawer-footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #EEF2F6;
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-gold {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(248, 199, 46, 0.3);
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-navy {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
  border-radius: 9999px;
}


.kx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 49, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  padding: 20px;
}

.kx-modal-overlay.active,
.kx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.kx-modal-dialog {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
  border: 1px solid var(--kx-border);
  overflow: hidden;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.kx-modal-overlay.active .kx-modal-dialog,
.kx-modal-overlay.is-open .kx-modal-dialog {
  transform: scale(1) translateY(0);
}

.kx-modal-header {
  padding: 28px 32px 16px;
  position: relative;
}

.kx-modal-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--kx-navy);
  margin: 0 0 6px;
}

.kx-modal-subtitle {
  font-size: 14px;
  color: var(--kx-text-muted);
  margin: 0;
}

.kx-modal-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--kx-gray);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-navy);
  transition: background 0.2s ease, transform 0.2s ease;
}

.kx-modal-close:hover {
  background: #E2E8F0;
  transform: rotate(90deg);
}

.kx-modal-body {
  padding: 0 32px 32px;
}

.kx-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx-form-label {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kx-navy);
}

.kx-form-input,
.kx-form-textarea,
.kx-form-select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--kx-border);
  background: var(--kx-gray);
  color: var(--kx-navy);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.kx-form-input:focus,
.kx-form-textarea:focus,
.kx-form-select:focus {
  outline: none;
  border-color: var(--kx-navy);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
}

.kx-modal-submit {
  background: var(--kx-navy);
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.kx-modal-submit:hover {
  background: var(--kx-deep-navy);
  transform: translateY(-1px);
}


:scope.shared-site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
  position: relative;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

:scope.shared-site-footer .shared-container,
:scope.shared-site-footer .shared-kx-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

.shared-footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand {
  min-width: 0;
}

.shared-footer-brand .shared-brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand .shared-brand-logo .shared-dot {
  color: #2FB7A7;
}

.shared-footer-brand p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  max-width: 290px;
}

.shared-footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.shared-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.shared-footer-links a {
  font-size: 0.835rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.shared-footer-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

.shared-footer-follow-wrapper {
  margin-top: 24px;
}

.shared-footer-follow-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.shared-footer-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.shared-social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  text-decoration: none;
  transition: var(--transition);
}

.shared-social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

.shared-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  flex-wrap: wrap;
  gap: 12px;
}


@media (max-width: 1180px) {
  .nav-link {
    padding: 6px 9px;
    font-size: 0.82rem;
  }
  .btn-nav-phone {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}


@media (max-width: 1024px) {
  :scope {
    --header-height: 66px;
  }
  .nav-menu-wrapper,
  .btn-phone-desktop {
    display: none !important;
  }
  .hamburger-btn {
    display: flex !important;
  }
  .btn-cta-desktop {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .shared-footer-brand p {
    max-width: 100%;
  }
}


@media (max-width: 768px) {
  :scope {
    --header-height: 62px;
  }
  .btn-cta-desktop {
    display: none !important;
  }
  .shared-site-footer {
    padding: 46px 0 24px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding-bottom: 28px;
  }
}


@media (max-width: 540px) {
  :scope {
    --header-height: 58px;
  }
  .nav-container {
    padding: 0 14px;
  }
  .hamburger-btn {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  .hamburger-btn span {
    width: 20px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
  }
  .shared-footer-col-company {
    grid-column: 1;
  }
  .shared-footer-col-solutions {
    grid-column: 2;
  }
  .shared-footer-col-resources {
    grid-column: 1 / -1;
  }
  .shared-footer-col h5 {
    margin-bottom: 12px;
  }
  .shared-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


@media (max-width: 360px) {
  .shared-brand-logo {
    font-size: 1.15rem;
  }
  .mobile-nav-drawer {
    width: 90vw;
    padding: 18px 14px 22px;
  }
  .mobile-nav-link {
    font-size: 0.95rem;
  }
}
  
}
:where(html[data-page="cloud-solutions"]) .shared-kx-mobile-drawer { visibility: hidden; }
:where(html[data-page="cloud-solutions"]) .shared-kx-mobile-drawer.open { visibility: visible; }
:where(html[data-page="cloud-solutions"]) .shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="cloud-solutions"]) .shared-kx-btn-pill-navy:active,:where(html[data-page="cloud-solutions"]) 
  .shared-kx-btn-pill-gold:active,:where(html[data-page="cloud-solutions"]) 
  .kx-modal-submit:active { transform: none; }
}

/* page-upgrades.css */
:where(html[data-page="cloud-solutions"]) body.rv-upgraded { --rv-navy:#102039; --rv-muted:#5e748f; --rv-gold:#f5a916; --rv-cream:#fbf7ef; font-family:'Plus Jakarta Sans','Inter',sans-serif; background:var(--rv-cream); }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-container { width:calc(100% - 80px); max-width:1240px; margin-inline:auto; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-section { scroll-margin-top:96px; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities) { padding-top:80px; padding-bottom:80px; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-section h2 { font-family:'Outfit','Plus Jakarta Sans',sans-serif!important; font-weight:800!important; font-size:clamp(30px,3.1vw,42px)!important; line-height:1.16!important; letter-spacing:-.04em!important; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-section h3 { font-family:'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.025em; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-section p { line-height:1.7; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-section[data-rv-surface="light"] { background:#fffdf8!important; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-section[data-rv-surface="light"]:nth-of-type(even) { background:#fff!important; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-section[data-rv-surface="light"] h2 { color:#102039; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-section :is(input,select,textarea) { border-radius:12px; font-family:'Plus Jakarta Sans','Inter',sans-serif; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded :is(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #21877b; outline-offset:4px; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-hero { background-color:#fbf7ef; background-image:radial-gradient(#d9d7cc .7px,transparent .7px); background-size:24px 24px; padding:44px 0 54px; border-bottom:1px solid #e9e6de; position:relative; overflow:hidden; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-hero-copy { min-width:0; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-eyebrow { display:flex; align-items:center; gap:9px; font:700 11px/1.4 'Plus Jakarta Sans','Inter',sans-serif; text-transform:uppercase; letter-spacing:.14em; color:#315373; margin:0 0 16px; }
:where(html[data-page="cloud-solutions"]) .rv-eyebrow > span { width:7px; height:7px; border-radius:50%; background:#f5a916; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-hero h1 { font-family:'Outfit','Plus Jakarta Sans',sans-serif!important; font-size:clamp(40px,4.1vw,58px)!important; line-height:1.09!important; font-weight:800!important; letter-spacing:-.05em!important; color:#102039!important; margin:0 0 20px!important; max-width:100%; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-hero h1 em { font-style:normal; color:#c88409; text-decoration:underline; text-decoration-color:#f5a916; text-decoration-thickness:3px; text-underline-offset:8px; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-description { color:#5e748f; font:400 17px/1.75 'Plus Jakarta Sans','Inter',sans-serif; max-width:560px; margin:0 0 26px; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-actions { display:flex; gap:12px; flex-wrap:wrap; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-button { display:inline-flex; justify-content:center; align-items:center; gap:14px; padding:15px 21px; min-height:52px; border-radius:999px; font:700 13px/1.4 'Plus Jakarta Sans','Inter',sans-serif; text-decoration:none; color:#102039; border:1px solid #e2e7ee; transition:background .2s,transform .2s; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-button-primary { background:#ffc526; border-color:#ffc526; box-shadow:0 8px 20px #f5a91620; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-button-secondary { background:#fff; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-button:hover { transform:translateY(-2px); background:#fff0bd; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-button i { font-size:18px; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-hero-art { min-width:0; position:relative; padding:0; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-note { font:600 24px/1.15 Caveat,cursive; color:#315373; text-align:right; margin:14px 12px 0 0; transform:rotate(-3deg); }
:where(html[data-page="cloud-solutions"]) .rv-note svg { display:inline-block; width:50px; height:28px; vertical-align:middle; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-pastel-0 { background:#fff2cb; color:#a97007; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-pastel-1 { background:#def7ee; color:#187d6b; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-pastel-2 { background:#e5efff; color:#2867c7; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-pastel-3 { background:#fbe4ef; color:#b83c73; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-pastel-4 { background:#ede5fc; color:#7250b2; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-icon { width:56px; height:56px; flex-shrink:0; display:grid; place-items:center; border-radius:18px; font-size:27px; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-capabilities { padding:46px 0 54px; background:#fff; border-bottom:1px solid #e9edf0; }
:where(html[data-page="cloud-solutions"]) .rv-capabilities .rv-eyebrow { margin-bottom:14px; }
:where(html[data-page="cloud-solutions"]) .rv-capabilities h2 { max-width:1000px; color:#102039; margin:0 0 32px; }
:where(html[data-page="cloud-solutions"]) .rv-capability-grid { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); gap:26px; }
:where(html[data-page="cloud-solutions"]) .rv-capability { display:flex; align-items:flex-start; gap:15px; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-capability h3 { font-size:16px; line-height:1.3; color:#102039; margin:0 0 8px; }
:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-capability p { font:400 13px/1.6 'Plus Jakarta Sans','Inter',sans-serif; color:#5e748f; margin:0; }
:where(html[data-page="cloud-solutions"]) .rv-orbit { position:relative; width:100%; max-width:510px; aspect-ratio:1.12; margin:auto; }
:where(html[data-page="cloud-solutions"]) .rv-orbit-ring { position:absolute; width:70%; height:76%; top:12%; left:15%; border:1.5px solid #e9b448; border-radius:50%; }
:where(html[data-page="cloud-solutions"]) .rv-orbit-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:37%; aspect-ratio:1; border-radius:50%; background:#102039; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font:800 24px/1.15 'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.04em; box-shadow:0 12px 30px #10203915; text-align:center; }
:where(html[data-page="cloud-solutions"]) .rv-orbit-core span { color:#26b794; font-size:22px; }
:where(html[data-page="cloud-solutions"]) .rv-orbit-node { position:absolute; left:calc(50% + cos(calc(var(--i)*360deg/var(--count) - 90deg))*37%); top:calc(50% + sin(calc(var(--i)*360deg/var(--count) - 90deg))*37%); transform:translate(-50%,-50%); width:25%; aspect-ratio:1; border:3px solid #fff; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; box-shadow:0 6px 22px #10203906; }
:where(html[data-page="cloud-solutions"]) .rv-orbit-node i { font-size:32px; }:where(html[data-page="cloud-solutions"]) .rv-orbit-node strong { font:700 12px/1.3 'Plus Jakarta Sans','Inter',sans-serif; color:#102039; text-align:center; }
:where(html[data-page="cloud-solutions"]) .rv-orbit-4 .rv-orbit-node { left:calc(50% + cos(calc(var(--i)*90deg - 135deg))*43%); top:calc(50% + sin(calc(var(--i)*90deg - 135deg))*43%); }
:where(html[data-page="cloud-solutions"]) .rv-career-panels { display:flex; align-items:center; gap:14px; padding:24px 8px; min-height:385px; }
:where(html[data-page="cloud-solutions"]) .rv-career-panel { flex:1; min-width:0; height:320px; border-radius:18px; padding:30px 18px; display:flex; flex-direction:column; justify-content:center; gap:25px; transform:rotate(-4deg); }
:where(html[data-page="cloud-solutions"]) .rv-career-panel:nth-child(2){transform:translateY(-22px) rotate(3deg)}:where(html[data-page="cloud-solutions"]) .rv-career-panel:nth-child(3){transform:rotate(-3deg)}
:where(html[data-page="cloud-solutions"]) .rv-career-panel i { font-size:48px; }:where(html[data-page="cloud-solutions"]) .rv-career-panel strong { font:800 clamp(25px,2.5vw,36px)/1 'Outfit','Plus Jakarta Sans',sans-serif; color:#102039; letter-spacing:-.04em; }:where(html[data-page="cloud-solutions"]) .rv-career-panel span { font:500 11px/1.6 'Plus Jakarta Sans','Inter',sans-serif; text-transform:uppercase; letter-spacing:.08em; color:#5e748f; }
:where(html[data-page="cloud-solutions"]) .rv-roadmap { background:#fff; border:1px solid #e8e9e6; padding:30px; border-radius:24px; box-shadow:0 16px 40px #10203908; }
:where(html[data-page="cloud-solutions"]) .rv-small-label { font:700 10px/1.4 'Plus Jakarta Sans','Inter',sans-serif!important; text-transform:uppercase; letter-spacing:.13em; color:#315373; margin:0 0 26px!important; }
:where(html[data-page="cloud-solutions"]) .rv-roadmap-step { display:flex; gap:20px; padding:16px 0; }:where(html[data-page="cloud-solutions"]) .rv-roadmap-step .rv-icon { width:70px;height:70px;border-radius:50%;font-size:34px; }
:where(html[data-page="cloud-solutions"]) .rv-roadmap-step small { font:700 12px 'Plus Jakarta Sans','Inter',sans-serif; color:#178575; }:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-roadmap-step h3 { font:800 21px/1.2 'Outfit','Plus Jakarta Sans',sans-serif; color:#102039; margin:6px 0; }:where(html[data-page="cloud-solutions"]) .rv-roadmap-step p { color:#5e748f; font-size:13px; margin:0; }
:where(html[data-page="cloud-solutions"]) .rv-art-conversation-roadmap > .rv-note,:where(html[data-page="cloud-solutions"]) .rv-art-cloud-architecture > .rv-note,:where(html[data-page="cloud-solutions"]) .rv-art-search-visibility > .rv-note { margin:0 12px 18px; }
:where(html[data-page="cloud-solutions"]) .rv-devices { min-height:410px; padding:20px 50px 20px 0; position:relative; }
:where(html[data-page="cloud-solutions"]) .rv-browser { border:5px solid #16334d; border-radius:17px; overflow:hidden; background:#fffdf8; box-shadow:0 18px 25px #10203920; }
:where(html[data-page="cloud-solutions"]) .rv-browser-bar { height:24px; display:flex; gap:6px; align-items:center; padding:0 12px; background:#16334d; }:where(html[data-page="cloud-solutions"]) .rv-browser-bar b { width:7px;height:7px;border-radius:50%;background:#ffcd38; }:where(html[data-page="cloud-solutions"]) .rv-browser-bar b:first-child{background:#ed7880}:where(html[data-page="cloud-solutions"]) .rv-browser-bar b:last-child{background:#24b7a8}
:where(html[data-page="cloud-solutions"]) .rv-browser-content { min-height:310px; padding:23px; position:relative; overflow:hidden; }:where(html[data-page="cloud-solutions"]) .rv-mock-brand { display:block;font:800 17px 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039; margin-bottom:26px; }:where(html[data-page="cloud-solutions"]) .rv-browser-content small { display:block;font:700 8px 'Plus Jakarta Sans','Inter',sans-serif;text-transform:uppercase;letter-spacing:.15em;color:#476780;margin-bottom:14px; }:where(html[data-page="cloud-solutions"]) .rv-browser-content strong { display:block;font:800 29px/1.13 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;letter-spacing:-.04em;position:relative;z-index:1; }:where(html[data-page="cloud-solutions"]) .rv-browser-content p { font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;max-width:210px;color:#5e748f;margin:15px 0; }:where(html[data-page="cloud-solutions"]) .rv-mock-button { display:inline-block;padding:10px 17px;background:#ffca32;color:#102039;border-radius:999px;font:700 10px 'Plus Jakarta Sans','Inter',sans-serif;position:relative;z-index:1; }
:where(html[data-page="cloud-solutions"]) .rv-shapes { width:180px;height:160px;position:absolute;bottom:-15px;right:-20px;pointer-events:none; }:where(html[data-page="cloud-solutions"]) .rv-shapes b { position:absolute; }:where(html[data-page="cloud-solutions"]) .rv-shapes b:nth-child(1){width:110px;height:110px;border-radius:100% 0 0 0;background:#25b09e;right:0;bottom:0}:where(html[data-page="cloud-solutions"]) .rv-shapes b:nth-child(2){width:140px;height:140px;border-radius:100% 0 0 0;background:#f6e8c6;right:0;bottom:0;z-index:-1}:where(html[data-page="cloud-solutions"]) .rv-shapes b:nth-child(3){width:65px;height:65px;border-radius:50%;background:#ffce3a;left:0;top:0}
:where(html[data-page="cloud-solutions"]) .rv-mini-phone { position:absolute;bottom:0;right:0;width:145px;height:278px;padding:30px 13px 15px;border:7px solid #132b44;border-radius:26px;background:#fffdf8;box-shadow:0 14px 24px #10203920;overflow:hidden; }:where(html[data-page="cloud-solutions"]) .rv-mini-phone>b { position:absolute;top:4px;left:35%;width:30%;height:8px;border-radius:10px;background:#132b44; }:where(html[data-page="cloud-solutions"]) .rv-mini-phone>span:not(.rv-mock-button) { font:800 12px 'Outfit','Plus Jakarta Sans',sans-serif; }:where(html[data-page="cloud-solutions"]) .rv-mini-phone>strong { display:block;font:800 20px/1.12 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;margin:30px 0 20px; }:where(html[data-page="cloud-solutions"]) .rv-mini-phone .rv-shapes { transform:scale(.6);transform-origin:bottom right; }:where(html[data-page="cloud-solutions"]) .rv-mini-phone .rv-mock-button {font-size:8px;padding:8px 10px}
:where(html[data-page="cloud-solutions"]) .rv-flow { display:grid;grid-template-columns:1fr 1fr 1.2fr;align-items:center;gap:16px;min-height:340px;position:relative; }:where(html[data-page="cloud-solutions"]) .rv-flow::before {content:'';position:absolute;left:15%;right:15%;top:50%;height:2px;background:#f5a916;z-index:0}:where(html[data-page="cloud-solutions"]) .rv-flow-input { position:relative;background:#fff;border:1px solid #e2e7ee;border-radius:18px;padding:18px 10px;text-align:center; }:where(html[data-page="cloud-solutions"]) .rv-flow-input i {font-size:28px;color:#1da891;display:block;margin-bottom:10px}:where(html[data-page="cloud-solutions"]) .rv-flow-input strong {display:block;font-size:12px;color:#102039}:where(html[data-page="cloud-solutions"]) .rv-flow-input span {font-size:9px;color:#5e748f;display:block;margin-top:6px}:where(html[data-page="cloud-solutions"]) .rv-flow-core { position:relative;aspect-ratio:1;border-radius:50%;background:#102039;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;box-shadow:0 0 0 10px #e7eff7; }:where(html[data-page="cloud-solutions"]) .rv-flow-core i {font-size:34px}:where(html[data-page="cloud-solutions"]) .rv-flow-core strong {font-size:11px;line-height:1.4}:where(html[data-page="cloud-solutions"]) .rv-flow-outputs {display:flex;flex-direction:column;gap:24px;position:relative}:where(html[data-page="cloud-solutions"]) .rv-flow-outputs>div {padding:16px 12px;background:#fff;border:1px solid #e2e7ee;border-radius:999px;font-size:11px;display:flex;align-items:center;gap:10px;color:#102039}:where(html[data-page="cloud-solutions"]) .rv-flow-outputs i {font-size:23px;color:#248978}
:where(html[data-page="cloud-solutions"]) .rv-cloud {background:#102c46;color:#fff;padding:34px;border-radius:26px;box-shadow:0 18px 30px #10203915}:where(html[data-page="cloud-solutions"]) .rv-cloud-icon {text-align:center;font-size:100px;line-height:1}:where(html[data-page="cloud-solutions"]) .rv-cloud-branches{height:42px;border:2px solid #ffcc31;border-bottom:0;border-radius:18px 18px 0 0;margin:12px 14% 0;position:relative}:where(html[data-page="cloud-solutions"]) .rv-cloud-branches::after{content:'';position:absolute;left:50%;height:54px;top:-14px;border-left:2px solid #ffcc31}:where(html[data-page="cloud-solutions"]) .rv-server-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}:where(html[data-page="cloud-solutions"]) .rv-server{border:1px solid #88adc7;border-radius:8px;height:34px;display:flex;gap:5px;align-items:center;padding:10px;margin-bottom:4px}:where(html[data-page="cloud-solutions"]) .rv-server b{width:6px;height:6px;border-radius:50%;background:#21d2b1}:where(html[data-page="cloud-solutions"]) .rv-server span{width:24px;height:3px;background:#41637e;margin-left:4px}:where(html[data-page="cloud-solutions"]) .rv-server-grid strong{display:block;text-align:center;font-size:14px;margin-top:16px;color:white}
:where(html[data-page="cloud-solutions"]) .rv-app-phones {position:relative;min-height:430px;display:flex;justify-content:center;align-items:center;padding:10px 20px}:where(html[data-page="cloud-solutions"]) .rv-app-phone{position:relative;width:47%;height:390px;border:7px solid #132b44;border-radius:31px;background:#fffdf8;padding:36px 18px 20px;overflow:hidden;box-shadow:0 18px 25px #10203920;transform:rotate(-7deg)}:where(html[data-page="cloud-solutions"]) .rv-app-phone+.rv-app-phone{transform:rotate(7deg) translateY(16px);margin-left:-10px}:where(html[data-page="cloud-solutions"]) .rv-phone-notch{position:absolute;top:-1px;left:28%;width:44%;height:15px;border-radius:0 0 12px 12px;background:#132b44}:where(html[data-page="cloud-solutions"]) .rv-app-phone small{font:800 10px 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;white-space:nowrap}:where(html[data-page="cloud-solutions"]) .rv-app-phone small span{color:#1aac90}:where(html[data-page="cloud-solutions"]) .rv-app-phone>strong{font:800 29px/1.1 'Outfit','Plus Jakarta Sans',sans-serif;display:block;color:#102039;margin:36px 0 20px;letter-spacing:-.04em}:where(html[data-page="cloud-solutions"]) .rv-app-phone p{font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;color:#5e748f;margin-bottom:18px}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-app-phone h3{font:800 17px/1.2 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;margin:12px 0}:where(html[data-page="cloud-solutions"]) .rv-phone-row{display:flex;align-items:center;gap:10px;padding:14px 5px;border-bottom:1px solid #e2e7ee;font:600 11px 'Plus Jakarta Sans','Inter',sans-serif;color:#102039}:where(html[data-page="cloud-solutions"]) .rv-phone-row i{font-size:23px;color:#24a694}:where(html[data-page="cloud-solutions"]) .rv-app-phone .rv-shapes{transform:scale(.8);transform-origin:bottom right}:where(html[data-page="cloud-solutions"]) .rv-platforms{text-align:center;color:#315373;font-size:12px!important;margin-top:22px}:where(html[data-page="cloud-solutions"]) .rv-platforms i{font-size:18px;margin-left:12px}:where(html[data-page="cloud-solutions"]) .rv-platforms span{margin-left:14px;color:#afbac6}
:where(html[data-page="cloud-solutions"]) .rv-search {padding:28px;background:#fff;border:1px solid #e2e7ee;border-radius:24px;box-shadow:0 18px 35px #1020390c}:where(html[data-page="cloud-solutions"]) .rv-search-field{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid #e2e7ee;border-radius:999px;color:#102039;font-size:13px}:where(html[data-page="cloud-solutions"]) .rv-search-field i{font-size:21px}:where(html[data-page="cloud-solutions"]) .rv-search-result{padding:28px 8px}:where(html[data-page="cloud-solutions"]) .rv-search-result small{display:block;color:#71859b;font-size:10px;margin-bottom:14px}:where(html[data-page="cloud-solutions"]) .rv-search-result strong{display:block;color:#2761b7;font:700 22px 'Outfit','Plus Jakarta Sans',sans-serif;margin-bottom:18px}:where(html[data-page="cloud-solutions"]) .rv-search-result>span{display:block;height:9px;border-radius:5px;background:#e0e8f1;margin-top:8px}:where(html[data-page="cloud-solutions"]) .rv-search-result>span:last-child{width:80%}:where(html[data-page="cloud-solutions"]) .rv-trend{display:block;width:100%;height:auto;overflow:visible}:where(html[data-page="cloud-solutions"]) .rv-illustration-label{font:400 10px/1.5 'Plus Jakarta Sans','Inter',sans-serif!important;color:#71859b;margin-top:14px;text-align:center}
:where(html[data-page="cloud-solutions"]) .rv-funnel {display:flex;align-items:center;flex-direction:column;gap:12px;padding:0 24px}:where(html[data-page="cloud-solutions"]) .rv-funnel-brand{width:92px;height:92px;border-radius:50%;background:#102039;color:#fff;display:grid;place-content:center;font:800 18px/1.15 'Outfit','Plus Jakarta Sans',sans-serif;text-align:center;margin-bottom:4px}:where(html[data-page="cloud-solutions"]) .rv-funnel-step{display:flex;align-items:center;gap:20px;padding:24px 28px;border-radius:22px;width:100%;}:where(html[data-page="cloud-solutions"]) .rv-funnel-step:nth-child(3){width:90%}:where(html[data-page="cloud-solutions"]) .rv-funnel-step:nth-child(4){width:80%}:where(html[data-page="cloud-solutions"]) .rv-funnel-step>i{font-size:38px;color:#102039}:where(html[data-page="cloud-solutions"]) .rv-funnel-step strong{font:700 14px/1.3 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039}:where(html[data-page="cloud-solutions"]) .rv-funnel-step p{font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;color:#5e748f;margin:8px 0 0}
:where(html[data-page="cloud-solutions"]) .rv-media-fallback {display:flex!important;align-items:center;justify-content:center;flex-direction:column;gap:16px;min-height:140px;padding:30px;background:#eef4f2;color:#315373;border-radius:inherit;text-align:center;font:600 13px/1.5 'Plus Jakarta Sans','Inter',sans-serif}:where(html[data-page="cloud-solutions"]) .rv-media-fallback i{font-size:38px;color:#28a595}:where(html[data-page="cloud-solutions"]) .rv-media-fallback.rv-avatar{width:48px;height:48px;min-height:0;padding:0;border-radius:50%;font-size:14px}:where(html[data-page="cloud-solutions"]) .rv-media-fallback small{font-size:10px;color:#5e748f;text-transform:uppercase;letter-spacing:.1em}
@media(min-width:1400px){:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-hero{padding-top:48px;padding-bottom:58px}}
@media(max-width:1100px){:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-hero-grid{gap:32px}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-container{width:calc(100% - 48px)}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-hero h1{font-size:46px!important}:where(html[data-page="cloud-solutions"]) .rv-career-panel{padding:24px 12px}:where(html[data-page="cloud-solutions"]) .rv-flow{gap:10px}:where(html[data-page="cloud-solutions"]) .rv-app-phone{padding-inline:12px}:where(html[data-page="cloud-solutions"]) .rv-app-phone>strong{font-size:26px}:where(html[data-page="cloud-solutions"]) .rv-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-hero-grid{grid-template-columns:1fr;gap:30px}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-hero{padding:36px 0 44px}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-hero-copy{max-width:660px}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-hero-art{width:100%;max-width:580px;margin:auto}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-hero h1{font-size:clamp(38px,6vw,54px)!important}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities){padding-block:56px}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-description{max-width:640px}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-capabilities{padding-block:40px}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-section h2{font-size:34px!important}}
@media(max-width:540px){:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-container{width:calc(100% - 40px)}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-hero h1{font-size:38px!important;line-height:1.12!important}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-description{font-size:15px}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-eyebrow{font-size:10px;margin-bottom:20px}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-button{font-size:12px;min-height:48px;padding:13px 17px}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-actions{gap:10px}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-hero-art{padding-top:0}:where(html[data-page="cloud-solutions"]) .rv-capability-grid{grid-template-columns:1fr;gap:24px}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-section h2{font-size:29px!important}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-note{font-size:22px}:where(html[data-page="cloud-solutions"]) .rv-orbit-core{font-size:19px}:where(html[data-page="cloud-solutions"]) .rv-orbit-core span{font-size:16px}:where(html[data-page="cloud-solutions"]) .rv-orbit-node i{font-size:24px}:where(html[data-page="cloud-solutions"]) .rv-orbit-node strong{font-size:9px}:where(html[data-page="cloud-solutions"]) .rv-orbit-node{gap:5px}:where(html[data-page="cloud-solutions"]) .rv-career-panels{min-height:290px;padding:20px 2px;gap:9px}:where(html[data-page="cloud-solutions"]) .rv-career-panel{height:240px;padding:20px 12px;gap:20px}:where(html[data-page="cloud-solutions"]) .rv-career-panel strong{font-size:25px}:where(html[data-page="cloud-solutions"]) .rv-career-panel span{font-size:9px}:where(html[data-page="cloud-solutions"]) .rv-career-panel i{font-size:36px}:where(html[data-page="cloud-solutions"]) .rv-roadmap{padding:20px}:where(html[data-page="cloud-solutions"]) .rv-roadmap-step{gap:14px}:where(html[data-page="cloud-solutions"]) .rv-roadmap-step .rv-icon{width:48px;height:48px;font-size:26px}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-roadmap-step h3{font-size:19px}:where(html[data-page="cloud-solutions"]) .rv-devices{min-height:350px;padding-right:30px}:where(html[data-page="cloud-solutions"]) .rv-browser-content{padding:16px;min-height:280px}:where(html[data-page="cloud-solutions"]) .rv-browser-content strong{font-size:25px}:where(html[data-page="cloud-solutions"]) .rv-browser-content p{max-width:160px}:where(html[data-page="cloud-solutions"]) .rv-mini-phone{width:110px;height:225px;border-width:5px;padding:24px 10px 10px}:where(html[data-page="cloud-solutions"]) .rv-mini-phone>strong{font-size:17px;margin:22px 0 14px}:where(html[data-page="cloud-solutions"]) .rv-browser-content .rv-shapes{transform:scale(.7);transform-origin:bottom right}:where(html[data-page="cloud-solutions"]) .rv-flow{grid-template-columns:1fr 1fr;gap:24px;min-height:300px}:where(html[data-page="cloud-solutions"]) .rv-flow-input{grid-column:1;grid-row:1}:where(html[data-page="cloud-solutions"]) .rv-flow-core{grid-column:2;grid-row:1;width:120px;justify-self:center}:where(html[data-page="cloud-solutions"]) .rv-flow-outputs{grid-column:1/-1;flex-direction:row;gap:8px}:where(html[data-page="cloud-solutions"]) .rv-flow-outputs>div{flex:1;flex-direction:column;text-align:center;padding:15px 8px;border-radius:16px;font-size:10px}:where(html[data-page="cloud-solutions"]) .rv-flow::before{top:25%}:where(html[data-page="cloud-solutions"]) .rv-cloud{padding:24px 20px}:where(html[data-page="cloud-solutions"]) .rv-cloud-icon{font-size:80px}:where(html[data-page="cloud-solutions"]) .rv-server-grid{gap:12px}:where(html[data-page="cloud-solutions"]) .rv-server{padding:6px;height:28px}:where(html[data-page="cloud-solutions"]) .rv-server-grid strong{font-size:11px}:where(html[data-page="cloud-solutions"]) .rv-server span{width:13px}:where(html[data-page="cloud-solutions"]) .rv-app-phones{padding:10px 4px;min-height:350px}:where(html[data-page="cloud-solutions"]) .rv-app-phone{height:320px;border-width:5px;border-radius:25px;padding:25px 12px 15px;width:49%}:where(html[data-page="cloud-solutions"]) .rv-app-phone>strong{font-size:23px;margin:26px 0 16px}:where(html[data-page="cloud-solutions"]) .rv-app-phone small{font-size:8px}:where(html[data-page="cloud-solutions"]) .rv-app-phone p{font-size:9px}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-app-phone h3{font-size:14px}:where(html[data-page="cloud-solutions"]) .rv-phone-row{font-size:10px;padding:11px 2px;gap:7px}:where(html[data-page="cloud-solutions"]) .rv-app-phone .rv-shapes{transform:scale(.6)}:where(html[data-page="cloud-solutions"]) .rv-app-phone .rv-mock-button{font-size:9px;padding:9px 12px}:where(html[data-page="cloud-solutions"]) .rv-search{padding:22px}:where(html[data-page="cloud-solutions"]) .rv-search-field{font-size:11px;padding:12px}:where(html[data-page="cloud-solutions"]) .rv-search-result strong{font-size:19px}:where(html[data-page="cloud-solutions"]) .rv-funnel{padding:0 6px}:where(html[data-page="cloud-solutions"]) .rv-funnel-step{padding:19px 20px;gap:14px}:where(html[data-page="cloud-solutions"]) .rv-funnel-step>i{font-size:29px}:where(html[data-page="cloud-solutions"]) .rv-funnel-step strong{font-size:12px}:where(html[data-page="cloud-solutions"]) .rv-funnel-step p{font-size:10px}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities){padding-block:44px}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-button{transition:none}:where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-button:hover{transform:none}}
@media(max-width:600px){
  :where(html[data-page="cloud-solutions"]) .rv-upgraded .featured-header-row { flex-wrap:wrap; gap:14px; }
  :where(html[data-page="cloud-solutions"]) .rv-upgraded #client-stories .container > div:first-child { flex-wrap:wrap; gap:20px; }
  :where(html[data-page="cloud-solutions"]) .rv-upgraded #client-stories .container > div:first-child > div { min-width:0; max-width:100%; flex-wrap:wrap; }
  :where(html[data-page="cloud-solutions"]) .rv-upgraded .rv-orbit-6 .rv-orbit-node strong { font-size:8px; }
}
:where(html[data-page="cloud-solutions"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(h2, h3, .final-cta-headline, .kx-cta-headline, .display-h2) {
  color: #FFFFFF !important;
}
:where(html[data-page="cloud-solutions"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(h2, h3, .final-cta-headline, .kx-cta-headline) :is(.highlight-gold, .cta-gold-text, em, span.gold, .kx-text-gold) {
  color: #FFC526 !important;
  background: transparent !important;
}
:where(html[data-page="cloud-solutions"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(p, .kx-cta-sub) {
  color: rgba(255, 255, 255, 0.9) !important;
}


/* micro-interactions.css */
/* Shared feedback layer. Motion acknowledges actions; informational content stays still. */
:root:where([data-page="cloud-solutions"]){--kx-feedback-ease:cubic-bezier(.2,.75,.25,1);--kx-feedback-duration:180ms}
:where(html[data-page="cloud-solutions"]) :where(a,button,summary,input,textarea,select):focus-visible{outline:3px solid #187d6b!important;outline-offset:4px}
:where(html[data-page="cloud-solutions"]) :where(.shared-kx-footer,.ma-dark,.ma-closing) :where(a,button):focus-visible{outline-color:#ffc526!important}
:where(html[data-page="cloud-solutions"]) :where(button,summary,.kx-mi-action){-webkit-tap-highlight-color:rgba(245,169,22,.18);touch-action:manipulation}
:where(html[data-page="cloud-solutions"]) .kx-mi-action{transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease),scale 120ms var(--kx-feedback-ease),box-shadow var(--kx-feedback-duration) var(--kx-feedback-ease),background-color var(--kx-feedback-duration) ease,border-color var(--kx-feedback-duration) ease!important}
:where(html[data-page="cloud-solutions"]) .kx-mi-arrow{display:inline-block;transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease)!important}
:where(html[data-page="cloud-solutions"]) .kx-mi-card{transition:translate 220ms var(--kx-feedback-ease),box-shadow 220ms var(--kx-feedback-ease),border-color 180ms ease!important}
:where(html[data-page="cloud-solutions"]) .shared-footer-links a,:where(html[data-page="cloud-solutions"]) .shared-kx-dropdown-item,:where(html[data-page="cloud-solutions"]) .shared-kx-mobile-nav-link{ text-decoration-color:transparent;text-underline-offset:5px;transition:color 160ms ease,background-color 160ms ease,text-decoration-color 160ms ease!important}
:where(html[data-page="cloud-solutions"]) .shared-footer-links a:focus-visible{ text-decoration:underline;text-decoration-color:currentColor }
:where(html[data-page="cloud-solutions"]) :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea,select){transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease!important}
:where(html[data-page="cloud-solutions"]) :where(input:not([type=checkbox]):not([type=radio]),textarea,select):focus{border-color:#187d6b!important;box-shadow:0 0 0 3px rgb(24 125 107 / .12)}
:where(html[data-page="cloud-solutions"]) :where(button[aria-expanded],summary){transition:background-color 160ms ease,color 160ms ease!important}
:where(html[data-page="cloud-solutions"]) :where(button[aria-expanded],summary):focus-visible{border-radius:8px}
@media(hover:hover) and (pointer:fine){
  :where(html[data-page="cloud-solutions"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):hover{translate:0 -2px}
  :where(html[data-page="cloud-solutions"]) .kx-mi-action:hover .kx-mi-arrow,:where(html[data-page="cloud-solutions"]) .kx-mi-action:focus-visible .kx-mi-arrow{translate:3px 0}
  :where(html[data-page="cloud-solutions"]) .kx-mi-card:hover,:where(html[data-page="cloud-solutions"]) .kx-mi-card:focus-within{translate:0 -3px;border-color:#d8ba78;box-shadow:0 10px 24px rgb(16 32 57 / .08)}
  :where(html[data-page="cloud-solutions"]) .shared-footer-links a:hover{text-decoration:underline;text-decoration-color:currentColor}
}
:where(html[data-page="cloud-solutions"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):active{translate:0 0;scale:.98;transition-duration:80ms!important}
:where(html[data-page="cloud-solutions"]) .kx-mi-card:active{translate:0 -1px}
/* Honor this preference for both this layer and pre-existing decorative loops. */
@media(prefers-reduced-motion:reduce){
  html:where([data-page="cloud-solutions"]){scroll-behavior:auto!important}
  :where(html[data-page="cloud-solutions"]) *,:where(html[data-page="cloud-solutions"]) *::before,:where(html[data-page="cloud-solutions"]) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  :where(html[data-page="cloud-solutions"]) .kx-mi-action,:where(html[data-page="cloud-solutions"]) .kx-mi-card,:where(html[data-page="cloud-solutions"]) .kx-mi-arrow{translate:none!important;scale:none!important;transition:none!important}
  :where(html[data-page="cloud-solutions"]) .shared-footer-links a,:where(html[data-page="cloud-solutions"]) .shared-kx-dropdown-item,:where(html[data-page="cloud-solutions"]) .shared-kx-mobile-nav-link{transition:none!important}
}

/* page-container-rhythm.css */
/* Shared page rhythm: mirrors the Industries page container at every breakpoint. */
:root:where([data-page="cloud-solutions"]) {
  --kx-page-container: 1240px;
  --kx-page-gutter: 24px;
}

:where(html[data-page="cloud-solutions"]) .shared-kx-header > .shared-kx-container,:where(html[data-page="cloud-solutions"]) 
.ux-page .shared-kx-container,:where(html[data-page="cloud-solutions"]) 
main > section > :is(
  .container,
  .su-container,
  .impact-container,
  .origin-desktop-view,
  .phil-container,
  .journey-tl-container,
  .careersHero-container,
  .chFeels-container,
  .contact-hero-v2-container,
  .contact-container,
  .taste-inner,
  .ai-container,
  .rv-container,
  .wd-container,
  .wd-tech-container,
  .wd-testi-faq-container,
  .kx-ah-container,
  .ma-container,
  .kats-container,
  .cloud-hero-container,
  .kx-container
),:where(html[data-page="cloud-solutions"]) 
body > section > :is(
  .container,
  .contact-container,
  .cloud-hero-container,
  .kx-container
) {
  width: 100% !important;
  max-width: var(--kx-page-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--kx-page-gutter) !important;
  padding-right: var(--kx-page-gutter) !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  :root:where([data-page="cloud-solutions"]) { --kx-page-gutter: 16px; }
}

/* This section previously put its gutter on the full-width background itself. */
@media (max-width: 1023px) {
  :where(html[data-page="cloud-solutions"]) .wd-tech-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}



/* PAGE industries */
/* industries.html embedded 1 */

    /* ==========================================================================
       KAXON TECHNOLOGIES - WARM EDITORIAL INDUSTRY INTELLIGENCE (V3)
       Art-Directed Multi-Sector Intelligence Architecture
       ========================================================================== */
    :root:where([data-page="industries"]) {
      --canvas: #FFFDF8;
      --canvas-warm: #F8F4EC;
      --surface: #FFFFFF;
      --navy: #082B55;
      --navy-deep: #06213F;
      --navy-panel: #082F5C;
      --blue: #2B7FFF;
      --blue-soft: #EAF3FF;
      --gold: #FFBF00;
      --gold-hover: #E8AE00;
      --gold-soft: #FFF3C4;
      --pink: #F55C9F;
      --pink-soft: #FDEEF6;
      --green: #3CCB91;
      --green-soft: #EBF8F0;
      --cyan: #3187E8;
      --cyan-soft: #EAF2FF;
      --purple: #806BFF;
      --purple-soft: #F2EEFE;
      --orange: #FF8D41;
      --orange-soft: #FFF1EA;
      --text-primary: #0B2C53;
      --text-secondary: #59708A;
      --text-muted: #7890A8;
      --border: rgba(8, 43, 85, 0.08);
      --border-strong: rgba(8, 43, 85, 0.14);

      /* Typography */
      --font-display: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
      --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
      --font-hand: 'Caveat', cursive, sans-serif;

      /* Radii */
      --r-sm: 10px;
      --r-md: 16px;
      --r-lg: 22px;
      --r-xl: 28px;
      --r-pill: 9999px;

      /* Shadows */
      --shadow-card: 0 10px 30px rgba(12, 43, 78, 0.05);
      --shadow-hover: 0 18px 42px rgba(12, 43, 78, 0.10);
      --shadow-gold: 0 10px 26px rgba(255, 191, 0, 0.28);
      --shadow-dark: 0 22px 54px rgba(8, 47, 92, 0.26);

      /* Layout */
      --container-max: 1280px;
      --transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    }

    :where(html[data-page="industries"]) *,:where(html[data-page="industries"]) 
    *::before,:where(html[data-page="industries"]) 
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html:where([data-page="industries"]) {
      scroll-behavior: smooth;
      font-size: 16px;
      background-color: var(--canvas);
    }

    :where(html[data-page="industries"]) body {
      font-family: var(--font-body);
      color: var(--text-primary);
      background-color: var(--canvas);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    :where(html[data-page="industries"]) img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    :where(html[data-page="industries"]) a {
      color: inherit;
      text-decoration: none;
      transition: var(--transition);
    }

    :where(html[data-page="industries"]) button {
      cursor: pointer;
      background: none;
      border: none;
      font-family: inherit;
    }

    :where(html[data-page="industries"]) .container {
      width: 100%;
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 24px;
    }

    @media (max-width: 1024px) {
      :where(html[data-page="industries"]) .container {
        padding: 0 22px;
      }
    }

    @media (max-width: 640px) {
      :where(html[data-page="industries"]) .container {
        padding: 0 16px;
      }
    }

    /* Container Overflow Safety Guards */
    :where(html[data-page="industries"]) .hero-grid-2col>*,:where(html[data-page="industries"]) 
    .workspace-card>*,:where(html[data-page="industries"]) 
    .growth-engine-grid>*,:where(html[data-page="industries"]) 
    .case-study-dark-box>*,:where(html[data-page="industries"]) 
    .testimonials-layout-grid>*,:where(html[data-page="industries"]) 
    .case-timeline-flow>*,:where(html[data-page="industries"]) 
    .case-metric-rail>*,:where(html[data-page="industries"]) 
    .solutions-2x2-grid>* {
      min-width: 0;
      box-sizing: border-box;
    }

    /* Common Typography & Highlights */
    :where(html[data-page="industries"]) .highlight-gold {
      display: inline;
      background: linear-gradient(120deg, rgba(255, 199, 44, 0.40) 0%, rgba(255, 199, 44, 0.40) 100%);
      background-repeat: no-repeat;
      background-size: 100% 38%;
      background-position: 0 90%;
      color: inherit;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      padding: 0 2px;
    }

    :where(html[data-page="industries"]) .eyebrow-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: var(--font-body);
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--blue);
      background: var(--blue-soft);
      padding: 6px 14px;
      border-radius: var(--r-pill);
      margin-bottom: 16px;
    }

    :where(html[data-page="industries"]) .handwritten-annotation {
      font-family: var(--font-hand);
      font-size: 1.35rem;
      color: #0C4B8B;
      font-weight: 700;
      line-height: 1.15;
      pointer-events: none;
      user-select: none;
    }

    :where(html[data-page="industries"]) .section-title {
      font-family: var(--font-display);
      font-size: clamp(2.15rem, 3.4vw, 3.1rem);
      font-weight: 850;
      line-height: 1.08;
      letter-spacing: -0.035em;
      color: var(--navy);
      margin-bottom: 16px;
    }

    :where(html[data-page="industries"]) .section-desc {
      font-family: var(--font-body);
      font-size: 17px;
      color: var(--text-secondary);
      line-height: 1.68;
    }

    /* Buttons */
    :where(html[data-page="industries"]) .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 0.9375rem;
      padding: 13px 26px;
      border-radius: var(--r-pill);
      transition: var(--transition);
      white-space: nowrap;
      line-height: 1;
    }

    :where(html[data-page="industries"]) .btn:hover {
      transform: translateY(-2px);
    }

    :where(html[data-page="industries"]) .btn:active {
      transform: scale(0.985);
    }

    :where(html[data-page="industries"]) .btn i {
      font-size: 1.1rem;
      transition: transform 0.18s ease;
    }

    :where(html[data-page="industries"]) .btn:hover i {
      transform: translateX(3px);
    }

    :where(html[data-page="industries"]) .btn-yellow {
      background-color: var(--gold);
      color: var(--navy);
      box-shadow: var(--shadow-gold);
    }

    :where(html[data-page="industries"]) .btn-yellow:hover {
      background-color: var(--gold-hover);
      box-shadow: 0 14px 30px rgba(255, 191, 0, 0.38);
    }

    :where(html[data-page="industries"]) .btn-navy {
      background-color: var(--navy);
      color: #FFFFFF;
    }

    :where(html[data-page="industries"]) .btn-navy:hover {
      background-color: var(--navy-deep);
      box-shadow: 0 8px 22px rgba(8, 43, 85, 0.25);
    }

    :where(html[data-page="industries"]) .btn-outline {
      border: 1.5px solid var(--border-strong);
      background-color: var(--surface);
      color: var(--navy);
    }

    :where(html[data-page="industries"]) .btn-outline:hover {
      border-color: var(--navy);
      background-color: #FAF6EF;
      box-shadow: var(--shadow-card);
    }

    /* ==========================================================================
       SECTION 01: HERO (KAXON INDUSTRY INTELLIGENCE - MASTER 4.0.0 SPEC)
       ========================================================================== */
    :where(html[data-page="industries"]) .industries-hero-section {
      position: relative;
      background-color: #FFFDF8;
      background-image:
        radial-gradient(ellipse 650px 760px at 70% -20%, #FBF5E9 0%, transparent 70%),
        radial-gradient(circle 480px at 95% -15%, #FBF5E8 0%, transparent 65%),
        radial-gradient(circle 430px at 98% 70%, #FAF4E8 0%, transparent 60%),
        radial-gradient(circle 360px at -5% 95%, #FAF4E8 0%, transparent 60%);
      overflow: hidden;
      padding: 56px 0 72px;
      min-height: 700px;
    }

    :where(html[data-page="industries"]) .industries-hero-section .container {
      width: 100%;
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 24px;
      box-sizing: border-box;
      position: relative;
      z-index: 2;
    }

    @media (max-width: 768px) {
      :where(html[data-page="industries"]) .industries-hero-section .container {
        padding: 0 16px;
      }
    }

    :where(html[data-page="industries"]) .industriesHero-grid {
      display: grid;
      grid-template-columns: 46% 54%;
      gap: 32px;
      align-items: center;
      min-height: 640px;
    }

    /* Left Column Copy */
    :where(html[data-page="industries"]) .industriesHero-copy {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      max-width: 580px;
      z-index: 3;
    }

    :where(html[data-page="industries"]) .industriesHero-eyebrow {
      display: inline-flex;
      align-items: center;
      height: 38px;
      padding: 0 18px;
      border-radius: 20px;
      background: #E8F1FF;
      color: #2472E7;
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 22px;
      line-height: 1;
    }

    :where(html[data-page="industries"]) .industriesHero-title {
      font-family: 'Manrope', var(--font-display), sans-serif;
      font-size: clamp(38px, 3.8vw, 56px);
      font-weight: 800;
      line-height: 1.06;
      letter-spacing: -0.045em;
      color: #0A2E5F;
      margin-bottom: 20px;
      word-break: break-word;
    }

    :where(html[data-page="industries"]) .industriesHero-marker {
      position: relative;
      display: inline-block;
      white-space: nowrap;
      color: #0A2E5F;
      z-index: 1;
    }

    :where(html[data-page="industries"]) .industriesHero-marker::before {
      content: '';
      position: absolute;
      left: -4px;
      right: -8px;
      bottom: 4px;
      height: 24px;
      background: #FFD657;
      z-index: -1;
      pointer-events: none;
    }

    :where(html[data-page="industries"]) .industriesHero-desc {
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: clamp(16px, 1.15vw, 18.5px);
      font-weight: 400;
      line-height: 1.65;
      color: #58769B;
      max-width: 560px;
      margin-bottom: 28px;
    }

    :where(html[data-page="industries"]) .industriesHero-cta-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 32px;
      flex-wrap: wrap;
    }

    :where(html[data-page="industries"]) .industriesHero-btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      height: 52px;
      padding: 0 28px;
      border-radius: 26px;
      background: #FFC313;
      color: #082B55;
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 15.5px;
      font-weight: 700;
      letter-spacing: -0.015em;
      box-shadow: 0 10px 24px rgba(255, 191, 0, 0.25);
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      white-space: nowrap;
      text-decoration: none;
      line-height: 1;
    }

    :where(html[data-page="industries"]) .industriesHero-btn-primary:hover {
      transform: translateY(-2px);
      background: #FFC928;
      box-shadow: 0 14px 32px rgba(255, 191, 0, 0.38);
    }

    :where(html[data-page="industries"]) .industriesHero-btn-primary i {
      font-size: 17px;
      transition: transform 0.2s ease;
    }

    :where(html[data-page="industries"]) .industriesHero-btn-primary:hover i {
      transform: translateX(3px);
    }

    :where(html[data-page="industries"]) .industriesHero-btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      height: 52px;
      padding: 0 26px;
      border-radius: 26px;
      background: #FFFFFF;
      border: 1px solid rgba(8, 43, 85, 0.15);
      color: #082B55;
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 15.5px;
      font-weight: 700;
      letter-spacing: -0.015em;
      box-shadow: 0 6px 18px rgba(16, 39, 71, 0.055);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      white-space: nowrap;
      text-decoration: none;
      line-height: 1;
    }

    :where(html[data-page="industries"]) .industriesHero-btn-secondary:hover {
      transform: translateY(-2px);
      border-color: #0A2E5F;
      box-shadow: 0 10px 24px rgba(16, 39, 71, 0.09);
    }

    :where(html[data-page="industries"]) .industriesHero-btn-secondary i {
      font-size: 17px;
      transition: transform 0.2s ease;
    }

    :where(html[data-page="industries"]) .industriesHero-btn-secondary:hover i {
      transform: translateX(3px);
    }

    :where(html[data-page="industries"]) .industriesHero-metrics-divider {
      display: none;
    }

    :where(html[data-page="industries"]) .industriesHero-metrics-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
      width: 100%;
      max-width: 580px;
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(8, 43, 85, 0.09);
      border-radius: 20px;
      padding: 16px 14px;
      box-shadow: 0 8px 24px rgba(8, 43, 85, 0.035);
      margin-top: 24px;
      box-sizing: border-box;
    }

    :where(html[data-page="industries"]) .industriesHero-metric-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 0 14px;
      position: relative;
    }

    :where(html[data-page="industries"]) .industriesHero-metric-item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 4px;
      bottom: 4px;
      width: 1px;
      background: rgba(8, 43, 85, 0.08);
    }

    :where(html[data-page="industries"]) .industriesHero-metric-item strong {
      display: block;
      font-family: 'Outfit', 'Manrope', var(--font-display), sans-serif;
      font-size: 28px;
      font-weight: 850;
      color: #082B55;
      line-height: 1;
      letter-spacing: -0.035em;
      margin-bottom: 4px;
      font-variant-numeric: tabular-nums;
    }

    :where(html[data-page="industries"]) .industriesHero-metric-item span {
      display: block;
      font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
      font-size: 12px;
      font-weight: 600;
      color: #617D9B;
      line-height: 1.35;
    }

    /* ==========================================================================
       RIGHT COLUMN: SECTOR INTELLIGENCE CONSTELLATION (CONTAINER-QUERY SCALED)
       ========================================================================== */
    :where(html[data-page="industries"]) #industries-hero .constellation-wrapper {
      position: relative;
      width: 100%;
      max-width: 680px;
      aspect-ratio: 865 / 728;
      margin: 0 auto;
      isolation: isolate;
      overflow: visible;
      display: flex;
      align-items: center;
      justify-content: center;
      container-type: inline-size;
      --u: calc(100cqw / 865);
    }

    /* Technical Dot Field */
    :where(html[data-page="industries"]) .industriesHero-dot-field {
      position: absolute;
      inset: calc(18 * var(--u));
      background-image: radial-gradient(circle, rgba(43, 127, 255, 0.20) 1.1px, transparent 1.1px);
      background-size: 18px 18px;
      -webkit-mask-image: radial-gradient(circle at 49% 48%, black 44%, rgba(0, 0, 0, 0.65) 68%, transparent 92%);
      mask-image: radial-gradient(circle at 49% 48%, black 44%, rgba(0, 0, 0, 0.65) 68%, transparent 92%);
      opacity: 0.52;
      pointer-events: none;
      z-index: 1;
    }

    /* Desktop Canvas Container */
    :where(html[data-page="industries"]) .industriesHero-desktop-canvas {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :where(html[data-page="industries"]) .industriesHero-mobile-rail {
      display: none;
      width: 100%;
    }

    /* SVG Layer */
    :where(html[data-page="industries"]) .industriesHero-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
      overflow: visible;
    }

    :where(html[data-page="industries"]) .industriesHero-spin-cw {
      transform-origin: 423px 347px;
      animation: page-industries-industriesHero-orbitCw 150s linear infinite;
    }

    :where(html[data-page="industries"]) .industriesHero-spin-ccw {
      transform-origin: 423px 347px;
      animation: page-industries-industriesHero-orbitCcw 115s linear infinite;
    }

    @keyframes page-industries-industriesHero-orbitCw {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes page-industries-industriesHero-orbitCcw {
      from { transform: rotate(360deg); }
      to { transform: rotate(0deg); }
    }

    /* Conduits & Junction Nodes */
    :where(html[data-page="industries"]) .industriesHero-conduit {
      fill: none;
      stroke: #E2AF00;
      stroke-width: 2px;
      stroke-linecap: round;
      opacity: 0.65;
      transition: stroke 220ms ease, stroke-width 220ms ease, opacity 220ms ease, filter 220ms ease;
    }

    :where(html[data-page="industries"]) .industriesHero-conduit.is-hovered {
      stroke: #FFC928;
      stroke-width: 2.4px;
      opacity: 0.9;
    }

    :where(html[data-page="industries"]) .industriesHero-conduit.is-active {
      stroke: #FFC928;
      stroke-width: 3px;
      opacity: 1;
      filter: drop-shadow(0 0 5px rgba(255, 201, 40, 0.9));
    }

    :where(html[data-page="industries"]) .industriesHero-conduit.is-dimmed {
      opacity: 0.38;
    }

    :where(html[data-page="industries"]) .industriesHero-signal-dot {
      fill: #FFD600;
      filter: drop-shadow(0 0 5px rgba(255, 214, 0, 0.9));
      pointer-events: none;
      opacity: 0;
      transition: opacity 180ms ease;
    }

    /* Central 3D Volumetric Sphere (Proportional Scale) */
    :where(html[data-page="industries"]) #industries-hero .industriesHero-sphere {
      position: absolute;
      left: calc(423 * var(--u));
      top: calc(347 * var(--u));
      transform: translate(-50%, -50%);
      width: calc(278 * var(--u));
      height: calc(278 * var(--u));
      border-radius: 50%;
      background: radial-gradient(circle at 38% 24%, #186BB4 0%, #0E4B88 18%, #0A3769 42%, #072B55 68%, #03162C 100%);
      box-shadow: 0 calc(30 * var(--u)) calc(58 * var(--u)) rgba(5, 31, 61, 0.38),
                  0 0 calc(34 * var(--u)) rgba(43, 127, 255, 0.18),
                  inset 0 2px 4px rgba(115, 218, 255, 0.75),
                  inset 0 -3px 8px rgba(0, 10, 25, 0.5);
      border: 1px solid rgba(80, 175, 255, 0.35);
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: calc(16 * var(--u)) calc(14 * var(--u));
      user-select: none;
      cursor: default;
      transition: transform 220ms ease, box-shadow 220ms ease;
    }

    :where(html[data-page="industries"]) .industriesHero-sphere::before {
      content: '';
      position: absolute;
      top: 8%;
      left: 14%;
      width: 54%;
      height: 38%;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(82, 204, 255, 0.32) 0%, rgba(82, 204, 255, 0.08) 50%, transparent 80%);
      filter: blur(8px);
      pointer-events: none;
    }

    :where(html[data-page="industries"]) .industriesHero-sphere-ring-1 {
      position: absolute;
      inset: calc(20 * var(--u));
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.08);
      pointer-events: none;
    }

    :where(html[data-page="industries"]) .industriesHero-sphere-ring-2 {
      position: absolute;
      inset: calc(38 * var(--u));
      border-radius: 50%;
      border: 1px solid rgba(75, 179, 255, 0.08);
      pointer-events: none;
    }

    :where(html[data-page="industries"]) .industriesHero-sphere-status {
      display: inline-flex;
      align-items: center;
      gap: calc(6 * var(--u));
      margin-bottom: calc(3 * var(--u));
      z-index: 1;
    }

    :where(html[data-page="industries"]) .industriesHero-sphere-dot {
      width: calc(8 * var(--u));
      height: calc(8 * var(--u));
      border-radius: 50%;
      background: #FFE100;
      box-shadow: 0 0 calc(10 * var(--u)) rgba(255, 225, 0, 0.85);
      animation: page-industries-industriesHero-pulseDot 2.4s infinite ease-in-out;
    }

    @keyframes page-industries-industriesHero-pulseDot {
      0%, 100% { opacity: 0.8; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.2); }
    }

    :where(html[data-page="industries"]) .industriesHero-sphere-status span:last-child {
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: calc(13 * var(--u));
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #C5D8EE;
      text-transform: uppercase;
      line-height: 1;
    }

    :where(html[data-page="industries"]) .industriesHero-sphere-brand {
      font-family: 'Manrope', var(--font-display), sans-serif;
      font-size: calc(23 * var(--u));
      font-weight: 800;
      line-height: 1.05;
      color: #FFFFFF;
      letter-spacing: -0.03em;
      z-index: 1;
    }

    :where(html[data-page="industries"]) .industriesHero-sphere-subtitle {
      font-family: 'Manrope', var(--font-display), sans-serif;
      font-size: calc(20 * var(--u));
      font-weight: 800;
      line-height: 1.05;
      color: #FFFFFF;
      letter-spacing: -0.02em;
      margin-top: calc(1 * var(--u));
      z-index: 1;
    }

    :where(html[data-page="industries"]) .industriesHero-sphere-sep {
      width: calc(54 * var(--u));
      height: 1px;
      background: rgba(255, 255, 255, 0.16);
      margin: calc(5 * var(--u)) 0;
      z-index: 1;
    }

    :where(html[data-page="industries"]) .industriesHero-sphere-meta {
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: calc(12.5 * var(--u));
      font-weight: 700;
      letter-spacing: 0.05em;
      color: #C7D6EA;
      text-transform: uppercase;
      line-height: 1;
      z-index: 1;
    }

    :where(html[data-page="industries"]) .industriesHero-sphere-sector {
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: calc(13 * var(--u));
      font-weight: 700;
      color: #FFD600;
      margin-top: calc(3 * var(--u));
      transition: opacity 150ms ease;
      line-height: 1;
      z-index: 1;
    }

    /* 6 Floating Sector Cards (Proportional Scale & Protected Transforms) */
    :where(html[data-page="industries"]) #industries-hero .industriesHero-card {
      position: absolute;
      z-index: 6;
      height: calc(76 * var(--u));
      background: rgba(255, 255, 255, 0.97);
      border: 1px solid rgba(10, 46, 95, 0.08);
      border-radius: calc(18 * var(--u));
      box-shadow: 0 10px 30px rgba(16, 39, 71, 0.10);
      padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u)) calc(12 * var(--u));
      display: flex;
      align-items: center;
      gap: calc(12 * var(--u));
      cursor: pointer;
      font-family: inherit;
      text-align: left;
      box-sizing: border-box;
      transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 200ms ease,
                  opacity 200ms ease;
    }

    :where(html[data-page="industries"]) #industries-hero .industriesHero-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 42px rgba(16, 39, 71, 0.15);
      border-color: rgba(43, 127, 255, 0.26);
    }

    :where(html[data-page="industries"]) #industries-hero .industriesHero-card:focus-visible {
      outline: 2px solid #FFC928;
      outline-offset: 3px;
    }

    :where(html[data-page="industries"]) #industries-hero .industriesHero-card.is-active {
      border-color: rgba(43, 127, 255, 0.38);
      box-shadow: 0 16px 38px rgba(43, 127, 255, 0.16);
      transform: translateY(-2px);
    }

    :where(html[data-page="industries"]) #industries-hero .industriesHero-card.is-dimmed {
      opacity: 0.88;
    }

    :where(html[data-page="industries"]) .industriesHero-card-icon {
      width: calc(48 * var(--u));
      height: calc(48 * var(--u));
      border-radius: calc(14 * var(--u));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: calc(24 * var(--u));
      flex-shrink: 0;
      transition: transform 180ms ease;
    }

    :where(html[data-page="industries"]) #industries-hero .industriesHero-card:hover .industriesHero-card-icon {
      transform: scale(1.06);
    }

    :where(html[data-page="industries"]) .industriesHero-card-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: calc(2 * var(--u));
      overflow: hidden;
    }

    :where(html[data-page="industries"]) .industriesHero-card-title {
      font-family: 'Manrope', var(--font-display), sans-serif;
      font-size: calc(17 * var(--u));
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: #0A2E5F;
      white-space: nowrap;
    }

    :where(html[data-page="industries"]) .industriesHero-card-sub {
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: calc(13 * var(--u));
      font-weight: 500;
      line-height: 1.2;
      color: #58769B;
      white-space: nowrap;
    }

    /* Individual Card Placements & Transform Locks */
    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-education {
      left: calc(423 * var(--u));
      top: calc(18 * var(--u));
      width: calc(245 * var(--u));
      transform: translateX(-50%);
    }
    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-education:hover {
      transform: translateX(-50%) translateY(-3px);
    }
    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-education.is-active {
      transform: translateX(-50%) translateY(-2px);
    }

    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-healthcare {
      left: calc(11 * var(--u));
      top: calc(184 * var(--u));
      width: calc(225 * var(--u));
    }
    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-healthcare:hover {
      transform: translateY(-3px);
    }
    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-healthcare.is-active {
      transform: translateY(-2px);
    }

    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-realestate {
      left: calc(648 * var(--u));
      top: calc(184 * var(--u));
      width: calc(230 * var(--u));
    }
    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-realestate:hover {
      transform: translateY(-3px);
    }
    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-realestate.is-active {
      transform: translateY(-2px);
    }

    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-ecommerce {
      left: calc(9 * var(--u));
      top: calc(461 * var(--u));
      width: calc(226 * var(--u));
    }
    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-ecommerce:hover {
      transform: translateY(-3px);
    }
    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-ecommerce.is-active {
      transform: translateY(-2px);
    }

    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-manufacturing {
      left: calc(649 * var(--u));
      top: calc(464 * var(--u));
      width: calc(245 * var(--u));
    }
    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-manufacturing:hover {
      transform: translateY(-3px);
    }
    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-manufacturing.is-active {
      transform: translateY(-2px);
    }

    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-technology {
      left: calc(423 * var(--u));
      top: calc(594 * var(--u));
      width: calc(235 * var(--u));
      transform: translateX(-50%);
    }
    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-technology:hover {
      transform: translateX(-50%) translateY(-3px);
    }
    :where(html[data-page="industries"]) #industries-hero .industriesHero-card-technology.is-active {
      transform: translateX(-50%) translateY(-2px);
    }

    /* Editorial Handwritten Annotation */
    :where(html[data-page="industries"]) #industries-hero .industriesHero-annotation {
      position: absolute;
      left: calc(48 * var(--u));
      bottom: calc(32 * var(--u));
      display: inline-flex;
      align-items: center;
      gap: calc(8 * var(--u));
      font-family: 'Caveat', cursive;
      font-size: calc(26 * var(--u));
      font-weight: 600;
      color: #C89000;
      transform: rotate(-2deg);
      pointer-events: none;
      z-index: 7;
      user-select: none;
      white-space: nowrap;
    }

    :where(html[data-page="industries"]) .industriesHero-annotation-arrow {
      width: calc(32 * var(--u));
      height: calc(24 * var(--u));
      flex-shrink: 0;
    }

    /* Tablet Responsive (769px - 1100px) */
    @media (max-width: 1100px) {
      :where(html[data-page="industries"]) .industriesHero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }
      :where(html[data-page="industries"]) .industriesHero-copy {
        max-width: 720px;
        margin: 0 auto;
        text-align: left;
      }
      :where(html[data-page="industries"]) #industries-hero .constellation-wrapper {
        max-width: 600px;
      }
    }

    /* Mobile Sector Intelligence Rail (<= 768px) */
    @media (max-width: 768px) {
      :where(html[data-page="industries"]) .industries-hero-section {
        padding: 44px 0 60px;
      }
      :where(html[data-page="industries"]) .industriesHero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        min-height: auto;
      }
      :where(html[data-page="industries"]) .industriesHero-eyebrow {
        margin-bottom: 18px;
      }
      :where(html[data-page="industries"]) .industriesHero-title {
        font-size: clamp(34px, 8.5vw, 48px);
        margin-bottom: 18px;
      }
      :where(html[data-page="industries"]) .industriesHero-marker::before {
        height: 20px;
        bottom: 3px;
      }
      :where(html[data-page="industries"]) .industriesHero-desc {
        font-size: 16.5px;
        margin-bottom: 28px;
      }
      :where(html[data-page="industries"]) .industriesHero-cta-row {
        flex-direction: column;
        width: 100%;
        gap: 12px;
        margin-bottom: 32px;
      }
      :where(html[data-page="industries"]) .industriesHero-btn-primary,:where(html[data-page="industries"]) 
      .industriesHero-btn-secondary {
        width: 100%;
        height: 52px;
        font-size: 15.5px;
      }
      :where(html[data-page="industries"]) .industriesHero-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 16px 18px;
        border-radius: 18px;
      }
      :where(html[data-page="industries"]) .industriesHero-metric-item:not(:last-child)::after {
        display: none;
      }
      :where(html[data-page="industries"]) .industriesHero-metric-item {
        padding: 4px 6px;
      }
      :where(html[data-page="industries"]) .industriesHero-metric-item strong {
        font-size: 26px;
      }

      /* Constellation Transformation */
      :where(html[data-page="industries"]) #industries-hero .constellation-wrapper {
        aspect-ratio: auto;
        min-height: auto;
        padding: 0;
        background: transparent;
      }
      :where(html[data-page="industries"]) .industriesHero-dot-field,:where(html[data-page="industries"]) 
      .industriesHero-desktop-canvas,:where(html[data-page="industries"]) 
      .industriesHero-annotation {
        display: none !important;
      }
      :where(html[data-page="industries"]) .industriesHero-mobile-rail {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
      }

      :where(html[data-page="industries"]) .industriesHero-mobile-core {
        background: linear-gradient(145deg, #0A3769 0%, #061D39 100%);
        color: #FFFFFF;
        border-radius: 22px;
        padding: 22px 20px;
        box-shadow: 0 14px 36px rgba(8, 43, 85, 0.22);
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      :where(html[data-page="industries"]) .industriesHero-mobile-core-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      :where(html[data-page="industries"]) .industriesHero-mobile-core-brand {
        font-family: 'Manrope', var(--font-display), sans-serif;
        font-size: 1.18rem;
        font-weight: 800;
        color: #FFFFFF;
      }
      :where(html[data-page="industries"]) .industriesHero-mobile-core-status {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      :where(html[data-page="industries"]) .industriesHero-mobile-core-status span {
        font-size: 0.68rem;
        font-weight: 700;
        color: #FFC928;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      :where(html[data-page="industries"]) .industriesHero-mobile-core-sub {
        font-size: 0.8rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.85);
      }
      :where(html[data-page="industries"]) .industriesHero-mobile-core-tagline {
        font-family: 'Caveat', cursive;
        font-size: 1.15rem;
        color: #FFC928;
        margin-top: 4px;
      }

      :where(html[data-page="industries"]) .industriesHero-mobile-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }

      :where(html[data-page="industries"]) .industriesHero-mobile-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 64px;
        border-radius: 16px;
        background: #FFFFFF;
        border: 1px solid rgba(16, 39, 71, 0.09);
        padding: 10px 12px;
        text-align: left;
        cursor: pointer;
        transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
      }

      :where(html[data-page="industries"]) .industriesHero-mobile-btn.is-active {
        border-color: rgba(43, 127, 255, 0.50);
        box-shadow: 0 8px 20px rgba(43, 127, 255, 0.14);
        background: #FFFFFF;
      }

      :where(html[data-page="industries"]) .industriesHero-mobile-btn-icon {
        width: 36px;
        height: 36px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
      }

      :where(html[data-page="industries"]) .industriesHero-mobile-btn-text strong {
        display: block;
        font-family: 'Manrope', var(--font-display), sans-serif;
        font-size: 0.82rem;
        font-weight: 800;
        color: #0A2E5F;
        line-height: 1.15;
      }

      :where(html[data-page="industries"]) .industriesHero-mobile-btn-text span {
        display: block;
        font-family: var(--font-body, 'Inter', sans-serif);
        font-size: 0.65rem;
        font-weight: 500;
        color: #58769B;
        line-height: 1.1;
        margin-top: 2px;
      }

      :where(html[data-page="industries"]) .industriesHero-mobile-insight {
        background: #FBF7EE;
        border: 1px solid rgba(16, 39, 71, 0.07);
        border-radius: 14px;
        padding: 14px 16px;
        font-size: 0.82rem;
        font-weight: 600;
        color: #0A2E5F;
        line-height: 1.4;
      }
    }

    @media (max-width: 360px) {
      :where(html[data-page="industries"]) .industriesHero-mobile-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Reduced Motion */
    @media (prefers-reduced-motion: reduce) {
      :where(html[data-page="industries"]) .industriesHero-spin-cw,:where(html[data-page="industries"]) 
      .industriesHero-spin-ccw,:where(html[data-page="industries"]) 
      .industriesHero-sphere-dot {
        animation: none !important;
      }
      :where(html[data-page="industries"]) .industriesHero-card,:where(html[data-page="industries"]) 
      .industriesHero-conduit,:where(html[data-page="industries"]) 
      .industriesHero-sphere,:where(html[data-page="industries"]) 
      .industriesHero-sphere-sector {
        transition: none !important;
      }
    }

    /* ==========================================================================
       SECTION 02: CAPABILITIES STRIP (SECTOR SIGNAL RAIL)
       ========================================================================== */
    :where(html[data-page="industries"]) .signal-rail-section {
      padding: 24px 0 64px;
    }

    :where(html[data-page="industries"]) .signal-rail-box {
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 22px 32px;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
      align-items: center;
      box-shadow: 0 8px 24px rgba(12, 43, 78, 0.04);
    }

    :where(html[data-page="industries"]) .signal-item {
      display: flex;
      align-items: center;
      gap: 12px;
      position: relative;
    }

    :where(html[data-page="industries"]) .signal-item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: -8px;
      top: 15%;
      height: 70%;
      width: 1px;
      background: var(--border);
    }

    :where(html[data-page="industries"]) .signal-icon-tile {
      width: 36px;
      height: 36px;
      border-radius: var(--r-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
      flex-shrink: 0;
    }

    :where(html[data-page="industries"]) .signal-info-text strong {
      display: block;
      font-family: var(--font-display);
      font-size: 0.9rem;
      font-weight: 800;
      color: var(--navy);
      line-height: 1.15;
    }

    :where(html[data-page="industries"]) .signal-info-text span {
      display: block;
      font-family: var(--font-body);
      font-size: 0.725rem;
      font-weight: 600;
      color: var(--text-secondary);
      margin-top: 2px;
    }

    /* ==========================================================================
       SECTION 03: INDUSTRY SHOWCASE (COMMAND CENTER DOCK + WORKSPACE + TRAY)
       ========================================================================== */
    :where(html[data-page="industries"]) .showcase-section {
      padding: 88px 0;
      background: var(--canvas);
    }

    :where(html[data-page="industries"]) .tabs-dock-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
      overflow-x: auto;
      padding: 6px;
      background: rgba(8, 43, 85, 0.04);
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      margin-bottom: 32px;
      scrollbar-width: none;
    }

    :where(html[data-page="industries"]) .tabs-dock-wrapper::-webkit-scrollbar {
      display: none;
    }

    :where(html[data-page="industries"]) .tab-dock-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      border-radius: var(--r-pill);
      font-family: var(--font-body);
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--text-secondary);
      background: transparent;
      transition: var(--transition);
      white-space: nowrap;
      border: 1px solid transparent;
    }

    :where(html[data-page="industries"]) .tab-dock-btn:hover {
      color: var(--navy);
      background: rgba(255, 255, 255, 0.7);
    }

    :where(html[data-page="industries"]) .tab-dock-btn.active {
      background: var(--navy);
      color: #FFFFFF;
      box-shadow: 0 8px 20px rgba(8, 43, 85, 0.18);
      border-color: rgba(255, 255, 255, 0.15);
    }

    :where(html[data-page="industries"]) .tab-dock-btn.active i {
      color: var(--gold) !important;
    }

    /* Active Workspace Card */
    :where(html[data-page="industries"]) .workspace-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: clamp(28px, 3.5vw, 42px);
      box-shadow: var(--shadow-card);
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
      gap: clamp(24px, 3.5vw, 44px);
      align-items: center;
      min-height: auto;
      margin-bottom: 24px;
      transition: opacity 0.16s ease, transform 0.16s ease;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }

    :where(html[data-page="industries"]) .workspace-visual-box {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      aspect-ratio: 4 / 3;
      box-shadow: 0 12px 32px rgba(8, 43, 85, 0.10);
      background: radial-gradient(circle at 75% 30%, rgba(43, 127, 255, 0.35), transparent 60%),
        linear-gradient(135deg, #0A2F5B 0%, #052140 100%);
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }

    :where(html[data-page="industries"]) .workspace-visual-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }

    :where(html[data-page="industries"]) .workspace-tag-pill {
      position: absolute;
      top: 16px;
      left: 16px;
      background: rgba(8, 43, 85, 0.78);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #FFFFFF;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 750;
      letter-spacing: 0.04em;
      padding: 6px 14px;
      border-radius: var(--r-pill);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    :where(html[data-page="industries"]) .workspace-result-badge {
      position: absolute;
      bottom: 16px;
      left: 16px;
      right: 16px;
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: var(--r-md);
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 8px 24px rgba(8, 43, 85, 0.12);
      border: 1px solid rgba(8, 43, 85, 0.08);
    }

    :where(html[data-page="industries"]) .workspace-result-badge strong {
      display: block;
      font-family: var(--font-display);
      font-size: 0.95rem;
      font-weight: 850;
      color: var(--navy);
      line-height: 1.15;
    }

    :where(html[data-page="industries"]) .workspace-result-badge span {
      display: block;
      font-family: var(--font-body);
      font-size: 0.775rem;
      color: var(--text-secondary);
    }

    /* Right Intelligence Panel */
    :where(html[data-page="industries"]) .workspace-content-col {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="industries"]) .workspace-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    :where(html[data-page="industries"]) .carousel-nav-arrows {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    :where(html[data-page="industries"]) .carousel-arrow-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid var(--border-strong);
      background: var(--surface);
      color: var(--navy);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      transition: var(--transition);
    }

    :where(html[data-page="industries"]) .carousel-arrow-btn:hover {
      background: var(--navy);
      color: #FFFFFF;
      border-color: var(--navy);
    }

    :where(html[data-page="industries"]) .workspace-title-wrap {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
    }

    :where(html[data-page="industries"]) .workspace-icon-circle {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      flex-shrink: 0;
    }

    :where(html[data-page="industries"]) .workspace-title-wrap h3 {
      font-family: var(--font-display);
      font-size: 1.85rem;
      font-weight: 850;
      color: var(--navy);
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    :where(html[data-page="industries"]) .workspace-title-wrap span {
      display: block;
      font-family: var(--font-body);
      font-size: 0.875rem;
      color: var(--text-secondary);
      font-weight: 600;
    }

    :where(html[data-page="industries"]) .business-reality-box {
      background: var(--canvas-warm);
      border-left: 3px solid var(--gold);
      padding: 12px 16px;
      border-radius: 0 var(--r-sm) var(--r-sm) 0;
      margin-bottom: 20px;
    }

    :where(html[data-page="industries"]) .business-reality-box strong {
      display: block;
      font-family: var(--font-body);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #B38600;
      margin-bottom: 2px;
    }

    :where(html[data-page="industries"]) .business-reality-box p {
      font-family: var(--font-body);
      font-size: 0.885rem;
      color: var(--text-primary);
      line-height: 1.5;
      margin: 0;
    }

    :where(html[data-page="industries"]) .solutions-2x2-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin-bottom: 28px;
    }

    :where(html[data-page="industries"]) .solution-tile {
      background: #FDFBF7;
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: 14px 16px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    :where(html[data-page="industries"]) .solution-tile-icon {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
      flex-shrink: 0;
    }

    :where(html[data-page="industries"]) .solution-tile-text h5 {
      font-family: var(--font-display);
      font-size: 0.925rem;
      font-weight: 800;
      color: var(--navy);
      line-height: 1.2;
      margin-bottom: 2px;
    }

    :where(html[data-page="industries"]) .solution-tile-text p {
      font-family: var(--font-body);
      font-size: 0.775rem;
      color: var(--text-secondary);
      line-height: 1.35;
      margin: 0;
    }

    :where(html[data-page="industries"]) .workspace-actions-row {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    /* Impact Metrics Tray */
    :where(html[data-page="industries"]) .impact-tray-box {
      background: rgba(255, 255, 255, 0.82);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 22px 32px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      box-shadow: 0 10px 28px rgba(12, 43, 78, 0.04);
    }

    :where(html[data-page="industries"]) .impact-item {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    :where(html[data-page="industries"]) .impact-icon-box {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35rem;
      flex-shrink: 0;
    }

    :where(html[data-page="industries"]) .impact-text h4 {
      font-family: var(--font-display);
      font-size: 1.6rem;
      font-weight: 900;
      color: var(--navy);
      line-height: 1.05;
    }

    :where(html[data-page="industries"]) .impact-text p {
      font-family: var(--font-body);
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text-secondary);
      margin-top: 2px;
    }

    /* ==========================================================================
       SECTION 04: SECTOR PLAYBOOK LIBRARY (ASYMMETRIC 12-COL GRID)
       ========================================================================== */
    :where(html[data-page="industries"]) .playbooks-section {
      padding: 80px 0;
      background: var(--canvas);
    }

    :where(html[data-page="industries"]) .playbooks-bento-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      margin-top: 36px;
    }

    :where(html[data-page="industries"]) .playbook-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: var(--transition);
      cursor: pointer;
    }

    :where(html[data-page="industries"]) .playbook-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(43, 127, 255, 0.28);
    }

    :where(html[data-page="industries"]) .playbook-card.span-5 {
      grid-column: span 5;
    }

    :where(html[data-page="industries"]) .playbook-card.span-7 {
      grid-column: span 7;
    }

    :where(html[data-page="industries"]) .playbook-img-wrap {
      position: relative;
      height: 220px;
      overflow: hidden;
    }

    :where(html[data-page="industries"]) .playbook-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.35s ease;
    }

    :where(html[data-page="industries"]) .playbook-card:hover .playbook-img-wrap img {
      transform: scale(1.03);
    }

    :where(html[data-page="industries"]) .playbook-tag-pill {
      position: absolute;
      top: 16px;
      left: 16px;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      font-family: var(--font-body);
      font-size: 0.725rem;
      font-weight: 800;
      padding: 5px 12px;
      border-radius: var(--r-pill);
      color: var(--navy);
    }

    :where(html[data-page="industries"]) .playbook-card-body {
      padding: 26px 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
    }

    :where(html[data-page="industries"]) .playbook-card-body h4 {
      font-family: var(--font-display);
      font-size: 1.35rem;
      font-weight: 850;
      color: var(--navy);
      margin-bottom: 8px;
    }

    :where(html[data-page="industries"]) .playbook-card-body p {
      font-family: var(--font-body);
      font-size: 0.925rem;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 20px;
    }

    :where(html[data-page="industries"]) .playbook-action-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-body);
      font-size: 0.875rem;
      font-weight: 800;
      color: var(--blue);
    }

    :where(html[data-page="industries"]) .playbook-card:hover .playbook-action-link i {
      transform: translateX(4px);
    }

    /* ==========================================================================
       SECTION 05: GROWTH ENGINE (ADAPTIVE GROWTH OPERATING SYSTEM)
       ========================================================================== */
    :where(html[data-page="industries"]) .growth-engine-section {
      padding: 92px 0;
      background: var(--canvas-warm);
    }

    :where(html[data-page="industries"]) .growth-engine-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
      gap: 54px;
      align-items: center;
    }

    :where(html[data-page="industries"]) .engine-diagram-container {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 0.92;
      max-width: 580px;
      margin: 0 auto;
    }

    :where(html[data-page="industries"]) .engine-center-hub {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 165px;
      height: 165px;
      border-radius: 50%;
      background: linear-gradient(145deg, #0A3769 0%, #082B55 100%);
      color: #FFFFFF;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 16px;
      box-shadow: 0 16px 40px rgba(8, 43, 85, 0.28);
      border: 2px solid rgba(255, 255, 255, 0.16);
      z-index: 5;
    }

    :where(html[data-page="industries"]) .engine-center-hub h4 {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 850;
      color: #FFFFFF;
      line-height: 1.15;
      margin-bottom: 3px;
    }

    :where(html[data-page="industries"]) .engine-center-hub span {
      font-family: var(--font-body);
      font-size: 0.675rem;
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 750;
    }

    :where(html[data-page="industries"]) .engine-node {
      position: absolute;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: var(--shadow-card);
      z-index: 6;
      transition: var(--transition);
      max-width: 195px;
    }

    :where(html[data-page="industries"]) .engine-node:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: var(--shadow-hover);
      border-color: var(--blue);
    }

    :where(html[data-page="industries"]) .engine-node-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      flex-shrink: 0;
    }

    :where(html[data-page="industries"]) .engine-node-text h5 {
      font-family: var(--font-display);
      font-size: 0.875rem;
      font-weight: 800;
      color: var(--navy);
      line-height: 1.15;
    }

    :where(html[data-page="industries"]) .engine-node-text p {
      font-family: var(--font-body);
      font-size: 0.725rem;
      color: var(--text-secondary);
      line-height: 1.25;
      margin: 0;
    }

    /* Engine Node Coordinates */
    :where(html[data-page="industries"]) .engine-node.node-discover {
      top: 12px;
      right: 18%;
    }

    :where(html[data-page="industries"]) .engine-node.node-acquire {
      top: 28%;
      right: 0;
    }

    :where(html[data-page="industries"]) .engine-node.node-automate {
      bottom: 28%;
      right: 0;
    }

    :where(html[data-page="industries"]) .engine-node.node-convert {
      bottom: 12px;
      right: 18%;
    }

    :where(html[data-page="industries"]) .engine-node.node-measure {
      bottom: 28%;
      left: 0;
    }

    :where(html[data-page="industries"]) .engine-node.node-tailor {
      top: 28%;
      left: 0;
    }

    :where(html[data-page="industries"]) .engine-orbit-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
    }

    /* Mobile Vertical Operating System Timeline */
    :where(html[data-page="industries"]) .engine-mobile-journey {
      display: none;
      flex-direction: column;
      gap: 16px;
      width: 100%;
      max-width: 520px;
      margin: 0 auto;
    }

    :where(html[data-page="industries"]) .engine-mobile-hub-card {
      background: linear-gradient(135deg, #082F5C 0%, #053E77 100%);
      border-radius: var(--r-lg);
      padding: 20px 24px;
      color: #FFFFFF;
      text-align: center;
      box-shadow: 0 12px 30px rgba(8, 43, 85, 0.22);
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    :where(html[data-page="industries"]) .engine-mobile-hub-card h4 {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 850;
      color: #FFFFFF;
      margin-bottom: 4px;
    }

    :where(html[data-page="industries"]) .engine-mobile-hub-card span {
      font-family: var(--font-body);
      font-size: 0.775rem;
      font-weight: 750;
      color: var(--gold);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    :where(html[data-page="industries"]) .engine-journey-timeline {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-left: 28px;
      margin-top: 6px;
    }

    :where(html[data-page="industries"]) .engine-journey-timeline::before {
      content: '';
      position: absolute;
      left: 11px;
      top: 14px;
      bottom: 14px;
      width: 2px;
      border-left: 2px dashed rgba(8, 43, 85, 0.35);
    }

    :where(html[data-page="industries"]) .engine-journey-card {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      box-shadow: var(--shadow-card);
    }

    :where(html[data-page="industries"]) .engine-journey-bullet {
      position: absolute;
      left: -28px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--navy);
      color: var(--gold);
      font-size: 0.6875rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 3px rgba(8, 43, 85, 0.12);
      z-index: 2;
    }

    /* ==========================================================================
       SECTION 06: CASE STUDY (PROOF TIMELINE) - SPACIOUS CONTAINER-CONTAINED
       ========================================================================== */
    :where(html[data-page="industries"]) .case-study-section {
      padding: clamp(64px, 7vw, 96px) 0;
      background: var(--canvas);
      width: 100%;
      overflow: hidden;
    }

    :where(html[data-page="industries"]) .case-study-dark-box {
      background: radial-gradient(circle at 85% 20%, rgba(43, 127, 255, 0.28), transparent 45%),
        radial-gradient(circle at 10% 85%, rgba(255, 191, 0, 0.14), transparent 40%),
        linear-gradient(145deg, #092C55 0%, #061F3C 100%);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 28px;
      padding: clamp(32px, 4.5vw, 52px);
      color: #FFFFFF;
      box-shadow: 0 24px 60px rgba(6, 31, 60, 0.35);
      position: relative;
      overflow: hidden;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 36px;
    }

    :where(html[data-page="industries"]) .case-study-header-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 36px;
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="industries"]) .case-study-left-story {
      flex: 1 1 0;
      min-width: 0;
      max-width: 720px;
    }

    :where(html[data-page="industries"]) .case-eyebrow-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.10);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: var(--r-pill);
      padding: 6px 14px;
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #FFC928;
      margin-bottom: 14px;
    }

    :where(html[data-page="industries"]) .case-pulse-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #FFC928;
      box-shadow: 0 0 0 3px rgba(255, 201, 40, 0.35);
      display: inline-block;
    }

    :where(html[data-page="industries"]) .case-study-left-story h3 {
      font-family: var(--font-display);
      font-size: clamp(1.65rem, 2.5vw, 2.35rem);
      font-weight: 900;
      line-height: 1.18;
      margin-bottom: 14px;
      color: #FFFFFF;
      letter-spacing: -0.03em;
      word-break: break-word;
    }

    :where(html[data-page="industries"]) .case-headline-highlight {
      position: relative;
      color: #FFC928;
      display: inline;
      background: linear-gradient(120deg, rgba(255, 199, 44, 0.30) 0%, rgba(255, 199, 44, 0.30) 100%);
      background-repeat: no-repeat;
      background-size: 100% 32%;
      background-position: 0 92%;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      padding: 0 2px;
    }

    :where(html[data-page="industries"]) .case-title-swoosh {
      display: none;
    }

    :where(html[data-page="industries"]) .case-study-left-story p {
      font-family: var(--font-body);
      color: rgba(255, 255, 255, 0.86);
      font-size: 0.95rem;
      line-height: 1.65;
      margin: 0;
      max-width: 640px;
    }

    :where(html[data-page="industries"]) .case-study-cta-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
      flex-shrink: 0;
      padding-top: 8px;
    }

    /* Full-width 3-Phase Transformation Grid */
    :where(html[data-page="industries"]) .case-timeline-flow {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="industries"]) .case-phase-card {
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.13);
      border-radius: 18px;
      padding: 22px 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      min-width: 0;
      height: 100%;
      transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
      box-sizing: border-box;
    }

    :where(html[data-page="industries"]) .case-phase-card:hover {
      background: rgba(255, 255, 255, 0.10);
      transform: translateY(-3px);
      border-color: rgba(255, 255, 255, 0.25);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    }

    :where(html[data-page="industries"]) .case-phase-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      gap: 8px;
    }

    :where(html[data-page="industries"]) .case-phase-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      flex-shrink: 0;
    }

    :where(html[data-page="industries"]) .case-phase-badge {
      font-family: var(--font-body);
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 4px 9px;
      border-radius: 6px;
      white-space: nowrap;
    }

    :where(html[data-page="industries"]) .case-phase-card h4 {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 850;
      color: #FFFFFF;
      margin-bottom: 8px;
      line-height: 1.25;
    }

    :where(html[data-page="industries"]) .case-phase-card p {
      font-family: var(--font-body);
      font-size: 0.835rem;
      color: rgba(255, 255, 255, 0.78);
      line-height: 1.5;
      margin: 0;
    }

    :where(html[data-page="industries"]) .flow-separator-arrow {
      color: rgba(255, 255, 255, 0.4);
      font-size: 1.35rem;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      flex-shrink: 0;
    }

    /* Elevated Frosted Glass Metric Rail */
    :where(html[data-page="industries"]) .case-metric-rail {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="industries"]) .rail-metric-item {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.10);
      border-radius: 16px;
      padding: 16px 20px;
      text-align: left;
      transition: all 0.2s ease;
      min-width: 0;
      box-sizing: border-box;
    }

    :where(html[data-page="industries"]) .rail-metric-item:hover {
      background: rgba(255, 255, 255, 0.08);
      transform: translateY(-2px);
      border-color: rgba(255, 191, 0, 0.3);
    }

    :where(html[data-page="industries"]) .rail-metric-item strong {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-display);
      font-size: 1.6rem;
      font-weight: 900;
      color: #FFC928;
      line-height: 1;
      margin-bottom: 4px;
    }

    :where(html[data-page="industries"]) .rail-metric-item strong i {
      font-size: 1.1rem;
      color: #3CCB91;
    }

    :where(html[data-page="industries"]) .rail-metric-item span {
      display: block;
      font-family: var(--font-body);
      font-size: 0.85rem;
      font-weight: 750;
      color: #FFFFFF;
      line-height: 1.25;
    }

    :where(html[data-page="industries"]) .rail-metric-item small {
      display: block;
      font-family: var(--font-body);
      font-size: 0.725rem;
      color: rgba(255, 255, 255, 0.68);
      margin-top: 3px;
    }

    /* ==========================================================================
       SECTION 07: TESTIMONIALS (CROSS-INDUSTRY VOICES)
       ========================================================================== */
    :where(html[data-page="industries"]) .testimonials-section {
      padding: 92px 0;
      background: var(--canvas);
    }

    :where(html[data-page="industries"]) .testimonials-header-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 40px;
    }

    :where(html[data-page="industries"]) .testimonials-layout-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
      gap: 24px;
    }

    :where(html[data-page="industries"]) .testimonial-featured-card {
      background: var(--surface);
      border-radius: var(--r-xl);
      padding: 38px 34px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 320px;
    }

    :where(html[data-page="industries"]) .testimonial-rating-stars {
      display: flex;
      gap: 4px;
      color: #FFB800;
      font-size: 1.15rem;
      margin-bottom: 16px;
    }

    :where(html[data-page="industries"]) .testimonial-featured-card .quote-body {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 750;
      color: var(--navy);
      line-height: 1.45;
      margin-bottom: 24px;
    }

    :where(html[data-page="industries"]) .testimonials-stack-right {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    :where(html[data-page="industries"]) .testimonial-support-card {
      background: var(--surface);
      border-radius: var(--r-lg);
      padding: 26px 28px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    :where(html[data-page="industries"]) .testimonial-support-card .quote-body {
      font-family: var(--font-body);
      font-size: 0.95rem;
      color: var(--text-primary);
      line-height: 1.6;
      margin-bottom: 18px;
    }

    :where(html[data-page="industries"]) .author-profile-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: auto;
    }

    :where(html[data-page="industries"]) .author-avatar-img {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--gold);
    }

    :where(html[data-page="industries"]) .author-info-meta h4 {
      font-family: var(--font-display);
      font-size: 0.925rem;
      font-weight: 800;
      color: var(--navy);
      line-height: 1.15;
    }

    :where(html[data-page="industries"]) .author-info-meta p {
      font-family: var(--font-body);
      font-size: 0.775rem;
      color: var(--text-secondary);
      margin: 0;
    }

    /* ==========================================================================
       SECTION 08: FINAL CTA (INDUSTRY STRATEGY INVITATION)
       ========================================================================== */
    :where(html[data-page="industries"]) .final-cta-section {
      padding: 40px 0 96px;
      background: var(--canvas);
    }

    :where(html[data-page="industries"]) .final-cta-box {
      background: radial-gradient(circle at 82% 50%, rgba(43, 127, 255, 0.24), transparent 32%),
        linear-gradient(135deg, #082B55 0%, #053E77 100%);
      border-radius: var(--r-xl);
      padding: 58px 54px;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      box-shadow: 0 22px 52px rgba(8, 43, 85, 0.25);
      position: relative;
    }

    :where(html[data-page="industries"]) .final-cta-copy {
      max-width: 640px;
    }

    :where(html[data-page="industries"]) .final-cta-eyebrow {
      font-family: var(--font-body);
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 12px;
      display: block;
    }

    :where(html[data-page="industries"]) .final-cta-headline {
      font-family: var(--font-display);
      font-size: clamp(2.15rem, 3.4vw, 2.9rem);
      font-weight: 900;
      line-height: 1.15;
      color: #FFFFFF !important;
      margin-bottom: 14px;
      letter-spacing: -0.03em;
    }

    :where(html[data-page="industries"]) .final-cta-desc {
      font-family: var(--font-body);
      font-size: 1.0625rem;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.6;
      margin: 0;
    }

    :where(html[data-page="industries"]) .final-cta-action-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    :where(html[data-page="industries"]) .cta-subcopy {
      font-family: var(--font-body);
      font-size: 12.5px;
      color: rgba(255, 255, 255, 0.72);
    }

    :where(html[data-page="industries"]) .final-cta-annotation {
      position: absolute;
      right: 32px;
      bottom: 14px;
      font-family: var(--font-hand);
      font-size: 1.25rem;
      color: rgba(255, 191, 0, 0.9);
      pointer-events: none;
    }

    /* ==========================================================================
       RESPONSIVE SYSTEM (320px to 1280px+)
       ========================================================================== */
    @media (max-width: 1024px) {
      :where(html[data-page="industries"]) .hero-grid-2col {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      :where(html[data-page="industries"]) .hero-copy-col {
        align-items: center;
        text-align: center;
      }

      :where(html[data-page="industries"]) .hero-actions-row {
        justify-content: center;
      }

      :where(html[data-page="industries"]) .hero-stats-strip {
        margin: 0 auto;
      }

      :where(html[data-page="industries"]) .signal-rail-box {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }

      :where(html[data-page="industries"]) .signal-item:not(:last-child)::after {
        display: none;
      }

      :where(html[data-page="industries"]) .workspace-card {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 30px 24px;
      }

      :where(html[data-page="industries"]) .playbook-card.span-5,:where(html[data-page="industries"]) 
      .playbook-card.span-7 {
        grid-column: span 6;
      }

      :where(html[data-page="industries"]) .growth-engine-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      :where(html[data-page="industries"]) .engine-desktop-diagram {
        display: none !important;
      }

      :where(html[data-page="industries"]) .engine-mobile-journey {
        display: flex;
      }

      :where(html[data-page="industries"]) .case-study-dark-box {
        gap: 32px;
        padding: 40px 28px;
      }

      :where(html[data-page="industries"]) .case-study-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
      }

      :where(html[data-page="industries"]) .case-study-left-story {
        max-width: 100%;
      }

      :where(html[data-page="industries"]) .case-study-left-story p {
        max-width: 100%;
      }

      :where(html[data-page="industries"]) .case-study-cta-wrap {
        align-items: flex-start;
        width: 100%;
      }

      :where(html[data-page="industries"]) .testimonials-layout-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="industries"]) .industries-hero-section {
        padding: 40px 0 54px;
      }

      :where(html[data-page="industries"]) .hero-stats-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }

      :where(html[data-page="industries"]) .signal-rail-box {
        grid-template-columns: repeat(2, 1fr);
        padding: 18px 20px;
      }

      :where(html[data-page="industries"]) .impact-tray-box {
        grid-template-columns: repeat(2, 1fr);
        padding: 20px;
        gap: 16px;
      }

      :where(html[data-page="industries"]) .playbooks-bento-grid {
        grid-template-columns: 1fr;
      }

      :where(html[data-page="industries"]) .playbook-card.span-5,:where(html[data-page="industries"]) 
      .playbook-card.span-7 {
        grid-column: span 1;
      }

      :where(html[data-page="industries"]) .solutions-2x2-grid {
        grid-template-columns: 1fr;
      }

      :where(html[data-page="industries"]) .case-study-dark-box {
        padding: 30px 18px;
        gap: 26px;
      }

      :where(html[data-page="industries"]) .case-study-cta-wrap .btn {
        width: 100%;
        justify-content: center;
      }

      :where(html[data-page="industries"]) .case-timeline-flow {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      :where(html[data-page="industries"]) .flow-separator-arrow {
        display: none;
      }

      :where(html[data-page="industries"]) .case-metric-rail {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }

      :where(html[data-page="industries"]) .final-cta-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        padding: 40px 24px;
      }

      :where(html[data-page="industries"]) .final-cta-action-area {
        width: 100%;
        align-items: flex-start;
      }

      :where(html[data-page="industries"]) .final-cta-action-area .btn {
        width: 100%;
        justify-content: center;
      }

      :where(html[data-page="industries"]) .final-cta-annotation {
        position: static;
        margin-top: 6px;
      }
    }

    @media (max-width: 430px) {
      :where(html[data-page="industries"]) .hero-main-title .highlight-gold {
        white-space: normal;
      }

      :where(html[data-page="industries"]) .hero-actions-row .btn {
        width: 100%;
        justify-content: center;
      }

      :where(html[data-page="industries"]) .signal-rail-box {
        grid-template-columns: 1fr;
      }

      :where(html[data-page="industries"]) .impact-tray-box {
        grid-template-columns: 1fr;
      }

      :where(html[data-page="industries"]) .constellation-wrapper {
        display: none;
      }

      :where(html[data-page="industries"]) .workspace-card {
        padding: 24px 18px;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      :where(html[data-page="industries"]) .btn,:where(html[data-page="industries"]) 
      .tab-dock-btn,:where(html[data-page="industries"]) 
      .playbook-card,:where(html[data-page="industries"]) 
      .engine-node {
        transition: none !important;
        animation: none !important;
      }
    }
  
/* shared-chrome.css */
@scope (:where(html[data-page="industries"]) .shared-kx-header,:where(html[data-page="industries"])  .shared-kx-mobile-drawer,:where(html[data-page="industries"])  .shared-site-footer) {
:scope { --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif; --container-max: 1240px; --color-yellow: #F8C72E; --color-primary-navy: #14243D; --transition: all .2s ease; font-family: var(--font-body, 'Plus Jakarta Sans', 'Inter', sans-serif); line-height: 1.5; }
:where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(a) { text-decoration: none; }



:scope {
  --kx-navy: #13243D;
  --kx-deep-navy: #0D1B31;
  --kx-secondary-navy: #1B3152;
  --kx-gold: #F9BE22;
  --kx-gold-hover: #FFCA3A;
  --kx-green: #00D084;
  --kx-cyan: #52BCEB;
  --kx-soft-cyan: #EAF8FF;
  --kx-soft-gold: #FFF8DD;
  --kx-soft-green: #E8F8F0;
  --kx-white: #FFFFFF;
  --kx-gray: #F4F6FA;
  --kx-pill-bg: #EDF3FA;
  --kx-border: #E8EDF4;
  --kx-border-subtle: #F1F4F9;
  --kx-text-dark: #13243D;
  --kx-text-muted: #65748B;
  --kx-radius-pill: 9999px;
  --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
}


:scope.shared-kx-header,
.shared-kx-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: 1px solid rgba(232, 237, 244, 0.8);
  transition: all 0.25s ease;
}

:scope.shared-kx-header.scrolled,
.shared-kx-header.scrolled {
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

:scope.shared-kx-header.menu-open,
.shared-kx-header.menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

.shared-kx-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .shared-kx-container {
    padding: 0 16px;
  }
}

.shared-kx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
}


.shared-kx-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0F1D32;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

.shared-kx-logo-tech {
  color: #00D084;
  font-weight: 800;
}


.shared-kx-nav-menu {
  display: flex;
  align-items: center;
  background: #EDF3FA;
  padding: 4px 6px;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(220, 230, 242, 0.85);
  box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
  flex-shrink: 1;
}

.shared-kx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shared-kx-nav-item {
  position: relative;
}

.shared-kx-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--kx-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-nav-link:hover {
  color: #0F1D32;
  background: rgba(255, 255, 255, 0.7);
}

.shared-kx-nav-link.active {
  color: #0F1D32 !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
}

.shared-kx-nav-link::after,
.shared-kx-nav-link.active::after {
  display: none !important;
}

.shared-kx-chevron-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  stroke: currentColor;
}


.shared-kx-dropdown-wrapper {
  position: relative;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper.open .shared-kx-chevron-icon {
  transform: rotate(180deg);
}

.shared-kx-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 250px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
  border: 1px solid var(--kx-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  pointer-events: none;
  z-index: 100;
}

/* Invisible hover bridge to eliminate the 8px cursor gap */
.shared-kx-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
  background: transparent;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper.open .shared-kx-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.shared-kx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #13243D;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.shared-kx-dropdown-item:hover {
  background: #F0F7FF;
  color: #0F1D32;
}


.shared-kx-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.shared-kx-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0F1D32;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-btn-pill-navy:hover {
  background: #1B2E4B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
}

.shared-kx-btn-pill-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F9BE22;
  color: #0F1D32;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
}

.shared-kx-btn-pill-gold:hover {
  background: #FFCA3A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
}

.shared-kx-btn-pill-navy:active,
.shared-kx-btn-pill-gold:active,
.kx-modal-submit:active {
  transform: translateY(0) scale(0.98);
}


.shared-kx-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0F1D32;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.shared-kx-mobile-toggle:hover {
  background: #EDF3FA;
}

@media (max-width: 1240px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-navy {
    display: none;
  }
}

@media (max-width: 1100px) {
  .shared-kx-nav-menu {
    display: none;
  }

  .shared-kx-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .shared-kx-nav-inner {
    height: 70px;
    gap: 8px;
  }
  .shared-kx-logo {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .shared-kx-logo {
    font-size: 18px;
  }
  .shared-kx-nav-actions {
    gap: 6px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 7px 11px;
    font-size: 11.5px;
    gap: 4px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold svg {
    display: none;
  }
  .shared-kx-mobile-toggle {
    padding: 6px;
  }
}

@media (max-width: 360px) {
  .shared-kx-container {
    padding: 0 6px;
  }
  .shared-kx-nav-inner {
    gap: 2px;
  }
  .shared-kx-logo {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  .shared-kx-nav-actions {
    gap: 2px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 5px 6px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  .shared-kx-mobile-toggle {
    padding: 2px;
  }
}


:scope.shared-kx-mobile-drawer,
.shared-kx-mobile-drawer {
  position: fixed;
  top: var(--header-height, 78px);
  left: 0;
  width: 100%;
  height: calc(100dvh - var(--header-height, 78px));
  background: #FFFFFF !important;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 40px rgba(19, 36, 61, 0.12);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :scope.shared-kx-mobile-drawer,
  .shared-kx-mobile-drawer {
    top: var(--header-height, 70px);
    height: calc(100dvh - var(--header-height, 70px));
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

:scope.shared-kx-mobile-drawer.open,
:scope.shared-kx-mobile-drawer.active,
.shared-kx-mobile-drawer.open,
.shared-kx-mobile-drawer.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  pointer-events: auto;
}

.shared-kx-mobile-nav-link {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 650;
  color: #14243D;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 12px;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.shared-kx-mobile-nav-link:hover {
  background: #F8FAFC;
  color: #0E1B2F;
}

.shared-kx-mobile-nav-link.active {
  background: #F4F7FB !important;
  color: #0E1B2F !important;
  font-weight: 750 !important;
  border-left: 3px solid #F8C72E;
  padding-left: 13px;
}

.shared-kx-mobile-nav-link.shared-sub {
  margin-left: 12px;
  margin-right: 4px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 550;
  color: #556987;
  background: #F8FAFC;
  border-radius: 10px;
  border-left: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.shared-kx-mobile-nav-link.shared-sub::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94A3B8;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.shared-kx-mobile-nav-link.shared-sub:hover,
.shared-kx-mobile-nav-link.shared-sub.active {
  background: #EDF4FB;
  color: #0E1B2F;
  border-left-color: #F8C72E;
}

.shared-kx-mobile-nav-link.shared-sub.active::before {
  background: #F8C72E;
  transform: scale(1.4);
}

.shared-kx-mobile-drawer-footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #EEF2F6;
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-gold {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(248, 199, 46, 0.3);
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-navy {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
  border-radius: 9999px;
}


.kx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 49, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  padding: 20px;
}

.kx-modal-overlay.active,
.kx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.kx-modal-dialog {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
  border: 1px solid var(--kx-border);
  overflow: hidden;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.kx-modal-overlay.active .kx-modal-dialog,
.kx-modal-overlay.is-open .kx-modal-dialog {
  transform: scale(1) translateY(0);
}

.kx-modal-header {
  padding: 28px 32px 16px;
  position: relative;
}

.kx-modal-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--kx-navy);
  margin: 0 0 6px;
}

.kx-modal-subtitle {
  font-size: 14px;
  color: var(--kx-text-muted);
  margin: 0;
}

.kx-modal-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--kx-gray);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-navy);
  transition: background 0.2s ease, transform 0.2s ease;
}

.kx-modal-close:hover {
  background: #E2E8F0;
  transform: rotate(90deg);
}

.kx-modal-body {
  padding: 0 32px 32px;
}

.kx-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx-form-label {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kx-navy);
}

.kx-form-input,
.kx-form-textarea,
.kx-form-select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--kx-border);
  background: var(--kx-gray);
  color: var(--kx-navy);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.kx-form-input:focus,
.kx-form-textarea:focus,
.kx-form-select:focus {
  outline: none;
  border-color: var(--kx-navy);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
}

.kx-modal-submit {
  background: var(--kx-navy);
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.kx-modal-submit:hover {
  background: var(--kx-deep-navy);
  transform: translateY(-1px);
}


:scope.shared-site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
  position: relative;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

:scope.shared-site-footer .shared-container,
:scope.shared-site-footer .shared-kx-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

.shared-footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand {
  min-width: 0;
}

.shared-footer-brand .shared-brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand .shared-brand-logo .shared-dot {
  color: #2FB7A7;
}

.shared-footer-brand p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  max-width: 290px;
}

.shared-footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.shared-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.shared-footer-links a {
  font-size: 0.835rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.shared-footer-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

.shared-footer-follow-wrapper {
  margin-top: 24px;
}

.shared-footer-follow-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.shared-footer-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.shared-social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  text-decoration: none;
  transition: var(--transition);
}

.shared-social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

.shared-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  flex-wrap: wrap;
  gap: 12px;
}


@media (max-width: 1180px) {
  .nav-link {
    padding: 6px 9px;
    font-size: 0.82rem;
  }
  .btn-nav-phone {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}


@media (max-width: 1024px) {
  :scope {
    --header-height: 66px;
  }
  .nav-menu-wrapper,
  .btn-phone-desktop {
    display: none !important;
  }
  .hamburger-btn {
    display: flex !important;
  }
  .btn-cta-desktop {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .shared-footer-brand p {
    max-width: 100%;
  }
}


@media (max-width: 768px) {
  :scope {
    --header-height: 62px;
  }
  .btn-cta-desktop {
    display: none !important;
  }
  .shared-site-footer {
    padding: 46px 0 24px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding-bottom: 28px;
  }
}


@media (max-width: 540px) {
  :scope {
    --header-height: 58px;
  }
  .nav-container {
    padding: 0 14px;
  }
  .hamburger-btn {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  .hamburger-btn span {
    width: 20px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
  }
  .shared-footer-col-company {
    grid-column: 1;
  }
  .shared-footer-col-solutions {
    grid-column: 2;
  }
  .shared-footer-col-resources {
    grid-column: 1 / -1;
  }
  .shared-footer-col h5 {
    margin-bottom: 12px;
  }
  .shared-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


@media (max-width: 360px) {
  .shared-brand-logo {
    font-size: 1.15rem;
  }
  .mobile-nav-drawer {
    width: 90vw;
    padding: 18px 14px 22px;
  }
  .mobile-nav-link {
    font-size: 0.95rem;
  }
}
  
}
:where(html[data-page="industries"]) .shared-kx-mobile-drawer { visibility: hidden; }
:where(html[data-page="industries"]) .shared-kx-mobile-drawer.open { visibility: visible; }
:where(html[data-page="industries"]) .shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="industries"]) .shared-kx-btn-pill-navy:active,:where(html[data-page="industries"]) 
  .shared-kx-btn-pill-gold:active,:where(html[data-page="industries"]) 
  .kx-modal-submit:active { transform: none; }
}

/* micro-interactions.css */
/* Shared feedback layer. Motion acknowledges actions; informational content stays still. */
:root:where([data-page="industries"]){--kx-feedback-ease:cubic-bezier(.2,.75,.25,1);--kx-feedback-duration:180ms}
:where(html[data-page="industries"]) :where(a,button,summary,input,textarea,select):focus-visible{outline:3px solid #187d6b!important;outline-offset:4px}
:where(html[data-page="industries"]) :where(.shared-kx-footer,.ma-dark,.ma-closing) :where(a,button):focus-visible{outline-color:#ffc526!important}
:where(html[data-page="industries"]) :where(button,summary,.kx-mi-action){-webkit-tap-highlight-color:rgba(245,169,22,.18);touch-action:manipulation}
:where(html[data-page="industries"]) .kx-mi-action{transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease),scale 120ms var(--kx-feedback-ease),box-shadow var(--kx-feedback-duration) var(--kx-feedback-ease),background-color var(--kx-feedback-duration) ease,border-color var(--kx-feedback-duration) ease!important}
:where(html[data-page="industries"]) .kx-mi-arrow{display:inline-block;transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease)!important}
:where(html[data-page="industries"]) .kx-mi-card{transition:translate 220ms var(--kx-feedback-ease),box-shadow 220ms var(--kx-feedback-ease),border-color 180ms ease!important}
:where(html[data-page="industries"]) .shared-footer-links a,:where(html[data-page="industries"]) .shared-kx-dropdown-item,:where(html[data-page="industries"]) .shared-kx-mobile-nav-link{ text-decoration-color:transparent;text-underline-offset:5px;transition:color 160ms ease,background-color 160ms ease,text-decoration-color 160ms ease!important}
:where(html[data-page="industries"]) .shared-footer-links a:focus-visible{ text-decoration:underline;text-decoration-color:currentColor }
:where(html[data-page="industries"]) :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea,select){transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease!important}
:where(html[data-page="industries"]) :where(input:not([type=checkbox]):not([type=radio]),textarea,select):focus{border-color:#187d6b!important;box-shadow:0 0 0 3px rgb(24 125 107 / .12)}
:where(html[data-page="industries"]) :where(button[aria-expanded],summary){transition:background-color 160ms ease,color 160ms ease!important}
:where(html[data-page="industries"]) :where(button[aria-expanded],summary):focus-visible{border-radius:8px}
@media(hover:hover) and (pointer:fine){
  :where(html[data-page="industries"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):hover{translate:0 -2px}
  :where(html[data-page="industries"]) .kx-mi-action:hover .kx-mi-arrow,:where(html[data-page="industries"]) .kx-mi-action:focus-visible .kx-mi-arrow{translate:3px 0}
  :where(html[data-page="industries"]) .kx-mi-card:hover,:where(html[data-page="industries"]) .kx-mi-card:focus-within{translate:0 -3px;border-color:#d8ba78;box-shadow:0 10px 24px rgb(16 32 57 / .08)}
  :where(html[data-page="industries"]) .shared-footer-links a:hover{text-decoration:underline;text-decoration-color:currentColor}
}
:where(html[data-page="industries"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):active{translate:0 0;scale:.98;transition-duration:80ms!important}
:where(html[data-page="industries"]) .kx-mi-card:active{translate:0 -1px}
/* Honor this preference for both this layer and pre-existing decorative loops. */
@media(prefers-reduced-motion:reduce){
  html:where([data-page="industries"]){scroll-behavior:auto!important}
  :where(html[data-page="industries"]) *,:where(html[data-page="industries"]) *::before,:where(html[data-page="industries"]) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  :where(html[data-page="industries"]) .kx-mi-action,:where(html[data-page="industries"]) .kx-mi-card,:where(html[data-page="industries"]) .kx-mi-arrow{translate:none!important;scale:none!important;transition:none!important}
  :where(html[data-page="industries"]) .shared-footer-links a,:where(html[data-page="industries"]) .shared-kx-dropdown-item,:where(html[data-page="industries"]) .shared-kx-mobile-nav-link{transition:none!important}
}

/* industries-upgrade.css */
/* Reference set: original -upgraded.png concepts; capabilities strip uses v2. */
:where(html[data-page="industries"]) body.industry-upgraded{--navy:#14243d;--text-primary:#14243d;--text-secondary:#65748b;--gold:#f8c72e;--font-heading:Outfit,Arial,sans-serif;--font-body:'Plus Jakarta Sans',Arial,sans-serif;background:#fbf8f1}
@scope (:where(html[data-page="industries"]) .shared-kx-header){.shared-kx-container{max-width:1240px;padding-inline:clamp(16px,4vw,24px)}}
:where(html[data-page="industries"]) .industry-upgraded main .container,:where(html[data-page="industries"]) .industry-upgraded #industries-hero .container{width:100%;max-width:1240px;padding-inline:clamp(16px,4vw,24px);margin-inline:auto;box-sizing:border-box}
:where(html[data-page="industries"]) .industry-upgraded main>section{scroll-margin-top:95px}
:where(html[data-page="industries"]) .industry-upgraded main :is(h1,h2,h3,h4,h5){font-family:Outfit,Arial,sans-serif}
:where(html[data-page="industries"]) .industry-upgraded .section-title{font-size:clamp(32px,3.5vw,50px);line-height:1.08;letter-spacing:-.035em;font-weight:750}
:where(html[data-page="industries"]) .industry-upgraded .section-desc{font-size:17px;line-height:1.7}
:where(html[data-page="industries"]) .industry-upgraded .btn{min-height:50px;font-family:Outfit,Arial,sans-serif;font-size:16px;gap:12px;padding:13px 24px}
:where(html[data-page="industries"]) .industry-upgraded .btn-yellow{background:linear-gradient(125deg,#ffda54,#ffc616);color:#14243d;box-shadow:0 8px 20px #f8c72e24}
:where(html[data-page="industries"]) .industry-upgraded :is(a,button,[role=button]):focus-visible{outline:3px solid #2e82fe;outline-offset:4px}
:where(html[data-page="industries"]) .industry-upgraded .industries-hero-section{padding:48px 0 38px;background:radial-gradient(ellipse at 90% 20%,#fff3cc60,transparent 50%),#fbf8f1}
:where(html[data-page="industries"]) .industry-upgraded .industriesHero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:42px;min-height:600px}
:where(html[data-page="industries"]) .industry-upgraded .industriesHero-title{font:800 clamp(34px,3.65vw,54px)/1.08 Outfit,Arial,sans-serif;letter-spacing:-.04em}
:where(html[data-page="industries"]) .industry-upgraded .industriesHero-desc{font:400 17px/1.75 'Plus Jakarta Sans',Arial,sans-serif;margin:25px 0 30px}
:where(html[data-page="industries"]) .industry-upgraded .industriesHero-cta-row{gap:12px;flex-wrap:wrap}
:where(html[data-page="industries"]) .industry-upgraded .industriesHero-cta-row a{font:600 15px Outfit,Arial,sans-serif;padding:15px 20px;min-height:52px;gap:10px}
:where(html[data-page="industries"]) .industry-upgraded .industriesHero-metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(20,36,61,.09);border-radius:20px;padding:16px 14px;box-shadow:0 8px 24px rgba(20,36,61,.035);margin-top:24px;box-sizing:border-box}
:where(html[data-page="industries"]) .industry-upgraded .industriesHero-metric-item{display:flex;flex-direction:column;align-items:flex-start;padding:0 14px;position:relative}
:where(html[data-page="industries"]) .industry-upgraded .industriesHero-metric-item:not(:last-child):after{content:'';position:absolute;right:0;top:4px;bottom:4px;width:1px;background:rgba(20,36,61,.08)}
:where(html[data-page="industries"]) .industry-upgraded .industriesHero-metric-item strong{font-family:Outfit,sans-serif;font-size:28px;font-weight:850;color:#14243d;letter-spacing:-.035em;line-height:1;margin-bottom:4px;font-variant-numeric:tabular-nums}
:where(html[data-page="industries"]) .industry-upgraded .industriesHero-metric-item span{font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:600;color:#65748b;line-height:1.35}
:where(html[data-page="industries"]) .industry-upgraded .industriesHero-card.is-dimmed{opacity:1}
:where(html[data-page="industries"]) .industry-upgraded .industriesHero-spin-cw,:where(html[data-page="industries"]) .industry-upgraded .industriesHero-spin-ccw{animation:none}
:where(html[data-page="industries"]) .industry-upgraded .signal-rail-section{padding:22px 0 46px;background:#fbf8f1}
:where(html[data-page="industries"]) .industry-upgraded .signal-rail-box{border-radius:24px;padding:22px 18px;box-shadow:0 10px 25px #14243d08;border:1px solid #e2e8f0;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
:where(html[data-page="industries"]) .industry-upgraded .signal-item{gap:10px}:where(html[data-page="industries"]) .industry-upgraded .signal-info-text strong{font-size:13px}:where(html[data-page="industries"]) .industry-upgraded .signal-info-text span{font-size:11px}:where(html[data-page="industries"]) .industry-upgraded .signal-icon-tile{width:38px;height:38px;flex:none}
:where(html[data-page="industries"]) .industry-upgraded :is(.showcase-section,.playbooks-section,.growth-engine-section,.case-study-section,.testimonials-section){padding:80px 0;background:#fbf8f1}
:where(html[data-page="industries"]) .industry-upgraded .showcase-section .container>div:first-child,:where(html[data-page="industries"]) .industry-upgraded .playbooks-section .container>div:first-child{max-width:900px!important;margin-bottom:34px!important}
:where(html[data-page="industries"]) .industry-upgraded .tabs-dock-wrapper{display:flex;gap:4px;padding:7px;border-radius:32px;background:#fffefa;border:1px solid #e8e2d4;overflow-x:auto;scrollbar-width:thin;margin-bottom:26px}
:where(html[data-page="industries"]) .industry-upgraded .tab-dock-btn{padding:12px 11px;font:500 13px Outfit,Arial,sans-serif;flex:1;min-height:44px;gap:6px}
:where(html[data-page="industries"]) .industry-upgraded .tab-dock-btn.active{background:#ffd13b;color:#14243d;border-color:#f8c72e;box-shadow:0 5px 15px #f8c72e25}:where(html[data-page="industries"]) .industry-upgraded .tab-dock-btn.active i{color:#14243d!important}
:where(html[data-page="industries"]) .industry-upgraded .workspace-card{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:32px;padding:24px;border-radius:26px;background:#fff;box-shadow:0 12px 28px #14243d08;align-items:stretch}
:where(html[data-page="industries"]) .industry-upgraded .workspace-visual-box{aspect-ratio:auto;min-height:460px;height:100%;box-shadow:none}:where(html[data-page="industries"]) .industry-upgraded .workspace-visual-box img{height:100%;min-height:460px;object-fit:cover}
:where(html[data-page="industries"]) .industry-upgraded .workspace-content-col{padding:8px 0;display:flex;flex-direction:column;justify-content:center}:where(html[data-page="industries"]) .industry-upgraded .workspace-header-row{display:none}
:where(html[data-page="industries"]) .industry-upgraded .workspace-title-wrap h3{font-size:34px}:where(html[data-page="industries"]) .industry-upgraded .workspace-title-wrap{margin-bottom:20px}:where(html[data-page="industries"]) .industry-upgraded .workspace-icon-circle{border-radius:18px}
:where(html[data-page="industries"]) .industry-upgraded .solutions-2x2-grid{gap:12px}:where(html[data-page="industries"]) .industry-upgraded .solution-tile{padding:14px 12px;gap:10px;background:#fcfbf8;border:1px solid #e8e5e0;border-radius:15px}:where(html[data-page="industries"]) .industry-upgraded .solution-tile-text h5{font-size:15px;line-height:1.3}:where(html[data-page="industries"]) .industry-upgraded .solution-tile-text p{font-size:12px;line-height:1.5}:where(html[data-page="industries"]) .industry-upgraded .workspace-actions-row{gap:12px;margin-top:24px;flex-wrap:wrap}
:where(html[data-page="industries"]) .industry-upgraded .impact-tray-box{border-radius:24px;background:#fff;padding:23px;box-shadow:0 10px 25px #14243d06}:where(html[data-page="industries"]) .industry-upgraded .impact-text h4{font-size:30px}
:where(html[data-page="industries"]) .industry-upgraded .playbooks-bento-grid{gap:22px;grid-auto-flow:dense}:where(html[data-page="industries"]) .industry-upgraded .playbook-card{border-radius:24px;box-shadow:0 12px 28px #14243d08;border-color:#e2e8f0;overflow:hidden}:where(html[data-page="industries"]) .industry-upgraded .playbook-img-wrap{height:230px}:where(html[data-page="industries"]) .industry-upgraded .playbook-card-body{padding:28px;position:relative}:where(html[data-page="industries"]) .industry-upgraded .playbook-card-body h4{font-size:26px;margin-bottom:12px}:where(html[data-page="industries"]) .industry-upgraded .playbook-card-body p{font-size:15px;line-height:1.65}:where(html[data-page="industries"]) .industry-upgraded .playbook-action-link{font-size:14px}
:where(html[data-page="industries"]) .industry-upgraded .growth-engine-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:55px;align-items:center}:where(html[data-page="industries"]) .industry-upgraded .engine-center-hub{background:radial-gradient(circle at 30% 15%,#23659a,#0c294c 50%,#071c35);border:1px solid #91b3cf;box-shadow:0 16px 30px #14243d22,inset 0 2px 5px #ffffff40;width:180px;height:180px;z-index:3}:where(html[data-page="industries"]) .industry-upgraded .engine-node{border-radius:18px;box-shadow:0 10px 24px #14243d0e;z-index:3}:where(html[data-page="industries"]) .industry-upgraded .engine-orbit-svg{z-index:0;overflow:visible}:where(html[data-page="industries"]) .industry-upgraded .engine-orbit-svg ellipse{stroke:#e6b52e;opacity:.5}
:where(html[data-page="industries"]) .industry-upgraded .engine-node.node-discover,:where(html[data-page="industries"]) .industry-upgraded .engine-node.node-convert{translate:-50% 0;transform:none}:where(html[data-page="industries"]) .industry-upgraded .engine-node.node-discover:hover,:where(html[data-page="industries"]) .industry-upgraded .engine-node.node-convert:hover{transform:translateY(-2px)}
:where(html[data-page="industries"]) .industry-upgraded .case-study-dark-box{background:radial-gradient(ellipse at 90% 10%,#123a64,transparent 60%),#092340;padding:44px;border-radius:28px;box-shadow:0 16px 32px #14243d22}:where(html[data-page="industries"]) .industry-upgraded .case-study-header-row{gap:30px}:where(html[data-page="industries"]) .industry-upgraded .case-study-left-story{max-width:750px}:where(html[data-page="industries"]) .industry-upgraded .case-study-left-story h3{font-size:38px;line-height:1.15;letter-spacing:-.025em}:where(html[data-page="industries"]) .industry-upgraded .case-study-left-story p{font-size:16px;line-height:1.7}:where(html[data-page="industries"]) .industry-upgraded .case-phase-badge{display:none}:where(html[data-page="industries"]) .industry-upgraded .case-phase-card{background:#ffffff07;border:1px solid #ffffff22;box-shadow:none;padding:24px;border-radius:22px}:where(html[data-page="industries"]) .industry-upgraded .case-phase-card h4{font-size:20px}:where(html[data-page="industries"]) .industry-upgraded .case-phase-card p{font-size:14px;line-height:1.6}:where(html[data-page="industries"]) .industry-upgraded .case-metric-rail{gap:18px}
:where(html[data-page="industries"]) .industry-upgraded .testimonials-header-row{max-width:1000px;margin:0 auto 38px;text-align:center}:where(html[data-page="industries"]) .industry-upgraded .testimonials-layout-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}:where(html[data-page="industries"]) .industry-upgraded .testimonial-featured-card{background:linear-gradient(145deg,#fffdf7,#fff9e9);border:1px solid #edd89a;padding:36px;box-shadow:0 10px 24px #14243d06}:where(html[data-page="industries"]) .industry-upgraded .testimonial-featured-card:before{content:'“';display:block;font:90px/.8 Georgia,serif;color:#dda700;margin-bottom:22px}:where(html[data-page="industries"]) .industry-upgraded .testimonial-featured-card .quote-body{font:650 29px/1.45 Outfit,Arial,sans-serif;margin-bottom:35px}:where(html[data-page="industries"]) .industry-upgraded .testimonial-support-card{padding:28px;border-radius:24px;box-shadow:0 10px 24px #14243d06}:where(html[data-page="industries"]) .industry-upgraded .testimonial-support-card .quote-body{font:400 19px/1.65 'Plus Jakarta Sans',Arial,sans-serif}:where(html[data-page="industries"]) .industry-upgraded .testimonials-stack-right{gap:20px}
:where(html[data-page="industries"]) .industry-upgraded .final-cta-section{padding:30px 0 85px;background:#fbf8f1}:where(html[data-page="industries"]) .industry-upgraded .final-cta-box{background:radial-gradient(ellipse at 80% 30%,#123a64,transparent 65%),#092340;border:1px solid #20415f;box-shadow:0 16px 32px #14243d20;padding:48px;gap:40px;border-radius:28px;overflow:hidden;isolation:isolate}:where(html[data-page="industries"]) .industry-upgraded .final-cta-box:before{content:'';position:absolute;right:-100px;top:-100px;width:600px;height:600px;border:1px solid #ffffff12;border-radius:50%;box-shadow:0 0 0 55px #ffffff03,0 0 0 110px #ffffff03;z-index:-1}:where(html[data-page="industries"]) .industry-upgraded .final-cta-copy{max-width:660px;flex:1;min-width:0}:where(html[data-page="industries"]) .industry-upgraded .final-cta-headline{font-size:38px;line-height:1.16;letter-spacing:-.03em}:where(html[data-page="industries"]) .industry-upgraded .final-cta-headline br{display:none}:where(html[data-page="industries"]) .industry-upgraded .final-cta-headline .highlight-gold{color:#ffd13b;background:none;white-space:normal}:where(html[data-page="industries"]) .industry-upgraded .final-cta-desc{font-size:16px;line-height:1.7}:where(html[data-page="industries"]) .industry-upgraded .final-cta-action-area{flex:0 1 330px;text-align:center}:where(html[data-page="industries"]) .industry-upgraded .final-cta-action-area .btn{white-space:normal;text-align:center;justify-content:center;padding:16px 24px!important}:where(html[data-page="industries"]) .industry-upgraded .final-cta-annotation{bottom:17px;font-size:19px}
:where(html[data-page="industries"]) .industry-upgraded .upgrade-motion{display:block;margin:8px 0 0 auto;background:none;border:0;color:#65748b;font-size:12px;padding:8px;text-decoration:underline;cursor:pointer}
@media(max-width:1100px){:where(html[data-page="industries"]) .industry-upgraded .industriesHero-grid{gap:25px}:where(html[data-page="industries"]) .industry-upgraded .industriesHero-title{font-size:38px}:where(html[data-page="industries"]) .industry-upgraded .signal-rail-box{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}:where(html[data-page="industries"]) .industry-upgraded .workspace-card{gap:22px}:where(html[data-page="industries"]) .industry-upgraded .workspace-actions-row .btn{font-size:14px;padding:12px 16px}:where(html[data-page="industries"]) .industry-upgraded .case-study-header-row{flex-direction:column}:where(html[data-page="industries"]) .industry-upgraded .case-study-cta-wrap{align-items:flex-start}:where(html[data-page="industries"]) .industry-upgraded .final-cta-box{gap:24px;padding:36px}}
@media(max-width:900px){:where(html[data-page="industries"]) .industry-upgraded .industriesHero-grid{grid-template-columns:1fr;gap:35px}:where(html[data-page="industries"]) .industry-upgraded .industriesHero-copy{max-width:650px}:where(html[data-page="industries"]) .industry-upgraded .industriesHero-title{font-size:clamp(32px,6vw,50px)}:where(html[data-page="industries"]) .industry-upgraded .industriesHero-desc{max-width:620px}:where(html[data-page="industries"]) .industry-upgraded .industriesHero-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px;max-width:100%}:where(html[data-page="industries"]) .industry-upgraded .industriesHero-metric-item:not(:last-child):after{display:none}:where(html[data-page="industries"]) .industry-upgraded .workspace-card{grid-template-columns:1fr}:where(html[data-page="industries"]) .industry-upgraded .workspace-visual-box,:where(html[data-page="industries"]) .industry-upgraded .workspace-visual-box img{min-height:320px;max-height:440px}:where(html[data-page="industries"]) .industry-upgraded .growth-engine-grid{grid-template-columns:1fr}:where(html[data-page="industries"]) .industry-upgraded .growth-engine-copy{max-width:650px}:where(html[data-page="industries"]) .industry-upgraded .testimonials-layout-grid{grid-template-columns:1fr}:where(html[data-page="industries"]) .industry-upgraded .final-cta-box{flex-direction:column;align-items:flex-start}:where(html[data-page="industries"]) .industry-upgraded .final-cta-action-area{flex:auto;align-items:flex-start}:where(html[data-page="industries"]) .industry-upgraded .final-cta-annotation{position:static;margin-top:16px}:where(html[data-page="industries"]) .industry-upgraded .case-timeline-flow{grid-template-columns:1fr;display:grid;gap:16px}:where(html[data-page="industries"]) .industry-upgraded .flow-separator-arrow{display:none}}
@media(max-width:600px){:where(html[data-page="industries"]) .industry-upgraded :is(.showcase-section,.playbooks-section,.growth-engine-section,.case-study-section,.testimonials-section){padding:50px 0}:where(html[data-page="industries"]) .industry-upgraded .signal-rail-box{grid-template-columns:repeat(2,minmax(0,1fr));padding:18px 12px;gap:22px 12px}:where(html[data-page="industries"]) .industry-upgraded .signal-item:after{display:none}:where(html[data-page="industries"]) .industry-upgraded .signal-info-text strong{font-size:13px}:where(html[data-page="industries"]) .industry-upgraded .signal-info-text span{font-size:11px}:where(html[data-page="industries"]) .industry-upgraded .workspace-card{padding:16px}:where(html[data-page="industries"]) .industry-upgraded .workspace-title-wrap h3{font-size:29px}:where(html[data-page="industries"]) .industry-upgraded .workspace-visual-box,:where(html[data-page="industries"]) .industry-upgraded .workspace-visual-box img{min-height:300px}:where(html[data-page="industries"]) .industry-upgraded .workspace-result-badge{left:12px;right:12px;padding:12px}:where(html[data-page="industries"]) .industry-upgraded .solutions-2x2-grid{grid-template-columns:1fr}:where(html[data-page="industries"]) .industry-upgraded .impact-tray-box{grid-template-columns:repeat(2,minmax(0,1fr));padding:18px;gap:25px 12px}:where(html[data-page="industries"]) .industry-upgraded .impact-item{gap:8px}:where(html[data-page="industries"]) .industry-upgraded .impact-text h4{font-size:25px}:where(html[data-page="industries"]) .industry-upgraded .impact-text p{font-size:12px}:where(html[data-page="industries"]) .industry-upgraded .playbooks-bento-grid{grid-template-columns:1fr}:where(html[data-page="industries"]) .industry-upgraded .playbook-card.span-5,:where(html[data-page="industries"]) .industry-upgraded .playbook-card.span-7{grid-column:auto}:where(html[data-page="industries"]) .industry-upgraded .playbook-card-body{padding:24px}:where(html[data-page="industries"]) .industry-upgraded .playbook-img-wrap{height:210px}:where(html[data-page="industries"]) .industry-upgraded .case-study-dark-box{padding:28px 20px}:where(html[data-page="industries"]) .industry-upgraded .case-study-left-story h3{font-size:30px}:where(html[data-page="industries"]) .industry-upgraded .case-metric-rail{display:grid;grid-template-columns:1fr}:where(html[data-page="industries"]) .industry-upgraded .testimonial-featured-card{padding:28px}:where(html[data-page="industries"]) .industry-upgraded .testimonial-featured-card .quote-body{font-size:25px}:where(html[data-page="industries"]) .industry-upgraded .testimonial-support-card .quote-body{font-size:17px}:where(html[data-page="industries"]) .industry-upgraded .final-cta-box{padding:32px 24px}:where(html[data-page="industries"]) .industry-upgraded .final-cta-headline{font-size:32px}:where(html[data-page="industries"]) .industry-upgraded .final-cta-section{padding-bottom:55px}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="industries"]) .industry-upgraded main *{animation:none!important;transition:none!important;scroll-behavior:auto!important}:where(html[data-page="industries"]) .upgrade-motion{display:none!important}}

/* industries-reference.css */
/* Exact attached reference reconstruction, September 2026. */
:where(html[data-page="industries"]) .reference-v3{--navy:#071c42;--text-primary:#071c42;--text-secondary:#577195;--gold:#ffc400;background:#fffcf5}
:where(html[data-page="industries"]) .reference-v3 main>section{background-color:#fffcf5}
:where(html[data-page="industries"]) .reference-v3 .reference-note{font:600 24px/1.05 Caveat,cursive;color:#657da1;display:flex;gap:7px;align-items:center;max-width:240px;position:relative}
:where(html[data-page="industries"]) .reference-note svg{width:48px;height:34px;flex:none;overflow:visible}:where(html[data-page="industries"]) .reference-v3 .reference-note.gold{color:#bd8c10}
:where(html[data-page="industries"]) .reference-v3 .reference-rays{position:relative}:where(html[data-page="industries"]) .reference-v3 .reference-rays:after{content:'';display:inline-block;width:34px;height:34px;margin-left:9px;background:linear-gradient(65deg,transparent 45%,#ffc400 46% 54%,transparent 55%) 3px 0/9px 20px no-repeat,linear-gradient(25deg,transparent 44%,#ffc400 45% 55%,transparent 56%) 12px 13px/22px 9px no-repeat;vertical-align:top}
:where(html[data-page="industries"]) .reference-v3 .signal-rail-section{padding:72px 0}:where(html[data-page="industries"]) .reference-trust-heading{text-align:center;margin-bottom:48px}:where(html[data-page="industries"]) .reference-trust-heading>.reference-note{margin:0 auto 18px}:where(html[data-page="industries"]) .reference-trust-heading .section-title{margin:0 0 18px}:where(html[data-page="industries"]) .reference-v3 .signal-rail-section .container{position:relative}:where(html[data-page="industries"]) .reference-v3 .trust-outcome{margin:0 0 14px auto}:where(html[data-page="industries"]) .reference-v3 .signal-rail-box{padding:24px 20px}:where(html[data-page="industries"]) .reference-v3 .signal-info-text strong{font-size:15px}:where(html[data-page="industries"]) .reference-v3 .signal-info-text span{font-size:12px}:where(html[data-page="industries"]) .reference-v3 .signal-icon-tile{width:44px;height:48px;border-radius:14px}
:where(html[data-page="industries"]) .reference-v3 .showcase-note{margin:18px 0 0 auto}:where(html[data-page="industries"]) .reference-v3 .showcase-section .section-title{max-width:760px;margin-inline:auto}:where(html[data-page="industries"]) .reference-v3 .playbooks-bento-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}:where(html[data-page="industries"]) .reference-v3 .playbook-card:is(.span-5,.span-7){grid-column:auto}:where(html[data-page="industries"]) .reference-v3 .playbook-img-wrap{height:190px}:where(html[data-page="industries"]) .reference-v3 .playbook-card-body{padding:24px 24px 24px 100px}:where(html[data-page="industries"]) .reference-v3 .playbook-card-body h4{font-size:25px;margin-bottom:8px}:where(html[data-page="industries"]) .reference-v3 .playbook-card-body p{margin-bottom:14px}:where(html[data-page="industries"]) .reference-playbook-icon{position:absolute;left:22px;top:24px;width:60px;height:64px;border-radius:18px;display:grid;place-items:center;font-size:34px}:where(html[data-page="industries"]) .tone-blue{background:#eaf3ff;color:#15386b}:where(html[data-page="industries"]) .tone-gold{background:#fff5d3;color:#ba8700}:where(html[data-page="industries"]) .tone-green{background:#e5faf1;color:#087664}:where(html[data-page="industries"]) .tone-purple{background:#f0eaff;color:#4b37ad}:where(html[data-page="industries"]) .reference-fulfillment-photo{width:100%;height:100%;display:block}:where(html[data-page="industries"]) .reference-v3 .playbook-intro-note{margin:16px 0 0 auto}:where(html[data-page="industries"]) .playbook-notes{grid-column:1/-1;display:flex;justify-content:space-between;gap:24px}
:where(html[data-page="industries"]) .reference-v3 .engine-desktop-diagram{display:block!important;max-width:650px;height:620px;aspect-ratio:auto}:where(html[data-page="industries"]) .reference-v3 .engine-node{width:190px;max-width:none;min-height:78px;padding:12px;gap:10px;overflow:visible}:where(html[data-page="industries"]) .reference-v3 .engine-node-icon{border-radius:50%;width:42px;height:42px}:where(html[data-page="industries"]) .reference-v3 .engine-node-text h5{font-size:17px}:where(html[data-page="industries"]) .reference-v3 .engine-node-text p{font-size:13px}:where(html[data-page="industries"]) .reference-v3 .engine-node.node-discover{left:50%;right:auto;top:55px;bottom:auto}:where(html[data-page="industries"]) .reference-v3 .engine-node.node-convert{left:50%;right:auto;bottom:55px;top:auto}:where(html[data-page="industries"]) .reference-v3 .engine-node.node-tailor{top:190px;left:0;bottom:auto}:where(html[data-page="industries"]) .reference-v3 .engine-node.node-acquire{top:190px;right:0;bottom:auto}:where(html[data-page="industries"]) .reference-v3 .engine-node.node-measure{top:360px;left:0;bottom:auto}:where(html[data-page="industries"]) .reference-v3 .engine-node.node-automate{top:360px;right:0;bottom:auto}:where(html[data-page="industries"]) .reference-v3 .engine-center-hub{width:180px;height:180px;top:50%;box-shadow:0 12px 22px #14243d20,0 0 0 16px #fff8df88,0 0 0 34px #fff9e855}:where(html[data-page="industries"]) .reference-v3 .engine-center-hub h4{font-size:22px}:where(html[data-page="industries"]) .reference-v3 .engine-center-hub span{font-size:12px;letter-spacing:0;margin-top:10px;border-top:1px solid #ffffff40;padding-top:8px}:where(html[data-page="industries"]) .reference-v3 .engine-node .reference-note{position:absolute;top:-56px;left:5px;font-size:21px;max-width:180px;pointer-events:none}:where(html[data-page="industries"]) .reference-v3 .node-convert .reference-note,:where(html[data-page="industries"]) .reference-v3 .node-measure .reference-note,:where(html[data-page="industries"]) .reference-v3 .node-automate .reference-note{top:90px}:where(html[data-page="industries"]) .reference-v3 .node-discover .reference-note{left:36px}:where(html[data-page="industries"]) .reference-v3 .engine-node:hover{transform:none}:where(html[data-page="industries"]) .reference-v3 .engine-node.node-discover:hover,:where(html[data-page="industries"]) .reference-v3 .engine-node.node-convert:hover{transform:none}
:where(html[data-page="industries"]) .reference-v3 .case-phase-icon{width:56px;height:56px;border-radius:16px;font-size:32px}:where(html[data-page="industries"]) .reference-v3 .case-timeline-flow{gap:0;display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr) 54px minmax(0,1fr);align-items:stretch}:where(html[data-page="industries"]) .reference-v3 .flow-separator-arrow{display:flex!important;align-items:center;width:84px;margin-inline:-15px;z-index:0}:where(html[data-page="industries"]) .flow-separator-arrow svg{width:100%;overflow:visible}:where(html[data-page="industries"]) .reference-v3 .case-phase-card{position:relative;z-index:1;padding:24px}:where(html[data-page="industries"]) .reference-v3 .case-metric-rail{border-top:1px solid #ffffff38;padding-top:22px}:where(html[data-page="industries"]) .reference-v3 .rail-metric-item{position:relative;padding:22px 16px 22px 90px;min-height:140px;justify-content:center}:where(html[data-page="industries"]) .reference-case-icon{position:absolute;width:56px;height:64px;border-radius:50%;border:1px solid #b1cdef70;left:18px;top:calc(50% - 32px);display:grid;place-items:center;font-size:32px;color:#8acfff;background:#4381b220}:where(html[data-page="industries"]) .rail-metric-item:first-child .reference-case-icon{color:#ffcf43}:where(html[data-page="industries"]) .rail-metric-item:nth-child(2) .reference-case-icon{color:#8fedbe}:where(html[data-page="industries"]) .reference-v3 .rail-metric-item strong{font-size:36px}:where(html[data-page="industries"]) .reference-v3 .rail-metric-item strong i{display:none}:where(html[data-page="industries"]) .reference-v3 .case-headline-highlight{position:relative}:where(html[data-page="industries"]) .reference-v3 .case-headline-highlight:after{content:'';position:absolute;bottom:-5px;left:8%;width:78%;height:7px;border-top:2px solid #ffc400;border-radius:50%}:where(html[data-page="industries"]) .reference-v3 .case-study-dark-box{position:relative;overflow:hidden;background:radial-gradient(ellipse at 10% 90%,#28525240,transparent 45%),repeating-radial-gradient(ellipse at 110% 20%,transparent 0 120px,#3f8dd316 121px 122px,transparent 123px 190px),linear-gradient(120deg,#032746,#082e57)}
:where(html[data-page="industries"]) .reference-v3 .testimonial-featured-card:before{display:none}:where(html[data-page="industries"]) .reference-v3 :is(.testimonial-featured-card,.testimonial-support-card){position:relative;padding:30px;gap:20px}:where(html[data-page="industries"]) .reference-v3 .reference-quote-badge{width:64px;height:64px;display:grid;place-items:center;border-radius:15px;background:#eaf3ff;color:#efb400;font:80px/1 Georgia,serif;padding-top:15px;margin-bottom:18px}:where(html[data-page="industries"]) .testimonial-featured-card .reference-quote-badge{background:#fff1cc}:where(html[data-page="industries"]) .reference-v3 .testimonial-featured-card .quote-body{font-size:30px;line-height:1.35;margin-bottom:30px}:where(html[data-page="industries"]) .reference-v3 .testimonial-support-card .quote-body{font-size:19px;line-height:1.55;margin-bottom:20px}:where(html[data-page="industries"]) .reference-v3 .testimonial-note{margin:12px 0 0 auto;font-size:23px}:where(html[data-page="industries"]) .reference-v3 .author-avatar-img{width:58px;height:58px;border:2px solid #ffc400}:where(html[data-page="industries"]) .reference-v3 .testimonials-header-row{max-width:1150px}:where(html[data-page="industries"]) .reference-v3 .testimonial-support-card .reference-quote-badge{width:54px;height:54px;font-size:70px}:where(html[data-page="industries"]) .reference-v3 .testimonial-support-card>.reference-note{position:absolute;top:24px;right:24px;width:130px}:where(html[data-page="industries"]) .reference-v3 .testimonial-support-card>.reference-note svg{width:32px}:where(html[data-page="industries"]) .reference-v3 .testimonial-featured-card>.reference-note{align-self:flex-end}
:where(html[data-page="industries"]) .reference-v3 .final-cta-box{display:grid;grid-template-columns:1.4fr 1fr;position:relative;padding-bottom:72px}:where(html[data-page="industries"]) .reference-v3 .final-cta-action-area{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}:where(html[data-page="industries"]) .reference-analytics{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:18px;margin-bottom:28px;width:100%}:where(html[data-page="industries"]) .reference-analytics span{display:grid;place-items:center;aspect-ratio:1;border-radius:18px;border:1px solid #aac8e560;background:linear-gradient(145deg,#ffffff25,#ffffff08);box-shadow:inset 0 1px 1px #ffffff45;color:#89adcf;font-size:46px}:where(html[data-page="industries"]) .reference-analytics span:first-child{color:#dfba52;transform:translateY(-10px)}:where(html[data-page="industries"]) .reference-analytics span:nth-child(3){transform:translateY(10px)}:where(html[data-page="industries"]) .reference-v3 .final-cta-annotation{right:36px;bottom:22px;font-size:24px}:where(html[data-page="industries"]) .reference-v3 .final-cta-eyebrow:after{content:'';display:inline-block;width:50px;border-top:1px solid #ffc400;margin-left:15px;vertical-align:middle}:where(html[data-page="industries"]) .reference-v3 .final-cta-box:after{content:'';position:absolute;width:11px;height:11px;right:20%;top:38px;background:#b99c4d;border-radius:50%;box-shadow:-300px 340px #b99c4d}:where(html[data-page="industries"]) .reference-v3 .final-cta-headline{font-size:38px}
:where(html[data-page="industries"]) .reference-v3 .reference-connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}:where(html[data-page="industries"]) .reference-v3 .engine-orbit-svg{visibility:hidden}
@media(min-width:901px) and (max-width:1150px){:where(html[data-page="industries"]) .reference-v3 .growth-engine-grid{grid-template-columns:1fr}:where(html[data-page="industries"]) .reference-v3 .engine-desktop-diagram{width:650px;max-width:100%}:where(html[data-page="industries"]) .reference-v3 .case-timeline-flow{grid-template-columns:1fr;gap:18px}:where(html[data-page="industries"]) .reference-v3 .flow-separator-arrow{width:48px;height:44px;justify-self:center;transform:rotate(90deg);margin:0}:where(html[data-page="industries"]) .reference-v3 .case-metric-rail{grid-template-columns:1fr}:where(html[data-page="industries"]) .reference-v3 .rail-metric-item{min-height:110px}}
@media(max-width:900px){:where(html[data-page="industries"]) .reference-v3 .engine-desktop-diagram{max-width:650px}:where(html[data-page="industries"]) .reference-v3 .playbooks-bento-grid{grid-template-columns:1fr}:where(html[data-page="industries"]) .reference-v3 .case-timeline-flow{grid-template-columns:1fr;gap:16px}:where(html[data-page="industries"]) .reference-v3 .flow-separator-arrow{width:80px;height:38px;justify-self:center;transform:rotate(90deg);margin:0}:where(html[data-page="industries"]) .reference-v3 .final-cta-box{grid-template-columns:1fr}:where(html[data-page="industries"]) .reference-v3 .final-cta-action-area{width:100%;max-width:470px}:where(html[data-page="industries"]) .reference-v3 .final-cta-annotation{position:static;grid-column:1}:where(html[data-page="industries"]) .reference-v3 .reference-analytics{max-width:330px}:where(html[data-page="industries"]) .reference-v3 .industriesHero-stage{height:620px!important;aspect-ratio:auto!important}:where(html[data-page="industries"]) .reference-v3 .industriesHero-desktop-canvas{display:block!important}:where(html[data-page="industries"]) .reference-v3 .industriesHero-mobile-rail{display:none!important}}
@media(max-width:600px){:where(html[data-page="industries"]) .reference-v3 .signal-rail-section{padding:50px 0}:where(html[data-page="industries"]) .reference-v3 .reference-note{font-size:21px}:where(html[data-page="industries"]) .reference-v3 .reference-trust-heading{margin-bottom:26px}:where(html[data-page="industries"]) .reference-v3 .signal-rail-box{padding:20px 14px}:where(html[data-page="industries"]) .reference-v3 .signal-item{flex-direction:column;align-items:flex-start}:where(html[data-page="industries"]) .reference-v3 .signal-info-text strong{font-size:15px}:where(html[data-page="industries"]) .reference-v3 .signal-info-text span{font-size:12px}:where(html[data-page="industries"]) .reference-v3 .trust-outcome{margin:0 0 18px auto}:where(html[data-page="industries"]) .reference-v3 .playbooks-bento-grid{grid-template-columns:1fr}:where(html[data-page="industries"]) .reference-v3 .playbook-card-body{padding:20px 18px 22px 76px}:where(html[data-page="industries"]) .reference-v3 .reference-playbook-icon{width:46px;height:52px;left:16px;top:21px;font-size:28px}:where(html[data-page="industries"]) .reference-v3 .playbook-card-body h4{font-size:23px}:where(html[data-page="industries"]) .reference-v3 .playbook-card-body p{font-size:14px}:where(html[data-page="industries"]) .reference-v3 .playbook-notes{gap:14px}:where(html[data-page="industries"]) .reference-v3 .playbook-notes .reference-note{font-size:19px;flex-direction:column}:where(html[data-page="industries"]) .reference-v3 .playbook-img-wrap{height:170px}:where(html[data-page="industries"]) .reference-v3 .case-study-dark-box{padding:26px 20px}:where(html[data-page="industries"]) .reference-v3 .case-phase-card{padding:22px}:where(html[data-page="industries"]) .reference-v3 .rail-metric-item{padding-left:88px;min-height:124px}:where(html[data-page="industries"]) .reference-v3 .rail-metric-item strong{font-size:34px}:where(html[data-page="industries"]) .reference-v3 .testimonial-featured-card .quote-body{font-size:24px}:where(html[data-page="industries"]) .reference-v3 :is(.testimonial-featured-card,.testimonial-support-card){padding:24px}:where(html[data-page="industries"]) .reference-v3 .testimonial-support-card>.reference-note{right:18px;max-width:120px}:where(html[data-page="industries"]) .reference-v3 .final-cta-box{padding:30px 24px;gap:28px}:where(html[data-page="industries"]) .reference-v3 .final-cta-headline{font-size:31px}:where(html[data-page="industries"]) .reference-v3 .final-cta-action-area .btn{width:100%;font-size:16px!important}:where(html[data-page="industries"]) .reference-v3 .final-cta-annotation{font-size:22px}:where(html[data-page="industries"]) .reference-v3 .reference-analytics{gap:15px}:where(html[data-page="industries"]) .reference-v3 .reference-analytics span{font-size:38px}
/* The same semantic nodes remain connected and readable on phones. */
:where(html[data-page="industries"]) .reference-v3 #kxConstellation{width:100%;height:610px!important;aspect-ratio:auto!important;min-height:0!important;max-width:none!important}:where(html[data-page="industries"]) .reference-v3 .industriesHero-desktop-canvas{height:610px;display:block!important}:where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-sphere{left:50%!important;top:200px!important;width:142px!important;height:142px!important;padding:12px!important;transform:translate(-50%,-50%)!important}:where(html[data-page="industries"]) .reference-v3 .industriesHero-sphere-status{gap:4px}:where(html[data-page="industries"]) .reference-v3 .industriesHero-sphere-status span:last-child{font-size:9px!important;letter-spacing:.04em}:where(html[data-page="industries"]) .reference-v3 .industriesHero-sphere-dot{width:6px;height:6px}:where(html[data-page="industries"]) .reference-v3 .industriesHero-sphere-brand{font-size:22px!important}:where(html[data-page="industries"]) .reference-v3 .industriesHero-sphere-subtitle{font-size:12px!important;line-height:1.2}:where(html[data-page="industries"]) .reference-v3 .industriesHero-sphere-meta{font-size:9px!important;letter-spacing:0}:where(html[data-page="industries"]) .reference-v3 .industriesHero-sphere-sector{font-size:10px!important}:where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-card{width:calc((100% - 20px)/2)!important;min-height:86px;height:auto!important;padding:12px 10px!important;display:flex;gap:7px;left:auto;right:auto;bottom:auto;transform:none!important;translate:none!important;opacity:1!important}:where(html[data-page="industries"]) .reference-v3 .industriesHero-card-icon{width:28px!important;height:34px!important;flex:none;border-radius:10px!important;font-size:22px!important}:where(html[data-page="industries"]) .reference-v3 .industriesHero-card-title{font-size:14px!important;white-space:normal!important;line-height:1.2}:where(html[data-page="industries"]) .reference-v3 .industriesHero-card-sub{font-size:12px!important;white-space:normal!important;line-height:1.3}:where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-card-education{left:0;top:15px}:where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-card-healthcare{right:0;top:15px;left:auto}:where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-card-ecommerce{left:0;top:330px}:where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-card-realestate{right:0;top:330px;left:auto}:where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-card-technology{left:0;top:475px}:where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-card-manufacturing{right:0;top:475px;left:auto}:where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-annotation{display:flex!important;left:12px!important;top:auto!important;bottom:3px!important;font-size:22px!important;transform:none}:where(html[data-page="industries"]) .reference-v3 .industriesHero-svg{display:none}:where(html[data-page="industries"]) .reference-v3 .industriesHero-card-text{gap:4px}
:where(html[data-page="industries"]) .reference-v3 .engine-desktop-diagram{height:730px!important;width:100%;max-width:none}:where(html[data-page="industries"]) .reference-v3 .engine-center-hub{top:239px;width:142px;height:142px;padding:13px}:where(html[data-page="industries"]) .reference-v3 .engine-center-hub h4{font-size:20px}:where(html[data-page="industries"]) .reference-v3 .engine-center-hub span{font-size:10px}:where(html[data-page="industries"]) .reference-v3 .engine-node{width:calc((100% - 20px)/2);min-height:85px;padding:10px;gap:7px;max-width:none;translate:none!important;transform:none!important;bottom:auto!important}:where(html[data-page="industries"]) .reference-v3 .engine-node-icon{width:28px;height:34px;border-radius:10px;font-size:22px}:where(html[data-page="industries"]) .reference-v3 .engine-node-text h5{font-size:14px}:where(html[data-page="industries"]) .reference-v3 .engine-node-text p{font-size:12px;line-height:1.4}:where(html[data-page="industries"]) .reference-v3 .engine-node.node-discover{top:45px;left:0;right:auto}:where(html[data-page="industries"]) .reference-v3 .engine-node.node-acquire{top:45px;right:0;left:auto}:where(html[data-page="industries"]) .reference-v3 .engine-node.node-tailor{top:385px;left:0}:where(html[data-page="industries"]) .reference-v3 .engine-node.node-automate{top:385px;right:0}:where(html[data-page="industries"]) .reference-v3 .engine-node.node-measure{top:595px;left:0}:where(html[data-page="industries"]) .reference-v3 .engine-node.node-convert{top:595px;right:0;left:auto}:where(html[data-page="industries"]) .reference-v3 .engine-node .reference-note{top:calc(100% + 9px);left:0;font-size:19px;max-width:100%;gap:1px;line-height:1}:where(html[data-page="industries"]) .reference-v3 .engine-node .reference-note svg{width:24px}:where(html[data-page="industries"]) .reference-v3 .engine-node.node-measure .reference-note,:where(html[data-page="industries"]) .reference-v3 .engine-node.node-convert .reference-note{top:calc(100% + 9px)}
}
:where(html[data-page="industries"]) .reference-v3 .testimonials-header-row{display:block;width:100%;text-align:center}:where(html[data-page="industries"]) .reference-v3 .testimonials-header-row>div{width:100%}:where(html[data-page="industries"]) .reference-v3 #engine-heading{text-wrap:balance;font-size:clamp(32px,3.05vw,44px)}
:where(html[data-page="industries"]) .reference-v3 .reference-rays:after{background:linear-gradient(65deg,transparent 36%,#ffc400 38% 63%,transparent 65%) 3px 0/6px 20px no-repeat,linear-gradient(25deg,transparent 34%,#ffc400 36% 63%,transparent 65%) 11px 13px/22px 6px no-repeat,linear-gradient(-12deg,transparent 30%,#ffc400 34% 64%,transparent 68%) 13px 25px/20px 5px no-repeat}
:where(html[data-page="industries"]) .reference-v3 .playbooks-section{background-image:radial-gradient(ellipse at 0 30%,#fff1c344,transparent 35%),radial-gradient(ellipse at 100% 65%,#fff1c333,transparent 35%)}
@media(min-width:901px){:where(html[data-page="industries"]) .reference-v3 .final-cta-action-area{min-height:290px;justify-content:center;padding-top:132px;padding-left:80px}:where(html[data-page="industries"]) .reference-v3 .reference-analytics{position:absolute;top:0;left:0;width:220px;grid-template-columns:85px 85px;gap:24px;pointer-events:none}:where(html[data-page="industries"]) .reference-v3 .reference-analytics span{font-size:40px}:where(html[data-page="industries"]) .reference-v3 .reference-analytics span:nth-child(2){transform:translateY(20px)}:where(html[data-page="industries"]) .reference-v3 .reference-analytics span:nth-child(3){transform:translateY(8px)}:where(html[data-page="industries"]) .reference-v3 .final-cta-action-area .btn{z-index:2;font-size:16px!important;padding-inline:20px!important}:where(html[data-page="industries"]) .reference-v3 .cta-subcopy{font-size:12px}}
@media(max-width:600px){:where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-card{border-radius:18px!important}:where(html[data-page="industries"]) .reference-v3 .case-study-left-story h3{text-wrap:balance}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="industries"]) .reference-v3 *{scroll-behavior:auto!important}}
@media(min-width:601px) and (max-width:1100px){:where(html[data-page="industries"]) .reference-v3 .industriesHero-grid{grid-template-columns:1fr}:where(html[data-page="industries"]) .reference-v3 .industriesHero-copy{max-width:680px}:where(html[data-page="industries"]) .reference-v3 #kxConstellation{width:650px;max-width:100%;aspect-ratio:865/728;height:auto!important}:where(html[data-page="industries"]) .reference-v3 .industriesHero-desktop-canvas{display:block!important;min-height:547px}:where(html[data-page="industries"]) .reference-v3 .industriesHero-annotation{display:flex!important}}
@media(min-width:901px){:where(html[data-page="industries"]) .reference-v3 .playbooks-section .section-title .highlight-gold{display:table;margin-inline:auto}}
:where(html[data-page="industries"]) .reference-v3 .playbook-note-slot{position:relative;min-width:0;display:flex}:where(html[data-page="industries"]) .reference-v3 .playbook-note-slot>.playbook-card{width:100%}:where(html[data-page="industries"]) .reference-v3 .playbook-note-slot>.reference-note{position:absolute;top:50%;translate:0 -50%;width:76px;max-width:76px;font-size:21px;flex-direction:column;gap:8px}:where(html[data-page="industries"]) .reference-v3 .note-left>.reference-note{left:-90px}:where(html[data-page="industries"]) .reference-v3 .note-right>.reference-note{right:-90px}:where(html[data-page="industries"]) .reference-v3 .note-left>.reference-note svg{rotate:-60deg;width:36px}:where(html[data-page="industries"]) .reference-v3 .note-right>.reference-note svg{rotate:210deg;width:36px}
@media(max-width:1399px){:where(html[data-page="industries"]) .reference-v3 .playbook-note-slot.note-left{padding-left:76px}:where(html[data-page="industries"]) .reference-v3 .playbook-note-slot.note-right{padding-right:76px}:where(html[data-page="industries"]) .reference-v3 .note-left>.reference-note{left:0}:where(html[data-page="industries"]) .reference-v3 .note-right>.reference-note{right:0}:where(html[data-page="industries"]) .reference-v3 .playbook-note-slot>.reference-note{width:64px;max-width:64px;font-size:20px}}
@media(max-width:768px){:where(html[data-page="industries"]) .reference-v3 .playbook-note-slot.note-left{padding-left:0!important}:where(html[data-page="industries"]) .reference-v3 .playbook-note-slot.note-right{padding-right:0!important}:where(html[data-page="industries"]) .reference-v3 .playbook-note-slot>.reference-note{display:none!important}}
@media(max-width:600px){:where(html[data-page="industries"]) .reference-v3 .playbook-note-slot.note-left{padding-left:0!important}:where(html[data-page="industries"]) .reference-v3 .playbook-note-slot.note-right{padding-right:0!important}:where(html[data-page="industries"]) .reference-v3 .playbook-note-slot>.reference-note{display:none!important}:where(html[data-page="industries"]) .reference-v3 .playbook-note-slot .playbook-card-body{padding:18px}:where(html[data-page="industries"]) .reference-v3 .playbook-note-slot .reference-playbook-icon{position:static;margin-bottom:12px}:where(html[data-page="industries"]) .reference-v3 .playbook-note-slot .playbook-card-body h4{font-size:21px}}
:where(html[data-page="industries"]) .reference-v3 .targeted-annotation-arrow{display:inline-block!important;width:42px!important;height:30px!important;flex:0 0 42px;rotate:0deg!important;translate:none!important;transform-origin:center;vertical-align:middle;overflow:visible;pointer-events:none}
:where(html[data-page="industries"]) .reference-v3 .handwritten-annotation:has(.targeted-annotation-arrow){display:inline-flex;align-items:center;gap:8px}
@media(max-width:600px){:where(html[data-page="industries"]) .reference-v3 .engine-node .targeted-annotation-arrow{width:22px!important;height:18px!important;flex-basis:22px}:where(html[data-page="industries"]) .reference-v3 .playbook-note-slot .targeted-annotation-arrow{width:30px!important;height:26px!important;flex-basis:30px}:where(html[data-page="industries"]) .reference-v3 .final-cta-annotation .targeted-annotation-arrow{width:30px!important;height:24px!important;flex-basis:30px}}

/* industries-mobile-orbits.css */
/* Phone diagrams retain the desktop's radial meaning without shrinking its labels. */
@media(max-width:600px){
 :where(html[data-page="industries"]) .reference-v3 #kxConstellation,:where(html[data-page="industries"]) .reference-v3 .industriesHero-desktop-canvas{height:552px!important;min-height:0!important}
 :where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-sphere{top:253px!important;width:126px!important;height:126px!important;box-shadow:0 10px 22px #082b5526,inset 0 2px 4px #73daff99}
 :where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-card{width:calc(50% - 12px)!important;min-height:78px!important;padding:11px 9px!important;border-radius:16px!important;box-shadow:0 7px 18px #14243d0c;align-items:center}
 :where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-card-education{left:50%!important;top:0!important;translate:-50% 0!important;width:166px!important}
 :where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-card-healthcare{left:0!important;right:auto!important;top:104px!important}
 :where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-card-realestate{right:0!important;left:auto!important;top:104px!important}
 :where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-card-ecommerce{left:0!important;top:326px!important}
 :where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-card-manufacturing{right:0!important;left:auto!important;top:326px!important}
 :where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-card-technology{left:50%!important;right:auto!important;top:430px!important;translate:-50% 0!important;width:166px!important}
 :where(html[data-page="industries"]) .reference-v3 .industriesHero-card-title{font-size:14px!important;letter-spacing:-.02em}
 :where(html[data-page="industries"]) .reference-v3 .industriesHero-card-sub{font-size:12px!important;line-height:1.25}
 :where(html[data-page="industries"]) .reference-v3 .industriesHero-card-icon{width:26px!important;height:32px!important;font-size:21px!important}
 :where(html[data-page="industries"]) .reference-v3 .industriesHero-sphere-brand{font-size:20px!important}:where(html[data-page="industries"]) .reference-v3 .industriesHero-sphere-subtitle{font-size:11px!important}:where(html[data-page="industries"]) .reference-v3 .industriesHero-sphere-meta{font-size:8px!important}:where(html[data-page="industries"]) .reference-v3 .industriesHero-sphere-sector{font-size:9px!important}
 :where(html[data-page="industries"]) .reference-v3 #industries-hero .industriesHero-annotation{left:50%!important;translate:-50% 0;bottom:0!important;font-size:21px!important;white-space:nowrap}
 :where(html[data-page="industries"]) .reference-v3 .engine-desktop-diagram{height:626px!important;background:radial-gradient(ellipse at center,#fff5d944,transparent 65%)}
 :where(html[data-page="industries"]) .reference-v3 .engine-center-hub{top:301px!important;width:126px!important;height:126px!important;box-shadow:0 9px 20px #14243d15,0 0 0 12px #fff8df77}
 :where(html[data-page="industries"]) .reference-v3 .engine-center-hub h4{font-size:19px!important}:where(html[data-page="industries"]) .reference-v3 .engine-center-hub span{font-size:9px!important;margin-top:7px;padding-top:7px}
 :where(html[data-page="industries"]) .reference-v3 .engine-node{width:calc(50% - 12px)!important;min-height:108px!important;display:grid;grid-template-columns:28px minmax(0,1fr);gap:5px 7px;align-content:center;padding:10px!important;border-radius:16px!important;box-shadow:0 7px 18px #14243d0c}
 :where(html[data-page="industries"]) .reference-v3 .engine-node-icon{width:28px;height:32px;font-size:21px}:where(html[data-page="industries"]) .reference-v3 .engine-node-text h5{font-size:14px;line-height:1.2}:where(html[data-page="industries"]) .reference-v3 .engine-node-text p{font-size:12px;line-height:1.25}
 :where(html[data-page="industries"]) .reference-v3 .engine-node .reference-note{position:static!important;grid-column:1/-1;max-width:none!important;width:auto!important;font-size:17px!important;line-height:1.05;margin-top:3px;text-align:center;justify-content:center;color:#6d83a1;pointer-events:none}
 :where(html[data-page="industries"]) .reference-v3 .engine-node .reference-note svg{display:none}
 :where(html[data-page="industries"]) .reference-v3 .engine-node.node-discover{top:0!important;left:50%!important;right:auto!important;translate:-50% 0!important;width:170px!important}
 :where(html[data-page="industries"]) .reference-v3 .engine-node.node-tailor{top:126px!important;left:0!important;right:auto!important}
 :where(html[data-page="industries"]) .reference-v3 .engine-node.node-acquire{top:126px!important;right:0!important;left:auto!important}
 :where(html[data-page="industries"]) .reference-v3 .engine-node.node-measure{top:372px!important;left:0!important;right:auto!important}
 :where(html[data-page="industries"]) .reference-v3 .engine-node.node-automate{top:372px!important;right:0!important;left:auto!important}
 :where(html[data-page="industries"]) .reference-v3 .engine-node.node-convert{top:506px!important;left:50%!important;right:auto!important;translate:-50% 0!important;width:170px!important}
}
@media(max-width:600px){
 :where(html[data-page="industries"]) .reference-v3 .engine-node .reference-note{padding-right:24px;text-align:left;justify-content:flex-start}
 :where(html[data-page="industries"]) .reference-v3 .engine-node .targeted-annotation-arrow{position:absolute;right:7px;top:54px;width:28px!important;height:30px!important;flex-basis:28px;display:block!important;color:#5476a1}
 :where(html[data-page="industries"]) .reference-v3 .engine-node .targeted-annotation-arrow path{stroke-width:2}
 :where(html[data-page="industries"]) .reference-v3 .reference-note:not(.engine-node-note) .targeted-annotation-arrow{width:34px!important;height:30px!important;flex-basis:34px}
}

/* page-container-rhythm.css */
/* Shared page rhythm: mirrors the Industries page container at every breakpoint. */
:root:where([data-page="industries"]) {
  --kx-page-container: 1240px;
  --kx-page-gutter: 24px;
}

:where(html[data-page="industries"]) .shared-kx-header > .shared-kx-container,:where(html[data-page="industries"]) 
.ux-page .shared-kx-container,:where(html[data-page="industries"]) 
main > section > :is(
  .container,
  .su-container,
  .impact-container,
  .origin-desktop-view,
  .phil-container,
  .journey-tl-container,
  .careersHero-container,
  .chFeels-container,
  .contact-hero-v2-container,
  .contact-container,
  .taste-inner,
  .ai-container,
  .rv-container,
  .wd-container,
  .wd-tech-container,
  .wd-testi-faq-container,
  .kx-ah-container,
  .ma-container,
  .kats-container,
  .cloud-hero-container,
  .kx-container
),:where(html[data-page="industries"]) 
body > section > :is(
  .container,
  .contact-container,
  .cloud-hero-container,
  .kx-container
) {
  width: 100% !important;
  max-width: var(--kx-page-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--kx-page-gutter) !important;
  padding-right: var(--kx-page-gutter) !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  :root:where([data-page="industries"]) { --kx-page-gutter: 16px; }
}

/* This section previously put its gutter on the full-width background itself. */
@media (max-width: 1023px) {
  :where(html[data-page="industries"]) .wd-tech-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}



/* PAGE careers */
/* careers.html embedded 1 */

    /* ==========================================================================
       KAXON TECHNOLOGIES - CAREERS DESIGN SYSTEM
       High-Conversion Employer Branding System
       ========================================================================== */
    :root:where([data-page="careers"]) {
      --navy-primary: #082D57;
      --navy-deep: #061F3A;
      --navy-card: #0c2340;
      --blue-primary: #2D80FF;
      --blue-soft: #EAF3FF;
      --yellow-primary: #FFBF00;
      --yellow-hover: #E8AE00;
      --yellow-soft: #FFF2B8;
      --gold: #FFBF00;
      --cream-bg: #FFFDF8;
      --cream-warm: #F8F4EC;
      --surface: #FFFFFF;
      --white: #FFFFFF;
      --text-primary: #082D57;
      --text-secondary: #5C748E;
      --text-muted: #8195AA;
      --border-color: #E4EBF2;
      --border-light: rgba(8, 45, 87, 0.08);

      /* Accent Colors */
      --green: #34C993;
      --green-soft: #EBF8F2;
      --pink: #FF5F9D;
      --pink-soft: #FFEAF3;
      --purple: #8068FF;
      --purple-soft: #F1EEFF;
      --orange: #FF8748;
      --orange-soft: #FFF1EA;
      --cyan: #36BFEA;
      --cyan-soft: #E8F8FD;

      /* Typography */
      --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-hand: 'Caveat', cursive, sans-serif;

      /* Radii */
      --r-sm: 10px;
      --r-md: 16px;
      --r-lg: 24px;
      --r-xl: 28px;
      --r-pill: 9999px;

      /* Shadows */
      --shadow-card: 0 10px 28px rgba(8, 45, 87, 0.06);
      --shadow-hover: 0 18px 42px rgba(8, 45, 87, 0.12);
      --shadow-yellow: 0 10px 26px rgba(255, 191, 0, 0.28);
      --shadow-floating: 0 14px 34px rgba(8, 45, 87, 0.14);

      /* Layout */
      --max-width: 1360px;
      --header-height: 76px;
      --transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    }

    :where(html[data-page="careers"]) *,:where(html[data-page="careers"])  *::before,:where(html[data-page="careers"])  *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html:where([data-page="careers"]) {
      scroll-behavior: smooth;
      font-size: 16px;
      background-color: var(--cream-bg);
    }

    :where(html[data-page="careers"]) body {
      font-family: var(--font-main);
      color: var(--text-primary);
      background-color: var(--cream-bg);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    :where(html[data-page="careers"]) img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    :where(html[data-page="careers"]) a {
      color: inherit;
      text-decoration: none;
      transition: var(--transition);
    }

    :where(html[data-page="careers"]) button,:where(html[data-page="careers"])  input,:where(html[data-page="careers"])  select,:where(html[data-page="careers"])  textarea {
      font-family: inherit;
      font-size: inherit;
      border: none;
      outline: none;
    }

    :where(html[data-page="careers"]) button {
      cursor: pointer;
      background: none;
    }

    :where(html[data-page="careers"]) .container {
      width: 100%;
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 32px;
    }

    @media (max-width: 1024px) {
      :where(html[data-page="careers"]) .container { padding: 0 24px; }
    }
    @media (max-width: 640px) {
      :where(html[data-page="careers"]) .container { padding: 0 16px; }
    }

    /* ==========================================================================
       TYPOGRAPHY & HIGHLIGHTS
       ========================================================================== */
    :where(html[data-page="careers"]) .highlight-yellow {
      display: inline-block;
      background-color: var(--yellow-primary);
      color: var(--navy-primary);
      padding: 3px 12px;
      border-radius: 8px;
      margin-top: 6px;
      margin-bottom: 2px;
      line-height: 1.18;
      vertical-align: middle;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    :where(html[data-page="careers"]) .eyebrow-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--blue-primary);
      background: var(--blue-soft);
      padding: 6px 14px;
      border-radius: var(--r-pill);
      margin-bottom: 16px;
    }

    :where(html[data-page="careers"]) .handwritten-annotation {
      font-family: var(--font-hand);
      font-size: 1.45rem;
      color: #0A4B8C;
      font-weight: 700;
      line-height: 1.15;
      pointer-events: none;
      user-select: none;
    }

    /* ==========================================================================
       BUTTONS
       ========================================================================== */
    :where(html[data-page="careers"]) .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-weight: 700;
      font-size: 0.9375rem;
      padding: 13px 26px;
      border-radius: var(--r-pill);
      transition: var(--transition);
      white-space: nowrap;
      line-height: 1;
    }

    :where(html[data-page="careers"]) .btn:hover {
      transform: translateY(-2px);
    }
    :where(html[data-page="careers"]) .btn:active {
      transform: scale(0.98);
    }

    :where(html[data-page="careers"]) .btn-yellow {
      background-color: var(--yellow-primary);
      color: var(--navy-primary);
      box-shadow: var(--shadow-yellow);
    }
    :where(html[data-page="careers"]) .btn-yellow:hover {
      background-color: var(--yellow-hover);
      box-shadow: 0 14px 30px rgba(255, 191, 0, 0.4);
    }

    :where(html[data-page="careers"]) .btn-navy {
      background-color: var(--navy-primary);
      color: var(--white);
    }
    :where(html[data-page="careers"]) .btn-navy:hover {
      background-color: var(--navy-deep);
      box-shadow: 0 8px 22px rgba(8, 45, 87, 0.25);
    }

    :where(html[data-page="careers"]) .btn-outline {
      border: 1.5px solid var(--border-color);
      background-color: var(--white);
      color: var(--navy-primary);
    }
    :where(html[data-page="careers"]) .btn-outline:hover {
      border-color: var(--navy-primary);
      box-shadow: var(--shadow-card);
    }

    :where(html[data-page="careers"]) .btn-sm {
      padding: 9px 18px;
      font-size: 0.85rem;
    }

    /* ==========================================================================
       HEADER & NAVIGATION
       ========================================================================== */
    :where(html[data-page="careers"]) .site-header {
      position: sticky;
      top: 0;
      width: 100%;
      height: var(--header-height);
      background: rgba(255, 253, 248, 0.94);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 900;
      border-bottom: 1px solid rgba(8, 45, 87, 0.06);
      transition: var(--transition);
    }

    :where(html[data-page="careers"]) .site-header.scrolled {
      background: rgba(255, 253, 248, 0.98);
      box-shadow: 0 10px 28px rgba(8, 45, 87, 0.05);
    }

    :where(html[data-page="careers"]) .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
    }

    :where(html[data-page="careers"]) .brand-logo {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 1.45rem;
      font-weight: 800;
      color: var(--navy-primary);
      letter-spacing: -0.03em;
    }

    :where(html[data-page="careers"]) .brand-logo .accent-word {
      color: #18C59C;
      font-weight: 800;
    }

    :where(html[data-page="careers"]) .desktop-nav {
      display: flex;
      align-items: center;
      gap: 32px;
      list-style: none;
    }

    :where(html[data-page="careers"]) .nav-link {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--text-secondary);
      position: relative;
      padding: 6px 2px;
    }

    :where(html[data-page="careers"]) .nav-link:hover {
      color: var(--navy-primary);
    }

    :where(html[data-page="careers"]) .nav-link.active {
      color: var(--navy-primary);
      font-weight: 700;
    }

    :where(html[data-page="careers"]) .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2.5px;
      background: var(--blue-primary);
      border-radius: 2px;
    }

    :where(html[data-page="careers"]) .header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    :where(html[data-page="careers"]) .mobile-menu-btn {
      display: none;
      padding: 8px;
      font-size: 1.6rem;
      color: var(--navy-primary);
    }

    /* Mobile Drawer */
    :where(html[data-page="careers"]) .mobile-drawer {
      position: fixed;
      top: var(--header-height);
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--cream-bg);
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      transform: translateY(-100%);
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s ease;
      z-index: 899;
      overflow-y: auto;
      border-bottom: 1px solid var(--border-color);
    }

    :where(html[data-page="careers"]) .mobile-drawer.open {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    :where(html[data-page="careers"]) .mobile-nav-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    :where(html[data-page="careers"]) .mobile-nav-link {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--navy-primary);
      display: block;
      padding: 8px 0;
    }

    
    /* ==========================================================================
       SECTION 01: HERO — 100-DAY CAREER ACCELERATION SYSTEM
       ========================================================================== */
    :where(html[data-page="careers"]) .careers-hero-section {
      background: radial-gradient(circle at 72% 32%, rgba(45, 128, 255, 0.09) 0%, transparent 60%),
                  radial-gradient(circle at 90% 70%, rgba(24, 197, 156, 0.07) 0%, transparent 55%),
                  linear-gradient(180deg, #FFFDF8 0%, #FFF9EB 55%, #FFFDF8 100%);
      padding: 56px 0 42px;
      position: relative;
      overflow: hidden;
      width: 100%;
    }

    :where(html[data-page="careers"]) .careers-hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
      gap: clamp(40px, 4.8vw, 64px);
      align-items: center;
      min-height: 640px;
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="careers"]) .careers-hero-grid > *,:where(html[data-page="careers"]) 
    .careers-signal-grid > *,:where(html[data-page="careers"]) 
    .trajectory-node,:where(html[data-page="careers"]) 
    .careers-signal-card {
      min-width: 0;
      box-sizing: border-box;
      max-width: 100%;
    }

    /* Left Narrative Column */
    :where(html[data-page="careers"]) .careers-hero-left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      z-index: 2;
    }

    :where(html[data-page="careers"]) .careers-eyebrow-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      background: #EAF3FF;
      border: 1px solid rgba(45, 128, 255, 0.14);
      border-radius: var(--r-pill);
      color: #1768DA;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      margin-bottom: 22px;
    }

    :where(html[data-page="careers"]) .careers-eyebrow-pill i {
      font-size: 0.95rem;
      color: #2D80FF;
    }

    :where(html[data-page="careers"]) .careers-hero-title {
      font-family: 'Manrope', 'Inter', -apple-system, sans-serif;
      font-size: clamp(2.85rem, 4.4vw, 4.25rem);
      font-weight: 900;
      line-height: 1.12;
      letter-spacing: -0.045em;
      color: var(--navy-primary);
      margin-bottom: 22px;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    :where(html[data-page="careers"]) .careers-headline-highlight {
      display: inline;
      background-color: var(--yellow-primary);
      color: var(--navy-primary);
      padding: 2px 10px;
      border-radius: 8px;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    :where(html[data-page="careers"]) .careers-hero-desc {
      font-size: 1.0625rem;
      line-height: 1.68;
      color: var(--text-secondary);
      max-width: 585px;
      margin-bottom: 28px;
    }

    /* Culture Progression Bar */
    :where(html[data-page="careers"]) .culture-progression-bar {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.94);
      border: 1px solid rgba(8, 45, 87, 0.08);
      border-radius: var(--r-pill);
      padding: 6px 14px 6px 8px;
      box-shadow: 0 4px 14px rgba(8, 45, 87, 0.04);
      margin-bottom: 32px;
      flex-wrap: wrap;
    }

    :where(html[data-page="careers"]) .progression-step {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.8125rem;
      font-weight: 750;
      color: var(--navy-primary);
      padding: 4px 10px;
      border-radius: var(--r-pill);
      transition: all 0.18s ease;
    }

    :where(html[data-page="careers"]) .progression-step:hover {
      transform: translateY(-1px);
    }

    :where(html[data-page="careers"]) .progression-step i {
      font-size: 0.95rem;
    }

    :where(html[data-page="careers"]) .progression-arrow {
      color: var(--text-muted);
      font-size: 0.85rem;
      opacity: 0.5;
    }

    /* Action CTA Group */
    :where(html[data-page="careers"]) .careers-hero-actions {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      position: relative;
    }

    :where(html[data-page="careers"]) .careers-hero-annotation {
      position: absolute;
      top: -38px;
      right: -24px;
      font-family: var(--font-hand);
      font-size: 1.35rem;
      font-weight: 700;
      color: #0C548F;
      pointer-events: none;
      user-select: none;
      transform: rotate(3deg);
      white-space: nowrap;
    }

    /* Right Visual Stage: Career Acceleration Cockpit */
    :where(html[data-page="careers"]) .careers-hero-stage {
      position: relative;
      background: radial-gradient(circle at 56% 45%, rgba(45, 128, 255, 0.13), transparent 43%),
                  linear-gradient(145deg, #FFFFFF 0%, #F8FBFF 100%);
      border: 1px solid rgba(8, 45, 87, 0.08);
      border-radius: 30px;
      box-shadow: 0 24px 64px rgba(8, 45, 87, 0.08);
      padding: clamp(26px, 3.6vw, 36px);
      min-height: 610px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      box-sizing: border-box;
      z-index: 2;
    }

    :where(html[data-page="careers"]) .stage-header-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 20px;
      z-index: 4;
      position: relative;
      gap: 14px;
    }

    :where(html[data-page="careers"]) .stage-eyebrow {
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--blue-primary);
      display: block;
      margin-bottom: 3px;
    }

    :where(html[data-page="careers"]) .stage-title {
      font-family: 'Manrope', sans-serif;
      font-size: 1.35rem;
      font-weight: 850;
      color: var(--navy-primary);
      line-height: 1.15;
    }

    :where(html[data-page="careers"]) .stage-subtitle {
      font-size: 0.8125rem;
      color: var(--text-secondary);
      font-weight: 600;
    }

    :where(html[data-page="careers"]) .stage-momentum-badge-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
    }

    :where(html[data-page="careers"]) .stage-momentum-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.725rem;
      font-weight: 800;
      color: var(--navy-primary);
      background: rgba(255, 191, 0, 0.22);
      border: 1px solid rgba(255, 191, 0, 0.45);
      border-radius: var(--r-pill);
      padding: 4px 10px;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    :where(html[data-page="careers"]) .stage-momentum-pill i {
      color: #B38600;
      font-size: 0.85rem;
    }

    :where(html[data-page="careers"]) .stage-annotation-corner {
      font-family: var(--font-hand);
      font-size: 1.15rem;
      font-weight: 700;
      color: #0C548F;
      transform: rotate(-2deg);
      pointer-events: none;
      text-align: right;
      white-space: nowrap;
    }

    /* Trajectory Nodes Layout */
    :where(html[data-page="careers"]) .trajectory-track-wrapper {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 10px;
      z-index: 3;
      padding: 8px 0;
    }

    /* Ascending SVG Path */
    :where(html[data-page="careers"]) .trajectory-svg-line {
      position: absolute;
      top: 18px;
      left: 20px;
      bottom: 18px;
      width: 2px;
      background: linear-gradient(180deg, rgba(45,128,255,0.25) 0%, rgba(255,191,0,0.55) 55%, rgba(128,104,255,0.45) 100%);
      border-radius: 2px;
      z-index: 1;
      pointer-events: none;
    }

    :where(html[data-page="careers"]) .trajectory-node {
      position: relative;
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(8, 45, 87, 0.08);
      border-radius: var(--r-md);
      padding: 12px 16px;
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      box-shadow: 0 4px 16px rgba(8, 45, 87, 0.035);
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
      z-index: 2;
    }

    :where(html[data-page="careers"]) .trajectory-node:hover {
      transform: translateY(-2px) scale(1.005);
      box-shadow: 0 10px 26px rgba(8, 45, 87, 0.09);
      border-color: rgba(45, 128, 255, 0.35);
    }

    :where(html[data-page="careers"]) .trajectory-node.active {
      background: #FFFFFF;
      border: 1.5px solid var(--yellow-primary);
      box-shadow: 0 12px 30px rgba(255, 191, 0, 0.24);
      transform: translateY(-2px) scale(1.01);
    }

    :where(html[data-page="careers"]) .trajectory-node-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
      flex-shrink: 0;
    }

    :where(html[data-page="careers"]) .trajectory-node-content {
      min-width: 0;
    }

    :where(html[data-page="careers"]) .trajectory-meta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 2px;
    }

    :where(html[data-page="careers"]) .trajectory-day-badge {
      font-size: 0.6875rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 2px 7px;
      border-radius: 5px;
      line-height: 1;
    }

    :where(html[data-page="careers"]) .trajectory-phase-tag {
      font-size: 0.6875rem;
      font-weight: 750;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      text-transform: uppercase;
    }

    :where(html[data-page="careers"]) .trajectory-node-title {
      font-family: 'Manrope', sans-serif;
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--navy-primary);
      line-height: 1.2;
      margin-bottom: 2px;
    }

    :where(html[data-page="careers"]) .trajectory-node-desc {
      font-size: 0.775rem;
      color: var(--text-secondary);
      line-height: 1.35;
      margin: 0 0 4px 0;
    }

    :where(html[data-page="careers"]) .trajectory-micro-tags {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    :where(html[data-page="careers"]) .trajectory-micro-tag {
      font-size: 0.65rem;
      font-weight: 700;
      color: var(--navy-primary);
      background: rgba(8, 45, 87, 0.04);
      border-radius: 4px;
      padding: 1px 6px;
      line-height: 1.3;
    }

    :where(html[data-page="careers"]) .trajectory-micro-tag.accent {
      background: rgba(45, 128, 255, 0.09);
      color: #1768DA;
    }

    /* Growth Dimensions Bar */
    :where(html[data-page="careers"]) .growth-dimensions-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-top: 12px;
      padding: 8px 12px;
      background: rgba(8, 45, 87, 0.025);
      border: 1px solid rgba(8, 45, 87, 0.05);
      border-radius: var(--r-md);
      z-index: 4;
    }

    :where(html[data-page="careers"]) .dimension-pill {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    :where(html[data-page="careers"]) .dimension-pill .dim-label {
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    :where(html[data-page="careers"]) .dimension-pill .dim-progression {
      font-size: 0.725rem;
      font-weight: 750;
      color: var(--navy-primary);
      line-height: 1.15;
    }

    /* Stage Footer Telemetry */
    :where(html[data-page="careers"]) .stage-telemetry-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(8, 45, 87, 0.06);
      flex-wrap: wrap;
      z-index: 4;
    }

    :where(html[data-page="careers"]) .telemetry-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.725rem;
      color: var(--navy-primary);
      font-weight: 700;
      background: rgba(255, 255, 255, 0.88);
      border: 1px solid rgba(8, 45, 87, 0.06);
      border-radius: var(--r-pill);
      padding: 4px 10px;
    }

    :where(html[data-page="careers"]) .telemetry-item i {
      font-size: 0.85rem;
      color: var(--blue-primary);
    }

    :where(html[data-page="careers"]) .telemetry-item span {
      color: var(--text-secondary);
      font-weight: 600;
    }

    /* ==========================================================================
       SECTION 01B: QUICK-SIGNAL STRIP (WHAT WORKING HERE FEELS LIKE)
       ========================================================================== */
    :where(html[data-page="careers"]) .careers-signal-section {
      padding: 0 0 64px;
      background: var(--cream-bg);
      position: relative;
      z-index: 3;
    }

    :where(html[data-page="careers"]) .careers-signal-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="careers"]) .careers-signal-card {
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(8, 45, 87, 0.07);
      border-radius: 16px;
      padding: 18px 20px;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      box-shadow: 0 4px 14px rgba(8, 45, 87, 0.03);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    :where(html[data-page="careers"]) .careers-signal-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(8, 45, 87, 0.07);
      border-color: rgba(45, 128, 255, 0.2);
    }

    :where(html[data-page="careers"]) .signal-card-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      flex-shrink: 0;
    }

    :where(html[data-page="careers"]) .signal-card-text h4 {
      font-family: 'Manrope', sans-serif;
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--navy-primary);
      line-height: 1.2;
      margin-bottom: 2px;
    }

    :where(html[data-page="careers"]) .signal-card-text p {
      font-size: 0.775rem;
      color: var(--text-secondary);
      line-height: 1.35;
      margin: 0;
    }

    /* Responsive System */
    @media (max-width: 1024px) {
      :where(html[data-page="careers"]) .careers-hero-grid {
        grid-template-columns: 1fr;
        gap: 46px;
      }
      :where(html[data-page="careers"]) .careers-hero-left {
        align-items: center;
        text-align: center;
      }
      :where(html[data-page="careers"]) .careers-hero-desc {
        max-width: 620px;
      }
      :where(html[data-page="careers"]) .culture-progression-bar {
        justify-content: center;
      }
      :where(html[data-page="careers"]) .careers-hero-actions {
        justify-content: center;
      }
      :where(html[data-page="careers"]) .careers-hero-annotation {
        display: none;
      }
      :where(html[data-page="careers"]) .stage-annotation-corner {
        display: none;
      }
      :where(html[data-page="careers"]) .careers-signal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="careers"]) .careers-hero-section {
        padding: 40px 0 28px;
      }
      :where(html[data-page="careers"]) .careers-hero-title {
        font-size: clamp(2.1rem, 8vw, 2.85rem);
        line-height: 1.15;
      }
      :where(html[data-page="careers"]) .careers-headline-highlight {
        padding: 3px 8px;
        margin-top: 4px;
      }
      :where(html[data-page="careers"]) .culture-progression-bar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding: 8px 12px;
        border-radius: var(--r-md);
        width: 100%;
        max-width: 440px;
      }
      :where(html[data-page="careers"]) .progression-arrow {
        display: none;
      }
      :where(html[data-page="careers"]) .careers-hero-actions {
        width: 100%;
        flex-direction: column;
        gap: 10px;
      }
      :where(html[data-page="careers"]) .careers-hero-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 52px;
      }
      :where(html[data-page="careers"]) .careers-hero-stage {
        padding: 20px 16px;
        border-radius: 22px;
        min-height: auto;
      }
      :where(html[data-page="careers"]) .trajectory-node {
        padding: 12px 14px;
        gap: 12px;
      }
      :where(html[data-page="careers"]) .trajectory-node-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
      }
      :where(html[data-page="careers"]) .growth-dimensions-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
      }
      :where(html[data-page="careers"]) .stage-telemetry-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
      }
      :where(html[data-page="careers"]) .telemetry-item {
        font-size: 0.725rem;
        padding: 6px 12px;
        justify-content: space-between;
      }
      /* Strict 2x2 Signal Strip on Mobile down to 320px */
      :where(html[data-page="careers"]) .careers-signal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
      }
      :where(html[data-page="careers"]) .careers-signal-card {
        padding: 12px 14px;
        gap: 10px;
      }
      :where(html[data-page="careers"]) .signal-card-icon {
        width: 32px;
        height: 32px;
        font-size: 1.1rem;
      }
      :where(html[data-page="careers"]) .signal-card-text h4 {
        font-size: 0.85rem;
      }
      :where(html[data-page="careers"]) .signal-card-text p {
        font-size: 0.725rem;
      }
    }

    /* ==========================================================================
       SECTION 02: WHY WORK AT KAXON
       ========================================================================== */
    :where(html[data-page="careers"]) .why-kaxon-section {
      padding: 90px 0;
      background: var(--cream-bg);
    }

    :where(html[data-page="careers"]) .why-kaxon-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
      gap: 48px;
      align-items: flex-start;
    }

    :where(html[data-page="careers"]) .why-intro-sticky {
      position: sticky;
      top: 100px;
    }

    :where(html[data-page="careers"]) .section-title {
      font-family: 'Manrope', 'Inter', -apple-system, sans-serif;
      font-size: clamp(1.85rem, 3.5vw, 2.9rem);
      font-weight: 800;
      line-height: 1.18;
      letter-spacing: -0.025em;
      color: var(--navy-primary);
      margin-bottom: 18px;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    :where(html[data-page="careers"]) .section-desc {
      font-size: 1.0625rem;
      color: var(--text-secondary);
      line-height: 1.65;
      margin-bottom: 28px;
    }

    :where(html[data-page="careers"]) .why-annotation-wrap {
      margin-top: 24px;
      display: inline-block;
    }

    :where(html[data-page="careers"]) .cards-grid-6 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    :where(html[data-page="careers"]) .why-card {
      background: var(--white);
      border-radius: var(--r-lg);
      padding: 28px 24px;
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-card);
      transition: var(--transition);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
    }

    :where(html[data-page="careers"]) .why-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(45, 128, 255, 0.25);
    }

    :where(html[data-page="careers"]) .why-card-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      flex-shrink: 0;
    }

    :where(html[data-page="careers"]) .why-card h3 {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--navy-primary);
      line-height: 1.3;
    }

    :where(html[data-page="careers"]) .why-card p {
      font-size: 0.9375rem;
      color: var(--text-secondary);
      line-height: 1.55;
    }

    /* ==========================================================================
       SECTION 03: LIFE AT KAXON
       ========================================================================== */
    :where(html[data-page="careers"]) .life-kaxon-section {
      padding: 90px 0;
      background: var(--white);
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }

    :where(html[data-page="careers"]) .life-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: 52px;
      align-items: center;
    }

    :where(html[data-page="careers"]) .collage-container {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    :where(html[data-page="careers"]) .collage-top {
      position: relative;
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: var(--shadow-card);
    }

    :where(html[data-page="careers"]) .collage-top img {
      width: 100%;
      height: 290px;
      object-fit: cover;
    }

    :where(html[data-page="careers"]) .collage-tag-pill {
      position: absolute;
      top: 16px;
      left: 16px;
      background: var(--yellow-primary);
      color: var(--navy-primary);
      font-weight: 800;
      font-size: 0.75rem;
      padding: 6px 12px;
      border-radius: 6px;
      letter-spacing: 0.04em;
    }

    :where(html[data-page="careers"]) .collage-text-overlay {
      position: absolute;
      top: 16px;
      right: 16px;
      background: rgba(8, 45, 87, 0.85);
      backdrop-filter: blur(8px);
      color: var(--white);
      padding: 10px 14px;
      border-radius: 10px;
      font-weight: 700;
      font-size: 0.85rem;
      max-width: 180px;
      line-height: 1.25;
    }

    :where(html[data-page="careers"]) .collage-bottom-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    :where(html[data-page="careers"]) .collage-bottom-item {
      border-radius: var(--r-md);
      overflow: hidden;
      box-shadow: var(--shadow-card);
      height: 165px;
    }

    :where(html[data-page="careers"]) .collage-bottom-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    :where(html[data-page="careers"]) .metrics-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 36px;
    }

    :where(html[data-page="careers"]) .metric-card {
      background: var(--cream-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--r-md);
      padding: 20px 16px;
      text-align: center;
      transition: var(--transition);
    }

    :where(html[data-page="careers"]) .metric-card:hover {
      background: var(--white);
      box-shadow: var(--shadow-card);
      border-color: var(--blue-primary);
      transform: translateY(-2px);
    }

    :where(html[data-page="careers"]) .metric-icon {
      font-size: 1.4rem;
      color: var(--blue-primary);
      margin-bottom: 8px;
      display: inline-block;
    }

    :where(html[data-page="careers"]) .metric-val {
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--navy-primary);
      line-height: 1.1;
      margin-bottom: 4px;
    }

    :where(html[data-page="careers"]) .metric-label {
      font-size: 0.8125rem;
      color: var(--text-secondary);
      font-weight: 600;
    }

    /* ==========================================================================
       SECTION 04: OPEN POSITIONS
       ========================================================================== */
    :where(html[data-page="careers"]) .open-positions-section {
      padding: 90px 0;
      background: var(--cream-bg);
    }

    :where(html[data-page="careers"]) .positions-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 36px;
      flex-wrap: wrap;
      gap: 20px;
    }

    :where(html[data-page="careers"]) .filter-dropdown-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    :where(html[data-page="careers"]) .custom-select {
      appearance: none;
      -webkit-appearance: none;
      background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='%23082D57' d='m213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") no-repeat right 16px center;
      border: 1.5px solid var(--border-color);
      border-radius: var(--r-pill);
      padding: 12px 42px 12px 20px;
      font-weight: 600;
      font-size: 0.9375rem;
      color: var(--navy-primary);
      cursor: pointer;
      box-shadow: var(--shadow-card);
      transition: var(--transition);
      min-width: 190px;
    }

    :where(html[data-page="careers"]) .custom-select:focus,:where(html[data-page="careers"])  .custom-select:hover {
      border-color: var(--navy-primary);
    }

    :where(html[data-page="careers"]) .job-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    :where(html[data-page="careers"]) .job-card {
      background: var(--white);
      border: 1px solid var(--border-color);
      border-radius: var(--r-md);
      box-shadow: var(--shadow-card);
      transition: var(--transition);
      overflow: hidden;
    }

    :where(html[data-page="careers"]) .job-card:hover {
      border-color: rgba(8, 45, 87, 0.22);
      box-shadow: var(--shadow-hover);
    }

    :where(html[data-page="careers"]) .job-card-main {
      padding: 18px 24px;
      display: grid;
      grid-template-columns: 2.2fr 1fr 1fr 1.2fr auto;
      align-items: center;
      gap: 18px;
      cursor: pointer;
    }

    :where(html[data-page="careers"]) .job-role-info {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    :where(html[data-page="careers"]) .job-icon-circle {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35rem;
      flex-shrink: 0;
    }

    :where(html[data-page="careers"]) .job-title-group h3 {
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--navy-primary);
      line-height: 1.25;
    }

    :where(html[data-page="careers"]) .job-title-group span {
      font-size: 0.8125rem;
      color: var(--text-muted);
      font-weight: 500;
    }

    :where(html[data-page="careers"]) .job-meta-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.875rem;
      color: var(--text-secondary);
      font-weight: 500;
    }

    /* Expandable Job Details Accordion */
    :where(html[data-page="careers"]) .job-details-expand {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
      background: #FAFCFE;
      border-top: 1px solid var(--border-color);
    }

    :where(html[data-page="careers"]) .job-card.expanded .job-details-expand {
      max-height: 500px;
      opacity: 1;
      padding: 24px;
    }

    :where(html[data-page="careers"]) .job-details-inner {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 24px;
    }

    :where(html[data-page="careers"]) .job-details-col h4 {
      font-size: 0.9375rem;
      font-weight: 700;
      color: var(--navy-primary);
      margin-bottom: 8px;
    }

    :where(html[data-page="careers"]) .job-details-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 0.875rem;
      color: var(--text-secondary);
    }

    :where(html[data-page="careers"]) .job-details-col ul li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    :where(html[data-page="careers"]) .job-details-col ul li i {
      color: var(--green);
      margin-top: 3px;
      flex-shrink: 0;
    }

    /* ==========================================================================
       SECTION 05: HIRING PROCESS
       ========================================================================== */
    :where(html[data-page="careers"]) .hiring-process-section {
      padding: 90px 0;
      background: var(--cream-bg);
      border-top: 1px solid var(--border-color);
    }

    :where(html[data-page="careers"]) .hiring-timeline-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
      position: relative;
      margin-top: 48px;
    }

    :where(html[data-page="careers"]) .timeline-step-card {
      background: var(--white);
      border-radius: var(--r-md);
      padding: 22px 18px;
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-card);
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: var(--transition);
    }

    :where(html[data-page="careers"]) .timeline-step-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: var(--blue-primary);
    }

    :where(html[data-page="careers"]) .step-badge-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    :where(html[data-page="careers"]) .step-num-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.775rem;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: var(--r-pill);
    }

    :where(html[data-page="careers"]) .step-arrow-indicator {
      color: var(--text-muted);
      font-size: 0.95rem;
    }

    :where(html[data-page="careers"]) .step-icon-round {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
    }

    :where(html[data-page="careers"]) .timeline-step-card h3 {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--navy-primary);
      line-height: 1.25;
    }

    :where(html[data-page="careers"]) .timeline-step-card p {
      font-size: 0.8125rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    /* ==========================================================================
       SECTION 06: TEAM TESTIMONIALS
       ========================================================================== */
    :where(html[data-page="careers"]) .testimonials-section {
      padding: 90px 0;
      background: var(--white);
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }

    :where(html[data-page="careers"]) .testimonials-header-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 40px;
    }

    :where(html[data-page="careers"]) .carousel-arrows {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    :where(html[data-page="careers"]) .arrow-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1.5px solid var(--border-color);
      background: var(--white);
      color: var(--navy-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      transition: var(--transition);
    }

    :where(html[data-page="careers"]) .arrow-btn:hover {
      background: var(--navy-primary);
      color: var(--white);
      border-color: var(--navy-primary);
    }

    :where(html[data-page="careers"]) .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
    }

    :where(html[data-page="careers"]) .testimonial-card {
      background: var(--cream-bg);
      border-radius: var(--r-lg);
      padding: 32px 28px;
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 24px;
      transition: var(--transition);
    }

    :where(html[data-page="careers"]) .testimonial-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      background: var(--white);
    }

    :where(html[data-page="careers"]) .testimonial-quote {
      font-size: 1rem;
      line-height: 1.6;
      color: var(--navy-primary);
      font-weight: 500;
    }

    :where(html[data-page="careers"]) .star-rating {
      display: flex;
      gap: 4px;
      color: #FFB800;
      font-size: 1.05rem;
      margin-bottom: 16px;
    }

    :where(html[data-page="careers"]) .author-row {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    :where(html[data-page="careers"]) .author-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--yellow-primary);
    }

    :where(html[data-page="careers"]) .author-info h4 {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--navy-primary);
    }

    :where(html[data-page="careers"]) .author-info p {
      font-size: 0.8125rem;
      color: var(--text-secondary);
    }

    /* ==========================================================================
       SECTION 07: FAQ
       ========================================================================== */
    :where(html[data-page="careers"]) .faq-section {
      padding: 90px 0;
      background: var(--cream-bg);
    }

    :where(html[data-page="careers"]) .faq-top-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 44px;
      flex-wrap: wrap;
      gap: 24px;
    }

    :where(html[data-page="careers"]) .faq-grid-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px 24px;
      align-items: start;
    }

    :where(html[data-page="careers"]) .faq-col {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    :where(html[data-page="careers"]) .faq-card {
      background: var(--white);
      border: 1px solid var(--border-color);
      border-radius: var(--r-md);
      box-shadow: var(--shadow-card);
      overflow: hidden;
      transition: var(--transition);
      align-self: start;
      width: 100%;
    }

    :where(html[data-page="careers"]) .faq-card.open {
      border-color: var(--blue-primary);
      box-shadow: var(--shadow-hover);
    }

    :where(html[data-page="careers"]) .faq-trigger {
      width: 100%;
      padding: 20px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      text-align: left;
      font-size: 1rem;
      font-weight: 700;
      color: var(--navy-primary);
      cursor: pointer;
    }

    :where(html[data-page="careers"]) .faq-trigger i.ph-plus {
      font-size: 1.15rem;
      color: var(--blue-primary);
      transition: transform 0.28s ease;
      flex-shrink: 0;
    }

    :where(html[data-page="careers"]) .faq-card.open .faq-trigger i.ph-plus {
      transform: rotate(45deg);
    }

    :where(html[data-page="careers"]) .faq-content {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
      padding: 0 22px;
      color: var(--text-secondary);
      font-size: 0.9375rem;
      line-height: 1.6;
    }

    :where(html[data-page="careers"]) .faq-card.open .faq-content {
      max-height: 200px;
      opacity: 1;
      padding-bottom: 22px;
    }

    /* ==========================================================================
       SECTION 08: FINAL CTA
       ========================================================================== */
    :where(html[data-page="careers"]) .final-cta-section {
      padding: 60px 0 90px;
      background: var(--cream-bg);
    }

    :where(html[data-page="careers"]) .final-cta-box {
      background: linear-gradient(135deg, #082D57 0%, #064783 100%);
      border-radius: var(--r-xl);
      padding: 64px 54px;
      position: relative;
      overflow: hidden;
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 24px 54px rgba(8, 45, 87, 0.24);
    }

    :where(html[data-page="careers"]) .cta-pattern-bg {
      position: absolute;
      right: 0;
      bottom: 0;
      opacity: 0.12;
      pointer-events: none;
    }

    :where(html[data-page="careers"]) .final-cta-copy {
      max-width: 600px;
    }

    :where(html[data-page="careers"]) .final-cta-eyebrow {
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--yellow-primary);
      margin-bottom: 12px;
      display: block;
    }

    :where(html[data-page="careers"]) .final-cta-headline {
      font-size: clamp(2.2rem, 3.8vw, 3rem);
      font-weight: 800;
      line-height: 1.15;
      color: #FFFFFF !important;
      margin-bottom: 16px;
      letter-spacing: -0.025em;
    }

    :where(html[data-page="careers"]) .final-cta-desc {
      font-size: 1.0625rem;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.6;
    }

    :where(html[data-page="careers"]) .final-cta-action-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      position: relative;
    }

    :where(html[data-page="careers"]) .final-cta-annotation {
      position: absolute;
      top: -48px;
      right: 0;
      color: var(--yellow-primary);
      transform: rotate(6deg);
    }

    :where(html[data-page="careers"]) .cta-subcopy {
      font-size: 0.8125rem;
      color: rgba(255, 255, 255, 0.7);
    }

    /* ==========================================================================
       FOOTER
       ========================================================================== */
    :where(html[data-page="careers"]) .site-footer {
      background: var(--navy-deep);
      color: var(--white);
      padding: 70px 0 30px;
    }

    :where(html[data-page="careers"]) .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 50px;
    }

    :where(html[data-page="careers"]) .footer-brand p {
      color: var(--text-muted);
      font-size: 0.9375rem;
      margin-top: 14px;
      max-width: 320px;
      line-height: 1.6;
    }

    :where(html[data-page="careers"]) .footer-col h4 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 18px;
      color: var(--white);
    }

    :where(html[data-page="careers"]) .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    :where(html[data-page="careers"]) .footer-col a {
      color: var(--text-muted);
      font-size: 0.9375rem;
    }

    :where(html[data-page="careers"]) .footer-col a:hover {
      color: var(--yellow-primary);
    }

    :where(html[data-page="careers"]) .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--text-muted);
      font-size: 0.875rem;
      flex-wrap: wrap;
      gap: 16px;
    }

    :where(html[data-page="careers"]) .footer-links-row {
      display: flex;
      gap: 20px;
    }

    :where(html[data-page="careers"]) .footer-links-row a:hover {
      color: var(--white);
    }

    /* ==========================================================================
       APPLICATION MODAL / DRAWER
       ========================================================================== */
    :where(html[data-page="careers"]) .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(6, 31, 58, 0.65);
      backdrop-filter: blur(6px);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: all 0.26s ease;
    }

    :where(html[data-page="careers"]) .modal-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }

    :where(html[data-page="careers"]) .modal-card {
      background: var(--white);
      border-radius: var(--r-xl);
      width: 100%;
      max-width: 580px;
      max-height: 90vh;
      overflow-y: auto;
      padding: 36px;
      box-shadow: 0 24px 60px rgba(8, 45, 87, 0.28);
      position: relative;
      transform: translateY(20px);
      transition: all 0.26s ease;
    }

    :where(html[data-page="careers"]) .modal-overlay.open .modal-card {
      transform: translateY(0);
    }

    :where(html[data-page="careers"]) .modal-close-btn {
      position: absolute;
      top: 24px;
      right: 24px;
      font-size: 1.5rem;
      color: var(--text-muted);
      transition: var(--transition);
      cursor: pointer;
    }

    :where(html[data-page="careers"]) .modal-close-btn:hover {
      color: var(--navy-primary);
    }

    :where(html[data-page="careers"]) .form-group {
      margin-bottom: 18px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    :where(html[data-page="careers"]) .form-group label {
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--navy-primary);
    }

    :where(html[data-page="careers"]) .form-control {
      border: 1.5px solid var(--border-color);
      border-radius: var(--r-sm);
      padding: 12px 14px;
      font-size: 0.9375rem;
      color: var(--navy-primary);
      background: var(--cream-bg);
      transition: var(--transition);
    }

    :where(html[data-page="careers"]) .form-control:focus {
      border-color: var(--navy-primary);
      background: var(--white);
      box-shadow: 0 0 0 3px rgba(45, 128, 255, 0.15);
    }

    /* ==========================================================================
       RESPONSIVE BREAKPOINTS
       ========================================================================== */
    @media (max-width: 1024px) {
      :where(html[data-page="careers"]) .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }
      :where(html[data-page="careers"]) .hero-copy {
        align-items: center;
        text-align: center;
      }
      :where(html[data-page="careers"]) .hero-description {
        max-width: 600px;
      }
      :where(html[data-page="careers"]) .hero-benefits-row {
        grid-template-columns: repeat(2, 1fr);
      }
      :where(html[data-page="careers"]) .why-kaxon-grid {
        grid-template-columns: 1fr;
        gap: 36px;
      }
      :where(html[data-page="careers"]) .why-intro-sticky {
        position: static;
      }
      :where(html[data-page="careers"]) .cards-grid-6 {
        grid-template-columns: repeat(2, 1fr);
      }
      :where(html[data-page="careers"]) .life-grid {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="careers"]) .hiring-timeline-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      :where(html[data-page="careers"]) .testimonials-grid {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="careers"]) .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="careers"]) .desktop-nav,:where(html[data-page="careers"])  .header-actions .btn-navy {
        display: none;
      }
      :where(html[data-page="careers"]) .mobile-menu-btn {
        display: block;
      }
      :where(html[data-page="careers"]) .cards-grid-6 {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="careers"]) .job-card-main {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      :where(html[data-page="careers"]) .job-meta-row-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      :where(html[data-page="careers"]) .hiring-timeline-grid {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="careers"]) .faq-grid-2col {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="careers"]) .final-cta-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        padding: 40px 24px;
      }
      :where(html[data-page="careers"]) .final-cta-action-area {
        width: 100%;
        align-items: flex-start;
      }
      :where(html[data-page="careers"]) .final-cta-action-area .btn {
        width: 100%;
      }
      :where(html[data-page="careers"]) .final-cta-annotation {
        position: static;
        margin-bottom: 8px;
      }
      :where(html[data-page="careers"]) .floating-card-2 {
        right: 0px;
      }
      :where(html[data-page="careers"]) .floating-card-3 {
        left: 5%;
      }
      :where(html[data-page="careers"]) .hero-cta-group {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 440px;
        gap: 10px;
        justify-content: center;
        margin-bottom: 36px;
      }
      :where(html[data-page="careers"]) .hero-cta-group .btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 12px 10px;
        font-size: clamp(0.75rem, 3.2vw, 0.875rem);
        gap: 6px;
        white-space: nowrap;
        letter-spacing: -0.01em;
        justify-content: center;
      }
      :where(html[data-page="careers"]) .hero-cta-group .btn i {
        font-size: 1.1rem;
      }
      :where(html[data-page="careers"]) .hero-benefits-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding-top: 20px;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
      }
      :where(html[data-page="careers"]) .benefit-mini-item {
        background: rgba(255, 255, 255, 0.85);
        border: 1px solid rgba(8, 43, 85, 0.08);
        border-radius: var(--r-md);
        padding: 10px 12px;
        box-shadow: 0 4px 14px rgba(8, 43, 85, 0.03);
        display: flex;
        align-items: center;
        gap: 10px;
        text-align: left;
      }
      :where(html[data-page="careers"]) .benefit-icon-box {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        font-size: 1.15rem;
      }
      :where(html[data-page="careers"]) .benefit-mini-text {
        text-align: left;
        min-width: 0;
      }
      :where(html[data-page="careers"]) .benefit-mini-text h4 {
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--navy-primary);
        line-height: 1.1;
        margin-bottom: 2px;
      }
      :where(html[data-page="careers"]) .benefit-mini-text span {
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-secondary);
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      :where(html[data-page="careers"]) .footer-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 380px) {
      :where(html[data-page="careers"]) .hero-cta-group {
        gap: 6px;
      }
      :where(html[data-page="careers"]) .hero-cta-group .btn {
        padding: 11px 6px;
        font-size: 0.72rem;
        gap: 4px;
      }
      :where(html[data-page="careers"]) .hero-benefits-row {
        gap: 8px;
      }
      :where(html[data-page="careers"]) .benefit-mini-item {
        padding: 8px 8px;
        gap: 8px;
      }
      :where(html[data-page="careers"]) .benefit-icon-box {
        width: 30px;
        height: 30px;
        font-size: 1rem;
      }
      :where(html[data-page="careers"]) .benefit-mini-text h4 {
        font-size: 0.875rem;
      }
      :where(html[data-page="careers"]) .benefit-mini-text span {
        font-size: 0.675rem;
      }
    }
  
    /* ==========================================================================
       SECTION 02: WHY WORK AT KAXON (THE KAXON WORK CONTRACT)
       ========================================================================== */
    :where(html[data-page="careers"]) .why-kaxon-section {
      padding: clamp(64px, 7vw, 96px) 0;
      background: var(--cream-bg);
      width: 100%;
      overflow: hidden;
    }

    :where(html[data-page="careers"]) .why-contract-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.45fr);
      gap: clamp(36px, 5vw, 64px);
      align-items: flex-start;
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="careers"]) .why-manifesto-col {
      position: sticky;
      top: 100px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    :where(html[data-page="careers"]) .why-manifesto-col .section-title {
      font-family: 'Manrope', sans-serif;
      font-size: clamp(1.85rem, 3.4vw, 3rem);
      font-weight: 850;
      line-height: 1.25;
      letter-spacing: -0.035em;
      color: var(--navy-primary);
      margin-bottom: 18px;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    :where(html[data-page="careers"]) .why-manifesto-col .section-desc {
      font-size: 1.05rem;
      line-height: 1.68;
      color: var(--text-secondary);
      margin-bottom: 28px;
    }

    :where(html[data-page="careers"]) .why-manifesto-cta {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    /* Expectation Exchange Matrix */
    :where(html[data-page="careers"]) .expectation-matrix-box {
      background: var(--surface);
      border: 1px solid var(--border-color);
      border-radius: var(--r-xl);
      padding: clamp(24px, 3.5vw, 36px);
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      gap: 14px;
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="careers"]) .exchange-matrix-header {
      display: grid;
      grid-template-columns: 1fr 40px 1.4fr;
      gap: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(8, 45, 87, 0.08);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    :where(html[data-page="careers"]) .exchange-row-item {
      display: grid;
      grid-template-columns: 1fr 40px 1.4fr;
      gap: 16px;
      align-items: center;
      background: rgba(8, 45, 87, 0.03);
      border: 1px solid rgba(8, 45, 87, 0.06);
      border-radius: var(--r-md);
      padding: 14px 18px;
      transition: all 0.2s ease;
    }

    :where(html[data-page="careers"]) .exchange-row-item:hover {
      background: #FFFFFF;
      border-color: rgba(45, 128, 255, 0.25);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(8, 45, 87, 0.05);
    }

    :where(html[data-page="careers"]) .exchange-we-ask {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: 'Manrope', sans-serif;
      font-weight: 800;
      font-size: 0.95rem;
      color: var(--navy-primary);
    }

    :where(html[data-page="careers"]) .exchange-ask-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
    }

    :where(html[data-page="careers"]) .exchange-arrow-connector {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      font-size: 1.1rem;
      opacity: 0.6;
    }

    :where(html[data-page="careers"]) .exchange-you-get {
      font-size: 0.885rem;
      color: var(--text-secondary);
      line-height: 1.45;
      font-weight: 500;
    }

    /* ==========================================================================
       SECTION 03: LIFE AT KAXON (12-COL EDITORIAL MOSAIC)
       ========================================================================== */
    :where(html[data-page="careers"]) .life-kaxon-section {
      padding: clamp(64px, 7vw, 96px) 0;
      background: var(--cream-warm);
      width: 100%;
      overflow: hidden;
    }

    :where(html[data-page="careers"]) .life-mosaic-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 20px;
      margin-top: 36px;
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="careers"]) .mosaic-cell {
      background: var(--surface);
      border: 1px solid var(--border-color);
      border-radius: var(--r-lg);
      padding: 26px 28px;
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-width: 0;
      box-sizing: border-box;
      transition: all 0.22s ease;
    }

    :where(html[data-page="careers"]) .mosaic-cell:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
    }

    :where(html[data-page="careers"]) .mosaic-cell.span-7 { grid-column: span 7; }
    :where(html[data-page="careers"]) .mosaic-cell.span-5 { grid-column: span 5; }
    :where(html[data-page="careers"]) .mosaic-cell.span-4 { grid-column: span 4; }
    :where(html[data-page="careers"]) .mosaic-cell.span-3 { grid-column: span 3; }

    :where(html[data-page="careers"]) .mosaic-cell-navy {
      background: linear-gradient(135deg, #082D57 0%, #061F3A 100%);
      color: #FFFFFF;
      border-color: rgba(255, 255, 255, 0.12);
    }

    :where(html[data-page="careers"]) .mosaic-cell-navy h3 {
      color: #FFFFFF !important;
    }

    :where(html[data-page="careers"]) .mosaic-cell-navy p {
      color: rgba(255, 255, 255, 0.8) !important;
    }

    :where(html[data-page="careers"]) .builder-day-flow {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      margin-top: 18px;
    }

    :where(html[data-page="careers"]) .day-flow-step {
      background: rgba(8, 45, 87, 0.03);
      border: 1px solid rgba(8, 45, 87, 0.08);
      border-radius: var(--r-md);
      padding: 12px 10px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    :where(html[data-page="careers"]) .day-flow-step i {
      font-size: 1.25rem;
      color: var(--blue-primary);
    }

    :where(html[data-page="careers"]) .day-flow-step strong {
      font-family: 'Manrope', sans-serif;
      font-size: 0.825rem;
      font-weight: 800;
      color: var(--navy-primary);
      line-height: 1.15;
    }

    :where(html[data-page="careers"]) .day-flow-step span {
      font-size: 0.6875rem;
      color: var(--text-muted);
      line-height: 1.2;
    }

    /* ==========================================================================
       SECTION 04: OPEN POSITIONS (ROLE MATCH EXPLORER)
       ========================================================================== */
    :where(html[data-page="careers"]) .open-positions-section {
      padding: clamp(64px, 7vw, 96px) 0;
      background: var(--cream-bg);
      width: 100%;
      overflow: hidden;
    }

    :where(html[data-page="careers"]) .positions-header-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 32px;
      flex-wrap: wrap;
      gap: 20px;
    }

    :where(html[data-page="careers"]) .filter-pills-dock {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(8, 45, 87, 0.04);
      border: 1px solid rgba(8, 45, 87, 0.08);
      border-radius: var(--r-pill);
      padding: 6px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    :where(html[data-page="careers"]) .filter-pills-dock::-webkit-scrollbar {
      display: none;
    }

    :where(html[data-page="careers"]) .filter-pill-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 18px;
      border-radius: var(--r-pill);
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--text-secondary);
      background: transparent;
      transition: all 0.2s ease;
      white-space: nowrap;
      cursor: pointer;
    }

    :where(html[data-page="careers"]) .filter-pill-btn:hover {
      color: var(--navy-primary);
      background: rgba(255, 255, 255, 0.8);
    }

    :where(html[data-page="careers"]) .filter-pill-btn.active {
      background: var(--navy-primary);
      color: #FFFFFF;
      box-shadow: 0 6px 18px rgba(8, 45, 87, 0.18);
    }

    :where(html[data-page="careers"]) .filter-pill-btn .filter-count {
      font-size: 0.75rem;
      padding: 2px 7px;
      border-radius: var(--r-pill);
      background: rgba(8, 45, 87, 0.1);
      color: inherit;
    }

    :where(html[data-page="careers"]) .filter-pill-btn.active .filter-count {
      background: rgba(255, 255, 255, 0.2);
      color: var(--yellow-primary);
    }

    /* Role Explorer Card Rows */
    :where(html[data-page="careers"]) .roles-list-container {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="careers"]) .role-explorer-card {
      background: var(--surface);
      border: 1px solid var(--border-color);
      border-radius: var(--r-lg);
      padding: 24px 28px;
      box-shadow: var(--shadow-card);
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr) auto;
      gap: 24px;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
      cursor: pointer;
    }

    :where(html[data-page="careers"]) .role-explorer-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(45, 128, 255, 0.28);
    }

    :where(html[data-page="careers"]) .role-explorer-left {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }

    :where(html[data-page="careers"]) .role-icon-box {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35rem;
      flex-shrink: 0;
    }

    :where(html[data-page="careers"]) .role-title-group h3 {
      font-family: 'Manrope', sans-serif;
      font-size: 1.15rem;
      font-weight: 850;
      color: var(--navy-primary);
      line-height: 1.2;
      margin-bottom: 4px;
    }

    :where(html[data-page="careers"]) .role-title-group p {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.45;
      margin: 0;
    }

    :where(html[data-page="careers"]) .role-explorer-mid {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    :where(html[data-page="careers"]) .role-meta-pills-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    :where(html[data-page="careers"]) .role-meta-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: var(--r-pill);
      background: rgba(8, 45, 87, 0.04);
      color: var(--navy-primary);
      border: 1px solid rgba(8, 45, 87, 0.06);
    }

    :where(html[data-page="careers"]) .role-skills-tags {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    :where(html[data-page="careers"]) .skill-tag {
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--text-muted);
      background: rgba(8, 45, 87, 0.04);
      padding: 2px 7px;
      border-radius: 4px;
    }

    :where(html[data-page="careers"]) .role-explorer-action {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* Role Expanded Drawer */
    :where(html[data-page="careers"]) .role-expanded-drawer {
      grid-column: 1 / -1;
      border-top: 1px solid rgba(8, 45, 87, 0.08);
      padding-top: 20px;
      margin-top: 8px;
      display: none;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 28px;
    }

    :where(html[data-page="careers"]) .role-explorer-card.expanded .role-expanded-drawer {
      display: grid;
    }

    :where(html[data-page="careers"]) .drawer-col h4 {
      font-family: 'Manrope', sans-serif;
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--navy-primary);
      margin-bottom: 10px;
    }

    :where(html[data-page="careers"]) .drawer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    :where(html[data-page="careers"]) .drawer-col li {
      font-size: 0.835rem;
      color: var(--text-secondary);
      line-height: 1.45;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    :where(html[data-page="careers"]) .drawer-col li i {
      color: var(--green);
      font-size: 0.95rem;
      margin-top: 2px;
      flex-shrink: 0;
    }

    /* ==========================================================================
       SECTION 05: HIRING PROCESS (4-STAGE HORIZONTAL TIMELINE)
       ========================================================================== */
    :where(html[data-page="careers"]) .hiring-process-section {
      padding: clamp(64px, 7vw, 96px) 0;
      background: var(--cream-warm);
      width: 100%;
      overflow: hidden;
    }

    :where(html[data-page="careers"]) .hiring-process-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px;
      margin-top: 36px;
      position: relative;
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="careers"]) .hiring-process-line {
      position: absolute;
      top: 34px;
      left: 10%;
      right: 10%;
      height: 2px;
      background: linear-gradient(90deg, #2D80FF 0%, #FFBF00 50%, #34C993 100%);
      z-index: 1;
      pointer-events: none;
    }

    :where(html[data-page="careers"]) .hiring-step-card {
      background: var(--surface);
      border: 1px solid var(--border-color);
      border-radius: var(--r-lg);
      padding: 24px 20px;
      box-shadow: var(--shadow-card);
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      transition: all 0.22s ease;
    }

    :where(html[data-page="careers"]) .hiring-step-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(45, 128, 255, 0.3);
    }

    :where(html[data-page="careers"]) .step-header-badge-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 16px;
    }

    :where(html[data-page="careers"]) .step-number-circle {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--navy-primary);
      color: var(--yellow-primary);
      font-family: 'Manrope', sans-serif;
      font-weight: 900;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 14px rgba(8, 45, 87, 0.15);
    }

    :where(html[data-page="careers"]) .step-icon-tile {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
    }

    :where(html[data-page="careers"]) .hiring-step-card h3 {
      font-family: 'Manrope', sans-serif;
      font-size: 1.05rem;
      font-weight: 850;
      color: var(--navy-primary);
      margin-bottom: 6px;
      line-height: 1.2;
    }

    :where(html[data-page="careers"]) .hiring-step-card p {
      font-size: 0.825rem;
      color: var(--text-secondary);
      line-height: 1.45;
      margin: 0;
    }

    :where(html[data-page="careers"]) .hiring-promise-rail {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      margin-top: 32px;
      padding: 14px 24px;
      background: rgba(255, 255, 255, 0.88);
      border: 1px solid rgba(8, 45, 87, 0.06);
      border-radius: var(--r-pill);
      flex-wrap: wrap;
    }

    :where(html[data-page="careers"]) .promise-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.8125rem;
      font-weight: 750;
      color: var(--navy-primary);
    }

    :where(html[data-page="careers"]) .promise-item i {
      color: var(--green);
      font-size: 0.95rem;
    }

    /* ==========================================================================
       SECTION 06: TEAM STORIES & TRAJECTORIES
       ========================================================================== */
    :where(html[data-page="careers"]) .team-stories-section {
      padding: clamp(64px, 7vw, 96px) 0;
      background: var(--cream-bg);
      width: 100%;
      overflow: hidden;
    }

    :where(html[data-page="careers"]) .trajectories-grid-3col {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
      margin-top: 36px;
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="careers"]) .trajectory-story-card {
      background: var(--surface);
      border: 1px solid var(--border-color);
      border-radius: var(--r-xl);
      padding: 30px 26px;
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 340px;
      transition: all 0.22s ease;
    }

    :where(html[data-page="careers"]) .trajectory-story-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
    }

    :where(html[data-page="careers"]) .trajectory-story-card .story-quote {
      font-size: 0.95rem;
      line-height: 1.62;
      color: var(--navy-primary);
      font-weight: 600;
      margin-bottom: 20px;
    }

    :where(html[data-page="careers"]) .story-career-track {
      background: rgba(8, 45, 87, 0.04);
      border-radius: var(--r-md);
      padding: 10px 14px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.725rem;
      font-weight: 750;
      color: var(--navy-primary);
      flex-wrap: wrap;
    }

    :where(html[data-page="careers"]) .story-author-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: auto;
    }

    :where(html[data-page="careers"]) .story-avatar-img {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--gold);
    }

    :where(html[data-page="careers"]) .story-author-info h4 {
      font-family: 'Manrope', sans-serif;
      font-size: 0.925rem;
      font-weight: 850;
      color: var(--navy-primary);
      line-height: 1.15;
    }

    :where(html[data-page="careers"]) .story-author-info span {
      font-size: 0.75rem;
      color: var(--text-secondary);
      display: block;
    }

    /* ==========================================================================
       SECTION 07: CAREER FAQ ACCORDION (34% STICKY INTRO | 66% ACCORDION)
       ========================================================================== */
    :where(html[data-page="careers"]) .career-faq-section {
      padding: clamp(64px, 7vw, 96px) 0;
      background: var(--cream-warm);
      width: 100%;
      overflow: hidden;
    }

    :where(html[data-page="careers"]) .faq-layout-split {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
      gap: clamp(32px, 4.5vw, 54px);
      align-items: flex-start;
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="careers"]) .faq-intro-sticky {
      position: sticky;
      top: 100px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    :where(html[data-page="careers"]) .faq-accordion-stack {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="careers"]) .faq-item-card {
      background: var(--surface);
      border: 1px solid var(--border-color);
      border-radius: var(--r-md);
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(8, 45, 87, 0.03);
      transition: all 0.2s ease;
      cursor: pointer;
    }

    :where(html[data-page="careers"]) .faq-item-card:hover {
      border-color: rgba(45, 128, 255, 0.25);
    }

    :where(html[data-page="careers"]) .faq-item-trigger {
      padding: 18px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      font-family: 'Manrope', sans-serif;
      font-weight: 800;
      font-size: 1rem;
      color: var(--navy-primary);
    }

    :where(html[data-page="careers"]) .faq-item-trigger i {
      font-size: 1.15rem;
      color: var(--blue-primary);
      transition: transform 0.24s ease;
      flex-shrink: 0;
    }

    :where(html[data-page="careers"]) .faq-item-card.open .faq-item-trigger i {
      transform: rotate(45deg);
      color: var(--yellow-primary);
    }

    :where(html[data-page="careers"]) .faq-item-drawer {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: all 0.26s cubic-bezier(0.16, 1, 0.3, 1);
      padding: 0 22px;
      font-size: 0.925rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    :where(html[data-page="careers"]) .faq-item-card.open .faq-item-drawer {
      max-height: 250px;
      opacity: 1;
      padding-bottom: 20px;
    }

    /* ==========================================================================
       SECTION 08: FINAL CTA INVITATION BANNER
       ========================================================================== */
    :where(html[data-page="careers"]) .career-final-section {
      padding: clamp(48px, 6vw, 84px) 0 clamp(64px, 7vw, 96px);
      background: var(--cream-bg);
      width: 100%;
    }

    :where(html[data-page="careers"]) .career-final-box {
      background: radial-gradient(circle at 82% 48%, rgba(45, 128, 255, 0.24), transparent 34%),
                  linear-gradient(135deg, #082D57 0%, #06407B 100%);
      border-radius: var(--r-xl);
      padding: clamp(36px, 5vw, 58px) clamp(24px, 4.5vw, 54px);
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      box-shadow: 0 24px 56px rgba(6, 31, 60, 0.28);
      position: relative;
      overflow: hidden;
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="careers"]) .career-final-copy {
      max-width: 620px;
      z-index: 2;
    }

    :where(html[data-page="careers"]) .career-final-eyebrow {
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--yellow-primary);
      margin-bottom: 12px;
      display: block;
    }

    :where(html[data-page="careers"]) .career-final-headline {
      font-family: 'Manrope', sans-serif;
      font-size: clamp(2.1rem, 3.4vw, 2.9rem);
      font-weight: 850;
      line-height: 1.12;
      margin-bottom: 14px;
      letter-spacing: -0.03em;
      color: #FFFFFF;
    }

    :where(html[data-page="careers"]) .career-final-desc {
      font-size: 1.05rem;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.6;
      margin: 0;
    }

    :where(html[data-page="careers"]) .career-final-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
      position: relative;
      z-index: 2;
    }

    :where(html[data-page="careers"]) .career-final-annotation {
      position: absolute;
      top: -38px;
      right: 0;
      font-family: var(--font-hand);
      font-size: 1.25rem;
      color: var(--yellow-primary);
      transform: rotate(5deg);
      pointer-events: none;
      white-space: nowrap;
    }

    /* Responsive Overrides for Downstream Sections */
    @media (max-width: 1024px) {
      :where(html[data-page="careers"]) .why-contract-grid {
        grid-template-columns: 1fr;
        gap: 36px;
      }
      :where(html[data-page="careers"]) .why-manifesto-col {
        position: static;
      }
      :where(html[data-page="careers"]) .mosaic-cell.span-7,:where(html[data-page="careers"]) 
      .mosaic-cell.span-5,:where(html[data-page="careers"]) 
      .mosaic-cell.span-4,:where(html[data-page="careers"]) 
      .mosaic-cell.span-3 {
        grid-column: span 6;
      }
      :where(html[data-page="careers"]) .role-explorer-card {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      :where(html[data-page="careers"]) .role-explorer-action {
        width: 100%;
      }
      :where(html[data-page="careers"]) .role-explorer-action .btn {
        width: 100%;
      }
      :where(html[data-page="careers"]) .hiring-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }
      :where(html[data-page="careers"]) .hiring-process-line {
        display: none;
      }
      :where(html[data-page="careers"]) .trajectories-grid-3col {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      :where(html[data-page="careers"]) .faq-layout-split {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      :where(html[data-page="careers"]) .faq-intro-sticky {
        position: static;
      }
      :where(html[data-page="careers"]) .career-final-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        padding: 36px 24px;
      }
      :where(html[data-page="careers"]) .career-final-actions {
        width: 100%;
        align-items: flex-start;
      }
      :where(html[data-page="careers"]) .career-final-actions .btn {
        width: 100%;
      }
      :where(html[data-page="careers"]) .career-final-annotation {
        display: none;
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="careers"]) .section-title {
        font-size: clamp(1.6rem, 5.5vw, 2.2rem);
        line-height: 1.25;
      }
      :where(html[data-page="careers"]) .highlight-yellow {
        padding: 3px 8px;
        margin-top: 4px;
        margin-bottom: 2px;
      }
      :where(html[data-page="careers"]) .positions-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }
      :where(html[data-page="careers"]) .positions-header-row > div:first-child {
        width: 100%;
        min-width: 0;
      }
      :where(html[data-page="careers"]) .filter-pills-dock {
        width: 100%;
        max-width: 100%;
      }
      :where(html[data-page="careers"]) .exchange-matrix-header {
        display: none;
      }
      :where(html[data-page="careers"]) .exchange-row-item {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px 14px;
      }
      :where(html[data-page="careers"]) .exchange-arrow-connector {
        display: none;
      }
      :where(html[data-page="careers"]) .mosaic-cell.span-7,:where(html[data-page="careers"]) 
      .mosaic-cell.span-5,:where(html[data-page="careers"]) 
      .mosaic-cell.span-4,:where(html[data-page="careers"]) 
      .mosaic-cell.span-3 {
        grid-column: span 12;
      }
      :where(html[data-page="careers"]) .builder-day-flow {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      :where(html[data-page="careers"]) .day-flow-step {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        padding: 10px 14px;
        gap: 12px;
      }
      :where(html[data-page="careers"]) .hiring-process-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }
      :where(html[data-page="careers"]) .hiring-promise-rail {
        flex-direction: column;
        align-items: flex-start;
        border-radius: var(--r-md);
        gap: 10px;
        padding: 14px 18px;
      }
      :where(html[data-page="careers"]) .role-expanded-drawer {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }

  
/* shared-chrome.css */
@scope (:where(html[data-page="careers"]) .shared-kx-header,:where(html[data-page="careers"])  .shared-kx-mobile-drawer,:where(html[data-page="careers"])  .shared-site-footer) {
:scope { --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif; --container-max: 1240px; --color-yellow: #F8C72E; --color-primary-navy: #14243D; --transition: all .2s ease; font-family: var(--font-body, 'Plus Jakarta Sans', 'Inter', sans-serif); line-height: 1.5; }
:where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(a) { text-decoration: none; }



:scope {
  --kx-navy: #13243D;
  --kx-deep-navy: #0D1B31;
  --kx-secondary-navy: #1B3152;
  --kx-gold: #F9BE22;
  --kx-gold-hover: #FFCA3A;
  --kx-green: #00D084;
  --kx-cyan: #52BCEB;
  --kx-soft-cyan: #EAF8FF;
  --kx-soft-gold: #FFF8DD;
  --kx-soft-green: #E8F8F0;
  --kx-white: #FFFFFF;
  --kx-gray: #F4F6FA;
  --kx-pill-bg: #EDF3FA;
  --kx-border: #E8EDF4;
  --kx-border-subtle: #F1F4F9;
  --kx-text-dark: #13243D;
  --kx-text-muted: #65748B;
  --kx-radius-pill: 9999px;
  --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
}


:scope.shared-kx-header,
.shared-kx-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: 1px solid rgba(232, 237, 244, 0.8);
  transition: all 0.25s ease;
}

:scope.shared-kx-header.scrolled,
.shared-kx-header.scrolled {
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

:scope.shared-kx-header.menu-open,
.shared-kx-header.menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

.shared-kx-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .shared-kx-container {
    padding: 0 16px;
  }
}

.shared-kx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
}


.shared-kx-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0F1D32;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

.shared-kx-logo-tech {
  color: #00D084;
  font-weight: 800;
}


.shared-kx-nav-menu {
  display: flex;
  align-items: center;
  background: #EDF3FA;
  padding: 4px 6px;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(220, 230, 242, 0.85);
  box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
  flex-shrink: 1;
}

.shared-kx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shared-kx-nav-item {
  position: relative;
}

.shared-kx-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--kx-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-nav-link:hover {
  color: #0F1D32;
  background: rgba(255, 255, 255, 0.7);
}

.shared-kx-nav-link.active {
  color: #0F1D32 !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
}

.shared-kx-nav-link::after,
.shared-kx-nav-link.active::after {
  display: none !important;
}

.shared-kx-chevron-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  stroke: currentColor;
}


.shared-kx-dropdown-wrapper {
  position: relative;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper.open .shared-kx-chevron-icon {
  transform: rotate(180deg);
}

.shared-kx-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 250px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
  border: 1px solid var(--kx-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  pointer-events: none;
  z-index: 100;
}

/* Invisible hover bridge to eliminate the 8px cursor gap */
.shared-kx-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
  background: transparent;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper.open .shared-kx-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.shared-kx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #13243D;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.shared-kx-dropdown-item:hover {
  background: #F0F7FF;
  color: #0F1D32;
}


.shared-kx-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.shared-kx-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0F1D32;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-btn-pill-navy:hover {
  background: #1B2E4B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
}

.shared-kx-btn-pill-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F9BE22;
  color: #0F1D32;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
}

.shared-kx-btn-pill-gold:hover {
  background: #FFCA3A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
}

.shared-kx-btn-pill-navy:active,
.shared-kx-btn-pill-gold:active,
.kx-modal-submit:active {
  transform: translateY(0) scale(0.98);
}


.shared-kx-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0F1D32;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.shared-kx-mobile-toggle:hover {
  background: #EDF3FA;
}

@media (max-width: 1240px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-navy {
    display: none;
  }
}

@media (max-width: 1100px) {
  .shared-kx-nav-menu {
    display: none;
  }

  .shared-kx-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .shared-kx-nav-inner {
    height: 70px;
    gap: 8px;
  }
  .shared-kx-logo {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .shared-kx-logo {
    font-size: 18px;
  }
  .shared-kx-nav-actions {
    gap: 6px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 7px 11px;
    font-size: 11.5px;
    gap: 4px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold svg {
    display: none;
  }
  .shared-kx-mobile-toggle {
    padding: 6px;
  }
}

@media (max-width: 360px) {
  .shared-kx-container {
    padding: 0 6px;
  }
  .shared-kx-nav-inner {
    gap: 2px;
  }
  .shared-kx-logo {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  .shared-kx-nav-actions {
    gap: 2px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 5px 6px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  .shared-kx-mobile-toggle {
    padding: 2px;
  }
}


:scope.shared-kx-mobile-drawer,
.shared-kx-mobile-drawer {
  position: fixed;
  top: var(--header-height, 78px);
  left: 0;
  width: 100%;
  height: calc(100dvh - var(--header-height, 78px));
  background: #FFFFFF !important;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 40px rgba(19, 36, 61, 0.12);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :scope.shared-kx-mobile-drawer,
  .shared-kx-mobile-drawer {
    top: var(--header-height, 70px);
    height: calc(100dvh - var(--header-height, 70px));
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

:scope.shared-kx-mobile-drawer.open,
:scope.shared-kx-mobile-drawer.active,
.shared-kx-mobile-drawer.open,
.shared-kx-mobile-drawer.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  pointer-events: auto;
}

.shared-kx-mobile-nav-link {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 650;
  color: #14243D;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 12px;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.shared-kx-mobile-nav-link:hover {
  background: #F8FAFC;
  color: #0E1B2F;
}

.shared-kx-mobile-nav-link.active {
  background: #F4F7FB !important;
  color: #0E1B2F !important;
  font-weight: 750 !important;
  border-left: 3px solid #F8C72E;
  padding-left: 13px;
}

.shared-kx-mobile-nav-link.shared-sub {
  margin-left: 12px;
  margin-right: 4px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 550;
  color: #556987;
  background: #F8FAFC;
  border-radius: 10px;
  border-left: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.shared-kx-mobile-nav-link.shared-sub::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94A3B8;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.shared-kx-mobile-nav-link.shared-sub:hover,
.shared-kx-mobile-nav-link.shared-sub.active {
  background: #EDF4FB;
  color: #0E1B2F;
  border-left-color: #F8C72E;
}

.shared-kx-mobile-nav-link.shared-sub.active::before {
  background: #F8C72E;
  transform: scale(1.4);
}

.shared-kx-mobile-drawer-footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #EEF2F6;
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-gold {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(248, 199, 46, 0.3);
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-navy {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
  border-radius: 9999px;
}


.kx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 49, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  padding: 20px;
}

.kx-modal-overlay.active,
.kx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.kx-modal-dialog {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
  border: 1px solid var(--kx-border);
  overflow: hidden;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.kx-modal-overlay.active .kx-modal-dialog,
.kx-modal-overlay.is-open .kx-modal-dialog {
  transform: scale(1) translateY(0);
}

.kx-modal-header {
  padding: 28px 32px 16px;
  position: relative;
}

.kx-modal-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--kx-navy);
  margin: 0 0 6px;
}

.kx-modal-subtitle {
  font-size: 14px;
  color: var(--kx-text-muted);
  margin: 0;
}

.kx-modal-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--kx-gray);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-navy);
  transition: background 0.2s ease, transform 0.2s ease;
}

.kx-modal-close:hover {
  background: #E2E8F0;
  transform: rotate(90deg);
}

.kx-modal-body {
  padding: 0 32px 32px;
}

.kx-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx-form-label {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kx-navy);
}

.kx-form-input,
.kx-form-textarea,
.kx-form-select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--kx-border);
  background: var(--kx-gray);
  color: var(--kx-navy);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.kx-form-input:focus,
.kx-form-textarea:focus,
.kx-form-select:focus {
  outline: none;
  border-color: var(--kx-navy);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
}

.kx-modal-submit {
  background: var(--kx-navy);
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.kx-modal-submit:hover {
  background: var(--kx-deep-navy);
  transform: translateY(-1px);
}


:scope.shared-site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
  position: relative;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

:scope.shared-site-footer .shared-container,
:scope.shared-site-footer .shared-kx-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

.shared-footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand {
  min-width: 0;
}

.shared-footer-brand .shared-brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand .shared-brand-logo .shared-dot {
  color: #2FB7A7;
}

.shared-footer-brand p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  max-width: 290px;
}

.shared-footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.shared-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.shared-footer-links a {
  font-size: 0.835rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.shared-footer-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

.shared-footer-follow-wrapper {
  margin-top: 24px;
}

.shared-footer-follow-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.shared-footer-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.shared-social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  text-decoration: none;
  transition: var(--transition);
}

.shared-social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

.shared-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  flex-wrap: wrap;
  gap: 12px;
}


@media (max-width: 1180px) {
  .nav-link {
    padding: 6px 9px;
    font-size: 0.82rem;
  }
  .btn-nav-phone {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}


@media (max-width: 1024px) {
  :scope {
    --header-height: 66px;
  }
  .nav-menu-wrapper,
  .btn-phone-desktop {
    display: none !important;
  }
  .hamburger-btn {
    display: flex !important;
  }
  .btn-cta-desktop {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .shared-footer-brand p {
    max-width: 100%;
  }
}


@media (max-width: 768px) {
  :scope {
    --header-height: 62px;
  }
  .btn-cta-desktop {
    display: none !important;
  }
  .shared-site-footer {
    padding: 46px 0 24px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding-bottom: 28px;
  }
}


@media (max-width: 540px) {
  :scope {
    --header-height: 58px;
  }
  .nav-container {
    padding: 0 14px;
  }
  .hamburger-btn {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  .hamburger-btn span {
    width: 20px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
  }
  .shared-footer-col-company {
    grid-column: 1;
  }
  .shared-footer-col-solutions {
    grid-column: 2;
  }
  .shared-footer-col-resources {
    grid-column: 1 / -1;
  }
  .shared-footer-col h5 {
    margin-bottom: 12px;
  }
  .shared-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


@media (max-width: 360px) {
  .shared-brand-logo {
    font-size: 1.15rem;
  }
  .mobile-nav-drawer {
    width: 90vw;
    padding: 18px 14px 22px;
  }
  .mobile-nav-link {
    font-size: 0.95rem;
  }
}
  
}
:where(html[data-page="careers"]) .shared-kx-mobile-drawer { visibility: hidden; }
:where(html[data-page="careers"]) .shared-kx-mobile-drawer.open { visibility: visible; }
:where(html[data-page="careers"]) .shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="careers"]) .shared-kx-btn-pill-navy:active,:where(html[data-page="careers"]) 
  .shared-kx-btn-pill-gold:active,:where(html[data-page="careers"]) 
  .kx-modal-submit:active { transform: none; }
}

/* page-upgrades.css */
:where(html[data-page="careers"]) body.rv-upgraded { --rv-navy:#102039; --rv-muted:#5e748f; --rv-gold:#f5a916; --rv-cream:#fbf7ef; font-family:'Plus Jakarta Sans','Inter',sans-serif; background:var(--rv-cream); }
:where(html[data-page="careers"]) .rv-upgraded .rv-container { width:calc(100% - 80px); max-width:1240px; margin-inline:auto; }
:where(html[data-page="careers"]) .rv-upgraded .rv-section { scroll-margin-top:96px; }
:where(html[data-page="careers"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities) { padding-top:80px; padding-bottom:80px; }
:where(html[data-page="careers"]) .rv-upgraded .rv-section h2 { font-family:'Outfit','Plus Jakarta Sans',sans-serif!important; font-weight:800!important; font-size:clamp(30px,3.1vw,42px)!important; line-height:1.16!important; letter-spacing:-.04em!important; }
:where(html[data-page="careers"]) .rv-upgraded .rv-section h3 { font-family:'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.025em; }
:where(html[data-page="careers"]) .rv-upgraded .rv-section p { line-height:1.7; }
:where(html[data-page="careers"]) .rv-upgraded .rv-section[data-rv-surface="light"] { background:#fffdf8!important; }
:where(html[data-page="careers"]) .rv-upgraded .rv-section[data-rv-surface="light"]:nth-of-type(even) { background:#fff!important; }
:where(html[data-page="careers"]) .rv-upgraded .rv-section[data-rv-surface="light"] h2 { color:#102039; }
:where(html[data-page="careers"]) .rv-upgraded .rv-section :is(input,select,textarea) { border-radius:12px; font-family:'Plus Jakarta Sans','Inter',sans-serif; }
:where(html[data-page="careers"]) .rv-upgraded :is(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #21877b; outline-offset:4px; }
:where(html[data-page="careers"]) .rv-upgraded .rv-hero { background-color:#fbf7ef; background-image:radial-gradient(#d9d7cc .7px,transparent .7px); background-size:24px 24px; padding:44px 0 54px; border-bottom:1px solid #e9e6de; position:relative; overflow:hidden; }
:where(html[data-page="careers"]) .rv-upgraded .rv-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
:where(html[data-page="careers"]) .rv-upgraded .rv-hero-copy { min-width:0; }
:where(html[data-page="careers"]) .rv-upgraded .rv-eyebrow { display:flex; align-items:center; gap:9px; font:700 11px/1.4 'Plus Jakarta Sans','Inter',sans-serif; text-transform:uppercase; letter-spacing:.14em; color:#315373; margin:0 0 16px; }
:where(html[data-page="careers"]) .rv-eyebrow > span { width:7px; height:7px; border-radius:50%; background:#f5a916; }
:where(html[data-page="careers"]) .rv-upgraded .rv-hero h1 { font-family:'Outfit','Plus Jakarta Sans',sans-serif!important; font-size:clamp(40px,4.1vw,58px)!important; line-height:1.09!important; font-weight:800!important; letter-spacing:-.05em!important; color:#102039!important; margin:0 0 20px!important; max-width:100%; }
:where(html[data-page="careers"]) .rv-upgraded .rv-hero h1 em { font-style:normal; color:#c88409; text-decoration:underline; text-decoration-color:#f5a916; text-decoration-thickness:3px; text-underline-offset:8px; }
:where(html[data-page="careers"]) .rv-upgraded .rv-description { color:#5e748f; font:400 17px/1.75 'Plus Jakarta Sans','Inter',sans-serif; max-width:560px; margin:0 0 26px; }
:where(html[data-page="careers"]) .rv-upgraded .rv-actions { display:flex; gap:12px; flex-wrap:wrap; }
:where(html[data-page="careers"]) .rv-upgraded .rv-button { display:inline-flex; justify-content:center; align-items:center; gap:14px; padding:15px 21px; min-height:52px; border-radius:999px; font:700 13px/1.4 'Plus Jakarta Sans','Inter',sans-serif; text-decoration:none; color:#102039; border:1px solid #e2e7ee; transition:background .2s,transform .2s; }
:where(html[data-page="careers"]) .rv-upgraded .rv-button-primary { background:#ffc526; border-color:#ffc526; box-shadow:0 8px 20px #f5a91620; }
:where(html[data-page="careers"]) .rv-upgraded .rv-button-secondary { background:#fff; }
:where(html[data-page="careers"]) .rv-upgraded .rv-button:hover { transform:translateY(-2px); background:#fff0bd; }
:where(html[data-page="careers"]) .rv-upgraded .rv-button i { font-size:18px; }
:where(html[data-page="careers"]) .rv-upgraded .rv-hero-art { min-width:0; position:relative; padding:0; }
:where(html[data-page="careers"]) .rv-upgraded .rv-note { font:600 24px/1.15 Caveat,cursive; color:#315373; text-align:right; margin:14px 12px 0 0; transform:rotate(-3deg); }
:where(html[data-page="careers"]) .rv-note svg { display:inline-block; width:50px; height:28px; vertical-align:middle; }
:where(html[data-page="careers"]) .rv-upgraded .rv-pastel-0 { background:#fff2cb; color:#a97007; }
:where(html[data-page="careers"]) .rv-upgraded .rv-pastel-1 { background:#def7ee; color:#187d6b; }
:where(html[data-page="careers"]) .rv-upgraded .rv-pastel-2 { background:#e5efff; color:#2867c7; }
:where(html[data-page="careers"]) .rv-upgraded .rv-pastel-3 { background:#fbe4ef; color:#b83c73; }
:where(html[data-page="careers"]) .rv-upgraded .rv-pastel-4 { background:#ede5fc; color:#7250b2; }
:where(html[data-page="careers"]) .rv-upgraded .rv-icon { width:56px; height:56px; flex-shrink:0; display:grid; place-items:center; border-radius:18px; font-size:27px; }
:where(html[data-page="careers"]) .rv-upgraded .rv-capabilities { padding:46px 0 54px; background:#fff; border-bottom:1px solid #e9edf0; }
:where(html[data-page="careers"]) .rv-capabilities .rv-eyebrow { margin-bottom:14px; }
:where(html[data-page="careers"]) .rv-capabilities h2 { max-width:1000px; color:#102039; margin:0 0 32px; }
:where(html[data-page="careers"]) .rv-capability-grid { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); gap:26px; }
:where(html[data-page="careers"]) .rv-capability { display:flex; align-items:flex-start; gap:15px; }
:where(html[data-page="careers"]) .rv-upgraded .rv-capability h3 { font-size:16px; line-height:1.3; color:#102039; margin:0 0 8px; }
:where(html[data-page="careers"]) .rv-upgraded .rv-capability p { font:400 13px/1.6 'Plus Jakarta Sans','Inter',sans-serif; color:#5e748f; margin:0; }
:where(html[data-page="careers"]) .rv-orbit { position:relative; width:100%; max-width:510px; aspect-ratio:1.12; margin:auto; }
:where(html[data-page="careers"]) .rv-orbit-ring { position:absolute; width:70%; height:76%; top:12%; left:15%; border:1.5px solid #e9b448; border-radius:50%; }
:where(html[data-page="careers"]) .rv-orbit-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:37%; aspect-ratio:1; border-radius:50%; background:#102039; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font:800 24px/1.15 'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.04em; box-shadow:0 12px 30px #10203915; text-align:center; }
:where(html[data-page="careers"]) .rv-orbit-core span { color:#26b794; font-size:22px; }
:where(html[data-page="careers"]) .rv-orbit-node { position:absolute; left:calc(50% + cos(calc(var(--i)*360deg/var(--count) - 90deg))*37%); top:calc(50% + sin(calc(var(--i)*360deg/var(--count) - 90deg))*37%); transform:translate(-50%,-50%); width:25%; aspect-ratio:1; border:3px solid #fff; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; box-shadow:0 6px 22px #10203906; }
:where(html[data-page="careers"]) .rv-orbit-node i { font-size:32px; }:where(html[data-page="careers"]) .rv-orbit-node strong { font:700 12px/1.3 'Plus Jakarta Sans','Inter',sans-serif; color:#102039; text-align:center; }
:where(html[data-page="careers"]) .rv-orbit-4 .rv-orbit-node { left:calc(50% + cos(calc(var(--i)*90deg - 135deg))*43%); top:calc(50% + sin(calc(var(--i)*90deg - 135deg))*43%); }
:where(html[data-page="careers"]) .rv-career-panels { display:flex; align-items:center; gap:14px; padding:24px 8px; min-height:385px; }
:where(html[data-page="careers"]) .rv-career-panel { flex:1; min-width:0; height:320px; border-radius:18px; padding:30px 18px; display:flex; flex-direction:column; justify-content:center; gap:25px; transform:rotate(-4deg); }
:where(html[data-page="careers"]) .rv-career-panel:nth-child(2){transform:translateY(-22px) rotate(3deg)}:where(html[data-page="careers"]) .rv-career-panel:nth-child(3){transform:rotate(-3deg)}
:where(html[data-page="careers"]) .rv-career-panel i { font-size:48px; }:where(html[data-page="careers"]) .rv-career-panel strong { font:800 clamp(25px,2.5vw,36px)/1 'Outfit','Plus Jakarta Sans',sans-serif; color:#102039; letter-spacing:-.04em; }:where(html[data-page="careers"]) .rv-career-panel span { font:500 11px/1.6 'Plus Jakarta Sans','Inter',sans-serif; text-transform:uppercase; letter-spacing:.08em; color:#5e748f; }
:where(html[data-page="careers"]) .rv-roadmap { background:#fff; border:1px solid #e8e9e6; padding:30px; border-radius:24px; box-shadow:0 16px 40px #10203908; }
:where(html[data-page="careers"]) .rv-small-label { font:700 10px/1.4 'Plus Jakarta Sans','Inter',sans-serif!important; text-transform:uppercase; letter-spacing:.13em; color:#315373; margin:0 0 26px!important; }
:where(html[data-page="careers"]) .rv-roadmap-step { display:flex; gap:20px; padding:16px 0; }:where(html[data-page="careers"]) .rv-roadmap-step .rv-icon { width:70px;height:70px;border-radius:50%;font-size:34px; }
:where(html[data-page="careers"]) .rv-roadmap-step small { font:700 12px 'Plus Jakarta Sans','Inter',sans-serif; color:#178575; }:where(html[data-page="careers"]) .rv-upgraded .rv-roadmap-step h3 { font:800 21px/1.2 'Outfit','Plus Jakarta Sans',sans-serif; color:#102039; margin:6px 0; }:where(html[data-page="careers"]) .rv-roadmap-step p { color:#5e748f; font-size:13px; margin:0; }
:where(html[data-page="careers"]) .rv-art-conversation-roadmap > .rv-note,:where(html[data-page="careers"]) .rv-art-cloud-architecture > .rv-note,:where(html[data-page="careers"]) .rv-art-search-visibility > .rv-note { margin:0 12px 18px; }
:where(html[data-page="careers"]) .rv-devices { min-height:410px; padding:20px 50px 20px 0; position:relative; }
:where(html[data-page="careers"]) .rv-browser { border:5px solid #16334d; border-radius:17px; overflow:hidden; background:#fffdf8; box-shadow:0 18px 25px #10203920; }
:where(html[data-page="careers"]) .rv-browser-bar { height:24px; display:flex; gap:6px; align-items:center; padding:0 12px; background:#16334d; }:where(html[data-page="careers"]) .rv-browser-bar b { width:7px;height:7px;border-radius:50%;background:#ffcd38; }:where(html[data-page="careers"]) .rv-browser-bar b:first-child{background:#ed7880}:where(html[data-page="careers"]) .rv-browser-bar b:last-child{background:#24b7a8}
:where(html[data-page="careers"]) .rv-browser-content { min-height:310px; padding:23px; position:relative; overflow:hidden; }:where(html[data-page="careers"]) .rv-mock-brand { display:block;font:800 17px 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039; margin-bottom:26px; }:where(html[data-page="careers"]) .rv-browser-content small { display:block;font:700 8px 'Plus Jakarta Sans','Inter',sans-serif;text-transform:uppercase;letter-spacing:.15em;color:#476780;margin-bottom:14px; }:where(html[data-page="careers"]) .rv-browser-content strong { display:block;font:800 29px/1.13 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;letter-spacing:-.04em;position:relative;z-index:1; }:where(html[data-page="careers"]) .rv-browser-content p { font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;max-width:210px;color:#5e748f;margin:15px 0; }:where(html[data-page="careers"]) .rv-mock-button { display:inline-block;padding:10px 17px;background:#ffca32;color:#102039;border-radius:999px;font:700 10px 'Plus Jakarta Sans','Inter',sans-serif;position:relative;z-index:1; }
:where(html[data-page="careers"]) .rv-shapes { width:180px;height:160px;position:absolute;bottom:-15px;right:-20px;pointer-events:none; }:where(html[data-page="careers"]) .rv-shapes b { position:absolute; }:where(html[data-page="careers"]) .rv-shapes b:nth-child(1){width:110px;height:110px;border-radius:100% 0 0 0;background:#25b09e;right:0;bottom:0}:where(html[data-page="careers"]) .rv-shapes b:nth-child(2){width:140px;height:140px;border-radius:100% 0 0 0;background:#f6e8c6;right:0;bottom:0;z-index:-1}:where(html[data-page="careers"]) .rv-shapes b:nth-child(3){width:65px;height:65px;border-radius:50%;background:#ffce3a;left:0;top:0}
:where(html[data-page="careers"]) .rv-mini-phone { position:absolute;bottom:0;right:0;width:145px;height:278px;padding:30px 13px 15px;border:7px solid #132b44;border-radius:26px;background:#fffdf8;box-shadow:0 14px 24px #10203920;overflow:hidden; }:where(html[data-page="careers"]) .rv-mini-phone>b { position:absolute;top:4px;left:35%;width:30%;height:8px;border-radius:10px;background:#132b44; }:where(html[data-page="careers"]) .rv-mini-phone>span:not(.rv-mock-button) { font:800 12px 'Outfit','Plus Jakarta Sans',sans-serif; }:where(html[data-page="careers"]) .rv-mini-phone>strong { display:block;font:800 20px/1.12 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;margin:30px 0 20px; }:where(html[data-page="careers"]) .rv-mini-phone .rv-shapes { transform:scale(.6);transform-origin:bottom right; }:where(html[data-page="careers"]) .rv-mini-phone .rv-mock-button {font-size:8px;padding:8px 10px}
:where(html[data-page="careers"]) .rv-flow { display:grid;grid-template-columns:1fr 1fr 1.2fr;align-items:center;gap:16px;min-height:340px;position:relative; }:where(html[data-page="careers"]) .rv-flow::before {content:'';position:absolute;left:15%;right:15%;top:50%;height:2px;background:#f5a916;z-index:0}:where(html[data-page="careers"]) .rv-flow-input { position:relative;background:#fff;border:1px solid #e2e7ee;border-radius:18px;padding:18px 10px;text-align:center; }:where(html[data-page="careers"]) .rv-flow-input i {font-size:28px;color:#1da891;display:block;margin-bottom:10px}:where(html[data-page="careers"]) .rv-flow-input strong {display:block;font-size:12px;color:#102039}:where(html[data-page="careers"]) .rv-flow-input span {font-size:9px;color:#5e748f;display:block;margin-top:6px}:where(html[data-page="careers"]) .rv-flow-core { position:relative;aspect-ratio:1;border-radius:50%;background:#102039;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;box-shadow:0 0 0 10px #e7eff7; }:where(html[data-page="careers"]) .rv-flow-core i {font-size:34px}:where(html[data-page="careers"]) .rv-flow-core strong {font-size:11px;line-height:1.4}:where(html[data-page="careers"]) .rv-flow-outputs {display:flex;flex-direction:column;gap:24px;position:relative}:where(html[data-page="careers"]) .rv-flow-outputs>div {padding:16px 12px;background:#fff;border:1px solid #e2e7ee;border-radius:999px;font-size:11px;display:flex;align-items:center;gap:10px;color:#102039}:where(html[data-page="careers"]) .rv-flow-outputs i {font-size:23px;color:#248978}
:where(html[data-page="careers"]) .rv-cloud {background:#102c46;color:#fff;padding:34px;border-radius:26px;box-shadow:0 18px 30px #10203915}:where(html[data-page="careers"]) .rv-cloud-icon {text-align:center;font-size:100px;line-height:1}:where(html[data-page="careers"]) .rv-cloud-branches{height:42px;border:2px solid #ffcc31;border-bottom:0;border-radius:18px 18px 0 0;margin:12px 14% 0;position:relative}:where(html[data-page="careers"]) .rv-cloud-branches::after{content:'';position:absolute;left:50%;height:54px;top:-14px;border-left:2px solid #ffcc31}:where(html[data-page="careers"]) .rv-server-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}:where(html[data-page="careers"]) .rv-server{border:1px solid #88adc7;border-radius:8px;height:34px;display:flex;gap:5px;align-items:center;padding:10px;margin-bottom:4px}:where(html[data-page="careers"]) .rv-server b{width:6px;height:6px;border-radius:50%;background:#21d2b1}:where(html[data-page="careers"]) .rv-server span{width:24px;height:3px;background:#41637e;margin-left:4px}:where(html[data-page="careers"]) .rv-server-grid strong{display:block;text-align:center;font-size:14px;margin-top:16px;color:white}
:where(html[data-page="careers"]) .rv-app-phones {position:relative;min-height:430px;display:flex;justify-content:center;align-items:center;padding:10px 20px}:where(html[data-page="careers"]) .rv-app-phone{position:relative;width:47%;height:390px;border:7px solid #132b44;border-radius:31px;background:#fffdf8;padding:36px 18px 20px;overflow:hidden;box-shadow:0 18px 25px #10203920;transform:rotate(-7deg)}:where(html[data-page="careers"]) .rv-app-phone+.rv-app-phone{transform:rotate(7deg) translateY(16px);margin-left:-10px}:where(html[data-page="careers"]) .rv-phone-notch{position:absolute;top:-1px;left:28%;width:44%;height:15px;border-radius:0 0 12px 12px;background:#132b44}:where(html[data-page="careers"]) .rv-app-phone small{font:800 10px 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;white-space:nowrap}:where(html[data-page="careers"]) .rv-app-phone small span{color:#1aac90}:where(html[data-page="careers"]) .rv-app-phone>strong{font:800 29px/1.1 'Outfit','Plus Jakarta Sans',sans-serif;display:block;color:#102039;margin:36px 0 20px;letter-spacing:-.04em}:where(html[data-page="careers"]) .rv-app-phone p{font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;color:#5e748f;margin-bottom:18px}:where(html[data-page="careers"]) .rv-upgraded .rv-app-phone h3{font:800 17px/1.2 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;margin:12px 0}:where(html[data-page="careers"]) .rv-phone-row{display:flex;align-items:center;gap:10px;padding:14px 5px;border-bottom:1px solid #e2e7ee;font:600 11px 'Plus Jakarta Sans','Inter',sans-serif;color:#102039}:where(html[data-page="careers"]) .rv-phone-row i{font-size:23px;color:#24a694}:where(html[data-page="careers"]) .rv-app-phone .rv-shapes{transform:scale(.8);transform-origin:bottom right}:where(html[data-page="careers"]) .rv-platforms{text-align:center;color:#315373;font-size:12px!important;margin-top:22px}:where(html[data-page="careers"]) .rv-platforms i{font-size:18px;margin-left:12px}:where(html[data-page="careers"]) .rv-platforms span{margin-left:14px;color:#afbac6}
:where(html[data-page="careers"]) .rv-search {padding:28px;background:#fff;border:1px solid #e2e7ee;border-radius:24px;box-shadow:0 18px 35px #1020390c}:where(html[data-page="careers"]) .rv-search-field{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid #e2e7ee;border-radius:999px;color:#102039;font-size:13px}:where(html[data-page="careers"]) .rv-search-field i{font-size:21px}:where(html[data-page="careers"]) .rv-search-result{padding:28px 8px}:where(html[data-page="careers"]) .rv-search-result small{display:block;color:#71859b;font-size:10px;margin-bottom:14px}:where(html[data-page="careers"]) .rv-search-result strong{display:block;color:#2761b7;font:700 22px 'Outfit','Plus Jakarta Sans',sans-serif;margin-bottom:18px}:where(html[data-page="careers"]) .rv-search-result>span{display:block;height:9px;border-radius:5px;background:#e0e8f1;margin-top:8px}:where(html[data-page="careers"]) .rv-search-result>span:last-child{width:80%}:where(html[data-page="careers"]) .rv-trend{display:block;width:100%;height:auto;overflow:visible}:where(html[data-page="careers"]) .rv-illustration-label{font:400 10px/1.5 'Plus Jakarta Sans','Inter',sans-serif!important;color:#71859b;margin-top:14px;text-align:center}
:where(html[data-page="careers"]) .rv-funnel {display:flex;align-items:center;flex-direction:column;gap:12px;padding:0 24px}:where(html[data-page="careers"]) .rv-funnel-brand{width:92px;height:92px;border-radius:50%;background:#102039;color:#fff;display:grid;place-content:center;font:800 18px/1.15 'Outfit','Plus Jakarta Sans',sans-serif;text-align:center;margin-bottom:4px}:where(html[data-page="careers"]) .rv-funnel-step{display:flex;align-items:center;gap:20px;padding:24px 28px;border-radius:22px;width:100%;}:where(html[data-page="careers"]) .rv-funnel-step:nth-child(3){width:90%}:where(html[data-page="careers"]) .rv-funnel-step:nth-child(4){width:80%}:where(html[data-page="careers"]) .rv-funnel-step>i{font-size:38px;color:#102039}:where(html[data-page="careers"]) .rv-funnel-step strong{font:700 14px/1.3 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039}:where(html[data-page="careers"]) .rv-funnel-step p{font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;color:#5e748f;margin:8px 0 0}
:where(html[data-page="careers"]) .rv-media-fallback {display:flex!important;align-items:center;justify-content:center;flex-direction:column;gap:16px;min-height:140px;padding:30px;background:#eef4f2;color:#315373;border-radius:inherit;text-align:center;font:600 13px/1.5 'Plus Jakarta Sans','Inter',sans-serif}:where(html[data-page="careers"]) .rv-media-fallback i{font-size:38px;color:#28a595}:where(html[data-page="careers"]) .rv-media-fallback.rv-avatar{width:48px;height:48px;min-height:0;padding:0;border-radius:50%;font-size:14px}:where(html[data-page="careers"]) .rv-media-fallback small{font-size:10px;color:#5e748f;text-transform:uppercase;letter-spacing:.1em}
@media(min-width:1400px){:where(html[data-page="careers"]) .rv-upgraded .rv-hero{padding-top:48px;padding-bottom:58px}}
@media(max-width:1100px){:where(html[data-page="careers"]) .rv-upgraded .rv-hero-grid{gap:32px}:where(html[data-page="careers"]) .rv-upgraded .rv-container{width:calc(100% - 48px)}:where(html[data-page="careers"]) .rv-upgraded .rv-hero h1{font-size:46px!important}:where(html[data-page="careers"]) .rv-career-panel{padding:24px 12px}:where(html[data-page="careers"]) .rv-flow{gap:10px}:where(html[data-page="careers"]) .rv-app-phone{padding-inline:12px}:where(html[data-page="careers"]) .rv-app-phone>strong{font-size:26px}:where(html[data-page="careers"]) .rv-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){:where(html[data-page="careers"]) .rv-upgraded .rv-hero-grid{grid-template-columns:1fr;gap:30px}:where(html[data-page="careers"]) .rv-upgraded .rv-hero{padding:36px 0 44px}:where(html[data-page="careers"]) .rv-upgraded .rv-hero-copy{max-width:660px}:where(html[data-page="careers"]) .rv-upgraded .rv-hero-art{width:100%;max-width:580px;margin:auto}:where(html[data-page="careers"]) .rv-upgraded .rv-hero h1{font-size:clamp(38px,6vw,54px)!important}:where(html[data-page="careers"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities){padding-block:56px}:where(html[data-page="careers"]) .rv-upgraded .rv-description{max-width:640px}:where(html[data-page="careers"]) .rv-upgraded .rv-capabilities{padding-block:40px}:where(html[data-page="careers"]) .rv-upgraded .rv-section h2{font-size:34px!important}}
@media(max-width:540px){:where(html[data-page="careers"]) .rv-upgraded .rv-container{width:calc(100% - 40px)}:where(html[data-page="careers"]) .rv-upgraded .rv-hero h1{font-size:38px!important;line-height:1.12!important}:where(html[data-page="careers"]) .rv-upgraded .rv-description{font-size:15px}:where(html[data-page="careers"]) .rv-upgraded .rv-eyebrow{font-size:10px;margin-bottom:20px}:where(html[data-page="careers"]) .rv-upgraded .rv-button{font-size:12px;min-height:48px;padding:13px 17px}:where(html[data-page="careers"]) .rv-upgraded .rv-actions{gap:10px}:where(html[data-page="careers"]) .rv-upgraded .rv-hero-art{padding-top:0}:where(html[data-page="careers"]) .rv-capability-grid{grid-template-columns:1fr;gap:24px}:where(html[data-page="careers"]) .rv-upgraded .rv-section h2{font-size:29px!important}:where(html[data-page="careers"]) .rv-upgraded .rv-note{font-size:22px}:where(html[data-page="careers"]) .rv-orbit-core{font-size:19px}:where(html[data-page="careers"]) .rv-orbit-core span{font-size:16px}:where(html[data-page="careers"]) .rv-orbit-node i{font-size:24px}:where(html[data-page="careers"]) .rv-orbit-node strong{font-size:9px}:where(html[data-page="careers"]) .rv-orbit-node{gap:5px}:where(html[data-page="careers"]) .rv-career-panels{min-height:290px;padding:20px 2px;gap:9px}:where(html[data-page="careers"]) .rv-career-panel{height:240px;padding:20px 12px;gap:20px}:where(html[data-page="careers"]) .rv-career-panel strong{font-size:25px}:where(html[data-page="careers"]) .rv-career-panel span{font-size:9px}:where(html[data-page="careers"]) .rv-career-panel i{font-size:36px}:where(html[data-page="careers"]) .rv-roadmap{padding:20px}:where(html[data-page="careers"]) .rv-roadmap-step{gap:14px}:where(html[data-page="careers"]) .rv-roadmap-step .rv-icon{width:48px;height:48px;font-size:26px}:where(html[data-page="careers"]) .rv-upgraded .rv-roadmap-step h3{font-size:19px}:where(html[data-page="careers"]) .rv-devices{min-height:350px;padding-right:30px}:where(html[data-page="careers"]) .rv-browser-content{padding:16px;min-height:280px}:where(html[data-page="careers"]) .rv-browser-content strong{font-size:25px}:where(html[data-page="careers"]) .rv-browser-content p{max-width:160px}:where(html[data-page="careers"]) .rv-mini-phone{width:110px;height:225px;border-width:5px;padding:24px 10px 10px}:where(html[data-page="careers"]) .rv-mini-phone>strong{font-size:17px;margin:22px 0 14px}:where(html[data-page="careers"]) .rv-browser-content .rv-shapes{transform:scale(.7);transform-origin:bottom right}:where(html[data-page="careers"]) .rv-flow{grid-template-columns:1fr 1fr;gap:24px;min-height:300px}:where(html[data-page="careers"]) .rv-flow-input{grid-column:1;grid-row:1}:where(html[data-page="careers"]) .rv-flow-core{grid-column:2;grid-row:1;width:120px;justify-self:center}:where(html[data-page="careers"]) .rv-flow-outputs{grid-column:1/-1;flex-direction:row;gap:8px}:where(html[data-page="careers"]) .rv-flow-outputs>div{flex:1;flex-direction:column;text-align:center;padding:15px 8px;border-radius:16px;font-size:10px}:where(html[data-page="careers"]) .rv-flow::before{top:25%}:where(html[data-page="careers"]) .rv-cloud{padding:24px 20px}:where(html[data-page="careers"]) .rv-cloud-icon{font-size:80px}:where(html[data-page="careers"]) .rv-server-grid{gap:12px}:where(html[data-page="careers"]) .rv-server{padding:6px;height:28px}:where(html[data-page="careers"]) .rv-server-grid strong{font-size:11px}:where(html[data-page="careers"]) .rv-server span{width:13px}:where(html[data-page="careers"]) .rv-app-phones{padding:10px 4px;min-height:350px}:where(html[data-page="careers"]) .rv-app-phone{height:320px;border-width:5px;border-radius:25px;padding:25px 12px 15px;width:49%}:where(html[data-page="careers"]) .rv-app-phone>strong{font-size:23px;margin:26px 0 16px}:where(html[data-page="careers"]) .rv-app-phone small{font-size:8px}:where(html[data-page="careers"]) .rv-app-phone p{font-size:9px}:where(html[data-page="careers"]) .rv-upgraded .rv-app-phone h3{font-size:14px}:where(html[data-page="careers"]) .rv-phone-row{font-size:10px;padding:11px 2px;gap:7px}:where(html[data-page="careers"]) .rv-app-phone .rv-shapes{transform:scale(.6)}:where(html[data-page="careers"]) .rv-app-phone .rv-mock-button{font-size:9px;padding:9px 12px}:where(html[data-page="careers"]) .rv-search{padding:22px}:where(html[data-page="careers"]) .rv-search-field{font-size:11px;padding:12px}:where(html[data-page="careers"]) .rv-search-result strong{font-size:19px}:where(html[data-page="careers"]) .rv-funnel{padding:0 6px}:where(html[data-page="careers"]) .rv-funnel-step{padding:19px 20px;gap:14px}:where(html[data-page="careers"]) .rv-funnel-step>i{font-size:29px}:where(html[data-page="careers"]) .rv-funnel-step strong{font-size:12px}:where(html[data-page="careers"]) .rv-funnel-step p{font-size:10px}:where(html[data-page="careers"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities){padding-block:44px}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="careers"]) .rv-upgraded .rv-button{transition:none}:where(html[data-page="careers"]) .rv-upgraded .rv-button:hover{transform:none}}
@media(max-width:600px){
  :where(html[data-page="careers"]) .rv-upgraded .featured-header-row { flex-wrap:wrap; gap:14px; }
  :where(html[data-page="careers"]) .rv-upgraded #client-stories .container > div:first-child { flex-wrap:wrap; gap:20px; }
  :where(html[data-page="careers"]) .rv-upgraded #client-stories .container > div:first-child > div { min-width:0; max-width:100%; flex-wrap:wrap; }
  :where(html[data-page="careers"]) .rv-upgraded .rv-orbit-6 .rv-orbit-node strong { font-size:8px; }
}
:where(html[data-page="careers"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(h2, h3, .final-cta-headline, .kx-cta-headline, .display-h2) {
  color: #FFFFFF !important;
}
:where(html[data-page="careers"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(h2, h3, .final-cta-headline, .kx-cta-headline) :is(.highlight-gold, .cta-gold-text, em, span.gold, .kx-text-gold) {
  color: #FFC526 !important;
  background: transparent !important;
}
:where(html[data-page="careers"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(p, .kx-cta-sub) {
  color: rgba(255, 255, 255, 0.9) !important;
}


/* micro-interactions.css */
/* Shared feedback layer. Motion acknowledges actions; informational content stays still. */
:root:where([data-page="careers"]){--kx-feedback-ease:cubic-bezier(.2,.75,.25,1);--kx-feedback-duration:180ms}
:where(html[data-page="careers"]) :where(a,button,summary,input,textarea,select):focus-visible{outline:3px solid #187d6b!important;outline-offset:4px}
:where(html[data-page="careers"]) :where(.shared-kx-footer,.ma-dark,.ma-closing) :where(a,button):focus-visible{outline-color:#ffc526!important}
:where(html[data-page="careers"]) :where(button,summary,.kx-mi-action){-webkit-tap-highlight-color:rgba(245,169,22,.18);touch-action:manipulation}
:where(html[data-page="careers"]) .kx-mi-action{transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease),scale 120ms var(--kx-feedback-ease),box-shadow var(--kx-feedback-duration) var(--kx-feedback-ease),background-color var(--kx-feedback-duration) ease,border-color var(--kx-feedback-duration) ease!important}
:where(html[data-page="careers"]) .kx-mi-arrow{display:inline-block;transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease)!important}
:where(html[data-page="careers"]) .kx-mi-card{transition:translate 220ms var(--kx-feedback-ease),box-shadow 220ms var(--kx-feedback-ease),border-color 180ms ease!important}
:where(html[data-page="careers"]) .shared-footer-links a,:where(html[data-page="careers"]) .shared-kx-dropdown-item,:where(html[data-page="careers"]) .shared-kx-mobile-nav-link{ text-decoration-color:transparent;text-underline-offset:5px;transition:color 160ms ease,background-color 160ms ease,text-decoration-color 160ms ease!important}
:where(html[data-page="careers"]) .shared-footer-links a:focus-visible{ text-decoration:underline;text-decoration-color:currentColor }
:where(html[data-page="careers"]) :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea,select){transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease!important}
:where(html[data-page="careers"]) :where(input:not([type=checkbox]):not([type=radio]),textarea,select):focus{border-color:#187d6b!important;box-shadow:0 0 0 3px rgb(24 125 107 / .12)}
:where(html[data-page="careers"]) :where(button[aria-expanded],summary){transition:background-color 160ms ease,color 160ms ease!important}
:where(html[data-page="careers"]) :where(button[aria-expanded],summary):focus-visible{border-radius:8px}
@media(hover:hover) and (pointer:fine){
  :where(html[data-page="careers"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):hover{translate:0 -2px}
  :where(html[data-page="careers"]) .kx-mi-action:hover .kx-mi-arrow,:where(html[data-page="careers"]) .kx-mi-action:focus-visible .kx-mi-arrow{translate:3px 0}
  :where(html[data-page="careers"]) .kx-mi-card:hover,:where(html[data-page="careers"]) .kx-mi-card:focus-within{translate:0 -3px;border-color:#d8ba78;box-shadow:0 10px 24px rgb(16 32 57 / .08)}
  :where(html[data-page="careers"]) .shared-footer-links a:hover{text-decoration:underline;text-decoration-color:currentColor}
}
:where(html[data-page="careers"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):active{translate:0 0;scale:.98;transition-duration:80ms!important}
:where(html[data-page="careers"]) .kx-mi-card:active{translate:0 -1px}
/* Honor this preference for both this layer and pre-existing decorative loops. */
@media(prefers-reduced-motion:reduce){
  html:where([data-page="careers"]){scroll-behavior:auto!important}
  :where(html[data-page="careers"]) *,:where(html[data-page="careers"]) *::before,:where(html[data-page="careers"]) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  :where(html[data-page="careers"]) .kx-mi-action,:where(html[data-page="careers"]) .kx-mi-card,:where(html[data-page="careers"]) .kx-mi-arrow{translate:none!important;scale:none!important;transition:none!important}
  :where(html[data-page="careers"]) .shared-footer-links a,:where(html[data-page="careers"]) .shared-kx-dropdown-item,:where(html[data-page="careers"]) .shared-kx-mobile-nav-link{transition:none!important}
}

/* careers-hero.css */
/* ==========================================================================
   KAXON CAREERS HERO — FLAGSHIP UPGRADE v6
   Reference-locked at 1536×1024. Scoped to #careers-hero and #careers-feels-strip.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. CUSTOM PROPERTIES (scoped overrides — no global bleed)
   -------------------------------------------------------------------------- */
:where(html[data-page="careers"]) #careers-hero,:where(html[data-page="careers"]) 
#careers-feels-strip {
  --ch-canvas:       #FFFDF8;
  --ch-canvas-warm:  #FBF7EE;
  --ch-surface:      #FFFFFF;
  --ch-navy:         #082B55;
  --ch-navy-text:    #071F42;
  --ch-body:         #587596;
  --ch-body-soft:    #8095AB;
  --ch-gold:         #FFC526;
  --ch-gold-strong:  #FFBF00;
  --ch-gold-marker:  #FFD65A;
  --ch-gold-soft:    #FFF2C7;
  --ch-gold-deep:    #B77C00;
  --ch-blue:         #2B7FFF;
  --ch-blue-soft:    #E8F1FF;
  --ch-purple:       #8252EF;
  --ch-purple-soft:  #EEE6FF;
  --ch-green:        #11B976;
  --ch-green-soft:   #E0F7EC;
  --ch-pink:         #EB4D8B;
  --ch-border:       rgba(8,43,85,.09);
  --ch-border-md:    rgba(8,43,85,.12);
  --ch-dots:         rgba(43,127,255,.16);
  --ch-font-head:    'Manrope', sans-serif;
  --ch-font-body:    'Inter', sans-serif;
  --ch-font-hand:    'Caveat', cursive;
  --ch-ease:         cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------------------
   1. SECTION SHELL
   -------------------------------------------------------------------------- */
:where(html[data-page="careers"]) #careers-hero {
  background: var(--ch-canvas);
  position: relative;
  overflow: hidden;
  padding: 0;
  /* Reserve room: header ~92 px, hero ~750 px */
  min-height: 750px;
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   2. BACKGROUND GEOMETRY (non-interactive decorative layer)
   -------------------------------------------------------------------------- */
:where(html[data-page="careers"]) .chBg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Large tilted cream shape — center-left bridge */
:where(html[data-page="careers"]) .chBg-shapeA {
  position: absolute;
  left: 34%;
  top: 88px;
  width: 330px;
  height: 555px;
  background: #F7F0E4;
  opacity: .72;
  border-radius: 80px;
  transform: rotate(-7deg);
  transform-origin: center;
}

/* Lower cream organic blob */
:where(html[data-page="careers"]) .chBg-shapeB {
  position: absolute;
  left: 29%;
  top: 580px;
  width: 310px;
  height: 240px;
  background: #F6EFE5;
  opacity: .85;
  border-radius: 60px 80px 70px 90px;
  transform: rotate(7deg);
}

/* Right partial cream circle */
:where(html[data-page="careers"]) .chBg-shapeC {
  position: absolute;
  right: -80px;
  top: 360px;
  width: 430px;
  height: 430px;
  background: #F8F1E6;
  opacity: .92;
  border-radius: 50%;
}

/* Right dot-field */
:where(html[data-page="careers"]) .chBg-dots {
  position: absolute;
  right: 0;
  top: 90px;
  width: 380px;
  height: 470px;
  background-image: radial-gradient(circle, var(--ch-dots) 1px, transparent 1.2px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 55% 65% at 50% 40%, rgba(0,0,0,.95) 30%, rgba(0,0,0,.45) 68%, transparent 100%);
  mask-image:         radial-gradient(ellipse 55% 65% at 50% 40%, rgba(0,0,0,.95) 30%, rgba(0,0,0,.45) 68%, transparent 100%);
}

/* --------------------------------------------------------------------------
   3. CONTAINER & GRID
   -------------------------------------------------------------------------- */
:where(html[data-page="careers"]) .careersHero-container {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: clamp(24px, 4vw, 82px);
  position: relative;
  z-index: 5;
}

:where(html[data-page="careers"]) .careersHero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
  gap: clamp(28px, 3.5vw, 52px);
  align-items: flex-start;
  padding-block: clamp(44px, 5.5vh, 88px) clamp(28px, 4vh, 60px);
  min-height: 700px;
}

/* --------------------------------------------------------------------------
   4. LEFT NARRATIVE
   -------------------------------------------------------------------------- */
:where(html[data-page="careers"]) .careersHero-narrative {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 5;
  padding-top: 16px;
  min-width: 0;
}

/* Eyebrow pill */
:where(html[data-page="careers"]) .careersHero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding-inline: 17px;
  background: var(--ch-blue-soft);
  color: #2A6EE9;
  border-radius: 999px;
  font-family: var(--ch-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* H1 headline — scaled to fit 2 editorial lines with zero cross-panel collision */
:where(html[data-page="careers"]) #careers-hero h1#careers-hero-heading {
  font-family: var(--ch-font-head) !important;
  font-size: clamp(38px, 3.4vw, 54px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -.038em !important;
  color: var(--ch-navy-text) !important;
  margin: 0 0 20px !important;
  max-width: 100%;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Line 1 of h1 — plain */
:where(html[data-page="careers"]) #careers-hero h1#careers-hero-heading .chLine1 {
  display: block;
}

/* Line 2 — highlighted "Grow through ownership." */
:where(html[data-page="careers"]) #careers-hero h1#careers-hero-heading .chLine2 {
  display: inline;
  position: relative;
  max-width: 100%;
  padding-inline: .035em;
  background: linear-gradient(transparent 70%, rgba(255, 197, 38, .68) 70%, rgba(255, 197, 38, .68) 91%, transparent 91%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Gold editorial marker behind line 2 */
:where(html[data-page="careers"]) #careers-hero h1#careers-hero-heading .chLine2::before {
  content: '';
  position: absolute;
  inset-inline: -12px -10px;
  top: 54%;
  height: .46em;
  background: var(--ch-gold-marker);
  border-radius: 12px;
  transform: rotate(-.5deg) translateY(-50%);
  z-index: -1;
  pointer-events: none;
  display: none;
}

/* Gold underline beneath line 2 */
:where(html[data-page="careers"]) #careers-hero h1#careers-hero-heading .chLine2::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 86%;
  height: 4px;
  background: #ECAF00;
  border-radius: 4px;
  transform: rotate(-1.2deg);
  display: none;
}

/* Impact marks — 3 small tick marks at the right edge */
:where(html[data-page="careers"]) .chLine2-marks {
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
  display: none;
}
:where(html[data-page="careers"]) .chLine2-marks span {
  display: block;
  width: 14px;
  height: 3px;
  background: #F2B600;
  border-radius: 2px;
}
:where(html[data-page="careers"]) .chLine2-marks span:nth-child(1) { width: 10px; }
:where(html[data-page="careers"]) .chLine2-marks span:nth-child(3) { width: 8px; }

/* Description */
:where(html[data-page="careers"]) .careersHero-description {
  font-family: var(--ch-font-body);
  font-size: 18px;
  line-height: 1.58;
  color: var(--ch-body);
  max-width: 565px;
  margin: 0 0 32px;
}

/* CTA row */
:where(html[data-page="careers"]) .careersHero-actions {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-bottom: 36px;
  flex-wrap: nowrap;
}

/* Primary CTA */
:where(html[data-page="careers"]) .careersHero-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding-inline: 30px;
  background: var(--ch-gold);
  color: var(--ch-navy);
  border-radius: 999px;
  font-family: var(--ch-font-body);
  font-size: 16px;
  font-weight: 750;
  white-space: nowrap;
  box-shadow: 0 12px 26px rgba(255,191,0,.22);
  text-decoration: none;
  transition: background-color 200ms var(--ch-ease), box-shadow 200ms var(--ch-ease), transform 200ms var(--ch-ease);
}
:where(html[data-page="careers"]) .careersHero-primary:hover {
  background: #FFBA00;
  box-shadow: 0 16px 32px rgba(255,191,0,.35);
  transform: translateY(-2px);
}
:where(html[data-page="careers"]) .careersHero-primary i { font-size: 1rem; }

/* Secondary CTA */
:where(html[data-page="careers"]) .careersHero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding-inline: 24px;
  background: var(--ch-surface);
  border: 1px solid rgba(8,43,85,.12);
  border-radius: 999px;
  color: var(--ch-navy);
  font-family: var(--ch-font-body);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms var(--ch-ease);
}
:where(html[data-page="careers"]) .careersHero-secondary:hover {
  border-color: rgba(8,43,85,.24);
  box-shadow: 0 8px 20px rgba(8,43,85,.07);
  transform: translateY(-2px);
}
:where(html[data-page="careers"]) .careersHero-secondary i { font-size: 1.15rem; color: var(--ch-body); }

/* --------------------------------------------------------------------------
   5. RESPONSIBILITY SIGNAL
   -------------------------------------------------------------------------- */
:where(html[data-page="careers"]) .careersHero-signal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
  margin-bottom: 24px;
  width: 100%;
}

:where(html[data-page="careers"]) .careersHero-signal > p {
  font-family: var(--ch-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #64809B;
  margin: 0;
}

:where(html[data-page="careers"]) .careersHero-signal > ol {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

:where(html[data-page="careers"]) .careersHero-signal > ol li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ch-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ch-navy);
  white-space: nowrap;
}

/* Colored dot before each step */
:where(html[data-page="careers"]) .careersHero-signal > ol li::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
:where(html[data-page="careers"]) .careersHero-signal > ol li:nth-child(1)::before { background: var(--ch-blue); }
:where(html[data-page="careers"]) .careersHero-signal > ol li:nth-child(2)::before { background: #FFB800; }
:where(html[data-page="careers"]) .careersHero-signal > ol li:nth-child(3)::before { background: var(--ch-green); }
:where(html[data-page="careers"]) .careersHero-signal > ol li:nth-child(4)::before { background: var(--ch-purple); }

/* Connector line between steps */
:where(html[data-page="careers"]) .careersHero-signal > ol li:not(:last-child)::after {
  content: '';
  display: block;
  width: 38px;
  height: 1px;
  background: rgba(8,43,85,.17);
  margin-left: 8px;
  margin-right: 8px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   6. LEFT HANDWRITTEN ANNOTATION (Quote + Arrow in same line pointing to Own)
   -------------------------------------------------------------------------- */
:where(html[data-page="careers"]) .chAnnotation-left {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  font-family: var(--ch-font-hand);
  color: #648AC4;
  pointer-events: none;
  user-select: none;
  margin-top: 6px;
  margin-left: -4px;
}

:where(html[data-page="careers"]) .chAnnotation-quote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 21px;
  line-height: 1.05;
  transform: rotate(-6deg);
}

:where(html[data-page="careers"]) .chAnnotation-quote p {
  margin: 0;
  white-space: nowrap;
}

:where(html[data-page="careers"]) .chAnnotation-arrow {
  display: block;
  flex-shrink: 0;
  margin-top: -12px;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   7. PROGRESSION PANEL (RIGHT COLUMN)
   -------------------------------------------------------------------------- */
:where(html[data-page="careers"]) .careersHero-explorer {
  position: relative;
  background: rgba(255,255,255,.97);
  border: 1px solid var(--ch-border);
  border-radius: 26px;
  box-shadow: 0 24px 50px rgba(16,39,71,.08);
  padding: 22px 24px;
  min-height: auto;
  display: flex;
  flex-direction: column;
  z-index: 6;
  box-sizing: border-box;
  overflow: visible;
}

/* Panel handwritten annotation (top-right corner) */
:where(html[data-page="careers"]) .chAnnotation-panel {
  position: absolute;
  top: -36px;
  right: 20px;
  font-family: var(--ch-font-hand);
  font-size: 16px;
  line-height: 1.05;
  color: #4778C3;
  transform: rotate(-6deg);
  pointer-events: none;
  user-select: none;
  z-index: 10;
  text-align: right;
}
:where(html[data-page="careers"]) .chAnnotation-panel p { margin: 0; white-space: nowrap; }
:where(html[data-page="careers"]) .chAnnotation-panel svg {
  display: block;
  margin-left: auto;
  margin-right: 6px;
  margin-top: 2px;
  width: 26px;
  height: 18px;
  overflow: visible;
}

/* ---------- 7a. Panel Header ---------- */
:where(html[data-page="careers"]) .careersHero-panelHeader {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ch-border);
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* Panel eyebrow */
:where(html[data-page="careers"]) .careersHero-panelHeader .chPanel-eyebrow {
  font-family: var(--ch-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #B47A00;
  display: block;
  margin-bottom: 6px;
}

/* Panel prev/next nav */
:where(html[data-page="careers"]) .chPanelNav {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}
:where(html[data-page="careers"]) .chPanelNav button {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--ch-surface);
  border: 1px solid rgba(8,43,85,.10);
  color: var(--ch-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms, transform 150ms;
}
:where(html[data-page="careers"]) .chPanelNav button:hover {
  background: var(--ch-canvas);
  border-color: rgba(8,43,85,.2);
  transform: scale(1.06);
}
:where(html[data-page="careers"]) .chPanelNav button:focus-visible {
  outline: 2px solid var(--ch-gold);
  outline-offset: 3px;
}

/* Panel title (h2) */
:where(html[data-page="careers"]) #careers-hero h2 {
  font-family: var(--ch-font-head) !important;
  font-size: clamp(24px, 2.2vw, 32px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
  color: var(--ch-navy-text) !important;
  margin: 0 0 8px !important;
  max-width: 340px;
}

/* Panel description */
:where(html[data-page="careers"]) .careersHero-panelHeader > p:last-child {
  font-family: var(--ch-font-body);
  font-size: 13.5px;
  line-height: 1.45;
  color: #6C85A0;
  max-width: 470px;
  margin: 0;
}

/* ---------- 7b. Panel Body Grid ---------- */
:where(html[data-page="careers"]) .careersHero-panelBody {
  display: grid;
  grid-template-columns: 204px minmax(0, 1fr);
  gap: 12px;
  flex: 1;
  min-height: 0;
}

/* ---------- 7c. Milestone Rail (left column of panel) ---------- */
:where(html[data-page="careers"]) .careersHero-selector {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 0;
}

:where(html[data-page="careers"]) .careersHero-selector::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, #96BEFF, #BA9AFF, #FFC526, #70DDA8);
  border-radius: 2px;
  pointer-events: none;
}

/* Each milestone button */
:where(html[data-page="careers"]) .careersHero-selector button {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 74px;
  padding: 10px 10px 10px 12px;
  border: 1px solid rgba(8,43,85,.07);
  background: var(--ch-surface);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background-color 160ms, border-color 160ms, box-shadow 160ms;
  translate: none !important;
  scale: none !important;
}

:where(html[data-page="careers"]) .careersHero-selector button:hover:not([aria-pressed="true"]) {
  background: var(--ch-canvas);
  border-color: rgba(8,43,85,.12);
}

/* Active milestone */
:where(html[data-page="careers"]) .careersHero-selector button[aria-pressed="true"] {
  background: linear-gradient(90deg, #FFF0B6, #FFF9E4);
  border-color: rgba(255,191,0,.32);
  box-shadow: 0 8px 20px rgba(255,191,0,.08);
}

/* Left accent on active */
:where(html[data-page="careers"]) .careersHero-selector button[aria-pressed="true"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--ch-gold);
  border-radius: 0 2px 2px 0;
}

:where(html[data-page="careers"]) .careersHero-selector button:focus-visible {
  outline: 2px solid var(--ch-gold);
  outline-offset: 3px;
}

/* Icon box inside milestone button */
:where(html[data-page="careers"]) .chMilestone-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* Milestone text */
:where(html[data-page="careers"]) .chMilestone-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

:where(html[data-page="careers"]) .careersHero-days {
  font-family: var(--ch-font-body);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ch-body-soft);
  letter-spacing: .04em;
}

:where(html[data-page="careers"]) .careersHero-phase {
  font-family: var(--ch-font-head);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ch-navy);
  line-height: 1.15;
}

:where(html[data-page="careers"]) .chMilestone-short {
  font-family: var(--ch-font-body);
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ch-body);
}

/* ---------- 7d. Active Detail Panel (right column of panel) ---------- */
:where(html[data-page="careers"]) #careers-milestone-detail {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  box-sizing: border-box;
}

:where(html[data-page="careers"]) .careersHero-detailContent {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #FFFCF5, #FFFFFF);
  border: 1px solid rgba(8,43,85,.08);
  border-radius: 15px;
  padding: 18px 20px;
  position: relative;
  box-sizing: border-box;
}

/* Phase chip */
:where(html[data-page="careers"]) .careersHero-detailPhase {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding-inline: 9px;
  background: #FFF2C6;
  color: #AE7800;
  border-radius: 999px;
  font-family: var(--ch-font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: 8px;
}

/* Day label */
:where(html[data-page="careers"]) .careersHero-detailDays {
  font-family: var(--ch-font-body);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ch-gold-deep);
  margin: 0 0 4px;
}

/* Detail title (h3) */
:where(html[data-page="careers"]) #careers-hero h3 {
  font-family: var(--ch-font-head) !important;
  font-size: clamp(19px, 1.6vw, 24px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
  color: #082B55 !important;
  max-width: 295px;
  margin: 0 0 8px !important;
}

/* Detail description */
:where(html[data-page="careers"]) .careersHero-detailDescription {
  font-family: var(--ch-font-body);
  font-size: 13px;
  line-height: 1.42;
  color: #617C9B;
  max-width: 300px;
  margin: 0 0 auto;
}

/* ---------- 7e. 3D Ownership Visual ---------- */
:where(html[data-page="careers"]) .ch3d-scene {
  position: relative;
  width: 100%;
  height: 120px;
  margin-top: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  overflow: visible;
}

/* Base platform */
:where(html[data-page="careers"]) .ch3d-platform {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 14px;
  background: linear-gradient(to bottom, #EAE6DC, #D8D3CA);
  border-radius: 50% / 30%;
  box-shadow: 0 10px 18px rgba(8,43,85,.08);
}

/* Step 1 — short cylinder */
:where(html[data-page="careers"]) .ch3d-step1 {
  position: absolute;
  bottom: 18px;
  left: calc(50% - 62px);
  width: 38px;
  height: 20px;
  background: linear-gradient(to bottom, #EFEBE2, #E2DDD5);
  border-radius: 50% / 30%;
  box-shadow: 0 6px 12px rgba(8,43,85,.06);
}

/* Step 2 — medium cuboid */
:where(html[data-page="careers"]) .ch3d-step2 {
  position: absolute;
  bottom: 20px;
  left: calc(50% - 18px);
  width: 42px;
  height: 36px;
  background: linear-gradient(145deg, #F5F2EC, #E8E4DC);
  border-radius: 8px;
  box-shadow: 0 8px 14px rgba(8,43,85,.07);
}

/* Golden ownership cube — the hero visual object */
:where(html[data-page="careers"]) .ch3d-cube {
  position: absolute;
  bottom: 50px;
  left: calc(50% - 4px);
  width: 50px;
  height: 50px;
  background: linear-gradient(145deg, #FFD95E 0%, #FFC21E 52%, #E8A500 100%);
  border-radius: 11px;
  box-shadow: 0 14px 24px rgba(255,185,0,.26);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 220ms var(--ch-ease);
}
:where(html[data-page="careers"]) .ch3d-cube i {
  font-size: 18px;
  color: #8A6100;
}

/* Dashed trajectory arc */
:where(html[data-page="careers"]) .ch3d-arc {
  position: absolute;
  bottom: 16px;
  left: calc(50% - 56px);
  width: 105px;
  height: 60px;
  pointer-events: none;
}

/* ---------- 7f. Focus Row ---------- */
:where(html[data-page="careers"]) .careersHero-focus {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(8,43,85,.08);
  margin-top: 10px;
}

:where(html[data-page="careers"]) .careersHero-focus span {
  font-family: var(--ch-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #64809B;
}

:where(html[data-page="careers"]) .careersHero-focus strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ch-font-body);
  font-size: 13.5px;
  font-weight: 700;
  color: #0C9964;
}
:where(html[data-page="careers"]) .careersHero-focus strong i { font-size: 0.95rem; }

/* ---------- 7g. Disclaimer ---------- */
:where(html[data-page="careers"]) .careersHero-disclaimer {
  font-family: var(--ch-font-body);
  font-size: 11px;
  line-height: 1.4;
  color: #8297AD;
  text-align: center;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--ch-border);
}

/* --------------------------------------------------------------------------
   8. PAGE-ENTRY ANIMATION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  :where(html[data-page="careers"]) .careersHero-narrative {
    animation: page-careers-chFadeUp 500ms var(--ch-ease) both;
  }
  :where(html[data-page="careers"]) .careersHero-explorer {
    animation: page-careers-chFadeUp 600ms 80ms var(--ch-ease) both;
  }
  @keyframes page-careers-chFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Milestone detail cross-fade */
  :where(html[data-page="careers"]) .careersHero-detailContent.ch-transitioning {
    animation: page-careers-chDetailIn 180ms var(--ch-ease) both;
  }
  @keyframes page-careers-chDetailIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* 3D cube entrance when milestone changes */
  :where(html[data-page="careers"]) .ch3d-cube.ch-cubeIn {
    animation: page-careers-chCubeIn 220ms var(--ch-ease) both;
  }
  @keyframes page-careers-chCubeIn {
    from { opacity: 0; transform: translateY(5px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* --------------------------------------------------------------------------
   9. FEELS STRIP  (#careers-feels-strip)
   -------------------------------------------------------------------------- */
:where(html[data-page="careers"]) #careers-feels-strip {
  background: var(--ch-surface);
  border-top: 1px solid rgba(8,43,85,.055);
  padding: 24px 0 54px;
  position: relative;
  z-index: 4;
}

:where(html[data-page="careers"]) .chFeels-container {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: clamp(24px, 4vw, 82px);
}

:where(html[data-page="careers"]) .chFeels-label {
  font-family: var(--ch-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8297AD;
  margin: 0 0 14px;
  display: block;
}

:where(html[data-page="careers"]) .chFeels-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

:where(html[data-page="careers"]) .chFeels-card {
  min-height: 104px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  background: var(--ch-surface);
  border: 1px solid rgba(8,43,85,.08);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(16,39,71,.04);
  transition: transform 180ms var(--ch-ease), box-shadow 180ms;
  box-sizing: border-box;
}
:where(html[data-page="careers"]) .chFeels-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(16,39,71,.08);
}

:where(html[data-page="careers"]) .chFeels-iconBox {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

:where(html[data-page="careers"]) .chFeels-text h4 {
  font-family: var(--ch-font-head);
  font-size: 15px;
  font-weight: 800;
  color: var(--ch-navy);
  line-height: 1.2;
  margin: 0 0 4px;
}
:where(html[data-page="careers"]) .chFeels-text p {
  font-family: var(--ch-font-body);
  font-size: 13px;
  color: var(--ch-body);
  line-height: 1.45;
  margin: 0;
}

/* --------------------------------------------------------------------------
   10. RESPONSIVE — SMALL DESKTOP (1100–1365px)
   -------------------------------------------------------------------------- */
@media (max-width: 1365px) and (min-width: 1100px) {
  :where(html[data-page="careers"]) .careersHero-grid {
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
    gap: 36px;
  }
  :where(html[data-page="careers"]) #careers-hero h1#careers-hero-heading {
    font-size: clamp(36px, 3.2vw, 46px) !important;
  }
  :where(html[data-page="careers"]) .careersHero-explorer {
    min-height: 600px;
  }
  :where(html[data-page="careers"]) .careersHero-panelBody {
    grid-template-columns: 196px minmax(0, 1fr);
  }
  :where(html[data-page="careers"]) .careersHero-selector button {
    min-height: 90px;
  }
}

/* --------------------------------------------------------------------------
   11. RESPONSIVE — TABLET (768–1099px) — Stack layout
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  :where(html[data-page="careers"]) .careersHero-grid {
    display: block;
  }

  :where(html[data-page="careers"]) .careersHero-narrative {
    align-items: flex-start;
    max-width: 740px;
    padding-bottom: 48px;
    padding-top: 64px;
  }

  :where(html[data-page="careers"]) #careers-hero h1#careers-hero-heading {
    font-size: clamp(36px, 5vw, 48px) !important;
    line-height: 1.04 !important;
    max-width: 720px;
  }

  :where(html[data-page="careers"]) #careers-hero h1#careers-hero-heading .chLine2 {
    display: inline;
    padding-inline: .04em;
    background: linear-gradient(transparent 69%, rgba(255, 197, 38, .68) 69%, rgba(255, 197, 38, .68) 91%, transparent 91%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  :where(html[data-page="careers"]) #careers-hero h1#careers-hero-heading .chLine2::before,:where(html[data-page="careers"]) 
  #careers-hero h1#careers-hero-heading .chLine2::after,:where(html[data-page="careers"]) 
  #careers-hero .chLine2-marks {
    display: none;
  }

  :where(html[data-page="careers"]) .chAnnotation-left {
    display: none;
  }

  :where(html[data-page="careers"]) .careersHero-explorer {
    max-width: 820px;
    width: 100%;
    min-height: auto;
    margin-bottom: 24px;
  }

  :where(html[data-page="careers"]) .chAnnotation-panel {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE — MOBILE (<768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :where(html[data-page="careers"]) #careers-hero {
    min-height: auto;
  }
  :where(html[data-page="careers"]) .careersHero-container {
    padding-inline: 18px;
  }

  :where(html[data-page="careers"]) .careersHero-narrative {
    padding-top: 48px;
    padding-bottom: 40px;
  }

  :where(html[data-page="careers"]) #careers-hero h1#careers-hero-heading {
    font-size: clamp(36px, 8.4vw, 50px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.042em !important;
    white-space: normal !important;
    max-width: 100%;
  }

  :where(html[data-page="careers"]) #careers-hero h1#careers-hero-heading .chLine2 {
    white-space: normal;
  }

  :where(html[data-page="careers"]) .careersHero-description {
    font-size: 16px;
    max-width: 100%;
  }

  :where(html[data-page="careers"]) .careersHero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }
  :where(html[data-page="careers"]) .careersHero-primary,:where(html[data-page="careers"]) 
  .careersHero-secondary {
    justify-content: center;
    width: 100%;
  }

  :where(html[data-page="careers"]) .careersHero-signal > ol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
  }
  /* Remove connectors on mobile */
  :where(html[data-page="careers"]) .careersHero-signal > ol li:not(:last-child)::after {
    display: none;
  }

  :where(html[data-page="careers"]) .careersHero-explorer {
    border-radius: 22px;
    padding: 20px 16px;
    min-height: auto;
  }

  /* Switch panel body to block — rail becomes 2x2 responsive grid on mobile */
  :where(html[data-page="careers"]) .careersHero-panelBody {
    display: block;
    min-height: 0;
  }

  :where(html[data-page="careers"]) .careersHero-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    margin-bottom: 14px;
  }
  /* Remove vertical guide line */
  :where(html[data-page="careers"]) .careersHero-selector::before {
    display: none;
  }

  :where(html[data-page="careers"]) .careersHero-selector button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px 12px;
    text-align: left;
    border: 1px solid rgba(8,43,85,.09);
    border-radius: 12px;
    background: var(--ch-surface);
    grid-template-columns: unset;
    box-sizing: border-box;
    transition: all 160ms var(--ch-ease);
  }
  :where(html[data-page="careers"]) .careersHero-selector button::before {
    display: none;
  }
  :where(html[data-page="careers"]) .careersHero-selector button[aria-pressed="true"] {
    background: linear-gradient(135deg, #FFF0B6 0%, #FFF9E4 100%);
    border-color: var(--ch-gold);
    box-shadow: 0 4px 14px rgba(255,191,0,.15);
  }

  :where(html[data-page="careers"]) .chMilestone-icon {
    display: flex;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 0.95rem;
    flex-shrink: 0;
  }
  :where(html[data-page="careers"]) .chMilestone-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
  }
  :where(html[data-page="careers"]) .careersHero-days {
    font-size: 10px;
    font-weight: 700;
    color: var(--ch-body-soft);
    letter-spacing: .03em;
  }
  :where(html[data-page="careers"]) .careersHero-phase {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ch-navy);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :where(html[data-page="careers"]) .chMilestone-short { display: none; }

  :where(html[data-page="careers"]) .careersHero-detailContent {
    padding: 18px 16px;
  }
  :where(html[data-page="careers"]) #careers-hero h3 {
    font-size: 20px !important;
    max-width: 100%;
  }

  :where(html[data-page="careers"]) .ch3d-scene {
    height: 105px;
    margin-top: 8px;
  }
  :where(html[data-page="careers"]) .ch3d-cube {
    width: 44px;
    height: 44px;
    bottom: 42px;
  }
  :where(html[data-page="careers"]) .ch3d-cube i { font-size: 16px; }

  :where(html[data-page="careers"]) .chFeels-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  :where(html[data-page="careers"]) #careers-feels-strip { padding-bottom: 36px; }
}

@media (min-width: 580px) and (max-width: 767px) {
  :where(html[data-page="careers"]) .careersHero-selector {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  :where(html[data-page="careers"]) .careersHero-selector button {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 6px;
    min-height: 68px;
    gap: 4px;
  }
  :where(html[data-page="careers"]) .chMilestone-icon {
    display: none;
  }
  :where(html[data-page="careers"]) .chMilestone-text {
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   13. SMALL MOBILE (<360px)
   -------------------------------------------------------------------------- */
@media (max-width: 359px) {
  :where(html[data-page="careers"]) .careersHero-container,:where(html[data-page="careers"]) 
  .chFeels-container {
    padding-inline: 14px;
  }
  :where(html[data-page="careers"]) #careers-hero h1#careers-hero-heading {
    font-size: 32px !important;
    letter-spacing: -.048em !important;
  }
  :where(html[data-page="careers"]) .careersHero-selector {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  :where(html[data-page="careers"]) .careersHero-selector button {
    padding: 8px 8px;
    gap: 6px;
  }
  :where(html[data-page="careers"]) .chMilestone-icon {
    width: 26px;
    height: 26px;
    font-size: 0.85rem;
  }
  :where(html[data-page="careers"]) .careersHero-phase {
    font-size: 11.5px;
  }
}

/* --------------------------------------------------------------------------
   14. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="careers"]) #careers-hero *,:where(html[data-page="careers"]) 
  #careers-hero *::before,:where(html[data-page="careers"]) 
  #careers-hero *::after,:where(html[data-page="careers"]) 
  #careers-feels-strip *,:where(html[data-page="careers"]) 
  #careers-feels-strip *::before,:where(html[data-page="careers"]) 
  #careers-feels-strip *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    translate: none !important;
  }
}

/* --------------------------------------------------------------------------
   15. FOCUS RING (accessibility)
   -------------------------------------------------------------------------- */
:where(html[data-page="careers"]) #careers-hero :focus-visible,:where(html[data-page="careers"]) 
#careers-feels-strip :focus-visible {
  outline: 2px solid var(--ch-gold);
  outline-offset: 3px;
}

/* page-container-rhythm.css */
/* Shared page rhythm: mirrors the Industries page container at every breakpoint. */
:root:where([data-page="careers"]) {
  --kx-page-container: 1240px;
  --kx-page-gutter: 24px;
}

:where(html[data-page="careers"]) .shared-kx-header > .shared-kx-container,:where(html[data-page="careers"]) 
.ux-page .shared-kx-container,:where(html[data-page="careers"]) 
main > section > :is(
  .container,
  .su-container,
  .impact-container,
  .origin-desktop-view,
  .phil-container,
  .journey-tl-container,
  .careersHero-container,
  .chFeels-container,
  .contact-hero-v2-container,
  .contact-container,
  .taste-inner,
  .ai-container,
  .rv-container,
  .wd-container,
  .wd-tech-container,
  .wd-testi-faq-container,
  .kx-ah-container,
  .ma-container,
  .kats-container,
  .cloud-hero-container,
  .kx-container
),:where(html[data-page="careers"]) 
body > section > :is(
  .container,
  .contact-container,
  .cloud-hero-container,
  .kx-container
) {
  width: 100% !important;
  max-width: var(--kx-page-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--kx-page-gutter) !important;
  padding-right: var(--kx-page-gutter) !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  :root:where([data-page="careers"]) { --kx-page-gutter: 16px; }
}

/* This section previously put its gutter on the full-width background itself. */
@media (max-width: 1023px) {
  :where(html[data-page="careers"]) .wd-tech-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}



/* PAGE contact */
/* contact.html embedded 1 */

    /* ==========================================================================
       KAXON TECHNOLOGIES - CONTACT PAGE SPECIFICATION STYLES
       Scoped Design System for contact.html
       ========================================================================== */
    :root:where([data-page="contact"]) {
      --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
      --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
      --kx-canvas: #FFFDF8;
      --kx-canvas-warm: #FBF7EF;
      --kx-surface: #FFFFFF;
      --kx-navy: #102039;
      --kx-navy-deep: #082D57;
      --kx-navy-soft: #21415F;
      --kx-gold: #FFC526;
      --kx-gold-accent: #F5A916;
      --kx-gold-soft: #FFF2CB;
      --kx-muted: #5E748F;
      --kx-muted-soft: #8294A7;
      --kx-border: #E2E7EE;
      --kx-hairline: rgba(16, 32, 57, 0.10);
      --kx-hairline-strong: rgba(16, 32, 57, 0.18);
      --kx-mint: #DEF7EE;
      --kx-mint-text: #178575;
      --kx-blue-pastel: #E5EFFF;
      --kx-blue-text: #2867C7;
      --kx-pink-pastel: #FBE4EF;
      --kx-pink-text: #B83C73;
      --kx-purple-pastel: #EDE5FC;
      --kx-purple-text: #7250B2;
      
      --kx-font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
      --kx-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --kx-font-hand: 'Caveat', cursive, sans-serif;
      
      --kx-r-sm: 10px;
      --kx-r-md: 16px;
      --kx-r-lg: 24px;
      --kx-r-xl: 28px;
      --kx-r-pill: 9999px;
      
      --kx-shadow-card: 0 14px 40px rgba(16, 32, 57, 0.06);
      --kx-shadow-elevated: 0 20px 60px rgba(16, 32, 57, 0.09);
      --kx-shadow-gold: 0 10px 26px rgba(245, 169, 22, 0.28);
      --kx-transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }

    :where(html[data-page="contact"]) *,:where(html[data-page="contact"])  *::before,:where(html[data-page="contact"])  *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html:where([data-page="contact"]) {
      scroll-behavior: smooth;
      font-size: 16px;
      background-color: var(--kx-canvas-warm);
    }

    :where(html[data-page="contact"]) body {
      font-family: var(--kx-font-body);
      color: var(--kx-navy);
      background-color: var(--kx-canvas-warm);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* Container System */
    :where(html[data-page="contact"]) .contact-container {
      width: min(1240px, calc(100vw - 80px));
      margin-inline: auto;
      box-sizing: border-box;
    }

    @media (max-width: 1023px) {
      :where(html[data-page="contact"]) .contact-container {
        width: calc(100vw - 48px);
      }
    }

    @media (max-width: 767px) {
      :where(html[data-page="contact"]) .contact-container {
        width: calc(100vw - 40px);
      }
    }

    @media (max-width: 340px) {
      :where(html[data-page="contact"]) .contact-container {
        width: calc(100vw - 32px);
      }
    }

    /* Typography & Utilities */
    :where(html[data-page="contact"]) .contact-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--kx-font-body);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--kx-navy-soft);
      margin-bottom: 18px;
    }

    :where(html[data-page="contact"]) .contact-eyebrow-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--kx-gold-accent);
      flex-shrink: 0;
    }

    :where(html[data-page="contact"]) .contact-section-title {
      font-family: var(--kx-font-heading);
      font-size: clamp(30px, 3.4vw, 44px);
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: -0.035em;
      color: var(--kx-navy);
      margin-bottom: 16px;
    }

    :where(html[data-page="contact"]) .contact-section-desc {
      font-family: var(--kx-font-body);
      font-size: 17px;
      line-height: 1.65;
      color: var(--kx-muted);
      max-width: 580px;
    }

    :where(html[data-page="contact"]) .contact-hand-note {
      font-family: var(--kx-font-hand);
      font-size: 23px;
      line-height: 1.15;
      font-weight: 700;
      color: var(--kx-navy-soft);
      user-select: none;
    }

    /* Buttons */
    :where(html[data-page="contact"]) .contact-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-family: var(--kx-font-body);
      font-size: 15px;
      font-weight: 700;
      padding: 14px 28px;
      min-height: 52px;
      border-radius: var(--kx-r-pill);
      text-decoration: none;
      cursor: pointer;
      border: 1px solid transparent;
      transition: var(--kx-transition);
      white-space: nowrap;
    }

    :where(html[data-page="contact"]) .contact-btn:hover {
      transform: translateY(-1px);
    }

    :where(html[data-page="contact"]) .contact-btn:active {
      transform: translateY(0);
    }

    :where(html[data-page="contact"]) .contact-btn-gold {
      background: var(--kx-gold);
      color: var(--kx-navy);
      border-color: var(--kx-gold);
      box-shadow: var(--kx-shadow-gold);
    }

    :where(html[data-page="contact"]) .contact-btn-gold:hover {
      background: #FFCF4D;
      box-shadow: 0 14px 32px rgba(245, 169, 22, 0.38);
    }

    :where(html[data-page="contact"]) .contact-btn-outline {
      background: var(--kx-surface);
      color: var(--kx-navy);
      border: 1.5px solid var(--kx-border);
      box-shadow: 0 4px 14px rgba(16, 32, 57, 0.04);
    }

    :where(html[data-page="contact"]) .contact-btn-outline:hover {
      border-color: var(--kx-navy);
      background: #FFFDF8;
    }

    :where(html[data-page="contact"]) .contact-btn-navy {
      background: var(--kx-navy);
      color: #FFFFFF;
      border-color: var(--kx-navy);
    }

    :where(html[data-page="contact"]) .contact-btn-navy:hover {
      background: var(--kx-navy-deep);
      box-shadow: 0 10px 24px rgba(16, 32, 57, 0.2);
    }

    /* ==========================================================================
       SECTION 01: HERO (#contact-hero)
       ========================================================================== */
    :where(html[data-page="contact"]) .contact-hero-section {
      padding: 56px 0 88px;
      background-color: var(--kx-canvas-warm);
      background-image: radial-gradient(#D9D7CC 0.8px, transparent 0.8px);
      background-size: 24px 24px;
      border-bottom: 1px solid rgba(16, 32, 57, 0.08);
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="contact"]) .contact-hero-grid {
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      gap: 54px;
      align-items: center;
    }

    :where(html[data-page="contact"]) .contact-hero-copy {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    :where(html[data-page="contact"]) .contact-hero-headline {
      font-family: var(--kx-font-heading);
      font-size: clamp(38px, 4.2vw, 56px);
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: -0.04em;
      color: var(--kx-navy);
      margin-bottom: 22px;
    }

    :where(html[data-page="contact"]) .contact-hero-headline em {
      font-style: normal;
      color: #C88409;
      text-decoration: underline;
      text-decoration-color: var(--kx-gold);
      text-decoration-thickness: 3px;
      text-underline-offset: 8px;
    }

    :where(html[data-page="contact"]) .contact-hero-description {
      font-size: 17px;
      line-height: 1.7;
      color: var(--kx-muted);
      max-width: 520px;
      margin-bottom: 32px;
    }

    :where(html[data-page="contact"]) .contact-hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    /* Hero Right Conversation Roadmap */
    :where(html[data-page="contact"]) .contact-hero-visual {
      position: relative;
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="contact"]) .contact-hero-note {
      font-family: var(--kx-font-hand);
      font-size: 22px;
      color: var(--kx-navy-soft);
      text-align: right;
      margin-bottom: 14px;
      margin-right: 12px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    :where(html[data-page="contact"]) .contact-hero-note svg {
      width: 48px;
      height: 26px;
      color: var(--kx-gold-accent);
      flex-shrink: 0;
    }

    :where(html[data-page="contact"]) .contact-roadmap-panel {
      background: var(--kx-surface);
      border: 1px solid var(--kx-border);
      border-radius: var(--kx-r-xl);
      padding: 32px 30px;
      box-shadow: var(--kx-shadow-elevated);
      position: relative;
    }

    :where(html[data-page="contact"]) .contact-roadmap-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--kx-navy-soft);
      margin-bottom: 22px;
      display: block;
    }

    :where(html[data-page="contact"]) .contact-roadmap-steps {
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: relative;
    }

    :where(html[data-page="contact"]) .contact-roadmap-steps::before {
      content: '';
      position: absolute;
      left: 27px;
      top: 30px;
      bottom: 30px;
      width: 2px;
      background: linear-gradient(to bottom, #DEF7EE, #EDE5FC, #FFF2CB);
      z-index: 1;
    }

    :where(html[data-page="contact"]) .contact-roadmap-step {
      display: flex;
      align-items: flex-start;
      gap: 18px;
      position: relative;
      z-index: 2;
    }

    :where(html[data-page="contact"]) .contact-step-icon {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      font-size: 26px;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(16, 32, 57, 0.05);
    }

    :where(html[data-page="contact"]) .contact-step-icon.pastel-mint {
      background: var(--kx-mint);
      color: var(--kx-mint-text);
    }

    :where(html[data-page="contact"]) .contact-step-icon.pastel-purple {
      background: var(--kx-purple-pastel);
      color: var(--kx-purple-text);
    }

    :where(html[data-page="contact"]) .contact-step-icon.pastel-gold {
      background: var(--kx-gold-soft);
      color: #A97007;
    }

    :where(html[data-page="contact"]) .contact-step-content {
      padding-top: 4px;
    }

    :where(html[data-page="contact"]) .contact-step-num {
      font-size: 12px;
      font-weight: 700;
      color: var(--kx-muted-soft);
      display: block;
      margin-bottom: 2px;
    }

    :where(html[data-page="contact"]) .contact-step-content h3 {
      font-family: var(--kx-font-heading);
      font-size: 19px;
      font-weight: 800;
      color: var(--kx-navy);
      line-height: 1.25;
      margin-bottom: 4px;
    }

    :where(html[data-page="contact"]) .contact-step-content p {
      font-size: 14px;
      color: var(--kx-muted);
      line-height: 1.5;
    }

    /* ==========================================================================
       SECTION 02: STRATEGY CALL BOOKING SECTION ("FREE GROWTH CONSULTATION")
       ========================================================================== */
    :where(html[data-page="contact"]) .booking-section {
      padding: 96px 0 90px;
      background: #FDFBF7;
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="contact"]) .booking-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
      position: relative;
      z-index: 2;
    }

    /* Ambient Doodles & Floating Badges */
    :where(html[data-page="contact"]) .booking-doodle-topleft {
      position: absolute;
      top: 40px;
      left: max(20px, calc((100vw - 1240px) / 2 + 10px));
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      pointer-events: none;
      z-index: 3;
    }

    :where(html[data-page="contact"]) .booking-doodle-topleft span {
      font-family: 'Caveat', cursive, sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: #5A6B82;
      line-height: 1.05;
      letter-spacing: -0.01em;
    }

    :where(html[data-page="contact"]) .doodle-curve-arrow {
      margin-left: 22px;
      margin-top: 1px;
    }

    :where(html[data-page="contact"]) .booking-floating-badge {
      position: absolute;
      top: 36px;
      right: max(20px, calc((100vw - 1240px) / 2 + 10px));
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
      pointer-events: none;
      z-index: 3;
    }

    :where(html[data-page="contact"]) .floating-badge-pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #DCFCE7;
      padding: 8px 16px;
      border-radius: 9999px;
      box-shadow: 0 4px 14px rgba(22, 163, 74, 0.12);
      border: 1px solid rgba(22, 163, 74, 0.18);
    }

    :where(html[data-page="contact"]) .badge-icon-wrap {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="contact"]) .badge-text-wrap {
      display: flex;
      flex-direction: column;
      line-height: 1.15;
    }

    :where(html[data-page="contact"]) .badge-text-wrap span:first-child {
      font-family: var(--font-heading);
      font-size: 0.78rem;
      font-weight: 700;
      color: #15803D;
    }

    :where(html[data-page="contact"]) .badge-text-wrap span:last-child {
      font-size: 0.72rem;
      font-weight: 600;
      color: #16A34A;
    }

    :where(html[data-page="contact"]) .badge-yellow-arrow {
      margin-right: 32px;
      transform: rotate(-6deg);
    }

    /* 3-Column Layout Grid */
    :where(html[data-page="contact"]) .booking-main-grid {
      display: grid;
      grid-template-columns: 0.92fr 1.08fr 1.14fr;
      gap: 40px;
      align-items: start;
      margin-bottom: 40px;
    }

    /* ==========================================================================
       Column 1: Interactive Calendar Card
       ========================================================================== */
    :where(html[data-page="contact"]) .calendar-card {
      background: #FFFFFF;
      border-radius: 24px;
      padding: 28px 24px 22px;
      border: 1px solid #EAEFF4;
      box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="contact"]) .calendar-card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }

    :where(html[data-page="contact"]) .cal-header-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #FEF3C7;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="contact"]) .cal-header-titles {
      flex: 1;
      display: flex;
      flex-direction: column;
      line-height: 1.2;
    }

    :where(html[data-page="contact"]) .calendar-month-title {
      font-family: var(--font-heading);
      font-size: 1.02rem;
      font-weight: 700;
      color: #14243D;
    }

    :where(html[data-page="contact"]) .calendar-subtitle {
      font-size: 0.74rem;
      color: #64748B;
      margin-top: 2px;
    }

    :where(html[data-page="contact"]) .calendar-nav-btns {
      display: flex;
      gap: 6px;
    }

    :where(html[data-page="contact"]) .cal-nav-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid #E2E8F0;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #5A6B82;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    :where(html[data-page="contact"]) .cal-nav-btn:hover {
      background: #14243D;
      color: #FFFFFF;
      border-color: #14243D;
    }

    :where(html[data-page="contact"]) .calendar-weekdays {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      text-align: center;
      font-family: var(--font-heading);
      font-size: 0.74rem;
      font-weight: 600;
      color: #8E9EBA;
      margin-bottom: 8px;
    }

    :where(html[data-page="contact"]) .calendar-days-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      text-align: center;
      font-size: 0.82rem;
      margin-bottom: 18px;
    }

    :where(html[data-page="contact"]) .cal-day {
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      color: #14243D;
      cursor: pointer;
      font-weight: 600;
      position: relative;
      transition: all 0.18s ease;
      user-select: none;
    }

    :where(html[data-page="contact"]) .cal-day:hover:not(.disabled) {
      background: #F1F5F9;
      color: #0E1B2F;
    }

    :where(html[data-page="contact"]) .cal-day.selected {
      background: #14243D;
      color: #FFFFFF !important;
      font-weight: 700;
      box-shadow: 0 4px 12px rgba(20, 36, 61, 0.25);
    }

    :where(html[data-page="contact"]) .cal-day.selected::after {
      content: '';
      position: absolute;
      bottom: 4px;
      right: 6px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #F8C72E;
    }

    :where(html[data-page="contact"]) .cal-day.disabled {
      color: #CBD5E1;
      cursor: default;
      font-weight: 400;
    }

    /* Time Slots */
    :where(html[data-page="contact"]) .time-slots-container {
      padding-top: 16px;
      border-top: 1px dashed #E2E8F0;
      margin-top: 20px;
    }

    :where(html[data-page="contact"]) .time-slots-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    :where(html[data-page="contact"]) .time-slots-title {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-heading);
      font-size: 0.78rem;
      font-weight: 700;
      color: #14243D;
    }

    :where(html[data-page="contact"]) .time-selected-date-str {
      font-size: 0.74rem;
      font-weight: 600;
      color: #64748B;
    }

    :where(html[data-page="contact"]) .time-slots-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-bottom: 12px;
    }

    :where(html[data-page="contact"]) .time-slot-btn {
      padding: 9px 12px;
      font-family: var(--font-heading);
      font-size: 0.8rem;
      font-weight: 600;
      border-radius: 12px;
      background: #FFFFFF;
      border: 1.2px solid #E2E8F0;
      color: #14243D;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    :where(html[data-page="contact"]) .time-slot-btn:hover {
      border-color: #14243D;
      background: #F8FAFC;
    }

    :where(html[data-page="contact"]) .time-slot-btn.active {
      background: #14243D;
      color: #FFFFFF;
      border-color: #14243D;
      font-weight: 700;
      box-shadow: 0 3px 10px rgba(20, 36, 61, 0.2);
    }

    :where(html[data-page="contact"]) .time-zone-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 0.71rem;
      color: #64748B;
      text-align: center;
    }

    /* ==========================================================================
       Column 2: Value Proposition & Social Proof
       ========================================================================== */
    :where(html[data-page="contact"]) .booking-center {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 8px 0;
      position: relative;
    }

    :where(html[data-page="contact"]) .booking-eyebrow-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #E6F8F6;
      color: #0D9488;
      padding: 5px 12px;
      border-radius: 9999px;
      font-family: var(--font-heading);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.8px;
      margin-bottom: 14px;
      align-self: flex-start;
    }

    :where(html[data-page="contact"]) .booking-hero-title {
      font-family: var(--font-heading);
      font-size: clamp(1.75rem, 2.8vw, 2.25rem);
      font-weight: 800;
      color: #14243D;
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin: 0 0 14px 0;
    }

    :where(html[data-page="contact"]) .booking-title-highlight {
      position: relative;
      display: inline-block;
      color: #14243D;
    }

    :where(html[data-page="contact"]) .booking-title-highlight::after {
      content: '';
      position: absolute;
      left: -2px;
      right: -2px;
      bottom: 0px;
      height: 9px;
      background: #FDE047;
      opacity: 0.75;
      border-radius: 12px;
      z-index: -1;
      transform: rotate(-0.5deg);
    }

    :where(html[data-page="contact"]) .booking-desc {
      font-size: 0.92rem;
      color: #5A6B82;
      margin: 0 0 24px 0;
      line-height: 1.55;
    }

    :where(html[data-page="contact"]) .booking-benefits-list {
      list-style: none;
      padding: 0;
      margin: 0 0 28px 0;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    :where(html[data-page="contact"]) .booking-benefit-item {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    :where(html[data-page="contact"]) .benefit-icon-bubble {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="contact"]) .benefit-icon-bubble.green {
      background: #DCFCE7;
    }

    :where(html[data-page="contact"]) .benefit-icon-bubble.blue {
      background: #E0F2FE;
    }

    :where(html[data-page="contact"]) .benefit-icon-bubble.purple {
      background: #F3E8FF;
    }

    :where(html[data-page="contact"]) .benefit-text {
      display: flex;
      flex-direction: column;
      line-height: 1.25;
    }

    :where(html[data-page="contact"]) .benefit-text strong {
      font-family: var(--font-heading);
      font-size: 0.88rem;
      font-weight: 700;
      color: #14243D;
    }

    :where(html[data-page="contact"]) .benefit-text span {
      font-size: 0.76rem;
      color: #64748B;
    }

    /* Center Doodle */
    :where(html[data-page="contact"]) .booking-doodle-grow {
      position: absolute;
      right: -10px;
      bottom: 60px;
      display: flex;
      align-items: flex-start;
      gap: 6px;
      pointer-events: none;
      z-index: 3;
    }

    :where(html[data-page="contact"]) .booking-doodle-grow span {
      font-family: 'Caveat', cursive, sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: #5A6B82;
      line-height: 1.05;
    }

    /* Social Proof */
    :where(html[data-page="contact"]) .booking-social-proof {
      padding-top: 16px;
      border-top: 1px solid #EAEFF4;
    }

    :where(html[data-page="contact"]) .social-proof-label {
      font-size: 0.74rem;
      font-weight: 600;
      color: #64748B;
      margin-bottom: 8px;
    }

    :where(html[data-page="contact"]) .social-proof-row {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    :where(html[data-page="contact"]) .avatar-stack {
      display: flex;
      align-items: center;
    }

    :where(html[data-page="contact"]) .avatar-thumb {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #FFFFFF;
      margin-left: -8px;
    }

    :where(html[data-page="contact"]) .avatar-thumb:first-child {
      margin-left: 0;
    }

    :where(html[data-page="contact"]) .avatar-more-badge {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #EAEFF4;
      color: #14243D;
      font-family: var(--font-heading);
      font-size: 0.72rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #FFFFFF;
      margin-left: -8px;
    }

    :where(html[data-page="contact"]) .rating-stars-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    :where(html[data-page="contact"]) .star-icons-row {
      display: flex;
      gap: 2px;
    }

    :where(html[data-page="contact"]) .rating-score-text {
      font-size: 0.78rem;
      color: #64748B;
    }

    :where(html[data-page="contact"]) .rating-score-text strong {
      color: #14243D;
    }

    /* ==========================================================================
       Column 3: Lead Capture Form Card
       ========================================================================== */
    :where(html[data-page="contact"]) .booking-form-card {
      background: #FFFFFF;
      border-radius: 24px;
      padding: 28px 26px 24px;
      border: 1px solid #EAEFF4;
      box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
    }

    :where(html[data-page="contact"]) .booking-form-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }

    :where(html[data-page="contact"]) .form-header-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #FEF3C7;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="contact"]) .form-header-titles {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
    }

    :where(html[data-page="contact"]) .form-card-title {
      font-family: var(--font-heading);
      font-size: 1.02rem;
      font-weight: 700;
      color: #14243D;
    }

    :where(html[data-page="contact"]) .form-card-subtitle {
      font-size: 0.74rem;
      color: #64748B;
      margin-top: 2px;
    }

    :where(html[data-page="contact"]) .form-group {
      margin-bottom: 12px;
    }

    :where(html[data-page="contact"]) .form-label {
      display: block;
      font-family: var(--font-heading);
      font-size: 0.76rem;
      font-weight: 700;
      color: #14243D;
      margin-bottom: 5px;
    }

    :where(html[data-page="contact"]) .input-with-icon {
      position: relative;
      display: flex;
      align-items: center;
    }

    :where(html[data-page="contact"]) .form-input,:where(html[data-page="contact"])  .form-select,:where(html[data-page="contact"])  .form-textarea {
      width: 100%;
      background: #FFFFFF;
      border: 1.2px solid #E2E8F0;
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 0.86rem;
      color: #14243D;
      font-family: var(--font-body);
      transition: all 0.2s ease;
    }

    :where(html[data-page="contact"]) .form-input::placeholder,:where(html[data-page="contact"])  .form-textarea::placeholder {
      color: #94A3B8;
      font-size: 0.84rem;
    }

    :where(html[data-page="contact"]) .form-input:focus,:where(html[data-page="contact"])  .form-select:focus,:where(html[data-page="contact"])  .form-textarea:focus {
      border-color: #14243D;
      outline: none;
      box-shadow: 0 0 0 3px rgba(20, 36, 61, 0.08);
    }

    :where(html[data-page="contact"]) .input-right-icon {
      position: absolute;
      right: 14px;
      pointer-events: none;
    }

    :where(html[data-page="contact"]) .phone-input-wrap .phone-flag-icon {
      position: absolute;
      left: 12px;
      font-size: 1rem;
      pointer-events: none;
    }

    :where(html[data-page="contact"]) .phone-input {
      padding-left: 36px;
    }

    :where(html[data-page="contact"]) .select-wrap .input-left-icon {
      position: absolute;
      left: 12px;
      pointer-events: none;
    }

    :where(html[data-page="contact"]) .custom-select {
      padding-left: 36px;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      cursor: pointer;
    }

    :where(html[data-page="contact"]) .textarea-wrap .textarea-icon {
      position: absolute;
      left: 12px;
      top: 12px;
      pointer-events: none;
    }

    :where(html[data-page="contact"]) .form-textarea {
      padding-left: 36px;
      resize: vertical;
      min-height: 64px;
    }

    :where(html[data-page="contact"]) .form-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    :where(html[data-page="contact"]) .btn-book-strategy-submit {
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 13px 20px;
      background: #F8C72E;
      color: #14243D;
      font-family: var(--font-heading);
      font-size: 0.92rem;
      font-weight: 700;
      border-radius: 9999px;
      border: none;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(248, 199, 46, 0.35);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      margin-top: 6px;
    }

    :where(html[data-page="contact"]) .btn-book-strategy-submit:hover {
      background: #FBBF24;
      transform: translateY(-2px);
      box-shadow: 0 12px 26px rgba(248, 199, 46, 0.45);
    }

    :where(html[data-page="contact"]) .form-security-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 0.72rem;
      color: #64748B;
      margin-top: 10px;
      text-align: center;
    }

    :where(html[data-page="contact"]) .form-status-msg {
      display: none;
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 0.8rem;
      margin-top: 10px;
      text-align: center;
      line-height: 1.4;
    }

    :where(html[data-page="contact"]) .form-status-msg.success {
      display: block;
      background: #DCFCE7;
      color: #15803D;
      border: 1px solid rgba(22, 163, 74, 0.2);
    }

    :where(html[data-page="contact"]) .form-status-msg.error {
      display: block;
      background: #FEE2E2;
      color: #DC2626;
      border: 1px solid rgba(220, 38, 38, 0.2);
    }

    /* ==========================================================================
       Bottom Trust Value Strip
       ========================================================================== */
    :where(html[data-page="contact"]) .booking-trust-strip {
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: #FFFFFF;
      border-radius: 9999px;
      padding: 14px 28px;
      border: 1px solid #EAEFF4;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    }

    :where(html[data-page="contact"]) .trust-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-heading);
      font-size: 0.85rem;
      font-weight: 700;
      color: #14243D;
    }

    :where(html[data-page="contact"]) .trust-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    :where(html[data-page="contact"]) .trust-icon.green {
      background: #DCFCE7;
    }

    :where(html[data-page="contact"]) .trust-icon.blue {
      background: #E0F2FE;
    }

    :where(html[data-page="contact"]) .trust-icon.purple {
      background: #F3E8FF;
    }

    :where(html[data-page="contact"]) .trust-icon.coral {
      background: #FFE4E6;
    }

    :where(html[data-page="contact"]) .trust-sep {
      width: 1px;
      height: 24px;
      background: #E2E8F0;
    }

    /* Bottom Left Doodle */
    :where(html[data-page="contact"]) .booking-doodle-bottomleft {
      position: absolute;
      bottom: 40px;
      left: max(20px, calc((100vw - 1240px) / 2 + 10px));
      display: flex;
      align-items: flex-end;
      gap: 6px;
      pointer-events: none;
      z-index: 3;
    }

    :where(html[data-page="contact"]) .booking-doodle-bottomleft span {
      font-family: 'Caveat', cursive, sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: #5A6B82;
      line-height: 1.05;
    }

    :where(html[data-page="contact"]) .doodle-starts-arrow {
      margin-bottom: 4px;
    }

    /* Bottom Right Botanical Sprout */
    :where(html[data-page="contact"]) .booking-botanical-bg {
      position: absolute;
      bottom: -15px;
      right: -15px;
      pointer-events: none;
      z-index: 1;
    }

    /* ==========================================================================
       BOOKING SECTION RESPONSIVE BREAKPOINTS
       ========================================================================== */
    @media (max-width: 1199px) {
      :where(html[data-page="contact"]) .booking-main-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
      }

      :where(html[data-page="contact"]) .booking-center {
        grid-column: span 2;
        order: -1;
        margin-bottom: 8px;
        padding: 8px 4px;
      }

      :where(html[data-page="contact"]) .booking-doodle-topleft,:where(html[data-page="contact"]) 
      .booking-floating-badge,:where(html[data-page="contact"]) 
      .booking-doodle-grow,:where(html[data-page="contact"]) 
      .booking-doodle-bottomleft {
        display: none;
      }
    }

    @media (max-width: 767px) {
      :where(html[data-page="contact"]) .booking-section {
        padding: 70px 0 70px;
      }

      :where(html[data-page="contact"]) .booking-main-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      :where(html[data-page="contact"]) .booking-center {
        grid-column: span 1;
        padding: 4px 0;
      }

      :where(html[data-page="contact"]) .booking-hero-title {
        font-size: 1.85rem;
      }

      :where(html[data-page="contact"]) .form-grid-2 {
        grid-template-columns: 1fr;
      }

      :where(html[data-page="contact"]) .booking-trust-strip {
        flex-direction: column;
        align-items: flex-start;
        border-radius: 20px;
        gap: 12px;
        padding: 18px 20px;
      }

      :where(html[data-page="contact"]) .trust-sep {
        display: none;
      }
    }

    @media (max-width: 479px) {
      :where(html[data-page="contact"]) .calendar-card,:where(html[data-page="contact"])  .booking-form-card {
        padding: 18px 16px;
        border-radius: 18px;
      }

      :where(html[data-page="contact"]) .time-slots-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    /* ==========================================================================
       SECTION 03: FEATURED CASE STUDY (#featured-case-study)
       ========================================================================== */
    :where(html[data-page="contact"]) .contact-fcs-section {
      padding: 88px 0;
      background: var(--kx-canvas-warm);
    }

    :where(html[data-page="contact"]) .contact-fcs-panel {
      background: var(--kx-navy);
      color: #FFFFFF;
      border-radius: var(--kx-r-xl);
      padding: 44px;
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 48px;
      align-items: center;
      box-shadow: 0 24px 60px rgba(16, 32, 57, 0.16);
      position: relative;
      overflow: hidden;
    }

    :where(html[data-page="contact"]) .contact-fcs-panel::after {
      content: '';
      position: absolute;
      right: -80px;
      bottom: -80px;
      width: 320px;
      height: 320px;
      background: radial-gradient(circle, rgba(255, 197, 38, 0.12) 0%, transparent 70%);
      pointer-events: none;
    }

    :where(html[data-page="contact"]) .contact-fcs-img-col {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      height: 380px;
      box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
    }

    :where(html[data-page="contact"]) .contact-fcs-img-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    :where(html[data-page="contact"]) .contact-fcs-badge {
      position: absolute;
      top: 18px;
      right: 18px;
      background: #FFFFFF;
      color: var(--kx-navy);
      border-radius: 14px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    }

    :where(html[data-page="contact"]) .contact-fcs-badge-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--kx-gold-soft);
      color: #C88409;
      display: grid;
      place-items: center;
      font-size: 16px;
      font-weight: 800;
    }

    :where(html[data-page="contact"]) .contact-fcs-badge-text strong {
      font-family: var(--kx-font-heading);
      font-size: 18px;
      font-weight: 800;
      line-height: 1;
      display: block;
    }

    :where(html[data-page="contact"]) .contact-fcs-badge-text span {
      font-size: 11px;
      color: var(--kx-muted);
      font-weight: 600;
    }

    :where(html[data-page="contact"]) .contact-fcs-content-col {
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 2;
    }

    :where(html[data-page="contact"]) .contact-fcs-tag {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--kx-gold);
      margin-bottom: 12px;
    }

    :where(html[data-page="contact"]) .contact-fcs-title {
      font-family: var(--kx-font-heading);
      font-size: clamp(26px, 2.8vw, 36px);
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.03em;
      color: #FFFFFF;
      margin-bottom: 16px;
    }

    :where(html[data-page="contact"]) .contact-fcs-body {
      font-size: 15.5px;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.82);
      margin-bottom: 24px;
      max-width: 560px;
    }

    :where(html[data-page="contact"]) .contact-fcs-actions {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 28px;
      flex-wrap: wrap;
    }

    :where(html[data-page="contact"]) .contact-fcs-link-primary {
      color: var(--kx-gold);
      font-weight: 700;
      font-size: 15px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: var(--kx-transition);
    }

    :where(html[data-page="contact"]) .contact-fcs-link-primary:hover {
      color: #FFCF4D;
      gap: 10px;
    }

    :where(html[data-page="contact"]) .contact-fcs-link-secondary {
      color: rgba(255, 255, 255, 0.7);
      font-size: 14px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    :where(html[data-page="contact"]) .contact-fcs-link-secondary:hover {
      color: #FFFFFF;
    }

    :where(html[data-page="contact"]) .contact-fcs-metrics {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      align-items: center;
      border-top: 1px solid rgba(255, 255, 255, 0.14);
      padding-top: 24px;
    }

    :where(html[data-page="contact"]) .contact-fcs-metric-item {
      display: flex;
      flex-direction: column;
    }

    :where(html[data-page="contact"]) .contact-fcs-metric-num {
      font-family: var(--kx-font-heading);
      font-size: 26px;
      font-weight: 800;
      color: var(--kx-gold);
      line-height: 1;
      margin-bottom: 4px;
    }

    :where(html[data-page="contact"]) .contact-fcs-metric-label {
      font-size: 12.5px;
      color: rgba(255, 255, 255, 0.75);
      font-weight: 600;
    }

    :where(html[data-page="contact"]) .contact-fcs-divider {
      width: 1px;
      height: 42px;
      background: rgba(255, 255, 255, 0.14);
    }

    /* ==========================================================================
       SECTION 04: OTHER WAYS TO REACH US (#contact-methods)
       ========================================================================== */
    :where(html[data-page="contact"]) .contact-methods-section {
      padding: 92px 0;
      background: var(--kx-canvas);
    }

    :where(html[data-page="contact"]) .contact-methods-top {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 40px;
      flex-wrap: wrap;
      gap: 20px;
    }

    :where(html[data-page="contact"]) .contact-methods-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    :where(html[data-page="contact"]) .contact-method-card {
      background: var(--kx-surface);
      border: 1px solid var(--kx-border);
      border-radius: var(--kx-r-lg);
      padding: 28px 24px;
      box-shadow: var(--kx-shadow-card);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 240px;
      transition: var(--kx-transition);
    }

    :where(html[data-page="contact"]) .contact-method-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--kx-shadow-elevated);
      border-color: rgba(16, 32, 57, 0.2);
    }

    :where(html[data-page="contact"]) .contact-method-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      font-size: 24px;
      margin-bottom: 20px;
      flex-shrink: 0;
    }

    :where(html[data-page="contact"]) .contact-method-icon.pastel-blue {
      background: var(--kx-blue-pastel);
      color: var(--kx-blue-text);
    }

    :where(html[data-page="contact"]) .contact-method-icon.pastel-mint {
      background: var(--kx-mint);
      color: var(--kx-mint-text);
    }

    :where(html[data-page="contact"]) .contact-method-icon.pastel-gold {
      background: var(--kx-gold-soft);
      color: #A97007;
    }

    :where(html[data-page="contact"]) .contact-method-icon.pastel-purple {
      background: var(--kx-purple-pastel);
      color: var(--kx-purple-text);
    }

    :where(html[data-page="contact"]) .contact-method-card h4 {
      font-family: var(--kx-font-heading);
      font-size: 19px;
      font-weight: 800;
      color: var(--kx-navy);
      margin-bottom: 8px;
    }

    :where(html[data-page="contact"]) .contact-method-card p {
      font-size: 13.5px;
      color: var(--kx-muted);
      line-height: 1.5;
      margin-bottom: 18px;
    }

    :where(html[data-page="contact"]) .contact-method-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14.5px;
      font-weight: 700;
      color: var(--kx-navy);
      text-decoration: none;
      transition: var(--kx-transition);
      min-height: 44px;
    }

    :where(html[data-page="contact"]) .contact-method-link:hover {
      color: var(--kx-navy-deep);
      gap: 10px;
    }

    :where(html[data-page="contact"]) .contact-social-row {
      display: flex;
      gap: 10px;
      align-items: center;
      min-height: 44px;
    }

    :where(html[data-page="contact"]) .contact-social-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--kx-purple-pastel);
      color: var(--kx-purple-text);
      display: grid;
      place-items: center;
      font-size: 18px;
      transition: var(--kx-transition);
      text-decoration: none;
    }

    :where(html[data-page="contact"]) .contact-social-btn:hover {
      background: var(--kx-navy);
      color: #FFFFFF;
      transform: translateY(-2px);
    }

    /* ==========================================================================
       SECTION 05: OFFICE LOCATION & MAP (#office-location)
       ========================================================================== */
    :where(html[data-page="contact"]) .contact-office-section {
      padding: 92px 0;
      background: var(--kx-canvas-warm);
    }

    :where(html[data-page="contact"]) .contact-office-grid {
      display: grid;
      grid-template-columns: 4.5fr 7.5fr;
      gap: 36px;
      margin-top: 36px;
      align-items: stretch;
    }

    :where(html[data-page="contact"]) .contact-office-card {
      background: var(--kx-surface);
      border: 1px solid var(--kx-border);
      border-radius: var(--kx-r-xl);
      padding: 38px 32px;
      box-shadow: var(--kx-shadow-card);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    :where(html[data-page="contact"]) .contact-office-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      background: var(--kx-pink-pastel);
      color: var(--kx-pink-text);
      display: grid;
      place-items: center;
      font-size: 26px;
      margin-bottom: 24px;
    }

    :where(html[data-page="contact"]) .contact-office-card h4 {
      font-family: var(--kx-font-heading);
      font-size: 22px;
      font-weight: 800;
      color: var(--kx-navy);
      margin-bottom: 8px;
    }

    :where(html[data-page="contact"]) .contact-office-company {
      font-size: 15px;
      font-weight: 700;
      color: var(--kx-navy-soft);
      display: block;
      margin-bottom: 8px;
    }

    :where(html[data-page="contact"]) .contact-office-address {
      font-size: 14px;
      color: var(--kx-muted);
      line-height: 1.6;
      margin-bottom: 28px;
    }

    :where(html[data-page="contact"]) .contact-map-frame {
      border-radius: var(--kx-r-xl);
      overflow: hidden;
      box-shadow: var(--kx-shadow-card);
      border: 1px solid var(--kx-border);
      height: 420px;
      position: relative;
      background: #EAE6DC;
    }

    :where(html[data-page="contact"]) .contact-map-frame iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }

    /* ==========================================================================
       SECTION 06: FAQ (#contact-faq) — UPGRADED TO CAREER EDITORIAL SPLIT
       ========================================================================== */
    :where(html[data-page="contact"]) .contact-faq-section {
      padding: clamp(64px, 7vw, 96px) 0;
      background: var(--kx-canvas);
      width: 100%;
      overflow: hidden;
    }

    :where(html[data-page="contact"]) .contact-faq-split {
      display: grid;
      grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.38fr);
      gap: clamp(32px, 4.5vw, 56px);
      align-items: flex-start;
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="contact"]) .contact-faq-intro-sticky {
      position: sticky;
      top: 100px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    :where(html[data-page="contact"]) .contact-highlight-gold {
      display: inline-block;
      background-color: var(--kx-gold);
      color: var(--kx-navy);
      padding: 3px 12px;
      border-radius: 8px;
      margin-top: 6px;
      margin-bottom: 2px;
      line-height: 1.18;
      vertical-align: middle;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    :where(html[data-page="contact"]) .contact-faq-stack {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      box-sizing: border-box;
    }

    :where(html[data-page="contact"]) .contact-faq-item-card {
      background: var(--kx-surface);
      border: 1px solid var(--kx-border);
      border-radius: var(--kx-r-md);
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(16, 32, 57, 0.03);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      cursor: pointer;
    }

    :where(html[data-page="contact"]) .contact-faq-item-card:hover {
      border-color: rgba(43, 127, 255, 0.3);
      box-shadow: 0 4px 16px rgba(16, 32, 57, 0.06);
    }

    :where(html[data-page="contact"]) .contact-faq-item-card.is-open {
      border-color: rgba(16, 32, 57, 0.22);
      box-shadow: 0 6px 20px rgba(16, 32, 57, 0.07);
    }

    :where(html[data-page="contact"]) .contact-faq-item-trigger {
      width: 100%;
      padding: 18px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      text-align: left;
      font-family: var(--kx-font-heading);
      font-weight: 800;
      font-size: 1rem;
      color: var(--kx-navy);
      background: none;
      border: none;
      cursor: pointer;
      line-height: 1.35;
      transition: color 0.18s ease;
    }

    :where(html[data-page="contact"]) .contact-faq-item-trigger:hover {
      color: var(--kx-navy-deep);
    }

    :where(html[data-page="contact"]) .contact-faq-item-trigger i {
      font-size: 1.15rem;
      color: var(--kx-blue-text);
      transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
      flex-shrink: 0;
    }

    :where(html[data-page="contact"]) .contact-faq-item-card.is-open .contact-faq-item-trigger i {
      transform: rotate(45deg);
      color: #A97007;
    }

    :where(html[data-page="contact"]) .contact-faq-item-drawer {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: all 0.26s cubic-bezier(0.16, 1, 0.3, 1);
      padding: 0 22px;
      font-size: 0.925rem;
      color: var(--kx-muted);
      line-height: 1.65;
    }

    :where(html[data-page="contact"]) .contact-faq-item-card.is-open .contact-faq-item-drawer {
      max-height: 250px;
      opacity: 1;
      padding-bottom: 22px;
    }

    /* ==========================================================================
       SECTION 07: FINAL CTA (#contact-final-cta)
       ========================================================================== */
    :where(html[data-page="contact"]) .contact-final-cta-section {
      padding: 48px 0 96px;
      background: var(--kx-canvas-warm);
    }

    :where(html[data-page="contact"]) .contact-final-cta-card {
      background: var(--kx-navy);
      color: #FFFFFF;
      border-radius: var(--kx-r-xl);
      padding: 64px 72px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      box-shadow: 0 24px 60px rgba(16, 32, 57, 0.22);
    }

    :where(html[data-page="contact"]) .contact-final-cta-card::after {
      content: '';
      position: absolute;
      left: 30%;
      top: -100px;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(255, 197, 38, 0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    :where(html[data-page="contact"]) .contact-final-cta-copy {
      max-width: 620px;
      position: relative;
      z-index: 2;
    }

    :where(html[data-page="contact"]) .contact-final-cta-eyebrow {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--kx-gold);
      margin-bottom: 14px;
      display: block;
    }

    :where(html[data-page="contact"]) .contact-final-cta-headline {
      font-family: var(--kx-font-heading);
      font-size: clamp(28px, 3.4vw, 42px);
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: -0.03em;
      margin-bottom: 16px;
    }

    :where(html[data-page="contact"]) .contact-final-cta-desc {
      font-size: 16px;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.82);
    }

    :where(html[data-page="contact"]) .contact-final-cta-action-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      position: relative;
      z-index: 2;
      flex-shrink: 0;
    }

    :where(html[data-page="contact"]) .contact-final-cta-annotation {
      position: absolute;
      top: -46px;
      right: 0;
      color: var(--kx-gold);
      white-space: nowrap;
      font-size: 20px;
      transform: rotate(4deg);
    }

    :where(html[data-page="contact"]) .contact-final-cta-sub {
      font-size: 12.5px;
      color: rgba(255, 255, 255, 0.7);
    }

    /* ==========================================================================
       RESPONSIVE DESIGN SYSTEM
       ========================================================================== */
    @media (max-width: 1024px) {
      :where(html[data-page="contact"]) .contact-hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }
      :where(html[data-page="contact"]) .contact-hero-copy {
        align-items: flex-start;
      }
      :where(html[data-page="contact"]) .contact-fcs-panel {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 36px;
      }
      :where(html[data-page="contact"]) .contact-methods-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      :where(html[data-page="contact"]) .contact-office-grid {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="contact"]) .contact-faq-split {
        grid-template-columns: 1fr;
        gap: 36px;
      }
      :where(html[data-page="contact"]) .contact-faq-intro-sticky {
        position: static;
      }
      :where(html[data-page="contact"]) .contact-final-cta-card {
        padding: 50px 40px;
      }
    }

    @media (max-width: 768px) {
      :where(html[data-page="contact"]) .contact-hero-section {
        padding: 48px 0 64px;
      }
      :where(html[data-page="contact"]) .contact-fcs-section,:where(html[data-page="contact"]) 
      .contact-methods-section,:where(html[data-page="contact"]) 
      .contact-office-section,:where(html[data-page="contact"]) 
      .contact-faq-section {
        padding: 64px 0;
      }
      :where(html[data-page="contact"]) .contact-hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
      }
      :where(html[data-page="contact"]) .contact-hero-actions .contact-btn {
        width: 100%;
        min-height: 48px;
        padding: 12px 10px;
        font-size: clamp(12px, 3.2vw, 14px);
        gap: 6px;
        white-space: nowrap;
      }
      :where(html[data-page="contact"]) .contact-hero-note {
        justify-content: flex-start;
        text-align: left;
        margin-right: 0;
        margin-left: 4px;
        margin-bottom: 12px;
      }
      :where(html[data-page="contact"]) .contact-hero-note svg {
        transform: rotate(75deg);
        transform-origin: 20% 50%;
        margin-left: 4px;
      }
      :where(html[data-page="contact"]) .contact-methods-grid {
        grid-template-columns: 1fr;
      }
      :where(html[data-page="contact"]) .contact-final-cta-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        padding: 40px 24px;
      }
      :where(html[data-page="contact"]) .contact-final-cta-action-area {
        width: 100%;
        align-items: flex-start;
      }
      :where(html[data-page="contact"]) .contact-final-cta-action-area .contact-btn {
        width: 100%;
      }
      :where(html[data-page="contact"]) .contact-final-cta-annotation {
        position: static;
        transform: none;
        margin-bottom: 4px;
      }
      :where(html[data-page="contact"]) .contact-map-frame {
        height: 300px;
      }
      :where(html[data-page="contact"]) .contact-fcs-panel {
        padding: 24px;
      }
      :where(html[data-page="contact"]) .contact-fcs-img-col {
        height: 240px;
      }
      :where(html[data-page="contact"]) .contact-faq-item-trigger {
        padding: 16px 18px;
        font-size: 0.95rem;
      }
      :where(html[data-page="contact"]) .contact-faq-item-drawer {
        padding: 0 18px;
        font-size: 0.88rem;
      }
      :where(html[data-page="contact"]) .contact-faq-item-card.is-open .contact-faq-item-drawer {
        padding-bottom: 18px;
      }
    }

    @media (max-width: 480px) {
      :where(html[data-page="contact"]) .contact-hero-actions {
        gap: 8px;
      }
      :where(html[data-page="contact"]) .contact-hero-actions .contact-btn {
        padding: 11px 6px;
        font-size: clamp(11px, 2.95vw, 13px);
        gap: 4px;
      }
      :where(html[data-page="contact"]) .contact-hero-actions .contact-btn i {
        font-size: 13px;
      }
    }
  
/* shared-chrome.css */
@scope (:where(html[data-page="contact"]) .shared-kx-header,:where(html[data-page="contact"])  .shared-kx-mobile-drawer,:where(html[data-page="contact"])  .shared-site-footer) {
:scope { --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif; --container-max: 1240px; --color-yellow: #F8C72E; --color-primary-navy: #14243D; --transition: all .2s ease; font-family: var(--font-body, 'Plus Jakarta Sans', 'Inter', sans-serif); line-height: 1.5; }
:where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(a) { text-decoration: none; }



:scope {
  --kx-navy: #13243D;
  --kx-deep-navy: #0D1B31;
  --kx-secondary-navy: #1B3152;
  --kx-gold: #F9BE22;
  --kx-gold-hover: #FFCA3A;
  --kx-green: #00D084;
  --kx-cyan: #52BCEB;
  --kx-soft-cyan: #EAF8FF;
  --kx-soft-gold: #FFF8DD;
  --kx-soft-green: #E8F8F0;
  --kx-white: #FFFFFF;
  --kx-gray: #F4F6FA;
  --kx-pill-bg: #EDF3FA;
  --kx-border: #E8EDF4;
  --kx-border-subtle: #F1F4F9;
  --kx-text-dark: #13243D;
  --kx-text-muted: #65748B;
  --kx-radius-pill: 9999px;
  --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
}


:scope.shared-kx-header,
.shared-kx-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: 1px solid rgba(232, 237, 244, 0.8);
  transition: all 0.25s ease;
}

:scope.shared-kx-header.scrolled,
.shared-kx-header.scrolled {
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

:scope.shared-kx-header.menu-open,
.shared-kx-header.menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

.shared-kx-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .shared-kx-container {
    padding: 0 16px;
  }
}

.shared-kx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
}


.shared-kx-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0F1D32;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

.shared-kx-logo-tech {
  color: #00D084;
  font-weight: 800;
}


.shared-kx-nav-menu {
  display: flex;
  align-items: center;
  background: #EDF3FA;
  padding: 4px 6px;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(220, 230, 242, 0.85);
  box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
  flex-shrink: 1;
}

.shared-kx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shared-kx-nav-item {
  position: relative;
}

.shared-kx-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--kx-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-nav-link:hover {
  color: #0F1D32;
  background: rgba(255, 255, 255, 0.7);
}

.shared-kx-nav-link.active {
  color: #0F1D32 !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
}

.shared-kx-nav-link::after,
.shared-kx-nav-link.active::after {
  display: none !important;
}

.shared-kx-chevron-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  stroke: currentColor;
}


.shared-kx-dropdown-wrapper {
  position: relative;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper.open .shared-kx-chevron-icon {
  transform: rotate(180deg);
}

.shared-kx-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 250px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
  border: 1px solid var(--kx-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  pointer-events: none;
  z-index: 100;
}

/* Invisible hover bridge to eliminate the 8px cursor gap */
.shared-kx-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
  background: transparent;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper.open .shared-kx-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.shared-kx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #13243D;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.shared-kx-dropdown-item:hover {
  background: #F0F7FF;
  color: #0F1D32;
}


.shared-kx-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.shared-kx-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0F1D32;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-btn-pill-navy:hover {
  background: #1B2E4B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
}

.shared-kx-btn-pill-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F9BE22;
  color: #0F1D32;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
}

.shared-kx-btn-pill-gold:hover {
  background: #FFCA3A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
}

.shared-kx-btn-pill-navy:active,
.shared-kx-btn-pill-gold:active,
.kx-modal-submit:active {
  transform: translateY(0) scale(0.98);
}


.shared-kx-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0F1D32;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.shared-kx-mobile-toggle:hover {
  background: #EDF3FA;
}

@media (max-width: 1240px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-navy {
    display: none;
  }
}

@media (max-width: 1100px) {
  .shared-kx-nav-menu {
    display: none;
  }

  .shared-kx-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .shared-kx-nav-inner {
    height: 70px;
    gap: 8px;
  }
  .shared-kx-logo {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .shared-kx-logo {
    font-size: 18px;
  }
  .shared-kx-nav-actions {
    gap: 6px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 7px 11px;
    font-size: 11.5px;
    gap: 4px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold svg {
    display: none;
  }
  .shared-kx-mobile-toggle {
    padding: 6px;
  }
}

@media (max-width: 360px) {
  .shared-kx-container {
    padding: 0 6px;
  }
  .shared-kx-nav-inner {
    gap: 2px;
  }
  .shared-kx-logo {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  .shared-kx-nav-actions {
    gap: 2px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 5px 6px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  .shared-kx-mobile-toggle {
    padding: 2px;
  }
}


:scope.shared-kx-mobile-drawer,
.shared-kx-mobile-drawer {
  position: fixed;
  top: var(--header-height, 78px);
  left: 0;
  width: 100%;
  height: calc(100dvh - var(--header-height, 78px));
  background: #FFFFFF !important;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 40px rgba(19, 36, 61, 0.12);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :scope.shared-kx-mobile-drawer,
  .shared-kx-mobile-drawer {
    top: var(--header-height, 70px);
    height: calc(100dvh - var(--header-height, 70px));
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

:scope.shared-kx-mobile-drawer.open,
:scope.shared-kx-mobile-drawer.active,
.shared-kx-mobile-drawer.open,
.shared-kx-mobile-drawer.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  pointer-events: auto;
}

.shared-kx-mobile-nav-link {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 650;
  color: #14243D;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 12px;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.shared-kx-mobile-nav-link:hover {
  background: #F8FAFC;
  color: #0E1B2F;
}

.shared-kx-mobile-nav-link.active {
  background: #F4F7FB !important;
  color: #0E1B2F !important;
  font-weight: 750 !important;
  border-left: 3px solid #F8C72E;
  padding-left: 13px;
}

.shared-kx-mobile-nav-link.shared-sub {
  margin-left: 12px;
  margin-right: 4px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 550;
  color: #556987;
  background: #F8FAFC;
  border-radius: 10px;
  border-left: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.shared-kx-mobile-nav-link.shared-sub::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94A3B8;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.shared-kx-mobile-nav-link.shared-sub:hover,
.shared-kx-mobile-nav-link.shared-sub.active {
  background: #EDF4FB;
  color: #0E1B2F;
  border-left-color: #F8C72E;
}

.shared-kx-mobile-nav-link.shared-sub.active::before {
  background: #F8C72E;
  transform: scale(1.4);
}

.shared-kx-mobile-drawer-footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #EEF2F6;
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-gold {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(248, 199, 46, 0.3);
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-navy {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
  border-radius: 9999px;
}


.kx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 49, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  padding: 20px;
}

.kx-modal-overlay.active,
.kx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.kx-modal-dialog {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
  border: 1px solid var(--kx-border);
  overflow: hidden;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.kx-modal-overlay.active .kx-modal-dialog,
.kx-modal-overlay.is-open .kx-modal-dialog {
  transform: scale(1) translateY(0);
}

.kx-modal-header {
  padding: 28px 32px 16px;
  position: relative;
}

.kx-modal-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--kx-navy);
  margin: 0 0 6px;
}

.kx-modal-subtitle {
  font-size: 14px;
  color: var(--kx-text-muted);
  margin: 0;
}

.kx-modal-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--kx-gray);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-navy);
  transition: background 0.2s ease, transform 0.2s ease;
}

.kx-modal-close:hover {
  background: #E2E8F0;
  transform: rotate(90deg);
}

.kx-modal-body {
  padding: 0 32px 32px;
}

.kx-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx-form-label {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kx-navy);
}

.kx-form-input,
.kx-form-textarea,
.kx-form-select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--kx-border);
  background: var(--kx-gray);
  color: var(--kx-navy);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.kx-form-input:focus,
.kx-form-textarea:focus,
.kx-form-select:focus {
  outline: none;
  border-color: var(--kx-navy);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
}

.kx-modal-submit {
  background: var(--kx-navy);
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.kx-modal-submit:hover {
  background: var(--kx-deep-navy);
  transform: translateY(-1px);
}


:scope.shared-site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
  position: relative;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

:scope.shared-site-footer .shared-container,
:scope.shared-site-footer .shared-kx-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

.shared-footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand {
  min-width: 0;
}

.shared-footer-brand .shared-brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand .shared-brand-logo .shared-dot {
  color: #2FB7A7;
}

.shared-footer-brand p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  max-width: 290px;
}

.shared-footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.shared-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.shared-footer-links a {
  font-size: 0.835rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.shared-footer-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

.shared-footer-follow-wrapper {
  margin-top: 24px;
}

.shared-footer-follow-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.shared-footer-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.shared-social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  text-decoration: none;
  transition: var(--transition);
}

.shared-social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

.shared-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  flex-wrap: wrap;
  gap: 12px;
}


@media (max-width: 1180px) {
  .nav-link {
    padding: 6px 9px;
    font-size: 0.82rem;
  }
  .btn-nav-phone {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}


@media (max-width: 1024px) {
  :scope {
    --header-height: 66px;
  }
  .nav-menu-wrapper,
  .btn-phone-desktop {
    display: none !important;
  }
  .hamburger-btn {
    display: flex !important;
  }
  .btn-cta-desktop {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .shared-footer-brand p {
    max-width: 100%;
  }
}


@media (max-width: 768px) {
  :scope {
    --header-height: 62px;
  }
  .btn-cta-desktop {
    display: none !important;
  }
  .shared-site-footer {
    padding: 46px 0 24px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding-bottom: 28px;
  }
}


@media (max-width: 540px) {
  :scope {
    --header-height: 58px;
  }
  .nav-container {
    padding: 0 14px;
  }
  .hamburger-btn {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  .hamburger-btn span {
    width: 20px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
  }
  .shared-footer-col-company {
    grid-column: 1;
  }
  .shared-footer-col-solutions {
    grid-column: 2;
  }
  .shared-footer-col-resources {
    grid-column: 1 / -1;
  }
  .shared-footer-col h5 {
    margin-bottom: 12px;
  }
  .shared-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


@media (max-width: 360px) {
  .shared-brand-logo {
    font-size: 1.15rem;
  }
  .mobile-nav-drawer {
    width: 90vw;
    padding: 18px 14px 22px;
  }
  .mobile-nav-link {
    font-size: 0.95rem;
  }
}
  
}
:where(html[data-page="contact"]) .shared-kx-mobile-drawer { visibility: hidden; }
:where(html[data-page="contact"]) .shared-kx-mobile-drawer.open { visibility: visible; }
:where(html[data-page="contact"]) .shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="contact"]) .shared-kx-btn-pill-navy:active,:where(html[data-page="contact"]) 
  .shared-kx-btn-pill-gold:active,:where(html[data-page="contact"]) 
  .kx-modal-submit:active { transform: none; }
}

/* page-upgrades.css */
:where(html[data-page="contact"]) body.rv-upgraded { --rv-navy:#102039; --rv-muted:#5e748f; --rv-gold:#f5a916; --rv-cream:#fbf7ef; font-family:'Plus Jakarta Sans','Inter',sans-serif; background:var(--rv-cream); }
:where(html[data-page="contact"]) .rv-upgraded .rv-container { width:calc(100% - 80px); max-width:1240px; margin-inline:auto; }
:where(html[data-page="contact"]) .rv-upgraded .rv-section { scroll-margin-top:96px; }
:where(html[data-page="contact"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities) { padding-top:80px; padding-bottom:80px; }
:where(html[data-page="contact"]) .rv-upgraded .rv-section h2 { font-family:'Outfit','Plus Jakarta Sans',sans-serif!important; font-weight:800!important; font-size:clamp(30px,3.1vw,42px)!important; line-height:1.16!important; letter-spacing:-.04em!important; }
:where(html[data-page="contact"]) .rv-upgraded .rv-section h3 { font-family:'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.025em; }
:where(html[data-page="contact"]) .rv-upgraded .rv-section p { line-height:1.7; }
:where(html[data-page="contact"]) .rv-upgraded .rv-section[data-rv-surface="light"] { background:#fffdf8!important; }
:where(html[data-page="contact"]) .rv-upgraded .rv-section[data-rv-surface="light"]:nth-of-type(even) { background:#fff!important; }
:where(html[data-page="contact"]) .rv-upgraded .rv-section[data-rv-surface="light"] h2 { color:#102039; }
:where(html[data-page="contact"]) .rv-upgraded .rv-section :is(input,select,textarea) { border-radius:12px; font-family:'Plus Jakarta Sans','Inter',sans-serif; }
:where(html[data-page="contact"]) .rv-upgraded :is(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #21877b; outline-offset:4px; }
:where(html[data-page="contact"]) .rv-upgraded .rv-hero { background-color:#fbf7ef; background-image:radial-gradient(#d9d7cc .7px,transparent .7px); background-size:24px 24px; padding:44px 0 54px; border-bottom:1px solid #e9e6de; position:relative; overflow:hidden; }
:where(html[data-page="contact"]) .rv-upgraded .rv-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
:where(html[data-page="contact"]) .rv-upgraded .rv-hero-copy { min-width:0; }
:where(html[data-page="contact"]) .rv-upgraded .rv-eyebrow { display:flex; align-items:center; gap:9px; font:700 11px/1.4 'Plus Jakarta Sans','Inter',sans-serif; text-transform:uppercase; letter-spacing:.14em; color:#315373; margin:0 0 16px; }
:where(html[data-page="contact"]) .rv-eyebrow > span { width:7px; height:7px; border-radius:50%; background:#f5a916; }
:where(html[data-page="contact"]) .rv-upgraded .rv-hero h1 { font-family:'Outfit','Plus Jakarta Sans',sans-serif!important; font-size:clamp(40px,4.1vw,58px)!important; line-height:1.09!important; font-weight:800!important; letter-spacing:-.05em!important; color:#102039!important; margin:0 0 20px!important; max-width:100%; }
:where(html[data-page="contact"]) .rv-upgraded .rv-hero h1 em { font-style:normal; color:#c88409; text-decoration:underline; text-decoration-color:#f5a916; text-decoration-thickness:3px; text-underline-offset:8px; }
:where(html[data-page="contact"]) .rv-upgraded .rv-description { color:#5e748f; font:400 17px/1.75 'Plus Jakarta Sans','Inter',sans-serif; max-width:560px; margin:0 0 26px; }
:where(html[data-page="contact"]) .rv-upgraded .rv-actions { display:flex; gap:12px; flex-wrap:wrap; }
:where(html[data-page="contact"]) .rv-upgraded .rv-button { display:inline-flex; justify-content:center; align-items:center; gap:14px; padding:15px 21px; min-height:52px; border-radius:999px; font:700 13px/1.4 'Plus Jakarta Sans','Inter',sans-serif; text-decoration:none; color:#102039; border:1px solid #e2e7ee; transition:background .2s,transform .2s; }
:where(html[data-page="contact"]) .rv-upgraded .rv-button-primary { background:#ffc526; border-color:#ffc526; box-shadow:0 8px 20px #f5a91620; }
:where(html[data-page="contact"]) .rv-upgraded .rv-button-secondary { background:#fff; }
:where(html[data-page="contact"]) .rv-upgraded .rv-button:hover { transform:translateY(-2px); background:#fff0bd; }
:where(html[data-page="contact"]) .rv-upgraded .rv-button i { font-size:18px; }
:where(html[data-page="contact"]) .rv-upgraded .rv-hero-art { min-width:0; position:relative; padding:0; }
:where(html[data-page="contact"]) .rv-upgraded .rv-note { font:600 24px/1.15 Caveat,cursive; color:#315373; text-align:right; margin:14px 12px 0 0; transform:rotate(-3deg); }
:where(html[data-page="contact"]) .rv-note svg { display:inline-block; width:50px; height:28px; vertical-align:middle; }
:where(html[data-page="contact"]) .rv-upgraded .rv-pastel-0 { background:#fff2cb; color:#a97007; }
:where(html[data-page="contact"]) .rv-upgraded .rv-pastel-1 { background:#def7ee; color:#187d6b; }
:where(html[data-page="contact"]) .rv-upgraded .rv-pastel-2 { background:#e5efff; color:#2867c7; }
:where(html[data-page="contact"]) .rv-upgraded .rv-pastel-3 { background:#fbe4ef; color:#b83c73; }
:where(html[data-page="contact"]) .rv-upgraded .rv-pastel-4 { background:#ede5fc; color:#7250b2; }
:where(html[data-page="contact"]) .rv-upgraded .rv-icon { width:56px; height:56px; flex-shrink:0; display:grid; place-items:center; border-radius:18px; font-size:27px; }
:where(html[data-page="contact"]) .rv-upgraded .rv-capabilities { padding:46px 0 54px; background:#fff; border-bottom:1px solid #e9edf0; }
:where(html[data-page="contact"]) .rv-capabilities .rv-eyebrow { margin-bottom:14px; }
:where(html[data-page="contact"]) .rv-capabilities h2 { max-width:1000px; color:#102039; margin:0 0 32px; }
:where(html[data-page="contact"]) .rv-capability-grid { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); gap:26px; }
:where(html[data-page="contact"]) .rv-capability { display:flex; align-items:flex-start; gap:15px; }
:where(html[data-page="contact"]) .rv-upgraded .rv-capability h3 { font-size:16px; line-height:1.3; color:#102039; margin:0 0 8px; }
:where(html[data-page="contact"]) .rv-upgraded .rv-capability p { font:400 13px/1.6 'Plus Jakarta Sans','Inter',sans-serif; color:#5e748f; margin:0; }
:where(html[data-page="contact"]) .rv-orbit { position:relative; width:100%; max-width:510px; aspect-ratio:1.12; margin:auto; }
:where(html[data-page="contact"]) .rv-orbit-ring { position:absolute; width:70%; height:76%; top:12%; left:15%; border:1.5px solid #e9b448; border-radius:50%; }
:where(html[data-page="contact"]) .rv-orbit-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:37%; aspect-ratio:1; border-radius:50%; background:#102039; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font:800 24px/1.15 'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.04em; box-shadow:0 12px 30px #10203915; text-align:center; }
:where(html[data-page="contact"]) .rv-orbit-core span { color:#26b794; font-size:22px; }
:where(html[data-page="contact"]) .rv-orbit-node { position:absolute; left:calc(50% + cos(calc(var(--i)*360deg/var(--count) - 90deg))*37%); top:calc(50% + sin(calc(var(--i)*360deg/var(--count) - 90deg))*37%); transform:translate(-50%,-50%); width:25%; aspect-ratio:1; border:3px solid #fff; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; box-shadow:0 6px 22px #10203906; }
:where(html[data-page="contact"]) .rv-orbit-node i { font-size:32px; }:where(html[data-page="contact"]) .rv-orbit-node strong { font:700 12px/1.3 'Plus Jakarta Sans','Inter',sans-serif; color:#102039; text-align:center; }
:where(html[data-page="contact"]) .rv-orbit-4 .rv-orbit-node { left:calc(50% + cos(calc(var(--i)*90deg - 135deg))*43%); top:calc(50% + sin(calc(var(--i)*90deg - 135deg))*43%); }
:where(html[data-page="contact"]) .rv-career-panels { display:flex; align-items:center; gap:14px; padding:24px 8px; min-height:385px; }
:where(html[data-page="contact"]) .rv-career-panel { flex:1; min-width:0; height:320px; border-radius:18px; padding:30px 18px; display:flex; flex-direction:column; justify-content:center; gap:25px; transform:rotate(-4deg); }
:where(html[data-page="contact"]) .rv-career-panel:nth-child(2){transform:translateY(-22px) rotate(3deg)}:where(html[data-page="contact"]) .rv-career-panel:nth-child(3){transform:rotate(-3deg)}
:where(html[data-page="contact"]) .rv-career-panel i { font-size:48px; }:where(html[data-page="contact"]) .rv-career-panel strong { font:800 clamp(25px,2.5vw,36px)/1 'Outfit','Plus Jakarta Sans',sans-serif; color:#102039; letter-spacing:-.04em; }:where(html[data-page="contact"]) .rv-career-panel span { font:500 11px/1.6 'Plus Jakarta Sans','Inter',sans-serif; text-transform:uppercase; letter-spacing:.08em; color:#5e748f; }
:where(html[data-page="contact"]) .rv-roadmap { background:#fff; border:1px solid #e8e9e6; padding:30px; border-radius:24px; box-shadow:0 16px 40px #10203908; }
:where(html[data-page="contact"]) .rv-small-label { font:700 10px/1.4 'Plus Jakarta Sans','Inter',sans-serif!important; text-transform:uppercase; letter-spacing:.13em; color:#315373; margin:0 0 26px!important; }
:where(html[data-page="contact"]) .rv-roadmap-step { display:flex; gap:20px; padding:16px 0; }:where(html[data-page="contact"]) .rv-roadmap-step .rv-icon { width:70px;height:70px;border-radius:50%;font-size:34px; }
:where(html[data-page="contact"]) .rv-roadmap-step small { font:700 12px 'Plus Jakarta Sans','Inter',sans-serif; color:#178575; }:where(html[data-page="contact"]) .rv-upgraded .rv-roadmap-step h3 { font:800 21px/1.2 'Outfit','Plus Jakarta Sans',sans-serif; color:#102039; margin:6px 0; }:where(html[data-page="contact"]) .rv-roadmap-step p { color:#5e748f; font-size:13px; margin:0; }
:where(html[data-page="contact"]) .rv-art-conversation-roadmap > .rv-note,:where(html[data-page="contact"]) .rv-art-cloud-architecture > .rv-note,:where(html[data-page="contact"]) .rv-art-search-visibility > .rv-note { margin:0 12px 18px; }
:where(html[data-page="contact"]) .rv-devices { min-height:410px; padding:20px 50px 20px 0; position:relative; }
:where(html[data-page="contact"]) .rv-browser { border:5px solid #16334d; border-radius:17px; overflow:hidden; background:#fffdf8; box-shadow:0 18px 25px #10203920; }
:where(html[data-page="contact"]) .rv-browser-bar { height:24px; display:flex; gap:6px; align-items:center; padding:0 12px; background:#16334d; }:where(html[data-page="contact"]) .rv-browser-bar b { width:7px;height:7px;border-radius:50%;background:#ffcd38; }:where(html[data-page="contact"]) .rv-browser-bar b:first-child{background:#ed7880}:where(html[data-page="contact"]) .rv-browser-bar b:last-child{background:#24b7a8}
:where(html[data-page="contact"]) .rv-browser-content { min-height:310px; padding:23px; position:relative; overflow:hidden; }:where(html[data-page="contact"]) .rv-mock-brand { display:block;font:800 17px 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039; margin-bottom:26px; }:where(html[data-page="contact"]) .rv-browser-content small { display:block;font:700 8px 'Plus Jakarta Sans','Inter',sans-serif;text-transform:uppercase;letter-spacing:.15em;color:#476780;margin-bottom:14px; }:where(html[data-page="contact"]) .rv-browser-content strong { display:block;font:800 29px/1.13 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;letter-spacing:-.04em;position:relative;z-index:1; }:where(html[data-page="contact"]) .rv-browser-content p { font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;max-width:210px;color:#5e748f;margin:15px 0; }:where(html[data-page="contact"]) .rv-mock-button { display:inline-block;padding:10px 17px;background:#ffca32;color:#102039;border-radius:999px;font:700 10px 'Plus Jakarta Sans','Inter',sans-serif;position:relative;z-index:1; }
:where(html[data-page="contact"]) .rv-shapes { width:180px;height:160px;position:absolute;bottom:-15px;right:-20px;pointer-events:none; }:where(html[data-page="contact"]) .rv-shapes b { position:absolute; }:where(html[data-page="contact"]) .rv-shapes b:nth-child(1){width:110px;height:110px;border-radius:100% 0 0 0;background:#25b09e;right:0;bottom:0}:where(html[data-page="contact"]) .rv-shapes b:nth-child(2){width:140px;height:140px;border-radius:100% 0 0 0;background:#f6e8c6;right:0;bottom:0;z-index:-1}:where(html[data-page="contact"]) .rv-shapes b:nth-child(3){width:65px;height:65px;border-radius:50%;background:#ffce3a;left:0;top:0}
:where(html[data-page="contact"]) .rv-mini-phone { position:absolute;bottom:0;right:0;width:145px;height:278px;padding:30px 13px 15px;border:7px solid #132b44;border-radius:26px;background:#fffdf8;box-shadow:0 14px 24px #10203920;overflow:hidden; }:where(html[data-page="contact"]) .rv-mini-phone>b { position:absolute;top:4px;left:35%;width:30%;height:8px;border-radius:10px;background:#132b44; }:where(html[data-page="contact"]) .rv-mini-phone>span:not(.rv-mock-button) { font:800 12px 'Outfit','Plus Jakarta Sans',sans-serif; }:where(html[data-page="contact"]) .rv-mini-phone>strong { display:block;font:800 20px/1.12 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;margin:30px 0 20px; }:where(html[data-page="contact"]) .rv-mini-phone .rv-shapes { transform:scale(.6);transform-origin:bottom right; }:where(html[data-page="contact"]) .rv-mini-phone .rv-mock-button {font-size:8px;padding:8px 10px}
:where(html[data-page="contact"]) .rv-flow { display:grid;grid-template-columns:1fr 1fr 1.2fr;align-items:center;gap:16px;min-height:340px;position:relative; }:where(html[data-page="contact"]) .rv-flow::before {content:'';position:absolute;left:15%;right:15%;top:50%;height:2px;background:#f5a916;z-index:0}:where(html[data-page="contact"]) .rv-flow-input { position:relative;background:#fff;border:1px solid #e2e7ee;border-radius:18px;padding:18px 10px;text-align:center; }:where(html[data-page="contact"]) .rv-flow-input i {font-size:28px;color:#1da891;display:block;margin-bottom:10px}:where(html[data-page="contact"]) .rv-flow-input strong {display:block;font-size:12px;color:#102039}:where(html[data-page="contact"]) .rv-flow-input span {font-size:9px;color:#5e748f;display:block;margin-top:6px}:where(html[data-page="contact"]) .rv-flow-core { position:relative;aspect-ratio:1;border-radius:50%;background:#102039;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;box-shadow:0 0 0 10px #e7eff7; }:where(html[data-page="contact"]) .rv-flow-core i {font-size:34px}:where(html[data-page="contact"]) .rv-flow-core strong {font-size:11px;line-height:1.4}:where(html[data-page="contact"]) .rv-flow-outputs {display:flex;flex-direction:column;gap:24px;position:relative}:where(html[data-page="contact"]) .rv-flow-outputs>div {padding:16px 12px;background:#fff;border:1px solid #e2e7ee;border-radius:999px;font-size:11px;display:flex;align-items:center;gap:10px;color:#102039}:where(html[data-page="contact"]) .rv-flow-outputs i {font-size:23px;color:#248978}
:where(html[data-page="contact"]) .rv-cloud {background:#102c46;color:#fff;padding:34px;border-radius:26px;box-shadow:0 18px 30px #10203915}:where(html[data-page="contact"]) .rv-cloud-icon {text-align:center;font-size:100px;line-height:1}:where(html[data-page="contact"]) .rv-cloud-branches{height:42px;border:2px solid #ffcc31;border-bottom:0;border-radius:18px 18px 0 0;margin:12px 14% 0;position:relative}:where(html[data-page="contact"]) .rv-cloud-branches::after{content:'';position:absolute;left:50%;height:54px;top:-14px;border-left:2px solid #ffcc31}:where(html[data-page="contact"]) .rv-server-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}:where(html[data-page="contact"]) .rv-server{border:1px solid #88adc7;border-radius:8px;height:34px;display:flex;gap:5px;align-items:center;padding:10px;margin-bottom:4px}:where(html[data-page="contact"]) .rv-server b{width:6px;height:6px;border-radius:50%;background:#21d2b1}:where(html[data-page="contact"]) .rv-server span{width:24px;height:3px;background:#41637e;margin-left:4px}:where(html[data-page="contact"]) .rv-server-grid strong{display:block;text-align:center;font-size:14px;margin-top:16px;color:white}
:where(html[data-page="contact"]) .rv-app-phones {position:relative;min-height:430px;display:flex;justify-content:center;align-items:center;padding:10px 20px}:where(html[data-page="contact"]) .rv-app-phone{position:relative;width:47%;height:390px;border:7px solid #132b44;border-radius:31px;background:#fffdf8;padding:36px 18px 20px;overflow:hidden;box-shadow:0 18px 25px #10203920;transform:rotate(-7deg)}:where(html[data-page="contact"]) .rv-app-phone+.rv-app-phone{transform:rotate(7deg) translateY(16px);margin-left:-10px}:where(html[data-page="contact"]) .rv-phone-notch{position:absolute;top:-1px;left:28%;width:44%;height:15px;border-radius:0 0 12px 12px;background:#132b44}:where(html[data-page="contact"]) .rv-app-phone small{font:800 10px 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;white-space:nowrap}:where(html[data-page="contact"]) .rv-app-phone small span{color:#1aac90}:where(html[data-page="contact"]) .rv-app-phone>strong{font:800 29px/1.1 'Outfit','Plus Jakarta Sans',sans-serif;display:block;color:#102039;margin:36px 0 20px;letter-spacing:-.04em}:where(html[data-page="contact"]) .rv-app-phone p{font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;color:#5e748f;margin-bottom:18px}:where(html[data-page="contact"]) .rv-upgraded .rv-app-phone h3{font:800 17px/1.2 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039;margin:12px 0}:where(html[data-page="contact"]) .rv-phone-row{display:flex;align-items:center;gap:10px;padding:14px 5px;border-bottom:1px solid #e2e7ee;font:600 11px 'Plus Jakarta Sans','Inter',sans-serif;color:#102039}:where(html[data-page="contact"]) .rv-phone-row i{font-size:23px;color:#24a694}:where(html[data-page="contact"]) .rv-app-phone .rv-shapes{transform:scale(.8);transform-origin:bottom right}:where(html[data-page="contact"]) .rv-platforms{text-align:center;color:#315373;font-size:12px!important;margin-top:22px}:where(html[data-page="contact"]) .rv-platforms i{font-size:18px;margin-left:12px}:where(html[data-page="contact"]) .rv-platforms span{margin-left:14px;color:#afbac6}
:where(html[data-page="contact"]) .rv-search {padding:28px;background:#fff;border:1px solid #e2e7ee;border-radius:24px;box-shadow:0 18px 35px #1020390c}:where(html[data-page="contact"]) .rv-search-field{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid #e2e7ee;border-radius:999px;color:#102039;font-size:13px}:where(html[data-page="contact"]) .rv-search-field i{font-size:21px}:where(html[data-page="contact"]) .rv-search-result{padding:28px 8px}:where(html[data-page="contact"]) .rv-search-result small{display:block;color:#71859b;font-size:10px;margin-bottom:14px}:where(html[data-page="contact"]) .rv-search-result strong{display:block;color:#2761b7;font:700 22px 'Outfit','Plus Jakarta Sans',sans-serif;margin-bottom:18px}:where(html[data-page="contact"]) .rv-search-result>span{display:block;height:9px;border-radius:5px;background:#e0e8f1;margin-top:8px}:where(html[data-page="contact"]) .rv-search-result>span:last-child{width:80%}:where(html[data-page="contact"]) .rv-trend{display:block;width:100%;height:auto;overflow:visible}:where(html[data-page="contact"]) .rv-illustration-label{font:400 10px/1.5 'Plus Jakarta Sans','Inter',sans-serif!important;color:#71859b;margin-top:14px;text-align:center}
:where(html[data-page="contact"]) .rv-funnel {display:flex;align-items:center;flex-direction:column;gap:12px;padding:0 24px}:where(html[data-page="contact"]) .rv-funnel-brand{width:92px;height:92px;border-radius:50%;background:#102039;color:#fff;display:grid;place-content:center;font:800 18px/1.15 'Outfit','Plus Jakarta Sans',sans-serif;text-align:center;margin-bottom:4px}:where(html[data-page="contact"]) .rv-funnel-step{display:flex;align-items:center;gap:20px;padding:24px 28px;border-radius:22px;width:100%;}:where(html[data-page="contact"]) .rv-funnel-step:nth-child(3){width:90%}:where(html[data-page="contact"]) .rv-funnel-step:nth-child(4){width:80%}:where(html[data-page="contact"]) .rv-funnel-step>i{font-size:38px;color:#102039}:where(html[data-page="contact"]) .rv-funnel-step strong{font:700 14px/1.3 'Outfit','Plus Jakarta Sans',sans-serif;color:#102039}:where(html[data-page="contact"]) .rv-funnel-step p{font:400 11px/1.5 'Plus Jakarta Sans','Inter',sans-serif;color:#5e748f;margin:8px 0 0}
:where(html[data-page="contact"]) .rv-media-fallback {display:flex!important;align-items:center;justify-content:center;flex-direction:column;gap:16px;min-height:140px;padding:30px;background:#eef4f2;color:#315373;border-radius:inherit;text-align:center;font:600 13px/1.5 'Plus Jakarta Sans','Inter',sans-serif}:where(html[data-page="contact"]) .rv-media-fallback i{font-size:38px;color:#28a595}:where(html[data-page="contact"]) .rv-media-fallback.rv-avatar{width:48px;height:48px;min-height:0;padding:0;border-radius:50%;font-size:14px}:where(html[data-page="contact"]) .rv-media-fallback small{font-size:10px;color:#5e748f;text-transform:uppercase;letter-spacing:.1em}
@media(min-width:1400px){:where(html[data-page="contact"]) .rv-upgraded .rv-hero{padding-top:48px;padding-bottom:58px}}
@media(max-width:1100px){:where(html[data-page="contact"]) .rv-upgraded .rv-hero-grid{gap:32px}:where(html[data-page="contact"]) .rv-upgraded .rv-container{width:calc(100% - 48px)}:where(html[data-page="contact"]) .rv-upgraded .rv-hero h1{font-size:46px!important}:where(html[data-page="contact"]) .rv-career-panel{padding:24px 12px}:where(html[data-page="contact"]) .rv-flow{gap:10px}:where(html[data-page="contact"]) .rv-app-phone{padding-inline:12px}:where(html[data-page="contact"]) .rv-app-phone>strong{font-size:26px}:where(html[data-page="contact"]) .rv-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){:where(html[data-page="contact"]) .rv-upgraded .rv-hero-grid{grid-template-columns:1fr;gap:30px}:where(html[data-page="contact"]) .rv-upgraded .rv-hero{padding:36px 0 44px}:where(html[data-page="contact"]) .rv-upgraded .rv-hero-copy{max-width:660px}:where(html[data-page="contact"]) .rv-upgraded .rv-hero-art{width:100%;max-width:580px;margin:auto}:where(html[data-page="contact"]) .rv-upgraded .rv-hero h1{font-size:clamp(38px,6vw,54px)!important}:where(html[data-page="contact"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities){padding-block:56px}:where(html[data-page="contact"]) .rv-upgraded .rv-description{max-width:640px}:where(html[data-page="contact"]) .rv-upgraded .rv-capabilities{padding-block:40px}:where(html[data-page="contact"]) .rv-upgraded .rv-section h2{font-size:34px!important}}
@media(max-width:540px){:where(html[data-page="contact"]) .rv-upgraded .rv-container{width:calc(100% - 40px)}:where(html[data-page="contact"]) .rv-upgraded .rv-hero h1{font-size:38px!important;line-height:1.12!important}:where(html[data-page="contact"]) .rv-upgraded .rv-description{font-size:15px}:where(html[data-page="contact"]) .rv-upgraded .rv-eyebrow{font-size:10px;margin-bottom:20px}:where(html[data-page="contact"]) .rv-upgraded .rv-button{font-size:12px;min-height:48px;padding:13px 17px}:where(html[data-page="contact"]) .rv-upgraded .rv-actions{gap:10px}:where(html[data-page="contact"]) .rv-upgraded .rv-hero-art{padding-top:0}:where(html[data-page="contact"]) .rv-capability-grid{grid-template-columns:1fr;gap:24px}:where(html[data-page="contact"]) .rv-upgraded .rv-section h2{font-size:29px!important}:where(html[data-page="contact"]) .rv-upgraded .rv-note{font-size:22px}:where(html[data-page="contact"]) .rv-orbit-core{font-size:19px}:where(html[data-page="contact"]) .rv-orbit-core span{font-size:16px}:where(html[data-page="contact"]) .rv-orbit-node i{font-size:24px}:where(html[data-page="contact"]) .rv-orbit-node strong{font-size:9px}:where(html[data-page="contact"]) .rv-orbit-node{gap:5px}:where(html[data-page="contact"]) .rv-career-panels{min-height:290px;padding:20px 2px;gap:9px}:where(html[data-page="contact"]) .rv-career-panel{height:240px;padding:20px 12px;gap:20px}:where(html[data-page="contact"]) .rv-career-panel strong{font-size:25px}:where(html[data-page="contact"]) .rv-career-panel span{font-size:9px}:where(html[data-page="contact"]) .rv-career-panel i{font-size:36px}:where(html[data-page="contact"]) .rv-roadmap{padding:20px}:where(html[data-page="contact"]) .rv-roadmap-step{gap:14px}:where(html[data-page="contact"]) .rv-roadmap-step .rv-icon{width:48px;height:48px;font-size:26px}:where(html[data-page="contact"]) .rv-upgraded .rv-roadmap-step h3{font-size:19px}:where(html[data-page="contact"]) .rv-devices{min-height:350px;padding-right:30px}:where(html[data-page="contact"]) .rv-browser-content{padding:16px;min-height:280px}:where(html[data-page="contact"]) .rv-browser-content strong{font-size:25px}:where(html[data-page="contact"]) .rv-browser-content p{max-width:160px}:where(html[data-page="contact"]) .rv-mini-phone{width:110px;height:225px;border-width:5px;padding:24px 10px 10px}:where(html[data-page="contact"]) .rv-mini-phone>strong{font-size:17px;margin:22px 0 14px}:where(html[data-page="contact"]) .rv-browser-content .rv-shapes{transform:scale(.7);transform-origin:bottom right}:where(html[data-page="contact"]) .rv-flow{grid-template-columns:1fr 1fr;gap:24px;min-height:300px}:where(html[data-page="contact"]) .rv-flow-input{grid-column:1;grid-row:1}:where(html[data-page="contact"]) .rv-flow-core{grid-column:2;grid-row:1;width:120px;justify-self:center}:where(html[data-page="contact"]) .rv-flow-outputs{grid-column:1/-1;flex-direction:row;gap:8px}:where(html[data-page="contact"]) .rv-flow-outputs>div{flex:1;flex-direction:column;text-align:center;padding:15px 8px;border-radius:16px;font-size:10px}:where(html[data-page="contact"]) .rv-flow::before{top:25%}:where(html[data-page="contact"]) .rv-cloud{padding:24px 20px}:where(html[data-page="contact"]) .rv-cloud-icon{font-size:80px}:where(html[data-page="contact"]) .rv-server-grid{gap:12px}:where(html[data-page="contact"]) .rv-server{padding:6px;height:28px}:where(html[data-page="contact"]) .rv-server-grid strong{font-size:11px}:where(html[data-page="contact"]) .rv-server span{width:13px}:where(html[data-page="contact"]) .rv-app-phones{padding:10px 4px;min-height:350px}:where(html[data-page="contact"]) .rv-app-phone{height:320px;border-width:5px;border-radius:25px;padding:25px 12px 15px;width:49%}:where(html[data-page="contact"]) .rv-app-phone>strong{font-size:23px;margin:26px 0 16px}:where(html[data-page="contact"]) .rv-app-phone small{font-size:8px}:where(html[data-page="contact"]) .rv-app-phone p{font-size:9px}:where(html[data-page="contact"]) .rv-upgraded .rv-app-phone h3{font-size:14px}:where(html[data-page="contact"]) .rv-phone-row{font-size:10px;padding:11px 2px;gap:7px}:where(html[data-page="contact"]) .rv-app-phone .rv-shapes{transform:scale(.6)}:where(html[data-page="contact"]) .rv-app-phone .rv-mock-button{font-size:9px;padding:9px 12px}:where(html[data-page="contact"]) .rv-search{padding:22px}:where(html[data-page="contact"]) .rv-search-field{font-size:11px;padding:12px}:where(html[data-page="contact"]) .rv-search-result strong{font-size:19px}:where(html[data-page="contact"]) .rv-funnel{padding:0 6px}:where(html[data-page="contact"]) .rv-funnel-step{padding:19px 20px;gap:14px}:where(html[data-page="contact"]) .rv-funnel-step>i{font-size:29px}:where(html[data-page="contact"]) .rv-funnel-step strong{font-size:12px}:where(html[data-page="contact"]) .rv-funnel-step p{font-size:10px}:where(html[data-page="contact"]) .rv-upgraded .rv-section:not(.rv-hero):not(.rv-capabilities){padding-block:44px}}
@media(prefers-reduced-motion:reduce){:where(html[data-page="contact"]) .rv-upgraded .rv-button{transition:none}:where(html[data-page="contact"]) .rv-upgraded .rv-button:hover{transform:none}}
@media(max-width:600px){
  :where(html[data-page="contact"]) .rv-upgraded .featured-header-row { flex-wrap:wrap; gap:14px; }
  :where(html[data-page="contact"]) .rv-upgraded #client-stories .container > div:first-child { flex-wrap:wrap; gap:20px; }
  :where(html[data-page="contact"]) .rv-upgraded #client-stories .container > div:first-child > div { min-width:0; max-width:100%; flex-wrap:wrap; }
  :where(html[data-page="contact"]) .rv-upgraded .rv-orbit-6 .rv-orbit-node strong { font-size:8px; }
}
:where(html[data-page="contact"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(h2, h3, .final-cta-headline, .kx-cta-headline, .display-h2) {
  color: #FFFFFF !important;
}
:where(html[data-page="contact"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(h2, h3, .final-cta-headline, .kx-cta-headline) :is(.highlight-gold, .cta-gold-text, em, span.gold, .kx-text-gold) {
  color: #FFC526 !important;
  background: transparent !important;
}
:where(html[data-page="contact"]) .rv-upgraded :is(.final-cta-box, .final-cta-card, .dark-panel-container, .ma-dark, .kx-final-cta-box, .kx-cta-banner-box, .kx-cta-section, #cta) :is(p, .kx-cta-sub) {
  color: rgba(255, 255, 255, 0.9) !important;
}


/* micro-interactions.css */
/* Shared feedback layer. Motion acknowledges actions; informational content stays still. */
:root:where([data-page="contact"]){--kx-feedback-ease:cubic-bezier(.2,.75,.25,1);--kx-feedback-duration:180ms}
:where(html[data-page="contact"]) :where(a,button,summary,input,textarea,select):focus-visible{outline:3px solid #187d6b!important;outline-offset:4px}
:where(html[data-page="contact"]) :where(.shared-kx-footer,.ma-dark,.ma-closing) :where(a,button):focus-visible{outline-color:#ffc526!important}
:where(html[data-page="contact"]) :where(button,summary,.kx-mi-action){-webkit-tap-highlight-color:rgba(245,169,22,.18);touch-action:manipulation}
:where(html[data-page="contact"]) .kx-mi-action{transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease),scale 120ms var(--kx-feedback-ease),box-shadow var(--kx-feedback-duration) var(--kx-feedback-ease),background-color var(--kx-feedback-duration) ease,border-color var(--kx-feedback-duration) ease!important}
:where(html[data-page="contact"]) .kx-mi-arrow{display:inline-block;transition:translate var(--kx-feedback-duration) var(--kx-feedback-ease)!important}
:where(html[data-page="contact"]) .kx-mi-card{transition:translate 220ms var(--kx-feedback-ease),box-shadow 220ms var(--kx-feedback-ease),border-color 180ms ease!important}
:where(html[data-page="contact"]) .shared-footer-links a,:where(html[data-page="contact"]) .shared-kx-dropdown-item,:where(html[data-page="contact"]) .shared-kx-mobile-nav-link{ text-decoration-color:transparent;text-underline-offset:5px;transition:color 160ms ease,background-color 160ms ease,text-decoration-color 160ms ease!important}
:where(html[data-page="contact"]) .shared-footer-links a:focus-visible{ text-decoration:underline;text-decoration-color:currentColor }
:where(html[data-page="contact"]) :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea,select){transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease!important}
:where(html[data-page="contact"]) :where(input:not([type=checkbox]):not([type=radio]),textarea,select):focus{border-color:#187d6b!important;box-shadow:0 0 0 3px rgb(24 125 107 / .12)}
:where(html[data-page="contact"]) :where(button[aria-expanded],summary){transition:background-color 160ms ease,color 160ms ease!important}
:where(html[data-page="contact"]) :where(button[aria-expanded],summary):focus-visible{border-radius:8px}
@media(hover:hover) and (pointer:fine){
  :where(html[data-page="contact"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):hover{translate:0 -2px}
  :where(html[data-page="contact"]) .kx-mi-action:hover .kx-mi-arrow,:where(html[data-page="contact"]) .kx-mi-action:focus-visible .kx-mi-arrow{translate:3px 0}
  :where(html[data-page="contact"]) .kx-mi-card:hover,:where(html[data-page="contact"]) .kx-mi-card:focus-within{translate:0 -3px;border-color:#d8ba78;box-shadow:0 10px 24px rgb(16 32 57 / .08)}
  :where(html[data-page="contact"]) .shared-footer-links a:hover{text-decoration:underline;text-decoration-color:currentColor}
}
:where(html[data-page="contact"]) .kx-mi-action:not(:disabled):not([aria-disabled=true]):active{translate:0 0;scale:.98;transition-duration:80ms!important}
:where(html[data-page="contact"]) .kx-mi-card:active{translate:0 -1px}
/* Honor this preference for both this layer and pre-existing decorative loops. */
@media(prefers-reduced-motion:reduce){
  html:where([data-page="contact"]){scroll-behavior:auto!important}
  :where(html[data-page="contact"]) *,:where(html[data-page="contact"]) *::before,:where(html[data-page="contact"]) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  :where(html[data-page="contact"]) .kx-mi-action,:where(html[data-page="contact"]) .kx-mi-card,:where(html[data-page="contact"]) .kx-mi-arrow{translate:none!important;scale:none!important;transition:none!important}
  :where(html[data-page="contact"]) .shared-footer-links a,:where(html[data-page="contact"]) .shared-kx-dropdown-item,:where(html[data-page="contact"]) .shared-kx-mobile-nav-link{transition:none!important}
}

/* contact-hero-upgrade.css */
:where(html[data-page="contact"]) #contact-hero.contact-hero-v2 {
  --contact-v2-navy: #102039;
  --contact-v2-deep: #082d57;
  --contact-v2-gold: #ffc526;
  --contact-v2-muted: #5e748f;
  position: relative;
  min-height: 720px;
  padding: 70px 0 76px;
  overflow: hidden;
  border-bottom: 1px solid rgba(16, 32, 57, .08);
  background:
    radial-gradient(circle at 78% 42%, rgba(255, 197, 38, .11), transparent 27%),
    radial-gradient(#d9d7cc 0.75px, transparent 0.75px),
    #fbf7ef;
  background-size: auto, 24px 24px, auto;
}

:where(html[data-page="contact"]) #contact-hero.contact-hero-v2::before {
  content: '';
  position: absolute;
  width: 460px;
  height: 460px;
  right: max(-190px, calc((100vw - 1360px) / 2 - 230px));
  top: -250px;
  border: 1px solid rgba(255, 197, 38, .2);
  border-radius: 50%;
  pointer-events: none;
}

:where(html[data-page="contact"]) #contact-hero .contact-hero-v2-container {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: 32px;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: clamp(38px, 3.4vw, 48px);
  align-items: start;
  position: relative;
  z-index: 1;
}

:where(html[data-page="contact"]) #contact-hero .contact-hero-v2-copy {
  min-width: 0;
  padding-block: 10px 0;
}

:where(html[data-page="contact"]) #contact-hero .contact-hero-v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  color: #31516f;
  font: 800 12px/1.2 var(--font-body, 'Plus Jakarta Sans', sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
}

:where(html[data-page="contact"]) #contact-hero .contact-hero-v2-eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--contact-v2-gold);
  box-shadow: 0 0 0 5px rgba(255, 197, 38, .14);
}

:where(html[data-page="contact"]) #contact-hero .contact-hero-v2-title {
  max-width: 720px;
  margin: 0 0 25px;
  color: var(--contact-v2-navy);
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(40px, 2.95vw, 42px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.052em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

:where(html[data-page="contact"]) #contact-hero .contact-hero-v2-title span {
  position: relative;
  display: inline;
  color: #bd7700;
  white-space: normal;
  padding-inline: .025em;
  background: linear-gradient(transparent 85%, rgba(255, 197, 38, .78) 85% 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

:where(html[data-page="contact"]) #contact-hero .contact-hero-v2-title span::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 1%;
  right: -1%;
  bottom: -.12em;
  height: .15em;
  border-radius: 60% 38% 52% 45%;
  background: var(--contact-v2-gold);
  rotate: -1deg;
  opacity: .88;
  display: none;
}

:where(html[data-page="contact"]) #contact-hero .contact-hero-v2-description {
  max-width: 615px;
  margin: 0 0 32px;
  color: var(--contact-v2-muted);
  font: 500 clamp(16px, 1.28vw, 18px)/1.72 var(--font-body, 'Plus Jakarta Sans', sans-serif);
}

:where(html[data-page="contact"]) #contact-hero .contact-hero-v2-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

:where(html[data-page="contact"]) #contact-hero .contact-hero-v2-button {
  min-height: 56px;
  padding: 0 27px;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--contact-v2-navy);
  font: 800 15px/1 var(--font-body, 'Plus Jakarta Sans', sans-serif);
  text-decoration: none;
  transition: translate .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}

:where(html[data-page="contact"]) #contact-hero .contact-hero-v2-button-primary {
  background: var(--contact-v2-gold);
  box-shadow: 0 13px 30px rgba(245, 169, 22, .28);
}

:where(html[data-page="contact"]) #contact-hero .contact-hero-v2-button-secondary {
  background: rgba(255, 255, 255, .9);
  border-color: #d9e1eb;
  box-shadow: 0 7px 22px rgba(16, 32, 57, .05);
}

:where(html[data-page="contact"]) #contact-hero .contact-hero-v2-button:focus-visible {
  outline: 3px solid #2166e8;
  outline-offset: 4px;
}

@media (hover: hover) {
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-button:hover { translate: 0 -2px; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-button-primary:hover { background: #ffd253; box-shadow: 0 16px 34px rgba(245, 169, 22, .35); }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-button-secondary:hover { border-color: #aebdce; background: #fff; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-node:hover { translate: 0 -2px; border-color: var(--node-accent); box-shadow: 0 18px 40px rgba(16, 32, 57, .11); }
}

:where(html[data-page="contact"]) #contact-hero .contact-hero-v2-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1.16;
  min-height: 560px;
  border: 1px solid #dfe5ed;
  border-radius: 32px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 22px 62px rgba(16, 32, 57, .09);
  isolation: isolate;
}

:where(html[data-page="contact"]) #contact-hero .contact-v2-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: visible;
}

:where(html[data-page="contact"]) #contact-hero .contact-v2-map-desktop { display: none; }

:where(html[data-page="contact"]) #contact-hero .contact-v2-hub {
  position: absolute;
  left: 48.5%;
  top: 45%;
  translate: -50% -50%;
  width: clamp(176px, 16vw, 224px);
  aspect-ratio: 1;
  border: 8px solid rgba(229, 239, 255, .95);
  border-radius: 50%;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 26px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 48% 35%, rgba(43, 113, 181, .4), transparent 47%),
    var(--contact-v2-deep);
  box-shadow: 0 20px 44px rgba(8, 45, 87, .27), 0 0 0 1px #4d82bd, 0 0 0 16px rgba(229, 239, 255, .48);
  z-index: 2;
}

:where(html[data-page="contact"]) #contact-hero .contact-v2-hub-icon {
  width: 54px;
  height: 44px;
  margin-bottom: 8px;
}

:where(html[data-page="contact"]) #contact-hero .contact-v2-hub strong {
  max-width: 150px;
  font: 800 clamp(20px, 2vw, 27px)/.98 var(--font-heading, 'Outfit', sans-serif);
  letter-spacing: -.035em;
}

:where(html[data-page="contact"]) #contact-hero .contact-v2-hub small {
  display: block;
  margin-top: 13px;
  color: #dceaff;
  font: 800 10px/1 var(--font-body, 'Plus Jakarta Sans', sans-serif);
  letter-spacing: .13em;
}

:where(html[data-page="contact"]) #contact-hero .contact-v2-node {
  --node-accent: #00b98d;
  position: absolute;
  z-index: 3;
  min-height: 100px;
  padding: 15px 17px;
  border: 1px solid #dae2ec;
  border-radius: 21px;
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 13px 34px rgba(16, 32, 57, .08);
  transition: translate .22s ease, border-color .22s ease, box-shadow .22s ease;
}

:where(html[data-page="contact"]) #contact-hero .contact-v2-node-one { left: 4.5%; top: 6%; width: 43%; }
:where(html[data-page="contact"]) #contact-hero .contact-v2-node-two { --node-accent: #7953e8; right: 1.5%; top: 36%; width: 30%; grid-template-columns: 44px 1fr; padding-inline: 14px; gap: 10px; }
:where(html[data-page="contact"]) #contact-hero .contact-v2-node-three { --node-accent: #2166e8; left: 6%; bottom: 5.5%; width: 30%; }

:where(html[data-page="contact"]) #contact-hero .contact-v2-node-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #068a72;
  background: #def7ee;
  font-size: 25px;
}

:where(html[data-page="contact"]) #contact-hero .contact-v2-node-two .contact-v2-node-icon { width: 44px; height: 44px; color: #7250b2; background: #ede5fc; font-size: 21px; }
:where(html[data-page="contact"]) #contact-hero .contact-v2-node-two h3 { font-size: 14px; }
:where(html[data-page="contact"]) #contact-hero .contact-v2-node-two p { font-size: 11px; }
:where(html[data-page="contact"]) #contact-hero .contact-v2-node-three .contact-v2-node-icon { color: #2867c7; background: #e5efff; }
:where(html[data-page="contact"]) #contact-hero .contact-v2-node-copy { min-width: 0; }
:where(html[data-page="contact"]) #contact-hero .contact-v2-node-num { display: block; margin-bottom: 3px; color: var(--node-accent); font: 800 11px/1 var(--font-body, sans-serif); }
:where(html[data-page="contact"]) #contact-hero .contact-v2-node h3 { margin: 0 0 4px; color: var(--contact-v2-navy); font: 800 clamp(15px, 1.15vw, 18px)/1.08 var(--font-heading, sans-serif); letter-spacing: -.025em; }
:where(html[data-page="contact"]) #contact-hero .contact-v2-node p { margin: 0; color: var(--contact-v2-muted); font: 500 11.5px/1.4 var(--font-body, sans-serif); }

:where(html[data-page="contact"]) #contact-hero .contact-v2-annotation {
  position: absolute;
  z-index: 4;
  top: 8%;
  right: 5%;
  width: 245px;
  color: #315b89;
  font: 700 22px/1.02 'Caveat', cursive;
  text-align: center;
  rotate: -4deg;
}

:where(html[data-page="contact"]) #contact-hero .contact-v2-annotation svg {
  position: absolute;
  width: 92px;
  height: 92px;
  left: -54px;
  top: 50px;
  overflow: visible;
}

/* Keep the desktop diagram tied to the copy's intrinsic height. The compact
   coordinates below intentionally leave each conduit beneath both endpoints. */
@media (min-width: 1241px) {
  :where(html[data-page="contact"]) #contact-hero.contact-hero-v2 { min-height: 0; }

  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-container { align-items: stretch; }

  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-visual {
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
  }

  :where(html[data-page="contact"]) #contact-hero .contact-v2-map-original { display: none; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-map-desktop { display: block; }

  :where(html[data-page="contact"]) #contact-hero .contact-v2-hub {
    left: 49%;
    top: 50%;
    width: clamp(134px, 10.1vw, 144px);
    border-width: 5px;
    padding: 15px;
    box-shadow: 0 16px 34px rgba(8, 45, 87, .25), 0 0 0 1px #4d82bd, 0 0 0 8px rgba(229, 239, 255, .48);
  }

  :where(html[data-page="contact"]) #contact-hero .contact-v2-hub-icon {
    width: 37px;
    height: 30px;
    margin-bottom: 4px;
  }

  :where(html[data-page="contact"]) #contact-hero .contact-v2-hub strong {
    max-width: 104px;
    font-size: clamp(15px, 1.15vw, 16.5px);
  }

  :where(html[data-page="contact"]) #contact-hero .contact-v2-hub small {
    margin-top: 6px;
    font-size: 6.5px;
    letter-spacing: .1em;
  }

  :where(html[data-page="contact"]) #contact-hero .contact-v2-node {
    min-height: 76px;
    padding: 10px 12px;
    border-radius: 17px;
    grid-template-columns: 42px 1fr;
    gap: 9px;
  }

  :where(html[data-page="contact"]) #contact-hero .contact-v2-node-one { left: 3.5%; top: 5%; width: 42%; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-node-two { right: 1.5%; top: 42%; width: 31%; grid-template-columns: 36px 1fr; padding-inline: 10px; gap: 8px; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-node-three { left: 5%; bottom: 4.5%; width: 44%; }

  :where(html[data-page="contact"]) #contact-hero .contact-v2-node-icon {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  :where(html[data-page="contact"]) #contact-hero .contact-v2-node-two .contact-v2-node-icon { width: 36px; height: 36px; font-size: 18px; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-node-num { margin-bottom: 2px; font-size: 9px; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-node h3 { margin-bottom: 2px; font-size: clamp(12px, .95vw, 15px); }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-node p { font-size: 9.5px; line-height: 1.3; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-node-two h3 { font-size: 12px; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-node-two p { font-size: 9px; }

  :where(html[data-page="contact"]) #contact-hero .contact-v2-annotation {
    top: 4%;
    right: 3.5%;
    width: 210px;
    font-size: 18px;
  }

  :where(html[data-page="contact"]) #contact-hero .contact-v2-annotation svg {
    width: 68px;
    height: 68px;
    left: -28px;
    top: 35px;
  }
}

@media (max-width: 1240px) {
  :where(html[data-page="contact"]) #contact-hero.contact-hero-v2 { padding-top: 58px; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-container { grid-template-columns: 1fr; gap: 42px; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-copy { max-width: 850px; padding: 0; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-title { max-width: 850px; font-size: clamp(54px, 7vw, 72px); }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-title span {
    display: inline;
    white-space: normal;
    background: linear-gradient(transparent 86%, rgba(255, 197, 38, .78) 86% 94%, transparent 94%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-title span::after { display: none; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-visual { max-width: 800px; min-height: 620px; margin-inline: auto; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-hub { width: 220px; }
}

@media (max-width: 768px) {
  :where(html[data-page="contact"]) #contact-hero.contact-hero-v2 { min-height: 0; padding: 46px 0 58px; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-container { padding-inline: 16px; gap: 36px; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-eyebrow { margin-bottom: 18px; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-title { max-width: 670px; margin-bottom: 20px; font-size: clamp(31px, 9vw, 60px); line-height: 1.01; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-title br { display: none; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-title span { white-space: normal; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-description { margin-bottom: 25px; font-size: 16px; line-height: 1.65; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-button { min-height: 52px; padding-inline: 20px; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-visual {
    min-height: 720px;
    aspect-ratio: auto;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    border-radius: 26px;
  }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-map { display: none; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-visual::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 154px;
    bottom: 100px;
    width: 2px;
    translate: -50% 0;
    background: linear-gradient(#2166e8, #ffc526 48%, #2166e8);
    opacity: .62;
    z-index: 0;
  }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-hub,:where(html[data-page="contact"]) 
  #contact-hero .contact-v2-node,:where(html[data-page="contact"]) 
  #contact-hero .contact-v2-annotation { position: relative; inset: auto; translate: none; rotate: none; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-hub { order: 0; width: 166px; margin: 4px auto 14px; border-width: 6px; padding: 20px; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-hub strong { font-size: 21px; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-hub small { font-size: 8px; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-node { width: 100%; min-height: 128px; grid-template-columns: 58px 1fr; padding: 18px; z-index: 2; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-node-icon { width: 58px; height: 58px; font-size: 27px; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-node-one { order: 1; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-node-two { order: 2; grid-template-columns: 58px 1fr; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-node-three { order: 3; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-node h3 { font-size: 19px; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-node p { font-size: 13px; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-annotation { display: none; }
}

@media (max-width: 520px) {
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-actions { display: grid; grid-template-columns: 1fr; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-button { width: 100%; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-visual { min-height: 730px; }
}

@media (max-width: 360px) {
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-container { padding-inline: 16px; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-title { font-size: 28px; letter-spacing: -.042em; }
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-visual { padding-inline: 12px; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-node { grid-template-columns: 50px 1fr; gap: 12px; padding: 15px 13px; }
  :where(html[data-page="contact"]) #contact-hero .contact-v2-node-icon,:where(html[data-page="contact"]) 
  #contact-hero .contact-v2-node-two .contact-v2-node-icon { width: 50px; height: 50px; font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="contact"]) #contact-hero .contact-hero-v2-button,:where(html[data-page="contact"]) 
  #contact-hero .contact-v2-node { transition: none; }
}

/* contact-office-upgrade.css */
@media (min-width: 1025px) {
  :where(html[data-page="contact"]) #office-location.contact-office-section {
    padding: 104px 0 112px;
    background:
      radial-gradient(circle at 11% 22%, rgba(255, 197, 38, .10), transparent 24%),
      #fbf7ef;
  }

  :where(html[data-page="contact"]) #office-location > .contact-container {
    width: 100%;
    max-width: 1360px;
    padding-inline: 32px;
  }

  :where(html[data-page="contact"]) #office-location .contact-section-title {
    max-width: 720px;
    margin-bottom: 14px;
    font-size: clamp(44px, 4vw, 58px);
    line-height: 1.02;
    letter-spacing: -.048em;
  }

  :where(html[data-page="contact"]) #office-location .contact-section-desc {
    max-width: 720px;
    font-size: 17px;
  }

  :where(html[data-page="contact"]) #office-location .contact-office-grid {
    grid-template-columns: minmax(390px, .78fr) minmax(0, 1.42fr);
    gap: 24px;
    margin-top: 44px;
  }

  :where(html[data-page="contact"]) #office-location .contact-office-card {
    position: relative;
    isolation: isolate;
    min-height: 480px;
    padding: 40px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 28px;
    color: #fff;
    background:
      radial-gradient(circle at 84% 14%, rgba(46, 116, 183, .35), transparent 34%),
      #082d57;
    box-shadow: 0 24px 58px rgba(8, 45, 87, .18);
  }

  :where(html[data-page="contact"]) #office-location .contact-office-card::before {
    content: 'PUNE';
    position: absolute;
    z-index: -1;
    right: -18px;
    top: 79px;
    color: rgba(255, 255, 255, .045);
    font: 800 112px/1 var(--font-heading, 'Outfit', sans-serif);
    letter-spacing: -.07em;
    pointer-events: none;
  }

  :where(html[data-page="contact"]) #office-location .contact-office-card::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 310px;
    height: 310px;
    right: -135px;
    bottom: -165px;
    border: 1px solid rgba(255, 197, 38, .22);
    border-radius: 50%;
    box-shadow:
      0 0 0 42px rgba(255, 197, 38, .035),
      0 0 0 84px rgba(255, 197, 38, .025);
    pointer-events: none;
  }

  :where(html[data-page="contact"]) #office-location .contact-office-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 70px;
    border: 1px solid rgba(255, 197, 38, .3);
    border-radius: 19px;
    color: #ffc526;
    background: rgba(255, 197, 38, .11);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
    font-size: 29px;
  }

  :where(html[data-page="contact"]) #office-location .contact-office-card h4 {
    max-width: 340px;
    margin-bottom: 13px;
    color: #fff;
    font-size: clamp(34px, 3vw, 45px);
    line-height: 1.02;
    letter-spacing: -.045em;
  }

  :where(html[data-page="contact"]) #office-location .contact-office-company {
    margin-bottom: 10px;
    color: #ffc526;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  :where(html[data-page="contact"]) #office-location .contact-office-address {
    max-width: 280px;
    margin: 0;
    color: #c8d8ea;
    font-size: 16px;
    line-height: 1.65;
  }

  :where(html[data-page="contact"]) #office-location .contact-office-card .contact-btn {
    position: relative;
    z-index: 2;
    align-self: flex-start !important;
    min-width: 190px;
    min-height: 54px;
    border-color: #ffc526;
    color: #102039;
    background: #ffc526;
    box-shadow: 0 12px 28px rgba(245, 169, 22, .24);
  }

  :where(html[data-page="contact"]) #office-location .contact-office-card .contact-btn:hover {
    border-color: #ffd253;
    background: #ffd253;
    box-shadow: 0 15px 32px rgba(245, 169, 22, .31);
  }

  :where(html[data-page="contact"]) #office-location .contact-map-frame {
    height: 480px;
    border: 1px solid #dce3eb;
    border-radius: 28px;
    box-shadow: 0 24px 58px rgba(16, 32, 57, .10);
  }

  :where(html[data-page="contact"]) #office-location .contact-map-frame::after {
    content: 'Viman Nagar · Pune';
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 2;
    padding: 11px 16px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 999px;
    color: #102039;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 10px 26px rgba(16, 32, 57, .13);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font: 800 13px/1 var(--font-body, 'Plus Jakarta Sans', sans-serif);
    pointer-events: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :where(html[data-page="contact"]) #office-location .contact-map-frame::after {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* page-container-rhythm.css */
/* Shared page rhythm: mirrors the Industries page container at every breakpoint. */
:root:where([data-page="contact"]) {
  --kx-page-container: 1240px;
  --kx-page-gutter: 24px;
}

:where(html[data-page="contact"]) .shared-kx-header > .shared-kx-container,:where(html[data-page="contact"]) 
.ux-page .shared-kx-container,:where(html[data-page="contact"]) 
main > section > :is(
  .container,
  .su-container,
  .impact-container,
  .origin-desktop-view,
  .phil-container,
  .journey-tl-container,
  .careersHero-container,
  .chFeels-container,
  .contact-hero-v2-container,
  .contact-container,
  .taste-inner,
  .ai-container,
  .rv-container,
  .wd-container,
  .wd-tech-container,
  .wd-testi-faq-container,
  .kx-ah-container,
  .ma-container,
  .kats-container,
  .cloud-hero-container,
  .kx-container
),:where(html[data-page="contact"]) 
body > section > :is(
  .container,
  .contact-container,
  .cloud-hero-container,
  .kx-container
) {
  width: 100% !important;
  max-width: var(--kx-page-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--kx-page-gutter) !important;
  padding-right: var(--kx-page-gutter) !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  :root:where([data-page="contact"]) { --kx-page-gutter: 16px; }
}

/* This section previously put its gutter on the full-width background itself. */
@media (max-width: 1023px) {
  :where(html[data-page="contact"]) .wd-tech-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}



/* PAGE team */
/* shared-chrome.css */
@scope (:where(html[data-page="team"]) .shared-kx-header,:where(html[data-page="team"])  .shared-kx-mobile-drawer,:where(html[data-page="team"])  .shared-site-footer) {
:scope { --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif; --container-max: 1240px; --color-yellow: #F8C72E; --color-primary-navy: #14243D; --transition: all .2s ease; font-family: var(--font-body, 'Plus Jakarta Sans', 'Inter', sans-serif); line-height: 1.5; }
:where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(a) { text-decoration: none; }



:scope {
  --kx-navy: #13243D;
  --kx-deep-navy: #0D1B31;
  --kx-secondary-navy: #1B3152;
  --kx-gold: #F9BE22;
  --kx-gold-hover: #FFCA3A;
  --kx-green: #00D084;
  --kx-cyan: #52BCEB;
  --kx-soft-cyan: #EAF8FF;
  --kx-soft-gold: #FFF8DD;
  --kx-soft-green: #E8F8F0;
  --kx-white: #FFFFFF;
  --kx-gray: #F4F6FA;
  --kx-pill-bg: #EDF3FA;
  --kx-border: #E8EDF4;
  --kx-border-subtle: #F1F4F9;
  --kx-text-dark: #13243D;
  --kx-text-muted: #65748B;
  --kx-radius-pill: 9999px;
  --kx-shadow-gold: 0 8px 24px rgba(249, 190, 34, 0.28);
}


:scope.shared-kx-header,
.shared-kx-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: 1px solid rgba(232, 237, 244, 0.8);
  transition: all 0.25s ease;
}

:scope.shared-kx-header.scrolled,
.shared-kx-header.scrolled {
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

:scope.shared-kx-header.menu-open,
.shared-kx-header.menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  box-shadow: 0 10px 30px rgba(19, 36, 61, 0.08);
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
}

.shared-kx-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .shared-kx-container {
    padding: 0 16px;
  }
}

.shared-kx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
}


.shared-kx-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0F1D32;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

.shared-kx-logo-tech {
  color: #00D084;
  font-weight: 800;
}


.shared-kx-nav-menu {
  display: flex;
  align-items: center;
  background: #EDF3FA;
  padding: 4px 6px;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(220, 230, 242, 0.85);
  box-shadow: inset 0 1px 2px rgba(19, 36, 61, 0.02);
  flex-shrink: 1;
}

.shared-kx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shared-kx-nav-item {
  position: relative;
}

.shared-kx-nav-link {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--kx-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-nav-link:hover {
  color: #0F1D32;
  background: rgba(255, 255, 255, 0.7);
}

.shared-kx-nav-link.active {
  color: #0F1D32 !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(19, 36, 61, 0.08) !important;
}

.shared-kx-nav-link::after,
.shared-kx-nav-link.active::after {
  display: none !important;
}

.shared-kx-chevron-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  stroke: currentColor;
}


.shared-kx-dropdown-wrapper {
  position: relative;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-chevron-icon,
.shared-kx-dropdown-wrapper.open .shared-kx-chevron-icon {
  transform: rotate(180deg);
}

.shared-kx-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 250px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(19, 36, 61, 0.12), 0 4px 12px rgba(19, 36, 61, 0.04);
  border: 1px solid var(--kx-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  pointer-events: none;
  z-index: 100;
}

/* Invisible hover bridge to eliminate the 8px cursor gap */
.shared-kx-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
  background: transparent;
}

.shared-kx-dropdown-wrapper:hover .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu,
.shared-kx-dropdown-wrapper.open .shared-kx-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.shared-kx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #13243D;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.shared-kx-dropdown-item:hover {
  background: #F0F7FF;
  color: #0F1D32;
}


.shared-kx-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.shared-kx-btn-pill-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0F1D32;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.shared-kx-btn-pill-navy:hover {
  background: #1B2E4B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 29, 50, 0.25);
}

.shared-kx-btn-pill-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F9BE22;
  color: #0F1D32;
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(249, 190, 34, 0.3);
}

.shared-kx-btn-pill-gold:hover {
  background: #FFCA3A;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 190, 34, 0.45);
}

.shared-kx-btn-pill-navy:active,
.shared-kx-btn-pill-gold:active,
.kx-modal-submit:active {
  transform: translateY(0) scale(0.98);
}


.shared-kx-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #0F1D32;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.shared-kx-mobile-toggle:hover {
  background: #EDF3FA;
}

@media (max-width: 1240px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-navy {
    display: none;
  }
}

@media (max-width: 1100px) {
  .shared-kx-nav-menu {
    display: none;
  }

  .shared-kx-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .shared-kx-nav-inner {
    height: 70px;
    gap: 8px;
  }
  .shared-kx-logo {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .shared-kx-logo {
    font-size: 18px;
  }
  .shared-kx-nav-actions {
    gap: 6px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 7px 11px;
    font-size: 11.5px;
    gap: 4px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold svg {
    display: none;
  }
  .shared-kx-mobile-toggle {
    padding: 6px;
  }
}

@media (max-width: 360px) {
  .shared-kx-container {
    padding: 0 6px;
  }
  .shared-kx-nav-inner {
    gap: 2px;
  }
  .shared-kx-logo {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  .shared-kx-nav-actions {
    gap: 2px;
  }
  .shared-kx-nav-actions .shared-kx-btn-pill-gold {
    padding: 5px 6px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  .shared-kx-mobile-toggle {
    padding: 2px;
  }
}


:scope.shared-kx-mobile-drawer,
.shared-kx-mobile-drawer {
  position: fixed;
  top: var(--header-height, 78px);
  left: 0;
  width: 100%;
  height: calc(100dvh - var(--header-height, 78px));
  background: #FFFFFF !important;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 40px rgba(19, 36, 61, 0.12);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :scope.shared-kx-mobile-drawer,
  .shared-kx-mobile-drawer {
    top: var(--header-height, 70px);
    height: calc(100dvh - var(--header-height, 70px));
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

:scope.shared-kx-mobile-drawer.open,
:scope.shared-kx-mobile-drawer.active,
.shared-kx-mobile-drawer.open,
.shared-kx-mobile-drawer.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  pointer-events: auto;
}

.shared-kx-mobile-nav-link {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 650;
  color: #14243D;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 12px;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.shared-kx-mobile-nav-link:hover {
  background: #F8FAFC;
  color: #0E1B2F;
}

.shared-kx-mobile-nav-link.active {
  background: #F4F7FB !important;
  color: #0E1B2F !important;
  font-weight: 750 !important;
  border-left: 3px solid #F8C72E;
  padding-left: 13px;
}

.shared-kx-mobile-nav-link.shared-sub {
  margin-left: 12px;
  margin-right: 4px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 550;
  color: #556987;
  background: #F8FAFC;
  border-radius: 10px;
  border-left: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.shared-kx-mobile-nav-link.shared-sub::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94A3B8;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.shared-kx-mobile-nav-link.shared-sub:hover,
.shared-kx-mobile-nav-link.shared-sub.active {
  background: #EDF4FB;
  color: #0E1B2F;
  border-left-color: #F8C72E;
}

.shared-kx-mobile-nav-link.shared-sub.active::before {
  background: #F8C72E;
  transform: scale(1.4);
}

.shared-kx-mobile-drawer-footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #EEF2F6;
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-gold {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(248, 199, 46, 0.3);
}

.shared-kx-mobile-drawer-footer .shared-kx-btn-pill-navy {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
  border-radius: 9999px;
}


.kx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 49, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  padding: 20px;
}

.kx-modal-overlay.active,
.kx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.kx-modal-dialog {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 27, 49, 0.25);
  border: 1px solid var(--kx-border);
  overflow: hidden;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.kx-modal-overlay.active .kx-modal-dialog,
.kx-modal-overlay.is-open .kx-modal-dialog {
  transform: scale(1) translateY(0);
}

.kx-modal-header {
  padding: 28px 32px 16px;
  position: relative;
}

.kx-modal-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--kx-navy);
  margin: 0 0 6px;
}

.kx-modal-subtitle {
  font-size: 14px;
  color: var(--kx-text-muted);
  margin: 0;
}

.kx-modal-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: var(--kx-gray);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-navy);
  transition: background 0.2s ease, transform 0.2s ease;
}

.kx-modal-close:hover {
  background: #E2E8F0;
  transform: rotate(90deg);
}

.kx-modal-body {
  padding: 0 32px 32px;
}

.kx-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx-form-label {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--kx-navy);
}

.kx-form-input,
.kx-form-textarea,
.kx-form-select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--kx-border);
  background: var(--kx-gray);
  color: var(--kx-navy);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.kx-form-input:focus,
.kx-form-textarea:focus,
.kx-form-select:focus {
  outline: none;
  border-color: var(--kx-navy);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(19, 36, 61, 0.08);
}

.kx-modal-submit {
  background: var(--kx-navy);
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--kx-radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.kx-modal-submit:hover {
  background: var(--kx-deep-navy);
  transform: translateY(-1px);
}


:scope.shared-site-footer {
  background: #14243D;
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(48px, 6vw, 68px) 0 clamp(24px, 4vw, 36px);
  position: relative;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

:scope.shared-site-footer .shared-container,
:scope.shared-site-footer .shared-kx-container {
  width: 100%;
  max-width: var(--container-max, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 24px) !important;
  padding-right: clamp(16px, 4vw, 24px) !important;
  box-sizing: border-box !important;
}

.shared-footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand {
  min-width: 0;
}

.shared-footer-brand .shared-brand-logo {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
}

.shared-footer-brand .shared-brand-logo .shared-dot {
  color: #2FB7A7;
}

.shared-footer-brand p {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  max-width: 290px;
}

.shared-footer-col h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.shared-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.shared-footer-links a {
  font-size: 0.835rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.shared-footer-links a:hover {
  color: var(--color-yellow);
  transform: translateX(3px);
}

.shared-footer-follow-wrapper {
  margin-top: 24px;
}

.shared-footer-follow-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.shared-footer-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.shared-social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 17px;
  text-decoration: none;
  transition: var(--transition);
}

.shared-social-icon-btn:hover {
  background: var(--color-yellow);
  color: var(--color-primary-navy);
  border-color: var(--color-yellow);
  transform: translateY(-2px);
}

.shared-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  flex-wrap: wrap;
  gap: 12px;
}


@media (max-width: 1180px) {
  .nav-link {
    padding: 6px 9px;
    font-size: 0.82rem;
  }
  .btn-nav-phone {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}


@media (max-width: 1024px) {
  :scope {
    --header-height: 66px;
  }
  .nav-menu-wrapper,
  .btn-phone-desktop {
    display: none !important;
  }
  .hamburger-btn {
    display: flex !important;
  }
  .btn-cta-desktop {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .shared-footer-brand p {
    max-width: 100%;
  }
}


@media (max-width: 768px) {
  :scope {
    --header-height: 62px;
  }
  .btn-cta-desktop {
    display: none !important;
  }
  .shared-site-footer {
    padding: 46px 0 24px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding-bottom: 28px;
  }
}


@media (max-width: 540px) {
  :scope {
    --header-height: 58px;
  }
  .nav-container {
    padding: 0 14px;
  }
  .hamburger-btn {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  .hamburger-btn span {
    width: 20px;
  }
  .shared-footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .shared-footer-brand {
    grid-column: 1 / -1;
  }
  .shared-footer-col-company {
    grid-column: 1;
  }
  .shared-footer-col-solutions {
    grid-column: 2;
  }
  .shared-footer-col-resources {
    grid-column: 1 / -1;
  }
  .shared-footer-col h5 {
    margin-bottom: 12px;
  }
  .shared-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


@media (max-width: 360px) {
  .shared-brand-logo {
    font-size: 1.15rem;
  }
  .mobile-nav-drawer {
    width: 90vw;
    padding: 18px 14px 22px;
  }
  .mobile-nav-link {
    font-size: 0.95rem;
  }
}
  
}
:where(html[data-page="team"]) .shared-kx-mobile-drawer { visibility: hidden; }
:where(html[data-page="team"]) .shared-kx-mobile-drawer.open { visibility: visible; }
:where(html[data-page="team"]) .shared-kx-dropdown-wrapper:focus-within .shared-kx-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  :where(html[data-page="team"]) .shared-kx-btn-pill-navy:active,:where(html[data-page="team"]) 
  .shared-kx-btn-pill-gold:active,:where(html[data-page="team"]) 
  .kx-modal-submit:active { transform: none; }
}

/* team.html embedded 2 */

    /* Container Rhythm Lock (AGENTS.md §3): header container matches Team .container (1240px/24px). */
    :where(html[data-page="team"]) .shared-kx-header > .shared-kx-container{width:100% !important;max-width:1240px !important;margin-inline:auto !important;padding-inline:24px !important;box-sizing:border-box !important}
    @media (max-width:768px){:where(html[data-page="team"]) .shared-kx-header > .shared-kx-container{padding-inline:16px !important}}
  
/* team.html embedded 3 */

    :root:where([data-page="team"]){
      color-scheme:light only;
      --canvas:#fffdf8;--canvas-warm:#fbf7ee;--canvas-cream:#f8f1e4;--surface:#fff;--surface-warm:#fffcf6;
      --navy:#082b55;--navy-deep:#061c39;--navy-dark:#04172e;--text:#071f42;--body:#506d8b;--soft:#7489a0;
      --gold:#ffc526;--gold-strong:#f0a700;--gold-soft:#fff1c4;--blue:#2877f5;--blue-soft:#e6f0ff;
      --green:#12b979;--green-soft:#dff7ed;--pink:#ee4b82;--pink-soft:#ffe6ef;--purple:#8654f6;--purple-soft:#eee7ff;
      --border:rgba(8,43,85,.09);--border-strong:rgba(8,43,85,.15);--shadow:0 18px 45px rgba(16,39,71,.09);
      --page-gutter:56px;
      --container:min(1500px,calc(100% - (2 * var(--page-gutter))));
    }
    :where(html[data-page="team"]) *{box-sizing:border-box}
    html:where([data-page="team"]){scroll-behavior:smooth;overflow-x:hidden}
    :where(html[data-page="team"]) body{margin:0;background:var(--canvas);color:var(--text);font-family:"DM Sans",sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
    :where(html[data-page="team"]) body.nav-open{overflow:hidden}
    :where(html[data-page="team"]) a{color:inherit;text-decoration:none}
    :where(html[data-page="team"]) button,:where(html[data-page="team"]) a{font:inherit}
    :where(html[data-page="team"]) button:focus-visible,:where(html[data-page="team"]) a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
    :where(html[data-page="team"]) svg{display:block}
    :where(html[data-page="team"]) .container{width:var(--container);max-width:1500px;margin-inline:auto;box-sizing:border-box}
    :where(html[data-page="team"]) .site-nav{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
    :where(html[data-page="team"]) .nav-inner{height:78px;display:flex;justify-content:flex-end;align-items:center;gap:28px;width:var(--container);max-width:1500px;margin-inline:auto;box-sizing:border-box}
    :where(html[data-page="team"]) .site-brand{margin-right:auto;font:800 18px/1 "Manrope",sans-serif;letter-spacing:-.045em;color:var(--navy);white-space:nowrap}:where(html[data-page="team"]) .site-brand span{color:var(--green)}
    :where(html[data-page="team"]) .nav-links{display:flex;align-items:center;gap:29px;font-size:13px;font-weight:700;color:var(--navy)}
    :where(html[data-page="team"]) .nav-links a{padding-block:10px;position:relative}
    :where(html[data-page="team"]) .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:2px;background:var(--gold);transition:right .25s ease}
    :where(html[data-page="team"]) .nav-links a:hover::after{right:0}
    :where(html[data-page="team"]) .nav-actions{display:flex;gap:10px}
    :where(html[data-page="team"]) .btn{min-height:48px;padding:0 23px;border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:800;white-space:nowrap;transition:transform .2s ease,filter .2s ease;cursor:pointer}
    :where(html[data-page="team"]) .btn:hover{transform:translateY(-1px);filter:brightness(.98)}
    :where(html[data-page="team"]) .btn:active{transform:translateY(0) scale(.98)}
    :where(html[data-page="team"]) .btn-dark{background:var(--navy-deep);color:#fff}:where(html[data-page="team"]) .btn-gold{background:var(--gold);color:#071f42;box-shadow:0 12px 25px rgba(255,197,38,.22)}
    :where(html[data-page="team"]) .icon{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
    :where(html[data-page="team"]) .menu-btn{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);align-items:center;justify-content:center;cursor:pointer}
    :where(html[data-page="team"]) .mobile-menu{display:none;position:fixed;left:0;right:0;top:78px;z-index:200;background:var(--surface);border-bottom:1px solid var(--border);padding:18px var(--page-gutter) 26px;box-shadow:var(--shadow)}
    :where(html[data-page="team"]) .mobile-menu.is-open{display:grid;gap:4px}:where(html[data-page="team"]) .mobile-menu a{min-height:46px;display:flex;align-items:center;padding:0 10px;border-bottom:1px solid var(--border);font-weight:700}
    :where(html[data-page="team"]) .mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
    :where(html[data-page="team"]) .hero{position:relative;padding:62px 0 76px;isolation:isolate;overflow:hidden}
    :where(html[data-page="team"]) .hero::before,:where(html[data-page="team"]) .hero::after{content:"";position:absolute;z-index:-2;width:380px;height:380px;border-radius:50%;background:var(--gold-soft);opacity:.55;filter:saturate(.8)}
    :where(html[data-page="team"]) .hero::before{left:-210px;top:-130px}:where(html[data-page="team"]) .hero::after{right:-230px;top:-80px}
    :where(html[data-page="team"]) .dot-field{position:absolute;z-index:-1;right:3%;top:120px;width:45%;height:68%;opacity:.55;background-image:radial-gradient(circle,color-mix(in srgb,var(--blue) 30%,transparent) 1px,transparent 1.2px);background-size:20px 20px;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
    :where(html[data-page="team"]) .hero-copy{text-align:center;max-width:900px;margin:auto;position:relative}
    :where(html[data-page="team"]) .eyebrow{display:flex;align-items:center;gap:10px;font:800 11px/1 "Manrope",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--body);margin-bottom:16px}
    :where(html[data-page="team"]) .eyebrow.center{justify-content:center}:where(html[data-page="team"]) .eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 16%,transparent)}
    :where(html[data-page="team"]) h1,:where(html[data-page="team"]) h2,:where(html[data-page="team"]) h3,:where(html[data-page="team"]) p{margin-top:0}
    :where(html[data-page="team"]) h1{font:800 clamp(58px,6.4vw,92px)/.92 "Manrope",sans-serif;letter-spacing:-.062em;margin:0}
    :where(html[data-page="team"]) .gold-line{display:block;color:var(--gold-strong);position:relative;width:max-content;margin:4px auto 0;padding-bottom:9px}
    :where(html[data-page="team"]) .gold-line::after{content:"";position:absolute;left:1%;right:-1%;height:10px;bottom:-8px;border-top:4px solid var(--gold-strong);border-radius:50%;transform:rotate(-1.5deg)}
    :where(html[data-page="team"]) .hero-copy>p{font-size:clamp(17px,1.35vw,21px);line-height:1.6;max-width:700px;margin:27px auto 26px;color:var(--body)}
    :where(html[data-page="team"]) .annotation{position:absolute;font:600 24px/1.04 "Caveat",cursive;color:var(--navy);white-space:pre-line;z-index:8}
    :where(html[data-page="team"]) .annotation.left{left:-16%;top:70px;transform:rotate(-6deg)}:where(html[data-page="team"]) .annotation.right{right:-17%;top:54px;transform:rotate(5deg)}
    :where(html[data-page="team"]) .scribble-arrow{width:58px;height:42px;margin-top:7px}:where(html[data-page="team"]) .annotation.left .scribble-arrow{margin-left:50px}:where(html[data-page="team"]) .annotation.right .scribble-arrow{margin-left:12px;transform:scaleX(-1)}
    :where(html[data-page="team"]) .founder-stage{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:72px;position:relative;align-items:start}
    :where(html[data-page="team"]) .founder{position:relative;min-height:580px;animation:page-team-founder-in .65s ease both}:where(html[data-page="team"]) .founder:nth-child(2){animation-delay:.08s}
    :where(html[data-page="team"]) .portrait-wrap{position:relative;width:78%;height:500px;margin-inline:auto;border-radius:38% 42% 22px 22px;background:var(--navy);overflow:hidden;box-shadow:0 24px 55px rgba(16,39,71,.14)}
    :where(html[data-page="team"]) .founder:first-child .portrait-wrap{transform:rotate(-1.5deg)}:where(html[data-page="team"]) .founder:nth-child(2) .portrait-wrap{transform:rotate(1.5deg)}
    :where(html[data-page="team"]) .portrait-wrap::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 60% 20%,rgba(255,255,255,.16),transparent 35%),linear-gradient(145deg,color-mix(in srgb,var(--navy) 76%,#2f76bc),var(--navy-deep))}
    :where(html[data-page="team"]) .founder-portrait{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;object-fit:cover;object-position:center top}
    :where(html[data-page="team"]) .portrait-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;color:rgba(255,255,255,.95);padding-bottom:40px;text-align:center}
    :where(html[data-page="team"]) .silhouette{position:relative;width:210px;height:330px}
    :where(html[data-page="team"]) .silhouette::before{content:"";position:absolute;left:65px;top:16px;width:82px;height:98px;border-radius:47% 47% 45% 45%;background:#e7b993;box-shadow:inset -12px -5px 0 rgba(62,26,12,.13)}
    :where(html[data-page="team"]) .silhouette::after{content:"";position:absolute;left:8px;bottom:0;width:196px;height:225px;border-radius:92px 92px 18px 18px;background:linear-gradient(90deg,#081827,#183654 55%,#071421);clip-path:polygon(11% 100%,0 43%,20% 18%,37% 8%,63% 8%,80% 18%,100% 43%,89% 100%)}
    :where(html[data-page="team"]) .founder:nth-child(2) .silhouette::after{background:linear-gradient(90deg,#111820,#26384d 55%,#0a121d)}
    :where(html[data-page="team"]) .placeholder-label{position:absolute;right:18px;top:22px;font:700 10px/1.2 "Manrope";letter-spacing:.12em;text-transform:uppercase;padding:8px 10px;border:1px dashed rgba(255,255,255,.55);background:rgba(4,29,56,.55);border-radius:8px}
    :where(html[data-page="team"]) .profile-card{position:absolute;z-index:7;top:135px;width:280px;background:color-mix(in srgb,var(--surface) 97%,transparent);border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}
    :where(html[data-page="team"]) .founder:first-child .profile-card{left:0}:where(html[data-page="team"]) .founder:nth-child(2) .profile-card{right:0}
    :where(html[data-page="team"]) .role{font:800 10px/1.2 "Manrope";letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:11px}:where(html[data-page="team"]) .founder:first-child .role{color:var(--gold-strong)}
    :where(html[data-page="team"]) .profile-card h3{font:800 clamp(27px,2vw,34px)/1 "Manrope";letter-spacing:-.045em;margin-bottom:8px}
    :where(html[data-page="team"]) .expertise{font-size:13px;font-weight:700;line-height:1.4;color:var(--text);margin-bottom:14px}
    :where(html[data-page="team"]) .bio{font-size:13.5px;line-height:1.55;color:var(--body);margin:0}
    :where(html[data-page="team"]) .signature{position:absolute;bottom:4px;font:600 31px/.76 "Caveat",cursive;color:var(--navy);white-space:pre-line}:where(html[data-page="team"]) .founder:first-child .signature{left:40px;transform:rotate(-7deg)}:where(html[data-page="team"]) .founder:nth-child(2) .signature{right:38px;transform:rotate(6deg)}
    :where(html[data-page="team"]) .authority{position:relative;z-index:9;margin:-12px auto 0;max-width:970px;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--border);border-radius:19px;box-shadow:0 14px 35px rgba(16,39,71,.07);padding:16px 18px}
    :where(html[data-page="team"]) .stat{min-width:0;display:grid;grid-template-columns:46px 1fr;align-items:center;gap:12px;padding:6px 18px}:where(html[data-page="team"]) .stat+.stat{border-left:1px solid var(--border)}
    :where(html[data-page="team"]) .stat-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--blue);background:var(--blue-soft)}:where(html[data-page="team"]) .stat:nth-child(2) .stat-icon{color:var(--pink);background:var(--pink-soft)}:where(html[data-page="team"]) .stat:nth-child(3) .stat-icon{color:var(--gold-strong);background:var(--gold-soft)}:where(html[data-page="team"]) .stat:nth-child(4) .stat-icon{color:var(--green);background:var(--green-soft)}
    :where(html[data-page="team"]) .stat strong{display:block;font:800 19px/1 "Manrope"}:where(html[data-page="team"]) .stat span{display:block;font-size:11px;line-height:1.3;color:var(--body);margin-top:4px}
    :where(html[data-page="team"]) .section{padding:100px 0}:where(html[data-page="team"]) .section-head{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end}
    :where(html[data-page="team"]) h2{font:800 clamp(40px,4.1vw,62px)/.98 "Manrope";letter-spacing:-.05em;margin-bottom:0}:where(html[data-page="team"]) .accent{color:var(--gold-strong)}
    :where(html[data-page="team"]) .section-copy{font-size:17px;line-height:1.65;color:var(--body);max-width:620px;margin:0}
    :where(html[data-page="team"]) .strengths{background:var(--canvas)}
    :where(html[data-page="team"]) .strength-grid{margin-top:58px;display:grid;grid-template-columns:.72fr 1.5fr .72fr;gap:26px;align-items:center}
    :where(html[data-page="team"]) .cap-list{background:var(--surface);border:1px solid var(--border);border-radius:17px;padding:21px;box-shadow:0 8px 25px rgba(16,39,71,.035)}
    :where(html[data-page="team"]) .cap-list ul{list-style:none;margin:0;padding:0}:where(html[data-page="team"]) .cap-list li{display:flex;gap:11px;align-items:center;font-size:14px;font-weight:600;min-height:39px;color:var(--body)}
    :where(html[data-page="team"]) .cap-list li::before{content:"";width:7px;height:7px;border:2px solid var(--gold-strong);border-radius:50%;flex:none}:where(html[data-page="team"]) .cap-list.blue li::before{border-color:var(--blue)}
    :where(html[data-page="team"]) .diagram{height:370px;position:relative;display:flex;align-items:center;justify-content:center}
    :where(html[data-page="team"]) .circle{position:absolute;border-radius:50%;display:grid;place-items:center;text-align:center;font:800 18px/1.12 "Manrope";letter-spacing:-.03em}
    :where(html[data-page="team"]) .circle.left{width:245px;height:245px;left:4%;background:color-mix(in srgb,var(--gold) 13%,var(--surface));border:32px solid color-mix(in srgb,var(--gold) 18%,transparent);color:var(--text)}
    :where(html[data-page="team"]) .circle.right{width:245px;height:245px;right:4%;background:color-mix(in srgb,var(--blue) 10%,var(--surface));border:32px solid color-mix(in srgb,var(--blue) 15%,transparent);color:var(--text)}
    :where(html[data-page="team"]) .circle.center{width:164px;height:164px;z-index:3;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);font-size:15px}
    :where(html[data-page="team"]) .circle svg{width:32px;height:32px;margin:0 auto 10px}:where(html[data-page="team"]) .circle.left svg{color:var(--gold-strong)}:where(html[data-page="team"]) .circle.right svg{color:var(--blue)}
    :where(html[data-page="team"]) .diagram-note{position:absolute;bottom:2px;font:600 21px/.95 "Caveat",cursive;color:var(--navy);white-space:pre-line}:where(html[data-page="team"]) .diagram-note.left{left:8%;transform:rotate(-4deg)}:where(html[data-page="team"]) .diagram-note.right{right:8%;text-align:right;transform:rotate(4deg)}
    :where(html[data-page="team"]) .journey{background:var(--surface)}:where(html[data-page="team"]) .journey-layout{display:grid;grid-template-columns:.55fr 1.45fr;gap:78px;align-items:start}:where(html[data-page="team"]) .journey-intro .section-copy{font-size:15px;margin-top:24px}
    :where(html[data-page="team"]) .timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding-top:21px}:where(html[data-page="team"]) .timeline::before{content:"";position:absolute;left:24px;right:24px;top:43px;height:2px;background:linear-gradient(90deg,var(--gold),var(--purple),var(--green),var(--pink))}
    :where(html[data-page="team"]) .step{position:relative;z-index:1}:where(html[data-page="team"]) .step-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold-strong);border:5px solid var(--surface);box-shadow:0 0 0 1px var(--border);margin-bottom:21px}:where(html[data-page="team"]) .step:nth-child(2) .step-icon{background:var(--purple-soft);color:var(--purple)}:where(html[data-page="team"]) .step:nth-child(3) .step-icon{background:var(--green-soft);color:var(--green)}:where(html[data-page="team"]) .step:nth-child(4) .step-icon{background:var(--pink-soft);color:var(--pink)}
    :where(html[data-page="team"]) .step-number{font:800 10px/1 "Manrope";letter-spacing:.1em}:where(html[data-page="team"]) .step h3{font:800 16px/1.2 "Manrope";letter-spacing:-.02em;margin:7px 0 10px}:where(html[data-page="team"]) .step p{font-size:13px;line-height:1.55;color:var(--body);margin:0}
    :where(html[data-page="team"]) .values{background:var(--canvas-warm)}:where(html[data-page="team"]) .values-layout{display:grid;grid-template-columns:.55fr 1.45fr;gap:70px;align-items:center}:where(html[data-page="team"]) .value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}:where(html[data-page="team"]) .value-card{background:var(--surface);border:1px solid var(--border);border-radius:17px;min-height:210px;padding:25px 20px;transition:transform .2s ease}:where(html[data-page="team"]) .value-card:hover{transform:translateY(-2px)}
    :where(html[data-page="team"]) .value-card .icon{width:34px;height:34px;color:var(--blue);margin-bottom:26px}:where(html[data-page="team"]) .value-card:nth-child(2) .icon{color:var(--purple)}:where(html[data-page="team"]) .value-card:nth-child(3) .icon{color:var(--gold-strong)}:where(html[data-page="team"]) .value-card:nth-child(4) .icon{color:var(--pink)}
    :where(html[data-page="team"]) .value-card h3{font:800 15px/1.2 "Manrope";margin-bottom:10px}:where(html[data-page="team"]) .value-card p{font-size:13px;line-height:1.5;color:var(--body);margin:0}
    :where(html[data-page="team"]) .cta{position:relative;overflow:hidden;background:linear-gradient(135deg,#041d38,#082b55);color:#fff;padding:78px 0;text-align:center}:where(html[data-page="team"]) .cta::before{content:"";position:absolute;inset:0;opacity:.16;background-image:radial-gradient(circle,#7db6ed 1px,transparent 1.2px);background-size:20px 20px;mask-image:linear-gradient(90deg,#000,transparent 35%,transparent 65%,#000)}
    :where(html[data-page="team"]) .cta .container{position:relative}:where(html[data-page="team"]) .cta .eyebrow{color:rgba(255,255,255,.74)}:where(html[data-page="team"]) .cta h2{font-size:clamp(38px,4.2vw,60px);max-width:800px;margin:0 auto}:where(html[data-page="team"]) .cta p{max-width:660px;margin:20px auto 27px;color:rgba(255,255,255,.74);font-size:16px;line-height:1.6}:where(html[data-page="team"]) .cta .annotation{top:30px;color:#fff;font-size:25px}:where(html[data-page="team"]) .cta .annotation.left{left:4%}:where(html[data-page="team"]) .cta .annotation.right{right:4%;left:auto;text-align:right}
    :where(html[data-page="team"]) footer#site-footer-legacy{background:#04172e;color:rgba(255,255,255,.72);padding:58px 0 27px}:where(html[data-page="team"]) .footer-grid{display:grid;grid-template-columns:1.35fr .8fr 1fr 1fr .85fr;gap:38px}:where(html[data-page="team"]) .brand-statement{font:800 18px/1.1 "Manrope";color:#fff;letter-spacing:-.03em}:where(html[data-page="team"]) .brand-statement span{color:#38dba2}:where(html[data-page="team"]) .brand-tagline{font-size:12px;margin-top:9px;color:rgba(255,255,255,.56)}
    :where(html[data-page="team"]) .footer-title{font:800 12px/1.2 "Manrope";color:#fff;margin:0 0 15px}:where(html[data-page="team"]) .footer-links{list-style:none;margin:0;padding:0;display:grid;gap:9px}:where(html[data-page="team"]) .footer-links a{font-size:12px}:where(html[data-page="team"]) .footer-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}:where(html[data-page="team"]) .socials{display:flex;gap:8px;flex-wrap:wrap}:where(html[data-page="team"]) .social{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#0d4783;color:#fff}:where(html[data-page="team"]) .social .icon{width:17px;height:17px}
    :where(html[data-page="team"]) .footer-bottom{margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:20px;font-size:11px}:where(html[data-page="team"]) .footer-bottom-links{display:flex;gap:20px}
    @keyframes page-team-founder-in{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
    :where(html[data-page="team"]) .founder:nth-child(2){animation-name:page-team-founder-in-right}@keyframes page-team-founder-in-right{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
    @media(min-width:1600px){:root:where([data-page="team"]){--page-gutter:64px}}
    @media(max-width:1199px){
      :root:where([data-page="team"]){--page-gutter:40px}:where(html[data-page="team"]) .nav-links{gap:18px}:where(html[data-page="team"]) .nav-actions .btn{padding-inline:17px}:where(html[data-page="team"]) .founder-stage{gap:38px}:where(html[data-page="team"]) .portrait-wrap{width:80%;height:455px}:where(html[data-page="team"]) .founder{min-height:540px}:where(html[data-page="team"]) .profile-card{width:238px;padding:20px}:where(html[data-page="team"]) .founder:first-child .profile-card{left:0}:where(html[data-page="team"]) .founder:nth-child(2) .profile-card{right:0}:where(html[data-page="team"]) .strength-grid{grid-template-columns:1fr 1fr;align-items:start}:where(html[data-page="team"]) .diagram{grid-column:1/-1;grid-row:1}:where(html[data-page="team"]) .cap-list{grid-row:2}:where(html[data-page="team"]) .circle.left{left:22%}:where(html[data-page="team"]) .circle.right{right:22%}:where(html[data-page="team"]) .journey-layout,:where(html[data-page="team"]) .values-layout{grid-template-columns:1fr;gap:46px}:where(html[data-page="team"]) .value-grid{grid-template-columns:repeat(4,1fr)}:where(html[data-page="team"]) .footer-grid{grid-template-columns:1.2fr repeat(3,1fr);}:where(html[data-page="team"]) .footer-social{grid-column:2/-1}:where(html[data-page="team"]) .annotation{font-size:20px}:where(html[data-page="team"]) .hero-copy .annotation.left{left:-6%}:where(html[data-page="team"]) .hero-copy .annotation.right{right:-7%}
    }
    @media(max-width:899px){
      :root:where([data-page="team"]){--page-gutter:32px}:where(html[data-page="team"]) .nav-links,:where(html[data-page="team"]) .nav-actions{display:none}:where(html[data-page="team"]) .menu-btn{display:flex}:where(html[data-page="team"]) .nav-inner{justify-content:flex-end}:where(html[data-page="team"]) .hero{padding-top:48px}:where(html[data-page="team"]) .hero-copy .annotation{display:none}:where(html[data-page="team"]) .founder-stage{gap:24px}:where(html[data-page="team"]) .founder{min-height:auto;background:var(--surface);border:1px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(16,39,71,.06)}:where(html[data-page="team"]) .portrait-wrap{width:100%;height:390px;border-radius:0;margin:0;box-shadow:none;transform:none!important}:where(html[data-page="team"]) .profile-card{position:relative;inset:auto!important;width:100%;border:0;border-radius:0;box-shadow:none;background:var(--surface);padding:22px}:where(html[data-page="team"]) .signature{display:none}:where(html[data-page="team"]) .authority{margin-top:26px;grid-template-columns:1fr 1fr}:where(html[data-page="team"]) .stat:nth-child(3){border-left:0}:where(html[data-page="team"]) .stat:nth-child(n+3){border-top:1px solid var(--border)}:where(html[data-page="team"]) .section{padding:76px 0}:where(html[data-page="team"]) .section-head{grid-template-columns:1fr;gap:25px}:where(html[data-page="team"]) .strength-grid{margin-top:42px}:where(html[data-page="team"]) .circle.left{left:14%}:where(html[data-page="team"]) .circle.right{right:14%}:where(html[data-page="team"]) .timeline{grid-template-columns:repeat(2,1fr);gap:40px 28px}:where(html[data-page="team"]) .timeline::before{display:none}:where(html[data-page="team"]) .step{padding-left:58px}:where(html[data-page="team"]) .step-icon{position:absolute;left:0;top:-9px}:where(html[data-page="team"]) .value-grid{grid-template-columns:repeat(2,1fr)}:where(html[data-page="team"]) .cta .annotation{display:none}:where(html[data-page="team"]) .footer-grid{grid-template-columns:repeat(3,1fr)}:where(html[data-page="team"]) .footer-brand{grid-column:1/-1}:where(html[data-page="team"]) .footer-social{grid-column:auto}
    }
    @media(max-width:767px){:root:where([data-page="team"]){--page-gutter:20px}}
    @media(max-width:639px){
      :where(html[data-page="team"]) .mobile-actions{grid-template-columns:1fr}:where(html[data-page="team"]) .hero{padding:42px 0 58px}:where(html[data-page="team"]) .hero-copy>p{font-size:16px;line-height:1.55}:where(html[data-page="team"]) .founder-stage{grid-template-columns:1fr;gap:22px;margin-top:38px}:where(html[data-page="team"]) .portrait-wrap{height:360px}:where(html[data-page="team"]) .founder{width:100%}:where(html[data-page="team"]) .authority{grid-template-columns:1fr 1fr;padding:10px}:where(html[data-page="team"]) .stat{grid-template-columns:40px 1fr;padding:12px 9px}:where(html[data-page="team"]) .stat-icon{width:38px;height:38px}:where(html[data-page="team"]) .stat strong{font-size:17px}:where(html[data-page="team"]) .section{padding:58px 0}:where(html[data-page="team"]) .strength-grid{grid-template-columns:1fr}:where(html[data-page="team"]) .diagram{height:310px;grid-row:auto;grid-column:auto;order:0}:where(html[data-page="team"]) .cap-list{grid-row:auto}:where(html[data-page="team"]) .circle.left,:where(html[data-page="team"]) .circle.right{width:190px;height:190px;border-width:24px;font-size:15px}:where(html[data-page="team"]) .circle.left{left:0}:where(html[data-page="team"]) .circle.right{right:0}:where(html[data-page="team"]) .circle.center{width:128px;height:128px;font-size:12px}:where(html[data-page="team"]) .diagram-note{font-size:18px;bottom:0}:where(html[data-page="team"]) .diagram-note.left{left:0}:where(html[data-page="team"]) .diagram-note.right{right:0}:where(html[data-page="team"]) .journey-layout,:where(html[data-page="team"]) .values-layout{gap:36px}:where(html[data-page="team"]) .timeline{display:grid;grid-template-columns:1fr;gap:30px;padding-left:0}:where(html[data-page="team"]) .timeline::before{display:block;left:22px;right:auto;top:26px;bottom:26px;width:2px;height:auto;background:linear-gradient(var(--gold),var(--purple),var(--green),var(--pink))}:where(html[data-page="team"]) .step{padding-left:68px;min-height:95px}:where(html[data-page="team"]) .step-icon{left:0;top:-2px}:where(html[data-page="team"]) .value-grid{grid-template-columns:1fr}:where(html[data-page="team"]) .value-card{min-height:auto;padding:22px}:where(html[data-page="team"]) .value-card .icon{margin-bottom:17px}:where(html[data-page="team"]) .cta{padding:60px 0}:where(html[data-page="team"]) .footer-grid{grid-template-columns:1fr 1fr;gap:34px}:where(html[data-page="team"]) .footer-brand{grid-column:1/-1}:where(html[data-page="team"]) .footer-social{grid-column:1/-1}:where(html[data-page="team"]) .footer-bottom{flex-direction:column}:where(html[data-page="team"]) .footer-bottom-links{flex-wrap:wrap}
    }
    @media(max-width:389px){:root:where([data-page="team"]){--page-gutter:16px}:where(html[data-page="team"]) h1{font-size:43px}:where(html[data-page="team"]) .authority{grid-template-columns:1fr}:where(html[data-page="team"]) .stat+.stat{border-left:0}:where(html[data-page="team"]) .stat:nth-child(n+2){border-top:1px solid var(--border)}:where(html[data-page="team"]) .portrait-wrap{height:320px}:where(html[data-page="team"]) .circle.left,:where(html[data-page="team"]) .circle.right{width:168px;height:168px;border-width:20px}:where(html[data-page="team"]) .circle.center{width:112px;height:112px}:where(html[data-page="team"]) .footer-grid{grid-template-columns:1fr}}
    @media(prefers-reduced-motion:reduce){:where(html[data-page="team"]) *,:where(html[data-page="team"]) *::before,:where(html[data-page="team"]) *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}:where(html[data-page="team"]) .btn:active{transform:none}}

    /* Kaxon global layout system */
    :root:where([data-page="team"]){
      --page-gutter:24px;
      --container:100%;
      --container-max:1240px;
      --section-space:120px;
      --layout-gap:80px;
      --card-radius:24px;
      --card-padding:32px;
      --card-border:1px solid rgba(20,40,80,.08);
      --card-shadow:0 18px 46px rgba(16,39,71,.075);
    }
    :where(html[data-page="team"]) .container,:where(html[data-page="team"]) .nav-inner{width:var(--container);max-width:var(--container-max);margin-inline:auto;padding-inline:var(--page-gutter)}
    :where(html[data-page="team"]) .hero{padding-block:var(--section-space)}
    :where(html[data-page="team"]) .section{padding-block:var(--section-space)}
    :where(html[data-page="team"]) .cta{padding-block:var(--section-space)}

    :where(html[data-page="team"]) h1{font-size:72px;max-width:650px;margin-inline:auto}
    :where(html[data-page="team"]) h2{font-size:56px}
    :where(html[data-page="team"]) .hero-copy{max-width:650px}
    :where(html[data-page="team"]) .hero-copy>p,:where(html[data-page="team"]) .section-copy,:where(html[data-page="team"]) .cta p{max-width:560px;line-height:1.7}

    :where(html[data-page="team"]) .founder-stage{
      grid-template-columns:repeat(12,minmax(0,1fr));
      column-gap:var(--layout-gap);
      row-gap:var(--layout-gap);
      justify-items:center;
    }
    :where(html[data-page="team"]) .founder{grid-column:span 6;width:100%;max-width:420px}
    :where(html[data-page="team"]) .portrait-wrap{width:100%;max-width:420px;border-radius:32px}
    :where(html[data-page="team"]) .profile-card{
      width:min(320px,76%);
      max-width:420px;
      padding:32px;
      border:var(--card-border);
      border-radius:32px;
      box-shadow:var(--card-shadow);
      transition:transform 300ms ease;
    }
    :where(html[data-page="team"]) .profile-card:hover{transform:translateY(-6px)}

    :where(html[data-page="team"]) .authority,:where(html[data-page="team"]) .cap-list,:where(html[data-page="team"]) .value-card{
      border:var(--card-border);
      border-radius:var(--card-radius);
      box-shadow:var(--card-shadow);
    }
    :where(html[data-page="team"]) .authority{padding:32px}
    :where(html[data-page="team"]) .cap-list,:where(html[data-page="team"]) .value-card{padding:var(--card-padding);transition:transform 300ms ease}
    :where(html[data-page="team"]) .cap-list:hover,:where(html[data-page="team"]) .value-card:hover{transform:translateY(-6px)}

    :where(html[data-page="team"]) .section-head{
      grid-template-columns:repeat(12,minmax(0,1fr));
      gap:var(--layout-gap);
    }
    :where(html[data-page="team"]) .section-head>div{grid-column:span 7}
    :where(html[data-page="team"]) .section-head>.section-copy{grid-column:span 5}
    :where(html[data-page="team"]) .strength-grid{
      grid-template-columns:repeat(12,minmax(0,1fr));
      gap:var(--layout-gap);
    }
    :where(html[data-page="team"]) .strength-grid>.cap-list{grid-column:span 3}
    :where(html[data-page="team"]) .strength-grid>.diagram{grid-column:span 6}
    :where(html[data-page="team"]) .journey-layout,:where(html[data-page="team"]) .values-layout{
      grid-template-columns:repeat(12,minmax(0,1fr));
      gap:var(--layout-gap);
    }
    :where(html[data-page="team"]) .journey-intro,:where(html[data-page="team"]) .values-layout>div:first-child{grid-column:span 4}
    :where(html[data-page="team"]) .timeline,:where(html[data-page="team"]) .value-grid{grid-column:span 8}
    :where(html[data-page="team"]) .footer-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--layout-gap)}
    :where(html[data-page="team"]) .footer-brand{grid-column:span 3}
    :where(html[data-page="team"]) .footer-grid>div:not(.footer-brand):not(.footer-social){grid-column:span 2}
    :where(html[data-page="team"]) .footer-social{grid-column:span 3}

    @media(min-width:1600px){
      :root:where([data-page="team"]){--page-gutter:24px}
    }
    @media(min-width:768px) and (max-width:1279px){
      :root:where([data-page="team"]){--page-gutter:24px;--section-space:90px;--layout-gap:48px}
      :where(html[data-page="team"]) h1{font-size:56px}
      :where(html[data-page="team"]) h2{font-size:48px}
      :where(html[data-page="team"]) .founder-stage{grid-template-columns:repeat(8,minmax(0,1fr))}
      :where(html[data-page="team"]) .founder{grid-column:span 4}
      :where(html[data-page="team"]) .section-head{grid-template-columns:repeat(8,minmax(0,1fr))}
      :where(html[data-page="team"]) .section-head>div{grid-column:span 5}
      :where(html[data-page="team"]) .section-head>.section-copy{grid-column:span 3}
      :where(html[data-page="team"]) .strength-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
      :where(html[data-page="team"]) .strength-grid>.diagram{grid-column:1/-1;grid-row:1}
      :where(html[data-page="team"]) .strength-grid>.cap-list{grid-column:span 4;grid-row:2}
      :where(html[data-page="team"]) .journey-layout,:where(html[data-page="team"]) .values-layout{grid-template-columns:repeat(8,minmax(0,1fr))}
      :where(html[data-page="team"]) .journey-intro,:where(html[data-page="team"]) .values-layout>div:first-child,:where(html[data-page="team"]) .timeline,:where(html[data-page="team"]) .value-grid{grid-column:1/-1}
      :where(html[data-page="team"]) .footer-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:48px}
      :where(html[data-page="team"]) .footer-brand{grid-column:1/-1}
      :where(html[data-page="team"]) .footer-grid>div:not(.footer-brand):not(.footer-social){grid-column:span 2}
      :where(html[data-page="team"]) .footer-social{grid-column:span 2}
    }
    @media(max-width:767px){
      :root:where([data-page="team"]){--page-gutter:24px;--section-space:64px;--layout-gap:32px}
      :where(html[data-page="team"]) h1{font-size:42px}
      :where(html[data-page="team"]) h2{font-size:36px}
      :where(html[data-page="team"]) .hero-copy{max-width:650px}
      :where(html[data-page="team"]) .founder-stage,:where(html[data-page="team"]) .section-head,:where(html[data-page="team"]) .strength-grid,:where(html[data-page="team"]) .journey-layout,:where(html[data-page="team"]) .values-layout,:where(html[data-page="team"]) .footer-grid{
        grid-template-columns:minmax(0,1fr);
        gap:32px;
      }
      :where(html[data-page="team"]) .founder,:where(html[data-page="team"]) .section-head>div,:where(html[data-page="team"]) .section-head>.section-copy,:where(html[data-page="team"]) .strength-grid>.cap-list,:where(html[data-page="team"]) .strength-grid>.diagram,:where(html[data-page="team"]) 
      .journey-intro,:where(html[data-page="team"]) .values-layout>div:first-child,:where(html[data-page="team"]) .timeline,:where(html[data-page="team"]) .value-grid,:where(html[data-page="team"]) .footer-brand,:where(html[data-page="team"]) 
      .footer-grid>div:not(.footer-brand):not(.footer-social),:where(html[data-page="team"]) .footer-social{grid-column:1/-1;grid-row:auto}
      :where(html[data-page="team"]) .founder{max-width:420px;margin-inline:auto}
      :where(html[data-page="team"]) .profile-card{width:100%;max-width:none;padding:32px;border-radius:0}
      :where(html[data-page="team"]) .authority{padding:24px}
      :where(html[data-page="team"]) .cap-list,:where(html[data-page="team"]) .value-card{padding:32px}
      :where(html[data-page="team"]) .founder{border-radius:32px}
    }
    :where(html[data-page="team"]) h1{line-height:.98}
    :where(html[data-page="team"]) .hero p,:where(html[data-page="team"]) .strengths p,:where(html[data-page="team"]) .journey p,:where(html[data-page="team"]) .values p,:where(html[data-page="team"]) .cta p{line-height:1.7}
    :where(html[data-page="team"]) .cta h2{font-size:56px}
    @media(min-width:768px) and (max-width:899px){
      :where(html[data-page="team"]) .founder{max-width:420px;border-radius:32px}
      :where(html[data-page="team"]) .portrait-wrap{width:100%;max-width:none;border-radius:0}
      :where(html[data-page="team"]) .profile-card{position:relative;inset:auto!important;width:100%;max-width:none;padding:32px;border:0;border-radius:0;box-shadow:none;background:var(--surface)}
    }
    @media(max-width:767px){:where(html[data-page="team"]) .cta h2{font-size:36px}}
    @media(max-width:360px){:root:where([data-page="team"]){--page-gutter:12px}}
    @media(max-width:320px){:root:where([data-page="team"]){--page-gutter:8px}}

    /* Keep founder portraits unobstructed; details sit in a compact card below. */
    :where(html[data-page="team"]) .founder{min-height:auto}
    :where(html[data-page="team"]) .profile-card{
      position:relative;
      inset:auto!important;
      width:100%;
      margin-top:18px;
      padding:20px 22px;
      border-radius:20px;
      background:var(--surface);
      backdrop-filter:none;
    }
    :where(html[data-page="team"]) .profile-card h3{font-size:28px}
    :where(html[data-page="team"]) .signature{display:none}
    @media(max-width:899px){
      :where(html[data-page="team"]) .profile-card{margin-top:0;border-radius:0;padding:22px}
    }