/* LULYGraphics — mobile-first experience layer, October 2026.
   Loaded AFTER the existing visual system. Desktop layout is unchanged.
   Intent: editorial mobile hero, swipeable work, usable forms & navigation. */

@media (max-width: 767.98px) {
  html { scroll-padding-top: 86px; }
  body { min-width: 0; }
  .container { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  main, section, article, .row, [class*="-grid"] { min-width: 0; }
  img, video, canvas, svg { max-width: 100%; }
  h1, h2, h3, p { overflow-wrap: break-word; }
  h1 { text-wrap: balance; }
  h2 { text-wrap: pretty; }
  .btn, button, select, input, textarea { touch-action: manipulation; }
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid #ff913f; outline-offset: 3px;
  }
  input, select, textarea { font-size: 16px !important; }
  .luly-section { padding-block: clamp(50px, 12vw, 82px); }
  .luly-section h2, .section-heading h2 { font-size: clamp(1.85rem, 7.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.045em; }
  .luly-section-lead { font-size: .94rem; line-height: 1.7; }

  /* Mobile navigation is a compact sheet, not a squeezed desktop row. */
  nav.luly-navbar { padding: 10px 0 !important; min-height: 69px; background: rgba(7,7,9,.96) !important;
    border-bottom: 1px solid rgba(255,136,41,.15); }
  nav.luly-navbar > .container { position: relative; display: flex; align-items: center; justify-content: space-between; }
  nav.luly-navbar .navbar-brand { min-width: 0; font-size: 1.03rem; letter-spacing: -.025em; }
  nav.luly-navbar .brand-logo { width: 38px; height: 38px; object-fit: contain; }
  nav.luly-navbar .navbar-toggler { width: 46px; height: 44px; display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.19); border-radius: 14px; background: rgba(255,255,255,.045); box-shadow: none; }
  nav.luly-navbar .navbar-toggler[aria-expanded="true"] { background: rgba(255,116,23,.13); border-color: rgba(255,116,23,.45); }
  nav.luly-navbar .navbar-collapse { position: absolute; top: calc(100% + 9px); left: 12px; right: 12px; z-index: 1010;
    padding: 16px; border: 1px solid rgba(255,130,39,.25); border-radius: 20px;
    background: #101012; box-shadow: 0 26px 90px rgba(0,0,0,.72); max-height: calc(100dvh - 94px); overflow-y: auto; }
  nav.luly-navbar .navbar-nav { gap: 5px; margin-bottom: 14px; }
  nav.luly-navbar .navbar-nav .nav-link { padding: 12px 14px !important; border-radius: 11px; font-weight: 650; }
  nav.luly-navbar .navbar-nav .nav-link.active { background: rgba(255,106,0,.12); }
  nav.luly-navbar .navbar-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 9px !important; }
  nav.luly-navbar .navbar-actions .btn { display:flex; align-items: center; justify-content: center; margin:0; min-width:0; min-height:46px; padding:11px 9px; white-space:normal; text-align:center; }

  /* A footer with readable columns and touch-sized social links. */
  .luly-footer .luly-footer-shell { padding-top: 36px !important; padding-bottom: 34px !important; }
  .luly-footer .footer-social-buttons { display: flex; flex-wrap: wrap; gap: 9px; }
  .luly-footer .footer-email-entry a { overflow-wrap: anywhere; }
  .luly-footer .luly-social-pill { min-height: 44px; }
  .luly-footer .footer-bottom { align-items: flex-start; font-size: .77rem; line-height: 1.6; }

  /* Orders: compact, vertical timeline. Inputs stay 16px to prevent iOS focus zoom. */
  body.order-page .order-intro { max-width: 580px; }
  body.order-page .order-intro h1 { font-size: clamp(2rem,8.5vw,3.1rem); line-height:1.11; }
  body.order-page .order-journey-shell { display:grid; grid-template-columns:1fr !important; gap:4px;
    padding:19px !important; border-radius:22px !important; }
  body.order-page .order-journey-step { display:grid; grid-template-columns:44px minmax(0,1fr); text-align:left;
    align-items:center; gap:14px; padding:11px 0 !important; }
  body.order-page .journey-node { width:44px; height:44px; margin:0 !important; border-radius:13px; box-shadow:none; }
  body.order-page .order-journey-step > div { min-width:0; }
  body.order-page .order-journey-step p { max-width:none !important; margin:3px 0 0; font-size:.76rem !important; }
  body.order-page .order-design-type-stage { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:11px !important; min-height:0 !important; }
  body.order-page .design-type-card, body.order-page .design-type-card-custom { min-width:0; min-height:140px; padding:18px 13px !important; grid-column:auto !important; grid-row:auto !important; }
  body.order-page .design-type-card strong { font-size:clamp(.85rem,3.8vw,1.05rem); line-height:1.25; }
  body.order-page .design-type-card small { line-height:1.4; }
  body.order-page .order-form-section .container { max-width:100%; }
  body.order-page .form-grid-2, body.order-page .luly-field-grid,
  body.luly-profile-page .luly-field-grid.three { display:grid; grid-template-columns:1fr !important; }
  body.order-page .order-form-actions, body.order-page .order-submit-actions { flex-wrap:wrap; gap:10px; }
  body.order-page .order-submit-actions .btn, body.order-page .order-form-actions button[type=submit] { min-height:48px; }

  /* Portfolio: retain the gallery, but prioritize visibility and useful filters. */
  body.luly-portfolio-page .portfolio-hero h1 { font-size:clamp(2rem,9vw,3.4rem); line-height:1.08; }
  body.luly-portfolio-page #luly-vault .vault-toolbar { padding:13px !important; border-radius:18px; }
  body.luly-portfolio-page #luly-vault .vault-toolbar-row,
  body.luly-portfolio-page #luly-vault .vault-filter-groups { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
  body.luly-portfolio-page #luly-vault .vault-filter-group { display:flex; flex-direction:column; align-items:flex-start; width:100%; }
  body.luly-portfolio-page #luly-vault .vault-filters { display:flex; flex-wrap:wrap !important; gap:7px; }
  body.luly-portfolio-page #luly-vault .vault-filters button { min-height:40px; }
  body.luly-portfolio-page #luly-vault .vault-grid { columns: 2 140px; column-gap:10px; }
  body.luly-portfolio-page #luly-vault .vault-item { break-inside:avoid; margin-bottom:10px; }
  body.luly-portfolio-page .portfolio-typing-actions { display:flex; flex-wrap:wrap; gap:10px; }
  body.luly-portfolio-page .portfolio-typing-actions .btn { min-height:46px; }

  /* Contact: one clear column, with details ahead of the form. */
  body.contact-page .contact-v14-grid { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:35px !important; }
  body.contact-page .contact-v14-copy, body.contact-page .contact-v14-form-card { width:100%; min-width:0; }
  body.contact-page .contact-v14-copy h1 { font-size:clamp(2.2rem,10vw,3.45rem); line-height:1.07; }
  body.contact-page .contact-v14-form-card { padding:0 !important; }
  body.contact-page .contact-v14 .container-contact100-form-btn button { width:100%; min-height:50px; }
  body.contact-page .contact-v14-bottom-card { display:grid; grid-template-columns:1fr; gap:24px; padding:24px 20px; }
  body.contact-page .contact-v14-bottom-actions { display:flex; flex-direction:column; gap:10px; }
  body.contact-page .contact-v14-bottom-actions .btn { width:100%; min-height:46px; }
  body.contact-page .contact-v14-help-grid { display:grid; grid-template-columns:1fr !important; gap:12px; }

  /* Checkout/profile: scroll vertically instead of clipping payment details. */
  body.checkout-page .luly-checkout-grid { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:18px; }
  body.checkout-page .luly-payment-page-shell { width:100%; min-width:0; padding-inline: 0; }
  body.checkout-page .luly-checkout-card { min-width:0; padding:clamp(18px,5vw,24px); }
  body.checkout-page .luly-payment-options { display:grid; grid-template-columns:1fr !important; }
  body.checkout-page .luly-checkout-panel-head { flex-wrap:wrap; gap:12px; }
  body.luly-profile-page .profile-shell { display:grid !important; grid-template-columns:minmax(0,1fr) !important; min-width:0; }
  body.luly-profile-page .simple-profile-menu { display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding-bottom:7px; }
  body.luly-profile-page .simple-profile-menu > * { flex:0 0 auto; }
  body.luly-profile-page .profile-content { min-width:0; }
  body.luly-profile-page .profile-quick-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }

  /* Client delivery: artwork remains full-width, CTAs take priority after it. */
  body.delivery-page .delivery-featured { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:19px; }
  body.delivery-page .delivery-hero { width:100%; padding-inline:0; }
  body.delivery-page .delivery-hero h1 { font-size:clamp(2.1rem,10vw,3.7rem); line-height:1.06; }
  body.delivery-page .delivery-set-inner { padding:16px !important; }
  body.delivery-page .delivery-set-head { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
  body.delivery-page .delivery-file-spec { white-space:normal; }
  body.delivery-page .delivery-main-frame { width:100%; aspect-ratio:16/9; border-radius:13px; }
  body.delivery-page .delivery-actions { padding:0; }
  body.delivery-page .delivery-btn { min-height:48px; }
  body.delivery-page .delivery-lightbox-card { max-width:calc(100vw - 20px); max-height:calc(100dvh - 32px); overflow:auto; }
  body.delivery-page .delivery-lightbox-bar, body.delivery-page .delivery-lightbox-actions { display:flex; flex-wrap:wrap; gap:9px; }
  body.nugato-delivery-page .nugato-delivery-outro { margin-top:44px; padding:25px 18px; }

  /* Generic overflow guards for tables in admin and order detail pages. */
  body.luly-ops-page .table-responsive, body.luly-ops-page table,
  body.luly-profile-page .table-responsive { max-width:100%; }
  body.luly-ops-page .table-responsive { overflow-x:auto; }
}

/* Redesigned HOME: mobile text first, artwork as a horizontally swipeable gallery.
   On small screens this replaces rather than scales the desktop 3D orbit. */
