/* Final shared visual safety layer.
   Keep this file as the last stylesheet on every page. */
@media (max-width: 760px) {
  .site-footer .footer-social .social-card:nth-child(5)::before,
  .footer-social .social-card:nth-child(5)::before {
    content: "" !important;
    width: 34px !important;
    height: 24px !important;
    display: block !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 34'%3E%3Crect width='48' height='34' rx='8' fill='%233c706b'/%3E%3Cpath d='m20 9 14 8-14 8Z' fill='%23020808'/%3E%3C/svg%3E") center / contain no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    opacity: .78 !important;
  }

  .site-footer .footer-social .social-card:nth-child(5)::after,
  .footer-social .social-card:nth-child(5)::after {
    content: none !important;
    display: none !important;
  }

  .site-footer .footer-social .social-card:nth-child(2)::before,
  .footer-social .social-card:nth-child(2)::before {
    background: #3c706b !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    opacity: .78 !important;
  }

  .site-footer .footer-social .social-card:nth-child(1)::before,
  .site-footer .footer-social .social-card:nth-child(3)::before,
  .site-footer .footer-social .social-card:nth-child(4)::before,
  .footer-social .social-card:nth-child(1)::before,
  .footer-social .social-card:nth-child(3)::before,
  .footer-social .social-card:nth-child(4)::before {
    color: #3c706b !important;
    -webkit-text-fill-color: #3c706b !important;
    background: transparent !important;
    opacity: .78 !important;
  }

  .company-hero-media::after {
    background:
      radial-gradient(ellipse at center, rgba(3,9,9,0) 34%, rgba(3,9,9,.28) 70%, #030909 100%),
      linear-gradient(90deg, rgba(3,9,9,.76), rgba(3,9,9,.10) 52%, rgba(3,9,9,.78)) !important;
  }

  main.about-page.about-reference-layout {
    background-position:
      center center,
      center center,
      center calc(50% + var(--about-parallax, 0px)) !important;
    background-size:
      100% 100%,
      100% 100%,
      cover !important;
  }
}

@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    background: #020808;
  }

  .container,
  .about-ref-container,
  .guide-container {
    width: min(calc(100% - 32px), var(--max, 1120px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .site-header {
    min-height: 74px !important;
    background: rgba(2, 8, 8, .96) !important;
    border-bottom: 1px solid rgba(111, 238, 226, .16) !important;
  }

  .site-header .navbar,
  .site-header .container.navbar {
    min-height: 74px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .site-header .brand {
    flex: 0 0 auto !important;
  }

  .site-header .brand img {
    width: 42px !important;
    height: 42px !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    object-fit: contain !important;
  }

  .site-header .brand span {
    display: none !important;
  }

  .site-header .nav-links {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: none !important;
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    top: 68px !important;
    z-index: 30 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 12px !important;
    overflow: visible !important;
    white-space: normal !important;
    background: rgba(3, 14, 13, .98) !important;
    border: 1px solid rgba(111, 238, 226, .22) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .42) !important;
    scrollbar-width: none;
  }

  .site-header .nav-links.open {
    display: flex !important;
  }

  .site-header .nav-links::-webkit-scrollbar {
    display: none;
  }

  .site-header .nav-links a {
    flex: 0 0 auto !important;
    padding: 9px 10px !important;
    font-size: .86rem !important;
  }

  .submenu {
    display: none !important;
  }

  body .site-footer {
    margin-top: 0 !important;
    min-height: 96px !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    background: rgba(1, 7, 7, .92) !important;
    border-top: 1px solid rgba(111, 238, 226, .16) !important;
  }

  body:has(.about-reference-layout) .site-footer {
    min-height: 96px !important;
    padding: 0 !important;
  }

  body:has(.about-reference-layout) .site-footer > .container.footer-row {
    min-height: 96px !important;
    padding: 12px 0 !important;
  }

  body .site-footer > .container,
  body .site-footer > .container.footer-row,
  body .footer-row {
    width: min(calc(100% - 32px), var(--max, 1120px)) !important;
    min-height: 96px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 12px 0 !important;
    display: grid !important;
    grid-template-columns: minmax(128px, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .site-footer strong,
  .site-footer div,
  .site-footer .small {
    font-size: .68rem !important;
    line-height: 1.25 !important;
  }

  .site-footer strong {
    display: block !important;
    font-weight: 700 !important;
  }

  .site-footer .footer-social,
  .footer-social.social-grid,
  .site-footer .social-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .site-footer .social-card,
  .footer-social .social-card {
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    color: transparent !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 0 !important;
  }

  .site-footer .social-card::before,
  .footer-social .social-card::before {
    color: rgba(86, 190, 181, .42) !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
  }

  .site-footer .social-card::after,
  .footer-social .social-card::after {
    opacity: .42 !important;
  }

  .company-hero {
    min-height: calc(100svh - 170px) !important;
  }

  .company-hero-overlay {
    align-items: flex-start !important;
    padding-top: 64px !important;
    padding-bottom: 0 !important;
  }

  .company-hero .hero-copy {
    width: min(100%, 330px) !important;
    margin: 0 !important;
    display: block !important;
  }

  .company-hero h1 {
    font-size: clamp(1.65rem, 7.5vw, 2.4rem) !important;
    line-height: 1.08 !important;
    max-width: 12ch !important;
  }

  .company-hero .lead {
    margin-top: 10px !important;
    font-size: .72rem !important;
    letter-spacing: .08em !important;
  }

  .company-hero-media img {
    object-fit: contain !important;
    object-position: center 58% !important;
  }

  .page-hero {
    min-height: auto !important;
    padding: 46px 0 36px !important;
  }

  main .page-hero h1.brand-page-heading,
  .brand-page-heading {
    display: block !important;
    white-space: normal !important;
    font-size: clamp(3.4rem, 18vw, 5rem) !important;
    line-height: .9 !important;
    letter-spacing: -.06em !important;
    margin: 0 !important;
  }

  .brand-page-heading .brand-prefix,
  .brand-page-heading .brand-suffix {
    display: inline !important;
    font-size: 1em !important;
  }

  .brand-page-heading .brand-word,
  .brand-page-heading .page-word,
  main .page-hero h1.brand-page-heading .page-word {
    display: block !important;
    font-size: .58em !important;
    margin-left: 0 !important;
  }

  .products-background-page .section,
  .documentation-content,
  .section {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .product-card,
  .resource-card,
  .feature,
  .documentation-support,
  .distribution-box {
    border-radius: 18px !important;
  }

  .product-card {
    padding: 24px !important;
  }

  .product-title-row {
    align-items: center !important;
    gap: 10px !important;
  }

  .product-title-icon {
    width: .78em !important;
    height: .78em !important;
    margin-left: 0 !important;
  }

  .ms-hero-layout,
  .panel-pair,
  .feature-list,
  .documentation-grid,
  .about-hero-grid,
  .about-direction-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .ms-product-hero {
    padding: 46px 0 34px !important;
  }

  .ms-hero-copy h1,
  .guide-title,
  .about-cinema-hero h1,
  .contact-panel h1 {
    font-size: clamp(2.6rem, 13vw, 4.1rem) !important;
    line-height: .92 !important;
    letter-spacing: -.055em !important;
  }

  .ms-hero-visual,
  .product-shot,
  .panel-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    transform: none !important;
  }

  .ms-hero-visual img,
  .product-shot img,
  .panel-card img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
  }

  .guide-page-shell {
    padding-top: 0 !important;
  }

  .guide-hero {
    padding: 38px 0 28px !important;
  }

  .guide-lead {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .guide-pages {
    padding: 28px 0 42px !important;
  }

  .guide-stack {
    gap: 18px !important;
  }

  .guide-page {
    margin: 0 !important;
    border-radius: 14px !important;
  }

  .guide-page img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .about-cinema-hero {
    min-height: auto !important;
    padding: 54px 0 44px !important;
  }

  .about-ref-section {
    padding: 42px 0 !important;
  }

  .contact-page {
    min-height: calc(100svh - 170px) !important;
    padding: 48px 0 !important;
    display: grid !important;
    place-items: center !important;
  }

  .contact-panel {
    width: min(calc(100% - 32px), 460px) !important;
    padding: 28px 22px !important;
  }

  .contact-panel .social-grid {
    justify-content: center !important;
    gap: 12px !important;
  }

  /* Final mobile polish: keep icons monochrome and reduce oversized mobile headings. */
  .site-footer .footer-social .social-card::before,
  .site-footer .footer-social .social-card:nth-child(1)::before,
  .site-footer .footer-social .social-card:nth-child(2)::before,
  .site-footer .footer-social .social-card:nth-child(3)::before,
  .site-footer .footer-social .social-card:nth-child(4)::before,
  .site-footer .footer-social .social-card:nth-child(5)::before {
    color: rgba(86, 190, 181, .42) !important;
    background: transparent !important;
    -webkit-text-fill-color: rgba(86, 190, 181, .42) !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
  }

  .site-footer .footer-social .social-card:nth-child(2)::before {
    color: transparent !important;
    background: rgba(86, 190, 181, .42) !important;
    -webkit-text-fill-color: transparent !important;
  }

  .site-footer .footer-social .social-card:nth-child(5)::before {
    color: transparent !important;
    background: rgba(86, 190, 181, .42) !important;
    -webkit-text-fill-color: transparent !important;
  }

  .site-footer .footer-social .social-card:nth-child(5)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    border-left: 10px solid #020808 !important;
    transform: translate(-32%, -50%) !important;
    opacity: 1 !important;
  }

  .footer-social .social-card::before {
    color: rgba(86, 190, 181, .42) !important;
    background: transparent !important;
    -webkit-text-fill-color: rgba(86, 190, 181, .42) !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
  }

  .footer-social .social-card:nth-child(2)::before {
    color: transparent !important;
    background: rgba(86, 190, 181, .42) !important;
    -webkit-text-fill-color: transparent !important;
  }

  .footer-social .social-card:nth-child(5)::before {
    color: transparent !important;
    background: rgba(86, 190, 181, .42) !important;
    -webkit-text-fill-color: transparent !important;
  }

  .footer-social .social-card:nth-child(5)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    border-left: 10px solid #020808 !important;
    transform: translate(-32%, -50%) !important;
    opacity: 1 !important;
  }

  body:has(.about-reference-layout) .site-footer .footer-social .social-card::before {
    color: rgba(86, 190, 181, .42) !important;
    background: transparent !important;
    -webkit-text-fill-color: rgba(86, 190, 181, .42) !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body:has(.about-reference-layout) .site-footer .footer-social .social-card:nth-child(2)::before,
  body:has(.about-reference-layout) .site-footer .footer-social .social-card:nth-child(5)::before {
    color: transparent !important;
    background: rgba(86, 190, 181, .42) !important;
    -webkit-text-fill-color: transparent !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body:has(.about-reference-layout) .site-footer .footer-social .social-card:nth-child(5)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    border-left: 10px solid #020808 !important;
    transform: translate(-32%, -50%) !important;
    opacity: 1 !important;
  }

  body > main > .company-hero,
  .company-hero {
    min-height: calc(100svh - 170px) !important;
    max-height: calc(100svh - 170px) !important;
  }

  .company-hero-overlay {
    padding-top: 52px !important;
  }

  .company-hero h1 {
    max-width: 13ch !important;
    font-size: clamp(1.35rem, 6.2vw, 1.9rem) !important;
    line-height: 1.12 !important;
  }

  .company-hero .lead {
    font-size: .66rem !important;
  }

  .company-hero-media img {
    object-fit: cover !important;
    object-position: center center !important;
  }

  .company-hero-media::after {
    background:
      radial-gradient(ellipse at center, rgba(3,9,9,0) 24%, rgba(3,9,9,.42) 70%, #030909 100%),
      linear-gradient(180deg, rgba(3,9,9,.08), rgba(3,9,9,.18) 58%, #030909 100%),
      linear-gradient(90deg, rgba(3,9,9,.76), rgba(3,9,9,.08) 58%, rgba(3,9,9,.68)) !important;
  }

  main .page-hero h1.brand-page-heading,
  .brand-page-heading {
    font-size: clamp(2.85rem, 13.2vw, 3.55rem) !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
  }

  .brand-page-heading .page-word,
  main .page-hero h1.brand-page-heading .page-word {
    font-size: .62em !important;
    letter-spacing: .02em !important;
    line-height: 1.04 !important;
  }

  .documentation-page .brand-page-heading .page-word,
  .documentation-page main .page-hero h1.brand-page-heading .page-word {
    font-size: .52em !important;
    letter-spacing: .01em !important;
  }

  .ms-hero-copy h1,
  .guide-title,
  .about-cinema-hero h1,
  .contact-panel h1 {
    font-size: clamp(2.15rem, 10.5vw, 3.15rem) !important;
    line-height: .98 !important;
    letter-spacing: -.04em !important;
  }

  .about-reference-layout {
    --about-parallax: 0px !important;
    background-position: center center !important;
    background-size: auto 100% !important;
    background-attachment: scroll !important;
  }

  main.about-page.about-reference-layout {
    --about-parallax: 0px !important;
    background-position: center center !important;
    background-size: auto 100% !important;
    background-attachment: scroll !important;
  }

  .about-cinema-hero {
    background-position: center center !important;
  }

  .contact-page {
    min-height: calc(100svh - 170px) !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    background-position: center center !important;
    background-size: auto 82% !important;
    background-repeat: no-repeat !important;
  }

  .contact-panel h1 {
    white-space: normal !important;
    font-size: clamp(2rem, 9.5vw, 2.85rem) !important;
  }

  .contact-panel h1 span {
    display: block !important;
  }
}

@media (max-width: 760px) and (min-height: 560px) {
  .about-reference-layout {
    --about-parallax: 0px !important;
    background-attachment: scroll !important;
  }
}

/* Last shared footer/icon override — must stay at the very end. */
@media (max-width: 760px) {
  .site-footer .footer-social .social-card:nth-child(5)::before,
  .footer-social .social-card:nth-child(5)::before,
  body:has(.about-reference-layout) .site-footer .footer-social .social-card:nth-child(5)::before {
    content: "" !important;
    width: 34px !important;
    height: 24px !important;
    display: block !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 34'%3E%3Crect width='48' height='34' rx='8' fill='%233c706b'/%3E%3Cpath d='m20 9 14 8-14 8Z' fill='%23020808'/%3E%3C/svg%3E") center / contain no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    opacity: .78 !important;
  }

  .site-footer .footer-social .social-card:nth-child(5)::after,
  .footer-social .social-card:nth-child(5)::after,
  body:has(.about-reference-layout) .site-footer .footer-social .social-card:nth-child(5)::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 760px) {
  html:has(body > main > .company-hero),
  body:has(> main > .company-hero),
  body:has(.contact-page) {
    overflow-y: hidden !important;
  }

  .site-footer .footer-social {
    gap: 7px !important;
  }

  .site-footer .footer-social .social-card {
    width: 28px !important;
    min-width: 28px !important;
  }

  .site-footer .footer-social .social-card::before {
    font-size: 1.25rem !important;
  }

  .site-footer .footer-social .social-card:nth-child(2)::before {
    width: 27px !important;
    height: 27px !important;
  }

  .site-footer .footer-social .social-card:nth-child(5)::before {
    width: 30px !important;
    height: 21px !important;
  }

  body:has(.about-reference-layout) .site-footer .footer-social {
    gap: 6px !important;
  }

  body:has(.about-reference-layout) .site-footer .footer-social .social-card {
    width: 27px !important;
    min-width: 27px !important;
    max-width: 27px !important;
  }

  body:has(.about-reference-layout) .site-footer .footer-social .social-card:nth-child(2)::before {
    width: 27px !important;
    height: 27px !important;
  }

  body:has(.about-reference-layout) .site-footer .footer-social .social-card:nth-child(5)::before {
    width: 30px !important;
    height: 21px !important;
  }

  .company-hero-media img {
    object-fit: contain !important;
    object-position: center center !important;
  }

  body:has(> main > .company-hero) .company-hero-media {
    display: block !important;
    overflow: hidden !important;
    background: #030909 !important;
  }

  body:has(> main > .company-hero) .company-hero-media img {
    position: absolute !important;
    left: 50% !important;
    top: 54% !important;
    width: 300% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: translate(-50%, -50%) !important;
    opacity: 1 !important;
    filter: saturate(1.08) contrast(1.05) brightness(1.12) !important;
  }

  body:has(> main > .company-hero) .company-hero-media::after {
    background:
      radial-gradient(ellipse at center, rgba(3,9,9,0) 34%, rgba(3,9,9,.12) 72%, #030909 100%),
      linear-gradient(180deg, rgba(3,9,9,.04), rgba(3,9,9,.10) 68%, #030909 100%) !important;
  }

  body:has(> main > .company-hero) {
    height: 100svh !important;
    max-height: 100svh !important;
  }

  body:has(> main > .company-hero) > main {
    flex: 0 0 calc(100svh - 171px) !important;
    min-height: 0 !important;
    max-height: calc(100svh - 171px) !important;
    overflow: hidden !important;
  }

  body:has(> main > .company-hero) > main > .company-hero {
    min-height: calc(100svh - 171px) !important;
    max-height: calc(100svh - 171px) !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   DEMQORA — FINAL MOBILE PAGE BACKGROUNDS
   30 Sep 2026
   Applies ONLY to mobile.
   Desktop backgrounds remain unchanged.
   ========================================================= */

@media (max-width: 760px) {

  html,
  body {
    background-color: #020808 !important;
  }

  .company-hero {
    position: relative !important;
    min-height: calc(100svh - 170px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #020808 !important;
  }

  .company-hero-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    background-color: #020808 !important;
    background-image: url("../img/mobile-home.png") !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
  }

  .company-hero-media picture,
  .company-hero-media img {
    display: none !important;
  }

  .company-hero-media::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  .company-hero-overlay {
    display: none !important;
  }

  main.products-background-page {
    position: relative !important;
    background-color: #020808 !important;
    background-image:
      linear-gradient(
        180deg,
        rgba(2, 8, 8, .02) 0%,
        rgba(2, 8, 8, .08) 42%,
        rgba(2, 8, 8, .46) 82%,
        #020808 100%
      ),
      url("../img/mobile-products.png") !important;
    background-size:
      100% 100%,
      100% auto !important;
    background-position:
      center top,
      center top !important;
    background-repeat:
      no-repeat,
      no-repeat !important;
    background-attachment:
      scroll,
      scroll !important;
  }

  main.products-background-page > .page-hero,
  main.products-background-page > .section {
    background: transparent !important;
  }

  main.documentation-page {
    position: relative !important;
    isolation: isolate !important;
    background-color: #020808 !important;
    background-image:
      linear-gradient(
        180deg,
        rgba(2, 8, 8, .01) 0%,
        rgba(2, 8, 8, .10) 40%,
        rgba(2, 8, 8, .50) 82%,
        #020808 100%
      ),
      url("../img/mobile-documentation.png") !important;
    background-size:
      100% 100%,
      100% auto !important;
    background-position:
      center top,
      center top !important;
    background-repeat:
      no-repeat,
      no-repeat !important;
    background-attachment:
      scroll,
      scroll !important;
  }

  main.documentation-page::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background:
      radial-gradient(
        circle at 74% 18%,
        rgba(22, 234, 215, .035),
        transparent 22rem
      ) !important;
  }

  main.documentation-page > .page-hero,
  main.documentation-page > .section,
  main.documentation-page .documentation-content {
    background: transparent !important;
  }

  main.about-page.about-reference-layout {
    position: relative !important;
    background-color: #020808 !important;
    background-image:
      linear-gradient(
        180deg,
        rgba(2, 8, 8, .00) 0%,
        rgba(2, 8, 8, .08) 45%,
        rgba(2, 8, 8, .42) 82%,
        #020808 100%
      ),
      url("../img/mobile-about.png") !important;
    background-position:
      center top,
      center top !important;
    background-size:
      100% 100%,
      100% auto !important;
    background-repeat:
      no-repeat,
      no-repeat !important;
    background-attachment:
      scroll,
      scroll !important;
  }

  .about-reference-layout .about-cinema-hero,
  .about-reference-layout .about-ref-section,
  .about-reference-layout .about-ref-approach,
  .about-reference-layout .about-ref-philosophy,
  .about-reference-layout .about-ref-direction {
    background: transparent !important;
  }

  main.contact-page {
    position: relative !important;
    min-height: calc(100svh - 170px) !important;
    background-color: #020808 !important;
    background-image:
      linear-gradient(
        180deg,
        rgba(2, 8, 8, .03) 0%,
        rgba(2, 8, 8, .14) 68%,
        rgba(2, 8, 8, .36) 100%
      ),
      url("../img/mobile-contact.png") !important;
    background-position:
      center center,
      center center !important;
    background-size:
      cover,
      cover !important;
    background-repeat:
      no-repeat,
      no-repeat !important;
    background-attachment:
      scroll,
      scroll !important;
  }

  main.contact-page .contact-panel {
    position: relative !important;
    z-index: 1 !important;
    background:
      radial-gradient(
        ellipse at center,
        rgba(1, 8, 8, .72) 0%,
        rgba(1, 8, 8, .48) 48%,
        rgba(1, 8, 8, 0) 78%
      ) !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}

@media (max-width: 390px) {
  .company-hero-media {
    background-position: center center !important;
  }

  main.products-background-page,
  main.documentation-page,
  main.about-page.about-reference-layout {
    background-position:
      center top,
      center top !important;
  }

  main.contact-page {
    background-position:
      center center,
      center center !important;
  }
}

@media (max-width: 760px) {
  body:has(> main > .company-hero) .company-hero-media {
    background-color: #020808 !important;
    background-image: url("../img/mobile-home.png") !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
  }

  body:has(> main > .company-hero) .company-hero-media img,
  body:has(> main > .company-hero) .company-hero-media picture {
    display: none !important;
  }

  body:has(> main > .company-hero) .company-hero-media::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  body:has(> main > .company-hero) .company-hero-overlay {
    display: none !important;
  }
}

/* Contact mobile final correction: no page scroll + clean YouTube icon. */
@media (max-width: 760px) {
  html:has(body > main.contact-page),
  body:has(> main.contact-page) {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
  }

  body:has(> main.contact-page) {
    display: flex !important;
    flex-direction: column !important;
  }

  body > main.contact-page {
    flex: 0 0 calc(100svh - 170px) !important;
    min-height: calc(100svh - 170px) !important;
    max-height: calc(100svh - 170px) !important;
    height: calc(100svh - 170px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
  }

  body > main.contact-page .contact-panel {
    width: min(calc(100% - 32px), 430px) !important;
    max-height: calc(100svh - 190px) !important;
    padding: 16px 18px !important;
    overflow: hidden !important;
  }

  body > main.contact-page .contact-email {
    margin-top: 10px !important;
  }

  body > main.contact-page .social-grid {
    margin-top: 14px !important;
    gap: 6px !important;
  }

  body > main.contact-page .social-card {
    min-height: 38px !important;
    padding: 6px !important;
  }

  body > main.contact-page .contact-intro {
    margin-top: 10px !important;
  }

  body > main.contact-page .social-grid .social-card:nth-child(5)::before {
    content: "" !important;
    width: 30px !important;
    height: 21px !important;
    display: block !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 34'%3E%3Crect width='48' height='34' rx='8' fill='%233c706b'/%3E%3Cpath d='m20 9 14 8-14 8Z' fill='%23020808'/%3E%3C/svg%3E") center / contain no-repeat !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
    filter: none !important;
    opacity: .8 !important;
  }

  body > main.contact-page .social-grid .social-card:nth-child(5)::after {
    content: none !important;
    display: none !important;
  }
}

/* Mobile fixed backgrounds: page artwork stays locked while content scrolls. */
@media (max-width: 760px) {
  html,
  body {
    background: #020808 !important;
  }

  body {
    position: relative !important;
    isolation: isolate !important;
  }

  body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-color: #020808 !important;
    background-image: var(--mobile-fixed-bg) !important;
    background-position: var(--mobile-fixed-bg-position, center center) !important;
    background-size: var(--mobile-fixed-bg-size, cover) !important;
    background-repeat: no-repeat !important;
    transform: translateZ(0) !important;
  }

  body:has(> main > .company-hero) {
    --mobile-fixed-bg: url("../img/mobile-home.png");
    --mobile-fixed-bg-position: center center;
    --mobile-fixed-bg-size: cover;
  }

  body:has(> main.products-background-page) {
    --mobile-fixed-bg: linear-gradient(180deg, rgba(2, 8, 8, .02) 0%, rgba(2, 8, 8, .08) 42%, rgba(2, 8, 8, .46) 82%, #020808 100%), url("../img/mobile-products.png");
    --mobile-fixed-bg-position: center top, center top;
    --mobile-fixed-bg-size: 100% 100%, 100% auto;
  }

  body:has(> main.documentation-page) {
    --mobile-fixed-bg: linear-gradient(180deg, rgba(2, 8, 8, .01) 0%, rgba(2, 8, 8, .10) 40%, rgba(2, 8, 8, .50) 82%, #020808 100%), url("../img/mobile-documentation.png");
    --mobile-fixed-bg-position: center top, center top;
    --mobile-fixed-bg-size: 100% 100%, 100% auto;
  }

  body:has(> main.about-page.about-reference-layout) {
    --mobile-fixed-bg: linear-gradient(180deg, rgba(2, 8, 8, .00) 0%, rgba(2, 8, 8, .08) 45%, rgba(2, 8, 8, .42) 82%, #020808 100%), url("../img/mobile-about.png");
    --mobile-fixed-bg-position: center top, center top;
    --mobile-fixed-bg-size: 100% 100%, 100% auto;
  }

  body:has(> main.contact-page) {
    --mobile-fixed-bg: linear-gradient(180deg, rgba(2, 8, 8, .03) 0%, rgba(2, 8, 8, .14) 68%, rgba(2, 8, 8, .36) 100%), url("../img/mobile-contact.png");
    --mobile-fixed-bg-position: center center, center center;
    --mobile-fixed-bg-size: cover, cover;
  }

  .company-hero-media,
  main.products-background-page,
  main.documentation-page,
  main.about-page.about-reference-layout,
  main.contact-page {
    background-image: none !important;
    background-color: transparent !important;
    background-attachment: scroll !important;
  }

  .site-header,
  main,
  .site-footer {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* Mobile menu final position: always open directly under the header. */
@media (max-width: 760px) {
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  .site-header .nav-links {
    position: fixed !important;
    top: 74px !important;
    left: 16px !important;
    right: 16px !important;
    z-index: 1001 !important;
    max-height: calc(100svh - 90px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
  }

  .site-header .nav-links.open {
    display: flex !important;
  }
}

/* Mobile menu layering: dropdown must cover page text/content. */
@media (max-width: 760px) {
  body::before {
    z-index: 0 !important;
  }

  main,
  .site-footer {
    z-index: 1 !important;
  }

  .site-header {
    z-index: 2147483000 !important;
    isolation: isolate !important;
  }

  .site-header .nav-links,
  .site-header .nav-links.open {
    z-index: 2147483001 !important;
  }
}

/* Contact mobile visual cleanup: softer cloud, no boxed icon/text blocks. */
@media (max-width: 760px) {
  body > main.contact-page .contact-panel {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    overflow: visible !important;
  }

  body > main.contact-page .contact-panel::before {
    inset: -2.2rem -1.8rem !important;
    z-index: -1 !important;
    background:
      radial-gradient(
        ellipse at center,
        rgba(2, 10, 10, .94) 0%,
        rgba(2, 10, 10, .78) 46%,
        rgba(2, 10, 10, .34) 70%,
        rgba(2, 10, 10, 0) 88%
      ) !important;
    filter: blur(26px) !important;
    opacity: 1 !important;
  }

  body > main.contact-page .social-grid {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body > main.contact-page .social-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  body > main.contact-page .social-card::before {
    filter: brightness(0) saturate(100%) invert(83%) sepia(26%) saturate(1010%) hue-rotate(124deg) brightness(94%) contrast(88%) drop-shadow(0 0 7px rgba(22,234,215,.16)) !important;
    opacity: .62 !important;
  }

  body > main.contact-page .contact-intro {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: rgba(202, 222, 218, .72) !important;
  }

  body:has(> main.contact-page) .site-footer .footer-social {
    display: none !important;
  }
}

/* Contact page: no social icons in footer on any viewport. */
body:has(> main.contact-page) .site-footer .footer-social {
  display: none !important;
}