/*
Theme Name: Flatsome Child
Description: Custom Flatsome child theme for Hong Anh Digital.
Author: Hong Anh Digital
Template: flatsome
Version: 4.9
*/

body.had-static-site {
  padding-bottom: 0 !important;
}

body.had-static-site .topbar {
  top: 18px !important;
}

body.admin-bar.had-static-site .topbar {
  top: 50px !important;
}

body.had-static-site .hero h1 {
  width: min(1120px, 100%) !important;
}

body.had-static-site .topbar .nav {
  position: relative !important;
  width: calc(100% - 40px) !important;
  max-width: 1180px !important;
  min-height: 66px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto minmax(130px, .8fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  column-gap: 18px !important;
  row-gap: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, .8) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .78)),
    rgba(255, 255, 255, .88) !important;
  box-shadow: 0 20px 50px rgba(30, 34, 120, .12), inset 0 1px 0 rgba(255, 255, 255, .86) !important;
  backdrop-filter: blur(22px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
}

body.had-static-site .topbar .brand {
  min-width: 220px !important;
  flex: 0 0 220px !important;
  gap: 12px !important;
  justify-self: start !important;
}

body.had-static-site .topbar .brand-mark {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
}

body.had-static-site .topbar .brand strong {
  font-size: 14px !important;
  line-height: 1.15 !important;
}

body.had-static-site .topbar .brand span {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

body.had-static-site .topbar .nav-links {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  overflow: visible !important;
  padding: 5px !important;
  border: 1px solid rgba(20, 20, 20, .08) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .54) !important;
  justify-self: center !important;
}

body.had-static-site .topbar .nav-links a {
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  color: #303235 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body.had-static-site .topbar .nav-links a.is-active {
  background: rgba(18, 18, 230, .09) !important;
  color: #0800b8 !important;
}

body.had-static-site .topbar .nav > .button {
  min-width: 130px !important;
  min-height: 44px !important;
  width: auto !important;
  margin: 0 !important;
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  justify-self: end !important;
}

body.had-static-site .mobile-bottom-nav {
  display: none !important;
}

