/* ==========================================================
   MKB SITE STYLESHEET — COMPLETE SPECIFICATION
   Single Font Family: Urbanist
   Exact Colors, Borders, Button Corner Mechanics & Layout
   ========================================================== */
:root {
  /* ==========================================================
     MKB GLOBAL EXACT COLOR SYSTEM (Reference Specification)
     ========================================================== */
  --mkb-black: #111315;
  --mkb-pure-black: #000000;
  --mkb-red: #ED1C24;
  --mkb-white: #FFFFFF;
  --mkb-page-grey: #F0F0F0;
  --mkb-frame: #E4E4E4;
  /* Consolidated Color Tokens */
  --ink: var(--mkb-black);
  --body-muted: rgb(94, 94, 94);
  --muted: rgb(94, 94, 94);
  --tag-text: var(--mkb-red);
  --eyebrow-gray: var(--mkb-red);
  --muted-light: rgb(153, 153, 153);
  --line: rgb(217, 217, 217);
  --line-strong: rgb(163, 163, 163);
  --paper: var(--mkb-white);
  --paper-tint: #FAFAF8;
  /* Global CTA Tokens */
  --btn-primary-bg: var(--mkb-black);
  --btn-primary-text: var(--mkb-white);
  --btn-bracket-primary: var(--mkb-red);
  --cta-corner-length: 10px;
  --cta-corner-offset: -5px;
  --cta-corner-thickness: 1.5px;
  /* Single Font Family Everywhere */
  --font-main: 'Urbanist', 'Urbanist Placeholder', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sans: var(--font-main);
  --serif: var(--font-main);
  --mono: var(--font-main);
  --corner-color: rgb(163, 163, 163);
  --frame-margin: clamp(16px, 2.6vw, 50px);
  --frame-border: rgb(217, 217, 217);
  --frame-max-width: 1815px;
}

/* Global Scroll Foundation */
html {
  scroll-behavior: smooth;
  /* Inertial momentum scroll is handled fluidly by js/smooth-scroll.js */
  scrollbar-gutter: auto;
}

html.has-smooth-scroll {
  scroll-behavior: auto !important;
}

/* ==========================================================
   MKB GLOBAL SCROLL REVEAL — Slide-Up-From-Bottom Entrance
   All content rises from 28px below its resting position to
   its final position when it enters the viewport.
   JS (scroll-reveal.js) adds [data-sr] attribute and triggers
   .sr-visible via IntersectionObserver.
   ========================================================== */
/* 1. Hidden state — elements sit below, invisible */
[data-sr] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.95s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.95s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: var(--sr-delay, 0ms);
  will-change: opacity, transform;
}

/* 2. Visible state — element has entered the viewport */
[data-sr].sr-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 3. Honour user motion preferences */
@media (prefers-reduced-motion: reduce) {
  [data-sr] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-main);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: clip;
  cursor: none;
}

::selection {
  background: var(--btn-bracket-primary);
  color: #ffffff;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

@media (hover: none) {
  body {
    cursor: auto;
  }

}

.site-wrapper {
  width: auto !important;
  position: relative !important;
  overflow-x: clip !important;
  background-color: var(--paper);
  border-top: 1px solid var(--frame-border) !important;
  border-right: 1px solid var(--frame-border) !important;
  border-bottom: 1px solid var(--frame-border) !important;
  border-left: 1px solid var(--frame-border) !important;
  overflow: visible !important;
  max-width: var(--frame-max-width) !important;
  margin-left: var(--frame-margin) !important;
  margin-right: var(--frame-margin) !important;
  box-sizing: border-box !important;
}

/* ==========================================================
   GLOBAL CONTAINER & VERTICAL COLUMN GUIDELINES (1280px Centered)
   ========================================================== */
.wrap {
  max-width: 1815px;
  width: 100%;
  margin: 0 auto;
  padding: 0 80px;
  position: relative;
  border-left: 1px solid rgb(217, 217, 217) !important;
  border-right: 1px solid rgb(217, 217, 217) !important;
  border-top: none;
  border-bottom: none;
  box-sizing: border-box;
  padding-left: clamp(24px, 4.4vw, 80px) !important;
  padding-right: clamp(24px, 4.4vw, 80px) !important;
}

@media (max-width: 900px) {
  .wrap {
    padding: 0 24px;
  }

}

.spine {
  display: none !important;
}

/* ==========================================================
   HEADER & NAVIGATION (1815px Border System & Responsive Tiers)
   ========================================================== */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--client-width, 100%) !important;
  height: 72px !important;
  z-index: 1000 !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--frame-border, rgb(217, 217, 217)) !important;
  box-shadow: 0 1px 0 0 var(--frame-border, rgb(217, 217, 217)) !important;
  margin: 0 !important;
  padding: 0;
  box-sizing: border-box !important;
  right: auto !important;
  max-width: var(--client-width, 100%) !important;
}

.site-header .wrap.header-wrap {
  height: 100% !important;
  max-width: var(--frame-max-width, 1815px) !important;
  margin: 0 auto;
  padding: 0 clamp(16px, 2.6vw, 50px) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-left: 1px solid var(--frame-border, rgb(217, 217, 217)) !important;
  border-right: 1px solid var(--frame-border, rgb(217, 217, 217)) !important;
  border-bottom: 1px solid rgb(217, 217, 217) !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: auto !important;
  margin-left: var(--frame-margin, clamp(16px, 2.6vw, 50px)) !important;
  margin-right: var(--frame-margin, clamp(16px, 2.6vw, 50px)) !important;
}

.header-wrap .wrap-tick-bl,
.header-inner::before,
.header-inner .wrap-tick-bl {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  border-bottom: 1px solid rgb(163, 163, 163) !important;
  border-left: 1px solid rgb(163, 163, 163) !important;
  border-top: none !important;
  border-right: none !important;
  pointer-events: none;
  z-index: 10;
  box-sizing: border-box;
  display: block !important;
}

.header-wrap .wrap-tick-br,
.header-inner::after,
.header-inner .wrap-tick-br {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-bottom: 1px solid rgb(163, 163, 163) !important;
  border-right: 1px solid rgb(163, 163, 163) !important;
  border-top: none !important;
  border-left: none !important;
  pointer-events: none;
  z-index: 10;
  box-sizing: border-box;
  display: block !important;
}

/* ==========================================================
   MASTER CORNER INTERSECTION TICKS (Pinned to -1px Corner Line)
   ========================================================== */
.wrap-tick-tl,
.wrap-tick-tr,
.wrap-tick-bl,
.wrap-tick-br,
.card-corner-tl,
.card-corner-tr,
.card-corner-bl,
.card-corner-br {
  position: absolute !important;
  width: 12px !important;
  height: 12px !important;
  pointer-events: none !important;
  z-index: 15 !important;
  box-sizing: border-box !important;
  display: block !important;
}

.wrap-tick-tl,
.card-corner-tl {
  top: -1px !important;
  left: -1px !important;
  right: auto !important;
  bottom: auto !important;
  border-top: 1.2px solid rgb(163, 163, 163) !important;
  border-left: 1.2px solid rgb(163, 163, 163) !important;
  border-right: none !important;
  border-bottom: none !important;
}

.wrap-tick-tr,
.card-corner-tr {
  top: -1px !important;
  right: -1px !important;
  left: auto !important;
  bottom: auto !important;
  border-top: 1.2px solid rgb(163, 163, 163) !important;
  border-right: 1.2px solid rgb(163, 163, 163) !important;
  border-left: none !important;
  border-bottom: none !important;
}

.wrap-tick-bl,
.card-corner-bl {
  bottom: -1px !important;
  left: -1px !important;
  top: auto !important;
  right: auto !important;
  border-bottom: 1.2px solid rgb(163, 163, 163) !important;
  border-left: 1.2px solid rgb(163, 163, 163) !important;
  border-top: none !important;
  border-right: none !important;
}

.wrap-tick-br,
.card-corner-br {
  bottom: -1px !important;
  right: -1px !important;
  top: auto !important;
  left: auto !important;
  border-bottom: 1.2px solid rgb(163, 163, 163) !important;
  border-right: 1.2px solid rgb(163, 163, 163) !important;
  border-top: none !important;
  border-left: none !important;
}

/* Header Content centered at 1280px matching all other section content */
.header-content {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Desktop Header Nav Drawer */
.mobile-menu-btn {
  display: none !important;
}

.header-nav-drawer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 1 !important;
  margin-left: clamp(20px, 2.5vw, 44px) !important;
  gap: clamp(14px, 1.6vw, 28px) !important;
  min-width: 0 !important;
}

.nav-links {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.nav-links nav {
  width: auto !important;
  margin: 0 auto !important;
}

.nav-links nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center !important;
  width: auto;
  margin: 0 auto;
  padding: 0;
  flex-wrap: nowrap !important;
  gap: clamp(18px, 2.2vw, 36px) !important;
}

.header-cta-wrap {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

@media (max-width: 1366px) and (min-width: 1025px) {
  .nav-links nav ul {
    gap: clamp(12px, 1.4vw, 22px) !important;
    justify-content: center !important;
  }

  .header-nav-drawer {
    margin-left: 16px !important;
    gap: 12px !important;
  }

  .nav-text {
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
  }

}

/* ==========================================================
   EDITORIAL DROPDOWN NAVIGATION (Expertise & Sectors)
   ========================================================== */
.nav-item-has-dropdown {
  position: relative;
}

.nav-item-has-dropdown>a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.nav-dropdown-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, color 0.25s ease;
  color: rgb(150, 150, 150);
}

.nav-dropdown-arrow svg {
  width: 12px;
  height: 12px;
  display: block;
}

.nav-item-has-dropdown:hover .nav-dropdown-arrow,
.nav-item-has-dropdown:focus-within .nav-dropdown-arrow {
  transform: rotate(180deg);
  color: var(--mkb-red, #ED1C24);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #ffffff;
  border: 1px solid var(--frame-border, rgb(217, 217, 217));
  min-width: 250px;
  padding: 8px 0;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 1050;
  box-sizing: border-box;
}

.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  width: 100%;
  height: 16px;
}

.nav-item-has-dropdown:hover .nav-dropdown-menu,
.nav-item-has-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.nav-dropdown-item {
  width: 100% !important;
}

