/*
 * Mobile-only art direction for the homepage hero.
 * Keeps the desktop layout and the existing scroll-story intact.
 */
@media (max-width: 700px) {
  .site-header { min-height: var(--header-height); }
  .site-header .nav-contact { display: none !important; }
  .site-header .wordmark { gap: 9px; padding-inline: 14px; font-size: 15px; }
  .site-header .mark { width: 24px; height: 24px; font-size: 14px; }
  .site-header .nav-tools { margin-left: auto; }
  .site-header .theme-toggle, .site-header .menu-toggle { min-width: 46px; padding-inline: 10px; }

  /* Reduce the oversized empty band while preserving the scroll-led scene. */
  .hero { height: 140svh !important; }
  .hero-stage {
    height: max(660px, calc(100svh - var(--header-height))) !important;
    min-height: 0 !important;
  }
  .hero-main-layout {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(34px, 5.5svh, 54px) 22px 70px !important;
  }
  .hero-center {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .hero-center .kicker {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start !important;
    max-width: 100%;
    margin: 0 0 20px !important;
    font-size: clamp(8px, 2.15vw, 9px) !important;
    line-height: 1.65;
    letter-spacing: .095em !important;
  }
  .hero-center .kicker .live-dot { margin-top: .65em; }

  /* Use a clean, stable PROMIT wordmark on phones instead of a fragmented dissolve. */
  .hero-title-dissolve {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    font-size: 1rem !important;
    line-height: 1 !important;
  }
  .hero-title-dissolve .ascii-dissolve-output { display: none !important; }
  .hero-title-dissolve .hero-title-fallback {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ink) !important;
    font-size: clamp(58px, 15.5vw, 70px) !important;
    line-height: .92 !important;
    letter-spacing: -.075em !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    white-space: nowrap;
  }

  .hero-subtitle {
    max-width: 22ch !important;
    margin: 21px 0 0 !important;
    font-size: clamp(26px, 7.1vw, 31px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance;
  }
  .hero-subtitle em { white-space: normal; }
  .hero-lede {
    width: 100%;
    max-width: 38ch !important;
    margin: 16px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    text-align: left !important;
    text-wrap: pretty;
  }

  .hero-buttons {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 340px);
    justify-content: stretch !important;
    align-items: stretch;
    gap: 9px !important;
    margin-top: 23px !important;
  }
  .hero-buttons .button {
    display: flex !important;
    width: 100% !important;
    min-width: 0;
    min-height: 49px !important;
    padding: 0 15px !important;
    gap: 16px !important;
    font-size: 9px !important;
    letter-spacing: .075em;
    white-space: nowrap;
  }
  .hero-meta {
    display: flex;
    justify-content: flex-start !important;
    align-items: center;
    max-width: 330px !important;
    margin: 22px 0 0 !important;
    gap: 7px 10px !important;
    font-size: 8px !important;
    line-height: 1.7 !important;
    letter-spacing: .08em !important;
  }
  .hero-meta i { flex: 0 0 3px; }

  .hero-bottom {
    right: 22px !important;
    bottom: 12px !important;
    left: 22px !important;
    align-items: center !important;
    gap: 12px;
    font-size: 7px !important;
    line-height: 1.55;
  }
  .hero-bottom span:first-child { max-width: 150px !important; }
  .hero-bottom a { flex: 0 0 auto; gap: 7px !important; white-space: nowrap; }
  .hero-bottom .scroll-arrow { width: 22px; height: 22px; }

  /* Recede the portrait so it adds atmosphere without fighting the text. */
  .hero-ascii-wrap {
    top: auto !important;
    right: -17% !important;
    bottom: 24px !important;
    left: auto !important;
    width: 96% !important;
    height: 38% !important;
    margin: 0 !important;
    opacity: .16 !important;
    transform: none !important;
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 22%, #000 66%, #000 100%) !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 22%, #000 66%, #000 100%) !important;
  }
  .hero-ascii-wrap .hero-ascii-art { font-size: 3px !important; opacity: .24 !important; transform: none !important; }
  .hero-ascii-particles {
    opacity: .18 !important;
    transform: none !important;
    mask-image: linear-gradient(180deg, transparent 0%, transparent 28%, rgba(0,0,0,.45) 55%, #000 100%) !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 28%, rgba(0,0,0,.45) 55%, #000 100%) !important;
  }
  .hero-grid-lines {
    opacity: .10 !important;
    background-size: 48px 48px !important;
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%) !important;
  }
  .hero-coordinate { display: none !important; }
  /* The first-screen heading is the mobile LCP candidate: paint it immediately instead of
     waiting for JavaScript to start the scroll-reveal observer. */
  .js-ready .hero-center[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

}

@media (max-width: 420px) {
  .hero-main-layout { padding-right: 18px !important; padding-left: 18px !important; }
  .hero-subtitle { max-width: 20ch !important; font-size: clamp(25px, 7.2vw, 29px) !important; }
  .hero-lede { max-width: 35ch !important; font-size: 14.5px !important; }
  .hero-buttons { width: 100%; }
  .hero-meta { max-width: 300px !important; }
  .hero-bottom { right: 18px !important; left: 18px !important; }
  .hero-bottom span:first-child { max-width: 128px !important; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
  html:not([data-motion-mode="full"]) .hero{ height: auto !important; }
  html:not([data-motion-mode="full"]) .hero-stage{ position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; }
  html:not([data-motion-mode="full"]) .hero-main-layout{ height: auto !important; }
  html:not([data-motion-mode="full"]) .hero-ascii-wrap, html:not([data-motion-mode="full"]) .hero-ascii-particles{ display: none !important; }
}