body.had-static-site .had-builder-content .row-collapse > .col .container,
body.had-static-site .had-builder-content .row-collapse > .col .container-width,
body.had-static-site .had-builder-content .row-collapse > .col .full-width .ubermenu-nav,
body.had-static-site.had-ux-builder-canvas .had-builder-shell .row-collapse > .col .container,
body.had-static-site.had-ux-builder-canvas .had-builder-shell .row-collapse > .col .container-width,
body.had-static-site.had-ux-builder-canvas .had-builder-shell .row-collapse > .col .full-width .ubermenu-nav {
  width: calc(100% - 40px) !important;
  max-width: var(--max, 1180px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.had-static-site .had-builder-content .row-collapse > .col .hero .container,
body.had-static-site .had-builder-content .row-collapse > .col .cta .container,
body.had-static-site.had-ux-builder-canvas .had-builder-shell .row-collapse > .col .hero .container,
body.had-static-site.had-ux-builder-canvas .had-builder-shell .row-collapse > .col .cta .container {
  max-width: var(--max, 1180px) !important;
}

body.had-static-site .had-builder-content > .section > .section-content > .row,
body.had-static-site .had-builder-shell > .section-content > .row {
  width: min(calc(100% - 40px), var(--max, 1180px)) !important;
  max-width: var(--max, 1180px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.had-static-site .had-builder-content > .section.had-builder-shell-hero,
body.had-static-site .had-builder-shell.had-builder-shell-hero {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
}

body.had-static-site .had-builder-content > .section.had-builder-shell-hero > .section-content,
body.had-static-site .had-builder-shell.had-builder-shell-hero > .section-content,
body.had-static-site .had-builder-content > .section.had-builder-shell-hero > .section-content > .row,
body.had-static-site .had-builder-shell.had-builder-shell-hero > .section-content > .row {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.had-static-site .had-builder-shell-hero .row-collapse > .col,
body.had-static-site .had-builder-shell-hero .row-collapse > .col > .col-inner {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.had-static-site .had-builder-shell-hero .hero {
  width: 100vw !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
}

body.had-static-site .had-builder-shell-hero .hero::before {
  border-radius: 0 !important;
}

body.had-static-site .had-builder-content > .section.had-builder-shell:not(.had-native-studio):not(.had-builder-shell-hero) > .section-content > .row,
body.had-static-site .had-builder-shell:not(.had-native-studio):not(.had-builder-shell-hero) > .section-content > .row {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.had-static-site .had-builder-shell:not(.had-native-studio):not(.had-builder-shell-hero) > .section-content > .row > .col,
body.had-static-site .had-builder-shell:not(.had-native-studio):not(.had-builder-shell-hero) > .section-content > .row > .col > .col-inner {
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.had-static-site .had-builder-content .had-builder-html > section,
body.had-static-site .had-builder-content .had-builder-html > .hero,
body.had-static-site .had-builder-content .had-builder-html > .cta,
body.had-static-site .had-builder-shell .had-builder-html > section,
body.had-static-site .had-builder-shell .had-builder-html > .hero,
body.had-static-site .had-builder-shell .had-builder-html > .cta {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

body.had-static-site.had-ux-builder-canvas .had-builder-shell,
body.had-static-site.had-ux-builder-canvas .had-builder-shell > .section-content,
body.had-static-site.had-ux-builder-canvas .had-builder-shell > .section-content > .row {
  pointer-events: auto !important;
}

body.had-static-site .had-builder-content > .section.had-native-studio,
body.had-static-site .had-builder-shell.had-native-studio {
  padding: 96px 0 !important;
}

body.had-static-site .had-native-studio > .section-content {
  width: 100% !important;
}

body.had-static-site .had-native-studio .had-native-heading.row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 16px !important;
  max-width: 980px !important;
  margin-bottom: 34px !important;
}

body.had-static-site .had-native-studio .had-native-heading > .col,
body.had-static-site .had-native-studio .had-native-workstyle-grid > .col {
  padding: 0 !important;
}

body.had-static-site .had-native-studio .had-native-heading .col-inner,
body.had-static-site .had-native-studio .had-native-workstyle-grid .col-inner {
  padding: 0 !important;
}

body.had-static-site .had-native-studio .had-native-workstyle-grid.row {
  display: grid !important;
  grid-template-columns: .88fr 1.24fr .88fr !important;
  gap: 16px !important;
  align-items: stretch !important;
}

body.had-static-site .had-native-studio .had-native-workstyle-grid > .col {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
}

body.had-static-site .had-native-studio .had-native-heading > .col {
  width: 100% !important;
  max-width: 980px !important;
  flex: none !important;
}

body.had-static-site .had-native-studio .had-native-heading > .col:nth-child(2) {
  max-width: 760px !important;
}

body.had-static-site .had-native-studio .had-native-heading .section-lead {
  justify-self: start !important;
  max-width: 760px !important;
  margin-top: 2px !important;
  padding: 14px 18px 14px 20px !important;
  border-left: 3px solid rgba(18, 18, 230, .24) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .34)),
    rgba(255, 255, 255, .42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68) !important;
  line-height: 1.62 !important;
}

body.had-static-site .had-native-studio .workstyle-column .col-inner {
  display: grid !important;
  gap: 16px !important;
}

body.had-static-site .had-native-studio .had-builder-editable-fragment {
  display: block !important;
}

body.had-static-site .had-builder-split-fragment {
  display: block !important;
  min-width: 0 !important;
}

body.had-static-site .had-builder-split-fragment > a,
body.had-static-site .had-builder-split-fragment > button,
body.had-static-site .had-builder-split-fragment > .stat,
body.had-static-site .had-builder-split-fragment > .section-heading,
body.had-static-site .had-builder-split-fragment > .hero-copy,
body.had-static-site .had-builder-split-fragment > .hero-dashboard,
body.had-static-site .had-builder-split-fragment > .case-copy,
body.had-static-site .had-builder-split-fragment > .lab-panel,
body.had-static-site .had-builder-split-fragment > .roadmap-copy,
body.had-static-site .had-builder-split-fragment > .journey-preview,
body.had-static-site .had-builder-split-fragment > .cta-panel,
body.had-static-site .had-builder-split-fragment > .workstyle-card,
body.had-static-site .had-builder-split-fragment > .lab-cell,
body.had-static-site .had-builder-split-fragment > .process-step,
body.had-static-site .had-builder-split-fragment > .playbook-card,
body.had-static-site .had-builder-split-fragment > .engine-card {
  height: 100% !important;
}

body.had-static-site .portfolio-strip .had-builder-split-fragment,
body.had-static-site .quick-stats .had-builder-split-fragment,
body.had-static-site .lab-grid .had-builder-split-fragment,
body.had-static-site .process-flow .had-builder-split-fragment,
body.had-static-site .playbook-grid .had-builder-split-fragment,
body.had-static-site .soft-skill-list .had-builder-split-fragment,
body.had-static-site .growth-engines .had-builder-split-fragment {
  min-height: 0 !important;
}

body.had-static-site .hero-floating-layer > .had-builder-split-fragment,
body.had-static-site .signature-system > .had-builder-split-fragment,
body.had-static-site .case-stage > .had-builder-split-fragment {
  display: contents !important;
}

body.had-static-site .case-stage > .had-builder-split-fragment {
  display: block !important;
  min-width: 0 !important;
  min-height: 82px !important;
}

body.had-static-site .case-stage > .had-builder-split-fragment:first-of-type {
  position: sticky !important;
  top: 2px !important;
  grid-column: 1 !important;
  grid-row: span 4 !important;
  align-self: start !important;
  min-height: 344px !important;
}

body.had-static-site .case-stage > .had-builder-split-fragment > .case-card {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  min-height: 246px !important;
  height: 100% !important;
  transform: none !important;
}

body.had-static-site .case-stage > .had-builder-split-fragment:first-of-type > .case-card {
  min-height: 344px !important;
}

body.had-static-site .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  min-height: 82px !important;
  height: 82px !important;
}

body.had-static-site .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card .case-media {
  height: 100% !important;
  min-height: 82px !important;
  flex: none !important;
}

body.had-static-site .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card .case-body {
  padding: 10px !important;
  justify-content: center !important;
}

body.had-static-site .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card .mini-label {
  font-size: 8.5px !important;
  margin-bottom: 5px !important;
}

body.had-static-site .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card .case-body h3 {
  font-size: 12.5px !important;
  line-height: 1.18 !important;
  margin-bottom: 0 !important;
  -webkit-line-clamp: 2 !important;
}

body.had-static-site .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card .case-body p,
body.had-static-site .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card .case-meta {
  display: none !important;
}

body.had-static-site .signature-system > .had-builder-split-fragment > .system-node,
body.had-static-site .signature-system > .had-builder-split-fragment > .system-core {
  height: auto !important;
}

body.had-static-site .signature-system > .had-builder-split-fragment > .system-core {
  min-height: 500px !important;
}

body.had-static-site .section .section-heading {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
  max-width: 980px !important;
  margin-bottom: 32px !important;
}

body.had-static-site .section .section-heading > div {
  max-width: 980px !important;
}

body.had-static-site .section .section-heading .section-lead {
  justify-self: start !important;
  max-width: 760px !important;
  margin-top: 2px !important;
  padding: 14px 18px 14px 20px !important;
  border-left: 3px solid rgba(18, 18, 230, .24) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .34)),
    rgba(255, 255, 255, .42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68) !important;
  line-height: 1.62 !important;
}

body.had-static-site .section.dark .section-heading .section-lead {
  color: rgba(255, 255, 255, .72) !important;
  border-left-color: rgba(191, 255, 0, .52) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .045)),
    rgba(255, 255, 255, .055) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

body.had-static-site .had-system-thinking-section .section-heading .section-lead {
  border-left-color: rgba(191, 255, 0, .48) !important;
}

@media (min-width: 1041px) {
  body.had-static-site .signature-system .node-left-1 { left: 2.8% !important; }
  body.had-static-site .signature-system .node-left-2 { left: 4.2% !important; }
  body.had-static-site .signature-system .node-left-3 { left: 3.2% !important; }
  body.had-static-site .signature-system .node-right-1 { right: 2.8% !important; }
  body.had-static-site .signature-system .node-right-2 { right: 4.2% !important; }
  body.had-static-site .signature-system .node-right-3 { right: 3.2% !important; }

  body.had-static-site .signature-system .system-node {
    animation: nodeFloat 5.8s ease-in-out infinite !important;
    will-change: transform !important;
  }

  body.had-static-site #stack .signature-system .system-node {
    min-height: 104px !important;
    max-height: 118px !important;
    padding: 14px 16px !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  body.had-static-site #stack .signature-system .node-icon {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }

  body.had-static-site #stack .signature-system .node-copy {
    min-width: 0 !important;
  }

  body.had-static-site #stack .signature-system .node-copy strong {
    font-size: 14.5px !important;
    line-height: 1.18 !important;
    margin-bottom: 4px !important;
  }

  body.had-static-site #stack .signature-system .node-copy span {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 11.4px !important;
    line-height: 1.34 !important;
  }

  body.had-static-site .signature-system .node-left-2,
  body.had-static-site .signature-system .node-right-1 {
    animation-delay: -.8s !important;
  }

  body.had-static-site .signature-system .node-left-3,
  body.had-static-site .signature-system .node-right-2 {
    animation-delay: -1.6s !important;
  }

  body.had-static-site .signature-system .node-right-3 {
    animation-delay: -2.4s !important;
  }

  body.had-static-site .signature-system .system-connector {
    z-index: 2 !important;
    overflow: visible !important;
    background: linear-gradient(90deg, rgba(18, 18, 230, .1), rgba(18, 18, 230, .32), rgba(18, 18, 230, .1)) !important;
  }

  body.had-static-site .signature-system .system-connector::before,
  body.had-static-site .signature-system .system-connector::after {
    width: 12px !important;
    height: 12px !important;
    background: var(--red) !important;
    box-shadow: 0 0 0 6px rgba(18, 18, 230, .1) !important;
    opacity: 1 !important;
  }

  body.had-static-site .signature-system .system-connector::before {
    left: 0 !important;
  }

  body.had-static-site .signature-system .system-connector::after {
    left: 0;
    animation: systemFlow 2.4s linear infinite !important;
  }

  body.had-static-site .signature-system .system-connector.right::after {
    left: 100%;
    animation: systemFlowReverse 2.4s linear infinite !important;
  }

  body.had-static-site .signature-system .system-connector.left,
  body.had-static-site .signature-system .system-connector.right {
    right: auto !important;
  }

  body.had-static-site .signature-system .system-connector.left.top {
    left: calc(2.8% + min(300px, 28%)) !important;
    width: calc(50% - min(185px, 17%) - 2.8% - min(300px, 28%)) !important;
    top: 126px !important;
  }

  body.had-static-site .signature-system .system-connector.left.middle {
    left: calc(4.2% + min(300px, 28%)) !important;
    width: calc(50% - min(185px, 17%) - 4.2% - min(300px, 28%)) !important;
    top: 363px !important;
  }

  body.had-static-site .signature-system .system-connector.left.bottom {
    left: calc(3.2% + min(300px, 28%)) !important;
    width: calc(50% - min(185px, 17%) - 3.2% - min(300px, 28%)) !important;
    top: calc(100% - 128px) !important;
    bottom: auto !important;
  }

  body.had-static-site .signature-system .system-connector.right.top {
    left: calc(50% + min(185px, 17%)) !important;
    width: calc(100% - 2.8% - min(300px, 28%) - 50% - min(185px, 17%)) !important;
    top: 126px !important;
  }

  body.had-static-site .signature-system .system-connector.right.middle {
    left: calc(50% + min(185px, 17%)) !important;
    width: calc(100% - 4.2% - min(300px, 28%) - 50% - min(185px, 17%)) !important;
    top: 354px !important;
  }

  body.had-static-site .signature-system .system-connector.right.bottom {
    left: calc(50% + min(185px, 17%)) !important;
    width: calc(100% - 3.2% - min(300px, 28%) - 50% - min(185px, 17%)) !important;
    top: calc(100% - 128px) !important;
    bottom: auto !important;
  }

  @keyframes nodeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  @keyframes systemFlow {
    0% { left: 0; opacity: .2; transform: translate(-50%, -50%) scale(.72); }
    14%, 86% { opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.18); }
    100% { left: 100%; opacity: .2; transform: translate(-50%, -50%) scale(.72); }
  }

  @keyframes systemFlowReverse {
    0% { left: 100%; opacity: .2; transform: translate(-50%, -50%) scale(.72); }
    14%, 86% { opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.18); }
    100% { left: 0; opacity: .2; transform: translate(-50%, -50%) scale(.72); }
  }
}