.nav-dropdown-link {
  display: flex !important;
  flex-direction: column !important;
  padding: 9px 18px !important;
  text-decoration: none !important;
  border-left: 2px solid transparent !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.nav-dropdown-link.active,
.nav-dropdown-link:hover {
  background-color: rgba(237, 28, 36, 0.04) !important;
  border-left-color: var(--mkb-red, #ED1C24) !important;
}

.nav-dropdown-title {
  font-family: var(--font-main, 'Urbanist', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--mkb-black, #111315);
  transition: color 0.2s ease;
}

.nav-dropdown-link.active .nav-dropdown-title,
.nav-dropdown-link:hover .nav-dropdown-title {
  color: var(--mkb-red, #ED1C24) !important;
}

.nav-dropdown-desc {
  font-family: var(--font-main, 'Urbanist', sans-serif);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted, rgb(94, 94, 94));
  margin-top: 2px;
  line-height: 1.35;
}

@media (max-width: 1024px) {
  .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    display: none !important;
    box-shadow: none !important;
    border: none !important;
    border-left: 1.5px solid var(--mkb-red, #ED1C24) !important;
    margin: 6px 0 10px 14px !important;
    padding: 2px 0 4px 12px !important;
    background: transparent !important;
    min-width: 0 !important;
    transition: opacity 0.25s ease, max-height 0.25s ease !important;
  }

  .nav-item-has-dropdown.dropdown-open .nav-dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  .nav-dropdown-arrow {
    display: inline-flex !important;
    margin-left: 6px !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
    cursor: pointer !important;
  }

  .nav-item-has-dropdown.dropdown-open .nav-dropdown-arrow {
    transform: rotate(180deg) !important;
    color: var(--mkb-red, #ED1C24) !important;
  }

  .nav-dropdown-link {
    padding: 8px 12px !important;
    border-left: none !important;
    border-radius: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
  }

  .nav-dropdown-link:hover,
  .nav-dropdown-link:focus,
  .nav-dropdown-link:active {
    background-color: rgba(237, 28, 36, 0.08) !important;
  }

  .nav-dropdown-title {
    color: #111315 !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
  }

  .nav-dropdown-link:hover .nav-dropdown-title,
  .nav-dropdown-link:focus .nav-dropdown-title,
  .nav-dropdown-link:active .nav-dropdown-title {
    color: var(--mkb-red, #ED1C24) !important;
  }

  .nav-dropdown-desc {
    color: #555555 !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
}

/* ==========================================================
   MOBILE & TABLET RESPONSIVE HEADER WITH 3-LINE MENU
   Opens from top towards half screen with gradual opacity
   ========================================================== */
@media (max-width: 1024px) {
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 72px !important;
    z-index: 1000 !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
  }

  .site-header .wrap.header-wrap,
  .header-inner {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 24px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-left: none !important;
    border-right: none !important;
  }

  .logo-mark {
    order: 1 !important;
    z-index: 1002 !important;
  }

  /* 3-line Hamburger Menu Button */
  .mobile-menu-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 28px !important;
    height: 19px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 1002 !important;
    order: 2 !important;
  }

  .mobile-menu-btn .menu-bar {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background-color: rgb(17, 19, 21) !important;
    border-radius: 2px !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, background-color 0.3s ease !important;
    transform-origin: center !important;
  }

  /* Transform 3 lines into 'X' when open */
  .site-header.nav-open .mobile-menu-btn .bar-top {
    transform: translateY(8.5px) rotate(45deg) !important;
  }

  .site-header.nav-open .mobile-menu-btn .bar-mid {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }

  .site-header.nav-open .mobile-menu-btn .bar-bot {
    transform: translateY(-8.5px) rotate(-45deg) !important;
  }

  /* Navigation Drawer: Opens from top towards half screen bottom (50vh) with gradual opacity */
  .header-nav-drawer {
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    width: 100% !important;
    height: 50vh !important;
    max-height: 50vh !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 24px 32px 28px 32px !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-20px) !important;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 999 !important;
    overflow-y: auto !important;
  }

  /* OPEN state: Activated when user clicks the 3-line hamburger menu */
  .site-header.nav-open .header-nav-drawer {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  .nav-links,
  .nav-links nav {
    width: 100% !important;
  }

  .nav-links nav ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .nav-links nav ul li {
    width: 100% !important;
  }

  .nav-flip-inner {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav-text,
  .nav-text-top {
    display: inline-block !important;
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-family: var(--font-main, 'Urbanist', sans-serif) !important;
  }

  .nav-text-bottom {
    display: none !important;
  }

  .nav-flip-link {
    width: 100% !important;
    display: block !important;
    text-align: left !important;
    padding: 8px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    color: #111315 !important;
    text-decoration: none !important;
    transition: color 0.25s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Nav text always dark and visible in mobile drawer */
  .nav-flip-link .nav-text,
  .nav-flip-link .nav-text-top {
    color: #111315 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Active/focus states (work on both desktop and touch) */
  .nav-flip-link:focus,
  .nav-flip-link:active,
  .nav-flip-link.active {
    color: var(--mkb-red, #ED1C24) !important;
    background-color: transparent !important;
  }

  .nav-flip-link:focus .nav-text,
  .nav-flip-link:focus .nav-text-top,
  .nav-flip-link:active .nav-text,
  .nav-flip-link:active .nav-text-top,
  .nav-flip-link.active .nav-text,
  .nav-flip-link.active .nav-text-top {
    color: var(--mkb-red, #ED1C24) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hover effects ONLY on pointer/desktop devices (not touch) */
  @media (hover: hover) and (pointer: fine) {
    .nav-flip-link:hover,
    .nav-flip-link:hover .nav-text,
    .nav-flip-link:hover .nav-text-top {
      color: var(--mkb-red, #ED1C24) !important;
    }
  }

  .header-cta-wrap {
    margin-top: 14px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
  }

  .header-cta-wrap .framer-corner-btn {
    align-self: flex-start !important;
    display: inline-flex !important;
  }

}

.logo-mark {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo-img {
  display: block;
  width: 141px;
  aspect-ratio: 3.28;
  height: auto;
  object-fit: contain;
}

.nav-flip-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  height: 20px;
  overflow: visible;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}

.nav-flip-inner {
  display: inline-flex;
  flex-direction: column;
  height: 20px;
  overflow: hidden;
  position: relative;
}

.nav-text {
  display: block;
  height: 20px;
  line-height: 20px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.nav-text-top {
  color: rgb(115, 115, 115) !important;
}

.nav-text-bottom {
  color: var(--mkb-red, #ED1C24) !important;
}

/* Desktop-only flip animation: ONLY runs on true pointer (mouse) devices */
/* On touch/mobile, hover state fires on tap and hides text — so guard it */
@media (hover: hover) and (pointer: fine) {
  .nav-flip-link:hover .nav-text {
    transform: translateY(-20px) !important;
  }

  .nav-flip-link:hover .nav-text-top,
  .nav-flip-link:hover .nav-text-bottom,
  .nav-flip-link:hover {
    color: var(--mkb-red, #ED1C24) !important;
  }

  .nav-flip-link.active:hover .nav-text {
    transform: translateY(-20px) !important;
  }

  .nav-flip-link.active:hover,
  .nav-flip-link.active:hover .nav-text,
  .nav-flip-link.active:hover .nav-text-top,
  .nav-flip-link.active:hover .nav-text-bottom {
    color: var(--mkb-red, #ED1C24) !important;
  }

  .nav-flip-link:hover::after {
    transform: scaleX(1) !important;
  }
}

/* Active state: always red + underline on ALL devices (desktop + touch) */
.nav-flip-link.active,
.nav-flip-link.active .nav-text,
.nav-flip-link.active .nav-text-top,
.nav-flip-link.active .nav-text-bottom {
  color: var(--mkb-red, #ED1C24) !important;
  font-weight: 600 !important;
}

/* Active Nav Link Underline Indicator (base — hidden by default) */
.nav-flip-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  padding-bottom: 2px !important;
}

.nav-flip-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background-color: var(--mkb-red, #ED1C24) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-radius: 1px !important;
  pointer-events: none !important;
}

/* Active page underline always visible */
.nav-flip-link.active::after {
  transform: scaleX(1) !important;
}


/* ==========================================================
   MKB GLOBAL CTA SYSTEM — see css/mkb-cta.css
   All .framer-corner-btn / .error-cta-btn styles are defined
   in mkb-cta.css (loaded after this file in every HTML page).
   ========================================================== */
/* ==========================================================
   HERO SECTION (Headline strictly in ONE single line)
   ========================================================== */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid rgb(217, 217, 217);
  box-sizing: border-box;
  overflow: hidden;
}

.hero .wrap {
  display: flex;
  align-items: center;
  height: 100%;
  border-top: none;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.headline.hero-main-heading,
.hero-main-heading {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: clamp(34px, 3.85vw, 60px);
  letter-spacing: -0.04em;
  line-height: 1.18;
  color: rgb(17, 19, 21);
  margin: 0;
  white-space: nowrap;
  /* Strictly in ONE single line as shown in Image 2 */
  text-align: left;
  width: fit-content;
}

/* Unique Home Page Main Hero Title Font Size Scaling ("Strengthen how healthcare operates.") */
h1.hero-main-heading.mkb-home-hero-title,
.hero .hero-inner h1.mkb-home-hero-title,
#hero .hero-main-heading.mkb-home-hero-title {
  font-size: clamp(32px, 4.1vw, 64px) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.04em !important;
  font-weight: 700 !important;
}

@media (max-width: 1024px) {

  h1.hero-main-heading.mkb-home-hero-title,
  .hero .hero-inner h1.mkb-home-hero-title,
  #hero .hero-main-heading.mkb-home-hero-title {
    font-size: clamp(30px, 4.5vw, 52px) !important;
    line-height: 1.16 !important;
    white-space: normal !important;
  }

}

@media (max-width: 640px) {

  h1.hero-main-heading.mkb-home-hero-title,
  .hero .hero-inner h1.mkb-home-hero-title,
  #hero .hero-main-heading.mkb-home-hero-title {
    font-size: clamp(26px, 6.0vw, 38px) !important;
    line-height: 1.18 !important;
    white-space: normal !important;
  }

}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 0 10px 0;
  max-width: 680px;
}

.hero-subheading,
.hero-copy p.hero-subheading {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.5;
  color: rgb(115, 115, 115);
  margin: 0;
  text-align: left;
}

.hero-prop-box {
  position: relative !important;
  border: 1px solid var(--frame-border, rgb(205, 205, 210)) !important;
  padding: 20px 24px 22px 24px !important;
  background: #ffffff91 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

.strategic-hero-content,
.strategic-hero-box,
.technology-decision-box,
.technology-direction-box,
.thinking-editorial-box,
.lesprit-panache-box {
  position: relative;
  border: none !important;
  padding: 20px 24px 22px 24px;
  background: #ffffff91 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.hero-prop-eyebrow {
  margin-bottom: 2px !important;
}

.hero-prop-eyebrow .eyebrow-inner {
  font-family: var(--font-main) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

.hero-prop-text,
.hero-copy p.hero-prop-text {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: rgb(140, 140, 145);
  margin: 0;
  text-align: left;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  pointer-events: auto;
}

/* ==========================================================
   WIREFRAME STICKY TRACK
   ========================================================== */
.hero-perspective-track {
  position: relative;
  width: 100%;
  background: transparent;
}

.track-globe-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}

.hero-sphere-container,
#particle-earth-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* ==========================================================
   SECTIONS & TWO-TONE H2 HEADINGS
   ========================================================== */
section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--paper);
  border-top: none !important;
  border-bottom: none !important;
  box-sizing: border-box;
}

.section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  border-top: none !important;
  border-bottom: none !important;
  box-sizing: border-box;
}

.section.tint {
  background: var(--paper-tint);
}

.section-head {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  margin-bottom: 60px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (max-width: 900px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
  }

}

.section-head>div:first-child {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

h2.section-heading,
.section-head h2,
.cap-main-heading,
.closing h2,
h2 {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 56px;
  letter-spacing: -2px;
  line-height: 60px;
  color: rgb(26, 26, 26);
  text-align: left;
  margin: 0;
}

@media (max-width: 900px) {

  h2.section-heading,
  .section-head h2,
  .cap-main-heading,
  .closing h2,
  h2 {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -1px;
  }

}

@media (max-width: 600px) {

  h2.section-heading,
  .section-head h2,
  .cap-main-heading,
  .closing h2,
  h2 {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.5px;
  }

}

.h2-dark {
  color: rgb(26, 26, 26);
}

.h2-gray {
  color: rgb(153, 153, 153);
}

.lede {
  font-family: var(--font-main);
  font-size: 18px;
  color: rgb(17, 19, 21);
  line-height: 1.5;
  font-weight: 400;
  text-align: left;
  align-self: end;
}

.eyebrow,
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0 !important;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mkb-red, #ED1C24);
  border: none !important;
  border-bottom: none !important;
  padding-bottom: 0;
  margin-bottom: 0;
  width: fit-content;
  text-align: left;
}

.eyebrow-icon,
.eyebrow svg,
.technology-eyebrow-icon,
.technology-eyebrow svg,
.section-tag svg,
.strategic-eyebrow svg,
.depth-eyebrow svg,
.faq-eyebrow svg,
.thinking-eyebrow svg,
.contact-eyebrow svg,
[class*="eyebrow"] svg {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Removed duplicate circle dot & icon; clean text eyebrow */
/* ==========================================================================
   MKB SIGNATURE EYEBROW / SECTION TAG SLIDING COLOR TRANSITION
   Exact replica of the CTA Button sliding color transition style.
   Curtain wipe across all section eyebrows on page load and viewport entrance.
   ========================================================================== */
.eyebrow,
.section-tag,
.strategic-eyebrow,
.technology-eyebrow,
.thinking-eyebrow,
.contact-eyebrow,
.depth-eyebrow,
.faq-eyebrow,
.lesprit-tag-wipe {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: fit-content !important;
  max-width: fit-content !important;
  overflow: hidden !important;
  isolation: isolate !important;
  white-space: nowrap !important;
  margin-bottom: 0;
  text-align: left;
  border: none !important;
  border-bottom: none !important;
  color: var(--mkb-red, #ED1C24) !important;
  padding-bottom: 0 !important;
  font-family: var(--font-main) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
}

/* Inner content wrapper (icon + text) */
.eyebrow .eyebrow-inner,
.section-tag .eyebrow-inner,
.strategic-eyebrow .eyebrow-inner,
.technology-eyebrow .eyebrow-inner,
.thinking-eyebrow .eyebrow-inner,
.contact-eyebrow .eyebrow-inner,
.contact-section-label .eyebrow-inner,
.depth-eyebrow .eyebrow-inner,
.faq-eyebrow .eyebrow-inner,
.lesprit-tag-wipe .eyebrow-inner {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: fit-content !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Red sliding curtain pseudo-element: exactly matching CTA button sliding curtain */
.eyebrow::after,
.section-tag::after,
.strategic-eyebrow::after,
.technology-eyebrow::after,
.thinking-eyebrow::after,
.contact-eyebrow::after,
.contact-section-label::after,
.depth-eyebrow::after,
.faq-eyebrow::after,
.lesprit-tag-wipe::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--mkb-red, #ED1C24) !important;
  transform: translateX(-101%);
  transform-origin: left center !important;
  pointer-events: none !important;
  z-index: 12 !important;
}

/* Sliding Color Curtain Wipe Keyframes (Mirrored directly from CTA button) */
@keyframes ctaButtonColorCurtain {

  0% {
    transform: translateX(-101%);
  }

  45% {
    transform: translateX(0%);
  }

  55% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(101%);
  }

}

/* Eyebrow Text and SVG Icon Transition: Emerges in Red under sliding curtain, stays Red */
@keyframes eyebrowTextRevealAndColor {

  0% {
    opacity: 0.2;
    color: var(--mkb-red, #ED1C24) !important;
  }

  45% {
    opacity: 1;
    color: var(--mkb-red, #ED1C24) !important;
  }

  60% {
    opacity: 1;
    color: var(--mkb-red, #ED1C24) !important;
  }

  100% {
    opacity: 1;
    color: var(--mkb-red, #ED1C24) !important;
  }

}

/* Eyebrow Container Border & Baseline Transition */
@keyframes eyebrowColorTransition {

  0% {
    color: var(--mkb-red, #ED1C24) !important;
    border-bottom: none !important;
  }

  45% {
    color: var(--mkb-red, #ED1C24) !important;
    border-bottom: none !important;
  }

  60% {
    color: var(--mkb-red, #ED1C24) !important;
    border-bottom: none !important;
  }

  100% {
    color: var(--mkb-red, #ED1C24) !important;
    border-bottom: none !important;
  }

}

/* TRIGGER SLIDING COLOR CURTAIN: Exact CTA Button timing and easing */
.eyebrow.eyebrow-wiping::after,
.section-tag.eyebrow-wiping::after,
.strategic-eyebrow.eyebrow-wiping::after,
.technology-eyebrow.eyebrow-wiping::after,
.thinking-eyebrow.eyebrow-wiping::after,
.contact-eyebrow.eyebrow-wiping::after,
.contact-section-label.eyebrow-wiping::after,
.depth-eyebrow.eyebrow-wiping::after,
.faq-eyebrow.eyebrow-wiping::after,
.lesprit-tag-wipe.eyebrow-wiping::after {
  animation: ctaButtonColorCurtain 0.85s cubic-bezier(0.77, 0, 0.175, 1) forwards !important;
}

/* REVEAL CONTENT: Color transition from RED to GREY during sliding wipe */
.eyebrow.eyebrow-wiping,
.section-tag.eyebrow-wiping,
.strategic-eyebrow.eyebrow-wiping,
.technology-eyebrow.eyebrow-wiping,
.thinking-eyebrow.eyebrow-wiping,
.contact-eyebrow.eyebrow-wiping,
.contact-section-label.eyebrow-wiping,
.depth-eyebrow.eyebrow-wiping,
.faq-eyebrow.eyebrow-wiping,
.lesprit-tag-wipe.eyebrow-wiping {
  animation: eyebrowColorTransition 0.85s cubic-bezier(0.77, 0, 0.175, 1) forwards !important;
}

.eyebrow.eyebrow-wiping .eyebrow-inner,
.section-tag.eyebrow-wiping .eyebrow-inner,
.strategic-eyebrow.eyebrow-wiping .eyebrow-inner,
.technology-eyebrow.eyebrow-wiping .eyebrow-inner,
.thinking-eyebrow.eyebrow-wiping .eyebrow-inner,
.contact-eyebrow.eyebrow-wiping .eyebrow-inner,
.contact-section-label.eyebrow-wiping .eyebrow-inner,
.depth-eyebrow.eyebrow-wiping .eyebrow-inner,
.faq-eyebrow.eyebrow-wiping .eyebrow-inner,
.lesprit-tag-wipe.eyebrow-wiping .eyebrow-inner,
.eyebrow.eyebrow-wiping:not(:has(.eyebrow-inner))>svg,
.eyebrow.eyebrow-wiping:not(:has(.eyebrow-inner))>span {
  animation: eyebrowTextRevealAndColor 0.85s cubic-bezier(0.77, 0, 0.175, 1) forwards !important;
}

/* ==========================================================
   BOX-NESTED HEADINGS & EYEBROWS (BLACK CURTAIN & COLOR TRANSITION)
   When an eyebrow, tag, or heading is inside any box/card:
   1. The heading/eyebrow text is in BLACK color.
   2. The sliding curtain transition is in BLACK (#000000).
   3. The text reveal animation transitions to BLACK.
   ========================================================== */
/* Base & revealed text color for eyebrows inside any box/card */
.strategic-boundary-box .eyebrow,
.strategic-boundary-box .strategic-eyebrow,
.strategic-boundary-box .eyebrow-inner,
.technology-direction-box .eyebrow,
.technology-direction-box .technology-eyebrow,
.technology-direction-box .eyebrow-inner,
.technology-decision-box .eyebrow,
.technology-decision-box .technology-eyebrow,
.technology-decision-box .eyebrow-inner,
.strategic-philosophy-box .eyebrow,
.strategic-philosophy-box .strategic-eyebrow,
.strategic-philosophy-box .eyebrow-inner,
.about-purpose-card .eyebrow,
.about-purpose-card .eyebrow-inner,
.about-pov-card .eyebrow,
.about-pov-card .eyebrow-inner,
.card-box .eyebrow,
.card-box .eyebrow-inner,
.card-box [class*="-eyebrow"],
[class*="-box"]>.eyebrow,
[class*="-box"]>[class*="-eyebrow"],
[class*="-box"] .eyebrow,
[class*="-box"] [class*="-eyebrow"],
[class*="-box"] .eyebrow-inner,
[class*="-card"] .eyebrow,
[class*="-card"] [class*="-eyebrow"],
[class*="-card"] .eyebrow-inner {
  color: rgba(0, 0, 0, 0.75) !important;
}

/* Black sliding curtain pseudo-element */
.strategic-boundary-box .eyebrow::after,
.strategic-boundary-box .strategic-eyebrow::after,
.technology-direction-box .eyebrow::after,
.technology-direction-box .technology-eyebrow::after,
.technology-decision-box .eyebrow::after,
.technology-decision-box .technology-eyebrow::after,
.strategic-philosophy-box .eyebrow::after,
.strategic-philosophy-box .strategic-eyebrow::after,
.about-purpose-card .eyebrow::after,
.about-pov-card .eyebrow::after,
.card-box .eyebrow::after,
.card-box [class*="-eyebrow"]::after,
[class*="-box"] .eyebrow::after,
[class*="-box"] [class*="-eyebrow"]::after,
[class*="-card"] .eyebrow::after,
[class*="-card"] [class*="-eyebrow"]::after {
  background: #000000 !important;
}

/* Black color reveal animations */
@keyframes eyebrowTextRevealAndColorBlack {

  0% {
    opacity: 0.2;
    color: #121218 !important;
  }

  45% {
    opacity: 1;
    color: #121218 !important;
  }

  60% {
    opacity: 1;
    color: #121218 !important;
  }

  100% {
    opacity: 1;
    color: rgba(0, 0, 0, 0.75) !important;
  }

}

@keyframes eyebrowColorTransitionBlack {

  0% {
    color: #121218 !important;
    border-bottom: none !important;
  }

  45% {
    color: #121218 !important;
    border-bottom: none !important;
  }

  60% {
    color: #121218 !important;
    border-bottom: none !important;
  }

  100% {
    color: rgba(0, 0, 0, 0.75) !important;
    border-bottom: none !important;
  }

}

/* Active wiping animation in BLACK for box-nested eyebrows */
.strategic-boundary-box .eyebrow.eyebrow-wiping,
.strategic-boundary-box .strategic-eyebrow.eyebrow-wiping,
.technology-direction-box .eyebrow.eyebrow-wiping,
.technology-direction-box .technology-eyebrow.eyebrow-wiping,
.technology-decision-box .eyebrow.eyebrow-wiping,
.technology-decision-box .technology-eyebrow.eyebrow-wiping,
.strategic-philosophy-box .eyebrow.eyebrow-wiping,
.strategic-philosophy-box .strategic-eyebrow.eyebrow-wiping,
.about-purpose-card .eyebrow.eyebrow-wiping,
.about-pov-card .eyebrow.eyebrow-wiping,
.card-box .eyebrow.eyebrow-wiping,
.card-box [class*="-eyebrow"].eyebrow-wiping,
[class*="-box"] .eyebrow.eyebrow-wiping,
[class*="-box"] [class*="-eyebrow"].eyebrow-wiping,
[class*="-card"] .eyebrow.eyebrow-wiping,
[class*="-card"] [class*="-eyebrow"].eyebrow-wiping {
  animation: eyebrowColorTransitionBlack 0.85s cubic-bezier(0.77, 0, 0.175, 1) forwards !important;
}

.strategic-boundary-box .eyebrow.eyebrow-wiping .eyebrow-inner,
.strategic-boundary-box .strategic-eyebrow.eyebrow-wiping .eyebrow-inner,
.technology-direction-box .eyebrow.eyebrow-wiping .eyebrow-inner,
.technology-direction-box .technology-eyebrow.eyebrow-wiping .eyebrow-inner,
.technology-decision-box .eyebrow.eyebrow-wiping .eyebrow-inner,
.technology-decision-box .technology-eyebrow.eyebrow-wiping .eyebrow-inner,
.strategic-philosophy-box .eyebrow.eyebrow-wiping .eyebrow-inner,
.strategic-philosophy-box .strategic-eyebrow.eyebrow-wiping .eyebrow-inner,
.about-purpose-card .eyebrow.eyebrow-wiping .eyebrow-inner,
.about-pov-card .eyebrow.eyebrow-wiping .eyebrow-inner,
.card-box .eyebrow.eyebrow-wiping .eyebrow-inner,
.card-box [class*="-eyebrow"].eyebrow-wiping .eyebrow-inner,
[class*="-box"] .eyebrow.eyebrow-wiping .eyebrow-inner,
[class*="-box"] [class*="-eyebrow"].eyebrow-wiping .eyebrow-inner,
[class*="-card"] .eyebrow.eyebrow-wiping .eyebrow-inner,
[class*="-card"] [class*="-eyebrow"].eyebrow-wiping .eyebrow-inner {
  animation: eyebrowTextRevealAndColorBlack 0.85s cubic-bezier(0.77, 0, 0.175, 1) forwards !important;
}

/* Headings inside any box/card are in BLACK */
.strategic-boundary-box h1,
.strategic-boundary-box h2,
.strategic-boundary-box h3,
.strategic-boundary-box h4,
.technology-direction-box h1,
.technology-direction-box h2,
.technology-direction-box h3,
.technology-direction-box h4,
.technology-decision-box h1,
.technology-decision-box h2,
.technology-decision-box h3,
.technology-decision-box h4,
.strategic-philosophy-box h1,
.strategic-philosophy-box h2,
.strategic-philosophy-box h3,
.strategic-philosophy-box h4,
.about-purpose-card h1,
.about-purpose-card h2,
.about-purpose-card h3,
.about-purpose-card h4,
.about-pov-card h1,
.about-pov-card h2,
.about-pov-card h3,
.about-pov-card h4,
[class*="-box"] h1,
[class*="-box"] h2,
[class*="-box"] h3,
[class*="-box"] h4,
[class*="-card"] h1,
[class*="-card"] h2,
[class*="-card"] h3,
[class*="-card"] h4,
.strategic-philosophy-title,
.technology-decision-title {
  color: rgb(18, 18, 24) !important;
}

/* Perspective Body */
.perspective-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

@media (max-width: 900px) {
  .perspective-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }

}

.perspective-body p,
.connected-section-wrap p,
.closing p {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: rgb(94, 94, 94);
  text-align: left;
}

/* ==========================================================
   CAPABILITIES SECTION & 3-FLOOR BUILDING STAGE
   ========================================================== */
/* ==========================================================================
   Capabilities Section - Pinned Full Viewport Fit & Scroll-Driven Stepping
   ========================================================================== */
/* ==========================================================================
   Capabilities Section - Fit to Screen, Zero Empty Whitespace
   ========================================================================== */
/* ==========================================================================
   Capabilities Section - Equal Border Spacing, App Drawer Border Effects & Full Responsiveness
   ========================================================================== */
.capabilities-section {
  position: relative !important;
  width: 100% !important;
  height: 280vh !important;
  /* Desktop scroll track for pinned sticky scroller */
  padding: 0 !important;
  box-sizing: border-box !important;
  background: var(--paper) !important;
  border-top: none !important;
  border-bottom: none !important;
  overflow: visible !important;
}

.capabilities-sticky-wrap {
  position: sticky !important;
  top: 72px !important;
  width: 100% !important;
  height: calc(100vh - 72px) !important;
  min-height: 580px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.capabilities-sticky-wrap>.wrap,
.capabilities-section .wrap {
  max-width: 1815px !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 auto !important;
  padding: clamp(20px, 2.2vw, 32px) 80px clamp(48px, 4.5vw, 68px) 80px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 16px) !important;
  border-left: 1px solid rgb(217, 217, 217) !important;
  border-right: 1px solid rgb(217, 217, 217) !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.7) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAF8 100%) !important;
  box-sizing: border-box !important;
}

.cap-header-row,
.cap-content-grid {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.cap-header-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 24px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}

.cap-header-left {
  max-width: 780px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.cap-main-heading {
  font-family: var(--font-main) !important;
  font-weight: 500 !important;
  font-size: clamp(20px, 2vw, 30px) !important;
  letter-spacing: -1px !important;
  line-height: 1.15 !important;
  color: rgb(26, 26, 26) !important;
  margin: 0 !important;
  text-align: left !important;
}

.cap-lede-text {
  font-family: var(--font-main) !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.35 !important;
  margin-top: 2px !important;
  max-width: 660px !important;
  text-align: left !important;
}

.cap-header-right {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  padding-top: 2px !important;
}

/* Horizontal section divider with central crosshair dot */
.cap-h-divider {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto clamp(12px, 1.8vw, 20px) auto !important;
  height: 1px !important;
  background-color: rgb(228, 228, 228) !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.cap-grid-crosshair {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 5px !important;
  height: 5px !important;
  background-color: #000000 !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.cap-content-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.15fr !important;
  gap: clamp(28px, 3.5vw, 48px) !important;
  align-items: center !important;
  flex: 1 !important;
  min-height: 0 !important;
  height: auto !important;
  margin-top: 2px !important;
}

.cap-cards-col {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(6px, 0.8vw, 10px) !important;
  padding: 0 !important;
  justify-content: center !important;
  margin-top: 0 !important;
}

/* Left Side Cards - Sharp edges only in grey, NO continuous borders, strictly NO hover */
.cap-card-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  position: relative !important;
  padding: clamp(8px, 0.9vw, 11px) clamp(14px, 1.4vw, 18px) !important;
  border-radius: 0 !important;
  cursor: default !important;
  /* STRICTLY NO HOVER */
  background-color: transparent !important;
  opacity: 0.38 !important;
  /* Normal light/muted opacity for non-active cards */
  border: none !important;
  /* NO BORDERS */
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: scale(1) !important;
  transform-origin: left center !important;
  transition: background-color 0.28s ease, opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Strictly no hover effect on mouse movement */
.cap-card-box:hover {
  cursor: default !important;
}

/* Sharp corner bracket marks in grey color (#A3A3A3) */
.cap-card-box .card-bracket {
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  color: #A3A3A3 !important;
  /* grey color */
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
  z-index: 10 !important;
}

.cap-card-box .card-bracket svg {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
}

.cap-card-box .card-bracket svg path {
  stroke: #A3A3A3 !important;
  stroke-width: 1.3px !important;
}

.cap-card-box .bracket-tl {
  top: -3px !important;
  left: -3px !important;
}

.cap-card-box .bracket-tr {
  top: -3px !important;
  right: -3px !important;
}

.cap-card-box .bracket-bl {
  bottom: -3px !important;
  left: -3px !important;
}

.cap-card-box .bracket-br {
  bottom: -3px !important;
  right: -3px !important;
}

/* Active card: background changes to lite grey (#F4F4F4) with slightly that section alone enlarged */
.cap-card-box.active {
  background-color: #F4F4F4 !important;
  opacity: 1 !important;
  transform: scale(1.025) !important;
  /* slightly that section alone enlarged */
  box-shadow: none !important;
  border: none !important;
}

/* While scrolling & changing: slightly dark flicker style for the changing cards (matching Image 2) */
.cap-card-box.flicker-dark {
  background-color: #E6E6E6 !important;
  /* dark flicker style */
  opacity: 0.95 !important;
  transform: scale(1.018) !important;
  box-shadow: none !important;
  border: none !important;
  transition: background-color 0.12s ease, opacity 0.12s ease, transform 0.12s ease !important;
}

/* Corner brackets visible on active and dark flicker cards */
.cap-card-box.active .card-bracket,
.cap-card-box.flicker-dark .card-bracket {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Card typography */
.cap-card-num {
  font-family: var(--font-main) !important;
  font-size: clamp(14px, 1.2vw, 17px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.4px !important;
  line-height: 20px !important;
  color: rgb(153, 153, 153) !important;
  display: block !important;
  transition: color 0.25s ease !important;
}

.cap-card-box.active .cap-card-num,
.cap-card-box.flicker-dark .cap-card-num {
  color: rgb(26, 26, 26) !important;
}

.cap-card-title {
  font-family: var(--font-main) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: -0.16px !important;
  line-height: 20px !important;
  color: rgb(153, 153, 153) !important;
  margin: 1px 0 0 0 !important;
  transition: color 0.25s ease !important;
}

.cap-card-box.active .cap-card-title {
  color: rgb(0, 0, 0) !important;
}

.cap-card-box.flicker-dark .cap-card-title {
  color: rgb(26, 26, 26) !important;
}

.cap-card-desc {
  font-family: var(--font-main) !important;
  font-weight: 400 !important;
  font-size: 11.5px !important;
  letter-spacing: -0.1px !important;
  line-height: 15px !important;
  color: rgb(153, 153, 153) !important;
  margin: 2px 0 0 0 !important;
  transition: color 0.25s ease !important;
}

.cap-card-box.active .cap-card-desc {
  color: rgb(115, 115, 115) !important;
}

.cap-card-box.flicker-dark .cap-card-desc {
  color: rgb(85, 85, 85) !important;
}

.cap-visual-col {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  align-self: center !important;
}

.cap-building-stage {
  position: relative !important;
  width: 100% !important;
  max-width: min(530px, 42vw) !important;
  max-height: calc(100vh - 250px) !important;
  aspect-ratio: 3 / 2.2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.cap-building-stack {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform !important;
}

.cap-building-stack.state-1 {
  transform: translateY(12%) !important;
}

.cap-building-stack.state-2 {
  transform: translateY(0%) !important;
}

.cap-building-stack.state-3 {
  transform: translateY(-12%) !important;
}

.cap-floor {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

/* Extra gap height between the 3 images (-38% to +38%) perfectly framed inside borders */
.cap-floor-1 {
  transform: translateY(-38%) scale(0.95) !important;
  z-index: 2 !important;
}

.cap-floor-2 {
  transform: translateY(0%) scale(1.0) !important;
  z-index: 3 !important;
}

.cap-floor-3 {
  transform: translateY(38%) scale(1.01) !important;
  z-index: 2 !important;
}

.cap-floor-1.active {
  transform: translateY(-38%) scale(1.03) !important;
  z-index: 6 !important;
}

.cap-floor-2.active {
  transform: translateY(0%) scale(1.05) !important;
  z-index: 6 !important;
}

.cap-floor-3.active {
  transform: translateY(38%) scale(1.03) !important;
  z-index: 6 !important;
}

.cap-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  aspect-ratio: 3 / 2 !important;
  will-change: opacity, transform !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  image-rendering: -webkit-optimize-contrast !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

.cap-skel-img {
  opacity: 0.72 !important;
}

.cap-color-img {
  opacity: 0 !important;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.08)) !important;
}

.cap-floor.active .cap-skel-img {
  opacity: 0 !important;
}

.cap-floor.active .cap-color-img {
  opacity: 1 !important;
}

/* Capabilities responsive rules are unified in the master responsive section below */
/* ==========================================================
   DEPTH SECTION ("Healthcare, with depth" - Framer Split Sticky)
   ========================================================== */
.depth-section {
  position: relative !important;
  overflow: visible !important;
  background-color: var(--paper-tint, #fafafa) !important;
  height: auto !important;
  min-height: 160vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 60px 0 100px 0 !important;
  box-sizing: border-box !important;
}

.depth-section>.wrap {
  position: relative !important;
  overflow: visible !important;
  max-width: 1815px !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 80px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}

.depth-layout {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 80px !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 10 !important;
}

/* Left Column: Pinned Eyebrow + Heading */
.depth-sticky-col {
  flex: 0 0 44% !important;
  max-width: 520px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  z-index: 10 !important;
  align-self: flex-start !important;
  overflow: visible;
  position: sticky !important;
  top: 108px !important;
  /* Floated fixed in the same place below the 72px menu bar */
}

.depth-eyebrow {
  color: var(--mkb-red, #ED1C24) !important;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0 !important;
  border: none !important;
  border-bottom: none !important;
  padding-bottom: 0;
  width: fit-content;
}

.depth-heading {
  font-family: var(--font-main);
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.04em;
  color: #1a1a1a;
  margin: 0;
  text-align: left;
}

/* Right Column: 3 Compact Cards fitted to screen (20px gap) */
.depth-cards-col {
  position: relative !important;
  flex: 0 0 52% !important;
  max-width: 580px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  z-index: 1 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.depth-cards-group {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  width: 100% !important;
}

/* Vertical Progress Bar Spine - Stops strictly ABOVE Card 2 (never reaches bulb icon) */
.depth-progress-bar {
  position: absolute !important;
  left: 42px !important;
  top: 60px !important;
  bottom: 120px !important;
  width: 2px !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.depth-progress-track {
  width: 2px;
  height: 100%;
  background: var(--token-09721aba-082d-4d44-afa9-88da97ab7913, rgb(237, 238, 241));
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

.depth-progress-fill {
  position: absolute;
  inset: 0;
  background: var(--token-9eeddc74-3981-48ed-b1f6-db9260f54e0b, rgb(18, 18, 24));
  border-radius: 999px;
  /* transform: scaleY(0); */
  transform-origin: top;
  will-change: transform;
  transition: transform 0.12s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Depth Card Component */
.depth-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--token-a9835ac4-df83-403f-b9b8-54526398d0e0, rgb(217, 217, 217));
  padding: 24px 28px 24px 76px !important;
  box-sizing: border-box;
  opacity: 0.35;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
  overflow: visible;
}

.depth-card:hover {
  opacity: 0.95;
  border-color: rgb(180, 180, 180);
}

.depth-card.is-active {
  opacity: 1 !important;
  border-color: rgb(170, 170, 170);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* Icon Capsule & Placement */
.depth-card-icon-wrap {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.depth-card-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 50%;
  padding: 4px;
  box-sizing: border-box;
  color: rgb(150, 150, 150);
  fill: rgb(150, 150, 150);
  transition: color 0.3s ease, fill 0.3s ease, transform 0.3s ease;
}

.depth-card-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.depth-card.is-active .depth-card-icon {
  color: rgb(18, 18, 24);
  fill: rgb(18, 18, 24);
  transform: scale(1.05);
}

/* Card Body & Typography */
.depth-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.depth-card-title {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.04em;
  color: rgb(18, 18, 24);
  margin: 0;
  text-align: left;
}

.depth-card-desc {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.02em;
  color: rgb(68, 69, 76);
  margin: 0;
  text-align: left;
}

/* Card Corner Ticks */
.depth-card .card-edge-tick {
  position: absolute;
  width: 8px;
  height: 8px;
  pointer-events: none;
  z-index: 3;
}

.depth-card .edge-tl {
  top: -1px;
  left: -1px;
}

.depth-card .edge-tr {
  top: -1px;
  right: -1px;
}

.depth-card .edge-bl {
  bottom: -1px;
  left: -1px;
}

.depth-card .edge-br {
  bottom: -1px;
  right: -1px;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .depth-section {
    min-height: auto;
  }

  .depth-section>.wrap {
    min-height: auto;
    padding: 60px 20px 80px;
  }

  .depth-layout {
    flex-direction: column;
    gap: 40px;
  }

  .depth-sticky-col {
    position: static;
    max-width: 100%;
  }

  .depth-cards-col {
    width: 100%;
    max-width: 100%;
    padding-bottom: 40px;
  }

  .depth-card {
    padding: 22px 20px 22px 72px;
  }

  .depth-progress-bar {
    left: 36px !important;
    top: 58px !important;
    bottom: 120px !important;
  }

  .depth-card-icon-wrap {
    left: 18px;
  }

}

/* ==========================================================
   FAQ SECTION (CSS Grid 2 columns, 32px gap)
   ========================================================== */
.faq-list {
  width: 100%;
  max-width: 1280px;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 32px !important;
  margin-left: auto;
  margin-right: auto;
  align-items: start !important;
}

@media (max-width: 800px) {
  .faq-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }

}

.faq-item {
  border: 1px solid rgb(217, 217, 217);
  background: var(--paper);
  transition: border-color 0.3s ease;
  position: relative;
  height: fit-content !important;
  align-self: start !important;
}

.faq-q {
  width: 100%;
  height: 78px;
  text-align: left;
  background: none;
  border: none;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 400;
  color: rgb(17, 19, 21);
  cursor: pointer;
}

.faq-plus {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-left: 20px;
}

.faq-plus::before,
.faq-plus::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.faq-plus::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  transform: translateY(-50%);
}

.faq-plus::after {
  left: 50%;
  top: 0;
  height: 100%;
  width: 1.5px;
  transform: translateX(-50%);
}

.faq-item.open .faq-plus::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.open .faq-a {
  max-height: 240px;
}

.faq-a-inner {
  padding: 0 28px 24px;
  font-size: 16px;
  color: rgb(94, 94, 94);
  line-height: 1.5;
}

/* ==========================================================
   CLOSING SECTION
   ========================================================== */
.closing .reveal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.closing .eyebrow,
.closing h2,
.closing p {
  margin: 0;
}

/* ==========================================================
   FOOTER
   ========================================================== */
footer {
  position: relative;
  width: 100% !important;
  border-top: 1px solid rgb(217, 217, 217) !important;
  background: var(--paper, #ffffff);
  box-sizing: border-box !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  padding: 0 !important;
}

@media (max-width: 1024px) {
  footer {
    padding: 0 !important;
  }

}

@media (max-width: 768px) {
  footer {
    padding: 0 !important;
  }

  .footer-top {
    flex-direction: column;
    gap: 24px;
  }

}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.footer-top .logo {
  font-family: var(--font-main);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: flex;
  align-items: center;
}

.footer-top .logo .logo-img {
  display: block !important;
  width: 141px !important;
  height: 43px !important;
  object-fit: contain !important;
}

.footer-top .logo a {
  display: block;
  line-height: 0;
}

.footer-cols {
  display: flex;
  gap: 64px;
}

.footer-col h5,
.footer-heading {
  font-family: var(--font-main);
  font-size: 18px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: #888888 !important;
  margin-bottom: 20px !important;
  text-align: left;
  display: block;
}

.footer-col ul,
.footer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 0;
  margin: 0;
}

.footer-col a,
.footer-link {
  font-family: var(--font-main);
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #000000 !important;
  text-align: left;
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-col a:hover,
.footer-link:hover {
  color: #ED1C24 !important;
}

footer .wrap {
  overflow: visible !important;
}

.footer-divider-line {
  display: block !important;
  position: relative !important;
  width: calc(100% + 160px) !important;
  max-width: calc(100% + 160px) !important;
  margin-left: -80px !important;
  margin-right: -80px !important;
  height: 1px !important;
  background-color: rgb(217, 217, 217) !important;
  border: none !important;
  margin-top: 48px !important;
  margin-bottom: 24px !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.footer-bottom {
  position: relative !important;
  border-top: none !important;
  padding-top: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: rgb(69, 69, 69) !important;
  text-align: left !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

.footer-bottom::before {
  display: none !important;
}

@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    gap: 36px;
  }

  .footer-cols {
    display: flex;
    flex-direction: row;
    gap: 48px;
    flex-wrap: wrap;
    width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
  }

}

@media (max-width: 480px) {
  .footer-cols {
    flex-direction: column;
    gap: 32px;
  }

}

/* ==========================================================
   CUSTOM CURSOR (Exact Spec)
   ========================================================== */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  will-change: transform;
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: rgb(17, 19, 21);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10001;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  will-change: transform;
}

.cursor-ring-1,
.cursor-ring-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border: 1px solid rgb(69, 69, 69);
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  box-sizing: border-box;
}

.cursor-ring-1 {
  animation: cursorPulse 2s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
  animation-delay: 0s;
}

.cursor-ring-2 {
  animation: cursorPulse 2s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
  animation-delay: 1s;
}

@keyframes cursorPulse {

  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  100% {
    transform: scale(3.8);
    opacity: 0;
  }

}

/* Cursor crosshair string lines removed */
/* Cursor remains continuously visible on scroll */
@media (hover: none) {

  .cursor,
  .cursor-dot {
    display: none !important;
  }

}

/* Strict left-alignment as per spec */
p,
.lede,
.hero-copy p,
.perspective-body p,
.connected-section-wrap p,
.closing p,
h1,
h2,
h3,
h4,
h5,
.cap-card-title,
.cap-card-desc,
.depth-card h4,
.depth-card p,
.faq-q,
.faq-a-inner,
.footer-bottom,
.footer-col h5,
.footer-col a {
  text-align: left;
}

/* Darkened edges at border intersections (hairline borders meet section dividers) */
.wrap::before,
.wrap::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  pointer-events: none;
  z-index: 5;
}

.wrap::after {
  display: none !important;
  top: -1px;
  right: -1px;
  border-top: 1px solid rgb(163, 163, 163);
  border-right: 1px solid rgb(163, 163, 163);
}

.wrap::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid rgb(163, 163, 163);
  border-left: 1px solid rgb(163, 163, 163);
}

.wrap-tick-bl,
.wrap-tick-br {
  position: absolute;
  width: 11px;
  height: 11px;
  pointer-events: none;
  z-index: 5;
}

.wrap-tick-br {
  display: block !important;
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid rgb(163, 163, 163) !important;
  border-right: 1px solid rgb(163, 163, 163) !important;
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border-top: 0px !important;
  border-left: 0px !important;
  pointer-events: none;
  z-index: 5;
  box-sizing: border-box;
}

.wrap-tick-bl {
  bottom: -1px;
  left: -1px;
  border-bottom: 1px solid rgb(163, 163, 163);
  border-left: 1px solid rgb(163, 163, 163);
}

/* FAQ Item Corner Intersections (matching exact image spec) */
.faq-item::before,
.faq-item::after {
  display: none !important;
  content: none !important;
}

/* Capability Card Corner Ticks */
.card-tick {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 5;
  box-sizing: border-box;
}

.card-tick-tl {
  top: -1px;
  left: -1px;
  border-top: 1.5px solid rgb(163, 163, 163);
  border-left: 1.5px solid rgb(163, 163, 163);
}

.card-tick-tr {
  top: -1px;
  right: -1px;
  border-top: 1.5px solid rgb(163, 163, 163);
  border-right: 1.5px solid rgb(163, 163, 163);
}

.card-tick-bl {
  bottom: -1px;
  left: -1px;
  border-bottom: 1.5px solid rgb(163, 163, 163);
  border-left: 1.5px solid rgb(163, 163, 163);
}

.card-tick-br {
  bottom: -1px;
  right: -1px;
  border-bottom: 1.5px solid rgb(163, 163, 163);
  border-right: 1.5px solid rgb(163, 163, 163);
}

/* Perspective Section - Single Column Layout (exact match for Image 5) */
.perspective-section {
  padding: 0;
  position: relative;
  background: transparent;
}

.perspective-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 1280px;
  gap: 2px;
  position: relative;
  z-index: 5;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.perspective-heading {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 56px;
  letter-spacing: -2px;
  line-height: 60px;
  color: rgb(26, 26, 26);
  margin: 0;
  text-align: left;
}

.perspective-lede {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: rgb(17, 19, 21);
  margin: 0;
  text-align: left;
}

.perspective-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
}

.perspective-paragraphs p {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: rgb(94, 94, 94);
  margin: 0;
  text-align: left;
  max-width: 820px;
}

.perspective-boxes {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 36px;
  width: 100% !important;
  max-width: 100% !important;
}

.perspective-box {
  position: relative;
  border: 1px solid var(--frame-border, rgb(217, 217, 217));
  padding: 34px 44px 38px 44px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  z-index: 2;
}

.perspective-box-eyebrow {
  margin-bottom: 2px !important;
  text-transform: none !important;
}

.perspective-box-eyebrow .eyebrow-inner {
  font-family: var(--font-main) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--mkb-black, #111315) !important;
}

.perspective-box-text {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: rgb(115, 115, 120);
  margin: 0;
  text-align: left;
}

@media (max-width: 768px) {
  .perspective-heading {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -1px;
  }

}

/* ==========================================================================
   CONNECTED INTELLIGENCE SECTION (Exact Framer Reference Spec)
   Reduced vertical height hugging session content, ~80% globe visible with ~20% submerged
   ========================================================================== */
#intelligence,
#intelligence.section {
  min-height: auto !important;
  height: auto !important;
  position: relative;
  overflow: visible !important;
  scroll-snap-align: none !important;
}

#intelligence>.wrap,
#intelligence .wrap {
  min-height: auto !important;
  height: auto !important;
  padding-top: 60px !important;
  padding-bottom: 80px !important;
  position: relative;
  overflow: visible !important;
}

.connected-section-wrap {
  position: relative;
  width: 100%;
  min-height: 440px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0;
  overflow: visible;
  max-width: 1280px;
  margin: 0 auto;
}

.connected-text-col {
  display: flex;
  flex-direction: column;
  max-width: 620px;
  z-index: 2;
  position: relative;
  gap: 0px;
}

.connected-text-col .eyebrow {
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(217, 95, 85);
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.connected-text-col h2 {
  font-family: var(--font-main);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 16px 0;
  color: #1a1a1a;
}

.connected-body-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.connected-body-text p {
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.58;
  color: rgb(94, 94, 94);
  margin: 0;
  text-align: left;
}

/* Framer Globe Container: Positioned on the right side of Connected Intelligence */
.connected-globe-col {
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 495px;
  height: 495px;
  z-index: 1;
  pointer-events: auto;
  overflow: visible;
}

#wireframe-earth-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
}

#wireframe-earth-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  outline: none;
}

@media (max-width: 1280px) and (min-width: 1025px) {
  .connected-text-col {
    max-width: 540px;
  }

  .connected-globe-col {
    width: 430px;
    height: 430px;
    right: -10px;
  }
}

@media (max-width: 1024px) {

  #intelligence>.wrap,
  #intelligence .wrap {
    padding-bottom: 40px !important;
    height: auto !important;
    min-height: auto !important;
  }

  .connected-section-wrap {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }

  .connected-text-col {
    max-width: 100%;
  }

  .connected-globe-col {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 370px;
    height: 370px;
    margin: 16px auto 0 auto;
  }
}

@media (max-width: 600px) {
  .connected-globe-col {
    width: 310px;
    height: 310px;
  }
}

/* ==========================================================================
   PERSPECTIVE & CONNECTED INTELLIGENCE FRAMED CARD BOXES
   100% Transparent background (grid lines show through), 4 corner ticks,
   and animated eyebrow curtain wipe title.
   ========================================================================== */
.perspective-boxes,
.intel-boxes {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
  margin-bottom: 24px;
  width: 100%;
}

.perspective-box,
.intel-box {
  position: relative;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgb(217, 217, 217);
  padding: 24px clamp(20px, 2.2vw, 30px);
  box-sizing: border-box;
  width: 100%;
}

.perspective-box-eyebrow,
.intel-box-eyebrow {
  margin-bottom: 12px !important;
}

.perspective-box-eyebrow .eyebrow-inner,
.intel-box-eyebrow .eyebrow-inner {
  font-family: var(--font-main, 'Urbanist', -apple-system, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: rgb(17, 19, 21) !important;
  letter-spacing: -0.3px !important;
  text-transform: none !important;
}

.perspective-box-text,
.intel-box-text {
  font-family: var(--font-main, 'Urbanist', -apple-system, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: rgb(94, 94, 94) !important;
  margin: 0 !important;
}

/* 4 Corner Registration Ticks System */
.card-corner {
  position: absolute;
  width: 11px;
  height: 11px;
  pointer-events: none;
  z-index: 5;
  box-sizing: border-box;
}

.card-corner-tl {
  top: -1px;
  left: -1px;
  border-top: 1px solid rgb(163, 163, 163) !important;
  border-left: 1px solid rgb(163, 163, 163) !important;
  border-bottom: none !important;
  border-right: none !important;
}

.card-corner-tr {
  top: -1px;
  right: -1px;
  border-top: 1px solid rgb(163, 163, 163) !important;
  border-right: 1px solid rgb(163, 163, 163) !important;
  border-bottom: none !important;
  border-left: none !important;
}

.card-corner-bl {
  bottom: -1px;
  left: -1px;
  border-bottom: 1px solid rgb(163, 163, 163) !important;
  border-left: 1px solid rgb(163, 163, 163) !important;
  border-top: none !important;
  border-right: none !important;
}

.card-corner-br {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid rgb(163, 163, 163) !important;
  border-right: 1px solid rgb(163, 163, 163) !important;
  border-top: none !important;
  border-left: none !important;
}

/* ==========================================================================
   BORDER SYSTEM (Exact Real Source Spec)
   ========================================================================== */
/* Hairline border variables */
/* Corner-Ticks: Variant A (Top Corners) */
/* Left: Top=1px, Right=0px, Bottom=0px, Left=1px */
.wrap::before,
.wrap-tick-tl,
.card-tick-tl {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 11px;
  height: 11px;
  border-top: 1px solid rgb(163, 163, 163) !important;
  border-right: 0px !important;
  border-bottom: 0px !important;
  border-left: 1px solid rgb(163, 163, 163) !important;
  pointer-events: none;
  z-index: 5;
  box-sizing: border-box;
}

/* Right: Top=1px, Right=1px, Bottom=0px, Left=0px */
.wrap::after,
.wrap-tick-tr,
.card-tick-tr {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  border-top: 1px solid rgb(163, 163, 163) !important;
  border-right: 1px solid rgb(163, 163, 163) !important;
  border-bottom: 0px !important;
  border-left: 0px !important;
  pointer-events: none;
  z-index: 5;
  box-sizing: border-box;
}

/* Corner-Ticks: Variant B (Bottom Corners) */
/* Left: Top=0px, Right=0px, Bottom=1px, Left=1px */
.wrap-tick-bl,
.card-tick-bl {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 11px;
  height: 11px;
  border-top: 0px !important;
  border-right: 0px !important;
  border-bottom: 1px solid rgb(163, 163, 163) !important;
  border-left: 1px solid rgb(163, 163, 163) !important;
  pointer-events: none;
  z-index: 5;
  box-sizing: border-box;
}

/* Right: Top=0px, Right=1px, Bottom=1px, Left=0px */
.wrap-tick-br,
.card-tick-br {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  border-top: 0px !important;
  border-right: 1px solid rgb(163, 163, 163) !important;
  border-bottom: 1px solid rgb(163, 163, 163) !important;
  border-left: 0px !important;
  pointer-events: none;
  z-index: 5;
  box-sizing: border-box;
}

/* Button corner brackets (exact 1px solid) */
.btn-corner-tl {
  border-top: 1px solid var(--corner-color) !important;
  border-left: 1px solid var(--corner-color) !important;
  border-right: 0px !important;
  border-bottom: 0px !important;
}

.btn-corner-tr {
  border-top: 1px solid var(--corner-color) !important;
  border-right: 1px solid var(--corner-color) !important;
  border-left: 0px !important;
  border-bottom: 0px !important;
}

.btn-corner-bl {
  border-bottom: 1px solid var(--corner-color) !important;
  border-left: 1px solid var(--corner-color) !important;
  border-top: 0px !important;
  border-right: 0px !important;
}

.btn-corner-br {
  border-bottom: 1px solid var(--corner-color) !important;
  border-right: 1px solid var(--corner-color) !important;
  border-top: 0px !important;
  border-left: 0px !important;
}

/* Pattern (divider strip): Top=1px, Right=1px, Bottom=0px, Left=1px, rgb(217,217,217), solid */
.pattern-strip,
.divider-strip,
.section-pattern {
  border-top: 1px solid rgb(217, 217, 217);
  border-bottom: 1px solid rgb(217, 217, 217);
  border-left: none !important;
  border-right: none !important;
}

/* Footer / Layout: Top=0px, Right=1px, Bottom=0px, Left=1px, rgb(217,217,217), solid */
footer .wrap,
.footer-layout {
  border-top: 0px !important;
  border-right: none !important;
  border-bottom: 0px !important;
  border-left: 1px solid rgb(217, 217, 217) !important;
}

/* Tag row & eyebrows */
.eyebrow,
.section-tag,
.tag-row {
  border: none !important;
  border-bottom: none !important;
}

/* ==========================================================================
   SECTION DIVIDER STRIP (Exact Two Lines of Borders - 26px Framer Finishing)
   ========================================================================== */
.divider-strip {
  width: 100vw !important;
  height: 38px !important;
  background: transparent !important;
  border-top: 1px solid rgb(217, 217, 217) !important;
  border-bottom: 1px solid rgb(217, 217, 217) !important;
  border-left: none !important;
  border-right: none !important;
  position: relative !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Break out of any parent container to span 100vw from edge to edge */
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  /* Slightly increased spacious gap between section bottom and top borders */
  /* Bottom border of previous section running edge-to-edge */
  /* Top border of next section running edge-to-edge */
}

.divider-strip .wrap {
  height: 100% !important;
  max-width: var(--frame-max-width, 1815px) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 clamp(16px, 2.6vw, 50px) !important;
  position: relative !important;
  border-left: 1px solid var(--frame-border, rgb(217, 217, 217)) !important;
  border-right: 1px solid var(--frame-border, rgb(217, 217, 217)) !important;
  border-top: none !important;
  border-bottom: none !important;
  box-sizing: border-box !important;
}

.divider-strip .wrap-tick-tl {
  position: absolute !important;
  top: -1px !important;
  left: -1px !important;
  width: 14px !important;
  height: 14px !important;
  border-top: 1.5px solid rgb(150, 150, 150) !important;
  border-left: 1.5px solid rgb(150, 150, 150) !important;
  border-bottom: none !important;
  border-right: none !important;
  pointer-events: none !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  display: block !important;
}

.divider-strip .wrap-tick-tr {
  position: absolute !important;
  top: -1px !important;
  right: -1px !important;
  width: 14px !important;
  height: 14px !important;
  border-top: 1.5px solid rgb(150, 150, 150) !important;
  border-right: 1.5px solid rgb(150, 150, 150) !important;
  border-bottom: none !important;
  border-left: none !important;
  pointer-events: none !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  display: block !important;
}

.divider-strip .wrap-tick-bl {
  position: absolute !important;
  bottom: -1px !important;
  left: -1px !important;
  width: 14px !important;
  height: 14px !important;
  border-bottom: 1.5px solid rgb(150, 150, 150) !important;
  border-left: 1.5px solid rgb(150, 150, 150) !important;
  border-top: none !important;
  border-right: none !important;
  pointer-events: none !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  display: block !important;
}

.divider-strip .wrap-tick-br {
  position: absolute !important;
  bottom: -1px !important;
  right: -1px !important;
  width: 14px !important;
  height: 14px !important;
  border-bottom: 1.5px solid rgb(150, 150, 150) !important;
  border-right: 1.5px solid rgb(150, 150, 150) !important;
  border-top: none !important;
  border-left: none !important;
  pointer-events: none !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  display: block !important;
}

.divider-strip .wrap::before,
.divider-strip .wrap::after {
  display: none !important;
  content: none !important;
}

.hero,
.perspective-section,
.capabilities-section,
.connected-section,
.depth-section,
.closing {
  border-top: none !important;
  border-bottom: none !important;
}

.section>.wrap::before,
.section>.wrap::after,
.hero>.wrap::before,
.hero>.wrap::after,
.capabilities-section>.wrap::before,
.capabilities-section>.wrap::after,
.section .wrap-tick-bl,
.section .wrap-tick-br,
.hero .wrap-tick-bl,
.hero .wrap-tick-br,
.capabilities-section .wrap-tick-bl,
.capabilities-section .wrap-tick-br {
  display: none !important;
}

@media (max-width: 900px) {
  .divider-strip .wrap {
    padding: 0 24px;
  }

}

/* ==========================================================================
   ONE-SECTION-PER-SCREEN & 1815PX SIDE GUIDELINES (1280px Centered Content)
   ========================================================================== */
/* Ensure inner content of every section stays centered at 1280px inside 1815px wrap */
.section>.wrap,
.hero>.wrap,
.capabilities-section>.wrap,
footer>.wrap {
  max-width: 1815px;
  width: 100%;
  margin: 0 auto;
  padding: 0 80px;
  position: relative;
  border-left: 1px solid rgb(217, 217, 217) !important;
  border-right: 1px solid rgb(217, 217, 217) !important;
  border-top: none;
  border-bottom: none;
  box-sizing: border-box;
}

.section .wrap>*:not(.spine):not(.wrap-tick-bl):not(.wrap-tick-br),
.hero .wrap>*:not(.spine):not(.wrap-tick-bl):not(.wrap-tick-br),
.capabilities-section .wrap>*:not(.spine):not(.wrap-tick-bl):not(.wrap-tick-br),
footer .wrap>*:not(.spine):not(.wrap-tick-bl):not(.wrap-tick-br):not(.footer-bottom) {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Specific section centering overrides */
.depth-grid {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ==========================================================================
   FULL 100VH SECTION HEIGHT & 100VH FULL-HEIGHT SIDE GUIDELINES
   ========================================================================== */
.section,
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
}

.section>.wrap,
.hero>.wrap {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 80px;
  box-sizing: border-box;
  position: relative;
}

.hero>.wrap {
  padding-top: 100px;
  padding-bottom: 60px;
}

@media (max-width: 900px) {

  .section>.wrap,
  .hero>.wrap {
    padding: 60px 24px;
  }

}

/* ==========================================================
   WAVE HEADING SCROLL EFFECT (Exact Spec)
   ========================================================== */
.wave-heading {
  display: block;
  color: rgb(153, 153, 153);
}

.wave-heading .word {
  display: inline-block;
  white-space: nowrap;
}

.wave-heading .letter {
  color: rgb(153, 153, 153);
  /* unrevealed state: gray */
  transition: color 0.35s ease;
  /* per-letter fade speed */
  display: inline;
  /* unrevealed state: gray */
  /* per-letter fade speed */
}

.wave-heading .letter.revealed {
  color: rgb(26, 26, 26);
  /* revealed state: near-black */
  /* revealed state: near-black */
}

/* ==========================================================================
   4-SIDE CURSOR CROSSHAIR GUIDE LINES
   ========================================================================== */
.cursor-line-v,
.cursor-line-h {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  background: rgba(217, 217, 217, 0.85);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.cursor-line-v {
  top: 0;
  left: 0;
  height: 100vh;
  width: 1px;
}

.cursor-line-h {
  top: 0;
  left: 0;
  width: 100vw;
  height: 1px;
}

@media (hover: none) {

  .cursor-line-v,
  .cursor-line-h {
    display: none !important;
  }

}

/* ==========================================================================
   UNIFIED SESSION HEADINGS - EXACTLY MATCHING PERSPECTIVE SESSION
   Same font-size (56px/36px), font-weight (500), line-height (60px/42px),
   letter-spacing (-2px/-1px), font-family, and wave color fade property.
   ========================================================================== */
.hero-main-heading,
.headline.hero-main-heading,
.perspective-heading,
.wave-heading,
.section:not(.capabilities-section) h2,
.hero h1,
#intelligence h2,
#depth h2,
#faq h2,
#closing h2 {
  font-family: var(--font-main) !important;
  font-weight: 500 !important;
  font-size: 42px !important;
  letter-spacing: -2px !important;
  line-height: 60px !important;
  color: rgb(26, 26, 26);
  margin: 0;
  text-align: left;
}

@media (max-width: 900px) {

  .hero-main-heading,
  .headline.hero-main-heading,
  .perspective-heading,
  .wave-heading,
  .section:not(.capabilities-section) h2,
  .hero h1,
  #intelligence h2,
  #depth h2,
  #faq h2,
  #closing h2 {
    font-size: 36px !important;
    line-height: 42px !important;
    letter-spacing: -1px !important;
  }

}

/* Color changing wave letter property for ALL headings */
/* ==========================================================================
   RIGHT-SIDE BORDERS - RESTORED & DISPLAYED FOR ALL SESSIONS
   ========================================================================== */
.wrap,
.header-inner,
.divider-strip .wrap,
.section>.wrap,
.hero>.wrap,
.capabilities-section>.wrap,
footer .wrap,
.footer-layout {
  border-left: 1px solid rgb(217, 217, 217) !important;
  border-right: 1px solid rgb(217, 217, 217) !important;
}

/* Right-side corner ticks displayed for all session wraps */
.wrap::after,
.wrap-tick-tr,
.header-inner::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  border-top: 1px solid rgb(163, 163, 163) !important;
  border-right: 1px solid rgb(163, 163, 163) !important;
  border-bottom: 0px !important;
  border-left: 0px !important;
  pointer-events: none;
  z-index: 5;
  box-sizing: border-box;
  display: block !important;
}

/* ==========================================================================
   BORDER INTERSECTIONS: SLIGHT DARK EDGES (RGB 163, 163, 163)
   ========================================================================== */
.wrap::before,
.wrap-tick-tl {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  border-top: 1px solid rgb(163, 163, 163) !important;
  border-left: 1px solid rgb(163, 163, 163) !important;
  border-right: none !important;
  border-bottom: none !important;
  pointer-events: none;
  z-index: 10;
  box-sizing: border-box;
  display: block !important;
}

.wrap::after,
.wrap-tick-tr {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-top: 1px solid rgb(163, 163, 163) !important;
  border-right: 1px solid rgb(163, 163, 163) !important;
  border-left: none !important;
  border-bottom: none !important;
  pointer-events: none;
  z-index: 10;
  box-sizing: border-box;
  display: block !important;
}

.wrap-tick-bl,
.header-inner::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  border-bottom: 1px solid rgb(163, 163, 163) !important;
  border-left: 1px solid rgb(163, 163, 163) !important;
  border-top: none !important;
  border-right: none !important;
  pointer-events: none;
  z-index: 10;
  box-sizing: border-box;
  display: block !important;
}

.wrap-tick-br,
.header-inner::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-bottom: 1px solid rgb(163, 163, 163) !important;
  border-right: 1px solid rgb(163, 163, 163) !important;
  border-top: none !important;
  border-left: none !important;
  pointer-events: none;
  z-index: 10;
  box-sizing: border-box;
  display: block !important;
}

/* ==========================================================================
   /* ==========================================================================
   L'ESPRIT MKB PAGE SPECIFICATION (Exact Framer Design System 1:1)
   https://sparkling-choice-937430.framer.app/l%E2%80%99esprit-mkb
   ========================================================================== */
/* Outer Section Layout & Vertical Guidelines */
.lesprit-hero-section {
  width: 100%;
  position: relative;
  padding: 0;
  background-color: #ffffff;
  border-bottom: 1px solid var(--frame-border);
}

.lesprit-hero-wrap {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 150px clamp(24px, 4.4vw, 80px) 80px clamp(24px, 4.4vw, 80px) !important;
  box-sizing: border-box !important;
}

@media (max-width: 1199px) {
  .lesprit-hero-wrap {
    padding: 120px 40px 60px !important;
  }
}

@media (max-width: 809px) {

  .lesprit-hero-wrap,
  #hero .lesprit-hero-wrap {
    padding: 112px 20px 40px !important;
  }
}

.lesprit-hero-layout,
#hero .lesprit-hero-layout {
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
  padding: 0 !important;
  position: relative !important;
  background-color: transparent !important;
}

/* 1. Animated Tag Wipe Reveal (Uses unified .eyebrow sliding curtain wipe) */
.lesprit-tag-wipe {
  margin-bottom: 24px;
}

/* 2. Main Title (Scroll Wave Letters) */
.lesprit-main-heading {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 56px;
  font-weight: 600;
  line-height: 60px;
  letter-spacing: -2px;
  color: rgb(153, 153, 153);
  margin: 0 0 40px 0;
  text-align: left;
  max-width: 1120px;
}

@media (max-width: 1024px) {
  .lesprit-main-heading {
    font-size: 42px;
    line-height: 48px;
    letter-spacing: -1.5px;
    margin-bottom: 48px;
  }

}

@media (max-width: 640px) {
  .lesprit-main-heading {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -1px;
    margin-bottom: 36px;
  }

}

/* 3. Two-Column Layout (Sticky Left, Scrolling Cards Right) */
.lesprit-columns-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 96px;
  width: 100%;
  position: relative;
}

@media (max-width: 1024px) {
  .lesprit-columns-container {
    flex-direction: column;
    gap: 48px;
  }

}

/* Sticky Left Column */
.lesprit-sticky-col {
  flex: 1 0 0;
  width: 50%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 164px;
  z-index: 2;
}

@media (max-width: 1024px) {
  .lesprit-sticky-col {
    position: static;
    width: 100%;
    max-width: 100%;
  }

}

.lesprit-sticky-heading,
h2.lesprit-sticky-heading,
.lesprit-sticky-heading.wave-heading {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.5px !important;
  color: rgb(153, 153, 153) !important;
  margin: 0 !important;
  text-align: left !important;
}

@media (max-width: 640px) {

  .lesprit-sticky-heading,
  h2.lesprit-sticky-heading,
  .lesprit-sticky-heading.wave-heading {
    font-size: 18px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.3px !important;
  }

}

.lesprit-sticky-text {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.68;
  color: rgb(94, 94, 94);
  margin: 0;
  text-align: left;
  max-width: 520px;
}

/* Panache Box Card in Sticky Column */
.lesprit-panache-box {
  position: relative !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #d9d9d9 !important;
  padding: 28px 24px 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 8px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  transition: border-color 0.3s ease, background-color 0.3s ease !important;
}

.lesprit-panache-box:hover {
  border-color: #1a1a1a !important;
  background-color: #ffffff !important;
}

/* Corner ticks for Panache Box */
.lesprit-panache-box .card-edge-tick,
.lesprit-panache-box .card-corner {
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  pointer-events: none !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
}

.lesprit-panache-box .edge-tl,
.lesprit-panache-box .card-corner-tl {
  top: -1px !important;
  left: -1px !important;
  border-top: 1.5px solid rgb(163, 163, 163) !important;
  border-left: 1.5px solid rgb(163, 163, 163) !important;
}

.lesprit-panache-box .edge-tr,
.lesprit-panache-box .card-corner-tr {
  top: -1px !important;
  right: -1px !important;
  border-top: 1.5px solid rgb(163, 163, 163) !important;
  border-right: 1.5px solid rgb(163, 163, 163) !important;
}

.lesprit-panache-box .edge-bl,
.lesprit-panache-box .card-corner-bl {
  bottom: -1px !important;
  left: -1px !important;
  border-bottom: 1.5px solid rgb(163, 163, 163) !important;
  border-left: 1.5px solid rgb(163, 163, 163) !important;
}

.lesprit-panache-box .edge-br,
.lesprit-panache-box .card-corner-br {
  bottom: -1px !important;
  right: -1px !important;
  border-bottom: 1.5px solid rgb(163, 163, 163) !important;
  border-right: 1.5px solid rgb(163, 163, 163) !important;
}

.lesprit-panache-eyebrow,
.lesprit-panache-box .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--font-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--mkb-red, #ED1C24) !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
  border: none !important;
}

.lesprit-panache-text {
  font-family: var(--font-main) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: rgb(70, 72, 78) !important;
  margin: 0 !important;
  max-width: 90% !important;
}

.lesprit-panache-tagline {
  font-family: var(--font-main) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--mkb-red, #ED1C24) !important;
  margin-top: 10px !important;
  position: relative !important;
  z-index: 2 !important;
  text-transform: none !important;
}

.lesprit-panache-circuit-img {
  position: absolute !important;
  right: 12px !important;
  bottom: 0px !important;
  width: 145px !important;
  max-width: 40% !important;
  height: auto !important;
  opacity: 0.25 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: opacity 0.3s ease !important;
}

.lesprit-panache-box:hover .lesprit-panache-circuit-img {
  opacity: 0.4 !important;
}

/* Right Cards Column */
.lesprit-cards-col {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .lesprit-cards-col {
    width: 100%;
  }

}

/* Individual Principle Card */
.lesprit-card,
.lesprit-card[data-sr].sr-visible:not(.active) {
  position: relative !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  padding: 32px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  opacity: 0.15 !important;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, transform 0.3s ease !important;
  cursor: default !important;
  box-sizing: border-box !important;
}

.lesprit-card.active,
.lesprit-card[data-sr].sr-visible.active {
  opacity: 1 !important;
  border-color: rgb(217, 217, 217) !important;
  background-color: transparent !important;
}

/* Sharp L-shaped 1.5px Corner Ticks on Each Card matching standard MKB design */
.lesprit-card .card-corner {
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  pointer-events: none !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
}

.lesprit-card .card-corner-tl {
  top: -1px !important;
  left: -1px !important;
  border-top: 1.5px solid rgb(163, 163, 163) !important;
  border-left: 1.5px solid rgb(163, 163, 163) !important;
  border-right: none !important;
  border-bottom: none !important;
}

.lesprit-card .card-corner-tr {
  top: -1px !important;
  right: -1px !important;
  border-top: 1.5px solid rgb(163, 163, 163) !important;
  border-right: 1.5px solid rgb(163, 163, 163) !important;
  border-left: none !important;
  border-bottom: none !important;
}

.lesprit-card .card-corner-bl {
  bottom: -1px !important;
  left: -1px !important;
  border-bottom: 1.5px solid rgb(163, 163, 163) !important;
  border-left: 1.5px solid rgb(163, 163, 163) !important;
  border-top: none !important;
  border-right: none !important;
}

.lesprit-card .card-corner-br {
  bottom: -1px !important;
  right: -1px !important;
  border-bottom: 1.5px solid rgb(163, 163, 163) !important;
  border-right: 1.5px solid rgb(163, 163, 163) !important;
  border-top: none !important;
  border-left: none !important;
}

.lesprit-card.active .card-corner {
  opacity: 1 !important;
  border-color: rgb(163, 163, 163) !important;
}

/* Card Content matching exact user screenshot typography */
.lesprit-card .card-eyebrow {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #121218 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.lesprit-card .card-title {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: rgb(94, 94, 94) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* 4. Scroll Wave Letter Reveal Engine */
/* 5. Closing / Faqs Section */
.lesprit-closing-section {
  width: 100%;
  position: relative;
  padding: 0;
  background-color: #ffffff;
  border-bottom: 1px solid var(--frame-border);
}

.lesprit-closing-layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px clamp(24px, 4.4vw, 80px) 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  background-color: #ffffff;
}

@media (max-width: 809px) {
  .lesprit-closing-layout {
    padding: 50px 20px 60px;
  }

}

.lesprit-closing-layout .eyebrow {
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lesprit-closing-heading {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: rgb(26, 26, 26);
  max-width: 840px;
  margin: 0 0 18px 0;
}

@media (max-width: 768px) {
  .lesprit-closing-heading {
    font-size: 30px;
    line-height: 1.25;
  }

}

.lesprit-closing-sub {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: rgb(94, 94, 94);
  max-width: 640px;
  margin: 0 0 36px 0;
}

/* ==========================================================================
   CLOSING SECTION & INTERACTIVE HALFTONE CANVAS
   ========================================================================== */
.closing {
  text-align: left;
  padding: 160px 0;
  position: relative;
  overflow: hidden;
}

.closing-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.closing .wrap {
  position: relative;
  z-index: 1;
}

.closing h2 {
  font-family: var(--font-main, 'Urbanist', sans-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(32px, 4.2vw, 56px) !important;
  max-width: 760px;
  line-height: 1.07 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 20px !important;
  color: var(--ink, rgb(17, 19, 21)) !important;
}

.closing p {
  color: var(--muted, rgb(94, 94, 94)) !important;
  font-size: 16px !important;
  max-width: 480px;
  margin-bottom: 44px !important;
  line-height: 1.65 !important;
}

/* L-Shaped Corner Bracket Button System */
.btn {
  --corner-color: var(--accent, rgb(255, 0, 0));
  position: relative;
  font-size: 15px;
  font-family: var(--font-main, 'Urbanist', sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 14px 24px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s ease, color 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--ink, rgb(17, 19, 21));
  color: rgb(242, 243, 240);
}

.btn-secondary {
  --corner-color: var(--line-strong, rgb(163, 163, 163));
  background: rgb(240, 240, 240);
  border: 1px solid var(--line-strong, rgb(163, 163, 163));
  color: var(--ink, rgb(17, 19, 21));
}

/* L-shaped corner brackets, flush at rest, pull 4px inward on hover */
.corner {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
}

.corner-tl {
  top: 0;
  left: 0;
  border-top: 1.2px solid var(--corner-color);
  border-left: 1.2px solid var(--corner-color);
}

.corner-tr {
  top: 0;
  right: 0;
  border-top: 1.2px solid var(--corner-color);
  border-right: 1.2px solid var(--corner-color);
}

.corner-bl {
  bottom: 0;
  left: 0;
  border-bottom: 1.2px solid var(--corner-color);
  border-left: 1.2px solid var(--corner-color);
}

.corner-br {
  bottom: 0;
  right: 0;
  border-bottom: 1.2px solid var(--corner-color);
  border-right: 1.2px solid var(--corner-color);
}

.btn:hover .corner-tl {
  top: 4px;
  left: 4px;
}

.btn:hover .corner-tr {
  top: 4px;
  right: 4px;
}

.btn:hover .corner-bl {
  bottom: 4px;
  left: 4px;
}

.btn:hover .corner-br {
  bottom: 4px;
  right: 4px;
}

.btn .arrow {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn:hover .arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   FINAL OVERRIDE: EXACT TWO-LINE SECTION BORDER SYSTEM WITH CORNER TICKS
   ========================================================================== */
@media (max-width: 900px) {
  .divider-strip .wrap {
    padding: 0 24px !important;
  }

}

/* Sections themselves have NO top/bottom borders so EXACTLY two lines appear between sections */
section,
.section,
.hero,
.perspective-section,
.capabilities-section,
.connected-section,
.depth-section,
.closing {
  border-top: none !important;
  border-bottom: none !important;
}

.section>.wrap,
.hero>.wrap,
.capabilities-section>.wrap {
  border-top: none !important;
  border-bottom: none !important;
}

/* Suppress redundant corner ticks inside section wraps so only the divider strip ticks display */
/* ==========================================================================
   HEALTHCARE WITH DEPTH: FLOATING FIXED HEADING & SCROLLING CARDS
   ========================================================================== */
/* Heading floats fixed below menu bar until section's end border meets it */
/* Right side content scrolls through the viewport and hides sequentially */
/* ==========================================================================
   EXACT BORDER ALIGNMENT & RESPONSIVE DEVICE SYSTEM
   ========================================================================== */
html,
body {
  overflow-x: clip !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--paper) !important;
  scrollbar-gutter: auto !important;
}

/* Header border line and content border line in a 100% straight vertical line on desktop */
@media (min-width: 1025px) {
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
  }

  .site-header .wrap.header-wrap,
  .section>.wrap,
  .hero>.wrap,
  .capabilities-section>.wrap,
  .depth-section>.wrap,
  .divider-strip .wrap,
  footer .wrap {
    max-width: 1815px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 80px !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
    box-sizing: border-box !important;
  }

}

/* Tablet & Mobile Media Queries (< 1025px) */
@media (max-width: 1024px) {
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 72px !important;
    z-index: 1000 !important;
  }

  .site-header .wrap.header-wrap {
    padding: 0 clamp(16px, 2.6vw, 50px) !important;
  }

  .section>.wrap,
  .hero>.wrap,
  .capabilities-section>.wrap,
  .depth-section>.wrap,
  .divider-strip .wrap,
  footer .wrap {
    padding: 0 24px !important;
  }

  .headline.hero-main-heading,
  .hero-main-heading {
    white-space: normal !important;
    font-size: clamp(30px, 5.5vw, 48px) !important;
    line-height: 1.18 !important;
  }

  /* Capabilities Section on Tablet/Mobile */
  .capabilities-section {
    height: auto !important;
    min-height: auto !important;
    padding: 0 !important;
  }

  .capabilities-section>.wrap {
    height: auto !important;
    /* Equal border spacing on tablet: 36px top/bottom and 32px left/right */
    padding: 36px 32px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.7) !important;
  }

  .cap-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .cap-content-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .cap-building-stage {
    max-width: 460px !important;
    aspect-ratio: 3 / 2.2 !important;
    margin: 0 auto !important;
  }

  /* Depth Section on Tablet/Mobile */
  .depth-section {
    height: auto !important;
    min-height: auto !important;
    padding: 40px 0 !important;
  }

  .depth-section>.wrap {
    height: auto !important;
    padding: 24px 24px !important;
  }

  .depth-layout {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 28px !important;
  }

  .depth-sticky-col,
  .depth-cards-col {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

}

/* Small Smartphone Media Queries (< 600px) */
@media (max-width: 600px) {

  .site-header .wrap.header-wrap,
  .section>.wrap,
  .hero>.wrap,
  .depth-section>.wrap,
  .divider-strip .wrap,
  footer .wrap {
    padding: 0 16px !important;
  }

  /* Capabilities Section Equal Border Spacing on Mobile: 24px top/bottom, 20px left/right */
  .capabilities-section>.wrap {
    padding: 24px 20px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
  }

  .hero-ctas {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  .hero-ctas .framer-corner-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .cap-card-box {
    padding: 12px 14px !important;
  }

  .depth-card {
    padding: 18px 16px 18px 64px !important;
  }

  .header-nav-drawer {
    padding: 20px 20px 24px 20px !important;
    height: 52vh !important;
    max-height: 52vh !important;
  }

}

/* ==========================================================================
   INDIVIDUAL RESPONSIVE SECTION BORDER STYLES & SPACING (All 4 Sides)
   ========================================================================== */
/* Base container rule: keep .wrap at 1815px max, centered, relative with borders */
#hero>.wrap,
#perspective>.wrap,
#capabilities>.wrap,
#intelligence>.wrap,
#depth>.wrap,
#faq>.wrap,
#closing>.wrap,
footer>.wrap {
  position: relative !important;
  max-width: 1815px !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   1. HERO SECTION (#hero)
   -------------------------------------------------------------------------- */
#hero {
  border-top: 1px solid rgb(217, 217, 217) !important;
  border-bottom: 1px solid rgb(217, 217, 217) !important;
  border-left: none !important;
  border-right: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#hero>.wrap {
  border-left: 1px solid rgb(217, 217, 217) !important;
  border-right: 1px solid rgb(217, 217, 217) !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 120px 80px 80px 80px !important;
}

#hero .hero-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

#hero .hero-main-heading {
  margin-top: 0 !important;
  margin-bottom: 32px !important;
  padding-bottom: 12px !important;
}

/* --------------------------------------------------------------------------
   2. PERSPECTIVE SECTION (#perspective)
   -------------------------------------------------------------------------- */
#perspective {
  border-top: 1px solid rgb(217, 217, 217) !important;
  border-bottom: 1px solid rgb(217, 217, 217) !important;
  border-left: none !important;
  border-right: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#perspective>.wrap {
  border-left: 1px solid rgb(217, 217, 217) !important;
  border-right: 1px solid rgb(217, 217, 217) !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 80px 80px !important;
}

#perspective .perspective-col {
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

#perspective .eyebrow {
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
}

#perspective .perspective-heading,
#perspective h2 {
  margin-top: 0 !important;
  margin-bottom: 36px !important;
}

/* --------------------------------------------------------------------------
   3. CAPABILITIES SECTION (#capabilities)
   -------------------------------------------------------------------------- */
#capabilities {
  border-top: 1px solid rgb(217, 217, 217) !important;
  border-bottom: 1px solid rgb(217, 217, 217) !important;
  border-left: none !important;
  border-right: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#capabilities>.wrap {
  border-left: 1px solid rgb(217, 217, 217) !important;
  border-right: 1px solid rgb(217, 217, 217) !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 60px 80px !important;
}

#capabilities .cap-header-row {
  max-width: 1280px !important;
  margin: 0 auto 36px auto !important;
  padding-bottom: 20px !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}

#capabilities .cap-section-heading {
  margin-top: 14px !important;
  margin-bottom: 20px !important;
}

#capabilities .cap-content-grid {
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
  flex: 0 1 auto !important;
  min-height: 0 !important;
  align-items: center !important;
  margin-bottom: 24px !important;
}

/* --------------------------------------------------------------------------
   4. CONNECTED INTELLIGENCE SECTION (#intelligence)
   -------------------------------------------------------------------------- */
#intelligence {
  border-top: 1px solid rgb(217, 217, 217) !important;
  border-bottom: 1px solid rgb(217, 217, 217) !important;
  border-left: none !important;
  border-right: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#intelligence>.wrap {
  border-left: 1px solid rgb(217, 217, 217) !important;
  border-right: 1px solid rgb(217, 217, 217) !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 80px 80px !important;
}

#intelligence .connected-section-wrap {
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

#intelligence .eyebrow {
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
}

#intelligence h2 {
  margin-top: 0 !important;
  margin-bottom: 32px !important;
}