@media (max-width: 860px) {
  body.luly-home-page .luly-orbit-hero { height:auto !important; min-height:0 !important; overflow:hidden; }
  body.luly-home-page .luly-orbit-sticky { position:relative !important; height:auto !important; min-height:0 !important;
    display:block !important; padding:111px 0 65px !important; overflow:visible !important; }
  body.luly-home-page .luly-orbit-layout { display:flex !important; flex-direction:column; gap:36px;
    width:100%; min-width:0; }
  body.luly-home-page .luly-orbit-copy { max-width:600px; width:100%; text-align:left !important; margin:0; opacity:1 !important;
    transform:none !important; }
  body.luly-home-page .luly-orbit-copy .eyebrow { font-size:.65rem; letter-spacing:.11em; }
  body.luly-home-page .luly-orbit-title { max-width:13ch; font-size:clamp(2.85rem,11.25vw,5rem) !important;
    line-height:.99 !important; letter-spacing:-.065em; margin:18px 0 18px; text-wrap:balance; }
  body.luly-home-page .luly-orbit-sub { max-width:36rem; margin:0; line-height:1.68; font-size:clamp(.96rem,3.25vw,1.08rem); }
  body.luly-home-page .luly-orbit-copy .hero-actions { display:flex; justify-content:flex-start !important;
    align-items:stretch; flex-wrap:wrap; gap:10px; margin-top:25px; }
  body.luly-home-page .luly-orbit-copy .hero-actions .btn { display:inline-flex; align-items:center; justify-content:center;
    min-height:50px; padding:12px 17px; font-size:.88rem; flex:1 1 145px; max-width:225px; white-space:normal; }
  body.luly-home-page .luly-orbit-vignette { background:linear-gradient(180deg,transparent,rgba(5,5,7,.35)); }
  body.luly-home-page .luly-orbit-noise, body.luly-home-page .luly-orbit-canvas,
  body.luly-home-page .luly-orbit-core, body.luly-home-page .luly-orbit-halo,
  body.luly-home-page .luly-orbit-progress, body.luly-home-page .luly-orbit-caption { display:none !important; }
  body.luly-home-page .luly-orbit-stage-wrap { position:relative; width:calc(100% + 36px) !important;
    max-width:none !important; height:auto !important; min-height:0 !important; margin:0 -18px !important;
    perspective:none !important; }
  body.luly-home-page .luly-orbit-stage-wrap::before { content:"Featured work  ·  Swipe to explore →";
    display:block; padding:0 18px 14px; color:#ffad67; font-size:.69rem; font-weight:750; text-transform:uppercase; letter-spacing:.12em; }
  body.luly-home-page .luly-orbit-stage { position:relative !important; inset:auto !important; display:flex !important;
    align-items:stretch; gap:13px; width:100%; padding:4px 18px 22px; overflow-x:auto;
    overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding:18px;
    overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    transform:none !important; transition:none !important; transform-style:flat !important; scrollbar-width:thin; }
  body.luly-home-page .luly-orbit-card, body.luly-home-page.luly-home-poster-mode .luly-orbit-card.hero-poster-card,
  body.luly-home-page.luly-home-poster-mode .luly-orbit-card.hero-poster-card.media-portrait,
  body.luly-home-page.luly-home-poster-mode .luly-orbit-card.hero-poster-card[data-card="featured"] {
    position:relative !important; top:auto !important; left:auto !important;
    flex:0 0 clamp(180px,59vw,265px); width:clamp(180px,59vw,265px) !important;
    --card-width:clamp(180px,59vw,265px) !important; aspect-ratio:2/3 !important;
    height:auto !important; margin:0 !important; scroll-snap-align:start;
    transform:none !important; opacity:1 !important; border-radius:18px !important;
    will-change:auto !important; overflow:hidden; }
  body.luly-home-page .luly-orbit-card-inner { inset:1px; transform:none !important; border-radius:17px !important; }
  body.luly-home-page .luly-orbit-card::before, body.luly-home-page .luly-orbit-card::after { display:none; }
  body.luly-home-page .luly-orbit-card img { object-fit:cover; transition:none !important; }
  body.luly-home-page .luly-orbit-card:hover { transform:none !important; }
  body.luly-home-page .luly-orbit-card .card-meta { opacity:1; }
  body.luly-home-page .luly-orbit-card .card-glare { display:none; }
  body.luly-home-page .luly-orbit-title .impact { animation:none !important; }
  body.luly-home-page .luly-orbit-hero.is-ready .luly-orbit-card { animation:none !important; }
  body.luly-home-page .luly-orbit-hero.is-ready .luly-orbit-copy { animation:none !important; }
  body.luly-home-page .luly-orbit-scrollcue { display:none !important; }

  /* The desktop overlapping collage becomes a horizontally navigable strip. */
  body.luly-home-page .thumbnail-deck { position:relative !important; display:flex !important;
    align-items:stretch; gap:12px; width:calc(100% + 18px); min-height:0 !important; height:auto !important;
    overflow-x:auto !important; overflow-y:hidden; scroll-snap-type:x mandatory; padding:8px 18px 18px 0; }
  body.luly-home-page .thumbnail-deck > a { display:block !important; position:relative !important;
    inset:auto !important; transform:none !important; margin:0 !important; flex:0 0 clamp(190px,66vw,310px);
    width:clamp(190px,66vw,310px) !important; height:auto !important;
    aspect-ratio:16/11; scroll-snap-align:start; border-radius:15px; overflow:hidden; }
  body.luly-home-page .thumbnail-deck > a.deck-poster { aspect-ratio:2/3; flex-basis:clamp(140px,45vw,215px); }
  body.luly-home-page .thumbnail-deck > a img { width:100% !important; height:100% !important; object-fit:cover; }
  body.luly-home-page .thumbnail-deck .deck-core, body.luly-home-page .thumbnail-deck .deck-extra { display:none !important; }
  body.luly-home-page .luly-keyword-strip h2 { font-size:clamp(1.8rem,10vw,3.4rem); }
  body.luly-home-page .stack-points { display:flex; flex-wrap:wrap; gap:8px; }
  body.luly-home-page .luly-transform-lab .transform-machine { overflow:visible; }
}

@media (max-width: 380px) {
  nav.luly-navbar .navbar-brand { font-size:.94rem; }
  nav.luly-navbar .brand-logo { width:34px; height:34px; }
  body.luly-home-page .luly-orbit-title { font-size:clamp(2.35rem,11.2vw,2.85rem) !important; }
  body.luly-home-page .luly-orbit-copy .hero-actions .btn { flex:1 1 100%; max-width:none; }
  body.order-page .order-design-type-stage { grid-template-columns:1fr !important; }
  body.luly-portfolio-page #luly-vault .vault-grid { columns:2 128px; }
}

/* User preference and slow renderers must not hide content behind animation states. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto !important; }
  .reveal-on-scroll, .aos-init { opacity:1 !important; transform:none !important; }
  .luly-orbit-canvas { display:none !important; }
  .luly-orbit-core, .luly-orbit-card, .luly-orbit-stage,
  .luly-orbit-halo::before, .luly-orbit-halo::after,
  .design-system-orbit, .design-beam, .contact-v14-orbit {
    animation:none !important; transition:none !important;
  }
}
html.luly-performance-lite .luly-orbit-canvas,
html.luly-performance-lite .luly-orbit-noise { display:none !important; }
html.luly-performance-lite .luly-orbit-halo::before,
html.luly-performance-lite .luly-orbit-halo::after,
html.luly-performance-lite .luly-orbit-core::before { animation:none !important; }

@media (max-width: 767.98px) {
  /* Account entry is its own mobile landing screen, not a desktop two-column split. */
  body.luly-login-page .login-shell { display:flex !important; flex-direction:column; min-height:100dvh; }
  body.luly-login-page .login-brand-panel, body.luly-login-page .login-card-section {
    width:100%; min-height:0; padding-inline:18px !important;
  }
  body.luly-login-page .login-brand-panel { padding-block:65px 24px !important; }
  body.luly-login-page .login-brand-copy h1 { font-size:clamp(2.05rem,8vw,3.4rem); line-height:1.1; }
  body.luly-login-page .login-brand-copy p { font-size:.9rem; line-height:1.65; }
  body.luly-login-page .login-tags { display:flex; flex-wrap:wrap; gap:7px; }
  body.luly-login-page .login-card-section { padding-block:12px 48px !important; }
  body.luly-login-page .login-card { max-width:520px; width:100%; padding:clamp(20px,5vw,28px) !important;
    margin-inline:auto; border-radius:20px; }
  body.luly-login-page .portal-tabs, body.luly-login-page .role-checker-row { display:flex; flex-wrap:wrap; gap:7px; }
  body.luly-login-page .portal-tab, body.luly-login-page .role-checker { flex:1 1 auto; min-height:44px; }
  body.luly-login-page .compact-auth-grid { grid-template-columns:1fr !important; }
  body.luly-login-page .login-form .btn, body.luly-login-page .signup-form .btn { min-height:48px; }

  body.invoice-page .luly-payment-page-shell { width:calc(100% - 36px); }
  body.invoice-page .luly-payment-page-top, body.checkout-page .luly-payment-page-top {
    flex-direction:column; gap:16px; }
}

/* ============================================================
   Mobile QA corrections — desktop animation/layout unaffected.
   ============================================================ */
