/*
 * V85 homepage mobile adaptation.
 * This file is deliberately mobile-only so the accepted desktop composition
 * remains byte-for-byte and visually untouched.
 */
@media (max-width: 768px) {
  /* Keep the ordinary document flow compact on mobile. */
  .hero-product-transition {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #000;
  }

  .hero-product-sticky {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    display: block;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .hero-product-sticky .hero-section {
    position: relative !important;
    inset: auto !important;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 42px 0 24px;
    overflow: hidden;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .story-blackout,.audience-panel {
    display: none !important;
  }

  /* Mobile hero copy: text first, then the touch carousel. */
  .hero-copy {
    order: 1;
    width: min(calc(100% - 32px), 560px) !important;
    min-height: 0 !important;
    margin-inline: auto;
    padding: 14px 0 0;
    justify-content: flex-start;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto;
  }

  .hero-copy .personal-title {
    max-width: 12em;
    margin-inline: auto;
    font-size: clamp(27px, 7.7vw, 34px);
    font-weight: 560;
    line-height: 1.32;
    letter-spacing: -.018em;
  }

  .hero-copy .personal-title span {
    white-space: normal;
  }

  .hero-audience-switch {
    margin-top: 20px;
    padding: 3px;
  }

  .hero-audience-button {
    min-width: 72px;
    height: 36px;
    padding: 0 15px;
    font-size: 12px;
  }

  .hero-copy .personal-tags {
    min-height: 24px;
    margin-top: 14px;
  }

  .hero-copy .personal-tags .personal-tag {
    font-size: 14px;
    letter-spacing: .1em;
  }

  .hero-copy .personal-tags .personal-separator {
    font-size: 13px;
  }

  /* One primary card with restrained previews on both sides. */
  .hero-visual-anchor {
    --v85-card-width: min(72vw, 280px);
    order: 2;
    position: relative !important;
    inset: auto !important;
    z-index: 3;
    width: 100%;
    height: clamp(346px, 104vw, 420px);
    margin-top: 12px;
    overflow: hidden;
    cursor: default;
    touch-action: pan-y pinch-zoom;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .hero-ring-stage,.hero-ring-rig {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: calc(100% - 38px);
    perspective: none;
    transform: none !important;
    transform-style: flat;
  }

  .hero-ring {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box;
    padding: 12px calc((100% - var(--v85-card-width)) / 2) 14px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: calc((100% - var(--v85-card-width)) / 2);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    transform: none !important;
    transform-style: flat;
    will-change: auto;
  }

  .hero-ring::-webkit-scrollbar {
    display: none;
  }

  .hero-ring-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    flex: 0 0 var(--v85-card-width);
    width: var(--v85-card-width) !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    background: #10151b;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
    opacity: .48;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform: scale(.92) !important;
    transform-style: flat;
    transition: opacity .26s ease, transform .32s cubic-bezier(.22, 1, .36, 1), border-color .26s ease;
  }

  .hero-ring-card.is-v85-current {
    z-index: 2;
    border-color: rgba(103, 177, 255, .52);
    opacity: 1;
    transform: scale(1) !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .34);
  }

  .hero-ring-card::after {
    left: 13px;
    right: auto;
    top: 13px;
    bottom: auto;
    min-width: 0;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 9px;
    line-height: 1.4;
    transform: none;
  }

  .hero-ring-visual,.hero-ring-card:hover .hero-ring-visual,.hero-ring-card:focus .hero-ring-visual {
    position: absolute;
    inset: 0;
    transform: none !important;
    transform-style: flat;
    transition: none;
  }

  .hero-ring-face-front {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none !important;
    backface-visibility: visible;
  }

  .hero-ring-face-back,.hero-ring-copy-back {
    display: none !important;
  }

  .hero-ring-copy-front {
    inset: auto 0 0;
    min-height: 48%;
    padding: 56px 18px 18px;
    justify-content: flex-end;
    background: linear-gradient(180deg, transparent 0%, rgba(4, 8, 13, .7) 36%, rgba(4, 8, 13, .98) 100%);
    opacity: 0;
    transform: none !important;
    transition: opacity .24s ease;
  }

  .hero-ring-card.is-v85-current .hero-ring-copy-front {
    opacity: 1;
  }

  .hero-ring-copy-front small {
    margin-bottom: 7px;
    font-size: 10px;
    line-height: 1.4;
  }

  .hero-ring-copy-front strong {
    font-size: clamp(18px, 5vw, 21px);
    line-height: 1.35;
  }

  .hero-ring-copy-front > span {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.65;
    -webkit-line-clamp: 2;
  }

  .v85-hero-carousel-control {
    position: absolute;
    top: calc(50% - 21px);
    z-index: 8;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(10, 15, 21, .68);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font: inherit;
    font-size: 25px;
    font-weight: 300;
    line-height: 1;
  }

  .v85-hero-prev { left: 8px; }
  .v85-hero-next { right: 8px; }

  .v85-hero-carousel-control:focus-visible {
    outline: 3px solid rgba(82, 168, 255, .55);
    outline-offset: 2px;
  }

  .v85-hero-count {
    position: absolute;
    right: 0;
    bottom: 5px;
    left: 0;
    z-index: 8;
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
    letter-spacing: .08em;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
  }

  /* Keep the primary audience entrances, but make them part of the flow. */
  .hero-role-dock {
    order: 3;
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 4;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 76px;
    width: calc(100% - 24px) !important;
    min-height: 76px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 4px;
    background: rgba(14, 19, 25, .86);
    transform: none !important;
    overflow: hidden;
  }

  .hero-role-dock a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 9px 4px;
    border-left: 1px solid rgba(255, 255, 255, .12);
    text-align: center;
  }

  .hero-role-dock a:first-child {
    border-left: 0;
  }

  .hero-role-dock strong {
    width: 100%;
    overflow: hidden;
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero-role-dock small {
    display: block;
    width: 100%;
    overflow: hidden;
    color: rgba(255, 255, 255, .48);
    font-size: 8px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Major updates become a real section, not an overlaid frame. */
  .company-banner-panel,.js .company-banner-panel {
    position: relative !important;
    inset: auto !important;
    z-index: auto;
    display: block;
    min-height: 0 !important;
    padding: 68px 0 64px;
    overflow: hidden;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .company-banner-head {
    width: calc(100% - 32px);
    margin: 0 auto 28px;
    text-align: left;
  }

  .company-banner-kicker {
    margin: 0 0 9px;
    font-size: 9px;
    letter-spacing: .14em;
  }

  .company-banner-title {
    font-size: clamp(25px, 7vw, 30px);
    font-weight: 520;
    line-height: 1.4;
  }

  .company-banner-viewport {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    overflow: clip !important;
    border: 0;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 16px;
    scroll-snap-type: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    pointer-events: auto !important;
  }

  .company-banner-viewport::-webkit-scrollbar {
    display: none;
  }

  .company-banner-track {
    gap: 12px !important;
    will-change: transform;
  }

  .company-banner-card,.company-banner-card.is-active {
    width: min(82vw, 450px) !important;
    height: auto !important;
    aspect-ratio: 1.9 / 1 !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 6px !important;
    background: #f2f4f6;
    box-shadow: none !important;
    opacity: .54;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transform: scale(.975) !important;
    transition: opacity .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1) !important;
  }

  .company-banner-card.is-active {
    opacity: 1;
    transform: scale(1) !important;
  }

  .company-banner-card::before,.company-banner-card[data-banner="musa"]::before,.company-banner-card[data-banner="xiangjiang"]::before,.company-banner-card[data-banner="xstudio"]::before {
    display: none !important;
  }

  .company-banner-card::after {
    display: none;
  }

  .company-banner-image,.company-banner-card.is-active .company-banner-image {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 5px;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  .company-banner-edge {
    display: block;
    width: 32px;
  }
  .company-banner-edge-prev { left: 0; }
  .company-banner-edge-next { right: 0; }

  .company-banner-controls {
    margin-top: 20px;
    pointer-events: auto !important;
  }

  .company-banner-dots {
    min-height: 44px;
    gap: 9px;
  }

  .company-banner-dot {
    width: 7px;
    height: 7px;
  }

  .company-banner-dot.is-active {
    width: 30px;
  }

  /* Product reveal becomes a stable image-above-copy section. */
  .product-reveal,.js .product-reveal {
    position: relative !important;
    inset: auto !important;
    z-index: auto;
    display: block;
    min-height: 0 !important;
    padding: 70px 0 84px;
    overflow: hidden;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .product-reveal::after {
    display: none;
  }

  .product-reveal-inner {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: min(calc(100% - 32px), 620px);
    height: auto !important;
    margin-inline: auto;
    padding: 0;
  }

  .product-reveal-media,.js .product-reveal-media {
    order: 1;
    align-self: auto;
    width: 100% !important;
    max-width: 560px;
    margin: 0 auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .product-reveal-media::after {
    display: none;
  }

  .product-reveal-media img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 390px;
    margin: 0 !important;
    object-fit: contain;
    object-position: center;
    filter: none;
    transform: none !important;
  }

  .product-reveal-copy {
    order: 2;
    align-self: auto;
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .product-reveal-copy > *,.js .product-reveal-copy > * {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .product-reveal-eyebrow {
    margin-bottom: 13px;
    font-size: clamp(30px, 8.5vw, 36px);
    line-height: 1.25;
  }

  .product-reveal-title {
    max-width: 16em;
    font-size: clamp(21px, 6vw, 27px);
    line-height: 1.48;
  }

  .product-reveal-copy .lead {
    max-width: 34em;
    margin-top: 17px;
    font-size: 14px;
    line-height: 1.78;
  }

  .product-reveal-copy .actions {
    margin-top: 24px;
  }

  .product-reveal .button {
    min-height: 44px;
    background: #0071e3;
    background-image: none;
    box-shadow: none;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .hero-ring,.company-banner-viewport {
    scroll-behavior: auto !important;
  }

  .hero-ring-card,.hero-ring-copy-front,.company-banner-card {
    transition: none !important;
  }
}