/* --------------------------------------------------------------------------
   5. HEALTHCARE DEPTH SECTION (#depth)
   -------------------------------------------------------------------------- */
#depth {
  border-top: 1px solid rgb(217, 217, 217) !important;
  border-bottom: 1px solid rgb(217, 217, 217) !important;
  border-left: none !important;
  border-right: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#depth>.wrap {
  border-left: 1px solid rgb(217, 217, 217) !important;
  border-right: 1px solid rgb(217, 217, 217) !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 80px 80px !important;
}

#depth .depth-layout {
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 96px !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 10 !important;
}

#depth .depth-eyebrow {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  color: var(--mkb-red, #ED1C24) !important;
  font-family: var(--font-main) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  border: none !important;
  border-bottom: none !important;
  width: fit-content !important;
}

#depth .depth-heading {
  margin-top: 0 !important;
  margin-bottom: 32px !important;
  font-family: var(--font-main) !important;
  font-size: clamp(40px, 4.2vw, 56px) !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
  color: rgb(18, 18, 24) !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   6. FAQ SECTION (#faq)
   -------------------------------------------------------------------------- */
#faq {
  border-top: 1px solid rgb(217, 217, 217) !important;
  border-bottom: 1px solid rgb(217, 217, 217) !important;
  border-left: none !important;
  border-right: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#faq>.wrap {
  border-left: 1px solid rgb(217, 217, 217) !important;
  border-right: 1px solid rgb(217, 217, 217) !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 80px 80px !important;
  max-width: 1815px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  position: relative !important;
}