@media (max-width: 767.98px) {
  /* The 3D gallery owns the entire touch gesture when touched. Otherwise,
     a slight diagonal movement can be intercepted as page scrolling. */
  body.luly-portfolio-page .clean-image-spin .spin-gallery-orbit,
  body.luly-portfolio-page .clean-image-spin .spin-ring,
  body.luly-portfolio-page .clean-image-spin .spin-card,
  body.luly-portfolio-page .clean-image-spin .spin-card img {
    touch-action: none !important;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Match left edges of Format and Category. The original desktop rule
     adds a margin to every following group. */
  body.luly-portfolio-page #luly-vault .vault-filter-groups {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 15px !important;
    width: 100%;
  }
  body.luly-portfolio-page #luly-vault .vault-filter-group,
  body.luly-portfolio-page #luly-vault .vault-filter-group + .vault-filter-group {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 7px !important;
  }
  body.luly-portfolio-page #luly-vault .vault-filter-label {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  body.luly-portfolio-page #luly-vault .vault-filter-group .vault-filters {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    gap: 7px !important;
  }

  /* CSS columns + lazy images were changing column height as artwork loaded,
     moving the archive while scrolling. A stable 2-col phone grid prevents
     redistribution between columns and the 'missing top right' lazy item. */
  body.luly-portfolio-page #luly-vault .vault-grid {
    display: grid !important;
    columns: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    align-items: start;
    column-gap: 10px !important;
    row-gap: 10px !important;
  }
  body.luly-portfolio-page #luly-vault .vault-item,
  body.luly-portfolio-page #luly-vault .vault-card--standard,
  body.luly-portfolio-page #luly-vault .vault-card--wide,
  body.luly-portfolio-page #luly-vault .vault-card--portrait {
    grid-column: auto !important;
    grid-row: auto !important;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    min-height: 0;
    contain: paint;
  }
  body.luly-portfolio-page #luly-vault .vault-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: contain;
    background: #100c0a;
  }
  body.luly-portfolio-page #luly-vault .vault-card--wide img { aspect-ratio: 16 / 9; }
  body.luly-portfolio-page #luly-vault .vault-card--standard img { aspect-ratio: 4 / 3; }
  body.luly-portfolio-page #luly-vault .vault-item.is-entering,
  body.luly-portfolio-page #luly-vault .vault-item.is-entered,
  body.luly-portfolio-page #luly-vault .vault-item.is-filtering {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Distinct second showcase: editorial mosaic, NOT another slider. */
  body.luly-home-page #visual-stack .thumbnail-deck {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 0 12px !important;
    scroll-snap-type: none !important;
  }
  body.luly-home-page #visual-stack .thumbnail-deck > a,
  body.luly-home-page #visual-stack .thumbnail-deck > a.deck-poster,
  body.luly-home-page #visual-stack .thumbnail-deck > a.deck-card {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: block !important;
    grid-column: auto;
    width: 100% !important;
    height: auto !important;
    min-width: 0;
    margin: 0 !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.25);
  }
  body.luly-home-page #visual-stack .thumbnail-deck > a.deck-poster { aspect-ratio: 2 / 3; }
  body.luly-home-page #visual-stack .thumbnail-deck > a.deck-card { aspect-ratio: 4 / 3; }
  body.luly-home-page #visual-stack .thumbnail-deck > a.deck-card-1 {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }
  body.luly-home-page #visual-stack .thumbnail-deck > a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  body.luly-home-page #visual-stack .thumbnail-deck::before,
  body.luly-home-page #visual-stack .thumbnail-deck::after { display: none !important; }

  /* Mobile design ladder: the actual LULYGraphics token travels between all
     five steps. Positions are measured once on layout changes by the small
     companion mobile JS; animation frames themselves run entirely in CSS. */
  body.luly-home-page .luly-design-ladder .cube-stage {
    min-height: 0 !important;
    padding: 23px 13px 25px !important;
    border-radius: 22px;
    perspective: none;
    isolation: isolate;
  }
  body.luly-home-page .luly-design-ladder .step-stack {
    position: relative;
    inset: auto;
    display: grid;
    gap: 13px;
    padding-left: 56px;
  }
  /* Fixed guide and animated orange progress line behind the travelling logo */
  body.luly-home-page .luly-design-ladder .step-stack::before,
  body.luly-home-page .luly-design-ladder .step-stack::after {
    content: '';
    position: absolute;
    left: 23px;
    top: 32px;
    bottom: 32px;
    width: 2px;
    border-radius: 4px;
    pointer-events: none;
  }
  body.luly-home-page .luly-design-ladder .step-stack::before {
    background: rgba(255,138,49,.20);
    box-shadow: 0 0 10px rgba(255,120,34,.06);
  }
  body.luly-home-page .luly-design-ladder .step-stack::after {
    background: linear-gradient(#ffb06b, #ff6a00);
    box-shadow: 0 0 10px rgba(255,117,27,.50);
    transform-origin: center top;
    transform: scaleY(0);
    animation: lulyMobilePathProgress 12s linear infinite;
  }
  body.luly-home-page .luly-design-ladder .ladder-step {
    width: 100% !important;
    min-height: 76px;
    padding: 13px 10px !important;
    border-radius: 15px;
    position: relative;
    transform: none !important;
    animation: lulyMobileCardPulse 12s linear infinite;
  }
  body.luly-home-page .luly-design-ladder .step-1 { animation-delay: 0s; }
  body.luly-home-page .luly-design-ladder .step-2 { animation-delay: -9.6s; }
  body.luly-home-page .luly-design-ladder .step-3 { animation-delay: -7.2s; }
  body.luly-home-page .luly-design-ladder .step-4 { animation-delay: -4.8s; }
  body.luly-home-page .luly-design-ladder .step-5 { animation-delay: -2.4s; }
  body.luly-home-page .luly-design-ladder .ladder-step span {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }
  body.luly-home-page .luly-design-ladder .ladder-step strong { font-size: .91rem; }
  body.luly-home-page .luly-design-ladder .ladder-step em { font-size: .7rem; line-height: 1.35; }
  body.luly-home-page .luly-design-ladder .glow-logo-token {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 45px;
    height: 45px;
    margin: 0 !important;
    z-index: 8;
    opacity: 0;
    visibility: hidden;
    animation: none;
    will-change: transform, opacity;
    pointer-events: none;
  }
  body.luly-home-page .luly-design-ladder .glow-logo-token > img {
    border-radius: 13px;
  }
  body.luly-home-page .luly-design-ladder .cube-stage.luly-mobile-path-ready .glow-logo-token {
    visibility: visible;
    animation: lulyMobileLogoJourney 12s linear infinite;
  }
}

/* 12s journey; identical timeline for the token, line and card highlights.
   Hold at each step, move to the next, fade out after delivery, then reset. */
@keyframes lulyMobileLogoJourney {
  0% { transform: translate3d(var(--luly-path-x), var(--luly-path-y1), 0) rotate(-7deg) scale(.90); opacity: 0; }
  4%, 12% { transform: translate3d(var(--luly-path-x), var(--luly-path-y1), 0) rotate(-4deg) scale(1); opacity: 1; }
  24%, 29% { transform: translate3d(var(--luly-path-x), var(--luly-path-y2), 0) rotate(4deg) scale(1); opacity: 1; }
  40%, 45% { transform: translate3d(var(--luly-path-x), var(--luly-path-y3), 0) rotate(-4deg) scale(1); opacity: 1; }
  56%, 61% { transform: translate3d(var(--luly-path-x), var(--luly-path-y4), 0) rotate(4deg) scale(1); opacity: 1; }
  73%, 91% { transform: translate3d(var(--luly-path-x), var(--luly-path-y5), 0) rotate(-4deg) scale(1); opacity: 1; }
  96% { transform: translate3d(var(--luly-path-x), var(--luly-path-y5), 0) rotate(-4deg) scale(.88); opacity: 0; }
  100% { transform: translate3d(var(--luly-path-x), var(--luly-path-y1), 0) rotate(-7deg) scale(.88); opacity: 0; }
}
@keyframes lulyMobileCardPulse {
  0%, 15% { border-color: rgba(255,150,70,.75); background: rgba(255,119,30,.13); box-shadow: 0 0 22px rgba(255,109,24,.12); }
  20%, 96% { border-color: rgba(255,154,56,.23); background: rgba(255,255,255,.035); box-shadow: none; }
  100% { border-color: rgba(255,150,70,.75); background: rgba(255,119,30,.13); box-shadow: 0 0 22px rgba(255,109,24,.12); }
}
@keyframes lulyMobilePathProgress {
  0%, 12% { transform: scaleY(0); opacity: 1; }
  73%, 92% { transform: scaleY(1); opacity: 1; }
  97%, 100% { transform: scaleY(1); opacity: 0; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  body.luly-home-page .luly-design-ladder .step-stack::after,
  body.luly-home-page .luly-design-ladder .ladder-step,
  body.luly-home-page .luly-design-ladder .cube-stage.luly-mobile-path-ready .glow-logo-token {
    animation: none !important;
  }
  body.luly-home-page .luly-design-ladder .cube-stage.luly-mobile-path-ready .glow-logo-token {
    opacity: 1 !important;
    transform: translate3d(var(--luly-path-x), var(--luly-path-y1), 0) !important;
  }
  body.luly-home-page .luly-design-ladder .step-1 {
    border-color: rgba(255,150,70,.75);
    background: rgba(255,119,30,.13);
  }
}

@media (max-width: 767.98px) {
  /* Bootstrap negative gutter in Before/After exceeded the phone viewport. */
  body.luly-portfolio-page .luly-before-after .row { margin-inline: 0 !important; }
  body.luly-portfolio-page { overflow-x: clip; }
}


/* ----------------------------------------------------------
   v3: Mobile-only QA patch. Original desktop Orbit JS restored.
   Home: short typographic hero, then an actual swipeable poster gallery.
   Portfolio: no clipped filter outline, stable artwork ratios and typing.
   ---------------------------------------------------------- */
@media (max-width: 860px) {
  /* The mobile hero is intentionally text-only; the posters now live in
     the following Made to stand out section. Never hide the desktop orbit. */
  body.luly-home-page .luly-orbit-hero {
    height: auto !important;
    min-height: 0 !important;
  }
  body.luly-home-page .luly-orbit-sticky {
    padding: 116px 0 28px !important;
  }
  body.luly-home-page .luly-orbit-layout { gap: 0 !important; }
  body.luly-home-page .luly-orbit-stage-wrap { display: none !important; }
  body.luly-home-page #visual-stack {
    padding-top: 29px !important;
  }
  body.luly-home-page #visual-stack .row { row-gap: 23px !important; }
  body.luly-home-page #visual-stack .thumbnail-deck {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: calc(100% + 18px) !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 -18px 0 0 !important;
    padding: 8px 18px 18px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    grid-template-columns: none !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 0 18px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scrollbar-width: thin;
  }
  body.luly-home-page #visual-stack .thumbnail-deck > a.deck-card,
  body.luly-home-page #visual-stack .thumbnail-deck > a.deck-extra-3 {
    display: none !important;
  }
  body.luly-home-page #visual-stack .thumbnail-deck > a.deck-poster,
  body.luly-home-page #visual-stack .thumbnail-deck > a.deck-extra:not(.deck-extra-3) {
    position: relative !important;
    display: block !important;
    inset: auto !important;
    flex: 0 0 clamp(185px, 57vw, 245px) !important;
    width: clamp(185px, 57vw, 245px) !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    margin: 0 !important;
    transform: none !important;
    scroll-snap-align: start;
    border: 1px solid rgba(255,132,42,.19) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  body.luly-home-page #visual-stack .thumbnail-deck > a.deck-poster img,
  body.luly-home-page #visual-stack .thumbnail-deck > a.deck-extra:not(.deck-extra-3) img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    transform: none !important;
  }
  body.luly-home-page #visual-stack .thumbnail-deck > a.deck-extra-1,
  body.luly-home-page #visual-stack .thumbnail-deck > a.deck-extra-2 {
    box-shadow: 0 12px 28px rgba(0,0,0,.25) !important;
  }
}

@media (max-width: 767.98px) {
  /* A top border of the active chip was clipped by an overflow-x:auto
     filter row: show wrapping filters and give the outline room. */
  body.luly-portfolio-page #luly-vault .vault-toolbar,
  body.luly-portfolio-page #luly-vault .vault-filter-groups,
  body.luly-portfolio-page #luly-vault .vault-filter-group,
  body.luly-portfolio-page #luly-vault .vault-filters {
    overflow: visible !important;
  }
  body.luly-portfolio-page #luly-vault .vault-filters {
    flex-wrap: wrap !important;
    padding: 4px 0 !important;
    gap: 8px !important;
  }
  body.luly-portfolio-page #luly-vault .vault-filters button,
  body.luly-portfolio-page #luly-vault .vault-filters button.active {
    position: relative;
    transform: none !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* A fixed ratio per artwork format reserves the correct height before
     a lazy image loads. Cover prevents letterboxing and black strips. */
  body.luly-portfolio-page #luly-vault .vault-grid {
    grid-auto-flow: row !important;
    align-items: start !important;
    align-content: start !important;
  }
  body.luly-portfolio-page #luly-vault .vault-item {
    height: auto !important;
    overflow: hidden !important;
    contain: layout paint;
  }
  body.luly-portfolio-page #luly-vault .vault-item img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    background: transparent !important;
    border: 0 !important;
  }
  body.luly-portfolio-page #luly-vault .vault-card--portrait img {
    aspect-ratio: 2 / 3 !important;
  }
  body.luly-portfolio-page #luly-vault .vault-card--wide img,
  body.luly-portfolio-page #luly-vault .vault-card--standard img {
    aspect-ratio: 16 / 9 !important;
  }

  /* The rotating Work across: label must not change document height.
     This prevents scroll anchoring from nudging Full Archive every cycle. */
  body.luly-portfolio-page .portfolio-live-words {
    display: block !important;
    height: 3.5rem !important;
    min-height: 3.5rem !important;
    max-height: 3.5rem !important;
    line-height: 1.4 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  body.luly-portfolio-page .portfolio-live-words #typed {
    display: block !important;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Align the label even if other global .btn rules impose odd line-height. */
  body.luly-portfolio-page .portfolio-typing-actions > .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 1.15 !important;
    min-height: 48px !important;
    padding: 12px 21px !important;
    box-sizing: border-box !important;
  }
}