body.had-static-site.had-ux-builder-canvas .had-builder-editable-fragment,
body.had-static-site.had-ux-builder-canvas .had-builder-editable-fragment *,
body.had-static-site.had-ux-builder-canvas .had-builder-split-fragment,
body.had-static-site.had-ux-builder-canvas .had-builder-split-fragment * {
  pointer-events: auto !important;
}

@media (max-width: 720px) {
  body.had-static-site {
    padding-bottom: 96px !important;
  }

  body.had-static-site .topbar {
    top: 14px !important;
  }

  body.admin-bar.had-static-site .topbar {
    top: 60px !important;
  }

  body.had-static-site .topbar .nav {
    width: calc(100% - 28px) !important;
    min-height: 64px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  body.had-static-site .topbar .brand {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 11px !important;
  }

  body.had-static-site .topbar .brand-mark {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }

  body.had-static-site .topbar .brand > span:not(.brand-mark) {
    min-width: 0 !important;
  }

  body.had-static-site .topbar .brand strong {
    font-size: 14px !important;
  }

  body.had-static-site .topbar .brand span {
    font-size: 12px !important;
  }

  body.had-static-site .topbar .nav-links {
    display: none !important;
  }

  body.had-static-site .topbar .nav > .button {
    width: 119px !important;
    min-width: 119px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    justify-self: end !important;
    margin: 0 !important;
    position: static !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  body.had-static-site .mobile-bottom-nav {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 14px !important;
    z-index: 48 !important;
    min-height: 66px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    border: 1px solid rgba(20, 20, 20, .08) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 16px 42px rgba(20, 20, 20, .16), inset 0 1px 0 rgba(255, 255, 255, .82) !important;
    backdrop-filter: blur(18px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
    padding: 8px !important;
  }

  body.had-static-site .mobile-bottom-nav a {
    min-width: 0 !important;
    min-height: 50px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    color: #303235 !important;
  }

  body.had-static-site .mobile-bottom-nav a.is-active {
    color: #0800b8 !important;
    background: rgba(18, 18, 230, .08) !important;
  }

  body.had-static-site .mobile-bottom-nav svg {
    width: 23px !important;
    height: 23px !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    fill: none !important;
  }

  body.had-static-site .had-builder-content .row-collapse > .col .container,
  body.had-static-site .had-builder-content .row-collapse > .col .container-width,
  body.had-static-site .had-builder-content .row-collapse > .col .full-width .ubermenu-nav,
  body.had-static-site.had-ux-builder-canvas .had-builder-shell .row-collapse > .col .container,
  body.had-static-site.had-ux-builder-canvas .had-builder-shell .row-collapse > .col .container-width,
  body.had-static-site.had-ux-builder-canvas .had-builder-shell .row-collapse > .col .full-width .ubermenu-nav {
    width: calc(100% - 28px) !important;
  }

  body.had-static-site .had-builder-content > .section > .section-content > .row,
  body.had-static-site .had-builder-shell > .section-content > .row {
    width: calc(100% - 28px) !important;
  }

  body.had-static-site .had-builder-content > .section.had-builder-shell-hero > .section-content > .row,
  body.had-static-site .had-builder-shell.had-builder-shell-hero > .section-content > .row {
    width: 100% !important;
  }

  body.had-static-site .had-builder-content > .section.had-native-studio,
  body.had-static-site .had-builder-shell.had-native-studio {
    padding: 86px 0 !important;
  }

  body.had-static-site .had-native-studio .had-native-heading.row,
  body.had-static-site .had-native-studio .had-native-workstyle-grid.row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body.had-static-site .case-stage > .had-builder-split-fragment,
  body.had-static-site .case-stage > .had-builder-split-fragment:first-of-type {
    position: relative !important;
    top: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: stretch !important;
    min-height: 0 !important;
  }

  body.had-static-site .case-stage > .had-builder-split-fragment > .case-card,
  body.had-static-site .case-stage > .had-builder-split-fragment:first-of-type > .case-card,
  body.had-static-site .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card {
    display: flex !important;
    grid-template-columns: none !important;
    min-height: 0 !important;
    height: auto !important;
  }

  body.had-static-site .case-stage > .had-builder-split-fragment > .case-card .case-media,
  body.had-static-site .case-stage > .had-builder-split-fragment:first-of-type > .case-card .case-media,
  body.had-static-site .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card .case-media {
    flex-basis: 148px !important;
    height: 148px !important;
    min-height: 0 !important;
  }

  body.had-static-site .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card .case-body p {
    display: block !important;
  }

  body.had-static-site .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card .case-meta {
    display: flex !important;
  }

  body.had-static-site .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card .case-body h3 {
    font-size: 18px !important;
  }

  body.had-static-site .had-native-studio .workstyle-core {
    order: -1;
  }
}

@media (max-width: 720px) {
  body.had-static-site .topbar .nav {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.had-static-site .topbar .nav > .button {
    display: none !important;
  }

  body.had-static-site .hero .eyebrow {
    max-width: 100% !important;
    white-space: normal !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  body.had-static-site .hero h1 {
    width: 100% !important;
    max-width: 360px !important;
    font-size: clamp(32px, 8vw, 36px) !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  body.had-static-site .hero .hero-lead,
  body.had-static-site .hero .hero-actions {
    max-width: 360px !important;
    width: 100% !important;
  }

  body.had-static-site .hero h1 .gradient-text,
  body.had-static-site .hero h1 .builder-word {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
}

/* Selected projects panel only */
body.had-static-site .case-project-area {
  overflow: visible !important;
}

body.had-static-site .case-project-area .case-stage {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 10px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  transform: none !important;
  transform-style: flat !important;
  transition: none !important;
}

body.had-static-site .case-project-area .case-stage > .had-builder-split-fragment,
body.had-static-site .case-project-area .case-stage > .uxb-wrapper--ux_html.had-builder-moved-fragment {
  display: block !important;
  position: relative !important;
  top: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  grid-row: auto !important;
  align-self: stretch !important;
}

body.had-static-site .case-project-area .case-stage > .case-card:first-child,
body.had-static-site .case-project-area .case-stage > .had-builder-split-fragment:first-of-type,
body.had-static-site .case-project-area .case-stage > .uxb-wrapper--ux_html.had-builder-moved-fragment:first-of-type {
  grid-column: 1 / -1 !important;
}

body.had-static-site .case-project-area .case-stage .case-card,
body.had-static-site .case-project-area .case-stage .case-card.is-active {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  border-color: rgba(18, 18, 230, .12) !important;
  background: rgba(255, 255, 255, .98) !important;
  color: #09091f !important;
  box-shadow: 0 12px 26px rgba(18, 18, 230, .08) !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}

body.had-static-site .case-project-area .case-stage > .case-card:first-child,
body.had-static-site .case-project-area .case-stage > .had-builder-split-fragment:first-of-type > .case-card,
body.had-static-site .case-project-area .case-stage > .uxb-wrapper--ux_html.had-builder-moved-fragment:first-of-type .case-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 258px !important;
}

body.had-static-site .case-project-area .case-stage > .case-card:not(:first-child),
body.had-static-site .case-project-area .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card,
body.had-static-site .case-project-area .case-stage > .uxb-wrapper--ux_html.had-builder-moved-fragment:not(:first-of-type) .case-card {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) !important;
  min-height: 108px !important;
  height: 108px !important;
}

body.had-static-site .case-project-area .case-stage .case-media {
  background: #eef2f7 !important;
}

body.had-static-site .case-project-area .case-stage > .case-card:first-child .case-media,
body.had-static-site .case-project-area .case-stage > .had-builder-split-fragment:first-of-type > .case-card .case-media,
body.had-static-site .case-project-area .case-stage > .uxb-wrapper--ux_html.had-builder-moved-fragment:first-of-type .case-card .case-media {
  flex-basis: 140px !important;
  height: 140px !important;
  min-height: 0 !important;
}

body.had-static-site .case-project-area .case-stage > .case-card:not(:first-child) .case-media,
body.had-static-site .case-project-area .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card .case-media,
body.had-static-site .case-project-area .case-stage > .uxb-wrapper--ux_html.had-builder-moved-fragment:not(:first-of-type) .case-card .case-media {
  flex: none !important;
  height: 108px !important;
  min-height: 108px !important;
}

body.had-static-site .case-project-area .case-stage .case-body {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  justify-content: center !important;
  padding: 12px !important;
  background: rgba(255, 255, 255, .98) !important;
}

body.had-static-site .case-project-area .case-stage .mini-label {
  margin: 0 !important;
  color: #0800b8 !important;
  font-size: 9.5px !important;
  line-height: 1.15 !important;
  font-weight: 1000 !important;
}

body.had-static-site .case-project-area .case-stage .case-body h3 {
  display: -webkit-box !important;
  margin: 0 !important;
  color: #09091f !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.had-static-site .case-project-area .case-stage > .case-card:first-child .case-body h3,
body.had-static-site .case-project-area .case-stage > .had-builder-split-fragment:first-of-type > .case-card .case-body h3,
body.had-static-site .case-project-area .case-stage > .uxb-wrapper--ux_html.had-builder-moved-fragment:first-of-type .case-card .case-body h3 {
  font-size: 18px !important;
  line-height: 1.24 !important;
  -webkit-line-clamp: 2 !important;
}

body.had-static-site .case-project-area .case-stage > .case-card:not(:first-child) .case-body p,
body.had-static-site .case-project-area .case-stage > .case-card:not(:first-child) .case-meta,
body.had-static-site .case-project-area .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card .case-body p,
body.had-static-site .case-project-area .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card .case-meta,
body.had-static-site .case-project-area .case-stage > .uxb-wrapper--ux_html.had-builder-moved-fragment:not(:first-of-type) .case-card .case-body p,
body.had-static-site .case-project-area .case-stage > .uxb-wrapper--ux_html.had-builder-moved-fragment:not(:first-of-type) .case-card .case-meta {
  display: none !important;
}

body.had-static-site .case-project-area .case-project-summary {
  gap: 8px !important;
  margin-top: 2px !important;
}

@media (max-width: 720px) {
  body.had-static-site .case-project-area .case-stage {
    grid-template-columns: 1fr !important;
  }

  body.had-static-site .case-project-area .case-stage > .case-card:first-child,
  body.had-static-site .case-project-area .case-stage > .had-builder-split-fragment:first-of-type,
  body.had-static-site .case-project-area .case-stage > .uxb-wrapper--ux_html.had-builder-moved-fragment:first-of-type {
    grid-column: auto !important;
  }

  body.had-static-site .case-project-area .case-stage > .case-card:not(:first-child),
  body.had-static-site .case-project-area .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card,
  body.had-static-site .case-project-area .case-stage > .uxb-wrapper--ux_html.had-builder-moved-fragment:not(:first-of-type) .case-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body.had-static-site .case-project-area .case-stage .case-media,
  body.had-static-site .case-project-area .case-stage > .case-card:first-child .case-media,
  body.had-static-site .case-project-area .case-stage > .case-card:not(:first-child) .case-media,
  body.had-static-site .case-project-area .case-stage > .had-builder-split-fragment > .case-card .case-media,
  body.had-static-site .case-project-area .case-stage > .uxb-wrapper--ux_html.had-builder-moved-fragment .case-card .case-media {
    flex-basis: 148px !important;
    height: 148px !important;
    min-height: 0 !important;
  }

  body.had-static-site .case-project-area .case-stage > .case-card:not(:first-child) .case-body p,
  body.had-static-site .case-project-area .case-stage > .case-card:not(:first-child) .case-meta,
  body.had-static-site .case-project-area .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card .case-body p,
  body.had-static-site .case-project-area .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card .case-meta,
  body.had-static-site .case-project-area .case-stage > .uxb-wrapper--ux_html.had-builder-moved-fragment:not(:first-of-type) .case-card .case-body p,
  body.had-static-site .case-project-area .case-stage > .uxb-wrapper--ux_html.had-builder-moved-fragment:not(:first-of-type) .case-card .case-meta {
    display: flex !important;
  }

  body.had-static-site .case-project-area .case-stage > .case-card:not(:first-child) .case-body p,
  body.had-static-site .case-project-area .case-stage > .had-builder-split-fragment:not(:first-of-type) > .case-card .case-body p,
  body.had-static-site .case-project-area .case-stage > .uxb-wrapper--ux_html.had-builder-moved-fragment:not(:first-of-type) .case-card .case-body p {
    display: block !important;
  }
}