#faq .section-head {
  max-width: 1280px !important;
  margin: 0 auto 52px auto !important;
  width: 100% !important;
  margin-bottom: 56px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding: 0 !important;
  justify-content: flex-start !important;
}

#faq .eyebrow {
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
}

#faq h2 {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

#faq .faq-list {
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 28px !important;
  align-items: start !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* --------------------------------------------------------------------------
   7. CLOSING SECTION (#closing)
   -------------------------------------------------------------------------- */
#closing {
  border-top: 1px solid rgb(217, 217, 217) !important;
  border-bottom: 1px solid rgb(217, 217, 217) !important;
  border-left: none !important;
  border-right: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

#closing>.wrap {
  border-left: 1px solid rgb(217, 217, 217) !important;
  border-right: 1px solid rgb(217, 217, 217) !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 80px 80px !important;
  position: relative !important;
  z-index: 1 !important;
}

#closing .reveal {
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
  gap: 0px !important;
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

#closing .eyebrow {
  margin-bottom: 16px !important;
  padding-bottom: 4px !important;
}

#closing h2 {
  margin-top: 0 !important;
  margin-bottom: 28px !important;
}

/* --------------------------------------------------------------------------
   8. FOOTER (footer)
   -------------------------------------------------------------------------- */
footer>.wrap {
  border-left: 1px solid rgb(217, 217, 217) !important;
  border-right: 1px solid rgb(217, 217, 217) !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 60px 80px 40px 80px !important;
  position: relative !important;
  overflow: visible !important;
}

