/* MRVËY mobile autopilot
   Native scroll chooses the chapter. Short, finite timelines tell the story. */

.mobile-dm-dock {
  display: none;
}

@media (max-width: 899px), (max-width: 1023px) and (pointer: coarse) {
  html.mobile-autopilot {
    --mobile-route-progress: 0;
    --mobile-nav-height: 62px;
    --mobile-heading-copy-gap: clamp(28px, 7vw, 36px);
  }

  html.mobile-autopilot body {
    overflow-x: clip;
    overflow-y: visible;
  }

  html.mobile-autopilot.mrv-menu-open body {
    overflow: hidden;
  }

  /* A visual-only seam tracks the journey without adding labels or UI noise. */
  .mobile-route-stitch {
    position: fixed;
    top: calc(var(--mobile-nav-height) + 11px);
    right: max(5px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 38;
    width: 3px;
    overflow: hidden;
    pointer-events: none;
    border-radius: 999px;
    background: rgba(16, 18, 15, .14);
    opacity: .82;
    transform: translateZ(0);
  }

  .mobile-route-stitch::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to bottom, var(--brand-green, #9be879) 0 72%, var(--brand-acid, #c5ff32) 72% 100%);
    transform: scaleY(var(--mobile-route-progress));
    transform-origin: center top;
    will-change: transform;
  }

  .mobile-autopilot main > section,
  .mobile-autopilot .founder-story__beat,
  .mobile-autopilot .founder-proof article,
  .mobile-autopilot .founder-origin__essay p {
    scroll-margin-top: calc(var(--mobile-nav-height) + 14px);
  }

  /* Sticky chapter descendants must not inherit a clipped scroll container on iOS. */
  .mobile-autopilot .story-page,
  .mobile-autopilot .customization-studio-page .studio-page,
  .customization-studio-page .mobile-autopilot .studio-page {
    overflow: visible;
  }

  /* The dedicated runtime owns phone reveals. Legacy reveal systems stay final-state. */
  .mobile-autopilot.story-motion .story-reveal,
  .mobile-autopilot .story-motion .story-reveal,
  .mobile-autopilot .qv2-motion [data-qv2-reveal],
  .mobile-autopilot .reveal {
    opacity: 1;
    visibility: visible;
    transform: none;
    clip-path: none;
    transition: none;
  }

  .mobile-autopilot .mobile-directed-section {
    isolation: isolate;
  }

  /* GSAP removes its inline staging in this one-frame state. Prevent any
     component transition underneath from replaying the same entrance. */
  .mobile-autopilot .mobile-directed-section.is-mobile-settling :is(
    h1,
    h2,
    p,
    article,
    figure,
    img,
    .story-actions,
    .qv2-actions,
    .founder-close__actions
  ) {
    transition: none !important;
  }

  .mobile-autopilot .mobile-directed-section::after {
    transition-duration: .82s;
  }

  .mobile-autopilot .exp-hero__garment img,
  .mobile-autopilot .story-campaign img,
  .mobile-autopilot .qv2-hero__stage img,
  .mobile-autopilot .commerce-product__image,
  .mobile-autopilot .logo-preview__garment-img {
    transform-origin: 50% 72%;
    backface-visibility: hidden;
  }

  /* Restore campaign-card staging for the founder story on phones. */
  .mobile-autopilot .founder-story--woven .founder-story__stack {
    display: block;
    overflow: visible;
    background: var(--brand-ink, #10120f);
  }

  .mobile-autopilot .founder-story--woven {
    overflow: visible;
  }

  .mobile-autopilot .founder-story--woven .founder-story__beat {
    position: sticky;
    top: var(--mobile-nav-height);
    z-index: var(--mobile-beat, 1);
    display: grid;
    align-content: center;
    min-height: calc(100svh - var(--mobile-nav-height));
    padding: clamp(62px, 10vh, 90px) 18px max(44px, env(safe-area-inset-bottom));
    overflow: hidden;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .15), 0 -24px 60px rgba(9, 12, 9, .13);
  }

  .mobile-autopilot .founder-story--woven .founder-story__beat:nth-child(1) { --mobile-beat: 1; }
  .mobile-autopilot .founder-story--woven .founder-story__beat:nth-child(2) { --mobile-beat: 2; }
  .mobile-autopilot .founder-story--woven .founder-story__beat:nth-child(3) { --mobile-beat: 3; }
  .mobile-autopilot .founder-story--woven .founder-story__beat:nth-child(4) { --mobile-beat: 4; }

  .mobile-autopilot .founder-story--woven .founder-story__beat h2 {
    max-width: 11.5ch;
  }

  .mobile-autopilot .founder-story--woven .founder-story__beat p {
    max-width: 33ch;
  }

  /* One editorial rhythm between a claim and its evidence across phone pages. */
  .mobile-autopilot .story-hero__copy h1 + .story-hero__lede,
  .mobile-autopilot .story-hero__copy h1 + p,
  .mobile-autopilot .qv2-hero__copy h1 + p,
  .mobile-autopilot .story-section-head h2 + p,
  .mobile-autopilot .section-header h2 + p,
  .mobile-autopilot .section-header h2 + .section-body,
  .mobile-autopilot .story-small-order__copy h2 + p,
  .mobile-autopilot .story-contact h2 + p,
  .mobile-autopilot .qv2-section-head h2 + p,
  .mobile-autopilot .qv2-assurance__intro h2 + p,
  .mobile-autopilot .founder-story__beat h2 + p,
  .mobile-autopilot .founder-hero h1 + p,
  .mobile-autopilot .founder-close h2 + p {
    margin-top: var(--mobile-heading-copy-gap) !important;
  }

  .mobile-autopilot .founder-story--about .founder-story__beat h2 + p {
    margin-top: 0 !important;
  }

  .mobile-autopilot .founder-hero h1 {
    margin-bottom: 0;
  }

  .mobile-autopilot .capsule-home-console__head,
  .mobile-autopilot .exp-home #products .section-header {
    gap: var(--mobile-heading-copy-gap);
  }

  /* Auto demonstrations are visible as a controlled focus, never as clickable cards. */
  .mobile-autopilot .is-mobile-demoing {
    --mobile-demo-ring: var(--brand-green, #9be879);
  }

  .mobile-autopilot [data-commerce-product-stage].is-mobile-demoing .commerce-product-media,
  .mobile-autopilot [data-finish-showcase].is-mobile-demoing .finish-showcase__media,
  .mobile-autopilot [data-home-capsule].is-mobile-demoing .capsule-home-preview {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mobile-demo-ring) 46%, transparent);
  }

  /* Price levels read as a sequence. The recommended level gets one textile sweep. */
  .mobile-autopilot .commerce-tier {
    position: relative;
    overflow: hidden;
  }

  .mobile-autopilot .commerce-tier--signature::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0 35%, rgba(255, 255, 255, .34) 48%, transparent 61%);
    transform: translate3d(-120%, 0, 0);
  }

  .mobile-autopilot .commerce-tier--signature.is-mobile-featured::after {
    animation: mobile-textile-pass .92s cubic-bezier(.22, 1, .36, 1) both;
  }

  .mobile-autopilot .commerce-tier > * {
    position: relative;
    z-index: 1;
  }

  @keyframes mobile-textile-pass {
    to { transform: translate3d(120%, 0, 0); }
  }

  /* Each process proof now performs after the scroll-selected chapter changes. */
  .mobile-autopilot .story-process__proof.is-active > * {
    backface-visibility: hidden;
  }

  .mobile-autopilot .story-process__chapter.is-active {
    opacity: 1;
  }

  /* Tactile feedback is brief and limited to explicit controls. */
  .mobile-autopilot button:not(.nav-mobile-toggle):active,
  .mobile-autopilot a[class*='button']:active,
  .mobile-autopilot a[class*='btn-']:active {
    transform: scale(.985);
    transition-duration: .08s;
  }

  /* A single quiet, thumb-reachable action remains available throughout the
     phone journey. The older two-action dock stays in the DOM on deep pages,
     but this mobile-native Instagram action replaces it visually. */
  html.has-mobile-dm-dock .mrv-dock {
    display: none !important;
  }

  .mobile-dm-dock {
    position: fixed;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 84;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 188px;
    min-height: 52px;
    max-width: calc(100vw - 32px);
    padding: 0 20px;
    color: var(--brand-paper, #f4f5f0);
    background: rgba(13, 15, 13, .94);
    border: 1px solid rgba(244, 245, 240, .18);
    border-radius: 999px;
    box-shadow: 0 14px 34px rgba(4, 6, 4, .24);
    -webkit-backdrop-filter: blur(14px) saturate(112%);
    backdrop-filter: blur(14px) saturate(112%);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-decoration: none;
    transform: translate3d(-50%, 0, 0);
    transition:
      opacity .24s ease,
      transform .36s cubic-bezier(.22, 1, .36, 1);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-dm-dock svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    overflow: visible;
    fill: none;
    stroke: var(--brand-acid, #c5ff32);
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-dm-dock [data-instagram-dot] {
    fill: var(--brand-green, #9be879);
    stroke: none;
  }

  .mobile-dm-dock:active {
    transform: translate3d(-50%, 1px, 0) scale(.985);
  }

  :lang(fr) .mobile-dm-dock {
    min-width: 210px;
    letter-spacing: .06em;
  }

  html.mrv-menu-open .mobile-dm-dock {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-50%, 18px, 0);
  }

  html.has-mobile-dm-dock footer {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 899px) and (orientation: landscape), (max-width: 1023px) and (pointer: coarse) and (orientation: landscape) {
  html.mobile-autopilot {
    --mobile-nav-height: 58px;
  }

  .mobile-route-stitch {
    top: calc(var(--mobile-nav-height) + 7px);
    bottom: max(7px, env(safe-area-inset-bottom));
  }

  .mobile-autopilot .exp-hero__intro {
    min-height: 100svh;
    padding-bottom: 14px;
  }

  .mobile-autopilot .founder-story--woven .founder-story__beat {
    min-height: max(410px, calc(100svh - var(--mobile-nav-height)));
    padding: 56px max(22px, env(safe-area-inset-left)) 34px;
  }

  .mobile-autopilot .about-story-page .founder-story--about .founder-story__beat {
    position: relative;
    top: auto;
    min-height: max(360px, 100svh);
  }

}

@media (max-width: 899px) and (prefers-reduced-motion: reduce), (max-width: 1023px) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .mobile-route-stitch {
    display: none;
  }

  .exp-home .founder-story--woven .founder-story__beat {
    position: relative;
    top: auto;
  }
}

/* 2026-07-27 · native-scroll phone campaign
   The browser retains full momentum. One ordinary gesture moves the same
   garment from the opening crop into the centre of a dark campaign frame. */
@media (max-width: 899px), (max-width: 1023px) and (pointer: coarse) {
  .exp-home #hero.mobile-hero-autonomous {
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .exp-home .mobile-hero-autonomous .exp-hero__sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: 100svh;
    overflow: hidden;
    perspective: 1200px;
  }

  .exp-home #hero.mobile-hero-autonomous.mobile-hero-scroll {
    height: auto;
    min-height: 170svh;
    overflow: hidden;
    overflow: clip;
  }

  .exp-home .mobile-hero-autonomous.mobile-hero-scroll .exp-hero__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 100svh;
  }

  .exp-home .mobile-hero-autonomous .exp-hero__intro {
    position: absolute;
    inset: 0;
    z-index: 4;
    min-height: 0;
    padding: calc(var(--mobile-nav-height) + 32px) 18px 18px;
    pointer-events: auto;
  }

  .exp-home .mobile-hero-autonomous .exp-hero__intro h1,
  :lang(fr) .mobile-hero-autonomous .exp-hero__intro h1 {
    width: 100%;
    max-width: 9.2ch;
    margin: 0;
    font-size: clamp(52px, 15vw, 70px);
    line-height: .82;
    letter-spacing: -.067em;
  }

  :lang(fr) .mobile-hero-autonomous .exp-hero__intro h1 {
    max-width: 10.5ch;
    font-size: clamp(45px, 12.6vw, 61px);
    line-height: .86;
  }

  .exp-home .mobile-hero-autonomous .exp-hero__garment {
    position: absolute;
    left: 74%;
    top: 44svh;
    z-index: 3;
    width: clamp(286px, 80vw, 360px);
    margin: 0;
    transform: translate(-50%, -50%);
    transform-origin: 50% 72%;
  }

  .exp-home .mobile-hero-autonomous .exp-hero__garment::after {
    filter: blur(8px);
  }

  .exp-home .mobile-hero-autonomous .exp-hero__garment img {
    animation: none !important;
  }

  .exp-home .mobile-hero-autonomous.is-mobile-hero-shifting .exp-hero__garment,
  .exp-home .mobile-hero-autonomous.is-mobile-hero-shifting .exp-hero__garment img,
  .exp-home .mobile-hero-autonomous.is-mobile-hero-shifting .exp-hero__material-panel,
  .exp-home .mobile-hero-autonomous.is-mobile-hero-shifting .exp-hero__wash {
    will-change: transform, opacity;
  }

  .exp-home .mobile-hero-autonomous.is-mobile-hero-shifting .exp-hero__garment::after {
    will-change: transform, opacity;
  }

  .exp-home .mobile-hero-autonomous .exp-hero__material-panel {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding:
      calc(var(--mobile-nav-height) + 22px)
      18px
      calc(102px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    color: var(--brand-paper, #f4f5f0);
    background: var(--brand-ink, #10120f);
    border-top: 0;
  }

  .exp-home .mobile-hero-autonomous .exp-hero__material {
    align-self: flex-end;
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .exp-home .mobile-hero-autonomous .exp-hero__material h2 {
    max-width: 9.2ch;
    margin: 0;
    color: var(--brand-paper, #f4f5f0);
    font-size: clamp(38px, 11.4vw, 52px);
    line-height: .9;
    letter-spacing: -.06em;
  }

  .exp-home .mobile-hero-autonomous .exp-hero__material > p:not(.exp-hero__kicker),
  .exp-home .mobile-hero-autonomous .exp-hero__material > a {
    display: none;
  }

  .exp-home .mobile-hero-autonomous .exp-hero__lede {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 165px;
    z-index: 5;
    max-width: 34ch;
    margin: 0;
    padding: 7px 0 0;
    font-size: clamp(13px, 3.45vw, 15px);
    line-height: 1.38;
    text-shadow: 0 1px 16px rgba(244, 246, 242, .98), 0 0 30px rgba(244, 246, 242, .92);
  }

  .exp-home .mobile-hero-autonomous .exp-hero__actions {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
  }
}

@media (max-width: 899px) and (orientation: landscape), (max-width: 1023px) and (pointer: coarse) and (orientation: landscape) {
  .exp-home #hero.mobile-hero-autonomous.mobile-hero-scroll {
    min-height: 156svh;
  }

  .exp-home .mobile-hero-autonomous .exp-hero__sticky {
    min-height: max(430px, 100svh);
  }

  .exp-home .mobile-hero-autonomous .exp-hero__intro {
    padding-top: calc(var(--mobile-nav-height) + 18px);
  }

  .exp-home .mobile-hero-autonomous .exp-hero__intro h1,
  :lang(fr) .mobile-hero-autonomous .exp-hero__intro h1 {
    max-width: 43vw;
    font-size: clamp(38px, 7.3vw, 58px);
  }

  .exp-home .mobile-hero-autonomous .exp-hero__garment {
    left: 61%;
    top: 52%;
    width: min(42vw, 300px);
  }

  .exp-home .mobile-hero-autonomous .exp-hero__material-panel {
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding:
      calc(var(--mobile-nav-height) + 18px)
      max(22px, env(safe-area-inset-right, 0px))
      calc(72px + env(safe-area-inset-bottom, 0px))
      62%;
  }

  .exp-home .mobile-hero-autonomous .exp-hero__material h2 {
    font-size: clamp(24px, 3.6vw, 34px);
  }

  .exp-home .mobile-hero-autonomous .exp-hero__lede > span:first-child {
    display: none;
  }

  .exp-home .mobile-hero-autonomous .exp-hero__lede {
    bottom: 145px;
  }

  .exp-home .mobile-hero-autonomous .exp-hero__lede,
  .exp-home .mobile-hero-autonomous .exp-hero__actions {
    right: auto;
    width: 43vw;
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce), (max-width: 1023px) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .mobile-dm-dock {
    transition: none;
  }

  .exp-home #hero.mobile-hero-autonomous {
    min-height: 100svh;
  }

  .exp-home .mobile-hero-autonomous .exp-hero__material-panel {
    display: none;
  }

  .exp-home .mobile-hero-autonomous .exp-hero__garment {
    left: 66%;
    transform: translate(-50%, -50%) scale(.94);
  }
}