/* Public mobile/interaction fixes layered over the current production bundle. */

html,
html body,
html body #root {
  max-width: 100%;
  overflow-x: clip;
}

html body #root .ginko-mobile-menu {
  background: #f8f7f4 !important;
  border: 3px solid #050505 !important;
  box-shadow: 0 6px 0 #050505 !important;
  color: #101010 !important;
}

html body #root .ginko-mobile-menu a.ginko-mobile-dropdown-trigger {
  cursor: pointer !important;
}

html body #root .ginko-mobile-menu.ginko-mobile-menu--shell {
  background: #f8f7f4 !important;
  color: #101010 !important;
}

html body #root .ginko-mobile-menu .ginko-mobile-menu-links > a {
  color: rgba(16, 16, 16, 0.74) !important;
}

html body #root .ginko-mobile-menu .ginko-mobile-menu-links > a svg {
  color: #101010 !important;
  opacity: 0.52 !important;
}

html body #root .ginko-mobile-menu .ginko-mobile-menu-links > a:hover,
html body #root .ginko-mobile-menu .ginko-mobile-menu-links > a.is-active,
html body #root .ginko-mobile-menu .ginko-mobile-menu-links > a[aria-expanded="true"] {
  background: #fedf40 !important;
  color: #050505 !important;
}

html body #root .ginko-mobile-menu .ginko-mobile-menu-links > a[href="#/portfolio"] > span {
  font-size: 0 !important;
}

html body #root .ginko-mobile-menu .ginko-mobile-menu-links > a[href="#/portfolio"] > span::after {
  content: "Portfolio";
  font-size: 15px !important;
}

html body #root .ginko-mobile-submenu {
  display: none;
  gap: 8px;
  margin: -4px 0 10px;
  padding: 10px;
  border: 2px solid #050505;
  border-radius: 14px;
  background: #f8f7f4;
  box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0.08);
}

html body #root .ginko-mobile-submenu.is-open {
  display: grid;
}

html body #root .ginko-mobile-submenu a {
  min-height: 38px !important;
  padding: 9px 12px !important;
  border: 2px solid #050505 !important;
  border-radius: 10px !important;
  background: #fffaf0 !important;
  color: #101010 !important;
  font-family: Geist, Inter, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
}

html body #root .ginko-mobile-submenu a:hover,
html body #root .ginko-mobile-submenu a:focus-visible,
html body #root .ginko-mobile-submenu a.is-active {
  background: #fedf40 !important;
  color: #050505 !important;
}

html body #root .ginko-mobile-menu a[data-ginko-hidden-mobile-link="true"] {
  display: none !important;
}

html body #root .ginko-mobile-menu .ginko-mobile-menu-links > a[href="#/portfolio/gallery"] {
  display: none !important;
}

html body #root .services-yellow-hero,
html body #root .services-layer-strip {
  color: #050505 !important;
}

html body #root .services-yellow-hero :is(h1, h2, h3, p, a:not(.creem-button)),
html body #root .services-layer-strip :is(.services-layer-strip-head h2, .services-layer-strip-head p, .services-mini-label) {
  color: #050505 !important;
  text-shadow: none !important;
}

html body #root .services-yellow-hero .creem-button--dark,
html body #root .services-yellow-hero .creem-button--dark *,
html body #root .services-layer-strip .services-layer-strip-card:not(.is-active),
html body #root .services-layer-strip .services-layer-strip-card:not(.is-active) * {
  color: #fff !important;
}

html body #root .services-layer-strip .services-layer-strip-card.is-active,
html body #root .services-layer-strip .services-layer-strip-card.is-active * {
  color: #050505 !important;
}

html body #root .ginko-proof-carousel-viewport,
html body #root .services-proof-clean-viewport {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  scroll-snap-type: x proximity !important;
  touch-action: pan-x pan-y !important;
  cursor: grab !important;
  scrollbar-width: none !important;
}

html body #root .ginko-proof-carousel-viewport::-webkit-scrollbar,
html body #root .services-proof-clean-viewport::-webkit-scrollbar,
html body #root .about-feature-stage::-webkit-scrollbar {
  display: none !important;
}

html body #root .ginko-proof-carousel-viewport.is-dragging,
html body #root .services-proof-clean-viewport.is-dragging,
html body #root .about-feature-stage.is-dragging {
  cursor: grabbing !important;
  user-select: none !important;
}

html body #root .ginko-proof-carousel-track,
html body #root .services-proof-clean-track {
  width: max-content !important;
  min-width: 100% !important;
  will-change: transform !important;
}

html body #root .ginko-proof-carousel-viewport.is-dragging .ginko-proof-carousel-track,
html body #root .services-proof-clean-viewport.is-dragging .services-proof-clean-track {
  animation-play-state: paused !important;
}