/* Footer top-left corner tick (CSS-generated — HTML only has BL & BR) */
footer>.wrap::before {
  content: '' !important;
  position: absolute !important;
  top: -1px !important;
  left: -1px !important;
  width: 12px !important;
  height: 12px !important;
  border-top: 1.5px solid rgb(163, 163, 163) !important;
  border-left: 1.5px solid rgb(163, 163, 163) !important;
  border-right: none !important;
  border-bottom: none !important;
  pointer-events: none !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Footer top-right corner tick (CSS-generated) */
footer>.wrap::after {
  content: '' !important;
  position: absolute !important;
  top: -1px !important;
  right: -1px !important;
  width: 12px !important;
  height: 12px !important;
  border-top: 1.5px solid rgb(163, 163, 163) !important;
  border-right: 1.5px solid rgb(163, 163, 163) !important;
  border-left: none !important;
  border-bottom: none !important;
  pointer-events: none !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Footer bottom-left corner tick */
footer .wrap-tick-bl {
  position: absolute !important;
  bottom: -1px !important;
  left: -1px !important;
  top: auto !important;
  right: auto !important;
  width: 12px !important;
  height: 12px !important;
  border-bottom: 1.5px solid rgb(163, 163, 163) !important;
  border-left: 1.5px solid rgb(163, 163, 163) !important;
  border-top: none !important;
  border-right: none !important;
  pointer-events: none !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Footer bottom-right corner tick */
footer .wrap-tick-br {
  position: absolute !important;
  bottom: -1px !important;
  right: -1px !important;
  top: auto !important;
  left: auto !important;
  width: 12px !important;
  height: 12px !important;
  border-bottom: 1.5px solid rgb(163, 163, 163) !important;
  border-right: 1.5px solid rgb(163, 163, 163) !important;
  border-top: none !important;
  border-left: none !important;
  pointer-events: none !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  display: block !important;
}

footer .footer-top {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* ==========================================================================
   RESPONSIVE DEVICE MEDIA QUERIES (Tablet & Mobile Free Spacing & Borders)
   ========================================================================== */
/* TABLET (max-width: 1024px) */
@media (max-width: 1024px) {
  #hero {
    border-top: 1px solid rgb(217, 217, 217) !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
  }

  #hero>.wrap {
    padding: 100px 32px 60px 32px !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
  }

  #hero .hero-main-heading {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }

  #perspective {
    border-top: 1px solid rgb(217, 217, 217) !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
  }

  #perspective>.wrap {
    padding: 60px 32px !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
  }

  #perspective .perspective-heading,
  #perspective h2 {
    margin-top: 0 !important;
    margin-bottom: 28px !important;
  }

  #capabilities {
    border-top: 1px solid rgb(217, 217, 217) !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
  }

  #capabilities>.wrap {
    padding: 48px 32px !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
  }

  #intelligence {
    border-top: 1px solid rgb(217, 217, 217) !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
  }

  #intelligence>.wrap {
    padding: 60px 32px !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
  }

  #intelligence h2 {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }

  #depth {
    border-top: 1px solid rgb(217, 217, 217) !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
  }

  #depth>.wrap {
    padding: 60px 32px !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
  }

  #depth .depth-heading {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }

  #faq {
    border-top: 1px solid rgb(217, 217, 217) !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
  }

  #faq>.wrap {
    padding: 60px 32px !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
  }

  #faq h2 {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }

  #closing {
    border-top: 1px solid rgb(217, 217, 217) !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
  }

  #closing>.wrap {
    padding: 60px 32px !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
  }

  #closing h2 {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }

  footer {
    border-top: 1px solid rgb(217, 217, 217) !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
    padding: 0 !important;
  }

  footer>.wrap {
    padding: 48px 32px 32px 32px !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
  }

  .footer-divider-line {
    width: calc(100% + 64px) !important;
    max-width: calc(100% + 64px) !important;
    margin-left: -32px !important;
    margin-right: -32px !important;
    margin-top: 36px !important;
    margin-bottom: 20px !important;
  }

}