/* ==============================================================
   Mobile QA v4. Four original desktop orbit posters lead the swipe
   rail; they remain absent from the desktop Made-to-stand-out deck.
   ============================================================= */
body.luly-home-page #visual-stack .thumbnail-deck > a.deck-hero-original {
  display: none !important;
}
@media (max-width: 860px) {
  body.luly-home-page #visual-stack .thumbnail-deck > a.deck-hero-original {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    flex: 0 0 clamp(185px, 57vw, 245px) !important;
    width: clamp(185px, 57vw, 245px) !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    transform: none !important;
    margin: 0 !important;
    scroll-snap-align: start;
    border: 1px solid rgba(255,132,42,.19) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  body.luly-home-page #visual-stack .thumbnail-deck > a.deck-hero-original img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    transform: none !important;
    display: block;
  }
}

/* Restore meaningful card positions even if a browser blocks the
   orbit script/canvas: on desktop no four-card stack under the logo. */
@media (min-width: 861px) {
  body.luly-home-page .luly-orbit-stage > a.luly-orbit-card:nth-of-type(1) {
    --card-x: -205px; --card-y: -160px; --card-z: -68px; --card-rz: -7deg;
  }
  body.luly-home-page .luly-orbit-stage > a.luly-orbit-card:nth-of-type(2) {
    --card-x: 205px; --card-y: -152px; --card-z: -24px; --card-rz: 7deg;
  }
  body.luly-home-page .luly-orbit-stage > a.luly-orbit-card:nth-of-type(3) {
    --card-x: -205px; --card-y: 154px; --card-z: -36px; --card-rz: 6deg;
  }
  body.luly-home-page .luly-orbit-stage > a.luly-orbit-card:nth-of-type(4) {
    --card-x: 205px; --card-y: 150px; --card-z: -78px; --card-rz: -6deg;
  }
}

/* v6: Mobile Safari design-path fallback and visible orange menu icon.
   Keep the Design Path logo visible even if motion JS is blocked or delayed. */
@media (max-width: 767.98px) {
  body.luly-home-page .luly-design-ladder .glow-logo-token,
  body.luly-home-page .luly-design-ladder .cube-stage.luly-mobile-path-ready .glow-logo-token {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important; /* The travelling/rotating motion is driven by Web Animations API. */
    transform: translate3d(14px, 38px, 0) rotate(-9deg);
    z-index: 30 !important;
  }
  body.luly-home-page .luly-design-ladder .glow-logo-token > img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  nav.luly-navbar .navbar-toggler .navbar-toggler-icon {
    display: inline-block;
    position: relative;
    width: 23px;
    height: 2.5px;
    border-radius: 999px;
    background: #ff8727 !important;
    background-image: none !important;
    box-shadow: 0 -7px 0 #ff8727, 0 7px 0 #ff8727;
    filter: none !important;
    vertical-align: middle;
  }
  nav.luly-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background: #ffab60 !important;
    box-shadow: 0 -7px 0 #ffab60, 0 7px 0 #ffab60;
  }
}

/* ==============================================================
   Mobile QA v7 — October 2026
   Phone-only adjustments for account, order confirmation and nav.
   No desktop selectors, markup or backend behavior are modified.
   ============================================================= */