html body #root .ginko-proof-card,
html body #root .services-proof-clean-card {
  scroll-snap-align: center !important;
}

html body #root .about-feature-stage {
  min-height: clamp(470px, 42vw, 540px) !important;
  overflow: visible !important;
  touch-action: pan-y !important;
  cursor: grab !important;
}

html body #root .ginko-layer-carousel-section::before {
  top: -39px !important;
  height: 40px !important;
  background: #8f72f5 !important;
  box-shadow: 0 2px 0 #8f72f5 !important;
}

html body #root :is(label.ginko-control, .ginko-control, .ginko-search-field, .portfolio-controls-clean):has(input[type="search"], input[placeholder*="Search"], input[placeholder*="search"]) {
  border: 3px solid #050505 !important;
  border-radius: 14px !important;
  background: #111214 !important;
  box-shadow: 0 4px 0 #050505 !important;
}

html body #root :is(input[type="search"], input[placeholder*="Search"], input[placeholder*="search"]) {
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

html body #root :is(input[type="search"], input[placeholder*="Search"], input[placeholder*="search"])::placeholder {
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

html body #root section:has(.ginko-product-media-stage) .grid {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body #root section:has(.ginko-product-media-stage) .grid.gap-5,
html body #root section:has(.ginko-product-media-stage) .grid:has(.ginko-product-rich-description),
html body #root section:has(.ginko-product-media-stage) .grid:has(.ginko-product-dependencies) {
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body #root section:has(.ginko-product-media-stage) .grid.gap-5 > *,
html body #root section:has(.ginko-product-media-stage) .grid:has(.ginko-product-rich-description) > *,
html body #root section:has(.ginko-product-media-stage) .grid:has(.ginko-product-dependencies) > * {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body #root .ginko-product-rich-description {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

html body #root .ginko-product-rich-description :is(details, figure, blockquote, pre, iframe, img, video),
html body #root .ginko-product-dependencies,
html body #root .ginko-product-dependencies-table {
  max-width: 100% !important;
}

html body #root .ginko-product-rich-description :is(img, video) {
  height: auto !important;
  object-fit: contain !important;
}

html body #root .ginko-product-rich-description iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}

html body #root .ginko-product-rich-description table {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  table-layout: auto !important;
  white-space: normal !important;
}

html body #root .ginko-product-rich-description :is(thead, tbody, tr) {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body #root .ginko-product-rich-description :is(th, td) {
  min-width: 0 !important;
  max-width: min(260px, 64vw) !important;
  width: auto !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body #root .contact-shell {
  gap: 24px !important;
}

html body #root .contact-form {
  margin-top: 0 !important;
}

html body #root .contact-form :is(input, textarea)::placeholder {
  font-size: clamp(0.78rem, 3.3vw, 0.9rem) !important;
  line-height: 1.25 !important;
}

@media (max-width: 760px) {
  html body #root .ginko-proof-carousel-viewport,
  html body #root .services-proof-clean-viewport {
    margin-inline: calc(50% - 50vw) !important;
    padding-inline: 16px !important;
    width: 100vw !important;
  }

  html body #root .ginko-proof-carousel-track,
  html body #root .services-proof-clean-track {
    gap: 14px !important;
    padding: 2px 0 14px !important;
  }

  html body #root .ginko-proof-card,
  html body #root .services-proof-clean-card {
    flex: 0 0 min(324px, calc(100vw - 64px)) !important;
    width: min(324px, calc(100vw - 64px)) !important;
  }

  html body #root .about-hero {
    margin-top: 0 !important;
    padding-top: 92px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  html body #root .about-hero-copy {
    height: auto !important;
    min-height: 0 !important;
  }

  html body #root .about-orbital {
    margin-top: 28px !important;
  }

  html body #root .about-proof-wall {
    margin-top: 28px !important;
  }

  html body #root .about-feature-carousel {
    margin-top: 34px !important;
  }

  html body #root .about-feature-stage {
    min-height: 480px !important;
  }

  html body #root section:has(.ginko-product-media-stage) .ginko-panel,
  html body #root section:has(.ginko-product-media-stage) .ginko-panel-strong,
  html body #root section:has(.ginko-product-media-stage) .ginko-product-rich-description,
  html body #root section:has(.ginko-product-media-stage) .ginko-product-dependencies {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body #root .ginko-product-mobile-buy-panel {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    order: 3 !important;
  }

  html body #root .ginko-product-gallery-strip {
    margin-bottom: 12px !important;
    scrollbar-width: none !important;
  }

  html body #root .ginko-product-gallery-strip::-webkit-scrollbar {
    display: none !important;
  }
}