/* MOBILE PHONES (max-width: 640px) */
@media (max-width: 640px) {
  #hero {
    border-top: 1px solid rgb(217, 217, 217) !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
  }

  #hero>.wrap {
    padding: 88px 18px 48px 18px !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
  }

  #hero .hero-main-heading {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }

  #perspective {
    border-top: 1px solid rgb(217, 217, 217) !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
  }

  #perspective>.wrap {
    padding: 44px 18px !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
  }

  #perspective .perspective-heading,
  #perspective h2 {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }

  #capabilities {
    border-top: 1px solid rgb(217, 217, 217) !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
  }

  #capabilities>.wrap {
    padding: 36px 18px !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
  }

  #capabilities .cap-header-row {
    margin-bottom: 24px !important;
    padding-bottom: 14px !important;
  }

  #intelligence {
    border-top: 1px solid rgb(217, 217, 217) !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
  }

  #intelligence>.wrap {
    padding: 44px 18px !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
  }

  #intelligence h2 {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }

  #depth {
    border-top: 1px solid rgb(217, 217, 217) !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
  }

  #depth>.wrap {
    padding: 44px 18px !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
  }

  #depth .depth-heading {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }

  #faq {
    border-top: 1px solid rgb(217, 217, 217) !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
  }

  #faq>.wrap {
    padding: 44px 18px !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
  }

  #faq .section-head {
    margin-bottom: 24px !important;
  }

  #faq h2 {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }

  #closing {
    border-top: 1px solid rgb(217, 217, 217) !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
  }

  #closing>.wrap {
    padding: 44px 18px !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
  }

  #closing h2 {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }

  footer {
    border-top: 1px solid rgb(217, 217, 217) !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
    padding: 0 !important;
  }

  footer>.wrap {
    padding: 36px 18px 24px 18px !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
  }

  .footer-divider-line {
    width: calc(100% + 36px) !important;
    max-width: calc(100% + 36px) !important;
    margin-left: -18px !important;
    margin-right: -18px !important;
    margin-top: 28px !important;
    margin-bottom: 16px !important;
  }

}

/* ==========================================================================
   CAPABILITIES SECTION: 320vh ROCK-SOLID PINNED TRACK
   ========================================================================== */
#capabilities.capabilities-section {
  position: relative !important;
  height: 320vh !important;
  min-height: 320vh !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  padding: 0 !important;
  display: block !important;
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
}

#capabilities.capabilities-section .capabilities-sticky-wrap>.wrap,
#capabilities.capabilities-section>.wrap {
  position: relative !important;
  height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 16px) !important;
  padding: clamp(20px, 2.2vw, 32px) 80px clamp(50px, 5vw, 75px) 80px !important;
  overflow: visible !important;
  z-index: 10 !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-left: 1px solid rgb(217, 217, 217) !important;
  border-right: 1px solid rgb(217, 217, 217) !important;
}

@media (max-width: 900px) {
  #capabilities.capabilities-section {
    height: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    position: relative !important;
  }

  #capabilities.capabilities-section .capabilities-sticky-wrap {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    transform: none !important;
  }

  #capabilities.capabilities-section .capabilities-sticky-wrap>.wrap,
  #capabilities.capabilities-section>.wrap {
    height: auto !important;
    min-height: auto !important;
    padding: 36px 20px 48px 20px !important;
  }

  #capabilities .cap-grid-2col {
    flex-direction: column !important;
    gap: 28px !important;
  }

  #capabilities .cap-left-cards-col,
  #capabilities .cap-visual-col {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
  }

  #capabilities .cap-building-stage {
    transform: scale(0.92) !important;
    margin: 16px auto 0 auto !important;
  }
}

/* Building stage aligned so Floor 3 has equal, generous space above bottom border */
#capabilities .cap-visual-col {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  max-height: 100% !important;
  margin-top: -10px !important;
  overflow: visible !important;
}

#capabilities .cap-building-stage {
  position: relative !important;
  width: 100% !important;
  max-width: 440px !important;
  aspect-ratio: 3 / 2.2 !important;
  margin-top: 0 !important;
  overflow: visible !important;
  transform: scale(0.80) !important;
  transform-origin: center center !important;
}

/* Extra gap between floor images in height (-38% to +38%) */
#capabilities .cap-floor-1 {
  transform: translateY(-38%) scale(0.94) !important;
}

#capabilities .cap-floor-2 {
  transform: translateY(0%) scale(0.98) !important;
}

#capabilities .cap-floor-3 {
  transform: translateY(38%) scale(0.95) !important;
}

#capabilities .cap-floor-1.active {
  transform: translateY(-38%) scale(1.0) !important;
  z-index: 6 !important;
}

#capabilities .cap-floor-2.active {
  transform: translateY(0%) scale(1.02) !important;
  z-index: 6 !important;
}

#capabilities .cap-floor-3.active {
  transform: translateY(38%) scale(1.0) !important;
  z-index: 6 !important;
}

/* Wireframe skeleton vs Color rendering transitions */
#capabilities .cap-skel-img {
  opacity: 0.75 !important;
  transition: opacity 0.35s ease !important;
}

#capabilities .cap-color-img {
  opacity: 0 !important;
  transition: opacity 0.35s ease, filter 0.35s ease !important;
}

#capabilities .cap-floor.active .cap-skel-img {
  opacity: 0 !important;
}

#capabilities .cap-floor.active .cap-color-img {
  opacity: 1 !important;
}

/* ==========================================================================
   EXACT FRAMER DESIGN: "HEALTHCARE, WITH DEPTH" STICKY PINNED SCROLLER
   - Left: Sticky floating heading (top: 164px)
   - Right: Continuous vertical spine line (left: 42px) with moving active segment
   - Cards: 3 boxes with identical Framer paddings, borders, corner accents, and smooth progressive fade
   ========================================================================== */
#depth.depth-section {
  position: relative !important;
  background-color: #FFFFFF !important;
  /* Pure crisp Framer background */
  overflow: visible !important;
  padding: 80px 0 160px 0 !important;
  box-sizing: border-box !important;
}

#depth.depth-section>.wrap {
  position: relative !important;
  overflow: visible !important;
  max-width: 1815px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 80px !important;
  box-sizing: border-box !important;
  border-left: 1px solid rgb(217, 217, 217) !important;
  border-right: 1px solid rgb(217, 217, 217) !important;
}

/* Left Column: Exactly matching Framer .framer-xzzklb */
#depth .depth-sticky-col {
  position: sticky !important;
  top: 130px !important;
  /* Exact Framer sticky top offset */
  align-self: flex-start !important;
  flex: 1 0 0 !important;
  max-width: 560px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  z-index: 20 !important;
  overflow: visible !important;
  padding-top: 8px !important;
}

/* Right Column: Exactly matching Framer .framer-a5rd35 */
#depth .depth-cards-col {
  position: relative !important;
  flex: 1 0 0 !important;
  max-width: 570px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  /* Clean, elegant gap between card boxes */
  padding: 0 !important;
  z-index: 1 !important;
  overflow: visible !important;
}

/* Continuous Vertical Spine Connecting all 3 Icons */
#depth .depth-progress-bar {
  position: absolute !important;
  left: 42px !important;
  top: 40px !important;
  bottom: 40px !important;
  width: 2px !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  pointer-events: none !important;
  /* Above cards border, beneath icons */
  display: block !important;
}

#depth .depth-progress-track {
  width: 2px !important;
  height: 100% !important;
  background: #D9D9D9 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  /* Visible light grey background line */
  display: block !important;
  /* Visible crisp track */
}

#depth .depth-progress-fill {
  position: absolute !important;
  inset: 0 !important;
  background: #111315 !important;
  /* transform: scaleY(0) !important; */
  transform-origin: top center !important;
  will-change: height, transform !important;
  transition: height 0.12s linear !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 0% !important;
  /* Solid pure black */
  border-radius: 999px !important;
  /* transform: scaleY(0) !important; */
  /* Pure black line fill */
  display: block !important;
  /* Pure black line fill */
}

/* Framer Card Box: exactly 570px, 24px 24px 24px 88px padding */
#depth .depth-card {
  position: relative !important;
  background: #FFFFFF !important;
  border: 1px solid rgb(217, 217, 217) !important;
  padding: 24px 28px 24px 88px !important;
  box-sizing: border-box !important;
  opacity: 0.45 !important;
  transition: opacity 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
  overflow: visible !important;
  z-index: 5 !important;
}

#depth .depth-card.is-active {
  opacity: 1 !important;
  border-color: rgb(170, 170, 170) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

#depth .depth-card-icon-wrap {
  position: absolute !important;
  top: 24px !important;
  left: 24px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 25 !important;
  background: #FFFFFF !important;
  border-radius: 50% !important;
}

#depth .depth-card-icon {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  color: rgb(150, 150, 150) !important;
  fill: rgb(150, 150, 150) !important;
  transition: color 0.35s ease, fill 0.35s ease !important;
}

#depth .depth-card.is-active .depth-card-icon {
  color: rgb(18, 18, 24) !important;
  fill: rgb(18, 18, 24) !important;
}

#depth .depth-card-title {
  font-family: var(--font-main) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em !important;
  line-height: 30px !important;
  color: rgb(18, 18, 24) !important;
  margin: 0 0 6px 0 !important;
}

#depth .depth-card-desc {
  font-family: var(--font-main) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: rgb(68, 69, 76) !important;
  margin: 0 !important;
}

/* Responsive adjustment for Mobile/Tablet (< 1024px) */
@media (max-width: 1024px) {
  #depth.depth-section {
    padding: 60px 0 !important;
  }

  #depth .depth-layout {
    flex-direction: column !important;
    gap: 40px !important;
  }

  #depth .depth-sticky-col {
    position: static !important;
    max-width: 100% !important;
  }

  #depth .depth-cards-col {
    width: 100% !important;
    max-width: 100% !important;
    gap: 24px !important;
  }

  #depth .depth-card {
    opacity: 1 !important;
  }

}

/* Continuous Vertical Spine Connecting all 3 Icons - Bold Black Fill */
/* Guarantee Visibility of the Black Progress Spine */
/* ==========================================================================
   FAQ SECTION: HEADING & LEDE IN A CLEAN STRING ROW (SIDE-BY-SIDE)
   ========================================================================== */
#faq .section-head.faq-head-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 60px !important;
  margin-bottom: 48px !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#faq .faq-head-left {
  flex: 1 1 60% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: flex-start !important;
  text-align: left !important;
}

#faq .faq-head-right {
  flex: 0 0 38% !important;
  max-width: 460px !important;
  display: flex !important;
  align-items: flex-end !important;
  padding-bottom: 8px !important;
}

#faq .faq-lede {
  font-family: var(--font-main) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: rgb(115, 115, 120) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  max-width: 460px !important;
  padding: 0 !important;
  text-align: left !important;
}

@media (max-width: 900px) {
  #faq .section-head.faq-head-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  #faq .faq-head-right {
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

}

/* ==========================================================================
   GUARANTEED BLACK VERTICAL PROGRESS SPINE FROM CARD TO CARD
   ========================================================================== */
#depthCardsCol {
  position: relative !important;
}

/* Ensure the white icon circles clip nicely over the spine line without hiding the straight line segments */
/* ==========================================================================
   BULLETPROOF BLACK SPINE LINE & PROGRESSION
   ========================================================================== */
#depthCardsCol .depth-progress-bar,
#depth .depth-progress-bar {
  position: absolute !important;
  left: 42px !important;
  top: 40px !important;
  bottom: 40px !important;
  width: 2.5px !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  pointer-events: none !important;
  display: block !important;
}

#depthCardsCol .depth-progress-track,
#depth .depth-progress-track {
  width: 2.5px !important;
  height: 100% !important;
  background-color: #D9D9D9 !important;
  border-radius: 2px !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}

#depthCardsCol .depth-progress-fill,
#depth .depth-progress-fill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  /* Always shows an active black segment */
  background-color: #000000 !important;
  /* Pure black line fill */
  border-radius: 2px !important;
  display: block !important;
  z-index: 6 !important;
}

/* ==========================================================================
   FAQ HEADER: SIDE-BY-SIDE STRING ROW ALIGNMENT
   ========================================================================== */
#faq .section-head,
#faq .section-head.faq-head-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  margin-bottom: 48px !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#faq .section-head .faq-head-left {
  flex: 1 1 60% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#faq .section-head .faq-head-right,
#faq .section-head>p.lede {
  display: block !important;
  font-family: var(--font-main) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: rgb(115, 115, 120) !important;
  margin: 16px 0 0 0 !important;
  padding: 0 !important;
  max-width: 580px !important;
  text-align: left !important;
}

/* FINAL CONSOLIDATED DEPTH PROGRESS BAR - TERMINATES BEFORE 2ND SVG */
.depth-progress-bar,
#depth .depth-progress-bar,
#depthCardsCol .depth-progress-bar {
  position: absolute !important;
  left: 42px !important;
  top: 42px !important;
  bottom: auto !important;
  width: 2px !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  pointer-events: none !important;
  display: block !important;
  overflow: hidden !important;
}

.depth-progress-track,
#depth .depth-progress-track,
#depthCardsCol .depth-progress-track {
  width: 2px !important;
  height: 100% !important;
  background-color: #D9D9D9 !important;
  /* Visible light grey track line */
  position: relative !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  display: block !important;
}

.depth-progress-fill,
#depth .depth-progress-fill,
#depthCardsCol .depth-progress-fill,
#depthProgressFill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background-color: #111315 !important;
  /* Solid black fill */
  background: #111315 !important;
  display: block !important;
  z-index: 12 !important;
}

/* DIRECT HIGH PRIORITY OVERRIDES */
#depthCardsCol .depth-progress-bar,
.depth-cards-col .depth-progress-bar {
  position: absolute !important;
  left: 42px !important;
  top: 42px !important;
  bottom: auto !important;
  width: 2px !important;
  transform: translateX(-50%) !important;
  z-index: 15 !important;
  pointer-events: none !important;
  display: block !important;
  overflow: hidden !important;
}

#depthCardsCol .depth-progress-track,
.depth-cards-col .depth-progress-track {
  width: 2px !important;
  height: 100% !important;
  background-color: #D9D9D9 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  display: block !important;
}

#depthCardsCol .depth-progress-fill,
.depth-cards-col .depth-progress-fill,
#depthProgressFill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 2px !important;
  min-height: 0 !important;
  background-color: #000000 !important;
  background: #000000 !important;
  z-index: 20 !important;
  display: block !important;
}

/* GUARANTEED UNSTOPPABLE BLACK PROGRESS SPINE */
#depthProgressFill,
.depth-progress-fill,
#depth .depth-progress-fill,
#depthCardsCol .depth-progress-fill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 2px !important;
  background-color: #000000 !important;
  background: #000000 !important;
  z-index: 20 !important;
  display: block !important;
  transform: none !important;
  min-height: 0 !important;
}

/* FAQ Header Align Items Baseline / Center */
/* FAQ Item Independent Expansion */
/* ==========================================================================
   EXACT FRAMER FAQ DESIGN & TYPOGRAPHY
   ========================================================================== */
#faq .faq-eyebrow,
#faq .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--mkb-red, #ED1C24) !important;
  font-family: var(--font-main) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-bottom: none !important;
  padding-bottom: 4px !important;
  margin-bottom: 24px !important;
  width: fit-content !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
  margin: 0 0 24px 0 !important;
  flex-direction: row !important;
  max-width: fit-content !important;
  white-space: nowrap !important;
  align-self: flex-start !important;
  flex: none !important;
}

#faq h2,
#faq .wave-heading {
  font-family: var(--font-main) !important;
  font-size: 48px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.035em !important;
  color: rgb(18, 18, 24) !important;
  max-width: 600px !important;
  margin: 0 0 18px 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
}