@media (max-width: 767.98px) {
  /* Keep the same menu sheet layout on Profile and all other pages.
     Profile/ops have additional desktop navbar rules that used to center it. */
  body nav.luly-navbar .navbar-collapse {
    box-sizing: border-box !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    text-align: left !important;
  }
  body nav.luly-navbar .navbar-collapse .navbar-nav,
  body.luly-profile-page nav.luly-navbar .navbar-nav,
  body.luly-ops-page nav.luly-navbar .navbar-nav {
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
  }
  body nav.luly-navbar .navbar-collapse .navbar-nav .nav-item,
  body nav.luly-navbar .navbar-collapse .navbar-nav .nav-link {
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  body nav.luly-navbar .navbar-collapse .navbar-nav .nav-link {
    display: flex !important;
    align-items: center !important;
    padding: 12px 14px !important;
    font-size: .94rem !important;
    line-height: 1.25 !important;
  }
  body nav.luly-navbar .navbar-collapse .navbar-actions,
  body.luly-profile-page nav.luly-navbar .navbar-actions,
  body.luly-ops-page nav.luly-navbar .navbar-actions {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
  }
  body nav.luly-navbar .navbar-collapse .navbar-actions > .btn,
  body nav.luly-navbar .navbar-collapse .navbar-actions > a.btn,
  body.luly-profile-page nav.luly-navbar .navbar-actions > a.btn {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 9px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    font-size: .88rem !important;
  }

  /* Order confirmation: clear primary call to action, tidy secondary grid. */
  body.order-confirmation-page .admin-mvp-actions {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 23px !important;
  }
  body.order-confirmation-page .admin-mvp-actions > a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 11px 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    font-size: clamp(.77rem,3.45vw,.92rem) !important;
    box-sizing: border-box !important;
  }
  body.order-confirmation-page .admin-mvp-actions > a:first-child,
  body.order-confirmation-page .admin-mvp-actions > a:last-child:nth-child(4) {
    grid-column: 1 / -1;
  }

  /* Profile: eliminate introductory block only on phones, leave actual
     active orders and all account data intact. On desktop it still exists. */
  body.luly-profile-page #active-order > .profile-welcome.simple-welcome {
    display: none !important;
  }

  /* Profile navigation: compact two-column tiles (no cut-off horizontal rail).
     Replace the trailing orange dot with an unobtrusive left-edge marker. */
  body.luly-profile-page .profile-menu.simple-profile-menu {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 2px 0 6px !important;
    margin: 14px 0 12px !important;
    scrollbar-width: none;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu > a {
    position: relative !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 10px 8px 10px 12px !important;
    border-radius: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    font-size: clamp(.70rem,2.9vw,.80rem) !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    letter-spacing: -.015em !important;
    text-align: left !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu > a > span {
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: .69rem !important;
    font-weight: 800 !important;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu > a:last-of-type:nth-child(odd) {
    grid-column: 1 / -1;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu > a.is-active,
  body.luly-profile-page .profile-menu.simple-profile-menu > a[aria-current="page"] {
    transform: none !important;
    background: radial-gradient(ellipse at 12% 50%,rgba(255,128,29,.16),transparent 76%),
    linear-gradient(135deg,rgba(255,122,24,.10),rgba(255,255,255,.03)) !important;
    box-shadow: 0 10px 20px -13px rgba(255,105,26,.25),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
    border-color: rgba(255,143,49,.50) !important;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu > a.is-active::after,
  body.luly-profile-page .profile-menu.simple-profile-menu > a[aria-current="page"]::after {
    display: none !important;
    content: none !important;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu > a.is-active::before,
  body.luly-profile-page .profile-menu.simple-profile-menu > a[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 11px;
    bottom: 11px;
    left: 3px;
    width: 3px;
    border-radius: 999px;
    background: #ff922e;
    box-shadow: 0 0 10px -3px rgba(255,116,24,.48);
    pointer-events: none;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu .profile-menu-unread:not([hidden]) {
    margin-left: 2px;
    flex: 0 0 auto;
    font-size: .68rem;
  }

  /* Keep action buttons in the active-order pane compact but finger friendly. */
  body.luly-profile-page .simple-active-order .luly-profile-payment-actions,
  body.luly-profile-page .simple-active-order .luly-order-card-actions,
  body.luly-profile-page .simple-active-order .static-active-actions {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    align-items: stretch !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: stretch !important;
    margin-top: 14px !important;
  }
  body.luly-profile-page .simple-active-order .luly-profile-payment-actions > *,
  body.luly-profile-page .simple-active-order .luly-order-card-actions > *,
  body.luly-profile-page .simple-active-order .static-active-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
    font-size: clamp(.75rem,3vw,.88rem) !important;
    line-height: 1.25 !important;
  }
  body.luly-profile-page .simple-active-order .luly-profile-payment-actions > :first-child,
  body.luly-profile-page .simple-active-order .static-active-actions > :first-child {
    grid-column: 1 / -1;
  }
  body.luly-profile-page .simple-active-order .luly-profile-payment-actions > :only-child,
  body.luly-profile-page .simple-active-order .luly-order-card-actions > :only-child {
    grid-column: 1 / -1;
  }

  /* Same compact role picker from 320px up: no wrapping into a third row. */
  body.luly-login-page .login-role-picker .role-checker-row {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  body.luly-login-page .login-role-picker .role-checker-row .role-checker {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 9px 4px !important;
    gap: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(.68rem,3vw,.82rem) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
  body.luly-login-page .login-role-picker .role-checker-row .role-checker > span {
    flex: 0 0 8px !important;
    width: 8px !important;
    height: 8px !important;
  }

  /* Mobile order detail pages: predictable action grouping, no awkward wraps. */
  body.order-detail-page .detail-action-row,
  body.order-detail-page .luly-v325-card-actions {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 9px !important;
    align-items: stretch !important;
  }
  body.order-detail-page .detail-action-row > a,
  body.order-detail-page .luly-v325-card-actions > a {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: 44px !important;
    padding: 10px 7px !important;
    text-align: center !important;
    white-space: normal !important;
    font-size: clamp(.75rem,3vw,.88rem) !important;
    line-height: 1.25 !important;
  }
  body.order-detail-page .detail-action-row > a:first-child,
  body.order-detail-page .luly-v325-card-actions > a:first-child:not([hidden]) {
    grid-column: 1 / -1;
  }
  body.order-detail-page .luly-v325-card-actions > a[hidden] { display: none !important; }
  body.order-detail-page .luly-v325-card-actions > a:only-child { grid-column: 1 / -1; }
}


/* ==============================================================
   Mobile QA v8 — October 2026
   Small, phone-only refinements: profile billing action, centered
   fifth tab, desktop-style active dot, and navbar hamburger alignment.
   ============================================================= */
@media (max-width: 767.98px) {
  /* Center all three strokes as one glyph inside the menu button. */
  body nav.luly-navbar button.navbar-toggler {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 0 !important;
  }
  body nav.luly-navbar button.navbar-toggler .navbar-toggler-icon {
    position: absolute !important;
    display: block !important;
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    width: 23px !important;
    height: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #ff8727 !important;
    background-image: none !important;
    box-shadow: 0 -7px 0 #ff8727, 0 7px 0 #ff8727 !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;
    filter: none !important;
  }
  body nav.luly-navbar button.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background: #ffab60 !important;
    box-shadow: 0 -7px 0 #ffab60, 0 7px 0 #ffab60 !important;
  }

  /* In payment verification/required cards, keep the main payment CTA
     full-width and center only the secondary 'View invoice' action. */
  body.luly-profile-page .simple-active-order .luly-profile-payment-actions > a.luly-order-invoice-link {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(210px, 100%) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  /* The fifth tile occupies one regular grid-column width and is centered
     in row three, instead of spanning both columns. */
  body.luly-profile-page .profile-menu.simple-profile-menu > a[data-profile-tab-link="client-notifications"] {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: calc((100% - 8px) / 2) !important;
    min-width: 0 !important;
    gap: 4px !important;
    padding-left: 8px !important;
    padding-right: 17px !important;
    font-size: clamp(.68rem, 2.7vw, .76rem) !important;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu > a[data-profile-tab-link="client-notifications"] > span {
    font-size: .65rem !important;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu > a[data-profile-tab-link="client-notifications"] .profile-menu-unread:not([hidden]) {
    min-width: 18px !important;
    height: 19px !important;
    padding: 0 4px !important;
    margin-left: auto !important;
    font-size: .60rem !important;
  }

  /* Match the desktop selection cue, but anchor it to the tile's right
     edge so it can never sit over the last character of the label. */
  body.luly-profile-page .profile-menu.simple-profile-menu > a.is-active,
  body.luly-profile-page .profile-menu.simple-profile-menu > a[aria-current="page"] {
    padding-right: 22px !important;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu > a.is-active::before,
  body.luly-profile-page .profile-menu.simple-profile-menu > a[aria-current="page"]::before {
    display: none !important;
    content: none !important;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu > a.is-active::after,
  body.luly-profile-page .profile-menu.simple-profile-menu > a[aria-current="page"]::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    left: auto !important;
    right: 8px !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #ff8a1d !important;
    box-shadow: 0 0 0 4px rgba(255,122,24,.14) !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu > a[data-profile-tab-link="client-notifications"].is-active,
  body.luly-profile-page .profile-menu.simple-profile-menu > a[data-profile-tab-link="client-notifications"][aria-current="page"] {
    padding-right: 20px !important;
  }
}


/* The unread badge already acts as a circular cue on a selected
   Notifications tile. Do not paint a second dot on top of that badge. */
@media (max-width: 767.98px) {
  body.luly-profile-page .profile-menu.simple-profile-menu > a[data-profile-tab-link="client-notifications"].is-active:has(.profile-menu-unread:not([hidden]))::after,
  body.luly-profile-page .profile-menu.simple-profile-menu > a[data-profile-tab-link="client-notifications"][aria-current="page"]:has(.profile-menu-unread:not([hidden]))::after {
    display: none !important;
    content: none !important;
  }
}

/* ================================================================
   Mobile QA v9 — October 2026
   Social links: SVG arrow instead of platform emoji; consistent pills.
   Profile menu: genuinely matching fifth tile; no active-marker dot.
   Desktop styles are intentionally unchanged.
   ================================================================ */
@media (max-width: 767.98px) {
  /* Both pages already have real Discord/Instagram SVGs in the markup.
     Enforce the intended compact outlined buttons across older CSS layers. */
  .luly-footer .footer-socials.footer-social-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 9px !important;
    margin-top: 18px !important;
    width: 100% !important;
  }
  .luly-footer .footer-socials.footer-social-buttons > a.luly-social-pill,
  body.contact-page .contact-v315-social-actions > a.contact-v315-social-btn.luly-social-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 45px !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    gap: 7px !important;
    border: 1px solid rgba(255, 146, 62, .4) !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, rgba(255, 127, 35, .09), rgba(255, 255, 255, .02)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
    color: #f9eee6 !important;
    font-size: clamp(.66rem, 2.8vw, .78rem) !important;
    font-weight: 730 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }
  .luly-footer .footer-socials.footer-social-buttons > a.luly-social-pill img,
  body.contact-page .contact-v315-social-actions > a.luly-social-pill img {
    display: block !important;
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
    max-width: 17px !important;
    object-fit: contain !important;
    opacity: .96 !important;
  }
  /* The literal ↗ character can become a blue square emoji in iOS Safari.
     Keep its aria-hidden HTML span, but paint a predictable vector arrow. */
  .luly-footer .footer-socials.footer-social-buttons > a.luly-social-pill .social-arrow,
  body.contact-page .contact-v315-social-actions > a.luly-social-pill .social-arrow {
    display: block !important;
    flex: 0 0 14px !important;
    width: 14px !important;
    height: 14px !important;
    padding: 0 !important;
    margin: 0 0 0 auto !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    opacity: .9 !important;
    transform: none !important;
    background: center / 14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFAB61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") !important;
  }
  body.contact-page .contact-v315-social-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 330px !important;
  }
  body.contact-page .contact-v315-social-actions > a.luly-social-pill {
    font-size: .81rem !important;
    min-height: 48px !important;
    padding-inline: 14px !important;
  }

  /* Fifth profile tab: same left inset, number and text sizing as 01–04.
     Only its grid placement is different: centered in the third row. */
  body.luly-profile-page .profile-menu.simple-profile-menu > a[data-profile-tab-link="client-notifications"] {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: calc((100% - 8px) / 2) !important;
    padding: 10px 8px 10px 12px !important;
    gap: 6px !important;
    font-size: clamp(.70rem, 2.9vw, .80rem) !important;
    letter-spacing: -.015em !important;
    line-height: 1.25 !important;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu > a[data-profile-tab-link="client-notifications"] > span {
    font-size: .69rem !important;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu > a[data-profile-tab-link="client-notifications"] .profile-menu-unread:not([hidden]) {
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }

  /* On phones selection is communicated by the orange border/glow only.
     Hide all decorative circle/stripe pseudo-elements, including v8 rules. */
  body.luly-profile-page .profile-menu.simple-profile-menu > a.is-active,
  body.luly-profile-page .profile-menu.simple-profile-menu > a[aria-current="page"] {
    padding-right: 8px !important;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu > a.is-active::before,
  body.luly-profile-page .profile-menu.simple-profile-menu > a.is-active::after,
  body.luly-profile-page .profile-menu.simple-profile-menu > a[aria-current="page"]::before,
  body.luly-profile-page .profile-menu.simple-profile-menu > a[aria-current="page"]::after {
    display: none !important;
    content: none !important;
    box-shadow: none !important;
  }
}

@media (max-width: 350px) {
  /* A compact fallback for iPhone SE / narrow phones. */
  .luly-footer .footer-socials.footer-social-buttons {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 230px !important;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu > a[data-profile-tab-link="client-notifications"] {
    font-size: .68rem !important;
    gap: 4px !important;
    padding-left: 9px !important;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu > a[data-profile-tab-link="client-notifications"] .profile-menu-unread:not([hidden]) {
    font-size: .57rem !important;
    min-width: 16px !important;
    padding-inline: 3px !important;
  }
}

/* ================================================================
   Mobile QA v10 — October 2026
   Applied to the user-provided v9 CSS. Desktop remains unchanged.
   ================================================================ */
@media (max-width: 767.98px) {
  /* Contact outro: label vertically centered in each touch-sized CTA. */
  body.contact-page .contact-v14-bottom-actions > a.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
    min-height: 50px !important;
    height: auto !important;
    padding: 3px 15px 0 !important;
    box-sizing: border-box !important;
  }

  /* Clear separation between the social links and footer columns. */
  .luly-footer .luly-footer-main > .col-md-5:first-child {
    padding-bottom: 19px !important;
  }

  /* Compact, single-row actions on every client notification, regardless
     of whether the notification has one, two or three actions. */
  body.luly-profile-page .client-notification-panel
  .luly-notification-item .luly-notification-actions {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 12px 0 0 !important;
    gap: 7px !important;
  }
  body.luly-profile-page .client-notification-panel
  .luly-notification-item .luly-notification-actions > a,
  body.luly-profile-page .client-notification-panel
  .luly-notification-item .luly-notification-actions > button {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 8px 4px !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    font-size: clamp(.67rem, 2.9vw, .83rem) !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  /* Reserve a real fixed cell for the unread badge. An anonymous grid item
     holds the label, so selection state can't shift the count horizontally. */
  body.luly-profile-page .profile-menu.simple-profile-menu
  > a[data-profile-tab-link="client-notifications"],
  body.luly-profile-page .profile-menu.simple-profile-menu
  > a[data-profile-tab-link="client-notifications"].is-active,
  body.luly-profile-page .profile-menu.simple-profile-menu
  > a[data-profile-tab-link="client-notifications"][aria-current="page"] {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) 22px !important;
    align-items: center !important;
    column-gap: 5px !important;
    justify-content: initial !important;
    padding: 10px 8px 10px 12px !important;
    letter-spacing: -.015em !important;
    transform: none !important;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu
  > a[data-profile-tab-link="client-notifications"] > span {
    grid-column: 1 !important;
    margin: 0 !important;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu
  > a[data-profile-tab-link="client-notifications"] .profile-menu-unread,
  body.luly-profile-page .profile-menu.simple-profile-menu
  > a[data-profile-tab-link="client-notifications"] .profile-menu-unread:not([hidden]) {
    grid-column: 3 !important;
    justify-self: center !important;
    margin: 0 !important;
    width: 21px !important;
    min-width: 21px !important;
    height: 21px !important;
    padding: 0 !important;
    flex: none !important;
    transform: none !important;
    transition: none !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* Bootstrap's animated height removes text before the sheet disappears.
     Make the mobile collapse atomic (including its contents); no change
     to the desktop Bootstrap navigation. */
  body nav.luly-navbar .navbar-collapse.collapsing {
    transition: none !important;
    animation: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* These v11-only helpers are hidden on desktop and in no-JS states. */
.luly-mobile-rail-status, .luly-mobile-sticky-cta { display: none !important; }
.luly-mobile-rail-status[hidden], body.luly-home-page .luly-mobile-rail-status[hidden] { display: none !important; }

/* ===================================================================
   MOBILE EXPERIENCE v11 — polished interactions (phone-only).
   All changes below are scoped to phones; the desktop remains unchanged.
   =================================================================== */
@media (max-width: 767.98px) {
  /* Bootstrap collapse is still responsible for ARIA, focus and state.
     Animate the whole visible sheet, not its text and height separately. */
  body nav.luly-navbar .navbar-collapse.show:not(.luly-sheet-closing) {
    animation: lulySheetEnter .22s cubic-bezier(.2,.8,.2,1) both;
    transform-origin: top center;
  }
  body nav.luly-navbar .navbar-collapse.show.luly-sheet-closing {
    animation: lulySheetExit .18s ease-in both !important;
    pointer-events: none !important;
  }
  body nav.luly-navbar .navbar-collapse.collapsing {
    /* Structural transition is instantaneous; v11 handles exit before hide. */
    transition: none !important;
    animation: none !important;
    visibility: hidden !important;
  }
  body nav.luly-navbar .navbar-toggler .navbar-toggler-icon {
    transition: background-color .15s ease, box-shadow .15s ease !important;
  }

  /* Tactile responses without modifying the desktop transform system. */
  body .btn,
  body .profile-menu.simple-profile-menu > a,
  body #luly-vault .vault-filters button,
  body .luly-social-pill,
  body nav.luly-navbar .navbar-toggler,
  body .role-checker {
    -webkit-tap-highlight-color: transparent;
    transition-property: scale, filter, background-color, border-color;
    transition-duration: .16s;
    transition-timing-function: ease-out;
  }

  /* The 12-second design ladder pauses outside the visible viewport. */
  body.luly-home-page .luly-design-ladder .cube-stage.luly-mobile-path-offscreen .ladder-step,
  body.luly-home-page .luly-design-ladder .cube-stage.luly-mobile-path-offscreen .step-stack::after {
    animation-play-state: paused !important;
  }

  /* A responsive count/progress indicator for the mobile poster rail. */
  body.luly-home-page .luly-mobile-rail-status {
    display: flex !important; align-items: center; gap: 13px;
    padding: 1px 18px 0 0; max-width: 100%;
    color: #ffad6c; font-size: .70rem; font-weight: 750;
    letter-spacing: .08em; font-variant-numeric: tabular-nums;
  }
  body.luly-home-page .luly-mobile-rail-status .luly-mobile-rail-count { flex: 0 0 auto; }
  body.luly-home-page .luly-mobile-rail-status .luly-mobile-rail-track {
    display: block; height: 3px; min-width: 0; max-width: 185px;
    flex: 1; background: rgba(255,142,60,.19);
    border-radius: 999px; overflow: hidden;
  }
  body.luly-home-page .luly-mobile-rail-status .luly-mobile-rail-fill {
    display: block; width: 100%; height: 100%;
    background: linear-gradient(90deg,#ff7917,#ffb16f);
    border-radius: inherit; transform: scaleX(.125);
    transform-origin: left center; transition: transform .12s linear;
  }

  /* Image placeholder only exists while image loading is genuinely pending. */
  body.luly-portfolio-page #luly-vault .vault-item.luly-mobile-media-loading,
  body.luly-home-page #visual-stack .thumbnail-deck > a.luly-mobile-media-loading {
    position: relative;
  }
  body.luly-portfolio-page #luly-vault .vault-item.luly-mobile-media-loading::before,
  body.luly-home-page #visual-stack .thumbnail-deck > a.luly-mobile-media-loading::before {
    content: ''; pointer-events: none; position: absolute;
    left: 0; top: 0; width: 100%; aspect-ratio: 2/3;
    z-index: 2;
    background: linear-gradient(110deg,#21140c 5%,#3e271b 30%,#21140c 60%);
    background-size: 220% 100%;
    animation: lulyMobileShimmer 1.6s ease-in-out infinite;
    border-radius: inherit;
  }
  body.luly-portfolio-page #luly-vault .vault-item.vault-card--wide.luly-mobile-media-loading::before,
  body.luly-portfolio-page #luly-vault .vault-item.vault-card--standard.luly-mobile-media-loading::before { aspect-ratio: 16/9; }
  body.luly-home-page #visual-stack .thumbnail-deck > a.luly-mobile-media-loading::before { height: 100%; aspect-ratio: auto; }

  /* Use the existing async form statuses; never forge success feedback. */
  body form[data-form-kind] button[type='submit']:disabled,
  body form[data-form-kind] button[type='submit'][aria-busy='true'] {
    cursor: progress; opacity: .8;
  }
  body form[data-form-kind] button[type='submit']:disabled::after,
  body form[data-form-kind] button[type='submit'][aria-busy='true']::after {
    content: ''; display: inline-block;
    width: 13px; height: 13px; margin-left: 8px;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; vertical-align: -2px;
    animation: lulyMobileLoadingRing .75s linear infinite;
  }

  /* Contextual mobile CTA for browse pages only; never on checkout/profile. */
  body.luly-home-page .luly-mobile-sticky-cta,
  body.luly-portfolio-page .luly-mobile-sticky-cta {
    position: fixed; z-index: 850; left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom));
    translate: -50% 0;
    display: inline-flex !important; align-items: center; justify-content: center;
    min-height: 44px; width: min(224px, calc(100vw - 60px));
    padding: 10px 17px;
    color: #160d08; font-weight: 800; text-decoration: none;
    border-radius: 999px; border: 1px solid #ffb06b;
    background: linear-gradient(90deg,#ff7710,#ffaf56);
    box-shadow: 0 10px 26px rgba(0,0,0,.4),0 4px 18px rgba(255,111,18,.17);
    transition: opacity .18s ease, translate .18s ease, visibility .18s ease;
    opacity: 0; visibility: hidden; pointer-events: none;
    text-align: center; font-size: .90rem;
  }
  body.luly-home-page .luly-mobile-sticky-cta.is-visible,
  body.luly-portfolio-page .luly-mobile-sticky-cta.is-visible {
    opacity: 1; visibility: visible; pointer-events: auto;
    translate: -50% 0;
  }
  body.luly-home-page .luly-mobile-sticky-cta:not(.is-visible),
  body.luly-portfolio-page .luly-mobile-sticky-cta:not(.is-visible) {
    translate: -50% 12px;
  }
}
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
  body .btn:active, body .profile-menu.simple-profile-menu > a:active,
  body #luly-vault .vault-filters button:active,
  body .luly-social-pill:active, body nav.luly-navbar .navbar-toggler:active,
  body .role-checker:active { scale: .97; filter: brightness(1.07); }
}
@keyframes lulySheetEnter {
  from { opacity: 0; transform: translateY(-8px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lulySheetExit {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-8px) scale(.99); }
}
@keyframes lulyMobileShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes lulyMobileLoadingRing { to { transform: rotate(360deg); } }
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  body nav.luly-navbar .navbar-collapse.show:not(.luly-sheet-closing),
  body nav.luly-navbar .navbar-collapse.show.luly-sheet-closing,
  body .luly-mobile-rail-fill,
  body .luly-mobile-sticky-cta,
  body .btn,
  body .profile-menu.simple-profile-menu > a { animation: none !important; transition: none !important; }
  body.luly-home-page .luly-mobile-rail-status .luly-mobile-rail-fill { transition: none !important; }
  body.luly-portfolio-page #luly-vault .vault-item.luly-mobile-media-loading::before,
  body.luly-home-page #visual-stack .thumbnail-deck > a.luly-mobile-media-loading::before,
  body form[data-form-kind] button[type='submit']:disabled::after,
  body form[data-form-kind] button[type='submit']:disabled::after,
  body form[data-form-kind] button[type='submit'][aria-busy='true']::after { animation: none !important; }
}


/* ================================================================
   Mobile Experience v12 — user QA refinements.
   Existing desktop visuals remain unchanged, except fixing the
   unintended EMPTY contact status box on both viewport sizes.
   ================================================================ */

/* Contact has a whitespace-only live region before the first submit.
   Keep it hidden until JS sees actual feedback text. Without JS, a
   whitespace-only status remains hidden and form submit still works. */
body.contact-page .luly-contact-form .contact-form-status:not(.luly-status-has-message) {
  display: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

@media (max-width: 767.98px) {
  /* The floating CTA belongs ONLY to the Home page. */
  body.luly-portfolio-page .luly-mobile-sticky-cta { display: none !important; }

  /* Safari preserves :hover after tapping a profile link. The old rule
     slides it right by 4px, while active state slides it 3px. Eliminate
     the sideways kick without removing short press feedback. */
  body.luly-profile-page .profile-menu.simple-profile-menu > a,
  body.luly-profile-page .profile-menu.simple-profile-menu > a:hover,
  body.luly-profile-page .profile-menu.simple-profile-menu > a:focus,
  body.luly-profile-page .profile-menu.simple-profile-menu > a:active,
  body.luly-profile-page .profile-menu.simple-profile-menu > a.is-active,
  body.luly-profile-page .profile-menu.simple-profile-menu > a[aria-current="page"] {
    transform: none !important;
    translate: none !important;
  }
  body.luly-profile-page .profile-menu.simple-profile-menu > a {
    transition-property: scale, filter, background-color, border-color, box-shadow !important;
    transition-duration: .16s !important;
  }

  /* Tactile press response for floating order CTA, including iOS Safari.
     Individual scale does not interfere with its centering translate. */
  body.luly-home-page .luly-mobile-sticky-cta {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform-origin: center bottom;
    scale: 1;
    filter: brightness(1);
    transition: opacity .18s ease, translate .18s ease,
    visibility .18s ease, scale .15s ease, filter .15s ease !important;
  }
}

@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
  body.luly-profile-page .profile-menu.simple-profile-menu > a:active {
    scale: .975;
    filter: brightness(1.07);
  }
  body.luly-home-page .luly-mobile-sticky-cta:active {
    scale: .94 !important;
    filter: brightness(1.12) !important;
  }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  body.luly-home-page .luly-mobile-sticky-cta,
  body.luly-profile-page .profile-menu.simple-profile-menu > a {
    animation: none !important;
    transition: none !important;
  }
}

/* ================================================================
   Mobile Experience v13 — final usability pass (phone-only).
   No desktop selectors or desktop Orbit Hero behavior changed.
   ================================================================ */
@media (max-width: 767.98px) {
  /* The existing fullscreen Vault viewer is now swipeable and zoomable.
     Only its artwork region intercepts touch; close/prev/next still work. */
  body.luly-portfolio-page #luly-vault .vault-viewer-media,
  body.luly-portfolio-page #luly-vault .vault-viewer-media img {
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
  }
  body.luly-portfolio-page #luly-vault .vault-viewer-media img {
    transform-origin: center center !important;
    transition: transform .18s ease-out, opacity .18s ease !important;
  }
  body.luly-portfolio-page #luly-vault .vault-viewer.luly-mobile-zoomed .vault-viewer-media img {
    transition: none !important;
  }
  body.luly-portfolio-page #luly-vault .vault-viewer-media::after {
    content: 'SWIPE TO BROWSE  ·  PINCH TO ZOOM';
    position: absolute;
    left: 50%; bottom: 10px; z-index: 3;
    transform: translateX(-50%);
    width: max-content; max-width: 96%;
    color: rgba(255,235,215,.83);
    font-size: .59rem; font-weight: 700; letter-spacing: .065em;
    background: rgba(7,5,5,.68); border: 1px solid rgba(255,155,85,.2);
    border-radius: 999px; padding: 7px 10px;
    pointer-events: none;
  }
  body.luly-portfolio-page #luly-vault .vault-viewer.luly-mobile-zoomed .vault-viewer-media::after {
    content: 'DOUBLE TAP TO RESET';
  }

  /* Short-lived, tab-local autosave of NON-contact order fields.
     Never save name, email, Discord, or credentials here. */
  body.order-page .luly-mobile-draft {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
    margin: 13px 0 3px; padding: 10px 12px;
    border: 1px solid rgba(255,142,59,.22); border-radius: 12px;
    background: rgba(255,128,29,.06);
  }
  body.order-page .luly-mobile-draft-note {
    font-size: .76rem; line-height: 1.5; color: rgba(255,238,223,.7);
    flex: 1 1 165px;
  }
  body.order-page .luly-mobile-draft-discard {
    flex: 0 0 auto; font-size: .74rem; font-weight: 750;
    padding: 7px 9px; border: 1px solid rgba(255,149,79,.4);
    border-radius: 9px; background: rgba(255,128,29,.08);
    color: #ffb77f; min-height: 36px;
  }
  body.order-page .luly-mobile-draft-discard:active { scale: .97; }

  /* Small, unobtrusive acknowledgement of the REAL backend response. */
  body .luly-mobile-status-toast {
    position: fixed; z-index: 3000;
    top: calc(80px + env(safe-area-inset-top, 0px));
    left: 50%; width: max-content; max-width: min(340px, calc(100vw - 32px));
    padding: 11px 15px;
    border: 1px solid rgba(255,156,83,.45);
    border-radius: 13px; background: rgba(24,16,12,.96);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    color: #fff5ec; line-height: 1.42; font-size: .80rem;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  body .luly-mobile-status-toast.is-shown {
    opacity: 1; visibility: visible; transform: translate(-50%,0);
  }

  /* Make long mobile forms usable with the soft keyboard and sticky navbar. */
  body.order-page #order-brief-form input,
  body.order-page #order-brief-form select,
  body.order-page #order-brief-form textarea,
  body.contact-page .luly-contact-form input,
  body.contact-page .luly-contact-form textarea {
    scroll-margin-top: 95px;
    scroll-margin-bottom: 18px;
  }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  body .luly-mobile-status-toast,
  body.luly-portfolio-page #luly-vault .vault-viewer-media img,
  body.order-page .luly-mobile-draft-discard {
    animation: none !important; transition: none !important;
  }
}


/* ================================================================
   Mobile Experience v14 — portfolio viewer & contextual order shortcut.
   All new visual rules are phone-only; desktop stays as in v13.
   ================================================================ */
@media (max-width: 767.98px) {
  /* Swipe already calls these controls through the existing viewer JS.
     Hide only the mobile buttons, not the controls' event handlers. */
  body.luly-portfolio-page #luly-vault .vault-viewer-nav,
  body.luly-portfolio-page #luly-vault .vault-viewer-prev,
  body.luly-portfolio-page #luly-vault .vault-viewer-next {
    display: none !important;
  }

  /* Reserve a separate bottom row for gesture help, BELOW artwork/caption. */
  body.luly-portfolio-page #luly-vault .vault-viewer-stage,
  body.luly-portfolio-page #luly-vault .vault-viewer.is-portrait .vault-viewer-stage,
  body.luly-portfolio-page #luly-vault .vault-viewer.is-landscape .vault-viewer-stage,
  body.luly-portfolio-page #luly-vault .vault-viewer.is-square .vault-viewer-stage {
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    row-gap: 8px !important;
  }
  /* The old v13 hint sits ON the artwork. The new guide is outside it. */
  body.luly-portfolio-page #luly-vault .vault-viewer-media::after,
  body.luly-portfolio-page #luly-vault .vault-viewer.luly-mobile-zoomed .vault-viewer-media::after {
    content: none !important;
    display: none !important;
  }
  body.luly-portfolio-page #luly-vault .luly-mobile-viewer-gesture-guide {
    display: block;
    margin: 0;
    padding: 4px 7px 0;
    min-height: 20px;
    color: rgba(255,226,199,.66);
    text-align: center;
    font-size: clamp(.62rem, 2.75vw, .73rem);
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: .015em;
    white-space: normal;
    text-wrap: balance;
  }

  /* Animate the floating CTA as one chip, not separate text and background.
     It appears after What we design is reached (threshold controlled by JS). */
  body.luly-home-page .luly-mobile-sticky-cta {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    translate: -50% 15px;
    scale: .95;
    transition: opacity .26s ease,
    translate .28s cubic-bezier(.22,.8,.2,1),
    scale .28s cubic-bezier(.22,.8,.2,1),
    visibility 0s linear .28s,
    filter .15s ease !important;
  }
  body.luly-home-page .luly-mobile-sticky-cta.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    translate: -50% 0;
    scale: 1;
    transition: opacity .26s ease,
    translate .28s cubic-bezier(.22,.8,.2,1),
    scale .28s cubic-bezier(.22,.8,.2,1),
    visibility 0s linear 0s,
    filter .15s ease !important;
  }
  body.luly-home-page .luly-mobile-sticky-cta:not(.is-visible) {
    translate: -50% 15px;
    scale: .95;
  }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  body.luly-home-page .luly-mobile-sticky-cta {
    transition: none !important;
    animation: none !important;
  }
}


/* ================================================================
   Mobile Experience v15 — clean, larger, swipe-only artwork viewer.
   All changes live under a phone-width media query. Desktop intact.
   ================================================================ */
@media (max-width: 767.98px) {
  /* Free the old bottom navigation's reserved space for the artwork. */
  body.luly-portfolio-page #luly-vault .vault-viewer {
    box-sizing: border-box !important;
    padding: 6px 12px max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Reserve a small top strip for X, then use the rest for artwork + caption. */
  body.luly-portfolio-page #luly-vault .vault-viewer-stage,
  body.luly-portfolio-page #luly-vault .vault-viewer.is-portrait .vault-viewer-stage,
  body.luly-portfolio-page #luly-vault .vault-viewer.is-landscape .vault-viewer-stage,
  body.luly-portfolio-page #luly-vault .vault-viewer.is-square .vault-viewer-stage {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: calc(100dvh - var(--luly-nav-safe-height, 76px) - 16px - env(safe-area-inset-bottom, 0px)) !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 39px 0 2px !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    row-gap: clamp(5px, 1dvh, 9px) !important;
    align-content: stretch !important;
  }

  /* The artwork keeps its full aspect ratio. Never crop a finished design. */
  body.luly-portfolio-page #luly-vault .vault-viewer.is-portrait .vault-viewer-media {
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    aspect-ratio: var(--viewer-ratio, .8) !important;
    justify-self: center !important;
    align-self: stretch !important;
  }
  body.luly-portfolio-page #luly-vault .vault-viewer.is-landscape .vault-viewer-media,
  body.luly-portfolio-page #luly-vault .vault-viewer.is-square .vault-viewer-media {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.luly-portfolio-page #luly-vault .vault-viewer-media img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    transition: opacity .18s ease !important;
    touch-action: none !important;
  }
  body.luly-portfolio-page #luly-vault .vault-viewer-media {
    touch-action: none !important;
  }
  body.luly-portfolio-page #luly-vault .vault-viewer-media::after,
  body.luly-portfolio-page #luly-vault .vault-viewer.luly-mobile-zoomed .vault-viewer-media::after {
    display: none !important;
    content: none !important;
  }

  /* The X sits entirely ABOVE the image, not on top of artwork. */
  body.luly-portfolio-page #luly-vault .vault-viewer-close {
    top: 5px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    z-index: 10 !important;
  }
  body.luly-portfolio-page #luly-vault .vault-viewer-caption {
    min-height: 0 !important;
    padding: 0 4px !important;
    align-items: center !important;
    gap: 12px !important;
  }
  body.luly-portfolio-page #luly-vault .vault-viewer-caption h3 {
    font-size: clamp(1.12rem, 5.4vw, 1.5rem) !important;
    line-height: 1.12 !important;
    margin-top: 4px !important;
  }
  body.luly-portfolio-page #luly-vault .vault-viewer-caption small {
    font-size: .60rem !important;
    line-height: 1.3 !important;
  }
  body.luly-portfolio-page #luly-vault .vault-viewer-count { gap: .25rem !important; flex: 0 0 auto; }
  body.luly-portfolio-page #luly-vault .vault-viewer-count b { font-size: 1.15rem !important; }
  body.luly-portfolio-page #luly-vault .vault-viewer-count em { font-size: .75rem !important; }
  body.luly-portfolio-page #luly-vault .luly-mobile-viewer-gesture-guide {
    display: block !important;
    align-self: center !important;
    text-align: center !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 1px !important;
    line-height: 1.25 !important;
    font-size: .69rem !important;
    letter-spacing: .045em !important;
    color: rgba(255,226,199,.67) !important;
  }
}