/* FAQ Cards */
#faq .faq-item {
  border: 1px solid rgb(222, 222, 224) !important;
  background: #FFFFFF !important;
  height: fit-content !important;
  align-self: start !important;
  border-radius: 0px !important;
  transition: border-color 0.25s ease !important;
  cursor: pointer !important;
}

#faq .faq-item:hover {
  border-color: rgb(180, 180, 185) !important;
}

#faq .faq-q {
  width: 100% !important;
  height: 84px !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
}

#faq .faq-q * {
  pointer-events: none !important;
}

#faq .faq-q span:first-child {
  font-family: var(--font-main) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: rgb(20, 22, 25) !important;
  letter-spacing: -0.015em !important;
}

#faq .faq-icon-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgb(40, 42, 48) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#faq .faq-item.open .faq-icon-arrow {
  transform: rotate(180deg) !important;
}

#faq .faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#faq .faq-item.open .faq-a {
  max-height: 300px;
}

#faq .faq-a-inner {
  padding: 0 28px 24px 28px !important;
  font-family: var(--font-main) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: rgb(110, 110, 115) !important;
}

/* ==========================================================================
   PERFECT FAQ COLUMN ALIGNMENT (Starts straight from left border line)
   ========================================================================== */
#faq .wrap {
  position: relative !important;
}

#faq .faq-lede,
#faq p.lede {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
  font-family: var(--font-main) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: rgb(115, 115, 120) !important;
  max-width: 480px !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   EXACT 1280px CENTERING & PERFECT LEFT-ALIGNMENT MATCHING PERSPECTIVE
   ========================================================================== */
#faq .section-head,
#faq .faq-list {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   FAQ HEADER: SIDE-BY-SIDE STRING ROW ALIGNED WITH 2-COLUMN CARDS
   ========================================================================== */
#faq .section-head.faq-head-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 28px !important;
  align-items: flex-end !important;
  max-width: 1280px !important;
  margin: 0 auto 56px auto !important;
  width: 100% !important;
  padding: 0 !important;
}

#faq .faq-head-left .faq-eyebrow,
#faq .faq-head-left .eyebrow {
  color: var(--mkb-red, #ED1C24) !important;
  font-family: var(--font-main) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin: 0 0 24px 0 !important;
}

#faq .faq-head-left h2,
#faq .faq-head-left .wave-heading {
  font-family: var(--font-main) !important;
  font-size: 48px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.035em !important;
  color: rgb(18, 18, 24) !important;
  margin: 0 !important;
}

#faq .faq-head-right .faq-lede {
  font-family: var(--font-main) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: rgb(115, 115, 120) !important;
  max-width: 440px !important;
  margin: 0 !important;
}

@media (max-width: 800px) {
  #faq .section-head.faq-head-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

}

/* ==========================================================================
   FAQ HEADER: CLEAN STACKED COLUMN (CONTENT DIRECTLY BELOW HEADING)
   ========================================================================== */
#faq .section-head .faq-eyebrow,
#faq .section-head .eyebrow,
#faq .section-head>.eyebrow {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  width: fit-content !important;
  max-width: fit-content !important;
  white-space: nowrap !important;
  color: var(--mkb-red, #ED1C24) !important;
  font-family: var(--font-main) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin: 0 0 24px 0 !important;
  text-align: left !important;
  flex: none !important;
}

#faq .section-head h2,
#faq .section-head .wave-heading {
  font-family: var(--font-main) !important;
  font-size: 48px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.035em !important;
  color: rgb(18, 18, 24) !important;
  margin: 0 0 16px 0 !important;
  text-align: left !important;
  max-width: 580px !important;
}

#faq .section-head .faq-lede,
#faq .section-head p.lede {
  font-family: var(--font-main) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: rgb(115, 115, 120) !important;
  max-width: 480px !important;
  margin: 0 !important;
  text-align: left !important;
}

/* ==========================================================================
   PERFECT FAQ HEADING & SUBTITLE LEFT ALIGNMENT
   ========================================================================== */
#faq h2.wave-heading,
#faq .wave-heading,
#faq h2 {
  align-self: flex-start !important;
  text-align: left !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  max-width: 620px !important;
}

#faq p.lede.faq-lede,
#faq .faq-lede,
#faq p.lede {
  align-self: flex-start !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 600px !important;
  color: rgb(115, 115, 120) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

/* ==========================================================================
   EXACT FRAMER MINIMAL RADIAL DOT + CROSSHAIR CURSOR
   ========================================================================== */
/* Hide native cursor on desktop fine-pointer devices */
@media (pointer: fine) {

  html,
  body,
  a,
  button,
  [role="button"],
  input,
  select,
  textarea,
  .hoverable {
    cursor: none !important;
  }

}

/* Horizontal & Vertical Crosshair Lines */
.custom-cursor-h,
.custom-cursor-v {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99990;
  background-color: rgba(210, 212, 216, 0.75);
  opacity: 0;
  will-change: transform;
  transition: opacity 0.25s ease;
}

.custom-cursor-h {
  width: 100vw;
  height: 1px;
}

.custom-cursor-v {
  width: 1px;
  height: 100vh;
}

/* Center Radial Focus Unit */
.custom-cursor-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 99995;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.25s ease;
}

/* Center Dot: sharp, minimal, dark charcoal */
.custom-cursor-wrap .cursor-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 4.5px;
  height: 4.5px;
  background-color: #111315;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}