@media (max-width: 767.98px) and (max-height: 600px) {
  /* Short landscape phone windows still need an unobstructed close button. */
  body.luly-portfolio-page #luly-vault .vault-viewer-stage,
  body.luly-portfolio-page #luly-vault .vault-viewer.is-portrait .vault-viewer-stage,
  body.luly-portfolio-page #luly-vault .vault-viewer.is-landscape .vault-viewer-stage,
  body.luly-portfolio-page #luly-vault .vault-viewer.is-square .vault-viewer-stage {
    padding-top: 36px !important;
    row-gap: 4px !important;
  }
}


/* ================================================================
   Mobile Experience v16 — four phone-only polish fixes (2026-10-22).
   This stylesheet is loaded last. Desktop stays unchanged.
   ================================================================ */
@media (max-width: 767.98px) {
  /* HOME: remove FM explainer and tiny FM tags from the Home showcase.
     The detailed fan-made attribution remains on the Portfolio page. */
  body.luly-home-page #visual-stack .fm-disclosure,
  body.luly-home-page #visual-stack .fm-inline {
    display: none !important;
  }

  /* HOME: keep last poster reachable with a natural end-of-rail snap.
     Counter logic in the matching JS reports 08/08 at the rail end. */
  body.luly-home-page #visual-stack .thumbnail-deck > a.deck-extra-2 {
    scroll-snap-align: end !important;
  }

  /* PORTFOLIO: the 3D spin gallery is much shorter on phones; its stage
     still centers the original cards and preserves drag/rotation. */
  body.luly-portfolio-page .luly-spin-gallery.clean-image-spin {
    padding-top: clamp(18px, 5vw, 30px) !important;
    padding-bottom: clamp(18px, 5vw, 30px) !important;
  }
  body.luly-portfolio-page .clean-image-spin .spin-gallery-shell {
    min-height: 0 !important;
    height: clamp(185px, 50vw, 230px) !important;
    padding: 0 !important;
  }
  body.luly-portfolio-page .clean-image-spin .spin-gallery-orbit {
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
  }

  /* LOGIN: subtle separation between logo and portal eyebrow. */
  body.luly-login-page .login-home-link {
    margin-bottom: 10px !important;
  }
}


/* ================================================================
   Mobile Experience v17 — Portfolio spin-again control (all screens).
   The button sits BELOW the interactive 3D carousel, never on an image.
   ================================================================ */
body.luly-portfolio-page .luly-spin-gallery .luly-spin-again-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: clamp(12px, 2.5vw, 20px) auto 0;
  padding: 0 12px;
}
body.luly-portfolio-page .luly-spin-gallery .luly-spin-again {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  min-height: 44px;
  padding: 10px 25px;
  border: 1px solid rgba(255,145,57,.62);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255,122,20,.15), rgba(18,12,9,.95));
  color: #ffb26c;
  font: 600 .9rem/1.3 Poppins, sans-serif;
  letter-spacing: .025em;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
body.luly-portfolio-page .luly-spin-gallery .luly-spin-again:hover:not(:disabled),
body.luly-portfolio-page .luly-spin-gallery .luly-spin-again:focus-visible {
  border-color: #ff9c4b;
  background: rgba(255,126,19,.22);
  color: #fff2e8;
}
body.luly-portfolio-page .luly-spin-gallery .luly-spin-again:active:not(:disabled) {
  transform: scale(.97);
}
body.luly-portfolio-page .luly-spin-gallery .luly-spin-again:disabled {
  opacity: .62;
  cursor: wait;
}
@media (max-width: 767.98px) {
  body.luly-portfolio-page .clean-image-spin .spin-gallery-orbit,
  body.luly-portfolio-page .clean-image-spin .spin-ring,
  body.luly-portfolio-page .clean-image-spin .spin-card,
  body.luly-portfolio-page .clean-image-spin .spin-card * {
    touch-action: none !important;
    overscroll-behavior: contain;
  }
  body.luly-portfolio-page .luly-spin-gallery .luly-spin-again-row {
    margin-top: 12px;
  }
  body.luly-portfolio-page .luly-spin-gallery .luly-spin-again {
    min-height: 46px;
    min-width: 148px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.luly-portfolio-page .luly-spin-gallery .luly-spin-again {
    transition: none;
  }
}

/* ================================================================
   Portfolio v19 — high-visibility, standalone Spin Again control.
   The 3D gallery remains independent of the Full Archive viewer.
   ================================================================ */
body.luly-portfolio-page .luly-spin-gallery .luly-spin-again-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: clamp(15px, 2.4vw, 24px) auto 0 !important;
  padding: 0 12px !important;
  position: relative;
  z-index: 5;
}
body.luly-portfolio-page .luly-spin-gallery button.luly-spin-again {
  position: relative;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 11px !important;
  min-height: 51px !important;
  min-width: 190px !important;
  padding: 12px 23px !important;
  border: 1px solid #ffc18a !important;
  border-radius: 999px !important;
  background: linear-gradient(115deg, #ffba74 0%, #ff8d2c 48%, #ff6811 100%) !important;
  color: #241107 !important;
  font: 800 .89rem/1.2 Poppins, sans-serif !important;
  letter-spacing: .012em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.18);
  box-shadow: 0 13px 28px rgba(245,99,13,.27), 0 3px 0 rgba(132,54,5,.5),
  inset 0 1px 0 rgba(255,255,255,.56) !important;
  opacity: 1 !important;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}