/* Subtle Radial Halo */
.custom-cursor-wrap .cursor-radial-halo {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  background: radial-gradient(circle, rgba(18, 20, 24, 0.055) 0%, rgba(18, 20, 24, 0) 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Subtle Surrounding Ring */
.custom-cursor-wrap .cursor-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(18, 20, 24, 0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, opacity 0.22s ease;
}

/* Click Ripple: quick, small, elegant */
.custom-cursor-wrap .cursor-click-ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border: 1.2px solid rgba(18, 20, 24, 0.45);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
}

.custom-cursor-wrap .cursor-click-ripple.animate {
  animation: cursorRippleAnim 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cursorRippleAnim {

  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }

  100% {
    transform: translate(-50%, -50%) scale(3.4);
    opacity: 0;
  }

}

/* --- STATE: INTERACTIVE (Buttons, Links, Inputs) --- */
.custom-cursor-wrap.state-interactive .cursor-dot {
  transform: translate(-50%, -50%) scale(1.3);
  background-color: #000000;
}

.custom-cursor-wrap.state-interactive .cursor-ring {
  transform: translate(-50%, -50%) scale(1.45);
  border-color: rgba(18, 20, 24, 0.35);
}

.custom-cursor-wrap.state-interactive .cursor-radial-halo {
  transform: translate(-50%, -50%) scale(1.35);
  opacity: 1;
}

/* --- STATE: GLOBE (Hover over 3D Earth) --- */
.custom-cursor-wrap.state-globe .cursor-dot {
  transform: translate(-50%, -50%) scale(1.2);
}

.custom-cursor-wrap.state-globe .cursor-ring {
  transform: translate(-50%, -50%) scale(1.6);
  border-style: dashed;
  border-color: rgba(18, 20, 24, 0.3);
}

/* --- STATE: DRAGGING (Actively rotating 3D Earth) --- */
.custom-cursor-wrap.state-dragging .cursor-dot {
  transform: translate(-50%, -50%) scale(0.8);
  background-color: #000000;
}

.custom-cursor-wrap.state-dragging .cursor-ring {
  transform: translate(-50%, -50%) scale(1.1);
  border-color: rgba(18, 20, 24, 0.6);
}

/* Mobile & Touch Fallback: disable custom cursor completely */
@media (pointer: coarse),
(hover: none) {

  .custom-cursor-h,
  .custom-cursor-v,
  .custom-cursor-wrap {
    display: none !important;
  }

  html,
  body,
  a,
  button,
  [role="button"],
  input,
  select,
  textarea,
  .hoverable {
    cursor: auto !important;
  }

}

/* ==========================================================================
   CLOSING SECTION RADIAL DOT WAVE CANVAS & WATER-RIPPLE SYSTEM
   ========================================================================== */
.closing-canvas {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ==========================================================================
   EXACT CONTINUOUS BORDER + SCROLLING SECTION SYSTEM (ARCHITECTURAL OVERRIDE)
   ========================================================================== */
/* 1. Global Page Flow & Single Continuous Border Container */
/* The ONE and ONLY outer frame holding the continuous vertical borders */
@media (min-width: 1920px) {
  .site-wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
  }

}

/* 2. Strip all individual section border-left and border-right */
.site-header .wrap,
.wrap,
.section>.wrap,
.hero>.wrap,
.capabilities-section>.wrap,
.depth-section>.wrap,
#hero>.wrap,
#perspective>.wrap,
#capabilities>.wrap,
#intelligence>.wrap,
#depth>.wrap,
#faq>.wrap,
#closing>.wrap,
footer>.wrap,
.divider-strip .wrap {
  border-left: none !important;
  border-right: none !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* 3. Section Boundary: Clean Horizontal Border-Bottom on Each Section */
section,
.section,
.hero,
.perspective-section,
.capabilities-section,
.connected-section,
.depth-section,
.closing,
.site-header {
  position: relative !important;
  width: 100% !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--frame-border) !important;
  box-sizing: border-box !important;
}

footer {
  position: relative !important;
  width: 100% !important;
  border-left: none !important;
  border-right: none !important;
  border-top: 1px solid var(--frame-border, rgb(217, 217, 217)) !important;
  border-bottom: 1px solid var(--frame-border, rgb(217, 217, 217)) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Hide legacy divider strips so sections directly touch with one clean 1px border */
/* divider strip enabled */
/* Footer is the last section in the frame */
/* 4. Natural Document Flow: Section Content Moves Naturally on Scroll */
main {
  position: relative !important;
  width: 100% !important;
}

/* 5. Consistent Inner Content Padding & 1280px Centering relative to the single frame */
.section>.wrap,
section>.wrap {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.hero>.wrap,
section.hero>.wrap,
[class*="-hero"]>.wrap,
[class*="-hero-wrap"] {
  padding-top: 150px !important;
  padding-bottom: 80px !important;
}

.wrap:not(.header-wrap)>*:not(.spine):not(.wrap-tick-tl):not(.wrap-tick-tr):not(.wrap-tick-bl):not(.wrap-tick-br):not([class*="visual"]):not([class*="track"]):not(.closing-canvas):not(.logo-mark):not(.header-nav-drawer):not(.mobile-menu-btn) {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure header children are never stretched to 1280px */
.site-header .logo-mark,
.header-wrap .logo-mark {
  width: auto !important;
  max-width: 141px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* 6. Section Backgrounds & Canvas are strictly owned by their sections */
#heroGlobe,
#heroCanvas,
#earthCanvas {
  position: absolute !important;
  pointer-events: auto !important;
}

/* 7. Custom Cursor: Strictly Fixed to Viewport, Crossing Section Borders */
.custom-cursor-h,
.custom-cursor-v,
.custom-cursor-wrap {
  position: fixed !important;
  pointer-events: none !important;
}

/* ==========================================================================
   EXACT FRAMER TWO-LINE SECTION DIVIDER STRIP WITH 4 CORNER TICKS
   ========================================================================== */
/* 4 Corner Registration Ticks */
/* Remove bottom border on section immediately preceding a divider-strip so lines don't collide */
section,
.section,
.hero,
.capabilities-section,
.connected-section,
.depth-section,
.closing {
  border-bottom: none !important;
}

/* ==========================================================================
   FULL-SCREEN EDGE-TO-EDGE HORIZONTAL BORDERS WITH SPACIOUS INTER-SECTION GAP
   ========================================================================== */
/* 1. Remove horizontal clipping or margin restrictions from divider strips */
/* Corner ticks sitting at the vertical frame intersections */
/* ==========================================================================
   FULL 100VW WIDTH FOR HEADER & SHARP CUTTING CORNER INTERSECTIONS
   ========================================================================== */
/* 1. Full width for site-header with continuous bottom border */
@media (min-width: 1920px) {
  .site-header .wrap.header-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

}

/* 2. Sharp Cutting Edges Exactly at Every Horizontal & Vertical Intersection */
/* The corner registration marks are sharp 12px x 12px technical crosshair ticks */
.divider-strip .wrap-tick-tl,
.divider-strip .wrap-tick-tr,
.divider-strip .wrap-tick-bl,
.divider-strip .wrap-tick-br,
.wrap-tick-tl,
.wrap-tick-tr,
.wrap-tick-bl,
.wrap-tick-br {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  pointer-events: none !important;
  z-index: 12 !important;
  box-sizing: border-box !important;
}

/* Top-Left Sharp Cutting Intersection */
.divider-strip .wrap-tick-tl,
.wrap-tick-tl {
  position: absolute !important;
  top: -1px !important;
  left: -1px !important;
  border-top: 1.5px solid rgb(140, 140, 140) !important;
  border-left: 1.5px solid rgb(140, 140, 140) !important;
  border-bottom: none !important;
  border-right: none !important;
}

/* Top-Right Sharp Cutting Intersection */
.divider-strip .wrap-tick-tr,
.wrap-tick-tr {
  position: absolute !important;
  top: -1px !important;
  right: -1px !important;
  border-top: 1.5px solid rgb(140, 140, 140) !important;
  border-right: 1.5px solid rgb(140, 140, 140) !important;
  border-bottom: none !important;
  border-left: none !important;
}

/* Bottom-Left Sharp Cutting Intersection */
.divider-strip .wrap-tick-bl,
.wrap-tick-bl {
  position: absolute !important;
  bottom: -1px !important;
  left: -1px !important;
  border-bottom: 1.5px solid rgb(140, 140, 140) !important;
  border-left: 1.5px solid rgb(140, 140, 140) !important;
  border-top: none !important;
  border-right: none !important;
}

/* Bottom-Right Sharp Cutting Intersection */
.divider-strip .wrap-tick-br,
.wrap-tick-br {
  position: absolute !important;
  bottom: -1px !important;
  right: -1px !important;
  border-bottom: 1.5px solid rgb(140, 140, 140) !important;
  border-right: 1.5px solid rgb(140, 140, 140) !important;
  border-top: none !important;
  border-left: none !important;
}

/* ==========================================================================
   HEALTHCARE WITH DEPTH: COMPACT BORDERS & CLEAN NON-OVERLAPPING ICON SPINE
   ========================================================================== */
/* 1. Compact Section Borders - Remove Dead Empty Whitespace */
#depth.depth-section,
.depth-section {
  padding: 44px 0 52px 0 !important;
  min-height: auto !important;
  height: auto !important;
  background-color: #FFFFFF !important;
}

#depth.depth-section>.wrap,
.depth-section>.wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto !important;
  height: auto !important;
}

#depth .depth-layout,
.depth-layout {
  gap: 64px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-items: flex-start !important;
}

#depth .depth-cards-col,
.depth-cards-col {
  gap: 26px !important;
  /* Compact spacing between card boxes */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 5 !important;
}

/* 2. Non-Overlapping Range Line & SVG Icons */
/* ==========================================================================
   HEALTHCARE DEPTH SECTION: CONTINUOUS RANGE LINE (NEVER OVERLAPPING SVG ICONS)
   ========================================================================== */
/* 1. Range Progress Line sits at z-index: 5 so it persists and runs through the card columns */
.depth-progress-bar,
#depth .depth-progress-bar,
#depthCardsCol .depth-progress-bar,
.depth-cards-col .depth-progress-bar {
  position: absolute !important;
  left: 42px !important;
  top: 42px !important;
  bottom: auto !important;
  width: 2px !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  pointer-events: none !important;
  display: block !important;
  overflow: hidden !important;
}

.depth-progress-track,
#depth .depth-progress-track,
#depthCardsCol .depth-progress-track,
.depth-cards-col .depth-progress-track {
  width: 2px !important;
  height: 100% !important;
  background-color: #E2E4E8 !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  border-radius: 999px !important;
}

.depth-progress-fill,
#depth .depth-progress-fill,
#depthCardsCol .depth-progress-fill,
.depth-cards-col .depth-progress-fill,
#depthProgressFill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background-color: #000000 !important;
  background: #000000 !important;
  z-index: 6 !important;
  display: block !important;
}

/* 2. Cards sit at z-index: 10 above the line, with transparent background so the range line is visible through the cards */
#depth .depth-card,
.depth-card {
  position: relative !important;
  background: transparent !important;
  z-index: 10 !important;
  opacity: 1 !important;
}

/* Inactive cards dim text and svg, keeping card container 100% opaque so icon capsule remains solid white */
#depth .depth-card:not(.is-active) .depth-card-body,
.depth-card:not(.is-active) .depth-card-body {
  opacity: 0.55 !important;
  transition: opacity 0.35s ease !important;
}

#depth .depth-card:not(.is-active) .depth-card-icon svg,
.depth-card:not(.is-active) .depth-card-icon svg {
  opacity: 0.55 !important;
  transition: opacity 0.35s ease !important;
}

#depth .depth-card:not(.is-active),
.depth-card:not(.is-active) {
  border-color: rgb(230, 230, 230) !important;
}

#depth .depth-card.is-active,
.depth-card.is-active {
  border-color: rgb(170, 170, 170) !important;
}

#depth .depth-card.is-active .depth-card-body,
.depth-card.is-active .depth-card-body {
  opacity: 1 !important;
}

#depth .depth-card.is-active .depth-card-icon svg,
.depth-card.is-active .depth-card-icon svg {
  opacity: 1 !important;
}

/* 3. SVG Icon Capsule sits at z-index: 20 with pure opaque white fill & 6px protective halo so range line NEVER overlaps SVG */
#depth .depth-card-icon-wrap,
.depth-card-icon-wrap {
  position: absolute !important;
  top: 24px !important;
  left: 24px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-radius: 50% !important;
  z-index: 20 !important;
  box-shadow: 0 0 0 6px #FFFFFF !important;
}

#depth .depth-card-icon,
.depth-card-icon {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-radius: 50% !important;
  z-index: 21 !important;
  box-sizing: border-box !important;
}

#depth .depth-card-icon svg,
.depth-card-icon svg {
  position: relative !important;
  z-index: 22 !important;
  display: block !important;
}

/* 2. Compact Closing Section Height */
#closing.closing,
section.closing,
.closing,
.section.closing,
.section.closing.tint {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  padding: 54px 0 62px 0 !important;
  /* Significantly reduced height from 160px */
  min-height: auto !important;
  height: auto !important;
  position: relative !important;
  overflow: hidden !important;
}

#closing>.wrap,
.closing>.wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto !important;
  height: auto !important;
}

#closing .reveal,
.closing .reveal {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#closing h2,
.closing h2 {
  margin-top: 10px !important;
  margin-bottom: 18px !important;
  font-size: clamp(30px, 3.8vw, 50px) !important;
  line-height: 1.12 !important;
}

#closing p,
.closing p {
  margin-bottom: 26px !important;
  line-height: 1.55 !important;
}

/* ==========================================================
   GLOBAL SMART DYNAMIC HEADER & STRAIGHT VERTICAL BORDER ALIGNMENT
   ========================================================== */
header,
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 72px !important;
  z-index: 1000 !important;
  background: #ffffff !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--frame-border, rgb(217, 217, 217)) !important;
  box-shadow: 0 1px 0 0 var(--frame-border, rgb(217, 217, 217)) !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
  will-change: transform !important;
}

header.header-hidden,
.site-header.header-hidden {
  transform: translateY(-100%) !important;
  pointer-events: none !important;
}

header.header-visible,
.site-header.header-visible {
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Ensure vertical border alignment matches the exact straight line of all sections */
header .wrap.header-wrap,
.site-header .wrap.header-wrap {
  width: auto !important;
  max-width: var(--frame-max-width, 1815px) !important;
  height: 100% !important;
  margin-left: var(--frame-margin, clamp(16px, 2.6vw, 50px)) !important;
  margin-right: var(--frame-margin, clamp(16px, 2.6vw, 50px)) !important;
  padding: 0 clamp(16px, 2.6vw, 50px) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-left: 1px solid var(--frame-border, rgb(217, 217, 217)) !important;
  border-right: 1px solid var(--frame-border, rgb(217, 217, 217)) !important;
  border-top: none !important;
  border-bottom: none !important;
  box-sizing: border-box !important;
  position: relative !important;
}

@media (min-width: 1920px) {

  header .wrap.header-wrap,
  .site-header .wrap.header-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

}

/* UNIVERSAL SMART HIDE/REVEAL FOR HEADER */
/* ==========================================================================
   GLOBAL MKB SHARP EDGE DESIGN SYSTEM (DARK EDGES ON ALL BORDERS & BOXES)
   Uniform 1.5px solid rgb(163, 163, 163), pinned to -1px in identical alignment
   ========================================================================== */
/* 1. All Card, Box, Table, and Container Ticks */
.card-edge-tick,
.card-tick,
.card-corner {
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  pointer-events: none !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
}

/* Hide legacy inline SVGs to enforce identical pixel-perfect crisp 1.5px borders everywhere */
.card-edge-tick svg,
.card-tick svg,
.card-corner svg {
  display: none !important;
}

/* Top-Left Corner */
.card-edge-tick.edge-tl,
.card-tick.card-tick-tl,
.card-corner.card-corner-tl {
  top: -1px !important;
  left: -1px !important;
  right: auto !important;
  bottom: auto !important;
  border-top: 1.5px solid rgb(163, 163, 163) !important;
  border-left: 1.5px solid rgb(163, 163, 163) !important;
  border-right: none !important;
  border-bottom: none !important;
}

/* Top-Right Corner */
.card-edge-tick.edge-tr,
.card-tick.card-tick-tr,
.card-corner.card-corner-tr {
  top: -1px !important;
  right: -1px !important;
  left: auto !important;
  bottom: auto !important;
  border-top: 1.5px solid rgb(163, 163, 163) !important;
  border-right: 1.5px solid rgb(163, 163, 163) !important;
  border-left: none !important;
  border-bottom: none !important;
}

/* Bottom-Left Corner */
.card-edge-tick.edge-bl,
.card-tick.card-tick-bl,
.card-corner.card-corner-bl {
  bottom: -1px !important;
  left: -1px !important;
  top: auto !important;
  right: auto !important;
  border-bottom: 1.5px solid rgb(163, 163, 163) !important;
  border-left: 1.5px solid rgb(163, 163, 163) !important;
  border-top: none !important;
  border-right: none !important;
}

/* Bottom-Right Corner */
.card-edge-tick.edge-br,
.card-tick.card-tick-br,
.card-corner.card-corner-br {
  bottom: -1px !important;
  right: -1px !important;
  top: auto !important;
  left: auto !important;
  border-bottom: 1.5px solid rgb(163, 163, 163) !important;
  border-right: 1.5px solid rgb(163, 163, 163) !important;
  border-top: none !important;
  border-left: none !important;
}

/* Hover & Active states on interactive cards/boxes */
.depth-card:hover .card-edge-tick,
.depth-card.is-active .card-edge-tick,
.technology-service-card:hover .card-edge-tick,
.about-purpose-card:hover .card-edge-tick,
.about-team-card:hover .card-edge-tick,
.faq-item:hover .card-edge-tick,
.faq-item.open .card-edge-tick {
  border-color: rgb(18, 18, 24) !important;
}

/* Ensure all boxes containing ticks have position relative and border box */
.cap-card-box,
.depth-card,
.lesprit-card,
.strategic-philosophy-box,
.strategic-boundary-box,
.technology-decision-box,
.technology-direction-box,
.technology-service-card,
.about-purpose-card,
.about-team-card,
.faq-item {
  position: relative !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* 2. Outer Frame, Section Wrapper & Divider Strip Registration Ticks */
.wrap-tick-tl,
.wrap-tick-tr,
.wrap-tick-bl,
.wrap-tick-br,
.divider-strip .wrap-tick-tl,
.divider-strip .wrap-tick-tr,
.divider-strip .wrap-tick-bl,
.divider-strip .wrap-tick-br {
  position: absolute !important;
  width: 12px !important;
  height: 12px !important;
  pointer-events: none !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  display: block !important;
}

.wrap-tick-tl,
.divider-strip .wrap-tick-tl {
  top: -1px !important;
  left: -1px !important;
  right: auto !important;
  bottom: auto !important;
  border-top: 1.5px solid rgb(163, 163, 163) !important;
  border-left: 1.5px solid rgb(163, 163, 163) !important;
  border-right: none !important;
  border-bottom: none !important;
}

.wrap-tick-tr,
.divider-strip .wrap-tick-tr {
  top: -1px !important;
  right: -1px !important;
  left: auto !important;
  bottom: auto !important;
  border-top: 1.5px solid rgb(163, 163, 163) !important;
  border-right: 1.5px solid rgb(163, 163, 163) !important;
  border-left: none !important;
  border-bottom: none !important;
}

.wrap-tick-bl,
.divider-strip .wrap-tick-bl {
  bottom: -1px !important;
  left: -1px !important;
  top: auto !important;
  right: auto !important;
  border-bottom: 1.5px solid rgb(163, 163, 163) !important;
  border-left: 1.5px solid rgb(163, 163, 163) !important;
  border-top: none !important;
  border-right: none !important;
}

.wrap-tick-br,
.divider-strip .wrap-tick-br {
  bottom: -1px !important;
  right: -1px !important;
  top: auto !important;
  left: auto !important;
  border-bottom: 1.5px solid rgb(163, 163, 163) !important;
  border-right: 1.5px solid rgb(163, 163, 163) !important;
  border-top: none !important;
  border-left: none !important;
}

/* 3. Thinking Page Topic Cards */
.thinking-topic-corners {
  position: absolute !important;
  top: -1px !important;
  left: -1px !important;
  width: calc(100% + 2px) !important;
  height: calc(100% + 2px) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  box-sizing: border-box !important;
}

.thinking-corner-tick {
  width: 10px !important;
  height: 10px !important;
  position: relative !important;
  opacity: 1 !important;
}

.thinking-corner-tick svg path {
  stroke: rgb(163, 163, 163) !important;
  stroke-width: 1.5 !important;
}

.thinking-topic-card:hover .thinking-corner-tick svg path {
  stroke: rgb(18, 18, 24) !important;
}

/* 4. Contact Page Form Input Fields */
.input-corner-tick {
  opacity: 1 !important;
}

.input-corner-tick.top-left {
  top: -1px !important;
  left: -1px !important;
}

.input-corner-tick.top-right {
  top: -1px !important;
  right: -1px !important;
}

.input-corner-tick.bot-left {
  bottom: -1px !important;
  left: -1px !important;
}

.input-corner-tick.bot-right {
  bottom: -1px !important;
  right: -1px !important;
}

.input-corner-tick svg path {
  stroke: rgb(163, 163, 163) !important;
  stroke-width: 1.5 !important;
}

/* 5. Buttons MUST strictly preserve their Red (#ED1C24) L-bracket System */
.framer-corner-btn .btn-edge-tick,
.error-cta-btn .btn-edge-tick {
  position: absolute !important;
  width: var(--cta-corner-length, 10px) !important;
  height: var(--cta-corner-length, 10px) !important;
  pointer-events: none !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
}

.framer-corner-btn .edge-tl,
.error-cta-btn .edge-tl {
  top: var(--cta-corner-offset, -5px) !important;
  left: var(--cta-corner-offset, -5px) !important;
  right: auto !important;
  bottom: auto !important;
  border-top: var(--cta-corner-thickness, 1.5px) solid var(--mkb-red) !important;
  border-left: var(--cta-corner-thickness, 1.5px) solid var(--mkb-red) !important;
  border-right: none !important;
  border-bottom: none !important;
}

.framer-corner-btn .edge-tr,
.error-cta-btn .edge-tr {
  top: var(--cta-corner-offset, -5px) !important;
  right: var(--cta-corner-offset, -5px) !important;
  left: auto !important;
  bottom: auto !important;
  border-top: var(--cta-corner-thickness, 1.5px) solid var(--mkb-red) !important;
  border-right: var(--cta-corner-thickness, 1.5px) solid var(--mkb-red) !important;
  border-left: none !important;
  border-bottom: none !important;
}

.framer-corner-btn .edge-bl,
.error-cta-btn .edge-bl {
  bottom: var(--cta-corner-offset, -5px) !important;
  left: var(--cta-corner-offset, -5px) !important;
  top: auto !important;
  right: auto !important;
  border-bottom: var(--cta-corner-thickness, 1.5px) solid var(--mkb-red) !important;
  border-left: var(--cta-corner-thickness, 1.5px) solid var(--mkb-red) !important;
  border-top: none !important;
  border-right: none !important;
}

.framer-corner-btn .edge-br,
.error-cta-btn .edge-br {
  bottom: var(--cta-corner-offset, -5px) !important;
  right: var(--cta-corner-offset, -5px) !important;
  top: auto !important;
  left: auto !important;
  border-bottom: var(--cta-corner-thickness, 1.5px) solid var(--mkb-red) !important;
  border-right: var(--cta-corner-thickness, 1.5px) solid var(--mkb-red) !important;
  border-top: none !important;
  border-left: none !important;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE FIXES (HEADER MENU, CAPABILITIES, DEPTH, FAQ)
   ========================================================================== */
/* 1. Universal Mobile Frame & Scroll Lock */
@media (max-width: 1024px) {
  body.nav-locked {
    overflow: hidden !important;
    touch-action: none !important;
    -webkit-overflow-scrolling: auto !important;
  }

  /* Full Screen Mobile Navigation Drawer */
  .header-nav-drawer,
  .site-header.nav-open .header-nav-drawer {
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: calc(100dvh - 72px) !important;
    height: calc(100vh - 72px) !important;
    max-height: calc(100dvh - 72px) !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgb(217, 217, 217) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    padding: 24px 24px 48px 24px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 99999 !important;
  }

  /* Eliminate Flip Overflow & Ghost Cut-off Text in Mobile Drawer */
  .header-nav-drawer .nav-links,
  .header-nav-drawer .nav-links nav,
  .header-nav-drawer .nav-links nav ul {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .header-nav-drawer .nav-links nav ul li {
    width: 100% !important;
  }

  .header-nav-drawer .nav-flip-link {
    height: auto !important;
    overflow: visible !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 8px 0 !important;
    text-align: left !important;
    transform: none !important;
  }

  .header-nav-drawer .nav-flip-inner {
    display: block !important;
    transform: none !important;
    transition: none !important;
  }

  .header-nav-drawer .nav-flip-link:hover .nav-flip-inner,
  .header-nav-drawer .nav-flip-link.active .nav-flip-inner {
    transform: none !important;
  }

  .header-nav-drawer .nav-text,
  .header-nav-drawer .nav-text-top {
    display: block !important;
    height: auto !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    color: #111315 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: color 0.25s ease !important;
  }

  /* Only apply hover colour changes on true pointer devices (not touch) */
  @media (hover: hover) and (pointer: fine) {
    .header-nav-drawer .nav-flip-link:hover .nav-text,
    .header-nav-drawer .nav-flip-link:hover .nav-text-top,
    .header-nav-drawer .nav-flip-link:hover {
      color: var(--mkb-red, #ED1C24) !important;
    }
  }

  .header-nav-drawer .nav-text-bottom,
  .header-nav-drawer span.nav-text.nav-text-bottom {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header-nav-drawer .nav-flip-link.active,
  .header-nav-drawer .nav-flip-link.active .nav-text,
  .header-nav-drawer .nav-flip-link.active .nav-text-top {
    color: var(--mkb-red, #ED1C24) !important;
    font-weight: 600 !important;
  }

  .header-nav-drawer .nav-flip-link.active:hover,
  .header-nav-drawer .nav-flip-link.active:hover .nav-text,
  .header-nav-drawer .nav-flip-link.active:hover .nav-text-top {
    color: var(--mkb-red, #ED1C24) !important;
  }

  /* Hide the desktop hover underline bar inside mobile drawer */
  .header-nav-drawer .nav-flip-link::after {
    display: none !important;
    content: none !important;
  }

  /* Prevent nav-flip-inner from clipping/hiding text on mobile */
  .header-nav-drawer .nav-flip-inner {
    overflow: visible !important;
    height: auto !important;
    transform: none !important;
  }

  /* Prevent any translateY transform on nav-text inside mobile drawer */
  .header-nav-drawer .nav-flip-link .nav-text,
  .header-nav-drawer .nav-flip-link:hover .nav-text,
  .header-nav-drawer .nav-flip-link:active .nav-text {
    transform: none !important;
    transition: color 0.25s ease !important;
  }

  .header-nav-drawer .header-cta-wrap {
    margin-top: 16px !important;
    margin-left: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
  }


}

/* 2. Global Mobile Sections Responsiveness (max-width: 900px) */
@media (max-width: 900px) {

  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .wrap,
  .site-header .wrap.header-wrap,
  #hero>.wrap,
  #perspective>.wrap,
  #capabilities>.wrap,
  #intelligence>.wrap,
  #depth>.wrap,
  #faq>.wrap,
  #closing>.wrap,
  footer>.wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Fix Image 1: Capabilities Section Mobile Unpinning & Card Clean Stacking */
  #capabilities.capabilities-section {
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
  }

  #capabilities.capabilities-section .capabilities-sticky-wrap>.wrap,
  #capabilities.capabilities-section>.wrap {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    padding: 40px 20px 48px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    background: #FFFFFF !important;
  }

  #capabilities .cap-header-row {
    margin-bottom: 20px !important;
    width: 100% !important;
  }

  #capabilities .cap-content-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  #capabilities .cap-cards-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #capabilities .cap-card-box {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    margin: 0 !important;
    padding: 20px 18px !important;
    box-sizing: border-box !important;
    background: #F4F4F4 !important;
    border: none !important;
    box-shadow: none !important;
  }

  #capabilities .cap-card-box .card-bracket {
    opacity: 1 !important;
    visibility: visible !important;
  }

  #capabilities .cap-visual-col {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 280px !important;
    margin-top: 32px !important;
    margin-bottom: 32px !important;
    padding-bottom: 32px !important;
    overflow: visible !important;
    width: 100% !important;
  }

  #capabilities .cap-building-stage {
    position: relative !important;
    width: 85% !important;
    max-width: 320px !important;
    aspect-ratio: 3 / 2.2 !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  /* Fix Image 2: Healthcare With Depth Section Mobile Layout */
  #depth.depth-section {
    padding: 44px 0 52px 0 !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
  }

  #depth.depth-section>.wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #depth .depth-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  #depth .depth-sticky-col {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    top: auto !important;
    padding: 0 !important;
  }

  #depth .depth-sticky-col h2 {
    font-size: clamp(30px, 7vw, 38px) !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
  }

  #depth .depth-cards-col {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide vertical slicing progress line on mobile screens */
  .depth-progress-bar,
  #depth .depth-progress-bar,
  #depthCardsCol .depth-progress-bar,
  .depth-cards-col .depth-progress-bar {
    display: none !important;
  }

  #depth .depth-card,
  .depth-card {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 20px 24px 64px !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
  }

  #depth .depth-card-icon-wrap,
  .depth-card-icon-wrap {
    position: absolute !important;
    top: 22px !important;
    left: 16px !important;
    width: 36px !important;
    height: 36px !important;
    box-shadow: none !important;
  }

  /* Fix Image 3: FAQ Section Mobile Single-Column Responsive Layout */
  #faq {
    padding: 44px 0 52px 0 !important;
    width: 100% !important;
  }

  #faq>.wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #faq .section-head {
    margin-bottom: 28px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #faq .faq-list {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #faq .faq-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #faq .faq-q {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  #faq .faq-a {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* L'Esprit MKB Hero Layout on Mobile: Ensure PHILOSOPHY tag is never hidden by 72px header */
  .lesprit-hero-wrap,
  #hero .lesprit-hero-wrap {
    padding-top: 112px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 40px !important;
  }

  .lesprit-hero-layout,
  #hero .lesprit-hero-layout {
    padding: 0 !important;
  }

}

/* ==========================================================
   GLOBAL CARD BOX LENGTH & INNER PADDING EXPANSION
   Applied across all card/box components across all pages
   (Perspective boxes, Strategic Boundary boxes, Technology
   Decision boxes, Contact cards, Firm boxes, L'Esprit cards).
   ========================================================== */
.perspective-boxes,
.strategic-boundary-boxes,
.technology-direction-boxes,
.technology-decision-boxes,
.about-purpose-boxes,
.firm-boxes {
  max-width: 100% !important;
  width: 100% !important;
  gap: 24px !important;
}

.perspective-box,
.strategic-boundary-box,
.technology-direction-box,
.technology-decision-box,
.contact-tech-box,
.contact-privacy-card,
.contact-form-card,
.about-purpose-card,
.about-pov-card,
.firm-box,
.lesprit-box,
.sector-box,
.card-box {
  max-width: 100% !important;
  width: 100% !important;
  padding: clamp(28px, 3.0vw, 40px) clamp(32px, 3.5vw, 44px) !important;
  box-sizing: border-box !important;
}

/* GLOBAL HERO PROPOSITION BOX FROSTED TRANSLUCENT OVERLAY (NO BORDER LINES) */
.hero-prop-box,
.strategic-hero-content,
.strategic-hero-box,
.technology-decision-box,
.technology-direction-box,
.thinking-editorial-box,
.lesprit-panache-box,
[class*="hero-prop"],
[class*="hero-box"] {
  border: none !important;
  background: #ffffff91 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ==========================================================
   UNIVERSAL MOBILE & TABLET RESPONSIVE SAFEGUARDS
   ========================================================== */
/* Global overflow clipping that preserves CSS position: sticky pinning */
html {
  overflow-x: clip !important;
  width: 100% !important;
}

body {
  overflow-x: clip !important;
  width: 100% !important;
  position: relative !important;
}

@media (max-width: 768px) {

  .wrap,
  .hero-wrap,
  .section-wrap,
  .container,
  .content-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Grid & Flex layouts to single column */
  .grid,
  .service-grid,
  .services-grid,
  .card-grid,
  .capabilities-grid {
    grid-template-columns: 1fr !important;
  }

  /* Card boxes & CTA buttons */
  .card,
  .card-box,
  [class*="-box"],
  [class*="-card"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .framer-corner-btn,
  .error-cta-btn {
    width: fit-content !important;
    max-width: 100% !important;
    display: inline-flex !important;
    align-self: flex-start !important;
    flex-grow: 0 !important;
    box-sizing: border-box !important;
  }

  /* Eyebrow & Headline text wrapping overrides on mobile (excluding header navigation) */
  .eyebrow,
  .eyebrow-inner,
  [class*="-eyebrow"],
  [class*="-heading"],
  .strategic-main-heading,
  .healthcare-main-heading,
  h1,
  h2,
  h3,
  h4,
  h5,
  p {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  .strategic-main-heading,
  h1.strategic-main-heading,
  .healthcare-main-heading {
    font-size: clamp(26px, 6.2vw, 42px) !important;
    line-height: 1.18 !important;
  }

  /* Protect mobile navigation text from breaking or hiding */
  .site-header,
  .header-nav-drawer,
  .nav-flip-link,
  .nav-flip-inner,
  .nav-text,
  .nav-dropdown-link,
  .nav-dropdown-title,
  .nav-dropdown-desc {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* Hide custom desktop crosshair cursor on mobile/touch screens */
  .custom-cursor-h,
  .custom-cursor-v,
  .custom-cursor-wrap {
    display: none !important;
    pointer-events: none !important;
  }
}