body.luly-portfolio-page .luly-spin-gallery button.luly-spin-again::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg,rgba(255,255,255,.26),transparent 48%);
}
body.luly-portfolio-page .luly-spin-gallery button.luly-spin-again .luly-spin-again-icon {
  display: inline-flex;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
body.luly-portfolio-page .luly-spin-gallery button.luly-spin-again svg {
  display: block;
  width: 20px;
  height: 20px;
  max-width: none;
}
body.luly-portfolio-page .luly-spin-gallery button.luly-spin-again:hover:not(:disabled) {
  filter: brightness(1.10) saturate(1.07) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 17px 34px rgba(245,99,13,.36), 0 4px 0 rgba(132,54,5,.52) !important;
}
body.luly-portfolio-page .luly-spin-gallery button.luly-spin-again:active:not(:disabled) {
  transform: translateY(1px) scale(.98) !important;
}
body.luly-portfolio-page .luly-spin-gallery button.luly-spin-again:disabled {
  color: #2a180c !important;
  opacity: .88 !important;
  cursor: progress;
}
body.luly-portfolio-page .luly-spin-gallery.is-spinning button.luly-spin-again svg {
  animation: lulySpinButtonIcon .65s linear infinite;
}
@keyframes lulySpinButtonIcon { to { transform: rotate(360deg); } }

/* The instruction is part of the markup: desktop never shows it. */
body.luly-portfolio-page #luly-vault .luly-mobile-viewer-gesture-guide {
  display: none;
}
@media (max-width: 767.98px) {
  /* Prevent iPhone Safari's vertical scroll takeover when dragging ANYWHERE
     inside the poster shell, including spacing/3D transformed cards. */
  body.luly-portfolio-page .luly-spin-gallery .spin-gallery-shell,
  body.luly-portfolio-page .luly-spin-gallery .spin-gallery-shell *,
  body.luly-portfolio-page .luly-spin-gallery .spin-gallery-orbit {
    touch-action: none !important;
    overscroll-behavior: contain;
    -webkit-user-select: none !important;
    user-select: none !important;
  }
  body.luly-portfolio-page .luly-spin-gallery button.luly-spin-again {
    min-height: 50px !important;
    min-width: 190px !important;
    font-size: .87rem !important;
    padding: 11px 20px !important;
  }
  body.luly-portfolio-page .luly-spin-gallery .luly-spin-again-row {
    margin-top: 15px !important;
  }
  body.luly-portfolio-page #luly-vault .vault-viewer-stage,
  body.luly-portfolio-page #luly-vault .vault-viewer-stage .vault-viewer-media {
    touch-action: none !important;
  }
  body.luly-portfolio-page #luly-vault .luly-mobile-viewer-gesture-guide {
    display: block !important;
    text-align: center !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.luly-portfolio-page .luly-spin-gallery button.luly-spin-again,
  body.luly-portfolio-page .luly-spin-gallery button.luly-spin-again svg {
    transition: none !important;
    animation: none !important;
  }
}

/* =============================================================
   Portfolio v20 — PHONE ONLY. Full Archive artwork-sized frame;
   Spin again uses LULY orange, not a pale peach highlight.
   Desktop styling and all gallery JS remain exactly as in v19.
   ============================================================= */
@media (max-width: 767.98px) {
  /* The viewer itself remains fullscreen, but its bordered media frame
     hugs the image instead of stretching to fill the remaining viewport.
     --viewer-ratio is set from image.naturalWidth / naturalHeight by
     the existing Full Archive script, including on each swipe. */
  body.luly-portfolio-page #luly-vault .vault-viewer-stage,
  body.luly-portfolio-page #luly-vault .vault-viewer.is-portrait .vault-viewer-stage,
  body.luly-portfolio-page #luly-vault .vault-viewer.is-square .vault-viewer-stage,
  body.luly-portfolio-page #luly-vault .vault-viewer.is-landscape .vault-viewer-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    /* Keep the close X clear above the image on compact phone screens. */
    padding-top: 39px !important;
    padding-bottom: 2px !important;
  }

  body.luly-portfolio-page #luly-vault .vault-viewer .vault-viewer-media,
  body.luly-portfolio-page #luly-vault .vault-viewer.is-portrait .vault-viewer-media,
  body.luly-portfolio-page #luly-vault .vault-viewer.is-square .vault-viewer-media,
  body.luly-portfolio-page #luly-vault .vault-viewer.is-landscape .vault-viewer-media {
    /* Width determined by BOTH screen width and available image height.
       This avoids the tall empty black frame on widescreen thumbnails. */
    width: min(100%, calc((100dvh - var(--luly-nav-safe-height, 76px) - 188px) * var(--viewer-ratio, 1.777778))) !important;
    height: auto !important;
    aspect-ratio: var(--viewer-ratio, 1.777778) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - var(--luly-nav-safe-height, 76px) - 188px) !important;
    flex: 0 1 auto !important;
    align-self: center !important;
    justify-self: auto !important;
    min-height: 0 !important;
    border-radius: 16px !important;
    background: #090604 !important;
    overflow: hidden !important;
  }

  body.luly-portfolio-page #luly-vault .vault-viewer .vault-viewer-media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  body.luly-portfolio-page #luly-vault .vault-viewer-caption {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: 100% !important;
  }

  body.luly-portfolio-page #luly-vault .luly-mobile-viewer-gesture-guide {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin-top: 2px !important;
  }

  /* Solid, saturated LULY orange on phones. Keep the premium shape
     and animated icon, but remove the near-white left highlight. */
  body.luly-portfolio-page .luly-spin-gallery button.luly-spin-again {
    background: linear-gradient(110deg, #ef6616 0%, #ff8523 52%, #e9610c 100%) !important;
    border-color: #ff963e !important;
    color: #200f06 !important;
    text-shadow: none !important;
    box-shadow: 0 10px 26px rgba(238,94,16,.26), 0 3px 0 rgba(112,43,4,.55),
    inset 0 1px 0 rgba(255,199,126,.16) !important;
  }
  body.luly-portfolio-page .luly-spin-gallery button.luly-spin-again::after {
    background: linear-gradient(130deg, rgba(255,180,97,.08), transparent 55%) !important;
  }
  body.luly-portfolio-page .luly-spin-gallery button.luly-spin-again:hover:not(:disabled) {
    filter: brightness(1.055) saturate(1.04) !important;
  }
}

/* ==============================================================
   PORTFOLIO v21 — FULL ARCHIVE PORTRAIT ARTWORK ONLY (PHONES)
   v20 correctly eliminated the empty bars on landscape work but
   left a larger-than-needed vertical reservation for posters.
   Extend only poster frames, without cropping images or moving
   the caption and swipe hint outside the safe viewing area.
   ============================================================== */
@media (max-width: 767.98px) {
  body.luly-portfolio-page #luly-vault .vault-viewer.is-portrait .vault-viewer-media {
    /* 148px safe reserve (v20 used 188px): about 14% more usable
       height on a typical iPhone with the bottom Safari toolbar. */
    width: min(100%, calc((100dvh - var(--luly-nav-safe-height, 76px) - 148px) * var(--viewer-ratio, .8))) !important;
    max-height: calc(100dvh - var(--luly-nav-safe-height, 76px) - 148px) !important;
    height: auto !important;
    aspect-ratio: var(--viewer-ratio, .8) !important;
    object-fit: contain !important;
  }
}


/* =============================================================
   PORTFOLIO v22 — MOBILE ONLY: dependable touch carousel and
   refined button sheen. Desktop and Full Archive untouched.
   ============================================================= */
@media (max-width: 767.98px) {
  body.luly-portfolio-page #spin-gallery .spin-gallery-shell,
  body.luly-portfolio-page #spin-gallery .spin-gallery-shell *,
  body.luly-portfolio-page #spin-gallery [data-spin-stage] {
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
  }
  body.luly-portfolio-page #spin-gallery .luly-spin-again-row {
    margin-top: 13px !important;
  }
  body.luly-portfolio-page #spin-gallery button.luly-spin-again {
    min-width: 156px !important;
    min-height: 44px !important;
    padding: 10px 20px !important;
    gap: 9px !important;
    background: linear-gradient(115deg, #fb8730 0%, #f6761c 53%, #ed6514 100%) !important;
    color: #261308 !important;
    font-size: .82rem !important;
    font-weight: 750 !important;
    letter-spacing: .01em !important;
    border: 1px solid rgba(255,169,94,.82) !important;
    text-shadow: none !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.28),
    0 5px 18px rgba(231,98,19,.11),
    inset 0 1px 0 rgba(255,203,153,.20) !important;
    filter: none !important;
  }
  body.luly-portfolio-page #spin-gallery button.luly-spin-again::after {
    background: linear-gradient(140deg, rgba(255,211,168,.045), transparent 58%) !important;
  }
  body.luly-portfolio-page #spin-gallery button.luly-spin-again:hover:not(:disabled) {
    filter: brightness(1.035) !important;
    transform: none !important;
    box-shadow: 0 8px 19px rgba(0,0,0,.32),
    0 6px 20px rgba(231,98,19,.15),
    inset 0 1px 0 rgba(255,203,153,.22) !important;
  }
  body.luly-portfolio-page #spin-gallery button.luly-spin-again:active:not(:disabled) {
    transform: scale(.975) !important;
  }
  body.luly-portfolio-page #spin-gallery button.luly-spin-again svg {
    width: 17px !important; height: 17px !important;
  }
  body.luly-portfolio-page #spin-gallery button.luly-spin-again .luly-spin-again-icon {
    flex-basis: 17px !important;
  }
}